:root{--forest:#103d32;--deep:#092e27;--ivory:#faf8f3;--beige:#f0ece5;--ink:#202623;--gray:#626b64;--line:#dcded5;--purple:#826a91;--purple-text:#735a80;--brown:#c28a56;--sage:#758269;
--heading:Manrope,"Noto Sans Thai",sans-serif;--body:Inter,"Noto Sans Thai",sans-serif;--radius:16px;
--sh-1:0 1px 2px #092e2714,0 2px 6px #092e2712;--sh-2:0 2px 4px #092e2714,0 8px 18px #092e2718;--sh-3:0 4px 8px #092e2714,0 16px 32px #092e2720;
--hl:inset 0 1px 0 #ffffff38;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 16px/1.85 var(--body);-webkit-font-smoothing:antialiased}
html[lang=th]{--heading:"Noto Sans Thai",Manrope,sans-serif;--body:"Noto Sans Thai",Inter,sans-serif}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;color:var(--forest);font-family:var(--heading);font-weight:650;line-height:1.16;letter-spacing:-.045em}
h1{font-size:clamp(40px,4.55vw,68px)}
h2{font-size:clamp(30px,3.1vw,49px)}
h3{font-size:23px;line-height:1.3;letter-spacing:-.02em}
html[lang=th] :is(h1,h2,h3){line-height:1.4;letter-spacing:-.015em}
p{color:var(--gray);margin:0 0 16px;max-width:680px}
html[lang=th] p{line-height:1.95}
.container{width:calc(100% - 112px);max-width:1328px;margin-inline:auto}
.section{padding-block:104px}
.section-tint{background:var(--beige)}
.section.compact{padding-block:60px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 13px/1.4 var(--body);text-transform:uppercase;letter-spacing:.18em;color:var(--purple-text);margin-bottom:20px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--purple)}
html[lang=th] .eyebrow{text-transform:none;letter-spacing:.035em}
.sage{color:var(--sage)}
.lead{font-size:19px;color:var(--gray)}
.lead.big{font-size:21px}
.note{font-size:14px;line-height:1.75;color:var(--gray)}
:focus-visible{outline:3px solid var(--purple-text);outline-offset:5px}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;background:var(--forest);color:var(--ivory);padding:10px 16px;border-radius:8px;z-index:200}
.skip:focus{left:8px}

/* header */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--purple);z-index:120}
.site-header{position:sticky;top:0;z-index:100;background:#faf8f3ed;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-bottom:1px solid var(--line);transition:box-shadow .4s var(--ease)}
.site-header.scrolled{box-shadow:var(--sh-1)}
.header-in{max-width:1440px;margin:auto;padding-inline:56px;height:86px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 22px/1 Manrope,sans-serif;letter-spacing:-.03em;color:var(--forest)}
.brand svg{width:36px;height:36px}
.brand span b{color:var(--sage);font-weight:800}
nav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;align-items:center}
nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font:500 15px/1 var(--body);color:var(--forest);position:relative}
nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:2px;background:var(--forest);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
nav a:hover::after,nav a[aria-current=page]::after{transform:scaleX(1)}
.hdr-right{display:flex;align-items:center;gap:14px}
.lang{display:flex;border:1px solid #cfd3c7;border-radius:999px;padding:3px;background:#fff}
.lang button{border:0;background:none;font:600 13px/1 var(--body);padding:9px 13px;border-radius:999px;cursor:pointer;color:var(--forest);min-height:36px}
.lang button[aria-pressed=true]{background:var(--forest);color:#fff}
.menu-btn{display:none;width:46px;height:46px;border:1px solid #cfd3c7;border-radius:8px;background:#fff;cursor:pointer;align-items:center;justify-content:center}
.menu-btn svg{width:22px;height:22px;stroke:var(--forest);fill:none;stroke-width:1.8;stroke-linecap:round}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:52px;padding:16px 23px;border:1px solid #0b2e26;border-radius:8px;background:linear-gradient(180deg,#1a5646,#103d32 55%,#0b2e26);color:var(--ivory);font:500 15px/1.6 var(--body);text-decoration:none;box-shadow:var(--hl),inset 0 -2px 0 #00000026,var(--sh-1);transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease);cursor:pointer}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.secondary{background:linear-gradient(180deg,#fff,#f3f1ea);color:var(--forest);border-color:#cfd3c7;box-shadow:var(--sh-1)}
.btn.ondark{background:linear-gradient(180deg,#fff,#ece8dc);color:var(--forest);border-color:#ece8dc}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.link{display:inline-flex;align-items:center;gap:18px;min-height:44px;color:var(--forest);font:500 15px/1.6 var(--body);text-decoration:none}
.link:hover{text-decoration:underline;text-underline-offset:5px}
@media(hover:hover) and (pointer:fine){
.btn:hover{transform:translateY(-3px);box-shadow:var(--hl),var(--sh-3);background:linear-gradient(180deg,#1f634f,#14473a 55%,#0d3329)}
.btn.secondary:hover,.btn.ondark:hover{background:linear-gradient(180deg,#fff,#ece8dc)}
.btn:hover svg{transform:translate(2px,-2px)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);background:#eff1e8}
.frame:hover img,.frame:hover svg.art{transform:scale(1.035)}}

/* hero */
.hero{padding-block:72px 96px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:48px;align-items:center}
.hero h1{margin-bottom:24px}
.hero .lead{max-width:560px}
.status{display:inline-flex;align-items:center;gap:10px;margin-top:28px;border:1px solid var(--line);border-radius:999px;padding:6px 16px;font-size:14px;color:var(--gray);background:#fff}
.status i{width:8px;height:8px;border-radius:50%;background:var(--brown)}
.frame{border-radius:14px 14px 14px 70px;overflow:hidden;box-shadow:var(--sh-2);background:var(--beige);aspect-ratio:1.08/1}
.frame svg.art,.frame img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.page-hero{padding-block:72px 64px;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(42px,4.4vw,68px);max-width:900px}
.page-hero .lead{margin-top:24px;max-width:720px}

/* strip */
.strip{border-block:1px solid var(--line);padding-block:44px;display:grid;grid-template-columns:90px minmax(0,1fr);gap:28px;align-items:center}
.strip svg{width:64px;height:64px;stroke:var(--sage);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.strip p{font-size:21px;margin:0;color:var(--forest);max-width:900px;line-height:1.65}

/* cards */
.head{max-width:760px;margin-bottom:48px}
.head h2{margin-bottom:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.card{background:linear-gradient(180deg,#fff,#fbfaf6);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--sh-1);transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease)}
.card .ico{width:40px;height:40px;stroke:var(--forest);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:20px}
.card h3{margin-bottom:10px}
.card p:last-child{margin:0}
.num{font:600 13px/1 var(--body);letter-spacing:.1em;color:var(--purple-text);display:block;margin-bottom:18px}
.card.flat{box-shadow:none;background:#fff}
.card.flat:hover{transform:none;box-shadow:none;background:#fff}

/* split / timeline */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:65px;align-items:center}
.split.top{align-items:start}
.list{list-style:none;padding:0;margin:20px 0 0}
.list li{position:relative;padding:12px 0 12px 28px;border-top:1px solid var(--line);color:var(--gray)}
.list li:last-child{border-bottom:1px solid var(--line)}
.list li::before{content:"";position:absolute;left:4px;top:25px;width:8px;height:8px;border-radius:50%;background:var(--purple)}
.list b{color:var(--forest);font-weight:600}
.timeline{position:relative;padding-left:44px;margin:0;list-style:none}
.timeline::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:1px;background:var(--line)}
.timeline li{position:relative;padding-bottom:36px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-39px;top:10px;width:11px;height:11px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 5px var(--ivory)}
.section-tint .timeline li::before{box-shadow:0 0 0 5px var(--beige)}
.timeline h3{margin-bottom:6px}
.timeline p{margin:0}

/* metrics */
.metric{text-align:left}
.metric .big{font:650 clamp(40px,4vw,56px)/1.1 Manrope,sans-serif;color:var(--forest);letter-spacing:-.04em;margin:6px 0 4px}
.metric .ba{font-size:14px;color:var(--gray);margin:0}
.bar{height:6px;border-radius:99px;background:var(--beige);margin-top:16px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--forest),var(--sage));border-radius:99px}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
th,td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.6}
th{background:var(--beige);color:var(--forest);font-weight:600}
td{color:var(--gray)}
td:first-child{color:var(--forest);font-weight:500}
.tablewrap{overflow-x:auto}

/* cta */
.cta{position:relative;background:linear-gradient(135deg,var(--deep),var(--forest));border-radius:var(--radius);padding:72px 56px;overflow:hidden;box-shadow:var(--sh-2)}
.cta h2,.cta p{color:var(--ivory)}
.cta p{opacity:.85}
.cta::after{content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;border:1px solid #ffffff22;box-shadow:0 0 0 40px #ffffff08}

/* footer */
.footer{background:#f4f2eb;padding-top:68px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:40px}
.footer p,.footer a,.footer li{font-size:14px;line-height:1.8}
.footer h3{font-size:16px;margin-bottom:14px}
.footer ul{list-style:none;padding:0;margin:0}
.footer a{text-decoration:none;color:var(--gray)}
.footer a:hover{color:var(--forest);text-decoration:underline}
.footer-bottom{margin-top:48px;padding-block:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;font-size:14px;color:var(--gray)}
.footer-bottom p{margin:0;font-size:14px}

/* cookie */
.cookie{position:fixed;left:20px;right:20px;bottom:20px;max-width:760px;margin-inline:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh-3);padding:20px 24px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;z-index:150}
.cookie p{margin:0;font-size:14px;line-height:1.7;flex:1 1 320px}
.cookie .btn{min-height:44px;padding:10px 18px}

/* preloader */
.pre{position:fixed;inset:0;background:var(--deep);z-index:300;display:grid;place-items:center;transition:transform .65s var(--ease),opacity .65s var(--ease)}
.pre.done{transform:translateY(-100%);opacity:0;pointer-events:none}
.pre-in{position:relative;width:170px;height:170px;display:grid;place-items:center;color:var(--ivory);font:800 20px Manrope,sans-serif;letter-spacing:-.02em}
.pre-in::before,.pre-in::after{content:"";position:absolute;border-radius:50%;border:1px solid #faf8f344;border-top-color:var(--brown)}
.pre-in::before{inset:0;animation:spin 1.8s linear infinite}
.pre-in::after{inset:16px;animation:spin 2.4s linear infinite reverse}
.pre-in span{animation:breathe 1.8s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{50%{opacity:.6}}

/* motion */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .hero .rise{opacity:0;transform:translateY(28px);animation:rise .85s var(--ease) forwards;animation-delay:calc(var(--i,0)*.09s + .1s)}
.js .hero .frame{opacity:0;transform:translateY(24px);animation:rise 1.15s var(--ease) .26s forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* art animation */
.drop{animation:fall 2.2s linear infinite}
@keyframes fall{from{transform:translateY(0);opacity:0}15%{opacity:1}to{transform:translateY(22px);opacity:0}}
.sun{transform-origin:center;transform-box:fill-box;animation:breathe 4s ease-in-out infinite}

@media(max-width:1199px){.container{width:calc(100% - 72px)}.section{padding-block:80px}.header-in{padding-inline:36px;height:76px}.hero-grid,.split{gap:36px}}
@media(max-width:1023px){
.menu-btn{display:inline-flex}
nav{position:absolute;left:0;right:0;top:100%;background:var(--ivory);border-bottom:1px solid var(--line);box-shadow:var(--sh-2);display:none}
nav.open{display:block}
nav ul{flex-direction:column;align-items:stretch;padding:12px 36px 20px;gap:0}
nav a{font-size:16px;border-bottom:1px solid var(--line)}
nav a::after{display:none}
nav a[aria-current=page]{color:var(--purple-text)}}
@media(max-width:767px){
.container{width:calc(100% - 40px)}.section{padding-block:64px}.header-in{padding-inline:20px;height:72px}
nav ul{padding-inline:20px}
h1{font-size:clamp(34px,8.4vw,48px)}
.progress{height:2px}
.hero{padding-block:40px 64px}.hero-grid,.split,.grid3,.grid2{grid-template-columns:minmax(0,1fr)}
.frame{border-radius:12px 12px 12px 45px;aspect-ratio:1.12/1}
.strip{grid-template-columns:minmax(0,1fr)}.strip p{font-size:19px}
.cta{padding:48px 24px}
.brand span{font-size:20px}
.cookie{left:12px;right:12px;bottom:12px}}
@media(max-width:374px){.container{width:calc(100% - 32px)}.lang button{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal,.js .hero .rise,.js .hero .frame{opacity:1!important;transform:none!important}.btn:hover,.btn:active,.card:hover{transform:none}}

/* images from source site */
.brand .logo{width:auto;height:44px;object-fit:contain}
.footer .brand .logo{height:56px}
.pre-in{width:auto;height:auto;display:block}
.pre-in::before,.pre-in::after{display:none}
.pre img{width:120px;height:auto;animation:breathe 1.8s ease-in-out infinite;background:var(--ivory);border-radius:50%;padding:14px}
.frame img.hero-img,.frame>img{width:100%;height:100%;object-fit:cover}
.card.tc{text-align:center}
.card.tc img{width:96px;height:auto;margin:0 auto 20px}
.card .ico-img{width:72px;height:72px;object-fit:contain;margin:0 0 20px}
.photo{border-radius:12px;overflow:hidden;box-shadow:var(--sh-2);background:var(--beige)}
.photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:7/6;transition:transform .8s var(--ease)}
.photos.grid2 .photo img{aspect-ratio:3/4}
.photo:hover img{transform:scale(1.035)}
.fig{margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--sh-2)}
.fig img{width:100%;height:auto}
.fig .fimg img,.grid3.photos .fig img{aspect-ratio:4/3;object-fit:cover;height:auto}
.fig figcaption{padding:14px 18px;font-size:14px;line-height:1.75;color:var(--gray);border-top:1px solid var(--line)}
.grid2.g4{gap:24px}
.legal{max-width:860px}
.legal p{max-width:none;font-size:15px;line-height:1.85}
.cookie a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.cta-row{margin-top:32px}
.hero .cta-row{margin-top:28px}

/* ---- scroll motion ---- */
.site-header{transition:box-shadow .4s var(--ease),transform .5s var(--ease)}
.site-header.hide{transform:translateY(-100%)}
.js .reveal.from-l{transform:translate3d(-44px,24px,0)}
.js .reveal.from-r{transform:translate3d(44px,24px,0)}
.js .reveal.from-l.in,.js .reveal.from-r.in,.js .reveal.from-u.in{transform:none}
.js .from-u:not(.reveal){opacity:1}
.js .px img,.js .px svg.art{transform:none;translate:0 var(--py,0px);scale:var(--sc,1.12);transition:scale .9s var(--ease),filter .9s var(--ease);will-change:translate}
.js .px:hover img,.js .px:hover svg.art{scale:1.17;transform:none}
.js .frame.px img{--sc:1.1}
.js .mask{clip-path:inset(10% 6% 10% 6% round 22px);transition:clip-path 1.1s var(--ease),opacity .85s var(--ease),transform .85s var(--ease)}
.js .mask.in{clip-path:inset(0 0 0 0 round 12px)}
.js .mask img{filter:saturate(.8) brightness(1.05)}
.js .mask.in img{filter:none}
.timeline::after{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;margin-left:-.5px;background:linear-gradient(var(--purple),var(--forest));transform:scaleY(var(--tp,0));transform-origin:top}
.js .timeline li::before{transform:scale(0);transition:transform .7s var(--ease)}
.js .timeline li.in::before{transform:scale(1)}
.js .timeline li{opacity:.35;transition:opacity .8s var(--ease)}
.js .timeline li.in{opacity:1}
.js .strip svg{transform:scale(.7) rotate(-8deg);opacity:0;transition:transform 1.1s var(--ease),opacity 1s var(--ease)}
.js .strip.in svg{transform:none;opacity:1}
.js .list li{opacity:0;transform:translateX(-16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .list li.in{opacity:1;transform:none}
.cta::after{transform:translateY(var(--cy,0px))}
.cta::before{content:"";position:absolute;left:-60px;bottom:-110px;width:240px;height:240px;border-radius:50%;border:1px solid #ffffff1c;transform:translateY(calc(var(--cy,0px)*-1.4))}
.js .card.metric .bar i{transition:width 1.4s var(--ease) .2s}
.hero-grid>div:first-child{will-change:transform}
@media(max-width:767px){.js .reveal.from-l,.js .reveal.from-r{transform:translate3d(0,24px,0)}.js .mask{clip-path:inset(6% 4% 6% 4% round 18px)}}
@media(prefers-reduced-motion:reduce){.js .mask{clip-path:none!important}.js .timeline li,.js .list li{opacity:1!important;transform:none!important}.js .px img{translate:none!important;scale:1!important}.site-header.hide{transform:none}}
.fimg{overflow:hidden}

/* how-it-works (matches source layout) */
.banner-hero{background-size:cover;background-position:center;color:#fff;text-align:center;padding-block:clamp(88px,12vw,170px)}
.banner-hero h1{color:#fff;font-size:clamp(40px,5vw,72px);letter-spacing:-.02em}
.banner-hero p{color:#fff;margin-inline:auto;max-width:900px}
.banner-hero .sub{font-size:18px;font-weight:500;margin-top:20px}
.banner-hero .lead{font-size:clamp(18px,1.6vw,22px);margin-top:12px}
.container.narrow{max-width:1080px}
.how .bar-title{margin:72px 0 28px;padding:14px 32px;background:linear-gradient(90deg,#dce6d6,#8fb3a0 45%,#1f634f);border-radius:44px 44px 0 44px;box-shadow:var(--sh-1)}
.how .bar-title:first-child{margin-top:0}
.how .bar-title h2{font-size:clamp(26px,2.4vw,36px);letter-spacing:-.02em}
.how p.strong{color:var(--ink);font-weight:600;font-size:17px;max-width:none}
.plain{list-style:none;margin:0;padding:0}
.plain li{padding:6px 0;color:var(--ink);font-size:17px;line-height:1.8}
.plain b{font-weight:600;color:var(--forest)}
.twin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:start;margin-top:36px}
.twin .photo img{aspect-ratio:auto;height:auto}
.twin .photo.plainimg{box-shadow:none;background:none;border:1px solid var(--line);background:#fff}
@media(max-width:767px){.twin{grid-template-columns:minmax(0,1fr);gap:24px}.how .bar-title{margin-top:52px;padding:12px 22px}}
.card .ico-img.line{background:#fff;border:1.5px dashed #2b8a68;border-radius:16px;padding:4px}

/* YouTube series */
.yt{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:32px;align-items:start}
.yt-stage{position:relative;aspect-ratio:16/9;border-radius:14px 14px 14px 70px;overflow:hidden;background:#13241e;box-shadow:var(--sh-2);cursor:pointer}
.yt-stage img,.yt-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.yt-stage img{transition:transform .8s var(--ease),opacity .4s}
.yt-stage:hover img{transform:scale(1.035)}
.yt-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#092e2799);pointer-events:none}
.yt-stage.playing::after{display:none}
.yt-play{position:absolute;left:50%;top:50%;z-index:2;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:1px solid #ffffff55;background:linear-gradient(180deg,#1a5646,#0b2e26);box-shadow:var(--hl),var(--sh-3);display:grid;place-items:center;cursor:pointer;transition:transform .45s var(--ease)}
.yt-play svg,.yt-item i svg{fill:#faf8f3;width:30px;height:30px;margin-left:3px}
.yt-stage:hover .yt-play{transform:scale(1.1)}
.yt-cap{margin-top:20px}
.yt-cap .num{margin-bottom:8px}
.yt-title{font-size:clamp(20px,2vw,26px);line-height:1.4}
.yt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;max-height:520px;overflow:auto;padding-right:4px}
.yt-item{width:100%;display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;align-items:center;text-align:left;padding:10px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#fff,#fbfaf6);box-shadow:var(--sh-1);cursor:pointer;font:inherit;color:inherit;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s,background .4s}
.yt-item:hover{transform:translateY(-3px);box-shadow:var(--sh-3);background:#eff1e8}
.yt-item.active{border-color:var(--forest);box-shadow:0 0 0 1px var(--forest),var(--sh-2)}
.yt-thumb{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#13241e}
.yt-thumb img{width:100%;height:100%;object-fit:cover}
.yt-thumb i{position:absolute;inset:0;display:grid;place-items:center;background:#092e2740;opacity:0;transition:opacity .3s}
.yt-thumb i svg{width:22px;height:22px}
.yt-item:hover .yt-thumb i,.yt-item.active .yt-thumb i{opacity:1}
.yt-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.yt-meta b{font:600 12px/1.4 var(--body);letter-spacing:.1em;color:var(--purple-text)}
.yt-t{font-size:14px;line-height:1.55;color:var(--forest);font-weight:500;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:1023px){.yt{grid-template-columns:minmax(0,1fr)}.yt-list{max-height:none;flex-direction:row;overflow-x:auto;padding-bottom:10px}.yt-item{width:260px;flex:0 0 auto;grid-template-columns:minmax(0,1fr)}.yt-stage{border-radius:12px 12px 12px 45px}}

/* ---- v5: five-page brief ---- */
.hero-fig{margin:0}
.hero-fig figcaption,.pfig figcaption{padding:12px 4px 0;font-size:14px;line-height:1.7;color:var(--gray)}
.hero .status{margin-top:24px}
.ph{width:100%;height:100%;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;
 background:repeating-linear-gradient(135deg,#f3f1e8 0 14px,#ece9dd 14px 28px);border:1.5px dashed #9fb3a8;border-radius:inherit;color:var(--forest)}
.ph svg{width:44px;height:44px;fill:none;stroke:var(--sage);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ph b{font:600 13px/1.4 var(--body);letter-spacing:.12em;text-transform:uppercase}
.ph span{font-size:14px;line-height:1.5;color:var(--gray);max-width:300px}
.frame .ph{min-height:0}
.frame img[src*="home1"]{object-position:50% 18%}
.pfig{margin:0}
.pimg{border-radius:14px;overflow:hidden;box-shadow:var(--sh-2);background:var(--beige)}
.pimg img{display:block;width:100%;height:auto}
.pimg .ph{border-radius:14px}
.pfig.phone{max-width:380px;margin-inline:auto}
.pair{align-items:start}
.split.rev>:first-child{order:2}
.cardlink{display:block;text-decoration:none;color:inherit}
.cardlink p{color:var(--gray)}
.cardlink .go{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-weight:600;color:var(--forest)}
.cardlink .go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .3s var(--ease)}
.cardlink:hover .go svg{transform:translate(2px,-2px)}
.video-wrap{max-width:880px}
.yt-stage.solo{border-radius:14px 14px 14px 70px}
.footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px}
.footer-brand{max-width:420px}
.footer-brand p{margin-top:16px}
.footer-right{display:flex;flex-direction:column;gap:18px;align-items:flex-end}
.footer-right p{margin:0}
.footer-nav{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:flex-end}
.footer-nav a{text-decoration:none;color:var(--forest);font-weight:500}
.footer-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-bottom{border-top:1px solid var(--line);padding-block:24px}
.footer-bottom p{margin:0}
@media(max-width:767px){
.split.rev>:first-child{order:0}
.footer-right{align-items:flex-start}.footer-nav{justify-content:flex-start;flex-direction:column;gap:2px}
.grid2.pair{grid-template-columns:minmax(0,1fr)}}
.pfig.tall{max-width:420px;margin-inline:auto}
.pair.sq .pimg img{aspect-ratio:1/1;object-fit:cover;object-position:50% 30%}
.frame img[src*="home2"]{object-position:62% 50%}
.pair.r43 .pimg img{aspect-ratio:4/3;object-fit:cover;object-position:50% 40%}
.pair.sq .pimg img[src*="learning2"]{object-position:30% 50%}
.pair.sq .pimg img[src*="learning3"]{object-position:50% 60%}