/* =========================================================
   OTONO TSUSHIN — Inquiry Form
   ========================================================= */

.contact-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: clamp(60px, 10vh, 120px);
}
@media (max-width: 880px) { .contact-channels { grid-template-columns: 1fr; } }
.contact-channel {
  background: rgba(4,7,13,0.7);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  transition: background .4s;
}
.contact-channel:hover { background: rgba(122,219,255,.04); }
.contact-channel__label {
  font-family: var(--font-en);
  font-size: 10px; letter-spacing: .3em;
  color: var(--cyan);
  text-transform: uppercase;
}
.contact-channel__value {
  font-family: var(--font-min);
  font-size: clamp(18px, 1.9vw, 24px);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .04em;
  word-break: break-all;
  transition: color .3s;
}
.contact-channel__value:hover { color: var(--cyan); }
.contact-channel__note {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-mute);
}

/* ============== Form ============== */
.cform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 720px) { .cform { grid-template-columns: 1fr; gap: 28px; } }
.cform__field { display: flex; flex-direction: column; gap: 12px; }
.cform__field--full { grid-column: 1 / -1; }

.cform__label,
.cform legend {
  font-family: var(--font-en);
  font-size: 10.5px;
  letter-spacing: .3em;
  color: var(--cyan);
  text-transform: uppercase;
  padding: 0;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.cform__label em { color: var(--cyan); font-style: normal; font-weight: 500; }
.cform legend em { color: var(--cyan); font-style: normal; font-weight: 500; }

.cform__input {
  font-family: var(--font-jp);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 14px 4px 14px;
  letter-spacing: .04em;
  transition: border-color .35s var(--ease-out), background .35s;
  outline: none;
  width: 100%;
}
.cform__input::placeholder { color: var(--ink-mute); letter-spacing: .04em; }
.cform__input:focus {
  border-bottom-color: var(--cyan);
  background: linear-gradient(180deg, transparent 0%, rgba(122,219,255,.04) 100%);
}
.cform__input--area {
  border: 1px solid var(--line);
  padding: 18px 18px;
  resize: vertical;
  min-height: 200px;
}
.cform__input--area:focus { border-color: var(--cyan); }

.cform__hint {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: .08em;
  margin-top: -4px;
}

/* radios as chips */
.cform__radios {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.cform__radios label {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  font-family: var(--font-jp);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .3s, color .3s, background .3s, transform .3s;
}
.cform__radios input { position: absolute; opacity: 0; pointer-events: none; }
.cform__radios label::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--ink-mute);
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.cform__radios label:hover { color: var(--ink); border-color: var(--cyan); }
.cform__radios label:hover::before { border-color: var(--cyan); }
.cform__radios input:checked + span,
.cform__radios input:checked ~ * { color: var(--ink); }
.cform__radios label:has(input:checked) {
  color: var(--ink);
  border-color: var(--cyan);
  background: rgba(122,219,255,.05);
}
.cform__radios label:has(input:checked)::before {
  border-color: var(--cyan);
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
}

/* checkbox */
.cform__check {
  display: inline-flex; align-items: center; gap: 14px;
  cursor: pointer;
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  position: relative;
  padding: 8px 0;
}
.cform__check input { position: absolute; opacity: 0; pointer-events: none; }
.cform__check-box {
  width: 20px; height: 20px;
  border: 1px solid var(--ink-mute);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .3s, background .3s;
  position: relative;
  flex-shrink: 0;
}
.cform__check-box::after {
  content: "";
  width: 5px; height: 10px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg) scale(0);
  transition: transform .3s var(--ease-out);
}
.cform__check input:checked + .cform__check-box {
  border-color: var(--cyan);
  background: var(--cyan);
}
.cform__check input:checked + .cform__check-box::after { transform: translateY(-1px) rotate(45deg) scale(1); }
.cform__check-text a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; transition: color .3s; }
.cform__check-text a:hover { color: var(--accent); }
.cform__check-text em { color: var(--cyan); font-style: normal; }

/* submit */
.cform__submit {
  grid-column: 1 / -1;
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin-top: 12px;
}
.cform__btn {
  display: inline-flex; align-items: center; gap: 28px;
  padding: 24px 48px;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: color .5s var(--ease-out);
  cursor: pointer;
}
.cform__btn::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, var(--cyan-deep), var(--cyan) 70%);
  transform: scaleX(0); transform-origin: center;
  transition: transform .7s var(--ease-out);
  z-index: 0;
}
.cform__btn:hover { color: var(--bg); }
.cform__btn:hover::before { transform: scaleX(1); }
.cform__btn-text {
  position: relative; z-index: 1;
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.cform__btn-text em {
  font-family: var(--font-en);
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: .3em;
  font-weight: 400;
  font-style: normal;
}
.cform__btn-text i {
  font-family: var(--font-jp);
  font-size: 11px; letter-spacing: .2em;
  font-style: normal;
  color: var(--ink-soft);
  transition: color .3s;
}
.cform__btn:hover .cform__btn-text i { color: rgba(4,7,13,.7); }
.cform__btn-arrow {
  position: relative; z-index: 1;
  display: inline-flex;
  color: currentColor;
}
.cform__submit-note {
  font-size: 11.5px;
  color: var(--ink-mute);
  letter-spacing: .08em;
  margin: 0;
  line-height: 1.7;
}

/* success state */
.cform__success {
  grid-column: 1 / -1;
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 80px 24px;
  border: 1px solid var(--cyan);
  background: linear-gradient(180deg, rgba(122,219,255,.06), transparent);
  position: relative;
  overflow: hidden;
}
.cform__success.is-shown { display: flex; }
.cform__success::before,
.cform__success::after {
  content: ""; position: absolute;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(122,219,255,.12), transparent 70%);
  pointer-events: none;
}
.cform__success::before { top: -30%; left: -20%; }
.cform__success::after { bottom: -30%; right: -20%; }
.cform__success-mark svg { display: block; margin: 0 auto; }
.cform__success h3 {
  font-family: var(--font-min);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 500;
  letter-spacing: .04em;
  margin: 0;
  color: var(--ink);
  position: relative; z-index: 1;
}
.cform__success p {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-soft);
  margin: 0;
  position: relative; z-index: 1;
}

/* small screen */
@media (max-width: 720px) {
  .contact-channel { padding: 24px 22px; }
  .cform__input--area { padding: 14px 14px; min-height: 160px; }
  .cform__btn { padding: 18px 32px; gap: 18px; }
  .cform__radios label { padding: 8px 14px; font-size: 12.5px; }
}

@media (max-width: 480px) {
  .contact-channels { margin-bottom: 60px; }
  .contact-channel { padding: 20px 18px; gap: 10px; }
  .contact-channel__label { font-size: 9px; letter-spacing: .25em; }
  .contact-channel__value { font-size: 15px; letter-spacing: .04em; }
  .contact-channel__note { font-size: 11px; padding-top: 10px; }

  .cform { gap: 22px; }
  .cform__field { gap: 8px; }
  .cform__label, .cform legend { font-size: 9.5px; letter-spacing: .25em; }
  .cform__input { font-size: 14px; padding: 12px 4px 12px; }
  .cform__input--area { padding: 12px 14px; min-height: 140px; font-size: 13.5px; }
  .cform__radios { gap: 8px; }
  .cform__radios label { padding: 7px 12px; font-size: 11.5px; letter-spacing: .03em; gap: 6px; }
  .cform__radios label::before { width: 6px; height: 6px; }
  .cform__check { gap: 10px; font-size: 12.5px; }
  .cform__check-box { width: 18px; height: 18px; }
  .cform__hint { font-size: 10.5px; }
  .cform__btn { padding: 14px 24px; gap: 14px; width: 100%; max-width: 320px; justify-content: space-between; border-radius: 999px; }
  .cform__btn-text em { font-size: 16px; letter-spacing: .2em; }
  .cform__btn-text i { font-size: 9.5px; letter-spacing: .12em; }
  .cform__btn-arrow svg { width: 26px; height: 26px; }
  .cform__submit-note { font-size: 10.5px; letter-spacing: .04em; }
  .cform__success { padding: 56px 18px; gap: 12px; }
  .cform__success h3 { font-size: 20px; }
  .cform__success p { font-size: 12px; }
}