.page-contact{
  --c-panel:rgba(16,31,63,.55);
  --c-panel-strong:rgba(16,31,63,.88);
  --c-hair:rgba(199,207,214,.16);
  --c-hair-cyan:rgba(53,224,255,.34);
  position:relative;
  background:
    radial-gradient(110% 70% at 92% -8%,rgba(53,224,255,.12),transparent 58%),
    radial-gradient(90% 60% at -10% 22%,rgba(58,46,110,.42),transparent 62%),
    var(--deep);
  color:var(--text);
  overflow-x:clip;
}

.page-contact .shell{position:relative;}

.page-contact .contact-hero-wrap{padding-top:clamp(20px,3vw,38px);}

.page-contact .crumbs{margin-bottom:clamp(16px,2.4vw,28px);}
.page-contact .crumb-list{
  display:flex;flex-wrap:wrap;gap:4px;
  list-style:none;margin:0;padding:0;
  font-size:.82rem;color:var(--muted);
}
.page-contact .crumb-list li+li::before{content:"/";margin-right:8px;color:rgba(199,207,214,.4);}
.page-contact .crumb-list a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;}
.page-contact .crumb-list a:hover{color:var(--cyan);border-bottom-color:var(--c-hair-cyan);}

.page-contact .contact-hero{
  display:grid;
  gap:clamp(22px,4vw,44px);
  align-items:end;
  padding-top:clamp(18px,3vw,32px);
  border-top:1px solid var(--c-hair);
}

.page-contact .eyebrow{
  margin:0;
  font-size:.74rem;
  letter-spacing:.2em;
  color:var(--cyan);
}
.page-contact h1{
  margin:.32em 0 0;
  max-width:14ch;
  font-size:clamp(2.05rem,6.2vw,4.2rem);
  line-height:1.03;
  font-weight:900;
  letter-spacing:-.02em;
  background:linear-gradient(104deg,var(--mist) 38%,var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.page-contact .hero-lede{
  max-width:40ch;
  margin:clamp(14px,2.2vw,22px) 0 0;
  font-size:clamp(.98rem,1.6vw,1.08rem);
  line-height:1.8;
  color:var(--muted);
}
.page-contact .hero-keys{
  list-style:none;
  margin:clamp(20px,3vw,30px) 0 0;
  padding:0;
  display:grid;
  gap:1px;
  border:1px solid var(--c-hair);
  background:var(--c-hair);
}
.page-contact .hero-keys li{
  display:grid;
  gap:4px;
  padding:12px 14px;
  background:rgba(6,11,12,.62);
}
.page-contact .key-k{
  font-size:.74rem;
  letter-spacing:.16em;
  color:var(--silver);
}
.page-contact .key-v{
  font-family:var(--font-mono);
  font-size:.92rem;
  color:var(--mist);
  word-break:break-word;
}

.page-contact .media-frame{
  margin:0;
  position:relative;
  overflow:hidden;
  background:linear-gradient(140deg,rgba(16,31,63,.92),rgba(11,43,38,.92));
  border:1px solid var(--c-hair);
}
.page-contact .media-frame img{display:block;width:100%;height:auto;object-fit:cover;}
.page-contact .hero-media{
  aspect-ratio:16/9;
  border-radius:var(--radius-b);
  clip-path:polygon(0 0,100% 0,100% 88%,0 100%);
}
.page-contact .hero-media img{width:100%;height:100%;}

.page-contact .contact-index{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  margin-top:clamp(26px,4vw,44px);
  padding:14px 0;
  border-top:1px solid var(--c-hair);
  border-bottom:1px solid var(--c-hair);
}
.page-contact .index-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  font-size:.84rem;
  color:var(--silver);
  text-decoration:none;
  background:rgba(199,207,214,.05);
  border:1px solid var(--c-hair);
  border-radius:2px 14px 2px 14px;
  transition:border-color .25s ease,color .25s ease,background-color .25s ease;
}
.page-contact .index-link:hover,
.page-contact .index-link:focus-visible{
  color:var(--cyan);
  border-color:var(--c-hair-cyan);
  background:rgba(53,224,255,.09);
}
.page-contact .idx{font-family:var(--font-mono);font-size:.72rem;color:var(--orange);}

.page-contact .section-block{margin-top:clamp(44px,7vw,92px);}
.page-contact .section-head{margin-bottom:clamp(20px,3.2vw,34px);}
.page-contact .section-title{
  margin:.36em 0 0;
  font-size:clamp(1.5rem,3.4vw,2.35rem);
  line-height:1.14;
  font-weight:900;
  letter-spacing:-.01em;
  color:var(--mist);
}
.page-contact .section-lede{
  max-width:42ch;
  margin:.7em 0 0;
  font-size:.96rem;
  line-height:1.78;
  color:var(--muted);
}

.page-contact .channel-list{display:grid;}
.page-contact .channel-row{
  display:grid;
  gap:14px;
  padding:clamp(18px,3vw,26px) 0;
  border-top:1px solid var(--c-hair);
  background:linear-gradient(90deg,rgba(53,224,255,.05),transparent 58%);
}
.page-contact .channel-row:last-child{border-bottom:1px solid var(--c-hair);}
.page-contact .channel-num{
  display:block;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.1em;
  color:var(--orange);
}
.page-contact .channel-name{
  margin:6px 0 0;
  font-size:1.14rem;
  font-weight:800;
  letter-spacing:.01em;
  color:var(--mist);
}
.page-contact .channel-contact{
  margin:8px 0 0;
  font-family:var(--font-mono);
  font-size:.86rem;
  line-height:1.7;
  color:var(--cyan);
  word-break:break-word;
}
.page-contact .channel-body p{
  margin:0;
  max-width:44ch;
  font-size:.96rem;
  line-height:1.8;
  color:var(--muted);
}
.page-contact .tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}
.page-contact .tag{
  display:inline-block;
  padding:4px 10px;
  font-size:.75rem;
  letter-spacing:.04em;
  color:var(--silver);
  background:rgba(199,207,214,.05);
  border:1px solid var(--c-hair);
  border-radius:2px 10px 2px 10px;
}
.page-contact .tag-cool{color:var(--cyan);border-color:var(--c-hair-cyan);background:rgba(53,224,255,.08);}
.page-contact .tag-hot{color:var(--orange);border-color:rgba(255,122,47,.42);background:rgba(255,122,47,.1);}
.page-contact .tag-amber{color:var(--amber);border-color:rgba(232,184,75,.42);background:rgba(232,184,75,.1);}

.page-contact .channel-figure{
  margin-top:clamp(26px,4vw,42px);
  aspect-ratio:2/1;
  border-radius:var(--radius-a);
}
.page-contact .channel-figure img{width:100%;height:100%;}

.page-contact .self-serve{
  display:grid;
  gap:16px;
  margin-top:clamp(28px,4vw,44px);
  padding:clamp(18px,3vw,26px);
  border-left:3px solid var(--cyan);
  background:linear-gradient(100deg,var(--c-panel-strong),rgba(16,31,63,.28));
}
.page-contact .self-serve p{
  margin:0;
  max-width:46ch;
  font-size:.94rem;
  line-height:1.8;
  color:var(--silver);
}
.page-contact .btn-row{display:flex;flex-wrap:wrap;gap:10px;}

.page-contact .feedback-grid{display:grid;gap:clamp(20px,3vw,34px);}
.page-contact .feedback-sub{
  margin:0 0 14px;
  font-size:1rem;
  font-weight:800;
  color:var(--mist);
}
.page-contact .check-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
}
.page-contact .check-list li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:13px 14px;
  font-size:.93rem;
  line-height:1.72;
  color:var(--silver);
  background:rgba(53,224,255,.06);
  border-left:2px solid rgba(53,224,255,.45);
}
.page-contact .check-list .check-mark{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--cyan);
}
.page-contact .check-list--miss li{
  background:rgba(90,31,46,.3);
  border-left-color:rgba(255,122,47,.5);
}
.page-contact .check-list--miss .check-mark{color:var(--orange);}

.page-contact .process{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(16px,3vw,24px);
}
.page-contact .process-node{
  position:relative;
  padding:16px 18px;
  background:var(--c-panel);
  border:1px solid var(--c-hair);
  border-radius:var(--radius-b);
}
.page-contact .process-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  margin-bottom:10px;
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--cyan);
  background:rgba(53,224,255,.08);
  border:1px solid var(--c-hair-cyan);
  border-radius:2px 12px 2px 12px;
}
.page-contact .process-title{
  margin:0;
  font-size:1.06rem;
  font-weight:800;
  color:var(--mist);
}
.page-contact .process-node p{
  margin:8px 0 0;
  max-width:46ch;
  font-size:.93rem;
  line-height:1.78;
  color:var(--muted);
}

.page-contact .coop-grid{
  display:grid;
  gap:1px;
  background:var(--c-hair);
  border:1px solid var(--c-hair);
}
.page-contact .coop-item{
  display:grid;
  align-content:start;
  gap:10px;
  padding:clamp(18px,3vw,28px);
  background:var(--c-panel);
}
.page-contact .coop-item--city{border-top:3px solid var(--amber);}
.page-contact .coop-item--fix{border-top:3px solid var(--cyan);}
.page-contact .coop-item--tip{border-top:3px solid var(--orange);}
.page-contact .coop-item h3{
  margin:0;
  font-size:1.06rem;
  font-weight:800;
  color:var(--mist);
}
.page-contact .coop-item p{
  margin:0;
  font-size:.93rem;
  line-height:1.78;
  color:var(--muted);
}

.page-contact .materials{
  margin-top:clamp(24px,3.6vw,38px);
  padding:clamp(18px,3vw,26px);
  background:rgba(58,46,110,.32);
  border:1px solid rgba(199,207,214,.14);
  border-radius:var(--radius-a);
}
.page-contact .materials-title{
  margin:0 0 14px;
  font-size:.96rem;
  font-weight:800;
  color:var(--mist);
}
.page-contact .materials-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.page-contact .materials-list li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  font-size:.92rem;
  line-height:1.72;
  color:var(--silver);
}
.page-contact .materials-list li::before{
  content:"›";
  font-family:var(--font-mono);
  color:var(--cyan);
}

.page-contact .legal-band{
  position:relative;
  margin-top:clamp(46px,7vw,92px);
  padding:clamp(30px,5vw,58px) 0 clamp(52px,7vw,86px);
  background:var(--ink);
  border-top:1px solid var(--c-hair-cyan);
  overflow:hidden;
}
.page-contact .legal-band::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:80px;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(53,224,255,.16) 0 3px,
    transparent 3px 9px,
    rgba(199,207,214,.09) 9px 14px,
    transparent 14px 27px);
  -webkit-mask-image:linear-gradient(to top,#000,transparent);
  mask-image:linear-gradient(to top,#000,transparent);
}
.page-contact .section-head--legal{margin-bottom:clamp(18px,3vw,28px);}
.page-contact .legal-grid{
  display:grid;
  gap:1px;
  margin:0;
  background:rgba(199,207,214,.14);
  border:1px solid rgba(199,207,214,.14);
}
.page-contact .legal-row{
  display:grid;
  gap:6px;
  padding:13px 16px;
  background:var(--ink);
}
.page-contact .legal-k{
  font-size:.76rem;
  letter-spacing:.14em;
  color:var(--silver);
}
.page-contact .legal-v{
  margin:0;
  font-family:var(--font-mono);
  font-size:.9rem;
  line-height:1.7;
  color:var(--mist);
  word-break:break-word;
}
.page-contact .legal-note{
  margin:clamp(20px,3vw,28px) 0 0;
  max-width:52ch;
  font-size:.88rem;
  line-height:1.8;
  color:var(--muted);
}
.page-contact .legal-note a{
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px solid var(--c-hair-cyan);
}
.page-contact .legal-note a:hover{color:var(--mist);}

@media (min-width:560px){
  .page-contact .hero-keys li{
    grid-template-columns:112px minmax(0,1fr);
    align-items:baseline;
    gap:14px;
  }
}

@media (min-width:820px){
  .page-contact .contact-hero{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  }
  .page-contact .channel-row{
    grid-template-columns:minmax(190px,236px) minmax(0,1fr);
    gap:clamp(20px,4vw,48px);
  }
  .page-contact .self-serve{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
  }
  .page-contact .coop-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (min-width:880px){
  .page-contact .feedback-grid{grid-template-columns:1.05fr .95fr;}
  .page-contact .legal-row{grid-template-columns:180px minmax(0,1fr);align-items:baseline;}
}

@media (min-width:760px){
  .page-contact .process{padding-left:64px;}
  .page-contact .process::before{
    content:"";
    position:absolute;
    left:23px;
    top:8px;
    bottom:8px;
    width:1px;
    background:linear-gradient(180deg,var(--cyan),rgba(53,224,255,.16) 72%,transparent);
  }
  .page-contact .process{position:relative;}
  .page-contact .process-node{
    padding:2px 0;
    background:none;
    border:0;
    border-radius:0;
  }
  .page-contact .process-num{
    position:absolute;
    left:-64px;
    top:0;
    margin-bottom:0;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-contact *{
    animation:none !important;
    transition:none !important;
  }
}
</main>