/* Contact (Prompt 21; Figma desktop 1517:51454, tablet 2304:93856, phone 2304:130707 + the four state frames each).
   DOM order: intro → form card → other info. Desktop (≥1024) is a 2-column grid (left = intro + other info, right = the 608 card);
   tablet and phone are one column in DOM order. Phone text styles come from tokens.css (the type scale switches under 600). */
.contact{
  --contact-card-w: 608px;          /* not a Figma token yet: form card width on desktop */
  --contact-card-w-narrow: 520px;   /* not a Figma token yet: card width between 1024 and 1279 (no frame drawn) */
  --contact-circle: 40px;           /* not a Figma token yet: Icon circle / Social circle size */
  --contact-sent-icon: 56px;        /* not a Figma token yet: Message sent check circle */
  --contact-radius-card-phone: 20px;/* not a Figma token yet: card radius on phone */
  --contact-notice-border: 1.5px;   /* not a Figma token yet: error notice border */
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--contact-card-w));grid-template-rows:auto 1fr;
  grid-template-areas:"intro card" "info card";column-gap:var(--space-96);row-gap:var(--space-48);align-items:start;
  max-width:1440px;margin:0 auto;box-sizing:border-box;padding:calc(var(--nav-h,120px) + var(--space-80)) var(--space-112) var(--space-80)}   /* the Navbar overlays the page (120) */
.contact__intro{grid-area:intro;display:flex;flex-direction:column;gap:var(--space-20)}
.contact__card{grid-area:card}
.contact__info{grid-area:info}
.contact__eyebrow{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.contact__title{margin:0;font:var(--text-5xl);text-transform:uppercase;color:var(--text-primary)}
.contact__lead{margin:0;font:var(--text-lg);color:var(--text-primary)}

/* Card */
.contact__card{box-sizing:border-box;padding:var(--space-32);background:var(--surface-default);border:1px solid var(--border-subtle);border-radius:var(--radius-xl)}
.contact__form{display:flex;flex-direction:column;gap:var(--space-24)}
.contact__form .input,.contact__form .select{width:100%;min-width:0}
.contact__topics{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:var(--space-12)}
.contact__legend{padding:0;margin:0 0 var(--space-12);font:var(--text-sm);color:var(--text-primary)}   /* legend ignores flex gap */
.contact__checks{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-16);row-gap:var(--space-12)}
.contact__checks .checkbox{min-width:0}
.contact__topics-error{margin:0;font:var(--text-sm);color:var(--feedback-error)}
.contact__topics.is-error .checkbox__box{border-color:var(--feedback-error)}
.contact__privacy{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.contact__privacy a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.contact__privacy a:hover{color:var(--text-primary)}
.contact__submit{width:100%}

/* Error / Send failed notice (Figma 2317:52213): 1.5 error border, radius 12, padding 16, circle-alert 20 */
.contact-notice{display:flex;align-items:flex-start;gap:var(--space-12);padding:var(--space-16);background:var(--surface-default);border:var(--contact-notice-border) solid var(--feedback-error);border-radius:var(--radius-md-lg)}
.contact-notice[hidden]{display:none}
.contact-notice svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--feedback-error);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-notice__text{margin:0;flex:1;min-width:0;font:var(--text-sm);color:var(--text-primary)}
.contact-notice:focus,.contact-notice:focus-visible{outline:0;box-shadow:none}   /* focused by script (tabindex -1) so screen readers read it; the red border already marks it */

/* Sending: fields keep their values, read-only look stays as drawn (Figma Sending frame shows normal fields) */
.contact__card[data-busy] .contact__topics{pointer-events:none}
.contact__card[data-state="sending"] .select__control{pointer-events:none}

/* Message sent (Figma 2317:51745) */
.contact-sent{display:flex;flex-direction:column;gap:var(--space-20)}
.contact-sent[hidden],.contact__form[hidden]{display:none}
.contact-sent__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--contact-sent-icon);height:var(--contact-sent-icon);border-radius:var(--radius-full);background:var(--surface-selected)}
.contact-sent__icon svg{width:28px;height:28px;fill:none;stroke:var(--text-primary);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.contact-sent__title{margin:0;font:var(--text-3xl);text-transform:uppercase;color:var(--text-primary)}
.contact-sent__title:focus,.contact-sent__title:focus-visible{outline:0;box-shadow:none}   /* focused by script (tabindex -1) only to move the reader here; not an interactive control */
.contact-sent__text{margin:0;font:var(--text-lg);color:var(--text-primary);overflow-wrap:anywhere}
.contact-sent__summary{margin:0;display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-16);background:var(--surface-background);border:1px solid var(--border-subtle);border-radius:var(--radius-md-lg);font:var(--text-sm)}
.contact-sent__row{display:flex;gap:var(--space-12);align-items:flex-start}
.contact-sent__row[hidden]{display:none}
.contact-sent__row dt{flex:none;color:var(--text-secondary)}
.contact-sent__row dd{margin:0;flex:1;min-width:0;text-align:right;color:var(--text-primary);overflow-wrap:anywhere}
.contact-sent__note{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.contact-sent__actions{display:flex;gap:var(--space-12)}
.contact-sent__actions .btn{flex:1;min-width:0}

/* State change: a short fade (removed with reduced motion) */
.contact__card.is-entering>:not([hidden]){animation:contact-in .24s ease-out}
@keyframes contact-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.contact__card.is-entering>:not([hidden]){animation:none}}

/* Other info */
.contact__info{display:flex;flex-direction:column;gap:var(--space-20)}
.contact__info-title{margin:0;font:var(--text-xl);text-transform:uppercase;color:var(--text-primary)}
.contact__channels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-20)}
.contact__channel{display:flex;align-items:center;gap:var(--space-12)}
.contact__circle{flex:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:var(--contact-circle);height:var(--contact-circle);border-radius:var(--radius-full);background:var(--surface-default);border:1px solid var(--border-subtle);color:var(--text-primary)}
.contact__circle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.contact__circle--social img{display:block;width:16px;height:16px}
a.contact__circle{transition:border-color .2s,background-color .2s}
a.contact__circle:hover{border-color:var(--border-strong)}
.contact__channel-text{display:flex;flex-direction:column;min-width:0}
.contact__channel-label{font:var(--text-sm);color:var(--text-secondary)}
.contact__channel-email{font:var(--text-lg);color:var(--text-primary);text-decoration:none;overflow-wrap:anywhere;align-self:flex-start}
.contact__channel-email:hover{text-decoration:underline;text-underline-offset:3px}
.contact__follow{display:flex;align-items:center;gap:var(--space-12)}
.contact__follow-label{margin:0;font:var(--text-sm);color:var(--text-secondary)}
.contact__socials{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-12)}

/* 1024–1279: no frame drawn; keep two columns with a narrower card */
@media (min-width:1024px) and (max-width:1279px){
  .contact{grid-template-columns:minmax(0,1fr) minmax(0,var(--contact-card-w-narrow));column-gap:var(--space-48);padding:calc(var(--nav-h,120px) + var(--space-64)) var(--space-48) var(--space-64)}
}

/* Tablet (600–1023, Figma 744): one column, title → form → other info; padding 48/32, gap 40; H1 Desktop/06 */
@media (max-width:1023px){
  .contact{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-40);padding:calc(var(--nav-h,120px) + var(--space-48)) var(--space-32) var(--space-48)}
  .contact__intro{gap:var(--space-16)}
  .contact__title{font:var(--text-4xl)}
  .contact__info,.contact__channels{gap:var(--space-16)}
  .contact-sent__title{font:var(--text-4xl)}   /* tablet Message sent / Application sent title is Desktop/06 (40) in the frames */
}

/* Phone (<600, Figma 390): app view; padding 24/16, gap 32; card padding 20, radius 20, gap 20; checkboxes in one column */
@media (max-width:599px){
  .contact{gap:var(--space-32);padding:var(--space-24) var(--space-16)}   /* the App / Header is in the flow (sticky) */
  .contact__intro{gap:var(--space-12)}
  .contact__title{font:var(--text-5xl)}
  .contact__card{padding:var(--space-20);border-radius:var(--contact-radius-card-phone)}
  .contact__form{gap:var(--space-20)}
  .contact__checks{grid-template-columns:1fr}
  .contact__channel-email{font:var(--text-base)}
  .contact-sent__actions{flex-direction:column}
  .contact-sent__title{font:var(--text-4xl)}   /* Mobile/06 */
}