/* Production moving-grid theme. */

html.portfolio-old-grid {
  --old-grid-fine: rgba(8, 78, 168, 0.16);
  --old-grid-major: rgba(8, 104, 255, 0.24);
}

/* Keep the document root as the only vertical scroll owner. Using `hidden`
   on the body's x-axis computes its y-axis to `auto`, which creates a second
   scroll container when decorative layers extend beyond a section. */
html.portfolio-old-grid body {
  overflow-x: clip;
  overflow-y: visible;
}

/* The moving grids deliberately overscan each section so their translations
   never expose an edge. Clip that paint locally so it cannot enlarge the
   body's scrollable area or create phantom space after the final section. */
html.portfolio-old-grid .section {
  overflow: clip;
}

html.portfolio-old-grid .section::after {
  content: "";
  display: block;
  position: absolute;
  inset: -240px;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--old-grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--old-grid-fine) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  transform: translate3d(0, 0, 0);
  animation: old-grid-fine-drift 11s linear infinite;
  will-change: transform;
}

html.portfolio-old-grid .old-grid-major-layer {
  position: absolute;
  inset: -240px;
  z-index: 0;
  display: block;
  pointer-events: none;
  background:
    linear-gradient(var(--old-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--old-grid-major) 1px, transparent 1px);
  background-size: 240px 240px, 240px 240px;
  transform: translate3d(0, 0, 0);
  animation: old-grid-major-drift 18s linear infinite;
  will-change: transform;
}

/* Keep the moving grid atmospheric without letting it compete with content. */
html.portfolio-old-grid .cliniqlo-benefits article {
  border-color: rgba(var(--foundation-blue-600-rgb), 0.24);
  background: rgb(var(--foundation-ink-25-rgb));
  box-shadow:
    0 16px 38px rgba(var(--foundation-navy-950-rgb), 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html.portfolio-old-grid .cliniqlo-visual {
  background: rgb(239, 247, 255);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html.portfolio-old-grid .cliniqlo-slide > p {
  background: rgb(var(--foundation-navy-950-rgb));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html.portfolio-old-grid .cliniqlo-actions .button.secondary,
html.portfolio-old-grid .cliniqlo-carousel-controls > button {
  background: rgb(var(--foundation-ink-25-rgb));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html.portfolio-old-grid .social {
  min-height: 0;
  --section-clip: polygon(0 var(--diagonal-cut), 100% 0, 100% 100%, 0 100%);
  padding-bottom: clamp(64px, 7vw, 96px);
}

@keyframes old-grid-fine-drift {
  to {
    transform: translate3d(240px, 240px, 0);
  }
}

@keyframes old-grid-major-drift {
  to {
    transform: translate3d(240px, 240px, 0);
  }
}

html.portfolio-old-grid .site-header {
  border-color: rgba(var(--foundation-ink-50-rgb), 0.16);
  box-shadow:
    0 18px 48px rgba(var(--foundation-navy-950-rgb), 0.24),
    inset 0 1px 0 rgba(var(--foundation-ink-50-rgb), 0.12);
  transition:
    top 360ms cubic-bezier(0.2, 0, 0, 1),
    width 360ms cubic-bezier(0.2, 0, 0, 1),
    max-width 360ms cubic-bezier(0.2, 0, 0, 1),
    padding 360ms cubic-bezier(0.2, 0, 0, 1),
    border-radius 360ms cubic-bezier(0.2, 0, 0, 1),
    border-color 280ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 360ms cubic-bezier(0.2, 0, 0, 1),
    transform 360ms cubic-bezier(0.2, 0, 0, 1);
}

html.portfolio-old-grid .site-header::before {
  background: rgba(var(--foundation-navy-950-rgb), 0.88);
  transition: background-color 220ms var(--ease-standard);
}

html.portfolio-old-grid .site-header .descriptor-link,
html.portfolio-old-grid .site-header .descriptor-link:visited,
html.portfolio-old-grid .site-header .brand-name,
html.portfolio-old-grid .site-header .nav-trigger {
  color: var(--foundation-ink-25);
}

html.portfolio-old-grid .site-header .nav-trigger {
  color: var(--foundation-ink-25);
  background: rgba(var(--foundation-ink-50-rgb), 0.1);
  border: 1px solid rgba(var(--foundation-ink-50-rgb), 0.2);
  box-shadow:
    inset 0 1px 0 rgba(var(--foundation-ink-50-rgb), 0.08),
    0 8px 18px rgba(var(--foundation-navy-950-rgb), 0.16);
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

html.portfolio-old-grid .site-header .brand-logo img {
  content: url("/assets/brand/kmo-logo-dark-header.png?v=20260809");
  filter: none;
  transition: filter 220ms var(--ease-standard);
}

html.portfolio-old-grid .site-header .descriptor-link:hover,
html.portfolio-old-grid .site-header .descriptor-link:focus-visible {
  color: var(--foundation-blue-600) !important;
}

html.portfolio-old-grid .site-header .nav-trigger:hover,
html.portfolio-old-grid .site-header .nav-trigger:focus-visible {
  color: var(--foundation-white) !important;
  background: var(--foundation-blue-700);
  border-color: rgba(var(--foundation-cyan-400-rgb), 0.92);
  box-shadow:
    inset 0 1px 0 rgba(var(--foundation-ink-25-rgb), 0.28),
    0 0 0 2px rgba(var(--foundation-cyan-400-rgb), 0.2),
    0 12px 28px rgba(var(--foundation-blue-700-rgb), 0.38);
}

html.portfolio-old-grid .site-header .nav-trigger:focus-visible {
  outline: 3px solid rgba(var(--foundation-blue-600-rgb), 0.48);
  outline-offset: 3px;
}

html.portfolio-old-grid .site-header .nav-trigger:active {
  color: var(--foundation-ink-25) !important;
  background: rgba(var(--foundation-ink-50-rgb), 0.22);
  transform: translateY(1px) scale(0.98);
}

html.portfolio-old-grid .site-header.is-over-dark-section {
  border-color: rgba(var(--foundation-navy-700-rgb), 0.18);
  box-shadow:
    0 18px 48px rgba(var(--foundation-navy-950-rgb), 0.2),
    inset 0 1px 0 rgba(var(--foundation-ink-25-rgb), 0.8);
}

html.portfolio-old-grid .site-header.is-over-dark-section::before {
  background: rgba(var(--foundation-ink-25-rgb), 0.9);
}

html.portfolio-old-grid .site-header.is-over-dark-section .descriptor-link,
html.portfolio-old-grid .site-header.is-over-dark-section .descriptor-link:visited,
html.portfolio-old-grid .site-header.is-over-dark-section .brand-name {
  color: var(--foundation-navy-950);
}

html.portfolio-old-grid .site-header.is-over-dark-section .brand-logo img {
  content: url("/assets/brand/kmo-logo-trimmed.png?v=20260805");
  filter: none;
}

html.portfolio-old-grid .site-header.is-over-dark-section .nav-trigger {
  color: var(--foundation-navy-950);
  background: rgba(var(--foundation-navy-700-rgb), 0.12);
  border-color: rgba(var(--foundation-navy-700-rgb), 0.2);
  box-shadow:
    inset 0 1px 0 rgba(var(--foundation-ink-25-rgb), 0.78),
    0 8px 18px rgba(var(--foundation-navy-950-rgb), 0.1);
}

html.portfolio-old-grid .site-header.is-over-dark-section .descriptor-link:hover,
html.portfolio-old-grid .site-header.is-over-dark-section .descriptor-link:focus-visible {
  color: var(--foundation-blue-600);
}

html.portfolio-old-grid .site-header.is-over-dark-section .nav-trigger:hover,
html.portfolio-old-grid .site-header.is-over-dark-section .nav-trigger:focus-visible {
  color: var(--foundation-white) !important;
  background: var(--foundation-blue-700);
  border-color: rgba(var(--foundation-cyan-400-rgb), 0.92);
  box-shadow:
    inset 0 1px 0 rgba(var(--foundation-ink-25-rgb), 0.28),
    0 0 0 2px rgba(var(--foundation-cyan-400-rgb), 0.2),
    0 12px 28px rgba(var(--foundation-blue-700-rgb), 0.32);
}

html.portfolio-old-grid .site-header.is-over-dark-section .nav-trigger:active {
  color: var(--foundation-blue-700) !important;
  background: rgba(var(--foundation-blue-600-rgb), 0.2);
}

html.portfolio-old-grid .site-header.is-scrolled {
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
}

html.portfolio-old-grid .site-header.is-scrolled::before {
  inset: -1px -1px 0;
}

@media (prefers-reduced-motion: reduce) {
  html.portfolio-old-grid .old-grid-major-layer,
  html.portfolio-old-grid .section::after {
    animation: none;
    transform: none;
    will-change: auto;
  }

  html.portfolio-old-grid .section::after {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  html.portfolio-old-grid {
    --old-grid-fine: rgba(5, 46, 99, 0.22);
    --old-grid-major: rgba(8, 104, 255, 0.32);
  }
}