/* contact-v2 — trial/contact page layout in new AICAD system */

body.ll-shell[data-page="contact"]{
  background:var(--ll-bg);
}

/* compact editorial intro */
.ct-hero{
  padding:clamp(5.5rem,10vw,7rem) var(--ll-gutter) clamp(1.75rem,3vw,2.5rem);
  background:var(--ll-bg);
}
.ct-hero__inner{
  width:min(var(--ll-max),100%);
  margin:0 auto;
}
.ct-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.45rem;
  margin:0 0 1.35rem;
  font-size:0.86rem;
  color:var(--ll-muted);
}
.ct-breadcrumb a{
  color:var(--ll-muted);
  transition:color 0.2s var(--ll-ease);
}
.ct-breadcrumb a:hover{color:var(--ll-ink)}
.ct-breadcrumb__sep{opacity:0.45}
.ct-breadcrumb [aria-current="page"]{color:var(--ll-ink)}

.ct-hero__eyebrow{
  margin:0 0 0.75rem;
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.14em;
  color:rgba(15,16,18,0.42);
}
.ct-hero h1{
  margin:0;
  font-size:clamp(1.85rem,3.6vw,2.65rem);
  font-weight:460;
  letter-spacing:-0.03em;
  line-height:1.15;
  color:var(--ll-ink);
  max-width:16em;
}
.ct-hero__lead{
  margin:0.9rem 0 0;
  max-width:36ch;
  font-size:clamp(1rem,1.2vw,1.08rem);
  line-height:1.65;
  color:var(--ll-muted);
}

/* work area: form + product index */
.ct-work{
  padding:0 var(--ll-gutter) clamp(4rem,8vw,6rem);
}
.ct-work__inner{
  width:min(var(--ll-max),100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,0.78fr);
  gap:clamp(2rem,4vw,3.5rem);
  align-items:start;
}

/* form panel — clear boundary, radius ≤ 8px, no nested cards */
.ct-form{
  background:var(--ll-white);
  border:1px solid var(--ll-line);
  border-radius:8px;
  padding:clamp(1.5rem,3vw,2.15rem);
}
.ct-form__title{
  margin:0 0 1.35rem;
  font-size:1.05rem;
  font-weight:540;
  letter-spacing:-0.01em;
  color:var(--ll-ink);
}
.ct-form form{margin:0}
.ct-grid{
  display:grid;
  gap:1.1rem;
}
.ct-grid--2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem;
}
.ct-field{min-width:0}
.ct-field label{
  display:block;
  margin:0 0 0.4rem;
  font-size:0.88rem;
  font-weight:500;
  color:rgba(15,16,18,0.72);
}
/* Keep invalid fields clear of fixed nav on native/focus scroll */
.ct-field,
.ct-field input,
.ct-field select,
.ct-field textarea{
  scroll-margin-top:clamp(5.5rem, 12vw, 6.75rem);
}
.ct-field input,
.ct-field select,
.ct-field textarea{
  width:100%;
  margin:0;
  padding:0.72rem 0.85rem;
  font:inherit;
  font-size:0.98rem;
  color:var(--ll-ink);
  background:#fff;
  border:1px solid rgba(15,16,18,0.14);
  border-radius:6px;
  outline:none;
  transition:border-color 0.2s var(--ll-ease), box-shadow 0.2s var(--ll-ease);
  appearance:none;
  -webkit-appearance:none;
}
.ct-field select{
  background-image:linear-gradient(45deg,transparent 50%,rgba(15,16,18,0.45) 50%),
    linear-gradient(135deg,rgba(15,16,18,0.45) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:2rem;
}
.ct-field textarea{
  resize:vertical;
  min-height:6.5rem;
  line-height:1.5;
}
/* Focus — always AICAD blue (wins over idle/error while focused) */
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus{
  border-color:rgba(0,113,227,0.55);
  box-shadow:0 0 0 3px rgba(0,113,227,0.12);
}
/*
 * Error state — NEVER style bare :invalid (empty required would go red on load).
 * Show only after real user interaction (:user-invalid) or stable JS class.
 */
.ct-field input:user-invalid:not(:focus),
.ct-field select:user-invalid:not(:focus),
.ct-field textarea:user-invalid:not(:focus),
.ct-field input.is-invalid:not(:focus),
.ct-field select.is-invalid:not(:focus),
.ct-field textarea.is-invalid:not(:focus){
  border-color:rgba(180,40,40,0.55);
  box-shadow:0 0 0 1px rgba(180,40,40,0.28);
}
.ct-field input:user-invalid:focus,
.ct-field select:user-invalid:focus,
.ct-field textarea:user-invalid:focus,
.ct-field input.is-invalid:focus,
.ct-field select.is-invalid:focus,
.ct-field textarea.is-invalid:focus{
  border-color:rgba(0,113,227,0.55);
  box-shadow:0 0 0 3px rgba(0,113,227,0.12);
}
/* Accessible error text (not color-only) */
.ct-field__error{
  display:none;
  margin:0.35rem 0 0;
  font-size:0.82rem;
  line-height:1.4;
  color:rgba(140,30,30,0.95);
}
.ct-field__error.is-visible{display:block}

/* Contact methods: phone|email + wechat|whatsapp; one shared error */
.ct-contact-methods{
  display:grid;
  gap:1.1rem;
  min-width:0;
  scroll-margin-top:clamp(5.5rem, 12vw, 6.75rem);
}
.ct-contact-methods > .ct-grid--2{
  gap:1.1rem;
}
.ct-field__hint{
  margin:0.4rem 0 0;
  font-size:0.78rem;
  line-height:1.45;
  color:var(--ll-muted);
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.ct-contact-error{
  margin:-0.35rem 0 0;
  font-size:0.82rem;
  line-height:1.45;
  color:rgba(140,30,30,0.95);
  white-space:pre-line;
  overflow-wrap:anywhere;
  word-break:break-word;
  scroll-margin-top:clamp(5.5rem, 12vw, 6.75rem);
}
.ct-contact-error[hidden]{
  display:none !important;
}

.ct-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:48px;
  margin-top:0.25rem;
  padding:0 1.25rem;
  border:0;
  border-radius:999px;
  background:var(--ll-blue);
  color:#fff;
  font:inherit;
  font-size:0.98rem;
  font-weight:540;
  cursor:pointer;
  transition:background 0.2s var(--ll-ease);
}
.ct-submit:hover{background:#0060c0}
.ct-submit:focus-visible{
  outline:2px solid var(--ll-blue);
  outline-offset:3px;
}

/* message feedback — works with contact-page.js .is-visible */
.ct-form .form-msg,
.ct-form [data-form-message]{
  display:none;
  margin-top:0.35rem;
  padding:0.75rem 0.9rem;
  border-radius:6px;
  border:1px solid rgba(0,113,227,0.2);
  background:rgba(0,113,227,0.06);
  color:var(--ll-ink);
  font-size:0.92rem;
  line-height:1.5;
}
.ct-form .form-msg.is-visible,
.ct-form [data-form-message].is-visible{
  display:block;
}
.ct-hint{
  margin:0.15rem 0 0;
  font-size:0.86rem;
  line-height:1.5;
  color:var(--ll-muted);
}
.ct-consent{
  display:flex;
  align-items:flex-start;
  gap:0.65rem;
  color:var(--ll-muted);
  font-size:0.86rem;
  line-height:1.55;
  cursor:pointer;
}
.ct-consent input{
  flex:0 0 auto;
  width:1rem;
  height:1rem;
  margin-top:0.18rem;
  accent-color:var(--ll-blue);
}
.ct-honeypot{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
}
.ct-submit:disabled{
  cursor:wait;
  opacity:0.62;
}
/* After demo submit: one primary feedback only — hide static hint to avoid duplication */
.ct-form.is-demo-sent .ct-hint{
  display:none;
}
.ct-form.is-demo-sent .form-msg.is-visible,
.ct-form.is-demo-sent [data-form-message].is-visible{
  border-color:rgba(15,16,18,0.12);
  background:rgba(15,16,18,0.04);
}

/* numbered product index — no cards, no logo tiles */
.ct-aside{
  padding:0.35rem 0 0;
  min-width:0;
}
.ct-aside__label{
  margin:0 0 0.85rem;
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.12em;
  color:rgba(15,16,18,0.4);
}
.ct-index{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--ll-line);
}
.ct-index__item{
  border-bottom:1px solid var(--ll-line);
}
.ct-index__item a{
  display:grid;
  grid-template-columns:2.6rem minmax(0,1fr) auto;
  gap:0.65rem 0.85rem;
  align-items:center;
  padding:1.05rem 0.15rem;
  min-height:3.25rem;
  transition:opacity 0.2s var(--ll-ease);
}
.ct-index__item a:hover{opacity:0.72}
.ct-index__num{
  font-size:0.82rem;
  font-weight:520;
  letter-spacing:0.1em;
  color:var(--ll-blue);
}
.ct-index__name{
  font-size:1.02rem;
  font-weight:520;
  letter-spacing:-0.015em;
  color:var(--ll-ink);
  line-height:1.3;
}
.ct-index__go{
  font-size:0.9rem;
  color:rgba(15,16,18,0.35);
}
.ct-index__more a .ct-index__name{
  font-weight:500;
  color:rgba(15,16,18,0.72);
}
.ct-aside__note{
  margin:1.15rem 0 0;
  font-size:0.9rem;
  line-height:1.55;
  color:var(--ll-muted);
  max-width:28ch;
}

@media (max-width:1023px){
  .ct-work__inner{
    grid-template-columns:1fr;
    gap:2.25rem;
  }
  .ct-aside{order:1}
  .ct-form{order:0}
}

@media (max-width:640px){
  .ct-hero{
    padding:clamp(5rem,14vw,5.75rem) var(--ll-gutter) 1.5rem;
  }
  .ct-hero h1{max-width:none}
  .ct-hero__lead{max-width:none}
  .ct-grid--2{grid-template-columns:1fr}
  .ct-form{
    padding:1.25rem 1.1rem 1.4rem;
  }
  .ct-field label{font-size:0.9rem}
  .ct-field input,
  .ct-field select,
  .ct-field textarea{
    font-size:1rem;
    padding:0.8rem 0.9rem;
  }
  .ct-index__item a{
    grid-template-columns:2.4rem minmax(0,1fr) auto;
    padding:1rem 0;
  }
  .ct-index__name{font-size:1rem}
}