/* =========================================================
   RFID Today - stylesheet
   theme: "Dock light" - register: cinematic - display: Anuphan
   Tokens live in tokens.css; no raw hex belongs here except the hover steps
   that are simply one shade darker than their token.
   Order: base, home page, shared chrome, inner-page components.
   ========================================================= */

@import url("tokens.css?v=13");

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{
  background:var(--dock);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:var(--lh-thai);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--tag);color:var(--dock-2)}

/* the grain: what stops flat concrete reading as a default background */
body::after{
  content:"";position:fixed;inset:0;z-index:80;pointer-events:none;
  opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
section{overflow:hidden}

/* ---------- type: two worlds, deliberately empty middle ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:var(--display-weight);line-height:1.22;letter-spacing:.01em}
h1{font-size:clamp(34px,4.6vw,64px);line-height:1.14}
h2{font-size:clamp(28px,3.8vw,48px);max-width:24ch}
h3{font-size:clamp(20px,2vw,27px)}
.lede{font-size:clamp(17px,1.4vw,20px);color:var(--ink-2);max-width:58ch;line-height:1.7}
/* Thai has no spaces, so the browser will happily split a phrase like
   "ให้เป็น" across two lines. Lock the phrases that must stay whole. */
.nb{white-space:nowrap}

/* the micro world: Latin only, because Thai has no uppercase and hates tracking */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:10px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;
  color:var(--tag-ink);margin-bottom:20px;line-height:1;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--tag)}
.eyebrow.on-night{color:var(--tag-soft)}
.eyebrow.on-night::before{background:var(--tag-soft)}
.micro{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);font-weight:600}

/* ---------- the pill, the only button, three skins ---------- */
.pill{
  display:inline-flex;align-items:center;gap:12px;
  border-radius:var(--r-control);padding:13px 10px 13px 26px;
  font-size:12px;font-weight:600;letter-spacing:.02em;
  border:1px solid var(--line);color:var(--ink);
  transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease);
  min-height:46px;
  /* a button label is one line or it is not a button: the header CTA broke into
     two lines once the bar was crowded */
  white-space:nowrap;
}
.pill .dot{
  width:30px;height:30px;border-radius:50%;background:rgba(21,27,33,.07);
  display:grid;place-items:center;font-size:13px;
  transition:transform .5s var(--ease);
}
.pill:hover .dot{transform:translateX(3px)}
/* the single next action, in the logo blue. One per screen. */
.pill.go{background:var(--steel);border-color:var(--steel);color:#F2F6FD}
/* a white arrow on a pale white circle measured 1.04:1, so the well goes dark */
.pill.go .dot{background:rgba(9,20,48,.3)}
.pill.go:hover{background:var(--steel-hover);border-color:var(--steel-hover)}
.pill.light{border-color:rgba(231,236,238,.5);color:var(--night-ink)}
.pill.light .dot{background:rgba(231,236,238,.14)}
.pill.light:hover{background:rgba(231,236,238,.1)}
.pill:focus-visible{outline:none;box-shadow:0 0 0 2px var(--tag-soft)}

/* ---------- provenance chips: the honesty system ---------- */
.prov{
  position:absolute;left:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:var(--r-control);
  font-size:10px;font-weight:600;letter-spacing:.12em;
  background:rgba(16,22,27,.72);color:var(--night-ink);
  backdrop-filter:blur(8px);border:1px solid rgba(231,236,238,.16);
}
/* a real photograph is the only thing allowed to wear the tag orange */
.prov.real{border-color:var(--tag);color:#FFD9C4}
.prov.real::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--tag-soft)}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(238,241,242,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.hdr .brand{display:inline-flex;align-items:center;min-height:44px}
.hdr img{height:38px;width:auto}
.hnav{display:flex;gap:4px;font-size:14px;color:var(--ink-2)}
/* the hovered and current link both wear the same soft blue pill, so the
   hover state is a preview of where you are about to be */
.hnav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border-radius:var(--r-control);
  transition:color .3s var(--ease),background .3s var(--ease);
}
.hnav a:hover{color:var(--steel-ink);background:var(--steel-wash)}
.hnav a[aria-current="page"]{color:var(--steel-ink);background:var(--steel-wash);font-weight:600}
.hnav a:focus-visible{outline:none;box-shadow:0 0 0 2px var(--steel)}
.hdr .pill{padding:10px 8px 10px 20px;min-height:44px;font-size:11px}
@media(max-width:900px){.hnav{display:none}}
@media(max-width:520px){.hdr .pill{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--night);color:var(--night-ink);isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:0}
/* the photograph carries most of the light now; the scrim only has to protect
   the column the text actually sits in */
.hero__bg img{
  width:100%;height:100%;object-fit:cover;
  opacity:.82;filter:contrast(1.14) saturate(1.18) brightness(1.06);
}
/* Measured, not eyeballed: with the brighter photo, the worst pixel under the
   headline reached rgb(128,132,134) and dropped it to 3.17:1. The scrim stays
   dense across the text column (0 to ~55%) and only clears after it. */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(16,22,27,.94) 0%,
    rgba(16,22,27,.90) 34%,
    rgba(16,22,27,.82) 55%,
    rgba(16,22,27,.30) 76%,
    rgba(16,22,27,.55) 100%);
}
/* on a phone the copy spans the whole width, so the gradient becomes vertical
   and stays dense behind the text instead of clearing the right-hand side */
@media(max-width:860px){
  /* denser than the desktop scrim on purpose: the copy runs the full width
     here, so there is no clear side to escape to. Measured at 390px, .78
     left the lede at 4.21:1 and the red keyword at 3.84:1. */
  .hero__bg::after{
    background:linear-gradient(180deg,rgba(16,22,27,.91) 0%,rgba(16,22,27,.88) 55%,rgba(16,22,27,.93) 100%);
  }
}
.hero .wrap{position:relative;z-index:1;padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(48px,6vw,88px)}
.hero h1{color:var(--night-ink);max-width:19ch;text-wrap:balance;text-shadow:0 2px 16px rgba(16,22,27,.6)}
.hero h1 .accent{color:var(--tag-soft)}
.hero .lede{color:var(--night-ink-2);margin-top:22px;max-width:56ch;text-shadow:0 1px 12px rgba(16,22,27,.65)}
/* the capabilities the company leads with, lifted out of the paragraph.
   Emphasis only: none of these colours is ever used for something clickable,
   because on this page anything you can press is blue. */
.hero .lede .kw{font-weight:600}
.hero .lede .kw--rfid{color:var(--kw-red)}
.hero .lede .kw--io{color:var(--tag-soft)}
.hero .lede .kw--data{color:var(--kw-teal)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__prov{position:static;margin-top:30px;display:inline-flex}
/* the four fields the company actually works in, stated in the hero itself */
.hero__scope{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;
}
.hero__scope span{
  padding:7px 14px;border-radius:var(--r-control);font-size:12.5px;font-weight:500;
  border:1px solid var(--night-line);color:var(--night-ink);background:rgba(231,236,238,.06);
}

/* ---------- stat row ---------- */
.stats{background:var(--dock-2);border-bottom:1px solid var(--line-soft)}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);padding-block:clamp(32px,4vw,54px)}
.stat__num{font-family:var(--serif);font-weight:var(--display-weight);font-size:clamp(34px,3.4vw,52px);line-height:1;color:var(--ink);display:block}
.stat__label{display:block;margin-top:10px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
@media(max-width:640px){
  .stats .wrap{grid-template-columns:1fr;gap:22px}
  .stats .stat{display:flex;align-items:baseline;gap:16px}
  .stat__label{margin-top:0}
}

/* ---------- generic band ---------- */
.band{padding-block:var(--band)}
.band--alt{background:var(--dock-2)}
.head{margin-bottom:clamp(28px,3.4vw,48px)}
.head .lede{margin-top:16px}
.frame{position:relative;border-radius:var(--r-media);overflow:hidden;background:var(--dock-3)}
.frame img{width:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.3s var(--ease)}
.frame:hover img{transform:scale(1)}

/* ---------- what the company actually does: four fields ---------- */
.fields{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.field{
  position:relative;background:var(--dock-2);border:1px solid var(--line-soft);
  border-radius:var(--r-media);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.field:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.field__media{position:relative;overflow:hidden;background:var(--dock-3)}
.field__media img{aspect-ratio:16/10}
.field__body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.field__body h3{font-size:19px;margin-bottom:8px}
.field__body p{font-size:14px;color:var(--ink-2);line-height:1.65;flex:1}
.field__link{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--tag-ink);min-height:24px}
.field__link::after{content:"";position:absolute;inset:0;z-index:3;border-radius:var(--r-media)}
.field__link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .4s var(--ease)}
.field:hover .field__link svg{transform:translateX(4px)}
.field:has(.field__link:focus-visible){box-shadow:0 0 0 2px var(--tag-soft)}
@media(max-width:1000px){.fields{grid-template-columns:repeat(2,1fr)}}
/* stays two up on a phone: four stacked cards with photos cost about two and a
   half screens of scroll, and density is respect on mobile */
@media(max-width:560px){
  .fields{gap:10px}
  .field__body{padding:14px 15px 17px}
  .field__body h3{font-size:16px;margin-bottom:6px}
  .field__body p{font-size:13px;line-height:1.55}
  .field__link{margin-top:12px;font-size:11.5px}
  .field__media img{aspect-ratio:4/3}
}

/* ---------- SmartWMS spotlight, the centre of the argument ---------- */
.wms{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.wms__media{display:grid;gap:clamp(10px,1.2vw,14px)}
.wms__media .frame:first-child img{aspect-ratio:16/9}
.wms__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,14px)}
.wms__pair img{aspect-ratio:4/3}
.wms__list{list-style:none;display:grid;gap:0;margin-top:26px}
.wms__list li{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 0;border-top:1px solid var(--line-soft);font-size:14.5px;color:var(--ink-2);line-height:1.6;
}
.wms__list li:last-child{border-bottom:1px solid var(--line-soft)}
.wms__list svg{width:19px;height:19px;flex-shrink:0;margin-top:3px;stroke:var(--tag-ink);fill:none;stroke-width:2}
.wms__list b{color:var(--ink);font-weight:600}
@media(max-width:900px){.wms{grid-template-columns:1fr}}

/* ---------- solutions rail ---------- */
.rail__top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.rail__hint{display:flex;align-items:center;gap:14px}
.arrows{display:flex;gap:8px}
.arrows button{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:background .4s var(--ease),border-color .4s var(--ease);
}
.arrows button:hover{background:var(--dock-3);border-color:var(--line-strong)}
.arrows button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--tag-soft)}
.arrows svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.8}
.railwrap{position:relative}
.railwrap.is-scrollable::after{
  content:"";position:absolute;top:0;right:0;bottom:16px;width:80px;pointer-events:none;
  background:linear-gradient(90deg,rgba(247,248,249,0),var(--dock-2));
}
.rail{
  display:flex;gap:clamp(12px,1.4vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:16px;touch-action:pan-y;scrollbar-width:thin;
}
.rail::-webkit-scrollbar{height:4px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.card{
  position:relative; /* anchor for the stretched link below */
  flex:0 0 clamp(232px,25vw,296px);scroll-snap-align:start;
  background:var(--dock);border:1px solid var(--line-soft);border-radius:var(--r-media);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.card__media{position:relative;overflow:hidden;background:var(--dock-3)}
.card__media img{aspect-ratio:16/10}
/* two screenshots in one card: the aspect ratio moves to the container so this
   card stays exactly as tall as the others in the rail */
.card__media--split{aspect-ratio:16/10;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.card__media--split img{aspect-ratio:auto;width:100%;height:100%;object-fit:cover}
/* when the two halves have different provenance (a render beside a photograph)
   each half carries its own chip, so one label can never vouch for both */
.split-cell{position:relative;overflow:hidden;min-width:0}
.split-cell .prov{left:6px;right:6px;bottom:6px;padding:4px 7px;font-size:9px;letter-spacing:.06em;justify-content:center}
/* opt in per image, never by position: the wheel shot wants its lower half
   kept (the detection box lives there) while the cab monitor wants its upper
   half (the screen does). A :first-of-type rule would get one of them wrong. */
.card__media--split img.focus-low{object-position:center 70%}
.card__media--split img.focus-high{object-position:center 32%}
.card__num{
  position:absolute;top:12px;left:12px;z-index:2;
  font-family:var(--serif);font-weight:var(--display-weight);font-size:12px;letter-spacing:.06em;
  padding:4px 10px;border-radius:var(--r-control);
  background:rgba(16,22,27,.7);color:var(--night-ink);backdrop-filter:blur(6px);
}
.card__body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.card__body h3{font-size:19px;line-height:1.3;margin-bottom:8px}
.card__body p{font-size:14px;color:var(--ink-2);line-height:1.65;flex:1}
/* the whole card is the tap target: a 21px inline link is not thumb sized */
.card__link{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--tag-ink);min-height:24px}
/* z-index 3 clears the media (which makes its own stacking context via the
   scale transform) and the chips at 2, so the photo area is tappable too */
.card__link::after{content:"";position:absolute;inset:0;z-index:3;border-radius:var(--r-media)}
.card__link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .4s var(--ease)}
.card:hover .card__link svg{transform:translateX(4px)}
.card__link:focus-visible{outline:none}
.card:has(.card__link:focus-visible){box-shadow:0 0 0 2px var(--tag-soft)}

/* ---------- evidence grid ---------- */
.evid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,18px)}
.evid .frame:nth-child(1){grid-column:span 7}
.evid .frame:nth-child(2){grid-column:span 5}
.evid .frame:nth-child(3){grid-column:span 4}
.evid .frame:nth-child(4){grid-column:span 4}
.evid .frame:nth-child(5){grid-column:span 4}
.evid .frame img{aspect-ratio:3/2}
@media(max-width:760px){
  .evid{grid-template-columns:repeat(2,1fr)}
  .evid .frame:nth-child(1){grid-column:span 2}
  .evid .frame:nth-child(2),.evid .frame:nth-child(3),
  .evid .frame:nth-child(4),.evid .frame:nth-child(5){grid-column:span 1}
}

/* ---------- the hardware footnote: a capability, deliberately small ---------- */
.hw{
  margin-top:clamp(20px,2.6vw,32px);
  background:var(--dock);border:1px solid var(--line-soft);border-radius:var(--r-sheet);
  padding:clamp(18px,2.2vw,26px);
}
.hw h3{font-size:18px;margin-bottom:6px}
.hw p{font-size:14px;color:var(--ink-2);line-height:1.65;max-width:76ch}
/* one row, four boards, each in its own visible frame rather than a strip:
   these are four separate objects and should not read as one photograph */
.hw__row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(16px,2vw,22px);
}
.hw__row .frame{
  border:1px solid var(--line);
  background:var(--dock-2);
  box-shadow:0 1px 2px rgba(21,27,33,.05);
}
.hw__row .frame img{aspect-ratio:4/3}
@media(max-width:700px){.hw__row{grid-template-columns:repeat(2,1fr)}}

/* ---------- the development stack: the software half of the hardware footnote,
   so it gets the same quiet card treatment rather than a logo wall ---------- */
.stack{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.stack__item{
  background:var(--dock-2);border:1px solid var(--line-soft);border-radius:var(--r-sheet);
  padding:clamp(20px,2.4vw,28px);
}
/* Each logo arrives with its own background baked in - Django on teal, jQWidgets
   on white, Qt on green - so they are given one shared plate of a fixed height
   and fitted inside it. That is what keeps three mismatched crops reading as a
   row rather than as three stray pictures. The plate is white, the one raw hex
   in this file besides the hover steps, because the jQWidgets art is on white
   and any other tone would draw a visible rectangle around it. */
.stack__logo{
  --plate:64px;                       /* the height the artwork is allowed */
  height:calc(var(--plate) + 20px);padding:10px;margin-bottom:18px;
  display:grid;place-items:center;
  background:#FFF;border:1px solid var(--line-soft);border-radius:var(--r-media);
}
/* the cap is in pixels, not a percentage: a percentage max-height on a centred
   grid item resolved against auto and let the Qt crop render at its full 154px,
   spilling out of the plate and over the label under it */
.stack__logo img{max-height:var(--plate);width:auto;object-fit:contain}
/* the tool's name is the heading: it is a proper noun, so it stays Latin and
   keeps the display face, while the role above it is the usual micro label */
.stack__item h3{font-size:21px;margin:10px 0 10px}
.stack__item p{font-size:14px;color:var(--ink-2);line-height:1.65}
@media(max-width:820px){.stack{grid-template-columns:1fr}}

/* ---------- night band, the ATO film ---------- */
.night{background:var(--night);color:var(--night-ink)}
.night h2{color:var(--night-ink)}
.night .lede{color:var(--night-ink-2)}
.film{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:clamp(24px,4vw,64px);align-items:center}
.film__player{position:relative;border-radius:var(--r-media);overflow:hidden;background:var(--night-2);border:1px solid var(--night-line)}
.film__player video{width:100%;aspect-ratio:3/4;object-fit:contain;background:var(--night-2)}
.film__facts{list-style:none;display:grid;gap:18px}
.film__facts li{border-top:1px solid var(--night-line);padding-top:14px}
.film__facts b{display:block;font-family:var(--serif);font-weight:var(--display-weight);font-size:21px;color:var(--night-ink)}
.film__facts span{font-size:13.5px;color:var(--night-ink-2);line-height:1.6}
@media(max-width:860px){.film{grid-template-columns:1fr}.film__player video{aspect-ratio:9/16;max-height:70vh;margin:0 auto}}

/* ---------- work carried out, as a grid of named jobs ---------- */
.works{
  list-style:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:clamp(10px,1.2vw,16px);
}
.work{
  position:relative;
  background:var(--dock-2);border:1px solid var(--line-soft);border-radius:var(--r-media);
  padding:20px 20px 22px 22px;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
/* a short accent rule reads as a mark of authorship without adding a logo we
   do not have permission to show */
.work::before{
  content:"";position:absolute;left:0;top:22px;width:3px;height:26px;
  border-radius:0 3px 3px 0;background:var(--tag);
}
.work:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.work b{
  display:block;font-family:var(--serif);font-weight:var(--display-weight);
  font-size:17px;line-height:1.35;margin-bottom:6px;
}
.work span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.6}

/* ---------- main column with a press rail beside it ---------- */
.withside{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,306px);
  gap:clamp(24px,3vw,48px);align-items:start;
}
.withside__main{min-width:0}
/* the four field cards lose a column to the rail, so they pair up instead */
.withside__main .fields{grid-template-columns:repeat(2,1fr)}

.presscol{position:sticky;top:calc(76px + 20px)}
.presscol__head{margin-bottom:14px}
.presscol__head h3{font-size:19px;line-height:1.35}
.presscol__list{list-style:none;display:grid;gap:10px}
.presscard{
  display:flex;flex-direction:column;gap:8px;
  background:var(--steel-wash);
  border:1px solid color-mix(in srgb, var(--steel) 16%, transparent);
  border-radius:var(--r-media);padding:18px 18px 20px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.presscard:hover{
  transform:translateY(-2px);border-color:color-mix(in srgb, var(--steel) 34%, transparent);
  box-shadow:0 10px 24px rgba(21,27,33,.10);
}
.presscard:focus-visible{outline:none;box-shadow:0 0 0 2px var(--steel)}
.presscard__src{
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb, var(--tag-ink) 80%, var(--ink));
}
.presscard__title{
  font-family:var(--serif);font-weight:var(--display-weight);
  font-size:16px;line-height:1.4;color:var(--ink);
}
.presscard__go{
  display:inline-flex;align-items:center;gap:6px;min-height:24px;
  font-size:12px;font-weight:600;color:var(--steel-ink);
}
.presscard__go span{transition:transform .4s var(--ease)}
.presscard:hover .presscard__go span{transform:translate(2px,-2px)}
/* below the split the rail becomes a normal block under the cards, and the
   fields go back to filling the row */
@media(max-width:1000px){
  .withside{grid-template-columns:1fr}
  .presscol{position:static}
  .presscol__list{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
@media(max-width:560px){.withside__main .fields{gap:10px}}

/* ---------- closing ---------- */
.close{background:var(--night);color:var(--night-ink);text-align:center}
.close .wrap{padding-block:clamp(64px,8vw,110px)}
.close h2{color:var(--night-ink);margin:0 auto;max-width:20ch}
.close .lede{color:var(--night-ink-2);margin:20px auto 32px}
.close .eyebrow{justify-content:center}

/* ---------- footer ---------- */
.ft{background:var(--dock-2);border-top:1px solid var(--line-soft);padding-block:clamp(40px,5vw,64px)}
.ft__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(24px,4vw,56px)}
.ft h5{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;font-family:var(--sans);font-weight:600}
.ft ul{list-style:none;display:grid;font-size:14px;color:var(--ink-2)}
.ft ul li{padding:3px 0}
/* the link itself has to be thumb sized, padding on the li does not count */
.ft ul a{display:inline-flex;align-items:center;min-height:44px}
.ft ul a:hover{color:var(--tag-ink)}
.ft img{height:40px;width:auto;margin-bottom:16px}
.ft p{font-size:14px;color:var(--ink-2);max-width:44ch}
.ft__bottom{
  margin-top:clamp(28px,3.4vw,44px);padding-top:20px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:12.5px;color:var(--ink-3);
}
@media(max-width:760px){.ft__grid{grid-template-columns:1fr;gap:32px}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(38px)}
.rv.in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .rv,.rv.in{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* =========================================================
   Shared chrome and inner-page components
   solutions, products, download, partners and contact still use the older
   class names. They inherit the new palette through tokens.css; what follows
   restyles only the pieces that would otherwise look like the old design.
   ========================================================= */

/* ---------- the older button classes map onto the pill ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:var(--r-control);padding:13px 26px;min-height:46px;
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;
  border:1px solid var(--line);color:var(--ink);background:transparent;
  cursor:pointer;text-align:center;
  transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease);
}
.btn-primary{background:var(--steel);border-color:var(--steel);color:#F2F6FD}
.btn-primary:hover{background:var(--steel-hover);border-color:var(--steel-hover)}
.btn-ghost,.btn-outline{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover,.btn-outline:hover{background:var(--dock-3);border-color:var(--line-strong)}
.btn-sm{padding:10px 20px;min-height:44px;font-size:11.5px}
.btn-block{display:flex;width:100%}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--steel)}
.section--navy .btn-ghost,.cta-band .btn-ghost{border-color:rgba(231,236,238,.5);color:var(--night-ink)}
.section--navy .btn-ghost:hover,.cta-band .btn-ghost:hover{background:rgba(231,236,238,.1)}

/* ---------- header, shared by every page ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(238,241,242,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:44px}
/* by element, not by class: the home page markup carries no .brand-logo and
   the logo rendered 228px tall inside a 77px header */
.brand img,.brand-logo{height:38px;width:auto;display:block;flex-shrink:0}
.brand-mark{
  width:38px;height:38px;border-radius:var(--r-media);flex-shrink:0;
  display:grid;place-items:center;background:var(--steel);color:#F2F6FD;
}
.brand-mark svg{width:20px;height:20px}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-text strong{font-family:var(--serif);font-weight:var(--display-weight);font-size:15px}
.brand-text span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.nav{display:flex;gap:4px;font-size:14px;color:var(--ink-2)}
/* the hovered and the current link wear the same soft blue pill, so hover is
   a preview of where you are about to be */
.nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border-radius:var(--r-control);
  /* a menu label must never break in half; when the bar runs out of room the
     right answer is to drop a button, not to split "หน้าแรก" across two lines */
  white-space:nowrap;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.nav a:hover{color:var(--steel-ink);background:var(--steel-wash)}
.nav a.is-active,.nav a[aria-current="page"]{color:var(--steel-ink);background:var(--steel-wash);font-weight:600}
.nav a:focus-visible{outline:none;box-shadow:0 0 0 2px var(--steel)}
.header-actions{display:flex;align-items:center;gap:10px}
/* The SmartOffice pill and the breakpoint that used to hide the consultation CTA
   to make room for it are gone: on the home page the logo itself is now the way
   in to that system. */
.nav-toggle{
  display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-media);
  background:transparent;cursor:pointer;position:relative;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:18px;height:1.5px;background:var(--ink);border-radius:2px;
}
.nav-toggle span{top:50%;margin-top:-.75px}
.nav-toggle span::before{top:-6px;left:0;transform:none}
.nav-toggle span::after{top:6px;left:0;transform:none}

/* ---------- layout helpers used by the inner pages ---------- */
.container{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.section{padding-block:var(--band)}
.section--tight{padding-block:clamp(40px,4.6vw,64px)}
.section--alt{background:var(--dock-2)}
.section--navy{background:var(--night);color:var(--night-ink)}
.section--navy p{color:var(--night-ink-2)}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{color:var(--night-ink)}
.section-head{margin-bottom:clamp(28px,3.4vw,48px);max-width:64ch}
.section-head h2{margin-bottom:14px}
.section-head p{font-size:clamp(16px,1.3vw,18px);color:var(--ink-2);line-height:1.7}
h4,h5{font-family:var(--serif);font-weight:var(--display-weight);line-height:1.3}
h4{font-size:18px}
h5{font-size:13px}
.divider{height:1px;background:var(--line-soft);border:0;margin-block:var(--space-lg)}
.breadcrumb{font-size:12.5px;color:var(--ink-3);margin-bottom:14px}
/* negative margin keeps the line where it was while the tap area reaches 44px:
   the link itself measured 18.4px */
.breadcrumb a{display:inline-block;padding:13px 0;margin:-13px 0}
.breadcrumb a:hover{color:var(--tag-ink)}

/* ---------- CTA band, shared ---------- */
.cta-mm{padding-block:clamp(40px,4.6vw,64px)}
.cta-band{
  background:var(--night);color:var(--night-ink);
  border-radius:var(--r-sheet);padding:clamp(28px,4vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,40px);flex-wrap:wrap;
}
.cta-band h3{color:var(--night-ink);font-size:clamp(20px,2.2vw,28px);margin-bottom:8px;max-width:26ch}
.cta-band p{color:var(--night-ink-2);font-size:15px;max-width:56ch}
.cta-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13px;font-weight:600;margin-bottom:10px}
.cta-kicker .dot{color:rgba(231,236,238,.4);font-weight:400}
.kw{font-weight:600;font-style:normal}
.kw--1,.kw--rfid{color:var(--kw-red)}
.kw--2,.kw--io{color:var(--tag-soft)}
.kw--3{color:var(--tag-soft)}
.kw--4,.kw--data{color:var(--kw-teal)}

/* ---------- footer, shared ---------- */
.site-footer{background:var(--dock-2);border-top:1px solid var(--line-soft);padding-block:clamp(40px,5vw,64px)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,56px)}
.footer-brand p{font-size:14px;color:var(--ink-2);max-width:44ch;margin-top:14px}
/* the same real logo the home page footer carries, instead of the generic mark
   plus wordmark: one company should not wear two identities in the same footer.
   padding-block makes the 40px logo a 44px tap target without moving it. */
/* block, not inline-block: an inline box sits on a text line and the descender
   space under it added 7px the home page footer does not have. width:max-content
   keeps the link the size of the logo instead of the whole column. */
.footer-brand .footer-logo{display:block;width:max-content;line-height:0;padding-block:2px}
.footer-brand .footer-logo img{height:40px;width:auto}
.footer-brand .footer-logo+p{margin-top:16px}
.footer-brand .footer-logo:focus-visible{outline:none;box-shadow:0 0 0 2px var(--steel)}
/* the .brand-text overrides that used to live here fought an inline color:#fff
   on the old lockup; both are gone with it. */
.footer-col h5{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;font-family:var(--sans);font-weight:600}
.footer-col ul{list-style:none;display:grid;font-size:14px;color:var(--ink-2)}
.footer-col li{padding:3px 0}
/* the link itself has to be thumb sized; padding on the li does not count */
.footer-col a{display:inline-flex;align-items:center;min-height:44px}
.footer-col a:hover{color:var(--tag-ink)}
.social-row{display:flex;gap:10px;margin-top:16px}
.social-row a{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-2);
  transition:background .4s var(--ease),color .4s var(--ease);
}
.social-row a:hover{background:var(--steel-wash);color:var(--steel-ink)}
.social-row svg{width:18px;height:18px}
.footer-bottom{
  margin-top:clamp(28px,3.4vw,44px);padding-top:20px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12.5px;color:var(--ink-3);
}

/* ---------- Page banner (inner pages) ---------- */
.page-banner {
  background: var(--gradient-hero);
  color: var(--color-ink-inv);
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
}
.page-banner::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(color-mix(in oklch, var(--color-ink-inv) 8%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.4), transparent 75%);
}
.page-banner .container { position: relative; z-index: 1; }
.breadcrumb { font-size: 14px; color: color-mix(in oklch, var(--color-ink-inv) 60%, transparent); margin-bottom: 14px; }
.breadcrumb a:hover { color: var(--color-ink-inv); }
.page-banner h1 { font-size: clamp(30px, 4.5vw, 44px); margin-bottom: 12px; color: var(--color-ink-inv); }
.page-banner p { color: var(--color-ink-inv-2); max-width: 620px; font-size: 17px; margin: 0; }

/* ---------- Cards / Grids ---------- */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }

.icon-tile {
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.icon-tile svg { width: 28px; height: 28px; }
.icon-tile.accent { background: var(--color-accent-2-soft); color: var(--color-accent-dark); }

.solution-card h3 { font-size: 19px; }
.solution-card p { font-size: 15px; margin-bottom: 16px; }
.solution-card .card-link { font-size: 14px; font-weight: 600; color: var(--color-primary); display: inline-flex; align-items: center; gap: 6px; }
.solution-card .card-link svg { width: 16px; height: 16px; transition: transform var(--dur-short) var(--ease-out); }
.solution-card:hover .card-link svg { transform: translateX(4px); }

/* Feature/benefit list with check icon */
.check-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--color-ink-soft);
  margin-bottom: 12px;
}
.check-list svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-accent-dark); margin-top: 2px; }

/* Solution detail (alternating) */
.solution-block {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: center;
  padding: 64px 0;
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.solution-block:last-child { border-bottom: none; }
.solution-block.reverse .solution-media { order: 2; }
.solution-media {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.solution-media img { width: 100%; height: 100%; object-fit: cover; }
.solution-media svg { width: 34%; height: 34%; color: var(--color-primary); opacity: .85; }

/* Wide-photo variant: matches the ~16:9 source photos (smart_wms.png, paper_roll2.jpg)
   so cover-cropping doesn't cut off the caption text baked into those images. */
.solution-media--wide { aspect-ratio: 16/9; }

/* Portrait video variant: matches the ~9:16 source clip (output5_gpu.mp4). Letterboxed
   (object-fit: contain) on a dark backdrop so the full detection frame stays visible —
   cropping to fill would cut the wheel/scale edges the demo is meant to show. */
.solution-media--portrait { aspect-ratio: 3/4; background: var(--color-paper-inv); }
.solution-media--portrait video { width: 100%; height: 100%; object-fit: contain; }

/* Photo collage variant: multiple real photos inside one media card.
   Base shell is shared; each -N modifier sets how many rows the right-hand
   column of supporting photos splits into (main photo always fills column 1). */
.solution-media--collage {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3px;
  padding: 3px;
}
.solution-media--collage img { border-radius: 0; min-width: 0; min-height: 0; }
.solution-media--collage .collage-main { grid-column: 1; border-radius: calc(var(--radius-lg) - 3px) 0 0 calc(var(--radius-lg) - 3px); }
.solution-media--collage .collage-sub:first-of-type { border-radius: 0 calc(var(--radius-lg) - 3px) 0 0; }
.solution-media--collage .collage-sub:last-of-type { border-radius: 0 0 calc(var(--radius-lg) - 3px) 0; }

/* 1 main + 1 sub: single row, side by side */
.solution-media--collage-2 { grid-template-rows: 1fr; }
.solution-media--collage-2 .collage-main { grid-row: 1; }
.solution-media--collage-2 .collage-sub { grid-row: 1; border-radius: 0 calc(var(--radius-lg) - 3px) calc(var(--radius-lg) - 3px) 0; }

/* 1 main + 2 subs: main spans both rows, subs stack one per row */
.solution-media--collage-3 { grid-template-rows: repeat(2, 1fr); }
.solution-media--collage-3 .collage-main { grid-row: 1 / span 2; }

/* 1 main + 3 subs: main spans all three rows, subs stack one per row */
.solution-media--collage-4 { grid-template-rows: repeat(3, 1fr); }
.solution-media--collage-4 .collage-main { grid-row: 1 / span 3; }
.solution-index {
  position: absolute; top: 20px; left: 20px;
  font-family: var(--font-heading);
  font-size: 13px; font-weight: 600;
  background: var(--color-paper); color: var(--color-primary);
  padding: 6px 14px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.solution-body .tag {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: 12px;
}
.solution-body h2 { font-size: 26px; margin-bottom: 14px; }
.solution-body > p { font-size: 15.5px; margin-bottom: 22px; }

/* ---------- Product cards ---------- */
/* ---------- Product cards ---------- */
.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.product-thumb {
  aspect-ratio: 4/3;
  background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
}
.product-thumb svg { width: 40%; height: 40%; color: var(--color-primary); opacity: .8; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.product-body .cat { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-accent-dark); margin-bottom: 8px; }
.product-body h3 { font-size: 17px; margin-bottom: 8px; }
.product-body p { font-size: 14px; margin-bottom: 18px; flex: 1; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filter-btn {
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-paper);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.filter-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.filter-btn.active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }

/* ---------- Download list ---------- */
/* ---------- Download list ---------- */
.download-row {
  display: flex; align-items: center; gap: 20px;
  padding: 22px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}
.download-row .icon-tile { margin: 0; flex-shrink: 0; }
.download-row .meta { flex: 1; }
.download-row h4 { margin: 0 0 4px; font-size: 16px; }
.download-row span { font-size: 13px; color: var(--color-ink-faint); }

/* ---------- Profile request form ----------
   The site is static, so the form's own styling is all this file owns; where the
   answers go is decided in main.js. Controls are 46px like the pills, so every
   target on the page clears 44px. */
.req-form { display: grid; gap: 16px; }
.req-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .req-form__row { grid-template-columns: 1fr; } }
.req-field { display: grid; gap: 6px; }
.req-field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.req-opt { font-weight: 400; color: var(--ink-3); }
.req-field input,
.req-field textarea {
  font: inherit; font-size: 14px; color: var(--ink); width: 100%;
  background: var(--dock); border: 1px solid var(--line);
  border-radius: var(--r-control); padding: 12px 14px; min-height: 46px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.req-field textarea { min-height: 112px; resize: vertical; line-height: 1.6; }
.req-field input:focus,
.req-field textarea:focus {
  outline: none; border-color: var(--steel); box-shadow: 0 0 0 2px var(--steel-wash);
}
/* the invalid state is carried by the border and the message, never by colour
   alone - the text below the field says what is wrong */
.req-field.is-invalid input,
.req-field.is-invalid textarea { border-color: var(--tag-deep); }
.req-error { font-size: 12.5px; color: var(--tag-ink); }
.req-note { font-size: 12.5px; color: var(--ink-3); margin: 0; }
.req-status {
  font-size: 13.5px; line-height: 1.6; margin: 0;
  padding: 12px 14px; border-radius: var(--r-control);
  background: var(--steel-wash); color: var(--steel-ink);
}
.req-status a { text-decoration: underline; }
.req-status.is-error { background: var(--dock-3); color: var(--tag-ink); }
.req-form .btn { justify-self: start; }

/* ---------- Contact ---------- */
/* ---------- Contact ---------- */
.contact-card {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 26px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.contact-card h4 { font-size: 16px; margin-bottom: 6px; }
.contact-card p { font-size: 14.5px; margin: 0; }
/* phone and email are the most tapped links on the site and measured 19.3px.
   Padding with a matching negative margin lifts the target without moving the
   line. */
.contact-card a{display:inline-block;padding:12px 0;margin:-12px 0;color:var(--steel-ink);font-weight:600}
.contact-card a:hover{color:var(--steel)}
.map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  aspect-ratio: 16/9;
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Partners ---------- */
/* ---------- Partners ---------- */
.partner-tile {
  padding: 30px 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: center;
  transition: box-shadow var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.partner-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.partner-logo {
  height: 64px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  color: var(--color-ink-faint);
}
.partner-logo svg { width: 44px; height: 44px; }
/* real logo art instead of a placeholder icon: each vendor's file carries its
   own background, so they share one plate and are fitted inside it. The cap is
   in pixels for the same reason as the home page stack - a percentage
   max-height on a centred flex item does not constrain a replaced element. */
.partner-logo--img {
  --plate: 48px;                 /* 64px plate minus its 8px padding, top and bottom */
  padding: 8px;
  background: #FFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.partner-logo--img img { max-height: var(--plate); width: auto; object-fit: contain; }
/* a partner name that links out is still a heading, so it keeps the heading's
   colour and only picks up the accent on hover */
/* measured at 33x19px as a bare link, so it gets padding with a matching
   negative margin: a 44px target without moving the heading */
.partner-tile h4 a {
  color: inherit;
  display: inline-block;
  padding: 13px 14px;
  margin: -13px -14px;
}
.partner-tile h4 a:hover { color: var(--color-accent-dark); }
.partner-tile h4 a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tag-soft); border-radius: 4px; }
.partner-tile p { font-size: 13px; margin: 0; color: var(--color-ink-soft); }

/* ---------- CTA band (flat near-black, Cliento signature) ---------- */
/* ---------- Misc ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--color-bg-alt); color: var(--color-ink-soft); }
.divider { height: 1px; background: var(--color-border); margin: 64px 0; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ---------- Responsive ---------- */
/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-mm__inner { grid-template-columns: 1fr; }
  .hero-visual { max-width: 380px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .solution-block { grid-template-columns: 1fr; }
  .solution-block.reverse .solution-media { order: 0; }

  /* Bento: 4 cols -> 2 cols, tall/wide tiles keep their span, 2x2 keeps its footprint */
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 13rem; }
  .cell--2x2 { grid-column: span 2; }
}

@media (max-width: 760px) {
  .nav { position: fixed; inset: var(--header-h) 0 0 0; background: var(--color-paper); flex-direction: column; align-items: stretch; padding: 20px; gap: 6px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); overflow-y: auto; }
  .nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav a { padding: 14px 16px; font-size: 16px; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn-primary.header-cta { display: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .hero-mm { padding: var(--space-2xl) 0 var(--space-xl); }
  .bento-section { padding: var(--space-2xl) 0 var(--space-lg); }
  .cta-mm { padding: var(--space-xl) 0 var(--space-2xl); }
  .cta-band { flex-direction: column; text-align: center; padding: 40px 28px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Bento: single column below the typography breakpoint; every tile drops to its natural row height */
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .cell--2x2, .cell--2x1, .cell--1x2 { grid-column: span 1; grid-row: span 1; }
  .cell { min-height: 12rem; }
}

/* ---------- shared responsive rules ---------- */
@media(max-width:1000px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:900px){
  /* the bar cannot hold a pill and the menu button, and the consultation CTA is
     still reachable through "ติดต่อเรา" in the menu */
  .header-cta{display:none}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    background:var(--dock);flex-direction:column;align-items:stretch;
    padding:16px var(--gutter) 24px;gap:2px;
    border-bottom:1px solid var(--line-soft);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform var(--dur-short) var(--ease),opacity var(--dur-short) var(--ease);
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
  }
  .nav.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-toggle{display:block}
}
@media(max-width:760px){
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .cta-band{flex-direction:column;align-items:flex-start}
}