/* ==========================================================================
   CrossPiece — contact.html page styles
   Values carried over verbatim from the retired inline styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   contact hero (page title)
   -------------------------------------------------------------------------- */
.cp-contact-hero { background: #F3F5FC; }
.cp-contact-hero__rail { display: flex; justify-content: flex-end; align-items: flex-start; padding: clamp(172px,21vh,210px) clamp(14px,min(1.8vw, 25.92px),26px) 48px 12px; }
.cp-contact-hero__body { min-width: 0; max-width: 1120px; padding: clamp(160px,19vh,200px) clamp(24px,min(5vw, 72px),88px) clamp(56px,min(7vw, 100.8px),88px) clamp(28px,min(4.5vw, 64.8px),68px); }
.cp-contact-hero__eyebrow-row { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(24px,min(3vw, 43.2px),36px); }
.cp-contact-hero__eyebrow { font: 700 12px/1 'Urbanist',sans-serif; letter-spacing: .26em; color: #BE2E96; }
.cp-contact-hero__bar { height: 1px; width: 48px; background: #cfd6e2; }
.cp-contact-hero__sub { font: 600 11px/1 'Urbanist',sans-serif; letter-spacing: .2em; color: #9aa0a6; }
.cp-contact-hero__title { font-family: 'Noto Sans JP',sans-serif; font-weight: 600; font-size: clamp(28px,min(4.6vw, 66.24px),56px); line-height: 1.4; letter-spacing: .01em; color: #1B2B4D; margin: 0 0 clamp(22px,min(3vw, 43.2px),32px); }
.cp-contact-hero__lead { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: clamp(14.5px,min(1.3vw, 18.72px),16px); line-height: 2.05; letter-spacing: .02em; color: #3a3f45; max-width: 620px; margin: 0 0 clamp(32px,min(4.5vw, 64.8px),48px); }
.cp-contact-hero__meta { position: relative; border-top: 1px solid #cfd6e2; margin-left: calc(clamp(28px,min(4.5vw, 64.8px),68px) * -1); padding: clamp(20px,min(2.4vw, 34.56px),30px) 0 0 clamp(28px,min(4.5vw, 64.8px),68px); }
.cp-contact-hero__meta-list { display: flex; align-items: center; gap: clamp(20px,min(4vw, 57.6px),56px); flex-wrap: wrap; }
.cp-contact-hero__meta-item { display: flex; flex-direction: column; gap: 6px; }
.cp-contact-hero__meta-v { font: 700 13px/1 'Urbanist',sans-serif; letter-spacing: .04em; color: #1C1F26; }
.cp-contact-hero__meta-k { font: 600 10px/1 'Urbanist',sans-serif; letter-spacing: .16em; color: #9aa0a6; }

/* --------------------------------------------------------------------------
   form section
   -------------------------------------------------------------------------- */
.cp-contact-form { background: #fff; border-top: 1px solid #cfd6e2; }
.cp-contact-form__rail { padding: clamp(76px,min(10vw, 144px),132px) clamp(14px,min(1.8vw, 25.92px),26px) 48px 12px; }
.cp-contact-form__body { min-width: 0; max-width: 1120px; padding: clamp(72px,min(10vw, 144px),128px) clamp(24px,min(5vw, 72px),88px) clamp(88px,min(12vw, 172.8px),160px) clamp(28px,min(4.5vw, 64.8px),68px); }
.cp-contact-form__container { max-width: 720px; }
.cp-contact-form__form { display: grid; gap: clamp(22px,min(3vw, 43.2px),30px); }
.cp-contact-form__label { display: block; font: 600 11px/1 'Urbanist',sans-serif; letter-spacing: .14em; color: #9aa0a6; margin-bottom: 12px; }
.cp-contact-form__req { color: #BE2E96; }
.cp-contact-form__input { width: 100%; height: 48px; padding: 0 2px; border: none; border-bottom: 1px solid #cfd6e2; background: transparent; font: 400 16px 'Noto Sans JP',sans-serif; color: #1C1F26; outline: none; transition: border-color .25s cubic-bezier(.22,.61,.36,1); }
.cp-contact-form__input:focus { border-bottom-color: #243A66; }
.cp-contact-form__grid-2 { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: clamp(22px,min(3vw, 43.2px),30px); }
.cp-contact-form__topics { display: flex; flex-wrap: wrap; gap: 10px; }
.cp-contact-form__topic { display: inline-flex; align-items: center; gap: 8px; font-family: 'Noto Sans JP',sans-serif; font-size: 13px; color: #1C1F26; border: 1px solid #cfd6e2; border-radius: 999px; padding: 9px 15px; cursor: pointer; transition: border-color .2s; }
.cp-contact-form__topic:hover { border-color: #243A66; }
.cp-contact-form__topic-check { accent-color: #BE2E96; width: 15px; height: 15px; }
.cp-contact-form__textarea { width: 100%; padding: 12px 2px; border: none; border-bottom: 1px solid #cfd6e2; background: transparent; font: 400 16px/1.8 'Noto Sans JP',sans-serif; color: #1C1F26; outline: none; resize: vertical; transition: border-color .25s cubic-bezier(.22,.61,.36,1); }
.cp-contact-form__textarea:focus { border-bottom-color: #243A66; }
.cp-contact-form__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cp-contact-form__error { display: none; font-family: 'Noto Sans JP',sans-serif; font-size: 13px; line-height: 1.8; color: #BE2E96; }
.cp-contact-form__submit-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.cp-contact-form__submit { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 27px 0 24px; border: none; border-radius: 999px; background: #BE2E96; color: #fff; font: 600 15px/1 'Noto Sans JP',sans-serif; }
.cp-contact-form__note { font-family: 'Noto Sans JP',sans-serif; font-size: 11.5px; line-height: 1.6; color: #9aa0a6; }
.cp-contact-form__note-link { color: #6B7178; text-decoration: underline; transition: color .2s; }
.cp-contact-form__note-link:hover { color: #1C1F26; }

/* --------------------------------------------------------------------------
   submitted panel — shown after a successful send (JS toggles is-submitted
   on the container; the form swaps out, mirroring the old runtime states)
   -------------------------------------------------------------------------- */
.cp-contact-done { display: none; border-top: 2px solid #BE2E96; padding: clamp(36px,min(5vw, 72px),56px) 0; }
.cp-contact-form__container.is-submitted .cp-contact-done { display: block; }
.cp-contact-form__container.is-submitted .cp-contact-form__form { display: none; }
.cp-contact-done__title { font: 300 clamp(28px,min(4vw, 57.6px),40px)/1.3 'Noto Sans JP',sans-serif; font-weight: 600; color: #1C1F26; margin-bottom: 16px; }
.cp-contact-done__text { font-family: 'Noto Sans JP',sans-serif; font-weight: 400; font-size: 14.5px; line-height: 2; color: #6B7178; margin: 0 0 28px; }
.cp-contact-done__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cp-contact-done__link { display: inline-flex; align-items: center; gap: 9px; font: 600 14px/1 'Noto Sans JP',sans-serif; color: #1C1F26; text-decoration: none; }
button.cp-contact-done__link { appearance: none; cursor: pointer; background: none; border: none; padding: 0; }
.cp-contact-done__link-arrow { font-family: 'Urbanist'; font-weight: 700; color: #BE2E96; }

/* --------------------------------------------------------------------------
   contact responsive (page-specific)
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .cp-contact-hero__bar { width: 32px; }
}