/* ============================================================
   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; }
}

.success-reference{
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--amber);
  font-weight: 600;
}
.success-email-note{
  margin-top: 0.4em;
  color: var(--muted);
  font-size: 0.82rem;
}

/* ============================================================
   NUMERIC VIDEO COUNT
   The count pills are numbers now, so they're sized as a tidy
   row of equal squares rather than variable-width word pills.
   ============================================================ */
.pill-group--count label{
  min-width: 3.1em;
  justify-content: center;
  padding-left: 0.9em;
  padding-right: 0.9em;
}

.count-more{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.8rem;
}
.count-more-label{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
}
.count-more input{
  width: 7.5rem;
  margin: 0;
}

/* ============================================================
   LIVE ESTIMATE PANEL
   Sits inside the form, quiet by default: a raised surface with
   a hairline, amber used only for the total and the discount.
   ============================================================ */
.estimate-panel{
  margin-top: var(--space-md);
  padding: 1.4rem 1.5rem 1.3rem;
  background: var(--bg-elevated-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.estimate-panel[hidden]{ display: none; }

.estimate-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.estimate-title{
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}
.estimate-status{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
}

.estimate-lines{
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
}
.estimate-lines li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-dim);
}
.estimate-lines .el-label{ min-width: 0; }
.estimate-lines .el-name{ color: var(--ink); display: block; }
.estimate-lines .el-detail{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
.estimate-lines .el-amount{
  font-family: var(--font-mono);
  color: var(--ink);
  white-space: nowrap;
}

.estimate-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  font-size: 0.88rem;
  color: var(--ink-dim);
}
.estimate-row span:last-child{
  font-family: var(--font-mono);
  color: var(--ink);
  white-space: nowrap;
}
.estimate-row--discount span{ color: var(--amber); }
.estimate-row--discount span:last-child{ color: var(--amber); }
.estimate-row--total{
  margin-top: 0.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-strong);
  font-size: 1rem;
  color: var(--ink);
}
.estimate-row--total span:last-child{
  font-size: 1.25rem;
  color: var(--amber);
}
.estimate-row--total span:first-child{ font-weight: 600; }

.estimate-hint,
.estimate-note{
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-dim);
}
.estimate-hint[hidden], .estimate-note[hidden]{ display: none; }
.estimate-disclaimer{
  margin: 1rem 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---- Discount code ---- */
.discount-box{
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.discount-box[hidden]{ display: none; }
.discount-box > label{
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.discount-row{
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.discount-row input{
  flex: 1 1 11rem;
  min-width: 0;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
}
.discount-row .btn{ flex: 0 0 auto; }
.btn--sm{
  padding: 0.6em 1.3em;
  font-size: 0.74rem;
}
.discount-msg{
  margin: 0.6rem 0 0;
  min-height: 1.1em;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}
.discount-msg.is-ok{ color: var(--amber); }
.discount-msg.is-err{ color: #E4796B; }

.discount-row input.is-applied{
  border-color: var(--amber);
  color: var(--amber);
}

@media (max-width: 560px){
  .estimate-panel{ padding: 1.2rem 1.1rem; }
  .estimate-lines li{ flex-wrap: wrap; }
  .discount-row input{ flex: 1 1 100%; }
}

/* The .btn class sets an explicit display, which would otherwise win
   over the [hidden] attribute and leave Apply and Remove both on
   screen at once. */
.discount-row .btn[hidden]{ display: none; }
.estimate-panel [hidden]{ display: none; }