.page-contact{
  padding-bottom: clamp(48px, 7vw, 96px);
  background:
    radial-gradient(820px 460px at 88% -6%, rgba(34,211,238,.12), transparent 62%),
    radial-gradient(680px 420px at 2% 46%, rgba(255,122,26,.08), transparent 68%);
}

.page-contact .container{
  width:100%;
}

.page-contact .breadcrumb{
  padding-top: clamp(14px, 2.4vw, 22px);
}

/* ---------- Hero ---------- */
.page-contact .hero__inner{
  display:grid;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(18px, 3vw, 30px) 0 clamp(28px, 4.4vw, 52px);
  align-items:end;
}

.page-contact .hero__title{
  margin:0;
  font-family: var(--font-display);
  font-weight:900;
  font-size: clamp(34px, 6.6vw, 76px);
  line-height:1.04;
  letter-spacing:-.025em;
  color: var(--white);
}

.page-contact .hero__lead{
  margin: 16px 0 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height:1.78;
  color: var(--mist);
}

.page-contact .hero__rail{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 22px;
}

.page-contact .hero__rail-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 13px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(14,42,71,.72);
  color: var(--silver);
  font-size: 12.5px;
  line-height:1.5;
}

.page-contact .dot{
  width:7px;
  height:7px;
  border-radius:50%;
  flex:none;
}

.page-contact .dot--cyan{ background: var(--cyan); box-shadow:0 0 0 3px rgba(34,211,238,.16); }
.page-contact .dot--orange{ background: var(--orange); box-shadow:0 0 0 3px rgba(255,122,26,.18); }
.page-contact .dot--sage{ background: var(--sage); box-shadow:0 0 0 3px rgba(127,163,154,.18); }

.page-contact .hero__figure{
  margin:0;
  position:relative;
  border-radius: var(--r-xl);
  border:1px solid var(--line);
  overflow:hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, var(--panel-2), var(--ink-deep));
}

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

@media (min-width: 880px){
  .page-contact .hero__inner{
    grid-template-columns: 7fr 5fr;
  }
  .page-contact .hero__figure{
    aspect-ratio: 3 / 2;
  }
}

/* ---------- Channels ---------- */
.page-contact .channels{
  padding-top: clamp(8px, 2vw, 18px);
}

.page-contact .channels__head{
  margin-bottom: clamp(18px, 3vw, 30px);
}

.page-contact .channel-grid{
  display:grid;
  gap:16px;
}

.page-contact .channel-card{
  position:relative;
  border:1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(158deg, var(--panel-2), var(--panel) 62%, var(--ink-deep));
  padding: clamp(18px, 3vw, 28px);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.page-contact .channel-card--mail{
  border-color: rgba(34,211,238,.42);
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.08);
}

.page-contact .channel-card--phone{
  border-color: rgba(255,122,26,.3);
}

.page-contact .channel-card--addr{
  border-color: rgba(127,163,154,.32);
}

.page-contact .channel-card__label{
  margin:0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing:.16em;
  color: var(--silver);
}

.page-contact .channel-card__name{
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight:800;
  font-size: clamp(19px, 2.4vw, 24px);
  letter-spacing:-.01em;
  line-height:1.25;
  color: var(--white);
}

.page-contact .channel-card__value{
  display:block;
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.9vw, 18px);
  line-height:1.55;
  color: var(--white);
  background: rgba(7,26,47,.62);
  border:1px dashed rgba(34,211,238,.45);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  overflow-wrap:anywhere;
  user-select: all;
  -webkit-user-select: all;
}

.page-contact .channel-card--phone .channel-card__value{
  border-color: rgba(255,122,26,.45);
  font-size: clamp(18px, 2.6vw, 24px);
  letter-spacing:.02em;
}

.page-contact .channel-card--addr .channel-card__value{
  font-family: var(--font-body);
  font-size: 15px;
  line-height:1.72;
  border-style: solid;
  border-color: var(--line);
}

.page-contact .channel-card__note{
  margin: 12px 0 0;
  color: var(--silver);
  font-size: 13.5px;
  line-height:1.72;
}

.page-contact .channel-card__fit{
  margin: 14px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.page-contact .channel-card__fit li{
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34,211,238,.10);
  border:1px solid rgba(34,211,238,.26);
  color: var(--mist);
  font-size: 12px;
  line-height:1.5;
}

.page-contact .channel-card--phone .channel-card__fit li{
  background: rgba(255,122,26,.10);
  border-color: rgba(255,122,26,.32);
}

.page-contact .channel-card--addr .channel-card__fit li{
  background: rgba(127,163,154,.12);
  border-color: rgba(127,163,154,.34);
}

.page-contact .channel-card:hover{
  transform: translateY(-4px);
}

.page-contact .channel-card--mail:hover{ border-color: rgba(34,211,238,.75); }
.page-contact .channel-card--phone:hover{ border-color: rgba(255,122,26,.62); }
.page-contact .channel-card--addr:hover{ border-color: rgba(127,163,154,.6); }

@media (min-width: 720px){
  .page-contact .channel-grid{
    grid-template-columns: repeat(12, 1fr);
    align-items:start;
  }
  .page-contact .channel-card--mail{ grid-column: span 6; }
  .page-contact .channel-card--phone{ grid-column: span 6; margin-top: 26px; }
  .page-contact .channel-card--addr{ grid-column: span 12; }
}

@media (min-width: 1020px){
  .page-contact .channel-card--mail{ grid-column: span 5; }
  .page-contact .channel-card--phone{ grid-column: span 3; margin-top: 34px; }
  .page-contact .channel-card--addr{ grid-column: span 4; margin-top: 12px; }
}

/* ---------- Flow ---------- */
.page-contact .flow{
  padding-top: clamp(34px, 5.4vw, 72px);
}

.page-contact .flow__head{
  display:grid;
  gap: clamp(16px, 2.6vw, 28px);
  margin-bottom: clamp(18px, 3vw, 28px);
  align-items:end;
}

.page-contact .flow__figure{
  margin:0;
  border-radius: var(--r-lg);
  border:1px solid var(--line);
  overflow:hidden;
  background: rgba(4,18,31,.6);
  aspect-ratio: 3 / 2;
}

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

@media (min-width: 880px){
  .page-contact .flow__head{
    grid-template-columns: 7fr 5fr;
  }
}

.page-contact .flow-table{
  min-width: 720px;
}

.page-contact .flow-table tbody tr{
  transition: background .2s var(--ease);
}

.page-contact .flow-table tbody tr:hover{
  background: rgba(34,211,238,.08);
}

.page-contact .flow-table th[scope="row"]{
  color: var(--white);
  font-weight:600;
}

/* ---------- Prep ---------- */
.page-contact .prep{
  padding-top: clamp(34px, 5.4vw, 72px);
}

.page-contact .prep__inner{
  display:grid;
  gap: clamp(18px, 3vw, 34px);
}

.page-contact .prep__title{
  margin:0 0 12px;
  font-family: var(--font-display);
  font-weight:800;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height:1.18;
  letter-spacing:-.02em;
  color: var(--white);
}

.page-contact .prep__lead{
  margin:0;
  color: var(--mist);
  font-size: 15px;
  line-height:1.78;
  max-width: 44ch;
}

.page-contact .prep__item{
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(14,42,71,.74);
  margin-bottom: 10px;
  overflow:hidden;
  transition: border-color .25s var(--ease);
}

.page-contact .prep__item[open]{
  border-color: rgba(34,211,238,.45);
}

.page-contact .prep__item .accordion__summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 15px 18px;
  cursor:pointer;
  list-style:none;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing:.06em;
  color: var(--mist);
}

.page-contact .prep__item .accordion__summary::-webkit-details-marker{
  display:none;
}

.page-contact .prep__item .accordion__summary::after{
  content:"+";
  flex:none;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--cyan);
  line-height:1;
}

.page-contact .prep__item[open] .accordion__summary::after{
  content:"–";
}

.page-contact .prep__item .accordion__body{
  padding: 0 18px 18px;
  color: var(--mist);
  font-size: 14.5px;
  line-height:1.78;
}

@media (min-width: 900px){
  .page-contact .prep__inner{
    grid-template-columns: 4fr 8fr;
    align-items:start;
  }
  .page-contact .prep__aside{
    position: sticky;
    top: 96px;
  }
}

/* ---------- Coop ---------- */
.page-contact .coop{
  padding-top: clamp(34px, 5.4vw, 72px);
}

.page-contact .coop__panel{
  display:grid;
  gap: clamp(20px, 3vw, 34px);
  padding: clamp(22px, 4vw, 42px);
  border-radius: var(--r-xl);
  border:1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(34,211,238,.12), rgba(7,26,47,0) 58%),
    linear-gradient(160deg, var(--panel-2), var(--ink-deep));
}

.page-contact .coop__title{
  margin:0 0 14px;
  font-family: var(--font-display);
  font-weight:800;
  font-size: clamp(23px, 3.2vw, 36px);
  line-height:1.2;
  letter-spacing:-.02em;
  color: var(--white);
}

.page-contact .coop__lead{
  margin:0;
  color: var(--mist);
  font-size: 15px;
  line-height:1.78;
}

.page-contact .coop__note{
  margin: 12px 0 0;
  color: var(--silver);
  font-size: 14px;
  line-height:1.75;
}

.page-contact .coop__tags{
  margin: 18px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.page-contact .coop__card{
  border:1px solid rgba(34,211,238,.35);
  border-radius: var(--r-lg);
  background: rgba(7,26,47,.66);
  padding: clamp(16px, 2.6vw, 24px);
}

.page-contact .coop__card-label{
  margin:0 0 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing:.16em;
  color: var(--silver);
}

.page-contact .coop__mail{
  display:block;
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.9vw, 17px);
  line-height:1.5;
  color: var(--white);
  border-bottom:1px dashed rgba(34,211,238,.45);
  padding-bottom: 8px;
  overflow-wrap:anywhere;
  user-select: all;
  -webkit-user-select: all;
}

.page-contact .coop__card-note{
  margin: 12px 0 0;
  color: var(--silver);
  font-size: 13.5px;
  line-height:1.7;
}

.page-contact .coop__card-links{
  margin: 16px 0 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.page-contact .coop__link{
  color: var(--cyan);
  font-size: 14px;
  text-decoration:none;
  border-bottom:1px solid rgba(34,211,238,.28);
  padding-bottom: 2px;
  width:fit-content;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.page-contact .coop__link:hover{
  color: var(--pill);
  border-color: var(--pill);
}

@media (min-width: 900px){
  .page-contact .coop__panel{
    grid-template-columns: 7fr 5fr;
    align-items:center;
  }
}

/* ---------- Address ---------- */
.page-contact .addr{
  padding-top: clamp(34px, 5.4vw, 72px);
}

.page-contact .addr__grid{
  display:grid;
  gap: clamp(18px, 3vw, 32px);
  align-items:stretch;
}

.page-contact .addr__title{
  margin:0 0 14px;
  font-family: var(--font-display);
  font-weight:800;
  font-size: clamp(23px, 3.2vw, 34px);
  line-height:1.2;
  letter-spacing:-.02em;
  color: var(--white);
}

.page-contact .addr__value{
  margin:0 0 20px;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height:1.75;
  color: var(--mist);
  padding-left: 14px;
  border-left: 3px solid var(--sage);
}

.page-contact .addr__facts{
  margin:0;
  display:grid;
  gap:1px;
  background: var(--line);
  border:1px solid var(--line);
  border-radius: var(--r-md);
  overflow:hidden;
}

.page-contact .addr__fact{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding: 11px 14px;
  background: rgba(14,42,71,.86);
}

.page-contact .addr__fact dt{
  color: var(--silver);
  font-size: 13px;
}

.page-contact .addr__fact dd{
  margin:0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--white);
  text-align:right;
  overflow-wrap:anywhere;
}

.page-contact .addr__fine{
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height:1.7;
  color: var(--silver);
}

.page-contact .addr__link{
  color: var(--sage);
  text-decoration:none;
  border-bottom:1px solid rgba(127,163,154,.5);
}

.page-contact .addr__link:hover{
  color: var(--pill);
  border-color: var(--pill);
}

.page-contact .addr__sketch{
  position:relative;
  min-height: 220px;
  border-radius: var(--r-xl);
  border:1px solid var(--line);
  overflow:hidden;
  background:
    linear-gradient(rgba(30,70,102,.5) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(30,70,102,.5) 1px, transparent 1px) 0 0 / 34px 100%,
    radial-gradient(320px 200px at 62% 46%, rgba(127,163,154,.16), transparent 70%),
    rgba(4,18,31,.72);
}

.page-contact .addr__pin{
  position:absolute;
  left: 40%;
  top: 44%;
  width: 13px;
  height: 13px;
  border-radius:50%;
  background: var(--orange);
  box-shadow: 0 0 0 6px rgba(255,122,26,.2), 0 0 0 15px rgba(255,122,26,.08);
}

.page-contact .addr__bar{
  position:absolute;
  height: 6px;
  border-radius: 999px;
  background: rgba(34,211,238,.5);
}

.page-contact .addr__bar--a{ left: 12%; top: 22%; width: 26%; }
.page-contact .addr__bar--b{ left: 54%; top: 66%; width: 32%; background: rgba(127,163,154,.55); }
.page-contact .addr__bar--c{ left: 20%; top: 78%; width: 18%; background: rgba(255,122,26,.45); }

@media (min-width: 880px){
  .page-contact .addr__grid{
    grid-template-columns: 7fr 5fr;
  }
  .page-contact .addr__sketch{
    min-height: 100%;
  }
}

/* ---------- Help ---------- */
.page-contact .help{
  padding-top: clamp(34px, 5.4vw, 72px);
}

.page-contact .help__panel{
  display:grid;
  gap: clamp(18px, 3vw, 28px);
  padding: clamp(22px, 4vw, 40px);
  border-radius: var(--r-xl);
  border:1px solid rgba(127,163,154,.45);
  background:
    linear-gradient(140deg, rgba(127,163,154,.18), rgba(7,26,47,.92) 66%),
    var(--ink-deep);
  align-items:center;
}

.page-contact .help__title{
  margin:0 0 12px;
  font-family: var(--font-display);
  font-weight:800;
  font-size: clamp(22px, 3vw, 32px);
  line-height:1.22;
  letter-spacing:-.02em;
  color: var(--white);
}

.page-contact .help__lead{
  margin:0;
  color: var(--mist);
  font-size: 15px;
  line-height:1.78;
  max-width: 56ch;
}

.page-contact .help__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

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

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce){
  .page-contact .channel-card,
  .page-contact .channel-card:hover,
  .page-contact .flow-table tbody tr,
  .page-contact .coop__link,
  .page-contact .prep__item{
    transition:none;
    transform:none;
  }
}
<<<END>>>