/* Contact Page Styles - pixel-accurate, responsive */
:root{
  --bg: #ffffff;
  --text: #0e0e10;
  --muted: #6b7280;
  --line: #e5e7eb;
  --chip-bg: #f3f4f6;
  --chip-text: #0f172a;
  --chip-ring: #cbd5e1;
  --chip-selected-bg: #0f172a;
  --chip-selected-text: #ffffff;
  --input-bg: #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 32px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.contact-root{max-width:1100px;margin:0 auto;}

.contact-hero{padding-top:8px}
.contact-title{line-height:1.05;margin:24px 0 12px;font-weight:800;letter-spacing:-0.02em}
.contact-title .fade{display:block;font-size:64px;color:#c7cbd3}
.contact-title .main{display:block;font-size:64px}

.contact-sub{margin-top:12px;color:var(--muted);font-size:16px}

.contact-form-section{margin-top:56px;}
.contact-form{max-width:760px}

.field-group{padding:10px 0;border-bottom:1px solid var(--line);margin-bottom:10px;}
.label{display:block;font-size:clamp(18px, 2vw, 22px);color:#111827;font-weight:600;margin-bottom:4px}
.req{color:#ef4444;margin-left:4px}

.input, .textarea{
  width:100%;
  background:var(--input-bg);
  border:0;
  outline:none;
  padding:14px 0;
  font-size:15px;
  color:var(--text);
}
.input::placeholder, .textarea::placeholder{color:#9ca3af;font-size:clamp(18px, 2vw, 22px);}
.textarea{min-height:120px;resize:vertical}

.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--chip-ring);
  background:var(--chip-bg);color:var(--chip-text);font-weight:600;font-size:13px;
  letter-spacing:.01em;cursor:pointer;transition:all .18s ease;
}
.chip:is(:hover,:focus-visible){transform:translateY(-1px);box-shadow:var(--shadow)}
.chip.is-selected{background:var(--chip-selected-bg);color:var(--chip-selected-text);border-color:transparent}

.form-footer{display:flex;justify-content:flex-end;padding-top:28px}
.submit-btn{
  appearance:none;border:0;cursor:pointer;border-radius:999px;
  background:#0f172a;color:#fff;font-weight:700;letter-spacing:.01em;
  height:54px;padding:0 28px;font-size:15px;display:inline-flex;align-items:center;gap:10px;
  box-shadow:0 6px 24px rgba(15,23,42,.18);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.submit-btn:hover{transform:translateY(-1px);box-shadow:0 10px 34px rgba(15,23,42,.24)}
.submit-btn:active{transform:translateY(0)}

/* Divider spacing similar to reference */
.contact-form .field-group:first-child{padding-top:0}
.contact-form .field-group:last-child{border-bottom:0}

/* Responsive Typography */
@media (max-width: 1200px){
  .contact-root{max-width:960px}
  .contact-title .fade{font-size:56px}
  .contact-title .main{font-size:84px}
}

@media (max-width: 992px){
  .contact-root{max-width:820px}
  .contact-title .fade{font-size:48px}
  .contact-title .main{font-size:72px}
}

@media (max-width: 768px){
  .contact-root{padding:32px 18px 72px}
  .contact-hero{display:flex;flex-direction:column;align-items:center;text-align:center;}
  .contact-title{margin-top:8px;text-align:center;line-height:1.08}
  /* Keep "Say Hi! and tell" on one line */
  .contact-title .fade,.contact-title .main{display:inline;white-space:nowrap}
  .contact-title .fade{font-size:58px;margin-right:6px}
  .contact-title .main{font-size:58px}
  .contact-sub{text-align:center;margin-top:10px;}
  .submit-btn{margin-bottom:30px;}
}

/* Header behavior on phones (match home) */
@media (max-width: 640px){
  .contact-form-section{margin-left: 30px; margin-right: 30px;}
}

@media (max-width: 520px){
  .contact-title{padding-top:5rem;}
  .contact-title .fade{font-size:50px}
  .contact-title .main{font-size:50px}
  .chips{gap:10px}
  .chip{height:34px;padding:0 14px;font-size:12.5px}
  .submit-btn{height:50px}
}

@media (max-width: 380px){
  .contact-title .fade{font-size:34px}
  .contact-title .main{font-size:38px}
}