@font-face{font-family:'Righteous';src:url('/assets/fonts/righteous-v18-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Righteous';src:url('/assets/fonts/righteous-v18-latin-ext.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Pridi';src:url('/assets/fonts/pridi-v15-thai-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Pridi';src:url('/assets/fonts/pridi-v15-latin-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Pridi';src:url('/assets/fonts/pridi-v15-thai-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap;unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Pridi';src:url('/assets/fonts/pridi-v15-latin-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Pridi';src:url('/assets/fonts/pridi-v15-thai-600.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap;unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Pridi';src:url('/assets/fonts/pridi-v15-latin-600.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Pridi';src:url('/assets/fonts/pridi-v15-thai-700.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap;unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Pridi';src:url('/assets/fonts/pridi-v15-latin-700.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Mitr';src:url('/assets/fonts/mitr-v13-thai-600.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap;unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Mitr';src:url('/assets/fonts/mitr-v13-latin-600.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#ece7db;color:#000;font-family:var(--font-body,'Pridi',Georgia,serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#B45309;text-decoration:none}
a:hover{color:#D97706}
button{font-family:inherit;cursor:pointer}
::selection{background:#000;color:#fff}

@keyframes sgMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sgRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes sgDash{to{stroke-dashoffset:-24}}
@keyframes sgPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
@keyframes sgSpin{to{transform:rotate(360deg)}}
@keyframes sgTwinkle{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes sgHeroBreathe{0%,100%{transform:scale(1.012)}50%{transform:scale(1.038)}}
@keyframes sgHeroScan{to{background-position:0 12px,12px 0,0 0}}
@keyframes sgHeroAurora{
  0%{opacity:.72;transform:translate3d(-2.5%,1.5%,0) scale(1.02)}
  48%{opacity:1;transform:translate3d(2%,-1.5%,0) scale(1.08)}
  100%{opacity:.82;transform:translate3d(3.5%,1%,0) scale(1.04)}
}
@keyframes sgHeroPrism{
  0%{opacity:.48;transform:translate3d(-3%,1%,0) scale(1.03)}
  50%{opacity:.7;transform:translate3d(1.5%,-1%,0) scale(1.07)}
  100%{opacity:.54;transform:translate3d(3%,1%,0) scale(1.04)}
}
@keyframes sgBrandFieldReveal{from{opacity:0}to{opacity:1}}
@keyframes sgBlink{0%,100%{opacity:1}50%{opacity:.15}}
/* Chrome powering on after the film settles. Hard cuts rather than a smooth
   ramp, so it reads as a display striking rather than a fade. */
@keyframes sgStrike{0%{opacity:0}14%{opacity:.9}22%{opacity:.1}34%{opacity:.75}44%{opacity:.18}58%{opacity:1}68%{opacity:.42}100%{opacity:1}}
@keyframes sgWhoosh{from{opacity:0;translate:var(--sg-reveal-x) 0}to{opacity:1;translate:0 0}}

:where(a,button):focus-visible{outline:2px solid #E0922F;outline-offset:3px}
.sg-assessment-cta[hidden]{display:none!important}

/* Full-width portal hero: the film plays sharp once as the cinematic intro,
   then the canvas re-renders the pre-logo segment as a living pixel mosaic. */
.sg-hero-loop{position:relative;isolation:isolate;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#080807;aspect-ratio:16/9;max-height:calc(100vh - var(--site-nav-height));box-shadow:inset 0 0 0 1px rgba(112,226,255,.12)}
.sg-hero-loop-picture{position:absolute;inset:0;display:block;z-index:0;opacity:1;transition:opacity .7s ease}
#sg-hero-loop-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.18) contrast(1.04) brightness(1.04);animation:sgHeroBreathe 14s ease-in-out infinite;will-change:transform}
.sg-hero-loop-video{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transform:scale(1.006);filter:saturate(1.16) contrast(1.04) brightness(.96);transition:opacity .72s ease,transform .9s cubic-bezier(.16,1,.3,1),filter .65s ease;will-change:opacity,transform,filter}
.sg-hero-loop.is-video-ready .sg-hero-loop-picture{opacity:0}
.sg-hero-loop.is-video-ready .sg-hero-loop-video{opacity:1}
/* Two-film choreography: the logo film owns the cinematic intro, the no-logo
   film owns the settled loop. These rules come after is-video-ready on purpose. */
.sg-hero-intro-video{position:fixed;inset:0;z-index:70;width:100vw;height:100vh;height:100dvh;max-height:none;object-fit:contain;object-position:center;opacity:0;visibility:hidden;transform:none;background:#000;pointer-events:none;transition:opacity .72s ease,visibility 0s .72s}
.sg-intro-finish{position:fixed;inset:0;z-index:71;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .72s ease,visibility 0s .72s}
.sg-intro-finish>span{position:absolute;inset:0;display:block;pointer-events:none}
.sg-intro-wash{z-index:1;background:radial-gradient(circle at 48% 44%,rgba(75,223,232,.12),transparent 40%),linear-gradient(125deg,rgba(98,71,179,.1),transparent 46%,rgba(43,196,205,.08));mix-blend-mode:screen}
.sg-intro-glow{z-index:2;background:radial-gradient(circle at 50% 48%,rgba(92,218,246,.5),rgba(60,150,193,.18) 22%,transparent 54%);opacity:.1875;mix-blend-mode:screen;filter:blur(22px);transform:scale(.92)}
.sg-intro-vignette{z-index:3;background:radial-gradient(ellipse 67% 75% at 50% 49%,transparent 58%,rgba(8,30,46,.12) 66%,rgba(2,10,22,.68) 86%,#000 100%);opacity:.75}
.sg-intro-bars{position:fixed;inset:0;z-index:71;overflow:hidden;visibility:hidden;pointer-events:none}
.sg-intro-bar{position:absolute;display:block;background:#000;will-change:transform}
.sg-intro-bar-top,.sg-intro-bar-bottom{left:0;width:100%;height:max(0px,calc((100dvh - 56.25vw)/2 + 1px))}
.sg-intro-bar-top{top:0}
.sg-intro-bar-bottom{bottom:0}
.sg-intro-bar-left,.sg-intro-bar-right{top:0;height:100%;width:max(0px,calc((100vw - 177.7778dvh)/2 + 1px))}
.sg-intro-bar-left{left:0}
.sg-intro-bar-right{right:0}
@media (max-width:699.98px) and (orientation:portrait){
  /* The portrait film carries its own blurred fill above and below the 16:9
     scene. Cover turns that fill into a full-bleed backdrop instead of leaving
     dead black letterbox voids, and the ~9% side crop stays clear of the
     wordmark in every scene. */
  .sg-hero-intro-video{object-fit:cover}
  /* Cover leaves no gap for the aperture bars to mask; on phones the handoff
     is a crossfade with a gentle push-out instead. */
  .sg-intro-bars{display:none}
  html.sg-live .sg-hero-intro-video{transform:scale(1.04);transition:opacity .45s cubic-bezier(.23,1,.32,1),transform 1.05s cubic-bezier(.16,1,.3,1),visibility 0s .45s}
  html.sg-live .sg-intro-finish{transition:opacity .45s cubic-bezier(.23,1,.32,1),visibility 0s .45s}
  .sg-intro-controls{bottom:max(8px,calc(env(safe-area-inset-bottom) + 8px))}
  .site-hero>.sg-hero-motion-toggle{bottom:max(8px,calc(env(safe-area-inset-bottom) + 8px))}
}
.sg-hero-loop.is-intro .sg-hero-loop-video{opacity:0}
html.sg-intro-pending .sg-hero-intro-video,html.sg-intro .sg-hero-intro-video{opacity:1;visibility:visible;filter:saturate(1.24) contrast(1.04) brightness(1.03) hue-rotate(-7deg);transition:none}
html.sg-intro-pending .sg-intro-finish,html.sg-intro .sg-intro-finish{opacity:1;visibility:visible;transition:none}
html.sg-intro-pending .sg-intro-bars,html.sg-intro .sg-intro-bars,html.sg-intro-opening .sg-intro-bars{visibility:visible}
html.sg-live .sg-hero-intro-video{opacity:0;visibility:hidden;transition:opacity .72s ease,visibility 0s .72s}
html.sg-live .sg-intro-finish{opacity:0;visibility:hidden;transition:opacity .72s ease,visibility 0s .72s}
html.sg-intro-opening .sg-intro-bar-top{animation:sgIntroBarTopOpen 1.05s cubic-bezier(.65,0,.18,1) both}
html.sg-intro-opening .sg-intro-bar-bottom{animation:sgIntroBarBottomOpen 1.05s cubic-bezier(.65,0,.18,1) both}
html.sg-intro-opening .sg-intro-bar-left{animation:sgIntroBarLeftOpen 1.05s cubic-bezier(.65,0,.18,1) both}
html.sg-intro-opening .sg-intro-bar-right{animation:sgIntroBarRightOpen 1.05s cubic-bezier(.65,0,.18,1) both}
@keyframes sgIntroBarTopOpen{from{transform:translateY(0)}to{transform:translateY(-110%)}}
@keyframes sgIntroBarBottomOpen{from{transform:translateY(0)}to{transform:translateY(110%)}}
@keyframes sgIntroBarLeftOpen{from{transform:translateX(0)}to{transform:translateX(-110%)}}
@keyframes sgIntroBarRightOpen{from{transform:translateX(0)}to{transform:translateX(110%)}}
/* The intro is a separate fixed overlay. The settled hero keeps final flow
   geometry underneath it, eliminating the fixed-to-flow handoff reflow. */
.sg-hero-loop::before{content:"";position:absolute;inset:-8%;z-index:2;pointer-events:none;background:radial-gradient(circle at 18% 46%,rgba(255,108,106,.42) 0 11%,rgba(255,77,166,.25) 22%,transparent 40%),radial-gradient(circle at 49% 52%,rgba(255,195,76,.34) 0 9%,rgba(165,92,255,.32) 25%,transparent 43%),radial-gradient(circle at 78% 38%,rgba(84,229,255,.5) 0 12%,rgba(79,126,255,.28) 27%,transparent 46%);mix-blend-mode:screen;filter:blur(12px) saturate(1.28);animation:sgHeroAurora 14s ease-in-out infinite alternate;transition:opacity .35s ease;will-change:transform,opacity}
.sg-hero-loop::after{content:"";position:absolute;inset:-7%;z-index:4;pointer-events:none;background:radial-gradient(circle at 49% 51%,rgba(255,206,97,.74) 0 7%,transparent 23%),linear-gradient(104deg,rgba(255,94,104,.88) 0%,rgba(255,84,190,.72) 30%,rgba(145,102,255,.78) 59%,rgba(64,226,255,.94) 100%);-webkit-mask-image:radial-gradient(ellipse at 53% 49%,#000 0 18%,rgba(0,0,0,.92) 44%,rgba(0,0,0,.5) 72%,transparent 96%);mask-image:radial-gradient(ellipse at 53% 49%,#000 0 18%,rgba(0,0,0,.92) 44%,rgba(0,0,0,.5) 72%,transparent 96%);mix-blend-mode:color;filter:saturate(1.4);animation:sgHeroPrism 18s ease-in-out infinite alternate;will-change:transform,opacity}
.sg-hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(4,4,3,.2) 0%,rgba(4,4,3,0) 27%,rgba(4,4,3,0) 47%,rgba(4,4,3,.78) 100%),linear-gradient(100deg,rgba(4,4,3,.46) 0%,rgba(4,4,3,.04) 58%)}
#sg-hero-rain{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.sg-hero-brand-overlay{position:absolute;left:69%;top:31%;z-index:5;width:clamp(480px,48vw,720px);aspect-ratio:4/3;pointer-events:none;transform:translate(-50%,-50%);opacity:1;contain:layout paint style}
.sg-hero-brand-source,.sg-hero-brand-particles,.sg-hero-brand-proportions,.sg-hero-brand-solid{position:absolute;inset:0;display:block;width:100%;height:100%}
/* The vector is the accessible sampling and fallback source. Once its canvas
   is ready it becomes visually transparent and drops its costly mask/filter,
   but remains available to assistive technology. The coral, including its
   pedestal, is then made only from square pixels, while the two deliberate
   solid layers below own the proportion geometry and the wordmark. */
.sg-hero-brand-source{object-fit:contain;opacity:.82;filter:drop-shadow(1px 2px 1px rgba(0,0,0,.92));transition:opacity .4s ease;-webkit-mask-image:repeating-linear-gradient(0deg,#000 0 1px,rgba(0,0,0,.22) 1px 2px,transparent 2px 4px);mask-image:repeating-linear-gradient(0deg,#000 0 1px,rgba(0,0,0,.22) 1px 2px,transparent 2px 4px)}
.sg-hero-brand-particles{z-index:1;filter:drop-shadow(1px 2px 1px rgba(0,0,0,.78)) drop-shadow(0 0 5px rgba(238,205,156,.24))}
.sg-hero-brand-proportions{z-index:2;object-fit:contain;opacity:.96;filter:drop-shadow(0 1px 1px rgba(0,0,0,.88)) drop-shadow(0 0 4px rgba(240,198,145,.28))}
.sg-hero-brand-solid{z-index:2;object-fit:contain;clip-path:inset(64.5% 12% 8% 12%);opacity:0;filter:drop-shadow(0 2px 1px rgba(0,0,0,.96)) drop-shadow(0 0 8px rgba(4,4,3,.74));transition:opacity .34s ease}
.sg-hero-brand-overlay[data-brand-particles="ready"] .sg-hero-brand-source{opacity:0;filter:none;-webkit-mask-image:none;mask-image:none}
.sg-hero-brand-overlay[data-brand-particles="ready"][data-brand-settled="true"] .sg-hero-brand-solid{opacity:1}
.sg-hero-brand-overlay[data-brand-particles="ready"][data-brand-settled="true"][data-brand-pointer="active"] .sg-hero-brand-solid{-webkit-mask-image:radial-gradient(circle var(--sg-brand-pointer-radius,58px) at var(--sg-brand-pointer-x,50%) var(--sg-brand-pointer-y,72%),transparent 0 48%,rgba(0,0,0,.16) 62%,#000 100%);mask-image:radial-gradient(circle var(--sg-brand-pointer-radius,58px) at var(--sg-brand-pointer-x,50%) var(--sg-brand-pointer-y,72%),transparent 0 48%,rgba(0,0,0,.16) 62%,#000 100%)}
.sg-hero-brand-overlay[data-brand-particles="fallback"] .sg-hero-brand-source{opacity:.94;-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 2px 1px rgba(0,0,0,.9)) drop-shadow(0 0 12px rgba(0,0,0,.52))}
.sg-hero-brand-overlay[data-brand-particles="fallback"] .sg-hero-brand-solid{display:none}
.sg-hero-brand-fallback{position:absolute;inset:26% 10%;display:none;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#f6f2e9;text-align:center;text-shadow:0 2px 2px #000,0 0 14px rgba(240,192,122,.4)}
.sg-hero-brand-fallback strong{font-family:'Righteous',sans-serif;font-size:clamp(22px,4.3vw,42px);letter-spacing:.06em}
.sg-hero-brand-fallback em{font-family:'Pridi',serif;font-size:clamp(16px,3.2vw,30px);font-style:normal;letter-spacing:.12em;color:#edc990}
.sg-hero-brand-overlay.is-source-error .sg-hero-brand-source,.sg-hero-brand-overlay.is-source-error .sg-hero-brand-particles,.sg-hero-brand-overlay.is-source-error .sg-hero-brand-proportions,.sg-hero-brand-overlay.is-source-error .sg-hero-brand-solid{display:none}
.sg-hero-brand-overlay.is-source-error .sg-hero-brand-fallback{display:flex}
html.sg-intro-pending .sg-hero-brand-overlay,html.sg-intro .sg-hero-brand-overlay{opacity:0}
html.sg-live .sg-hero-brand-overlay{animation:sgBrandFieldReveal .48s steps(4,end) .64s both}
.sg-hero-loop-scan{position:absolute;inset:0;z-index:5;pointer-events:none;background-color:transparent;background-image:repeating-linear-gradient(0deg,rgba(123,229,255,.032) 0 1px,transparent 1px 5px),repeating-linear-gradient(90deg,rgba(189,131,255,.026) 0 1px,transparent 1px 9px),radial-gradient(ellipse at 50% 49%,transparent 22%,rgba(4,4,3,.4) 100%);background-blend-mode:screen,screen,normal;animation:sgHeroScan 1.65s steps(6,end) infinite;transition:background-color .5s ease,box-shadow .5s ease}
.sg-hero-loop.is-loop-seam .sg-hero-loop-scan{background-color:rgba(3,3,3,.22)}
.sg-hero-loop.is-motion-static .sg-hero-loop-video,.sg-hero-loop.is-motion-static #sg-hero-rain{display:none}
.sg-hero-loop.is-motion-static .sg-hero-loop-picture{opacity:1}
.sg-hero-loop.is-motion-static .sg-hero-loop-scan{animation:none}
.site-hero.is-motion-static .sg-hero-motion-toggle{display:none}

/* Portal copy sits on the film, above the mosaic and scan texture. */
.sg-hero-copy{position:absolute;left:clamp(20px,5vw,64px);right:clamp(20px,5vw,64px);bottom:clamp(22px,4.5vw,52px);z-index:6;max-width:900px;padding:20px 26px;margin:-20px -26px;background:radial-gradient(ellipse 90% 100% at 32% 62%,rgba(4,4,3,.52),rgba(4,4,3,0) 72%);border-radius:20px}
.sg-hero-eyebrow{font-family:'Fragment Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#F7D9A8;margin-bottom:14px;background:linear-gradient(90deg,#ffd58f 0%,#ff9ad9 45%,#8cecff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 1px 10px rgba(2,2,2,.92))}
.sg-hero-copy .hov-ghost-dark{background:linear-gradient(112deg,rgba(255,255,255,.09),rgba(255,116,206,.12),rgba(84,229,255,.14))!important;border-color:rgba(153,225,255,.52)!important;box-shadow:0 8px 28px rgba(89,216,255,.08),inset 0 1px 0 rgba(255,255,255,.09)}
.sg-hero-copy .hov-ghost-dark:hover{background:linear-gradient(112deg,rgba(255,151,215,.22),rgba(113,106,255,.21),rgba(84,229,255,.25))!important;border-color:rgba(181,237,255,.78)!important;box-shadow:0 10px 34px rgba(108,208,255,.17),0 0 26px rgba(165,92,255,.12)}

/* Intro choreography: the hero goes cinematic full-screen while the page waits,
   then everything fades in together when the pixel burst settles. */
.home-page #sg-hero{height:min(56.25vw,calc(100vh - var(--site-nav-height)))}
html.sg-intro,html.sg-intro-pending{overflow:hidden;scroll-behavior:auto}
/* Staged assembly. The pixel loop holds the screen alone for a beat, then the
   interface builds around it: nav and hero copy begin at .46s, and the page
   below arrives at 1.38s, all settled by ~2s. Only the
   delays separate the stages, and each element animates opacity/transform
   alone. Both the ~500ms stage gaps and the 620-720ms durations run longer than
   animation.md's 30-100ms stagger and 300-600ms entrance bands — a deliberate,
   recorded deviation: this is the once-per-visit cinematic moment that file's
   1.1 allows delight for, not a repeating list reveal.
   The h1 is intentionally not staggered separately — the particle canvas owns
   its visible lettering after the intro handoff. */
html.sg-intro .sg-fade-gate,html.sg-intro-pending .sg-fade-gate{opacity:0}
html.sg-live .sg-fade-gate{opacity:1;transition:opacity .62s cubic-bezier(.23,1,.32,1) 1.38s}
/* Keep the dark header shell present through handoff; only its contents strike on. */
html.sg-intro-pending #sg-nav,html.sg-intro #sg-nav,html.sg-live #sg-nav{opacity:1}
html.sg-intro-pending #sg-nav .site-nav-inner,html.sg-intro #sg-nav .site-nav-inner{opacity:0}
html.sg-live #sg-nav .site-nav-inner{animation:sgStrike .72s steps(1,end) .46s both}
/* Deliberately opacity-only, no translate. The heading swarm measures the live
   layout before replacing its visible lettering with particles. Fading in place
   keeps the measured glyphs aligned through the intro handoff. */
html.sg-intro .sg-hero-copy{opacity:0}
html.sg-live .sg-hero-copy{opacity:1;transition:opacity .64s cubic-bezier(.23,1,.32,1) .46s}
.sg-hero-loop.is-paused #sg-hero-loop-image,.sg-hero-loop.is-paused::before,.sg-hero-loop.is-paused::after,.sg-hero-loop.is-paused .sg-hero-loop-scan,.sg-hero-loop.is-page-scrolling #sg-hero-loop-image,.sg-hero-loop.is-page-scrolling::before,.sg-hero-loop.is-page-scrolling::after,.sg-hero-loop.is-page-scrolling .sg-hero-loop-scan{animation-play-state:paused}
/* Sound and skip ride together in one row, so localized labels can grow
   without ever overlapping each other or the motion toggle beside them. */
.sg-intro-controls{position:absolute;right:92px;bottom:10px;z-index:8;display:flex;gap:6px;align-items:center}
.sg-intro-controls[hidden]{display:none!important}
.sg-intro-controls .sg-hero-motion-toggle{position:static;flex:0 0 auto;width:auto}
.sg-intro-controls .sg-intro-sound{min-width:78px}
.sg-intro-controls .sg-intro-sound[aria-pressed="true"]{border-color:rgba(112,226,255,.58);background:rgba(18,71,82,.68);color:#d8fbff}
/* The muted start is policy, not choice — give the remedy a quiet pulse. */
html.sg-intro .sg-intro-sound[aria-pressed="false"],html.sg-intro-pending .sg-intro-sound[aria-pressed="false"]{animation:sgSoundInvite 2.6s ease-in-out 1.2s infinite}
@keyframes sgSoundInvite{0%,100%{box-shadow:0 0 0 0 rgba(112,226,255,0)}50%{box-shadow:0 0 0 5px rgba(112,226,255,.13);border-color:rgba(112,226,255,.52);opacity:1}}
.hov-ghost-dark:hover{background:rgba(255,255,255,.14)}
.sg-hero-motion-toggle{position:absolute;right:10px;bottom:10px;z-index:8;min-width:72px;height:34px;padding:0 11px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(240,192,122,.26);border-radius:5px;background:rgba(7,7,6,.7);color:rgba(245,240,230,.84);font-family:'Fragment Mono',monospace;font-size:9px;letter-spacing:.09em;text-transform:uppercase;line-height:1;opacity:.72;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity .2s ease,border-color .2s ease,background .2s ease}
html.sg-intro-pending .site-hero>.sg-hero-motion-toggle,html.sg-intro .site-hero>.sg-hero-motion-toggle{position:fixed;z-index:72}
html.sg-intro-pending .site-hero>.sg-intro-controls,html.sg-intro .site-hero>.sg-intro-controls{position:fixed;z-index:72}
.sg-hero-motion-toggle[hidden]{display:none!important}
.sg-hero-motion-toggle:hover,.sg-hero-motion-toggle:focus-visible{opacity:1;border-color:rgba(240,192,122,.62);background:rgba(7,7,6,.9);color:#fff}
.sg-hero-motion-icon{position:relative;width:10px;height:10px;display:block;flex:0 0 10px}
.sg-hero-motion-icon::before,.sg-hero-motion-icon::after{content:"";position:absolute;top:1px;width:3px;height:8px;background:currentColor}
.sg-hero-motion-icon::before{left:1px}.sg-hero-motion-icon::after{right:1px}
.site-hero.is-paused .sg-hero-motion-icon::before{left:2px;top:0;width:0;height:0;background:transparent;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}
.site-hero.is-paused .sg-hero-motion-icon::after{display:none}

@media (min-width:700px) and (max-width:1099.98px){
  .sg-hero-brand-overlay{left:75%;top:20%;width:clamp(320px,36vw,380px)}
}

/* Phone hero. The film here is a 9:16 cut, so the hero fills the screen instead
   of sitting in a 3:4 letterbox that cropped the frame and left the copy crushed
   against the bottom edge with dead space below the section. */
@media (max-width:699.98px){
  .sg-hero-loop{
    aspect-ratio:auto;
    height:calc(100vh - var(--site-nav-height));
    height:calc(100svh - var(--site-nav-height));
    min-height:540px;
    max-height:none;
  }
  /* Pull the color field upward for the portrait cut, whose portal lives in
     the top third rather than across the desktop frame's center line. */
  .sg-hero-loop::before{
    background:radial-gradient(circle at 16% 26%,rgba(255,108,106,.48) 0 12%,rgba(255,77,166,.28) 25%,transparent 44%),radial-gradient(circle at 50% 30%,rgba(255,195,76,.38) 0 10%,rgba(165,92,255,.36) 28%,transparent 48%),radial-gradient(circle at 84% 23%,rgba(84,229,255,.56) 0 14%,rgba(79,126,255,.32) 29%,transparent 48%);
  }
  .sg-hero-loop::after{
    background:radial-gradient(circle at 51% 29%,rgba(255,206,97,.78) 0 8%,transparent 24%),linear-gradient(108deg,rgba(255,94,104,.92) 0%,rgba(255,84,190,.76) 31%,rgba(145,102,255,.82) 59%,rgba(64,226,255,.98) 100%);
    -webkit-mask-image:radial-gradient(ellipse at 50% 29%,#000 0 24%,rgba(0,0,0,.94) 52%,rgba(0,0,0,.46) 76%,transparent 96%);
    mask-image:radial-gradient(ellipse at 50% 29%,#000 0 24%,rgba(0,0,0,.94) 52%,rgba(0,0,0,.46) 76%,transparent 96%);
  }
  .sg-hero-brand-overlay{
    left:50%;
    top:16.8%;
    width:min(96vw,390px);
  }
  /* On a phone the cinematic has already supplied the glitch language. The
     interface handoff is intentionally smooth and compact: no header flicker,
     no delayed blank page below the hero, and no extra second before the brand
     begins to resolve. */
  html.sg-live .sg-hero-brand-overlay{animation:sgBrandFieldReveal .38s cubic-bezier(.23,1,.32,1) .18s both}
  html.sg-live #sg-nav .site-nav-inner{animation:sgBrandFieldReveal .36s cubic-bezier(.23,1,.32,1) .18s both}
  html.sg-live .sg-hero-copy{opacity:1;transition:opacity .42s cubic-bezier(.23,1,.32,1) .18s}
  html.sg-live .sg-fade-gate{opacity:1;transition:opacity .42s cubic-bezier(.23,1,.32,1) .28s}
  .sg-hero-brand-solid{transition-duration:.24s}
  /* The settled portrait hero stays in final flow geometry while the separate
     cinematic overlay owns the viewport. */
  .home-page #sg-hero{height:auto}
  /* Full-bleed bottom scrim in place of the desktop radial pad: the old
     margin:-20px -26px against a 20px inset pushed the block 6px past both
     edges and gave the document a horizontal scrollbar. */
  .sg-hero-copy{
    left:0;
    right:0;
    bottom:0;
    max-width:none;
    margin:0;
    /* Bottom padding lifts the copy off the fold without moving the scrim,
       which stays full-bleed to the screen edge. The headline was landing at
       70% of the viewport; this brings it to about 61% and clears the home
       indicator on notched phones. */
    padding:64px 20px calc(148px + env(safe-area-inset-bottom,0px));
    border-radius:0;
    background:linear-gradient(180deg,rgba(4,4,3,0),rgba(4,4,3,.42) 30%,rgba(4,4,3,.8) 62%,rgba(4,4,3,.92));
  }
  /* Tighter tracking, not smaller type, so the label still fits one line. */
  .sg-hero-eyebrow{letter-spacing:.12em;margin-bottom:12px;text-wrap:balance}
  /* The portrait cuts land on near-identical frames, so the handoff only needs a
     short dissolve to read as continuous rather than the desktop pair's .72s.
     Enter 420ms and exit at ~75% of it per animation.md 2.3, both on the
     ease-out curve from 3.2 instead of the generic `ease`. The intro rule must
     follow the loop rule: they share .sg-hero-loop-video at equal specificity. */
  .sg-hero-loop-video{transition:opacity .42s cubic-bezier(.23,1,.32,1),transform .42s cubic-bezier(.23,1,.32,1),filter .42s cubic-bezier(.23,1,.32,1)}
  .sg-hero-intro-video{transition:opacity .32s cubic-bezier(.23,1,.32,1)}
  /* The pixel-tear wash exists to hide the loop's hard cut, and it reads as a
     flash every time the film wraps. The phone cut is crossfaded end-to-start —
     its loop point now differs less than two ordinary adjacent frames do — so
     there is nothing left to mask here. Desktop still plays an uncut film and
     keeps the tear. */
  .sg-hero-loop.is-loop-seam .sg-hero-loop-scan{background-color:transparent}
  /* Side-entry reveals translate cards in from the right, which left the phone
     viewport pannable sideways mid-animation. clip rather than hidden so the
     sticky panels inside sg-recall keep working. */
  html{overflow-x:clip}
}

@media (max-width:520px){
  .sg-hero-motion-toggle{right:8px;bottom:8px;min-width:34px;width:34px;padding:0}
  .sg-intro-controls{right:50px;bottom:8px}
  .sg-intro-controls .sg-intro-skip{min-width:64px;padding:0 11px}
  .sg-intro-controls .sg-intro-sound{min-width:72px;padding:0 10px}
  .sg-hero-motion-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}

/* Fine-pointer progressive enhancement. The native cursor remains until JS opts in. */
#sg-pixel-cursor{--sg-cursor-color:#09090b;position:fixed;left:0;top:0;width:0;height:0;z-index:100;pointer-events:none;opacity:0;transition:opacity .16s ease;will-change:transform}
#sg-pixel-cursor.is-visible{opacity:1}
.sg-pixel-cursor-reticle{position:absolute;left:0;top:0;width:22px;height:22px;translate:-50% -50%;transition:width .16s ease,height .16s ease;background:linear-gradient(var(--sg-cursor-color),var(--sg-cursor-color)) left top/7px 1px no-repeat,linear-gradient(var(--sg-cursor-color),var(--sg-cursor-color)) left top/1px 7px no-repeat,linear-gradient(var(--sg-cursor-color),var(--sg-cursor-color)) right top/7px 1px no-repeat,linear-gradient(var(--sg-cursor-color),var(--sg-cursor-color)) right top/1px 7px no-repeat,linear-gradient(var(--sg-cursor-color),var(--sg-cursor-color)) left bottom/7px 1px no-repeat,linear-gradient(var(--sg-cursor-color),var(--sg-cursor-color)) left bottom/1px 7px no-repeat,linear-gradient(var(--sg-cursor-color),var(--sg-cursor-color)) right bottom/7px 1px no-repeat,linear-gradient(var(--sg-cursor-color),var(--sg-cursor-color)) right bottom/1px 7px no-repeat;filter:drop-shadow(0 0 2px rgba(245,245,245,.6))}
.sg-pixel-cursor-core{position:absolute;left:0;top:0;width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--sg-cursor-color);box-shadow:6px 4px 0 color-mix(in srgb,var(--sg-cursor-color) 55%,transparent),-5px -4px 0 color-mix(in srgb,var(--sg-cursor-color) 35%,transparent);will-change:transform}
#sg-pixel-cursor.is-action{--sg-cursor-color:#E0922F}
#sg-pixel-cursor.is-action .sg-pixel-cursor-reticle{width:28px;height:28px}
#sg-pixel-cursor.is-dark:not(.is-action){--sg-cursor-color:#f1eee8}
#sg-pixel-cursor.is-pressed .sg-pixel-cursor-reticle{width:17px;height:17px}
/* Heat: fast strokes run gold-hot with a glow, echoing the agitated swarm. */
#sg-pixel-cursor.is-hot{--sg-cursor-color:#F4C480}
#sg-pixel-cursor.is-hot .sg-pixel-cursor-reticle{width:30px;height:30px;filter:drop-shadow(0 0 4px rgba(244,196,128,.85))}
#sg-pixel-cursor.is-hot .sg-pixel-cursor-core{box-shadow:6px 4px 0 color-mix(in srgb,var(--sg-cursor-color) 55%,transparent),-5px -4px 0 color-mix(in srgb,var(--sg-cursor-color) 35%,transparent),0 0 7px rgba(244,196,128,.9)}
html.sg-cursor-ready,html.sg-cursor-ready body,html.sg-cursor-ready a,html.sg-cursor-ready button{cursor:none!important}
html.sg-cursor-ready :where(input,textarea,select,[contenteditable="true"]){cursor:auto!important}

/* Page-wide signal theme: blueprint grid under light sections, blinking decode
   markers, gold hover energy on cards, scanlines on the dark stat panel. */
.sg-fade-gate section{background-image:linear-gradient(rgba(9,9,11,.033) 1px,transparent 1px),linear-gradient(90deg,rgba(9,9,11,.033) 1px,transparent 1px);background-size:44px 44px;background-position:center top}
.sg-fade-gate section[data-swarm-dark]{background-image:none}
[data-decode]::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;background:#E0922F;animation:sgBlink 1.7s steps(2,end) infinite}
.sg-card{transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.sg-card:hover,.hov-lift:hover{border-color:rgba(224,146,47,.55)!important;box-shadow:0 12px 36px rgba(224,146,47,.13),0 0 0 1px rgba(224,146,47,.22);transform:translateY(-3px)}
.faq-toggle:hover .faq-sign{color:#E0922F}
.sg-stat-panel{position:relative;overflow:hidden}
.sg-stat-panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(251,191,36,.05) 0 1px,transparent 1px 7px);animation:sgHeroScan 2.8s steps(5,end) infinite}

/* Once-only side reveals. Content is never hidden until the observer is live. */
[data-reveal]{--sg-reveal-distance:24px;--sg-reveal-duration:440ms;--sg-reveal-delay:0ms}
[data-reveal="left"]{--sg-reveal-x:calc(var(--sg-reveal-distance) * -1)}
[data-reveal="right"]{--sg-reveal-x:var(--sg-reveal-distance)}
[data-reveal-size="card"]{--sg-reveal-distance:34px;--sg-reveal-duration:560ms}
[data-reveal-size="panel"]{--sg-reveal-distance:38px;--sg-reveal-duration:610ms}
html.sg-reveal-ready [data-reveal]{opacity:0;translate:var(--sg-reveal-x) 0}
html.sg-reveal-ready [data-reveal].is-revealed{animation:sgWhoosh var(--sg-reveal-duration) cubic-bezier(.16,1,.3,1) var(--sg-reveal-delay) both}

@media (max-width:699.98px){
  [data-reveal]{--sg-reveal-distance:18px}
  [data-reveal-size="card"],[data-reveal-size="panel"]{--sg-reveal-distance:22px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  #sg-swarm,#sg-pixel-cursor,#sg-hero-rain,.sg-hero-brand-particles,.sg-hero-loop-video,.sg-hero-motion-toggle{display:none!important}
  .sg-hero-brand-overlay{animation:none!important;opacity:1!important;translate:none!important}
  .sg-hero-brand-source{opacity:.94!important;-webkit-mask-image:none!important;mask-image:none!important}
  .sg-hero-brand-solid{display:none!important}
  .sg-hero-loop-picture{opacity:1!important}
  .sg-hero-loop::after{display:none!important}
  [data-swarm-heading],[data-reveal]{opacity:1!important;translate:none!important;animation:none!important;-webkit-mask-image:none!important;mask-image:none!important}
  html.sg-cursor-ready,html.sg-cursor-ready body,html.sg-cursor-ready a,html.sg-cursor-ready button{cursor:auto!important}
}

/* At rest the real heading remains crisp and selectable. Fine-pointer hover
   opens only a feathered window under the pointer, where its exact sampled
   pixels can lift from the letterforms without dissolving the rest of the title. */
@media (hover:hover) and (pointer:fine){
  [data-swarm-heading][data-swarm-hover="true"]{-webkit-mask-image:radial-gradient(circle var(--sg-swarm-hover-radius,64px) at var(--sg-swarm-hover-x,50%) var(--sg-swarm-hover-y,50%),transparent 0 45%,rgba(0,0,0,.14) 60%,#000 100%);mask-image:radial-gradient(circle var(--sg-swarm-hover-radius,64px) at var(--sg-swarm-hover-x,50%) var(--sg-swarm-hover-y,50%),transparent 0 45%,rgba(0,0,0,.14) 60%,#000 100%)}
}

/* Founder and company meeting cards -------------------------------------- */
.contact-card-page{background:#f5f0e6}
.site-connect-hero{position:relative;overflow:hidden;padding:72px max(20px,calc((100vw - 1120px)/2)) 82px;background:radial-gradient(800px 420px at 88% 8%,rgba(224,146,47,.18),transparent 58%),radial-gradient(620px 420px at 4% 108%,rgba(88,216,230,.08),transparent 58%),#11110f;color:#fff}
.site-connect-hero-decor{position:absolute;inset:0;pointer-events:none}
.site-connect-hero-decor i{position:absolute;border:1px solid rgba(255,255,255,.07);border-radius:50%;filter:blur(.2px)}
.site-connect-hero-decor i:first-child{right:-14rem;top:-18rem;width:44rem;height:44rem}
.site-connect-hero-decor i:last-child{left:-11rem;bottom:-20rem;width:36rem;height:36rem;border-color:rgba(224,146,47,.14)}
.site-connect-hero-decor span{position:absolute;right:10%;bottom:12%;width:7px;height:7px;border-radius:50%;background:#f4c480;box-shadow:0 0 28px rgba(244,196,128,.9)}
.site-connect-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:clamp(32px,6vw,84px);align-items:center;max-width:1120px;margin:0 auto}
.site-connect-layout>*{min-width:0}.site-connect-profile{min-width:0}
.site-connect-heading{display:grid;grid-template-columns:168px minmax(0,1fr);gap:24px;align-items:center}
.site-connect-portrait-link{display:block;width:168px;height:168px;color:inherit}
.site-connect-portrait{display:block;width:168px;height:168px;overflow:hidden;border:1px solid rgba(244,196,128,.38);border-radius:24px;background:#24231f;box-shadow:0 22px 55px rgba(0,0,0,.34)}
.site-connect-portrait img{display:block;width:100%;height:100%;object-fit:cover}
.site-connect-portrait-link:hover .site-connect-portrait,.site-connect-portrait-link:focus-visible .site-connect-portrait{border-color:#f4c480;box-shadow:0 24px 65px rgba(224,146,47,.2)}
.site-connect-profile h1{max-width:760px;margin:14px 0 12px;font-family:var(--font-display);font-size:clamp(43px,6vw,76px);font-weight:400;line-height:.98;letter-spacing:-.045em;overflow-wrap:anywhere;text-wrap:balance}
.site-connect-heading h1{font-size:clamp(38px,4.7vw,62px)}
html:lang(th) .site-connect-profile h1{font-family:'Mitr','Pridi','Noto Sans Thai',Tahoma,sans-serif;font-weight:600;letter-spacing:-.025em}
.site-connect-role{margin:0;color:#f4c480;font-size:15px;font-weight:600;letter-spacing:.035em;overflow-wrap:anywhere}
.site-connect-bio{max-width:710px;margin:22px 0 0;color:rgba(255,255,255,.72);font-size:18px;line-height:1.65;overflow-wrap:anywhere}
.site-connect-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:30px}
.site-connect-action{display:flex;min-height:62px;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.055);color:#fff;text-decoration:none;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.site-connect-action:hover,.site-connect-action:focus-visible{border-color:rgba(244,196,128,.74);background:rgba(255,255,255,.1);transform:translateY(-1px)}
.site-connect-action span{min-width:0;font-weight:700;overflow-wrap:anywhere}.site-connect-action small{min-width:0;max-width:48%;color:rgba(255,255,255,.55);font-size:11px;text-align:right;overflow-wrap:anywhere}
.site-connect-action-primary,.site-connect-action-book{border-color:#f4c480;background:#f4c480;color:#11110f}
.site-connect-action-primary small,.site-connect-action-book small{color:rgba(17,17,15,.62)}
.site-connect-action-primary:hover,.site-connect-action-primary:focus-visible,.site-connect-action-book:hover,.site-connect-action-book:focus-visible{background:#ffe0a9;color:#11110f}
.site-connect-action-whatsapp{border-color:rgba(37,211,102,.62);background:rgba(37,211,102,.13)}
.site-connect-action-line{border-color:rgba(6,199,85,.62);background:rgba(6,199,85,.13)}
.site-connect-action-whatsapp:hover,.site-connect-action-whatsapp:focus-visible,.site-connect-action-line:hover,.site-connect-action-line:focus-visible{border-color:#4ce17f;background:rgba(31,190,91,.24)}
.site-connect-action-disabled{cursor:not-allowed;opacity:.58}.site-connect-action-disabled small{max-width:145px}
.site-connect-mobile-bar,.site-connect-mobile-prompt,.site-connect-mobile-note{display:none}
.site-contact-instructions{margin-top:20px;padding:18px 20px;border-left:2px solid #f4c480;background:rgba(255,255,255,.055)}
.site-contact-instructions h2{margin:0 0 7px;font-size:16px}.site-contact-instructions p{margin:0;color:rgba(255,255,255,.72);line-height:1.5}.site-contact-instructions small{display:block;margin-top:7px;color:rgba(255,255,255,.45)}
.site-connect-qr{display:flex;flex-direction:column;align-items:center;padding:20px;background:#fff;color:#11110f;box-shadow:0 24px 80px rgba(0,0,0,.28);text-align:center}
.site-connect-qr-frame{width:100%;padding:8px;background:#fff}.site-connect-qr img{display:block;width:100%;height:auto}
.site-connect-qr strong{margin-top:12px;font-family:var(--font-display);font-size:24px;font-weight:400}.site-connect-qr>span{color:#6d685f}.site-connect-qr code{max-width:100%;margin-top:10px;color:#8a5a20;font-family:'Fragment Mono',monospace;font-size:10px;overflow-wrap:anywhere}
.site-connect-company .site-feature-card{min-height:190px}.site-connect-people-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.site-connect-person{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;align-items:center;padding:20px;border:1px solid var(--site-line);background:#fff;color:#11110f;text-decoration:none}
.site-connect-person>span{grid-row:1/3;display:grid;width:64px;height:64px;place-items:center;border-radius:50%;background:#11110f;color:#f4c480;font-family:'Fragment Mono',monospace;font-size:12px;letter-spacing:.08em}
.site-connect-person-portrait{grid-row:1/3;display:block;width:64px;height:64px;overflow:hidden;border:1px solid #d8c6a9;border-radius:50%;background:#11110f}.site-connect-person-portrait img{display:block;width:100%;height:100%;object-fit:cover}
.site-connect-person strong{font-size:18px}.site-connect-person small{color:var(--site-muted)}
.site-connect-person:hover,.site-connect-person:focus-visible{border-color:#d69237;box-shadow:0 12px 35px rgba(74,47,17,.08)}

@media (max-width:820px),(hover:none) and (pointer:coarse){
  .contact-card-page{min-height:100svh;background:#11110f}
  .contact-card-page .site-nav,.contact-card-page .site-footer,.contact-card-page .site-connect-qr,.contact-card-page .site-connect-company,.contact-card-page .site-connect-people,.contact-card-page .site-contact-instructions,.contact-card-page .site-connect-action-desktop{display:none!important}
  .contact-card-page main,.contact-card-page .site-connect-hero{min-height:100svh}
  .contact-card-page .site-connect-hero{display:flex;align-items:stretch;justify-content:center;padding:max(92px,calc(env(safe-area-inset-top) + 76px)) max(22px,env(safe-area-inset-right)) max(34px,calc(env(safe-area-inset-bottom) + 24px)) max(22px,env(safe-area-inset-left))}
  .contact-card-page .site-connect-mobile-bar{position:absolute;z-index:2;top:max(18px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;gap:16px}
  .contact-card-page .site-connect-mobile-brand{color:#fff;font-family:var(--font-display);font-size:20px;text-decoration:none}
  .contact-card-page .site-connect-mobile-language{display:grid;min-width:54px;min-height:44px;place-items:center;padding:0 13px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#fff;font-weight:700;text-decoration:none}
  .contact-card-page .site-connect-layout{display:block;width:min(100%,560px);margin:0 auto}
  .contact-card-page .site-connect-mobile-prompt{display:block;margin:24px 0 0;color:#f4c480;font-size:13px;font-weight:700;letter-spacing:.055em;text-transform:uppercase}
  html:lang(th) .contact-card-page .site-connect-mobile-prompt{text-transform:none}
  .contact-card-page .site-connect-actions{grid-template-columns:1fr;gap:12px;margin-top:14px}
  .contact-card-page .site-connect-action{min-height:68px;padding:15px 18px;border-radius:18px;background:rgba(255,255,255,.065);box-shadow:0 10px 30px rgba(0,0,0,.13)}
  .contact-card-page a.site-connect-action-whatsapp{border-color:rgba(37,211,102,.72);background:linear-gradient(135deg,rgba(37,211,102,.24),rgba(37,211,102,.1))}
  .contact-card-page a.site-connect-action-line{border-color:rgba(6,199,85,.72);background:linear-gradient(135deg,rgba(6,199,85,.24),rgba(6,199,85,.1))}
  .contact-card-page .site-connect-action-primary{border-color:#f4c480;background:#f4c480;color:#11110f}
  .contact-card-page .site-connect-action-disabled{box-shadow:none;opacity:.48}
  .contact-card-page .site-connect-mobile-note{display:block;margin:16px 4px 0;color:rgba(255,255,255,.52);font-size:12px;line-height:1.5}
}
@media (max-width:560px){.site-connect-hero{padding-top:54px;padding-bottom:60px}.site-connect-heading{grid-template-columns:108px minmax(0,1fr);gap:16px;align-items:start}.site-connect-portrait-link,.site-connect-portrait{width:108px;height:108px;border-radius:18px}.site-connect-profile h1{font-size:clamp(38px,12vw,54px)}.site-connect-heading h1{font-size:clamp(31px,9.2vw,40px)}.site-connect-bio{font-size:16px}.site-connect-actions{grid-template-columns:1fr}.site-connect-action{min-height:58px}.site-contact-instructions{padding:16px}.site-connect-qr{padding:14px}.site-connect-person{grid-template-columns:54px minmax(0,1fr)}.site-connect-person>span,.site-connect-person-portrait{width:54px;height:54px}}
@media (max-width:480px){html:lang(th) .site-connect-heading{grid-template-columns:1fr}html:lang(th) .site-connect-portrait-link,html:lang(th) .site-connect-portrait{width:124px;height:124px}}
@media (max-width:380px){
  .site-connect-heading{grid-template-columns:1fr}.site-connect-portrait-link,.site-connect-portrait{width:124px;height:124px}
  .contact-card-page .site-connect-hero{padding-top:max(78px,calc(env(safe-area-inset-top) + 68px));padding-right:max(18px,env(safe-area-inset-right));padding-left:max(18px,env(safe-area-inset-left))}
  .contact-card-page .site-connect-mobile-bar{left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right))}
  .contact-card-page .site-connect-heading{grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:center}
  .contact-card-page .site-connect-portrait-link,.contact-card-page .site-connect-portrait{width:84px;height:84px;border-radius:16px}
  .contact-card-page .site-connect-heading h1{font-size:clamp(27px,9.2vw,34px)}
  .contact-card-page .site-connect-role{font-size:12px;line-height:1.35}
  .contact-card-page .site-connect-bio{margin-top:16px;font-size:14px;line-height:1.48}
  .contact-card-page .site-connect-mobile-prompt{margin-top:18px;font-size:11px}
  .contact-card-page .site-connect-action{min-height:60px;border-radius:16px}
}
@media (max-width:380px) and (max-height:650px){
  .contact-card-page .site-connect-bio{display:none}
}
@media (forced-colors:active){.site-connect-action,.site-connect-qr,.site-connect-person{border:1px solid CanvasText}.site-connect-action-disabled{opacity:1}}
@page contact-card{size:3.5in 2in;margin:0}
@media print{
  .contact-card-page{page:contact-card;background:#fff}
  .contact-card-page .site-nav,.contact-card-page .site-footer,.contact-card-page .site-connect-company,.contact-card-page .site-connect-people,.contact-card-page .site-contact-instructions,.contact-card-page .site-connect-actions{display:none!important}
  .contact-card-page .site-connect-hero{min-height:2in;padding:.12in;background:#fff!important;color:#11110f}
  .contact-card-page .site-connect-layout{grid-template-columns:1fr 1.15in;gap:.12in;align-items:center}
  .contact-card-page .site-connect-heading{display:block}.contact-card-page .site-connect-portrait-link,.contact-card-page .site-connect-portrait{display:none}
  .contact-card-page .site-connect-profile h1{margin:.03in 0;font-size:17pt;color:#11110f}.contact-card-page .site-connect-role{font-size:7.5pt;color:#8a5a20}.contact-card-page .site-connect-bio{margin:.05in 0 0;color:#333;font-size:7pt;line-height:1.25}
  .contact-card-page .site-connect-qr{padding:.04in;box-shadow:none;border:1px solid #ddd}.contact-card-page .site-connect-qr strong{margin-top:.02in;font-size:8pt}.contact-card-page .site-connect-qr>span,.contact-card-page .site-connect-qr code{font-size:5.5pt;margin-top:.01in}
}
@media print,(forced-colors:active){
  #sg-swarm,#sg-pixel-cursor,#sg-hero-rain,.sg-hero-loop-video,.sg-hero-motion-toggle{display:none!important}
  .sg-hero-loop-picture{opacity:1!important}
  .sg-hero-loop::after{display:none!important}
  [data-swarm-heading],[data-reveal]{opacity:1!important;translate:none!important;animation:none!important;transition:none!important;-webkit-mask-image:none!important;mask-image:none!important}
  html.sg-cursor-ready,html.sg-cursor-ready body,html.sg-cursor-ready a,html.sg-cursor-ready button{cursor:auto!important}
}
/* A request for stronger contrast gets the canonical DOM lettering. The
   canvas stays decorative for assistive technology at every preference, and
   the ordinary experience still owns the full particle-to-solid morph. */
@media (prefers-contrast:more){
  #sg-swarm{display:none!important}
  [data-swarm-heading]{opacity:1!important;animation:none!important;transition:none!important;-webkit-mask-image:none!important;mask-image:none!important}
  .sg-hero-copy{background:rgba(4,4,3,.92)!important}
}
@media (hover:none),(pointer:coarse){
  #sg-pixel-cursor{display:none!important}
  html.sg-cursor-ready,html.sg-cursor-ready body,html.sg-cursor-ready a,html.sg-cursor-ready button{cursor:auto!important}
}

/* responsive visibility — breakpoint mirrors the design's isMobile flag (vw < 860) */
.sg-desktop{display:flex}
.sg-mobile{display:none}
@media (max-width:859.98px){
  .sg-desktop{display:none}
  .sg-mobile{display:flex}
}

/* hover states (converted from the design's style-hover attributes) */
.hov-ink:hover{color:#000}
.hov-dim:hover{opacity:.82}
.hov-dim85:hover{opacity:.85}
.hov-ghost:hover{background:rgba(0,0,0,.09)}
.hov-lift:hover{border-color:#000;transform:translateY(-3px)}

/* Feature cards: a cursor-tracked gold glow plus the pixel-reticle corner
   motif shared with the cursor and stage corners — one designed system. */
.sg-feature-card{position:relative;overflow:hidden}
.sg-feature-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(224,146,47,.14),transparent 72%);
}
.sg-feature-card::after{
  content:"";
  position:absolute;
  inset:10px;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
  background:linear-gradient(#E0922F,#E0922F) left top/9px 1px no-repeat,linear-gradient(#E0922F,#E0922F) left top/1px 9px no-repeat,linear-gradient(#E0922F,#E0922F) right top/9px 1px no-repeat,linear-gradient(#E0922F,#E0922F) right top/1px 9px no-repeat,linear-gradient(#E0922F,#E0922F) left bottom/9px 1px no-repeat,linear-gradient(#E0922F,#E0922F) left bottom/1px 9px no-repeat,linear-gradient(#E0922F,#E0922F) right bottom/9px 1px no-repeat,linear-gradient(#E0922F,#E0922F) right bottom/1px 9px no-repeat;
}
@media (hover:hover) and (pointer:fine){
  .sg-feature-card:hover::before{opacity:1}
  .sg-feature-card:hover::after{opacity:.85}
}

/* FAQ answers */
.faq-answer[hidden]{display:none}

/* Human–AI intersection: independent transparent layers meet on scroll. */
.sg-intersection-section{
  box-sizing:border-box;
  width:100vw;
  margin-left:calc(50% - 50vw);
  overflow:hidden;
}
.sg-intersection-stage{
  position:relative;
  width:100vw;
  height:clamp(360px,43vw,560px);
  max-width:none;
  margin:clamp(20px,3vw,34px) 0 0 calc(50% - 50vw);
  isolation:isolate;
}
.sg-intersection-stage::before,
.sg-intersection-stage::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:clamp(76px,12vw,190px);
  z-index:4;
  pointer-events:none;
  opacity:.78;
}
.sg-intersection-stage::before{
  left:0;
  background:linear-gradient(90deg,rgba(18,19,18,.58),rgba(87,55,29,.22) 46%,transparent),repeating-linear-gradient(0deg,transparent 0 31px,rgba(241,178,102,.16) 32px 33px);
  -webkit-mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.72) 48%,transparent 100%);
  mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.72) 48%,transparent 100%);
}
.sg-intersection-stage::after{
  right:0;
  background:linear-gradient(270deg,rgba(18,19,18,.58),rgba(31,74,72,.2) 46%,transparent),repeating-linear-gradient(0deg,transparent 0 31px,rgba(104,217,207,.14) 32px 33px);
  -webkit-mask-image:linear-gradient(270deg,#000,rgba(0,0,0,.72) 48%,transparent 100%);
  mask-image:linear-gradient(270deg,#000,rgba(0,0,0,.72) 48%,transparent 100%);
}
.sg-intersection-backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  border-radius:0;
  opacity:.58;
  transform:translate3d(0,0,0) scale(1.025);
  will-change:transform,opacity;
}
.sg-intersection-backdrop::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(245,245,245,.22),transparent 20%,transparent 82%,rgba(245,245,245,.3));
  pointer-events:none;
}
.sg-intersection-backdrop img,.sg-intersection-backdrop video{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 52%;
  filter:saturate(.72) contrast(.9) brightness(1.08);
}
.sg-intersection-poster{z-index:0}
.sg-intersection-video{z-index:1}
.sg-hand-layer{
  position:absolute;
  width:clamp(520px,55vw,820px);
  z-index:3;
  pointer-events:none;
  opacity:.5;
  will-change:transform,opacity;
}
.sg-hand-layer img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 22px 32px rgba(0,0,0,.14)) drop-shadow(0 0 calc(18px * var(--contact,0)) rgba(137,224,211,.34));
}
.sg-hand-layer-robot img{
  transform:scaleX(-1);
}
.sg-hand-layer-human{right:-14vw;bottom:-3%;transform-origin:88% 62%}
.sg-hand-layer-robot{left:-14vw;top:1%;transform-origin:12% 42%}
.sg-contact-field{
  --contact:0;
  --pointer-x:0px;
  --pointer-y:0px;
  position:absolute;
  left:50%;
  top:42%;
  width:clamp(64px,8vw,116px);
  height:48px;
  z-index:2;
  opacity:calc(var(--contact) * .82);
  transform:translate3d(calc(-50% + var(--pointer-x)), calc(-50% + var(--pointer-y)), 0) scaleX(calc(.18 + var(--contact) * .82));
  transform-origin:center;
  filter:drop-shadow(0 0 10px rgba(132,225,213,.5));
  pointer-events:none;
  will-change:transform,opacity;
}
.sg-contact-field i{
  position:absolute;
  left:0;
  top:50%;
  display:block;
  width:100%;
  height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(190,109,30,.9) 26%,rgba(64,120,107,.95) 50%,rgba(24,139,134,.92) 74%,transparent);
  transform-origin:center;
}
.sg-contact-field i:nth-child(1){transform:translateY(-10px) rotate(5deg) scaleX(.76);opacity:.34}
.sg-contact-field i:nth-child(2){transform:translateY(0);opacity:.92}
.sg-contact-field i:nth-child(3){transform:translateY(10px) rotate(-5deg) scaleX(.76);opacity:.34}
@media (max-width:859.98px){
  .sg-intersection-stage{height:clamp(330px,72vw,450px);margin-top:18px}
  .sg-intersection-backdrop{opacity:.5}
  .sg-hand-layer{width:clamp(390px,96vw,610px)}
  .sg-hand-layer-human{right:-55vw;bottom:1%}
  .sg-hand-layer-robot{left:-55vw;top:4%}
}
@media (prefers-reduced-motion:reduce){
  .sg-intersection-video{display:none}
  .sg-intersection-backdrop{opacity:.54!important;transform:scale(1.025)!important}
  .sg-hand-layer{opacity:1!important;transform:none!important}
  .sg-contact-field{display:none}
}

/* ---------------------------------------------------------------------------
   Trusted-by strip: ink-dark wordmarks with a glowing gold marker so the
   industries actually read as highlights instead of grey noise. */
.sg-trust-track{gap:58px}
.sg-trust-item{display:flex;align-items:center;gap:12px;font-family:var(--font-body);font-weight:600;font-size:17.5px;letter-spacing:-.01em;color:#1d1d1d;white-space:nowrap}
.sg-trust-dot{width:9px;height:9px;background:#E0922F;transform:rotate(45deg);border-radius:1.5px;box-shadow:0 0 0 3px rgba(224,146,47,.14),0 0 10px rgba(224,146,47,.42);flex-shrink:0}
/* On a phone the 17.5px wordmarks at a 58px gap put barely one full item on
   screen, so the strip read as clipped words rather than a moving list. */
@media (max-width:699.98px){
  .sg-trust-track{gap:32px}
  .sg-trust-item{font-size:14px;gap:8px}
  .sg-trust-dot{width:8px;height:8px}
}

/* ---------------------------------------------------------------------------
   Card cipher decode: the card stays readable while a restrained luminance
   settle supports the two-or-three-character scramble in JS. */
@keyframes sgPixelIn{0%{opacity:.82;filter:brightness(1.04)}100%{opacity:1;filter:none}}
@keyframes sgPixelFilter{0%{filter:brightness(1.04)}100%{filter:none}}
[data-decode-card].sg-decoding{animation:sgPixelIn .42s cubic-bezier(.16,1,.3,1) both}
html.sg-reveal-ready [data-reveal].is-revealed.sg-decoding{animation:sgWhoosh var(--sg-reveal-duration) cubic-bezier(.16,1,.3,1) var(--sg-reveal-delay) both,sgPixelFilter .42s cubic-bezier(.16,1,.3,1) var(--sg-reveal-delay) both}

/* ---------------------------------------------------------------------------
   Capability icons: app-icon tiles with 1.8px linear glyphs that draw
   themselves in as the card decodes. */
.sgi-tile{width:46px;height:46px;border-radius:13px;background:linear-gradient(160deg,#FBF3E2,#F4E5C6);border:1px solid #EFDFC0;display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(120,84,20,.09)}
.sgi{width:24px;height:24px;display:block}
.sgi-draw{stroke-dasharray:1;stroke-dashoffset:0}
[data-decode-card].sg-decoding .sgi-draw{stroke-dashoffset:1;animation:sgiDraw .85s cubic-bezier(.35,.65,.3,1) .18s forwards}
@keyframes sgiDraw{to{stroke-dashoffset:0}}
[data-decode-card].sg-decoding .sgi-fade{opacity:0;animation:sgiFade .4s ease .6s forwards}
@keyframes sgiFade{to{opacity:1}}

/* ---------------------------------------------------------------------------
   Integration ecosystem: a glowing hub with tool chips that pop in around
   it, curved links that draw once, then pulses that travel forever. */
.sg-eco{position:relative;aspect-ratio:860/440}
.sg-eco-lines{position:absolute;inset:0;width:100%;height:100%;display:block}
.sg-eco-line{stroke-dasharray:1;stroke-dashoffset:1}
.is-pop .sg-eco-line{animation:sgEcoLine .7s cubic-bezier(.4,0,.2,1) calc(.3s + var(--i) * 70ms) forwards}
@keyframes sgEcoLine{to{stroke-dashoffset:0}}
.sg-eco-pulse{opacity:0}
.is-pop .sg-eco-pulse{animation:sgEcoPulseIn .45s ease calc(1.05s + var(--i) * 70ms) forwards}
@keyframes sgEcoPulseIn{to{opacity:.95}}
.sg-eco-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:11px;z-index:2;opacity:0}
.is-pop .sg-eco-hub{opacity:1;animation:sgHubIn .55s cubic-bezier(.2,.9,.3,1.14) .05s backwards}
@keyframes sgHubIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.sg-eco-mark{display:inline-grid;grid-template-columns:repeat(2,1fr);gap:5px;width:48px;height:48px;padding:9px;background:#0e1424;border:1px solid rgba(224,146,47,.55);border-radius:14px;box-shadow:0 0 26px rgba(224,146,47,.38),0 0 74px rgba(224,146,47,.16)}
.sg-eco-mark i{background:#FBBF24;border-radius:3px}
.is-pop .sg-eco-mark{animation:sgHubGlow 3.4s ease-in-out 1.6s infinite}
@keyframes sgHubGlow{0%,100%{box-shadow:0 0 26px rgba(224,146,47,.38),0 0 74px rgba(224,146,47,.16)}50%{box-shadow:0 0 34px rgba(224,146,47,.6),0 0 96px rgba(224,146,47,.28)}}
.sg-eco-hub-label{font-family:'Fragment Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#F0C07A}
.sg-eco-chip{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:9px 14px;background:rgba(13,18,32,.9);border:1px solid rgba(240,192,122,.3);border-radius:999px;font-family:var(--font-body);font-weight:500;font-size:12.5px;letter-spacing:.01em;color:#e8edf7;white-space:nowrap;z-index:2;opacity:0;box-shadow:0 4px 18px rgba(2,4,10,.5)}
.sg-eco-chip svg{width:15px;height:15px;color:#F0C07A;flex-shrink:0}
.is-pop .sg-eco-chip{opacity:1;animation:sgChipIn .5s cubic-bezier(.2,.9,.3,1.16) calc(.4s + var(--i) * 70ms) backwards}
@keyframes sgChipIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}70%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (hover:hover) and (pointer:fine){
  .sg-eco-chip:hover{border-color:rgba(240,192,122,.65);background:rgba(20,27,46,.95)}
}
@media (max-width:699.98px){
  .sg-eco{aspect-ratio:auto;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:26px 18px}
  .sg-eco-lines{display:none}
  .sg-eco-hub{position:static;transform:none;width:100%;margin-bottom:8px}
  .is-pop .sg-eco-hub{animation:sgFadeScaleIn .5s cubic-bezier(.2,.9,.3,1.14) .05s backwards}
  .sg-eco-chip{position:static;transform:none}
  .is-pop .sg-eco-chip{animation:sgFadeScaleIn .45s cubic-bezier(.2,.9,.3,1.16) calc(.35s + var(--i) * 55ms) backwards}
}
@keyframes sgFadeScaleIn{0%{opacity:0;transform:scale(.45)}100%{opacity:1;transform:none}}

/* ---------------------------------------------------------------------------
   Enterprise, upgraded: words rise one by one, proof tiles bounce in and
   their icons morph out of solid gold blocks, the CTA lands last. */
.sg-eu-w{display:inline-block;opacity:0}
.is-pop .sg-eu-w{opacity:1;animation:sgEuWord .58s cubic-bezier(.18,.9,.26,1.13) calc(.12s + var(--w) * 75ms) backwards}
@keyframes sgEuWord{0%{opacity:0;transform:translateY(26px) scale(.93)}62%{opacity:1;transform:translateY(-3px) scale(1.01)}100%{opacity:1;transform:none}}
.sg-eu-sub{opacity:0}
.is-pop .sg-eu-sub{opacity:1;animation:sgEuFade .6s ease .66s backwards}
@keyframes sgEuFade{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
.sg-eu-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
.sg-eu-tile{opacity:0;background:rgba(255,255,255,.045);border:1px solid rgba(240,192,122,.16);border-radius:16px;padding:22px 20px;display:flex;flex-direction:column;gap:8px;text-align:left;transition:border-color .3s ease,background .3s ease}
.is-pop .sg-eu-tile{opacity:1;animation:sgEuTileIn .55s cubic-bezier(.2,.9,.3,1.15) calc(.84s + var(--t) * 110ms) backwards}
@keyframes sgEuTileIn{0%{opacity:0;transform:translateY(30px) scale(.72)}64%{opacity:1;transform:translateY(-4px) scale(1.03)}100%{opacity:1;transform:none}}
@media (hover:hover) and (pointer:fine){
  .sg-eu-tile:hover{border-color:rgba(240,192,122,.48);background:rgba(255,255,255,.075)}
}
.sg-eu-ic{width:40px;height:40px;border-radius:11px;background:rgba(224,146,47,.14);border:1px solid rgba(224,146,47,.3);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.sg-eu-ic svg{width:21px;height:21px}
.is-pop .sg-eu-ic{animation:sgEuMorph .7s cubic-bezier(.2,.9,.3,1.2) calc(.98s + var(--t) * 110ms) backwards}
@keyframes sgEuMorph{0%{transform:scale(.15) rotate(-100deg);border-radius:6px;background:#E0922F;border-color:#E0922F}55%{transform:scale(1.12) rotate(6deg);background:#E0922F}100%{transform:none}}
.sg-eu-draw{stroke-dasharray:1;stroke-dashoffset:1}
.is-pop .sg-eu-draw{animation:sgEcoLine .6s ease calc(1.32s + var(--t) * 110ms) forwards}
.sg-eu-tile-title{font-family:var(--font-body);font-weight:600;font-size:15px;color:#fff}
.sg-eu-tile-sub{font-family:var(--font-body);font-size:13px;line-height:1.55;color:#9c9ca2}
.sg-eu-cta{opacity:0;transition:transform .2s cubic-bezier(.23,1,.32,1),box-shadow .3s ease}
.is-pop .sg-eu-cta{opacity:1;animation:sgEuCta .55s cubic-bezier(.2,.9,.3,1.15) 1.4s backwards}
@keyframes sgEuCta{0%{opacity:0;transform:translateY(18px) scale(.9)}100%{opacity:1;transform:none}}
.sg-eu-cta:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(224,146,47,.35)}
@media (max-width:699.98px){
  .sg-eu-tiles{grid-template-columns:1fr;max-width:360px;margin-left:auto;margin-right:auto}
  .sg-eu-tile{text-align:center;align-items:center}
}

/* ---------------------------------------------------------------------------
   Contact card: the four mark blocks drop in one at a time and stack, the
   stack buzzes like a phone with a gold ring, the blocks morph into gold
   dots and back, then the title decodes. Once per visit. */
.sg-stack{position:relative;display:inline-grid;grid-template-columns:repeat(2,1fr);gap:4px;width:34px;height:34px;margin-bottom:16px}
.sg-stack i{display:block;background:#000;border-radius:5px;opacity:0}
.is-pop .sg-stack i{opacity:1;animation:sgBlockDrop .5s cubic-bezier(.2,.85,.32,1.22) backwards,sgBlockMorph .7s ease backwards}
.is-pop .sg-stack i:nth-of-type(1){animation-delay:.05s,1.6s}
.is-pop .sg-stack i:nth-of-type(2){animation-delay:.14s,1.69s}
.is-pop .sg-stack i:nth-of-type(3){animation-delay:.23s,1.78s}
.is-pop .sg-stack i:nth-of-type(4){animation-delay:.32s,1.87s}
@keyframes sgBlockDrop{0%{opacity:0;transform:translateY(-30px) scale(1.2)}60%{opacity:1;transform:translateY(2.5px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes sgBlockMorph{0%,100%{border-radius:5px;background:#000}50%{border-radius:50%;background:#E0922F}}
.is-pop .sg-stack{animation:sgBuzz .34s linear .82s 2}
@keyframes sgBuzz{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-1.6px,.9px) rotate(-3.5deg)}50%{transform:translate(1.6px,-.9px) rotate(3.5deg)}75%{transform:translate(-1px,-.8px) rotate(-2.5deg)}}
.sg-stack-ring{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:1.5px solid rgba(224,146,47,.8);border-radius:50%;opacity:0;pointer-events:none}
.is-pop .sg-stack-ring{animation:sgRing .8s ease-out .82s 2}
@keyframes sgRing{0%{opacity:.85;transform:scale(.5)}100%{opacity:0;transform:scale(1.9)}}

/* ---------------------------------------------------------------------------
   The meeting moment: when the hands touch, a dark-gold haze swallows the
   fingertips, the SABAI AI mark resolves really big inside it, and a single
   flash crowns the first contact. Driven by --contact on the stage. */
.sg-meet-glow{position:absolute;left:50%;top:42%;width:clamp(240px,34vw,460px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:4;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(20,16,10,.94) 0%,rgba(33,25,13,.74) 34%,rgba(224,146,47,.34) 56%,rgba(224,146,47,.1) 68%,transparent 79%);filter:blur(6px);opacity:clamp(0,calc((var(--contact,0) - .55) * 2.4),1)}
.sg-meet-logo{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(calc(.72 + var(--contact,0) * .28));z-index:5;pointer-events:none;opacity:clamp(0,calc((var(--contact,0) - .78) * 5),1);transition:opacity .18s linear}
.sg-meet-logo img{display:block;height:clamp(170px,26vw,330px);width:auto;filter:drop-shadow(0 0 26px rgba(224,146,47,.55)) drop-shadow(0 0 80px rgba(224,146,47,.3))}
.sg-meet-flash{position:absolute;left:50%;top:42%;width:clamp(300px,44vw,620px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.25);z-index:6;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(255,246,226,.98) 0%,rgba(244,196,128,.75) 30%,rgba(224,146,47,.3) 55%,transparent 72%);opacity:0}
.is-met .sg-meet-flash{animation:sgMeetFlash 1s ease-out both}
@keyframes sgMeetFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}14%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}
@media (max-width:859.98px){
  .sg-meet-glow{width:clamp(200px,52vw,320px)}
  .sg-meet-logo img{height:clamp(140px,36vw,220px)}
}

/* ---------------------------------------------------------------------------
   Talk to Sabai: the page-level launch bar and an audio-call room represented
   by a capability-adaptive synthetic particle-human field. */
.sg-talk-section{padding:56px 18px;background:linear-gradient(180deg,var(--site-paper) 0%,#080807 56px,#080807 calc(100% - 56px),var(--site-paper) 100%)!important;position:relative;z-index:56;overflow:hidden}
.sg-talk-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 82% 50%,rgba(224,146,47,.17),transparent 34%),linear-gradient(90deg,transparent,rgba(255,255,255,.025),transparent);opacity:.8}
.sg-talk-bar{position:relative;z-index:1;width:100%;min-height:126px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:clamp(18px,3vw,34px);padding:20px clamp(20px,3.5vw,38px);text-align:left;color:#f7f2e8;background:rgba(255,255,255,.035);border:1px solid rgba(240,192,122,.22);border-radius:18px;overflow:hidden;transition:border-color .3s ease,background .3s ease,transform .3s cubic-bezier(.23,1,.32,1)}
.sg-talk-bar::after{content:"";position:absolute;inset:8px;pointer-events:none;background:linear-gradient(#E0922F,#E0922F) left top/12px 1px no-repeat,linear-gradient(#E0922F,#E0922F) left top/1px 12px no-repeat,linear-gradient(#E0922F,#E0922F) right bottom/12px 1px no-repeat,linear-gradient(#E0922F,#E0922F) right bottom/1px 12px no-repeat;opacity:.65}
.sg-talk-bar:hover{border-color:rgba(240,192,122,.58);background:rgba(255,255,255,.06);transform:translateY(-2px)}
.sg-talk-signal{height:54px;width:36px;display:flex;align-items:center;justify-content:center;gap:3px}
.sg-talk-signal i{display:block;width:3px;height:12px;border-radius:99px;background:#E0922F;box-shadow:0 0 9px rgba(224,146,47,.5);animation:sgTalkSignal 1.1s ease-in-out infinite;transform-origin:center}
.sg-talk-signal i:nth-child(2),.sg-talk-signal i:nth-child(4){animation-delay:-.44s}.sg-talk-signal i:nth-child(3){animation-delay:-.72s}.sg-talk-signal i:nth-child(5){animation-delay:-.2s}
@keyframes sgTalkSignal{0%,100%{height:10px;opacity:.5}50%{height:42px;opacity:1}}
.sg-talk-copy{display:flex;min-width:0;flex-direction:column;align-items:flex-start}
.sg-talk-kicker{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-family:'Fragment Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#d6aa6b}
.sg-talk-live-dot{display:block;width:7px;height:7px;border-radius:50%;background:#E0922F;box-shadow:0 0 0 4px rgba(224,146,47,.12),0 0 14px rgba(224,146,47,.7)}
.sg-talk-title{font-family:var(--font-display);font-weight:400;font-size:clamp(25px,3.3vw,38px);line-height:1;letter-spacing:-.015em;color:#fff}
.sg-talk-title em{font-family:inherit;font-weight:inherit;color:#F0C07A}
.sg-talk-description{max-width:600px;margin-top:9px;font-family:var(--font-body);font-size:13.5px;line-height:1.5;color:rgba(245,240,230,.62)}
.sg-talk-face{position:relative;width:76px;height:76px;border-radius:50%;padding:4px;background:#0d0c0a;border:1px solid rgba(240,192,122,.3);box-shadow:0 0 34px rgba(224,146,47,.15);flex-shrink:0}
.sg-talk-particle-avatar{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 42%,rgba(80,221,229,.13),transparent 58%),#080a0a}
.sg-talk-particle-avatar i{position:absolute;display:block;background-image:radial-gradient(circle,rgba(224,245,235,.92) 0 1px,transparent 1.4px);background-size:6px 6px;filter:drop-shadow(0 0 3px rgba(86,220,226,.65))}
.sg-talk-particle-avatar i:first-child{left:23px;top:11px;width:24px;height:29px;border-radius:48% 48% 44% 44%}
.sg-talk-particle-avatar i:last-child{left:12px;top:39px;width:46px;height:26px;border-radius:48% 48% 18% 18%;background-image:radial-gradient(circle,rgba(224,192,122,.88) 0 1px,transparent 1.4px)}
.sg-talk-face-ring{position:absolute;inset:-7px;border:1px dashed rgba(240,192,122,.38);border-radius:50%;animation:sgSpin 14s linear infinite}
.sg-talk-action{display:flex;align-items:center;gap:10px;white-space:nowrap;font-family:var(--font-body);font-weight:600;font-size:13px;color:#F0C07A}
.sg-talk-action span{display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(240,192,122,.35);border-radius:50%;transition:transform .25s ease,background .25s ease}
.sg-talk-bar:hover .sg-talk-action span{transform:translate(2px,-2px);background:rgba(224,146,47,.14)}

html.sg-talk-modal-open{overflow:hidden}
/* Native <dialog> renders in the browser's top layer, above every ordinary
   z-index. The page-wide custom cursor cannot follow it there, so restore the
   native pointer for the complete modal lifecycle instead of leaving visitors
   with an invisible cursor over working controls. */
html.sg-talk-modal-open #sg-pixel-cursor{opacity:0!important}
html.sg-cursor-ready.sg-talk-modal-open,
html.sg-cursor-ready.sg-talk-modal-open body,
html.sg-cursor-ready.sg-talk-modal-open .sg-talk-dialog{cursor:auto!important}
html.sg-cursor-ready.sg-talk-modal-open .sg-talk-dialog button{cursor:pointer!important}
.sg-talk-dialog{width:min(1120px,calc(100vw - 24px));height:min(760px,calc(100svh - 24px));max-width:none;max-height:none;padding:0;border:0;border-radius:24px;background:#090909;color:#f5f0e6;box-shadow:0 36px 120px rgba(0,0,0,.72);overflow:hidden}
.sg-talk-dialog::backdrop{background:rgba(3,3,3,.88)}
.sg-talk-dialog[open]{animation:sgTalkModalIn .46s cubic-bezier(.16,1,.3,1) both}
@keyframes sgTalkModalIn{from{opacity:0;transform:translateY(20px) scale(.975)}to{opacity:1;transform:none}}
.sg-talk-modal{position:relative;width:100%;height:100%;background:#060606;isolation:isolate}
.sg-talk-close{position:absolute;right:20px;top:20px;z-index:20;width:42px;height:42px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(8,8,8,.82)}
.sg-talk-close span::before,.sg-talk-close span::after{content:"";position:absolute;left:13px;top:20px;width:16px;height:1px;background:#f5f0e6}.sg-talk-close span::before{transform:rotate(45deg)}.sg-talk-close span::after{transform:rotate(-45deg)}
.sg-talk-close:hover{border-color:#E0922F;background:rgba(224,146,47,.12)}
.sg-talk-avatar-column{width:100%;height:100%}
.sg-talk-stage{position:relative;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 26%,rgba(46,78,134,.42),transparent 54%),radial-gradient(circle at 86% 8%,rgba(94,90,168,.16),transparent 44%),radial-gradient(circle at 8% 90%,rgba(24,104,124,.18),transparent 46%),linear-gradient(168deg,#0a1424 0,#050910 54%,#02040a 100%);isolation:isolate;contain:strict}
.sg-talk-stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.78),transparent 24%,transparent 76%,rgba(0,0,0,.78))}
.sg-talk-stage::after{content:"";position:absolute;inset:auto 0 0;z-index:3;height:45%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(0,0,0,.88) 76%)}
/* Sabai is always a synthetic 3D particle-human form. Three.js draws one
   batched point cloud; CSS filters stay off so the canvas remains cheap to
   composite. A bounded 2D field is retained only for WebGL failure. */
.sg-talk-field{position:absolute;left:50%;top:0;display:block;width:min(100%,760px);height:100%;z-index:1;opacity:1;transform:translate3d(-50%,0,0);pointer-events:none;backface-visibility:hidden;transition:opacity .25s ease}
.sg-talk-stage[data-particle-renderer="loading"] .sg-talk-field{opacity:.18}
.sg-talk-stage[data-particle-renderer="three"] .sg-talk-field,.sg-talk-stage[data-particle-renderer="2d-fallback"] .sg-talk-field{opacity:1}
.sg-talk-stage-glow{position:absolute;left:50%;bottom:0;width:min(100%,760px);height:42%;z-index:2;pointer-events:none;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 100%,rgba(126,196,235,.13),transparent 68%);transition:opacity .2s ease}
.sg-talk-scan{position:absolute;left:50%;top:0;width:min(100%,760px);height:100%;z-index:2;pointer-events:none;transform:translateX(-50%);background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px);opacity:.5;transition:opacity .2s ease}
/* Preserve a subtle call-room texture without obscuring the particle form. */
.sg-talk-stage.is-field-live .sg-talk-stage-glow{opacity:.72}
.sg-talk-stage.is-field-live .sg-talk-scan{opacity:.26}
.sg-talk-call-header{position:absolute;left:22px;right:74px;top:20px;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:18px}
.sg-talk-call-identity{display:flex;align-items:center;gap:12px;padding:10px 13px;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:rgba(8,8,8,.78)}
.sg-talk-call-identity h2{margin:0;font-family:var(--font-body);font-size:15px;font-weight:650;line-height:1.2;letter-spacing:-.01em;color:#fff}
.sg-talk-call-identity div>span{display:block;margin-top:2px;font-family:var(--font-body);font-size:11px;color:rgba(255,255,255,.68)}
.sg-talk-call-meta{display:flex;align-items:center;gap:9px}
.sg-talk-disclosure,.sg-talk-duration{padding:7px 10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(8,8,8,.78);font-family:'Fragment Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.sg-talk-duration{font-variant-numeric:tabular-nums;color:#fff}
.sg-talk-status-dot{width:7px;height:7px;border-radius:50%;background:#8b8b86;box-shadow:0 0 0 4px rgba(139,139,134,.1)}
.sg-talk-status-dot.is-ready{background:#58c58b;box-shadow:0 0 0 4px rgba(88,197,139,.12),0 0 12px rgba(88,197,139,.5)}
.sg-talk-status-dot.is-busy{background:#E0922F;box-shadow:0 0 0 4px rgba(224,146,47,.12),0 0 12px rgba(224,146,47,.55);animation:sgBlink 1.2s steps(2,end) infinite}
.sg-talk-status-dot.is-error{background:#e27664;box-shadow:0 0 0 4px rgba(226,118,100,.12)}
.sg-talk-self-view{position:absolute;right:22px;bottom:174px;z-index:10;width:174px;height:104px;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:end;gap:9px;padding:13px;border:1px solid rgba(255,255,255,.18);border-radius:15px;background:linear-gradient(145deg,rgba(30,29,27,.94),rgba(9,9,9,.94));box-shadow:0 14px 36px rgba(0,0,0,.34)}
.sg-talk-self-avatar{align-self:center;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#2c2924;color:#e6c08d;font-family:var(--font-body);font-weight:600;font-size:13px}
.sg-talk-self-copy{align-self:center;display:flex;min-width:0;flex-direction:column;font-family:var(--font-body)}.sg-talk-self-copy strong{font-size:12px;color:#fff}.sg-talk-self-copy small{margin-top:2px;font-size:9.5px;color:rgba(255,255,255,.55)}
.sg-talk-self-mic{align-self:center;display:flex;align-items:center;gap:2px;height:20px}.sg-talk-self-mic i{display:block;width:2px;height:5px;border-radius:2px;background:#78d59e;animation:sgTalkSelfMic .8s ease-in-out infinite;animation-play-state:paused}.sg-talk-self-mic i:nth-child(2){animation-delay:-.22s}.sg-talk-self-mic i:nth-child(3){animation-delay:-.43s}
.sg-talk-stage[data-state="listening"] .sg-talk-self-mic i{animation-play-state:running}
@keyframes sgTalkSelfMic{0%,100%{height:5px}50%{height:18px}}
.sg-talk-control-column{position:absolute;left:0;right:0;bottom:0;z-index:8;display:flex;flex-direction:column;align-items:center;padding:130px 210px 17px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.3) 28%,rgba(0,0,0,.88) 70%,rgba(0,0,0,.96));pointer-events:none}
.sg-talk-control-column>*{pointer-events:auto}
.sg-talk-intro{margin:0 0 8px;font-family:var(--font-body);font-size:12px;color:rgba(255,255,255,.58);transition:opacity .2s ease}
.sg-talk-dialog.is-call-active .sg-talk-intro{opacity:0;height:0;margin:0;overflow:hidden}
.sg-talk-transcript{width:min(100%,680px);max-height:112px;overflow:auto;padding:10px 15px;text-align:center;background:rgba(5,5,5,.48);border:1px solid rgba(255,255,255,.11);border-radius:14px;scrollbar-width:none}
.sg-talk-transcript::-webkit-scrollbar{display:none}
.sg-talk-line+ .sg-talk-line{margin-top:7px}
.sg-talk-line span{display:inline;margin-right:7px;font-family:'Fragment Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#e4ae61}.sg-talk-line.is-user span{color:#9dbca9}
.sg-talk-line p{display:inline;font-family:var(--font-body);font-size:13px;line-height:1.45;color:#fff;margin:0;text-shadow:0 1px 8px rgba(0,0,0,.72)}.sg-talk-line.is-user p{color:rgba(255,255,255,.8)}
.sg-talk-controls{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:10px}
.sg-talk-start,.sg-talk-end{min-height:48px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:0 22px;font-family:var(--font-body);font-weight:650;font-size:12.5px;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}
.sg-talk-start[hidden],.sg-talk-end[hidden]{display:none!important}
.sg-talk-start{background:#e7a247;color:#15110b;border:1px solid #efb766}.sg-talk-start:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(224,146,47,.26)}.sg-talk-start:disabled{cursor:wait;opacity:.62;transform:none;box-shadow:none}
.sg-talk-end{background:#d94b49;color:#fff;border:1px solid #ed6d69}.sg-talk-end:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(217,75,73,.24)}
.sg-talk-call-icon,.sg-talk-hangup-icon{display:block;width:17px;height:17px}.sg-talk-call-icon svg,.sg-talk-hangup-icon svg{display:block;width:100%;height:100%}.sg-talk-hangup-icon{transform:rotate(135deg)}
.sg-talk-feedback{min-height:15px;margin:7px 0 0;font-family:var(--font-body);font-size:10.5px;line-height:1.4;color:rgba(255,255,255,.62)}.sg-talk-feedback.is-error{color:#f2a39b}
.sg-talk-privacy{margin:7px 0 0;font-family:var(--font-body);font-size:9.5px;line-height:1.4;color:rgba(255,255,255,.4)}

@media (max-width:839.98px){
  .sg-talk-bar{grid-template-columns:auto minmax(0,1fr) auto}.sg-talk-action{grid-column:2/4}.sg-talk-face{grid-row:1/3;grid-column:3}.sg-talk-description{max-width:520px}
  .sg-talk-dialog{width:calc(100vw - 16px);height:calc(100svh - 16px)}.sg-talk-control-column{padding-right:154px;padding-left:154px}.sg-talk-self-view{width:136px;height:84px;bottom:180px}.sg-talk-stage::before{background:linear-gradient(90deg,rgba(0,0,0,.5),transparent 14%,transparent 86%,rgba(0,0,0,.5))}
}
@media (max-width:559.98px){
  .sg-talk-section{padding:12px}.sg-talk-bar{grid-template-columns:28px minmax(0,1fr);gap:14px;padding:19px}.sg-talk-signal{width:28px}.sg-talk-face{display:none}.sg-talk-action{grid-column:2;font-size:12px}.sg-talk-description{font-size:12.5px}.sg-talk-kicker{font-size:9px;letter-spacing:.09em}
  .sg-talk-dialog{width:100vw;height:100svh;border-radius:0}.sg-talk-close{right:12px;top:12px;width:40px;height:40px}.sg-talk-close span::before,.sg-talk-close span::after{top:19px}.sg-talk-call-header{left:12px;right:59px;top:12px}.sg-talk-call-identity{padding:8px 10px}.sg-talk-call-meta{gap:5px}.sg-talk-disclosure{padding:5px 7px;font-size:8px;letter-spacing:.06em}.sg-talk-duration{padding:6px 8px}.sg-talk-self-view{right:12px;bottom:205px;width:116px;height:70px;grid-template-columns:30px 1fr;padding:10px}.sg-talk-self-avatar{width:30px;height:30px}.sg-talk-self-mic{display:none}.sg-talk-control-column{padding:120px 12px 13px}.sg-talk-transcript{max-height:104px;padding:9px 11px}.sg-talk-line p{font-size:12.5px}.sg-talk-intro{font-size:11px}.sg-talk-privacy{max-width:300px;text-align:center}.sg-talk-stage::before{display:none}.sg-talk-field{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .sg-talk-signal i,.sg-talk-face-ring,.sg-talk-self-mic i{animation:none!important}.sg-talk-dialog[open]{animation:none}
}

/* ---------------------------------------------------------------------------
   Bilingual public-site chrome and editorial pages. The cinematic home keeps
   its established portal and Talk treatments; every other route uses this
   quieter shared system. */
:root{--font-body:'Pridi','Noto Sans Thai',Georgia,serif;--font-display:'Righteous','Mitr','Noto Sans Thai',Tahoma,sans-serif;--site-nav-height:68px;--site-ink:#11110f;--site-paper:#ece7db;--site-cream:#fffaf0;--site-gold:#e0922f;--site-cyan:#58d8e6;--site-line:rgba(17,17,15,.16);--site-muted:#696861}
html{scroll-behavior:smooth}
body{overflow-x:clip;background:var(--site-paper)}
#sg-swarm{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:55;opacity:0}
html:lang(th) body{font-family:'Pridi','Noto Sans Thai',Tahoma,serif}
.site-skip{position:fixed;left:16px;top:12px;z-index:200;transform:translateY(-160%);padding:10px 14px;border-radius:999px;background:#fff;color:#111;font-weight:700;transition:transform .18s ease}
.site-skip:focus{transform:none}
.site-nav{position:sticky;top:0;z-index:61;width:100%;height:68px;border-bottom:1px solid rgba(255,255,255,.09);background:#090908;color:#fff;transition:box-shadow .2s ease,background .2s ease}
.site-nav.scrolled{box-shadow:0 12px 34px rgba(0,0,0,.2);background:rgba(9,9,8,.96)}
.site-nav-inner{width:min(1180px,calc(100% - 40px));height:100%;margin:0 auto;display:flex;align-items:center;gap:28px}
.site-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;letter-spacing:-.02em;white-space:nowrap}.site-brand:hover{color:#fff}
.site-brand-mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(240,192,122,.42);border-radius:50%;color:#f0c07a;font-family:'Fragment Mono',monospace;font-size:11px;box-shadow:0 0 20px rgba(224,146,47,.14)}
.site-brand-mark img{display:block;width:18px;height:auto}
.site-nav-links{display:flex;align-items:center;gap:24px;margin-left:auto}.site-nav-links a,.site-language{color:rgba(255,255,255,.72);font-size:13px}.site-nav-links a:hover,.site-nav-links a[aria-current="page"],.site-language:hover{color:#fff}
.site-nav-actions{display:flex;align-items:center;gap:12px}.site-language{padding:8px 9px;border:1px solid rgba(255,255,255,.16);border-radius:999px;font-family:'Fragment Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.site-member-login{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 13px;border:1px solid rgba(240,192,122,.46);border-radius:999px;color:#f0c07a;font-size:12px;font-weight:700;white-space:nowrap}.site-member-login:hover{border-color:#f0c07a;color:#fff}
.site-nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 16px;border-radius:999px;background:#e7a247;color:#17120b;font-weight:700;font-size:12px}.site-nav-cta:hover{background:#f2b35d;color:#17120b}
.site-menu-toggle{display:none;width:42px;height:38px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:transparent;color:#fff;font-size:20px}
.site-menu-toggle span{display:block;width:17px;height:1px;margin:5px auto;background:currentColor}
.site-mobile-menu{display:none;position:absolute;left:0;right:0;top:68px;padding:16px 20px 22px;background:#0b0b0a;border-bottom:1px solid rgba(255,255,255,.12)}.site-mobile-menu.open{display:grid;gap:4px}.site-mobile-menu a{display:block;padding:12px;color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.08)}

.site-hero{position:relative;background:#080807;color:#fff}.sg-hero-copy h1{max-width:850px;margin:0;color:#fff;font-family:var(--font-display);font-size:clamp(36px,4.5vw,58px);font-weight:400;line-height:.98;letter-spacing:-.025em;text-wrap:balance}.sg-hero-copy>p{max-width:650px;margin:18px 0 0;color:rgba(255,255,255,.78);font-size:clamp(15px,1.7vw,19px);line-height:1.55;text-wrap:balance}.site-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}
.site-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 19px;border:1px solid transparent;border-radius:999px;font-size:13px;font-weight:700;transition:transform .18s ease,background .18s ease,border-color .18s ease}.site-button:hover{transform:translateY(-2px)}.site-button-gold{background:#e7a247;color:#17120b}.site-button-gold:hover{background:#f3b761;color:#17120b}.site-button-ghost{border-color:rgba(255,255,255,.28);background:rgba(8,8,7,.28);color:#fff}.site-button-ghost:hover{border-color:rgba(255,255,255,.6);color:#fff}.site-button-dark{background:#11110f;color:#fff}.site-button-dark:hover{background:#2a2925;color:#fff}.site-button-light{border-color:rgba(255,255,255,.3);color:#fff}.site-button-light:hover{background:#fff;color:#111}.site-text-link{display:inline-flex;align-items:center;gap:8px;font-weight:700}.site-text-link::after{content:"→"}
.site-signal-bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:8px 28px;padding:76px 20px 14px;border-bottom:1px solid #cfc8b6;background:linear-gradient(180deg,#080807 0%,#211e18 24%,#4a4335 46%,#7d735c 64%,#aca18a 80%,#d5cdb9 90%,#ece7db 100%);color:#5e5c55;font-family:'Fragment Mono',monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase}
.site-home-shell{background:var(--site-paper)}.site-section{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:92px 0}.site-section-heading{max-width:880px;margin-bottom:38px}.site-section-heading h2,.site-content-heading h2{margin:9px 0 0;color:var(--site-ink);font-family:var(--font-display);font-size:clamp(34px,4.4vw,58px);font-weight:400;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}.site-section-heading p,.site-content-heading p{max-width:680px;margin:17px 0 0;color:var(--site-muted);font-size:16px;line-height:1.7}.site-kicker{color:#9a5b0c;font-family:'Fragment Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.site-section-action{margin-top:30px}
.site-domain-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--site-line);border-left:1px solid var(--site-line)}.site-domain-card{min-height:184px;padding:24px;border-right:1px solid var(--site-line);border-bottom:1px solid var(--site-line);background:rgba(255,255,255,.38)}.site-domain-card span{font-family:'Fragment Mono',monospace;font-size:10px;color:#a46210}.site-domain-card h3{margin:25px 0 9px;font-size:17px;letter-spacing:-.025em}.site-domain-card p{margin:0;color:var(--site-muted);font-size:14px;line-height:1.55}
.site-proof-section{width:auto;padding:92px max(20px,calc((100vw - 1180px)/2));background:#10100e;color:#fff}.site-proof-section .site-section-heading h2{color:#fff}.site-proof-section .site-section-heading p{color:rgba(255,255,255,.62)}
.site-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.site-feature-card{padding:25px;border:1px solid rgba(17,17,15,.14);background:#fff}.site-feature-card-dark{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.045)}.site-feature-card h3{margin:12px 0 10px;font-size:20px;letter-spacing:-.03em}.site-feature-card p{margin:0;color:var(--site-muted);line-height:1.6}.site-feature-card-dark p{color:rgba(255,255,255,.62)}.site-status,.site-attestation{display:inline-flex;padding:6px 8px;border:1px solid currentColor;border-radius:999px;color:#b86c10;font-family:'Fragment Mono',monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase}.site-feature-card-dark .site-status{color:#e2aa60}
.site-feature-card-dark .site-text-link{color:#f0c07a}.site-feature-card-dark .site-text-link:hover{color:#ffd89c}
.site-split-panel{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:50px;align-items:start}.site-split-panel h2,.site-leadership-preview h2{margin:8px 0 0;font-size:clamp(34px,4.2vw,56px);line-height:1.02;letter-spacing:-.045em}.site-split-panel p{margin:0 0 18px;color:var(--site-muted);font-size:16px;line-height:1.7}
.site-leadership-preview{padding-top:0}.site-leader-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}.site-leader-card{position:relative;display:flex;min-height:520px;flex-direction:column;overflow:hidden;padding:0;border:1px solid var(--site-line);background:#fff}.site-leader-portrait-link{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#11110f;color:#fff}.site-leader-portrait{display:block;width:100%;height:100%}.site-leader-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 24%;transition:scale .5s cubic-bezier(.16,1,.3,1),filter .35s ease}.site-leader-portrait-link::after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(transparent,rgba(9,9,8,.62));pointer-events:none}.site-leader-portrait-link:hover img,.site-leader-portrait-link:focus-visible img{scale:1.025;filter:saturate(1.05) contrast(1.02)}.site-leader-card-copy{display:flex;flex:1;flex-direction:column;padding:26px}.site-leader-card h2{margin:8px 0 11px;font-size:clamp(24px,2.7vw,34px);line-height:1.04;letter-spacing:-.035em}.site-leader-card h2 a{color:inherit;text-decoration:none}.site-role{margin:0;color:#9b5b0b;font-size:12px;font-weight:700}.site-leader-card-copy>p:not(.site-role){margin:0;color:var(--site-muted);line-height:1.65}.site-leader-profile-link{margin-top:auto;padding-top:19px}.site-leader-monogram{position:absolute;right:18px;bottom:14px;z-index:1;color:#f4c480;font-family:'Fragment Mono',monospace;font-size:18px;letter-spacing:.12em;text-shadow:0 2px 18px rgba(0,0,0,.75)}
/* Doc's book highlight inside his leadership card. The gold-ruled cream panel
   echoes .site-review-note so it reads as an accent, not a new component. */
.site-leader-book{margin-top:22px;padding:18px 20px;border:1px solid rgba(224,146,47,.42);border-left:3px solid var(--site-gold);border-radius:8px;background:#fff5e1}
.site-leader-book .site-kicker{color:#9a5b0c}
.site-leader-book-title{margin:9px 0 7px;font-size:19px;font-weight:700;letter-spacing:-.02em}
.site-leader-book-title cite{font-style:normal}
.site-leader-book-body{margin:0;color:var(--site-muted);font-size:14px;line-height:1.6}
.site-leader-book .site-text-link{margin-top:12px;font-size:13px}
.site-final-cta{padding:86px max(20px,calc((100vw - 1180px)/2));background:#cd7f24;color:#17120b}.site-final-cta h2{max-width:850px;margin:0;font-size:clamp(38px,5.2vw,66px);line-height:1;letter-spacing:-.05em}.site-final-cta p{max-width:650px;margin:18px 0 25px;font-size:17px;line-height:1.6}
.site-newsletter{display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);gap:clamp(36px,7vw,92px);align-items:start;padding:78px max(20px,calc((100vw - 1180px)/2));background:#151512;color:#fff}.site-newsletter-copy h2{max-width:600px;margin:11px 0 0;font-family:var(--font-display);font-size:clamp(34px,4.4vw,56px);font-weight:400;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}.site-newsletter-copy p{max-width:570px;margin:17px 0 0;color:rgba(255,255,255,.64);font-size:16px;line-height:1.7}.site-newsletter-form{display:grid;gap:17px;padding:28px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.045)}.site-newsletter-email{display:grid;gap:9px;color:rgba(255,255,255,.78);font-size:12px;font-weight:700}.site-newsletter-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}.site-newsletter-input-row input{width:100%;min-height:48px;padding:0 15px;border:1px solid rgba(255,255,255,.25);border-radius:4px;background:#fff;color:#17120b;font:inherit}.site-newsletter-input-row input:focus-visible,.site-newsletter-consent input:focus-visible{outline:3px solid #f0b86b;outline-offset:3px}.site-newsletter-input-row .site-button{border-radius:4px;white-space:nowrap}.site-newsletter-consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;color:rgba(255,255,255,.78);font-size:12px;line-height:1.55}.site-newsletter-consent input{width:18px;height:18px;margin:1px 0 0;accent-color:#e7a247}.site-newsletter-note,.site-newsletter-status{margin:0;color:rgba(255,255,255,.5);font-size:11px;line-height:1.55}.site-newsletter-note a{color:#f1bc75;text-decoration:underline;text-underline-offset:3px}.site-newsletter-status{min-height:18px;color:#f3c98f;font-weight:650}.site-newsletter-form.is-pending{opacity:.78}.site-newsletter-form.is-pending button{cursor:wait}
.site-footer{padding:52px max(20px,calc((100vw - 1180px)/2)) 24px;background:#080807;color:#fff}.site-footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:42px}.site-footer-brand p{max-width:440px;color:rgba(255,255,255,.55);line-height:1.6}.site-footer-links{display:grid;align-content:start;gap:10px}.site-footer-links strong{margin-bottom:4px;font-size:12px}.site-footer-links a{color:rgba(255,255,255,.65);font-size:13px}.site-footer-links a:hover{color:#fff}.site-footer-rule{margin:40px 0 18px;border:0;border-top:1px solid rgba(255,255,255,.12)}.site-footer-meta{display:flex;justify-content:space-between;gap:20px;color:rgba(255,255,255,.43);font-family:'Fragment Mono',monospace;font-size:9px;line-height:1.6}.site-footer-meta a{color:rgba(255,255,255,.58)}

/* Soft section blends: gradient strips ease the hard dark↔light cuts between
   adjacent sections while scrolling. They sit beneath the content layer so
   copy and cards stay fully legible over them. */
.site-proof-section,.site-final-cta,.site-content-section-dark{position:relative}
.site-proof-section::before,.site-proof-section::after,.site-final-cta::before,.site-final-cta::after,.site-content-section-dark::before{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.site-proof-section::before,.site-content-section-dark::before{top:0;height:88px;background:linear-gradient(180deg,var(--site-paper),rgba(16,16,14,0))}
.site-proof-section::after{bottom:0;height:88px;background:linear-gradient(0deg,var(--site-paper),rgba(16,16,14,0))}
.site-final-cta::before{top:0;height:86px;background:linear-gradient(180deg,var(--site-paper),rgba(205,127,36,0))}
.site-final-cta::after{bottom:0;height:86px;background:linear-gradient(0deg,#080807,rgba(8,8,7,0))}
.site-proof-section>*,.site-final-cta>*,.site-content-section-dark>*{position:relative;z-index:2}
/* Inner pages: the dark page hero hands off to the first paper content band. */
.site-page-hero + .site-content-section{position:relative}
.site-page-hero + .site-content-section::before{content:"";position:absolute;left:0;right:0;top:0;z-index:1;height:80px;pointer-events:none;background:linear-gradient(180deg,#11110f,rgba(17,17,15,0))}
.site-page-hero + .site-content-section>*{position:relative;z-index:2}
@media (max-width:620px){
  .site-proof-section::before,.site-proof-section::after,.site-final-cta::before,.site-final-cta::after{height:64px}
  .site-content-section-dark::before,.site-page-hero + .site-content-section::before{height:60px}
  .site-signal-bar{padding-top:64px}
  /* Close the dead air between the leadership copy and the final CTA on phones. */
  .site-section.site-leadership-preview{padding-bottom:44px}
}

.site-page-hero{padding:92px 20px 82px;background:#11110f;color:#fff}.site-page-hero-inner{width:min(920px,100%);margin:0 auto}.site-page-hero h1{margin:13px 0 17px;font-size:clamp(44px,6.2vw,78px);line-height:.98;letter-spacing:-.055em;text-wrap:balance}.site-page-hero p{max-width:720px;margin:0;color:rgba(255,255,255,.7);font-size:18px;line-height:1.65}.site-page-updated{display:block;margin-top:24px;color:#d6a15b;font-family:'Fragment Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase}.site-content-section{padding:80px max(20px,calc((100vw - 1000px)/2));background:var(--site-paper)}.site-content-section-tint{background:#e0dac8}.site-content-section-dark{background:#10100e;color:#fff}.site-content-section-dark .site-content-heading h2{color:#fff}.site-content-section-dark .site-content-heading p{color:rgba(255,255,255,.62)}.site-content-heading{max-width:760px;margin-bottom:36px}
.site-step-list{display:grid;gap:10px}.site-step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding:22px 0;border-top:1px solid var(--site-line)}.site-step:last-child{border-bottom:1px solid var(--site-line)}.site-step>span{font-family:'Fragment Mono',monospace;color:#a76210}.site-step h3{margin:0 0 7px;font-size:22px}.site-step p{margin:0;color:var(--site-muted);line-height:1.65}
.site-two-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.site-callout{padding:27px;border:1px solid var(--site-line);background:#fff}.site-callout h3{margin:0 0 12px;font-size:22px}.site-callout p{margin:0;color:var(--site-muted);line-height:1.65}.site-callout-dark{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.04)}.site-callout-dark p{color:rgba(255,255,255,.62)}.site-roadmap-cta{max-width:820px;padding:38px}.site-roadmap-cta h2{margin:12px 0 14px;color:#fff;font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:-.045em}.site-roadmap-cta p{max-width:650px}.site-roadmap-cta .site-button{margin-top:24px}.site-check-list{margin:16px 0 0;padding:0;list-style:none}.site-check-list li{position:relative;padding:10px 0 10px 24px;border-bottom:1px solid var(--site-line);line-height:1.6}.site-check-list li::before{content:"·";position:absolute;left:5px;color:#b16a13;font-size:22px}
.site-evidence-list{display:grid;gap:18px}.site-evidence-card{padding:30px;border:1px solid var(--site-line);background:#fff}.site-evidence-head{display:flex;align-items:start;justify-content:space-between;gap:20px}.site-evidence-head h2{margin:0;font-size:clamp(26px,3.2vw,38px);letter-spacing:-.04em}.site-evidence-card dl{display:grid;grid-template-columns:180px minmax(0,1fr);gap:0;margin:25px 0 0}.site-evidence-card dt,.site-evidence-card dd{margin:0;padding:13px 0;border-top:1px solid var(--site-line);line-height:1.6}.site-evidence-card dt{font-weight:700}.site-evidence-card dd{color:var(--site-muted)}
.site-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.site-contact-card{padding:30px;border:1px solid var(--site-line);background:#fff}.site-contact-card-dark{background:#11110f;color:#fff}.site-contact-card h2{margin:0 0 12px;font-size:28px}.site-contact-card p{color:var(--site-muted);line-height:1.65}.site-contact-card-dark p{color:rgba(255,255,255,.65)}.site-email{display:inline-block;margin:10px 0;font-size:clamp(20px,3vw,30px);font-weight:700;overflow-wrap:anywhere}.site-small-print{font-size:12px}.site-policy-list{display:grid;gap:20px}.site-policy-list section{padding-bottom:20px;border-bottom:1px solid var(--site-line)}.site-policy-list h2{margin:0 0 10px;font-size:25px}.site-policy-list p,.site-policy-list li{color:var(--site-muted);line-height:1.7}.site-review-note{margin:0;padding:20px;border-left:3px solid var(--site-gold);background:#fff5e1;line-height:1.65}.site-404-th{margin-top:16px;color:rgba(255,255,255,.48)!important}

.site-404-th:lang(th){font-family:'Noto Sans Thai',Tahoma,sans-serif}
.site-split-panel h2,.site-leadership-preview h2,.site-final-cta h2,.site-newsletter h2,.site-page-hero h1,.site-roadmap-cta h2,.site-evidence-head h2,.site-contact-card h2,.site-policy-list h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em}
html:lang(th) .sg-talk-title,html:lang(th) .sg-hero-copy h1,html:lang(th) .site-section-heading h2,html:lang(th) .site-content-heading h2,html:lang(th) .site-split-panel h2,html:lang(th) .site-leadership-preview h2,html:lang(th) .site-final-cta h2,html:lang(th) .site-newsletter h2,html:lang(th) .site-page-hero h1,html:lang(th) .site-roadmap-cta h2,html:lang(th) .site-evidence-head h2,html:lang(th) .site-contact-card h2,html:lang(th) .site-policy-list h2{font-family:'Mitr','Pridi','Noto Sans Thai',Tahoma,sans-serif;font-weight:600;letter-spacing:-.025em}

@media (max-width:920px) and (min-width:761px){.site-nav-inner{gap:15px}.site-brand span:last-child{font-size:16px}.site-nav-links{gap:14px}.site-nav-actions{gap:8px}.site-nav-actions .site-nav-cta{display:none}}
@media (max-width:760px){.site-nav-links{display:none}.site-nav-actions{margin-left:auto}.site-nav-actions .site-member-login{display:none}.site-menu-toggle{display:block}.site-domain-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-feature-grid{grid-template-columns:1fr}.site-split-panel,.site-newsletter{grid-template-columns:1fr}.site-footer-grid{grid-template-columns:1fr 1fr}.site-footer-brand{grid-column:1/-1}}
@media (max-width:620px){.site-nav-inner{width:calc(100% - 24px);gap:10px}.site-brand span:last-child{font-size:14px}.site-nav-actions .site-nav-cta{display:none}.sg-hero-copy h1{font-size:clamp(30px,8.4vw,36px);letter-spacing:-.02em}.site-section{width:calc(100% - 32px);padding:68px 0}.site-domain-grid,.site-leader-grid,.site-two-column,.site-contact-grid{grid-template-columns:1fr}.site-domain-card{min-height:0}.site-proof-section{padding-top:68px;padding-bottom:68px}.site-newsletter{padding-top:62px;padding-bottom:62px}.site-newsletter-form{padding:21px}.site-newsletter-input-row{grid-template-columns:1fr}.site-footer-grid{grid-template-columns:1fr}.site-footer-brand{grid-column:auto}.site-footer-meta{flex-direction:column}.site-page-hero{padding-top:70px}.site-page-hero h1{font-size:36px}.site-content-section{padding-top:62px;padding-bottom:62px}.site-step{grid-template-columns:42px minmax(0,1fr)}.site-evidence-card{padding:22px}.site-evidence-head{display:block}.site-evidence-head .site-status{margin-top:12px}.site-evidence-card dl{grid-template-columns:1fr}.site-evidence-card dt{padding-bottom:3px}.site-evidence-card dd{padding-top:0;border-top:0}.site-final-cta{padding-top:68px;padding-bottom:68px}}
@media (max-width:620px){.site-section.sg-intersection-section{width:100vw;margin-left:calc(50% - 50vw);padding:56px 16px 30px}.site-section.site-proof-section{width:100vw;margin-left:calc(50% - 50vw);padding:68px 20px}.site-proof-section .site-feature-card{padding:22px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.site-button,.site-skip{transition:none}}

/* ---------------------------------------------------------------------------
   Internal pages: portal-lit page heroes, the shared blueprint grid, and the
   up-reveal variant. Same language as the cinematic home — aurora light,
   dashed orbit rings, gold signal markers — at editorial intensity. */

[data-reveal="up"]{--sg-reveal-y:26px}
html.sg-reveal-ready [data-reveal="up"]{opacity:0;translate:0 var(--sg-reveal-y)}
html.sg-reveal-ready [data-reveal="up"].is-revealed{animation:sgWhooshUp var(--sg-reveal-duration) cubic-bezier(.16,1,.3,1) var(--sg-reveal-delay) both}
@keyframes sgWhooshUp{from{opacity:0;translate:0 var(--sg-reveal-y)}to{opacity:1;translate:0 0}}
@media (max-width:699.98px){[data-reveal="up"]{--sg-reveal-y:18px}}

.site-page-hero{position:relative;overflow:hidden}
.site-page-hero-inner{position:relative;z-index:1}
.site-page-hero-decor{position:absolute;inset:0;pointer-events:none}
.site-page-hero-decor i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(44px);opacity:.5;mix-blend-mode:screen;
  animation:sgPageAurora 18s ease-in-out infinite alternate;
}
.site-page-hero-decor i:first-child{
  right:-10%;top:-22%;width:32rem;height:26rem;
  background:radial-gradient(circle,rgba(217,119,6,.38),transparent 65%);
}
.site-page-hero-decor i:last-child{
  left:-12%;bottom:-26%;width:28rem;height:24rem;
  background:radial-gradient(circle,rgba(84,229,255,.17),transparent 65%);
  animation-duration:25s;animation-delay:-9s;
}
.site-page-hero-decor span{
  position:absolute;right:5%;top:-4.6rem;width:13.5rem;height:13.5rem;
  border:1px dashed rgba(240,192,122,.27);border-radius:50%;
  animation:sgSpinSlow 70s linear infinite;
}
.site-page-hero-decor span::after{
  content:"";position:absolute;left:50%;top:-4px;width:7px;height:7px;margin-left:-3.5px;
  background:#E0922F;border-radius:1px;box-shadow:0 0 10px rgba(224,146,47,.6);
}
@keyframes sgPageAurora{
  0%{transform:translate3d(-2%,1.5%,0) scale(1.02)}
  50%{transform:translate3d(2%,-2%,0) scale(1.08)}
  100%{transform:translate3d(3%,1%,0) scale(1.04)}
}
@keyframes sgSpinSlow{to{transform:rotate(360deg)}}
.not-found-page .site-page-hero-decor span{animation:sgSpinSlow 26s linear infinite;border-color:rgba(240,192,122,.4)}
.not-found-page .site-page-hero-decor span::after{background:#F4C480;box-shadow:0 0 16px rgba(244,196,128,.85)}
@media (max-width:699.98px){
  .site-page-hero-decor span{right:-3rem;width:10rem;height:10rem}
  .site-page-hero-decor i:first-child{width:22rem;height:18rem}
  .site-page-hero-decor i:last-child{width:18rem;height:16rem}
}
@media (prefers-reduced-motion:reduce){
  .site-page-hero-decor i,.site-page-hero-decor span{animation:none}
}

/* Editorial sections carry the same blueprint grid as the home shell. */
.site-content-section{
  background-image:linear-gradient(rgba(9,9,11,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(9,9,11,.03) 1px,transparent 1px);
  background-size:44px 44px;background-position:center top;
}

/* How-it-works: numbers become gold instrument nodes on the step rail. */
.site-step{transition:transform .25s ease}
.site-step:hover{transform:translateX(5px)}
.site-step>span{
  display:grid;place-items:center;min-width:46px;height:46px;padding:0 6px;
  border:1px solid rgba(167,98,16,.38);border-radius:12px;
  background:rgba(224,146,47,.08);font-size:12px;
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.site-step:hover>span{
  border-color:rgba(224,146,47,.75);background:rgba(224,146,47,.14);
  box-shadow:0 0 18px rgba(224,146,47,.22);
}

/* Leaders: the monogram watermark glows behind the card on hover. */
.site-leader-card{overflow:hidden}
.site-leader-monogram{transition:color .3s ease,text-shadow .3s ease}
@media (hover:hover){
  .site-leader-card:hover .site-leader-monogram{
    color:#E0922F;
    text-shadow:0 0 26px rgba(224,146,47,.5);
  }
}

/* Policy pages: gold signal markers and a calmer reading measure. */
.site-policy-list section{max-width:760px}
.site-policy-list h2{display:flex;align-items:center;gap:11px}
.site-policy-list h2::before{content:"";flex:0 0 7px;width:7px;height:7px;background:#E0922F;transform:rotate(45deg)}
.site-review-note{box-shadow:0 10px 30px rgba(224,146,47,.1)}

/* ---------------------------------------------------------------------------
   404: the lost-signal destination. A full-viewport portal composition —
   the content centered on the page plane, a giant outlined 404 anchoring
   the right depth, and the Thai block presented as a proper panel. */
.not-found-page .site-page-hero{
  min-height:calc(100svh - var(--site-nav-height));
  display:grid;
  align-items:center;
}
.not-found-page .site-page-hero-inner{margin:auto}
.site-404-glyph{
  position:absolute;
  right:clamp(-30px,3vw,110px);
  top:50%;
  translate:0 -50%;
  z-index:0;
  font-family:var(--font-display);
  font-size:clamp(150px,26vw,400px);
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:2px rgba(240,192,122,.22);
  pointer-events:none;
  user-select:none;
  animation:sg404Pulse 5.5s ease-in-out infinite;
}
@keyframes sg404Pulse{
  0%,100%{-webkit-text-stroke-color:rgba(240,192,122,.2);text-shadow:0 0 0 rgba(224,146,47,0)}
  50%{-webkit-text-stroke-color:rgba(240,192,122,.42);text-shadow:0 0 90px rgba(224,146,47,.15)}
}
.not-found-page .site-page-hero-decor span{
  top:calc(50% - 9rem);
  right:clamp(26px,7vw,170px);
  width:18rem;
  height:18rem;
}
.site-404-th{
  max-width:560px;
  margin-top:38px !important;
  padding:18px 22px;
  border:1px solid rgba(255,255,255,.14);
  border-left:3px solid #E0922F;
  border-radius:10px;
  background:rgba(255,255,255,.045);
}
.site-404-th h2{margin:0 0 6px;font-size:16px;color:rgba(255,255,255,.85)}
.site-404-th p{margin:0 0 10px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.55)}
.site-404-th a{color:#F0C07A;font-weight:700}
.site-404-th a:hover{color:#ffd89c}
@media (hover:hover) and (pointer:fine){
  .not-found-page .site-404-th{--sg-z:96px}
}
@media (max-width:699.98px){
  .site-404-glyph{font-size:clamp(120px,34vw,180px);right:-18px;top:34%}
  .not-found-page .site-page-hero-decor span{display:none}
  .site-404-th{margin-top:28px !important;padding:15px 17px}
}
@media (prefers-reduced-motion:reduce){
  .site-404-glyph{animation:none}
}

/* ---------------------------------------------------------------------------
   Living negative space: ambient dust field, cursor lamp, 3D hero stack,
   section depth numerals, and the desktop depth rail. Script-built layers
   only — without JavaScript every page stays exactly as authored. */

.sg-page-field{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:3}
.sg-page-lamp{
  position:fixed;left:0;top:0;width:520px;height:520px;border-radius:50%;
  pointer-events:none;z-index:2;opacity:0;transition:opacity .5s ease;will-change:transform;
  background:radial-gradient(circle,rgba(224,146,47,.06),rgba(224,146,47,.02) 38%,transparent 64%);
}

/* 3D hero stack: the hero is a small diorama — kicker near, headline
   forward, lede nearest the glass — tilted by the pointer and lit by the
   aurora layers shifting against it. */
@media (hover:hover) and (pointer:fine){
  .site-page-hero{perspective:1200px}
  .site-page-hero-inner{
    transform:rotateX(calc(var(--sg-hero-tilt-x,0)*1deg)) rotateY(calc(var(--sg-hero-tilt-y,0)*1deg));
    transform-style:preserve-3d;
  }
  .site-page-hero-inner>*{transform:translateZ(var(--sg-z,0px))}
  .site-page-hero-inner .site-kicker{--sg-z:22px}
  .site-page-hero-inner h1{--sg-z:54px}
  .site-page-hero-inner>p{--sg-z:96px}
  .site-page-hero-inner .site-page-updated{--sg-z:118px}
  .site-page-hero-decor i:first-child{translate:calc(var(--sg-hero-tilt-y,0)*-22px) calc(var(--sg-hero-tilt-x,0)*14px)}
  .site-page-hero-decor i:last-child{translate:calc(var(--sg-hero-tilt-y,0)*-34px) calc(var(--sg-hero-tilt-x,0)*22px)}
}

/* Section depth numerals: oversized outlined indexes watermarking the open
   margins; the section's hover wakes them gold. */
.site-content-section{position:relative}
.site-index-mark{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  top:clamp(10px,2.4vw,34px);right:clamp(18px,7vw,120px);
  font-family:var(--font-display);font-size:clamp(110px,15vw,230px);line-height:.78;
  color:transparent;-webkit-text-stroke:1.5px rgba(167,98,16,.17);
  transition:-webkit-text-stroke-color .35s ease,text-shadow .35s ease;
}
.site-content-section-tint .site-index-mark{-webkit-text-stroke-color:rgba(167,98,16,.2)}
.site-content-section-dark .site-index-mark{-webkit-text-stroke-color:rgba(240,192,122,.16)}
.site-content-section:hover .site-index-mark{
  -webkit-text-stroke-color:rgba(224,146,47,.4);
  text-shadow:0 0 46px rgba(224,146,47,.14);
}
@media (max-width:699.98px){.site-index-mark{display:none}}

/* Card children pop forward in Z while the card tilts. */
@media (hover:hover) and (pointer:fine){
  html.sg-tilt-ready .site-domain-card,
  html.sg-tilt-ready .site-feature-card,
  html.sg-tilt-ready .site-contact-card,
  html.sg-tilt-ready .site-callout{transform-style:preserve-3d}
  .site-domain-card>span{transform:translateZ(26px)}
  .site-feature-card>.site-kicker,.site-contact-card>.site-kicker{transform:translateZ(18px)}
  .site-feature-card h3,.site-contact-card h2{transform:translateZ(12px)}
}

/* Desktop depth rail: the right margin becomes an instrument. */
.sg-depth-rail{
  position:fixed;right:24px;top:50%;translate:0 -50%;z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:13px;
}
.sg-depth-rail button{display:flex;align-items:center;gap:10px;padding:5px;background:none;border:0;cursor:pointer}
.sg-depth-rail i{
  display:block;width:8px;height:8px;flex:0 0 8px;
  border:1px solid rgba(167,98,16,.55);border-radius:2px;transform:rotate(45deg);
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.sg-depth-rail span{
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  color:#5e5c55;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  transition:max-width .32s ease,opacity .26s ease;
}
.sg-depth-rail button:hover span,.sg-depth-rail button.is-active span{max-width:230px;opacity:1}
.sg-depth-rail button:hover i{border-color:#E0922F}
.sg-depth-rail button.is-active i{
  background:#E0922F;border-color:#E0922F;
  box-shadow:0 0 12px rgba(224,146,47,.6);
}
.sg-depth-rail button:focus-visible{outline:2px solid #E0922F;outline-offset:2px}
@media (max-width:1099.98px){.sg-depth-rail{display:none}}

@media (prefers-reduced-motion:reduce){
  .sg-page-field,.sg-page-lamp{display:none!important}
  .site-page-hero-inner,.site-page-hero-inner>*,.site-page-hero-decor i:first-child,.site-page-hero-decor i:last-child{transform:none!important;translate:none!important}
}
@media print,(forced-colors:active){
  .sg-page-field,.sg-page-lamp,.sg-depth-rail{display:none!important}
  .site-index-mark{display:none!important}
  .site-page-hero-inner,.site-page-hero-inner>*{transform:none!important}
}

/* ---------------------------------------------------------------------------
   Depth system: 3D parallax, card tilt, and interface polish. Every rule here
   is progressive enhancement over the flat presentation — the JS publishes
   unit custom properties and the independent translate/scale/rotate
   properties consume them, so no measured transform is ever disturbed — and
   reduced motion, print, and forced colors keep the flat layout. */

/* Perspective stages: card fields share one vanishing point. */
.site-feature-grid,.site-domain-grid,.site-leader-grid,.site-contact-grid,.site-two-column{perspective:920px}

/* Pointer tilt: rotateX/rotateY under the grid's perspective. These card
   classes carry no other transform, and the hover lift rides the independent
   translate property, so the layers never fight. Angles stay ≤2.4° so card
   text remains crisp. */
html.sg-tilt-ready .site-feature-card,
html.sg-tilt-ready .site-domain-card,
html.sg-tilt-ready .site-leader-card,
html.sg-tilt-ready .site-contact-card,
html.sg-tilt-ready .site-callout{
  transform:rotateX(var(--sg-tilt-x,0deg)) rotateY(var(--sg-tilt-y,0deg));
  transition:transform .22s cubic-bezier(.2,.8,.3,1),translate .22s cubic-bezier(.2,.8,.3,1),border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
@media (hover:hover) and (pointer:fine){
  html.sg-tilt-ready .site-feature-card:hover,
  html.sg-tilt-ready .site-leader-card:hover,
  html.sg-tilt-ready .site-contact-card:hover,
  html.sg-tilt-ready .site-callout:hover{translate:0 -3px}
}

/* Tracked glow + pixel-reticle corners — the cursor motif shared with the
   hero cursor and stage, extended to the live card classes. */
.site-feature-card,.site-domain-card,.site-leader-card,.site-contact-card,.site-callout{position:relative}
.site-feature-card::before,.site-domain-card::before,.site-leader-card::before,.site-contact-card::before,.site-callout::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
  background:radial-gradient(190px circle at var(--mx,50%) var(--my,50%),rgba(224,146,47,.13),transparent 72%);
}
.site-feature-card-dark::before{background:radial-gradient(190px circle at var(--mx,50%) var(--my,50%),rgba(240,192,122,.17),transparent 72%)}
.site-feature-card::after,.site-domain-card::after,.site-leader-card::after,.site-contact-card::after,.site-callout::after{
  content:"";
  position:absolute;
  inset:10px;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
  background:linear-gradient(#E0922F,#E0922F) left top/9px 1px no-repeat,linear-gradient(#E0922F,#E0922F) left top/1px 9px no-repeat,linear-gradient(#E0922F,#E0922F) right top/9px 1px no-repeat,linear-gradient(#E0922F,#E0922F) right top/1px 9px no-repeat,linear-gradient(#E0922F,#E0922F) left bottom/9px 1px no-repeat,linear-gradient(#E0922F,#E0922F) left bottom/1px 9px no-repeat,linear-gradient(#E0922F,#E0922F) right bottom/9px 1px no-repeat,linear-gradient(#E0922F,#E0922F) right bottom/1px 9px no-repeat;
}
@media (hover:hover) and (pointer:fine){
  .site-feature-card:hover::before,.site-domain-card:hover::before,.site-leader-card:hover::before,.site-contact-card:hover::before,.site-callout:hover::before{opacity:1}
  .site-feature-card:hover::after,.site-domain-card:hover::after,.site-leader-card:hover::after,.site-contact-card:hover::after,.site-callout:hover::after{opacity:.8}
  .site-domain-card:hover{background:rgba(255,255,255,.72)}
  .site-feature-card:hover{box-shadow:0 14px 40px rgba(17,17,15,.09)}
  .site-feature-card-dark:hover{box-shadow:0 14px 44px rgba(0,0,0,.4)}
}
.site-domain-card{transition:background .3s ease,border-color .3s ease}

/* Dark cards carry a faint gold top hairline — the proof grid reads as one
   instrument panel instead of floating tiles. */
.site-feature-card-dark{background:linear-gradient(180deg,rgba(240,192,122,.09),rgba(240,192,122,0) 22%),rgba(255,255,255,.045)}

/* Buttons: a single sheen sweep, a pressed state, and gold depth. */
.site-button{position:relative;overflow:hidden;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .22s ease}
.site-button::after{content:"";position:absolute;inset:0;translate:-140% 0;background:linear-gradient(108deg,transparent 34%,rgba(255,255,255,.38) 50%,transparent 66%);transition:translate .6s cubic-bezier(.2,.6,.2,1);pointer-events:none}
@media (hover:hover){.site-button:hover::after{translate:140% 0}}
.site-button:active{transform:translateY(-1px) scale(.985)}
.site-button-gold{box-shadow:0 6px 22px rgba(224,146,47,.26),inset 0 1px 0 rgba(255,255,255,.32)}
.site-button-gold:hover{box-shadow:0 10px 30px rgba(224,146,47,.4),inset 0 1px 0 rgba(255,255,255,.4)}

/* Nav: translucent glass over the scrolling page. */
.site-nav{background:rgba(9,9,8,.84);backdrop-filter:blur(14px) saturate(1.35);-webkit-backdrop-filter:blur(14px) saturate(1.35)}
.site-brand-mark{transition:border-color .25s ease,box-shadow .25s ease}
@media (hover:hover){.site-brand:hover .site-brand-mark{border-color:rgba(240,192,122,.85);box-shadow:0 0 26px rgba(224,146,47,.3)}}

/* Section depth: layered light on the flat color fields. */
.site-final-cta{background:radial-gradient(900px 420px at 12% -10%,rgba(255,236,204,.34),transparent 62%),radial-gradient(760px 420px at 90% 114%,rgba(122,58,4,.38),transparent 60%),#d78728}
.site-proof-section{background:radial-gradient(1100px 520px at 72% -14%,rgba(224,146,47,.09),transparent 58%),#10100e}
.site-proof-section ::selection{background:#F4C480;color:#141210}
.site-nav ::selection,.site-footer ::selection,.sg-talk-section ::selection{background:#F4C480;color:#141210}
.site-page-hero{background:radial-gradient(880px 400px at 86% -16%,rgba(224,146,47,.13),transparent 58%),radial-gradient(720px 420px at 6% 118%,rgba(88,216,230,.06),transparent 55%),#11110f}
.site-footer{background:radial-gradient(900px 380px at 80% -24%,rgba(224,146,47,.07),transparent 60%),#080807}

/* Hero pointer depth: the aurora/prism layers and the hero copy ride opposite
   sides of one pointer vector published by the portal engine, so the hero
   reads as a layered diorama rather than a flat film. */
@media (prefers-reduced-motion:no-preference){
  .sg-hero-brand-overlay{translate:calc(var(--sg-hero-px,0)*-1.1px) calc(var(--sg-hero-py,0)*-.9px)}
  .sg-hero-eyebrow{translate:calc(var(--sg-hero-px,0)*3px) calc(var(--sg-hero-py,0)*2.4px)}
  .sg-hero-copy>p{translate:calc(var(--sg-hero-px,0)*2px) calc(var(--sg-hero-py,0)*1.6px)}
  .site-hero-actions{translate:calc(var(--sg-hero-px,0)*1.2px) calc(var(--sg-hero-py,0)*1px)}
  .sg-hero-loop::before{
    translate:calc(var(--sg-hero-px,0)*-10px + var(--sg-hero-exit,0)*-16px) calc(var(--sg-hero-py,0)*-8px + var(--sg-hero-exit,0)*96px);
  }
  .sg-hero-loop::after{
    translate:calc(var(--sg-hero-px,0)*-16px + var(--sg-hero-exit,0)*-26px) calc(var(--sg-hero-py,0)*-12px + var(--sg-hero-exit,0)*118px);
  }
  /* Scroll-exit depth: as the hero leaves, the portal film expands and sinks
     past the viewer while the copy and chrome stay on the page plane. The
     growth is sized against the translate so the film never uncovers the
     frame's top edge. */
  .sg-hero-loop-picture,.sg-hero-loop-video,#sg-hero-rain,.sg-hero-loop-scan{
    transform-origin:50% 42%;
    translate:0 calc(var(--sg-hero-exit,0)*36px);
    scale:calc(1 + var(--sg-hero-exit,0)*.1);
  }
  .site-signal-bar,.sg-talk-bar{will-change:translate}
  .sg-hero-loop-picture,.sg-hero-loop-video,#sg-hero-rain{will-change:translate,scale}
  /* The neural-bridge backdrop drifts ±15px against the scroll (JS writes
     style.translate); the extra scale keeps every edge covered through the
     full travel. */
  .sg-intersection-backdrop{scale:1.05;will-change:translate,scale}
  .site-home-shell .site-section-heading,.site-home-shell .site-leader-card,.site-home-shell .site-feature-card,.site-home-shell .site-split-panel,.site-final-cta>div{will-change:translate}
}

/* Fragments lead the scroll by a few pixels (JS writes style.translate);
   nothing to do here without motion. */
@media (prefers-reduced-motion:reduce){
  .sg-hero-loop-picture,.sg-hero-loop-video,#sg-hero-rain,.sg-hero-loop-scan,.sg-hero-loop::before,.sg-hero-loop::after,.sg-hero-eyebrow,.sg-hero-copy>p,.site-hero-actions{translate:none!important;scale:none!important}
  html.sg-tilt-ready .site-feature-card,html.sg-tilt-ready .site-domain-card,html.sg-tilt-ready .site-leader-card,html.sg-tilt-ready .site-contact-card,html.sg-tilt-ready .site-callout{transform:none!important;transition:none!important}
  .site-button::after{display:none!important}
}
@media print{
  .sg-hero-loop-picture,.sg-hero-loop-video,#sg-hero-rain,.sg-hero-loop-scan,.sg-hero-loop::before,.sg-hero-loop::after,.sg-hero-eyebrow,.sg-hero-copy>p,.site-hero-actions{translate:none!important;scale:none!important}
  html.sg-tilt-ready .site-feature-card,html.sg-tilt-ready .site-domain-card,html.sg-tilt-ready .site-leader-card,html.sg-tilt-ready .site-contact-card,html.sg-tilt-ready .site-callout{transform:none!important;translate:none!important}
  .site-button::after{display:none!important}
}