.page-contact{
  --pc-accent:#FF6B35;
  --pc-accent-alt:#39FF14;
  --pc-bg:#0B1B3A;
  --pc-bg-2:#102A4C;
  --pc-text:#FDF6E3;
  --pc-neutral:#8A9BA8;
  --pc-muted:#7A8450;
  --pc-line:rgba(253,246,227,.12);
  position:relative;
  display:block;
}

.page-contact .breadcrumb{
  max-width:var(--container-max);
  margin:0 auto;
  padding:14px 24px;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--color-neutral);
}

.page-contact .breadcrumb a{
  color:var(--color-neutral);
  text-decoration:none;
  transition:color .2s ease;
}

.page-contact .breadcrumb a:hover{
  color:var(--color-accent);
}

.page-contact .breadcrumb-sep{
  margin:0 8px;
  color:var(--color-muted);
}

.page-contact .contact-hero{
  position:relative;
  min-height:clamp(460px,70vh,720px);
  padding:clamp(32px,6vw,80px) 0 clamp(48px,8vw,100px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}

.page-contact .contact-hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 52px),0 100%);
}

.page-contact .contact-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.page-contact .contact-hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(11,27,58,.5) 0%,rgba(11,27,58,.82) 64%,var(--color-bg) 100%);
}

.page-contact .contact-hero-inner{
  position:relative;
  z-index:1;
  width:100%;
}

.page-contact .hero-index{
  display:inline-block;
  padding:6px 14px;
  margin-bottom:18px;
  background:rgba(57,255,20,.1);
  border-left:3px solid var(--color-accent-alt);
  color:var(--color-accent-alt);
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.page-contact .contact-hero h1{
  font-family:var(--font-headline);
  font-size:clamp(2.8rem,6.5vw,5.4rem);
  line-height:.98;
  letter-spacing:.01em;
  margin:0 0 20px;
  color:var(--color-text);
  text-shadow:0 4px 30px rgba(11,27,58,.7);
}

.page-contact .hero-lead{
  max-width:660px;
  font-size:clamp(1rem,1.4vw,1.15rem);
  line-height:1.7;
  color:var(--color-neutral);
  margin-bottom:30px;
}

.page-contact .hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
}

.page-contact .hero-ghost{
  font-family:var(--font-mono);
  font-size:.9rem;
  color:var(--color-text);
  text-decoration:none;
  border-bottom:1px solid var(--color-accent-alt);
  padding-bottom:4px;
  transition:color .2s,border-color .2s;
}

.page-contact .hero-ghost:hover{
  color:var(--color-accent-alt);
  border-color:var(--color-accent);
}

.page-contact .contact-info{
  padding:clamp(64px,9vw,120px) 0;
}

.page-contact .contact-info-layout{
  display:grid;
  gap:clamp(40px,6vw,80px);
}

.page-contact .contact-channels{
  position:relative;
  padding-left:20px;
}

.page-contact .contact-channels::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(180deg,var(--color-accent) 0%,var(--color-accent-alt) 100%);
}

.page-contact .section-index{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-accent-alt);
  margin:0 0 12px;
}

.page-contact .contact-channels h2,
.page-contact .geo-content h2,
.page-contact .form-intro h2{
  font-family:var(--font-headline);
  font-size:clamp(1.9rem,3.2vw,2.8rem);
  line-height:1.1;
  margin:0 0 16px;
  color:var(--color-text);
}

.page-contact .section-lead{
  color:var(--color-neutral);
  line-height:1.6;
  margin-bottom:32px;
}

.page-contact .channel-list{
  list-style:none;
  margin:0 0 32px;
  padding:0;
  display:grid;
  gap:36px;
}

.page-contact .channel-item{
  position:relative;
  padding:18px 0 20px;
  border-bottom:1px solid var(--pc-line);
}

.page-contact .channel-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:8px;
}

.page-contact .channel-item p{
  margin:0 0 8px;
  color:var(--color-neutral);
  line-height:1.6;
  font-size:.95rem;
}

.page-contact .channel-email{
  font-family:var(--font-mono);
  color:var(--color-text);
  text-decoration:none;
  font-size:.9rem;
  transition:color .2s;
}

.page-contact .channel-email:hover{
  color:var(--color-accent-alt);
}

.page-contact .channel-foot{
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  align-items:center;
  padding-top:12px;
}

.page-contact .channel-foot .mono{
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--color-neutral);
}

.page-contact .channel-foot a{
  color:var(--color-text);
  text-decoration:none;
}

.page-contact .channel-foot a:hover{
  color:var(--color-accent-alt);
}

.page-contact .text-arrow{
  color:var(--color-accent);
  text-decoration:none;
  font-family:var(--font-mono);
  font-size:.85rem;
  transition:color .2s;
}

.page-contact .text-arrow:hover{
  color:var(--color-accent-alt);
}

.page-contact .contact-cards{
  display:grid;
  gap:14px;
}

.page-contact .contact-card{
  position:relative;
  background:var(--color-bg-secondary);
  border:1px solid var(--pc-line);
  border-radius:var(--radius);
  padding:22px 20px;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}

.page-contact .contact-card:hover{
  transform:translateY(-4px);
  border-color:var(--color-accent);
  background:rgba(255,107,53,.08);
}

.page-contact .contact-card--primary{
  border-left:3px solid var(--color-accent);
}

.page-contact .card-index{
  position:absolute;
  top:14px;
  right:16px;
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--color-muted);
}

.page-contact .card-label{
  display:block;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-neutral);
  margin-bottom:10px;
}

.page-contact .card-value{
  display:block;
  font-family:var(--font-mono);
  font-size:.95rem;
  line-height:1.4;
  color:var(--color-text);
  text-decoration:none;
  word-break:break-all;
}

.page-contact .card-value:hover{
  color:var(--color-accent-alt);
}

.page-contact .card-hint{
  display:block;
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:.72rem;
  line-height:1.5;
  color:var(--color-muted);
}

.page-contact .contact-geo{
  position:relative;
  padding:clamp(64px,8vw,110px) 0;
  background:
    linear-gradient(90deg,rgba(253,246,227,.04) 1px,transparent 1px),
    linear-gradient(rgba(253,246,227,.04) 1px,transparent 1px),
    radial-gradient(circle at 82% 18%,rgba(255,107,53,.14),transparent 38%),
    var(--color-bg-secondary);
  background-size:48px 48px,48px 48px,auto,auto;
}

.page-contact .contact-geo-grid{
  display:grid;
  gap:clamp(32px,5vw,64px);
  align-items:center;
}

.page-contact .geo-frame{
  position:relative;
  overflow:hidden;
  background:var(--color-bg);
  border:1px solid var(--pc-line);
  border-radius:2px;
}

.page-contact .geo-frame img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  transition:transform .3s ease;
}

.page-contact .geo-frame:hover img{
  transform:scale(1.02);
}

.page-contact .geo-content p{
  color:var(--color-neutral);
  line-height:1.7;
  margin:0 0 18px;
}

.page-contact .geo-content a{
  font-family:var(--font-mono);
}

.page-contact .contact-form-section{
  padding:clamp(64px,8vw,110px) 0;
}

.page-contact .contact-form-layout{
  display:grid;
  gap:clamp(32px,5vw,64px);
}

.page-contact .form-intro p{
  color:var(--color-neutral);
  line-height:1.7;
  margin-bottom:16px;
}

.page-contact .form-intro .text-link{
  color:var(--color-accent);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s,color .2s;
}

.page-contact .form-intro .text-link:hover{
  border-color:var(--color-accent);
  color:var(--color-accent-alt);
}

.page-contact .form-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  margin-top:20px;
  padding:16px 18px;
  background:rgba(57,255,20,.06);
  border-left:3px solid var(--color-accent-alt);
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--color-neutral);
}

.page-contact .form-wrap{
  background:var(--color-bg-2);
  border:1px solid var(--pc-line);
  border-radius:2px;
  padding:clamp(20px,3vw,36px);
}

.page-contact .contact-form{
  display:grid;
  gap:20px;
}

.page-contact .form-row{
  display:grid;
  gap:20px;
}

.page-contact .form-group{
  display:grid;
  gap:8px;
}

.page-contact .form-group label{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.08em;
  color:var(--color-neutral);
}

.page-contact .form-group input,
.page-contact .form-group select,
.page-contact .form-group textarea{
  width:100%;
  box-sizing:border-box;
  background-color:rgba(11,27,58,.55);
  border:1px solid var(--pc-line);
  border-radius:2px;
  padding:12px 14px;
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:1rem;
  outline:none;
  transition:border-color .2s,box-shadow .2s,background-color .2s;
}

.page-contact .form-group select{
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--color-accent) 50%),linear-gradient(135deg,var(--color-accent) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}

.page-contact .form-group input::placeholder,
.page-contact .form-group textarea::placeholder{
  color:rgba(138,155,168,.65);
}

.page-contact .form-group input:focus,
.page-contact .form-group select:focus,
.page-contact .form-group textarea:focus{
  border-color:var(--color-accent);
  background-color:rgba(11,27,58,.8);
  box-shadow:0 0 0 3px rgba(255,107,53,.18);
}

.page-contact .contact-form .btn-primary{
  justify-self:start;
}

@media (min-width:600px){
  .page-contact .contact-cards{
    grid-template-columns:1fr 1fr;
  }

  .page-contact .contact-card--primary,
  .page-contact .contact-card--address{
    grid-column:1 / -1;
  }

  .page-contact .form-row{
    grid-template-columns:1fr 1fr;
  }
}

@media (min-width:900px){
  .page-contact .contact-info-layout{
    grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    gap:clamp(48px,6vw,100px);
  }

  .page-contact .contact-channels{
    padding-left:clamp(24px,5vw,72px);
  }

  .page-contact .contact-geo-grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  }

  .page-contact .contact-form-layout{
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  }
}

@media (min-width:1200px){
  .page-contact .contact-info-layout{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  }
}

.page-contact {
  --color-bg-2: var(--color-bg);
}
