/* Foxx Studio preview: contact hero (.cl).
   A light gray studio wall with the draggable foil banner (js/contact-cloth.js).
   The canvas covers the whole section and ignores the pointer; the script hit-tests the cloth itself. */
.cl{--w1:#f1f2f5;--w2:#dddfe4;--w3:#c6c9d0;--ik:#0a1020;--ik2:#465066;
  position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);
  min-height:100vh;min-height:100svh;padding-top:var(--hh);color:var(--ik);
  border-radius:0 0 clamp(18px,2.6vw,36px) clamp(18px,2.6vw,36px);
  background:
    linear-gradient(var(--bg),var(--bg)) 0 0/100% var(--hh) no-repeat,
    linear-gradient(180deg,rgba(10,16,32,.11),rgba(10,16,32,0)) 0 var(--hh)/100% 70px no-repeat,
    radial-gradient(125% 100% at 50% 44%,rgba(255,255,255,0) 50%,rgba(48,56,74,.2) 100%),
    radial-gradient(72% 64% at 30% 38%,var(--w1) 0%,rgba(241,242,245,0) 74%),
    linear-gradient(180deg,var(--w2) 0%,var(--w2) 60%,var(--w3) 100%)}
.cl :focus-visible{outline-color:var(--ik)}
.cl-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(24px,4vw,72px);align-items:stretch;min-height:0;
  padding-block:22px 30px;padding-block:clamp(14px,3svh,36px) clamp(20px,4svh,44px)}

/* stage: only reserves the room; the banner is drawn by the full-section canvas */
.cl-stage{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0;min-height:260px}
.cl-c{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;display:block;pointer-events:none;opacity:0;transition:opacity .7s ease}
.cl--on .cl-c{opacity:1}
.cl--over{cursor:grab}
.cl--drag,.cl--drag *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}
.cl-hint{display:inline-flex;align-items:center;gap:9px;padding:8px 0 2px;font:600 .82rem/1 var(--fb);color:var(--ik2);visibility:hidden;opacity:0;transition:opacity .8s ease .9s}
.cl-hint::before{content:"";width:22px;height:22px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23465066' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23465066'/%3E%3C/svg%3E") center/contain no-repeat}
.cl--live .cl-hint{visibility:visible}
.cl--live.cl--on .cl-hint{opacity:1}
.cl--live.cl--on:not(.cl--used) .cl-hint::before{animation:clnudge 2.6s var(--io) 2.2s infinite}
@keyframes clnudge{0%,60%,100%{transform:none}15%{transform:translateX(-4px)}40%{transform:translateX(4px)}}

/* text on the wall */
.cl-t{position:relative;z-index:1;align-self:center;min-width:0}
.cl .lab{display:flex;align-items:center;gap:.6em;color:var(--ik2);margin-bottom:18px}
.cl .lab::before{content:"";width:.62em;height:.62em;border-radius:2px;background:var(--acc);flex:none}
.cl h1{font-size:clamp(2.6rem,5.85vw,5.7rem);letter-spacing:calc(-.05em*var(--tr));line-height:.98;color:var(--ik);margin-bottom:.36em}
.cl h1>span{display:block;white-space:nowrap}
.cl .sub{color:var(--ik2);max-width:30rem;margin-bottom:26px;margin-bottom:clamp(18px,3.4svh,34px)}

/* flat fallback (no WebGL): the banner graphic as a hanging sheet with a soft shadow */
.cl--css .cl-stage{justify-content:center}
.cl--css .cl-c{position:static;width:var(--cw,300px);height:var(--ch,336px);max-width:100%;z-index:auto;transform:rotate(-.7deg);
  box-shadow:3px 5px 8px rgba(10,16,32,.16),16px 26px 44px rgba(10,16,32,.3)}
.cl--css .cl-hint,.cl--static .cl-hint{display:none}
html:not(.js) .cl-stage{display:none}
html:not(.js) .cl-g{grid-template-columns:minmax(0,1fr)}

/* stacked: banner on top, heading under it, all inside the first screen */
@media(max-width:900px){
  .cl-g{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:10px;padding-block:4px 22px}
  .cl-stage{min-height:228px}
  .cl-t{align-self:end}
  .cl .lab{margin-bottom:10px;font-size:.85rem}
  .cl h1{font-size:clamp(2.2rem,11.4vw,5.4rem);margin-bottom:.3em}
  .cl .sub{font-size:.95rem;line-height:1.45;margin-bottom:16px}
  .cl-hint{font-size:.78rem;padding-top:4px}
}
@media(max-width:900px) and (max-height:700px){
  .cl .lab{display:none}
  .cl .sub{margin-bottom:12px}
}
/* phones held sideways: side by side again */
@media(max-width:900px) and (orientation:landscape) and (max-height:560px){
  .cl-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;gap:20px;padding-block:6px 14px}
  .cl-stage{min-height:236px}
  .cl-t{align-self:center}
  .cl h1{font-size:clamp(1.9rem,5.4vw,3rem)}
}
@media(prefers-reduced-motion:reduce){.cl-c,.cl-hint{transition:none}.cl-hint::before{animation:none!important}}