/*
 * pages/contact-light.css — EN contact page, premium-light.
 * Pairs with light-core.css (chrome). Styles the intro column + the form card.
 * Markup/JS hooks (contact.js, consent.js) are untouched — styling only.
 */

.contact-page { padding: clamp(128px,20vh,200px) 0 clamp(72px,12vh,140px); }
.contact-page__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(32px,5vw,80px); align-items: start; }

/* Intro column */
.contact-page__eyebrow { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ember); display: inline-flex; align-items: center; gap: .7ch; }
.contact-page__eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--ember); display: inline-block; }
.contact-page__title { font-family: var(--disp); font-weight: 500; font-size: clamp(2.8rem,7vw,6rem); line-height: .98; letter-spacing: -.045em; color: var(--ink); margin: 1.3rem 0 0; }
.contact-page__lede { font-family: var(--body); font-size: clamp(1.1rem,1.6vw,1.3rem); color: var(--ink-2); line-height: 1.6; max-width: 46ch; margin-top: 1.4rem; }
.contact-page__meta { margin-top: clamp(32px,5vh,52px); display: grid; grid-template-columns: repeat(2,1fr); gap: 1.6rem 2rem; }
.contact-page__meta dt { font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.contact-page__meta dd { font-family: var(--body); font-size: .98rem; color: var(--ink); line-height: 1.5; }
.mono-xs { font-family: var(--mono); font-size: .8rem; }
.link-inline { font-family: var(--mono); font-size: .78rem; color: var(--ember); border-bottom: 1px solid var(--ember); background: none; padding: 0 0 1px; cursor: pointer; display: inline-block; margin-top: .3rem; transition: opacity .2s ease; }
.link-inline:hover { opacity: .7; }
.contact-page__meta dd .link-inline { display: block; }

.legal-identity { display: flex; flex-direction: column; gap: .15rem; font-family: var(--mono); font-size: .82rem; color: var(--ink-2); line-height: 1.5; font-style: normal; }
.legal-identity__name { font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.legal-identity--card { margin-top: clamp(28px,4vh,42px); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(22px,2.4vw,30px); }

/* AI-Maturity Diagnostic — paid entry, deep-linked from the homepage (#diagnostic) */
.diagnostic-card { margin-top: clamp(24px,3.4vh,36px); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(24px,2.6vw,34px); position: relative; overflow: hidden; scroll-margin-top: 90px; }
.diagnostic-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ember); }
.diagnostic-card__eyebrow { font-family: var(--mono); font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.diagnostic-card__title { font-family: var(--disp); font-weight: 600; font-size: clamp(1.4rem,2.4vw,1.9rem); line-height: 1.1; letter-spacing: -.015em; color: var(--ink); margin: .7rem 0 .3rem; }
.diagnostic-card__price { font-family: var(--mono); font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--ink); margin-bottom: .8rem; }
.diagnostic-card__body { font-family: var(--body); font-size: .98rem; color: var(--ink-2); line-height: 1.6; max-width: 52ch; }

/* Form card */
.contact-page__form-wrap { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: clamp(28px,3vw,48px); }
.contact-form__kicker { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); margin-bottom: 1.8rem; }
.contact-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__field { display: flex; flex-direction: column; margin-bottom: 1.3rem; }
.contact-form__field label { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .6rem; }
.contact-form__required { color: var(--ember); }
.contact-form__optional { color: var(--muted); font-weight: 400; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink); background: #FBFAF6;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 13px 15px;
  width: 100%; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.contact-form textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.contact-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FF6B00' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; cursor: pointer; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: none; border-color: var(--ember); background: #fff; box-shadow: 0 0 0 3px rgba(255,107,0,.14); }
.contact-form__error { font-family: var(--mono); font-size: .72rem; color: var(--color-danger, #D33); margin-top: .5rem; }
.contact-form__error[hidden] { display: none; }
.contact-form__checkbox { display: flex; gap: .8ch; align-items: flex-start; margin: .4rem 0 1.8rem; font-family: var(--body); font-size: .9rem; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
.contact-form__checkbox input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--ember); }
.contact-form__privacy { font-family: var(--body); font-size: .8rem; color: var(--muted); line-height: 1.5; margin: 0 0 1.4rem; }
.contact-form__privacy a { color: var(--ink-2); border-bottom: 1px solid var(--ember); padding-bottom: 1px; }
.contact-form__privacy a:hover { color: var(--ember); }
.contact-form__submit { width: 100%; justify-content: center; }
.contact-form__status { font-family: var(--mono); font-size: .82rem; line-height: 1.5; margin-top: 1.2rem; color: var(--ink-2); }
.contact-form__status[data-state="error"] { color: var(--color-danger, #D33); }
.contact-form__status[data-state="success"] { color: #1E8E4E; }

@media (max-width: 900px) {
  .contact-page__inner { grid-template-columns: 1fr; }
  .contact-page__meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .contact-page__meta { grid-template-columns: 1fr; }
}