/* ==========================================================================
   Contact page — light side of the "Dark Editorial Hybrid".
   Scoped: loaded only on the Contact template. Fixes old forms/colors/edges.
   ========================================================================== */
:root{
  --ink:#0b0b0d; --ink-line:rgba(255,255,255,.09); --cream:#f2f0ec;
  --paper:#f6f4ef; --paper-soft:#eeebe2; --paper-line:rgba(17,17,17,.08); --charcoal:#16151a;
  --red:#b5121b; --red-bright:#d4222c;
  --f-serif:'Fraunces', Georgia, serif; --f-body:'Inter', system-ui, sans-serif; --f-label:'Space Grotesk', system-ui, sans-serif;
}
body{ background:#f6f4ef !important; color:var(--charcoal); font-family:var(--f-body); }
body::before{ display:none !important; }
main .section{ padding:clamp(48px,7vw,84px) 0; }

/* ---- hero ---- */
.contact-hero, .contact-hero .hero-wrap{ background:transparent !important; }
.contact-hero .hero-wrap{ border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; }
.contact-hero .container{ padding-top:clamp(48px,7vw,80px); padding-bottom:8px; }
.contact-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-label); font-weight:600; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin:0 0 14px; }
.contact-eyebrow::before{ content:""; width:26px; height:2px; background:var(--red); border-radius:2px; }
.contact-hero h1{ font-family:var(--f-serif); font-weight:500; color:var(--charcoal); font-size:clamp(36px,5.5vw,66px); line-height:1.03; letter-spacing:-.015em; margin:0; max-width:17ch; }
.contact-hero .sub{ color:#514e57; font-size:clamp(16px,1.6vw,19px); line-height:1.55; max-width:58ch; margin-top:16px; }
.contact-hero .tag{ background:rgba(17,17,17,.04); border:1px solid var(--paper-line); color:#403d45; border-radius:2px; font-family:var(--f-label); font-weight:500; }

/* ---- form cards ---- */
.card{ background:var(--paper-soft) !important; border:1px solid var(--paper-line) !important; border-radius:2px !important; box-shadow:none !important; }
.card h2{ font-family:var(--f-serif); font-weight:500; color:var(--charcoal); font-size:clamp(22px,2.3vw,30px); letter-spacing:-.01em; margin:0 0 6px; }
.card .meta{ color:#57545d; font-weight:500; }

/* ---- form fields (kill old rounded/blue styling) ---- */
input, select, textarea{
  background:#fff !important; border:1px solid var(--paper-line) !important; border-radius:2px !important;
  color:var(--charcoal) !important; font-family:var(--f-body) !important; font-weight:400 !important;
  padding:13px 14px !important; box-shadow:none !important;
}
input:focus, select:focus, textarea:focus{ border-color:var(--charcoal) !important; }
input::placeholder, textarea::placeholder{ color:#8a8790; }

/* ---- buttons → red pill / outlined ---- */
.btn{ border-radius:2px !important; font-family:var(--f-label); font-weight:600; box-shadow:none !important; }
.btn.primary{ background:var(--red) !important; border:1px solid var(--red) !important; color:#fff !important; }
.btn.primary:hover{ background:var(--red-bright) !important; border-color:var(--red-bright) !important; transform:translateY(-1px); }
.btn.ghost, .btn.small.ghost{ background:transparent !important; border:1px solid rgba(17,17,17,.24) !important; color:var(--charcoal) !important; }
.btn.ghost:hover{ border-color:var(--charcoal) !important; background:rgba(17,17,17,.04) !important; }

/* ---- WhatsApp button → clean dark pill (overrides its inline styles) ---- */
.btn-whatsapp{ background:var(--charcoal) !important; color:#fff !important; border:0 !important; border-radius:2px !important; box-shadow:none !important; }
.btn-whatsapp:hover{ background:#000 !important; filter:none !important; transform:translateY(-1px); }

/* ---- checks / lists ---- */
.check{ background:rgba(181,18,27,.10) !important; border:0 !important; }
.check::before{ color:var(--red) !important; }
.list li{ color:#3a383f; }

/* ---- reveal ---- */
html.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.is-in{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } }