body.page-template-page-contact,
body.page-contact {
  background:#f2efe8;
}

.sl-contact {
  --contact-paper:#f2efe8;
  --contact-paper-light:#faf8f3;
  --contact-ink:#0a0a09;
  --contact-muted:rgba(10,10,9,.57);
  --contact-line:rgba(10,10,9,.17);
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:var(--contact-paper);
  color:var(--contact-ink);
}

.sl-contact-nav {
  position:relative;
  z-index:20;
  min-height:82px;
  display:grid;
  grid-template-columns:minmax(140px,1fr) auto;
  align-items:center;
  gap:30px;
  padding:0 3.2vw;
  border-bottom:1px solid var(--contact-line);
  background:rgba(242,239,232,.72);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}

.sl-contact-nav__brand { font-size:15px; letter-spacing:-.02em; }
.sl-contact-nav__links {
  display:flex;
  align-items:center;
  gap:clamp(18px,2.3vw,42px);
  font-size:14px;
  white-space:nowrap;
}
.sl-contact-nav__links a { position:relative; padding:8px 0; }
.sl-contact-nav__links a::after {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:2px;
  height:1px;
  background:currentColor;
  transition:right .25s ease;
}
.sl-contact-nav__links a:hover::after,
.sl-contact-nav__links a.is-current::after { right:0; }

.sl-contact-hero {
  position:relative;
  z-index:1;
  min-height:calc(100vh - 82px);
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(560px,1.08fr);
  gap:clamp(54px,7vw,130px);
  align-items:center;
  padding:clamp(72px,7vw,120px) clamp(28px,5.5vw,105px) clamp(88px,8vw,132px);
  isolation:isolate;
}

.sl-contact-hero::before {
  content:"";
  position:absolute;
  z-index:-3;
  inset:0;
  background:
    radial-gradient(ellipse 62% 66% at 23% 43%,rgba(255,255,255,.99) 0%,rgba(255,255,255,.80) 38%,rgba(255,255,255,.17) 72%,transparent 87%),
    linear-gradient(132deg,#f7f4ed 0%,#ece7dc 100%);
}

.sl-contact-glow {
  position:absolute;
  z-index:-2;
  pointer-events:none;
  border-radius:50%;
  filter:blur(78px);
  opacity:.42;
}
.sl-contact-glow--one {
  width:52vw;
  height:52vw;
  right:-16vw;
  top:-18vw;
  background:rgba(187,150,120,.28);
}
.sl-contact-glow--two {
  width:44vw;
  height:44vw;
  left:20vw;
  bottom:-29vw;
  background:rgba(132,78,82,.17);
}

.sl-contact-copy { align-self:center; max-width:760px; }
.sl-contact-eyebrow {
  margin:0 0 clamp(28px,4.5vw,72px);
  font-size:11px;
  letter-spacing:.19em;
  text-transform:uppercase;
}
.sl-contact-copy h1 {
  margin:0;
  font-size:clamp(58px,7.7vw,142px);
  line-height:.82;
  letter-spacing:-.075em;
  font-weight:700;
  max-width:8.7ch;
}
.sl-contact-copy h1 em {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.07em;
}
.sl-contact-intro {
  width:min(510px,92%);
  margin:clamp(38px,4.2vw,66px) 0 0;
  font-size:clamp(17px,1.25vw,21px);
  line-height:1.5;
  letter-spacing:-.02em;
}

/* MacBook shell */
.sl-macbook {
  position:relative;
  width:min(100%,860px);
  justify-self:end;
  filter:drop-shadow(0 28px 30px rgba(23,19,14,.12));
}

.sl-macbook-screen {
  position:relative;
  padding:12px 12px 15px;
  border-radius:20px 20px 8px 8px;
  background:linear-gradient(145deg,#242424 0%,#080808 68%,#1d1d1d 100%);
  border:1px solid rgba(0,0,0,.75);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 10px 38px rgba(0,0,0,.14);
}

.sl-macbook-camera {
  position:absolute;
  z-index:5;
  top:5px;
  left:50%;
  width:5px;
  height:5px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#050505;
  box-shadow:0 0 0 1px #242424, inset 0 0 1px rgba(89,130,154,.7);
}

.sl-mail-app {
  min-height:570px;
  overflow:hidden;
  border-radius:10px 10px 4px 4px;
  background:#f7f7f5;
  color:#171717;
  border:1px solid rgba(255,255,255,.08);
}

.sl-mail-titlebar {
  height:38px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 14px;
  background:rgba(230,230,228,.96);
  border-bottom:1px solid #c9c9c5;
  font-size:11px;
}

.sl-mail-traffic { display:flex; gap:7px; align-items:center; }
.sl-mail-traffic span {
  display:block;
  width:11px;
  height:11px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.08);
}
.sl-mail-traffic span:nth-child(1){ background:#ff5f57; }
.sl-mail-traffic span:nth-child(2){ background:#febc2e; }
.sl-mail-traffic span:nth-child(3){ background:#28c840; }
.sl-mail-title { font-weight:600; letter-spacing:-.01em; }
.sl-mail-status { justify-self:end; color:#777; font-size:10px; }

.sl-mail-toolbar {
  min-height:44px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 14px;
  background:#eeeeec;
  border-bottom:1px solid #d0d0cc;
  color:#555;
}
.sl-mail-toolbar__left,
.sl-mail-toolbar__right { display:flex; align-items:center; gap:7px; }
.sl-mail-toolbar__right { justify-self:end; }
.sl-mail-toolbar__label { font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:#777; }
.sl-mail-icon {
  width:27px;
  height:25px;
  display:grid;
  place-items:center;
  border:1px solid #d0d0cd;
  border-radius:5px;
  background:#f7f7f5;
  font-size:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
}

.sl-contact-formwrap {
  position:relative;
  width:100%;
  background:#fbfbf9;
}

.sl-contact-form { display:block; }

.sl-mail-row {
  min-height:48px;
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:0 24px;
  border-bottom:1px solid #dededb;
  background:#fbfbf9;
}
.sl-mail-row--fixed { background:#f7f7f5; }
.sl-mail-row__label {
  font-size:12px;
  color:#767676;
  text-align:right;
  white-space:nowrap;
}
.sl-mail-recipient {
  display:inline-flex;
  width:max-content;
  align-items:center;
  padding:4px 10px;
  border-radius:13px;
  background:#e4e7eb;
  color:#252525;
  font-size:13px;
}
.sl-mail-row input {
  min-width:0;
  width:100%;
  padding:12px 0;
  border:0;
  outline:0;
  background:transparent;
  color:#151515;
  font-size:14px;
  line-height:1.2;
}
.sl-mail-row input::placeholder { color:#aaa; }

.sl-mail-body {
  position:relative;
  min-height:250px;
  padding:24px 30px 18px;
  background:#fff;
}
.sl-mail-body textarea {
  display:block;
  width:100%;
  min-height:230px;
  padding:0;
  border:0;
  outline:0;
  resize:vertical;
  background:transparent;
  color:#1a1a1a;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
}
.sl-mail-body textarea::placeholder { color:#aaa; }

.sl-mail-sendbar {
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:10px 18px 10px 24px;
  border-top:1px solid #dededb;
  background:#f1f1ef;
}
.sl-mail-signature {
  color:#8b8b89;
  font-size:10px;
  letter-spacing:.02em;
}

.sl-contact-submit {
  min-width:112px;
  min-height:40px;
  border:1px solid #151515;
  border-radius:8px;
  background:#151515;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:0 18px;
  cursor:pointer;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.sl-contact-submit i {
  font-style:normal;
  font-size:16px;
  transition:transform .25s ease;
}
.sl-contact-submit:hover {
  background:#fff;
  color:#151515;
  transform:translateY(-1px);
}
.sl-contact-submit:hover i { transform:translate(3px,-3px); }

.sl-macbook-chin {
  position:relative;
  height:24px;
  margin:0 2.4%;
  display:grid;
  place-items:center;
  border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#d7d7d4 0%,#b9b9b6 100%);
  border:1px solid #a8a8a5;
  border-top:0;
  color:#6f6f6d;
  font-size:8px;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:inset 0 1px rgba(255,255,255,.65);
}
.sl-macbook-base {
  position:relative;
  width:112%;
  height:16px;
  left:-6%;
  margin-top:-1px;
  border-radius:2px 2px 44% 44%;
  background:linear-gradient(180deg,#d5d5d2 0%,#a7a7a4 72%,#8c8c89 100%);
  border-top:1px solid rgba(255,255,255,.8);
  box-shadow:0 5px 6px rgba(0,0,0,.10);
}
.sl-macbook-base::before {
  content:"";
  position:absolute;
  top:0;
  left:42%;
  width:16%;
  height:5px;
  border-radius:0 0 7px 7px;
  background:#a1a19e;
  box-shadow:inset 0 1px rgba(255,255,255,.55);
}

.sl-contact-honeypot {
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

.sl-contact-notice {
  margin:0;
  padding:16px 24px;
  border-bottom:1px solid #d4d4d1;
  background:#fffaf0;
}
.sl-contact-notice span {
  display:block;
  margin-bottom:5px;
  font-size:9px;
  letter-spacing:.17em;
}
.sl-contact-notice p { margin:0; font-size:12px; line-height:1.45; }
.sl-contact-notice.is-success { background:#f2f7ef; }

.sl-contact-footer {
  position:relative;
  z-index:3;
  min-height:150px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:40px;
  padding:36px 3.2vw;
  border-top:1px solid var(--contact-line);
  background:#ebe6dc;
  font-size:12px;
}
.sl-contact-footer__brand {
  font-size:15px;
  letter-spacing:-.02em;
}
.sl-contact-footer__brand span {
  display:block;
  margin-top:5px;
  color:var(--contact-muted);
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.sl-contact-footer__socials {
  display:flex;
  gap:clamp(24px,3.2vw,52px);
  align-items:center;
  text-transform:uppercase;
  letter-spacing:.09em;
  white-space:nowrap;
}
.sl-contact-footer__socials a,
.sl-contact-footer__socials span { position:relative; }
.sl-contact-footer__socials a::after {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-4px;
  height:1px;
  background:currentColor;
  transition:right .25s ease;
}
.sl-contact-footer__socials a:hover::after { right:0; }
.sl-contact-footer__socials .is-unset {
  color:rgba(10,10,9,.40);
  cursor:default;
}
.sl-contact-footer__meta { text-align:right; color:var(--contact-muted); }

@media (max-width:1180px) {
  .sl-contact-hero {
    grid-template-columns:1fr;
    gap:72px;
  }
  .sl-contact-copy h1 { max-width:10ch; }
  .sl-macbook { justify-self:center; width:min(100%,820px); }
}

@media (max-width:760px) {
  .sl-contact-nav {
    min-height:72px;
    grid-template-columns:1fr;
    gap:10px;
    padding:14px 20px 12px;
  }
  .sl-contact-nav__links {
    gap:20px;
    overflow-x:auto;
    padding-bottom:2px;
    font-size:11px;
    -ms-overflow-style:none;
    scrollbar-width:none;
  }
  .sl-contact-nav__links::-webkit-scrollbar { display:none; }
  .sl-contact-hero {
    min-height:auto;
    padding:62px 20px 78px;
    gap:56px;
  }
  .sl-contact-copy h1 { font-size:clamp(54px,18vw,90px); }
  .sl-contact-intro { width:100%; }

  .sl-macbook-screen { padding:9px 8px 11px; border-radius:14px 14px 6px 6px; }
  .sl-mail-app { min-height:510px; }
  .sl-mail-titlebar { padding:0 10px; }
  .sl-mail-status { display:none; }
  .sl-mail-toolbar { padding:0 10px; }
  .sl-mail-toolbar__left span:nth-child(n+2),
  .sl-mail-toolbar__right span:last-child { display:none; }
  .sl-mail-row {
    grid-template-columns:58px minmax(0,1fr);
    padding:0 13px;
  }
  .sl-mail-row__label { font-size:10px; }
  .sl-mail-body { padding:20px 18px 14px; }
  .sl-mail-body textarea { min-height:205px; font-size:15px; }
  .sl-mail-sendbar { padding:9px 12px 9px 17px; }
  .sl-mail-signature { display:none; }
  .sl-contact-submit { margin-left:auto; }
  .sl-macbook-base { height:12px; }

  .sl-contact-footer {
    grid-template-columns:1fr;
    gap:30px;
    padding:34px 20px;
  }
  .sl-contact-footer__socials {
    flex-wrap:wrap;
    gap:18px 28px;
  }
  .sl-contact-footer__meta { text-align:left; }
}

@media (prefers-reduced-motion:reduce) {
  .sl-contact *, .sl-contact *::before, .sl-contact *::after {
    scroll-behavior:auto !important;
    transition:none !important;
  }
}
