.tmc-story-page {
  position: relative;
  isolation: isolate;
  background: #fff;
}

html,
body.home-page { background: #fff; }

/* Clip horizontal artwork without creating a scrolling ancestor that breaks
   the pinned story in Safari. */
html:has(body.home-page), body.home-page { overflow-x: clip !important; overflow-y: visible !important; }

.tmc-3d-story {
  --tmc-story-ink: #173653;
  --tmc-story-gold: #c9a059;
  position: relative;
  /* Five physical chapters complete before the catalogue spiral begins. */
  height: 420svh;
  min-height: 2800px;
  background: #fff;
  isolation: isolate;
}

/* Kashy's physical frame stays pinned inside its own story. Once all five
   captions have played, normal flow hands off to the catalogue spiral. */
.tmc-story-page > .tmc-3d-story { position: relative; }
.tmc-story-page > .tmc-3d-story > .tmc-3d-stage { position: sticky; top: 0; z-index: 0; }

.home-page,
.home-page .collections,
.home-page .why-us,
.home-page .process,
.home-page .instagram,
.home-page .cta {
  background-color: #fff;
}

.tmc-3d-stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* A returning tab can briefly restore the old scroll position before the
   canvas has resized. Hold the scene for one paint so the banner never flashes
   over the header or the first chapter. */
body.home-page.tmc-home-returning .tmc-3d-stage { visibility: hidden; }

.tmc-coming-soon-action {
  display: inline-block;
  cursor: not-allowed;
  opacity: .72;
  pointer-events: none;
}

.tmc-story-page > [data-tmc-story-chapter] {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, .96);
  overflow: clip;
}

.tmc-story-page > [data-tmc-story-chapter].tmc-story-chapter-visible {
  --tmc-story-chapter-ready: 1;
}

/* Each section is another physical layer of the same keepsake story. The
   scroll driver moves the chapter plane and its contents together, so the
   narrative does not collapse into ordinary flat card stacks after the hero. */
.tmc-story-page > [data-tmc-story-chapter]::before {
  content: attr(data-tmc-story-label);
  position: absolute;
  inset: clamp(18px, 4vw, 52px) auto auto clamp(18px, 4vw, 52px);
  z-index: 0;
  color: rgba(23, 54, 83, .18);
  font: 600 .68rem/1.2 Montserrat, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  pointer-events: none;
  transform: translateZ(-32px);
}

.tmc-story-page > [data-tmc-story-chapter] > .container,
.tmc-story-page > [data-tmc-story-chapter] > .container.narrow {
  position: relative;
  z-index: 1;
  transform: translateZ(0);
}

/* Desktop composition: the frame must remain visibly present behind each
   chapter. Keep the chapter plane translucent and constrain its readable
   surface so the physical layers can still be seen in the surrounding stage.
   Cards retain their existing opaque surfaces for text contrast. */
@media (min-width: 720px) {
  .home-page .tmc-story-page > [data-tmc-story-chapter] {
    background: rgba(255, 255, 255, .24);
  }

  .tmc-story-page > [data-tmc-story-chapter] > .container,
  .tmc-story-page > [data-tmc-story-chapter] > .container.narrow {
    width: min(820px, 72vw);
    margin-left: 4vw;
    margin-right: auto;
    padding: clamp(28px, 4vw, 58px) clamp(24px, 4vw, 64px);
    border: 1px solid rgba(201, 160, 89, .22);
    border-radius: 22px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 70px rgba(23, 54, 83, .12), inset 0 0 0 1px rgba(255, 255, 255, .48);
  }

  .tmc-story-page > [data-tmc-story-chapter="6"] > .container,
  .tmc-story-page > [data-tmc-story-chapter="8"] > .container {
    margin-left: 4vw;
    margin-right: auto;
    transform: none;
  }

  .tmc-story-page > [data-tmc-story-chapter="7"] > .container,
  .tmc-story-page > [data-tmc-story-chapter="9"] > .container {
    margin-left: auto;
    margin-right: 4vw;
    transform: none;
  }

  .tmc-story-page > [data-tmc-story-chapter="5"] > .container {
    width: min(1120px, 84vw);
    margin-inline: auto;
  }

  /* Keep all four process steps inside the readable desktop surface. */
  .tmc-story-page > [data-tmc-story-chapter="7"] .process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 30px);
    width: 100%;
  }

  .tmc-story-page > [data-tmc-story-chapter="7"] .process-grid > * {
    min-width: 0;
    width: auto;
  }

  /* A page restored at a late scroll position must not leave these final
     narrative chapters faded while the observer waits for a new intersection. */
  .tmc-story-page > [data-tmc-story-chapter="8"] .tmc-reveal,
  .tmc-story-page > [data-tmc-story-chapter="9"] .tmc-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tmc-story-page > [data-tmc-story-chapter] {
    transform: none;
    transition: none;
    will-change: auto;
  }
}

.tmc-3d-stage::before,
.tmc-3d-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.tmc-3d-stage::before {
  width: min(62vw, 820px);
  aspect-ratio: 1;
  right: -15%;
  top: -28%;
  background: radial-gradient(circle, rgba(23, 54, 83, .08), rgba(23, 54, 83, 0) 68%);
}

.tmc-3d-stage::after {
  width: min(44vw, 620px);
  aspect-ratio: 1;
  left: -15%;
  bottom: -35%;
  background: radial-gradient(circle, rgba(80, 104, 128, .08), rgba(80, 104, 128, 0) 70%);
}

.tmc-3d-story::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(86px, 13vh, 150px);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 84%);
}

.tmc-3d-canvas,
.tmc-3d-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tmc-3d-canvas {
  display: block;
  left: 42%;
  width: 58%;
  opacity: 0;
  transition: opacity .45s ease;
}

.tmc-3d-ready .tmc-3d-canvas { opacity: 1; }
.tmc-3d-static .tmc-3d-canvas { display: none; }
.tmc-3d-static .tmc-3d-fallback { opacity: 1; }

.tmc-3d-fallback {
  display: grid;
  place-items: center 76%;
  padding: clamp(24px, 6vw, 90px);
  transition: opacity .35s ease;
}

.tmc-3d-fallback img {
  width: min(44vw, 560px);
  max-height: 72vh;
  object-fit: contain;
  border: clamp(14px, 2vw, 28px) solid #fff;
  background: #fff;
  box-shadow: 0 35px 75px rgba(23, 54, 83, .18);
}

.tmc-3d-art-loaded .tmc-3d-fallback { opacity: 0; }

.tmc-3d-copy {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 7vw, 112px);
  top: 50%;
  width: min(40vw, 560px);
  transform: translateY(-50%);
  color: var(--tmc-story-ink);
  transition: opacity .35s ease;
}

/* Once the live catalogue chapters begin, the chapter panels carry the
   narrative. Keep the physical frame moving, but retire the opening copy so
   it cannot sit underneath and compete with later content. */
.tmc-3d-story[data-story-chapter] + .tmc-3d-stage .tmc-3d-copy,
.tmc-3d-story[data-story-chapter] + .tmc-3d-stage .tmc-3d-hint,
.tmc-story-page.tmc-story-continuing .tmc-3d-copy,
.tmc-story-page.tmc-story-continuing .tmc-3d-hint {
  opacity: 0;
  pointer-events: none;
}

.tmc-3d-eyebrow {
  margin: 0 0 13px;
  color: #9b7841;
  font: 600 clamp(.68rem, 1vw, .82rem)/1.5 Montserrat, sans-serif;
  letter-spacing: .22em;
}

.tmc-3d-copy h2 {
  margin: 0;
  max-width: 11ch;
  color: var(--tmc-story-ink);
  font: 500 clamp(2.7rem, 5.8vw, 6rem)/.92 "Cormorant Garamond", serif;
  letter-spacing: -.035em;
}

.tmc-3d-copy > p:not(.tmc-3d-eyebrow) {
  margin: 22px 0 28px;
  max-width: 49ch;
  color: #536474;
  font: 400 clamp(.95rem, 1.2vw, 1.08rem)/1.75 Montserrat, sans-serif;
}

.tmc-3d-copy .button { display: inline-block; }

.tmc-3d-hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  margin: 0;
  transform: translateX(-50%);
  color: #667788;
  font: 600 .7rem/1.2 Montserrat, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tmc-3d-hint span { color: var(--tmc-story-gold); font-size: 1rem; }

.tmc-3d-progress {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  height: 3px;
  background: rgba(23, 54, 83, .08);
}

.tmc-3d-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #173653, #c9a059);
}

/* The story continues as finite homepage chapters after the pinned 3D scene. */
.collections[data-tmc-story-collections] {
  position: relative;
  z-index: 2;
  /* Begin the catalogue during the final, fully assembled Kashy frame so the
     collection spiral rises over the photograph instead of hard-cutting. */
  margin-top: -100svh;
  padding-top: clamp(48px, 8vw, 112px);
  border-top: 1px solid rgba(23, 54, 83, .08);
  perspective: 1500px;
  perspective-origin: 50% 38vh;
}

.collections [data-tmc-story-reveal] {
  opacity: 1;
}

.collections [data-tmc-story-reveal].tmc-story-visible {
  opacity: 1;
}

/* The catalogue is the second act of the story. Cards orbit one shared
   vertical axis like a physical helix, with several photographs visible at
   once at different depths. Values are driven from the existing scroll loop. */
.collections .collection-grid {
  perspective: 1500px;
  transform-style: preserve-3d;
}

@media (min-width: 720px) {
  .collections .collection-grid {
    grid-template-columns: minmax(0, min(640px, 58vw));
    justify-content: center;
    row-gap: 0;
  }

  /* The desktop headings are the single source of truth. The mobile headings
     remain in the markup for narrow screens but must not float above the
     helix and read as duplicate collection titles on tablet widths. */
  .collections .mobile-collection-heading {
    display: none !important;
  }

  .collections .collection-card[data-tmc-spiral-card] {
    width: 100%;
    margin-bottom: clamp(-230px, -18vw, -150px);
  }
}

@media (min-width: 720px) and (max-width: 900px) {
  .collections .collection-grid {
    grid-template-columns: minmax(0, 76vw);
  }

  .collections .collection-card[data-tmc-spiral-card] {
    margin-bottom: 0;
  }
}

/* The desktop helix needs room to breathe. On tablet and mobile, keep the
   catalogue calm and fully readable in normal flow; this also prevents the
   last helix card from visually overlapping the following story chapters. */
@media (max-width: 900px) {
  .collections .collection-card[data-tmc-spiral-card] {
    transform: none !important;
    margin-bottom: 0 !important;
    opacity: 1 !important;
  }
}

.collections .collection-card[data-tmc-spiral-card] {
  position: relative;
  z-index: var(--tmc-spiral-layer, 1);
  opacity: var(--tmc-spiral-opacity, 1);
  transform: translate3d(var(--tmc-spiral-x, 0px), var(--tmc-spiral-y, 0px), var(--tmc-spiral-z, 0px))
    rotateX(var(--tmc-spiral-tilt, 0deg)) rotateY(var(--tmc-spiral-turn, 0deg));
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  backface-visibility: hidden;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 24px 64px rgba(23, 54, 83, var(--tmc-spiral-shadow, .12));
}

.collections .collection-card[data-tmc-spiral-card] .collection-image,
.collections .collection-card[data-tmc-spiral-card] .collection-image img {
  opacity: 1;
  visibility: visible;
  transform: translateZ(24px);
  backface-visibility: hidden;
}

@media (max-width: 719px) {
  /* Give the five-part phone story enough distance to unfold without racing
     through several chapters in a single thumb movement. */
  .tmc-3d-story { height: 340svh !important; min-height: 2600px !important; padding: 0 !important; }
  .tmc-3d-stage {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    min-height: 680px !important;
  }
  .tmc-3d-canvas {
    display: block !important;
    inset: 0 0 auto !important;
    width: 100% !important;
    height: 58svh !important;
  }
  .tmc-3d-hint,
  .tmc-3d-progress { display: block !important; }
  .tmc-3d-fallback {
    place-items: start center;
    inset: 0 0 auto !important;
    height: 58svh !important;
    padding: max(24px, env(safe-area-inset-top)) 18px 18px;
    opacity: 1;
  }
  .tmc-3d-fallback img { width: min(80vw, 340px); max-height: 49svh; }
  .tmc-3d-copy {
    left: 20px;
    right: 20px;
    top: 60svh;
    bottom: auto;
    width: auto;
    max-height: calc(40svh - 48px);
    overflow-y: auto;
    padding: 18px 18px 16px;
    transform: none;
    border: 1px solid rgba(201, 160, 89, .24);
    border-radius: 18px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 18px 45px rgba(23, 54, 83, .12);
    backdrop-filter: blur(13px);
  }
  .tmc-3d-copy h2 { max-width: 13ch; font-size: clamp(2.2rem, 11vw, 3.55rem); }
  .tmc-3d-copy > p:not(.tmc-3d-eyebrow) { margin: 12px 0 16px; font-size: .88rem; line-height: 1.55; }
  .tmc-3d-copy .button { padding: 11px 16px; font-size: .78rem; }
  .tmc-3d-hint { bottom: max(14px, env(safe-area-inset-bottom)); font-size: .6rem; }
  .tmc-story-page > [data-tmc-story-chapter] {
    min-height: 0 !important;
    background: #fff;
    transform: none !important;
    perspective: none !important;
  }
  .tmc-story-page > [data-tmc-story-chapter] > .container,
  .tmc-story-page > [data-tmc-story-chapter] > .container.narrow {
    transform: none !important;
  }
  .collections .collection-card[data-tmc-spiral-card] {
    transform: none !important;
    margin-bottom: 0 !important;
    opacity: 1 !important;
  }
  .collections[data-tmc-story-collections] {
    margin-top: 0 !important;
    padding: 44px 0 52px !important;
    perspective: none !important;
  }
  .collections .section-heading {
    margin: 38px auto 20px !important;
  }
  .collections .section-heading:first-child { margin-top: 0 !important; }
  .collections .section-heading > p { margin-bottom: 8px !important; }
  .collections .section-heading > p:last-child {
    margin: 8px auto 0 !important;
    max-width: 34ch;
    font-size: .88rem;
    line-height: 1.5;
  }
  .collections .collection-grid,
  .home-page .collections .collection-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 420px) !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 18px !important;
    margin: 0 auto 34px !important;
    padding: 0 16px 10px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }
  .home-page .collections .collection-card {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 420px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 16px !important;
    border-radius: 16px !important;
    text-align: center !important;
    transform: none !important;
    box-shadow: 0 10px 28px rgba(23, 54, 83, .09) !important;
  }
  .home-page .collections .collection-card .collection-image {
    width: min(100%, 260px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 14px !important;
    aspect-ratio: 4 / 5 !important;
    transform: none !important;
  }
  .home-page .collections .collection-card .collection-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
  }
  .home-page .collections .collection-card > h3,
  .home-page .collections .collection-card > p,
  .home-page .collections .collection-card > a,
  .home-page .collections .collection-card > .button,
  .home-page .collections .collection-card > .button-outline {
    width: 100% !important;
    min-width: 0;
    text-align: center !important;
  }
  .home-page .collections .collection-card > h3 {
    margin: 0 !important;
    font-size: clamp(1.3rem, 6vw, 1.65rem) !important;
    line-height: 1.02 !important;
    transform: none !important;
  }
  .home-page .collections .collection-card > p:not(.price) {
    display: -webkit-box;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: .78rem !important;
    line-height: 1.38 !important;
  }
  .home-page .collections .collection-card > p.price,
  .home-page .collections .collection-card > p:has(> strong) {
    margin: 0 !important;
    font-size: .88rem !important;
    line-height: 1.3 !important;
  }
  .home-page .collections .collection-card > a,
  .home-page .collections .collection-card > .button,
  .home-page .collections .collection-card > .button-outline {
    align-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 13px !important;
    font-size: .72rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }
  .home-page .collections .tmc-catalogue-badge {
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 18px;
  }
  .home-page .why-us,
  .home-page .process,
  .home-page .instagram,
  .home-page .cta { padding: 52px 0 !important; }
  .home-page .section-heading { margin-bottom: 30px; }
  .home-page .features,
  .home-page .process-grid { margin-top: 30px; gap: 16px; }
  .home-page .feature,
  .home-page .step { padding: 26px 20px; }
  .home-page .cta h2 { font-size: clamp(2.35rem, 12vw, 3.25rem); }
  .home-page .cta p { font-size: 1rem; }
  .home-page .cta .hero-buttons { margin-top: 26px; }
}

@media (max-width: 359px) {
  .home-page .collections .collection-card {
    padding: 14px !important;
  }
  .home-page .collections .collection-card .collection-image { width: min(100%, 230px) !important; }
}

/* Desktop catalogue presentation: keep the helix sparse and image-led. The
   product cards remain complete in the DOM, but secondary copy/actions are
   visually collapsed so the photographs and titles read as distinct panels.
   A generous row gap contains the depth movement and keeps the next chapter
   out of the orbit. */
@media (min-width: 901px) {
  .collections[data-tmc-story-collections] {
    overflow-x: clip;
    padding-bottom: clamp(220px, 18vw, 320px);
  }

  .collections .collection-grid {
    display: grid !important;
    grid-template-columns: minmax(0, min(560px, 48vw)) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(140px, 11vw, 210px) 0 !important;
    margin: 42px auto clamp(180px, 20vw, 300px) !important;
    max-width: none !important;
  }

  .collections .collection-card[data-tmc-spiral-card] {
    display: grid !important;
    grid-template-columns: minmax(190px, .95fr) minmax(0, 1.05fr) !important;
    align-items: center !important;
    gap: clamp(20px, 2.4vw, 34px) !important;
    width: 100% !important;
    min-width: 0 !important;
    height: clamp(260px, 24vw, 340px) !important;
    min-height: 260px !important;
    margin: 0 !important;
    padding: clamp(18px, 2.4vw, 30px) !important;
    overflow: hidden !important;
    transform: translate3d(var(--tmc-spiral-x, 0px), var(--tmc-spiral-y, 0px), var(--tmc-spiral-z, 0px))
      rotateX(var(--tmc-spiral-tilt, 0deg)) rotateY(var(--tmc-spiral-turn, 0deg)) !important;
    transition: box-shadow .28s ease, opacity .28s ease !important;
  }

  .collections .collection-card[data-tmc-spiral-card] .collection-image {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: translateZ(22px) !important;
  }

  .collections .collection-card[data-tmc-spiral-card] .collection-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
  }

  .collections .collection-card[data-tmc-spiral-card] > h3 {
    margin: 0 !important;
    max-width: 14ch;
    font-size: clamp(1.25rem, 2.1vw, 2rem) !important;
    line-height: 1.12 !important;
    text-align: left !important;
    transform: translateZ(30px) !important;
  }

  /* Keep descriptions, prices and actions available to assistive technology
     and source consumers without letting them pile onto the visual panel. */
  .collections .collection-card[data-tmc-spiral-card] > p,
  .collections .collection-card[data-tmc-spiral-card] > a,
  .collections .collection-card[data-tmc-spiral-card] > .button,
  .collections .collection-card[data-tmc-spiral-card] > .button-outline {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .tmc-3d-copy { left: 18px; right: auto; bottom: 18px; width: min(46vw, 430px); padding: 14px; }
  .tmc-3d-copy h2 { font-size: clamp(1.8rem, 6vw, 2.7rem); }
  .tmc-3d-copy > p:not(.tmc-3d-eyebrow) { margin: 8px 0 10px; font-size: .74rem; }
  .tmc-3d-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tmc-3d-story { height: auto !important; min-height: 0 !important; }
  .tmc-3d-stage { position: relative !important; min-height: 680px; height: min(84vh, 760px); }
  .tmc-3d-canvas, .tmc-3d-hint, .tmc-3d-progress { display: none !important; }
  .tmc-3d-fallback { opacity: 1 !important; }
  .collections [data-tmc-story-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .collections .collection-card[data-tmc-spiral-card] { transform: none; opacity: 1; }
}

/* iPhone presentation guardrails. Keep every home card inside the viewport,
   remove the partial next-card peek, and make the DYO panel a clean CTA with
   no inherited watermark or background artwork. */
@media (max-width: 719px) {
  html, body { overflow-x: clip !important; }

  .home-page .collections,
  .home-page .collections .container {
    width: 100% !important;
    max-width: none !important;
    overflow-x: clip !important;
  }

  .home-page .collections .container {
    padding-inline: 16px !important;
    box-sizing: border-box;
  }

  .home-page .collections .collection-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    margin-inline: auto !important;
    padding: 0 !important;
    gap: 22px !important;
    overflow: visible !important;
    transform: none !important;
  }

  .home-page .collections .collection-card,
  .home-page .collections .collection-card[data-tmc-spiral-card] {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 420px !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    transform: none !important;
    rotate: none !important;
  }

  .home-page .tmc-design-your-own-cta {
    box-sizing: border-box !important;
    width: min(calc(100% - 32px), 520px) !important;
    max-width: 520px !important;
    margin-inline: auto !important;
    background-image: linear-gradient(160deg, #173653 0 68%, #caa35c 68% 70%, #f4ead9 70% 100%) !important;
    background-color: #173653 !important;
  }

  .home-page .tmc-design-your-own-cta::before,
  .home-page .tmc-design-your-own-cta::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }
}

/* Keep the portrait story copy panel fully readable. The previous mobile
   height left the action at the bottom of the physical-layers chapter clipped
   inside the panel; reserve a little more vertical room while keeping a
   deliberate gap between the frame and the copy. */
@media (max-width: 719px) {
  .tmc-3d-canvas,
  .tmc-3d-fallback {
    height: 54svh !important;
  }

  .tmc-3d-fallback {
    padding-bottom: 10px !important;
  }

  .tmc-3d-copy {
    top: 55svh !important;
    max-height: calc(45svh - 30px) !important;
    overflow: visible !important;
    padding-bottom: 20px !important;
  }

  .tmc-3d-copy h2 {
    font-size: clamp(2rem, 10vw, 3.35rem) !important;
  }

  .tmc-3d-copy > p:not(.tmc-3d-eyebrow) {
    margin-bottom: 14px !important;
  }
}

/* Portrait opening polish: show an intentional visual frame immediately,
   shorten the thumb distance between story chapters, and give every copy
   panel enough room for its complete message and action. */
@media (max-width: 719px) {
  .tmc-3d-story {
    height: 260svh !important;
    min-height: 2100px !important;
  }

  .tmc-3d-stage {
    background:
      radial-gradient(circle at 50% 24%, rgba(201, 160, 89, .13), transparent 31%),
      linear-gradient(180deg, #fbfaf7 0%, #fff 62%, #f8f8f7 100%) !important;
  }

  .tmc-3d-canvas,
  .tmc-3d-fallback {
    height: 50svh !important;
  }

  .tmc-3d-fallback::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: min(72vw, 310px);
    aspect-ratio: 1;
    border: 12px solid rgba(215, 218, 219, .9);
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(236,239,240,.78));
    box-shadow: 0 24px 46px rgba(23, 54, 83, .12), inset 0 0 0 10px rgba(255,255,255,.82);
    transform: rotate(-2deg);
  }

  .tmc-3d-fallback img {
    position: relative;
    z-index: 1;
  }

  .tmc-3d-copy {
    top: 52svh !important;
    max-height: calc(48svh - 24px) !important;
    padding: 16px 18px 18px !important;
  }

  .tmc-3d-copy h2 {
    font-size: clamp(1.9rem, 9.6vw, 3.2rem) !important;
    line-height: .96 !important;
  }

  .tmc-3d-copy > p:not(.tmc-3d-eyebrow) {
    margin: 10px 0 12px !important;
    font-size: .84rem !important;
    line-height: 1.46 !important;
  }

  .tmc-3d-copy .button {
    margin-top: 0 !important;
    padding: 10px 14px !important;
  }
}

/* Make the dynamically-rendered View & Personalise action a dependable
   phone-sized touch target. Keep it centred, fully inside each card, and above
   the card's visual layers without changing desktop buttons. */
@media (max-width: 719px) {
  .home-page .collections .collection-card > a.button {
    position: relative;
    z-index: 4;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: center !important;
    width: auto !important;
    min-width: 182px;
    min-height: 44px !important;
    box-sizing: border-box;
    margin-top: auto !important;
    margin-bottom: 2px !important;
    padding: 11px 16px !important;
    white-space: nowrap;
    line-height: 1.1 !important;
    text-align: center !important;
    touch-action: manipulation;
    transform: none !important;
  }

  .home-page .collections .collection-card > a.button:focus-visible {
    outline: 3px solid rgba(23, 54, 83, .35);
    outline-offset: 3px;
  }
}