:root{--contact-paper:#ead8ba;--contact-paper2:#dfc39a;--contact-red:#b72f31;--contact-ink:#241d17;--contact-black:#11100f}
*{box-sizing:border-box}
body.contact-page{margin:0;background:var(--contact-black);color:#f4eee3;font-family:Georgia,'Times New Roman',serif}
.contact-page .site-header{position:relative;background:#11100f;border-bottom:1px solid rgba(170,124,67,.22)}

.contact-hero{
  min-height:660px;
  display:grid;
  grid-template-columns:minmax(470px,1.08fr) minmax(340px,.92fr);
  gap:clamp(48px,7vw,105px);
  align-items:center;
  padding:76px clamp(34px,8vw,130px) 88px;
  background:
    radial-gradient(circle at 15% 15%,rgba(255,255,255,.035),transparent 24%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    #11100f;
}
.contact-hero-copy{max-width:760px}
.contact-kicker{margin:0 0 12px;color:#d8383a;font-size:12px;font-weight:700;letter-spacing:.18em}
.contact-hero h1{margin:0 0 24px;font-size:clamp(58px,7vw,100px);line-height:.92;font-weight:500;letter-spacing:-.04em}
.contact-hero-copy>p:last-child{max-width:700px;margin:0;color:#d8cec2;font-size:20px;line-height:1.58}

.contact-hero-art{position:relative;min-height:490px;display:flex;align-items:center;justify-content:center}
.contact-folder{position:absolute;width:390px;height:305px;background:#c4a16a;transform:rotate(7deg) translate(12px,22px);clip-path:polygon(3% 3%,97% 0,100% 93%,95% 100%,2% 95%,0 12%);box-shadow:0 24px 44px rgba(0,0,0,.38)}
.contact-book{position:relative;z-index:3;width:min(292px,72%);height:auto;transform:rotate(-5deg);filter:drop-shadow(0 28px 30px rgba(0,0,0,.6))}
.contact-signature{position:absolute;z-index:5;width:170px;right:2%;bottom:4%;transform:rotate(-8deg)}
.contact-note{position:absolute;z-index:6;left:2%;bottom:8%;width:205px;padding:22px 22px 24px;color:#2a2118;background:#dec59d;box-shadow:0 17px 25px rgba(0,0,0,.3);font-family:'Segoe Print','Bradley Hand',cursive;font-size:18px;line-height:1.35;transform:rotate(-4deg)}
.contact-note:before{content:"";position:absolute;top:-11px;left:62px;width:76px;height:23px;background:rgba(181,149,99,.72);transform:rotate(3deg)}

.contact-directory{position:relative;padding:88px clamp(28px,7vw,110px) 104px;color:var(--contact-ink);background:linear-gradient(rgba(247,231,201,.98),rgba(238,214,176,.98))}
.contact-directory:before{content:"";position:absolute;left:0;right:0;top:-24px;height:28px;background:inherit;clip-path:polygon(0 66%,7% 43%,15% 68%,23% 44%,31% 66%,40% 43%,50% 69%,60% 45%,69% 66%,79% 44%,88% 68%,96% 43%,100% 64%,100% 100%,0 100%)}
.contact-directory-heading{max-width:850px;margin:0 auto 54px;text-align:center}
.contact-directory-heading h2{margin:0 0 14px;font-size:clamp(38px,4.6vw,66px);font-weight:500;line-height:1.03}
.contact-directory-heading>p:last-child{margin:0 auto;max-width:650px;color:#695847;font-size:17px;line-height:1.55}

.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:1120px;margin:0 auto}
.contact-card{position:relative;min-height:275px;padding:34px 34px 30px;background:rgba(250,239,218,.82);border:1px solid rgba(105,73,40,.14);box-shadow:0 15px 30px rgba(77,49,24,.1);overflow:hidden}
.contact-card-wide{grid-column:1/-1;min-height:230px}
.contact-card-number{position:absolute;right:22px;top:16px;color:rgba(183,47,49,.14);font-size:58px;font-weight:700;line-height:1}
.contact-card-label{margin:0 0 10px;color:var(--contact-red);font-size:11px;font-weight:700;letter-spacing:.16em}
.contact-card h3{margin:0 0 14px;font-size:clamp(28px,2.5vw,40px);font-weight:500;line-height:1.05}
.contact-card>p:not(.contact-card-label){max-width:610px;margin:0 0 25px;font-size:16px;line-height:1.6}
.contact-card a{display:inline-block;color:#9f2d2f;text-decoration:none;font-size:13px;font-weight:700;border-bottom:1px solid rgba(159,45,47,.35);padding-bottom:4px}
.contact-card a:hover,.contact-card a:focus-visible{color:#6f1f21;outline:none;border-bottom-color:#6f1f21}

.contact-security{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:70px;align-items:center;padding:86px clamp(34px,8vw,130px);background:#11100f}
.contact-security>div:first-child{max-width:790px}
.contact-security h2{margin:0 0 17px;font-size:clamp(36px,4vw,58px);font-weight:500;line-height:1.04}
.contact-security>div:first-child>p:last-child{margin:0;color:#d3c9bd;font-size:17px;line-height:1.62}
.security-note{justify-self:end;width:min(360px,100%);padding:36px 38px;color:#2a2118;background:#dfc69d;box-shadow:0 18px 30px rgba(0,0,0,.32);transform:rotate(2deg)}
.security-note strong{display:block;font-size:24px;line-height:1.15;margin-bottom:8px}
.security-note span{font-size:14px;line-height:1.45}

.contact-closing{padding:82px clamp(28px,8vw,130px) 94px;text-align:center;color:var(--contact-ink);background:linear-gradient(rgba(247,231,201,.98),rgba(238,214,176,.98))}
.contact-closing img{display:block;width:170px;height:auto;margin:0 auto 20px}
.contact-closing blockquote{max-width:960px;margin:0 auto;font-size:clamp(32px,4vw,58px);line-height:1.13}

@media(max-width:980px){
  .contact-hero{grid-template-columns:1fr;text-align:center;padding-top:56px}
  .contact-hero-copy{margin:auto}
  .contact-hero-art{min-height:430px}
  .contact-security{grid-template-columns:1fr}
  .security-note{justify-self:start}
}
@media(max-width:720px){
  .contact-grid{grid-template-columns:1fr}
  .contact-card-wide{grid-column:auto}
}
@media(max-width:560px){
  .contact-hero{padding:42px 20px 68px}
  .contact-hero-art{min-height:360px}
  .contact-folder{width:300px;height:235px}
  .contact-book{width:min(235px,68vw)}
  .contact-signature{width:125px}
  .contact-note{left:0;width:175px;font-size:15px;padding:18px}
  .contact-directory{padding:70px 20px 78px}
  .contact-card{padding:29px 24px 27px}
  .contact-security{padding:68px 20px}
  .contact-closing{padding:68px 20px 76px}
}