/* Contact section: dark stage, one big email card, one quote card, four channel tiles */
body .contact-info{position:relative;overflow:hidden;background:#000;color:#f5f5f7;isolation:isolate}
body .contact-info::before,body .contact-info::after{content:"";position:absolute;z-index:-1;width:560px;height:560px;border-radius:50%;filter:blur(90px);opacity:.45;pointer-events:none}
body .contact-info::before{left:-160px;top:-120px;background:#0071e3;animation:ctDriftA 14s ease-in-out infinite alternate}
body .contact-info::after{right:-140px;bottom:-160px;background:#bf5af2;animation:ctDriftB 17s ease-in-out infinite alternate}
@keyframes ctDriftA{to{transform:translate(160px,90px) scale(1.15)}}
@keyframes ctDriftB{to{transform:translate(-140px,-70px) scale(1.2)}}
body .contact-info .eyebrow{color:#86868b}
body .contact-info h2{color:#f5f5f7}
body .contact-info .heading-aside p{color:#a1a1a6}

body .contact-info .contact-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
body .contact-info .contact-card{position:relative;overflow:hidden;min-height:176px;justify-content:flex-end;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#f5f5f7;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s,box-shadow .35s}
body .contact-info .contact-card::before{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),var(--glow,rgba(255,255,255,.16)),transparent 62%);opacity:0;transition:opacity .3s;pointer-events:none}
body .contact-info .contact-card:hover{transform:translateY(-6px);border-color:var(--edge,rgba(255,255,255,.35));box-shadow:0 22px 50px -18px var(--glow,rgba(0,0,0,.6))}
body .contact-info .contact-card:hover::before{opacity:1}
body .contact-info .contact-card small{color:#a1a1a6}
body .contact-info .contact-card strong{color:#fff}
body .contact-info .contact-card span{color:#a1a1a6}
body .contact-info .contact-card .brand-icon{position:absolute;left:30px;top:28px;margin:0;width:34px;height:34px;color:var(--brand,#f5f5f7);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
body .contact-info .contact-card:hover .brand-icon{color:var(--brand,#f5f5f7);transform:scale(1.18) rotate(-6deg)}
body .contact-info .contact-card::after{content:"↗";position:absolute;right:26px;top:24px;font-size:22px;color:#6e6e73;transition:transform .35s,color .3s}
body .contact-info .contact-card:hover::after{color:#fff;transform:translate(4px,-4px)}

/* sizes */
body .contact-info .cc-mail{grid-column:span 7;grid-row:span 1;position:relative;display:flex}
body .contact-info .cc-mail .contact-card{flex:1;min-height:220px}
body .contact-info .contact-card[data-k=mail] strong{font-size:clamp(24px,3.2vw,38px);letter-spacing:-.03em}
body .contact-info .contact-card[data-k=quote]{grid-column:span 5;min-height:220px;--glow:rgba(41,151,255,.55);--edge:rgba(41,151,255,.7);background:linear-gradient(135deg,#0a60c9 0%,#0071e3 45%,#5e5ce6 100%);border-color:transparent}
body .contact-info .contact-card[data-k=quote] small,body .contact-info .contact-card[data-k=quote] span{color:rgba(255,255,255,.8)}
body .contact-info .contact-card[data-k=quote] strong{font-size:clamp(26px,3vw,36px);letter-spacing:-.03em}
body .contact-info .contact-card[data-k=quote]::after{content:"→";font-size:28px;color:#fff;top:20px}
body .contact-info .contact-card[data-k=quote] .brand-icon{color:#fff}
body .contact-info .contact-card[data-k=gumroad],body .contact-info .contact-card[data-k=youtube],body .contact-info .contact-card[data-k=instagram],body .contact-info .contact-card[data-k=facebook]{grid-column:span 3;min-height:190px}
body .contact-info .contact-card:not([data-k=mail]):not([data-k=quote]) strong{font-size:clamp(15px,1.5vw,19px);word-break:normal;overflow-wrap:anywhere}
body .contact-info .contact-card{padding-top:84px}

/* brand colours */
body .contact-info .contact-card[data-k=mail]{--brand:#ff5f57;--glow:rgba(234,67,53,.4);--edge:rgba(234,67,53,.55)}
body .contact-info .contact-card[data-k=gumroad]{--brand:#ff90e8;--glow:rgba(255,144,232,.4);--edge:rgba(255,144,232,.55)}
body .contact-info .contact-card[data-k=youtube]{--brand:#ff3b30;--glow:rgba(255,59,48,.42);--edge:rgba(255,59,48,.55)}
body .contact-info .contact-card[data-k=instagram]{--brand:#ff6aa8;--glow:rgba(225,48,108,.42);--edge:rgba(225,48,108,.55)}
body .contact-info .contact-card[data-k=facebook]{--brand:#4c9bff;--glow:rgba(24,119,242,.45);--edge:rgba(24,119,242,.6)}

/* copy button */
.cc-copy{position:absolute;right:20px;bottom:20px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:1px solid rgba(255,255,255,.22);border-radius:980px;background:rgba(255,255,255,.1);color:#fff;font:600 14px/1 inherit;font-family:inherit;cursor:pointer;transition:background .25s,transform .25s,border-color .25s}
.cc-copy:hover{background:rgba(255,255,255,.2);transform:scale(1.04)}
.cc-copy.ok{background:#30d158;border-color:#30d158;color:#000}
.cc-copy svg{width:16px;height:16px}

/* entrance */
.cc-in{opacity:0;transform:translateY(26px) scale(.98)}
.cc-in.vis{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.8,.2,1) var(--cd,0ms),transform .7s cubic-bezier(.2,.8,.2,1) var(--cd,0ms)}
.cc-in.vis .contact-card:hover,.cc-in.vis.contact-card:hover{transition-delay:0ms}

@media(max-width:1000px){
 body .contact-info .cc-mail,body .contact-info .contact-card[data-k=quote]{grid-column:1/-1}
 body .contact-info .contact-card[data-k=gumroad],body .contact-info .contact-card[data-k=youtube],body .contact-info .contact-card[data-k=instagram],body .contact-info .contact-card[data-k=facebook]{grid-column:span 6}
}
@media(max-width:560px){
 body .contact-info .contact-card[data-k=gumroad],body .contact-info .contact-card[data-k=youtube],body .contact-info .contact-card[data-k=instagram],body .contact-info .contact-card[data-k=facebook]{grid-column:1/-1;min-height:150px}
 .cc-copy{right:58px;top:18px;bottom:auto;height:34px;padding:0 12px}
}
@media(prefers-reduced-motion:reduce){body .contact-info::before,body .contact-info::after{animation:none}.cc-in{opacity:1;transform:none}}
/* Quiet, consistent link affordances across the contact cards. */
body .contact-info .contact-card::after,
body .contact-info .contact-card[data-k=quote]::after{
 content:"";top:24px;right:24px;width:36px;height:36px;box-sizing:border-box;
 border:1px solid rgba(255,255,255,.13);border-radius:50%;
 background-color:rgba(255,255,255,.045);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c7cbd3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E");
 background-position:center;background-repeat:no-repeat;
 pointer-events:none;transition:background-color .2s,border-color .2s,transform .2s;
}
body .contact-info .contact-card[data-k=quote]::after{
 background-color:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E");
}
body .contact-info .contact-card:focus-visible{outline:2px solid #94c8ff;outline-offset:4px}
body .contact-info .contact-card:focus-visible::after{background-color:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32)}
@media(hover:hover){
 body .contact-info .contact-card:hover::after{background-color:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);transform:translate(2px,-2px)}
 body .contact-info .contact-card[data-k=quote]:hover::after{transform:translateX(2px)}
}
@media(max-width:560px){
 body .contact-info .contact-card::after,body .contact-info .contact-card[data-k=quote]::after{top:20px;right:20px;width:32px;height:32px}
 .cc-copy{right:64px}
}
@media(prefers-reduced-motion:reduce){
 body .contact-info .contact-card::after{transition:none}
 body .contact-info .contact-card:hover::after,body .contact-info .contact-card[data-k=quote]:hover::after{transform:none}
}