/* ==========================================================================
   Patient video reviews: hub (/experiences/) and watch pages (one per patient)
   Same system as the Costs page: original site base (mint lines, 30px cards,
   Noto Sans), Home 2 blue for the hero band and the call-to-action panels.
   Desktop first. Mobile breakpoints follow once desktop is approved.
   ========================================================================== */

.exp {
  --exp-ink: #1a1c1e;
  --exp-text: #4e5a65;
  --exp-muted: #8d99a4;
  --exp-line: #d9e7e9;
  --exp-line-soft: #e8f0f1;
  --exp-mint: #e0f4f8;
  --exp-mint-2: #ebf3f4;
  --exp-mint-3: #f3f9fa;
  --exp-blue: #3d83ef;
  --exp-blue-dark: #2f6fd6;
  --exp-blue-ink: #1b3f7a;
  --exp-link: #2380b8;
  --exp-cyan: #8de1ff;
  --exp-white: #fff;
  --exp-radius: 30px;
  --exp-radius-md: 22px;
  --exp-radius-sm: 16px;
  --exp-shadow: 0 30px 94px rgba(87, 116, 119, 0.18);
  --exp-shadow-soft: 0 14px 40px rgba(26, 28, 30, 0.08);
  --exp-wrap: 1240px;
  color: var(--exp-ink);
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.4px;
  overflow-x: clip;
}
.exp *, .exp *::before, .exp *::after { box-sizing: border-box; }
.exp p { margin: 0 0 1em; color: var(--exp-text); }
.exp p:last-child { margin-bottom: 0; }
.exp ul, .exp ol { margin: 0; padding: 0; list-style: none; }
.exp img { max-width: 100%; display: block; }
.exp a { color: inherit; text-decoration: none; }
.exp h1, .exp h2, .exp h3, .exp h4 { margin: 0; }

.exp-wrap { width: 100%; max-width: var(--exp-wrap); margin: 0 auto; padding: 0 40px; }
.exp-section { padding: 88px 0; }
.exp-section--alt + .exp-section { padding-top: 72px; }
.exp-hub > .exp-section:last-of-type { padding-bottom: 40px; }
.exp-section--tight { padding: 48px 0 0; }
.exp-section--tight + .exp-section { padding-top: 72px; }
.exp-section--alt { background: var(--exp-mint-3); }

.exp-icon { width: 20px; height: 20px; flex: none; }
.exp .clinicana-country-flag { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(26, 28, 30, 0.08); }

/* ---- Type ------------------------------------------------------------------ */
.exp-h2 { font-size: 44px; font-weight: 600; line-height: 1.12; letter-spacing: -2.4px; color: var(--exp-ink); }
.exp-h3 { font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -1.4px; color: var(--exp-ink); margin-bottom: 14px !important; }
.exp-h4 { font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.8px; color: var(--exp-ink); margin-bottom: 10px !important; }
.exp-intro { font-size: 20px; line-height: 1.5; color: var(--exp-text); }
.exp-head { max-width: 760px; margin-bottom: 44px; }
.exp-head .exp-h2 { margin-bottom: 14px; }

.exp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  height: 32px; padding: 0 14px; border-radius: 90px;
  background: var(--exp-mint); color: var(--exp-ink);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.exp-eyebrow .exp-icon { width: 16px; height: 16px; }
.exp-eyebrow--glass { background: rgba(255, 255, 255, 0.16); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(6px); }

.exp-link { display: inline-flex; align-items: center; gap: 8px; color: var(--exp-link) !important; font-weight: 600; font-size: 16px; letter-spacing: -0.4px; }
.exp-link .exp-icon { width: 16px; height: 16px; transition: transform .2s ease; }
.exp-link:hover .exp-icon { transform: translateX(3px); }

/* ---- Buttons ----------------------------------------------------------------- */
.exp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 26px; border-radius: 16px; border: 0; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 600; letter-spacing: -0.5px; white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.exp-btn:hover { transform: translateY(-2px); }
.exp-btn .exp-icon { width: 18px; height: 18px; }
.exp-btn--dark { background: var(--exp-ink); color: #fff !important; }
.exp-btn--dark:hover { background: #2a2d30; box-shadow: 0 14px 30px rgba(26, 28, 30, 0.22); }
.exp-btn--white { background: #fff; color: var(--exp-blue-ink) !important; }
.exp-btn--white:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18); }
.exp-btn--ghost { background: #fff; color: var(--exp-ink); border: 1px solid var(--exp-line); }
.exp-btn--ghost:hover { box-shadow: var(--exp-shadow-soft); }
.exp-btn--block { width: 100%; }

/* ---- Breadcrumbs -------------------------------------------------------------- */
.exp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 14px; color: rgba(255, 255, 255, 0.78); letter-spacing: -0.2px; }
.exp-crumbs a:hover { color: #fff; }
.exp-crumbs--dark { color: var(--exp-muted); }
.exp-crumbs--dark a { color: var(--exp-text); }
.exp-crumbs--dark a:hover { color: var(--exp-link); }
.exp-crumbs [aria-current] { color: inherit; }

/* ==========================================================================
   HUB
   ========================================================================== */

/* ---- Hero: Home 2 blue band, copy left, a stack of real patient videos right */
.exp-hero__band {
  position: relative; overflow: hidden; color: #fff;
  padding: 138px 0 112px;
  border-bottom-left-radius: 38px; border-bottom-right-radius: 38px;
  background:
    radial-gradient(circle at 80% 22%, rgba(141, 225, 255, 0.55) 0, rgba(141, 225, 255, 0) 36%),
    radial-gradient(circle at 8% 100%, rgba(141, 225, 255, 0.32) 0, rgba(141, 225, 255, 0) 30%),
    linear-gradient(135deg, var(--exp-blue) 0%, var(--exp-blue-dark) 100%);
}
.exp-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 56px; align-items: center; }
.exp-hero__copy { display: flex; flex-direction: column; }
.exp-hero__copy .exp-eyebrow { margin-bottom: 20px; }
.exp-hero__title { font-size: 50px; font-weight: 700; line-height: 1.06; letter-spacing: -2.6px; color: #fff; max-width: 680px; }
.exp .exp-hero__lead { margin: 20px 0 0; font-size: 19px; line-height: 1.55; color: rgba(255, 255, 255, 0.88); max-width: 620px; }

.exp-hero__stats { display: flex; gap: 12px; margin-top: 32px !important; }
.exp-hero__stats li {
  display: flex; flex-direction: column; gap: 4px; min-width: 132px;
  padding: 16px 20px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.24); backdrop-filter: blur(8px);
}
.exp-hero__stats strong { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -1.8px; color: #fff; }
.exp-hero__stats span { font-size: 14px; color: rgba(255, 255, 255, 0.82); letter-spacing: -0.2px; }

/* Collage: three playable videos. Each tile drops in, settles at its angle and
   then drifts slightly; hover straightens and lifts it. Three layers so the
   moves never fight: tile = place + entrance, card = idle drift (translate)
   + hover (transform). */
.exp-hero__collage { position: relative; height: 440px; perspective: 1200px; }
.exp-hero__tile { position: absolute; --r: 0deg; transform: rotate(var(--r)); }
.exp-hero__tile--1 { right: 0; top: 0; width: 280px; --r: 3deg; z-index: 3; --d: 0s; --from-x: -95px; --from-y: 120px; }
.exp-hero__tile--2 { left: 0; top: 96px; width: 270px; --r: -4deg; z-index: 2; --d: .07s; --from-x: 100px; --from-y: 26px; }
.exp-hero__tile--3 { right: 40px; bottom: 0; width: 280px; --r: 2deg; z-index: 1; --d: .14s; --from-x: -55px; --from-y: -120px; }
.exp-hero__tile:hover, .exp-hero__tile:focus-within { z-index: 5; }

.exp-hero__tile-card {
  display: block; border-radius: 22px; overflow: hidden; background: #fff; cursor: pointer;
  box-shadow: 0 30px 70px rgba(16, 48, 110, 0.38);
  transition: transform .6s cubic-bezier(.25, .7, .3, 1), box-shadow .6s ease;
  will-change: transform;
}
.exp-hero__tile-card:hover, .exp-hero__tile-card:focus-visible {
  transform: translateY(-4px) scale(1.02) rotate(calc(var(--r) * -.4));
  box-shadow: 0 36px 80px rgba(12, 40, 96, 0.44);
}
.exp-hero__tile-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.exp-hero__tile-media { position: relative; display: block; overflow: hidden; }
.exp-hero__tile-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .9s ease; }
.exp-hero__tile-card:hover .exp-hero__tile-media img { transform: scale(1.03); }
.exp-hero__tile-play {
  position: absolute; left: 14px; top: 14px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.95); color: var(--exp-ink);
  transition: transform .5s cubic-bezier(.25, .7, .3, 1), background-color .4s ease, color .4s ease;
}
.exp-hero__tile-play .exp-icon { width: 16px; height: 16px; margin-left: 2px; }
.exp-hero__tile-play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.9); opacity: 0; }
/* On hover the button turns blue and gives off a slow ring. */
.exp-hero__tile-card:hover .exp-hero__tile-play, .exp-hero__tile-card:focus-visible .exp-hero__tile-play {
  transform: scale(1.1); background: var(--exp-blue); color: #fff;
}
.exp-hero__tile-card:hover .exp-hero__tile-play::after { animation: exp-ring 1.8s ease-out infinite; }
.exp-hero__tile-meta { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 14px; color: var(--exp-ink); }
.exp-hero__tile-meta b { font-weight: 700; letter-spacing: -0.3px; }
.exp-hero__tile-meta em { margin-left: auto; font-style: normal; font-size: 13px; color: var(--exp-muted); transition: color .3s ease; }
.exp-hero__tile-card:hover .exp-hero__tile-meta em { color: var(--exp-blue); }

@keyframes exp-ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }
/* Entrance: the three tiles start stacked in the middle as one card, then open
   out like petals to their places. --from-x/y is each tile's way back to the centre. */
@keyframes exp-stack-in { from { opacity: 0; scale: .72; } to { opacity: 1; scale: 1; } }
@keyframes exp-bloom {
  from { transform: translate(var(--from-x), var(--from-y)) rotate(0deg); }
  to { transform: rotate(var(--r)); }
}
@keyframes exp-tile-drift { from { translate: 0 0; rotate: 0deg; } to { translate: var(--sway-x, 0) var(--sway-y, -7px); rotate: var(--sway-r, .6deg); } }

@media (prefers-reduced-motion: no-preference) {
  .exp-hero__tile { animation: exp-stack-in .5s cubic-bezier(.2, .9, .3, 1.15) .1s both, exp-bloom 1.1s cubic-bezier(.3, 1.25, .4, 1) calc(.75s + var(--d)) both; }
  .exp-hero__tile-card { animation: exp-tile-drift 3.6s ease-in-out calc(var(--d) * 6 + 2.4s) infinite alternate; }
  .exp-hero__tile--2 .exp-hero__tile-card { animation-duration: 4.3s; --sway-x: -3px; --sway-y: 6px; --sway-r: -.7deg; }
  .exp-hero__tile--3 .exp-hero__tile-card { animation-duration: 5s; --sway-x: 3px; --sway-y: -6px; --sway-r: .5deg; }
  .exp-hero__tile-card:hover, .exp-hero__tile-card:focus-visible { animation-play-state: paused; }
}

/* Lightbox opened from the collage: link from the video to the patient's page. */
.clinicana-lightbox__caption .exp-lightbox-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 10px 18px; border-radius: 90px;
  background: #fff; color: #1a1c1e; font-size: 15px; font-weight: 600; letter-spacing: -0.3px; text-decoration: none;
}
.clinicana-lightbox__caption .exp-lightbox-link:hover { background: #e0f4f8; }

/* ---- Browse: one-row filter bar on the hero edge, then the grid ---- */
.exp [hidden] { display: none !important; }
.exp .exp-hero { margin: 0; padding: 0; }
.exp .exp-browse { position: relative; z-index: 2; margin: -50px 0 0; padding: 0 0 88px; }
.exp-filters {
  position: relative; z-index: 20;
  display: flex; align-items: flex-end; gap: 24px;
  padding: 18px 22px 20px; background: #fff; border-radius: 22px;
  border: 1px solid var(--exp-line-soft); box-shadow: var(--exp-shadow);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.exp-filters__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; flex: 1; }
.exp-filters__label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--exp-muted); }
.exp-select { position: relative; display: block; min-width: 0; }
.exp-select select {
  width: 100%; height: 46px; padding: 0 40px 0 16px; border-radius: 13px;
  border: 1px solid var(--exp-line); background: var(--exp-mint-3); color: var(--exp-ink);
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.3px; text-overflow: ellipsis;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.exp-select select:hover { border-color: var(--exp-ink); }
.exp-select select:focus-visible { outline: 2px solid var(--exp-blue); outline-offset: 1px; }
.exp-select .exp-icon { position: absolute; right: 14px; bottom: 14px; width: 18px; height: 18px; pointer-events: none; color: var(--exp-muted); }
.exp-select.is-set select { background: #e8f1fe; border-color: var(--exp-blue); color: var(--exp-blue-ink); }
.exp-select.is-set .exp-icon { color: var(--exp-blue); }
.exp-select.is-set .exp-filters__label { color: var(--exp-blue); }
.exp-filters__status { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; min-width: 150px; height: 46px; }
.exp .exp-filters__count { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.5px; color: var(--exp-ink); white-space: nowrap; }
.exp-filters__reset { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--exp-link); cursor: pointer; white-space: nowrap; }
.exp-filters__reset .exp-icon { width: 13px; height: 13px; stroke-width: 2.4; }
.exp-filters__reset:hover { text-decoration: underline; }

.exp-results { padding-top: 64px; }
.exp-hub.is-filtering .exp-results { padding-top: 36px; }
.exp-results__title { margin: 0 0 28px !important; }
.exp-mbar, .exp .exp-results__count, .exp-filters__sentinel, .exp-back, .exp-specs { display: none; }

.exp-card__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, 0.95); color: var(--exp-ink);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3); transition: transform .25s ease;
}

/* ---- Chips ------------------------------------------------------------------- */
.exp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.exp-chip {
  display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 90px;
  background: var(--exp-mint-3); border: 1px solid var(--exp-line-soft);
  font-size: 13px; font-weight: 600; letter-spacing: -0.2px; color: var(--exp-ink); white-space: nowrap;
}
.exp-chip--stage { background: #e8f1fe; border-color: #d3e3fc; color: var(--exp-blue-ink); }
.exp-chip--beard { background: #fff4e0; border-color: #fbe3b6; color: #7a4b00; }
.exp-chips--lg .exp-chip { height: 32px; padding: 0 13px; font-size: 14px; }

/* ---- Grid of case cards -------------------------------------------------------- */
.exp-grid-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 32px; }
.exp-grid-head .exp-h2 { margin-right: auto; }
.exp .exp-grid-head__count { margin: 0; font-size: 16px; color: var(--exp-muted); font-weight: 600; }
.exp-grid-head__reset { border: 0; background: none; padding: 0; font: inherit; font-size: 16px; font-weight: 600; color: var(--exp-link); cursor: pointer; }
.exp-grid-head__reset[hidden] { display: none; }

.exp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.exp-card { display: flex; }
.exp-card.is-collapsed, .exp-card.is-filtered { display: none; }
.exp-card__link {
  display: flex; flex-direction: column; width: 100%;
  background: #fff; border: 1px solid var(--exp-line-soft); border-radius: 24px; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.exp-card__link:hover { transform: translateY(-4px); box-shadow: var(--exp-shadow-soft); border-color: var(--exp-line); }
.exp-card__media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--exp-ink); overflow: hidden; }
.exp-card__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform .5s ease; }
.exp-card__link:hover .exp-card__media img { transform: scale(1.07); }
.exp-card__play { width: 56px; height: 56px; }
.exp-card__play .exp-icon { width: 22px; height: 22px; margin-left: 3px; }
.exp-card__link:hover .exp-card__play { transform: translate(-50%, -50%) scale(1.08); }
.exp-card__badge {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: 90px; background: rgba(26, 28, 30, 0.72); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: -0.1px; backdrop-filter: blur(6px);
}
.exp-card__badge .exp-icon { width: 14px; height: 14px; }
.exp-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 22px; flex: 1; }
.exp-card__meta { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--exp-muted); letter-spacing: -0.2px; }
.exp-card__meta--lg { font-size: 15px; }
.exp-card__title { font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -0.8px; color: var(--exp-ink); }
.exp-card__body .exp-chips { margin-top: auto; padding-top: 4px; }

/* Featured story: the first result, two columns wide. With a filter on it is a normal card. */
.exp-card__featured, .exp .exp-card__excerpt, .exp-card__cta { display: none; }
.exp-hub:not(.is-filtering) .exp-card--featured { grid-column: span 2; }
.exp-hub:not(.is-filtering) .exp-card--featured .exp-card__link { flex-direction: row; }
.exp-hub:not(.is-filtering) .exp-card--featured .exp-card__media { flex: 0 0 56%; aspect-ratio: auto; min-height: 100%; }
.exp-hub:not(.is-filtering) .exp-card--featured .exp-card__play { width: 72px; height: 72px; }
.exp-hub:not(.is-filtering) .exp-card--featured .exp-card__play .exp-icon { width: 26px; height: 26px; }
.exp-hub:not(.is-filtering) .exp-card--featured .exp-card__body { justify-content: center; gap: 12px; padding: 26px 28px; }
.exp-hub:not(.is-filtering) .exp-card--featured .exp-card__featured { display: inline-flex; height: 28px; font-size: 12px; background: #e8f1fe; color: var(--exp-blue-ink); }
.exp-hub:not(.is-filtering) .exp-card--featured .exp-card__title { font-size: 26px; letter-spacing: -1.1px; }
.exp-hub:not(.is-filtering) .exp-card--featured .exp-card__excerpt { display: block; margin: 0; font-size: 15px; line-height: 1.55; color: var(--exp-text); }
.exp-hub:not(.is-filtering) .exp-card--featured .exp-chips { margin-top: 0; }
.exp-hub:not(.is-filtering) .exp-card--featured .exp-card__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--exp-link); letter-spacing: -0.3px; }
.exp-hub:not(.is-filtering) .exp-card--featured .exp-card__cta .exp-icon { width: 16px; height: 16px; transition: transform .2s ease; }
.exp-hub:not(.is-filtering) .exp-card--featured .exp-card__link:hover .exp-card__cta .exp-icon { transform: translateX(3px); }

.exp-empty { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 56px 40px; text-align: center; border: 1.5px dashed var(--exp-line); border-radius: 24px; }
.exp .exp-empty p { margin: 0; color: var(--exp-text); }
.exp-more { display: flex; justify-content: center; margin-top: 44px; }
.exp-more[hidden] { display: none; }

/* ---- How to judge a video review ---------------------------------------------- */
.exp-guide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.exp-guide__item { position: relative; padding: 30px 28px 32px; background: #fff; border: 1px solid var(--exp-line-soft); border-radius: 24px; }
.exp-guide__num { position: absolute; right: 24px; top: 26px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--exp-muted); }
.exp-guide__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 22px; border-radius: 16px; background: var(--exp-mint); color: var(--exp-ink); }
.exp-guide__icon .exp-icon { width: 24px; height: 24px; }
.exp-guide__item p { font-size: 16px; }

/* ---- Closing: before & after link + estimate panel ------------------------------ */
.exp-closing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.exp-closing__ba {
  position: relative; display: flex; align-items: flex-end; gap: 24px; padding: 40px;
  border-radius: var(--exp-radius); background: linear-gradient(135deg, #d0fff1 0%, #e0f4f8 45%, #cfe6ff 100%);
  border: 1px solid var(--exp-line-soft); transition: transform .25s ease, box-shadow .25s ease;
}
.exp-closing__ba:hover { transform: translateY(-3px); box-shadow: var(--exp-shadow-soft); }
.exp-closing__ba-body { display: flex; flex-direction: column; gap: 14px; }
.exp-closing__ba .exp-eyebrow { background: rgba(255, 255, 255, 0.8); }
.exp-closing__title { display: block; font-size: 34px; font-weight: 600; line-height: 1.15; letter-spacing: -1.8px; color: var(--exp-ink); }
.exp-closing__text { display: block; font-size: 17px; line-height: 1.5; color: var(--exp-text); }
.exp-closing__arrow { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--exp-ink); color: #fff; }
.exp-closing__ba:hover .exp-closing__arrow { transform: translateX(3px); }
.exp-closing__cta, .exp-side-cta {
  position: relative; overflow: hidden; border-radius: var(--exp-radius); color: #fff;
  background:
    radial-gradient(circle at 85% 10%, rgba(141, 225, 255, 0.45) 0, rgba(141, 225, 255, 0) 40%),
    linear-gradient(135deg, var(--exp-blue) 0%, var(--exp-blue-dark) 100%);
}
.exp-closing__cta-body, .exp-side-cta__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
.exp-closing__cta-body { padding: 40px; align-items: flex-start; }
.exp-closing__cta .exp-closing__title { color: #fff; }
.exp .exp-closing__cta .exp-closing__text { color: rgba(255, 255, 255, 0.86); margin: 0 0 8px; }

/* Drifting shapes on blue panels (markup from clinicana_costs_blobs()) */
.exp .costs-blobs { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }
.exp .costs-blobs i { position: absolute; display: block; border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; }
.exp .costs-blobs__a { width: 420px; height: 420px; right: -150px; top: -190px; background: radial-gradient(circle at 35% 35%, rgba(141, 225, 255, 0.7), rgba(141, 225, 255, 0.28) 55%, rgba(141, 225, 255, 0) 100%); animation: exp-blob-a 20s ease-in-out infinite alternate; }
.exp .costs-blobs__b { width: 360px; height: 360px; left: -150px; bottom: -220px; background: radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.28), rgba(141, 225, 255, 0.2) 55%, rgba(141, 225, 255, 0) 100%); animation: exp-blob-b 24s ease-in-out infinite alternate; }
@keyframes exp-blob-a { to { transform: translate(-40px, 30px) rotate(25deg); border-radius: 54% 46% 48% 52% / 46% 54% 46% 54%; } }
@keyframes exp-blob-b { to { transform: translate(50px, -30px) rotate(-20deg); border-radius: 52% 48% 46% 54% / 48% 52% 48% 52%; } }
@media (prefers-reduced-motion: reduce) { .exp .costs-blobs i { animation: none; } }

/* ---- Header over the blue hero band: white until it gets its scrolled ground */
body:has(main.exp-hub) .header:not(.fixed):not(.menu-opened) .header__menu > li > a,
body:has(main.exp-hub) .header:not(.fixed):not(.menu-opened) .header__langs-current { color: #fff; }
body:has(main.exp-hub) .header:not(.fixed):not(.menu-opened) .header__hamb span { background-color: #fff; }
body:has(main.exp-hub) .header:not(.fixed):not(.menu-opened) .header__logo img,
body:has(main.exp-hub) .header:not(.fixed):not(.menu-opened) .header__langs-current .check,
body:has(main.exp-hub) .header:not(.fixed):not(.menu-opened) .header__menu > li.has-dropdown > a::after { filter: brightness(0) invert(1); }
body:has(main.exp-hub) .header:not(.fixed):not(.menu-opened) .header__menu > li > a:hover { background: rgba(255, 255, 255, 0.14); }
body:has(main.exp-hub) .header:not(.fixed):not(.menu-opened) .header__btn.black { background: #fff; color: var(--exp-ink, #1a1c1e); }

/* ==========================================================================
   WATCH PAGE
   ========================================================================== */
.exp-watch__top {
  padding: 132px 0 96px;
  background:
    radial-gradient(circle at 90% 0%, rgba(136, 234, 255, 0.35) 0, rgba(136, 234, 255, 0) 32%),
    linear-gradient(180deg, var(--exp-mint-3) 0, #fbfbfb 640px);
}
.exp-watch__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
.exp-watch__main { display: flex; flex-direction: column; min-width: 0; }
.exp-watch__main > .exp-eyebrow { margin-bottom: 18px; background: #fff; border: 1px solid var(--exp-line-soft); color: var(--exp-link); }
.exp-watch__title { font-size: 46px; font-weight: 700; line-height: 1.08; letter-spacing: -2.4px; color: var(--exp-ink); }
.exp .exp-watch__meta { display: flex; align-items: center; gap: 10px; margin: 16px 0 28px; font-size: 17px; color: var(--exp-text); }

.exp-player {
  position: relative; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; background: var(--exp-ink);
  box-shadow: 0 30px 80px rgba(26, 28, 30, 0.18);
}
.exp-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.exp-moments { margin-top: 24px; padding: 22px 24px; background: #fff; border: 1px solid var(--exp-line-soft); border-radius: 22px; }
.exp-moments__title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px !important; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--exp-muted); }
.exp-moments__title .exp-icon { width: 16px; height: 16px; }
.exp-moments__list { display: flex; flex-wrap: wrap; gap: 8px; }
.exp-moments__list a {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 6px; border-radius: 12px;
  background: var(--exp-mint-3); border: 1px solid var(--exp-line-soft); font-size: 15px; font-weight: 600; letter-spacing: -0.3px; color: var(--exp-ink);
  transition: background-color .2s ease, border-color .2s ease;
}
.exp-moments__list a:hover { background: var(--exp-mint); border-color: var(--exp-line); }
.exp-moments__list b { display: inline-grid; place-items: center; height: 28px; padding: 0 8px; border-radius: 8px; background: var(--exp-ink); color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }

/* Story column */
.exp-story { display: flex; flex-direction: column; gap: 56px; margin-top: 64px; }
.exp-story__block > p, .exp-story__block > .exp-summary p { font-size: 18px; line-height: 1.7; }
.exp-quote { position: relative; margin: 26px 0 0; padding: 30px 34px 28px 88px; border-radius: 24px; background: var(--exp-mint); }
.exp-quote > .exp-icon { position: absolute; left: 30px; top: 30px; width: 36px; height: 36px; color: var(--exp-blue); stroke-width: 2.4; }
.exp-quote blockquote { margin: 0; }
.exp .exp-quote blockquote p { font-size: 24px; font-weight: 600; line-height: 1.35; letter-spacing: -1px; color: var(--exp-ink); }
.exp-quote figcaption { margin-top: 12px; font-size: 15px; color: var(--exp-text); }

.exp-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.exp-photos--1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.exp-photos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.exp-photos__item { display: flex; flex-direction: column; gap: 10px; }
.exp-photos__item.is-extra { display: none; }
.exp-photos.is-open .exp-photos__item.is-extra { display: flex; }
.exp-photos__toggle { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.exp .exp-photos__toggle { font-size: 16px; font-weight: 600; }
.exp-photos__toggle .exp-icon { transition: transform .3s ease; }
.exp-photos__toggle:hover .exp-icon { transform: translateY(2px); }
.exp-photos__toggle[aria-expanded="true"] .exp-icon, .exp-photos__toggle[aria-expanded="true"]:hover .exp-icon { transform: rotate(180deg); }
@keyframes exp-photo-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .exp-photos.is-open .exp-photos__item.is-extra { animation: exp-photo-in .5s cubic-bezier(.2, .8, .25, 1) calc(var(--i, 0) * 45ms) both; }
}
.exp-photos__img { display: block; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--exp-mint-2); }
.exp-photos__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.exp-photos__item:hover img { transform: scale(1.04); }
.exp-photos__caption { font-size: 14px; color: var(--exp-text); letter-spacing: -0.2px; }
.exp-story__block > .exp-link { margin-top: 18px; }

/* Sidebar */
.exp-watch__side { position: sticky; top: calc(var(--header-h, 90px) + 20px); }
.exp-side { display: flex; flex-direction: column; gap: 16px; }
.exp-details { padding: 26px 26px 20px; background: #fff; border: 1px solid var(--exp-line-soft); border-radius: 26px; box-shadow: var(--exp-shadow-soft); }
.exp-details__title { margin-bottom: 8px !important; font-size: 20px; font-weight: 600; letter-spacing: -0.8px; }
.exp-details dl { margin: 0; }
.exp-details__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--exp-line-soft); font-size: 15px; }
.exp-details__row:last-child { border-bottom: 0; }
.exp-details dt { display: flex; align-items: center; gap: 8px; color: var(--exp-muted); font-weight: 500; }
.exp-details dt .exp-icon { width: 17px; height: 17px; color: var(--exp-text); }
.exp-details dd { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--exp-ink); font-weight: 600; }
.exp-reviewed { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 14px; border-radius: 16px; background: var(--exp-mint-3); }
.exp-reviewed img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #fff; }
.exp-reviewed span { display: flex; flex-direction: column; line-height: 1.3; }
.exp-reviewed small { font-size: 12px; color: var(--exp-muted); }
.exp-reviewed b { font-size: 15px; font-weight: 600; letter-spacing: -0.3px; color: var(--exp-ink); }
.exp-side-cta__body { padding: 28px; }
.exp-side-cta__title { font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; color: #fff; }
.exp .exp-side-cta p { margin: 0 0 6px; font-size: 15px; color: rgba(255, 255, 255, 0.86); }

.exp-readmore { padding: 22px 22px 10px; background: #fff; border: 1px solid var(--exp-line-soft); border-radius: 26px; }
.exp-readmore__title { margin-bottom: 6px !important; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--exp-muted); }
.exp-readmore li + li { border-top: 1px solid var(--exp-line-soft); }
.exp-readmore a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; font-size: 16px; font-weight: 600; letter-spacing: -0.4px; color: var(--exp-ink); }
.exp-readmore a .exp-icon { width: 16px; height: 16px; color: var(--exp-muted); transition: transform .2s ease, color .2s ease; }
.exp-readmore a:hover { color: var(--exp-link); }
.exp-readmore a:hover .exp-icon { transform: translateX(3px); color: var(--exp-link); }


/* ---- Watch page: the lively bits ------------------------------------------------ */
/* Stage: the video with a soft glow in its own colours behind it. */
.exp-stage { position: relative; }
.exp-stage__glow {
  position: absolute; inset: 6% 4% -4%; z-index: 0; border-radius: 40px;
  background-size: cover; background-position: center; filter: blur(48px) saturate(1.5); opacity: .55;
  pointer-events: none; transform: translateZ(0);
}
.exp-stage .exp-player { position: relative; z-index: 1; }
@keyframes exp-glow { from { opacity: .4; transform: scale(.98); } to { opacity: .68; transform: scale(1.03); } }

/* Cookie consent on the player: our own panel over the video still, inside the
   player's box (the consent tool's grey placeholder and its sizing are overridden). */
.exp-consent { display: none; }
.exp .exp-player.cmplz-blocked-content-container {
  width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9 !important;
  background-color: #10202e !important; background-image: var(--exp-poster) !important;
  background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
}
.exp-player.cmplz-blocked-content-container > iframe { visibility: hidden; }
.exp-player.cmplz-blocked-content-container > .cmplz-blocked-content-notice:not(.exp-btn) { display: none !important; }
.exp-player.cmplz-blocked-content-container > .exp-consent {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; text-align: center; color: #fff;
  background: linear-gradient(180deg, rgba(13, 28, 48, 0.55), rgba(13, 28, 48, 0.82)); backdrop-filter: blur(3px);
}
.exp-consent__play { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); }
.exp-consent__play .exp-icon { width: 24px; height: 24px; margin-left: 3px; }
.exp-consent__title { font-size: 26px; font-weight: 600; letter-spacing: -1px; line-height: 1.2; }
.exp-consent__text { max-width: 440px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.exp-consent__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; margin-top: 12px; }
.exp .exp-consent .exp-btn { position: static; height: 52px; padding: 0 24px; width: auto; transform: none; font-size: 16px; white-space: nowrap; line-height: 1; }
.exp .exp-consent .exp-btn:hover { transform: translateY(-2px); }
.exp-consent .exp-btn .exp-icon { width: 14px; height: 14px; }
.exp .exp-consent__alt { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.9); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 4px; }
.exp-consent__alt .exp-icon { width: 14px; height: 14px; transform: rotate(-45deg); }
.exp-consent__alt:hover { text-decoration-color: #fff; }

/* Similar cases: a person, not a video. Portrait, facts, "view story". */
.exp-card--profile .exp-card__link { gap: 16px; padding: 20px; }
.exp-profile__top { display: flex; align-items: center; gap: 16px; }
.exp-profile__img { flex: none; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--exp-mint-2); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--exp-line); }
.exp-profile__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform .5s ease; }
.exp-profile__img--still img { object-position: 50% 50%; transform: scale(1.5); }
.exp-card--profile .exp-card__link:hover .exp-profile__img:not(.exp-profile__img--still) img { transform: scale(1.08); }
.exp-profile__who { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.exp-card--profile .exp-card__title { font-size: 20px; }
.exp-card--profile .exp-chips { margin-top: 0; }
.exp-profile__cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--exp-line-soft); font-size: 15px; font-weight: 600; letter-spacing: -0.3px; color: var(--exp-link); }
.exp-profile__cta .exp-icon { width: 16px; height: 16px; transition: transform .2s ease; }
.exp-card--profile .exp-card__link:hover .exp-profile__cta .exp-icon { transform: translateX(4px); }

/* Key moments that follow playback. */
.exp-moments__list a { position: relative; overflow: hidden; }
.exp-moments__list a > * { position: relative; z-index: 1; }
.exp-moments__list a::before { content: ""; position: absolute; inset: 0; z-index: 0; background: #d5e6fd; transform: scaleX(var(--p, 0)); transform-origin: left; opacity: 0; transition: transform .5s linear; }
.exp-moments__list a.is-active { border-color: var(--exp-blue); background: #eef5ff; color: var(--exp-blue-ink); }
.exp-moments__list a.is-active::before { opacity: 1; }
.exp-moments__list a.is-active b { background: var(--exp-blue); }
.exp-moments__list a.is-done b { background: var(--exp-text); }

/* Norwood stage as seven steps. */
.exp-details__row--stage dd { flex-wrap: wrap; row-gap: 8px; }
.exp-meter { display: flex; gap: 4px; flex-basis: 100%; }
.exp-meter i { flex: 1; height: 6px; max-width: 26px; border-radius: 90px; background: var(--exp-line-soft); transition: background-color .35s ease calc(var(--n) * 70ms); }
.exp-meter.is-in i.is-on { background: var(--exp-blue); }
.exp-details__row--grafts dd span { font-variant-numeric: tabular-nums; }

/* Quote: larger mark that swings in. */
.exp-quote { overflow: hidden; }
.exp-quote > .exp-icon { transform-origin: 30% 70%; }

@media (prefers-reduced-motion: no-preference) {
  .exp-stage__glow { animation: exp-glow 6s ease-in-out infinite alternate; }

  /* First screen: copy, video and the case card arrive in turn. */
  @keyframes exp-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes exp-pop { from { opacity: 0; transform: translateY(26px) scale(.975); } to { opacity: 1; transform: none; } }
  .exp-watch__main > .exp-eyebrow, .exp-watch__title, .exp-watch__meta { animation: exp-rise .7s cubic-bezier(.2, .8, .25, 1) both; }
  .exp-watch__title { animation-delay: .06s; }
  .exp-watch__meta { animation-delay: .12s; }
  .exp-stage { animation: exp-pop .9s cubic-bezier(.2, .8, .25, 1) .18s both; }
  .exp-details { animation: exp-pop .8s cubic-bezier(.2, .8, .25, 1) .3s both; }
  .exp-side-cta { animation: exp-pop .8s cubic-bezier(.2, .8, .25, 1) .4s both; }
  .exp-details__row { animation: exp-rise .5s ease both; animation-delay: calc(.45s + var(--row, 0) * 60ms); }
  .exp-details__row:nth-child(2) { --row: 1; } .exp-details__row:nth-child(3) { --row: 2; } .exp-details__row:nth-child(4) { --row: 3; }
  .exp-details__row:nth-child(5) { --row: 4; } .exp-details__row:nth-child(6) { --row: 5; } .exp-details__row:nth-child(7) { --row: 6; }

  /* Further down: sections ease in when reached. */
  .is-reveal-ready [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease var(--reveal-delay, 0ms), transform .7s cubic-bezier(.2, .8, .25, 1) var(--reveal-delay, 0ms); }
  .is-reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
  @keyframes exp-quote-in { from { opacity: 0; transform: rotate(-25deg) scale(.5); } to { opacity: 1; transform: none; } }
  .is-reveal-ready .exp-story__block.is-in .exp-quote > .exp-icon { animation: exp-quote-in .7s cubic-bezier(.2, 1.4, .3, 1) .25s both; }
}


/* ==========================================================================
   RESPONSIVE
   Tablet (≤1100) keeps the desktop structure, tightened. Phone (≤767) is its
   own layout: full-bleed video, swipe rows with snap, chip filters, thumb-size
   targets and press feedback instead of hover.
   ========================================================================== */
.exp { -webkit-tap-highlight-color: transparent; }
.exp [data-snap] { scrollbar-width: none; }
.exp [data-snap]::-webkit-scrollbar { display: none; }

@media (hover: none) {
  .exp-card__link:hover, .exp-btn:hover, .exp-closing__ba:hover, .exp-hero__tile-card:hover { transform: none; }
  .exp-card__link:hover .exp-card__media img { transform: scale(1.03); }
  .exp-photos__item:hover img { transform: none; }
  .exp-card__link, .exp-btn, .exp-closing__ba, .exp-readmore a, .exp-moments__list a, .exp-photos__item { transition: transform .15s ease, background-color .15s ease, box-shadow .2s ease; }
  .exp-card__link:active, .exp-closing__ba:active, .exp-photos__item:active { transform: scale(.975); }
  .exp-btn:active, .exp-moments__list a:active { transform: scale(.96); }
  .exp-readmore a:active { background: var(--exp-mint-3); }
  .exp-hero__tile-card:active { transform: scale(.97); }
}

@media (max-width: 1100px) {
  .exp-wrap { padding: 0 28px; }
  .exp-section { padding: 72px 0; }
  .exp-h2 { font-size: 36px; letter-spacing: -1.8px; }
  .exp-hero__band { padding: 124px 0 104px; }
  .exp-hero__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
  .exp-hero__title { font-size: 42px; letter-spacing: -2px; }
  .exp-hero__collage { width: 470px; zoom: .76; }
  .exp-filters { gap: 16px; }
  .exp-filters__status { min-width: 110px; }
  .exp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .exp-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp-watch__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
  .exp-watch__title { font-size: 38px; letter-spacing: -1.8px; }
  .exp-details__row { grid-template-columns: 124px minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .exp-filters__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp-filters { align-items: center; }
  .exp-hero__grid { grid-template-columns: minmax(0, 1fr) 330px; }
  .exp-hero__collage { zoom: .7; }
}

@media (max-width: 767px) {
  .exp { font-size: 16px; letter-spacing: -0.2px; }
  .exp-wrap { padding: 0 16px; }
  .exp-section { padding: 52px 0; }
  .exp-section--alt + .exp-section { padding-top: 44px; }
  .exp-hub > .exp-section:last-of-type { padding-bottom: 24px; }
  .exp-h2 { font-size: 27px; line-height: 1.15; letter-spacing: -1.1px; }
  .exp-h3 { font-size: 22px; letter-spacing: -0.8px; margin-bottom: 10px !important; }
  .exp-h4 { font-size: 18px; }
  .exp-intro { font-size: 16px; }
  .exp-head { margin-bottom: 24px; }
  .exp-eyebrow { height: 28px; padding: 0 11px; font-size: 11px; }
  .exp-btn { height: 52px; font-size: 16px; border-radius: 15px; }
  .exp-crumbs { flex-wrap: nowrap; overflow: hidden; margin-bottom: 14px; font-size: 13px; white-space: nowrap; }
  .exp-crumbs > :last-child { overflow: hidden; text-overflow: ellipsis; }

  /* Swipe rows: bleed to the screen edges, snap card by card. */
  .exp [data-snap] {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; scroll-padding-left: 16px;
  }
  .exp [data-snap] > * { scroll-snap-align: start; flex-shrink: 0; }

  /* ---- Hub ---- */
  .exp-hero__band { padding: 92px 0 74px; border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; }
  .exp-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .exp-hero__copy .exp-eyebrow { margin-bottom: 14px; }
  .exp-hero__title { font-size: 31px; line-height: 1.1; letter-spacing: -1.3px; }
  .exp .exp-hero__lead { margin-top: 12px; font-size: 15.5px; line-height: 1.5; }
  .exp-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px !important; }
  .exp-hero__stats li { min-width: 0; padding: 12px 12px 11px; border-radius: 15px; }
  .exp-hero__stats strong { font-size: 25px; letter-spacing: -1px; }
  .exp-hero__stats span { font-size: 12px; line-height: 1.25; }
  .exp-hero__collage { width: 470px; zoom: .7; margin: 0 auto; }
  .exp-hero__tile-play { width: 46px; height: 46px; }

  .exp .exp-browse { margin-top: -34px; padding-bottom: 52px; }
  /* Filters: without the script, plain full-width selects. With it (.has-sheet):
     one bar of chips that sticks under the header and opens a bottom sheet. */
  .exp-filters { display: block; padding: 14px; border-radius: 20px; }
  .exp .exp-filters__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; overflow: visible; }
  .exp-filters__status { flex-direction: row; align-items: center; justify-content: space-between; min-width: 0; height: auto; margin-top: 12px; }

  /* The theme clips sideways overflow on body and .main-wrapper with overflow: hidden,
     which turns them into scroll containers and stops anything inside from sticking.
     clip keeps the same protection without that side effect. */
  body:has(main.exp-hub) { overflow-x: clip; overflow-y: visible; }
  body:has(main.exp-hub) .main-wrapper { overflow: clip; }

  .has-sheet .exp-filters__fields, .has-sheet .exp-filters__status { display: none; }
  .has-sheet .exp-filters {
    position: sticky; top: calc(var(--exp-header-h, 60px) + 8px); z-index: 20;
    padding: 8px; border-radius: 22px; box-shadow: 0 14px 40px rgba(26, 28, 30, 0.12);
    transition: border-radius .2s ease, box-shadow .2s ease;
  }
  .has-sheet .exp-filters.is-stuck { box-shadow: 0 10px 28px rgba(26, 28, 30, 0.16); }
  .has-sheet .exp-filters__sentinel { display: block; height: 1px; margin-bottom: -1px; }
  .has-sheet .exp-mbar { display: flex; align-items: center; gap: 8px; }
  .exp-mbar button { font: inherit; border: 0; background: none; padding: 0; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .exp-mbar .exp-mbar__all {
    flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 14px; border-radius: 15px;
    background: var(--exp-ink); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -0.3px;
    transition: transform .12s ease, background-color .2s ease;
  }
  .exp-mbar__all svg { width: 19px; height: 19px; }
  .exp-mbar__all b { display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; margin-left: 1px; border-radius: 90px; background: var(--exp-blue); font-size: 12px; font-weight: 700; }
  .exp-mbar__all:active { transform: scale(.95); }
  .exp-mbar__chips {
    flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-right: -8px; padding-right: 22px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
  }
  .exp-mbar__chips::-webkit-scrollbar { display: none; }
  .exp-mbar .exp-mchip {
    flex: none; display: inline-flex; align-items: center; gap: 5px; height: 46px; padding: 0 12px 0 15px; border-radius: 15px;
    background: var(--exp-mint-3); border: 1px solid var(--exp-line); color: var(--exp-ink);
    font-size: 15px; font-weight: 600; letter-spacing: -0.3px; white-space: nowrap; transition: transform .12s ease;
  }
  .exp-mchip svg { width: 16px; height: 16px; color: var(--exp-muted); }
  .exp-mbar button.exp-mchip:active { transform: scale(.95); }
  .exp-mbar .exp-mchip.is-on { padding: 0 4px 0 0; gap: 0; background: #e8f1fe; border-color: var(--exp-blue); color: var(--exp-blue-ink); }
  .exp-mchip.is-on > button:first-child { height: 44px; padding: 0 6px 0 15px; font-weight: 700; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
  .exp-mbar .exp-mchip__x { display: grid; place-items: center; width: 36px; height: 44px; }
  .exp-mchip__x svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--exp-blue); color: #fff; }

  .exp-results__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
  .exp .exp-results__title { margin: 0 !important; }
  .exp .exp-results__count { display: block; margin: 0; flex: none; font-size: 14px; font-weight: 600; color: var(--exp-muted); white-space: nowrap; }

  .exp-results, .exp-hub.is-filtering .exp-results { padding-top: 32px; }
  .exp-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .exp-card__link { border-radius: 20px; }
  .exp-card__body { gap: 8px; padding: 14px 16px 16px; }
  .exp-card__meta { font-size: 13px; }
  .exp-card__title { font-size: 18px; letter-spacing: -0.5px; }
  .exp-card__play { width: 50px; height: 50px; }
  .exp-chip { height: 26px; padding: 0 10px; font-size: 12.5px; }
  /* Featured: a normal card with its label, on one column. */
  .exp-hub:not(.is-filtering) .exp-card--featured { grid-column: auto; }
  .exp-hub:not(.is-filtering) .exp-card--featured .exp-card__link { flex-direction: column; }
  .exp-hub:not(.is-filtering) .exp-card--featured .exp-card__media { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .exp-hub:not(.is-filtering) .exp-card--featured .exp-card__body { padding: 14px 16px 16px; gap: 8px; }
  .exp-hub:not(.is-filtering) .exp-card--featured .exp-card__title { font-size: 20px; letter-spacing: -0.6px; }
  .exp-hub:not(.is-filtering) .exp-card--featured .exp-card__play { width: 56px; height: 56px; }
  .exp-hub:not(.is-filtering) .exp-card--featured .exp-card__excerpt { font-size: 14.5px; }
  .exp-more { margin-top: 20px; }
  .exp-more .exp-btn { width: 100%; }
  .exp-empty { padding: 36px 20px; border-radius: 20px; }

  .exp .exp-guide { gap: 12px; padding-bottom: 4px; }
  .exp-guide__item { flex: 0 0 78%; padding: 22px 20px 24px; border-radius: 20px; }
  .exp-guide__icon { width: 46px; height: 46px; margin-bottom: 16px; border-radius: 14px; }
  .exp-guide__item p { font-size: 15px; }

  .exp-closing { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .exp-closing__ba { padding: 24px 20px; border-radius: 22px; gap: 14px; }
  .exp-closing__cta { border-radius: 22px; }
  .exp-closing__cta-body { padding: 26px 20px; }
  .exp-closing__title { font-size: 24px; letter-spacing: -1px; }
  .exp-closing__text { font-size: 15px; }
  .exp-closing__arrow { width: 46px; height: 46px; }
  .exp-closing__cta .exp-btn { width: 100%; }

  /* ---- Watch page: one column, in reading order ---- */
  .exp-watch__top { padding: 82px 0 52px; }
  .exp-watch__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .exp-watch__main, .exp-watch__side, .exp-side { display: contents; }
  .exp-watch__grid > *, .exp-watch__main > *, .exp-side > *, .exp-story__block { min-width: 0; max-width: 100%; }
  .exp-watch__main > .exp-eyebrow { order: 1; margin-bottom: 12px; }
  .exp-watch__title { order: 1; font-size: 27px; line-height: 1.14; letter-spacing: -1px; }
  .exp .exp-watch__meta { order: 1; align-items: flex-start; margin: 10px 0 16px; font-size: 14px; line-height: 1.4; }
  .exp-watch__meta .clinicana-country-flag { margin-top: 2px; }
  .exp-watch__main > .exp-stage { order: 1; width: calc(100% + 32px); max-width: none; margin: 0 -16px; }
  .exp-stage .exp-player { border-radius: 0; box-shadow: none; }
  .exp-stage__glow { display: none; }
  /* every photo is already in the swipe row */
  .exp-photos .exp-photos__item.is-extra { display: flex; animation: none; }
  .exp-photos__toggle { display: none; }
  .exp-watch__main > [data-snap], .exp-story__block > [data-snap], .exp-moments > [data-snap] { max-width: none; }
  .exp-moments { order: 1; margin-top: 16px; padding: 0; background: none; border: 0; border-radius: 0; }
  .exp-moments__title { margin-bottom: 10px !important; font-size: 12px; }
  .exp .exp-moments__list { gap: 8px; }
  .exp-moments__list a { height: 42px; white-space: nowrap; background: #fff; }
  .exp-details { order: 2; margin-top: 24px; padding: 18px 16px 16px; border-radius: 22px; }
  .exp-details__title { font-size: 18px; margin-bottom: 12px !important; }
  .exp-details dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .exp-details__row { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 0; border-radius: 14px; background: var(--exp-mint-3); font-size: 15px; }
  .exp-details dt { font-size: 12px; }
  .exp-details dt .exp-icon { width: 14px; height: 14px; }
  .exp-details dd { line-height: 1.3; }
  .exp-reviewed { margin-top: 8px; }
  .exp-story { order: 3; gap: 36px; margin-top: 40px; }
  .exp-story__block > p, .exp-story__block > .exp-summary p { font-size: 16px; line-height: 1.65; }
  .exp-quote { margin-top: 18px; padding: 52px 20px 20px; border-radius: 20px; }
  .exp-quote > .exp-icon { left: 18px; top: 16px; width: 30px; height: 30px; }
  .exp .exp-quote blockquote p { font-size: 19px; letter-spacing: -0.6px; }
  .exp .exp-photos { gap: 10px; }
  .exp-photos__item { flex: 0 0 58%; }
  .exp-photos--1 .exp-photos__item { flex-basis: 100%; }
  .exp-photos__img { border-radius: 16px; }
  .exp-side-cta { order: 4; margin-top: 36px; border-radius: 22px; }
  .exp-side-cta__body { padding: 24px 20px; }
  .exp-side-cta__title { font-size: 22px; }
  .exp-readmore { order: 5; margin-top: 14px; padding: 18px 18px 6px; border-radius: 22px; }
  .exp-readmore a { min-height: 50px; padding: 12px 0; font-size: 15.5px; }

  .exp-grid-head { flex-wrap: wrap; gap: 6px 14px; margin-bottom: 18px; }
  .exp .exp-grid--swipe { gap: 12px; padding-bottom: 6px; }
  .exp-grid--swipe > .exp-card { flex: 0 0 80%; }
  .exp-card--profile .exp-card__link { padding: 16px; gap: 14px; }
  .exp-profile__img { width: 68px; height: 68px; }
  .exp-consent__title { font-size: 20px; }
  .exp-consent__text { font-size: 13.5px; line-height: 1.4; }
  .exp-consent__play { display: none; }
  .exp-player.cmplz-blocked-content-container > .exp-consent { padding: 14px; gap: 6px; }
  .exp .exp-consent .exp-btn { height: 46px; padding: 0 20px; font-size: 15px; }
  .exp-consent__actions { margin-top: 8px; gap: 8px 18px; }
}

@media (max-width: 380px) {
  .exp-hero__collage { zoom: .63; }
  .exp-hero__title { font-size: 28px; }
  .exp-watch__title { font-size: 25px; }
}


/* ---- Phone filter sheet (lives on <body>, so it carries its own values) ------ */
html.exp-sheet-open { overflow: hidden; }
.exp-sheet { position: fixed; inset: 0; z-index: 2147483000; font-family: inherit; color: #1a1c1e; letter-spacing: -0.2px; -webkit-tap-highlight-color: transparent; }
.exp-sheet[hidden] { display: none; }
.exp-sheet *, .exp-sheet *::before { box-sizing: border-box; }
.exp-sheet button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
.exp-sheet__backdrop { position: absolute; inset: 0; background: rgba(13, 24, 44, 0.5); opacity: 0; transition: opacity .3s ease; }
.exp-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
  max-height: min(86vh, 86dvh); background: #fff; border-radius: 26px 26px 0 0; outline: 0;
  box-shadow: 0 -20px 60px rgba(13, 24, 44, 0.25);
  transform: translateY(105%); transition: transform .34s cubic-bezier(.22, .9, .25, 1);
}
.exp-sheet.is-open .exp-sheet__backdrop { opacity: 1; }
.exp-sheet.is-open .exp-sheet__panel { transform: none; }
.exp-sheet__top { flex: none; padding: 8px 8px 0; touch-action: none; }
.exp-sheet__grab { display: block; width: 40px; height: 5px; margin: 0 auto 4px; border-radius: 90px; background: #d3dde1; }
.exp-sheet__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 52px; padding: 0 8px; border-bottom: 1px solid #e8f0f1; }
.exp-sheet__bar strong { font-size: 17px; font-weight: 700; letter-spacing: -0.4px; }
.exp-sheet .exp-sheet__clear { justify-self: start; height: 44px; padding: 0 8px; font-size: 15px; font-weight: 600; color: #2380b8; }
.exp-sheet__clear[hidden] { visibility: hidden; display: block; }
.exp-sheet .exp-sheet__x { justify-self: end; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #f1f5f6; }
.exp-sheet__x svg { width: 16px; height: 16px; }
.exp-sheet__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 16px 18px; }
.exp-sheet .exp-sheet__group { margin: 0; padding: 18px 0 20px; }
.exp-sheet__group + .exp-sheet__group { border-top: 1px solid #e8f0f1; }
.exp-sheet .exp-sheet__group h3 { margin: 0 0 12px; padding: 0; line-height: 1.3; font-size: 16px; font-weight: 700; letter-spacing: -0.3px; color: #1a1c1e; }
.exp-sheet__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.exp-sheet .exp-opt {
  display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 16px; border-radius: 15px;
  background: #fff; border: 1.5px solid #d9e7e9; font-size: 15px; font-weight: 600; letter-spacing: -0.3px; color: #1a1c1e;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease;
}
.exp-opt small { font-size: 13px; font-weight: 600; color: #8d99a4; }
.exp-opt svg { width: 16px; height: 16px; margin-left: -3px; }
.exp-sheet .exp-opt:active { transform: scale(.95); }
.exp-sheet .exp-opt.is-on { background: #3d83ef; border-color: #3d83ef; color: #fff; }
.exp-opt.is-on small { color: rgba(255, 255, 255, 0.78); }
.exp-sheet .exp-opt:disabled { opacity: .38; }
.exp-sheet__foot { flex: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e8f0f1; background: #fff; }
.exp-sheet .exp-sheet__apply {
  display: block; width: 100%; height: 54px; border-radius: 16px; background: #1a1c1e; color: #fff;
  font-size: 17px; font-weight: 600; letter-spacing: -0.4px; transition: transform .12s ease, opacity .2s ease;
}
.exp-sheet .exp-sheet__apply:active { transform: scale(.98); }
.exp-sheet .exp-sheet__apply:disabled { opacity: .4; }
@media (prefers-reduced-motion: reduce) { .exp-sheet__panel, .exp-sheet__backdrop { transition: none; } }


/* ---- Phone watch page: calmer top -------------------------------------------- */
@media (max-width: 767px) {
  .exp-watch__top { padding-top: 76px; background: linear-gradient(180deg, var(--exp-mint-3) 0, #fbfbfb 420px); }
  .exp-crumbs--dark, .exp-watch__main > .exp-eyebrow, .exp-watch__meta-tech, .exp-details { display: none !important; }
  .exp .exp-back { display: inline-flex; align-items: center; gap: 6px; height: 36px; margin: 0 0 6px -4px; padding: 0 4px; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; color: var(--exp-text); }
  .exp-back .exp-icon { width: 16px; height: 16px; transform: rotate(180deg); }
  .exp-watch__title { font-size: 24px; line-height: 1.2; letter-spacing: -0.8px; }
  .exp .exp-watch__meta { margin: 8px 0 18px; font-size: 14px; color: var(--exp-muted); }
  .exp-watch__meta .clinicana-country-flag { width: 18px; height: 13px; margin-top: 3px; }

  .exp-moments { margin-top: 14px; }
  .exp-moments__title { display: none; }
  .exp-moments__list a { height: 38px; padding: 0 12px 0 5px; font-size: 14px; border-radius: 11px; }
  .exp-moments__list b { height: 28px; font-size: 12px; }

  .exp .exp-specs { display: block; order: 2; margin-top: 18px; background: #fff; border: 1px solid var(--exp-line-soft); border-radius: 22px; box-shadow: 0 10px 30px rgba(26, 28, 30, 0.06); overflow: hidden; }
  .exp-specs__row { display: grid; margin: 0; padding: 18px 6px 16px; }
  .exp-specs__row--3 { grid-template-columns: 1fr 1fr 1.35fr; }
  .exp-specs__row--2 { grid-template-columns: 1fr 1fr; }
  .exp-specs__row--1 { grid-template-columns: 1fr; }
  .exp-specs__row > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 0 8px; text-align: center; }
  .exp-specs__row > div + div { border-left: 1px solid var(--exp-line-soft); }
  .exp-specs dd { margin: 0; min-height: 30px; display: flex; align-items: center; font-size: 25px; font-weight: 700; line-height: 1.1; letter-spacing: -1px; color: var(--exp-ink); font-variant-numeric: tabular-nums; }
  .exp-specs dd small { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--exp-muted); margin-left: 1px; }
  .exp-specs .exp-specs__text { font-size: 15px; line-height: 1.2; letter-spacing: -0.3px; }
  .exp-specs dt { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--exp-muted); }
  .exp .exp-specs__areas { margin: -4px 16px 14px; text-align: center; font-size: 13.5px; color: var(--exp-text); }
  .exp-specs__doc { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--exp-mint-3); border-top: 1px solid var(--exp-line-soft); }
  .exp-specs__doc img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #fff; flex: none; }
  .exp-specs__doc span { font-size: 12.5px; line-height: 1.3; color: var(--exp-muted); }
  .exp-specs__doc b { font-weight: 600; color: var(--exp-ink); }

  .exp-story { gap: 32px; margin-top: 36px; }
  .exp-story .exp-h3 { font-size: 21px; }
  .exp-story__block > p, .exp-story__block > .exp-summary p { font-size: 15.5px; line-height: 1.65; color: var(--exp-text); }
}

/* Site contact form after the hub and watch pages: the page's last section already carries bottom space */
@media (min-width: 768px) {
  .exp > section:last-of-type { margin-bottom: 0; }
  .exp + .contact-us { padding-top: 56px; }
}