/* rocco · homepage hero: one picture in three layers (photo, headline, puppy) */
/* ─── hero b · "Depth" ─────────────────────────────────────────────
   One picture, three layers: photo, headline, puppy. The headline sits
   between the photo and a registered cutout of the same puppy, so the dog
   lies on top of the type. Everything inside the stage is sized in cqw
   against .hx-b__wrap, so the composition scales as a single picture. */
.hx-b{--hx-m:clamp(10px,1.4vw,20px);--hx-wall:linear-gradient(90deg,#b99387 0%,#c09a8e 2.5%,#c7a195 5%,#c9a499 7.5%,#cea99f 10%,#d1aca1 12.5%,#d3aea5 15%,#d4afa7 17.5%,#d6b0a8 20%,#d8b2aa 22.5%,#d8b2aa 25%,#d8b2ab 27.5%,#d9b3ac 30%,#d9b3ac 32.5%,#d8b2aa 35%,#d8b2a9 37.5%,#d8b2a9 40%,#d6b1a9 42.5%,#d7b1a9 45%,#ddb8b0 47.5%,#e5c3bb 50%,#e7c6bd 52.5%,#e7c7bf 55%,#edcec7 57.5%,#edd0c9 60%,#eecfc9 62.5%,#edcec8 65%,#ebccc7 67.5%,#e9cbc4 70%,#e9cbc3 72.5%,#e7c8c0 75%,#e5c7bf 77.5%,#e4c6be 80%,#e2c3bb 82.5%,#e0bfb8 85%,#dbb9b2 87.5%,#d4b1aa 90%,#cdaaa4 92.5%,#c7a49c 95%,#c09e96 97.5%,#b8978f 100%)}
.hx-b__wrap{width:min(100% - 2*var(--hx-m),1560px);margin-inline:auto;container-type:inline-size}


/* stage: the pillow frame */
.hx-b__hero{position:relative;margin-top:12px}
.hx-b__stage{height:clamp(40cqw,calc(100svh - 214px),50cqw);--csh:rgba(70,34,40,.24)}
.hx-b__cut{position:absolute;inset:0;border-radius:56px;overflow:hidden;background:var(--green)}
.hx-b__cut.is-cut{bottom:-30px;border-radius:0}
.hx-b__wall{display:none}
.hx-b__scene{position:absolute;left:0;top:calc(-1.9cqw + 18px);width:100cqw;aspect-ratio:2400/1340}
.hx-b__photo,.hx-b__fg{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.hx-b__fg{z-index:2;pointer-events:none;transform-origin:72% 61%}
.hx-b .hx-b__title{position:absolute;z-index:1;left:0;right:0;top:2.94cqw;text-align:center;white-space:nowrap;
  font-size:14.4cqw;line-height:1;letter-spacing:-.045em;color:#141a16;text-wrap:nowrap;
  clip-path:inset(-.3em -.3em .152em -.3em);
  translate:calc(var(--px,0)*-.9cqw) calc(var(--py,0)*-.3cqw);transition:translate .6s var(--ease)}
.hx-b__title span{display:inline-block}
.hx-b__br{display:none}

/* puffy rim and the seam, drawn over the photo */
.hx-b__puff,.hx-b__seam{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hx-b__puff{z-index:3}
.hx-b__seam{z-index:3}
.hx-b__lo{fill:none;stroke:rgba(88,40,48,.34);stroke-width:34px;transform:translate(-2px,-6px)}
.hx-b__hi{fill:none;stroke:rgba(255,255,255,.26);stroke-width:16px;transform:translate(2px,6px)}

/* fabric UI */
.hx-b__pocket{position:absolute;z-index:4;left:3.5cqw;bottom:calc(3.9cqw + 6px);width:clamp(252px,27cqw,410px);display:grid;gap:clamp(12px,1.25cqw,20px);justify-items:start}
.hx-b__patch{padding:clamp(13px,1.3cqw,20px) clamp(16px,1.6cqw,26px) clamp(14px,1.4cqw,22px);transform:rotate(-1.4deg);--csh:rgba(60,30,20,.3)}
.hx-b__sub{font-family:var(--f-m);font-weight:500;font-size:clamp(12.5px,1.06cqw,16px);line-height:1.5;color:var(--ink);text-wrap:balance}
.hx-b__cta{display:flex;align-items:center;gap:clamp(16px,1.7cqw,28px);width:max-content}
.hx-b .hx-b__shop{min-height:clamp(54px,4.5cqw,68px);font-size:clamp(17px,1.4cqw,21px);padding-inline:clamp(42px,3.5cqw,56px)}
.hx-b .hx-b__dibs{font-size:clamp(13.5px,1.08cqw,16px);gap:8px;padding-bottom:6px}
.hx-b__dibs svg{width:1.3em;height:1.3em}

.hx-b .hx-b__note{position:absolute;z-index:4;left:15.5cqw;top:calc(14.7cqw + 18px);font-size:clamp(17px,1.95cqw,30px);transform:rotate(-5deg);white-space:nowrap}
.hx-b__arrow{position:absolute;left:calc(100% + .35em);top:.1em;width:5.4em;height:2.4em;color:var(--green);overflow:visible;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

.hx-b .hx-b__sticker{position:absolute;z-index:4;right:4.2cqw;bottom:4.6cqw;width:clamp(88px,8.6cqw,134px);font-size:clamp(11px,1.04cqw,16px);transform:rotate(9deg)}

.hx-b .hx-b__label{position:absolute;z-index:-2;right:8.5cqw;top:calc(100% - 20px);padding-top:38px;transform:rotate(2.5deg);transform-origin:50% 0;transition:transform .5s var(--spring)}
.hx-b .hx-b__label:hover{transform:rotate(-2deg)}
.hx-b__label i{width:15px;height:15px;border-radius:50%;background:url(/assets/img/sw-forest.webp) center/260% auto;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.3)}


@keyframes hx-b-breathe{from{transform:scale(1)}to{transform:scale(1.006,1.02)}}
@keyframes hx-b-sink{from{opacity:0;transform:translateY(-.24em)}60%{opacity:1}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hx-b__fg{animation:hx-b-breathe 4.2s ease-in-out infinite alternate}
  .hx-b__title span{animation:hx-b-sink .95s var(--spring) both;animation-delay:calc(var(--i)*110ms + 120ms)}
}
@media (prefers-reduced-motion:reduce){.hx-b .hx-b__title{translate:none;transition:none}}

/* ─── under 900: copy and buttons step out of the picture ─── */
@media (max-width:899px){
  .hx-b__stage{height:50cqw}
  .hx-b__pocket{position:static;width:auto;margin:22px 6px 0;justify-items:stretch}
  .hx-b__patch{transform:none}
}

/* ─── under 720: portrait crop centred on the puppy ─── */
@media (max-width:719px){
  .hx-b__hero{margin-top:10px}
  .hx-b__stage{height:110cqw}
  .hx-b__cut{border-radius:36px}
  .hx-b__lo{stroke-width:22px;transform:translate(-1px,-4px)}
  .hx-b__hi{stroke-width:10px;transform:translate(1px,4px)}
  .hx-b .hx-b__label{display:none}
  .hx-b__cut.is-cut{border-radius:0}
  .hx-b__wall{display:block;position:absolute;left:-66.5cqw;top:0;width:170cqw;height:40cqw;background:var(--hx-wall)}
  .hx-b__scene{left:-66.5cqw;top:22cqw;width:170cqw}
  .hx-b__photo{-webkit-mask-image:linear-gradient(#0000,#000 11cqw);mask-image:linear-gradient(#0000,#000 11cqw)}
  .hx-b .hx-b__title{left:73.2cqw;right:auto;top:-11.6cqw;text-align:left;font-size:22.8cqw;line-height:.86;white-space:nowrap;clip-path:inset(-.3em -.3em .0845em -.3em)}
  .hx-b__br{display:inline}
  .hx-b .hx-b__note{left:auto;right:7cqw;top:auto;bottom:6.5cqw;color:var(--paper);font-size:5.2cqw;transform:rotate(-4deg)}
  .hx-b__arrow{left:auto;right:calc(100% + 1cqw);top:auto;bottom:.5em;color:var(--paper);transform:rotate(190deg)}
  .hx-b .hx-b__sticker{right:5cqw;top:6.5cqw;bottom:auto;width:21cqw;font-size:2.9cqw}
  .hx-b__pocket{margin:20px 10px 0;gap:18px;justify-items:stretch}
  .hx-b__patch{transform:rotate(-1.4deg);justify-self:start;margin-left:6px;max-width:calc(100% - 28px);padding:13px 18px 14px}
  .hx-b__cta{flex-direction:column;width:auto;gap:18px}
  .hx-b .hx-b__shop{width:100%;min-height:62px;font-size:19px}
  .hx-b .hx-b__dibs{font-size:15px}
  .hx-b__sub{font-size:13.5px}
}

/* ─── integration and judged fixes ─────────────────────────────────
   Shares the page nav. Copy rail lines up with the sections below.
   The headline is left aligned on that rail so the g of "right" keeps
   its hook on the wall, and the puppy only tucks over stems. */
.hx-b{--hx-site-l:max(var(--gut),calc((100vw - var(--wrap)) / 2));--hx-hero-l:max(var(--hx-m),calc((100vw - 1480px) / 2));--hx-rail:max(3.6cqw,calc(var(--hx-site-l) - var(--hx-hero-l)));padding-top:2px}
.hx-b__wrap{width:min(100% - 2*var(--hx-m),1480px)}
.hx-b__hero{margin-top:clamp(10px,1.1vw,16px)}
.hx-b__stage{height:clamp(40cqw,calc(100svh - 196px),49cqw)}
.hx-b .hx-b__title{left:var(--hx-rail);right:auto;text-align:left;word-spacing:.04em;clip-path:inset(-.3em)}
.hx-b__fg{filter:url(#hx-b-matte)}
.hx-b__seam{z-index:1}
.hx-b__lo{stroke:rgba(40,30,30,.5)}
.hx-b__hi{stroke:rgba(255,255,255,.5)}
.hx-b__puff{mix-blend-mode:multiply;opacity:.9}

.hx-b__pocket{left:var(--hx-rail);width:auto;max-width:min(40cqw,440px)}
.hx-b__patch{width:max-content;max-width:100%}
.hx-b__sub{font-size:clamp(14px,1.2cqw,18.5px);max-width:27ch;text-wrap:pretty}
.hx-b .hx-b__dibs{font-size:clamp(14px,1.08cqw,16px);color:var(--ink)}
.hx-b .hx-b__dibs svg{color:var(--pink)}

.hx-b .hx-b__note{left:55cqw;top:auto;bottom:6.4cqw;color:var(--paper);transform:rotate(-4deg);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.hx-b__arrow{left:auto;right:calc(100% + .45em);top:auto;bottom:.55em;color:var(--paper);transform:rotate(190deg)}
.hx-b .hx-b__sticker{width:clamp(100px,8.6cqw,134px);font-size:clamp(12.5px,1.04cqw,16px);line-height:1.1}
.hx-b .hx-b__label{font-size:13px;top:calc(100% - 16px);z-index:-2}

@media (max-width:1100px){
  .hx-b__cta{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:899px){
  .hx-b__pocket{max-width:none;margin:-24px 12px 0;position:relative;z-index:4;gap:14px}
  .hx-b__patch{width:auto;justify-self:stretch;transform:rotate(-1deg)}
  .hx-b__sub{max-width:none;text-align:center;font-size:15px;text-wrap:balance}
  .hx-b__cta{align-items:stretch;width:auto}
  .hx-b .hx-b__dibs{justify-self:center;align-self:center}
}
@media (max-width:719px){
  .hx-b__stage{height:104cqw}
  .hx-b__wall{left:-57.5cqw}
  .hx-b__scene{left:-57.5cqw}
  .hx-b .hx-b__title{left:calc(57.5cqw + 6.7cqw);top:-13.6cqw;clip-path:inset(-.3em)}
  .hx-b__pocket{margin:-22px 10px 0;gap:14px}
  .hx-b__patch{margin-left:0;max-width:none;padding:14px 20px 15px;transform:rotate(-1deg)}
  .hx-b__cta{gap:14px}
  .hx-b .hx-b__sticker{right:7.5cqw;top:8cqw;width:24cqw;font-size:3.4cqw}
  .hx-b .hx-b__note{left:auto;right:10cqw;bottom:5.4cqw}
}
@media (prefers-reduced-motion:reduce){.hx-b__fg{animation:none}}

/* headline sized so "Sink rig" ends on the wall: the g keeps its hook, the puppy tucks over "ht in." */
.hx-b .hx-b__title{font-size:12.1cqw;top:3.5cqw}
.hx-b .hx-b__sticker{right:5cqw;bottom:auto;top:4.4cqw;transform:rotate(10deg)}
@media (max-width:719px){
  .hx-b .hx-b__title{font-size:22.8cqw;top:-13.6cqw}
  .hx-b .hx-b__sticker{right:7.5cqw;top:8cqw}
}
@media (max-width:899px){ .hx-b__pocket{left:auto} }
@media (max-width:719px){ .hx-b .hx-b__note{right:8cqw;bottom:15cqw;font-size:5cqw} }

/* ─── review round ─── */
.hx-b__hero{margin-top:clamp(16px,1.5vw,22px)}
.hx-b__sub{font-size:clamp(15px,1.32cqw,20px);max-width:31ch;text-wrap:balance}
.hx-b__pocket{max-width:min(44cqw,520px)}
.hx-b__facts{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.hx-b__facts .tag{font-size:clamp(11.5px,.92cqw,13.5px);padding:7px 12px}
.hx-b .hx-b__note{left:60cqw;bottom:9.6cqw}
@media (max-width:899px){
  .hx-b .hx-b__label,.hx-b .hx-b__note{display:none}
  .hx-b__stage{height:54cqw}
  .hx-b__pocket{margin:16px 12px 0}
  .hx-b__facts{justify-content:center}
}
@media (min-width:720px) and (max-width:899px){
  .hx-b__cta{flex-direction:row;align-items:center;justify-content:center;gap:26px}
  .hx-b .hx-b__shop{width:auto;min-width:260px}
}
@media (max-width:719px){
  .hx-b__hero{margin-top:14px}
  .hx-b__stage{height:104cqw}
  .hx-b__pocket{margin:-22px 10px 0}
  .hx-b__facts{display:none}
  .hx-b__wall{left:-62cqw;width:165cqw}
  .hx-b__scene{left:-62cqw;width:165cqw}
  .hx-b .hx-b__title{left:calc(62cqw + 6.7cqw)}
  .hx-b .hx-b__sticker{width:19cqw;font-size:2.8cqw;top:4.6cqw;right:6cqw}
}

/* ─── second review round ─── */
.hx-b__pocket{max-width:none}
@media (min-width:900px){ .hx-b__pocket{max-width:min(44cqw,520px)} }
@media (max-width:719px){ .hx-b .hx-b__sticker{width:max(84px,21cqw);font-size:max(11px,2.9cqw);top:4.4cqw;right:5.4cqw} }
/* phones: the puppy sits a touch lower so the g of "right" keeps its hook */
@media (max-width:719px){
  .hx-b__scene{top:26cqw}
  .hx-b__wall{height:44cqw}
  .hx-b .hx-b__title{top:-17.6cqw}
}

/* ─── Del: extend the hero, point the arrow at the dog ─── */
@media (min-width:900px){
  .hx-b__stage{height:clamp(44cqw,calc(100svh - 124px),60cqw)}
  .hx-b__scene{left:-4cqw;width:108cqw;top:calc(-2cqw + 18px)}
  .hx-b .hx-b__title{left:calc(var(--hx-rail) + 4cqw)}
  .hx-b .hx-b__note{left:63cqw;bottom:9cqw}
  .hx-b__arrow{left:auto;right:calc(100% + .25em);top:auto;bottom:.3em;width:5.4em;height:7.4em;transform:none}
}
/* the arrow stops short of the puppy and points at him, it never sits on him */
@media (min-width:900px){
  .hx-b .hx-b__note{left:64cqw;bottom:8.6cqw}
  .hx-b__arrow{width:3.6em;height:4.6em;right:calc(100% + .2em);bottom:.5em}
}
@media (min-width:900px){ .hx-b__arrow{width:3.1em;height:3.8em} }
/* "right in." in hot pink */
.hx-b .hx-b__title .hx-b__hot{color:var(--pink)}