/* BENEFSAN — contact.css (R01)
   Page-specific styles for contact.html: message form beside the what-happens-next panel,
   Send-the-assays columns, offices, FAQ width. Tokens only; loaded after main.css (unlayered, so it wins). */

/* ============ 1 · Message form ============ */
/* <900 stacked: form, then the what-happens-next panel · ≥900 form 7 / panel 5, the panel follows the form */
.rfq-grid{display:grid;gap:var(--sp-7) var(--gutter);align-items:start}
@media (min-width:900px){
  .rfq-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .rfq-grid .next{position:sticky;top:var(--sticky-offset)}
}

/* ---- form ---- */
.rfq{display:grid;gap:var(--sp-5);min-width:0;max-width:640px}
.field__msg[hidden]{display:none}
.rfq__privacy{color:var(--muted)}
.form__status{color:var(--ink-2);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--radius);display:flex;gap:10px;align-items:flex-start}
.form__status.is-error{color:var(--error);border-color:var(--error)}
.form__status.is-ok{color:var(--ok);border-color:var(--ok)}
.rfq__received{margin-top:0}
.rfq__received p{font-size:var(--fs-body)}
.rfq__received:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.rfq.is-sent .field,.rfq.is-sent .rfq__privacy{opacity:.55;pointer-events:none}

/* ---- what happens next ---- */
.next{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-5);background:var(--bg-2);border-radius:var(--radius);min-width:0}
.next .eyebrow{margin-bottom:0}
.next__sheet{border-top-color:var(--line)}
.next__sheet>div{grid-template-columns:88px 1fr;padding:8px 0}
.next__links{display:flex;flex-direction:column;gap:2px}
.next__links a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none;font-size:.9375rem;transition:color var(--t-fast)}   /* 15px, as .cta-band__line */
.next__links a .icon{width:18px;height:18px;color:var(--navy)}
.next__links a:hover{color:var(--gold-deep);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold)}
.next__clock{display:block;font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);line-height:1.6}
.next__dot{display:inline-block;vertical-align:middle;width:8px;height:8px;margin-inline-end:8px;margin-top:-2px;border-radius:50%;background:var(--steel)}
.next__clock.is-open .next__dot{background:var(--ok)}

/* ============ 2 · Send the assays ============ */
.assays{display:grid;gap:var(--gutter)}
@media (min-width:900px){.assays{grid-template-columns:1fr 1fr}.assays__nda{grid-column:1/-1}}
.assays__col{gap:var(--sp-4)}
.assays__col .card__icon{color:var(--gold-deep)}
.assays__col .h3{margin-top:var(--sp-2)}
.assays__col .rows{margin-top:var(--sp-2)}
.assays__col .rows>li{grid-template-columns:40px 1fr;padding-block:var(--sp-4)}
.assays__col .rows>li:last-child{border-bottom:0;padding-bottom:0}
.assays__col .rows__idx{padding-top:4px}
.assays__col .h4{margin-bottom:4px}
.assays__col .rows p:not(.h4){color:var(--ink-2);font-size:.9375rem;line-height:1.55}   /* 15px, as .checkbox in main.css */
.assays__nda{background:var(--surface)}

/* ============ 3 · Offices ============ */
/* the outline map always spans its plate's full width (as index.css .places__map), so the SVG edge is the plate edge and the
   land polygon is never hard-cut mid-plate: <1200 a full-width 600/360 plate above the two cards; ≥1200 the first of three
   columns, stretched to the card height with the map centred on the same --bg-2 ground */
.offices{display:grid;gap:var(--gutter)}
.offices__map{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);overflow:hidden;display:flex;align-items:center;aspect-ratio:600/360;min-width:0}
.offices__map svg{width:100%;height:auto;display:block}
@media (min-width:720px){.offices{grid-template-columns:1fr 1fr}.offices__map{grid-column:1/-1}}
@media (min-width:1200px){.offices{grid-template-columns:repeat(3,minmax(0,1fr))}.offices__map{grid-column:auto;aspect-ratio:auto;align-self:stretch}}
.office .fig img{aspect-ratio:16/9}
.office .card__inner{gap:var(--sp-3)}
.office .eyebrow{margin-bottom:0}
.office .datasheet{margin-top:var(--sp-2)}
.office .datasheet>div{grid-template-columns:104px 1fr}
.office .datasheet dd{overflow-wrap:anywhere}
.office__map-link{margin-top:var(--sp-2);align-self:flex-start}
/* outline-map labels are in viewBox units (600 wide): enlarge them when the map renders narrow */
/* (.offices__map prefix: the SVG's own <style> block comes later in the document and would otherwise win on equal specificity) */
@media (max-width:719.98px){.offices__map .map__label{font-size:22px}.offices__map .map__sub{font-size:19px;letter-spacing:.04em}}
/* …and when it sits in a third of the row (≥1200: 340–410px wide) */
@media (min-width:1200px){.offices__map .map__label{font-size:20px}.offices__map .map__sub{font-size:16px;letter-spacing:.05em}}

/* ============ 4 · FAQ ============ */
.faq{max-width:880px}
/* same button style as services.css .faq__acc so the two FAQs read as one component */
.faq .acc__btn{font-size:clamp(1.125rem,1rem + .5vw,1.375rem);font-family:var(--font-display);letter-spacing:-.01em;padding-block:var(--sp-5)}
.faq .acc__inner>*{font-size:var(--fs-body);color:var(--ink-2)}

/* ============ print ============ */
@media print{
  .rfq-grid{display:block}
  .next{position:static;box-shadow:none;break-inside:avoid}
  .form__actions,.strip{display:none}
}


/* R02.2 — Offices section without the Dubai card: map beside the Bursa card */
@media (min-width:720px){.offices{grid-template-columns:1fr}.offices__map{grid-column:auto}}
@media (min-width:900px){.offices{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch}.offices__map{aspect-ratio:auto;align-self:stretch}}
@media (min-width:1200px){.offices{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}