@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

        *,
        :before,
        :after,
        ::backdrop {
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-border-style: solid;
            --tw-leading: initial;
            --tw-font-weight: initial;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-outline-style: solid;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial
        }
    }
}

@layer theme {

    :root,
    :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-blue-600: oklch(54.6% .245 262.881);
        --color-gray-600: oklch(44.6% .03 256.802);
        --color-white: #fff;
        --spacing: .25rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1 / .75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25 / .875);
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --radius-md: .375rem;
        --radius-xl: .75rem;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono)
    }
}

@layer base {

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

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

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

    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;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    b,
    strong {
        font-weight: bolder
    }

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

    small {
        font-size: 80%
    }

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

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

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

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,
    ul,
    menu {
        list-style: none
    }

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

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

    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

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

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

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

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

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

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

    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

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

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

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

@layer components;

@layer utilities {
    .\@container\/card-header {
        container: card-header/inline-size
    }

    .visible {
        visibility: visible
    }

    .static {
        position: static
    }

    .start {
        inset-inline-start: var(--spacing)
    }

    .z-50 {
        z-index: 50
    }

    .col-start-2 {
        grid-column-start: 2
    }

    .row-span-2 {
        grid-row: span 2/span 2
    }

    .row-start-1 {
        grid-row-start: 1
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .hidden {
        display: none
    }

    .inline-flex {
        display: inline-flex
    }

    .size-3\.5 {
        width: calc(var(--spacing) * 3.5);
        height: calc(var(--spacing) * 3.5)
    }

    .size-4 {
        width: calc(var(--spacing) * 4);
        height: calc(var(--spacing) * 4)
    }

    .w-64 {
        width: calc(var(--spacing) * 64)
    }

    .w-fit {
        width: fit-content
    }

    .shrink-0 {
        flex-shrink: 0
    }

    .origin-\(--radix-hover-card-content-transform-origin\) {
        transform-origin: var(--radix-hover-card-content-transform-origin)
    }

    .transform {
        transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
    }

    .auto-rows-min {
        grid-auto-rows: min-content
    }

    .grid-rows-\[auto_auto\] {
        grid-template-rows: auto auto
    }

    .flex-col {
        flex-direction: column
    }

    .items-center {
        align-items: center
    }

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

    .justify-center {
        justify-content: center
    }

    .gap-1 {
        gap: calc(var(--spacing) * 1)
    }

    .gap-1\.5 {
        gap: calc(var(--spacing) * 1.5)
    }

    .gap-6 {
        gap: calc(var(--spacing) * 6)
    }

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

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

    .overflow-hidden {
        overflow: hidden
    }

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

    .rounded-md {
        border-radius: var(--radius-md)
    }

    .rounded-xl {
        border-radius: var(--radius-xl)
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .border-transparent {
        border-color: #0000
    }

    .p-4 {
        padding: calc(var(--spacing) * 4)
    }

    .px-2 {
        padding-inline: calc(var(--spacing) * 2)
    }

    .px-6 {
        padding-inline: calc(var(--spacing) * 6)
    }

    .py-0\.5 {
        padding-block: calc(var(--spacing) * .5)
    }

    .py-6 {
        padding-block: calc(var(--spacing) * 6)
    }

    .text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }

    .text-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading, var(--text-xs--line-height))
    }

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

    .font-bold {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold)
    }

    .font-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .whitespace-nowrap {
        white-space: nowrap
    }

    .text-blue-600 {
        color: var(--color-blue-600)
    }

    .text-current {
        color: currentColor
    }

    .text-gray-600 {
        color: var(--color-gray-600)
    }

    .text-white {
        color: var(--color-white)
    }

    .shadow-md {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-sm {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .shadow-xs {
        --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .outline-hidden {
        --tw-outline-style: none;
        outline-style: none
    }

    @media(forced-colors:active) {
        .outline-hidden {
            outline-offset: 2px;
            outline: 2px solid #0000
        }
    }

    .outline {
        outline-style: var(--tw-outline-style);
        outline-width: 1px
    }

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

    .transition-\[color\,box-shadow\] {
        transition-property: color, box-shadow;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-shadow {
        transition-property: box-shadow;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .transition-none {
        transition-property: none
    }

    .outline-none {
        --tw-outline-style: none;
        outline-style: none
    }

    .focus-visible\:ring-\[3px\]:focus-visible {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .disabled\:cursor-not-allowed:disabled {
        cursor: not-allowed
    }

    .disabled\:opacity-50:disabled {
        opacity: .5
    }

    .has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]) {
        grid-template-columns: 1fr auto
    }

    .data-\[orientation\=horizontal\]\:h-px[data-orientation=horizontal] {
        height: 1px
    }

    .data-\[orientation\=horizontal\]\:w-full[data-orientation=horizontal] {
        width: 100%
    }

    .data-\[orientation\=vertical\]\:h-full[data-orientation=vertical] {
        height: 100%
    }

    .data-\[orientation\=vertical\]\:w-px[data-orientation=vertical] {
        width: 1px
    }

    .\[\.border-b\]\:pb-6.border-b {
        padding-bottom: calc(var(--spacing) * 6)
    }

    .\[\.border-t\]\:pt-6.border-t {
        padding-top: calc(var(--spacing) * 6)
    }

    .\[\&\>svg\]\:pointer-events-none>svg {
        pointer-events: none
    }

    .\[\&\>svg\]\:size-3>svg {
        width: calc(var(--spacing) * 3);
        height: calc(var(--spacing) * 3)
    }
}

:root {
    --ink: #11110f;
    --paper: #f2efe7;
    --paper-deep: #e6e1d6;
    --signal: #dfff00;
    --muted: #6d6b64;
    --line: #11110f2e;
    --white: #fffef8;
    --background: #f2efe7;
    --foreground: #11110f;
    --card: #fffef8;
    --card-foreground: #11110f;
    --primary: #11110f;
    --primary-foreground: #fffef8;
    --secondary: #e6e1d6;
    --secondary-foreground: #11110f;
    --muted-foreground: #6d6b64;
    --border: #11110f2e;
    --radius: 0
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    font-family: Avenir Next, Helvetica Neue, Helvetica, sans-serif
}

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

button,
input,
textarea {
    font: inherit
}

button,
a {
    -webkit-tap-highlight-color: transparent
}

::selection {
    color: var(--ink);
    background: var(--signal)
}

.inquiry-label {
    display: inline-block;
    /* keeps label/select together nicely */
}

.inquiry-select {
    display: block;
    /* starts select on its own line */
    margin-top: 6px;
    /* optional spacing */
}

.skip-link {
    z-index: 100;
    background: var(--signal);
    color: var(--ink);
    padding: .75rem 1rem;
    position: fixed;
    top: -4rem;
    left: 1rem
}

.skip-link:focus {
    top: 1rem
}

.site-header {
    z-index: 50;
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: #f2efe7f0;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 76px;
    padding: 0 clamp(1.25rem, 4vw, 4rem);
    display: grid;
    position: sticky;
    top: 0
}

.wordmark {
    align-items: center;
    gap: .85rem;
    width: fit-content;
    display: inline-flex
}

.wordmark-logo-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
    border-radius: 4px;
}

.wordmark-mark {
    background: var(--ink);
    width: 38px;
    height: 38px;
    color: var(--signal);
    place-items: center;
    font: 700 .76rem/1 ui-monospace, monospace;
    display: grid
}

.wordmark-name {
    letter-spacing: -.03em;
    font-weight: 700;
    font-size: 1.50rem;
}

.site-nav {
    align-items: center;
    gap: 2rem;
    display: flex
}

.nav-link {
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 1.65rem 0;
    font-size: .76rem;
    font-weight: 700;
    position: relative
}

.nav-link:after {
    content: "";
    background: var(--ink);
    height: 2px;
    transition: transform .2s;
    position: absolute;
    inset: auto 0 17px;
    transform: scaleX(0)
}

.nav-link:hover,
.nav-link-active {
    color: var(--ink)
}

.nav-link:hover:after,
.nav-link-active:after {
    transform: scaleX(1)
}

.header-cta {
    justify-self: end;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 700;
    display: inline-flex
}

.section-shell {
    width: min(100% - 2.5rem, 1320px);
    margin-inline: auto
}

.hero {
    grid-template-columns: 1.18fr .82fr;
    align-items: center;
    gap: clamp(3rem, 6vw, 7rem);
    min-height: calc(100vh - 76px);
    padding-block: clamp(5rem, 9vw, 9rem);
    display: grid
}

.eyebrow,
.section-index {
    letter-spacing: .13em;
    text-transform: uppercase;
    font: 700 .72rem/1.3 ui-monospace, SFMono-Regular, monospace
}

.eyebrow {
    align-items: center;
    gap: .65rem;
    margin-bottom: 2rem;
    display: flex
}

.status-dot {
    background: #64d66c;
    border-radius: 50%;
    flex: none;
    width: 9px;
    height: 9px;
    box-shadow: 0 0 0 5px #64d66c26
}

.hero h1 {
    letter-spacing: -.065em;
    max-width: 870px;
    margin: 0;
    font: 500 clamp(3.4rem, 7.2vw, 7.3rem)/.91 Georgia, serif
}

.hero h1 em,
.principles-section blockquote em {
    text-decoration: underline;
    -webkit-text-decoration-color: var(--signal);
    text-decoration-color: var(--signal);
    text-underline-offset: .05em;
    font-weight: 400;
    text-decoration-thickness: .15em
}

.hero-intro {
    color: #42413c;
    max-width: 650px;
    margin: 2.3rem 0 0;
    font-size: clamp(1.08rem, 1.7vw, 1.3rem);
    line-height: 1.65
}

.hero-actions {
    align-items: center;
    gap: 1.8rem;
    margin-top: 2.5rem;
    display: flex
}

.button {
    border: 1px solid var(--ink);
    letter-spacing: .035em;
    cursor: pointer;
    border-radius: 0;
    justify-content: center;
    align-items: center;
    gap: .65rem;
    min-height: 50px;
    padding: .85rem 1.25rem;
    font-size: .82rem;
    font-weight: 800;
    transition: transform .2s, box-shadow .2s, background .2s;
    display: inline-flex
}

.button:hover {
    box-shadow: 5px 5px 0 var(--signal);
    transform: translate(-3px, -3px)
}

.button-primary {
    background: var(--ink);
    color: var(--white)
}

.button-compact {
    background: 0 0;
    min-height: 42px
}

.text-link {
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-bottom: 1px solid;
    align-items: center;
    gap: .45rem;
    width: fit-content;
    padding: .35rem 0;
    font-weight: 700;
    display: inline-flex
}

.hero-system {
    min-height: 570px;
    color: var(--white);
    background: var(--ink);
    padding: 1.2rem;
    position: relative;
    overflow: hidden
}

.hero-system:before,
.hero-system:after {
    content: "";
    border: 1px solid #ffffff29;
    border-radius: 50%;
    position: absolute
}

.hero-system:before {
    width: 420px;
    height: 420px;
    top: -180px;
    right: -150px
}

.hero-system:after {
    width: 260px;
    height: 260px;
    bottom: -120px;
    left: -110px
}

.system-topline,
.system-metrics {
    z-index: 2;
    letter-spacing: .12em;
    justify-content: space-between;
    font: 600 .65rem/1 ui-monospace, monospace;
    display: flex;
    position: relative
}

.system-orbit {
    place-items: center;
    height: 455px;
    display: grid;
    position: relative
}

.system-orbit:before,
.system-orbit:after {
    content: "";
    border: 1px solid #dfff0059;
    border-radius: 50%;
    position: absolute
}

.system-orbit:before {
    width: 310px;
    height: 310px
}

.system-orbit:after {
    border-color: #ffffff24;
    width: 420px;
    height: 420px
}

.system-core {
    z-index: 2;
    background: var(--signal);
    width: 166px;
    height: 166px;
    color: var(--ink);
    letter-spacing: .09em;
    border-radius: 50%;
    place-items: center;
    gap: .7rem;
    font: 800 .7rem/1 ui-monospace, monospace;
    display: grid;
    position: relative
}

.orbit-label {
    z-index: 3;
    background: var(--ink);
    letter-spacing: .08em;
    border: 1px solid #ffffff47;
    padding: .48rem .65rem;
    font: 600 .58rem/1 ui-monospace, monospace;
    position: absolute
}

.orbit-one {
    top: 14%;
    left: 8%
}

.orbit-two {
    top: 42%;
    right: 2%
}

.orbit-three {
    bottom: 10%;
    left: 18%
}

.system-metrics {
    flex-wrap: wrap;
    gap: .6rem
}

.system-metrics span {
    color: #cdcbc2;
    align-items: center;
    gap: .35rem;
    display: flex
}

.marquee {
    border-block: 1px solid var(--ink);
    background: var(--signal);
    padding: 1.05rem 0;
    overflow: hidden
}

.marquee-track {
    letter-spacing: .09em;
    align-items: center;
    gap: 1.35rem;
    min-width: max-content;
    padding-inline: 1rem;
    font: 800 .73rem/1 ui-monospace, monospace;
    display: flex;
    animation: marquee-slide 28s linear infinite
}

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

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

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

.capability-section,
.work-section,
.cta-section {
    padding-block: clamp(6rem, 10vw, 10rem)
}

.section-heading {
    grid-template-columns: .32fr 1fr .8fr;
    align-items: start;
    gap: 2rem;
    margin-bottom: 4rem;
    display: grid
}

.section-heading h2,
.page-header h1,
.cta-section h2 {
    letter-spacing: -.055em;
    margin: 0;
    font: 500 clamp(2.7rem, 5vw, 5.6rem)/.98 Georgia, serif
}

.section-heading>p:last-child {
    max-width: 540px;
    color: var(--muted);
    margin: .4rem 0 0;
    line-height: 1.65
}

.section-index {
    color: var(--muted);
    margin: .65rem 0 0
}

.section-index.light {
    color: #aaa89f
}

.capability-grid {
    border: 1px solid var(--line);
    grid-template-columns: repeat(3, 1fr);
    display: grid
}

.capability-card {
    border-right: 1px solid var(--line);
    background: #fff3;
    min-height: 370px;
    padding: 1.7rem;
    transition: background .25s, transform .25s
}

.capability-card:last-child {
    border-right: 0
}

.capability-card:hover {
    z-index: 2;
    background: var(--white);
    position: relative;
    transform: translateY(-8px)
}

.capability-top {
    color: var(--muted);
    justify-content: space-between;
    display: flex
}

.capability-top span {
    font: 600 .7rem/1 ui-monospace, monospace
}

.capability-card h3 {
    letter-spacing: -.035em;
    max-width: 250px;
    margin: 7.5rem 0 1.2rem;
    font: 500 2rem/1.05 Georgia, serif
}

.capability-card p {
    max-width: 360px;
    color: var(--muted);
    margin: 0;
    line-height: 1.65
}

.work-section {
    border-top: 1px solid var(--line)
}

.section-heading-row {
    grid-template-columns: 1fr auto;
    align-items: end
}

.section-heading-row>div {
    grid-template-columns: .32fr 1fr;
    align-items: start;
    gap: 2rem;
    display: grid
}

.project-list {
    border-top: 1px solid var(--ink)
}

.project-row {
    border-bottom: 1px solid var(--line);
    grid-template-columns: .1fr 1.25fr .75fr auto;
    align-items: center;
    gap: 2rem;
    padding: 2rem .5rem;
    transition: padding .25s, background .25s;
    display: grid
}

.project-row:hover {
    background: var(--white);
    padding-inline: 1.25rem
}

.project-number {
    color: var(--muted);
    font: 700 .67rem/1 ui-monospace, monospace
}

.project-main {
    align-items: center;
    gap: 1.3rem;
    display: flex
}

.project-icon {
    background: var(--ink);
    width: 58px;
    height: 58px;
    color: var(--signal);
    flex: none;
    place-items: center;
    display: grid
}

.project-main h3 {
    margin: 0 0 .35rem;
    font: 500 1.5rem/1.1 Georgia, serif
}

.project-main p {
    color: var(--muted);
    margin: 0;
    line-height: 1.5
}

.project-tags {
    flex-wrap: wrap;
    gap: .45rem;
    display: flex
}

.project-tags span {
    border: 1px solid var(--line);
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: .4rem .58rem;
    font: 600 .63rem/1 ui-monospace, monospace
}

.principles-section {
    color: var(--white);
    background: var(--ink);
    padding-block: clamp(6rem, 10vw, 10rem)
}

.principles-section blockquote {
    text-align: center;
    letter-spacing: -.045em;
    max-width: 1080px;
    margin: 4rem auto 6rem;
    font: 400 clamp(2.3rem, 5vw, 5rem)/1.08 Georgia, serif
}

.principles-grid {
    border-top: 1px solid #fff3;
    grid-template-columns: repeat(4, 1fr);
    display: grid
}

.principles-grid div {
    border-right: 1px solid #fff3;
    gap: 4rem;
    padding: 1.3rem;
    display: grid
}

.principles-grid div:last-child {
    border-right: 0
}

.principles-grid span {
    color: #8b8982;
    font: 600 .65rem/1 ui-monospace, monospace
}

.principles-grid strong {
    font: 500 1.15rem/1.25 Georgia, serif
}

.cta-section {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
    display: grid
}

.page-shell {
    padding-block: clamp(5rem, 9vw, 8rem)
}

.page-header {
    max-width: 920px;
    margin-bottom: 5rem
}

.page-header h1 {
    margin: 1.2rem 0 1.5rem
}

.page-header>p:last-child {
    max-width: 680px;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1.7
}

.page-header-wide {
    max-width: 1080px
}

.case-study-grid {
    gap: 7rem;
    display: grid
}

.case-study-link {
    color: inherit;
    text-decoration: none;
    display: block
}

.case-study {
    border-top: 1px solid var(--ink);
    grid-template-columns: .9fr 1.1fr;
    min-height: 470px;
    display: grid
}

.case-study:nth-child(2n) .case-study-visual,
.case-study-link:nth-child(2n) .case-study-visual {
    order: 2
}

.case-study-visual {
    background: var(--ink);
    min-height: 430px;
    color: var(--signal);
    place-items: center;
    padding: 1.5rem;
    display: grid;
    position: relative;
    overflow: hidden
}

.case-study:nth-child(3n+2) .case-study-visual,
.case-study-link:nth-child(3n+2) .case-study-visual {
    background: var(--signal);
    color: var(--ink)
}

.case-study-link:hover .case-study-content h2 {
    text-decoration: underline;
    -webkit-text-decoration-color: var(--signal);
    text-decoration-color: var(--signal);
    text-decoration-thickness: 3px
}

.case-study-index {
    letter-spacing: .1em;
    font: 700 .65rem/1 ui-monospace, monospace;
    position: absolute;
    top: 1.5rem;
    left: 1.5rem
}

.visual-lines {
    opacity: .35;
    border: 1px solid;
    position: absolute;
    inset: 18% 12%
}

.visual-lines i {
    border: 1px solid;
    display: block;
    position: absolute
}

.visual-lines i:first-child {
    inset: 12%
}

.visual-lines i:nth-child(2) {
    inset: 26%
}

.visual-lines i:nth-child(3) {
    inset: 40%
}

.case-study-content {
    background: var(--white);
    padding: clamp(2rem, 5vw, 5rem)
}

.case-study-content h2 {
    letter-spacing: -.045em;
    margin: 0 0 1rem;
    font: 500 clamp(2rem, 3.5vw, 3.6rem)/1 Georgia, serif
}

.case-study-description {
    color: #33322f;
    font-size: 1.1rem;
    line-height: 1.65
}

.rich-text {
    color: var(--muted);
    line-height: 1.7
}

.rich-text ul {
    padding-left: 1.2rem
}

.rich-text li {
    margin-bottom: .5rem
}

.case-study-content .project-tags {
    margin-top: 2rem
}

.case-study-links {
    border-top: 1px solid var(--line);
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    display: flex
}

.case-study-links a {
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    display: inline-flex
}

.notes-list {
    border-top: 1px solid var(--ink)
}

.note-row {
    border-bottom: 1px solid var(--line);
    grid-template-columns: .12fr 1fr auto;
    gap: 2rem;
    padding: 2.3rem .5rem;
    transition: background .2s, padding .2s;
    display: grid
}

.note-row:hover {
    background: var(--white);
    padding-inline: 1.25rem
}

.note-number,
.note-meta {
    color: var(--muted);
    font: 600 .68rem/1.4 ui-monospace, monospace
}

.note-meta {
    align-items: center;
    gap: .4rem;
    display: flex
}

.note-row h2 {
    letter-spacing: -.035em;
    margin: .8rem 0 .6rem;
    font: 500 clamp(1.7rem, 3vw, 2.6rem)/1.05 Georgia, serif
}

.note-row p {
    max-width: 680px;
    color: var(--muted);
    line-height: 1.6
}

.article-page {
    max-width: 940px;
    padding-block: clamp(5rem, 9vw, 8rem)
}

.article-back {
    color: var(--muted);
    align-items: center;
    gap: .45rem;
    margin-bottom: 4rem;
    font-size: .8rem;
    font-weight: 700;
    display: inline-flex
}

.article-header {
    border-bottom: 1px solid var(--ink);
    padding-bottom: 3rem
}

.article-header h1,
.empty-page h1 {
    letter-spacing: -.055em;
    margin: 1.2rem 0 1.8rem;
    font: 500 clamp(3rem, 6vw, 6rem)/.96 Georgia, serif
}

.article-meta {
    color: var(--muted);
    text-transform: uppercase;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.5rem;
    font: 600 .72rem/1.4 ui-monospace, monospace;
    display: flex
}

.article-body {
    color: #35342f;
    max-width: 720px;
    margin: 4rem auto 0;
    font: 400 1.1rem/1.85 Georgia, serif
}

.article-body p {
    margin: 0 0 1.6rem
}

.article-body h2,
.article-body h3 {
    color: var(--ink);
    margin: 2.8rem 0 1rem;
    line-height: 1.2
}

.article-body a {
    text-decoration: underline;
    -webkit-text-decoration-color: var(--signal);
    text-decoration-color: var(--signal);
    text-decoration-thickness: .18em
}

.article-body code {
    background: var(--paper-deep);
    padding: .15rem .35rem;
    font: .9em/1.5 ui-monospace, monospace
}

.article-body blockquote {
    border-left: 5px solid var(--signal);
    color: var(--muted);
    margin: 2.5rem 0;
    padding-left: 1.5rem;
    font-style: italic
}

.empty-page {
    min-height: 70vh;
    padding-block: 8rem
}

.resume-header {
    border-bottom: 2px solid var(--ink);
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
    padding-bottom: 3rem;
    display: flex
}

.resume-header h1 {
    letter-spacing: -.06em;
    margin: 1rem 0 .3rem;
    font: 500 clamp(3.3rem, 7vw, 7rem)/.9 Georgia, serif
}

.resume-role {
    color: var(--muted);
    margin: 0;
    font-size: 1.25rem
}

.resume-contact {
    justify-items: start;
    gap: .75rem;
    font-size: .82rem;
    display: grid
}

.resume-contact span,
.resume-contact a {
    align-items: center;
    gap: .45rem;
    display: flex
}

.resume-layout {
    grid-template-columns: .34fr .66fr;
    gap: clamp(3rem, 7vw, 7rem);
    padding-top: 4rem;
    display: grid
}

.resume-sidebar {
    align-content: start;
    gap: 4rem;
    display: grid
}

.resume-sidebar h2,
.resume-section>h2 {
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 1.6rem;
    font: 700 .75rem/1 ui-monospace, monospace
}

.resume-sidebar p {
    color: var(--muted);
    line-height: 1.75
}

.skill-group {
    margin-top: 1.8rem
}

.skill-group h3 {
    text-transform: uppercase;
    margin-bottom: .8rem;
    font: 600 .8rem/1 ui-monospace, monospace
}

.resume-main {
    gap: 5rem;
    display: grid
}

.timeline {
    border-top: 1px solid var(--ink)
}

.timeline-item {
    border-bottom: 1px solid var(--line);
    grid-template-columns: .28fr .72fr;
    gap: 2rem;
    padding: 2rem 0;
    display: grid
}

.timeline-date {
    color: var(--muted);
    text-transform: uppercase;
    font: 600 .67rem/1.5 ui-monospace, monospace
}

.timeline-item h3 {
    margin: 0;
    font: 500 1.5rem/1.2 Georgia, serif
}

.timeline-company {
    color: var(--muted);
    margin: .35rem 0 1rem;
    font-size: .85rem
}

.rich-text {
    margin-top: 0.8rem;
}

.rich-text ul {
    margin: 0.6rem 0 1rem;
    padding-left: 1.25rem;
    list-style-type: disc;
}

.rich-text li {
    color: #42413c;
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 0.45rem;
}

.rich-text li strong,
.rich-text li b,
.timeline-item p strong,
.timeline-item p b {
    color: var(--ink);
    font-weight: 700;
}

.contact-page {
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(3rem, 8vw, 8rem);
    display: grid
}

.contact-intro h1 {
    letter-spacing: -.06em;
    margin: 1.2rem 0 1.5rem;
    font: 500 clamp(3.4rem, 6vw, 6.4rem)/.93 Georgia, serif
}

.contact-intro>p:not(.section-index) {
    max-width: 590px;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1.7
}

.contact-direct {
    gap: .8rem;
    margin: 2.5rem 0;
    display: grid
}

.contact-direct a {
    border-bottom: 1px solid var(--line);
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .7rem;
    padding-bottom: .8rem;
    font-weight: 700;
    display: grid
}

.availability-card {
    border: 1px solid var(--line);
    background: #ffffff4d;
    gap: 1rem;
    max-width: 470px;
    padding: 1.2rem;
    display: flex
}

.availability-card strong {
    font-family: Georgia, serif
}

.availability-card p {
    color: var(--muted);
    margin: .35rem 0 0;
    font-size: .85rem;
    line-height: 1.5
}

.contact-form-wrap {
    background: var(--ink);
    min-height: 610px;
    color: var(--white)
}

.contact-form-wrap form,
.form-success {
    padding: clamp(1.7rem, 5vw, 4.5rem)
}

.form-heading {
    color: #aaa89f;
    letter-spacing: .1em;
    justify-content: space-between;
    margin-bottom: 3rem;
    font: 600 .65rem/1 ui-monospace, monospace;
    display: flex
}

.contact-form-wrap label {
    color: #d6d3ca;
    letter-spacing: .07em;
    text-transform: uppercase;
    gap: .7rem;
    margin-bottom: 1.7rem;
    font-size: .74rem;
    font-weight: 700;
    display: grid
}

.contact-form-wrap input,
.contact-form-wrap textarea {
    width: 100%;
    color: var(--white);
    text-transform: none;
    resize: vertical;
    background: 0 0;
    border: 0;
    border-bottom: 1px solid #56554f;
    border-radius: 0;
    outline: 0;
    padding: .95rem 0;
    font-size: 1rem;
    transition: border-color .2s
}

.contact-form-wrap input:focus,
.contact-form-wrap textarea:focus {
    border-color: var(--signal)
}

.contact-form-wrap input::placeholder,
.contact-form-wrap textarea::placeholder {
    color: #77756e
}

.form-submit {
    border-color: var(--signal);
    background: var(--signal);
    color: var(--ink);
    margin-top: 1rem
}

.form-submit:disabled {
    cursor: wait;
    opacity: .65
}

.form-error {
    color: #ff9e8f;
    margin: 0 0 1rem;
    font-size: .85rem
}

.form-success {
    align-content: center;
    min-height: 610px;
    display: grid
}

.form-success svg {
    color: var(--signal)
}

.form-success h2 {
    margin: 2rem 0 .8rem;
    font: 500 3rem/1 Georgia, serif
}

.form-success p {
    color: #aaa89f;
    max-width: 460px;
    line-height: 1.7
}

.form-success .text-link {
    color: var(--white);
    margin-top: 1rem
}

.site-footer {
    color: var(--white);
    background: var(--ink);
    border-top: 1px solid #ffffff2e;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 4vw, 4rem) 2rem;
    display: grid
}

.footer-kicker,
.footer-meta {
    color: #8e8c84;
    letter-spacing: .1em;
    text-transform: uppercase;
    font: 600 .66rem/1.4 ui-monospace, monospace
}

.footer-title {
    letter-spacing: -.04em;
    margin: .8rem 0 0;
    font: 400 clamp(2.2rem, 4vw, 4.8rem)/1 Georgia, serif
}

.footer-links {
    align-items: end;
    gap: 1.5rem;
    display: flex
}

.footer-links a {
    border-bottom: 1px solid #4d4c47;
    align-items: center;
    gap: .4rem;
    padding-bottom: .4rem;
    font-size: .8rem;
    display: inline-flex
}

.footer-meta {
    border-top: 1px solid #ffffff1f;
    grid-column: 1/-1;
    margin-top: 4rem;
    padding-top: 1.2rem
}

.reveal {
    animation: .75s both reveal
}

.reveal-delay {
    animation-delay: .18s
}

@keyframes reveal {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media(max-width:980px) {
    .site-header {
        grid-template-columns: 1fr auto
    }

    .site-nav {
        z-index: 60;
        border-top: 1px solid var(--line);
        background: var(--paper);
        justify-content: space-around;
        gap: 0;
        padding: 0 1rem;
        position: fixed;
        inset: auto 0 0
    }

    .nav-link {
        padding: 1rem .4rem;
        font-size: .64rem
    }

    .nav-link:after {
        inset: auto 0 8px
    }

    .header-cta {
        display: none
    }

    .hero,
    .contact-page {
        grid-template-columns: 1fr
    }

    .hero-system {
        min-height: 520px
    }

    .section-heading {
        grid-template-columns: .25fr 1fr
    }

    .section-heading>p:last-child {
        grid-column: 2
    }

    .capability-card {
        min-height: 330px
    }

    .project-row {
        grid-template-columns: .1fr 1fr auto
    }

    .project-tags {
        grid-column: 2
    }

    .case-study {
        grid-template-columns: 1fr
    }

    .case-study:nth-child(2n) .case-study-visual,
    .case-study-link:nth-child(2n) .case-study-visual {
        order: 0
    }

    .resume-layout {
        grid-template-columns: 1fr
    }

    .resume-sidebar {
        grid-template-columns: 1fr 1fr
    }

    .cta-section {
        grid-template-columns: 1fr
    }

    .cta-section .button {
        justify-self: start
    }

    .site-footer {
        padding-bottom: 6rem
    }
}

@media(max-width:680px) {
    .section-shell {
        width: min(100% - 2rem, 1320px)
    }

    .wordmark-name {
        display: none
    }

    .hero {
        min-height: auto;
        padding-top: 4rem
    }

    .hero h1 {
        font-size: clamp(3.1rem, 15vw, 5rem)
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start
    }

    .hero-system {
        min-height: 440px
    }

    .system-orbit {
        height: 340px
    }

    .system-orbit:before {
        width: 230px;
        height: 230px
    }

    .system-orbit:after {
        width: 310px;
        height: 310px
    }

    .system-core {
        width: 135px;
        height: 135px
    }

    .system-metrics {
        display: none
    }

    .marquee-track {
        justify-content: flex-start
    }

    .section-heading,
    .section-heading-row,
    .section-heading-row>div {
        display: block
    }

    .section-heading h2 {
        margin: 1rem 0
    }

    .section-heading-row .text-link {
        margin-top: 1.5rem
    }

    .capability-grid {
        grid-template-columns: 1fr
    }

    .capability-card {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        min-height: 300px
    }

    .capability-card:last-child {
        border-bottom: 0
    }

    .capability-card h3 {
        margin-top: 5rem
    }

    .project-row {
        grid-template-columns: auto 1fr auto;
        gap: 1rem
    }

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

    .project-icon {
        display: none
    }

    .project-tags {
        grid-column: 2/-1
    }

    .principles-grid {
        grid-template-columns: 1fr 1fr
    }

    .principles-grid div {
        border-bottom: 1px solid #fff3;
        gap: 2.5rem
    }

    .case-study-grid {
        gap: 4rem
    }

    .case-study-visual {
        min-height: 300px
    }

    .note-row {
        grid-template-columns: auto 1fr
    }

    .note-row>svg {
        display: none
    }

    .resume-header {
        flex-direction: column;
        align-items: flex-start
    }

    .resume-sidebar {
        grid-template-columns: 1fr
    }

    .timeline-item {
        grid-template-columns: 1fr;
        gap: .8rem
    }

    .site-footer {
        grid-template-columns: 1fr
    }

    .footer-links {
        flex-direction: column;
        align-items: flex-start
    }

    .footer-meta {
        margin-top: 1rem
    }
}

@media print {

    .site-header,
    .site-footer,
    .resume-contact .button {
        display: none !important
    }

    body {
        background: #fff
    }

    .resume-page {
        width: 100%;
        padding: 1rem
    }

    .resume-header h1 {
        font-size: 4rem
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    :before,
    :after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important
    }
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-leading {
    syntax: "*";
    inherits: false
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

#openResumeModal {
    color: var(--ink) !important;
}

/* Modal Popup Styling */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(17, 17, 15, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.modal-container {
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: 10px 10px 0px var(--ink);
    width: min(92vw, 860px);
    height: min(88vh, 850px);
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.modal-overlay.is-active .modal-container {
    transform: translateY(0) scale(1);
}

.modal-header {
    background: var(--ink);
    color: var(--white);
    padding: 1.1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.modal-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-close-btn {
    background: transparent;
    border: 1px solid #ffffff44;
    color: var(--white);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.modal-close-btn:hover {
    background: var(--signal);
    color: var(--ink);
    border-color: var(--signal);
}

.modal-body {
    flex: 1;
    overflow: hidden;
    background: #525659;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.modal-pdf-iframe {
    width: 100%;
    height: 100%;
    min-height: 550px;
    flex: 1;
    border: none;
    display: block;
}

.resume-preview-document {
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    padding: 2.5rem;
    color: var(--ink);
    max-width: 760px;
    margin: 0 auto;
}

.doc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.doc-name {
    font: 500 2.2rem/1.1 Georgia, serif;
    margin: 0 0 0.2rem;
    letter-spacing: -0.04em;
}

.doc-title {
    color: var(--muted);
    font-size: 1.1rem;
    margin: 0;
}

.doc-contact-info {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.5;
}

.doc-contact-info p {
    margin: 0 0 0.2rem;
}

.doc-divider {
    border: 0;
    border-top: 2px solid var(--ink);
    margin: 1.5rem 0;
}

.doc-section {
    margin-bottom: 1.8rem;
}

.doc-section-title {
    font: 700 0.75rem/1 ui-monospace, monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.4rem;
    margin: 0 0 1rem;
}

.doc-section p {
    line-height: 1.65;
    color: #35342f;
    margin: 0 0 0.8rem;
}

.doc-skills-grid {
    display: grid;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: #35342f;
}

.doc-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: Georgia, serif;
    font-size: 1.2rem;
}

.doc-item-header span {
    font-family: ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
}

.doc-sub {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0.2rem 0 0.6rem !important;
}

.doc-item ul {
    padding-left: 1.2rem;
    margin: 0.5rem 0;
    line-height: 1.6;
    color: #35342f;
    font-size: 0.95rem;
}

.doc-item li {
    margin-bottom: 0.35rem;
}

@media (max-width: 680px) {
    .modal-container {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border: none;
        box-shadow: none;
    }

    .modal-overlay {
        padding: 0;
    }

    .resume-preview-document {
        padding: 1.25rem;
    }
}