/* Contact page: built from the existing Leckerbiss paper, olive and brown system. */
.contact-hero .hero-title{
  align-items:center;
}
.contact-hero .hero-subtitle,
.contact-hero .hero-kicker{
  display:block;
}
.contact-hero .hero-subtitle.text-split .word{
  display:inline-block;
}
.contact-hero .hero-subtitle.text-split .char{
  display:inline-block;
  opacity:0;
  transition:opacity .82s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--char-index, 0) * 70ms);
  will-change:opacity;
}
.contact-hero .hero-subtitle.is-revealed .char{
  opacity:1;
}

.contact-visual{
  background:var(--paper);
}
.contact-visual::before{
  display:none;
}
.contact-visual-inner{
  position:relative;
  z-index:1;
  height:100%;
  width:100%;
  padding:0;
}
.contact-visual-card{
  width:100%;
  height:100%;
  min-height:100%;
}
.contact-visual-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  filter:none;
  opacity:0;
  transform:scale(1.06);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.contact-visual.is-revealed .contact-visual-image{
  opacity:1;
  transform:scale(1);
}

.contact-section{
  padding:150px 0 154px;
  background:var(--paper);
}
.contact-intro{
  width:min(1320px,calc(100vw - 72px));
  margin:0 auto 72px;
  display:grid;
  grid-template-columns:58% 42%;
  gap:0;
  align-items:end;
}
.contact-intro-copy{
  max-width:none;
  padding-right:48px;
}
.contact-intro-text{
  width:100%;
  max-width:560px;
  justify-self:end;
  padding-left:36px;
}
.contact-eyebrow,
.contact-card-label{
  margin:0;
  font-size:12px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.contact-eyebrow{
  margin-bottom:22px;
  color:var(--accent-active);
}
.contact-intro h2{
  margin:0;
  max-width:none;
  white-space:nowrap;
  font-family:"Marcellus",Georgia,"Times New Roman",serif;
  font-size:62px;
  line-height:.98;
  font-weight:400;
  letter-spacing:-2.6px;
}
.contact-lead{
  margin:0;
  max-width:560px;
  font-size:17px;
  line-height:1.68;
  color:var(--muted);
}
.contact-layout{
  width:min(1320px,calc(100vw - 72px));
  margin:0 auto;
  position:relative;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:58% 42%;
}
/* Full-width outer rules; the content itself stays inside the 1320px grid. */
.contact-layout::before{
  content:"";
  position:absolute;
  z-index:5;
  top:-1px;
  bottom:-1px;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  pointer-events:none;
}
.contact-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-right:1px solid var(--line);
  min-width:0;
}
.contact-detail-card{
  min-height:250px;
  padding:38px 36px 40px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.contact-detail-card:nth-child(2){border-right:0}
.contact-hours-card{
  grid-column:1 / -1;
  min-height:auto;
  padding:38px 0 0;
  border-right:0;
  border-bottom:0;
}
.contact-hours-card > .contact-card-label{
  padding:0 36px;
}
.contact-card-label{color:var(--accent-active);margin-bottom:18px}
.contact-detail-card h3,
.contact-detail-main{
  margin:0 0 28px;
  font-family:"Marcellus",Georgia,"Times New Roman",serif;
  font-size:34px;
  line-height:1.15;
  font-weight:400;
  letter-spacing:-1px;
}
.contact-detail-main{display:block}
.contact-text-link{
  display:block;
  width:100%;
  align-self:stretch;
  box-sizing:border-box;
  margin-top:auto;
  padding-bottom:5px;
  border-bottom:1px solid currentColor;
  font-size:14px;
  line-height:1.5;
  font-weight:500;
  transition:color .2s ease,border-color .2s ease;
}
.contact-text-link:hover{color:var(--accent);border-color:var(--accent)}
.contact-hours{
  width:100%;
  flex:1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:1fr;
  align-items:stretch;
  gap:0;
  border-top:1px solid var(--line);
}
.contact-hours p{
  margin:0;
  min-height:110px;
  height:100%;
  padding:22px 24px 24px 36px;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.contact-hours p:not(:first-child){padding-left:30px}
.contact-hours p:last-child{border-right:0}
.contact-hours span{font-size:13px;color:var(--muted)}
.contact-hours strong{font-size:14px;line-height:1.55;font-weight:600}
.contact-form-panel{
  position:relative;
  padding:40px clamp(28px,3.2vw,54px) 42px;
  background:#5a2b12;
  color:#f2efe9;
}
/* Continue the brown field from the constrained content grid to the viewport edge. */
.contact-form-panel::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:100%;
  width:50vw;
  background:#5a2b12;
  pointer-events:none;
}
.contact-form-copy{
  display:grid;
  grid-template-columns:1fr;
  row-gap:14px;
  width:100%;
  max-width:560px;
  margin-bottom:28px;
}
.contact-form-copy .contact-card-label{
  color:rgba(242,239,233,.68);
  margin:0;
}
.contact-form-copy h2{
  margin:0;
  max-width:560px;
  font-family:"Marcellus",Georgia,"Times New Roman",serif;
  font-size:40px;
  line-height:1;
  font-weight:400;
  letter-spacing:-1.8px;
}
.contact-form-copy p:last-child{
  margin:0;
  max-width:460px;
  font-size:15px;
  line-height:1.65;
  color:rgba(242,239,233,.72);
}
.contact-form{display:grid;gap:18px;width:100%;max-width:560px}
.contact-field-row{display:grid;grid-template-columns:1fr;gap:22px}
.contact-field{display:grid;gap:10px}
.contact-field > span{
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.contact-field small{font-size:10px;font-weight:400;opacity:.68;text-transform:none;letter-spacing:0}
.contact-field input,
.contact-field textarea{
  width:100%;
  border:0;
  border-bottom:1px solid rgba(242,239,233,.38);
  border-radius:0;
  padding:14px 0 15px;
  background:transparent;
  color:#fff;
  font:500 16px/1.5 "Commissioner",Arial,Helvetica,sans-serif;
  outline:none;
  transition:border-color .2s ease,background-color .2s ease;
}
.contact-field textarea{min-height:112px;resize:vertical}
.contact-field input::placeholder,
.contact-field textarea::placeholder{color:rgba(242,239,233,.45)}
.contact-field input:focus,
.contact-field textarea:focus{border-color:#f2efe9}
.contact-field input[aria-invalid="true"],
.contact-field textarea[aria-invalid="true"]{border-color:#e4a787}
.contact-form-footer{
  margin-top:2px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}
.contact-form-note{
  margin:0;
  max-width:300px;
  color:rgba(242,239,233,.58);
  font-size:12px;
  line-height:1.5;
}
.contact-submit{flex:0 0 auto}
.contact-form-status{
  min-height:20px;
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:#f2efe9;
}

@media(max-width:1100px){
  .contact-intro{grid-template-columns:1fr;gap:24px}
  .contact-intro h2{white-space:normal}
  .contact-intro-copy,
  .contact-intro-text{max-width:none;padding:0}
  .contact-layout{grid-template-columns:1fr}
  .contact-details{border-right:0;border-bottom:1px solid var(--line)}
  .contact-form-panel::after{
    left:50%;
    width:100vw;
    transform:translateX(-50%);
    z-index:-1;
  }
  .contact-form-panel{isolation:isolate}
}

@media(max-width:780px){
  .contact-hero{height:600px}
  .contact-section{padding:88px 0}
  .contact-visual{height:75vh;min-height:420px}
  .contact-visual-inner{padding:0}
  .contact-visual-card{
    width:100%;
    height:100%;
    min-height:100%;
  }
  .contact-visual-image{width:100%;height:100%}
  .contact-intro{
    width:calc(100vw - 44px);
    margin-bottom:48px;
    grid-template-columns:1fr;
    gap:20px;
  }
  .contact-intro-copy,
  .contact-intro-text{padding:0;max-width:none}
  .contact-intro-text{display:block}
  .contact-eyebrow{margin-bottom:18px}
  .contact-intro h2{font-size:42px;line-height:1.02;letter-spacing:-1.6px}
  .contact-lead{font-size:16px}
  .contact-layout{width:calc(100vw - 44px);grid-template-columns:1fr}
  .contact-details{grid-template-columns:1fr}
  .contact-detail-card,
  .contact-detail-card:nth-child(2){
    grid-column:auto;
    min-height:210px;
    padding:32px 22px 34px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .contact-hours-card{
    padding:32px 0 0;
    border-bottom:0;
  }
  .contact-hours-card > .contact-card-label{padding:0 22px}
  .contact-detail-card h3,
  .contact-detail-main{font-size:30px}
  .contact-hours{grid-template-columns:1fr 1fr}
  .contact-hours p,
  .contact-hours p:not(:first-child){
    min-height:104px;
    height:auto;
    padding:20px 16px 22px 22px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .contact-hours p:nth-child(2n){padding-left:16px;border-right:0}
  .contact-hours p:nth-child(n+3){border-bottom:0}
  .contact-form-panel{padding:46px 22px 48px}
  .contact-form-copy{margin-bottom:38px}
  .contact-form-copy .contact-card-label{margin-bottom:18px}
  .contact-form-copy h2{font-size:38px;letter-spacing:-1.3px}
  .contact-form-copy p:last-child{margin-top:16px}
  .contact-field-row{grid-template-columns:1fr}
  .contact-form-footer{align-items:flex-start;flex-direction:column}
  .contact-submit{width:100%}
}

@media(max-width:430px){
  .contact-hours{grid-template-columns:1fr}
  .contact-hours p,
  .contact-hours p:not(:first-child),
  .contact-hours p:nth-child(2n){
    height:auto;
    padding:18px 22px;
    min-height:auto;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .contact-hours p:last-child{border-bottom:0}
}

@media(prefers-reduced-motion:reduce){
  .contact-hero .hero-subtitle.text-split .char,
  .contact-visual-image{
    opacity:1;
    transition:none;
    transform:none;
  }
}

/* Contact form copy stays in one visible vertical column. */
.contact-form-copy h2.text-split .char{
  opacity:1 !important;
  transition:none !important;
}

/* Exact continuation of the upper container grid. */
@media (min-width:1101px){
  .contact-detail-card:first-child{
    padding-left:0;
  }
  .contact-hours-card > .contact-card-label{
    padding-left:0;
  }
  .contact-hours p:first-child{
    padding-left:0;
  }
  .contact-form-panel{
    padding-left:36px;
    padding-right:36px;
  }
  .contact-form-copy,
  .contact-form{
    max-width:100%;
  }
}


/* Two left-side horizontal rules continue from the content grid to the viewport edge. */
@media (min-width:1101px){
  .contact-layout{
    --contact-left-gutter:max(36px, calc((100vw - 1320px) / 2));
  }
  .contact-hours-card,
  .contact-hours{
    position:relative;
  }
  .contact-hours-card::before,
  .contact-hours::before{
    content:"";
    position:absolute;
    z-index:6;
    left:calc(0px - var(--contact-left-gutter));
    width:calc(100% + var(--contact-left-gutter));
    height:1px;
    background:var(--line);
    pointer-events:none;
  }
  .contact-hours-card::before{top:-1px}
  .contact-hours::before{top:-1px}
}