/* 22 Vision — the minimal pass (add-on to 22vision-homepage 2.7.4). Loads after 22vision.css;
   same body.v22-page.v22-page scoping, so later source order wins at equal specificity. Source of truth: the site master v50. */

/* ============================================================
   THE MINIMAL PASS (7 Nov 2026) — header and hero only
   References Piero sent: hosqo.com (the header: four small text
   links, no bar, no pill, no button) and reactdrops.dev (the hero:
   air, a centred headline, one line, two pills, and a row of cards
   peeking in at the bottom). Everything below the hero is untouched.
   Black stays (brand). To go back, delete this block, restore the
   hero-obj markup and the hero-meta, and the row's script.
   ============================================================ */

/* ---- header: text only ---- */
body.v22-page.v22-page .nav{top:0}

body.v22-page.v22-page .nav-in{padding:22px var(--gut);gap:32px;align-items:center}

body.v22-page.v22-page .brand{min-height:0}

body.v22-page.v22-page .brand .mk{height:14px;color:var(--ink)}

body.v22-page.v22-page .nav-links{margin:0 auto;gap:30px}

body.v22-page.v22-page .nav-links a{
  font-size:10.5px;letter-spacing:.17em;font-weight:500;color:var(--mute);
  padding:2px 0;border-bottom:0;transition:color .22s ease}

body.v22-page.v22-page .nav-links a:hover,body.v22-page.v22-page .nav-links a:focus-visible,body.v22-page.v22-page .nav-links a.on{color:var(--ink);border-bottom:0}

body.v22-page.v22-page .nav-links a.on{color:var(--ink-2)}

body.v22-page.v22-page .nav-cta{
  background:transparent;color:var(--ink);height:auto;padding:2px 0;border-radius:0;
  font-size:10.5px;letter-spacing:.17em;font-weight:500;gap:9px;transition:color .22s ease}

body.v22-page.v22-page .nav-cta::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 0 3px rgba(30,215,96,.14);flex:none}

body.v22-page.v22-page .nav-cta:hover{transform:none;color:var(--signal)}

body.v22-page.v22-page .nav-cta span{display:none}
   /* the arrow: the dot is the signal */
body.v22-page.v22-page.v22-scrolled .nav{background:rgba(5,5,5,.6);box-shadow:0 1px 0 rgba(255,255,255,.06)}

body.v22-page.v22-page .burger{width:32px;height:32px;gap:6px;margin-left:0}

body.v22-page.v22-page .burger span{width:18px;height:1px;background:var(--ink-2)}

body.v22-page.v22-page .burger span:nth-child(2){display:none}
   /* two lines, not three */
body.v22-page.v22-page .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}

body.v22-page.v22-page .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-3.5px) rotate(-45deg)}

@media(max-width:980px){
  body.v22-page.v22-page .nav-in{padding:18px var(--gut);gap:22px}

  body.v22-page.v22-page .nav-cta{display:inline-flex;margin-left:auto}
   /* Let's talk stays on a phone: it is text, not a button */
  body.v22-page.v22-page .nav-cta::before{display:none}

  body.v22-page.v22-page .brand .mk{height:13px}

}

body.v22-page.v22-page section[id],body.v22-page.v22-page header[id]{scroll-margin-top:72px}

html.v22-ent body.v22-page.v22-page .nav-in{opacity:0}

body.v22-page.v22-page.v22-reveal .nav-in{opacity:1}


/* ---- hero: air, type, and the work peeking in ---- */
body.v22-page.v22-page .hero{min-height:0;display:block;overflow:hidden}

body.v22-page.v22-page .hero::after{display:none}

body.v22-page.v22-page .hero::before{content:"";position:absolute;left:50%;top:0;width:min(1400px,160vw);height:min(760px,90vh);
  transform:translate(-50%,-24%);pointer-events:none;z-index:0;
  background:radial-gradient(38% 42% at 46% 54%,rgba(30,215,96,.075),transparent 70%),
             radial-gradient(40% 44% at 56% 50%,rgba(0,100,224,.11),transparent 70%)}

body.v22-page.v22-page .hero-in{padding-block:clamp(132px,19vh,188px) 0;text-align:center}

body.v22-page.v22-page .hero-k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:-1px;padding:0;border:0;white-space:nowrap}

body.v22-page.v22-page .hero h1{font-size:clamp(40px,5.6vw,78px);font-weight:700;letter-spacing:-.045em;line-height:1}

body.v22-page.v22-page .hero h1 .sub{color:var(--signal)}

body.v22-page.v22-page .hero p{margin:24px auto 0;max-width:46ch;font-size:14.5px;line-height:1.8;color:var(--ink-2)}

body.v22-page.v22-page .cta-row{margin-top:30px;gap:10px}

body.v22-page.v22-page .btn{min-height:44px;font-size:10.5px;letter-spacing:.15em}

body.v22-page.v22-page .btn-p{padding:0 24px}

body.v22-page.v22-page .btn-g{padding:0 24px;border-color:rgba(255,255,255,.12);color:var(--ink-2)}

body.v22-page.v22-page .btn-g:hover{border-color:rgba(255,255,255,.3);color:var(--ink)}

body.v22-page.v22-page .hero-meta{display:none}
   /* the handle sits in the footer; the row takes this edge */

/* the row: the work, drifting slowly under the type, cut off at the bottom
   the way reactdrops cuts its cards. Images are copied from the gallery by
   script so the page carries each one once. */
body.v22-page.v22-page .hero-row{position:relative;z-index:2;margin-top:clamp(56px,8vh,84px);height:clamp(112px,12.6vw,176px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(#000 62%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(#000 62%,transparent);
  mask-composite:intersect}

body.v22-page.v22-page .hero-track{position:absolute;left:0;top:0;display:flex;gap:clamp(12px,1.4vw,18px);width:max-content;will-change:transform}

body.v22-page.v22-page .hr-card{position:relative;flex:0 0 auto;width:clamp(300px,34vw,480px);aspect-ratio:1200/522;border-radius:20px;overflow:hidden;
  background:var(--panel);text-decoration:none;color:inherit;isolation:isolate}

body.v22-page.v22-page .hr-card img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;opacity:.92;
  transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .4s ease}

body.v22-page.v22-page .hr-card:hover img{transform:scale(1.03);opacity:1}

body.v22-page.v22-page .hr-card span{position:absolute;left:18px;bottom:16px;z-index:2;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  text-shadow:0 1px 10px rgba(5,5,5,.9);opacity:0;transition:opacity .3s ease}

body.v22-page.v22-page .hr-card:hover span{opacity:1}

@media(prefers-reduced-motion:no-preference){
  body.v22-page.v22-page .hero-row.run .hero-track{animation:hrdrift var(--hr-dur,80s) linear infinite}

  body.v22-page.v22-page .hero-row:hover .hero-track{animation-play-state:paused}

}

@keyframes hrdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(var(--hr-w,50%) * -1),0,0)}}

@media(prefers-reduced-motion:reduce){
  body.v22-page.v22-page .hero-row{overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(#000 52%,transparent);-webkit-mask-image:linear-gradient(#000 52%,transparent)}

  body.v22-page.v22-page .hero-track{position:relative}

}

html.v22-ent body.v22-page.v22-page .hero-row{opacity:0}

body.v22-page.v22-page.v22-reveal .hero-row{animation:v22heroup .9s cubic-bezier(.22,1,.36,1) .36s both}


/* the clients strip sits right under the cut */
body.v22-page.v22-page .logos{border-top:0;padding-top:clamp(28px,4vw,48px)}

body.v22-page.v22-page .logos::before{display:none}


@media(max-width:700px){
  body.v22-page.v22-page .hero-in{padding-block:118px 0;text-align:center}

  body.v22-page.v22-page .hero h1{font-size:clamp(38px,10.4vw,50px);line-height:1}

  body.v22-page.v22-page .hero p{margin:20px auto 0;max-width:30ch;font-size:13.5px}

  body.v22-page.v22-page .cta-row{margin-top:26px;flex-direction:row;justify-content:center;align-items:center}

  body.v22-page.v22-page .cta-row .btn{width:auto;min-height:44px}

  body.v22-page.v22-page .btn-p{padding:0 20px;min-height:44px}

  body.v22-page.v22-page .btn-g{padding:0 20px;min-height:44px}

  body.v22-page.v22-page .hero-row{margin-top:44px;height:clamp(84px,24vw,120px)}

  body.v22-page.v22-page .hr-card{width:clamp(220px,62vw,300px);border-radius:16px}

}


/* the loader: a plain fade. The block has nowhere to fly to now. */
body.v22-page.v22-page .v22ent-blk,body.v22-page.v22-page .v22ent-glow{display:none}