/* Contact (contact/index.html), on the section grammar (14 Oct 2026). Loaded after company.css and the page's own
   <style>, scoped to main.pg-contact so the shared ct-* and form rules stay as they are for everyone else.
   Order: the heading and lede; one orange tray (the call to act) holding the form as a white card, with "Before you
   write" as a card beside it; "Where we are" as a chapter, the offices as white cards beside the studio photo; then
   Keep exploring. The form itself (fields, names, chips, validation, script) is unchanged: only its frame moved. */
main.pg-contact .ct2{padding-top:184px}
main.pg-contact .ct2-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:end;margin-bottom:40px}
main.pg-contact .ct2-head h1{font:600 72px/1.02 var(--sans);letter-spacing:-.035em;text-wrap:balance;max-width:13ch}
main.pg-contact .ct2-lede .lead{font-size:18px;line-height:27px;color:var(--muted)}
main.pg-contact .ct2-lede .lead a{color:var(--ink);border-bottom:1px solid var(--brand)}
main.pg-contact .ct2-lede .where{margin-top:14px;font-size:15px;line-height:22px;color:var(--muted)}

/* the tray: form card and the FAQ card side by side */
main.pg-contact .ct2-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
main.pg-contact .ct2-main{min-width:0}
main.pg-contact .rkf{margin:0;border:0;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);padding:32px}
main.pg-contact .rf-done.rkd{margin:0;padding:32px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
main.pg-contact .rf-done.rkd h3{font:600 26px/1.2 var(--sans);letter-spacing:-.5px}
main.pg-contact .rf-done.rkd p{margin-top:10px;font-size:16px;line-height:24px;color:var(--muted)}
/* each topic chip shows its REKA division only when hovered or chosen, as on Talk to us; at rest it is oat */
main.pg-contact .rkf .rchip[data-tone] .c{background:var(--oat)}
main.pg-contact .rkf .rchip[data-tone]:hover input:not(:checked)+.c{background:var(--t-bg)}
main.pg-contact .rkf .rchip[data-tone] input:checked+.c{background:var(--t-btn);color:var(--t-btn-fg)}

main.pg-contact .ct2-side{display:flex;flex-direction:column;gap:16px;align-self:stretch;min-width:0}
main.pg-contact .ct-faq{padding:12px 28px 8px;gap:0}
main.pg-contact .ct2-sidepic{flex:1}
main.pg-contact .ct2-sidepic .ph{min-height:220px;aspect-ratio:auto}
main.pg-contact .ct-faq h2{margin:16px 0 8px;font:600 28px/1.15 var(--sans);letter-spacing:-.6px;color:var(--ink)}
main.pg-contact .ct-faq details:last-child{border-bottom:0}
main.pg-contact .ct-faq details p{font-size:15px;line-height:23px;color:var(--muted)}

/* where we are */
main.pg-contact .ct-where{padding-bottom:0;scroll-margin-top:96px}
main.pg-contact .ct-where .chap-head h2{font:600 56px/1.04 var(--sans);letter-spacing:-.035em;color:var(--ink)}
main.pg-contact .ct-where .lead2{margin:0}
main.pg-contact .ct2-wgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
main.pg-contact .ct-off{border-top:0;display:grid;gap:12px;align-content:start}
main.pg-contact .ct-off li,main.pg-contact .ct-off li:hover{padding:20px 22px;border:0;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
main.pg-contact .ct-off li:hover time{color:var(--muted)}
main.pg-contact .ct-off b{color:var(--brand-text)}
main.pg-contact .ct-off p{margin-top:6px;color:var(--muted)}
main.pg-contact .ct2-pic{padding:12px}
main.pg-contact .ct2-pic .frame{margin:0;flex:1;display:flex}
main.pg-contact .ct2-pic .ph{flex:1;min-height:100%;aspect-ratio:4/3;border-radius:0}

@media (max-width:1000px){
  main.pg-contact .ct2-grid{grid-template-columns:minmax(0,1fr)}
  main.pg-contact .ct2-sidepic{display:none}
}
@media (max-width:900px){
  main.pg-contact .ct2{padding-top:136px}
  main.pg-contact .ct2-head{grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:28px}
  main.pg-contact .ct2-head h1{font-size:46px}
  main.pg-contact .ct-where .chap-head h2{font-size:38px;line-height:1.08}
  main.pg-contact .ct2-wgrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  main.pg-contact .ct2-head h1{font-size:40px}
  main.pg-contact .ct2-lede .lead{font-size:16px;line-height:24px}
  main.pg-contact .rkf{padding:20px}
  main.pg-contact .rf-done.rkd{padding:24px 20px}
  main.pg-contact .ct-faq{padding:8px 20px 4px}
  main.pg-contact .ct-faq h2{font-size:24px}
  main.pg-contact .ct-off li,main.pg-contact .ct-off li:hover{padding:18px;grid-template-columns:minmax(0,1fr)}
  main.pg-contact .ct-off time{grid-row:2}
  main.pg-contact .ct2-pic{padding:10px}
}

/* Phones (14 Oct 2026): the photo beside "Before you write" now shows on narrow screens too, full width at 16:9,
   between the form and the questions, so the page no longer runs from the top to "Where we are" without a picture. */
@media (max-width:1000px){
  main.pg-contact .ct2-sidepic{display:flex;order:-1}
  main.pg-contact .ct2-sidepic .ph{min-height:0;aspect-ratio:16/9}
}