/* ═══════════════════════════════════════════════════════════════════════
   IVAE Studios — Mobile Scrollytelling (avant-garde, animation-first)
   ───────────────────────────────────────────────────────────────────────
   This is NOT a portfolio template. It's a scroll experience inspired
   by Apple product pages, Awwwards FOTW sites, and NYT immersive stories.

   STRUCTURE = ANIMATIONS. Pinned scroll, 3D rotates, mask reveals,
   text cascades, counter ticks, depth carousels.

   Active only @media (max-width: 899px). Desktop unchanged.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ivm-gold:     #c9a54e;
  --ivm-gold-2:   #a8894a;
  --ivm-ink:      #0a0f17;
  --ivm-ink-2:    #10161e;
  --ivm-cream:    #faf8f5;
  --ivm-paper:    #fafaf8;
  --ivm-ease:     cubic-bezier(.22, 1, .36, 1);
  --ivm-ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* ═══ visibility gates ═══════════════════════════════════════════════ */
.ivm { display: none; }
@media (max-width: 899px) {
  .ivm { display: block; }
  /* Legacy desktop magazine masthead (editorial pages) — hide on mobile so
     only the .ivm experience shows. Applies to EN + ES editorial pages. */
  .le-masthead { display: none !important; }
  /* CRITICAL: body.ivm-page must NOT have overflow-y: auto or sticky breaks.
     Some pages (luxury-weddings) have inline body styles that set
     overflow-x: hidden, which makes the browser compute overflow-y: auto
     (per CSS spec: if one axis is hidden, the other becomes auto). That
     hidden/auto state turns body into the scroll container but with no
     defined height, sticky descendants stop sticking. Force overflow
     visible to keep the document/viewport as the scrollport. */
  body.ivm-page { overflow: visible !important; }
  html:has(body.ivm-page) { overflow-x: clip; }
  body.ivm-page .ivm-desktop-only { display: none !important; }
  /* Hide DESKTOP loader (.film-leader) on mobile — we use .ivm-loader instead */
  body.ivm-page .film-leader,
  body.ivm-page #filmLeader { display: none !important; }
  /* Hide the desktop COLOPHON footer on mobile — we use .ivm-act-foot instead */
  body.ivm-page footer.colophon,
  body.ivm-page .lw-faq,
  body.ivm-page .site-footer { display: none !important; }
  /* Hide desktop-only overlay elements that may peek through */
  body.ivm-page .lw-mob-pull-hint,
  body.ivm-page .lw-mob-tabs,
  body.ivm-page .lw-mob-scroll-top,
  body.ivm-page .lw-mob-portrait-hero,
  body.ivm-page .lw-section-indicator,
  body.ivm-page .lw-chapter-rail,
  body.ivm-page .lw-scroll-progress,
  body.ivm-page .lw-mob-chips,
  body.ivm-page .lw-mob-chapter-strip,
  body.ivm-page .lw-mob-chapter-strip-label,
  body.ivm-page .lw-sticky-mob,
  body.ivm-page .lw-sticky-desk,
  body.ivm-page .lw-mob-scrim,
  body.ivm-page .lw-mob-sheet,
  body.ivm-page .lw-mob-fab,
  body.ivm-page .ivae-chapter-counter,
  body.ivm-page .cur-dot,
  body.ivm-page .cur-ring,
  body.ivm-page .cur-preview,
  body.ivm-page .cur-trail,
  body.ivm-page .scroll-velo,
  body.ivm-page .gold-motes { display: none !important; }
}

/* ═══ MOBILE STYLES ALL INSIDE THIS @MEDIA ═══════════════════════════ */
@media (max-width: 899px) {

  body.ivm-page {
    background: var(--ivm-ink);
    color: var(--ivm-cream);
    font-family: 'Syne', system-ui, sans-serif;
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
  }

  .ivm input, .ivm select, .ivm textarea { font-size: 16px; }
  .ivm a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .ivm button { -webkit-tap-highlight-color: transparent; }

  /* ════════════════════════════════════════════════════════════════
     ACT 0 — LOADER (3 seconds, only on first visit)
     IVAE letters appear with stagger + 3D depth.
     ════════════════════════════════════════════════════════════════ */
  .ivm-loader {
    position: fixed;
    inset: 0;
    background: var(--ivm-ink);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: ivmLoaderExit 0.8s var(--ivm-ease) 2.8s forwards;
  }
  .ivm-loader__mark {
    display: flex;
    gap: 0.04em;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(54px, 16vw, 88px);
    color: var(--ivm-cream);
    letter-spacing: 0.02em;
    perspective: 800px;
  }
  .ivm-loader__mark span {
    display: inline-block;
    opacity: 0;
    transform: translateY(28px) rotateX(60deg);
    animation: ivmLoaderIn 0.75s var(--ivm-ease) forwards;
  }
  .ivm-loader__mark span:nth-child(1) { animation-delay: 0.1s; }
  .ivm-loader__mark span:nth-child(2) { animation-delay: 0.22s; }
  .ivm-loader__mark span:nth-child(3) { animation-delay: 0.34s; }
  .ivm-loader__mark span:nth-child(4) { animation-delay: 0.46s; }
  .ivm-loader__mark span.dot {
    color: var(--ivm-gold);
    animation-delay: 0.6s;
  }
  .ivm-loader__sub {
    position: absolute;
    bottom: 18vh;
    left: 0; right: 0;
    text-align: center;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    opacity: 0;
    animation: ivmLoaderInSub 0.6s var(--ivm-ease) 1.1s forwards;
  }
  @keyframes ivmLoaderIn {
    to { opacity: 1; transform: translateY(0) rotateX(0); }
  }
  @keyframes ivmLoaderInSub {
    to { opacity: 1; }
  }
  @keyframes ivmLoaderExit {
    0% { opacity: 1; clip-path: inset(0 0 0 0); }
    100% { opacity: 0; clip-path: inset(100% 0 0 0); pointer-events: none; visibility: hidden; }
  }
  body.ivm-loaded .ivm-loader { display: none; }

  /* ════════════════════════════════════════════════════════════════
     ACT I — HERO with parallax depth + 3D text cascade
     ════════════════════════════════════════════════════════════════ */
  .ivm-act-hero {
    position: relative;
    height: 100svh;
    min-height: 600px;
    overflow: hidden;
    perspective: 1200px;
    background: var(--ivm-ink);
  }
  .ivm-act-hero__layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .ivm-act-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    image-rendering: -webkit-optimize-contrast;
    transform: scale(1.04);
    opacity: 0;
    animation: ivmHeroPhotoIn 1.6s var(--ivm-ease) 1.4s forwards;
    will-change: transform, opacity;
  }
  @keyframes ivmHeroPhotoIn {
    to { transform: scale(1); opacity: 1; }
  }
  .ivm-act-hero__veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
      rgba(10,15,23,.08) 0%,
      rgba(10,15,23,.02) 35%,
      rgba(10,15,23,.26) 78%,
      rgba(10,15,23,.78) 100%);
    pointer-events: none;
  }

  .ivm-act-hero__copy {
    position: absolute;
    left: 24px; right: 24px;
    bottom: 12vh;
    z-index: 3;
    perspective: 800px;
  }
  .ivm-act-hero__eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    margin-bottom: 22px;
    opacity: 0;
    transform: translateY(20px);
    animation: ivmCopyIn 0.9s var(--ivm-ease) 2.2s forwards;
  }
  .ivm-act-hero__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(40px, 11vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.018em;
    color: var(--ivm-cream);
    margin: 0;
  }
  /* Each word in a span — staggered 3D entry */
  .ivm-act-hero__title .w {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.8em) translateZ(-200px);
    animation: ivmWordIn 1s var(--ivm-ease) forwards;
    white-space: pre;
  }
  .ivm-act-hero__title em {
    font-style: italic;
    color: var(--ivm-gold);
  }
  @keyframes ivmWordIn {
    to { opacity: 1; transform: translateY(0) translateZ(0); }
  }
  @keyframes ivmCopyIn {
    to { opacity: 1; transform: translateY(0); }
  }

  .ivm-act-hero__scroll {
    position: absolute;
    bottom: 4vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(250,248,245,.6);
    font-size: 9px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    z-index: 3;
    opacity: 0;
    animation: ivmCopyIn 0.6s var(--ivm-ease) 3.4s forwards;
  }
  .ivm-act-hero__scroll::before {
    content: '';
    width: 1px;
    height: 32px;
    background: linear-gradient(180deg, transparent, var(--ivm-gold));
    animation: ivmScrollPulse 2s ease-in-out infinite;
  }
  @keyframes ivmScrollPulse {
    0%, 100% { transform: scaleY(0.5); opacity: 0.4; }
    50% { transform: scaleY(1); opacity: 1; }
  }

  /* ════════════════════════════════════════════════════════════════
     ACT II — "THE HOUR" sticky scroll story (300vh tall)
     Photo pinned 100vh in center; 4 phrases reveal on scroll progress.
     ════════════════════════════════════════════════════════════════ */
  .ivm-act-hour {
    position: relative;
    height: 240vh;
    background: var(--ivm-ink);
  }
  .ivm-act-hour__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ivm-act-hour__photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.5) saturate(0.85);
    will-change: transform;
    /* Smooth catch-up between iOS Safari's sparse scroll events */
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ivm-act-hour__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
      transparent 0%,
      rgba(10,15,23,.4) 60%,
      rgba(10,15,23,.85) 100%);
  }
  .ivm-act-hour__stage {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
    perspective: 800px;
  }
  .ivm-act-hour__line {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(44px, 13vw, 68px);
    line-height: 1.04;
    letter-spacing: -0.012em;
    color: var(--ivm-cream);
    margin: 0;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s var(--ivm-ease), transform 1.1s var(--ivm-ease);
    will-change: opacity, transform;
  }
  .ivm-act-hour__line em {
    font-style: italic;
    color: var(--ivm-gold);
  }
  .ivm-act-hour__line.is-on {
    opacity: 1;
    transform: translateY(0);
  }
  .ivm-act-hour__line.is-off {
    opacity: 0;
    transform: translateY(-40px);
  }
  .ivm-act-hour__progress {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
  }
  .ivm-act-hour__progress span {
    width: 32px;
    height: 1px;
    background: rgba(250,248,245,.18);
    overflow: hidden;
    position: relative;
  }
  .ivm-act-hour__progress span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ivm-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ivm-ease);
  }
  .ivm-act-hour__progress span.is-on::after {
    transform: scaleX(1);
  }

  /* ════════════════════════════════════════════════════════════════
     ACT III — Services 3D card horizontal stack (sticky)
     Sticky 400vh container; 4 cards slide in on scroll, each rotateY.
     ════════════════════════════════════════════════════════════════ */
  .ivm-act-services {
    position: relative;
    height: 500vh;
    background: var(--ivm-ink-2);
  }
  .ivm-act-services__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1400px;
  }
  .ivm-act-services__title {
    position: absolute;
    top: 8vh;
    left: 0; right: 0;
    text-align: center;
    z-index: 5;
    padding: 22px 24px 16px;
    background: linear-gradient(180deg,
      rgba(10,15,23,.85) 0%,
      rgba(10,15,23,.78) 60%,
      rgba(10,15,23,0) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
  }
  .ivm-act-services__eyebrow {
    display: block;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    margin-bottom: 6px;
  }
  .ivm-act-services__title h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(22px, 6.8vw, 32px);
    line-height: 1.08;
    color: var(--ivm-cream);
    margin: 0;
    letter-spacing: -0.01em;
  }
  .ivm-act-services__title em {
    font-style: italic;
    color: var(--ivm-gold);
  }
  .ivm-act-services__stage {
    position: relative;
    width: 72vw;
    max-width: 300px;
    height: 56svh;
    max-height: 460px;
    margin-top: 8vh;
    transform-style: preserve-3d;
  }
  .ivm-svc {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(20,28,38,.96) 0%, rgba(14,20,28,.98) 100%);
    color: var(--ivm-cream);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
      0 32px 72px rgba(0,0,0,.6),
      0 14px 30px rgba(0,0,0,.4),
      inset 0 0 0 1px rgba(201,165,78,.32);
    transition: transform 0.6s var(--ivm-ease), opacity 0.5s var(--ivm-ease);
    will-change: transform, opacity;
    text-decoration: none;
  }
  /* Gold L-corner brackets — editorial frame, same as method cards */
  .ivm-svc::before,
  .ivm-svc::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(201,165,78,.55);
    pointer-events: none;
    z-index: 4;
  }
  .ivm-svc::before {
    top: 12px;
    left: 12px;
    border-right: none;
    border-bottom: none;
  }
  .ivm-svc::after {
    bottom: 12px;
    right: 12px;
    border-left: none;
    border-top: none;
  }
  .ivm-svc__photo {
    flex: 0 0 64%;
    overflow: hidden;
    position: relative;
    background: var(--ivm-ink);
  }
  .ivm-svc__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .ivm-svc__num {
    position: absolute;
    top: 14px; left: 14px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 36px;
    color: var(--ivm-gold);
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
  }
  .ivm-svc__body {
    flex: 1;
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
  }
  .ivm-svc__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 1.1;
    color: var(--ivm-cream);
    margin: 0;
  }
  .ivm-svc__title em { color: var(--ivm-gold); font-style: italic; }
  .ivm-svc__desc {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(250,248,245,.65);
    margin: 0;
    letter-spacing: 0.01em;
  }
  .ivm-svc__arrow {
    margin-top: auto;
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    align-self: flex-start;
    padding-top: 12px;
    border-top: 1px solid rgba(201,165,78,.32);
  }

  /* Card positions controlled by data-pos attribute via JS */
  .ivm-svc[data-pos="below"]   { transform: translateX(120vw) rotateY(-45deg); opacity: 0; }
  .ivm-svc[data-pos="active"]  { transform: translateX(0) rotateY(0deg) scale(1); opacity: 1; z-index: 3; }
  .ivm-svc[data-pos="behind"]  { transform: translateX(-30vw) rotateY(35deg) scale(0.85); opacity: 0.4; z-index: 2; }
  .ivm-svc[data-pos="past"]    { transform: translateX(-100vw) rotateY(60deg); opacity: 0; z-index: 1; }

  /* Vertical dots on right edge — signals downward scroll, not horizontal */
  .ivm-act-services__dots {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 5;
  }
  .ivm-act-services__dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(250,248,245,.24);
    transition: height 0.4s var(--ivm-ease), background 0.4s var(--ivm-ease);
  }
  .ivm-act-services__dots span.is-on {
    height: 22px;
    border-radius: 3px;
    background: var(--ivm-gold);
  }

  /* ════════════════════════════════════════════════════════════════
     ACT IV — Counter section (animated tick-up numbers)
     ════════════════════════════════════════════════════════════════ */
  .ivm-act-counter {
    padding: 80px 24px 96px;
    background: var(--ivm-ink);
    text-align: center;
  }
  .ivm-act-counter__eyebrow {
    display: block;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    margin-bottom: 12px;
  }
  .ivm-act-counter h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.1;
    color: var(--ivm-cream);
    margin: 0 0 48px;
  }
  .ivm-act-counter h2 em { font-style: italic; color: var(--ivm-gold); }
  .ivm-act-counter__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(201,165,78,.22);
    border: 1px solid rgba(201,165,78,.22);
  }
  .ivm-stat {
    background: var(--ivm-ink);
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
  }
  .ivm-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 100%, rgba(201,165,78,.08), transparent 60%);
    pointer-events: none;
  }
  .ivm-stat__num {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(40px, 11vw, 56px);
    line-height: 1;
    color: var(--ivm-gold);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .ivm-stat__label {
    font-family: 'Syne', sans-serif;
    font-size: 9.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(250,248,245,.5);
    text-align: center;
    line-height: 1.4;
  }

  /* ════════════════════════════════════════════════════════════════
     ACT V — Depth reel (Apple Pay-style horizontal carousel)
     Center card 1.0 scale, neighbors 0.8 scale + blur.
     ════════════════════════════════════════════════════════════════ */
  .ivm-act-reel {
    padding: 96px 0 80px;
    background: var(--ivm-ink-2);
    overflow: hidden;
  }
  .ivm-act-reel__head {
    padding: 0 24px;
    margin-bottom: 32px;
    text-align: center;
  }
  .ivm-act-reel__eyebrow {
    display: block;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    margin-bottom: 12px;
  }
  .ivm-act-reel__head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.1;
    color: var(--ivm-cream);
    margin: 0;
  }
  .ivm-act-reel__head em { font-style: italic; color: var(--ivm-gold); }
  .ivm-act-reel__track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 24px 12vw 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    perspective: 1200px;
  }
  .ivm-act-reel__track::-webkit-scrollbar { display: none; }
  .ivm-reel-card {
    flex: 0 0 76vw;
    max-width: 320px;
    scroll-snap-align: center;
    aspect-ratio: 5/6;
    position: relative;
    overflow: hidden;
    background: var(--ivm-ink);
    transform: scale(0.94);
    filter: brightness(0.95) saturate(0.95);
    opacity: 0.92;
    transition: transform 0.5s var(--ivm-ease),
                filter 0.5s var(--ivm-ease),
                opacity 0.5s var(--ivm-ease),
                box-shadow 0.5s var(--ivm-ease);
    will-change: transform, filter, opacity;
    box-shadow: 0 8px 20px rgba(0,0,0,.3);
  }
  .ivm-reel-card.is-center {
    transform: scale(1.02);
    filter: brightness(1.05) saturate(1.05);
    opacity: 1;
    box-shadow: 0 24px 48px rgba(0,0,0,.5),
                0 0 0 1px rgba(201,165,78,.32);
  }
  .ivm-reel-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .ivm-reel-card__meta {
    position: absolute;
    left: 16px; right: 16px;
    bottom: 16px;
    color: var(--ivm-cream);
    z-index: 2;
  }
  .ivm-reel-card__meta::before {
    content: '';
    position: absolute;
    inset: -60px -16px -16px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.85));
    z-index: -1;
  }
  .ivm-reel-card__venue {
    display: block;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    margin-bottom: 4px;
  }
  .ivm-reel-card__title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.25;
    color: var(--ivm-cream);
  }

  /* ════════════════════════════════════════════════════════════════
     ACT VI — Mask reveal CTA (final block)
     Tap = expanding gold circle fills screen, reveals next step.
     ════════════════════════════════════════════════════════════════ */
  .ivm-act-cta {
    position: relative;
    height: 100svh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--ivm-ink);
    overflow: hidden;
  }
  .ivm-act-cta__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.32;
    filter: saturate(0.6);
    transform: scale(1.15);
    animation: ivmCtaBg 16s ease-in-out infinite alternate;
  }
  @keyframes ivmCtaBg {
    to { transform: scale(1.05); }
  }
  .ivm-act-cta__veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center,
      transparent 0%,
      rgba(10,15,23,.6) 50%,
      rgba(10,15,23,.95) 100%);
  }
  .ivm-act-cta__inner {
    position: relative;
    z-index: 2;
    padding: 0 24px;
    max-width: 380px;
  }
  .ivm-act-cta__eyebrow {
    display: block;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    margin-bottom: 18px;
  }
  .ivm-act-cta__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(40px, 11vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.018em;
    color: var(--ivm-cream);
    margin: 0 0 24px;
  }
  .ivm-act-cta__title em { font-style: italic; color: var(--ivm-gold); }
  .ivm-act-cta__sub {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    color: rgba(250,248,245,.7);
    margin: 0 0 40px;
    max-width: 28ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* Magnetic gold button with tap ripple */
  .ivm-act-cta__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 240px;
    height: 64px;
    padding: 0 28px;
    background: var(--ivm-gold);
    color: var(--ivm-ink);
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 16px 40px -8px rgba(201,165,78,.45);
    transition: transform 0.12s var(--ivm-ease-back),
                box-shadow 0.3s var(--ivm-ease);
  }
  .ivm-act-cta__btn::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    background: var(--ivm-ink);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.55s var(--ivm-ease), height 0.55s var(--ivm-ease);
    z-index: 0;
  }
  .ivm-act-cta__btn:active::before {
    width: 600px; height: 600px;
  }
  .ivm-act-cta__btn span {
    position: relative;
    z-index: 1;
    transition: color 0.4s var(--ivm-ease);
  }
  .ivm-act-cta__btn:active span { color: var(--ivm-cream); }
  .ivm-act-cta__btn:active {
    transform: scale(0.97);
    box-shadow: 0 8px 20px -8px rgba(201,165,78,.6);
  }
  .ivm-act-cta__alt {
    display: block;
    margin-top: 24px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 15px;
    color: rgba(250,248,245,.6);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--ivm-gold);
  }

  /* ════════════════════════════════════════════════════════════════
     ABOUT — "IVAE The Studio"
     Brand-first about page with heavy 3D scroll effects.
     Vianey is mentioned as founder, but the subject is THE STUDIO.
     ════════════════════════════════════════════════════════════════ */

  /* ── ACT I — Hero "IVAE" 3D parallax letters ──────────────── */
  .ivm-st-hero {
    position: relative;
    min-height: 100svh;
    background: var(--ivm-ink);
    color: var(--ivm-cream);
    overflow: hidden;
    perspective: 1400px;
    perspective-origin: 50% 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: calc(72px + env(safe-area-inset-top, 0px)) 16px 80px;
  }
  .ivm-st-hero__bg {
    position: absolute;
    inset: -10%;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(201,165,78,.08) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 80%, rgba(201,165,78,.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
  .ivm-st-hero__motes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }
  .ivm-st-hero__motes span {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--ivm-gold);
    border-radius: 50%;
    opacity: 0;
    animation: ivmMoteFloat 6s ease-in-out infinite;
  }
  .ivm-st-hero__motes span:nth-child(1){left:8%;top:22%;animation-delay:.0s}
  .ivm-st-hero__motes span:nth-child(2){left:78%;top:18%;animation-delay:1.2s}
  .ivm-st-hero__motes span:nth-child(3){left:22%;top:74%;animation-delay:2.4s}
  .ivm-st-hero__motes span:nth-child(4){left:64%;top:64%;animation-delay:3.0s}
  .ivm-st-hero__motes span:nth-child(5){left:42%;top:38%;animation-delay:4.2s}
  @keyframes ivmMoteFloat {
    0%,100% { opacity: 0; transform: translateY(0) scale(.7); }
    50% { opacity: .9; transform: translateY(-12px) scale(1.2); }
  }
  .ivm-st-hero__eyebrow {
    position: relative;
    z-index: 2;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    margin-bottom: 28px;
    opacity: 0;
    animation: ivmFadeIn 0.8s var(--ivm-ease) 2s forwards;
  }
  .ivm-st-hero__letters {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 0;
    transform-style: preserve-3d;
    perspective: 1000px;
    margin-bottom: 12px;
  }
  .ivm-st-hero__letters span {
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(86px, 28vw, 160px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--ivm-cream);
    opacity: 0;
    transform: translateY(80px) rotateX(60deg) translateZ(-200px);
    animation: ivmLetter3D 1.2s var(--ivm-ease) forwards;
    will-change: transform, opacity;
  }
  .ivm-st-hero__letters span:nth-child(1){ animation-delay: 1.6s; }
  .ivm-st-hero__letters span:nth-child(2){ animation-delay: 1.78s; }
  .ivm-st-hero__letters span:nth-child(3){ animation-delay: 1.96s; }
  .ivm-st-hero__letters span:nth-child(4){ animation-delay: 2.14s; color: var(--ivm-gold); }
  @keyframes ivmLetter3D {
    to { opacity: 1; transform: translateY(0) rotateX(0) translateZ(0); }
  }
  .ivm-st-hero__sub {
    position: relative;
    z-index: 2;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 22px;
    color: rgba(250,248,245,.7);
    text-align: center;
    margin: 32px 0 0;
    opacity: 0;
    animation: ivmFadeIn 0.8s var(--ivm-ease) 3s forwards;
  }
  .ivm-st-hero__sub em { color: var(--ivm-gold); font-style: italic; }
  .ivm-st-hero__meta {
    position: relative;
    z-index: 2;
    margin-top: 48px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: 'Syne', sans-serif;
    font-size: 9.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(250,248,245,.5);
    opacity: 0;
    animation: ivmFadeIn 0.8s var(--ivm-ease) 3.4s forwards;
  }
  .ivm-st-hero__meta span + span::before {
    content: '·';
    margin-right: 14px;
    color: var(--ivm-gold);
  }
  .ivm-st-hero__scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-family: 'Syne', sans-serif;
    font-size: 9px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(250,248,245,.5);
    opacity: 0;
    animation: ivmFadeIn 0.6s var(--ivm-ease) 3.8s forwards;
  }
  .ivm-st-hero__scroll::before {
    content: '';
    display: block;
    width: 1px;
    height: 28px;
    margin: 0 auto 12px;
    background: linear-gradient(180deg, transparent, var(--ivm-gold));
    animation: ivmScrollPulse 2.4s ease-in-out infinite;
  }
  @keyframes ivmFadeIn { to { opacity: 1; } }

  /* ── ACT II — Manifesto: sticky 3D phrase reveal ─────────── */
  .ivm-st-manifesto {
    position: relative;
    height: 320vh;
    background: var(--ivm-ink);
  }
  .ivm-st-manifesto__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    perspective: 1400px;
    /* Pure typographic stage — NO photo backdrop */
    background-color: var(--ivm-ink);
  }
  /* Gold radial ambient + faint geometric grid overlay */
  .ivm-st-manifesto__pin::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 50% 40%, rgba(201,165,78,.10) 0%, transparent 55%),
      radial-gradient(ellipse at 80% 80%, rgba(201,165,78,.05) 0%, transparent 50%);
    z-index: 1;
    pointer-events: none;
  }
  /* Editorial frame: gold rule top + gold corner ornaments */
  .ivm-st-manifesto__pin::after {
    content: '';
    position: absolute;
    top: 84px;
    left: 50%;
    transform: translateX(-50%);
    width: min(60%, 240px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,165,78,.55) 20%, rgba(201,165,78,.55) 80%, transparent);
    pointer-events: none;
    z-index: 2;
  }
  .ivm-st-manifesto__stage {
    position: relative;
    width: 100%;
    max-width: 600px;
    text-align: center;
    padding: 0 24px;
    transform-style: preserve-3d;
    z-index: 3;
    /* Stage needs height for absolutely-positioned phrases to center against;
       phrases are full-viewport-positioned via inset:50% from this stage */
    min-height: 100svh;
    box-sizing: border-box;
  }
  .ivm-st-manifesto__phrase {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(44px, 13vw, 68px);
    line-height: 1.04;
    color: var(--ivm-cream);
    letter-spacing: -0.018em;
    margin: 0;
    opacity: 0;
    transform: rotateX(80deg) translateZ(-100px);
    transition: opacity 1.2s var(--ivm-ease), transform 1.4s var(--ivm-ease);
    will-change: opacity, transform;
    position: absolute;
    inset: 50% 0 auto 0;
    transform-origin: center bottom;
    width: 100%;
    padding: 0 24px;
    text-shadow: 0 1px 32px rgba(10,15,23,.85);
  }
  /* Gold Roman numeral above each phrase */
  .ivm-st-manifesto__phrase::before {
    content: attr(data-num);
    display: block;
    font-family: 'Syne', sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.55em;
    color: var(--ivm-gold);
    text-transform: uppercase;
    margin-bottom: 28px;
    padding-bottom: 18px;
    position: relative;
  }
  .ivm-st-manifesto__phrase::after {
    content: attr(data-byline);
    display: block;
    width: fit-content;
    margin: 36px auto 0;
    padding-top: 18px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    color: rgba(250,248,245,.55);
    letter-spacing: 0.04em;
    border-top: 1px solid rgba(201,165,78,.28);
    white-space: nowrap;
  }
  .ivm-st-manifesto__phrase em {
    font-style: italic;
    color: var(--ivm-gold);
  }
  .ivm-st-manifesto__phrase.is-on {
    opacity: 1;
    transform: rotateX(0) translateZ(0) translateY(-50%);
  }
  .ivm-st-manifesto__phrase.is-off {
    opacity: 0;
    transform: rotateX(-80deg) translateZ(-100px) translateY(-50%);
  }
  .ivm-st-manifesto__bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(201,165,78,.05) 0%, transparent 60%);
    pointer-events: none;
  }
  /* Floating gold motes — ambient texture */
  .ivm-st-manifesto__motes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
  }
  .ivm-st-manifesto__motes span {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--ivm-gold);
    opacity: 0;
    animation: ivmManMote 9s ease-in-out infinite;
  }
  .ivm-st-manifesto__motes span:nth-child(1){left:12%;top:18%;animation-delay:0s}
  .ivm-st-manifesto__motes span:nth-child(2){left:84%;top:28%;animation-delay:1.5s}
  .ivm-st-manifesto__motes span:nth-child(3){left:18%;top:78%;animation-delay:3s}
  .ivm-st-manifesto__motes span:nth-child(4){left:74%;top:72%;animation-delay:4.5s}
  .ivm-st-manifesto__motes span:nth-child(5){left:48%;top:14%;animation-delay:6s}
  .ivm-st-manifesto__motes span:nth-child(6){left:6%;top:48%;animation-delay:7.5s}
  @keyframes ivmManMote {
    0%, 100% { opacity: 0; transform: translateY(0); }
    50% { opacity: .55; transform: translateY(-18px); }
  }
  /* Counter row above progress dots */
  .ivm-st-manifesto__counter {
    position: absolute;
    bottom: 76px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 0.02em;
  }
  .ivm-st-manifesto__counter strong {
    font-style: italic;
    font-weight: 400;
    font-size: 36px;
    color: var(--ivm-gold);
    line-height: 1;
    transition: opacity .4s var(--ivm-ease);
  }
  .ivm-st-manifesto__counter em {
    font-style: normal;
    color: rgba(250,248,245,.4);
    font-size: 16px;
    line-height: 1;
  }
  .ivm-st-manifesto__counter span {
    font-family: 'Syne', sans-serif;
    font-size: 9px;
    letter-spacing: 0.5em;
    color: rgba(250,248,245,.35);
    text-transform: uppercase;
    margin-left: 12px;
  }
  .ivm-st-manifesto__progress {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 3;
  }
  .ivm-st-manifesto__progress span {
    width: 32px;
    height: 1px;
    background: rgba(250,248,245,.2);
    overflow: hidden;
    position: relative;
  }
  .ivm-st-manifesto__progress span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ivm-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ivm-ease);
  }
  .ivm-st-manifesto__progress span.is-on::after { transform: scaleX(1); }
  /* Eyebrow ornament at top */
  .ivm-st-manifesto__eyebrow {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.55em;
    color: rgba(201,165,78,.7);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
  }
  .ivm-st-manifesto__eyebrow::before,
  .ivm-st-manifesto__eyebrow::after {
    content: '';
    width: 24px;
    height: 1px;
    background: rgba(201,165,78,.5);
  }

  /* ── ACT III — The Method: 3D card stack fan-out (3 cards) ── */
  .ivm-st-method {
    position: relative;
    height: 400vh;
    background: var(--ivm-ink-2);
  }
  .ivm-st-method__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    perspective: 1500px;
    padding: 0 16px;
  }
  .ivm-st-method__head {
    position: absolute;
    top: 8vh;
    left: 0; right: 0;
    text-align: center;
    z-index: 10;
    padding: 22px 24px 16px;
    background: linear-gradient(180deg,
      rgba(16,22,30,.92) 0%,
      rgba(16,22,30,.8) 60%,
      rgba(16,22,30,0) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
  }
  .ivm-st-method__head .eyebrow {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    margin-bottom: 8px;
  }
  .ivm-st-method__head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.1;
    color: var(--ivm-cream);
    margin: 0;
    letter-spacing: -0.01em;
  }
  .ivm-st-method__head em {
    font-style: italic;
    color: var(--ivm-gold);
  }
  .ivm-st-method__deck {
    position: relative;
    width: 80vw;
    max-width: 320px;
    height: 72svh;
    max-height: 580px;
    min-height: 480px;
    transform-style: preserve-3d;
    margin-top: 10vh;
  }
  .ivm-st-card {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(20,28,38,.96) 0%, rgba(14,20,28,.98) 100%);
    color: var(--ivm-cream);
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    overflow: hidden;
    box-shadow:
      0 32px 72px rgba(0,0,0,.6),
      0 14px 30px rgba(0,0,0,.4),
      inset 0 0 0 1px rgba(201,165,78,.32);
    transition: transform 0.7s var(--ivm-ease), opacity 0.6s var(--ivm-ease);
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
  /* Gold L-corner brackets — editorial frame */
  .ivm-st-card::before,
  .ivm-st-card::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(201,165,78,.55);
    pointer-events: none;
    z-index: 2;
  }
  .ivm-st-card::before {
    top: 12px;
    left: 12px;
    border-right: none;
    border-bottom: none;
  }
  .ivm-st-card::after {
    bottom: 12px;
    right: 12px;
    border-left: none;
    border-top: none;
  }
  /* Soft gold ambient at top-left corner */
  .ivm-st-card-glow {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 20% 0%, rgba(201,165,78,.10) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
  }
  .ivm-st-card > * { position: relative; z-index: 1; }
  .ivm-st-card__num {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 48px;
    color: var(--ivm-gold);
    line-height: 1;
    margin-bottom: 12px;
    opacity: 0.9;
  }
  .ivm-st-card__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 28px;
    line-height: 1.1;
    color: var(--ivm-cream);
    margin: 0 0 14px;
  }
  .ivm-st-card__title em { color: var(--ivm-gold); font-style: italic; }
  .ivm-st-card__body {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(250,248,245,.65);
    margin: 0 0 14px;
  }
  /* Step counter — top-right of card */
  .ivm-st-card__step {
    position: absolute;
    top: 22px;
    right: 22px;
    font-family: 'Syne', sans-serif;
    font-size: 9px;
    letter-spacing: 0.4em;
    color: rgba(201,165,78,.55);
    text-transform: uppercase;
    z-index: 3;
  }
  /* Bullet list of mini-steps */
  .ivm-st-card__list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: block;
  }
  .ivm-st-card__list li {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14px;
    color: rgba(250,248,245,.62);
    position: relative;
    padding: 4px 0 4px 22px;
    letter-spacing: 0.01em;
    line-height: 1.3;
  }
  .ivm-st-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(0.62em + 4px);
    width: 12px;
    height: 1px;
    background: var(--ivm-gold);
  }
  /* Meta row at bottom: big duration figure + tag */
  .ivm-st-card__meta {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(201,165,78,.18);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
  }
  .ivm-st-card__duration {
    font-family: 'Cormorant Garamond', serif;
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
  }
  .ivm-st-card__duration strong {
    font-style: italic;
    font-weight: 400;
    font-size: 30px;
    color: var(--ivm-gold);
    line-height: 1;
  }
  .ivm-st-card__duration small {
    font-family: 'Syne', sans-serif;
    font-size: 9px;
    letter-spacing: 0.32em;
    color: rgba(250,248,245,.45);
    text-transform: uppercase;
    line-height: 1;
  }
  .ivm-st-card__tag {
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    line-height: 1;
    text-align: right;
  }
  /* Deck positions controlled via data-pos */
  .ivm-st-card[data-pos="deep"]   { transform: translateY(40vh) translateZ(-200px) rotateX(20deg); opacity: 0; z-index: 1; }
  .ivm-st-card[data-pos="next"]   { transform: translateY(8vh) translateZ(-60px) rotateX(6deg) scale(0.92); opacity: 0.6; z-index: 2; }
  .ivm-st-card[data-pos="active"] { transform: translateY(0) translateZ(0) rotateX(0) scale(1); opacity: 1; z-index: 4; }
  .ivm-st-card[data-pos="prev"]   { transform: translateY(-12vh) translateZ(-80px) rotateX(-10deg) scale(0.88); opacity: 0.3; z-index: 3; }
  .ivm-st-card[data-pos="past"]   { transform: translateY(-40vh) translateZ(-200px) rotateX(-20deg); opacity: 0; z-index: 0; }

  .ivm-st-method__progress {
    position: absolute;
    bottom: 10vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
  }
  .ivm-st-method__progress span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(250,248,245,.18);
    transition: background 0.4s var(--ivm-ease), width 0.4s var(--ivm-ease);
  }
  .ivm-st-method__progress span.is-on {
    width: 28px;
    border-radius: 4px;
    background: var(--ivm-gold);
  }

  /* ── ACT IV — Founder: Vianey mentioned as Founder ─────────── */
  .ivm-st-founder {
    position: relative;
    background: var(--ivm-ink);
    color: var(--ivm-cream);
    padding: 96px 24px 80px;
    overflow: hidden;
    isolation: isolate;
  }
  /* Gold ambient layers — luxury atmosphere */
  .ivm-st-founder::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 50% 22%, rgba(201,165,78,.14) 0%, transparent 55%),
      radial-gradient(ellipse at 30% 78%, rgba(201,165,78,.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
  /* Thin top + bottom gold rule dividers */
  .ivm-st-founder::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: min(60%, 220px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,165,78,.45), transparent);
    pointer-events: none;
    z-index: 1;
  }
  .ivm-st-founder > * { position: relative; z-index: 2; }
  .ivm-st-founder__eyebrow {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    margin-bottom: 14px;
    text-align: center;
  }
  .ivm-st-founder h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.05;
    color: var(--ivm-cream);
    margin: 0 0 40px;
    text-align: center;
    letter-spacing: -0.005em;
  }
  .ivm-st-founder h2 em {
    font-style: italic;
    color: var(--ivm-gold);
  }
  .ivm-st-founder__wall {
    position: relative;
    min-height: 380px;
    perspective: 1000px;
    margin: 32px auto 40px;
    max-width: 360px;
  }
  /* Editorial photo frames — NO white card, just the image with gold corner brackets */
  .ivm-st-founder__pola {
    position: absolute;
    background: transparent;
    padding: 0;
    will-change: transform;
  }
  /* Gold L-corner brackets — editorial magazine accent */
  .ivm-st-founder__pola::before,
  .ivm-st-founder__pola::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(201,165,78,.85);
    pointer-events: none;
    z-index: 3;
  }
  .ivm-st-founder__pola::before {
    top: -6px;
    left: -6px;
    border-right: none;
    border-bottom: none;
  }
  .ivm-st-founder__pola::after {
    bottom: -6px;
    right: -6px;
    border-left: none;
    border-top: none;
  }
  .ivm-st-founder__pola img {
    /* height:auto es OBLIGATORIO: el optimizador de imágenes pone
       height="480" en el HTML y sin esto la proporción se ignora,
       la foto crece al doble y se encima con el texto. */
    height: auto;
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
    filter: saturate(0.92) contrast(1.06);
    box-shadow:
      0 32px 64px rgba(0,0,0,.55),
      0 14px 28px rgba(0,0,0,.35);
  }
  /* Gold scrim + caption inside bottom of image */
  .ivm-st-founder__pola figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 36px 12px 10px;
    background: linear-gradient(180deg, transparent, rgba(10,15,23,.78));
    font-family: 'Syne', sans-serif;
    font-size: 8px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    text-align: center;
    z-index: 2;
  }
  .ivm-st-founder__pola--1 {
    top: 8px;
    left: 4px;
    width: 54%;
    transform: rotate(-6deg);
  }
  .ivm-st-founder__pola--2 {
    top: 56px;
    right: 0;
    width: 48%;
    transform: rotate(5deg);
  }
  .ivm-st-founder__pola--3 {
    bottom: 18px;
    left: 18%;
    width: 60%;
    transform: rotate(-2deg);
  }
  .ivm-st-founder__body {
    text-align: center;
    max-width: 36ch;
    margin: 0 auto;
  }
  .ivm-st-founder__body p {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(250,248,245,.78);
    margin: 0;
    letter-spacing: 0.005em;
  }
  .ivm-st-founder__body p + p { margin-top: 18px; }
  .ivm-st-founder__body em {
    font-style: italic;
    color: var(--ivm-gold);
  }
  .ivm-st-founder__sign {
    margin-top: 36px;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    color: var(--ivm-gold);
    position: relative;
    padding-top: 28px;
  }
  /* Gold ornament dot above signature */
  .ivm-st-founder__sign::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--ivm-gold);
    box-shadow: 0 0 12px rgba(201,165,78,.6);
  }

  /* ── ACT V — Atlas: SVG Mexico with pulsing markers ────────── */
  .ivm-st-atlas {
    position: relative;
    background: var(--ivm-ink);
    color: var(--ivm-cream);
    padding: 96px 16px 80px;
    overflow: hidden;
    text-align: center;
  }
  .ivm-st-atlas__head {
    margin-bottom: 32px;
  }
  .ivm-st-atlas__eyebrow {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    margin-bottom: 12px;
  }
  .ivm-st-atlas__head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.05;
    color: var(--ivm-cream);
    margin: 0;
  }
  .ivm-st-atlas__head em { font-style: italic; color: var(--ivm-gold); }
  .ivm-st-atlas__map {
    width: 100%;
    max-width: 340px;
    margin: 0 auto 32px;
    aspect-ratio: 4/3;
    position: relative;
  }
  .ivm-st-atlas__map svg {
    width: 100%; height: 100%;
    overflow: visible;
  }
  .ivm-st-atlas__coast {
    fill: none;
    stroke: var(--ivm-gold);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.45;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: ivmCoastDraw 3s var(--ivm-ease) forwards;
  }
  @keyframes ivmCoastDraw {
    to { stroke-dashoffset: 0; }
  }
  .ivm-st-atlas__pin {
    fill: var(--ivm-gold);
    transform-origin: center;
    animation: ivmPinPulse 2.4s ease-in-out infinite;
  }
  .ivm-st-atlas__pin-ring {
    fill: none;
    stroke: var(--ivm-gold);
    stroke-width: 1;
    opacity: 0;
    animation: ivmPinRing 2.4s ease-out infinite;
  }
  @keyframes ivmPinPulse {
    0%,100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.8; }
  }
  @keyframes ivmPinRing {
    0% { r: 4; opacity: 0.8; }
    100% { r: 22; opacity: 0; }
  }
  .ivm-st-atlas__labels {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    margin-top: 12px;
  }

  /* ── ACT VI — Numbers with 3D flip ──────────────────────── */
  .ivm-st-numbers {
    position: relative;
    background: var(--ivm-ink-2);
    color: var(--ivm-cream);
    padding: 96px 16px 80px;
    overflow: hidden;
  }
  .ivm-st-numbers__head {
    text-align: center;
    margin-bottom: 48px;
  }
  .ivm-st-numbers__head .eyebrow {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    margin-bottom: 12px;
  }
  .ivm-st-numbers__head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(28px, 8vw, 38px);
    color: var(--ivm-cream);
    margin: 0;
  }
  .ivm-st-numbers__head em { font-style: italic; color: var(--ivm-gold); }
  .ivm-st-numbers__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(201,165,78,.22);
    border: 1px solid rgba(201,165,78,.22);
    max-width: 380px;
    margin: 0 auto;
    perspective: 600px;
  }
  .ivm-st-num {
    background: var(--ivm-ink-2);
    padding: 36px 14px;
    text-align: center;
    transform-style: preserve-3d;
    transform: rotateX(-90deg);
    opacity: 0;
    transition: transform 0.9s var(--ivm-ease), opacity 0.7s var(--ivm-ease);
    will-change: transform, opacity;
  }
  .ivm-st-num.is-flipped {
    transform: rotateX(0);
    opacity: 1;
  }
  .ivm-st-num__val {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(40px, 11vw, 56px);
    line-height: 1;
    color: var(--ivm-gold);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
  }
  .ivm-st-num__lbl {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(250,248,245,.6);
    line-height: 1.4;
  }

  /* ── ACT VII — Values 3D cube rotating ──────────────────── */
  .ivm-st-values {
    position: relative;
    height: 350vh;
    background: var(--ivm-ink);
  }
  .ivm-st-values__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    perspective: 1000px;
  }
  .ivm-st-values__head {
    position: absolute;
    top: 12vh;
    left: 0; right: 0;
    text-align: center;
    padding: 0 24px;
    z-index: 5;
  }
  .ivm-st-values__head .eyebrow {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    margin-bottom: 12px;
  }
  .ivm-st-values__head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(24px, 7vw, 32px);
    color: var(--ivm-cream);
    margin: 0;
  }
  .ivm-st-values__head em { font-style: italic; color: var(--ivm-gold); }
  .ivm-st-values__cube {
    width: min(220px, 60vw);
    height: min(220px, 60vw);
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(0deg) translateZ(0);
    /* No CSS transition — JS rAF loop interpolates with lerp for buttery iOS Safari */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .ivm-st-values__face {
    position: absolute;
    inset: 0;
    background: rgba(201,165,78,.06);
    border: 1px solid rgba(201,165,78,.32);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
  }
  .ivm-st-values__face .v-num {
    font-style: italic;
    font-size: 28px;
    color: var(--ivm-gold);
    margin-bottom: 10px;
    line-height: 1;
  }
  .ivm-st-values__face .v-title {
    font-size: 22px;
    color: var(--ivm-cream);
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 10px;
  }
  .ivm-st-values__face .v-title em { font-style: italic; color: var(--ivm-gold); }
  .ivm-st-values__face .v-body {
    font-style: italic;
    font-size: 14px;
    color: rgba(250,248,245,.7);
    line-height: 1.4;
    margin: 0;
  }
  .ivm-st-values__face--front  { transform: rotateY(0deg)   translateZ(calc(min(110px, 30vw))); }
  .ivm-st-values__face--right  { transform: rotateY(90deg)  translateZ(calc(min(110px, 30vw))); }
  .ivm-st-values__face--back   { transform: rotateY(180deg) translateZ(calc(min(110px, 30vw))); }
  .ivm-st-values__face--left   { transform: rotateY(-90deg) translateZ(calc(min(110px, 30vw))); }
  .ivm-st-values__hint {
    position: absolute;
    bottom: 10vh;
    left: 0; right: 0;
    text-align: center;
    font-family: 'Syne', sans-serif;
    font-size: 9px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(250,248,245,.4);
  }

  /* ── ACT VIII — CTA Brand-focused ───────────────────────── */
  .ivm-st-cta {
    position: relative;
    background: var(--ivm-gold);
    color: var(--ivm-ink);
    padding: 120px 32px;
    text-align: center;
    overflow: hidden;
  }
  .ivm-st-cta::before {
    content: '';
    position: absolute;
    inset: -20%;
    background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.18), transparent 50%);
    pointer-events: none;
  }
  .ivm-st-cta__inner {
    position: relative;
    z-index: 2;
    max-width: 380px;
    margin: 0 auto;
  }
  .ivm-st-cta__eyebrow {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-ink);
    opacity: 0.7;
    margin-bottom: 20px;
  }
  .ivm-st-cta__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(40px, 11vw, 56px);
    line-height: 1;
    color: var(--ivm-ink);
    margin: 0 0 20px;
    letter-spacing: -0.018em;
  }
  .ivm-st-cta__title em { font-style: italic; }
  .ivm-st-cta__sub {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 17px;
    color: rgba(14,22,32,.78);
    line-height: 1.5;
    margin: 0 0 40px;
  }
  .ivm a.ivm-st-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    height: 64px;
    padding: 0 28px;
    background: var(--ivm-ink);
    color: var(--ivm-cream);
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 16px 40px -10px rgba(10,15,23,.45);
    transition: transform 0.18s var(--ivm-ease-back);
  }
  .ivm-st-cta__btn:active { transform: scale(0.97); }
  .ivm-st-cta__alt {
    display: block;
    margin-top: 22px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 15px;
    color: var(--ivm-ink);
    text-decoration: underline;
    text-decoration-color: rgba(14,22,32,.4);
    text-underline-offset: 4px;
  }

  /* ════════════════════════════════════════════════════════════════
     WEDDINGS — Six-act cinematic experience (.ivm-wd-*)
     ════════════════════════════════════════════════════════════════ */

  /* ── ACT I — Wedding hero: full-bleed photo + serif title ──── */
  .ivm-wd-hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    background: var(--ivm-ink);
    color: var(--ivm-cream);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: calc(72px + env(safe-area-inset-top, 0px)) 24px 96px;
  }
  .ivm-wd-hero__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .ivm-wd-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Keep bride's face in the upper third — text lives in lower half */
    object-position: 50% 22%;
    transform: scale(1.04);
    opacity: 0;
    animation: ivmWdHeroIn 1.6s var(--ivm-ease) 1.3s forwards;
  }
  @keyframes ivmWdHeroIn {
    to { transform: scale(1); opacity: 1; }
  }
  .ivm-wd-hero__veil {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg,
        rgba(10,15,23,.32) 0%,
        rgba(10,15,23,.05) 22%,
        rgba(10,15,23,.05) 42%,
        rgba(10,15,23,.55) 62%,
        rgba(10,15,23,.92) 85%,
        rgba(10,15,23,.98) 100%);
    z-index: 1;
    pointer-events: none;
  }
  .ivm-wd-hero__motes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
  }
  .ivm-wd-hero__motes span {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--ivm-gold);
    opacity: 0;
    animation: ivmManMote 9s ease-in-out infinite;
  }
  .ivm-wd-hero__motes span:nth-child(1){left:18%;top:30%;animation-delay:.0s}
  .ivm-wd-hero__motes span:nth-child(2){left:82%;top:46%;animation-delay:2s}
  .ivm-wd-hero__motes span:nth-child(3){left:42%;top:72%;animation-delay:4s}
  .ivm-wd-hero__motes span:nth-child(4){left:70%;top:24%;animation-delay:6s}
  .ivm-wd-hero__copy {
    position: relative;
    z-index: 3;
    max-width: 560px;
  }
  .ivm-wd-hero__eyebrow {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.55em;
    color: var(--ivm-gold);
    text-transform: uppercase;
    margin-bottom: 18px;
    opacity: 0;
    transform: translateY(8px);
    animation: ivmWdFadeUp 0.8s var(--ivm-ease) 1.0s forwards;
  }
  .ivm-wd-hero__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(40px, 12vw, 60px);
    line-height: 1.02;
    margin: 0 0 24px;
    color: var(--ivm-cream);
    letter-spacing: -0.015em;
    text-shadow: 0 2px 32px rgba(10,15,23,.6);
  }
  .ivm-wd-hero__title em {
    font-style: italic;
    color: var(--ivm-gold);
  }
  .ivm-wd-hero__title .line {
    display: block;
    overflow: hidden;
  }
  .ivm-wd-hero__title .line > span {
    display: inline-block;
    transform: translateY(110%);
    animation: ivmWdLineIn 1.0s var(--ivm-ease) forwards;
  }
  .ivm-wd-hero__title .line:nth-child(1) > span { animation-delay: 1.4s; }
  .ivm-wd-hero__title .line:nth-child(2) > span { animation-delay: 1.65s; }
  @keyframes ivmWdLineIn { to { transform: translateY(0); } }
  .ivm-wd-hero__sub {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(16px, 4.4vw, 19px);
    line-height: 1.4;
    color: rgba(250,248,245,.78);
    margin: 0 0 22px;
    max-width: 38ch;
    opacity: 0;
    animation: ivmWdFadeUp 0.8s var(--ivm-ease) 2.0s forwards;
  }
  .ivm-wd-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    opacity: 0;
    animation: ivmWdFadeUp 0.8s var(--ivm-ease) 2.3s forwards;
  }
  .ivm-wd-hero__meta span {
    font-family: 'Syne', sans-serif;
    font-size: 9px;
    letter-spacing: 0.42em;
    color: rgba(250,248,245,.78);
    text-transform: uppercase;
    padding: 7px 14px;
    border: 1px solid rgba(201,165,78,.42);
    border-radius: 999px;
  }
  @keyframes ivmWdFadeUp {
    to { opacity: 1; transform: translateY(0); }
  }
  .ivm-wd-hero__scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-family: 'Syne', sans-serif;
    font-size: 9px;
    letter-spacing: 0.55em;
    color: rgba(201,165,78,.65);
    text-transform: uppercase;
    padding-bottom: 22px;
    opacity: 0;
    animation: ivmWdFadeUp 0.8s var(--ivm-ease) 2.6s forwards;
  }
  .ivm-wd-hero__scroll::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 14px;
    background: linear-gradient(180deg, transparent, var(--ivm-gold));
    animation: ivmScrollPulse 2.4s ease-in-out infinite;
  }

  /* ── ACT III — Timeline of the wedding day ──────────────────── */
  .ivm-wd-timeline {
    position: relative;
    background: var(--ivm-ink);
    color: var(--ivm-cream);
    padding: 96px 20px 80px;
    overflow: hidden;
    isolation: isolate;
  }
  .ivm-wd-timeline::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 60% 20%, rgba(201,165,78,.10) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
  .ivm-wd-timeline > * { position: relative; z-index: 1; }
  .ivm-wd-timeline__head {
    text-align: center;
    margin-bottom: 50px;
  }
  .ivm-wd-timeline__eyebrow {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.5em;
    color: var(--ivm-gold);
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .ivm-wd-timeline__head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.05;
    color: var(--ivm-cream);
    margin: 0;
  }
  .ivm-wd-timeline__head em { font-style: italic; color: var(--ivm-gold); }
  .ivm-wd-timeline__list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  /* Vertical gold line running through timeline */
  .ivm-wd-timeline__list::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 56px;
    width: 1px;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(201,165,78,.45) 8%,
      rgba(201,165,78,.45) 92%,
      transparent 100%);
  }
  .ivm-wd-timeline__entry {
    position: relative;
    padding: 14px 0 28px 96px;
    display: grid;
    gap: 8px;
    transition: opacity 0.6s var(--ivm-ease), transform 0.6s var(--ivm-ease);
    opacity: 0;
    transform: translateY(16px);
  }
  .ivm-wd-timeline__entry.is-on {
    opacity: 1;
    transform: translateY(0);
  }
  /* Gold pin dot on the line */
  .ivm-wd-timeline__entry::before {
    content: '';
    position: absolute;
    left: 51px;
    top: 22px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--ivm-ink);
    border: 2px solid var(--ivm-gold);
    box-shadow: 0 0 14px rgba(201,165,78,.5);
    z-index: 2;
  }
  /* Highlight: the golden hour entry (data-star) */
  .ivm-wd-timeline__entry[data-star]::before {
    background: var(--ivm-gold);
    box-shadow: 0 0 20px rgba(201,165,78,.85);
  }
  .ivm-wd-timeline__time {
    position: absolute;
    left: 0;
    top: 14px;
    width: 46px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 18px;
    color: var(--ivm-gold);
    text-align: right;
    line-height: 1;
    letter-spacing: 0.01em;
  }
  .ivm-wd-timeline__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 19px;
    color: var(--ivm-cream);
    margin: 0;
    line-height: 1.2;
  }
  .ivm-wd-timeline__title em { font-style: italic; color: var(--ivm-gold); }
  .ivm-wd-timeline__desc {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(250,248,245,.55);
    margin: 0;
  }
  .ivm-wd-timeline__entry[data-star] .ivm-wd-timeline__title {
    color: var(--ivm-gold);
  }
  .ivm-wd-timeline__entry[data-star] .ivm-wd-timeline__desc {
    color: rgba(250,248,245,.75);
  }

  /* ── ACT IV — Cinema Deck (sticky full-bleed slideshow) ──────
     Single venue takes full viewport, scroll cycles through with 3D
     crossfade + ken-burns. Magazine masthead + side numerical counter.
     The pattern luxury houses use (Bottega, Loewe, Ferragamo). */
  .ivm-wd-cinema {
    position: relative;
    height: 600vh;
    background: var(--ivm-ink);
    color: var(--ivm-cream);
  }
  .ivm-wd-cinema__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    perspective: 1800px;
    perspective-origin: 50% 50%;
  }
  /* Magazine masthead — REMOVED by request (was competing with hero photo) */
  .ivm-wd-cinema__masthead {
    display: none !important;
  }
  /* Deck of full-bleed frames stacked */
  .ivm-wd-cinema__deck {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
  }
  .ivm-wd-frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.04) translateZ(0);
    transition:
      opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1),
      transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .ivm-wd-frame[data-pos="active"] {
    opacity: 1;
    transform: scale(1) translateZ(0);
    z-index: 3;
  }
  .ivm-wd-frame[data-pos="next"] {
    opacity: 0;
    transform: scale(1.08) translateZ(80px) rotateY(-12deg);
    z-index: 2;
  }
  .ivm-wd-frame[data-pos="past"] {
    opacity: 0;
    transform: scale(0.96) translateZ(-120px) rotateY(12deg);
    z-index: 1;
  }
  .ivm-wd-frame[data-pos="deep"] {
    opacity: 0;
    transform: scale(1.12) translateZ(160px);
    z-index: 0;
  }
  .ivm-wd-frame__photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .ivm-wd-frame__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.94) contrast(1.06);
  }
  /* Ken Burns slow zoom while active */
  .ivm-wd-frame[data-pos="active"] .ivm-wd-frame__photo img {
    animation: ivmWdKenBurns 14s ease-out forwards;
  }
  @keyframes ivmWdKenBurns {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
  }
  /* Scrim for legibility */
  .ivm-wd-frame__veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
      rgba(10,15,23,.45) 0%,
      rgba(10,15,23,.10) 25%,
      rgba(10,15,23,.20) 55%,
      rgba(10,15,23,.88) 100%);
    pointer-events: none;
    z-index: 1;
  }
  /* Title block — bottom of frame */
  .ivm-wd-frame__copy {
    position: absolute;
    bottom: 100px;
    left: 24px;
    right: 24px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .ivm-wd-frame__num {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--ivm-gold);
    letter-spacing: 0.04em;
    line-height: 1;
  }
  .ivm-wd-frame__name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(36px, 11vw, 56px);
    line-height: 1.02;
    color: var(--ivm-cream);
    margin: 0;
    letter-spacing: -0.018em;
    text-shadow: 0 4px 32px rgba(10,15,23,.7);
  }
  .ivm-wd-frame__name em {
    font-style: italic;
    color: var(--ivm-gold);
  }
  .ivm-wd-frame__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.4em;
    color: rgba(250,248,245,.78);
    text-transform: uppercase;
    padding-top: 12px;
    border-top: 1px solid rgba(201,165,78,.4);
  }
  .ivm-wd-frame__meta::before {
    content: '';
    width: 18px;
    height: 1px;
    background: var(--ivm-gold);
  }
  /* Active frame title slides up */
  .ivm-wd-frame[data-pos="active"] .ivm-wd-frame__copy {
    animation: ivmWdCopyIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  @keyframes ivmWdCopyIn {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
  }
  /* Side counter — bottom-right, just above the title block */
  .ivm-wd-cinema__counter {
    position: absolute;
    right: 22px;
    bottom: 200px;
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    font-family: 'Cormorant Garamond', serif;
  }
  .ivm-wd-cinema__counter strong {
    font-style: italic;
    font-weight: 400;
    font-size: 44px;
    color: var(--ivm-gold);
    line-height: 1;
    transition: opacity .35s ease;
  }
  .ivm-wd-cinema__counter em {
    font-style: normal;
    font-size: 16px;
    color: rgba(250,248,245,.45);
    line-height: 1;
    margin-top: -8px;
  }
  /* Progress dots — bottom center */
  .ivm-wd-cinema__progress {
    position: absolute;
    bottom: 42px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    gap: 14px;
  }
  .ivm-wd-cinema__progress span {
    width: 22px;
    height: 1px;
    background: rgba(250,248,245,.22);
    overflow: hidden;
    position: relative;
  }
  .ivm-wd-cinema__progress span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ivm-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ivm-ease);
  }
  .ivm-wd-cinema__progress span.is-on::after { transform: scaleX(1); }

  /* ── LEGACY — old venues mosaic (kept for fallback) ─────────── */
  .ivm-wd-venues {
    position: relative;
    background: var(--ivm-ink);
    color: var(--ivm-cream);
    padding: 100px 0 60px;
    overflow: hidden;
    isolation: isolate;
  }
  .ivm-wd-venues::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(201,165,78,.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
  .ivm-wd-venues > * { position: relative; z-index: 1; }
  .ivm-wd-venues__head {
    text-align: center;
    margin-bottom: 70px;
    padding: 0 24px;
  }
  .ivm-wd-venues__eyebrow {
    display: inline-block;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.55em;
    color: var(--ivm-gold);
    text-transform: uppercase;
    margin-bottom: 14px;
    padding: 0 18px;
    position: relative;
  }
  .ivm-wd-venues__eyebrow::before,
  .ivm-wd-venues__eyebrow::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 1px;
    background: rgba(201,165,78,.4);
  }
  .ivm-wd-venues__eyebrow::before { right: 100%; }
  .ivm-wd-venues__eyebrow::after { left: 100%; }
  .ivm-wd-venues__head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.02;
    color: var(--ivm-cream);
    margin: 0;
    letter-spacing: -0.015em;
  }
  .ivm-wd-venues__head em { font-style: italic; color: var(--ivm-gold); }
  /* 3D editorial spread stack — each venue tilts on scroll */
  .ivm-wd-venues__grid {
    display: flex;
    flex-direction: column;
    gap: 80px;
    counter-reset: venue;
    perspective: 1400px;
    perspective-origin: 50% 50%;
  }
  .ivm-wd-venue {
    position: relative;
    padding: 0 24px;
    transform-style: preserve-3d;
    opacity: 0;
    transform: rotateY(-22deg) rotateX(8deg) translateZ(-120px) translateY(40px);
    transition:
      transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 1.0s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
  }
  .ivm-wd-venue:nth-child(even) {
    transform: rotateY(22deg) rotateX(8deg) translateZ(-120px) translateY(40px);
  }
  .ivm-wd-venue.is-on,
  .ivm-wd-venue.is-on:nth-child(even) {
    opacity: 1;
    transform: rotateY(0) rotateX(0) translateZ(0) translateY(0);
  }
  /* Editorial spread number — top right of each venue */
  .ivm-wd-venue::before {
    content: counter(venue, decimal-leading-zero) ' / 06';
    counter-increment: venue;
    position: absolute;
    top: -32px;
    right: 24px;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.42em;
    color: rgba(201,165,78,.7);
    text-transform: uppercase;
    z-index: 3;
    transform: translateZ(40px);
  }
  /* Photo frame — its own 3D layer */
  .ivm-wd-venue__frame {
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(20px);
    overflow: hidden;
    box-shadow:
      0 50px 100px rgba(0,0,0,.65),
      0 24px 48px rgba(0,0,0,.45),
      0 0 0 1px rgba(201,165,78,.12);
  }
  /* Gold L-corner brackets on the photo, in 3D */
  .ivm-wd-venue__frame::before,
  .ivm-wd-venue__frame::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1px solid var(--ivm-gold);
    pointer-events: none;
    z-index: 4;
    transform: translateZ(2px);
  }
  .ivm-wd-venue__frame::before {
    top: 10px; left: 10px;
    border-right: none; border-bottom: none;
  }
  .ivm-wd-venue__frame::after {
    bottom: 10px; right: 10px;
    border-left: none; border-top: none;
  }
  .ivm-wd-venue img {
    /* height:auto es OBLIGATORIO: el optimizador de imágenes pone
       height="480" en el HTML y sin esto la proporción se ignora,
       la foto crece al doble y se encima con el texto. */
    height: auto;
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
    filter: saturate(0.94) contrast(1.05);
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    /* Slight scale on entry, settles to 1 */
  }
  /* Gold scrim at bottom of image for caption legibility */
  .ivm-wd-venue__frame > div.shade {
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    background: linear-gradient(180deg, transparent, rgba(10,15,23,.72));
    pointer-events: none;
    z-index: 2;
    transform: translateZ(1px);
  }
  .ivm-wd-venue figcaption {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(201,165,78,.32);
    text-align: left;
    transform: translateZ(0);
  }
  /* Alternate caption alignment for editorial rhythm */
  .ivm-wd-venue:nth-child(even) figcaption {
    text-align: right;
  }
  .ivm-wd-venue__name {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(24px, 6.5vw, 30px);
    color: var(--ivm-cream);
    line-height: 1.05;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
  }
  .ivm-wd-venue__date {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.45em;
    color: var(--ivm-gold);
    text-transform: uppercase;
  }
  /* While in viewport: scroll-driven tilt animation via data-tilt */
  .ivm-wd-venue[data-tilt] .ivm-wd-venue__frame {
    transition: transform 0.4s linear;
  }

  /* ── ACT I — Typographic Masthead (no full-bleed hero photo) ─── */
  .ivm-about-mast {
    position: relative;
    min-height: 100svh;
    background: var(--ivm-paper);
    color: var(--ivm-ink);
    padding: calc(80px + env(safe-area-inset-top, 0px)) 24px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }
  .ivm-about-mast::before {
    content: 'ISSUE NO 3 · VOL II · 2026';
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold-2);
  }
  .ivm-about-mast::after {
    content: '';
    position: absolute;
    top: 130px;
    left: 24px;
    right: 24px;
    height: 1px;
    background: var(--ivm-gold);
    opacity: .4;
  }
  .ivm-about-mast__bylinetop {
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold-2);
    margin-bottom: 20px;
  }
  .ivm-about-mast__name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(54px, 16vw, 96px);
    line-height: 0.92;
    letter-spacing: -0.025em;
    color: var(--ivm-ink);
    margin: 0;
  }
  .ivm-about-mast__name em {
    font-style: italic;
    color: var(--ivm-gold-2);
    display: block;
    padding-left: 8%;
  }
  .ivm-about-mast__role {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.4;
    color: rgba(10,15,23,.65);
    margin: 24px 0 0;
    max-width: 24ch;
  }
  .ivm-about-mast__polaroid {
    margin: 56px auto 0;
    background: white;
    padding: 14px 14px 32px;
    box-shadow: 0 14px 36px rgba(10,15,23,.18), 0 2px 6px rgba(10,15,23,.08);
    transform: rotate(-2.5deg);
    width: min(220px, 60vw);
    position: relative;
  }
  .ivm-about-mast__polaroid img {
    /* height:auto es OBLIGATORIO: el optimizador de imágenes pone
       height="480" en el HTML y sin esto la proporción se ignora,
       la foto crece al doble y se encima con el texto. */
    height: auto;
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
    filter: saturate(0.92) contrast(1.02);
  }
  .ivm-about-mast__polaroid figcaption {
    position: absolute;
    bottom: 8px;
    left: 14px;
    right: 14px;
    font-family: 'Syne', sans-serif;
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(10,15,23,.55);
    text-align: center;
  }
  .ivm-about-mast__scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(10,15,23,.5);
    font-family: 'Syne', sans-serif;
    font-size: 9px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
  }

  /* ── ACT II — Editor's Letter ─────────────────────────────── */
  .ivm-about-letter {
    background: var(--ivm-cream);
    color: var(--ivm-ink);
    padding: 96px 32px;
    text-align: center;
    border-top: 1px solid rgba(201,165,78,.22);
    border-bottom: 1px solid rgba(201,165,78,.22);
    position: relative;
  }
  .ivm-about-letter__ornament {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 48px;
    color: var(--ivm-gold);
    line-height: 1;
    margin-bottom: 20px;
    display: block;
  }
  .ivm-about-letter__eyebrow {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold-2);
    margin-bottom: 22px;
  }
  .ivm-about-letter blockquote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 26px;
    line-height: 1.35;
    color: var(--ivm-ink);
    margin: 0;
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
  }
  .ivm-about-letter blockquote em {
    color: var(--ivm-gold-2);
    font-style: italic;
  }
  .ivm-about-letter cite {
    display: block;
    margin-top: 32px;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ivm-gold-2);
    font-style: normal;
  }

  /* ── ACT III — Career Timeline ─────────────────────────────── */
  .ivm-about-timeline {
    background: var(--ivm-ink);
    color: var(--ivm-cream);
    padding: 96px 24px 64px;
  }
  .ivm-about-timeline__head {
    text-align: center;
    margin-bottom: 56px;
  }
  .ivm-about-timeline__head .ivm-act-counter__eyebrow {
    margin-bottom: 12px;
  }
  .ivm-about-timeline__head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.05;
    color: var(--ivm-cream);
    margin: 0;
  }
  .ivm-about-timeline__head em {
    font-style: italic;
    color: var(--ivm-gold);
  }
  .ivm-about-timeline__list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    padding-left: 56px;
  }
  .ivm-about-timeline__list::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: linear-gradient(180deg,
      var(--ivm-gold) 0%,
      var(--ivm-gold) 50%,
      transparent 100%);
  }
  .ivm-about-chapter {
    position: relative;
    padding-bottom: 56px;
  }
  .ivm-about-chapter:last-child { padding-bottom: 0; }
  .ivm-about-chapter::before {
    content: '';
    position: absolute;
    left: -44px;
    top: 8px;
    width: 13px;
    height: 13px;
    border: 1px solid var(--ivm-gold);
    background: var(--ivm-ink);
    border-radius: 50%;
    transition: background 0.4s var(--ivm-ease), box-shadow 0.4s var(--ivm-ease);
  }
  .ivm-about-chapter.is-on::before {
    background: var(--ivm-gold);
    box-shadow: 0 0 0 4px rgba(201,165,78,.18);
  }
  .ivm-about-chapter__year {
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 32px;
    color: var(--ivm-gold);
    line-height: 1;
    margin-bottom: 4px;
  }
  .ivm-about-chapter__place {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 9.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(250,248,245,.5);
    margin-bottom: 12px;
  }
  .ivm-about-chapter__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.18;
    color: var(--ivm-cream);
    margin: 0 0 8px;
  }
  .ivm-about-chapter__title em {
    font-style: italic;
    color: var(--ivm-gold);
  }
  .ivm-about-chapter__body {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(250,248,245,.72);
    margin: 0;
  }

  /* ── ACT IV — Gallery Masonry (no scroll-snap, just stagger) ── */
  .ivm-about-gallery {
    background: var(--ivm-ink-2);
    color: var(--ivm-cream);
    padding: 96px 16px 80px;
  }
  .ivm-about-gallery__head {
    padding: 0 8px;
    margin-bottom: 32px;
  }
  .ivm-about-gallery__head .eyebrow {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    margin-bottom: 10px;
  }
  .ivm-about-gallery__head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.05;
    color: var(--ivm-cream);
    margin: 0;
  }
  .ivm-about-gallery__head em {
    font-style: italic;
    color: var(--ivm-gold);
  }
  .ivm-about-gallery__grid {
    column-count: 2;
    column-gap: 8px;
  }
  .ivm-about-gallery__grid figure {
    break-inside: avoid;
    margin: 0 0 8px;
    overflow: hidden;
    background: var(--ivm-ink);
  }
  .ivm-about-gallery__grid img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.7s var(--ivm-ease);
  }
  .ivm-about-gallery__grid figure:active img {
    transform: scale(1.04);
  }
  .ivm-about-gallery__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 8px 12px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.7));
    font-family: 'Syne', sans-serif;
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ivm-cream);
    pointer-events: none;
  }

  /* ── ACT V — Voice (3 swipeable quotes) ───────────────────── */
  .ivm-about-voice {
    background: var(--ivm-paper);
    color: var(--ivm-ink);
    padding: 96px 0 80px;
    overflow: hidden;
  }
  .ivm-about-voice__head {
    text-align: center;
    padding: 0 32px;
    margin-bottom: 48px;
  }
  .ivm-about-voice__head .eyebrow {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold-2);
    margin-bottom: 10px;
  }
  .ivm-about-voice__head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(28px, 8vw, 38px);
    color: var(--ivm-ink);
    margin: 0;
  }
  .ivm-about-voice__head em {
    font-style: italic;
    color: var(--ivm-gold-2);
  }
  .ivm-about-voice__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 16px 0 24px;
  }
  .ivm-about-voice__track::-webkit-scrollbar { display: none; }
  .ivm-about-voice__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    padding: 0 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .ivm-about-voice__num {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    color: var(--ivm-gold-2);
    opacity: 0.6;
  }
  .ivm-about-voice__quote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 7.5vw, 36px);
    line-height: 1.18;
    color: var(--ivm-ink);
    margin: 0;
    max-width: 18ch;
  }
  .ivm-about-voice__quote em {
    color: var(--ivm-gold-2);
  }
  .ivm-about-voice__attr {
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ivm-gold-2);
  }
  .ivm-about-voice__dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 24px;
  }
  .ivm-about-voice__dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(10,15,23,.18);
    transition: background 0.3s var(--ivm-ease), width 0.3s var(--ivm-ease);
  }
  .ivm-about-voice__dots span.is-active {
    width: 24px;
    border-radius: 3px;
    background: var(--ivm-gold-2);
  }

  /* ── ACT VI — Personal CTA (different from home's gold block) ── */
  .ivm-about-write {
    background: var(--ivm-ink);
    color: var(--ivm-cream);
    padding: 120px 32px 100px;
    text-align: center;
    position: relative;
  }
  .ivm-about-write::before {
    content: '§';
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 36px;
    color: var(--ivm-gold);
    opacity: 0.5;
    margin-bottom: 28px;
  }
  .ivm-about-write__opener {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(40px, 11vw, 56px);
    line-height: 1;
    color: var(--ivm-cream);
    margin: 0 0 12px;
  }
  .ivm-about-write__opener em {
    font-style: italic;
    color: var(--ivm-gold);
  }
  .ivm-about-write__signature {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    color: var(--ivm-gold);
    margin: 0 0 56px;
  }
  .ivm-about-write__email {
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    color: var(--ivm-cream);
    text-decoration: underline;
    text-decoration-color: var(--ivm-gold);
    text-underline-offset: 8px;
    margin-bottom: 24px;
  }
  .ivm-about-write__alt {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(250,248,245,.5);
    margin-top: 16px;
  }
  .ivm-about-write__alt a {
    color: var(--ivm-gold);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* ════════════════════════════════════════════════════════════════
     FOOTER — minimal
     ════════════════════════════════════════════════════════════════ */
  .ivm-act-foot {
    padding: 80px 24px calc(80px + 86px + env(safe-area-inset-bottom, 0px));
    background: var(--ivm-ink);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-top: 1px solid rgba(201,165,78,.12);
  }
  .ivm-act-foot__mark {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 32px;
    color: var(--ivm-cream);
  }
  .ivm-act-foot__mark em { color: var(--ivm-gold); }
  .ivm-act-foot__tag {
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(250,248,245,.4);
  }
  .ivm-act-foot__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px;
    margin: 8px auto 0;
    max-width: 320px;
    padding: 0 16px;
  }
  .ivm-act-foot__links a {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--ivm-gold);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s var(--ivm-ease);
  }
  .ivm-act-foot__links a:active { border-bottom-color: var(--ivm-gold); }
  .ivm-act-foot__copy {
    font-family: 'Syne', sans-serif;
    font-size: 9px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(250,248,245,.5);
    margin-top: 12px;
  }
  .ivm-act-foot__contact {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 4px;
  }
  .ivm-act-foot__contact a {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 18px;
    color: var(--ivm-cream);
    transition: color 0.3s var(--ivm-ease);
  }
  .ivm-act-foot__contact a:active { color: var(--ivm-gold); }
  .ivm-act-foot__costas {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 2px;
  }
  .ivm-act-foot__costas a {
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(250,248,245,.5);
    transition: color 0.3s var(--ivm-ease);
  }
  .ivm-act-foot__costas a:active { color: var(--ivm-gold); }

  /* ════════════════════════════════════════════════════════════════
     REDUCED MOTION
     ════════════════════════════════════════════════════════════════ */
  @media (prefers-reduced-motion: reduce) {
    .ivm-loader,
    .ivm-act-hero__photo,
    .ivm-act-hero__title .w,
    .ivm-act-hero__eyebrow,
    .ivm-act-hero__scroll,
    .ivm-act-hour__line,
    .ivm-svc {
      animation-duration: 0.001ms !important;
      transition-duration: 0.001ms !important;
      opacity: 1 !important;
      transform: none !important;
    }
    .ivm-reel-card { filter: none; opacity: 1; transform: none; }
  }

  /* ════════════════════════════════════════════════════════════════
     ACT JL — JOURNAL (blog mobile redesign)
     Magazine masthead + featured story + category pills + article grid
     ════════════════════════════════════════════════════════════════ */
  .ivm-jl-masthead {
    position: relative;
    padding: calc(80px + env(safe-area-inset-top, 0px)) 24px 56px;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(201,165,78,.06) 0%, transparent 60%),
      linear-gradient(180deg, var(--ivm-ink) 0%, #060a10 100%);
    color: var(--ivm-cream);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
  }
  .ivm-jl-masthead::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: min(60%, 240px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,165,78,.55), transparent);
  }
  .ivm-jl-masthead__eyebrow {
    font-family: 'Syne', sans-serif;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    margin-bottom: 18px;
    opacity: 0;
    transform: translateY(8px);
    animation: ivmJlIn .8s var(--ivm-ease) .25s forwards;
  }
  .ivm-jl-masthead__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(56px, 16vw, 88px);
    line-height: 0.98;
    margin: 0;
    letter-spacing: -0.022em;
    opacity: 0;
    transform: translateY(14px);
    animation: ivmJlIn .9s var(--ivm-ease) .4s forwards;
  }
  .ivm-jl-masthead__title em {
    font-style: italic;
    color: var(--ivm-gold);
  }
  .ivm-jl-masthead__tag {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 17px;
    color: rgba(250,248,245,.72);
    margin: 26px 0 0;
    max-width: 280px;
    opacity: 0;
    transform: translateY(10px);
    animation: ivmJlIn .9s var(--ivm-ease) .65s forwards;
  }
  @keyframes ivmJlIn {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Featured story — large card */
  .ivm-jl-feature {
    display: block;
    position: relative;
    height: 92svh;
    background: var(--ivm-ink);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
  }
  .ivm-jl-feature__photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .ivm-jl-feature__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 2s var(--ivm-ease);
  }
  .ivm-jl-feature:hover .ivm-jl-feature__photo img {
    transform: scale(1.03);
  }
  .ivm-jl-feature__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(10,15,23,.12) 0%,
      rgba(10,15,23,.04) 20%,
      rgba(10,15,23,.40) 52%,
      rgba(10,15,23,.78) 78%,
      rgba(10,15,23,.95) 100%);
    z-index: 1;
  }
  .ivm-jl-feature__copy {
    position: absolute;
    bottom: 76px;
    left: 24px;
    right: 24px;
    color: var(--ivm-cream);
    z-index: 2;
  }
  .ivm-jl-feature__cat {
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    margin: 0 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .ivm-jl-feature__cat::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--ivm-gold);
  }
  .ivm-jl-feature__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(36px, 10.5vw, 52px);
    line-height: 1.04;
    margin: 0 0 18px;
    letter-spacing: -0.018em;
  }
  .ivm-jl-feature__title em {
    font-style: italic;
    color: var(--ivm-gold);
  }
  .ivm-jl-feature__desc {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(250,248,245,.86);
    margin: 0 0 24px;
    max-width: 360px;
  }
  .ivm-jl-feature__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    border-bottom: 1px solid rgba(201,165,78,.55);
    padding-bottom: 7px;
    text-decoration: none;
    transition: color .3s var(--ivm-ease), border-color .3s var(--ivm-ease), gap .3s var(--ivm-ease);
  }
  .ivm-jl-feature__cta::after {
    content: '→';
    transition: transform .3s var(--ivm-ease);
  }
  .ivm-jl-feature__cta:active::after,
  .ivm-jl-feature__cta:hover::after {
    transform: translateX(4px);
  }

  /* Category pills — horizontal scroll */
  .ivm-jl-cats {
    background: var(--ivm-ink);
    padding: 22px 0 14px;
  }
  .ivm-jl-cats__row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 0 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ivm-jl-cats__row::-webkit-scrollbar { display: none; }
  .ivm-jl-cats__pill {
    flex: 0 0 auto;
    padding: 9px 13px;
    border: 0;
    background: transparent;
    border-radius: 0;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(250,248,245,.5);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: color .3s var(--ivm-ease);
  }
  .ivm-jl-cats__pill::after {
    content: '';
    position: absolute;
    left: 13px; right: 13px; bottom: 0;
    height: 1.5px;
    background: var(--ivm-gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .35s var(--ivm-ease);
  }
  .ivm-jl-cats__pill.is-on {
    color: var(--ivm-gold);
  }
  .ivm-jl-cats__pill.is-on::after {
    transform: scaleX(1);
  }
  .ivm-jl-cats__pill:active {
    transform: scale(0.97);
  }

  /* Section title above grid */
  .ivm-jl-grid {
    background: var(--ivm-ink);
    padding: 56px 0 24px;
  }
  .ivm-jl-grid__head {
    padding: 0 24px 48px;
    text-align: center;
  }
  .ivm-jl-grid__eyebrow {
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    display: block;
    margin-bottom: 14px;
  }
  .ivm-jl-grid__h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(34px, 9.5vw, 48px);
    line-height: 1.04;
    color: var(--ivm-cream);
    margin: 0;
    letter-spacing: -0.018em;
  }
  .ivm-jl-grid__h2 em {
    font-style: italic;
    color: var(--ivm-gold);
  }

  /* Article card */
  .ivm-jl-card {
    display: block;
    margin: 0 24px 60px;
    text-decoration: none;
    color: inherit;
    position: relative;
  }
  .ivm-jl-card__photo {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--ivm-ink-2);
    margin-bottom: 22px;
  }
  .ivm-jl-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ivm-ease);
  }
  .ivm-jl-card:active .ivm-jl-card__photo img {
    transform: scale(1.04);
  }
  .ivm-jl-card__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 70%, rgba(10,15,23,.32) 100%);
    pointer-events: none;
  }
  .ivm-jl-card__cat {
    font-family: 'Syne', sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  .ivm-jl-card__cat::before {
    content: '';
    width: 18px;
    height: 1px;
    background: var(--ivm-gold);
  }
  .ivm-jl-card__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 28px;
    line-height: 1.14;
    color: var(--ivm-cream);
    margin: 0 0 12px;
    letter-spacing: -0.012em;
  }
  .ivm-jl-card__title em {
    font-style: italic;
    color: var(--ivm-gold);
  }
  .ivm-jl-card__desc {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.52;
    color: rgba(250,248,245,.62);
    margin: 0 0 18px;
  }
  .ivm-jl-card__read {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    border-bottom: 1px solid rgba(201,165,78,.4);
    padding-bottom: 5px;
  }
  .ivm-jl-card__read::after { content: '→'; transition: transform .3s var(--ivm-ease); }
  .ivm-jl-card:active .ivm-jl-card__read::after { transform: translateX(4px); }

  /* All stories CTA */
  .ivm-jl-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 40px 24px 80px;
    padding: 26px 24px;
    text-align: center;
    border: 1px solid rgba(201,165,78,.4);
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    text-decoration: none;
    background: transparent;
    transition: all .35s var(--ivm-ease);
    position: relative;
    overflow: hidden;
  }
  .ivm-jl-all::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(201,165,78,.10) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .8s var(--ivm-ease);
  }
  .ivm-jl-all:hover::before,
  .ivm-jl-all:active::before {
    transform: translateX(100%);
  }
  .ivm-jl-all::after { content: '→'; }

  /* Subscribe block — editorial */
  .ivm-jl-sub {
    background:
      radial-gradient(ellipse at 50% 30%, rgba(201,165,78,.06) 0%, transparent 60%),
      var(--ivm-ink-2);
    padding: 90px 28px 80px;
    text-align: center;
    color: var(--ivm-cream);
    position: relative;
  }
  .ivm-jl-sub::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: min(60%, 240px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,165,78,.55), transparent);
  }
  .ivm-jl-sub__eyebrow {
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ivm-gold);
    display: block;
    margin-bottom: 18px;
  }
  .ivm-jl-sub__h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(34px, 9.5vw, 48px);
    line-height: 1.04;
    margin: 0 0 18px;
    letter-spacing: -0.018em;
  }
  .ivm-jl-sub__h2 em {
    font-style: italic;
    color: var(--ivm-gold);
  }
  .ivm-jl-sub__desc {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(250,248,245,.72);
    margin: 0 auto 32px;
    max-width: 320px;
  }
  .ivm-jl-sub__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    height: 64px;
    padding: 0 28px;
    background: var(--ivm-ink);
    color: var(--ivm-cream);
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(201,165,78,.45);
    transition: all .35s var(--ivm-ease);
  }
  .ivm-jl-sub__btn:active {
    background: var(--ivm-gold);
    color: var(--ivm-ink);
    border-color: var(--ivm-gold);
  }


/* ═══════════════════════════════════════════════════════════════════════
   TABLET PORTRAIT (600–899px)
   The .ivm layout is phone-first; at tablet width its single-column card
   grids stretch edge-to-edge (e.g. journal cards ~720px wide). Lay cards
   out two-up and tighten spacing so the tablet uses its width. Full-bleed
   cinematic acts already scale, so only the grids need help.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 899px) {
  .ivm-jl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    row-gap: 8px;
    padding: 56px 40px 24px;
  }
  .ivm-jl-grid__head,
  .ivm-jl-all { grid-column: 1 / -1; }
  .ivm-jl-card { margin: 0 0 44px; }
}


/* ── Journal: complete archive ──────────────────────────────────────────
   The visual grid only surfaces the 10 newest posts, which left every other
   post without a single internal link (264 orphans). This text index gives
   crawlers (and readers) a path to all of them. Deliberately lightweight:
   no images, no cards, just grouped links. Generated by
   scripts/generate_blog_grid.py between the AUTOGEN-ARCHIVE markers. */
.ivm-jl-archive {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 56px) clamp(64px, 8vw, 110px);
  border-top: 1px solid rgba(201, 165, 78, 0.18);
}
.ivm-jl-archive__h {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 40px);
  color: #faf8f5;
  margin: 0 0 8px;
}
.ivm-jl-archive__intro {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(15px, 1.8vw, 17px);
  color: rgba(250, 248, 245, 0.62);
  margin: 0 0 clamp(28px, 4vw, 44px);
}
.ivm-jl-archive__cat {
  font-family: 'Syne', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #c9a54e;
  margin: clamp(26px, 3.5vw, 40px) 0 12px;
}
.ivm-jl-archive__list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;
  column-gap: 40px;
}
@media (min-width: 700px) { .ivm-jl-archive__list { columns: 2; } }
@media (min-width: 1050px) { .ivm-jl-archive__list { columns: 3; } }
.ivm-jl-archive__list li {
  break-inside: avoid;
  margin: 0 0 9px;
}
.ivm-jl-archive__list a {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  line-height: 1.4;
  color: rgba(250, 248, 245, 0.78);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.ivm-jl-archive__list a:hover,
.ivm-jl-archive__list a:focus-visible {
  color: #faf8f5;
  border-bottom-color: rgba(201, 165, 78, 0.55);
}


/* ── "Why IVAE" positioning block (blog posts) ──────────────────────────
   Contextual per post, sits between the internal links and the CTA. Kept in
   the editorial palette so it reads as part of the article, not an ad. */
.why-ivae {
  max-width: 720px;
  margin: clamp(40px, 6vw, 72px) auto 0;
  padding: clamp(26px, 3.5vw, 40px) clamp(22px, 3vw, 38px);
  background: linear-gradient(180deg, rgba(201, 165, 78, 0.06), rgba(201, 165, 78, 0.02));
  border: 1px solid rgba(201, 165, 78, 0.26);
  border-left: 3px solid #c9a54e;
  border-radius: 4px;
}
.why-ivae__h {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.22;
  color: #faf8f5;
  margin: 0 0 12px;
}
.why-ivae__body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.68;
  color: rgba(250, 248, 245, 0.82);
  margin: 0 0 16px;
}
.why-ivae__points {
  list-style: none;
  margin: 0;
  padding: 0;
}
.why-ivae__points li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-family: 'Syne', sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(250, 248, 245, 0.72);
}
.why-ivae__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 1px;
  background: #c9a54e;
}
/* The post body is cream-on-dark on mobile but light-themed on the desktop
   article layout, so re-tone there. */
@media (min-width: 900px) {
  .post-article .why-ivae__h { color: var(--ink, #0e1620); }
  .post-article .why-ivae__body { color: rgba(14, 22, 32, 0.82); }
  .post-article .why-ivae__points li { color: rgba(14, 22, 32, 0.72); }
}

/* ═══ HOME FAQ (GEO 2026-08): visible Q&A mirroring the FAQPage JSON-LD.
   Mobile variant lives inside .ivm (hidden on desktop by the container);
   desktop variant lives inside .ivm-desktop-only (hidden ≤899px). ═══ */
.ivm-act-faq {
  padding: 72px 22px 64px;
  background: var(--ivm-ink, #0a0f17);
}
.ivm-act-faq__eyebrow {
  display: block;
  font: 600 10px/1 'Syne', sans-serif;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ivm-gold, #c9a54e);
  margin-bottom: 14px;
}
.ivm-act-faq h2 {
  font: 400 30px/1.15 'Cormorant Garamond', serif;
  color: var(--ivm-cream, #faf8f5);
  margin: 0 0 14px;
}
.ivm-act-faq h2 em { font-style: italic; color: var(--ivm-gold, #c9a54e); }
.ivm-act-faq__intro {
  font: 300 14px/1.65 'Syne', sans-serif;
  color: rgba(250, 248, 245, .78);
  margin: 0 0 26px;
}
.ivm-act-faq__item {
  border-top: 1px solid rgba(250, 248, 245, .14);
}
.ivm-act-faq__item:last-of-type {
  border-bottom: 1px solid rgba(250, 248, 245, .14);
}
.ivm-act-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 28px 16px 0;
  position: relative;
  font: 500 15px/1.4 'Syne', sans-serif;
  color: var(--ivm-cream, #faf8f5);
}
.ivm-act-faq__item summary::-webkit-details-marker { display: none; }
.ivm-act-faq__item summary::after {
  content: '+';
  position: absolute;
  right: 2px;
  top: 14px;
  font: 300 22px/1 'Syne', sans-serif;
  color: var(--ivm-gold, #c9a54e);
  transition: transform .25s ease;
}
.ivm-act-faq__item[open] summary::after { transform: rotate(45deg); }
.ivm-act-faq__item p {
  font: 300 14px/1.7 'Syne', sans-serif;
  color: rgba(250, 248, 245, .72);
  margin: 0;
  padding: 0 0 18px;
}


/* .ch-sub__proof NO va aquí: TODO este archivo vive dentro del
   @media (max-width: 899px) abierto arriba, y esa línea es del hero de
   ESCRITORIO. Sus estilos ahora viven en el <style> de index.html y
   es/index.html, junto a .ch-sub (bug 2026-08-07). */

/* ═══ POST TL;DR — NOTA 2026-08-07: los POSTS cargan blog.css (ahí vive la
   copia CANONICA con el tema claro correcto); este bloque solo aplica si
   alguna página con mobile-exclusive.css usara la clase. ═══
   (GEO 2026-08): direct answer under
   the post hero — the first extractable block an AI reader hits. Same
   dual-tone pattern as .why-ivae (dark mobile, light desktop article). ═══ */
.post-tldr {
  max-width: 720px;
  margin: clamp(26px, 4vw, 44px) auto 0;
  padding: clamp(18px, 2.6vw, 28px) clamp(20px, 2.8vw, 34px);
  background: linear-gradient(180deg, rgba(201, 165, 78, 0.08), rgba(201, 165, 78, 0.02));
  border: 1px solid rgba(201, 165, 78, 0.24);
  border-radius: 4px;
}
.post-tldr__label {
  display: block;
  font: 600 10px/1 'Syne', sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #c9a54e;
  margin-bottom: 10px;
}
.post-tldr p {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.55;
  color: var(--ivm-cream, #faf8f5);
}
@media (min-width: 900px) {
  .post-article .post-tldr p { color: rgba(14, 22, 32, 0.85); }
}

  /* ═══════════════════════════════════════════════════════════════
     PULIDO EDITORIAL DEL HERO EN TELÉFONO · 2026-09-05
     Diagnóstico medido en iPhone: el texto se pone ENCIMA de fotos
     muy claras (vestidos blancos a contraluz) con un velo demasiado
     suave, y la etiqueta superior va en dorado de 10px con mucho
     espaciado. Resultado: ilegible y con aire de plantilla.
     Solución de casa editorial: base oscura controlada bajo el texto,
     etiqueta en crema con filete dorado, y un solo eje de alineación.
     ═══════════════════════════════════════════════════════════════ */

  /* 1. VELO: el bloque de texto SIEMPRE sobre base oscura.
        La foto se sigue viendo limpia arriba, donde va el rostro. */
  .ivm-act-hero__veil {
    background:
      linear-gradient(180deg,
        rgba(10,15,23,.30) 0%,
        rgba(10,15,23,.06) 20%,
        rgba(10,15,23,.06) 40%,
        rgba(10,15,23,.42) 62%,
        rgba(10,15,23,.82) 84%,
        rgba(10,15,23,.94) 100%) !important;
  }
  .ivm-wd-hero__veil {
    background:
      linear-gradient(180deg,
        rgba(10,15,23,.34) 0%,
        rgba(10,15,23,.06) 20%,
        rgba(10,15,23,.08) 38%,
        rgba(10,15,23,.52) 58%,
        rgba(10,15,23,.88) 80%,
        rgba(10,15,23,.97) 100%) !important;
  }

  /* 2. ETIQUETA SUPERIOR: crema legible + filete dorado.
        El dorado como TEXTO chico sobre foto no se lee nunca;
        como TRAZO sólido sí se ve y marca la casa. */
  .ivm-act-hero__eyebrow,
  .ivm-wd-hero__eyebrow {
    /* Rejilla, no flex: si la etiqueta se parte en dos renglones, el
       segundo alinea con el texto y no debajo del filete. */
    display: grid !important;
    grid-template-columns: 32px 1fr;
    align-items: start;
    column-gap: 12px;
    line-height: 1.6;
    color: rgba(250,248,245,.9) !important;
    font-family: 'Syne', sans-serif;
    font-size: 10.5px !important;
    font-weight: 500;
    letter-spacing: 0.26em !important;
    margin-bottom: 20px !important;
    text-shadow: 0 1px 12px rgba(10,15,23,.65);
  }
  .ivm-act-hero__eyebrow::before,
  .ivm-wd-hero__eyebrow::before {
    content: '';
    width: 32px;
    height: 1px;
    margin-top: .62em;
    background: var(--ivm-gold, #c9a54e);
  }

  /* Un solo eje también en bodas: el indicador de scroll deja de ir
     centrado mientras el resto del texto va a la izquierda. */
  .ivm-wd-hero__scroll {
    left: 24px !important;
    right: auto !important;
    transform: none !important;
    text-align: left !important;
    letter-spacing: 0.3em !important;
    color: rgba(250,248,245,.72) !important;
  }
  /* la rayita del indicador también se mueve al eje izquierdo */
  .ivm-wd-hero__scroll::after { left: 1px !important; transform: none !important; }

  /* 3. TITULAR: sombra suave para que nunca se pierda en un vestido
        blanco, sin que se note como sombra. */
  .ivm-act-hero__title,
  .ivm-wd-hero__title {
    text-shadow: 0 2px 34px rgba(10,15,23,.55);
  }

  /* 4. UN SOLO EJE: el indicador de scroll se alinea con el texto,
        no centrado. Dos ejes distintos se ven descuidados. */
  .ivm-act-hero__scroll {
    left: 24px !important;
    transform: none !important;
    align-items: flex-start !important;
    color: rgba(250,248,245,.72) !important;
    letter-spacing: 0.3em !important;
  }

  /* 5. El botón flotante de WhatsApp no debe caer sobre el titular
        del hero: baja un poco en la primera pantalla. */
  .ivm-act-hero ~ .ivae-wa-fab,
  .ivm-wd-hero ~ .ivae-wa-fab { bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; }


  /* El envoltorio <picture> es inline por defecto, así que el ancho de la
     foto no resolvía contra su marco. Con block, la imagen ocupa el marco
     exacto que le da el diseño. */
  .ivm picture,
  .ivm-st-founder__pola picture,
  .ivm-wd-venue picture,
  .ivm-about-mast__polaroid picture { display: block; }
  /* Cuando el marco define la altura, el envoltorio debe llenarlo o la
     foto se queda corta y deja una franja negra debajo. */
  .ivm [class*="__photo"] > picture,
  .ivm-svc__photo > picture { width: 100%; height: 100%; }


  /* ═══════════════════════════════════════════════════════════════
     MURO DE FOTOS DE LA FUNDADORA · rediseño 2026-09-05
     Tres fotos encimadas en 342px de ancho se leían como desorden:
     la tercera tapaba a la segunda, una se salía por la derecha y
     los filetes dorados no cuadraban con ninguna. En editorial de
     lujo se usan DOS: una grande y una encajada. Menos, pero limpio.
     ═══════════════════════════════════════════════════════════════ */
  .ivm-st-founder__wall {
    position: relative;
    min-height: 0 !important;
    max-width: 330px;
    margin: 34px auto 44px;
    padding-bottom: 96px;   /* espacio donde baja la foto encajada */
    perspective: none;
  }
  /* La grande manda: en flujo normal, sin rotación de calcomanía */
  .ivm-st-founder__pola--1 {
    position: static !important;
    width: 80% !important;
    transform: rotate(-1.2deg) !important;
    z-index: 1;
  }
  /* La segunda se encaja abajo a la derecha, como en una revista */
  .ivm-st-founder__pola--2 {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: auto !important;
    bottom: 0 !important;
    width: 52% !important;
    transform: rotate(2deg) !important;
    z-index: 2;
  }
  .ivm-st-founder__pola--2 img { box-shadow: 0 26px 52px rgba(0,0,0,.62); }
  /* La tercera sobra en teléfono: amontonaba y ocultaba a las otras */
  .ivm-st-founder__pola--3 { display: none !important; }

  /* Los filetes dorados pegados al borde real de cada foto */
  .ivm-st-founder__pola::before { top: -5px; left: -5px; }
  .ivm-st-founder__pola::after { bottom: -5px; right: -5px; }
  .ivm-st-founder__pola--2::before { display: none; }

  /* El pie de foto no debe quedar debajo de la foto encajada */
  .ivm-st-founder__pola--1 figcaption { padding-right: 54%; text-align: left; padding-left: 14px; }


  /* ═══════════════════════════════════════════════════════════════
     LA PROMESA · rediseño 2026-09-05
     Medido en iPhone: la sección ocupaba 320vh (2,701px) para cuatro
     frases y, con el impulso normal del dedo, DOS deslizadas llevaban
     del principio 01 al 04 sin alcanzar a leer ninguno. En pantalla
     solo se veía negro con una línea de texto: por eso el sitio se
     sentía lento y vacío.
     En teléfono se quita el efecto pegajoso y los cuatro principios
     se leen de corrido, como una página de revista. La sección pasa
     de 2,701px a unos 1,100px en las 10 páginas donde aparece.
     En escritorio NO cambia nada: ahí el efecto sí funciona.
     ═══════════════════════════════════════════════════════════════ */
  .ivm-st-manifesto { height: auto !important; }
  .ivm-st-manifesto__pin {
    position: static !important;
    height: auto !important;
    display: block !important;
    padding: 88px 0 96px !important;
    overflow: visible !important;
    perspective: none !important;
  }
  .ivm-st-manifesto__stage {
    min-height: 0 !important;
    display: grid;
    gap: 58px;
    padding: 44px 24px 0 !important;
    transform-style: flat;
  }
  .ivm-st-manifesto__phrase {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    font-size: clamp(29px, 8.2vw, 38px) !important;
    line-height: 1.12 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .ivm-st-manifesto__phrase::before {
    font-size: 10px !important;
    letter-spacing: 0.34em !important;
    margin-bottom: 16px !important;
    padding-bottom: 0 !important;
  }
  .ivm-st-manifesto__phrase::after {
    margin: 18px auto 0 !important;
    padding-top: 14px !important;
    font-size: 15px !important;
  }
  /* El contador y las rayitas de avance solo tienen sentido con el
     efecto pegajoso; sin él son ruido. */
  .ivm-st-manifesto__counter,
  .ivm-st-manifesto__progress { display: none !important; }
  /* Los puntitos flotantes tampoco: eran atmósfera para el pin */
  .ivm-st-manifesto__motes { display: none !important; }


  /* ═══════════════════════════════════════════════════════════════
     PORTADA: LAS DOS SECCIONES MÁS VACÍAS · rediseño 2026-09-05
     Medido en teléfono:
       "La hora"  → 2,026px de scroll para leer UNA frase (72 caracteres)
       "Servicios"→ 4,220px para cuatro tarjetas (451 caracteres)
     Juntas eran el 62% de la portada mostrando media cuartilla de texto.
     Con el impulso normal del dedo, la gente pasa de largo y solo ve
     negro: por eso se sentía lenta y vacía.
     En teléfono se quita el efecto pegajoso: la frase se lee completa
     en una pantalla y los cuatro servicios se recorren como tarjetas
     de verdad, que además son la puerta a las páginas que venden.
     En escritorio NO cambia nada.
     ═══════════════════════════════════════════════════════════════ */

  /* ── "La hora": una pantalla, la frase completa ── */
  .ivm-act-hour { height: auto !important; }
  .ivm-act-hour__pin {
    position: static !important;
    min-height: 100svh;
    height: auto !important;
  }
  .ivm-act-hour__line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    font-size: clamp(32px, 9.4vw, 46px) !important;
    line-height: 1.14 !important;
    /* La frase se partía dejando "vaya." sola en un renglón. Balance
       reparte las palabras en renglones parejos, que es como se compone
       un titular en una revista. */
    text-wrap: balance;
  }
  .ivm-act-hour__progress { display: none !important; }

  /* La frase se alinea al MISMO eje que el titular del hero (izquierda,
     tercio bajo) para que la página tenga una sola línea de lectura en
     vez de un centrado suelto por sección. Y como el texto ya se apoya
     en un velo que sube desde abajo, la foto puede aclararse: antes
     estaba a brightness .5 y la novia casi no se veía. */
  .ivm-act-hour__pin { align-items: flex-end !important; }
  .ivm-act-hour__stage {
    text-align: left !important;
    width: 100%;
    padding: 0 24px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .ivm-act-hour__photo { filter: brightness(0.66) saturate(0.88) !important; }
  .ivm-act-hour__photo::after {
    background: linear-gradient(180deg,
      rgba(10,15,23,.30) 0%,
      rgba(10,15,23,.10) 34%,
      rgba(10,15,23,.62) 74%,
      rgba(10,15,23,.88) 100%) !important;
  }

  /* ── Servicios: cuatro tarjetas reales, una tras otra ── */
  .ivm-act-services { height: auto !important; }
  .ivm-act-services__pin {
    position: static !important;
    height: auto !important;
    display: block !important;
    padding: 84px 0 92px !important;
    overflow: visible !important;
  }
  .ivm-act-services__stage {
    position: relative !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 40px 0 0 !important;
    display: grid;
    gap: 18px;
    padding: 0 20px;
    transform-style: flat;
  }
  .ivm-svc {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    height: 62svh;
    max-height: 470px;
    border-radius: 2px;
  }
  /* La tarjeta conserva su reparto original: foto arriba, nombre y
     descripción abajo. Solo se quitó el efecto pegajoso. */


  /* ═══════════════════════════════════════════════════════════════
     PIE DE PÁGINA · rediseño 2026-09-06 (22 páginas)
     Antes: todo centrado con el MISMO peso visual, trece enlaces en
     cursiva del mismo tamaño y áreas tocables de 24px. Se leía como
     una lista sin orden y era difícil de atinar con el dedo.
     Ahora: tres bloques separados por filetes, el contacto convertido
     en acciones de 52px (WhatsApp primero, que es como escriben), las
     costas como fila secundaria y el resto de enlaces en tono menor.
     NOTA: nada de texto por CSS, porque el mismo archivo sirve a las
     páginas en inglés.
     ═══════════════════════════════════════════════════════════════ */
  .ivm-act-foot {
    gap: 0 !important;
    padding: 72px 24px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .ivm-act-foot__mark { font-size: 30px !important; margin-bottom: 6px; }
  .ivm-act-foot__tag { margin-bottom: 26px; }

  /* Contacto = acciones, no texto suelto */
  .ivm-act-foot__contact {
    gap: 0 !important;
    margin: 0 0 4px !important;
    border-top: 1px solid rgba(201,165,78,.16);
  }
  .ivm-act-foot__contact a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    font-family: 'Syne', sans-serif !important;
    font-style: normal !important;
    font-size: 12.5px !important;
    letter-spacing: 0.06em;
    color: rgba(250,248,245,.86) !important;
    border-bottom: 1px solid rgba(201,165,78,.16);
  }
  /* WhatsApp es el canal real de la casa: va primero y en dorado */
  .ivm-act-foot__contact a:first-child {
    color: var(--ivm-gold) !important;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 11.5px !important;
  }

  /* Las tres costas, como fila de destinos */
  .ivm-act-foot__costas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 22px;
    padding: 20px 0 18px;
  }
  .ivm-act-foot__costas a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: 'Syne', sans-serif !important;
    font-style: normal !important;
    font-size: 10.5px !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(250,248,245,.72) !important;
  }

  /* Enlaces secundarios: presentes, pero en tono menor */
  .ivm-act-foot__links {
    max-width: 340px !important;
    gap: 0 18px !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid rgba(250,248,245,.08);
  }
  .ivm-act-foot__links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: 14px !important;
    color: rgba(250,248,245,.62) !important;
  }
  .ivm-act-foot__copy { margin-top: 20px !important; opacity: .75; }


  /* ═══════════════════════════════════════════════════════════════
     SERVICIOS · limpieza del carrusel viejo · 2026-09-06
     Las tarjetas ya no van de lado, van una debajo de otra. Quedaban
     dos restos del carrusel: el punteado vertical de la derecha, que
     flotaba a media sección y se leía como una barra de desplazamiento
     rota, y el número romano en dorado, que sobre una foto de palmeras
     al sol se veía como una mancha.
     ═══════════════════════════════════════════════════════════════ */
  .ivm-act-services__dots { display: none !important; }

  /* El folio se sostiene sobre su propio velo, como el número de página
     de una revista: chico, claro y siempre legible. */
  .ivm-svc__photo::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 108px;
    background: linear-gradient(180deg, rgba(10,15,23,.58), rgba(10,15,23,0));
    pointer-events: none;
    z-index: 1;
  }
  .ivm-svc__num {
    z-index: 2;
    font-size: 26px !important;
    top: 12px !important;
    left: 16px !important;
    color: rgba(250,248,245,.94) !important;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 12px rgba(10,15,23,.7) !important;
  }


  /* ═══════════════════════════════════════════════════════════════
     RITMO Y VOZ · sección de números + preguntas · 2026-09-06
     Dos cosas: (1) entre la cuadrícula de cifras y las preguntas
     había 168px de negro vacío, que en teléfono se lee como que la
     página se acabó; (2) las preguntas y sus respuestas estaban en
     Syne mientras TODO el resto de la página habla en Cormorant, así
     que el bloque parecía pegado de otro sitio.
     Regla de la casa a partir de aquí: Cormorant para lo que se lee,
     Syne solo para etiquetas y botones.
     ═══════════════════════════════════════════════════════════════ */
  .ivm-act-counter { padding: 76px 24px 44px !important; }
  .ivm-act-faq { padding: 52px 22px 64px !important; }

  .ivm-act-faq__intro {
    font: 300 17px/1.62 'Cormorant Garamond', Georgia, serif !important;
    color: rgba(250,248,245,.82) !important;
    margin-bottom: 30px !important;
  }
  .ivm-act-faq__item summary {
    font: 400 18px/1.35 'Cormorant Garamond', Georgia, serif !important;
    padding: 18px 32px 18px 0 !important;
    color: var(--ivm-cream) !important;
  }
  .ivm-act-faq__item summary::after {
    top: 17px !important;
    font: 300 20px/1 'Syne', sans-serif !important;
  }
  .ivm-act-faq__item p {
    font: 300 15.5px/1.72 'Cormorant Garamond', Georgia, serif !important;
    color: rgba(250,248,245,.74) !important;
    padding-bottom: 20px !important;
  }


  /* ═══════════════════════════════════════════════════════════════
     CIERRE "COMIENZA LA CONVERSACIÓN" · 2026-09-06
     Tres fallas medidas en teléfono:
     1) la sección medía una pantalla completa aunque su contenido
        ocupa dos tercios, y quedaba una cola de foto vacía;
     2) al recortar una foto horizontal en un marco vertical con el
        encuadre al centro, lo que se veía era el TORSO del novio,
        no su cara. Con 28% de altura el recorte cae en los rostros;
     3) la foto iba a opacidad .32 bajo un velo radial: no se leía
        como fotografía sino como una mancha gris, justo en el bloque
        que debe cerrar la venta.
     ═══════════════════════════════════════════════════════════════ */
  .ivm-act-cta {
    height: auto !important;
    min-height: 0 !important;
    padding: 104px 24px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .ivm-act-cta__bg {
    background-position: center 28% !important;
    opacity: 0.52 !important;
    filter: saturate(0.78) !important;
    transform: scale(1.06) !important;
    animation: none !important;
  }
  .ivm-act-cta__veil {
    background: linear-gradient(180deg,
      rgba(10,15,23,.86) 0%,
      rgba(10,15,23,.62) 34%,
      rgba(10,15,23,.66) 62%,
      rgba(10,15,23,.92) 100%) !important;
  }


  /* El encabezado de la sección venía POSICIONADO ABSOLUTO, porque en el
     carrusel viejo flotaba sobre las tarjetas que pasaban por debajo.
     Con las tarjetas apiladas eso se convirtió en un encimamiento real:
     medido en teléfono, el título montaba 32px sobre la primera tarjeta
     y tapaba su número "I.". Ahora va en el flujo, con el aire que le
     corresponde a un cabezal de sección. */
  .ivm-act-services__title {
    position: static !important;
    transform: none !important;
    padding: 0 24px !important;
    margin: 0 0 30px !important;
    /* El velo y el desenfoque eran para leerse SOBRE las fotos que
       pasaban por debajo; ya en el flujo solo dejaban una banda gris. */
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }


  /* ═══════════════════════════════════════════════════════════════
     "CUATRO CONVICCIONES" · el cubo se aplana · 2026-09-06
     Las cuatro frases vivían en las caras de un cubo 3D que giraba
     con el dedo. En teléfono eso cobraba tres precios: el texto se
     leía deformado por la perspectiva (una frase de nueve palabras
     inclinada no se lee, se descifra), la sección medía 2,954px para
     decir cuatro cosas cortas, y solo se veía UNA cara a la vez, así
     que tres de las cuatro convicciones quedaban escondidas tras un
     gesto que nadie garantiza que el visitante hará.
     Aplanado: las cuatro se leen de corrido, en columna, con su folio
     en dorado y un filete que las separa. Mismo contenido, misma voz,
     sin acrobacia.
     ═══════════════════════════════════════════════════════════════ */
  .ivm-st-values { height: auto !important; min-height: 0 !important; }
  .ivm-st-values__pin {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    padding: 76px 24px 84px !important;
    perspective: none !important;
  }
  .ivm-st-values__head {
    position: static !important;
    transform: none !important;
    margin: 0 0 40px !important;
  }
  .ivm-st-values__cube {
    position: static !important;
    transform: none !important;
    transform-style: flat !important;
    width: auto !important;
    height: auto !important;
    display: grid !important;
    gap: 0 !important;
    animation: none !important;
  }
  .ivm-st-values__face {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    backface-visibility: visible !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    background: none !important;
    border: 0 !important;
    border-top: 1px solid rgba(201,165,78,.20) !important;
    padding: 26px 0 30px !important;
    text-align: left !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .ivm-st-values__face:last-child {
    border-bottom: 1px solid rgba(201,165,78,.20) !important;
  }
  .ivm-st-values__face .v-num {
    display: block !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-style: italic !important;
    font-size: 17px !important;
    color: var(--ivm-gold) !important;
    margin: 0 0 8px !important;
    letter-spacing: .04em !important;
  }
  .ivm-st-values__face .v-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 300 !important;
    font-size: 27px !important;
    line-height: 1.16 !important;
    color: var(--ivm-cream) !important;
    margin: 0 0 8px !important;
    text-wrap: balance;
  }
  .ivm-st-values__face .v-body {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-style: italic !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: rgba(250,248,245,.66) !important;
    margin: 0 !important;
    max-width: 32ch;
  }
  /* Ya no hay nada que rotar */
  .ivm-st-values__hint { display: none !important; }


  /* ═══════════════════════════════════════════════════════════════
     RITMO VERTICAL DE "NOSOTROS" · 2026-09-06
     Cada sección traía 96px arriba y 80px abajo, o sea 176px de negro
     entre un bloque y el siguiente. En una pantalla de 844px eso es
     un quinto de pantalla vacío CADA VEZ: al deslizar se siente que
     la página se acabó y volvió a empezar. Con 64/56 el aire sigue
     siendo de revista (120px) pero la lectura no se corta.
     Las celdas de cifras tenían 36px de relleno arriba y abajo para
     un número de 19px de alto: la caja pesaba cinco veces su dato.
     ═══════════════════════════════════════════════════════════════ */
  .ivm-st-founder { padding: 64px 24px 56px !important; }
  .ivm-st-atlas   { padding: 64px 16px 56px !important; }
  .ivm-st-numbers { padding: 64px 16px 56px !important; }
  .ivm-st-cta     { padding: 84px 32px !important; }
  .ivm-st-num     { padding: 24px 14px !important; }


  /* El contorno del mapa iba a 45% de opacidad sobre casi negro: a un
     brazo de distancia se leía como un garabato, no como México. Con
     0.62 y medio punto más de trazo la costa se reconoce sin que el
     dibujo compita con el titular. */
  .ivm-st-atlas__coast { opacity: 0.62 !important; stroke-width: 1.8 !important; }


  /* ═══════════════════════════════════════════════════════════════
     UNA SOLA VOZ TIPOGRÁFICA · 2026-09-06
     Regla de la casa: Cormorant para lo que se LEE, Syne solo para
     etiquetas, botones y cifras. En las páginas pilar los títulos ya
     eran Cormorant pero los textos de apoyo salían en Syne, y el
     bloque de enlaces relacionados parecía traído de otra plantilla.
     ═══════════════════════════════════════════════════════════════ */
  .ivm-st-related__lead {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 17px !important;
    line-height: 1.62 !important;
    color: rgba(250,248,245,.80) !important;
  }
  .ivm-st-related__desc {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-style: italic !important;
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    color: rgba(250,248,245,.68) !important;
  }
  /* Con menos aire entre bloques el listado se lee como índice y no
     como una sucesión de cajas sueltas. */
  .ivm-st-related { padding: 64px 24px 56px !important; }


  /* El enlace secundario de los cierres ("o escribe a info@…") medía
     24px de alto: para tocarlo con el pulgar hay que apuntar. Con 44px
     de área y algo de aire arriba se acierta sin mirar. */
  .ivm-act-cta__alt,
  .ivm-st-cta__alt {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 0 8px !important;
  }


  /* ═══════════════════════════════════════════════════════════════
     LAS CIFRAS ERAN INVISIBLES EN iPHONE · 2026-09-07
     Cazado en el simulador y confirmado en WebKit real. Las celdas
     arrancaban en `opacity:0; transform: rotateX(-90deg)` y solo se
     mostraban cuando un IntersectionObserver con threshold .4 les
     ponía .is-flipped. Pero rotateX(-90deg) deja la celda DE CANTO, y
     Safari mide la intersección sobre la geometría YA TRANSFORMADA:
     una celda de canto tiene razón de intersección ~0 y jamás llega a
     .4, así que la clase no se añadía NUNCA. La celda se escondía tan
     bien que el observador que debía revelarla no podía dispararse.
     Resultado en el teléfono: las cuatro cifras (12, 500+, 3, 2) en el
     DOM pero invisibles, y como el padre de la cuadrícula va pintado
     de dorado para dibujar los filetes de 1px, se veía un bloque verde
     oliva macizo donde deberían ir los datos.
     Chrome lo pintaba bien, o sea que medir en Chromium NO bastaba.
     REGLA: en teléfono el contenido no depende de una animación para
     ser visible. La animación es adorno; el dato se ve siempre.
     ═══════════════════════════════════════════════════════════════ */
  .ivm-st-num {
    opacity: 1 !important;
    transform: none !important;
    transform-style: flat !important;
    transition: none !important;
    will-change: auto !important;
  }
  .ivm-st-numbers__grid { perspective: none !important; }


  /* ═══════════════════════════════════════════════════════════════
     UNA BODA COMPLETA · Ji & Kailyn · 2026-09-08
     La página ya mostraba DÓNDE trabaja el estudio (seis venues, una
     foto cada uno) pero no CÓMO: no había una sola boda contada de
     principio a fin, que es justo lo que decide a una pareja.
     Seis fotos en el orden en que pasaron: ramo, primer vistazo,
     ceremonia, el beso, retrato y banquete.
     Ritmo de revista: los verticales van con margen y los
     horizontales van A SANGRE, de borde a borde. Así la página
     respira sin achicar ninguna foto, que en un teléfono es lo peor
     que se le puede hacer al trabajo de un fotógrafo.
     Los pies de foto se alinean SIEMPRE con la columna de texto,
     aunque la foto vaya a sangre.
     ═══════════════════════════════════════════════════════════════ */
  .ivm-wd-story {
    background: var(--ivm-ink, #0a0f17);
    padding: 64px 0 60px;
  }
  .ivm-wd-story__head { padding: 0 24px; margin-bottom: 34px; }
  .ivm-wd-story__eyebrow {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--ivm-gold, #c9a54e);
    margin-bottom: 14px;
  }
  .ivm-wd-story__head h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.06;
    letter-spacing: -0.012em;
    color: var(--ivm-cream, #faf8f5);
    margin: 0 0 12px;
  }
  .ivm-wd-story__head h2 em { font-style: italic; color: var(--ivm-gold, #c9a54e); }
  .ivm-wd-story__lead {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(250,248,245,.72);
    margin: 0;
    max-width: 34ch;
  }

  .ivm-wd-story__f { margin: 0 0 34px; }
  .ivm-wd-story__f:last-of-type { margin-bottom: 0; }
  /* vertical: con margen, como una lámina montada */
  .ivm-wd-story__f--alta { margin-left: 24px; margin-right: 24px; }
  /* horizontal: a sangre, de borde a borde */
  .ivm-wd-story__f--ancha { margin-left: 0; margin-right: 0; }

  .ivm-wd-story__f picture { display: block; }
  .ivm-wd-story__f img {
    display: block;
    width: 100%;
    height: auto;          /* sin esto el width/height del HTML gana y deforma */
  }
  .ivm-wd-story__f figcaption {
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(250,248,245,.56);
    padding-top: 13px;
  }
  /* el pie de una foto a sangre se alinea igual con la columna de texto */
  .ivm-wd-story__f--ancha figcaption { padding-left: 24px; padding-right: 24px; }


  /* El pie que rediseñé el 2026-09-06 dejó dos líneas por debajo del
     contraste mínimo, medido en WebKit: la bajada a 10px daba 3.66 y el
     aviso de derechos a 9px daba 3.35, contra el 4.5 que pide la norma.
     Son los tamaños más chicos de la página, justo donde menos margen hay.
     Con alfa .58 suben a ~5.9 y siguen leyéndose como texto secundario. */
  .ivm-act-foot__tag  { color: rgba(250,248,245,.66) !important; }
  .ivm-act-foot__copy { color: rgba(250,248,245,.72) !important; }

} /* fin @media (max-width: 899px) */

/* ═══════════════════════════════════════════════════════════════
   FAQ DE ESCRITORIO · RESCATADO DEL @media DE MÓVIL · 2026-09-06
   Estas reglas estaban ESCRITAS DENTRO del @media (max-width:899px)
   que abarca todo el archivo, así que en computadora NUNCA aplicaban:
   la sección salía con padding 0 y el titular en Syne de 22px, o sea
   sin diseño. Medido en vivo a 1440px antes de moverlas.
   Es la misma trampa del bug de 2026-08-07: en este archivo, toda
   regla de escritorio va DESPUÉS de este cierre, nunca antes.
   ═══════════════════════════════════════════════════════════════ */
/* Desktop FAQ — editorial column above the colophon */
.lw-faq {
  padding: 110px 48px 96px;
  background: var(--ink-4, #0a0f17);
}
.lw-faq__inner { max-width: 780px; margin: 0 auto; }
.lw-faq__eyebrow {
  display: block;
  font: 600 11px/1 'Syne', sans-serif;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ivm-gold, #c9a54e);
  margin-bottom: 18px;
}
.lw-faq__h {
  font: 400 44px/1.1 'Cormorant Garamond', serif;
  color: var(--ivm-cream, #faf8f5);
  margin: 0 0 18px;
}
.lw-faq__h em { font-style: italic; color: var(--ivm-gold, #c9a54e); }
.lw-faq__intro {
  font: 300 16px/1.7 'Syne', sans-serif;
  color: rgba(250, 248, 245, .78);
  margin: 0 0 34px;
}
.lw-faq__item { border-top: 1px solid rgba(250, 248, 245, .14); }
.lw-faq__item:last-of-type { border-bottom: 1px solid rgba(250, 248, 245, .14); }
.lw-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 34px 20px 0;
  position: relative;
  font: 500 17px/1.4 'Syne', sans-serif;
  color: var(--ivm-cream, #faf8f5);
}
.lw-faq__item summary::-webkit-details-marker { display: none; }
.lw-faq__item summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 17px;
  font: 300 26px/1 'Syne', sans-serif;
  color: var(--ivm-gold, #c9a54e);
  transition: transform .25s ease;
}
.lw-faq__item[open] summary::after { transform: rotate(45deg); }
.lw-faq__item p {
  font: 300 15px/1.75 'Syne', sans-serif;
  color: rgba(250, 248, 245, .74);
  margin: 0;
  padding: 0 0 22px;
}