/* ═════════ KAVITY · 3D hero layer ═════════ */
.hero .kv3d-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.6s cubic-bezier(.2,.7,.2,1)}
.hero .kv3d-canvas.in{opacity:1}

.hero.has-3d{min-height:min(90vh,840px)}
@media (max-width:899px){.hero.has-3d{min-height:0;align-items:flex-start;padding-bottom:clamp(230px,30vh,330px)}}

/* ── desktop scroll scene: the hero holds while the façade opens and the camera
      moves in on one Z-bracket ── */
@media (min-width:900px){
  .kv3d-pin.on{position:relative;height:calc(100vh - 62px + 130vh);height:calc(100svh - 62px + 130svh)}
  .kv3d-pin.kv3d-pin-long.on{height:calc(100vh - 62px + 420vh);height:calc(100svh - 62px + 420svh)}
  .kv3d-pin.on > .hero.has-3d{position:sticky;top:62px;height:calc(100vh - 62px);height:calc(100svh - 62px);min-height:560px}
}

/* ── callouts: a technical-drawing layer projected from 3D anchors ── */
.kv3d-labels{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.kv3d-tag{position:absolute;left:0;top:0;width:0;height:0;will-change:transform;opacity:0;
  transition:opacity .35s ease var(--d,0ms)}
.kv3d-tag.on{opacity:1}
.kv3d-dot{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.14),0 0 14px rgba(224,36,63,.9);
  transform:scale(.3);transition:transform .45s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.kv3d-tag.on .kv3d-dot{transform:scale(1)}
.kv3d-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(255,255,255,.55);
  animation:kvPulse 2.4s ease-out infinite}
@keyframes kvPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.kv3d-line{position:absolute;left:0;top:0;height:1px;transform-origin:0 50%}
.kv3d-line::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.55));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.3,.8,.2,1) calc(var(--d,0ms) + 80ms)}
.kv3d-tag.on .kv3d-line::before{transform:scaleX(1)}
.kv3d-chip{
  position:absolute;white-space:nowrap;
  transform:translate(8px,-50%);opacity:0;
  transition:opacity .4s ease calc(var(--d,0ms) + 260ms),margin .5s cubic-bezier(.2,.8,.2,1) calc(var(--d,0ms) + 260ms);
  margin-left:-6px;
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem .8rem .5rem .6rem;border-radius:999px;
  font:600 .74rem/1 'Inter','IBM Plex Sans Arabic',sans-serif;letter-spacing:.01em;color:#fff;
  background:rgba(16,17,20,.62);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
.kv3d-chip b{font:700 .62rem/1 'Inter',sans-serif;color:#fff;background:var(--red,#C8102E);
  border-radius:999px;min-width:1.35rem;height:1.35rem;display:inline-grid;place-items:center;letter-spacing:0}
.kv3d-tag.on .kv3d-chip{opacity:1;margin-left:0}
.kv3d-tag.left .kv3d-chip{transform:translate(calc(-100% - 8px),-50%);margin-left:6px}
.kv3d-tag.left.on .kv3d-chip{margin-left:0}
html[lang="ar"] .kv3d-chip{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0;font-size:.8rem}

/* ── chapter steps (desktop scroll scene) ── */
.kv3d-steps{
  position:absolute;z-index:3;bottom:clamp(1.2rem,3vw,2.2rem);
  inset-inline-end:max(var(--pad),calc((100% - 1280px)/2 + var(--pad)));
  display:flex;gap:.35rem;padding:.35rem;border-radius:999px;
  background:rgba(16,17,20,.5);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%)}
.kv3d-step{
  appearance:none;border:0;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  padding:.5rem .85rem;border-radius:999px;background:transparent;color:rgba(255,255,255,.62);
  font:500 .74rem/1 'Inter','IBM Plex Sans Arabic',sans-serif;letter-spacing:.01em;
  transition:background .35s,color .35s}
.kv3d-step b{font:700 .66rem/1 'Inter',sans-serif;opacity:.7}
.kv3d-step:hover{color:#fff}
.kv3d-step.on{background:rgba(255,255,255,.14);color:#fff}
.kv3d-step.on b{color:#ff6b7f;opacity:1}
.kv3d-step span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .5s cubic-bezier(.2,.8,.2,1)}
.kv3d-step.on span,.kv3d-steps:hover .kv3d-step span{max-width:14rem}
html[lang="ar"] .kv3d-step{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0;font-size:.8rem}
.kv3d-step:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ── scroll hint ── */
.kv3d-hint{
  position:absolute;z-index:2;bottom:clamp(1.2rem,3vw,2.2rem);
  inset-inline-start:max(var(--pad),calc((100% - 1280px)/2 + var(--pad)));
  display:flex;align-items:center;gap:.7rem;
  font:500 .78rem/1 'Inter','IBM Plex Sans Arabic',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.78);transition:opacity .5s,transform .5s}
html[lang="ar"] .kv3d-hint{text-transform:none;letter-spacing:0;font-family:'IBM Plex Sans Arabic',sans-serif}
.kv3d-hint::before{content:'';flex:none;width:22px;height:34px;border-radius:12px;border:1.5px solid rgba(255,255,255,.6)}
.kv3d-hint::after{
  content:'';position:absolute;top:8px;inset-inline-start:9.5px;width:4px;height:6px;border-radius:2px;background:#fff;
  animation:kvWheel 1.8s cubic-bezier(.6,0,.4,1) infinite}
@keyframes kvWheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:0}}
.kv3d-hint.gone{opacity:0;transform:translateY(8px)}
/* nine-chapter tour: numbers only, the active (or hovered) chapter shows its name */
.kv3d-steps-many{gap:.15rem;background:rgba(16,17,20,.72);backdrop-filter:none;-webkit-backdrop-filter:none}
.kv3d-steps-many .kv3d-step{padding:.5rem .6rem}
.kv3d-steps-many:hover .kv3d-step span{max-width:0}
.kv3d-steps-many .kv3d-step.on span,.kv3d-steps-many .kv3d-step:hover span{max-width:14rem}
@media (max-width:899px){.hero .kv3d-canvas{-webkit-mask-image:linear-gradient(to bottom,transparent 52%,#000 74%);mask-image:linear-gradient(to bottom,transparent 52%,#000 74%)}}
@media (max-width:899px){.kv3d-hint,.kv3d-steps,.kv3d-labels{display:none}}

/* headline rotator: outgoing line lifts and blurs away before the next rises in */
.rot span{transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.rot span:not(.on){transform:translateY(-12px);filter:blur(6px);transition-duration:.38s}
.rot span.on{transition-delay:.2s}

@media (prefers-reduced-motion:reduce){
  .hero .kv3d-canvas{transition:none}
  .kv3d-hint::after,.kv3d-dot::after{animation:none}
  .kv3d-tag,.kv3d-dot,.kv3d-line::before,.kv3d-chip{transition:none}
  .rot span,.rot span:not(.on){transition:none;filter:none;transform:none}
}

/* chapter 03: the copy steps back so the bracket and its callouts read cleanly */
.hero.has-3d > .wrap{transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.hero.kv3d-detail > .wrap{opacity:0;transform:translateY(-12px);pointer-events:none}
.hero-red.has-3d::after{transition:opacity .6s ease}
.hero-red.kv3d-detail::after{opacity:.25}
@media (prefers-reduced-motion:reduce){.hero.has-3d > .wrap,.hero-red.has-3d::after{transition:none}}

/* ── photoreal hero: stacked renders, cross-faded by scroll ── */
.kvh-stack{position:absolute;inset:0;overflow:hidden;background:#1d2127}
.kvh-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--ox,50%) 50%;
  display:block;opacity:0;visibility:hidden;z-index:1;backface-visibility:hidden}
.kvh-img.on{opacity:1;visibility:inherit;will-change:transform,opacity}   /* only the renders in view are composited */
.hero-media .kvh-stack img{animation:none;transform:none}   /* no drift: callouts stay registered on the render */
picture.kvh-img img{width:100%;height:100%;object-fit:cover;object-position:var(--ox,50%) 50%;display:block}
@media (max-width:899px){picture.kvh-img img{object-position:50% 100%}}
.kvh-stack{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.kv3d-labels{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
/* callouts are links to the product pages: show it */
a.kv3d-chip{cursor:pointer;transition:opacity .4s ease calc(var(--d,0ms) + 260ms),margin .5s cubic-bezier(.2,.8,.2,1) calc(var(--d,0ms) + 260ms),background .2s,border-color .2s,transform .2s}
a.kv3d-chip::after{content:'';width:.8rem;height:.8rem;flex:none;margin-left:.1rem;opacity:.85;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat}
a.kv3d-chip:hover,a.kv3d-chip:focus-visible{background:var(--red,#C8102E);border-color:var(--red,#C8102E)}
a.kv3d-chip:hover b{background:#fff;color:var(--red,#C8102E)}
/* ── v38 · phones: the copy on a dark band, the building below it (it used to sit hidden behind the text) ── */
@media (max-width:899px){
  .hero.has-3d{flex-direction:column;align-items:stretch;padding-bottom:0;background:#111316}
  .hero.has-3d>.wrap{order:1;position:relative;z-index:2;padding-top:2.2rem;padding-bottom:1.8rem}
  .hero.has-3d .hero-media{position:relative;inset:auto;order:2;aspect-ratio:4/5;width:100%}
  .hero-red.has-3d::after{display:none}
  .hero.has-3d picture.kvh-img img{object-position:50% 30%}
}
/* the tour as a swipeable strip of the chapter renders: phones, and desktops with Reduce motion */
.kvh-tour{display:none;background:#111316;color:#fff;padding:2.4rem 0 2.6rem}
.kvh-tour.show{display:block}
@media (max-width:899px){.kvh-tour{display:block}}
.kvh-tour .eyebrow{color:#ff6b7f}
.kvh-tour-lead{margin:.4rem 0 1.2rem;color:rgba(255,255,255,.72);font-size:.95rem}
.kvh-tour-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad,16px) .4rem;scroll-padding-inline:var(--pad,16px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.kvh-tour-rail::-webkit-scrollbar{display:none}
.kvh-tour-card{flex:0 0 86%;max-width:560px;scroll-snap-align:start;background:#1a1c20;border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden}
@media (min-width:900px){.kvh-tour-card{flex-basis:40%}}
.kvh-tour-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#22252a}
.kvh-tour-card h3{margin:.9rem 1rem .5rem;font:600 1.02rem/1.3 'Outfit',sans-serif;color:#fff}
.kvh-tour-card h3 b{color:#ff6b7f;font-weight:600;margin-inline-end:.25rem}
.kvh-tour-card ul{list-style:none;margin:0;padding:0 1rem 1rem;display:flex;flex-wrap:wrap;gap:.4rem}
.kvh-tour-card li a,.kvh-tour-card li span{display:inline-block;font:500 .8rem/1 Inter,sans-serif;padding:.55rem .75rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:#fff;text-decoration:none}
.kvh-tour-card li a:active{background:#C8102E;border-color:#C8102E}
/* laptops and iPad landscape: the chapter bar stops short of the WhatsApp button */
@media (min-width:900px) and (max-width:1399px){.kv3d-steps{inset-inline-end:calc(20px + 56px + 14px)}}

/* reduced motion / no pinned tour: the hidden attribute must win over display:flex */
.kv3d-steps[hidden],.kv3d-hint[hidden]{display:none!important}