/* Contact: the form first, beside the map; the offices over the Severn; what happens next */
.ct-op { padding-top: calc(var(--header-h) + clamp(16px, 2.4vw, 32px)); padding-bottom: clamp(36px, 4vw, 64px); }
.ct-op__grid { display: grid; gap: clamp(22px, 3vw, 48px); align-items: start; }
.ct-op__side { display: grid; gap: 14px; align-content: start; }
.ct-op h1 { font-size: clamp(34px, 3.4vw, 56px); }
.ct-op .lede a { color: var(--green-dark); font-weight: 700; white-space: nowrap; }
.ct-form { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 40px 70px -46px rgba(15,36,24,.45); gap: 11px; padding: clamp(20px, 2vw, 28px); }
.ct-form h3 { font-size: clamp(20px, 1.5vw, 24px); }
.ct-form .field { gap: 4px; }
.ct-form .field input, .ct-form .field select, .ct-form .field textarea { padding: 11px 14px; }
.ct-form .field select { padding-right: 48px; }
.ct-form .field textarea { min-height: 70px; }
.ct-map { position: relative; display: grid; gap: 10px; }
.ct-map__stage { position: relative; width: 100%; height: clamp(300px, calc(100svh - var(--header-h) - 330px), 620px); border-radius: var(--radius); overflow: hidden; background: #e7efe1; border: 1px solid var(--line); }
.ct-map__stage .rmap { position: absolute; inset: 0; width: 100%; height: 100%; }
.ct-map__bar { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-chip { min-height: 44px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); transition: background .3s, color .3s, border-color .3s; }
.ct-chip:hover { border-color: var(--green-deep); }
.ct-chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* offices band */
.ct-offices .section__head .lede { max-width: 110ch; }
.ct-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ct-card { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--radius); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .4s, border-color .4s, transform .5s var(--ease); }
.ct-card:hover { background: rgba(255,255,255,.12); border-color: rgba(122,188,99,.6); transform: translateY(-4px); }
.ct-card__label { font-family: var(--display); font-weight: 700; color: var(--green); }
.ct-card h3 { font-size: clamp(26px, 2.2vw, 36px); }
.ct-card h3 a { color: #fff; text-decoration: none; display: inline-block; padding-block: 9px; }
.ct-card address { font-style: normal; color: rgba(255,255,255,.85); line-height: 1.55; }
.ct-card__actions { margin-top: 6px; }
.ct-card__actions .btn { white-space: nowrap; }
.ct-card--talk { background: rgba(122,188,99,.16); border-color: rgba(122,188,99,.45); }
.ct-hours { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.85); }
.ct-hours b { font-family: var(--display); color: #fff; }
.ct-card__note { font-size: var(--small); color: rgba(255,255,255,.75); }

/* next steps */
.ct-steps { grid-template-columns: 1fr; }
.ct-steps li { grid-template-columns: 42px 1fr; column-gap: 16px; align-items: start; }
.ct-steps li::before { grid-row: span 2; }
.ct-more a { color: var(--green-dark); font-weight: 700; white-space: nowrap; }

@media (min-width: 1000px) {
  .ct-op__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 999px) {
  .ct-map__stage { width: 100%; height: auto; aspect-ratio: 10 / 9; }
  /* phones and tablets: headline, then the form, then the map */
  .ct-op__side { display: contents; }
  .ct-op__side > h1 { order: 1; } .ct-op__side > .lede { order: 2; } .ct-form { order: 3; } .ct-map { order: 4; }
}