/* ===========================================================
   AdBreakers homepage — sections ported from /john/ (Loom 2026-08-09):
   logo marquee, "What makes us different", UGC native ads, blue book CTA,
   screenshot hover-zoom, dual-IG proof, promise split, two-step booking,
   floating parallax icons. Palette mapped to the site vars.
   =========================================================== */

/* ---------- performance ----------
   1. Sections below the fold are skipped by the renderer until they are scrolled near.
      contain-intrinsic-size keeps the scrollbar honest so nothing jumps.
   2. Anything animating forever is paused while it is off screen (JS adds .anim-off).
   Neither changes how a single pixel looks once a section is on screen.
   Sizes below are each section's measured height, so the scrollbar does not jump as they
   render in ("auto" then keeps the real size once each has been laid out once). */
#ugc,#results,#reviews,#video-testimonials,#podcast,#instagram,#founders{content-visibility:auto}
#ugc{contain-intrinsic-size:auto 1230px}
#results{contain-intrinsic-size:auto 3630px}
#reviews{contain-intrinsic-size:auto 1210px}
#video-testimonials{contain-intrinsic-size:auto 1020px}
#podcast{contain-intrinsic-size:auto 885px}
#instagram{contain-intrinsic-size:auto 1310px}
#founders{contain-intrinsic-size:auto 1370px}
.anim-off,.anim-off *{animation-play-state:paused!important}

/* shared bits */
.gtx{background:linear-gradient(120deg,var(--brand-2),var(--brand));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gtxs 5.5s ease-in-out infinite}
@keyframes gtxs{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.fx{position:absolute;pointer-events:none;opacity:.12;z-index:1;animation:fxfloat 7s ease-in-out infinite;will-change:transform}
.fx svg,.fx img{width:100%;height:100%}
@keyframes fxfloat{0%,100%{margin-top:0}50%{margin-top:-12px}}
.hx-joke{color:#8a877c;font-size:.92rem;margin-top:16px;font-style:italic}

/* ---------- logo marquee ---------- */
.mq-sec{padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.012)}
.mq-label{text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8a877c;margin-bottom:20px}
.mq{overflow:hidden;position:relative}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,#000,transparent)}
.mq::after{right:0;background:linear-gradient(270deg,#000,transparent)}
.mq-track{display:flex;align-items:center;gap:64px;width:max-content;animation:mq 54s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-track img{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.6;transition:opacity .2s,filter .2s}
.mq-track img:hover{opacity:1;filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(251,227,77,.8))}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- what makes us different ---------- */
.diff-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center;margin-top:6px}
.diff-grid>*{min-width:0}
.pbox{position:relative;max-width:440px;margin:0 auto}
.pbox .ph{border-radius:22px;overflow:hidden;border:1px solid rgba(251,227,77,.3);box-shadow:0 26px 70px rgba(0,0,0,.6),0 0 46px rgba(251,227,77,.1)}
.pbox .ph img{width:100%;height:auto;display:block}
.pbox::after{content:"";position:absolute;inset:-26px;background:radial-gradient(55% 55% at 60% 40%,rgba(251,227,77,.14),transparent 70%);z-index:-1}
.pbox .cap{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);white-space:nowrap;background:rgba(5,5,5,.92);border:1px solid rgba(251,227,77,.4);border-radius:999px;padding:8px 16px;font-size:.74rem;font-weight:700;color:var(--brand);box-shadow:0 14px 34px rgba(0,0,0,.55)}
.dcards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.dcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;transition:border-color .25s,transform .25s;text-align:left}
.dcard:hover{border-color:rgba(251,227,77,.45);transform:translateY(-3px)}
.dcard .ic{width:42px;height:42px;border-radius:12px;background:rgba(251,227,77,.1);border:1px solid rgba(251,227,77,.2);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.dcard .ic svg{width:20px;height:20px;stroke:var(--brand);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dcard .ic svg.spk{stroke:none}
.dcard .ic img{height:18px;width:auto}
.dcard h3{font-size:1rem;margin-bottom:7px;letter-spacing:-.02em}
.dcard p{color:var(--muted);font-size:.88rem;line-height:1.6;margin:0}

/* ---------- ugc native ads ---------- */
#ugc{background:radial-gradient(90% 60% at 50% 0%,rgba(217,119,87,.05),transparent 60%)}
.jcbar{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,rgba(217,119,87,.1),rgba(251,227,77,.06));border:1px solid rgba(217,119,87,.3);border-radius:18px;padding:18px 22px;max-width:720px;margin:30px auto 0;text-align:left}
.jcbar .spark{width:44px;height:44px;flex-shrink:0}
.jcbar p{color:var(--muted);font-size:.95rem;line-height:1.6;margin:0}
.jcbar p b{color:var(--ink)}
.jcbar .cl{color:#D97757;font-weight:800}
.adcar{position:relative;margin-top:44px}
.adgrid{overflow:hidden;position:relative;text-align:left;padding:4px 0 16px}
.ad-track{display:flex;gap:18px;width:max-content;animation:adscroll 130s linear infinite}
.adgrid:hover .ad-track,.adcar.hold .ad-track{animation-play-state:paused}
@keyframes adscroll{to{transform:translateX(-50%)}}
.ad-track .adwrap{flex:0 0 360px;width:360px}
.adwrap{display:flex;flex-direction:column;gap:12px}
.adcard{background:#fff;border:1px solid #E4E6EB;border-radius:16px;overflow:hidden;transition:transform .25s,box-shadow .25s;box-shadow:0 16px 44px rgba(0,0,0,.35)}
.adcard:hover{transform:translateY(-4px);box-shadow:0 22px 60px rgba(0,0,0,.5)}
.ad-top{display:flex;align-items:center;gap:10px;padding:12px 14px}
.ad-av{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:1rem;overflow:hidden}
.ad-av img{width:100%;height:100%;object-fit:cover}
.ad-name{font-weight:700;font-size:.9rem;line-height:1.2;color:#050505}
.ad-sp{color:#65676B;font-size:.72rem;display:flex;align-items:center;gap:4px}
.ad-sp svg{width:10px;height:10px;fill:#65676B}
.ad-copy{padding:0 14px 12px;color:#1c1e21;font-size:.84rem;line-height:1.55;min-height:calc(1.55em * 3 + 12px);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ad-copy .more{color:#65676B;font-weight:600}
.ad-link{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#F0F2F5;padding:11px 14px;border-top:1px solid #E4E6EB}
.ad-link .dom{display:flex;align-items:center;min-height:34px;min-width:0}
.ad-link .h{font-weight:700;font-size:.82rem;color:#050505;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shopnow{flex-shrink:0;background:#1877F2;color:#fff;font-weight:700;font-size:.8rem;padding:9px 16px;border-radius:8px}
.ad-react{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;color:#65676B;font-size:.75rem;border-top:1px solid #E4E6EB;background:#fff}
.ad-react .lk{display:flex;align-items:center;gap:6px}
.ad-react .lk svg{width:15px;height:15px}
.admedia{position:relative;line-height:0;aspect-ratio:1/1}
.admedia img{width:100%;height:100%;object-fit:cover;display:block}
.adroas{position:absolute;top:12px;right:12px;display:inline-flex;align-items:baseline;gap:6px;background:rgba(8,9,12,.82);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border:1px solid rgba(251,227,77,.55);color:#fff;border-radius:999px;padding:7px 14px;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.adroas b{color:var(--brand);font-size:1.02rem;font-weight:800;letter-spacing:-.02em}
.adnote{color:#8a877c;font-size:.85rem;margin-top:26px;text-align:center}

/* ---------- blue "want ads like these" CTA (the button John loves) ---------- */
.bluecta{max-width:620px;margin:0 auto;text-align:center;border:1px solid rgba(24,119,242,.5);border-radius:22px;padding:32px 24px;background:radial-gradient(120% 170% at 50% -25%,rgba(24,119,242,.28),rgba(24,119,242,.05) 55%,transparent),#0a0d14;box-shadow:0 24px 70px rgba(24,119,242,.16)}
.bluecta p{color:var(--muted);margin:0 0 16px;font-size:1.02rem}
.bluecta .btn{background:#1877F2;color:#fff;border:1px solid #5ea4ff;box-shadow:0 10px 30px rgba(24,119,242,.4)}
.bluecta .btn:hover{background:#155fb0;transform:translateY(-2px)}

/* ---------- screenshot hover-zoom (from /john/ recent projects) ---------- */
.shot-zoom{position:relative;overflow:hidden;cursor:zoom-in}
.shot-zoom img{width:100%;max-width:none;display:block;transition:transform .4s ease;transform-origin:14% 88%;will-change:transform}
.shot-zoom:hover img,.shot-zoom.zoomed img{transform:scale(2.15)}
.panhint{text-align:center;color:#8a877c;font-size:.74rem;font-weight:600;letter-spacing:.05em;padding:9px;background:#0b0b0c;border-top:1px solid rgba(255,255,255,.05)}
.shotlb{position:fixed;inset:0;z-index:220;background:#07080b;display:none;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.shotlb.on{display:block}
.shotlb img{display:block;width:190%;max-width:none;height:auto}
.shotlb .lbx{position:fixed;top:12px;right:12px;z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(10,11,14,.86);color:#fff;font-size:1.2rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.shotlb .lbh{position:fixed;left:0;right:0;bottom:0;padding:11px;text-align:center;font-size:.76rem;font-weight:600;color:#8a877c;background:linear-gradient(to top,rgba(7,8,11,.95),transparent)}

/* ---------- dual instagram proof ---------- */
.igx-grid{display:block;position:relative;height:540px;perspective:1300px;max-width:760px;margin:42px auto 0}
.igx-grid>*{min-width:0}
.igx-grid .igx{position:absolute;top:10px;left:50%;width:min(86vw,440px);margin-left:max(-43vw,-220px);transition:transform .65s cubic-bezier(.22,.61,.36,1),filter .65s,opacity .65s;cursor:pointer;transform-style:preserve-3d}
.igx-grid .igx.on{z-index:6}
.igx-grid .igx:not(.on){z-index:3}
.igx{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:30px 24px 26px;display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;transition:border-color .25s}
.igx:hover{border-color:var(--line-2)}
.igx-top{display:flex;align-items:center;gap:11px}
.iglogo{width:27px;height:27px}
.igx-flag{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);padding:6px 13px;border-radius:999px}
.flg{width:21px;height:14px;border-radius:2.5px;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.igx .av{width:66px;height:66px;border-radius:50%;object-fit:cover;border:2px solid rgba(251,227,77,.45);margin-top:4px}
.ig-name{font-weight:800;font-size:1.08rem;display:flex;align-items:center;gap:6px;letter-spacing:-.01em;justify-content:center}
.vbadge{width:16px;height:16px;flex-shrink:0}
.igx-count{font-size:2.1rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(120deg,var(--brand-2),var(--brand));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.igx-lbl{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a877c}
.igx-note{color:var(--muted);font-size:.88rem;line-height:1.6;max-width:320px;min-height:42px}
.ig-follow{background:linear-gradient(120deg,var(--brand-2),var(--brand));color:#141200;font-weight:700;font-size:.86rem;padding:10px 26px;border-radius:11px;transition:transform .15s;margin-top:2px}
.ig-follow:hover{transform:translateY(-2px)}
.ig-hint{display:block;text-align:center;color:#8a877c;font-size:.74rem;font-weight:600;margin-top:6px}
.igx-striplbl{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a877c;margin:28px 0 12px;text-align:center}
.igx-striplbl .scr{color:var(--brand);margin-left:8px}
.ig-end{flex-shrink:0;width:132px;border-radius:14px;border:1px solid rgba(251,227,77,.35);background:linear-gradient(160deg,rgba(251,227,77,.12),rgba(24,119,242,.1)),#0d0d10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px;text-align:center;transition:transform .2s,border-color .2s}
.ig-end:hover{transform:translateY(-3px);border-color:var(--brand)}
.ig-end .n{font-size:1.3rem;font-weight:800;background:linear-gradient(120deg,var(--brand-2),var(--brand));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ig-end .t{color:var(--muted);font-size:.74rem;line-height:1.45}
.ig-end .go{color:var(--brand);font-weight:700;font-size:.8rem}
.ig-total{text-align:center;color:#8a877c;font-size:.86rem;margin-top:20px}
.ig-total b{color:var(--brand)}
@media(max-width:960px){
  .igx-grid{height:470px;perspective:900px;max-width:none;margin-top:34px}
  .igx-grid .igx{width:min(64vw,250px);margin-left:min(-32vw,-125px);padding:20px 14px 18px;gap:7px;background:var(--surface-2);border-color:rgba(255,255,255,.16)}
  .igx-grid .igx.on{box-shadow:0 26px 60px rgba(0,0,0,.72)}
  .igx .av{width:48px;height:48px}
  .igx-count{font-size:1.5rem}
  .igx-note{font-size:.8rem;min-height:0}
  .ig-hint{font-size:.7rem}
}

/* ---------- what we promise (both founders: Anti left, John right) ---------- */
.prom-grid{display:grid;grid-template-columns:.62fr 1fr 1fr .62fr;gap:18px;margin-top:42px;align-items:center;text-align:left}
.prom-photo{position:relative;text-align:center;z-index:2;margin-right:-52px}
.prom-photo.right{margin-right:0;margin-left:-52px}
.prom-photo::before{content:"";position:absolute;inset:12% 4% 0;background:radial-gradient(55% 55% at 50% 60%,rgba(251,227,77,.2),transparent 72%);z-index:0}
.prom-photo img{position:relative;z-index:1;display:block;margin:0 auto;width:100%;max-width:330px;height:auto;filter:drop-shadow(0 26px 50px rgba(0,0,0,.55));-webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,#000 84%,transparent 100%)}
@media(max-width:1100px){.prom-photo,.prom-photo.right{margin:0}}
/* phones: both founders side by side and smaller, then the two cards full width
   (stacked full-size they made the section ~1400px tall) */
@media(max-width:960px){
  .prom-grid{grid-template-columns:1fr 1fr;gap:12px 14px}
  .prom-photo{order:1}
  .prom-photo img{max-width:190px}
  .prom{order:2;grid-column:1/-1}
}
.prom{border-radius:16px;padding:28px;border:1px solid var(--line);background:var(--surface)}
.prom.can{border-color:rgba(251,227,77,.3);background:linear-gradient(160deg,rgba(251,227,77,.07),rgba(251,227,77,.015))}
.prom h3{font-size:1.08rem;margin-bottom:18px;letter-spacing:-.02em}
.prom ul{list-style:none;margin:0;padding:0}
.prom li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06);color:var(--muted);font-size:.95rem}
.prom li:last-child{border-bottom:none}
.prom .x,.prom .ck{flex-shrink:0;width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;margin-top:2px}
.prom .x{background:rgba(255,255,255,.06);color:#8a877c}
.prom .ck{background:linear-gradient(120deg,var(--brand-2),var(--brand));color:#141200}

/* ---------- two-step booking (blue card + floating logos) ---------- */
#contact{position:relative;overflow:hidden}
.book-card{max-width:1040px;margin:0 auto;background:radial-gradient(110% 150% at 50% -25%,rgba(24,119,242,.3),rgba(24,119,242,.05) 55%,transparent),#0a0d14;border:1px solid rgba(24,119,242,.5);border-radius:30px;padding:60px 36px 44px;box-shadow:0 34px 110px rgba(24,119,242,.16),0 40px 100px rgba(0,0,0,.5);position:relative;overflow:hidden;text-align:center}
.book-card::before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;background:rgba(24,119,242,.17);filter:blur(85px);top:-190px;left:50%;transform:translateX(-50%);pointer-events:none;animation:bxpulse 4.6s ease-in-out infinite}
@keyframes bxpulse{0%,100%{opacity:.65}50%{opacity:1}}
.book-card>*{position:relative}
.bx-h{font-size:clamp(1.9rem,4.2vw,2.9rem);margin-bottom:12px;letter-spacing:-.035em}
.bx-blue{background:linear-gradient(120deg,#8ec5ff,#1877F2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bx-sub{color:var(--muted);max-width:560px;margin:0 auto 34px}
.steplbl{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8ec5ff;border:1px solid rgba(24,119,242,.55);border-radius:999px;padding:5px 13px;margin-bottom:16px;background:rgba(24,119,242,.13)}
.steplbl.y{color:var(--brand);border-color:rgba(251,227,77,.35);background:rgba(251,227,77,.06)}
.book-q{font-size:1.15rem;font-weight:700;letter-spacing:-.02em}
.book-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.opt{border:2px solid rgba(24,119,242,.55);background:rgba(24,119,242,.09);color:#fff;font-size:1.08rem;font-weight:800;padding:22px 12px;border-radius:16px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s,transform .15s;font-family:inherit;animation:optglow 2.8s ease-in-out infinite}
.opt:nth-child(2){animation-delay:.45s}
.opt:nth-child(3){animation-delay:.9s}
@keyframes optglow{0%,100%{box-shadow:0 0 0 0 rgba(24,119,242,0)}50%{box-shadow:0 0 30px rgba(24,119,242,.4)}}
.opt span{display:block;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.6);margin-top:4px}
.opt:hover{background:#1877F2;border-color:#5ea4ff;transform:translateY(-3px);animation:none;box-shadow:0 16px 44px rgba(24,119,242,.5)}
.opt:hover span{color:rgba(255,255,255,.85)}
.opt.sel{background:#1877F2;border-color:#9cc7ff;box-shadow:0 14px 40px rgba(24,119,242,.5);animation:none}
.opt.sel span{color:rgba(255,255,255,.85)}
#step1.done .book-q,#step1.done .book-opts{display:none}
.spendsum{display:none;align-items:center;justify-content:center;gap:12px;background:var(--surface);border:1px solid rgba(24,119,242,.4);border-radius:12px;padding:12px 18px;font-size:.92rem;color:var(--muted)}
.spendsum b{color:#8ec5ff}
.spendsum button{background:none;border:none;color:#8ec5ff;font-family:inherit;font-weight:700;font-size:.8rem;text-decoration:underline;cursor:pointer;border-color:rgba(24,119,242,.5)}
#step1.done .spendsum{display:flex}
.cal-wrap{max-height:0;overflow:hidden;transition:max-height .8s ease;margin-left:-36px;margin-right:-36px}
.cal-wrap.open{max-height:5000px}
.cal-inner{margin:26px 0 0;border-top:1px solid rgba(255,255,255,.08);padding-top:26px;text-align:center}
.cal-inner .note{text-align:center;color:var(--muted);font-size:.92rem;margin:12px 0 18px}
.cal-inner iframe{width:100%;height:1100px;min-height:1100px;border:none;overflow:hidden;border-radius:14px;background:#fff;display:block}
#bookcard.wide{width:min(1400px,calc(100vw - 56px));max-width:none;margin-left:calc(50% - min(700px,calc(50vw - 28px)));margin-right:0}

/* ---------- floating glass nav ("dynamic island") ---------- */
body{padding-top:158px}
header.nav.floatnav{position:fixed;top:44px;left:50%;transform:translateX(-50%);width:min(1400px,calc(100% - 24px));z-index:60;
  border-radius:999px;border:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008)),rgba(6,6,6,.68);
  -webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.03),0 18px 50px rgba(0,0,0,.6);
  transition:top .35s ease,width .35s ease,background .35s ease,box-shadow .35s ease}
.floatnav .nav-inner{height:76px;padding:0 30px;transition:height .35s ease}
header.nav.floatnav.shrunk{top:12px;width:min(1320px,calc(100% - 24px));background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.006)),rgba(4,4,4,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 40px rgba(0,0,0,.68)}
.floatnav.shrunk .nav-inner{height:62px}
/* outlined nav CTA (image-1 style), ~20% shorter, orbit ring kept */
.floatnav .nav-cta .btn-primary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.32);
  box-shadow:none;padding:10px 20px;font-size:.93rem;gap:8px}
.floatnav .nav-cta .btn-primary:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.55);transform:translateY(-1px);box-shadow:0 8px 26px rgba(251,227,77,.14)}
.floatnav .nav-cta .btn-primary .arr{width:17px;height:17px;flex-shrink:0;transition:transform .2s}
.floatnav .nav-cta .btn-primary:hover .arr{transform:translateX(3px)}
.floatnav .menu.open{top:78px;border-radius:20px;border:1px solid var(--line)}
@media(max-width:960px){
  body{padding-top:118px}
  header.nav.floatnav{top:22px;width:calc(100% - 20px);border-radius:24px}
  .floatnav .nav-inner{height:62px;padding:0 14px;gap:12px}
  .floatnav .menu.open{top:86px}
  /* portfolio-style mobile bar: burger left, wordmark, lit Book a Call right */
  .floatnav .burger{order:0;display:flex;margin:0}
  .floatnav .brand{order:1}
  .floatnav .brand .lk{width:150px;height:19px}
  .floatnav .brand .lk img{height:19px}
  .floatnav .nav-cta{order:2;display:flex;margin-left:auto}
  .floatnav .nav-phone{display:none}
  .floatnav .nav-cta .btn-primary{padding:9px 15px;font-size:.82rem;gap:6px}
  .floatnav .nav-cta .btn-primary .arr{width:15px;height:15px}
}
@media(max-width:420px){
  .floatnav .brand .lk{width:120px;height:15px}
  .floatnav .brand .lk img{height:15px}
  .floatnav .nav-cta .btn-primary{padding:8px 12px;font-size:.76rem}
}

/* ---------- mobile hero: pill, headline, photo, short copy, CTA ---------- */
@media(max-width:960px){
  .hero{padding:26px 0 40px}
  /* full-width buttons: keep the orbit glow tight so it never reads as a filled box */
  .hero-cta .btn{width:100%}
  .btn-orbit::after{inset:-3px;filter:blur(7px);opacity:.65}
  .hero-grid{display:flex;flex-direction:column;gap:16px}
  .hero-copy{display:contents}
  .hero-copy .metapill{order:1;align-self:flex-start}
  .hero-copy h1{order:2;margin:6px 0 0}
  .hero-art{order:3;max-width:420px;margin:0 auto;width:100%}
  .hero-copy .lead{order:4;margin:0}
  .hero-copy .hero-cta{order:5;margin:4px 0 0}
  .hero-copy .platforms{order:6;margin-top:6px}
  .hero-art .hero-team{width:100%;margin-left:0}
}

/* ---------- highlights as YELLOW LETTERS, never a fill block (the block collided with the line above) ---------- */
.hl{background:none;color:var(--brand);padding:0;border-radius:0}
h1,h2{line-height:1.2}
.sec-head h2,.midcta-card h2,.cta-band h2{line-height:1.25}

/* ---------- looping light running around the founders photo ---------- */
.hero-art{position:relative}
.hero-art .hero-badge{z-index:3}               /* keeps position:absolute from style.css */
/* the photo + its traced outline share one box, so the light lands exactly on the cut-out */
.hero-shot{position:relative;width:116%;max-width:none;margin-left:-8%;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
.hero-art .hero-shot .hero-team{width:100%;margin-left:0;-webkit-mask-image:none;mask-image:none;position:relative;z-index:1}
/* RIM PULSE: both founders light up all around at once, fade out, rest, repeat.
   Nothing travels. Pre-baked rim mask + an opacity-only animation (GPU composited). */
.hero-rim{position:absolute;inset:0;z-index:2;pointer-events:none;
  -webkit-mask:url(../img/hero-rim.png?v=2) center/100% 100% no-repeat;
  mask:url(../img/hero-rim.png?v=2) center/100% 100% no-repeat;
  background:radial-gradient(65% 75% at 50% 42%,rgba(253,238,160,.9),rgba(251,227,77,.8) 55%,rgba(251,227,77,.68));
  mix-blend-mode:screen;opacity:.08;will-change:opacity;
  animation:rimpulse 5.2s ease-in-out infinite}
@keyframes rimpulse{
  0%{opacity:.06}
  34%{opacity:.8}      /* both bloom at once, softly */
  70%{opacity:.06}     /* fade away */
  100%{opacity:.06}    /* hold, then again */
}
@media(max-width:960px){.hero-shot{width:100%;margin-left:0}}

/* ---------- plain-color H1 (no fill block) + reusable outlined-arrow button ---------- */
.ytx{color:var(--brand)}
/* Bigger headline, broken after "We are" and after "Agency". The long middle phrase is
   allowed to wrap — forcing it onto one line starves the founders photo of its column. */
.hero-h1{font-size:clamp(2.35rem,4.9vw,3.95rem);line-height:1.08;letter-spacing:-.03em}
.hero-h1 .shopbag{height:.78em;vertical-align:-.04em}
/* must sit AFTER the base rule to win — keeps "for DTC & Online Stores" on one line on phones */
@media(max-width:960px){.hero-h1{font-size:clamp(1.85rem,7.1vw,2.45rem)}}
@media(min-width:961px){.hero-grid{grid-template-columns:1.15fr .85fr}}
/* solid dark face: the orbit glow sits BEHIND the button (z-index:-1), so a transparent
   face let it bleed through and read as a filled yellow box at full width on mobile */
.btn-outline{background:#08080a;color:#fff;border:1px solid rgba(255,255,255,.32);box-shadow:none;gap:8px}
.btn-outline:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.55);transform:translateY(-2px);box-shadow:0 8px 26px rgba(251,227,77,.14)}
.btn-outline .arr{width:17px;height:17px;flex-shrink:0;transition:transform .2s}
.btn-outline:hover .arr{transform:translateX(3px)}

/* ---------- hero meta pill + shopify glyph ---------- */
.metapill{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.13);padding:10px 20px;border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.4)}
.metapill .dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px rgba(34,197,94,.9);animation:dotpulse 2s ease-in-out infinite}
@keyframes dotpulse{0%,100%{opacity:1;box-shadow:0 0 10px rgba(34,197,94,.9)}50%{opacity:.6;box-shadow:0 0 4px rgba(34,197,94,.4)}}
.metapill img{height:19px;width:auto;display:block}
h1 .shopbag{display:inline-block;height:.82em;width:auto;vertical-align:-.06em;margin-right:.08em}

/* ---------- 3D coverflow video testimonials (from /john/) ---------- */
.vwrap{position:relative;margin-top:46px}
.vtrack{position:relative;height:600px;perspective:1400px}
.vitem{position:absolute;left:50%;top:0;width:260px;margin-left:-130px;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .55s,filter .55s;cursor:pointer}
.vitem video{width:260px;aspect-ratio:9/16;object-fit:cover;border-radius:18px;border:1px solid var(--line);background:#0c0c0e;display:block;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.vitem:not(.on){filter:brightness(.5) saturate(.8)}
.vitem:not(.on) video{pointer-events:none}
.vitem.on video{border-color:rgba(251,227,77,.5);box-shadow:0 34px 90px rgba(0,0,0,.7),0 0 55px rgba(251,227,77,.14)}
.vitem figcaption{margin-top:13px;text-align:center;opacity:0;transition:opacity .4s}
.vitem.on figcaption{opacity:1}
.vitem b{display:block;font-size:.92rem;letter-spacing:-.01em}
.vitem figcaption span{color:#8a877c;font-size:.76rem}
.varrow{position:absolute;top:38%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:rgba(5,5,5,.88);color:var(--brand);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;backdrop-filter:blur(4px)}
.varrow:hover{background:rgba(251,227,77,.14)}
.varrow.prev{left:-12px}.varrow.next{right:-12px}
@media(max-width:700px){.vtrack{height:520px}.varrow.prev{left:2px}.varrow.next{right:2px}}

/* ---------- live IG video strip (matches /john/) ---------- */
#instagram .ig-strip{cursor:grab}
#instagram .ig-strip img.rl-img,#instagram .ig-strip video.rl{width:196px;height:245px;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.08);flex-shrink:0;display:block;background:#0c0c0e}
#instagram .ig-end{width:150px;min-height:245px}

/* ---------- Recent projects (alternating case-study rows, from /john/, colors verbatim) ---------- */
.cslist{margin-top:26px;text-align:left}
.csrow{display:grid;grid-template-columns:.82fr 1.18fr;gap:46px;align-items:center;padding:54px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.csrow>*{min-width:0}
.csrow:last-child{border-bottom:none}
.csrow.flip{grid-template-columns:1.18fr .82fr}
.csrow.flip .cs-info{order:2}
.cs-info{text-align:center}
.cs-tag{display:inline-block;background:rgba(251,227,77,.09);border:1px solid rgba(251,227,77,.28);color:var(--brand);font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:999px;margin-bottom:12px}
.cs-info h3{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.03em;line-height:1.15}
.cs-stats{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px;margin-top:26px}
.cs-stats div:nth-child(3){grid-column:1/-1}
.cs-stats .k{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8a877c;margin-bottom:6px}
.cs-stats .v{display:block;font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:800;letter-spacing:-.03em;background:linear-gradient(120deg,var(--brand-2),var(--brand));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:12px;border-bottom:2px solid rgba(251,227,77,.45)}
.cs-stats .v.small{font-size:clamp(1.15rem,2vw,1.4rem);-webkit-text-fill-color:var(--ink);background:none;font-weight:700}
.shotwrap{border-radius:16px;border:1px solid var(--line);overflow:hidden;background:#0d0d0f;box-shadow:0 26px 70px rgba(0,0,0,.5);transition:border-color .3s,box-shadow .3s}
.shotwrap .bar{display:flex;align-items:center;gap:6px;background:#111113;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
.shotwrap .bar i{width:8px;height:8px;border-radius:50%;background:#2c2c30}
.shotwrap .bar span{margin-left:6px;color:#8a877c;font-size:.68rem;font-weight:600}
.panhint .mh{display:none}
/* blue accent on flipped rows — exact /john/ colors */
.csrow.flip .cs-tag{color:#8ec5ff;border-color:rgba(24,119,242,.42);background:rgba(24,119,242,.09)}
.csrow.flip .cs-stats .v{background:linear-gradient(120deg,#8ec5ff,#1877F2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;border-bottom-color:rgba(24,119,242,.5)}
.csrow.flip .cs-stats .v.small{-webkit-text-fill-color:var(--ink);background:none}
.csrow:hover .shotwrap{border-color:rgba(24,119,242,.4);box-shadow:0 26px 70px rgba(0,0,0,.5),0 0 44px rgba(24,119,242,.13)}
.csrow:not(.flip):hover .shotwrap{border-color:rgba(251,227,77,.35);box-shadow:0 26px 70px rgba(0,0,0,.5),0 0 44px rgba(251,227,77,.12)}
@media(max-width:960px){
  .csrow,.csrow.flip{grid-template-columns:1fr;gap:22px;padding:40px 0}
  .csrow.flip .cs-info{order:0}
}
@media(max-width:560px){
  .panhint .dh{display:none}
  .panhint .mh{display:inline}
}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .diff-grid{grid-template-columns:1fr}   /* .prom-grid handled above (founders side by side) */
  .prom-photo{margin-right:0}
  .dcards{grid-template-columns:1fr 1fr}
  .adgrid{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:16px}
  .ad-track{animation:none}
  .adwrap{scroll-snap-align:center}
  .book-opts{grid-template-columns:1fr}
  #bookcard.wide{width:auto;max-width:none;margin-left:0;margin-right:0}
  .cal-wrap{margin-left:-18px;margin-right:-18px}
}
@media(max-width:560px){
  .dcards{grid-template-columns:1fr}
  .ad-track .adwrap{flex:0 0 300px;width:300px}
  .book-card{padding:44px 18px 34px}
  .shot-zoom{cursor:pointer}
  .shot-zoom img{transform:none!important}
  .shot-zoom.zoomed img{transform:none!important}
}