:root{
    --maroon: #49152e;
    --maroon-dark: #34101f;
    --gold: #b0905f;
    --gold-light: #cbae83;
    --gold-light-rgb: 203,174,131; /* rgba() companion for --gold-light, used for translucent gold accents */
    --stat-band-wash-rgb: 46,11,29; /* deep maroon wash (darker than --maroon-dark), used for the stat band's full-bleed gradient */
    --cream: #f8f2e7;
    --cream-card: #f6f0e5;
    --ink: #1c1614;
    --gray: #6b6560;
    --gray-soft: #85807b;
    --white: #ffffff;
    --radius: 12px;
    --font-head: "Inter", "IBM Plex Sans Thai", sans-serif;
    --font-body: "Montserrat", "IBM Plex Sans Thai", sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{-webkit-font-smoothing:antialiased;}
  body{
    font-family: var(--font-body);
    font-weight:400;
    color: var(--ink);
    background: var(--white);
    line-height: 1.65;
    font-size:15px;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
  .eyebrow{
    display:flex; align-items:center; gap:9px;
    font-family:var(--font-head);
    font-size:12.5px; font-weight:600; letter-spacing:.02em;
    color: var(--gold); margin-bottom:18px;
  }
  .eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); display:inline-block; flex-shrink:0;}
  .eyebrow.on-dark{color: var(--gold-light);}
  h1,h2,h3,h4,h5{font-family:var(--font-head); letter-spacing:-0.01em; font-weight:700; line-height:1.2;}
  h2{font-size:clamp(26px,3.6vw,36px); font-weight:700; margin-bottom:18px;}
  h2 .muted{color:var(--gray-soft); font-weight:500;}
  h4{font-weight:600;}
  .lead{font-size:16.5px; font-weight:400; color:var(--gray); max-width:640px; line-height:1.75;}
  .btn{
    display:inline-block; padding:14px 26px; border-radius:999px; font-weight:600;
    font-family:var(--font-head);
    font-size:12.5px; letter-spacing:.05em; border:1px solid transparent;
    cursor:pointer;
  }
  .btn-primary{background:var(--maroon); color:var(--cream);}
  .btn-outline-dark{border-color: rgba(255,255,255,.35); color:var(--white); font-weight:500;}
  .btn-outline-light{border-color: rgba(0,0,0,.15); color:var(--ink); font-weight:500;}

  /* LANG TOGGLE */
  .lang-toggle{display:flex; align-items:center; gap:2px; border:1px solid #e4ddd0; border-radius:999px; padding:3px; font-family:var(--font-head);}
  .lang-toggle button{
    border:none; background:transparent; padding:6px 14px; border-radius:999px; font-size:12px; font-weight:600;
    color:var(--gray); cursor:pointer; font-family:inherit;
  }
  .lang-toggle button.active{background:var(--maroon); color:var(--cream);}
  .header-actions{display:flex; align-items:center; gap:16px;}
  /* Draft-content flag: visible only in Thai mode, marks copy with no official Thai source yet */
  html[lang="th"] [data-draft="1"]{border-bottom:1px dashed var(--gold);}

  /* NAV */
  header.site{
    /* Symmetric 1fr | auto | 1fr grid, NOT flex space-between. Space-between
       only centres the middle child when the outer two are the same width --
       here the logo is ~51px and the right-hand actions ~317px, which pushed
       the nav (317-51)/2 = 133px left of centre while the hero logo below it
       sat dead centre. Equal outer tracks centre the nav on the viewport
       regardless of what either side grows to. */
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    padding:10px 24px; border-bottom:1px solid #f0ece4;
  }
  header.site > .logo{justify-self:start;}
  header.site > nav.main{justify-self:center;}
  header.site > .header-actions{justify-self:end;}
  .logo{display:flex; align-items:center; gap:10px;}
  .logo img{height:56px; width:auto; display:block;}
  footer .logo img{height:24px;} /* superseded by .footer-brand .logo img below */
  nav.main ul{display:flex; gap:32px; font-family:var(--font-head); font-weight:500; font-size:13.5px; color:var(--ink);}
  nav.main a.active{color:var(--maroon); border-bottom:2px solid var(--gold); padding-bottom:6px;}
  header.site .btn{white-space:nowrap;}
  /* Mobile menu button: hidden on desktop, where the inline nav is visible. */
  .nav-toggle{
    display:none; width:44px; height:44px; flex-shrink:0;
    flex-direction:column; justify-content:center; align-items:center; gap:5px;
    background:transparent; border:none; cursor:pointer; padding:0;
  }
  .nav-toggle span{display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .22s ease, opacity .18s ease;}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* Desktop: the CTA lives in the header, so the in-menu duplicate is hidden. */
  .nav-cta{display:none;}

  @media (max-width:900px){
    header.site{
      display:flex; justify-content:space-between; position:relative;
      gap:12px; padding:10px 16px;
    }
    .nav-toggle{display:flex;}
    /* The header ran to 385px inside a 375px viewport: the lang toggle (107px)
       plus the Apply button (201px) plus the menu button could not fit, which
       pushed the menu button off-screen and squeezed the logo to zero width.
       The CTA moves into the menu (.nav-cta) and the logo stops shrinking. */
    .header-actions .btn-primary{display:none;}
    .logo{flex-shrink:0; min-width:0;}
    .logo img{height:40px; max-width:150px; object-fit:contain; object-position:left center;}
    .header-actions{gap:8px; flex-shrink:0;}
    .nav-cta{display:block;}
    nav.main.open .nav-cta{border-top:1px solid #f0ece4; margin-top:8px; padding-top:8px;}
    nav.main.open .nav-cta a{color:var(--maroon); font-weight:700;}
    /* Collapsed by default; .open is toggled by toggleNav() in script.js. */
    nav.main{display:none;}
    nav.main.open{
      display:block; position:absolute; top:100%; left:0; right:0; z-index:60;
      background:var(--white); border-bottom:1px solid #f0ece4;
      box-shadow:0 18px 32px -20px rgba(28,28,20,.35);
      max-height:calc(100vh - 100%); overflow-y:auto;
    }
    nav.main.open ul{flex-direction:column; gap:0; padding:8px 0;}
    nav.main.open li{width:100%;}
    /* 48px min height keeps every link a comfortable touch target. */
    nav.main.open a{display:flex; align-items:center; min-height:48px; padding:0 24px; font-size:15px; width:100%;}
    nav.main.open a.active{border-bottom:none; color:var(--maroon); box-shadow:inset 3px 0 0 var(--gold);}
  }

  /* HERO */
  @keyframes heroFadeUp{ from{opacity:0; filter:blur(7px); transform:translateY(16px);} to{opacity:1; filter:blur(0); transform:translateY(0);} }
  @keyframes heroLogoIn{ from{opacity:0; filter:blur(10px); transform:scale(.92) translateY(-6px);} to{opacity:1; filter:blur(0); transform:scale(1) translateY(0);} }
  .hero{
    background:
      linear-gradient(180deg, rgba(52,16,31,.55), rgba(52,16,31,.88)),
      radial-gradient(circle at 50% 20%, rgba(255,255,255,.05), transparent 60%), var(--maroon);
    color: var(--cream);
    padding: 88px 24px 0;
    position:relative;
    overflow:hidden;
  }
  .hero-grid{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    max-width:720px; margin:0 auto;
  }
  .hero-art{
    width:200px; margin:0 auto 32px;
    opacity:0; animation:heroLogoIn 1s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero-grid > h1,
  .hero-grid > p.lead,
  .hero-grid > .hero-ctas{opacity:0; animation:heroFadeUp .85s cubic-bezier(.16,1,.3,1) forwards;}
  .hero-grid > h1{animation-delay:.42s;}
  .hero-grid > p.lead{animation-delay:.62s; margin-left:auto; margin-right:auto;}
  .hero-grid > .hero-ctas{animation-delay:.82s;}
  .hero h1{font-size:clamp(32px,4.2vw,46px); font-weight:700; line-height:1.15; margin-bottom:22px; color:var(--cream); letter-spacing:-.015em;}
  .hero h1 .muted{color:var(--gold-light); font-weight:600;}
  .hero p.lead{color: rgba(248,242,231,.72); margin-bottom:36px; font-size:16.5px; max-width:500px;}
  .hero p.lead strong{color:var(--gold-light); font-weight:600;}
  .hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:72px; justify-content:center;}
  .hero-ctas .btn{font-size:11px; padding:12px 22px;}
  /* HERO STAT BAND - full-bleed row of headline stats under the hero (V1-weight values, V2 palette) */
  .stat-band{
    margin:0 -24px;
    background:linear-gradient(180deg, rgba(var(--stat-band-wash-rgb),0), rgba(var(--stat-band-wash-rgb),.55));
    border-top:1px solid rgba(var(--gold-light-rgb),.28);
    opacity:0; animation:heroFadeUp .9s ease 1.02s forwards;
  }
  .stat-strip{
    display:grid; grid-template-columns:repeat(4,1fr);
    padding:48px 0 52px;
  }
  .stat-strip div{text-align:center; padding:4px 24px; position:relative;}
  .stat-strip div + div::before{
    content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
    height:54px; width:1px; background:rgba(var(--gold-light-rgb),.22);
  }
  .stat-strip div h3{
    font-family:var(--font-head); font-size:clamp(30px,3.4vw,40px); font-weight:700;
    letter-spacing:.005em; line-height:1; color:var(--cream); margin-bottom:12px;
  }
  .stat-strip div span{
    display:block; font-family:var(--font-head); font-size:11px; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--gold-light);
  }
  @media (max-width:860px){
    .stat-strip{grid-template-columns:repeat(2,1fr); gap:36px 0; padding:40px 0 44px;}
    .stat-strip div:nth-child(odd)::before{display:none;}
  }
  @media (max-width:560px){
    .hero-art{width:140px;}
    .stat-strip div{padding:4px 12px;}
    .stat-strip div h3{font-size:30px;}
  }

  section{padding:96px 24px;}
  .section-cream{background:var(--cream);}

  /* ABOUT - scroll-past section: large headline, medium subline, small meta */
  .about-section{padding:80px 24px;}
  .about-top{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center;}
  .about-text h2{font-size:clamp(24px,3vw,32px); margin-bottom:14px;}
  .about-sub{font-size:17px; font-weight:400; color:var(--gray); line-height:1.6; max-width:440px;}
  /* VISION / MISSION - promoted to two prominent purpose cards (V1 weight, V2 language) */
  .purpose-row{
    display:grid; grid-template-columns:1fr 1fr; gap:24px;
    margin-top:56px; padding-top:52px; border-top:1px solid #eee5d6;
  }
  .purpose-card{
    background:var(--cream-card); border:1px solid #e7ddca; border-radius:18px;
    padding:36px 38px;
  }
  .purpose-eyebrow{
    display:flex; align-items:center; gap:12px;
    font-family:var(--font-head); font-size:14px; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:18px;
  }
  .purpose-eyebrow::before{content:""; width:22px; height:2px; background:var(--gold); flex-shrink:0;}
  .purpose-statement{font-size:18px; font-weight:400; color:var(--ink); line-height:1.6; margin:0;}
  .purpose-card .read-more{margin:16px 0 0; font-size:12px;}
  .about-founded{
    display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
    margin-top:26px; font-size:13.5px; color:var(--gray);
  }
  .about-founded .founded-label{
    font-family:var(--font-head); font-size:11px; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; color:var(--gold);
  }
  .expandable-text{max-height:88px; overflow:hidden; position:relative; transition:max-height .45s cubic-bezier(.16,1,.3,1);}
  .expandable-text.expanded{max-height:600px;}
  .expandable-text::after{content:""; position:absolute; left:0; right:0; bottom:0; height:36px; background:linear-gradient(rgba(255,255,255,0), var(--white)); transition:opacity .3s; pointer-events:none;}
  .expandable-text.expanded::after{opacity:0;}
  /* supplementary text not shown at all until expanded (vs. a truncated repeat) */
  .expandable-sm{max-height:0;}
  .expandable-sm::after{display:none;}
  .expandable-sm p{padding-top:10px;}
  .expandable-sm.expanded{max-height:400px;}
  .read-more{
    display:inline-block; margin:14px 0 44px; background:none; border:none; cursor:pointer; padding:0;
    font-family:var(--font-head); font-size:12.5px; font-weight:600; color:var(--maroon); border-bottom:1px solid var(--gold);
  }
  .about-photo{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:0 24px 48px -20px rgba(73,21,46,.35);}
  .about-photo .ph{
    aspect-ratio:4/3; background: linear-gradient(160deg,#2c1a24,#5b4030 60%,#7c6242);
    position:relative;
  }
  /* The gradient stays as the fallback behind the image, so an empty or
     not-yet-uploaded slot still renders as designed rather than as a gap. */
  .about-photo .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .caption{
    background:var(--maroon); color:var(--cream); padding:16px 20px; font-size:12.5px; font-weight:400;
  }
  .caption b{display:block; font-family:var(--font-head); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-light); margin-bottom:5px;}
  @media (max-width:900px){ .about-top{grid-template-columns:1fr;} .purpose-row{grid-template-columns:1fr; gap:18px; padding-top:40px; margin-top:44px;} }

  /* PILLARS */
  .pillars-panel{background:var(--cream-card); border-radius:24px; padding:52px 48px; margin-top:48px;}
  .pillars{display:grid; grid-template-columns:repeat(5,1fr); gap:36px 28px; align-items:start;}
  .pillar-card{background:transparent; padding:0; text-align:left;}
  .pillar-icon{width:38px;height:38px;border-radius:50%; border:1px solid var(--gold); display:flex;align-items:center;justify-content:center; color:var(--maroon); font-size:15px; margin-bottom:16px;}
  .pillar-card h4{font-size:14.5px; margin-bottom:8px; line-height:1.3;}
  .pillar-card p{color:var(--gray); font-size:12.5px; line-height:1.6;}
  @media (max-width:960px){ .pillars{grid-template-columns:repeat(2,1fr); row-gap:36px;} .pillars-panel{padding:40px 28px;} }
  @media (max-width:560px){ .pillars{grid-template-columns:1fr;} }

  /* OPPORTUNITY */
  .opp-cards{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px;}
  .opp-card{border-radius:16px; overflow:hidden; background:var(--white); box-shadow:0 20px 40px -24px rgba(28,28,20,.25);}
  .opp-card .ph{aspect-ratio:16/10; position:relative;}
  .opp-card .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .ph-export{background:linear-gradient(150deg,#1c1c14,#3a4530 55%,#5c6b3e);}
  .ph-hub{background:linear-gradient(150deg,#241019,#49152e 55%,#7c6242);}
  .ph-reform{background:linear-gradient(150deg,#14201c,#2d4a3e 55%,#6b8a6f);}
  .ph-access{background:linear-gradient(150deg,#20140a,#5b4030 55%,#b0905f);}
  .opp-card .body{padding:24px;}
  .opp-card .tag{font-family:var(--font-head); font-weight:600; color:var(--gold); font-size:11px; letter-spacing:.08em; margin-bottom:10px; display:block;}
  .opp-card h4{font-size:15px; margin-bottom:8px; line-height:1.35;}
  .opp-card p{color:var(--gray); font-size:13px; line-height:1.6;}
  @media (max-width:700px){ .opp-cards{grid-template-columns:1fr;} }

  /* PROGRAMS - horizontal slide carousel */
  .programs-carousel-wrap{position:relative; margin-top:48px;}
  .programs-carousel{
    display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:10px 10px 24px; margin:0 -10px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .programs-carousel::-webkit-scrollbar{display:none;}
  .program-card{
    background:var(--white); overflow:hidden; border-radius:16px;
    flex:0 0 300px; scroll-snap-align:center;
    transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
  }
  .program-card.active-slide{transform:scale(1.06); z-index:2;}
  .program-card.cta{flex:0 0 300px; display:flex; flex-direction:column; justify-content:center;}
  .carousel-arrow{
    position:absolute; top:40%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
    background:var(--white); border:1px solid #eee5d6; display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:0 8px 20px -8px rgba(0,0,0,.15); z-index:3; font-size:16px; color:var(--maroon);
  }
  .carousel-arrow.prev{left:-6px;}
  .carousel-arrow.next{right:-6px;}
  @media (max-width:700px){ .carousel-arrow{display:none;} }
  .program-card .ph{aspect-ratio:16/10; background:linear-gradient(150deg,#49152e,#7c6242); position:relative;}
  /* CMS-editable photo overlay: with no src (no admin override yet) this
     paints nothing, so the gradient placeholder above and the .num badge
     below remain exactly as before. */
  .program-card .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  /* .program-card .num removed 2026-08-07: the 01-05 badges were decoration
     the cards did not need. */
  .program-card .body{padding:26px;}
  .program-card h4{font-size:16px; margin-bottom:10px;}
  .program-card p{color:var(--gray); font-size:13.5px; line-height:1.65; margin-bottom:18px;}
  .learn{font-family:var(--font-head); font-size:12.5px; font-weight:600; color:var(--maroon); border-bottom:1px solid var(--gold); padding-bottom:2px;}
  .program-card.cta{
    background:var(--maroon); color:var(--cream); padding:36px 30px; display:flex; flex-direction:column; justify-content:center;
  }
  .program-card.cta h4{color:var(--cream); font-size:20px; margin-bottom:12px; font-weight:600;}
  .program-card.cta p{color:rgba(248,242,231,.7); margin-bottom:22px;}

  /* BENEFITS - grouped into scannable categories */
  .benefits-panel{background:var(--cream-card); border-radius:24px; padding:52px 48px; margin-top:48px;}
  .benefits-groups{display:grid; grid-template-columns:repeat(4,1fr); gap:36px;}
  .benefit-icon{width:38px;height:38px;border-radius:50%; border:1px solid var(--gold); display:flex;align-items:center;justify-content:center; color:var(--maroon); font-size:15px; margin-bottom:16px;}
  .benefit-group h4{font-size:14.5px; margin-bottom:16px; line-height:1.3;}
  .benefit-group ul{display:flex; flex-direction:column; gap:16px;}
  .benefit-group li{list-style:none;}
  .benefit-group li b{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:3px;}
  .benefit-group li span{display:block; font-size:12px; color:var(--gray); line-height:1.5;}
  @media (max-width:960px){ .benefits-groups{grid-template-columns:1fr 1fr; row-gap:36px;} .benefits-panel{padding:40px 28px;} }
  @media (max-width:560px){ .benefits-groups{grid-template-columns:1fr;} }

  /* MANDATE */
  .mandate-grid{display:grid; grid-template-columns:1.3fr .9fr; gap:64px; margin-top:44px; align-items:start;}
  .mandate-list li{
    display:flex; gap:22px; padding:15px 0; border-bottom:1px solid #eee5d6; align-items:baseline;
  }
  .mandate-list li .n{font-family:var(--font-head); color:var(--gold); font-weight:600; font-size:11.5px; width:20px; flex-shrink:0;}
  .mandate-list li span:last-child{font-size:14px; color:var(--ink);}
  .mandate-box{background:var(--maroon); color:var(--cream); border-radius:var(--radius); padding:34px;}
  .mandate-box h5{font-family:var(--font-head); color:var(--gold-light); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.12);}
  .mandate-box p{color:rgba(248,242,231,.8); font-size:13.5px; line-height:1.75; margin-bottom:18px;}
  .mandate-box p:last-child{padding-top:18px; border-top:1px solid rgba(255,255,255,.12); margin-bottom:0;}
  @media (max-width:900px){ .mandate-grid{grid-template-columns:1fr;} }

  /* HOME-PAGE EVENT TEASER
     A single horizontal card: thumbnail left, text + CTA right.
     Replaces the old 3-col events-grid; the full listing lives at /events/. */
  .event-teaser-card{display:grid; grid-template-columns:300px 1fr; overflow:hidden; border-radius:var(--radius); margin-top:48px; border:1px solid rgba(176,144,95,.2); background:var(--cream-card);}
  .event-teaser-card .ph{width:100%; height:100%; min-height:240px; object-fit:cover; object-position:center; display:block; background:linear-gradient(150deg,#241019,#4a2d3c 60%,#6e5142);}
  .event-teaser-card .body{padding:36px 40px; display:flex; flex-direction:column; gap:10px; justify-content:center;}
  .event-teaser-card .meta{font-family:var(--font-head); font-size:11px; font-weight:600; color:var(--gold); letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; gap:8px;}
  .event-teaser-card .meta::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0;}
  .event-teaser-card h4{font-size:20px; font-weight:700; line-height:1.2; color:var(--ink);}
  .event-teaser-card p{font-size:14px; color:var(--gray); line-height:1.65;}
  .event-teaser-card .btn{align-self:flex-start; margin-top:6px;}
  @media (max-width:700px){
    .event-teaser-card{grid-template-columns:1fr;}
    .event-teaser-card .ph{min-height:220px; aspect-ratio:4/3;}
  }

  /* EVENTS PAGE — /en/events/ and /th/events/ */
  .ep{min-height:100vh;}
  .ep-header{background:var(--white); border-bottom:1px solid #f0ece4; padding:14px 0; position:sticky; top:0; z-index:100;}
  .ep-header-inner{display:flex; align-items:center; justify-content:space-between; gap:24px;}
  .ep-logo-link{display:flex; align-items:center;}
  .ep-logo{height:44px; width:auto;}
  .ep-header-right{display:flex; align-items:center; gap:20px;}
  .ep-back{font-family:var(--font-head); font-size:13px; font-weight:500; color:var(--gray); text-decoration:none;}
  .ep-back:hover{color:var(--maroon);}
  .ep-hero{background:var(--cream); padding:72px 0 56px; border-bottom:1px solid rgba(176,144,95,.2);}
  .ep-hero h1{font-size:clamp(28px,4vw,44px); margin-bottom:16px; color:var(--ink);}
  .ep-events{padding:64px 0 96px; background:var(--white);}
  .ep-event{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; padding:64px 0; border-top:1px solid #ede8df;}
  .ep-event--first{border-top:none; padding-top:0;}
  .ep-event-meta{font-family:var(--font-head); font-size:11.5px; font-weight:600; color:var(--gold); letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; display:flex; align-items:center; gap:8px;}
  .ep-event-meta::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0;}
  .ep-event-title{font-size:clamp(22px,2.8vw,32px); margin-bottom:16px; color:var(--ink); line-height:1.2;}
  .ep-event-body{font-size:15px; color:var(--gray); line-height:1.75;}
  .ep-gallery{display:grid; gap:12px;}
  .ep-gallery--multi{grid-template-columns:1fr 1fr;}
  .ep-gallery--single{grid-template-columns:1fr;}
  .ep-gallery img{width:100%; border-radius:10px; display:block; box-shadow:0 2px 16px rgba(0,0,0,.07);}
  .ep-gallery-img{cursor:zoom-in; transition:transform .18s ease, box-shadow .18s ease;}
  .ep-gallery-img:hover{transform:scale(1.02); box-shadow:0 6px 28px rgba(0,0,0,.13);}
  /* Lightbox */
  #ep-lb{border:none; border-radius:12px; padding:0; background:transparent; max-width:min(92vw,900px); max-height:92dvh; overflow:hidden; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);}
  #ep-lb::backdrop{background:rgba(28,22,20,.88); backdrop-filter:blur(4px);}
  .ep-lb-img{display:block; max-width:100%; max-height:90dvh; object-fit:contain; border-radius:10px;}
  .ep-lb-close{position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,.15); color:#fff; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); transition:background .15s;}
  .ep-lb-close:hover{background:rgba(255,255,255,.3);}
  .ep-empty{color:var(--gray); font-size:16px; padding:48px 0; text-align:center;}
  .ep-footer{background:var(--cream); padding:32px 0; border-top:1px solid #ede8df;}
  .ep-footer-inner{display:flex; align-items:center; justify-content:space-between;}
  .ep-footer-back{font-family:var(--font-head); font-size:13px; font-weight:500; color:var(--gold); text-decoration:none;}
  .ep-footer-back:hover{color:var(--maroon);}
  .ep-footer-brand{font-family:var(--font-head); font-size:12px; color:var(--gray-soft); letter-spacing:.04em;}
  @media (max-width:800px){
    .ep-event{grid-template-columns:1fr; gap:36px;}
  }
  @media (max-width:480px){
    .ep-gallery--multi{grid-template-columns:1fr;}
    .ep-header-right .ep-back{display:none;}
  }

  /* APPLICATION FORM */
  .apply{background:var(--maroon-dark); color:var(--cream);}
  .apply-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start;}
  .apply h2{color:var(--cream); font-size:clamp(24px,3.4vw,32px);}
  .apply p.lead{color:rgba(248,242,231,.7);}
  .form-card{background:var(--cream); color:var(--ink); border-radius:14px; padding:38px;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
  .field label{display:block; font-family:var(--font-head); font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--gray); margin-bottom:9px;}
  .field input, .field select, .field textarea{
    width:100%; padding:12px 14px; border:1px solid #e4ddd0; border-radius:6px; font-size:14px; font-family:var(--font-body); background:var(--white);
  }
  .chip-group{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:20px;}
  .chip{padding:8px 15px; border:1px solid #e4ddd0; border-radius:999px; font-size:12.5px; font-weight:500; color:var(--ink);}
  .chip.tier{font-weight:600;}
  .chip.selected{background:var(--maroon); color:var(--cream); border-color:var(--maroon);}
  .consent{display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--gray); margin-bottom:24px;}
  .form-card .submit{width:100%; text-align:center;}
  .chip[onclick]{cursor:pointer;}
  /* Honeypot: real visitors and screen readers never encounter this field
     (off-screen + aria-hidden); spam bots that blindly fill every input
     reveal themselves by giving it a value. See src/apply.ts. */
  .hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
  @media (max-width:900px){ .apply-grid{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} }

  /* CONTACT */
  .contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:44px; background:#eee5d6;}
  .office-card{background:var(--cream); padding:28px;}
  .office-card h4{font-family:var(--font-head); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:16px;}
  .office-card p{font-size:13.5px; color:var(--gray); margin-bottom:18px; line-height:1.6;}
  .office-card a.email{display:block; font-family:var(--font-head); font-size:13.5px; font-weight:600; color:var(--maroon); border-bottom:1px solid var(--gold); padding-bottom:6px; margin-bottom:10px; width:fit-content;}
  .office-card .phone{font-size:13.5px; color:var(--gray);}
  /* The card's background is var(--cream) and it sits inside .section-cream,
     which is the same colour -- so there is no visible container, and the 32px
     horizontal padding was reading as a stray indent that pushed Contact / the
     org name / the email in from the "Get in touch" heading above them.
     Horizontal padding removed so the block aligns with the heading and the
     button lines up with the right edge of .wrap. Vertical padding stays: that
     is real spacing, not indentation. */
  .hq-card{
    margin-top:1px; background:var(--cream); padding:28px 0;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
  }
  .hq-card h4{font-family:var(--font-head); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:9px;}
  .hq-card .name{font-family:var(--font-head); font-size:17px; font-weight:600; margin-bottom:5px;}
  .hq-card .addr{color:var(--gray); font-size:13.5px;}
  @media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }

  /* CLOSING CTA BANNER */


  /* FOOTER */
  footer{background:var(--maroon-dark); color:rgba(248,242,231,.75); padding:72px 24px 28px;}
  .footer-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:44px;}
  .footer-brand .logo{color:var(--cream); margin-bottom:18px;}
  /* 2026-08-07: the source PNG carried ~25% transparent margin, so the rendered
     height was never the logo's height and its left edge never lined up with the
     paragraph below. Now points at a trimmed asset whose edges ARE the artwork,
     which makes the alignment automatic. 60px here is the same VISIBLE size the
     old 112px-on-padded-canvas produced (112 x 474/900 = 59). */
  .footer-brand .logo img{height:60px; width:auto; display:block;}
  .footer-brand p{font-size:13.5px; color:rgba(248,242,231,.55); max-width:300px; line-height:1.7;}
  .footer-links-wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .footer-col h5{font-family:var(--font-head); color:var(--gold-light); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:20px;}
  .footer-col li{margin-bottom:13px; font-size:13.5px; font-weight:300;}
  /* .footer-signature removed 2026-08-07: it was a second, wordmark-only
     THIPA logo below the emblem logo, duplicating the brand without adding
     anything. */
  .footer-bottom{
    max-width:1180px; margin:28px auto 0; padding-top:26px; border-top:1px solid rgba(248,242,231,.1);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:rgba(248,242,231,.45);
  }
  .footer-bottom .links{display:flex; gap:24px;}
  @media (max-width:900px){ .footer-grid{grid-template-columns:1fr;} .footer-links-wrap{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .footer-links-wrap{grid-template-columns:1fr;} }

  /* ---------------------------------------------------------------
     MOBILE ERGONOMICS (added 2026-08-06)
     Fixes found by testing the live page at 375/393/412/768px widths.
     --------------------------------------------------------------- */
  @media (max-width:900px){
    /* iOS Safari zooms the viewport whenever a focused field is under 16px.
       On the membership form that means every tap jerks the page around, so
       16px here is a usability fix, not a typographic choice. Selector mirrors
       the base `.field input, .field select, .field textarea` rule so it wins
       on equal specificity via source order. */
    .field input, .field select, .field textarea{font-size:16px;}
    /* The consent checkbox is required to submit and was a 13px target. The
       whole row becomes the label so the text is tappable too, which is what
       actually makes a small checkbox usable. */
    .consent input[type="checkbox"]{width:24px; height:24px; flex-shrink:0; margin-top:2px;}
    .consent{font-size:14px; padding:8px 0; align-items:center;}
    /* Inline text links sat at 16px tall with no vertical separation. */
    .hq-card .addr a, .learn{display:inline-flex; align-items:center; min-height:44px;}
    .lang-toggle button{min-height:44px;}
    /* Inline expanders were 16px tall; padding lifts them without moving text. */
    .expandable-text button, button.read-more{min-height:44px; padding:14px 0;}
    .lang-toggle button{padding:9px 16px;}
    /* Footer and contact links sat at 16px tall with no separation. */
    footer a, .contact-links a{display:inline-flex; align-items:center; min-height:44px;}
    /* 11px is hard to read on a phone; lift the smallest labels only, leaving
       the uppercase eyebrow/tag styling intact. */
    .lead{font-size:16px;}
    .opp-card p, .program-card p{font-size:14px;}
  }

  /* ---------------------------------------------------------------
     COOKIE CONSENT (added 2026-08-07)
     Brand maroon panel, gold accents, same type scale as the site.
     Anchored bottom rather than a full-screen modal: PDPA requires an
     informed choice, not a blocked page, and a wall would be the first
     thing a first-time visitor met.
     --------------------------------------------------------------- */
  .cookie-consent{
    position:fixed; left:0; right:0; bottom:0; z-index:200;
    background:var(--maroon); color:var(--cream);
    border-top:2px solid var(--gold);
    box-shadow:0 -18px 40px -24px rgba(0,0,0,.55);
    animation:consentUp .34s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes consentUp{ from{transform:translateY(100%);} to{transform:translateY(0);} }
  @media (prefers-reduced-motion:reduce){ .cookie-consent{animation:none;} }
  .cookie-consent[hidden]{display:none;}
  .consent-inner{max-width:1180px; margin:0 auto; padding:22px 24px;
    display:grid; grid-template-columns:1fr auto; gap:20px 32px; align-items:center;}
  .consent-copy h2{
    font-family:var(--font-head); font-size:14px; font-weight:700;
    letter-spacing:.02em; color:var(--gold-light); margin-bottom:6px;
  }
  .consent-copy p{font-size:13.5px; line-height:1.6; color:rgba(248,242,231,.82); max-width:70ch;}
  /* Action styling lives in the revised block near the end of this file. */

  /* Granular panel, revealed by "Choose what I allow". */
  .consent-options{
    grid-column:1 / -1; display:grid; gap:12px;
    padding-top:18px; margin-top:2px; border-top:1px solid rgba(var(--gold-light-rgb),.28);
  }
  .consent-options[hidden]{display:none;}
  .consent-opt{display:flex; gap:12px; align-items:flex-start; cursor:pointer;}
  .consent-opt.is-locked{cursor:default; opacity:.72;}
  .consent-opt input{width:20px; height:20px; flex-shrink:0; margin-top:2px; accent-color:var(--gold);}
  .consent-opt b{display:block; font-family:var(--font-head); font-size:12.5px; font-weight:600; color:var(--cream); margin-bottom:2px;}
  .consent-opt em{display:block; font-style:normal; font-size:12.5px; line-height:1.55; color:rgba(248,242,231,.7);}

  @media (max-width:760px){
    .consent-inner{grid-template-columns:1fr; padding:18px 16px; gap:16px;}
    .consent-copy p{font-size:13px;}
  }

  /* Consent actions (2026-08-07, revised).
     Accept and Decline are the SAME size, shape and weight, differing only in
     colour. GDPR regulators treat a reject option that is harder to find or
     less prominent than accept as non-compliant, and although Thailand's PDPA
     governs here, THIPA courts international traffic -- so parity is the safer
     default and costs nothing. Only "Choose what I allow" is a quiet link: it
     opens a disclosure, it is not one of the two consent choices.
     Left-aligned, with Accept first. */
  .consent-actions{
    display:flex; flex-direction:row; flex-wrap:wrap;
    justify-content:flex-start; align-items:center; gap:10px 12px;
  }
  .cookie-consent .btn{
    font-size:11.5px; padding:12px 20px; white-space:nowrap;
    border-radius:999px; cursor:pointer; font-weight:600;
  }
  .consent-accept{background:var(--gold); color:var(--maroon-dark); border:1px solid var(--gold);}
  .consent-save{background:var(--gold-light); color:var(--maroon-dark); border:1px solid var(--gold-light);}
  /* Same footprint as Accept, different colour -- not a demoted variant. */
  .consent-decline{background:transparent; color:var(--cream); border:1px solid rgba(248,242,231,.55);}
  .consent-decline:hover{border-color:var(--cream);}
  .cookie-consent .btn:focus-visible{outline:2px solid var(--gold-light); outline-offset:2px;}
  /* The global .btn sets display:inline-block, which outranks the UA style for
     the [hidden] attribute -- without this, "Save my choices" stayed visible in
     the collapsed state even though the markup marks it hidden. */
  .cookie-consent .btn[hidden]{display:none;}

  .consent-link{
    background:none; border:none; padding:6px 2px; margin-left:4px; cursor:pointer;
    font-family:var(--font-head); font-size:12px; font-weight:500;
    color:rgba(248,242,231,.78); text-decoration:underline; text-underline-offset:3px;
  }
  .consent-link:hover{color:var(--cream);}
  .consent-link:focus-visible{outline:2px solid var(--gold-light); outline-offset:2px; border-radius:3px;}
  .consent-link[hidden]{display:none;}

  @media (max-width:760px){
    .consent-actions{justify-content:stretch;}
    .consent-actions .btn{flex:1 1 100%; text-align:center; min-height:46px;}
    .consent-link{flex:1 1 100%; text-align:center; min-height:44px;}
  }

  /* Annual-intake note on the application form. Sits between the consent row
     and the submit button so it is read before committing, not after. */
  /* Static fee line where the tier chips used to be. Reads as an answer, not an
     input, so it is deliberately not styled like a field. */
  .form-fee{
    font-family:var(--font-head); font-size:16px; font-weight:600; color:var(--maroon);
    padding:2px 0 0;
  }

  .form-note{
    font-size:12.5px; line-height:1.6; color:var(--gray);
    background:var(--cream-card); border:1px solid #e7ddca; border-left:3px solid var(--gold);
    border-radius:8px; padding:12px 14px; margin-bottom:18px;
  }

  /* Footer items are real anchors now, not decorative <li> text. */
  .footer-col li a{display:inline-block; padding:2px 0; transition:color .15s ease;}
  .footer-col li a:hover{color:var(--gold-light);}
  .footer-col li a:focus-visible{outline:2px solid var(--gold-light); outline-offset:2px; border-radius:3px;}

  /* ---------------------------------------------------------------
     LEGAL PAGES (privacy policy) — added 2026-08-07
     --------------------------------------------------------------- */
  .legal-page{padding:72px 24px 96px; background:var(--white);}
  .legal-wrap{max-width:760px;}
  .legal-page h1{font-size:clamp(28px,4vw,38px); margin-bottom:10px;}
  .legal-meta{font-family:var(--font-head); font-size:12.5px; color:var(--gray-soft); margin-bottom:28px;}
  .legal-page .lead{font-size:16px; margin-bottom:8px; max-width:none;}
  .legal-page h2{
    font-size:17px; margin:38px 0 12px; padding-top:22px;
    border-top:1px solid #efe8db; color:var(--maroon);
  }
  .legal-page h3{font-size:13.5px; font-weight:600; color:var(--ink); margin:20px 0 6px; font-family:var(--font-head);}
  .legal-page p{font-size:14.5px; line-height:1.75; color:var(--gray); margin-bottom:12px;}
  .legal-footer{
    background:var(--maroon); color:rgba(248,242,231,.72);
    padding:28px 24px; font-size:12.5px;
  }
  .legal-footer .wrap{display:flex; gap:22px; align-items:center; flex-wrap:wrap;}
  .legal-footer a{text-decoration:underline; text-underline-offset:3px;}
  .legal-footer a:hover{color:var(--cream);}
  @media (max-width:760px){
    .legal-page{padding:48px 16px 72px;}
    .legal-footer .wrap{flex-direction:column; align-items:flex-start; gap:12px;}
    .legal-footer a{min-height:44px; display:inline-flex; align-items:center;}
  }

  /* Pillar and benefit emblems are inline SVG, not text glyphs. The originals
     were arbitrary Unicode characters -- a bullseye for "Trade & Exports", the
     Armenian eternity sign for "Knowledge & Network" -- which read as random
     and rendered differently depending on the font available. These inherit
     colour via currentColor so they keep matching the gold ring. */
  .pillar-icon svg, .benefit-icon svg{width:21px; height:21px; display:block;} /* 19px +10%, 2026-08-07 */

  /* Instagram sits under the footer logo. The icon is a sibling of the
     translated span, never inside it: the language pass replaces inner
     content, so an icon nested in a data-en element is wiped on /th/. */
  .footer-social{
    display:inline-flex; align-items:center; gap:8px; margin-top:14px;
    font-size:13px; color:rgba(248,242,231,.8); transition:color .15s ease;
  }
  .footer-social svg{width:17px; height:17px; flex-shrink:0;}
  .footer-social:hover{color:var(--cream);}
  .footer-social:focus-visible{outline:2px solid var(--gold-light); outline-offset:3px; border-radius:4px;}