/* ==========================================================================
   PEOPLE — "What's inside" featured module carousel. people/index.html only.

   A transform-driven rail: the active card widens to --fw / --fh while its
   neighbours sit at --sw / --sh, and people-modules.js translates the rail so
   the active card is centred (positions are computed from the final sizes, so
   the width and translate transitions land together). Cards bleed past the
   content column to the viewport edge on purpose — the partial cards say
   "there are more". Each card's artwork is the inline SVG scene, coloured
   from --a (accent) and --t (tint).
   ========================================================================== */
.pm-section {
  --pm-ease: cubic-bezier(.22, 1, .36, 1);
  --sw: 250px; --fw: 440px; --sh: 345px; --fh: 400px; --gap: 22px;
  position: relative; isolation: isolate; overflow-x: clip;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 55%, transparent) 40%, transparent);
}
.pm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pm-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; will-change: transform; }
.pm-blob--a { width: 34vw; height: 26vw; left: -8vw; top: 32%; background: rgb(47 107 237 / 9%); animation: pm-drift 16s ease-in-out infinite alternate; }
.pm-blob--b { width: 30vw; height: 24vw; right: -6vw; top: 18%; background: rgb(124 58 237 / 7%); animation: pm-drift 19s ease-in-out -6s infinite alternate-reverse; }
.pm-blob--c { width: 26vw; height: 18vw; left: 38%; bottom: 4%; background: rgb(18 183 106 / 6%); animation: pm-drift 13s ease-in-out -3s infinite alternate; }
@keyframes pm-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(18px, -14px, 0) scale(1.05); } }
.pm-probe { position: absolute; visibility: hidden; height: 0; pointer-events: none; }
.pm-probe--s { width: var(--sw); } .pm-probe--f { width: var(--fw); }

/* --- Heading ------------------------------------------------------------- */
.pm-head { display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: 32px clamp(32px, 4vw, 72px); align-items: center; }
.pm-kicker { display: inline-flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #43547a; }
.pm-kicker::after { content: ''; width: 60px; height: 1.5px; background: #5c6f95; opacity: .7; }
.pm-intro h2 { margin: 20px 0 0; font-size: clamp(34px, 3.4vw, 64px); font-weight: 750; line-height: 1.02; letter-spacing: -.045em; color: var(--ink); }
.pm-intro h2 > span { display: block; }
.pm-grad { display: inline !important; background: linear-gradient(90deg, #146bff 0%, #2f74ff 60%, #4d5ff0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pm-intro p { margin: 18px 0 0; max-width: 800px; font-size: clamp(16px, 1.08vw, 19px); line-height: 1.58; color: #607092; }
:root[data-theme='dark'] .pm-intro p, :root[data-theme='dark'] .pm-kicker { color: var(--ink-2); }
.pm-aside { position: relative; display: flex; gap: 18px; padding: 8px 0 8px clamp(28px, 2.6vw, 44px); }
.pm-aside::before { content: ''; position: absolute; left: 0; top: 50%; height: 190px; transform: translateY(-50%); width: 1px; background: rgb(80 100 150 / 30%); }
.pm-aside-ico { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; color: #146bff; background: #eaf1ff; }
.pm-aside-ico svg { width: 25px; height: 25px; }
.pm-aside strong { display: block; max-width: 300px; font-size: clamp(19px, 1.3vw, 23px); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; color: var(--ink); }
.pm-aside p { margin: 10px 0 0; max-width: 300px; font-size: clamp(15px, .95vw, 16.5px); line-height: 1.5; color: var(--ink-2); }
.pm-aside-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 18px; padding: 0 20px; border-radius: 999px; border: 1px solid #8ba8ff; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, transform 300ms var(--pm-ease); }
.pm-aside-link svg { width: 18px; height: 18px; color: #146bff; transition: transform 300ms var(--pm-ease), color 300ms ease; }
.pm-aside-link:hover { background: #146bff; border-color: #146bff; color: #fff; transform: translateY(-1px); box-shadow: 0 12px 24px -14px rgb(20 107 255 / 70%); }
.pm-aside-link:hover svg { color: #fff; transform: translateX(5px); }
.pm-aside-link:focus-visible { outline: 2px solid #146bff; outline-offset: 3px; }

/* --- Category row + arrows ----------------------------------------------- */
.pm-bar { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-top: clamp(32px, 4.4vh, 44px); }
.pm-tabs { position: relative; isolation: isolate; display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pm-tabs::-webkit-scrollbar { display: none; }
.pm-tabs button { position: relative; z-index: 1; flex-shrink: 0; min-height: 44px; padding: 10px 22px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 15.5px; font-weight: 500; color: #657493; cursor: pointer; white-space: nowrap; transition: color 220ms ease, background-color 220ms ease; }
.pm-tabs button:hover { color: #146bff; background: rgb(20 107 255 / 5%); }
.pm-tabs button.is-on { color: #146bff; font-weight: 600; background: none; }
.pm-tabs button:focus-visible { outline: 2px solid #146bff; outline-offset: 2px; }
:root[data-theme='dark'] .pm-tabs button { color: var(--ink-2); }
.pm-tab-pill { position: absolute; z-index: 0; top: 0; bottom: 0; left: var(--x, 0); width: var(--w, 0); border-radius: 999px; background: #e8f0ff; transition: left 420ms var(--pm-ease), width 420ms var(--pm-ease); }
.pm-nav { display: flex; gap: 14px; flex-shrink: 0; }
.pm-arrow { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid #d9e3f7; background: #fff; color: #1f2a44; cursor: pointer; box-shadow: 0 8px 20px -14px rgb(20 40 90 / 40%); transition: transform 260ms var(--pm-ease), background-color 260ms ease, color 260ms ease, border-color 260ms ease, box-shadow 260ms ease; }
.pm-arrow svg { width: 20px; height: 20px; }
.pm-arrow:hover { transform: translateY(-2px); background: #146bff; border-color: #146bff; color: #fff; box-shadow: 0 14px 26px -14px rgb(20 107 255 / 70%); }
.pm-arrow:active { transform: scale(.95); }
.pm-arrow:focus-visible { outline: 2px solid #146bff; outline-offset: 3px; }

/* --- Viewport + rail ----------------------------------------------------- */
.pm-viewport { position: relative; margin-top: clamp(14px, 2vh, 24px); overflow: hidden; touch-action: pan-y; cursor: grab; outline: none; transition: opacity 340ms ease, transform 340ms var(--pm-ease);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%); }
.pm-viewport:focus-visible { box-shadow: inset 0 0 0 2px #146bff; }
.pm-viewport.is-drag { cursor: grabbing; user-select: none; }
.pm-viewport.is-swapping { opacity: 0; transform: scale(.98); }
.pm-rail { perspective: 1600px; display: flex; align-items: center; gap: var(--gap); height: calc(var(--fh) + 56px); transform: translate3d(var(--x, 0px), 0, 0); transition: transform 720ms var(--pm-ease); will-change: transform; }
.pm-viewport.is-drag .pm-rail, .pm-rail.no-anim { transition: none; }

/* --- Card ---------------------------------------------------------------- */
.pm-card {
  --a: #2f6bed; --t: #e4edff; --a-rgb: 47 107 237;
  position: relative; isolation: isolate; overflow: hidden; flex: 0 0 var(--sw); height: var(--sh);
  border-radius: 22px; background: #fff; border: 1px solid rgb(210 220 240 / 85%);
  box-shadow: 0 1px 2px rgb(20 40 90 / 5%), 0 18px 40px -28px rgb(20 40 90 / 35%);
  transition: flex-basis 720ms var(--pm-ease), height 720ms var(--pm-ease), transform 520ms var(--pm-ease), box-shadow 520ms var(--pm-ease), border-color 400ms ease;
}
.pm-card--green { --a: #12a26b; --t: #dcf6ea; --a-rgb: 18 162 107; }
.pm-card--orange { --a: #f07a1a; --t: #ffead6; --a-rgb: 240 122 26; }
.pm-card--violet { --a: #8b4cf0; --t: #efe5ff; --a-rgb: 139 76 240; }
.pm-card--teal { --a: #0ea596; --t: #d9f5f1; --a-rgb: 14 165 150; }
.pm-card.is-active { flex-basis: var(--fw); height: var(--fh); transform: none; border-color: rgb(255 255 255 / 90%); box-shadow: 0 2px 6px rgb(20 40 90 / 6%), 0 40px 80px -36px rgb(var(--a-rgb) / 55%), 0 24px 50px -32px rgb(20 40 90 / 40%); }
.pm-card:not(.is-active) { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .pm-card:not(.is-active):hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgb(20 40 90 / 6%), 0 28px 50px -30px rgb(20 40 90 / 45%); }
  .pm-card.is-active:hover { transform: translateY(-4px); }
  .pm-card:hover .pm-photo { --ms: 1.04; }
  .pm-card.is-active:hover .pm-photo { --ms: 1.03; }
}

/* Artwork fills the card like a photograph; a white wash keeps the copy legible. */
.pm-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background:
  radial-gradient(70% 60% at 85% 18%, rgb(var(--a-rgb) / 16%), transparent 70%),
  linear-gradient(160deg, color-mix(in srgb, var(--t) 75%, #fff) 0%, #ffffff 62%); }
.pm-media::after { content: ''; z-index: 1; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgb(255 255 255 / 95%) 0%, rgb(255 255 255 / 86%) 34%, rgb(255 255 255 / 30%) 64%, rgb(255 255 255 / 0%) 86%),
  linear-gradient(0deg, rgb(255 255 255 / 80%) 0%, rgb(255 255 255 / 0%) 34%); }
.pm-photo { --px: 0px; --py: 0px; --ms: 1; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 62% 50%); transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--ms, 1)); transition: transform 500ms var(--pm-ease); }
.pm-card.is-tracking .pm-photo { transition-duration: 200ms; }

.pm-body { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: 56px 24px 24px; transition: padding 720ms var(--pm-ease); }
.pm-card.is-active .pm-body { padding: 24px 32px 30px; }
.pm-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgb(255 255 255 / 86%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgb(20 107 255 / 14%); color: #1d4fd8; font-size: 13px; font-weight: 600; box-shadow: 0 6px 16px -10px rgb(20 107 255 / 50%); }
.pm-card.is-active .pm-badge + .pm-icon { margin-top: 22px; }
.pm-card:not(.is-active) .pm-badge { position: absolute; top: 16px; left: 24px; }
.pm-badge svg { width: 15px; height: 15px; color: #146bff; }
.pm-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; color: var(--a); background: color-mix(in srgb, var(--t) 80%, #fff); box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%), 0 10px 22px -14px rgb(var(--a-rgb) / 70%); transition: width 720ms var(--pm-ease), height 720ms var(--pm-ease), background-color 500ms ease, color 500ms ease, transform 400ms var(--pm-ease); }
.pm-icon svg { width: 46%; height: 46%; }
.pm-card.is-active .pm-icon { width: 66px; height: 66px; border-radius: 18px; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--a) 70%, #fff), var(--a)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%), 0 14px 26px -12px rgb(var(--a-rgb) / 75%); }
.pm-card--feature.is-active .pm-icon { background: linear-gradient(150deg, #4f8cff, #146bff); }
.pm-card.is-active:hover .pm-icon { transform: scale(1.04); }
.pm-card h3 { margin: 18px 0 0; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; color: #0b1533; transition: font-size 720ms var(--pm-ease); }
.pm-card.is-active h3 { font-size: clamp(22px, 1.6vw, 28px); }
.pm-card p { margin: 10px 0 0; max-width: 62%; font-size: 14.5px; line-height: 1.5; color: #4e5d7d; transition: font-size 720ms var(--pm-ease); }
.pm-card.is-active p { font-size: 16px; max-width: 54%; }
.pm-more { display: inline-flex; align-items: center; gap: 14px; margin-top: auto; font-size: 14.5px; font-weight: 600; color: #0b1533; text-decoration: none; align-self: flex-start; }
.pm-more-ico { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; color: var(--a); background: #fff; box-shadow: inset 0 0 0 1px rgb(var(--a-rgb) / 28%), 0 6px 14px -10px rgb(var(--a-rgb) / 60%); transition: width 720ms var(--pm-ease), height 720ms var(--pm-ease), background-color 400ms ease, color 400ms ease, transform 300ms var(--pm-ease); }
.pm-more-ico svg { width: 19px; height: 19px; transition: transform 300ms var(--pm-ease); }
.pm-card.is-active .pm-more { font-size: 16px; }
.pm-card.is-active .pm-more-ico { width: 56px; height: 56px; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--a) 70%, #fff), var(--a)); box-shadow: 0 12px 24px -12px rgb(var(--a-rgb) / 80%); }
.pm-more:hover .pm-more-ico { transform: scale(1.06); }
.pm-more:hover .pm-more-ico svg { transform: translateX(4px); }
.pm-more:focus-visible { outline: 2px solid var(--a); outline-offset: 4px; border-radius: 999px; }


/* --- Card change choreography -------------------------------------------
   Plays every time a card becomes the centre card (not tied to the entrance):
   the photo settles from a slight zoom, a soft light sweeps across, and the
   copy arrives in order. Side cards sit a touch desaturated. */
.pm-photo { filter: saturate(.78) brightness(1.02); transition: transform 500ms var(--pm-ease), filter 700ms ease; }
.pm-card.is-active .pm-photo, .pm-card:hover .pm-photo { filter: none; }
.pm-card.is-arriving .pm-photo { animation: pm-photo-in 1200ms var(--pm-ease) both; }
.pm-card::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 55%) 48%, transparent 66%); transform: translateX(-120%); opacity: 0; }
.pm-card.is-arriving::after { animation: pm-sweep 1100ms var(--pm-ease) 220ms both; }
.pm-card.is-arriving .pm-body > * { animation: pm-content 620ms var(--pm-ease) both; }
.pm-card.is-arriving .pm-body > :nth-child(1) { animation-delay: 140ms; }
.pm-card.is-arriving .pm-body > :nth-child(2) { animation-delay: 200ms; }
.pm-card.is-arriving .pm-body > :nth-child(3) { animation-delay: 260ms; }
.pm-card.is-arriving .pm-body > :nth-child(4) { animation-delay: 320ms; }
.pm-card.is-arriving .pm-body > :nth-child(5) { animation-delay: 380ms; }
@keyframes pm-photo-in { from { scale: 1.12; } to { scale: 1; } }
@keyframes pm-sweep { 0% { transform: translateX(-120%); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(120%); opacity: 0; } }
@keyframes pm-content { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }


/* --- Stacked alignment + extra motion ------------------------------------
   As in the reference: each side card slides in toward the centre so it tucks
   behind its inner neighbour, shrinks a step with distance, and sits lower in
   the stack; the centre card is on top. --pull (px) and --z come from JS.
   Uses the individual translate/scale properties so it composes with the
   hover lift (transform) untouched. */
.pm-card { --side: 0; --k: 0; --pull: 0px; --sc: 1; --z: 10;
  position: relative; z-index: var(--z); translate: calc(var(--side) * -1 * var(--pull)) 0; scale: var(--sc);
  transition: flex-basis 720ms var(--pm-ease), height 720ms var(--pm-ease), transform 520ms var(--pm-ease), box-shadow 520ms var(--pm-ease), border-color 400ms ease, translate 720ms var(--pm-ease), scale 720ms var(--pm-ease), opacity 720ms ease; }
.pm-card:not(.is-active) { box-shadow: 0 1px 2px rgb(20 40 90 / 5%), 0 22px 44px -26px rgb(20 40 90 / 45%); }
.pm-card:not(.is-active) { opacity: calc(1 - min(var(--k), 3) * .08); }
.pm-card:not(.is-active):hover { opacity: 1; }
.pm-card.is-arriving .pm-body > .pm-icon { animation: pm-content 620ms var(--pm-ease) 200ms both, pm-pop 700ms cubic-bezier(.34, 1.56, .64, 1) 240ms both; }
.pm-card.is-active .pm-more-ico svg { animation: pm-nudge 1.8s ease-in-out 900ms infinite; }
.pm-badge { position: relative; overflow: hidden; }
.pm-badge::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 85%) 50%, transparent 70%); transform: translateX(-130%); animation: pm-shimmer 3.2s ease-in-out 1.2s infinite; }
@keyframes pm-pop { 0% { scale: .6; } 60% { scale: 1.08; } 100% { scale: 1; } }
@keyframes pm-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 4px 0; } }
@keyframes pm-shimmer { 0% { transform: translateX(-130%); } 40%, 100% { transform: translateX(130%); } }

/* Silent loop re-point: freeze every transition and arrival animation for one frame. */
.pm-section.is-jumping .pm-card, .pm-section.is-jumping .pm-card *, .pm-section.is-jumping .pm-card::after, .pm-section.is-jumping .pm-rail { transition: none !important; }

/* --- Pagination ---------------------------------------------------------- */
.pm-dots { display: flex; justify-content: center; gap: 8px; margin-top: clamp(18px, 2.6vh, 28px); }
.pm-dots button { position: relative; overflow: hidden; width: 20px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: #d3dcee; cursor: pointer; transition: width 600ms var(--pm-ease), background-color 400ms ease; }
.pm-dots button:hover { background: #b9c8e6; }
.pm-dots button.is-on { width: 42px; background: #c4d6ff; }
/* The active dot doubles as the autoplay timer: it fills while the carousel waits. */
.pm-dots button.is-on::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #146bff; transform-origin: left; }
.pm-section.is-autoplay .pm-dots button.is-on::after { animation: pm-progress var(--auto, 2s) linear both; }
@keyframes pm-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pm-dots button:focus-visible { outline: 2px solid #146bff; outline-offset: 3px; }

/* --- Metrics ------------------------------------------------------------- */
.pm-stats { display: flex; align-items: center; gap: 0; margin-top: clamp(36px, 5vh, 50px); }
.pm-stat { display: flex; align-items: center; gap: 18px; padding-right: clamp(28px, 3.4vw, 64px); }
.pm-stat + .pm-stat { padding-left: clamp(28px, 3.4vw, 64px); border-left: 1px solid rgb(80 100 150 / 18%); }
.pm-stat-ico { display: grid; place-items: center; width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; color: #146bff; background: #eaf1ff; }
.pm-stat-ico svg { width: 26px; height: 26px; }
.pm-stat strong { min-width: 1.2ch; font-size: clamp(40px, 2.8vw, 52px); font-weight: 750; line-height: 1; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pm-stat > span:last-child { font-size: clamp(15px, .95vw, 17px); line-height: 1.4; color: var(--ink-2); }
.pm-motto { display: flex; align-items: center; gap: 14px; margin: 0 0 0 auto; padding-left: 40px; border-left: 1px solid rgb(80 100 150 / 25%); font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #6f7fa3; white-space: nowrap; }
.pm-motto::before { content: ''; width: 40px; height: 1.5px; background: #9aa8c8; }
.pm-motto i { font-style: normal; opacity: .6; }
.pm-motto b { color: #146bff; font-weight: 700; }

/* --- Entrance (once) ----------------------------------------------------- */
.js .pm-section:not(.is-in) :is(.pm-a, .pm-card, .pm-dots, .pm-stat, .pm-motto) { opacity: 0; }
.pm-section.is-in .pm-a { animation: pm-up 760ms var(--pm-ease) var(--d, 0ms) backwards; }
.pm-section.is-entering .pm-card { animation: pm-rise 820ms var(--pm-ease) backwards; animation-delay: calc(480ms + var(--k, 0) * 90ms); }
.pm-section.is-entering .pm-card.is-active { animation-name: pm-rise-f; }
.pm-section.is-in .pm-dots { animation: pm-fade 600ms ease 1000ms backwards; }
.pm-stats.is-in .pm-stat, .pm-stats.is-in .pm-motto { animation: pm-up 700ms var(--pm-ease) backwards; }
.pm-stats.is-in .pm-stat:nth-child(2) { animation-delay: 120ms; } .pm-stats.is-in .pm-stat:nth-child(3) { animation-delay: 240ms; } .pm-stats.is-in .pm-motto { animation-delay: 360ms; }
.pm-stats.is-in .pm-inf { animation: pm-inf 900ms cubic-bezier(.34, 1.4, .64, 1) 500ms backwards; display: inline-block; }
.js .pm-stats:not(.is-in) :is(.pm-stat, .pm-motto) { opacity: 0; }
@keyframes pm-up { from { opacity: 0; transform: translateY(25px); } }
@keyframes pm-rise { from { opacity: 0; translate: 0 25px; } }
@keyframes pm-rise-f { from { opacity: 0; translate: 0 25px; scale: .96; } }
@keyframes pm-fade { from { opacity: 0; } }
@keyframes pm-inf { from { opacity: 0; transform: scale(.4); } }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1280px) { .pm-section { --sw: 236px; --fw: 410px; --sh: 335px; --fh: 390px; } }
@media (max-width: 1100px) {
  .pm-section { --sw: 228px; --fw: 380px; --sh: 330px; --fh: 380px; --gap: 18px; }
  .pm-head { grid-template-columns: minmax(0, 1fr); }
  .pm-aside { padding-left: 0; }
  .pm-aside::before { display: none; }
  .pm-stats { flex-wrap: wrap; row-gap: 24px; }
  .pm-motto { margin-left: 0; padding-left: 0; border-left: 0; flex-basis: 100%; }
}
@media (max-width: 700px) {
  .pm-section { --sw: 80vw; --fw: 86vw; --sh: 380px; --fh: 400px; --gap: 14px; }
  .pm-bar { flex-direction: column; align-items: stretch; gap: 14px; }
  .pm-nav { justify-content: flex-end; }
  .pm-arrow { width: 46px; height: 46px; }
  .pm-viewport { -webkit-mask-image: none; mask-image: none; }
  .pm-card.is-active .pm-body { padding: 24px 24px 24px; }
  .pm-card p { max-width: 70%; }
  .pm-stats { flex-direction: column; align-items: flex-start; }
  .pm-stat, .pm-stat + .pm-stat { padding: 0; border-left: 0; }
  .pm-stat-ico { width: 50px; height: 50px; }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .pm-section *, .pm-section *::before, .pm-section::before, .pm-blob { animation: none !important; }
  .js .pm-section:not(.is-in) :is(.pm-a, .pm-card, .pm-dots, .pm-stat, .pm-motto), .js .pm-stats:not(.is-in) :is(.pm-stat, .pm-motto) { opacity: 1; }
  .pm-photo { transform: none !important; transition: none !important; }
  .pm-card { translate: none !important; scale: none !important; }
  .pm-rail, .pm-card, .pm-body, .pm-icon, .pm-card h3, .pm-card p, .pm-more-ico, .pm-viewport { transition: none !important; }
}