/* ===========================================================================
   FERONEX SPICES THAILAND — CORE STYLESHEET
   ---------------------------------------------------------------------------
   Structure of this file:
     01. Design tokens (CSS variables)   <- EDIT COLORS HERE ONLY
     02. Dark-section scope (.on-dark)
     03. Reset & base
     04. Typography
     05. Layout helpers
     06. Glass design system
     07. Buttons
     08. Header & navigation
     09. Language lever switch
     10. Hero
     11. Sections & cards
     12. Supply-chain flow + process steps
     13. Products & specification table
     14. Forms
     15. Breadcrumbs, footer, floating UI
     16. Legal / article pages
     17. Small utilities

   THEME: light. The page runs on a warm off-white with soft brand-coloured
   gradients behind it, which is what gives the glass panels something to
   blur. Three areas invert to deep green via the `.on-dark` class, which
   simply re-declares the same tokens — every component inside re-skins
   automatically with no duplicated component CSS.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   01. DESIGN TOKENS
   ---------------------------------------------------------------------------
   >>> TO RE-SKIN THE SITE, CHANGE ONLY THE FIVE BRAND COLORS BELOW.
   Palette sampled directly from the Feronex logo:
     - deep forest green  -> the "F" and the left ring
     - leaf green         -> the leaf highlight
     - bronze / cumin gold-> the seed cluster and the upper ring arc
------------------------------------------------------------------------- */
:root {
  /* --- BRAND (sampled from the logo) --- */
  --primary: #1b5e24;        /* forest green - ring + letterform */
  --primary-dark: #0e3b14;   /* deepest green in the ring */
  --primary-light: #3c8f40;  /* leaf green highlight */
  --accent: #b8862a;         /* bronze gold - seed cluster */
  --accent-light: #dfb160;   /* gold highlight on the seeds */

  /* --- Derived brand tones --- */
  --accent-dark: #8a5e14;
  --primary-glow: rgba(60, 143, 64, 0.3);
  --accent-glow: rgba(184, 134, 42, 0.32);

  /* Gold is too light for small text on white; this is the readable version. */
  --accent-text: #8a5e14;

  /* --- Surfaces --- */
  --background: #fdfcf9;
  --background-alt: #f6f4ee;
  --surface: #ffffff;
  --surface-soft: #f4f2ea;

  /* --- Text --- */
  --text: #1e2d1c;
  --text-strong: #0d1b0d;
  --muted: #56674f;
  --muted-dark: #7b8a78;

  /* --- Glass --- */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(27, 94, 36, 0.13);
  --glass-border-strong: rgba(27, 94, 36, 0.26);
  --glass-sheen: rgba(255, 255, 255, 0.95);
  --glass-blur: 20px;
  --glass-shadow: 0 18px 44px rgba(14, 59, 20, 0.09);
  --glass-shadow-hover: 0 26px 60px rgba(14, 59, 20, 0.16);

  /* --- Lines & hover fills --- */
  --border-subtle: rgba(14, 59, 20, 0.1);
  --hover-soft: rgba(27, 94, 36, 0.07);

  /* --- Gradients --- */
  --gradient-brand: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  --gradient-green: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 60%, var(--primary-dark) 100%);
  --gradient-text: linear-gradient(120deg, var(--primary-dark) 10%, var(--primary) 55%, var(--accent) 100%);

  /* --- Layout --- */
  --container: 1240px;
  --container-narrow: 820px;
  /* Header + hero run on a wider shell so the headline sits closer to the
     edge of the screen and the nav never has to wrap. */
  --container-wide: 1480px;
  --gutter: 24px;
  --header-height: 92px;

  /* --- Radii --- */
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* --- Spacing scale --- */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 28px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-2xl: 120px;

  /* --- Inline icons (used as CSS masks, so they follow currentColor) --- */
  --icon-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2m0 18.15c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.23-8.23 8.23m4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.17.24-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.22.25-.87.85-.87 2.07s.89 2.4 1.02 2.56c.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.67-1.18.21-.58.21-1.08.15-1.18s-.23-.17-.48-.29'/%3E%3C/svg%3E");

  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m-1.2 14.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4z'/%3E%3C/svg%3E");
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m1 15h-2v-2h2zm0-4h-2V7h2z'/%3E%3C/svg%3E");

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-lever: cubic-bezier(0.34, 1.45, 0.64, 1);
  --duration: 0.45s;

  /* --- Type ---
     Plus Jakarta Sans has no Thai glyphs, so Noto Sans Thai follows it in the
     stack and picks up Thai characters automatically. */
  --font-sans: 'Plus Jakarta Sans', 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   02. DARK SECTION SCOPE
   Re-declares the same token names, so every component nested inside a
   `.on-dark` block inverts without any component-level overrides.
------------------------------------------------------------------------- */
.on-dark {
  --background: #0b1a0d;
  --surface: #12240f;
  --surface-soft: #162b14;

  --text: #f1f5ef;
  --text-strong: #ffffff;
  --muted: #b5c4b2;
  --muted-dark: #93a390;

  --accent-text: var(--accent-light);

  --glass-bg: rgba(255, 255, 255, 0.07);
  --glass-bg-strong: rgba(255, 255, 255, 0.13);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-border-strong: rgba(255, 255, 255, 0.26);
  --glass-sheen: rgba(255, 255, 255, 0.38);
  --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
  --glass-shadow-hover: 0 28px 68px rgba(0, 0, 0, 0.52);

  --border-subtle: rgba(255, 255, 255, 0.11);
  --hover-soft: rgba(255, 255, 255, 0.08);

  --gradient-text: linear-gradient(120deg, #ffffff 20%, var(--accent-light) 100%);

  color: var(--text);
}

/* ---------------------------------------------------------------------------
   03. RESET & BASE
------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Ambient brand gradients. On a white page these are what the glass panels
   actually blur — without them, glass would be invisible. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(58% 48% at 10% 4%, rgba(60, 143, 64, 0.2) 0%, transparent 62%),
    radial-gradient(46% 42% at 92% 12%, rgba(184, 134, 42, 0.18) 0%, transparent 66%),
    radial-gradient(52% 44% at 82% 78%, rgba(60, 143, 64, 0.14) 0%, transparent 68%);
  pointer-events: none;
}

/* Very fine grain so large white areas are not perfectly flat. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.08;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul,
ol {
  list-style: none;
}

/* Accessible focus ring — visible on every interactive element. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}

.on-dark :focus-visible {
  outline-color: var(--accent-light);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #ffffff;
  font-weight: 700;
  transition: top 0.25s var(--ease-out);
}

.skip-link:focus {
  top: 16px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   04. TYPOGRAPHY
------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-strong);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
}

h2 {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
}

h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing: -0.015em;
}

h4 {
  font-size: 1.05rem;
  font-weight: 700;
}

p {
  color: var(--muted);
  text-wrap: pretty;
}

strong {
  color: var(--text);
  font-weight: 700;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-sm);
}

.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

/* Step number in front of a section eyebrow: 01, 02, 03 ... */
.eyebrow__step {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding-inline: 6px;
  border-radius: var(--radius-pill);
  background: rgba(184, 134, 42, 0.14);
  border: 1px solid rgba(184, 134, 42, 0.26);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent-text);
}

.lead {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.7;
  color: var(--muted);
}

.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-accent {
  color: var(--accent-text);
}

/* Thai sits slightly taller than Latin; give it a little more room. */
html[lang='th'] body {
  line-height: 1.8;
}

html[lang='th'] h1,
html[lang='th'] h2,
html[lang='th'] h3 {
  line-height: 1.32;
  letter-spacing: 0;
}

html[lang='th'] .eyebrow,
html[lang='th'] .btn,
html[lang='th'] .glass-nav a,
html[lang='th'] .field label {
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   05. LAYOUT
------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Header and hero share one wider shell, so the logo sits directly above the
   headline and both start well left of the contained sections below. */
.site-header .container,
.hero .container {
  max-width: var(--container-wide);
  padding-inline: clamp(20px, 3.2vw, 54px);
}

.section {
  padding-block: var(--space-xl);
  position: relative;
}

.section--tight {
  padding-block: var(--space-lg);
}

/* Soft tinted band that separates neighbouring white sections. */
.section--alt {
  background:
    linear-gradient(180deg, transparent, var(--surface-soft) 14%, var(--surface-soft) 86%, transparent);
}

.section__head {
  max-width: 720px;
  margin-bottom: var(--space-lg);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head p {
  margin-top: var(--space-sm);
}

.grid {
  display: grid;
  gap: var(--space-md);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
}

/* ---------------------------------------------------------------------------
   06. GLASS DESIGN SYSTEM
   Reusable classes — used strategically, not on every surface.
------------------------------------------------------------------------- */
.glass,
.glass-card,
.glass-nav,
.glass-panel {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass {
  border-radius: var(--radius);
}

.glass-panel {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 44px);
  overflow: hidden;
}

.glass-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 30px);
  overflow: hidden;
  transition:
    transform var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out);
}

/* Light reflection along the top edge — the detail that reads as "glass". */
.glass-card::before,
.glass-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-sheen), transparent);
}

.glass-card:hover,
.glass-card:focus-within {
  transform: translateY(-6px);
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
  box-shadow: var(--glass-shadow-hover);
}

/* Optional accent wash used on feature cards. */
.glass-card--accent::after {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  right: -60px;
  top: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
  pointer-events: none;
}

.glass-card--accent:hover::after {
  opacity: 1;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-sm);
  border-radius: 16px;
  background: var(--hover-soft);
  border: 1px solid var(--glass-border);
  font-size: 1.4rem;
  line-height: 1;
}

.card__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--primary);
}

.glass-card h3 {
  margin-bottom: 10px;
}

.glass-card p {
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------------------
   07. BUTTONS
------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    background 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    color 0.3s var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Primary — deep brand green on the light theme. */
.btn--primary {
  background: linear-gradient(135deg, #2a7a33 0%, var(--primary) 55%, var(--primary-dark) 100%);
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(27, 94, 36, 0.28);
}

.btn--primary:hover {
  box-shadow: 0 16px 38px rgba(27, 94, 36, 0.38);
}

/* On the deep green sections, gold carries the primary action instead. */
.on-dark .btn--primary {
  background: var(--gradient-brand);
  color: #14100a;
  box-shadow: 0 10px 30px rgba(184, 134, 42, 0.3);
}

.on-dark .btn--primary:hover {
  box-shadow: 0 16px 40px rgba(184, 134, 42, 0.44);
}

/* Glass — secondary actions. */
.btn--glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: var(--glass-border-strong);
  color: var(--text);
}

.btn--glass:hover {
  background: var(--glass-bg-strong);
  border-color: var(--primary);
  color: var(--primary);
}

.on-dark .btn--glass:hover {
  color: var(--text-strong);
  border-color: var(--glass-border-strong);
}

/* WhatsApp — recognisable green, only rendered when a number is configured. */
.btn--whatsapp {
  background: #1faa59;
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(31, 170, 89, 0.26);
}

.btn--whatsapp:hover {
  background: #17914a;
}

.btn--outline {
  border-color: var(--glass-border-strong);
  color: var(--text);
}

.btn--outline:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  padding: 11px 20px;
  font-size: 0.78rem;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Text link with arrow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  transition: gap 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.link-arrow:hover {
  gap: 14px;
  color: var(--accent-text);
}

/* ---------------------------------------------------------------------------
   07b. CHANNEL ICONS ON BUTTONS
   The glyph is a CSS mask, so it inherits the button's text colour and needs
   no extra markup on any of the pages that use these buttons.
------------------------------------------------------------------------- */
.btn--whatsapp::before {
  content: '';
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon-whatsapp) center / contain no-repeat;
  mask: var(--icon-whatsapp) center / contain no-repeat;
  transition: transform 0.4s var(--ease-out);
}

.btn--whatsapp:hover::before {
  transform: scale(1.12) rotate(-6deg);
}

/* ---------------------------------------------------------------------------
   08. HEADER & NAVIGATION
   Logo stands alone on the left. Only the nav is inside glass.
------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  height: var(--header-height);
  transition: height 0.4s var(--ease-out), background 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
}

.site-header.is-scrolled {
  height: 72px;
  background: rgba(253, 252, 249, 0.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 6px 24px rgba(14, 59, 20, 0.06);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2.2vw, 30px);
  width: 100%;
}

/* --- Brand / logo: deliberately NOT inside a glass card ---
   The emblem sits on clean space with the wordmark set in live text beside
   it, so the logo artwork itself is never stretched or boxed in. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  flex-shrink: 0;
  transition: transform 0.35s var(--ease-out);
}

.brand:hover {
  transform: translateY(-1px);
}

.brand__logo {
  width: auto;
  height: 50px;
  transition: height 0.4s var(--ease-out);
}

.site-header.is-scrolled .brand__logo {
  height: 40px;
}

.brand__logo--mobile {
  display: none;
}

.brand__word {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand__word strong {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--primary-dark);
}

.on-dark .brand__word strong {
  color: var(--text-strong);
}

.brand__word small {
  margin-top: 6px;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--accent-text);
}

/* --- Floating glass navigation panel --- */
.glass-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: var(--radius-pill);
}

/* Every item stays on a single line — a wrapped nav is the fastest way to
   make a header look unfinished. */
.glass-nav a {
  position: relative;
  padding: 10px clamp(11px, 1.05vw, 17px);
  border-radius: var(--radius-pill);
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  transition: color 0.3s var(--ease-soft), background 0.3s var(--ease-soft);
}

.glass-nav a:hover {
  color: var(--primary);
  background: var(--hover-soft);
}

.glass-nav a[aria-current='page'] {
  color: var(--primary-dark);
  background: var(--hover-soft);
}

.glass-nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 16px;
  height: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}

.glass-nav a:hover::after,
.glass-nav a[aria-current='page']::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- Mobile hamburger (glass) --- */
.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  place-items: center;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 2.5px auto;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.35s var(--ease-out), opacity 0.2s linear;
}

.nav-toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* --- Full-screen mobile glass menu --- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-height) + 20px) var(--gutter) 40px;
  background: rgba(253, 252, 249, 0.86);
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0.4s;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-menu nav a {
  padding: 18px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: background 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}

.mobile-menu nav a:hover,
.mobile-menu nav a[aria-current='page'] {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}

.mobile-menu__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: var(--space-md);
}

/* Scroll progress indicator. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.1s linear;
}

/* ---------------------------------------------------------------------------
   09. LANGUAGE SWITCH
   A modern two-segment EN / TH control: one glass track, one sliding pill.
   The <input> comes first so the sibling (~) selectors below can drive the
   track and the labels.
------------------------------------------------------------------------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.lang-lever {
  position: relative;
  display: inline-flex;
  width: 92px;
  height: 36px;
  flex-shrink: 0;
  cursor: pointer;
}

.lang-lever__input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.lang-lever__track {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 2px 10px rgba(14, 59, 20, 0.07);
  transition: border-color 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft);
  overflow: hidden;
}

/* The pill that slides between the two segments. */
.lang-lever__track::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: var(--radius-pill);
  background: var(--gradient-green);
  box-shadow: 0 4px 12px rgba(14, 59, 20, 0.28);
  transition:
    transform 0.45s var(--ease-lever),
    background 0.35s var(--ease-soft),
    box-shadow 0.35s var(--ease-soft);
}

.lang-lever__input:checked ~ .lang-lever__track::before {
  transform: translateX(100%);
  background: var(--gradient-brand);
  box-shadow: 0 4px 12px rgba(138, 94, 20, 0.3);
}

.lang-lever:hover .lang-lever__track {
  border-color: var(--glass-border-strong);
  box-shadow: 0 6px 16px rgba(14, 59, 20, 0.1);
}

/* EN / TH sit above the pill and invert as it slides under them. */
.lang-lever__labels {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.lang-lever__labels span {
  flex: 1;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  transition: color 0.35s var(--ease-soft);
}

.lang-lever__labels span:first-child {
  color: #ffffff;
}

.lang-lever__labels span:last-child {
  color: var(--muted-dark);
}

.lang-lever__input:checked ~ .lang-lever__labels span:first-child {
  color: var(--muted-dark);
}

.lang-lever__input:checked ~ .lang-lever__labels span:last-child {
  color: #ffffff;
}

/* Keyboard focus lands on the invisible input, so surface it on the track. */
.lang-lever__input:focus-visible ~ .lang-lever__track {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.on-dark .lang-lever__input:focus-visible ~ .lang-lever__track {
  outline-color: var(--accent-light);
}

/* ---------------------------------------------------------------------------
   10. HERO
------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 100svh;
  padding-top: calc(var(--header-height) + clamp(24px, 5vh, 56px));
  padding-bottom: var(--space-xl);
  overflow: hidden;
}

/* Canvas for the floating cumin-seed particle field. */
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero .container {
  z-index: 1;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  align-items: center;
  gap: clamp(32px, 4.4vw, 76px);
}

.hero__copy {
  position: relative;
  max-width: 660px;
}

.hero__title {
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 1.0;
  letter-spacing: -0.038em;
  text-transform: uppercase;
  text-wrap: balance;
}

.hero__title span {
  display: block;
}

.hero__title .hero__title-sub {
  font-size: clamp(1.3rem, 2.8vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 12px;
}

html[lang='th'] .hero__title,
html[lang='th'] .statement h2,
html[lang='th'] .page-hero h1,
html[lang='th'] .cta-band h2 {
  text-transform: none;
}

.hero__text {
  max-width: 46ch;
  margin-top: var(--space-md);
}

.hero .btn-group {
  margin-top: calc(var(--space-md) + 4px);
}

/* Small proof line under the hero buttons. */
.hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: var(--space-md);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

.hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero__meta span::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

html[lang='th'] .hero__meta {
  letter-spacing: 0.02em;
  text-transform: none;
}

/* --- Hero visual: full-bleed product footage ---------------------------------
   The footage bleeds off the right edge of the screen and carries its own
   soft edges instead of a frame: it dissolves under the header, dissolves
   into the headline on the left, and fades out at the bottom so the page
   simply carries on underneath it. Two mask gradients are intersected, so
   every edge is soft at once. */
/* Inner pages still use .hero__visual as a centred stage for the pack
   mockup; only the home hero turns it into the bleeding footage panel. */
.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 380px;
  perspective: 1400px;
}

.hero .hero__visual {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  display: grid;
  align-items: center;
  justify-items: end;
  width: clamp(460px, 53vw, 1060px);
  /* Capped, so on a tall screen the footage stays in the upper half of the
     hero and fades out well above the cards instead of sitting behind them. */
  height: min(100%, 860px);
  pointer-events: none;
}

.hero .hero__media {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.6s var(--ease-soft);

  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 15%, #000 38%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 71%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 15%, #000 38%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 71%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Cross-fade while the motion file takes over from the still. */
.hero .hero__media.is-swapping {
  opacity: 0.4;
}

/* --- Inner-page product stage --------------------------------------------
   The glow sits behind the standalone pack shot on /our-cumin; the stage
   itself is what animations.js tilts towards the pointer. */
.hero__glow {
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}

.pack-stage {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Hero info cards row. Pushed well down the fold so the footage above it has
   room to breathe — the cards are the reward for scrolling, not the headline. */
.hero-cards {
  margin-top: clamp(56px, 11vh, 132px);
}

.hero-cards .glass-card {
  padding: 24px 22px 26px;
}

/* The top sheen grows into an accent line on hover. */
.hero-cards .glass-card::before {
  transform-origin: center;
  transform: scaleX(0.35);
  opacity: 0.7;
  transition:
    transform 0.55s var(--ease-out),
    opacity 0.45s var(--ease-soft),
    background 0.45s var(--ease-soft);
}

.hero-cards .glass-card:hover::before,
.hero-cards .glass-card:focus-within::before {
  transform: scaleX(1);
  opacity: 1;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.hero-cards .glass-card:hover,
.hero-cards .glass-card:focus-within {
  transform: translateY(-9px);
}

.hero-cards .card__icon {
  transition:
    transform 0.45s var(--ease-out),
    background 0.45s var(--ease-soft),
    border-color 0.45s var(--ease-soft);
}

.hero-cards .glass-card:hover .card__icon {
  transform: translateY(-3px) scale(1.07);
  background: rgba(27, 94, 36, 0.12);
  border-color: var(--glass-border-strong);
}

.hero-cards .glass-card h3 {
  transition: color 0.35s var(--ease-soft);
}

.hero-cards .glass-card:hover h3 {
  color: var(--primary);
}

.hero-cards h3 {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.hero-cards p {
  font-size: 0.88rem;
  margin-top: 6px;
}

html[lang='th'] .hero-cards h3,
html[lang='th'] .flow__step h3,
html[lang='th'] .facts h3 {
  text-transform: none;
  letter-spacing: 0;
}

/* Page hero for inner pages (shorter than the home hero).
   Inner pages always render breadcrumbs above this, and the breadcrumb bar
   already carries the fixed-header offset — so this only needs its own gap. */
.page-hero {
  position: relative;
  padding-top: var(--space-md);
  padding-bottom: var(--space-lg);
  overflow: hidden;
}

.page-hero__inner {
  max-width: 760px;
}

.page-hero h1 {
  text-transform: uppercase;
}

.page-hero p {
  margin-top: var(--space-sm);
}

/* ---------------------------------------------------------------------------
   11. SECTIONS & FEATURE BLOCKS
------------------------------------------------------------------------- */

/* Big cinematic brand statement — one of the deep green bands. */
.statement {
  position: relative;
  text-align: center;
  padding-block: var(--space-2xl);
  overflow: hidden;
}

.statement.on-dark {
  background:
    radial-gradient(70% 95% at 50% 0%, rgba(42, 122, 51, 0.38) 0%, transparent 72%),
    linear-gradient(165deg, #102c14 0%, #071209 100%);
}

.statement__seed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(560px, 80vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 134, 42, 0.22) 0%, transparent 62%);
  pointer-events: none;
}

.statement h2 {
  position: relative;
  font-size: clamp(2.4rem, 8vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.statement p {
  position: relative;
  max-width: 620px;
  margin: var(--space-md) auto 0;
  font-size: clamp(1rem, 1.6vw, 1.14rem);
}

/* Split content + visual block. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-lg);
}

.split__media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* Checklist. */
.check-list {
  display: grid;
  gap: 14px;
  margin-top: var(--space-md);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--muted);
  font-size: 0.97rem;
}

.check-list li a {
  color: var(--text);
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}

.check-list li a:hover {
  color: var(--primary);
  border-bottom-color: var(--accent);
}

.check-list li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  background: rgba(60, 143, 64, 0.14);
  border: 1px solid rgba(60, 143, 64, 0.42);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e24' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

.on-dark .check-list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fc983' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

/* Stat / fact row. */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

/* Inside a two-column split the cards get a narrow column, so stack them
   and switch to a left-aligned row layout that reads better. */
.split .facts {
  grid-template-columns: 1fr;
}

.split .facts .glass-card {
  text-align: left;
  padding: 22px 24px;
}

.facts .glass-card {
  text-align: center;
  padding: 26px 18px;
}

.facts .fact__icon {
  font-size: 1.7rem;
  margin-bottom: 10px;
}

.facts h3 {
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.facts p {
  font-size: 0.86rem;
  margin-top: 6px;
}

/* Final CTA band — the third deep green area. */
.cta-band {
  position: relative;
  margin-block: var(--space-xl);
}

.cta-band__inner {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(42, 122, 51, 0.42) 0%, transparent 72%),
    linear-gradient(165deg, #102c14 0%, #081409 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 26px 60px rgba(14, 59, 20, 0.22);
}

.cta-band h2 {
  max-width: 18ch;
  margin-inline: auto;
  text-transform: uppercase;
}

.cta-band p {
  max-width: 52ch;
  margin: var(--space-sm) auto var(--space-md);
}

.cta-band .btn-group {
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   12. SUPPLY-CHAIN FLOW & PROCESS STEPS
------------------------------------------------------------------------- */
.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* Row 1 = steps above the rail, row 2 = the rail itself, row 3 = below. */
  grid-template-rows: 1fr 76px 1fr;
  column-gap: 16px;
  row-gap: 0;
  margin-top: var(--space-lg);
  counter-reset: flow;
}

/* The rail is a grid item, so it always lands dead centre between the two
   rows of steps no matter how tall they get. */
.flow::before {
  content: '';
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: center;
  height: 2px;
  margin-inline: 7%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: 0.32;
}

.flow__step {
  position: relative;
  counter-increment: flow;
  text-align: center;
  padding: 22px 14px 20px;
  border-radius: var(--radius);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 26px rgba(14, 59, 20, 0.05);
  transition:
    transform var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out);
}

/* Zig-zag: odd steps ride above the rail, even steps below it. */
.flow__step { grid-row: 1; align-self: end; }
.flow__step:nth-child(even) { grid-row: 3; align-self: start; }
.flow__step:nth-child(1) { grid-column: 1; }
.flow__step:nth-child(2) { grid-column: 2; }
.flow__step:nth-child(3) { grid-column: 3; }
.flow__step:nth-child(4) { grid-column: 4; }
.flow__step:nth-child(5) { grid-column: 5; }
.flow__step:nth-child(6) { grid-column: 6; }

/* Step number, small and quiet in the corner. */
.flow__step::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--muted-dark);
  opacity: 0.7;
  transition: color 0.4s var(--ease-soft), opacity 0.4s var(--ease-soft);
}

/* Stem running from the card down (or up) to the rail. */
.flow__step::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 2px;
  height: 38px;
  transform: translateX(-50%);
  background: linear-gradient(var(--accent), rgba(184, 134, 42, 0.15));
  opacity: 0.55;
  transition: opacity 0.4s var(--ease-soft);
}

.flow__step:nth-child(odd)::after {
  bottom: -38px;
}

.flow__step:nth-child(even)::after {
  top: -38px;
  background: linear-gradient(rgba(184, 134, 42, 0.15), var(--accent));
}

.flow__dot {
  position: absolute;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--background);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 5px rgba(184, 134, 42, 0.12);
  transform: translateX(-50%);
  transition:
    transform 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    background 0.45s var(--ease-soft);
}

.flow__step:nth-child(odd) .flow__dot { bottom: -49px; }
.flow__step:nth-child(even) .flow__dot { top: -49px; }

.flow__dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.45s var(--ease-out), background 0.45s var(--ease-soft);
}

.flow__step:hover {
  transform: translateY(-7px);
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
  box-shadow: 0 20px 40px rgba(14, 59, 20, 0.12);
}

.flow__step:nth-child(even):hover {
  transform: translateY(7px);
}

.flow__step:hover::before {
  color: var(--accent-text);
  opacity: 1;
}

.flow__step:hover::after {
  opacity: 1;
}

.flow__step:hover .flow__dot {
  transform: translateX(-50%) scale(1.22);
  background: var(--accent);
  box-shadow: 0 0 0 8px rgba(184, 134, 42, 0.18);
}

.flow__step:hover .flow__dot::after {
  background: #ffffff;
}

.flow__step h3 {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
}

.flow__step p {
  font-size: 0.78rem;
  margin-top: 6px;
}

/* Numbered process timeline (Business Supply page).
   Same language as the supply-chain rail: numbered nodes on a connecting
   line, one card per step. */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  counter-reset: step;
}

/* The line linking the steps, drawn behind the cards. */
.steps::before {
  content: '';
  position: absolute;
  top: 58px;
  left: 12%;
  right: 12%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: 0.28;
}

.steps__item {
  position: relative;
  padding: 30px 24px 28px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 26px rgba(14, 59, 20, 0.05);
  transition:
    transform var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out);
}

/* Accent bar that fills along the top edge on hover. */
.steps__item::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}

.steps__item:hover {
  transform: translateY(-8px);
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
  box-shadow: 0 22px 44px rgba(14, 59, 20, 0.12);
}

.steps__item:hover::after {
  transform: scaleX(1);
}

/* The number sits in a ring that reads as a node on the line above. */
.steps__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid rgba(184, 134, 42, 0.5);
  box-shadow: 0 0 0 6px rgba(184, 134, 42, 0.1);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-text);
  transition:
    transform 0.45s var(--ease-out),
    background 0.45s var(--ease-soft),
    color 0.45s var(--ease-soft),
    box-shadow 0.45s var(--ease-out);
}

.steps__item:hover .steps__num {
  transform: scale(1.06);
  background: var(--gradient-green);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(14, 59, 20, 0.28);
}

.steps__item h3 {
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.35s var(--ease-soft);
}

.steps__item:hover h3 {
  color: var(--primary);
}

.steps__item p {
  font-size: 0.9rem;
  margin-top: 8px;
}

html[lang='th'] .steps__item h3,
html[lang='th'] .product-card__title h3 {
  text-transform: none;
  letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   13. PRODUCTS & SPECIFICATION TABLE
------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: clamp(24px, 3vw, 34px);
}

.product-card__media {
  position: relative;
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: 26px 26px 20px;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(70% 58% at 50% 28%, rgba(184, 134, 42, 0.18) 0%, transparent 72%),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%);
  border: 1px solid var(--border-subtle);
  transition: border-color var(--duration) var(--ease-out);
}

/* Light sweep that crosses the pack once on hover. */
.product-card__media::before {
  content: '';
  position: absolute;
  inset: -20% -40%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 62%
  );
  transform: translateX(-100%);
  transition: transform 0.95s var(--ease-out);
}

/* Soft contact shadow the pack appears to lift away from. */
.product-card__media::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 0;
  width: 56%;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(14, 59, 20, 0.3) 0%, transparent 72%);
  filter: blur(7px);
  opacity: 0.5;
  transition: transform 0.65s var(--ease-out), opacity 0.65s var(--ease-out);
}

.product-card__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 280px;
  filter: drop-shadow(0 22px 26px rgba(14, 59, 20, 0.26));
  transition:
    transform 0.65s var(--ease-out),
    filter 0.5s var(--ease-soft);
}

.product-card:hover .product-card__media img,
.product-card:focus-within .product-card__media img {
  transform: translateY(-12px) scale(1.045);
  filter: drop-shadow(0 32px 44px rgba(14, 59, 20, 0.26));
}

.product-card:hover .product-card__media::after,
.product-card:focus-within .product-card__media::after {
  transform: translateX(-50%) scale(0.86);
  opacity: 0.34;
}

.product-card:hover .product-card__media::before {
  transform: translateX(100%);
}

.product-card:hover .product-card__media {
  border-color: var(--glass-border-strong);
}

.product-card__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 6px 18px rgba(14, 59, 20, 0.1);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

html[lang='th'] .product-card__badge {
  letter-spacing: 0.02em;
  text-transform: none;
}

.product-card:hover .product-card__badge {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(14, 59, 20, 0.16);
}

/* Standalone pack shot (inner-page hero), tilted by animations.js. */
.pack-shot {
  margin: 0;
}

.pack-shot img {
  display: block;
  width: clamp(200px, 24vw, 320px);
  height: auto;
  filter: drop-shadow(0 30px 48px rgba(14, 59, 20, 0.28));
}

.product-card__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.product-card__price {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(184, 134, 42, 0.13);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}

html[lang='th'] .product-card__price {
  letter-spacing: 0.02em;
  text-transform: none;
}

.product-card ul {
  display: grid;
  gap: 10px;
}

.product-card ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--muted);
}

.product-card ul li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.product-card .btn {
  margin-top: auto;
}

/* Specification table in a glass panel. On narrow screens the table scrolls
   sideways, and these classic scroll shadows appear on whichever edge still
   has content beyond it — so a cut-off column never looks like the end. */
.spec-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(14, 59, 20, 0.16), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(14, 59, 20, 0.16), transparent) right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
  text-align: left;
}

.spec-table caption {
  padding-bottom: var(--space-sm);
  text-align: left;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

.spec-table th,
.spec-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.94rem;
}

.spec-table tr:last-child th,
.spec-table tr:last-child td {
  border-bottom: none;
}

.spec-table th {
  width: 42%;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.76rem;
  color: var(--muted-dark);
}

.spec-table td {
  font-weight: 600;
  color: var(--text);
}

.spec-table tbody tr {
  transition: background 0.3s var(--ease-soft);
}

.spec-table tbody tr:hover {
  background: var(--hover-soft);
}

/* ---------------------------------------------------------------------------
   14. FORMS
------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.field label .req {
  color: var(--accent-text);
}

.glass-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.3s var(--ease-soft), background 0.3s var(--ease-soft),
    box-shadow 0.3s var(--ease-soft);
}

.glass-input::placeholder {
  color: var(--muted-dark);
}

.glass-input:hover {
  border-color: var(--glass-border-strong);
}

.glass-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(27, 94, 36, 0.14);
}

textarea.glass-input {
  min-height: 130px;
  resize: vertical;
}

select.glass-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356674f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 46px;
}

select.glass-input option {
  background: var(--surface);
  color: var(--text);
}

.field__error {
  font-size: 0.78rem;
  color: #b3261e;
  min-height: 1em;
}

.glass-input[aria-invalid='true'] {
  border-color: #b3261e;
}

/* Honeypot — hidden from humans, visible to naive bots. */
.hp-field {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form-note {
  font-size: 0.82rem;
  color: var(--muted-dark);
  margin-top: var(--space-sm);
}

.form-note a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Form feedback states. */
.form-status {
  display: none;
  margin-top: var(--space-sm);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
}

.form-status.is-visible {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  animation: fx-fade-up 0.45s var(--ease-out) both;
}

/* Status icon, drawn as a mask so it takes the message's own colour. */
.form-status.is-visible::before {
  content: '';
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.1em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

.form-status--error.is-visible::before {
  -webkit-mask-image: var(--icon-alert);
  mask-image: var(--icon-alert);
}

.form-status--success {
  background: rgba(27, 94, 36, 0.09);
  border: 1px solid rgba(27, 94, 36, 0.32);
  color: #17511f;
}

.form-status--error {
  background: rgba(179, 38, 30, 0.07);
  border: 1px solid rgba(179, 38, 30, 0.3);
  color: #96231c;
}

/* Full success panel that replaces the form. */
.form-success {
  display: none;
  text-align: center;
  padding: var(--space-lg) var(--space-md);
}

.form-success.is-visible {
  display: block;
}

.form-success__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  background: rgba(27, 94, 36, 0.1);
  border: 1px solid rgba(27, 94, 36, 0.35);
  color: var(--primary);
  font-size: 1.6rem;
}

.btn[aria-busy='true'] {
  opacity: 0.75;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   15. BREADCRUMBS, FOOTER, FLOATING UI
------------------------------------------------------------------------- */
.breadcrumbs {
  padding-top: calc(var(--header-height) + 24px);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted-dark);
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs li + li::before {
  content: '/';
  color: var(--muted-dark);
  opacity: 0.6;
}

.breadcrumbs a:hover {
  color: var(--primary);
}

.breadcrumbs [aria-current='page'] {
  color: var(--text);
}

/* --- Address card --- */
.address-card {
  display: grid;
  gap: var(--space-sm);
}

.address-card address {
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text);
}

.address-card__label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.address-card__note {
  font-size: 0.86rem;
  color: var(--muted-dark);
}

/* --- Footer (deep green) --- */
.site-footer {
  position: relative;
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
}

.site-footer.on-dark {
  background: linear-gradient(170deg, #0e2712 0%, #071209 100%);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-lg);
}

.footer__brand .brand {
  margin-bottom: var(--space-sm);
}

.footer__brand .brand__logo {
  height: 46px;
}

.footer__tagline {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 12px;
}

.footer__brand p {
  font-size: 0.92rem;
  max-width: 34ch;
}

.footer__col h3 {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin-bottom: var(--space-sm);
}

.footer__col ul {
  display: grid;
  gap: 12px;
}

.footer__col a {
  font-size: 0.92rem;
  color: var(--muted);
  transition: color 0.3s var(--ease-soft);
}

.footer__col a:hover {
  color: var(--accent-light);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-block: var(--space-md);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.82rem;
  color: var(--muted-dark);
}

.footer__address {
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--muted);
}

/* --- Floating WhatsApp button (hidden until a number is configured) --- */
.fab-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #1faa59;
  color: #fff;
  box-shadow: 0 14px 34px rgba(31, 170, 89, 0.38);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.fab-whatsapp:hover {
  transform: scale(1.06);
  box-shadow: 0 18px 44px rgba(31, 170, 89, 0.52);
}

.fab-whatsapp svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* --- Mobile sticky CTA bar --- */
.mobile-cta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 88;
  display: none;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius);
  background: rgba(253, 252, 249, 0.88);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 -6px 26px rgba(14, 59, 20, 0.12);
  transform: translateY(140%);
  transition: transform 0.45s var(--ease-out);
}

.mobile-cta.is-visible {
  transform: translateY(0);
}

.mobile-cta .btn {
  flex: 1;
  padding: 13px 16px;
  font-size: 0.76rem;
}

/* ---------------------------------------------------------------------------
   16. LEGAL / ARTICLE PAGES
------------------------------------------------------------------------- */
.article {
  max-width: 760px;
}

.article h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.article h2:first-child {
  margin-top: 0;
}

.article p,
.article li {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.8;
}

.article a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article p + p {
  margin-top: var(--space-sm);
}

.article ul {
  display: grid;
  gap: 10px;
  margin-top: var(--space-sm);
  padding-left: 22px;
  list-style: disc;
}

.article ul li::marker {
  color: var(--accent);
}

.article__meta {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: var(--space-md);
}

/* Shown on legal pages while viewing in Thai (see i18n.js). */
.lang-notice {
  display: none;
  margin-bottom: var(--space-md);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: rgba(184, 134, 42, 0.09);
  border: 1px solid rgba(184, 134, 42, 0.32);
  color: var(--accent-text);
  font-size: 0.88rem;
  font-weight: 600;
}

html[lang='th'] .lang-notice {
  display: block;
}

/* 404 page. */
.error-page {
  display: grid;
  place-items: center;
  min-height: 78svh;
  text-align: center;
  padding-top: var(--header-height);
}

.error-page__code {
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  background: var(--gradient-green);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------------------
   16b. PRODUCT SPEC BLOCKS — chips, key-spec box, market tabs, notes
------------------------------------------------------------------------- */

/* Small fact chips under a product intro. */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-md);
}

.tag-row li {
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-dark);
  transition:
    transform 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
}

.tag-row li:hover {
  transform: translateY(-3px);
  border-color: var(--glass-border-strong);
  box-shadow: 0 10px 22px rgba(14, 59, 20, 0.1);
}

html[lang='th'] .tag-row li {
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Key specification: one tile per figure, four across on desktop. */
.spec-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: var(--space-lg);
}

.spec-box__item {
  position: relative;
  padding: 20px 22px 22px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  transition:
    transform var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    background var(--duration) var(--ease-out);
}

/* Accent bar that grows along the top edge on hover. */
.spec-box__item::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0.2);
  transform-origin: left;
  opacity: 0.6;
  transition: transform 0.55s var(--ease-out), opacity 0.45s var(--ease-soft);
}

.spec-box__item:hover {
  transform: translateY(-6px);
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
  box-shadow: 0 18px 38px rgba(14, 59, 20, 0.1);
}

.spec-box__item:hover::before {
  transform: scaleX(1);
  opacity: 1;
}

.spec-box__item dt {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

.spec-box__item dd {
  margin-top: 10px;
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.spec-box__item dd span {
  display: block;
  margin-top: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: none;
}

html[lang='th'] .spec-box__item dt {
  letter-spacing: 0.02em;
  text-transform: none;
}

/* --- Market tabs ---------------------------------------------------------- */
.tabs {
  margin-top: var(--space-lg);
}

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
}

.tabs__tab {
  flex: 1 1 auto;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  cursor: pointer;
  transition:
    background 0.4s var(--ease-out),
    color 0.35s var(--ease-soft),
    box-shadow 0.4s var(--ease-out);
}

.tabs__tab:hover {
  color: var(--primary);
  background: var(--hover-soft);
}

.tabs__tab[aria-selected='true'] {
  background: var(--gradient-green);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(14, 59, 20, 0.24);
}

.tabs__tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

html[lang='th'] .tabs__tab {
  letter-spacing: 0.02em;
  text-transform: none;
}

.tabs__panel {
  margin-top: var(--space-md);
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  animation: fx-fade-up 0.5s var(--ease-out) both;
}

.tabs__panel h3 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: -0.01em;
}

.tabs__panel > p {
  max-width: 68ch;
  margin-top: 10px;
  color: var(--muted);
}

.tabs__panel .spec-table-wrap {
  margin-top: var(--space-md);
}

/* --- Grade / testing tables ---------------------------------------------- */
.spec-table--grades {
  min-width: 620px;
}

.spec-table--grades thead th {
  width: auto;
  padding: 14px 20px;
  border-bottom: 1px solid var(--glass-border-strong);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-dark);
  background: rgba(27, 94, 36, 0.06);
  white-space: nowrap;
}

.spec-table--grades thead th:first-child {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

.spec-table--grades thead th:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.spec-table--grades tbody th {
  width: 30%;
  font-size: 0.78rem;
  color: var(--muted-dark);
}

.spec-table--grades td {
  font-variant-numeric: tabular-nums;
}

/* The first grade column is the headline spec, so it carries the accent. */
.spec-table--grades tbody td:first-of-type {
  color: var(--text-strong);
  font-weight: 800;
}

html[lang='th'] .spec-table--grades thead th {
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Footnote under a table or a card grid. */
.note {
  margin-top: var(--space-md);
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--muted-dark);
}

.note--center {
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   17. SMALL UTILITIES
   A deliberately short list — enough to keep inline styles out of the HTML.
------------------------------------------------------------------------- */
.u-center {
  text-align: center;
}

.btn-group--center {
  justify-content: center;
}

.u-mt-sm { margin-top: var(--space-sm); }
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }

/* Elements hidden because their config value is empty. */
[hidden],
.is-config-hidden {
  display: none !important;
}