/* ═══════════════════════════════════════════════
   CONTACT — clean editorial form
   Same tokens and card language as the rest of the
   site (css/why.css, css/popup.css) — no new visual
   style introduced, just this page's own layout.
   ═══════════════════════════════════════════════ */

body.contact-page{background:var(--cream); color:var(--ink)}

/* ── intro ── */
.contact-intro{
  padding:clamp(120px,18vh,180px) 20px clamp(40px,6vh,64px);
  text-align:center;
}
.contact-eyebrow{
  margin:0 0 12px; font:600 11px/1 var(--sans);
  letter-spacing:.28em; text-transform:uppercase; color:var(--wine);
}
.contact-heading{
  margin:0 0 16px; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(30px,4.6vw,54px); color:var(--wine);
}
.contact-subheading{
  max-width:52ch; margin:0 auto; color:var(--ink-soft);
  font-size:clamp(14px,1.4vw,16px); line-height:1.65;
}

/* ── grid: info left · form right ── */
.contact-grid{
  display:grid; grid-template-columns:minmax(240px,320px) minmax(320px,1fr);
  gap:clamp(28px,5vw,72px);
  max-width:920px; margin:0 auto;
  padding:0 20px clamp(70px,11vh,120px);
  align-items:start;
}
@media (max-width:760px){
  .contact-grid{grid-template-columns:1fr}
}

/* ── direct info ── */
.contact-info{
  background:linear-gradient(165deg, rgba(255,255,255,.78), rgba(204,158,152,.22));
  border:1px solid rgba(136,1,42,.08); border-radius:18px;
  padding:28px 26px;
}
.contact-info__eyebrow{
  margin:0 0 18px; font:600 11px/1 var(--sans);
  letter-spacing:.24em; text-transform:uppercase; color:var(--wine);
}
.contact-info__row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px;
  padding:14px 0; border-top:1px solid rgba(136,1,42,.10);
}
.contact-info__row:first-of-type{border-top:0; padding-top:0}
.contact-info__label{
  flex:0 0 100%; font:600 11px/1 var(--sans);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); opacity:.75;
}
.contact-info__value{
  color:var(--wine); text-decoration:none; font-size:14.5px; font-weight:500;
  border-bottom:1px solid transparent; transition:border-color .25s;
}
a.contact-info__value:hover{border-color:var(--wine)}
.contact-info__note{
  margin:18px 0 0; padding-top:14px; border-top:1px solid rgba(136,1,42,.10);
  font-size:12px; line-height:1.6; color:var(--ink-soft);
}

/* thin-underline text button — same pattern as .why-cta__link / .popup-copy */
.contact-copy{
  appearance:none; cursor:pointer; background:none;
  color:var(--wine); border:0; border-bottom:1px solid rgba(136,1,42,.3);
  padding:1px 0; font:600 11px/1 var(--sans);
  letter-spacing:.14em; text-transform:uppercase;
  transition:color .3s, border-color .3s;
}
.contact-copy:hover{color:var(--wine); border-color:var(--wine)}

/* ── the form ── */
/* the [hidden] attribute alone loses to this rule's own display:flex —
   same specificity, but author-origin always beats the UA default — so it
   needs restating explicitly here rather than relying on the attribute. */
.contact-form{display:flex; flex-direction:column; gap:20px}
.contact-form[hidden]{display:none}
.contact-field{display:flex; flex-direction:column}
.contact-label{
  margin-bottom:7px; font:600 11px/1 var(--sans);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.contact-input{
  width:100%; box-sizing:border-box; padding:13px 15px;
  background:rgba(255,255,255,.7); color:var(--ink);
  border:1px solid rgba(136,1,42,.18); border-radius:12px;
  font:400 14px/1.4 var(--sans);
  transition:border-color .25s;
}
.contact-input:focus{border-color:var(--wine)}
.contact-input:focus-visible{outline:2px solid var(--wine); outline-offset:2px; border-color:var(--wine)}
.contact-select{appearance:none; cursor:pointer;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="%23a5675f"/></svg>');
  background-repeat:no-repeat; background-position:right 15px center; padding-right:34px;
}
.contact-textarea{resize:vertical; min-height:110px; font-family:var(--sans)}

.contact-field.has-error .contact-input{border-color:var(--wine)}
.contact-error{
  margin:6px 0 0; font-size:11.5px; color:var(--wine);
  display:none;
}
.contact-field.has-error .contact-error{display:block}

/* the one solid/filled button already established (popup-btn / certs-tab.is-active) */
.contact-btn{
  appearance:none; cursor:pointer; align-self:flex-start;
  background:var(--wine); color:#fdf3f0; border:1px solid var(--wine);
  border-radius:999px; padding:14px 34px;
  font:600 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  transition:background .25s, transform .2s, opacity .25s;
}
.contact-btn:hover{background:var(--wine-soft); border-color:var(--wine-soft)}
.contact-btn:active{transform:scale(.98)}
.contact-btn:disabled{opacity:.6; cursor:default; transform:none}

/* ── success state ── */
.contact-success{
  background:linear-gradient(165deg, rgba(255,255,255,.85), rgba(204,158,152,.24));
  border:1px solid rgba(136,1,42,.08); border-radius:18px;
  padding:40px 34px; text-align:center;
}
.contact-success__eyebrow{
  margin:0 0 10px; font:600 11px/1 var(--sans);
  letter-spacing:.26em; text-transform:uppercase; color:var(--wine);
}
.contact-success__title{
  margin:0 0 10px; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(22px,3vw,28px); color:var(--wine);
}
.contact-success__text{
  margin:0 0 20px; color:var(--ink-soft); font-size:14px; line-height:1.6;
}

/* ── footer ── */
.contact-foot{
  text-align:center; padding:28px 20px 40px; color:var(--ink-soft);
  border-top:1px solid rgba(136,1,42,.10);
}
.contact-foot .wordmark{display:inline-block; margin-bottom:8px; color:var(--wine); font-size:16px}
.contact-foot p{margin:0; font-size:11px; letter-spacing:.05em}

@media (prefers-reduced-motion:reduce){
  .contact-btn,.contact-input,.contact-info__value,.contact-copy{transition:none}
}

/* the message did not send — loud enough to stop someone walking away
   believing it did */
.contact-senderror{
  margin:0 0 14px; padding:12px 14px;
  background:rgba(231,208,207,.5);
  border:1px solid rgba(136,1,42,.24);
  border-radius:10px;
  font:500 13px/1.5 var(--sans); color:var(--wine);
}
.contact-senderror[hidden]{display:none}
.contact-senderror a{color:var(--wine); font-weight:600}

/* what happens to the data, said where it is given (GDPR art. 13) */
.contact-note{
  margin:14px 0 0; font-size:12.5px; line-height:1.5; color:var(--ink-soft);
}
.contact-note a{color:var(--wine); text-underline-offset:2px}