:root{
  --white:#ffffff;
  --off-white:#f7f7f7;
  --light-gray:#eeeeee;
  --mid-gray:#c8c8c8;
  --gray:#8a8a8a;
  --dark-gray:#3a3a3a;
  --black:#111111;
  --ink:#1a1a1a;
  --blue:#0e4fa0;
  --blue-light:#e7e9f3 ;
  --blue-dark:#0f218b;
  --accent:#d71921 ;
  --maxw:1440px;
  /* Typography scale — single source of truth for font sizes */
  --fs-xxs:11px;    /* micro labels, fine print */
  --fs-xs:12px;     /* captions, badges, meta */
  --fs-cap:13px;    /* small captions / secondary labels */
  --fs-sm:14px;     /* small text: labels, kickers, tags, chips, list items */
  --fs-body:15px;   /* body paragraphs */
  --fs-md:16px;     /* larger body / intro text */
  --fs-h5:17px;     /* card / block sub-headings */
  --fs-lg:19px;     /* prominent sub-headings */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Anuphan',system-ui,sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}

.container{max-width:1320px;margin:0 auto;padding:0 48px}
.display{font-family:'Anuphan',sans-serif;font-weight:700;letter-spacing:-.01em;text-transform:uppercase}

/* ========== HEADER ========== */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:16px 0;
  transition:transform .4s ease, opacity .4s ease, background .4s ease, box-shadow .4s ease;
}
header.scrolled{
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
header.hidden{
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
}
header .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:40px;
}
.logo{
  display:flex;align-items:center;
  height:40px;
  transition:height .3s;
}
header.scrolled .logo{height:40px}
.logo img{
  height:60%;width:auto;display:block;
  transition:opacity .3s;
}
.logo .logo-white{display:block}
.logo .logo-dark{display:none}
header.scrolled .logo .logo-white{display:none}
header.scrolled .logo .logo-dark{display:block}

nav.primary{flex:1;display:flex;justify-content:center}
nav.primary ul{
  display:flex;list-style:none;gap:2px;align-items:center;
}
nav.primary a{
  padding:8px 14px;
  font-family:'Anuphan',sans-serif;
  font-weight:500;font-size:16px;
  letter-spacing:.04em;
  color:var(--white);
  position:relative;
  transition:color .3s;
}
header.scrolled nav.primary a{color:var(--ink)}
nav.primary a::after{
  content:"";position:absolute;
  left:16px;right:16px;bottom:2px;
  height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:center;
  transition:transform .35s ease;
}
nav.primary a:hover::after{transform:scaleX(1)}

/* ปุ่มติดต่อเรา - pill shape */
nav.primary a.contact-btn{
  padding:6px 16px;
  border:1.5px solid rgba(255,255,255,.85);
  border-radius:999px;
  margin-left:8px;
  transition:all .3s ease;
}
nav.primary a.contact-btn::after{display:none}
nav.primary a.contact-btn:hover{
  background:var(--white);
  color:var(--ink);
  border-color:var(--white);
}
header.scrolled nav.primary a.contact-btn{
  border-color:var(--ink);
  color:var(--ink);
}
header.scrolled nav.primary a.contact-btn:hover{
  background:var(--ink);
  color:var(--white);
  border-color:var(--ink);
}

.lang{
  display:flex;align-items:center;gap:14px;
  font-family:'Anuphan',sans-serif;
  font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--white);
  transition:color .3s;
}
header.scrolled .lang{color:var(--ink)}
.lang a{opacity:.5;transition:opacity .2s}
.lang a.active{opacity:1}
.lang a:hover{opacity:1}
.lang .sep{width:1px;height:12px;background:currentColor;opacity:.3}

/* ========== NAV DROPDOWN (สินค้าและบริการ) ========== */
nav.primary li.has-dropdown{position:relative}
nav.primary li.has-dropdown > a{display:inline-flex;align-items:center;gap:5px}
nav.primary .dropdown-caret{
  width:13px;height:13px;flex-shrink:0;
  transition:transform .3s ease;
}
nav.primary li.has-dropdown:hover .dropdown-caret,
nav.primary li.has-dropdown:focus-within .dropdown-caret{transform:rotate(180deg)}
/* invisible bridge so hover survives the gap between link and panel */
nav.primary li.has-dropdown::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:16px;
}
nav.primary .dropdown{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(16px);
  min-width:240px;margin:0;padding:8px;
  list-style:none;
  display:flex;flex-direction:column;
  background:var(--white);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.16);
  border:1px solid rgba(0,0,0,.05);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
  z-index:120;
}
nav.primary li.has-dropdown:hover .dropdown,
nav.primary li.has-dropdown:focus-within .dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(10px);
}
nav.primary .dropdown li{width:100%}
nav.primary .dropdown a{
  display:block;width:100%;
  padding:15px 16px;border-radius:9px;
  font-size:15px;font-weight:500;letter-spacing:.01em;white-space:nowrap;
  color:var(--ink);transition:background .2s,color .2s;
}
nav.primary .dropdown a::after{display:none}
nav.primary .dropdown a:hover{background:rgba(0,0,0,.05);color:var(--blue)}

/* ========== MOBILE NAV SUBMENU ========== */
.mobile-nav-links .m-sub-head{display:flex;align-items:center;justify-content:space-between;}
.mobile-nav-links .m-sub-link{
  flex:1;padding:18px 24px;text-decoration:none;
  font-family:'Anuphan',sans-serif;font-size:16px;font-weight:500;
  color:var(--ink);letter-spacing:.01em;transition:color .2s,padding-left .25s;
}
.mobile-nav-links .m-sub-link:hover{color:var(--blue);padding-left:30px}
.mobile-nav-links .m-sub-toggle{
  display:grid;place-items:center;padding:18px 24px 18px 8px;
  border:0;background:none;cursor:pointer;flex-shrink:0;
}
.mobile-nav-links .m-sub-caret{
  width:32px;height:32px;border:1px solid var(--light-gray);border-radius:50%;
  display:grid;place-items:center;color:var(--gray);transition:.3s;flex-shrink:0;
}
.mobile-nav-links .m-sub-caret svg{width:14px;height:14px}
.mobile-nav-links .m-has-sub.open .m-sub-caret{transform:rotate(180deg);background:var(--blue);border-color:var(--blue);color:#fff}
.mobile-subnav{
  list-style:none;margin:0;padding:0;
  max-height:0;overflow:hidden;
  background:var(--light-gray, #f4f5f7);
  transition:max-height .35s ease;
}
.mobile-nav-links .m-has-sub.open .mobile-subnav{max-height:420px}
.mobile-subnav li{border-bottom:1px solid rgba(0,0,0,.05) !important}
.mobile-subnav li:last-child{border-bottom:0 !important}
.mobile-subnav a{
  padding:14px 24px 14px 40px;font-size:14.5px;font-weight:500;justify-content:flex-start;
}
.mobile-subnav a:hover{padding-left:46px}

/* ========== HERO - FULL SCREEN VIDEO ========== */
.hero{
  position:relative;
  height:100vh;
  min-height:600px;
  width:100%;
  overflow:hidden;
  background:var(--black);
  color:var(--white);
  display:flex;
  align-items:center;
}
.hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:1;
}
.hero-video iframe,
.hero-video video{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  border:0;
  object-fit:cover;
  pointer-events:none;
  background:#000;
}
.hero-overlay{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.45) 0%,
      rgba(0,0,0,.35) 40%,
      rgba(0,0,0,.55) 70%,
      rgba(0,0,0,.75) 100%
    );
}
.hero-grain{
  position:absolute;inset:0;z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.5;
  pointer-events:none;
}
/* Decorative SVG element floating on hero */
.hero-element{
  position:absolute;
  right:-60px;bottom:80px;
  width:520px;height:380px;
  background-image:url('element-1.svg');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:right center;
  opacity:.18;
  z-index:3;
  pointer-events:none;
  filter:invert(1) brightness(1.5);
  animation:heroFloat 14s ease-in-out infinite;
}
@keyframes heroFloat{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-8px,-10px)}
}
.hero .container{
  position:relative;z-index:4;
  width:100%;
}
.hero-content{
  max-width:940px;
}
.hero-eyebrow{
  font-family:'Anuphan',sans-serif;
  font-size:12px;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;
  color:rgba(255,255,255,.75);
  margin-bottom:24px;
  display:flex;align-items:center;gap:14px;
}
.hero-eyebrow::before{
  content:"";display:block;
  width:50px;height:1px;background:rgba(255,255,255,.6);
}
.hero h1{
  font-family:'Anuphan',sans-serif;
  font-weight:700;
  font-size:clamp(40px,6.5vw,92px);
  line-height:.98;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:32px;
}
.hero h1 span{display:block}
.hero h1 .accent{
  color:var(--white);
  -webkit-text-stroke:1.5px var(--white);
  -webkit-text-fill-color:transparent;
  font-style:italic;
  font-weight:300;
}
.hero-lede{
  font-size:20px;
  line-height:1.6;
  color:rgba(255,255,255,.88);
  max-width:540px;
  margin-bottom:48px;
  font-weight:300;
}
.hero-link{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'Anuphan',sans-serif;
  font-size:14px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--white);
  padding:13px 28px;
  background:var(--blue);
  border:1.5px solid var(--blue);
  border-radius:999px;
  box-shadow:0 4px 14px rgba(14,79,160,.28);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.hero-link:hover{
  background:var(--blue-dark);
  border-color:var(--blue-dark);
  box-shadow:0 8px 22px rgba(14,79,160,.42);
  transform:translateY(-1px);
}
.hero-link .arrow{
  display:inline-flex;
  align-items:center;
  transition:transform .4s ease;
}
.hero-link:hover .arrow{transform:translateX(6px)}

.hero-scroll{
  position:absolute;
  bottom:28px;left:50%;
  transform:translateX(-50%);
  z-index:4;
  display:flex;flex-direction:column;
  align-items:center;gap:12px;
  color:rgba(255,255,255,.7);
  font-family:'Anuphan',sans-serif;
  font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;
}
.hero-scroll .line{
  width:1px;height:40px;
  background:linear-gradient(to bottom,rgba(255,255,255,.6),transparent);
  position:relative;
  overflow:hidden;
}
.hero-scroll .line::after{
  content:"";position:absolute;
  top:-20px;left:0;right:0;height:20px;
  background:var(--white);
  animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{top:-20px}
  100%{top:40px}
}

.hero-meta{
  position:absolute;
  right:48px;bottom:28px;
  z-index:4;
  display:flex;gap:36px;
  color:rgba(255,255,255,.85);
  font-family:'Anuphan',sans-serif;
}
.hero-meta-item{text-align:right}
.hero-meta-item .n{
  font-size:32px;font-weight:200;
  letter-spacing:-.02em;
  line-height:1;
}
.hero-meta-item .n sup{
  font-size:14px;font-weight:400;vertical-align:top;
  margin-left:2px;
}
.hero-meta-item .l{
  font-size:10px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  margin-top:6px;
  opacity:.7;
}

/* ========== SECTION BASE ========== */
section.block{position:relative}
.section-label{
  font-family:'Anuphan',sans-serif;
  font-size:12px;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:20px;
  display:flex;align-items:center;gap:14px;
}
.section-label::before{
  content:"";display:block;
  width:32px;height:1px;background:var(--ink);
}
h2.heading{
  font-family:'Anuphan',sans-serif;
  font-weight:700;
  font-size:clamp(30px,3.8vw,52px);
  line-height:1.02;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:24px;
}
h2.heading .light{
  font-weight:200;
  display:block;
  color:var(--ink);
}

/* ========== ABOUT MERGED (เกี่ยวกับเรา + วิสัยทัศน์) ========== */
.about-merged{
  background:var(--white);
  position:relative;
}

/* ===== UNIFIED LAYOUT (รวมเกี่ยวกับเรา + วิสัยทัศน์) ===== */
.about-unified{
  padding:100px 0;
  position:relative;
  overflow:hidden;
}
.about-unified-bg{
  position:absolute;
  left:-8%;
  top:50%;
  transform:translateY(-50%);
  width:min(900px,75%);
  height:auto;
  pointer-events:none;
  z-index:0;
  opacity:.05;
  user-select:none;
  color:var(--blue);
}
.about-unified-bg svg{
  width:100%;
  height:auto;
  display:block;
}
.about-unified-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:70px;
  align-items:stretch;
}
.about-unified-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.about-unified-content .kicker{
  margin-bottom:18px;
}
.about-unified-content h2.about-style-heading{
  margin-bottom:26px;
}
.about-unified-text{
  margin-bottom:8px;
}
.about-unified-text p{
  font-family:'Anuphan',sans-serif;
  font-size:16px;
  color:var(--dark-gray);
  line-height:1.75;
  font-weight:400;
  margin-bottom:12px;
}
.about-unified-text p strong{color:var(--ink);font-weight:500}
.about-unified-text p:last-child{margin-bottom:0}

.about-unified-visual{
  position:relative;
  overflow:hidden;
  min-height:560px;
  align-self:stretch;
  border-radius:14px;
}
.about-unified-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.about-unified-visual:hover img{
  transform:scale(1.06);
}

/* Part A: big typographic intro (legacy, kept for safety) */
.about-intro{
  padding:100px 0 60px;
  position:relative;
  overflow:hidden;
}
.about-intro::before{
  content:'';
  position:absolute;
  left:-25%;
  top:50%;
  transform:translateY(-50%);
  width:200%;
  height:260%;
  background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNzMuMjggMjEyLjY1Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnN0MCB7CiAgICAgICAgZmlsbDogbm9uZTsKICAgICAgICBzdHJva2U6ICNiM2IzYjM7CiAgICAgICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOwogICAgICAgIHN0cm9rZS13aWR0aDogMS4wOHB4OwogICAgICB9CiAgICAgIC5zdDEgeyBvcGFjaXR5OiAuNDsgfQogICAgICAuc3QyIHsgZmlsbDogI2IzYjNiMzsgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+Cjwvc3ZnPg==');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
  pointer-events:none;
  z-index:0;
  opacity:.08;
}
.about-intro-inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:60px;
  align-items:center;
}
.kicker{
  font-family:'Anuphan',sans-serif;
  font-size:13px;
  color:var(--blue);
  font-weight:600;
  margin-bottom:20px;
  display:inline-flex;align-items:center;gap:12px;
}
.kicker::before{
  content:'';width:28px;height:1px;background:var(--blue);
}

/* หัวข้อใหญ่สไตล์ "เกี่ยวกับเรา" - ใช้กับทุก section */
h2.about-style-heading,
h3.about-style-heading{
  font-family:'Anuphan',sans-serif;
  font-size:clamp(28px,3.4vw,46px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.05;
  color:var(--ink);
  text-transform:none;
  margin-bottom:0;
}
h2.about-style-heading .thin,
h3.about-style-heading .thin{
  font-weight:200;
  color:var(--gray);
  display:block;
}

/* ปุ่ม pill - สไตล์เดียวกับปุ่มติดต่อเรา navbar */
.btn-pill{
  display:inline-flex;align-items:center;gap:12px;
  padding:13px 28px;
  border:1.5px solid var(--blue);
  border-radius:999px;
  font-family:'Anuphan',sans-serif;
  font-size:14px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--white);
  background:var(--blue);
  box-shadow:0 4px 14px rgba(14,79,160,.18);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.btn-pill svg{
  transition:transform .3s ease;
}
.btn-pill:hover{
  background:var(--blue-dark);
  border-color:var(--blue-dark);
  color:var(--white);
  box-shadow:0 8px 22px rgba(14,79,160,.32);
  transform:translateY(-1px);
}
.btn-pill:hover svg{
  transform:translateX(4px);
}

/* Secondary pill button - outline style */
.btn-pill-secondary{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 22px;
  border:1.5px solid var(--blue);
  border-radius:999px;
  font-family:'Anuphan',sans-serif;
  font-size:14px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--blue);
  background:transparent;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.btn-pill-secondary svg{
  transition:transform .3s ease;
}
.btn-pill-secondary:hover{
  background:var(--blue);
  color:var(--white);
  border-color:var(--blue);
}
.btn-pill-secondary:hover svg{
  transform:translateX(4px);
}
.about-intro-left h2{
  font-family:'Anuphan',sans-serif;
  font-size:clamp(28px,3.4vw,46px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.05;
  color:var(--ink);
}
.about-intro-left h2 .thin{font-weight:200;color:var(--gray);display:block}
.about-intro-right p{
  font-family:'Anuphan',sans-serif;
  font-size:16px;
  color:var(--dark-gray);
  line-height:1.75;
  font-weight:400;
  margin-bottom:14px;
}
.about-intro-right p strong{color:var(--ink);font-weight:500}

/* Stats strip */
.about-stats{
  list-style:none;
  margin-top:32px;
  padding-top:28px;
  border-top:1px solid var(--light-gray);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-bottom:36px;
}
.about-stats li{
  display:flex;flex-direction:column;gap:4px;
}
.about-stats .h-num{
  font-family:'Anuphan',sans-serif;
  font-size:clamp(28px,3vw,38px);
  font-weight:700;
  color:var(--blue);
  letter-spacing:-.02em;
  line-height:1;
  display:flex;align-items:baseline;gap:3px;
}
.about-stats .h-num .count{
  display:inline-block;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum';
}
.about-stats .h-num small{
  font-size:.5em;color:var(--accent);font-weight:600;
}
.about-stats .h-label{
  font-family:'Anuphan',sans-serif;
  font-size:14px;
  color:var(--gray);
  font-weight:400;
  margin-top:6px;
}

/* Part B: details with image + links (วิสัยทัศน์) */
.about-details{
  padding:60px 0 100px;
  position:relative;
}
.about-details-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}
.about-details-content h3{
  font-family:'Anuphan',sans-serif;
  font-size:clamp(24px,2.8vw,36px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
  margin-bottom:22px;
  color:var(--ink);
}
.about-details-content h3 .thin{font-weight:200;color:var(--gray);display:block}
.about-details-content p{
  font-family:'Anuphan',sans-serif;
  font-size:16px;
  color:var(--dark-gray);
  line-height:1.75;
  margin-bottom:32px;
  font-weight:400;
  max-width:520px;
}
.about-details-content p strong{color:var(--ink);font-weight:500}

/* Link list */
.about-links{
  list-style:none;
  border-top:1px solid var(--light-gray);
}
.about-links li{border-bottom:1px solid var(--light-gray)}
.about-links a{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 0;
  font-family:'Anuphan',sans-serif;
  font-size:16px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.005em;
  transition:padding-left .35s ease,color .3s ease;
}
.about-links a:hover{
  color:var(--blue);
  padding-left:10px;
}
.about-links a .arrow{
  width:40px;height:40px;
  border:1px solid var(--mid-gray);
  border-radius:50%;
  display:grid;place-items:center;
  transition:.35s;
  color:var(--gray);
  flex-shrink:0;
}
.about-links a:hover .arrow{
  background:var(--blue);border-color:var(--blue);color:#fff;
  transform:rotate(-45deg);
}
.about-links svg{width:14px;height:14px}
.about-details-visual{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
}
.about-details-visual img{width:100%;height:100%;object-fit:cover}

/* ========== PRODUCTS / CAPABILITIES ========== */
.products{
  background:var(--off-white);
  position:relative;
  overflow:hidden;
}
.products::before{
  content:"";
  position:absolute;
  top:-40px;right:-80px;
  width:520px;height:400px;
  background-image:url('element-2.svg');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:top right;
  opacity:.12;
  pointer-events:none;
  z-index:0;
}
.products::after{
  content:"";
  position:absolute;
  bottom:-60px;left:-100px;
  width:360px;height:300px;
  background-image:url('element-1.svg');
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.18;
  pointer-events:none;
  z-index:0;
  transform:rotate(-8deg);
}
.products > .container{position:relative;z-index:1}
.products-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
  margin-bottom:44px;
}
.products-head .right{
  margin-top:40px;
}
.products-head .right p{
  font-size:16px;
  color:var(--dark-gray);
  line-height:1.25;
  font-weight:300;
}
.products-head .right .btn-pill{
  margin-top:40px;
}
.products-head .right .view-all{
  display:inline-flex;align-items:center;gap:14px;
  margin-top:24px;
  font-family:'Anuphan',sans-serif;
  font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);
  padding-bottom:6px;
  border-bottom:1px solid var(--ink);
  transition:all .3s;
}
.products-head .right .view-all:hover{gap:20px}

/* ========== Horizontal Expanding Accordion ========== */
.product-accordion{
  display:grid;
  grid-template-columns:3.6fr 1fr 1fr 1fr 1fr 1fr;
  gap:6px;
  height:440px;
  width:100%;
  transition:grid-template-columns 1.1s cubic-bezier(.645,.045,.355,1);
}

/* Dynamic grid states via data-active attribute */
.product-accordion[data-active="0"]{grid-template-columns:3.6fr 1fr 1fr 1fr 1fr 1fr}
.product-accordion[data-active="1"]{grid-template-columns:1fr 3.6fr 1fr 1fr 1fr 1fr}
.product-accordion[data-active="2"]{grid-template-columns:1fr 1fr 3.6fr 1fr 1fr 1fr}
.product-accordion[data-active="3"]{grid-template-columns:1fr 1fr 1fr 3.6fr 1fr 1fr}
.product-accordion[data-active="4"]{grid-template-columns:1fr 1fr 1fr 1fr 3.6fr 1fr}
.product-accordion[data-active="5"]{grid-template-columns:1fr 1fr 1fr 1fr 1fr 3.6fr}

.product-panel{
  position:relative;
  min-width:0;
  overflow:hidden;
  cursor:pointer;
  background:var(--off-white);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

/* Background image layer */
.product-bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  filter:grayscale(100%) brightness(.65);
  transition:filter 1.1s cubic-bezier(.645,.045,.355,1);
  z-index:1;
  will-change:filter;
}
.product-panel.active .product-bg{
  filter:grayscale(0%) brightness(.88);
}

/* Gradient overlay */
.product-panel::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,20,40,.15) 0%,
    rgba(10,20,40,.5) 55%,
    rgba(10,20,40,.92) 100%);
  z-index:2;
  transition:opacity 1.1s cubic-bezier(.645,.045,.355,1);
}
.product-panel.active::before{
  background:linear-gradient(180deg,
    rgba(8,30,70,.1) 0%,
    rgba(8,30,70,.5) 55%,
    rgba(8,40,90,.95) 100%);
}

/* Blue accent line on top */
.product-panel::after{
  content:"";
  position:absolute;
  top:0;left:0;
  width:0;height:2px;
  background:var(--blue);
  z-index:4;
  transition:width 1.1s cubic-bezier(.645,.045,.355,1);
}
.product-panel.active::after{width:100%}

/* Vertical number + title (collapsed state) */
.product-panel-vertical{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:40px;
  gap:20px;
  transition:opacity .5s cubic-bezier(.645,.045,.355,1);
  pointer-events:none;
}
.product-panel.active .product-panel-vertical{
  opacity:0;
}
.product-panel-vertical .num{
  font-family:'Anuphan',sans-serif;
  font-weight:300;
  font-size:22px;
  color:rgba(255,255,255,.9);
  letter-spacing:.08em;
  line-height:1;
}
.product-panel-vertical .divider{
  width:1px;
  height:60px;
  background:rgba(255,255,255,.35);
}
.product-panel-vertical .vtitle{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:'Anuphan',sans-serif;
  font-weight:500;
  font-size:14px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
  white-space:nowrap;
}

/* Content (expanded state) - text stays put, just fades */
.product-content{
  position:relative;
  z-index:3;
  padding:0 40px 40px;
  color:var(--white);
  opacity:0;
  transition:opacity .6s cubic-bezier(.645,.045,.355,1);
  pointer-events:none;
  /* Keep text anchored, width constrained to expanded panel */
  width:100%;
  max-width:560px;
}
.product-panel.active .product-content{
  opacity:1;
  transition:opacity .7s cubic-bezier(.645,.045,.355,1) .3s;
  pointer-events:auto;
}

.product-content-num{
  display:block;
  font-family:'Anuphan',sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:.1.25em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  margin-bottom:14px;
}

.product-content h3{
  font-family:'Anuphan',sans-serif;
  font-weight:700;
  font-size:clamp(20px,2.2vw,30px);
  line-height:1.05;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:20px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.product-content-link{
  display:inline-flex;
  align-items:center;
  gap:16px;
  font-family:'Anuphan',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--white);
  padding-bottom:8px;
  transition:gap .4s ease;
}
.product-content-link:hover{
  gap:22px;
}

/* Corner indicators */
.product-panel .corner{
  position:absolute;
  width:12px;height:12px;
  border:1px solid rgba(255,255,255,.35);
  z-index:3;
  opacity:0;
  transition:opacity .6s cubic-bezier(.645,.045,.355,1);
}
.product-panel.active .corner{
  opacity:1;
  transition:opacity .7s cubic-bezier(.645,.045,.355,1) .4s;
}
.corner.tl{top:18px;left:18px;border-right:none;border-bottom:none}
.corner.tr{top:18px;right:18px;border-left:none;border-bottom:none}
.corner.bl{bottom:18px;left:18px;border-right:none;border-top:none}
.corner.br{bottom:18px;right:18px;border-left:none;border-top:none}

/* Instruction hint */
.product-hint{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px;
  font-family:'Anuphan',sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gray);
}
.product-hint::before{
  content:"";
  display:block;
  width:28px;height:1px;
  background:var(--blue);
}
.product-hint .pulse{
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--blue);
  margin-left:4px;
  animation:pulsedot 1.8s ease-in-out infinite;
}
@keyframes pulsedot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(1.6)}
}

/* ========== PRODUCT HIGHLIGHTS (2x2 Grid) ========== */
.products-head-v2{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  margin-bottom:32px;
  flex-wrap:nowrap;
}
.products-mega-title{
  font-family:'Anuphan',sans-serif;
  font-weight:800;
  font-size:clamp(28px,4.6vw,58px);
  line-height:1;
  letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1.2px rgba(26,26,26,.22);
  text-stroke:1.2px rgba(26,26,26,.22);
  text-transform:uppercase;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
  min-width:0;
}
.products-mega-title span{
  color:transparent;
  -webkit-text-stroke:1.2px rgba(26,26,26,.22);
  margin-left:.3em;
}
.products-view-all{
  flex-shrink:0;
}

/* Mobile responsive: mirror allpage-3/products.html inline <style> verbatim. */
@media(max-width:680px){
  .product-grid{grid-template-columns:1fr !important;gap:24px !important;}
  .product-card{aspect-ratio:16/9 !important;}
}

/* "Other Products" (rb-other) dark variant + mobile head-stack — mirrors
   allpage-3/product-cctv.html inline <style>. */
.rb-other .products-mega-title,
.rb-other .products-mega-title span{
  -webkit-text-stroke:1.2px rgba(255,255,255,.35);
  text-stroke:1.2px rgba(255,255,255,.35);
}
.rb-other .products-mega-title span{color:#fff;-webkit-text-stroke:0;}
.rb-other .products-view-all{color:#fff;border-color:rgba(255,255,255,.25);}
.rb-other .products-view-all:hover{background:#fff;color:#0a0e14;}
.rb-other::before,.rb-other::after{opacity:.06;filter:invert(1);}
@media(max-width:680px){
  .rb-other .products-head-v2{flex-direction:column !important;align-items:flex-start !important;gap:20px !important;}
  .rb-other .products-mega-title{white-space:normal !important;overflow:visible !important;
    text-overflow:clip !important;word-break:keep-all !important;overflow-wrap:normal !important;
    text-align:left !important;}
  .rb-other .products-mega-title span{display:inline-block;margin-left:0 !important;}
  .rb-other .product-grid{grid-template-columns:1fr !important;gap:24px !important;}
  .rb-other .product-card{aspect-ratio:16/9 !important;}
}

/* Grid 2x2 — full-width breakout */
.product-grid-wide{
  width:100%;
  padding:0;
  margin-bottom:60px;
  position:relative;
  z-index:1;
}
.product-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  max-width:100%;
  margin:0 auto;
}
/* "Other products" section on product-detail pages shows 3 cards.
   Cards are narrower than the 2-col grid, so scale the content down to keep
   the same visual proportions as on the other pages. */
@media(min-width:1025px){
  .rb-other .product-grid{grid-template-columns:repeat(3,1fr);}
}
.rb-other .product-card-content{left:24px;right:24px;bottom:24px;gap:10px;}

/* Pyramid layout (6-col grid with explicit placement) */
.product-grid--pyramid{grid-template-columns:repeat(6,1fr);}
.product-grid--pyramid > .product-card{aspect-ratio:auto;height:clamp(320px,27vw,400px);}
.product-grid--pyramid > .product-card:nth-child(1){grid-row:1;grid-column:1/7;}
.product-grid--pyramid > .product-card:nth-child(2){grid-row:2;grid-column:1/4;}
.product-grid--pyramid > .product-card:nth-child(3){grid-row:2;grid-column:4/7;}
.product-grid--pyramid > .product-card:nth-child(4){grid-row:3;grid-column:1/3;}
.product-grid--pyramid > .product-card:nth-child(5){grid-row:3;grid-column:3/5;}
.product-grid--pyramid > .product-card:nth-child(6){grid-row:3;grid-column:5/7;}
.product-grid--pyramid .product-card-title{white-space:wrap;font-size:clamp(15px,1.4vw,21px);}
.rb-other .product-card-tag{font-size:10px;letter-spacing:.18em;padding:5px 12px;}
.rb-other .product-card-title{font-size:clamp(17px,1.3vw,21px);}
.rb-other .product-card-sub{font-size:13px;margin-top:4px;}
.rb-other .product-card-btn-circle{top:18px;right:18px;width:40px;height:40px;}
.product-card{
  position:relative;
  display:block;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#0a0e14;
  border-radius:14px;
  cursor:pointer;
  isolation:isolate;
  box-shadow:0 4px 20px rgba(15,33,139,.06);
  transition:box-shadow .6s cubic-bezier(.2,.8,.2,1),
             transform .6s cubic-bezier(.2,.8,.2,1);
}
.product-card:hover{
  box-shadow:0 24px 60px rgba(8,15,35,.35),
             0 8px 24px rgba(14,79,160,.18);
  transform:translateY(-6px);
}

/* Image fills entire card */
.product-card-img{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:transform 1.6s cubic-bezier(.2,.8,.2,1),
             filter .6s ease;
  z-index:1;
  filter:saturate(.92) brightness(.95);
}
.product-card:hover .product-card-img{
  transform:scale(1.08);
  filter:saturate(1.1) brightness(1.02);
}

/* Cinematic dark gradient from bottom */
.product-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg,
    rgba(8,15,35,0) 0%,
    rgba(8,15,35,0) 35%,
    rgba(8,15,35,.55) 65%,
    rgba(8,15,35,.92) 100%);
  transition:background .5s ease;
}
.product-card:hover::before{
  background:linear-gradient(180deg,
    rgba(8,15,35,.05) 0%,
    rgba(8,15,35,.2) 35%,
    rgba(15,33,139,.65) 70%,
    rgba(15,33,139,.95) 100%);
}

/* Blue accent line at bottom */
.product-card::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;height:3px;
  background:linear-gradient(90deg,var(--blue) 0%,#3a7adf 50%,var(--blue) 100%);
  z-index:5;
  transition:width 1s cubic-bezier(.2,.8,.2,1);
}
.product-card:hover::after{ width:100%; }

/* Content positioned at bottom-left */
.product-card-content{
  position:absolute;
  z-index:4;
  left:32px;right:32px;bottom:30px;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.product-card-tag{
  display:inline-block;
  font-family:'Anuphan',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#fff;
  padding:6px 14px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:background .45s ease,
             border-color .45s ease,
             transform .55s cubic-bezier(.2,.8,.2,1);
}
.product-card:hover .product-card-tag{
  background:#fff;
  border-color:#fff;
  color:var(--blue-dark);
  transform:translateY(-2px);
}
.product-card-title{
  font-family:'Anuphan',sans-serif;
  font-weight:700;
  font-size:clamp(20px,1.9vw,28px);
  color:#fff;
  letter-spacing:-.015em;
  line-height:1.15;
  margin:0;
  max-width:95%;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.product-card:hover .product-card-title{
  transform:translateY(-2px);
}

/* Round arrow button - top right */
.product-card-content::after{
  display:none;
}
.product-card-btn-circle{
  position:absolute;
  top:24px;right:24px;
  z-index:5;
  width:46px;height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.4);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:grid;
  place-items:center;
  color:#fff;
  opacity:0;
  transform:translate(8px,-8px) scale(.85);
  transition:opacity .5s cubic-bezier(.2,.8,.2,1),
             transform .55s cubic-bezier(.2,.8,.2,1),
             background .35s ease,
             border-color .35s ease;
}
.product-card-btn-circle svg{
  width:16px;height:16px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.product-card:hover .product-card-btn-circle{
  opacity:1;
  transform:translate(0,0) scale(1);
}
.product-card:hover .product-card-btn-circle:hover{
  background:#fff;
  border-color:#fff;
  color:var(--blue-dark);
}
.product-card:hover .product-card-btn-circle svg{
  transform:rotate(-45deg);
}

/* ========== PARTNER MARQUEE (auto-scrolling, full width) ========== */
/* ========== PARTNER MARQUEE (auto-scrolling, full width) ========== */
.partners-section{
  position:relative;
  max-width: 1200px;
  width:100%;
  margin: 0 auto;
  padding:0 0 60px;
  background:transparent;
  overflow:hidden;
}

.partner-marquee{
  position:relative;
  width:100%;
  overflow:hidden;
  /* Soft fade on both edges */
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0,
    #000 10%,
    #000 90%,
    transparent 100%);
  mask-image:linear-gradient(90deg,
    transparent 0,
    #000 10%,
    #000 90%,
    transparent 100%);
}
.partner-marquee-track{
  display:flex;
  align-items:center;
  gap:96px;
  width:max-content;
  animation:partnerScroll 40s linear infinite;
  will-change:transform;
}
.partner-marquee:hover .partner-marquee-track{
  animation-play-state:paused;
}
.partner-logo{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Fixed box — every logo gets identical space */
  width:140px;
  height:52px;
  transition:filter .35s ease, opacity .35s ease, transform .4s cubic-bezier(.2,.8,.2,1);
  cursor:default;
  opacity:.5;
  filter:grayscale(100%);
}
.partner-logo img{
  /* Fill the box without distortion, padding balances visual weight */
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  padding:8px 12px;
}
.partner-logo:hover{
  opacity:1;
  filter:grayscale(0%);
  transform:translateY(-2px);
}
@keyframes partnerScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .partner-marquee-track{ animation:none; }
}

/* ========== CERTIFICATE ========== */
.cert{
  background:var(--off-white);
  position:relative;
  overflow:hidden;
}
/* Inline SVG element container - absolute centered */
.cert-bg-svg{
  position:absolute;
  top:50%;left:50%;
  width:100%;max-width:1400px;
  aspect-ratio:273.28 / 218.75;
  transform:translate(-50%,-50%) translateY(var(--parallax-y,0));
  transition:transform .25s linear;
  pointer-events:none;
  z-index:0;
  opacity:.05;
}
.cert-bg-svg svg{
  width:100%;
  height:100%;
  display:block;
}
.cert-bg-svg svg .st0{
  stroke:#0e4fa0 !important;
  stroke-width:.22 !important;
  fill:none !important;
}
.cert-bg-svg svg .st1{opacity:1 !important}
.cert-bg-svg svg .st2{fill:#0e4fa0 !important}

/* Subtle radial spotlight behind */
.cert::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:1200px;height:800px;
  background:radial-gradient(ellipse,rgba(14,79,160,.05),transparent 65%);
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:0;
}
.cert > .container{position:relative;z-index:2}
.cert-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
  margin-bottom:44px;
}
.cert-head p{
  font-size:16px;color:var(--dark-gray);
  line-height:1.5;font-weight:300;
  max-width:480px;
  /* Align first line of p with first line of heading (skip section-label) */
  margin-top:48px;
}
.cert-head-right{
  margin-top:48px;
  display:flex;flex-direction:column;align-items:flex-start;gap:40px;
}
.cert-head-right p{
  font-size:16px;color:var(--dark-gray);
  line-height:1.5;font-weight:300;
  max-width:480px;
  margin-top:0;
}
.cert-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  border-top:1px solid rgba(0,0,0,.08);
  border-left:1px solid rgba(0,0,0,.08);
  position:relative;
  z-index:2;
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  box-shadow:0 20px 60px -30px rgba(0,0,0,.08);
}
.cert-card{
  border-right:1px solid rgba(0,0,0,.08);
  border-bottom:1px solid rgba(0,0,0,.08);
  padding:24px 24px 28px;
  display:flex;flex-direction:column;
  justify-content: flex-start;
  gap:18px;
  transition:background .4s;
  position:relative;
  overflow:hidden;
  background:transparent;
}
.cert-card:hover{background:rgba(255,255,255,.7)}
.cert-card::before{
  content:"";position:absolute;
  top:0;left:0;width:0;height:2px;
  background:var(--blue);
  transition:width .5s ease;
}
.cert-card:hover::before{width:100%}
.cert-card .cert-img{
  width:100%;
  aspect-ratio: 4 / 3;
  background:#f4f6f9;
  border:1px solid rgba(0,0,0,.06);
  border-radius:6px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s ease, box-shadow .5s ease;
}
.cert-card .cert-img img{
  width:100%;height:100%;
  object-fit:contain;
  padding:10px;
  transition:transform .6s ease;
}
.cert-card:hover .cert-img{
  box-shadow:0 10px 30px -15px rgba(0,0,0,.18);
}
.cert-card:hover .cert-img img{
  transform:scale(1.04);
}
.cert-card .num{
  font-family:'Anuphan',sans-serif;
  font-weight:200;font-size:42px;
  letter-spacing:-.02em;line-height:.9;
  color:var(--ink);
}
.cert-card .num small{
  display:block;font-size:12px;font-weight:500;
  letter-spacing:.18em;color:var(--blue);
  margin-bottom:6px;
}
.cert-card .label{
  font-family:'Anuphan',sans-serif;
  font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gray);
  margin-bottom:10px;
}
.cert-card h4{
  font-family:'Anuphan',sans-serif;
  font-size:14px;font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
  line-height:1.3;
  margin-bottom:auto;
}
.cert-card .date{
  font-size:12px;color:var(--gray);
  margin-top:12px;
}

/* ========== NEWS ========== */
.news{
  background:var(--white);
  position:relative;
  overflow:hidden;
}
.news::before{
  content:"";
  position:absolute;
  top:60px;right:-100px;
  width:440px;height:340px;
  background-image:url('element-2.svg');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:top right;
  opacity:.1;
  pointer-events:none;
  z-index:0;
}
.news > .container{position:relative;z-index:1}
.news-head{
  display:flex;align-items:end;justify-content:space-between;
  margin-bottom:44px;gap:60px;flex-wrap:wrap;
}
.news-head h2{margin-bottom:0}
.news-head .view-all{
  display:inline-flex;align-items:center;gap:14px;
  font-family:'Anuphan',sans-serif;
  font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);
  padding-bottom:6px;
  border-bottom:1px solid var(--ink);
  transition:all .3s;
}
.news-head .view-all:hover{gap:20px}

.news-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px 24px;
}
.news-item{
  display:flex;flex-direction:column;
  cursor:pointer;
}
.news-img{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--light-gray);
  margin-bottom:16px;
  position:relative;
  border-radius:14px;
}
.news-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.5s ease;
}
.news-item:hover .news-img img{transform:scale(1.08)}
.news-img::after{
  content:"";position:absolute;inset:0;
  background:rgba(14,79,160,0);
  transition:background .4s;
}
.news-item:hover .news-img::after{background:rgba(14,79,160,.08)}
.news-date{
  font-family:'Anuphan',sans-serif;
  font-size:12px;font-weight:500;
  letter-spacing:.10em;text-transform:uppercase;
  color:var(--gray);
  margin-bottom:10px;
}
.news-title{
  font-family:'Anuphan',sans-serif;
  font-weight:600;font-size:16px;
  line-height:1.45;
  color:var(--ink);
  margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
  transition:color .3s;
}
.news-item:hover .news-title{color:var(--blue)}
.news-excerpt{
  font-size:14px;
  color:var(--gray);
  line-height:1.55;
  margin-bottom:14px;
  font-weight:300;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.news-more{
  font-family:'Anuphan',sans-serif;
  font-size:12px;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;
  color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;
  margin-top:auto;
  transition:gap .3s;
}
.news-item:hover .news-more{gap:12px}

/* ===== News Video Block (showcase before grid) ===== */
.news-video-block{
  margin-bottom:60px;
}
.news-video-main{
  aspect-ratio:21/9;
  width:100%;
  border-radius:14px;
  box-shadow:0 18px 50px -22px rgba(14,79,160,.35);
}

/* ========== VIDEO SECTION (2-column layout) ========== */
.video-section{
  position:relative;
  padding:100px 0;
  background:var(--blue-light);
  color:var(--white); 
  overflow:hidden;
}
.video-bg{
  position:absolute;inset:0;
  z-index:1;
  opacity:.25;
}
.video-bg img{
  width:100%;height:100%;object-fit:cover;
}
.video-section::before{
  content:"";
  position:absolute;
  top:-80px;right:-120px;
  width:600px;height:450px;
  background-image:url('element-1.svg');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:top right;
  opacity:.12;
  z-index:2;
  pointer-events:none;
  filter:invert(1);
  transform:translateY(var(--parallax-y,0));
  transition:transform .2s linear;
}
.video-section::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,.6));
  z-index:2;
}
.video-section .container{position:relative;z-index:3}

/* 2-column grid: text left | video right */
.video-inner{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:70px;
  align-items:center;
}
.video-content .kicker{
  color:rgba(255,255,255,.7);
  margin-bottom:20px;
}
.video-content .kicker::before{
  background:rgba(255,255,255,.7);
}
.video-content h2{
  font-family:'Anuphan',sans-serif;
  font-weight:700;
  font-size:clamp(28px,3.4vw,46px);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--white);
  margin-bottom:24px;
}
.video-content h2 .thin{
  font-weight:200;
  color:rgba(255,255,255,.55);
  display:block;
}
.video-content h2 em{
  font-style:italic;font-weight:500;
  color:var(--white);
}
.video-content p{
  font-family:'Anuphan',sans-serif;
  font-size:16px;
  color:rgba(255,255,255,.75);
  line-height:1.75;
  font-weight:300;
  margin-bottom:32px;
  max-width:480px;
}
.video-content .video-meta{
  display:flex;gap:32px;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.15);
}
.video-content .video-meta-item .l{
  font-family:'Anuphan',sans-serif;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:6px;
}
.video-content .video-meta-item .v{
  font-family:'Anuphan',sans-serif;
  font-size:18px;
  font-weight:600;
  color:var(--white);
}

/* Video player on right */
.video-player{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:14px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
.video-player iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
}
.video-player .video-thumb{
  position:absolute;inset:0;
  cursor:pointer;
  z-index:2;
}
.video-player .video-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s ease;
}
.video-player .video-thumb:hover img{transform:scale(1.05)}
.video-player .video-thumb::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.5) 100%);
  z-index:1;
}
.video-player .play-btn{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:50px;height:50px;
  border:1.5px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:50%;
  display:grid;place-items:center;
  z-index:2;
  color:var(--white);
  transition:all .4s;
}
.video-player .video-thumb:hover .play-btn{
  background:var(--white);
  color:var(--ink);
  transform:translate(-50%,-50%) scale(1.08);
  border-color:var(--white);
}
.video-player.playing .video-thumb{display:none}

/* Small secondary video below paragraph */
.video-player-small{
  aspect-ratio:16/9;
  border-radius:14px;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.5);
  margin-top:0;
  max-width:none;
}
.video-thumbs-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.video-thumbs-grid .video-player-small{
  width:100%;
}
.play-btn-small{
  width:8px;height:8px;
  border-width:1.2px;
}
.play-btn-small svg{
  margin-left:2px;
  width:13px;height:14px;
}
@media (max-width: 640px){
  .video-thumbs-grid{gap:10px}
  .play-btn-small{width:16px;height:16px}
  .play-btn-small svg{width:11px;height:12px}
}
.contact-section {
    padding: 0;
    position: relative;
    overflow: hidden;
  }

  /* Top backdrop with office image slider */
  .contact-backdrop {
    position: relative;
    width: 100%;
    height: 520px;
    overflow: hidden;
    background: var(--c-ink);
  }
  .contact-backdrop-slides {
    position: absolute; inset: 0;
  }
  .contact-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    transform: scale(1.02);
  }
  .contact-slide.active {
    opacity: 100;
    animation: contactKenBurns 1s ease-out forwards;
  }
  @keyframes contactKenBurns {
    from { transform: scale(1.02); }
    to { transform: scale(1.08); }
  }
  /* Darkening overlay */
  .contact-backdrop::after {
    content: '';
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(10,14,26,.3) 0%, rgba(10,14,26,.45) 60%, rgba(10,14,26,.75) 100%);
    pointer-events: none;
    z-index: 1;
  }
  /* Overlay content: kicker + heading */
  .contact-backdrop-content {
    position: absolute;
    left: 0; right: 0; bottom: 48px;
    z-index: 2;
    pointer-events: none;
  }
  .contact-backdrop-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 48px;
  }
  .contact-backdrop .kicker {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,.9);
    font-weight: 500;
    margin-bottom: 14px;
    display: inline-flex; align-items: center; gap: 12px;
  }
  .contact-backdrop .kicker::before {
    content: ''; width: 24px; height: 1px; background: rgba(255,255,255,.7);
  }
  .contact-backdrop h2 {
    font-family: var(--font-display);
    font-size: clamp(30px, 3.8vw, 52px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: #fff;
    max-width: 700px;
  }
  .contact-backdrop h2 .thin {
    font-weight: 200;
    color: rgba(255,255,255,.75);
    display: block;
  }

  /* Slider controls (bottom right of backdrop) */
  .contact-slider-controls {
    position: absolute;
    right: 28px; bottom: 36px;
    z-index: 3;
    display: flex; gap: 0;
    pointer-events: auto;
  }
  .contact-slider-btn {
    width: 44px; height: 44px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    display: grid; place-items: center;
    cursor: pointer;
    transition: all .25s ease;
  }
  .contact-slider-btn + .contact-slider-btn { margin-left: -1px; }
  .contact-slider-btn:hover {
    background: var(--c-navy);
    border-color: var(--c-navy);
  }
  .contact-slider-btn svg { width: 14px; height: 14px; }

  /* Slide dots indicator */
  .contact-slider-dots {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 0;
  }
  .contact-slider-dots .dot {
    flex: 1;
    max-width: 120px;
    height: 3px;
    background: rgba(255,255,255,.2);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background .25s ease;
  }
  .contact-slider-dots .dot.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--c-blue-accent);
    transform-origin: left;
    animation: contactDotProgress 5s linear forwards;
  }
  @keyframes contactDotProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  .contact-slider-dots .dot:hover {
    background: rgba(255,255,255,.35);
  }

  /* Contact info grid below backdrop */
  .contact-info {
    background: var(--c-off-white);
    padding: 48px 0 60px;
    position: relative;
    overflow: hidden;
  }
  .contact-info-bg {
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-width: 720px;
    min-width: 420px;
    height: auto;
    opacity: .20;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  }
  .contact-info-bg svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .contact-info > .container {
    position: relative;
    z-index: 1;
  }
  .contact-info-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    align-items: start;
  }
  .contact-col {
    display: flex; flex-direction: column;
    gap: 12px;
  }
  .contact-col .label {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 2.2px;
    color: var(--c-navy);
    font-weight: 600;
    display: flex; align-items: center; gap: 10px;
  }
  .contact-col .label::before {
    content: ''; width: 14px; height: 1px; background: var(--c-navy);
  }
  .contact-col .value {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--c-ink);
    line-height: 1.65;
    font-weight: 400;
  }
  .contact-col .value strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--c-ink);
    margin-bottom: 4px;
    font-size: 16px;
  }
  .contact-col .value a {
    color: var(--c-ink);
    transition: color .25s ease;
  }
  .contact-col .value a:hover {
    color: var(--c-navy);
  }
  .contact-col .value .muted {
    color: var(--c-gray-500);
    font-size: 14px;
    margin-top: 6px;
    display: block;
  }

  /* CTA row at bottom */
  .contact-cta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
  }
  .contact-cta-row .cta-text {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--c-ink);
    flex: 1 1 auto;
    min-width: 0;
  }
  .contact-cta-row .cta-text .thin {
    font-weight: 300; color: var(--c-gray-500);
  }
  .contact-cta-row .btn-pill {
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
  }

/* ========== FOOTER (rvconnex-style dark, slim) ========== */
footer{
  background:#151821;
  color:rgba(255,255,255,.65);
  position:relative;
  overflow:hidden;
}
footer::after{
  content:'';position:absolute;
  bottom:-150px;left:-150px;
  width:500px;height:500px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(43,99,227,.08),transparent 65%);
  pointer-events:none;
}
/* Architectural line drawing as decorative footer background */
.footer-bg-art{
  position:absolute;
  right:-40px;
  top:0%;
  transform:translateY(-10%);
  width:720px;
  height:auto;
  opacity: 0.2;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 85%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 25%,#000 85%,transparent);
}
.footer-bg-art img{
  width:100%;
  height:auto;
  display:block;
  filter:invert(1) brightness(10);
}
.footer-main,.footer-bottom{
  position:relative;
  z-index:1;
}
.footer-main{
  padding-top:70px !important;
  padding-bottom:48px;
  position:relative;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1.2fr;
  gap:60px;
}
.footer-col{min-width:0}
.footer-brand .f-logo{
  display:flex;align-items:center;margin-bottom:28px;
}
.footer-brand .f-logo img{
  height:36px;
  width:auto;
  max-width:100%;
  display:block;
}
.footer-brand p{
  font-family:'Anuphan',sans-serif;
  font-size:16px;
  color:rgba(255,255,255,.55);
  line-height:1.8;
  font-weight:300;
  margin-bottom:28px;
  max-width:340px;
}
.footer-socials{display:flex;gap:10px}
.footer-socials a{
  width:40px;height:40px;
  border:none;
  border-radius:50%;
  display:grid;place-items:center;
  color:rgba(255,255,255,.75);
  transition:.25s;
  cursor:pointer;
}
.footer-socials a:hover{
  background:rgba(14,79,160,.3);
  color:#fff;
}
.footer-socials svg{width:15px;height:15px}

.footer-col h4{
  font-family:'Anuphan',sans-serif;
  font-size:12px;font-weight:600;
  color:#fff;
  letter-spacing:2px;
  margin-bottom:20px;
  display:inline-flex;align-items:center;gap:10px;
  text-transform:uppercase;
}
.footer-col h4::before{
  content:'';
  width:16px;height:1px;
  background:var(--blue);
}

.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col ul li {line-height: 1.6;}
.footer-col ul a{
  font-family:'Anuphan',sans-serif;
  font-size:14px;
  color:rgba(255,255,255,.6);
  font-weight:300;
  position:relative;
  padding-left:0;
  transition:.25s;
}
.footer-col ul a:hover{color:#fff;padding-left:14px}
.footer-col ul a::before{
  content:'';position:absolute;left:0;top:50%;
  width:0;height:1px;background:var(--blue);
  transition:.25s;
}
.footer-col ul a:hover::before{width:8px}

.footer-contact p{
  font-family:'Anuphan',sans-serif;
  font-size:14px;
  color:rgba(255,255,255,.6);
  line-height:1.75;
  font-weight:300;
  margin-bottom:16px;
}
.footer-contact p strong{
  display:block;
  color:rgba(255,255,255,.4);
  font-size:12px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  margin-bottom:4px;
  font-weight:500;
  font-family:'Anuphan',sans-serif;
}
.footer-contact a{color:rgba(255,255,255,.6)}
.footer-contact a:hover{color:#fff}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:24px 0;
  position:relative;
  background:rgba(0,0,0,.3);
}
.footer-bottom-inner{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;
  font-family:'Anuphan',sans-serif;
  font-size:14px;
  color:rgba(255,255,255,.45);
  font-weight:300;
}
.footer-bottom-inner .links{display:flex;gap:28px}
.footer-bottom-inner .links a{color:rgba(255,255,255,.45)}
.footer-bottom-inner .links a:hover{color:#fff}

/* ========== HAMBURGER MENU BUTTON ========== */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px !important;height:40px !important;
  cursor:pointer;
  background:none !important;border:none !important;
  padding:0 !important;
  z-index:200;
  flex-shrink:0;
}
.nav-toggle span{
  display:block;
  width:24px !important;height:1.5px !important;
  background:var(--white) !important;
  border-radius:2px !important;
  transition:transform .35s ease, opacity .25s ease, background .3s;
}
header.scrolled .nav-toggle span{background:var(--ink) !important}
.nav-toggle.open span:nth-child(1),
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2),
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle.open span:nth-child(3),
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ========== MOBILE NAV DRAWER ========== */
.mobile-nav{
  display:none;
  position:fixed;
  inset:0;
  z-index:150;
  pointer-events:none;
}
.mobile-nav.open,.mobile-nav.is-open{pointer-events:auto}

/* Backdrop */
.mobile-nav-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);
  opacity:0;
  transition:opacity .4s ease;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.mobile-nav.open .mobile-nav-backdrop,.mobile-nav.is-open .mobile-nav-backdrop{opacity:1}

/* Drawer panel */
.mobile-nav-panel{
  position:absolute;
  top:0;right:0;
  width:min(320px,85vw);
  height:100%;
  background:#fff;
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.77,0,.18,1);
  display:flex;flex-direction:column;
  overflow-y:auto;
}
.mobile-nav.open .mobile-nav-panel,.mobile-nav.is-open .mobile-nav-panel{transform:translateX(0)}

.mobile-nav-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;
  padding:20px 24px;
  border-bottom:1px solid var(--light-gray);
}
/* Logo sits left / vertically centred and scales down to the width left beside the close button */
.mobile-nav-head .m-logo{flex:0 1 auto;min-width:0}
.mobile-nav-head .m-logo img{height:32px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.mobile-nav-close,
button.mobile-nav-close{
  width:36px !important;height:36px !important;
  flex:0 0 auto;
  border-radius:50% !important;
  border:1px solid var(--light-gray) !important;
  display:grid;place-items:center;
  cursor:pointer;background:none !important;
  color:var(--ink) !important;
  padding:0 !important;
  transition:background .2s,border-color .2s,color .2s;
  outline:none !important;
  box-shadow:none !important;
}
.mobile-nav-close:hover,
button.mobile-nav-close:hover{background:var(--ink) !important;color:#fff !important;border-color:var(--ink) !important}
.mobile-nav-close:focus,
.mobile-nav-close:focus-visible,
.mobile-nav-close:active,
button.mobile-nav-close:focus,
button.mobile-nav-close:focus-visible,
button.mobile-nav-close:active{
  background:none !important;
  border-color:var(--light-gray) !important;
  color:var(--ink) !important;
  outline:none !important;
  box-shadow:none !important;
}
.mobile-nav-close:focus:hover,
.mobile-nav-close:focus-visible:hover,
button.mobile-nav-close:focus:hover,
button.mobile-nav-close:focus-visible:hover{
  background:var(--ink) !important;
  color:#fff !important;
  border-color:var(--ink) !important;
}
.mobile-nav-close svg{height:14px}

.mobile-nav-links{
  list-style:none;
  padding:12px 0;
  flex:1;
}
.mobile-nav-links li{
  border-bottom:1px solid var(--light-gray);
}
.mobile-nav-links a{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;
  font-family:'Anuphan',sans-serif;
  font-size:16px;font-weight:500;
  color:var(--ink);
  letter-spacing:.01em;
  transition:color .2s,padding-left .25s;
}
.mobile-nav-links a:hover{color:var(--blue);padding-left:30px}
.mobile-nav-links a .arrow{
  width:32px;height:32px;
  border:1px solid var(--light-gray);
  border-radius:50%;
  display:grid;place-items:center;
  color:var(--gray);
  transition:.25s;
  flex-shrink:0;
}
.mobile-nav-links a:hover .arrow{background:var(--blue);border-color:var(--blue);color:#fff}
.mobile-nav-links svg{width:12px;height:12px}

/* Contact button in mobile nav */
.mobile-nav-links li:last-child a{
  color:var(--blue);font-weight:600;
}

.mobile-nav-footer{
  padding:24px;
  border-top:1px solid var(--light-gray);
}
.mobile-nav-footer .lang-row{
  display:flex;align-items:center;gap:12px;
  font-family:'Anuphan',sans-serif;
  font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);
}
.mobile-nav-footer .lang-row a{opacity:.45;transition:opacity .2s}
.mobile-nav-footer .lang-row a.active{opacity:1}
.mobile-nav-footer .lang-row .sep{width:1px;height:12px;background:currentColor;opacity:.3}

/* ========== RESPONSIVE ========== */

/* ── Large Desktop 1400px+ ── */
@media(min-width:1400px){
  .container{padding:0 64px}
  .product-card-content{left:52px;right:52px;bottom:48px}
}

/* ── Tablet Landscape / Small Desktop  1024px–1200px ── */
@media(max-width:1200px){
  .container{padding:0 36px}
  .contact-backdrop-inner{padding:0 36px}
  nav.primary{display:none}
  .nav-toggle{display:flex}
  .mobile-nav{display:block}
  .lang{display:none}

  /* About */
  .about-unified-inner{grid-template-columns:1fr 1fr;gap:48px}
  .about-unified-visual{min-height:420px}
  .about-stats{grid-template-columns:repeat(3,1fr);gap:20px}
  .about-intro-inner,.about-details-inner{grid-template-columns:1fr 1fr;gap:40px}

  /* Products accordion */
  .product-accordion{height:420px}
  .product-content{padding:0 28px 32px}
  .about-top,.products-head,.cert-head{grid-template-columns:1fr;gap:40px}

  /* Product cards */
  .product-card-content{left:32px;right:32px;bottom:32px}

  /* Cert */
  .cert-grid{grid-template-columns:repeat(3,1fr)}

  /* News */
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .news-video-main{aspect-ratio:16/9}

  /* Video */
  .video-grid{grid-template-columns:repeat(2,1fr)}
  .video-inner{grid-template-columns:1fr;gap:48px}
  .video-content p{max-width:none}

  /* Footer */
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}

  /* Hero */
  .hero-meta{display:none}

  /* Partners */
  .partner-marquee-track{gap:64px}
  .partner-logo{width:120px;height:46px}
  .partner-logo img{padding:6px 10px}
}

/* ── Tablet Portrait  768px–1024px ── */
@media(max-width:1024px){
  .about-unified-inner{grid-template-columns:1fr;gap:40px}
  .about-unified-visual{min-height:360px;order:0}
  .about-intro-inner,.about-details-inner{grid-template-columns:1fr;gap:32px}

  /* Products head */
  .products-head-v2{padding:64px 0 44px}
  .products-mega-title{font-size:clamp(36px,6vw,64px)}

  /* Contact */
  .contact-info-inner{grid-template-columns:1fr 1fr;gap:32px}

  /* Footer */
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1/-1}
}

/* ── Tablet / Large Mobile  768px–820px ── */
@media(max-width:820px){
  /* Products accordion — vertical */
  .product-accordion{
    grid-template-columns:1fr !important;
    grid-template-rows:90px 90px 90px 90px 90px 90px;
    height:auto;
    gap:4px;
    transition:grid-template-rows 1.1s cubic-bezier(.645,.045,.355,1);
  }
  .product-accordion[data-active="0"]{grid-template-rows:400px 72px 72px 72px 72px 72px}
  .product-accordion[data-active="1"]{grid-template-rows:72px 400px 72px 72px 72px 72px}
  .product-accordion[data-active="2"]{grid-template-rows:72px 72px 400px 72px 72px 72px}
  .product-accordion[data-active="3"]{grid-template-rows:72px 72px 72px 400px 72px 72px}
  .product-accordion[data-active="4"]{grid-template-rows:72px 72px 72px 72px 400px 72px}
  .product-accordion[data-active="5"]{grid-template-rows:72px 72px 72px 72px 72px 400px}
  .product-panel-vertical{
    flex-direction:row;
    padding-top:0;padding-left:24px;
    align-items:center;justify-content:flex-start;gap:16px;
  }
  .product-panel-vertical .divider{width:30px;height:1px}
  .product-panel-vertical .vtitle{writing-mode:horizontal-tb;transform:none;font-size:12px}
  .product-content{padding:0 24px 24px}
  .product-content h3{font-size:22px;white-space:normal}

  /* Product grid cards */
  .product-card{aspect-ratio:3/2}
  .product-card-content{left:28px;right:28px;bottom:28px}
}

/* ── Mobile  ≤ 720px ── */
@media(max-width:720px){
  .container{padding:0 20px}
  .contact-backdrop-inner{padding:0 20px}

  /* Hero */
  .hero h1{font-size:clamp(34px,11vw,56px)}
  .hero-lede{font-size:16px;max-width:100%}
  .hero-scroll{display:none}
  .hero-content{max-width:100%}

  /* About */
  .about-unified{padding:56px 0}
  .about-unified-inner{gap:32px}
  .about-unified-visual{min-height:260px}
  .about-stats{grid-template-columns:repeat(3,1fr);gap:12px}
  .about-stats .h-num{font-size:clamp(22px,6vw,32px)}
  .about-intro{padding:64px 0 32px}
  .about-details{padding:32px 0 64px}
  .about-intro-inner,.about-details-inner{gap:28px}

  /* Product Highlights */
  /* Mobile: title takes the full row, "view all" button drops to its own row, left-aligned */
  .products-head-v2{padding:48px 0 36px;gap:16px;flex-direction:column;align-items:flex-start}
  .products-mega-title{font-size:clamp(28px,10vw,48px);white-space:normal;letter-spacing:-.03em;flex:0 0 auto;align-self:stretch}
  .product-grid{grid-template-columns:1fr;}
  .rb-other .product-grid{grid-template-columns:1fr;}
  .product-grid--pyramid{grid-template-columns:1fr;}
  .product-grid--pyramid > .product-card:nth-child(1),
  .product-grid--pyramid > .product-card:nth-child(2),
  .product-grid--pyramid > .product-card:nth-child(3),
  .product-grid--pyramid > .product-card:nth-child(4),
  .product-grid--pyramid > .product-card:nth-child(5),
  .product-grid--pyramid > .product-card:nth-child(6){grid-row:auto;grid-column:auto;}
  .product-grid--pyramid > .product-card{aspect-ratio:4/3;height:auto;}
  .product-card{aspect-ratio:4/3}
  .product-card-content{left:20px;right:20px;bottom:20px;gap:10px}
  .product-card-title{font-size:20px}
  .product-card-tag{font-size:10px;padding:5px 12px;letter-spacing:.15em}
  .product-card-btn-circle{width:40px;height:40px;top:16px;right:16px;opacity:1;transform:none}
  .product-card-btn-circle svg{width:13px;height:13px}
  .product-grid-footer{padding:32px 0 48px}

  /* Cert */
  .cert-grid{grid-template-columns:repeat(2,1fr);gap:12px}

  /* Partners */
  .partners-section{padding:36px 0 44px}
  .partner-marquee-track{gap:40px;animation-duration:24s}
  .partner-logo{width:100px;height:40px}
  .partner-logo img{padding:6px 8px}

  /* News */
  .news-grid{grid-template-columns:1fr}
  .video-grid{grid-template-columns:1fr}
  .video-meta{flex-wrap:wrap;gap:20px !important}
  .news-head{flex-direction:column;align-items:flex-start;gap:20px}
  .news-video-block{margin-bottom:36px}

  /* Contact */
  .contact-info-inner{grid-template-columns:1fr;gap:24px}
  .contact-cta-row{flex-direction:column;align-items:flex-start;gap:20px}
  .contact-cta-row .btn-pill{margin-left:0}

  /* Footer */
  .footer-grid{grid-template-columns:1fr;gap:40px}
  .footer-brand{grid-column:auto}
  /* Mobile only: swap the decorations — glow goes top-right, line art drops to the bottom */
  footer::after{top:-150px;right:-150px;bottom:auto;left:auto}
  .footer-bg-art{top:auto;bottom:0;transform:none}
  .footer-bottom-inner{flex-direction:column;align-items:flex-start;gap:12px;text-align:left}
  .footer-bottom-inner .links{flex-wrap:wrap;gap:16px}

  /* Buttons */
  .btn-pill{padding:12px 24px;font-size:13px}
  .btn-pill-secondary{padding:10px 20px;font-size:13px;gap:8px}

  /* Decorative SVG elements */
  .products::before,.products::after,.hero-element{display:none}
}

/* ── Small Mobile  ≤ 480px ── */
@media(max-width:480px){
  .container{padding:0 16px}
  .contact-backdrop-inner{padding:0 16px}

  /* Hero */
  .hero h1{font-size:clamp(30px,12vw,48px);letter-spacing:-.025em}
  .hero-lede{font-size:15px}
  .hero-link{padding:12px 22px;font-size:13px}

  /* About stats — 3 col squeezed */
  .about-stats{gap:8px}
  .about-stats .h-num{font-size:clamp(20px,7vw,28px)}
  .about-stats .h-label{font-size:12px}

  /* Product Highlights */
  .products-head-v2{padding:40px 0 28px}
  .products-mega-title{font-size:clamp(26px,11vw,40px)}
  .product-card{aspect-ratio:1/1}
  .product-card-content{left:18px;right:18px;bottom:18px}
  .product-card-title{font-size:18px}

  /* Cert */
  .cert-grid{grid-template-columns:1fr 1fr;gap:10px}

  /* Partners */
  .partner-marquee-track{gap:28px;animation-duration:20s}
  .partner-logo{width:80px;height:34px}
  .partner-logo img{padding:4px 6px}

  /* News */
  .news-title{font-size:16px}
  .news-excerpt{font-size:13px}

  /* Footer */
  .footer-main{padding-top:48px;padding-bottom:36px}
  .footer-bottom-inner .links{gap:12px;font-size:12px}
  .footer-bottom-inner{font-size:12px}
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
.hero-eyebrow,.hero h1,.hero-lede,.hero-link{
  animation:fadeIn 1.2s cubic-bezier(.2,.8,.2,1) backwards;
}
.hero h1{animation-delay:.15s}
.hero-lede{animation-delay:.3s}
.hero-link{animation-delay:.45s}

/* ===== Inner page additions ===== */
.page-hero{position:relative;padding:180px 0 80px;background:var(--blue-light);overflow:hidden;}
.page-hero::before{content:"";position:absolute;top:-80px;right:-100px;width:560px;height:420px;background:radial-gradient(circle at 30% 30%, rgba(14,79,160,.15), transparent 70%);pointer-events:none;}
.page-hero::after{content:"";position:absolute;bottom:-60px;left:-80px;width:420px;height:340px;background:radial-gradient(circle at 70% 70%, rgba(215,25,33,.06), transparent 70%);pointer-events:none;}
.page-hero .container{position:relative;z-index:2}
.page-hero .breadcrumb{font-family:'Anuphan',sans-serif;font-size:13px;font-weight:500;color:var(--gray);margin-bottom:24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.page-hero .breadcrumb a{color:var(--gray);transition:color .25s;}
.page-hero .breadcrumb a:hover{color:var(--blue)}
.page-hero .breadcrumb .sep{opacity:.5;}
.page-hero .breadcrumb .current{color:var(--blue);font-weight:600}
.page-hero h1{font-family:'Anuphan',sans-serif;font-weight:700;font-size:clamp(36px,5vw,68px);line-height:1.04;letter-spacing:-.02em;color:var(--ink);margin-bottom:20px;}
.page-hero h1 .thin{font-weight:200;color:var(--blue);display:block;}
.page-hero .lede{font-family:'Anuphan',sans-serif;font-size:18px;color:var(--dark-gray);line-height:1.7;max-width:680px;font-weight:300;}
@media(max-width:680px){.page-hero{padding:140px 0 60px}.page-hero h1{font-size:32px}.page-hero .lede{font-size:15px}}

.section{padding:90px 0;position:relative;}
.section-alt{background:var(--off-white)}
@media(max-width:680px){.section{padding:60px 0}}

.section-head{text-align:center;max-width:760px;margin:0 auto 56px;}
.section-head .kicker{justify-content:center}
.section-head h2{font-family:'Anuphan',sans-serif;font-size:clamp(28px,3.4vw,46px);font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--ink);margin-bottom:18px;}
.section-head h2 .thin{font-weight:200;color:var(--gray);display:block;}
.section-head p{font-size:16px;color:var(--dark-gray);line-height:1.7;max-width:600px;margin:0 auto;}

.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.cat-card{position:relative;background:var(--white);border:1px solid var(--light-gray);border-radius:12px;overflow:hidden;transition:transform .4s,box-shadow .4s,border-color .4s;display:flex;flex-direction:column;}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(14,79,160,.08);border-color:var(--blue);}
.cat-card-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--light-gray);}
.cat-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1);}
.cat-card:hover .cat-card-img img{transform:scale(1.05)}
.cat-card-num{position:absolute;top:14px;left:14px;width:42px;height:42px;background:rgba(255,255,255,.95);color:var(--blue);border-radius:50%;display:grid;place-items:center;font-family:'Anuphan',sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;backdrop-filter:blur(8px);}
.cat-card-body{padding:24px 26px 28px;flex:1;display:flex;flex-direction:column;}
.cat-card-tag{display:inline-block;font-family:'Anuphan',sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.cat-card-title{font-family:'Anuphan',sans-serif;font-weight:600;font-size:20px;line-height:1.25;color:var(--ink);margin-bottom:10px;letter-spacing:-.01em;}
.cat-card-desc{font-size:14px;color:var(--gray);line-height:1.65;margin-bottom:18px;flex:1;}
.cat-card-link{display:inline-flex;align-items:center;gap:10px;font-family:'Anuphan',sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--blue);margin-top:auto;align-self:flex-start;transition:gap .3s;}
.cat-card-link:hover{gap:16px}
.cat-card-link svg{width:18px;height:18px;}
@media(max-width:980px){.cat-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:560px){.cat-grid{grid-template-columns:1fr;gap:18px}}

.list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.list-card{position:relative;background:var(--white);border:1px solid var(--light-gray);border-radius:12px;overflow:hidden;transition:transform .35s,box-shadow .35s,border-color .35s;display:flex;flex-direction:column;}
.list-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.07);border-color:var(--blue);}
.list-card-img{aspect-ratio:4/3;overflow:hidden;background:var(--light-gray);position:relative;}
.list-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1);}
.list-card:hover .list-card-img img{transform:scale(1.06)}
.list-card-date{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);padding:6px 12px;border-radius:999px;font-family:'Anuphan',sans-serif;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--blue);}
.list-card-body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column;}
.list-card-cat{font-family:'Anuphan',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.list-card-title{font-family:'Anuphan',sans-serif;font-size:17px;font-weight:600;line-height:1.35;color:var(--ink);margin-bottom:10px;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.list-card-excerpt{font-size:14px;color:var(--gray);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:14px;}
.list-card-more{display:inline-flex;align-items:center;gap:8px;font-family:'Anuphan',sans-serif;font-size:13px;font-weight:600;color:var(--blue);margin-top:auto;letter-spacing:.04em;transition:gap .3s;}
.list-card-more:hover{gap:14px}
@media(max-width:980px){.list-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:560px){.list-grid{grid-template-columns:1fr}}

/* === Activity filter (year tabs) === */
/* Year pills stay on one row: when they don't fit they scroll sideways (swipe / mouse drag, see shared.js)
   instead of wrapping. Auto margins keep the row centred while it fits. The 5px/4px padding, cancelled by
   the negative margin, leaves room for the focus ring inside the scroll area. */
.activity-filter{display:flex;flex-wrap:nowrap;gap:10px;justify-content:flex-start;margin:-5px -4px 35px;padding:5px 4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}
.activity-filter::-webkit-scrollbar{display:none;}
.activity-filter > :first-child{margin-left:auto;}
.activity-filter > :last-child{margin-right:auto;}
/* State classes set by shared.js — shared with .cert-filter */
.activity-filter.is-scrollable,
.cert-filter.is-scrollable{cursor:grab;}
.activity-filter.is-dragging,
.activity-filter.is-dragging .activity-filter-btn,
.cert-filter.is-dragging,
.cert-filter.is-dragging .cert-filter-btn{cursor:grabbing;-webkit-user-select:none;user-select:none;}
.activity-filter.is-fade-end,
.cert-filter.is-fade-end{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);}
.activity-filter.is-fade-start,
.cert-filter.is-fade-start{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px);}
.activity-filter.is-fade-start.is-fade-end,
.cert-filter.is-fade-start.is-fade-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);}
button.activity-filter-btn,
.activity-filter-btn{font-family:'Anuphan',sans-serif;font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--dark-gray);background:transparent;border:1.5px solid var(--light-gray);border-radius:999px;padding:9px 22px;flex:0 0 auto;white-space:nowrap;cursor:pointer;transition:color .25s,background .25s,border-color .25s,transform .25s;-webkit-appearance:none;appearance:none;outline:none;box-shadow:none;}
button.activity-filter-btn.activity-filter-btn:focus,
button.activity-filter-btn.activity-filter-btn:active,
.activity-filter-btn.activity-filter-btn:focus,
.activity-filter-btn.activity-filter-btn:active{background:transparent!important;background-color:transparent!important;color:var(--dark-gray)!important;border-color:var(--light-gray)!important;outline:none;box-shadow:none;}
button.activity-filter-btn.activity-filter-btn:hover,
button.activity-filter-btn.activity-filter-btn:focus:hover,
.activity-filter-btn.activity-filter-btn:hover,
.activity-filter-btn.activity-filter-btn:focus:hover{background:transparent!important;background-color:transparent!important;color:var(--blue)!important;border-color:var(--blue)!important;}
button.activity-filter-btn.activity-filter-btn.is-active,
button.activity-filter-btn.activity-filter-btn.is-active:hover,
button.activity-filter-btn.activity-filter-btn.is-active:focus,
button.activity-filter-btn.activity-filter-btn.is-active:focus:hover,
.activity-filter-btn.activity-filter-btn.is-active,
.activity-filter-btn.activity-filter-btn.is-active:hover,
.activity-filter-btn.activity-filter-btn.is-active:focus,
.activity-filter-btn.activity-filter-btn.is-active:focus:hover{background:var(--blue)!important;background-color:var(--blue)!important;border-color:var(--blue)!important;color:var(--white)!important;}
.activity-filter-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.activity-empty{text-align:center;color:var(--gray);font-size:15px;padding:48px 0;font-family:'Anuphan',sans-serif;}

/* === Activity grid: editorial layout with framed images === */
.activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 28px;}
.activity-grid .list-card{position:relative;background:transparent;border:none;border-radius:0;overflow:visible;display:flex;flex-direction:column;transition:transform .35s;}
.activity-grid .list-card:hover{transform:none;box-shadow:none;border-color:transparent;}

/* Framed image */
.activity-grid .list-card-img{aspect-ratio:4/3;overflow:hidden;background:var(--light-gray);position:relative;border-radius:14px;border:1px solid var(--light-gray);}
.activity-grid .list-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1);}
.activity-grid .list-card:hover .list-card-img img{transform:scale(1.04)}

/* Year badge on image (top-left) */
.activity-grid .list-card-date{position:absolute;top:16px;left:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:7px 14px;border-radius:999px;font-family:'Anuphan',sans-serif;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink);margin:0;transition:opacity .3s ease;}

/* Body below image */
.activity-grid .list-card-body{padding:18px 4px 0;flex:1;display:flex;flex-direction:column;}
.activity-grid .news-date{display:block;font-family:'Anuphan',sans-serif;font-size:12px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:var(--gray);margin-bottom:10px;}
.activity-grid .list-card-title{font-family:'Anuphan',sans-serif;font-size:17px;font-weight:700;line-height:1.45;color:var(--ink);margin-bottom:10px;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .25s;}
.activity-grid .list-card-excerpt{font-size:14px;color:var(--gray);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:16px;}
.activity-grid .list-card-more{display:inline-flex;align-items:center;gap:8px;font-family:'Anuphan',sans-serif;font-size:13px;font-weight:600;color:var(--black);margin-top:auto;letter-spacing:.02em;transition:gap .3s;}
.activity-grid .list-card:hover .list-card-more{gap:14px}
.activity-grid .list-card:hover .list-card-title{color:var(--blue);}

/* === Hero carousel: 5 latest activities with text overlay === */
.hero-carousel{position:relative;width:100%;aspect-ratio:21/9;margin-bottom:64px;isolation:isolate;}
.hero-carousel-track{position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden;background:#0a0e14;box-shadow:0 8px 24px rgba(8,15,35,.12);transition:box-shadow .9s ease-in-out,transform .9s ease-in-out;}
.hero-carousel-track:hover{box-shadow:0 16px 48px rgba(15,33,139,.32),0 0 0 1px rgba(15,33,139,.25);transform:translateY(-2px);}
.hero-carousel-slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s;z-index:1;text-decoration:none;}
.hero-carousel-slide.is-active{opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s linear 0s;z-index:2;}
.hero-carousel-img{position:absolute;inset:0;overflow:hidden;}
.hero-carousel-img img{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block;transition:transform 1.2s ease-in-out,filter .9s ease-in-out;}
.hero-carousel-slide:hover .hero-carousel-img img{transform:scale(1.04);filter:saturate(1.15) brightness(1.03);}

/* Default gradient (dark for legibility) → smoothly fades to blue on hover */
.hero-carousel-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,15,35,0) 30%,rgba(8,15,35,.55) 70%,rgba(8,15,35,.92) 100%);z-index:1;pointer-events:none;transition:background .9s ease-in-out;}
.hero-carousel-slide:hover::after{background:linear-gradient(180deg,rgba(15,33,139,.15) 0%,rgba(15,33,139,.55) 55%,rgba(15,33,139,.95) 100%);}

.hero-carousel-content{position:absolute;left:48px;right:48px;bottom:48px;z-index:2;color:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:780px;}
.hero-carousel-tag{display:inline-block;font-family:'Anuphan',sans-serif;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#fff;padding:6px 14px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .7s ease-in-out,border-color .7s ease-in-out,color .7s ease-in-out;}
.hero-carousel-slide:hover .hero-carousel-tag{background:#fff;border-color:#fff;color:var(--blue-dark);}
.hero-carousel-title{font-family:'Anuphan',sans-serif;font-size:clamp(22px,2.6vw,34px);font-weight:700;color:#fff;line-height:1.25;letter-spacing:-.01em;margin:0;text-shadow:0 2px 12px rgba(0,0,0,.4);transition:transform .7s ease-in-out;}
.hero-carousel-slide:hover .hero-carousel-title{transform:translateY(-2px);}

/* Prev/Next arrows: OUTSIDE the carousel frame */
button.hero-carousel-arrow,
.hero-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;padding:0;border-radius:50%;background:var(--white);border:1.5px solid var(--light-gray);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .25s,border-color .25s,color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none;outline:none;box-shadow:none;}
.hero-carousel-arrow svg{width:18px;height:18px;}
button.hero-carousel-arrow.hero-carousel-arrow:focus,
button.hero-carousel-arrow.hero-carousel-arrow:active,
.hero-carousel-arrow.hero-carousel-arrow:focus,
.hero-carousel-arrow.hero-carousel-arrow:active{background:var(--white)!important;background-color:var(--white)!important;border-color:var(--light-gray)!important;color:var(--ink)!important;outline:none;box-shadow:none;}
button.hero-carousel-arrow.hero-carousel-arrow:hover,
button.hero-carousel-arrow.hero-carousel-arrow:focus:hover,
.hero-carousel-arrow.hero-carousel-arrow:hover,
.hero-carousel-arrow.hero-carousel-arrow:focus:hover{background:var(--blue)!important;background-color:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important;box-shadow:0 8px 22px rgba(14,79,160,.25);}
.hero-carousel-arrow:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.hero-carousel-arrow-prev{left:-64px;}
.hero-carousel-arrow-next{right:-64px;}

/* Dots */
.hero-carousel-dots{position:absolute;left:0;right:0;bottom:18px;z-index:5;display:flex;justify-content:center;gap:8px;pointer-events:none;}
button.hero-carousel-dot,
.hero-carousel-dot{pointer-events:auto;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);border:none;padding:0;cursor:pointer;transition:width .3s ease,background .25s;-webkit-appearance:none;appearance:none;outline:none;box-shadow:none;}
button.hero-carousel-dot.hero-carousel-dot:focus,
button.hero-carousel-dot.hero-carousel-dot:active,
.hero-carousel-dot.hero-carousel-dot:focus,
.hero-carousel-dot.hero-carousel-dot:active{background:rgba(255,255,255,.4)!important;background-color:rgba(255,255,255,.4)!important;outline:none;box-shadow:none;}
button.hero-carousel-dot.hero-carousel-dot:hover,
button.hero-carousel-dot.hero-carousel-dot:focus:hover,
.hero-carousel-dot.hero-carousel-dot:hover,
.hero-carousel-dot.hero-carousel-dot:focus:hover{background:rgba(255,255,255,.7)!important;background-color:rgba(255,255,255,.7)!important;}
button.hero-carousel-dot.hero-carousel-dot.is-active,
button.hero-carousel-dot.hero-carousel-dot.is-active:hover,
button.hero-carousel-dot.hero-carousel-dot.is-active:focus,
button.hero-carousel-dot.hero-carousel-dot.is-active:focus:hover,
.hero-carousel-dot.hero-carousel-dot.is-active,
.hero-carousel-dot.hero-carousel-dot.is-active:hover,
.hero-carousel-dot.hero-carousel-dot.is-active:focus,
.hero-carousel-dot.hero-carousel-dot.is-active:focus:hover{width:28px;border-radius:999px;background:#fff!important;background-color:#fff!important;}
.hero-carousel-dot:focus-visible{outline:2px solid #fff;outline-offset:3px;}

@media(max-width:1280px){
  /* Bring arrows inside when there's not enough room outside */
  .hero-carousel-arrow-prev{left:16px;}
  .hero-carousel-arrow-next{right:16px;}
}

@media(max-width:980px){
  .activity-grid{grid-template-columns:repeat(2,1fr);gap:36px 20px}
  .hero-carousel{aspect-ratio:16/9;margin-bottom:48px;}
  .hero-carousel-track{border-radius:14px;}
  .hero-carousel-content{left:32px;right:32px;bottom:36px;gap:12px;}
  .hero-carousel-arrow{width:40px;height:40px;}
}
@media(max-width:560px){
  .activity-grid{grid-template-columns:1fr;gap:32px}
  .hero-carousel{aspect-ratio:4/3;margin-bottom:36px;}
  .hero-carousel-content{left:20px;right:20px;bottom:48px;}
  .hero-carousel-arrow{display:none;}
  .activity-filter{gap:8px;margin-bottom:23px}
  .activity-filter-btn{font-size:13px;padding:7px 16px}
}

.inside-layout{display:grid;grid-template-columns:1fr 320px;gap:60px;align-items:start;}
.inside-main{font-family:'Anuphan',sans-serif;}
.inside-meta{display:flex;align-items:center;gap:20px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--light-gray);flex-wrap:wrap;}
.inside-meta-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray);}
.inside-meta-item svg{width:16px;height:16px;color:var(--blue);}
.inside-meta-cat{font-family:'Anuphan',sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--white);background:var(--blue);padding:5px 14px;border-radius:999px;}
.inside-cover{width:100%;aspect-ratio:16/9;background:var(--light-gray);border-radius:12px;overflow:hidden;margin-bottom:36px;}
.inside-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.inside-body{font-size:16px;color:var(--dark-gray);line-height:1.85;}
.inside-body h2{font-family:'Anuphan',sans-serif;font-weight:700;font-size:24px;color:var(--ink);margin:36px 0 16px;letter-spacing:-.01em;}
.inside-body h3{font-family:'Anuphan',sans-serif;font-weight:600;font-size:19px;color:var(--ink);margin:28px 0 12px;}
.inside-body p{margin-bottom:18px}
.inside-body .wp-block-list{margin:0 0 22px 22px;}
.inside-body .wp-block-list > li{margin-bottom:8px}
.inside-body img{width:100%;border-radius:10px;margin:24px 0;}
.inside-body blockquote{border-left:3px solid var(--blue);padding:6px 22px;margin:24px 0;color:var(--dark-gray);font-style:italic;background:var(--off-white);border-radius:0 8px 8px 0;}
.inside-sidebar{position:sticky;top:100px;}
.sidebar-card{background:var(--off-white);border:1px solid var(--light-gray);border-radius:12px;padding:24px 26px;margin-bottom:20px;}
.sidebar-card h4{font-family:'Anuphan',sans-serif;font-size:15px;font-weight:700;color:var(--accent);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--light-gray);}
.sidebar-card ul{list-style:none}
.sidebar-card li{padding:8px 0;border-bottom:1px dashed rgba(0,0,0,.06);}
.sidebar-card li:last-child{border-bottom:none}
.sidebar-card li a{font-family:'Anuphan',sans-serif;font-size:14px;color:var(--ink);line-height:1.45;display:block;transition:color .25s;}
.sidebar-card li a:hover{color:var(--blue)}
.sidebar-card li a .date{display:block;font-size:11px;color:var(--gray);margin-top:4px;letter-spacing:.04em;}
@media(max-width:900px){.inside-layout{grid-template-columns:1fr;gap:40px}.inside-sidebar{position:static}}

.profile-mission{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;}
.mission-card{background:var(--white);border:1px solid var(--light-gray);border-radius:12px;padding:32px 28px;transition:transform .3s,box-shadow .3s,border-color .3s;}
.mission-card:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 16px 36px rgba(14,79,160,.06);}
.mission-icon{width:56px;height:56px;border-radius:14px;background:var(--blue-light);color:var(--blue);display:grid;place-items:center;margin-bottom:18px;}
.mission-icon svg{width:28px;height:28px}
.mission-card h3{font-family:'Anuphan',sans-serif;font-size:19px;font-weight:600;color:var(--ink);margin-bottom:10px;}
.mission-card p{font-size:14px;color:var(--gray);line-height:1.7;}
@media(max-width:820px){.profile-mission{grid-template-columns:1fr;gap:18px}}

.timeline{position:relative;padding:20px 0;max-width:900px;margin:0 auto;}
.timeline::before{content:"";position:absolute;left:120px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--blue-light),var(--blue),var(--blue-light));}
.timeline-item{position:relative;padding-left:170px;padding-bottom:36px;}
.timeline-item:last-child{padding-bottom:0}
.timeline-year{position:absolute;left:0;top:-3px;width:100px;font-family:'Anuphan',sans-serif;font-weight:700;font-size:22px;color:var(--blue);text-align:right;letter-spacing:-.01em;}
.timeline-dot{position:absolute;left:115px;top:6px;width:12px;height:12px;background:var(--white);border:3px solid var(--blue);border-radius:50%;box-shadow:0 0 0 4px var(--blue-light);}
.timeline-content h4{font-family:'Anuphan',sans-serif;font-size:17px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.timeline-content p{font-size:14px;color:var(--gray);line-height:1.7;}
@media(max-width:680px){.timeline::before{left:40px}.timeline-item{padding-left:70px}.timeline-year{position:relative;text-align:left;left:auto;width:auto;font-size:18px;margin-bottom:6px;}.timeline-dot{left:34px;top:4px}}

.contact-grid-page{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start;}
.contact-info-list{list-style:none;margin-bottom:32px;}
.contact-info-list li{display:grid;grid-template-columns:50px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--light-gray);align-items:start;}
.contact-info-list li:last-child{border-bottom:none}
.contact-info-icon{width:46px;height:46px;border-radius:12px;background:var(--blue-light);color:var(--blue);display:grid;place-items:center;flex-shrink:0;}
.contact-info-icon svg{width:22px;height:22px}
.contact-info-text strong{display:block;font-family:'Anuphan',sans-serif;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin-bottom:4px;}
.contact-info-text a,.contact-info-text span{font-family:'Anuphan',sans-serif;font-size:15px;color:var(--ink);line-height:1.55;font-weight:500;}
.contact-info-text a:hover{color:var(--blue)}
.contact-form{background:var(--white);border:1px solid var(--light-gray);border-radius:14px;padding:40px 36px;box-shadow:0 12px 32px rgba(15,33,139,.05),0 2px 8px rgba(14,79,160,.03);transition:box-shadow .35s ease;}
.contact-form:hover{box-shadow:0 16px 40px rgba(15,33,139,.08),0 3px 10px rgba(14,79,160,.04);}
.contact-form h3{font-family:'Anuphan',sans-serif;font-size:22px;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em;}
.contact-form p{font-size:14px;color:var(--gray);margin-bottom:24px;line-height:1.6;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.form-group{display:flex;flex-direction:column;margin-bottom:14px;}
.form-group label{font-family:'Anuphan',sans-serif;font-size:13px;font-weight:500;color:var(--dark-gray);margin-bottom:6px;}
.form-group input,.form-group textarea,.form-group select{font-family:'Anuphan',sans-serif;font-size:15px;color:var(--ink);padding:12px 14px;border:1.5px solid var(--light-gray);border-radius:8px;background:var(--white);outline:none;transition:border-color .25s,box-shadow .25s;width:100%;}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(14,79,160,.1);}
.form-group textarea{min-height:130px;resize:vertical}
.form-submit{display:inline-flex;align-items:center;gap:12px;padding:14px 30px;background:var(--blue);color:var(--white);border:1.5px solid var(--blue);border-radius:999px;font-family:'Anuphan',sans-serif;font-size:14px;font-weight:500;letter-spacing:.02em;cursor:pointer;transition:all .3s;margin-top:6px;}
.form-submit:hover{background:var(--blue-dark);border-color:var(--blue-dark);transform:translateY(-1px);box-shadow:0 8px 22px rgba(14,79,160,.32);}
.map-embed{margin-top:30px;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--light-gray);}
.map-embed iframe{width:100%;height:100%;border:0;display:block;}

/* === Stacked contact layout: form on top, info+map below === */
.contact-stack{display:flex;flex-direction:column;gap:64px;}
.contact-form-wide{padding:44px 48px;}
.contact-form-wide .form-row{grid-template-columns:repeat(3,1fr);}
.contact-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.map-embed-tall{margin-top:0;height:100%;min-height:380px;aspect-ratio:auto;}

/* NEW: 2-col layout — info+map (left) | sticky form (right) */
.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;
  align-items:start;
}
.contact-left{min-width:0;}
.contact-right{min-width:0;align-self:start;}
.contact-form-sticky{
  position:sticky;
  top:100px;
  padding:36px 32px;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
}
.contact-form-sticky::-webkit-scrollbar{width:6px;}
.contact-form-sticky::-webkit-scrollbar-track{background:transparent;}
.contact-form-sticky::-webkit-scrollbar-thumb{background:rgba(14,79,160,.2);border-radius:3px;}
.contact-form-sticky::-webkit-scrollbar-thumb:hover{background:rgba(14,79,160,.4);}
.map-embed-short{
  margin-top:24px;
  aspect-ratio:16/9;
  max-height:300px;
}
.map-embed-short iframe{width:100%;height:100%;border:0;display:block;}

/* Form select dropdown */
.form-select{
  width:100%;
  font-family:'Anuphan',sans-serif;
  font-size:15px;
  color:var(--ink);
  padding:13px 44px 13px 16px;
  background:#fff;
  border:1.5px solid var(--light-gray);
  border-radius:10px;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  transition:border-color .25s ease,box-shadow .25s ease;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%230e4fa0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
}
.form-select:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(14,79,160,.12);
}
.form-select:invalid{color:var(--gray);}

/* ============================================
   Elementor Form widget — Systronics overrides
   Rewrites the built-in form to match .form-select /
   .contact-form styling used by allpage-3/contact.html.
   ============================================ */
.elementor-widget-form .elementor-form select.elementor-field-textual{
  width:100%;
  font-family:'Anuphan',sans-serif!important;
  font-size:15px!important;
  color:var(--ink)!important;
  padding:13px 44px 13px 16px!important;
  background-color:#fff!important;
  border:1.5px solid var(--light-gray)!important;
  border-radius:10px!important;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  cursor:pointer;
  transition:border-color .25s ease,box-shadow .25s ease;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%230e4fa0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")!important;
  background-repeat:no-repeat!important;
  background-position:right 16px center!important;
  box-shadow:none!important;
}
.elementor-widget-form .elementor-form select.elementor-field-textual:focus{
  outline:none;
  border-color:var(--blue)!important;
  box-shadow:0 0 0 3px rgba(14,79,160,.12)!important;
}
/* Hide Elementor's own caret wrapper (we render our own via background-image) */
.elementor-widget-form .elementor-form .elementor-select-wrapper .select-caret-down-wrapper{display:none!important;}

/* Text inputs + textareas — match .form-group input/textarea in contact.html */
.elementor-widget-form .elementor-form input.elementor-field-textual,
.elementor-widget-form .elementor-form textarea.elementor-field-textual{
  width:100%;
  font-family:'Anuphan',sans-serif!important;
  font-size:15px!important;
  color:var(--ink)!important;
  padding:12px 14px!important;
  background-color:var(--white)!important;
  border:1.5px solid var(--light-gray)!important;
  border-radius:8px!important;
  outline:none;
  box-shadow:none!important;
  transition:border-color .25s,box-shadow .25s;
}
.elementor-widget-form .elementor-form input.elementor-field-textual:focus,
.elementor-widget-form .elementor-form textarea.elementor-field-textual:focus{
  border-color:var(--blue)!important;
  box-shadow:0 0 0 3px rgba(14,79,160,.1)!important;
  outline:none;
}
.elementor-widget-form .elementor-form textarea.elementor-field-textual{min-height:130px;resize:vertical;}

/* Field label — match .form-group label */
.elementor-widget-form .elementor-form .elementor-field-label{
  font-family:'Anuphan',sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--dark-gray);
  margin-bottom:6px;
}

@media(max-width:900px){.contact-grid-page{grid-template-columns:1fr;gap:36px}.form-row{grid-template-columns:1fr}.contact-form-wide{padding:32px 24px}.contact-form-wide .form-row{grid-template-columns:1fr}.contact-bottom-grid{grid-template-columns:1fr;gap:40px}.map-embed-tall{min-height:300px;aspect-ratio:16/10}.contact-stack{gap:48px}.contact-layout{grid-template-columns:1fr;gap:40px}.contact-form-sticky{position:static;padding:32px 24px}.map-embed-short{max-height:240px}}

.product-detail-hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.product-detail-hero img{border-radius:14px;aspect-ratio:4/3;object-fit:cover;width:100%;}
.product-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px;}
.product-feature{background:var(--white);border:1px solid var(--light-gray);border-radius:12px;padding:26px;display:flex;gap:18px;transition:transform .3s,border-color .3s,box-shadow .3s;}
.product-feature:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 12px 28px rgba(14,79,160,.06);}
.product-feature-icon{width:44px;height:44px;border-radius:10px;background:var(--blue-light);color:var(--blue);display:grid;place-items:center;flex-shrink:0;}
.product-feature-icon svg{width:22px;height:22px}
.product-feature h4{font-family:'Anuphan',sans-serif;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.product-feature p{font-size:14px;color:var(--gray);line-height:1.65;}
@media(max-width:820px){.product-detail-hero{grid-template-columns:1fr;gap:32px}.product-feature-grid{grid-template-columns:1fr}}

nav.primary a.active{color:var(--white)}
header.scrolled nav.primary a.active{color:var(--blue)}
nav.primary a.active::after{transform:scaleX(1)}

/* ===== Page Hero with banner image ===== */
.page-hero.has-banner{
  background:#0a1828;
  padding:220px 0 100px;
}
.page-hero.has-banner::before,
.page-hero.has-banner::after{display:none;}
.page-hero.has-banner .banner-bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
}
.page-hero.has-banner .banner-bg img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}
.page-hero.has-banner .banner-bg::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,24,40,.35) 0%,
    rgba(10,24,40,.55) 60%,
    rgba(10,24,40,.75) 100%);
}
.page-hero.has-banner .container{position:relative;z-index:2;}
.page-hero.has-banner .breadcrumb{color:rgba(255,255,255,.75);}
.page-hero.has-banner .breadcrumb a{color:rgba(255,255,255,.75);}
.page-hero.has-banner .breadcrumb a:hover{color:#fff;}
.page-hero.has-banner .breadcrumb .sep{color:rgba(255,255,255,.4);}
.page-hero.has-banner .breadcrumb .current{color:#fff;font-weight:600;}
.page-hero.has-banner h1{color:#fff;}
.page-hero.has-banner h1 .thin{color:rgba(255,255,255,.85);}
.page-hero.has-banner .lede{color:rgba(255,255,255,.85);}
@media(max-width:680px){
  .page-hero.has-banner{padding:160px 0 70px;}
}

/* ===== Contact page letter-spacing override ===== */
/* ใช้ letter-spacing: normal กับองค์ประกอบหลักของหน้า contact */
.page-contact h1,
.page-contact h2,
.page-contact h3,
.page-contact h4,
.page-contact .breadcrumb,
.page-contact .kicker,
.page-contact h2.about-style-heading,
.page-contact .contact-info-text strong,
.page-contact .contact-form h3,
.page-contact .form-submit,
.page-contact .form-group label,
.page-contact .form-group input,
.page-contact .form-group select,
.page-contact .form-group textarea,
.page-contact .lede,
.page-contact p,
.page-contact span,
.page-contact a{
  letter-spacing: normal;
}

/* ===== Custom select dropdown ===== */
.form-group select{
  /* รีเซ็ต native */
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  /* ช่องว่างขวาให้ลูกศรเรา */
  padding-right:42px;
  /* ลูกศร SVG inline (สี #0e4fa0 = var(--blue)) */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1L7 7L13 1' stroke='%230e4fa0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:14px 8px;
  cursor:pointer;
  line-height:1.4;
}
.form-group select::-ms-expand{display:none;}
.form-group select:hover{
  border-color:var(--blue);
}
.form-group select:focus{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 7L7 1L13 7' stroke='%230e4fa0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
/* ตัวเลือกใน dropdown */
.form-group select option{
  font-family:'Anuphan',sans-serif;
  font-size:15px;
  color:var(--ink);
  padding:10px;
  background:var(--white);
}

/* ===== Products page letter-spacing override ===== */
.page-products h1,
.page-products h2,
.page-products h3,
.page-products h4,
.page-products .breadcrumb,
.page-products .kicker,
.page-products h2.about-style-heading,
.page-products .cat-card-title,
.page-products .cat-card-desc,
.page-products .cat-card-tag,
.page-products .cat-card-link,
.page-products .lede,
.page-products p,
.page-products span,
.page-products a{
  letter-spacing: normal;
}

/* ===== Product card subtitle (English name under Thai title) ===== */
.product-card-sub{
  display:block;
  font-family:'Anuphan',sans-serif;
  font-weight:300;
  font-size:14px;
  color:rgba(255,255,255,.85);
  letter-spacing:normal;
  line-height:1.4;
  margin-top:6px;
  max-width:95%;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
  transition:opacity .4s ease;
}
.product-card:hover .product-card-sub{
  color:#fff;
}

/* center headline vertically, override absolute bottom:48px from base */



/* Project showcase — รูปใหญ่ทับด้วย card content */
.project-showcase{
  position:relative;
  margin-top:60px;
}
.project-showcase-img{
  width:100%;
  aspect-ratio:21/9;
  border-radius:20px;
  overflow:hidden;
  background:var(--light-gray);
  position:relative;
}
.project-showcase-img img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.project-showcase-img::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(14,79,160,.15),transparent 50%,rgba(0,0,0,.45));
}
.project-showcase-tag{
  position:absolute;
  top:32px;left:32px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  padding:10px 20px;
  border-radius:999px;
  font-family:'Anuphan',sans-serif;
  font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);
  z-index:2;
}
.project-showcase-card{
  position:relative;
  z-index:3;
  margin:-100px auto 0;
  background:var(--white);
  border-radius:20px;
  padding:48px 56px;
  max-width:900px;
  box-shadow:0 24px 60px rgba(0,0,0,.12);
}
.project-showcase-card .kicker{
  margin-bottom:14px;
}
.project-showcase-card h2{
  font-family:'Anuphan',sans-serif;
  font-weight:700;
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.15;
  color:var(--ink);
  margin-bottom:20px;
  letter-spacing:normal;
}
.project-showcase-card .lead{
  font-size:var(--fs-md);
  color:var(--dark-gray);
  line-height:1.75;
  margin-bottom:18px;
}
.project-showcase-card .detail{
  font-size:var(--fs-body);
  color:var(--gray);
  line-height:1.85;
  margin-bottom:28px;
}
@media(max-width:780px){
  .project-showcase-img{aspect-ratio:16/10;border-radius:14px;}
  .project-showcase-card{
    margin:-60px 20px 0;
    padding:32px 28px;
    border-radius:14px;
  }
  .project-showcase-tag{top:18px;left:18px;padding:7px 14px;font-size:10px;}
}

/* Stat bar — ตัวเลขเด่นๆ */
.stat-bar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:60px;
  border-top:1px solid var(--light-gray);
  border-bottom:1px solid var(--light-gray);
}
.stat-item{
  padding:36px 24px;
  text-align:center;
  position:relative;
}
.stat-item:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;top:24px;bottom:24px;
  width:1px;
  background:var(--light-gray);
}
.stat-num{
  display:block;
  font-family:'Anuphan',sans-serif;
  font-weight:700;
  font-size:clamp(36px,4vw,56px);
  line-height:1;
  color:var(--blue);
  letter-spacing:-.02em;
  margin-bottom:8px;
}
.stat-num .unit{
  font-size:.45em;
  font-weight:500;
  color:var(--gray);
  margin-left:4px;
  letter-spacing:normal;
}
.stat-label{
  font-family:'Anuphan',sans-serif;
  font-size:14px;
  color:var(--dark-gray);
  line-height:1.5;
  letter-spacing:normal;
}
@media(max-width:780px){
  .stat-bar{grid-template-columns:repeat(2,1fr);}
  .stat-item:nth-child(2)::after{display:none;}
  .stat-item:nth-child(1),.stat-item:nth-child(2){
    border-bottom:1px solid var(--light-gray);
  }
}


/* ===== Product detail page components ===== */

/* Project showcase — รูปใหญ่ทับด้วย card content */
.project-showcase{
  position:relative;
  margin-top:60px;
}
.project-showcase-img{
  width:100%;
  aspect-ratio:21/9;
  border-radius:20px;
  overflow:hidden;
  background:var(--light-gray);
  position:relative;
}
.project-showcase-img img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.project-showcase-img::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(14,79,160,.15),transparent 50%,rgba(0,0,0,.45));
}
.project-showcase-tag{
  position:absolute;
  top:32px;left:32px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  padding:10px 20px;
  border-radius:999px;
  font-family:'Anuphan',sans-serif;
  font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);
  z-index:2;
}
.project-showcase-card{
  position:relative;
  z-index:3;
  margin:-100px auto 0;
  background:var(--white);
  border-radius:20px;
  padding:48px 56px;
  max-width:900px;
  box-shadow:0 24px 60px rgba(0,0,0,.12);
}
.project-showcase-card .kicker{margin-bottom:14px;}
.project-showcase-card h2{
  font-family:'Anuphan',sans-serif;
  font-weight:700;
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.15;
  color:var(--ink);
  margin-bottom:20px;
  letter-spacing:normal;
}
.project-showcase-card p{
  font-size:15.5px;
  color:var(--dark-gray);
  line-height:1.85;
  margin-bottom:18px;
  letter-spacing:normal;
}
.project-showcase-card p.lead{
  font-size:18px;
  color:var(--ink);
  font-weight:500;
}
@media(max-width:780px){
  .project-showcase-img{aspect-ratio:16/10;border-radius:14px;}
  .project-showcase-card{
    margin:-60px 20px 0;
    padding:32px 28px;
    border-radius:14px;
  }
  .project-showcase-tag{top:18px;left:18px;padding:7px 14px;font-size:10px;}
  .project-showcase-card p{font-size:14.5px;}
  .project-showcase-card p.lead{font-size:16px;}
}



/* Expandable content */
.brand-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s cubic-bezier(.2,.8,.2,1);
}
.brand-item.open .brand-content{
  max-height:3000px;
}
.brand-content-inner{
  padding:32px 36px 40px;
}
.brand-description{
  font-family:'Anuphan',sans-serif;
  font-size:16px;
  color:var(--dark-gray);
  line-height:1.85;
  margin-bottom:32px;
  max-width:780px;
  letter-spacing:normal;
}

/* Sub-product grid */
.subproduct-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.subproduct-card{
  background:var(--off-white);
  border-radius:12px;
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
}
.subproduct-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.07);
}
.subproduct-img{
  width:100%;
  aspect-ratio:4/3;
  background:var(--light-gray);
  overflow:hidden;
}
.subproduct-img img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.subproduct-card:hover .subproduct-img img{
  transform:scale(1.06);
}
.subproduct-body{
  padding:18px 20px 22px;
}
.subproduct-name{
  font-family:'Anuphan',sans-serif;
  font-weight:600;
  font-size:16px;
  color:var(--ink);
  margin-bottom:6px;
  letter-spacing:normal;
  line-height:1.3;
}
.subproduct-spec{
  font-family:'Anuphan',sans-serif;
  font-size:13px;
  color:var(--gray);
  line-height:1.6;
  letter-spacing:normal;
  margin:0;
}

@media(max-width:880px){
  .brand-toggle{
    grid-template-columns:50px 1fr auto;
    gap:18px;
    padding:22px 24px;
  }
  .brand-toggle-num{font-size:26px;}
  .brand-toggle-info h3{font-size:18px;}
  .brand-toggle-icon{width:36px;height:36px;}
  .brand-content-inner{padding:24px 24px 28px;}
  .subproduct-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
}
@media(max-width:560px){
  .subproduct-grid{grid-template-columns:1fr;}
}


/* Brand Tabs — แท็บแบรนด์ + grid สินค้าด้านล่าง */
.brand-tabs{
  display:flex;
  border-bottom:2px solid var(--light-gray);
  margin-bottom:48px;
  gap:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.brand-tabs::-webkit-scrollbar{display:none;}
button.brand-tab-btn,
.brand-tab-btn{
  font-family:'Anuphan',sans-serif;
  font-size:17px;
  font-weight:600;
  letter-spacing:normal;
  padding:20px 30px;
  border:none;
  background:transparent;
  color:var(--gray);
  cursor:pointer;
  position:relative;
  transition:color .25s ease;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:12px;
  -webkit-appearance:none;appearance:none;outline:none;box-shadow:none;
}
button.brand-tab-btn.brand-tab-btn:focus,
button.brand-tab-btn.brand-tab-btn:active,
.brand-tab-btn.brand-tab-btn:focus,
.brand-tab-btn.brand-tab-btn:active{
  background:transparent!important;background-color:transparent!important;
  color:var(--gray)!important;outline:none;box-shadow:none;
}
.brand-tab-btn .num{
  font-size:12px;
  color:var(--blue);
  font-weight:700;
  letter-spacing:.06em;
  opacity:.5;
  transition:opacity .25s;
}
.brand-tab-btn::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-2px;
  height:3px;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.brand-tab-btn.brand-tab-btn:hover,
.brand-tab-btn.brand-tab-btn:focus:hover{background:transparent!important;background-color:transparent!important;color:var(--ink)!important;}
.brand-tab-btn:hover .num{opacity:1;}
.brand-tab-btn.brand-tab-btn.active,
.brand-tab-btn.brand-tab-btn.active:hover,
.brand-tab-btn.brand-tab-btn.active:focus,
.brand-tab-btn.brand-tab-btn.active:focus:hover{background:transparent!important;background-color:transparent!important;color:var(--ink)!important;}
.brand-tab-btn.active .num{opacity:1;}
.brand-tab-btn.active::after{transform:scaleX(1);}
.brand-tab-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px;}

.brand-tab-panel{display:none;}
.brand-tab-panel.active{
  display:block;
  animation:brandFadeIn .4s ease;
}
@keyframes brandFadeIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
.brand-tab-tagline{
  font-family:'Anuphan',sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--blue);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:14px;
  display:block;
}
.brand-tab-desc{
  font-family:'Anuphan',sans-serif;
  font-size:17px;
  color:var(--dark-gray);
  line-height:1.85;
  max-width:820px;
  margin-bottom:40px;
  letter-spacing:normal;
}

.brand-tab-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.brand-tab-card{
  background:var(--white);
  border:1px solid var(--light-gray);
  border-radius:14px;
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.brand-tab-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(0,0,0,.08);
  border-color:var(--blue);
}
.brand-tab-card-img{
  width:100%;
  aspect-ratio:4/3;
  background:var(--light-gray);
  overflow:hidden;
}
.brand-tab-card-img img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.brand-tab-card:hover .brand-tab-card-img img{transform:scale(1.06);}
.brand-tab-card-body{padding:20px 22px 24px;}
.brand-tab-card h4{
  font-family:'Anuphan',sans-serif;
  font-weight:700;
  font-size:17px;
  color:var(--ink);
  margin-bottom:6px;
  letter-spacing:normal;
  line-height:1.3;
}
.brand-tab-card p{
  font-family:'Anuphan',sans-serif;
  font-size:14px;
  color:var(--gray);
  line-height:1.65;
  letter-spacing:normal;
  margin:0;
}

@media(max-width:880px){
  .brand-tabs{margin-bottom:32px;}
  .brand-tab-btn{padding:16px 20px;font-size:15px;}
  .brand-tab-desc{font-size:15px;margin-bottom:28px;}
  .brand-tab-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
}
@media(max-width:480px){
  .brand-tab-grid{grid-template-columns:1fr;}
}


/* Lightbox — คลิกรูปสินค้าแล้วขยายเต็มจอ */
.brand-tab-card-img{
  cursor:zoom-in;
  position:relative;
}
.brand-tab-card-img::after{
  content:"";
  position:absolute;
  top:12px;right:12px;
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  opacity:0;
  transform:scale(.8);
  transition:opacity .3s ease, transform .3s ease;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230e4fa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.35-4.35'/><line x1='11' y1='8' x2='11' y2='14'/><line x1='8' y1='11' x2='14' y2='11'/></svg>");
  background-repeat:no-repeat;
  background-position:center;
  pointer-events:none;
}
.brand-tab-card:hover .brand-tab-card-img::after{
  opacity:1;
  transform:scale(1);
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(10,15,30,.92);
  backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.lightbox.open{
  opacity:1;
  visibility:visible;
}
.lightbox-content{
  position:relative;
  max-width:90vw;
  max-height:90vh;
  transform:scale(.92);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.lightbox.open .lightbox-content{
  transform:scale(1);
}
.lightbox-content img{
  max-width:100%;
  max-height:90vh;
  display:block;
  border-radius:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lightbox-caption{
  position:absolute;
  left:0;right:0;bottom:-50px;
  text-align:center;
  color:rgba(255,255,255,.9);
  font-family:'Anuphan',sans-serif;
  font-size:14px;
  letter-spacing:normal;
}
.lightbox-close{
  position:fixed;
  top:24px;right:24px;
  width:48px;height:48px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .25s ease, transform .25s ease;
}
.lightbox-close:hover{
  background:rgba(255,255,255,.22);
  transform:rotate(90deg);
}
.lightbox-close svg{width:22px;height:22px;}
body.lightbox-open{overflow:hidden;}
@media(max-width:680px){
  .lightbox{padding:20px;}
  .lightbox-close{top:16px;right:16px;width:40px;height:40px;}
}

/* ============================================
   CERTIFICATE PAGE — different layout from activity
   - Horizontal row cards (not 3-col grid)
   - Pill filter with subtle distinct style
   - Show 10 first, expand for more
   ============================================ */
.cert-section{padding:80px 0 120px;background:linear-gradient(180deg,#fafbfd 0%,#fff 100%);}

/* Filter pills (rounded, with active highlight different from activity) */
/* One row that scrolls sideways (swipe / mouse drag) instead of wrapping — same behaviour and
   state classes as .activity-filter (see there and shared.js). The padding keeps the pills'
   hover/active shadows from being clipped by the scroll area; it is cancelled by the negative
   margins here and on the list below, so spacing is unchanged. */
.cert-filter{
  display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:10px;
  margin:-14px -16px 56px;padding:14px 16px 30px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
}
.cert-filter::-webkit-scrollbar{display:none;}
.cert-filter > :first-child{margin-left:auto;}
.cert-filter > :last-child{margin-right:auto;}
.cert-filter + .cert-list{margin-top:-30px;}
button.cert-filter-btn,
.cert-filter-btn{
  font-family:'Anuphan',sans-serif;font-size:14px;font-weight:500;
  color:var(--dark-gray,#333) !important;
  padding:10px 26px;border:1.5px solid var(--light-gray) !important;
  border-radius:999px;background:#fff !important;cursor:pointer;
  flex:0 0 auto;white-space:nowrap;
  transition:all .35s ease;
  -webkit-appearance:none;appearance:none;outline:none;box-shadow:none;
}
button.cert-filter-btn.cert-filter-btn:focus,
button.cert-filter-btn.cert-filter-btn:active,
.cert-filter-btn.cert-filter-btn:focus,
.cert-filter-btn.cert-filter-btn:active{
  background:#fff !important;background-color:#fff !important;
  color:var(--dark-gray,#333) !important;border-color:var(--light-gray) !important;
  outline:none;box-shadow:none;
}
button.cert-filter-btn.cert-filter-btn:hover,
button.cert-filter-btn.cert-filter-btn:focus:hover,
.cert-filter-btn.cert-filter-btn:hover,
.cert-filter-btn.cert-filter-btn:focus:hover{
  background:#fff !important;background-color:#fff !important;
  border-color:var(--blue) !important;color:var(--blue) !important;
  transform:translateY(-1px);box-shadow:0 6px 18px rgba(14,79,160,.1);
}
button.cert-filter-btn.cert-filter-btn.is-active,
button.cert-filter-btn.cert-filter-btn.is-active:hover,
button.cert-filter-btn.cert-filter-btn.is-active:focus,
button.cert-filter-btn.cert-filter-btn.is-active:focus:hover,
.cert-filter-btn.cert-filter-btn.is-active,
.cert-filter-btn.cert-filter-btn.is-active:hover,
.cert-filter-btn.cert-filter-btn.is-active:focus,
.cert-filter-btn.cert-filter-btn.is-active:focus:hover{
  background:var(--blue) !important;background-color:var(--blue) !important;
  border-color:var(--blue) !important;color:#fff !important;
  box-shadow:0 8px 22px rgba(14,79,160,.25);
}
.cert-filter-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* Empty state */
.cert-empty{
  text-align:center;font-family:'Anuphan',sans-serif;font-size:16px;
  color:var(--gray);padding:60px 20px;
}

/* ============================================
   CERT CARDS — 2-column wide cards
   Each card is horizontal: image left, content right
   Different from activity (which uses 3-col vertical cards)
   ============================================ */
.cert-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
}
@media(max-width:880px){.cert-list{grid-template-columns:1fr;gap:20px;}}

.cert-row{
  display:block;
  position:relative;
  transition:transform .5s ease;
}
.cert-row:hover{transform:translateY(-3px);}

.cert-row-link{
  position:relative;
  display:grid;
  grid-template-columns:200px 1fr;
  grid-template-rows:auto auto 1fr auto;
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 4px 16px rgba(15,23,42,.05);
  text-decoration:none;color:inherit;
  height:260px;
  transition:box-shadow .5s ease;
}
.cert-row:hover .cert-row-link{
  box-shadow:0 2px 4px rgba(15,23,42,.06),0 16px 36px rgba(15,33,139,.12);
}

/* Image — spans all rows on the left column */
.cert-row-link img{
  grid-column:1;
  grid-row:1 / -1;
  display:block;
  width:100%;height:100%;
  object-fit:contain;
  object-position:center;
  padding:12px;
  background:var(--off-white);
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.cert-row:hover .cert-row-link img{transform:scale(1.04);}

/* Year pill — hidden (year is shown in the date instead) */
.cert-row-year{display:none;}

/* Text content — right column, auto-placed in rows 1-4 */
.cert-row-date{
  grid-column:2;grid-row:1;
  font-family:'Anuphan',sans-serif;font-size:13px;font-weight:600;
  color:var(--accent);
  margin:30px 30px 12px;
}
.cert-row-title{
  grid-column:2;grid-row:2;
  font-family:'Anuphan',sans-serif;font-size:18px;font-weight:600;
  line-height:1.45;letter-spacing:-.005em;color:var(--ink);
  margin:0 30px 14px;
  transition:color .35s ease;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cert-row:hover .cert-row-title{color:var(--blue);}
.cert-row-desc{
  grid-column:2;grid-row:3;
  font-size:13.5px;line-height:1.7;color:var(--gray);
  margin:0 30px 18px;
  align-self:start;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  line-clamp:3;
}
.cert-row-more{
  grid-column:2;grid-row:4;
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Anuphan',sans-serif;font-size:13px;font-weight:600;
  color:var(--blue);
  margin:0 30px 28px;
  justify-self:start;align-self:end;
  transition:gap .3s ease;
}
.cert-row:hover .cert-row-more{gap:12px;}

/* Show more button */
.cert-more-wrap,
.activity-more-wrap{
  display:flex;justify-content:center;margin-top:56px;
}
.cert-more-wrap[hidden],
.activity-more-wrap[hidden]{display:none;}
button.cert-more-btn,
.cert-more-btn,
button.activity-more-btn,
.activity-more-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Anuphan',sans-serif;font-size:14px;font-weight:600;
  color:#0e4fa0;
  padding:14px 32px;background:#fff;
  border:1.5px solid #0e4fa0;border-radius:999px;
  cursor:pointer;transition:all .35s ease;
  outline:none;
}
button.cert-more-btn.cert-more-btn:hover,
.cert-more-btn.cert-more-btn:hover,
button.activity-more-btn.activity-more-btn:hover,
.activity-more-btn.activity-more-btn:hover{
  background:#0e4fa0 !important;
  background-color:#0e4fa0 !important;
  color:#fff !important;
  border-color:#0e4fa0 !important;
  text-decoration:none !important;
  box-shadow:0 10px 26px rgba(14,79,160,.25);
  transform:translateY(-2px);
}
button.cert-more-btn.cert-more-btn:focus,
button.cert-more-btn.cert-more-btn:focus-visible,
.cert-more-btn.cert-more-btn:focus,
.cert-more-btn.cert-more-btn:focus-visible,
button.activity-more-btn.activity-more-btn:focus,
button.activity-more-btn.activity-more-btn:focus-visible,
.activity-more-btn.activity-more-btn:focus,
.activity-more-btn.activity-more-btn:focus-visible{
  background:#fff !important;
  background-color:#fff !important;
  color:#0e4fa0 !important;
  border-color:#0e4fa0 !important;
  outline:2px solid rgba(14,79,160,.35);
  outline-offset:2px;
}
button.cert-more-btn.cert-more-btn:focus:hover,
.cert-more-btn.cert-more-btn:focus:hover,
button.activity-more-btn.activity-more-btn:focus:hover,
.activity-more-btn.activity-more-btn:focus:hover{
  background:#0e4fa0 !important;
  background-color:#0e4fa0 !important;
  color:#fff !important;
}
.cert-more-btn svg,
.activity-more-btn svg{transition:transform .35s ease;}
.cert-more-btn.is-expanded svg,
.activity-more-btn.is-expanded svg{transform:rotate(180deg);}

/* Tablet — narrower image */
@media(max-width:1100px){
  .cert-row-link{grid-template-columns:170px 1fr;height:250px;}
  .cert-row-date{margin:24px 24px 10px;}
  .cert-row-title{margin:0 24px 12px;font-size:17px;}
  .cert-row-desc{margin:0 24px 16px;-webkit-line-clamp:3;}
  .cert-row-more{margin:0 24px 24px;}
}

/* Mobile — keep horizontal but smaller */
@media(max-width:560px){
  .cert-row:hover{transform:none;}
  .cert-row-link{grid-template-columns:120px 1fr;height:210px;}
  .cert-row-date{margin:18px 18px 6px;font-size:10.5px;}
  .cert-row-title{margin:0 18px 8px;font-size:14.5px;line-height:1.4;}
  .cert-row-desc{margin:0 18px 12px;font-size:12.5px;-webkit-line-clamp:3;}
  .cert-row-more{margin:0 18px 18px;font-size:12px;}
  .cert-filter-btn{font-size:13px;padding:8px 20px;}
}
@media(max-width:420px){
  .cert-filter{gap:8px;}
  .cert-filter-btn{padding:7px 16px;font-size:12.5px;}
}

/* ============================================
   ACTIVITY/CERTIFICATE INSIDE PAGE
   Magazine-style detail layout within CI
   ============================================ */

/* Hero adjustment when used inside detail page */
.inside-hero{padding-bottom:80px;padding-top:60px;position:relative;}
.inside-hero .banner-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,33,139,.55) 0%,rgba(10,15,40,.75) 100%);
}
.inside-hero-tag{
  display:inline-flex;align-items:center;
  font-family:'Anuphan',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:var(--accent);
  padding:6px 14px;border-radius:999px;
  margin-bottom:14px;
  position:relative;z-index:2;
}

/* Cover image — sits cleanly below hero, no overlap */
.inside-section{padding-top:60px;}
.inside-cover{
  margin:0 0 36px;
  border-radius:6px;overflow:hidden;
  box-shadow:0 12px 32px rgba(15,33,139,.12),0 2px 6px rgba(0,0,0,.06);
}
.inside-cover img{display:block;width:100%;height:auto;}

/* Headline block — large title + tag above meta card */
.inside-headline{margin:0 0 32px;}
.inside-headline-tag{
  display:inline-flex;align-items:center;
  font-family:'Anuphan',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:var(--accent);
  padding:6px 14px;border-radius:999px;
  margin-bottom:18px;
}
.inside-headline-title{
  font-family:'Anuphan',sans-serif;font-size:42px;font-weight:700;
  line-height:1.15;letter-spacing:-.015em;color:var(--ink);
  margin:0 0 10px;
}
.inside-headline-sub{
  font-family:'Anuphan',sans-serif;font-size:18px;font-weight:400;
  line-height:1.5;color:var(--gray);
  margin:0;
}

/* Meta card — refined info bar with icons */
.inside-meta-card{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:24px;
  background:#fff;
  border-radius:6px;
  padding:24px 28px;
  margin:0 0 40px;
  box-shadow:0 4px 16px rgba(15,33,139,.08),0 1px 2px rgba(15,23,42,.04);
}
.inside-meta-card .inside-meta-item{
  display:flex;align-items:center;gap:14px;
}
.inside-meta-icon{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;
  background:var(--blue-light);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.inside-meta-icon svg{width:18px;height:18px;}
.inside-meta-text{display:flex;flex-direction:column;min-width:0;}
.inside-meta-label{
  font-family:'Anuphan',sans-serif;font-size:12px;font-weight:500;
  color:var(--gray);
  margin-bottom:2px;
}
.inside-meta-value{
  font-family:'Anuphan',sans-serif;font-size:14px;font-weight:600;
  color:var(--ink);line-height:1.3;
}
.inside-meta-divider{
  width:1px;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.08),transparent);
}

/* Article body — magazine typography */
.inside-body{font-family:'Anuphan',sans-serif;color:var(--ink);}
.inside-body .inside-lead{
  font-size:18px;line-height:1.7;color:var(--ink);font-weight:400;
  margin:0 0 32px;padding-bottom:32px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.inside-body .inside-lead strong{color:var(--blue);font-weight:600;}
.inside-body p{font-size:15.5px;line-height:1.8;color:#3a3a3a;margin:0 0 20px;}
.inside-body strong{color:var(--ink);font-weight:600;}

.inside-body h2{
  font-family:'Anuphan',sans-serif;font-size:22px;font-weight:700;
  letter-spacing:-.01em;color:var(--ink);
  margin:44px 0 18px;
}

.inside-body ul.wp-block-list{
  list-style:none;padding:0;margin:0 0 28px;
}
.inside-body ul.wp-block-list > li{
  position:relative;
  font-size:15.5px;line-height:1.7;color:#3a3a3a;
  padding:10px 0 10px 32px;
  border-bottom:1px dashed rgba(0,0,0,.06);
}
.inside-body ul.wp-block-list > li:last-child{border-bottom:none;}
.inside-body ul.wp-block-list > li::before{
  content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 4px rgba(14,79,160,.12);
}

.inside-body blockquote{
  position:relative;
  font-family:'Anuphan',sans-serif;font-size:18px;line-height:1.7;
  font-weight:500;color:var(--blue-dark);font-style:normal;
  margin:40px 0;padding:32px 36px 32px 64px;
  background:linear-gradient(135deg,var(--blue-light) 0%,#f4f6fa 100%);
  border-radius:6px;
}
.inside-body blockquote::before{
  content:"\201C";
  position:absolute;left:18px;top:14px;
  font-family:Georgia,serif;font-size:64px;line-height:1;
  color:var(--accent);font-weight:700;
  opacity:.5;
}

/* Hashtags — Facebook-style tags after body */
.inside-hashtags{
  display:flex;flex-wrap:wrap;column-gap:8px;
  margin-top:28px;padding-top:24px;
  border-top:1px dashed rgba(0,0,0,.08);
}
.inside-hashtag{
  font-family:'Anuphan',sans-serif;font-size:13px;font-weight:500;
  color:var(--blue);
  padding:4px 0;
  transition:color .25s ease;
}
.inside-hashtag:hover{color:var(--blue-dark);cursor:pointer;}

/* Gallery — masonry-like grid of activity photos */
.inside-gallery{margin:48px 0 24px;}
.inside-gallery-heading{
  font-family:'Anuphan',sans-serif;font-size:18px;font-weight:700;
  color:var(--ink);
  margin:0 0 20px;
  display:flex;align-items:center;gap:14px;
}
.inside-gallery-heading::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(to right,rgba(14,79,160,.2),transparent);
}
.inside-gallery-grid{
  column-count:3;
  column-gap:10px;
}
.inside-gallery-item{
  display:block;
  position:relative;
  break-inside:avoid;
  margin:0 0 10px;
  overflow:hidden;
  border-radius:4px;
  background:#f4f6fa;
}
.inside-gallery-item img{
  width:100%;height:auto;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .35s ease;
}
@media(max-width:600px){.inside-gallery-grid{column-count:2;}}
.inside-gallery-item:hover img{
  transform:scale(1.05);
}

.inside-gallery-item.is-hidden{display:none;}

/* "ดูเพิ่มเติม" button */
.inside-gallery-more-wrap{
  display:flex;justify-content:center;margin-top:24px;
}
.inside-gallery-more-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Anuphan',sans-serif;font-size:14px;font-weight:600;
  color:var(--blue);
  padding:12px 28px;background:#fff;
  border:1.5px solid var(--blue);border-radius:999px;
  cursor:pointer;transition:all .35s ease;
}
.inside-gallery-more-btn:hover{
  background:var(--blue);color:#fff;
  box-shadow:0 8px 20px rgba(14,79,160,.22);
  transform:translateY(-1px);
}
.inside-gallery-more-btn svg{transition:transform .35s ease;}
.inside-gallery-more-btn.is-expanded svg{transform:rotate(180deg);}

@media(max-width:640px){
  .inside-gallery-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .inside-gallery-heading{font-size:16px;}
}

/* Sidebar refinement */
.inside-sidebar .sidebar-card{
  background:#fff;border-radius:6px;
  padding:24px 22px;margin-bottom:20px;
  box-shadow:0 4px 16px rgba(15,33,139,.06),0 1px 2px rgba(15,23,42,.04);
  transition:box-shadow .4s ease;
}
.inside-sidebar .sidebar-card:hover{
  box-shadow:0 8px 24px rgba(15,33,139,.10),0 2px 4px rgba(15,23,42,.06);
}
.inside-sidebar h4{
  font-family:'Anuphan',sans-serif;font-size:15px;font-weight:700;
  color:var(--accent);
  margin:0 0 18px;padding-bottom:14px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.inside-sidebar ul{list-style:none;padding:0;margin:0;}
.inside-sidebar ul li{margin:0;}
.inside-sidebar ul li a{
  display:flex;flex-direction:column;gap:4px;
  padding:14px 0;
  font-family:'Anuphan',sans-serif;font-size:14px;font-weight:500;
  color:var(--ink);text-decoration:none;line-height:1.4;
  border-bottom:1px dashed rgba(0,0,0,.08);
  transition:color .3s ease,padding-left .3s ease;
}
.inside-sidebar ul li:last-child a{border-bottom:none;}
.sidebar-view-all{
  display:flex !important;align-items:center;justify-content:center;gap:10px;
  width:100%;margin-top:18px;
  padding-top:18px;
  border:none;
  border-top:1px solid rgba(0,0,0,.08);
  border-radius:0;
  background:transparent;
  color:var(--blue);
  font-family:'Anuphan',sans-serif;font-size:14px;font-weight:600;
  padding-bottom:0;
  transition:gap .3s ease,color .3s ease;
}
.sidebar-view-all:hover{
  background:transparent;
  color:var(--blue-dark);
  gap:14px;
}
.sidebar-view-all svg{transition:transform .3s ease;}
.sidebar-view-all:hover svg{transform:translateX(3px);}
.inside-sidebar ul li a:hover{
  color:var(--blue);padding-left:8px;
}
.inside-sidebar ul li a .date{
  font-size:11.5px;font-weight:500;color:var(--gray);
  letter-spacing:.04em;
}

/* Responsive */
@media(max-width:980px){
  .inside-meta-card{
    grid-template-columns:1fr;
    gap:16px;
  }
  .inside-meta-divider{
    width:100%;height:1px;
    background:linear-gradient(to right,transparent,rgba(0,0,0,.08),transparent);
  }
  .inside-section{padding-top:40px;}
  .inside-hero{padding-bottom:60px;}
}
@media(max-width:640px){
  .inside-cover{margin-bottom:24px;}
  .inside-headline{margin-bottom:24px;}
  .inside-headline-title{font-size:30px;}
  .inside-headline-sub{font-size:16px;}
  .inside-meta-card{padding:20px;}
  .inside-meta-value{font-size:13px;}
  .inside-body .inside-lead{font-size:16px;margin-bottom:24px;padding-bottom:24px;}
  .inside-body h2{font-size:19px;margin:32px 0 14px;}
  .inside-body p,.inside-body ul li{font-size:14.5px;}
  .inside-body blockquote{font-size:16px;padding:24px 22px 24px 50px;margin:28px 0;}
  .inside-body blockquote::before{font-size:48px;left:12px;top:10px;}
}

/* ============================================
   CERTIFICATE INSIDE PAGE
   Document-style two-column layout
   Different from activity-inside (which uses magazine top-down layout)
   ============================================ */

/* Hero — uses banner image (like activity-inside) */
.cert-inside-hero{
  padding-bottom:80px;padding-top:60px;
  position:relative;
}
.cert-inside-hero .banner-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,33,139,.55) 0%,rgba(10,15,40,.75) 100%);
}

/* Eyebrow — sits above datasheet now (was in hero) */
.cert-detail .cert-inside-eyebrow{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 0 18px;
}
.cert-inside-cat{
  font-family:'Anuphan',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue);
  background:#fff;border:1px solid var(--blue);
  padding:5px 14px;border-radius:999px;
}
.cert-inside-date{
  font-family:'Anuphan',sans-serif;font-size:14px;font-weight:600;
  color:var(--accent);
}

/* Two-column layout: showcase left, detail right */
.cert-inside-section{padding-top:56px;padding-bottom:80px;}
.cert-inside-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:56px;
  align-items:start;
}

/* LEFT: Certificate showcase (sticky on scroll) */
.cert-showcase{
  position:sticky;top:100px;
}
.cert-showcase-frame{
  background:#fff;
  border-radius:6px;
  padding:24px;
  box-shadow:0 12px 32px rgba(15,33,139,.10),0 2px 6px rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.04);
  position:relative;
}
.cert-showcase-stack{
  position:relative;
  background:#f4f6fa;
  border-radius:2px;
  overflow:hidden;
  min-height:200px;
}
.cert-showcase-img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  background:#f4f6fa;
}
.cert-showcase-img:not(.is-active){
  display:none;
}

/* Nav arrows (prev/next) — overlaid on frame */
button.cert-showcase-nav,
.cert-showcase-nav{
  position:absolute;
  top:50%;transform:translateY(-50%);
  width:40px;height:40px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--blue);
  border:1px solid rgba(14,79,160,.15);
  border-radius:50%;
  box-shadow:0 4px 12px rgba(15,33,139,.18),0 1px 3px rgba(0,0,0,.06);
  cursor:pointer;
  transition:all .25s ease;
  z-index:3;
  outline:none;
}
button.cert-showcase-nav.cert-showcase-nav:hover,
.cert-showcase-nav.cert-showcase-nav:hover{
  background:#0e4fa0 !important;
  background-color:#0e4fa0 !important;
  color:#fff !important;
  border-color:#0e4fa0 !important;
  box-shadow:0 6px 16px rgba(14,79,160,.32);
  text-decoration:none !important;
}
button.cert-showcase-nav.cert-showcase-nav:focus,
button.cert-showcase-nav.cert-showcase-nav:focus-visible,
.cert-showcase-nav.cert-showcase-nav:focus,
.cert-showcase-nav.cert-showcase-nav:focus-visible{
  background:#fff !important;
  background-color:#fff !important;
  color:#0e4fa0 !important;
  border-color:#0e4fa0 !important;
  outline:2px solid rgba(14,79,160,.35);
  outline-offset:2px;
}
button.cert-showcase-nav.cert-showcase-nav:focus:hover,
.cert-showcase-nav.cert-showcase-nav:focus:hover{
  background:#0e4fa0 !important;
  background-color:#0e4fa0 !important;
  color:#fff !important;
}
.cert-showcase-nav svg{width:18px;height:18px;display:block;}
.cert-showcase-prev{left:-22px;}
.cert-showcase-next{right:-22px;}
.cert-showcase-counter{
  position:absolute;
  bottom:-14px;left:50%;transform:translateX(-50%);
  font-family:'Anuphan',sans-serif;font-size:12px;font-weight:600;
  color:#fff;
  background:rgba(14,33,80,.85);
  padding:6px 16px;border-radius:999px;
  z-index:3;
  letter-spacing:.02em;
  box-shadow:0 4px 10px rgba(14,33,80,.22);
}

/* Certificate Download button */
.cert-actions{margin:-16px 0 34px;}
.cert-download{display:inline-flex;align-items:center;gap:12px;padding:13px 28px;border-radius:999px;border:1.5px solid var(--blue);background:transparent;color:var(--blue);font-family:'Anuphan',sans-serif;font-weight:600;font-size:var(--fs-sm);letter-spacing:.02em;text-decoration:none;transition:background .3s ease,color .3s ease,border-color .3s ease;}
.cert-download:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
.cert-download svg{width:18px;height:18px;flex-shrink:0;transition:transform .3s ease;}
.cert-download:hover svg{transform:translateY(2px);}

/* Clickable certificate thumbnail (zoom-in cursor + magnifier icon) */
.cert-showcase-stack.is-zoomable{cursor:zoom-in;}
.cert-showcase-zoom{position:absolute;right:12px;bottom:12px;z-index:2;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(14,33,80,.82);color:#fff;pointer-events:none;opacity:0;transform:scale(.9);transition:opacity .25s ease,transform .25s ease;}
.cert-showcase-zoom svg{width:19px;height:19px;}
.cert-showcase-stack.is-zoomable:hover .cert-showcase-zoom,
.cert-showcase-stack.is-zoomable:focus-visible .cert-showcase-zoom{opacity:1;transform:scale(1);}

/* Certificate Lightbox */
.cert-lightbox{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);}
.cert-lightbox.open{display:flex;}
.cert-lightbox-backdrop{position:absolute;inset:0;background:rgba(10,18,40,.82);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.cert-lightbox-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:min(880px,100%);max-height:100%;animation:certPop .28s cubic-bezier(.2,.8,.2,1);}
@keyframes certPop{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}
.cert-lightbox-close{position:absolute;z-index:4;top:clamp(14px,2.4vw,28px);right:clamp(14px,2.4vw,28px);width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:#fff;color:var(--blue);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.3);transition:background .25s,color .25s;padding: 0px;}
.cert-lightbox-close:hover,.cert-lightbox-close:focus,.cert-lightbox-close:focus-visible{background:var(--blue);color:#fff;outline:none;}
.cert-lightbox-close svg{width:20px;height:20px;}
.cert-lightbox-counter{font-family:'Anuphan',sans-serif;font-size:14px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.85);text-align:center;}
.cert-lightbox-stage{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.6vw,18px);width:100%;min-width:0;}
.cert-lightbox-img{
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
  max-height:72vh;
  width:auto;
  height:auto;
  display:block;
  background:#fff;
  border-radius:6px !important;
  padding:14px;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  object-fit:contain;
}
.cert-lightbox-nav{padding: 0px; flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.92);color:var(--blue);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.3);transition:background .25s,color .25s;}
.cert-lightbox-nav:hover,.cert-lightbox-nav:focus,.cert-lightbox-nav:focus-visible{background:var(--blue);color:#fff;outline:none;}
.cert-lightbox-nav svg{width:20px;height:20px;}
.cert-lightbox-bar{display:flex;align-items:center;justify-content:center;}
.cert-lightbox-bar .cert-download{background:#fff;border-color:#fff;color:var(--blue);}
.cert-lightbox-bar .cert-download:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
@media(max-width:680px){
  .cert-actions{margin:-8px 0 28px;}
  .cert-lightbox-img{max-height:62vh;padding:8px;}
  .cert-lightbox-close{width:38px;height:38px;}
  .cert-lightbox-nav{width:36px;height:36px;}
  .cert-lightbox-nav svg{width:18px;height:18px;}
  .cert-lightbox-stage{gap:6px;}
}

/* RIGHT: Detail column */
.cert-detail{font-family:'Anuphan',sans-serif;}

/* Data sheet — formal info table */
.cert-datasheet{
  background:#fff;
  border-radius:6px;
  padding:28px 30px;
  margin:0 0 36px;
  box-shadow:0 4px 16px rgba(15,33,139,.06),0 1px 2px rgba(0,0,0,.03);
}
.cert-datasheet-heading{
  font-family:'Anuphan',sans-serif;font-size:15px;font-weight:700;
  color:var(--accent);
  margin:0 0 18px;padding-bottom:14px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.cert-datasheet-list{margin:0;display:flex;flex-direction:column;gap:14px;}
.cert-datasheet-row{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:24px;align-items:baseline;
}
.cert-datasheet-row dt{
  font-size:13px;font-weight:500;color:var(--gray);
}
.cert-datasheet-row dd{
  margin:0;font-size:15px;font-weight:600;color:var(--ink);
  line-height:1.4;
}

/* Body — document style, no magazine flourishes */
.cert-body{margin:0 0 40px;}
.cert-body pre.wp-block-preformatted{
  font-family:inherit;
  white-space:pre-wrap;
  font-size:15px;line-height:1.8;color:#3a3a3a;
}
.cert-body .cert-lead{
  font-size:16.5px;line-height:1.8;color:var(--ink);
  margin:0 0 28px;
}
.cert-body .cert-lead strong{color:var(--blue);font-weight:600;}
.cert-body p{
  font-size:15px;line-height:1.85;color:#3a3a3a;
}
.cert-body strong{color:var(--ink);font-weight:600;}

.cert-body h2{
  font-family:'Anuphan',sans-serif;font-size:18px;font-weight:700;
  letter-spacing:-.005em;color:var(--blue-dark);
  margin:36px 0 14px;
  display:flex;align-items:center;gap:14px;
}
.cert-body h2::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(to right,rgba(14,79,160,.2),transparent);
}

/* Scope list — checkmarks instead of bullets */
.cert-scope-list{
  list-style:none;padding:0;margin:0 0 28px;
  display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;
}
.cert-scope-list li{
  position:relative;
  font-size:14.5px;line-height:1.5;color:#3a3a3a;
  padding:6px 0 6px 30px;
}
.cert-scope-list li::before{
  content:"";position:absolute;left:0;top:8px;
  width:20px;height:20px;border-radius:50%;
  background:var(--blue-light);
}
.cert-scope-list li::after{
  content:"";position:absolute;left:6px;top:12px;
  width:8px;height:5px;
  border-left:1.8px solid var(--blue);
  border-bottom:1.8px solid var(--blue);
  transform:rotate(-45deg);
}

/* Related certificates — horizontal carousel */
.cert-related{margin:48px 0 36px;}
.cert-related-head{
  display:flex;justify-content:space-between;align-items:center;
  margin:0 0 18px;gap:16px;
}
.cert-related-heading{
  font-family:'Anuphan',sans-serif;font-size:15px;font-weight:700;
  color:var(--accent);
  margin:0;
}
.cert-related-nav{display:flex;gap:8px;}
button.cert-related-arrow,
.cert-related-arrow{
  width:36px;height:36px;padding:0;border-radius:50%;
  background:#fff;border:1px solid rgba(15,33,139,.15);
  color:var(--blue);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .3s ease;
  outline:none;
}
.cert-related-arrow svg{width:16px;height:16px;display:block;}
button.cert-related-arrow.cert-related-arrow:hover:not(:disabled),
.cert-related-arrow.cert-related-arrow:hover:not(:disabled){
  background:#0e4fa0 !important;
  background-color:#0e4fa0 !important;
  color:#fff !important;
  border-color:#0e4fa0 !important;
  box-shadow:0 4px 12px rgba(14,79,160,.2);
  text-decoration:none !important;
}
button.cert-related-arrow.cert-related-arrow:focus,
button.cert-related-arrow.cert-related-arrow:focus-visible,
.cert-related-arrow.cert-related-arrow:focus,
.cert-related-arrow.cert-related-arrow:focus-visible{
  background:#fff !important;
  background-color:#fff !important;
  color:#0e4fa0 !important;
  border-color:#0e4fa0 !important;
  outline:2px solid rgba(14,79,160,.35);
  outline-offset:2px;
}
button.cert-related-arrow.cert-related-arrow:focus:hover:not(:disabled),
.cert-related-arrow.cert-related-arrow:focus:hover:not(:disabled){
  background:#0e4fa0 !important;
  background-color:#0e4fa0 !important;
  color:#fff !important;
}
.cert-related-arrow:disabled,
.cert-related-arrow[disabled]{opacity:.35;cursor:not-allowed;}
button.cert-related-arrow.cert-related-arrow:disabled,
button.cert-related-arrow.cert-related-arrow:disabled:hover,
button.cert-related-arrow.cert-related-arrow[disabled],
button.cert-related-arrow.cert-related-arrow[disabled]:hover,
.cert-related-arrow.cert-related-arrow:disabled:hover,
.cert-related-arrow.cert-related-arrow[disabled]:hover{
  background:#fff !important;
  background-color:#fff !important;
  color:#0e4fa0 !important;
  border-color:rgba(15,33,139,.15) !important;
  box-shadow:none !important;
  cursor:not-allowed;
}

.cert-related-viewport{
  overflow:hidden;
  margin:0 -8px;
}
.cert-related-track{
  display:flex;gap:14px;
  padding:4px 8px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.cert-related-track::-webkit-scrollbar{display:none;}

.cert-related-card{
  flex:0 0 calc(33.333% - 10px);
  scroll-snap-align:start;
  display:block;
  background:#fff;
  border-radius:6px;
  padding:20px 18px;
  text-decoration:none;color:inherit;
  border:1px solid rgba(0,0,0,.06);
  transition:all .35s ease;
  min-width:200px;
}
.cert-related-card:hover{
  border-color:var(--blue);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(14,79,160,.10);
}
.cert-related-year{
  font-family:'Anuphan',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.08em;color:var(--accent);
  margin-bottom:6px;
}
.cert-related-title{
  font-family:'Anuphan',sans-serif;font-size:15px;font-weight:700;
  color:var(--ink);margin-bottom:6px;line-height:1.3;
  transition:color .35s ease;
}
.cert-related-card:hover .cert-related-title{color:var(--blue);}
.cert-related-desc{
  font-size:12.5px;line-height:1.5;color:var(--gray);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Back link */
.cert-back-wrap{margin-top:32px;}
.cert-back-link{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Anuphan',sans-serif;font-size:13.5px;font-weight:600;
  color:var(--blue);text-decoration:none;
  padding:10px 0;
  transition:gap .3s ease;
}
.cert-back-link:hover{gap:14px;color:var(--blue-dark);}
.cert-back-link svg{transition:transform .3s ease;}
.cert-back-link:hover svg{transform:translateX(-3px);}

/* Responsive */
@media(max-width:1100px){
  .cert-inside-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px;}
  .cert-datasheet{padding:24px 24px;}
  .cert-datasheet-row{grid-template-columns:140px 1fr;gap:18px;}
}
@media(max-width:880px){
  .cert-inside-layout{grid-template-columns:1fr;gap:40px;}
  .cert-showcase{position:static;max-width:520px;margin:0 auto;width:100%;}
  .cert-scope-list{grid-template-columns:1fr;}
  .cert-related-card{flex-basis:calc(50% - 7px);}

  /* Mobile safety net: mirrors allpage-3/certificate-inside.html inline <style>.
     Force the grid column to a fluid 1fr (defeats any stale computed pixel value),
     cap widths to viewport, and let long text/URLs wrap so nothing overflows. */
  .cert-inside-section,
  .cert-inside-layout,
  .cert-detail{max-width:100% !important;overflow-x:clip !important;}
  .cert-inside-layout{grid-template-columns:1fr !important;}
  .cert-datasheet-row{grid-template-columns:1fr !important;gap:4px !important;}
  .cert-showcase-img{max-width:100% !important;height:auto !important;}
  .cert-detail,
  .cert-body,
  .cert-body p,
  .cert-lead{min-width:0 !important;overflow-wrap:anywhere !important;word-break:break-word !important;}
  .cert-showcase-prev{left:8px !important;}
  .cert-showcase-next{right:8px !important;}
}
@media(max-width:560px){
  .cert-inside-hero{padding:36px 0 40px;}
  .cert-inside-section{padding-top:36px;padding-bottom:56px;}
  .cert-datasheet{padding:22px;}
  .cert-datasheet-row{grid-template-columns:1fr;gap:4px;}
  .cert-datasheet-row dt{font-size:11.5px;}
  .cert-datasheet-row dd{font-size:14.5px;}
  .cert-showcase-frame{padding:16px;}
  .cert-showcase-tab{font-size:12px;padding:8px 10px;}
  .cert-related-card{flex-basis:80%;min-width:0;}
  .cert-body h2{font-size:16.5px;margin:28px 0 12px;}
  .cert-body .cert-lead{font-size:15.5px;}
  .cert-body p{font-size:14.5px;}
}

/* ============================================================
   PROFILE PAGE — full styles (rebuilt, variables only)
   ============================================================ */

/* ---- About: certs + image placeholder ---- */
.about-certs{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.about-cert-badge{
  font-family:'Anuphan',sans-serif;font-size:12.5px;font-weight:600;
  color:var(--blue);background:var(--blue-light);
  border:1px solid rgba(14,79,160,.18);
  padding:7px 14px;border-radius:999px;white-space:nowrap;
}

/* ---- Image placeholders ---- */
.img-ph{position:relative;width:100%;height:100%;min-height:280px;border-radius:14px;overflow:hidden;background:var(--blue-light);}
.img-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.img-ph-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--blue);
  background:repeating-linear-gradient(45deg,rgba(14,79,160,.05) 0,rgba(14,79,160,.05) 12px,rgba(14,79,160,.09) 12px,rgba(14,79,160,.09) 24px);}
.img-ph-fallback svg{width:42px;height:42px;opacity:.55;}
.img-ph-fallback span{font-family:'Anuphan',sans-serif;font-size:12.5px;font-weight:500;color:rgba(14,79,160,.7);background:rgba(255,255,255,.7);padding:4px 12px;border-radius:999px;}
.img-ph:not(.img-ph--empty) .img-ph-fallback{display:none;}
.img-ph.dark{background:var(--blue-dark);}
.img-ph.dark .img-ph-fallback{color:#fff;background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 12px,rgba(255,255,255,.08) 12px,rgba(255,255,255,.08) 24px);}
.img-ph.dark .img-ph-fallback svg{opacity:.7;}
.img-ph.dark .img-ph-fallback span{color:var(--blue-light);background:rgba(255,255,255,.12);}

/* ---- Stats: dark band, large numbers, thin dividers ---- */
.profile-stats-section{padding-top:70px;padding-bottom:70px;}
.profile-stats-dark{background:linear-gradient(135deg,var(--blue-dark) 0%,var(--blue) 100%);padding:84px 0;position:relative;overflow:hidden;}
.profile-stats-dark::before{content:"";position:absolute;top:-120px;right:-80px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%);pointer-events:none;}
.profile-stats-dark .container{position:relative;z-index:2;}
.profile-stats-intro{margin-bottom:48px;max-width:560px;}
.profile-stats-intro .kicker{color:rgba(255,255,255,.75);margin-bottom:14px;}
.profile-stats-intro .kicker::before{background:rgba(255,255,255,.55);}
.profile-stats-intro h2{font-family:'Anuphan',sans-serif;font-size:clamp(26px,3.2vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.12;color:#fff;margin:0;}
.profile-stats-intro h2 .thin{font-weight:200;color:rgba(255,255,255,.78);}
.profile-stats-row{display:grid;grid-template-columns:repeat(4,1fr);}
.profile-stat{padding:8px 36px;border-left:1px solid var(--light-gray);align-items:center;display:flex;flex-direction:column;}
.profile-stat:first-child{padding-left:0;border-left:none;}
.profile-stats-dark .profile-stat{border-left-color:rgba(255,255,255,.16);}
.profile-stat-num{font-family:'Anuphan',sans-serif;font-weight:700;font-size:clamp(52px,6vw,84px);line-height:.95;letter-spacing:-.03em;color:var(--blue);display:flex;align-items:baseline; justify-content:center;}
.profile-stats-dark .profile-stat-num{color:#fff;}
.profile-stat-num small{font-size:.34em;font-weight:600;color:var(--accent);margin-left:2px;}
.profile-stats-dark .profile-stat-num small{color:var(--blue-light);}
.profile-stat-label{font-family:'Anuphan',sans-serif;font-size:14.5px;line-height:1.5;color:var(--gray);margin-top:16px;max-width:200px;}
.profile-stats-dark .profile-stat-label{color:rgba(255,255,255,.72);}
@media(max-width:880px){
  .profile-stats-row{grid-template-columns:1fr 1fr;gap:40px 0;}
  .profile-stat{padding:8px 28px;}
  .profile-stat:nth-child(odd){padding-left:0;border-left:none;}
  .profile-stat:nth-child(even){border-left:1px solid var(--light-gray);}
  .profile-stats-dark .profile-stat:nth-child(even){border-left-color:rgba(255,255,255,.16);}
}
@media(max-width:480px){.profile-stats-section{padding:50px 0;}.profile-stats-dark{padding:56px 0;}.profile-stat-label{font-size:13px;}}

/* ---- Vision & Mission: airy ---- */
.profile-vm-section{padding-top:90px;padding-bottom:90px;}
.profile-vm-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:start;}
.profile-vm-lead .kicker{margin-bottom:22px;}
.profile-vm-headline{font-family:'Anuphan',sans-serif;font-weight:700;font-size:clamp(30px,3.6vw,46px);line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin:0 0 22px;}
.profile-vm-headline .thin{font-weight:200;color:var(--blue);}
.profile-vm-sub{font-family:'Anuphan',sans-serif;font-size:16px;line-height:1.8;color:var(--gray);max-width:440px;margin:0;}
.profile-vm-defs{padding-top:6px;}
.profile-vm-def{padding:26px 0;border-bottom:1px solid var(--light-gray);}
.profile-vm-def:first-child{padding-top:0;}
.profile-vm-def:last-child{border-bottom:none;padding-bottom:0;}
.profile-vm-def-tag{display:block;font-family:'Anuphan',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px;}
.profile-vm-def p{font-family:'Anuphan',sans-serif;font-size:17px;line-height:1.6;color:var(--ink);margin:0;font-weight:500;}
@media(max-width:880px){.profile-vm-section{padding:60px 0;}.profile-vm-layout{grid-template-columns:1fr;gap:40px;}.profile-vm-sub{max-width:none;}}

/* ---- Timeline: clean list + interaction ---- */
.profile-journey-section{padding-top:90px;padding-bottom:90px;}
.profile-tl{max-width:780px;margin:48px auto 0;position:relative;}
.profile-tl-row{display:grid;grid-template-columns:120px 1fr;gap:28px;position:relative;padding-bottom:36px;cursor:pointer;outline:none;}
.profile-tl-row:last-child{padding-bottom:0;}
.profile-tl-row::before{content:"";position:absolute;left:148px;top:14px;bottom:-4px;width:2px;background:var(--blue-light);}
.profile-tl-row:last-child::before{display:none;}
.profile-tl-row::after{content:"";position:absolute;left:142px;top:8px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--blue);box-shadow:0 0 0 4px var(--blue-light);z-index:2;transition:transform .3s ease,background .3s ease,box-shadow .3s ease;}
.profile-tl-row.is-current::after{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(215,25,33,.14);}
.profile-tl-year{text-align:right;font-family:'Anuphan',sans-serif;font-weight:700;font-size:24px;color:var(--blue);letter-spacing:-.01em;line-height:1.1;padding-top:2px;transition:transform .3s ease,color .3s ease;}
.profile-tl-year span{display:block;font-size:12px;font-weight:500;color:var(--gray);letter-spacing:.05em;margin-top:2px;}
.profile-tl-row.is-current .profile-tl-year{color:var(--accent);}
.profile-tl-body{padding:2px 0 2px 14px;border-radius:10px;transition:transform .3s ease,box-shadow .3s ease,background .3s ease,padding .3s ease;}
.profile-tl-body h4{font-family:'Anuphan',sans-serif;font-size:18px;font-weight:700;color:var(--ink);margin:0 0 6px;line-height:1.3;}
.profile-tl-row.is-current .profile-tl-body h4{color:var(--accent);}
.profile-tl-body p{font-family:'Anuphan',sans-serif;font-size:14.5px;line-height:1.7;color:var(--gray);margin:0;}
.profile-tl-row:hover .profile-tl-body,.profile-tl-row:focus-visible .profile-tl-body,.profile-tl-row.is-active .profile-tl-body{background:#fff;padding:18px 22px;box-shadow:0 10px 30px rgba(15,33,139,.1);transform:translateX(6px);}
.profile-tl-row:hover::after,.profile-tl-row:focus-visible::after,.profile-tl-row.is-active::after{background:var(--blue);transform:scale(1.25);box-shadow:0 0 0 5px rgba(14,79,160,.16);}
.profile-tl-row.is-current:hover::after,.profile-tl-row.is-current.is-active::after{background:var(--accent);box-shadow:0 0 0 5px rgba(215,25,33,.18);}
.profile-tl-row:hover .profile-tl-year,.profile-tl-row.is-active .profile-tl-year{color:var(--blue-dark);}
.profile-tl-row.is-current:hover .profile-tl-year,.profile-tl-row.is-current.is-active .profile-tl-year{color:var(--accent);}
.profile-tl.has-active .profile-tl-row{transition:opacity .3s ease;}
.profile-tl.has-active .profile-tl-row:not(.is-active){opacity:.45;}
@media(max-width:600px){
  .profile-journey-section{padding:60px 0;}
  .profile-tl{margin-top:36px;}
  .profile-tl-row{grid-template-columns:78px 1fr;gap:18px;padding-bottom:28px;}
  .profile-tl-row::before{left:96px;}
  .profile-tl-row::after{left:90px;}
  .profile-tl-year{font-size:18px;}
  .profile-tl-year span{font-size:11px;}
  .profile-tl-body h4{font-size:16px;}
  .profile-tl-body p{font-size:13.5px;}
  .profile-tl-row:hover .profile-tl-body,.profile-tl-row.is-active .profile-tl-body{padding:14px 16px;transform:none;}
}

/* ---- Network: Thailand map with connected labels (reference style) ---- */
.profile-network-section{padding-top:110px;padding-bottom:110px;}
.profile-network-section .section-head{text-align:left;max-width:680px;margin:0 0 24px;}
.profile-network-section .section-head .kicker{justify-content:flex-start;}
/* stats column is narrower so the map gets more room and the top-right
   whitespace shrinks; align-items:center balances the two columns */
.net2-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,56px);align-items:center;margin-top:16px;}

/* stats on the LEFT, map on the RIGHT */
.net2-stats{order:1;}
.net2-map-area{order:2;}

/* map area: the overhang padding gives the side cards room to sit beside the
   map. A larger max-width makes the map itself bigger and fills the space. */
.net2-map-area{position:relative;width:100%;max-width:560px;margin:0 auto;padding:0 clamp(96px,17vw,150px);box-sizing:border-box;}
.net2-map-svg{width:100%;height:auto;display:block;overflow:visible;}
.net2-shape{fill:url(#net2MapFill);stroke:rgba(120,128,138,.4);stroke-width:.6;stroke-linejoin:round;}
.net2-pin circle{fill:color-mix(in srgb, var(--pin-color, #2ea8e0) 30%, transparent);}
.net2-pin .net2-pin-c{fill:var(--pin-color, #2ea8e0);}
.net2-pin--accent circle{fill:color-mix(in srgb, var(--pin-color, #2ea8e0) 30%, transparent);}
.net2-pin--accent .net2-pin-c{fill:var(--pin-color, #2ea8e0);}

/* connector overlay: covers the whole map-area; JS draws the polylines.
   pointer-events:none so it never blocks card hover. */
.net2-conn-overlay{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;z-index:1;
}
.net2-conn-overlay polyline{
  fill:none;
  stroke:#9bb8dd;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .25s ease,stroke-width .25s ease;
}
/* hover the card → its line changes colour (and thickens slightly) */
.net2-conn-overlay polyline.is-hover{stroke:var(--blue);stroke-width:2.5;}
.net2-conn-overlay polyline.is-hover-accent{stroke:var(--gray);stroke-width:2.5;}
.net2-conn-overlay polyline.is-hover-cyan{stroke:#2ea8e0;stroke-width:2.5;}
/* dot markers drawn on top of the connector lines (so dots cover the lines) */
.net2-conn-dot-ring{fill:rgba(46,168,224,.30);}
.net2-conn-dot-core{fill:#2ea8e0;}
.net2-conn-dot--accent .net2-conn-dot-ring{fill:rgba(46,168,224,.30);}
.net2-conn-dot--accent .net2-conn-dot-core{fill:#2ea8e0;}

/* label cards — real HTML overlays, full-size readable text (≥14px) */
.net2-cards{position:absolute;inset:0;z-index:2;}
.net2-card{
  position:absolute;
  box-sizing:border-box;
  width:clamp(150px,15vw,190px);
  background:#fff;
  border:1px solid var(--light-gray);
  border-radius:10px;
  padding:12px 14px;
  box-shadow:0 8px 22px rgba(14,79,160,.14);
  cursor:default;
  transition:box-shadow .2s ease,transform .2s ease,border-color .25s ease;
}
.net2-card:hover{
  box-shadow:0 12px 30px rgba(14,79,160,.22);transform:translateY(-2px);
  border-color:var(--blue);
}
.net2-card-title{
  display:block;
  font-family:'Anuphan',sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.01em;color:var(--ink);line-height:1.3;
}
.net2-card-sub{
  display:block;margin-top:6px;
  font-family:'Anuphan',sans-serif;font-size:14px;font-weight:400;
  line-height:1.5;color:var(--gray);
}
.net2-card-loc{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-family:'Anuphan',sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.02em;color:var(--blue);
}
.net2-card-loc::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0;
}
.net2-card--pdrc:hover{border-color:var(--gray);}
.net2-card--inslab:hover{border-color:#2ea8e0;}

/* ---- editorial stats: numeral + accent rule + label + note ---- */
.net2-stats{display:flex;flex-direction:column;align-self:center;}
.net2-stat{
  display:flex;align-items:flex-start;gap:20px;
  padding:24px 0;
  border-top:1px solid var(--light-gray);
  transition:border-color .25s ease;
}
.net2-stat:first-child{border-top:none;padding-top:0;}
.net2-stat:last-child{padding-bottom:0;}
.net2-stat-num{
  font-family:'Anuphan',sans-serif;font-size:clamp(46px,5vw,62px);font-weight:700;
  line-height:.85;letter-spacing:-.03em;flex-shrink:0;
  min-width:1.05em;
  color:var(--blue);
}
.net2-stat[data-accent="accent"] .net2-stat-num{color:var(--gray);}
.net2-stat[data-accent="cyan"] .net2-stat-num{color:#2ea8e0;}
.net2-stat[data-accent="blue"] .net2-stat-num{color:var(--blue);}
.net2-stat:first-child{border-top:1px solid transparent;padding-top:20px;}
.net2-stat-body{display:flex;flex-direction:column;gap:4px;padding-top:4px;}
.net2-stat-label{
  font-family:'Anuphan',sans-serif;font-size:16px;font-weight:700;
  letter-spacing:.01em;line-height:1.3;color:var(--ink);
}
.net2-stat-note{
  font-family:'Anuphan',sans-serif;font-size:13.5px;font-weight:400;
  line-height:1.5;color:var(--gray);
}

/* ---- mobile detail panel: shows ONE tapped location at a time ---- */
.net2-mobile-detail{display:none;margin-top:22px;}
.net2-md-hint{
  font-family:'Anuphan',sans-serif;font-size:14px;color:var(--gray);
  text-align:center;line-height:1.6;margin:0;
  padding:16px 18px;border:1px dashed var(--light-gray);border-radius:12px;
}
.net2-md-card{
  position:relative;
  background:#fff;border:1px solid var(--light-gray);
  border-radius:14px;padding:20px 22px 22px;
  box-shadow:0 10px 30px rgba(14,79,160,.12);
  animation:net2MdIn .35s cubic-bezier(.2,.8,.2,1);
}
.net2-md-card::before{
  content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;
  border-radius:0 4px 4px 0;background:var(--blue);
}
.net2-md-card[data-accent="accent"]::before{background:var(--gray);}
.net2-md-card[data-accent="cyan"]::before{background:#2ea8e0;}
@keyframes net2MdIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.net2-md-index{
  display:block;font-family:'Anuphan',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.12em;color:var(--blue);margin-bottom:8px;
}
.net2-md-card[data-accent="accent"] .net2-md-index{color:var(--gray);}
.net2-md-card[data-accent="cyan"] .net2-md-index{color:#1f86c4;}
.net2-md-title{
  display:block;font-family:'Anuphan',sans-serif;font-size:18px;font-weight:700;
  color:var(--ink);line-height:1.3;
}
.net2-md-sub{
  display:block;font-family:'Anuphan',sans-serif;font-size:14px;font-weight:400;
  line-height:1.6;color:var(--gray);margin-top:8px;
}
.net2-md-sub:empty{display:none;}
.net2-md-loc{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-family:'Anuphan',sans-serif;font-size:14px;font-weight:600;color:var(--blue);
}
.net2-md-loc::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.net2-md-card[data-accent="accent"] .net2-md-loc{color:var(--gray);}
.net2-md-card[data-accent="cyan"] .net2-md-loc{color:#1f86c4;}

/* tappable pins (mobile) */
.net2-pin-hit{fill:transparent;}
.net2-pin[role="button"]{cursor:pointer;}
.net2-pin[role="button"]:focus{outline:none;}
.net2-pin[role="button"]:focus-visible circle:not(.net2-pin-hit){stroke:#fff;stroke-width:1.5;}
.net2-pin.is-selected circle:not(.net2-pin-hit):not(.net2-pin-c){
  r:8;
}

/* ---------- responsive ---------- */
/* tablet / narrow desktop & mobile: STATS first, then interactive map.
   Hide the desktop floating cards + connector lines; tapping a pin fills
   the mobile detail panel instead of showing every card at once. */
@media(max-width:980px){
  .net2-layout{grid-template-columns:1fr;gap:36px;}
  .net2-stats{order:1;align-self:stretch;}
  /* map-area becomes a 2-col band: small map left, cards listed right */
  .net2-map-area{
    order:2;max-width:none;margin:0;padding:0;
    display:grid;grid-template-columns:minmax(120px,40%) 1fr;
    gap:clamp(28px,7vw,64px);align-items:center;
  }
  .net2-map-svg{grid-column:1;max-width:230px;margin:0;}
  /* cards: stop floating, stack as a list in the right column */
  .net2-cards{
    position:static;inset:auto;grid-column:2;
    display:flex;flex-direction:column;gap:14px;z-index:2;
  }
  .net2-card{position:static;width:auto;}
  /* keep connector overlay visible & spanning the whole band */
  .net2-conn-overlay{display:block;}
  .net2-mobile-detail{display:none;}
}
@media(max-width:600px){
  .profile-network-section{padding:60px 0;}
  .net2-stat{padding:20px 0;gap:16px;}
  .net2-map-area{gap:18px;}
  .net2-map-svg{max-width:150px;}
  .net2-card{padding:10px 12px;}
}


/* ---- Facilities: alternating image/text ---- */
.profile-facilities-section{padding-top:90px;padding-bottom:90px;}
.facility-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:100px;}
.facility-row:last-child{margin-bottom:0;}
.facility-row.reverse .facility-media{order:2;}
.facility-media{min-height:300px;}
.facility-media .img-ph{min-height:340px;}
.facility-body{min-width:0;}
.facility-tag{display:inline-block;font-family:'Anuphan',sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;}
.facility-body h3{font-family:'Anuphan',sans-serif;font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.25;margin:0 0 16px;}
.facility-body p{font-family:'Anuphan',sans-serif;font-size:14.5px;line-height:1.75;color:var(--gray);margin:0 0 14px;}
.facility-addr{font-size:13px !important;color:var(--dark-gray) !important;padding:12px 16px;background:var(--off-white);border-left:3px solid var(--blue);border-radius:0 8px 8px 0;}
.facility-points{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px;}
.facility-points.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;}
.facility-points li{position:relative;font-family:'Anuphan',sans-serif;font-size:14px;line-height:1.5;color:var(--dark-gray);padding-left:24px;}
.facility-points li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--blue);}
.facility-certs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
@media(max-width:880px){
  .facility-row{grid-template-columns:1fr;gap:24px;margin-bottom:48px;}
  .facility-row.reverse .facility-media{order:0;}
  .facility-media .img-ph{min-height:240px;}
  .facility-points.two-col{grid-template-columns:1fr;}
  .facility-body h3{font-size:20px;}
}
@media(max-width:600px){.profile-facilities-section{padding:60px 0;}.about-unified-visual .img-ph{min-height:240px;}}

/* ============================================================
   PROFILE PAGE — Executives / Leadership
   ============================================================ */
.profile-exec-section{
  background:var(--off-white);
  padding:110px 0;
  position:relative;overflow:hidden;
}
.profile-exec-section .container{position:relative;z-index:2;}
.exec-head{margin:0 0 48px;max-width:680px;}
.exec-head .kicker{color:var(--blue);margin-bottom:14px;}
.exec-head .kicker::before{background:var(--blue);}
.exec-head h2{
  font-family:'Anuphan',sans-serif;font-size:clamp(28px,3.4vw,42px);font-weight:700;
  letter-spacing:-.02em;line-height:1.12;color:var(--ink);margin:0;
}
.exec-head h2 .thin{font-weight:200;color:var(--gray);}
.exec-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
}
.exec-card{
  border:1px solid var(--mid-gray);
  border-radius:18px;
  padding:44px 32px 36px;
  text-align:center;
  background:var(--white);
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.exec-card:hover{
  border-color:var(--blue);
  box-shadow:0 12px 32px rgba(14,79,160,.12);
  transform:translateY(-4px);
}
.exec-photo{
  width:160px;height:160px;border-radius:50%;
  margin:0 auto 24px;
  overflow:hidden;position:relative;
  background:linear-gradient(160deg,#1a5fb0,#0a3a78);
  border:1px solid rgba(14,79,160,.2);
  box-shadow:0 10px 30px rgba(14,79,160,.18);
}
.exec-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  display:block;
}
.exec-photo-fallback{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.6);
}
.exec-photo-fallback svg{width:54px;height:54px;}
.exec-photo:not(.exec-photo--empty) .exec-photo-fallback{display:none;}
.exec-name{
  font-family:'Anuphan',sans-serif;font-size:20px;font-weight:700;
  color:var(--ink);margin:0 0 4px;line-height:1.3;
}
.exec-name-en{
  font-family:'Anuphan',sans-serif;font-size:13.5px;font-weight:400;
  color:var(--gray);margin:0 0 12px;
}
.exec-role{
  font-family:'Anuphan',sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.02em;
  color:var(--blue);margin:0;
}
@media(max-width:760px){
  .profile-exec-section{padding:60px 0;}
  .exec-grid{grid-template-columns:1fr;gap:20px;margin:0 auto;}
  .exec-head{margin-bottom:36px;}
}
@media(max-width:480px){
  .exec-photo{width:140px;height:140px;}
  .exec-card{padding:36px 24px 30px;}
}

/* ============================================================
   PROFILE PAGE — Horizontal dark timeline (reference style)
   ============================================================ */
.profile-timeline-dark{
  background:linear-gradient(160deg,#0a0e14 0%,#0d1526 55%,#0a1020 100%);
  padding:84px 0 70px;
  position:relative;overflow:hidden;
}
.profile-timeline-dark::before{
  content:"";position:absolute;top:-140px;right:-120px;
  width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,79,160,.22),transparent 70%);
  pointer-events:none;
}
.profile-timeline-dark .ptl-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  margin-bottom:8px;
}
.profile-timeline-dark .ptl-head-text{max-width:620px;}
.profile-timeline-dark .kicker{color:rgba(255,255,255,.7);margin-bottom:14px;}
.profile-timeline-dark .kicker::before{background:var(--blue);}
.profile-timeline-dark .ptl-head h2{
  font-family:'Anuphan',sans-serif;font-size:clamp(28px,3.4vw,42px);font-weight:700;
  letter-spacing:-.02em;line-height:1.12;color:#fff;margin:0;
}
.profile-timeline-dark .ptl-head h2 .thin{font-weight:200;color:rgba(255,255,255,.6);}

/* scroll area */
.ptl-scroll{
  overflow-x:auto;overflow-y:hidden;
  padding:20px 0 10px;
  margin-top:24px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.ptl-scroll::-webkit-scrollbar{display:none;height:0;width:0;}
/* arrow navigation */
.ptl-viewport{position:relative;}
.ptl-nav-bar{
  display:flex;gap:12px;flex-shrink:0;
  padding-top:6px;
}
.ptl-footer-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:28px;
}
.ptl-footer-row .ptl-footer{margin-top:0;text-align:left;}
.ptl-footer-row .ptl-nav-bar{margin-left:auto;padding-top:0;}
.ptl-nav{
  width:48px;height:48px;border-radius:50%;
  background:var(--blue);
  border:1px solid rgba(255,255,255,.4);
  color:#fff;
  display:grid;place-items:center;
  cursor:pointer;outline:none;
  box-shadow:0 4px 16px rgba(0,0,0,.4),0 0 0 4px rgba(14,79,160,.25);
  transition:background .25s ease,border-color .25s ease,opacity .25s ease,transform .15s ease;
}
.ptl-nav:hover{background:var(--blue-dark);border-color:#fff;}
.ptl-nav:active{transform:scale(.94);}
.ptl-nav:focus-visible{border-color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.4),0 0 0 4px rgba(255,255,255,.4);}
.ptl-nav svg{width:22px;height:22px;}
.ptl-nav[disabled]{opacity:.3;cursor:default;pointer-events:none;}
@media(max-width:600px){
  .ptl-nav{width:42px;height:42px;}
  .ptl-nav svg{width:18px;height:18px;}
}
.ptl-track{
  position:relative;
  display:flex;
  gap:0;
  min-width:max-content;
  padding:0 max(24px,calc((100vw - var(--maxw))/2 + 24px));
  align-items:center;
}
.ptl-line{
  position:absolute;
  left:0;right:0;top:50%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(14,79,160,.55) 12%,rgba(14,79,160,.55) 88%,transparent);
  transform:translateY(-1px);
  z-index:0;
}

/* node */
.ptl-node{
  position:relative;
  z-index:1;
  width:300px;flex:0 0 300px;
  display:flex;flex-direction:column;
  cursor:pointer;outline:none;
}
/* card edge sits 24px from the dot's edge (dot radius 8px → 32px from the
   centre line). up: card pinned just above the line; down: just below it. */
.ptl-node.up{justify-content:flex-end;height:480px;padding-bottom:272px;}
.ptl-node.down{justify-content:flex-start;height:480px;padding-top:272px;}

/* connector dot on the line */
.ptl-dot{
  position:absolute;left:24px;top:50%;
  width:16px;height:16px;border-radius:50%;
  background:var(--blue);
  transform:translateY(-50%);
  box-shadow:0 0 0 5px rgba(14,79,160,.25),0 0 14px 2px rgba(14,79,160,.6);
  transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
  z-index:3;
}

/* card */
.ptl-card{
  width:248px;
  padding:4px 18px 4px 24px;
  position:relative;
}
.ptl-year{
  font-family:'Anuphan',sans-serif;font-weight:700;font-size:22px;
  color:#fff;letter-spacing:-.01em;line-height:1;margin-bottom:8px;
}
.ptl-year span{font-size:12px;font-weight:500;color:rgba(255,255,255,.45);margin-left:4px;}
.ptl-card h4{
  font-family:'Anuphan',sans-serif;font-size:16px;font-weight:700;
  color:#fff;margin:0 0 8px;line-height:1.3;
}
.ptl-points{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:6px;
}
.ptl-points li{
  position:relative;
  font-family:'Anuphan',sans-serif;font-size:13px;line-height:1.55;
  color:rgba(255,255,255,.62);
  padding-left:16px;
}
.ptl-points li::before{
  content:"";position:absolute;left:0;top:8px;
  width:5px;height:5px;border-radius:50%;
  background:var(--blue);
}
.ptl-node.is-current .ptl-points li::before{background:var(--accent);}

/* hover / active / focus highlight */
.ptl-node:hover .ptl-dot,
.ptl-node:focus-visible .ptl-dot,
.ptl-node.is-active .ptl-dot{
  transform:translateY(-50%) scale(1.3);
  box-shadow:0 0 0 6px rgba(14,79,160,.3),0 0 22px 4px rgba(14,79,160,.85);
}
.ptl-node:hover .ptl-card h4,
.ptl-node.is-active .ptl-card h4{color:#fff;}
.ptl-node:hover .ptl-points li,
.ptl-node.is-active .ptl-points li{color:rgba(255,255,255,.85);}

/* current year (2569) uses accent */
.ptl-node.is-current .ptl-dot{
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(215,25,33,.22),0 0 16px 3px rgba(215,25,33,.6);
}
.ptl-node.is-current:hover .ptl-dot,
.ptl-node.is-current.is-active .ptl-dot{
  box-shadow:0 0 0 6px rgba(215,25,33,.3),0 0 24px 5px rgba(215,25,33,.85);
}

/* dim others when one active */
.ptl-track.has-active .ptl-node:not(.is-active){opacity:.4;transition:opacity .3s ease;}

.ptl-footer{
  text-align:center;margin-top:28px;
  font-family:'Anuphan',sans-serif;font-size:13px;letter-spacing:.04em;
  color:rgba(255,255,255,.5);
}

@media(max-width:600px){
  .profile-timeline-dark{padding:56px 0 48px;}

  /* Vertical timeline that auto-scrolls (glides) top↕bottom; up/down arrows page it. */
  .ptl-scroll{overflow-x:hidden;overflow-y:auto;max-height:64vh;padding:10px 4px 10px 0;margin-top:20px;}
  .ptl-track{flex-direction:column;align-items:stretch;min-width:0;gap:4px;padding:4px 0 4px 6px;}

  /* line runs vertically down the left edge (pinned at 19px) */
  .ptl-line{
    left:25px;right:auto;top:0;bottom:0;width:2px;height:auto;transform:none;
    background:linear-gradient(180deg,transparent,rgba(14,79,160,.55) 3%,rgba(14,79,160,.55) 97%,transparent);
  }

  /* nodes stack; up/down distinction is dropped — every card sits to the right */
  .ptl-node,
  .ptl-node.up,
  .ptl-node.down{width:auto;flex:0 0 auto;height:auto;display:block;padding:0 0 30px;}

  /* dot pinned to the left line (centred on the 19px line), aligned with the year */
  .ptl-dot{left:12px;top:3px;transform:none;}
  .ptl-node:hover .ptl-dot,
  .ptl-node:focus-visible .ptl-dot,
  .ptl-node.is-active .ptl-dot{transform:scale(1.25);}

  .ptl-card{width:auto;padding:0 6px 0 44px;}

  /* node always active: never dim, keep text bright */
  .ptl-track.has-active .ptl-node:not(.is-active){opacity:1;}
  .ptl-card h4{color:#fff;}
  .ptl-points li{font-size:12.5px;color:rgba(255,255,255,.85);}

  /* arrows point up / down instead of left / right */
  .ptl-nav svg{transform:rotate(90deg);}
}

/* ===== Journey Timeline (gtl) — single-year stage with year axis + auto-advance ===== */
.gtl{padding:110px 0;}
.gtl .gtl-topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 30px;}
.gtl .section-head{text-align:left;max-width:680px;margin:0;}
.gtl .section-head .kicker{justify-content:flex-start;}
.gtl .section-head h2{color:#fff;margin-bottom:0;}
.gtl-nav{display:flex;gap:12px;flex-shrink:0;}

.gtl-stage{position:relative;min-height:340px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px;padding:26px 0 54px;}
.gtl-year{font-family:'Anuphan',sans-serif;font-weight:800;font-size:clamp(84px,14vw,196px);line-height:.86;color:var(--blue);letter-spacing:-.045em;display:flex;align-items:flex-start;gap:14px;}
.gtl-year span{font-size:.15em;font-weight:600;color:rgba(255,255,255,.45);margin-top:.7em;letter-spacing:.05em;}
.gtl-info h3{font-family:'Anuphan',sans-serif;font-size:clamp(20px,2.4vw,32px);font-weight:700;color:#fff;margin:0 0 18px;line-height:1.2;letter-spacing:-.01em;}
.gtl-info ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.gtl-info li{position:relative;padding-left:22px;font-weight:300;font-size:var(--fs-md);color:rgba(255,255,255,.78);line-height:1.6;}
.gtl-info li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--blue);}
.gtl-year,.gtl-info{transition:opacity .4s ease,transform .45s cubic-bezier(.4,0,.2,1);}
.gtl-stage.is-changing.to-next .gtl-year,.gtl-stage.is-changing.to-next .gtl-info{opacity:0;transform:translateX(-48px);}
.gtl-stage.is-changing.to-prev .gtl-year,.gtl-stage.is-changing.to-prev .gtl-info{opacity:0;transform:translateX(48px);}
.gtl-stage.enter.to-next .gtl-year,.gtl-stage.enter.to-next .gtl-info{opacity:0;transform:translateX(48px);transition:none;}
.gtl-stage.enter.to-prev .gtl-year,.gtl-stage.enter.to-prev .gtl-info{opacity:0;transform:translateX(-48px);transition:none;}

.gtl-axis{display:flex;align-items:center;gap:24px;margin-bottom:40px;}
button.gtl-arrow,
.gtl-arrow{flex-shrink:0;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,color .25s,border-color .25s;-webkit-appearance:none;appearance:none;box-shadow:none;outline:none;}
button.gtl-arrow.gtl-arrow:focus,
button.gtl-arrow.gtl-arrow:active,
.gtl-arrow.gtl-arrow:focus,
.gtl-arrow.gtl-arrow:active{background:transparent!important;background-color:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.28)!important;outline:none;box-shadow:none;}
button.gtl-arrow.gtl-arrow:hover,
button.gtl-arrow.gtl-arrow:focus:hover,
.gtl-arrow.gtl-arrow:hover,
.gtl-arrow.gtl-arrow:focus:hover{background:#fff!important;background-color:#fff!important;color:#0a0e14!important;border-color:#fff!important;}
.gtl-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.gtl-arrow svg{width:22px;height:22px;}
.gtl-rail-wrap{position:relative;flex:1;display:flex;align-items:center;height:46px;}
.gtl-rail{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.22);}
.gtl-points{position:relative;flex:1;display:flex;justify-content:space-between;align-items:center;}
button.gtl-point,
.gtl-point{position:relative;background:transparent;border:0;cursor:pointer;padding:0;height:46px;display:flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none;box-shadow:none;outline:none;color:inherit;}
button.gtl-point.gtl-point:focus,
button.gtl-point.gtl-point:active,
button.gtl-point.gtl-point:hover,
.gtl-point.gtl-point:focus,
.gtl-point.gtl-point:active,
.gtl-point.gtl-point:hover{background:transparent!important;background-color:transparent!important;box-shadow:none;outline:none;}
.gtl-point:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:4px;border-radius:6px;}
.gtl-point .gtl-d{width:10px;height:10px;border-radius:50%;background:#fff;transition:background .3s,width .3s,height .3s,box-shadow .3s;}
.gtl-point .gtl-lbl{position:absolute;top:46px;left:50%;transform:translateX(-50%);font-family:'Anuphan',sans-serif;font-weight:600;font-size:clamp(15px,1.5vw,22px);color:rgba(255,255,255,.5);transition:color .3s;white-space:nowrap;}
.gtl-point:hover .gtl-d{background:#fff;}
.gtl-point:hover .gtl-lbl{color:#fff;}
.gtl-point.is-active .gtl-d{background:var(--blue);width:14px;height:14px;box-shadow:0 0 0 5px rgba(14,79,160,.22);}
.gtl-point.is-active .gtl-lbl,.gtl-point.is-active:hover .gtl-lbl{color:#4d8fe0;}

@media(max-width:760px){
  .gtl-stage{grid-template-columns:1fr;gap:18px;min-height:0;padding:18px 0 60px;text-align:left;}
  .gtl-year{font-size:clamp(72px,22vw,120px);}
  .gtl-axis{gap:12px;}
  .gtl-arrow{width:40px;height:40px;}
  .gtl-arrow svg{width:18px;height:18px;}
  .gtl-point .gtl-lbl{font-size:12px;}
}

/* Pyramid responsive overrides */
@media(max-width:880px){
  .product-grid--pyramid{grid-template-columns:1fr 1fr;}
  .product-grid--pyramid > .product-card{grid-row:auto !important;grid-column:auto !important;height:auto !important;aspect-ratio:4/3 !important;}
}
@media(max-width:600px){
  .product-grid--pyramid{grid-template-columns:1fr;}
}

/* ========== DJI ASC Editorial Section ========== */
.asc2{background:linear-gradient(180deg,var(--off-white) 0%,#eef1f5 100%);overflow:hidden;}
.asc2-grid{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:center;}
.asc2-left{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:clamp(20px,4vw,50px) 0;}
.asc2-brandrow{display:inline-flex;align-items:center;gap:16px;margin-bottom:26px;}
.asc2-brandrow img{height:22px;width:auto;object-fit:contain;display:block;filter:grayscale(1) brightness(0);opacity:1;}
.asc2-brandrow .sep{width:1px;height:24px;background:var(--mid-gray);}
.asc2-eyebrow{font-family:'Anuphan',sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin-bottom:22px;}
.asc2-title{font-family:'Anuphan',sans-serif;font-weight:800;font-size:clamp(30px,3.8vw,48px);line-height:1.2;color:var(--blue);margin:0 0 28px;max-width:520px;letter-spacing:-.015em;}
.asc2-features{display:flex;flex-direction:column;margin:0;}
.asc2-feature{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid #1a1a1a14;}
.asc2-feature:last-child{border-bottom:none;}
.asc2-feature .ic{flex-shrink:0;width:50px;height:50px;border-radius:14px;background:var(--white);border:1px solid var(--light-gray);display:grid;place-items:center;color:var(--blue);}
.asc2-feature .ic svg{width:24px;height:24px;display:block;}
.asc2-feature .txt{display:flex;flex-direction:column;gap:2px;padding-top:4px;}
.asc2-feature .txt b{font-weight:600;font-size:var(--fs-sm);color:var(--ink);line-height:1.4;}
.asc2-feature .txt span{font-weight:300;font-size:13px;color:var(--dark-gray);line-height:1.55;}
.asc2-desc{font-weight:300;font-size:clamp(13.5px,1.1vw,15px);color:var(--dark-gray);line-height:1.85;max-width:460px;margin:0 0 32px;}
.asc2-right{position:relative;align-self:stretch;min-height:580px;}
.asc2-hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;display:block;border-radius:18px;}
.asc2-card{position:absolute;right:0;bottom:0;width:min(360px,82%);background:var(--blue);color:#fff;padding:28px 30px 26px;display:flex;flex-direction:column;min-height:248px;z-index:2;border-radius:16px;box-shadow:0 20px 46px rgba(14,79,160,.26);transform-origin:bottom right;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease;}
.asc2-card:hover{transform:scale(1.08);box-shadow:0 30px 64px rgba(14,79,160,.34);}
.asc2-card .asc2-arrow{width:30px;height:30px;color:#fff;display:block;}
.asc2-card h3{font-family:'Anuphan',sans-serif;font-weight:600;font-size:clamp(19px,1.9vw,24px);text-align:center;margin:auto 0;letter-spacing:.01em;}
.asc2-contact{margin-top:auto;display:flex;flex-direction:column;gap:8px;font-size:12.5px;font-weight:300;color:rgba(255,255,255,.78);line-height:1.6;}
.asc2-contact strong{display:block;font-weight:500;color:#fff;margin-bottom:4px;}
.asc2-contact a{color:#fff;transition:opacity .2s;}
.asc2-contact a:hover{opacity:.7;}
@media(max-width:860px){
  .asc2-grid{grid-template-columns:1fr;gap:0;}
  .asc2-left{padding:8px 0 40px;}
  /* Stacked (tablet): the image block keeps a 4:3 shape and the card stays overlaid on its corner, as on
     desktop. The shape comes from a spacer rather than aspect-ratio, which would turn a min-height set in
     Elementor into a min-width and push the block wider than the page. */
  .asc2-right{min-height:0;}
  .asc2-right::before{content:"";display:block;padding-top:75%;}
  .asc2-right .asc2-hero{height:100%;}
}
/* Phones: the image, then the card on its own row below it with a gap */
@media(max-width:767px){
  /* !important: the widget's "Right Column Min Height" (580px by default, all devices) would otherwise
     leave an empty strip under the card here; the section's own bottom padding is the spacing. */
  .asc2-right{min-height:0 !important;}
  .asc2-right::before{display:none;}
  /* !important: pages may carry a custom `.asc2-hero{height:100% !important}` (added so the desktop image
     fills its column); on phones that stretches the image over the whole block and pushes the card out. */
  .asc2-right .asc2-hero{position:relative;height:auto !important;aspect-ratio:4/3;}
  /* Arrow and heading share one row: the empty third column mirrors the arrow's, so the heading stays
     centred in the card; the contact lines sit underneath, centred too. */
  .asc2-card{position:relative;right:auto;bottom:auto;width:100%;min-height:0;padding:32px 26px;margin:16px 0 0;
    display:grid;grid-template-columns:30px minmax(0,1fr) 30px;column-gap:12px;align-items:center;}
  .asc2-card .asc2-arrow{grid-column:1;grid-row:1;}
  .asc2-card h3{grid-column:2;grid-row:1;margin:0;}
  .asc2-contact{grid-column:1 / -1;grid-row:2;margin-top:22px;align-items:center;text-align:center;}
}
/* The card only grows on hover with a mouse on desktop — not on tablets/phones, nor on any touch
   screen, where a tap would leave it stuck in the enlarged state. */
@media(max-width:1024px),(hover:none){
  .asc2-card,
  .asc2-card:hover{transform:none;box-shadow:0 20px 46px rgba(14,79,160,.26);transition:none;}
}

/* ============================================================
   Brand Showcase (cs-tabs) — used by product-* pages
   ============================================================ */
.cs-tabs{--cs-radius:18px;--cs-gap:56px;}

.cs-modelhero{position:relative;border-radius:var(--cs-radius);overflow:hidden;
  background:linear-gradient(135deg,var(--light-gray) 0%,var(--mid-gray) 160%);
  padding:48px 46px 38px;margin-bottom:30px;min-height:480px;gap:20px;display:flex;flex-direction:column;justify-content:flex-start;}
.cs-modelhero-img{position:absolute !important;right:0;top:0;height:100% !important;width:52%;object-fit:cover;object-position:center;z-index:1;}
video.cs-modelhero-img{background:var(--light-gray);}
.cs-modelhero-inner{position:relative;z-index:2;width:46%;max-width:540px;padding-right:20px;}
.cs-modelhero .cs-brandlogo{display:inline-flex;align-items:center;margin-bottom:auto;}
.cs-modelhero .cs-brandlogo img{height:30px;width:auto;display:block;}
.cs-modelhero h2{font-weight:700;letter-spacing:-.02em;line-height:.95;
  font-size:clamp(40px,6vw,84px);color:var(--ink);margin:28px 0 4px;}
.cs-modelhero .cs-micro{font-size:var(--fs-xs);letter-spacing:.04em;color:var(--blue);margin-bottom:30px;}
.cs-modelhero .cs-ptitle{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);font-weight:600;margin-bottom:6px;}
.cs-modelhero .cs-pname{font-weight:600;font-size:clamp(19px,2.2vw,26px);color:var(--ink);margin-bottom:28px;line-height:1.25;}
.cs-stathl{display:flex;gap:12px;flex-wrap:wrap;}
.cs-stathl .stat{background:var(--white);border:1px solid var(--light-gray);
  border-radius:14px;padding:16px 18px;flex:1 1 120px;min-width:120px;box-shadow:0 6px 20px rgba(26,26,26,.06);}
.cs-stathl .stat .v{font-weight:700;font-size:clamp(18px,2vw,25px);color:var(--ink);line-height:1;white-space:nowrap;}
.cs-stathl .stat .l{font-size:var(--fs-xs);color:var(--gray);margin-top:8px;}

.cs-intro{font-weight:300;font-size:clamp(16px,1.8vw,20px);color:var(--ink);
  line-height:1.8;margin:0 0 var(--cs-gap);max-width:920px;}
.cs-intro .price{display:inline-block;font-weight:600;color:var(--blue);margin-bottom:14px;font-size:var(--fs-cap);
  letter-spacing:.04em;text-transform:uppercase;}

.cs-modelhero-inner .cs-download{margin:26px 0 0;}
.cs-download{display:inline-flex;align-items:center;gap:12px;margin:0 0 var(--cs-gap);
  padding:13px 28px;border-radius:999px;border:1.5px solid var(--blue);
  background:transparent;color:var(--blue);font-weight:600;font-size:var(--fs-sm);letter-spacing:.02em;
  transition:background .3s ease,color .3s ease,border-color .3s ease;}
.cs-download:hover{background:var(--blue);color:var(--white);border-color:var(--blue);}
.cs-download svg{width:18px;height:18px;flex-shrink:0;transition:transform .3s ease;}
.cs-download:hover svg{transform:translateY(2px);}

.cs-block{margin:0 0 var(--cs-gap);}
.cs-blockhead{margin:0 0 26px;}
.cs-blockhead .kicker{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);font-weight:600;display:block;margin-bottom:10px;}
.cs-blockhead h3{font-weight:700;font-size:clamp(22px,2.4vw,30px);
  color:var(--ink);line-height:1.2;margin:0;letter-spacing:normal;}

.cs-highlight{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:stretch;}
.cs-highlight .hl-main{background:var(--blue);color:var(--white);border-radius:var(--cs-radius);padding:40px 38px;
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;}
.cs-highlight .hl-main .tag{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-bottom:14px;font-weight:600;}
.cs-highlight .hl-main h4{font-weight:700;font-size:clamp(22px,2.6vw,30px);line-height:1.15;margin:0 0 14px;}
.cs-highlight .hl-main p{font-weight:300;font-size:var(--fs-sm);line-height:1.75;color:rgba(255,255,255,.85);margin:0;}
.cs-highlight .hl-side{display:grid;grid-auto-rows:1fr;gap:18px;}
.cs-highlight .hl-card{background:var(--white);border:1px solid var(--light-gray);border-radius:var(--cs-radius);padding:30px 30px;display:flex;flex-direction:column;justify-content:center;gap:2px;}
.cs-highlight .hl-card .v{font-weight:700;font-size:clamp(18px,2vw,24px);color:var(--ink);line-height:1.2;}
.cs-highlight .hl-card .l{font-size:var(--fs-sm);color:var(--gray);margin-top:10px;line-height:1.65;}

.cs-specrows{margin:0;}
.cs-specrow{display:grid;grid-template-columns:minmax(200px,1fr) 1.6fr;gap:30px;
  padding:20px 4px;border-top:1px solid var(--light-gray);}
.cs-specrow:last-child{border-bottom:1px solid var(--light-gray);}
.cs-specrow .k{font-weight:500;font-size:var(--fs-body);color:var(--gray);}
.cs-specrow .v{font-weight:400;font-size:var(--fs-body);color:var(--ink);line-height:1.7;}

.cs-link{display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-sm);font-weight:600;color:var(--white);background:var(--ink);border-radius:999px;
  padding:13px 26px;text-decoration:none;transition:background .25s ease,transform .25s ease;}
.cs-link svg{transition:transform .35s ease;}
.cs-link:hover{background:var(--blue);}
.cs-link:hover svg{transform:translateX(5px);}

.cs-empty{border:1px dashed var(--mid-gray);border-radius:var(--cs-radius);background:var(--off-white);
  padding:60px 40px;text-align:center;}
.cs-empty .cs-brandlogo{display:inline-flex;margin-bottom:24px;}
.cs-empty .cs-brandlogo img{height:40px;width:auto;display:block;}
.cs-empty .tag{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);font-weight:600;display:block;margin-bottom:12px;}
.cs-empty p{font-weight:300;font-size:var(--fs-body);color:var(--gray);line-height:1.7;margin:0 auto;max-width:460px;}

@media(max-width:860px){
  .cs-highlight{grid-template-columns:1fr;}
  .cs-modelhero{min-height:auto;padding:32px 26px;}
  .cs-modelhero-img{position:relative !important;width:auto;height:320px !important;min-height:320px;aspect-ratio:auto;
    margin:20px -26px -32px;border-radius:0 0 var(--cs-radius) var(--cs-radius);order:2;
    object-fit:cover;object-position:center;display:block;background:transparent;}
  .cs-modelhero-inner{width:100%;max-width:100%;padding-right:0;}
  .cs-stathl .stat{flex:1;min-width:120px;}
}
@media(max-width:760px){.cs-specrow{grid-template-columns:1fr;gap:8px;}}

/* Both brands shown stacked; the brand tabs act as browse / jump links */
.cs-tabs .brand-tab-panel{display:block;}
.cs-tabs .cs-modelhero{scroll-margin-top:120px;}
.cs-tabs .brand-tab-panel + .brand-tab-panel{margin-top:var(--cs-gap);padding-top:var(--cs-gap);border-top:1px solid var(--light-gray);}
.cs-tabs .brand-tab-btn{cursor:pointer;}

/* ============================================================
   Brand Showcase widget — Elementor wrapper reset
   Ensures the widget renders like product-cctv.html regardless
   of the parent Elementor Section/Container spacing.
   ============================================================ */
.elementor-widget-systronics_brand_showcase > .elementor-widget-container{
  padding:0 !important;
  margin:0 !important;
}
.elementor-widget-systronics_brand_showcase .brand-showcase{
  display:block;
  width:100%;
}
/* Force the model hero to use the exact source layout even if
   the parent column/container has narrow constraints. */
.elementor-widget-systronics_brand_showcase .cs-modelhero{
  box-sizing:border-box;
}
.elementor-widget-systronics_brand_showcase .cs-modelhero-img{
  display:block;
}

/* =================================================================
   Brand Showcase Multi — chip selector + brand bar + product cards
   Used by the "Systronics Brand Showcase (Multi-Product)" widget
   (equivalent to the product-drone.html reference layout)
   ================================================================= */
.brand-showcase-multi{--bsm-radius:18px;}
.brand-showcase-multi .brand-showcase-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;flex-wrap:wrap;}
.brand-showcase-multi .brand-showcase-head .kicker{font-size:var(--fs-sm);letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:600;display:inline-flex;align-items:center;gap:14px;margin-bottom:10px;}
.brand-showcase-multi .brand-showcase-head .kicker::before{content:"";width:32px;height:1.5px;background:currentColor;display:inline-block;flex-shrink:0;}
.brand-showcase-multi .brand-showcase-head h2{font-weight:700;font-size:clamp(26px,3.2vw,42px);color:var(--ink);line-height:1.1;margin:0;letter-spacing:normal;}

/* Chip selector (jump-links along the top) */
.brand-chips-wrap{position:relative;margin-bottom:48px;}
.brand-chips{display:flex;gap:0;flex-wrap:nowrap;border-bottom:2px solid var(--light-gray);overflow-x:auto;scrollbar-width:none;}
.brand-chips::-webkit-scrollbar{display:none;}
@media(max-width:680px){
  .brand-chips-wrap::after{content:"";position:absolute;top:0;bottom:2px;right:0;width:100px;pointer-events:none;z-index:2;
    background:linear-gradient(90deg,rgba(255,255,255,0) 0%,var(--white,#fff) 60%);}
  .brand-chip{flex:0 0 auto;}
}
button.brand-chip,
.brand-chip{font-family:'Anuphan',sans-serif;font-size:17px;font-weight:600;letter-spacing:normal;color:var(--gray);
  background:transparent;border:none;padding:20px 30px;cursor:pointer;position:relative;transition:color .25s ease;white-space:nowrap;
  -webkit-appearance:none;appearance:none;outline:none;box-shadow:none;}
.brand-chip::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--blue);
  transform:scaleX(0);transform-origin:center;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
button.brand-chip.brand-chip:focus,
button.brand-chip.brand-chip:active,
.brand-chip.brand-chip:focus,
.brand-chip.brand-chip:active{background:transparent!important;background-color:transparent!important;color:var(--gray)!important;outline:none;box-shadow:none;}
button.brand-chip.brand-chip:hover,
button.brand-chip.brand-chip:focus:hover,
.brand-chip.brand-chip:hover,
.brand-chip.brand-chip:focus:hover{background:transparent!important;background-color:transparent!important;color:var(--ink)!important;}
button.brand-chip.brand-chip.active,
button.brand-chip.brand-chip.active:hover,
button.brand-chip.brand-chip.active:focus,
button.brand-chip.brand-chip.active:focus:hover,
.brand-chip.brand-chip.active,
.brand-chip.brand-chip.active:hover,
.brand-chip.brand-chip.active:focus,
.brand-chip.brand-chip.active:focus:hover{background:transparent!important;background-color:transparent!important;color:var(--ink)!important;}
.brand-chip.active::after{transform:scaleX(1);}
.brand-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px;}

/* Brand slides — stacked; chips jump to each one */
.brand-slides-viewport{overflow:visible;height:auto;}
.brand-slides-track{display:block;}
.brand-slide{width:100%;scroll-margin-top:120px;}
.brand-slide + .brand-slide{margin-top:64px;padding-top:64px;border-top:1px solid var(--light-gray);}

/* Dark brand-header bar */
.brand-bar{display:flex;align-items:center;gap:22px;background:var(--ink);
  border-radius:var(--bsm-radius);padding:18px 30px;margin-bottom:30px;}
.brand-bar-logo{height:26px;width:auto;max-width:150px;object-fit:contain;filter:brightness(0) invert(1);flex:0 0 auto;}
.brand-bar-divider{width:1px;align-self:stretch;background:rgba(255,255,255,.18);flex:0 0 auto;}
.brand-bar-text{min-width:0;margin-left:auto;text-align:right;}
.brand-bar-name{font-weight:700;font-size:clamp(17px,1.8vw,22px);color:var(--white);line-height:1.15;margin:0;}
.brand-bar-tag{display:block;font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.65);font-weight:600;margin-top:3px;}
@media(max-width:600px){.brand-bar{padding:15px 20px;gap:16px;}}
/* Phones: a smaller logo so wide logos leave room for the text beside it. !important because the widget's
   "logo height" control writes its value with a page-specific selector that would otherwise win. */
@media(max-width:767px){.brand-bar .brand-bar-logo{height:15px !important;}}

/* Sub-section heading within a brand (e.g. "Compatible Payloads / เพย์โหลดที่รองรับ") */
.brand-block-head{margin:64px 0 26px;}
.brand-block-head:first-child,
.brand-bar + .brand-block-head{margin-top:0;}
.brand-block-head .kicker{font-size:var(--fs-sm);letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:600;display:inline-flex;align-items:center;gap:14px;margin-bottom:10px;}
.brand-block-head .kicker::before{content:"";width:32px;height:1.5px;background:currentColor;display:inline-block;flex-shrink:0;}
.brand-block-head h4{font-weight:700;font-size:clamp(22px,2.6vw,32px);color:var(--ink);line-height:1.15;margin:0;letter-spacing:normal;}

/* Product cards grid inside each brand slide (layout modifiers: is-cols-1|2|3) */
.brand-product-grid{display:grid;gap:24px;}
.brand-product-grid + .brand-product-grid{margin-top:30px;}
.brand-product-grid.is-cols-3{grid-template-columns:repeat(3,1fr);}
.brand-product-grid.is-cols-2{grid-template-columns:repeat(2,1fr);}
.brand-product-grid.is-cols-1{grid-template-columns:1fr;}
.brand-product-card{display:flex;flex-direction:column;border:1px solid var(--light-gray);border-radius:18px;overflow:hidden;background:var(--white);scroll-margin-top:120px;}
.brand-product-card .card-media{position:relative;aspect-ratio:4/3;background:linear-gradient(160deg,var(--off-white),#e7ebf0);overflow:hidden;}
.brand-product-card .card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
img.card-media-badge.card-media-badge{position:absolute;inset:auto;top:15px;right:15px;width:auto;height:36px;object-fit:contain;z-index:2;}
.brand-product-card .card-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.brand-product-card .card-media--video{cursor:pointer;}
.brand-product-card .card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;border:0;background:none;cursor:pointer;padding:0;transition:transform .25s,opacity .25s;opacity:.7;}
.brand-product-card .card-play:hover{opacity:1;transform:translate(-50%,-50%) scale(1.1);}
.brand-product-card .card-play svg{width:90px;height:90px;display:block;fill:rgba(255,255,255,.85);filter:drop-shadow(0 2px 10px rgba(0,0,0,.4));}
.brand-product-card .card-media--video.is-playing .card-play{display:none;}
.brand-product-card .card-media--video.is-playing img{display:none;}
.brand-product-card .card-media--wp video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.brand-product-card .card-body{padding:28px 26px 30px;display:flex;flex-direction:column;flex:1;}
.brand-product-card .card-brand-logo{height:24px;width:auto;max-width:160px;object-fit:contain;display:block;margin-bottom:20px;}
.brand-product-card .card-body .tag{font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:12px;}
.brand-product-card .card-body h3{font-weight:700;font-size:clamp(21px,2vw,26px);color:var(--ink);line-height:1.15;margin:0 0 4px;}
/* Hyphenated codes in the name ("AI-R") stay on one line — the name wraps at spaces only */
.brand-product-card .card-body h3 .no-break{white-space:nowrap;}
.brand-product-card .card-body .sub{font-weight:300;font-size:var(--fs-body);color:var(--dark-gray);margin-bottom:16px;}
.brand-product-card .card-body > p{font-weight:300;font-size:var(--fs-sm);color:var(--dark-gray);line-height:1.75;margin:0 0 24px;}
.brand-product-card .card-body .card-pct{align-self:flex-start;font-size:var(--fs-sm);font-weight:600;color:var(--ink);border:1px solid var(--light-gray);border-radius:999px;padding:7px 16px;margin-bottom:22px;}
.brand-product-card .card-body .card-specs{list-style:none;margin:0 0 24px;padding:0;}
.brand-product-card .card-body .card-specs li{font-size:var(--fs-sm);color:var(--dark-gray);line-height:1.6;padding:8px 0 8px 20px;border-top:1px solid var(--light-gray);position:relative;}
.brand-product-card .card-body .card-specs li::before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--blue);}
.brand-product-card .card-body .card-specs li span{color:var(--ink);font-weight:600;}
.brand-product-card .card-download{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:12px;font-size:var(--fs-sm);font-weight:600;color:var(--blue);background:transparent;border:1.5px solid var(--blue);border-radius:999px;padding:12px 24px;text-decoration:none;transition:background .25s,color .25s,border-color .25s;}
.brand-product-card .card-download:hover{background:var(--blue);color:var(--white);border-color:var(--blue);}
.brand-product-card .card-download svg{width:18px;height:18px;flex-shrink:0;}

/* Feature card variant — compact card matching .dr-feat (smaller h5-style heading, tighter spacing) */
.brand-product-card.is-feature .card-body{padding:24px 26px 28px;}
.brand-product-card.is-feature .card-body h3{font-size:var(--fs-h5);letter-spacing:normal;margin:0 0 9px;line-height:1.25;}
.brand-product-card.is-feature .card-body > p{margin:0;line-height:1.7;}

/* Full-width split-card variants (image right or left, text on the other side) */
.brand-product-card.is-split-right,
.brand-product-card.is-split-left{flex-direction:row;min-height:400px;}
.brand-product-card.is-split-right .card-media,
.brand-product-card.is-split-left  .card-media{flex:0 0 55%;aspect-ratio:auto;}
.brand-product-card.is-split-right .card-media{order:2;}
.brand-product-card.is-split-right .card-body,
.brand-product-card.is-split-left  .card-body{flex:1;padding:46px 44px;justify-content:center;}
.brand-product-card.is-split-right .card-body h3,
.brand-product-card.is-split-left  .card-body h3{font-size:clamp(26px,3vw,38px);margin:0 0 6px;}
.brand-product-card.is-split-right .card-body > p,
.brand-product-card.is-split-left  .card-body > p{max-width:520px;}

/* Full-width overlay card — image fills the card, text is overlaid */
.brand-product-card.is-overlay{position:relative;display:block;min-height:400px;background:var(--ink);color:#fff;}
.brand-product-card.is-overlay .card-media{position:absolute;inset:0;aspect-ratio:auto;background:none;z-index:0;}
.brand-product-card.is-overlay .card-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,15,35,.85) 0%,rgba(8,15,35,.55) 55%,rgba(8,15,35,.25) 100%);}
.brand-product-card.is-overlay .card-body{position:relative;z-index:2;padding:clamp(40px,5vw,64px);max-width:640px;}
.brand-product-card.is-overlay .card-body .tag{color:#fff;opacity:.9;}
.brand-product-card.is-overlay .card-body h3{color:#fff;font-size:clamp(30px,3.4vw,44px);}
.brand-product-card.is-overlay .card-body .sub{color:rgba(255,255,255,.8);}
.brand-product-card.is-overlay .card-body > p{color:rgba(255,255,255,.85);}
.brand-product-card.is-overlay .card-body .card-pct{color:#fff;border-color:rgba(255,255,255,.32);}
.brand-product-card.is-overlay .card-body .card-specs li{color:rgba(255,255,255,.85);border-top-color:rgba(255,255,255,.16);}
.brand-product-card.is-overlay .card-body .card-specs li span{color:#fff;}
.brand-product-card.is-overlay .card-download{position:absolute;z-index:3;right:clamp(28px,5vw,66px);bottom:48px;margin-top:0;white-space:nowrap;color:#fff;border-color:rgba(255,255,255,.6);background:rgba(8,15,35,.35);backdrop-filter:blur(2px);}
.brand-product-card.is-overlay .card-download:hover{background:#fff;color:var(--ink);border-color:#fff;}

@media(max-width:900px){
  .brand-product-card.is-split-right,
  .brand-product-card.is-split-left{flex-direction:column;min-height:auto;}
  .brand-product-card.is-split-right .card-media,
  .brand-product-card.is-split-left  .card-media{flex:none;aspect-ratio:4/3;order:0;}
  .brand-product-card.is-split-right .card-body,
  .brand-product-card.is-split-left  .card-body{padding:28px 26px 30px;}

  /* Mobile: no overlay — render like a regular card (image on top, text on white below). */
  .brand-product-card.is-overlay{min-height:0;display:flex;background:var(--white);color:inherit;}
  .brand-product-card.is-overlay .card-media{position:relative;inset:auto;aspect-ratio:4/3;background:linear-gradient(160deg,var(--off-white),#e7ebf0);}
  .brand-product-card.is-overlay .card-media::after{content:none;display:none;}
  .brand-product-card.is-overlay .card-media img{object-position:var(--img-pos-x,50%) var(--img-pos-y,50%);}
  .brand-product-card.is-overlay .card-body{padding:28px 26px 30px;max-width:none;}
  .brand-product-card.is-overlay .card-body .tag{color:var(--blue);opacity:1;}
  .brand-product-card.is-overlay .card-body h3{color:var(--ink);font-size:clamp(21px,2vw,26px);}
  .brand-product-card.is-overlay .card-body .sub,
  .brand-product-card.is-overlay .card-body > p{color:var(--dark-gray);}
  .brand-product-card.is-overlay .card-body .card-pct{color:var(--ink);border-color:var(--light-gray);}
  .brand-product-card.is-overlay .card-body .card-specs li{color:var(--dark-gray);border-top-color:var(--light-gray);}
  .brand-product-card.is-overlay .card-body .card-specs li span{color:var(--ink);}
  /* The button is a sibling of .card-body on this card, so it needs its own side/bottom inset to line up
     with the text; the negative top margin cancels .card-body's bottom padding so it sits right under it. */
  .brand-product-card.is-overlay .card-download{position:relative;right:auto;bottom:auto;display:flex;width:fit-content;max-width:calc(100% - 52px);margin:-6px 26px 30px;white-space:normal;color:var(--blue);border-color:var(--blue);background:transparent;backdrop-filter:none;}
  .brand-product-card.is-overlay .card-download:hover{background:var(--blue);color:var(--white);border-color:var(--blue);}
}
@media(max-width:880px){
  .brand-product-grid.is-cols-3,
  .brand-product-grid.is-cols-2{grid-template-columns:1fr;gap:20px;}
}


/* =================================================================
   Product Stage — editorial-hero product widget
   (Systronics Product Stage widget — matches product-ir.html ir-product)
   ================================================================= */
.product-stage{--ps-radius:18px;--ps-gap:96px;padding:90px 0;}

/* Editorial split hero */
.product-stage .ps-stage{display:grid;grid-template-columns:1.05fr 1fr;gap:0;
  align-items:stretch;min-height:580px;margin-top:0;}
.product-stage .ps-stage-media{position:relative;overflow:visible;background:var(--white);
  display:flex;align-items:center;justify-content:center;padding:40px 0;}
.product-stage .ps-stage-photo{position:relative;width:60%;height:78%;border-radius:6px;overflow:hidden;
  background:var(--blue) center/cover no-repeat;}
.product-stage .ps-stage-photo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(14,79,160,.78) 0%,rgba(15,33,139,.55) 45%,rgba(14,79,160,.30) 100%);}
.product-stage .ps-stage-media img.ps-stage-product{position:absolute;z-index:2;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-4deg);
  width:96%;max-width:none;height:auto;object-fit:contain;
  filter:drop-shadow(0 26px 46px rgba(8,18,50,.40));}
.product-stage .ps-stage-copy{height:78%;align-self:center;padding:0 8px 0 64px;
  display:flex;flex-direction:column;justify-content:center;}
.product-stage .ps-stage-cat{font-size:var(--fs-cap);font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gray);margin-bottom:26px;}
.product-stage .ps-stage-name{font-weight:700;
  font-size:clamp(40px,5vw,68px);line-height:1.02;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 30px;}
.product-stage .ps-stage-name .ps-stage-brand{display:block;font-weight:500;
  font-size:clamp(14px,1.4vw,16px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px;line-height:1;}
.product-stage .ps-stage-desc{font-weight:300;font-size:var(--fs-md);
  color:var(--dark-gray);line-height:1.85;margin:0 0 16px;max-width:440px;}
.product-stage .ps-stage-desc strong{font-weight:600;color:var(--ink);}
.product-stage .ps-stage-download{align-self:flex-start;margin-top:34px;
  display:inline-flex;align-items:center;gap:12px;
  padding:13px 28px;border-radius:999px;
  border:1.5px solid var(--blue);background:transparent;color:var(--blue);
  font-weight:600;font-size:var(--fs-sm);letter-spacing:.02em;
  text-decoration:none;
  transition:background .3s ease,color .3s ease,border-color .3s ease;}
.product-stage .ps-stage-download:hover{background:var(--blue);color:var(--white);border-color:var(--blue);}
.product-stage .ps-stage-download svg{width:18px;height:18px;flex-shrink:0;transition:transform .3s ease;}
.product-stage .ps-stage-download:hover svg{transform:translateY(2px);}

/* Floating key-spec cards under the hero */
.product-stage .ps-keystats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  margin:48px 0 0;position:relative;z-index:4;}
.product-stage .ps-keystat{background:var(--white);border:1px solid var(--light-gray);
  border-radius:16px;padding:24px 26px;}
.product-stage .ps-keystat b{display:block;font-weight:700;font-size:clamp(24px,2.5vw,32px);
  color:var(--ink);letter-spacing:-.01em;line-height:1.05;}
.product-stage .ps-keystat span{display:block;font-weight:400;font-size:var(--fs-sm);
  color:var(--gray);margin-top:8px;line-height:1.45;}

/* Big statement intro */
.product-stage .ps-intro{text-align:center;max-width:760px;
  margin:var(--ps-gap) auto 0;padding-bottom:var(--ps-gap);}
.product-stage .ps-intro .kicker{display:inline-flex;align-items:center;gap:14px;
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin-bottom:22px;}
.product-stage .ps-intro .kicker::before{content:"";width:32px;height:1.5px;
  background:var(--blue);display:inline-block;}
.product-stage .ps-intro h2{font-weight:700;font-size:clamp(28px,3.6vw,46px);
  line-height:1.18;color:var(--ink);letter-spacing:-.01em;margin:0 0 22px;}
.product-stage .ps-intro p{font-weight:300;font-size:clamp(15px,1.6vw,18px);
  color:var(--dark-gray);line-height:1.8;margin:0;}

@media(max-width:980px){
  .product-stage .ps-stage{grid-template-columns:1fr;min-height:0;}
  .product-stage .ps-stage-media{min-height:380px;padding:30px 0;}
  .product-stage .ps-stage-photo{width:62%;height:88%;}
  .product-stage .ps-stage-copy{height:auto;align-self:stretch;padding:44px 8px 8px;}
  .product-stage .ps-keystats{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:680px){
  .product-stage .ps-stage-media{min-height:300px;}
  .product-stage .ps-stage-photo{width:66%;height:84%;}
  .product-stage .ps-stage-media img.ps-stage-product{width:100%;}
  .product-stage .ps-keystats{grid-template-columns:1fr;}
}

/* ── Product sub-cards (Brand Showcase Robotics) ── */
.cs-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:0 0 var(--cs-gap,40px);}
.cs-card{display:flex;flex-direction:column;border:1px solid var(--light-gray);border-radius:var(--cs-radius,16px);overflow:hidden;background:var(--white);}
.cs-card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(160deg,var(--off-white),#e7ebf0);}
.cs-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;padding:26px;}
.cs-card-body{padding:28px 28px 30px;display:flex;flex-direction:column;flex:1;text-align:left;align-items:flex-start;}
.cs-card-body .tag{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:12px;}
.cs-card-body h3{font-weight:700;font-size:clamp(24px,2.8vw,36px);color:var(--ink);line-height:1.1;margin:0 0 8px;}
.cs-card-body .sub{font-weight:300;font-size:var(--fs-body);color:var(--dark-gray);margin-bottom:16px;}
.cs-card-body > p{font-weight:300;font-size:var(--fs-sm);color:var(--dark-gray);line-height:1.75;margin:0 0 24px;}
.cs-card-body .cs-download{margin:auto 0 0;}
@media(max-width:880px){.cs-cards{grid-template-columns:1fr;gap:20px;}}

/* ── Map + Advantages (Systronics Map widget) ── */
.cs-adv{padding-top:0;}
.cs-adv-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:center;}
.cs-mapwrap{width:100%;min-width:0;}
.cs-adv .net2-map-area{display:block;max-width:280px;margin:0 auto;padding:0;}
.cs-adv .net2-map-svg{max-width:none;margin:0 auto;}
.cs-map-caption{margin-top:18px;text-align:center;font-size:var(--fs-xs);color:var(--gray);letter-spacing:.02em;}
.cs-advlist{list-style:none;margin:0;padding:0;}
.cs-advitem{display:flex;align-items:center;gap:clamp(16px,2vw,26px);
  padding:clamp(18px,2.4vw,26px) 0;border-bottom:1px solid var(--light-gray);}
.cs-advitem:first-child{border-top:1px solid var(--light-gray);}
.cs-advitem .ic{flex:0 0 auto;width:54px;height:54px;border-radius:50%;
  border:1px solid var(--light-gray);background:var(--white);
  display:grid;place-items:center;color:var(--blue);}
.cs-advitem .ic svg{width:24px;height:24px;}
.cs-advitem p{margin:0;font-weight:400;font-size:clamp(15px,1.6vw,18px);
  color:var(--dark-gray);line-height:1.6;}
@media(max-width:980px){.cs-adv-grid{grid-template-columns:1fr;gap:36px;}}
@media(max-width:560px){.cs-advitem .ic{width:46px;height:46px;}.cs-advitem .ic svg{width:21px;height:21px;}}

/* ── Robotics Brand Showcase (rb-*) ── */
.rb-tabs-section{--rb-radius:18px;--rb-gap:64px;}
.rb-tabs-section .brand-tabs-wrap .brand-tab-panel{display:block;}

/* Block heading (kicker + title) */
.rb-blockhead{margin:0 0 26px;}
.rb-blockhead .kicker{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);font-weight:600;display:block;margin-bottom:10px;}
.rb-blockhead h3{font-weight:700;font-size:clamp(22px,2.4vw,30px);
  color:var(--ink);line-height:1.2;margin:0;letter-spacing:normal;}

/* Product cards — 2 per row */
.rb-pcards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.rb-pcards + .rb-blockhead{margin-top:var(--rb-gap);}
.rb-pcard{display:flex;flex-direction:column;height:100%;
  border:1px solid var(--light-gray);border-radius:var(--rb-radius);overflow:hidden;background:var(--white);
  scroll-margin-top:120px;}
.rb-pcard-media{position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(160deg,var(--off-white),#e7ebf0);}
.rb-pcard-media img,.rb-pcard-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.rb-pcard-body{padding:30px 30px 32px;display:flex;flex-direction:column;flex:1;}
.rb-pcard-body .uni-logo{display:inline-flex;align-items:center;margin-bottom:14px;}
.rb-pcard-body .uni-logo img{height:20px;width:auto;display:block;}
.rb-pcard-body h3{font-weight:700;letter-spacing:-.02em;line-height:1;
  font-size:clamp(30px,3.4vw,46px);color:var(--ink);margin:0 0 8px;}
.rb-pcard-body .micro{font-size:var(--fs-xs);letter-spacing:.04em;color:var(--blue);font-weight:600;margin-bottom:14px;}
.rb-pcard-body .pname{font-weight:400;font-size:var(--fs-body);color:var(--dark-gray);margin-bottom:24px;}
.rb-pcard-body .rb-stathl{margin-bottom:24px;}
.rb-pcard-body .rb-download{margin:auto 0 0;align-self:flex-start;}
@media(max-width:880px){.rb-pcards{grid-template-columns:1fr;gap:20px;}}

/* Stat highlight cards */
.rb-stathl{display:flex;gap:12px;flex-wrap:wrap;}
.rb-stathl .stat{background:var(--white);border:1px solid var(--light-gray);
  border-radius:14px;padding:16px 18px;flex:1 1 120px;min-width:120px;box-shadow:0 6px 20px rgba(26,26,26,.06);}
.rb-stathl .stat .v{font-weight:700;font-size:clamp(19px,2vw,26px);color:var(--ink);line-height:1;white-space:nowrap;}
.rb-stathl .stat .l{font-size:var(--fs-xs);color:var(--gray);margin-top:8px;}

/* Download button */
.rb-download{display:inline-flex;align-items:center;gap:12px;
  padding:13px 28px;border-radius:999px;border:1.5px solid var(--blue);
  background:transparent;color:var(--blue);font-weight:600;font-size:var(--fs-sm);letter-spacing:.02em;
  text-decoration:none;transition:background .3s ease,color .3s ease,border-color .3s ease;}
.rb-download:hover{background:var(--blue);color:var(--white);border-color:var(--blue);}
.rb-download svg{width:18px;height:18px;flex-shrink:0;transition:transform .3s ease;}
.rb-download:hover svg{transform:translateY(2px);}

/* Feature cards (compatible payloads) */
.rb-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.rb-feat{background:var(--white);border:1px solid var(--light-gray);border-radius:var(--rb-radius);
  overflow:hidden;display:flex;flex-direction:column;}
.rb-feat-img{position:relative;aspect-ratio:4/3;background:var(--off-white);overflow:hidden;}
.rb-feat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;padding:18px;}
.rb-feat-body{padding:24px 26px 28px;}
.rb-feat-body h5{font-weight:700;font-size:var(--fs-h5);color:var(--ink);margin:0 0 9px;}
.rb-feat-body p{font-weight:300;font-size:var(--fs-sm);color:var(--dark-gray);line-height:1.7;margin:0;}
@media(max-width:880px){.rb-feats{grid-template-columns:1fr;}}

/* Panels always visible (tabs are jump links) */
.rb-pcards .brand-tab-panel{height:100%;}
.rb-pcards .brand-tab-panel + .brand-tab-panel{margin-top:0;padding-top:0;border-top:0;}

/* ── Software QR Cards (ir-soft*) ── */
.ir-software{--ir-radius:18px;background:var(--off-white);padding:80px 0;}
.ir-soft-head{margin-bottom:34px;}
.ir-soft-head .kicker{display:inline-flex;align-items:center;gap:14px;
  font-size:var(--fs-sm);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px;}
.ir-soft-head .kicker::before{content:"";width:32px;height:1.5px;background:var(--blue);display:inline-block;}
.ir-soft-head h3{font-weight:700;font-size:clamp(24px,2.8vw,36px);color:var(--ink);line-height:1.15;margin:0;}
.ir-softgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.ir-softcard{background:var(--white);border:1px solid var(--light-gray);border-radius:var(--ir-radius);
  padding:28px 24px 26px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.ir-softgroup{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  background:var(--white);border:1px solid var(--light-gray);border-radius:var(--ir-radius);}
.ir-softcard.in-group{background:none;border:none;border-radius:0;}
/* --ir-title-h / --ir-store-h: tallest title / store button in this widget, set by shared.js so every
   card reserves the same space and the QR codes line up on every screen size. */
.ir-softcard h4{font-weight:600;font-size:var(--fs-body);color:var(--ink);line-height:1.4;margin:0 0 22px;min-height:max(2.8em,var(--ir-title-h,0px));}
.ir-softqr{width:132px;height:132px;border-radius:10px;overflow:hidden;background:var(--off-white);
  border:1px solid var(--light-gray);display:grid;place-items:center;margin-bottom:22px;position:relative;}
.ir-softqr img{width:100%;height:100%;object-fit:contain;display:block;}
.ir-softqr.is-empty::after{content:attr(data-ph);font-size:13px;font-weight:600;color:var(--gray);letter-spacing:normal;}
.ir-softdl{font-size:var(--fs-cap);font-weight:500;color:var(--gray);
  display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;}
.ir-softdl svg{width:13px;height:13px;}
.ir-softstore{margin-top:auto;display:inline-flex;align-items:center;gap:9px;min-height:var(--ir-store-h,0px);
  padding:9px 16px;border-radius:8px;background:var(--ink);color:var(--white);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;text-decoration:none;transition:background .25s;}
.ir-softstore:hover{background:var(--blue);color:var(--white);}
.ir-softstore svg{width:16px;height:16px;flex-shrink:0;}
@media(max-width:980px){.ir-softgrid{grid-template-columns:repeat(2,1fr);}
  .ir-softcard.is-dual{grid-column:span 2;}}
@media(max-width:560px){.ir-software{padding:60px 0;}.ir-softgrid{grid-template-columns:1fr;}
  .ir-softcard h4{min-height:var(--ir-title-h,0px);}.ir-softcard.is-dual{grid-column:span 1;grid-template-columns:1fr;}}
/* A card without a title reserves the same title space as the others (only once the script has measured it) */
.ir-softgrid.has-titles .ir-softcard:not(:has(> h4))::before{content:"";flex:none;height:var(--ir-title-h,0px);margin-bottom:22px;}

/* ── Infrared Brand Showcase (ir-pcard, ir-feature-card) ── */
.ir-showcase{--ir-radius:18px;}

/* Shared product meta */
.ir-pcat{font-size:var(--fs-cap);font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gray);margin-bottom:14px;}
.ir-pbrand{font-size:var(--fs-cap);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin-bottom:10px;}
.ir-pname{font-weight:700;font-size:clamp(30px,3.6vw,52px);line-height:1;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 20px;}

/* Download button */
.ir-pdownload{align-self:flex-start;margin-top:auto;
  display:inline-flex;align-items:center;gap:12px;padding:13px 26px;border-radius:999px;
  border:1.5px solid var(--blue);background:transparent;color:var(--blue);
  font-weight:600;font-size:var(--fs-sm);letter-spacing:.02em;text-decoration:none;
  transition:background .3s ease,color .3s ease,border-color .3s ease;}
.ir-pdownload:hover{background:var(--blue);color:var(--white);border-color:var(--blue);}
.ir-pdownload svg{width:18px;height:18px;flex-shrink:0;transition:transform .3s ease;}
.ir-pdownload.is-disabled{opacity:.45;pointer-events:none;}
.ir-pdownload:hover svg{transform:translateY(2px);}

/* Featured model card (wide split) */
.ir-feature-card{display:grid;grid-template-columns:1.05fr 1fr;
  border:1px solid var(--light-gray);border-radius:var(--ir-radius);overflow:hidden;
  background:var(--white);min-height:420px;margin-top:8px;}
.ir-feature-media{position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--off-white),#e7ebf0);}
.ir-feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;padding:34px;}
.ir-feature-body{padding:clamp(34px,4vw,56px);display:flex;flex-direction:column;justify-content:center;}
.ir-feature-body > p{font-weight:300;font-size:var(--fs-body);color:var(--dark-gray);
  line-height:1.85;margin:0 0 30px;max-width:440px;}

/* Line-up: 3 product cards per row */
.ir-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px;}
.ir-pcard{display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--light-gray);border-radius:var(--ir-radius);overflow:hidden;}
.ir-pcard-media{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(160deg,var(--off-white),#e7ebf0);}
.ir-pcard-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;padding:24px;}
.ir-pcard-body{padding:30px 28px 32px;display:flex;flex-direction:column;flex:1;}
.ir-pcard-body > p{font-weight:300;font-size:var(--fs-sm);color:var(--dark-gray);line-height:1.8;margin:0 0 16px;}
.ir-pcard-body > p:last-of-type{margin-bottom:28px;}
.ir-pcard-body > p strong{font-weight:600;color:var(--ink);}
@media(max-width:980px){
  .ir-feature-card{grid-template-columns:1fr;min-height:0;}
  .ir-feature-media{aspect-ratio:4/3;}
  .ir-cards{grid-template-columns:1fr;}
}
/* Phones: the featured card is stacked like the regular cards, so give its text area the same inset —
   otherwise its narrower text column makes the download button wrap while the others stay on one line. */
@media(max-width:560px){
  .ir-feature-body{padding:30px 28px 32px;}
}