/* =========================================================
   FORM-OVERLAY — reusable modal shell for the site's lead forms.

   Markup contract lives in src/js/form-overlay.js. The overlay panel
   provides the dark glass chrome, so a form-dark form placed inside is
   de-chromed (no double panel). Includes: trigger CTA icon wobble,
   open/close animations, auto-hiding scrollbar, draft notice, the
   dirty-close prompt sheet, and the animated success checkmark with
   countdown ring.
   ========================================================= */

/* ── Trigger CTA ── */
.form-overlay-cta {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 3.5rem 1.5rem 3rem;
    text-align: center;
}

.form-overlay-cta p {
    max-width: 34rem;
    margin: 0;
    color: var(--fd-text-muted, #a6a8b0);
}

/* Page variant — the section IS the page (no hero header above it).
   Fills most of the viewport, centered, cleared under the fixed navbar. */
.form-overlay-cta--page {
    align-content: center;
    min-height: 82vh;
    padding: calc(var(--nav-h, 4.5rem) + 4rem) 1.5rem 5rem;
}

.form-overlay-cta--page h1 {
    margin: 0;
    color: var(--fd-text, #f5f5f5);
    font-size: clamp(2.1rem, 5vw, 3.2rem);
    letter-spacing: 0.02em;
    text-align: center;
}

.form-overlay-cta--page p {
    font-size: 1.05rem;
    line-height: 1.65;
}

.form-overlay-cta .tv-cta {
    width: auto;
    margin-top: 1rem;
    justify-self: center;
}

/* Icon sitting to the right of a CTA label (e.g. Send Message) */
.cta-icon-right {
    display: inline-block;
    margin-left: 0.6rem;
    color: #fff;
}

@keyframes tv-icon-send {
    40% { transform: translate(3px, -3px); }
    100% { transform: translate(0, 0); }
}

button:hover .cta-icon-right,
a:hover .cta-icon-right {
    animation: tv-icon-send 500ms ease;
}

/* Right-side wobble icon (trigger CTAs): sits after the label, pure
   white, and wobbles on hover (wins over the send-nudge above). */
.wobble-icon.cta-icon-right {
    margin-right: 0;
    margin-left: 0.6rem;
    color: #fff;
}

button:hover .wobble-icon.cta-icon-right,
a:hover .wobble-icon.cta-icon-right {
    animation: tv-icon-wobble 700ms ease-in-out;
}

.wobble-icon {
    display: inline-block;
    margin-right: 0.6rem;
    color: #fff;
}

@keyframes tv-icon-wobble {
    0% { transform: rotate(0); }
    20% { transform: rotate(-14deg) scale(1.1); }
    40% { transform: rotate(11deg); }
    60% { transform: rotate(-7deg); }
    80% { transform: rotate(4deg); }
    100% { transform: rotate(0); }
}

a:hover .wobble-icon,
button:hover .wobble-icon {
    animation: tv-icon-wobble 700ms ease-in-out;
}

/* ── Backdrop ── */
.form-overlay {
    position: fixed;
    inset: 0;
    /* Above the legacy nav (1000000000 in nav.css) and cookie banner */
    z-index: 1000000001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;

    background: rgba(4, 5, 8, 0.62);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    opacity: 0;
    transition:
        opacity 300ms ease,
        -webkit-backdrop-filter 300ms ease,
        backdrop-filter 300ms ease;
}

.form-overlay[hidden] {
    display: none;
}

.form-overlay.is-open {
    opacity: 1;
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
}

/* ── Panel ── */
.form-overlay__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(56rem, 100%);
    max-height: min(60rem, 100%);
    overflow: hidden;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.012) 24%, rgba(255, 255, 255, 0) 100%),
        #0f1115;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 36px 100px rgba(0, 0, 0, 0.7);

    transform: translateY(28px) scale(0.94);
    opacity: 0;
    transition:
        transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 300ms ease;
}

/* Brand hairline along the panel's top edge */
.form-overlay__panel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 12%;
    left: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(224, 82, 96, 0.65), transparent);
    pointer-events: none;
}

.form-overlay.is-open .form-overlay__panel {
    transform: none;
    opacity: 1;
}

/* ── Close (X) ──
   The circle stays perfectly still; only the glyph rotates, so the
   button reads symmetric at every point of the hover animation. */
.form-overlay__close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    margin-top: 0.5rem;

    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--fd-text-muted, #a6a8b0);
    cursor: pointer;
    transition:
        background 200ms ease,
        border-color 200ms ease,
        color 200ms ease;
}

.form-overlay__close svg {
    display: block;
    width: 1.3rem;
    height: 1.3rem;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.form-overlay__close:hover,
.form-overlay__close:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.form-overlay__close:hover svg,
.form-overlay__close:focus-visible svg {
    transform: rotate(90deg);
}

.form-overlay__close:active {
    background: rgba(255, 255, 255, 0.16);
}

.form-overlay__close:active svg {
    transform: rotate(90deg) scale(0.85);
}

/* ── Head — compact: title + sub on a tight block, X in the corner ── */
.form-overlay__head {
    flex: 0 0 auto;
    padding: 1.35rem 4.5rem 0.85rem 2.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.form-overlay__head h2 {
    margin: 0 0 0.3rem;
    color: var(--fd-text, #f5f5f5);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.form-overlay__head p {
    margin: 0;
    color: var(--fd-text-muted, #a6a8b0);
    font-size: 0.9rem;
}

/* ── Scroll body — scrollbar appears only while scrolling ── */
.form-overlay__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.35rem 2.4rem 2.25rem;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.form-overlay__body.is-scrolling {
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.form-overlay__body::-webkit-scrollbar {
    width: 8px;
}

.form-overlay__body::-webkit-scrollbar-track {
    background: transparent;
}

.form-overlay__body::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 8px;
}

.form-overlay__body.is-scrolling::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
}

/* A form-dark form inside the overlay: the panel is the chrome now */
body.form-dark .form-overlay .contact__form,
body.form-dark .form-overlay .s-form form,
body.form-dark .form-overlay form {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Fieldsets refuse to shrink below content by default — keep the
   form.css template's grid inside the panel on narrow screens. */
.form-overlay fieldset {
    min-width: 0;
}

/* The info note spans the same width as the section cards */
body.form-dark .form-overlay form p.form-note {
    max-width: none;
    width: 100%;
}

/* ── Collapsible form sections (built by form-overlay.js from the
      .form-section-head dividers on multi-section forms) ── */
.form-overlay .form-section {
    grid-column: 1 / -1;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.6rem;
    transition: border-color 200ms ease, background 200ms ease;
}

.form-overlay .form-section.is-complete {
    border-color: rgba(64, 186, 110, 0.28);
}

/* Head is a <button>: reset the legacy global button rules completely */
.form-overlay .form-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin: 0;
    padding: 0.95rem 1.15rem;

    background: none;
    border: 0;
    border-radius: 0;
    color: var(--fd-text-muted, #a6a8b0);
    cursor: pointer;
    text-align: left;
    text-transform: none;
    font: inherit;
    letter-spacing: normal;
    transition: color 180ms ease, background 180ms ease;
}

.form-overlay .form-section__head:hover {
    background: rgba(255, 255, 255, 0.035);
    color: var(--fd-text-soft, #d6d7dc);
}

.form-overlay .form-section__head:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.28);
    outline-offset: -2px;
}

.form-overlay .form-section__title {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.form-overlay .form-section__state {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.55rem;
}

.form-overlay .form-section__chevron {
    width: 1rem;
    height: 1rem;
    opacity: 0.3;
    transition:
        transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 180ms ease;
}

.form-overlay .form-section__head:hover .form-section__chevron {
    opacity: 1;
}

.form-overlay .form-section.is-collapsed .form-section__chevron {
    transform: rotate(-90deg);
}

.form-overlay .form-section__check {
    width: 1.05rem;
    height: 1.05rem;
    color: #40ba6e;
    opacity: 0;
    transform: scale(0.4);
    transition:
        opacity 220ms ease,
        transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.form-overlay .form-section.is-complete .form-section__check {
    opacity: 1;
    transform: none;
}

/* Shrink/expand via the grid-rows trick — smooth at any content height */
.form-overlay .form-section__wrap {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 340ms cubic-bezier(0.16, 1, 0.3, 1);
}

.form-overlay .form-section.is-collapsed .form-section__wrap {
    grid-template-rows: 0fr;
}

.form-overlay .form-section__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem 1rem;
    min-height: 0;
    overflow: hidden;
    padding: 0.3rem 1.15rem 1.25rem;
}

.form-overlay .form-section.is-collapsed .form-section__body {
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 700px) {
    .form-overlay .form-section__body {
        grid-template-columns: 1fr;
    }
}

/* ── Checkbox group (Work requested) — selectable row cards on an even
      two-column grid, with a custom animated checkbox ── */
.form-overlay .checkbox-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.form-overlay .checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    padding: 0.7rem 0.9rem;

    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.5rem;
    color: var(--fd-text-soft, #d6d7dc);
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.35;
    cursor: pointer;
    transition:
        background 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
}

.form-overlay .checkbox-group label:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.form-overlay .checkbox-group label:has(input:checked) {
    background: rgba(224, 82, 96, 0.1);
    border-color: rgba(224, 82, 96, 0.45);
    color: #fff;
}

.form-overlay .checkbox-group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;

    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0.35rem;
    cursor: pointer;
    transition:
        background 160ms ease,
        border-color 160ms ease;
}

.form-overlay .checkbox-group input[type="checkbox"]::after {
    content: "";
    width: 0.66rem;
    height: 0.66rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: scale(0);
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.form-overlay .checkbox-group input[type="checkbox"]:checked {
    background: #c4242e;
    border-color: rgba(224, 82, 96, 0.9);
}

.form-overlay .checkbox-group input[type="checkbox"]:checked::after {
    transform: scale(1);
}

.form-overlay .checkbox-group input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(224, 82, 96, 0.5);
    outline-offset: 2px;
}

@media (max-width: 700px) {
    .form-overlay .checkbox-group {
        grid-template-columns: 1fr;
    }
}

/* ── Custom dropdowns (built by form-overlay.js) — a styled button +
      options panel matching the overlay; the native select stays hidden
      underneath for submission, drafts, and validation. ── */
.form-overlay {
    color-scheme: dark;
}

.tv-select {
    position: relative;
}

.tv-select .tv-select__native {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* Button mirrors the form-dark field look; full legacy-button reset */
.tv-select__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0.8rem 0.95rem;

    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--theme-radius-md, 1rem);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 1px 2px rgba(0, 0, 0, 0.12);

    color: var(--fd-text-soft, #d6d7dc);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    cursor: pointer;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.tv-select__button:hover {
    background: rgba(255, 255, 255, 0.12);
}

.tv-select__button:focus-visible,
.tv-select.is-open .tv-select__button {
    outline: none;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(224, 82, 96, 0.55);
    box-shadow:
        0 0 0 3px rgba(224, 82, 96, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.tv-select__value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tv-select__value.is-placeholder {
    color: rgba(255, 255, 255, 0.48);
}

.tv-select__chevron {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    opacity: 0.45;
    transition:
        transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 180ms ease;
}

.tv-select__button:hover .tv-select__chevron {
    opacity: 1;
}

.tv-select.is-open .tv-select__chevron {
    opacity: 1;
    transform: rotate(180deg);
}

/* Options panel — fixed-positioned by JS so nothing clips it */
.tv-select__list {
    position: fixed;
    z-index: 1000000002;
    overflow-y: auto;
    padding: 0.4rem;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%),
        #14161b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.6rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 50px rgba(0, 0, 0, 0.6);

    opacity: 0;
    transform: translateY(6px) scale(0.98);
    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;

    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.tv-select__list[hidden] {
    display: none;
}

.tv-select__list.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.tv-select__list::-webkit-scrollbar {
    width: 8px;
}

.tv-select__list::-webkit-scrollbar-track {
    background: transparent;
}

.tv-select__list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 8px;
}

.tv-select__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.55rem;
    color: var(--fd-text-soft, #d6d7dc);
    font-size: 0.92rem;
    cursor: pointer;
}

.tv-select__option:hover,
.tv-select__option.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.tv-select__option.is-selected {
    background: rgba(224, 82, 96, 0.14);
    color: #fff;
}

.tv-select__option.is-selected::after {
    content: "✓";
    color: #40ba6e;
    font-size: 0.85rem;
}

/* ── Draft-restored notice ── */
.form-overlay__draft-notice[hidden] {
    display: none;
}

.form-overlay__draft-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.25rem;
    padding: 0.5rem 0.55rem 0.5rem 1rem;

    border: 1px dashed rgba(255, 255, 255, 0.22);
    border-radius: 0.55rem;
    color: var(--fd-text-muted, #a6a8b0);
    font-size: 0.9rem;
}

/* "Start over" — padded chip, comfortable to hit */
.form-overlay__draft-notice button {
    margin: 0;
    padding: 0.45rem 0.9rem;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: var(--fd-text-soft, #d6d7dc);
    font: inherit;
    font-size: 0.85rem;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.form-overlay__draft-notice button:hover,
.form-overlay__draft-notice button:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.38);
    color: #fff;
}

/* ── Dirty-close prompt — centered glass card over the panel.
   Buttons use the shared cta.css recipes (tv-cta--red / tv-cta--ghost). ── */
.form-overlay__prompt {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;

    background: rgba(4, 5, 8, 0.6);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    opacity: 0;
    transition:
        opacity 280ms ease,
        -webkit-backdrop-filter 280ms ease,
        backdrop-filter 280ms ease;
}

.form-overlay__prompt[hidden] {
    display: none;
}

.form-overlay__prompt.is-visible {
    opacity: 1;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.form-overlay__prompt-card {
    width: 100%;
    max-width: 24.5rem;
    padding: 2rem 1.75rem 1.75rem;
    text-align: center;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%),
        #14161b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 24px 70px rgba(0, 0, 0, 0.6);

    transform: translateY(14px) scale(0.94);
    opacity: 0;
    transition:
        transform 340ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 240ms ease;
}

.form-overlay__prompt.is-visible .form-overlay__prompt-card {
    transform: none;
    opacity: 1;
}

.form-overlay__prompt-card h3 {
    margin: 0 0 0.45rem;
    color: var(--fd-text, #f5f5f5);
    font-size: 1.2rem;
}

.form-overlay__prompt-card p {
    margin: 0 0 1.4rem;
    color: var(--fd-text-muted, #a6a8b0);
    font-size: 0.92rem;
    line-height: 1.55;
}

.form-overlay__prompt-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* ── Success view ── */
.form-overlay__success {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;

    background:
        linear-gradient(180deg, rgba(64, 186, 110, 0.06) 0%, rgba(255, 255, 255, 0) 40%),
        #101216;
    opacity: 0;
    transition: opacity 260ms ease;
}

.form-overlay__success[hidden] {
    display: none;
}

.form-overlay__success.is-live {
    opacity: 1;
}

.form-overlay__success h3 {
    margin: 0 0 0.4rem;
    color: var(--fd-text, #f5f5f5);
    font-size: 1.5rem;
}

.form-overlay__success p {
    max-width: 26rem;
    margin: 0;
    color: var(--fd-text-muted, #a6a8b0);
}

/* Animated checkmark: circle draws, fills green, check draws, badge pops */
.tv-checkmark {
    width: 6.5rem;
    height: 6.5rem;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    stroke: #fff;
    stroke-width: 2.4;
    stroke-miterlimit: 10;
    box-shadow: inset 0 0 0 rgba(64, 186, 110, 1);
}

.is-live .tv-checkmark {
    animation:
        tv-ck-fill 0.45s ease-in-out 0.5s forwards,
        tv-ck-pop 0.34s ease-in-out 1s both;
}

.tv-checkmark__circle {
    fill: none;
    stroke: #40ba6e;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
}

.is-live .tv-checkmark__circle {
    animation: tv-ck-stroke 0.65s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.tv-checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
}

.is-live .tv-checkmark__check {
    animation: tv-ck-stroke 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.85s forwards;
}

@keyframes tv-ck-stroke {
    100% { stroke-dashoffset: 0; }
}

@keyframes tv-ck-pop {
    0%, 100% { transform: none; }
    50% { transform: scale3d(1.09, 1.09, 1); }
}

@keyframes tv-ck-fill {
    100% { box-shadow: inset 0 0 0 4rem #40ba6e; }
}

/* Countdown ring + number */
.form-overlay__countdown {
    position: relative;
    width: 3.25rem;
    height: 3.25rem;
    margin: 1.75rem 0 0.6rem;
}

.form-overlay__countdown svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.form-overlay__countdown .ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 3;
}

.form-overlay__countdown .ring {
    fill: none;
    stroke: #40ba6e;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100.53;
    stroke-dashoffset: 0;
}

.form-overlay__countdown span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--fd-text-soft, #d6d7dc);
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.form-overlay__countdown-caption {
    margin-bottom: 1.1rem;
    color: var(--fd-text-muted, #a6a8b0);
    font-size: 0.85rem;
}

/* ── Small screens — the overlay goes full screen ── */
@media (max-width: 600px) {
    .form-overlay {
        padding: 0;
    }

    .form-overlay__panel {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border: 0;
        border-radius: 0;
    }

    .form-overlay__head {
        padding: 1.5rem 4rem 0.85rem 1.4rem;
    }

    .form-overlay__body {
        padding: 0.25rem 1.4rem 1.5rem;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .form-overlay,
    .form-overlay__panel,
    .form-overlay__close,
    .form-overlay__prompt,
    .form-overlay__prompt-card,
    .form-overlay__success {
        transition: none;
    }

    .wobble-icon,
    .cta-icon-right {
        animation: none !important;
    }

    .form-overlay__close svg,
    .form-overlay .form-section__wrap,
    .form-overlay .form-section__chevron,
    .form-overlay .form-section__check,
    .tv-select__list,
    .tv-select__chevron {
        transition: none;
    }

    .is-live .tv-checkmark {
        animation: none;
        box-shadow: inset 0 0 0 4rem #40ba6e;
    }

    .is-live .tv-checkmark__circle,
    .is-live .tv-checkmark__check {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* =========================================================
   POLISH LAYER — unified tokens, entrance choreography, and
   material consistency for the overlay system. Sits after the
   base definitions; equal-specificity rules here win by order.
   ========================================================= */

.form-overlay {
    --ov-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ov-accent: 224, 82, 96;
    --ov-green: 64, 186, 110;
    --ov-border-soft: rgba(255, 255, 255, 0.07);
    --ov-border: rgba(255, 255, 255, 0.12);
    --ov-border-strong: rgba(255, 255, 255, 0.22);
    --ov-surface-2: rgba(255, 255, 255, 0.025);
    --ov-surface-3: rgba(255, 255, 255, 0.045);

    background: rgba(3, 4, 7, 0.68);
}

.form-overlay.is-open {
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

/* Text selection inside the overlay carries the brand tint */
.form-overlay ::selection {
    background: rgba(var(--ov-accent), 0.4);
    color: #fff;
}

/* Panel — layered depth: inner rim, key shadow, ambient shadow */
.form-overlay__panel {
    border-color: var(--ov-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 24px 48px -12px rgba(0, 0, 0, 0.55),
        0 48px 120px -8px rgba(0, 0, 0, 0.65);
}

/* The page never scroll-chains behind the panel or dropdown lists */
.form-overlay__body,
.tv-select__list {
    overscroll-behavior: contain;
}

/* ── Entrance choreography — head leads, content cascades in ── */
@keyframes ov-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.form-overlay.is-open .form-overlay__head {
    animation: ov-rise 380ms var(--ov-ease) backwards;
}

.form-overlay.is-open .form-overlay__draft-notice,
.form-overlay.is-open fieldset > *,
.form-overlay.is-open form > .form-status,
.form-overlay.is-open form > p.form-note,
.form-overlay.is-open form > button[type="submit"] {
    /* `backwards`, never `both`: a filled transform animation leaves the row
       as the containing block for the fixed-position .tv-select__list, which
       then renders inside the row and is clipped by the section card. */
    animation: ov-rise 440ms var(--ov-ease) backwards;
    animation-delay: 340ms;
}

.form-overlay.is-open .form-overlay__draft-notice { animation-delay: 40ms; }
.form-overlay.is-open fieldset > *:nth-child(1) { animation-delay: 70ms; }
.form-overlay.is-open fieldset > *:nth-child(2) { animation-delay: 110ms; }
.form-overlay.is-open fieldset > *:nth-child(3) { animation-delay: 150ms; }
.form-overlay.is-open fieldset > *:nth-child(4) { animation-delay: 190ms; }
.form-overlay.is-open fieldset > *:nth-child(5) { animation-delay: 230ms; }
.form-overlay.is-open fieldset > *:nth-child(6) { animation-delay: 270ms; }
.form-overlay.is-open fieldset > *:nth-child(7) { animation-delay: 310ms; }
.form-overlay.is-open form > p.form-note { animation-delay: 360ms; }
.form-overlay.is-open form > button[type="submit"] { animation-delay: 400ms; }

/* Success view cascade (the checkmark keeps its own draw sequence) */
.form-overlay__success.is-live > *:not(.tv-checkmark) {
    animation: ov-rise 440ms var(--ov-ease) backwards;
}

.form-overlay__success.is-live > h3 { animation-delay: 300ms; }
.form-overlay__success.is-live > p { animation-delay: 400ms; }
.form-overlay__success.is-live > .form-overlay__countdown { animation-delay: 520ms; }
.form-overlay__success.is-live > p.form-overlay__countdown-caption { animation-delay: 600ms; }
.form-overlay__success.is-live > button { animation-delay: 680ms; }

/* ── Cohesive field material: inputs, textareas, dropdown buttons all
      share one resting / hover / focus recipe ── */
body.form-dark .form-overlay form input[type="text"],
body.form-dark .form-overlay form input[type="email"],
body.form-dark .form-overlay form input[type="tel"],
body.form-dark .form-overlay form textarea {
    background: var(--ov-surface-3);
    border-color: var(--ov-border-soft);
    border-radius: 0.55rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.18);
}

body.form-dark .form-overlay form input[type="text"]:hover,
body.form-dark .form-overlay form input[type="email"]:hover,
body.form-dark .form-overlay form input[type="tel"]:hover,
body.form-dark .form-overlay form textarea:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--ov-border);
}

body.form-dark .form-overlay form input[type="text"]:focus,
body.form-dark .form-overlay form input[type="email"]:focus,
body.form-dark .form-overlay form input[type="tel"]:focus,
body.form-dark .form-overlay form textarea:focus {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(var(--ov-accent), 0.55);
    box-shadow:
        0 0 0 3px rgba(var(--ov-accent), 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.form-overlay .tv-select__button {
    background: var(--ov-surface-3);
    border-color: var(--ov-border-soft);
    border-radius: 0.55rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.18);
}

.form-overlay .tv-select__button:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--ov-border);
}

.form-overlay .tv-select__button:focus-visible,
.form-overlay .tv-select.is-open .tv-select__button {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(var(--ov-accent), 0.55);
    box-shadow:
        0 0 0 3px rgba(var(--ov-accent), 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ── Section cards respond to editing — the active card lifts ── */
.form-overlay .form-section {
    transition:
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
}

.form-overlay .form-section:focus-within {
    background: rgba(255, 255, 255, 0.035);
    border-color: var(--ov-border-strong);
    box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.5);
}

.form-overlay .form-section:focus-within .form-section__head {
    color: var(--fd-text-soft, #d6d7dc);
}

/* ── Primary submit anchors the panel full-width ── */
body.form-dark .form-overlay form > button[type="submit"].tv-cta {
    width: 100%;
    min-height: 3.1rem;
    margin-top: 1rem;
    font-size: 1rem;
}

/* Draft notice sits on the same material as the section cards */
.form-overlay__draft-notice {
    background: var(--ov-surface-2);
    border-color: rgba(255, 255, 255, 0.16);
}

@media (prefers-reduced-motion: reduce) {
    .form-overlay.is-open .form-overlay__head,
    .form-overlay.is-open .form-overlay__draft-notice,
    .form-overlay.is-open fieldset > *,
    .form-overlay.is-open form > .form-status,
    .form-overlay.is-open form > p.form-note,
    .form-overlay.is-open form > button[type="submit"],
    .form-overlay__success.is-live > *:not(.tv-checkmark) {
        animation: none;
    }

    .form-overlay .form-section {
        transition: none;
    }
}

/* ── Brand presence — the Titan logo stays visible in its navbar position
      while the overlay is open. The overlay reserves a nav-height strip at
      the top (so the panel never covers it) and paints the logo where
      .nav-logo renders it: left 1rem, centered in --nav-h, 11rem wide.
      Skipped at ≤600px, where the panel goes full-screen. ── */
@media (min-width: 601px) {
    .form-overlay {
        padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-h, 3.3rem) + 0.9rem);
    }

    .form-overlay::before {
        content: "";
        position: absolute;
        top: env(safe-area-inset-top, 0px);
        left: calc(env(safe-area-inset-left, 0px) + 1rem);
        width: 11rem;
        height: var(--nav-h, 3.3rem);
        background: url("/assets/images/titan-vans-ws-logo.svg") left center / 11rem auto no-repeat;
    }
}