/* ============================================================
   HUAWEI — HiRE 5 · Recruitment Expo  ·  case world
   Concept "The shortest path": the network → the individual.
   Roc Grotesk → Space Grotesk × IBM Plex Mono. Violet on near-black indigo.
   ============================================================ */

:root{
  --ground:#0B0817;
  --ground-2:#120D26;
  --ground-3:#0E0A1E;
  --bone:#ECE8F5;
  --muted:#9A93B4;
  --violet:#8A47D6;
  --violet-2:#A968F0;
  --violet-deep:#30186C;
  --line:#6C30A8;
  --signal:#42E8FF;
  --huawei:#C7000B;
  --f-disp:'Space Grotesk',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --f-ar:'Tajawal',system-ui,sans-serif;
  --pad:clamp(20px,5.5vw,96px);
  --maxw:1280px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html,body{margin:0;max-width:100%;background:var(--ground);color:var(--bone)}

/* ambient environment — a living branded atmosphere behind everything (not flat black) */
.hua-atmos{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 45% at 15% 8%,rgba(138,71,214,.16),transparent 60%),
    radial-gradient(55% 40% at 88% 32%,rgba(66,232,255,.09),transparent 62%),
    radial-gradient(70% 55% at 50% 108%,rgba(48,24,108,.34),transparent 60%)}
.hua-nav,.hua-hero2,main>section{position:relative;z-index:1}
body.huawei{
  font-family:var(--f-body);       /* Inter ≈ HuaweiSans (the Huawei/ICT corporate voice) */
  line-height:1.5;
  overflow-x:clip;                 /* sticky-safe (NOT hidden) */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* DISPLAY = Space Grotesk (echoes Roc Grotesk, the HiRE master-visual voice) */
.hua-hero__title,.hua-beat__n,.hua-beat__w,.hua-beat__turn,.hua-block__lead,.hua-id__lead,
.hua-act__lead,.hua-net__lead,.hua-day__lead,.hua-day__bandtxt p,.hua-close__line,.hua-next b,
.hua-stat b,.hua-type__aa,.hua-given__lead,.hua-names__lead,.hua-mockups__lead,.hua-quote p,
.brand__logo{font-family:var(--f-disp)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--violet);color:#fff}

/* grain */
.hua-grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* cursor */
.hua-cursor{position:fixed;left:0;top:0;z-index:60;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--violet-2) 70%,transparent);pointer-events:none;mix-blend-mode:screen;
  display:none;transition:width .25s,height .25s,margin .25s,background .25s,border-color .25s}
body.has-cursor .hua-cursor{display:block}
.hua-cursor i{position:absolute;inset:0;margin:auto;width:3px;height:3px;border-radius:50%;background:var(--violet-2)}
.hua-cursor.is-hot{width:58px;height:58px;margin:-29px 0 0 -29px;background:color-mix(in srgb,var(--violet) 14%,transparent);border-color:var(--violet-2)}
.hua-cursor.has-label::after{content:attr(data-label);position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--violet-2)}

/* progress + nav */
.hua-prog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:55;background:transparent}
.hua-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--signal))}
.hua-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad);transition:transform .45s ease,opacity .45s ease;
  background:linear-gradient(180deg,rgba(11,8,23,.82),rgba(11,8,23,0))}
.hua-nav.is-hidden{transform:translateY(-110%);opacity:0}
.hua-nav__back{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--bone)}
.hua-nav__back svg{width:17px;height:17px;opacity:.8;transition:transform .3s}
.hua-nav__back:hover svg{transform:translateX(-4px)}
.hua-nav__id{display:flex;align-items:center;gap:11px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.hua-nav__id b{color:var(--bone);font-weight:500}
.hua-nav__id svg{width:30px;height:16px;flex:none}
.hua-nav__back{min-width:0}
@media(max-width:560px){
  .hua-nav{padding:14px 18px;gap:12px}
  .hua-nav__id{font-size:9px;gap:7px;letter-spacing:.1em;min-width:0}
  .hua-nav__id svg{width:24px}
  .hua-nav__back{font-size:10px}
}

/* shared kit */
.hua-k{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--violet-2);display:flex;align-items:center;gap:10px;margin:0 0 18px}
.hua-k i{width:22px;height:1px;background:var(--violet);display:inline-block;opacity:.7}
.hua-k--signal{color:var(--signal)}.hua-k--signal i{background:var(--signal)}
section{position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* reveals */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
[data-split]{opacity:1}
[data-split] .w{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .7s,transform .7s}
[data-split].in .w{opacity:1;transform:none}

/* ============ HERO ============ */
.hua-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px var(--pad) 90px;overflow:hidden}
.hua-hero__kv{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.34;
  -webkit-mask-image:radial-gradient(120% 90% at 60% 40%,#000 18%,transparent 78%);mask-image:radial-gradient(120% 90% at 60% 40%,#000 18%,transparent 78%)}
.hua-hero__veil{position:absolute;inset:0;z-index:1;background:
  radial-gradient(120% 80% at 70% 30%,rgba(138,71,214,.18),transparent 60%),
  linear-gradient(180deg,rgba(11,8,23,.4),rgba(11,8,23,.86) 70%,var(--ground))}
.hua-hero__circuit{position:absolute;inset:0;z-index:1;width:100%;height:100%}
.hua-hero__inner{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;width:100%}
.hua-eyebrow{font-family:var(--f-mono);font-size:clamp(10px,1.4vw,12.5px);letter-spacing:.24em;text-transform:uppercase;color:var(--violet-2);margin:0 0 26px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hua-eyebrow b{color:var(--bone);font-weight:500}
.hua-eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal)}
.hua-hero__title{font-size:clamp(2.7rem,8.4vw,7.3rem);line-height:.96;font-weight:600;letter-spacing:-.03em;margin:0;text-wrap:balance}
.hua-hero__title em{font-style:normal;color:var(--violet-2);position:relative}
.hua-hero__title .pth{color:transparent;-webkit-text-stroke:1.3px var(--violet-2);text-stroke:1.3px var(--violet-2)}
.hua-hero__ar{font-family:var(--f-ar);direction:rtl;font-size:clamp(1rem,2.6vw,1.5rem);color:var(--muted);margin:20px 0 0;font-weight:500;opacity:.92}
.hua-hero__sub{max-width:48ch;margin:30px 0 0;font-size:clamp(1rem,1.7vw,1.24rem);color:#C9C2DE;line-height:1.62}
.hua-rolechip{display:inline-flex;align-items:center;gap:10px;margin:28px 0 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);border:1px solid color-mix(in srgb,var(--violet-2) 50%,transparent);border-radius:999px;padding:9px 18px}
.hua-rolechip span{color:var(--violet-2)}
.hua-hero__cue{position:absolute;left:var(--pad);bottom:30px;z-index:3;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:9px}
.hua-hero__cue i{width:1px;height:26px;background:linear-gradient(var(--violet),transparent);display:inline-block;animation:cuepulse 1.8s infinite}
@keyframes cuepulse{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

/* ============ SCALE / CLIENT (sticky beat rack) ============ */
.hua-scale{height:430vh;position:relative}
.hua-scale__stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);overflow:hidden}
.hua-scale__bg{position:absolute;inset:0;z-index:0;background:
  linear-gradient(rgba(11,8,23,.84),rgba(11,8,23,.93)),
  radial-gradient(80% 60% at 50% 45%,rgba(138,71,214,.34),transparent 68%),
  url('assets/img/offart/hall-empty.webp') center/cover no-repeat}
.hua-scale__k{position:relative;z-index:2;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 auto 40px;max-width:var(--maxw);width:100%}
.hua-scale__beats{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;min-height:34vh}
.hua-beat{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(28px);transition:opacity .6s,transform .6s;pointer-events:none}
.hua-beat.is-on{opacity:1;transform:none;pointer-events:auto}
.hua-beat__n{font-size:clamp(3.4rem,13vw,10rem);line-height:.9;font-weight:600;letter-spacing:-.04em;color:var(--bone)}
.hua-beat__n em{font-style:normal;color:var(--violet-2)}
.hua-beat__ed{display:block;font-family:var(--f-mono);font-size:clamp(.72rem,1.5vw,1rem);letter-spacing:.16em;text-transform:uppercase;color:var(--violet-2);margin-top:10px;font-weight:400}
.hua-beat__w{font-size:clamp(2rem,6vw,4.2rem);line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--bone)}
.hua-beat span{display:block;margin-top:22px;max-width:40ch;font-size:clamp(1rem,1.7vw,1.2rem);color:#C4BDD8;line-height:1.6}
.hua-beat--turn .hua-beat__turn{font-size:clamp(1.9rem,5.4vw,3.7rem);line-height:1.04;font-weight:600;letter-spacing:-.02em;color:var(--bone);max-width:18ch}
.hua-beat--turn em{font-style:normal;color:var(--signal)}
.hua-scale__rail{position:relative;z-index:2;max-width:var(--maxw);margin:48px auto 0;width:100%;display:flex;gap:10px}
.hua-scale__rail i{flex:1;height:2px;background:color-mix(in srgb,var(--bone) 14%,transparent);position:relative;overflow:hidden}
.hua-scale__rail i::after{content:"";position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--violet),var(--signal));transition:width .5s}
.hua-scale__rail i.is-on::after{width:100%}

/* ============ SPINE / strategy ============ */
.hua-spine{padding:clamp(90px,14vh,180px) 0;background:var(--ground-2)}
.hua-spine .wrap{display:grid;gap:clamp(56px,9vw,120px)}
.hua-block__lead{font-size:clamp(1.7rem,4.3vw,3.2rem);line-height:1.08;font-weight:600;letter-spacing:-.02em;margin:0 0 22px;text-wrap:balance}
.hua-block__lead em{font-style:normal;color:var(--violet-2)}
.hua-block__body{max-width:60ch;font-size:clamp(1rem,1.5vw,1.15rem);color:#C4BDD8;line-height:1.7;margin:0}
.hua-srows{display:grid;gap:2px;margin-top:34px;border-top:1px solid color-mix(in srgb,var(--bone) 12%,transparent)}
.hua-srow{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid color-mix(in srgb,var(--bone) 12%,transparent);align-items:start}
.hua-srow__n{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--violet-2);padding-top:5px}
.hua-srow p{margin:0;font-size:clamp(1.02rem,1.7vw,1.28rem);line-height:1.55;color:var(--bone)}
.hua-srow em{font-style:normal;color:var(--violet-2)}

/* ============ CONCEPT — circuit-H build ============ */
.hua-concept{padding:clamp(96px,16vh,200px) 0;overflow:hidden}
.hua-concept .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:center}
.hua-concept__line{font-size:clamp(1.9rem,4.6vw,3.5rem);line-height:1.06;font-weight:600;letter-spacing:-.025em;margin:0 0 24px;text-wrap:balance}
.hua-concept__line em{font-style:normal;color:var(--violet-2)}
.hua-concept__body{max-width:46ch;font-size:clamp(1rem,1.5vw,1.16rem);color:#C4BDD8;line-height:1.7;margin:0 0 16px}
.hua-concept__body b{color:var(--bone);font-weight:600}
.hua-concept__fig{margin:0;position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  border:1px solid color-mix(in srgb,var(--violet) 28%,transparent);border-radius:14px;background:
  radial-gradient(70% 70% at 50% 45%,rgba(138,71,214,.16),transparent 70%),var(--ground-3)}
.hua-concept__svg{width:78%;height:auto;overflow:visible}
.hua-concept__svg .trace{fill:none;stroke:var(--line);stroke-width:2.4;stroke-linecap:round;opacity:.5}
.hua-concept__svg .glyph{fill:none;stroke:var(--violet-2);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s ease}
.hua-concept__fig.in .glyph{stroke-dashoffset:0}
.hua-concept__svg .node{fill:var(--signal);opacity:0;transition:opacity .5s}
.hua-concept__fig.in .node{opacity:1}
.hua-concept__svg .node.n1{transition-delay:.9s}.hua-concept__svg .node.n2{transition-delay:1.15s}.hua-concept__svg .node.n3{transition-delay:1.4s}
.hua-concept__cap{position:absolute;left:18px;bottom:14px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ============ IDENTITY system ============ */
.hua-id{padding:clamp(90px,14vh,180px) 0;background:var(--ground-2)}
.hua-id__head{max-width:var(--maxw);margin:0 auto 60px}
.hua-id__lead{font-size:clamp(1.8rem,4.4vw,3.2rem);line-height:1.07;font-weight:600;letter-spacing:-.025em;margin:0;text-wrap:balance}
.hua-id__lead em{font-style:normal;color:var(--violet-2)}
.hua-id__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.hua-card{border:1px solid color-mix(in srgb,var(--bone) 11%,transparent);border-radius:14px;background:var(--ground-3);overflow:hidden;position:relative}
.hua-card__tag{position:absolute;left:16px;top:14px;z-index:3;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.hua-card--mark{grid-column:span 5;aspect-ratio:5/3.4;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(80% 80% at 50% 40%,rgba(138,71,214,.14),transparent 70%),var(--ground-3)}
.hua-card--mark img{width:62%}
.hua-card--motion{grid-column:span 7;aspect-ratio:auto;display:flex}
.hua-card--motion video{width:100%;height:100%;object-fit:cover}
.hua-card--kv{grid-column:span 7;overflow:hidden}
.hua-card--kv img{width:100%;height:100%;object-fit:cover}
.hua-card--type{grid-column:span 5;padding:30px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.hua-card--palette{grid-column:span 12}
.hua-type__aa{font-family:var(--f-disp);font-weight:600;font-size:clamp(4rem,11vw,7rem);line-height:.9;letter-spacing:-.03em;color:var(--bone)}
.hua-type__meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--muted);line-height:1.7}
.hua-type__meta b{color:var(--violet-2);font-weight:500}
.hua-pal{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-radius:12px;overflow:hidden}
.hua-sw{aspect-ratio:2/1.3;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;position:relative}
.hua-sw b{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;font-weight:500}
.hua-sw i{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;opacity:.7;font-style:normal}
@media(max-width:840px){
  .hua-card--mark,.hua-card--motion,.hua-card--kv,.hua-card--type{grid-column:span 12}
  .hua-card--mark{aspect-ratio:5/3}
  .hua-pal{grid-template-columns:repeat(2,1fr)}
}

/* ============ ACTIVATION mosaic ============ */
.hua-act{padding:clamp(90px,14vh,180px) 0}
.hua-act__head{max-width:var(--maxw);margin:0 auto 56px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end}
.hua-act__lead{font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.05;font-weight:600;letter-spacing:-.025em;margin:0;text-wrap:balance}
.hua-act__lead em{font-style:normal;color:var(--violet-2)}
.hua-act__note{font-size:1.02rem;color:#C4BDD8;line-height:1.65;margin:0}
.hua-mos{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:9vw;gap:14px}
.hua-tile{position:relative;overflow:hidden;border-radius:12px;background:var(--ground-3)}
.hua-tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.hua-tile:hover img{transform:scale(1.05)}
.hua-tile figcaption{position:absolute;left:14px;bottom:11px;z-index:2;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.hua-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,8,23,.55));opacity:0;transition:opacity .4s}
.hua-tile.cap::after{opacity:1}
/* φ-ish placements */
.t-a{grid-column:span 7;grid-row:span 4}
.t-b{grid-column:span 5;grid-row:span 4}
.t-c{grid-column:span 4;grid-row:span 3}
.t-d{grid-column:span 4;grid-row:span 3}
.t-e{grid-column:span 4;grid-row:span 3}
.t-f{grid-column:span 5;grid-row:span 3}
.t-g{grid-column:span 7;grid-row:span 3}
.hua-syslist{max-width:var(--maxw);margin:48px auto 0;display:flex;flex-wrap:wrap;gap:10px}
.hua-syslist span{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  border:1px solid color-mix(in srgb,var(--bone) 14%,transparent);border-radius:999px;padding:8px 15px}
.hua-syslist span b{color:var(--violet-2);font-weight:500}
@media(max-width:840px){
  .hua-mos{grid-auto-rows:30vw;gap:10px}
  .t-a,.t-g{grid-column:span 12;grid-row:span 1}
  .t-b,.t-c,.t-d,.t-e,.t-f{grid-column:span 6;grid-row:span 1}
  .hua-act__head{grid-template-columns:1fr}
}

/* ============ NETWORK ============ */
.hua-net{padding:clamp(40px,6vh,70px) 0 clamp(72px,11vh,140px);background:var(--ground-2);overflow:hidden}
.hua-net__head{max-width:var(--maxw);margin:0 auto 24px;text-align:center}
.hua-net__lead{font-size:clamp(1.9rem,5vw,3.6rem);line-height:1.04;font-weight:600;letter-spacing:-.025em;margin:0 auto;max-width:18ch;text-wrap:balance}
.hua-net__lead em{font-style:normal;color:var(--violet-2)}
.hua-net__note{max-width:54ch;margin:18px auto 0;color:#C4BDD8;line-height:1.6;font-size:1.02rem}
.hua-cobrand{display:flex;align-items:center;justify-content:center;gap:clamp(22px,5vw,60px);margin:46px auto 54px;flex-wrap:wrap}
.hua-cobrand img{height:clamp(26px,4vw,40px);width:auto;filter:brightness(0) invert(1);opacity:.92}
.hua-cobrand .plus{font-family:var(--f-mono);color:var(--violet-2);font-size:18px}
.hua-cobrand--huawei img{filter:none;height:clamp(30px,4.6vw,46px)}
.hua-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.hua-chip{aspect-ratio:1.6/1;background:#fff;border-radius:11px;display:flex;align-items:center;justify-content:center;padding:14px;
  opacity:0;transform:translateY(16px) scale(.96);transition:opacity .6s,transform .6s}
.hua-chip.in{opacity:1;transform:none}
.hua-chip img{max-width:100%;max-height:100%;object-fit:contain}
.hua-net__count{max-width:var(--maxw);margin:40px auto 0;padding:0 var(--pad);text-align:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hua-net__count b{color:var(--violet-2)}
@media(max-width:1024px){.hua-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:640px){.hua-grid{grid-template-columns:repeat(3,1fr);gap:9px}}

/* ============ THE DAY — numbers + human ============ */
.hua-day{padding:clamp(90px,14vh,180px) 0}
.hua-day__head{max-width:var(--maxw);margin:0 auto 56px}
.hua-day__lead{font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.05;font-weight:600;letter-spacing:-.025em;margin:0;text-wrap:balance}
.hua-day__lead em{font-style:normal;color:var(--violet-2)}
.hua-stats{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hua-stat{border:1px solid color-mix(in srgb,var(--bone) 11%,transparent);border-radius:14px;padding:30px 26px;background:var(--ground-3)}
.hua-stat b{display:block;font-size:clamp(2.6rem,6vw,4.4rem);line-height:.92;font-weight:600;letter-spacing:-.04em;color:var(--bone)}
.hua-stat b em{font-style:normal;color:var(--violet-2);font-size:.6em}
.hua-stat b.hua-stat--enar{font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.01em}
.hua-stat--enar em{font-size:1em;color:var(--violet-2);font-style:normal;padding:0 .14em}
.hua-stat span{display:block;margin-top:16px;font-size:.96rem;color:#B7AFCE;line-height:1.5}
.hua-stat span i{font-style:normal;color:var(--violet-2);font-family:var(--f-mono);font-size:.8em;letter-spacing:.04em}
.hua-day__band{margin:clamp(34px,6vw,72px) 0 0;position:relative;height:clamp(280px,52vw,640px);overflow:hidden;border-radius:16px}
.hua-day__band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hua-day__band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,8,23,.86),rgba(11,8,23,.2) 55%,transparent)}
.hua-day__bandtxt{position:absolute;z-index:2;left:clamp(24px,5vw,64px);bottom:clamp(26px,5vw,56px);right:clamp(24px,5vw,64px);max-width:30ch}
.hua-day__bandtxt p{font-size:clamp(1.4rem,3.4vw,2.6rem);line-height:1.12;font-weight:600;letter-spacing:-.02em;margin:0;text-wrap:balance}
.hua-day__bandtxt em{font-style:normal;color:var(--signal)}
@media(max-width:840px){.hua-stats{grid-template-columns:repeat(2,1fr)}}

/* ============ CLOSE ============ */
.hua-close{padding:clamp(96px,16vh,200px) var(--pad) clamp(60px,9vh,120px);position:relative;overflow:hidden;text-align:center}
.hua-close__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.18}
.hua-close__veil{position:absolute;inset:0;z-index:1;background:radial-gradient(80% 70% at 50% 30%,rgba(138,71,214,.2),transparent 60%),linear-gradient(180deg,var(--ground),rgba(11,8,23,.7))}
.hua-close__in{position:relative;z-index:2;max-width:1000px;margin:0 auto}
.hua-close__line{font-size:clamp(2rem,5.6vw,4rem);line-height:1.06;font-weight:600;letter-spacing:-.03em;margin:0 auto;max-width:20ch;text-wrap:balance}
.hua-close__line em{font-style:normal;color:var(--violet-2)}
.hua-quote{margin:clamp(40px,7vw,76px) auto 0;max-width:30ch}
.hua-quote p{font-size:clamp(1.2rem,2.6vw,1.7rem);line-height:1.4;font-weight:500;color:var(--bone);margin:0}
.hua-quote cite{display:block;margin-top:18px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-style:normal}
.hua-cobrand2{display:flex;align-items:center;justify-content:center;gap:30px;margin:clamp(40px,7vw,72px) auto 0;flex-wrap:wrap}
.hua-cobrand2 img{height:34px;width:auto}
.hua-cobrand2 .hw{height:40px}
.hua-cobrand2 .itb{filter:brightness(0) invert(1);opacity:.9;height:28px}
.hua-credits{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:var(--maxw);margin:clamp(48px,8vw,90px) auto 0;text-align:left;border-top:1px solid color-mix(in srgb,var(--bone) 12%,transparent);padding-top:36px}
.hua-credits dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.hua-credits dd{margin:0;font-size:.98rem;color:var(--bone);line-height:1.5}
.hua-close__nav{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:var(--maxw);margin:clamp(40px,7vw,72px) auto 0;flex-wrap:wrap}
.hua-next{display:flex;flex-direction:column;gap:5px;text-align:left}
.hua-next span{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hua-next b{font-size:clamp(1.6rem,3.6vw,2.4rem);font-weight:600;letter-spacing:-.02em;color:var(--bone);transition:color .3s}
.hua-next:hover b{color:var(--violet-2)}
.hua-allwork{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet-2)}
.hua-legal{display:flex;justify-content:space-between;gap:14px;max-width:var(--maxw);margin:60px auto 0;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
@media(max-width:840px){.hua-credits{grid-template-columns:repeat(2,1fr)}}

@media(max-width:840px){
  .hua-concept .wrap{grid-template-columns:1fr;gap:48px}
  /* weight = the SAME scroll-to-experience sticky rack as desktop, just compact (one screen tall, shorter scroll) */
  .hua-scale{height:300vh}
  .hua-scale__k{margin-bottom:24px}
  .hua-beat{justify-content:center}
  .hua-beat span{margin-top:16px;font-size:1rem}
  .hua-beat__w{font-size:clamp(2.2rem,9vw,3.2rem)}
  .hua-beat__n{font-size:clamp(4rem,22vw,7rem)}
  .hua-beat--turn .hua-beat__turn{font-size:clamp(1.7rem,6.4vw,2.4rem)}
  .hua-scale__rail{margin-top:34px}
}

/* ============ GIVEN — what Huawei handed us ============ */
.hua-given{padding:clamp(90px,14vh,180px) 0;background:var(--ground-2);overflow:hidden}
.hua-given .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,6vw,84px);align-items:center}
.hua-given__lead{font-size:clamp(1.8rem,4.4vw,3.2rem);line-height:1.07;font-weight:600;letter-spacing:-.025em;margin:0 0 24px;text-wrap:balance}
.hua-given__lead em{font-style:normal;color:var(--violet-2)}
.hua-given__body{max-width:48ch;font-size:clamp(1rem,1.5vw,1.16rem);color:#C4BDD8;line-height:1.7;margin:0 0 16px}
.hua-given__body b{color:var(--bone);font-weight:600}
.hua-credit-split{display:flex;flex-wrap:wrap;gap:10px 0;margin-top:30px;border-top:1px solid color-mix(in srgb,var(--bone) 12%,transparent);padding-top:22px}
.hua-credit-split div{flex:1 1 50%;min-width:200px}
.hua-credit-split dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.hua-credit-split dd{margin:0;font-size:.98rem;color:var(--bone);font-weight:500}
.hua-credit-split dd.hw{color:var(--huawei)}
.hua-given__fig{margin:0;position:relative;border-radius:14px;overflow:hidden;border:1px solid color-mix(in srgb,var(--violet) 24%,transparent)}
.hua-given__fig img{width:100%;display:block}
.hua-given__stamp{position:absolute;left:14px;top:13px;z-index:2;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(11,8,23,.6);backdrop-filter:blur(4px);padding:6px 11px;border-radius:999px}
@media(max-width:840px){.hua-given .wrap{grid-template-columns:1fr;gap:40px}}

/* ============ NAMES — three headline names, designed (Awwwards-grade lockup) ============ */
.hua-names{padding:clamp(96px,16vh,210px) 0;text-align:center;position:relative;overflow:hidden}
.hua-names::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:46px;height:3px;background:var(--huawei);border-radius:2px}
.hua-names__lead{font-size:clamp(2rem,5.2vw,4rem);line-height:1.03;font-weight:600;letter-spacing:-.03em;margin:0 auto;max-width:17ch;text-wrap:balance}
.hua-names__lead em{font-style:normal;color:var(--violet-2)}
.hua-names__cards{max-width:var(--maxw);margin:clamp(50px,7vw,86px) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,30px)}
.hua-namecard{margin:0;text-align:left;display:flex;flex-direction:column;gap:18px}
.hua-namecard__n{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--violet-2)}
.hua-namecard__plate{aspect-ratio:16/10;background:var(--bone);border-radius:16px;display:flex;align-items:center;justify-content:center;padding:10% 12%;
  box-shadow:0 30px 70px -44px rgba(138,71,214,.55);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hua-namecard:hover .hua-namecard__plate{transform:translateY(-6px)}
.hua-namecard__plate img{max-width:100%;max-height:clamp(58px,8vw,96px);width:auto;object-fit:contain;display:block}
.hua-namecard__plate--dark{background:radial-gradient(130% 130% at 50% 24%,#2c1860,#0C0820);border:1px solid color-mix(in srgb,var(--violet) 32%,transparent)}
.hua-namecard figcaption{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;line-height:1.5;color:var(--muted);text-transform:uppercase}
.hua-namecard figcaption b{display:block;font-family:var(--f-disp);font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--bone);margin-bottom:5px}
.hua-names__powered{max-width:60ch;margin:clamp(40px,5.5vw,64px) auto 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.7}
.hua-names__vision{margin:clamp(46px,6.5vw,80px) auto 0;max-width:28ch;font-family:var(--f-disp);font-size:clamp(1.3rem,2.8vw,2rem);line-height:1.3;font-weight:500;color:var(--bone)}
.hua-names__vision cite{display:block;margin-top:18px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-style:normal;font-weight:400}
@media(max-width:780px){.hua-names__cards{grid-template-columns:1fr;max-width:440px}.hua-namecard__plate{aspect-ratio:21/9}}

/* ============ MOCKUPS — the design system WO built ============ */
.hua-mockups{padding:clamp(90px,14vh,180px) 0}
.hua-mockups__head{max-width:var(--maxw);margin:0 auto 52px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end}
.hua-mockups__lead{font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.05;font-weight:600;letter-spacing:-.025em;margin:0;text-wrap:balance}
.hua-mockups__lead em{font-style:normal;color:var(--violet-2)}
.hua-mockups__note{font-size:1.02rem;color:#C4BDD8;line-height:1.65;margin:0}
.hua-mock-grid{max-width:var(--maxw);margin:0 auto;columns:3 300px;column-gap:16px}
.hua-mock{break-inside:avoid;margin:0 0 16px;border:1px solid color-mix(in srgb,var(--bone) 12%,transparent);border-radius:12px;overflow:hidden;background:var(--ground-3);position:relative;
  opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s}
.hua-mock.in{opacity:1;transform:none}
.hua-mock img{width:100%;display:block}
.hua-mock figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 11px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(transparent,rgba(7,5,16,.82));opacity:0;transition:opacity .35s}
.hua-mock:hover figcaption{opacity:1}
.hua-mockups__syslist{max-width:var(--maxw);margin:40px auto 0;display:flex;flex-wrap:wrap;gap:10px}
.hua-mockups__syslist span{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid color-mix(in srgb,var(--bone) 14%,transparent);border-radius:999px;padding:8px 15px}
.hua-mockups__syslist span b{color:var(--violet-2);font-weight:500}
@media(max-width:840px){.hua-mockups__head{grid-template-columns:1fr}.hua-mock-grid{columns:2 160px}}

/* ============ OFF THE ARTBOARD — real-photo dazzle gallery ============
   Landscape photos shown UNCROPPED at full detail (masonry, no crop), each clickable → zoom.
   2 columns desktop / 1 column mobile; feature shots break full-width. */
.hua-real{columns:2 380px;column-gap:16px;max-width:var(--maxw);margin:0 auto}
.hua-real figure{break-inside:avoid;margin:0 0 16px;position:relative;border-radius:12px;overflow:hidden;
  background:var(--ground-3);border:1px solid color-mix(in srgb,var(--bone) 9%,transparent);cursor:zoom-in;
  opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.hua-real figure.in{opacity:1;transform:none}
.hua-real figure.feat{column-span:all;margin-bottom:16px}
.hua-real img{width:100%;height:auto;display:block;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.hua-real figure:hover img{transform:scale(1.03)}
.hua-real figure::before{content:"⤢";position:absolute;top:12px;right:12px;z-index:3;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;border-radius:50%;
  background:rgba(11,8,23,.5);backdrop-filter:blur(4px);opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s}
.hua-real figure:hover::before{opacity:1;transform:none}
.hua-real figcaption{padding:13px 16px 14px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);line-height:1.45;border-top:1px solid color-mix(in srgb,var(--bone) 8%,transparent)}
.hua-real figcaption b{color:var(--violet-2);font-weight:500}
.hua-real figure.lit{border-color:color-mix(in srgb,var(--violet) 34%,transparent)}
.hua-real figure.lit figcaption{color:var(--bone)}
@media(max-width:860px){ .hua-real{columns:1} .hua-real figure{margin-bottom:12px} }

/* ============ LIGHTBOX (real photos only — not the design mockups) ============ */
.hua-lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:rgba(6,4,14,.95);backdrop-filter:blur(8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility .35s;padding:clamp(14px,4vw,56px)}
.hua-lb.is-on{opacity:1;visibility:visible;pointer-events:auto}
.hua-lb__stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:96vw}
.hua-lb__stage img{max-width:96vw;max-height:80vh;width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 50px 130px -30px rgba(0,0,0,.9)}
.hua-lb__stage figcaption{font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--bone);text-align:center;max-width:64ch;line-height:1.5}
.hua-lb__stage figcaption b{color:var(--violet-2)}
.hua-lb__x{position:absolute;top:16px;right:18px;width:44px;height:44px;border:1px solid color-mix(in srgb,var(--bone) 28%,transparent);background:transparent;color:var(--bone);font-size:22px;line-height:1;border-radius:50%;cursor:pointer;z-index:3;transition:border-color .3s,color .3s}
.hua-lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:1px solid color-mix(in srgb,var(--bone) 22%,transparent);background:rgba(11,8,23,.45);color:var(--bone);font-size:26px;line-height:1;border-radius:50%;cursor:pointer;z-index:3;transition:border-color .3s,color .3s}
.hua-lb__prev{left:clamp(8px,2vw,28px)}.hua-lb__next{right:clamp(8px,2vw,28px)}
.hua-lb__x:hover,.hua-lb__nav:hover{border-color:var(--violet-2);color:var(--violet-2)}
.hua-lb__count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--muted)}
@media(max-width:640px){.hua-lb__nav{width:42px;height:42px;font-size:22px}.hua-lb__stage img{max-height:68vh}}

/* ============================================================
   RECONCEPTION — artboard → room. Cinematic, signature-led.
   ============================================================ */

/* ---- HERO: the master visual (artboard) becomes the room (sticky scrub) ---- */
.hua-hero2{position:relative;height:260vh}
.hua-hero2__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hua-hero2__room{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:0;will-change:opacity,transform}
.hua-hero2__roomveil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(122deg,rgba(138,71,214,.4) 0%,rgba(138,71,214,0) 48%,rgba(66,232,255,.32) 100%),linear-gradient(180deg,rgba(11,8,23,.34),transparent 38%,rgba(11,8,23,.55))}
/* the master visual, in FULL display (horizontal on web, vertical on mobile) — fades/zooms to reveal the stage */
.hua-hero2__kv{position:absolute;inset:0;z-index:2;background:url('assets/brand/kv-clean.webp') center center/cover no-repeat;will-change:transform,opacity}
.hua-hero2__scrim{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(11,8,23,.3) 0,transparent 24% 50%,rgba(11,8,23,.92))}
.hua-hero2__tag{position:absolute;right:var(--pad);bottom:30px;z-index:4;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-2);opacity:.85}
.hua-hero2__copy{position:absolute;z-index:4;left:0;right:0;bottom:8.5vh;padding:0 var(--pad);pointer-events:none}
.hua-hero2__copyin{max-width:var(--maxw);margin:0 auto}
.hua-hero2__eb{font-family:var(--f-mono);font-size:clamp(10px,1.3vw,12px);letter-spacing:.22em;text-transform:uppercase;color:var(--violet-2);margin:0 0 18px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hua-hero2__eb b{color:var(--bone);font-weight:500}
.hua-hero2__eb .dot{width:5px;height:5px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal)}
.hua-hero2__h{display:grid;font-family:var(--f-disp);font-size:clamp(2.5rem,7.6vw,6.6rem);line-height:.96;font-weight:600;letter-spacing:-.03em;margin:0}
.hua-hero2__h .l1,.hua-hero2__h .l2{grid-area:1/1}
.hua-hero2__h .l2{opacity:0;color:var(--violet-2)}
.hua-hero2__ar{font-family:var(--f-ar);direction:rtl;font-size:clamp(.95rem,2.2vw,1.35rem);color:var(--muted);margin:18px 0 0}
.hua-hero2__role{display:inline-flex;align-items:center;gap:10px;margin:24px 0 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);border:1px solid color-mix(in srgb,var(--violet-2) 50%,transparent);border-radius:999px;padding:9px 18px}
.hua-hero2__role span{color:var(--violet-2)}
.hua-hero2__cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px}
.hua-hero2__cue i{width:1px;height:30px;background:linear-gradient(var(--violet-2),transparent);animation:cuepulse 1.8s infinite}

/* ---- BRIEF ---- */
.hua-brief{padding:clamp(84px,13vh,170px) 0;background:var(--ground-2)}
.hua-brief .wrap{max-width:1000px}
.hua-brief__lead{font-size:clamp(2rem,5vw,3.7rem);line-height:1.07;font-weight:600;letter-spacing:-.025em;margin:0 0 26px;text-wrap:balance}
.hua-brief__lead em{font-style:normal;color:var(--violet-2)}
.hua-brief__body{max-width:62ch;font-size:clamp(1.05rem,1.6vw,1.24rem);color:#C4BDD8;line-height:1.72;margin:0 0 16px}
.hua-brief__body b{color:var(--bone);font-weight:600}

/* ---- SIGNATURE: "Drawn. Then built." design → reality sliders ---- */
.hua-sig{padding:clamp(96px,15vh,200px) 0;overflow:hidden}
.hua-sig__head{max-width:var(--maxw);margin:0 auto clamp(44px,6vw,80px);padding-left:var(--pad);padding-right:var(--pad)}
.hua-sig__k{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--signal);margin:0 0 18px;display:flex;align-items:center;gap:10px}
.hua-sig__k i{width:22px;height:1px;background:var(--signal)}
.hua-sig__lead{font-size:clamp(2.4rem,7vw,5.4rem);line-height:.98;font-weight:600;letter-spacing:-.035em;margin:0;text-wrap:balance}
.hua-sig__lead em{font-style:normal;color:var(--violet-2)}
.hua-sig__note{max-width:56ch;margin:22px 0 0;color:#C4BDD8;line-height:1.66;font-size:clamp(1.02rem,1.5vw,1.15rem)}
.hua-sig__note b{color:var(--bone);font-weight:600}
.hua-ba-wrap{max-width:var(--maxw);margin:0 auto;display:grid;gap:clamp(44px,6vw,96px)}
.hua-ba-cap{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 16px;flex-wrap:wrap}
.hua-ba-cap__t{font-family:var(--f-disp);font-size:clamp(1.3rem,3vw,2.1rem);font-weight:600;letter-spacing:-.015em;color:var(--bone);margin:0}
.hua-ba-cap__m{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hua-ba{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:12px;border:1px solid color-mix(in srgb,var(--bone) 12%,transparent);cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;background:var(--ground-3)}
.hua-ba__layer{position:absolute;inset:0}
.hua-ba__layer img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.hua-ba__bottom{z-index:1}
.hua-ba__top{z-index:2;clip-path:inset(0 42% 0 0)}
.hua-ba__tag{position:absolute;top:14px;z-index:4;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:6px 11px;border-radius:999px;background:rgba(11,8,23,.6);backdrop-filter:blur(4px)}
.hua-ba__tag--design{left:14px;color:var(--violet-2)}
.hua-ba__tag--built{right:14px;color:var(--signal)}
.hua-ba__handle{position:absolute;top:0;bottom:0;left:58%;z-index:3;width:2px;background:linear-gradient(var(--violet-2),var(--signal));transform:translateX(-50%);pointer-events:none}
.hua-ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(11,8,23,.72);backdrop-filter:blur(6px);border:1px solid var(--bone);display:flex;align-items:center;justify-content:center;color:var(--bone);font-size:13px;letter-spacing:-.05em}
.hua-ba.is-drag .hua-ba__grip{border-color:var(--violet-2);color:var(--violet-2)}

/* ---- MARQUEE: every surface (all 17 mockups, in motion) ---- */
.hua-marq{margin-top:clamp(54px,8vw,104px);overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hua-marq__label{max-width:var(--maxw);margin:0 auto 22px;padding:0 var(--pad);font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hua-marq__label b{color:var(--violet-2)}
.hua-marq__track{display:flex;gap:16px;width:max-content;animation:marq 64s linear infinite}
.hua-marq:hover .hua-marq__track{animation-play-state:paused}
.hua-marq__track img{height:clamp(150px,18vw,230px);width:auto;border-radius:8px;border:1px solid color-mix(in srgb,var(--bone) 10%,transparent);background:var(--ground-3)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- CINEMATIC FILM: footage full-bleed ---- */
.hua-film{padding:0}
.hua-film__head{max-width:var(--maxw);margin:0 auto;padding:clamp(90px,14vh,190px) var(--pad) clamp(40px,6vw,68px)}
.hua-film__k{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--violet-2);margin:0 0 18px}
.hua-film__lead{font-size:clamp(2.2rem,6vw,4.6rem);line-height:1;font-weight:600;letter-spacing:-.03em;margin:0;text-wrap:balance}
.hua-film__lead em{font-style:normal;color:var(--violet-2)}
.hua-frame{position:relative;width:100%;height:clamp(440px,88vh,940px);overflow:hidden;cursor:zoom-in}
.hua-frame + .hua-frame{margin-top:10px}
.hua-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.hua-frame:hover img{transform:scale(1.04)}
.hua-frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(8,5,18,.18) 0,transparent 30% 55%,rgba(8,5,18,.82))}
.hua-frame__cap{position:absolute;z-index:2;left:clamp(20px,5vw,72px);right:clamp(20px,5vw,72px);bottom:clamp(24px,5vw,56px);max-width:40ch}
.hua-frame__cap h3{font-family:var(--f-disp);font-size:clamp(1.5rem,3.6vw,2.9rem);line-height:1.06;font-weight:600;letter-spacing:-.02em;margin:0;color:#fff;text-shadow:0 2px 34px rgba(0,0,0,.7);text-wrap:balance}
.hua-frame__cap h3 b{color:var(--violet-2);font-weight:600}
.hua-frame__cap p{margin:12px 0 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone);text-shadow:0 1px 18px rgba(0,0,0,.9)}
.hua-frame__cap em{font-style:normal;color:var(--signal)}
.hua-frame__zoom{position:absolute;top:16px;right:16px;z-index:2;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(11,8,23,.5);backdrop-filter:blur(4px);color:#fff;font-size:14px;opacity:0;transition:opacity .3s}
.hua-frame:hover .hua-frame__zoom{opacity:1}

/* ---- DAY stats (kept, woven into film) + supporting masonry ---- */
.hua-film__stats{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,8vw,96px) var(--pad) clamp(24px,4vw,40px)}
.hua-film__sub{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,6vw,72px) var(--pad) 0}
.hua-film__subk{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 24px}

@media(max-width:860px){
  .hua-hero2{height:230vh}
  .hua-hero2__kv{background-image:url('assets/brand/kv-clean-vertical.webp')}   /* full master visual, portrait, on mobile */
  .hua-hero2__copy{bottom:10vh}
  .hua-ba{aspect-ratio:4/3}
  .hua-frame{height:clamp(360px,72vh,640px)}
}

/* ---- DRAWN → BUILT: the design (on its artboard) beside the room it became ---- */
.hua-dips{max-width:var(--maxw);margin:0 auto;display:grid;gap:clamp(42px,5.5vw,82px)}
.hua-dip__head{display:flex;align-items:baseline;gap:14px;margin:0 0 16px;flex-wrap:wrap}
.hua-dip__n{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--violet-2)}
.hua-dip__t{font-family:var(--f-disp);font-size:clamp(1.2rem,2.6vw,1.85rem);font-weight:600;letter-spacing:-.01em;margin:0;color:var(--bone)}
.hua-dip__spec{margin-left:auto;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hua-dip__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
.hua-dip__design,.hua-dip__built{position:relative;margin:0;aspect-ratio:16/9;border-radius:12px;overflow:hidden}
.hua-dip__design{background:radial-gradient(135% 135% at 50% 26%,#1a113c,#0a0716);border:1px solid color-mix(in srgb,var(--violet) 28%,transparent);display:flex;align-items:center;justify-content:center;padding:4.5% 5.5%}
.hua-dip__design img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;box-shadow:0 22px 56px -26px rgba(0,0,0,.75)}
.hua-dip__stack{display:flex;flex-direction:column;gap:9%;width:100%;align-items:center}
.hua-dip__stack img{width:100%;height:auto;max-height:none;border-radius:2px;box-shadow:0 16px 40px -22px rgba(0,0,0,.7)}
.hua-dip__built{border:1px solid color-mix(in srgb,var(--bone) 12%,transparent);cursor:zoom-in;background:var(--ground-3)}
.hua-dip__built img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.hua-dip__built:hover img{transform:scale(1.04)}
.hua-dip__tag{position:absolute;left:13px;top:12px;z-index:2;font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet-2);background:rgba(11,8,23,.55);backdrop-filter:blur(4px);padding:5px 10px;border-radius:999px}
.hua-dip__tag--built{color:var(--signal)}
.hua-dip__ticks i{position:absolute;width:14px;height:14px;border:1.4px solid color-mix(in srgb,var(--violet-2) 55%,transparent);z-index:1}
.hua-dip__ticks i:nth-child(1){left:12px;top:12px;border-right:0;border-bottom:0}
.hua-dip__ticks i:nth-child(2){right:12px;top:12px;border-left:0;border-bottom:0}
.hua-dip__ticks i:nth-child(3){left:12px;bottom:12px;border-right:0;border-top:0}
.hua-dip__ticks i:nth-child(4){right:12px;bottom:12px;border-left:0;border-top:0}
@media(max-width:760px){.hua-dip__pair{grid-template-columns:1fr;gap:10px}.hua-dip__design,.hua-dip__built{aspect-ratio:16/10}}

/* ---- PARTNER MARQUEE: all 40+ logos, running loop (two rows, opposite directions) ---- */
.hua-pmarq{position:relative;overflow:hidden;margin:0 auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hua-pmarq + .hua-pmarq{margin-top:14px}
.hua-pmarq__track{display:flex;gap:14px;width:max-content;align-items:center}
.hua-pmarq--a .hua-pmarq__track{animation:marq 64s linear infinite}
.hua-pmarq--b .hua-pmarq__track{animation:marqB 58s linear infinite}
.hua-pmarq:hover .hua-pmarq__track{animation-play-state:paused}
@keyframes marqB{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.hua-pchip{flex:0 0 auto;width:clamp(120px,13vw,168px);height:clamp(74px,8.2vw,104px);background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:16px 22px}
.hua-pchip img{max-width:100%;max-height:100%;width:auto;object-fit:contain}

/* ---- THE SIGNAL: the master visual in motion, as an LED video wall ---- */
.hua-signal{padding:clamp(96px,15vh,200px) 0;overflow:hidden}
.hua-signal__head{max-width:var(--maxw);margin:0 auto clamp(44px,6vw,76px);padding:0 var(--pad);text-align:center}
.hua-signal__k{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--signal);margin:0 0 18px;display:inline-flex;align-items:center;gap:10px}
.hua-signal__k i{width:22px;height:1px;background:var(--signal)}
.hua-signal__lead{font-size:clamp(2.4rem,7vw,5.4rem);line-height:.98;font-weight:600;letter-spacing:-.035em;margin:0;text-wrap:balance}
.hua-signal__lead em{font-style:normal;color:var(--signal)}
.hua-signal__note{max-width:54ch;margin:22px auto 0;color:#C4BDD8;line-height:1.66;font-size:clamp(1.02rem,1.5vw,1.16rem)}
.hua-signal__note b{color:var(--bone);font-weight:600}
.hua-wall{position:relative;width:min(calc(100% - 2*var(--pad)),1180px);margin:0 auto;padding-bottom:30px}
.hua-screens{display:flex;justify-content:center;align-items:stretch;gap:clamp(10px,1.5vw,22px)}
.hua-screen{position:relative;flex:1 1 0;max-width:210px;aspect-ratio:5/13;overflow:hidden;border-radius:5px;background:#060410;
  box-shadow:0 36px 90px -34px rgba(138,71,214,.6), 0 0 0 1px rgba(160,120,230,.16), inset 0 0 0 1px rgba(0,0,0,.4);
  opacity:0;transform:translateY(26px) scale(.96);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.hua-wall.on .hua-screen{opacity:1;transform:none}
.hua-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hua-screen::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);opacity:.32;mix-blend-mode:multiply}
.hua-screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 40px 4px rgba(6,4,16,.55);border-radius:5px}
.hua-screen__base{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);width:46%;height:30px;
  background:linear-gradient(180deg,#1a1430,#0c0a1a);border-radius:0 0 4px 4px;box-shadow:0 14px 24px -10px rgba(0,0,0,.7)}
.hua-wall__badge{display:inline-flex;align-items:center;gap:8px;margin:30px auto 0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hua-wall__badge i{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal);animation:cuepulse 1.8s infinite}
.hua-signal__foot{text-align:center}
/* ONE screen, fully displayed — height-driven so the whole master visual shows, large & centred */
.hua-wall--single .hua-screen{flex:0 0 auto;max-width:92vw;width:auto;height:min(78vh,860px);aspect-ratio:5/12}
@media(max-width:860px){ .hua-wall--single .hua-screen{height:min(70vh,620px);width:auto} }

/* ============ SHOWCASE — contextual mockups shown WHOLE (the identity, in the world) ============ */
/* Squarish presentation renders → a fully-visible plate on the dark ground, never cover-cropped. */
.hua-show{position:relative;width:100%;padding:clamp(34px,6vw,104px) var(--pad);background:#08050f}
.hua-show__frame{position:relative;max-width:1160px;margin:0 auto;border-radius:14px;overflow:hidden;box-shadow:0 46px 130px -54px rgba(0,0,0,.9),0 0 0 1px color-mix(in srgb,var(--bone) 8%,transparent)}
.hua-show__frame img{width:100%;height:auto;display:block}   /* native ratio → whole mockup, zero crop */
.hua-show__frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,5,18,.06) 0,transparent 26% 52%,rgba(8,5,18,.9))}
.hua-show__cap{position:absolute;left:clamp(20px,3.4vw,52px);right:clamp(20px,3.4vw,52px);bottom:clamp(20px,3.2vw,44px);z-index:2;max-width:36ch}
.hua-show__k{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--violet-2);display:block;margin-bottom:12px}
.hua-show__cap h3{font-family:var(--f-disp);font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.05;font-weight:600;letter-spacing:-.025em;margin:0;color:#fff;text-shadow:0 2px 34px rgba(0,0,0,.7);text-wrap:balance}
.hua-show__cap h3 em{font-style:normal;color:var(--violet-2)}
.hua-show__cap p{margin:11px 0 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--bone);text-shadow:0 1px 16px rgba(0,0,0,.85)}
.hua-show--band .hua-show__frame{max-width:1160px}
.hua-show__k--signal{color:var(--signal)}
@media(max-width:760px){.hua-show{padding:clamp(26px,7vw,54px) var(--pad)}.hua-show__frame{border-radius:11px}.hua-show__cap h3{font-size:clamp(1.35rem,6vw,1.9rem)}}

/* ============ BRAND WASH — violet → cyan gradient over the REAL photos (HiRE palette) ============ */
:root{--brandwash:linear-gradient(122deg,rgba(138,71,214,.62) 0%,rgba(138,71,214,.16) 50%,rgba(66,232,255,.52) 100%)}
.hua-frame::before,.hua-real figure::after,.hua-dip__built::after,.hua-day__band::before{mix-blend-mode:soft-light}
.hua-frame::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--brandwash)}
.hua-real figure::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--brandwash);border-radius:inherit}
.hua-real figcaption{position:relative;z-index:2}
.hua-dip__built::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--brandwash)}
.hua-day__band::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--brandwash)}

/* ============ MOBILE spacing pass — tighten vertical rhythm on phones ============ */
@media(max-width:640px){
  .hua-brief,.hua-names,.hua-sig,.hua-net,.hua-film,.hua-film__head{
    padding-top:clamp(56px,9vh,80px);padding-bottom:clamp(56px,9vh,80px)}
  .hua-names__cards{margin-top:36px;gap:14px}
  .hua-names__vision{margin-top:38px}
  .hua-names__powered{margin-top:30px}
  .hua-sig__head{margin-bottom:34px}
  .hua-ba-wrap{gap:36px}
  .hua-marq{margin-top:48px}
  .hua-stats{gap:10px}
  .hua-stat{padding:22px 18px}
  .hua-stat span{margin-top:12px}
  .hua-day__band{height:clamp(300px,80vw,460px)}
  .hua-spine .wrap{gap:46px}
  .hua-srow{grid-template-columns:44px 1fr;gap:12px;padding:20px 0}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001s!important}
  [data-reveal],[data-split] .w,.hua-mock,.hua-chip,.hua-real figure{opacity:1!important;transform:none!important}
}