/* NovaLab homepage only, redesign 2026-11. Loaded by index.html AFTER css/base.css (fonts, tokens, header, menu, modal, chat, footer live there)
   and css/explainers.css (the dark stage scenes). Holds: hero, countdown, about, services rows and picture frame, work, facts,
   and the homepage entrance and reveal start states.
   Hidden start states exist only inside prefers-reduced-motion: no-preference and only when JS has added html.js / html.pre. */

.facts :focus-visible{outline-color:var(--link-light)}

/* hero */
.hero{padding-top:clamp(6rem,9vw,8.5rem)}
.hero-grid{display:grid;gap:2.5rem}
.hl{font:400 clamp(2.5rem,6vw,6rem)/1.02 var(--serif);letter-spacing:-.01em;margin-bottom:1.75rem}
.hl .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hl .ln>span{display:block}
.hl em{font-style:italic}
.hero-lead{font:500 1.25rem/1.4 var(--sans)}
.hero-sub{margin-top:.75rem;max-width:36rem}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.75rem;margin-top:2rem}
.prices{margin-top:2.75rem;max-width:34rem}
.prices-h{font:400 .9375rem/1.3 var(--sans);color:var(--muted);margin-bottom:.5rem}
.prices li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.15rem 1rem;padding:.7rem 0;border-top:1px solid var(--hair)}
.prices li:last-child{border-bottom:1px solid var(--hair)}
.pl{font-size:1.0625rem}
.pv{font-size:.9375rem;color:var(--muted);text-align:right}
.pv b{font:400 2rem/1 var(--serif);color:var(--ink);font-variant-numeric:lining-nums}
.more{display:inline-block;margin-top:.9rem;color:var(--link);text-decoration:underline;text-underline-offset:.22em}
.hero-bar{margin-top:3rem}
.in-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.25rem 1.5rem;padding:.35rem 0;border-top:1px solid var(--hair);font-size:.9375rem}
.in-bar a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:599px){
  .cta-row{flex-direction:column;align-items:stretch;gap:.25rem}
  .cta-row .btn{width:100%}
  .arrow-link{justify-content:center}
}
@media(min-width:1024px){
  .hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
  .hero-l{grid-column:1/8}
  .hero-bar{margin-top:4rem}
}

/* about */
.about-grid{display:grid;gap:1.25rem}
.statement{font:400 clamp(1.75rem,3.4vw,3.25rem)/1.2 var(--serif);max-width:26ch}
.statement .mute{color:var(--muted)}
.statement .w{display:inline-block}
.about-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;margin-top:2.5rem}
.find{color:var(--muted);font-size:.9375rem}
.find-list{display:flex;gap:1.25rem}
.find-list a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-underline-offset:.22em}
.about-foot .btn{margin-top:.5rem}
@media(min-width:1024px){
  .about-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
  .about-grid>.lead{grid-column:1/4;font-size:1.375rem;padding-top:.6rem}
  .about-main{grid-column:4/10}
  .statement{max-width:none}
}

.frame picture{width:100%;height:100%}

/* services */
.svc-body{display:block}
.row{position:relative;display:block;padding:1.75rem 0;border-top:1px solid var(--hair);text-decoration:none;transition:background-color .3s}
.rows li:last-child .row{border-bottom:1px solid var(--hair)}
.row h3{font:400 clamp(1.75rem,3vw,2.5rem)/1.1 var(--serif);margin-bottom:.5rem}
.row p{color:var(--muted);max-width:34rem}
.row-price{display:block;margin-top:.9rem;font:400 1.5rem/1.2 var(--serif);white-space:nowrap}
.row-pic{display:block;width:100%;margin-bottom:1.1rem;overflow:hidden;background:#dcdcda}
.row-pic img{width:100%;height:100%;object-fit:cover}
.r1{aspect-ratio:4/3}.r2{aspect-ratio:1/1}.r3{aspect-ratio:16/9}
.row.quiet h3{font-size:1.75rem}
.row.quiet .row-price{font-size:1.25rem;color:var(--muted)}
.frame{display:none}
@media(min-width:1024px){
  .svc-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
  .rows{grid-column:1/8}
  .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:start;padding:2rem 0}
  .row:hover,.row:focus-visible{background:var(--hover);box-shadow:-.9rem 0 0 var(--hover),.9rem 0 0 var(--hover)}
  .row-price{margin-top:.55rem}
  .row-pic{display:none}
  .frame{display:block;grid-column:9/13;position:sticky;top:96px;align-self:start;aspect-ratio:4/5;overflow:hidden;background:#dcdcda;margin-right:calc(var(--m) * -1)}
  .fr{position:absolute;inset:0;clip-path:inset(0 100% 0 0);transition:clip-path .7s cubic-bezier(.87,0,.13,1)}
  .fr img{width:100%;height:100%;object-fit:cover}
  .fr.is-on{clip-path:inset(0);z-index:2}
  .fr.is-prev{clip-path:inset(0);z-index:1;transition:none}
}

/* service explainers: the scenes themselves live in css/explainers.css (loaded by index.html); only the homepage placement is here */
.row-pic.has-xp{aspect-ratio:4/5;position:relative;background:#0b0d12}
@media(prefers-reduced-motion:no-preference){
  .fr:not(.is-on) .xp *,.fr:not(.is-on) .xp .xnode::before,.fr:not(.is-on) .xp .xnode::after{animation-name:none!important}
}

/* hero countdown: five facts, each numeral cut out of a Dubai photograph. One shows at a time; without motion the first stays. */
.count{position:relative;container-type:inline-size;aspect-ratio:1/1;overflow:hidden}
.cn{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;opacity:0}
.cn1{opacity:1}
.cn-num{margin:0 0 3cqw -1.5cqw;font:400 92cqw/.78 var(--serif);letter-spacing:-.05em;color:var(--ink);background-color:var(--ink);background-size:cover;background-position:50% 40%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cn1 .cn-num{background-image:url(/assets/home/band-skyline-1600.jpg);background-image:image-set(url(/assets/home/band-skyline-1600.avif) type("image/avif"),url(/assets/home/band-skyline-1600.jpg) type("image/jpeg"));font-size:74cqw}
:is(html:not(.js),html.cn-ready) .cn2 .cn-num{background-image:url(/assets/home/hero-downtown-800.jpg);background-image:image-set(url(/assets/home/hero-downtown-800.avif) type("image/avif"),url(/assets/home/hero-downtown-800.jpg) type("image/jpeg"))}
:is(html:not(.js),html.cn-ready) .cn3 .cn-num{background-image:url(/assets/home/band-highway-1600.jpg);background-image:image-set(url(/assets/home/band-highway-1600.avif) type("image/avif"),url(/assets/home/band-highway-1600.jpg) type("image/jpeg"))}
:is(html:not(.js),html.cn-ready) .cn4 .cn-num{background-image:url(/assets/home/hero-museum-1200.jpg);background-image:image-set(url(/assets/home/hero-museum-1200.avif) type("image/avif"),url(/assets/home/hero-museum-1200.jpg) type("image/jpeg"))}
:is(html:not(.js),html.cn-ready) .cn5 .cn-num{background-image:url(/assets/home/footer-water-1200.jpg);background-image:image-set(url(/assets/home/footer-water-1200.avif) type("image/avif"),url(/assets/home/footer-water-1200.jpg) type("image/jpeg"))}
.cn-cap{margin:0;max-width:86%;font:400 clamp(1.25rem,6.4cqw,2.1rem)/1.15 var(--serif);border-top:1px solid var(--hair);padding-top:3cqw}
/* the countdown stops while it is off screen (js/home.js adds .off); html.motion-paused already stops it through css/base.css */
.count.off .cn,.count.off .cn-num{animation-play-state:paused}
/* print and forced colours: the numerals are normally cut out of photographs, so give them a plain ink fill there */
@media print,(forced-colors:active){
  .cn-num{background:none;-webkit-text-fill-color:currentColor;color:CanvasText}
}
.about-base{margin-top:1.75rem;color:var(--muted);max-width:34rem}
@media(min-width:1024px){
  .count{grid-column:8/13;aspect-ratio:1/1;margin-top:.5rem}
  .cn-num{font-size:86cqw}.cn1 .cn-num{font-size:70cqw}
  .cn-cap{font-size:clamp(1.25rem,5.4cqw,1.85rem)}
}
@media(prefers-reduced-motion:no-preference){
  html.pre .count{opacity:0;animation:unhide 1ms 3.2s forwards}
  .cn{animation:cnCycle 17.5s var(--ease) infinite both}
  .cn2{animation-delay:3.5s}.cn3{animation-delay:7s}.cn4{animation-delay:10.5s}.cn5{animation-delay:14s}
  .cn-num{animation:cnPan 9s ease-in-out infinite alternate}
}
@keyframes cnCycle{0%{opacity:0;transform:translateY(5cqw)}4%,19%{opacity:1;transform:none}23%,100%{opacity:0;transform:translateY(-4cqw)}}
@keyframes cnPan{from{background-position:50% 25%}to{background-position:50% 75%}}


/* hero on the live site's photograph (Adel, 2026-11-14: "the first thing you see should be the same as the current website, with the countdown").
   Full-height Dubai photo with a white wash, a quiet wordmark, text bottom-left, the countdown on a frosted card bottom-right. */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:6.5rem;background:#c9ccd0;border-radius:0 0 28px 28px}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-par{position:absolute;inset:-2% 0 -14% 0;will-change:transform}
.hero-par picture,.hero-par img{display:block;width:100%;height:100%}
.hero-par img{object-fit:cover;object-position:42% 38%;transform:scale(1.08);transition:transform 2.4s cubic-bezier(.22,1,.36,1)}
html:not(.pre) .hero-par img{transform:scale(1)}
.hero-wash{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(250,250,250,.45),rgba(250,250,250,.15) 14%,rgba(250,250,250,.62) 42%,rgba(250,250,250,.92) 100%)}
.hero .count{background:rgba(250,250,250,.84);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:22px 26px 24px;box-shadow:0 20px 50px rgba(20,20,20,.08)}
.hero .cn{inset:22px 26px 24px;justify-content:center}
.hero-bar{position:relative;z-index:2}
@media(min-width:1024px){
  .hero-wash{background:linear-gradient(to bottom,rgba(250,250,250,.5),rgba(250,250,250,0) 30%,rgba(250,250,250,0) 45%,rgba(250,250,250,.84) 100%),linear-gradient(to right,rgba(250,250,250,.78),rgba(250,250,250,.38) 42%,rgba(250,250,250,0) 70%)}
  .hero-grid{align-items:end}
  .hero-grid{align-items:center}
  .hero .count{grid-column:10/13;align-self:center;margin:0 0 6rem;aspect-ratio:auto;height:min(36svh,320px)}
  .hero .cn-num{font-size:min(100cqw,31svh)}.hero .cn1 .cn-num{font-size:min(86cqw,28svh)}
  .hero .cn-cap{font-size:clamp(1.1rem,6cqw,1.5rem)}
}

/* work */
.cards{display:grid;gap:3rem}
.card{position:relative}
.shot{position:relative;overflow:hidden;background:#e4e4e2}
.shot picture,.shot img,.card-vid{width:100%;height:100%}
.shot img,.card-vid{object-fit:cover}
.shot img,.card-vid{transition:transform .7s ease-out}
.card:hover .shot img,.card:focus-within .shot img{transform:scale(1.04)}
/* every demo shot keeps its own 16:10 shape, so no screenshot is cropped mid-word */
.shot{aspect-ratio:16/10}.c1 .shot{aspect-ratio:16/9}
.card-vid{position:absolute;inset:0;opacity:0;transition:opacity .4s,transform .7s ease-out}
.card-vid.on{opacity:1}
/* the NovaPlex recording keeps its site header in view when the card crops it */
.c1 .card-vid,.c1 .poster img{object-position:50% 0}
/* the Client or Demo label sits above the title, so it never covers the screenshot */
.kind{display:inline-block;margin:0 0 .6rem;padding:.2rem .6rem;border:1px solid var(--ink);color:var(--ink);font:500 .8125rem/1.4 var(--sans)}
.card-body .kind{color:var(--ink);max-width:none}
.vid-toggle{position:absolute;right:.75rem;bottom:.75rem;z-index:4;width:44px;height:44px;display:grid;place-items:center;background:var(--ink);color:var(--base);border:0;border-radius:50%;cursor:pointer}
.vid-toggle svg{width:20px;height:20px;fill:currentColor}
.vid-toggle .i-pause{display:none}
.vid-toggle.is-playing .i-pause{display:block}
.vid-toggle.is-playing .i-play{display:none}
.vid-toggle:focus-visible{outline-color:var(--link-light);outline-offset:3px}
.card-body{padding-top:1rem}
.card-body h3{font:400 clamp(1.75rem,2.2vw,1.75rem)/1.15 var(--serif);margin-bottom:.35rem}
.card-body p{color:var(--muted);max-width:32rem}
.card-body .tags{margin-top:.5rem;font-size:.875rem}
.stretch{text-decoration:none}
.stretch::after{content:"";position:absolute;inset:0;z-index:3}
.stretch:focus-visible{outline:none}
.stretch:focus-visible::after{outline:2px solid var(--link);outline-offset:4px}
.work-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:clamp(3rem,6vw,6rem);padding-top:2rem;border-top:1px solid var(--hair);font:400 clamp(1.5rem,2.6vw,2.5rem)/1.2 var(--serif)}
.work-note .btn{font-family:var(--sans)}
@media(min-width:1024px){
  /* one featured client across the top, then three demos on one line: same size, same baseline */
  .cards{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gut);row-gap:4.5rem}
  .c1{grid-column:1/-1}
  .c1 .shot{aspect-ratio:2/1}
  .c1 .card-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gut);align-items:baseline}
  .c1 .card-body .kind{grid-column:1/-1;justify-self:start}
  .c1 .card-body h3{margin:0}
  .c1 .card-body .tags{margin:0;text-align:right}
}

/* facts */
.facts{position:relative;overflow:hidden;background:var(--ink);color:var(--base);padding-block:clamp(4.5rem,10vw,10rem)}
.facts::before{content:"";position:absolute;inset:0;background:url(/assets/home/texture-plaster-1200.jpg) center/cover;opacity:.2;pointer-events:none}
.facts::before{background-image:image-set(url(/assets/home/texture-plaster-1200.avif) type("image/avif"),url(/assets/home/texture-plaster-1200.jpg) type("image/jpeg"))}
.facts .shell{position:relative}
html.js .facts:not(.tex)::before{background-image:none}
.facts .lead{color:var(--base)}
.fact{display:grid;gap:.75rem 3rem;padding:1.25rem 0 2.25rem;border-top:1px solid var(--hair-dark)}
.v{font:400 3.5rem/.95 var(--serif);letter-spacing:-.02em;font-variant-numeric:lining-nums}
.f1 .v{font-size:3.5rem}.f2 .v{font-size:4rem}.f3 .v{font-size:4.5rem}.f4 .v{font-size:4.75rem}
.fact .l{font-weight:500;font-size:1.0625rem}
.fact .s{margin-top:.25rem;color:var(--muted-dark);font-size:.9375rem;max-width:30rem}
.fact .s a{color:var(--link-light);text-decoration:underline;text-underline-offset:.22em}
.f2{margin-left:12px}.f3{margin-left:24px}.f4{margin-left:36px}
@media(min-width:1024px){
  .fact{grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:end;padding-bottom:2.5rem}
  .f1 .v{font-size:clamp(3rem,3.9vw,3.5rem)}.f2 .v{font-size:clamp(3.5rem,6.1vw,5.5rem)}.f3 .v{font-size:clamp(4rem,8.3vw,7.5rem)}.f4 .v{font-size:clamp(4.5rem,11vw,10rem)}
  .f1{margin-left:0}.f2{margin-left:9%}.f3{margin-left:18%}.f4{margin-left:27%}
}


/* entrance and reveal start states: only with motion allowed, only with JS, each with a CSS failsafe */
@keyframes unhide{to{opacity:1;transform:none}}
@keyframes unclip{to{clip-path:inset(0)}}
@keyframes unzoom{to{transform:none}}
@media(prefers-reduced-motion:no-preference){
  html.pre .hl .ln>span,html.pre .hero-rise{animation:unhide 1ms 3.2s forwards}
  html.pre .hl .ln>span{transform:translateY(112%)}
  html.pre .hero-rise{transform:translateY(20px)}
  html.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0) * 1ms);animation:unhide 1ms 4s forwards}
  html.js .rv.in{opacity:1;transform:none;animation:none}
  html.js .fact.rv{transform:translateY(40px)}
  html.js .statement .w{opacity:0;transform:translateY(.45em);transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 28ms)}
  html.js .statement.in .w{opacity:1;transform:none}
  html.js .curtain{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.87,0,.13,1);transition-delay:calc(var(--ci,0) * 85ms + 200ms);animation:unclip 1ms 4s forwards}
  html.js .curtain img,html.js .curtain .fr img{transform:scale(1.22);transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity .4s;transition-delay:calc(var(--ci,0) * 85ms + 200ms);animation:unzoom 1ms 4s forwards}
  html.js .curtain.in{clip-path:inset(0);animation:none}
  html.js .curtain.in img{transform:none;animation:none;transition:transform .7s ease-out;transition-delay:0s}
  .card:hover .curtain.in img,.card:focus-within .curtain.in img{transform:scale(1.04)}
}
@media(prefers-reduced-motion:reduce){
  .card:hover .shot img,.card:focus-within .shot img{transform:none}
}