/* ============================================
   1. VARIABLES
============================================ */
:root {
    --paper: #f4f0e6;
    --paper-bright: #fffdf7;
    --ink: #171b2d;
    --ink-soft: #4b5065;
    --ultramarine: #3146d8;
    --tomato: #ed513d;
    --butter: #f4d66f;
    --mist: #b7d8d0;
    --line: rgba(23, 27, 45, 0.22);
    --gutter: clamp(1.15rem, 3.5vw, 4.75rem);
    --section-space: clamp(5rem, 10vw, 10rem);
    --max-width: 112rem;

    /* ============================================
       HERO BACKGROUND IMAGE
       Replace this value when using a custom image.
       Recommended desktop: 2200 × 1320 px, 5:3.
    ============================================= */
    --hero-image: none;
}

/* ============================================
   2. RESET / BASE
============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
textarea {
    color: inherit;
    font: inherit;
}

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

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--tomato);
    outline-offset: 4px;
}

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

[hidden] {
    display: none !important;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    transform: translateY(-160%);
    background: var(--ink);
    color: white;
}

.skip-link:focus {
    transform: translateY(0);
}

/* ============================================
   3. TYPOGRAPHY / SHARED ACTIONS
============================================ */
h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 0.94;
}

h2 {
    font-size: clamp(2.8rem, 6vw, 7rem);
}

h3 {
    font-size: clamp(1.3rem, 2vw, 2rem);
    line-height: 1.08;
}

.text-action {
    display: inline-grid;
    grid-template-columns: auto minmax(3rem, 7rem);
    gap: 1rem;
    align-items: center;
    padding: 0.5rem 0;
    text-decoration: none;
    font-weight: 700;
}

.text-action__line {
    position: relative;
    height: 2px;
    background: currentColor;
    transition: transform 220ms ease;
    transform-origin: left;
}

.text-action__line::after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0.7rem;
    height: 0.7rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: rotate(-45deg) translate(0.1rem, 0.15rem);
}

.text-action:hover .text-action__line,
.text-action:focus-visible .text-action__line {
    transform: scaleX(1.12);
}

/* ============================================
   4. HEADER
============================================ */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    color: white;
}

.header-inner {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto minmax(12rem, 1fr);
    gap: 2rem;
    align-items: center;
    width: min(100%, var(--max-width));
    min-height: 5rem;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.site-logo {
    width: 12.25rem;
}

.site-logo img {
    width: 100%;
    height: auto;
}

.site-header .site-logo img {
    filter: brightness(0) invert(1);
}

.site-nav {
    display: flex;
    gap: clamp(1.2rem, 2.5vw, 3rem);
    align-items: center;
}

.site-nav a,
.footer-links a {
    position: relative;
    text-decoration: none;
}

.site-nav a::after,
.footer-links a::after {
    position: absolute;
    right: 0;
    bottom: -0.35rem;
    left: 0;
    height: 1px;
    content: "";
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 200ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.footer-links a:hover::after,
.footer-links a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

.header-tools,
.language-switch {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    align-items: center;
}

.language-switch button {
    padding: 0.25rem;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.55;
}

.language-switch button[aria-pressed="true"] {
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    opacity: 1;
}

.menu-button {
    display: none;
    gap: 0.7rem;
    align-items: center;
    padding: 0.5rem;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.menu-button__mark {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid currentColor;
}

.menu-button__mark::before,
.menu-button__mark::after {
    position: absolute;
    top: 50%;
    left: 0.3rem;
    width: 0.85rem;
    height: 1px;
    content: "";
    background: currentColor;
    transition: transform 180ms ease;
}

.menu-button__mark::before {
    transform: translateY(-0.22rem);
}

.menu-button__mark::after {
    transform: translateY(0.22rem);
}

.menu-button[aria-expanded="true"] .menu-button__mark::before {
    transform: rotate(45deg);
}

.menu-button[aria-expanded="true"] .menu-button__mark::after {
    transform: rotate(-45deg);
}

/* ============================================
   5. HERO / OPENING SHUTTERS
============================================ */
.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 0.45fr);
    min-height: min(62rem, 100svh);
    overflow: hidden;
    background: var(--ink);
    color: white;
}

.hero-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(90deg, rgba(23, 27, 45, 0.52), rgba(23, 27, 45, 0.84)), var(--hero-image);
    background-position: center;
    background-size: cover;
}

.hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    padding: clamp(9rem, 15vh, 12rem) var(--gutter) clamp(4rem, 8vh, 7rem);
}

.hero h1 {
    max-width: 13ch;
    margin-bottom: clamp(3rem, 8vh, 6rem);
    font-size: clamp(4.1rem, 9.5vw, 11.5rem);
}

.hero h1 span {
    display: block;
}

.hero-title-accent {
    color: var(--butter);
    font-style: italic;
    transform: translateX(clamp(1.5rem, 7vw, 8rem));
}

.hero-support {
    display: grid;
    grid-template-columns: minmax(16rem, 30rem) auto;
    gap: clamp(2rem, 7vw, 8rem);
    align-items: end;
    margin-left: clamp(0rem, 14vw, 16rem);
}

.hero-support p {
    margin-bottom: 0;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
}

.shutter-field {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    min-width: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.shutter {
    display: block;
    flex: 1;
    border-left: 1px solid rgba(23, 27, 45, 0.55);
    transform-origin: bottom;
    animation: shutter-breathe 8s ease-in-out infinite alternate;
}

.shutter--one {
    height: 100%;
    background: var(--ultramarine);
}

.shutter--two {
    height: 78%;
    background: var(--tomato);
    animation-delay: -1.4s;
}

.shutter--three {
    height: 58%;
    background: var(--butter);
    animation-delay: -3.1s;
}

.shutter--four {
    height: 40%;
    background: var(--mist);
    animation-delay: -4.8s;
}

.shutter--five {
    height: 22%;
    background: var(--paper-bright);
    animation-delay: -6.2s;
}

.shutter-caption {
    position: absolute;
    right: 1rem;
    bottom: 1.25rem;
    color: var(--ink);
    font-family: "Courier New", monospace;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    writing-mode: vertical-rl;
}

@keyframes shutter-breathe {
    from {
        transform: scaleY(0.985);
    }

    to {
        transform: scaleY(1);
    }
}

/* ============================================
   6. AUDIENCE / FIT
============================================ */
.fit {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr);
    gap: clamp(3rem, 8vw, 9rem);
    width: min(100%, var(--max-width));
    margin: 0 auto;
    padding: var(--section-space) var(--gutter);
}

.section-intro h2 {
    max-width: 11ch;
}

.section-intro > p {
    max-width: 38rem;
    margin: 3rem 0 0 auto;
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
}

.fit-statements {
    align-self: end;
    border-top: 1px solid var(--ink);
}

.fit-statements article {
    display: grid;
    grid-template-columns: 2.5rem minmax(9rem, 0.8fr) 1.2fr;
    gap: 1.25rem;
    align-items: baseline;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--line);
}

.fit-statements article > span,
.service-index {
    font-family: "Courier New", monospace;
    font-size: 0.78rem;
}

.fit-statements h3,
.fit-statements p {
    margin-bottom: 0;
}

.fit-statements p {
    color: var(--ink-soft);
}

/* ============================================
   7. RELEASE PATH
============================================ */
.release {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    background: var(--ultramarine);
    color: white;
}

.release-heading {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 46rem;
    padding: var(--section-space) var(--gutter);
    border-right: 1px solid rgba(255, 255, 255, 0.45);
}

.release-heading h2 {
    max-width: 7ch;
}

.release-heading p {
    max-width: 32rem;
    margin-bottom: 0;
    font-size: 1.15rem;
}

.release-sequence {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.release-sequence li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 23rem;
    padding: clamp(2rem, 4vw, 4.25rem);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    transition: background 220ms ease, color 220ms ease;
}

.release-sequence li:hover {
    background: var(--butter);
    color: var(--ink);
}

.release-number {
    align-self: flex-end;
    font-family: Georgia, serif;
    font-size: 5rem;
    font-style: italic;
    line-height: 1;
}

.release-sequence h3 {
    font-family: Georgia, serif;
    font-size: clamp(2rem, 3.4vw, 4rem);
    font-weight: 400;
}

.release-sequence p {
    max-width: 24rem;
    margin-bottom: 0;
}

/* ============================================
   8. SERVICES / WINDOWS
============================================ */
.services {
    display: grid;
    grid-template-columns: 0.55fr 1.45fr;
    gap: clamp(3rem, 7vw, 8rem);
    width: min(100%, var(--max-width));
    margin: 0 auto;
    padding: var(--section-space) var(--gutter);
}

.services-title {
    position: sticky;
    top: 7rem;
    align-self: start;
}

.services-title h2 {
    font-size: clamp(3.2rem, 6vw, 6.4rem);
}

.service-windows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
}

.service-window {
    display: grid;
    align-content: space-between;
    min-height: 24rem;
    padding: clamp(1.5rem, 3vw, 3.25rem);
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    transition: background 180ms ease;
}

.service-window:hover {
    background: var(--mist);
}

.service-window--large {
    grid-row: span 2;
    min-height: 48rem;
    background: var(--tomato);
}

.service-window--wide {
    grid-column: 1 / -1;
    min-height: 18rem;
    background: var(--butter);
}

.service-window h3 {
    align-self: end;
    margin: auto 0 1.5rem;
    font-family: Georgia, serif;
    font-size: clamp(2rem, 3.6vw, 4.5rem);
    font-weight: 400;
}

.service-window p:last-child {
    max-width: 35rem;
    margin-bottom: 0;
}

/* ============================================
   9. PRINCIPLES
============================================ */
.principles {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 0.6fr;
    gap: 4rem;
    align-items: end;
    padding: clamp(5rem, 9vw, 9rem) var(--gutter);
    background: var(--butter);
}

.principles-statement {
    max-width: 25ch;
    margin-bottom: 0;
    font-family: Georgia, serif;
    font-size: clamp(2.8rem, 5.5vw, 6.8rem);
    letter-spacing: -0.04em;
    line-height: 0.98;
}

.principles ul {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ink);
    list-style: none;
}

.principles li {
    padding: 1rem 0;
    border-bottom: 1px solid var(--ink);
    font-weight: 700;
}

/* ============================================
   10. CONTACT / FORM
============================================ */
.contact {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    background: var(--mist);
}

.contact-invitation {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 48rem;
    padding: var(--section-space) var(--gutter);
    border-right: 1px solid var(--ink);
}

.contact-invitation h2 {
    max-width: 8ch;
}

.contact-invitation p {
    max-width: 30rem;
    font-size: 1.15rem;
}

.contact-invitation a {
    width: fit-content;
    font-weight: 700;
}

.contact-form {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--section-space) var(--gutter);
}

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

.contact-form label:not(.consent) {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 2rem;
    font-weight: 700;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.9rem 0;
    border: 0;
    border-bottom: 2px solid var(--ink);
    border-radius: 0;
    background: transparent;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-bottom-color: var(--ultramarine);
    outline: none;
}

.consent {
    display: grid;
    grid-template-columns: 1.2rem 1fr;
    gap: 0.75rem;
    align-items: start;
    max-width: 45rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.consent input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
}

.submit-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.2rem 1.4rem;
    border: 2px solid var(--ink);
    border-radius: 0;
    background: var(--ink);
    color: white;
    cursor: pointer;
    font-weight: 700;
    transition: background 160ms ease, color 160ms ease;
}

.submit-button:hover,
.submit-button:focus-visible {
    background: var(--tomato);
    color: var(--ink);
}

.submit-button:disabled {
    cursor: wait;
    opacity: 0.7;
}

.form-note {
    margin: 0.8rem 0 0;
    font-size: 0.78rem;
}

.honeypot {
    position: absolute;
    left: -10000px;
}

.form-status {
    position: absolute;
    inset: var(--gutter);
    z-index: 5;
    display: grid;
    place-items: center;
    background: rgba(183, 216, 208, 0.92);
}

.form-status__panel {
    width: min(100%, 32rem);
    padding: clamp(2rem, 5vw, 4rem);
    border: 2px solid var(--ink);
    background: var(--paper-bright);
}

.form-status__title {
    margin-bottom: 1rem;
    font-family: Georgia, serif;
    font-size: 2.4rem;
    line-height: 1;
}

.form-status__close {
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--ink);
    background: transparent;
    cursor: pointer;
}

/* ============================================
   11. FOOTER
============================================ */
.site-footer {
    display: grid;
    grid-template-columns: 1fr 0.7fr 0.7fr;
    gap: 3rem;
    padding: 4rem var(--gutter) 2rem;
    background: var(--ink);
    color: white;
}

.footer-brand img {
    margin-bottom: 1.5rem;
    filter: brightness(0) invert(1);
}

.footer-address p:first-child {
    font-weight: 700;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.footer-copy {
    grid-column: 1 / -1;
    margin: 3rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
}

/* ============================================
   12. PRIVACY / ERROR PAGES
============================================ */
.legal-page {
    background: var(--paper-bright);
}

.legal-header {
    position: static;
    border-bottom-color: var(--line);
    color: var(--ink);
}

.legal-header .site-logo img {
    filter: none;
}

.legal-shell {
    display: grid;
    grid-template-columns: minmax(14rem, 0.5fr) minmax(0, 1.5fr);
    gap: clamp(3rem, 10vw, 10rem);
    width: min(100%, 92rem);
    margin: 0 auto;
    padding: var(--section-space) var(--gutter);
}

.legal-title {
    position: sticky;
    top: 3rem;
    align-self: start;
}

.legal-title h1 {
    font-size: clamp(3.6rem, 7vw, 7.5rem);
}

.legal-content section {
    margin-bottom: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ink);
}

.legal-content h2 {
    font-family: Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
}

.legal-content li {
    margin-bottom: 0.6rem;
}

.error-page {
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: var(--gutter);
    background: var(--ink);
    color: white;
    text-align: center;
}

.error-page h1 {
    margin-bottom: 1rem;
    color: var(--butter);
    font-size: clamp(7rem, 20vw, 18rem);
}

/* ============================================
   13. RESPONSIVE
============================================ */
@media (max-width: 70rem) {
    .header-inner {
        grid-template-columns: 1fr auto;
    }

    .site-nav {
        position: absolute;
        top: 5rem;
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 1rem var(--gutter) 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.35);
        background: var(--ink);
    }

    .site-nav[data-open="true"] {
        display: flex;
    }

    .site-nav a {
        padding: 0.7rem 0;
    }

    .menu-button {
        display: flex;
    }

    .legal-header .site-nav {
        background: var(--paper-bright);
    }

    .hero {
        grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.28fr);
    }

    .hero-support {
        grid-template-columns: 1fr;
        margin-left: 0;
    }

    .fit-statements article {
        grid-template-columns: 2.5rem 1fr;
    }

    .fit-statements article p {
        grid-column: 2;
    }

    .services {
        grid-template-columns: 1fr;
    }

    .services-title {
        position: static;
    }
}

@media (max-width: 52rem) {

    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero-copy {
        min-height: 78svh;
    }

    .hero h1 {
        margin-top: auto;
    }

    .hero-title-accent {
        transform: translateX(0);
    }

    .shutter-field {
        min-height: 9rem;
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        border-left: 0;
    }

    .shutter--one {
        height: 100%;
    }

    .shutter--two {
        height: 82%;
    }

    .shutter--three {
        height: 64%;
    }

    .shutter--four {
        height: 46%;
    }

    .shutter--five {
        height: 28%;
    }

    .fit,
    .release,
    .contact,
    .principles,
    .legal-shell {
        grid-template-columns: 1fr;
    }

    .release-heading,
    .contact-invitation {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid currentColor;
    }

    .release-heading {
        gap: 5rem;
    }

    .principles ul {
        margin-top: 2rem;
    }

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

    .legal-title {
        position: static;
    }
}

@media (max-width: 36rem) {
    .header-inner {
        min-height: 4.5rem;
    }

    .site-logo {
        width: 10.5rem;
    }

    .menu-button__label {
        display: none;
    }

    .site-nav {
        top: 4.5rem;
    }

    .hero-copy {
        min-height: 43rem;
        padding-top: 8rem;
    }

    .hero h1 {
        font-size: clamp(3.7rem, 17vw, 5.8rem);
    }

    .hero-support {
        gap: 1.5rem;
    }

    .fit-statements article {
        grid-template-columns: 1fr;
    }

    .fit-statements article p {
        grid-column: auto;
    }

    .release-sequence {
        grid-template-columns: 1fr;
    }

    .release-sequence li {
        min-height: 18rem;
    }

    .service-windows {
        grid-template-columns: 1fr;
    }

    .service-window,
    .service-window--large,
    .service-window--wide {
        grid-column: auto;
        grid-row: auto;
        min-height: 22rem;
    }

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

    .form-status {
        inset: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}