/* Tamam 2026 — expressive layer: living blob stage, marquee, picker, journey, reveals. */
.flow-line{display:none}

/* Home headline: the second line sits on the logo blob, exactly like the wordmark. */
.headline-accent{position:relative;display:inline-block;isolation:isolate;padding:.02em .28em .1em;margin-inline-start:-.14em;white-space:nowrap}
.headline-accent::before{content:"";position:absolute;inset:-.06em -.04em -.02em;z-index:-1;background:var(--blue);-webkit-mask:url(/assets/blob.svg) center/100% 100%;mask:url(/assets/blob.svg) center/100% 100%;transform-origin:15% 50%;animation:blob-in 1.1s var(--ease) .25s both,wobble 10s ease-in-out 1.4s infinite alternate}
html[dir=rtl] .headline-accent::before{transform-origin:85% 50%}
.headline-accent>span{display:inline-block}
.headline-accent::after{content:"";position:absolute;width:.16em;height:.16em;border-radius:50%;background:#fff;inset-inline-end:.06em;bottom:.2em;animation:dot-in .6s var(--spring) 1.1s both}
.h-line{display:block}
@keyframes blob-in{from{transform:scaleX(0) rotate(-6deg);opacity:0}}
@keyframes dot-in{from{transform:scale(0)}}
@media (max-width:520px){.headline-accent{white-space:normal}}

/* Stage */
.service-scene{position:relative;aspect-ratio:1/1;max-height:600px;width:100%;isolation:isolate;--mx:0px;--my:0px}
.service-scene>.vf-corners{--c:30px;--w:2.5px;--o:0px}
.live-blob{position:absolute;inset:6%;width:88%;height:88%;z-index:-1;fill:var(--blue);overflow:visible;transform:translate(var(--mx),var(--my));transition:transform .9s var(--ease)}
.service-scene[data-active-scene=car] .live-blob{fill:#d4a5e8}
.service-scene[data-active-scene=health] .live-blob{fill:#f28b82}
.service-scene[data-active-scene=lifestyle] .live-blob{fill:#a8e5a8}
.service-scene .live-blob path{transition:fill .6s}
.scene-objects{position:absolute;inset:0}
.scene-object{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.9) rotate(-3deg);transition:opacity .5s,transform .8s var(--spring);pointer-events:none}
.scene-object.is-active{opacity:1;transform:none;pointer-events:auto}
.scene-art{width:74%;height:auto;filter:drop-shadow(0 30px 30px rgba(17,17,17,.22));transform:translate(calc(var(--mx)*-.6),calc(var(--my)*-.6));transition:transform .9s var(--ease);animation:float 7s ease-in-out infinite alternate}
@keyframes float{to{translate:0 -12px}}
.scene-word{position:absolute;top:2%;inset-inline-start:4%;font:700 clamp(54px,8vw,120px)/1 var(--display);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(17,17,17,.28);z-index:-2}
.scene-mood{position:absolute;top:5%;inset-inline-end:5%;margin:0;max-width:16em;font:500 15px/1.3 var(--display);text-align:end}
.scene-chip{position:absolute;inset-inline-start:2%;bottom:20%;display:inline-flex;gap:10px;align-items:center;padding:13px 18px;background:var(--card);border:1.5px solid var(--ink);border-radius:999px;font-weight:650;font-size:15px;box-shadow:0 14px 30px -18px rgba(17,17,17,.5);transform:rotate(-4deg);transition:transform .45s var(--spring),background .2s;max-width:92%}
.scene-chip-1{inset-inline-start:auto;inset-inline-end:3%;bottom:auto;top:16%;transform:rotate(3deg)}
.scene-chip:hover{transform:rotate(0) scale(1.05);background:var(--blue)}
.scene-controls{position:absolute;inset-inline:0;bottom:-6px;display:flex;justify-content:center;gap:6px}
.stage-home .scene-controls{bottom:-34px}
.scene-controls button{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:4px 14px 4px 5px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--card);font-weight:600;font-size:14px;transition:background .25s,border-color .25s,transform .35s var(--spring)}
html[dir=rtl] .scene-controls button{padding:4px 5px 4px 14px}
.scene-controls button img{width:34px;height:34px;border-radius:50%;background:var(--paper-2);object-fit:contain;padding:2px}
.scene-controls button:hover{transform:translateY(-2px);border-color:var(--ink)}
.scene-controls button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.scene-browse{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;background:var(--card);border:1.5px solid var(--ink);font-weight:600;font-size:15px;transition:background .25s}
.scene-browse:hover{background:var(--blue)}
/* General pages: four category tiles, each one link with its own colour. */
.stage-general{aspect-ratio:auto;max-height:none}
.stage-general .scene-objects,.stage-general .live-blob{display:none}
.stage-general .scene-controls{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}
.stage-general .scene-controls a{--tint:var(--t-home);--wash:#dcf1fe;position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1/.92;padding:16px;border-radius:var(--r);background:var(--wash);overflow:hidden;isolation:isolate;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.stage-general .scene-controls a[data-tile=car]{--tint:var(--t-car);--wash:#f3e6fa}.stage-general .scene-controls a[data-tile=health]{--tint:var(--t-health);--wash:#fbe4e2}.stage-general .scene-controls a[data-tile=lifestyle]{--tint:var(--t-lifestyle);--wash:#e2f5e2}
.stage-general .scene-controls a::before{content:"";position:absolute;inset:18% 8% 8% 18%;z-index:-1;background:var(--tint);opacity:.55;-webkit-mask:url(/assets/blob.svg) center/100% 100%;mask:url(/assets/blob.svg) center/100% 100%;transition:transform .6s var(--spring)}
.stage-general .scene-controls a img{position:absolute;width:62%;inset-inline-end:4%;bottom:4%;z-index:-1;filter:drop-shadow(0 14px 14px rgba(17,17,17,.2));transition:transform .6s var(--spring)}
.stage-general .tile-label{display:flex;justify-content:space-between;align-items:center;font:600 clamp(16px,1.4vw,20px)/1 var(--display)}
.stage-general .tile-arrow{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--card);font-size:15px}
.stage-general .scene-controls a:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(17,17,17,.5)}
.stage-general .scene-controls a:hover img{transform:scale(1.08) rotate(-4deg)}
.stage-general .scene-controls a:hover::before{transform:scale(1.1) rotate(8deg)}
/* Marquee of every service */
.marquee{overflow:hidden;border-bottom:1px solid var(--line);background:var(--ink);padding-block:14px;direction:ltr;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 60s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-set{display:flex;gap:8px;padding-inline-end:8px}
.marquee a{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;color:var(--paper);border:1px solid rgba(241,239,234,.22);font:500 16px/1 var(--display);white-space:nowrap;transition:background .25s,color .25s}
.marquee a:hover,.marquee a:focus-visible{background:var(--blue);color:var(--ink);border-color:var(--blue)}
.marquee a i{width:14px;height:8px;background:var(--t-home);-webkit-mask:url(/assets/blob.svg) center/100% 100%;mask:url(/assets/blob.svg) center/100% 100%}
.marquee a[data-card-industry=car] i{background:#d4a5e8}.marquee a[data-card-industry=health] i{background:#f28b82}.marquee a[data-card-industry=lifestyle] i{background:#a8e5a8}
@keyframes marquee{to{transform:translateX(-50%)}}
html[dir=rtl] .marquee-set{direction:rtl}

/* Home realms */
.realm-intro{max-width:760px;margin-bottom:24px}
.realm-intro h2{font-size:clamp(34px,4.6vw,68px)!important}
.home-content .article>section.realm{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:start}
.realm-heading{position:sticky;top:110px}
.realm-heading h2 a{background:linear-gradient(var(--blue),var(--blue)) 0 92%/0 35% no-repeat;transition:background-size .5s var(--ease)}
.realm-heading h2 a:hover{background-size:100% 35%}
.realm-heading img{width:min(340px,80%);margin-top:18px;filter:drop-shadow(0 22px 22px rgba(17,17,17,.18));transform:translateY(var(--realm-shift,0));transition:transform .2s linear}

/* Emirate picker */
.emi-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.emi-tabs button{position:relative;min-height:50px;padding:0 20px;border-radius:999px;border:1.5px solid var(--ink);background:none;font:600 16px/1 var(--display);transition:background .3s,color .3s,transform .35s var(--spring);isolation:isolate;overflow:hidden}
.emi-tabs button:hover{transform:translateY(-2px)}
.emi-tabs button[aria-selected=true]{background:var(--ink);color:var(--paper)}
.emi-panel{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:28px;align-items:start;padding:clamp(22px,3vw,40px);background:var(--card);border:1px solid var(--line);border-radius:28px;position:relative}
.js .emi-panel[data-later]{display:none}
.emi-panel.is-entering{animation:panel-in .55s var(--ease)}
@keyframes panel-in{from{opacity:0;transform:translateY(12px)}}
.emi-place{margin:0;font:700 clamp(40px,5vw,76px)/1 var(--display);letter-spacing:-.04em;position:relative;isolation:isolate}
.emi-place span{position:relative}
.emi-place span::after{content:"";position:absolute;inset:auto -.1em -.06em;height:.36em;z-index:-1;background:var(--blue);-webkit-mask:url(/assets/blob.svg) center/100% 100%;mask:url(/assets/blob.svg) center/100% 100%}
.emi-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;grid-row:span 2}
.emi-links a{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--paper);font-weight:600;transition:background .25s,transform .3s var(--ease)}
.emi-links a:hover{background:var(--blue-wash);transform:translateX(4px)}
html[dir=rtl] .emi-links a:hover{transform:translateX(-4px)}
.emi-panel>.text-link{align-self:end;justify-self:start}

/* Journey */
.journey{padding-block:clamp(56px,8vw,120px);border-top:1px solid var(--line)}
.journey-intro h2{font-size:clamp(38px,5.4vw,82px);line-height:1;max-width:12em;margin-bottom:clamp(30px,5vw,60px)}
.journey-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,96px);align-items:start}
.journey-stage{position:sticky;top:110px}
.journey-device{position:relative;max-width:360px;margin-inline:auto;aspect-ratio:9/15;padding:18px;background:var(--ink);border-radius:44px;box-shadow:0 50px 80px -40px rgba(17,17,17,.6)}
.journey-top{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 18px;color:var(--paper);font-size:12px}
.journey-top img{width:76px;filter:brightness(0) invert(1)}
.journey-panel{position:absolute;inset:70px 18px 54px;display:flex;flex-direction:column;padding:22px;background:var(--paper);border-radius:28px;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .5s,transform .6s var(--ease)}
.journey-panel.is-active{opacity:1;transform:none}
.journey-panel-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.journey-art{flex:1;display:grid;place-items:center}
.journey-art img{width:70%}
.journey-art-1{display:grid;gap:10px;align-content:center;place-items:stretch}
.journey-art-1 span{height:58px;border-radius:16px;background:var(--card);border:1px solid var(--line);position:relative}
.journey-art-1 span:first-child{border:2px solid var(--ink);background:var(--blue-wash)}
.journey-art-1 span::before{content:"";position:absolute;inset-inline-start:14px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--paper-2)}
.calendar-mark{display:grid;place-items:center;width:120px;aspect-ratio:1;font-size:56px;color:var(--ink);background:var(--blue);-webkit-mask:url(/assets/blob.svg) center/100% 100%;mask:url(/assets/blob.svg) center/100% 100%}
.journey-panel strong{font:600 22px/1.15 var(--display)}
.journey-progress{position:absolute;bottom:22px;inset-inline:0;display:flex;justify-content:center;gap:6px}
.journey-progress i{width:8px;height:8px;border-radius:8px;background:rgba(241,239,234,.35);transition:width .4s var(--ease),background .3s}
.journey-progress i.is-active{width:26px;background:var(--blue)}
.journey-steps{display:grid;gap:clamp(60px,14vh,160px);padding-block:8vh 20vh}
.journey-step{position:relative;padding-inline-start:56px;opacity:.35;transition:opacity .5s}
.journey-step.is-active{opacity:1}
.journey-dot{position:absolute;inset-inline-start:0;top:6px;width:34px;height:20px;background:var(--line-2);-webkit-mask:url(/assets/blob.svg) center/100% 100%;mask:url(/assets/blob.svg) center/100% 100%;transition:background .4s,transform .5s var(--spring)}
.journey-step.is-active .journey-dot{background:var(--blue);transform:scale(1.3)}
.journey-step h3{font-size:clamp(26px,3vw,40px);margin-bottom:12px}
.journey-step p{color:var(--ink-2);max-width:30em}

/* Life photo */
.life-scene{position:relative;overflow:hidden;min-height:clamp(460px,70vh,720px);display:grid;align-items:end;margin-inline:var(--gutter);border-radius:clamp(24px,3vw,40px);isolation:isolate}
.life-image{position:absolute;inset:-10% 0;z-index:-1;transform:translateY(var(--photo-scroll,0px))}
.life-image img{width:100%;height:100%;object-fit:cover}
.life-scene::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(17,17,17,.72),rgba(17,17,17,0) 60%)}
.life-copy{color:var(--paper);padding-block:clamp(30px,5vw,64px)}
.life-copy h2{font-size:clamp(36px,5vw,76px);line-height:1;margin-bottom:14px}
.life-copy p{max-width:30em;color:rgba(241,239,234,.85);margin:0}

/* Reveal on scroll (JS adds .motion-ready; content is visible without JS). */
.motion-ready [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*60ms)}
.motion-ready [data-reveal].is-visible{opacity:1;transform:none}
@supports (animation-timeline:view()){
  .hero .scene-objects{animation:hero-drift linear both;animation-timeline:scroll(root);animation-range:0 600px}
  @keyframes hero-drift{to{transform:translateY(40px) scale(.96)}}
}
/* Hero entrance */
.hero-copy>*{animation:rise .9s var(--ease) both}
.hero-copy>:nth-child(2){animation-delay:.06s}.hero-copy>:nth-child(3){animation-delay:.14s}.hero-copy>:nth-child(4){animation-delay:.22s}.hero-copy>:nth-child(5){animation-delay:.3s}
.hero .service-scene{animation:rise 1.1s var(--ease) .1s both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}

@media (max-width:1060px){
  .home-content .article>section.realm{grid-template-columns:1fr}
  .realm-heading{position:static;display:flex;align-items:center;justify-content:space-between;gap:20px}
  .realm-heading img{width:110px;margin:0}
  .journey-layout{grid-template-columns:1fr}
  .journey-stage{display:none}
  .journey-steps{padding:0;gap:44px}
  .journey-step{opacity:1}
  .emi-panel{grid-template-columns:1fr}
}
@media (max-width:760px){
  .service-scene{max-width:440px;margin-inline:auto;aspect-ratio:1.15/1}
  .stage-home{margin-bottom:40px}
  .stage-home .scene-controls{bottom:-40px;flex-wrap:nowrap}
  .scene-controls button{padding:3px 10px 3px 3px;font-size:13px;gap:5px;min-height:44px}
  html[dir=rtl] .scene-controls button{padding:3px 3px 3px 10px}
  .scene-controls button img{width:30px;height:30px}
  .scene-chip{font-size:13.5px;padding:10px 14px}
  .scene-mood{display:none}
  .scene-art{width:62%}
  .body-hide-mobile{display:none}
  .stage-general .scene-controls{padding:8px 0;gap:8px}
  .emi-tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scrollbar-width:none}
  .emi-tabs button{flex:none;min-height:46px;font-size:15px}
  .emi-links{grid-template-columns:1fr}
  .life-scene{margin-inline:10px}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;width:auto}.marquee-set[aria-hidden]{display:none}.marquee-set{flex-wrap:wrap;justify-content:center}
  .motion-ready [data-reveal]{opacity:1;transform:none}
  .hero .scene-objects{animation:none}
}
.hero-copy>h1,.hero-copy>.lede{animation-name:rise-t}@keyframes rise-t{from{transform:translateY(16px)}}