:root {
  --layout-margin: 60px;
  --font-size-body: max(0.475rem, 0.625vw);
  --color-text: #0e0d0e;
  --delta-col-gap: 25px;
  --delta-row-gap: 25px;
  --delta-inner-pad: 25px;
  --delta-card-aspect: 307.2 / 431.383;
  /* ≈0.712 */
  --delta-card-width: calc((50vw - var(--layout-margin) - var(--delta-col-gap)) / 2);
}

/* Delta repeater cards (3:4 portrait) */
.delta-card-image img {
  aspect-ratio: 960 / 1280;
}

/* Delta merged card (landscape) */
.delta-card-merged .delta-card-image img {
  aspect-ratio: 1706 / 960;
}

/* Delta plan section */
.delta-plan-wide img {
  aspect-ratio: 2405 / 1723;
}

.delta-plan-item:not(.delta-plan-wide) img {
  aspect-ratio: 1228 / 1723;
}

/* Hero image */
.scroll-expand-image-inner img {
  aspect-ratio: 2405 / 1723;
}

/* ========================================
   SCROLL-TO-EXPAND HERO
   ======================================== */

/* ScrollTrigger handles pinning with pinType: 'fixed' - no CSS sticky needed */
#scroll-expand-hero {
  position: relative;
  height: calc(var(--locked-vh) * 100);
  overflow: hidden;
  background: #FFFFFF;
  z-index: 4;
  /* NOTE: Legacy translateY for tag pullup removed - now handled by zero-height tag wrapper */
}

#scroll-expand-hero .scroll-expand-text {
  position: absolute;
  top: 120px;
  /* clears fixed header */
  left: var(--layout-margin);
  right: var(--layout-margin);
  transform: none;
  z-index: 4;
  /* below image mask (5) so text hides behind hero as it expands */
  text-align: center;
  pointer-events: none;
  padding: 0;
  box-sizing: border-box;
  width: auto;
}

#scroll-expand-hero .scroll-expand-text .horizontal-scroll-accent-italic {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: oblique;
  font-size: max(5rem, 5vw);
  line-height: max(4rem, 5.6vw);
  font-weight: 200;
  letter-spacing: -0.015em;
  color: var(--color-text, #000000);
  margin: 0;
  white-space: nowrap;
}

#scroll-expand-hero .scroll-expand-text .horizontal-scroll-body-text {
  margin: 6px auto 0 auto;
  font-family: var(--font-primary);
  font-size: var(--refactored-body-size);
  font-weight: var(--refactored-heading-weight, 700);
  line-height: var(--refactored-body-line-height, 1.45);
  color: var(--color-text, #000000);
}

#scroll-expand-hero .scroll-expand-image-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--locked-vh) * 100);

  /* --- CHANGED: Remove transform hacks on the mask itself --- */
  transform: none;
  /* ---------------------------------------------------------- */

  z-index: 5;
  transform-origin: 50% 50%;
  clip-path: inset(var(--ap-top, 0px) var(--ap-right, 0px) var(--ap-bottom, 0px) var(--ap-left, 0px));
  -webkit-clip-path: inset(var(--ap-top, 0px) var(--ap-right, 0px) var(--ap-bottom, 0px) var(--ap-left, 0px));
  margin: 0;

  /* --- CHANGED: Only hint clip-path. Never 'transform' here. --- */
  will-change: clip-path;
}

#scroll-expand-hero .scroll-expand-location {
  position: absolute;
  left: var(--layout-margin);
  right: var(--layout-margin);
  bottom: var(--layout-margin);
  text-align: center;
  box-sizing: border-box;
  font-family: var(--font-primary);
  font-size: var(--refactored-body-size);
  font-weight: var(--refactored-body-weight, 400);
  line-height: var(--refactored-body-line-height, 1.45);
  color: #7A7974;
  /* Grey color from footer for less emphasis */
  z-index: 4;
  /* Below image mask (5) so blur effect applies */
  pointer-events: none;
}

#scroll-expand-hero .scroll-expand-image-drift {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

#scroll-expand-hero .scroll-expand-image-inner {
  position: absolute;
  top: 0;
  left: 0;
  transform: none;
  transform-origin: 50% 50%;
  width: 100%;
  height: 100%;
  will-change: transform;
}

#scroll-expand-hero .scroll-expand-image-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Delta repeater overlay (cards over the hero) */
#delta-repeater-overlay {
  position: absolute;
  top: 0;
  left: var(--layout-margin);
  width: calc(50vw - var(--layout-margin));
  height: calc(var(--locked-vh) * 100);
  z-index: 8;
  /* Above image, below text */
  pointer-events: none;
  /* Allow underlying text to remain interactive unless overridden */
}

.delta-repeater-track {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  will-change: transform;
}

.delta-grid {
  display: grid;
  grid-template-columns: var(--delta-card-width) var(--delta-card-width);
  column-gap: var(--delta-col-gap);
  row-gap: var(--delta-row-gap);
  padding-bottom: var(--layout-margin);
  align-content: start;
  height: max-content;
  pointer-events: auto;
  /* Re-enable interaction for children */
}

.delta-card {
  background: #FFFFFF;
  width: 100%;
  aspect-ratio: var(--delta-card-aspect);
  position: relative;
  overflow: hidden;
}

.delta-card-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--delta-inner-pad);
  box-sizing: border-box;
}

.delta-card-number {
  position: absolute;
  top: var(--delta-inner-pad);
  left: var(--delta-inner-pad);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--refactored-body-size);
  z-index: 2;
}

.delta-card-text {
  position: absolute;
  left: var(--delta-inner-pad);
  right: var(--delta-inner-pad);
  bottom: var(--delta-inner-pad);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: calc(var(--font-size-body) * 1.75);
  line-height: 1.4;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  z-index: 2;
}

.delta-card-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: 5;
}

.delta-card-image img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  transform-origin: top right;
  transform: translateX(calc(-1 * var(--delta-inner-pad))) translateY(var(--delta-inner-pad)) scale(0.5);
  will-change: transform;
}

/* Wide/merged delta card */
.delta-card-merged {
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: auto;
  /* Let the image determine the height when scaled edge-to-edge */
  height: auto;
}

.delta-card-merged .delta-card-inner {
  position: relative;
  /* allow overlays to anchor */
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  padding: 0;
  /* make image flush to card edges */
  box-sizing: border-box;
}

.delta-card-merged .delta-card-image {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  overflow: visible;
}

.delta-card-merged .delta-card-image img {
  position: static;
  width: 100%;
  height: auto;
  /* no crop, preserve aspect */
  transform: none;
  /* no initial transform */
  object-fit: contain;
  /* ensure full image visible if any constraints apply */
  object-position: right top;
  aspect-ratio: 1706 / 960;
  /* Reserve space before image loads to prevent CLS */
}

@media (max-width: 767px) {
  :root {
    --layout-margin: 30px;
    --delta-col-gap: 16px;
    --delta-row-gap: 16px;
  }

  /* Mobile: Use locked vh for stability with browser chrome */
  #scroll-expand-hero {
    height: calc(var(--locked-vh) * 100);
  }

  #scroll-expand-hero .scroll-expand-image-wrap {
    height: calc(var(--locked-vh) * 100);
  }

  #scroll-expand-hero .scroll-expand-text .horizontal-scroll-accent-italic {
    font-size: max(42px, 12vw);
    line-height: 1.1;
    margin-bottom: clamp(8px, 2.5vw, 25px);
  }

  #scroll-expand-hero .scroll-expand-text .horizontal-scroll-body-text {
    font-size: var(--font-size-body, 1rem);
    font-weight: 300;
  }

  #delta-repeater-overlay {
    left: 30px;
    width: calc(100vw - 60px);
    height: calc(var(--locked-vh) * 100);
  }

  .delta-grid {
    grid-template-columns: 1fr;
  }

  .delta-card-merged {
    height: auto;
  }
}

/* ========================================
     DELTA AXO SCROLLYTELLING SECTION
     ======================================== */

#delta-axo {
  position: relative;
  height: calc(var(--locked-vh) * 100);
  background-color: #FFFFFF;
  /* Changed from var(--color-bg-warm) to white */
  overflow: hidden;
  /* contain: layout style; -- REMOVED: breaks sticky per CLAUDE.md */
  isolation: isolate;
  z-index: 1;
}

#delta-axo .delta-axo-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 var(--layout-margin);
  box-sizing: border-box;
}

/* Image wrapper - shifted left to center the image+text group on viewport
   Centering Math:
   - Image width: 29.4vw
   - Margin: 40px
   - Text width: 22.05vw
   - Total group: 51.45vw + 40px
   - Shift amount: (22.05vw + 40px) / 2 = 11.025vw + 20px */
#delta-axo .delta-axo-image-wrapper {
  position: absolute;
  width: 29.4vw;
  max-width: 1128px;
  aspect-ratio: 1128 / 1582;
  left: calc(50% - 11.025vw - 20px);
  /* Shifted left to center group */
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  /* Note: overflow unchanged - annotation heads stay within image bounds */
}

/* Second image initially hidden */
#delta-axo .delta-axo-image-wrapper.delta-axo-image-2 {
  opacity: 0;
  pointer-events: none;
}

#delta-axo .delta-axo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Text container - positioned to the right of image, bottom-aligned
   Width: 75% of 29.4vw = 22.05vw
   Position: Right of image, group centered on viewport */
#delta-axo .delta-axo-text-container {
  position: absolute;
  width: 22.05vw;
  /* 75% of 29.4vw */
  max-width: 846px;
  /* 75% of 1128px */
  left: calc(50% + 3.675vw + 20px);
  /* Right of image, group centered */
  bottom: calc(50% - (29.4vw * 1582 / 1128) / 2 + 24px);
  /* Bottom-aligned with image */
  z-index: 10;
  box-sizing: border-box;
}

#delta-axo .delta-axo-title {
  font-family: var(--font-primary);
  font-weight: var(--refactored-heading-weight, 700);
  font-size: var(--refactored-body-size);
  line-height: var(--refactored-body-line-height);
  margin: 0 0 12px 0;
  color: var(--color-text, #0e0d0e);
}

#delta-axo .delta-axo-body {
  font-family: var(--font-primary);
  font-weight: var(--refactored-body-weight, 400);
  font-size: var(--refactored-body-size);
  line-height: var(--refactored-body-line-height);
  margin: 0;
  color: var(--color-text, #0e0d0e);
}

/* Dot indicators for image cycle */
#delta-axo .delta-axo-dots {
  position: absolute;
  bottom: var(--layout-margin);
  /* Center dots under the image using same positioning as image wrapper */
  /* Image uses left + transform: translate(-50%) to center at that point */
  left: calc(50% - 11.025vw - 20px);
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 15;
  pointer-events: none;
}

#delta-axo .delta-axo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.25);
  transition: all 0.4s ease;
}

#delta-axo .delta-axo-dot.active {
  background-color: rgba(0, 0, 0, 0.8);
  transform: scale(1.2);
}

/* Mobile responsive layout */
@media (max-width: 1024px) {
  #delta-axo .delta-axo-container {
    flex-direction: column;
    justify-content: flex-start;
    padding-top: calc(var(--locked-vh) * 8);
    /* Use locked vh for stable mobile positioning */
  }

  #delta-axo .delta-axo-image-wrapper {
    position: relative;
    width: 80vw;
    max-width: none;
    max-height: calc(var(--locked-vh) * 55);
    /* Constrain image height to leave room for text + dots */
    left: 50%;
    top: auto;
    transform: translateX(-50%);
    margin: 0;
    z-index: 2;
  }

  #delta-axo .delta-axo-image-wrapper.delta-axo-image-2 {
    position: absolute;
    top: calc(var(--locked-vh) * 8);
    /* Aligned with container padding-top */
    left: 50%;
    transform: translateX(-50%);
    width: 80vw;
    height: auto;
    max-height: calc(var(--locked-vh) * 55);
    aspect-ratio: 1128 / 1582;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
  }

  #delta-axo .delta-axo-image {
    max-height: calc(var(--locked-vh) * 55);
    object-fit: contain;
  }

  #delta-axo .delta-axo-text-container {
    position: relative;
    width: 80vw;
    max-width: none;
    left: auto;
    bottom: auto;
    margin: calc(var(--locked-vh) * 2) auto calc(var(--locked-vh) * 3);
    z-index: 10;
  }

  #delta-axo .delta-axo-title {
    font-size: max(1rem, 4vw);
  }

  #delta-axo .delta-axo-body {
    font-size: max(0.9rem, 3.5vw);
  }

  /* Dots: center in viewport on tablet/mobile (image is also centered) */
  #delta-axo .delta-axo-dots {
    left: 50%;
    transform: translateX(-50%);
  }
}