/* Tattoo page: three doors + inquiry form. Requires dhc-system.css */
@font-face { font-family: "Anton"; src: url("../fonts/anton-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
.tt-hero { text-align: center; padding: var(--space-7) var(--gutter) var(--space-5); }
.tt-hero .kicker { font-size: var(--text-sm); letter-spacing: .14em; text-transform: uppercase; color: #7b2cbf; }
.tt-hero h1 { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(2.6rem, 11vw, 4.6rem); line-height: 1; margin-top: var(--space-2); }
.tt-hero h1 em { font-family: var(--font-display); text-transform: none; color: #7b2cbf; }
.tt-hero p { max-width: 34em; margin: var(--space-4) auto 0; font-size: var(--text-lg); color: var(--ink-soft); }
.doors { list-style: none; margin: var(--space-5) auto 0; padding: 0 var(--gutter); max-width: 64rem; display: grid; gap: var(--space-3); }
@media (min-width: 800px) { .doors { grid-template-columns: repeat(3, 1fr); } }
.door { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-5); border-radius: var(--radius-lg); text-decoration: none; background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink); }
.door:hover { border-color: var(--violet); }
.door__icon { font-size: 2rem; }
.door b { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: var(--text-2xl); color: #fff; }
.door span { color: var(--on-ink-muted); }
.door em { margin-top: auto; font-style: normal; color: var(--violet); font-size: var(--text-sm); letter-spacing: .1em; text-transform: uppercase; }
.door--soon { background: var(--card); color: var(--ink); border-color: var(--line); cursor: default; }
.door--soon b { color: var(--ink); } .door--soon span { color: var(--muted); } .door--soon em { color: var(--muted); }
.tt-form-wrap { max-width: 40rem; margin: var(--space-8) auto; padding: 0 var(--gutter); scroll-margin-top: 80px; }
.tt-form-wrap h2 { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: var(--text-3xl); }
.tt-form { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.tt-field { display: grid; gap: var(--space-2); }
.tt-field > span { font-weight: 500; }
.tt-field small { color: var(--muted); font-size: var(--text-sm); }
.tt-field input[type=text], .tt-field input[type=email], .tt-field input[type=tel], .tt-field select, .tt-field textarea {
  width: 100%; min-height: 52px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font: var(--text-base) var(--font-body); color: var(--ink); }
.tt-field textarea { min-height: 140px; resize: vertical; }
.tt-row { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .tt-row { grid-template-columns: 1fr 1fr; } }
.tt-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tt-choices label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 99px; background: #fff; cursor: pointer; min-height: var(--tap); }
.tt-choices input { accent-color: #7b2cbf; }
.tt-check { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); background: var(--violet-wash); border-radius: var(--radius); }
.tt-check input { width: 22px; height: 22px; margin-top: 2px; accent-color: #7b2cbf; flex: none; }
.tt-files { padding: var(--space-4); border: 2px dashed #cfc3d8; border-radius: var(--radius); background: #fff; }
.tt-status { min-height: 1.5em; font-size: var(--text-lg); }
.tt-status.is-error { color: #a12a2a; }
.tt-done { text-align: center; padding: var(--space-7) var(--space-5); background: var(--ink); color: #fff; border-radius: var(--radius-lg); }
.tt-done h3 { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: var(--text-3xl); color: #fff; }
.tt-done p { color: var(--on-ink-muted); margin-top: var(--space-3); font-size: var(--text-lg); }

.tt-hero { display: grid; gap: var(--space-5); max-width: 64rem; margin: 0 auto; align-items: center; }
.tt-hero__photo { margin: 0 auto; width: 100%; max-width: 26rem; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; }
.tt-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
@media (min-width: 800px) { .tt-hero { grid-template-columns: 1fr 1.1fr; text-align: left; } .tt-hero p { margin-left: 0; } }