/* ==========================================================
   Sin Guhe Trading — website system
   Spec-sheet language: paper + signage blue + technical
   hairlines + blueprint grid. Carried over from the deck,
   re-platformed for a multi-page, scrolling, responsive site.
   ========================================================== */

:root {
  --ink:        #0B1F3F;
  --ink-2:      #16315A;
  --paper:      #FFFFFF;
  --paper-lite: #FAFBFD;
  --paper-deep: #EEF1F4;
  --steel:      #B9C0C8;
  --steel-dk:   #6F7886;
  --blue:       #1857B8;
  --blue-deep:  #0E3F8F;
  --blue-tint:  #7DA9F0;
  --blue-soft:  rgba(24,87,184,0.10);
  --wa:         #25D366;
  --wa-deep:    #1FB257;
  --mute:       rgba(11,31,63,0.58);
  --line:       rgba(11,31,63,0.12);
  --line-hd:    rgba(11,31,63,0.28);
  --line-soft:  transparent;   /* blueprint grid disabled site-wide — cleaner brutalist surface */

  --display: "Archivo Black", "Archivo", system-ui, sans-serif;
  --sans:    "Archivo", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;
  --cn:      "Noto Sans SC", "Archivo", system-ui, sans-serif;
  --cn-disp: "Noto Sans SC", "Archivo Black", system-ui, sans-serif;

  --head-h: 52px;
  --tab-h:  66px;
  --maxw:   1180px;
  --pad:    clamp(18px, 4vw, 40px);

  /* forward arrow, drawn once as SVG (used via mask) so it's identical on every device */
  --arr-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'/%3E%3Cpath%20d='M13%206l6%206-6%206'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* faint blueprint grid across the whole document */
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 30px 30px, 30px 30px;
  padding-top: var(--head-h);
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
::selection { background: var(--blue); color: #fff; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ----------------------------------------------------------
   Sticky header
   ---------------------------------------------------------- */
.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--head-h);
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line-hd);
}
.site-head .bar {
  height: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.brand img { width: 26px; height: 26px; object-fit: contain; }
.brand .bn {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.brand .bcn {
  font-family: var(--cn);
  font-weight: 700;
  font-size: 10px;
  color: var(--mute);
  letter-spacing: 0.08em;
  margin-top: 2px;
  display: block;
}
.brand .blk { display: flex; flex-direction: column; }

.head-wa {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: var(--wa);
  border: 1px solid var(--wa); border-radius: 1px;
  padding: 8px 12px;
  transition: background .15s ease;
}
.head-wa svg { width: 15px; height: 15px; }
@media (hover: hover) { .head-wa:hover { background: var(--wa-deep); } }
@media (max-width: 440px) { .head-wa .t { display: none; } .head-wa { padding: 9px; } }

/* ----------------------------------------------------------
   Bottom tab bar — primary navigation (mini-app style)
   ---------------------------------------------------------- */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(1.5) blur(10px);
  border-top: 1px solid var(--line-hd);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar .row {
  max-width: 600px;
  margin-inline: auto;
  height: var(--tab-h);
  display: flex;
}
.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--steel-dk);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  transition: color .15s ease;
}
.tabbar a svg { width: 23px; height: 23px; display: block; }
.tabbar a .lbl { line-height: 1; }
.tabbar a.active { color: var(--blue); }
.tabbar a.active::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 2px; background: var(--blue);
}
@media (hover: hover) { .tabbar a:hover { color: var(--ink); } }
@media (max-width: 360px) { .tabbar a { font-size: 8.5px; } }

/* ----------------------------------------------------------
   Eyebrow / breadcrumb / section heads
   ---------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line-hd);
  background: var(--paper-lite);
  padding: 5px 10px;
  border-radius: 1px;
}
.eyebrow .d { width: 6px; height: 6px; background: var(--blue); display: inline-block; }

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 22px;
}
.crumb a { color: var(--mute); transition: color .15s ease; }
@media (hover: hover) { .crumb a:hover { color: var(--blue); } }
.crumb .sep { opacity: 0.5; }
.crumb .here { color: var(--ink); }

/* Headline stack (Archivo Black + blue mark) */
.h-stack { margin: 0; }
.h-stack .line {
  display: block;
  font-family: var(--display);
  font-weight: 400;                          /* Archivo Black's only real face — stop the UA <h1> bold (700) */
  font-synthesis: none;                      /* no engine-invented bold (iOS vs Chrome diverged) */
  -webkit-text-stroke: 0.034em currentColor; /* manual, pixel-precise heft — identical on iOS + desktop. currentColor → ink lines & white .mk each stroke their own colour */
  font-size: clamp(32px, 6.5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink);
}
.h-stack .mk {
  background: var(--blue);
  color: #fff;
  padding: 0 0.10em;
  display: inline-block;
}
.h-cn {
  font-family: var(--cn-disp);
  font-weight: 900;
  font-size: clamp(16px, 3vw, 22px);
  line-height: 1.2;          /* was 1.5 — drop the phantom leading above the line */
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 8px 0 0;           /* was 14px — group the translation tighter with the title */
}
.h-cn .accent { color: var(--blue); }

/* ---- Category page: app-style overrides (scoped via [data-cat-cn]) ---- */
/* Larger Chinese category title — a bold CJK co-title needs more size than body
   text to read as a heading: ~20px on phones (was 14px), up to 26px on desktop. */
.h-cn[data-cat-cn] { font-size: clamp(20px, 5.2vw, 26px); }
.screen-head .h-cn[data-cat-cn] { font-size: clamp(20px, 5.2vw, 24px); }
/* Hairline divider between the title block and the image gallery. */
.cat-rule { height: 1px; background: var(--line-hd); border: 0; }
.screen.flow .cat-rule { margin-inline: calc(-1 * var(--pad)); }   /* mobile: full-bleed; spacing comes from the screen's flex gap */
.d-only .cat-rule { margin-bottom: clamp(20px, 3vw, 32px); }       /* desktop: sit just above the grid */

/* Archivo Black is a single 400 face. These titles sit on heading tags, which the
   UA stylesheet gives bold (700) — a weight the font doesn't have, so engines fake
   it and iOS/desktop diverge. Pin the real weight, kill synthesis, then add the
   heft back manually via text-stroke so it's identical on every platform. */
.section-head h2,
.svc-row h3,
.role h3,
.cta-band h2,
.si-name {
  font-weight: 400;
  font-synthesis: none;
  -webkit-text-stroke: 0.034em currentColor;
}

.section {
  padding-block: clamp(48px, 8vw, 96px);
}
.section.tight { padding-block: clamp(32px, 5vw, 56px); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.section-head h2 {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: clamp(26px, 4.5vw, 44px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}
.section-head .sub {
  max-width: 46ch;
  color: var(--mute);
  font-size: 15px;
}

/* ----------------------------------------------------------
   Buttons
   ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 20px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: 1px;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
@media (hover: hover) { .btn:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-1px); } }
.btn.ghost { background: transparent; color: var(--ink); }
@media (hover: hover) { .btn.ghost:hover { background: var(--ink); color: var(--paper); } }
.btn.wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
@media (hover: hover) { .btn.wa:hover { background: var(--wa-deep); border-color: var(--wa-deep); } }
.btn .ar { font-family: var(--display); }

/* Forward arrows — one SVG painted via mask so they render identically on
   every device; colour = the element's own colour (accent blue on link/card/
   tile CTAs, button-text colour inside filled buttons), muted for the crumb. */
.ar, .go, .tgo, .sep {
  font-size: 0 !important;
  display: inline-block;
  width: 13px; height: 13px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--arr-mask) center / contain no-repeat;
          mask: var(--arr-mask) center / contain no-repeat;
}
.tgo { width: 16px; height: 16px; }
.sep { width: 11px; height: 11px; }
.landing-cta .ar { width: 16px; height: 16px; }

/* ----------------------------------------------------------
   Image placeholder — the swappable spec frame
   ---------------------------------------------------------- */
.ph {
  position: relative;
  background: var(--paper-lite);
  border: 1px solid var(--line-hd);
  overflow: hidden;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
}
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph.contain img { object-fit: contain; }   /* real photos: show whole image, no white-bg blend */
/* pure-white cell (no off-white, no grid) so white-bg product shots blend seamlessly */
.ph.contain { background-color: #fff; background-image: none; }
.ph .ph-stamp {
  position: absolute;
  top: 8px; left: 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 2px 6px;
}
.ph .ph-glyph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--steel-dk);
  opacity: 0.7;
}
.ph .ph-glyph svg { width: 34px; height: 34px; }
.ph .ph-glyph span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* corner brackets */
.ph::before, .ph::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 2px solid var(--blue); z-index: 3; pointer-events: none;
}
.ph::before { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.ph::after  { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }

/* ----------------------------------------------------------
   Home hero
   ---------------------------------------------------------- */
.hero {
  padding-top: clamp(36px, 6vw, 72px);
  padding-bottom: clamp(36px, 6vw, 64px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.hero .lead .h-stack .line { font-size: clamp(34px, 5.4vw, 60px); line-height: 0.9; }
.hero .lead p {
  max-width: 44ch;
  margin: 22px 0 0;
  font-size: 16px;
  color: var(--ink);
}
.hero .lead p em {
  font-family: var(--cn);
  font-style: normal;
  font-weight: 700;
  display: block;
  margin-top: 6px;
  color: var(--mute);
}
.hero .actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero .stage {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: visible;
}
.hero .stage img {
  width: 84%; height: 84%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero .stage { order: -1; aspect-ratio: 4/3; }
}

/* Stat strip */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.stats .s { background: var(--paper-lite); padding: 22px 20px; }
.stats .s .n {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  color: var(--ink);
}
.stats .s .n sup { color: var(--blue); font-size: 0.5em; top: -0.6em; }
.stats .s .k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 8px;
}
@media (max-width: 680px) { .stats { grid-template-columns: 1fr 1fr; } }

/* ----------------------------------------------------------
   Category / sub-category / product grids
   ---------------------------------------------------------- */
.grid {
  display: grid;
  gap: 18px;
}
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }

/* Seamless grid (desktop browse) — cells butt together with 1px ink hairlines,
   like the mobile tile screens, instead of gapped cards.
   Transparent container + a 1px ink ring per card: razor-sharp seams between
   cells (rings meet across the 1px gap), while any empty grid track stays
   transparent and shows the page background straight through — no dark fill. */
.grid.seam { gap: 1px; }
.grid.seam .card { border: 0; box-shadow: 0 0 0 1px var(--ink); }
.grid.seam .card.wide { grid-column: span 2; }   /* featured first category (Commercial Fridges) */
/* keep the wide card's image the SAME height as 1-col cards (≈ width÷(4/3)) so
   the row stays aligned: 2 cols ÷ (8/3) ≈ 1 col ÷ (4/3). */
.grid.seam .card.wide .ph { aspect-ratio: 8 / 3; }
.grid.seam .card .ph { border: 0; }
.grid.seam .ph::before, .grid.seam .ph::after { display: none; }   /* drop corner brackets */
.grid.seam [data-rise] { transform: none; }                        /* fade only — no shift that breaks the seam */
@media (hover: hover) {
  .grid.seam .card:hover { transform: none; box-shadow: 0 0 0 1px var(--ink); }   /* keep the seam ring; just neutralise the base lift */
}
@media (max-width: 960px) { .grid.c4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: keep image/category/product grids as a 2-up image grid (not a
   single stacked column). Only the contact tap-rows (.c2) go full-width. */
@media (max-width: 520px) {
  .grid { gap: 12px; }
  .grid.c2 { grid-template-columns: 1fr; }
  .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* trim cards to compact image tiles so two fit cleanly side-by-side */
  .card .desc { display: none; }
  .card .body { padding: 11px 12px 13px; }
  .card .title { font-size: 13px; overflow-wrap: break-word; }
  .card .tt { font-size: 12px; }
  .card .foot { padding-top: 10px; font-size: 9.5px; }
}
@media (max-width: 360px) {
  .card .title { font-size: 12.5px; }
}

/* Generic card */
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-hd);
  background: var(--paper);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
@media (hover: hover) {
  .card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(11,31,63,0.4); }
}
.card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.card .kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.card .title {
  font-family: var(--display);
  font-size: clamp(16px, 2.2vw, 20px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-top: 4px;
}
.card .tt {
  font-family: var(--cn);
  font-weight: 900;
  font-size: 14px;
  color: var(--mute);
  letter-spacing: 0.04em;
}
.card .desc { color: var(--mute); font-size: 13.5px; margin-top: 6px; }
.card .foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.card .foot .count { color: var(--mute); }
.card .foot .go { color: var(--blue); font-family: var(--display); }

/* Minimal browse card (categories / sub-categories / products) — image, big
   name, blue 中文 + arrow. Sparser & larger for low-vision users; mirrors the
   mobile tile. Scoped to .mincard so the home Services cards keep their detail. */
.mincard .body { align-items: center; text-align: center; justify-content: center; gap: 1px; padding: 16px 14px 20px; }
.mincard .title { font-size: 16px; }   /* match original #s2 label */
.mincard .tt { color: var(--blue); display: inline-flex; align-items: center; gap: 6px; font-size: 16px; }   /* match original #s2 CN */

/* ----------------------------------------------------------
   Product catalog grid (listing.html) — editorial cards:
   uniform photo tile + SKU eyebrow + medium-weight name, no 中文.
   Lighter & airier than the seam grid; reads like a modern catalogue.
   ---------------------------------------------------------- */
.grid.catalog { gap: clamp(22px, 2.6vw, 32px) clamp(16px, 1.8vw, 22px); }
.prodcard { border: 0; background: transparent; }
.prodcard .ph {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-hd);
  border-radius: 7px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.prodcard .ph img { object-fit: cover; padding: 0; }
.prodcard .ph::before, .prodcard .ph::after { display: none; }   /* full-bleed rounded: no camera brackets */
/* EN + 中文 title as a floating stamp, top-left — like the product detail ph-stamp.
   Shared by the desktop grid cards and the mobile product tiles. */
.prod-stamp {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-width: calc(100% - 16px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 9px;
}
.prod-stamp .ps-en {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
}
.prod-stamp .ps-cn {
  font-family: var(--cn);
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--mute);
  white-space: nowrap;
}
@media (hover: hover) {
  .prodcard:hover { transform: none; box-shadow: none; border: 0; }
  .prodcard:hover .ph { border-color: var(--ink); box-shadow: 0 16px 34px -22px rgba(11,31,63,0.4); }
  .prodcard:hover .prod-stamp { border-color: var(--ink); }
}

/* Product list card — squarer image, compact meta */
.pcard .ph { aspect-ratio: 1 / 1; }
.pcard .body { padding: 12px 14px 14px; }
.pcard .pn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--mute);
}
.pcard .title { font-size: clamp(14px, 1.8vw, 17px); margin-top: 3px; }
.pcard .spec { color: var(--mute); font-size: 12.5px; margin-top: 6px; }

/* Filters / toolbar */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-hd);
}
.toolbar .count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  margin-right: auto;
}
.chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid var(--line-hd);
  background: var(--paper);
  border-radius: 1px;
  color: var(--ink);
  transition: all .14s ease;
}
@media (hover: hover) { .chip:hover { border-color: var(--ink); } }
.chip.on { background: var(--blue); color: var(--paper); border-color: var(--blue); }

/* ----------------------------------------------------------
   Product detail
   ---------------------------------------------------------- */
.pd {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas:
    "head head"
    "gallery pick"
    "gallery info";
  gap: 0 clamp(24px, 4vw, 56px);
  align-items: start;
}
.pd-head {
  grid-area: head;
  border-bottom: 1px solid var(--line-hd);
  padding-bottom: clamp(14px, 1.8vw, 20px);
  margin-bottom: clamp(18px, 2.4vw, 26px);
}
.pd-pick { grid-area: pick; }
.pd-gallery { grid-area: gallery; }
.pd-info { grid-area: info; }
.pd-back { margin-bottom: 18px; }
/* Let the 1fr tracks shrink below the image's intrinsic width on narrow screens —
   without this, the square product photo (720px) blows the column out and the
   featured image renders huge / cropped on mobile. */
.pd > * { min-width: 0; }
/* Mobile: match the listing page's vertical sequence — title → 中文 → divider →
   "Models" + chips → featured image → body/actions. */
@media (max-width: 859px) {
  .pd {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "pick" "gallery" "info";
    row-gap: 20px;
  }
}
.pd-gallery .main {
  aspect-ratio: 1 / 1;
  margin-bottom: 12px;
  display: block;          /* robust square frame; avoids grid + aspect-ratio quirks */
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 7px;      /* match the commercial-fridges listing cards */
}
.pd-gallery .main > img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* full-bleed rounded, like the listing grid */
  padding: 0;
}
.pd-gallery .main::before, .pd-gallery .main::after { display: none; }   /* drop camera brackets */
.pd-gallery .main .prod-stamp { top: 10px; left: 10px; padding: 6px 11px; }
.pd-gallery .main .prod-stamp .ps-en { font-size: 13.5px; }
.pd-gallery .main .prod-stamp .ps-cn { font-size: 11px; }
.mp-strip-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 4px 0 10px;
}
.mp-strip-label span { color: var(--mute); }
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 8px;
}
.pd-thumbs .ph {
  aspect-ratio: 1 / 1;
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
}
.pd-thumbs .ph .ph-stamp { top: 4px; left: 4px; font-size: 8px; padding: 1px 4px; }
.pd-thumbs .ph.contain img { padding: 0; }
@media (hover: hover) { .pd-thumbs .ph:hover { border-color: var(--steel-dk); } }
.pd-thumbs .ph.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pd-thumbs .ph::before, .pd-thumbs .ph::after { display: none; }

/* Model-number picker */
.model-pick {
  margin: 0 0 4px;
  padding: 0;
}
.mp-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.mp-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}
.mp-count {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}
.mp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mchip { font-family: var(--mono); white-space: nowrap; }
@media (max-width: 760px) {
  .mp-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: -2px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .mp-row::-webkit-scrollbar { display: none; }
  .mchip { flex: 0 0 auto; scroll-snap-align: center; }
}

.pd-head .ttl {
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin: 10px 0 4px;
}
.pd-head .ttl .mk {
  background: var(--blue);
  color: #fff;
  padding: 0 0.08em;
  display: inline-block;
}
.pd-head .cn {
  font-family: var(--cn);
  font-weight: 900;
  font-size: 17px;
  color: var(--mute);
  letter-spacing: 0.04em;
}
.pd-info .lede { margin: 18px 0 0; color: var(--ink); max-width: 48ch; }

.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  border: 1px solid var(--ink);
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th {
  width: 38%;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
  background: var(--paper-lite);
  border-right: 1px solid var(--line);
}
.spec-table td { font-weight: 600; color: var(--ink); }

.pd-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.pd-call {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color .15s ease;
}
.pd-call .ar { color: var(--blue); }
@media (hover: hover) { .pd-call:hover { color: var(--ink); } }
.pd-note {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ---- Product detail: mobile tuning ---- */
@media (max-width: 760px) {
  /* sit content higher under the fixed header */
  .pd-page .section { padding-block: 18px 36px; }
  /* breadcrumb stays on one scrollable line instead of wrapping into a block */
  .pd-page .crumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 16px;
    scrollbar-width: none;
  }
  .pd-page .crumb::-webkit-scrollbar { display: none; }
  .pd-page .crumb a, .pd-page .crumb .here, .pd-page .crumb .sep { flex: 0 0 auto; }

  .pd { gap: 20px; }
  /* let the product fill more of the featured frame on small screens */
  .pd-gallery .main.contain img { padding: 0; }
  .pd-head .ttl { margin-top: 4px; }
  .pd-info .lede { max-width: none; margin-top: 0; }
  /* the image's 12px bottom-margin (for the absent thumbnail row) and the lede's
     top-margin (a desktop right-column rule) stack on the grid row-gap and push the
     body text too far from the image — drop both so the row-gap alone spaces them. */
  .pd-gallery .main { margin-bottom: 0; }
  .model-pick { margin-bottom: 0; }
  /* divider sits at the bottom of pd-head; let the 20px row-gap alone space it from
     the chips (its desktop margin-bottom would otherwise double the gap). */
  .pd-head { margin-bottom: 0; }
  /* a little air between the body copy and the action buttons */
  .pd-actions { margin-top: 16px; }
  .spec-table { margin: 18px 0; }
  /* full-width, easy-to-tap actions */
  .pd-actions { gap: 10px; }
  .pd-actions .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
}

/* ----------------------------------------------------------
   Services page
   ---------------------------------------------------------- */
.svc-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid var(--line-hd);
}
.svc-row:last-child { border-bottom: 1px solid var(--line-hd); }
.svc-row .num {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.10em;
  color: var(--blue);
  font-weight: 700;
}
.svc-row h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(22px, 3.4vw, 34px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
}
.svc-row .cn { font-family: var(--cn); font-weight: 900; color: var(--blue); font-size: 16px; margin-top: 4px; }
.svc-row .role-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.svc-row p { margin: 12px 0 0; color: var(--mute); max-width: 52ch; }
@media (max-width: 720px) {
  .svc-row { grid-template-columns: 1fr; gap: 8px; }
  .svc-row .actions { margin-top: 12px; }
}

/* ----------------------------------------------------------
   Projects
   ---------------------------------------------------------- */
.proj .ph { aspect-ratio: 3 / 2; }
.proj .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0 0;
}
.proj .meta .loc { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--mute); }
.proj .meta .yr { font-family: var(--mono); font-size: 10.5px; color: var(--blue); }
.proj .title { font-family: var(--display); font-size: clamp(17px, 2.2vw, 21px); text-transform: uppercase; letter-spacing: -0.01em; margin-top: 6px; line-height: 1.05; }
.proj .tag { font-family: var(--cn); font-weight: 700; font-size: 13px; color: var(--mute); margin-top: 2px; }

/* ----------------------------------------------------------
   Careers
   ---------------------------------------------------------- */
.role {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--line-hd);
}
.roles .role:last-child { border-bottom: 1px solid var(--line-hd); }
.role h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(19px, 2.8vw, 26px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.role .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.role .meta-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line-hd);
  padding: 4px 8px;
  background: var(--paper-lite);
}
.role p { margin: 12px 0 0; color: var(--mute); max-width: 60ch; }
@media (max-width: 640px) { .role { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------
   Contact
   ---------------------------------------------------------- */
.branches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 720px) { .branches { grid-template-columns: 1fr; } }
.branch {
  border: 1px solid var(--line-hd);
  background: var(--paper);
  padding: 20px;
}
.branch.hq { border-color: var(--ink); }
.branch .nm {
  font-family: var(--display);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.branch .nm em { font-family: var(--cn); font-weight: 700; font-size: 13px; color: var(--blue); font-style: normal; margin-left: 8px; letter-spacing: 0.04em; }
.branch .addr { color: var(--mute); font-size: 13.5px; margin-top: 10px; line-height: 1.5; }
.branch .links { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.branch .links a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--blue);
  border-bottom: 1px solid var(--blue);
  padding-bottom: 1px;
}

.tap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--ink);
  background: var(--paper-lite);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
@media (hover: hover) { .tap-row:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); } }
.tap-row.wa { background: var(--wa); border-color: var(--wa); color: #fff; }
@media (hover: hover) { .tap-row.wa:hover { background: var(--wa-deep); border-color: var(--wa-deep); } }
.tap-row .k { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
.tap-row .v { font-family: var(--display); font-size: clamp(18px, 4vw, 24px); }

/* ----------------------------------------------------------
   CTA band
   ---------------------------------------------------------- */
.cta-band {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.cta-band .wrap { padding-block: clamp(40px, 6vw, 72px); position: relative; z-index: 1; }
.cta-band h2 {
  font-family: var(--display);
  font-size: clamp(28px, 5vw, 52px);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.98;
  margin: 0;
}
.cta-band h2 .mk { background: var(--blue); padding: 0 0.08em; }
.cta-band p { color: var(--steel); margin: 16px 0 0; max-width: 46ch; }
.cta-band .actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.cta-band .btn.ghost { color: var(--paper); border-color: rgba(255,255,255,0.4); }
@media (hover: hover) { .cta-band .btn.ghost:hover { background: var(--paper); color: var(--ink); } }

/* Product enquiry band (listing + category, desktop) — the original dark navy band,
   plus a mono eyebrow to echo the mobile enquiry card. Color/heading/copy inherit
   the base .cta-band (dark). Mobile keeps the white .enq-card. */
.cta-band.enq-band .enq-eye {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--blue-tint);
}
.cta-band.enq-band .enq-eye::before { content: ""; width: 26px; height: 1px; background: var(--blue-tint); }

/* Curated category shot beside the title (listing page) — confirms which category
   you drilled into. The product photos are white-bg shots and the page is pure
   white, so we render them FRAMELESS: the photo blends seamlessly into the page
   (a border/white box would just carve a rectangle out of the faint grid). */
.cat-hero { display: flex; align-items: center; justify-content: space-between; gap: clamp(18px, 4vw, 56px); }
.cat-hero-text { min-width: 0; }
.cat-hero-img {
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 0;
}
.cat-hero-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.d-only .cat-hero-img { width: clamp(160px, 20vw, 230px); }
.screen-head .cat-hero { align-items: flex-start; }
.screen-head .cat-hero-img { width: clamp(76px, 25vw, 104px); margin-top: 2px; }

/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--line-hd);
  background: var(--paper);
}
.site-foot .wrap { padding-block: 44px; }
.site-foot .top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 760px) { .site-foot .top { grid-template-columns: 1fr; gap: 24px; } }
.site-foot .co .bn { font-family: var(--display); font-size: 18px; text-transform: uppercase; }
.site-foot .co .cn { font-family: var(--cn); font-weight: 700; font-size: 13px; color: var(--mute); margin-top: 4px; }
.site-foot .co p { color: var(--mute); font-size: 13px; margin: 14px 0 0; max-width: 36ch; }
.site-foot .col h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 14px;
  font-weight: 500;
}
.site-foot .col a { display: block; padding: 5px 0; font-size: 14px; color: var(--ink); }
@media (hover: hover) { .site-foot .col a:hover { color: var(--blue); } }
.site-foot .bottom {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Reveal-on-scroll */
[data-rise] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-rise].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-rise] { opacity: 1; transform: none; transition: none; } }

/* ==========================================================
   Mini-app fixed screens (inner tabs)
   Each tab fills the space between top bar and tab bar; content
   is laid out to fit, deck-slide style, with little/no scrolling.
   ========================================================== */
.screen {
  height: calc(100dvh - var(--head-h) - var(--tab-h));
  height: calc(100svh - var(--head-h) - var(--tab-h));
  min-height: 420px;
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 3vw, 24px) var(--pad);
  gap: clamp(10px, 2vw, 16px);
  overflow: hidden;
}
.screen-head { flex: 0 0 auto; }
.screen-head .eyebrow { margin-bottom: 12px; }
.screen-head .h-stack .line { font-size: clamp(28px, 6.4vw, 50px); }
.screen-head .h-cn { margin-top: 8px; font-size: 14px; }
.screen-head .lead-sub { color: var(--mute); margin-top: 10px; max-width: 54ch; font-size: 14px; }

.fill {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.fill.g23 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
.fill.g23 .tile.wide { grid-column: 1 / -1; }
.fill.g22 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
@media (max-width: 520px) {
  .fill.g23 { grid-auto-rows: minmax(120px, 1fr); }
}

/* Flowing tile screen (longer lists, e.g. sub-categories) — same tiles,
   but the screen scrolls instead of clipping to one viewport. */
.screen.flow {
  height: auto;
  min-height: calc(100svh - var(--head-h) - var(--tab-h));
  overflow: visible;
  padding-bottom: clamp(20px, 6vw, 32px);
}
.fill.flow {
  flex: 0 0 auto;
  grid-template-rows: none;
  grid-template-columns: 1fr 1fr;
  /* Bound the row height — an `auto` (max-content) track grows to the product
     image's intrinsic height, ballooning each tile to ~1000px on real iOS.
     Clamp to a square-ish tile (capped at 240px through the tablet range). */
  grid-auto-rows: minmax(160px, min(58vw, 240px));
  /* Full-bleed gallery (Instagram/RedNote): break out of the screen's side padding
     so the images use the whole width; the text above keeps its inset. Transparent
     container + a 1px ink ring per tile keeps the seams while letting any empty cell
     (e.g. a listing's odd last row) show the page background instead of a dark fill. */
  margin-inline: calc(-1 * var(--pad));
  background: transparent;
  border: 0;
}
.fill.flow .tile { min-height: 0; box-shadow: 0 0 0 1px var(--ink); }
.fill.flow .tile.wide { grid-column: 1 / -1; min-height: 92px; }

/* Product listing grid (mobile): a clean card grid with visible gutters instead
   of the full-bleed seamed gallery — each framed tile reads as a separate card. */
.fill.flow.cards { margin-inline: calc(-1 * var(--pad) + 8px); gap: 8px; }
.fill.flow.cards .tile.prod { box-shadow: 0 0 0 1px var(--line-hd); }

/* Sub-category chip strip — horizontal thumbnail quick-switch above the listing
   grid (Amazon-style). Real <a> links; JS upgrades taps to an in-place swap. */
.subnav {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav { gap: 10px; align-items: stretch; user-select: none; -webkit-user-select: none; }
.mp-row { user-select: none; -webkit-user-select: none; }

/* Standardised on the product page's model chips: a white pill with a 1px
   border that turns dark navy when selected — here enriched with a square
   image thumbnail + bilingual label so it reads as a category picker. */
.subnav .chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--line-hd);
  border-radius: 1px;
  overflow: hidden;
  color: var(--ink);
  text-align: left;
  transition: border-color .14s ease, background .14s ease;
}
.subnav .chip-img {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--paper-lite);
  border-right: 1px solid var(--line);
  transition: border-color .12s ease;
}
.subnav .chip-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; display: block; }
.subnav .chip-txt { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; padding: 0 14px 0 11px; }
.subnav .chip .lbl {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
}
.subnav .chip.on { background: var(--blue); border-color: var(--blue); }
.subnav .chip.on .lbl { color: var(--paper); }
.subnav .chip.on .chip-img { border-right: 0; }
@media (hover: hover) {
  .subnav .chip:hover { border-color: var(--ink); }
}
/* mobile: full-bleed scroller (bleeds to screen edges) but the first pill insets */
.screen.flow .subnav { margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); }
/* desktop: sit above the grid with breathing room */
.d-only .subnav { margin-bottom: clamp(20px, 3vw, 30px); }

/* "Browse by type" header reuses the product page's model-pick / mp-head pattern
   (border-top divider + bold label + muted count) for a consistent control band. */
.type-pick .subnav { margin-bottom: clamp(18px, 3vw, 26px); }

/* 中文 sits under the English name inside the pill; count is a small oval badge. */
.subnav .chip .lbl-cn {
  font-family: var(--cn);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: normal;
  line-height: 1.2;
  color: var(--mute);
  white-space: nowrap;
}
.subnav .chip .cnt {
  flex: 0 0 auto;
  align-self: center;
  margin-left: 10px;
  margin-right: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--mute);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
}
.subnav .chip.on .lbl-cn { color: rgba(255,255,255,0.82); }
.subnav .chip.on .cnt { color: var(--paper); border-color: rgba(255,255,255,0.45); }

/* Product model selector — reuses the category-chip layout (thumbnail flush-left +
   EN / 中文 name) as a single swipeable strip, replacing the old thumbnail + code
   rows. <button>s need the cursor/font reset the category <a>s don't. */
.model-strip { margin-top: 2px; }
.model-strip .chip { cursor: pointer; font: inherit; }
/* Desktop: enough room to show every model at once — a 2-up grid (labels wrap to
   two lines) instead of a horizontal scroller. Mobile keeps the single swipeable
   row with one-line labels. */
@media (min-width: 860px) {
  .model-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    overflow-x: visible;
  }
  .model-strip .chip { flex: none; }
  .model-strip .chip .lbl { white-space: normal; line-height: 1.1; }
}

.tile {
  background: var(--paper-lite);
  padding: 0;                 /* image goes flush to the cell edge like desktop; caption + dark tiles pad themselves */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-width: 0; min-height: 0;
  transition: background .15s ease;
  color: var(--ink);
}
@media (hover: hover) { .tile:hover { background: #fff; } }
.tile .timg { flex: 1; min-height: 0; width: 100%; object-fit: cover; }   /* real photos: fill the tile, no white-bg blend */
.tile.t-contain .timg { object-fit: contain; }   /* curated white-bg category shots: show the whole product */
.tile.t-contain { background: #fff; }   /* pure white so the white-bg shot blends */
/* caption block: name + 中文 stacked tight (own row-gap), separate from the
   image which keeps the tile's larger gap above it */
.tile .tcap { display: flex; flex-direction: column; align-items: center; gap: 1px; align-self: stretch; padding: 0 12px 12px; }
.tile .tname { font-family: var(--display); font-size: 14px; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; }
/* Chinese name + forward arrow share one line, both in accent blue — a clean,
   aligned "tap" affordance (the arrow used to float absolute, misaligned). */
.tile .tcn { font-family: var(--cn); font-weight: 900; font-size: 14px; color: var(--blue); letter-spacing: 0.04em; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.tile .tgo { width: 14px; height: 14px; }

/* Product tiles (mobile listing): full-bleed cover image with soft rounded corners +
   the floating EN/中文 stamp — mirrors the desktop grid cards. */
.tile.prod { background: #fff; border-radius: 7px; overflow: hidden; }
.tile.prod .timg { object-fit: cover; padding: 0; }

/* Mobile enquiry card — "Signature card": bright white brutalist closer that spans
   the grid, mirroring the desktop CTA band on a white ground. (Desktop band is a
   full-bleed navy band; a boxed navy card reads as a heavy slab in the white grid,
   so the mobile card stays white.) */
.enq-card {
  grid-column: 1 / -1;
  align-self: start;          /* size to content — don't stretch to the tall product-tile row */
  border: 1px solid var(--line-hd);
  border-radius: 7px;
  background: var(--paper);
  padding: 20px 18px 16px;
  margin-top: 4px;
}
.enq-card .enq-eye {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mute);
  display: flex; align-items: center; gap: 8px;
}
.enq-card .enq-eye::before { content: ""; width: 18px; height: 1px; background: var(--blue); }
.enq-card .enq-h {
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: 25px; line-height: 1.08; letter-spacing: -0.01em;
  margin: 13px 0 0; color: var(--ink);
}
.enq-card .enq-h .mk {
  background: var(--blue); color: #fff; padding: 0 0.1em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.enq-card .enq-p { color: var(--mute); margin: 11px 0 0; font-size: 13.5px; line-height: 1.45; }
.enq-card .enq-acts { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.enq-card .enq-acts .btn { justify-content: center; width: 100%; border-radius: 1px; }
/* Mobile: the enquiry card renders as a block under the product grid (not a grid
   cell), so align it with the bled-out grid width and space it from the tiles. */
.screen.flow > .enq-card { margin: 8px calc(-1 * var(--pad) + 8px) 0; }

/* Services tiles (left-aligned with number + desc) */
.tile.svc { align-items: flex-start; justify-content: flex-start; text-align: left; gap: 4px; }
.tile.svc .tnum { position: static; }
.tile.svc .tname { margin-top: 4px; font-size: clamp(16px, 2.6vw, 26px); }
.tile.svc .tdesc { margin-top: auto; color: var(--mute); font-size: clamp(12px, 1.5vw, 14px); line-height: 1.4; }
.tile.svc.feat { background: var(--ink); }
.tile.svc.feat .tname { color: var(--paper); }
.tile.svc.feat .tcn { color: var(--blue-tint); }
.tile.svc.feat .tdesc { color: var(--steel); }
.tile.svc.feat .tnum { color: var(--blue-tint); }

/* Services — informative fixed list (mobile): desktop-style rows that
   divide the screen instead of a long scroll. */
.svc-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.svc-item {
  flex: 1 1 0;
  min-height: 0;
  background: var(--paper-lite);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(12px, 3vw, 18px) clamp(14px, 4vw, 18px);
  position: relative;
  overflow: hidden;
  transition: background .15s ease;
}
@media (hover: hover) { .svc-item:hover { background: #fff; } }
.svc-item.feat { background: var(--ink); }
@media (hover: hover) { .svc-item.feat:hover { background: var(--ink-2); } }
.si-num {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue);
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 2px;
}
.svc-item.feat .si-num { color: var(--blue-tint); }
.si-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.si-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.si-name {
  font-family: var(--display);
  font-size: clamp(18px, 5.4vw, 26px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}
.svc-item.feat .si-name { color: var(--paper); }
.si-cn { font-family: var(--cn); font-weight: 900; font-size: 13px; color: var(--blue); letter-spacing: 0.04em; }
.svc-item.feat .si-cn { color: var(--blue-tint); }
.si-desc { margin: 0; font-size: clamp(12px, 3.4vw, 13.5px); line-height: 1.4; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svc-item.feat .si-desc { color: var(--steel); }
.si-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  align-self: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line-hd);
  background: var(--paper);
  padding: 8px 11px;
  border-radius: 1px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.si-act svg { width: 13px; height: 13px; flex: 0 0 auto; }
.si-act .ar { font-family: var(--display); font-size: 12px; }
.si-act.wa { background: var(--wa); border-color: var(--wa); color: #fff; }
@media (hover: hover) {
  .svc-item:hover .si-act { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .svc-item:hover .si-act.wa { background: var(--wa-deep); color: #fff; border-color: var(--wa-deep); }
}
/* featured (dark) row */
.svc-item.feat .si-act { background: transparent; color: var(--paper); border-color: rgba(255,255,255,0.4); }
.svc-item.feat .si-act.wa { color: #fff; border-color: var(--wa); background: var(--wa); }

/* Contact screen — tap rows + branch fill grid */
.screen .tap-stack { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
.screen .branch-fill {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 1px; background: var(--ink); border: 1px solid var(--ink);
}
.branch-fill .b { background: var(--paper-lite); padding: clamp(12px, 2vw, 18px); display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.branch-fill .b.hq { background: #fff; }
.branch-fill .b .bnm { font-family: var(--display); font-size: clamp(15px, 2.2vw, 20px); text-transform: uppercase; letter-spacing: -0.01em; }
.branch-fill .b .bnm em { font-family: var(--cn); font-style: normal; font-weight: 700; font-size: 0.6em; color: var(--blue); margin-left: 6px; }
.branch-fill .b .baddr { color: var(--mute); font-size: clamp(11px, 1.4vw, 13px); line-height: 1.45; }
.branch-fill .b .bmap { margin-top: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }

/* Projects screen tiles */
.tile.proj-tile { padding: 0; align-items: stretch; justify-content: flex-end; }
.tile.proj-tile .pbody { position: relative; z-index: 1; padding: 12px 14px; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.9) 40%); }
.tile.proj-tile .pname { font-family: var(--display); font-size: clamp(13px, 1.9vw, 17px); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; }
.tile.proj-tile .pmeta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin-top: 4px; }
.tile.proj-tile .pph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--steel-dk); background:
  linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 20px 20px, 20px 20px; }
.tile.proj-tile .pyr { position: absolute; top: 9px; right: 12px; font-family: var(--mono); font-size: 10px; color: var(--blue); z-index: 1; }

.screen-foot { flex: 0 0 auto; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ==========================================================
   Immersive landing (Home) — no chrome, full viewport
   ========================================================== */
body.landing { padding: 0; }
.landing {
  position: relative;
  min-height: 100dvh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: clamp(18px, 4vw, 44px);
  overflow: hidden;
}

.landing-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex: 0 0 auto; z-index: 2; }
.landing-brand { display: inline-flex; align-items: center; gap: 9px; }
.landing-brand img { width: 30px; height: 30px; object-fit: contain; }
.landing-brand .bn { font-family: var(--display); font-size: 17px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; }
.landing-brand .bcn { font-family: var(--cn); font-weight: 700; font-size: 10px; color: var(--mute); letter-spacing: 0.06em; margin-top: 2px; }
.landing-brand .blk { display: flex; flex-direction: column; }

.landing-mid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  z-index: 1;
}
@media (max-width: 800px) { .landing-mid { grid-template-columns: 1fr; align-content: center; gap: clamp(18px, 4vw, 32px); } }

.landing-lead .h-stack .line { font-size: clamp(34px, 6.4vw, 76px); line-height: 0.9; white-space: nowrap; }
.landing-lead p { margin: 22px 0 0; max-width: 42ch; font-size: clamp(15px, 1.8vw, 17px); }
.landing-lead p em { font-family: var(--cn); font-style: normal; font-weight: 700; color: var(--mute); display: block; margin-top: 6px; }
.landing-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

.landing-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center; overflow: visible;
}
.landing-photo img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; opacity: 0; transition: opacity .3s ease; position: absolute; }
.landing-photo img.on { opacity: 1; }

@media (max-width: 800px) { .landing-photo { aspect-ratio: 4 / 3; max-height: 38vh; } }

.landing-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; z-index: 2; flex-wrap: wrap; }

/* Poster landing — centered hero + one prominent CTA (candise-style) */
.landing { justify-content: space-between; }
.landing-poster {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 26px);
  text-align: center;
  z-index: 1;
  min-height: 0;
}
.landing-poster .landing-photo {
  width: min(70vw, 300px);
  aspect-ratio: 1 / 1;
  max-height: 42vh;
  flex: 0 0 auto;
}
.landing-h .line { font-size: clamp(34px, 10vw, 58px); line-height: 0.9; white-space: nowrap; }
.landing-sub {
  margin: 0;
  max-width: 30ch;
  color: var(--mute);
  font-size: clamp(13px, 3.6vw, 15px);
  line-height: 1.5;
}

.landing-cta-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.landing-cta {
  width: 100%;
  max-width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 19px 28px;
  box-shadow: 0 14px 34px rgba(11,31,63,0.30);
  transition: background .15s ease, transform .12s ease;
}
.landing-cta .ar { font-family: var(--display); font-size: 16px; }
.landing-cta:active { transform: translateY(1px); }
@media (hover: hover) { .landing-cta:hover { background: var(--blue); border-color: var(--blue); } }

.landing-wa-btn {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--wa);
  color: #fff;
  padding: 9px 13px;
  border-radius: 1px;
}
.landing-wa-btn svg { width: 15px; height: 15px; }
@media (hover: hover) { .landing-wa-btn:hover { background: var(--wa-deep); } }

.landing-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.landing-hint .dot { width: 3px; height: 3px; background: var(--blue); flex: 0 0 auto; }
.landing-foot .mini-links { display: flex; gap: 16px; flex-wrap: wrap; }
.landing-foot a.mini { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
@media (hover: hover) { .landing-foot a.mini:hover { color: var(--blue); } }
.landing-foot .enter-cue { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); display: inline-flex; align-items: center; gap: 8px; }
.landing-foot .enter-cue .ar { color: var(--blue); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* Back button in the top bar (inner pages) */
.head-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-right: 4px;
  border: 1px solid var(--line-hd); background: var(--paper); border-radius: 1px;
  color: var(--ink); flex: 0 0 auto;
}
.head-back svg { width: 16px; height: 16px; }
@media (hover: hover) { .head-back:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } }
.head-left { display: inline-flex; align-items: center; gap: 6px; }

/* ==========================================================
   Responsive switch — mobile mini-app  <860px  |  desktop scroll  ≥860px
   ========================================================== */

/* Desktop top-nav links inside the header */
.nav-d { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-d a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 12px;
  position: relative;
  white-space: nowrap;
  transition: color .15s ease;
}
.nav-d a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 2px; background: var(--blue);
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
@media (hover: hover) { .nav-d a:hover::after { transform: scaleX(1); } }
.nav-d a.active { color: var(--blue); }
.nav-d a.active::after { transform: scaleX(1); }

/* Back-eyebrow — the parent-context eyebrow doubling as the back control */
.eyebrow-back { gap: 6px; }
.eyebrow-back .bk { display: inline-flex; align-items: center; color: var(--blue); }
.eyebrow-back .bk svg { width: 14px; height: 14px; display: block; }
.eyebrow-back:active { background: var(--paper-deep); }
@media (hover: hover) { .eyebrow-back:hover { border-color: var(--ink); } }

/* ---- MOBILE: < 860px ---- */
@media (max-width: 859px) {
  :root { --head-h: 0px; }              /* no top bar on mobile */
  .d-only { display: none !important; }
  .nav-d { display: none !important; }
  .site-foot { display: none !important; }
  /* top bar removed on mobile: back lives in the eyebrow/breadcrumb, the tab
     bar carries nav (incl. Contact), and WhatsApp stays reachable contextually */
  .site-head { display: none !important; }

  /* ---- App-shell -------------------------------------------------------------
     The mobile page is a viewport-tall flex column: a scrollable content region
     above an in-flow tab bar. Because the tab bar is a flex CHILD (not position:
     fixed), the content region is bounded above it by layout — the last card can
     never hide behind it, with no scroll-runway hack and no reliance on the
     browser reporting vh / safe-area insets correctly (some Huawei/HarmonyOS
     browsers don't). Home is the immersive landing (no tab bar) — left untouched. */
  body:not([data-page="home"]) {
    height: 100vh;            /* fallback for engines without dvh */
    height: 100dvh;           /* tracks the live viewport as the address bar shows/hides */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* the visible content main is the bounded scroll region */
  .screen, .pd-page { flex: 1 1 auto; min-height: 0; height: auto; }
  .screen.flow, .pd-page {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .screen:not(.flow) { overflow: hidden; }   /* fixed one-screen tabs stay put */
  .pd-page { padding-bottom: clamp(20px, 5vw, 28px); }
  /* tab bar joins the column instead of floating over the content */
  .tabbar { position: static; flex: 0 0 auto; }

  body[data-page="home"] .tabbar { display: none !important; }
  body[data-page="home"] { padding-bottom: 0; }
  /* larger tap target for the back-eyebrow */
  .eyebrow-back { padding: 9px 12px; }
}

/* ---- DESKTOP: ≥ 860px ---- */
@media (min-width: 860px) {
  :root { --head-h: 64px; }
  .m-only { display: none !important; }
  .tabbar { display: none !important; }
  .head-back { display: none !important; }
  .head-wa .t { display: inline !important; }
  body { padding-bottom: 0; }
  .site-head .bar { gap: 24px; }
  /* push the WhatsApp button to the far right, nav fills the middle */
  .site-head .head-wa { margin-left: 8px; }
}