/* ==========================================================================
   ZEEDA ENERGY — Thailand · sectioned, scroll-driven
   Content width: 1480px · no framework · one rAF pass
   ========================================================================== */

:root{
  --wrap:min(77.1vw,2100px);   /* = 1480px @1920, keeps scaling on 2560 / 4K */
  --pad:clamp(20px,3vw,40px);

  --ink:#070d2d;      /* PSD: screen 2-4 base */
  --ink-2:#070d2d;
  --navy:#06194b;     /* PSD: contact base */
  --paper:#ffffff;    /* PSD: products base */
  --mist:#f1f2f4;

  --gold:#e3be7c;
  --gold-deep:#c9a15c;
  --gold-lite:#f7e7c1;

  --txt:#0a0e17;
  --mut:#5c6475;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.4,0,.2,1);

  /* sizes are the PSD values at 1920 and scale with the viewport above it */
  /* type scale: the PSD value at the 1920 design width, proportional above it,
     capped at 1.5x so 4K screens do not blow the layout apart */
  --fs-display:clamp(30px,5.32vw,153px);   /* 102 @1920 */
  --fs-h1:clamp(22px,2.19vw,63px);         /*  42 */
  --fs-h2:clamp(20px,2.19vw,63px);
  --fs-36:clamp(18px,1.875vw,54px);        /*  36 */
  --fs-24:clamp(15px,1.25vw,36px);         /*  24 */
  --fs-18:clamp(13px,.94vw,27px);          /*  18 */
  --fs-body:clamp(13px,.833vw,24px);       /*  16 */
  --fs-sm:clamp(13px,.833vw,16px);
  --fs-xs:11px;
}

*,*::before,*::after{box-sizing:border-box}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  color:#fff;
  font-family:"Noto Sans Thai","IBM Plex Sans",-apple-system,"Segoe UI",sans-serif;
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,figcaption{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--gold);color:#10131c}

.wrap{width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto}

/* ---------- chrome ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-lite));pointer-events:none}

.head{position:fixed;top:0;left:0;right:0;z-index:50;pointer-events:none;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
  transition:background .5s var(--ease),-webkit-backdrop-filter .5s,backdrop-filter .5s,border-color .5s,
    transform .62s var(--ease),opacity .34s var(--ease);
  border-bottom:1px solid transparent}
/* retracted: the first screen is the only one that keeps the bar on stage */
.head.is-away{transform:translateY(-104%);opacity:0}
.head.is-away .head__in{pointer-events:none}
.head.is-solid{background:rgba(11,23,65,.72);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-color:rgba(255,255,255,.08)}
.head.is-light{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);border-color:rgba(9,13,24,.08)}
.head.is-light .head__logo img{filter:invert(1)}
.head.is-light .head__nav a{color:rgba(10,14,23,.66)}
.head.is-light .head__nav a:hover{color:#0a0e17}
.head.is-light .head__lang{border-color:rgba(10,14,23,.22);color:#0a0e17}
.head__in{height:92px;display:flex;align-items:center;gap:clamp(16px,2vw,32px);pointer-events:auto}
/* phones get a menu button + sheet instead of a silently dropped nav */
.head__burger{display:none}
.mnav{display:none}
.head__logo{display:block;flex:0 0 auto}
.head__logo img{width:112px;height:auto}
.head__nav{margin-left:auto;display:flex;gap:clamp(16px,2.4vw,44px);font-size:var(--fs-18);color:rgba(255,255,255,.76)}
.head__nav a{position:relative;padding:6px 0;transition:color .3s}
.head__nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.head__nav a:hover{color:#fff}
.head__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.head__lang{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);font-size:var(--fs-body);letter-spacing:.1em;color:#fff;transition:border-color .3s,background .3s}
.head__lang .head__flag{width:18px;height:18px;flex:0 0 18px;border-radius:50%;display:block}
.head__lang i{width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  opacity:.8;transform:rotate(45deg) translateY(-1px)}
.head__lang:hover{border-color:rgba(227,190,124,.7);background:rgba(227,190,124,.08)}
/* campaign pill in the bar — same 92×36 launch capsule as the video page, so
   both headers read as one navigation */
.head__ad{flex:0 0 auto;display:block;width:92px;height:36px;border-radius:999px;overflow:hidden;
  border:1px solid rgba(227,190,124,.45);transition:border-color .3s,transform .3s,box-shadow .3s}
.head__ad img{width:100%;height:100%;object-fit:cover;display:block}
.head__ad:hover{border-color:rgba(227,190,124,.95);transform:translateY(-1px);
  box-shadow:0 10px 22px -16px rgba(0,0,0,.9)}

/* ---------- shared type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:var(--fs-18);letter-spacing:.12em;
  text-transform:uppercase;color:#fff}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:52px;padding:0 26px;
  border-radius:999px;font-size:var(--fs-body);font-weight:500;white-space:nowrap;
  transition:background .4s var(--ease),color .4s,border-color .4s,gap .4s var(--ease)}
.btn svg{width:18px;height:18px;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--ghost{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff}
.btn--ghost:hover{background:var(--gold-lite);border-color:var(--gold-lite);color:#10131c}
.btn--glass{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff}
.btn--glass:hover{background:rgba(255,255,255,.15);border-color:rgba(227,190,124,.6)}
.btn--play{padding:0 20px 0 8px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:rgba(255,255,255,.88)}
.btn--play:hover{border-color:rgba(227,190,124,.6);color:#fff}
.btn__icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.13)}
.btn__icon svg{width:14px;height:14px;transition:none}
.btn--play:hover .btn__icon{background:var(--gold);color:#10131c}

/* ---------- 01 HERO ---------- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__media img{position:relative;width:100%;height:100%;object-fit:cover;object-position:50% 100%;transform:scale(1.02);
  transition:transform 2.4s var(--ease)}
.hero__media::before{content:"";position:absolute;inset:-8%;
  background:url("../img/sections/hero.jpg") center/cover no-repeat;
  filter:blur(38px) brightness(.5);transform:scale(1.08)}
.hero.is-ready .hero__media img{transform:scale(1)}
/* the supplied hero artwork already carries its own night-time exposure,
   so the scrim only does the minimum needed for type legibility */
.hero__scrim{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(9,18,50,.20) 0%,rgba(9,18,50,.04) 30%,rgba(9,18,50,0) 55%,rgba(9,18,50,.06) 82%,rgba(9,18,50,.16) 100%),
    radial-gradient(42% 26% at 50% 49%,rgba(5,10,30,.20) 0%,rgba(5,10,30,0) 72%)}
.hero__in{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(56.25vw,90vw);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px}
.hero__title{font-size:var(--fs-h1);font-weight:500;line-height:1.4;letter-spacing:0;color:#f3f4f6;
  filter:drop-shadow(0 8px 28px rgba(201,161,92,.22))}
.hero__title em{font-style:normal}
.side-rail{position:fixed;right:60px;top:50%;transform:translateY(-50%);z-index:45;
  display:flex;flex-direction:column;gap:8px;transition:opacity .4s var(--ease)}
.side-rail a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.24);background:rgba(11,23,65,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:rgba(255,255,255,.9);transition:background .3s,color .3s,border-color .3s,transform .3s}
.side-rail a:hover{background:rgba(227,190,124,.9);color:#0a1024;border-color:rgba(227,190,124,.9);transform:translateX(-2px)}
.side-rail svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.side-rail svg.fill{fill:currentColor;stroke:none}
/* the site's own artwork from the PSD, recoloured through the mask so the
   light/dark and hover states keep working */
.side-rail .rico{display:block;width:17px;height:17px;background:currentColor;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-image:url(../img/icons/rail-mail.png);mask-image:url(../img/icons/rail-mail.png)}
/* the LINE bubble carries a knocked-out wordmark, so it needs a touch more
   room than the one-glyph icons to stay readable */
.side-rail .rico--line{width:20px;height:20px;
  -webkit-mask-image:url(../img/icons/rail-line.png);mask-image:url(../img/icons/rail-line.png)}
/* one class per glyph: the mask lives in this stylesheet, so the browser
   resolves the path against assets/css/ — a url() inside an inline --i:…
   variable is resolved against the document by WebKit and silently failed,
   which is why the rail went blank in Safari */
.side-rail .rico--in{-webkit-mask-image:url(../img/icons/rail-linkedin.png);mask-image:url(../img/icons/rail-linkedin.png)}
.side-rail .rico--fb{-webkit-mask-image:url(../img/icons/rail-facebook.png);mask-image:url(../img/icons/rail-facebook.png)}
.side-rail .rico--top{-webkit-mask-image:url(../img/icons/rail-top.png);mask-image:url(../img/icons/rail-top.png)}
/* hovering the LINE button reveals its QR slowly, floating to the LEFT of the
   icon (80×80 as supplied) */
.side-rail a{position:relative}
/* hover card, exactly the 悬浮.psd build: 220×92 white card, 6px corner,
   6px inset, 80×80 code + the handle 13px to its right */
.side-rail .rail-qr{position:absolute;right:calc(100% + 14px);top:50%;
  box-sizing:border-box;width:220px;height:92px;padding:6px;border-radius:6px;
  background:#fff;display:flex;align-items:center;gap:13px;
  box-shadow:0 16px 34px -22px rgba(6,14,38,.5);
  opacity:0;pointer-events:none;
  transform:translate(10px,-50%) scale(.98);
  transition:opacity .55s var(--ease), transform .55s var(--ease)}
.side-rail .rail-qr__code{display:block;width:80px;height:80px;flex:0 0 80px}
.side-rail .rail-qr__id{font-size:15px;line-height:1;color:#4a4a4a;white-space:nowrap;
  letter-spacing:.005em;padding-right:8px}
.side-rail .rail-line:hover .rail-qr,
.side-rail .rail-line:focus-visible .rail-qr{opacity:1;transform:translate(0,-50%) scale(1)}
.side-rail.is-light a{background:rgba(255,255,255,.72);border-color:rgba(12,22,52,.14);color:#16233f}
.side-rail.is-light a:hover{background:#0d1b38;color:#fff;border-color:#0d1b38}

/* ---------- 02–03 GLOBE → HOUSE ---------- */
.globe{position:relative;height:400vh;background:#09153d}
/* exact gradient sampled from the supplied screen-2 artwork (1920x1080):
   #09153d at the top, brightest #0f2f6c at 80%, back to #0c1a41 at the foot */
.push__sticky{transform:translate3d(var(--gx,0px),0,0)}
/* the screens that follow a product strip ride in from the RIGHT, like the
   strip→strip hand-off — no downward push */
.push.push--robotaxi,.push.push--dc{position:relative;margin-top:-200svh;height:320vh;background:transparent}
/* stacking follows the section order so each screen rides ABOVE the one it
   replaces, exactly like the horizontal hand-off requires */
#launch-strip{z-index:5}
#first{z-index:6}
#dc-strip{z-index:7}
#dc{z-index:8}
#s1600-strip{z-index:9}
.push--robotaxi .push__sticky,.push--dc .push__sticky{transform:translate3d(var(--hx,0px),0,0)}
.globe__sticky{position:sticky;top:0;height:100svh;overflow:hidden;transform:translate3d(var(--gx,0px),0,0);
  background:linear-gradient(180deg,
    #09153d 0%, #09173e 5%, #0a1942 10%, #0a1b47 15%, #0b1d4b 20%, #0b1f51 25%,
    #0c2355 30%, #0d2458 35%, #0c255b 40%, #0d275d 45%, #0e2960 50%, #0d2a62 55%,
    #0e2b64 60%, #0e2d66 65%, #0f2d69 70%, #0e2e69 75%, #0f2f6c 80%, #0e2b63 85%,
    #0d2456 90%, #0c1d49 95%, #0c1a41 100%)}
.globe__sky{position:absolute;inset:0;
  background:transparent}
.globe__stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(62% 62% at 50% 50%,#000 52%,transparent 82%);
  mask-image:radial-gradient(62% 62% at 50% 50%,#000 52%,transparent 82%);
  transform:translate(-50%,-50%) scale(var(--gs,1));
  opacity:var(--go,1);transform-origin:50% 50%}
.globe__stage canvas{width:100%;height:100%}
.globe__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;
  opacity:0;transition:opacity .5s var(--ease);mix-blend-mode:screen}
/* the still frame is a *fallback only*: it stays invisible until we know the
   WebGL globe is not coming, so its large photographic sphere can never sit
   behind the particle globe and read as a second earth */
.globe.is-poster .globe__poster,.globe.is-fallback .globe__poster{opacity:1}
.globe.is-gl .globe__poster{opacity:0;visibility:hidden}
.globe__glow{position:absolute;left:50%;top:50%;width:min(1240px,84vw);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;opacity:var(--go,1);
  background:radial-gradient(48% 48% at 50% 50%,rgba(46,96,198,.16) 0%,rgba(24,58,134,.07) 44%,rgba(10,26,66,.02) 64%,transparent 74%)}
.globe__house{position:absolute;inset:0;opacity:var(--ho,0);
  transform:translate3d(0,calc((1 - var(--ho,0)) * 24%),0);will-change:transform,opacity}
.globe__house img{position:relative;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.globe__house::before{content:"";position:absolute;inset:-8%;
  background:url("../img/sections/scene-home.jpg") center/cover no-repeat;
  filter:blur(38px) brightness(.42);transform:scale(1.08)}
/* supplied screen-3 artwork is already a night render — keep it almost untouched */
.globe__house-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,18,50,.50) 0%,rgba(9,18,50,.16) 20%,rgba(9,18,50,0) 46%,rgba(9,18,50,.10) 100%)}
.globe__veil{position:absolute;inset:0;pointer-events:none;background:none}
.globe__content{position:absolute;inset:0;pointer-events:none}
.globe__title{position:absolute;left:50%;top:0;margin:0;width:max-content;max-width:min(39.6vw,86vw);
  font-size:var(--fs-h1);font-weight:500;line-height:1.34;text-align:center;
  transform:translate3d(-50%,var(--ty,-40vh),0);opacity:var(--to,0);will-change:transform,opacity;
  color:#f3f4f6;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.65))}
.globe__title em{font-style:normal}
.globe__actions{position:absolute;left:50%;top:var(--acts-y,28.5vh);transform:translate(-50%,calc(18px * (1 - var(--btn,0))));
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;pointer-events:auto;
  opacity:var(--btn,0)}

/* ---------- 04 / 07 / 08 PUSH-UP ---------- */
.push{position:relative;z-index:4;height:260vh;background:var(--ink)}
/* a covering panel must sit above the panel it covers; zoom is also 4, and the
   push sections come later in the DOM, so they win the tie */
/* every push-up panel covers the previous one instead of revealing itself
   underneath: the section starts one viewport earlier, so it rides up over the
   still-pinned scene while that scene keeps its last frame */
.push{margin-top:-100svh}
.push--tall{height:260vh}
.push__sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:#f5f5f5;transform:translateZ(0)}
.push__media{position:absolute;inset:0}
.push__media>img{position:relative;width:100%;height:100%;object-fit:cover;object-position:50% 100%;
  transform:scale(calc(1.03 - .03 * var(--p,0)));will-change:transform}
.push__media::before{content:"";position:absolute;inset:-8%;background-size:cover;background-position:center;
  filter:blur(38px) brightness(.5);transform:scale(1.08)}
#first .push__media::before{background-image:url("../img/sections/scene-robotaxi-v2.jpg")}
#factory-th .push__media::before{background-image:url("../img/sections/factory-th.jpg")}
#dc .push__media::before{background-image:url("../img/sections/scene-dc.jpg")}
.push__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,23,63,.78) 0%,rgba(11,23,63,.3) 22%,rgba(11,23,63,.1) 52%,rgba(11,23,63,.26) 82%,rgba(11,23,63,.5) 100%)}
.push__body{position:absolute;left:50%;top:16vh;transform:translate(-50%,calc(26px * (1 - var(--t,0))));
  display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;max-width:1000px;
  opacity:calc(var(--t,0) * var(--ptxt,1));will-change:opacity,transform}
.push__body h2{font-weight:500;font-size:var(--fs-h1);line-height:1.38;letter-spacing:0;
  color:#f3f4f6;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.5))}
.push__body h2 em{font-style:normal}
.push__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.push__copy{font-size:var(--fs-24);line-height:1.72;color:rgba(255,255,255,.8);max-width:860px}
/* 3.psd: the factory copy sits on the optical centre of the frame,
   title 42px white, body 24px white with generous Thai leading */
.push__body--left{align-items:center;text-align:center;top:52.9%;bottom:auto;
  left:50%;right:auto;margin-inline:0;padding-inline:0;width:min(63.4vw,92vw);
  transform:translate(-50%,calc(-50% + 26px * (1 - var(--t,0))))}
.push__body--left::before{content:"";position:absolute;inset:-56px -14%;z-index:-1;pointer-events:none;
  background:radial-gradient(54% 58% at 50% 50%,rgba(8,18,52,.74),rgba(8,18,52,.46) 56%,transparent 80%);
  filter:blur(14px)}
.push__body--left h2{color:#fff;background:none;-webkit-text-fill-color:#fff;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.5))}
.push__body--left .push__copy{max-width:100%;font-size:var(--fs-24);line-height:1.85;
  color:rgba(255,255,255,.84)}

/* ---------- 06 ZOOM ---------- */
.zoom{position:relative;z-index:4;height:400vh;background:#f5f5f5;color:var(--txt)}
.zoom__sticky{position:sticky;top:0;height:100svh;overflow:hidden;transform:translateZ(0)}
.zoom__title{
  position:absolute;inset:0;margin:auto;width:min(89.6vw,95vw);height:max-content;
  transform:scale(var(--ts,1));opacity:var(--to,1);will-change:transform,opacity;
  font-family:"Kanit",sans-serif;font-weight:500;font-size:var(--fs-display);line-height:1.08;
  letter-spacing:-.02em;text-align:center;color:#05070c;
}
.zoom__card{
  position:absolute;inset:0;margin:auto;
  width:var(--cw,1480px);height:var(--ch,643px);
  border-radius:var(--cr,20px);overflow:hidden;opacity:var(--co,0);will-change:width,height,opacity,border-radius;
  box-shadow:0 60px 120px -60px rgba(9,14,24,.55);
}
.zoom__card img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.zoom__shade{position:absolute;inset:0;opacity:var(--cs,0);
  background:
    radial-gradient(58% 44% at 50% 52%,rgba(8,18,52,.62) 0%,rgba(8,18,52,.34) 54%,rgba(8,18,52,0) 78%),
    linear-gradient(180deg,rgba(8,18,52,.34) 0%,rgba(8,18,52,.12) 30%,rgba(8,18,52,.42) 76%,rgba(8,18,52,.8) 100%)}
.zoom__caption{position:absolute;left:50%;top:50%;
  transform:translate(-50%,calc(-50% + 26px * (1 - var(--cc,0))));
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
  width:min(64.6vw,84vw);color:#fff;opacity:var(--cc,0)}
.zoom__caption h3{font-family:"Kanit",sans-serif;font-weight:500;font-size:var(--fs-h1);line-height:1.2;color:#fff}
.zoom__caption p{font-size:var(--fs-24);line-height:1.75;color:rgba(255,255,255,.88);max-width:100%}

/* ---------- 09 BRAND → CERTS → PANEL (one pinned shot) ---------- */
.brand{position:relative;z-index:5;height:640vh;background:#fff;margin-top:-100svh}
.brand__sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:#fff}

/* --ps: the photo contracting to the logo's own width (beat 3)
   --ms: the shared shrink with the logo down to the capsule slot (beat 4) —
   both ride this one transform so the image and the wordmark never separate */
/* the full-bleed plate: it never scales, it only dissolves — the wordmark
   underneath it carries the very same pixels, so the shot appears to sink
   into the letterforms while everything OUTSIDE the letters turns white */
.brand__photo{position:absolute;inset:0;opacity:calc(var(--ph,0) * var(--po,1));
  will-change:opacity}
.brand__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 100%;
  /* identical tone to .brand__logo--photo so the crossfade never shifts colour */
  filter:saturate(1.1) brightness(.95)}
.brand__wash{position:absolute;inset:0;background:#fff;opacity:var(--wash,1)}

.brand__mark{position:absolute;left:50%;top:50%;z-index:4;width:min(45.6vw,81vh);aspect-ratio:875/282;
  transform:translate(-50%,-50%) translateX(var(--logo-x,0px)) scale(calc(var(--ms,1) * var(--gz,1)));
  opacity:var(--mo,1);will-change:transform,opacity}
.brand__logo{position:absolute;inset:0;
  -webkit-mask-image:url("../img/sections/logo-big.png");mask-image:url("../img/sections/logo-big.png");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* the wordmark is ALWAYS the shot itself — never a white mark. --pb is set by
   main.js to the plate's own on-screen scale, so the letters show exactly the
   pixels that were behind them; the image only ever exists inside the strokes */
.brand__logo--photo{background-image:url("../img/sections/factory-th.jpg");
  background-size:var(--pb,219.4%) auto;background-position:50% 50%;
  opacity:var(--lm,1);filter:saturate(1.1) brightness(.95)}
.brand__logo--solid{background:#17294f;opacity:var(--lf,0)}

.brand__logo-cell{position:relative;z-index:2;flex:0 0 auto;width:min(14.58vw,27.7vh);
  aspect-ratio:303/162;border-radius:999px;background:#fff;border:1px solid #edf0f5;
  box-shadow:0 22px 46px -40px rgba(16,32,66,.5);display:grid;place-items:center;
  opacity:var(--lc,0);pointer-events:none}
.brand__logo-cell img{display:block;width:62%;height:auto}
.brand__pill{position:absolute;left:50%;top:50%;z-index:1;
  transform:translate(-50%,-50%) translateX(var(--logo-x,0px)) scale(calc(.55 + .45 * var(--lp,0)));
  width:min(15.8vw,30vh);aspect-ratio:303/162;border-radius:999px;background:#fff;
  border:1px solid #eceef4;box-shadow:0 24px 60px -38px rgba(12,26,58,.45);
  display:flex;align-items:center;justify-content:center;opacity:var(--lp,0)}
/* the shrunken mark itself plays the logo inside the pill; the static img is
   only a no-JS fallback and stays hidden while the scene is driven */
.brand__pill img{width:62%;height:auto;opacity:0}

/* 6 capsules above + 6 below — staggered like the reference, sliding in from the left */
/* three rows of six rounded slots; the middle row carries the logo in slot 1
   and the PV panel in slot 6. Rows slide into alignment: top/bottom come from
   the left, the middle one from the right (it closes in on the logo) */
.brand{--pitch:calc(min(14.58vw,27.7vh) + max(16px,1.67vw))}
.brand__row{position:absolute;left:50%;display:flex;gap:max(16px,1.67vw);
  width:max-content;pointer-events:none}
.brand__row--top{top:calc(50% - 26.6vh);
  transform:translate(-50%,-50%) translateX(var(--rx-t,0px));opacity:var(--rows-t,1)}
.brand__row--mid{top:50%;
  transform:translate(-50%,-50%) translateX(var(--rx-m,0px));opacity:var(--rows-m,1)}
.brand__row--bot{top:calc(50% + 26.6vh);
  transform:translate(-50%,-50%) translateX(var(--rx-b,0px));opacity:var(--rows-b,1)}
.ctile{margin:0;flex:0 0 auto;width:min(14.58vw,27.7vh);opacity:var(--t,0);
  transform:scale(calc(.88 + .12 * var(--t,0)));transform-origin:50% 55%;
  will-change:transform,opacity}
.ctile--ghost{display:none}
.ctile--pvbase .ctile__in{background:#fff}
.ctile--logo-slot{opacity:0}
.ctile__in{background:#fff}
.ctile__in{display:grid;place-items:center;aspect-ratio:303/162;background:#fff;
  border:1px solid #edf0f5;border-radius:999px;box-shadow:0 22px 46px -40px rgba(16,32,66,.5)}
.ctile__in img{height:52%;width:auto;max-width:64%;object-fit:contain}

/* the middle slot: logo pill → PV panel card → grows and sinks */
/* the PV panel: transparent PNG rising out of the center pill (135x214 over a
   303x162 capsule in the PSD), later it grows, turns ghostly and hands off
   to the next screen */
.brand__card{position:absolute;left:50%;top:50%;z-index:3;isolation:isolate;
  transform:translate(calc(-50% + var(--pvhome,0px)),-50%)
    translateY(var(--pme,0px)) translate(var(--pmx,0px),var(--pmy,0px))
    scale(calc(var(--pes,1) * var(--pms,1)));
  height:min(19.8vh,10.5vw);opacity:calc(var(--pm,0) * var(--po2,1));
  will-change:transform,opacity}
.brand__card::before{content:"";position:absolute;left:50%;top:62%;z-index:-1;
  transform:translate(-50%,-50%);width:min(14.58vw,27.7vh);aspect-ratio:303/162;border-radius:999px;
  background:#fff;border:1px solid #edf0f5;box-shadow:0 22px 46px -40px rgba(16,32,66,.5);
  opacity:var(--pvc,0)}

.brand__card img{height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(16,32,66,.22)) brightness(1.1) contrast(1.03)}

/* ---------- 12 SOLUTIONS ---------- */
.solutions{position:relative;z-index:6;height:500vh;background:#cfd6e3;color:#0a0e17;
  margin-top:-60svh}
.solutions__sticky{position:sticky;top:0;height:100svh;overflow:hidden;
  transform:translate3d(0,calc((1 - var(--e,1)) * 100%),0);will-change:transform;
  background:linear-gradient(100deg,#c1cadb 0%,#cfd6e3 38%,#e2e6ef 72%,#f4f6fa 100%);
  display:flex;flex-direction:column;padding-top:14vh}
/* fully pushed in: off the GPU layer so the type renders crisp, not doubled */
.solutions.is-set .solutions__sticky{transform:none;will-change:auto}
.solutions__head{display:flex;align-items:flex-start;justify-content:space-between;gap:30px}
.solutions__lead h2{font-family:"Kanit",sans-serif;font-weight:500;font-size:var(--fs-h1);line-height:1.28;letter-spacing:0;color:#101a30}
.solutions__lead p{font-size:var(--fs-36);color:#4d6078;margin-top:4px}
.switch{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:#fff;
  border:1px solid #e6eaf2;box-shadow:0 10px 26px -22px rgba(12,26,58,.5)}
.switch__pill{position:absolute;top:4px;left:4px;height:calc(100% - 8px);width:calc(50% - 4px);
  border-radius:999px;background:#0d1b38;transition:transform .55s var(--ease)}
.switch.is-b .switch__pill{transform:translateX(100%)}
.switch__btn{position:relative;z-index:1;height:38px;padding:0 18px;font-size:var(--fs-18);color:#5b6a80;
  border-radius:999px;transition:color .4s}
.switch__btn.is-on{color:#fff}

.solutions__tabs{display:flex;justify-content:flex-start;align-items:flex-start;gap:clamp(18px,3.4vw,58px);
  margin-top:clamp(22px,3.4vh,38px);position:relative}
/* PSD: full-bleed 4px rule ABOVE the tabs, dots riding on it, icons under it */
.solutions__tabs::before{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:100vw;height:4px;background:rgba(16,26,48,.12)}
.cat{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  width:max(140px,12.2vw);color:#7e8da3;font-size:var(--fs-18);line-height:1.35;text-align:center;
  transition:color .4s;padding-top:25px}
.cat i{position:absolute;top:-1.5px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;
  background:#c3ccdb;transition:background .4s,box-shadow .4s}
.cat svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
/* PSD artwork for the four product tabs, tinted with the active colour */
.cat .tico{display:block;width:22px;height:22px;background:currentColor;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.tico--pv{-webkit-mask-image:url(../img/icons/tab-pv.png);mask-image:url(../img/icons/tab-pv.png)}
.tico--allinone{-webkit-mask-image:url(../img/icons/tab-allinone.png);mask-image:url(../img/icons/tab-allinone.png)}
.tico--robot{-webkit-mask-image:url(../img/icons/tab-robot.png);mask-image:url(../img/icons/tab-robot.png)}
.tico--charger{-webkit-mask-image:url(../img/icons/tab-charger-2.png);mask-image:url(../img/icons/tab-charger-2.png)}
.tico--smartphant{-webkit-mask-image:url(../img/icons/tab-smartphant.png);mask-image:url(../img/icons/tab-smartphant.png)}
.tico--mw{-webkit-mask-image:url(../img/icons/tab-mw.png);mask-image:url(../img/icons/tab-mw.png)}
.cat.is-on{color:#101a30}
/* the tabs are the product switcher — the two with content read as clickable */
.cat:not(:disabled){cursor:pointer}
.cat:not(:disabled):hover{color:#3c4b62}
.cat:not(:disabled):not(.is-on):hover i{background:#8e9cb1}
.cat.is-on:hover{color:#101a30}
.cat.is-on i{background:#0d1b38;box-shadow:0 0 0 4px rgba(13,27,56,.08)}
.cat:disabled{cursor:default;opacity:.62}
.cat::after{content:"";position:absolute;bottom:-26px;left:50%;width:9px;height:9px;
  border-right:1.5px solid #101a30;border-bottom:1.5px solid #101a30;transform:translateX(-50%) rotate(45deg) scale(0);
  transition:transform .4s var(--ease);opacity:.8}
.cat.is-on::after{transform:translateX(-50%) rotate(45deg) scale(1)}

.solutions__stage{margin-top:clamp(24px,5vh,54px);flex:1;min-height:0}
.slides{position:relative;height:100%}
.slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(240px,17.7vw) minmax(0,1fr);
  gap:max(40px,13vw);align-items:center;opacity:0;pointer-events:none}
.slide.is-on{opacity:1;pointer-events:auto}
/* two series share this section (บ้าน / สาธารณะ); only the active one is in
   the flow, so both can reuse the same scroll timeline */
.slides[data-series="home"] > .slide[data-series="public"],
.slides[data-series="public"] > .slide[data-series="home"]{display:none}
.solutions__tabs[data-series="home"] > .cat[data-series="public"],
.solutions__tabs[data-series="public"] > .cat[data-series="home"]{display:none}
.slide__media{margin:0;display:grid;place-items:center;
  transform:translate3d(0,calc(14px * (1 - var(--si,1))),0);opacity:var(--si,1)}
.slide:first-child .slide__media img{opacity:var(--pvshow,0)}
.slide__media img{width:auto;height:max(240px,45.6vh);max-height:660px;
  filter:drop-shadow(0 36px 54px rgba(18,32,66,.2));
  transform:perspective(900px) rotateX(var(--py,0deg)) rotateY(var(--pxr,0deg))}
.slide__body{max-width:820px;transform:translate3d(0,calc(18px * (1 - var(--si,0))),0)}
.slide__body h3{font-family:"Kanit",sans-serif;font-weight:500;font-size:var(--fs-36);line-height:1.3;
  letter-spacing:0;color:#132a5c}
.slide__sub{margin-top:10px;font-size:var(--fs-18);font-weight:500;color:#22304a}
.slide__copy{margin-top:14px;font-size:var(--fs-body);line-height:1.85;color:#5f7089}
.btn--pill{margin-top:clamp(18px,2.6vh,30px);height:46px;padding:0 24px;background:#fff;color:#1b2c4d;
  border:1px solid #e2e8f1;box-shadow:0 14px 30px -26px rgba(12,26,58,.6);font-size:var(--fs-body)}
.btn--pill:hover{background:#0d1b38;color:#fff;border-color:#0d1b38}
/* the robot is drawn smaller in หุ่นยนต์อัจฉริยะ.psd than the other two
   products (385px tall against ~490), so its plate keeps that ratio */
@media (min-width:761px){
  .slide--robot .slide__media img{height:max(240px,35.6vh)}
  /* a slim product leaves a hole in the middle of its column; the PSD
     parks it against the copy instead, so the gap stays at 249px */
  .slide--robot .slide__media{justify-items:end}
  /* ตู้ชาร์จ.psd draws the AC wallbox at 247px tall (22.9vh) — the smallest
     of the four, because the unit itself is a wall-mounted box */
  .slide--charger .slide__media img{height:max(170px,22.9vh)}
  /* โซลูชันสาธารณะ: each of the four is drawn at its own size in the
     PSD — the megawatt set is three units in a row, so it is wide and
     short and hangs off the left of its column */
  .slide--pub-pv .slide__media img{height:max(200px,40vh)}
  .slide--pub-smart .slide__media img{height:max(180px,32.9vh)}
  .slide--pub-allinone .slide__media img{height:max(220px,43.9vh)}
  /* three units side by side: wider than the media column, exactly as in
     the PSD, so the global max-width has to stand aside here */
  .slide--pub-mw .slide__media img{height:max(120px,19.9vh);max-width:none}
  .slide--pub-mw .slide__media{justify-items:start}
}

/* ---------- 13 CONTACT ---------- */
/* ---------- contact + footer — exact alignment to 底部.psd @1920 ---------- */
.contact{position:relative;overflow:hidden;color:#fff;padding-top:4.43vw;
  background:linear-gradient(100deg,#061846 0%,#061e57 100%)}
.contact__chev{position:absolute;z-index:0;pointer-events:none}
.contact__chev--top{left:41.1vw;top:4.69vw;width:11.77vw}
.contact__chev--big{right:2.86vw;top:22.66vw;width:23.18vw}
.contact__in{position:relative;z-index:2}
.contact__lead h2{font-family:"Kanit",sans-serif;font-weight:500;
  font-size:var(--fs-h1);line-height:1.19;color:#f9fcfa}
.contact__lead h2 em{font-style:normal;color:inherit}

/* two-segment section headings (โซลูชัน… / เปิดตัวครั้งแรกของโลก …) — the
   WHOLE heading sweeps white → gold on the same -45° axis instead of
   "one gold line + one white line" */
.hero__title,
.globe__title,
.push--robotaxi .push__body h2,
.push--dc .push__body h2{
  background-image:linear-gradient(135deg,#ffffff 0%,#fffbe6 15%,#f8e389 45%,#ecc465 68%,#d8a94e 88%,#c3903a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}
.hero__title em,.globe__title em,.push__body h2 em{font-style:normal}

/* every heading on the page speaks with one voice — the Kanit display face,
   one weight, one size step, no tracking drift */
.hero__title,
.globe__title,
.push__body h2,
.zoom__title,
.zoom__caption h3,
.solutions__lead h2,
.slide__body h3,
.contact__lead h2{
  font-family:"Kanit",sans-serif;font-weight:500;letter-spacing:0}
/* the 102px display line keeps its own optical tracking */
.zoom__title{letter-spacing:-.02em}
.contact__lead p{margin-top:.6vw;font-size:clamp(12px,.94vw,27px);line-height:1.44;
  color:#b9bbc3;max-width:25.8vw}
.form{position:relative;z-index:2;display:flex;flex-direction:column;
  margin-top:2.76vw;max-width:57.7vw}
.form__pick{display:grid;grid-template-columns:repeat(3,1fr);gap:1.09vw;margin-bottom:.99vw}
.pick{display:flex;align-items:center;gap:.63vw;height:2.7vw;padding:0 .94vw;border-radius:.52vw;
  background:transparent;border:1px solid #1f3059;color:#b9bbc3;
  font-size:clamp(11px,.78vw,22px);transition:border-color .35s,color .35s}
.pick img{height:1.5vw;min-height:16px;width:auto;flex:0 0 auto}
.pick:hover{border-color:#3a4f80;color:#fff}
/* PSD shows no selected state — keep the class for logic, visuals identical */
.pick.is-on{border-color:#1f3059;color:#b9bbc3}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.04vw;width:38.1vw;max-width:100%}
.form__row + .form__row{margin-top:.89vw}
.field{display:flex;flex-direction:column;gap:.83vw;font-size:clamp(11px,.73vw,20px);color:#fff}
.field > span{line-height:1}
.field input,.field textarea{height:2.7vw;padding:0 1.04vw;border-radius:.42vw;
  border:1px solid #1f3059;background:transparent;color:#fff;font:inherit;
  font-size:clamp(11px,.78vw,22px);
  transition:border-color .3s,background .3s}
.field textarea{height:6.35vw;padding:1vw 1.04vw;resize:none;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#b9bbc3;opacity:1}
.field input:focus,.field textarea:focus{outline:none;border-color:#4a5d8f;background:rgba(255,255,255,.03)}
.field--area{margin-top:1.15vw}
.check{display:flex;align-items:center;gap:.68vw;font-size:clamp(11px,.73vw,20px);
  color:#b9bbc3;margin-top:1.15vw}
.check input{appearance:none;-webkit-appearance:none;width:1.04vw;height:1.04vw;min-width:14px;min-height:14px;
  border:1.5px solid #838ca4;border-radius:.31vw;background:transparent;margin:0;cursor:pointer;
  transition:background .3s}
.check input:checked{background:#838ca4 center/70% no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23061846' stroke-width='4'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E")}
.btn--confirm{align-self:flex-start;margin-top:1.72vw;height:2.7vw;padding:0;border-radius:999px;
  width:8.44vw;min-width:120px;background:#fff;color:#475274;
  font-size:clamp(11px,.78vw,22px);font-weight:500;transition:background .35s,color .35s}
.btn--confirm:hover{background:var(--gold-lite)}

.foot{margin-top:8.18vw;padding-bottom:.73vw;position:relative;z-index:2}
.foot__in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot__in img{width:6.46vw;min-width:92px;height:auto}
.foot__in nav{display:flex;gap:7.45vw;font-size:clamp(12px,.94vw,22px);color:#b9bbc3}
.foot__in nav a:hover{color:#fff}
.foot__base{display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin-top:1.2vw;padding-top:.68vw;border-top:1px solid #1f3264;
  font-size:clamp(12px,.834vw,20px);color:#b9bbc5}
/* PSD spacing: copyright → phone 49px, phone → handles 15px */
.foot__base p{display:inline-flex;gap:0;white-space:nowrap}
.foot__base p span+span{margin-left:2.48vw}
.foot__base p span+span+span{margin-left:.52vw}
.foot__base a{color:#b9bbc5}
.foot__base a:hover{color:#fff}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------- responsive: art direction ----------
   Wide screens keep full-bleed cover; tall / narrow screens switch to
   contain + blurred fill so the artwork is never excessively cropped. */
@media (max-aspect-ratio: 3/2) and (min-aspect-ratio: 1/1){
  .hero__media img,.globe__house img,.push__media>img{object-fit:contain}
}
/* portrait phones: full-bleed cover with a lower focal point reads far better
   than letterboxing a 16:9 still into a 9:19.5 screen */
@media (max-aspect-ratio: 1/1){
  .hero__media img,.globe__house img,.push__media>img{
    object-fit:cover;object-position:50% 100%}
  .hero__media::before,.globe__house::before,.push__media::before{display:none}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .cards{grid-template-columns:repeat(2,1fr)}
  /* the bar keeps its 1920 arrangement (links → capsule → TH, right aligned)
     and only tightens; hiding the links here left a lone logo/pill cluster */
  .head__in{gap:clamp(12px,1.5vw,22px)}
  .head__nav{gap:clamp(12px,1.7vw,26px)}
  .side-rail{display:none}
  .contact__in{grid-template-columns:1fr}
  .contact__chev{top:auto;bottom:-6%;opacity:.5}
  .solutions__head{flex-direction:column;gap:16px}
  .slide{grid-template-columns:1fr;align-content:center;gap:24px}
  .slide__media img{max-height:30vh}
}
/* small laptops still show the full bar, just tighter */
@media (max-width:880px){
  .head__in{gap:12px}
  .head__nav{gap:13px}
  .head__ad{width:76px;height:30px}
  .head__lang{height:32px;padding:0 12px 0 9px}
}
@media (max-width:760px){
  /* the desktop column is 77.1vw — on a 320px phone that leaves only 247px of
     content. Use the full width minus a 18px gutter instead (standard mobile
     gutter) and let every .wrap breathe */
  :root{--pad:18px;--wrap:100%}
  /* scroll reveal for the stacked layouts (class is added by main.js on phones
     only, so desktop scenes are unaffected) */
  .m-reveal{opacity:0;transform:translateY(24px);
    transition:opacity .8s var(--ease),transform .85s var(--ease)}
  .m-reveal.is-in{opacity:1;transform:none}
  html{-webkit-text-size-adjust:100%}
  .head__in{height:64px}
  .head__logo img{width:92px}
  /* phones drop the links and the campaign pill: the burger owns the bar */
  .head__nav{display:none}
  .head__ad{display:none}

  /* ---- phone navigation (international pattern: hamburger + sheet) ---- */
  html,body{-webkit-tap-highlight-color:transparent}
  a,button,.pick,.cat{touch-action:manipulation}
  .head__in{gap:10px}
  .head__lang{flex:0 0 auto;padding:0 12px 0 9px;margin-left:auto}
  .head__burger{display:flex;flex:0 0 44px;margin-left:6px;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:0 10px;border:0;background:none;
    color:currentColor;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .head__burger span{display:block;height:1.5px;width:100%;border-radius:2px;background:currentColor;
    transition:transform .35s var(--ease),opacity .3s var(--ease)}
  .head__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .head__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .head__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .mnav{display:block;position:fixed;inset:0;z-index:49;
    background:rgba(5,15,42,.972);-webkit-backdrop-filter:blur(20px) saturate(120%);backdrop-filter:blur(20px) saturate(120%);
    opacity:0;pointer-events:none;transition:opacity .38s var(--ease)}
  .mnav.is-open{opacity:1;pointer-events:auto}
  .mnav__in{display:flex;flex-direction:column;justify-content:center;height:100%;
    padding:calc(76px + env(safe-area-inset-top)) max(var(--pad),env(safe-area-inset-left))
            calc(32px + env(safe-area-inset-bottom))}
  .mnav a{display:flex;align-items:center;min-height:56px;font-size:17px;line-height:1.35;
    color:rgba(255,255,255,.86);border-bottom:1px solid rgba(255,255,255,.12);
    transform:translateY(10px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease)}
  .mnav.is-open a{transform:none;opacity:1}
  .mnav.is-open a:nth-child(1){transition-delay:.06s}
  .mnav.is-open a:nth-child(2){transition-delay:.12s}
  .mnav.is-open a:nth-child(3){transition-delay:.18s}
  .mnav.is-open a:nth-child(4){transition-delay:.24s}
  /* touch feedback: no hover on phones, so every tap gets an active state */
  .btn:active,.card__btn:active{transform:scale(.97)}
  .mnav a:active{color:#fff;background:rgba(255,255,255,.06)}

  /* touch targets: international best practice is >=44px; 52px desktop pills
     become 46px so two buttons still fit one line on a 390px screen */
  .btn{height:46px;padding:0 18px;font-size:15px}

  /* 02 globe: title wraps to 4-5 Thai lines on a narrow screen, so the CTA
     row (fixed 28.5vh) lands on top of it — push actions well below the fold
     of the tallest wrap */
  /* ── ONE copy layout for the three full-bleed screens ────────────────────
     The globe screen anchored its headline absolutely at the top while the two
     dark panels pinned theirs to the foot, so the same three-line headline
     jumped from top to bottom from screen to screen and the CTA pair changed
     from stacked to a single row. Each block is now a top-anchored column:
     headline, then the two buttons centred underneath, at the same 15svh on
     every screen. */
  .globe__content{display:flex;flex-direction:column;align-items:center;
    padding:15svh var(--pad) 0;gap:26px}
  .globe__title{position:static;transform:none !important;max-width:100%;text-align:center}
  .globe__actions{position:static;transform:none;margin:0;
    width:auto;flex-direction:column;align-items:center;gap:12px;opacity:var(--btn,0)}

  /* push screens: same column, same 15svh (see the dark-panel block below) */
  /* the two pills sit one under the other, each at its natural width, exactly
     as on the first screen — same on every panel, at every phone width */
  .push__actions{width:auto;flex-direction:column;align-items:center;gap:12px}
  .push__copy{font-size:16px;line-height:1.75}

  .zoom{height:300vh}
  .zoom__title{font-size:clamp(34px,11vw,64px)}

  /* brand: six 57px capsules + gaps can never fit a 390px row — let each row
     wrap to 2 lines of 3 and shrink the JS scatter amplitude (see main.js) */
  /* the -100svh pull is the desktop hand-off trick (the brand photo must
     already cover the factory screen before it pins). With the phone's
     factory screen being a plain 100svh panel, that pull buried it
     completely — the panel never got a single viewport on stage. */
  /* with the duplicate shot gone the phone sequence is just logo → grid, so
     the pin no longer needs three screens of travel */
  .brand{height:320vh;margin-top:0}
  /* three 6-slot rows can never fit a phone: each wraps to 3×2, so the three
     rows are really six capsule lines tall. The old rhythm was expressed in
     vh (18.7 / 4.5 / 23) while the capsules are vw-sized — on a short viewport
     the pitch collapsed and the rows stacked through each other. Every size
     below is now a PLAIN vw number (26vw capsule, 13.9vw = its 162/303
     height): no custom-property math, no percentage heights, nothing a phone
     WebView can fail to resolve. The whole block therefore always scales with
     the screen WIDTH, so it always fits a portrait viewport. */
  .brand__row{flex-wrap:wrap;justify-content:center;width:88vw;row-gap:14px;column-gap:14px}
  /* row centres: mid line-1 sits on the screen centre (that is where the
     wordmark shrinks to), top/bottom one pitch away */
  .brand__row--top{top:calc(50% - 20.85vw - 21px)}
  .brand__row--mid{top:calc(50% + 6.95vw + 7px)}
  .brand__row--bot{top:calc(50% + 34.75vw + 35px)}
  .brand__row--mid .brand__logo-cell{order:2}
  .brand__row--mid .ctile:nth-of-type(1){order:1}
  .brand__row--mid .ctile:nth-of-type(2){order:3}
  .brand__row--mid .ctile:nth-of-type(3){order:4}
  .brand__row--mid .ctile:nth-of-type(4){order:5}
  .brand__row--mid .ctile--pvbase{order:6}
  .ctile,.brand__logo-cell{width:26vw;height:13.9vw}
  .ctile__in,.brand__logo-cell,.brand__card::before{height:13.9vw}
  /* the icon gets its own fixed box (64% × 52% of the capsule). Percentage
     heights were resolving against an auto-height parent on some WebViews, so
     the artwork drew at full intrinsic size and burst out of the pill. */
  .ctile__in img{width:16.6vw;height:7.3vw;max-width:none;max-height:none}
  .brand__logo-cell img{width:16.1vw;height:auto}
  /* the panel rises out of its capsule at the PSD ratio (214 over 162) */
  .brand__card{height:18.35vw;width:auto}
  .brand__card::before{width:26vw}
  .brand__card img{width:auto;height:100%}
  .brand__mark{width:min(80vw,52vh)}

  .solutions{height:auto;margin-top:0}
  /* phones: the pinned 4-tab stage can't fit 844px — degrade to a normal
     scrolling stack of the four slides (same pattern as reduced-motion) */
  .solutions__sticky{position:relative;height:auto;transform:none;padding-top:9vh;padding-bottom:48px}
  .solutions__stage{position:relative}
  .slide{position:relative;inset:auto;opacity:1;pointer-events:auto;
    grid-template-columns:1fr;align-content:start;gap:18px;margin-bottom:48px}
  .slide__media img{height:auto;max-height:28vh}
  .slide:first-child .slide__media img{opacity:1}
  .solutions__tabs{gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:24px}
  .cat{width:104px;min-height:88px;flex:0 0 auto}

  .form__row,.form__pick{grid-template-columns:1fr}
  .form__row{gap:12px}
  .form__row + .form__row{margin-top:12px}
  /* contact form: every size was vw-based (2.7vw = 10px fields on a phone) —
     fixed px, 16px input font stops iOS zoom-on-focus, full width */
  .contact__in{gap:28px}
  /* the lead paragraph was capped at 25.8vw (100px on a phone) — let it use the
     full column and sit comfortably under the heading */
  .contact__lead p{max-width:none;font-size:15px;line-height:1.62;margin-top:12px}
  .form,.form__row{max-width:100%;width:100%}
  .form__pick{gap:8px;margin-bottom:12px}
  .pick{height:44px;padding:0 12px;border-radius:10px;font-size:14px}
  .pick img{height:18px}
  .field{gap:8px;font-size:13px}
  .field input,.field textarea{height:46px;padding:0 14px;border-radius:10px;font-size:16px}
  .field textarea{height:130px;padding:12px 14px}
  .check{font-size:13px;margin-top:14px}
  .check input{width:18px;height:18px}

  .foot__base{flex-direction:column;align-items:flex-start;gap:6px}
  /* the PSD's single nowrap line is 630px wide — on a phone it has to wrap */
  .foot__base p{flex-wrap:wrap;white-space:normal;gap:2px 14px;font-size:14px}
  .foot__base p span+span,.foot__base p span+span+span{margin-left:0}
  /* every tappable row clears the 44px thumb target */
  .foot__in nav{flex-wrap:wrap;gap:4px 18px}
  .foot__in nav a{display:inline-flex;align-items:center;min-height:44px}
  .foot__base a{display:inline-flex;align-items:center;min-height:44px}
  .foot{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  /* captions were 13px — one notch up for comfortable reading */
  .gprod p{font-size:14px;line-height:1.62}
  .lstrip__scene{margin-bottom:4px}
  /* tab rail: snap each card into place, keep the scroll inside the rail */
  .solutions__tabs{scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    scrollbar-width:none;padding-left:2px}
  .solutions__tabs::-webkit-scrollbar{display:none}
  .cat{scroll-snap-align:start}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .globe,.push,.zoom,.brand,.grow,.solutions{height:auto}
  .push,.brand{margin-top:0}
  .globe__sticky,.push__sticky,.zoom__sticky,.brand__sticky,.grow__sticky,.solutions__sticky{position:relative;height:auto;min-height:100svh}
  .globe__title,.globe__actions{opacity:1;transform:none}
  .zoom__card{display:none}
  .slide{opacity:1;position:relative;inset:auto;margin-bottom:60px}
}

/* ─────────────────────────────────────────────────────────────
   WHITE PRODUCT STRIPS — FULL-SCREEN HORIZONTAL PAGES.
   The design is one screen: PSD metrics = featured 1086px + waiting
   columns 506px. Each product gets its own page of that exact
   composition; scrolling pushes the WHOLE page left while the next
   page (same layout, next product featured) comes in from the right.
   ───────────────────────────────────────────────────────────── */
.lstrip{position:relative;z-index:5;height:660vh;margin-top:-200svh;background:transparent;color:#17294f}
.lstrip__sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:transparent}
/* the white sheet slides in from the right while the house scene slides out
   to the left — a horizontal page change, not a vertical one */
.lstrip__sheet{position:absolute;inset:0;background:#fff;will-change:transform;
  transform:translate3d(var(--sx,0px),0,0)}

.lstrip__head{position:absolute;z-index:3;left:0;right:0;top:0;height:33.3svh;
  border-bottom:1px solid #e9ecf1}
.lstrip__title{position:absolute;z-index:1;left:11.4vw;top:13svh;font-family:"Kanit",sans-serif;
  font-weight:500;letter-spacing:0;font-size:var(--fs-h1);line-height:1.34;color:#17294f}
.lstrip__scene{position:absolute;left:56.5625vw;right:0;top:0;z-index:1;margin:0;
  height:33.3svh;overflow:hidden;opacity:var(--en,0);
  transform:scale(calc(.96 + .04 * var(--en,0)))}
.lstrip__scene img{width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block}

.lstrip__body{position:absolute;left:0;right:0;top:33.3svh;bottom:0;overflow:hidden}
.lstrip__track{position:relative;height:100%;width:135.625vw;will-change:transform}
/* the design's column rules: right edge of the featured berth and of the
   first waiting column (PSD x=1086 / x=1592) */
.lstrip__track::before,.lstrip__track::after{content:"";position:absolute;top:0;bottom:0;
  width:1px;background:#e9ecf1}
.lstrip__track::before{left:56.5625vw;opacity:var(--r1,1)}
.lstrip__track::after{left:82.9167vw;opacity:var(--r2,1)}

.gprod{position:absolute;left:0;top:0;height:100%;margin:0;display:flex;flex-direction:column;
  align-items:center;padding:10.7svh 1.4vw 0;text-align:center}
.gprod .lstrip__stage{display:flex;align-items:flex-end;justify-content:center;
  width:100%;height:calc(26.6svh + 8.8svh * var(--k,0));overflow:visible}
/* --k (1 = sitting in the big berth) drives the whole growth, so the product
   scales up CONTINUOUSLY as it travels in — not in a single snap at the end */
.gprod .lstrip__stage img{display:block;width:auto;max-width:100%;
  height:calc(var(--qh,26svh) + (38svh - var(--qh,26svh)) * var(--k,0));
  filter:drop-shadow(0 26px 34px rgba(20,34,70,.12))}
.gprod figcaption{margin-top:calc(6.2svh - 1.2svh * var(--k,0));width:100%;max-width:640px}
.gprod h3{font-family:"Kanit",sans-serif;font-weight:500;letter-spacing:0;
  font-size:calc(26px + 8px * var(--k,0));line-height:1.3;color:#17294f;
  opacity:calc(.75 + .25 * var(--k,0))}
.gprod p{margin-top:10px;font-size:calc(14px + 1px * var(--k,0));line-height:1.6;
  color:#98a2af;opacity:calc(.6 + .4 * var(--k,0));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* the featured card of each page: bigger copy, lower baseline, bigger art */
.gprod.is-big{justify-content:flex-start}


@media (max-width:760px){
  .lstrip{height:auto;margin-top:0;background:#fff}
  /* ── dark screens on a phone ────────────────────────────────────────────
     The desktop build stacks these as pinned panels: the section starts one
     viewport EARLY (margin-top:-100svh) so it rides up over the scene it
     replaces, and it is 320–260vh tall to give that ride its scroll length.
     Neither trick survives the phone layout, where the white product strip is
     a plain document list: the negative margin simply swallowed the last
     product of that list (a navy band cutting a cabinet in half) and the tail
     left 1.6 screens of empty navy behind it. On phones the screen is just a
     full-bleed photo panel, so both are dropped. */
  .push,.push--tall,.push.push--robotaxi,.push.push--dc{
    height:100svh;min-height:520px;margin-top:0;background:var(--ink)}
  #first,#dc,#dc-strip,#s1600-strip{z-index:auto}
  .push__sticky,.push.push--robotaxi .push__sticky,.push.push--dc .push__sticky{
    position:relative;height:100%;transform:none !important}
  .push__media>img{transform:none;will-change:auto}
  /* no scroll-driven fade here — there is nothing pinning to reveal it, so the
     copy is simply always on, in the same top-anchored column as the globe */
  .push__body,.push__body--left{
    top:15svh;bottom:auto;transform:translate(-50%,0);opacity:1;gap:26px}
  .push__body--left{width:calc(100vw - 36px)}
  .push__body--left::before{inset:-40px -12%}
  /* copy moved back to the top of the frame, so the scrim turns over: heavy
     behind the headline, clear at the foot where the shot should read */
  .push__scrim{background:linear-gradient(180deg,
    rgba(8,18,50,.88) 0%,rgba(8,18,50,.62) 22%,rgba(8,18,50,.24) 46%,
    rgba(8,18,50,.10) 66%,rgba(8,18,50,.30) 100%)}
  /* a 22px heading is a desktop caption, not a phone section title */
  .push__body h2,.lstrip__title,.globe__title{font-size:26px;line-height:1.36}
  .lstrip__sheet{position:relative;inset:auto;transform:none !important;background:#fff}
  .lstrip__sticky{position:relative;height:auto;min-height:100svh;overflow:visible}
  .lstrip__head{position:relative;height:auto;padding:72px var(--pad) 6px;border-bottom:0}
  .lstrip__title{position:relative;left:auto;top:auto}
  /* 72vw left a dead white column on the right — on a phone the scene is a
     full-width band inside the gutter, cropped to a calmer 2:1 */
  .lstrip__scene{position:relative;left:auto;right:auto;top:auto;width:100%;height:auto;
    aspect-ratio:2/1;margin-top:22px;opacity:1;transform:none;border-radius:12px;overflow:hidden}
  .lstrip__body{position:relative;top:auto;left:auto;right:auto;bottom:auto;overflow:visible}
  .lstrip__track{display:block;width:auto;transform:none !important}
  .lstrip__track::before,.lstrip__track::after{display:none}
  .gprod{position:relative;left:0 !important;width:100% !important;height:auto;transform:none !important;
    border-top:1px solid #e9ecf1;padding:44px var(--pad) 40px}
  .gprod .lstrip__stage{height:auto}
  .gprod .lstrip__stage img{height:26svh}
  .gprod.is-big .lstrip__stage img{height:32svh}
  .gprod.is-big h3{font-size:26px}
  .gprod h3{font-size:22px;opacity:1}
  .gprod p{font-size:14px;opacity:1;-webkit-line-clamp:3}
}

/* ─────────────────────────────────────────────────────────────────────────
   LINE SWITCH  (2026-10-29)  —  currently OFF
   The hairline rules in the white product strips are hidden, but nothing was
   deleted: the original three rules are untouched and the block below only
   paints them out while <html class="no-lines"> is present.

   To bring every line back, pick either way:
     1) delete class="no-lines" from <html> in index.html, or
     2) restore the snapshot saved at
        preview/_backup/lines-on-2026-10-29/{index.html, main.css}
   ───────────────────────────────────────────────────────────────────────── */
.no-lines .lstrip__head{border-bottom-color:transparent}
.no-lines .lstrip__track::before,
.no-lines .lstrip__track::after{background:none}
.no-lines .gprod{border-top-color:transparent}

/* ── presentation build ────────────────────────────────────────────────────
   No page-to-page hop and no anchor jump anywhere except the campaign capsule
   in the bar. The arrow cursor and the dropped hover underline keep the bar
   from promising a click it will not honour (JS swallows the event). */
a:not(.head__ad),a:not(.head__ad) *{cursor:default}
.head__nav a::after{display:none}

/* ── WebKit / Safari ───────────────────────────────────────────────────────
   Unprefixed backdrop-filter only landed in Safari 18, so every blur is
   declared twice above. Where neither is understood the glass panels fall back
   to a near-opaque fill rather than going see-through. iOS also needs the
   scroll container to opt into momentum scrolling. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .head.is-solid{background:rgba(8,18,50,.97)}
  .mnav{background:rgba(5,15,42,.995)}
  .side-rail a{background:rgba(11,23,65,.9)}
  .btn--ghost,.btn--glass{background:rgba(255,255,255,.12)}
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button{-webkit-appearance:none;appearance:none}
.mnav{-webkit-overflow-scrolling:touch;overflow-y:auto}
.solutions__tabs{-webkit-overflow-scrolling:touch}
/* Safari paints Thai at a heavier weight than Chrome; the body already asks for
   antialiasing, these keep the small caps labels from smearing */
.head__nav,.head__lang,.eyebrow{text-rendering:optimizeLegibility}