/* Contact page (builder P). Prefix ct-.
   Uses the kit: .phero (solo), .tabs__list/.tab/.tabpanel, .term/.fld/.chips/.chip (forms), .spot, .mono-l, .btn.
   Added here (could be promoted into the kit): the two-column form layout, the Hello dot card, the phone card,
   the location line and the "what happens next" steps that light up after Send. */

.ct-hero.phero { padding-bottom: clamp(36px, 4.4vw, 64px); }
.ct-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 64px); align-items: end; }
.ct-hero__side .phero__lead { margin-top: 0; max-width: 46ch; }
.ct-hero__call { display: none; }
.ct-inline { color: #fff; border-bottom: 1px solid var(--line-2); transition: border-color .3s; }
.ct-inline:hover { border-color: var(--lime); }

.ct { padding-block: clamp(40px, 5vw, 72px) clamp(96px, 12vw, 180px); }
.ct__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.ct__main { min-width: 0; }
.ct-panel { margin-top: clamp(24px, 3vw, 36px); }
.ct-panel__lead { max-width: 54ch; margin-bottom: clamp(20px, 2.4vw, 28px); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; color: rgba(245, 245, 244, .74); }

/* the side column */
.ct__side { display: grid; gap: 14px; min-width: 0; }

/* Hello dots */
.ct-hello { position: relative; aspect-ratio: 16 / 7; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background-color: var(--bg-2); background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.3px); background-size: 22px 22px; background-position: 11px 11px; }
.ct-hello canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ct-hello__cap { position: absolute; left: 18px; bottom: 14px; z-index: 2; opacity: .75; pointer-events: none; }

/* phone card */
.ct-phone { display: grid; gap: 14px; padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--line-2); border-radius: 20px; background: var(--bg-2); transition: border-color .4s, background .4s; }
.ct-phone:hover, .ct-phone:focus-visible { border-color: rgba(198, 244, 50, .55); }
.ct-phone__top { display: flex; align-items: center; justify-content: space-between; }
.ct-phone__ic { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: 50%; color: rgba(245, 245, 244, .8); transition: color .3s, border-color .3s, background .3s; }
.ct-phone__ic .ic { width: 18px; height: 18px; }
.ct-phone:hover .ct-phone__ic, .ct-phone:focus-visible .ct-phone__ic { color: #050505; background: var(--lime); border-color: var(--lime); }
.ct-phone__n { font: 500 clamp(30px, 3.2vw, 44px)/1 var(--mono); letter-spacing: -.04em; white-space: nowrap; }
.ct-phone small { font-size: 15px; color: rgba(245, 245, 244, .66); }

/* where */
.ct-where { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border: 1px solid var(--line); border-radius: 20px; }
.ct-where__ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--lime); }
.ct-where__ic .ic { width: 18px; height: 18px; }
.ct-where p { display: grid; gap: 2px; }
.ct-where b { font: 500 17px/1.25 var(--sans); letter-spacing: -.02em; }
.ct-where span:not(.ct-where__ic) { font-size: 14.5px; color: rgba(245, 245, 244, .66); }

/* what happens next */
.ct-next { padding: clamp(22px, 2.4vw, 30px); border: 1px dashed var(--line-2); border-radius: 20px; }
.ct-next h3 { margin-bottom: 20px; }
.ct-next__list { position: relative; display: grid; gap: 22px; }
.ct-next__list::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 1px; background: var(--line-2); }
.ct-next__list li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; align-items: start; }
.ct-next__n { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg); font: 400 11px/1 var(--mono); color: var(--muted); transition: background .4s, border-color .4s, color .4s, box-shadow .5s; }
.ct-next b { display: block; font: 500 17px/1.25 var(--sans); letter-spacing: -.02em; }
.ct-next p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: rgba(245, 245, 244, .64); }
.ct-next li.is-lit .ct-next__n { background: var(--lime); border-color: var(--lime); color: #050505; box-shadow: 0 0 0 4px rgba(198, 244, 50, .14), 0 0 20px rgba(198, 244, 50, .55); }
.ct-next li.is-lit b { color: #fff; }

/* tab hint that the details travel */
.ct-tabs .tabs__list { max-width: 100%; }

/* responsive */
@media (max-width: 1023px) {
  .ct-hero__grid { grid-template-columns: 1fr; }
  .ct-hero__call { display: flex; }
  .ct__grid { grid-template-columns: 1fr; }
  .ct__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-hello { grid-column: 1 / -1; aspect-ratio: 16 / 6; }
  .ct-next { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ct__side { grid-template-columns: 1fr; }
  .ct-hello { aspect-ratio: 16 / 8; }
  .ct-phone__n { font-size: clamp(28px, 9vw, 36px); }
  .tabs__list { display: flex; width: 100%; }
  .tabs__list .tab { flex: 1 1 0; padding: 0 12px; font-size: 13.5px; }
}