/* Contact — design: Contact.dc.html. Shares .bp/.bpl/.crumb from blog.css, .sec-head from site.css. */
.ct-eyebrow { margin: 0; font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: .12em; color: var(--blue); text-transform: uppercase; }
.ct-eyebrow--orange { color: #FF8A57; }
.ct-eyebrow--sm { font-size: 11px; letter-spacing: .1em; }
.ct-lbl { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .06em; color: #6A7490; }
.ct-lbl--navy { color: var(--navy); }
.ct-h3 { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 24px; color: var(--navy); }
.ct-p { margin: 0; font-size: 15px; line-height: 1.6; color: #4A5570; }
.ct-small { margin: 0; font-size: 12px; color: #6A7490; }
.ct-col { display: flex; flex-direction: column; gap: 16px; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ct-btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 600; font-size: 15px; padding: 14px 20px; border-radius: 4px; border: 1px solid transparent; cursor: pointer; }
.ct-btn--block { display: flex; width: 100%; }
.ct-btn--blue { background: var(--blue); color: #fff; }
.ct-btn--blue:hover { background: var(--navy); color: #fff; }
.ct-btn--white { background: #fff; color: var(--navy); }
.ct-btn--white:hover { background: #EEF2FF; color: var(--navy); }
.ct-btn--line { background: #fff; border-color: #C9D1E3; color: var(--navy); font-size: 14px; padding: 11px 16px; }
.ct-btn--line:hover { border-color: var(--navy); color: var(--navy); }

/* Hero + live office clock */
.ct-hero { display: flex; gap: 64px; padding: 72px var(--pad) 80px; }
.ct-hero__text { flex: 1 1 0; display: flex; flex-direction: column; gap: 22px; }
.ct-hero h1 { margin: 0; font-family: Archivo, sans-serif; font-weight: 800; font-size: 58px; line-height: 1.04; letter-spacing: -.015em; color: #fff; }
.ct-hero__intro { margin: 0; font-size: 18px; line-height: 1.6; color: #C3CCE2; max-width: 540px; }
.ct-badges { display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #A9B4CF; }
.ct-clock { width: 440px; flex-shrink: 0; align-self: flex-start; background: #0F1D42; border: 1px solid #2A3D75; border-radius: 6px; overflow: hidden; }
.ct-clock__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid #2A3D75; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #A9B4CF; }
.ct-clock__st { display: flex; align-items: center; gap: 7px; color: #FF8A57; }
.ct-clock__st.is-open { color: #3DD17A; }
.ct-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ct-clock__st.is-open .ct-dot { animation: ct-blink 2s ease-in-out infinite; }
@keyframes ct-blink { 50% { opacity: .35; } }
.ct-clock__time { padding: 20px 18px 8px; display: flex; align-items: baseline; gap: 12px; }
.ct-clock__hm { font-family: "IBM Plex Mono", monospace; font-size: 48px; color: #fff; letter-spacing: -.02em; }
.ct-clock__day { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: #7C89AD; }
.ct-clock__note { padding: 0 18px 16px; font-size: 14px; line-height: 1.5; color: #C3CCE2; }
.ct-clock__rows { margin: 0; display: grid; grid-template-columns: 110px 1fr; border-top: 1px solid #2A3D75; font-size: 14px; }
.ct-clock__rows dt { padding: 11px 18px; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #7C89AD; border-bottom: 1px solid #1E2F63; }
.ct-clock__rows dd { margin: 0; padding: 11px 18px 11px 0; color: #E3E9FF; border-bottom: 1px solid #1E2F63; }
.ct-clock__rows dt:nth-last-of-type(1), .ct-clock__rows dd:last-child { border-bottom: 0; }
.ct-clock__rows a { color: #fff; }

/* Doors */
.ct-doors { padding: 80px var(--pad) 88px; }
.ct-doors .sec-head { margin-bottom: 28px; }
.ct-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.ct-tab { background: #fff; border: 1px solid #D5DCEA; border-radius: 6px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; color: var(--navy); transition: background .2s, border-color .2s; }
.ct-tab:hover { border-color: var(--navy); color: var(--navy); }
.ct-tab__top { display: flex; justify-content: space-between; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #6A7490; }
.ct-tab__t { font-family: Archivo, sans-serif; font-weight: 700; font-size: 21px; }
.ct-tab__d { font-size: 14px; line-height: 1.5; color: #4A5570; }
.ct-tab.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.ct-tab.is-on .ct-tab__top { color: #FF8A57; }
.ct-tab.is-on .ct-tab__d { color: #C3CCE2; }
.ct-panel { background: #fff; border: 1px solid #D5DCEA; border-radius: 6px; padding: 30px 32px; }
.ct-door[hidden] { display: none; }
.ct-flash { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.ct-flash__m { margin: 0; padding: 12px 16px; border-radius: 4px; font-size: 14px; background: #EEF8F1; color: #2E7D45; border: 1px solid #BFE3CB; }
.ct-flash__m--error { background: #FEF1F0; color: #B42318; border-color: #F3C4C0; }

.ct-call { display: grid; grid-template-columns: 1fr 420px; gap: 40px; }
.ct-call--link { align-items: center; }
.ct-pick { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ct-pick legend { padding: 0; margin-bottom: 10px; }
.ct-days, .ct-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ct-day, .ct-slot { position: relative; cursor: pointer; }
.ct-day input, .ct-slot input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ct-day { border: 1px solid #C9D1E3; border-radius: 4px; padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: "IBM Plex Mono", monospace; color: var(--navy); background: #fff; }
.ct-day__wd, .ct-day__m { font-size: 11px; letter-spacing: .06em; }
.ct-day__d { font-family: Archivo, sans-serif; font-weight: 700; font-size: 20px; }
.ct-slot span { display: block; border: 1px solid #C9D1E3; border-radius: 4px; padding: 13px 0; text-align: center; font-family: "IBM Plex Mono", monospace; font-size: 14px; color: var(--navy); background: #fff; }
.ct-day:hover, .ct-slot:hover span { border-color: var(--navy); }
.ct-day:has(input:checked), .ct-slot input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.ct-day:has(input:focus-visible), .ct-slot input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.ct-details { border: 1px solid #E3E8F2; border-radius: 6px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.ct-picked { background: var(--navy); color: #fff; border-radius: 4px; padding: 12px 14px; font-family: "IBM Plex Mono", monospace; font-size: 13px; }
.ct-field { display: flex; flex-direction: column; gap: 6px; }
.ct-field input, .ct-field select, .ct-field textarea { font: inherit; font-size: 15px; border: 1px solid #C9D1E3; border-radius: 4px; padding: 0 12px; height: 44px; width: 100%; max-width: none; box-sizing: border-box; background: #fff; color: #0E1526; }
.ct-field textarea { width: 100%; max-width: none; box-sizing: border-box; height: auto; padding: 10px 12px; resize: vertical; min-height: 130px; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); }
.ct-consent { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0; font-size: 12px; line-height: 1.5; color: #4A5570; }
.ct-consent input { margin: 2px 10px 0 0; }

.ct-project { display: grid; grid-template-columns: 1fr 420px; gap: 40px; align-items: start; }
.ct-prep { list-style: none; margin: 0; padding: 0; border-top: 1px solid #E3E8F2; }
.ct-prep li { display: grid; grid-template-columns: 34px 1fr; padding: 11px 0; border-bottom: 1px solid #E3E8F2; font-size: 15px; }
.ct-check { font-family: "IBM Plex Mono", monospace; color: var(--blue); }
.ct-ps { border-radius: 6px; padding: 26px; display: flex; flex-direction: column; gap: 14px; color: #fff; }
.ct-ps__h { font-family: Archivo, sans-serif; font-weight: 700; font-size: 22px; line-height: 1.3; }
.ct-ps__note { font-size: 12px; color: #A9B4CF; }

.ct-msg { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.ct-span2 { grid-column: span 2; }
.ct-msg__send { justify-self: end; width: 200px; }

/* Office + map */
.ct-office { display: flex; gap: 48px; padding: 80px var(--pad) 96px; }
.ct-map { margin: 0; flex: 1 1 0; min-width: 0; height: 400px; border-radius: 6px; position: relative; overflow: hidden; }
.ct-map__svg { display: block; }
.ct-map__frame { display: block; width: 100%; height: 100%; border: 0; }
.ct-ping { transform-origin: 372px 210px; animation: ct-ping 2.8s ease-out infinite; }
@keyframes ct-ping { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.ct-map__cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(7,15,36,.85); font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #A9B4CF; }
.ct-map__load { font: inherit; color: #fff; background: transparent; border: 1px solid #3A4B7A; padding: 7px 10px; border-radius: 3px; cursor: pointer; }
.ct-map__load:hover { background: #fff; color: var(--navy); }
.ct-office__info { width: 420px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.ct-office__h { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 36px; line-height: 1.1; color: var(--navy); }
.ct-facts { margin: 0; display: grid; grid-template-columns: 130px 1fr; border-top: 1px solid #D5DCEA; font-size: 15px; }
.ct-facts dt { padding: 13px 0; border-bottom: 1px solid #E3E8F2; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .06em; color: #6A7490; }
.ct-facts dd { margin: 0; padding: 13px 0; border-bottom: 1px solid #E3E8F2; }
.ct-office__btns { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 1240px) {
  .ct-hero, .ct-office { flex-direction: column; }
  .ct-clock, .ct-office__info { width: 100%; max-width: 560px; }
  .ct-call, .ct-project { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ct-hero h1 { font-size: 38px; }
  .ct-tabs { grid-template-columns: 1fr; }
  .ct-panel { padding: 22px 18px; }
  .ct-days, .ct-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-msg { grid-template-columns: 1fr; }
  .ct-span2 { grid-column: auto; }
  .ct-msg__send { width: 100%; }
  .ct-map { height: 300px; }
  .ct-facts { grid-template-columns: 100px 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ct-ping, .ct-clock__st.is-open .ct-dot { animation: none; } }

/* Door B · the problem statement form lives in the dark card. Single column: the card is
   420 px wide and a two-column form at that width crushes the labels. */
/* Door B is a form, not a teaser, so the card takes half the row and the fields sit in
   two columns — one tall column left the guidance list stranded beside white space. */
.ct-door .ct-project { grid-template-columns: 1fr 1fr; }
.ct-proj { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-content: start; }
.ct-proj__w { grid-column: span 2; }
.ct-proj .ct-lbl { color: #A9B4CF; }
.ct-proj .ct-btn { margin-top: 2px; }
.ct-checks { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.ct-checks legend { padding: 0 0 8px; }
.ct-check-i { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #E6EAF4; }
.ct-check-i input { margin: 0; }
.ct-consent--dark { color: #A9B4CF; }
.ct-consent--dark a { color: #fff; text-decoration: underline; }

/* Door B's own narrow layout. It has to come after the two-column rules above: the earlier
   900 px block is further up the file, so at equal specificity it loses to them. */
@media (max-width: 900px) {
  /* Door B collapses last */
  .ct-door .ct-project { grid-template-columns: 1fr; }
  .ct-proj { grid-template-columns: 1fr; }
  .ct-proj__w { grid-column: auto; }
}