:root{
  --contact-paper:#efe9dc;
  --contact-ink:#0b0b0b;
  --contact-line:#b8b1a6;
  --contact-muted:#6b655e;
  --contact-signal:#d94832
}

html,body.contact-page{height:100%}

/* Keep ordinary Contact one-screen; intrinsic content must remain reachable
   on short viewports, with contextual inquiries or larger CMS copy. */

body.contact-page{
  margin:0;
  min-height:100svh;
  height:auto;
  overflow-x:hidden;
  overflow-y:auto;
  background:var(--contact-paper);
  color:var(--contact-ink);
  font-family:Arial,Helvetica,sans-serif
}

body.contact-page.menu-open{overflow:hidden}

.contact-page-main{
  box-sizing:border-box;
  min-height:calc(100svh - 42px);
  height:auto;
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  grid-template-rows:auto minmax(min-content,1fr);
  column-gap:7vw;
  row-gap:clamp(18px,2.4vh,32px);
  padding:clamp(88px,10vh,112px) clamp(18px,4vw,64px) clamp(16px,2vh,26px)
}

.contact-page-hero,
.contact-page-compose{display:contents}

.contact-letter-title{
  grid-column:1;
  grid-row:1
}

.contact-letter-title>span{
  display:block;
  margin:0 0 12px;
  color:var(--contact-signal);
  font:700 8px/1 monospace;
  letter-spacing:.14em
}

.contact-page-hero h1{
  margin:0;
  font-size:clamp(58px,7.2vw,116px);
  line-height:.76;
  letter-spacing:-.075em;
  font-weight:650
}

.contact-page-intro{
  grid-column:2;
  grid-row:1;
  align-self:end;
  padding-bottom:2px
}

.contact-page-intro .contact-v15-top{
  display:flex;
  justify-content:flex-end;
  margin:0 0 16px;
  padding:0;
  border:0;
  color:var(--contact-muted);
  font:8px/1 monospace;
  letter-spacing:.12em
}

.contact-page-intro .contact-owner-intro{
  max-width:650px;
  margin:0;
  font-size:clamp(18px,1.65vw,25px);
  line-height:1.16;
  letter-spacing:-.025em
}

.contact-page-intro .contact-scope{
  max-width:720px;
  margin:16px 0 0;
  color:var(--contact-muted);
  font:8px/1.55 monospace;
  letter-spacing:.1em
}

.contact-direct{
  grid-column:1;
  grid-row:2;
  align-self:start;
  display:grid;
  gap:16px;
  padding-top:2px;
  border-top:1px solid var(--contact-ink)
}

.contact-direct .contact-direct-label{
  padding-top:12px;
  color:var(--contact-signal);
  font:700 8px/1 monospace;
  letter-spacing:.14em
}

.contact-direct-links{
  display:grid;
  gap:5px
}

.contact-direct-links a{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  min-height:44px;
  color:var(--contact-ink);
  text-decoration:none;
  font:700 clamp(16px,1.4vw,22px)/1.1 Arial,Helvetica,sans-serif;
  letter-spacing:-.025em;
  border-bottom:1px solid transparent
}

.contact-direct-links a:hover,
.contact-direct-links a:focus-visible{border-color:var(--contact-signal)}

.contact-direct-note{
  max-width:300px;
  margin:4px 0 0;
  color:var(--contact-muted);
  font:8px/1.55 monospace;
  letter-spacing:.09em
}

.contact-page .contact-letter-compose{
  grid-column:2;
  grid-row:2;
  min-height:0;
  padding-top:0
}

.contact-page .contact-letter-form{
  margin:0!important;
  border-top-color:var(--contact-ink)!important
}

.contact-page .contact-letter-form label{
  grid-template-columns:92px minmax(0,1fr)!important;
  gap:18px!important;
  padding:clamp(9px,1.25vh,14px) 0!important;
  border-bottom-color:var(--contact-line)!important
}

.contact-page .contact-letter-form label>span{
  color:var(--contact-muted)!important
}

.contact-page .contact-letter-form input,
.contact-page .contact-letter-form textarea,
.contact-page .contact-letter-form select{
  color:var(--contact-ink)!important;
  font-size:clamp(14px,1.15vw,18px)!important
}

.contact-page .contact-letter-form input::placeholder,
.contact-page .contact-letter-form textarea::placeholder{color:#aaa49b!important}

.contact-page .contact-letter-form select option{
  background:var(--contact-paper)!important;
  color:var(--contact-ink)!important
}

.contact-page .contact-letter-form .message-field{
  padding-bottom:clamp(10px,1.4vh,16px)!important
}

.contact-page .contact-letter-form textarea{
  min-height:clamp(72px,11vh,108px)!important
}

.contact-page .contact-letter-send{
  padding-top:clamp(10px,1.5vh,16px)
}

.contact-page .contact-letter-form .contact-form-status{
  color:var(--contact-muted)!important
}

.contact-page .contact-letter-form button{
  color:var(--contact-ink)!important;
  font-size:clamp(18px,1.55vw,24px)!important
}

.contact-page .contact-letter-form button:hover,
.contact-page .contact-letter-form button:focus-visible{color:var(--contact-signal)!important}

.contact-page-footer{
  box-sizing:border-box;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 clamp(18px,4vw,64px);
  border-top:1px solid var(--contact-line);
  color:var(--contact-muted);
  font:8px/1 monospace;
  letter-spacing:.1em
}

.contact-page-footer a{
  color:inherit;
  text-decoration:none
}

@media(max-width:900px){
  .contact-page-main{
    grid-template-columns:minmax(210px,.62fr) minmax(0,1.38fr);
    column-gap:5vw
  }

  .contact-page-hero h1{font-size:clamp(54px,8vw,86px)}
  .contact-direct-links a{font-size:16px}
}

@media(max-width:620px){
  .contact-page-main{
    min-height:calc(100svh - 38px);
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto minmax(min-content,1fr);
    column-gap:0;
    row-gap:8px;
    padding:78px 16px 8px
  }

  .contact-letter-title{
    grid-column:1;
    grid-row:1
  }

  .contact-letter-title>span{margin-bottom:5px}

  .contact-page-hero h1{
    font-size:11.2vw;
    line-height:.86;
    letter-spacing:-.06em;
    white-space:nowrap
  }

  .contact-page-hero h1 br{display:none}

  .contact-page-intro{
    grid-column:1;
    grid-row:2;
    padding:0
  }

  .contact-page-intro .contact-v15-top{display:none}

  .contact-page-intro .contact-owner-intro{
    max-width:none;
    font-size:15px;
    line-height:1.18
  }

  .contact-page-intro .contact-scope{
    margin-top:7px;
    font-size:7px;
    line-height:1.35
  }

  .contact-direct{
    grid-column:1;
    grid-row:3;
    display:block;
    padding:3px 0 0;
    border-top:1px solid var(--contact-line)
  }

  .contact-direct .contact-direct-label,
  .contact-direct-note{display:none}

  .contact-direct-links{
    display:flex;
    flex-wrap:wrap;
    gap:0 20px
  }

  .contact-direct-links a{
    min-height:44px;
    font:700 11px/1 Arial,Helvetica,sans-serif;
    letter-spacing:-.01em
  }

  .contact-page .contact-letter-compose{
    grid-column:1;
    grid-row:4;
    min-height:0
  }

  .contact-page .contact-letter-form label{
    grid-template-columns:78px minmax(0,1fr)!important;
    gap:12px!important;
    padding:8px 0!important
  }

  .contact-page .contact-letter-form label>span{
    align-self:center;
    font-size:6px!important;
    padding-top:0!important
  }

  .contact-page .contact-letter-form input,
  .contact-page .contact-letter-form textarea,
  .contact-page .contact-letter-form select{
    font-size:16px!important
  }

  .contact-page .contact-letter-form .message-field{
    padding-bottom:8px!important
  }

  .contact-page .contact-letter-form textarea{
    min-height:64px!important;
    height:8vh!important
  }

  .contact-page .contact-letter-send{
    align-items:center;
    gap:12px;
    padding-top:8px
  }

  .contact-page .contact-letter-form .contact-form-status{
    font-size:6px!important;
    line-height:1.25!important
  }

  .contact-page .contact-letter-form button{
    min-height:44px!important;
    font-size:17px!important
  }

  .contact-page-footer{
    height:38px;
    padding:0 16px;
    font-size:7px
  }

  .contact-page-footer a:first-of-type{display:none}
}

@media(max-height:720px) and (min-width:621px){
  .contact-page-main{
    padding-top:82px;
    row-gap:12px
  }

  .contact-page-hero h1{font-size:56px}
  .contact-page-intro .contact-owner-intro{font-size:17px}
  .contact-page-intro .contact-scope{margin-top:10px}
  .contact-direct-note{display:none}
  .contact-page .contact-letter-form label{padding:8px 0!important}
  .contact-page .contact-letter-form textarea{min-height:58px!important}
  .contact-page .contact-letter-send{padding-top:8px}
}

@media(prefers-reduced-motion:reduce){
  .contact-direct-links a{transition:none}
}