/* POLYMATH — opening sections: full-bleed hero, split hero, kinetic type hero and bento hero. */

/* ---------- Full-bleed hero ---------- */
.pm-hero { position: relative; display: grid; min-height: var(--h, 82svh); color: var(--hero-fg, var(--fg)); isolation: isolate; overflow: clip; }
.pm-hero[data-height='small'] { --h: 60svh; }
.pm-hero[data-height='medium'] { --h: 82svh; }
.pm-hero[data-height='full'] { --h: calc(100svh - var(--fold-offset, 0px)); }
.pm-hero[data-height='adapt'] { --h: 0; }
.pm-hero[data-height='adapt'] .pm-hero__media { position: relative; grid-area: 1 / 1; }
.pm-hero[data-height='adapt'] .pm-hero__content { grid-area: 1 / 1; }
.pm-hero[data-text='light'] { --hero-fg: #fff; --btn: #fff; --on-btn: #111; --fg: #fff; --bg: #111; --fg-muted: rgb(255 255 255 / .82); --line: rgb(255 255 255 / .3); }
.pm-hero[data-text='dark'] { --hero-fg: #111; --btn: #111; --on-btn: #fff; --fg: #111; --bg: #fff; --fg-muted: rgb(17 17 17 / .78); --line: rgb(17 17 17 / .2); }
.pm-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--fg-subtle); }
.pm-hero__media > :is(img, video, svg, picture), .pm-hero__media picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-hero__media::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.pm-hero[data-overlay='flat'] .pm-hero__media::after { background: rgb(0 0 0 / var(--o, .3)); }
.pm-hero[data-overlay='bottom'] .pm-hero__media::after { background: linear-gradient(to top, rgb(0 0 0 / min(.85, calc(var(--o, .3) * 1.6))) 0%, rgb(0 0 0 / min(.7, calc(var(--o, .3) * 1.15))) 35%, rgb(0 0 0 / calc(var(--o, .3) * .45)) 70%, rgb(0 0 0 / calc(var(--o, .3) * .2)) 100%); }
.pm-hero[data-overlay='side'] .pm-hero__media::after { background: linear-gradient(90deg, rgb(0 0 0 / min(.85, calc(var(--o, .3) * 1.6))) 0%, rgb(0 0 0 / min(.7, calc(var(--o, .3) * 1.1))) 40%, rgb(0 0 0 / calc(var(--o, .3) * .25)) 80%); }
/* On phones the text spans the width, so the side shade covers it all. */
@media (max-width: 749px) { .pm-hero[data-overlay='side'] .pm-hero__media::after { background: linear-gradient(to top, rgb(0 0 0 / min(.85, calc(var(--o, .3) * 1.6))) 0%, rgb(0 0 0 / min(.7, calc(var(--o, .3) * 1.2))) 50%, rgb(0 0 0 / calc(var(--o, .3) * .5)) 100%); } }
@property --mx { syntax: '<length-percentage>'; inherits: true; initial-value: 68%; }
@property --my { syntax: '<length-percentage>'; inherits: true; initial-value: 40%; }
/* Spotlight: a pool of light in the dark (it follows a mouse pointer with motion on); the lower shade keeps text readable. */
.pm-hero[data-overlay='spotlight'] .pm-hero__media::after { background: radial-gradient(circle at var(--mx) var(--my), transparent 0, transparent 8rem, rgb(0 0 0 / calc(var(--o, .3) * 1.3)) 28rem, rgb(0 0 0 / calc(var(--o, .3) * 2.2)) 60rem), linear-gradient(to top, rgb(0 0 0 / calc(var(--o, .3) * 1.5)), transparent 55%); transition: --mx 1s var(--ease), --my 1s var(--ease); }
/* No pointer on phones and the text spans the width: the pool of light moves up and the lower half stays dark. */
@media (max-width: 749px) { .pm-hero[data-overlay='spotlight'] .pm-hero__media::after { background: radial-gradient(circle at 60% 22%, transparent 0, transparent 5rem, rgb(0 0 0 / calc(var(--o, .3) * 1.2)) 16rem), linear-gradient(to top, rgb(0 0 0 / min(.9, calc(var(--o, .3) * 1.8))) 0%, rgb(0 0 0 / min(.8, calc(var(--o, .3) * 1.5))) 55%, rgb(0 0 0 / calc(var(--o, .3) * .4)) 100%); } }
.pm-hero[data-text='dark'][data-overlay] .pm-hero__media::after { filter: invert(1); }
.pm-hero__media picture { position: absolute; inset: 0; }
.pm-hero__content { position: relative; display: grid; gap: clamp(1rem, 2vw, 1.5rem); align-content: var(--ay, end); justify-items: var(--ax, start); text-align: var(--ta, left); padding-top: calc(var(--header-h, 72px) + clamp(2rem, 5vw, 4rem)); padding-bottom: clamp(2.5rem, 6vw, 5.5rem); }
.pm-hero__content > * { max-width: min(100%, var(--measure, 62rem)); }
.pm-hero__text { max-width: 36rem; color: var(--fg-muted); }
.pm-hero[data-text='light'] .btn--secondary, .pm-hero[data-text='dark'] .btn--secondary { --b-fg: var(--hero-fg); --b-bd: var(--hero-fg); }
.pm-hero__foot { position: absolute; left: 0; right: 0; bottom: 1.25rem; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.pm-hero__foot > * { pointer-events: auto; }
.pm-hero__cue { display: inline-flex; align-items: center; gap: .75rem; font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.pm-hero__cue i { position: relative; display: block; width: 1px; height: 2.75rem; background: rgb(255 255 255 / .25); overflow: hidden; }
.pm-hero[data-text='dark'] .pm-hero__cue i, .pm-hero[data-text='scheme'] .pm-hero__cue i { background: var(--line); }
.pm-hero__cue i::after { content: ''; position: absolute; inset: 0; background: currentColor; animation: pm-cue 2.2s var(--ease-in-out) infinite; }
@keyframes pm-cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
.pm-video-toggle { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: rgb(0 0 0 / .35); color: #fff; backdrop-filter: blur(6px); }
.pm-video-toggle svg { width: 1rem; height: 1rem; }
.pm-video-toggle [data-when='paused'], .pm-video-toggle.is-paused [data-when='playing'] { display: none; }
.pm-video-toggle.is-paused [data-when='paused'] { display: block; }
/* Intro: the picture settles while the heading rises (visible from the first frame, so it never delays paint). */
.js-motion .pm-hero__media > :is(img, video, picture) { animation: pm-hero-settle 2.2s var(--ease) both; }
@keyframes pm-hero-settle { from { transform: scale(1.14); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .js-motion .pm-hero[data-scroll='zoom'] .pm-hero__media { animation: pm-hero-zoom linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .js-motion .pm-hero[data-scroll='shrink'] { animation: pm-hero-shrink linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
    .js-motion .pm-hero[data-scroll] .pm-hero__content { animation: pm-hero-lift linear both; animation-timeline: view(); animation-range: exit 0% exit 80%; }
  }
}
@keyframes pm-hero-zoom { to { transform: scale(1.18) translateY(8%); } }
@keyframes pm-hero-shrink { to { clip-path: inset(6% 4% 0 4% round clamp(12px, 3vw, 40px)); transform: scale(.94); } }
@keyframes pm-hero-lift { to { transform: translateY(-18%); opacity: 0; } }

/* ---------- Split hero ---------- */
.pm-split { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; min-height: var(--h, auto); }
.pm-split[data-height='full'] { --h: calc(100svh - var(--header-h, 72px)); }
.pm-split[data-height='large'] { --h: 78svh; }
@media (max-width: 989px) { .pm-split[data-mobile='image'] .pm-split__media { order: -1; width: min(100%, 26rem); } .pm-split[data-mobile='image'] { gap: 2rem; } .pm-split[data-mobile='image'] .pm-split__frame { max-height: 52svh; max-width: 52svh; margin-inline: auto; } .pm-split[data-mobile='image'] .pm-split__frame:not(.pm-shape--circle) { aspect-ratio: auto; height: min(52svh, 30rem); } }
@media (min-width: 990px) {
  .pm-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pm-split[data-side='left'] .pm-split__media { order: -1; }
  .pm-split[data-balance='text'] { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .pm-split[data-balance='media'] { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}
.pm-split__text { display: grid; gap: clamp(1rem, 2vw, 1.6rem); justify-items: start; }
.pm-split__text .rte { color: var(--fg-muted); max-width: 34rem; }
.pm-split__media { position: relative; isolation: isolate; margin-inline: auto; width: min(100%, 38rem); }
.pm-split__frame { position: relative; aspect-ratio: var(--ratio, 4 / 5); overflow: hidden; border-radius: var(--radius-img); background: var(--surface); }
.pm-split__frame img, .pm-split__frame svg { width: 100%; height: 100%; object-fit: cover; }
.pm-split__frame.pm-shape--arch { border-radius: 999px 999px var(--radius-img) var(--radius-img); }
.pm-split__frame.pm-shape--circle { border-radius: 50%; --ratio: 1; }
.pm-split__frame.pm-shape--blob { border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; animation: pm-morph 16s ease-in-out infinite; }
.pm-split__frame.pm-shape--pill { border-radius: 999px; --ratio: 3 / 5; }
.pm-split__glow { position: absolute; z-index: -1; inset: 10% -8% -6% 12%; border-radius: 48% 52% 60% 40% / 50% 42% 58% 50%; background: var(--accent); opacity: var(--glow-o, 1); animation: pm-morph 18s ease-in-out infinite reverse; }
.pm-split__glow[data-style='ring'] { background: none; border: 2px solid var(--accent); inset: -4% -4% -4% -4%; border-radius: var(--radius-img); animation: none; }
/* The ring follows the frame's shape (its morph animation would otherwise override the radius). */
.pm-split__media:has(.pm-shape--circle) .pm-split__glow[data-style='ring'] { border-radius: 50%; }
.pm-split__media:has(.pm-shape--pill) .pm-split__glow[data-style='ring'] { border-radius: 999px; }
.pm-split__media:has(.pm-shape--arch) .pm-split__glow[data-style='ring'] { border-radius: 999px 999px var(--radius-img) var(--radius-img); }
.pm-split__media:has(.pm-shape--blob) .pm-split__glow[data-style='ring'] { border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; }
.pm-split__float { position: absolute; z-index: 2; width: 40%; aspect-ratio: 1; left: -10%; bottom: -7%; overflow: hidden; border-radius: var(--radius); border: 6px solid var(--bg); box-shadow: var(--shadow); }
.pm-split__float img { width: 100%; height: 100%; object-fit: cover; }
.pm-chip { position: absolute; z-index: 3; left: var(--x, 0%); top: var(--y, 0%); display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.05rem .6rem .7rem; border-radius: 999px; background: var(--bg); color: var(--fg); box-shadow: var(--shadow); font-size: var(--t-small); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.pm-chip__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none; }
.pm-chip__icon svg { width: 1rem; height: 1rem; }
.js-motion:not([data-motion='subtle']) .pm-chip, .js-motion:not([data-motion='subtle']) .pm-split__float { animation: pm-float 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.7s); }
@keyframes pm-float { 50% { transform: translateY(-12px); } }
@keyframes pm-morph { 33% { border-radius: 40% 60% 45% 55% / 55% 40% 60% 45%; } 66% { border-radius: 55% 45% 38% 62% / 42% 58% 42% 58%; } }
@media (max-width: 749px) { .pm-chip { left: clamp(.5rem, var(--x, 0%), 60%); font-size: var(--t-xs); padding: .45rem .8rem .45rem .5rem; white-space: normal; max-width: calc(100% - max(.5rem, var(--x, 0%)) - .5rem); } .pm-chip__icon { width: 1.6rem; height: 1.6rem; } }
.pm-split__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); max-width: 30rem; align-items: start; gap: 1.25rem 2rem; margin-top: .75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.pm-split__stat strong { display: block; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--t-h3); line-height: 1; letter-spacing: var(--heading-tracking); }
.pm-split__stat span { font-size: var(--t-small); color: var(--fg-muted); }

/* ---------- Kinetic type hero ---------- */
.pm-kin { position: relative; overflow: clip; padding-top: calc(var(--header-h, 72px) + clamp(1.5rem, 4vw, 3.5rem)); }
.pm-kin__title { font-size: calc(clamp(3.4rem, 13vw, 15.5rem) * var(--heading-scale)); line-height: .84; letter-spacing: -.02em; margin: 0; text-wrap: nowrap; }
.pm-kin__line { display: block; }
/* Phones: the type carries the first screen, so it scales with the width; the image pills would only crowd it. */
@media (max-width: 749px) { .pm-kin__title { font-size: calc(17.5vw * var(--heading-scale)); } .pm-kin__pill { display: none; } }
.pm-kin__line + .pm-kin__line { margin-top: .05em; }
.pm-kin__drift { display: flex; align-items: center; gap: .14em; white-space: nowrap; justify-content: var(--jc, flex-start); }
.pm-kin__line[data-align='center'] .pm-kin__drift { --jc: center; }
.pm-kin__line[data-align='right'] .pm-kin__drift { --jc: flex-end; }
.pm-kin__line[data-style='outline'] .pm-kin__word { color: transparent; -webkit-text-stroke: max(1.5px, .014em) var(--fg); }
.pm-kin__line[data-style='accent'] .pm-kin__word { color: var(--accent); }
.pm-kin__line[data-style='italic'] .pm-kin__word { font-family: var(--font-accent); font-style: var(--accent-style); font-weight: var(--accent-weight); text-transform: none; letter-spacing: -.01em; }
.pm-kin__pill { display: inline-block; flex: none; width: 1.95em; height: .74em; border-radius: 999px; overflow: hidden; background: var(--surface); transform: translateY(-.02em); }
.pm-kin__pill img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pm-kin__pill:hover img { transform: scale(1.15); }
.pm-kin__star { display: inline-block; width: .55em; height: .55em; color: var(--accent); flex: none; }
.js-motion:not([data-motion='subtle']) .pm-kin__star { animation: pm-spin 9s linear infinite; }
.pm-kin__foot { display: grid; gap: 1.5rem 3rem; align-items: end; padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 990px) { .pm-kin__foot { grid-template-columns: minmax(0, 1fr) auto; } }
.pm-kin__foot .rte { max-width: 34rem; color: var(--fg-muted); font-size: calc(1.1rem * var(--body-scale)); }
.pm-kin__band { border-block: 1px solid var(--line); padding-block: .9rem; font-family: var(--font-heading); text-transform: var(--heading-case); font-size: calc(clamp(1.1rem, 2vw, 1.6rem) * var(--heading-scale)); letter-spacing: .02em; }
.pm-kin__band .pm-marquee__group > span { display: inline-flex; align-items: center; gap: var(--gap-x); }
.js-motion .pm-kin__line { animation: pm-kin-in 1.3s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 100ms); }
.js-motion .pm-kin__line:nth-child(even) { --from: 18%; }
@keyframes pm-kin-in { from { transform: translateX(var(--from, -18%)); opacity: 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js-motion:not([data-motion='subtle']) .pm-kin__drift { animation: pm-drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .js-motion .pm-kin__line:nth-child(even) .pm-kin__drift { animation-name: pm-drift-back; }
  }
}
@keyframes pm-drift { to { transform: translateX(-14%); } }
@keyframes pm-drift-back { to { transform: translateX(14%); } }

/* ---------- Bento hero ---------- */
.pm-bento { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(clamp(10rem, 17vw, 16.5rem), auto); grid-auto-flow: dense; }
@media (min-width: 990px) { .pm-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Phones: tiles go full width (a half-width product tile is too narrow to read); two stat tiles next to each other
   share a row, a lone stat tile takes the full width. */
@media (max-width: 599px) {
  .pm-bento .pm-tile-wrap { grid-column: 1 / -1; grid-row: auto; min-height: 15rem; }
  .pm-bento .pm-tile-wrap:has(.pm-tile__stat) { min-height: 0; }
  .pm-bento .pm-tile-wrap:has(.pm-tile__stat):has(+ .pm-tile-wrap .pm-tile__stat), .pm-bento .pm-tile-wrap:has(.pm-tile__stat) + .pm-tile-wrap:has(.pm-tile__stat) { grid-column: auto; min-height: 11rem; }
  .pm-bento .pm-tile__stat { font-size: calc(2.5rem * var(--heading-scale)); }
  .pm-bento .pm-tile-wrap:has(.pm-tile__stat) .pm-tile__text { font-size: var(--t-small); line-height: 1.35; }
  .pm-bento .pm-tile-wrap[data-size='2x2'] { min-height: 26rem; }
}
.pm-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-width: 0; padding: clamp(1.15rem, 2.2vw, 2rem); border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; isolation: isolate; text-decoration: none; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease), border-color .4s; }
.pm-tile::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 26%, transparent), transparent 55%); opacity: 0; transition: opacity .45s; mix-blend-mode: screen; }
.pm-tile:hover::before { opacity: 1; }
.pm-tile:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.pm-tile > * { position: relative; z-index: 2; }
.pm-tile-wrap { display: grid; min-width: 0; }
.pm-tile-wrap[data-size='2x1'] { grid-column: span 2; }
.pm-tile-wrap[data-size='1x2'] { grid-row: span 2; }
.pm-tile-wrap[data-size='2x2'] { grid-column: span 2; grid-row: span 2; }
@media (max-width: 989px) { .pm-tile-wrap[data-size='2x2'] { min-height: 30rem; } }
.pm-tile__bg { position: absolute !important; inset: 0; z-index: 0 !important; }
.pm-tile__bg img, .pm-tile__bg svg { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.pm-tile:hover .pm-tile__bg img { transform: scale(1.06); }
/* The scrim sits under the text (bottom) and the eyebrow (a thin band at the top); the picture stays clear between. */
.pm-tile__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--bg-rgb) / .95) 0%, rgb(var(--bg-rgb) / .82) 26%, rgb(var(--bg-rgb) / .25) 52%, transparent 64%, transparent 84%, rgb(var(--bg-rgb) / .6) 100%); }
/* Phones: a feature tile's text and buttons would cover most of its picture, so the picture moves above the text
   and fades into the tile; product tiles become compact rows (picture left, name and price right). */
@media (max-width: 599px) {
  .pm-bento .pm-tile:has(.pm-tile__bg):has(.pm-buttons .btn, .pm-tile__text) { justify-content: flex-start; }
  .pm-bento .pm-tile:has(.pm-buttons .btn, .pm-tile__text) .pm-tile__bg { position: relative !important; inset: auto; order: -1; margin: -1.15rem -1.15rem 0; aspect-ratio: 4 / 3; }
  .pm-bento .pm-tile:has(.pm-buttons .btn, .pm-tile__text) .pm-tile__bg::after { background: linear-gradient(to top, rgb(var(--bg-rgb)) 0%, rgb(var(--bg-rgb) / 0) 38%); }
  .pm-bento .pm-tile-wrap:has(.pm-tile__bg):has(.pm-buttons .btn, .pm-tile__text) { min-height: 0; }
  .pm-bento .pm-tile-wrap[data-size] { grid-row: auto; }
  .pm-bento .pm-tile-wrap:has(.pm-tile__product) { min-height: 0; }
  .pm-bento .pm-tile:has(.pm-tile__product) { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: .5rem 1rem; }
  .pm-bento .pm-tile:has(.pm-tile__product) .pm-tile__product { grid-column: 1; grid-row: 1 / 3; min-height: 0; aspect-ratio: 1; }
  .pm-bento .pm-tile:has(.pm-tile__product) .pm-tile__top { grid-column: 2; }
  .pm-bento .pm-tile:has(.pm-tile__product) .pm-tile__meta { grid-column: 2; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .25rem; }
}
.pm-tile__top { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.pm-tile__arrow { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line); flex: none; transition: transform .5s var(--ease), background-color .3s, color .3s; }
.pm-tile__arrow svg { width: 1rem; height: 1rem; }
.pm-tile:hover .pm-tile__arrow { transform: rotate(45deg); background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pm-tile__heading { font-size: var(--t-h3); }
.pm-tile-wrap[data-size='2x2'] .pm-tile__heading { font-size: calc(clamp(2.4rem, 4.4vw, 4.5rem) * var(--heading-scale)); }
.pm-tile__text { color: var(--fg-muted); max-width: 30rem; }
/* On a picture the small text uses the full text colour; the scrim underneath carries the contrast. */
.pm-tile:has(.pm-tile__bg) .pm-tile__text { color: var(--fg); }
/* The product fills its tile area, like a framed photograph (merchant photos crop from the centre). */
.pm-tile__product { position: relative; flex: 1; min-height: 10rem; border-radius: calc(var(--radius) * .7); overflow: hidden; background: var(--surface); }
.pm-tile__product :is(img, svg) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pm-tile:hover .pm-tile__product :is(img, svg) { transform: scale(1.06); }
.pm-tile__stat { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(clamp(2.6rem, 5vw, 4.6rem) * var(--heading-scale)); line-height: .9; letter-spacing: var(--heading-tracking); color: var(--accent-text); }
.pm-tile__meta { display: flex; justify-content: space-between; align-items: end; gap: 1rem; font-size: var(--t-small); }
.pm-tile__link::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.pm-tile__link { text-decoration: none; }
.pm-tile:has(.pm-tile__link:focus-visible) { outline: 2px solid currentColor; outline-offset: 3px; }
.pm-tile__link:focus-visible { outline: 0; }
.pm-tile .pm-buttons { position: relative; z-index: 4; }
@media (max-width: 749px) { .pm-split__float { left: 0; } .pm-split__glow { inset: 8% 0 -4% 8%; } }
.pm-hero__cue { min-height: 2.75rem; padding-block: .25rem; }
@media (max-width: 749px) { .pm-hero__cue { display: none; } }

/* ---------- Slideshow ---------- */
pm-slideshow { display: block; }
.pm-slides { position: relative; min-height: var(--h, 88svh); color: #fff; overflow: clip; isolation: isolate; }
.pm-slides[data-height='full'] { --h: calc(100svh - var(--fold-offset, 0px)); }
.pm-slides[data-height='large'] { --h: 88svh; }
.pm-slides[data-height='medium'] { --h: 70svh; }
.pm-slides[data-text='dark'] { color: #111; }
.pm-slides pm-slideshow, .pm-slides__track { position: absolute; inset: 0; }
.pm-slide { position: absolute; inset: 0; display: grid; opacity: 0; visibility: hidden; transition: opacity 1.4s var(--ease-in-out), visibility 0s 1.4s; }
.pm-slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.4s var(--ease-in-out), visibility 0s; }
.pm-slide__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pm-slide__media img, .pm-slide__media svg { width: 100%; height: 100%; object-fit: cover; }
.pm-slide__media picture { position: absolute; inset: 0; display: block; }
.pm-slide__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / min(.88, calc(var(--o, .35) * 2))) 0%, rgb(0 0 0 / min(.75, calc(var(--o, .35) * 1.5))) 40%, rgb(0 0 0 / calc(var(--o, .35) * .5)) 75%, rgb(0 0 0 / calc(var(--o, .35) * .3)) 100%); }
/* Left-aligned slides also get a side shade where the text sits. */
.pm-slide[data-align='left'] .pm-slide__media::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(0 0 0 / calc(var(--o, .35) * 1.2)), transparent 60%); }
.pm-slides[data-text='dark'] .pm-slide[data-align='left'] .pm-slide__media::before { background: linear-gradient(90deg, rgb(255 255 255 / calc(var(--o, .35) * 1.2)), transparent 60%); }
.pm-slides[data-text='dark'] .pm-slide__media::after { background: linear-gradient(to top, rgb(255 255 255 / min(.9, calc(var(--o, .35) * 2))) 0%, rgb(255 255 255 / min(.75, calc(var(--o, .35) * 1.5))) 40%, transparent 80%); }
.js-motion .pm-slides[data-transition='zoom'] .pm-slide__media img { transform: scale(1.14); transition: transform calc(var(--speed, 6s) + 1.4s) linear; }
.js-motion .pm-slides[data-transition='zoom'] .pm-slide.is-active .pm-slide__media img { transform: scale(1); }
.pm-slide__content { align-self: end; display: grid; gap: clamp(.9rem, 2vw, 1.4rem); justify-items: var(--jx, start); text-align: var(--ta, left); padding-top: 8rem; padding-bottom: clamp(6rem, 12vw, 9rem); }
.pm-slide__content > * { max-width: 44rem; }
.pm-slide__content .rte { opacity: .9; }
.pm-slides .btn { --btn: currentColor; }
.pm-slides[data-text='light'] .btn { --b-bg: #fff; --b-fg: #111; --b-bd: #fff; }
.pm-slides[data-text='light'] .btn--secondary { --b-bg: transparent; --b-fg: #fff; --b-bd: #fff; }
.pm-slides[data-text='dark'] .btn { --b-bg: #111; --b-fg: #fff; --b-bd: #111; }
.pm-slides[data-text='dark'] .btn--secondary { --b-bg: transparent; --b-fg: #111; --b-bd: #111; }
/* Shade styles (as on the hero): even, from the bottom (default) or from the text side. */
.pm-slides[data-overlay='flat'] .pm-slide__media::after { background: rgb(0 0 0 / min(.8, calc(var(--o, .35) * 1.3))); }
.pm-slides[data-overlay='flat'] .pm-slide__media::before { display: none; }
.pm-slides[data-overlay='side'] .pm-slide__media::after { background: linear-gradient(90deg, rgb(0 0 0 / min(.88, calc(var(--o, .35) * 2))) 0%, rgb(0 0 0 / min(.7, calc(var(--o, .35) * 1.3))) 40%, transparent 80%); }
.pm-slides[data-overlay='side'] .pm-slide__media::before { display: none; }
@media (max-width: 749px) { .pm-slides[data-overlay='side'] .pm-slide__media::after { background: linear-gradient(to top, rgb(0 0 0 / min(.9, calc(var(--o, .35) * 2))) 0%, rgb(0 0 0 / min(.75, calc(var(--o, .35) * 1.5))) 55%, rgb(0 0 0 / calc(var(--o, .35) * .5)) 100%); } }
.pm-slides[data-text='dark'][data-overlay='flat'] .pm-slide__media::after { background: rgb(255 255 255 / min(.85, calc(var(--o, .35) * 1.3))); }
.pm-slides[data-text='dark'][data-overlay='side'] .pm-slide__media::after { background: linear-gradient(90deg, rgb(255 255 255 / min(.9, calc(var(--o, .35) * 2))) 0%, rgb(255 255 255 / min(.75, calc(var(--o, .35) * 1.3))) 40%, transparent 80%); }
.js-motion .pm-slide__content > * { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.js-motion .pm-slide.is-active .pm-slide__content > * { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 120ms + 500ms); }
.no-js .pm-slides pm-slideshow, .no-js .pm-slides__track { position: static; }
.no-js .pm-slide { position: relative; opacity: 1; visibility: visible; min-height: var(--h); }
.no-js .pm-slides__ui { display: none; }
.pm-slides__ui { position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 3vw, 2.5rem); z-index: 3; display: flex; align-items: center; gap: 1.25rem; }
.pm-slides__bars { display: flex; gap: .5rem; flex: 1; max-width: 26rem; }
.pm-slides__bar { flex: 1; height: 2.75rem; display: flex; align-items: center; }
.pm-slides__bar span { position: relative; display: block; width: 100%; height: 2px; background: color-mix(in srgb, currentColor 30%, transparent); overflow: hidden; }
.pm-slides__bar span::after { content: ''; position: absolute; inset: 0; background: currentColor; transform: scaleX(0); transform-origin: left; }
.pm-slides__bar[aria-current='true'] span::after { animation: pm-bar var(--speed, 6s) linear forwards; }
.pm-slides__bar.is-done span::after { transform: scaleX(1); }
.pm-slides.is-paused .pm-slides__bar span::after, .pm-slides:not([data-autoplay]) .pm-slides__bar[aria-current='true'] span::after { animation: none; transform: scaleX(1); }
@keyframes pm-bar { to { transform: scaleX(1); } }
.pm-slides__count { font-size: var(--t-xs); letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.pm-slides__ctrl { display: flex; gap: .5rem; margin-left: auto; }
.pm-slides__btn { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); transition: background-color .3s, color .3s; }
.pm-slides__btn:hover { background: currentColor; }
.pm-slides__btn:hover svg { color: #111; }
.pm-slides[data-text='dark'] .pm-slides__btn:hover svg { color: #fff; }
.pm-slides__btn svg { width: 1rem; height: 1rem; }
.pm-slides__btn [data-when='paused'], .pm-slides.is-paused .pm-slides__btn [data-when='playing'] { display: none; }
.pm-slides.is-paused .pm-slides__btn [data-when='paused'] { display: block; }

/* ---------- Collage hero ---------- */
.pm-collage { position: relative; display: grid; place-items: center; min-height: clamp(38rem, 92svh, 60rem); text-align: center; }
/* The floating tiles stay inside their own section instead of spilling over the next one. */
.pm-section:has(> .page-width > .pm-collage) { overflow: clip; }
.pm-collage__text { position: relative; z-index: 2; display: grid; gap: clamp(1rem, 2vw, 1.5rem); justify-items: center; max-width: 42rem; padding-block: 3rem; }
.pm-collage__text .rte { color: var(--fg-muted); }
.pm-collage__img { position: absolute; z-index: 1; overflow: hidden; border-radius: var(--radius-img); box-shadow: var(--shadow); background: var(--surface); }
.pm-collage__img img, .pm-collage__img svg { width: 100%; height: 100%; object-fit: cover; }
.pm-collage__img--1 { left: 0; top: 6%; width: 23%; aspect-ratio: 3 / 4; }
.pm-collage__img--2 { right: 2%; top: 0; width: 19%; aspect-ratio: 1; }
.pm-collage__img--3 { right: 0; bottom: 4%; width: 25%; aspect-ratio: 4 / 5; }
.pm-collage__img--4 { left: 7%; bottom: 0; width: 15%; aspect-ratio: 1; border-radius: 50%; }
.pm-collage__img--5 { left: 26%; top: -2%; width: 9%; aspect-ratio: 3 / 4; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js-motion:not([data-motion='subtle']) .pm-collage__img { animation: pm-collage linear both; animation-timeline: view(); animation-range: cover; }
  }
}
/* Postcard frame: a white border, a fixed tilt and an optional caption, like prints pinned to a board. */
.pm-collage[data-frame='postcard'] .pm-collage__img { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; padding: 10px; background: #fff; border-radius: 4px; rotate: var(--tilt); box-shadow: 0 22px 44px -20px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .12); animation-name: pm-collage-float; }
.pm-collage[data-frame='postcard'] .pm-collage__img :is(img, svg) { min-height: 0; border-radius: 2px; }
.pm-collage[data-frame='postcard'] .pm-collage__img--4 { border-radius: 4px; aspect-ratio: 4 / 5; }
.pm-collage__cap { color: #262626; font-family: var(--font-heading); font-style: italic; font-size: var(--t-small); line-height: 1.2; text-align: center; padding-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes pm-collage-float { from { transform: translateY(calc(var(--depth, 1) * 70px)); } to { transform: translateY(calc(var(--depth, 1) * -70px)); } }
@keyframes pm-collage { from { transform: translateY(calc(var(--depth, 1) * 70px)) rotate(calc(var(--tilt, 0deg) * -1)); } to { transform: translateY(calc(var(--depth, 1) * -70px)) rotate(var(--tilt, 0deg)); } }
@media (max-width: 989px) {
  .pm-collage { display: block; min-height: 0; }
  /* Phones keep the collage idea: one large picture with a second one overlapping its corner, and a small round one. */
  .pm-collage__imgs { position: relative; display: block; margin: 1.5rem auto 0; width: min(100%, 26rem); padding-bottom: 12%; }
  .pm-collage__img { position: relative; inset: auto !important; border-radius: var(--radius-img) !important; }
  .pm-collage__img:nth-child(1) { width: 78% !important; aspect-ratio: 4 / 5 !important; }
  .pm-collage__img:nth-child(2) { position: absolute; inset: auto 0 0 auto !important; width: 44% !important; aspect-ratio: 3 / 4 !important; border: 5px solid var(--bg); z-index: 2; }
  .pm-collage__img:nth-child(3) { position: absolute; inset: 6% 8% auto auto !important; width: 22% !important; aspect-ratio: 1 !important; border-radius: 50% !important; z-index: 2; }
  .pm-collage__img:nth-child(n + 4) { display: none; }
  .pm-collage[data-frame='postcard'] .pm-collage__imgs { width: min(90%, 24rem); }
  .pm-collage[data-frame='postcard'] .pm-collage__img { border: 0; border-radius: 4px !important; padding: 7px; rotate: calc(var(--tilt) * .6); }
  .pm-collage[data-frame='postcard'] .pm-collage__img:nth-child(n + 4) { display: none; }
  .pm-collage[data-frame='postcard'] .pm-collage__img:nth-child(3) { width: 30% !important; aspect-ratio: 3 / 4 !important; border-radius: 4px !important; }
  .pm-collage__text { margin-inline: auto; }
}