/* The end of the homepage: the rings CTA, "Let's talk." and the footer. Loaded after the page's own styles and
   built on its tokens (--ink, --bg, --pop-pink, --font-display, --pad-x/y).
   Sources: rings = osmo.supply/product/vault (the "Ready to level up?" section, initRotatingLayers);
   Let's talk + footer = the Open House Creatives site (Warp template animateCTAGrid + footer-section);
   giant wordmark = osmo.supply's footer (initFooterScroll), one SVG mask per letter so each can move. */

/* ── Rings: a photo cut into three rings that turn one after another ─────────────────────────── */
.join{ position:relative; background:var(--bg); padding:calc(var(--pad-y) * 3) var(--pad-x) calc(var(--pad-y) * 4) }
.join__row{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(16px, 1.6vw, 24px); max-width:var(--container); margin:0 auto; align-items:stretch }

.join__visual{
  position:relative; overflow:hidden; padding:clamp(60px, 5vw, 76px) 0 clamp(36px, 3.5vw, 52px);
  background:var(--ink); border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.join__note{
  position:absolute; left:clamp(18px, 2.2vw, 32px); top:clamp(14px, 1.8vw, 26px); z-index:6; margin:0;
  font:400 clamp(26px, 2.4vw, 34px)/1 'Playball', cursive; letter-spacing:-.01em; color:var(--pop-pink);
}

/* the rotating stack. One box for every layer (the wrap), clipped to circles with clip-path, so the photo sits at
   the same spot in every layer and lines up whenever the rings are at 0. Sizes are in cqi (1% of the wrap).
   As in Osmo's, the jumper is taller than the circle: head and feet break out above and below it. */
.rl{
  --cy:65cqi;                                /* circle centre: the wrap is 1 : 1.3, the circle sits in its middle */
  --img-h:130cqi;                            /* the cut-out person, full height of the wrap */
  position:relative; width:min(66%, 420px); aspect-ratio:1 / 1.3; container-type:inline-size;
}
.rl__bg, .rl__img{
  position:absolute; left:50%; top:0; height:var(--img-h); width:auto; translate:-50% 0;
  pointer-events:none; user-select:none; -webkit-user-drag:none;
}
.rl__bg{ z-index:0 }
.rl__layer{ position:absolute; inset:0; z-index:1; transform-origin:50cqi var(--cy); clip-path:circle(50cqi at 50cqi var(--cy)) }
.rl__layer.is--base, .rl__layer.is--2, .rl__layer.is--3{ background:var(--ink) }
.rl__layer.is--2{ clip-path:circle(36.3cqi at 50cqi var(--cy)) }
.rl__layer.is--3{ clip-path:circle(24cqi at 50cqi var(--cy)) }
.rl__h{
  position:absolute; left:0; right:0; top:calc(var(--cy) - 30.6cqi); margin:0; transform-origin:50cqi 30.6cqi;
  font:400 17cqi/0.9 var(--font-display); letter-spacing:-.04em; text-align:center; color:#fff; white-space:nowrap;
}
.rl__marker{
  position:absolute; z-index:5; left:26cqi; top:calc(var(--cy) - 24cqi); width:48cqi; height:48cqi;
  transform-origin:50% 50%; pointer-events:none; color:#fff;
}
.rl__marker svg{ display:block; width:100%; height:100% }

/* the card beside it: the UGC box recipe */
.join__card{
  display:flex; flex-direction:column; justify-content:space-between; gap:40px;
  padding:clamp(24px, 3vw, 44px); background:#fff; border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink);
}
.join__tags{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none }
.join__tag{
  display:inline-flex; align-items:center; gap:10px; padding:6px 12px; font-size:14px; font-weight:500; line-height:1.4;
  background:#fff; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
}
.join__tag::before{ content:''; width:10px; height:10px; background:var(--pop-pink); border:2px solid var(--ink) }
.join__title{ margin:0 0 16px; font:400 clamp(44px, 6.2vw, 96px)/.95 var(--font-display); letter-spacing:-.045em; text-wrap:balance }
.join__text{ margin:0 0 28px; max-width:34ch; font-size:var(--fs-body-lg); line-height:var(--lh-body-lg); letter-spacing:var(--ls-body-lg); color:var(--ink-88, var(--ink)) }
.join__btns{ display:flex; flex-wrap:wrap; gap:12px }
.join__btns .btn{ --pop:var(--pop-pink) }
.join__btns .btn--ink{ background:var(--ink); color:#fff }
/* the hover repeats the pink: the ink ground above outranks the page's own .btn:hover, which left ink text on ink */
@media (hover: hover) and (pointer: fine){ .join__btns .btn--ink:hover{ background:var(--pop); color:var(--ink) } }

@media (max-width: 991px){
  .join__row{ grid-template-columns:minmax(0, 1fr) }
  .rl{ width:min(56%, 340px) }
}
@media (max-width: 479px){
  .rl{ width:68% }
}

/* ── Let's talk: the OHC CTA grid. The photos fly up into a 3 x 4 grid in 3D while the section holds still, the
   overlay darkens, the title's letters drop in and the button rises (OHC animateCTAGrid, same timings).
   A sticky stage inside a tall track instead of a ScrollTrigger pin (no layout shift). ─────────── */
.talk{ position:relative; background:var(--bg); color:var(--ink) }
.talk__track{ height:350vh }
.talk__stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden }
.talk__grid{
  position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:1vw;
  align-content:space-between; place-items:center; width:100%; height:100%;
}
/* the grid waits hidden until footer.js has set every start state and the photos are decoded (.is-live), so a reload,
   Back or #talk landing inside the section never paints the finished card before its entrance, nor a photo after the
   rest of the stage. No JS or reduced motion: it simply shows. The failsafe, if footer.js never runs, is a line of
   script after the section: it lifts the grid a second after the page's load event, however slow the connection
   (a timer here would run out on a slow phone load and paint the finished card before footer.js arrived). */
@media (prefers-reduced-motion: no-preference){
  .js .talk:not(.is-live) .talk__grid{ visibility:hidden }
}
/* rows in svh, the stage's own unit: in vh they overflow the stage whenever a phone's toolbar shows */
.talk__img{
  width:100%; height:24.25vh; height:24.25svh; object-fit:cover; display:block; transform-style:preserve-3d; transform:translate3d(0, 0, .1px);
  user-select:none; -webkit-user-drag:none;
}
.talk__overlay{ position:absolute; inset:0; background:var(--bg); opacity:.8 }
.talk__block{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(16px, 1.11vw, 24px); padding:0 var(--pad-x); text-align:center }
.talk__title{ margin:0; font:400 6.67vw/1 var(--font-display); letter-spacing:-.045em; color:var(--ink) }
.talk__title .ch{ display:inline-block }

/* two buttons in the UGC recipe (2px ink border, hard shadow, pink on hover), each with its arrow in its own tile;
   the label rolls up on hover, the OHC detail */
.talk__btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 16px; margin-top:clamp(4px, .6vw, 10px) }
.talk__btn{
  display:inline-flex; align-items:stretch; min-height:clamp(54px, 3.9vw, 62px); min-width:clamp(180px, 13vw, 220px);
  background:#fff; color:var(--ink); text-decoration:none; border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.talk__btn.is-primary{ background:var(--ink); color:#fff }
.talk__label{ flex:1; display:flex; align-items:center; justify-content:center; padding:0 clamp(20px, 1.8vw, 28px); font-size:clamp(15px, 1.1vw, 17px); font-weight:600; letter-spacing:.01em }
.talk__roll{ position:relative; display:block; height:1.3em; line-height:1.3; overflow:hidden }
.talk__roll span{ display:block; transition:transform .35s cubic-bezier(0.23, 1, 0.32, 1) }
.talk__arrow{ display:grid; place-items:center; width:clamp(50px, 3.7vw, 58px); border-left:2px solid var(--ink) }
.talk__btn.is-primary .talk__arrow{ border-left-color:rgba(255, 255, 255, .28) }
.talk__arrow svg{ width:38%; height:38%; transition:transform .35s cubic-bezier(0.23, 1, 0.32, 1) }
@media (hover: hover) and (pointer: fine){
  .talk__btn:hover{ background:var(--pop-pink); color:var(--ink); transform:translate(-1px, -1px); box-shadow:6px 6px 0 var(--ink) }
  .talk__btn.is-primary:hover .talk__arrow{ border-left-color:var(--ink) }
  .talk__btn:hover .talk__roll span{ transform:translateY(-100%) }
  .talk__btn:hover .talk__arrow svg{ transform:translate(2px, -2px) }
}
.talk__btn:active{ transform:translate(2px, 2px); box-shadow:1px 1px 0 var(--ink) }   /* after :hover, so the press wins */
.talk__btn:focus-visible{ outline:2px solid var(--ink); outline-offset:4px }
@media (max-width: 991px){ .talk__grid{ column-gap:1rem } .talk__title{ font-size:6rem } }
/* phones: a shorter sticky run (200vh of scrub instead of 250vh) */
@media (max-width: 767px){ .talk__track{ height:300vh } .talk__title{ font-size:5rem } }
@media (max-width: 479px){
  .talk__title{ font-size:13.5vw } .talk__img{ height:22vh; height:22svh }
  /* the two buttons share one row inside the gutter, equal halves at every phone width */
  .talk__btns{ flex-wrap:nowrap; gap:12px; width:100%; max-width:360px }
  .talk__btn{ flex:1 1 0; min-width:0 }
  .talk__label{ padding:0 10px }
}

/* ── Footer: the OHC footer on white, then the giant wordmark. OHC reveals its footer from under the page
   (position:sticky); this page has a video plate fixed behind transparent sections, so the same reveal is a
   parallax instead: the footer's content starts higher and settles as the footer scrolls in (footer.js). ── */
.footer{ position:relative; background:var(--bg); color:var(--ink); overflow:hidden; border-top:1px solid var(--ink-24) }
.footer__inner{ will-change:transform }
.footer__wrap{ max-width:var(--container-wide, 1600px); margin:0 auto; padding:0 var(--pad-x) }
.footer__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; padding:clamp(56px, 8.89vw, 128px) 0 clamp(32px, 4.4vw, 64px) }
.footer__block{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; flex:1 1 540px; min-width:0 }
.footer__logo{ display:block; width:clamp(170px, 17vw, 260px); color:var(--ink) }
.footer__logo svg{ display:block; width:100%; height:auto }
.footer__text{ margin:0; max-width:19rem; font-size:15px; line-height:1.5; color:var(--ink-88) }
.footer__cols{ display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:flex-start; gap:clamp(40px, 6vw, 112px) }
.footer__col{ display:flex; flex-direction:column; align-items:center; gap:clamp(12px, 1.2vw, 18px); text-align:center }
.footer__h{ margin:0 0 4px; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-88) }
/* the newsletter capture: the site's field and button recipe */
.news{ width:min(100%, 540px); margin-top:14px }
.news__label{ display:block; margin-bottom:10px; font-size:15px; font-weight:500 }
.news__row{ display:flex; gap:10px }
.news__input{
  flex:1; min-width:0; min-height:50px; padding:0 14px; font:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:2px solid var(--ink); border-radius:0; outline:none;
}
.news__input::placeholder{ color:var(--ink-48, #969fa3) }
.news__input:focus-visible{ box-shadow:3px 3px 0 var(--ink) }
.news.is-error .news__input{ border-color:var(--pop-pink); box-shadow:3px 3px 0 var(--pop-pink) }
.news__btn{
  flex:none; min-height:50px; padding:0 20px; font:inherit; font-size:15px; font-weight:600; cursor:pointer;
  color:#fff; background:var(--ink); border:2px solid var(--ink); border-radius:0; box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.news__btn:active{ transform:translate(2px, 2px); box-shadow:1px 1px 0 var(--ink) }
@media (hover: hover) and (pointer: fine){ .news__btn:hover{ background:var(--pop-pink); color:var(--ink); transform:translate(-1px, -1px); box-shadow:5px 5px 0 var(--ink) } }
.news__btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }
.news.is-busy .news__btn{ opacity:.6; pointer-events:none }
.news__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }
.news__note{ margin:10px 0 0; font-size:13px; color:var(--ink-88) }
.news__note a{ color:inherit; text-underline-offset:3px }
.news__msg{ margin:8px 0 0; font-size:14px; font-weight:600; min-height:1.4em }
.news.is-done .news__row{ display:none }

/* OHC's rolling link: the label slides up and a copy slides in from below */
.footer__link{ position:relative; display:block; overflow:hidden; color:var(--ink-88); font-size:15px; line-height:1.5; text-decoration:none }
.footer__link span{ display:block; transition:transform .35s cubic-bezier(0.23, 1, 0.32, 1) }
.footer__link span + span{ position:absolute; top:100%; left:0; right:0; color:var(--ink) }
@media (hover: hover) and (pointer: fine){ .footer__link:hover span{ transform:translateY(-100%) } }
.footer__link:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }
/* touch: one label, a 44px row, no roll */
@media (hover: none), (pointer: coarse){
  .footer__link{ display:flex; align-items:center; justify-content:center; min-height:44px }
  .footer__link span + span{ display:none }
  .footer__col{ gap:0 }
}
.footer__social{ display:flex; gap:10px }
.footer__social a{
  display:grid; place-items:center; width:40px; height:40px; color:var(--ink); background:#fff;
  border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); transition:background .2s ease;
}
.footer__social svg{ width:16px; height:16px; fill:currentColor }
@media (hover: hover) and (pointer: fine){ .footer__social a:hover{ background:var(--pop-pink); color:var(--ink) } }
.footer__social a:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }
.footer__line{ height:1px; background:var(--ink-24) }
.footer__bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:clamp(18px, 2.2vw, 30px) 0; font-size:13px; color:var(--ink-88) }
.footer__bottom p{ margin:0 }
.footer__bottom a{ color:inherit; text-underline-offset:3px }
.footer__bottom a:hover{ color:var(--ink) }

/* the page's fixed wordmark and burger step aside once the footer (its own wordmark and every link) reaches the top */
.chrome .brand{ transition:opacity .25s ease }
.chrome .burger{ transition:color 200ms var(--ease-expo), scale 160ms ease-out, opacity .25s ease }
.chrome.is-over-footer .brand, .chrome.is-over-footer .burger{ opacity:0; pointer-events:none }

/* the giant wordmark: four stacked ink layers, each masked to one letter (the SVGs share the wordmark's viewBox,
   so the letters sit exactly where the font puts them). On wide screens the letters fan up into place as the footer is
   revealed (Osmo initFooterScroll). */
.footer__mark{
  position:relative; width:calc(100% - var(--pad-x) * 2); max-width:1800px; margin:clamp(8px, 1.5vw, 24px) auto 0;
  aspect-ratio:791.18 / 290.98; overflow:hidden;
}
.footer__letter{
  position:absolute; inset:0; background:var(--ink);
  -webkit-mask-image:var(--mask); mask-image:var(--mask);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  transform-origin:var(--ox) var(--oy); will-change:transform;
}
.footer__letter.is-u{ --mask:url(/images/footer/ugc-u.svg); --ox:20.8%; --oy:47.8% }
.footer__letter.is-g{ --mask:url(/images/footer/ugc-g.svg); --ox:49.6%; --oy:52.4% }
.footer__letter.is-c{ --mask:url(/images/footer/ugc-c.svg); --ox:77.8%; --oy:51.9% }
.footer__letter.is-dot{ --mask:url(/images/footer/ugc-dot.svg); --ox:95.7%; --oy:86% }

@media (max-width: 991px){
  .footer__top{ flex-direction:column; align-items:center; text-align:center; gap:36px }
  /* in the column layout the block's 540px flex basis became a 540px height, a gap under the newsletter */
  .footer__block{ align-items:center; flex:none; width:100% }
  .news{ text-align:left }
  .footer__cols{ justify-content:center; gap:36px 48px }
  .footer__bottom{ justify-content:center; text-align:center }
}
@media (max-width: 767px){
  .footer__top{ padding-top:72px }   /* clear of the section above (the logo sat against it) */
}
@media (max-width: 479px){
  .footer__cols{ display:grid; grid-template-columns:1fr 1fr; gap:36px 24px; width:100% }
}

/* reduced motion: everything in place, nothing turns, flies or fans */
@media (prefers-reduced-motion: reduce){
  .talk__track{ height:auto }
  .talk__stage{ position:relative; height:100vh; height:100svh }
  .footer__letter, .footer__inner{ will-change:auto }
}