/* ==== tokens.css ==== */
/* ==========================================================================
   Mahakrang v2 - design tokens
   White-led, brand red, near-black Thai headings, light neutral panels.
   Contrast (measured): red #D80B19 on white 5.3:1 · #B80713 on white 6.6:1 ·
   #5A5A5A on white 6.9:1, on #F5F5F6 6.3:1 · white on red 5.3:1.
   ========================================================================== */

/* Self-hosted OFL fonts (@fontsource). Thai and Latin subsets load independently. */
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 500; font-display: swap; src: url(/Mahakrang-Concrete/fonts/kanit-thai-500-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 600; font-display: swap; src: url(/Mahakrang-Concrete/fonts/kanit-thai-600-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 700; font-display: swap; src: url(/Mahakrang-Concrete/fonts/kanit-thai-700-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 800; font-display: swap; src: url(/Mahakrang-Concrete/fonts/kanit-thai-800-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 500; font-display: swap; src: url(/Mahakrang-Concrete/fonts/kanit-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 600; font-display: swap; src: url(/Mahakrang-Concrete/fonts/kanit-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 700; font-display: swap; src: url(/Mahakrang-Concrete/fonts/kanit-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 800; font-display: swap; src: url(/Mahakrang-Concrete/fonts/kanit-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap; src: url(/Mahakrang-Concrete/fonts/ibm-plex-sans-thai-thai-400-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 500; font-display: swap; src: url(/Mahakrang-Concrete/fonts/ibm-plex-sans-thai-thai-500-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url(/Mahakrang-Concrete/fonts/ibm-plex-sans-thai-thai-600-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 700; font-display: swap; src: url(/Mahakrang-Concrete/fonts/ibm-plex-sans-thai-thai-700-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap; src: url(/Mahakrang-Concrete/fonts/ibm-plex-sans-thai-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 500; font-display: swap; src: url(/Mahakrang-Concrete/fonts/ibm-plex-sans-thai-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url(/Mahakrang-Concrete/fonts/ibm-plex-sans-thai-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 700; font-display: swap; src: url(/Mahakrang-Concrete/fonts/ibm-plex-sans-thai-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: "Sriracha"; font-style: normal; font-weight: 400; font-display: swap; src: url(/Mahakrang-Concrete/fonts/sriracha-thai-400-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Sriracha"; font-style: normal; font-weight: 400; font-display: swap; src: url(/Mahakrang-Concrete/fonts/sriracha-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+FEFF, U+FFFD; }

:root {
  /* colour */
  --red: #D80B19;
  --red-dk: #B80713;            /* hover, small red text */
  --red-wash: #FDECEC;
  --ink: #101010;
  --ink-2: #2A2A2C;
  --grey: #5A5A5A;              /* secondary text */
  --grey-2: #8A8A8E;            /* decorative only - never body text */
  --panel: #F5F5F6;
  --panel-2: #EDEDEF;
  --line: #E5E5E7;
  --white: #FFFFFF;
  --green: #1E7B39;  --green-wash: #ECF8EE;
  --amber: #7A5200;  --amber-wash: #FFF4D6; --amber-line: #F0D58A;

  /* type */
  --f-display: "Kanit", "IBM Plex Sans Thai", "Leelawadee UI", "Tahoma", system-ui, sans-serif;
  --f-body: "IBM Plex Sans Thai", "Kanit", "Leelawadee UI", "Tahoma", system-ui, sans-serif;
  --f-hand: "Sriracha", "Kanit", cursive;

  --fs-hero: clamp(2.25rem, 1.05rem + 4.6vw, 5.375rem);   /* 36 -> 86px */
  --fs-h1: clamp(1.875rem, 1.2rem + 2.6vw, 3.5rem);       /* 30 -> 56 */
  --fs-h2: clamp(1.5rem, 1.1rem + 1.5vw, 2.375rem);       /* 24 -> 38 */
  --fs-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);     /* 20 -> 26 */
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);/* 17 -> 21 */
  --fs-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);    /* 16 -> 17 */
  --fs-sm: 0.9375rem;                                      /* 15 */
  --fs-meta: 0.8125rem;                                    /* 13 */

  --lh-display: 1.14;   /* Kanit's Thai sits tall; tone marks need this much */
  --lh-heading: 1.28;
  --lh-body: 1.7;

  /* space: 4 8 12 16 24 32 48 64 80 96 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 80px; --s10: 96px;
  --gutter: clamp(16px, 3vw, 40px);
  --maxw: 1440px;
  --section: clamp(48px, 7vw, 96px);

  /* radius */
  --r-tile: 2px;       /* desktop homepage mosaic */
  --r-card: 12px;      /* mobile gateway + product cards */
  --r-panel: 14px;     /* lab inner panels */
  --r-outer: 20px;     /* lab outer cards */
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(16,16,16,.05), 0 8px 24px -12px rgba(16,16,16,.14);
  --shadow-float: 0 10px 30px -10px rgba(16,16,16,.35);

  --hdr-h: 72px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 180ms; --t-med: 280ms; --t-slow: 420ms;
  --focus: 0 0 0 3px #fff, 0 0 0 5px var(--ink);
}
@media (min-width: 1100px) { :root { --hdr-h: 96px; } }


/* ==== base.css ==== */
/* ==========================================================================
   base - reset, type, layout primitives, accessibility
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); }
/* overflow-x: clip (not hidden) keeps window the scroll container. */
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--f-body); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }

h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }
picture { width: 100%; height: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

h1, h2, h3, h4, .display {
  font-family: var(--f-display); font-weight: 700; color: var(--ink);
  line-height: var(--lh-heading); letter-spacing: 0; text-wrap: balance; /* no tracking on Thai */
}
/* Thai has no word spaces: never break inside a word, allow breaks at spaces / zero-width spaces only. */
:lang(th) { word-break: normal; line-break: strict; overflow-wrap: anywhere; }
p, li, dd { text-wrap: pretty; }
.num, time, .tnum { font-variant-numeric: tabular-nums; }
.en, [lang="en"] { letter-spacing: 0; }

/* focus: visible, consistent, never removed */
:where(a, button, input, select, textarea, summary, video, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.on-dark :where(a, button):focus-visible { outline-color: #fff; }

::selection { background: var(--red); color: #fff; }

.i { width: 1.25em; height: 1.25em; flex: none; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.wrap--narrow { max-width: 880px; }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(32px, 4vw, 56px); }
.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s6); }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s5); } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.vh, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip {
  position: absolute; left: 12px; top: 8px; z-index: 200; transform: translateY(-150%);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600;
  transition: transform var(--t-fast) var(--ease);
}
.skip:focus { transform: none; }

.eyebrow { font-family: var(--f-body); font-size: var(--fs-meta); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); }
.muted { color: var(--grey); }
.small { font-size: var(--fs-sm); }
.meta { font-size: var(--fs-meta); color: var(--grey); line-height: 1.5; }
.hand { font-family: var(--f-hand); font-weight: 400; letter-spacing: .01em; }
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { margin-top: 1.6em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}


/* ==== chrome.css ==== */
/* ==========================================================================
   chrome - review bar, header, drawer, search dialog, footer, loader, toast
   ========================================================================== */

/* ---------------------------------------------------------------- review bar */
.reviewbar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px max(var(--gutter), env(safe-area-inset-right, 0px)) 6px max(var(--gutter), env(safe-area-inset-left, 0px)); background: var(--panel); color: var(--grey);
  font-size: 12.5px; line-height: 1.45; text-align: center; border-bottom: 1px solid var(--line);
}
.reviewbar .i { width: 15px; height: 15px; color: var(--amber); }

/* ---------------------------------------------------------------- header */
.hdr { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); transition: box-shadow var(--t-med) var(--ease); }
.hdr.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 6px 18px -14px rgba(16,16,16,.25); }
.hdr__in { max-width: var(--maxw); margin-inline: auto; height: var(--hdr-h); padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); display: flex; align-items: center; gap: var(--s5); }

.brand { display: inline-flex; align-items: center; color: var(--red); flex: none; min-height: 44px; border-radius: 6px; }
.brand__mark { height: 46px; width: auto; }
.brand:hover { color: var(--red-dk); }
@media (min-width: 1100px) { .brand__mark { height: 62px; } }
.brand__text { font-family: var(--f-display); font-weight: 800; font-size: 22px; line-height: .95; color: var(--red); }

/* lab lockup: red MHK + name + short descriptor */
.brand--lab { gap: 14px; }
.brand__mhk { font-family: var(--f-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--red); }
.brand__lab { display: grid; gap: 1px; color: var(--ink); }
.brand__lab b { font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: .02em; line-height: 1.2; }
.brand__lab span { font-size: 12px; color: var(--grey); line-height: 1.35; text-wrap: balance; }
@media (min-width: 1100px) { .brand__mhk { font-size: 44px; } .brand__lab b { font-size: 17px; } .brand__lab span { font-size: 13px; } }

.hdr__nav { display: none; flex: 1; justify-content: center; }
.hdr__nav ul { display: flex; gap: clamp(20px, 3.1vw, 56px); }
.hdr__link { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-display); font-weight: 500; font-size: 17px; color: var(--ink); letter-spacing: .005em; }
.hdr__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2.5px; background: var(--red); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease); }
.hdr__link:hover::after { transform: scaleX(1); }
.hdr__link[aria-current="page"] { font-weight: 600; }
.hdr__link[aria-current="page"]::after { transform: scaleX(1); }
@media (min-width: 1100px) { .hdr__nav { display: flex; } }

.hdr__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (min-width: 1100px) { .hdr__tools { margin-left: 0; gap: 14px; } }
.hdr__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); transition: background var(--t-fast) var(--ease); }
.hdr__icon:hover { background: var(--panel); }
.hdr__icon .i { width: 26px; height: 26px; }
.hdr__menu .i { width: 30px; height: 30px; }
.hdr .hdr__call { display: none; }
@media (min-width: 700px) { .hdr .hdr__call { display: inline-flex; } }
.hdr__div { width: 1px; height: 28px; background: var(--line); }
@media (min-width: 1100px) { .hdr__div { display: none; } .hdr__search .i { width: 22px; height: 22px; } }

/* ---------------------------------------------------------------- dialogs (drawer + search) */
dialog { padding: 0; border: 0; color: inherit; background: transparent; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(16,16,16,.42); }

.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(440px, 100vw); height: 100dvh; background: #fff; box-shadow: -20px 0 60px -30px rgba(16,16,16,.45);
  opacity: 0; transform: translateX(24px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), overlay var(--t-med) allow-discrete, display var(--t-med) allow-discrete; }
.drawer[open] { opacity: 1; transform: none; }
@starting-style { .drawer[open] { opacity: 0; transform: translateX(24px); } }
.drawer::backdrop { transition: background var(--t-med) var(--ease), overlay var(--t-med) allow-discrete, display var(--t-med) allow-discrete; }
@starting-style { .drawer[open]::backdrop { background: rgba(16,16,16,0); } }
@media (max-width: 560px) { .drawer { width: 100vw; } }
.drawer__panel { height: 100%; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s5) calc(var(--s5) + env(safe-area-inset-bottom)); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--hdr-h); border-bottom: 1px solid var(--line); margin-bottom: var(--s3); position: sticky; top: 0; background: #fff; z-index: 1; }
.drawer__title { font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.drawer__close { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; }
.drawer__close:hover { background: var(--panel); }
.drawer__close .i { width: 28px; height: 28px; }
.drawer__list > li { border-bottom: 1px solid var(--line); }
.drawer__link { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: 4px; min-height: 64px; font-family: var(--f-display); font-weight: 600; font-size: 26px; line-height: 1.2; }
.drawer__link .i { width: 22px; height: 22px; color: var(--grey-2); transition: transform var(--t-med) var(--ease), color var(--t-med) var(--ease); }
.drawer__link:hover .i { transform: translateX(4px); color: var(--red); }
.drawer__link[aria-current="page"] { color: var(--red); }
.drawer__n { font-family: var(--f-body); font-size: 13px; font-weight: 600; color: var(--red); letter-spacing: .06em; }
.drawer__sub { padding: 0 0 14px 2.6rem; display: grid; gap: 2px; }
.drawer__sub a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; color: var(--ink-2); }
.drawer__sub a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: none; }
.drawer__sub a:hover, .drawer__sub a[aria-current="page"] { color: var(--red); }
.drawer__foot { margin-top: auto; padding-top: var(--s6); display: grid; gap: var(--s4); }

.langsw { display: inline-flex; padding: 4px; background: var(--panel); border-radius: var(--r-pill); justify-self: start; }
.langsw a { min-height: 40px; min-width: 64px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); font-size: 15px; font-weight: 600; color: var(--grey); }
.langsw a[aria-current="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16,16,16,.12); }

.searchdlg { position: fixed; inset: 0 0 auto 0; margin: 0 auto; width: min(760px, calc(100vw - 24px)); top: 12px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-float);
  opacity: 0; transform: translateY(-8px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), overlay var(--t-med) allow-discrete, display var(--t-med) allow-discrete; }
.searchdlg[open] { opacity: 1; transform: none; }
@starting-style { .searchdlg[open] { opacity: 0; transform: translateY(-8px); } }
.searchdlg__form { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; }
.searchdlg__form > .i { width: 22px; height: 22px; color: var(--grey); }
.searchdlg__form input { flex: 1; min-width: 0; height: 48px; border: 0; outline: none; font-size: 18px; background: transparent; }
.searchdlg__form input:focus-visible { outline: none; }
.searchdlg__form:focus-within { box-shadow: inset 0 0 0 2px var(--ink); border-radius: 18px; }
.searchdlg__close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.searchdlg__close:hover { background: var(--panel); }
@media (max-width: 560px) { .searchdlg__form .btn { display: none; } }

/* ---------------------------------------------------------------- footer */
.ftr { border-top: 1px solid var(--line); background: #fff; margin-top: var(--s8); }
.home .ftr { margin-top: 0; }
.ftr__in { max-width: var(--maxw); margin-inline: auto; padding: var(--s6) max(var(--gutter), env(safe-area-inset-right, 0px)) var(--s5) max(var(--gutter), env(safe-area-inset-left, 0px)); display: grid; gap: var(--s4) var(--s5); align-items: center; grid-template-columns: 1fr auto; grid-template-areas: "brand brand" "nav nav" "social top"; }
.ftr__brand { grid-area: brand; } .ftr__nav { grid-area: nav; } .ftr__social { grid-area: social; } .ftr__top { grid-area: top; }
.ftr__name { font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 1.4rem + .5vw, 30px); color: var(--red); line-height: 1.2; }
.ftr__line { margin-top: 4px; font-size: 14px; color: var(--grey); }
.ftr__nav ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.ftr__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--ink-2); }
.ftr__nav a:hover { color: var(--red); }
.ftr__social { display: flex; gap: 4px; }
.ftr__social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); }
.ftr__social a:hover { background: var(--panel); color: var(--red); }
.ftr__social .i { width: 22px; height: 22px; }
.ftr__top { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--ink); justify-self: end; transition: border-color var(--t-fast), background var(--t-fast); }
.ftr__top:hover { border-color: var(--ink); background: var(--panel); }
.ftr__top .i { width: 20px; height: 20px; }
.ftr__legal { max-width: var(--maxw); margin-inline: auto; padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) calc(var(--s5) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left, 0px)); display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: space-between; font-size: 13px; color: var(--grey); }
.ftr__legal a:hover { color: var(--red); }
@media (min-width: 900px) {
  .ftr__in { grid-template-columns: 1fr auto auto auto; grid-template-areas: "brand nav social top"; gap: var(--s6); }
  .ftr__nav ul { gap: 4px 28px; }
  .ftr__social { padding-left: var(--s5); border-left: 1px solid var(--line); }
}

/* ---------------------------------------------------------------- loader: page stays visible under a dim layer */
.loader { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(12,12,12,.52); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 260ms var(--ease), visibility 0s linear 260ms; }
.loader.is-on { opacity: 1; visibility: visible; transition: opacity 200ms var(--ease); }
.loader.is-out { opacity: 0; }
.loader__card { display: grid; justify-items: center; gap: 10px; }
.loader__text { color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.truck { width: clamp(72px, 7vw, 104px); height: auto; overflow: visible; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.loader.is-on .truck { animation: truck-travel 1.8s var(--ease) infinite alternate; }
.loader.is-on .truck__move { animation: truck-bob .36s ease-in-out infinite alternate; }
.loader.is-on .truck__stripes { animation: truck-drum 1.1s linear infinite; }
.loader.is-on .truck__spoke { transform-box: fill-box; transform-origin: center; animation: truck-wheel .55s linear infinite; }
@keyframes truck-travel { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
@keyframes truck-bob { from { transform: translateY(0); } to { transform: translateY(-0.8px); } }
@keyframes truck-drum { from { transform: translateX(0); } to { transform: translateX(30px); } }
@keyframes truck-wheel { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loader.is-on .truck, .loader.is-on .truck__move, .loader.is-on .truck__stripes, .loader.is-on .truck__spoke { animation: none !important; } }

/* ---------------------------------------------------------------- toast + preview bar */
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 95; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 18px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 14px; box-shadow: var(--shadow-float);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--red); color: #fff; font-weight: 600; font-size: 14px; }
.toast:empty { display: none; }
.previewbar { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 94; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: var(--amber-wash); color: var(--amber); border: 1px solid var(--amber-line); font-size: 13px; box-shadow: var(--shadow-card); max-width: calc(100vw - 24px); }
.previewbar .i { width: 16px; height: 16px; }
.searchdlg__res:empty { display: none; }
.searchdlg__res { border-top: 1px solid var(--line); max-height: min(60dvh, 480px); overflow-y: auto; padding: 6px; }
.searchdlg__res ul { display: grid; gap: 2px; }
.searchdlg__res a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; }
.searchdlg__res a:hover, .searchdlg__res a:focus-visible { background: var(--panel); }
.searchdlg__res b { font-family: var(--f-display); font-weight: 600; font-size: 16px; }
.searchdlg__res span:not(.searchdlg__k) { font-size: 13.5px; color: var(--grey); line-height: 1.5; }
.searchdlg__k { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--red-dk); }
.searchdlg__none { padding: 14px; color: var(--grey); font-size: 15px; }

/* ---------------------------------------------------------------- header language toggle (secondary, not a nav item) */
.hdr__lang { display: none; align-items: center; padding: 3px; border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--line); }
.hdr__lang-opt { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 34px; padding: 0 10px; border-radius: var(--r-pill);
  font-family: var(--f-display); font-weight: 500; font-size: 14px; letter-spacing: .06em; color: var(--grey); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.hdr__lang-opt:hover { color: var(--ink); }
.hdr__lang-opt[aria-current="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(16,16,16,.14); pointer-events: none; }
/* Invisible hit-area extension keeps each option at 44px tall while the pill stays compact. */
.hdr__lang-opt { position: relative; }
.hdr__lang-opt::after { content: ""; position: absolute; inset: -6px 0; } /* 34px pill + 2x6px = 46px target */
.hdr__lang-m { font-family: var(--f-display); font-weight: 600; font-size: 14px; letter-spacing: .06em; border: 1.5px solid var(--line); }
.hdr__lang-m:hover { border-color: var(--ink); background: #fff; }
@media (min-width: 700px) { .hdr__lang { display: inline-flex; } .hdr .hdr__lang-m { display: none; } }

/* Space management: 1100-1279 (desktop nav visible, little room) uses the compact language button. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .hdr__lang { display: none; }
  .hdr .hdr__lang-m { display: grid; }
  .hdr__nav ul { gap: clamp(16px, 2vw, 28px); }
}
/* Lab lockup (MHK + name + descriptor) is wider than the stacked wordmark.
   Phones: measured values from the lab module so search, language and menu all stay on screen;
   under 400px the name wraps to two lines and the descriptor steps aside. 1100-1439 (nav visible):
   descriptor hidden and the call pill shows its icon only. */
.hdr--lab .brand__lab { min-width: 0; }
@media (max-width: 699px) {
  .hdr--lab .hdr__in { gap: 12px; }
  /* .brand is flex:none; the lab lockup must give way (descriptor wraps) or the menu button is pushed off-screen at 401-430px */
  .hdr--lab .brand--lab { gap: 8px; min-width: 0; flex: 0 1 auto; }
  .hdr--lab .brand__mhk { flex: none; white-space: nowrap; }
  .hdr--lab .brand__mhk { font-size: 29px; }
  .hdr--lab .brand__lab b { font-size: 12.5px; letter-spacing: .01em; white-space: nowrap; }
  .hdr--lab .brand__lab span { font-size: 11px; }
  .hdr--lab .hdr__tools { gap: 2px; flex: none; }
  .hdr--lab .hdr__div { display: none; }
}
@media (max-width: 400px) {
  .hdr--lab .brand__lab b { white-space: normal; max-width: 10ch; line-height: 1.15; }
  .hdr--lab .brand__lab span { display: none; }
}
/* 401-459px: the full lockup (~450px with the tools) does not fit; the descriptor steps aside, the name stays on one line */
@media (min-width: 401px) and (max-width: 459px) {
  .hdr--lab .brand__lab span { display: none; }
}
/* 700-819px: language pill + call pill are back (tools ~400px) but the nav is not; the phone-size lockup without the
   descriptor keeps the menu button on screen in Thai and in English (the EN descriptor is longer). */
@media (min-width: 700px) and (max-width: 819px) {
  .hdr--lab .hdr__in { gap: 12px; }
  .hdr--lab .brand--lab { gap: 8px; min-width: 0; flex: 0 1 auto; }
  .hdr--lab .brand__mhk { font-size: 29px; flex: none; white-space: nowrap; }
  .hdr--lab .brand__lab b { font-size: 12.5px; letter-spacing: .01em; white-space: nowrap; }
  .hdr--lab .brand__lab span { display: none; }
}
@media (min-width: 1100px) and (max-width: 1439px) {
  .hdr--lab .brand__lab span { display: none; }
  .hdr--lab .hdr__call span { display: none; } .hdr--lab .hdr__call { padding: 0 14px; }
}

/* approved logo asset (Settings > logo) replaces the traced wordmark */
.brand--asset img { display: block; height: 58px; width: auto; }
@media (max-width: 1099px) { .brand--asset img { height: 44px; } }
/* phrase units produced by layout.ts phrases() */
.nw { white-space: nowrap; }


/* ==== components.css ==== */
/* ==========================================================================
   components - shared building blocks used by every page
   ========================================================================== */

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1.5px solid transparent; border-radius: 10px;
  font-family: var(--f-display); font-weight: 500; font-size: 16px; line-height: 1.25; white-space: normal; flex-wrap: wrap; row-gap: 0; letter-spacing: 0; cursor: pointer; text-align: center;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.btn .i { width: 20px; height: 20px; }
.btn:active { transform: translateY(1px); }
.btn--pill { border-radius: var(--r-pill); }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-dk); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--soft { background: var(--panel); color: var(--ink); }
.btn--soft:hover { background: var(--panel-2); }
.btn--white { background: #fff; color: var(--ink); }
.btn--block { width: 100%; }
.btn--lg { min-height: 56px; font-size: 17px; padding: 0 26px; }
.btn--sm { min-height: 40px; font-size: 14px; padding: 0 16px; }
.btn__num { font-variant-numeric: tabular-nums; opacity: .9; font-weight: 500; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* circular arrow control (references R1-R3) */
.carrow { display: inline-grid; place-items: center; flex: none; border-radius: 50%; border: 1.5px solid currentColor; transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
.carrow .i { width: 46%; height: 46%; }
.carrow--sm { width: 36px; height: 36px; } .carrow--md { width: 44px; height: 44px; } .carrow--lg { width: 56px; height: 56px; }
.carrow--white { color: #fff; border-color: rgba(255,255,255,.9); }
.carrow--outline { color: var(--ink); border-color: var(--ink); }
.carrow--red { color: #fff; background: var(--red); border-color: var(--red); }
.carrow--dark { color: #fff; background: var(--ink); border-color: var(--ink); }
.carrow--solidwhite { color: var(--ink); background: #fff; border-color: #fff; box-shadow: 0 2px 10px rgba(16,16,16,.18); }
.carrow--down .i { transform: rotate(90deg); }
a:hover .carrow--white, a:focus-visible .carrow--white { background: #fff; color: var(--ink); }
a:hover .carrow--outline, button:hover .carrow--outline { background: var(--ink); color: #fff; }
a:hover .carrow--solidwhite { background: var(--red); color: #fff; border-color: var(--red); }

/* text link with arrow */
.tlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--ink); }
.tlink .i { width: 18px; height: 18px; transition: transform var(--t-med) var(--ease); }
.tlink:hover { color: var(--red); } .tlink:hover .i { transform: translateX(3px); }

/* ---------------------------------------------------------------- labels */
.demotag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: var(--r-pill); background: var(--amber-wash); color: var(--amber); border: 1px solid var(--amber-line);
  font-family: var(--f-body); font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; letter-spacing: 0; }
.demotag .i { width: 14px; height: 14px; }
.on-image .demotag, .demotag--float { box-shadow: 0 1px 6px rgba(0,0,0,.18); }

.qc { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); font-weight: 600; white-space: nowrap; line-height: 1.3; }
.qc--md { padding: 6px 14px 6px 10px; font-size: 14px; } .qc--sm { padding: 3px 10px 3px 7px; font-size: 12.5px; }
.qc .i { width: 1.15em; height: 1.15em; }
.qc--passed { background: var(--green-wash); color: var(--green); }
.qc--failed { background: var(--red-wash); color: var(--red-dk); }
.qc--under_review { background: var(--amber-wash); color: var(--amber); }
.qc--pending, .qc--not_assessed { background: var(--panel); color: #444447; }

.stamp { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--grey); line-height: 1.45; }
.stamp .i { width: 14px; height: 14px; flex: none; }
.stamp--muted { color: var(--grey); }
.stamp--on-dark { color: rgba(255,255,255,.92); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--panel); font-size: 13px; font-weight: 600; color: var(--ink-2); }

/* ---------------------------------------------------------------- section heads */
.shead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.shead__t { font-size: var(--fs-h3); font-weight: 700; }
.shead__a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--red); white-space: nowrap; }
.shead__a .i { width: 16px; height: 16px; }
.shead__a:hover { color: var(--red-dk); }

/* ---------------------------------------------------------------- chips & tabs */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))) calc(-1 * max(var(--gutter), env(safe-area-inset-right, 0px))); padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); scroll-padding-inline: var(--gutter); }
.chips--scroll::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 20px; border-radius: var(--r-pill); background: var(--panel); border: 1px solid var(--line);
  font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; flex: none; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.chip:hover { border-color: var(--grey-2); }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-current="true"], .chip[aria-current="page"] { background: var(--red); border-color: var(--red); color: #fff; }
.chip__unit { font-size: 12px; opacity: .8; }

.tabs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; min-height: 44px; padding: 0 20px; border-radius: 12px; background: var(--panel); color: var(--ink); font-weight: 600; font-size: 15px; white-space: nowrap; transition: background var(--t-fast), color var(--t-fast); }
.tab:hover { background: var(--panel-2); }
.tab[aria-selected="true"] { background: var(--red); color: #fff; }

/* ---------------------------------------------------------------- cards & panels */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); }
.card--lab { border-radius: var(--r-outer); box-shadow: var(--shadow-card); }
.panel { background: var(--panel); border-radius: var(--r-panel); }
.media-frame { position: relative; overflow: hidden; background: var(--panel); }
.media-frame img, .media-frame video { width: 100%; height: 100%; object-fit: cover; }
.ratio-16x9 { aspect-ratio: 16 / 9; } .ratio-4x3 { aspect-ratio: 4 / 3; } .ratio-3x4 { aspect-ratio: 3 / 4; } .ratio-1 { aspect-ratio: 1; } .ratio-21x9 { aspect-ratio: 21 / 9; }

/* metric cells (lab) */
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.metric { background: var(--panel); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.metric__k { font-size: 13px; color: var(--grey); line-height: 1.35; }
.metric__v { margin-top: 4px; font-family: var(--f-display); font-weight: 600; font-size: clamp(20px, 1rem + 1vw, 26px); line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.metric__v small { font-family: var(--f-body); font-size: 13px; font-weight: 500; color: var(--grey); margin-left: 3px; }
.metric__v--pending { color: var(--grey); }
.metric__b { margin-top: 4px; font-size: 12px; color: var(--grey); line-height: 1.35; }

/* horizontal rail with scroll-snap (rail only - never the document) */
.rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: none; }
.rail-dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--s4); }
.rail-dots button { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.rail-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #CFCFD3; transition: background var(--t-fast), transform var(--t-fast); }
.rail-dots button[aria-current="true"]::before { background: var(--red); transform: scale(1.1); }

/* dialog (calculator modal / media viewer) */
.dlg { width: min(960px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; border-radius: 20px; background: #fff; box-shadow: var(--shadow-float); overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(.985); transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), overlay var(--t-med) allow-discrete, display var(--t-med) allow-discrete; }
.dlg[open] { opacity: 1; transform: none; }
@starting-style { .dlg[open] { opacity: 0; transform: translateY(12px) scale(.985); } }
.dlg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 22px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 1; }
.dlg__title { font-family: var(--f-display); font-weight: 600; font-size: 20px; }
.dlg__close { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; flex: none; }
.dlg__close:hover { background: var(--panel); }
.dlg__close .i { width: 26px; height: 26px; }
.dlg__body { overflow-y: auto; overscroll-behavior: contain; max-height: calc(100dvh - 32px - 77px); }
@media (max-width: 640px) {
  .dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .dlg__body { max-height: calc(100dvh - 77px); padding-bottom: env(safe-area-inset-bottom); }
}

/* forms */
.field { display: grid; gap: 6px; }
.field__label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field__hint { font-size: 13px; color: var(--grey); }
.field__err { font-size: 13px; color: var(--red-dk); font-weight: 500; min-height: 0; }
.input, .select { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-size: 16px; transition: border-color var(--t-fast); }
.input:hover, .select:hover { border-color: var(--grey-2); }
.input:focus-visible, .select:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16,16,16,.08); }
.input[aria-invalid="true"] { border-color: var(--red); background: var(--red-wash); }
.input-unit { position: relative; display: flex; }
.input-unit .input { padding-right: 64px; }
.input-unit__u { position: absolute; right: 6px; top: 6px; bottom: 6px; display: grid; place-items: center; min-width: 48px; padding: 0 8px; border-radius: 7px; background: var(--panel); font-size: 14px; color: var(--grey); }

/* empty / preparation states: polished, short Thai copy, never brackets */
.empty { display: grid; justify-items: start; gap: 10px; padding: var(--s6); border-radius: var(--r-panel); background: var(--panel); color: var(--grey); }
.empty .i { width: 28px; height: 28px; color: var(--grey-2); }
.empty__t { font-family: var(--f-display); font-weight: 600; font-size: 18px; color: var(--ink); }

/* breadcrumbs */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--grey); padding-top: var(--s5); }
.crumbs a { color: var(--grey); position: relative; } .crumbs a:hover { color: var(--red); }
.crumbs a::after { content: ""; position: absolute; inset: -7px -4px; } /* 44px hit area on 30px text */
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--grey-2); }

/* video facade (YouTube loads only on click; a real player, not a painted play icon) */
.yt { position: relative; display: block; width: 100%; background: #000; border-radius: inherit; overflow: hidden; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: opacity var(--t-med); }
.yt:hover img { opacity: 1; }
.yt__play { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.yt__play .i { width: 28px; height: 28px; margin-left: 3px; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* media viewer (public/js/viewer.js) */
.vw { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; background: rgba(8,8,8,.96); color: #fff; display: none; grid-template-rows: auto 1fr auto; }
.vw[open] { display: grid; }
.vw::backdrop { background: rgba(8,8,8,.9); }
.vw__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 0 18px; }
.vw__count { font-size: 14px; color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; }
/* One definite cell: the media's max-width/max-height:100% resolve against it (an implicit auto row let a tall
   photo render at natural size, spill under the caption bar and off-screen on desktop). */
.vw__stage { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; padding: 8px 12px; touch-action: pan-y; }
.vw__media { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; transition: opacity 220ms var(--ease); background: #111; }
.vw__foot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); }
.vw__text { grid-column: 2; min-width: 0; text-align: center; display: grid; gap: 4px; justify-items: center; }
.vw__cap { font-size: 15px; line-height: 1.5; }
.vw__btn { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); color: #fff; }
.vw__btn:hover { background: #fff; color: var(--ink); }
.vw__btn .i { width: 22px; height: 22px; }
.vw :focus-visible { outline-color: #fff; }
.vw-thumb { position: relative; display: block; overflow: hidden; border-radius: var(--r-card); background: var(--panel); }
.vw-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.vw-thumb:hover img { transform: scale(1.03); }
.vw-thumb__play { position: absolute; left: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; }
.vw-thumb__play .i { width: 18px; height: 18px; margin-left: 2px; }

.vw__ph { display: inline-block; max-width: 100%; }

/* Header phone pill and other single-line pills stay on one line where they are shown. */
.hdr__call, .btn--nowrap { white-space: nowrap; flex-wrap: nowrap; }


/* ==== calc.css ==== */
/* ==========================================================================
   calc - the product-aware volume calculator (page + dialog variants), the lab
   dialog sheet and the floating shortcut. Block: .calc / .calc__*, plus calc-*.
   Layout follows its CONTAINER, so the same block works full-width on a page,
   inside a product page and inside the 960px dialog.
   ========================================================================== */

/* Thai phrase units (calc-engine.js phrases(), rendered by ph() on the server and by calc-ui.js live): a compound,
   a short phrase, a clause word with its word. Inline-block: moves to the next line whole, and still wraps inside
   itself when it is wider than the line, so it can never overflow. Shared by the concrete pages. */
.cc-ph { display: inline-block; max-width: 100%; }
.cc-ph.cc-ph--flow { display: inline; }   /* wider than its line: plain flow instead of a line-filling box (fitPhrases) */
.cc-nw { white-space: nowrap; }   /* short fixed tokens only: a date, a time */

.calc { container: calc / inline-size; --calc-r: 14px; --calc-line: var(--line); color: var(--ink); }
.calc [hidden] { display: none !important; }
.calc__layout { display: grid; gap: 20px; align-items: start; }
.calc__layout > * { min-width: 0; }

/* ---------------------------------------------------------------- steps */
.calc__form { display: grid; container: calcform / inline-size; }
.calc__step { margin: 0; padding: 20px 0 22px; border: 0; border-top: 1px solid var(--calc-line); min-width: 0; }
.calc__step:first-child { border-top: 0; padding-top: 4px; }
.calc__stephead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 0; }
fieldset.calc__step > legend.calc__stephead { float: left; width: 100%; }
fieldset.calc__step > legend.calc__stephead + * { clear: both; }
.calc__num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ink); color: #fff; font-family: var(--f-display); font-weight: 600; font-size: 14px; line-height: 1; }
.calc__steph { font-family: var(--f-display); font-weight: 600; font-size: clamp(17px, .95rem + .35vw, 20px); line-height: 1.3; color: var(--ink); }
.calc__label { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); margin-bottom: 6px; }
.calc__hint { margin-top: 5px; font-size: 12.5px; line-height: 1.45; color: var(--grey); }
.calc__err { font-size: 13px; line-height: 1.4; color: var(--red-dk); font-weight: 600; }
.calc__err:not(:empty) { margin-top: 6px; display: flex; gap: 6px; align-items: flex-start; }
.calc__err:not(:empty)::before { content: "!"; flex: none; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* product select */
.calc__selectwrap { position: relative; }
.calc__select { width: 100%; min-height: 54px; padding: 12px 48px 12px 16px; border: 1.5px solid var(--calc-line); border-radius: 12px; background: #fff; font: 500 16px/1.35 var(--f-body); color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.calc__select:hover { border-color: #c8c8cd; }
.calc__select:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16,16,16,.1); }
.calc__selchev { position: absolute; z-index: 2; right: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; pointer-events: none; color: var(--grey); }
/* Once the script runs, the closed select shows the chosen mix on two lines - its name, then the strength basis -
   instead of one ellipsized line ("…ลูกบาศก์ · 2…"). The native <select> stays the real control: transparent, on
   top, the same size, so a tap or a key opens the platform's own picker. The view grows with its text (no clipping). */
.calc__selview { display: none; }
.calc.is-ready .calc__selview { display: grid; align-content: center; gap: 1px; min-height: 58px; padding: 8px 46px 9px 16px; border: 1.5px solid var(--calc-line); border-radius: 12px; background: #fff;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.calc.is-ready .calc__select { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; }
.calc__selname { font: 600 16px/1.35 var(--f-body); color: var(--ink); text-wrap: balance; }
.calc__selmeta { font-size: 13px; line-height: 1.4; color: var(--grey); font-variant-numeric: tabular-nums; }
.calc__selectwrap:hover .calc__selview { border-color: #c8c8cd; }
.calc__selectwrap:has(.calc__select:focus-visible) .calc__selview { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16,16,16,.1); outline: 2px solid transparent; }
@media (forced-colors: active) { .calc__selectwrap:has(.calc__select:focus-visible) .calc__selview { outline-color: Highlight; } }
.calc__intro { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--grey); max-width: 60ch; }

/* shape tiles (native radios: arrow keys move between shapes) */
.calc__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.calc__tile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; min-height: 58px; padding: 10px 12px; border: 1.5px solid var(--calc-line); border-radius: 12px; background: #fff; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.calc__tile:hover { border-color: #c8c8cd; }
.calc__radio { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.calc__tileic { width: 30px; height: 30px; color: var(--grey); transition: color var(--t-fast) var(--ease), transform var(--t-med) var(--ease); }
.calc__tilet { font-family: var(--f-display); font-weight: 500; font-size: 14.5px; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.calc__tileh { display: none; font-size: 12px; line-height: 1.35; color: var(--grey); font-variant-numeric: tabular-nums; text-wrap: balance; }
.calc__tile:has(.calc__radio:checked) { border-color: var(--red); background: #FFF6F6; box-shadow: inset 0 0 0 1px var(--red); }
.calc__tile:has(.calc__radio:checked) .calc__tileic { color: var(--red); }
.calc__tile:has(.calc__radio:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.calc__tile:active .calc__tileic { transform: scale(.94); }

/* dimensions: diagram + fields */
.calc__dims { display: grid; gap: 14px; }
.calc__fig { margin: 0; border-radius: var(--calc-r); background: var(--panel); padding: 8px 10px; }
.calc-fig { display: block; width: 100%; height: auto; max-height: 170px; margin-inline: auto; overflow: visible; }
.calc-fig__top { fill: #fff; stroke: #1b1c1f; stroke-width: 1.4; stroke-linejoin: round; }
.calc-fig__front { fill: #DCDCE0; stroke: #1b1c1f; stroke-width: 1.4; stroke-linejoin: round; }
.calc-fig__side { fill: #C3C3C9; stroke: #1b1c1f; stroke-width: 1.4; stroke-linejoin: round; }
.calc-fig__stub { fill: none; stroke: #8A8A8E; stroke-width: 1.4; stroke-dasharray: 4 3; }
.calc-fig__dim path { fill: none; stroke: #6d6d72; stroke-width: 1.2; transition: stroke var(--t-fast) var(--ease); }
.calc-fig__dim text, .calc-fig__count { font: 500 12.5px var(--f-body); fill: #4a4a4e; font-variant-numeric: tabular-nums; transition: fill var(--t-fast) var(--ease); }
.calc-fig__dim.is-active path { stroke: var(--red); stroke-width: 2; }
.calc-fig__dim.is-active text, .calc-fig__count.is-active { fill: var(--red-dk); font-weight: 700; }
.calc-fig__secn { font: 700 22px var(--f-display); fill: #1b1c1f; }
.calc-fig__plus { font: 500 13px var(--f-body); fill: #4a4a4e; }

.calc__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.calc__grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; align-items: start; }
.calc__field { min-width: 0; }

/* the input group: number + unit */
.calc__inp { position: relative; display: flex; align-items: stretch; min-height: 52px; border: 1.5px solid var(--calc-line); border-radius: 12px; background: #fff; overflow: hidden;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.calc__inp:hover { border-color: #c8c8cd; }
.calc__inp:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16,16,16,.1); }
.calc__input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: transparent; padding: 0 12px 0 14px; font: 600 18px/1.2 var(--f-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.calc__input:focus, .calc__input:focus-visible { outline: none; }
.calc__input::placeholder { color: #b4b4b9; font-weight: 500; }
.calc__unitwrap { position: relative; flex: none; display: flex; border-left: 1px solid var(--calc-line); background: var(--panel); }
.calc__unit { appearance: none; -webkit-appearance: none; border: 0; background: transparent; padding: 0 28px 0 12px; font: 600 15px var(--f-body); color: var(--ink-2); cursor: pointer; min-width: 64px; }
.calc__unit:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: 8px; }
.calc__unitchev { position: absolute; right: 8px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; pointer-events: none; color: var(--grey); }
.calc__unitfix { flex: none; display: grid; place-items: center; padding: 0 14px; border-left: 1px solid var(--calc-line); background: var(--panel); font-size: 15px; font-weight: 600; color: var(--ink-2); }
.calc__field.is-invalid .calc__inp { border-color: var(--red); background: #FFF6F6; }
.calc__field.is-invalid .calc__inp:focus-within { box-shadow: 0 0 0 3px rgba(216,11,25,.15); }

/* composite sections */
.calc__secs { display: grid; gap: 10px; counter-reset: sec; }
.calc__sec { border: 1.5px solid var(--calc-line); border-radius: var(--calc-r); padding: 12px; background: #fff; animation: calc-in 260ms var(--ease) both; }
.calc__sechead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.calc__secn { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--panel); font-family: var(--f-display); font-weight: 700; font-size: 14px; }
.calc__secname { flex: 1; min-width: 0; min-height: 44px; border: 0; border-bottom: 1.5px dashed var(--calc-line); background: transparent; padding: 0 2px; font: 500 16px var(--f-body); }
.calc__secname:focus-visible { outline: none; border-bottom: 1.5px solid var(--ink); }
.calc__secdel { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--grey); }
.calc__secdel:hover { background: var(--red-wash); color: var(--red-dk); }
.calc__secdel .i { width: 18px; height: 18px; }
.calc__secfields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.calc__secvol { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.calc__secvol:empty { display: none; }
.calc__add { margin-top: 10px; width: 100%; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed #c8c8cd; border-radius: var(--calc-r); font-family: var(--f-display); font-weight: 500; font-size: 15.5px; color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.calc__add:hover:not(:disabled) { border-color: var(--red); color: var(--red-dk); background: #FFF6F6; }
.calc__add:disabled { opacity: .45; cursor: default; }
.calc__add .i { width: 18px; height: 18px; }
@keyframes calc-in { from { opacity: 0; transform: translateY(6px); } }

/* allowance */
.calc__field--pct { max-width: 480px; }
.calc__inp--pct { max-width: 240px; }
.calc__inp--pct .calc__input { text-align: center; padding: 0 4px; }
.calc__step-btn { flex: none; width: 48px; display: grid; place-items: center; color: var(--ink-2); background: var(--panel); transition: background var(--t-fast), color var(--t-fast); }
.calc__step-btn:first-child { border-right: 1px solid var(--calc-line); }
.calc__step-btn:hover { background: var(--panel-2); color: var(--ink); }
.calc__step-btn .i { width: 18px; height: 18px; }
.calc__inp--pct .calc__unitfix { padding: 0 10px; background: #fff; border-left: 0; color: var(--grey); }
.calc__preset { font-size: 15px; color: var(--ink-2); }
.calc__preset b { font-family: var(--f-display); font-weight: 600; }

/* live volume pill (single-column layouts only) */
.calc__peek { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 3; justify-self: center; margin-top: 4px; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px 0 20px; border-radius: 999px;
  background: rgba(16,16,16,.92); color: #fff; box-shadow: 0 10px 26px -10px rgba(16,16,16,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: calc-in 240ms var(--ease) both; }
.calc__peekk { font-size: 13.5px; color: rgba(255,255,255,.78); }
.calc__peekv { font-size: 13.5px; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; }
.calc__peekv b { font-family: var(--f-display); font-weight: 600; font-size: 20px; color: #fff; margin-right: 2px; }
.calc__peek .i { width: 18px; height: 18px; opacity: .8; }
@container calc (min-width: 780px) { .calc__peek { display: none !important; } }

/* ---------------------------------------------------------------- result card */
.calc__card { border: 1px solid var(--calc-line); border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); overflow: hidden; }
.calc__prod { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-bottom: 1px solid var(--calc-line); background: linear-gradient(180deg, #fff, #FAFAFB); }
.calc__prodimg { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--panel); }
.calc__prodimg picture, .calc__prodimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.calc__prodimg img { transition: opacity 280ms var(--ease); }
.calc__prodimg img.is-new { opacity: 0; }
.calc__prodph { position: absolute; inset: 0; display: none; place-items: center; color: var(--grey-2); }
.calc__prodph .i { width: 34px; height: 34px; }
.calc__prod[data-empty] .calc__prodph { display: grid; }
.calc__prodtxt { min-width: 0; display: grid; gap: 3px; justify-items: start; }
.calc__prodname { font-family: var(--f-display); font-weight: 600; font-size: 19px; line-height: 1.25; color: var(--ink); }
.calc__prodmeta { font-size: 13.5px; line-height: 1.45; color: var(--grey); font-variant-numeric: tabular-nums; }
.calc__proddemo:empty { display: none; }
.calc__proddemo .demotag { margin-top: 2px; }
.calc__prodlink { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin-block: -4px; font-size: 13.5px; font-weight: 600; color: var(--red-dk); }
.calc__prodlink .i { width: 15px; height: 15px; transition: transform var(--t-fast) var(--ease); }
.calc__prodlink:hover .i { transform: translateX(3px); }
.calc__prod[data-empty] .calc__prodname { font-size: 16px; }
/* nothing chosen: a small calculator badge, not a big empty photo frame */
.calc__prod[data-empty] { grid-template-columns: 52px minmax(0, 1fr); align-items: start; padding: 14px 16px; }
.calc__prod[data-empty] .calc__prodimg { border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--calc-line); }
.calc__prod[data-empty] .calc__prodph .i { width: 26px; height: 26px; color: var(--grey); }
.calc__dims:has(.calc__set--composite:not([hidden])) .calc-fig { max-height: 150px; }

.calc__res { padding: 18px 18px 20px; }
.calc__rt { font-family: var(--f-body); font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--grey); }
.calc__rt:not(:lang(th)) { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }   /* no tracking on Thai */
.calc__net { margin-top: 6px; }
.calc__netk { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.calc__netv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 2px; }
.calc__netn { font-family: var(--f-display); font-weight: 700; font-size: clamp(46px, 10cqi, 76px); line-height: 1.02; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc__netu { font-size: 16px; font-weight: 600; color: var(--grey); }
.calc__res[data-state="waiting"] .calc__netn, .calc__res[data-state="invalid"] .calc__netn { color: #c3c3c8; font-size: 40px; font-weight: 500; letter-spacing: 0; }
.calc__rows { margin-top: 12px; border-top: 1px solid var(--calc-line); }
.calc__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--calc-line); }
.calc__row dt { font-size: 14.5px; color: var(--ink-2); }
.calc__row dt span { color: var(--grey); font-variant-numeric: tabular-nums; }
.calc__row dd { font-family: var(--f-display); font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__row--plan dt { font-weight: 600; color: var(--ink); }
.calc__row--plan dd { font-size: 21px; color: var(--ink); }
.calc__u { font-family: var(--f-body); font-size: 13px; font-weight: 500; color: var(--grey); }
.calc__status { margin-top: 12px; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--grey); }
.calc__status::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: #c3c3c8; }
.calc__res[data-state="invalid"] .calc__status { color: var(--red-dk); font-weight: 600; }
.calc__res[data-state="invalid"] .calc__status::before { background: var(--red); }
.calc__status--ns { color: var(--ink-2); }
/* no product published yet: the config's intro line opens the form instead of sitting under a product picker */
.calc__intro--solo { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }

.calc__price { margin-top: 14px; padding: 14px 16px; border-radius: var(--calc-r); background: var(--panel); }
.calc__pricek { font-family: var(--f-display); font-weight: 600; font-size: 16.5px; line-height: 1.35; color: var(--ink); }
.calc__priceb { margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--grey); }
.calc__pricel { margin-top: 8px; display: grid; gap: 4px; }
.calc__pricel > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.calc__pricel dd { white-space: nowrap; font-weight: 600; }
.calc__pricel .calc__pricet { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 16px; color: var(--ink); }
.calc__pricem { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--grey); }

.calc__note { margin-top: 12px; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--grey); }
.calc__note > span, .calc__status > span { text-wrap: pretty; }
.calc__note .i { width: 16px; height: 16px; margin-top: 2px; color: var(--amber); }
.calc__acts { margin-top: 16px; display: grid; gap: 8px; }
.calc__call { flex-wrap: wrap; row-gap: 0; height: auto; padding-block: 8px; }
.calc__call .btn__num { font-size: 15px; opacity: .92; }
.calc__copy .i { width: 18px; height: 18px; }
.calc__copy:disabled { opacity: .5; }
.calc__copynote { font-size: 12px; line-height: 1.45; color: var(--grey); text-align: center; }

/* ---------------------------------------------------------------- container-driven layout */
@container calc (min-width: 460px) {
  .calc__tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .calc__tile { grid-template-columns: 1fr; grid-template-rows: auto; align-content: start; row-gap: 6px; min-height: 108px; padding: 14px; }
  .calc__tileic { width: 34px; height: 34px; }
  .calc__tileh { display: block; }
  .calc__grid2 { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .calc__secfields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc__prod { grid-template-columns: 124px minmax(0, 1fr); }
}
@container calc (min-width: 780px) {
  .calc__layout { grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: clamp(24px, 3.4cqi, 56px); }
  .calc__prod { grid-template-columns: 88px minmax(0, 1fr); padding: 12px 14px; gap: 14px; }
  .calc__prodname { font-size: 18px; }
  .calc__res { padding: 18px 22px 20px; }
  .calc__netn { font-size: clamp(46px, 7cqi, 68px); }
  .calc__row { padding: 9px 0; }
}
/* diagram beside the fields once the form has room */
@container calcform (min-width: 540px) {
  .calc__dims { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 18px; }
  .calc__fig { position: sticky; top: calc(var(--hdr-h) + 20px); padding: 14px 10px; }
  .calc--dialog .calc__fig { top: 12px; }
  .calc__grid2 { grid-template-columns: 1fr; gap: 14px; }
  .calc-fig { max-height: 200px; }
  .calc__dims:has(.calc__set--composite:not([hidden])) { grid-template-columns: 1fr; }
  .calc__dims:has(.calc__set--composite:not([hidden])) .calc__fig { position: static; }
}
@container calcform (min-width: 740px) {
  .calc__grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the result card follows the reader only when the whole card fits beside the form */
@media (min-height: 800px) {
  @container calc (min-width: 780px) {
    .calc__side { position: sticky; top: calc(var(--hdr-h) + 20px); }
    .calc--dialog .calc__side { top: 8px; }
  }
}
/* five shapes in one row only when the form itself is wide enough for Thai labels on one line */
@container calcform (min-width: 700px) {
  .calc__tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .calc__tile { min-height: 118px; padding: 13px; }
  .calc__tilet { font-size: 14.5px; }
  .calc__tileh { font-size: 11.5px; }
}

/* ---------------------------------------------------------------- dialog sheet (lab pages) */
.calc-dlg { width: min(1080px, calc(100vw - 32px)); }
.calc-dlg__head .dlg__title { display: inline-flex; align-items: center; gap: 10px; }
.calc-dlg__head .dlg__title .i { width: 24px; height: 24px; color: var(--red); }
.calc-dlg__body { padding: 16px 20px 24px; }
.calc-dlg::backdrop { background: rgba(16,16,16,.5); }
@media (max-width: 640px) {
  .calc-dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 18px 18px 0 0; height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); }
  .calc-dlg__head { padding: 8px 8px 8px 16px; }
  .calc-dlg__head::before { content: ""; position: absolute; left: 50%; top: 5px; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: #d5d5d9; }
  .calc-dlg__body { padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 12px - 66px); }
  .calc-dlg[open] { animation: calc-sheet 320ms var(--ease) both; }
}
@keyframes calc-sheet { from { transform: translateY(40px); opacity: .4; } }

/* ---------------------------------------------------------------- floating shortcut (lab overview + batch detail) */
.calc-fab { position: fixed; z-index: 55; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; min-width: 52px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--red); color: #fff;
  font-family: var(--f-display); font-weight: 500; font-size: 16px; line-height: 1.2; box-shadow: 0 10px 24px -8px rgba(216,11,25,.55), 0 2px 6px rgba(16,16,16,.18);
  transition: background var(--t-fast) var(--ease), transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.calc-fab .i { width: 22px; height: 22px; }
.calc-fab:hover { background: var(--red-dk); transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(216,11,25,.6), 0 2px 6px rgba(16,16,16,.18); }
.calc-fab:active { transform: translateY(0); }
.calc-fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.calc-fab--above-nav { bottom: calc(var(--lab-nav-h, 0px) + 14px + env(safe-area-inset-bottom)); }
@media (min-width: 1100px) {
  .calc-fab { right: 28px; bottom: 28px; min-height: 56px; padding: 0 24px 0 18px; font-size: 17px; }
  .calc-fab--above-nav { bottom: calc(var(--lab-nav-h, 0px) + 28px); }
}
/* the page keeps room at the end so the floating button never sits on the last content */
main:has(.calc-fab) { padding-bottom: 76px; }
@media (prefers-reduced-motion: reduce) { .calc-fab, .calc__sec, .calc-dlg[open] { animation: none; transition: none; } }


/* ==== concrete.css ==== */
/* ==========================================================================
   concrete - hub (/concrete) and product detail (/concrete/:slug). Prefix: cc-
   R3 order: intro -> application rail -> Mix Design chips -> featured rows -> quality strip.
   ========================================================================== */

.cc { --cc-ease: cubic-bezier(.2,.7,.2,1); }
.cc-h2 { font-size: clamp(18px, .75rem + 1.25vw, 30px); font-weight: 600; line-height: var(--lh-heading); }

/* ---------------------------------------------------------------- (A) intro panel */
.cc-intro { position: relative; isolation: isolate; overflow: hidden; background: #fff; }
.cc-intro__bg { position: absolute; z-index: -1; inset: 0 0 0 auto; width: 82%; pointer-events: none;
  --cc-mask-x: linear-gradient(to left, #000 30%, rgba(0,0,0,.55) 62%, transparent 96%);
  --cc-mask-y: linear-gradient(to bottom, transparent 0%, #000 22%, #000 46%, transparent 94%);
  -webkit-mask-image: var(--cc-mask-x), var(--cc-mask-y); -webkit-mask-composite: source-in; mask-image: var(--cc-mask-x), var(--cc-mask-y); mask-composite: intersect; }
.cc-intro__bg picture { display: block; width: 100%; height: 100%; }
.cc-intro__img { width: 100%; height: 100%; object-fit: cover; opacity: .42; filter: saturate(.3) contrast(.92) brightness(1.08); }
/* a whisper of red light from the silos, kept very pale */
.cc-intro__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.5) 100%); }

/* R3 rhythm on a phone: title sits close under the header, the actions close over the rail */
.cc-intro__in { position: relative; padding-top: clamp(22px, 5vw, 88px); padding-bottom: clamp(14px, 3.4vw, 64px); }
.cc-intro__t { font-size: clamp(30px, .88rem + 5.2vw, 64px); font-weight: 700; line-height: var(--lh-display); letter-spacing: -.01em; color: var(--ink); max-width: 14em; text-wrap: balance; overflow-wrap: break-word; }
.cc-intro__l { display: block; }
.cc-intro__body { margin-top: clamp(6px, 1.2vw, 18px); max-width: 36em; font-size: clamp(15px, .86rem + .35vw, 19px); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* actions + handwritten note share one row (R3: [red][outline] then the note, to the right, clear of the title).
   The row is only as wide as its contents, so the note stays beside the buttons instead of drifting to the far
   edge; when it cannot fit it wraps under them, right-aligned. */
.cc-intro__row { display: flex; flex-wrap: wrap; align-items: center; column-gap: clamp(14px, 2.6vw, 40px); row-gap: 2px; width: max-content; max-width: 100%; margin-top: clamp(14px, 2.2vw, 32px); }
/* no authored title or copy: the panel is just an actions band over the photograph */
.cc-intro--bare .cc-intro__in { padding-top: clamp(20px, 3vw, 48px); padding-bottom: clamp(14px, 2.6vw, 44px); }
.cc-intro--bare .cc-intro__row { margin-top: 0; }
.cc-intro__acts { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 1 auto; min-width: 0; }
.cc-intro__btn { flex: 0 0 auto; min-height: 48px; padding: 0 16px; font-size: 15px; gap: 8px; }
.cc-intro__btn .i { width: 18px; height: 18px; flex: none; transition: transform var(--t-med) var(--ease); }
.cc-intro__btn:hover .i-arrow-right { transform: translateX(3px); }
.cc-intro__btn--calc { background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cc-intro__btn--calc:hover { background: var(--ink); }

/* handwritten annotation with a short red underline (R3). Two stacked lines beside the actions. */
.cc-intro__note { flex: none; max-width: 100%; margin-left: auto; padding: 4px 2px 2px; font-size: clamp(14px, .62rem + .8vw, 22px); line-height: 1.26; color: #3a3a3c; text-align: center; transform: rotate(var(--cc-note-rot, -7deg)); transform-origin: 50% 60%; }
.cc-intro__nt { display: inline-block; padding-bottom: .62em; background: no-repeat 50% 100% / 76% .48em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M3 7.2C30 3.6 70 2.2 117 3.8' fill='none' stroke='%23D80B19' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cc-intro__nl { display: block; }

@media (max-width: 767px) {
  /* compact pills side by side, as in R3; the note fits beside them from ~420px */
  .cc-intro__row { column-gap: 12px; }
  .cc-intro__acts { gap: 8px; }
  .cc-intro__btn { min-height: 46px; padding: 0 14px; font-size: 14.5px; gap: 7px; }
  .cc-intro__note { font-size: 13px; padding-inline: 0; }
}
@media (max-width: 419px) {
  /* too narrow for the note beside two thumb-sized buttons: the buttons share the row evenly and the note drops
     under them, right-aligned, run onto one line so it costs one short line instead of two */
  .cc-intro__row { width: auto; }
  .cc-intro__acts { flex: 1 1 100%; }
  .cc-intro__btn { flex: 1 1 auto; }
  .cc-intro__note { margin: 4px 2px -4px auto; font-size: 14px; --cc-note-rot: -3deg; transform-origin: 100% 50%; }
  .cc-intro__nt { background-position: 100% 100%; background-size: 58% .44em; padding-bottom: .5em; }
  .cc-intro__nl { display: inline; }
}
@media (min-width: 768px) {
  .cc-intro__bg { width: 70%; }
  .cc-intro__img { opacity: .5; }
  .cc-intro__acts { gap: 14px; }
  .cc-intro__btn { min-height: 54px; padding: 0 26px; font-size: 17px; gap: 10px; }
  .cc-intro__btn .i { width: 19px; height: 19px; }
}
@media (min-width: 1100px) {
  /* a tall hero only when there is a headline to hold it; without one the panel is just the actions */
  .cc-intro--titled { min-height: clamp(440px, 33vw, 540px); display: flex; align-items: center; }
  .cc-intro--titled .cc-intro__in { width: 100%; }
  .cc-intro__bg { width: 66%; }
  .cc-intro__img { opacity: .6; }
  .cc-intro__btn { min-height: 58px; padding: 0 30px; font-size: 18px; }
}
/* first paint: the two title lines and actions settle in once (no letter animation, no gating) */
@media (prefers-reduced-motion: no-preference) {
  .cc-intro__l, .cc-intro__body, .cc-intro__acts { animation: cc-rise 720ms var(--cc-ease) both; }
  .cc-intro__l--2 { animation-delay: 70ms; }
  .cc-intro__body { animation-delay: 140ms; }
  .cc-intro__acts { animation-delay: 200ms; }
  .cc-intro__note { animation: cc-note 620ms var(--cc-ease) 240ms both; }
  .cc-intro__img { animation: cc-bg 1400ms var(--cc-ease) both; }
}
@keyframes cc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cc-note { from { opacity: 0; transform: rotate(var(--cc-note-rot, -7deg)) translateY(6px); } to { opacity: 1; transform: rotate(var(--cc-note-rot, -7deg)); } }
@keyframes cc-bg { from { opacity: 0; transform: scale(1.04); } }

/* ---------------------------------------------------------------- (B) application rail */
.cc-rail { padding-top: clamp(4px, 1vw, 24px); }
.cc-rail__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cc-rail__t { font-size: clamp(18px, .75rem + 1.25vw, 30px); font-weight: 600; }
@media (max-width: 767px) { .cc-rail__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (min-width: 768px) { .cc-rail__head { margin-bottom: 20px; min-height: 48px; } }
.cc-rail__nav { display: flex; gap: 10px; }
.cc-rail__nav[hidden] { display: none; }
@media (max-width: 767px) { .cc-rail__nav { display: none; } }
.cc-rail__btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--ink); color: var(--ink); background: #fff; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast); }
.cc-rail__btn .i { width: 20px; height: 20px; }
.cc-rail__btn:hover:not(:disabled) { background: var(--ink); color: #fff; }
.cc-rail__btn:disabled { opacity: .28; cursor: default; }

.cc-rail__list { --cc-gap: 11px; gap: var(--cc-gap); padding-block: 7px 10px; margin-block: -3px -2px; position: relative; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .cc-rail__list { scroll-behavior: auto; } }
.cc-card { width: clamp(138px, 38.5vw, 190px); }
@media (min-width: 768px) { .cc-rail__list { --cc-gap: 16px; } .cc-card { width: calc((100% - var(--gutter) - 2 * var(--cc-gap)) / 2.6); } }
@media (min-width: 1100px) { .cc-rail__list { --cc-gap: 20px; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } .cc-card { width: calc((100% - 2 * var(--cc-gap)) / 3); } }

.cc-card__a { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; color: #fff; background: #2b2b2e;
  box-shadow: 0 1px 2px rgba(16,16,16,.08), 0 10px 22px -14px rgba(16,16,16,.45); transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
@media (min-width: 768px) { .cc-card__a { aspect-ratio: 5 / 6; border-radius: 12px; } }
@media (min-width: 1100px) { .cc-card__a { aspect-ratio: 6 / 7; border-radius: 14px; } }
.cc-card__media { position: absolute; inset: 0; z-index: -2; }
.cc-card__media picture, .cc-card__img { width: 100%; height: 100%; }
.cc-card__img { object-fit: cover; transform: scale(1.001); transition: transform 900ms var(--cc-ease); }
.cc-card__a:hover .cc-card__img { transform: scale(1.05); }
.cc-card__a:hover { box-shadow: 0 1px 2px rgba(16,16,16,.08), 0 18px 34px -18px rgba(16,16,16,.55); }
/* tone: a brand-coloured wash from the top that carries the name, and a dark foot for the utility text */
.cc-card__shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, var(--cc-tone) 0%, var(--cc-tone-2) 24%, rgba(0,0,0,0) 46%),
  linear-gradient(0deg, rgba(10,10,12,.82) 0%, rgba(10,10,12,.5) 28%, rgba(10,10,12,0) 52%); }
.cc-card__shade::after { content: ""; position: absolute; inset: 0; background: var(--cc-tint); mix-blend-mode: multiply; }
.cc-card--red { --cc-tone: rgba(204,10,22,.97); --cc-tone-2: rgba(216,11,25,.66); --cc-tint: rgba(216,11,25,.05); }
.cc-card--blue { --cc-tone: rgba(16,74,164,.96); --cc-tone-2: rgba(28,98,196,.62); --cc-tint: rgba(28,98,196,.2); }
.cc-card--grey { --cc-tone: rgba(58,62,70,.94); --cc-tone-2: rgba(80,86,96,.55); --cc-tint: rgba(120,126,136,.14); }

.cc-card__top { padding: 12px 12px 0; }
.cc-card__name { color: #fff; font-size: clamp(17px, 4.6vw, 20px); font-weight: 700; line-height: 1.16; letter-spacing: -.005em; text-shadow: 0 1px 12px rgba(0,0,0,.18); }
.cc-card__tag { margin-top: 3px; font-size: 14px; line-height: 1.4; font-weight: 500; color: rgba(255,255,255,.96); }
.cc-card__foot { padding: 0 9px 9px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic demo demo" "util util go"; align-items: end; gap: 6px 4px; }   /* 4px: a 375px card fits "ทนสภาพแวดล้อม" on one line */
.cc-card__foot .demotag { grid-area: demo; justify-self: start; align-self: center; font-size: 11.5px; padding: 1px 8px 1px 5px; gap: 4px; }
.cc-card__foot .demotag .i { width: 12px; height: 12px; }
.cc-card__ic { grid-area: ic; width: 20px; height: 20px; color: #fff; align-self: center; }
.cc-card__util { grid-area: util; font-size: 12.5px; line-height: 1.38; color: rgba(255,255,255,.96); min-width: 0; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.cc-card__go { grid-area: go; }
.cc-card__go.carrow--sm { width: 30px; height: 30px; }
.cc-card__go .i { width: 52%; height: 52%; }
.cc-card__a:hover .cc-card__go { transform: translateX(2px); }

@media (min-width: 768px) {
  .cc-card__top { padding: 20px 20px 0; }
  .cc-card__name { font-size: clamp(22px, 1rem + 1.1vw, 34px); }
  .cc-card__tag { font-size: clamp(15px, .8rem + .35vw, 18px); }
  .cc-card__foot { padding: 0 18px 18px 20px; gap: 12px; grid-template-areas: "demo demo demo" "ic util go"; }
  .cc-card__foot .demotag { font-size: 12px; padding: 3px 10px 3px 7px; gap: 5px; }
  .cc-card__foot .demotag .i { width: 14px; height: 14px; }
  .cc-card__ic { width: 26px; height: 26px; }
  .cc-card__util { font-size: clamp(14px, .78rem + .25vw, 16px); }
  .cc-card__go.carrow--sm { width: 44px; height: 44px; }
}

/* indicators = actual rail pages; hit area 44px, visible dot 8px */
.cc-rail__dots { display: flex; justify-content: center; margin-top: -6px; }
.cc-rail__dots[hidden] { display: none; }
.cc-rail__dot { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; }
.cc-rail__dot::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: #CFCFD3; transition: width var(--t-med) var(--ease), background var(--t-med) var(--ease); }
.cc-rail__dots:not([data-ready]) .cc-rail__dot::before { transition: none; }   /* first paint shows the current page, no fade-in */
.cc-rail__dot[aria-current="true"]::before { background: var(--red); width: 20px; }
.cc-rail__dot:hover::before { background: var(--grey-2); }
.cc-rail__dot[aria-current="true"]:hover::before { background: var(--red-dk); }

/* ---------------------------------------------------------------- (C) Mix Design chips + (D) catalogue rows */
.cc-mix { padding-top: clamp(8px, 2vw, 48px); padding-bottom: clamp(28px, 4vw, 72px); scroll-margin-top: calc(var(--hdr-h) + 8px); }
.cc-mix__in { display: grid; gap: clamp(18px, 2.4vw, 32px); }
.cc-mix__in > * { min-width: 0; }
.no-js .cc-filter { display: none; }
.cc-filter__t { margin-bottom: 12px; }
/* R3 shows every choice at once: the chips wrap (strength values on one line, specialty families on the next when
   they do not share one) instead of hiding the last choices behind a sideways scroll. -4px: the visible pill edge,
   not its hit area, lines up with the text column. */
.cc-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; margin-inline: -4px; }
.cc-chips__grp { display: flex; flex-wrap: wrap; gap: 0 2px; flex: none; max-width: 100%; }
.cc-chips__sep { display: none; flex: none; width: 1px; height: 26px; background: var(--line); margin-inline: 6px; }
.cc-chips__lbl { display: none; }   /* visible group captions only where the chips stack (desktop column) */
/* R3 chips are compact pills: a 4px transparent border around the visible 36px pill keeps a 44px hit area and a gap between neighbours */
.cc-chip { min-height: 44px; padding: 0 13px; font-size: 14.5px; font-variant-numeric: tabular-nums; background: var(--panel); background-clip: padding-box; border: 4px solid transparent; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.cc-chip:hover { background: var(--panel-2); border-color: transparent; }
.cc-chip:focus-visible { outline-offset: -1px; }
.cc-chip:active { transform: scale(.97); }
.cc-chip[aria-pressed="true"] { background: var(--red); border-color: transparent; color: #fff; box-shadow: 0 7px 12px -10px rgba(216,11,25,.75); }
.cc-chip[aria-pressed="true"]::after { content: ""; width: 14px; height: 14px; margin-left: 2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }

.cc-cat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cc-cat__all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-left: 8px; font-size: 15px; font-weight: 600; color: var(--red); white-space: nowrap; flex: none; }
.cc-cat__all .i { width: 17px; height: 17px; transition: transform var(--t-med) var(--ease); }
.cc-cat__all:hover { color: var(--red-dk); } .cc-cat__all:hover .i { transform: translateX(3px); }
.cc-cat__all[aria-expanded="true"] .i { transform: rotate(-90deg); }
.cc-cat__all[hidden] { display: none; }
.cc-cat__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 10px; }
.cc-cat__bar[hidden] { display: none; }
.cc-cat__status { font-size: 14px; color: var(--grey); }
.cc-cat__clear { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px 0 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.cc-cat__clear .i { width: 16px; height: 16px; }
.cc-cat__clear:hover { color: var(--red); }
.cc-cat__clear[hidden] { display: none; }

.cc-list { display: grid; gap: 8px; }
.js .cc-row.is-extra { display: none; }
.cc-row[hidden] { display: none; }
.cc-row.is-in { animation: cc-in 320ms var(--cc-ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes cc-in { from { opacity: 0; transform: translateY(8px); } }
.cc-row__a { position: relative; display: grid; grid-template-columns: minmax(106px, 29%) 1fr auto; align-items: stretch; min-height: 80px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease); }
.cc-row__a:hover { border-color: #cfcfd4; box-shadow: 0 10px 24px -18px rgba(16,16,16,.45); }
.cc-row__img { position: relative; background: var(--panel); overflow: hidden; }
.cc-row__img picture, .cc-row__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-row__img img { transition: transform 700ms var(--cc-ease); }
.cc-row__a:hover .cc-row__img img { transform: scale(1.05); }
.cc-row__txt { min-width: 0; padding: 9px 4px 9px 14px; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.cc-row__name { font-size: clamp(17px, .95rem + .45vw, 22px); font-weight: 600; line-height: 1.25; }
.cc-row__sum { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.cc-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; }
.cc-row__basis { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; line-height: 1.4; color: var(--grey); font-variant-numeric: tabular-nums; }
.cc-row__basis .i { width: 14px; height: 14px; color: var(--grey-2); flex: none; }
.cc-row__meta .demotag { font-size: 11px; padding: 1px 8px 1px 6px; }
@media (max-width: 767px) { .cc-row__meta .demotag { position: absolute; left: 6px; bottom: 6px; box-shadow: 0 1px 6px rgba(0,0,0,.2); } }
.cc-row__go { align-self: center; width: 40px; height: 40px; margin-right: 8px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-med) var(--ease); }
.cc-row__go .i { width: 20px; height: 20px; }
.cc-row__a:hover .cc-row__go { background: var(--ink); color: #fff; transform: translateX(2px); }

.cc-empty { display: grid; justify-items: start; gap: 10px; padding: 24px; border-radius: 14px; background: var(--panel); }
.cc-empty[hidden] { display: none; }
.cc-empty > .i { width: 26px; height: 26px; color: var(--grey-2); }
.cc-empty__t { font-family: var(--f-display); font-weight: 500; font-size: 18px; color: var(--ink); line-height: 1.4; text-wrap: pretty; }
.cc-empty__b { margin-top: -4px; font-size: 15px; line-height: 1.6; color: var(--grey); max-width: 36em; text-wrap: pretty; }
.cc-empty__call { margin-top: 4px; }
/* the whole range is still being prepared (nothing published): one calm panel under the section title */
.cc-mix--prep .cc-cat__t { margin-bottom: 14px; }
.cc-empty--prep { padding: clamp(22px, 3vw, 40px); }
.cc-empty--prep > .i { color: var(--red); }
@media (prefers-reduced-motion: reduce) {
  .cc-card__img, .cc-row__img img { transition: none; }
  .cc-card__a:hover .cc-card__img, .cc-row__a:hover .cc-row__img img { transform: none; }
}

@media (min-width: 768px) {
  .cc-chips__sep { display: block; }
  .cc-chip { min-height: 48px; padding: 0 17px; font-size: 16px; }
  .cc-chips, .cc-chips__grp { row-gap: 2px; }
  .cc-row__a { grid-template-columns: 180px 1fr auto; min-height: 104px; border-radius: 12px; }
  .cc-row__txt { padding: 16px 12px 16px 24px; }
  .cc-row__sum { font-size: 15.5px; }
  .cc-row__basis { font-size: 13.5px; }
  .cc-row__go { width: 48px; height: 48px; margin-right: 16px; }
}
@media (min-width: 1100px) {
  .cc-mix__in { grid-template-columns: minmax(300px, 4fr) 8fr; gap: clamp(40px, 5vw, 96px); align-items: start; }
  .cc-filter { position: sticky; top: calc(var(--hdr-h) + 32px); }
  .cc-filter__t { margin-bottom: 20px; }
  .cc-chips { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cc-chips__sep { width: calc(100% - 8px); height: 1px; margin: 0 4px; }
  .cc-chips__lbl { display: block; flex: 0 0 100%; margin: 0 4px 4px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--grey); }
  .cc-cat__head { margin-bottom: 18px; }
  .cc-list { gap: 12px; }
  .cc-row__a { grid-template-columns: 220px 1fr auto; min-height: 120px; }
  .cc-row__txt { padding: 18px 16px 18px 28px; gap: 3px; }
}

/* ---------------------------------------------------------------- (E) quality strip */
.cc-q { background: var(--panel); border-block: 1px solid var(--line); }
.cc-q + * { margin-top: 0; }
.cc-q__in { container-type: inline-size; }
.cc-q__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cc-q__cell { min-width: 0; }
.cc-q__cell + .cc-q__cell { border-left: 1px solid var(--line); }
.cc-q__a { height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 2px 16px; border-radius: 0; transition: background var(--t-fast) var(--ease); }
.cc-q__ic { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); transition: color var(--t-fast) var(--ease), transform var(--t-med) var(--ease); }
.cc-q__ic .i { width: 30px; height: 30px; }
.cc-q__cell:first-child .cc-q__ic { color: var(--red); }
.cc-q__t { font-family: var(--f-display); font-weight: 600; font-size: 13px; line-height: 1.25; color: var(--ink); text-wrap: balance; }   /* Thai breaks only between phrases (ph()) */
.cc-q__s { font-size: 12px; line-height: 1.4; color: var(--grey); text-wrap: balance; }
@media (max-width: 767px) {
  /* four captions share a phone's width: the strip runs to within 6px of the screen edge (it is a full-bleed band,
     and the first/last cells carry no outer border), which buys each Thai caption ~8px */
  .cc-q__in { padding-inline: max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-right)); }
  .cc-q__a { padding-inline: 5px; }
}
a.cc-q__a:hover { background: #fff; }
a.cc-q__a:hover .cc-q__ic { color: var(--red); transform: translateY(-2px); }
a.cc-q__a:hover .cc-q__t { color: var(--red-dk); }
/* 2 x 2 when four cells would squeeze a Thai word (320px phones, enlarged text). Each cell keeps the stacked
   icon-over-caption form, so a caption gets the whole cell width ("ห้องปฏิบัติการ" never splits). */
@container (max-width: 20.5em) {
  .cc-q__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-q__cell:nth-child(3) { border-left: 0; }
  .cc-q__cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .cc-q__a { padding: 14px 10px 16px; }
  .cc-q__t { overflow-wrap: normal; }
}
@media (min-width: 768px) {
  .cc-q__a { padding: 28px 16px; gap: 6px; }
  .cc-q__ic { width: 52px; height: 52px; }
  .cc-q__ic .i { width: 38px; height: 38px; }
  .cc-q__t { font-size: clamp(16px, .8rem + .5vw, 20px); }
  .cc-q__s { font-size: 14px; }
}
@media (min-width: 1100px) { .cc-q__a { padding: 40px 24px; } }
.page-concrete .ftr { margin-top: 0; }

/* ==========================================================================
   product detail (/concrete/:slug)
   ========================================================================== */
.cc-pd { padding-bottom: clamp(24px, 4vw, 64px); }
/* breadcrumb links get a 44px-tall hit area; the row is pulled up by the difference so the text sits where it did */
.cc-pd__crumbs { padding-top: 4px; margin-bottom: -10px; align-items: center; row-gap: 0; }
.cc-pd__crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.cc-pd__crumbs li[aria-current] { padding-block: 11px; }
/* On a phone the trail stops at the parent: the current page is the <h1> right below, and a long name would wrap
   the trail onto a second 44px row that starts with a slash. Screen readers still get the full trail. */
@media (max-width: 559px) {
  .cc-pd__crumbs li[aria-current] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.cc-pd__hero { display: grid; gap: clamp(20px, 3vw, 56px); padding-top: clamp(14px, 2vw, 28px); }
.cc-pd__gal { min-width: 0; display: grid; gap: 8px; }
.cc-pd__main { position: relative; border-radius: 14px; overflow: hidden; background: var(--panel); aspect-ratio: 4 / 3.3; }
.cc-pd__main .vw-thumb { position: absolute; inset: 0; border-radius: 0; }
.cc-pd__main .vw-thumb picture, .cc-pd__main .vw-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cc-pd__zoom { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 99px; background: rgba(16,16,16,.62); color: #fff; font-size: 13px; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cc-pd__zoom .i { width: 16px; height: 16px; }
.cc-pd__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 84px)); gap: 8px; }   /* a phone gets an index strip, not a second hero */
.cc-pd__thumbs .vw-thumb { aspect-ratio: 1; border-radius: 10px; }
.cc-pd__tone { position: absolute; inset: 0 0 auto; height: 38%; background: linear-gradient(180deg, var(--cc-tone, transparent), transparent); opacity: .5; pointer-events: none; mix-blend-mode: multiply; }

.cc-pd__info { min-width: 0; }
.cc-pd__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--red-dk); letter-spacing: .02em; }
.cc-pd__eyebrow .i { width: 18px; height: 18px; }
.cc-pd__name { margin-top: 6px; font-size: clamp(32px, 1rem + 4vw, 60px); font-weight: 700; line-height: var(--lh-display); letter-spacing: -.01em; }
.cc-pd__tag { margin-top: 6px; font-family: var(--f-display); font-weight: 500; font-size: clamp(18px, .9rem + .7vw, 24px); color: var(--ink-2); line-height: 1.35; }
.cc-pd__demo { margin-top: 12px; }
.cc-pd__sum { margin-top: 14px; font-size: var(--fs-lead); line-height: 1.65; color: var(--ink-2); max-width: 36em; }

.cc-pd__spec { margin-top: 20px; display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: center; padding: 18px 20px; border-radius: 16px; background: var(--panel); }
.cc-pd__big { grid-row: span 2; display: flex; align-items: baseline; gap: 6px; font-family: var(--f-display); font-weight: 700; font-size: clamp(44px, 2rem + 2.4vw, 68px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.cc-pd__big small { font-size: .32em; font-weight: 600; color: var(--grey); letter-spacing: .02em; }
.cc-pd__speck { font-size: 13.5px; color: var(--grey); line-height: 1.4; }
.cc-pd__specv { font-size: 16.5px; font-weight: 600; line-height: 1.4; }
.cc-pd__specnote { grid-column: 1 / -1; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--grey); line-height: 1.5; }
.cc-pd__acts { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.cc-pd__acts .btn { flex: 1 1 220px; }
/* the call button carries the number: on a 320px phone the number drops under the label instead of overflowing */
@media (max-width: 359px) {
  .cc-pd__acts .btn { min-width: 0; flex-wrap: wrap; row-gap: 0; column-gap: 10px; height: auto; padding: 8px 18px; white-space: normal; }
  .cc-pd__acts .btn__num { white-space: nowrap; }
}

.cc-pd__sec { padding-top: clamp(36px, 5vw, 80px); }
.cc-pd__sech { font-size: clamp(22px, 1rem + 1.2vw, 34px); font-weight: 600; margin-bottom: clamp(12px, 1.6vw, 22px); }
.cc-pd__cols { display: grid; gap: clamp(28px, 4vw, 64px); }
.cc-pd__apps { display: grid; gap: 8px; }
.cc-pd__app { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); }
.cc-pd__app > .i { width: 22px; height: 22px; color: var(--red); margin-top: 2px; }
.cc-pd__appx { min-width: 0; display: grid; justify-items: start; gap: 6px; }
.cc-pd__appt { font-size: 16px; line-height: 1.5; }
.cc-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.cc-status--unverified { background: var(--amber-wash); color: var(--amber); }
.cc-status--client-supplied { background: var(--panel); color: #444447; }
.cc-status--approved { background: var(--green-wash); color: var(--green); }
.cc-pd__specs { border-top: 1px solid var(--line); }
.cc-pd__srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cc-pd__srow dt { font-size: 15px; color: var(--grey); }
.cc-pd__srow dd { font-size: 16px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cc-pd__srow .cc-status { justify-self: start; grid-column: 1 / -1; }
.cc-pd__none { display: grid; gap: 6px; padding: 20px; border-radius: 14px; background: var(--panel); color: var(--grey); font-size: 15px; line-height: 1.6; }
.cc-pd__none > * { text-wrap: pretty; }
.cc-pd__none b { font-family: var(--f-display); font-weight: 500; font-size: 17px; color: var(--ink); }

.cc-pd__labs { display: grid; gap: 10px; }
.cc-pd__lab { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 14px 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; transition: border-color var(--t-fast), box-shadow var(--t-med) var(--ease); }
.cc-pd__lab:hover { border-color: #cfcfd4; box-shadow: 0 10px 24px -18px rgba(16,16,16,.45); }
.cc-pd__labic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--red-wash); color: var(--red); }
.cc-pd__labic .i { width: 24px; height: 24px; }
.cc-pd__labt { font-family: var(--f-display); font-weight: 600; font-size: 18px; line-height: 1.3; }
.cc-pd__labm { font-size: 13.5px; color: var(--grey); line-height: 1.45; }
.cc-pd__labr { display: grid; justify-items: end; gap: 6px; }
.cc-pd__labr > .i { width: 20px; height: 20px; color: var(--ink); }
.cc-pd__body { max-width: 68ch; }

.cc-pd__calc { scroll-margin-top: calc(var(--hdr-h) + 8px); }
.cc-pd__calch { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cc-pd__calch small { font-family: var(--f-body); font-size: 15px; font-weight: 500; color: var(--grey); }

.cc-pd__back { margin-top: clamp(28px, 4vw, 56px); }
/* the back link closes the page: the footer follows at the section rhythm, not after an extra empty band */
.page-product .ftr { margin-top: clamp(24px, 4vw, 56px); }

@media (min-width: 768px) {
  .cc-pd__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-pd__labs { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
  .cc-pd__thumbs { grid-template-columns: repeat(auto-fill, minmax(110px, 140px)); gap: 10px; }
}
@media (min-width: 600px) and (max-width: 899px) { .cc-pd__main { aspect-ratio: 16 / 10; } }
@media (min-width: 900px) {
  .cc-pd__hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .cc-pd__main { aspect-ratio: 4 / 3; }
}
@media (min-width: 1100px) and (min-height: 760px) {
  .cc-pd__info { position: sticky; top: calc(var(--hdr-h) + 28px); padding-top: 8px; }
}

/* ==========================================================================
   calculator page (/concrete/calculator)
   ========================================================================== */
.cc-calc__head { padding-top: clamp(14px, 2vw, 28px); padding-bottom: clamp(18px, 2.6vw, 40px); display: grid; gap: 12px; }
.cc-calc__t { font-size: clamp(30px, .88rem + 4.2vw, 60px); font-weight: 700; line-height: var(--lh-display); letter-spacing: -.01em; max-width: 16em; }
.cc-calc__t em { font-style: normal; color: var(--red); }
.cc-calc__lead { max-width: 42em; font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.cc-calc__notes { display: grid; gap: 12px; padding-top: clamp(28px, 4vw, 64px); }
.cc-calc__note { padding: 22px 22px 24px; border-radius: 16px; background: var(--panel); display: grid; gap: 8px; align-content: start; }
.cc-calc__noten { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--red); font-family: var(--f-display); font-weight: 700; font-size: 16px; }
.cc-calc__notet { font-size: clamp(18px, .95rem + .5vw, 22px); font-weight: 600; }
.cc-calc__noteb { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
@media (min-width: 768px) { .cc-calc__notes { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } }
.cc-pd__labtx { min-width: 0; display: grid; gap: 1px; justify-items: start; }
.cc-pd__labtx .demotag { margin-top: 4px; font-size: 11px; }
.cc-pd__main--empty { display: grid; place-items: center; color: var(--grey-2); }
.cc-pd__main--empty .i { width: 48px; height: 48px; }
.cc-pd__src { grid-column: 1 / -1; font-size: 12.5px; color: var(--grey); }
.cc-pd__srow dd small { font-size: 13px; color: var(--grey); font-weight: 500; }
.cc-pd__spec--none { margin-top: 20px; }


/* ==== home.css ==== */
/* ==========================================================================
   HOME (hm-) - hero slideshow + four gateways. Spec p16 (R1), p17 (R2), p18.
   Mobile first: < 768 is the R2 composition, 768-1099 tablet, >= 1100 the R1 split.
   ========================================================================== */

/* ---------------------------------------------------------------- hero frame */
.hm-hero {
  position: relative; max-width: 1920px; margin-inline: auto; background: #fff;
  container: hm-hero / inline-size;
}
.hm-car { position: relative; }
.hm-car, .hm-jump {
  /* the text column aligns with the header's content edge at every width, and clears a landscape
     phone's notch / rounded corner (viewport-fit=cover) on either side */
  --hm-inline: max(calc(var(--gutter) + env(safe-area-inset-left, 0px)), calc(50cqw - var(--maxw) / 2 + var(--gutter)));
  --hm-inline-r: max(calc(var(--gutter) + env(safe-area-inset-right, 0px)), calc(50cqw - var(--maxw) / 2 + var(--gutter)));
}

.hm-slides {
  display: grid; min-height: var(--hm-h, 340px);
  touch-action: pan-y;               /* horizontal swipe is ours, vertical scroll stays native */
  --hm-h: 344px;
}
.hm-slides:focus { outline: none; }

/* every slide shares one grid cell: the hero is as tall as its tallest slide */
.hm-slide {
  grid-area: 1 / 1; position: relative; z-index: 0; min-width: 0;
  display: grid; align-content: center; background: #fff;
  padding: var(--hm-pt, 28px) var(--hm-inline-r) var(--hm-pb, 76px) var(--hm-inline);
  opacity: 0; visibility: hidden;
  transition: opacity 0s linear 800ms, visibility 0s linear 800ms;
}
/* the incoming slide fades in on top while the outgoing one stays opaque underneath: no dip to white */
.hm-slide.is-active { z-index: 2; opacity: 1; visibility: visible; transition: opacity 780ms var(--ease), visibility 0s; }
.hm-slide.is-leaving { z-index: 1; opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------- media + graded white veil */
.hm-slide__media {
  position: absolute; z-index: 0; inset: 0 0 0 var(--hm-media-x, 30%); overflow: hidden;
  background-color: var(--panel);
}
.hm-slide__media picture { position: absolute; inset: 0; }
.hm-slide__img, .hm-slide__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--fx-m, 50%) var(--fy-m, 50%);
  color: transparent;                /* never flash alt text while a deferred image arrives */
}
.hm-slide__img { transform: scale(1.045); transform-origin: 100% var(--fy-m, 50%); transition: transform 2400ms cubic-bezier(.16,.72,.2,1); }
.hm-slide.is-active .hm-slide__img { transform: none; }
/* later slides' stills arrive after first paint: fade them in rather than pop */
.hm-slide__img[data-hm-defer] { opacity: 0; transition: opacity 600ms var(--ease), transform 2400ms cubic-bezier(.16,.72,.2,1); }
.hm-slide__img[data-hm-defer].is-loaded { opacity: 1; }
/* the poster underneath stays until playback starts; the video sits exactly on it (no overscan: the
   reel's frames are clean to the edge, so poster -> first frame is a pure cross-fade, no zoom jump) */
.hm-slide__video { opacity: 0; transition: opacity 700ms var(--ease); }
.hm-slide__video.is-playing { opacity: 1; }

.hm-slide__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--hm-veil, none);
}
/* mobile (R2): white under the copy column (its right edge is ~40% into the photo box, where dark
   copy still needs >= 4.5:1 over a dark photo), then the subject left vivid at right/bottom */
.hm-slide[data-overlay="white-left"] .hm-slide__media {
  --hm-veil:
    linear-gradient(90deg, #fff 0%, rgba(255,255,255,.97) 10%, rgba(255,255,255,.9) 20%, rgba(255,255,255,.78) 30%, rgba(255,255,255,.6) 38%, rgba(255,255,255,.34) 48%, rgba(255,255,255,.12) 58%, rgba(255,255,255,0) 66%),
    radial-gradient(75% 36% at 0% 0%, rgba(255,255,255,.45), rgba(255,255,255,0));   /* top-left only: the note's corner stays untouched */
}
.hm-slide[data-overlay="white-soft"] .hm-slide__media {
  --hm-veil:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.8) 18%, rgba(255,255,255,.5) 40%, rgba(255,255,255,.2) 66%, rgba(255,255,255,.08) 100%);
}
.hm-slide[data-overlay="none"] { --hm-media-x: 52%; }

/* ---------------------------------------------------------------- copy */
.hm-slide__copy { position: relative; z-index: 1; width: var(--hm-copy-w, 60%); min-width: 0; }
.hm-slide__copy > * {
  transition: opacity 600ms var(--ease), transform 820ms cubic-bezier(.16,.72,.2,1);
}
/* outgoing copy clears first (180ms), incoming copy rises in a short stagger after it */
.hm-slide:not(.is-active) .hm-slide__copy > * { opacity: 0; transform: translateY(16px); transition-duration: 180ms; transition-delay: 0s !important; }
.hm-slide.is-active .hm-slide__copy > * { transition-delay: 140ms; }
.hm-slide.is-active .hm-slide__copy > :nth-child(2) { transition-delay: 210ms; }
.hm-slide.is-active .hm-slide__copy > :nth-child(3) { transition-delay: 280ms; }
.hm-slide.is-active .hm-slide__copy > :nth-child(4) { transition-delay: 350ms; }

.hm-slide__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.hm-slide__eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--f-body); font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--ink-2); }
.hm-slide__eyebrow::after { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .55; }
.hm-latin.hm-slide__eyebrow { letter-spacing: .26em; text-transform: uppercase; font-size: 11px; }

.hm-slide__title {
  font-family: var(--f-display); font-weight: 700; color: var(--ink);
  font-size: var(--hm-title, clamp(27px, 7.4cqw, 34px)); line-height: 1.16; letter-spacing: 0;
  text-wrap: balance;
}
.hm-line { display: block; }
/* a Thai phrase that fits its narrowest column (320px) is never split (see thaiWrap in home.ts) */
.hm-nw { white-space: nowrap; }
@media (max-width: 319px) { .hm-nw { white-space: normal; } }   /* below the supported reflow width: wrap rather than overflow */
/* one block per editor line. A hero line that has to wrap splits evenly; a card line wraps greedily
   without a one-word widow */
.hm-bl { display: block; text-wrap: pretty; }
.hm-slide__body .hm-bl, .hm-slide__body.hm-flow-sm { text-wrap: balance; }
.hm-slide__body {
  margin-top: 8px; max-width: 34em;
  font-size: var(--hm-body, 14px); line-height: 1.6; color: var(--ink-2);
}
.hm-slide__cta { margin-top: 16px; min-height: 44px; padding: 0 18px 0 20px; gap: 8px; font-size: 15px; box-shadow: 0 8px 20px -10px rgba(216,11,25,.7); }
.hm-slide__cta .i { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
.hm-slide__cta:hover .i { transform: translateX(3px); }

/* ---------------------------------------------------------------- annotation: R2 tracked tagline on phones, R1 handwriting on desktop
   Placement is per slide (annotationPlacement) so the note never lands on a face. On phones the
   photo sits under the copy: top-right is R2's narrow top-right column (30%: clear of the brand
   slide's silos), top-left-of-media a flat strip along the top edge (see the phone block). */
.hm-note {
  position: absolute; z-index: 1; top: 18px; right: var(--hm-inline-r);
  max-width: 30%; padding-bottom: 9px;
  font-family: var(--f-body); font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--ink);
  transition: opacity 600ms var(--ease) 200ms;
}
.hm-note.hm-latin { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.hm-note::after { content: ""; position: absolute; left: 0; bottom: 0; width: 22px; height: 2px; border-radius: 2px; background: var(--red); }
.hm-slide:not(.is-active) .hm-note { opacity: 0; transition-duration: 180ms; transition-delay: 0s; }
/* a soft local glow (no box) keeps the lettering legible wherever it lands on the photograph */
.hm-note::before {
  content: ""; position: absolute; inset: -40% -24% -36% -28%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,.62) 55%, rgba(255,255,255,0));
}
/* bottom-right: level with the top of the controls, clear of them */
.hm-note--br { top: auto; bottom: calc(var(--hm-dock-b, 10px) + var(--hm-dock-h, 40px) + 14px); }

/* ---------------------------------------------------------------- controls dock (progress + prev/next + pause) */
/* phones (R2): a small capsule of progress segments + pause at the bottom centre, like R2's dots.
   The capsule is drawn 40px tall; every control in it is a 44 x 44 target that overhangs it by 2px. */
.hm-car { --hm-dock-h: 40px; --hm-hit: 44px; --hm-dock-b: 10px; }
.hm-dock {
  position: absolute; z-index: 4; left: 50%; bottom: var(--hm-dock-b); transform: translateX(-50%);
  display: flex; align-items: center; gap: 0; padding: 0 2px 0 4px; height: var(--hm-dock-h);
  border-radius: var(--r-pill); background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: 0 1px 2px rgba(16,16,16,.06), 0 8px 22px -14px rgba(16,16,16,.42);
}
.hm-car:not(.is-live) .hm-dock { visibility: hidden; }
.no-js .hm-dock { display: none; }
.hm-dock__count { display: none; }
.hm-dock__btn {
  position: relative; isolation: isolate; flex: none;
  width: var(--hm-hit); height: var(--hm-hit); margin-block: calc((var(--hm-dock-h) - var(--hm-hit)) / 2);
  display: grid; place-items: center; border-radius: 50%; color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
/* the hover disc is capsule-sized, inside the larger target */
.hm-dock__btn::before {
  content: ""; position: absolute; z-index: -1; inset: calc((var(--hm-hit) - var(--hm-dock-h)) / 2); border-radius: 50%;
  transition: background var(--t-fast) var(--ease);
}
.hm-dock__btn:hover::before { background: var(--panel-2); }
.hm-dock__btn:focus-visible { outline-offset: -4px; border-radius: 50%; }
.hm-seg:focus-visible { outline-offset: -6px; border-radius: 12px; }
.hm-dock__btn .i { width: 20px; height: 20px; }
.hm-dock__toggle .i { width: 15px; height: 15px; }
.hm-car.is-rotating .hm-i-play, .hm-car:not(.is-rotating) .hm-i-pause { display: none; }
.hm-dock [data-hm-prev], .hm-dock [data-hm-next] { display: none; }
.hm-dock__segs { display: flex; align-items: center; padding-left: 2px; }
/* every segment is a 44 x 44 target; the visible bar is the slim part inside it */
.hm-seg {
  position: relative; flex: none; width: 44px; height: var(--hm-hit); margin-block: calc((var(--hm-dock-h) - var(--hm-hit)) / 2);
  display: grid; align-items: center; padding: 0 14px; transition: width 420ms var(--ease);
}
.hm-seg[aria-current="true"] { width: 58px; }
/* inactive track >= 3:1 on the dock (WCAG 1.4.11); the active one is wider and red */
.hm-seg__bar { display: block; height: 4px; border-radius: 4px; background: rgba(16,16,16,.44); overflow: hidden; transition: background var(--t-fast); }
.hm-seg:hover .hm-seg__bar { background: rgba(16,16,16,.66); }
.hm-seg__fill { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; }
.hm-seg[aria-current="true"] .hm-seg__bar { background: rgba(216,11,25,.26); }
/* paused (or reduced motion, which starts paused): no progress to show, so the current slide's bar is
   solid red - a clear "you are here", not a faint pink track */
.hm-car:not(.is-rotating) .hm-seg[aria-current="true"] .hm-seg__bar { background: var(--red); }
.hm-dock--single { padding: 0; }

/* ---------------------------------------------------------------- jump to the gateways (page level, R1 lower-left) */
.hm-jump { display: none; }

/* ---------------------------------------------------------------- gateways: R2 cards on phones
   R2's card is nearly square (181 x 191 at 390): a white text band, then the photo, which rises
   up behind the last line of copy through a white fade rather than starting at a hard edge. */
.hm-gw {
  max-width: 1920px; margin-inline: auto; --hm-card-r: 8px;
  padding: 12px max(12px, env(safe-area-inset-right, 0px)) 28px max(12px, env(safe-area-inset-left, 0px));
}
.hm-gw:focus-visible { outline-offset: -2px; border-radius: 4px; }
.hm-gw__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hm-gw__item { display: flex; min-width: 0; }

.hm-tile {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--hm-card-r);
  box-shadow: 0 1px 2px rgba(16,16,16,.04), 0 8px 18px -16px rgba(16,16,16,.28);
  transition: box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.hm-tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: var(--hm-card-r); }
.hm-tile__text { position: relative; z-index: 1; display: grid; align-content: start; gap: 1px; padding: 11px 12px 4px; }
.hm-tile__num { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hm-tile__num::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .45; }
.hm-tile__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(21px, 1rem + 1.8vw, 25px); line-height: 1.18; color: var(--ink); text-wrap: balance; }
.hm-tbr { display: none; }            /* the editor's title break only where the title cannot fit (see tileTitle) */
.hm-tile__body { margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--grey); }
.hm-tile__media {
  position: relative; flex: 1 0 auto; height: clamp(92px, 27vw, 128px); margin: -22px -1px -1px;
  overflow: hidden; border-radius: 0 0 var(--hm-card-r) var(--hm-card-r); background-color: var(--panel);
}
.hm-tile__media picture { position: absolute; inset: 0; }
.hm-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); transition: transform 900ms cubic-bezier(.16,.72,.2,1); }
/* the top ~22px sit behind the last line of copy and stay near-white (grey copy keeps >= 4.5:1);
   eased below that so a dark photo top never leaves a muddy grey band */
.hm-tile__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.96) 10%, rgba(255,255,255,.86) 18%, rgba(255,255,255,.62) 26%, rgba(255,255,255,.34) 34%, rgba(255,255,255,.13) 41%, rgba(255,255,255,0) 48%); }
.hm-tile__tag { display: none; }
.hm-tile__more { position: absolute; right: 8px; bottom: 8px; z-index: 1; }
.hm-tile__more-t { display: none; }
.hm-tile__arrow {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(16,16,16,.2);
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.hm-tile__arrow .i { width: 17px; height: 17px; }
@media (hover: hover) {
  .hm-tile:hover { border-color: #d6d6da; box-shadow: 0 1px 2px rgba(16,16,16,.05), 0 16px 30px -18px rgba(16,16,16,.4); }
  .hm-tile:hover .hm-tile__img { transform: scale(1.05); }
  .hm-tile:hover .hm-tile__arrow { background: var(--red); color: #fff; }
}
.hm-tile:active .hm-tile__arrow { transform: scale(.94); }

/* narrow reflow / large text: one column (the approved phone layout stays 2 x 2) */
@media (max-width: 339px), (max-width: 21.2em) {
  .hm-gw__grid { grid-template-columns: 1fr; }
  .hm-tile__media { height: 150px; }
}

/* ==========================================================================
   phones: R2 hero tuning
   ========================================================================== */
@media (max-width: 767px) {
  .hm-slides { --hm-h: 320px; }
  /* bottom padding = the controls capsule + 12px, so a CTA never sits under it */
  .hm-slide { --hm-copy-w: 58%; --hm-media-x: 30%; --hm-pt: 22px; --hm-pb: calc(var(--hm-dock-b) + var(--hm-dock-h) + 12px); }
  /* top-left-of-media: the photo's left edge is under the copy here, and the subject's head fills the
     top of the photo box - so the note becomes a flat strip hugging the top edge, two lines where they
     fit, never wider than the gap beside the copy column (0.42 x (width - gutters) - 4px). On hs_hat
     this keeps it above the hat crown (~68px down at 360-430) and well clear of the face. */
  .hm-note--tl { top: 8px; max-width: calc(42% - 17px); }
  /* English words are long for a 58% column: a slightly smaller, tighter Latin headline, and the
     editor's desktop lines run together and balance (never "Building / a future / stronger / ...") */
  .hm-slide__title--latin { font-size: clamp(24px, 6.6cqw, 30px); line-height: 1.1; }
  .hm-slide__title--latin .hm-line { display: inline; }
  .hm-tile__media { order: 2; }
  /* the two cards of a row share one text band (subgrid), so their photos start on the same line
     as well as ending on it, whatever the copy length */
  @supports (grid-template-rows: subgrid) {
    .hm-gw__item { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
    .hm-tile { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
    .hm-tile__text { grid-row: 1; }
    .hm-tile__media { grid-row: 2; }
  }
  /* lines that set tighter run together on phones (see bodyCopy); still no one-word widow */
  .hm-flow-sm .hm-bl { display: inline; }
  .hm-tile__body.hm-flow-sm { text-wrap: pretty; }
}
@media (min-width: 420px) and (max-width: 767px) {
  .hm-slide { --hm-copy-w: 56%; }
}
/* below 360px the strip cannot stay flat (a third line would reach the subject): leave the photo clear */
@media (max-width: 359px) {
  .hm-note--tl { display: none; }
}

/* ==========================================================================
   tablet + desktop: R1 split hero, edge-to-edge image mosaic
   ========================================================================== */
@media (min-width: 768px) {
  /* the jump row (lower left) and the controls (lower right) share one baseline band */
  .hm-hero { --hm-jump-fs: clamp(16px, 1.45cqw, 20px); --hm-jump-lh: calc(var(--hm-jump-fs) * 1.45); --hm-jump-b: clamp(20px, 2cqw, 36px); }
  .hm-slides { --hm-h: clamp(420px, 49cqw, 520px); }
  .hm-slide {
    --hm-pt: clamp(40px, 4.4cqw, 84px); --hm-pb: clamp(140px, 12cqw, 190px);
    --hm-copy-w: calc(52cqw - var(--hm-inline)); --hm-media-x: 40%;
    --hm-title: clamp(40px, 6.2cqw, 58px); --hm-body: clamp(17px, 1.9cqw, 20px);
    /* left edge of the photo box (it hugs the right edge and may be capped by --hm-mw) */
    --hm-media-l: calc(100% - min(100% - var(--hm-media-x), var(--hm-mw, 100%)));
  }
  /* the photo box hugs the right edge; a small source keeps its own scale (--hm-mw, set per slide) */
  .hm-slide__media { left: auto; width: calc(100% - var(--hm-media-x, 40%)); max-width: var(--hm-mw, none); }
  .hm-slide__img, .hm-slide__video { object-position: var(--fx-d, 50%) var(--fy-d, 50%); }
  .hm-slide__img { transform-origin: 100% var(--fy-d, 50%); }
  /* the editor's lines stay lines: the headline shrinks to fit its longest line (--hm-em, set per slide) */
  .hm-slide__title { font-weight: 800; line-height: 1.14; font-size: max(36px, min(var(--hm-title), calc(var(--hm-copy-w) / var(--hm-em, 7)))); }
  .hm-slide__body { margin-top: clamp(12px, 1.3cqw, 20px); color: var(--ink-2); line-height: 1.55; }
  .hm-slide__meta { margin-bottom: 16px; }
  .hm-slide__eyebrow { font-size: 13px; }
  .hm-latin.hm-slide__eyebrow { font-size: 12px; }
  .hm-slide__cta { margin-top: 24px; min-height: 50px; padding: 0 22px 0 26px; font-size: 16px; }

  /* eased white grade: clean white under the text, dissolving into the photograph */
  .hm-slide[data-overlay="white-left"] .hm-slide__media {
    --hm-veil: linear-gradient(90deg,
      #fff 0%, rgba(255,255,255,.98) 4%, rgba(255,255,255,.93) 8%, rgba(255,255,255,.84) 12%,
      rgba(255,255,255,.7) 16%, rgba(255,255,255,.53) 20%, rgba(255,255,255,.36) 24%,
      rgba(255,255,255,.21) 28%, rgba(255,255,255,.1) 32%, rgba(255,255,255,.03) 36%, rgba(255,255,255,0) 40%);
  }
  .hm-slide[data-overlay="none"] { --hm-media-x: 54%; }

  /* R1 handwriting, upper right: a small stacked note, secondary to the headline */
  .hm-note, .hm-note.hm-latin {
    top: clamp(28px, 3.4cqw, 56px); right: calc(clamp(28px, 4cqw, 80px) + env(safe-area-inset-right, 0px)); max-width: min(30%, 10.5em);   /* like R1: hung off the photo edge, not the text grid */
    padding-bottom: 14px; font-family: var(--f-hand); font-weight: 400; font-size: clamp(17px, 1.7cqw, 26px); line-height: 1.24;
    letter-spacing: 0; text-wrap: balance; transform: rotate(-10deg); transform-origin: 100% 0;
  }
  .hm-note.hm-latin { letter-spacing: .03em; }   /* tracking for English only: never on Thai */
  .hm-note::after { left: 12%; width: clamp(36px, 3.6cqw, 58px); height: 3px; transform: rotate(-3deg); }
  /* top-left-of-media: just inside the photo's left edge, above the subject (the white grade keeps it legible) */
  .hm-note.hm-note--tl { right: auto; left: calc(max(var(--hm-media-l), var(--hm-inline) + var(--hm-copy-w)) + clamp(18px, 2.4cqw, 48px)); max-width: min(26%, 9.5em); transform-origin: 0 0; }
  /* tablet: the photo box is only 60% wide and the copy column reaches 12% into it, so "after the copy
     column" lands on a centred subject (hs_hat's crown). The note hangs 18% into the photo instead, in a
     smaller hand - in the top band only (eyebrow + first headline line), and never closer than 24px to
     the end of that first line (--hm-em1, set per slide; same size formula as .hm-slide__title) */
  @media (max-width: 1099px) {
    .hm-note.hm-note--tl {
      left: max(calc(var(--hm-media-l) + (100% - var(--hm-media-l)) * .18),
                calc(var(--hm-inline) + min(var(--hm-copy-w), var(--hm-em1, 0) * max(36px, min(var(--hm-title), calc(var(--hm-copy-w) / var(--hm-em, 7))))) + 24px));
      top: 28px; font-size: 15px;
    }
  }
  /* bottom-right: stacked above the controls dock */
  .hm-note.hm-note--br { top: auto; bottom: calc(var(--hm-dock-b) + var(--hm-dock-h) + clamp(44px, 4.4cqw, 80px)); transform-origin: 100% 100%; }
  /* lower on the photo usually means busier: a wider, denser glow behind ink lettering */
  .hm-note--br::before { inset: -52% -30% -48% -34%; background: radial-gradient(closest-side, rgba(255,255,255,.94), rgba(255,255,255,.8) 50%, rgba(255,255,255,.4) 78%, rgba(255,255,255,0)); }
  /* over a dark sky the handwriting turns white: a text shadow and the lightest local shade, never a
     patch. Not for top-left-of-media, which always sits on the white dissolve: ink there. */
  .hm-slide[data-tone="dark"] .hm-note:not(.hm-note--tl) { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 0 12px rgba(8,12,20,.35); }
  .hm-slide[data-tone="dark"] .hm-note:not(.hm-note--tl)::before { background: radial-gradient(closest-side, rgba(8,12,20,.28), rgba(8,12,20,.14) 60%, rgba(8,12,20,0)); }

  /* the controls sit on the lower safe edge, level with the jump row (centre on centre) */
  .hm-car { --hm-dock-h: 44px; --hm-hit: 44px; --hm-dock-b: calc(var(--hm-jump-b) + (var(--hm-jump-lh) * 2 - 44px) / 2); }
  .hm-dock { left: auto; right: var(--hm-inline-r); transform: none; padding: 0 4px 0 0; }
  .hm-dock__count { display: none; align-items: baseline; gap: 5px; padding: 0 8px 0 18px; font-size: 13px; color: var(--grey); font-variant-numeric: tabular-nums; }
  .hm-dock__count b { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--ink); }
  .hm-dock [data-hm-prev], .hm-dock [data-hm-next] { display: grid; }
  .hm-dock__segs { padding: 0 2px; }
  .hm-seg { width: 44px; padding: 0 10px; }
  .hm-seg[aria-current="true"] { width: 64px; }

  .hm-jump {
    position: absolute; z-index: 3; left: var(--hm-inline); bottom: var(--hm-jump-b);
    display: flex; align-items: center; gap: clamp(16px, 1.8cqw, 26px); padding-top: 22px;
    color: var(--ink); border-radius: 6px;
  }
  .hm-jump::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 2px; border-radius: 2px; background: var(--ink); transition: width var(--t-med) var(--ease); }
  .hm-jump__text { display: grid; font-size: var(--hm-jump-fs); line-height: 1.45; color: var(--ink-2); }
  .hm-jump__rest strong { font-family: var(--f-display); font-weight: 700; color: var(--ink); white-space: nowrap; }
  .hm-jump__arrow {
    flex: none; width: clamp(42px, 3.6cqw, 54px); height: clamp(42px, 3.6cqw, 54px); display: grid; place-items: center;
    border-radius: 50%; border: 1.5px solid var(--ink); color: var(--ink);
    transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
  }
  /* R1's circular right arrow; on intent it turns to point where it goes (down to the gateways) -
     so it never reads as a next-slide control */
  .hm-jump__arrow .i { width: 42%; height: 42%; transition: transform var(--t-med) var(--ease); }
  .hm-jump:hover .hm-jump__arrow, .hm-jump:focus-visible .hm-jump__arrow { background: var(--ink); color: #fff; }
  .hm-jump:hover .hm-jump__arrow .i, .hm-jump:focus-visible .hm-jump__arrow .i { transform: rotate(90deg); }
  .hm-jump:hover::before, .hm-jump:focus-visible::before { width: 44px; background: var(--red); }

  /* ---- gateways: full-bleed 2 x 2 photo mosaic (R1) */
  .hm-gw {
    padding: clamp(6px, .7vw, 12px) max(clamp(8px, 1vw, 16px), env(safe-area-inset-right, 0px))
             clamp(8px, 1vw, 16px) max(clamp(8px, 1vw, 16px), env(safe-area-inset-left, 0px));
  }
  .hm-gw__grid { gap: clamp(6px, .6vw, 10px); }
  /* R1's tile is ~1.6:1; the height follows the width so the mosaic keeps its proportions */
  .hm-tile {
    min-height: clamp(300px, 30.4vw, 560px); color: #fff; background: #1b1b1d;
    border: 0; border-radius: var(--r-tile); box-shadow: none; isolation: isolate;
  }
  .hm-tile:focus-visible { outline-offset: 3px; border-radius: var(--r-tile); }
  .hm-tile__media { position: absolute; inset: 0; z-index: -1; height: auto; margin: 0; border-radius: inherit; }
  /* dark, localized readability grade: heavy where the words sit (left column + top-left corner),
     the photograph left vivid on the right. Tuned so white copy stays >= 4.5:1 (titles >= 3:1)
     even over the brightest pixels of a white truck - measured, not guessed. */
  /* no full-frame veil and no full-width bottom band: the shade lives only where words sit
     (copy column, lower-left link, tagline corner) so the rest of each photograph stays vivid */
  .hm-tile__media::after {
    background:
      var(--hm-tag-shade, linear-gradient(transparent, transparent)),
      linear-gradient(90deg, rgba(10,10,12,.6) 0%, rgba(10,10,12,.54) 36%, rgba(10,10,12,.26) 56%, rgba(10,10,12,0) 74%),
      radial-gradient(105% 120% at 0% 0%, rgba(10,10,12,.72) 0%, rgba(10,10,12,.52) 34%, rgba(10,10,12,.18) 62%, rgba(10,10,12,0) 84%),
      radial-gradient(62% 52% at 0% 100%, rgba(10,10,12,.56) 0%, rgba(10,10,12,.3) 50%, rgba(10,10,12,0) 100%);
  }
  .hm-tbr { display: inline; }
  .hm-tile__text { padding: clamp(28px, 3.6vw, 64px) clamp(24px, 2.8vw, 52px) 0; gap: 0; max-width: 80%; }
  .hm-tile__num { font-size: clamp(13px, 1vw, 16px); color: rgba(255,255,255,.92); }
  .hm-tile__num::after { display: none; }
  /* R1: bold (not black) white titles, regular-weight description */
  .hm-tile__title { margin-top: clamp(4px, .5vw, 8px); font-weight: 700; font-size: clamp(38px, 5.1vw, 84px); line-height: 1.14; color: #fff; text-wrap: nowrap; }
  .hm-tile__body { margin-top: clamp(6px, .7vw, 12px); font-size: clamp(16px, 1.45vw, 24px); font-weight: 400; line-height: 1.45; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  .hm-tile__more {
    position: static; margin-top: auto; align-self: flex-start;
    display: flex; align-items: center; gap: 14px; padding: 16px clamp(24px, 2.8vw, 52px) clamp(22px, 3vw, 52px);
    font-size: clamp(15px, 1.1vw, 18px); font-weight: 500; color: #fff;
  }
  .hm-tile__more-t { display: inline; }
  .hm-tile__arrow { width: clamp(36px, 2.9vw, 48px); height: clamp(36px, 2.9vw, 48px); background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.92); box-shadow: none; }
  @media (hover: hover) {
    .hm-tile:hover { box-shadow: none; }
    .hm-tile:hover .hm-tile__arrow { background: #fff; color: var(--ink); transform: translateX(3px); }
  }
  .hm-tile--noimg { background: var(--ink-2); }
}

@media (min-width: 1100px) {
  .hm-dock__count { display: flex; }
  /* R1's hero is 0.36 of the frame width (518px at 1440); the tallest slide may add a little */
  .hm-slides { --hm-h: clamp(480px, 36cqw, 700px); }
  /* R1 proportions: headline column ~45-48% of the frame, the photograph the right ~52%
     with a short white dissolve at its edge; sub-copy ~0.66 of the headline's width */
  .hm-slide {
    --hm-pt: clamp(32px, 3cqw, 64px); --hm-pb: clamp(128px, 9.6cqw, 176px);
    --hm-copy-w: calc(49cqw - var(--hm-inline)); --hm-media-x: 48%;
    --hm-title: clamp(58px, 6.1cqw, 92px); --hm-body: clamp(19px, 1.95cqw, 30px);
  }
  .hm-slide__body { line-height: 1.45; }
  .hm-slide[data-overlay="white-left"] .hm-slide__media {
    --hm-veil: linear-gradient(90deg,
      #fff 0%, rgba(255,255,255,.97) 3%, rgba(255,255,255,.9) 6%, rgba(255,255,255,.78) 9%,
      rgba(255,255,255,.62) 12%, rgba(255,255,255,.44) 15%, rgba(255,255,255,.28) 18%,
      rgba(255,255,255,.15) 21%, rgba(255,255,255,.06) 24%, rgba(255,255,255,0) 27%);
  }

  /* taglines (R1): small tracked English, short red rule; the lifestyle one is handwritten */
  .hm-tile__tag {
    display: block; position: absolute; right: clamp(24px, 2.8vw, 52px); z-index: 1;
    padding-bottom: 10px; font-size: clamp(11.5px, .85vw, 13.5px); font-weight: 600; line-height: 1.55; color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
  }
  /* the tagline corner gets its own shade inside the clipped photo layer */
  .hm-tile--tagtop { --hm-tag-shade: radial-gradient(38% 50% at 100% 0%, rgba(10,10,12,.86), rgba(10,10,12,.62) 50%, rgba(10,10,12,0)); }
  .hm-tile--tagbottom { --hm-tag-shade: radial-gradient(46% 56% at 100% 100%, rgba(10,10,12,.9), rgba(10,10,12,.7) 50%, rgba(10,10,12,0)); }
  .hm-tile__tag.hm-latin { letter-spacing: .14em; text-transform: uppercase; }
  .hm-tile__tag--top { top: clamp(28px, 3.6vw, 64px); }
  .hm-tile__tag--bottom { bottom: clamp(24px, 3vw, 52px); }
  .hm-tile__tag::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; border-radius: 2px; background: var(--red); }
  .hm-tile--lifestyle .hm-tile__tag { font-family: var(--f-hand); font-weight: 400; font-size: clamp(14px, 1.05vw, 18px); line-height: 1.25; letter-spacing: 0; transform: rotate(-9deg); transform-origin: 100% 0; }
  .hm-tile--lifestyle .hm-tile__tag.hm-latin { letter-spacing: .04em; }
  .hm-tile--lifestyle .hm-tile__tag::after { left: 30%; width: 30px; transform: rotate(-4deg); }
}

/* ---------------------------------------------------------------- reduced motion: static, near-instant */
@media (prefers-reduced-motion: reduce) {
  .hm-slide__img, .hm-slide.is-active .hm-slide__img { transform: none; }
  .hm-slide__copy > *, .hm-slide:not(.is-active) .hm-slide__copy > * { transform: none; }
  /* a manual slide change is a short cross-dissolve: no staggered copy, no drift */
  .hm-slide.is-active { transition-duration: 160ms; }
  .hm-slide:not(.is-active) { transition-delay: 160ms; }
  .hm-slide__copy > *, .hm-slide.is-active .hm-slide__copy > * { transition-duration: 160ms; transition-delay: 0s !important; }
  .hm-slide__img[data-hm-defer], .hm-slide__video, .hm-note { transition-duration: 160ms; }
  .hm-seg, .hm-jump__arrow .i { transition: none; }
  .hm-tile__img, .hm-tile:hover .hm-tile__img { transform: none !important; }
}


/* ==== lab.css ==== */
/* ==========================================================================
   lab - MHK LAB overview (R4 left screen, §12) and batch detail (R4 right, §13).
   Clean white quality dashboard: red actions, pale grey panels, 20px outer cards,
   12-16px inner panels. Every class is prefixed lab-.
   ========================================================================== */

/* ---------------------------------------------------------------- page frame
   One coordinated bottom layout per lab screen (spec §22: no competing sticky bars):
   - overview (<768px): local lab nav; --lab-nav-h = its height WITHOUT the safe-area inset
     (calc.css adds env(safe-area-inset-bottom) itself). The calculator is DOCKED on the nav: it rests in a
     raised shoulder of the nav surface at the right edge (R4-A note 4: above the local navigation), so it is part
     of the bottom chrome instead of a button floating over content. --lab-fab-w (measured by lab.js; the
     defaults fit the Thai / English labels) sizes the shoulder, and the featured image's stamp line reserves that
     width on the right so the upload time can never sit under it.
   - batch detail (<768px): one dock row = call button + the FAB beside it on the same baseline.
   The body keeps room after the footer for that chrome, so the last footer line always ends above it.
   Tablet/desktop: no bottom chrome; lab.js steps the FAB aside while footer text passes its corner. */
.lab-page { --lab-nav-h: 0px; --lab-safe: env(safe-area-inset-bottom, 0px); --lab-fab-w: 114px; --lab-shoulder-h: 0px; }
html[lang="en"] .lab-page { --lab-fab-w: 134px; }
.lab-page--dock { --lab-fab-w: 124px; }
html[lang="en"] .lab-page--dock { --lab-fab-w: 148px; }
.lab-page .ftr { margin-top: 0; } /* calc.css already keeps 76px below main for the FAB */
/* Without JS the calculator cannot open: its buttons (and the nav shoulder that holds one) are not shown. */
.no-js .lab-page [data-open-calc] { display: none !important; }
@media (max-width: 767px) {
  .lab-page--nav { --lab-nav-h: 64px; --lab-shoulder-h: 62px; padding-bottom: calc(var(--lab-nav-h) + var(--lab-shoulder-h) + var(--lab-safe) + 12px); }
  .no-js .lab-page--nav { --lab-shoulder-h: 0px; padding-bottom: calc(var(--lab-nav-h) + var(--lab-safe) + 12px); }
  .no-js .lab-lnav::before, .no-js .lab-lnav::after { display: none; }
  .no-js .lab-page--nav .lab-fcard__cap { padding-right: 0; }
  .no-js .lab-dock { padding-right: var(--gutter); }
  .lab-page--dock { padding-bottom: calc(96px + var(--lab-safe)); }
  .lab-page--nav .toast, .lab-page--nav .previewbar { bottom: calc(var(--lab-nav-h) + var(--lab-shoulder-h) + var(--lab-safe) + 10px); }
  .lab-page--dock .toast, .lab-page--dock .previewbar { bottom: calc(96px + var(--lab-safe)); }
  /* docked calculator: 48px tall, sitting 6px above the nav line inside the shoulder */
  .lab-page--nav .calc-fab { z-index: 71; right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(var(--lab-nav-h) + var(--lab-safe) + 6px); min-height: 48px;
    padding: 0 18px 0 14px; box-shadow: 0 8px 18px -10px rgba(216,11,25,.65); }
  .lab-page--nav .calc-fab:hover { transform: none; }
  .lab-page--nav .lab-fcard__cap { padding-right: calc(var(--lab-fab-w) - 6px); }
}

@keyframes lab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- shared atoms */
.lab-when { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--grey); }
.lab-when .i { width: 14px; height: 14px; flex: none; margin-top: 2.5px; }
.lab-when time { color: var(--ink-2); font-weight: 500; }
.lab-when--sm { font-size: 12.5px; margin-top: 2px; }
.lab-when--lg { font-size: 13.5px; }

.lab-stamp { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--grey); }
.lab-stamp .i { width: 14px; height: 14px; flex: none; margin-top: 2px; }

.lab-tstamp { display: grid; gap: 1px; font-size: 11.5px; line-height: 1.4; color: var(--grey); }
.lab-tstamp__k { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ink-2); }
.lab-tstamp .i { width: 12px; height: 12px; flex: none; }

.lab-ph { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.94); color: var(--ink);
  font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; box-shadow: 0 1px 8px rgba(0,0,0,.16); }
.lab-ph .i { width: 14px; height: 14px; color: var(--grey); }
.lab-ph--on { position: absolute; left: 10px; top: 10px; z-index: 2; pointer-events: none; }
.lab-ph--sm { position: absolute; left: 6px; top: 6px; z-index: 2; padding: 2px 8px 2px 6px; font-size: 11px; pointer-events: none; }
.lab-ph--sm .i { width: 12px; height: 12px; }

.lab-st { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: var(--r-pill); background: var(--panel); color: #444447;
  font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.lab-st .i { width: 13px; height: 13px; flex: none; }
.lab-st--approved { background: var(--green-wash); color: var(--green); }
.lab-st--under_review { background: var(--amber-wash); color: var(--amber); }
.lab-st--recorded { background: #EEF1F6; color: #2B3C58; }
.lab-st--no_data { background: var(--panel); color: var(--grey); }

/* image stage (spec §18.5) and staff-entered capture time: both separate from the upload stamp */
.lab-stage { display: inline-flex; align-items: center; gap: 5px; justify-self: start; padding: 2px 9px 2px 6px; border-radius: var(--r-pill); background: var(--panel); color: var(--ink-2);
  font-size: 11.5px; font-weight: 600; line-height: 1.45; white-space: nowrap; }
.lab-stage .i { width: 13px; height: 13px; color: var(--red); flex: none; }
.lab-cap { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.lab-cap .i { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--grey); }
.lab-cap time { font-weight: 600; }

.lab-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--panel); color: var(--ink-2); font-size: 12.5px; font-weight: 600; line-height: 1.45; }

/* value atoms: numeral + unit; "—" when pending */
.lab-val, .lab-rv, .lab-big { display: inline-flex; align-items: baseline; gap: 3px; font-family: var(--f-display); color: var(--ink); white-space: nowrap; }
.lab-val__n, .lab-rv__n, .lab-big__n { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.lab-val__u, .lab-rv__u, .lab-big__u { font-family: var(--f-body); font-weight: 600; color: var(--ink-2); }
.lab-val__n { font-size: clamp(21px, 1rem + 1.4vw, 26px); line-height: 1.15; }
.lab-val__u { font-size: 12.5px; }
.lab-rv__n { font-size: 16px; line-height: 1.25; }
.lab-rv__u { font-size: 11.5px; }
.lab-big { gap: 5px; }
.lab-big__n { font-size: clamp(34px, 1.6rem + 1.6vw, 46px); line-height: 1.04; }
.lab-big__u { font-size: 14px; line-height: 1.3; }
.is-pending > [class$="__n"] { color: #A3A3A8; font-weight: 500; }
.lab-big.is-pending .lab-big__u { color: var(--grey-2); }

/* portrait photograph in a landscape frame: whole picture over a blurred copy of itself */
.lab-fit { background: #1B1B1D; isolation: isolate; }
.lab-fit::before { content: ""; position: absolute; inset: -24px; z-index: 0; background: var(--lab-fit-bg) center / cover no-repeat; filter: blur(24px) brightness(.72) saturate(1.1); transform: scale(1.08); pointer-events: none; }
.lab-fit > picture, .lab-fit > a { position: relative; z-index: 1; }
.lab-fit img { object-fit: contain !important; background-color: transparent !important; }
.lab-fit:hover img, .lab-fcard:hover .lab-fit img { transform: none !important; }

/* whole Thai phrases (see phrases() in lab.ts) - wraps inside only when a phrase is wider than its line;
   lab compound terms inside long running phrases never split ("ผลทดสอบ", "กำลังอัด", "ไม่น้อยกว่า");
   a short batch id ("Batch BBT-01") is one unbreakable name */
.lab-nb { display: inline-block; max-width: 100%; }
.lab-kw, .lab-id { white-space: nowrap; }
/* Line-level rhythm: paragraphs avoid a stranded last word, short headings balance their lines. */
.lab-std__b, .lab-mat__note, .lab-report__sum, .lab-idn__desc, .lab-call__b, .lab-intro__sup, .lab-qc__txt, .lab-mth__note > span,
.lab-chart__foot, .lab-panel__note, .lab-fempty__b, .lab-hero__captext, .lab-gal__cap, .lab-qc__meta p > span:last-child, .lab-report__al > span { text-wrap: pretty; }
.lab-intro__line, .lab-call__t, .lab-std__t, .lab-fempty__t, .lab-idn__mixl, .lab-fcard__mix, .lab-row__mix { text-wrap: balance; }
/* Shared .btn carries a small letter-spacing; Thai labels in the lab's own button rows are set without it. */
.lab-idn__act .btn, .lab-call__act .btn, .lab-fempty__act .btn, .lab-page .calc-fab { letter-spacing: 0; }
/* the shared FAB label is set at line-height 1; give Thai tone marks their full line box (height is fixed by min-height) */
.lab-page .calc-fab { line-height: 1.25; }

/* definition list used in details */
.lab-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.lab-dl > div { min-width: 0; }
.lab-dl dt { font-size: 12px; line-height: 1.35; color: var(--grey); }
.lab-dl dd { margin-top: 2px; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--ink); }

/* ---------------------------------------------------------------- tabs (overview + measurement views) */
.lab-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: 18px -3px 0; scroll-padding-inline: 12px; }
.lab-tabs::-webkit-scrollbar { display: none; }
.lab-tab { flex: 1 0 auto; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--panel); color: var(--ink);
  font-family: var(--f-display); font-weight: 500; font-size: 15px; line-height: 1.2; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease); }
.lab-tab:hover { background: var(--panel-2); }
@media (max-width: 420px) { .lab-tabs--ov { gap: 6px; } .lab-tabs--ov .lab-tab { flex: 1 1 auto; padding: 0 10px; font-size: 14.5px; } }
.lab-tabs.lab-tabs--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
.lab-tabs--grid .lab-tab { white-space: normal; padding: 6px 10px; }
.lab-tab[aria-selected="true"] { background: var(--red); color: #fff; box-shadow: 0 8px 16px -10px rgba(216,11,25,.75); }
.lab-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 12px; }

.lab-panel { outline: none; border-radius: 16px; }
.lab-panel:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.lab-panel:not([hidden]) { animation: lab-in 260ms var(--ease) both; }
.js .lab-panel__h { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.lab-panel__h { font-family: var(--f-display); font-weight: 600; font-size: 19px; margin: 28px 2px 8px; }
.lab-panel__note { margin: 18px 2px 12px; font-size: 13.5px; line-height: 1.5; color: var(--grey); }

/* #hash targets for the no-JS page only (see anchor() in lab.ts); with JS they have no box, so the browser's
   fragment scroll can never fire (lab.js scrolls this window itself). */
.lab-anchor { display: block; height: 0; scroll-margin-top: calc(var(--hdr-h) + 12px); }
.lab-mat__sum > .lab-anchor { position: absolute; top: 0; left: 0; width: 1px; }
.js .lab-anchor { display: none; }

/* No JS: every view is readable in sequence; the tab strip (which needs JS) is hidden. */
.no-js .lab-tabs { display: none; }
.no-js .lab-panel[hidden] { display: block !important; }
.no-js .lab-panel__h { position: static !important; width: auto; height: auto; margin: 28px 2px 8px; clip: auto; clip-path: none; }

/* ==========================================================================
   OVERVIEW
   ========================================================================== */
.lab-ov { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: clamp(18px, 3vw, 44px); }

/* ---------------------------------------------------------------- intro: MHK LAB + line + motto */
.lab-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: start; }
.lab-intro__h { grid-column: 1; display: grid; gap: 6px; font-weight: 700; }
.lab-intro__t { font-family: var(--f-display); font-weight: 800; font-size: clamp(36px, 1.2rem + 5vw, 44px); line-height: .98; letter-spacing: -0.022em; color: var(--ink); }
.lab-intro__line { font-family: var(--f-display); font-weight: 600; font-size: clamp(18px, 0.95rem + 1.1vw, 22px); line-height: 1.3; color: var(--ink); letter-spacing: 0; }
.lab-intro__sup { grid-column: 1 / -1; margin-top: 6px; max-width: 46ch; word-break: keep-all; font-size: 14px; line-height: 1.55; color: var(--grey); }
.lab-intro__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.lab-intro__upd { display: inline-flex; align-items: flex-start; gap: 6px; padding: 4px 12px 4px 9px; border-radius: var(--r-pill);
  background: var(--panel); font-size: 12.5px; line-height: 1.45; color: var(--grey); }
.lab-intro__upd .i { width: 14px; height: 14px; margin-top: 2px; flex: none; }
.lab-intro__upd time { color: var(--ink-2); font-weight: 600; }
.lab-intro__motto { grid-column: 2; grid-row: 1; position: relative; margin-top: 4px; padding: 0 0 12px 11px; border-left: 1px solid #D9D9DD;
  font-family: var(--f-body); font-size: 10px; font-weight: 600; line-height: 1.6; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.lab-intro__motto::after { content: ""; position: absolute; left: 11px; bottom: 0; width: 22px; height: 2px; border-radius: 2px; background: var(--red); }
/* In-flow calculator action (tablet/desktop). Phones use the FAB above the local lab nav (R4-A note 4). */
.lab-intro__calc { display: none; }
@media (min-width: 768px) {
  .lab-intro__calc { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; border-radius: var(--r-pill); background: #fff; border: 1px solid #DCDCE0;
    font-family: var(--f-display); font-weight: 500; font-size: 15px; line-height: 1.2; color: var(--ink); transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease); }
  .lab-intro__calc .i { width: 19px; height: 19px; color: var(--red); }
  .lab-intro__calc:hover { border-color: var(--red); color: var(--red-dk); box-shadow: 0 8px 20px -14px rgba(216,11,25,.7); }
  .lab-intro__calc:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
}

/* ---------------------------------------------------------------- featured batch card */
.lab-feat { display: grid; gap: 14px; margin-top: 16px; align-content: start; }
.lab-fcard { display: grid; gap: 14px; padding: 16px; background: #fff; border: 1px solid #ECECEE; border-radius: var(--r-outer); box-shadow: var(--shadow-card); }
/* R4 head: batch id + status badge on one line, the mix underneath, then the test time on its own full line
   (it never has to squeeze beside the badges). The review-build demo label pairs with the mix line. */
.lab-fcard__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t qc" "mix demo" "when when"; column-gap: 12px; align-items: center; }
.lab-fcard__t { grid-area: t; min-width: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(24px, 1rem + 2.4vw, 30px); line-height: 1.14; letter-spacing: -0.012em; }
.lab-fcard__qc { grid-area: qc; justify-self: end; }
.lab-fcard__mix { grid-area: mix; min-width: 0; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.lab-fcard__demo { grid-area: demo; justify-self: end; margin-top: 4px; }
.lab-fcard__when { grid-area: when; margin-top: 4px; }
.lab-fcard__media { display: grid; gap: 8px; }
.lab-fcard__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r-panel); background: var(--panel); }
.lab-fcard__frame picture, .lab-fcard__frame img { width: 100%; height: 100%; }
.lab-fcard__frame img { object-fit: cover; transition: transform 700ms var(--ease); }
.lab-fcard:hover .lab-fcard__frame img { transform: scale(1.02); }
.lab-fcard__cap { display: grid; gap: 2px; padding: 0 2px; }

.lab-mcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lab-mc { display: flex; flex-direction: column; min-width: 0; padding: 10px 12px 11px; border-radius: 12px; background: var(--panel); }
.lab-mc__k { font-size: 12.5px; line-height: 1.3; color: var(--grey); }
.lab-mc__v { margin-top: 3px; }
.lab-mc__b { margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: var(--grey); }
.lab-mc__b.is-pending { color: var(--ink-2); font-weight: 600; }

.lab-cta { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 20px; border-radius: 14px; background: var(--red); color: #fff;
  font-family: var(--f-display); font-weight: 500; font-size: 17px; line-height: 1.2; transition: background var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease); }
.lab-cta .i { width: 20px; height: 20px; transition: transform var(--t-med) var(--ease); }
.lab-cta:hover { background: var(--red-dk); box-shadow: 0 10px 22px -14px rgba(184,7,19,.9); }
.lab-cta:hover .i { transform: translateX(4px); }

/* materials of the featured batch (R4: two across) */
.lab-fmats__h { margin: 4px 2px 10px; font-family: var(--f-display); font-weight: 600; font-size: 16px; line-height: 1.3; }
.lab-fmats__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lab-fmats__list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* material face (R4): a generous square thumbnail on the left; name + chevron, metric label and value beside it;
   the status chip closes the tile at the bottom right */
.lab-mat, .lab-gal__i, .lab-row, .lab-mc, .lab-sum__c { position: relative; }
/* The chevron is pinned to the tile's top-right corner (not a grid column), so the name gets the full width
   beside the thumbnail ("หิน 3/4"" stays on one line in a 166px phone tile). The last row is 1fr and the status
   chip sits at its foot, so tiles side by side end on the same line whatever their names wrap to. */
.lab-face { --lab-th: 64px; }
.lab-face { display: grid; grid-template-columns: var(--lab-th) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; grid-template-areas: "th name" "th k" "th v" "st st"; column-gap: 12px; align-items: start; }
.lab-mat__th { grid-area: th; width: var(--lab-th); height: var(--lab-th); overflow: hidden; border-radius: 12px; background: var(--panel); }
.lab-mat__th picture, .lab-mat__th img { width: 100%; height: 100%; }
.lab-mat__th img { object-fit: cover; }
.lab-mat__noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--grey-2); }
.lab-mat__name { grid-area: name; min-width: 0; padding-right: 20px; font-family: var(--f-display); font-weight: 600; font-size: 16px; line-height: 1.25; color: var(--ink); }
.lab-mat__chev { position: absolute; top: 9px; right: 6px; display: grid; place-items: center; width: 22px; height: 22px; color: var(--grey); transition: transform var(--t-med) var(--ease), color var(--t-fast); }
.lab-mat__chev .i { width: 18px; height: 18px; }
.lab-mat__k { grid-area: k; margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--grey); }
.lab-mat__v { grid-area: v; font-family: var(--f-display); font-weight: 600; font-size: 19px; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums; }
.lab-mat__v small { margin-left: 3px; font-family: var(--f-body); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.lab-mat__v.is-pending { color: #A3A3A8; font-weight: 500; }
.lab-mat__st { grid-area: st; justify-self: end; align-self: end; margin-top: 8px; }
@media (max-width: 767px) { .lab-face { --lab-th: 56px; column-gap: 10px; } }
@media (max-width: 429px) { .lab-face .lab-mat__name { font-size: 15px; } }
/* equal-height tiles in a row: the list item is a grid, so the tile link fills it */
.lab-fmats__list > li { display: grid; }

.lab-mat--tile { padding: 10px; background: #fff; border: 1px solid #ECECEE; border-radius: 16px; box-shadow: 0 1px 2px rgba(16,16,16,.04);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease); }
.lab-mat--tile:hover { border-color: #D6D6DA; box-shadow: var(--shadow-card); }
.lab-mat--tile:hover .lab-mat__chev { color: var(--red); transform: translateX(2px); }
/* a lone last tile spans both columns: the status moves beside the text, the chevron to the far right
   (from 360px; narrower phones set every tile in one column with the stacked face) */
.lab-mats > .lab-mat--card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 360px) {
  .lab-fmats__list > li:last-child:nth-child(odd) .lab-face, .lab-mats > .lab-mat--card:last-child:nth-child(odd):not([open]) .lab-face { grid-template-columns: var(--lab-th) minmax(0, 1fr) auto; grid-template-rows: auto auto auto; grid-template-areas: "th name st" "th k st" "th v st"; padding-right: 38px; }
  .lab-fmats__list > li:last-child:nth-child(odd) .lab-mat__name, .lab-mats > .lab-mat--card:last-child:nth-child(odd):not([open]) .lab-mat__name { padding-right: 0; }
  .lab-fmats__list > li:last-child:nth-child(odd) .lab-mat__st, .lab-mats > .lab-mat--card:last-child:nth-child(odd):not([open]) .lab-mat__st { margin: 0; align-self: center; }
  .lab-fmats__list > li:last-child:nth-child(odd) .lab-mat__chev, .lab-mats > .lab-mat--card:last-child:nth-child(odd):not([open]) .lab-mat__chev { top: 50%; right: 10px; margin-top: -11px; }
}

/* ---------------------------------------------------------------- results list rows */
.lab-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 2px 12px; }
.lab-list-head__t { font-family: var(--f-display); font-weight: 600; font-size: 19px; line-height: 1.3; }
.lab-count { font-size: 13px; color: var(--grey); white-space: nowrap; }
.lab-quiet { padding: 18px; border-radius: 14px; background: var(--panel); font-size: 14px; color: var(--grey); }
.lab-rows { display: grid; gap: 10px; }

.lab-row, .lab-tl__card { position: relative; display: grid; gap: 2px; padding: 14px 14px 12px 16px; background: #fff; border: 1px solid #ECECEE; border-radius: 16px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease); }
.lab-row:hover, .lab-tl__card:hover { border-color: #D6D6DA; box-shadow: var(--shadow-card); }
.lab-row:has(.lab-row__link:focus-visible), .lab-tl__card:has(.lab-row__link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.lab-row__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.lab-row__t { font-family: var(--f-display); font-weight: 600; font-size: 18px; line-height: 1.25; }
.lab-row__link { color: var(--ink); }
.lab-row__link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.lab-row__link:focus-visible { outline: none; }
.lab-row__mix { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.lab-row__m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.lab-row__m li { display: grid; gap: 1px; min-width: 0; padding: 7px 10px; border-radius: 10px; background: var(--panel); }
.lab-row__mk { font-size: 11.5px; line-height: 1.3; color: var(--grey); }
.lab-row__pend { font-size: 11px; line-height: 1.3; font-weight: 600; color: var(--ink-2); }
.lab-row__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; margin-top: 8px; }
.lab-row__go { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; background: var(--panel); color: var(--ink);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-med) var(--ease); }
.lab-row__go .i { width: 16px; height: 16px; }
.lab-row:hover .lab-row__go, .lab-tl__card:hover .lab-row__go { background: var(--red); color: #fff; transform: translateX(2px); }

/* ---------------------------------------------------------------- materials view (disclosures, two across) */
/* Closed cards side by side share one height (the summary fills its card, its status chip sits at the foot);
   the open card takes a row of its own. */
.lab-mats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.lab-mat--card:not([open]) { display: grid; grid-template-rows: 1fr; }
.lab-mat--card:not([open]) > .lab-mat__sum { height: 100%; }
.lab-mat--card { background: #fff; border: 1px solid #ECECEE; border-radius: 16px; box-shadow: 0 1px 2px rgba(16,16,16,.04); scroll-margin-top: calc(var(--hdr-h) + 16px);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease); }
.lab-mat--card:hover { border-color: #D6D6DA; }
.lab-mat--card[open] { grid-column: 1 / -1; border-color: #D6D6DA; box-shadow: var(--shadow-card); }
.lab-mat__sum { padding: 10px; border-radius: 16px; cursor: pointer; list-style: none; }
.lab-mat__sum::-webkit-details-marker { display: none; }
.lab-mat__sum:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lab-mat--card[open] .lab-mat__chev { transform: rotate(90deg); color: var(--red); }
.lab-mat__body { display: grid; gap: 12px; margin: 0 14px; padding: 14px 0; border-top: 1px solid var(--line); animation: lab-in 240ms var(--ease) both; }
.lab-mat__note { padding: 10px 12px; border-radius: 10px; background: var(--panel); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.lab-mat__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

/* ---------------------------------------------------------------- latest (timeline) */
.lab-tl { display: grid; }
.lab-tl__i { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding-bottom: 12px; }
.lab-tl__i::before { content: ""; position: absolute; left: 28.5px; top: 96px; bottom: 4px; width: 1px; background: var(--line); }
.lab-tl__i:last-child::before { display: none; }
.lab-tl__d { display: grid; justify-items: center; align-content: start; padding-top: 10px; }
.lab-tl__k { font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--grey); text-align: center; }
.lab-tl__d time { display: grid; justify-items: center; gap: 1px; padding-top: 4px; text-align: center; }
.lab-tl__day { font-family: var(--f-display); font-weight: 700; font-size: 28px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.lab-tl__mon { margin-top: 3px; font-size: 11.5px; line-height: 1.3; color: var(--grey); }
.lab-tl__hr { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--red-dk); font-variant-numeric: tabular-nums; }
.lab-tl__meta { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--grey); }

/* ---------------------------------------------------------------- standards */
.lab-stds { display: grid; gap: 10px; }
.lab-std { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 16px 16px 14px; background: #fff; border: 1px solid #ECECEE; border-radius: 16px; }
.lab-std__n { padding-top: 2px; font-family: var(--f-display); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--red); font-variant-numeric: tabular-nums; }
.lab-std__t { font-family: var(--f-display); font-weight: 600; font-size: 17px; line-height: 1.32; }
.lab-std__b { margin-top: 6px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); max-width: 62ch; }
.lab-std__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.lab-st--std-approved { background: var(--green-wash); color: var(--green); }
.lab-doc { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); background: var(--red-wash); color: var(--red-dk); font-size: 14px; font-weight: 600; }
.lab-doc .i { width: 18px; height: 18px; }
.lab-doc__size { font-weight: 500; color: var(--grey); font-size: 12.5px; }

/* ---------------------------------------------------------------- banner: wide, low, grey photograph + red diagonal
   Three grid columns - copy | slash | sub - so the red diagonal always runs through the gap between the two
   texts (never across a Thai line) and each text keeps its own natural line length: the editor's line breaks
   ("ทุกการทดสอบ / คือรากฐานของความไว้วางใจ") survive at 375px instead of orphaning "ไว้วางใจ". */
.lab-banner { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(18px, 1fr) auto; align-items: center; column-gap: 6px;
  min-height: 116px; margin-top: clamp(28px, 4vw, 56px); padding: 16px 16px 16px 18px; border-radius: 18px; background: linear-gradient(100deg, #F1F1F3 0%, #E3E3E6 52%, #ECECEE 100%); }
.lab-banner__img { position: absolute; inset: 0; z-index: -2; }
.lab-banner__img picture, .lab-banner__img img { width: 100%; height: 100%; }
.lab-banner__img img { object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(1.12); opacity: .5; mix-blend-mode: multiply; }
.lab-banner::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(245,245,246,.86) 0%, rgba(245,245,246,.2) 40%, rgba(245,245,246,.2) 60%, rgba(245,245,246,.88) 100%); }
.lab-banner__copy { grid-column: 1; grid-row: 1; position: relative; font-family: var(--f-body); font-size: 10px; font-weight: 600; line-height: 1.65; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.lab-banner__slash { grid-column: 2; grid-row: 1; justify-self: center; align-self: stretch; position: relative; z-index: 0; width: 6px; margin-block: -44px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(216,11,25,0) 0%, var(--red) 24%, var(--red) 70%, rgba(216,11,25,.2) 100%);
  transform: rotate(22deg); transform-origin: center; box-shadow: 0 0 18px 2px rgba(216,11,25,.22); }
.lab-banner__slash::before { content: ""; position: absolute; left: -14px; top: 22%; width: 3px; height: 48%; border-radius: 3px; background: rgba(216,11,25,.35); }
.lab-banner__sub { grid-column: 3; grid-row: 1; position: relative; justify-self: end; text-align: right; font-family: var(--f-display); font-weight: 600; font-size: 14px; line-height: 1.38; color: var(--ink); }
/* Phones: R4 sets the Thai line in three short lines on the right, which leaves the diagonal its own gap.
   balance + a measure just wider than the longest phrase splits the editor's long second line at its natural
   middle word boundary instead of letting it run into the slash. */
@media (max-width: 767px) { .lab-banner__sub { max-width: 8.2em; text-wrap: balance; } }
@media (max-width: 399px) { .lab-banner__sub { font-size: 13px; } }

/* ---------------------------------------------------------------- local lab navigation (mobile, app-like) */
.lab-lnav { display: none; }
@media (max-width: 767px) {
  .lab-lnav { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; height: calc(var(--lab-nav-h) + var(--lab-safe)); padding-bottom: var(--lab-safe);
    background: rgba(255,255,255,.97); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -20px rgba(16,16,16,.45); }
  .lab-lnav ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 64px; }
  .lab-lnav__a { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; height: 100%; padding: 0 4px;
    font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--grey); text-align: center; transition: color var(--t-fast) var(--ease); }
  .lab-lnav__a .i { width: 23px; height: 23px; }
  .lab-lnav__a::before { content: ""; position: absolute; top: -1px; left: 32%; right: 32%; height: 3px; border-radius: 0 0 3px 3px; background: var(--red); transform: scaleX(0); transition: transform var(--t-med) var(--ease); }
  .lab-lnav__a[aria-current="true"] { color: var(--red); }
  .lab-lnav__a[aria-current="true"]::before { transform: scaleX(1); }
  .lab-lnav__a:focus-visible { outline-offset: -4px; }
  /* the calculator's shoulder: one surface with the bar (it covers the bar's hairline where they meet),
     rounded where it rises, with a concave fillet into the bar's top edge */
  .lab-lnav::before { content: ""; position: absolute; right: 0; bottom: calc(100% - 1px); width: calc(max(12px, env(safe-area-inset-right, 0px)) + var(--lab-fab-w) + 10px);
    height: calc(var(--lab-shoulder-h) + 1px); border: 1px solid var(--line); border-width: 1px 0 0 1px; border-top-left-radius: 20px;
    background: inherit; -webkit-backdrop-filter: inherit; backdrop-filter: inherit; box-shadow: -8px -10px 22px -20px rgba(16,16,16,.45); pointer-events: none; }
  .lab-lnav::after { content: ""; position: absolute; bottom: calc(100% - 1px); right: calc(max(12px, env(safe-area-inset-right, 0px)) + var(--lab-fab-w) + 9px); width: 14px; height: 14px; pointer-events: none;
    background: radial-gradient(circle at 0 0, transparent 13px, var(--line) 13.5px, var(--line) 14px, rgba(255,255,255,.97) 14.6px); }
}

/* Below desktop the featured card belongs to the "results" view (R4 order: tabs, then the card). */
@media (max-width: 1099px) {
  .js .lab-ov:not([data-tab="results"]) .lab-feat { display: none; }
}

/* ---------------------------------------------------------------- overview: tablet */
@media (min-width: 768px) {
  .lab-intro__t { font-size: clamp(52px, 2rem + 3.4vw, 64px); }
  .lab-intro__line { font-size: 24px; }
  .lab-intro__sup { font-size: 15.5px; }
  .lab-intro__motto { font-size: 11px; padding-left: 14px; }
  .lab-intro__motto::after { left: 14px; }
  .lab-tabs { gap: 10px; margin-top: 26px; }
  .lab-tab { flex: 0 0 auto; padding: 0 24px; font-size: 16px; min-height: 46px; }
  .lab-fcard { padding: 22px; gap: 18px; }
  .lab-fcard__frame { aspect-ratio: 2 / 1; }
  .lab-mc { padding: 14px 16px; }
  .lab-mc__k { font-size: 13.5px; }
  .lab-mc__b { font-size: 12.5px; }
  .lab-fmats__list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .lab-fmats__list > li:last-child:nth-child(odd) { grid-column: auto; }
  .lab-fmats__list > li:last-child:nth-child(odd) .lab-face { grid-template-columns: var(--lab-th) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; grid-template-areas: "th name" "th k" "th v" "st st"; padding-right: 10px; }
  .lab-fmats__list > li:last-child:nth-child(odd) .lab-mat__name { padding-right: 20px; }
  .lab-fmats__list > li:last-child:nth-child(odd) .lab-mat__st { margin: 8px 0 0; align-self: end; }
  .lab-fmats__list > li:last-child:nth-child(odd) .lab-mat__chev { top: 9px; right: 6px; margin-top: 0; }
  .lab-mats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-banner { min-height: 150px; padding: 26px 32px; border-radius: 20px; }
  .lab-banner__copy { font-size: 12px; }
  .lab-banner__sub { font-size: 19px; }
}

/* ---------------------------------------------------------------- overview: desktop two-column dashboard */
@media (min-width: 768px) and (max-width: 1099px) {
  .lab-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-stds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .lab-ov { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; column-gap: clamp(40px, 4.4vw, 76px); padding-top: 52px; }
  .lab-intro { grid-column: 1; grid-row: 1; column-gap: 20px; }
  .lab-tabs { grid-column: 1; grid-row: 2; margin-top: 34px; }
  .lab-feat { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .lab-panels { grid-column: 1; grid-row: 3; }
  .lab-intro__t { font-size: clamp(64px, 2.4rem + 3.1vw, 96px); }
  .lab-intro__line { font-size: clamp(24px, 1rem + 0.8vw, 30px); }
  .lab-intro__sup { margin-top: 12px; font-size: 16px; }
  .lab-intro__motto { margin-top: 10px; font-size: 11px; }
  .lab-tab { flex: 1 0 auto; padding: 0 18px; }
  .lab-fcard { padding: 26px; }
  .lab-fcard__t { font-size: clamp(32px, 1.2rem + 1.2vw, 40px); }
  .lab-fcard__mix { font-size: 16px; }
  .lab-fcard__frame { aspect-ratio: 16 / 9; }
  .lab-val__n { font-size: clamp(26px, 1rem + 1vw, 32px); }
  .lab-val__u { font-size: 13.5px; }
  .lab-cta { min-height: 56px; font-size: 18px; }
  .lab-mats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-list-head { margin-top: 30px; }
  .lab-panel__note { margin-top: 30px; }
  .lab-banner { min-height: 188px; padding: 32px 48px; }
  .lab-banner__copy { font-size: 13px; }
  .lab-banner__sub { font-size: 24px; }
  .lab-banner__slash { width: 8px; }
}

/* ==========================================================================
   BATCH DETAIL
   ========================================================================== */
.lab-bd { padding-top: 6px; }

/* top bar: back, centred title, share */
.lab-bar { display: grid; grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr); align-items: center; gap: 8px; min-height: 60px; margin-bottom: 6px; }
.lab-bar__back, .lab-bar__share { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; color: var(--ink); transition: background var(--t-fast) var(--ease); }
.lab-bar__back { justify-self: start; margin-left: -10px; padding: 0 10px; }
.lab-bar__share { justify-self: end; margin-right: -10px; padding: 0 10px; }
.lab-bar__back:hover, .lab-bar__share:hover { background: var(--panel); }
.lab-bar__back .i { width: 24px; height: 24px; transition: transform var(--t-med) var(--ease); }
.lab-bar__back:hover .i { transform: translateX(-3px); }
.lab-bar__share .i { width: 22px; height: 22px; }
.lab-bar__bl, .lab-bar__sl { display: none; }
.lab-bar__t { font-family: var(--f-display); font-weight: 600; font-size: 18px; line-height: 1.3; text-align: center; }

/* wide rounded media panel */
.lab-hero { display: grid; gap: 8px; }
.lab-hero__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r-outer); background: var(--panel); }
.lab-hero__link { display: block; width: 100%; height: 100%; }
.lab-hero__link picture, .lab-hero__link img { width: 100%; height: 100%; }
.lab-hero__link img { object-fit: cover; transition: transform 700ms var(--ease); }
.lab-hero__link:hover img { transform: scale(1.02); }
.lab-hero__link:focus-visible { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 6px var(--ink); border-radius: var(--r-outer); }
.lab-hero__pill { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 7px 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.96);
  font-family: var(--f-display); font-weight: 500; font-size: 14px; line-height: 1.2; color: var(--ink); box-shadow: 0 2px 12px rgba(0,0,0,.2); pointer-events: none; }
.lab-hero__none { display: grid; place-items: center; width: 100%; height: 100%; color: var(--grey-2); }
.lab-hero__none .i { width: 40px; height: 40px; }
.lab-hero__cap { display: grid; gap: 2px; padding: 0 4px; }
.lab-hero__captext { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.lab-hero__captext:empty { display: none; }
.lab-hero__captext .lab-stage { margin-right: 7px; vertical-align: middle; }

/* identity */
.lab-idn { display: grid; gap: 10px; margin-top: 16px; align-content: start; }
/* R4: id left, facility tucked top-right, the times on full lines underneath (never squeezed beside it) */
.lab-idn__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t fac" "times times"; column-gap: 12px; align-items: start; }
.lab-idn__t { grid-area: t; min-width: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 1.2rem + 2.6vw, 34px); line-height: 1.14; letter-spacing: -0.012em; }
.lab-idn__times { grid-area: times; display: grid; gap: 2px; margin-top: 4px; }
.lab-idn__times .lab-when { margin-top: 0; }
.lab-idn__fac { grid-area: fac; justify-self: end; display: flex; align-items: flex-start; gap: 5px; max-width: 46vw; padding-top: 5px; text-align: right; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.lab-idn__fac .i { width: 15px; height: 15px; margin-top: 2px; color: var(--red); flex: none; }
.lab-idn__fac > span:last-child { display: grid; }
.lab-idn__fac b { font-weight: 600; color: var(--ink); }
.lab-idn__fl { color: var(--grey); }
.lab-idn__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.lab-idn__upd { font-size: 12.5px; line-height: 1.45; color: var(--grey); }
.lab-idn__mix { display: grid; gap: 3px; padding: 12px 0 0 14px; margin-top: 2px; border-left: 3px solid var(--red); padding-top: 0; }
.lab-idn__mixl { font-family: var(--f-display); font-weight: 600; font-size: 16px; line-height: 1.35; }
.lab-idn__desc { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.lab-idn__prod { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 44px; font-size: 14.5px; font-weight: 600; color: var(--red-dk); }
.lab-idn__prod b { font-weight: 700; }
.lab-idn__prod .i { width: 18px; height: 18px; transition: transform var(--t-med) var(--ease); }
.lab-idn__prod:hover .i { transform: translateX(3px); }
.lab-idn__act { display: none; }
.lab-idn__tz { font-size: 12px; line-height: 1.45; color: var(--grey); }

/* measurement views */
/* measurement dashboard: tabs · summary · selected detail · chart · QC (DOM = phone order) */
.lab-dash { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "sum" "det" "chart" "qc"; gap: 12px; margin-top: 22px; scroll-margin-top: calc(var(--hdr-h) + 12px); }
.lab-dash > .lab-tabs { grid-area: tabs; }
.lab-dash > .lab-sum { grid-area: sum; }
.lab-dash > .lab-mpanels { grid-area: det; }
.lab-dash > .lab-chart { grid-area: chart; }
.lab-dash > .lab-qc { grid-area: qc; }
.lab-dash--notabs { grid-template-areas: "sum" "chart" "qc"; }
.lab-tabs--m { margin-top: 0; }
/* Equal columns while the labels allow, a wider column only for a long label ("Cylinder Test"), so four
   methods stay one R4 row on a 375px phone; lab.js falls back to 2 x 2 only when even that cannot fit. */
.lab-tabs--fit { display: grid; grid-template-columns: repeat(var(--n), minmax(max-content, 1fr)); overflow: visible; }
.lab-tabs--fit .lab-tab { min-width: 0; padding: 0 10px; font-size: 14.5px; }
.lab-mpanels { min-width: 0; }
.lab-mpanel { padding: 16px; background: #fff; border: 1px solid #ECECEE; border-radius: 16px; }
.lab-ms-list { display: grid; gap: 20px; }
.lab-ms { display: grid; gap: 14px; }
.lab-ms__head { display: grid; gap: 4px; }
.lab-ms__t { font-family: var(--f-display); font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--ink-2); }
.lab-ms__v { line-height: 1; }
.lab-ms__note { display: flex; align-items: center; gap: 6px; font-size: 13.5px; line-height: 1.45; color: var(--grey); }
.lab-ms__note .i { width: 15px; height: 15px; }
.lab-ms__note.is-pending { color: var(--ink-2); font-weight: 600; }
.lab-ms__dl { padding-top: 14px; border-top: 1px solid var(--line); }
.lab-corr { padding: 12px 14px; border-radius: 12px; background: var(--amber-wash); border: 1px solid var(--amber-line); color: var(--amber); font-size: 13px; line-height: 1.5; }
.lab-corr__t { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.lab-corr__t .i { width: 15px; height: 15px; }
.lab-corr ul { margin-top: 4px; display: grid; gap: 2px; }
.lab-mth { display: grid; gap: 12px; }
.lab-mth__sub { margin-top: 2px; font-size: 13px; color: var(--grey); }
.lab-mth__note { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.55; color: var(--grey); }
.lab-mth__note .i { width: 15px; height: 15px; margin-top: 3px; flex: none; }

/* tables (method view + chart data) */
.lab-tablewrap { overflow-x: auto; margin-inline: -2px; padding-inline: 2px; }
.lab-table { width: 100%; min-width: 0; font-size: 13.5px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.lab-table caption { padding: 0 0 8px; text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.lab-table th, .lab-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.lab-table thead th { font-size: 12px; font-weight: 600; color: var(--grey); border-bottom-color: #D9D9DD; white-space: nowrap; }
.lab-table tbody th { font-weight: 600; white-space: nowrap; }
.lab-table b { font-family: var(--f-display); font-weight: 600; font-size: 15px; }
.lab-table__pend { color: var(--grey); font-weight: 600; }
.lab-table td, .lab-table th { overflow-wrap: normal; }
.lab-table td b { white-space: nowrap; }
.lab-table__sub { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--grey); }
.lab-dt { display: inline-flex; flex-wrap: wrap; column-gap: 5px; }
.lab-dt > span { white-space: nowrap; }
.lab-table tr:last-child > * { border-bottom: 0; }
/* narrow phones: tighter cells so the three columns fit without a sideways scroll */
@media (max-width: 399px) {
  .lab-table { font-size: 13px; }
  .lab-table th, .lab-table td { padding: 8px 6px; }
  .lab-table th:first-child, .lab-table td:first-child { padding-left: 2px; }
}

/* three-column summary with thin dividers */
.lab-sum { min-width: 0; }
.lab-sum__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px 0 14px; background: #fff; border: 1px solid #ECECEE; border-radius: 16px; overflow: hidden; }
.lab-sum__c { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 2px 8px; text-align: center; }
.lab-sum__c + .lab-sum__c { border-left: 1px solid var(--line); }
.lab-sum__c::before { content: ""; position: absolute; top: -16px; left: 26%; right: 26%; height: 3px; border-radius: 0 0 3px 3px; background: var(--red); transform: scaleX(0); transition: transform var(--t-med) var(--ease); }
.lab-sum__c.is-hi::before { transform: scaleX(1); }
.lab-sum__v { order: 1; }
.lab-sum__v .lab-big { flex-direction: column; align-items: center; gap: 1px; }
.lab-sum__v .lab-big__n { font-size: clamp(28px, 1.1rem + 3vw, 44px); }
.lab-sum__v .lab-big__u { font-size: 13px; }
.lab-sum__k { order: 2; margin-top: 6px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); font-weight: 500; }
.lab-sum__b { order: 3; margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: var(--grey); }
.lab-sum__b.is-pending { color: var(--ink-2); font-weight: 600; }

/* chart + QC */
.lab-chart { min-width: 0; padding: 14px 14px 12px; background: #fff; border: 1px solid #ECECEE; border-radius: 16px; }
.lab-chart__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.lab-chart__h { font-family: var(--f-display); font-weight: 600; font-size: 15.5px; line-height: 1.35; }
.lab-chart__h span { font-weight: 500; color: var(--grey); }
.lab-chart__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); }
.lab-chart__legend li { display: inline-flex; align-items: center; gap: 7px; }
.lab-chart__sw { position: relative; width: 18px; height: 2.5px; border-radius: 2px; background: var(--red); }
.lab-chart__sw::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: inherit; }
.lab-chart__legend .is-s1 .lab-chart__sw { background: var(--ink); }
.lab-chart__plot { margin-top: 6px; container-type: inline-size; }
.lab-ch { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--f-body); }
.lab-ch--wide { display: none; }
@container (min-width: 500px) { .lab-ch--wide { display: block; } .lab-ch--compact { display: none; } }
.lab-ch__grid line { stroke: #EEEEF0; stroke-width: 1; }
.lab-ch__axis { stroke: #BDBDC3; stroke-width: 1; }
.lab-ch__tick { stroke: #BDBDC3; stroke-width: 1; }
.lab-ch__ylab text, .lab-ch__xlab text { fill: var(--grey); font-variant-numeric: tabular-nums; }
.lab-ch__title { fill: var(--grey); }
.lab-ch__area { stroke: none; }
.lab-ch__line { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.lab-ch__dot { fill: var(--red); stroke: #fff; stroke-width: 2; }
.lab-ch__val { fill: var(--ink); font-family: var(--f-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.lab-ch__s1 .lab-ch__line { stroke: var(--ink); }
.lab-ch__s1 .lab-ch__dot { fill: var(--ink); }
.lab-ch__target line { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 5 4; }
.lab-ch__target text { fill: var(--ink-2); font-weight: 600; }
.lab-ch__pend line { stroke: #A3A3A8; stroke-width: 1.2; stroke-dasharray: 3 4; }
.lab-ch__pend text { fill: var(--grey); font-weight: 600; }
.lab-chart__foot { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--grey); }
.lab-chart__data { margin-top: 8px; border-top: 1px solid var(--line); }
.lab-chart__data > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; }
.lab-chart__data > summary::-webkit-details-marker { display: none; }
.lab-chart__data > summary .i { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease); }
.lab-chart__data[open] > summary .i { transform: rotate(90deg); }
.lab-chart__data > summary:hover { color: var(--red); }
.lab-chart__empty { display: grid; justify-items: center; gap: 8px; padding: 36px 16px; text-align: center; font-size: 14px; color: var(--grey); }
.lab-chart__empty .i { width: 26px; height: 26px; color: var(--grey-2); }

.lab-qc { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; background: var(--panel); text-align: center; }
.lab-qc__body { display: grid; justify-items: center; gap: 6px; margin-block: auto; }
.lab-qc__h { justify-self: stretch; font-family: var(--f-body); font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--grey); text-align: left; }
.lab-qc__ic { display: grid; place-items: center; width: 60px; height: 60px; margin-top: 6px; border-radius: 50%; background: #6B6B70; color: #fff; box-shadow: 0 8px 18px -10px rgba(16,16,16,.5); }
.lab-qc__ic .i { width: 32px; height: 32px; }
.lab-qc__state { margin-top: 4px; font-family: var(--f-display); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--ink); }
.lab-qc__txt { max-width: 30ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.lab-qc__meta { display: grid; gap: 10px; justify-self: stretch; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(16,16,16,.1); text-align: left; }
.lab-qc__meta p { display: grid; justify-items: start; gap: 1px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.lab-qc__k { font-size: 11.5px; font-weight: 600; color: var(--grey); }
.lab-qc--passed { background: var(--green-wash); }
.lab-qc--passed .lab-qc__ic { background: var(--green); box-shadow: 0 8px 18px -10px rgba(30,123,57,.8); }
.lab-qc--passed .lab-qc__state { color: var(--green); }
.lab-qc--failed { background: var(--red-wash); }
.lab-qc--failed .lab-qc__ic { background: var(--red-dk); }
.lab-qc--failed .lab-qc__state { color: var(--red-dk); }
.lab-qc--under_review { background: var(--amber-wash); }
.lab-qc--under_review .lab-qc__ic { background: #9A6A00; }
.lab-qc--under_review .lab-qc__state { color: var(--amber); }
/* Phones stack the QC panel under the chart: there it is a compact status row (icon beside the verdict), not a
   tall centred block - R4 keeps it a small companion to the chart. */
@media (max-width: 639px) {
  .lab-qc { text-align: left; }
  .lab-qc__body { grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "ic state" "ic txt" "meta meta"; justify-items: start; column-gap: 14px; row-gap: 2px; margin-block: 4px 0; }
  .lab-qc__ic { grid-area: ic; width: 52px; height: 52px; margin-top: 0; align-self: center; }
  .lab-qc__ic .i { width: 28px; height: 28px; }
  .lab-qc__state { grid-area: state; align-self: end; margin-top: 0; font-size: 20px; }
  .lab-qc__txt { grid-area: txt; max-width: none; }
  .lab-qc__meta { grid-area: meta; margin-top: 12px; }
}

/* soft red report strip */
.lab-report { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px 14px; margin-top: 12px; padding: 16px; border-radius: 16px; background: var(--red-wash); border: 1px solid #F6D3D6; }
.lab-report__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--red); box-shadow: 0 1px 4px rgba(216,11,25,.12); }
.lab-report__ic .i { width: 24px; height: 24px; }
.lab-report__txt { min-width: 0; }
.lab-report__h { font-family: var(--f-display); font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--red-dk); }
.lab-report__sum { margin-top: 3px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.lab-report__none { margin-top: 6px; font-size: 13px; color: var(--grey); }
.lab-report__docs { grid-column: 1 / -1; display: grid; gap: 8px; }
.lab-report__a { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 12px 8px 14px; border-radius: 12px; background: #fff; border: 1px solid #F1CBCF; color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease); }
.lab-report__a:hover { border-color: var(--red); box-shadow: 0 8px 20px -14px rgba(216,11,25,.7); }
.lab-report__a > .i { width: 20px; height: 20px; flex: none; }
.lab-report__a > .i:first-child { color: var(--red); }
.lab-report__a > .i:nth-of-type(2) { color: var(--grey); transition: transform var(--t-med) var(--ease); }
.lab-report__a:hover > .i:nth-of-type(2) { transform: translateX(3px); color: var(--red); }
.lab-report__al { display: grid; flex: 1; min-width: 0; }
.lab-report__al b { font-family: var(--f-display); font-weight: 600; font-size: 15px; line-height: 1.3; }
.lab-report__al span { font-size: 12.5px; line-height: 1.4; color: var(--grey); }
.lab-report__stamp { margin: 4px 2px 0; font-size: 12px; line-height: 1.4; color: var(--grey); }

/* section heads (gallery, materials) */
.lab-sh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.lab-sh__t { font-family: var(--f-display); font-weight: 600; font-size: 18px; line-height: 1.3; }
.lab-sh__a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: color var(--t-fast); }
.lab-sh__a .i { width: 17px; height: 17px; transition: transform var(--t-med) var(--ease); }
.lab-sh__a:hover { color: var(--red); }
.lab-sh__a:hover .i { transform: translateX(3px); }
.lab-sh__n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-left: 2px; padding: 0 6px; border-radius: var(--r-pill); background: var(--panel); font-size: 12px; font-variant-numeric: tabular-nums; }

/* more images: rail on mobile, grid on desktop; each image with its own upload time */
.lab-gal { margin-top: 28px; scroll-margin-top: calc(var(--hdr-h) + 12px); }
.lab-gal__rail { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter); }
.lab-gal__rail::-webkit-scrollbar { display: none; }
.lab-gal__i { flex: 0 0 158px; display: grid; gap: 6px; align-content: start; scroll-snap-align: start; }
.lab-gal__frame { position: relative; }
.lab-gal__a { aspect-ratio: 1 / 1.08; border-radius: 14px; }
.lab-gal__a:focus-visible { outline-offset: 2px; }
.lab-gal__cap { font-size: 12.5px; line-height: 1.4; color: var(--ink); font-weight: 500; }

/* materials used: compact tiles */
.lab-bmats { margin-top: 26px; }
.lab-bmats__list { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px; scroll-padding-inline: var(--gutter); scroll-snap-type: x mandatory; }
.lab-bmats__list::-webkit-scrollbar { display: none; }
/* R4 shows the batch's materials as a strip of compact tiles: two whole tiles and the edge of a third on a phone */
.lab-bmats__list > li { flex: 0 0 min(200px, 56vw); scroll-snap-align: start; }
.lab-mat--mini { height: 100%; grid-template-columns: 48px auto minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "th name name" "th k v" "th st st"; column-gap: 8px; align-items: center;
  padding: 8px 12px 8px 8px; background: #fff; border: 1px solid #ECECEE; border-radius: 14px; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease); }
.lab-mat--mini:hover { border-color: #D6D6DA; box-shadow: var(--shadow-card); }
.lab-mat--mini .lab-mat__th { width: 48px; height: 48px; border-radius: 10px; align-self: start; }
.lab-mat--mini .lab-mat__name { font-size: 14.5px; padding-right: 0; }
.lab-mat--mini .lab-mat__k { margin-top: 0; font-size: 11.5px; }
.lab-mat--mini .lab-mat__v { font-size: 14px; }
.lab-mat--mini .lab-mat__v small { font-size: 11px; }
.lab-mat--mini .lab-mat__st { margin-top: 4px; justify-self: start; }
.lab-mat--mini .lab-st { padding: 1px 8px 1px 6px; font-size: 11px; }
.lab-mat--mini { padding-right: 34px; }
.lab-mat--mini .lab-mat__chev { position: absolute; top: 50%; right: 8px; margin: -11px 0 0; }
.lab-mat--mini:hover .lab-mat__chev { color: var(--red); transform: translateX(2px); }

/* call band (in-flow) */
.lab-call { display: grid; gap: 16px; margin-top: 32px; padding: 20px; border-radius: var(--r-outer); background: var(--panel); }
.lab-call__t { font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1.3; }
.lab-call__b { margin-top: 4px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 52ch; }
.lab-call__act { display: grid; gap: 10px; }
.lab-call__act .btn { width: 100%; }

/* mobile call dock, coordinated with the calculator FAB via --lab-nav-h */
.lab-dock { display: none; }
@media (max-width: 767px) {
  /* The FAB (calc.css: right 16px, bottom 16px + safe area, 52px tall) shares this row: the call button
     ends before it (--lab-fab-w is measured by lab.js; the default fits the Thai label). */
  .lab-dock { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 54; height: calc(84px + var(--lab-safe));
    padding: 16px calc(max(16px, env(safe-area-inset-right, 0px)) + var(--lab-fab-w) + 10px) calc(16px + var(--lab-safe)) var(--gutter);
    background: rgba(255,255,255,.97); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -20px rgba(16,16,16,.45); }
  .lab-dock__call { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 16px; border-radius: var(--r-pill); background: var(--red); color: #fff;
    font-family: var(--f-display); font-weight: 500; font-size: 16px; line-height: 1.2; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(216,11,25,.55);
    transition: background var(--t-fast) var(--ease); }
  .lab-dock__call:hover { background: var(--red-dk); }
  .lab-dock__call .i { width: 20px; height: 20px; flex: none; }
  .lab-dock__call { container-type: inline-size; }
  .lab-dock__call__in { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
  @container (max-width: 176px) { .lab-dock__call__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
  .lab-dock__call b { font-weight: 600; font-variant-numeric: tabular-nums; }
}

/* ---------------------------------------------------------------- detail: wider layouts */
@media (min-width: 640px) {
  /* chart and QC side by side where space allows (spec §13.7) */
  .lab-dash { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "tabs tabs" "sum sum" "det det" "chart qc"; }
  .lab-dash--notabs { grid-template-areas: "sum sum" "chart qc"; }
  .lab-call { padding: 28px; }
  .lab-call__act { grid-auto-flow: column; justify-content: start; }
  .lab-call__act .btn { width: auto; }
}
@media (min-width: 768px) {
  .lab-bar__bl, .lab-bar__sl { display: inline; }
  .lab-bar__t { font-size: 20px; }
  .lab-idn__act { display: flex; flex-wrap: wrap; gap: 10px; }
  .lab-hero__frame { aspect-ratio: 2 / 1; }
  .lab-mpanel { padding: 22px 24px; }
  .lab-ms { grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); align-items: start; gap: 24px; }
  .lab-ms__dl { padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--line); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-sum__grid { padding: 24px 0 20px; }
  .lab-sum__c::before { top: -24px; }
  .lab-sum__k { font-size: 14px; }
  .lab-sum__b { font-size: 12.5px; }
  .lab-chart { padding: 20px 22px 16px; }
  .lab-qc { padding: 20px; }
  .lab-report { grid-template-columns: 52px minmax(0, 1fr); padding: 20px 22px; }
  .lab-report__ic { width: 52px; height: 52px; }
  .lab-gal__rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; overflow: visible; margin-inline: 0; padding: 0; }
  .lab-gal__i { min-width: 0; }
  .lab-bmats__list { display: grid; grid-template-columns: repeat(var(--mcols, 3), minmax(0, 1fr)); gap: 10px; overflow: visible; margin-inline: 0; padding: 0; }
  .lab-bmats__list > li { flex: none; }
}
@media (min-width: 1000px) {
  .lab-report { grid-template-columns: 52px minmax(0, 1fr) minmax(300px, 380px); align-items: center; }
  .lab-report__docs { grid-column: 3; }
}
/* media panel and identity side by side from tablet landscape up (at 1024 the full-width 2:1 photo alone
   filled the first view); the identity stacks id, times, facility like the desktop column */
@media (min-width: 960px) {
  .lab-bd__top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px; align-items: start; }
  .lab-hero__frame { aspect-ratio: 4 / 3; }
  .lab-idn { margin-top: 0; }
  .lab-idn__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "times" "fac"; row-gap: 0; }
  .lab-idn__times { margin-top: 8px; }
  .lab-idn__t { font-size: 40px; }
  .lab-idn__fac { justify-self: start; max-width: none; margin-top: 12px; padding-top: 0; text-align: left; font-size: 14px; }
}
@media (min-width: 1100px) {
  .lab-bd { padding-top: 14px; }
  .lab-bar { margin-bottom: 14px; }
  .lab-bd__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 3.6vw, 56px); }
  /* a wide R4 media panel (≈16:9) whose height matches the identity column beside it */
  .lab-hero__frame { aspect-ratio: 16 / 9; }
  .lab-idn { margin-top: 4px; gap: 14px; }
  .lab-idn__t { font-size: clamp(44px, 1.6rem + 2vw, 58px); }
  .lab-idn__fac { margin-top: 14px; }
  .lab-idn__mix { padding-left: 16px; }
  .lab-idn__mixl { font-size: 18px; }
  .lab-idn__desc { font-size: 14.5px; }
  /* measured two-column dashboard: tabs across; summary over chart on the left (7fr), the selected
     measurement's detail over the QC panel on the right (5fr). The detail spans the summary row and the top
     of the chart row; the QC panel takes whatever height remains beside the chart (last row is 1fr). */
  .lab-dash { margin-top: 44px; gap: 16px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "tabs tabs" "sum det" "chart det" "chart qc"; }
  .lab-dash--notabs { grid-template-rows: auto 1fr; grid-template-areas: "sum qc" "chart qc"; }
  .lab-dash > .lab-sum { align-self: start; }
  .lab-tabs--fit { display: flex; }
  .lab-tabs--fit .lab-tab { flex: 0 0 auto; min-width: 132px; padding: 0 24px; font-size: 15.5px; }
  .lab-mpanels, .lab-mpanel { height: 100%; }
  .lab-mpanel { padding: 22px 24px; }
  .lab-dash .lab-ms { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lab-dash .lab-ms__head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t v" "note v"; align-items: center; column-gap: 16px; }
  .lab-dash .lab-ms__t { grid-area: t; }
  .lab-dash .lab-ms__v { grid-area: v; }
  .lab-dash .lab-ms__note { grid-area: note; }
  .lab-dash .lab-ms__dl { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-sum__v .lab-big__n { font-size: 52px; }
  .lab-report { margin-top: 16px; }
  .lab-gal { margin-top: 44px; }
  .lab-gal__rail { grid-template-columns: repeat(var(--gcols, 4), minmax(0, 1fr)); gap: 16px; }
  .lab-bmats__list { gap: 12px; }
  .lab-mat--mini { grid-template-columns: 56px auto minmax(0, 1fr); padding: 10px 14px 10px 10px; column-gap: 12px; }
  .lab-mat--mini .lab-mat__th { width: 56px; height: 56px; }
  .lab-mat--mini .lab-mat__name { font-size: 16px; }
  .lab-mat--mini .lab-mat__v { font-size: 15px; }
  .lab-call { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .lab-bmats { margin-top: 36px; }
  .lab-call { margin-top: 44px; padding: 32px 36px; }
  .lab-call__t { font-size: 24px; }
}

/* Lab header lockup sizing now lives in chrome.css (.hdr--lab rules). */

/* ---------------------------------------------------------------- narrow phones (320-359px, and 200% text zoom)
   Every side-by-side pairing that needs ~170px a side stacks, so nothing has to split a word or an id to fit. */
@media (max-width: 359px) {
  /* material tiles and cards: one column with the stacked face (two 139px tiles would split "ทราย") */
  .lab-fmats__list, .lab-mats { grid-template-columns: minmax(0, 1fr); }
  .lab-mat--tile.lab-face, .lab-mat--card .lab-face { grid-template-columns: var(--lab-th) minmax(0, 1fr) auto; grid-template-rows: auto auto auto; grid-template-areas: "th name name" "th k k" "th v st"; }
  .lab-mat--tile .lab-mat__st, .lab-mat--card .lab-mat__st { margin-top: 0; align-self: center; }
  /* featured card: the id alone on its line, the status (and review-build demo) badges together under the mix */
  .lab-fcard { padding: 14px; }
  .lab-fcard__head { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "t t t" "mix mix mix" "qc demo ." "when when when"; column-gap: 6px; }
  .lab-fcard__qc, .lab-fcard__demo { justify-self: start; margin-top: 8px; }
  /* the docked calculator never sits at the stamp's height on these screens: the upload time takes the full width */
  .lab-page--nav .lab-fcard__cap { padding-right: 0; }
  /* batch identity: the facility moves under the times, left-aligned */
  .lab-idn__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "times" "fac"; }
  .lab-idn__fac { justify-self: start; max-width: none; margin-top: 8px; padding-top: 0; text-align: left; }
  /* standards: a slimmer index column gives the Thai body its measure back */
  .lab-std { grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 14px 14px 12px; }
  .lab-std__n { font-size: 14px; }
  /* call band: the number may drop under its label inside the button rather than push the button past the card */
  .lab-call { padding: 18px 16px; }
  .lab-call__act .btn { flex-wrap: wrap; white-space: normal; column-gap: 8px; row-gap: 0; padding: 6px 18px; }
  .lab-call__act .btn__num { white-space: nowrap; }
}

/* ---------------------------------------------------------------- keyboard focus never lands under the bottom chrome
   Focus scrolling aligns a target to the nearest edge; the fixed lab nav (+ calculator shoulder), the call dock and
   the tablet/desktop FAB would cover a control focused at the bottom edge. The header side is base.css's
   scroll-padding-top. */
@media (max-width: 767px) {
  html:has(> body.lab-page--nav) { scroll-padding-bottom: calc(64px + 62px + env(safe-area-inset-bottom, 0px) + 12px); }
  html:has(> body.lab-page--dock) { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px) + 12px); }
}
@media (min-width: 768px) {
  html:has(> body.lab-page) { scroll-padding-bottom: 96px; }
}

/* ---------------------------------------------------------------- phones held sideways (short landscape viewports)
   At 750 x 390 the portrait bottom chrome (64px nav + 62px calculator shoulder, or the 84px call dock) plus the
   header left ~160px of page. Here the bars are one slim row: the nav links set icon-beside-label with the
   calculator docked at the row's right end, and the call dock tightens to 64px. Side insets (notch) are kept clear. */
.lab-lnav ul { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
@media (max-width: 767px) {
  .lab-dock { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); }
}
@media (max-width: 767px) and (max-height: 500px) and (orientation: landscape) {
  .lab-page--nav { --lab-nav-h: 52px; --lab-shoulder-h: 0px; }
  .lab-lnav ul { height: 52px; padding-right: calc(max(12px, env(safe-area-inset-right, 0px)) + var(--lab-fab-w) + 12px); }
  .lab-lnav__a { display: flex; align-items: center; justify-content: center; gap: 8px; }
  .lab-lnav__a .i { width: 20px; height: 20px; }
  .lab-lnav__a::before { left: 24%; right: 24%; }
  .lab-lnav::before, .lab-lnav::after { display: none; }
  .lab-page--nav .calc-fab { bottom: calc(var(--lab-safe) + 4px); min-height: 44px; box-shadow: 0 6px 14px -8px rgba(216,11,25,.6); }
  .lab-page--nav .lab-fcard__cap { padding-right: 0; }
  html:has(> body.lab-page--nav) { scroll-padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 12px); }
  .lab-page--dock { padding-bottom: calc(72px + var(--lab-safe)); }
  .lab-dock { height: calc(64px + var(--lab-safe)); padding-top: 8px; padding-bottom: calc(8px + var(--lab-safe)); }
  .lab-dock__call { height: 48px; }
  .lab-page--dock .calc-fab { bottom: calc(8px + var(--lab-safe)); min-height: 48px; }
  .lab-page--dock .toast, .lab-page--dock .previewbar { bottom: calc(72px + var(--lab-safe)); }
  html:has(> body.lab-page--dock) { scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px); }
}

/* ---------------------------------------------------------------- entrance: one calm settle on first paint (text only, never the LCP image).
   Plays once, never gated on scroll or JS; reduced motion collapses it (base.css). */
@keyframes lab-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.lab-intro__h, .lab-intro__motto, .lab-intro__sup, .lab-intro__meta, .lab-ov > .lab-tabs, .lab-idn__row, .lab-idn__chips { animation: lab-rise 560ms var(--ease) both; }
.lab-intro__motto { animation-delay: 80ms; }
.lab-intro__sup, .lab-intro__meta { animation-delay: 120ms; }
.lab-ov > .lab-tabs, .lab-idn__chips { animation-delay: 180ms; }
/* Reduced motion: base.css shortens durations but keeps delays, which would hold these blocks invisible for up to
   180ms and then pop them in. Here nothing waits and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .lab-intro__h, .lab-intro__motto, .lab-intro__sup, .lab-intro__meta, .lab-ov > .lab-tabs, .lab-idn__row, .lab-idn__chips,
  .lab-panel:not([hidden]), .lab-mat__body { animation: none; }
}

/* ---------------------------------------------------------------- no published batch yet (production before real data) */
.lab-fempty { position: relative; overflow: hidden; display: grid; justify-items: start; gap: 12px; padding: 28px 22px; border-radius: var(--r-outer); background: var(--panel); isolation: isolate; }
.lab-fempty::after { content: ""; position: absolute; z-index: -1; right: -40px; top: -60px; width: 8px; height: 150%; border-radius: 8px; background: linear-gradient(180deg, rgba(216,11,25,0), rgba(216,11,25,.55) 40%, rgba(216,11,25,0)); transform: rotate(28deg); }
.lab-fempty__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #fff; color: var(--red); box-shadow: var(--shadow-card); }
.lab-fempty__ic .i { width: 28px; height: 28px; }
.lab-fempty__t { font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 1rem + 1.4vw, 32px); line-height: 1.2; }
.lab-fempty__b { max-width: 46ch; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.lab-fempty__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
@media (min-width: 1100px) { .lab-fempty { min-height: 420px; align-content: center; padding: 48px; } }

/* ---------------------------------------------------------------- one calculator shortcut in view at a time (tablet/desktop)
   lab.js sets .lab-fab-away on the floating calculator while an in-flow calculator button is on screen, or while a
   result value / share / call / report action passes under its corner (spec: the shortcut must not cover them).
   Phones keep it: there it is part of the local-nav / call-dock layout. visibility is delayed so the fade plays,
   and a hidden FAB is not focusable. Reduced motion: base.css collapses the fade to an instant switch. */
.lab-page .calc-fab { transition: background var(--t-fast) var(--ease), transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), opacity var(--t-med) var(--ease), visibility 0s linear 0s; }
/* Until lab.js has measured (first IntersectionObserver report) the tablet/desktop FAB waits unseen, so it never
   flashes in and straight back out on load. If lab.js never runs, it reveals itself after 1.5s. */
@media (min-width: 768px) {
  .js .lab-page .calc-fab:not(.lab-fab-ready) { animation: lab-fab-late 200ms var(--ease) 1.5s both; }
}
@keyframes lab-fab-late { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
.lab-page .calc-fab.lab-fab-away { opacity: 0; transform: translateY(14px) scale(.96); visibility: hidden; pointer-events: none;
  transition: background var(--t-fast) var(--ease), transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), opacity var(--t-fast) var(--ease), visibility 0s linear var(--t-fast); }


/* ==== pages.css ==== */
/* ==========================================================================
   PAGES module - construction, project, stories, story, about, lifestyle,
   lifestyle item, contact, search, 404.  Every class is prefixed pg-.
   Vocabulary from R1/R2/R3: hairline number kickers, Kanit headings, circle
   arrows, media-led white cards, one red call panel. White-led throughout.
   ========================================================================== */

.pg { --pg-sec: clamp(56px, 7.5vw, 120px); --pg-gap: clamp(16px, 2vw, 28px); --pg-rest: 1.025;
  /* side gutters that respect a landscape phone's notch (viewport-fit=cover): never less than --gutter */
  --pg-gl: max(var(--gutter), env(safe-area-inset-left, 0px)); --pg-gr: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.pg main .wrap { padding-inline: var(--pg-gl) var(--pg-gr); }
/* grid children may always shrink to the column (a search field, a filmstrip or a phone number never widens it) */
.pg :where(.pg-hero__grid, .pg-sthero, .pg-abhero, .pg-reel__grid, .pg-loc__grid, .pg-prose-grid, .pg-ab__grid, .pg-contact, .pg-chan__list, .pg-feat__grid, .pg-pgrid, .pg-svc__list, .pg-values, .pg-sgrid, .pg-lgrid, .pg-nf__grid, .pg-article > .wrap) > * { min-width: 0; }
/* in-page scrollers bleed to the screen edge but start and stop on the (safe) gutter */
.pg main .chips--scroll { margin-inline: calc(-1 * var(--pg-gl)) calc(-1 * var(--pg-gr)); padding-inline: var(--pg-gl) var(--pg-gr); scroll-padding-inline: var(--pg-gl) var(--pg-gr); }
/* photographs in cropped frames rest a hair over 1:1 so the 1-4px borders some source files carry (FB exports) never show at an edge */
.pg-frame img, .pg-pcard__media img, .pg-scard__media img, .pg-ftile__media img, .pg-lcard__media img, .pg-about-entry__media img, .pg-svc__media img,
.pg-fig__frame img, .pg-mosaic__a img, .pg-agal__a img, .pg-team__frame img { scale: var(--pg-rest); }
.pg main { overflow-x: clip; }

/* ---------------------------------------------------------------- kicker "01 ——" / "SPECIAL DROP ——" */
.pg-kicker { display: flex; align-items: center; gap: 12px; font-family: var(--f-body); font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--grey); }
.pg-kicker__n { color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.pg-kicker__t { min-width: 0; }
.pg-kicker--latin .pg-kicker__t { letter-spacing: .22em; text-transform: uppercase; font-size: 12px; }
.pg-kicker__rule { width: 40px; height: 1px; background: currentColor; opacity: .55; flex: none; }
.pg-kicker--red { color: var(--red-dk); }
.pg-kicker--red .pg-kicker__rule { background: var(--red); opacity: 1; }
.pg-kicker--white, .pg-kicker--white .pg-kicker__n { color: #fff; }

/* ---------------------------------------------------------------- section rhythm + heads */
.pg-sec { padding-block: var(--pg-sec) 0; }
.pg-shead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s5); flex-wrap: wrap; margin-bottom: clamp(20px, 2.8vw, 40px); }
.pg-shead__main { min-width: 0; max-width: 46rem; }
.pg-shead__t { margin-top: 12px; font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; }
.pg-shead__count { display: inline-block; vertical-align: .28em; margin-left: 6px; padding: 3px 11px; border-radius: var(--r-pill); background: var(--panel); font-family: var(--f-body); font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--grey); white-space: nowrap; }
.pg-shead__lead { margin-top: 10px; color: var(--grey); font-size: var(--fs-body); max-width: 40rem; }
.pg-shead__a { color: var(--red-dk); }
.pg-shead__a:hover { color: var(--red); }

.pg-lead { margin-top: clamp(16px, 1.8vw, 24px); max-width: 34rem; font-size: var(--fs-lead); line-height: 1.62; color: var(--ink-2); }
.pg-muted { color: var(--grey); }
/* kept Thai compounds / glued phrases (nobr() in the renderers) */
.pg .pg-nobr { white-space: nowrap; }
/* short text runs that are not <p> still get the "no lonely last word" line breaker */
/* (text-wrap-style, not the text-wrap shorthand: the shorthand would also reset the kept spans' nowrap) */
.pg :where(.pg-fig__cap, .pg-result__t, .pg-result__x, .pg-chan__soc a, .pg-mosaic__cap, .pg-nf__d, .pg-idcard__src, .pg-pending, .pg-callcard__note, .pg-vall__t, .pg-clip__from) { text-wrap-style: pretty; }
.pg-smeta time, .pg-facts time { white-space: nowrap; }

/* buttons in page content never push past a narrow column (320px, 200% zoom): the label wraps inside the pill,
   a phone number moves to its own line as one unit, and the pill grows instead of overflowing */
.pg main .btn { white-space: normal; flex-wrap: wrap; row-gap: 0; padding-block: 6px; }
@media (max-width: 379px) { .pg main .btn--lg { padding-inline: 18px; gap: 8px; } }

/* 44px hit areas for compact text links (the visible size stays compact; the hit area grows around it) */
.pg-crumbs .crumbs a { position: relative; }
.pg-crumbs .crumbs a::after { content: ""; position: absolute; inset: -6px -4px; }

/* ---------------------------------------------------------------- breadcrumbs */
.pg-crumbs .crumbs { padding-top: 0; margin-bottom: clamp(16px, 2.4vw, 32px); font-size: 13.5px; }
.pg-crumbs .crumbs li { display: inline-flex; align-items: center; min-height: 32px; }
.pg-crumbs .crumbs a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--t-fast); }
.pg-crumbs .crumbs a:hover { text-decoration-color: currentColor; }
.pg-crumbs [aria-current="page"] { color: var(--ink-2); font-weight: 500; }

/* ---------------------------------------------------------------- split hero */
.pg-hero { padding-block: clamp(20px, 3.2vw, 48px) clamp(8px, 2vw, 24px); }
.pg-hero__grid { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; }
.pg-hero__text { min-width: 0; }
.pg-hero__text > .demotag { margin-bottom: 18px; }
.pg-h1 { margin-top: 18px; font-size: clamp(2.5rem, 1.25rem + 4.3vw, 5.25rem); font-weight: 700; line-height: var(--lh-display); letter-spacing: 0; }
.pg-h1:lang(en) { letter-spacing: -.012em; }   /* optical tightening for Latin only - never on Thai */
.pg-hero__text > .pg-h1:first-child { margin-top: 0; }
.pg-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 40px); }
.pg-hero__actions .btn { flex: 0 1 auto; }
.pg-i-down { transform: rotate(90deg); }
.pg-hero__media { position: relative; min-width: 0; display: flex; justify-content: flex-end; }
.pg-hero__media > .pg-frame { flex: 1 1 auto; }
.pg-frame { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--panel); isolation: isolate; }
.pg-frame img, .pg-frame video { width: 100%; height: 100%; object-fit: cover; }
.pg-hero--text .pg-hero__grid { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 767px) {
  .pg-hero__actions .btn { flex: 1 1 100%; }
}

/* R1 split: the photograph is a square-cornered band - flush with the header, running off the right edge of the
   viewport, its inner edge feathered into the white page (the home/concrete heroes do the same). Phones: text first,
   then the photograph edge to edge (the R2 hero band). */
.pg-hero--split { container: pg-hero / inline-size; --pg-hero-h: clamp(420px, 56vw, 580px); }
.pg-hero--split .pg-frame--hero { border-radius: 0; aspect-ratio: 1; }
/* the band touches the viewport edge, so the edge-hiding overscan cannot scale the element past it: crop the source
   instead (object-view-box; browsers without it simply show the full frame) */
.pg-hero--split .pg-frame--hero img { scale: none; }
@supports (object-view-box: inset(1px)) { .pg-hero--split .pg-frame--hero img { object-view-box: inset(1.5%); } }
.pg-hero--split .pg-frame--hero.pg-frame--landscape { aspect-ratio: 4 / 3; }
@media (max-width: 767px) {
  .pg-hero--split { padding-bottom: 0; }
  .pg-hero--split .pg-hero__media { margin-inline: calc(-1 * var(--pg-gl)) calc(-1 * var(--pg-gr)); }
}
@media (min-width: 768px) {
  .pg-hero--split { padding-block: 0; }
  .pg-hero--split .pg-hero__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); align-items: stretch; min-height: var(--pg-hero-h); }
  /* the text block centres in the band; crumbs (detail pages) hold the top of the column */
  .pg-hero--split .pg-hero__text { display: flex; flex-direction: column; align-items: flex-start; padding-block: clamp(20px, 2.6vw, 40px) clamp(28px, 3.4vw, 56px); }
  .pg-hero--split .pg-hero__text > :first-child:not(.pg-crumbs) { margin-top: auto; }
  .pg-hero--split .pg-hero__text > .pg-crumbs { margin-bottom: auto; padding-bottom: 24px; }
  .pg-hero--split .pg-hero__text > :last-child { margin-bottom: auto; }
  .pg-hero--split .pg-hero__media { margin-right: calc(-1 * (var(--pg-gr) + max(0px, (100cqw - var(--maxw)) / 2))); }
  /* the band's height comes from the text column / --pg-hero-h, never from the photograph's own proportions */
  .pg-hero--split .pg-frame--hero, .pg-hero--split .pg-frame--hero.pg-frame--landscape { aspect-ratio: auto; }
  .pg-hero--split .pg-frame--hero > picture, .pg-hero--split .pg-frame--hero > img { position: absolute; inset: 0; display: block; }
  .pg-hero--split .pg-frame--hero::after { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 0; width: min(22%, 140px); pointer-events: none;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.72) 30%, rgba(255,255,255,.28) 64%, rgba(255,255,255,0) 100%); }
}
@media (min-width: 1100px) {
  .pg-hero--split { --pg-hero-h: clamp(520px, calc(100svh - var(--hdr-h) - 150px), 680px); }
}
/* very wide screens: the bleed grows with the viewport, so the text column takes a larger share and the band a
   little more height - the photograph keeps a near-square window instead of a letterbox of a portrait source */
@media (min-width: 1600px) {
  .pg-hero--split { --pg-hero-h: clamp(560px, calc(100svh - var(--hdr-h) - 150px), 740px); }
  .pg-hero--split .pg-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}

/* R1 uppercase stack laid on the photograph as a white label */
.pg-tagstack { font-family: var(--f-body); font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--ink); }
.pg-tagstack--latin { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.pg-tagstack__rule { display: block; width: 22px; height: 2.5px; background: var(--red); border-radius: 2px; margin-bottom: 10px; }
.pg-hero__tag { position: absolute; left: 0; bottom: 0; z-index: 1; padding: 16px 20px 16px 0; background: #fff; border-top-right-radius: var(--r-card); }
.pg-hero__tag::before { content: ""; position: absolute; inset: 0 auto 0 -1px; width: 1px; background: #fff; }
@media (max-width: 767px) { .pg-hero__tag { padding: 12px 16px 10px var(--pg-gl); font-size: 10.5px; } }

/* R1 handwritten annotation with a red underline stroke */
.pg-hand { position: relative; display: inline-block; font-size: clamp(17px, 1rem + .5vw, 24px); line-height: 1.25; color: var(--ink-2); transform: rotate(-6deg); transform-origin: left bottom; }
.pg-hand__line { display: block; width: 72%; height: 10px; margin-top: 4px; color: var(--red); }

/* ---------------------------------------------------------------- motion (CSS only; honours reduced motion via base.css) */
@media (prefers-reduced-motion: no-preference) {
  .pg-hero__text > * { animation: pg-rise 560ms var(--ease) both; }
  .pg-hero__text > :nth-child(2) { animation-delay: 60ms; }
  .pg-hero__text > :nth-child(3) { animation-delay: 120ms; }
  .pg-hero__text > :nth-child(4) { animation-delay: 180ms; }
  .pg-hero__text > :nth-child(n+5) { animation-delay: 240ms; }
  .pg-hero__media .pg-frame { animation: pg-fade 520ms var(--ease) both; }
  .pg-hero__media .pg-frame img { animation: pg-settle 1400ms cubic-bezier(.16,.84,.3,1) both; }
  .pg-hero--split .pg-hero__media .pg-frame img { animation-name: pg-settle-view; }
  @supports (animation-timeline: view()) {
    .pg-drift img { animation: pg-drift linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  }
}
/* list card -> detail hero: cross-document morph (names set inline per record; reduced motion turns navigation transitions off in base.css) */
.pg-pcard__media, .pg-scard__media, .pg-ftile__media, .pg-lcard__media, .pg-frame--hero { view-transition-class: pg-morph; }
::view-transition-group(*.pg-morph) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
::view-transition-old(*.pg-morph), ::view-transition-new(*.pg-morph) { height: 100%; object-fit: cover; }
@keyframes pg-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pg-settle { from { scale: 1.07; } to { scale: var(--pg-rest); } }
@keyframes pg-settle-view { from { object-view-box: inset(5.5%); } to { object-view-box: inset(1.5%); } }
@keyframes pg-drift { from { scale: 1.09; } to { scale: var(--pg-rest); } }

/* ---------------------------------------------------------------- the red call panel (every PAGES page) */
.pg-call { padding-block: var(--pg-sec) 0; }
.pg-call__in { position: relative; overflow: hidden; display: grid; gap: clamp(24px, 3vw, 40px); align-items: center; padding: clamp(28px, 5vw, 72px); border-radius: var(--r-outer); background: var(--red); color: #fff; isolation: isolate; }
.pg-call__in::after { content: ""; position: absolute; z-index: -1; right: -120px; top: 50%; width: 460px; height: 460px; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle, transparent 0 38%, rgba(255,255,255,.09) 38% 38.6%, transparent 38.6% 55%, rgba(255,255,255,.07) 55% 55.5%, transparent 55.5% 72%, rgba(255,255,255,.05) 72% 72.4%, transparent 72.4%); }
.pg-call__k { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); }
.pg-call__k .i { width: 16px; height: 16px; }
.pg-call__t { margin-top: 10px; color: #fff; font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.75rem); line-height: 1.2; max-width: 22ch; }
.pg-call__b { margin-top: 10px; color: rgba(255,255,255,.92); max-width: 36rem; }
.pg-call__act { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.pg-call__num { display: inline-flex; align-items: center; min-height: 48px; font-family: var(--f-display); font-weight: 700; font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.5rem); line-height: 1.1; letter-spacing: .005em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; border-radius: 8px; }
.pg-call__num:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.pg-call__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-call .btn--red { background: #fff; color: var(--red-dk); }
.pg-call .btn--red:hover { background: var(--ink); color: #fff; }
.pg-call .pg-copy { background: transparent; color: #fff; border-color: rgba(255,255,255,.62); }
.pg-call .pg-copy:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.pg-call :where(a, button):focus-visible { outline-color: #fff; }
@media (min-width: 900px) {
  .pg-call__in { grid-template-columns: minmax(0, 1fr) auto; }
  .pg-call__act { justify-items: end; text-align: right; }
}
@media (max-width: 767px) {
  .pg-call__btns { width: 100%; }
  .pg-call__btns .btn { flex: 1 1 100%; }
}
/* copy-number needs JS; without it the visible number is the fallback */
.no-js .pg-copy { display: none; }

/* ---------------------------------------------------------------- pending / preparation line */
.pg-pending { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: var(--fs-sm); line-height: 1.55; color: var(--grey); }
.pg-pending .i { width: 18px; height: 18px; margin-top: 2px; color: var(--grey-2); }
.pg-pending--solo { padding: var(--s5); border-radius: var(--r-panel); background: var(--panel); margin-top: 0; }
.pg-empty { max-width: 40rem; }

/* ---------------------------------------------------------------- figures, viewer thumbs, YouTube facades, video */
.pg-fig { margin: 0; min-width: 0; }
.pg-fig__frame { display: block; width: 100%; border-radius: var(--r-card); overflow: hidden; background: var(--panel); }
.pg-fig__frame img, .pg-fig__frame video { width: 100%; height: 100%; object-fit: cover; }
.pg-fig__cap { margin-top: 10px; font-size: var(--fs-sm); line-height: 1.5; color: var(--grey); }
.pg-clip .pg-fig__cap { display: grid; gap: 4px; }
.pg-fig .stamp { margin-top: 6px; }

.pg-yt { border-radius: var(--r-card); aspect-ratio: 16 / 9; background: #111; }
.pg-yt--portrait { aspect-ratio: 9 / 16; }
.pg-yt--square { aspect-ratio: 1; }
.pg-yt .yt__play { transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease); }
.pg-yt:hover .yt__play { transform: scale(1.06); background: var(--red-dk); }
.pg-yt__badge { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: var(--r-pill); background: rgba(10,10,10,.62); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4; }
.pg-yt__badge .i { width: 14px; height: 14px; }

.pg-video { display: block; width: 100%; height: 100%; background: #0b0b0b; object-fit: cover; }

/* ==========================================================================
   CONSTRUCTION  /construction
   ========================================================================== */

/* a focused native player: the ring goes on its rounded frame (the frame clips anything drawn on the video) */
.pg-reel__frame:has(video:focus-visible), .pg-fig__frame:has(video:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }

/* the playable reel */
.pg-reel { padding-block: var(--pg-sec) 0; }
.pg-reel__grid { display: grid; gap: clamp(20px, 3vw, 48px); align-items: center; }
/* heading first in reading order; on wide screens the player takes the left, its caption column the right */
@media (min-width: 1100px) { .pg-reel__player { grid-column: 1; grid-row: 1; } .pg-reel__text { grid-column: 2; grid-row: 1; } }
.pg-reel__frame { border-radius: var(--r-card); overflow: hidden; background: #0b0b0b; box-shadow: 0 30px 60px -40px rgba(16,16,16,.55); }
.pg-reel__frame video { width: 100%; height: 100%; object-fit: cover; }
.pg-reel__t { margin-top: 12px; font-size: var(--fs-h2); line-height: 1.2; }
.pg-reel__d { margin-top: 12px; color: var(--ink-2); max-width: 30rem; }
.pg-reel__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pg-reel__meta li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: var(--r-pill); background: var(--panel); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.pg-reel__meta .i { width: 15px; height: 15px; color: var(--grey); }
@media (min-width: 1100px) { .pg-reel__grid { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); } }

/* confirmed services */
.pg-svc__list { display: grid; gap: var(--pg-gap); }
@media (min-width: 900px) { .pg-svc__list:not(.pg-svc__list--solo) { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }
.pg-svc__item { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: var(--r-outer); background: var(--panel); }
.pg-svc__media { border-radius: 0; aspect-ratio: 4 / 3; }
.pg-svc__text { display: grid; align-content: center; justify-items: start; gap: 10px; padding: clamp(24px, 3.4vw, 56px); }
.pg-svc__n { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); line-height: 1; color: var(--red); font-variant-numeric: tabular-nums; }
.pg-svc__t { margin-top: 4px; font-size: var(--fs-h3); line-height: 1.25; }
.pg-svc__b { color: var(--ink-2); max-width: 32rem; }
.pg-svc__cta { margin-top: 10px; }
@media (min-width: 900px) {
  .pg-svc__list--solo .pg-svc__item { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .pg-svc__list--solo .pg-svc__media { aspect-ratio: auto; min-height: 420px; height: 100%; }
  .pg-svc__list--solo .pg-svc__t { font-size: var(--fs-h2); }
}

/* scope chip */
.pg-scope { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: var(--r-pill); background: var(--panel); color: #444447; font-size: 13px; font-weight: 600; line-height: 1.4; }
.pg-scope .i { width: 14px; height: 14px; }
.pg-scope:not(.pg-scope--unconfirmed) { background: var(--red-wash); color: var(--red-dk); }

/* project cards: R2 white-upper / image-lower; R3 rows below 768px */
.pg-pgrid { display: grid; gap: 12px; }
.pg-pcard { min-width: 0; }
.pg-pcard__a { position: relative; display: grid; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff;
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.pg-pcard__head { display: grid; align-content: start; justify-items: start; gap: 8px; min-width: 0; }
.pg-pcard__n { font-size: 12.5px; }
.pg-pcard__t { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.75rem); font-weight: 600; line-height: 1.24; }
.pg-pcard__scope { margin-top: 2px; }
.pg-pcard__head .demotag { white-space: normal; }
.pg-pcard__media { position: relative; overflow: hidden; background: var(--panel); }
.pg-pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.pg-pcard__arrow { position: absolute; right: 16px; bottom: 16px; }
.pg-pcard__chev { display: none; }
.pg-pcard__more { display: none; }
.pg-pcard__a:hover { border-color: #d3d3d7; box-shadow: var(--shadow-card); }
.pg-pcard__a:hover .pg-pcard__media img { transform: scale(1.045); }
.pg-pcard__a:hover .carrow--solidwhite { background: var(--red); color: #fff; border-color: var(--red); }
/* 900px+: the R1 gateway tile - photograph full-bleed, near-square corners, a tight mosaic gap, "01 ——" top-left,
   title / scope / "ดูผลงาน (→)" on a local foot gradient (same family as the Stories feature tiles) */
@media (min-width: 900px) {
  .pg-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, .8vw, 12px); }
  .pg-pcard__a { display: block; aspect-ratio: 4 / 5; border: 0; border-radius: var(--r-tile); background: var(--ink); color: #fff; isolation: isolate; }
  .pg-pcard__a:hover { box-shadow: none; }
  .pg-pcard__a:focus-visible { outline-offset: 4px; }
  .pg-pcard__media { position: absolute; inset: 0; z-index: -1; }
  .pg-pcard__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(8,8,8,.88) 0%, rgba(8,8,8,.6) 24%, rgba(8,8,8,.12) 50%, rgba(8,8,8,0) 66%, rgba(8,8,8,.1) 82%, rgba(8,8,8,.46) 100%); }
  .pg-pcard__arrow { display: none; }
  .pg-pcard__head { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 12px;
    padding: clamp(20px, 2.4vw, 36px); text-shadow: 0 1px 12px rgba(0,0,0,.3); }
  .pg-pcard__n { position: absolute; top: clamp(18px, 2.2vw, 30px); left: clamp(20px, 2.4vw, 36px); color: #fff; }
  .pg-pcard__n .pg-kicker__n { color: #fff; }
  .pg-pcard__n .pg-kicker__rule { background: #fff; opacity: .7; }
  .pg-pcard__t { color: #fff; font-size: clamp(1.625rem, 1.05rem + 1.3vw, 2.5rem); font-weight: 700; line-height: 1.16; max-width: 14ch; }
  .pg-pcard__scope { margin-top: -2px; }
  .pg-pcard__scope .pg-scope { background: rgba(255,255,255,.16); color: #fff; text-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .pg-pcard__head .demotag { position: absolute; top: clamp(14px, 1.8vw, 24px); right: clamp(14px, 1.8vw, 24px); text-shadow: none; }
  .pg-pcard__more { display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; font-weight: 600; }
  .pg-pcard__a:hover .carrow--white, .pg-pcard__a:focus-visible .carrow--white { background: #fff; color: var(--ink); }
  .pg-pgrid .pg-vall__a { border-radius: var(--r-tile); }
}
@media (max-width: 899px) {
  .pg-pcard__a { grid-template-columns: minmax(112px, 38%) minmax(0, 1fr) 28px; align-items: stretch; }
  .pg-pcard__media { grid-row: 1; grid-column: 1; min-height: 132px; }
  .pg-pcard__media img { position: absolute; inset: 0; }
  .pg-pcard__head { grid-row: 1; grid-column: 2; padding: 14px 4px 14px 16px; align-content: center; }
  .pg-pcard__n { display: none; }
  .pg-pcard__t { font-size: 1.1875rem; }
  .pg-pcard__arrow { display: none; }
  .pg-pcard__chev { display: grid; place-items: center; grid-row: 1; grid-column: 3; color: var(--ink); }
  .pg-pcard__chev .i { width: 20px; height: 20px; }
}
/* 320px (and 200% zoom): a narrower photograph leaves the title, scope and label a readable column */
@media (max-width: 359px) { .pg-pcard__a { grid-template-columns: minmax(92px, 32%) minmax(0, 1fr) 24px; } .pg-pcard__head { padding-left: 12px; } }
/* tablet portrait: the same R3 rows, just roomier */
@media (min-width: 600px) and (max-width: 899px) {
  .pg-pgrid { gap: 14px; }
  .pg-pcard__a { grid-template-columns: minmax(180px, 30%) minmax(0, 1fr) 48px; }
  .pg-pcard__media { min-height: 176px; }
  .pg-pcard__head { padding: 20px 8px 20px 26px; }
  .pg-pcard__n { display: flex; }
  .pg-pcard__t { font-size: 1.4375rem; }
}

/* filters (only rendered when real categories justify them) */
.pg-filters { margin-bottom: var(--s5); }

/* YouTube clips from projects */
.pg-clips__list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--pg-gl)) calc(-1 * var(--pg-gr)); padding-inline: var(--pg-gl) var(--pg-gr); scroll-padding-inline: var(--pg-gl) var(--pg-gr); }
.pg-clips__list::-webkit-scrollbar { display: none; }
.pg-clip { flex: none; width: min(64vw, 280px); scroll-snap-align: start; }
.pg-clip__from { display: inline-block; padding-block: 11px; font-weight: 600; color: var(--ink); }
.pg-clip__from .i { display: inline-block; vertical-align: -2px; margin-left: 4px; width: 15px; height: 15px; transition: transform var(--t-med) var(--ease); }
.pg-clip__from:hover { color: var(--red-dk); }
.pg-clip__from:hover .i { transform: translateX(3px); }
@media (min-width: 768px) {
  .pg-clips__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 280px)); gap: var(--pg-gap); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .pg-clip { width: auto; }
}

/* ==========================================================================
   DETAIL PAGES (project, story, lifestyle item): facts, galleries, prose
   ========================================================================== */
.pg-hero--detail .pg-h1 { font-size: clamp(2.125rem, 1.2rem + 3.4vw, 4.25rem); }
.pg-facts { display: grid; margin-top: clamp(20px, 2.4vw, 32px); max-width: 30rem; border-bottom: 1px solid var(--line); }
.pg-facts__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.pg-facts dt { font-size: 13.5px; color: var(--grey); }
.pg-facts dd { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; color: var(--ink); }
.pg-facts dd > .i { width: 16px; height: 16px; color: var(--grey); }

/* Galleries mix portrait photographs, landscape frames and 9:16 YouTube shorts. Each item carries its frame ratio
   (--r, set by galleryList), so from 768px a row is JUSTIFIED: widths in proportion to the ratios, one shared height,
   the row filled edge to edge - no ragged bottoms, no extra crop. A lone last item may grow at most 1.8x. */
.pg-gal__grid { display: grid; gap: var(--pg-gap); align-items: start; }
.pg-gal__hint { display: none; }
@media (min-width: 768px) {
  .pg-gal__grid { display: flex; flex-wrap: wrap; align-items: flex-start; --pg-gal-h: clamp(180px, 24vw, 360px); }
  .pg-gal__item { flex: var(--r, 1) 1 calc(var(--r, 1) * var(--pg-gal-h)); max-width: calc(var(--r, 1) * var(--pg-gal-h) * 1.8); min-width: 0; }
  .pg-gal__grid[data-count="1"] > .pg-gal__item { flex: 0 1 auto; width: min(100%, calc(var(--r, 1) * 520px)); max-width: none; }
}
/* one or two items on a wide screen: the heading sits beside them (same move as the clips row) instead of leaving a
   dead third column; the pair keeps one height (440px unless the screen is too narrow) */
@media (min-width: 1100px) {
  .pg-gal:has(.pg-gal__grid[data-count="1"], .pg-gal__grid[data-count="2"]) > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s8); align-items: start; }
  .pg-gal:has(.pg-gal__grid[data-count="1"], .pg-gal__grid[data-count="2"]) .pg-shead { position: sticky; top: calc(var(--hdr-h) + 32px); }
  .pg-gal__grid:is([data-count="1"], [data-count="2"]) { width: min(62vw, calc(var(--rsum, 1) * 440px + var(--pg-gap))); }
  .pg-gal__grid[data-count="1"] { width: min(62vw, calc(var(--rsum, 1) * 440px)); }
  .pg-gal__grid:is([data-count="1"], [data-count="2"]) > .pg-gal__item { max-width: none; }
  .pg-gal__grid[data-count="1"] > .pg-gal__item { width: 100%; }
}
/* phones: a filmstrip of ONE height, sized so the widest frame in this gallery still fits on screen with a peek */
@media (max-width: 767px) {
  .pg-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--pg-gl)) calc(-1 * var(--pg-gr)); padding-inline: var(--pg-gl) var(--pg-gr); scroll-padding-inline: var(--pg-gl) var(--pg-gr);
    --pg-strip-h: min(440px, calc((100vw - var(--pg-gl) - var(--pg-gr) - 28px) / var(--rmax, 1))); }
  .pg-rail::-webkit-scrollbar { display: none; }
  .pg-rail > * { flex: none; width: 78%; scroll-snap-align: start; }
  .pg-rail > .pg-gal__item { width: calc(var(--r, 1) * var(--pg-strip-h)); }
  .pg-rail[data-count="1"] > * { width: 100%; }
  .pg-gal__hint { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--grey); }
  .pg-gal__hint .i { width: 14px; height: 14px; }
}

.pg-prose-grid { display: grid; gap: var(--s5); }
@media (min-width: 1000px) { .pg-prose-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s8); } }
.pg-prose { max-width: 42rem; font-size: clamp(1rem, .96rem + .2vw, 1.125rem); line-height: 1.85; color: var(--ink-2); }
.pg-prose > * + * { margin-top: 1.1em; }
.pg-prose > .pg-prose__h { margin-top: 1.8em; font-size: var(--fs-h3); line-height: 1.3; color: var(--ink); }
.pg-prose__fig { margin-block: 1.6em; }
.pg-quote { margin-block: 1.6em; padding: 4px 0 4px 22px; border-left: 3px solid var(--red); }
.pg-quote p { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); line-height: 1.45; color: var(--ink); }
.pg-quote footer { margin-top: 8px; font-size: 14px; color: var(--grey); }
.pg-back { margin-top: clamp(28px, 4vw, 48px); }
.pg-back .tlink .i { transition: transform var(--t-med) var(--ease); }
.pg-back .tlink:hover .i, .pg-back-link:hover .i { transform: translateX(-3px); }

/* ==========================================================================
   STORIES  /stories  +  /stories/:slug
   ========================================================================== */
.pg-sthero { display: grid; gap: var(--s5); align-items: end; padding-bottom: clamp(8px, 2vw, 24px); }
.pg-sthero__aside { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.pg-sthero__count { display: flex; align-items: baseline; gap: 8px; color: var(--grey); font-size: 14px; }
.pg-sthero__num { font-family: var(--f-display); font-weight: 700; font-size: clamp(3.5rem, 2rem + 6vw, 8.5rem); line-height: .9; color: var(--red); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
@media (min-width: 900px) {
  .pg-sthero { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s8); }
  .pg-sthero__aside { flex-direction: column; align-items: flex-end; border-top: 0; padding-top: 0; text-align: right; gap: var(--s6); }
  .pg-sthero__aside .pg-tagstack__rule { margin-left: auto; }
}
.pg-sec--first { padding-top: clamp(32px, 4vw, 56px); }

.pg-smeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; line-height: 1.5; color: var(--grey); }
.pg-smeta__cat { font-weight: 600; color: var(--red-dk); }
.pg-smeta__dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
.pg-smeta__vid { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 7px; border-radius: var(--r-pill); background: var(--panel); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.pg-smeta__vid .i { width: 12px; height: 12px; }
.pg-smeta--light, .pg-smeta--light .pg-smeta__cat { color: #fff; }
.pg-smeta--light .pg-smeta__vid { background: rgba(255,255,255,.18); color: #fff; }
.pg-smeta--hero { font-size: 14px; }

/* featured tiles: R1 gateway tiles */
.pg-feat__grid { display: grid; gap: 12px; }
.pg-ftile { min-width: 0; }
.pg-ftile__a { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--r-card); background: var(--ink); color: #fff; isolation: isolate; }
.pg-ftile__media { position: absolute; inset: 0; z-index: -2; }
.pg-ftile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
/* localized readability gradient (R1 gateway tiles): deep at the foot for the title, a soft cap at the top so the white "01 ——" survives a bright photograph */
.pg-ftile__a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8,8,8,.9) 0%, rgba(8,8,8,.62) 36%, rgba(8,8,8,.1) 64%, rgba(8,8,8,.16) 82%, rgba(8,8,8,.52) 100%); }
.pg-ftile__body { text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.pg-ftile__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 10px; padding: clamp(20px, 3vw, 40px); }
.pg-ftile__n { position: absolute; top: clamp(18px, 2.4vw, 32px); left: clamp(20px, 3vw, 40px); display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.pg-ftile__n::after { content: ""; width: 36px; height: 1px; background: rgba(255,255,255,.7); }
.pg-ftile__t { color: #fff; font-size: clamp(1.75rem, 1.2rem + 1.9vw, 3rem); font-weight: 700; line-height: 1.16; max-width: 16ch; }
.pg-ftile__x { color: rgba(255,255,255,.92); max-width: 34rem; font-size: var(--fs-sm); }
.pg-ftile__more { display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; font-weight: 600; }
.pg-ftile .demotag { position: absolute; top: 16px; right: 16px; }
.pg-ftile__a:hover .pg-ftile__media img { transform: scale(1.04); }
.pg-ftile__a:hover .carrow--white { background: #fff; color: var(--ink); }
.pg-ftile__a:focus-visible { outline-offset: 4px; }
.pg-ftile__a { aspect-ratio: 4 / 5; }
@media (min-width: 768px) {
  .pg-feat__grid--2, .pg-feat__grid--3, .pg-feat__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pg-gap); }
  .pg-ftile__a { aspect-ratio: 4 / 5; }   /* tablet: two narrow tiles need height for the photo AND the text block */
  .pg-ftile--big { grid-column: 1 / -1; }
  .pg-ftile--big .pg-ftile__a { aspect-ratio: 16 / 9; }
}
@media (min-width: 900px) {
  /* the R1 mosaic: near-square corners and a tight gap, like the homepage gateway tiles */
  .pg-feat__grid--2, .pg-feat__grid--3, .pg-feat__grid--4 { gap: clamp(8px, .8vw, 12px); }
  .pg-ftile__a { border-radius: var(--r-tile); }
}
@media (min-width: 1100px) {
  .pg-ftile__a { aspect-ratio: 5 / 4; }
  .pg-ftile--big .pg-ftile__a { aspect-ratio: 21 / 9; }
}

/* story cards */
.pg-sgrid { display: grid; gap: clamp(28px, 3vw, 40px) var(--pg-gap); }
.pg-scard { min-width: 0; }
.pg-scard__a { display: grid; gap: 16px; align-content: start; height: 100%; }
.pg-scard__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-card); background: var(--panel); }
.pg-scard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease); }
.pg-scard__ph { display: grid; place-items: center; height: 100%; color: var(--grey-2); }
.pg-scard__body { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.pg-scard__t { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.625rem); font-weight: 600; line-height: 1.26; transition: color var(--t-fast); }
.pg-scard__x { color: var(--grey); font-size: var(--fs-sm); }
.pg-scard__more { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 600; font-size: 15px; color: var(--ink); }
.pg-scard__more .i { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease); }
.pg-scard__a:hover .pg-scard__media img { transform: scale(1.04); }
.pg-scard__a:hover .pg-scard__t, .pg-scard__a:hover .pg-scard__more { color: var(--red-dk); }
.pg-scard__a:hover .pg-scard__more .i { transform: translateX(3px); }
@media (min-width: 640px) { .pg-sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .pg-sgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-sgrid:has(> :nth-child(2):last-child), .pg-sgrid:has(> :only-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-sgrid:has(> :nth-child(2):last-child) .pg-scard__a, .pg-sgrid:has(> :only-child) .pg-scard__a { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  /* two cards side by side: the text hangs from the photograph's top edge, so both cards' lines start level */
  .pg-sgrid:has(> :nth-child(2):last-child) .pg-scard__body, .pg-sgrid:has(> :only-child) .pg-scard__body { padding-top: 4px; }
}

/* About entry (visible from Stories) */
.pg-about-entry { display: grid; overflow: hidden; border-radius: var(--r-outer); background: var(--panel); }
.pg-about-entry__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.pg-about-entry__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.pg-about-entry__body { display: grid; align-content: center; justify-items: start; gap: 12px; padding: clamp(24px, 4vw, 64px); }
.pg-about-entry__t { font-size: var(--fs-h2); line-height: 1.2; max-width: 18ch; }
.pg-about-entry__b { color: var(--ink-2); max-width: 30rem; }
.pg-about-entry__cta { display: inline-flex; align-items: center; gap: 14px; margin-top: 8px; font-family: var(--f-display); font-weight: 500; font-size: 17px; }
.pg-about-entry:hover .pg-about-entry__media img { transform: scale(1.035); }
.pg-about-entry:hover .carrow--outline { background: var(--ink); color: #fff; }
@media (min-width: 900px) { .pg-about-entry { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .pg-about-entry__media { aspect-ratio: auto; min-height: 400px; } }

/* story detail */
.pg-source { display: grid; gap: 6px; margin-top: clamp(18px, 2vw, 26px); font-size: 14px; color: var(--grey); }
.pg-source li { display: flex; align-items: flex-start; gap: 8px; }
.pg-source .i { width: 16px; height: 16px; margin-top: 3px; flex: none; }
.pg-article > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
.pg-article__videos { display: grid; gap: var(--pg-gap); justify-items: start; }
.pg-article__videos .pg-fig--portrait { width: min(100%, 380px); }
.pg-article__videos .pg-fig--landscape { width: 100%; }
.pg-article__gal .pg-shead__t { font-size: var(--fs-h3); }
/* one portrait video + text: the article reuses the hero's two columns, so the text hangs on the headline's
   left edge and the player sits under the cover photograph - one vertical axis down the whole page */
@media (min-width: 900px) {
  .pg-article:has(.pg-article__videos--one .pg-fig--portrait):has(.pg-article__prose) > .wrap { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); column-gap: clamp(28px, 4vw, 72px); align-items: start; }
  .pg-article:has(.pg-article__videos--one .pg-fig--portrait):has(.pg-article__prose) .pg-article__videos { grid-column: 2; grid-row: 1; justify-items: start; }
  /* a short text beside a tall portrait player sits on the player's centre line (as the hero text sits in its band)
     instead of hanging at the top over a column of dead white */
  .pg-article:has(.pg-article__videos--one .pg-fig--portrait):has(.pg-article__prose) .pg-article__prose { grid-column: 1; grid-row: 1; align-self: center; max-width: 34rem; }
  /* R1's short horizontal rule opens the text column */
  .pg-article:has(.pg-article__videos--one .pg-fig--portrait):has(.pg-article__prose) .pg-article__prose::before { content: ""; display: block; width: 40px; height: 2px; margin-bottom: 22px; background: var(--red); }
  .pg-article__gal, .pg-article .pg-back { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .pg-article__videos--many { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pg-article .pg-back { margin-top: 0; }
.pg-article__prose > p:first-child { font-size: var(--fs-lead); line-height: 1.75; color: var(--ink); }

/* ==========================================================================
   ABOUT  /about
   ========================================================================== */
.pg-abhero { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
.pg-abhero__text .pg-lead + .pg-lead { margin-top: 12px; }
@media (min-width: 1000px) { .pg-abhero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .pg-abhero--solo { grid-template-columns: minmax(0, 1fr); } }
.pg-idcard { padding: clamp(22px, 2.6vw, 36px); border: 1px solid var(--line); border-radius: var(--r-outer); background: #fff; box-shadow: var(--shadow-card); }
.pg-idcard__k { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 8px; border-radius: var(--r-pill); background: var(--green-wash); color: var(--green); font-size: 12.5px; font-weight: 600; }
.pg-idcard__k .i { width: 14px; height: 14px; }
.pg-idcard__t { margin-top: 12px; font-size: var(--fs-h3); line-height: 1.25; }
.pg-idcard__list { margin-top: 12px; }
.pg-idcard__row { display: grid; grid-template-columns: minmax(6.5rem, 34%) minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.pg-idcard__row dt { font-size: 13.5px; color: var(--grey); padding-top: 2px; }
.pg-idcard__row dd { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.pg-idcard__src { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--grey); }
.pg-idcard__src .i { width: 15px; height: 15px; margin-top: 2px; }
@media (max-width: 479px) { .pg-idcard__row { grid-template-columns: minmax(0, 1fr); } }
.pg-abhero__img { margin-top: clamp(32px, 5vw, 72px); aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .pg-abhero__img { aspect-ratio: 21 / 9; } }

html:has(.pg-toc) { scroll-padding-top: calc(var(--hdr-h) + 84px); }
.pg-toc { margin-top: clamp(24px, 3vw, 40px); position: sticky; top: var(--hdr-h); z-index: 5; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding-block: 10px; border-bottom: 1px solid var(--line); }
.pg-toc .chip { min-height: 44px; padding: 0 16px; font-size: 14px; background: #fff; }
.pg-toc .chip:hover { border-color: var(--ink); }

.pg-ab { padding-top: var(--pg-sec); }   /* anchor jumps clear header + index via html scroll-padding (above) */
.pg-ab__grid { display: grid; gap: var(--s5); }
@media (min-width: 1000px) { .pg-ab__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s8); align-items: start; } }
.pg-ab__t { margin-top: 12px; font-size: var(--fs-h2); line-height: 1.2; }
.pg-ab__count { margin-top: 8px; font-size: 14px; color: var(--grey); }
.pg-ab__body { display: grid; gap: var(--s6); }
.pg-ab__more { margin-top: 12px; }
/* module still being prepared by the client (review build only): one compact, clearly-labelled line - never a big empty box */
.pg-ab--pending { padding-top: clamp(40px, 5vw, 72px); }
.pg-prep { display: flex; align-items: flex-start; gap: 14px; max-width: 40rem; padding: 18px 22px; border: 1.5px dashed #CFCFD4; border-radius: var(--r-panel); background: #FAFAFB; }
.pg-prep__i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--grey); }
.pg-prep__i .i { width: 18px; height: 18px; }
.pg-prep__txt { display: grid; gap: 2px; min-width: 0; padding-top: 5px; }
.pg-prep__t { font-family: var(--f-display); font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--ink); }
.pg-prep__b { font-size: var(--fs-sm); color: var(--grey); }
@media (min-width: 1000px) { .pg-ab--pending .pg-ab__grid { align-items: center; } }
.pg-toc .pg-toc__pending { border-style: dashed; border-color: #CFCFD4; background: #FAFAFB; color: var(--grey); }
.pg-toc .pg-toc__pending .i { width: 14px; height: 14px; }

.pg-values { display: grid; gap: var(--pg-gap); }
@media (min-width: 640px) { .pg-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg-values__item { padding: 24px; border-radius: var(--r-panel); background: var(--panel); display: grid; gap: 8px; }
.pg-values__n { font-family: var(--f-display); font-weight: 700; font-size: 28px; line-height: 1; color: var(--red); }
.pg-values__item h3 { font-size: var(--fs-h3); }

.pg-mosaic { display: grid; gap: 10px; margin-top: clamp(28px, 3.4vw, 48px); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 42vw, 240px); grid-auto-flow: dense; }
.pg-mosaic__item { position: relative; min-width: 0; border-radius: var(--r-card); }
.pg-mosaic__item:first-child { grid-column: span 2; grid-row: span 2; }
.pg-mosaic__a { display: block; width: 100%; height: 100%; border-radius: inherit; }
.pg-mosaic__a img { width: 100%; height: 100%; object-fit: cover; }
.pg-mosaic__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 14px 12px; background: linear-gradient(to top, rgba(8,8,8,.72), rgba(8,8,8,0)); color: #fff; font-size: 13px; line-height: 1.4; pointer-events: none; border-radius: 0 0 var(--r-card) var(--r-card); }
.pg-mosaic--6 .pg-mosaic__item:nth-child(6), .pg-mosaic--4 .pg-mosaic__item:nth-child(4) { grid-column: span 2; }
@media (min-width: 768px) {
  .pg-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 17vw, 260px); gap: 12px; }
  .pg-mosaic--6 .pg-mosaic__item:nth-child(2), .pg-mosaic--6 .pg-mosaic__item:nth-child(5), .pg-mosaic--6 .pg-mosaic__item:nth-child(6) { grid-column: span 2; }
  .pg-mosaic--4 .pg-mosaic__item:nth-child(4) { grid-column: span 2; }
}

/* team photograph in the module's text column, at (nearly) its own proportions - people are never cropped into a banner */
.pg-team__fig { margin: 0; }
.pg-team__frame { display: block; border-radius: var(--r-card); overflow: hidden; }
.pg-team__frame img { width: 100%; height: 100%; object-fit: cover; }

.pg-tl { position: relative; display: grid; gap: var(--s6); padding-left: 28px; }
.pg-tl::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 2px; background: var(--line); border-radius: 2px; }
.pg-tl__item { position: relative; display: grid; gap: 6px 32px; }
.pg-tl__item::before { content: ""; position: absolute; left: -28px; top: 14px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--red); }
.pg-tl__year { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); line-height: 1.1; color: var(--red); font-variant-numeric: tabular-nums; }
.pg-tl__t { font-size: var(--fs-h3); line-height: 1.3; }
.pg-tl__body { display: grid; gap: 6px; justify-items: start; }
.pg-tl__body > p:not(.pg-tl__ok) { color: var(--ink-2); }
.pg-tl__ok { display: inline-flex; align-items: flex-start; gap: 6px; margin-top: 6px; padding: 4px 12px 4px 9px; border-radius: 12px; background: var(--green-wash); color: var(--green); font-size: 13px; font-weight: 600; line-height: 1.45; }
.pg-tl__ok .i { width: 14px; height: 14px; margin-top: 2px; flex: none; }
@media (min-width: 640px) { .pg-tl__item { grid-template-columns: 9rem minmax(0, 1fr); } }

.pg-agal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pg-agal__a { display: block; aspect-ratio: 1; }
.pg-agal__a img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .pg-agal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1100px) { .pg-agal { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.pg-about .pg-ab > .wrap > .pg-ab__head { margin-bottom: clamp(20px, 2.8vw, 36px); }

/* ==========================================================================
   LIFESTYLE  /lifestyle  +  /lifestyle/:slug
   ========================================================================== */
/* handwritten tagline as a small white sticker on the photograph (R1 lifestyle tile) */
.pg-hero__hand.pg-hand { position: absolute; top: clamp(14px, 2vw, 24px); right: max(clamp(14px, 2vw, 24px), calc(env(safe-area-inset-right, 0px) + 12px)); z-index: 1; padding: 14px 20px 10px; border-radius: 10px; background: #fff; box-shadow: 0 10px 26px -14px rgba(0,0,0,.45);
  transform: rotate(-4deg); transform-origin: right top; font-size: clamp(14px, .8rem + .45vw, 19px); line-height: 1.3; color: var(--ink); }
.pg-hero__hand.pg-hand .pg-hand__line { width: 64%; }

.pg-lgrid { display: grid; gap: clamp(36px, 5vw, 48px) var(--pg-gap); }
.pg-lcard { min-width: 0; }
.pg-lcard__a { display: grid; gap: 18px; align-content: start; }
.pg-lcard__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-card); background: var(--panel); }
.pg-lcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.pg-lcard__ph { display: grid; place-items: center; height: 100%; color: var(--grey-2); }
.pg-lcard__n { position: absolute; left: 16px; bottom: 14px; font-family: var(--f-display); font-weight: 700; font-size: 44px; line-height: 1; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.35); font-variant-numeric: tabular-nums; }
.pg-lcard .demotag { position: absolute; top: 14px; left: 14px; }
.pg-lcard__body { display: grid; justify-items: start; gap: 8px; }
.pg-lcard__t { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); font-weight: 700; line-height: 1.18; }
.pg-lcard__x { color: var(--grey); max-width: 30rem; }
.pg-lcard__more { display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; font-family: var(--f-display); font-weight: 500; font-size: 16px; }
.pg-lcard__a:hover .pg-lcard__media img { transform: scale(1.04); }
.pg-lcard__a:hover .carrow--outline { background: var(--red); border-color: var(--red); color: #fff; }
.pg-lcard__a:hover .pg-lcard__t { color: var(--red-dk); }
@media (min-width: 700px) { .pg-lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .pg-lgrid--3, .pg-lgrid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the hub's three collections step down like an editorial spread (deliberately not row-aligned) */
  .pg-lgrid--stagger .pg-lcard--2 { margin-top: clamp(48px, 6vw, 96px); }
  .pg-lgrid--stagger .pg-lcard--3 { margin-top: clamp(20px, 2.4vw, 36px); }
}

/* ==========================================================================
   CONTACT  /contact
   ========================================================================== */
.pg-notice { display: flex; align-items: flex-start; gap: 16px; margin-bottom: clamp(24px, 3vw, 40px); padding: 18px 22px; border-radius: var(--r-panel); background: var(--red-wash); border: 1px solid #F6C9CC; color: var(--ink-2); }
.pg-notice__i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: #fff; }
.pg-notice__i .i { width: 18px; height: 18px; }
.pg-notice__t { font-family: var(--f-display); font-weight: 600; font-size: 18px; color: var(--ink); line-height: 1.3; margin-bottom: 2px; }
.pg-contact { display: grid; gap: clamp(24px, 4vw, 72px); align-items: center; }
@media (min-width: 1000px) { .pg-contact { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.pg-callcard { position: relative; overflow: hidden; display: grid; justify-items: start; gap: 12px; padding: clamp(24px, 4vw, 52px); border-radius: var(--r-outer); background: var(--red); color: #fff; isolation: isolate; }
.pg-callcard::after { content: ""; position: absolute; z-index: -1; right: -140px; bottom: -180px; width: 440px; height: 440px; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 38%, rgba(255,255,255,.09) 38% 38.6%, transparent 38.6% 55%, rgba(255,255,255,.07) 55% 55.5%, transparent 55.5% 72%, rgba(255,255,255,.05) 72% 72.4%, transparent 72.4%); }
.pg-callcard__k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-family: var(--f-display); font-weight: 500; font-size: 18px; }
.pg-callcard__k .i { width: 20px; height: 20px; }
.pg-callcard__lbl { padding: 2px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.16); font-family: var(--f-body); font-size: 13px; font-weight: 500; }
.pg-callcard { container-type: inline-size; }
.pg-callcard__num { display: inline-flex; align-items: center; min-height: 48px; font-family: var(--f-display); font-weight: 700; font-size: clamp(2.1rem, 13.2cqi, 5.25rem); line-height: 1.05; letter-spacing: .005em; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; border-radius: 8px; }
.pg-callcard__num:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 10px; }
.pg-callcard__sub { color: rgba(255,255,255,.92); font-size: var(--fs-sm); max-width: 30rem; }
.pg-callcard__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; width: 100%; }
.pg-callcard .btn--red { background: #fff; color: var(--red-dk); }
.pg-callcard .btn--red:hover { background: var(--ink); color: #fff; }
.pg-callcard .pg-copy { background: transparent; color: #fff; border-color: rgba(255,255,255,.62); }
.pg-callcard .pg-copy:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.pg-callcard :where(a, button):focus-visible { outline-color: #fff; }
.pg-callcard__note { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.28); width: 100%; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.92); }
.pg-callcard__note .i { width: 16px; height: 16px; margin-top: 2px; flex: none; }
@media (max-width: 767px) { .pg-callcard__btns .btn { flex: 1 1 100%; } }

.pg-chan__list { display: grid; gap: 12px; }
@media (min-width: 768px) { .pg-chan__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pg-gap); } }
@media (min-width: 768px) and (max-width: 1099px) { .pg-chan__list--3 .pg-chan:last-child { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .pg-chan__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-chan { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px 16px; align-items: start; padding: clamp(18px, 2vw, 26px); border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.pg-chan__i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--red-wash); color: var(--red); }
.pg-chan__i .i { width: 20px; height: 20px; }
.pg-chan__b { min-width: 0; }
.pg-chan__k { font-size: 13.5px; color: var(--grey); }
.pg-chan__v { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
.pg-chan__v--mail { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); overflow-wrap: anywhere; word-break: break-word; }
.pg-chan__v:hover { color: var(--red-dk); text-decoration: underline; text-underline-offset: 5px; }
.pg-chan__copy { grid-column: 2; justify-self: start; min-height: 44px; }
.pg-chan__soc { display: grid; margin-top: 4px; }
.pg-chan__soc a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); }
.pg-chan__soc li:last-child a { border-bottom: 0; }
.pg-chan__soc a > .i:first-child { width: 20px; height: 20px; color: var(--red); }
.pg-chan__soc a:hover { color: var(--red-dk); }
.pg-ext { width: 14px !important; height: 14px !important; color: var(--grey); margin-left: auto; }

.pg-loc__grid { display: grid; gap: var(--pg-gap); align-items: stretch; }
@media (min-width: 900px) { .pg-loc__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.pg-loc__art { position: relative; overflow: hidden; min-height: 260px; aspect-ratio: 16 / 10; border-radius: var(--r-outer); background-color: var(--panel);
  background-image: radial-gradient(circle, #D2D2D7 1.2px, transparent 1.3px); background-size: 18px 18px; width: 100%; }
.pg-loc__ring { position: absolute; left: 50%; top: 50%; width: min(62%, 300px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px dashed rgba(216,11,25,.45); background: radial-gradient(circle, rgba(216,11,25,.2), rgba(216,11,25,.05) 62%, transparent 70%); }
.pg-loc__pt { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px #fff, 0 4px 14px rgba(0,0,0,.25); }
.pg-loc__pt--approx { background: #fff; border: 4px solid var(--red); box-shadow: 0 2px 10px rgba(0,0,0,.18); }
@media (min-width: 900px) { .pg-loc__art { aspect-ratio: auto; min-height: 380px; } }
/* Interactive Google map (company listing / confirmed entrance). Same frame as the diagram it replaces; a little
   taller on phones so the place card and the pin both fit. */
.pg-loc__map { position: relative; overflow: hidden; min-height: 300px; aspect-ratio: 4 / 3.4; border-radius: var(--r-outer); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.pg-loc__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 900px) { .pg-loc__map { aspect-ratio: auto; min-height: 420px; } }
.pg-loc__info { display: grid; align-content: center; justify-items: start; gap: 14px; padding: clamp(4px, 2vw, 24px) 0; }
.pg-loc__badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px 5px 10px; border-radius: var(--r-pill); background: var(--green-wash); color: var(--green); font-size: 13.5px; font-weight: 600; }
.pg-loc__badge--approx { background: var(--amber-wash); color: var(--amber); border: 1px solid var(--amber-line); }
.pg-loc__badge .i { width: 15px; height: 15px; }
.pg-loc__addr { font-style: normal; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); line-height: 1.4; color: var(--ink); max-width: 26ch; }
.pg-loc__note { color: var(--grey); font-size: var(--fs-sm); max-width: 32rem; }
.pg-loc__hours { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink-2); }
.pg-loc__hours .i { width: 17px; height: 17px; color: var(--red); }
.pg-loc__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.pg-loc__btns .btn .pg-ext { margin-left: 2px; }
@media (max-width: 767px) { .pg-loc__btns .btn { flex: 1 1 100%; } }

/* ==========================================================================
   SEARCH  /search   +   404
   ========================================================================== */
.pg-h1--sm { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); }
.pg-q { color: var(--red); overflow-wrap: anywhere; }
.pg-sform { margin-top: clamp(20px, 2.6vw, 32px); }
.pg-sform__field { display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 6px 6px 6px 18px; border: 1.5px solid var(--ink); border-radius: var(--r-pill); background: #fff; transition: box-shadow var(--t-fast); }
/* the input hides its own outline, so the pill carries a full-strength keyboard ring (a 10% halo was ~1.2:1) */
.pg-sform__field:has(.pg-sform__input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.pg-sform__field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(16,16,16,.08); }
.pg-sform__field > .i { width: 22px; height: 22px; color: var(--grey); }
.pg-sform__input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; font-size: 18px; }
.pg-sform__input:focus-visible { outline: none; }
.pg-sform__input::-webkit-search-cancel-button { cursor: pointer; }
.pg-sform__bi { display: none; }
@media (max-width: 479px) {
  /* icon-only on phones; the label stays in the accessibility tree */
  .pg-sform .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pg-sform .btn { width: 48px; padding: 0; } .pg-sform__bi { display: block; }
}
.pg-search__count { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 18px; color: var(--grey); }
.pg-search__count b { color: var(--ink); font-weight: 600; }
.pg-search__kinds { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; }
.pg-results { margin-top: 20px; border-top: 1px solid var(--line); }
.pg-result { border-bottom: 1px solid var(--line); }
.pg-result__a { display: grid; grid-template-columns: minmax(0, 1fr) 36px; grid-template-areas: "kind go" "main go"; gap: 8px 12px; align-items: center; padding: 18px 4px; transition: background var(--t-fast); border-radius: 8px; }
.pg-result__kind { grid-area: kind; justify-self: start; padding: 2px 10px; border-radius: var(--r-pill); background: var(--panel); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.pg-result__kind--project, .pg-result__kind--story, .pg-result__kind--lifestyle { background: var(--red-wash); color: var(--red-dk); }
.pg-result__main { grid-area: main; display: grid; gap: 4px; min-width: 0; }
.pg-result__t { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem); line-height: 1.3; color: var(--ink); }
.pg-result__x { color: var(--grey); font-size: var(--fs-sm); }
.pg-result__url { font-size: 12.5px; color: var(--grey); overflow-wrap: anywhere; }
.pg-result__demo { display: flex; margin-block: 2px; }
.pg-result__go { grid-area: go; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--ink); transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.pg-result__go .i { width: 16px; height: 16px; }
.pg-result__a:hover .pg-result__t { color: var(--red-dk); }
.pg-result__a:hover .pg-result__go { background: var(--red); border-color: var(--red); color: #fff; }
@media (min-width: 768px) { .pg-result__a { grid-template-columns: 7rem minmax(0, 1fr) 40px; grid-template-areas: "kind main go"; align-items: start; padding: 22px 8px; } .pg-result__kind { margin-top: 3px; } }
.pg-results mark, .pg-q mark { background: #FFE3E5; color: var(--red-dk); border-radius: 3px; padding: 0 2px; }
.pg-none { margin-top: 20px; padding: 22px 24px; border-radius: var(--r-panel); background: var(--panel); }
.pg-none__t { font-family: var(--f-display); font-weight: 600; font-size: 20px; color: var(--ink); overflow-wrap: anywhere; }
.pg-none__b { margin-top: 6px; color: var(--grey); }
.pg-search__more { margin-top: clamp(32px, 4vw, 48px); }
.pg-search__h { font-size: var(--fs-h3); margin-bottom: 12px; }
.pg-sections__list { border-top: 1px solid var(--line); }
.pg-sections__a { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 60px; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-weight: 600; font-size: 20px; }
.pg-sections__n { font-family: var(--f-body); font-size: 13px; color: var(--red); font-weight: 600; }
.pg-sections__a .i { width: 18px; height: 18px; color: var(--grey-2); transition: transform var(--t-med) var(--ease), color var(--t-med); }
.pg-sections__a:hover { color: var(--red-dk); }
.pg-sections__a:hover .i { transform: translateX(4px); color: var(--red); }

.pg-nf { padding-bottom: clamp(24px, 4vw, 64px); }
.pg-nf__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
@media (min-width: 1000px) { .pg-nf__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pg-nf__search { margin-top: clamp(24px, 3vw, 36px); max-width: 34rem; }
.pg-nf__label { font-size: 14px; font-weight: 600; color: var(--grey); }
.pg-nf__search .pg-sform { margin-top: 8px; }
.pg-nf__h { font-size: var(--fs-h3); margin-bottom: 12px; }
.pg-nf__list { border-top: 1px solid var(--line); }
.pg-nf__a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.pg-nf__n { font-size: 13px; font-weight: 600; color: var(--red); }
.pg-nf__txt { display: grid; gap: 2px; min-width: 0; }
.pg-nf__t { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.25; }
.pg-nf__d { font-size: 14px; color: var(--grey); }
.pg-nf__a:hover .pg-nf__t { color: var(--red-dk); }
.pg-nf__a:hover .carrow--outline { background: var(--ink); color: #fff; }

/* ==========================================================================
   refinements
   ========================================================================== */
/* view-all tile closing short "more" grids */
.pg-vall { min-width: 0; }
.pg-vall__a { display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; height: 100%; min-height: 180px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-card); background: var(--panel); border: 1px solid var(--line); transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
/* the closing tile carries the real size of the collection ("03 ผลงาน") so it never reads as an empty slab */
.pg-vall__count { display: flex; align-items: baseline; gap: 8px; margin-bottom: auto; color: var(--grey); font-size: 14px; }
.pg-vall__num { font-family: var(--f-display); font-weight: 700; font-size: clamp(3.5rem, 2.4rem + 3vw, 6rem); line-height: 1; color: var(--red); font-variant-numeric: tabular-nums; }
.pg-vall__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pg-vall__txt { display: grid; gap: 2px; min-width: 0; }
.pg-vall__t { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.2; color: var(--ink); }
.pg-vall__s { font-size: 14px; color: var(--grey); }
.pg-vall__a:hover { background: #fff; border-color: var(--ink); }
.pg-vall__a:hover .carrow--red { background: var(--red-dk); border-color: var(--red-dk); }
/* phones (and tablet-portrait project rows): a compact full-width row */
@media (max-width: 767px) { .pg-vall__a { min-height: 0; } .pg-vall__count, .pg-vall__s { display: none; } }
@media (min-width: 768px) and (max-width: 899px) { .pg-pgrid .pg-vall__a { min-height: 0; } .pg-pgrid .pg-vall__count, .pg-pgrid .pg-vall__s { display: none; } }
@media (min-width: 768px) { .pg-lgrid .pg-vall__a { min-height: 220px; } }
@media (max-width: 699px) {
  .pg-life--more .pg-lgrid { display: flex; gap: 14px; padding-block: 6px; margin-block: -6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--pg-gl)) calc(-1 * var(--pg-gr)); padding-inline: var(--pg-gl) var(--pg-gr); scroll-padding-inline: var(--pg-gl) var(--pg-gr); }
  .pg-life--more .pg-lgrid::-webkit-scrollbar { display: none; }
  .pg-life--more .pg-lgrid > li { flex: none; width: 74%; scroll-snap-align: start; }
  .pg-life--more .pg-vall__a { height: 100%; }
  .pg-life--more .pg-vall__count { display: flex; }   /* a tall tile inside the swipe rail keeps its count */
}

/* scroll rails: room for focus outlines inside the scroll box */
@media (max-width: 767px) { .pg-rail, .pg-clips__list { padding-block: 6px; margin-block: -6px; } }

/* related stories: a swipe rail on phones instead of a long stack */
@media (max-width: 639px) {
  .pg-slist--related .pg-sgrid { display: flex; gap: 14px; padding-block: 6px; margin-block: -6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--pg-gl)) calc(-1 * var(--pg-gr)); padding-inline: var(--pg-gl) var(--pg-gr); scroll-padding-inline: var(--pg-gl) var(--pg-gr); }
  .pg-slist--related .pg-sgrid::-webkit-scrollbar { display: none; }
  .pg-slist--related .pg-scard { flex: none; width: 78%; scroll-snap-align: start; }
}

/* story with a single portrait video: the text reads as the video's companion */
@media (min-width: 900px) {
  .pg-article:has(.pg-article__videos--one .pg-fig--portrait) .pg-article__prose { font-size: var(--fs-lead); line-height: 1.75; color: var(--ink); }
}

/* clips: heading beside a short row of portrait players on wide screens */
@media (min-width: 1100px) {
  .pg-clips:has(.pg-clips__list > :nth-child(-n+2):last-child) .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s8); align-items: start; }
  .pg-clips:has(.pg-clips__list > :nth-child(-n+2):last-child) .pg-shead { position: sticky; top: calc(var(--hdr-h) + 32px); }
  .pg-clips__list:has(> :nth-child(2):last-child), .pg-clips__list:has(> :only-child) { grid-template-columns: repeat(2, minmax(0, 300px)); }
}

/* contact: long email stays readable on phones */
@media (max-width: 479px) { .pg-chan__v--mail { font-size: 1rem; } }

/* search: count sentence + kind filter */
.pg-search__count { display: block; }
.pg-search__kinds { display: block; margin: 14px 0 0; }
.pg-search__kinds .chip { min-height: 44px; padding: 0 16px; font-size: 14px; }
/* the selected state comes from components.css (.chip[aria-current]); only the idle chips turn white here */
.pg-search__kinds .chip:not([aria-current]) { background: #fff; }
.pg-search__kinds .chip__unit { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Card rows that line up (subgrid). Story and lifestyle cards share their row tracks with their neighbours, so in
   any row - the 2- and 3-column grids and the phone swipe rails alike - the meta lines, titles, excerpts and the
   "อ่านต่อ / ดูรายละเอียด" links sit on common lines however long each card's copy runs. Spacing between rows is a
   margin on the card (the grid's row-gap would otherwise fall between the tracks inside each card), and the list
   pulls the last row's margin back in. Browsers without subgrid keep the plain stacked cards above.
   ========================================================================== */
@supports (grid-template-rows: subgrid) {
  /* story card: media / meta / title / excerpt / demo label / read more */
  .pg-sgrid { --pg-rowgap: clamp(28px, 3vw, 40px); row-gap: 0; margin-bottom: calc(-1 * var(--pg-rowgap)); }
  .pg-scard { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; margin-bottom: var(--pg-rowgap); }
  .pg-scard__a { grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0; height: auto; }
  .pg-scard__body { display: contents; }
  .pg-scard__media { grid-row: 1; }
  .pg-scard__body > * { justify-self: start; align-self: start; }
  .pg-scard__body > .pg-smeta { grid-row: 2; margin-top: 16px; }
  .pg-scard__t { grid-row: 3; margin-top: 6px; }
  .pg-scard__x { grid-row: 4; margin-top: 8px; }
  .pg-scard__body > .demotag { grid-row: 5; margin-top: 10px; }
  .pg-scard__more { grid-row: 6; margin-top: 8px; }

  /* lifestyle card: media / eyebrow / title / summary / details link */
  .pg-lgrid { --pg-rowgap: clamp(36px, 5vw, 48px); row-gap: 0; margin-bottom: calc(-1 * var(--pg-rowgap)); }
  .pg-lgrid > li { grid-row: span 5; margin-bottom: var(--pg-rowgap); }
  .pg-lcard { display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .pg-lcard__a { grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0; }
  .pg-lcard__body { display: contents; }
  .pg-lcard__media { grid-row: 1; }
  .pg-lcard__body > * { justify-self: start; align-self: start; }
  .pg-lcard__body > .pg-kicker { grid-row: 2; margin-top: 18px; }
  .pg-lcard__t { grid-row: 3; margin-top: 8px; }
  .pg-lcard__x { grid-row: 4; margin-top: 8px; }
  .pg-lcard__more { grid-row: 5; margin-top: 14px; }

  /* phone swipe rails become one-row grids so the cards can still share their tracks */
  @media (max-width: 639px) {
    .pg-slist--related .pg-sgrid { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; grid-template-rows: repeat(6, auto); column-gap: 14px; margin-bottom: -6px; }
    .pg-slist--related .pg-scard { width: auto; margin-bottom: 0; }
  }
  @media (max-width: 699px) {
    .pg-life--more .pg-lgrid { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; grid-template-rows: repeat(5, auto); column-gap: 14px; margin-bottom: -6px; }
    .pg-life--more .pg-lgrid > li { width: auto; margin-bottom: 0; }
  }

  @media (min-width: 1100px) {
    /* one or two stories: the card lays its photograph beside the text - no shared rows to keep */
    .pg-sgrid:is(:has(> :nth-child(2):last-child), :has(> :only-child)) > .pg-scard { display: block; grid-row: auto; }
    .pg-sgrid:is(:has(> :nth-child(2):last-child), :has(> :only-child)) .pg-scard__a { grid-template-rows: none; height: 100%; }
    .pg-sgrid:is(:has(> :nth-child(2):last-child), :has(> :only-child)) .pg-scard__a { align-items: stretch; }
    .pg-sgrid:is(:has(> :nth-child(2):last-child), :has(> :only-child)) .pg-scard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
    /* "อ่านต่อ" rests on the photograph's bottom edge, level in both cards */
    .pg-sgrid:is(:has(> :nth-child(2):last-child), :has(> :only-child)) .pg-scard__body > .pg-scard__more { margin-top: auto; }
    .pg-sgrid:is(:has(> :nth-child(2):last-child), :has(> :only-child)) .pg-scard__body > * { grid-row: auto; margin-top: 0; }
    /* the hub's staggered spread is deliberately off-row */
    .pg-lgrid--stagger { row-gap: var(--pg-rowgap); margin-bottom: 0; }
    .pg-lgrid--stagger > li { grid-row: auto; margin-bottom: 0; }
    .pg-lgrid--stagger .pg-lcard { display: block; }
    .pg-lgrid--stagger .pg-lcard__a { grid-template-rows: none; row-gap: 18px; }
    .pg-lgrid--stagger .pg-lcard__body { display: grid; gap: 8px; }
    .pg-lgrid--stagger .pg-lcard__body > * { grid-row: auto; margin-top: 0; }
    .pg-lgrid--stagger .pg-lcard__more { margin-top: 6px; }
  }
}