/*
 * Drosopigi mobile experience
 * Loaded after the page-specific stylesheets. Everything in this file is
 * intentionally capped at 900px so the desktop presentation remains intact.
 */

@media (max-width: 900px) {
  :root {
    --mobile-edge: clamp(8px, 2.4vw, 14px);
    --mobile-radius: 22px;
    --mobile-glass:
      linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(226, 242, 252, 0.68));
    --mobile-glass-border: rgba(255, 255, 255, 0.74);
    --mobile-glass-shadow:
      0 18px 46px rgba(8, 54, 94, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.94);
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  body {
    min-width: 0 !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  *,
  *::before,
  *::after {
    min-width: 0;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }

  button,
  .button,
  a.button,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  button,
  .button,
  a.button {
    min-height: 44px;
  }

  input,
  select,
  textarea {
    font-size: max(16px, 1rem) !important;
  }

  /* Desktop CMS placement is never allowed to clip a phone/tablet canvas. */
  .layout-custom {
    translate: none !important;
    rotate: none !important;
    transform: none !important;
  }

  .layout-resized {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .layout-resized:is(img, video, iframe) {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  main.make-it-has-canvas .make-it-page-layer {
    position: relative;
    inset: auto;
    z-index: auto;
    display: grid;
    gap: 14px;
    width: min(100% - (var(--mobile-edge) * 2), 720px);
    margin: 20px auto;
    padding: 0;
  }

  main.make-it-has-canvas .make-it-added-image,
  main.make-it-has-canvas .make-it-added-image.layout-custom,
  main.make-it-has-canvas .make-it-added-image.layout-resized {
    position: relative !important;
    inset: auto !important;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transform: none !important;
  }

  main.make-it-has-canvas .make-it-added-text,
  main.make-it-has-canvas .make-it-added-text.layout-custom,
  main.make-it-has-canvas .make-it-added-text.layout-resized {
    position: relative !important;
    inset: auto !important;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0;
    transform: none !important;
  }

  /* Shared liquid-glass header. */
  .site-header,
  .site-header.compact,
  .site-header.is-scrolled,
  .site-header.is-scrolling-down,
  .site-header.is-scrolling-up,
  body.home-page .site-header,
  body.home-page .site-header.compact,
  body.home-page .site-header.is-scrolled {
    position: fixed !important;
    inset:
      calc(env(safe-area-inset-top, 0px) + 7px)
      calc(env(safe-area-inset-right, 0px) + var(--mobile-edge))
      auto
      calc(env(safe-area-inset-left, 0px) + var(--mobile-edge)) !important;
    z-index: 90 !important;
    width: auto !important;
    min-height: 60px !important;
    padding: 7px 8px 7px 11px !important;
    border: 1px solid var(--mobile-glass-border) !important;
    border-radius: 21px !important;
    background:
      radial-gradient(120% 160% at 4% 0%, rgba(93, 176, 235, 0.2), transparent 45%),
      radial-gradient(130% 180% at 98% 100%, rgba(255, 215, 72, 0.15), transparent 46%),
      var(--mobile-glass) !important;
    box-shadow: var(--mobile-glass-shadow) !important;
    -webkit-backdrop-filter: blur(18px) saturate(155%) !important;
    backdrop-filter: blur(18px) saturate(155%) !important;
    transform: translateZ(0) !important;
  }

  .site-header .brand {
    min-height: 44px !important;
  }

  .site-header .brand.has-image-logo,
  body.home-page .site-header .brand.has-image-logo,
  .site-header .brand-mark.has-logo,
  body.home-page .site-header .brand-mark.has-logo {
    width: clamp(146px, 43vw, 205px) !important;
    min-width: clamp(146px, 43vw, 205px) !important;
    height: 44px !important;
    margin: 0 !important;
  }

  .site-header .brand-mark.has-logo img {
    object-fit: contain !important;
    object-position: left center !important;
  }

  .site-header .nav-toggle,
  body.home-page .site-header .nav-toggle {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(217, 238, 251, 0.72)) !important;
    box-shadow:
      0 8px 22px rgba(7, 66, 112, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  }

  .nav-drawer {
    right: calc(env(safe-area-inset-right, 0px) + var(--mobile-edge)) !important;
    left: calc(env(safe-area-inset-left, 0px) + var(--mobile-edge)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - var(--drawer-top, 86px) - 12px) !important;
    padding:
      15px
      12px
      calc(15px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 26px !important;
    background:
      radial-gradient(130% 100% at 4% 0%, rgba(82, 169, 233, 0.2), transparent 45%),
      radial-gradient(120% 110% at 100% 100%, rgba(255, 216, 77, 0.17), transparent 44%),
      rgba(242, 249, 253, 0.86) !important;
    box-shadow:
      0 28px 72px rgba(4, 42, 76, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
  }

  .nav-drawer .main-nav {
    gap: 3px !important;
  }

  .nav-drawer .main-nav a {
    min-height: 47px !important;
    padding: 10px 13px !important;
    border-radius: 14px !important;
    font-size: 0.94rem !important;
  }

  .nav-drawer .nav-dropdown-panel a {
    min-height: 44px !important;
    padding-block: 9px !important;
    font-size: 0.88rem !important;
  }

  /* Shared inner-page shell. */
  .detail-page:not(.activities-page) {
    width: 100% !important;
    max-width: none !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 78px)
      var(--mobile-edge)
      38px !important;
    overflow: clip !important;
  }

  .detail-page:not(.activities-page) > .detail-hero {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 18px !important;
    padding: clamp(24px, 6vw, 38px) clamp(17px, 4.8vw, 28px) !important;
    border: 1px solid var(--mobile-glass-border) !important;
    border-radius: var(--mobile-radius) !important;
    background:
      radial-gradient(circle at 92% 6%, rgba(255, 215, 72, 0.2), transparent 34%),
      var(--mobile-glass) !important;
    box-shadow: var(--mobile-glass-shadow) !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
    backdrop-filter: blur(14px) saturate(135%) !important;
  }

  .detail-page:not(.activities-page) > .detail-hero h1 {
    max-width: 14ch !important;
    margin: 5px 0 0 !important;
    font-size: clamp(2rem, 9vw, 3.25rem) !important;
    line-height: 1 !important;
    text-wrap: balance;
  }

  .editable-blocks,
  .page-blocks {
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
    margin: 0 !important;
  }

  .page-block,
  .page-image-block,
  .page-gallery-block {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(16px, 4vw, 24px) !important;
    border-radius: var(--mobile-radius) !important;
  }

  .page-block-copy {
    padding: 0 !important;
  }

  .page-block-copy h2,
  .page-gallery-block h2 {
    font-size: clamp(1.55rem, 6.8vw, 2.2rem) !important;
    line-height: 1.08 !important;
  }

  .page-block-copy p,
  .page-block-copy li {
    font-size: 0.96rem !important;
    line-height: 1.62 !important;
  }

  .page-gallery,
  .gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .page-gallery img,
  .gallery-grid img {
    width: 100% !important;
    aspect-ratio: 1 / 0.82 !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  .media-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .media-card,
  .media-card:first-child {
    grid-column: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .media-frame {
    aspect-ratio: 4 / 3 !important;
    border-radius: 13px !important;
  }

  .media-card h3 {
    margin-top: 9px !important;
    font-size: 1rem !important;
    line-height: 1.12 !important;
  }

  body.home-page .media-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 0.78rem !important;
    line-height: 1.42 !important;
  }

  /* Homepage: compact first screen and row-flow content everywhere. */
  body.home-page main {
    grid-template-columns: var(--mobile-edge) minmax(0, 1fr) var(--mobile-edge) !important;
  }

  body.home-page .hero {
    min-height: clamp(500px, 72svh, 590px) !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 76px)
      var(--mobile-edge)
      16px !important;
  }

  body.home-page .hero-bg img {
    object-position: 58% center !important;
  }

  body.home-page .hero::before {
    background:
      linear-gradient(90deg, rgba(4, 59, 111, 0.92) 0%, rgba(4, 75, 133, 0.75) 48%, rgba(4, 61, 109, 0.22) 100%) !important;
  }

  body.home-page .hero-content {
    width: 100% !important;
    max-width: 520px !important;
    margin: auto 0 0 !important;
    padding: 17px !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 22px !important;
    background:
      linear-gradient(145deg, rgba(4, 57, 108, 0.67), rgba(5, 69, 124, 0.42)) !important;
    box-shadow:
      0 22px 54px rgba(0, 28, 62, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
  }

  body.home-page .hero .eyebrow {
    margin-bottom: 9px !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.13em !important;
  }

  body.home-page .hero-content h1 {
    max-width: none !important;
    margin: 0 0 8px !important;
    font-size: clamp(2.25rem, 9.4vw, 3.25rem) !important;
    line-height: 0.94 !important;
  }

  body.home-page .hero-copy {
    max-width: 38ch !important;
    margin: 0 0 13px !important;
    font-size: clamp(0.86rem, 3.4vw, 0.98rem) !important;
    line-height: 1.45 !important;
  }

  body.home-page .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.home-page .hero-actions .button {
    width: 100% !important;
    min-height: 46px !important;
    padding: 10px 14px !important;
    font-size: 0.86rem !important;
  }

  body.home-page main > .section,
  body.home-page .moments-section,
  body.home-page .day-experience-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(22px, 5vw, 32px) clamp(10px, 3.2vw, 18px) !important;
    border-radius: var(--mobile-radius) !important;
  }

  body.home-page .section-copy {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 15px !important;
    padding: 0 2px !important;
  }

  body.home-page .section-copy .eyebrow {
    margin-bottom: 7px !important;
    font-size: 0.7rem !important;
    line-height: 1.15 !important;
  }

  body.home-page .section-copy h2,
  body.home-page .moments-section .section-copy h2,
  body.home-page .day-experience-section .section-copy h2 {
    max-width: none !important;
    margin: 0 0 7px !important;
    font-size: clamp(1.55rem, 7vw, 2.15rem) !important;
    line-height: 1.04 !important;
    text-wrap: balance;
  }

  body.home-page .section-copy > p:last-child {
    max-width: 42ch !important;
    margin: 0 !important;
    font-size: 0.88rem !important;
    line-height: 1.48 !important;
  }

  body.home-page .quick-info-grid,
  body.home-page .learning-grid,
  body.home-page .benefits-grid,
  body.home-page .home-gallery-grid,
  body.home-page .moments-grid,
  body.home-page .moments-grid.is-carousel,
  body.home-page .day-experience-track {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: initial !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    scroll-padding: 0 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  body.home-page .quick-info-grid > *,
  body.home-page .learning-grid > *,
  body.home-page .benefits-grid > *,
  body.home-page .home-gallery-grid > *,
  body.home-page .moments-grid > *,
  body.home-page .day-experience-track > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    scroll-snap-align: none !important;
  }

  body.home-page .quick-info-grid > :last-child:nth-child(odd),
  body.home-page .home-gallery-grid > :last-child:nth-child(odd),
  body.home-page .day-experience-track > :last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  body.home-page .quick-info-card {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    align-content: start !important;
    padding: 11px !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-top-width: 3px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow:
      0 10px 24px rgba(13, 68, 105, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
    backdrop-filter: blur(10px) saturate(125%) !important;
  }

  body.home-page .quick-info-card .quick-info-icon {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  body.home-page .quick-info-card h3 {
    margin: 1px 0 4px !important;
    font-size: 0.92rem !important;
    line-height: 1.08 !important;
  }

  body.home-page .quick-info-card p {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
  }

  body.home-page .quick-info-grid > :last-child:nth-child(odd) {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    padding-inline: 13px !important;
  }

  body.home-page .discover-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 9px !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.home-page .discover-card {
    grid-template-rows: clamp(104px, 28vw, 150px) minmax(0, 1fr) !important;
    min-height: 250px !important;
    border-radius: 16px !important;
  }

  body.home-page .discover-copy {
    gap: 4px !important;
    padding: 11px 34px 12px 11px !important;
  }

  body.home-page .discover-label {
    font-size: 0.68rem !important;
  }

  body.home-page .discover-copy > strong {
    font-size: 1.02rem !important;
    line-height: 1.05 !important;
  }

  body.home-page .discover-text {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    font-size: 0.78rem !important;
    line-height: 1.38 !important;
  }

  body.home-page .discover-card:nth-child(3) {
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(118px, 40%) minmax(0, 1fr) !important;
    grid-template-rows: minmax(142px, auto) !important;
    min-height: 142px !important;
  }

  body.home-page .learning-card,
  body.home-page .benefit-card {
    min-height: 142px !important;
    padding: 11px !important;
    border-radius: 15px !important;
  }

  body.home-page .learning-card .premium-icon,
  body.home-page .benefit-card .premium-icon {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    margin-bottom: 7px !important;
  }

  body.home-page .learning-card h3,
  body.home-page .benefit-card h3 {
    margin-bottom: 4px !important;
    font-size: 0.92rem !important;
    line-height: 1.1 !important;
  }

  body.home-page .learning-card p,
  body.home-page .benefit-card p {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
  }

  body.home-page .learning-illustration {
    width: min(210px, 58vw) !important;
    margin: -2px auto 0 !important;
  }

  body.home-page .moments-viewport {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.home-page .moments-grid:not(.is-carousel),
  body.home-page .moments-grid.is-carousel {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: initial !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  body.home-page .moments-grid .more-card {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  body.home-page .moments-arrow,
  body.home-page .moments-carousel-controls {
    display: none !important;
  }

  body.home-page .moment,
  body.home-page .moment.is-story {
    min-height: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 11px 28px rgba(8, 61, 100, 0.1) !important;
  }

  body.home-page .moment.is-story .moment-media,
  body.home-page .moment-media {
    height: clamp(98px, 28vw, 150px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 16px 16px 0 0 !important;
  }

  body.home-page .moment.is-story .moment-body {
    gap: 5px !important;
    padding: 9px 9px 10px !important;
  }

  body.home-page .moment.is-story .moment-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  body.home-page .moment.is-story .moment-date-badge {
    padding: 4px 6px !important;
    border-radius: 8px !important;
  }

  body.home-page .moment.is-story .moment-date-badge b {
    font-size: 0.75rem !important;
  }

  body.home-page .moment.is-story .moment-date-badge i,
  body.home-page .moment.is-story .moment-tag {
    font-size: 0.64rem !important;
  }

  body.home-page .moment.is-story h3 {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.92rem !important;
    line-height: 1.16 !important;
  }

  body.home-page .moment.is-story .moment-summary {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3 !important;
    font-size: 0.74rem !important;
    line-height: 1.36 !important;
  }

  body.home-page .moment.is-story .moment-more {
    width: 100% !important;
    min-height: 40px !important;
    justify-content: center !important;
    margin-top: 2px !important;
    padding: 8px !important;
    font-size: 0.72rem !important;
  }

  body.home-page .day-experience-section {
    overflow: visible !important;
  }

  body.home-page .day-experience-section::after {
    display: none !important;
    content: none !important;
  }

  body.home-page .day-experience-section .section-copy,
  body.home-page .day-experience-section .section-copy * {
    text-align: left !important;
  }

  body.home-page .day-experience-section .section-copy h2 {
    max-width: none !important;
    font-size: clamp(1.7rem, 7vw, 2.25rem) !important;
  }

  body.home-page .day-moment-card {
    min-height: 176px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    box-shadow: 0 11px 26px rgba(8, 65, 120, 0.11) !important;
  }

  body.home-page .day-moment-card::before,
  body.home-page .day-moment-card::after {
    display: none !important;
    content: none !important;
  }

  body.home-page .day-moment-copy {
    padding: 9px !important;
  }

  body.home-page .day-moment-time {
    margin-bottom: 4px !important;
    padding: 4px 6px !important;
    font-size: 0.66rem !important;
  }

  body.home-page .day-moment-copy h3 {
    margin-bottom: 3px !important;
    font-size: 0.92rem !important;
    line-height: 1.08 !important;
  }

  body.home-page .day-moment-copy p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
  }

  body.home-page .home-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.home-page .gallery-card {
    min-height: 0 !important;
    border-radius: 15px !important;
  }

  body.home-page .gallery-card img {
    aspect-ratio: 1 / 0.78 !important;
  }

  body.home-page .stats-public-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.home-page .stat-public-card {
    min-height: 104px !important;
    padding: 11px 6px !important;
    border-radius: 15px !important;
  }

  body.home-page .stat-public-card strong {
    font-size: clamp(1.25rem, 6vw, 1.8rem) !important;
  }

  body.home-page .playful-divider {
    width: 100% !important;
    min-height: 108px !important;
    height: 118px !important;
    margin-top: 8px !important;
  }

  body.home-page .playful-divider img {
    width: min(250px, 72vw) !important;
    max-height: 118px !important;
  }

  /* Activities: current markup owns the final mobile layout. */
  body[data-page="activities"] {
    overflow-x: clip !important;
  }

  body[data-page="activities"] .detail-page,
  body[data-page="activities"] .activities-page {
    width: 100% !important;
    max-width: 100% !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 76px)
      0
      0 !important;
    overflow: clip !important;
  }

  body[data-page="activities"] .detail-hero.activity-hero {
    width: calc(100% - (2 * var(--mobile-edge))) !important;
    min-height: clamp(390px, 60svh, 500px) !important;
    margin: 0 auto !important;
    padding: clamp(96px, 19vw, 132px) 15px 18px !important;
    align-items: end !important;
    border-radius: 0 0 26px 26px !important;
    background-position: center !important;
  }

  body[data-page="activities"] .detail-hero.activity-hero::before {
    background:
      linear-gradient(180deg, rgba(8, 35, 61, 0.14) 0%, rgba(8, 35, 61, 0.52) 48%, rgba(8, 35, 61, 0.94) 100%) !important;
  }

  body[data-page="activities"] .activity-hero-copy {
    width: 100% !important;
    max-width: 560px !important;
    padding: 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 19px !important;
    background: rgba(8, 41, 69, 0.48) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
    backdrop-filter: blur(12px) saturate(125%) !important;
  }

  body[data-page="activities"] .activity-hero h1 {
    font-size: clamp(2.2rem, 10vw, 3.55rem) !important;
    line-height: 0.98 !important;
  }

  body[data-page="activities"] .activity-hero-intro {
    margin-top: 12px !important;
    font-size: 0.9rem !important;
    line-height: 1.48 !important;
  }

  body[data-page="activities"] .activity-hero-sun {
    top: 14px !important;
    right: 14px !important;
    width: 94px !important;
  }

  body[data-page="activities"] .activities-layout {
    display: block !important;
    width: calc(100% - (2 * var(--mobile-edge))) !important;
    max-width: none !important;
    margin: -10px auto 0 !important;
    overflow: visible !important;
  }

  body[data-page="activities"] .activity-discovery {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 15px !important;
    border-radius: 21px !important;
    background:
      radial-gradient(circle at 95% 0%, rgba(255, 215, 72, 0.16), transparent 38%),
      rgba(255, 255, 255, 0.82) !important;
    box-shadow: var(--mobile-glass-shadow) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
  }

  body[data-page="activities"] .activity-discovery-heading h2,
  body[data-page="activities"] .activity-section-heading h2,
  body[data-page="activities"] .activity-media-heading h2 {
    font-size: clamp(1.55rem, 7vw, 2.2rem) !important;
    line-height: 1.04 !important;
  }

  body[data-page="activities"] .activity-search {
    min-height: 48px !important;
    border-radius: 15px !important;
  }

  body[data-page="activities"] .activity-filterbar {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-page="activities"] .activity-filterbar button {
    display: inline-flex !important;
    width: 100% !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 8px 9px !important;
    white-space: normal !important;
    text-align: center !important;
    font-size: 0.78rem !important;
  }

  body[data-page="activities"] .activity-result-count {
    position: static !important;
    grid-column: 1 / -1 !important;
    margin: -2px 2px 0 !important;
    text-align: right !important;
  }

  body[data-page="activities"] .activity-latest {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 38px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body[data-page="activities"] .activity-section-heading,
  body[data-page="activities"] .activity-media-heading {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px 12px !important;
    align-items: end !important;
    margin-bottom: 15px !important;
  }

  body[data-page="activities"] .activity-section-heading > p {
    grid-column: 1 / -1 !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }

  body[data-page="activities"] .activity-rail {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  body[data-page="activities"] .activity-story-card {
    grid-template-rows: clamp(116px, 25vw, 190px) minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow:
      0 13px 30px rgba(14, 58, 90, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
    backdrop-filter: blur(10px) saturate(125%) !important;
  }

  body[data-page="activities"] .activity-story-icon {
    right: 9px !important;
    bottom: 9px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 1rem !important;
  }

  body[data-page="activities"] .activity-story-copy {
    padding: 11px !important;
  }

  body[data-page="activities"] .activity-story-meta {
    align-items: start !important;
    gap: 5px !important;
  }

  body[data-page="activities"] .activity-chip {
    padding: 4px 7px !important;
    font-size: 0.66rem !important;
  }

  body[data-page="activities"] .activity-story-meta time {
    font-size: 0.66rem !important;
  }

  body[data-page="activities"] .activity-story-copy h3 {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 10px 0 6px !important;
    font-size: 1rem !important;
    line-height: 1.08 !important;
  }

  body[data-page="activities"] .activity-story-copy p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 0.76rem !important;
    line-height: 1.4 !important;
  }

  body[data-page="activities"] .activity-open {
    min-height: 44px !important;
    margin-top: 10px !important;
    padding: 9px 0 0 !important;
    font-size: 0.76rem !important;
  }

  body[data-page="activities"] .activity-open span {
    width: 28px !important;
    height: 28px !important;
  }

  body[data-page="activities"] .activity-side {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 42px !important;
    padding: 32px 0 !important;
    overflow: visible !important;
  }

  body[data-page="activities"] .activity-media-panel {
    padding: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 21px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: var(--mobile-glass-shadow) !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
    backdrop-filter: blur(14px) saturate(135%) !important;
  }

  body[data-page="activities"] .activity-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 4px !important;
    overflow: visible !important;
    border-radius: 15px !important;
    background: rgba(8, 116, 209, 0.08) !important;
  }

  body[data-page="activities"] .activity-tabs button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 7px 5px !important;
    white-space: normal !important;
    border: 0 !important;
    border-radius: 11px !important;
    font-size: 0.72rem !important;
  }

  body[data-page="activities"] .activity-photo-grid,
  body[data-page="activities"] .activity-photo-grid.is-links {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: initial !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  body[data-page="activities"] .activity-photo-grid > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    scroll-snap-align: none !important;
  }

  body[data-page="activities"] .activity-photo-thumb {
    aspect-ratio: 1 / 1.15 !important;
    border-radius: 14px !important;
  }

  body[data-page="activities"] .activity-photo-thumb span {
    right: 7px !important;
    bottom: 7px !important;
    left: 7px !important;
    font-size: 0.68rem !important;
  }

  body[data-page="activities"] .activity-media-link {
    min-height: 112px !important;
    padding: 12px 34px 12px 12px !important;
    border-radius: 14px !important;
    font-size: 0.76rem !important;
  }

  body[data-page="activities"] .activity-children-parade {
    min-height: 120px !important;
    margin-top: 24px !important;
  }

  body[data-page="activities"] .activity-modal {
    padding: 0 !important;
  }

  body[data-page="activities"] .activity-modal-card {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(190px, 34dvh) minmax(0, 1fr) !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  body[data-page="activities"] .activity-modal-image {
    min-height: 0 !important;
  }

  body[data-page="activities"] .activity-modal-reader {
    min-height: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  body[data-page="activities"] .activity-reader-toolbar {
    padding: 10px 12px !important;
  }

  body[data-page="activities"] .activity-modal-body {
    padding: 17px 14px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-page="activities"] .activity-modal-body h2 {
    font-size: clamp(1.65rem, 7.5vw, 2.35rem) !important;
  }

  body[data-page="activities"] .activity-reader-pagination {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-page="activities"] .activity-reader-pagination button {
    min-height: 72px !important;
    padding: 10px !important;
  }

  /* Facilities: shorter hero, readable tour, two-column wall and touch captions. */
  body[data-page="spaces"] .fac-hero {
    min-height: clamp(460px, 68svh, 590px) !important;
  }

  body[data-page="spaces"] .fac-hero-inner {
    padding:
      calc(env(safe-area-inset-top, 0px) + 86px)
      0
      20px !important;
  }

  body[data-page="spaces"] .fac-hero-inner .fac-wrap {
    width: calc(100% - (2 * var(--mobile-edge))) !important;
    padding: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 22px !important;
    background: rgba(28, 52, 37, 0.46) !important;
    box-shadow: 0 22px 52px rgba(16, 31, 22, 0.28) !important;
    -webkit-backdrop-filter: blur(13px) saturate(125%) !important;
    backdrop-filter: blur(13px) saturate(125%) !important;
  }

  body[data-page="spaces"] .fac-hero-eyebrow {
    padding: 7px 11px !important;
    font-size: 0.68rem !important;
  }

  body[data-page="spaces"] .fac-hero-title {
    margin-top: 12px !important;
    font-size: clamp(2.25rem, 9.5vw, 3.5rem) !important;
  }

  body[data-page="spaces"] .fac-hero-lead {
    margin-top: 10px !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  body[data-page="spaces"] .fac-scrollcue {
    min-height: 44px !important;
    margin-top: 12px !important;
    font-size: 0.7rem !important;
  }

  body[data-page="spaces"] .fac-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: var(--mobile-edge) !important;
  }

  body[data-page="spaces"] .fac-section {
    padding-block: clamp(34px, 8vw, 52px) !important;
  }

  body[data-page="spaces"] .fac-h2 {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
  }

  body[data-page="spaces"] .fac-lead {
    margin-top: 10px !important;
    font-size: 0.94rem !important;
    line-height: 1.55 !important;
  }

  body[data-page="spaces"] .fac-section:has(.fac-principles) {
    display: block !important;
  }

  body[data-page="spaces"] .fac-principles {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin-top: 20px !important;
  }

  body[data-page="spaces"] .fac-principle {
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 17px !important;
  }

  body[data-page="spaces"] .fac-principle h3 {
    font-size: 1rem !important;
  }

  body[data-page="spaces"] .fac-principle p {
    font-size: 0.76rem !important;
  }

  body[data-page="spaces"] #fac-tour {
    margin-top: 0 !important;
  }

  body[data-page="spaces"] .fac-tour {
    gap: 38px !important;
    margin-top: 24px !important;
  }

  body[data-page="spaces"] .fac-tour-item {
    gap: 16px !important;
  }

  body[data-page="spaces"] .fac-tour-media {
    max-width: 360px !important;
    padding: 8px !important;
    border-radius: 19px !important;
  }

  body[data-page="spaces"] .fac-tour-frame {
    border-radius: 13px !important;
  }

  body[data-page="spaces"] .fac-tour-body h3 {
    font-size: clamp(1.45rem, 6.5vw, 2rem) !important;
  }

  body[data-page="spaces"] .fac-tour-body p {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
  }

  body[data-page="spaces"] .fac-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 20px !important;
    overflow: visible !important;
  }

  body[data-page="spaces"] .fac-gallery-fig {
    width: 100% !important;
    border-radius: 15px !important;
  }

  body[data-page="spaces"] .fac-gallery-cap {
    min-height: 58% !important;
    padding: 9px !important;
    opacity: 1 !important;
    transform: none !important;
    font-size: 0.78rem !important;
  }

  body[data-page="spaces"] .fac-cta {
    padding: 30px 16px !important;
    border-radius: 22px !important;
  }

  body[data-page="spaces"] .fac-cta h2 {
    font-size: clamp(1.7rem, 7.5vw, 2.4rem) !important;
  }

  body[data-page="spaces"] .fac-cta p {
    font-size: 0.9rem !important;
  }

  body[data-page="spaces"] .fac-cta-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 18px !important;
  }

  body[data-page="spaces"] .fac-btn {
    width: 100% !important;
    min-height: 46px !important;
    padding-inline: 12px !important;
    font-size: 0.82rem !important;
  }

  /* Kindergarten/editorial pages: preserve narrative, compact safe collections. */
  .kindergarten-scroll-section {
    min-height: 0 !important;
    padding-block: clamp(38px, 9vw, 58px) !important;
  }

  .kindergarten-section-head,
  .kindergarten-section-body {
    width: calc(100% - (2 * var(--mobile-edge))) !important;
    max-width: 100% !important;
  }

  .kindergarten-section-head {
    margin-bottom: 22px !important;
  }

  .kindergarten-section-head h2 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1 !important;
  }

  .kb-program {
    gap: 30px !important;
  }

  .kb-stage-grid {
    gap: 9px !important;
  }

  .kb-stage {
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 17px !important;
  }

  .kb-subject-grid,
  .kb-photo-grid,
  .kb-departure-zones {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .kb-subject,
  .kb-departure-zone {
    min-height: 0 !important;
    padding: 13px !important;
    border-radius: 16px !important;
  }

  .kb-photo,
  .kb-photo:first-child {
    grid-column: auto !important;
  }

  .kb-photo img,
  .kb-photo:first-child img {
    aspect-ratio: 1.2 / 1 !important;
  }

  .kb-departure {
    gap: 18px !important;
    padding: 20px 14px !important;
    border-radius: 20px !important;
  }

  /* Childcare iframe document. */
  .dp-root {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .dp-subnav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    padding: 8px !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    background: rgba(251, 248, 241, 0.86) !important;
    box-shadow: 0 12px 30px rgba(22, 48, 107, 0.09) !important;
    -webkit-backdrop-filter: blur(15px) saturate(135%) !important;
    backdrop-filter: blur(15px) saturate(135%) !important;
  }

  .dp-subnav a {
    width: 100% !important;
    min-height: 44px !important;
    padding: 7px 5px !important;
    white-space: normal !important;
    font-size: 0.68rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  .dp-subnav a:nth-child(4) {
    grid-column: 1 / span 2;
  }

  .dp-root > header {
    padding: 58px 14px 38px !important;
  }

  .dp-root > section,
  .dp-section-extra {
    padding: clamp(42px, 10vw, 58px) 14px !important;
  }

  .dp-root > section > div {
    max-width: 100% !important;
  }

  .dp-root h1[aria-label] {
    margin: 16px 0 10px !important;
    font-size: clamp(2.35rem, 11vw, 4.2rem) !important;
    line-height: 0.96 !important;
  }

  .dp-root h1[aria-label] + p {
    font-size: clamp(1.1rem, 5vw, 1.35rem) !important;
    line-height: 1.2 !important;
  }

  .dp-root h1[aria-label] + p + div {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }

  .dp-root h1[aria-label] + p + div > p,
  .dp-root h1[aria-label] + p + div blockquote {
    font-size: 0.94rem !important;
    line-height: 1.48 !important;
  }

  .dp-extra-wrap {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .dp-extra-copy h2 {
    font-size: clamp(1.9rem, 8.5vw, 2.75rem) !important;
  }

  .dp-extra-copy p,
  .dp-root p[style*="font-size"] {
    font-size: 0.94rem !important;
    line-height: 1.58 !important;
  }

  .dp-program-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .dp-program-card {
    padding: 13px !important;
    border-radius: 16px !important;
  }

  .dp-program-card span,
  .dp-program-card li {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
  }

  .dp-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .dp-photo-grid figure,
  .dp-photo-grid figure:first-child {
    min-height: 150px !important;
    grid-row: auto !important;
    border-radius: 16px !important;
  }

  .dp-photo-grid figcaption {
    right: 7px !important;
    bottom: 7px !important;
    left: 7px !important;
    padding: 7px 8px !important;
    border-radius: 12px !important;
    font-size: 0.68rem !important;
  }

  .childcare-contact-cta {
    padding: 0 var(--mobile-edge) 42px !important;
  }

  .childcare-contact-button {
    width: 100% !important;
    min-height: 52px !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 10px 10px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.46) !important;
    background: rgba(22, 48, 107, 0.9) !important;
    box-shadow: 0 16px 38px rgba(22, 48, 107, 0.2) !important;
    -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
    backdrop-filter: blur(12px) saturate(125%) !important;
  }

  /* Manage: wrap navigation and remove its hidden sideways workflows. */
  body.manage-page {
    overflow-x: clip !important;
  }

  body.manage-page .studio-sidebar {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 8px var(--mobile-edge) 9px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    background: rgba(247, 252, 255, 0.88) !important;
    box-shadow: 0 13px 34px rgba(5, 47, 104, 0.1) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
  }

  body.manage-page .studio-brand {
    justify-self: center !important;
    width: 138px !important;
    min-height: 40px !important;
  }

  body.manage-page .studio-brand img {
    height: 38px !important;
  }

  body.manage-page .studio-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  body.manage-page .studio-nav button {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    width: 100% !important;
    min-height: 48px !important;
    gap: 5px !important;
    padding: 6px !important;
    border: 1px solid rgba(7, 93, 181, 0.08) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.64) !important;
    white-space: normal !important;
    scroll-snap-align: none !important;
  }

  body.manage-page .studio-nav button.is-active {
    border-color: rgba(7, 93, 181, 0.24) !important;
    background: #fff !important;
    box-shadow: 0 7px 18px rgba(7, 93, 181, 0.11) !important;
  }

  body.manage-page .studio-nav button span {
    width: 26px !important;
    height: 26px !important;
  }

  body.manage-page .studio-nav strong {
    font-size: 0.72rem !important;
    line-height: 1.08 !important;
  }

  body.manage-page .studio-nav small {
    display: none !important;
  }

  body.manage-page .studio-topbar {
    gap: 9px !important;
    padding: 13px var(--mobile-edge) 7px !important;
  }

  body.manage-page .studio-topbar h1 {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
  }

  body.manage-page .admin-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  body.manage-page .admin-actions > * {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 8px !important;
    font-size: 0.74rem !important;
    text-align: center !important;
  }

  body.manage-page .studio-save-state {
    grid-column: 1 / -1 !important;
    min-height: 0 !important;
    padding: 4px !important;
  }

  body.manage-page .studio-grid {
    padding: 7px var(--mobile-edge) 24px !important;
  }

  body.manage-page .wizard-steps {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  body.manage-page .wizard-step {
    flex: none !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 9px !important;
    border: 1px solid rgba(7, 93, 181, 0.1) !important;
    border-radius: 12px !important;
  }

  body.manage-page .spaces-editor-card .mini-button.danger {
    opacity: 1 !important;
  }

  body.manage-page .media-picker {
    width: calc(100% - (2 * var(--mobile-edge))) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 12px !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }

  body.manage-page .media-picker-head,
  body.manage-page .media-picker-header,
  body.manage-page .media-picker-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  body.manage-page .media-picker-grid,
  body.manage-page .gallery-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
  }

  body.manage-page .gallery-strip {
    overflow: visible !important;
  }

  body.manage-page .media-picker-grid {
    max-height: 50dvh !important;
    padding-right: 3px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  body.manage-page .login-shell {
    min-height: 100dvh !important;
  }

  body.manage-page .login-card {
    width: calc(100% - (2 * var(--mobile-edge))) !important;
    max-width: 480px !important;
    padding: clamp(20px, 6vw, 32px) !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: var(--mobile-glass-shadow) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.manage-page .studio-nav-shell .studio-nav {
    scroll-behavior: auto !important;
  }
}

/* Manage access controls must remain authoritative on small screens. */
@media (max-width: 900px) {
  body.manage-page .studio-nav button[hidden],
  body.manage-page .admin-actions > [hidden],
  body.manage-page [data-reset-content][hidden] {
    display: none !important;
  }

  body.manage-page.manage-single-view .studio-nav {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.manage-page.manage-single-view .studio-nav button:not([hidden]) {
    min-height: 54px !important;
  }
}

@media (max-width: 760px) {
  body.home-page .hero {
    min-height: clamp(490px, 70svh, 570px) !important;
  }

  body.home-page .hero-story-art {
    width: 82px !important;
    top: 80px !important;
    right: 7px !important;
  }

  body.home-page .site-footer.rich-footer {
    padding: 18px var(--mobile-edge) 0 !important;
  }

  body.home-page .site-footer.rich-footer .footer-cta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px 10px !important;
    padding: 13px !important;
    border-radius: 17px !important;
  }

  body.home-page .site-footer.rich-footer .footer-cta h2,
  body.home-page .site-footer.rich-footer .footer-cta p {
    grid-column: 1 !important;
  }

  body.home-page .site-footer.rich-footer .footer-cta h2 {
    margin: 0 !important;
    font-size: 1.25rem !important;
  }

  body.home-page .site-footer.rich-footer .footer-cta p {
    font-size: 0.76rem !important;
    line-height: 1.38 !important;
  }

  body.home-page .site-footer.rich-footer .footer-cta .button {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    min-height: 44px !important;
    padding: 9px 11px !important;
    font-size: 0.74rem !important;
  }

  body.home-page .site-footer.rich-footer .footer-columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.home-page .site-footer.rich-footer .footer-col {
    padding: 10px !important;
    border-radius: 15px !important;
  }

  body.home-page .site-footer.rich-footer .footer-col-brand {
    grid-column: 1 / -1 !important;
  }

  body.home-page .site-footer.rich-footer .footer-col-member {
    grid-column: auto !important;
  }

  body[data-page="activities"] .activity-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-page="activities"] .activity-photo-grid,
  body[data-page="activities"] .activity-photo-grid.is-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-page="spaces"] .space-modal-card {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 389px) {
  body.home-page .quick-info-card {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    padding: 9px !important;
  }

  body.home-page .quick-info-card .quick-info-icon {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }

  body.home-page .quick-info-card h3,
  body.home-page .learning-card h3,
  body.home-page .benefit-card h3 {
    font-size: 0.86rem !important;
  }

  body.home-page .quick-info-card p,
  body.home-page .learning-card p,
  body.home-page .benefit-card p {
    font-size: 0.74rem !important;
  }

  body.home-page .discover-card {
    min-height: 238px !important;
  }

  body[data-page="activities"] .activity-rail {
    grid-template-columns: 1fr !important;
  }

  body[data-page="activities"] .activity-story-card {
    grid-template-columns: 42% minmax(0, 1fr) !important;
    grid-template-rows: minmax(186px, auto) !important;
  }

  body[data-page="activities"] .activity-story-media {
    min-height: 100% !important;
  }

  body[data-page="activities"] .activity-story-copy p {
    -webkit-line-clamp: 2;
  }

  body.manage-page .studio-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dp-subnav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dp-subnav a:nth-child(4) {
    grid-column: auto;
  }

  .dp-subnav a:last-child {
    grid-column: 1 / -1;
  }
}

/* Mobile polish pass 2: let the managed hero photo lead the first screen. */
@media (max-width: 900px) {
  body:has(> .dp-root) {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: clip;
  }

  body.home-page .hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: clamp(292px, 74vw, 430px) auto !important;
    align-items: stretch !important;
    min-height: 0 !important;
    padding: 0 0 18px !important;
    background:
      radial-gradient(circle at 92% 84%, rgba(255, 214, 71, 0.14), transparent 28%),
      #eef7fd !important;
    overflow: clip !important;
  }

  body.home-page .hero-bg {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    filter: none !important;
    border-radius: 0 0 28px 28px !important;
  }

  body.home-page .hero-bg::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(
        180deg,
        rgba(1, 28, 58, 0.16) 0%,
        rgba(1, 28, 58, 0.02) 38%,
        rgba(1, 28, 58, 0.18) 100%
      );
  }

  body.home-page .hero-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: var(--hero-mobile-position, 42% 56%) !important;
    filter: saturate(1.04) contrast(1.02) !important;
    transform: none !important;
    animation: none !important;
  }

  body.home-page .hero::before,
  body.home-page .hero::after {
    display: none !important;
    content: none !important;
  }

  body.home-page .hero-content {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    z-index: 2 !important;
    align-self: start !important;
    width: calc(100% - (2 * var(--mobile-edge))) !important;
    max-width: 540px !important;
    margin: -22px auto 0 !important;
    padding: 16px !important;
    border: 1px solid rgba(224, 240, 250, 0.4) !important;
    border-radius: 22px !important;
    background: linear-gradient(
      145deg,
      rgba(4, 57, 108, 0.96) 0%,
      rgba(6, 68, 119, 0.95) 55%,
      rgba(7, 80, 132, 0.94) 100%
    ) !important;
    box-shadow:
      0 18px 38px rgba(0, 35, 72, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    -webkit-backdrop-filter: blur(12px) saturate(115%) !important;
    backdrop-filter: blur(12px) saturate(115%) !important;
  }

  body.home-page .hero-copy::first-line {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
  }

  body.home-page .hero-story-art {
    display: none !important;
  }
}

/* A restrained, sitewide mobile finish: tactile cards, clearer hierarchy,
   consistent glass surfaces and stronger image presentation. */
@media (max-width: 900px) {
  :root {
    --mobile-blue: #0874d1;
    --mobile-navy: #073b69;
    --mobile-sun: #ffd84d;
    --mobile-mint: #48bca5;
    --mobile-coral: #ef7e6d;
    --mobile-soft-line: rgba(8, 74, 126, 0.11);
  }

  body:not(.manage-page) {
    background-color: #f2f8fc;
  }

  body:not([data-page="childcare-static"]) :where(section[id], div[id]) {
    scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 88px);
  }

  :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(8, 116, 209, 0.38) !important;
    outline-offset: 3px !important;
  }

  :where(
      .button,
      .fac-btn,
      .moment-more,
      .activity-open,
      .activity-more,
      .childcare-contact-button,
      .mini-button,
      .primary-button,
      .secondary-button
    ) {
    -webkit-tap-highlight-color: transparent;
  }

  .site-header .brand-mark.has-logo img {
    filter: drop-shadow(0 3px 7px rgba(5, 56, 97, 0.1));
  }

  .nav-drawer .main-nav a[aria-current="page"],
  .nav-drawer .main-nav a.active {
    border: 1px solid rgba(8, 116, 209, 0.13) !important;
    color: var(--mobile-navy) !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(220, 239, 252, 0.8)) !important;
    box-shadow:
      0 8px 20px rgba(7, 69, 117, 0.09),
      inset 3px 0 0 var(--mobile-sun) !important;
  }

  body.home-page main > .section .section-copy .eyebrow,
  .detail-page:not(.activities-page) > .detail-hero .eyebrow {
    display: inline-flex !important;
    width: fit-content !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(225, 242, 252, 0.72)) !important;
    box-shadow:
      0 7px 18px rgba(7, 70, 119, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: blur(10px) saturate(135%) !important;
    backdrop-filter: blur(10px) saturate(135%) !important;
  }

  body.home-page main > .section .section-copy .eyebrow::before,
  .detail-page:not(.activities-page) > .detail-hero .eyebrow::before {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--mobile-sun);
    box-shadow: 0 0 0 3px rgba(255, 216, 77, 0.2);
    content: "";
  }

  body.home-page .quick-info-card {
    position: relative !important;
    overflow: hidden !important;
  }

  body.home-page .quick-info-grid > :nth-child(4n + 1) {
    border-top-color: #4ca9ee !important;
  }

  body.home-page .quick-info-grid > :nth-child(4n + 2) {
    border-top-color: var(--mobile-sun) !important;
  }

  body.home-page .quick-info-grid > :nth-child(4n + 3) {
    border-top-color: var(--mobile-mint) !important;
  }

  body.home-page .quick-info-grid > :nth-child(4n + 4) {
    border-top-color: var(--mobile-coral) !important;
  }

  body.home-page .discover-card,
  body.home-page .learning-card,
  body.home-page .benefit-card,
  body.home-page .moment,
  body.home-page .day-moment-card,
  body.home-page .gallery-card,
  body.home-page .stat-public-card {
    border-color: rgba(255, 255, 255, 0.82) !important;
    box-shadow:
      0 13px 30px rgba(7, 62, 103, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
  }

  body.home-page .discover-card,
  body.home-page .gallery-card,
  body.home-page .moment-media,
  body.home-page .day-moment-card {
    isolation: isolate;
    overflow: hidden !important;
  }

  body.home-page .learning-card,
  body.home-page .benefit-card {
    background:
      radial-gradient(circle at 100% 0%, rgba(255, 216, 77, 0.14), transparent 34%),
      linear-gradient(155deg, rgba(255, 255, 255, 0.94), rgba(231, 245, 252, 0.82)) !important;
  }

  body.home-page .learning-grid > :nth-child(even),
  body.home-page .benefits-grid > :nth-child(even) {
    background:
      radial-gradient(circle at 100% 0%, rgba(72, 188, 165, 0.16), transparent 34%),
      linear-gradient(155deg, rgba(255, 255, 255, 0.94), rgba(232, 248, 242, 0.84)) !important;
  }

  body.home-page .discover-media img,
  body.home-page .moment-media img,
  body.home-page .day-moment-media img,
  body.home-page .gallery-card img {
    filter: saturate(1.04) contrast(1.015);
  }

  body.home-page .moment.is-story .moment-tag,
  body.home-page .day-moment-time {
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
    -webkit-backdrop-filter: blur(7px) saturate(130%) !important;
    backdrop-filter: blur(7px) saturate(130%) !important;
  }

  body.home-page .stat-public-card {
    background:
      radial-gradient(circle at 88% 10%, rgba(255, 216, 77, 0.16), transparent 34%),
      rgba(255, 255, 255, 0.86) !important;
  }

  body.home-page .stat-public-card:nth-child(2) strong {
    color: var(--mobile-blue) !important;
  }

  body.home-page .stat-public-card:nth-child(3) strong {
    color: #4c9c42 !important;
  }

  body.home-page .interest-section {
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow:
      0 24px 54px rgba(4, 58, 110, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  }

  .page-block,
  .page-image-block,
  .page-gallery-block,
  .media-card {
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.84) !important;
    background:
      radial-gradient(circle at 96% 0%, rgba(255, 216, 77, 0.12), transparent 30%),
      linear-gradient(155deg, rgba(255, 255, 255, 0.94), rgba(232, 245, 252, 0.82)) !important;
    box-shadow:
      0 14px 34px rgba(7, 63, 105, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  }

  .page-block:nth-child(even) {
    background:
      radial-gradient(circle at 96% 0%, rgba(72, 188, 165, 0.14), transparent 31%),
      linear-gradient(155deg, rgba(255, 255, 255, 0.94), rgba(232, 248, 243, 0.84)) !important;
  }

  .page-gallery img,
  .gallery-grid img,
  .media-frame {
    border: 2px solid rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 8px 22px rgba(7, 61, 101, 0.1) !important;
  }

  body[data-page="activities"] .detail-hero.activity-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(8, 35, 61, 0.08) 0%,
        rgba(8, 35, 61, 0.2) 52%,
        rgba(8, 35, 61, 0.84) 100%
      ) !important;
  }

  body[data-page="activities"] .activity-hero-copy {
    background:
      linear-gradient(145deg, rgba(8, 41, 69, 0.34), rgba(8, 41, 69, 0.18)) !important;
    box-shadow:
      0 16px 36px rgba(5, 28, 48, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    -webkit-backdrop-filter: blur(7px) saturate(120%) !important;
    backdrop-filter: blur(7px) saturate(120%) !important;
  }

  body[data-page="activities"] .activity-discovery,
  body[data-page="activities"] .activity-media-panel {
    border-color: rgba(255, 255, 255, 0.88) !important;
    box-shadow:
      0 17px 40px rgba(5, 55, 99, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  }

  body[data-page="activities"] .activity-search {
    border: 1px solid rgba(8, 116, 209, 0.12) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow:
      inset 0 2px 8px rgba(7, 67, 112, 0.05),
      0 5px 14px rgba(7, 67, 112, 0.05) !important;
  }

  body[data-page="activities"] .activity-story-card {
    border-top: 3px solid rgba(8, 116, 209, 0.32) !important;
  }

  body[data-page="activities"] .activity-story-card:nth-child(3n + 2) {
    border-top-color: rgba(255, 193, 40, 0.65) !important;
  }

  body[data-page="activities"] .activity-story-card:nth-child(3n + 3) {
    border-top-color: rgba(72, 188, 165, 0.62) !important;
  }

  body[data-page="activities"] .activity-photo-thumb,
  body[data-page="activities"] .activity-media-link {
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    box-shadow:
      0 10px 24px rgba(5, 55, 96, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  }

  body[data-page="spaces"] .fac-hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(20, 35, 25, 0.12) 0%,
        rgba(20, 35, 25, 0.03) 42%,
        rgba(20, 35, 25, 0.72) 100%
      ),
      radial-gradient(85% 55% at 82% 4%, rgba(192, 122, 87, 0.13), transparent 55%) !important;
  }

  body[data-page="spaces"] .fac-hero-inner .fac-wrap {
    background:
      linear-gradient(145deg, rgba(28, 52, 37, 0.3), rgba(28, 52, 37, 0.16)) !important;
    box-shadow:
      0 18px 42px rgba(16, 31, 22, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    -webkit-backdrop-filter: blur(7px) saturate(120%) !important;
    backdrop-filter: blur(7px) saturate(120%) !important;
  }

  body[data-page="spaces"] .fac-principle,
  body[data-page="spaces"] .fac-tour-media {
    border-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow:
      0 14px 34px rgba(43, 68, 49, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  }

  body[data-page="spaces"] .fac-gallery-cap {
    background:
      linear-gradient(180deg, rgba(20, 35, 25, 0.02), rgba(20, 35, 25, 0.84)) !important;
    -webkit-backdrop-filter: blur(2px) saturate(115%);
    backdrop-filter: blur(2px) saturate(115%);
  }

  .kindergarten-kicker {
    display: inline-flex !important;
    width: fit-content !important;
    padding: 6px 10px !important;
    border: 1px solid currentColor !important;
    border-radius: 999px !important;
    opacity: 0.92;
  }

  .kb-stage,
  .kb-subject,
  .kb-departure-zone,
  .kb-photo {
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow:
      0 12px 28px rgba(14, 35, 75, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
  }

  .dp-subnav {
    border-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow:
      0 14px 34px rgba(22, 48, 107, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  }

  .dp-root > section:not(.dp-blue) .dp-program-card,
  .dp-root > section:not(.dp-blue) .dp-extra-copy,
  .dp-root > section:not(.dp-blue) .dp-extra-list {
    border-color: rgba(255, 255, 255, 0.76) !important;
    box-shadow:
      0 14px 34px rgba(22, 48, 107, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  }

  .dp-blue .dp-program-card {
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.17),
      inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  }

  .dp-photo-grid figure {
    border: 2px solid rgba(255, 255, 255, 0.78) !important;
  }

  body.manage-page :is(
      .stat-card,
      .module-card,
      .editor-card,
      .dashboard-card,
      .section-preview-card,
      .page-list-panel,
      .page-builder-panel,
      .spaces-editor-card,
      .wizard-editor-panel
    ) {
    border-color: rgba(255, 255, 255, 0.82) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 96% 0%, rgba(255, 216, 77, 0.1), transparent 30%),
      linear-gradient(155deg, rgba(255, 255, 255, 0.95), rgba(235, 246, 252, 0.88)) !important;
    box-shadow:
      0 12px 28px rgba(5, 55, 99, 0.09),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  }

  body.manage-page :is(input, select, textarea) {
    border-color: rgba(7, 93, 181, 0.14) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: inset 0 2px 7px rgba(5, 55, 99, 0.04) !important;
  }

  body[data-page="activities"] .activity-modal,
  body[data-page="spaces"] .space-modal {
    z-index: 140 !important;
  }

  body[data-page="activities"] .activity-modal-card,
  body[data-page="spaces"] .space-modal-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-page="activities"] .activity-modal-close,
  body[data-page="spaces"] .space-modal-close {
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 10px) !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  body[data-page="spaces"] .space-modal {
    padding: 0 !important;
    overflow: hidden !important;
  }

  body[data-page="spaces"] .space-modal-card {
    grid-template-rows: minmax(210px, 38dvh) minmax(0, 1fr) !important;
  }

  body[data-page="spaces"] .space-modal-body {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  body[data-page="activities"] .activity-tabs button,
  body.home-page .moment-more {
    min-height: 44px !important;
  }

  body[data-page="philosophy"] .detail-hero:has(h1:empty) {
    display: none !important;
  }

  :is(
      .page-block,
      .activity-story-copy,
      .partner-card,
      .fac-tour-body,
      .kb-stage-copy,
      .dp-program-card,
      .site-footer
    ) {
    overflow-wrap: anywhere;
  }

  body[data-page="activities"] .activity-section-heading h2::before,
  body[data-page="activities"] .activity-media-heading h2::before,
  body[data-page="spaces"] .fac-h2::before,
  .kindergarten-section-head h2::before,
  .dp-extra-copy h2::before {
    display: block;
    width: 42px;
    height: 5px;
    margin-bottom: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mobile-sun), var(--mobile-mint));
    box-shadow: 0 4px 10px rgba(8, 116, 209, 0.12);
    content: "";
  }

  body.home-page .home-announcement {
    margin: 10px 0 28px !important;
    padding: 13px !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 96% 0%, rgba(255, 216, 77, 0.2), transparent 36%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(237, 247, 252, 0.78)) !important;
    box-shadow:
      0 14px 34px rgba(7, 62, 103, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
    backdrop-filter: blur(14px) saturate(135%) !important;
  }

  body.home-page .announcement-close {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .sitewide-announcement:not(.home-announcement) {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 8px 12px !important;
    width: calc(100% - 24px) !important;
    margin: 14px auto 8px !important;
    padding: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.86) !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 34px rgba(7, 62, 103, 0.12) !important;
  }

  .sitewide-announcement:not(.home-announcement) .announcement-label {
    grid-column: 1;
    justify-self: start;
  }

  .sitewide-announcement:not(.home-announcement) p,
  .sitewide-announcement:not(.home-announcement) .announcement-link {
    grid-column: 1 / -1;
  }

  .sitewide-announcement:not(.home-announcement) .announcement-close {
    grid-column: 2;
    grid-row: 1;
    width: 44px !important;
    height: 44px !important;
  }

  .site-footer:not(.rich-footer) {
    margin-top: 28px !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 26px 26px 0 0 !important;
  }

  .site-footer:not(.rich-footer) a {
    min-height: 44px;
  }

  .cookie-consent {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .cookie-settings-card,
  .privacy-doc-card {
    max-height: calc(100dvh - 20px) !important;
  }

  body[data-page="tour"] .tour-logo {
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    left: calc(10px + env(safe-area-inset-left, 0px)) !important;
  }

  body[data-page="tour"] .tour-controls {
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    right: calc(10px + env(safe-area-inset-right, 0px)) !important;
  }

  body[data-page="tour"] .tour-hotspot {
    width: 44px !important;
    height: 44px !important;
  }

  body[data-page="tour"] .tour-infobox {
    max-height: 40dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  body[data-page="tour"] .tour-infobox__close {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  body[data-page="tour"] .tour-carousel {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Homepage δράσεις: δύο mobile cards ανά σελίδα, με swipe και liquid-glass controls. */
@media (max-width: 900px) {
  body.home-page .moments-section.is-mobile-carousel {
    --moments-mobile-gap: 9px;
  }

  body.home-page .moments-section.is-mobile-carousel .moments-viewport {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  body.home-page .moments-grid.is-carousel.is-mobile-carousel {
    display: flex !important;
    grid-template-columns: none !important;
    grid-auto-flow: unset !important;
    align-items: stretch !important;
    gap: var(--moments-mobile-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 2px 1px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth !important;
    scroll-padding-inline: 1px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body.home-page .moments-grid.is-carousel.is-mobile-carousel::-webkit-scrollbar {
    display: none;
  }

  body.home-page .moments-grid.is-mobile-carousel > .moment,
  body.home-page .moments-grid.is-mobile-carousel > .moment.is-story {
    flex: 0 0 calc((100% - var(--moments-mobile-gap)) / 2) !important;
    display: flex !important;
    width: calc((100% - var(--moments-mobile-gap)) / 2) !important;
    max-width: calc((100% - var(--moments-mobile-gap)) / 2) !important;
    height: auto !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-self: stretch !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: always;
  }

  body.home-page .moments-grid.is-mobile-carousel > .moment:nth-child(odd) {
    scroll-snap-align: start !important;
  }

  body.home-page .moments-section.has-single-slide .moments-grid.is-mobile-carousel > .moment {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.home-page .moments-grid.is-mobile-carousel .moment-body {
    flex: 1 1 auto !important;
  }

  body.home-page .moments-grid.is-mobile-carousel .moment-more {
    margin-top: auto !important;
  }

  body.home-page .moments-section.is-mobile-carousel > .moments-carousel-controls {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    gap: 10px !important;
    width: min(100%, 390px) !important;
    margin: 12px auto 0 !important;
    padding: 9px !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 22px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(229, 244, 253, 0.74)) !important;
    box-shadow:
      0 14px 34px rgba(7, 59, 101, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
  }

  body.home-page .moments-section.is-mobile-carousel .moments-foot-arrow {
    display: grid !important;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    place-items: center !important;
    border: 1px solid rgba(8, 116, 209, 0.1) !important;
    color: #073a75 !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(224, 242, 253, 0.88)) !important;
    box-shadow:
      0 9px 20px rgba(8, 65, 120, 0.12),
      inset 0 1px 0 #fff !important;
    font-size: 1.55rem !important;
  }

  body.home-page .moments-section.is-mobile-carousel .moments-foot-arrow:disabled {
    opacity: 0.34 !important;
  }

  body.home-page .moments-section.is-mobile-carousel .moments-dots {
    display: flex !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  body.home-page .moments-section.is-mobile-carousel .moments-dot {
    position: relative !important;
    display: grid !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
  }

  body.home-page .moments-section.is-mobile-carousel .moments-dot::before {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: rgba(8, 116, 209, 0.24);
    content: "";
    transition: width 180ms ease, background 180ms ease, box-shadow 180ms ease;
  }

  body.home-page .moments-section.is-mobile-carousel .moments-dot.is-active::before {
    width: 27px !important;
    background: linear-gradient(90deg, #0874d1, #42bfa8) !important;
    box-shadow: 0 4px 10px rgba(8, 116, 209, 0.2);
  }

  body.home-page .moments-section.is-mobile-carousel .moments-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  body.home-page .moments-section.is-mobile-carousel .moments-carousel-controls .more-card {
    position: static !important;
    grid-column: 1 / -1 !important;
    display: inline-flex !important;
    width: 100% !important;
    min-height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 11px 18px !important;
    border: 1px solid rgba(8, 116, 209, 0.18) !important;
    border-radius: 15px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #0874d1, #07559d) !important;
    box-shadow: 0 10px 22px rgba(8, 88, 160, 0.2) !important;
    font-size: 0.86rem !important;
    font-weight: 900 !important;
    text-align: center !important;
  }

  body.home-page .moments-section.is-mobile-carousel .moments-carousel-controls .more-card::after {
    content: "→";
    font-size: 1.05rem;
  }

  body.home-page .moments-section.is-mobile-carousel .moments-arrow {
    display: none !important;
  }
}

/* «Μια μέρα στη Δροσοπηγή»: mobile winding constellation / day path. */
@keyframes mobileDaySunFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(5px) rotate(6deg);
  }
}

@media (max-width: 900px) {
  body.home-page .day-experience-section {
    position: relative !important;
    isolation: isolate;
    margin-bottom: 40px !important;
    padding: 18px 11px 20px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.88) !important;
    border-radius: 27px !important;
    background:
      radial-gradient(circle at 88% 7%, rgba(255, 215, 69, 0.34), transparent 24%),
      radial-gradient(circle at 10% 58%, rgba(69, 190, 169, 0.2), transparent 30%),
      linear-gradient(165deg, #eaf8ff 0%, #dff3ff 38%, #e9f8e9 72%, #fff2c9 100%) !important;
    box-shadow:
      0 20px 48px rgba(7, 62, 103, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  }

  body.home-page .day-experience-section::before {
    position: absolute !important;
    z-index: -1 !important;
    inset: -82px -72px auto auto !important;
    display: block !important;
    width: 210px !important;
    height: 210px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle, rgba(255, 216, 77, 0.48), rgba(255, 216, 77, 0.12) 48%, transparent 72%) !important;
    filter: blur(4px);
    content: "" !important;
    pointer-events: none;
  }

  body.home-page .day-experience-section::after {
    position: absolute !important;
    z-index: 3 !important;
    top: 28px !important;
    right: 22px !important;
    display: grid !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
    color: #7c5700 !important;
    background:
      radial-gradient(circle at 35% 30%, #fff3ae 0 12%, #ffd84d 40%, #f3b92e 100%) !important;
    box-shadow:
      0 12px 28px rgba(185, 125, 0, 0.18),
      0 0 0 8px rgba(255, 220, 84, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
    font-size: 1.65rem !important;
    line-height: 1 !important;
    animation: mobileDaySunFloat 4.8s ease-in-out infinite;
    content: "☀" !important;
    pointer-events: none;
  }

  body.home-page .day-experience-section .section-copy {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 13px !important;
    padding: 13px 72px 13px 13px !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 20px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(240, 250, 255, 0.5)) !important;
    box-shadow:
      0 12px 28px rgba(8, 65, 120, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
    backdrop-filter: blur(14px) saturate(135%) !important;
    text-align: left !important;
  }

  body.home-page .day-experience-section .section-copy .eyebrow {
    display: inline-flex !important;
    width: max-content !important;
    margin: 0 0 7px !important;
    padding: 5px 9px !important;
    border: 1px solid rgba(8, 116, 209, 0.1) !important;
    border-radius: 999px !important;
    color: #0b6592 !important;
    background: rgba(255, 255, 255, 0.66) !important;
    font-size: 0.61rem !important;
    letter-spacing: 0.12em !important;
  }

  body.home-page .day-experience-section .section-copy h2 {
    max-width: 15ch !important;
    margin: 0 0 6px !important;
    color: #083f70 !important;
    font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
    line-height: 1.02 !important;
    text-wrap: balance;
  }

  body.home-page .day-experience-section .section-copy > p:last-child {
    max-width: 38ch !important;
    margin: 0 !important;
    color: #43677c !important;
    font-size: 0.81rem !important;
    line-height: 1.42 !important;
  }

  body.home-page .day-experience-track {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 15px 7px 9px !important;
    overflow: visible !important;
    flex-direction: column !important;
    gap: 14px !important;
    counter-reset: mobile-day-stop;
    scroll-snap-type: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  body.home-page .day-experience-track::before {
    position: absolute;
    z-index: 0;
    inset: 6px 0;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 620' preserveAspectRatio='none'%3E%3Cpath d='M38 0 C300 92 24 208 284 310 C38 416 298 522 42 620' fill='none' stroke='%230874d1' stroke-opacity='.28' stroke-width='3' stroke-linecap='round' stroke-dasharray='8 11'/%3E%3C/svg%3E")
      center / 100% 100% no-repeat;
    content: "";
    pointer-events: none;
  }

  body.home-page .day-moment-card {
    --day-accent: #4ca9ee;
    --day-tint: rgba(218, 240, 255, 0.92);
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: clamp(92px, 25vw, 112px) minmax(0, 1fr) !important;
    width: min(92%, 520px) !important;
    max-width: min(92%, 520px) !important;
    min-height: clamp(142px, 39vw, 168px) !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: visible !important;
    align-self: flex-start !important;
    border: 1px solid rgba(255, 255, 255, 0.88) !important;
    border-radius: 24px !important;
    color: #103f67 !important;
    background:
      radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--day-accent) 18%, transparent), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.92), var(--day-tint)) !important;
    box-shadow:
      0 14px 30px rgba(8, 65, 120, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
    opacity: 1 !important;
    transform: none !important;
    cursor: default !important;
    counter-increment: mobile-day-stop;
  }

  body.home-page .day-moment-card:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) clamp(92px, 25vw, 112px) !important;
    align-self: flex-end !important;
  }

  body.home-page .day-moment-card:nth-child(2) {
    --day-accent: #f3bf32;
    --day-tint: rgba(255, 244, 202, 0.92);
  }

  body.home-page .day-moment-card:nth-child(3) {
    --day-accent: #43bca5;
    --day-tint: rgba(218, 247, 237, 0.92);
  }

  body.home-page .day-moment-card:nth-child(4n) {
    --day-accent: #8c86df;
    --day-tint: rgba(232, 230, 255, 0.92);
  }

  body.home-page .day-moment-card::before {
    position: absolute !important;
    z-index: 4 !important;
    top: 50% !important;
    right: -17px !important;
    left: auto !important;
    display: grid !important;
    width: 32px !important;
    height: 32px !important;
    place-items: center !important;
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: var(--day-accent) !important;
    box-shadow:
      0 0 0 6px color-mix(in srgb, var(--day-accent) 18%, transparent),
      0 8px 18px rgba(8, 65, 120, 0.15) !important;
    font-size: 0.63rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    transform: translate(50%, -50%) !important;
    content: counter(mobile-day-stop, decimal-leading-zero) !important;
  }

  body.home-page .day-moment-card::after {
    position: absolute !important;
    z-index: 3 !important;
    top: 50% !important;
    right: -17px !important;
    left: auto !important;
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    border: 1px solid color-mix(in srgb, var(--day-accent) 26%, transparent) !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--day-accent) 10%, transparent) !important;
    transform: translate(50%, -50%) !important;
    content: "" !important;
    pointer-events: none;
  }

  body.home-page .day-moment-card:nth-child(even)::before,
  body.home-page .day-moment-card:nth-child(even)::after {
    right: auto !important;
    left: -17px !important;
    transform: translate(-50%, -50%) !important;
  }

  body.home-page .day-moment-media {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 126px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 18px !important;
    background: #0b588d !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  }

  body.home-page .day-moment-card:nth-child(even) .day-moment-media {
    grid-column: 2 !important;
  }

  body.home-page .day-moment-media::after {
    background:
      linear-gradient(180deg, rgba(3, 44, 80, 0.02), rgba(3, 44, 80, 0.22)) !important;
  }

  body.home-page .day-moment-media video,
  body.home-page .day-moment-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body.home-page .day-moment-copy {
    position: relative !important;
    inset: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    min-width: 0 !important;
    padding: 10px 11px !important;
    align-self: center !important;
    flex-direction: column !important;
    justify-content: center !important;
    color: #103f67 !important;
  }

  body.home-page .day-moment-card:nth-child(even) .day-moment-copy {
    grid-column: 1 !important;
  }

  body.home-page .day-moment-time {
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 0 7px !important;
    padding: 5px 9px !important;
    border: 1px solid color-mix(in srgb, var(--day-accent) 34%, white) !important;
    border-radius: 999px !important;
    color: #0b4776 !important;
    background: rgba(255, 255, 255, 0.74) !important;
    box-shadow:
      0 6px 14px color-mix(in srgb, var(--day-accent) 16%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    text-shadow: none !important;
  }

  body.home-page .day-moment-time::before {
    background: var(--day-accent) !important;
    box-shadow: 0 0 8px color-mix(in srgb, var(--day-accent) 52%, transparent) !important;
  }

  body.home-page .day-moment-copy h3 {
    margin: 0 0 4px !important;
    overflow-wrap: anywhere;
    color: #0a3e68 !important;
    font-size: clamp(1rem, 4vw, 1.18rem) !important;
    line-height: 1.08 !important;
    text-shadow: none !important;
  }

  body.home-page .day-moment-copy p {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3 !important;
    color: #476878 !important;
    font-size: max(0.8rem, 13px) !important;
    line-height: 1.36 !important;
    text-shadow: none !important;
  }

  body.home-page .day-moment-placeholder {
    background:
      radial-gradient(circle at 45% 28%, rgba(255, 255, 255, 0.22), transparent 38%),
      linear-gradient(145deg, color-mix(in srgb, var(--day-accent) 82%, #3d8ed1), #075184) !important;
  }

  body.home-page .day-moment-placeholder::before {
    width: 62px !important;
    height: 62px !important;
    border: 1px solid rgba(255, 255, 255, 0.46) !important;
    background: rgba(255, 255, 255, 0.18) !important;
    box-shadow:
      0 12px 24px rgba(1, 36, 66, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  }

  body.home-page .day-moment-placeholder::after {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    color: #fff !important;
    filter: drop-shadow(0 3px 8px rgba(2, 35, 64, 0.28));
    font-size: 1.75rem !important;
    line-height: 1 !important;
    content: "☀" !important;
  }

  body.home-page .day-moment-card:nth-child(2) .day-moment-placeholder::after {
    content: "✦" !important;
  }

  body.home-page .day-moment-card:nth-child(3) .day-moment-placeholder::after {
    content: "☁" !important;
  }

  body.home-page .day-moment-card:nth-child(4n) .day-moment-placeholder::after {
    content: "☾" !important;
  }

  body.home-page .day-moment-card:hover,
  body.home-page .day-moment-card:focus-visible {
    transform: none !important;
    box-shadow:
      0 17px 36px rgba(8, 65, 120, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
  }

  body.home-page .day-moment-card:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--day-accent) 55%, white) !important;
    outline-offset: 3px !important;
  }
}

body.home-page .moments-status {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (hover: none) and (pointer: coarse) and (max-width: 900px) {
  :where(
      .button,
      .fac-btn,
      .moment-more,
      .activity-open,
      .activity-more,
      .childcare-contact-button,
      .mini-button,
      .primary-button,
      .secondary-button,
      .discover-card,
      .moment,
      .day-moment-card,
      .activity-story-card
    ):active {
    transform: scale(0.985) !important;
    filter: saturate(1.04);
  }
}

@media (min-width: 430px) and (max-width: 900px) {
  body.home-page .hero-actions {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr) !important;
  }
}

@media (max-width: 389px) {
  body.home-page .hero {
    grid-template-rows: clamp(276px, 82vw, 318px) auto !important;
  }

  body.home-page .hero-content {
    padding: 14px !important;
    border-radius: 19px !important;
  }

  body.home-page .moments-grid.is-mobile-carousel .moment-summary {
    display: none !important;
  }

  body.home-page .moments-grid.is-mobile-carousel .moment-tag {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.home-page .day-experience-section {
    padding-inline: 9px !important;
  }

  body.home-page .day-experience-section .section-copy {
    padding: 12px 60px 12px 12px !important;
  }

  body.home-page .day-experience-section::after {
    right: 17px !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 1.4rem !important;
  }

  body.home-page .day-moment-card {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    width: 94% !important;
    max-width: 94% !important;
    min-height: 142px !important;
  }

  body.home-page .day-moment-card:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 86px !important;
  }

  body.home-page .day-moment-copy {
    padding: 9px !important;
  }

  body.home-page .day-moment-copy p {
    -webkit-line-clamp: 2 !important;
    font-size: 0.78rem !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  body.home-page .moments-grid.is-carousel.is-mobile-carousel {
    scroll-behavior: auto !important;
  }

  body.home-page .day-experience-section::after {
    animation: none !important;
  }

  body.home-page .day-moment-card,
  body.home-page .day-moment-media video,
  body.home-page .day-moment-media img {
    transition: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) and (max-width: 900px) {
  .site-header,
  .nav-drawer,
  .activity-discovery,
  .activity-media-panel,
  .contact-modal-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #f4f9fc !important;
  }

  body.home-page .hero-content {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #064574 !important;
  }
}

/* Activities mobile editorial rhythm. */
@media (max-width: 900px) {
  body[data-page="activities"] .activity-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: 14px !important;
  }

  body[data-page="activities"] .activity-hero-stats span {
    display: grid !important;
    min-width: 0 !important;
    min-height: 48px !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 1px !important;
    padding: 6px 4px !important;
    border-radius: 14px !important;
    font-size: 0.66rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  body[data-page="activities"] .activity-hero-stats b {
    font-size: 0.98rem !important;
  }

  body[data-page="activities"] .activity-story-card {
    border-top-color: var(--activity-card-accent, #0874d1) !important;
  }

  body[data-page="activities"] .activity-story-card:not(.is-featured) {
    grid-column: span 1 !important;
  }

  body[data-page="activities"] .activity-rail.has-active-filter[data-visible-count="1"] .activity-story-card:not(.is-featured) {
    grid-column: 1 / -1 !important;
  }

  body[data-page="activities"] .activity-story-card.is-featured {
    grid-column: 1 / -1 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: clamp(220px, 56vw, 330px) minmax(0, auto) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-top: 0 !important;
    border-left: 5px solid var(--activity-card-accent, #ec6b5e) !important;
    background:
      linear-gradient(145deg, #fff 0%, var(--activity-card-soft, #f4f9fc) 100%) !important;
  }

  body[data-page="activities"] .activity-story-card.is-featured .activity-story-media {
    min-height: 0 !important;
  }

  body[data-page="activities"] .activity-story-card.is-featured .activity-story-copy {
    justify-content: start !important;
    padding: 18px !important;
  }

  body[data-page="activities"] .activity-story-card.is-featured .activity-story-copy h3 {
    display: block !important;
    margin: 15px 0 8px !important;
    overflow: visible !important;
    font-size: clamp(1.7rem, 7.5vw, 2.35rem) !important;
    line-height: 1 !important;
    -webkit-line-clamp: initial;
  }

  body[data-page="activities"] .activity-story-card.is-featured .activity-story-copy p {
    display: block !important;
    overflow: visible !important;
    font-size: 0.9rem !important;
    line-height: 1.58 !important;
    -webkit-line-clamp: initial;
  }

  body[data-page="activities"] .activity-story-card.is-featured .activity-story-meta {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body[data-page="activities"] .activity-story-card.is-featured .activity-story-meta-end {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  body[data-page="activities"] .activity-featured-label,
  body[data-page="activities"] .activity-story-gallery-count {
    top: 10px !important;
    min-height: 30px !important;
    padding: 6px 9px !important;
    font-size: 0.66rem !important;
  }

  body[data-page="activities"] .activity-featured-label {
    left: 10px !important;
  }

  body[data-page="activities"] .activity-story-gallery-count {
    right: 10px !important;
  }

  body[data-page="activities"] .activity-story-meta-end {
    gap: 3px !important;
  }

  body[data-page="activities"] .activity-story-reading {
    min-height: 20px !important;
    padding: 2px 6px !important;
    font-size: 0.64rem !important;
  }

  body[data-page="activities"] .activity-photo-grid,
  body[data-page="activities"] .activity-photo-grid.is-links {
    grid-auto-rows: 92px !important;
    grid-auto-flow: dense !important;
  }

  body[data-page="activities"] .activity-photo-thumb {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    aspect-ratio: auto !important;
  }

  body[data-page="activities"] .activity-photo-thumb.is-primary {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
  }

  body[data-page="activities"] .activity-article-facts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 11px !important;
  }

  body[data-page="activities"] .activity-article-facts span {
    min-width: 0 !important;
    min-height: 32px !important;
    justify-content: center !important;
    padding: 5px 7px !important;
    font-size: 0.68rem !important;
    text-align: center !important;
  }

  body[data-page="activities"] .activity-modal-gallery-wrap {
    margin-top: 24px !important;
    padding-top: 18px !important;
  }

  body[data-page="activities"] .activity-modal-gallery-wrap > header {
    align-items: start !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  body[data-page="activities"] .activity-reader-pagination button {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 78px !important;
    padding: 8px !important;
  }

  body[data-page="activities"] .activity-reader-pagination button:last-child {
    grid-template-columns: minmax(0, 1fr) 52px !important;
  }

  body[data-page="activities"] .activity-reader-pagination img,
  body[data-page="activities"] .activity-pagination-image-empty {
    width: 52px !important;
    height: 58px !important;
    border-radius: 7px !important;
  }

  body[data-page="activities"] .activity-reader-pagination-copy {
    gap: 4px !important;
  }

  body[data-page="activities"] .activity-reader-pagination-copy strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.78rem !important;
  }
}

@media (max-width: 620px) {
  body[data-page="activities"] .activity-rail {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body[data-page="activities"] .activity-story-card:not(.is-featured) {
    grid-column: 1 !important;
    grid-template-columns: minmax(126px, 40%) minmax(0, 1fr) !important;
    grid-template-rows: minmax(196px, auto) !important;
    min-height: 196px !important;
  }

  body[data-page="activities"] .activity-story-card:not(.is-featured) .activity-story-media {
    min-height: 100% !important;
  }

  body[data-page="activities"] .activity-story-card:not(.is-featured) .activity-story-copy {
    padding: 12px !important;
  }

  body[data-page="activities"] .activity-story-card:not(.is-featured) .activity-story-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  body[data-page="activities"] .activity-story-card:not(.is-featured) .activity-story-meta-end {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  body[data-page="activities"] .activity-story-card:not(.is-featured) .activity-story-meta time {
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-page="activities"] .activity-story-card:not(.is-featured) .activity-story-copy h3 {
    margin: 8px 0 5px !important;
    font-size: 1.12rem !important;
    line-height: 1.06 !important;
  }

  body[data-page="activities"] .activity-story-card:not(.is-featured) .activity-story-copy p {
    -webkit-line-clamp: 2;
    font-size: 0.75rem !important;
  }

  body[data-page="activities"] .activity-story-card:not(.is-featured) .activity-open {
    min-height: 38px !important;
    margin-top: auto !important;
    padding-top: 7px !important;
    font-size: 0.72rem !important;
  }

  body[data-page="activities"] .activity-story-card:not(.is-featured) .activity-story-icon {
    right: 8px !important;
    bottom: 8px !important;
    width: 34px !important;
    height: 34px !important;
  }

  body[data-page="activities"] .activity-story-card:not(.is-featured) .activity-story-gallery-count {
    top: 8px !important;
    right: 8px !important;
    left: 8px !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Activities: final responsive ownership for the wide finder and story reader. */
@media (max-width: 900px) {
  body[data-page="activities"] .activity-discovery {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: 8px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(239, 248, 251, 0.96)) !important;
    box-shadow:
      0 24px 54px rgba(23, 50, 77, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
    transform: none !important;
  }

  body[data-page="activities"] .activity-discovery::after {
    display: none !important;
  }

  body[data-page="activities"] .activity-discovery-heading {
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    padding: 0 0 16px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(23, 50, 77, 0.1) !important;
  }

  body[data-page="activities"] .activity-discovery-mark {
    width: 50px !important;
    height: 50px !important;
    border-radius: 8px !important;
    font-size: 1.25rem !important;
    box-shadow:
      6px 6px 0 rgba(78, 155, 210, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  body[data-page="activities"] .activity-discovery-heading-copy {
    gap: 5px !important;
  }

  body[data-page="activities"] .activity-discovery-heading h2 {
    max-width: none !important;
    margin: 0 !important;
    font-size: 2rem !important;
    line-height: 1.02 !important;
  }

  body[data-page="activities"] .activity-result-count {
    position: static !important;
    display: inline-flex !important;
    width: fit-content !important;
    min-height: 28px !important;
    align-items: center !important;
    margin: 3px 0 0 !important;
    padding: 4px 9px !important;
    border: 1px solid rgba(23, 50, 77, 0.1) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    font-size: 0.74rem !important;
  }

  body[data-page="activities"] .activity-search {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 56px !important;
    padding: 0 15px !important;
    border-radius: 8px !important;
  }

  body[data-page="activities"] .activity-discovery .activity-filterbar {
    grid-column: 1 !important;
    grid-row: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body[data-page="activities"] .activity-discovery .activity-filterbar button {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    white-space: normal !important;
  }

  body[data-page="activities"] .activity-discovery .activity-filterbar button:first-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  body[data-page="activities"] .activity-modal {
    align-items: center !important;
    justify-items: center !important;
    padding: 6px !important;
  }

  body[data-page="activities"] .activity-modal-backdrop {
    background:
      linear-gradient(145deg, rgba(5, 29, 49, 0.76), rgba(23, 50, 77, 0.62)) !important;
    backdrop-filter: blur(16px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  }

  body[data-page="activities"] .activity-modal-card {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(220px, 36dvh) minmax(0, 1fr) !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    height: calc(100dvh - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 18px !important;
    background: #f4fafb !important;
    box-shadow:
      0 28px 80px rgba(2, 22, 39, 0.46),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  }

  body[data-page="activities"] .activity-modal-card::before {
    border-radius: 18px !important;
  }

  body[data-page="activities"] .activity-modal-image {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 12px !important;
    border-bottom: 4px solid var(--activity-reader-accent, #ec6b5e) !important;
    background:
      linear-gradient(155deg, color-mix(in srgb, var(--activity-reader-soft, #fff0ed) 74%, #dbeaf0), #dce9ed 75%) !important;
  }

  body[data-page="activities"] .activity-main-photo {
    border: 4px solid rgba(255, 255, 255, 0.68) !important;
    border-radius: 10px !important;
    box-shadow:
      0 20px 44px rgba(8, 31, 50, 0.22),
      7px 7px 0 color-mix(in srgb, var(--activity-reader-accent, #ec6b5e) 18%, transparent) !important;
  }

  body[data-page="activities"] .activity-photo-story-tag {
    bottom: 18px !important;
    left: 18px !important;
    min-height: 32px !important;
    padding: 5px 9px !important;
    font-size: 0.7rem !important;
  }

  body[data-page="activities"] .activity-photo-count {
    right: 18px !important;
    bottom: 18px !important;
    padding: 6px 9px !important;
  }

  body[data-page="activities"] .activity-modal-close {
    top: max(18px, env(safe-area-inset-top)) !important;
    right: 18px !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    background: rgba(255, 255, 255, 0.86) !important;
    box-shadow: 0 10px 26px rgba(8, 31, 50, 0.18) !important;
  }

  body[data-page="activities"] .activity-modal-reader {
    min-height: 0 !important;
    border-left: 0 !important;
    background:
      linear-gradient(180deg, rgba(251, 254, 254, 0.98), rgba(235, 246, 249, 0.99)) !important;
  }

  body[data-page="activities"] .activity-reader-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 8px !important;
    min-height: 60px !important;
    padding: 9px 12px !important;
    border-bottom-color: color-mix(in srgb, var(--activity-reader-accent, #ec6b5e) 22%, transparent) !important;
    background: rgba(250, 253, 254, 0.94) !important;
  }

  body[data-page="activities"] .activity-reader-brand {
    min-width: 0 !important;
    gap: 7px !important;
    overflow: hidden !important;
    font-size: 0.72rem !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-page="activities"] .activity-reader-brand b {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
  }

  body[data-page="activities"] .activity-reader-index {
    min-height: 30px !important;
    padding: 5px 8px !important;
    font-size: 0.68rem !important;
  }

  body[data-page="activities"] .activity-share {
    width: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  body[data-page="activities"] .activity-share [data-share-label] {
    display: none !important;
  }

  body[data-page="activities"] .activity-modal-body {
    width: 100% !important;
    max-width: none !important;
    padding: 26px 16px calc(30px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-page="activities"] .activity-reader-number {
    top: 24px !important;
    right: 16px !important;
    font-size: 5rem !important;
    opacity: 0.065 !important;
  }

  body[data-page="activities"] .activity-modal-body h2 {
    position: relative !important;
    z-index: 1 !important;
    margin: 18px 0 17px !important;
    font-size: 2.2rem !important;
    line-height: 1 !important;
  }

  body[data-page="activities"] .activity-modal-body .activity-article-lead {
    position: relative !important;
    z-index: 1 !important;
    padding-left: 15px !important;
    border-left: 3px solid var(--activity-reader-accent, #ec6b5e) !important;
    font-size: 1rem !important;
    line-height: 1.62 !important;
  }

  body[data-page="activities"] .activity-article-facts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body[data-page="activities"] .activity-article-facts span {
    min-width: 0 !important;
    justify-content: center !important;
    padding: 6px 7px !important;
    text-align: center !important;
  }

  body[data-page="activities"] .activity-reader-pagination {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 34px !important;
  }

  body[data-page="activities"] .activity-reader-pagination button,
  body[data-page="activities"] .activity-reader-pagination button:last-child {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    min-height: 78px !important;
    padding: 8px !important;
    text-align: left !important;
  }

  body[data-page="activities"] .activity-reader-pagination button:last-child img {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body[data-page="activities"] .activity-reader-pagination button:last-child .activity-pagination-image-empty {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body[data-page="activities"] .activity-reader-pagination button:last-child .activity-reader-pagination-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-items: start !important;
  }

  body[data-page="activities"] .activity-reader-pagination img,
  body[data-page="activities"] .activity-pagination-image-empty {
    width: 62px !important;
    height: 62px !important;
  }
}

@media (max-width: 620px) {
  body[data-page="activities"] .activity-discovery .activity-filterbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 430px) {
  body[data-page="activities"] .activity-discovery {
    padding: 16px !important;
  }

  body[data-page="activities"] .activity-discovery-heading {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body[data-page="activities"] .activity-discovery-mark {
    width: 44px !important;
    height: 44px !important;
  }

  body[data-page="activities"] .activity-discovery-heading h2 {
    font-size: 1.82rem !important;
  }

  body[data-page="activities"] .activity-discovery .activity-filterbar button:first-child {
    grid-column: 1 / -1 !important;
  }

  body[data-page="activities"] .activity-modal-body h2 {
    font-size: 2rem !important;
  }
}

/* ============================================================
   Mobile Day Stories — vertical, windowed reel experience
   ============================================================ */
.day-story-entry,
.day-story-shell {
  display: none;
}

.day-story-entry[hidden],
.day-story-shell[hidden],
.day-story-track-anchor {
  display: none !important;
}

@keyframes dayStoryEntryFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-2deg);
  }
  50% {
    transform: translate3d(0, -7px, 0) rotate(2deg);
  }
}

@keyframes dayStoryOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dayStoryLaunchPulse {
  0%,
  100% {
    box-shadow:
      0 14px 28px rgba(1, 62, 111, 0.26),
      0 0 0 0 rgba(255, 216, 77, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.36);
  }
  55% {
    box-shadow:
      0 18px 34px rgba(1, 62, 111, 0.32),
      0 0 0 9px rgba(255, 216, 77, 0),
      inset 0 1px 0 rgba(255, 255, 255, 0.42);
  }
}

@keyframes dayStoryHand {
  0%,
  100% {
    transform: translateY(7px) rotate(-8deg);
  }
  55% {
    transform: translateY(-10px) rotate(2deg);
  }
}

@keyframes dayStoryOutroBloom {
  0% {
    opacity: 0;
    transform: scale(0.68) rotate(-7deg);
  }
  70% {
    opacity: 1;
    transform: scale(1.06) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes dayStoryOutroRise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dayStoryOutroTimer {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@keyframes dayStoryReturnFlare {
  0% {
    box-shadow:
      0 20px 48px rgba(7, 62, 103, 0.13),
      0 0 0 0 rgba(255, 216, 77, 0.54);
  }
  55% {
    box-shadow:
      0 24px 58px rgba(7, 62, 103, 0.18),
      0 0 0 14px rgba(255, 216, 77, 0);
  }
  100% {
    box-shadow:
      0 20px 48px rgba(7, 62, 103, 0.13),
      0 0 0 0 rgba(255, 216, 77, 0);
  }
}

@media (max-width: 900px) {
  body.day-story-open {
    overscroll-behavior: none !important;
  }

  body.home-page .day-experience-section.has-day-story-viewer {
    padding: 10px !important;
    border-radius: 29px !important;
    background:
      radial-gradient(circle at 92% 4%, rgba(255, 216, 77, 0.4), transparent 25%),
      radial-gradient(circle at 6% 92%, rgba(78, 192, 174, 0.26), transparent 31%),
      linear-gradient(157deg, #eaf8ff 0%, #e0f3ff 43%, #eff8e6 76%, #fff4ca 100%) !important;
  }

  body.home-page .day-experience-section.has-day-story-viewer::after {
    display: none !important;
  }

  body.home-page .day-experience-section.has-day-story-viewer .section-copy {
    display: none !important;
  }

  body.home-page .day-experience-section.has-day-story-viewer .section-copy h2 {
    max-width: 19ch !important;
  }

  body.home-page .day-experience-section.has-day-story-viewer > .day-experience-track {
    display: none !important;
  }

  body.home-page .day-story-entry {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 13px 16px;
    width: 100%;
    min-height: 236px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 24px;
    color: #fff;
    background:
      radial-gradient(circle at 12% 12%, rgba(99, 204, 255, 0.26), transparent 32%),
      radial-gradient(circle at 89% 102%, rgba(255, 215, 69, 0.22), transparent 38%),
      linear-gradient(145deg, #073b66 0%, #075990 54%, #0b7895 100%);
    box-shadow:
      0 20px 44px rgba(2, 53, 91, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
    isolation: isolate;
  }

  body.home-page .day-story-entry::before,
  body.home-page .day-story-entry::after {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    content: "";
    pointer-events: none;
  }

  body.home-page .day-story-entry::before {
    top: -68px;
    right: -48px;
    width: 176px;
    height: 176px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
      0 0 0 22px rgba(255, 255, 255, 0.035),
      0 0 0 48px rgba(255, 255, 255, 0.022);
  }

  body.home-page .day-story-entry::after {
    bottom: -72px;
    left: 24%;
    width: 170px;
    height: 170px;
    background: rgba(67, 188, 165, 0.15);
    filter: blur(1px);
  }

  body.home-page .day-story-entry-visual {
    position: relative;
    display: grid;
    min-width: 0;
    place-items: center;
    align-self: stretch;
  }

  body.home-page .day-story-entry-orbit {
    position: absolute;
    width: 108px;
    height: 108px;
    border: 1px dashed rgba(255, 224, 106, 0.5);
    border-radius: 50%;
    animation: dayStoryOrbit 16s linear infinite;
  }

  body.home-page .day-story-entry-orbit::before {
    position: absolute;
    top: 4px;
    left: 17px;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background: #ffd84d;
    box-shadow: 0 0 18px rgba(255, 216, 77, 0.76);
    content: "";
  }

  body.home-page .day-story-entry-phone {
    position: relative;
    display: grid;
    width: 84px;
    height: 154px;
    padding: 10px 8px;
    overflow: hidden;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.68);
    border-radius: 24px;
    background:
      radial-gradient(circle at 50% 62%, rgba(255, 216, 77, 0.26), transparent 30%),
      linear-gradient(170deg, rgba(255, 255, 255, 0.24), rgba(2, 36, 65, 0.22));
    box-shadow:
      0 20px 32px rgba(1, 29, 54, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    backdrop-filter: blur(12px) saturate(130%);
    animation: dayStoryEntryFloat 4.6s ease-in-out infinite;
  }

  body.home-page .day-story-entry-bars {
    position: absolute;
    top: 9px;
    right: 8px;
    left: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
  }

  body.home-page .day-story-entry-bars i {
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.38);
  }

  body.home-page .day-story-entry-bars i:first-child {
    background: #ffd84d;
    box-shadow: 0 0 8px rgba(255, 216, 77, 0.56);
  }

  body.home-page .day-story-entry-glow {
    position: absolute;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(255, 216, 77, 0.16);
    filter: blur(1px);
  }

  body.home-page .day-story-entry-phone img {
    position: relative;
    z-index: 1;
    width: 62px;
    height: 62px;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0, 31, 57, 0.24));
  }

  body.home-page .day-story-entry-time {
    position: absolute;
    right: 8px;
    bottom: 9px;
    padding: 3px 6px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(2, 35, 63, 0.22);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.06em;
  }

  body.home-page .day-story-entry-copy {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
  }

  body.home-page .day-story-entry-meta {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: rgba(225, 246, 255, 0.86);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  body.home-page .day-story-entry-meta i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #ffd84d;
    box-shadow: 0 0 0 5px rgba(255, 216, 77, 0.11);
  }

  body.home-page .day-story-entry-copy h3 {
    margin: 0 0 7px;
    color: #fff;
    font-size: clamp(1.28rem, 5.4vw, 1.72rem);
    line-height: 0.99;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  body.home-page .day-story-entry-copy p {
    margin: 0 0 12px;
    color: rgba(225, 244, 252, 0.82);
    font-size: max(0.73rem, 12px);
    line-height: 1.38;
  }

  body.home-page .day-story-launch {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) 36px;
    align-items: center;
    gap: 8px;
    padding: 6px 7px 6px 15px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 16px;
    color: #083f6d;
    background:
      linear-gradient(135deg, #fff2a9 0%, #ffd84d 58%, #f7c33a 100%);
    box-shadow:
      0 14px 28px rgba(1, 62, 111, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.42);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 950;
    text-align: left;
    cursor: pointer;
    animation: dayStoryLaunchPulse 3.4s ease-in-out infinite;
  }

  body.home-page .day-story-launch::before {
    position: absolute;
    top: -60%;
    left: -35%;
    width: 30%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.66), transparent);
    transform: rotate(18deg);
    transition: left 520ms ease;
    content: "";
  }

  body.home-page .day-story-launch:active::before {
    left: 120%;
  }

  body.home-page .day-story-launch b {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.66);
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, #0874d1, #07558f);
    box-shadow: 0 7px 14px rgba(4, 71, 121, 0.22);
    font-size: 1rem;
  }

  body.home-page .day-story-launch:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
  }

  body.home-page .day-story-entry-times {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    overflow: hidden;
  }

  body.home-page .day-story-entry-times::before {
    position: absolute;
    z-index: -1;
    right: 7px;
    left: 7px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 216, 77, 0.56), rgba(255, 255, 255, 0.18));
    content: "";
  }

  body.home-page .day-story-entry-times span {
    min-width: 0;
    flex: 1 1 0;
    padding: 4px 5px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: rgba(235, 249, 255, 0.78);
    background: rgba(2, 39, 69, 0.32);
    font-size: 0.56rem;
    font-weight: 850;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  body.home-page .day-story-entry-times span.is-first {
    border-color: rgba(255, 225, 105, 0.48);
    color: #fff6c8;
    background: rgba(185, 126, 5, 0.32);
  }

  body.home-page .day-story-shell {
    position: fixed;
    z-index: 2147483000;
    inset: 0;
    display: grid;
    width: 100%;
    height: 100%;
    padding:
      max(6px, env(safe-area-inset-top))
      max(6px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left));
    place-items: center;
    overflow: hidden;
    opacity: 0;
    transition: opacity 280ms ease;
  }

  body.home-page .day-story-shell.is-open {
    opacity: 1;
  }

  body.home-page .day-story-shell.is-leaving {
    opacity: 0;
  }

  body.home-page .day-story-backdrop {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 50% 12%, rgba(24, 123, 174, 0.34), transparent 34%),
      linear-gradient(145deg, rgba(1, 20, 37, 0.88), rgba(2, 42, 66, 0.79));
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
  }

  body.home-page .day-story-window {
    position: relative;
    display: grid;
    width: min(438px, calc(100vw - 12px));
    height: min(860px, calc(100dvh - 12px));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 30px;
    color: #fff;
    background: #062b48;
    box-shadow:
      0 34px 100px rgba(0, 11, 24, 0.62),
      0 0 0 1px rgba(255, 255, 255, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.36);
    transform: translateY(18px) scale(0.965);
    transition: transform 420ms cubic-bezier(0.2, 0.86, 0.25, 1);
    isolation: isolate;
  }

  body.home-page .day-story-shell.is-open .day-story-window {
    transform: translateY(0) scale(1);
  }

  body.home-page .day-story-chrome {
    position: absolute;
    z-index: 20;
    top: 0;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 46px;
    align-items: center;
    gap: 8px;
    min-height: 76px;
    padding:
      max(13px, env(safe-area-inset-top))
      13px
      20px;
    background: linear-gradient(180deg, rgba(1, 23, 41, 0.78), rgba(1, 23, 41, 0));
    pointer-events: none;
  }

  body.home-page .day-story-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.home-page .day-story-brand-mark {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 10px;
    color: #fff5b4;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 0.9rem;
    text-transform: lowercase;
  }

  body.home-page .day-story-counter {
    min-width: 48px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(2, 29, 51, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.17);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 0.62rem;
    font-weight: 900;
    text-align: center;
  }

  body.home-page .day-story-close {
    position: relative;
    z-index: 3;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    box-shadow:
      0 10px 24px rgba(0, 17, 32, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font: inherit;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
  }

  body.home-page .day-story-close:focus-visible,
  body.home-page .day-story-tool:focus-visible,
  body.home-page .day-story-progress-step:focus-visible,
  body.home-page .day-story-outro button:focus-visible {
    outline: 3px solid #ffd84d;
    outline-offset: 2px;
  }

  body.home-page .day-story-progress {
    position: absolute;
    right: 14px;
    bottom: 3px;
    left: 14px;
    display: flex;
    gap: 5px;
    pointer-events: auto;
  }

  body.home-page .day-story-progress-step {
    position: relative;
    min-width: 0;
    height: 20px;
    flex: 1 1 0;
    padding: 8px 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  body.home-page .day-story-progress-step span {
    display: block;
    width: 100%;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
    transition:
      height 220ms ease,
      background 220ms ease,
      box-shadow 220ms ease;
  }

  body.home-page .day-story-progress-step.is-current span {
    height: 4px;
    background: #ffd84d;
    box-shadow: 0 0 12px rgba(255, 216, 77, 0.68);
  }

  body.home-page .day-story-progress-step.is-complete span {
    background: rgba(255, 240, 171, 0.84);
  }

  body.home-page .day-story-viewport {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
  }

  body.home-page .day-story-shell .day-experience-track {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: #062b48 !important;
    counter-reset: none !important;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory !important;
    scrollbar-width: none;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y pinch-zoom;
  }

  body.home-page .day-story-shell .day-experience-track::-webkit-scrollbar {
    display: none !important;
  }

  body.home-page .day-story-shell .day-experience-track::before {
    display: none !important;
    content: none !important;
  }

  body.home-page .day-story-shell .day-experience-track > .day-moment-card {
    --day-story-accent: #6cc9ff;
    --day-story-glow: rgba(53, 169, 230, 0.28);
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex: 0 0 100% !important;
    align-self: stretch !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    background:
      radial-gradient(circle at 15% 22%, var(--day-story-glow), transparent 34%),
      radial-gradient(circle at 90% 84%, rgba(255, 216, 77, 0.14), transparent 32%),
      linear-gradient(160deg, #062c4b 0%, #075a85 56%, #063653 100%) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    cursor: default !important;
  }

  body.home-page .day-story-shell .day-experience-track > .day-moment-card:nth-child(2) {
    --day-story-accent: #ffd84d;
    --day-story-glow: rgba(255, 196, 43, 0.24);
    background:
      radial-gradient(circle at 82% 23%, var(--day-story-glow), transparent 35%),
      radial-gradient(circle at 12% 80%, rgba(89, 184, 165, 0.18), transparent 32%),
      linear-gradient(158deg, #173b55 0%, #166f83 58%, #16475c 100%) !important;
  }

  body.home-page .day-story-shell .day-experience-track > .day-moment-card:nth-child(3) {
    --day-story-accent: #69dfbf;
    --day-story-glow: rgba(63, 195, 161, 0.25);
    background:
      radial-gradient(circle at 16% 26%, var(--day-story-glow), transparent 35%),
      radial-gradient(circle at 88% 83%, rgba(85, 148, 222, 0.2), transparent 32%),
      linear-gradient(158deg, #073e51 0%, #0f746f 56%, #0a4252 100%) !important;
  }

  body.home-page .day-story-shell .day-experience-track > .day-moment-card:nth-child(4n) {
    --day-story-accent: #c7b8ff;
    --day-story-glow: rgba(170, 145, 236, 0.26);
    background:
      radial-gradient(circle at 84% 18%, var(--day-story-glow), transparent 34%),
      radial-gradient(circle at 12% 84%, rgba(255, 216, 77, 0.13), transparent 32%),
      linear-gradient(158deg, #162f52 0%, #33598c 58%, #1b365b 100%) !important;
  }

  body.home-page .day-story-shell .day-moment-card::before,
  body.home-page .day-story-shell .day-moment-card::after {
    display: none !important;
    content: none !important;
  }

  body.home-page .day-story-shell .day-moment-media {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.home-page .day-story-shell .day-moment-media::before {
    position: absolute !important;
    z-index: 0 !important;
    inset: 12% -22% auto !important;
    display: block !important;
    width: auto !important;
    height: 58% !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle, var(--day-story-glow), transparent 68%) !important;
    filter: blur(28px);
    content: "" !important;
    pointer-events: none;
  }

  body.home-page .day-story-shell .day-moment-media::after {
    position: absolute !important;
    z-index: 2 !important;
    inset: 0 !important;
    display: block !important;
    background:
      linear-gradient(180deg, rgba(1, 18, 33, 0.46) 0%, transparent 22%, transparent 58%, rgba(1, 21, 37, 0.3) 72%, rgba(1, 20, 35, 0.86) 100%) !important;
    content: "" !important;
    pointer-events: none;
  }

  body.home-page .day-story-shell .day-moment-media video {
    position: absolute !important;
    z-index: 1 !important;
    top: 49% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: min(calc(100% - 28px), 50dvh, 400px) !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 5;
    object-fit: cover !important;
    object-position: center center !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 22px !important;
    background: rgba(0, 17, 30, 0.46) !important;
    box-shadow:
      0 26px 58px rgba(0, 17, 32, 0.38),
      0 0 0 1px rgba(255, 255, 255, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    transform: translate(-50%, -52%) !important;
  }

  body.home-page .day-story-shell .day-moment-media img {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }

  body.home-page .day-story-shell .day-moment-placeholder {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    place-items: center !important;
    background:
      radial-gradient(circle at 50% 42%, var(--day-story-glow), transparent 30%),
      transparent !important;
  }

  body.home-page .day-story-shell .day-moment-copy {
    position: absolute !important;
    z-index: 4 !important;
    inset: 0 !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding:
      max(88px, calc(env(safe-area-inset-top) + 78px))
      15px
      max(18px, env(safe-area-inset-bottom)) !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    color: #fff !important;
    pointer-events: none;
  }

  body.home-page .day-story-shell .day-moment-time {
    position: absolute !important;
    top: max(86px, calc(env(safe-area-inset-top) + 78px)) !important;
    right: 14px !important;
    display: inline-flex !important;
    width: max-content !important;
    max-width: calc(100% - 28px) !important;
    min-height: 30px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.26) !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    background: rgba(2, 28, 49, 0.28) !important;
    box-shadow:
      0 9px 22px rgba(0, 19, 35, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
    backdrop-filter: blur(14px) saturate(125%) !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
    text-shadow: none !important;
  }

  body.home-page .day-story-shell .day-moment-time::before {
    width: 6px !important;
    height: 6px !important;
    background: var(--day-story-accent) !important;
    box-shadow: 0 0 10px var(--day-story-accent) !important;
  }

  body.home-page .day-story-shell .day-moment-copy h3 {
    width: calc(100% - 54px) !important;
    margin: 0 !important;
    padding: 14px 15px 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    color: #fff !important;
    background: rgba(3, 31, 52, 0.56) !important;
    box-shadow:
      0 -12px 34px rgba(0, 22, 40, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
    backdrop-filter: blur(18px) saturate(125%) !important;
    font-size: clamp(1.32rem, 6vw, 1.85rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;
    text-shadow: 0 2px 14px rgba(0, 18, 34, 0.3) !important;
    text-wrap: balance;
  }

  body.home-page .day-story-shell .day-moment-copy p {
    display: block !important;
    width: calc(100% - 54px) !important;
    max-height: min(23dvh, 170px) !important;
    margin: 0 !important;
    padding: 0 15px 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overflow-wrap: anywhere;
    overscroll-behavior: contain;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-top: 0 !important;
    border-radius: 0 0 18px 18px !important;
    color: rgba(236, 248, 253, 0.88) !important;
    background: rgba(3, 31, 52, 0.56) !important;
    -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
    backdrop-filter: blur(18px) saturate(125%) !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: initial !important;
    font-size: max(0.82rem, 13px) !important;
    hyphens: auto;
    line-height: 1.42 !important;
    text-shadow: 0 1px 9px rgba(0, 18, 34, 0.28) !important;
    pointer-events: auto;
  }

  body.home-page .day-story-tools {
    position: absolute;
    z-index: 18;
    right: 14px;
    bottom: max(23px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  body.home-page .day-story-tool {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.27);
    border-radius: 50%;
    color: #fff;
    background: rgba(2, 27, 47, 0.44);
    box-shadow:
      0 10px 24px rgba(0, 17, 32, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.19);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 950;
    cursor: pointer;
  }

  body.home-page .day-story-tool[hidden] {
    display: none !important;
  }

  body.home-page .day-story-tool.has-sound {
    color: #17384f;
    background: #ffd84d;
  }

  body.home-page .day-story-hand {
    position: absolute;
    z-index: 16;
    top: 61%;
    left: 50%;
    display: grid;
    min-width: 176px;
    padding: 12px 16px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 19px;
    color: #fff;
    background: rgba(2, 31, 53, 0.64);
    box-shadow:
      0 18px 42px rgba(0, 17, 32, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
    opacity: 0;
    transform: translate(-50%, 18px) scale(0.96);
    transition:
      opacity 260ms ease,
      transform 360ms cubic-bezier(0.2, 0.86, 0.25, 1);
    pointer-events: none;
  }

  body.home-page .day-story-hand.is-visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  body.home-page .day-story-hand-icon {
    margin-bottom: 3px;
    filter: drop-shadow(0 6px 10px rgba(0, 18, 34, 0.3));
    font-size: 1.9rem;
    animation: dayStoryHand 1.25s ease-in-out infinite;
  }

  body.home-page .day-story-hand strong {
    font-size: 0.76rem;
    line-height: 1.2;
  }

  body.home-page .day-story-hand small {
    margin-top: 2px;
    color: rgba(231, 246, 252, 0.74);
    font-size: 0.62rem;
  }

  body.home-page .day-story-shell .day-experience-track > .day-story-outro {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-height: 100%;
    height: 100%;
    padding:
      max(88px, calc(env(safe-area-inset-top) + 78px))
      24px
      max(24px, env(safe-area-inset-bottom));
    overflow: hidden;
    flex: 0 0 100%;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    background:
      radial-gradient(circle at 50% 28%, rgba(255, 216, 77, 0.23), transparent 30%),
      radial-gradient(circle at 8% 88%, rgba(70, 198, 171, 0.21), transparent 30%),
      linear-gradient(158deg, #062b48 0%, #075e7c 58%, #073a5d 100%);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    text-align: center;
    isolation: isolate;
  }

  body.home-page .day-story-outro-sky {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
  }

  body.home-page .day-story-outro-sky::before,
  body.home-page .day-story-outro-sky::after {
    position: absolute;
    border-radius: 50%;
    content: "";
  }

  body.home-page .day-story-outro-sky::before {
    top: 12%;
    left: 50%;
    width: min(78vw, 330px);
    height: min(78vw, 330px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      0 0 0 30px rgba(255, 255, 255, 0.025),
      0 0 0 64px rgba(255, 255, 255, 0.018);
    transform: translateX(-50%);
  }

  body.home-page .day-story-outro-sky::after {
    right: -20%;
    bottom: -12%;
    width: 260px;
    height: 260px;
    background: rgba(255, 216, 77, 0.08);
    filter: blur(4px);
  }

  body.home-page .day-story-outro-sky i {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff3aa;
    box-shadow: 0 0 14px rgba(255, 230, 122, 0.8);
  }

  body.home-page .day-story-outro-sky i:nth-child(1) {
    top: 21%;
    left: 17%;
  }

  body.home-page .day-story-outro-sky i:nth-child(2) {
    top: 31%;
    right: 16%;
    width: 4px;
    height: 4px;
  }

  body.home-page .day-story-outro-sky i:nth-child(3) {
    right: 27%;
    bottom: 24%;
    width: 5px;
    height: 5px;
  }

  body.home-page .day-story-outro-logo {
    position: relative;
    display: grid;
    width: 132px;
    height: 132px;
    margin-bottom: 23px;
    place-items: center;
    opacity: 0;
    transform: scale(0.68);
  }

  body.home-page .day-story-outro.is-active .day-story-outro-logo {
    animation: dayStoryOutroBloom 900ms 140ms cubic-bezier(0.2, 0.9, 0.24, 1) forwards;
  }

  body.home-page .day-story-outro-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 238, 168, 0.42);
    border-radius: 50%;
    box-shadow:
      0 0 0 12px rgba(255, 216, 77, 0.06),
      0 0 45px rgba(255, 216, 77, 0.19),
      inset 0 0 30px rgba(255, 216, 77, 0.1);
  }

  body.home-page .day-story-outro-ring::before,
  body.home-page .day-story-outro-ring::after {
    position: absolute;
    border-radius: 50%;
    content: "";
  }

  body.home-page .day-story-outro-ring::before {
    top: -5px;
    left: 34px;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.76);
    background: #ffd84d;
    box-shadow: 0 0 16px rgba(255, 216, 77, 0.74);
  }

  body.home-page .day-story-outro-ring::after {
    right: 8px;
    bottom: 19px;
    width: 8px;
    height: 8px;
    background: #71dfbf;
    box-shadow: 0 0 14px rgba(89, 220, 183, 0.72);
  }

  body.home-page .day-story-outro-logo img {
    position: relative;
    z-index: 1;
    width: 96px;
    height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 14px 20px rgba(0, 22, 40, 0.26));
  }

  body.home-page .day-story-outro-logo strong {
    position: relative;
    z-index: 1;
    color: #fff7c8;
    font-size: 3.7rem;
    line-height: 1;
  }

  body.home-page .day-story-outro-kicker,
  body.home-page .day-story-outro h2,
  body.home-page .day-story-outro > p:not(.day-story-outro-kicker),
  body.home-page .day-story-outro-actions,
  body.home-page .day-story-outro-stay {
    opacity: 0;
    transform: translateY(24px);
  }

  body.home-page .day-story-outro.is-active .day-story-outro-kicker,
  body.home-page .day-story-outro.is-active h2,
  body.home-page .day-story-outro.is-active > p:not(.day-story-outro-kicker),
  body.home-page .day-story-outro.is-active .day-story-outro-actions,
  body.home-page .day-story-outro.is-active .day-story-outro-stay {
    animation: dayStoryOutroRise 620ms cubic-bezier(0.2, 0.86, 0.25, 1) forwards;
  }

  body.home-page .day-story-outro.is-active .day-story-outro-kicker {
    animation-delay: 520ms;
  }

  body.home-page .day-story-outro.is-active h2 {
    animation-delay: 620ms;
  }

  body.home-page .day-story-outro.is-active > p:not(.day-story-outro-kicker) {
    animation-delay: 720ms;
  }

  body.home-page .day-story-outro.is-active .day-story-outro-actions {
    animation-delay: 820ms;
  }

  body.home-page .day-story-outro.is-active .day-story-outro-stay {
    animation-delay: 900ms;
  }

  body.home-page .day-story-outro-kicker {
    margin: 0 0 9px;
    color: #ffe987;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  body.home-page .day-story-outro h2 {
    max-width: 12ch;
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(2rem, 9vw, 2.8rem);
    line-height: 0.94;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  body.home-page .day-story-outro > p:not(.day-story-outro-kicker) {
    max-width: 30ch;
    margin: 0 0 24px;
    color: rgba(231, 247, 253, 0.8);
    font-size: 0.84rem;
    line-height: 1.48;
  }

  body.home-page .day-story-outro-actions {
    display: grid;
    width: min(100%, 310px);
    gap: 8px;
  }

  body.home-page .day-story-outro-actions button,
  body.home-page .day-story-outro-stay {
    min-height: 46px;
    border-radius: 15px;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 900;
    cursor: pointer;
  }

  body.home-page .day-story-outro-return {
    border: 1px solid rgba(255, 255, 255, 0.58);
    color: #123e5c;
    background: linear-gradient(135deg, #fff3b1, #ffd84d);
    box-shadow:
      0 14px 28px rgba(0, 29, 52, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.48);
  }

  body.home-page .day-story-outro-replay {
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  body.home-page .day-story-outro-stay {
    min-height: 40px;
    margin-top: 8px;
    padding: 6px 14px;
    border: 0;
    color: rgba(229, 246, 252, 0.72);
    background: transparent;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.26);
    text-underline-offset: 4px;
  }

  body.home-page .day-story-outro-timer {
    position: absolute;
    right: 22px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 22px;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
  }

  body.home-page .day-story-outro-timer i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #65dcb9, #ffd84d);
    transform: scaleX(1);
    transform-origin: left;
  }

  body.home-page .day-story-outro.is-counting .day-story-outro-timer i {
    animation: dayStoryOutroTimer 6.2s linear forwards;
  }

  body.home-page .day-experience-section.day-story-return-flare {
    animation: dayStoryReturnFlare 1.45s ease-out;
  }
}

@media (max-width: 360px) {
  body.home-page .day-story-entry {
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 11px 12px;
    min-height: 224px;
    padding: 13px;
  }

  body.home-page .day-story-entry-phone {
    width: 74px;
    height: 140px;
    border-radius: 21px;
  }

  body.home-page .day-story-entry-orbit {
    width: 96px;
    height: 96px;
  }

  body.home-page .day-story-entry-copy h3 {
    font-size: 1.25rem;
  }

  body.home-page .day-story-entry-copy p {
    font-size: 0.7rem;
  }

  body.home-page .day-story-launch {
    padding-left: 12px;
    font-size: 0.74rem;
  }

  body.home-page .day-story-window {
    width: calc(100vw - 8px);
    height: calc(100dvh - 8px);
    border-radius: 25px;
  }

  body.home-page .day-story-brand {
    font-size: 0.62rem;
  }
}

@media (max-height: 640px) and (max-width: 900px) {
  body.home-page .day-story-window {
    width: calc(100vw - 8px);
    height: calc(100dvh - 8px);
    border-radius: 22px;
  }

  body.home-page .day-story-shell .day-experience-track {
    scroll-snap-type: y mandatory !important;
  }

  body.home-page .day-story-chrome {
    min-height: 66px;
    padding-bottom: 17px;
  }

  body.home-page .day-story-shell .day-moment-time {
    top: 73px !important;
  }

  body.home-page .day-story-shell .day-moment-copy {
    padding-top: 73px !important;
  }

  body.home-page .day-story-shell .day-moment-media video {
    top: 46% !important;
    width: min(calc(100% - 28px), 49dvh, 400px) !important;
    max-height: none !important;
    transform: translate(-50%, -50%) !important;
  }

  body.home-page .day-story-shell .has-day-story-video-error .day-moment-media video {
    display: none !important;
  }

  body.home-page .day-story-shell .day-moment-copy h3 {
    padding-top: 10px !important;
    font-size: 1.24rem !important;
  }

  body.home-page .day-story-shell .day-moment-copy p {
    max-height: 104px !important;
    padding-bottom: 10px !important;
    font-size: 0.76rem !important;
  }

  body.home-page .day-story-hand {
    top: 55%;
  }

  body.home-page .day-story-outro-logo {
    width: 94px;
    height: 94px;
    margin-bottom: 12px;
  }

  body.home-page .day-story-outro-logo img {
    width: 70px;
    height: 70px;
  }

  body.home-page .day-story-outro h2 {
    font-size: 1.8rem;
  }

  body.home-page .day-story-outro > p:not(.day-story-outro-kicker) {
    margin-bottom: 12px;
  }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 900px) {
  body.home-page .day-story-window {
    width: min(760px, calc(100vw - 8px));
  }

  body.home-page .day-story-shell .day-moment-media video {
    right: auto !important;
    left: 10% !important;
    width: 80% !important;
    aspect-ratio: 16 / 9;
    max-height: 62% !important;
    object-fit: cover !important;
    transform: translateY(-50%) !important;
  }

  body.home-page .day-story-shell .day-moment-copy h3,
  body.home-page .day-story-shell .day-moment-copy p {
    width: min(58%, 420px) !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  body.home-page .day-story-entry-phone,
  body.home-page .day-story-entry-orbit,
  body.home-page .day-story-launch,
  body.home-page .day-story-hand-icon,
  body.home-page .day-story-outro.is-active .day-story-outro-logo,
  body.home-page .day-story-outro.is-active .day-story-outro-kicker,
  body.home-page .day-story-outro.is-active h2,
  body.home-page .day-story-outro.is-active > p:not(.day-story-outro-kicker),
  body.home-page .day-story-outro.is-active .day-story-outro-actions,
  body.home-page .day-story-outro.is-active .day-story-outro-stay,
  body.home-page .day-story-outro.is-counting .day-story-outro-timer i,
  body.home-page .day-experience-section.day-story-return-flare {
    animation: none !important;
  }

  body.home-page .day-story-shell,
  body.home-page .day-story-window,
  body.home-page .day-story-hand,
  body.home-page .day-story-progress-step span {
    transition: none !important;
  }

  body.home-page .day-story-shell .day-experience-track {
    scroll-behavior: auto !important;
    scroll-snap-type: y mandatory !important;
  }

  body.home-page .day-story-outro-logo,
  body.home-page .day-story-outro-kicker,
  body.home-page .day-story-outro h2,
  body.home-page .day-story-outro > p:not(.day-story-outro-kicker),
  body.home-page .day-story-outro-actions,
  body.home-page .day-story-outro-stay {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) and (max-width: 900px) {
  body.home-page .day-story-backdrop,
  body.home-page .day-story-entry-phone,
  body.home-page .day-story-entry-times span,
  body.home-page .day-story-brand-mark,
  body.home-page .day-story-counter,
  body.home-page .day-story-close,
  body.home-page .day-story-tool,
  body.home-page .day-story-hand,
  body.home-page .day-story-shell .day-moment-time,
  body.home-page .day-story-shell .day-moment-copy h3,
  body.home-page .day-story-shell .day-moment-copy p,
  body.home-page .day-story-outro-replay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.home-page .day-story-backdrop {
    background: #011c30 !important;
  }

  body.home-page .day-story-shell .day-moment-time,
  body.home-page .day-story-shell .day-moment-copy h3,
  body.home-page .day-story-shell .day-moment-copy p {
    background: #062d49 !important;
  }
}

/* Category bars were retired sitewide. Keep them off even when older
   component rules try to restore their mobile layouts later in the cascade. */
html body[data-page="philosophy"] .kg-section-nav,
html body[data-page="childcare"] .dp-subnav,
html body[data-page="childcare-static"] .dp-subnav,
html body[data-page="activities"] .activity-filterbar {
  display: none !important;
}

/* Manage tabs: compact horizontal rail with visible navigation arrows. */
@media (max-width: 900px) {
  body.home-page .day-story-shell .day-video-loader {
    --uib-size: 28px;
    --uib-color: #ffd43b;
    --uib-speed: 1s;
    --uib-stroke: 3px;
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--uib-size);
    height: calc(var(--uib-size) * 0.9);
    padding: 12px;
    box-sizing: content-box;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(2, 30, 49, 0.82);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.92);
    transition: opacity 160ms ease, transform 160ms ease;
  }

  body.home-page .day-story-shell .day-video-loader.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  body.home-page .day-story-shell .day-video-loader-bar {
    width: var(--uib-stroke);
    height: 100%;
    border-radius: 999px;
    background-color: var(--uib-color);
  }

  body.home-page .day-story-shell .day-video-loader-bar:nth-child(1) {
    animation: day-video-loader-grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.45) infinite;
  }

  body.home-page .day-story-shell .day-video-loader-bar:nth-child(2) {
    animation: day-video-loader-grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.3) infinite;
  }

  body.home-page .day-story-shell .day-video-loader-bar:nth-child(3) {
    animation: day-video-loader-grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.15) infinite;
  }

  body.home-page .day-story-shell .day-video-loader-bar:nth-child(4) {
    animation: day-video-loader-grow var(--uib-speed) ease-in-out infinite;
  }

  body.manage-page .studio-nav-shell {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  body.manage-page .studio-nav-shell.has-overflow {
    grid-template-columns: 36px minmax(0, 1fr) 36px !important;
  }

  body.manage-page .studio-nav-shell .studio-nav {
    display: flex !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: none !important;
    grid-auto-flow: unset !important;
    gap: 3px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none;
  }

  body.manage-page .studio-nav-shell .studio-nav button:not([hidden]) {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 44px !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    padding: 5px 9px !important;
    white-space: nowrap !important;
    scroll-snap-align: center !important;
  }

  body.manage-page .studio-nav-shell .studio-nav-scroll {
    min-height: 44px !important;
    border-radius: 12px !important;
  }

  body.manage-page .studio-nav-shell .studio-nav-scroll span {
    font-size: 1.55rem !important;
  }

  body.manage-page .direct-save-banner {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 11px !important;
  }

  body.manage-page .direct-save-banner > span {
    width: 38px !important;
    height: 38px !important;
  }

  body.manage-page .direct-save-banner > b {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }

  body.manage-page .social-save-actions {
    align-items: stretch;
    flex-direction: column;
  }

  body.manage-page .social-save-actions .button {
    width: 100%;
  }
}

@keyframes day-video-loader-grow {
  0%,
  100% {
    transform: scaleY(0.3);
  }

  50% {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  body.home-page .day-story-shell .day-video-loader-bar {
    animation: none !important;
    transform: scaleY(0.65);
  }
}

/* The supplied 2026 wordmark has a denser opaque drawing than the former
   hero asset. At phone and compact-tablet widths, map that drawing back into
   the former visible bounds so its scale and left edge stay exactly familiar,
   without changing the blue hero treatment, layout box, or desktop styling. */
@media (max-width: 900px) {
  body.home-page .hero-content h1[data-hero-title]::after {
    background-size: 89.25354% 88.02817%;
    background-position: 22.38509% 86.76471%;
  }
}

/* iPhone Safari performance mode
   Visible animation and styling remain unchanged. WebKit animation clocks and
   promoted layers are released only when a known animated section is safely
   offscreen or while the page itself is in the background. */
html.is-iphone-safari.ios-page-hidden *,
html.is-iphone-safari.ios-page-hidden *::before,
html.is-iphone-safari.ios-page-hidden *::after,
html.is-iphone-safari .ios-perf-paused,
html.is-iphone-safari .ios-perf-paused *,
html.is-iphone-safari .ios-perf-paused::before,
html.is-iphone-safari .ios-perf-paused::after,
html.is-iphone-safari .ios-perf-paused *::before,
html.is-iphone-safari .ios-perf-paused *::after {
  animation-play-state: paused !important;
}

html.is-iphone-safari .ios-perf-paused,
html.is-iphone-safari .ios-perf-paused * {
  will-change: auto !important;
}

/* Final responsive layout for the simplified Activities card catalog. */
@media (max-width: 900px) {
  html body[data-page="activities"] .activities-page {
    padding: calc(env(safe-area-inset-top, 0px) + 76px) 0 62px !important;
  }

  body[data-page="activities"] .activities-intro {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: calc(100% - (2 * var(--mobile-edge))) !important;
    margin: 0 auto !important;
    padding: 14px 0 25px !important;
    border-radius: 0 !important;
  }

  body[data-page="activities"] .activities-intro::before {
    width: 76px !important;
    height: 6px !important;
  }

  body[data-page="activities"] .activities-intro .eyebrow {
    margin-bottom: 12px !important;
    padding: 6px 11px 5px !important;
    font-size: 0.72rem !important;
  }

  body[data-page="activities"] .activities-intro h1 {
    max-width: 680px !important;
    font-size: clamp(2.45rem, 9vw, 3.7rem) !important;
    line-height: 0.96 !important;
  }

  body[data-page="activities"] .activities-intro-copy {
    max-width: 56ch !important;
    margin: 0 !important;
    padding: 0 0 0 17px !important;
    border-left-width: 3px !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }

  body[data-page="activities"] .activities-catalog {
    width: calc(100% - (2 * var(--mobile-edge))) !important;
    margin: 25px auto 0 !important;
  }

  body[data-page="activities"] .activity-catalog-heading {
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  body[data-page="activities"] .activity-catalog-heading h2 {
    font-size: clamp(1.75rem, 6.8vw, 2.35rem) !important;
  }

  body[data-page="activities"] .activity-catalog-count {
    padding: 7px 10px !important;
    font-size: 0.72rem !important;
  }

  body[data-page="activities"] .activity-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px !important;
  }

  body[data-page="activities"] .activity-card {
    grid-template-rows: 52% minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 1 / 1.12 !important;
    border-radius: 21px !important;
    box-shadow: 0 13px 32px rgba(20, 54, 83, 0.1) !important;
  }

  body[data-page="activities"] .activity-card-copy {
    padding: 13px 14px 14px !important;
  }

  body[data-page="activities"] .activity-card-meta {
    gap: 6px !important;
    font-size: 0.65rem !important;
  }

  body[data-page="activities"] .activity-card-reading {
    padding: 3px 6px !important;
    font-size: 0.61rem !important;
  }

  body[data-page="activities"] .activity-card-copy h3 {
    margin-top: 9px !important;
    font-size: clamp(1rem, 3.2vw, 1.28rem) !important;
  }

  body[data-page="activities"] .activity-card-copy > p {
    margin-top: 6px !important;
    font-size: 0.74rem !important;
    line-height: 1.38 !important;
  }

  body[data-page="activities"] .activity-card-open {
    min-height: 38px !important;
    padding-top: 6px !important;
    font-size: 0.72rem !important;
  }

  body[data-page="activities"] .activity-card-open span {
    width: 24px !important;
    height: 24px !important;
  }

  body[data-page="activities"] .activity-primary-label,
  body[data-page="activities"] .activity-card-gallery-count {
    top: 10px !important;
    min-height: 28px !important;
    padding: 5px 8px !important;
    font-size: 0.63rem !important;
  }

  body[data-page="activities"] .activity-primary-label {
    left: 10px !important;
  }

  body[data-page="activities"] .activity-card-gallery-count {
    right: 10px !important;
  }
}

@media (max-width: 620px) {
  body[data-page="activities"] .activity-catalog-heading {
    align-items: start !important;
  }

  body[data-page="activities"] .activity-card-grid {
    grid-template-columns: 1fr !important;
    gap: 17px !important;
  }

  body[data-page="activities"] .activity-card {
    grid-template-rows: 55% minmax(0, 1fr) !important;
    aspect-ratio: 1 / 1.06 !important;
    border-radius: 23px !important;
  }

  body[data-page="activities"] .activity-card-copy {
    padding: 16px 17px 17px !important;
  }

  body[data-page="activities"] .activity-card-copy h3 {
    font-size: clamp(1.22rem, 6vw, 1.55rem) !important;
  }

  body[data-page="activities"] .activity-card-copy > p {
    font-size: 0.83rem !important;
  }
}

/* Keep the opened Activities reader rounded on small screens too. */
@media (max-width: 760px) {
  body[data-page="activities"] .activity-modal-card {
    overflow: hidden !important;
    border-radius: 26px !important;
  }

  body[data-page="activities"] .activity-modal-card::before {
    border-radius: inherit !important;
  }

  body[data-page="activities"] .activity-main-photo {
    border-radius: 18px !important;
  }

  body[data-page="activities"] .activity-main-photo img {
    border-radius: 14px !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  body[data-page="activities"] .activity-modal {
    align-items: center !important;
    justify-items: center !important;
    padding: 10px !important;
  }

  body[data-page="activities"] .activity-modal-card {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow: hidden !important;
    border-radius: 26px !important;
  }

  body[data-page="activities"] .activity-modal-card::before {
    border-radius: inherit !important;
  }
}