.page-contact{
  --pc-glow:rgba(0,229,192,.12);
  --pc-soft:rgba(0,229,192,.06);
  padding-bottom:96px;
}

.page-contact .breadcrumbs{
  padding-top:26px;
  font-size:var(--fs-14);
}
.page-contact .breadcrumbs__list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  color:var(--muted);
}
.page-contact .breadcrumbs__list li+li::before{
  content:"/";
  margin-right:8px;
  color:var(--border-strong);
}
.page-contact .breadcrumbs__list a{
  color:var(--muted);
  text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.page-contact .breadcrumbs__list a:hover,
.page-contact .breadcrumbs__list a:focus-visible{
  color:var(--accent);
}
.page-contact .breadcrumbs__list [aria-current="page"]{
  color:var(--text);
}

/* ---------- hero ---------- */
.page-contact .contact-hero{
  padding:34px 0 0;
}
.page-contact .contact-hero__grid{
  display:grid;
  gap:26px;
  align-items:start;
}
.page-contact .contact-hero__title{
  margin:12px 0 16px;
  font-size:clamp(30px,8vw,56px);
  line-height:1.14;
}
.page-contact .contact-hero__lede{
  max-width:52ch;
}
.page-contact .contact-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.page-contact .contact-hero__dial{
  position:relative;
  border:1px solid var(--border);
  background:
    linear-gradient(180deg,var(--pc-glow),transparent 62%),
    var(--surface);
  padding:22px 20px 24px;
}
.page-contact .contact-hero__dial::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:var(--accent);
}
.page-contact .contact-hero__dial-label{
  margin:0;
  font-size:var(--fs-12);
  letter-spacing:.14em;
  color:var(--muted);
}
.page-contact .contact-hero__dial-value{
  margin:12px 0 8px;
  font-size:clamp(34px,9vw,58px);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--text);
}
.page-contact .contact-hero__dial-value span{
  color:var(--accent);
  padding:0 .06em;
}
.page-contact .contact-hero__dial-note{
  margin:0 0 16px;
  font-size:var(--fs-14);
  color:var(--muted);
  line-height:1.7;
}
.page-contact .contact-hero__dial-list{
  display:grid;
  gap:9px;
  margin:0;
  padding:16px 0 0;
  list-style:none;
  border-top:1px solid var(--border);
  font-size:var(--fs-14);
  color:var(--muted);
}
.page-contact .contact-hero__dial-list .mono{
  display:inline-block;
  min-width:1.6em;
  margin-right:8px;
  color:var(--accent);
  font-size:var(--fs-16);
}

/* ---------- section head ---------- */
.page-contact .contact-head{
  margin-bottom:26px;
}
.page-contact .contact-head .muted{
  max-width:62ch;
  margin:10px 0 0;
}

/* ---------- channels ---------- */
.page-contact .contact-channels{
  padding-top:74px;
}
.page-contact .contact-banner{
  position:relative;
  margin:0 0 26px;
  border:1px solid var(--border);
  overflow:hidden;
}
.page-contact .contact-banner img{
  display:block;
  width:100%;
  height:clamp(120px,20vw,210px);
  object-fit:cover;
  opacity:.88;
}
.page-contact .contact-banner__cap{
  position:absolute;
  left:12px;
  bottom:12px;
  margin:0;
  padding:5px 10px;
  font-size:var(--fs-12);
  letter-spacing:.12em;
  color:var(--accent);
  background:rgba(11,18,32,.86);
  border:1px solid var(--border-strong);
}

.page-contact .channel-grid{
  display:grid;
  gap:18px;
  margin:0;
  padding:0;
  list-style:none;
}
.page-contact .channel-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:11px;
  min-width:0;
  padding:24px 20px 22px;
  border:1px solid var(--border);
  background:var(--surface);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.page-contact .channel-card::after{
  content:"";
  position:absolute;
  left:-1px;
  top:22px;
  width:3px;
  height:36px;
  background:var(--accent);
}
.page-contact .channel-card--phone::after{
  background:var(--action);
}
.page-contact .channel-card--addr::after{
  background:var(--muted);
}
.page-contact .channel-card:hover,
.page-contact .channel-card:focus-within{
  border-color:var(--accent);
  background:var(--surface-2);
  transform:translateY(-2px);
}
.page-contact .channel-card__tag{
  margin:0;
  font-size:var(--fs-12);
  letter-spacing:.14em;
  color:var(--muted);
}
.page-contact .channel-card__title{
  margin:0;
}
.page-contact .channel-card__value{
  margin:0;
  font-size:clamp(17px,4.4vw,23px);
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--accent);
  overflow-wrap:anywhere;
}
.page-contact .channel-card__value--addr{
  font-size:var(--fs-16);
  line-height:1.7;
  letter-spacing:0;
  color:var(--text);
}
.page-contact .channel-card__desc{
  margin:0;
  font-size:var(--fs-14);
  line-height:1.75;
  color:var(--muted);
}
.page-contact .channel-card__list{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:var(--fs-14);
  color:var(--muted);
}
.page-contact .channel-card__list li{
  position:relative;
  padding-left:16px;
}
.page-contact .channel-card__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:7px;
  height:1px;
  background:var(--accent);
}
.page-contact .channel-card__addr-note{
  margin:auto 0 0;
  padding-top:12px;
  font-size:var(--fs-12);
  letter-spacing:.08em;
  color:var(--muted);
  border-top:1px solid var(--border);
}
.page-contact .channel-card__copy{
  align-self:flex-start;
  margin-top:auto;
}
.page-contact .copy-btn{
  padding:9px 15px;
  font:inherit;
  font-size:var(--fs-14);
  color:var(--text);
  background:transparent;
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  cursor:pointer;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.page-contact .copy-btn:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:var(--pc-soft);
}
.page-contact .copy-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---------- reply window ---------- */
.page-contact .contact-reply{
  padding-top:78px;
}
.page-contact .contact-reply__grid{
  display:grid;
  gap:26px;
  padding-top:30px;
  border-top:1px solid var(--border);
}
.page-contact .contact-reply__big{
  margin:0;
  font-size:clamp(34px,10vw,68px);
  line-height:1;
  letter-spacing:-.035em;
  color:var(--text);
}
.page-contact .contact-reply__big em{
  font-style:normal;
  color:var(--accent);
}
.page-contact .contact-reply__caption{
  margin:10px 0 0;
  font-size:var(--fs-14);
}
.page-contact .contact-reply__text p{
  max-width:58ch;
  line-height:1.8;
}
.page-contact .reply-list{
  display:grid;
  gap:0;
  margin:22px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--border);
}
.page-contact .reply-list li{
  display:grid;
  gap:6px;
  padding:15px 0;
  border-bottom:1px solid var(--border);
  font-size:var(--fs-14);
  line-height:1.75;
  color:var(--muted);
}
.page-contact .reply-list__k{
  font-size:var(--fs-12);
  letter-spacing:.14em;
  color:var(--accent);
}
.page-contact .reply-list a{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid var(--accent);
}
.page-contact .reply-list a:hover{
  color:var(--accent);
}

/* ---------- picker ---------- */
.page-contact .contact-picker{
  padding-top:78px;
}
.page-contact .ask-list{
  border-top:1px solid var(--border);
}
.page-contact .ask-item{
  border-bottom:1px solid var(--border);
}
.page-contact .ask-item__summary{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 14px;
  align-items:center;
  padding:18px 4px;
  cursor:pointer;
  list-style:none;
  transition:background var(--dur) var(--ease);
}
.page-contact .ask-item__summary::-webkit-details-marker{
  display:none;
}
.page-contact .ask-item__summary:hover{
  background:var(--pc-soft);
}
.page-contact .ask-item__summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}
.page-contact .ask-item__idx{
  font-size:var(--fs-12);
  letter-spacing:.12em;
  color:var(--muted);
}
.page-contact .ask-item__title{
  font-size:var(--fs-18);
  font-weight:700;
  color:var(--text);
}
.page-contact .ask-item__hint{
  grid-column:2;
  justify-self:start;
  padding:4px 9px;
  font-size:var(--fs-12);
  letter-spacing:.08em;
  color:var(--accent);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
}
.page-contact .ask-item[open] .ask-item__hint{
  border-color:var(--accent);
  background:var(--pc-soft);
}
.page-contact .ask-item[open] .ask-item__title{
  color:var(--accent);
}
.page-contact .ask-item__body{
  padding:2px 4px 24px;
  max-width:64ch;
  font-size:var(--fs-16);
  line-height:1.8;
  color:var(--muted);
}
.page-contact .ask-item__body p{
  margin:0 0 12px;
}
.page-contact .ask-item__body a{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid var(--accent);
}
.page-contact .ask-item__body a:hover{
  color:var(--accent);
}
.page-contact .ask-item__prep{
  margin:0;
  padding-left:13px;
  border-left:2px solid var(--accent);
  font-size:var(--fs-14);
  color:var(--text);
}
.page-contact .ask-item__prep .mono{
  margin-right:8px;
  font-size:var(--fs-12);
  letter-spacing:.12em;
  color:var(--accent);
}

/* ---------- prepare ---------- */
.page-contact .contact-prep{
  padding-top:78px;
}
.page-contact .prep-grid{
  display:grid;
  gap:26px;
}
.page-contact .prep-grid__head .muted{
  max-width:46ch;
  margin:10px 0 0;
  line-height:1.78;
}
.page-contact .prep-list{
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--border);
}
.page-contact .prep-list li{
  display:grid;
  grid-template-columns:2.6rem 1fr;
  gap:12px;
  align-items:baseline;
  padding:15px 2px;
  border-bottom:1px solid var(--border);
  font-size:var(--fs-16);
  line-height:1.7;
  color:var(--muted);
}
.page-contact .prep-list__idx{
  font-size:var(--fs-12);
  letter-spacing:.1em;
  color:var(--accent);
}

/* ---------- flow ---------- */
.page-contact .contact-flow{
  padding-top:78px;
}
.page-contact .flow-figure{
  position:relative;
  margin:0 0 34px;
  border:1px solid var(--border);
  overflow:hidden;
}
.page-contact .flow-figure img{
  display:block;
  width:100%;
  height:clamp(110px,18vw,190px);
  object-fit:cover;
  opacity:.86;
}
.page-contact .flow-figure__cap{
  position:absolute;
  left:12px;
  bottom:12px;
  right:12px;
  margin:0;
  font-size:var(--fs-12);
  letter-spacing:.1em;
  color:var(--accent);
  background:rgba(11,18,32,.86);
  border:1px solid var(--border-strong);
  padding:5px 10px;
}
.page-contact .flow-steps{
  display:grid;
  gap:16px;
  margin:0;
  padding:0;
  list-style:none;
}
.page-contact .flow-step{
  position:relative;
  display:grid;
  gap:9px;
  padding:22px 18px;
  border:1px solid var(--border);
  background:var(--surface);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.page-contact .flow-step:hover,
.page-contact .flow-step:focus-within{
  border-color:var(--accent);
  transform:translateY(-2px);
}
.page-contact .flow-step__node{
  display:block;
  width:10px;
  height:10px;
  background:var(--accent);
  box-shadow:0 0 0 4px var(--pc-glow);
}
.page-contact .flow-step__idx{
  margin:0;
  font-size:var(--fs-12);
  letter-spacing:.14em;
  color:var(--muted);
}
.page-contact .flow-step__title{
  margin:0;
}
.page-contact .flow-step__desc{
  margin:0;
  font-size:var(--fs-14);
  line-height:1.75;
  color:var(--muted);
}
.page-contact .flow-step__meta{
  margin:2px 0 0;
  padding-top:11px;
  font-size:var(--fs-12);
  letter-spacing:.08em;
  color:var(--action);
  border-top:1px solid var(--border);
}

/* ---------- next ---------- */
.page-contact .contact-next{
  padding-top:78px;
}
.page-contact .contact-next__title{
  margin:0 0 22px;
}
.page-contact .next-grid{
  display:grid;
  gap:16px;
}
.page-contact .next-card{
  display:grid;
  gap:8px;
  padding:20px 18px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface-2);
  text-decoration:none;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.page-contact .next-card:hover,
.page-contact .next-card:focus-visible{
  border-color:var(--accent);
  background:var(--surface);
  transform:translateY(-2px);
}
.page-contact .next-card__idx{
  font-size:var(--fs-12);
  letter-spacing:.14em;
  color:var(--accent);
}
.page-contact .next-card__name{
  font-size:var(--fs-18);
  font-weight:700;
  color:var(--text);
}
.page-contact .next-card__desc{
  font-size:var(--fs-14);
  line-height:1.72;
  color:var(--muted);
}

/* ---------- responsive ---------- */
@media (min-width:640px){
  .page-contact .channel-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-contact .next-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-contact .ask-item__summary{
    grid-template-columns:auto 1fr auto;
    gap:14px;
    align-items:center;
  }
  .page-contact .ask-item__hint{
    grid-column:auto;
    justify-self:end;
  }
}

@media (min-width:900px){
  .page-contact{
    padding-bottom:120px;
  }
  .page-contact .contact-hero__grid{
    grid-template-columns:minmax(0,7fr) minmax(0,4fr);
    gap:52px;
    align-items:start;
  }
  .page-contact .channel-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
  }
  .page-contact .channel-card{
    border-right:0;
  }
  .page-contact .channel-card:last-child{
    border-right:1px solid var(--border);
  }
  .page-contact .contact-reply__grid{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:52px;
    align-items:start;
  }
  .page-contact .reply-list li{
    grid-template-columns:5.5rem 1fr;
    gap:16px;
    align-items:baseline;
  }
  .page-contact .prep-grid{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:52px;
    align-items:start;
  }
  .page-contact .flow-steps{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:0 24px;
  }
  .page-contact .flow-step{
    border:0;
    background:transparent;
    padding:36px 0 0;
  }
  .page-contact .flow-step::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:var(--border);
  }
  .page-contact .flow-step:last-child::after{
    background:linear-gradient(90deg,var(--border),transparent);
  }
  .page-contact .flow-step__node{
    position:absolute;
    top:-5px;
    left:0;
  }
  .page-contact .flow-step:hover,
  .page-contact .flow-step:focus-within{
    transform:translateY(-2px);
  }
  .page-contact .flow-step:hover::after,
  .page-contact .flow-step:focus-within::after{
    background:var(--accent);
  }
  .page-contact .contact-banner img,
  .page-contact .flow-figure img{
    height:230px;
  }
}

@media (min-width:1180px){
  .page-contact .contact-hero__title{
    font-size:clamp(40px,4.4vw,64px);
  }
}