/* ═══════════════════════════════════════════════════════════════════════════
   Contact page only (redesign approved in the Design chat, 2026-11-02): a short
   dark hero (.page-stage), the form + information cards on light (.dissolve),
   the signup starting flat (.is-flat) — those three, the header, buttons,
   scribbles, signup and footer come from css/site.css; this file sets their
   geometry and the rest. Breakpoints: 900 (cards stack) / 768 (phone).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1 · HERO (short dark stage, centred) ══════════════════════════════
   The bands sit high: none may reach the hero's bottom edge (a blurred band cut
   by overflow:hidden reads as a straight line — the founder spotted it). */
.contact .contact-hero { padding: 170px var(--pad) 110px; text-align: center; }
.contact .contact-hero .band-1 { top: 12%; }
.contact .contact-hero .band-2 { top: -40%; }
.contact .contact-hero .band-3 { top: 6%; }
.contact .c-head { max-width: 620px; margin: 0 auto; }
.contact .c-head h1 { font-size: 54px; font-weight: 500; letter-spacing: -.02em; line-height: 1.08; color: #fff; margin: 0 0 18px; }
.contact .c-head .sc-ul { left: -1%; width: 102%; bottom: -8px; height: 16px; }
.contact .c-head p { font-size: 18px; line-height: 1.65; color: var(--muted); margin: 0; }

/* ═══ 2 · FORM + INFORMATION (the blue dissolve, 440px blocks at ±4°) ═══
   .dz2 ends at the section's bottom edge (not below it). The cards start halfway
   down the upper fade and sit over it (founder 2026-11-02). */
.contact .contact-body { --dz-h: 440px; --dz-tilt: 4deg; --dz-top: -100px; --dz2-bottom: 0px; --mid: 240px;
  padding: 150px var(--pad) 360px; }
.contact .contact-inner { display: grid; grid-template-columns: 1fr 380px; gap: 28px; max-width: 1100px; margin: 0 auto; align-items: start; }
.contact .contact-form-card, .contact .contact-info-card {
  background: #fff; border-radius: 24px; border: 1px solid rgba(27,35,64,.08);
  box-shadow: 0 14px 40px rgba(27,35,64,.07); color: #1b2340;
}
.contact .contact-form-card { padding: 44px 44px 40px; }
.contact .contact-info-card { padding: 40px 36px 36px; }
.contact .contact-form-card h2, .contact .contact-info-card h2 {
  font-size: 24px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; color: #1b2340; margin: 0 0 26px;
}

/* form */
.contact .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact .form-group { margin-bottom: 18px; }
.contact .contact-form label {
  display: block; margin-bottom: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #444466;
}
.contact .contact-form input, .contact .contact-form textarea {
  display: block; width: 100%; height: 52px; padding: 0 18px; border-radius: 14px;
  border: 1px solid rgba(27,35,64,.12); background: #f4f6fb; color: #1b2340;
  font: inherit; font-size: 15px; outline: 0;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.contact .contact-form textarea { height: auto; min-height: 150px; padding: 14px 18px; resize: vertical; }
.contact .contact-form input::placeholder, .contact .contact-form textarea::placeholder { color: #8a90a8; }
.contact .contact-form input:focus, .contact .contact-form textarea:focus {
  border-color: var(--gold); background: #fff; box-shadow: 0 0 0 3px rgba(246,177,30,.15);
}
.contact .contact-form .btn-pink { margin-top: 6px; }
/* the live success / error boxes, on the card's radius and the site's green / red */
.contact .cf-msg { margin-bottom: 22px; padding: 16px 20px; border-radius: 14px; font-size: 15px; font-weight: 600; line-height: 1.5; }
.contact #contactSuccess { background: #f0fff4; border: 1px solid #22bb55; color: #0d6b2a; }
.contact #contactError { background: #fff5f5; border: 1px solid #ff4444; color: #b42318; }

/* information: the emoji are the icons (plain, no circle); 14px of air instead of dividers */
.contact .info-item { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 14px 0; }
.contact .contact-info-card h2 + .info-item { padding-top: 0; }
.contact .info-icon { font-size: 22px; line-height: 1.2; padding-top: 1px; }
.contact .info-item h4 {
  margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8a90a8;
}
.contact .info-item p { margin: 0; font-size: 15.5px; font-weight: 400; line-height: 1.55; color: #1b2340; }
/* the handwritten note under the address; the bottom padding keeps the next item clear */
.contact .info-item p.mail { position: relative; padding-bottom: 30px; }
.contact .hand {
  position: absolute; left: 0; top: 26px; white-space: nowrap;
  font-family: 'Bad Script', cursive; font-size: 17px; font-weight: 400; color: #996E13;
  transform: rotate(-3deg); transform-origin: 0 0;
}
/* follow us: the footer's round buttons in their light variant */
.contact .social-links { display: flex; gap: 10px; margin-top: 4px; }
.contact .social-link {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(27,35,64,.14); background: #f4f6fb; color: #1b2340;
  transition: border-color .2s, color .2s;
}
.contact .social-link:hover { border-color: var(--gold); color: #996E13; }

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .contact .contact-inner { grid-template-columns: minmax(0, 1fr); max-width: 640px; gap: 18px; }
}
@media (max-width: 768px) {
  .contact .contact-hero { padding: 130px 22px 70px; }
  .contact .contact-hero .band-1 { top: 16%; }
  .contact .contact-hero .band-2 { top: -30%; }
  .contact .contact-hero .band-3 { top: 10%; }
  .contact .c-head h1 { font-size: 38px; }
  .contact .c-head p { font-size: 15.5px; }
  .contact .contact-body { --dz-h: 300px; --dz-top: -60px; --mid: 200px; padding: 90px 22px 230px; }
  .contact .contact-form-card { padding: 30px 22px 28px; }
  .contact .contact-info-card { padding: 28px 22px 24px; }
  .contact .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .contact .contact-form .btn-pink { width: 100%; }
  .contact .hand { top: 24px; font-size: 15px; }
}

/* ═══ MOTION — the hero's entrance; scroll parts come from js/site.js ═══ */
@media (prefers-reduced-motion: no-preference) {
  .contact .navbar { animation: rg-drop .8s .05s cubic-bezier(.2,.7,.2,1) backwards; }
  .contact .c-head > * { animation: rg-rise .9s cubic-bezier(.2,.7,.2,1) backwards; }
  .contact .c-head > :nth-child(1) { animation-delay: .08s; }
  .contact .c-head > :nth-child(2) { animation-delay: .2s; }
}

/* Bot trap field (contact.html, lib/contact-guard.js): off-screen, never display:none,
   so form-filling bots still see an input to fill */
.contact .cf-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }