.page-contact{
  --contact-gap:clamp(24px,4vw,56px);
  --contact-ink-soft:rgba(20,17,15,.72);
  --contact-paper-soft:rgba(247,244,239,.72);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  overflow-x:hidden;
}
.page-contact img{display:block;max-width:100%;height:auto;}
.page-contact .eyebrow{
  margin:0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ochre);
}
.page-contact .h2{
  margin:0;
  font-size:clamp(26px,3.6vw,40px);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:700;
}
.page-contact .prose{
  margin:0;
  max-width:62ch;
  font-size:15.5px;
  line-height:1.75;
  color:var(--contact-ink-soft);
}
.page-contact .prose a{
  color:var(--ochre);
  text-decoration:none;
  border-bottom:1px solid rgba(184,69,43,.42);
}
.page-contact .prose a:hover,
.page-contact .prose a:focus-visible{border-bottom-color:var(--ochre);}

/* ---------- hero ---------- */
.page-contact .contact-hero{padding:clamp(20px,4vw,44px) 0 0;}
.page-contact .contact-hero .container{display:grid;gap:clamp(18px,3vw,32px);}
.page-contact .breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--contact-ink-soft);
}
.page-contact .breadcrumb a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.page-contact .breadcrumb a:hover,
.page-contact .breadcrumb a:focus-visible{color:var(--ochre);border-bottom-color:var(--ochre);}
.page-contact .breadcrumb__sep{color:rgba(20,17,15,.28);}

.page-contact .contact-hero__head{
  display:grid;
  gap:clamp(12px,2vw,18px);
  border-top:1px solid var(--line-strong);
  padding-top:clamp(16px,2.6vw,28px);
}
.page-contact .contact-hero .display{
  margin:0;
  font-size:clamp(52px,12vw,140px);
  line-height:.88;
  letter-spacing:-.045em;
  font-weight:700;
  color:var(--ochre-deep);
}
.page-contact .contact-hero__lede{
  margin:0;
  max-width:44ch;
  font-size:clamp(16px,1.6vw,19px);
  line-height:1.7;
  color:var(--contact-ink-soft);
}
.page-contact .contact-hero__figure{margin:0;}
.page-contact .contact-hero__figure img{
  width:100%;
  height:clamp(200px,40vw,400px);
  object-fit:cover;
  background:var(--ochre-soft);
  clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 30px));
}
.page-contact .contact-hero__caption{
  margin:12px 0 0;
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.6;
  letter-spacing:.03em;
  color:var(--contact-ink-soft);
}

.page-contact .contact-quick{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.page-contact .contact-quick .chip{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border:1px solid var(--line-strong);
  font-size:13px;
  line-height:1.4;
  color:var(--ink);
  text-decoration:none;
  background:transparent;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.page-contact .contact-quick .chip:hover,
.page-contact .contact-quick .chip:focus-visible{
  background:var(--ochre);
  border-color:var(--ochre);
  color:var(--paper);
}

/* ---------- routes ---------- */
.page-contact .contact-paths{padding:clamp(48px,7vw,100px) 0 0;}
.page-contact .contact-paths .container{display:grid;gap:var(--contact-gap);}
.page-contact .contact-paths__intro{display:grid;gap:12px;max-width:720px;}

.page-contact .contact-grid{display:grid;gap:clamp(28px,4vw,44px);}

.page-contact .contact-route{margin:0;color:var(--ochre);}
.page-contact .contact-route__svg{display:block;width:100%;max-width:210px;height:auto;}
.page-contact .contact-route__dot--live{fill:var(--lime);stroke:var(--ochre-deep);stroke-width:1.2;}
.page-contact .contact-route__label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  fill:var(--ink);
}
.page-contact .contact-route__caption{
  margin:10px 0 0;
  max-width:22ch;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.6;
  color:var(--contact-ink-soft);
}

.page-contact .contact-cards{display:grid;gap:clamp(20px,3vw,30px);}
.page-contact .contact-card{
  display:grid;
  gap:10px;
  border-top:1px solid var(--line-strong);
  padding-top:16px;
}
.page-contact .contact-card__title{
  margin:0;
  font-size:clamp(19px,2.2vw,23px);
  letter-spacing:-.02em;
  font-weight:700;
}
.page-contact .contact-card__text{
  margin:0;
  font-size:15px;
  line-height:1.75;
  color:var(--contact-ink-soft);
  overflow-wrap:anywhere;
}
.page-contact .contact-card__text a{
  color:var(--ochre);
  text-decoration:none;
  border-bottom:1px solid rgba(184,69,43,.42);
}
.page-contact .contact-card__fit{
  margin:0;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.65;
  color:var(--lake);
}
.page-contact .mono{
  font-family:var(--mono);
  font-size:.94em;
  letter-spacing:.01em;
  color:var(--ochre-deep);
}
.page-contact .contact-panel .mono{color:inherit;}

.page-contact .contact-panel{
  position:relative;
  display:grid;
  align-content:start;
  gap:14px;
  padding:clamp(22px,4vw,34px);
  background:var(--ochre-deep);
  color:var(--paper);
}
.page-contact .contact-panel::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:56px;
  height:4px;
  background:var(--lime);
}
.page-contact .contact-panel__eyebrow{
  margin:0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--lime);
}
.page-contact .contact-panel__title{
  margin:0;
  font-size:clamp(20px,2.4vw,26px);
  letter-spacing:-.02em;
  font-weight:700;
}
.page-contact .contact-panel__list{margin:0;display:grid;}
.page-contact .contact-panel__list > div{
  display:grid;
  gap:3px;
  padding:11px 0;
  border-top:1px solid rgba(247,244,239,.22);
}
.page-contact .contact-panel__list dt{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--contact-paper-soft);
}
.page-contact .contact-panel__list dd{
  margin:0;
  font-size:15px;
  line-height:1.55;
  overflow-wrap:anywhere;
}
.page-contact .contact-panel__list dd.num{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.page-contact .contact-panel__note{
  margin:0;
  font-size:12.5px;
  line-height:1.7;
  color:var(--contact-paper-soft);
}
.page-contact .contact-panel__btn{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  padding:10px 16px;
  border:1px solid rgba(247,244,239,.5);
  color:var(--paper);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-decoration:none;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.page-contact .contact-panel__btn:hover,
.page-contact .contact-panel__btn:focus-visible{
  background:var(--lime);
  border-color:var(--lime);
  color:var(--ochre-deep);
}

/* ---------- cooperation ---------- */
.page-contact .contact-coop{padding:clamp(56px,8vw,110px) 0 0;}
.page-contact .contact-coop .container{display:grid;gap:var(--contact-gap);}
.page-contact .contact-coop__head{display:grid;gap:12px;max-width:720px;}
.page-contact .contact-coop__grid{display:grid;gap:clamp(16px,3vw,26px);}
.page-contact .coop-item{
  display:grid;
  align-content:start;
  gap:10px;
  padding:clamp(18px,3vw,26px);
  border:1px solid var(--line);
}
.page-contact .coop-item--ochre{background:var(--ochre-soft);border-color:transparent;}
.page-contact .coop-item--lake{background:var(--lake-soft);border-color:transparent;}
.page-contact .coop-item__label{
  margin:0;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lake);
}
.page-contact .coop-item__title{
  margin:0;
  font-size:18px;
  letter-spacing:-.01em;
  font-weight:700;
}
.page-contact .coop-item__text{
  margin:0;
  font-size:14.5px;
  line-height:1.72;
  color:var(--contact-ink-soft);
}
.page-contact .coop-item__text a{
  color:var(--ochre-deep);
  text-decoration:none;
  border-bottom:1px solid rgba(122,42,25,.4);
}
.page-contact .coop-item__need{
  margin:6px 0 0;
  padding-top:10px;
  border-top:1px dashed rgba(20,17,15,.22);
  font-size:13px;
  line-height:1.7;
}
.page-contact .coop-item__need strong{font-weight:700;color:var(--ochre-deep);}

/* ---------- prepare ---------- */
.page-contact .contact-prepare{padding:clamp(56px,8vw,110px) 0 clamp(56px,8vw,96px);}
.page-contact .contact-prepare__inner{display:grid;gap:var(--contact-gap);align-items:start;}
.page-contact .contact-prepare__text{display:grid;gap:14px;}

.page-contact .contact-acc{
  border-top:1px solid var(--line-strong);
  padding:14px 0 4px;
}
.page-contact .contact-acc summary{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  list-style:none;
  font-size:16.5px;
  font-weight:700;
  letter-spacing:-.01em;
}
.page-contact .contact-acc summary::-webkit-details-marker{display:none;}
.page-contact .contact-acc summary::after{
  content:"+";
  font-family:var(--mono);
  font-weight:400;
  color:var(--ochre);
}
.page-contact .contact-acc[open] summary::after{content:"–";}
.page-contact .contact-acc summary:focus-visible{outline:2px solid var(--lake);outline-offset:4px;}
.page-contact .contact-acc ul{
  margin:10px 0 0;
  padding-left:18px;
  display:grid;
  gap:6px;
  font-size:14.5px;
  line-height:1.72;
  color:var(--contact-ink-soft);
}
.page-contact .contact-prepare__tail{font-size:14.5px;}

.page-contact .contact-prepare__figure{margin:0;background:var(--ochre-soft);}
.page-contact .contact-prepare__figure img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
}
.page-contact .contact-prepare__caption{
  padding:12px 14px;
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  border-top:1px solid var(--line);
}

@media (min-width:900px){
  .page-contact .contact-hero__head{
    grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
    align-items:end;
    column-gap:clamp(24px,4vw,60px);
  }
  .page-contact .contact-hero__head .eyebrow{grid-column:1 / -1;}
  .page-contact .contact-hero__lede{padding-bottom:clamp(4px,1vw,14px);}

  .page-contact .contact-coop__grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;}
  .page-contact .coop-item:nth-child(2){margin-top:clamp(22px,3.4vw,48px);}
  .page-contact .coop-item:nth-child(3){margin-top:clamp(8px,1.4vw,20px);}

  .page-contact .contact-prepare__inner{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    column-gap:clamp(32px,5vw,72px);
  }
}

@media (min-width:1024px){
  .page-contact .contact-grid{
    grid-template-columns:3fr 5fr 4fr;
    gap:0;
    align-items:start;
  }
  .page-contact .contact-route{
    padding-right:clamp(16px,2.4vw,36px);
  }
  .page-contact .contact-route__svg{max-width:none;}
  .page-contact .contact-cards{
    padding:0 clamp(18px,2.6vw,38px);
    border-left:1px solid var(--line);
    border-right:1px solid var(--line);
  }
  .page-contact .contact-card:first-child{padding-top:0;border-top:0;}
  .page-contact .contact-panel{margin-left:clamp(16px,2.4vw,36px);}
}

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