/* /contact: the address as the poster. Charcoal with a lime glow -> the SMR tile crosses the seam -> lime (Instagram) -> charcoal. */
.ct-page{background:#101111}
.ct-page .label.ink{color:#101111}.ct-page .label.ink i{background:#101111}
.btn.ink{background:#101111;color:#f4f4ee}.btn.ink:hover{background:#f4f4ee;color:#101111}
button.btn{border:0;cursor:pointer}

/* 1 · mail */
.mail{position:relative;overflow:hidden;min-height:calc(100svh - 80px);display:flex;align-items:center;padding:72px 0 220px;
  background:radial-gradient(ellipse 60% 70% at 88% 100%,rgba(182,255,0,.22),rgba(182,255,0,0) 70%),#101111}
.mail::before{content:'';position:absolute;inset:0;opacity:.09;pointer-events:none;background-image:radial-gradient(#fff .6px,transparent .7px);background-size:5px 5px}
.mail-in{position:relative;z-index:2;width:100%;max-width:1600px;margin:0 auto;box-sizing:border-box}
.mail-h{font-size:clamp(64px,9vw,150px);margin:22px 0 18px}
.mail-lede{margin:0 0 40px;font-size:18px;line-height:1.6;color:#c9ccd1;max-width:520px}
.addr{margin:0 0 40px;font:800 clamp(44px,10.6vw,190px)/.86 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.03em;text-transform:none}
.addr-a{text-decoration:none;color:#f4f4ee;display:inline-flex;flex-wrap:wrap;transition:color .2s}
.addr-a:hover{color:#b6ff00}
.addr-a span{display:inline-block}
.addr .a2{color:#b6ff00}.addr-a:hover .a2{color:#f4f4ee}
.js .addr-a span{animation:addr .9s cubic-bezier(.2,.8,.2,1) both}
.js .addr-a .a2{animation-delay:.12s}
@keyframes addr{from{opacity:0;transform:translateY(.25em) skewY(4deg)}to{opacity:1;transform:none}}
.addr.flash .addr-a{animation:flash .9s ease}
@keyframes flash{0%,100%{color:#f4f4ee}15%,55%{color:#b6ff00;text-shadow:0 0 .2em rgba(182,255,0,.5)}}
.mail-ctas{display:flex;gap:12px;flex-wrap:wrap}
.copy{min-width:230px}
.copy-i{width:20px;height:20px;flex:none}
.copy.done{background:#f4f4ee}
.copied{margin:14px 0 0;min-height:22px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#b6ff00}
.tile{position:absolute;z-index:1;right:-7vw;bottom:-27vw;width:min(46vw,720px);height:auto;fill:#b6ff00;transform:rotate(-12deg);
  filter:drop-shadow(0 0 60px rgba(182,255,0,.35))}
.js .tile{animation:tile 1.2s .25s cubic-bezier(.2,.9,.25,1.15) both}
@keyframes tile{from{transform:translate(18vw,22vw) rotate(10deg)}to{transform:rotate(-12deg)}}

/* 2 · instagram on lime */
.ig{position:relative;background:#b6ff00;color:#101111;padding:120px 0 140px;overflow:hidden}
.ig-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:48px;align-items:center;max-width:1600px;margin:0 auto;box-sizing:border-box}
.ig-h{font-size:clamp(60px,9.4vw,168px);line-height:.8;margin:24px 0 28px;overflow-wrap:anywhere}
.ig-h span{display:block}
.ig-h span:first-child{margin-left:-.04em}
.ig-lede{margin:0 0 30px;font-size:18px;line-height:1.6;max-width:440px}
.phone{position:relative;justify-self:center;display:block;width:min(360px,100%);aspect-ratio:9/18.5;background:#101111;border-radius:46px;padding:14px;box-sizing:border-box;
  text-decoration:none;color:#f4f4ee;transform:rotate(5deg);box-shadow:0 60px 90px rgba(40,60,0,.45),0 14px 30px rgba(40,60,0,.3);transition:transform .3s}
.phone:hover{transform:rotate(2deg) translateY(-8px)}
.phone:focus-visible{outline:3px solid #101111;outline-offset:6px}
.ph-bar{display:flex;align-items:center;gap:10px;padding:26px 12px 14px;font-size:12px}
.ph-bar img{width:28px;height:28px;border-radius:50%;background:#fff}
.ph-bar b{font-weight:800;letter-spacing:.01em}
.ph-feed{display:block;position:absolute;left:14px;right:14px;top:78px;bottom:14px;overflow:hidden;border-radius:0 0 32px 32px}
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.ph-grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.js .ph-grid{animation:feed 26s linear infinite}
@keyframes feed{to{transform:translateY(calc(-50% - 1.5px))}}

/* 3 · after */
.after{background:linear-gradient(180deg,#b6ff00 0,#101111 1px);padding:110px 0 110px;position:relative}
.after::before{content:'';position:absolute;left:0;right:0;top:-1px;height:70px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath fill='%23b6ff00' d='M0 0H1200V28L1184 40 1166 31 1149 47 1128 36 1110 50 1092 38 1071 44 1052 33 1035 49 1013 41 994 53 977 39 958 45 936 32 918 48 899 40 880 51 861 37 842 43 820 30 801 46 783 39 764 52 745 36 727 44 705 33 688 47 668 38 650 50 631 35 612 42 591 31 573 48 555 41 535 53 517 37 498 45 476 34 458 49 440 39 421 51 402 36 383 43 362 32 344 47 326 40 307 52 288 38 269 44 248 33 230 48 211 41 193 50 174 36 155 42 134 31 116 46 97 39 79 51 60 37 41 44 20 33 0 28Z'/%3E%3C/svg%3E") 0 0/1200px 70px repeat-x}
.after-in{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;max-width:1600px;margin:0 auto;box-sizing:border-box}
.after-h{font-size:clamp(56px,7vw,120px)}

@media(prefers-reduced-motion:reduce){.js .addr-a span,.js .tile,.js .ph-grid,.addr.flash .addr-a{animation:none}}

@media(max-width:900px){
  .mail{min-height:0;padding:48px 0 52vw;align-items:flex-start}
  .mail-h{font-size:21vw;margin:18px 0 14px}
  .mail-lede{font-size:16px;margin-bottom:30px}
  .addr{font-size:17.5vw;margin-bottom:30px}
  .addr-a{flex-direction:column}
  .mail-ctas .btn{width:100%;min-width:0}
  .tile{width:74vw;right:-14vw;bottom:-30vw}
  .ig{padding:72px 0 84px}
  .ig-in{display:block}
  .ig-h{font-size:19.5vw}
  .ig .btn{width:100%;font-size:11px;letter-spacing:.02em;gap:10px;padding:14px 18px}
  .phone{margin:56px auto 0;width:min(300px,78vw);border-radius:38px}
  .after{padding:88px 0 80px}
  .after-h{font-size:17vw}
  .after .btn{width:100%}
}