/* =========================================================================
   MAKTONIC — Contact page
   Loaded after main.css, which supplies the tokens, nav, footer and buttons.
   Everything here is scoped to sections that only exist on this page.
   ========================================================================= */

/* ================================================================== HERO */
.ctc-hero{position:relative;overflow:hidden}
.ctc-hero_container{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s-64);
  align-items:center;
  padding-top:var(--s-140);padding-bottom:var(--s-90);
}
.ctc-hero_content{display:flex;flex-direction:column;gap:var(--s-24);max-width:38rem}
.ctc-hero_content h1{margin:0;font-size:3.5rem;line-height:var(--lh-110);letter-spacing:-.035em}
.ctc-hero_content .text--l{margin:0;color:var(--gray-600);max-width:34rem}

.ctc-hero_routes{display:flex;flex-wrap:wrap;gap:var(--s-12);margin-top:var(--s-8)}
.ctc-route{
  display:flex;align-items:center;gap:var(--s-12);
  padding:var(--s-12) var(--s-18) var(--s-12) var(--s-12);
  border-radius:var(--btn-radius);
  background-color:var(--white);border:1px solid var(--gray-100);
  text-decoration:none;color:inherit;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.ctc-route:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(21,23,26,.08);border-color:var(--gray-200)}
.ctc-route_ico{
  width:2.25rem;height:2.25rem;flex:none;border-radius:50%;
  background-color:var(--green-50);color:var(--green-500);
  display:grid;place-items:center;
}
.ctc-route_ico svg{width:1.125rem;height:1.125rem}
.ctc-route_txt{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.ctc-route_txt b{font-size:.9375rem;font-weight:500;letter-spacing:var(--ls-3)}
.ctc-route_txt i{font-style:normal;font-size:.8125rem;color:var(--gray-500);letter-spacing:var(--ls-2)}

/* ------------------------------------------------ the self-playing chat */
.ctc-hero_visual{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
}
/* radiating guides + rings behind the panel */
.ctc-hero_bg{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0}
.ctc-hero_line{position:absolute;width:0;height:220vh;border-right:1px solid var(--gray-100)}
.ctc-hero_line.l2{transform:rotate(72deg)}
.ctc-hero_line.l3{transform:rotate(144deg)}
.ctc-hero_line.l4{transform:rotate(216deg)}
.ctc-hero_line.l5{transform:rotate(288deg)}
.ctc-hero_ring{position:absolute;aspect-ratio:1;border:1px solid var(--gray-100);border-radius:50%}
.ctc-hero_ring.r1{width:30rem}
.ctc-hero_ring.r2{width:52rem}

.ctc-chat{
  position:relative;z-index:1;width:100%;max-width:27rem;
  display:flex;flex-direction:column;
  border-radius:1.25rem;overflow:hidden;
  background-color:var(--white);border:1px solid var(--gray-100);
  box-shadow:0 24px 60px rgba(21,23,26,.10);
}
.ctc-chat_bar{
  display:flex;align-items:center;gap:var(--s-12);
  padding:var(--s-16) var(--s-20);
  border-bottom:1px solid var(--gray-100);
}
.ctc-chat_avatar{
  width:2.125rem;height:2.125rem;flex:none;border-radius:50%;
  background-color:var(--green-500);display:grid;place-items:center;
}
.ctc-chat_avatar img{width:1.125rem;height:1.125rem;display:block}
.ctc-chat_who{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}
.ctc-chat_who b{font-size:.9375rem;font-weight:500;letter-spacing:var(--ls-3)}
.ctc-chat_who i{font-style:normal;font-size:.75rem;color:var(--green-500);letter-spacing:var(--ls-1)}
.ctc-chat_pip{
  width:.5rem;height:.5rem;flex:none;border-radius:50%;
  background-color:var(--green-500);box-shadow:0 0 0 4px rgba(8,144,108,.16);
}

/* A fixed height so the card never resizes as messages arrive. Content grows
   from the bottom, so the overflow has to be clipped or the oldest message
   escapes over the header bar. */
.ctc-chat_body{
  display:flex;flex-direction:column;gap:var(--s-12);justify-content:flex-end;
  height:19rem;padding:var(--s-20);overflow:hidden;
}
.ctc-msg{display:flex}
.ctc-msg.is--in{justify-content:flex-start}
.ctc-msg.is--out{justify-content:flex-end}
.ctc-msg_bubble{
  position:relative;max-width:82%;
  padding:var(--s-12) var(--s-16);
  font-size:.875rem;line-height:var(--lh-140);letter-spacing:var(--ls-2);
}
.ctc-msg.is--in .ctc-msg_bubble{
  background-color:var(--gray-50);color:var(--gray-800);
  border-radius:1rem 1rem 1rem .25rem;
}
.ctc-msg.is--out .ctc-msg_bubble{
  background-color:var(--green-500);color:var(--white);
  border-radius:1rem 1rem .25rem 1rem;
}
/* the typing dots and the answer occupy the same box, so the swap is a
   cross-fade rather than a jump in the card's height */
.ctc-typing{position:absolute;inset:0;display:grid;place-items:center;gap:.22rem;grid-auto-flow:column}
.ctc-typing i{
  width:.3rem;height:.3rem;border-radius:50%;background-color:currentColor;
  animation:ctc-dot 1.05s ease-in-out infinite;
}
.ctc-typing i:nth-child(2){animation-delay:.16s}
.ctc-typing i:nth-child(3){animation-delay:.32s}
@keyframes ctc-dot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}

.ctc-chat_foot{
  display:flex;align-items:center;gap:var(--s-12);
  padding:var(--s-14) var(--s-16);
  border-top:1px solid var(--gray-100);background-color:var(--gray-50);
}
.ctc-chat_field{
  flex:1;min-width:0;min-height:1.25rem;
  font-size:.875rem;letter-spacing:var(--ls-2);color:var(--gray-700);
  white-space:nowrap;overflow:hidden;
}
.ctc-caret{
  display:inline-block;width:1px;height:.9rem;vertical-align:-.1rem;
  background-color:var(--green-500);
  animation:ctc-blink 1.06s steps(1) infinite;
}
@keyframes ctc-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.ctc-chat_send{
  width:2rem;height:2rem;flex:none;border-radius:50%;
  background-color:var(--coral-500);color:var(--white);
  display:grid;place-items:center;
}
.ctc-chat_send svg{width:1rem;height:1rem;margin-left:-1px}

/* ==================================================== CONTACT / THE FORM */
.ctc-main{padding-top:var(--s-100);padding-bottom:var(--s-120)}
.ctc-main_grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:var(--s-80);align-items:start;
}

/* --------------------------------------------------- the company details */
.ctc-details{display:flex;flex-direction:column;gap:var(--s-20)}
.ctc-details h2{margin:0;max-width:16ch}
.ctc-details_lead{margin:0;color:var(--gray-600);font-size:var(--f-text-l);line-height:var(--lh-140);max-width:32rem}

.ctc-facts{margin:var(--s-20) 0 0;display:flex;flex-direction:column}
.ctc-fact{
  display:flex;flex-direction:column;gap:var(--s-8);
  padding:var(--s-20) 0;border-top:1px solid var(--gray-100);
}
.ctc-fact:last-child{border-bottom:1px solid var(--gray-100)}
.ctc-fact dt{
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray-500);
}
.ctc-fact dd{
  margin:0;display:flex;flex-direction:column;gap:var(--s-6);
  font-size:1.0625rem;letter-spacing:var(--ls-3);color:var(--black);
}
.ctc-fact dd a{color:inherit;text-decoration:none;width:fit-content;transition:color .25s}
.ctc-fact dd a:hover{color:var(--coral-500)}

.ctc-promise{
  display:flex;align-items:flex-start;gap:var(--s-12);margin-top:var(--s-8);
  padding:var(--s-16) var(--s-20);border-radius:.875rem;
  background-color:var(--green-50);
  font-size:.875rem;line-height:var(--lh-140);letter-spacing:var(--ls-2);color:var(--green-900);
}
.ctc-promise_ico{width:1.25rem;height:1.25rem;flex:none;color:var(--green-500);margin-top:.05rem}
.ctc-promise_ico svg{width:100%;height:100%}

/* ------------------------------------------------------------- the form */
.ctc-form_wrap{position:relative}
.ctc-form,.ctc-sent{
  display:flex;flex-direction:column;gap:var(--s-20);
  padding:var(--s-40);border-radius:1.25rem;
  background-color:var(--gray-50);border:1px solid var(--gray-100);
}
/* display:flex above outranks the [hidden] attribute on its own */
.ctc-form[hidden],.ctc-sent[hidden]{display:none}
.ctc-form_row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-20)}
.ctc-field{display:flex;flex-direction:column;gap:var(--s-8);min-width:0}
.ctc-field label{font-size:.875rem;font-weight:500;letter-spacing:var(--ls-2);color:var(--black)}
.ctc-field input,
.ctc-field textarea{
  width:100%;font-family:inherit;font-size:.9375rem;letter-spacing:var(--ls-2);
  color:var(--black);background-color:var(--white);
  padding:var(--s-14) var(--s-16);
  border:1px solid var(--gray-100);border-radius:.625rem;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.ctc-field textarea{resize:vertical;min-height:8.5rem;line-height:var(--lh-140)}
.ctc-field input::placeholder,
.ctc-field textarea::placeholder{color:var(--gray-400)}
.ctc-field input:focus,
.ctc-field textarea:focus{
  outline:none;border-color:var(--green-400);
  box-shadow:0 0 0 3px rgba(8,144,108,.14);
}
/* a field only turns red once it has actually been submitted wrong */
.ctc-field.is--bad input,
.ctc-field.is--bad textarea{border-color:var(--coral-400);box-shadow:0 0 0 3px rgba(206,60,43,.12)}
.ctc-error{
  font-size:.75rem;letter-spacing:var(--ls-1);color:var(--coral-500);
  min-height:0;opacity:0;transform:translateY(-2px);
  transition:opacity .2s,transform .2s;
}
.ctc-field.is--bad .ctc-error{opacity:1;transform:translateY(0)}

.ctc-submit{width:100%;justify-content:center;margin-top:var(--s-4)}
.ctc-form_note{
  margin:0;font-size:.75rem;line-height:var(--lh-140);letter-spacing:var(--ls-1);
  color:var(--gray-500);text-align:center;
}

/* ------------------------------------------------------ the sent state */
.ctc-sent{align-items:center;text-align:center;gap:var(--s-16);padding-block:var(--s-64)}
.ctc-sent_mark{
  width:3.5rem;height:3.5rem;border-radius:50%;
  background-color:var(--green-500);color:var(--white);
  display:grid;place-items:center;
}
.ctc-sent_mark svg{width:1.75rem;height:1.75rem}
.ctc-sent h3{margin:0}
.ctc-sent p{margin:0;color:var(--gray-600);line-height:var(--lh-140);max-width:26rem}

/* ============================================================= RESPONSIVE */
@media (max-width:991px){
  .ctc-hero_container{
    grid-template-columns:1fr;gap:var(--s-48);
    padding-top:var(--s-120);padding-bottom:var(--s-80);
  }
  .ctc-hero_content{max-width:none}
  .ctc-hero_content h1{font-size:3rem}
  .ctc-chat{max-width:30rem}
  .ctc-hero_ring.r2{width:44rem}

  .ctc-main{padding-top:var(--s-80);padding-bottom:var(--s-90)}
  .ctc-main_grid{grid-template-columns:1fr;gap:var(--s-48)}
  .ctc-details h2{max-width:none}
}
@media (max-width:767px){
  .ctc-hero_container{padding-top:var(--s-105)}
  .ctc-hero_content h1{font-size:2.375rem}
  .ctc-hero_routes{flex-direction:column;align-items:stretch}
  .ctc-route{border-radius:.875rem}
  .ctc-chat_body{height:16.5rem}
  .ctc-msg_bubble{max-width:88%}

  .ctc-form,.ctc-sent{padding:var(--s-24)}
  .ctc-form_row{grid-template-columns:1fr}
  .ctc-sent{padding-block:var(--s-48)}
}
@media (max-width:479px){
  .ctc-hero_content h1{font-size:2.125rem}
  .ctc-fact dd{font-size:1rem}
}

/* Anyone who asked for less motion gets the finished conversation, not the
   typing that led to it. */
@media (prefers-reduced-motion: reduce){
  .ctc-typing,.ctc-caret{display:none}
}