/* Growth Saga AI site: Contact page.
   Sits on style.css + ai.css (shared rhythm, type, keyword gradient, light lines). */

/* ---------- 1 · Hero: the why on the left, the calendar on the right ---------- */
.ct-hero { overflow: hidden; }
.ct-hero .hero__glow {
  background:
    radial-gradient(60% 70% at 8% 0%, rgba(30, 42, 90, .9), transparent 70%),
    radial-gradient(45% 55% at 88% 8%, rgba(70, 100, 220, .22), transparent 70%),
    radial-gradient(40% 45% at 72% 62%, rgba(255, 90, 60, .12), transparent 70%);
}
.ct-hero .wrap { position: relative; z-index: 2; }
.ct-on { margin-top: 36px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); }
.ct-hero .ct-bullets { margin-top: 14px; }
.ct-times { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-d); display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--soft); max-width: 480px; }
.ct-times i { width: 8px; height: 8px; background: var(--ok); }

/* the booking "ticket": glass like the Services and Case Studies tiles, with a torn edge between its halves */
.ticket {
  position: relative; width: 100%; max-width: 580px; margin-left: auto;
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 55%, rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 106, 70, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 60px -18px rgba(255, 90, 60, .55), 0 40px 80px -40px rgba(0, 0, 0, .8);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.ticket::after { content: ''; position: absolute; top: -1px; right: -1px; width: 20px; height: 20px; background: var(--coral); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.ticket__top { padding: 26px 28px 22px; }
.ticket__who { display: flex; align-items: center; gap: 16px; }
.ticket__who img { width: 64px; height: 64px; object-fit: cover; --cut: 12px; clip-path: var(--facet-tr); }
.ticket__who div { flex: 1; display: grid; gap: 1px; }
.ticket__who small { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.ticket__who strong { font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }
.ticket__who span { font-size: 14px; color: var(--soft); }
.ticket__who .live { align-self: flex-start; margin: 4px 18px 0 0; }
.ticket__meta { margin-top: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ticket__meta > div { display: grid; justify-items: start; gap: 2px; padding: 12px; background: rgba(11, 15, 47, .45); border: 1px solid var(--line-d); }
.ticket__meta .jump__icon { width: 34px; height: 34px; margin-bottom: 8px; display: grid; place-items: center; background: linear-gradient(150deg, #1E2A5A, #0B0F2F 75%); border: 1px solid rgba(183, 191, 217, .2); }
.ticket__meta svg { width: 20px; height: 20px; overflow: visible; }
.ticket__meta .glow { filter: drop-shadow(0 0 4px rgba(255, 90, 60, .7)); }
.ticket__meta dt { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(183, 191, 217, .7); }
.ticket__meta dd { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
/* the tear line: a dashed rule with a triangle notch cut into each side */
.ticket__tear { position: relative; height: 0; margin: 0 28px; border-top: 1px dashed rgba(183, 191, 217, .35); }
.ticket__tear::before, .ticket__tear::after { content: ''; position: absolute; top: -9px; width: 12px; height: 18px; background: var(--navy); }
.ticket__tear::before { left: -29px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ticket__tear::after { right: -29px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.ticket__mid { padding: 20px 28px 4px; }
.ticket__k { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
/* live world clocks */
.clk { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.clk li { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border: 1px solid var(--line-d); background: rgba(255, 255, 255, .03); }
.clk__dial { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(183, 191, 217, .45); }
.clk__dial i { position: absolute; left: 50%; bottom: 50%; width: 2px; margin-left: -1px; transform-origin: 50% 100%; background: var(--white); }
.clk__dial .h { height: 8px; }
.clk__dial .m { height: 11px; background: var(--coral); }
.clk__txt { display: grid; min-width: 0; }
.clk__time { font-family: 'Clash Display', 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clk__time small { font-family: 'Plus Jakarta Sans', sans-serif; margin-left: 3px; font-size: 10px; font-weight: 800; color: var(--coral); }
.clk__txt > small { font-size: 11px; color: var(--soft); white-space: nowrap; }
.ticket__cta { padding: 22px 28px 26px; display: grid; justify-items: stretch; gap: 12px; text-align: center; }
.ticket__btn { width: 100%; }
.ticket__alt { font-size: 13px; font-weight: 700; color: var(--soft); text-decoration: none; transition: color .3s; }
.ticket__alt:hover { color: var(--white); }

/* the Calendly panel, over the page */
.calm { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; }
.calm[hidden] { display: none; }
.calm__shade { position: absolute; inset: 0; background: rgba(6, 9, 30, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.calm__panel {
  position: relative; width: min(1000px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column;
  background: var(--navy); border: 1px solid rgba(255, 106, 70, .5); box-shadow: 0 0 80px -20px rgba(255, 90, 60, .55), 0 60px 120px -40px rgba(0, 0, 0, .9);
  --cut: 24px; clip-path: var(--facet-tr);
}
.calm__head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; color: var(--white); border-bottom: 1px solid var(--line-d); }
.calm__head img { width: 44px; height: 44px; object-fit: cover; --cut: 9px; clip-path: var(--facet-tr); }
.calm__head div { flex: 1; display: grid; }
.calm__head strong { font-size: 18px; letter-spacing: -.01em; }
.calm__head span { font-size: 13.5px; color: var(--soft); }
.calm__x { position: relative; width: 40px; height: 40px; margin-right: 16px; border: 1px solid var(--line-d); background: none; cursor: pointer; }
.calm__x i { position: absolute; left: 11px; right: 11px; top: 19px; height: 2px; background: var(--white); transform: rotate(45deg); }
.calm__x i + i { transform: rotate(-45deg); }
.calm__x:hover { border-color: var(--coral); }
.calm__body { flex: 1; min-height: 0; background: #fff; }
.calm__frame { display: block; width: 100%; height: min(720px, calc(100vh - 140px)); border: 0; }
body.cal-open { overflow: hidden; }

/* ---------- 2 · Prefer email ---------- */
.ct-email__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: stretch; }
.ct-email__copy { display: flex; flex-direction: column; }
.ct-email .h2 { max-width: 14ch; }
.ct-mail {
  margin-top: auto; display: flex; align-items: center; gap: 18px; padding: 18px 22px; text-decoration: none; color: var(--white);
  background: var(--navy); --cut: 16px; clip-path: var(--facet-tr); transition: background-color .4s var(--ease);
}
.ct-email .lead { margin-bottom: 32px; text-wrap: balance; }
.ct-next__title .h-line { display: block; }
.section-head--center .ct-next__title { max-width: none; }
.ct-mail__ic { flex: none; width: 50px; height: 50px; display: grid; place-items: center; background: linear-gradient(150deg, #1E2A5A, #0B0F2F 75%); border: 1px solid rgba(183, 191, 217, .2); }
.ct-mail__ic svg { width: 26px; height: 26px; fill: var(--coral); }
.ct-mail small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.ct-mail b { display: block; margin-top: 2px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; letter-spacing: -.015em; }
.ct-mail__go { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(183, 191, 217, .3); color: var(--coral); font-weight: 800; transition: background-color .4s var(--ease), color .4s, border-color .4s; }
.ct-mail:hover { background: #121a45; }
.ct-mail:hover .ct-mail__go { background: var(--coral); border-color: var(--coral); color: var(--navy); }

.ct-send { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 38px); background: var(--white); border: 1px solid var(--line); box-shadow: 0 40px 80px -60px rgba(11, 15, 47, .4); }
.ct-send::before { content: ''; position: absolute; top: -1px; left: -1px; width: 18px; height: 18px; background: var(--coral); clip-path: polygon(0 0, 100% 0, 0 100%); }
.ct-send__k { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.ct-send__list { margin: 14px 0 22px; flex: 1; display: flex; flex-direction: column; }
.ct-send__list li { flex: 1 0 auto; display: flex; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ct-send__no { flex: none; font-family: 'Clash Display', 'Plus Jakarta Sans', sans-serif; font-size: 26px; font-weight: 600; line-height: 1; color: var(--coral-h); }
.ct-send__list p { font-size: clamp(17px, 1.4vw, 19px); font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.ct-send__foot { display: flex; gap: 12px; padding: 14px 18px; background: var(--bg); border-left: 3px solid var(--coral); font-size: 15px; font-weight: 600; }

/* ---------- 3 · What happens next ---------- */
.ct-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; }
.ct-steps li { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 36px); background: var(--bg); border: 1px solid var(--line); }
.ct-steps li:not(:last-child)::after { content: ''; position: absolute; top: 50%; right: -13px; z-index: 1; width: 10px; height: 14px; margin-top: -7px; background: var(--coral); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ct-steps__no { font-family: 'Clash Display', 'Plus Jakarta Sans', sans-serif; font-size: 40px; font-weight: 600; line-height: 1; color: var(--coral-h); }
.ct-steps h3 { margin-top: 22px; font-size: clamp(21px, 1.8vw, 25px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.ct-steps p { margin-top: 10px; font-size: 16.5px; line-height: 1.6; color: var(--grey); }
.ct-steps__last { background: var(--navy) !important; border-color: var(--navy) !important; color: var(--white); --cut: 24px; clip-path: var(--facet-tr); }
.ct-steps__last .ct-steps__no { color: var(--coral); }
.ct-steps__last p { color: var(--soft); }
.ct-steps__last::before { content: ''; position: absolute; top: 0; right: 0; width: 24px; height: 24px; background: var(--coral); clip-path: polygon(0 0, 100% 100%, 0 100%); }

/* ---------- 4 · Quick answers: four short answers, always open, in an even 2 × 2 grid ---------- */
.ct-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-qa__item { padding: clamp(22px, 2.6vw, 30px); background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--coral); }
.ct-qa__item h3 { font-size: clamp(18px, 1.5vw, 21px); font-weight: 800; letter-spacing: -.015em; line-height: 1.3; }
.ct-qa__item p { margin-top: 8px; font-size: 16.5px; line-height: 1.6; color: var(--grey); }
.ct-faq .section-cta p { max-width: none; }

/* ---------- Desktop ---------- */
@media (min-width: 901px) {
  .ct-hero { padding-bottom: 0; }
  .ct-hero .hero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; padding-top: clamp(112px, 13vh, 132px); }
  .ct-hero .hero__grid { align-items: center; }
}

/* ---------- Phone (≤900px) ---------- */
@media (max-width: 900px) {
  .ct-hero .hero__side { margin-top: 32px; }
  .ticket__top, .ticket__mid, .ticket__cta { padding-left: 18px; padding-right: 18px; }
  .ticket__tear { margin: 0 18px; }
  .ticket__tear::before { left: -19px; }
  .ticket__tear::after { right: -19px; }
  .ticket__who .live { display: none; }
  .ticket__who strong { font-size: 19px; }
  .ticket__meta, .clk { grid-template-columns: 1fr 1fr; }
  .calm { padding: 0; }
  .calm__panel { max-height: 100vh; height: 100%; }
  .calm__frame { height: calc(100vh - 78px); }
  .ct-email__grid, .ct-steps, .ct-qa { grid-template-columns: minmax(0, 1fr); }
  .ct-mail { margin-top: 0; }
  .ct-mail { gap: 14px; padding: 16px; }
  .ct-mail b { font-size: 16.5px; overflow-wrap: anywhere; }
  .ct-mail__ic { width: 42px; height: 42px; }
  .ct-steps li:not(:last-child)::after { top: auto; bottom: -13px; right: 50%; margin: 0 -7px 0 0; transform: rotate(90deg); }
}