/* Goldstack Studio v3
   Themes: each section carries data-theme; the page background and ink morph as sections take over.
   Radius rule: controls are pills (999px), surfaces 22px, windows 14px, chips 8px.
   z-index: content 0-3, follow image 20, nav 50, sheet 80, toast 90, intro 100, grain 110. */
:root{color-scheme:dark;
  --gold:#D2A852; --gold-hi:#EDCF86; --gold-mid:#B08635; --gold-deep:#7A5B22; --seal:#A63A24; --on-gold:#120D08;
  --sans:"Be Vietnam Pro","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(16px,4.4vw,64px); --max:1360px; --r:22px;
  --out:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --bg:#0B0A09; --fg:#F4F0E8; --muted:#A39888; --line:rgba(244,240,232,.11); --card:#151210; --card2:#1C1815; --accent:#EDCF86;
}
/* theme morph: as a section takes over the middle of the screen, the whole screen turns dark or light.
   Paper: one fixed sheet crossfades (a compositor animation). Ink: each section's colours hang on its own data-ink, which
   main.js sets at the point of the fade where both inks read equally well, while the sections on screen dip briefly, so the
   text never snaps against the wrong paper; only the sections on screen restyle then, the rest follow in idle time. The hero
   keeps its own dark paper and ink. The nav follows html[data-nav]. */
section[data-ink="light"],footer[data-ink="light"],html[data-nav="light"] .nav{--bg:#EEEDE8; --fg:#131110; --muted:#5F5850; --line:rgba(19,17,16,.12); --card:#FFFFFF; --card2:#F7F6F2; --accent:#7A5B22}
:where(section,footer)[data-ink]{color:var(--fg)}
section[data-ink="light"],footer[data-ink="light"]{color-scheme:light}
/* the sheet reaches well past the viewport: on iPhone the fixed box follows the layout viewport, which is shorter than the
   screen while the Safari toolbar collapses, and the dark page showed as a strip along the bottom edge */
body::before{content:"";position:fixed;top:-20vh;left:0;right:0;bottom:-45vh;z-index:-1;background:#EEEDE8;opacity:0;transition:opacity .7s cubic-bezier(.45,0,.55,1);will-change:opacity;pointer-events:none}
html[data-sec="light"] body::before{opacity:1}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
html.lock{overflow:hidden}  /* intro and the project sheet, where Lenis is not driving the scroll */
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:#0B0A09;color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ol,ul,dl,dd{margin:0}
::selection{background:var(--gold);color:var(--on-gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
html[lang="vi"] [data-l="en"],html[lang="en"] [data-l="vi"]{display:none!important}

h2{font-size:clamp(36px,5.2vw,80px);line-height:1.04;letter-spacing:-.045em;font-weight:700;max-width:16ch;text-wrap:balance;padding-bottom:.08em}
.sub{color:var(--muted);font-size:clamp(17px,1.35vw,20px);max-width:50ch;margin-top:22px;text-wrap:pretty}
em{font-style:italic;color:var(--gold);padding-right:.06em}
/* split headings: each word is an inline-block that carries its own trailing space (white-space:pre). Safari drops the
   collapsible whitespace between inline-blocks when it rebalances a heading, so no space is left outside the boxes */
.split .w{display:inline-block;white-space:pre}
.js .split .w{opacity:0;transform:translateY(.4em)}
.js .hero-h .w{filter:blur(6px)}  /* only the opening headline blurs in; a blurred layer per word costs WebKit a frame or two per section */
.js .split .w.in{opacity:1;filter:none;transform:none}
.js .up{opacity:0;transform:translateY(24px)}

/* intro */
.intro{position:fixed;inset:0;z-index:100;background:#0B0A09;color:#F4F0E8;display:grid;place-items:center;align-content:center;gap:22px;pointer-events:none}
html:not(.js) .intro{display:none}
.intro-mark svg{width:76px;height:76px;overflow:visible}
.intro-mark path{transform-box:fill-box;transform-origin:center}
.intro-n{font-family:var(--mono);font-size:13px;color:#A39888;letter-spacing:.04em}
.intro-n b{color:var(--gold-hi);font-weight:500;display:inline-block;min-width:3ch;text-align:right}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;font-weight:600;font-size:16px;white-space:nowrap;isolation:isolate;transition:scale .25s var(--out)}
.btn:active{scale:.97}
.btn-sm{height:42px;padding:0 18px;font-size:14.5px}
.btn-wide{width:100%}
/* text roll: two stacked copies in a 1.6em window, tall enough for Vietnamese marks */
.roll{display:inline-block;height:1.6em;line-height:1.6;overflow:hidden;vertical-align:middle}
.roll .r{display:flex;flex-direction:column;transition:transform .55s var(--out)}
.roll .r>span{display:block;height:1.6em;white-space:nowrap}
@media (hover:hover){.btn:hover .roll .r{transform:translateY(-1.6em)}}
.btn-stack{padding:0;height:56px}
.btn-stack.btn-wide{height:58px}
.btn-stack .btn-face{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:100%;width:100%;padding:0 28px;border-radius:999px;color:var(--on-gold);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-mid));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.18);transition:transform .45s var(--out)}
.btn-stack .ly{position:absolute;inset:0;border-radius:999px;z-index:1;transition:transform .5s var(--out)}
.btn-stack .ly2{background:var(--gold-mid)}
.btn-stack .ly3{background:var(--gold-deep)}
.btn-stack:hover .btn-face{transform:translate(-3px,-3px)}
.btn-stack:hover .ly2{transform:translate(1px,1px)}
.btn-stack:hover .ly3{transform:translate(5px,5px)}
.btn-stack .arr{width:18px;height:18px;transition:transform .45s var(--out)}
.btn-stack:hover .arr{transform:translateX(4px)}
.btn-ghost{border:1px solid color-mix(in srgb,var(--fg) 25%,transparent);color:var(--fg);overflow:hidden;background:color-mix(in srgb,var(--fg) 6%,transparent);transition:color .35s var(--out),border-color .35s,scale .25s var(--out)}
.btn-ghost .fill{position:absolute;z-index:-1;left:var(--fx,50%);top:var(--fy,50%);width:260%;aspect-ratio:1;border-radius:50%;background:var(--fg);transform:translate(-50%,-50%) scale(0);transition:transform .6s var(--out)}
.btn-ghost:hover{color:var(--bg);border-color:var(--fg)}
.btn-ghost:hover .fill{transform:translate(-50%,-50%) scale(1)}
.btn-gold{background:var(--gold);color:var(--on-gold)}
.btn-gold:hover{background:var(--gold-hi)}

/* nav */
.nav{position:fixed;top:14px;left:0;right:0;z-index:50;display:flex;justify-content:center;padding:0 12px;transition:transform .6s var(--out)}
.nav.hide{transform:translateY(-130%)}
.nav-pill{position:relative;display:flex;align-items:center;gap:6px;height:58px;padding:0 8px 0 18px;border-radius:999px;width:min(1100px,100%);
  background:color-mix(in srgb,var(--card) 92%,transparent);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 50px rgba(0,0,0,.18);overflow:hidden;transition:background-color .4s,border-color .4s}
.brand{display:flex;align-items:center;margin-right:auto}
.brand svg{height:30px;width:auto}
.links{position:relative;display:flex;gap:2px;margin-right:6px}
.links a{position:relative;z-index:1;padding:8px 14px;border-radius:999px;font-size:14.5px;color:var(--muted);font-weight:500;transition:color .3s}
.links a:hover,.links a.on{color:var(--fg)}
.links-hl{position:absolute;z-index:0;top:0;left:0;height:100%;border-radius:999px;background:color-mix(in srgb,var(--fg) 8%,transparent);opacity:0;transition:transform .45s var(--out),width .45s var(--out),opacity .3s}
.lang{position:relative;display:flex;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--fg) 8%,transparent);margin-right:6px}
.lang button{position:relative;z-index:1;width:38px;height:30px;border-radius:999px;font-family:var(--mono);font-size:12px;color:var(--muted);transition:color .3s}
.lang button[aria-pressed="true"]{color:var(--on-gold)}
.lang-thumb{position:absolute;top:3px;left:3px;width:38px;height:30px;border-radius:999px;background:var(--gold-hi);transition:transform .5s var(--spring)}
html[lang="en"] .lang-thumb{transform:translateX(38px)}
.nav-prog{position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));transform:scaleX(0);transform-origin:left}
.menu-btn{display:none;width:44px;height:44px;border-radius:999px;position:relative}
.menu-btn i{position:absolute;left:13px;right:13px;height:1.6px;background:var(--fg);border-radius:2px;transition:transform .45s var(--out)}
.menu-btn i:first-child{top:18px}.menu-btn i:last-child{top:25px}
.nav.open .menu-btn i:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav.open .menu-btn i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mmenu{position:absolute;top:66px;left:12px;right:12px;display:grid;padding:10px;border-radius:var(--r);background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid var(--line);
  opacity:0;transform:translateY(-10px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .3s,transform .45s var(--out)}
.mmenu a{padding:14px;font-size:22px;font-weight:600;letter-spacing:-.02em;border-radius:12px}
.mmenu a:last-child{color:var(--accent)}
.nav.open .mmenu{opacity:1;transform:none;pointer-events:auto}
@media (max-width:900px){.links,.nav-pill>.btn{display:none}.menu-btn{display:block}.nav-pill{height:54px}}

/* hero */
.hero{position:relative;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 0 64px;overflow:hidden;isolation:isolate;background:#0B0A09}
.dots{position:absolute;inset:0;width:100%;height:100%;z-index:-3}
/* the glow stays still: a drifting 80vw layer is the single most expensive thing a weak machine composites every frame */
.hero-glow{position:absolute;z-index:-2;width:80vw;height:80vw;right:-24vw;top:-26vw;border-radius:50%;background:radial-gradient(circle,rgba(210,168,82,.2),transparent 62%);pointer-events:none}
.hero-stage{position:absolute;z-index:-1;top:9%;right:0;width:44%;height:64%}
.hero-stage canvas{width:100%;height:100%;touch-action:pan-y;cursor:grab}
.stage-fallback{display:none;position:absolute;inset:0;place-items:center}
.stage-fallback svg{width:min(36vw,320px)}
.no-gl .stage-fallback{display:grid}.no-gl .hero-stage canvas{display:none}
.hero-in{pointer-events:none;will-change:transform,opacity}
.hero-in>*{pointer-events:auto}
.kicker{font-family:var(--mono);font-size:13px;color:var(--gold-hi);letter-spacing:.02em}
.hero-h{font-size:clamp(44px,6.4vw,112px);line-height:1;letter-spacing:-.055em;font-weight:700;max-width:12ch;margin-top:20px;padding-bottom:.1em;text-wrap:balance}
.hero-row{display:flex;align-items:flex-end;gap:48px;margin-top:30px;flex-wrap:wrap;padding-right:170px}
.lead{color:#CFC5B7;font-size:clamp(17px,1.4vw,21px);max-width:40ch}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
.badge{position:absolute;right:var(--gut);bottom:56px;width:132px;height:132px;display:grid;place-items:center;color:var(--fg)}
.badge-spin{position:absolute;inset:0;animation:spin 14s linear infinite;will-change:transform}
.badge-ring{width:100%;height:100%;overflow:visible}
.badge-ring text{font-family:var(--mono);font-size:14px;letter-spacing:.04em;fill:currentColor}
.badge-core{position:relative;width:58px;height:58px;border-radius:50%;background:var(--gold);color:var(--on-gold);display:grid;place-items:center;transition:transform .5s var(--spring),background .3s}
.badge-core svg{width:22px;height:22px;transition:transform .5s var(--out)}
.badge:hover .badge-core{transform:scale(1.18);background:var(--gold-hi)}
.badge:hover .badge-core svg{transform:rotate(45deg)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){
  .hero{padding-top:96px;justify-content:flex-start}
  .hero-stage{position:relative;width:100%;height:38vh;min-height:260px;order:-1;margin-bottom:6px}
  .hero-h{font-size:clamp(42px,12.4vw,66px)}
  .hero-row{margin-top:24px;padding-right:0}
  /* phones: the badge sits in the empty lower-right corner of the 3D stage (the mark is a diamond). At the hero's foot the tapes
     (margin-top:-56px, above the hero) sliced its bottom off and its ring ran into the "Xem dự án" button */
  .badge{width:92px;height:92px;top:calc(96px + max(38vh,260px) - 98px);bottom:auto;right:14px}
  .badge-core{width:40px;height:40px}
}

/* crossing tapes */
.tapes{position:relative;height:clamp(150px,16vw,240px);margin:-56px 0 -40px;z-index:3;overflow:hidden;pointer-events:none}
/* the dark of the hero continues down to the centre line of the black tape (3deg, falling to the right), so the hero
   never ends in a straight edge: its only edge is the one the tapes draw */
.tapes::before{content:"";position:absolute;inset:0;background:#0B0A09;clip-path:polygon(0 0,100% 0,100% calc(50% + 2.9vw),0 calc(50% - 2.9vw))}
.tape{position:absolute;left:-5%;width:110%;top:50%;padding:14px 0;overflow:hidden}
.tape-a{background:var(--gold);color:var(--on-gold);transform:translateY(-50%) rotate(-4deg);z-index:2}
.tape-b{background:#131110;color:var(--gold-hi);transform:translateY(-50%) rotate(3deg);border-block:1px solid rgba(237,207,134,.3)}
.tape-run{display:flex;align-items:center;gap:28px;width:max-content;will-change:transform}
.tape span{font-size:clamp(22px,2.6vw,38px);font-weight:700;letter-spacing:-.03em;white-space:nowrap;text-transform:uppercase;line-height:1.35}
.tape i{font-style:normal;font-size:clamp(16px,1.6vw,22px)}

/* about: who we are, beside a tiny crew building a page */
.about{padding:170px 0 120px}
.nw{white-space:nowrap}
/* services heading: an oversized gold 5; in the line under it the studio name in ink, "brand của bạn" in gold */
.sv-h{max-width:none}
.n5{font-size:1.55em;line-height:.8;color:var(--gold);letter-spacing:-.05em;margin-right:.04em}
.hl-ink,.hl-gold{font-weight:700}
.hl-ink{color:var(--fg)}
.hl-gold{color:var(--gold-mid)}
.hl-g{color:var(--gold)}  /* a gold word inside a heading, e.g. "Dự án tiêu biểu." */
.slash{color:var(--gold);margin-inline:.12em}  /* "Brand Portfolio / Identity": a gold slash with room on both sides */  /* keeps "Chúng tôi" together when the heading breaks */
.about-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,5vw,84px);align-items:center}
.about-lead{font-size:clamp(20px,1.75vw,27px);line-height:1.42;letter-spacing:-.02em;font-weight:500;margin-top:30px;max-width:32ch;text-wrap:pretty}
.about-body{color:var(--muted);font-size:clamp(16px,1.15vw,18px);margin-top:20px;max-width:46ch;text-wrap:pretty}
/* phones: heading, copy and scene are sized to share one screen, so nobody reads after the show or watches after the text */
@media (max-width:900px){.about{padding:130px 0 70px}.about-in{grid-template-columns:1fr;gap:26px}.about-lead{margin-top:16px}}
@media (max-width:560px){.about-lead{font-size:17.5px;line-height:1.42}.about-body{font-size:15px;line-height:1.55;margin-top:10px}.about-in{gap:20px}}
.sb.off .lg{animation-play-state:paused!important}

/* the build site. Sized in cqw (100 = scene width). Every moving part is a transform driven by a CSS variable, so the scene
   never reflows or repaints while it plays; build-site.js runs it only while it is on screen */
.sb{container-type:inline-size;position:relative;width:100%;aspect-ratio:100/66;border-radius:var(--r);overflow:hidden;isolation:isolate;border:1px solid rgba(19,17,16,.1);
  background-color:#F3F1EB;background-image:linear-gradient(rgba(19,17,16,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(19,17,16,.05) 1px,transparent 1px);background-size:4cqw 4cqw}
.sb i,.sb b,.sb u{display:block;position:absolute;font-style:normal}
.sb-ground{position:absolute;left:0;right:0;top:58cqw;bottom:0;background:#E6E1D6;border-top:.25cqw solid #131110}
.sb-cone{top:54.6cqw;width:2.6cqw;height:3.4cqw;background:linear-gradient(#D2A852 0 34%,#fff 34% 50%,#D2A852 50%);clip-path:polygon(50% 0,100% 100%,0 100%);position:absolute;z-index:2}
.sb-sign{position:absolute;left:87.5cqw;top:46.5cqw;width:10.5cqw;height:6.4cqw;z-index:2;border:.25cqw solid #131110;border-radius:.5cqw;background:repeating-linear-gradient(-45deg,#131110 0 1.1cqw,#D2A852 1.1cqw 2.2cqw)}
.sb-sign::before,.sb-sign::after{content:"";position:absolute;top:100%;width:.4cqw;height:5.4cqw;background:#131110}
.sb-sign::before{left:1.6cqw}.sb-sign::after{right:1.6cqw}
.sb-sign i{left:50%;top:50%;width:4.6cqw;height:3cqw;transform:translate(-50%,-50%);background:#fff;border-radius:.3cqw;box-shadow:inset 0 0 0 .2cqw #131110}
.sb-sign i::after{content:"";position:absolute;left:50%;top:50%;width:1.5cqw;height:1.5cqw;transform:translate(-50%,-50%) rotate(45deg);background:#D2A852;border-radius:.2cqw}
/* crane */
.sb-mast{position:absolute;left:82cqw;top:4cqw;width:3cqw;height:54cqw;z-index:2;border-inline:.25cqw solid #131110;
  background:repeating-linear-gradient(45deg,transparent 0 1.2cqw,rgba(19,17,16,.8) 1.2cqw 1.42cqw),repeating-linear-gradient(-45deg,transparent 0 1.2cqw,rgba(19,17,16,.8) 1.2cqw 1.42cqw)}
.sb-apex{left:83.1cqw;top:.6cqw;width:.8cqw;height:3.6cqw;background:#131110;z-index:4}
.sb-tie{top:.6cqw;height:.2cqw;background:#131110;z-index:4}
.sb-tie.l{left:14.92cqw;width:68.58cqw;transform-origin:100% 50%;transform:rotate(-2.84deg)}
.sb-tie.r{left:83.5cqw;width:14.89cqw;transform-origin:0 50%;transform:rotate(13.2deg)}
.sb-jib{position:absolute;left:14cqw;top:4cqw;width:85cqw;height:1.6cqw;z-index:4;border-block:.25cqw solid #131110;
  background:repeating-linear-gradient(60deg,transparent 0 1.3cqw,rgba(19,17,16,.8) 1.3cqw 1.5cqw)}
.sb-cw{position:absolute;left:92cqw;top:5.6cqw;width:6cqw;height:3.4cqw;background:#3B342D;border-radius:.3cqw;z-index:4}
.sb-cab{position:absolute;left:79cqw;top:5.6cqw;width:3.6cqw;height:3.2cqw;background:#D2A852;border-radius:.3cqw .3cqw .3cqw 1.2cqw;z-index:4;box-shadow:inset 0 0 0 .2cqw #131110}
.sb-cab i{left:.6cqw;top:.6cqw;width:2.2cqw;height:1.5cqw;background:#F4F0E8;border-radius:.2cqw}
.sb-cab i::after{content:"";position:absolute;left:.7cqw;top:.35cqw;width:.9cqw;height:.9cqw;border-radius:50%;background:#E2BE98;box-shadow:0 -.35cqw 0 -.05cqw #D2A852}
.sb-trol{position:absolute;left:0;top:5.4cqw;width:3cqw;height:1.1cqw;background:#131110;border-radius:.2cqw;z-index:5;transform:translate(calc(var(--tx,72) * 1cqw - 50%),0);will-change:transform}
.sb-rig{position:absolute;left:0;right:0;top:5.6cqw;bottom:0;overflow:hidden;z-index:4}
.sb-hook{position:absolute;left:0;top:0;transform:translate(calc(var(--tx,72) * 1cqw),calc(var(--hy,.2) * 1cqw));will-change:transform}
.hk-cable{left:-.09cqw;top:-60cqw;width:.18cqw;height:60cqw;background:#3B342D}
.hk{left:-.7cqw;top:0;width:1.4cqw;height:1.2cqw;background:#D2A852;border-radius:.3cqw .3cqw .8cqw .8cqw;box-shadow:inset 0 0 0 .18cqw #131110}
.pl{position:absolute;top:4.2cqw;opacity:0}
.pl .sl{position:absolute;left:0;top:-3cqw;width:100%;height:3cqw;overflow:visible}
.pl .sl path{fill:none;stroke:#3B342D;stroke-width:1.2;vector-effect:non-scaling-stroke}
.pl>.k{left:0;top:0;width:100%;height:100%}
/* the page under construction */
.sb-win{position:absolute;left:7cqw;top:14cqw;width:58cqw;height:44cqw;z-index:1;background:#fff;border:.2cqw solid rgba(19,17,16,.16);border-bottom:0;border-radius:1.2cqw 1.2cqw 0 0;box-shadow:0 1.6cqw 3cqw -1.6cqw rgba(19,17,16,.3)}
.sb-bar{position:absolute;left:0;right:0;top:0;height:4cqw;display:flex;align-items:center;gap:.8cqw;padding:0 1.6cqw;background:#F6F5F1;border-bottom:1px solid rgba(19,17,16,.08);border-radius:1.2cqw 1.2cqw 0 0}
.sb .sb-bar>i{position:relative;width:1.1cqw;height:1.1cqw;border-radius:50%;background:#D9D5CC}
.sb-bar>i::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:var(--live,0);transition:opacity .4s}
.sb-bar>i:nth-child(1)::after{background:#F26B5E}.sb-bar>i:nth-child(2)::after{background:#F5BF4F}.sb-bar>i:nth-child(3)::after{background:#5DC466}
.sb-title{flex:1;text-align:center;font-family:var(--mono);font-size:1.45cqw;color:#7d756b;white-space:nowrap}
.sb-prog{position:relative;min-width:7cqw;text-align:right;font-family:var(--mono);font-size:1.45cqw;color:#7A5B22;white-space:nowrap}
.sb-prog .pc{display:inline-block;opacity:calc(1 - var(--live,0))}
.sb-prog .live{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.5cqw;color:#1f8a4c;opacity:var(--live,0)}
.sb .sb-prog .live i{position:static;width:.9cqw;height:.9cqw;border-radius:50%;background:#2fb062}
.sb-body{position:absolute;left:0;right:0;top:4cqw;bottom:0;overflow:hidden}
.sb .bp{border:.2cqw dashed rgba(122,91,34,.45);border-radius:.7cqw}
.k{position:absolute}
.k-nav{background:#131110;border-radius:.8cqw;display:flex;align-items:center;gap:1.4cqw;padding:0 1.1cqw}
.sb .k-nav b{position:static;width:1.6cqw;height:1.6cqw;background:#D2A852;border-radius:.35cqw;transform:rotate(45deg) scale(.8);margin-right:auto}
.sb .k-nav i{position:static;width:4cqw;height:.5cqw;background:rgba(244,240,232,.45);border-radius:.3cqw}
.sb .k-nav u{position:static;width:5.4cqw;height:1.8cqw;background:#D2A852;border-radius:2cqw}
.k-img{border-radius:1cqw;overflow:hidden;background:#E6E1D6}
.k-img img{width:100%;height:100%;object-fit:cover}
.sb .k-bar,.sb .k-line,.sb .k-btn{transform-origin:0 50%;will-change:transform}
.sb .k-bar{background:#131110;border-radius:.4cqw}
.sb .k-bar.gold{background:#D2A852}
.sb .k-line{background:#CFC8BB;border-radius:.45cqw}
.sb .k-btn{background:#D2A852;border-radius:2cqw}
.k-card{background:#F7F6F2;border:.18cqw solid rgba(19,17,16,.1);border-radius:1cqw}
.sb .k-card b{left:1.3cqw;top:1.3cqw;width:2.6cqw;height:2.6cqw;border-radius:.6cqw;background:#D2A852}
.sb .k-card i{left:1.3cqw;height:.8cqw;border-radius:.4cqw;background:#CFC8BB}
.sb .k-card i:nth-of-type(1){top:5.1cqw;width:11cqw}.sb .k-card i:nth-of-type(2){top:6.8cqw;width:7.5cqw}
.sb .sb-flash{inset:0;background:radial-gradient(circle at 50% 35%,rgba(237,207,134,.6),transparent 62%);opacity:0;pointer-events:none}
/* gondola: hangs from the top of the page, the painter rolls each line on as it travels */
.sb-gond{position:absolute;left:0;top:0;width:9cqw;z-index:3;transform:translate(calc(var(--gx,24.3) * 1cqw),calc(var(--gy,-12) * 1cqw));will-change:transform}
.sb .gp{left:0;top:0;width:9cqw;height:.7cqw;background:#131110;border-radius:.2cqw}
.sb .gr{left:0;top:-2.3cqw;width:9cqw;height:.25cqw;background:#131110}
.sb .gc{left:.4cqw;bottom:0;width:.16cqw;height:60cqw;background:#6f675d}
.sb .gc.r{left:auto;right:.4cqw}
.sb .g-handle{left:3.9cqw;top:-3.56cqw;width:1.5cqw;height:.22cqw;background:#131110}
.sb .g-roll{left:5.3cqw;top:-4.7cqw;width:.8cqw;height:2.6cqw;background:#EDCF86;border-radius:.3cqw;box-shadow:inset -.2cqw 0 0 #B08635}
/* crew: one worker is six small parts; legs swing only while --ps is running */
.wk{position:absolute;left:0;top:0;width:2.6cqw;height:5.2cqw;transform:translate(calc(var(--x,0) * 1cqw - 50%),calc(var(--y,0) * 1cqw - 100%)) scaleX(var(--f,1));will-change:transform}
.sb .wk .lg{bottom:0;width:.6cqw;height:2cqw;background:#3B342D;border-radius:.3cqw;transform-origin:50% 0;animation:wkL .21s ease-in-out infinite alternate;animation-play-state:var(--ps,paused)}
.sb .wk .lg:nth-child(1){left:.62cqw;animation-direction:alternate-reverse}.sb .wk .lg:nth-child(2){left:1.38cqw}
.sb .wk .bd{bottom:1.75cqw;left:.4cqw;width:1.8cqw;height:2.05cqw;border-radius:.7cqw .7cqw .35cqw .35cqw;background:linear-gradient(#131110 0 36%,#EDCF86 36% 50%,#131110 50%)}
.sb .wk .ar{bottom:1.85cqw;left:1.05cqw;width:.5cqw;height:1.65cqw;border-radius:.25cqw;background:#131110;transform-origin:50% .25cqw;transform:rotate(var(--a,12deg))}
.sb .wk .hd{bottom:3.75cqw;left:.67cqw;width:1.26cqw;height:1.26cqw;border-radius:50%;background:#E2BE98}
.sb .wk .ht{bottom:4.45cqw;left:.5cqw;width:1.6cqw;height:.85cqw;border-radius:1cqw 1cqw .15cqw .15cqw;background:#D2A852;box-shadow:inset 0 -.18cqw 0 #B08635}
.sb .wk .tb{bottom:2.3cqw;left:1.9cqw;width:1.3cqw;height:1.7cqw;background:#3B342D;border-radius:.2cqw;box-shadow:inset 0 0 0 .2cqw #131110}
@keyframes wkL{from{transform:rotate(26deg)}to{transform:rotate(-26deg)}}
.sb-pair{position:absolute;left:0;top:0;width:16cqw;height:15.5cqw;z-index:3;transform:translate(calc(var(--x,112) * 1cqw - 50%),calc(58cqw - 100%));will-change:transform}
.sb-pair .pc{position:absolute;left:0;bottom:5.25cqw;width:16cqw;height:9.5cqw;transform:translateY(calc(var(--d,0) * 1cqw));will-change:transform}
.sb .fm{z-index:3}
.sb-fx{position:absolute;inset:0;z-index:6;pointer-events:none}
.sb .sb-fx i{left:0;top:0;width:.9cqw;height:.9cqw;border-radius:.15cqw;opacity:0;background:#D2A852;transform:translate(calc(var(--fx,0) * 1cqw),calc(var(--fy,0) * 1cqw)) rotate(var(--fr,0deg));will-change:transform,opacity}

/* services: sticky screen + scrolling list */
.services{padding:40px 0 100px}
.sv-in{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,80px);margin-top:56px;align-items:start}
.sv-stage-wrap{position:sticky;top:max(92px,calc(50vh - 22vw))}
.sv-stage{container-type:inline-size;position:relative;width:100%;aspect-ratio:4/3;border-radius:14px;background:#fff;border:1px solid rgba(19,17,16,.12);box-shadow:0 40px 80px -30px rgba(19,17,16,.35);overflow:hidden;color:#131110;will-change:transform;backface-visibility:hidden}
.win-bar{height:6.4cqw;display:flex;align-items:center;gap:1.2cqw;padding:0 2.4cqw;border-bottom:1px solid rgba(19,17,16,.08);background:#F6F5F1}
.win-bar>i{width:1.6cqw;height:1.6cqw;border-radius:50%}
.win-bar>i:nth-child(1){background:#F26B5E}.win-bar>i:nth-child(2){background:#F5BF4F}.win-bar>i:nth-child(3){background:#5DC466}
.win-title{flex:1;text-align:center;font-family:var(--mono);font-size:1.7cqw;color:#7d756b;margin-right:6cqw}
.win-body{position:absolute;left:0;right:0;bottom:0;top:6.4cqw}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s var(--out),visibility 0s .5s}
.scene.on{opacity:1;visibility:visible;transition:opacity .5s var(--out)}
.sv{min-height:76vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;opacity:.25;transition:opacity .6s var(--out)}
.sv.on{opacity:1}
.sv:first-child{min-height:60vh;justify-content:flex-start;padding-top:6vh}
.sv-tag{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.sv-tag b{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--on-gold);background:var(--gold);border-radius:8px;padding:3px 8px}
.sv h3{font-size:clamp(30px,3.2vw,50px);letter-spacing:-.04em;line-height:1.08;font-weight:700;margin-top:18px;text-wrap:balance;padding-bottom:.06em}
@media (min-width:901px){.sv h3{margin-right:calc(-1 * var(--gut))}}  /* headings may use the right gutter: "Brand Portfolio / Identity" stays on one line */
.sv .who{color:var(--accent);margin-top:16px;font-size:17px;max-width:40ch;font-weight:500}
.sv .desc{color:var(--muted);margin-top:12px;font-size:16px;max-width:44ch}
.sv .time{margin-top:24px;display:flex;align-items:baseline;gap:14px;font-size:14px;color:var(--muted)}
.sv .time b{font-size:clamp(22px,2vw,30px);color:var(--fg);font-weight:700;letter-spacing:-.03em}
@media (max-width:900px){
  /* phone: a plain stack of cards, each with its own screen on top */
  .sv-in{grid-template-columns:1fr;gap:16px;margin-top:32px}
  .sv-list{display:grid;gap:16px}
  .sv,.sv:first-child{min-height:0;opacity:1;padding:10px 10px 24px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);justify-content:flex-start}
  .sv-stage-m{border-radius:12px;box-shadow:none;margin-bottom:20px}
  .sv>:not(.sv-stage){margin-left:12px;margin-right:12px}
  .sv h3{font-size:clamp(26px,7.4vw,34px);margin-top:14px}
  .sv .who{font-size:16px}
  .sv .desc{font-size:15.5px}
  .sv .time{margin-top:18px}
}

/* scene parts: every size is in cqw so the whole screen scales as one */
.cur{position:absolute;left:0;top:0;width:3.2cqw;z-index:30;pointer-events:none;transform:translate(calc(var(--x,60) * 1cqw),calc(var(--y,40) * 1cqw));filter:drop-shadow(0 .4cqw .6cqw rgba(0,0,0,.3))}
.cur svg{width:100%;height:auto;overflow:visible}
.cur .hand{display:none}.cur.grab .arrow{display:none}.cur.grab .hand{display:block}
.cur::after{content:"";position:absolute;left:-1.6cqw;top:-1.6cqw;width:3.2cqw;height:3.2cqw;border-radius:50%;border:.35cqw solid var(--gold);opacity:0}
.cur.click::after{animation:clk .5s var(--out)}
@keyframes clk{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.ghost{position:absolute;left:0;top:0;z-index:25;transform:translate(calc(var(--x,0) * 1cqw),calc(var(--y,0) * 1cqw));pointer-events:none}

/* design editor */
.dz{position:absolute;inset:0;display:grid;grid-template-columns:6.4cqw 18cqw 1fr;background:#ECEAE5}
.dz-tools{background:#fff;border-right:1px solid #e3e0da;display:flex;flex-direction:column;align-items:center;gap:2.2cqw;padding-top:2.4cqw}
.dz-tools i{width:3cqw;height:3cqw;border-radius:.8cqw;background:#E6E3DC}
.dz-tools i.on{background:var(--gold)}
.dz-panel{background:#fff;border-right:1px solid #e3e0da;padding:2cqw;display:grid;grid-template-columns:1fr 1fr;gap:1.2cqw;align-content:start}
.dz-panel p{grid-column:span 2;font-size:1.5cqw;font-weight:700;color:#7d756b}
.dz-panel .th{aspect-ratio:1;border-radius:.8cqw;overflow:hidden;background:#ddd}
.dz-panel .th img{width:100%;height:100%;object-fit:cover}
.dz-panel .th.picked{outline:.35cqw solid #2D7FF9;outline-offset:.2cqw}
.dz-canvas{position:relative;display:grid;place-items:center}
.dz-top{position:absolute;top:1.6cqw;left:2cqw;right:2cqw;display:flex;gap:1cqw;align-items:center}
.dz-top .pill{height:3.6cqw;padding:0 1.6cqw;border-radius:99px;background:#fff;border:1px solid #e3e0da;display:flex;align-items:center;gap:.8cqw;font-size:1.5cqw;font-weight:600;white-space:nowrap}
.dz-top .sw{width:2.2cqw;height:2.2cqw;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #d8d4cc}
.dz-top .lg{margin-left:auto;font-family:var(--mono)}
.dz-top .lg b{padding:.2cqw .8cqw;border-radius:99px;font-weight:500;transition:background .3s,color .3s}
.dz-top .lg b.on{background:#131110;color:#fff}
.page{position:relative;width:29cqw;aspect-ratio:210/297;background:#fff;box-shadow:0 1.2cqw 3cqw rgba(19,17,16,.15);margin-top:5cqw}
.page .hd{height:6.6cqw;background:#131110;position:relative}
.page .hd::after{content:"";position:absolute;left:2cqw;bottom:2cqw;width:4cqw;height:1cqw;background:var(--gold)}
.page .ttl{position:absolute;left:2.2cqw;top:8.6cqw;font-weight:800;font-size:2.3cqw;letter-spacing:-.03em;line-height:1.3;white-space:nowrap}
.page .ttl .sel{position:absolute;inset:-.5cqw -.8cqw;border:1.5px solid #2D7FF9;opacity:0}
.page .ttl .sel i{position:absolute;width:1cqw;height:1cqw;background:#fff;border:1.5px solid #2D7FF9}
.page .ttl .sel i:nth-child(1){left:-.5cqw;top:-.5cqw}.page .ttl .sel i:nth-child(2){right:-.5cqw;top:-.5cqw}.page .ttl .sel i:nth-child(3){left:-.5cqw;bottom:-.5cqw}.page .ttl .sel i:nth-child(4){right:-.5cqw;bottom:-.5cqw}
.page .lines{position:absolute;left:2.2cqw;right:2.2cqw;top:14.6cqw;display:grid;gap:.9cqw}
.page .lines i{height:.8cqw;border-radius:1cqw;background:#E8E5DF}
.page .lines i:nth-child(2){width:86%}.page .lines i:nth-child(3){width:64%}
.page .frame{position:absolute;left:2.2cqw;right:2.2cqw;bottom:2.2cqw;height:16cqw;border:1.5px dashed #c9c3b8;border-radius:.6cqw;overflow:hidden;display:grid;place-items:center;transition:border-color .3s}
.page .frame.hot{border-color:#2D7FF9;background:rgba(45,127,249,.06)}
.page .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.page .frame span{font-size:1.4cqw;color:#a39b8f}
.drag-img{width:10cqw;aspect-ratio:1;border-radius:.8cqw;overflow:hidden;box-shadow:0 1.6cqw 3cqw rgba(0,0,0,.3);opacity:0;transform:translate(-3cqw,-3cqw) rotate(-5deg)}
.drag-img img{width:100%;height:100%;object-fit:cover}

/* code + live preview */
.cz{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;background:#14120F}
.cz-code{padding:2.4cqw 1.6cqw;font-family:var(--mono);font-size:1.55cqw;line-height:1.8;color:#d8d0c3;overflow:hidden;white-space:pre}
.cz-code .ln{display:inline-block;width:3cqw;color:#5b544a}
.cz-code .t{color:#EDCF86}.cz-code .a{color:#9fc5ff}.cz-code .s{color:#a6d49b}.cz-code .c{color:#6f675d}
.cz-code .caret{display:inline-block;width:.9cqw;height:2cqw;background:var(--gold);vertical-align:-.3cqw;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.cz-prev{position:relative;background:#E9E8E3;display:grid;place-items:center;overflow:hidden}
.site{position:relative;width:42cqw;height:52cqw;background:#0F0D0B;color:#F4F0E8;border-radius:1cqw;overflow:hidden;box-shadow:0 1.6cqw 3cqw rgba(0,0,0,.25);transition:width .8s var(--out),height .8s var(--out),border-radius .8s,box-shadow .8s}
.site.phone-v{width:21cqw;height:44cqw;border-radius:3cqw;box-shadow:0 0 0 .7cqw #131110,0 2cqw 4cqw rgba(0,0,0,.3)}
.site>*{opacity:0}
.s-nav{height:4.4cqw;display:flex;align-items:center;gap:1cqw;padding:0 2cqw;border-bottom:1px solid rgba(255,255,255,.08)}
.s-nav b{width:3cqw;height:1.4cqw;background:var(--gold);border-radius:.3cqw}
.s-nav i{width:3.4cqw;height:.7cqw;background:rgba(255,255,255,.25);border-radius:1cqw}
.s-nav i:first-of-type{margin-left:auto}
.s-img{height:19cqw;overflow:hidden}
.s-img img{width:100%;height:100%;object-fit:cover}
.s-h{padding:2cqw 2cqw 0;font-weight:800;font-size:2.8cqw;line-height:1.15;letter-spacing:-.04em}
.s-h span{color:var(--gold-hi)}
.s-btn{margin:1.6cqw 2cqw 0;justify-self:start;display:inline-block;padding:.9cqw 2cqw;border-radius:99px;background:var(--gold);color:#120D08;font-weight:700;font-size:1.4cqw}
.s-p{margin:1.6cqw 2cqw 0;display:grid;gap:.8cqw}
.s-p i{height:.7cqw;border-radius:1cqw;background:rgba(255,255,255,.18)}
.s-p i:last-child{width:60%}
.deploy{position:absolute;right:2cqw;top:2cqw;padding:1cqw 2cqw;border-radius:99px;background:#131110;color:#fff;font-size:1.5cqw;font-weight:600;display:flex;align-items:center;gap:.8cqw;z-index:3;transition:background .3s}
.deploy i{width:1.2cqw;height:1.2cqw;border-radius:50%;background:#5DC466;transform:scale(0);transition:transform .4s var(--spring)}
.deploy.done{background:#1f8a4c}.deploy.done i{transform:scale(1);background:#fff}

/* content calendar */
.kz{position:absolute;inset:0;display:grid;grid-template-columns:1fr 24cqw;background:#F6F5F1}
.kz-main{padding:2cqw;display:flex;flex-direction:column;gap:1.2cqw;min-width:0}
.kz-tray{display:flex;gap:1.1cqw;align-items:center;height:8cqw}
.kz-tray p{font-size:1.5cqw;font-weight:700;margin-right:.4cqw;white-space:nowrap}
.post{width:7.2cqw;aspect-ratio:1;border-radius:.8cqw;overflow:hidden;box-shadow:0 .4cqw 1cqw rgba(0,0,0,.14);flex:0 0 auto;background:#ddd}
.post img{width:100%;height:100%;object-fit:cover}
.kz-tray .post.gone{opacity:.25}
.cal{flex:1;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:auto repeat(4,1fr);gap:.6cqw}
.cal .dh{font-size:1.2cqw;color:#9a9286;font-weight:600;text-align:center}
.cal .d{position:relative;background:#fff;border-radius:.6cqw;border:1px solid #ebe8e1;padding:.4cqw .5cqw;font-size:1.1cqw;color:#9a9286;overflow:hidden;transition:border-color .3s,background .3s}
.cal .d.hot{border-color:#2D7FF9;background:rgba(45,127,249,.06)}
.cal .d .post{position:absolute;right:.5cqw;bottom:.5cqw;width:4.6cqw;opacity:0}
.cal .d .ok{position:absolute;left:.5cqw;bottom:.6cqw;width:1.3cqw;height:1.3cqw;border-radius:50%;background:#5DC466;transform:scale(0)}
.kz-side{background:#fff;border-left:1px solid #ebe8e1;padding:2.4cqw;display:flex;flex-direction:column}
.kz-side p{font-size:1.5cqw;font-weight:700}
.kz-side .bigv{font-size:4.6cqw;font-weight:800;letter-spacing:-.04em;margin-top:.6cqw;font-variant-numeric:tabular-nums;line-height:1.2}
.kz-side .bigv small{font-size:1.6cqw;color:#1f8a4c;margin-left:.6cqw;font-weight:700}
.kz-side .sm{font-size:1.3cqw;color:#9a9286;font-weight:500;margin-top:.4cqw}
.bars{margin-top:auto;display:flex;align-items:flex-end;gap:1cqw;height:24cqw}
.bars i{flex:1;background:linear-gradient(180deg,var(--gold-hi),var(--gold));border-radius:.5cqw .5cqw 0 0;height:10%}

/* spreadsheet to app */
.xz{position:absolute;inset:0;background:#fff;overflow:hidden}
.xz-fx{height:5cqw;display:flex;align-items:center;gap:1.2cqw;padding:0 1.6cqw;border-bottom:1px solid #e6e3dc;font-family:var(--mono);font-size:1.55cqw}
.xz-fx b{color:#1f8a4c;font-weight:500;font-style:italic}
.xz-fx span{flex:1;height:3.2cqw;display:flex;align-items:center;padding:0 1cqw;border:1px solid #e6e3dc;border-radius:.5cqw;white-space:nowrap;overflow:hidden}
.grid{position:relative;display:grid;grid-template-columns:4cqw 15cqw 11cqw 8cqw 17cqw 1fr;font-size:1.5cqw}
.grid>div{height:4.4cqw;border-right:1px solid #eeebe5;border-bottom:1px solid #eeebe5;display:flex;align-items:center;padding:0 1cqw;white-space:nowrap;overflow:hidden;transition:background .3s}
.grid .h{background:#F6F5F1;font-weight:700;color:#5f5850}
.grid .n{background:#F6F5F1;color:#9a9286;justify-content:center;padding:0}
.grid .hl{background:rgba(45,127,249,.12)}
.grid .tag{display:inline-block;padding:.1cqw .8cqw;border-radius:99px;font-size:1.25cqw;background:#f1ece2;color:#7A5B22}
.phone{position:absolute;right:4cqw;top:3.6cqw;width:25cqw;height:54cqw;border-radius:4cqw;background:#0F0D0B;box-shadow:0 0 0 .8cqw #26221e,0 3cqw 5cqw rgba(0,0,0,.35);overflow:hidden;color:#F4F0E8;transform:translateY(70cqw)}
.ph-top{padding:4cqw 2.2cqw 1.4cqw}
.ph-top p{font-size:1.35cqw;color:#a39888}
.ph-top h4{margin-top:.4cqw;font-size:2.8cqw;letter-spacing:-.04em;line-height:1.2}
.days{display:flex;gap:.7cqw;padding:0 2.2cqw}
.days i{flex:1;height:5cqw;border-radius:1.2cqw;background:#1f1b17;font-style:normal;font-size:1.25cqw;display:grid;place-items:center;color:#a39888;transition:background .3s,color .3s}
.days i.on{background:var(--gold);color:#120D08;font-weight:700}
.bk{margin:1.2cqw 2.2cqw 0;padding:1.3cqw;border-radius:1.6cqw;background:#1a1613;display:grid;gap:.3cqw;opacity:0;transform:translateY(3cqw)}
.bk b{font-size:1.55cqw}
.bk span{font-size:1.25cqw;color:#a39888}
.bk em{font-style:normal;justify-self:start;font-size:1.15cqw;padding:.15cqw 1cqw;border-radius:99px;background:rgba(93,196,102,.18);color:#8fd896}
.ph-cta{position:absolute;left:2.2cqw;right:2.2cqw;bottom:2.6cqw;height:5cqw;border-radius:99px;background:var(--gold);color:#120D08;font-weight:700;font-size:1.55cqw;display:grid;place-items:center;transition:transform .3s var(--spring)}
.ph-cta.press{transform:scale(.94)}

/* film timeline */
.fz{position:absolute;inset:0;background:#141210;color:#e8e1d6;display:grid;grid-template-rows:1fr 25cqw}
.fz-mon{position:relative;display:grid;grid-template-columns:1fr 20cqw;gap:1.6cqw;padding:1.8cqw;min-height:0}
.mon{position:relative;border-radius:.6cqw;overflow:hidden;background:#000}
.mon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.mon img.on{opacity:1}
.mon .tc{position:absolute;left:1.2cqw;bottom:1cqw;font-family:var(--mono);font-size:1.45cqw;background:rgba(0,0,0,.55);padding:.2cqw .8cqw;border-radius:.4cqw}
.mon .rec{position:absolute;right:1.2cqw;top:1cqw;width:1.4cqw;height:1.4cqw;border-radius:50%;background:#F26B5E;animation:blink 1.2s steps(1) infinite}
.fz-bin{display:grid;grid-template-columns:1fr 1fr;gap:.8cqw;align-content:start}
.fz-bin p{grid-column:span 2;font-size:1.4cqw;color:#8d8478;font-weight:600}
.fz-bin i{aspect-ratio:16/10;border-radius:.4cqw;overflow:hidden;background:#222}
.fz-bin i img{width:100%;height:100%;object-fit:cover}
.tl{position:relative;border-top:1px solid #2a2622;padding:1.2cqw 1.8cqw;display:grid;grid-template-rows:2.2cqw 6.4cqw 5.4cqw 3.6cqw;gap:.7cqw}
.ruler-t{display:flex;justify-content:space-between;font-family:var(--mono);font-size:1.15cqw;color:#6f675d}
.track{position:relative;display:flex;gap:.4cqw}
.clip{position:relative;height:100%;border-radius:.5cqw;overflow:hidden;background:#3a3027;border:1px solid rgba(255,255,255,.12);flex:0 0 auto}
.clip img{width:100%;height:100%;object-fit:cover;opacity:.8}
.clip .edge{position:absolute;right:0;top:0;bottom:0;width:.8cqw;background:var(--gold);opacity:0}
.au .clip{background:#203227;border-color:rgba(93,196,102,.3)}
.wave{position:absolute;inset:.6cqw;display:flex;align-items:center;gap:.25cqw}
.wave i{flex:1;background:#6dd27a;border-radius:1cqw;opacity:.7}
.tx .clip{background:#3b2d12;border-color:rgba(237,207,134,.35);font-size:1.25cqw;display:flex;align-items:center;padding:0 1cqw;color:#EDCF86;white-space:nowrap}
.playhead{position:absolute;top:.6cqw;bottom:.6cqw;left:1.8cqw;width:2px;background:#F26B5E;z-index:5;transform:translateX(calc(var(--p,0) * 1cqw))}
.playhead::before{content:"";position:absolute;top:0;left:-.8cqw;width:1.8cqw;height:1.6cqw;background:#F26B5E;clip-path:polygon(0 0,100% 0,50% 100%)}

/* process: pinned stepper */
.process{position:relative;height:420vh}
.pr-pin{position:sticky;top:0;height:100vh;height:100dvh;display:flex;align-items:center}
.pr-in{display:grid;grid-template-columns:1fr 1.05fr;gap:6vw;align-items:center}
.pr-board{position:relative;border-radius:28px;background:var(--card);border:1px solid var(--line);padding:clamp(24px,3vw,44px);box-shadow:0 40px 80px -40px rgba(19,17,16,.3)}
.pr-top{display:flex;align-items:center;gap:28px}
.pr-ring{position:relative;width:120px;height:120px;flex:0 0 auto}
.pr-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--line);stroke-width:6}
.ring-fg{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:339.3}
.pr-n{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:1.2em;line-height:1.2;overflow:hidden;text-align:center;font-size:46px;font-weight:700;letter-spacing:-.04em}
.pr-n-track{display:flex;flex-direction:column}
.pr-n-track b{display:block;height:1.2em;font-weight:700}
.ruler{position:relative;flex:1;height:44px}
.ruler::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--line);transform:translateY(-50%)}
.ruler-fill{position:absolute;left:0;top:50%;height:4px;width:100%;margin-top:-2px;border-radius:4px;background:linear-gradient(90deg,var(--gold-mid),var(--gold-hi));transform:scaleX(0);transform-origin:left}
.ruler span{position:absolute;top:50%;left:calc(var(--p) * 100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--card);border:2px solid var(--line);transition:background .4s,border-color .4s,transform .5s var(--spring)}
.ruler span.on{background:var(--gold);border-color:var(--gold);transform:scale(1.25)}
.steps{list-style:none;padding:0;margin:34px 0 0;position:relative;min-height:160px}
.step{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(24px);transition:opacity .5s var(--out),transform .6s var(--out)}
.step.on{opacity:1;transform:none}
.step h3{font-size:clamp(26px,2.6vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1.15;padding-bottom:.05em}
.step p{color:var(--muted);font-size:17px;margin-top:10px;max-width:42ch}
@media (max-width:900px){
  .process{height:auto;padding:90px 0}
  .pr-pin{position:relative;height:auto}
  .pr-in{grid-template-columns:1fr;gap:40px}
  .pr-top{display:none}
  .steps{min-height:0;display:grid;gap:22px;margin:0}
  .step{position:relative;opacity:1;transform:none;filter:none;padding-left:22px;border-left:2px solid var(--gold)}
}

/* work list: hovering a row pulls a drawer in from the right; the title keeps its own column so nothing overlaps */
.work{padding:170px 0 120px;position:relative}
.plist{margin-top:56px;border-top:1px solid var(--line)}
.proj{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) min(440px,38%);align-items:center;column-gap:28px;padding:28px 0;border-bottom:1px solid var(--line);cursor:pointer;isolation:isolate;overflow:hidden}
.proj .pimg{display:none}
.chips{display:flex;gap:6px}
.chip{font-family:var(--mono);font-size:12px;padding:3px 8px;border-radius:8px;background:rgba(210,168,82,.16);color:var(--accent)}
.proj h3{font-size:clamp(22px,2.4vw,38px);letter-spacing:-.035em;line-height:1.18;font-weight:600;transition:color .3s,translate .6s var(--out);padding-bottom:.06em}
.pside,.drawer{grid-row:1;grid-column:3}
.pside{display:flex;align-items:center;justify-content:flex-end;gap:22px;transition:translate .6s var(--out),opacity .35s}
.pkey{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.pkey b{font-size:clamp(20px,1.8vw,26px);font-weight:700;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.pkey>span{color:var(--muted);font-size:14px}
/* the field each client works in, "Name • Category" */
.pkey .pcat{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pkey .pcat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.live::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#6fd67b;margin-right:8px;vertical-align:2px;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(111,214,123,.6)}70%{box-shadow:0 0 0 8px rgba(111,214,123,0)}100%{box-shadow:0 0 0 0 rgba(111,214,123,0)}}
.parr{flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
.parr svg{width:20px;height:20px}
.drawer{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center;padding:12px;border-radius:16px;background:var(--card2);border:1px solid rgba(237,207,134,.22);
  translate:calc(100% + 40px) 0;opacity:0;transition:translate .7s var(--out),opacity .4s}
.dthumb{aspect-ratio:3/2;border-radius:10px;overflow:hidden}
.dthumb{position:relative}
.dthumb img,.dthumb .pvid{width:100%;height:100%;object-fit:cover;scale:1.15;transition:scale .9s var(--out)}
.pvid{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.dtxt{display:grid;gap:8px;min-width:0}
.dtxt p{font-size:14px;line-height:1.5;color:var(--muted)}
.dmore{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--gold-hi)}
.dmore svg{width:16px;height:16px;transition:translate .4s var(--out)}
/* the sweep: a gold band pulls across from the right edge */
.proj::before{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(210,168,82,.16),rgba(210,168,82,.04) 60%,transparent);transform:scaleX(0);transform-origin:right;transition:transform .7s var(--out);z-index:-1}
@media (hover:hover) and (min-width:901px){
  .plist:hover .proj:not(:hover) h3,.plist:hover .proj:not(:hover) .pside{opacity:.4}
  .proj:hover::before{transform:scaleX(1)}
  .proj:hover h3{color:var(--gold-hi);translate:-6px 0}
  .proj:hover .pside{translate:-40px 0;opacity:0}
  .proj:hover .drawer{translate:0 0;opacity:1}
  .proj:hover .dthumb img,.proj:hover .dthumb .pvid{scale:1}
  .proj:hover .dmore svg{translate:4px 0}
}
.proj:focus-visible .drawer{translate:0 0;opacity:1}
.proj:focus-visible .pside{opacity:0}
@media (max-width:900px){
  .proj{grid-template-columns:1fr auto;grid-template-areas:"img img" "chips arr" "h h" "key key";row-gap:12px;padding:22px 0 26px;overflow:visible}
  .proj .pimg{display:block;grid-area:img;aspect-ratio:16/10;border-radius:16px;overflow:hidden;margin-bottom:6px}
  .proj .pimg img{width:100%;height:100%;object-fit:cover}
  .proj .pimg{position:relative}
  .chips{grid-area:chips}.proj h3{grid-area:h}
  .pside{display:contents}
  .pkey{grid-area:key;white-space:normal}
  .parr{grid-area:arr;width:42px;height:42px}
  .drawer{display:none}
  .work{padding:120px 0 90px}
}

/* principles bento */
.principles{padding:60px 0 150px}
.bento{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px;margin-top:56px}
.cell{position:relative;border-radius:var(--r);border:1px solid var(--line);background:var(--card);overflow:hidden;min-height:300px;display:flex;isolation:isolate}
.c-a{grid-row:span 2;min-height:560px;background:radial-gradient(120% 80% at 0% 0%,rgba(210,168,82,.22),transparent 60%),var(--card)}
.c-d{grid-column:span 2}
.spot::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;padding:1px;
  background:radial-gradient(380px circle at var(--sx,-200px) var(--sy,-200px),rgba(237,207,134,.8),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.spot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(420px circle at var(--sx,-200px) var(--sy,-200px),rgba(237,207,134,.08),transparent 50%)}
.cell-txt{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,2.6vw,36px);width:100%}
.cell h3{font-size:clamp(22px,1.9vw,28px);letter-spacing:-.03em;line-height:1.2;font-weight:600}
.cell p:not(.big){color:var(--muted);margin-top:10px;font-size:15.5px;max-width:42ch}
.big{display:flex;align-items:center;gap:14px;margin-bottom:auto;padding-bottom:28px;font-size:clamp(56px,6vw,104px);font-weight:700;letter-spacing:-.05em;line-height:1.15;color:var(--gold-hi)}
.big.flip{height:1.15em;overflow:hidden;align-items:flex-start;padding-bottom:0}
.c-a h3{margin-top:28px}
.flip-in{display:flex;flex-direction:column}
.flip-in span{display:block;height:1.15em}
.big.lock svg{width:clamp(56px,5vw,76px);height:auto;overflow:visible}  /* the lifted, tilted shackle rises past the 24-unit viewBox; without this its top is sliced flat */
.big.lock .shackle{transition:transform .6s var(--spring);transform-origin:16px 10.5px}
/* the lock opens and the files fan out under a real pointer only: on a phone a tap would leave them stuck open */
@media (hover:hover){.cell:hover .big.lock .shackle{transform:translateY(-2.5px) rotate(18deg)}}
/* "AI + người": the full line is laid out once in a box of fixed height; typing only flips each letter's opacity and slides the caret on
   the compositor, so nothing ever reflows (an emptied line used to shrink the card and jolt the whole page below it) */
.big.ai{display:block;container-type:inline-size}
.ty{position:relative;display:block;height:1.3em;line-height:1.3;white-space:pre;contain:layout style;
  font-size:clamp(40px,3.8vw,60px);font-size:min(clamp(40px,3.8vw,60px),18.5cqi)}  /* cqi cap: "AI + people" (5.1em) always fits the card */
.ty .ch{opacity:0}
.ty .ch.on{opacity:1}
.ty .caret{position:absolute;left:0;top:.2em;width:4px;height:.9em;border-radius:1px;background:var(--gold);will-change:transform;animation:blink 1s steps(1) infinite}
.ty.typing .caret{animation:none}
.ty.still .caret{display:none}
.big.files{height:110px;position:relative}
.big.files i{position:absolute;left:0;bottom:28px;width:70px;height:88px;border-radius:8px;background:linear-gradient(160deg,var(--gold-hi),var(--gold-mid));box-shadow:inset 0 1px 0 rgba(255,255,255,.4);transition:transform .7s var(--spring)}
.big.files i:nth-child(1){background:var(--gold-deep);transform:translate(28px,-14px) rotate(8deg)}
.big.files i:nth-child(2){background:var(--gold-mid);transform:translate(14px,-7px) rotate(4deg)}
@media (hover:hover){
  .cell:hover .big.files i:nth-child(1){transform:translate(70px,-22px) rotate(16deg)}
  .cell:hover .big.files i:nth-child(2){transform:translate(36px,-10px) rotate(8deg)}
}
@media (max-width:900px){.principles{padding:40px 0 80px}.bento{grid-template-columns:1fr;gap:12px}.c-a{grid-row:auto}.c-a,.cell{min-height:0}.c-d{grid-column:auto}.big{padding-bottom:18px;font-size:56px}.big.ai .ty{font-size:40px;font-size:min(40px,18.5cqi)}.big.files{height:126px;padding-bottom:0}.big.files i{bottom:14px}.c-a h3{margin-top:14px}}

/* faq */
.faq{padding:140px 0}
.qa{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}
.q{border-radius:var(--r);background:var(--card);border:1px solid var(--line);padding:clamp(24px,2.6vw,36px);transition:translate .5s var(--out),box-shadow .5s,background-color .8s}
.q:hover{translate:0 -4px;box-shadow:0 30px 60px -30px rgba(19,17,16,.3)}
.q h3{font-size:clamp(20px,1.7vw,24px);font-weight:600;letter-spacing:-.025em;line-height:1.3}
.q p{color:var(--muted);margin-top:12px;font-size:16px}
@media (max-width:760px){.qa{grid-template-columns:1fr}.faq{padding:80px 0}}

/* contact */
.contact{padding:150px 0 60px;position:relative;overflow-x:clip}
.ct-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,90px);align-items:start}
.ct-h{font-size:clamp(40px,5.6vw,88px);max-width:12ch}
.mailbox{display:flex;align-items:center;flex-wrap:wrap;gap:14px 18px;margin-top:36px}
.addr{font-size:clamp(20px,2vw,28px);font-weight:600;letter-spacing:-.02em;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:3px;transition:background-size .5s var(--out),color .3s}
.addr:hover{background-size:100% 1.5px;color:var(--gold-hi)}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,40px)}
.seal{position:absolute;top:-34px;right:-14px;width:96px;height:96px;border-radius:50%;background:var(--seal);color:#f6e2d3;display:grid;place-content:center;text-align:center;line-height:1.1;transform:rotate(-12deg);box-shadow:0 10px 30px rgba(166,58,36,.4),inset 0 0 0 4px rgba(255,255,255,.12)}
.seal b{font-size:28px;letter-spacing:-.03em}.seal span{font-size:12px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:grid;gap:8px;margin-bottom:18px}
.fld label,.needs legend{font-size:14px;color:#cdbfaf;font-weight:500}
.fld input,.fld textarea{width:100%;font:inherit;font-size:16px;color:var(--fg);background:rgba(244,240,232,.04);border:1px solid rgba(244,240,232,.14);border-radius:12px;padding:13px 15px;transition:border-color .3s,box-shadow .3s;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(210,168,82,.15)}
.fld.bad textarea{border-color:#d0715d}
.err{color:#e59682;font-size:14px}
.needs{border:0;margin:0 0 18px;padding:0;min-width:0}
.needs legend{padding:0;margin-bottom:10px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills label{cursor:pointer}
.pills input{position:absolute;opacity:0;pointer-events:none}
.pills label>span{display:inline-block;padding:9px 15px;border-radius:999px;border:1px solid rgba(244,240,232,.16);font-size:14.5px;color:#d7cbbd;transition:background .3s,color .3s,border-color .3s,transform .4s var(--spring)}
.pills label:hover>span{border-color:var(--gold-mid)}
.pills input:checked+span{background:var(--gold);border-color:var(--gold);color:var(--on-gold);transform:scale(1.05)}
.pills input:focus-visible+span{outline:2px solid var(--gold-hi);outline-offset:2px}
.fine{font-size:13.5px;color:var(--muted);margin-top:14px;text-align:center}
@media (max-width:900px){.ct-in{grid-template-columns:1fr}.seal{right:6px;top:-40px;width:84px;height:84px}.f2{grid-template-columns:1fr;gap:0}.contact{padding:110px 0 40px}}

/* footer: the wordmark lights up under the pointer */
.foot{padding:80px 0 40px;overflow:hidden}
.foot-word{position:relative;display:flex;justify-content:space-between;font-size:min(12.6vw,186px);font-weight:700;letter-spacing:-.05em;line-height:1.05;padding-bottom:.08em;color:#2a2420}
.foot-word span{display:inline-block}
.foot-lit{position:absolute;inset:0;display:flex;justify-content:space-between;color:var(--gold-hi);pointer-events:none;
  -webkit-mask:radial-gradient(260px circle at var(--fx,-400px) var(--fy,50%),#000 25%,transparent 70%);mask:radial-gradient(260px circle at var(--fx,-400px) var(--fy,50%),#000 25%,transparent 70%)}
.js .foot-word>span:not(.foot-lit){transform:translateY(40%);opacity:0}
.foot-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.foot-row svg{width:28px;height:28px}
.foot-row .grow{flex:1}
.foot-row a:hover{color:var(--gold-hi)}
@media (max-width:760px){.foot-row{flex-direction:column;align-items:flex-start;gap:12px}.foot-row .grow{flex:none}}

/* sheet */
.sheet{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;color:#F4F0E8}
.sheet[hidden]{display:none}
.sheet-bg{position:absolute;inset:0;background:rgba(8,6,5,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .45s}
.sheet.in .sheet-bg{opacity:1}
.sheet-box{position:relative;width:min(1000px,100%);max-height:calc(100dvh - 40px);overflow:auto;display:grid;grid-template-columns:1.1fr 1fr;border-radius:var(--r);background:#151210;border:1px solid rgba(244,240,232,.12);box-shadow:0 40px 120px rgba(0,0,0,.6);overscroll-behavior:contain}
.sheet-img{min-height:100%;overflow:hidden}
.sheet-img img{width:100%;height:100%;object-fit:cover}
.sheet-img{position:relative}
#sheetVid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#sheetVid.fit{object-fit:contain;background:#0d0905}
#sheetVid[hidden],#sheetImg[hidden]{display:none}
/* app stage (built by main.js): the phones are contained in the box and float as compositor animations; the backdrop covers.
   Each float layer spans the whole canvas, so translateY(%) is a share of the canvas height (7px and 10px of 960). */
.pst{position:absolute;inset:0;overflow:hidden;container-type:size;background:#120b0e}
.pst-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pst-c{position:absolute;left:50%;top:50%;width:100%;width:min(100cqw,100cqh * var(--ar));aspect-ratio:var(--ar);transform:translate(-50%,-50%);container-type:inline-size}
.pst-f{position:absolute;inset:0;will-change:transform;animation:pst-s 5.2s cubic-bezier(.37,0,.63,1) infinite paused}
.pst-fc{animation-name:pst-c;animation-delay:-3.9s}
.pst-fl{animation-delay:-.27s}
.pst-fr{animation-delay:-2.01s}
.pst.run .pst-f{animation-play-state:running}
@keyframes pst-c{0%,100%{transform:translate3d(0,.73%,0)}50%{transform:translate3d(0,-.73%,0)}}
@keyframes pst-s{0%,100%{transform:translate3d(0,1.04%,0)}50%{transform:translate3d(0,-1.04%,0)}}
.pst-f img,.pst-ph,.pst-v,.pst-isl{position:absolute;max-width:none}
.pst-ph{background:#0e0e10}
.pst-v{object-fit:cover;background:#0e0e10}
.pst-isl{border-radius:999px;background:#000}
.pst-p{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0d0905;transition:opacity .5s var(--out)}
.pst.ph .pst-p{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.pst-f{animation:none}}
.sheet-body{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;gap:14px}
.sheet-body h3{font-size:clamp(24px,2.4vw,34px);line-height:1.2;letter-spacing:-.03em;font-weight:700;padding-right:40px}
.sheet-body .pkey b{color:var(--gold-hi)}
.sheet-body .pkey>span{color:#A39888}
.sheet-body .chip{color:var(--gold-hi)}
.sheet-body .pdesc{color:#cfc5b7}
.sheet-body .state{color:#A39888;font-size:14px}
.sheet-body .plinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.sheet-body .plinks a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid rgba(237,207,134,.35);color:var(--gold-hi);font-size:14px;font-weight:600;transition:background .3s,color .3s}
.sheet-body .plinks a::after{content:"↗";font-size:13px}
.sheet-body .plinks a:hover{background:var(--gold);color:var(--on-gold)}
.sheet-body ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.sheet-body li{position:relative;padding-left:26px;color:#d4c8ba;font-size:16px}
.sheet-body li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;background:var(--gold);transform:rotate(45deg);border-radius:2px}
.sheet-body .rv{opacity:0;transform:translateY(14px)}
.sheet.in .sheet-body .rv{opacity:1;transform:none;transition:opacity .5s var(--out),transform .6s var(--out);transition-delay:calc(.12s + var(--d,0) * 60ms)}
.sheet-close{position:absolute;z-index:3;top:14px;right:14px;width:42px;height:42px;border-radius:999px;background:rgba(14,11,9,.7);backdrop-filter:blur(10px);border:1px solid rgba(244,240,232,.15);color:#F4F0E8;transition:transform .45s var(--out),background .3s}
.sheet-close:hover{transform:rotate(90deg);background:var(--gold);color:var(--on-gold)}
.sheet-close i{position:absolute;left:50%;top:50%;width:16px;height:1.6px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.sheet-close i+i{transform:translate(-50%,-50%) rotate(-45deg)}
/* phones, including in-app browsers (Messenger, Zalo) whose bottom toolbar sits over the page:
   size to the small viewport (svh) and leave room under the last line so it can always scroll into view */
@media (max-width:760px){.sheet{padding:0;align-items:end}.sheet-box{grid-template-columns:1fr;border-radius:var(--r) var(--r) 0 0;max-height:92vh;max-height:88svh;-webkit-overflow-scrolling:touch}.sheet-img{height:auto;min-height:0;aspect-ratio:var(--ar,16/10);max-height:50svh}.sheet-body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}}

.toast{position:fixed;z-index:90;left:50%;bottom:28px;padding:12px 20px;border-radius:999px;background:var(--fg);color:var(--bg);font-weight:600;font-size:15px;transform:translate(-50%,140%) scale(.9);opacity:0;transition:transform .55s var(--spring),opacity .3s;pointer-events:none}
.toast.on{transform:translate(-50%,0) scale(1);opacity:1}

@media (prefers-reduced-motion:reduce){
  .badge-spin,.hero-glow{animation:none}
  .js .split .w,.js .up,.js .foot-word>span:not(.foot-lit){opacity:1!important;filter:none!important;transform:none!important}
  .process{height:auto}.pr-pin{position:relative;height:auto;padding:120px 0}
  .steps{min-height:0;display:grid;gap:22px}.step{position:relative;opacity:1;transform:none;filter:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media (prefers-reduced-transparency:reduce){.nav-pill,.mmenu{background:var(--card);backdrop-filter:none}}
html[data-nav="light"] .brand svg [fill="#EEE6D4"]{fill:#131110}
.brand svg [fill]{transition:fill .4s}

.cz-code .tx{display:inline-block;vertical-align:top}
.cur svg{transition:transform .2s var(--out);transform-origin:20% 10%}
.cur.grab svg{transform:scale(.86)}