/**
 * Mockup Theme — Contact page (page-contact.php).
 *
 * Ported from the user's prototype. The prototype already referenced the design
 * tokens, so its :root redefinition + inline @font-face + Google-Fonts link are
 * dropped (values resolve from tokens.css); body/html is owned by base.css.
 * Behaviour (reveal / hero parallax / form-focus / AJAX submit) = contact.js.
 * Enqueued only on this template.
 */

/* ── Reveal-on-scroll (contact.js adds .in) ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s; } .reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; } .reveal-d4 { transition-delay: .4s; }

/* ════ 1. HERO ════ */
.ct-hero { background: var(--black); height: calc(100vh - var(--header-h)); min-height: 480px; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.ct-hero-bg { position: absolute; top: -35%; bottom: -35%; left: 0; right: 0; background-size: cover; background-position: center; will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden; }
.ct-hero-ov { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14, 14, 12, .25) 0%, rgba(14, 14, 12, .1) 40%, rgba(14, 14, 12, .82) 100%); }
.ct-hero-ghost { position: absolute; bottom: -40px; right: -20px; font-family: var(--serif); font-size: 300px; font-weight: 300; color: rgba(255, 255, 255, .04); line-height: 1; letter-spacing: -8px; pointer-events: none; user-select: none; z-index: 1; }
.ct-hero-content { position: relative; z-index: 2; padding: 0 64px 72px; width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: flex-end; gap: 48px; }
.ct-hero-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255, 255, 255, .35); margin-bottom: 20px; }
.ct-hero-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--yellow); }
.ct-hero-title { font-family: var(--serif); font-size: clamp(56px, 9vw, 120px); font-weight: 700; color: #fff; font-style: normal; line-height: .92; letter-spacing: -3px; }
.ct-hero-title span { color: var(--yellow); }
.ct-hero-right { text-align: right; padding-bottom: 8px; flex-shrink: 0; }
.ct-hero-tagline { font-family: var(--sans); font-size: 15px; font-weight: 300; color: rgba(255, 255, 255, .45); line-height: 1.6; max-width: 280px; margin-left: auto; margin-bottom: 24px; }
.ct-hero-scroll { display: inline-flex; align-items: center; gap: 10px; font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255, 255, 255, .25); }
.ct-hero-scroll-line { width: 32px; height: 1px; background: rgba(255, 255, 255, .15); }
.ct-hero::after { content: ''; position: absolute; bottom: 0; left: 0; width: 35vw; height: 2px; background: var(--yellow); z-index: 3; }

/* ════ 2. MAIN — form + info ════ */
.ct-main { display: grid; grid-template-columns: 1fr 420px; min-height: 100vh; }
.ct-form-side { padding: 80px 64px 100px; border-right: 1px solid rgba(14, 14, 12, .1); position: relative; }
.ct-form-side::before { content: ''; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: rgba(14, 14, 12, .1); }
.ct-form-eyebrow { font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(14, 14, 12, .35); margin-bottom: 36px; display: flex; align-items: center; gap: 10px; }
.ct-form-eyebrow::before { content: ''; width: 16px; height: 1px; background: var(--yellow); }
.ct-form-title { font-family: var(--serif); font-size: clamp(32px, 4vw, 52px); font-weight: 700; font-style: normal; letter-spacing: -1.2px; color: var(--black); line-height: 1.05; margin-bottom: 52px; }
.ct-form { display: flex; flex-direction: column; gap: 0; }
.ct-field { position: relative; border-bottom: 1px solid rgba(14, 14, 12, .12); transition: border-color .25s; }
.ct-field:focus-within { border-bottom-color: var(--black); }
.ct-field::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background: var(--yellow); transition: width .4s cubic-bezier(.22, 1, .36, 1); }
.ct-field:focus-within::after { width: 100%; }
.ct-field label { display: block; font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(14, 14, 12, .38); padding-top: 24px; margin-bottom: 8px; }
.ct-field input, .ct-field select, .ct-field textarea { width: 100%; border: none; background: none; outline: none; font-size: 15px; color: var(--black); font-family: inherit; padding-bottom: 18px; resize: none; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: rgba(14, 14, 12, .25); }
.ct-field select { appearance: none; cursor: pointer; padding-bottom: 18px; }
.ct-field select option { color: var(--black); }
.ct-select-wrap { position: relative; }
.ct-select-wrap::after { content: ''; position: absolute; right: 0; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid rgba(14, 14, 12, .4); border-bottom: 1.5px solid rgba(14, 14, 12, .4); transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.ct-field textarea { min-height: 120px; padding-top: 6px; }
.ct-field-row { display: grid; grid-template-columns: 1fr 1fr; }
.ct-field-row .ct-field { border-right: none; }
.ct-field-row .ct-field:first-child { border-right: 1px solid rgba(14, 14, 12, .08); padding-right: 32px; }
.ct-field-row .ct-field:last-child { padding-left: 32px; }
.ct-submit-row { display: flex; align-items: center; justify-content: space-between; padding-top: 48px; }
.ct-submit { display: inline-flex; align-items: center; gap: 12px; padding: 16px 36px; background: var(--black); color: #fff; font-size: 11px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; border: none; cursor: pointer; font-family: var(--sans); transition: background .25s, gap .25s; }
.ct-submit:hover { background: #1a1a18; gap: 18px; }
.ct-submit:disabled { opacity: .55; cursor: default; }
.ct-submit svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 1.6; flex-shrink: 0; transition: transform .25s; }
.ct-submit:hover svg { transform: translateX(4px); }
.ct-note { font-size: 11.5px; color: rgba(14, 14, 12, .35); line-height: 1.6; max-width: 200px; text-align: right; }
.ct-form-result { margin-top: 24px; font-size: 13.5px; line-height: 1.5; display: none; }
.ct-form-result.show { display: block; }
.ct-form-result.is-success { color: #2a8a4a; }
.ct-form-result.is-error { color: #d63638; }

.ct-info-side { background: var(--black); padding: 80px 52px; display: flex; flex-direction: column; gap: 0; position: relative; overflow: hidden; }
.ct-info-side::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, .06); }
.ct-info-ghost { position: absolute; bottom: -60px; right: -30px; font-family: var(--serif); font-size: 180px; font-weight: 300; color: rgba(255, 255, 255, .025); line-height: 1; pointer-events: none; letter-spacing: -5px; }
.ct-info-eyebrow { font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255, 255, 255, .22); margin-bottom: 40px; display: flex; align-items: center; gap: 10px; }
.ct-info-eyebrow::before { content: ''; width: 14px; height: 1px; background: var(--yellow); }
.ct-info-blocks { display: flex; flex-direction: column; gap: 0; flex: 1; border-top: 1px solid rgba(255, 255, 255, .06); }
.ct-info-block { padding: 28px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); display: flex; gap: 18px; align-items: flex-start; cursor: default; transition: padding-left .25s cubic-bezier(.22, 1, .36, 1); }
.ct-info-block:hover { padding-left: 6px; }
.ct-info-icon { width: 36px; height: 36px; flex-shrink: 0; background: var(--yellow); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.ct-info-icon svg { width: 15px; height: 15px; stroke: var(--black); fill: none; stroke-width: 1.5; }
.ct-info-label { font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255, 255, 255, .25); margin-bottom: 6px; }
.ct-info-val { font-size: 14px; color: rgba(255, 255, 255, .75); line-height: 1.5; }
.ct-info-val a { color: rgba(255, 255, 255, .75); text-decoration: none; transition: color .2s; }
.ct-info-val a:hover { color: #fff; }
.ct-hours { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.ct-hours-row { display: flex; justify-content: space-between; gap: 24px; font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.ct-hours-row .day { color: rgba(255, 255, 255, .35); }
.ct-hours-row.today .day, .ct-hours-row.today .time { color: var(--yellow); }
.ct-info-socials { padding-top: 36px; margin-top: auto; }
.ct-info-soc-label { font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255, 255, 255, .2); margin-bottom: 16px; }
.ct-info-soc-links { display: flex; gap: 8px; }
.ct-soc { width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s; }
.ct-soc:hover { border-color: var(--yellow); background: rgba(242, 236, 26, .08); }
.ct-soc svg { width: 15px; height: 15px; stroke: rgba(255, 255, 255, .38); fill: none; stroke-width: 1.5; transition: stroke .2s; }
.ct-soc:hover svg { stroke: var(--yellow); }

/* ════ 3. SHOWROOM — Google Maps embed ════ */
.ct-showroom { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; position: relative; }
.ct-map { position: relative; overflow: hidden; background: #d4d0c8; min-height: 480px; }
.ct-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.15) contrast(.95); transition: filter .4s; }
.ct-map:hover iframe { filter: grayscale(0) contrast(1); }
.ct-map-badge { position: absolute; top: 24px; left: 24px; z-index: 5; background: var(--black); color: #fff; font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase; padding: 10px 16px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.ct-map-badge::before { content: ''; width: 8px; height: 8px; background: var(--yellow); border-radius: 50%; }
.ct-showroom-text { padding: 80px 64px; background: var(--cream); display: flex; flex-direction: column; justify-content: center; border-top: 1px solid rgba(14, 14, 12, .1); }
.ct-showroom-eyebrow { font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(14, 14, 12, .35); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.ct-showroom-eyebrow::before { content: ''; width: 14px; height: 1px; background: var(--yellow); }
.ct-showroom-title { font-family: var(--serif); font-size: clamp(26px, 3.5vw, 44px); font-weight: 700; font-style: normal; letter-spacing: -.8px; line-height: 1.1; margin-bottom: 20px; }
.ct-showroom-addr { font-size: 15px; color: rgba(14, 14, 12, .55); line-height: 1.7; margin-bottom: 36px; }
.ct-showroom-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--black); color: #fff; font-size: 10.5px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; border: none; cursor: pointer; font-family: var(--sans); text-decoration: none; transition: background .2s, gap .25s; width: fit-content; }
.ct-showroom-btn:hover { background: #1a1a18; gap: 14px; }

/* ════ MOBILE ════ */
@media (max-width: 900px) {
    .ct-hero-content { grid-template-columns: 1fr; padding: 0 24px 56px; }
    .ct-hero-right { display: none; }
    .ct-main { grid-template-columns: 1fr; }
    .ct-form-side { padding: 64px 24px 80px; }
    .ct-form-side::before { left: 24px; }
    .ct-info-side { padding: 64px 24px 80px; }
    .ct-field-row { grid-template-columns: 1fr; }
    .ct-field-row .ct-field:first-child { border-right: none; padding-right: 0; }
    .ct-field-row .ct-field:last-child { padding-left: 0; }
    .ct-showroom { grid-template-columns: 1fr; }
    .ct-map { min-height: 340px; }
    .ct-showroom-text { padding: 52px 24px; }
}