/* Get in touch (/contact). Email only: the mail slate is the page's one action and holds its only
   primary button; the checklist and the studio details under it are supporting info. */

/* ---------- intro */
.contact-hero{padding-block:calc(var(--header-h) + clamp(36px,6vw,88px)) clamp(40px,5vw,72px)}
.contact-intro{display:grid;gap:var(--s5)}
.contact-intro .lede{max-width:64ch}   /* one line on desktop */

/* ---------- mail slate */
.mail{margin-top:clamp(32px,4vw,56px);padding:clamp(22px,4.2vw,60px);display:grid;gap:clamp(18px,2.2vw,28px);--tick:22px}
.mail-label{line-height:1.35}
/* Sized to the slate: one line (15.8em at this width) down to 700px; below that it breaks after the @ (<wbr>)
   and the longer line, "psimageworks.com", is 10.5em. */
.mail-address{font-size:clamp(22px,5.1vw,68px);font-weight:500;font-stretch:118%;line-height:1.08;overflow-wrap:anywhere}
.mail-address a{color:var(--gold);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(217,179,106,.32);text-underline-offset:.14em;
  transition:color var(--t-fast),text-decoration-color var(--t-fast)}
.mail-address a:hover{color:var(--gold-hi);text-decoration-color:currentColor}
.mail-actions{margin-top:var(--s2)}

/* ---------- what to put in your email + studio location, side by side under the slate */
.contact-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:var(--s6) clamp(32px,6vw,96px);align-items:start;margin-top:clamp(32px,4vw,56px)}
.sub-title{font-size:clamp(19px,.8vw + 14px,25px);line-height:1.15}
.checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s6);margin-top:var(--s5)}
.checklist li{display:flex;gap:var(--s3);align-items:flex-start}
.checklist .icon{width:18px;height:18px;margin-top:.22em;color:var(--gold)}
.brief-note{margin-top:var(--s5);color:var(--gold-hi);font-weight:500}
.studio{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));column-gap:var(--s6);border-top:1px solid var(--line)}
.studio>div{display:grid;gap:var(--s2);padding-block:var(--s4);border-bottom:1px solid var(--line)}
.studio dt{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-micro);font-weight:600;font-stretch:75%;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim)}
.studio dt .icon{width:16px;height:16px;color:var(--gold)}
.studio dd{color:var(--cream);font-size:clamp(16px,.3vw + 14px,18px)}

/* ---------- small screens */
/* landscape phones: keep the address on the first screen */
@media (max-height:500px){
  .contact-hero{padding-top:calc(var(--header-h) + var(--s5))}
  .contact-intro{gap:var(--s3)}
  .contact-intro h1{font-size:clamp(32px,4.4vw + 8px,52px)}
  .mail{margin-top:var(--s5)}
}
@media (max-width:900px){.contact-details{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.mail-address{font-size:clamp(20px,7.2vw,52px)}}
@media (max-width:640px){
  .checklist{grid-template-columns:minmax(0,1fr)}
  .mail-actions .btn{flex:1 1 100%}
}