/* 06. contact — form + rotary phone (ref: image 15 / mobile image 32) */
#contact{position:relative;width:100%;height:100svh;overflow:hidden;isolation:isolate}
#contact .stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--stage-w);height:var(--stage-h);z-index:2}
#contact .stage > *{position:absolute}
#gl-contact{inset:0;width:100%;height:100%;z-index:3;opacity:0;transition:opacity .9s ease .1s;touch-action:pan-y}
#gl-contact.ready{opacity:1}
#contact.hot #gl-contact{cursor:pointer}

#contact .eyebrow{left:calc(150 * var(--u));top:calc(118 * var(--u));z-index:5}
#contact .toprule{left:calc(150 * var(--u));top:calc(213 * var(--u));width:calc(50 * var(--u));
  height:calc(1.6 * var(--u));background:#2A2119}
#contact .intro{left:calc(150 * var(--u));top:calc(242 * var(--u));font-family:var(--mono);
  font-size:max(var(--mt,0px), calc(15 * var(--u)));line-height:max(calc(var(--mt,0px) * 1.42), calc(25.5 * var(--u)));letter-spacing:0;color:#3D3226;white-space:nowrap}

/* form */
#contact .form{left:calc(150 * var(--u));top:calc(363 * var(--u));width:calc(543 * var(--u));
  height:calc(420 * var(--u));z-index:5}
#contact .form > *{position:absolute}
#contact .f input,#contact .f textarea{display:block;width:100%;height:100%;resize:none;
  background:rgba(255,250,242,.16);border:calc(1.3 * var(--u)) solid rgba(84,62,40,.36);
  border-radius:calc(12 * var(--u));padding:0 calc(27 * var(--u));outline:none;
  font-family:var(--mono);font-size:max(var(--mt,0px), calc(14 * var(--u)));letter-spacing:.01em;color:#2A2119;
  transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease}
#contact .f textarea{padding-top:calc(24 * var(--u));line-height:1.6}
#contact .f input::placeholder,#contact .f textarea::placeholder{color:#3E3329;opacity:.92}
#contact .f input:focus,#contact .f textarea:focus{border-color:#A8582F;background:rgba(255,250,242,.42);
  box-shadow:0 0 0 calc(3 * var(--u)) rgba(168,88,47,.12)}
#contact .f.bad input,#contact .f.bad textarea{border-color:#C8452A}
#contact .f-name{left:0;top:0;width:calc(264 * var(--u));height:calc(59 * var(--u))}
#contact .f-mail{left:calc(276 * var(--u));top:0;width:calc(267 * var(--u));height:calc(59 * var(--u))}
#contact .f-subj{left:0;top:calc(73 * var(--u));width:100%;height:calc(59 * var(--u))}
#contact .f-msg{left:0;top:calc(147 * var(--u));width:100%;height:calc(139 * var(--u))}
#contact .send{left:0;top:calc(310 * var(--u));width:calc(305 * var(--u));height:calc(62 * var(--u));
  border:0;border-radius:100px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(34 * var(--u)) 0 calc(35 * var(--u));
  background:linear-gradient(180deg,#B5754F 0%,#A3623F 100%);color:#FBEFE4;
  font-family:var(--mono);font-size:max(var(--mt,0px), calc(15.5 * var(--u)));letter-spacing:.06em;
  box-shadow:0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(140,80,44,.18);
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s ease,background .35s ease}
#contact .send svg{width:calc(26 * var(--u));height:calc(13 * var(--u));transition:transform .35s cubic-bezier(.2,.8,.3,1)}
@media (hover:hover) and (pointer:fine){ #contact .send:hover{background:linear-gradient(180deg,#A86842 0%,#93552F 100%)} }
#contact .send:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#contact .send[disabled]{opacity:.7;cursor:progress}
#contact .reply{left:0;top:calc(396 * var(--u));display:flex;align-items:center;gap:calc(10 * var(--u));
  font-family:var(--mono);font-size:max(var(--mt,0px), calc(13 * var(--u)));letter-spacing:.01em;color:#3D3226;white-space:nowrap}
#contact .reply svg{width:calc(17 * var(--u));height:calc(16 * var(--u))}
#contact .status{left:calc(330 * var(--u));top:calc(322 * var(--u));width:calc(220 * var(--u));
  font-family:var(--hand);font-size:calc(22 * var(--u));line-height:1.1;color:#A8432A;
  opacity:0;transform:rotate(-4deg) translateY(calc(6 * var(--u)));transition:opacity .4s ease,transform .5s ease}
#contact .status.on{opacity:1;transform:rotate(-4deg)}

/* hand-drawn notes around the phone */
#contact .n-pick{left:calc(752 * var(--u));top:calc(158 * var(--u));font-size:calc(25 * var(--u));
  line-height:1.12;transform:rotate(-16deg);transform-origin:0 100%;z-index:5}
#contact .a-pick{left:calc(846 * var(--u));top:calc(250 * var(--u));width:calc(60 * var(--u));height:calc(70 * var(--u));z-index:5}
#contact .n-good{left:calc(1370 * var(--u));top:calc(250 * var(--u));font-size:calc(25 * var(--u));
  line-height:1.12;transform:rotate(-15deg);transform-origin:0 100%;z-index:5}
#contact .heart-good{left:calc(1483 * var(--u));top:calc(340 * var(--u));width:calc(30 * var(--u));height:calc(28 * var(--u));z-index:5}
#contact .a-good{left:calc(1382 * var(--u));top:calc(390 * var(--u));width:calc(60 * var(--u));height:calc(100 * var(--u));z-index:5}
#contact .pop-1{left:calc(1144 * var(--u));top:calc(193 * var(--u));width:calc(70 * var(--u));height:calc(80 * var(--u));z-index:5;stroke-width:2.8}
#contact .pop-2{left:calc(1410 * var(--u));top:calc(546 * var(--u));width:calc(60 * var(--u));height:calc(80 * var(--u));z-index:5;stroke-width:2.8}
#contact .ring .pop-1,#contact .ring .pop-2{animation:pop .5s ease-in-out 3}
@keyframes pop{50%{transform:scale(1.18)}}

/* contact strip */
#contact .divider{left:calc(685 * var(--u));top:calc(753 * var(--u));width:calc(837 * var(--u));
  height:calc(1.2 * var(--u));background:rgba(60,44,30,.22)}
#contact .info{left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:5;
  font-family:var(--mono);color:#2A2119}
#contact .info > *{position:absolute;pointer-events:auto}
#contact .info b{display:block;font-weight:500;font-size:max(var(--mt,0px), calc(12 * var(--u)));letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:calc(6 * var(--u))}
#contact .i-mail,#contact .i-loc{display:flex;align-items:center;gap:calc(22 * var(--u));
  font-size:max(var(--mt,0px), calc(13.5 * var(--u)));letter-spacing:.01em;line-height:1.2;white-space:nowrap}
#contact .i-mail{left:calc(688 * var(--u));top:calc(790 * var(--u))}
#contact .i-mail svg{width:calc(33 * var(--u));height:calc(26 * var(--u));color:#3A2A1E;flex:none}
@media (hover:hover) and (pointer:fine){ #contact .i-mail:hover span{text-decoration:underline;text-underline-offset:3px} }
#contact .i-loc{left:calc(1010 * var(--u));top:calc(790 * var(--u))}
#contact .i-loc svg{width:calc(26 * var(--u));height:calc(34 * var(--u));color:#3A2A1E;flex:none}
#contact .sep{width:calc(1.2 * var(--u));height:calc(46 * var(--u));background:rgba(60,44,30,.3);top:calc(789 * var(--u))}
#contact .s1{left:calc(985 * var(--u))}
#contact .s2{left:calc(1268 * var(--u))}
#contact .i-soc{left:calc(1306 * var(--u));top:calc(778 * var(--u))}
#contact .i-soc ul{list-style:none;display:flex;gap:calc(16 * var(--u));margin-top:calc(8 * var(--u))}
#contact .i-soc a{display:grid;place-items:center;width:calc(42 * var(--u));height:calc(42 * var(--u));border-radius:50%;
  border:calc(1.2 * var(--u)) solid rgba(60,44,30,.32);color:#3A2A1E;
  transition:background-color .3s ease,color .3s ease,transform .35s cubic-bezier(.2,.8,.3,1)}
@media (hover:hover) and (pointer:fine){ #contact .i-soc a:hover{background:#3A2A1E;color:#F3E7D3} }
#contact .i-soc svg{width:44%;height:44%}

/* ================= mobile: 530 x 941 ================= */
@media (max-width:860px){
  #contact .eyebrow{left:calc(48 * var(--u));top:calc(80 * var(--u))}
  #contact .toprule{display:none}
  #contact .intro{left:calc(48 * var(--u));top:calc(128 * var(--u));font-size:max(var(--mt,0px), calc(11.4 * var(--u)));
    line-height:max(calc(var(--mt,0px) * 1.42), calc(18 * var(--u)));letter-spacing:0}
  #contact .form{left:calc(48 * var(--u));top:calc(198 * var(--u));width:calc(434 * var(--u));height:calc(260 * var(--u))}
  #contact .f input,#contact .f textarea{border-radius:calc(8 * var(--u));padding:0 calc(17 * var(--u));
    font-size:max(var(--mt,0px), calc(10.4 * var(--u)))}
  #contact .f textarea{padding-top:calc(13 * var(--u))}
  #contact .f-name{width:calc(213 * var(--u));height:calc(41 * var(--u))}
  #contact .f-mail{left:calc(221 * var(--u));width:calc(213 * var(--u));height:calc(41 * var(--u))}
  #contact .f-subj{top:calc(49 * var(--u));height:calc(41 * var(--u))}
  #contact .f-msg{top:calc(98 * var(--u));height:calc(74 * var(--u))}
  #contact .send{top:calc(185 * var(--u));width:calc(207 * var(--u));height:calc(40 * var(--u));
    padding:0 calc(24 * var(--u));font-size:max(var(--mt,0px), calc(12.5 * var(--u)))}
  #contact .send svg{width:calc(18 * var(--u));height:calc(10 * var(--u))}
  #contact .reply{top:calc(234 * var(--u));font-size:max(var(--mt,0px), calc(10.4 * var(--u)));gap:calc(7 * var(--u))}
  #contact .reply svg{width:calc(12 * var(--u));height:calc(11 * var(--u))}
  #contact .status{left:calc(222 * var(--u));top:calc(186 * var(--u));width:calc(180 * var(--u));font-size:max(var(--mt,0px), calc(16 * var(--u)))}

  #contact .n-pick{left:calc(48 * var(--u));top:calc(482 * var(--u));font-size:max(var(--mt,0px), calc(15 * var(--u)))}
  #contact .a-pick{left:calc(116 * var(--u));top:calc(532 * var(--u));width:calc(34 * var(--u));height:calc(40 * var(--u))}
  #contact .n-good{left:calc(398 * var(--u));top:calc(524 * var(--u));font-size:max(var(--mt,0px), calc(15 * var(--u)))}
  #contact .heart-good{left:calc(462 * var(--u));top:calc(572 * var(--u));width:calc(18 * var(--u));height:calc(17 * var(--u))}
  #contact .a-good{left:calc(410 * var(--u));top:calc(598 * var(--u));width:calc(30 * var(--u));height:calc(52 * var(--u))}
  #contact .pop-1{left:calc(288 * var(--u));top:calc(493 * var(--u));width:calc(34 * var(--u));height:calc(38 * var(--u));stroke-width:2.2}
  #contact .pop-2{left:calc(436 * var(--u));top:calc(680 * var(--u));width:calc(30 * var(--u));height:calc(38 * var(--u));stroke-width:2.2}

  #contact .divider{left:calc(48 * var(--u));top:calc(796 * var(--u));width:calc(434 * var(--u))}
  #contact .info b{font-size:max(var(--mt,0px), calc(9 * var(--u)));margin-bottom:calc(3 * var(--u))}
  #contact .i-mail,#contact .i-loc{font-size:max(var(--mt,0px), calc(9.4 * var(--u)));letter-spacing:0;gap:calc(12 * var(--u))}
  #contact .i-mail{left:calc(48 * var(--u));top:calc(815 * var(--u))}
  #contact .i-mail svg{width:calc(21 * var(--u));height:calc(16 * var(--u))}
  #contact .i-loc{left:calc(300 * var(--u));top:calc(815 * var(--u))}
  #contact .i-loc svg{width:calc(17 * var(--u));height:calc(22 * var(--u))}
  #contact .sep{height:calc(32 * var(--u));top:calc(814 * var(--u))}
  #contact .s1{left:calc(283 * var(--u))}
  #contact .s2{display:none}
  #contact .i-soc{left:0;top:calc(860 * var(--u));width:100%;text-align:center}
  #contact .i-soc ul{justify-content:center;gap:calc(10 * var(--u));margin-top:calc(10 * var(--u))}
  #contact .i-soc a{width:calc(30 * var(--u));height:calc(30 * var(--u))}
}