/* =========================================================================================
   Contact — page-only composition (loaded after main.css). Three bands:
     1  hero ........ Night: the title clear of the header, the corner before the machine in white ink beside it;
                      the corner prints in, then the cooler prints into its outline
     2  next ........ Limestone Deep: what happens next, three stops on a line
     3  body ........ the form, and beside it the direct line and where we work (one column below 1000px, form first)
   ========================================================================================= */
/* 1 · hero */
.contact-hero{padding-top:calc(var(--hdr) + clamp(3.6rem,10vh,7.5rem));padding-bottom:clamp(3.4rem,6vw,6rem)}
.contact-hero .d1{font-size:clamp(2.6rem,5.4vw,5.4rem)}
/* the corner before the machine stands beside the words, its ground line level with the foot of the lede;
   below 900px it follows them */
.contact-hero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,5vw,5.5rem);align-items:end}
.contact-hero__art{position:relative;margin:0 0 -.4rem;justify-self:end;width:min(100%,600px)}
.contact-hero__art img{display:block;width:100%;height:auto;opacity:.86;filter:invert(1) hue-rotate(180deg)}   /* the drawing's ink, turned to white */
/* the cooler stands exactly in the dashed outline (x 226–312.4, y 182–418 of the 600×480 corner) */
.contact-hero__art .contact-hero__machine{position:absolute;left:37.35%;top:37.92%;width:15.04%;opacity:.92}
/* the corner prints in from the left; then the cooler prints into its outline from the top. Without JS, with
   reduced motion and in print both simply stand there. */
.js .contact-hero__art.reveal{opacity:1;transform:none}
.js .contact-hero__art.reveal>img:first-child{clip-path:inset(0 100% 0 0);transition:clip-path 1.5s cubic-bezier(.7,0,.2,1) .2s}
.js .contact-hero__art.reveal .contact-hero__machine{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1) 1.7s}
.js .contact-hero__art.reveal.is-in>img{clip-path:inset(0)}
@media (max-width:900px){
  .contact-hero__grid{grid-template-columns:minmax(0,1fr)}
  .contact-hero__art{justify-self:start;width:min(100%,340px);margin-top:-1.5rem}
}
@media (min-width:601px) and (max-width:900px){.contact-hero__art{width:min(100%,480px)}}
@media print{.contact-hero__art img{filter:none}}

/* 2 · next: the three stops are full-size lines here (a title and a line each); the middle ring is open, the two
   ends solid. As each stop arrives the line runs on from it to the next (down the page below 900px). */
.next{padding-block:clamp(3rem,5vw,5rem)}
.next .label{margin-bottom:clamp(1.4rem,2.2vw,2rem)}
.next__stops .chain__stop{padding-top:2.4rem;color:var(--fg)}
.next__stops .chain__stop::before{width:15px;height:15px}
.next__stops .chain__stop::after{left:15px;top:calc(.15rem + 7px)}
.next__t{font-family:var(--f-display);font-size:clamp(1.5rem,2.3vw,2.3rem);line-height:1.2;letter-spacing:-.008em}
.next__d{margin-top:.5rem;max-width:26ch;font-family:var(--f-text);font-size:1.05rem;line-height:1.5;color:var(--fg-soft);text-wrap:pretty}
.js .next__stops .chain__stop.reveal::after{transform-origin:0 0;transform:scaleX(0);transition:transform 1s var(--ease-out);transition-delay:inherit}
.js .next__stops .chain__stop.reveal.is-in::after{transform:none}
@media (max-width:900px){
  .next__stops .chain__stop{padding:0 0 1.5rem 2.1rem}
  .next__stops .chain__stop:last-child{padding-bottom:0}
  .next__stops .chain__stop::before{top:.45rem}
  .next__stops .chain__stop::after{left:7px;top:calc(.45rem + 15px);bottom:-.45rem}
  .js .next__stops .chain__stop.reveal::after{transform:scaleY(0)}
  .next__d{max-width:none}
}
@media print{.next__stops .chain__stop::after{transform:none!important}}

/* 3 · body */
.contact-body{padding-bottom:clamp(4.5rem,8vw,8rem)}
.contact-grid{position:relative;display:grid;gap:clamp(3rem,5.5vw,6.5rem)}
.contact-grid>*{min-width:0}
@media (min-width:1000px){.contact-grid{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);align-items:start}}

.contact-side{display:grid;gap:clamp(2rem,3.2vw,2.8rem);align-content:start}
.contact-block{display:grid;gap:.7rem;justify-items:start;padding-top:clamp(1.2rem,1.8vw,1.6rem);border-top:1px solid var(--rule)}
.contact-block:first-child{padding-top:0;border-top:0}
.contact-block__h{font-family:var(--f-display);font-size:clamp(1.4rem,1.9vw,1.85rem);line-height:1.16;letter-spacing:-.008em}
.contact-block__mail{font-size:clamp(1.25rem,2.1vw,1.8rem)}
.contact-block p{color:var(--fg-soft)}
.contact-block__note{font-size:.9375rem}