/* ==========================================================================
   TaradomeFilms — Contact page (loaded after site.css)
   ========================================================================== */

/* Reuse page-hero from about.css pattern (redeclared here so contact.css is standalone) */
.page-hero { position: relative; padding: clamp(9rem, 18vw, 14rem) 0 clamp(3rem, 8vw, 5rem); overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 20% 10%, rgba(107,63,160,0.22), transparent 60%); pointer-events: none; }
.page-hero-grain { position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.page-hero .eyebrow { margin-bottom: 1.6rem; }
.page-hero h1 { position: relative; font-size: clamp(2.6rem, 7vw, 5rem); }
.page-hero-lede { position: relative; margin-top: 1.6rem; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 50ch; line-height: 1.7; }

/* ---- Inquiry tabs ---- */
.inquiry-tabs { display: inline-flex; gap: 0.4rem; padding: 0.35rem; border: 1px solid var(--line); border-radius: 3px; margin-bottom: 3rem; flex-wrap: wrap; }
.inquiry-tabs button { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); background: transparent; border: none; padding: 0.7rem 1.3rem; border-radius: 2px; cursor: pointer; transition: all 0.25s var(--ease); }
.inquiry-tabs button.is-active { background: var(--purple); color: var(--white); }
.inquiry-tabs button:hover:not(.is-active) { color: var(--white); }

/* ---- Layout ---- */
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---- Forms ---- */
.cform { display: none; }
.cform.is-active { display: block; animation: cfade 0.4s var(--ease); }
@keyframes cfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.2rem; }
.field label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  background: var(--ink-3); border: 1px solid var(--line); color: var(--white);
  padding: 0.85rem 1rem; border-radius: 3px; font-family: var(--sans); font-size: 0.95rem; width: 100%;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--line-strong); }
.cform .btn { margin-top: 0.6rem; }
.cform-status { margin-top: 1rem; font-size: 0.9rem; min-height: 1.2em; }
.cform-status.ok { color: var(--purple-bright); }
.cform-status.err { color: #e9a3a3; }

/* ---- Aside ---- */
.contact-card { border: 1px solid var(--line); border-radius: 4px; padding: 1.8rem; margin-bottom: 1.5rem; background: var(--ink-2); }
.contact-list { list-style: none; margin-top: 1.2rem; }
.contact-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: none; }
.contact-list span { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.contact-list a { color: var(--white); font-size: 0.92rem; transition: color 0.2s; }
.contact-list a:hover { color: var(--purple-bright); }
.contact-note { color: var(--muted); font-size: 0.88rem; line-height: 1.6; }