/* 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;
}
html[data-sec="light"]{--bg:#EEEDE8; --fg:#131110; --muted:#5F5850; --line:rgba(19,17,16,.12); --card:#FFFFFF; --card2:#F7F6F2; --accent:#7A5B22}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;
  transition:background-color .6s var(--out)}  /* only the page colour eases; ink switches at once so text is not repainted every frame */
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 .w{display:inline-block;white-space:nowrap}
.js .split .w{opacity:0;filter:blur(6px);transform:translateY(.4em)}
.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 .8s,border-color .8s}
.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}
.dots{position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.hero-glow{position:absolute;z-index:-2;width:80vw;height:80vw;right:-20vw;top:-30vw;border-radius:50%;background:radial-gradient(circle,rgba(210,168,82,.2),transparent 62%);pointer-events:none;will-change:transform;animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-22vw,14vw) scale(1.15)}}
.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}
  .badge{width:92px;height:92px;top:auto;bottom:20px;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}
.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)}

/* proof: odometer stats */
.proof{padding:170px 0 110px}
.stats{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:16px;margin-top:64px}
.stat{border-radius:var(--r);background:var(--card);border:1px solid var(--line);padding:28px 26px 30px;display:flex;flex-direction:column;justify-content:space-between;min-height:250px;transition:background-color .8s,border-color .8s,translate .5s var(--out)}
.stat:hover{translate:0 -4px}
.s-big{background:#131110;color:#F4F0E8;border-color:#131110}
.num{display:flex;align-items:baseline;font-size:clamp(52px,5.4vw,92px);font-weight:700;letter-spacing:-.04em;line-height:1.15;padding-bottom:.05em}
.s-big .num{color:var(--gold-hi);font-size:clamp(44px,5vw,88px)}
.num i{font-style:normal;color:var(--gold);margin-left:.04em}
.lbl{color:var(--muted);font-size:15.5px;margin-top:22px;max-width:30ch}
.s-big .lbl{color:#B5AA9A}
/* odometer: each digit is a rolling column; the 1.15em window holds whole glyphs */
.odo{display:inline-flex}
.odo .dg{position:relative;display:inline-block;height:1.15em;overflow:hidden;line-height:1.15}
.odo .dg>i{font-style:normal;visibility:hidden}
.odo .dg>span{position:absolute;left:-.2em;right:-.2em;top:0;display:flex;flex-direction:column;text-align:center}
.odo .dg>span>b{display:block;height:1.15em;font-weight:inherit}
@media (max-width:1000px){.stats{grid-template-columns:1fr 1fr}.s-big{grid-column:span 2}}
@media (max-width:560px){.stats{grid-template-columns:1fr}.s-big{grid-column:auto}.stat{min-height:180px}.proof{padding:140px 0 80px}}

/* 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}
.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);transition:background-color .8s}
.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);filter:blur(8px);transition:opacity .5s var(--out),transform .6s var(--out),filter .5s}
.step.on{opacity:1;transform:none;filter: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}
.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 img{width:100%;height:100%;object-fit:cover;scale:1.15;transition:scale .9s var(--out)}
.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{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}
  .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}
.big.lock .shackle{transition:transform .6s var(--spring);transform-origin:16px 10.5px}
.cell:hover .big.lock .shackle{transform:translateY(-2.5px) rotate(18deg)}
.big.ai{font-size:clamp(40px,3.8vw,60px);gap:4px;min-height:1.2em}
.caret{display:inline-block;width:4px;height:.9em;background:var(--gold);animation:blink 1s steps(1) infinite}
.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)}
.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{font-size:40px}.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)}

/* 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-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 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:220px;min-height:0}.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-sec="light"] .brand svg [fill="#EEE6D4"]{fill:#131110}
.brand svg [fill]{transition:fill .8s}

.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)}