/* ==========================================================================
   GOYSTUDIO · Selected Work showcases + hero
   Previews are HTML/CSS/SVG plus licensed photos (see assets/photos/CREDITS.md).
   Screens are drawn in em at a fixed design size and scaled with container queries.
   Default styles = FINAL state of each demonstration. Under html.motion the start
   state is set, and .is-on plays it once with transitions (no loops).
   ========================================================================== */

/* ---------- hero: generated moving background ---------- */
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(55% 60% at 18% 80%,rgba(22,74,58,.55),transparent 70%),
  radial-gradient(60% 70% at 85% 20%,rgba(18,34,86,.6),transparent 70%),
  radial-gradient(30% 40% at 70% 70%,rgba(200,241,105,.10),transparent 70%),#07090C}
.hero__bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
.hero__bg canvas.is-ready{opacity:1}
.hero__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(48% 46% at 50% 47%,rgba(7,9,12,.62),rgba(7,9,12,0) 100%),linear-gradient(0deg,var(--bg) 0%,rgba(14,15,17,0) 22%)}
.bg-toggle{position:absolute;right:20px;bottom:20px;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(14,15,17,.7);color:var(--text-2);font:500 13px/1 var(--sans);cursor:pointer;backdrop-filter:blur(8px);transition:color .2s ease,border-color .2s ease}
.bg-toggle[hidden]{display:none}
.bg-toggle:hover{color:var(--text);border-color:var(--text-3)}
.bg-toggle__i{width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.bg-toggle[aria-pressed="true"] .bg-toggle__i{border:0;width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
@media (max-width:600px){ .bg-toggle{right:12px;bottom:12px} }

/* ---------- frames ---------- */
.dk{position:absolute;background:#1F2226;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 90px -36px rgba(0,0,0,.75)}
.dk__bar{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;background:#24272B;border-bottom:1px solid rgba(255,255,255,.06)}
.dk__bar i{width:8px;height:8px;border-radius:50%;background:#45494F}
.dk__bar span{margin-left:10px;font-size:11px;color:#9A9D97;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk__vp{position:relative;container-type:inline-size;aspect-ratio:1200/740;overflow:hidden}
.dk__in{position:absolute;left:0;top:0;width:75em;height:46.25em;font-size:calc(100cqw / 75);overflow:hidden}
.ph{position:absolute;padding:6px;border-radius:30px;background:#0B0B0C;border:1px solid rgba(255,255,255,.14);box-shadow:0 36px 70px -24px rgba(0,0,0,.75)}
.ph__vp{position:relative;container-type:inline-size;aspect-ratio:390/800;overflow:hidden;border-radius:24px}
.ph__in{position:absolute;inset:0;font-size:calc(100cqw / 24.375);overflow:hidden}
:where(.fm,.cg,.lu,.ob,.ob-card,.ob-drawer__in,.tp) :where(p,ul,ol,dl,dd){margin:0}
:where(.fm,.cg,.lu,.tp) img{display:block}

/* ---------- work section layout ---------- */
.sec__head--split{display:grid;grid-template-columns:1fr minmax(0,460px);gap:32px 64px;align-items:end}
.sec__head--split .sec__lead{margin-top:0}
@media (max-width:900px){ .sec__head--split{grid-template-columns:1fr} }
.works{display:grid;grid-template-columns:1fr 1fr;gap:88px 28px}
.wk{min-width:0}
.wk--full{grid-column:1/-1}
.wk__stage{position:relative;margin:0;border-radius:24px;overflow:hidden;isolation:isolate;background:#151719}
.wk__art{position:relative}
.wk__bg{position:absolute;inset:-6%;z-index:-1}
.wk__bg img{width:100%;height:100%;object-fit:cover}
/* backdrops are dimmed with a plain overlay instead of a CSS filter: same look, much cheaper to raster while scrolling */
.wk__bg::after{content:"";position:absolute;inset:0;background:rgba(8,9,10,var(--dim,0));pointer-events:none}
.wk--full .wk__art{aspect-ratio:16/9}
.wk--half .wk__art{aspect-ratio:4/5}
.wk__info{margin-top:24px}
.wk__label{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.wk__label::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--lime)}
.wk__label--own{color:var(--text-2)}
.wk__label--own::before{background:transparent;box-shadow:inset 0 0 0 2px var(--lime);border-radius:50%}
.wk__info h3{font:800 clamp(30px,3.2vw,42px)/1 var(--display);font-stretch:110%;letter-spacing:-.035em;margin-top:12px}
.wk__meta{color:var(--text-2);margin-top:8px;font-size:15.5px}
.wk__intent{margin-top:14px;max-width:58ch;color:var(--text)}
.wk--full .wk__info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px 48px;align-items:start}
.wk--full .wk__label,.wk--full .wk__info h3,.wk--full .wk__meta{grid-column:1}
.wk--full .wk__intent{grid-column:2;grid-row:1/span 3;margin-top:0;font-size:18px;align-self:center}
@media (max-width:900px){
  .works{grid-template-columns:1fr;gap:64px}
  .wk--full .wk__info{display:block}
  .wk--full .wk__intent{margin-top:14px;font-size:17px}
}

/* ==========================================================================
   FORMA — architecture website (photography-led, serif)
   ========================================================================== */
.fm-stage .wk__bg{--dim:.6}
.fm-dk{left:4%;top:7%;width:70%}
.fm-ph{right:4.5%;top:9%;width:21%}
.fm{background:#F2EFE9;color:#1A1917;font-family:var(--sans)}
.fm-word{font:800 1.05em/1 var(--display);font-stretch:125%;letter-spacing:.28em}
.fm-hero{position:absolute;left:0;top:0;width:75em;height:32em;overflow:hidden;color:#fff}
.fm-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fm-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,9,.72) 0%,rgba(10,10,9,.25) 55%,rgba(10,10,9,0) 100%),linear-gradient(0deg,rgba(10,10,9,.55),transparent 45%)}
.fm-nav{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:1.7em 2.8em}
.fm-links{display:flex;gap:2.2em;font-size:.78em;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.fm-links .is-on{color:#fff;box-shadow:0 1px 0 #fff}
.fm-copy{position:absolute;left:2.8em;bottom:2.6em;max-width:36em}
.fm-k{font-size:.72em;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.fm-h{font:400 4.9em/.93 'Instrument Serif',Georgia,serif;letter-spacing:-.02em;margin-top:.25em}
.fm-h em{font-style:italic;color:#E9DCC5}
.fm-now{position:absolute;right:2.8em;bottom:2.8em;display:grid;justify-items:end;text-align:right}
.fm-now span{grid-area:1/1;font:400 1.5em/1.1 'Instrument Serif',Georgia,serif}
.fm-now b{grid-area:2/1;font-weight:500;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-top:.5em}
.fm-n1{opacity:0}
.fm-index{position:absolute;left:0;top:32em;width:75em;height:14.25em;display:grid;grid-template-columns:repeat(3,1fr)}
.fm-cell{position:relative;z-index:1;display:grid;grid-template-columns:8.6em 1fr;gap:1.2em;align-items:center;padding:1.3em 1.6em;border-right:1px solid #DAD3C7}
.fm-cell:last-child{border-right:0}
.fm-cell img{width:8.6em;height:11.6em;object-fit:cover}
.fm-cell p{font:400 1.5em/1.08 'Instrument Serif',Georgia,serif}
.fm-cell b{display:block;font:600 .5em/1 var(--sans);letter-spacing:.12em;color:#6B645A;margin-bottom:.6em}
.fm-cell span{display:block;font:500 .5em/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#625B51;margin-top:.7em}
.fm-hi{position:absolute;top:0;left:0;width:33.334%;height:.35em;background:#1A1917;transform:translateX(100%);z-index:2}
.fm--m{background:#F2EFE9}
.fm-mhero{position:relative;height:25em;color:#fff}
.fm-mhero img{width:100%;height:100%;object-fit:cover}
.fm-mhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 30%,transparent 55%,rgba(0,0,0,.6))}
.fm-mtop{position:absolute;z-index:1;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:1.3em 1.3em}
.fm-mtop .fm-word{font-size:.9em}
.fm-burger{display:grid;gap:.3em}.fm-burger i{display:block;width:1.3em;height:2px;background:#fff}
.fm-mtitle{position:absolute;z-index:1;left:1.3em;bottom:1.2em}
.fm-mh{font:400 2.5em/1 'Instrument Serif',Georgia,serif;margin-top:.15em}
.fm-meta{display:grid;grid-template-columns:1fr 1fr;gap:.8em 1em;padding:1.1em 1.3em .9em;border-bottom:1px solid #D9D2C6}
.fm-meta dt{font-size:.62em;letter-spacing:.14em;text-transform:uppercase;color:#625B51}
.fm-meta dd{margin-top:.15em !important;font-size:.88em}
.fm-mp{font-size:.82em;line-height:1.5;color:#4F4A42;padding:.9em 1.3em 0}
.fm-gal{display:grid;grid-template-columns:1.2fr 1fr;gap:.4em;padding:.9em 1.3em}
.fm-gal img{width:100%;height:8.5em;object-fit:cover}

/* ==========================================================================
   Cantigi Labs — Android ride recorder (midnight / neon lime / safety orange)
   ========================================================================== */
.cg-stage .wk__bg::after{background:linear-gradient(180deg,rgba(8,9,10,.42) 0%,rgba(8,9,10,.62) 55%,rgba(8,9,10,.8) 100%)}
.cg-stage .wk__bg img{object-position:50% 18%}
.cg-ph1{left:7%;top:6%;width:46%}
.cg-ph2{right:6%;top:18%;width:43%}
.cg{background:#0B0E0F;color:#F2F4EF;font-family:var(--sans)}
.cg-top{display:flex;align-items:center;gap:.6em;padding:1.2em 1.3em .8em;font:800 1em/1 var(--display);font-stretch:100%;font-style:italic;letter-spacing:.02em}
.cg-top img{width:1.7em;height:1.7em}
.cg-hero{position:relative;height:9.5em;overflow:hidden}
.cg-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.cg-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0B0E0F 0%,rgba(11,14,15,.1) 70%)}
.cg-hero p{position:absolute;z-index:1;left:1.3em;bottom:.7em;font:800 1.3em/1 var(--display);font-stretch:80%;font-style:italic}
.cg-hero b{color:#B9FF43}
.cg-act{display:grid;grid-template-columns:2em 1fr .8em;gap:.8em;align-items:center;margin:.7em 1em 0;padding:.95em 1em;border-radius:.9em;background:#171B1D;border:1px solid #2A3033}
.cg-act--main{background:#B9FF43;color:#0B0E0F;border-color:#B9FF43}
.cg-act b{display:block;font-size:1em}
.cg-act span{display:block;font-size:.72em;opacity:.78;margin-top:.15em}
.cg-ic{width:1.7em;height:1.7em;border-radius:50%;border:.17em solid currentColor}
.cg-ic--rec{background:radial-gradient(circle,currentColor 0 28%,transparent 30%)}
.cg-ic--route{border-radius:.45em;border-style:dashed}
.cg-chev{width:.55em;height:.55em;border-right:.17em solid currentColor;border-top:.17em solid currentColor;transform:rotate(45deg)}
.cg-sec{display:flex;justify-content:space-between;margin:1.3em 1.3em .3em !important;font-size:.66em;letter-spacing:.12em;text-transform:uppercase;color:#9AA19D}
.cg-sec span{color:#B9FF43;letter-spacing:0;text-transform:none;font-weight:700;font-size:1.2em}
.cg-route{display:grid;grid-template-columns:3.4em 1fr;gap:.8em;align-items:center;margin:0 1.3em;padding:.6em 0;border-bottom:1px solid #22282A}
.cg-route svg{width:3.4em;height:2.4em;background:#171B1D;border-radius:.45em}
.cg-route b{display:block;font-size:.86em}
.cg-route span{display:block;font-size:.7em;color:#9AA19D;margin-top:.15em}
.cg-tabs{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);padding:.9em 0 1.2em;border-top:1px solid #22282A;background:#0B0E0F;font-size:.66em;text-align:center;color:#8D948F}
.cg-tabs .is-on{color:#fff;position:relative}
.cg-tabs .is-on::before{content:"";position:absolute;left:30%;right:30%;top:-.95em;height:.25em;border-radius:0 0 .2em .2em;background:#B9FF43}
.cg--rec{background:#000}
.cg-recbar{display:flex;align-items:center;gap:.45em;padding:1.1em 1.3em;background:#FF643D;color:#0B0E0F;font:800 1.02em/1 var(--display);font-stretch:85%}
.cg-recbar i{width:.6em;height:.6em;border-radius:50%;background:#0B0E0F}
.cg-recbar b{font-variant-numeric:tabular-nums}
.cg-chips{display:flex;gap:.5em;margin-top:.9em}
.cg-chips span{border:1px solid #2A3033;border-radius:.4em;padding:.35em .65em;font-size:.72em;font-weight:600}
.cg-chips .cg-gps{color:#B9FF43;border-color:#4C6B1E}
.cg-rbody{padding:0 1.3em}
.cg-lbl{font-size:.68em;letter-spacing:.1em;text-transform:uppercase;color:#9AA19D;font-weight:600}
.cg-rbody > .cg-lbl{margin-top:1.3em !important}
.cg-big{font:800 5.6em/.95 var(--display);font-stretch:68%;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cg-big small{font-size:.28em;color:#9AA19D;font-weight:600;margin-left:.2em}
.cg-grid{display:grid;grid-template-columns:1fr 1fr;gap:1em;margin-top:1em !important;padding-top:1em;border-top:1px solid #22282A}
.cg-mid{font:800 2.25em/1 var(--display);font-stretch:70%;font-variant-numeric:tabular-nums;margin-top:.15em !important}
.cg-sm{font:800 1.6em/1 var(--display);font-stretch:72%;margin-top:.15em !important}
.cg-mid small,.cg-sm small{font-size:.4em;color:#9AA19D;margin-left:.2em}
.cg-pause{position:absolute;left:50%;bottom:1.6em;transform:translateX(-50%);width:5em;height:5em;border-radius:50%;background:#F2F4EF;color:#0B0E0F;display:grid;place-items:center;align-content:center;font-size:.74em;font-weight:700}
.cg-pause span{font-size:1.4em;letter-spacing:.1em;line-height:1}

.cg-last{margin:0 1em;padding:.9em 1em;border-radius:.9em;background:#171B1D;border:1px solid #2A3033}
.cg-last b{display:block;font-size:.9em}
.cg-last p span{display:inline-block;margin-top:.35em;font-size:.68em;font-weight:600;background:#22282A;border-radius:.3em;padding:.2em .5em}
.cg-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;margin-top:.7em}
.cg-stats i{display:block;font-style:normal;font-size:.58em;letter-spacing:.08em;text-transform:uppercase;color:#9AA19D;font-weight:600}
.cg-stats b{font:800 1.15em/1.2 var(--display);font-stretch:75%}
.cg-stats small{font-size:.55em;color:#9AA19D;margin-left:.15em}
.cg-elev{margin:1.2em 0 0;padding-top:.9em;border-top:1px solid #22282A}
.cg-elev .cg-lbl{display:flex;justify-content:space-between}
.cg-elev .cg-lbl span{color:#F2F4EF;letter-spacing:0;text-transform:none}
.cg-elev svg{display:block;width:100%;height:10.5em;margin-top:.5em}
.lu-rows{margin-top:.9em;border-top:1px solid #E2D6C6}
.lu-rows div{display:flex;justify-content:space-between;gap:1em;padding:.62em 0;border-bottom:1px solid #E2D6C6;font-size:.76em}
.lu-rows span{color:#6B5747}
.lu-rows b{font-weight:600;text-align:right}

/* ==========================================================================
   LUMA — skincare commerce (warm neutral, serif, product photography)
   ========================================================================== */
.lu-stage .wk__bg{--dim:.3}
.lu-ph1{left:7%;top:6%;width:46%}
.lu-ph2{right:6%;top:18%;width:43%}
.lu{background:#F4EEE6;color:#3B2A20;font-family:var(--sans)}
.lu-photo{position:relative;height:25em}
.lu-photo img{width:100%;height:100%;object-fit:cover}
.lu-top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:1.2em 1.3em}
.lu-logo{font:400 1.5em/1 'Instrument Serif',Georgia,serif;letter-spacing:.14em}
.lu-bag{font-size:.8em;display:inline-flex;gap:.4em;align-items:center;background:rgba(244,238,230,.85);border-radius:99em;padding:.3em .4em .3em .8em}
.lu-n{display:inline-grid;min-width:1.5em;height:1.5em;place-items:center;border-radius:99em;background:#3B2A20;color:#F4EEE6;font-weight:600;overflow:hidden}
.lu-n i{grid-area:1/1;font-style:normal}
.lu-n i:first-child:not(:only-child){opacity:0}
.lu-dots{position:absolute;left:50%;bottom:.9em;transform:translateX(-50%);display:flex;gap:.35em}
.lu-dots i{width:.4em;height:.4em;border-radius:99em;background:rgba(59,42,32,.35)}
.lu-dots .is-on{width:1.2em;background:#3B2A20}
.lu-body{padding:1em 1.3em 0}
.lu-cat{font-size:.66em;letter-spacing:.14em;text-transform:uppercase;color:#6B5747}
.lu-name{font:400 1.95em/1.02 'Instrument Serif',Georgia,serif;margin-top:.15em !important}
.lu-desc{font-size:.8em;line-height:1.45;color:#6E5A4B;margin-top:.4em !important}
.lu-sizes{position:relative;display:grid;grid-template-columns:1fr 1fr;height:2.5em;margin-top:.85em;border:1px solid #D7C6B1;border-radius:99em;font-size:.85em}
.lu-sizes span{position:relative;z-index:1;display:grid;place-items:center}
.lu-s1{color:#3B2A20}.lu-s2{color:#F4EEE6}
.lu-sel{position:absolute;top:-1px;bottom:-1px;left:50%;width:50%;border-radius:99em;background:#3B2A20}
.lu-buy{display:grid;grid-template-columns:1fr auto;gap:.8em;align-items:center;margin-top:.85em}
.lu-price{display:grid;font-size:1.08em;font-weight:600}
.lu-price span{grid-area:1/1}
.lu-p1{opacity:0}
.lu-add{display:block;text-align:center;white-space:nowrap;background:#3B2A20;color:#F4EEE6;border-radius:99em;padding:.9em 1.4em;font-size:.86em;font-weight:600}
.lu--cart{padding:0 1.3em}
.lu-carttop{display:flex;justify-content:space-between;align-items:baseline;padding:1.3em 0 .6em;font-size:.82em;color:#6B5747}
.lu-carttop .lu-logo{font-size:1.9em;letter-spacing:0;color:#3B2A20}
.lu-item{display:grid;grid-template-columns:4.8em 1fr;gap:.9em;align-items:center;padding:.75em 0;border-bottom:1px solid #E2D6C6}
.lu-item img{width:4.8em;height:4.8em;object-fit:cover;border-radius:.6em}
.lu-item b{display:block;font-size:.88em;font-weight:600}
.lu-item span{display:block;font-size:.72em;color:#6B5747;margin-top:.15em}
.lu-item em{display:block;font-style:normal;font-size:.84em;font-weight:600;margin-top:.35em}
.lu-ship{margin-top:1em;font-size:.76em;color:#6E5A4B}
.lu-ship i{display:block;height:.4em;margin-top:.45em;border-radius:99em;background:#3B2A20}
.lu-also{margin-top:1.1em !important;font-size:.66em;letter-spacing:.14em;text-transform:uppercase;color:#6B5747}
.lu-rec{display:grid;grid-template-columns:1fr 1fr;gap:.5em;margin-top:.5em}
.lu-rec img{width:100%;height:6.4em;object-fit:cover;border-radius:.6em}
.lu-sum{display:flex;justify-content:space-between;align-items:baseline;margin-top:1em;padding-top:.8em;border-top:1px solid #E2D6C6;font-size:.92em}
.lu-sum b{font-size:1.15em}
.lu--cart .lu-add{margin-top:.8em}

/* ==========================================================================
   ORBIT — operations platform (cobalt / navy / light neutral)
   ========================================================================== */
.ob-stage .wk__bg{background:
  radial-gradient(60% 70% at 85% 20%,rgba(120,150,255,.38),transparent 60%),
  radial-gradient(40% 50% at 10% 90%,rgba(80,220,200,.18),transparent 60%),
  linear-gradient(135deg,#2448D8 0%,#162C86 55%,#0D1838 100%)}
.ob-dk{left:3.5%;top:8%;width:68%}
.ob-dk .dk__vp{aspect-ratio:1040/680}
.ob-dk .dk__in{width:65em;height:42.5em;font-size:calc(100cqw / 65)}
.ob-drawer{position:absolute;right:3.5%;top:18%;width:27%;background:#fff;border-radius:14px;box-shadow:0 40px 80px -30px rgba(5,12,40,.75);overflow:hidden}
.ob-drawer__vp{container-type:inline-size}
.ob-drawer__in{font-size:calc(100cqw / 22.5);padding:1.6em 1.6em 1.4em;color:#16203A;font-family:var(--sans)}
.dk__in.ob{display:grid;grid-template-columns:13em 1fr;background:#F4F6FB;color:#16203A;font-family:var(--sans)}
.ob-side{display:flex;flex-direction:column;padding:1em .9em;background:linear-gradient(180deg,#101C40 0%,#0A1230 100%);color:#AEB8D8;font-size:.84em;line-height:1.3}
.ob-ws{display:grid;grid-template-columns:2.2em 1fr .7em;gap:.6em;align-items:center;padding:.55em .6em;border-radius:.7em;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.ob-wslogo{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:.55em;background:linear-gradient(135deg,#4F7BFF,#8A5CFF);color:#fff;font-style:normal;font-weight:800}
.ob-ws b{display:block;color:#fff;font-size:.95em}
.ob-ws span{display:block;font-size:.74em}
.ob-caret{width:.45em;height:.45em;border-right:.14em solid #7F8BB0;border-bottom:.14em solid #7F8BB0;transform:rotate(45deg);margin-top:-.2em}
.ob-search{display:flex;align-items:center;gap:.55em;margin-top:.7em;padding:.55em .7em;border-radius:.6em;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:#7F8BB0;font-size:.86em}
.ob-search kbd{margin-left:auto;font:600 .78em var(--sans);border:1px solid rgba(255,255,255,.14);border-radius:.3em;padding:.05em .4em}
.ob-grp{margin:1.2em .6em .35em !important;font-size:.68em;letter-spacing:.12em;text-transform:uppercase;color:#6F7BA3;font-weight:600}
.ob-nav{position:relative;display:grid;gap:.15em}
.ob-nav span{position:relative;z-index:1;display:flex;align-items:center;gap:.7em;height:2.4em;padding:0 .7em;border-radius:.55em;color:#C3CBE6}
.ob-nav .is-on{color:#fff;font-weight:600}
.ob-nav em,.ob-sites em{margin-left:auto;font-style:normal;font-size:.74em;background:rgba(255,255,255,.08);border-radius:99em;padding:.1em .55em;color:#C3CBE6}
.ob-pill{position:absolute;left:0;right:0;top:0;height:2.4em;border-radius:.55em;background:linear-gradient(90deg,rgba(79,123,255,.95),rgba(79,123,255,.5));box-shadow:inset 0 0 0 1px rgba(160,180,255,.35),0 .4em 1.2em -.4em rgba(79,123,255,.8)}
.obi{flex:none;width:1.05em;height:1.05em;color:currentColor}
.obi--grid{background:linear-gradient(currentColor,currentColor) 0 0/.42em .42em no-repeat,linear-gradient(currentColor,currentColor) 100% 0/.42em .42em no-repeat,linear-gradient(currentColor,currentColor) 0 100%/.42em .42em no-repeat,linear-gradient(currentColor,currentColor) 100% 100%/.42em .42em no-repeat}
.obi--list{background:linear-gradient(currentColor,currentColor) 0 .1em/100% .14em no-repeat,linear-gradient(currentColor,currentColor) 0 .46em/100% .14em no-repeat,linear-gradient(currentColor,currentColor) 0 .82em/65% .14em no-repeat}
.obi--cal{border:.13em solid currentColor;border-radius:.22em;box-shadow:inset 0 .26em 0 currentColor}
.obi--team{background:radial-gradient(circle at 32% 30%,currentColor .17em,transparent .19em),radial-gradient(circle at 72% 40%,currentColor .14em,transparent .16em),linear-gradient(currentColor,currentColor) 0 100%/100% .3em no-repeat}
.obi--chart{background:linear-gradient(currentColor,currentColor) 0 100%/.22em 45% no-repeat,linear-gradient(currentColor,currentColor) 50% 100%/.22em 85% no-repeat,linear-gradient(currentColor,currentColor) 100% 100%/.22em 60% no-repeat}
.obi--search{width:.8em;height:.8em;border:.13em solid currentColor;border-radius:50%}
.ob-sites{display:grid;gap:.1em}
.ob-sites span{display:flex;align-items:center;gap:.6em;height:2.2em;padding:0 .7em;color:#C3CBE6}
.dot{width:.5em;height:.5em;border-radius:50%;flex:none}
.dot--ok{background:#3CCB7F;box-shadow:0 0 0 .2em rgba(60,203,127,.18)}
.dot--warn{background:#F2A23A;box-shadow:0 0 0 .2em rgba(242,162,58,.18)}
.ob-me{margin-top:auto;display:grid;grid-template-columns:2.2em 1fr;gap:.6em;align-items:center;padding:.8em .5em 0;border-top:1px solid rgba(255,255,255,.08)}
.ob-me b{display:block;color:#fff;font-size:.92em}
.ob-me span{display:block;font-size:.74em}
.av--me{width:2.2em !important;height:2.2em !important;margin:0 !important;font-size:.8em !important;background:#FFD8A8 !important;color:#8A4208 !important}
.ob-main{padding:1.5em 1.6em;min-width:0}
.ob-head{display:flex;justify-content:space-between;align-items:flex-start}
.ob-h{font-size:1.55em;font-weight:700;letter-spacing:-.01em}
.ob-sub{font-size:.8em;color:#5B6683;margin-top:.2em !important}
.ob-seg{display:flex;padding:.2em;background:#fff;border:1px solid #E2E6F0;border-radius:.6em;font-size:.78em}
.ob-seg span{padding:.45em .9em;border-radius:.45em;color:#5B6683}
.ob-seg .is-on{background:#2F5BEA;color:#fff}
.ob-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.8em;margin:1.2em 0}
.ob-kpis > div{background:#fff;border:1px solid #E2E6F0;border-radius:.8em;padding:.9em 1em}
.ob-kpis span{font-size:.74em;color:#5B6683}
.ob-kpis b{display:block;font-size:1.9em;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums}
.ob-kpis small{font-size:.7em;color:#5B6683}
.ob-k-blk b{color:#B45309}.ob-k-late b{color:#C62828}
.ob-swap{display:grid !important}
.ob-swap i{grid-area:1/1;font-style:normal}
.ob-swap i:first-child{opacity:0}
.ob-body{display:grid;grid-template-columns:1fr 15em;gap:1em;align-items:start}
.ob-col{display:grid;gap:1em;min-width:0}
.ob-table{background:#fff;border:1px solid #E2E6F0;border-radius:.8em;overflow:hidden}
.ob-tr{display:grid;grid-template-columns:2.5fr 1fr .9fr .6fr 1fr;align-items:center;gap:.6em;padding:.7em 1em;border-top:1px solid #EEF1F6;font-size:.78em;white-space:nowrap}
.ob-tr > span{overflow:hidden;text-overflow:ellipsis}
.ob-tr b{color:#2F5BEA;font-weight:600;margin-right:.35em}
.ob-th{border-top:0;background:#F8F9FC;font-size:.68em;letter-spacing:.06em;text-transform:uppercase;color:#5B6683;font-weight:600}
.ob-focus{background:#F3F6FF;box-shadow:inset 3px 0 0 #2F5BEA}
.ob-tr > span:last-child{display:grid}
.ob-tr > span:last-child .pill{grid-area:1/1;justify-self:start}
.av{display:inline-grid;place-items:center;width:1.8em;height:1.8em;margin-right:.45em;border-radius:50%;background:#DCE4FF;color:#2F5BEA;font-style:normal;font-size:.72em;font-weight:700;vertical-align:middle}
.av--b{background:#FFE7D1;color:#A4500E}.av--c{background:#DFF2E6;color:#1E7A4C}.av--d{background:#EDE3FF;color:#6A3FC2}
.pill{display:inline-flex;align-items:center;padding:.25em .7em;border-radius:99em;font-style:normal;font-size:.9em;font-weight:600;background:#EEF0F5;color:#4A5470}
.pill--blk{background:#FFF1E6;color:#B45309}.pill--prog{background:#E6EDFF;color:#2F5BEA}
.pill--late{background:#FDECEC;color:#C62828}.pill--done{background:#E7F6EE;color:#1E7A4C}
.ob-p1{opacity:0}
.ob-week{background:#fff;border:1px solid #E2E6F0;border-radius:.8em;padding:.9em 1em}
.ob-week__h{display:flex;justify-content:space-between;font-size:.8em;font-weight:700}
.ob-week__h span{font-weight:400;color:#5B6683}
.ob-days{display:grid;grid-template-columns:repeat(7,1fr);gap:.5em;margin-top:.7em;align-items:end}
.ob-days span{display:grid;justify-items:center;gap:.25em;font-size:.68em;color:#5B6683}
.ob-days i{width:100%;height:calc(var(--n) * .9em + .25em);border-radius:.3em;background:#C9D5FF;transform-origin:bottom}
.ob-days .is-today i{background:#2F5BEA}
.ob-days .is-today{color:#16203A;font-weight:700}
.ob-days b{font-size:1.1em;color:#16203A;font-variant-numeric:tabular-nums}
.ob-card{background:#fff;border:1px solid #E2E6F0;border-radius:.8em;padding:1em 1.1em;color:#16203A;font-family:var(--sans)}
.ob-card__h{display:flex;justify-content:space-between;align-items:baseline;font-size:.88em;font-weight:700}
.ob-card__h span{font-weight:400;color:#5B6683;font-size:.9em}
.ob-cap{list-style:none;padding:0;margin-top:.6em !important}
.ob-cap li{display:grid;grid-template-columns:4.4em 1fr 4.4em;gap:.6em;align-items:center;padding:.42em 0;font-size:.76em}
.ob-cap i{position:relative;height:.5em;border-radius:99em;background:#E8ECF5;overflow:hidden}
.ob-cap i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 100%);border-radius:inherit;background:#2F5BEA;transform-origin:left}
.ob-cap .is-over i::after{background:#E07A1F}
.ob-cap b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.ob-cap .is-over b{color:#A4500E}
.ob-hint{margin-top:.7em !important;padding:.6em .75em;border-radius:.5em;background:#FFF6EC;color:#8A4208;font-size:.72em;line-height:1.4}
.ob-dh{font-size:1.35em;font-weight:700;line-height:1.2;margin-top:.25em !important}
.ob-dstat{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.7em;margin:.9em 0 !important}
.ob-dstat .pill{grid-row:1;grid-column:1;font-size:.82em}
.ob-dstat span{grid-row:1;grid-column:2;font-size:.76em;color:#5B6683}
.ob-dstat span b{color:#16203A}
.ob-blocker{background:#E7F6EE;color:#1E5E3F;border-radius:.6em;padding:.8em .9em;font-size:.8em;line-height:1.4}
.ob-blocker b{display:block}
.ob-dl{display:flex;justify-content:space-between;margin-top:1.2em !important;font-size:.72em;letter-spacing:.08em;text-transform:uppercase;color:#5B6683;font-weight:600}
.ob-check{list-style:none;padding:0;margin-top:.4em !important}
.ob-check li{position:relative;padding:.42em 0 .42em 1.7em;font-size:.82em}
.ob-check li::before{content:"";position:absolute;left:0;top:.5em;width:1em;height:1em;border:1.5px solid #C5CCE0;border-radius:.25em}
.ob-check li.ok{color:#5B6683}
.ob-check li.ok::before{background:#2F5BEA;border-color:#2F5BEA}
.ob-check li.ok::after{content:"";position:absolute;left:.33em;top:.66em;width:.3em;height:.55em;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ob-act{list-style:none;padding:0;margin-top:.3em !important}
.ob-act li{padding:.55em 0;border-top:1px solid #EEF1F6;font-size:.78em;line-height:1.4}
.ob-act b{color:#5B6683;font-weight:600;margin-right:.4em;font-variant-numeric:tabular-nums}

/* ==========================================================================
   Tempuh — endurance event platform (ink / forest / acid lime / warm paper)
   ========================================================================== */
.tp-stage .wk__bg{background:
  repeating-radial-gradient(circle at 70% 120%,transparent 0 26px,rgba(198,227,106,.07) 26px 27px),
  linear-gradient(150deg,#245B4F 0%,#17211F 70%)}
.tp-dk{left:4%;top:7%;width:69%}
.tp-ph{right:4.5%;top:9%;width:21%}
.tp{background:#F7F5F0;color:#17211F;font-family:var(--sans)}
.tp-bar{display:flex;align-items:center;gap:1.1em;height:4em;padding:0 1.8em;border-bottom:1px solid #E1E4DE;background:#fff;font-size:.85em;white-space:nowrap}
.tp-logo{display:inline-flex;align-items:center;gap:.4em;font:800 1.25em/1 var(--display);letter-spacing:-.02em}
.tp-logo i{width:.85em;height:.85em;border-radius:.2em;background:#17211F}
.tp-ev{color:#626964}.tp-ev b{color:#17211F;font-weight:600}
.tp-live{margin-left:auto;display:inline-flex;align-items:center;gap:.4em;background:#17211F;color:#C6E36A;border-radius:99em;padding:.35em .85em;font-size:.82em;font-weight:700}
.tp-live i{width:.5em;height:.5em;border-radius:50%;background:#C6E36A}
.tp-delay{background:#E8EEE8;color:#245B4F;border-radius:99em;padding:.35em .8em;font-size:.82em;font-weight:600}
.tp-upd{color:#626964;font-size:.82em}
.tp-grid{display:grid;grid-template-columns:1fr 26em;height:42.25em}
.tp-map{position:relative;overflow:hidden}
.tp-map svg{width:100%;height:100%;display:block}
.tp-cps circle{fill:#fff;stroke:#17211F;stroke-width:3}
.tp-cps circle:first-child{fill:#17211F}
.tp-cpl text{font:600 13px var(--sans);fill:#17211F;paint-order:stroke;stroke:#E8EEE8;stroke-width:5px;stroke-linejoin:round}
.tp-riders circle{stroke:#17211F;stroke-width:2.5}
.tp-r1,.tp-r2{fill:#C6E36A}.tp-r3{fill:#E8A33D}.tp-r4{fill:#A9B0AA}
.tp-legend{position:absolute;left:1.2em;bottom:1.2em;display:flex;gap:1em;background:#fff;border:1px solid #E1E4DE;border-radius:.6em;padding:.55em .85em;font-size:.76em}
.tp-legend span{display:inline-flex;align-items:center;gap:.4em}
.tp-dot{width:.7em;height:.7em;border-radius:50%;border:2px solid #17211F}
.tp-dot--live{background:#C6E36A}.tp-dot--att{background:#E8A33D}.tp-dot--stale{background:#A9B0AA}
.tp-list{background:#fff;border-left:1px solid #E1E4DE;padding:1.2em 1.1em;overflow:hidden}
.tp-lh{display:flex;justify-content:space-between;align-items:baseline;font-size:.9em;font-weight:700;margin-bottom:.5em !important}
.tp-lh span{font-weight:400;color:#626964;font-size:.82em}
.tp-row{display:grid;grid-template-columns:3em 1fr auto;gap:.35em .8em;align-items:center;padding:.75em .7em;border-bottom:1px solid #EEF0EC;font-size:.84em}
.tp-row b{color:#626964;font-variant-numeric:tabular-nums;font-weight:600}
.tp-row p{font-weight:600}
.tp-row p span{display:block;font-weight:400;color:#626964;font-size:.84em;margin-top:.1em}
.tp-row i{grid-column:1/-1;position:relative;height:.3em;border-radius:99em;background:#E8EEE8;overflow:hidden}
.tp-row i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--p) * 100%);background:#245B4F;border-radius:inherit;transform-origin:left}
.tp-row--sel{background:#F2F6F1;border-radius:.6em;box-shadow:inset 0 0 0 1px #CFE0D5}
.tp-b{font-style:normal;font-size:.76em;font-weight:700;padding:.25em .65em;border-radius:99em;background:#ECEEEA;color:#4E5651;white-space:nowrap}
.tp-b--live{background:#17211F;color:#C6E36A}
.tp-b--att{background:#FDF0DC;color:#7A4A00}
.tp-b--stale{background:#ECEEEA;color:#4E5651}
.tp-cp{margin-top:1.1em}
.tp-cprow{display:flex;gap:.3em}
.tp-cprow span{flex:1;text-align:center;font-size:.74em;font-weight:600;padding:.5em 0;border-radius:.3em;background:#E8EEE8;color:#245B4F}
.tp-cprow .is-on{background:#245B4F;color:#fff}
.tp-mbody{padding:0 1.3em}
.tp-mtop{display:flex;justify-content:space-between;align-items:center;padding:1.1em 1.3em;font-size:.82em;background:#fff;border-bottom:1px solid #E1E4DE}
.tp-mtop .tp-logo{font-size:1.15em}
.tp-mhero{position:relative;height:10.5em}
.tp-mhero svg{width:100%;height:100%;display:block}
.tp-open{position:absolute;left:1.1em;bottom:.9em;background:#E8EEE8;color:#245B4F;border-radius:99em;padding:.3em .75em;font-size:.72em;font-weight:700}
.tp-mk{margin-top:1em !important;font-size:.68em;letter-spacing:.12em;text-transform:uppercase;color:#626964}
.tp-mh{font:800 1.75em/1.1 var(--display);margin-top:.15em !important}
.tp-by{font-size:.78em;color:#626964;margin-top:.3em !important}
.tp-cats{display:grid;grid-template-columns:1fr 1fr;gap:.6em;margin-top:1em}
.tp-cats > div{border:1px solid #E1E4DE;border-radius:.8em;padding:.8em;background:#fff}
.tp-cats p:first-child{display:flex;justify-content:space-between;align-items:baseline;font-size:.9em}
.tp-cats p:first-child span{font-size:.72em;color:#626964}
.tp-km{font:800 1.3em/1.1 var(--display);margin:.3em 0 .15em !important}
.tp-q{font-size:.66em;color:#626964}
.tp-cats i{display:block;position:relative;height:.3em;margin-top:.45em;border-radius:99em;background:#E8EEE8;overflow:hidden}
.tp-cats i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--q) * 100%);background:#245B4F}
.tp-btn{display:block;text-align:center;background:#245B4F;color:#fff;border-radius:.6em;padding:.95em;margin-top:1em;font-size:.88em;font-weight:600}
.tp-note{font-size:.7em;color:#626964;text-align:center;margin-top:.6em !important}

/* ==========================================================================
   Small screens: crops and sizes prepared for phones
   ========================================================================== */
@media (max-width:720px){
  .wk__stage{border-radius:18px}
  .wk--full .wk__art,.wk--half .wk__art{aspect-ratio:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:22px 16px 26px}
  .wk__art .dk,.wk__art .ph,.wk__art .ob-drawer{position:relative;left:auto;right:auto;top:auto}
  .fm-dk,.ob-dk,.tp-dk{width:100%}
  .fm-dk .dk__vp{aspect-ratio:1/1}
  .fm-dk .dk__in{font-size:calc(100cqw / 38)}
  .ob-dk .dk__vp{aspect-ratio:1/1.05}
  .ob-dk .dk__in{font-size:calc(100cqw / 34)}
  .tp-dk .dk__vp{aspect-ratio:1/1.08}
  .tp-dk .dk__in{font-size:calc(100cqw / 30);left:-45em}
  .fm-ph,.tp-ph{width:62%;margin:-36% 4% 0 auto}
  .ob-drawer{width:88%;margin:-30% 0 0 auto}
  .cg-ph1,.lu-ph1{width:78%}
  .cg-ph2,.lu-ph2{width:70%;margin:-62% 0 0 auto}
}

/* ==========================================================================
   Motion system (v3.4)
   Tokens live in site.css :root (--ease-out, --d-fb 180ms, --d-comp 320ms, --d-rev 760ms, --stg 80ms).
   Hierarchy: hero opens (≈1.2s) → each showcase plays one primary motion → other sections only fade up.
   Showcases: one primary motion each (see v3.5 block); frames and copy are static.
   Defaults are the FINAL composition; start states exist only under html.motion before .is-on.
   ========================================================================== */

/* ---------- hero opening: eyebrow → masked lines → sub → CTAs ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes lineUp{from{opacity:0;transform:translateY(40%)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.hl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hl__i{display:block}
.motion .hero__k{animation:fadeUp 600ms var(--ease-out) both}
.motion .hero__title .hl__i{animation:lineUp 820ms var(--ease-out) both;animation-delay:120ms}
.motion .hero__title .hl + .hl .hl__i{animation-delay:200ms}
.motion .hero__sub{animation:fadeUp 700ms var(--ease-out) 380ms both}
.motion .hero__cta{animation:fadeUp 700ms var(--ease-out) 460ms both}
.motion .bg-toggle{animation:fadeIn 600ms var(--ease-out) 700ms both}

/* ---------- showcase (v3.5): one primary motion each ----------
   Trace finding (v3.4.1): hiding whole stages until .is-on forced ~13 new layers + full raster at the flip
   (51–87 ms activation wait). Frames, photos and copy are now static from the start, so they raster ahead
   of the viewport like any content; only one element per showcase moves, plus the small caption fade. */
.motion .wk .wk__info{transition:opacity 700ms var(--ease-out) 200ms,transform 700ms var(--ease-out) 200ms}
.motion .wk:not(.is-on) .wk__info{opacity:0;transform:translateY(12px)}

/* Architecture: the photo settles (tiny zoom-out) */
.motion .wk--forma .fm-photo{transition:transform 1500ms var(--ease-out) 80ms}
.motion .wk--forma:not(.is-on) .fm-photo{transform:scale(1.045)}

/* Commerce: the cart screen follows the product screen */
.motion .wk--luma .lu-ph2{transition:opacity 600ms var(--ease-out) 200ms,transform 800ms var(--ease-out) 200ms}
.motion .wk--luma:not(.is-on) .lu-ph2{opacity:0;transform:translateY(24px)}

/* Operations: the detail panel slides in */
.motion .wk--orbit .ob-drawer{transition:opacity 600ms var(--ease-out) 200ms,transform 800ms var(--ease-out) 200ms}
.motion .wk--orbit:not(.is-on) .ob-drawer{opacity:0;transform:translateX(16px)}

/* Cantigi: the route traces draw (stroke only, no new layers) */
.cg-trace{stroke-dasharray:1;stroke-dashoffset:0}
.motion .wk--cantigi .cg-trace{transition:stroke-dashoffset 1200ms var(--ease-out) 200ms}
.motion .wk--cantigi:not(.is-on) .cg-trace{stroke-dashoffset:1}

/* Tempuh: rider positions appear along the (static) route */
.tp-riders circle{transform-box:fill-box;transform-origin:center}
.motion .wk--tempuh .tp-riders circle{transition:opacity 320ms var(--ease-out),transform 420ms var(--ease-out)}
.motion .wk--tempuh:not(.is-on) .tp-riders circle{opacity:0;transform:scale(.4)}
.motion .wk--tempuh .tp-riders .tp-r1{transition-delay:200ms}
.motion .wk--tempuh .tp-riders .tp-r2{transition-delay:280ms}
.motion .wk--tempuh .tp-riders .tp-r3{transition-delay:360ms}
.motion .wk--tempuh .tp-riders .tp-r4{transition-delay:440ms}

/* ---------- closing: contact headline → lead → CTA; ambient aura settles once ---------- */
/* closing ambience: one static layer of soft gradients echoing the hero colours */
/* v3.7: no logo mark and no lime glow behind the headline; two soft hero colours kept to the sides */
.contact__aura{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(34% 40% at 8% 14%,rgba(22,74,58,.34),transparent 70%),
  radial-gradient(34% 44% at 94% 20%,rgba(18,34,86,.4),transparent 70%)}
/* static on purpose: animating this full-section layer caused a ~300 ms raster stall when it approached the viewport */
.motion .contact .contact__head > *{transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.motion .contact:not(.is-on) .contact__head > :not(h2){opacity:0;transform:translateY(12px)}
.motion .contact .contact__head > h2 .hl__i{transition:opacity 820ms var(--ease-out) 80ms,transform 820ms var(--ease-out) 80ms}
.motion .contact:not(.is-on) .contact__head > h2 .hl__i{opacity:0;transform:translateY(40%)}
.motion .contact .contact__head > .sec__lead{transition-delay:240ms}
.motion .contact .contact__head > .contact__cta{transition-delay:320ms}
.motion .contact .form{transition:opacity 600ms var(--ease-out) 420ms}
.motion .contact:not(.is-on) .form{opacity:0}

/* ---------- layer wrappers (parallax removed in v3.5: ±14 px added little and kept main-thread work alive) ---------- */
.lyr{position:absolute;inset:0;pointer-events:none}
@media (max-width:720px){ .lyr{display:contents} }