/* ============================================================
   CONTACT / GET A QUOTE PAGE
   ============================================================ */

/* ---------- HERO (compact) ---------- */
.contact-hero{
  padding-top: calc(var(--nav-h) + var(--space-xl));
  padding-bottom: var(--space-lg);
  position:relative;
  overflow:hidden;
}
.contact-hero-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 55% 45% at 85% 0%, var(--glow-amber), transparent 60%),
    radial-gradient(ellipse 45% 40% at 4% 100%, var(--glow-teal), transparent 60%),
    var(--bg);
}
.contact-hero h1{ font-size: var(--step-4); max-width: 18ch; }
.contact-hero .lede{
  margin-top: var(--space-md);
  color: var(--ink-dim);
  font-size: var(--step-1);
  max-width: 58ch;
}
.contact-hero .fine{
  margin-top: var(--space-sm);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

/* ---------- LAYOUT ---------- */
.quote-section{ padding-block: var(--space-lg) var(--space-2xl); }
.quote-grid{
  display:grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-xl);
  align-items:start;
}
.quote-side{ position:sticky; top: calc(var(--nav-h) + var(--space-lg)); }
.quote-side p.intro{
  color: var(--ink-dim);
  font-size: var(--step-0);
  line-height:1.7;
}

/* ---------- PRICING REFERENCE CARD ---------- */
.price-ref{
  margin-top: var(--space-xl);
  border: 1px solid var(--line-strong);
  padding: var(--space-lg);
}
.price-ref h3{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-md);
}
.price-ref-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding-block: 0.7em;
  border-bottom: 1px solid var(--line);
}
.price-ref-row:last-of-type{ border-bottom:none; }
.price-ref-row .svc{ color: var(--ink-dim); font-size: 0.88rem; }
.price-ref-row .amt{
  font-family: var(--font-display);
  font-weight:700;
  color: var(--amber);
  font-size: var(--step-0);
}
.price-ref-note{
  margin-top: var(--space-sm);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}
.price-ref .btn{ margin-top: var(--space-md); width:100%; justify-content:center; }

/* ---------- DIRECT CONTACT CARD ---------- */
.direct-contact{
  margin-top: var(--space-md);
  border: 1px solid var(--line);
  padding: var(--space-lg);
}
.direct-contact h3{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-md);
}
.contact-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block: 0.6em;
  font-size: 0.85rem;
}
.contact-row .k{ color: var(--ink-dim); }
.contact-row .v{
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}
.contact-row .v:hover{ color: var(--amber); }

.fiverr-note{
  margin-top: var(--space-md);
  border: 1px dashed var(--line-strong);
  padding: var(--space-md);
}
.fiverr-note p{ color: var(--ink-dim); font-size: 0.82rem; }
.fiverr-note .btn{ margin-top: var(--space-sm); }

@media (max-width: 980px){
  .quote-grid{ grid-template-columns: 1fr; }
  .quote-side{ position:static; }
}

/* ---------- FORM ---------- */
.quote-form{
  border: 1px solid var(--line-strong);
  background: var(--bg-elevated);
  padding: var(--space-xl);
}
.form-section + .form-section{
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--line);
}
.form-section h3{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--space-md);
}
.field-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.field{ margin-top: var(--space-md); }
.field:first-child{ margin-top:0; }
.field label{
  display:block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  margin-bottom: 0.6em;
}
.field label .req{ color: var(--amber); margin-left: 0.2em; }
.field label .opt{
  color: var(--muted);
  font-weight:400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0.5em;
}
.field .hint{
  margin-top: 0.5em;
  color: var(--muted);
  font-size: 0.76rem;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="date"],
select,
textarea{
  width:100%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 0.85em 1em;
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
input::placeholder, textarea::placeholder{ color: var(--muted); }
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--amber);
  background: rgba(232,163,61,0.03);
}
textarea{ resize: vertical; min-height: 130px; line-height:1.6; }
select{ cursor:pointer; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color: #d9634f;
}
.field-error{
  display:none;
  margin-top: 0.5em;
  color: #e2836f;
  font-size: 0.78rem;
  font-family: var(--font-mono);
}
.field.has-error .field-error{ display:block; }

/* ---------- PILL / CARD SELECT GROUPS ---------- */
.pill-group{
  display:flex;
  flex-wrap:wrap;
  gap: 0.6rem;
}
.pill-group input{
  position:absolute;
  opacity:0;
  width:1px; height:1px;
}
.pill-group label{
  margin:0;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.65em 1.2em;
  transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.pill-group input:checked + label{
  background: var(--amber);
  border-color: var(--amber);
  color: var(--amber-ink);
}
.pill-group input:focus-visible + label{
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.card-group{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}
.card-group input{
  position:absolute;
  opacity:0;
  width:1px; height:1px;
}
.card-group label{
  margin:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap: 0.3em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 1em 1.1em;
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.card-group label .t{
  font-family: var(--font-display);
  font-weight:600;
  font-size: 0.92rem;
  color: var(--ink);
}
.card-group label .d{
  font-size: 0.76rem;
  color: var(--muted);
}
.card-group input:checked + label{
  border-color: var(--amber);
  background: rgba(232,163,61,0.06);
}
.card-group input:focus-visible + label{
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
@media (max-width: 620px){ .card-group{ grid-template-columns: 1fr; } }

.inline-note{
  display:none;
  margin-top: var(--space-sm);
  padding: 0.8em 1em;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  font-size: 0.8rem;
}
.inline-note.is-visible{ display:block; }

/* ---------- CHECKBOX (flexible deadline) ---------- */
.checkbox-row{
  display:flex;
  align-items:center;
  gap: 0.7em;
  margin-top: 0.7em;
}
.checkbox-row input[type="checkbox"]{
  width: 18px; height:18px;
  accent-color: var(--amber);
}
.checkbox-row label{
  margin:0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink-dim);
  cursor:pointer;
}

/* ---------- FILE UPLOAD ---------- */
.upload-zone{
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align:center;
  cursor:pointer;
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.upload-zone.is-dragover{
  border-color: var(--amber);
  background: rgba(232,163,61,0.05);
}
.upload-zone svg{ width:32px; height:32px; color: var(--teal); margin-bottom: 0.8em; }
.upload-zone p.primary{ color: var(--ink); font-size: 0.9rem; }
.upload-zone p.secondary{ color: var(--muted); font-size: 0.76rem; margin-top: 0.4em; }
.upload-zone input[type="file"]{ display:none; }

.upload-list{
  margin-top: var(--space-sm);
  display:flex;
  flex-direction:column;
  gap: 0.5em;
}
.upload-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 0.8em;
  padding: 0.6em 0.9em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--ink-dim);
}
.upload-item button{
  background:none; border:none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-decoration: underline;
}
.upload-item button:hover{ color: var(--amber); }

.upload-disclaimer{
  margin-top: var(--space-sm);
  color: var(--muted);
  font-size: 0.74rem;
  line-height:1.6;
}

/* ---------- HONEYPOT (visually hidden, still in tab order removed) ---------- */
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

/* ---------- SUBMIT ---------- */
.form-submit{
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--line);
}
.submit-btn{
  width:100%;
  justify-content:center;
  font-size: 0.82rem;
  padding: 1.1em 2em;
  position:relative;
}
.submit-btn[disabled]{ opacity:0.7; cursor:not-allowed; }
.submit-spinner{
  display:none;
  width:16px; height:16px;
  border-radius:50%;
  border: 2px solid rgba(23,19,10,0.35);
  border-top-color: var(--amber-ink);
  animation: spin 0.7s linear infinite;
  margin-right: 0.6em;
}
.submit-btn.is-loading .submit-spinner{ display:inline-block; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.form-status{
  margin-top: var(--space-md);
  font-size: 0.82rem;
  display:none;
}
.form-status.is-error{
  display:block;
  color: #e2836f;
}

/* ---------- SUCCESS STATE ---------- */
.form-success{
  display:none;
  text-align:center;
  padding: var(--space-xl) var(--space-md);
}
.form-success.is-visible{ display:block; }
.quote-form.is-submitted .form-fields{ display:none; }
.form-success svg{ width:52px; height:52px; color: var(--amber); margin-bottom: var(--space-md); }
.form-success h3{ font-size: var(--step-2); }
.form-success p{ color: var(--ink-dim); margin-top: var(--space-sm); max-width: 46ch; margin-inline:auto; }
.form-success .btn{ margin-top: var(--space-lg); }

/* ---------- privacy note ---------- */
.privacy-note{
  display:flex;
  gap: 0.7em;
  align-items:flex-start;
  margin-top: var(--space-sm);
  color: var(--muted);
  font-size: 0.76rem;
  line-height:1.6;
}
.privacy-note svg{ width:16px; height:16px; flex-shrink:0; margin-top:0.15em; color: var(--teal); }

@media (max-width: 620px){
  .quote-form{ padding: var(--space-lg); }
  .field-row{ grid-template-columns: 1fr; }
}