/* =========================
   MYLO CASE STUDY
   ========================= */
.mylo-page {
  --mylo: linear-gradient(90deg, #00D4FF 34.69%, #1F81A8 45.39%, #16B8A0 62.13%);
  --case-accent: var(--mylo);
  --mylo-accent: var(--mylo);
}

.mylo-page .site-header { border-bottom: 1px solid rgba(255,255,255,.12); }
.mylo-page .case-shell { padding-top: clamp(28px, 4vw, 56px); }
.mylo-page .case-layout { gap: clamp(24px, 3vw, 52px); }
.case-content { min-width:0; }
.case-section { scroll-margin-top: 124px; }
.case-section + .case-section { margin-top: clamp(72px, 8vw, 110px); }

.case-side-nav { top: 138px; }
.case-side-nav nav { display:flex; flex-direction:column; }
.case-side-nav-list { display:grid; gap:16px; }
.case-side-nav-gap { height: 8px; }
.case-nav-jump span { display:block; }
.case-side-nav a { color: rgba(255,255,255,.74); }
.case-side-nav a:hover, .case-side-nav a.is-active {
  background: var(--mylo);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent;
}
.case-side-nav .case-nav-jump:hover, .case-side-nav .case-nav-jump.is-active {
  color:#FBCB10; -webkit-text-fill-color:#FBCB10; background:none;
}
.case-nav-label {
  margin-top: 10px; text-align:right; font-size:18px; font-weight:300;
  background: var(--mylo); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent;
}

.case-top-rule { height:1px; background: rgba(255,255,255,.85); margin-bottom: 26px; }

.case-section-title, .section-heading h2 {
  margin:0; font-size: clamp(2.35rem, 3.8vw, 3.125rem);
  font-weight:200; line-height:1.1; letter-spacing:-1px;
}
.title-base { color:#fff; }
.title-accent, .grad-mylo {
  background: var(--mylo); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent;
}
.section-subtitle { max-width: 980px; margin-inline:auto; }
.mylo-page .section-support { max-width: 840px; margin-inline: auto; }

/* Mylo shimmer — all .title-accent */
.mylo-page .title-accent {
  background-image:
    var(--mylo),
    linear-gradient(115deg,
      transparent          0%,
      rgba(180,240,230,0)  28%,
      rgba(220,255,250,1.0) 50%,
      rgba(180,240,230,0)  72%,
      transparent         100%);
  background-size: 100% 100%, 240% 100%;
  background-position: 0 0, 130% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: myloTitleShimmer 5.8s ease-in-out infinite;
}

@keyframes myloTitleShimmer {
  0%, 74%, 100% { background-position: 0 0, 130% 0; }
  88%           { background-position: 0 0, -35% 0; }
}

/* ══ MYLO HERO — pulsing glow + aura + light sweep + float ══ */
@keyframes myloHeroGlow {
  0%,100% {
    box-shadow:
      0 0  40px rgba(7,156,133,.12),
      0 0  80px rgba(21,105,138,.05),
      0 18px 56px rgba(0,0,0,.28);
  }
  50% {
    box-shadow:
      0 0  72px rgba(7,156,133,.28),
      0 0 140px rgba(21,105,138,.12),
      0 18px 56px rgba(0,0,0,.28);
  }
}
@keyframes myloHeroSweep {
  0%   { transform: translateX(-180%) skewX(-18deg); opacity:0; }
  4%   { opacity:.46; }
  50%  { opacity:.30; }
  96%  { opacity:.46; }
  100% { transform: translateX(280%)  skewX(-18deg); opacity:0; }
}
@keyframes myloHeroFloat {
  0%,100% { transform: scale(1)     translateY(0);   }
  50%      { transform: scale(1.016) translateY(-5px); }
}
@keyframes myloAuraFloat {
  0%,100% { transform: translate(0,0) scale(1); opacity:.7; }
  50%      { transform: translate(6px,-10px) scale(1.08); opacity:.9; }
}

.mylo-hero-section { position: relative; }
.mylo-hero-media {
  position: relative;
  z-index: 1;
  min-height: clamp(320px, 40vw, 710px);
  overflow: hidden;
  border-radius: 30px 30px 0 0;
  transform-origin: center center;
  animation: myloHeroGlow 4.2s ease-in-out infinite;
}
.mylo-hero-media::before {
  content: "";
  position: absolute;
  inset: -12% auto auto -8%;
  width: 38%;
  height: 62%;
  background: radial-gradient(circle, rgba(7,156,133,.18), transparent 65%);
  filter: blur(26px);
  z-index: 1;
  pointer-events: none;
  animation: myloAuraFloat 8s ease-in-out infinite alternate;
}
.mylo-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 28%;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0)     0%,
    rgba(200,240,235,.16)  45%,
    rgba(220,248,245,.24)  50%,
    rgba(200,240,235,.16)  55%,
    rgba(255,255,255,0)   100%
  );
  transform: translateX(-180%) skewX(-18deg);
  animation: myloHeroSweep 9s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events: none;
}
.mylo-hero-media video {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 30px 30px 0 0;
}
.mylo-hero-media.is-visible { opacity: 1; }
.mylo-hero-panel {
  position:relative; z-index:2; margin-top: clamp(-84px, -7vw, -116px);
  min-height: clamp(540px, 41vw, 706px); border-radius:0 0 40px 40px;
  background: linear-gradient(187deg, #000 -17.24%, #0D0D0D 46.87%, #292929 94.81%);
  padding: clamp(44px, 5vw, 86px) clamp(24px, 4vw, 54px) clamp(34px, 4vw, 58px);
  box-shadow: var(--shadow-lg);
}
/* ── Award image badge ── */
.mylo-award-img {
  width: clamp(5.5rem, 13vw, 13rem);
  height: clamp(5.5rem, 13vw, 13rem);
  display: block;
  margin-bottom: 0;
  align-self: center;
  object-fit: contain;
  animation: awardFloat 4s ease-in-out 0.5s infinite;
}

@keyframes awardFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

.mylo-hero-grid {
  display:grid; grid-template-columns:minmax(300px,.48fr) minmax(0,1fr);
  gap: clamp(28px,4vw,72px); align-items:end;
}
.mylo-hero-left { align-self:end; padding-bottom: 24px; }
.case-hero-title, .case-hero-support { text-align:left; }
.case-hero-support { margin: 10px 0 0; font-size:18px; font-weight:300; }
.mylo-hero-right { display:grid; justify-items:end; text-align:right; }
.mylo-hero-right h1 {
  margin:0; font-size: clamp(4.7rem, 11vw, 12.5rem); font-weight:700;
  letter-spacing: clamp(-4px, -0.6vw, -12px); line-height:1.02;
}
.mylo-hero-right h2 { margin: 18px 0 0; font-size: clamp(1.8rem, 3.1vw, 2.5rem); font-weight:700; line-height:1.1; }
.mylo-hero-accent {
  margin: 18px 0 0; font-size: clamp(1.35rem, 2.3vw, 1.875rem); font-weight:400; line-height:1.1;
  background: var(--mylo); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent;
}
.mylo-hero-body { max-width: 892px; margin: 24px 0 0 auto; font-size:18px; font-weight:300; line-height:1.4; letter-spacing:.54px; }

/* Challenge */
.challenge-section .case-section-shell {
  border-radius: 48px; background: linear-gradient(181deg, #000 2.52%, #1F1F1F 99.54%);
  padding: clamp(36px,4vw,64px) clamp(18px,2.8vw,34px) clamp(26px,3vw,40px); box-shadow: var(--shadow-lg);
}
.challenge-heading { margin-bottom: clamp(34px, 4vw, 48px); }
.challenge-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:22px; }
.challenge-card {
  position:relative; min-height: 490px; padding: 28px 28px 32px; border-radius:48px;
  background: var(--card-bg); border: var(--border-soft); box-shadow: var(--shadow-md);
  overflow:hidden; isolation:isolate;
  transition: transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease;
}
.challenge-card::before, .mylo-diff-box::before, .quote-halo::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(260px 220px at var(--glow-x,50%) var(--glow-y,24%), rgba(21,105,138,.28), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 28%);
  opacity:0; transition: opacity .35s var(--ease); pointer-events:none; z-index:0;
}
.challenge-card:hover, .mylo-diff-box:hover, .quote-halo:hover {
  transform: translateY(-8px) scale(1.01); border-color: rgba(21,105,138,.38);
  box-shadow: 0 24px 54px rgba(0,0,0,.36), 0 0 32px rgba(7,156,133,.10);
}
.challenge-card:hover::before, .mylo-diff-box:hover::before, .quote-halo:hover::before { opacity:1; }
.challenge-card > * { position:relative; z-index:1; }
.challenge-card-icon { min-height: 110px; display:flex; align-items:flex-end; justify-content:center; }
.challenge-card-icon img {
  width:97px; height:95px; object-fit:contain;
  filter: brightness(0) saturate(100%) invert(31%) sepia(51%) saturate(641%) hue-rotate(149deg) brightness(93%) contrast(91%);
}
.challenge-card h3 { margin: 34px 0 0; font-size:24px; font-weight:600; line-height:1.35; }
.challenge-card p { margin: 18px 0 0; font-size:18px; font-weight:300; line-height:1.4; letter-spacing:.54px; }

/* Quote */
.quote-section, .quote { display:flex; justify-content:center; }
.case-quote, .quote .center { margin:0; display:flex; justify-content:center; width:100%; }
.case-quote img { width:min(1160px,100%); height:auto; object-fit:contain; }
.quote-img { width:min(792px, 100%); height:auto; display:block; }
.quote-halo {
  position: relative; margin-inline:auto; width:min(792px,100%);
  border-radius: 32px; padding: 18px 18px 10px;
  background: var(--card-bg); border: var(--border-soft); box-shadow: var(--shadow-md);
  overflow:hidden; isolation:isolate;
}
.quote-halo > * { position:relative; z-index:1; }

/* Shared cards */
.why-matters-box, .stats-box, .mylo-diff-box, .experience-box, .testing-left, .testing-right {
  border-radius:48px; background: var(--card-bg); box-shadow: var(--shadow-lg);
}

/* Why it matters */
.why-matters { max-width: 1494px; margin-inline:auto; }
.why-matters .container { width:100%; max-width:none; }
.why-matters-box { margin-top:40px; padding: 38px 34px; overflow:hidden; }
.why-matters-track {
  display:flex; gap:20px; overflow-x:auto; overflow-y:hidden; padding: 10px 18px;
  align-items:center; justify-content:flex-start; cursor:grab; scroll-behavior:smooth; scrollbar-width:none;
}
.why-matters-track::-webkit-scrollbar { display:none; }
.why-matters-track.is-dragging { cursor:grabbing; }
.why-matters-track img {
  flex: 0 0 180px; width:180px; height:360px; object-fit:contain; object-position:center;
  border-radius:20px; transition: transform .35s var(--ease), filter .35s var(--ease);
}
.why-matters-track img:hover { transform: scale(1.08); filter: drop-shadow(0 18px 30px rgba(0,0,0,.26)); }

/* Art therapy */
.art-therapy, .mylo-different-section { max-width: 1494px; margin-inline:auto; }
.art-therapy .stats-box { margin-top:40px; padding: 36px 28px 28px; display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; align-items:start; }
.stat-card { text-align:center; display:grid; justify-items:center; align-content:start; }
.progress-ring { width: 190px; height: 190px; transform: rotate(-90deg); }
.progress-ring__bg { fill:none; stroke: rgba(255,255,255,.08); stroke-width:16; }
.progress-ring__value { fill:none; stroke-width:16; stroke-linecap:round; stroke-dasharray:615.75; stroke-dashoffset:615.75; transition: stroke-dashoffset 1.4s ease; }
.stat-number {
  margin-top: -118px; margin-bottom: 78px; font-family: 'Figtree', system-ui, sans-serif;
  font-size: 44px; font-weight:700; letter-spacing:-1.2px; line-height:1;
}
.stat-c1 { color:#69AAF1; } .stat-c2 { color:#30C79F; } .stat-c3 { color:#FF4FBB; } .stat-c4 { color:#9BA85B; } .stat-c5 { color:#F2802F; }
.stat-card p { max-width: 190px; margin:0; font-size:16px; font-weight:300; line-height:1.35; color:#fff; }

/* Mylo different */
.mylo-diff-box {
  position:relative; max-width:1494px; margin:40px auto 0; padding: 34px; overflow:hidden;
  border: var(--border-soft); transition: transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease;
}
.mylo-diff-image {
  width:100%; border-radius:20px; opacity:0; transform: translateY(12px) scale(.985);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.mylo-diff-box.is-visible .mylo-diff-image, .mylo-diff-box .mylo-diff-image.is-visible { opacity:1; transform: translateY(0) scale(1); }

/* Experience */
.experience { max-width:1494px; margin-inline:auto; }
.experience .container { width:100%; max-width:none; }
.timeline {
  margin: 34px auto 0; display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap: 10px; font-size: 18px; text-align:center; line-height:1.15; letter-spacing:-0.3px;
}
.timeline-step {
  opacity: .72; transition: opacity .35s ease, transform .35s ease, color .35s ease;
}
.timeline-step:hover {
  opacity:1; transform: translateY(-1px);
  background: var(--mylo); -webkit-background-clip:text; -webkit-text-fill-color: transparent;
}
.timeline-arrow {
  opacity:.38; display:inline-flex; align-items:center; justify-content:center; min-width:18px;
  animation: timelineArrowPulse 1.6s ease-in-out infinite;
}
.timeline-arrow:nth-child(4n) { animation-delay: .2s; }
.timeline-arrow:nth-child(6n) { animation-delay: .4s; }

@keyframes timelineArrowPulse {
  0%, 100% { opacity:.2; transform: translateX(0); }
  50% { opacity:.72; transform: translateX(4px); }
}

.experience-box { margin-top: 48px; padding: 28px 22px; overflow:hidden; }
.experience-carousel {
  display:flex; align-items:center; gap: 34px; width:max-content;
  animation: autoScroll 26s linear infinite;
}
.experience-carousel img {
  width: 320px; max-width:none; transform: rotate(-6deg);
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.18));
  transition: transform .45s ease, filter .45s ease;
}
.experience-carousel img:hover {
  transform: rotate(0deg) scale(3);
  filter: drop-shadow(0 34px 42px rgba(0,0,0,.34));
  z-index: 3;
}
@keyframes autoScroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 17px)); }
}

/* Testing */
.testing { max-width:1494px; margin-inline:auto; }
.testing .container { width:100%; max-width:none; }
.testing-grid {
  margin-top: 48px; display:grid; grid-template-columns: 483px minmax(0, 1fr);
  gap: 28px; align-items:stretch;
}
.testing-left {
  padding: 38px 36px; min-height: 828px;
}
.testing-left h3 {
  margin: 0 0 18px; font-size: 24px; font-weight:600; line-height:1.3; color:#fff;
}
.testing-left h3 + ul { margin-top:0; }
.testing-left ul {
  margin: 0 0 34px 0; padding-left: 20px; color:#fff;
}
.testing-left li {
  margin: 0 0 16px; color:#fff; font-size:18px; font-weight:300; line-height:1.4; letter-spacing:.54px;
}
.testing-right {
  min-height: 810px; padding: 22px; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.testing-right img {
  width: min(921px, 100%); max-height: 699px; object-fit:contain;
  transform: translateY(24px); opacity: 1; transition: transform .8s ease, opacity .8s ease;
}
.testing-right img.is-visible { transform: translateY(0); opacity: 1; }

/* responsive */
@media (max-width:1240px) {
  .mylo-hero-right h1 { font-size: clamp(4.2rem,10vw,9rem); }
  .challenge-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .art-therapy .stats-box { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 24px; }
  .testing-grid { grid-template-columns: 1fr; }
  .testing-left, .testing-right { min-height: auto; }
}
@media (max-width:980px) {
  .mylo-hero-panel { margin-top:-68px; }
  .mylo-hero-grid { grid-template-columns:1fr; align-items:start; }
  .mylo-hero-left, .mylo-hero-right { justify-items:start; text-align:left; }
  .mylo-hero-body { margin-left:0; }
  .art-therapy .stats-box { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mylo-award-img { width: clamp(4.5rem, 11vw, 10rem); height: clamp(4.5rem, 11vw, 10rem); align-self: flex-start; }
}
@media (max-width:820px) {
  .mylo-page .case-layout { grid-template-columns:1fr; }
  .case-side-nav { display:none; }
  .mylo-page .case-shell { padding-top:20px; }
  .mylo-hero-media { min-height:260px; border-radius:24px 24px 0 0; }
  .mylo-hero-panel { margin-top:-34px; border-radius:0 0 28px 28px; padding-inline:22px; }
  .mylo-hero-right h1 { font-size: clamp(3.6rem,14vw,6rem); letter-spacing:-4px; }
  .mylo-hero-right h2 { font-size: clamp(1.45rem,5vw,2rem); }
  .mylo-hero-accent { font-size: clamp(1.15rem,4.6vw,1.45rem); }
  .challenge-grid, .art-therapy .stats-box { grid-template-columns:1fr; }
  .challenge-card { min-height:auto; }
  .challenge-card-icon { min-height: 90px; }
  .why-matters-box, .art-therapy .stats-box, .mylo-diff-box, .experience-box, .testing-left, .testing-right, .challenge-section .case-section-shell, .quote-halo { border-radius: 28px; }
  .timeline { font-size:16px; gap:8px; }
  .experience-carousel img { width: 250px; }
}
@media (max-width:620px) {
  .case-section + .case-section { margin-top:72px; }
  .case-quote img { display:none; }
  .why-matters-box { padding: 24px 16px; }
  .why-matters-track { gap:14px; justify-content:flex-start; padding-inline: 6px; }
  .why-matters-track img { flex-basis: 150px; width:150px; height:300px; }
  .experience-box { padding: 20px 12px; }
  .experience-carousel img { width: 210px; }
  .testing-left { padding: 28px 22px; }
  .testing-left li { font-size:16px; }
}
@media (max-width:520px) {
  .case-section-title, .section-heading h2 { font-size:2.1rem; }
  .mylo-hero-body, .challenge-card p, .stat-card p { font-size:16px; }
  .mylo-hero-body { margin-top:20px; }
  .challenge-card { padding:24px 18px 22px; }
  .progress-ring { width:170px; height:170px; }
  .stat-number { margin-top: -106px; margin-bottom: 64px; font-size: 40px; }
  .quote-halo { padding: 14px 14px 8px; }
}


/* =========================
   FINAL SECTIONS ADDITIONS
   ========================= */
.why-matters-track {
  width: max-content;
  animation: autoScrollWhy 30s linear infinite;
}
.why-matters-box:hover .why-matters-track,
.beta-carousel-shell:hover .beta-carousel {
  animation-play-state: paused;
}
.why-matters-track img {
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.why-matters-track img:hover {
  transform: translateY(-8px) scale(1.22);
  filter: drop-shadow(0 24px 38px rgba(0,0,0,.32));
  z-index: 2;
}
@keyframes autoScrollWhy {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 10px)); }
}

.beta-results,
.full-system,
.whats-next,
.quote-final {
  max-width: 1494px;
  margin-inline: auto;
}
.beta-results .section-heading,
.full-system .section-heading,
.whats-next .section-heading {
  margin-bottom: 42px;
}
.beta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.beta-card {
  min-height: 602px;
  padding: 38px 34px;
  border-radius: 48px;
  background: var(--card-bg);
  border: var(--border-soft);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.beta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(300px 220px at 20% 20%, rgba(21,105,138,.18), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 28%);
  opacity: 0;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.beta-card:hover::before,
.beta-card.is-visible::before { opacity: 1; }
.beta-card:hover { transform: translateY(-8px); }
.beta-card h3,
.full-card h3,
.testing-left h3 {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  position: relative;
  z-index: 1;
  background: var(--mylo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.beta-card > p,
.beta-list li {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: .54px;
}
.beta-card > p { margin: 0; }
.beta-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 14px;
}
.beta-list li { margin: 0; }
.beta-carousel-shell {
  margin-top: 28px;
  min-height: 504px;
  border-radius: 48px;
  background: var(--card-bg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.beta-carousel {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  padding: 32px 28px;
  animation: autoScrollBeta 16s linear infinite;
}
.beta-carousel img {
  width: 179.308px;
  height: 357.598px;
  object-fit: contain;
  border-radius: 18px;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.18));
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.beta-carousel img:hover {
  transform: translateY(-10px) scale(1.12);
  filter: drop-shadow(0 28px 36px rgba(0,0,0,.3));
}
@keyframes autoScrollBeta {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 10px)); }
}

.full-system-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.full-card {
  min-height: 778px;
  padding: 34px 28px 30px;
  border-radius: 48px;
  background: var(--card-bg);
  border: var(--border-soft);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
.full-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  min-height: 400px;
}
.full-card-media video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background: #080808;
  object-fit: cover;
  box-shadow: 0 18px 30px rgba(0,0,0,.24);
}
.full-card-media--desktop {
  width: min(382px, 100%);
  height: 307px;
  margin-inline: auto;
}
.full-card-media--phone {
  width: min(220px, 100%);
  height: 400px;
  margin-inline: auto;
  border-radius: 36px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 3px rgba(255,255,255,.08), 0 22px 40px rgba(0,0,0,.40);
}

/* Phone videos contain full frame — never crop the phone bezel */
.full-card-media--phone video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  border-radius: 0;
  box-shadow: none;
}
.full-card-body {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: .54px;
}
.inline-link,
.full-inline-link {
  display: inline;
  background: var(--mylo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}
.full-inline-link { margin-top: 12px; }
.full-cta {
  position: relative;
  display: inline-flex;
  width: 317px;
  max-width: 100%;
  padding: 12px 40px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  align-self: center;
  background: var(--mylo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
  font-weight: 500;
  line-height: 2.5;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #00D4FF 34.69%, #1F81A8 45.39%, #16B8A0 62.13%) 1;
}
.full-cta::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #00D4FF 34.69%, #1F81A8 45.39%, #16B8A0 62.13%);
}

.next-grid {
  display: grid;
  grid-template-columns: 483px minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}
.next-left,
.next-right {
  border-radius: 48px;
  background: var(--card-bg);
  box-shadow: var(--shadow-lg);
}
.next-left {
  min-height: 468px;
  padding: 42px 34px;
  display: flex;
  align-items: center;
}
.next-list {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 16px;
}
.next-list li {
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: .54px;
}
.next-right {
  min-height: 469px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.next-right img {
  width: min(989px, 100%);
  height: auto;
  object-fit: contain;
}

@media (max-width: 1240px) {
  .beta-grid,
  .full-system-grid,
  .next-grid {
    grid-template-columns: 1fr;
  }
  .beta-card,
  .full-card,
  .next-left,
  .next-right {
    min-height: auto;
  }
  .beta-carousel-shell { min-height: 430px; }
}
@media (max-width: 820px) {
  .beta-card,
  .full-card,
  .next-left {
    border-radius: 28px;
    padding: 28px 22px;
  }
  .beta-card > p,
  .beta-list li,
  .full-card-body,
  .next-list li { font-size: 16px; }
  .beta-carousel-shell,
  .next-right { border-radius: 28px; }
  .beta-carousel { padding: 24px 18px; gap: 16px; }
  .beta-carousel img { width: 150px; height: 300px; }
  .full-card-media--desktop { height: 240px; }
  .full-card-media--phone { width: 180px; height: 330px; }
}


/* =========================
   FINAL POLISH PASS
   ========================= */
.grad-mylo {
  background-image: var(--mylo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-support,
.case-hero-support,
.mylo-hero-body,
.challenge-card p,
.stat-card p,
.timeline-step,
.testing-left li,
.beta-card > p,
.beta-list li,
.full-card-body,
.next-list li {
  font-weight: 200;
}

.challenge-card h3,
.testing-left h3,
.beta-card h3,
.full-card h3 {
  margin-bottom: 22px;
}

.challenge-card p,
.testing-left ul,
.beta-card > p,
.beta-list,
.full-card-body {
  margin-top: 0;
}



/* Better hierarchy and spacing */
.testing-left h3 + ul,
.beta-card h3 + p,
.beta-card h3 + ul,
.full-card h3 + p {
  margin-top: 0;
}
.full-card-body {
  font-size: 17px;
  line-height: 1.5;
}
.full-card .inline-link,
.full-card .full-inline-link {
  font-weight: 300;
}

/* CTA polish */
.full-cta {
  transition: transform .28s var(--ease), color .28s ease, filter .28s ease, border-bottom-color .28s ease;
}
.full-cta:hover {
  transform: translateY(-3px);
  background: none;
  -webkit-text-fill-color: #FBCB10;
  color: #FBCB10;
  border-image: none;
  border-bottom-color: #FBCB10;
  filter: drop-shadow(0 0 12px rgba(251,203,16,.18));
}
.full-cta:hover::before {
  background: #FBCB10;
  box-shadow: 0 0 12px rgba(251,203,16,.34);
}

/* Three-card scroll entry */
.beta-grid > .reveal,
.full-system-grid > .reveal {
  transform: translate3d(-38px, 18px, 0);
}
.beta-grid > .reveal.is-visible,
.full-system-grid > .reveal.is-visible {
  transform: translate3d(0,0,0);
}
.beta-grid > .reveal:nth-child(2),
.full-system-grid > .reveal:nth-child(2) {
  transition-delay: .10s;
}
.beta-grid > .reveal:nth-child(3),
.full-system-grid > .reveal:nth-child(3) {
  transition-delay: .18s;
}

/* Experience refined */
.experience {
  max-width: 1328px;
}
.experience-box {
  max-width: 1328px;
  min-height: 500px;
  margin: 48px auto 0;
  padding: 46px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.experience-carousel {
  min-height: 360px;
  align-items: center;
  gap: 42px;
  padding: 34px 64px;
}
.experience-carousel img {
  width: 300px;
  transform-origin: center center;
}
.experience-carousel img:hover {
  transform: rotate(0deg) scale(2.15);
  filter: drop-shadow(0 36px 52px rgba(0,0,0,.34));
  z-index: 3;
}

/* Testing refined */
.testing {
  max-width: 1328px;
}
.testing-grid {
  max-width: 1328px;
  margin: 48px auto 0;
  grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.4fr);
  gap: 28px;
}
.testing-left,
.testing-right {
  min-height: 700px;
}
.testing-left {
  padding: 34px 34px 34px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.testing-left li {
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0.24px;
  margin-bottom: 14px;
}
.testing-right {
  padding: 26px;
}
.testing-right img {
  width: min(860px, 100%);
  max-height: 620px;
}

/* Final quote halo visible but no solid fill */
.quote-wrap {
  max-width: 792px;
  margin-inline: auto;
}
.quote-halo {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 18px 16px 12px;
}
.quote-halo::before {
  opacity: 1;
  background:
    radial-gradient(480px 220px at 18% 24%, rgba(0, 229, 229, 0.18), transparent 58%),
    radial-gradient(420px 220px at 82% 30%, rgba(233, 97, 255, 0.18), transparent 58%),
    radial-gradient(420px 220px at 50% 82%, rgba(21, 105, 138, 0.12), transparent 60%);
}
.quote-halo:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}
.quote-halo:hover::before {
  opacity: 1;
}

@media (max-width: 1240px) {
  .experience,
  .testing {
    max-width: 100%;
  }
  .experience-box,
  .testing-grid {
    max-width: 100%;
  }
  .experience-box {
    min-height: 440px;
    padding: 38px 26px;
  }
  .experience-carousel {
    min-height: 320px;
    padding: 28px 48px;
    gap: 32px;
  }
  .experience-carousel img {
    width: 260px;
  }
  .experience-carousel img:hover {
    transform: rotate(0deg) scale(1.9);
  }
  .testing-left,
  .testing-right {
    min-height: 620px;
  }
}
@media (max-width: 980px) {
  .testing-grid {
    grid-template-columns: 1fr;
  }
  .testing-left,
  .testing-right {
    min-height: auto;
  }
  .testing-left {
    padding: 30px 28px;
  }
  .testing-right {
    padding: 24px;
  }
  .experience-box {
    min-height: 390px;
  }
  .experience-carousel {
    min-height: 280px;
    padding: 18px 30px;
    gap: 24px;
  }
  .experience-carousel img {
    width: 220px;
  }
  .experience-carousel img:hover {
    transform: rotate(0deg) scale(1.55);
  }
}
@media (max-width: 620px) {
  .experience-box {
    min-height: 320px;
    padding: 20px 10px;
  }
  .experience-carousel {
    min-height: 230px;
    padding: 12px 20px;
    gap: 16px;
  }
  .experience-carousel img {
    width: 180px;
  }
  .experience-carousel img:hover {
    transform: rotate(0deg) scale(1.28);
  }
  .testing-left {
    padding: 24px 20px;
  }
  .quote-halo {
    padding: 10px 8px 6px;
  }
}


/* =========================
   V18 FINAL POLISH PASS
   ========================= */
.mylo-page .case-layout {
  position: relative;
  align-items: start;
}

.mylo-page .case-layout::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(var(--case-nav-width) + (var(--case-gap) / 2));
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.62) 18%, rgba(255,255,255,0.18) 100%);
  pointer-events: none;
}

.case-top-rule { display: none; }

.mylo-page p,
.mylo-page li,
.mylo-page .mylo-hero-body,
.mylo-page .challenge-card p,
.mylo-page .stat-card p,
.mylo-page .full-card-body,
.mylo-page .beta-card > p,
.mylo-page .beta-list li,
.mylo-page .next-list li,
.mylo-page .testing-left li,
.mylo-page .case-hero-support {
  font-weight: 200;
}

.mylo-page .mylo-hero-accent {
  background-image: var(--mylo);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}



.challenge-card h3,
.beta-card h3,
.full-card h3,
.testing-left h3,
.next-left h3 {
  margin-bottom: 22px;
}

.beta-card,
.full-card {
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s ease, opacity .8s var(--ease);
}
.beta-grid .reveal,
.full-system-grid .reveal {
  transform: translate3d(-44px, 22px, 0);
}
.beta-grid .reveal:nth-child(even),
.full-system-grid .reveal:nth-child(even) {
  transform: translate3d(44px, 22px, 0);
}
.beta-grid .reveal.is-visible,
.full-system-grid .reveal.is-visible {
  transform: translate3d(0,0,0);
}

.experience {
  max-width: 1328px;
}
.experience-box {
  max-width: 1328px;
  min-height: 500px;
  margin: 48px auto 0;
  padding: 46px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.experience-carousel {
  min-height: 360px;
  align-items: center;
  gap: 42px;
  padding: 34px 64px;
}
.experience-carousel img {
  width: 300px;
  transform-origin: center center;
}
.experience-carousel img:hover {
  transform: rotate(0deg) scale(2.05);
  filter: drop-shadow(0 36px 52px rgba(0,0,0,.34));
  z-index: 3;
}

.testing {
  max-width: 1328px;
}
.testing-grid {
  max-width: 1328px;
  margin: 48px auto 0;
  grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.4fr);
  gap: 28px;
}
.testing-left,
.testing-right {
  min-height: 700px;
}
.testing-left {
  padding: 34px 34px 34px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.testing-left ul {
  margin-bottom: 32px;
}
.testing-left li {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  margin-bottom: 14px;
}
.testing-right {
  padding: 26px;
}
.testing-right img {
  width: min(860px, 100%);
  max-height: 620px;
}

.full-card-media video {
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), filter .45s var(--ease);
}
.full-card:hover .full-card-media video {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px rgba(0,0,0,.28);
  filter: brightness(1.03);
}
.full-card:first-child .full-card-body {
  font-size: 18px;
}
.full-inline-link,
.inline-link {
  font-weight: 300;
}
.full-cta {
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), color .32s ease, border-image-source .32s ease, filter .32s ease;
}
.full-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(251,203,16,0.12);
  filter: brightness(1.1);
  background: linear-gradient(90deg, #ecdd4d 0%, #fe964d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  border-image: linear-gradient(90deg, #ecdd4d 0%, #fe964d 100%) 1;
}
.full-cta:hover::before {
  background: linear-gradient(90deg, #ecdd4d 0%, #fe964d 100%);
}

.quote-wrap {
  max-width: 792px;
  margin-inline: auto;
}
.quote-halo {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 18px 16px 12px;
}
.quote-halo::before {
  opacity: 1;
  background:
    radial-gradient(480px 220px at 18% 24%, rgba(0,229,229,0.18), transparent 58%),
    radial-gradient(420px 220px at 82% 30%, rgba(233,97,255,0.18), transparent 58%),
    radial-gradient(420px 220px at 50% 82%, rgba(21,105,138,0.12), transparent 60%);
}
.quote-halo:hover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

@media (max-width: 1240px) {
  .mylo-page .case-layout::after { display: none; }
  .experience,
  .testing {
    max-width: 100%;
  }
  .experience-box,
  .testing-grid {
    max-width: 100%;
  }
  .experience-box {
    min-height: 440px;
    padding: 38px 26px;
  }
  .experience-carousel {
    min-height: 320px;
    padding: 28px 48px;
    gap: 32px;
  }
  .experience-carousel img {
    width: 260px;
  }
  .experience-carousel img:hover {
    transform: rotate(0deg) scale(1.78);
  }
  .testing-left,
  .testing-right {
    min-height: 620px;
  }
}

@media (max-width: 980px) {
  .testing-grid {
    grid-template-columns: 1fr;
  }
  .testing-left,
  .testing-right {
    min-height: auto;
  }
  .testing-left {
    padding: 30px 28px;
  }
  .testing-right {
    padding: 24px;
  }
  .experience-box {
    min-height: 390px;
  }
  .experience-carousel {
    min-height: 280px;
    padding: 18px 30px;
    gap: 24px;
  }
  .experience-carousel img {
    width: 220px;
  }
  .experience-carousel img:hover {
    transform: rotate(0deg) scale(1.48);
  }
  .mylo-hero-media {
    min-height: 320px;
  }
  .mylo-hero-media.is-visible img {
    animation-duration: 6.6s;
  }
}

@media (max-width: 820px) {
  .mylo-hero-media {
    min-height: 300px;
  }
  .mylo-hero-panel {
    padding-top: 28px;
  }
  .mylo-hero-right h1 {
    font-size: clamp(3.85rem, 15vw, 6.2rem);
  }
  .mylo-hero-right h2 {
    margin-top: 14px;
  }
  .mylo-hero-body {
    margin-top: 18px;
  }
  .full-cta {
    font-size: 15px;
  }
}

@media (max-width: 620px) {
  .experience-box {
    min-height: 320px;
    padding: 20px 10px;
  }
  .experience-carousel {
    min-height: 230px;
    padding: 12px 20px;
    gap: 16px;
  }
  .experience-carousel img {
    width: 180px;
  }
  .experience-carousel img:hover {
    transform: rotate(0deg) scale(1.24);
  }
  .testing-left {
    padding: 24px 20px;
  }
  .quote-halo {
    padding: 10px 8px 6px;
  }
  .mylo-hero-media {
    min-height: 260px;
  }
  .mylo-hero-panel {
    margin-top: -22px;
  }
  .mylo-hero-right h1 {
    letter-spacing: -2px;
  }
}


/* === HERO ALIGNMENT FIX === */
.case-top-rule { display:none !important; }
.case-hero-media,
.mylo-hero-media,
.velvet-page .case-hero-media {
  width: 100%;
  margin-inline: auto;
}
.mylo-hero-media.is-visible,
.case-hero-media.is-visible {
  transform: none !important;
}
.mylo-page .case-nav-label {
  display: block !important;
}


/* =========================
   EXPERIENCE HIGHLIGHTS — MAC VIDEO (replaces carousel)
   ========================= */
.mylo-mac-wrap {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  filter:
    drop-shadow(0 0 32px rgba(0,212,255,.18))
    drop-shadow(0 0 72px rgba(21,105,138,.10));
}
.mylo-mac-video {
  position: absolute;
  top: 8.81%;
  left: 5.37%;
  width: 88.83%;
  height: 57.44%;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
  border-radius: 2px;
  display: block;
  background: #080808;
}
.mylo-mac-placeholder {
  position: absolute;
  top: 8.81%;
  left: 5.37%;
  width: 88.83%;
  height: 57.44%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  border-radius: 2px;
  flex-direction: column;
  gap: 10px;
}
.mylo-mac-placeholder span {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.32);
  letter-spacing: .06em;
}
.mylo-mac-placeholder svg {
  opacity: 0.22;
}
/* Custom controls — same structure as Pinnacle but with mylo accent */
.mylo-vid-controls {
  position: absolute;
  top: 66.5%;
  left: 5.37%;
  width: 88.83%;
  z-index: 4;
  padding: 6px 10px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 100%);
  border-radius: 0 0 3px 3px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.mylo-vid-controls.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.mylo-vid-progress-wrap {
  position: relative;
  width: 100%;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  outline: none;
}
.mylo-vid-progress-bg {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,.18);
  border-radius: 99px;
}
.mylo-vid-progress-fill {
  position: absolute;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #00D4FF, #16B8A0);
  border-radius: 99px;
  transition: width .1s linear;
}
.mylo-vid-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(0,212,255,.6);
  transition: left .1s linear, transform .2s ease;
  pointer-events: none;
}
.mylo-vid-progress-wrap:hover .mylo-vid-progress-thumb {
  transform: translate(-50%, -50%) scale(1.3);
}
.mylo-vid-progress-wrap:hover .mylo-vid-progress-bg,
.mylo-vid-progress-wrap:hover .mylo-vid-progress-fill {
  height: 4px;
}
.mylo-vid-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.mylo-vid-left,
.mylo-vid-right {
  display: flex;
  align-items: center;
  gap: 2px;
}
.mylo-vid-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255,255,255,.82);
  padding: 0;
  transition: color .2s, background .2s;
  flex-shrink: 0;
}
.mylo-vid-btn:hover {
  color: #fff;
  background: rgba(0,212,255,.18);
}
.mylo-vid-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.mylo-vid-btn .icon-play  { display: none; }
.mylo-vid-btn .icon-pause { display: block; }
.mylo-vid-btn .icon-muted { display: block; }
.mylo-vid-btn .icon-sound { display: none; }
.mylo-vid-time {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,.65);
  letter-spacing: .03em;
  white-space: nowrap;
  padding-left: 4px;
  font-family: Inter, sans-serif;
}
@media (max-width: 820px) {
  .mylo-mac-wrap { max-width: 100%; }
}

/* =========================
   EXPLORE THE SYSTEM — links en amarillo, CTAs con gradient nuevo
   ========================= */
/* Solo los inline links son amarillos (señal visual de que son clickeables) */
.full-system .inline-link {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #FBCB10;
  color: #FBCB10;
}
/* Los CTAs usan el nuevo gradient — no se sobreescriben aquí,
   heredan var(--mylo) de los estilos base. Solo ajustamos el borde. */

/* =========================
   WHY ART THERAPY WORKS — citation
   ========================= */
.art-therapy-citation {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  text-transform: lowercase;
  margin: 18px auto 0;
  text-align: center;
  max-width: 900px;
  line-height: 1.7;
  letter-spacing: .02em;
}


/* =========================
   AWARD INLINE CON H1 MYLO
   ========================= */
.mylo-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  width: 100%;
}
.mylo-title-row h1 {
  margin: 0;
}
.mylo-title-row .mylo-award-img {
  margin-bottom: 0;
  align-self: center;
  flex-shrink: 0;
  width: clamp(8rem, 18vw, 18rem);
  height: clamp(8rem, 18vw, 18rem);
}
@media (max-width: 980px) {
  .mylo-title-row { justify-content: flex-start; }
  .mylo-title-row .mylo-award-img { width: clamp(4.5rem, 11vw, 10rem); height: clamp(4.5rem, 11vw, 10rem); }
}
@media (max-width: 620px) {
  .mylo-title-row .mylo-award-img { width: clamp(4rem, 14vw, 6.5rem); height: clamp(4rem, 14vw, 6.5rem); }
}