/* Contact (/contact/). Loads after /css/bevp-shell.css, /css/readability.css and /assets/forms/forms.css and never restyles
   the shell. Fields, choice pills and confirmations are the shell's and the forms page's own (.u-field, .fm-option, .u-done).
   Breakpoints match the shell: 900 stacked sections, 700 phone.
   Sources: opening as the Saasten .banner-area-v3 split used across BEVP; form as Asata contact.html .get-touch-wrap.style2
   (.get-info beside .form-wrap) with Uevent's paired .contact__wrapper fields; direct help as Saasten .contact-box-group. */

.ct{background:var(--u-bone)}
.ct section{padding-block:var(--rd-section)}
.ct-kicker{margin-bottom:var(--u-s4)}
.ct p{text-wrap:pretty}
.ct :where(h1,h2,h3){text-wrap:balance}

/* 1. Opening: copy on ink beside a rounded photograph, both on one top line */
.ct .ct-hero{background:var(--u-ink);color:var(--u-bone);padding-block:clamp(48px,6vw,96px) clamp(56px,7vw,112px)}
.ct-hero :focus-visible{outline-color:var(--u-bone)}
.ct-hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--rd-gap);align-items:center}
.ct-hero__copy{grid-column:1 / span 6}
.ct-hero .ct-kicker{color:var(--u-bone-soft)}
.ct-h1{margin:0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;font-size:clamp(72px,9.4vw,152px);line-height:.9;letter-spacing:.005em}
.ct-hero__lead{margin-top:var(--u-s6);color:var(--u-bone-soft);max-width:30em}
.ct-hero .rd-actions{margin-top:var(--u-s6)}
.ct-hero__media{grid-column:7 / -1;position:relative;margin:0;aspect-ratio:4 / 3;border-radius:24px;overflow:hidden;background:#1d1b18}
.ct-hero__media img{width:100%;height:100%;object-fit:cover;object-position:40% 40%}
.ct-credit{position:absolute;right:12px;bottom:12px;padding:5px 10px;border-radius:999px;background:rgba(14,13,11,.66);color:#fff;font-family:var(--u-ff-label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}

/* 2. The form: stacked full-width intro, then the inquiry type (left) beside the fields (right) on one top line */
.ct-h2{margin:0}
.ct-form__intro{margin-top:var(--u-s5);max-width:none}
.ct-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--rd-gap);align-items:start;margin-top:clamp(40px,5vw,72px)}
.ct-side{grid-column:1 / span 5}
.ct-fields{grid-column:6 / -1;grid-template-columns:1fr 1fr}
.ct-topics legend{margin-bottom:var(--u-s3)}
.ct-topic-list{display:grid;gap:8px}
.ct-topic-list .fm-option span{display:flex;justify-content:flex-start;width:100%;min-height:52px;padding:10px 22px;font-size:16px;line-height:1.25;text-align:left}
@media (hover:hover){.ct-topic-list .fm-option:hover input:not(:checked) + span{border-color:var(--u-ink)}}
.ct-topics .u-error{margin-top:var(--u-s3)}
.ct-topics:has([aria-invalid="true"]) .fm-option span{border-color:var(--u-error-light)}
.ct-pick{display:none}

.ct-notes:empty{display:none}
.ct-note{margin-top:var(--u-s5);display:grid;gap:var(--u-s3);justify-items:start}
.ct-note p{margin:0;font-size:var(--rd-body);line-height:1.6}
.ct-note__status{font-weight:600}
.ct-note--lead .u-btn{margin-top:var(--u-s2)}
.ct-note__small{color:var(--u-text-soft)}
.ct-note .u-link{color:var(--u-ink)}

.ct-fields .u-field label{color:var(--u-ink)}
.ct-opt{letter-spacing:.04em;text-transform:none;font-family:var(--u-ff-body);font-size:15px;color:var(--u-text-soft)}
.ct-fields .u-field input,.ct-fields .u-field textarea{background:#fff;font-size:17px}
.ct-fields .u-field textarea{min-height:184px}
.ct-hint{margin:0;font-size:15px;line-height:1.5;color:var(--u-text-soft)}
.ct-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.ct-foot{display:grid;gap:var(--u-s4);justify-items:start}
.ct-foot .u-btn[disabled]{opacity:.6;cursor:progress}
.ct-privacy{margin:0;font-size:15px;line-height:1.55;color:var(--u-text-soft);max-width:44em}
.ct-privacy a{color:var(--u-ink);text-decoration:underline;text-underline-offset:4px}

/* Confirmation and the email fallback take the form's place */
.ct-done,.ct-failed{margin-top:clamp(40px,5vw,72px);display:grid;gap:var(--u-s3);justify-items:start;max-width:52em}
.ct-done:focus,.ct-failed:focus{outline:none}
.ct-done:focus-visible,.ct-failed:focus-visible{outline:var(--u-focus);outline-offset:6px}
.ct-done__h{margin:0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;font-size:clamp(34px,3.6vw,56px);line-height:1}
.ct-done p,.ct-failed p{margin:0;font-size:var(--rd-lead);line-height:1.55}
.ct-done__ref{font-family:var(--u-ff-label);font-size:15px!important;letter-spacing:.08em;text-transform:uppercase;color:var(--u-text-soft)}
.ct-done .rd-actions,.ct-failed .rd-actions{margin-top:var(--u-s4)}
.ct-noscript{margin-top:var(--u-s6);font-size:var(--rd-lead)}
.ct-noscript a{text-decoration:underline;text-underline-offset:5px}

/* 3. Direct help (ink): the crisis line first, then four destinations, then the addresses */
.ct .ct-help{background:var(--u-ink);color:var(--u-bone)}
.ct-help .ct-kicker{color:var(--u-bone-soft)}
.ct-help :focus-visible{outline-color:var(--u-bone)}
.ct-crisis{margin-top:clamp(32px,4vw,56px)}
.ct-crisis__line{margin:0;font-family:var(--u-ff-title);text-transform:uppercase;font-size:clamp(30px,3.2vw,48px);line-height:1.05}
.ct-crisis__line a{color:var(--u-bone);text-decoration:underline;text-decoration-color:var(--u-red);text-decoration-thickness:3px;text-underline-offset:8px}
.ct-crisis__note{margin-top:var(--u-s3);font-size:var(--rd-body);line-height:1.6;color:var(--u-bone-soft)}

.ct-paths{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:clamp(40px,5vw,72px) 0 0;padding:0;list-style:none}
.ct-paths a{
  position:relative;display:flex;flex-direction:column;gap:var(--u-s3);height:100%;min-height:180px;padding:24px 24px 64px;border-radius:24px;
  background:rgba(236,227,208,.07);color:var(--u-bone);transition:background .2s ease;
}
@media (hover:hover){.ct-paths a:hover{background:rgba(236,227,208,.13)}}
.ct-paths a:focus-visible{outline:var(--u-focus);outline-color:var(--u-bone);outline-offset:3px}
.ct-paths__t{font-family:var(--u-ff-title);font-size:clamp(24px,2vw,30px);line-height:1.04;text-transform:uppercase}
.ct-paths__d{font-size:var(--rd-body);line-height:1.5;color:var(--u-bone-soft)}
.ct-paths svg{position:absolute;left:24px;bottom:22px;width:24px;height:24px;color:var(--u-red)}

.ct-dir{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--rd-gap);margin-top:clamp(56px,6vw,96px)}
.ct-dir__h{grid-column:1 / span 4;margin:0;font-family:var(--u-ff-title);font-weight:400;text-transform:uppercase;font-size:clamp(28px,2.6vw,40px);line-height:1.02}
.ct-lines{grid-column:5 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--rd-gap);row-gap:var(--u-s6);margin:0}
.ct-lines dt{font-family:var(--u-ff-label);font-size:var(--u-fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--u-bone-soft)}
.ct-lines dd{margin:var(--u-s3) 0 0;font-size:clamp(18px,1.5vw,22px);line-height:1.3}
.ct-lines a{color:var(--u-bone);text-decoration:underline;text-decoration-color:var(--u-red);text-decoration-thickness:2px;text-underline-offset:6px;overflow-wrap:anywhere}

@media (max-width:1099px){
  .ct-paths{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct-paths a{min-height:150px}
}
@media (max-width:899px){
  .ct-hero__copy,.ct-hero__media{grid-column:1 / -1}
  .ct-hero__media{margin-top:var(--u-s7);aspect-ratio:16 / 9}
  .ct-side,.ct-fields{grid-column:1 / -1}
  .ct-fields{margin-top:var(--u-s7)}
  .ct-topic-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct-dir__h,.ct-lines{grid-column:1 / -1}
  .ct-lines{margin-top:var(--u-s5)}
}
@media (max-width:699px){
  .ct-h1{font-size:clamp(64px,19vw,96px)}
  .ct-hero__media{aspect-ratio:4 / 3}
  .ct-hero .rd-actions .u-btn{width:100%;justify-content:center}
  .ct-topic-list{grid-template-columns:minmax(0,1fr)}
  /* Topic picker: a field-styled button that opens the topics as a rounded list over the fields below (see contact.js) */
  .ct-topics{position:relative}
  html.js .ct-pick{
    all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--u-s4);width:100%;
    min-height:var(--u-btn-h);padding:0 20px 0 22px;border-radius:var(--u-radius);border:1.5px solid rgba(14,13,11,.4);background:#fff;
    font-family:var(--u-ff-label);font-size:16px;line-height:1.25;letter-spacing:.04em;color:var(--u-text-soft);cursor:pointer
  }
  html.js .ct-pick.is-set{color:var(--u-ink)}
  html.js .ct-pick svg{flex:none;width:18px;height:18px;color:var(--u-ink);transition:transform .2s ease}
  html.js .ct-pick[aria-expanded="true"]{border-color:var(--u-ink)}
  html.js .ct-pick[aria-expanded="true"] svg{transform:rotate(180deg)}
  html.js .ct-pick:focus-visible{outline:var(--u-focus);outline-offset:2px}
  html.js .ct-topics:has([aria-invalid="true"]) .ct-pick{border-color:var(--u-error-light)}
  html.js .ct-topic-list{display:none}
  html.js .ct-topic-list.is-open{
    display:grid;gap:2px;position:absolute;left:0;right:0;z-index:5;margin-top:8px;padding:8px;
    border-radius:24px;background:#fff;border:1.5px solid var(--u-ink);box-shadow:0 18px 40px rgba(14,13,11,.18)
  }
  html.js .ct-topic-list .fm-option span{min-height:48px;padding:12px 16px;border:0;border-radius:16px;background:transparent;font-size:16px;letter-spacing:.04em}
  html.js .ct-topic-list .fm-option input:checked + span{background:var(--u-ink);color:var(--u-bone)}
  html.js .ct-topic-list .fm-option input:focus-visible + span{outline:var(--u-focus);outline-offset:-2px}
  .ct-fields{grid-template-columns:minmax(0,1fr)}
  .ct-foot .u-btn{width:100%;justify-content:center}
  .ct-paths{grid-template-columns:minmax(0,1fr)}
  .ct-paths a{min-height:0;padding:20px 20px 56px}
  .ct-paths svg{left:20px;bottom:20px}
  .ct-lines{grid-template-columns:minmax(0,1fr)}
}