/* MR1-006 contact, privacy, thank-you and 404 pages: page-specific layout only. Components and effects live in main.css. */

/* ---------- Shared: calm page heroes ---------- */
.contact-hero{padding-bottom:104px}
@media (min-width:1024px){.contact-hero{padding-bottom:136px}}

/* ---------- 1. Contact page ---------- */
/* The form card overlaps the bottom of the dark hero (same trick as .stats--overlap on the home page) */
.contact{position:relative;z-index:2;padding-top:0;padding-bottom:64px}
.contact__grid{margin-top:-64px;align-items:start}
.contact__form{padding:28px 20px;border:1px solid var(--c-gray-200);box-shadow:var(--shadow-card),0 30px 60px -30px rgba(11,31,58,.25)}
.contact__title{font-size:1.5rem;margin-bottom:20px}
.contact-form__note{margin:0;max-width:none;font-size:.9375rem;color:var(--c-slate-500)}
.contact-form .req{color:var(--c-error);font-weight:700}
.contact-form .form-alert{padding:14px 16px;font-size:.9375rem;line-height:1.5}
.contact-form .form-alert .icon{margin-top:2px}
/* MR1-006-FOLLOWUP-2-FOLLOWUP-1: neutral (non-error) alert for the no-JS note; keep phone numbers on one line */
.contact-form .form-alert--info{background:var(--c-blue-50);border-color:var(--c-gray-200);color:var(--c-navy-700)}
.contact-form .form-alert .nowrap{white-space:nowrap}
.form__row{display:grid;gap:20px}
@media (min-width:640px){.form__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px){.contact__form{padding:40px}}
@media (min-width:1024px){
  .contact{padding-bottom:104px}
  .contact__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;margin-top:-88px}
  .contact__side{position:sticky;top:104px}
}

/* Soft blue glow focus ring on inputs (replaces the global yellow ring for text fields only: the blue border + glow carry the focus state) */
.contact-form .field__input{transition:border-color var(--dur-1),box-shadow var(--dur-1) var(--ease-out)}
.contact-form .field__input:focus-visible{outline:2px solid transparent;border-color:var(--c-blue-600);box-shadow:0 0 0 1px var(--c-blue-600),0 0 0 4px rgb(59 130 246 / .2)}
.contact-form .field__input:user-invalid{border-color:var(--c-error)}
.contact-form .field__input:user-invalid:focus-visible{box-shadow:0 0 0 1px var(--c-error),0 0 0 4px rgb(180 35 24 / .15)}
.contact-form textarea.field__input{display:block}
.contact-form select.field__input:invalid{color:var(--c-slate-500)}
.contact-form select.field__input option{color:var(--c-navy-900)}
.contact-form .field--check{margin-top:4px}
.contact-form .field--check label{line-height:1.55}
.contact-form__submit{padding-top:4px}
.contact-form__submit .btn{width:100%}
@media (min-width:480px){.contact-form__submit .btn{width:auto}}

/* Contact cards (spotlight comes from .bento__item) */
.contact__side .stack{gap:16px}
.contact-card{display:flex;align-items:flex-start;gap:20px}
.contact-card .card__icon{margin:0}
.contact-card .card__title{margin-bottom:6px}
.contact-card address{color:var(--c-navy-700)}
.contact-card__list{list-style:none;padding:0;display:grid;gap:2px}
.contact-card__list a{display:inline-block;padding-block:4px;font-weight:600;color:var(--c-blue-600);text-decoration:none}
.contact-card__list a:hover{color:var(--c-blue-700);text-decoration:underline}
.contact-loc{background:var(--c-blue-50)}
.contact-loc .card__icon{background:#fff}
.contact-loc__addr{max-width:none;margin:0 0 24px;font:700 1.375rem/1.3 var(--f-head);letter-spacing:-.01em;color:var(--c-navy-900)}
.contact-loc .btn .icon{width:1.125em;height:1.125em}
@media (max-width:479.98px){.contact-card{gap:16px}.contact-loc .btn{width:100%}}

/* ---------- 2. Privacy (plain prose) ---------- */
.prose{max-width:760px}
.prose h2{margin:2.25em 0 .6em;font-size:1.375rem;line-height:1.3}
.prose>h2:first-child{margin-top:0}
.prose p,.prose li{max-width:68ch}
.prose ul{display:grid;gap:8px;margin:0 0 0 0;padding-left:1.25em}
.prose li::marker{color:var(--c-blue-600)}
.prose p+ul,.prose ul+p{margin-top:1em}
.prose a{overflow-wrap:anywhere}
.prose__date{margin-top:3em!important;padding-top:20px;border-top:1px solid var(--c-gray-200);font-size:.9375rem;color:var(--c-slate-500)}

/* ---------- 3. Thank-you + 404: centred short layout on the dark hero ---------- */
.status-hero{display:grid;align-items:center;min-height:max(520px,calc(100svh - 120px))}
.status-hero__inner{text-align:center}
.status-hero .lead{margin-inline:auto;max-width:52ch;text-wrap:balance}
.status-hero h1{margin-inline:auto;max-width:18ch}
.status-hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
@media (max-width:479.98px){.status-hero__actions .btn{width:100%}}

/* Thank-you: check icon in a green-50 circle that draws itself (stroke-dashoffset, 600 ms) */
.thanks__icon{position:relative;isolation:isolate;display:grid;place-items:center;width:96px;height:96px;margin:0 auto 32px;border-radius:50%;background:var(--c-green-50);box-shadow:0 0 0 8px rgb(47 158 91 / .18),0 20px 60px -10px rgb(47 158 91 / .55)}
.thanks__icon svg{width:48px;height:48px;fill:none;stroke:var(--c-green-700);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.thanks__check{stroke-dasharray:1;stroke-dashoffset:0}
.thanks__icon .pulse-rings{width:100%}
.thanks__icon .pulse-rings span{border-color:rgb(47 158 91 / .7);animation-iteration-count:3}
@keyframes thanks-pop{from{transform:scale(.6);opacity:0}}
@keyframes thanks-draw{from{stroke-dashoffset:1}}
/* base state above is the finished icon, so no-JS, no-animation and reduced-motion (main.css sets animation:none) all show the tick */
@media (prefers-reduced-motion:no-preference){
  .thanks__icon{animation:thanks-pop var(--dur-2) var(--ease-out) both}
  .thanks__check{animation:thanks-draw 600ms var(--ease-in-out) 250ms both}
}

/* 404: big gradient numeral */
.notfound__code{margin:0 auto 8px;max-width:none;font:800 clamp(5.5rem,3rem + 12vw,10rem)/1 var(--f-head);letter-spacing:-.04em;background:linear-gradient(180deg,#fff 20%,rgb(141 184 255 / .35));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* Privacy: prose column + a small sticky contact card on desktop */
.privacy__layout{display:grid;gap:48px}
.privacy__aside{align-self:start}
.privacy__aside .card__title{font-size:1.125rem}
.privacy__aside p+p{margin-top:8px}
.privacy__aside a{font-weight:600}
@media (min-width:1024px){
  .privacy__layout{grid-template-columns:minmax(0,760px) minmax(0,340px);justify-content:space-between;align-items:start}
  .privacy__aside{position:sticky;top:104px}
}