/* ===== CREATIVE PARTNER (Sep 2026, v6 precision pass) =====
   .la-fold holds the first screen: hero and client strip, with an ambient cue at its bottom centre;
   the work band below it peeks in on load. Then the offer, the FAQ and the footer.
   Built from the site's own primitives: h2.h two-tone headline, .reveal + [data-stagger], .btn,
   the original .faq accordion, the subpage footer. Band motion, drag and price reveal live in
   ring-suite and reserve-suite. */

html,body{height:auto!important;overflow:visible!important;overflow-x:clip!important}
html.locked{overflow:hidden!important}
body{display:block!important}
.la-fold{--peek:clamp(130px,18vh,210px);position:relative;display:flex;flex-direction:column;height:calc(100vh - var(--peek));height:calc(100svh - var(--peek))}
.la-fold>.hero,.la-fold>.clients{flex-shrink:0}
.la-fold>.hero{flex:1 1 auto;min-height:0!important}
.clients{padding-bottom:clamp(3.4rem,8vh,5.2rem)!important}
@media (max-height:640px){.la-fold{height:auto}}

.lp-sec,footer{background:#FFFFFF}
.lp-sec{border-top:0}
.lp-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- hero ---------- */
:root{--mute2:#6E6A60}   /* body-size grey that clears 4.5:1 on white */
.hero h1{max-width:28ch}
.hero h1 .g{display:block}
/* the copy column takes a little more of the hero grid so the first headline line stays whole */
@media (min-width:961px){.hero-inner{grid-template-columns:1.7fr 1fr}.hero h1{font-size:clamp(2rem,3.3vw,3.1rem)}}
@media (min-width:961px) and (max-width:1300px){.hero-inner{grid-template-columns:1.9fr 1fr}.hero h1{font-size:clamp(1.9rem,3.1vw,3rem)}}
.hero .sub{color:var(--mute2);max-width:36ch}
/* client logos: one visual weight, none accidentally heavy */
.marq-track img.cl-gs,.marq-track img.cl-prizepicks{height:21px}
.marq-track img.cl-sanctum{height:26px}
.marq-track img.cl-force{height:24px}
.marq-track img.cl-replit{height:38px}
.marq-track img.cl-polymarket{height:27px}
/* ambient cue: a hairline at the bottom centre of the first screen that breathes, gone on first scroll */
.cue{position:absolute;left:50%;bottom:12px;z-index:5;width:1px;height:26px;margin-left:-.5px;pointer-events:none;
  transition:opacity .6s ease}
.cue i{position:absolute;inset:0;background:var(--ink);opacity:.32;transform-origin:50% 0;transform:scaleY(.2);
  animation:cueBreathe 3.2s cubic-bezier(.45,0,.2,1) infinite}
@keyframes cueBreathe{0%{transform:scaleY(.15);opacity:0}35%{transform:scaleY(1);opacity:.34}65%{transform:scaleY(1);opacity:.34}100%{transform:scaleY(.15);opacity:0}}
.cue.gone{opacity:0}
@media (max-height:640px){.cue{display:none}}
@media (prefers-reduced-motion: reduce){.cue i{animation:none;transform:none;opacity:.22}}

/* ---------- cursor: one cursor only. The site hides the native one under html.cur; keep that
   airtight over media and pseudo-elements, and give the mark grab states over the band ---------- */
html.cur,html.cur *,html.cur *::before,html.cur *::after,html.cur iframe,html.cur video,html.cur canvas{cursor:none!important}
#cursor.grab{scale:1.35}
#cursor.grabbing{scale:.9}

/* ---------- work band: videos on the front of a large cylinder that bulges toward the viewer ---------- */
/* one continuous surface floating on the page: no container colour, no borders, no shadows */
body::before{display:none!important}
/* panels 35% larger than v6; the box reserves the full height the panels use, plus clear air before the
   next section (ring-suite measures it and re-measures on resize). Perspective is set by ring-suite in
   proportion to the arc radius so the bend looks the same at every panel size. */
.ring{--iw:clamp(324px,31vw,486px);--igap:clamp(14px,1.4vw,22px);--persp:3000px;
  position:relative;z-index:2;overflow:hidden;background:transparent;
  height:calc(var(--iw) * 9 / 16 * 1.16 + 4rem);padding:calc(var(--iw) * 9 / 16 * .16) 0 4rem;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  perspective:var(--persp);perspective-origin:50% calc(var(--iw) * 9 / 16 * .66);transition:none;
  touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none}
.ring-cyl{position:absolute;left:50%;top:calc(var(--iw) * 9 / 16 * .16);width:0;height:calc(var(--iw) * 9 / 16);transform-style:preserve-3d}
.ring-item{position:absolute;left:0;top:0;width:var(--iw);aspect-ratio:16/9;margin-left:calc(var(--iw) / -2);
  transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  will-change:transform,opacity,filter;opacity:0;visibility:hidden;text-decoration:none;-webkit-user-drag:none}
.ring-frame{position:absolute;inset:0;border-radius:12px;overflow:hidden;background:#F3F1EC;transform:translateZ(0)}
/* media overshoots the rounded box by a pixel so no dark hairline survives the 3D edges */
.ring-frame iframe{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);border:0;display:block;pointer-events:none;
  opacity:0;transition:opacity .6s ease}
.ring-frame iframe.on{opacity:1}
/* the further from centre, the more it dissolves into the page: a white veil per video */
.ring-frame::after{content:"";position:absolute;inset:0;background:#FFFFFF;opacity:var(--veil,0);pointer-events:none;border-radius:inherit}
.ring-item:focus-visible{outline:0}
.ring-item:focus-visible .ring-frame{outline:2px solid var(--blue);outline-offset:4px}
@media (prefers-reduced-motion: no-preference){.ring{animation:laV28In .8s cubic-bezier(.22,.61,.36,1) .06s backwards}}
html.la-exit .ring{opacity:0;transition:opacity .7s cubic-bezier(.4,0,.2,1)}

/* ---------- offer: headline, then one object with everything in it ---------- */
.lp-sec{position:relative;isolation:isolate;overflow-x:clip;padding-top:clamp(1.6rem,2.6vw,2.4rem);padding-bottom:clamp(4rem,8vw,7rem)}
@media (min-width:761px){.lp-sec{padding-left:clamp(2rem,8.9vw,9rem)!important;padding-right:clamp(2rem,8.9vw,9rem)!important}}
.lp-wrap{position:relative;max-width:760px;margin:0 auto}
.lp-head{margin-bottom:clamp(1.8rem,3.2vw,2.6rem);text-align:center}
.lp-head .h{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.08;letter-spacing:-.034em;max-width:none;text-wrap:balance;color:var(--ink)}
@media (min-width:761px){.lp-head .h .l2{display:block}}
.lp-head .lead{margin:.9rem auto 0;max-width:60ch;font-size:clamp(1rem,1.2vw,1.1rem);color:var(--mute2)}

.of{position:relative;display:grid;grid-template-columns:minmax(0,1fr) max-content;grid-template-areas:"main list" "cta list";column-gap:clamp(2rem,4vw,3.5rem);align-items:center;
  padding:clamp(2rem,3.2vw,2.9rem) clamp(2rem,3.4vw,3.2rem);border-radius:30px;
  background:#FBFAF7 url("/assets/ui/card06.svg") center/100% 100% no-repeat;
  border:1px solid rgba(20,19,16,.09);
  box-shadow:inset 0 1px 0 #FFFFFF,0 1px 2px rgba(20,19,16,.04),0 14px 34px -22px rgba(20,19,16,.16);
  isolation:isolate}
.of-main{grid-area:main;display:flex;flex-direction:column;align-items:flex-start;align-self:end}
.of-cta{grid-area:cta;align-self:start;margin-top:clamp(1.6rem,2.6vw,2.3rem)}
.of-side{grid-area:list;align-self:center;display:flex;flex-direction:column;gap:1rem;width:max-content;max-width:100%}
.of-name{font-size:1.06rem;font-weight:500;letter-spacing:-.012em;line-height:1.3;color:var(--ink)}
.of-amt{display:flex;align-items:baseline;flex-wrap:wrap;gap:.1rem .4rem;margin-top:.45rem;line-height:1}
.of-num{font-size:clamp(2.8rem,4.8vw,4rem);font-weight:700;letter-spacing:-.05em;color:var(--blue);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.of-per{font-size:1.02rem;color:var(--mute);letter-spacing:-.005em}
.of-rate{margin-top:.9rem;color:var(--mute2);font-size:.88rem;letter-spacing:.005em;line-height:1.5;white-space:nowrap;
  display:inline-block;padding:.38rem .85rem;border-radius:999px;
  background:radial-gradient(120% 160% at 50% 50%,rgba(255,255,255,.55),rgba(219,232,255,.32) 45%,rgba(234,223,255,.23) 72%,rgba(255,220,232,0));
  box-shadow:inset 0 0 0 1px rgba(211,224,255,.75)}   /* 09_pill_small at chip size */
.of-per{color:var(--mute2)}

/* included: a quiet stack, each line marked with the brand triangle in ink, small and still */
.of-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.of-list li{position:relative;display:flex;align-items:baseline;gap:.8rem;color:var(--ink);font-size:clamp(.98rem,1.15vw,1.06rem);font-weight:500;letter-spacing:-.01em;line-height:1.45}
.of-list li::before{content:"";flex:none;width:7px;height:6px;background:var(--blue);opacity:.9;transform:translateY(-1px);
  clip-path:polygon(50% 0,100% 100%,0 100%)}
/* terms: the same card, visibly a different kind of line: hairline above, quieter, no marker */
.of-terms{list-style:none;margin:0;padding:.9rem 0 0;border-top:1px solid rgba(20,19,16,.1);display:flex;flex-direction:column;gap:.3rem}
.of-terms li{color:var(--mute2);font-size:.9rem;letter-spacing:.002em;line-height:1.5;white-space:nowrap}

/* ---------- FAQ: heading centred, one centred column of questions, then the call block ---------- */
.lp-faq{max-width:760px;margin:clamp(3.2rem,6vw,5rem) auto 0}
.lp-faq-h{text-align:center;font-size:clamp(1.45rem,2.2vw,1.85rem);line-height:1.12;letter-spacing:-.032em;margin-bottom:clamp(1.2rem,2vw,1.8rem);text-wrap:balance}
.lp-more{position:relative;text-align:center;margin-top:clamp(4rem,7vw,6rem);padding:clamp(2rem,4vw,3.4rem) 0}
.ui-circle13,.ui-wave24{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:auto;pointer-events:none;-webkit-user-select:none;user-select:none;max-width:none;display:block;z-index:-1}
.ui-circle13{width:min(66vw,470px);aspect-ratio:1;opacity:.95}
.ui-wave24{width:min(140vw,1500px);aspect-ratio:2;opacity:.9}
.lp-more-h{font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.15;letter-spacing:-.03em;color:var(--ink)}
.lp-more-p{margin:.55rem auto 0;color:var(--mute2);font-size:clamp(1rem,1.2vw,1.1rem);max-width:40ch}
.lp-more .btn{margin-top:1.5rem}
#faq .faq details{border:0;background:url("/assets/ui/divider.svg") center top/100% 6px no-repeat;padding-top:2px}
#faq .faq details:first-of-type{border:0;background:none;padding-top:0}
#faq .faq summary{padding:.85rem 0;gap:1.4rem;font-weight:500;font-size:clamp(1.02rem,1.2vw,1.1rem);letter-spacing:-.014em;line-height:1.4;border-radius:0}
#faq .faq summary:hover{background:none;padding-left:0;color:var(--blue)}
#faq .faq summary .q{flex:1;min-width:0}
#faq .faq summary .plus{align-self:center;width:12px;height:12px;opacity:.7}
#faq .faq summary .plus::before{top:5.5px}
#faq .faq summary .plus::after{left:5.5px}
#faq .faq summary:hover .plus::before,#faq .faq summary:hover .plus::after{background:var(--blue)}
#faq .faq details:first-of-type summary{padding-top:.85rem}
#faq .faq-a{overflow:hidden;padding:0 3rem 1.15rem 0;color:var(--mute2);font-size:.97rem;line-height:1.64}
#faq .faq-a p{padding:0;max-width:66ch;text-wrap:pretty}
#faq .faq-a p+p{margin-top:.8rem}
#faq .faq-a strong,#faq .faq-a a{color:#57554f;font-weight:500}
#faq .faq-a a{text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s}
#faq .faq-a a[href^="mailto:"],#faq .faq-a a[href="https://app.slack.com/"]{color:inherit;font-weight:inherit}
@media(hover:hover){#faq .faq-a a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(20,19,16,.3)}}
#faq .faq-a a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px;text-decoration:underline}
#faq .faq-a em{font-style:normal;color:var(--ink)}

/* ---------- footer: same markup and values as the subpages ---------- */
.soc-plain{font-size:.82rem;color:var(--mute);text-decoration:none;transition:color .2s}
.soc-plain:hover{color:var(--ink)}
footer .legal{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;border-top:0!important;padding-top:0!important}
footer .socials{display:flex;gap:1.2rem;align-items:center}

/* ---------- material: a few vector layers from the UI asset pack, all decorative, none interactive.
   White first, material second, colour third: every layer sits far below full opacity ---------- */
.ui-glow,.ui-orb,.ui-fade{position:absolute;pointer-events:none;-webkit-user-select:none;user-select:none;max-width:none;display:block}
/* the web versions keep every blurred shape inside its own canvas and carry a fine dither, so a glow
   fades to nothing on its own: no bounds, no banding rings */
/* hero: the glass mark is lit by one soft gradient behind it, nothing behind the copy */
.hero-inner{position:relative}
.hero-copy{position:relative;z-index:3}
/* sits just over the mark's panel (whose readability scrim would otherwise cut a box out of the light) */
/* the iridescent orb sits behind the mark's panel, its ring a little wider, the light sweep over both */
.ui-orb21,.ui-ring22,.ui-sweep{position:absolute;left:58%;top:52%;height:auto;transform:translate(-50%,-50%);pointer-events:none;-webkit-user-select:none;user-select:none;max-width:none;display:block}
.ui-orb21{width:min(46vw,640px);aspect-ratio:1;opacity:.9;z-index:0}
.ui-ring22{width:min(62vw,860px);aspect-ratio:1;opacity:.8;z-index:0}
.ui-sweep{width:min(64vw,900px);aspect-ratio:2;transform:translate(-50%,-50%) rotate(-4deg);opacity:.55;filter:blur(1.5px);z-index:2}
/* the light may run past the hero's bottom edge: the fold carries the white, the logo strip stays transparent */
.la-fold{background:#FFFFFF}
.la-fold>.clients{background:transparent!important}
/* logo wall: the outermost edges dissolve into the page; the centre stays fully readable */
.clients .marq{position:relative}
.clients .marq img.ui-fade{top:0;height:100%!important;width:14%!important;max-width:none;opacity:1;filter:none;z-index:2}
.ui-fade-l{left:0}
.ui-fade-r{right:0}
/* work to plan: one very large, very faint pastel field across the seam between the two sections */
.ui-glow-plan{left:50%;top:0;width:min(100%,1600px);height:auto;aspect-ratio:1;transform:translate(-50%,-30%);opacity:.42;z-index:-1;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 24%);mask-image:linear-gradient(to bottom,transparent,#000 24%)}   /* fades in below the fold's edge, never a line there */
/* the card: a faint ambient light behind its top right corner, cropped by the card itself */
.of-wrap{position:relative;isolation:isolate}
.of{position:relative;z-index:1}
.ui-orb{right:-24%;top:-42%;width:76%;height:auto;aspect-ratio:1;opacity:1;z-index:-1}
/* a faint lit edge along the top of the card */
.of::before{content:"";position:absolute;left:6%;right:6%;top:-7px;height:14px;background:url("/assets/ui/shine.svg") center/100% 100% no-repeat;opacity:.7;pointer-events:none;z-index:2}
/* every work video: the pack's thin frame over the media, under the veil, warping with the panel */
.ring-frame::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  background:url("/assets/ui/frame05.svg") center/100% 100% no-repeat;opacity:.9}
.ring-frame::after{z-index:3}
@media (max-width:960px){.ui-orb{display:none}}

/* ---------- tablet ---------- */
@media (max-width:960px){
  .of{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "list" "cta";row-gap:1.6rem}
  .of-side{align-self:start;max-width:34rem}
  .of-cta{margin-top:0}
  .lp-faq-h{max-width:none}
}
/* ---------- phone ---------- */
@media (max-width:760px){
  .la-fold{--peek:0px;height:auto;min-height:0}
  .clients{padding-bottom:0!important}
  .cue{display:none}
  .ui-orb21,.ui-ring22{display:none}
  .clients .marq img.ui-fade{width:9%!important}
  .ui-glow-plan{width:130%;opacity:.3}
  .ui-sweep{display:none}
  /* client logos on phones: legible, wrapping into calm rows, one weight */
  .lrow{flex-wrap:wrap!important;gap:.7rem 1.35rem!important;max-width:21rem!important}
  .clients .marq-track img,.clients .marq-track img:hover{height:14px!important}
  .clients .marq-track img.cl-superpower,.clients .marq-track img.cl-getjacked{height:12px!important}
  .clients .marq-track img.cl-replit{height:20px!important}
  .clients .marq-track img.cl-polymarket,.clients .marq-track img.cl-sanctum{height:15px!important}
  .clients .marq-track img.cl-gs,.clients .marq-track img.cl-prizepicks{height:13px!important}
  .hero h1{font-size:clamp(1.7rem,7.4vw,2.1rem)!important;line-height:1.06}
  .hero .sub{font-size:.95rem!important}
  .ring{--iw:74vw;--igap:12px;margin-top:clamp(2rem,6svh,3.4rem);height:calc(var(--iw) * 9 / 16 * 1.16 + 2.8rem);padding:calc(var(--iw) * 9 / 16 * .16) 0 2.8rem;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
  .ring-cyl{top:calc(var(--iw) * 9 / 16 * .16)}
  .ring-frame{border-radius:10px}
  .lp-sec{padding-top:1.2rem;padding-bottom:4rem}
  .lp-head{margin-bottom:1.4rem}
  .lp-head .h{font-size:clamp(1.45rem,6.2vw,1.8rem)}
  .of{padding:1.6rem 1.35rem 1.5rem;border-radius:26px;row-gap:1.3rem}
  .of-num{font-size:2.8rem}
  .of-rate{white-space:normal}
  .of-cta{width:100%}
  .of-cta .btn{width:100%;padding-top:.98rem!important;padding-bottom:.98rem!important}
  .of-list{gap:.45rem}
  .of-list li{font-size:.98rem}
  .lp-faq{margin-top:2.8rem}
  .lp-faq-h{font-size:1.5rem;margin-bottom:.6rem}
  #faq .faq summary{padding:.8rem 0;gap:1rem;font-size:1.02rem}
  .lp-more{margin-top:2.8rem}
  .lp-more-h{font-size:1.35rem}
  .ui-wave24{width:180%}
  #faq .faq-a{padding:0 0 1.1rem;font-size:.95rem}
}