/* Unpuzzle — shared non-inline rules only (resets, keyframes, responsive).
   All visual styling lives inline on the elements themselves. */

html { scroll-behavior:smooth; }
html, body { margin:0; padding:0; background:#111111; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
a { color:#C41F43; text-decoration:none; }
a:hover { color:#111111; }
input, button, select, textarea { font-family:inherit; }

.hx { scrollbar-width:none; }
.hx::-webkit-scrollbar { display:none; }

[data-navlink]:hover { color:#F5F0E6 !important; }
[data-tabnav]:hover { color:#F5F0E6 !important; }
[data-cardlink] { color:inherit; display:block; }
[data-cardlink]:hover { color:inherit; }

@keyframes un-seek { 0% { transform:translateX(-52px) rotate(-10deg); opacity:0 } 65% { transform:none; opacity:1 } 100% { transform:none; opacity:1 } }
@keyframes un-rise { 0% { opacity:0; transform:translateY(16px) } 100% { opacity:1; transform:none } }
@keyframes un-bob { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-5px) } }
@keyframes un-pop { 0% { opacity:0; transform:translateY(8px) scale(.96) } 100% { opacity:1; transform:none } }
@keyframes un-dot { 0%,80%,100% { opacity:.25; transform:translateY(0) } 40% { opacity:1; transform:translateY(-3px) } }
@keyframes un-ring { 0% { opacity:.85; transform:scale(.7) } 100% { opacity:0; transform:scale(2.4) } }
@keyframes un-ripple { 0% { transform:scale(1) } 40% { transform:scale(1.16) } 100% { transform:scale(1) } }
@keyframes un-hover { 0%,100% { transform:translateY(-22px) rotate(-16deg) scale(.86) } 50% { transform:translateY(-27px) rotate(-13deg) scale(.86) } }
@keyframes un-float { 0%,100% { transform:translate(0,0) rotate(0deg) } 50% { transform:translate(10px,-16px) rotate(7deg) } }
@keyframes un-settle { 0% { transform:scale(1) } 40% { transform:scale(1.035) } 100% { transform:scale(1) } }

[data-piece] { will-change:transform,opacity }
svg.un-solved { animation:un-settle .8s cubic-bezier(.3,1.4,.4,1) both }
svg.un-solved path[data-final] { filter:drop-shadow(0 0 16px rgba(196,31,67,.55)) }

[data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.9,.2,1), transform .7s cubic-bezier(.2,.9,.2,1) }
[data-reveal].un-in { opacity:1; transform:none }

/* carousels: the whole block drags, images never eat the gesture */
[data-drag] { cursor:grab; touch-action:pan-x pan-y; }
[data-drag].un-drag { cursor:grabbing; scroll-snap-type:none !important; }
[data-drag] image-slot, [data-drag] img { pointer-events:none; }
/* image-slot puts touch-action:none on its <img>, so a swipe that starts on a photo could not scroll the page.
   On the live site photos are display-only: let touches pass through to the page. (In the editor the
   component flags itself data-editable, so editing is untouched.) */
image-slot:not([data-editable]) { pointer-events:none; }
[data-drag] a, [data-drag] img { -webkit-user-drag:none; }
[data-drag].un-drag, [data-drag].un-drag * { user-select:none; -webkit-user-select:none; }
[data-tilt] { will-change:transform }

/* the responsive puzzle wall — no gap: the pieces interlock.
   Phone gets 6 columns so 36 pieces make a short square, not a long strip. */
[data-wall-grid] { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; }
@media (min-width:520px) { [data-wall-grid] { grid-template-columns:repeat(6,minmax(0,1fr)) !important } }
@media (min-width:900px) { [data-wall-grid] { grid-template-columns:repeat(9,minmax(0,1fr)) !important } }
@media (min-width:1240px) { [data-wall-grid] { grid-template-columns:repeat(12,minmax(0,1fr)) !important } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important } }

/* ───────── TABLET & UP ───────── */
@media (min-width:760px) {
  [data-shell] { max-width:1320px !important; padding-bottom:56px !important; }
  [data-topbar] { max-width:none !important; height:66px !important; padding:0 clamp(28px,4vw,56px) !important; }
  [data-topspacer] { height:66px !important; }
  [data-navlinks] { display:flex !important; }
  [data-bottomnav] { display:none !important; }
  [data-sticky-cta] { bottom:26px !important; left:auto !important; right:clamp(28px,4vw,56px) !important; max-width:none !important; width:auto !important; margin-right:68px !important; }
  [data-fabshell] { bottom:26px !important; max-width:none !important; padding:0 clamp(28px,4vw,56px) !important; }
  [data-chat] { left:auto !important; right:clamp(28px,4vw,56px) !important; width:392px !important; bottom:96px !important; }

  [data-shell] section { padding-left:clamp(28px,4vw,56px) !important; padding-right:clamp(28px,4vw,56px) !important; }
  [data-shell] section > [data-inset] { padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; }
  [data-inset] > h1, [data-inset] > h2, [data-inset] > p, [data-inset] > div { margin-left:0 !important; margin-right:0 !important; }
  [data-inset] > .hx, [data-inset] > [data-people-grid] { padding-left:0 !important; padding-right:0 !important; }
  [data-shell] p { max-width:66ch; }

  [data-shelf] { display:grid !important; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)) !important; gap:22px !important; overflow:visible !important; padding-left:0 !important; padding-right:0 !important; cursor:default !important; }
  [data-shelf] > * { min-width:0 !important; width:auto !important; }
  [data-shelf-end], [data-swipe] { display:none !important; }
  [data-shelf-sm] { display:grid !important; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)) !important; gap:20px !important; overflow:visible !important; padding-left:0 !important; padding-right:0 !important; cursor:default !important; }
  [data-shelf-sm] > * { min-width:0 !important; width:auto !important; }
  [data-shelf-people] > [data-tilt] { min-width:236px !important; width:236px !important; }

  [data-img-grid] { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:14px !important; }
  [data-people-grid] { grid-template-columns:repeat(auto-fill,minmax(212px,1fr)) !important; gap:22px !important; padding:0 !important; }
  [data-gal-grid] { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:16px !important; }
  [data-form-2] { grid-template-columns:1fr 1fr !important; }
  [data-hero-foot] { max-width:820px; }
  [data-hero] { padding-bottom:64px !important; }
  [data-regcard] { max-width:640px !important; margin:0 auto !important; }
  [data-puzzle-pin] { padding-bottom:28px !important; padding-top:24px !important; }
  [data-puzzle-pin] > * { min-height:0 !important; flex:0 1 auto !important; }
  [data-puzzle-pin] svg { height:min(32svh,320px) !important; }
  [data-puzzle-wrap] { margin-top:18px !important; }
}

/* ───────── SHORT VIEWPORTS ───────── */
@media (max-height:700px) {
  [data-puzzle-pin] { padding-top:16px !important; padding-bottom:20px !important; }
  [data-puzzle-pin] svg { height:min(28svh,260px) !important; }
  [data-puzzle-wrap] { margin-top:12px !important; }
  [data-puzzle-pin] h2 { font-size:clamp(26px,6vw,34px) !important; }
  [data-puzzle-pin] p { margin-top:10px !important; font-size:14px !important; }
  [data-puzzle-caption] { margin-top:12px !important; }
}

/* ───────── DESKTOP ───────── */
@media (min-width:1100px) {
  [data-shelf] { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  [data-shelf-sm] { grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
  [data-img-grid] { gap:18px !important; }
  [data-gal-grid] { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  [data-hero] { padding-bottom:84px !important; }
  [data-two] { display:grid !important; grid-template-columns:1.05fr .95fr !important; gap:clamp(40px,5vw,84px) !important; align-items:start !important; }
}