/* Contact (loads after apply.css, which holds the page head, board fragments and
   the form system): office card, purpose tiles and the private investor panel. */

/* ---------- Head and the office card ---------- */
.ct-top { padding-top: clamp(1.5rem, 4vw, 3rem); }
.ct-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; min-height: min(calc(100dvh - var(--nav-h) - 8rem), 40rem); }
.ct-head .jump { margin-top: 2rem; font-size: .9375rem; color: var(--fg-2); }
.ct-head .jump .inline-link { display: inline-flex; align-items: center; min-height: 2.75rem; }
.ct-card-col { position: relative; }
.ct-card-col .drawing { top: -2.5rem; right: -2.5rem; width: 17rem; height: 17rem; --sq: 4.25rem; }
.ct-card { position: relative; z-index: 1; padding: clamp(1.5rem, 3.5vw, 2.75rem); }
.details { display: grid; }
.d-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.d-row:first-child { border-top: 0; padding-top: 0; }
.d-row dt { font-size: .875rem; color: var(--muted); padding-top: .2rem; }
.d-row dd { font-size: 1.0625rem; color: var(--fg); }
.d-row address { font-style: normal; }
.d-row .big { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -.6rem; font-size: 1.125rem; overflow-wrap: anywhere; }
.hours li { display: flex; justify-content: space-between; gap: 1.25rem; padding: .15rem 0; }
.hours li span:last-child { color: var(--fg-2); }

/* ---------- Purpose tiles: a radio group, one piece per purpose ---------- */
.purposes > legend { margin-bottom: .75rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .6rem; }
.tile { position: relative; display: block; cursor: pointer; }
.tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tile-in { position: relative; display: flex; align-items: center; gap: .8rem; min-height: 3.5rem; padding: .55rem 2.25rem .55rem .75rem; font-size: .9375rem; line-height: 1.35; color: var(--fg-2);
  border: 1px solid var(--field-line); border-radius: 2px; background: var(--field-bg); transition: border-color .3s, box-shadow .3s, color .3s, background-color .3s; }
.tile-piece { flex: none; width: 2.1rem; height: 2.1rem; }
.tile-in::after { content: ""; position: absolute; right: .9rem; top: 50%; width: .7rem; height: .7rem; margin-top: -.35rem; border: 1px solid var(--field-line); transition: background-color .3s, border-color .3s; }
.tile:hover .tile-in { border-color: var(--fg); color: var(--fg); }
.tile input:checked + .tile-in { color: var(--fg); border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); background: color-mix(in srgb, var(--fg) 5%, var(--field-bg)); }
.tile input:checked + .tile-in::after { background: var(--fg); border-color: var(--fg); }
.tile input:focus-visible + .tile-in { outline: 1.5px solid var(--fg); outline-offset: 3px; }
.purposes[aria-invalid="true"] .tile-in { border-color: var(--fg); }
.purpose-note { display: none; margin-top: 1rem; padding: .85rem 1.1rem; border-left: 2px solid var(--fg); font-size: .9375rem; line-height: 1.55; color: var(--fg-2); background: color-mix(in srgb, var(--fg) 4%, transparent); }
.form:has(input[name="purpose"][value="investor"]:checked) .purpose-note, .form[data-purpose="investor"] .purpose-note { display: block; }

/* ---------- Private investor enquiries ---------- */
.ct-investor { padding-top: clamp(3rem, 7vw, 6rem); }
.inv-stage { position: relative; max-width: 60rem; margin-inline: auto; }
.inv-stage .drawing { left: -3rem; bottom: -3rem; width: 55%; height: 80%; --sq: 4rem; }
.inv-panel { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; padding: clamp(1.75rem, 5vw, 3.75rem); }
.inv-board .mini.fx { --s: clamp(3rem, 5vw, 4.25rem); }
.inv-board .notation { margin-top: .6rem; padding-left: 1rem; }
.inv-copy h2 { font-size: clamp(1.4rem, 2.6vw, 2.25rem); line-height: 1.2; }
.inv-copy p { margin-top: 1.25rem; max-width: 30rem; color: var(--fg-2); font-size: 1.0625rem; }
.inv-copy .ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

@media (max-width: 960px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ct-card-col .drawing { top: -1.5rem; right: -1rem; width: 11rem; height: 11rem; --sq: 2.75rem; }
}
@media (max-width: 700px) {
  .inv-panel { grid-template-columns: minmax(0, 1fr); }
  .inv-board .mini.fx { --s: 3rem; }
}
@media (max-width: 520px) {
  .d-row { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
}