.showcase-intro {
  --intro-mx:0;
  --intro-my:0;
  position:relative;
  width:100%;
  height:100svh;
  min-height:720px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 42%,rgba(129,216,208,.32),transparent 31%),
    linear-gradient(135deg,var(--color-white),var(--color-tiffany-pale));
  color:var(--color-ink);
}

.showcase-intro::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.22;
  background-image:
    linear-gradient(rgba(47,119,115,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,119,115,.09) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 74%,transparent);
}

.showcase-wordmark {
  position:absolute;
  left:50%;
  bottom:-.16em;
  z-index:-1;
  color:transparent;
  -webkit-text-stroke:1px rgba(47,119,115,.11);
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(9rem,24vw,25rem);
  font-weight:800;
  letter-spacing:-.1em;
  line-height:.8;
  white-space:nowrap;
  transform:translateX(-50%);
}

.showcase-topline {
  position:absolute;
  top:clamp(1.7rem,3vw,3rem);
  right:clamp(1.5rem,4vw,4rem);
  left:clamp(1.5rem,4vw,4rem);
  z-index:5;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  color:var(--color-muted);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.16em;
}

.showcase-topline img { width:clamp(130px,12vw,190px); }
.showcase-topline span:last-child { text-align:right; }

.showcase-copy {
  position:absolute;
  top:50%;
  left:50%;
  z-index:4;
  width:min(900px,72vw);
  text-align:center;
  transform:translate(-50%,-50%);
}

.showcase-eyebrow {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  margin-bottom:1.4rem;
  color:var(--color-tiffany-dark);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.showcase-eyebrow > span { width:5px; height:5px; border-radius:50%; background:var(--color-tiffany); box-shadow:0 0 0 5px rgba(129,216,208,.2); }

.showcase-copy h1 {
  margin:0;
  font-size:clamp(4rem,8vw,8rem);
  font-weight:700;
  line-height:.88;
  letter-spacing:-.065em;
  text-wrap:balance;
}

.showcase-summary {
  max-width:650px;
  margin:2rem auto 0;
  color:var(--color-muted);
  font-size:clamp(.9rem,1.2vw,1.05rem);
  line-height:1.75;
}

.showcase-enter {
  display:inline-flex;
  align-items:center;
  gap:1.1rem;
  min-height:52px;
  margin-top:2rem;
  padding:0 1.4rem;
  border:1px solid var(--color-tiffany-dark);
  border-radius:999px;
  color:var(--color-ink);
  background:var(--color-tiffany);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.08em;
  text-decoration:none;
  transition:background .3s ease,color .3s ease,transform .3s ease;
}

.showcase-enter:hover { background:var(--color-ink); color:var(--color-white); transform:translateY(-3px); }

.showcase-frame {
  position:absolute;
  z-index:2;
  width:clamp(145px,16vw,260px);
  padding:.45rem;
  border:1px solid rgba(47,119,115,.2);
  background:rgba(255,255,255,.82);
  box-shadow:0 25px 70px rgba(47,119,115,.18);
  backdrop-filter:blur(8px);
  transition:transform .18s ease-out;
}

.showcase-frame img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; filter:saturate(.72) contrast(1.08); }
.showcase-frame > span { display:block; padding:.55rem .2rem .15rem; color:var(--color-muted); font-size:.54rem; letter-spacing:.12em; }
.showcase-frame--one { top:19%; left:4%; transform:translate(calc(var(--intro-mx) * -16px),calc(var(--intro-my) * -12px)) rotate(-6deg); }
.showcase-frame--two { top:17%; right:4%; transform:translate(calc(var(--intro-mx) * 19px),calc(var(--intro-my) * -15px)) rotate(5deg); }
.showcase-frame--three { right:12%; bottom:8%; width:clamp(130px,14vw,220px); transform:translate(calc(var(--intro-mx) * 12px),calc(var(--intro-my) * 18px)) rotate(-3deg); }

.showcase-footer {
  position:absolute;
  right:clamp(1.5rem,4vw,4rem);
  bottom:clamp(1.5rem,3vw,3rem);
  left:clamp(1.5rem,4vw,4rem);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1rem;
  color:var(--color-muted);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.16em;
}

.showcase-footer i { height:1px; background:var(--color-line); }

html[dir="rtl"] .showcase-topline span:last-child { text-align:left; }
html[dir="rtl"] .showcase-copy h1 {
  max-width:900px;
  margin-inline:auto;
  font-size:clamp(3.8rem,7vw,7rem);
  line-height:1.16;
  letter-spacing:-.025em;
}
html[dir="rtl"] .showcase-eyebrow { letter-spacing:.04em; }

@media (max-width:900px) {
  .showcase-intro { min-height:680px; }
  .showcase-topline { grid-template-columns:1fr auto; }
  .showcase-topline span:nth-child(2) { display:none; }
  .showcase-copy { width:calc(100% - 2.5rem); }
  .showcase-frame--one { top:18%; left:-4%; }
  .showcase-frame--two { top:20%; right:-5%; }
  .showcase-frame--three { right:2%; bottom:9%; }
}

@media (max-width:600px) {
  .showcase-intro { min-height:660px; }
  .showcase-topline span { display:none; }
  .showcase-copy h1 { font-size:clamp(3.1rem,14vw,5rem); }
  .showcase-summary { max-width:88%; font-size:.88rem; }
  .showcase-frame { opacity:.34; width:130px; }
  .showcase-frame--one { top:18%; left:-15%; }
  .showcase-frame--two { top:22%; right:-16%; }
  .showcase-frame--three { right:-9%; bottom:11%; }
  .showcase-footer span:last-child { display:none; }
  .showcase-footer { grid-template-columns:auto 1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .showcase-frame { transition:none; transform:none !important; }
}

/* Scroll-connected story intro */
.story-scroll-space {
  position:relative;
  width:100%;
}
.story-intro {
  position:absolute;
  top:0;
  display:block;
  width:100%;
  height:100vh;
  height:100svh;
  min-height:680px;
  overflow:hidden;
  isolation:isolate;
  background:#fff;
  color:#000;
}
.story-intro--fixed {
  position:fixed;
  top:0;
  right:0;
  left:0;
}
.story-intro--ended {
  top:auto;
  bottom:0;
}
.story-intro::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:radial-gradient(rgba(0,0,0,.13) .65px,transparent .65px);
  background-size:18px 18px;
  opacity:.16;
  mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
}
.story-topline {
  position:absolute;
  top:clamp(1.6rem,3vw,3rem);
  right:clamp(1.5rem,4vw,4rem);
  left:clamp(1.5rem,4vw,4rem);
  z-index:8;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  color:#47504f;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.18em;
}
.story-topline img { width:clamp(130px,12vw,190px); }
.story-topline span:last-child { text-align:right; }
.story-orbs { position:absolute; inset:0; z-index:1; overflow:hidden; filter:saturate(1.08); }
.story-orb {
  position:absolute;
  display:block;
  aspect-ratio:1;
  height:auto;
  border-radius:0;
  will-change:transform;
  mix-blend-mode:multiply;
  filter:none;
  opacity:.9;
  animation:storySquareDriftA 13s cubic-bezier(.45,.02,.25,1) infinite alternate;
  will-change:transform,translate,rotate,scale;
}
.story-orb--turquoise { width:clamp(260px,31vw,560px); left:4%; top:10%; background:#20c9c3; animation-duration:17s; animation-delay:-8s; }
.story-orb--blue { width:clamp(210px,25vw,450px); right:4%; top:8%; background:#2584ff; animation-name:storySquareDriftB; animation-duration:14s; animation-delay:-3s; }
.story-orb--black { width:clamp(140px,15vw,280px); left:41%; bottom:-12%; background:#050505; animation-name:storySquareDriftC; animation-duration:19s; animation-delay:-11s; }
.story-orb--coral { width:clamp(120px,14vw,250px); right:19%; bottom:7%; background:#ff785d; animation-name:storySquareDriftB; animation-duration:11s; animation-delay:-7s; animation-direction:alternate-reverse; }
.story-orb--violet { width:clamp(90px,10vw,180px); left:22%; bottom:9%; background:#9f7aea; animation-name:storySquareDriftC; animation-duration:15s; animation-delay:-4s; }

@keyframes storySquareDriftA {
  0% { translate:0 0; rotate:-2deg; scale:1; }
  28% { translate:3.5vw -2vh; rotate:4deg; scale:1.035; }
  61% { translate:-1.5vw 3vh; rotate:-5deg; scale:.97; }
  100% { translate:5vw 1vh; rotate:3deg; scale:1.02; }
}

@keyframes storySquareDriftB {
  0% { translate:0 0; rotate:3deg; scale:1; }
  34% { translate:-4vw 2.5vh; rotate:-4deg; scale:.965; }
  72% { translate:1vw -3vh; rotate:6deg; scale:1.04; }
  100% { translate:-2.5vw -1vh; rotate:-2deg; scale:.99; }
}

@keyframes storySquareDriftC {
  0% { translate:0 0; rotate:-4deg; scale:1; }
  22% { translate:2vw 2vh; rotate:2deg; scale:.96; }
  57% { translate:-3vw -1vh; rotate:7deg; scale:1.05; }
  83% { translate:1vw -3.5vh; rotate:-3deg; scale:.985; }
  100% { translate:4vw 1vh; rotate:4deg; scale:1.025; }
}
.story-opening {
  position:absolute;
  top:50%;
  left:50%;
  z-index:5;
  width:min(920px,84vw);
  text-align:center;
  transform:translate(-50%,-50%);
}
.story-opening p {
  margin:0 0 1.2rem;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.2em;
}
.story-opening h1 {
  margin:0;
  font-size:clamp(4.2rem,9vw,9rem);
  font-weight:700;
  line-height:.86;
  letter-spacing:-.07em;
}
.story-sequence { position:absolute; inset:0; z-index:4; opacity:0; }
.story-line { position:absolute; inset:15% 7% 13%; width:86%; height:72%; overflow:visible; }
.story-line path {
  fill:none;
  stroke:#20c9c3;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 2px 5px rgba(32,201,195,.18));
}
.story-line .story-line-track {
  stroke:rgba(13,29,29,.1);
  stroke-width:1;
  stroke-dasharray:none;
  filter:none;
}
.story-line .story-line-progress {
  stroke:#16bebb;
  will-change:clip-path;
}
.story-node {
  position:absolute;
  z-index:2;
  width:min(27vw,360px);
  opacity:0;
  transform:translateY(70px);
}
.story-node::before {
  content:none !important;
  display:none !important;
}
.story-node span { color:#087f7d; font-size:.66rem; font-weight:700; letter-spacing:.16em; }
.story-node h2 { margin:.35rem 0 0; font-size:clamp(2.1rem,4.2vw,5rem); line-height:.9; letter-spacing:-.055em; }
.story-node p { margin:.8rem 0 0; color:#66706e; font-size:.85rem; }
.story-node--one { left:7%; top:55%; }
.story-node--two { left:29%; top:25%; }
.story-node--three { left:54%; top:67%; }
.story-node--four { right:5%; top:39%; }
.story-scroll {
  position:absolute;
  bottom:clamp(1.5rem,3vw,3rem);
  left:50%;
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.8rem;
  transform:translateX(-50%);
  color:#fff;
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.18em;
  mix-blend-mode:difference;
}
.story-scroll i { display:block; width:1px; height:42px; background:currentColor; transform-origin:top; animation:storyScroll 1.5s ease-in-out infinite; }
@keyframes storyScroll { 0% { transform:scaleY(0); transform-origin:top; } 48% { transform:scaleY(1); transform-origin:top; } 52% { transform:scaleY(1); transform-origin:bottom; } 100% { transform:scaleY(0); transform-origin:bottom; } }
html[dir="rtl"] .story-topline span:last-child { text-align:left; }
html[dir="rtl"] .story-opening h1 { font-size:clamp(4rem,8vw,8rem); line-height:1.08; letter-spacing:-.035em; }
html[dir="rtl"] .story-opening p { letter-spacing:.04em; }
html[dir="rtl"] .story-sequence { direction:ltr; }
html[dir="rtl"] .story-node { direction:rtl; text-align:right; }
html[dir="rtl"] .story-node::before { margin-left:0; margin-right:0; }
html[dir="rtl"] .story-node > span,
html[dir="rtl"] .story-node > h2,
html[dir="rtl"] .story-node > p {
  position:relative;
  left:auto;
  right:0;
}
/* The Arabic journey progresses physically from right to left: 01 → 04. */
@media (min-width:701px) {
  html[dir="rtl"] .story-node--one { right:7%; left:auto; top:55%; }
  html[dir="rtl"] .story-node--two { right:29%; left:auto; top:25%; }
  html[dir="rtl"] .story-node--three { right:54%; left:auto; top:67%; }
  html[dir="rtl"] .story-node--four { left:5%; right:auto; top:39%; }
  html[dir="rtl"] .story-node h2 {
    font-size:clamp(2.5rem,4.6vw,5.35rem);
    line-height:1.05;
    letter-spacing:-.025em;
  }
  html[dir="rtl"] .story-node p {
    max-width:28ch;
    margin-top:.65rem;
    font-size:.9rem;
    line-height:1.7;
  }
}
@media (max-width:700px) {
  .story-intro { min-height:600px; }
  .story-topline { grid-template-columns:1fr auto; }
  .story-topline span:nth-child(2) { display:none; }
  .story-topline span:last-child { font-size:.52rem; }
  .story-topline img { width:116px; }
  .story-opening { top:48%; width:calc(100% - 2.5rem); }
  .story-opening p { margin-bottom:.85rem; font-size:.58rem; }
  .story-opening h1 { font-size:clamp(2.75rem,12.5vw,3.6rem); line-height:1.04; }
  html[dir="rtl"] .story-opening h1 { font-size:clamp(2.65rem,11.5vw,3.35rem); line-height:1.08; }
  .story-orb--turquoise { width:230px; left:-30%; top:13%; }
  .story-orb--blue { width:190px; right:-28%; top:15%; }
  .story-orb--black { width:145px; left:31%; bottom:-9%; }
  .story-orb--coral { width:105px; right:-4%; bottom:9%; }
  .story-orb--violet { width:82px; left:6%; bottom:14%; }
  .story-line { inset:12% 5% 10%; width:90%; height:78%; }
  .story-node { width:44vw; }
  .story-node h2 { font-size:clamp(1.65rem,8.5vw,3rem); }
  .story-node p { display:none; }
  .story-node--one { left:5%; top:54%; }
  .story-node--two { left:29%; top:25%; }
  .story-node--three { left:50%; top:68%; }
  .story-node--four { right:2%; top:39%; }
  .story-scroll { bottom:1rem; font-size:.5rem; gap:.55rem; }
  .story-scroll i { height:30px; }
}

@media (max-width:700px) and (max-height:650px) {
  .story-opening { top:46%; }
  .story-orb--turquoise { top:9%; }
  .story-orb--blue { top:11%; }
}

@media (prefers-reduced-motion:reduce) {
  .story-orb,.story-scroll i { animation:none; }
}