/* ==========================================================================
   OPEN VAULT CAPITAL GROUP
   Presentation layer for the single master production landing page.

   PRINCIPLE: the approved artwork is rendered unmodified, edge to edge, at
   one continuous scale. Everything interactive is an invisible overlay
   anchored to the artwork in percentage terms, so it tracks the image at
   every viewport size without a single fixed pixel offset.

   The master image is a true composite of the five approved production
   assets at their native resolution — it is not upscaled from a smaller
   render, which is what keeps the small type in the loan-program tiles and
   the "Why Investors Choose Us" cards sharp.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Brand — sampled from the approved assets. Used only for interface
       affordances (focus rings, hover states). No artwork is recoloured. */
    --ov-black: #000000;
    --ov-green: #b4d335;
    --ov-gold: #e9b233;
    --ov-ink: #ffffff;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
    scroll-behavior: smooth;
    background: var(--ov-black);
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--ov-black);
    color: var(--ov-ink);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0;
}

a {
    color: inherit;
}

/* Screen-reader-only content. Every word of this page's copy lives inside the
   flattened master artwork, so this is the only machine-readable copy of it —
   it serves assistive technology, search crawlers and AI agents alike. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 100;
    padding: 12px 22px;
    background: var(--ov-green);
    color: var(--ov-black);
    font: 700 13px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.25s var(--ease);
}

.skip-link:focus-visible {
    transform: translate(-50%, 0);
}

:focus-visible {
    outline: 2px solid var(--ov-green);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. THE MASTER LANDING PAGE
   One approved image, full bleed, rendered whole. No crop, no fixed
   aspect-ratio box — the image's own intrinsic ratio sets the height, so the
   footer can never be clipped off the bottom.
   -------------------------------------------------------------------------- */
.master-landing-page {
    position: relative;
    display: block;
    width: 100%;
    background: var(--ov-black);
}

.master-landing-image {
    display: block;
    width: 100%;
    height: auto;
    /* Reserve the exact box before the artwork arrives, so nothing shifts and
       the hotspots are correctly placed from the first paint. The portrait
       master has its own ratio; it is restated at the breakpoint below. */
    aspect-ratio: 2048 / 3690;
}

/* Scroll target for the skip link, parked on the loan-programs band. */
.master-anchor {
    position: absolute;
    left: 0;
    top: 36.8%;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* One overlay per master. Only the group matching the artwork on screen is
   rendered; display:none takes the other out of the tab order and the
   accessibility tree, so the two can never both be live. */
.hotspots {
    position: absolute;
    inset: 0;
}

.hotspots--narrow {
    display: none;
}

/* --------------------------------------------------------------------------
   3a. RECESSION PANELS
   The two card fields are pushed back so they read as contained and secondary
   to the hero.

   A panel is plain black at low opacity. Because it composites over artwork
   whose surround is pure #000, the result is exactly filter: brightness(x) —
   black stays black, so only the luminous parts (icons, rules, type) dim, and
   the panel's own left and right edges are invisible. Its top and bottom edges
   are parked in the middle of the black runs that bracket each field, so there
   is no seam there either. Nothing is baked into the artwork; the degree of
   recession is the opacity below and can be retuned without regenerating the
   master image.
   -------------------------------------------------------------------------- */
.veil {
    position: absolute;
    background: var(--ov-black);
    pointer-events: none;
    transition: opacity 0.55s var(--ease);
}

/* Exploring a field brings it part of the way forward. The tiles are
   clickable, so intent deserves a response — but the recession is only
   softened, never lifted, or the section would jump back to competing with
   the hero on hover. */
.hotspots:has(.hotspot--program:hover) .veil--programs,
.hotspots:has(.hotspot--program:focus-visible) .veil--programs {
    opacity: 0.1 !important;
}

/* --------------------------------------------------------------------------
   4. HOTSPOTS
   Invisible controls laid over the artwork. Every rectangle is expressed as a
   percentage of the master image, so the overlay scales in lockstep with the
   artwork at any viewport width — there is nothing to re-measure when the
   page resizes.
   -------------------------------------------------------------------------- */
.hotspot {
    position: absolute;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: box-shadow 0.3s var(--ease);
}

.hotspot:focus-visible {
    outline: 2px solid var(--ov-green);
    outline-offset: 2px;
}

/* A link hotspot with no href has no destination yet. Keep it inert rather
   than offering a pointer over something that cannot go anywhere. Scoped to
   anchors: a <button> hotspot never carries an href and must stay live. */
a.hotspot:not([href]) {
    pointer-events: none;
    cursor: default;
}

/* Program tiles: a restrained inset glow on intent, so exploring the field
   feels responsive without drawing a box over the approved artwork. */
.hotspot--program:hover,
.hotspot--program:focus-visible {
    box-shadow: inset 0 0 0 1px rgba(233, 178, 51, 0.9),
                0 0 22px rgba(233, 178, 51, 0.28);
}

/* The conversion point earns a warmer response than the tiles. */
.hotspot--cta:hover,
.hotspot--cta:focus-visible {
    box-shadow: 0 0 0 2px rgba(180, 211, 53, 0.75),
                0 10px 38px rgba(180, 211, 53, 0.3);
}

.hotspot--contact:hover,
.hotspot--contact:focus-visible {
    box-shadow: 0 0 0 1px rgba(180, 211, 53, 0.5);
}

/* --------------------------------------------------------------------------
   5. PROGRAM SUMMARY MODAL
   -------------------------------------------------------------------------- */
.program-modal {
    width: min(620px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    margin: auto;
    padding: 0;
    border: 1px solid rgba(233, 178, 51, 0.72);
    border-radius: 6px;
    background: #080808;
    color: var(--ov-ink);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.72);
}

.program-modal:not([open]) {
    display: none;
}

.program-modal::backdrop {
    background: rgba(0, 0, 0, 0.82);
}

.program-modal__panel {
    position: relative;
    padding: clamp(28px, 5vw, 46px);
}

.program-modal__title {
    margin: 0 44px 16px 0;
    color: var(--ov-gold);
    font-size: clamp(24px, 5vw, 36px);
    line-height: 1.08;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.program-modal__summary {
    margin: 0;
    color: #ffffff;
    font-size: clamp(15px, 2vw, 18px);
    line-height: 1.6;
}

.program-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(180, 211, 53, 0.45);
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
}

.program-modal__close:hover,
.program-modal__close:focus-visible {
    border-color: var(--ov-green);
    color: var(--ov-green);
}

body.program-modal-open {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   6. SUBMIT YOUR DEAL — white professional intake form
   -------------------------------------------------------------------------- */
.deal-modal {
    width: min(1120px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    margin: auto;
    padding: 0;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background: #fff;
    color: #111;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}

.deal-modal:not([open]) { display: none; }
.deal-modal::backdrop { background: rgba(0, 0, 0, .82); }

.deal-form { position: relative; padding: clamp(24px, 4vw, 48px); overflow: auto; max-height: calc(100vh - 28px); }
.deal-form__close { position: absolute; top: 14px; right: 18px; border: 0; background: transparent; color: #111; font-size: 32px; line-height: 1; cursor: pointer; }
.deal-form__title { margin: 0; text-align: center; color: #4e6b0d; font-size: clamp(30px, 5vw, 52px); line-height: 1; text-transform: uppercase; }
.deal-form__intro { text-align: center; margin: 10px auto 28px; max-width: 720px; color: #222; }
.deal-section { border: 0; border-top: 1px solid rgba(180, 211, 53, .75); margin: 28px 0 0; padding: 20px 0 0; }
.deal-section legend { padding: 0 14px 0 0; color: #111; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.deal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.deal-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.deal-field { display: flex; flex-direction: column; gap: 6px; }
.deal-field--full { grid-column: 1/-1; }
.deal-field label, .deal-label { font-weight: 650; font-size: 14px; }
.deal-field input, .deal-field select, .deal-field textarea { width: 100%; border: 1px solid #cfcfcf; border-radius: 4px; background: #fff; color: #111; padding: 12px 13px; font: inherit; }
.deal-field textarea { min-height: 130px; resize: vertical; }
.deal-options { display: flex; flex-wrap: wrap; gap: 12px 20px; padding-top: 8px; }
.deal-options label { font-weight: 400; }
.deal-upload { border: 1px dashed #aaa; border-radius: 6px; padding: 18px; background: #fafafa; }
.deal-note { margin: 24px 0 14px; padding: 15px 18px; border: 1px solid rgba(180, 211, 53, .7); border-radius: 5px; font-size: 13px; line-height: 1.5; }
.deal-submit { width: 100%; border: 0; border-radius: 4px; background: var(--ov-green); color: #050505; padding: 15px 20px; font-size: 18px; font-weight: 900; text-transform: uppercase; cursor: pointer; }
.deal-secure { margin: 10px 0 0; text-align: center; color: #555; font-size: 12px; }
.netlify-honeypot { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; }
.deal-success { display: none; padding: 60px 30px; text-align: center; color: #111; }
.deal-success h3 { color: #4e6b0d; font-size: 30px; margin: 0 0 12px; }

@media (max-width: 760px) {
    .deal-grid, .deal-grid--3 { grid-template-columns: 1fr; }
    .deal-form { padding: 24px 18px; }
}

/* --------------------------------------------------------------------------
   7. RESPONSIVE

   A flattened composition cannot reflow, so the page carries two masters: the
   approved landscape composition, and a portrait one built from the same five
   assets for phones. One breakpoint swaps both the artwork and its overlay
   together, so a hit area can never end up over the wrong master.
   -------------------------------------------------------------------------- */

/* Between the two masters the landscape tiles drop below a comfortable touch
   target, so the hit areas are grown outward from their printed rectangles.
   The gutter between tiles is ~2.2% of page width, so this cannot reach a
   neighbour. The artwork is untouched; only the invisible overlay changes. */
@media (min-width: 701px) and (max-width: 900px) {
    .hotspot--program {
        margin: -0.35% -0.7%;
        padding: 0.35% 0.7%;
        box-sizing: content-box;
    }
}

/* --- Phone: portrait master --------------------------------------------- */
@media (max-width: 700px) {
    .master-landing-image {
        aspect-ratio: 1080 / 8729;
    }

    .hotspots--wide {
        display: none;
    }

    .hotspots--narrow {
        display: block;
    }

    .master-anchor {
        top: 7.3%;
    }
}

/* --------------------------------------------------------------------------
   8. PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

@media print {
    .skip-link,
    .hotspot {
        display: none !important;
    }
}