/* expy contact/utility — threepipe 3D macbook on a STARRY space background,
   auto-opens, with the copy scrolling INSIDE the screen via #screen-overlay. */
:root{--accent:#f97316;--font:'Switzer','Switzer Placeholder',sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{color:#f4f1ea;font-family:var(--font);overflow:hidden;
  background:
    radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.9),transparent),
    radial-gradient(1px 1px at 28% 68%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.4px 1.4px at 44% 34%,rgba(255,255,255,.85),transparent),
    radial-gradient(1px 1px at 62% 12%,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 74% 58%,rgba(255,255,255,.8),transparent),
    radial-gradient(1.3px 1.3px at 86% 28%,rgba(255,255,255,.75),transparent),
    radial-gradient(1px 1px at 92% 78%,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 8% 84%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 54% 82%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.2px 1.2px at 36% 8%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 68% 90%,rgba(255,255,255,.55),transparent),
    radial-gradient(1px 1px at 20% 48%,rgba(255,255,255,.6),transparent),
    radial-gradient(120% 90% at 50% 42%, #16203a 0%, #0a0f1c 55%, #06090f 100%)}

/* the 3D mockup is FIXED: no user orbit/drag. Killing pointer-events on the canvas means a drag
   anywhere never reaches the viewer's orbit controls (desktop + mobile), and touch drags land on
   the form overlay instead → the copy inside the phone/laptop screen scrolls. The intro open/rise
   animation is programmatic, so it's unaffected. */
#threepipe-canvas{position:fixed;inset:0;width:100vw;height:100vh;display:block;pointer-events:none}
/* dark backdrop BELOW the r3f curtain — so the dissolve reveals dark (not the loading 3D
   canvas); fades out once the reveal finishes. */
#reveal-cover{position:fixed;inset:0;background:#0b0d0e;z-index:99997;transition:opacity .55s ease}

/* top-left: only the back arrow + BACK TO WORLD (base font) → transition home */
/* hidden UNDER the r3f curtain — revealed only when the entrance transition finishes */
.device-nav{position:fixed;top:24px;left:28px;z-index:50;display:flex;align-items:center;gap:9px;
  text-decoration:none;color:#f4f1ea;font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.16em;
  opacity:1;pointer-events:auto;transition:opacity .5s ease,color .2s,transform .3s}
.device-nav .arrow{display:inline-flex;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.device-nav:hover{color:#fff}
.device-nav:hover .arrow{transform:translateX(-4px)}

/* overlay = the device screen content — PURE BLACK so it blends SEAMLESSLY with the blacked-out
   3D screen (no seam between the card and the mockup). A faint top sheen + inner edge read as
   real glass. Rounded corners seat it inside the bezel (bigger radius on the phone). */
/* flex column: the title is a FIXED header (flex:none) and only the body (.cf-form / .lg) scrolls.
   This keeps the title perfectly still even when scrolling to the very top — position:sticky was
   unreliable inside the matrix3d-transformed, momentum-scrolling overlay on iOS (the header drifted
   and revealed the background behind it). */
#screen-overlay{position:fixed;z-index:20;overflow:hidden;display:flex;flex-direction:column;opacity:0;
  transition:opacity .6s ease;background:#000;color:#f4f1ea;font-family:var(--font);
  border-radius:7px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 40px 90px -60px rgba(120,150,190,.18);
  background-image:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,0) 20%);
  background-repeat:no-repeat;background-attachment:local}
#screen-overlay.on{opacity:1!important}
/* thin, BLACK scrollbar (not grey) — the scrolling BODY (form / legal) + contact textarea */
#screen-overlay .cf-form,#screen-overlay .lg,#screen-overlay .cf-form textarea{scrollbar-width:thin;scrollbar-color:#000 transparent}
#screen-overlay .cf-form::-webkit-scrollbar,#screen-overlay .lg::-webkit-scrollbar,#screen-overlay .cf-form textarea::-webkit-scrollbar{width:5px}
#screen-overlay .cf-form::-webkit-scrollbar-thumb,#screen-overlay .lg::-webkit-scrollbar-thumb,#screen-overlay .cf-form textarea::-webkit-scrollbar-thumb{background:#000;border-radius:5px}
#screen-overlay .cf-form::-webkit-scrollbar-track,#screen-overlay .lg::-webkit-scrollbar-track,#screen-overlay .cf-form textarea::-webkit-scrollbar-track{background:transparent}
/* fallback (slow/failed 3D): show the content full-screen so the page is never blank */
#screen-overlay.device-fallback{position:fixed!important;inset:0!important;top:0!important;left:0!important;
  width:100vw!important;height:100vh!important;transform:none!important;clip-path:none!important;
  border-radius:0!important;box-shadow:none!important;background-image:none!important;opacity:1!important;
  font-size:18px!important}

/* ── expy contact form (dark) ── */
.cf-top{flex:0 0 auto;z-index:2;padding:2.6% 3.6% 2%;background:#000;border-bottom:1px solid rgba(255,255,255,.08)}
.cf-top h1{font-size:1.25em;font-weight:700;letter-spacing:-.01em;color:#fff}
.cf-top p{font-size:.82em;color:rgba(244,241,234,.6);margin-top:.35em;line-height:1.4}
.cf-form{flex:1 1 auto;min-height:0;overflow-y:auto;padding:3.4% 4% 5%;display:flex;flex-direction:column;gap:2.6%}
.cf-label{font-size:.62em;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:1.4% 0 .9%}
.cf-pills{display:flex;flex-wrap:wrap;gap:1.6%}
.cf-pill{font-size:.72em;padding:1.3% 3%;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#f4f1ea;cursor:pointer;transition:.2s}
.cf-pill.on,.cf-pill:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.cf-form input,.cf-form textarea{width:100%;padding:1.9% 2.6%;border:1px solid rgba(255,255,255,.13);border-radius:9px;font:inherit;font-size:.78em;background:rgba(255,255,255,.035);color:#f4f1ea;transition:border-color .2s,background .2s}
.cf-form input:focus,.cf-form textarea:focus{outline:none;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.06)}
.cf-form input::placeholder,.cf-form textarea::placeholder{color:rgba(244,241,234,.38)}
.cf-form textarea{min-height:3.8em;resize:none}
.cf-form button{align-self:flex-start;margin-top:1.4%;padding:1.5% 4.6%;border:0;border-radius:999px;background:var(--accent);color:#0e1011;font-weight:700;font-size:.74em;cursor:pointer;transition:filter .2s}
.cf-form button:hover{filter:brightness(1.08)}
.cf-note{font-size:.68em;color:rgba(244,241,234,.4);line-height:1.4;margin-top:3%}

/* ── utility list (dark) ── */
.sb-top{flex:0 0 auto;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:2.4% 3.4%;background:#000;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-top h1{font-size:1.3em;font-weight:700;color:#fff}
.sb-top .dot{width:.7em;height:.7em;border-radius:50%;background:var(--accent)}
.sb-section-title{padding:2.6% 3.4% 1%;font-size:.72em;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
/* legal document (utility) — dark; the scrolling body under the fixed title */
.lg{flex:1 1 auto;min-height:0;overflow-y:auto;padding:3% 4% 6%}
.lg-sec{font-size:.92em;font-weight:700;letter-spacing:.01em;color:#fff;margin:3.4% 0 1.2%}
.lg p{font-size:.78em;line-height:1.6;color:rgba(244,241,234,.72);margin:0}
.lg p a{color:var(--accent);text-decoration:none}
.lg p a:hover{text-decoration:underline}
.lg p b{color:#fff}
.sb-company{margin-top:5%;padding-top:3.4%;border-top:1px solid rgba(255,255,255,.1);font-size:.72em;line-height:1.7;color:rgba(244,241,234,.5)}
.sb-company b{color:rgba(244,241,234,.85)}

/* ── MOBILE (≤640px): show the iPhone 3D mockup (not the MacBook) with the form/copy scrolling
   INSIDE the phone screen. The 3D device positions #screen-overlay over the phone glass; we only
   round its corners more (phone screen) and keep the sticky header padding readable. */
@media (max-width:640px){
  /* rounder corners for the phone glass; the %-based / em layout scales with the 3D-driven
     overlay font-size. Give the form/copy more room so they fill the taller phone screen
     instead of clustering at the top. */
  /* phone screen: the BODY scrolls on touch (the title header is fixed via flex). touch-action:pan-y
     + momentum scrolling make the vertical drag scroll reliably on iOS/Android; the title never moves. */
  #screen-overlay{border-radius:30px}
  #screen-overlay .cf-form,#screen-overlay .lg{touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .device-nav{top:16px;left:14px}
  /* phone: make the form big and spread it over the FULL height of the screen — labels well
     separated from their fields, the first-question pills roomy, the CTA clearly detached */
  .cf-top{padding:8% 6% 5.5%}
  /* spacing controlled by margins (gap:0): each orange question sits close to ITS OWN field
     but well SEPARATED from the field above it; the first-question pills are roomy. */
  .cf-form{padding:7% 6.5% 12%;gap:0}
  .cf-label{margin:8.5% 0 3%}
  .cf-form>.cf-label:first-child{margin-top:0}
  /* WHO YOU ARE? answer pills: a FIXED em gap (not %) → identical distance between every pill,
     both within a row and between the wrapped rows (percentage gaps resolve unevenly on the two
     axes when the pills wrap). row-gap = column-gap = same value. */
  .cf-pills{gap:.5em .55em}
  .cf-pill{padding:2.8% 5.2%}
  .cf-form input,.cf-form textarea{padding:4.4% 4.5%}
  .cf-form textarea{min-height:6.5em}
  .cf-form button{margin-top:9%;padding:4% 9%}
  .cf-note{margin-top:7%}
  .lg{padding:7% 6.5% 12%}
  .lg-sec{margin:6.5% 0 2%}
  .lg p{line-height:1.7}
}