*,
: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.17 | MIT License | https://tailwindcss.com*/
*,
:after,
:before {
    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: var(--mono-font);
    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: auto
}

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

@font-face {
    font-family: Inter;
    src: url(../assets/fonts/InterVariable.woff2) format("truetype");
    font-weight: 100 900;
    font-style: normal
}
@font-face {
    font-family: Montserrat;
    src: url(../assets/fonts/Montserrat-VariableFont_wght.woff2) format("truetype");
    font-weight: 100 900;
    font-style: normal
}
*,
:after,
:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root {
    --bg: #f4f6f5;
    --bg-alt: #edf0ee;
    --surface1: #fff;
    --surface2: #e8eceb;
    --stats: #e8edea;
    --text1: #103746;
    --text2: #4f5f5a;
    --text3: #6b807a;
    --text4: #8a9f9a;
    --accent: #103746;
    --accent-800: #0c2a35;
    --accent-900: #081e26;
    --accent-sub: #e8f1f3;
    --link: #1f5c63;
    --green: #2a6c3a;
    --border: #d5dcda;
    --border-strong: #b8c4c1;
    --display-font: "Instrument Serif", "Times New Roman", serif;
    --display-weight: 400;
    --display-style: normal;
    --display-tracking: -0.01em;
    --display-leading: 1.02;
    --body-font: "Inter", sans-serif;
    --mono-font: "Montserrat", "Inter", sans-serif
}

[data-type=sans] {
    --display-font: "Inter", sans-serif;
    --display-weight: 700;
    --display-tracking: -0.01em;
    --display-leading: 1.02
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text1);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden
}

@media (min-width:1024px) {
    .hero-content h1 {
        min-width: 724px;
    }
}

.container {
    width: 100%
}

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

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

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

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

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

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

.visible {
    visibility: visible
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.inset-0 {
    inset: 0
}

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

.bottom-0 {
    bottom: 0
}

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

.right-0 {
    right: 0
}

.right-\[-5\%\] {
    right: -5%
}

.right-\[-8\%\] {
    right: -8%
}

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

.top-0 {
    top: 0
}

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

.top-\[10\%\] {
    top: 10%
}

.z-\[-1\] {
    z-index: -1
}

.z-\[-2\] {
    z-index: -2
}

.z-\[1000\] {
    z-index: 1000
}

.z-\[100\] {
    z-index: 100
}

.z-\[1999\] {
    z-index: 1999
}

.z-\[1\] {
    z-index: 1
}

.z-\[2000\] {
    z-index: 2000
}

.col-span-2 {
    grid-column: span 2/span 2
}

.m-\[0_0_20px\] {
    margin: 0 0 20px
}

.m-\[20px_24px_28px\] {
    margin: 20px 24px 28px
}

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

.mb-0 {
    margin-bottom: 0
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.mr-\[48px\] {
    margin-right: 48px
}

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

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

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

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

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

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

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

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

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

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

.hidden {
    display: none
}

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

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

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

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

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

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

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

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

.h-\[90\%\] {
    height: 90%
}

.h-\[clamp\(340px\2c 52vw\2c 620px\)\] {
    height: clamp(340px, 52vw, 620px)
}

.h-auto {
    height: auto
}

.h-full {
    height: 100%
}

.h-px {
    height: 1px
}

.min-h-0 {
    min-height: 0
}

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

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

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

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

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

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

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

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

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

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

.w-\[70\%\] {
    width: 70%
}

.w-\[min\(360px\2c 86vw\)\] {
    width: min(360px, 86vw)
}

.w-full {
    width: 100%
}

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

.max-w-\[12ch\] {
    max-width: 12ch
}

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

.max-w-\[13ch\] {
    max-width: 13ch
}

.max-w-\[14ch\] {
    max-width: 14ch
}

.max-w-\[16ch\] {
    max-width: 16ch
}

.max-w-\[18ch\] {
    max-width: 18ch
}

.max-w-\[19ch\] {
    max-width: 19ch
}

.max-w-\[20ch\] {
    max-width: 20ch
}

.max-w-\[22ch\] {
    max-width: 22ch
}

.max-w-\[32ch\] {
    max-width: 32ch
}

.max-w-\[34ch\] {
    max-width: 34ch
}

.max-w-\[40ch\] {
    max-width: 40ch
}

.max-w-\[42ch\] {
    max-width: 42ch
}

.max-w-\[47ch\] {
    max-width: 47ch
}

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

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

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

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

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

.basis-0 {
    flex-basis: 0px
}

.-translate-y-1\/2 {
    --tw-translate-y: -50%
}

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

.-translate-y-px {
    --tw-translate-y: -1px
}

.translate-y-\[3px\] {
    --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))
}

.cursor-pointer {
    cursor: pointer
}

.resize-y {
    resize: vertical
}

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

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

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

.grid-cols-\[140px_1fr\] {
    grid-template-columns: 140px 1fr
}

.grid-cols-\[1fr_auto\] {
    grid-template-columns: 1fr auto
}

.grid-cols-\[42px_1fr\] {
    grid-template-columns: 42px 1fr
}

.grid-cols-\[42px_1fr_auto\] {
    grid-template-columns: 42px 1fr auto
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

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

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

.items-center {
    align-items: center
}

.items-baseline {
    align-items: baseline
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

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

.gap-0 {
    gap: 0
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.justify-self-center {
    justify-self: center
}

.overflow-hidden {
    overflow: hidden
}

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

.whitespace-nowrap {
    white-space: nowrap
}

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

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

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

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

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

.border {
    border-width: 1px
}

.border-0 {
    border-width: 0
}

.border-\[1\.5px\] {
    border-width: 1.5px
}

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

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

.border-l {
    border-left-width: 1px
}

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

.border-border {
    --tw-border-opacity: 1;
    border-color: rgb(213 220 218/var(--tw-border-opacity, 1))
}

.border-border-strong {
    --tw-border-opacity: 1;
    border-color: rgb(184 196 193/var(--tw-border-opacity, 1))
}

.border-text1 {
    --tw-border-opacity: 1;
    border-color: rgb(16 55 70/var(--tw-border-opacity, 1))
}

.border-transparent {
    border-color: transparent
}

.border-white\/10 {
    border-color: hsla(0, 0%, 100%, .1)
}

.bg-accent {
    --tw-bg-opacity: 1;
    background-color: rgb(16 55 70/var(--tw-bg-opacity, 1))
}

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

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

.bg-bg\/\[0\.72\] {
    background-color: rgba(244, 246, 245, .72)
}

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

.bg-text1\/\[0\.06\] {
    background-color: rgba(16, 55, 70, .06)
}

.bg-text3 {
    --tw-bg-opacity: 1;
    background-color: rgb(107 128 122/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\/50 {
    background-color: hsla(0, 0%, 100%, .5)
}

.bg-none {
    background-image: none
}

.p-0 {
    padding: 0
}

.p-\[0_24px_40px\] {
    padding: 0 24px 40px
}

.p-\[12px_14px\] {
    padding: 12px 14px
}

.p-\[12px_16px\] {
    padding: 12px 16px
}

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

.p-\[16px_24px\] {
    padding: 16px 24px
}

.p-\[16px_28px\] {
    padding: 16px 28px
}

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

.p-\[22px_24px\] {
    padding: 22px 24px
}

.p-\[28px_22px\] {
    padding: 28px 22px
}

.p-\[32px_28px_40px\] {
    padding: 32px 28px 40px
}

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

.p-\[40px_28px_36px\] {
    padding: 40px 28px 36px
}

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

.p-\[56px_0_40px\] {
    padding: 56px 0 40px
}

.p-\[7px_8px\] {
    padding: 7px 8px
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.text-left {
    text-align: left
}

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

.font-display {
    font-family: var(--display-font)
}

.font-mono,
.font-montserrat {
    font-family: var(--mono-font)
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.text-fluid-contact {
    font-size: clamp(36px, 4.4vw, 60px)
}

.text-fluid-cta {
    font-size: clamp(44px, 6vw, 88px)
}

.text-fluid-hero {
    font-size: clamp(44px, 6vw, 92px)
}

.text-fluid-imagebreak {
    font-size: clamp(24px, 3vw, 36px)
}

.text-fluid-mark {
    font-size: clamp(72px, 14vw, 200px)
}

.text-fluid-panel {
    font-size: clamp(28px, 2.6vw, 40px)
}

.text-fluid-pillars {
    font-size: clamp(36px, 4.6vw, 64px)
}

.text-fluid-process-num {
    font-size: clamp(32px, 3.2vw, 40px)
}

.text-fluid-process-title {
    font-size: clamp(26px, 2.6vw, 34px)
}

.text-fluid-quote {
    font-size: clamp(32px, 4vw, 56px)
}

.text-fluid-section {
    font-size: clamp(40px, 5.4vw, 76px)
}

.text-fluid-statement {
    font-size: clamp(36px, 5vw, 68px)
}

.text-fluid-tab {
    font-size: clamp(36px, 4.2vw, 60px)
}

.font-bold {
    font-weight: 700
}

.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-\[0\.85\] {
    line-height: .85
}

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

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

.leading-\[1\.08\] {
    line-height: 1.08
}

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

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

.leading-\[1\.2\] {
    line-height: 1.2
}

.leading-\[1\.55\] {
    line-height: 1.55
}

.leading-\[1\.65\] {
    line-height: 1.65
}

.leading-\[1\.6\] {
    line-height: 1.6
}

.leading-\[var\(--display-leading\)\] {
    line-height: var(--display-leading)
}

.leading-none {
    line-height: 1
}

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

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

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

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

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

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

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

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

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

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

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

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

.tracking-display {
    letter-spacing: var(--display-tracking)
}

.text-link {
    --tw-text-opacity: 1;
    color: rgb(31 92 99/var(--tw-text-opacity, 1))
}

.text-text1 {
    --tw-text-opacity: 1;
    color: rgb(16 55 70/var(--tw-text-opacity, 1))
}

.text-text2 {
    --tw-text-opacity: 1;
    color: rgb(79 95 90/var(--tw-text-opacity, 1))
}

.text-text3 {
    --tw-text-opacity: 1;
    color: rgb(107 128 122/var(--tw-text-opacity, 1))
}

.text-text4 {
    --tw-text-opacity: 1;
    color: rgb(138 159 154/var(--tw-text-opacity, 1))
}

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

.text-white\/35 {
    color: hsla(0, 0%, 100%, .35)
}

.text-white\/45 {
    color: hsla(0, 0%, 100%, .45)
}

.text-white\/50 {
    color: hsla(0, 0%, 100%, .5)
}

.text-white\/65 {
    color: hsla(0, 0%, 100%, .65)
}

.text-white\/70 {
    color: hsla(0, 0%, 100%, .7)
}

.no-underline {
    text-decoration-line: none
}

.opacity-70 {
    opacity: .7
}

.opacity-\[0\.14\] {
    opacity: .14
}

.opacity-\[0\.28\] {
    opacity: .28
}

.shadow-\[0_16px_40px_rgba\(16\2c 55\2c 70\2c 0\.14\)\] {
    --tw-shadow: 0 16px 40px rgba(16, 55, 70, .14);
    --tw-shadow-colored: 0 16px 40px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

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

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

.\[font-family\:inherit\] {
    font-family: inherit
}

.\[font-style\:var\(--display-style\)\] {
    font-style: var(--display-style)
}

.\[font-weight\:var\(--display-weight\)\] {
    font-weight: var(--display-weight)
}

.nav a {
    transition: color .2s, background .2s
}

.header-cta {
    transition: background .2s, transform .2s
}

.hamburger {
    transition: background .2s, border-color .2s
}

.btn-primary {
    transition: background .2s, color .2s, border-color .2s, transform .2s
}

.audience-tab-btn {
    transition: color .2s
}

.form-input,
.form-select,
.form-textarea {
    transition: border-color .2s, background .2s
}

.audience-radio-option {
    transition: border-color .2s, background .2s, color .2s
}

.contact-form-submit {
    transition: background .2s, border-color .2s, color .2s
}

.footer-bottom a {
    transition: opacity .2s
}

.tweaks-option {
    transition: background .15s, color .15s
}

.diptych-panel-cta {
    transition: gap .25s ease, color .2s
}

.header:after {
    content: "";
    position: absolute;
    left: 48px;
    right: 48px;
    bottom: 0;
    height: 1px;
    background: var(--border);
    opacity: .8
}

@media (max-width:640px) {
    .header:after {
        left: 24px;
        right: 24px
    }
}

.mobile-menu {
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1)
}

.mobile-menu.open {
    transform: translateX(0)
}

.mobile-menu-scrim {
    background: rgba(16, 55, 70, .32);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease
}

.mobile-menu-scrim.open {
    opacity: 1;
    pointer-events: auto
}

.hero-photo {
    background: url(../assets/images/hero.webp) center 55%/cover no-repeat;
    transform: scale(1.05)
}

.hero-photo-overlay {
    background: linear-gradient(180deg, rgba(16, 55, 70, .55) 0, rgba(16, 55, 70, .7) 55%, var(--bg) 100%)
}

.image-break-photo {
    background: url(../assets/images/image.webp) center 50%/cover no-repeat
}

.image-break-overlay {
    background: linear-gradient(180deg, rgba(16, 55, 70, .35), rgba(16, 55, 70, .55) 60%, rgba(16, 55, 70, .8))
}

[data-hero=photo] .hero-photo-wrap {
    display: block
}

[data-hero=photo] .hero-topo {
    opacity: 0
}

.audience-tab-text h3 em,
.audiences-title em,
.contact-title em,
.cta-headline em,
.diptych-panel h3 em,
.hero h1 em,
.pillars-title em,
.process-title em,
.pull-quote blockquote em {
    font-style: italic;
    color: var(--link)
}

.image-break-text em {
    font-style: italic;
    color: hsla(0, 0%, 100%, .78)
}

.pull-quote blockquote em {
    color: hsla(0, 0%, 100%, .7)
}

[data-type=sans] .hero h1 em {
    font-weight: 500
}

[data-type=sans] .audience-tab-text h3 em,
[data-type=sans] .audiences-title em,
[data-type=sans] .contact-title em,
[data-type=sans] .cta-headline em,
[data-type=sans] .diptych-panel h3 em,
[data-type=sans] .hero h1 em,
[data-type=sans] .pillars-title em,
[data-type=sans] .process-title em {
    font-style: normal;
    color: var(--link)
}

[data-type=sans] .image-break-text em {
    font-style: normal;
    color: hsla(0, 0%, 100%, .72)
}

[data-type=sans] .pull-quote blockquote em {
    font-style: normal;
    color: hsla(0, 0%, 100%, .7)
}

[data-type=sans] .process-step-num {
    color: var(--link)
}

[data-hero=photo] .hero h1 {
    color: #fff
}

[data-hero=photo] .hero h1 em,
[data-hero=photo] .hero-lede {
    color: hsla(0, 0%, 100%, .82)
}

[data-hero=photo] .hero-eyebrow {
    color: hsla(0, 0%, 100%, .75)
}

[data-hero=photo] .hero-eyebrow-line {
    background: hsla(0, 0%, 100%, .5)
}

[data-hero=photo] .hero .btn-primary {
    background: #fff;
    color: var(--accent)
}

.diptych-panel:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--link)
}

.diptych-panel[data-audience=technologists]:before {
    background: var(--green)
}

.diptych-panel[data-audience=technologists] .diptych-panel-label {
    color: var(--green)
}

.diptych-panel-label:before {
    content: "";
    width: 8px;
    height: 8px;
    background: currentColor;
    border-radius: 50%;
    display: inline-block
}

.diptych-panel-cta:hover {
    gap: 14px;
    color: var(--link);
    border-color: var(--link)
}

.diptych-panel[data-audience=technologists] .diptych-panel-cta:hover {
    color: var(--green);
    border-color: var(--green)
}

.audience-tabs,
[data-audiences=tabs] .diptych {
    display: none
}

[data-audiences=tabs] .audience-tabs {
    display: block
}

.audience-tab-panel {
    display: none
}

.audience-tab-panel.active {
    display: grid
}

.audience-tab-btn.active {
    color: var(--text1)
}

.audience-tab-btn.active:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent)
}

.image-break-eyebrow:before {
    content: "";
    width: 24px;
    height: 1px;
    background: hsla(0, 0%, 100%, .55)
}

.contact-form-label:before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--link);
    border-radius: 50%
}

.pillar-tag {
    border-top: 1px dashed var(--border)
}

.form-select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6" fill="none" stroke="%236B807A" stroke-width="1.5"><path d="M1 1 L5 5 L9 1"/></svg>');
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px
}

.audience-radio-option input[type=radio] {
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    transition: border-color .2s
}

.audience-radio-option input[type=radio]:checked {
    border-color: var(--link)
}

.audience-radio-option input[type=radio]:checked:after {
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--link);
    border-radius: 50%
}

.audience-radio-option:has(input[type=radio]:checked) {
    border-color: var(--link);
    background: var(--accent-sub);
    color: var(--text1);
    font-weight: 500
}

.pull-quote:before {
    opacity: .8;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><g fill="none" stroke="%23ffffff" stroke-width="0.6" opacity="0.15"><path d="M0 380 Q 200 280 400 310 T 800 280 T 1200 300"/><path d="M0 340 Q 200 240 400 270 T 800 240 T 1200 260"/><path d="M0 300 Q 200 200 400 230 T 800 200 T 1200 220"/><path d="M0 260 Q 200 160 400 190 T 800 160 T 1200 180"/><path d="M0 220 Q 200 120 400 150 T 800 120 T 1200 140"/><path d="M0 180 Q 200 80 400 110 T 800 80 T 1200 100"/><path d="M0 140 Q 200 40 400 70 T 800 40 T 1200 60"/></g></svg>')
}

.footer:before,
.pull-quote:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-size: cover;
    background-position: bottom
}

.footer:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400" preserveAspectRatio="none"><g fill="none" stroke="%23ffffff" stroke-width="0.5" opacity="0.1"><path d="M0 380 Q 200 280 400 310 T 800 280 T 1200 300"/><path d="M0 340 Q 200 240 400 270 T 800 240 T 1200 260"/><path d="M0 300 Q 200 200 400 230 T 800 200 T 1200 220"/><path d="M0 260 Q 200 160 400 190 T 800 160 T 1200 180"/><path d="M0 220 Q 200 120 400 150 T 800 120 T 1200 140"/><path d="M0 180 Q 200 80 400 110 T 800 80 T 1200 100"/></g></svg>')
}

[data-footer=mountain] .footer:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400" preserveAspectRatio="none"><g fill="%23ffffff" fill-opacity="0.04" stroke="%23ffffff" stroke-width="1" stroke-linejoin="round" stroke-opacity="0.45"><path d="M0 400 L0 320 L 140 220 L 220 280 L 340 140 L 470 260 L 560 180 L 700 300 L 820 200 L 960 280 L 1080 180 L 1200 260 L 1200 400 Z"/></g><g fill="none" stroke="%23ffffff" stroke-width="0.75" opacity="0.35"><path d="M0 340 L 120 260 L 200 300 L 300 200 L 430 300 L 540 230 L 660 320 L 790 240 L 920 310 L 1050 220 L 1200 290"/></g><g fill="none" stroke="%23ffffff" stroke-width="0.5" opacity="0.18"><path d="M0 290 L 90 230 L 180 270 L 270 190 L 390 280 L 500 220 L 620 290 L 760 220 L 890 280 L 1020 210 L 1200 270"/></g></svg>');
    background-size: 100% 55%;
    background-position: 0 0;
    background-repeat: no-repeat;
    opacity: .9
}

@media (max-width:700px) {
    [data-footer=mountain] .footer:before {
        background-size: 180% 45%;
        background-position: top;
        opacity: .7
    }
}

.tweaks-panel.visible {
    display: block
}

.tweaks-option.active {
    background: #fff;
    color: var(--text1);
    box-shadow: 0 1px 3px rgba(16, 55, 70, .08)
}

.fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0)
}

@media (prefers-reduced-motion:reduce) {
    .fade-up {
        opacity: 1;
        transform: none;
        transition: none
    }
}
p.error{
    color:red !important;
}
.last\:mb-0:last-child {
    margin-bottom: 0
}

.last\:border-b:last-child {
    border-bottom-width: 1px
}

.last\:border-b-0:last-child {
    border-bottom-width: 0
}

.hover\:border-border-strong:hover {
    --tw-border-opacity: 1;
    border-color: rgb(184 196 193/var(--tw-border-opacity, 1))
}

.hover\:border-text1:hover {
    --tw-border-opacity: 1;
    border-color: rgb(16 55 70/var(--tw-border-opacity, 1))
}

.hover\:bg-accent-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(12 42 53/var(--tw-bg-opacity, 1))
}

.hover\:bg-text1\/\[0\.03\]:hover {
    background-color: rgba(16, 55, 70, .03)
}

.hover\:bg-text1\/\[0\.04\]:hover {
    background-color: rgba(16, 55, 70, .04)
}

.hover\:text-text1:hover {
    --tw-text-opacity: 1;
    color: rgb(16 55 70/var(--tw-text-opacity, 1))
}

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

.focus\:border-link:focus {
    --tw-border-opacity: 1;
    border-color: rgb(31 92 99/var(--tw-border-opacity, 1))
}

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

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

@media (min-width:640px) {
    .sm\:min-h-\[82vh\] {
        min-height: 82vh
    }

    .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\:gap-\[64px\] {
        gap: 64px
    }

    .sm\:p-\[40px\] {
        padding: 40px
    }

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

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

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

@media (min-width:768px) {
    .md\:col-auto {
        grid-column: auto
    }

    .md\:grid-cols-\[1fr_auto\] {
        grid-template-columns: 1fr auto
    }

    .md\:grid-cols-\[2fr_1fr_1fr_1fr\] {
        grid-template-columns: 2fr 1fr 1fr 1fr
    }

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

    .md\:gap-\[64px\] {
        gap: 64px
    }

    .md\:gap-\[80px\] {
        gap: 80px
    }

    .md\:p-\[0_64px_56px\] {
        padding: 0 64px 56px
    }

    .md\:text-right {
        text-align: right
    }
}

@media (min-width:1024px) {
    .lg\:mb-\[72px\] {
        margin-bottom: 72px
    }

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

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

    .lg\:flex {
        display: flex
    }

    .lg\:hidden {
        display: none
    }

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

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

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

    .lg\:grid-cols-\[120px_1fr_1fr\] {
        grid-template-columns: 120px 1fr 1fr
    }

    .lg\:grid-cols-\[1fr_1\.1fr\] {
        grid-template-columns: 1fr 1.1fr
    }

    .lg\:grid-cols-\[1fr_420px\] {
        grid-template-columns: 1fr 420px
    }

    .lg\:grid-cols-\[1fr_auto_1fr\] {
        grid-template-columns: 1fr auto 1fr
    }

    .lg\:grid-cols-\[220px_1fr\] {
        grid-template-columns: 220px 1fr
    }

    .lg\:gap-\[64px\] {
        gap: 64px
    }

    .lg\:gap-\[80px\] {
        gap: 80px
    }

    .lg\:gap-\[96px\] {
        gap: 96px
    }

    .lg\:gap-px {
        gap: 1px
    }

    .lg\:overflow-hidden {
        overflow: hidden
    }

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

    .lg\:rounded-none {
        border-radius: 0
    }

    .lg\:border {
        border-width: 1px
    }

    .lg\:border-0 {
        border-width: 0
    }

    .lg\:border-b-0 {
        border-bottom-width: 0
    }

    .lg\:border-r {
        border-right-width: 1px
    }

    .lg\:border-border {
        --tw-border-opacity: 1;
        border-color: rgb(213 220 218/var(--tw-border-opacity, 1))
    }

    .lg\:bg-border {
        --tw-bg-opacity: 1;
        background-color: rgb(213 220 218/var(--tw-bg-opacity, 1))
    }

    .lg\:p-\[40px_32px_48px_0\] {
        padding: 40px 32px 48px 0
    }

    .lg\:p-\[48px_40px_40px\] {
        padding: 48px 40px 40px
    }

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

    .lg\:last\:border-r-0:last-child {
        border-right-width: 0
    }

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

@media (min-width:1280px) {
    .xl\:inline-block {
        display: inline-block
    }

    .xl\:inline {
        display: inline
    }
}

@media (min-width:1024px) {
    .lg\:\[\&\:not\(\:first-child\)\]\:pl-\[32px\]:not(:first-child) {
        padding-left: 32px
    }
}

  .new-shoulder-text {
  font-family: 'Montserrat', sans-serif !important;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

/* =================================================================
   ALTA — Advanced Leading Technologists Agency
   All utility-expressible styling lives on the elements in index.html.
   This file holds ONLY what Tailwind utilities cannot express:
   @font-face, the :root / [data-*] variant theming, pseudo-element
   SVG art, the custom radio control, transitions that back hover
   states, and the fade-up reveal.
   ================================================================= */

/* ───────────────────────── BASE ───────────────────────── */
@layer base {
  @font-face {
    font-family: "Inter";
    src: url("../assets/fonts/InterVariable.woff2") format("truetype");
    font-weight: 100 900;
    font-style: normal;
  }

  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  :root {
    --bg: #f4f6f5;
    --bg-alt: #edf0ee;
    --surface1: #ffffff;
    --surface2: #e8eceb;
    --stats: #e8edea;
    --text1: #103746;
    --text2: #4f5f5a;
    --text3: #6b807a;
    --text4: #8a9f9a;
    --accent: #103746;
    --accent-800: #0c2a35;
    --accent-900: #081e26;
    --accent-sub: #e8f1f3;
    --link: #1f5c63;
    --green: #2a6c3a;
    --border: #d5dcda;
    --border-strong: #b8c4c1;

    /* Type (default: editorial — Instrument Serif display + Inter body) */
    --display-font: "Instrument Serif", "Times New Roman", serif;
    --display-weight: 400;
    --display-style: normal;
    --display-tracking: -0.01em;
    --display-leading: 1.02;
    --body-font: "Inter", sans-serif;
    --mono-font: "Montserrat", "Inter", sans-serif;
  }

  [data-type="sans"] {
    --display-font: "Inter", sans-serif;
    --display-weight: 700;
    --display-tracking: -0.01em;
    --display-leading: 1.02;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text1);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }


  /* Desktop hero headline floor (kept from the original) */
  @media (min-width: 1024px) {
    .hero-content h1 {
      min-width: 663px;
    }
  }
}

/* ─────── TRANSITIONS (back the hover/state utilities) ─────── */
.nav a {
  transition: color 0.2s, background 0.2s;
}
.header-cta {
  transition: background 0.2s, transform 0.2s;
}
.hamburger {
  transition: background 0.2s, border-color 0.2s;
}
.btn-primary {
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.audience-tab-btn {
  transition: color 0.2s;
}
.form-input,
.form-select,
.form-textarea {
  transition: border-color 0.2s, background 0.2s;
}
.audience-radio-option {
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.contact-form-submit {
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.footer-bottom a {
  transition: opacity 0.2s;
}
.tweaks-option {
  transition: background 0.15s, color 0.15s;
}
.diptych-panel-cta {
  transition: gap 0.25s ease, color 0.2s;
}

/* ───────── HEADER hairline (pseudo-element) ───────── */
.header::after {
  content: "";
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 0;
  height: 1px;
  background: var(--border);
  opacity: 0.8;
}
@media (max-width: 640px) {
  .header::after {
    left: 24px;
    right: 24px;
  }
}

/* ───────── MOBILE MENU (drawer slide + scrim) ───────── */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.open {
  transform: translateX(0);
}
.mobile-menu-scrim {
  background: rgba(16, 55, 70, 0.32);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}
.mobile-menu-scrim.open {
  opacity: 1;
  pointer-events: auto;
}

/* ───────── HERO photo + overlay + topo (variant driven) ───────── */
.hero-photo {
  background: url("../assets/images/hero.webp") center 55% / cover no-repeat;
  transform: scale(1.05);
}
.hero-photo-overlay {
  background: linear-gradient(
    180deg,
    rgba(16, 55, 70, 0.55) 0%,
    rgba(16, 55, 70, 0.7) 55%,
    var(--bg) 100%
  );
}

.image-break-photo {
  background: url("../assets/images/image.webp") center 50% / cover no-repeat;
}
.image-break-overlay {
  background: linear-gradient(
    180deg,
    rgba(16, 55, 70, 0.35) 0%,
    rgba(16, 55, 70, 0.55) 60%,
    rgba(16, 55, 70, 0.8) 100%
  );
}

[data-hero="photo"] .hero-photo-wrap {
  display: block;
}
[data-hero="photo"] .hero-topo {
  opacity: 0;
}

/* ───────── DISPLAY <em> ACCENTS (italic ↔ sans variant) ───────── */
.hero h1 em,
.audiences-title em,
.diptych-panel h3 em,
.audience-tab-text h3 em,
.pillars-title em,
.process-title em,
.cta-headline em,
.contact-title em,
.pull-quote blockquote em {
  font-style: italic;
  color: var(--link);
}
.image-break-text em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.78);
}
.pull-quote blockquote em {
  color: rgba(255, 255, 255, 0.7);
}

[data-type="sans"] .hero h1 em {
  font-style: normal;
  color: var(--link);
  font-weight: 500;
}
[data-type="sans"] .audiences-title em,
[data-type="sans"] .diptych-panel h3 em,
[data-type="sans"] .audience-tab-text h3 em,
[data-type="sans"] .pillars-title em,
[data-type="sans"] .process-title em,
[data-type="sans"] .cta-headline em,
[data-type="sans"] .contact-title em {
  font-style: normal;
  color: var(--link);
}
[data-type="sans"] .image-break-text em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.72);
}
[data-type="sans"] .pull-quote blockquote em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.7);
}
[data-type="sans"] .process-step-num {
  color: var(--link);
}

/* ───────── HERO photo-mode text overrides (must follow the em rules) ───────── */
[data-hero="photo"] .hero h1 {
  color: #fff;
}
[data-hero="photo"] .hero h1 em {
  color: rgba(255, 255, 255, 0.82);
}
[data-hero="photo"] .hero-lede {
  color: rgba(255, 255, 255, 0.82);
}
[data-hero="photo"] .hero-eyebrow {
  color: rgba(255, 255, 255, 0.75);
}
[data-hero="photo"] .hero-eyebrow-line {
  background: rgba(255, 255, 255, 0.5);
}
[data-hero="photo"] .hero .btn-primary {
  background: #fff;
  color: var(--accent);
}
 .legal-prose h2 { font-size: 22px; line-height: 1.25; font-weight: 600; color: var(--text1); margin: 48px 0 16px; }
  .legal-prose h2:first-of-type { margin-top: 8px; }
  .legal-prose p { font-size: 16px; line-height: 1.7; color: var(--text2); margin-top: 18px; }
  .legal-prose .ol-item { display: flex;  margin-top:0px;}
  .legal-prose p.ol-item > .ol-num { flex: 0 0 1.8em; }
  .legal-prose ul { list-style: disc !important; margin: 0 0 18px 0 !important; padding-left: 22px !important; }
  .legal-prose ul li { list-style: disc !important; display: list-item !important; }
  .legal-prose ol { list-style: decimal !important; margin: 0 0 18px 0 !important; padding-left: 22px !important; }
  .legal-prose ol li { list-style: decimal !important; display: list-item !important; }
  .legal-prose li { font-size: 16px; line-height: 1.7; color: var(--text2); margin-bottom: 8px; }
  .legal-prose a { color: var(--link); text-decoration: underline; }
  .legal-prose strong { color: var(--text1); font-weight: 600; }
/* ───────── DIPTYCH accent strips + label dot + cta hover ───────── */
.diptych-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--link);
}
.diptych-panel[data-audience="technologists"]::before {
  background: var(--green);
}
.diptych-panel[data-audience="technologists"] .diptych-panel-label {
  color: var(--green);
}
.diptych-panel-label::before {
  content: "";
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 50%;
  display: inline-block;
}
.diptych-panel-cta:hover {
  gap: 14px;
  color: var(--link);
  border-color: var(--link);
}
.diptych-panel[data-audience="technologists"] .diptych-panel-cta:hover {
  color: var(--green);
  border-color: var(--green);
}

/* ───────── AUDIENCES: diptych ↔ tabs variant switch ───────── */
.audience-tabs {
  display: none;
}
[data-audiences="tabs"] .diptych {
  display: none;
}
[data-audiences="tabs"] .audience-tabs {
  display: block;
}
.audience-tab-panel {
  display: none;
}
.audience-tab-panel.active {
  display: grid;
}
.audience-tab-btn.active {
  color: var(--text1);
}
.audience-tab-btn.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
}

/* ───────── EYEBROW / LABEL leading marks (pseudo-elements) ───────── */
.image-break-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
}
.contact-form-label::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--link);
  border-radius: 50%;
}

/* ───────── PILLAR tag dashed rule ───────── */
.pillar-tag {
  border-top: 1px dashed var(--border);
}

/* ───────── FORM custom select arrow + radio control ───────── */
.form-select {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6" fill="none" stroke="%236B807A" stroke-width="1.5"><path d="M1 1 L5 5 L9 1"/></svg>');
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px;
}

.audience-radio-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s;
}
.audience-radio-option input[type="radio"]:checked {
  border-color: var(--link);
}
.audience-radio-option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--link);
  border-radius: 50%;
}
.audience-radio-option:has(input[type="radio"]:checked) {
  border-color: var(--link);
  background: var(--accent-sub);
  color: var(--text1);
  font-weight: 500;
}

/* ───────── PULL QUOTE + FOOTER topographic art (pseudo-elements) ───────── */
.pull-quote::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.8;
  pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><g fill="none" stroke="%23ffffff" stroke-width="0.6" opacity="0.15"><path d="M0 380 Q 200 280 400 310 T 800 280 T 1200 300"/><path d="M0 340 Q 200 240 400 270 T 800 240 T 1200 260"/><path d="M0 300 Q 200 200 400 230 T 800 200 T 1200 220"/><path d="M0 260 Q 200 160 400 190 T 800 160 T 1200 180"/><path d="M0 220 Q 200 120 400 150 T 800 120 T 1200 140"/><path d="M0 180 Q 200 80 400 110 T 800 80 T 1200 100"/><path d="M0 140 Q 200 40 400 70 T 800 40 T 1200 60"/></g></svg>');
  background-size: cover;
  background-position: center bottom;
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400" preserveAspectRatio="none"><g fill="none" stroke="%23ffffff" stroke-width="0.5" opacity="0.1"><path d="M0 380 Q 200 280 400 310 T 800 280 T 1200 300"/><path d="M0 340 Q 200 240 400 270 T 800 240 T 1200 260"/><path d="M0 300 Q 200 200 400 230 T 800 200 T 1200 220"/><path d="M0 260 Q 200 160 400 190 T 800 160 T 1200 180"/><path d="M0 220 Q 200 120 400 150 T 800 120 T 1200 140"/><path d="M0 180 Q 200 80 400 110 T 800 80 T 1200 100"/></g></svg>');
  background-size: cover;
  background-position: center bottom;
}
[data-footer="mountain"] .footer::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400" preserveAspectRatio="none"><g fill="%23ffffff" fill-opacity="0.04" stroke="%23ffffff" stroke-width="1" stroke-linejoin="round" stroke-opacity="0.45"><path d="M0 400 L0 320 L 140 220 L 220 280 L 340 140 L 470 260 L 560 180 L 700 300 L 820 200 L 960 280 L 1080 180 L 1200 260 L 1200 400 Z"/></g><g fill="none" stroke="%23ffffff" stroke-width="0.75" opacity="0.35"><path d="M0 340 L 120 260 L 200 300 L 300 200 L 430 300 L 540 230 L 660 320 L 790 240 L 920 310 L 1050 220 L 1200 290"/></g><g fill="none" stroke="%23ffffff" stroke-width="0.5" opacity="0.18"><path d="M0 290 L 90 230 L 180 270 L 270 190 L 390 280 L 500 220 L 620 290 L 760 220 L 890 280 L 1020 210 L 1200 270"/></g></svg>');
  background-size: 100% 55%;
  background-position: left top;
  background-repeat: no-repeat;
  opacity: 0.9;
}

  .legal-prose h2 { font-size: 22px; line-height: 1.25; font-weight: 600; color: var(--text1); margin: 48px 0 16px; }
  .legal-prose h2:first-of-type { margin-top: 8px; }
  .legal-prose p { font-size: 16px; line-height: 1.7; color: var(--text2); }
  .legal-prose ul { list-style: disc !important; margin: 0 0 18px 0 !important; padding-left: 22px !important; }
  .legal-prose ul li { list-style: disc !important; display: list-item !important; }
  .legal-prose ol { list-style: decimal !important; margin: 0 0 18px 0 !important; padding-left: 22px !important; }
  .legal-prose ol li { list-style: decimal !important; display: list-item !important; }
  .legal-prose li { font-size: 16px; line-height: 1.7; color: var(--text2); margin-bottom: 8px; }
  .legal-prose a { color: var(--link); text-decoration: underline; }
  .legal-prose strong { color: var(--text1); font-weight: 600; }

@media (max-width: 700px) {
  [data-footer="mountain"] .footer::before {
    background-size: 180% 45%;
    background-position: center top;
    opacity: 0.7;
  }
}

/* ───────── TWEAKS panel show + active option (JS toggled) ───────── */
.tweaks-panel.visible {
  display: block;
}
.tweaks-option.active {
  background: #fff;
  color: var(--text1);
  box-shadow: 0 1px 3px rgba(16, 55, 70, 0.08);
}

/* ───────── FADE-UP reveal ───────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 767px) {
  .new-container {
    padding-left: 24px;
    padding-right: 24px;
  }
  
    .diptych-feature {
    grid-template-columns: 33px 1fr 1fr !important;
    gap:10px;
  }
  .new-button {
    align-items: flex-start;
  }
  .new-hero {
    gap: 20px;
  }
  .hero-eyebrow  {
    margin-bottom: 20px;
  }
  .mobile-padding a {
    font-size: 16px;
    padding: 12px 24px;
  }
  .mobile-heading {
    font-size: 35px;
  }
    .hero-content h1 {
    min-width:280px;
  }

}

@media (min-width: 768px) and (max-width: 1024px) {
    .new-hero {
    gap: 20px
  }
  .hero-eyebrow  {
    margin-bottom: 20px;
  }
    .mobile-padding a {
    font-size: 18px;
    padding: 15px 24px;
  }
  .hero-content h1 {
    min-width:460px;
  }
}

@media (min-width: 1000px) and (max-width: 1208px) {
  .new-hero {
    gap: 20px;
  }
  .hero-content {
     width: 550px;
  }
}


@media (min-width: 1280px) {
  .new-header-inner {
    gap:10px;
  }
}

@media (min-width: 970px) and (max-width: 1050px) {
      .hero-content h1 {
    min-width:490px;
  }
}