/* Compact (stacked) hero layout.
   Covers phones AND portrait tablets: a tablet held upright is 769-1024px wide,
   which used to fall through to the desktop layout and overlap badly. Portrait
   tablets now get the same stacked layout as a phone (iPad mini reference). */
@media (max-width: 768px), (max-width: 1366px) and (orientation: portrait) {
  .hero-pin-wrapper {
    height: calc(100vh + 780px) !important;
    min-height: calc(100vh + 780px) !important;
    position: relative !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .hero-cinematic {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    padding: calc(env(safe-area-inset-top, 0px) + 52px) 16px 20px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #000000 !important;
    z-index: 50 !important;
  }

  .hero-cinematic.is-unpinned {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }

  .hero-red-bg-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
  }

  .hero-mobile-loc-bar {
    display: none !important;
  }

  .hero-grid-container {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
  }

  .hero-col--left {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }

  /* The left column spans the full hero width and sits above the 3D heart,
     so it swallowed every touch meant for the canvas. The column itself is
     made click-through here; its own content re-enables pointer events
     below so text, links and buttons stay interactive. */
  .hero-col--left > * {
    pointer-events: auto !important;
  }

  .hero-col--left::before,
  .hero-right-vertical-border,
  .name-segments-rail,
  .cardio-segments-rail,
  .scroll-segments-rail,
  .hero-bottom-left-widget,
  .vpage-segments-rail,
  .hero-scroll-explore,
  .impact-section-divider {
    display: none !important;
  }

  #verticalPagination,
  .vertical-pagination {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 0 4px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
  }

  .vpage-square {
    display: none !important;
  }

  .vpage-item,
  #vpageItem01,
  #vpageItem02,
  #vpageItem03,
  #vpageItem04,
  #vpageItem05,
  #vpageItem01.is-active,
  #vpageItem02.is-active,
  #vpageItem03.is-active,
  #vpageItem04.is-active,
  #vpageItem05.is-active,
  #vpageItem01~div,
  #vpageItem02~div,
  #vpageItem03~div,
  #vpageItem04~div,
  #vpageItem05~div {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    padding: 2px 4px !important;
    min-width: 24px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    transition: color 0.2s ease !important;
  }

  .vpage-item.is-active,
  #vpageItem01.is-active,
  #vpageItem02.is-active,
  #vpageItem03.is-active,
  #vpageItem04.is-active,
  #vpageItem05.is-active {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .vpage-item.is-active::before,
  #vpageItem01.is-active::before,
  #vpageItem02.is-active::before,
  #vpageItem03.is-active::before,
  #vpageItem04.is-active::before,
  #vpageItem05.is-active::before {
    content: "" !important;
    position: absolute !important;
    top: -6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 3px solid transparent !important;
    border-right: 3px solid transparent !important;
    border-top: 4px solid #ff2a3c !important;
    filter: drop-shadow(0 0 4px rgba(255, 42, 60, 0.9)) !important;
  }

  .vpage-item.is-active::after,
  #vpageItem01.is-active::after,
  #vpageItem02.is-active::after,
  #vpageItem03.is-active::after,
  #vpageItem04.is-active::after,
  #vpageItem05.is-active::after {
    content: "" !important;
    position: absolute !important;
    bottom: -5px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 1px !important;
    height: 5px !important;
    background: #ff2a3c !important;
    box-shadow: 0 0 6px rgba(255, 42, 60, 0.9) !important;
  }

  .hero-top-roles,
  .hero-intro-card,
  .hero-intro-desc,
  .hero-name-block,
  .hero-headline,
  .hl-first,
  .hl-row-second,
  .hl-second,
  .hero-cardio-badge,
  .hero-view-work,
  .hero-col--right,
  .hero-top-right-group,
  .hero-ecg-strip,
  .scans-gallery,
  .impact-monitor,
  .impact-content-grid,
  .impact-screen-col,
  .impact-screen,
  .impact-screen img,
  #scansGallery,
  #scansGalleryReel,
  .scan-item,
  #scanCard1,
  #scanCard2,
  #scanCard3,
  #scanThumb1,
  #scanThumb2,
  #scanThumb3,
  #scanMeta1,
  #scanMeta2,
  #scanMeta3,
  #scanMeta1 *,
  #scanMeta2 *,
  #scanMeta3 *,
  #scanImg1,
  #scanImg2,
  #scanImg3 {
    transform: none !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  .hero-top-roles {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 350px !important;
    margin: 0 0 4px 0 !important;
    padding: 0 0 0 14px !important;
    position: relative !important;
    top: 72px !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
  }

  .hero-top-roles-header {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 2px !important;
    width: 100% !important;
    position: static !important;
  }

  .role-square {
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    background: #ff2222 !important;
    box-shadow: 0 0 8px rgba(255, 34, 34, 0.9) !important;
    flex-shrink: 0 !important;
  }

  .role-square::after {
    content: "" !important;
    position: absolute !important;
    top: 6px !important;
    left: 2px !important;
    width: 1px !important;
    height: 145px !important;
    background: rgba(255, 255, 255, 0.11) !important;
    pointer-events: none !important;
  }

  .role-title {
    font-size: 12px !important;
    letter-spacing: 0.2em !important;
    color: rgba(255, 255, 255, 0.9) !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    line-height: 1 !important;
  }

  .role-title img {
    width: 12px !important;
    height: 12px !important;
    margin-left: -1px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    transform: translateY(-1.5px) !important;
  }

  .role-lines {
    font-size: clamp(9px, 2.6vw, 10px) !important;
    line-height: 1.5 !important;
    letter-spacing: 0.04em !important;
    color: rgba(255, 255, 255, 0.8) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }

  .role-lines div {
    display: block !important;
    white-space: nowrap !important;
  }

  .role-lines div:last-child {
    display: block !important;
    max-width: none !important;
  }

  .role-lines em,
  .role-lines .cz-char-split {
    font-style: italic !important;
    color: #ffffff !important;
  }

  .hero-intro-card {
    position: relative !important;
    padding-left: 14px !important;
    width: 64% !important;
    max-width: 280px !important;
    margin: 4px 0 4px 0 !important;
    top: -25px !important;
    height: 130px !important;
    min-height: 130px !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .hero-intro-header {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: clamp(10.5px, 2.8vw, 12px) !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 3px !important;
    color: #ffffff !important;
    position: static !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .intro-bar {
    position: absolute !important;
    left: 2px !important;
    top: 4px !important;
    transform: none !important;
    width: 1px !important;
    height: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9) !important;
    z-index: 2 !important;
    display: block !important;
  }

  .intro-segments-rail {
    position: absolute !important;
    top: 0 !important;
    left: 2px !important;
    width: 1px !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1 !important;
    display: block !important;
  }

  .intro-seg {
    position: absolute !important;
    width: 1px !important;
    left: 0 !important;
    display: block !important;
  }

  .intro-seg--1 {
    top: 20px !important;
    height: 22px !important;
    background: rgba(255, 255, 255, 0.28) !important;
  }

  .intro-seg--2 {
    top: 44px !important;
    height: 16px !important;
    background: rgba(255, 255, 255, 0.25) !important;
  }

  .intro-seg--3 {
    top: 62px !important;
    height: 16px !important;
    background: rgba(255, 255, 255, 0.22) !important;
  }

  .intro-seg--4 {
    top: 80px !important;
    height: 16px !important;
    background: rgba(255, 255, 255, 0.20) !important;
  }

  .intro-seg--5 {
    top: 98px !important;
    height: 16px !important;
    background: rgba(255, 255, 255, 0.18) !important;
  }

  .hero-intro-desc,
  .manifesto-quote-wrap {
    font-size: clamp(10.2px, 2.75vw, 11.8px) !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .cz-slice-wrap,
  .cz-slice-line,
  .cz-char-split {
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }

  .role-lines .cz-letter,
  .hero-intro-desc .cz-letter {
    display: inline !important;
    perspective: none !important;
    transform: none !important;
  }

  .hero-view-work {
    display: inline-flex !important;
    align-items: center !important;
    margin: 4px 0 6px 0 !important;
    color: #ff3344 !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    width: fit-content !important;
    position: relative !important;
    top: -127px !important;
    transition: all 0.2s ease !important;
  }

  .hero-view-work::after,
  .hero-view-work::before {
    display: none !important;
    content: none !important;
    border: none !important;
  }

  .hero-view-work:hover {
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    color: #ffffff !important;
  }

  .hero-name-block {
    margin: 0 0 -100px 0 !important;
    width: 100% !important;
    position: relative !important;
    top: -216px !important;
    z-index: 50 !important;
    transform: none !important;
  }

  .hero-headline {
    font-size: clamp(30px, 8vw, 36px) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.02em !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    white-space: nowrap !important;
    position: static !important;
    transform: none !important;
  }

  .hero-headline .hl-first {
    display: block !important;
    color: #ffffff !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 3px 0 !important;
    transform: none !important;
    white-space: nowrap !important;
    position: static !important;
  }

  .hero-headline .hl-first .cz-slice-wrap,
  .hero-headline .hl-first .cz-slice-line {
    white-space: nowrap !important;
    display: inline-block !important;
    transform: none !important;
  }

  .hero-headline .hl-first .cz-letter:nth-child(2) {
    color: #ff2a3c !important;
    text-shadow: 0 0 16px rgba(255, 42, 60, 0.7) !important;
  }

  .hero-headline .hl-row-second {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    position: static !important;
    transform: none !important;
  }

  .hero-headline .hl-second {
    display: block !important;
    color: #ff2a3c !important;
    font-size: clamp(32px, 8.5vw, 40px) !important;
    line-height: 0.9 !important;
    letter-spacing: inherit !important;
    text-shadow: 0 0 24px rgba(255, 42, 60, 0.45) !important;
    white-space: nowrap !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    position: static !important;
  }

  .hero-cardio-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    position: relative !important;
    top: -4px !important;
    left: -2px !important;
    transform: scale(0.85) !important;
    transform-origin: top left !important;
    flex-shrink: 0 !important;
  }

  .cardio-vertical-border {
    display: none !important;
  }

  .cardio-hatch-bars svg {
    height: 20px !important;
    width: auto !important;
    display: block !important;
  }

  .cardio-badge-text {
    font-size: 7.5px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.12em !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }

  #heroCenterVisual,
  .hero-col--center,
  .hero-col.hero-col--center {
    position: absolute !important;
    right: -10px !important;
    top: 90px !important;
    margin-top: 43px !important;
    width: 50% !important;
    height: 265px !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #heroCenterVisual::before,
  #heroCenterVisual::after {
    display: none !important;
  }

  .heart-stage-inner {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }

  #heroHeartCanvas {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
  }

  .hero-col--right {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    position: static !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    transform: none !important;
  }

  .impact-monitor {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 -50px 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: -155px !important;
    z-index: 10 !important;
    transform: scale(1.15) !important;
    transform-origin: top left !important;
    box-sizing: border-box !important;
  }

  .impact-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    font-size: 8.5px !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 0.18em !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-bottom: 2px !important;
    position: relative !important;
    top: 9px !important;
    transform: scale(0.85) !important;
    transform-origin: top left !important;
    z-index: 2 !important;
  }

  .impact-topbar .impact-title {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 700 !important;
    font-size: 8.5px !important;
    display: inline-block !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
  }

  .impact-topbar .impact-slash,
  .impact-topbar .impact-year {
    display: none !important;
  }

  .impact-content-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    transform: none !important;
  }

  .impact-screen-col {
    display: flex !important;
    flex-direction: column !important;
    width: 160px !important;
    max-width: 160px !important;
    position: static !important;
    transform: none !important;
  }

  .impact-screen {
    width: 160px !important;
    max-width: 160px !important;
    height: 160px !important;
    aspect-ratio: 1 / 1 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000000 !important;
    box-sizing: border-box !important;
  }

  .screen-bracket {
    display: block !important;
    position: absolute !important;
    width: 6px !important;
    height: 6px !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
  }

  .screen-bracket.tl {
    top: -1px !important;
    left: -1px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.75) !important;
  }

  .screen-bracket.tr {
    top: -1px !important;
    right: -1px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.75) !important;
  }

  .screen-bracket.bl {
    bottom: -1px !important;
    left: -1px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.75) !important;
  }

  .screen-bracket.br {
    bottom: -1px !important;
    right: -1px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.75) !important;
  }

  .impact-screen img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
    transform: none !important;
    filter: contrast(135%) brightness(0.92) !important;
  }

  .impact-screen-scale-bar {
    display: flex !important;
    align-items: center !important;
    width: 160px !important;
    max-width: 160px !important;
    height: 4px !important;
    margin-top: 2px !important;
    position: relative !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .scale-end-notch {
    display: block !important;
    width: 2px !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    flex-shrink: 0 !important;
  }

  .scale-hairline {
    display: block !important;
    flex: 1 !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.22) !important;
  }

  .scale-mid-tick {
    display: block !important;
    width: 1px !important;
    height: 3px !important;
    background: rgba(255, 255, 255, 0.45) !important;
    flex-shrink: 0 !important;
  }

  .impact-ruler-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 160px !important;
    padding: 0 !important;
    font-family: var(--font-mono) !important;
    box-sizing: border-box !important;
    transform: none !important;
    position: static !important;
  }

  .ruler-pointer {
    display: block !important;
    font-size: 6px !important;
    color: #ff3b5c !important;
    line-height: 1 !important;
    text-shadow: 0 0 6px #ff3b5c !important;
  }

  .ruler-vertical-line {
    display: block !important;
    width: 1px !important;
    flex: 1 !important;
    background: rgba(255, 255, 255, 0.22) !important;
    margin: 2px 0 !important;
  }

  .ruler-mid-cross {
    display: block !important;
    font-size: 7px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    line-height: 1 !important;
  }

  .ruler-bottom-bracket {
    display: block !important;
    font-size: 8px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    line-height: 1 !important;
  }

  .impact-data-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    height: 160px !important;
    position: absolute !important;
    right: 14% !important;
    bottom: 0 !important;
    box-sizing: border-box !important;
  }

  .impact-barcode-box {
    display: none !important;
  }

  .impact-mantra {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    font-family: var(--font-mono) !important;
    font-size: 8.5px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.12em !important;
    color: rgba(255, 255, 255, 0.88) !important;
    text-align: right !important;
    white-space: nowrap !important;
    position: relative !important;
    top: 47px !important;
    left: -8px !important;
    height: 68px !important;
    min-width: 57px !important;
    min-height: 57px !important;
    transform: scale(1.22) !important;
    transform-origin: top left !important;
    margin-top: auto !important;
    padding: 0 !important;
  }

  .impact-mantra div {
    display: block !important;
    text-align: right !important;
  }

  .hero-ecg-strip {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 2px 0 !important;
    margin: 0 0 8px 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: -19px !important;
    left: 1px !important;
    transform: none !important;
  }

  .hero-ecg-strip .ecg-canvas-frame {
    flex: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    padding-right: 8px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  #heroEcgLine {
    width: 100% !important;
    max-width: 120px !important;
    height: 28px !important;
    display: block !important;
  }

  .hero-ecg-readout {
    flex: 1 !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 0 8px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .hero-ecg-readout .hr-num {
    color: #ff2a3c !important;
    font-size: 20px !important;
    font-weight: 700 !important;
  }

  .hero-ecg-readout .hr-unit {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
  }

  .hero-live-indicator {
    display: none !important;
  }

  .hero-live-indicator .live-dot-pulsing {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #ff2a3c !important;
    box-shadow: 0 0 6px #ff2a3c !important;
  }

  .hero-top-right-group {
    order: 3 !important;
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .scans-gallery {
    order: 3 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #scansGallery {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    top: -16px !important;
    height: 125px !important;
    min-height: 125px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #scansGalleryReel {
    display: grid !important;
    grid-template-areas: "stack" !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    top: -3px !important;
    height: 125px !important;
    min-height: 125px !important;
    max-height: 125px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  .scans-group {
    grid-area: stack !important;
    display: none !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  .scans-group.is-active {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  .scans-group.is-entering-up,
  .scans-group.is-entering-down {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  .scans-group.is-exiting-up,
  .scans-group.is-exiting-down {
    display: none !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  .scans-group .scan-item,
  .scans-group:not([data-group="0"]) .scan-item,
  .scans-group:not([data-group="0"]) .scan-item:nth-child(1),
  .scans-group:not([data-group="0"]) .scan-item:nth-child(2),
  .scans-group:not([data-group="0"]) .scan-item:nth-child(3) {
    position: static !important;
    transform: none !important;
    transition: none !important;
  }

  .scans-group .scan-thumb,
  .scans-group:not([data-group="0"]) .scan-thumb {
    position: relative !important;
    transform: none !important;
    transition: none !important;
    width: 100% !important;
    height: 100px !important;
  }

  .scans-group .scan-meta,
  .scans-group:not([data-group="0"]) .scan-meta {
    position: relative !important;
    top: -8px !important;
    transform: none !important;
    transition: none !important;
  }

  .scans-group .scan-meta .scan-title,
  .scans-group:not([data-group="0"]) .scan-meta .scan-title,
  .scans-group .scan-meta .scan-sub,
  .scans-group:not([data-group="0"]) .scan-meta .scan-sub,
  .scans-group .scan-meta .scan-dash,
  .scans-group:not([data-group="0"]) .scan-meta .scan-dash {
    transform: none !important;
    transition: none !important;
  }

  @keyframes scanGroupEnterRight {
    from {
      opacity: 0;
      transform: none;
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes scanGroupExitLeft {
    from {
      opacity: 1;
      transform: none;
    }

    to {
      opacity: 0;
      transform: none;
    }
  }

  @keyframes scanGroupEnterLeft {
    from {
      opacity: 0;
      transform: none;
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes scanGroupExitRight {
    from {
      opacity: 1;
      transform: none;
    }

    to {
      opacity: 0;
      transform: none;
    }
  }

  .scan-item,
  #scanCard1,
  #scanCard2,
  #scanCard3 {
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    cursor: pointer !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .scan-thumb,
  #scanThumb1,
  #scanThumb2,
  #scanThumb3 {
    width: 100% !important;
    max-width: 100% !important;
    height: 100px !important;
    position: relative !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: #000000 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .scan-thumb img,
  #scanImg1,
  #scanImg2,
  #scanImg3 {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    position: static !important;
    filter: contrast(125%) brightness(0.95) !important;
    transform: none !important;
  }

  .thumb-bracket {
    display: block !important;
    position: absolute !important;
    width: 5px !important;
    height: 5px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    pointer-events: none !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
  }

  .thumb-bracket.tl {
    top: -1px !important;
    left: -1px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.85) !important;
  }

  .thumb-bracket.tr {
    top: -1px !important;
    right: -1px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.85) !important;
  }

  .thumb-bracket.bl {
    bottom: -1px !important;
    left: -1px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.85) !important;
  }

  .thumb-bracket.br {
    bottom: -1px !important;
    right: -1px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.85) !important;
  }

  .scan-meta,
  #scanMeta1,
  #scanMeta2,
  #scanMeta3 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 2px !important;
    padding: 0 1px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: -8px !important;
    transform: none !important;
    z-index: 10 !important;
  }

  .scan-title,
  #scanMeta1 .scan-title,
  #scanMeta2 .scan-title,
  #scanMeta3 .scan-title {
    font-size: 7.5px !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.2 !important;
    position: static !important;
    transform: none !important;
  }

  .scan-sub,
  #scanMeta1 .scan-sub,
  #scanMeta2 .scan-sub,
  #scanMeta3 .scan-sub {
    display: none !important;
  }

  .scan-dash,
  #scanMeta1 .scan-dash,
  #scanMeta2 .scan-dash,
  #scanMeta3 .scan-dash {
    display: inline-block !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 9px !important;
    line-height: 1 !important;
    position: static !important;
    transform: none !important;
  }

  /* Compact hero for short screens. A container query on the hero's own
     content height (not a max-height media query), because on iOS Safari the
     media query sees the full screen height while the hero only gets the
     part left visible by the browser bars. 748px = the old 820px breakpoint
     minus the hero's 52px top + 20px bottom padding.
     The container is declared in css/layout/ios-viewport-fix.css. */
  @container hero (max-height: 748px) {
    .hero-col--left {
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
      align-items: flex-start !important;
      height: auto !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      position: relative !important;
      top: 24px !important;
      z-index: 10 !important;
    }

    .hero-top-roles {
      position: relative !important;
      top: 0 !important;
      margin: 0 0 4px 0 !important;
      padding: 0 0 0 14px !important;
    }

    .hero-intro-card {
      position: relative !important;
      top: 0 !important;
      margin: 2px 0 4px 0 !important;
      padding-left: 14px !important;
      height: 130px !important;
      min-height: 130px !important;
      max-height: none !important;
      overflow: visible !important;
    }

    .hero-view-work {
      position: relative !important;
      top: 0 !important;
      left: 0 !important;
      margin: 4px 0 6px 0 !important;
      transform: none !important;
    }

    .hero-name-block {
      position: relative !important;
      top: 0 !important;
      margin: 2px 0 0 0 !important;
      z-index: 20 !important;
    }

    .hero-headline .hl-first {
      font-size: clamp(26px, 7vw, 32px) !important;
      margin: 0 0 2px 0 !important;
    }

    .hero-headline .hl-second {
      font-size: clamp(28px, 7.5vw, 34px) !important;
    }

    .hero-cardio-badge {
      transform: scale(0.8) !important;
    }

    #heroCenterVisual {
      position: absolute !important;
      right: -10px !important;
      top: 79px !important;
      margin-top: 0 !important;
      width: 50% !important;
      height: 225px !important;
    }

    .hero-col--right {
      margin-top: auto !important;
      gap: 4px !important;
    }

    .impact-monitor {
      position: relative !important;
      top: 0 !important;
      margin: 0 !important;
      transform: none !important;
    }

    .impact-topbar {
      top: 0 !important;
      transform: none !important;
      margin-bottom: 2px !important;
    }

    .impact-screen-col {
      width: 135px !important;
      max-width: 135px !important;
    }

    .impact-screen {
      width: 135px !important;
      max-width: 135px !important;
      height: 135px !important;
    }

    .impact-ruler-col {
      height: 135px !important;
    }

    .impact-data-col {
      height: 135px !important;
      right: 0 !important;
    }

    .impact-mantra {
      top: 36px !important;
      left: 0 !important;
      transform: scale(1.05) !important;
      transform-origin: top right !important;
      text-align: right !important;
    }

    .hero-ecg-strip {
      top: 0 !important;
      margin: 2px 0 4px 0 !important;
    }

    #scansGallery {
      top: 0 !important;
      height: 110px !important;
      min-height: 110px !important;
    }

    #scansGalleryReel {
      top: 0 !important;
      height: 110px !important;
      min-height: 110px !important;
      max-height: 110px !important;
    }

    .scans-group .scan-thumb,
    .scans-group:not([data-group="0"]) .scan-thumb,
    .scan-thumb,
    #scanThumb1,
    #scanThumb2,
    #scanThumb3 {
      height: 85px !important;
    }
  }
}

/* Landscape tablets keep the two-column hero. Portrait is handled above. */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .hero-pin-wrapper {
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
    width: 100% !important;
  }

  .hero-cinematic {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    padding: calc(env(safe-area-inset-top, 0px) + 64px) 24px 32px !important;
  }

  .hero-grid-container {
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr !important;
    gap: 20px !important;
    align-items: center !important;
  }

  .hero-col--left {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .hero-col--center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 320px !important;
  }

  .hero-headline {
    font-size: clamp(42px, 5.5vw, 56px) !important;
  }

  .hero-ecg-strip {
    grid-column: 1 / -1 !important;
  }

  .scans-gallery {
    grid-column: 1 / -1 !important;
  }

  .scans-group[data-group="0"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  .scans-group:not([data-group="0"]) {
    display: none !important;
  }
}