/* SECTION 7 · CONTACT (State your case. We'll write the brief.)
   Locked 2026-10-04 from the contact rounds: special delivery. The envelope is CSS (airmail chevrons toned to oxblood and
   dusty navy, cream paper, a soft slat shadow across it); stamps and the SPECIAL DELIVERY stamp are keyed renders; the
   postmark is inline SVG. Fields are real inputs set in mono on ruled lines. */

#cta.s7 { position:relative; overflow:hidden; background:#EFE6D6; color:#1c1917; padding:104px 0 96px; border:0; }
.s7-paperbg { position:absolute; inset:0; margin:0; }
.s7-paperbg img { width:100%; height:100%; object-fit:cover; display:block; transform:scaleX(-1); }
.s7-inner { position:relative; z-index:1; max-width:1040px; margin:0 auto; }

.s7-head { text-align:center; }
.s7-kicker { display:block; font-family:var(--font-ui); font-size:12px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:#1c1917; margin-bottom:24px; }
.s7-h2 { margin:0 auto; max-width:none; }
.s7-h2-img { display:block; width:100%; max-width:600px; height:auto; margin:0 auto; }
.s7-terms { font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:#1c1917; margin:30px 0 0; }
.s7-terms span { margin:0 10px; color:#B8933F; }

/* the envelope */
.s7-env { --ox:#7A1F1F; --nv:#2F4157; position:relative; margin:56px auto 0; max-width:960px; padding:14px; border-radius:3px;
  background:repeating-linear-gradient(135deg, var(--ox) 0 26px, #F3EAD8 26px 40px, var(--nv) 40px 66px, #F3EAD8 66px 80px);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 2px 3px rgba(40,25,10,.18), 0 22px 40px -12px rgba(40,25,10,.38), 0 50px 80px -30px rgba(40,25,10,.3); }
.s7-env::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:3px; mix-blend-mode:multiply; opacity:.5;
  background:repeating-linear-gradient(-32deg, transparent 0 70px, rgba(90,60,25,.16) 90px 120px, transparent 140px 170px); filter:blur(6px); }
.s7-paper { position:relative; background:#F3EAD8; padding:46px 56px 44px;
  background-image:radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 60%), radial-gradient(ellipse at 90% 100%, rgba(150,110,60,.12), transparent 55%); }
.s7-paper::before { content:""; position:absolute; inset:0; background:url(../images/v3/s2/paper-p02.jpg) center/cover; opacity:.22; mix-blend-mode:multiply; pointer-events:none; }

/* postage, top right */
.s7-post { position:relative; z-index:2; display:flex; justify-content:flex-end; align-items:flex-start; height:132px; margin-bottom:6px; }
.s7-stamps { display:flex; gap:10px; }
.s7-stamps img { width:84px; height:auto; display:block; filter:drop-shadow(0 1px 1px rgba(40,25,10,.25)); }
.s7-stamps img:nth-child(1) { transform:rotate(-1.5deg); } .s7-stamps img:nth-child(3) { transform:rotate(1.2deg); }
.s7-postmark { position:absolute; right:186px; top:6px; width:300px; height:auto; z-index:3; opacity:.82; transform:rotate(-6deg); pointer-events:none; }
.s7-special { position:absolute; z-index:3; right:58px; top:170px; width:230px; height:auto; transform:rotate(-8deg); opacity:.92; pointer-events:none; mix-blend-mode:multiply; }

/* the address block = the form */
.s7 .s7-form { position:relative; z-index:1; max-width:600px; margin:0; padding:0; display:block; }
.s7-row { display:grid; grid-template-columns:170px 1fr; align-items:end; gap:0 14px; padding:12px 0 0; }
.s7-label { font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:#1c1917; padding-bottom:7px; white-space:nowrap; }
.s7-input { width:100%; border:0; border-bottom:1px solid rgba(28,25,23,.55); background:transparent; border-radius:0; padding:6px 2px 6px;
  font-family:var(--font-mono); font-size:15px; letter-spacing:0.04em; color:#1c1917; outline:none; box-shadow:none; }
.s7-input:focus { border-bottom-color:#7A1F1F; background:rgba(184,147,63,.07); }
.s7-row-way { align-items:start; }
.s7-row-way .s7-label { padding-top:8px; }
.s7-way { resize:vertical; min-height:96px; line-height:32px; padding:0 2px; border-bottom:0;
  background:repeating-linear-gradient(to bottom, transparent 0 31px, rgba(28,25,23,.55) 31px 32px); background-attachment:local; }
.s7-send { display:flex; align-items:center; gap:24px; margin-top:30px; padding-left:184px; flex-wrap:wrap; }
.s7-submit { font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:#F3EAD8; background:#1c1917;
  border:0; padding:15px 34px; cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.25); }
.s7-submit:hover { background:#7A1F1F; }
.s7-submit:disabled { opacity:.6; cursor:default; }
.s7-followup { font-family:var(--font-body); font-style:italic; font-size:15px; color:rgba(28,25,23,.8); margin:0; }
.s7-followup a { color:inherit; }
.s7-legal { text-align:center; font-family:var(--font-body); font-size:13px; color:rgba(28,25,23,.65); margin:26px 0 0; }
.s7-legal a { color:inherit; }

/* motion: the stamp lands when the envelope scrolls in, and again on a successful send */
@keyframes s7-thump { 0% { opacity:0; transform:rotate(-14deg) scale(1.9); } 60% { opacity:.95; transform:rotate(-7deg) scale(.96); } 100% { opacity:.92; transform:rotate(-8deg) scale(1); } }
.s7 .s7-special { opacity:0; }
.s7.is-in .s7-special { animation:s7-thump .42s cubic-bezier(.2,.9,.3,1.2) .35s both; }
.s7.is-sent .s7-special { animation:s7-thump .42s cubic-bezier(.2,.9,.3,1.2) both; }
@media (prefers-reduced-motion: reduce) { .s7 .s7-special, .s7.is-in .s7-special, .s7.is-sent .s7-special { animation:none; opacity:.92; } }

@media (max-width:900px) {
  .s7-special { width:180px; top:150px; right:30px; }
  .s7-form { max-width:none; }
}
@media (max-width:768px) {
  #cta.s7 { padding:72px 0 72px; }
  .s7-env { padding:10px; margin-top:40px;
    background:repeating-linear-gradient(135deg, var(--ox) 0 18px, #F3EAD8 18px 28px, var(--nv) 28px 46px, #F3EAD8 46px 56px); }
  .s7-paper { padding:24px 20px 28px; }
  .s7-post { height:96px; }
  .s7-stamps img { width:56px; } .s7-stamps { gap:6px; }
  .s7-postmark { width:210px; right:110px; top:2px; }
  .s7-special { width:128px; top:auto; bottom:22px; right:14px; }
  .s7-row { grid-template-columns:1fr; padding-top:14px; }
  .s7-label { padding-bottom:2px; font-size:11px; }
  .s7-send { padding-left:0; padding-right:120px; }
  .s7-terms span { margin:0 5px; }
  .s7-terms { font-size:10px; letter-spacing:0.14em; line-height:2; }
}

/* fixes after the first look (2026-10-04) */
.s7 .s7-followup { text-transform:none; text-align:left; letter-spacing:0; font-size:15px; }
.s7 .s7-form { max-width:540px; }
.s7-special { top:250px; right:40px; width:200px; }
.s7-submit { white-space:nowrap; }
@media (max-width:768px) {
  .s7 .s7-form { max-width:none; }
  .s7-paper { padding-bottom:128px; }
  .s7-send { padding-right:0; flex-direction:column; align-items:flex-start; gap:14px; }
  .s7-submit { padding:14px 30px; }
  .s7-special { top:auto; bottom:20px; right:16px; width:132px; }
  .s7-postmark { width:170px; right:150px; top:4px; }
  .s7-terms span { display:block; height:0; overflow:hidden; margin:0; }
}
@media (max-width:768px) { .s7-postmark { width:160px; right:118px; } }
/* Davis: just a centred SEND IT, no write-to-Sasha line; the followup only shows send status */
.s7 .s7-form { max-width:none; }
.s7-row { max-width:540px; }
.s7-send { padding:0; margin-top:40px; flex-direction:column; align-items:center; gap:14px; }
.s7 .s7-followup { text-align:center; }
.s7 .s7-followup:empty { display:none; }
@media (max-width:768px) { .s7-row { max-width:none; } .s7-send { align-items:center; } .s7-paper { padding-bottom:150px; } }