/* ==========================================================
           PAGE: contact.html, pop-art palette
           ========================================================== */
        [data-page="contact"] {
            --ct-bg:    #F4F4F2;
            --ct-red:   #EE3B33;
            --ct-navy:  #1B3A4B;
            --ct-line:  rgba(27, 58, 75, 0.22);
            background: var(--ct-bg);
            color: var(--ct-navy);
            font-family: 'SF Pro Rounded', ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif;
        }

        /* ---- hero ---- */
        [data-page="contact"] .ct-hero {
            position: relative;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 4%;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            min-height: calc(100vh - 52px);
        }

        /* copy floats over the artwork rather than sharing a column with it */
        [data-page="contact"] .ct-copy {
            position: absolute;
            z-index: 2;
            top: 4%;
            left: 4%;
            right: 4%;
        }

        [data-page="contact"] .ct-brand {
            font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
            font-weight: 700;
            font-size: clamp(20px, 3.4vw, 52px);
            letter-spacing: 0.34em;
            color: var(--ct-red);
            text-transform: uppercase;
            margin: 0 0 0.35em;
            white-space: nowrap;
        }

        [data-page="contact"] .ct-headline {
            font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
            font-weight: 900;
            font-style: italic;
            font-size: clamp(38px, 7.4vw, 112px);
            line-height: 0.92;
            letter-spacing: -0.03em;
            color: var(--ct-red);
            margin: 0;
            max-width: 54%;
            text-transform: uppercase;
        }

        /* ---- figure + the card he is holding ---- */
        [data-page="contact"] .ct-figure {
            position: relative;
            z-index: 1;
            flex: 0 0 auto;
            height: calc(100vh - 104px);
            max-height: 1024px;
        }

        [data-page="contact"] .ct-figure img {
            display: block;
            height: 100%;
            width: auto;
        }

        /* measured off bateman.png: the blank card face sits at
           34.4% / 73.1% of the artwork, 39.7% wide by 16.8% tall */
        [data-page="contact"] .ct-card {
            position: absolute;
            left: 34.4%;
            top: 73.1%;
            width: 39.7%;
            height: 16.8%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.1em;
            text-align: center;
            padding: 0 6%;
            transform: rotate(-0.6deg);
        }

        [data-page="contact"] .ct-card > * {
            font-family: 'Garamond', 'EB Garamond', 'Adobe Garamond Pro', 'Apple Garamond', 'Times New Roman', serif;
            font-style: italic;
            font-weight: 700;
            color: var(--ct-red);
            text-transform: uppercase;
            line-height: 1.32;
        }

        [data-page="contact"] .ct-card-name {
            font-size: clamp(8px, 1.18vw, 15px);
            letter-spacing: 0.06em;
        }

        [data-page="contact"] .ct-card-role,
        [data-page="contact"] .ct-card-num {
            font-size: clamp(7px, 1.02vw, 13px);
            letter-spacing: 0.03em;
        }

        [data-page="contact"] .ct-scrollcue {
            position: absolute;
            left: 5vw;
            bottom: 26px;
            font-size: 11px;
            letter-spacing: 0.2em;
            color: rgba(27, 58, 75, 0.45);
        }

        /* ---- form + links ---- */
        [data-page="contact"] .ct-body {
            max-width: 1180px;
            margin: 0 auto;
            padding: 110px 5vw 120px;
            display: grid;
            grid-template-columns: 1.35fr 1fr;
            gap: 78px;
            border-top: 2px solid var(--ct-navy);
        }

        [data-page="contact"] .ct-body h2 {
            font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
            font-weight: 900;
            font-style: italic;
            text-transform: uppercase;
            font-size: clamp(24px, 2.6vw, 38px);
            letter-spacing: -0.02em;
            color: var(--ct-red);
            margin: 0 0 32px;
        }

        [data-page="contact"] .ct-form { display: flex; flex-direction: column; gap: 26px; }
        [data-page="contact"] .ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
        [data-page="contact"] .ct-field { display: flex; flex-direction: column; gap: 7px; }

        [data-page="contact"] .ct-field span {
            font-size: 11px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            font-weight: 600;
            color: rgba(27, 58, 75, 0.72);
        }

        [data-page="contact"] .ct-field input,
        [data-page="contact"] .ct-field textarea {
            font-family: inherit;
            font-size: 15px;
            color: var(--ct-navy);
            background: #FFFFFF;
            border: 1.5px solid var(--ct-line);
            border-radius: 2px;
            padding: 12px 13px;
            outline: none;
            transition: border-color 0.2s ease;
        }

        [data-page="contact"] .ct-field textarea { resize: vertical; min-height: 118px; }

        [data-page="contact"] .ct-field input:focus,
        [data-page="contact"] .ct-field textarea:focus { border-color: var(--ct-red); }

        [data-page="contact"] .ct-submit {
            align-self: flex-start;
            font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
            font-weight: 900;
            font-style: italic;
            text-transform: uppercase;
            font-size: 15px;
            letter-spacing: 0.08em;
            color: #FFFFFF;
            background: var(--ct-red);
            border: none;
            border-radius: 2px;
            padding: 15px 40px;
            cursor: pointer;
            transition: transform 0.2s ease, background 0.2s ease;
        }

        [data-page="contact"] .ct-submit:hover { background: var(--ct-navy); transform: translateY(-2px); }
        [data-page="contact"] .ct-submit:disabled { opacity: 0.65; cursor: default; transform: none; }

        /* Result states. Both land while the button is still disabled, so each
           pulls opacity back to 1: a confirmation nobody can read is not one.
           Red is the idle colour, which is why failure goes navy rather than a
           deeper red that would look like no change at all. */
        [data-page="contact"] .ct-form.ct-sent .ct-submit,
        [data-page="contact"] .ct-form.ct-failed .ct-submit { opacity: 1; }
        [data-page="contact"] .ct-form.ct-sent .ct-submit   { background: #2E7D5B; }
        [data-page="contact"] .ct-form.ct-failed .ct-submit { background: var(--ct-navy); }

        /* The honeypot. Off-canvas rather than display:none, because some bots
           skip anything the CSS hides outright. aria-hidden and tabindex keep it
           away from screen readers and the tab order, so only a script finds it. */
        [data-page="contact"] .ct-hp {
            position: absolute;
            left: -9999px;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
        }

        [data-page="contact"] .ct-links { display: flex; flex-direction: column; }

        [data-page="contact"] .ct-link {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 16px;
            padding: 17px 0;
            border-bottom: 1px solid var(--ct-line);
            text-decoration: none;
            color: var(--ct-navy);
            transition: color 0.2s ease, padding-left 0.2s ease;
        }

        [data-page="contact"] .ct-link:first-of-type { border-top: 1px solid var(--ct-line); }
        [data-page="contact"] .ct-link:hover { color: var(--ct-red); padding-left: 8px; }

        [data-page="contact"] .ct-link b {
            font-weight: 700;
            font-size: 16px;
            letter-spacing: 0.02em;
        }

        [data-page="contact"] .ct-link span {
            font-family: 'SF Mono', Monaco, monospace;
            font-size: 11.5px;
            color: rgba(27, 58, 75, 0.55);
        }

        [data-page="contact"] .ct-note {
            margin-top: 30px;
            font-size: 12px;
            line-height: 1.7;
            color: rgba(27, 58, 75, 0.55);
        }

        @media (max-width: 900px) {
            [data-page="contact"] .ct-hero { min-height: 0; padding-bottom: 10px; }
            [data-page="contact"] .ct-headline { max-width: 74%; }
            [data-page="contact"] .ct-figure { height: auto; width: 96%; }
            [data-page="contact"] .ct-figure img { width: 100%; height: auto; }
            [data-page="contact"] .ct-body { grid-template-columns: 1fr; gap: 54px; padding-top: 70px; }
            [data-page="contact"] .ct-row { grid-template-columns: 1fr; }
            [data-page="contact"] .ct-scrollcue { display: none; }
        }