:root{
  --kckf-green:#027b83;
  --kckf-green-dark:#05686f;
  --kckf-teal:#0b9089;
  --kckf-blue:#275084;
  --kckf-yellow:#f4d425;
  --ink:#152525;
  --muted:#5c6b6b;
  --line:#dce9e8;
  --soft:#f2fbfa;
  --soft-2:#f8fcfb;
  --white:#ffffff;
  --shadow:0 22px 60px rgba(10,48,52,.14);
  --shadow-sm:0 10px 28px rgba(10,48,52,.10);
  --radius:24px;
  --container:1180px;
  --font-th:"Noto Sans Thai Looped","Noto Sans Thai",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-en:"Noto Sans",var(--font-th);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-th);color:var(--ink);background:#fff;line-height:1.65;font-size:16px}
body:lang(en){font-family:var(--font-en)}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input,textarea{font:inherit}
.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}.skip-link{position:absolute;left:16px;top:-60px;z-index:999;background:#fff;color:#000;padding:10px 14px;border-radius:10px}.skip-link:focus{top:16px}
.topbar{background:#eef8f7;border-bottom:1px solid var(--line);font-size:.92rem;color:#315456}.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 0}.topbar__links{display:flex;gap:14px;align-items:center}.topbar__links a{color:#1e6064;font-weight:600}.language-switch{display:inline-flex;align-items:center;gap:6px}.language-switch strong{background:var(--kckf-green);color:#fff;border-radius:999px;padding:2px 9px}
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(170%) blur(14px);border-bottom:1px solid rgba(2,123,131,.10)}.header__inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand__logo{width:170px;height:auto}.main-nav{display:flex;align-items:center;gap:22px;font-weight:700;font-size:.96rem}.main-nav a:not(.btn){position:relative;color:#1d3637}.main-nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:3px;border-radius:3px;background:transparent}.main-nav a[aria-current="page"]::after,.main-nav a:not(.btn):hover::after{background:var(--kckf-green)}.nav-toggle{display:none;border:0;background:var(--kckf-green);color:#fff;border-radius:999px;padding:9px 16px;font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 20px;font-weight:800;border:1px solid transparent;box-shadow:0 8px 18px rgba(0,0,0,.06);transition:.2s ease}.btn:hover{transform:translateY(-1px)}.btn--primary{background:var(--kckf-yellow);color:#253000}.btn--secondary{background:linear-gradient(135deg,var(--kckf-green),var(--kckf-blue));color:#fff}.btn--ghost{background:#fff;color:var(--kckf-green-dark);border-color:#cfe4e2}.btn--small{padding:9px 15px;font-size:.92rem}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 10% 15%,rgba(2,123,131,.10),transparent 28%),linear-gradient(180deg,#fff,#f7fffe);padding:68px 0 58px}.hero::before{content:"";position:absolute;inset:auto -8% -35% -8%;height:52%;background:linear-gradient(90deg,rgba(2,123,131,.08),rgba(244,212,37,.10));filter:blur(6px);transform:skewY(-2deg)}.hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.95fr);gap:52px;align-items:center}.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#dbf2f0;color:var(--kckf-green-dark);border-radius:999px;padding:6px 14px;font-weight:800;font-size:.9rem;margin-bottom:14px}.hero h1{font-size:clamp(2.7rem,6vw,5.6rem);line-height:.98;letter-spacing:-.045em;margin:0 0 22px}.hero h1 span{display:block;color:var(--kckf-green);font-size:.88em}.hero__lead{font-size:1.14rem;color:#344a4b;max-width:690px;margin:0 0 26px}.hero__actions{display:flex;flex-wrap:wrap;gap:13px;margin:24px 0}.hero__note{display:flex;flex-wrap:wrap;gap:10px 18px;color:#395a5c;font-weight:700}.hero__note span{display:inline-flex;align-items:center;gap:6px}.hero__note span::before{content:"✓";color:var(--kckf-green);font-weight:900}.hero__visual{position:relative}.hero-photo-card{margin:0;border-radius:32px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.8);background:#fff}.hero-photo-card img{width:100%;aspect-ratio:1.26/1;object-fit:cover}.hero-impact-card{position:absolute;left:-38px;bottom:30px;width:min(380px,75%);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px;padding:22px}.hero-impact-card__label{display:inline-flex;background:var(--kckf-yellow);border-radius:999px;padding:4px 12px;font-weight:900;font-size:.85rem;margin-bottom:9px}.hero-impact-card h2{font-size:1.45rem;line-height:1.2;margin:0 0 14px;color:var(--kckf-green-dark)}.mini-flow{display:grid;gap:8px;color:#355}.mini-flow span{background:#edf9f8;border:1px solid #d7ecea;border-radius:14px;padding:9px 12px;font-weight:800}.mini-flow b{text-align:center;color:var(--kckf-green)}
.slogan-strip{background:#fff;border-block:1px solid var(--line)}.slogan-strip__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}.slogan-strip article{background:#fff;padding:26px 28px}.slogan-strip strong{display:block;color:var(--kckf-green);font-size:1.45rem;margin-bottom:4px}.slogan-strip span{color:#4f6667}
.section{padding:78px 0}.section--soft{background:linear-gradient(180deg,var(--soft),#fff)}.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px}.section__head--center{text-align:center;justify-content:center}.section__head--center p{margin-inline:auto}.section h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.15;letter-spacing:-.035em;margin:0 0 12px}.section p{color:#506768;margin:0}.section__head p{max-width:820px}.collab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.collab-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow-sm)}.collab-card__icon{width:68px;height:68px;border-radius:20px;background:linear-gradient(135deg,var(--kckf-green),var(--kckf-blue));color:#fff;display:grid;place-items:center;font-size:.85rem;font-weight:900;margin-bottom:15px;text-align:center}.collab-card h3{margin:0 0 8px;font-size:1.3rem}.collab-card p{font-size:.98rem}
.impact-panel{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:30px;padding:34px;box-shadow:var(--shadow-sm)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.metrics--impact{grid-template-columns:repeat(2,1fr)}.metric{background:#f8fdfc;border:1px solid var(--line);border-radius:22px;padding:24px;text-align:center}.metric strong{display:block;font-size:2.5rem;line-height:1;color:var(--kckf-green);margin-bottom:9px}.metric span{font-weight:900}.data-note{font-size:.9rem;text-align:center;margin-top:14px!important;color:#6f7d7e!important}.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.project-card,.article-card,.flow-cards article{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-sm)}.project-card img{width:100%;aspect-ratio:1.62/1;object-fit:cover}.project-card__body,.article-card__body{padding:22px}.category{display:inline-flex;background:#e3f4f2;color:var(--kckf-green-dark);font-weight:900;border-radius:999px;padding:4px 10px;font-size:.78rem;margin-bottom:10px}.project-card h3,.article-card h3,.flow-cards h3,.mini-news h3{margin:0 0 9px;line-height:1.25}.read-more{display:inline-flex;margin-top:14px;color:var(--kckf-green-dark);font-weight:900}.flow-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.flow-cards img{width:100%;aspect-ratio:1.65/1;object-fit:cover}.flow-cards article{padding-bottom:22px}.flow-cards h3,.flow-cards p{padding-inline:22px}.article-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:26px}.article-featured img{width:100%;aspect-ratio:1.7/1;object-fit:cover}.visual-list{display:grid;gap:16px}.mini-news{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:12px;box-shadow:var(--shadow-sm)}.mini-news img{height:112px;width:150px;object-fit:cover;border-radius:16px}.mini-news span{font-size:.8rem;color:var(--kckf-green-dark);font-weight:900}.mini-news a{color:var(--kckf-green-dark);font-weight:900}.partners-panel{display:grid;grid-template-columns:.86fr 1.14fr;gap:28px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:30px;padding:34px;box-shadow:var(--shadow-sm)}.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.partner-grid span{min-height:78px;background:#f7fdfc;border:1px solid #d8ecea;border-radius:18px;display:grid;place-items:center;text-align:center;font-weight:900;color:var(--kckf-green-dark);padding:12px}.report-band,.final-cta{display:grid;grid-template-columns:1fr .92fr;gap:28px;align-items:center;border-radius:32px;padding:36px;background:linear-gradient(135deg,#f2fbfa,#fff);border:1px solid var(--line);box-shadow:var(--shadow-sm)}.report-band img{border-radius:24px}.final-cta--hope{background:linear-gradient(135deg,var(--kckf-green),#084a50);color:#fff;overflow:hidden}.final-cta--hope p{color:#eafffb}.final-cta--hope img{border-radius:24px;box-shadow:0 20px 50px rgba(0,0,0,.22)}.footer{background:#f8fbfb;border-top:1px solid var(--line);padding:56px 0 20px}.footer__grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:30px}.footer__logo{width:150px;margin-bottom:10px}.footer h2,.footer h3{margin:0 0 10px}.footer ul{list-style:none;margin:0;padding:0}.footer li{margin:7px 0;color:#526b6c}.footer a{color:#315e61}.placeholder-note{font-size:.88rem;color:#7a8a8b!important}.footer__bottom{border-top:1px solid var(--line);margin-top:34px;padding-top:18px;display:flex;justify-content:space-between;gap:14px;color:#647879;font-size:.92rem}.mobile-support-bar{display:none}
@media (max-width:1060px){.container{width:min(100% - 32px,var(--container))}.main-nav{gap:14px;font-size:.9rem}.brand__logo{width:145px}.hero__grid{grid-template-columns:1fr;gap:30px}.hero__copy{text-align:center}.hero__lead{margin-inline:auto}.hero__actions,.hero__note{justify-content:center}.hero__visual{max-width:760px;margin-inline:auto}.hero-impact-card{left:18px}.collab-grid{grid-template-columns:repeat(2,1fr)}.impact-panel,.partners-panel,.report-band,.final-cta{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.cards-3,.flow-cards{grid-template-columns:repeat(2,1fr)}.article-layout{grid-template-columns:1fr}.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){body{font-size:15px}.topbar{display:none}.header__inner{min-height:68px}.brand__logo{width:132px}.nav-toggle{display:inline-flex}.main-nav{position:absolute;top:100%;left:16px;right:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:22px;padding:16px;display:none;flex-direction:column;align-items:stretch}.main-nav.is-open{display:flex}.main-nav a{padding:10px 8px}.hero{padding:40px 0 34px}.hero h1{font-size:clamp(2.3rem,15vw,4.2rem);letter-spacing:-.055em}.hero__lead{font-size:1rem}.hero__actions{flex-direction:column}.hero__actions .btn{width:100%}.hero__note{display:grid;text-align:left}.hero-impact-card{position:relative;left:auto;bottom:auto;width:100%;margin-top:14px}.slogan-strip__grid,.collab-grid,.metrics,.metrics--impact,.cards-3,.flow-cards,.partner-grid,.footer__grid{grid-template-columns:1fr}.slogan-strip article{padding:20px}.section{padding:54px 0}.section__head{display:block}.section__head .btn{margin-top:16px}.impact-panel,.partners-panel,.report-band,.final-cta{padding:22px;border-radius:24px}.mini-news{grid-template-columns:96px 1fr}.mini-news img{width:96px;height:92px}.footer__bottom{display:block}.mobile-support-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:#fff;border:1px solid var(--line);box-shadow:0 18px 52px rgba(0,0,0,.18);border-radius:20px;padding:10px 44px 10px 12px;display:none;align-items:center;gap:10px}.mobile-support-bar.is-visible{display:flex}.mobile-support-bar__text{display:grid;line-height:1.15;flex:1}.mobile-support-bar__text strong{font-size:.92rem}.mobile-support-bar__text span{font-size:.78rem;color:#607778}.mobile-support-bar .btn{padding:8px 12px;font-size:.82rem}.mobile-support-bar__close{position:absolute;right:8px;top:8px;border:0;background:#edf6f5;color:#456;border-radius:999px;width:26px;height:26px}}
@media (max-width:420px){.container{width:calc(100% - 24px)}.hero-impact-card h2{font-size:1.2rem}.metric strong{font-size:2rem}.section h2{font-size:1.8rem}.mini-news{grid-template-columns:1fr}.mini-news img{width:100%;height:auto;aspect-ratio:1.8/1}.footer{padding-bottom:98px}}


/* ==========================================================
   KCKF Public Home Shell 7.1 — Header Refinement Patch
   Focus: dark utility bar, compact corporate header, smaller logo,
   stronger navigation contrast, clear yellow support CTA.
   ========================================================== */
:root {
  --kckf-deep-teal: #006064;
  --kckf-header-blue: #275084;
  --kckf-border: rgba(0, 96, 100, 0.14);
}

.topbar {
  background: linear-gradient(90deg, var(--kckf-deep-teal) 0%, #0b6f73 45%, var(--kckf-header-blue) 100%);
  border-bottom: 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.topbar__inner {
  min-height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.topbar__brandline {
  color: rgba(255,255,255,0.96);
  white-space: nowrap;
}

.topbar__links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}

.topbar__links a,
.topbar a {
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  text-decoration: none;
}

.topbar__links a:hover,
.topbar a:hover {
  color: var(--kckf-yellow);
}

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.75);
}

.language-switch strong {
  background: #ffffff;
  color: var(--kckf-deep-teal);
  border-radius: 999px;
  padding: 4px 9px;
  line-height: 1;
  font-weight: 900;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--kckf-border);
  box-shadow: 0 8px 28px rgba(0, 96, 100, 0.04);
}

.header__inner {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.brand__logo {
  height: 58px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 15px;
  font-weight: 800;
  margin-left: auto;
}

.main-nav a:not(.btn) {
  color: var(--ink);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
}

.main-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 3px;
  border-radius: 999px;
  background: transparent;
  transition: background .18s ease;
}

.main-nav a[aria-current="page"]::after,
.main-nav a:not(.btn):hover::after {
  background: var(--kckf-green);
}

.nav-cta,
.main-nav .btn--primary {
  background: var(--kckf-yellow);
  color: var(--ink);
  border: 0;
  padding: 12px 22px;
  font-size: 14.5px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(244, 212, 37, 0.28);
}

.nav-cta:hover,
.main-nav .btn--primary:hover,
.btn--primary:hover {
  background: #ffdc3d;
  transform: translateY(-1px);
}

.nav-toggle {
  border: 1px solid rgba(0,96,100,0.18);
  background: #ffffff;
  color: var(--kckf-deep-teal);
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(0, 96, 100, 0.06);
}

@media (max-width: 1180px) {
  .main-nav { gap: 18px; font-size: 14px; }
  .nav-cta, .main-nav .btn--primary { padding: 10px 18px; }
}

@media (max-width: 1060px) {
  .topbar { font-size: 13px; }
  .topbar__inner { min-height: 40px; }
  .topbar__links { gap: 14px; }
  .header__inner { min-height: 76px; gap: 18px; }
  .brand__logo { height: 54px; max-width: 150px; }
  .main-nav { gap: 14px; font-size: 13.5px; }
}

@media (max-width: 900px) {
  .topbar__brandline { white-space: normal; }
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .main-nav.is-open {
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    left: 16px;
    right: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 18px;
    background: #ffffff;
    border: 1px solid var(--kckf-border);
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
  }
  .main-nav.is-open a:not(.btn) {
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,96,100,0.08);
  }
  .main-nav.is-open a:not(.btn)::after { display: none; }
  .main-nav.is-open .btn { justify-content: center; margin-top: 10px; }
}

@media (max-width: 760px) {
  .topbar { display: none; }
  .header__inner { min-height: 68px; }
  .brand__logo { height: 48px; max-width: 132px; }
  .nav-toggle { display: inline-flex; }
}