/* ============================================================
   COCOOON Venture — Site stylesheet (Premium v2)
   ============================================================ */
:root {
  --green:#62C231; --green-deep:#4FA022; --green-bright:#7ED957; --green-fern:#3C7A1A;
  --green-soft:#E8F5DC; --green-tint:#F4FAEC; --green-wash:#FAFDF6;
  --ink:#1A2332; --ink-2:#222E40; --ink-soft:#48566A; --ink-faint:#6B7787;
  --paper:#F8FAF6; --line:#E7ECE3; --line-soft:#EFF2EC;
  --grad-green:linear-gradient(135deg,#62C231,#4FA022);
  --grad-green-br:linear-gradient(135deg,#7ED957,#4FA022);
  --grad-text:linear-gradient(115deg,#3C7A1A,#62C231 60%,#7ED957);
  --shadow-sm:0 2px 10px rgba(60,90,40,.06);
  --shadow-md:0 1px 2px rgba(26,35,50,.04),0 16px 34px rgba(60,90,40,.10);
  --shadow-lg:0 1px 2px rgba(26,35,50,.04),0 26px 54px rgba(60,90,40,.14),0 50px 90px rgba(60,90,40,.08);
  --shadow-green:0 16px 40px rgba(98,194,49,.34);
  --r-md:16px; --r-lg:24px; --r-pill:999px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'IBM Plex Sans Thai','Sora',-apple-system,sans-serif;
  color:var(--ink); background:var(--paper);
  line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:'Sora','IBM Plex Sans Thai',sans-serif; font-weight:700; line-height:1.13; letter-spacing:-.025em; color:var(--ink); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { max-width:1240px; margin:0 auto; padding:0 24px; }
.accent { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ============ HEADER ============ */
.header {
  position:sticky; top:0; z-index:50;
  background:rgba(248,250,246,.82);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.header-inner { display:flex; align-items:center; gap:24px; height:74px; }
.brand-logo { height:38px; width:auto; }
.nav { margin-left:auto; display:flex; align-items:center; gap:4px; }
.nav a { padding:8px 16px; border-radius:var(--r-pill); font-size:14.5px; font-weight:500; color:var(--ink-soft); transition:all .2s ease; }
.nav a:hover { color:var(--green-deep); background:var(--green-soft); }
.nav a.active { color:var(--ink); font-weight:600; }
.nav a.active::after { content:''; display:block; height:2px; background:var(--grad-green); width:24px; margin:4px auto 0; border-radius:2px; }
.nav .cta-team { background:var(--grad-green); color:#fff; padding:10px 22px; margin-left:10px; font-weight:600; font-size:14px; box-shadow:var(--shadow-green); }
.nav .cta-team:hover { transform:translateY(-1px); box-shadow:0 20px 44px rgba(98,194,49,.5); }
.nav .cta-team.active::after { display:none; }
.nav-toggle { display:none; margin-left:auto; background:none; border:none; cursor:pointer; width:40px; height:40px; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--ink); margin:5px auto; transition:transform .3s,opacity .3s; }

/* ============ BUTTONS ============ */
.btn { display:inline-flex; align-items:center; gap:8px; padding:15px 32px; border-radius:var(--r-pill); font-weight:600; font-size:15.5px; cursor:pointer; border:none; transition:all .25s ease; font-family:inherit; }
.btn-primary { background:var(--grad-green); color:#fff; box-shadow:var(--shadow-green); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 24px 54px rgba(98,194,49,.5); filter:brightness(1.04); }
.btn-ghost { background:#fff; color:var(--ink); border:1.5px solid var(--line); box-shadow:var(--shadow-sm); }
.btn-ghost:hover { border-color:var(--green); color:var(--green-deep); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-dark { background:var(--ink); color:#fff; }
.btn-dark:hover { background:var(--green); transform:translateY(-2px); }
.btn .arrow { transition:transform .2s; }
.btn:hover .arrow { transform:translateX(3px); }

/* ============ HERO ============ */
.hero { position:relative; padding:104px 0 124px; overflow:hidden; isolation:isolate;
  background:radial-gradient(58% 50% at 88% 6%,rgba(126,217,87,.20),transparent 60%),radial-gradient(46% 42% at 2% 96%,rgba(98,194,49,.12),transparent 62%),linear-gradient(180deg,var(--green-wash),var(--paper)); }
.hero::before { content:''; position:absolute; top:-12%; right:-8%; width:620px; height:620px; background:radial-gradient(circle,rgba(98,194,49,.20),transparent 62%); border-radius:50%; z-index:-1; animation:floatA 16s ease-in-out infinite; }
.hero::after { content:''; position:absolute; bottom:-20%; left:-6%; width:440px; height:440px; background:radial-gradient(circle,rgba(126,217,87,.14),transparent 65%); border-radius:50%; z-index:-1; animation:floatB 20s ease-in-out infinite; }
@keyframes floatA { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-26px,22px)} }
@keyframes floatB { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-18px)} }
.hero-inner { position:relative; z-index:2; max-width:900px; }
.hero-tag { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:var(--r-pill); background:rgba(255,255,255,.85); backdrop-filter:blur(8px); border:1px solid var(--line); box-shadow:var(--shadow-sm); font-size:13.5px; font-weight:500; color:var(--ink-soft); margin-bottom:30px; animation:fadeUp .8s ease backwards; }
.hero-tag .dot { width:8px; height:8px; border-radius:50%; background:var(--green); position:relative; }
.hero-tag .dot::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--green); opacity:.5; animation:pulse 2s infinite; }
@keyframes pulse { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.6);opacity:0} }
.hero h1 { font-size:clamp(42px,7.2vw,86px); font-weight:800; letter-spacing:-.035em; margin-bottom:28px; animation:fadeUp .9s .1s ease backwards; }
.hero h1 .accent { position:relative; display:inline-block; }
.hero h1 .accent::after { content:''; position:absolute; left:0; bottom:6px; width:100%; height:14px; background:linear-gradient(90deg,var(--green-soft),rgba(126,217,87,.35)); z-index:-1; border-radius:4px; }
.hero-sub { font-size:clamp(17px,2vw,21px); color:var(--ink-soft); max-width:660px; line-height:1.7; margin-bottom:40px; animation:fadeUp 1s .2s ease backwards; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; animation:fadeUp 1s .3s ease backwards; }
.hero-values { display:flex; flex-wrap:wrap; gap:28px; margin-top:64px; padding-top:36px; border-top:1px solid var(--line); animation:fadeUp 1s .5s ease backwards; }
.hero-values .v { display:flex; align-items:center; gap:10px; font-weight:500; font-size:14.5px; color:var(--ink); }
.hero-values .v::before { content:''; width:7px; height:7px; background:var(--green); border-radius:50%; box-shadow:0 0 0 4px rgba(98,194,49,.16); }

/* ============ PAGE HEAD ============ */
.page-head { padding:84px 0 64px; background:linear-gradient(180deg,var(--green-tint) 0%,var(--paper) 100%); position:relative; overflow:hidden; }
.page-head::before { content:''; position:absolute; top:-30%; right:-10%; width:520px; height:520px; background:radial-gradient(circle,rgba(98,194,49,.16),transparent 65%); border-radius:50%; }
.page-head-inner { position:relative; z-index:1; max-width:760px; }
.page-head .eyebrow { margin-bottom:16px; }
.page-head h1 { font-size:clamp(36px,5.5vw,62px); margin-bottom:18px; font-weight:800; letter-spacing:-.03em; }
.page-head p { font-size:18px; color:var(--ink-soft); line-height:1.75; }
.crumbs { font-size:13px; color:var(--ink-faint); margin-bottom:28px; letter-spacing:.04em; }
.crumbs a:hover { color:var(--green-deep); }
.crumbs .sep { margin:0 8px; opacity:.5; }

/* ============ KPI (dark stat band) ============ */
.kpi { position:relative; padding:72px 0; background:linear-gradient(150deg,#202c3e,#11171f); color:#fff; overflow:hidden; }
.kpi::before { content:''; position:absolute; top:50%; right:-5%; transform:translateY(-50%); width:420px; height:420px; background:radial-gradient(circle,rgba(98,194,49,.22),transparent 65%); border-radius:50%; }
.kpi::after { content:''; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,rgba(126,217,87,.5),transparent); }
.kpi-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:32px; align-items:center; }
.kpi-grid > .label { grid-column:1 / -1; text-align:center; margin-bottom:8px; }
.kpi-label-sub { font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-bright); font-weight:600; margin-bottom:6px; }
.kpi-label-main { font-family:'Sora',sans-serif; font-size:clamp(22px,3vw,30px); font-weight:700; color:#fff; }
.kpi-item { text-align:center; padding:20px 8px; position:relative; }
.kpi-item:not(:last-child)::after { content:''; position:absolute; right:-16px; top:22%; height:56%; width:1px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.14),transparent); }
.kpi-num { font-family:'Sora',sans-serif; font-size:clamp(40px,5vw,58px); font-weight:800; line-height:1; margin-bottom:10px; background:linear-gradient(120deg,#fff,var(--green-bright)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.kpi-text { font-size:14px; color:rgba(255,255,255,.7); }

/* ============ SECTION ============ */
.section { padding:104px 0; }
.section.alt { background:linear-gradient(180deg,#ffffff,var(--green-wash)); }
.section.dark { background:linear-gradient(150deg,#202c3e,#11171f); color:rgba(255,255,255,.85); }
.section.dark h2, .section.dark h3 { color:#fff; }
.section-head { max-width:780px; margin:0 auto 56px; text-align:center; }
.section-head.left { margin-left:0; text-align:left; }
.eyebrow { display:inline-block; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--green-deep); font-weight:700; margin-bottom:18px; padding:6px 15px; background:var(--green-soft); border-radius:var(--r-pill); }
.section-head h2 { font-size:clamp(30px,4.5vw,52px); margin-bottom:18px; }
.section-head p { font-size:17px; color:var(--ink-soft); line-height:1.75; }

/* ============ ABOUT BLOCK ============ */
.about-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:72px; align-items:center; }
.about-img-wrap { position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4 / 5; }
.about-img-wrap img { width:100%; height:100%; object-fit:cover; }
.about-img-wrap::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(26,35,50,.42)); }
.about-badge { position:absolute; bottom:24px; left:24px; background:rgba(255,255,255,.95); backdrop-filter:blur(10px); padding:15px 20px; border-radius:var(--r-md); z-index:2; box-shadow:var(--shadow-md); }
.about-badge strong { color:var(--green-deep); font-size:24px; font-family:'Sora',sans-serif; }
.about-badge span { display:block; font-size:13px; color:var(--ink-soft); margin-top:2px; }
.about-content .eyebrow { margin-bottom:20px; }
.about-content h2 { font-size:clamp(28px,4vw,44px); margin-bottom:24px; }
.about-content > p { font-size:16.5px; color:var(--ink-soft); line-height:1.85; margin-bottom:18px; }
.about-pillars { display:grid; gap:14px; margin-top:32px; }
.pillar { display:flex; align-items:center; gap:16px; padding:17px 20px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); transition:all .25s ease; color:inherit; box-shadow:var(--shadow-sm); }
a.pillar:hover { border-color:transparent; transform:translateX(6px); box-shadow:var(--shadow-md); }
.pillar .icon { width:46px; height:46px; flex-shrink:0; background:var(--grad-green); color:#fff; border-radius:13px; display:grid; place-items:center; font-size:22px; box-shadow:0 6px 16px rgba(98,194,49,.3); }
.pillar .text strong { display:block; font-family:'Sora',sans-serif; font-size:16px; font-weight:600; }
.pillar .text span { display:block; font-size:13.5px; color:var(--ink-soft); margin-top:2px; }

/* ============ WHAT WE DO CARDS ============ */
.what-grid { display:grid; gap:24px; grid-template-columns:repeat(3,1fr); }
.what-card { position:relative; background:#fff; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); transition:all .35s ease; display:flex; flex-direction:column; color:inherit; box-shadow:var(--shadow-sm); }
.what-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-lg); border-color:transparent; }
.what-card.featured { background:var(--grad-green); color:#fff; border-color:transparent; box-shadow:var(--shadow-green); }
.what-card.featured .what-icon { background:rgba(255,255,255,.18); }
.what-card.featured h3, .what-card.featured ul li { color:#fff; }
.what-card.featured .what-tag { background:rgba(255,255,255,.2); color:#fff; }
.what-img { aspect-ratio:16/9; overflow:hidden; background:var(--ink); }
.what-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.what-card:hover .what-img img { transform:scale(1.06); }
.what-body { padding:28px; flex:1; display:flex; flex-direction:column; }
.what-icon { width:52px; height:52px; background:var(--green-soft); color:var(--green-deep); border-radius:14px; display:grid; place-items:center; font-size:24px; margin-bottom:16px; }
.what-tag { display:inline-block; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--green-deep); background:var(--green-soft); padding:4px 11px; border-radius:var(--r-pill); margin-bottom:14px; align-self:flex-start; }
.what-card h3 { font-size:24px; margin-bottom:12px; }
.what-card .lead { font-size:15px; line-height:1.7; color:var(--ink-soft); margin-bottom:18px; }
.what-card.featured .lead { color:rgba(255,255,255,.92); }
.what-card ul { list-style:none; padding:0; margin-top:auto; }
.what-card ul li { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:14.5px; color:var(--ink); border-top:1px dashed var(--line); }
.what-card.featured ul li { border-top-color:rgba(255,255,255,.25); }
.what-card ul li:first-child { border-top:none; }
.what-card ul li::before { content:'→'; color:var(--green); font-weight:700; }
.what-card.featured ul li::before { color:#fff; }

/* ============ WHY ============ */
.why-grid { display:grid; gap:28px; grid-template-columns:repeat(2,1fr); }
.why-card { padding:38px; background:#fff; border-radius:var(--r-lg); border:1px solid var(--line); transition:all .3s ease; position:relative; overflow:hidden; box-shadow:var(--shadow-sm); }
.why-card::before { content:''; position:absolute; top:0; left:0; width:0; height:4px; background:var(--grad-green); transition:width .4s ease; }
.why-card:hover::before { width:100%; }
.why-card:hover { border-color:transparent; box-shadow:var(--shadow-lg); transform:translateY(-6px); }
.why-num { font-family:'Sora',sans-serif; font-size:46px; font-weight:800; line-height:1; margin-bottom:20px; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; opacity:.85; }
.why-card h3 { font-size:22px; margin-bottom:12px; }
.why-card p { color:var(--ink-soft); font-size:15.5px; line-height:1.75; }

/* ============ CTA (green gradient) ============ */
.cta-section { padding:104px 0; background:var(--grad-green); color:#fff; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; top:-40%; right:-8%; width:680px; height:680px; background:radial-gradient(circle,rgba(255,255,255,.22),transparent 60%); border-radius:50%; }
.cta-section::after { content:''; position:absolute; bottom:-50%; left:-6%; width:480px; height:480px; background:radial-gradient(circle,rgba(255,255,255,.12),transparent 62%); border-radius:50%; }
.cta-inner { position:relative; z-index:1; max-width:880px; margin:0 auto; text-align:center; }
.cta-inner h2 { color:#fff; font-size:clamp(32px,5vw,56px); margin-bottom:20px; }
.cta-inner h2 .accent { background:none; -webkit-text-fill-color:#fff; color:#fff; }
.cta-inner h2 .accent::after { display:none; }
.cta-inner p { color:rgba(255,255,255,.92); font-size:18px; margin-bottom:40px; }
.cta-section .btn-primary { background:#fff; color:var(--green-deep); box-shadow:0 16px 40px rgba(0,0,0,.18); }
.cta-section .btn-primary:hover { background:#fff; filter:none; transform:translateY(-2px); box-shadow:0 22px 50px rgba(0,0,0,.24); }

/* ============ FOOTER ============ */
.footer { background:#0F1721; color:rgba(255,255,255,.65); padding:72px 0 30px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer h4 { color:var(--green-bright); font-size:13px; letter-spacing:.15em; text-transform:uppercase; margin-bottom:18px; font-weight:600; }
.footer-brand img { height:36px; margin-bottom:18px; filter:brightness(0) invert(1); }
.footer-brand p { font-size:14.5px; line-height:1.75; max-width:340px; }
.footer-col a, .footer-col p { display:block; color:rgba(255,255,255,.65); font-size:14.5px; margin-bottom:10px; transition:color .2s; line-height:1.7; }
.footer-col a:hover { color:var(--green-bright); }
.footer-bottom { padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:rgba(255,255,255,.45); }

/* ============ animations ============ */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.reveal { opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ============ ABOUT PAGE — vision/mission ============ */
.vm-grid { display:grid; gap:28px; grid-template-columns:1fr 1fr; max-width:1100px; margin:0 auto; }
.vm-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:46px 38px; text-align:center; position:relative; overflow:hidden; transition:all .3s ease; box-shadow:var(--shadow-sm); }
.vm-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-6px); }
.vm-card .vm-tag { display:inline-block; background:var(--grad-green); color:#fff; padding:9px 26px; border-radius:var(--r-pill); font-family:'Sora',sans-serif; font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:28px; box-shadow:0 8px 20px rgba(98,194,49,.3); }
.vm-card.dark { background:linear-gradient(150deg,#202c3e,#11171f); color:rgba(255,255,255,.85); border-color:transparent; }
.vm-card.dark .vm-tag { background:var(--grad-green); }
.vm-card p { font-size:16px; line-height:1.85; color:var(--ink-soft); }
.vm-card.dark p { color:rgba(255,255,255,.82); }

/* core values */
.cv-grid { display:grid; gap:24px; grid-template-columns:repeat(3,1fr); }
.cv-card { padding:38px 30px; border-radius:var(--r-lg); text-align:left; background:var(--grad-green); color:#fff; position:relative; overflow:hidden; transition:transform .3s ease,box-shadow .3s ease; box-shadow:var(--shadow-green); }
.cv-card:nth-child(2) { background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.cv-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.cv-card .cv-icon { width:56px; height:56px; background:rgba(255,255,255,.2); border-radius:15px; display:grid; place-items:center; font-size:28px; margin-bottom:18px; }
.cv-card:nth-child(2) .cv-icon { background:var(--grad-green); color:#fff; }
.cv-card h3 { color:inherit; font-size:22px; margin-bottom:12px; }
.cv-card p { font-size:15px; line-height:1.75; color:inherit; opacity:.92; }

/* who we work with */
.partner-grid { display:grid; gap:24px; grid-template-columns:repeat(3,1fr); }
.partner-card { border-radius:var(--r-lg); overflow:hidden; background:#fff; border:1px solid var(--line); transition:all .3s ease; box-shadow:var(--shadow-sm); }
.partner-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.partner-img { aspect-ratio:5/3; overflow:hidden; }
.partner-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.partner-card:hover .partner-img img { transform:scale(1.05); }
.partner-card h3 { font-size:20px; padding:22px 24px 8px; }
.partner-card p { padding:0 24px 26px; color:var(--ink-soft); font-size:14.5px; }

/* ============ PILLAR DETAIL PAGE ============ */
.pillar-hero { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:80px 0; }
.pillar-hero .text .eyebrow { margin-bottom:18px; }
.pillar-hero h1 { font-size:clamp(36px,5vw,56px); font-weight:800; margin-bottom:20px; letter-spacing:-.03em; }
.pillar-hero .text > p { font-size:18px; color:var(--ink-soft); line-height:1.75; margin-bottom:14px; }
.pillar-hero .visual { position:relative; aspect-ratio:1/1; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.pillar-hero .visual img { width:100%; height:100%; object-fit:cover; }
.feature-list { margin-top:28px; display:grid; gap:14px; }
.feature-list li { display:flex; align-items:flex-start; gap:14px; list-style:none; font-size:16px; }
.feature-list li::before { content:'✓'; width:28px; height:28px; flex-shrink:0; background:var(--grad-green); color:#fff; border-radius:50%; display:grid; place-items:center; font-size:14px; font-weight:700; margin-top:2px; box-shadow:0 4px 12px rgba(98,194,49,.3); }
.gallery { display:grid; gap:14px; grid-template-columns:repeat(4,1fr); }
.gallery .gi { border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/5; position:relative; box-shadow:var(--shadow-sm); }
.gallery .gi:nth-child(1) { aspect-ratio:4/5; grid-row:span 2; }
.gallery .gi:nth-child(4) { aspect-ratio:4/5; grid-row:span 2; }
.gallery .gi img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery .gi:hover img { transform:scale(1.06); }

/* ============ NEWS ============ */
.news-grid { display:grid; gap:28px; grid-template-columns:repeat(3,1fr); }
.news-card { background:#fff; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); transition:all .3s ease; display:flex; flex-direction:column; color:inherit; box-shadow:var(--shadow-sm); }
.news-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
.news-img { aspect-ratio:16/10; overflow:hidden; }
.news-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.news-card:hover .news-img img { transform:scale(1.06); }
.news-body { padding:24px; flex:1; display:flex; flex-direction:column; }
.news-meta { display:flex; gap:12px; align-items:center; font-size:12.5px; color:var(--ink-faint); margin-bottom:12px; }
.news-cat { background:var(--green-soft); color:var(--green-deep); padding:3px 11px; border-radius:var(--r-pill); font-weight:600; letter-spacing:.04em; }
.news-card h3 { font-size:19px; margin-bottom:10px; line-height:1.35; }
.news-card p { color:var(--ink-soft); font-size:14.5px; line-height:1.7; margin-bottom:16px; }
.news-card .read { margin-top:auto; font-family:'Sora',sans-serif; font-weight:600; font-size:14px; color:var(--green-deep); }
.news-card:hover .read { color:var(--green); }
.news-featured { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:grid; grid-template-columns:1.1fr 1fr; margin-bottom:40px; transition:all .3s ease; box-shadow:var(--shadow-sm); }
.news-featured:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.news-featured .news-img { aspect-ratio:auto; }
.news-featured .news-body { padding:48px; }
.news-featured h3 { font-size:28px; margin-bottom:16px; }
.news-featured p { font-size:16px; }

/* ============ CONTACT ============ */
.contact-grid { display:grid; gap:48px; grid-template-columns:1fr 1fr; }
.contact-info { display:grid; gap:20px; }
.ci-card { display:flex; gap:18px; align-items:flex-start; padding:24px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); transition:all .25s ease; box-shadow:var(--shadow-sm); }
.ci-card:hover { border-color:transparent; transform:translateX(6px); box-shadow:var(--shadow-md); }
.ci-card .ci-icon { width:48px; height:48px; flex-shrink:0; background:var(--green-soft); color:var(--green-deep); border-radius:13px; display:grid; place-items:center; font-size:22px; }
.ci-card h4 { font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; font-weight:600; }
.ci-card a, .ci-card p { font-family:'Sora',sans-serif; font-size:17px; font-weight:500; color:var(--ink); line-height:1.5; }
.ci-card a:hover { color:var(--green-deep); }
.contact-form { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:38px; box-shadow:var(--shadow-md); }
.contact-form h3 { margin-bottom:20px; font-size:22px; }
.form-row { display:grid; gap:14px; margin-bottom:14px; }
.form-row.cols2 { grid-template-columns:1fr 1fr; }
.form-field label { display:block; font-size:13px; font-weight:500; margin-bottom:6px; color:var(--ink-soft); }
.form-field input, .form-field textarea, .form-field select { width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:11px; background:var(--paper); color:var(--ink); font-family:inherit; font-size:15px; transition:border-color .2s,box-shadow .2s; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline:none; border-color:var(--green); background:#fff; box-shadow:0 0 0 4px rgba(98,194,49,.12); }
.form-field textarea { min-height:110px; resize:vertical; line-height:1.6; }
.form-submit { margin-top:20px; }
.map-wrap { margin-top:56px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); height:380px; background:var(--green-soft); display:grid; place-items:center; color:var(--ink-soft); text-align:center; }
.map-wrap iframe { width:100%; height:100%; border:0; }

/* ============ TRACK RECORD ============ */
.tr-hero { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.tr-stats { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.tr-stat { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; transition:all .3s ease; box-shadow:var(--shadow-sm); }
.tr-stat:hover { border-color:transparent; transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.tr-stat.featured { background:var(--grad-green); color:#fff; border-color:transparent; box-shadow:var(--shadow-green); }
.tr-stat .tr-num { font-family:'Sora',sans-serif; font-size:56px; font-weight:800; line-height:1; margin-bottom:10px; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.tr-stat.featured .tr-num { background:none; -webkit-text-fill-color:#fff; color:#fff; }
.tr-stat .tr-text { font-size:14.5px; color:var(--ink-soft); }
.tr-stat.featured .tr-text { color:rgba(255,255,255,.85); }
.phase-grid { display:grid; gap:28px; grid-template-columns:repeat(2,1fr); margin-top:40px; }
.phase-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:36px; transition:all .3s ease; box-shadow:var(--shadow-sm); }
.phase-card.featured { background:var(--grad-green); color:#fff; border-color:transparent; box-shadow:var(--shadow-green); }
.phase-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.phase-tag { font-family:'Sora',sans-serif; font-weight:600; font-size:14px; color:var(--green-deep); letter-spacing:.04em; margin-bottom:6px; }
.phase-card.featured .phase-tag { color:rgba(255,255,255,.92); }
.phase-name { font-size:20px; font-weight:700; margin-bottom:16px; }
.phase-card.featured .phase-name { color:#fff; }
.phase-big { font-family:'Sora',sans-serif; font-size:64px; font-weight:800; line-height:1; margin-bottom:4px; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.phase-card.featured .phase-big { background:none; -webkit-text-fill-color:#fff; color:#fff; }
.phase-unit { font-size:14px; color:var(--ink-soft); margin-bottom:22px; }
.phase-card.featured .phase-unit { color:rgba(255,255,255,.8); }
.phase-list { list-style:none; padding:0; display:grid; gap:10px; }
.phase-list li { display:flex; align-items:center; gap:10px; font-size:14.5px; padding:10px 0; border-top:1px dashed var(--line); }
.phase-card.featured .phase-list li { border-top-color:rgba(255,255,255,.2); }
.phase-list li:first-child { border-top:none; }
.phase-list li::before { content:'✓'; color:var(--green); font-weight:700; }
.phase-card.featured .phase-list li::before { color:#fff; }

/* ============ RESPONSIVE ============ */
@media (max-width:960px) {
  .about-grid { grid-template-columns:1fr; gap:48px; }
  .about-img-wrap { aspect-ratio:16/10; max-height:420px; }
  .what-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; }
  .vm-grid { grid-template-columns:1fr; }
  .cv-grid { grid-template-columns:1fr; }
  .partner-grid { grid-template-columns:1fr; }
  .pillar-hero { grid-template-columns:1fr; gap:36px; }
  .news-grid { grid-template-columns:1fr; }
  .news-featured { grid-template-columns:1fr; }
  .news-featured .news-body { padding:28px; }
  .contact-grid { grid-template-columns:1fr; gap:32px; }
  .tr-hero { grid-template-columns:1fr; gap:32px; }
  .phase-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .kpi-item:nth-child(2)::after, .kpi-item:nth-child(3)::after { display:none; }
  .gallery { grid-template-columns:repeat(2,1fr); }
  .gallery .gi:nth-child(1), .gallery .gi:nth-child(4) { grid-row:auto; }
}
@media (max-width:640px) {
  .nav { display:none; }
  .nav.open { display:flex; flex-direction:column; position:absolute; inset:74px 16px auto; background:#fff; padding:16px; border-radius:var(--r-md); box-shadow:var(--shadow-lg); align-items:stretch; }
  .nav.open a { text-align:center; padding:12px; }
  .nav-toggle { display:block; }
  .section { padding:72px 0; }
  .hero { padding:64px 0 84px; }
  .hero-values { gap:14px 24px; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); gap:16px; }
  .kpi-item::after { display:none !important; }
  .footer-grid { grid-template-columns:1fr; }
  .container { padding:0 20px; }
  .tr-stats { grid-template-columns:1fr 1fr; }
  .form-row.cols2 { grid-template-columns:1fr; }
  .gallery { grid-template-columns:1fr 1fr; }
  .page-head { padding:56px 0 40px; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}

/* ============================================================
   FULL DESIGN ENHANCEMENT LAYER (v1.45.a)
   vine · marquee · KPI rings · SVG pillar icons · 3D tilt · scroll-prog
   ทั้งหมดเสริมจาก JS ใน footer.php — ถอยกลับได้โดย deploy v1.44.a
   ============================================================ */
/* scroll progress bar */
.scroll-prog { position:fixed; top:0; left:0; height:3px; width:0; background:var(--grad-green-br); z-index:60; }

/* pillar icons → SVG เส้น (แทนอิโมจิ) */
.pillar .icon.icon-svg { font-size:0; }
.pillar .icon svg { width:24px; height:24px; }

/* KPI → วงแหวนวิ่งเต็ม + เลขนับ */
.kpi-item::after { display:none !important; }
.kpi-ring { position:relative; width:124px; height:124px; margin:0 auto 14px; }
.kpi-ring svg { width:124px; height:124px; display:block; transform:rotate(-90deg); }
.kpi-ring .kr-bg { fill:none; stroke:rgba(255,255,255,.1); stroke-width:9; }
.kpi-ring .kr-fg { fill:none; stroke:var(--green-bright); stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1); }
.kpi-ring .kpi-num { position:absolute; inset:0; display:grid; place-items:center; margin:0 !important; font-size:clamp(25px,3.3vw,33px); }

/* 3D tilt บนการ์ด */
.tiltable { transition:transform .18s ease-out, box-shadow .35s ease, border-color .3s ease; will-change:transform; }

/* HERO — ต้นไม้เติบโต (signature) */
.hero-vine { position:relative; margin:46px auto 0; width:278px; max-width:278px; aspect-ratio:1/1; display:grid; place-items:center; z-index:2; }
.hv-glow { position:absolute; inset:12%; border-radius:50%; background:radial-gradient(circle,rgba(126,217,87,.35),transparent 65%); filter:blur(20px); }
.hv-svg { width:86%; height:86%; position:relative; z-index:1; overflow:visible; }
.hv-svg .stem { fill:none; stroke:var(--green-deep); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:540; stroke-dashoffset:540; animation:vdraw 2.6s cubic-bezier(.4,0,.2,1) .3s forwards; }
@keyframes vdraw { to { stroke-dashoffset:0; } }
.hv-svg .lf { fill:var(--green); opacity:0; transform-box:fill-box; transform-origin:center; animation:vpop .6s cubic-bezier(.3,1.4,.5,1) forwards; }
.hv-svg .lf.a { animation-delay:1.1s; }
.hv-svg .lf.b { animation-delay:1.5s; fill:var(--green-bright); }
.hv-svg .lf.c { animation-delay:1.9s; }
.hv-svg .lf.d { animation-delay:2.3s; fill:var(--green-bright); }
.hv-svg .bud { fill:var(--green-deep); opacity:0; animation:vpop .6s cubic-bezier(.3,1.4,.5,1) 2.6s forwards; }
@keyframes vpop { 0% { opacity:0; transform:scale(0); } 100% { opacity:1; transform:scale(1); } }
.hv-chip { position:absolute; top:12%; right:-2%; background:#fff; border-radius:14px; padding:10px 15px; box-shadow:var(--shadow-lg); z-index:3; text-align:left; }
.hv-chip b { font-family:'Sora',sans-serif; font-weight:800; font-size:21px; color:var(--green-deep); display:block; line-height:1; }
.hv-chip span { font-size:11px; color:var(--ink-faint); }
@media (min-width:1080px) {
  .hero-inner.with-vine { max-width:1180px; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:56px; align-items:center; }
  .hero-inner.with-vine .hero-text { min-width:0; }
  .hero-inner.with-vine .hero-vine { margin:0; width:100%; max-width:360px; }
}

/* reduced-motion: โชว์ต้นไม้สถานะสุดท้าย */
@media (prefers-reduced-motion:reduce) {
  .hv-svg .stem { stroke-dashoffset:0 !important; }
  .hv-svg .lf, .hv-svg .bud { opacity:1 !important; }
  .scroll-prog { display:none; }
}

/* ============================================================
   ORGANIC HERO v2 — เขียวไล่เฉด + โลโก้กลาง + ใบไม้ปลิว + เถาวัลย์กลาง (v1.55.0)
   เสริมจาก JS ใน footer.php — ถอยกลับได้โดย deploy v1.54.f
   ============================================================ */
.hero.hero-v2 { background:linear-gradient(140deg,#F4FAEC 0%,#FFFFFF 62%); }
.hero.hero-v2::before, .hero.hero-v2::after { display:none; }
.hero.hero-v2 .hero-inner { max-width:880px; margin-left:auto; margin-right:auto; text-align:center; }
.hero.hero-v2 .hero-tag { margin-left:auto; margin-right:auto; }
.hero.hero-v2 .hero-cta { justify-content:center; }
.hero.hero-v2 h1 { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hero.hero-v2 .hero-values { display:none; }
.hero-logo { height:clamp(54px,12vw,104px); width:auto; max-width:92%; margin:4px auto 24px; display:block; animation:fadeUp .9s .12s ease backwards; }

.hero-deco, .head-deco { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.page-head { position:relative; }
.page-head .page-head-inner { position:relative; z-index:1; }
.c-bloom { position:absolute; left:50%; top:48%; width:min(116vw,940px); height:min(116vw,940px); transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(98,194,49,.22),transparent 62%); filter:blur(22px); animation:cbloom 8s ease-in-out infinite; }
.c-bloom.hd { top:30%; width:min(90vw,640px); height:min(90vw,640px); background:radial-gradient(circle,rgba(98,194,49,.16),transparent 64%); }
@keyframes cbloom { 0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.78} 50%{transform:translate(-50%,-50%) scale(1.12);opacity:1} }
.c-rip { position:absolute; left:50%; top:48%; width:200px; height:200px; border:1.5px solid rgba(98,194,49,.22); border-radius:50%; transform:translate(-50%,-50%); animation:crip 7s ease-out infinite; }
.c-rip.r2 { animation-delay:2.3s; } .c-rip.r3 { animation-delay:4.6s; }
@keyframes crip { 0%{width:110px;height:110px;opacity:.55} 100%{width:720px;height:720px;opacity:0} }
.c-leaf { position:absolute; opacity:0; will-change:transform; animation:cfloat linear infinite; }
.c-leaf svg { display:block; filter:drop-shadow(0 4px 8px rgba(60,122,26,.18)); }
@keyframes cfloat { 0%{transform:translate(0,40px) rotate(-12deg) scale(.9);opacity:0} 12%{opacity:.8} 50%{transform:translate(24px,-70px) rotate(46deg) scale(1.04)} 86%{opacity:.65} 100%{transform:translate(-14px,-176px) rotate(132deg) scale(.95);opacity:0} }

.c-vine { position:absolute; left:50%; bottom:0; transform:translateX(-50%); z-index:1; pointer-events:none; }
.c-vine svg { display:block; width:180px; height:auto; overflow:visible; }
.c-vine .stem { fill:none; stroke:var(--green-deep); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:520; stroke-dashoffset:520; animation:cgrow 3.2s ease-out .3s forwards; }
@keyframes cgrow { to { stroke-dashoffset:0; } }
.c-vine .vleaf { opacity:0; transform-box:fill-box; transform-origin:center; }
.c-vine .v1 { animation:csprout .6s cubic-bezier(.2,1.5,.4,1) 1.4s forwards; }
.c-vine .v2 { animation:csprout .6s cubic-bezier(.2,1.5,.4,1) 1.9s forwards; }
.c-vine .v3 { animation:csprout .6s cubic-bezier(.2,1.5,.4,1) 2.4s forwards; }
.c-vine .v4 { animation:csprout .6s cubic-bezier(.2,1.5,.4,1) 2.9s forwards; }
@keyframes csprout { 0%{opacity:0;transform:scale(0) rotate(-18deg)} 100%{opacity:1;transform:scale(1) rotate(0)} }

@media (prefers-reduced-motion:reduce) {
  .c-vine .stem { stroke-dashoffset:0 !important; }
  .c-vine .vleaf { opacity:1 !important; }
  .c-bloom, .c-rip, .c-leaf { animation:none !important; }
  .c-rip, .c-leaf { display:none !important; }
}

/* ---- หัวข้อหน้าใน: โทนเขียวไล่เฉด + จัดกลาง (ครอบทั้ง .page-head และ .hero ที่ไม่ใช่หน้าแรก) v1.55.1 ---- */
.page-head.head-v2, .hero.head-v2 { background:linear-gradient(140deg,#F4FAEC 0%,#FFFFFF 62%); }
.hero.head-v2 { padding:88px 0 80px; }
.hero.head-v2::before, .hero.head-v2::after { display:none; }
.page-head.head-v2 .page-head-inner, .hero.head-v2 .hero-inner { text-align:center; margin-left:auto; margin-right:auto; }
.hero.head-v2 .hero-cta { justify-content:center; }
.hero.head-v2 .hero-values { justify-content:center; }