/* ==========================================================================
   Pixel Academy — Public inner pages
   One shared visual language for the three simple public pages:
   teachers directory, teacher details, contact.

   Depends on pixel-v2.css (tokens, typography) and pixel-public.css (shell,
   buttons, atmosphere, header, drawer, footer). It never modifies either and
   never redefines the theme system — every adaptive value below is derived
   from the shell tokens that already flip with html[data-theme].

   Deliberately quieter than the homepage: no hero canvas, no stage, no
   per-page gradients. One page background, one card system, one radius
   system, one state system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Inner-page tokens
   -------------------------------------------------------------------------- */
:root,
html[data-theme="dark"] {
  /* Deep indigo / purple environment, never one flat dark colour */
  --pxp-page-bg:
    radial-gradient(78% 48% at 84% 0%, rgba(124, 77, 255, 0.22) 0%, transparent 62%),
    radial-gradient(64% 44% at 4% 76%, rgba(34, 211, 238, 0.1) 0%, transparent 64%),
    linear-gradient(180deg, #08061f 0%, #0b0827 44%, #07051d 100%);

  --pxp-card-bg: linear-gradient(180deg, rgba(35, 26, 88, 0.62) 0%, rgba(8, 6, 26, 0.96) 74%);
  --pxp-card-border: rgba(255, 255, 255, 0.12);
  --pxp-card-shadow: 0 18px 40px rgba(3, 2, 14, 0.42);
  --pxp-card-hover-border: rgba(124, 77, 255, 0.52);
  --pxp-card-lift: 0 24px 52px rgba(3, 2, 14, 0.52);

  --pxp-panel-bg: linear-gradient(168deg, rgba(38, 28, 96, 0.5) 0%, rgba(9, 7, 30, 0.9) 76%);
  --pxp-panel-border: rgba(255, 255, 255, 0.13);

  /* A media plate that keeps a portrait separated from the page */
  --pxp-media-bg:
    radial-gradient(78% 70% at 50% 100%, rgba(124, 77, 255, 0.26) 0%, transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 100%);
  --pxp-media-border: rgba(255, 255, 255, 0.1);

  --pxp-chip-bg: rgba(255, 255, 255, 0.06);
  --pxp-chip-border: rgba(255, 255, 255, 0.14);

  --pxp-skel-a: rgba(255, 255, 255, 0.05);
  --pxp-skel-b: rgba(255, 255, 255, 0.11);

  --pxp-note-bg: rgba(240, 192, 76, 0.1);
  --pxp-note-border: rgba(240, 192, 76, 0.32);
  --pxp-note-ink: var(--px-gold-2);

  --pxp-gold-ink: var(--px-gold-2);
  --pxp-cyan-ink: var(--px-cyan);
}

html[data-theme="light"] {
  /* Warm off-white with light lavender — not a white Bootstrap page */
  --pxp-page-bg:
    radial-gradient(78% 48% at 84% 0%, rgba(124, 77, 255, 0.14) 0%, transparent 62%),
    radial-gradient(64% 44% at 4% 76%, rgba(34, 211, 238, 0.1) 0%, transparent 64%),
    linear-gradient(180deg, #fbf8f3 0%, #f3eefb 46%, #faf7f2 100%);

  --pxp-card-bg: linear-gradient(180deg, #ffffff 0%, #f7f3fd 100%);
  --pxp-card-border: rgba(74, 32, 189, 0.16);
  --pxp-card-shadow: 0 16px 34px rgba(52, 28, 122, 0.13);
  --pxp-card-hover-border: rgba(74, 32, 189, 0.44);
  --pxp-card-lift: 0 24px 48px rgba(52, 28, 122, 0.18);

  --pxp-panel-bg: linear-gradient(168deg, #ffffff 0%, #f6f2fd 100%);
  --pxp-panel-border: rgba(74, 32, 189, 0.16);

  --pxp-media-bg:
    radial-gradient(78% 70% at 50% 100%, rgba(124, 77, 255, 0.14) 0%, transparent 66%),
    linear-gradient(180deg, rgba(74, 32, 189, 0.07) 0%, rgba(74, 32, 189, 0.02) 100%);
  --pxp-media-border: rgba(74, 32, 189, 0.14);

  --pxp-chip-bg: rgba(74, 32, 189, 0.06);
  --pxp-chip-border: rgba(74, 32, 189, 0.16);

  --pxp-skel-a: rgba(74, 32, 189, 0.07);
  --pxp-skel-b: rgba(74, 32, 189, 0.14);

  --pxp-note-bg: rgba(191, 140, 20, 0.1);
  --pxp-note-border: rgba(191, 140, 20, 0.3);
  --pxp-note-ink: #8a6209;

  --pxp-gold-ink: #8a6209;
  --pxp-cyan-ink: #0d7f93;
}

/* --------------------------------------------------------------------------
   2. Page environment
   One continuous background behind the whole inner page, so the three pages
   read as one product rather than three unrelated designs.
   -------------------------------------------------------------------------- */
.pxp-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--px-ink);
  background: var(--pxp-page-bg);
  transition: background-color 320ms var(--px-ease);
}

.pxp-page .px-atmo__grid {
  background-image: linear-gradient(var(--px-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--px-grid-line) 1px, transparent 1px);
}

.pxp-page .px-atmo__noise {
  background-image: repeating-linear-gradient(0deg, var(--px-noise) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, var(--px-noise-2) 0 1px, transparent 1px 4px);
}

body.px-body .pxp-page h1,
body.px-body .pxp-page h2,
body.px-body .pxp-page h3,
body.px-body .pxp-page h4 {
  color: var(--px-ink);
}

body.px-body .pxp-page p {
  color: var(--px-ink-2);
}

/* The eyebrow accent keeps its contrast on the warm light surface. */
html[data-theme="light"] .pxp-page .px-eyebrow {
  color: var(--px-violet-deep);
}

/* Ghost buttons sit on adaptive surfaces here, exactly like in the drawer. */
body.px-body .pxp-page .px-btn--ghost {
  color: var(--px-ink);
  background: var(--pxp-chip-bg);
  border-color: var(--pxp-chip-border);
  box-shadow: none;
}

body.px-body .pxp-page .px-btn--ghost:hover {
  color: var(--px-ink);
  background: var(--px-chip-2);
  border-color: var(--px-violet-2);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   3. Compact page hero — shared by teachers and contact
   -------------------------------------------------------------------------- */
.pxp-hero {
  position: relative;
  z-index: 1;
  /* --px-header-total already contains the Safe Area; never add it twice. */
  padding-top: calc(var(--px-header-total) + clamp(26px, 6vw, 52px));
  padding-bottom: clamp(24px, 5vw, 44px);
}

.pxp-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
}

body.px-body .pxp-hero__title {
  margin: 0 0 14px;
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

body.px-body .pxp-hero__text {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(0.95rem, 2.6vw, 1.06rem);
  line-height: 1.85;
}

/* Stepped rectangular Pixel accent — the shared inner-page signature */
.pxp-steps {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-top: clamp(20px, 4vw, 28px);
}

.pxp-steps i {
  display: block;
  width: 14px;
  border-radius: 3px;
  background: var(--px-violet);
}

.pxp-steps i:nth-child(1) {
  height: 8px;
  opacity: 0.55;
}

.pxp-steps i:nth-child(2) {
  height: 15px;
  background: var(--px-violet-2);
}

.pxp-steps i:nth-child(3) {
  height: 23px;
  background: var(--px-cyan);
}

.pxp-steps i:nth-child(4) {
  height: 31px;
  background: linear-gradient(180deg, var(--px-violet-2), var(--px-violet-deep));
}

/* --------------------------------------------------------------------------
   4. Page bands
   -------------------------------------------------------------------------- */
.pxp-band {
  position: relative;
  z-index: 1;
  padding-block: clamp(22px, 4vw, 40px) clamp(48px, 8vw, 90px);
}

/* A band that opens the page on its own (teacher details) still clears the
   fixed header. */
.pxp-band--top {
  padding-top: calc(var(--px-header-total) + clamp(20px, 4vw, 34px));
}

.pxp-sectitle {
  margin: 0 0 clamp(16px, 3vw, 24px);
  font-size: clamp(1.1rem, 3.4vw, 1.4rem);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   5. Back link
   -------------------------------------------------------------------------- */
body.px-body .pxp-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: clamp(18px, 3vw, 26px);
  padding: 0 16px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--px-ink-2);
  background: var(--pxp-chip-bg);
  border: 1px solid var(--pxp-chip-border);
  border-radius: var(--px-r-sm);
  transition: color var(--pa-t) var(--px-ease), border-color var(--pa-t) var(--px-ease),
    background-color var(--pa-t) var(--px-ease);
}

body.px-body .pxp-back:hover {
  color: var(--px-ink);
  background: var(--px-chip-2);
  border-color: var(--px-violet-2);
}

.pxp-back i {
  font-size: 0.8em;
  color: var(--px-violet-2);
}

/* --------------------------------------------------------------------------
   6. States — loading, auth, empty, error, partial note
   One panel component covers every state on every page.
   -------------------------------------------------------------------------- */
.pxp-state:empty {
  display: none;
}

.pxp-panel {
  position: relative;
  overflow: hidden;
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(24px, 5vw, 40px) clamp(18px, 4vw, 34px);
  text-align: center;
  background: var(--pxp-panel-bg);
  border: 1px solid var(--pxp-panel-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--pxp-card-shadow);
}

.pxp-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--px-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--px-grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 50% 0%, #000, transparent 70%);
  opacity: 0.5;
}

.pxp-panel > * {
  position: relative;
  z-index: 1;
}

.pxp-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  font-size: 1.2rem;
  color: var(--px-violet-2);
  background: var(--pxp-chip-bg);
  border: 1px solid var(--pxp-chip-border);
  border-radius: var(--px-r-sm);
}

body.px-body .pxp-panel__title {
  margin: 0 0 10px;
  font-size: clamp(1.05rem, 3.2vw, 1.3rem);
  font-weight: 800;
}

body.px-body .pxp-panel__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.9;
}

.pxp-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}

@media (max-width: 400px) {
  .pxp-panel__actions {
    flex-direction: column;
  }

  body.px-body .pxp-panel__actions .px-btn {
    width: 100%;
  }
}

/* Non-blocking note: some data could not be loaded, the rest is still shown */
.pxp-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: clamp(18px, 3vw, 26px);
  padding: 14px 16px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--pxp-note-ink);
  background: var(--pxp-note-bg);
  border: 1px solid var(--pxp-note-border);
  border-radius: var(--px-r-sm);
}

.pxp-note i {
  flex: 0 0 auto;
  margin-top: 4px;
}

/* Skeletons */
.pxp-skel {
  position: relative;
  overflow: hidden;
  background: var(--pxp-skel-a);
  border-radius: 8px;
}

.pxp-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--pxp-skel-b) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: pxp-shimmer 1500ms infinite;
}

@keyframes pxp-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.pxp-skel--media {
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: var(--px-r);
}

.pxp-skel--line {
  height: 13px;
  margin-top: 12px;
}

.pxp-skel--title {
  height: 19px;
  width: 68%;
  margin-top: 16px;
}

.pxp-skel--short {
  width: 46%;
}

.pxp-skel--btn {
  height: 44px;
  margin-top: 18px;
  border-radius: var(--px-r-sm);
}

/* --------------------------------------------------------------------------
   7. Teacher grid + teacher card
   -------------------------------------------------------------------------- */
.pxp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 3vw, 26px);
}

@media (min-width: 560px) {
  .pxp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .pxp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1360px) {
  .pxp-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pxp-tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
  background: var(--pxp-card-bg);
  border: 1px solid var(--pxp-card-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--pxp-card-shadow);
  transition: transform 260ms var(--px-ease), border-color 260ms var(--px-ease),
    box-shadow 260ms var(--px-ease);
}

.pxp-tcard:hover {
  transform: translateY(-4px);
  border-color: var(--pxp-card-hover-border);
  box-shadow: var(--pxp-card-lift);
}

/* Stable portrait plate — the same box for every teacher, so a grid of
   mismatched source images still reads as one row. */
.pxp-tcard__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--pxp-media-bg);
  border: 1px solid var(--pxp-media-border);
  border-radius: var(--px-r);
}

.pxp-tcard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchored to the top of the frame, so a face is never cut off. */
  object-position: center top;
}

/* Set by the page script when the source is not a portrait, so a wide image
   is shown whole instead of being cropped. */
.pxp-tcard__img.is-contain,
.pxp-profile__img.is-contain {
  object-fit: contain;
  object-position: center;
}

.pxp-tcard__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 4px 4px;
}

body.px-body .pxp-tcard__name {
  margin: 0 0 4px;
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.pxp-tcard__role {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pxp-cyan-ink);
}

.pxp-tcard__role::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--px-cyan);
}

body.px-body .pxp-tcard__bio {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 12px 0 0;
  font-size: 0.88rem;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.pxp-tcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

body.px-body .pxp-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--px-ink-2);
  background: var(--pxp-chip-bg);
  border: 1px solid var(--pxp-chip-border);
  border-radius: var(--px-r-sm);
  transition: color var(--pa-t) var(--px-ease), border-color var(--pa-t) var(--px-ease),
    background-color var(--pa-t) var(--px-ease);
}

body.px-body .pxp-phone:hover {
  color: var(--px-ink);
  background: var(--px-chip-2);
  border-color: var(--px-violet-2);
}

.pxp-phone i {
  font-size: 0.85em;
  color: var(--px-violet-2);
}

/* Numbers stay readable inside an RTL paragraph */
.pxp-num {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Social row — only ever rendered when there is at least one real link */
.pxp-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

body.px-body .pxp-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 0.95rem;
  color: var(--px-ink-2);
  background: var(--pxp-chip-bg);
  border: 1px solid var(--pxp-chip-border);
  border-radius: var(--px-r-sm);
  transition: color var(--pa-t) var(--px-ease), background-color var(--pa-t) var(--px-ease),
    border-color var(--pa-t) var(--px-ease), transform var(--pa-t) var(--px-ease);
}

body.px-body .pxp-social a:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.85), rgba(34, 211, 238, 0.45));
  border-color: rgba(124, 77, 255, 0.6);
  transform: translateY(-2px);
}

.pxp-tcard__foot {
  margin-top: auto;
  padding-top: 18px;
}

body.px-body .pxp-tcard__foot .px-btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   8. Teacher details — profile composition
   -------------------------------------------------------------------------- */
.pxp-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 4vw, 40px);
  align-items: start;
}

@media (min-width: 900px) {
  .pxp-profile {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }
}

.pxp-profile__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--pxp-media-bg);
  border: 1px solid var(--pxp-media-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--pxp-card-shadow);
}

@media (min-width: 900px) {
  .pxp-profile__media {
    aspect-ratio: 3 / 4;
  }
}

.pxp-profile__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* A single stepped pixel fragment anchored to the portrait plate */
.pxp-profile__pix {
  position: absolute;
  inset-inline-start: 14px;
  bottom: 14px;
  z-index: 2;
}

.pxp-profile__body {
  min-width: 0;
  padding: clamp(20px, 4vw, 32px);
  background: var(--pxp-card-bg);
  border: 1px solid var(--pxp-card-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--pxp-card-shadow);
}

body.px-body .pxp-profile__name {
  margin: 12px 0 0;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body.px-body .pxp-profile__bio {
  margin: 18px 0 0;
  font-size: 0.97rem;
  line-height: 1.95;
  overflow-wrap: anywhere;
}

.pxp-profile__block {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--px-rule);
}

.pxp-blocktitle {
  display: block;
  margin-bottom: 12px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--px-ink-3);
}

.pxp-profile__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

@media (max-width: 400px) {
  .pxp-profile__actions {
    flex-direction: column;
  }

  body.px-body .pxp-profile__actions .px-btn {
    width: 100%;
  }
}

/* Details skeleton keeps the same two-column rhythm as the loaded profile */
.pxp-profile--skel .pxp-profile__body {
  min-height: 220px;
}

/* --------------------------------------------------------------------------
   9. Contact
   -------------------------------------------------------------------------- */
.pxp-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 3vw, 22px);
}

@media (min-width: 820px) {
  .pxp-contact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pxp-call {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(18px, 4vw, 26px);
  background: var(--pxp-card-bg);
  border: 1px solid var(--pxp-card-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--pxp-card-shadow);
  transition: transform 260ms var(--px-ease), border-color 260ms var(--px-ease),
    box-shadow 260ms var(--px-ease);
}

.pxp-call:hover {
  transform: translateY(-4px);
  border-color: var(--pxp-card-hover-border);
  box-shadow: var(--pxp-card-lift);
}

.pxp-call__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 1.05rem;
  color: var(--px-violet-2);
  background: var(--pxp-chip-bg);
  border: 1px solid var(--pxp-chip-border);
  border-radius: var(--px-r-sm);
}

body.px-body .pxp-call__label {
  margin: 16px 0 8px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--px-ink-3);
}

body.px-body .pxp-call__num {
  display: block;
  font-size: clamp(1.25rem, 5vw, 1.5rem);
  font-weight: 800;
  line-height: 1.4;
  color: var(--px-ink);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.pxp-call__foot {
  margin-top: auto;
  padding-top: 20px;
}

body.px-body .pxp-call__foot .px-btn {
  width: 100%;
}

/* Working hours panel */
.pxp-hours {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
  margin-top: clamp(18px, 3.5vw, 28px);
  padding: clamp(20px, 4vw, 30px);
  background: var(--pxp-panel-bg);
  border: 1px solid var(--pxp-panel-border);
  border-radius: var(--px-r-lg);
  box-shadow: var(--pxp-card-shadow);
}

@media (min-width: 720px) {
  .pxp-hours {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 22px;
  }
}

.pxp-hours__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 1.15rem;
  color: var(--pxp-gold-ink);
  background: var(--pxp-note-bg);
  border: 1px solid var(--pxp-note-border);
  border-radius: var(--px-r-sm);
}

body.px-body .pxp-hours__title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 800;
}

body.px-body .pxp-hours__value {
  margin: 0;
  font-size: clamp(1rem, 3.4vw, 1.15rem);
  font-weight: 700;
  color: var(--px-ink);
}

body.px-body .pxp-lead {
  max-width: 60ch;
  margin: 0 0 clamp(18px, 3vw, 26px);
  font-size: clamp(0.95rem, 2.6vw, 1.02rem);
  line-height: 1.9;
}

/* --------------------------------------------------------------------------
   10. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pxp-page,
  .pxp-tcard,
  .pxp-call {
    transition: none;
  }

  .pxp-tcard:hover,
  .pxp-call:hover {
    transform: none;
  }

  body.px-body .pxp-social a:hover {
    transform: none;
  }

  .pxp-skel::after {
    animation: none;
  }
}