/* "See it in action" as a row of tall cards that slides sideways while the
   page scrolls (after the Erez reference). Replaces the old showcase and the
   five long panels in the calm direction; phones get a swipeable row. */
html:not(.sec-calm) .hscroll { display: none; }
.sec-calm .action, .sec-calm .spotlights { display: none !important; }

.hscroll { position: relative; background: #fff; padding: 0 !important; }
.hs-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-top: 72px; box-sizing: border-box; }
.hs-track { display: flex; align-items: stretch; gap: 28px; padding-left: max(24px, calc((100vw - 1280px) / 2)); padding-right: 12vw; will-change: transform; width: max-content; }
.hs-intro { width: 440px; flex: none; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding-right: 40px; }
.hs-eyebrow { font: 500 12.5px/1 "Outfit", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.hscroll h2.display { font-size: clamp(56px, 6vw, 92px) !important; line-height: .9 !important; text-align: left; }
.hs-sub { font-size: 20px; line-height: 1.45; color: var(--teal); max-width: 22em; }

.hcard { width: 380px; flex: none; display: flex; flex-direction: column; background: #F6F2EC; border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit; }
.hc-pic { position: relative; height: 300px; overflow: hidden; }
.hc-art { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.hc-dev { position: absolute; left: 50%; bottom: 18px; width: 78%; transform: translateX(-50%); background: #2A2F3A; padding: 7px; border-radius: 16px; box-shadow: 0 18px 30px -16px rgba(20,30,30,.5); }
.hc-dev img { display: block; width: 100%; border-radius: 10px; }
.hcard:hover .hc-art { transform: scale(1.04); }
.hc-txt { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hc-eb { display: flex; justify-content: space-between; font: 500 11.5px/1 "Outfit", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.hc-n { color: var(--rust); }
.hc-t { font: 400 38px/.95 citrus-gothic-rough, "Bebas Neue", Impact, sans-serif; text-transform: uppercase; color: var(--rust); letter-spacing: .01em; margin: 2px 0; }
.hc-b { font-size: 15.5px; line-height: 1.55; color: #4A5656; }
.hc-jv { margin-top: auto; padding-top: 8px; font: 500 13px/1 "Outfit", sans-serif; color: #9A7413; }
.hc-jv::before { content: "✦ "; color: #E0A82E; }
.hc-more { align-items: flex-start; justify-content: flex-end; padding: 32px; gap: 14px; background: var(--teal); color: #fff; }
.hc-more-t { font: 400 44px/.95 citrus-gothic-rough, "Bebas Neue", Impact, sans-serif; text-transform: uppercase; }
.hc-more-l { font: 600 16px/1 "Outfit", sans-serif; border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 4px; }

.hs-bar { position: absolute; left: max(24px, calc((100vw - 1280px) / 2)); right: max(24px, calc((100vw - 1280px) / 2)); bottom: 44px; height: 2px; background: rgba(31,42,43,.1); }
.hs-bar span { display: block; height: 100%; width: 0; background: var(--rust); }

/* short screens: smaller cards so everything fits */
@media (max-height: 820px) and (min-width: 900px) { .hc-pic { height: 240px; } .hcard { width: 340px; } .hc-t { font-size: 32px; } }

/* phones, or when motion is reduced: a row you swipe */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .hscroll { height: auto !important; padding-block: 80px !important; }
  .hs-pin { position: static; height: auto; padding-top: 0; overflow: visible; }
  .hs-track { transform: none !important; width: auto; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; padding: 0 20px 8px !important; gap: 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hs-track::-webkit-scrollbar { display: none; }
  .hs-bar { display: none; }
}
@media (max-width: 899px) {
  .hscroll .hs-pin { display: block; }
  .hs-intro { position: static; width: auto; padding: 0 20px 28px; }
  .hs-track > .hs-intro { display: none; }
  .hcard { width: 78vw; max-width: 340px; scroll-snap-align: start; }
  .hc-pic { height: 220px; }
  .hc-t { font-size: 32px; }
}
/* sticky needs ancestors that clip instead of scroll */
.sec-calm body { overflow-x: clip !important; }
.sec-calm main.illo { overflow: clip !important; }
.sec-calm main.illo > section.hscroll { overflow: visible !important; }

/* activities without an art panel get a soft paint behind the tablet */
.hc-tint { display: block; background: radial-gradient(120% 90% at 50% 10%, #fff8 0%, transparent 60%), var(--tint, #F6F2EC); }

/* ---------- card styles to compare: ?cards=b | c | d ---------- */

/* B. Gallery: tall picture cards, the words on a soft plate at the bottom,
   the sentence shows on hover */
.cards-b .hcard { width: 400px; height: 580px; position: relative; background: var(--tint); }
.cards-b .hc-pic { position: absolute; inset: 0; height: auto; }
.cards-b .hc-dev { top: 22%; bottom: auto; width: 84%; }
.cards-b .hc-txt { position: absolute; left: 14px; right: 14px; bottom: 14px; flex: none; padding: 20px 22px; gap: 6px; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border-radius: 16px; }
.cards-b .hc-b { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s, opacity .4s; }
.cards-b .hcard:hover .hc-b { max-height: 120px; opacity: 1; }
.cards-b .hc-jv { padding-top: 4px; }
.cards-b .hc-more { height: 580px; }

/* C. Quiet screens: no art, the screen itself on its paint, a serif title */
.cards-c .hcard { width: 400px; background: #fff; border: 1px solid rgba(31,42,43,.08); }
.cards-c .hc-pic { height: 290px; background: var(--tint); display: flex; align-items: center; justify-content: center; }
.cards-c .hc-art { display: none; }
.cards-c .hc-dev { position: static; transform: none; width: 82%; background: none; padding: 0; box-shadow: 0 24px 40px -22px rgba(20,40,40,.45); border-radius: 12px; }
.cards-c .hc-dev img { border-radius: 12px; }
.cards-c .hcard:hover .hc-dev { transform: translateY(-4px); transition: transform .5s; }
.cards-c .hc-txt { padding: 26px 28px 30px; }
.cards-c .hc-eb { color: #8A9595; }
.cards-c .hc-t { font: 400 30px/1.15 p22-mackinac-pro, "Fraunces", Georgia, serif; text-transform: none; color: var(--teal); letter-spacing: -.005em; }
.cards-c .hc-b { font-size: 15px; }
.cards-c .hc-more { border: 0; }

/* D. Editorial: no boxes, a big rounded picture and the words under it */
.cards-d .hs-track { gap: 44px; }
.cards-d .hcard { width: 420px; background: none; border-radius: 0; overflow: visible; }
.cards-d .hc-pic { height: 400px; border-radius: 24px; background: var(--tint); }
.cards-d .hc-dev { width: 82%; bottom: 34px; }
.cards-d .hc-txt { padding: 24px 4px 0; gap: 12px; }
.cards-d .hc-eb { justify-content: flex-start; gap: 14px; color: var(--teal); }
.cards-d .hc-n { order: -1; color: var(--rust); }
.cards-d .hc-t { font-size: 42px; }
.cards-d .hc-b { font: 400 17px/1.5 p22-mackinac-pro, "Fraunces", Georgia, serif; color: #3D4A4A; }
.cards-d .hc-jv { margin-top: 2px; }
.cards-d .hc-more { width: 340px; height: 400px; border-radius: 24px; background: var(--teal); padding: 32px; }
@media (max-height: 820px) and (min-width: 900px) { .cards-b .hcard, .cards-b .hc-more { height: 500px; width: 350px; } .cards-d .hc-pic, .cards-d .hc-more { height: 320px; } .cards-d .hcard { width: 360px; } }
@media (max-width: 899px) { .cards-b .hcard, .cards-b .hc-more { height: 480px; } .cards-b .hc-b { max-height: none; opacity: 1; } .cards-d .hc-pic { height: 260px; } .cards-d .hcard { width: 80vw; } }
.cards-c .hc-more { background: var(--teal) !important; color: #fff; justify-content: flex-end; }
/* no extra space above: the section starts right after the photo, cards near the top */
.sec-calm main > section.hscroll { padding-block: 0 !important; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .hs-pin { justify-content: flex-start; padding-top: 120px; }
}