/* =========================================================
   GSS Website V2.0 - lean stylesheet
   Cumulative: it contains exactly the rules the pages shipped so far
   need, and nothing else. Every rule below is referenced by at least
   one page in this folder.

   Brand spec (unchanged from the approved prototype;
   brand gold re-confirmed by the user on 2026-10-09):
     Primary gold  #FABE00   (--brand)
     Charcoal      #4C4948   (--ink)
     Deep amber    #F6AB50   (--brand-deep)
     Light gray    #E5E6E6   (--paper)

   Fonts: Roboto is SELF-HOSTED as a variable font (latin + symbols
   subsets, ~62 KB total) so there is no third-party render-blocking
   request. Font Awesome is reduced to a 3-glyph subset. Alibaba PuHuiTi
   was dropped - every shipped page is English-only, so the CJK webfont
   was dead weight.
   ========================================================= */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/roboto-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/roboto-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/roboto-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/roboto-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/roboto-variable-symbols.woff2') format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/roboto-variable-symbols.woff2') format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/roboto-variable-symbols.woff2') format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/roboto-variable-symbols.woff2') format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}

/* ===== Font Awesome - 16-glyph subset (icons used by shipped pages) =====
   The full FA 6.4 CDN stylesheet + webfonts were replaced by this
   subset so the <i> glyphs, metrics and layout stay identical.
   Codepoints: fa-arrow-right U+F061, fa-arrow-up U+F062, fa-arrow-up-right-dots U+E4B7, fa-ban U+F05E, fa-chevron-left U+F053, fa-chevron-right U+F054, fa-circle-check U+F058, fa-file-pdf U+F1C1, fa-gauge-high U+F625, fa-leaf U+F06C, fa-robot U+F544, fa-shield-halved U+F3ED, fa-stopwatch U+F2F2, fa-truck-loading U+F4DE, fa-unlock-keyhole U+F13E, fa-wind U+F72E
*/
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('assets/fonts/fa-subset.woff2') format('woff2');
}
.fa-solid {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
.fa-arrow-right::before { content: "\f061"; }
.fa-arrow-up::before { content: "\f062"; }
.fa-arrow-up-right-dots::before { content: "\e4b7"; }
.fa-ban::before { content: "\f05e"; }
.fa-chevron-left::before { content: "\f053"; }
.fa-chevron-right::before { content: "\f054"; }
.fa-circle-check::before { content: "\f058"; }
.fa-file-pdf::before { content: "\f1c1"; }
.fa-gauge-high::before { content: "\f625"; }
.fa-leaf::before { content: "\f06c"; }
.fa-robot::before { content: "\f544"; }
.fa-shield-halved::before { content: "\f3ed"; }
.fa-stopwatch::before { content: "\f2f2"; }
.fa-truck-loading::before { content: "\f4de"; }
.fa-unlock-keyhole::before { content: "\f13e"; }
.fa-wind::before { content: "\f72e"; }

:root {
  /* ===== GSS Brand Colors (confirmed) ===== */
  --brand:      #FABE00;   /* Logo Color 1 — amber / gold (primary) */
  --brand-deep: #F6AB50;   /* VI Accent 1 — deeper amber (gradients / hover) */
  --ink:        #4C4948;   /* Logo Color 2 — charcoal (text & dark sections) */
  --ink-deep:   #3A3736;   /* derived shade of charcoal (footer / contrast) */
  --paper:      #E5E6E6;   /* VI Accent 2 — light gray (tint bgs, dividers) */

  /* Neutrals */
  --white: #FFFFFF;
  --bg:    #FBFAF8;        /* warm off-white to pair with gold */
  --body:  #46423F;        /* clearer warm-charcoal body text (kills the gray haze) */
  --muted: #6B6764;
  --line:  #E7E4E1;

  /* ===== Fonts ===== */
  /* Cross-platform Latin stack: Roboto → Arial → Helvetica / San Francisco (Mac/iOS) → sans-serif.
     CJK falls through to Alibaba PuHuiTi / system CJK sans after the Latin chain. */
  --font-head: "Roboto", "Helvetica Neue", Helvetica, "-apple-system", BlinkMacSystemFont, Arial, "Alibaba PuHuiTi", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-body: "Roboto", "Helvetica Neue", Helvetica, "-apple-system", BlinkMacSystemFont, Arial, "Alibaba PuHuiTi", "Microsoft YaHei", "PingFang SC", sans-serif;

  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 10px 30px rgba(76,73,72,.10);
  --shadow-lg: 0 18px 50px rgba(76,73,72,.18);
  --maxw: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  font-family: var(--font-body);
  color: var(--body);
  background: #fff;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: var(--font-head); font-weight: 700; letter-spacing: .3px; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 22px; border-radius: 6px;
  font-weight: 600; font-size: 15px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  border: 1.5px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--brand); color: var(--ink); }
.btn-primary:hover { background: var(--brand-deep); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost:hover { background: rgba(255,255,255,.22); }
/* scoped to receiving-dispatching page only: Explore Scenarios button = white bg + bright yellow text */
.solution-rd a.btn-ghost[href="#modes"] { background: #fff; color: #FABE00; border-color: #fff; }
.solution-rd a.btn-ghost[href="#modes"]:hover { background: rgba(255,255,255,.85); color: #FABE00; border-color: #FABE00; }
.btn-outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-outline:hover { background: rgba(250,190,80,.14); }
.btn-lg { padding: 15px 30px; font-size: 16px; }
.see-all-wrap { text-align: center; margin-top: 40px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .25s ease, box-shadow .25s ease;
  padding: 18px 0;
}
.site-header.scrolled {
  background: rgba(255,255,255,.96);
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  backdrop-filter: blur(8px);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.brand-logo { height: 44px; width: auto; align-self: flex-start; display: block; }
.logo-dark { display: block; }
.logo-light { display: none; }
/* Hero header is transparent over dark video: drop-shadow keeps light logo readable */
.site-header:not(.scrolled) .logo-dark { filter: drop-shadow(0 2px 5px rgba(0,0,0,.55)); }
.site-header.scrolled .logo-dark { display: none; }
.site-header.scrolled .logo-light { display: block; }
.footer-brand .brand-logo { height: 48px; display: block; }
.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav a { color: rgba(255,255,255,.92); font-weight: 700; font-size: 15px; letter-spacing: .3px; position: relative; padding: 4px 0; }
.site-header.scrolled .main-nav a { color: var(--ink); }
.main-nav a::after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background: var(--brand); transition: width .2s ease; }
.main-nav a:hover::after { width: 100%; }

/* ===== Mega menu (Solutions hover) ===== */
/* NOTE: .mega is positioned against .site-header (not the nav item) so its left edge
   aligns with the logo. The hover trigger still comes from .nav-item.has-mega. */
.nav-item { display: flex; align-items: center; list-style: none; }
.nav-item.has-mega > a .caret { display: inline-block; font-size: 9px; margin-left: 5px; vertical-align: middle; line-height: 1; opacity: .8; transition: transform .2s ease; }
.nav-item.has-mega:hover > a .caret { transform: rotate(180deg); }
.mega {
  position: absolute; top: 100%;
  /* left edge aligns with the logo (container content-left). No max()/nested calc — kept simple for renderer safety. */
  left: calc((100vw - var(--maxw)) / 2 + 20px);
  /* width = main content width (shell minus the 24px side padding on each side) */
  width: calc(var(--maxw) - 48px); max-width: calc(100vw - 48px);
  background: #fff; color: var(--ink);
  border-radius: 0 0 8px 8px;
  border-top: 3px solid var(--brand);
  box-shadow: 0 22px 60px rgba(76,73,72,.20);
  padding: 28px 30px 30px;
  display: grid; grid-template-columns: 260px minmax(220px, 1fr) 1fr 1fr;
  gap: 28px;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 60; pointer-events: none;
}
/* taller hover bridge so the cursor can travel from the nav item down to the panel */
.mega::before { content:""; position: absolute; top: -40px; left: 0; right: 0; height: 40px; }
.nav-item.has-mega:hover .mega,
.nav-item.has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.mega a::after { display: none !important; } /* kill inherited nav underline */
.mega-thumb { position: relative; border-radius: 8px; overflow: hidden; min-height: 190px; background: var(--paper, #FBF3E3); }
.mega-thumb img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; display: block; }
.mega-thumb-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(0deg, rgba(76,73,72,.88), rgba(76,73,72,0)); }
.mega-intro { display: flex; flex-direction: column; }
.mega-intro .kicker { margin-bottom: 10px; }
.mega-title { font-size: 16px; font-weight: 700; color: var(--ink-deep); margin: 0 0 8px; line-height: 1.35; }
.mega-desc { font-size: 13.5px; line-height: 1.6; color: var(--muted, #6B6764); margin: 0 0 16px; }
.mega-all { margin-top: auto; font-size: 13.5px; font-weight: 700; color: var(--brand-deep, #D88E1C); text-decoration: none; }
.mega-all:hover { text-decoration: underline; }
.mega-col { display: flex; flex-direction: column; gap: 2px; }
.mega-col a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; transition: background .15s ease, color .15s ease, padding-left .15s ease; }
.mega-col a:hover { background: rgba(250,190,80,.16); color: var(--ink-deep); padding-left: 14px; }
/* Products mega: 4 equal text-only columns (no image / no intro) */
.products-mega { grid-template-columns: repeat(4, 1fr); gap: 34px 28px; align-items: start; }
.mega-col-title { font-size: 15.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--ink-deep); margin: 0 0 10px; padding: 0 10px; }
/* Products links: normal weight (not bold), only the column title is emphasized */
.products-mega .mega-col a { font-weight: 400; }
/* When the viewport is at/under the shell width the centered container has no side margin,
   so pin the panel to the 24px content edge (which equals the logo's left edge). */
@media (max-width: 1200px) { .mega { left: 24px; } }
@media (max-width: 960px) { .nav-item.has-mega .mega { display: none !important; } }
.nav-cta { padding: 10px 20px; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; }
.nav-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 6px; }
.site-header.scrolled .nav-toggle span { background: var(--ink); }

/* ===== Inner pages: header always solid white (home keeps transparent-over-hero) ===== */
body.inner .site-header {
  background: rgba(255,255,255,.96);
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  backdrop-filter: blur(8px);
}
body.inner .logo-dark { display: none; }
body.inner .logo-light { display: block; }
body.inner .main-nav a { color: var(--ink); }
body.inner .lang-btn { color: var(--ink); background: transparent; border-color: rgba(76,73,72,.3); }
body.inner .lang-btn:hover { border-color: var(--brand); color: var(--brand); }
body.inner .nav-toggle span { background: var(--ink); }

/* ===== Language switcher (top-right) ===== */
.lang-switch { position: relative; flex: 0 0 auto; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: .3px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.35);
  padding: 8px 14px; border-radius: 6px; cursor: pointer; transition: all .2s ease;
}
.lang-btn:hover { background: rgba(255,255,255,.18); border-color: var(--brand); }
.site-header.scrolled .lang-btn { color: var(--ink); background: transparent; border-color: rgba(76,73,72,.3); }
.site-header.scrolled .lang-btn:hover { border-color: var(--brand); color: var(--brand); }
.lang-caret { font-size: 10px; opacity: .85; }
.lang-menu {
  position: absolute; bottom: calc(100% + 10px); right: 0; min-width: 168px;
  list-style: none; margin: 0; padding: 6px;
  background: #fff; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.16);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .18s ease; z-index: 60;
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu li a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: 14px; text-decoration: none;
  transition: background .15s ease;
}
.lang-menu li a:hover { background: rgba(250,190,80,.14); }
.lang-menu li a.active { color: var(--ink-deep); font-weight: 700; background: rgba(250,190,80,.20); }
.lang-menu li a .tick { color: var(--brand); opacity: 0; font-size: 13px; }
.lang-menu li a.active .tick { opacity: 1; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; color: #fff; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: brightness(1.06) saturate(1.08); }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgba(58,55,54,.78) 0%, rgba(58,55,54,.40) 48%, rgba(250,190,80,.32) 100%);
}
.hero-content { position: relative; z-index: 2; padding-top: 90px; max-width: 860px; }
/* 仅首页 hero 居中（带 id="home"）；内页 hero 保持左对齐 */
.hero#home .hero-content { max-width: 1120px; margin: 0 auto; text-align: center; }
.hero-eyebrow { font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--brand); margin-bottom: 18px; }
.hero-title { font-size: clamp(34px, 5.4vw, 64px); line-height: 1.05; color: #fff; font-weight: 900; }
.hero-lead { margin: 22px 0 34px; font-size: clamp(16px, 1.6vw, 19px); color: rgba(255,255,255,.9); max-width: 620px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
/* projects.html 专属：hero 文案与按钮居中，标题略小、副标略大 */
.hero.hero-center .hero-content { max-width: 1120px; margin: 0 auto; text-align: center; }
.hero.hero-center .hero-actions { justify-content: center; }
.hero.hero-center .hero-title { font-size: clamp(26px, 4vw, 46px); }
.hero.hero-center .hero-lead { font-size: clamp(20px, 2.4vw, 27px); margin-left: auto; margin-right: auto; }
.hero.hero-nowrap .hero-title { white-space: nowrap; }
.hero.hero-center.hero-nowrap .hero-title { font-size: clamp(34px, 5.4vw, 64px); }
.hero.hero-center.hero-nowrap .hero-lead { font-size: clamp(17px, 1.8vw, 21px); max-width: 980px; margin-left: auto; margin-right: auto; }
@media (max-width: 768px) { .hero.hero-nowrap .hero-title { white-space: normal; } }
/* about.html hero 居中专属字号（用 #about id 作用域，避免漏加类导致规则落空） */
#about .hero-title { font-size: clamp(34px, 5.4vw, 64px); }
#about .hero-lead { font-size: clamp(17px, 1.8vw, 21px); max-width: 980px; margin-left: auto; margin-right: auto; }
@media (max-width: 768px) { #about .hero-title { font-size: clamp(28px, 6vw, 40px); } }
/* contact.html hero 居中专属字号（专属类 hero-contact 作用域，id=top 与 projects/support 重复故不能用 #top） */
.hero.hero-center.hero-contact .hero-title { font-size: clamp(34px, 5.4vw, 64px); white-space: nowrap; }
.hero.hero-center.hero-contact .hero-lead { font-size: clamp(17px, 1.8vw, 21px); max-width: 980px; margin-left: auto; margin-right: auto; }
/* contact.html: 压缩 banner 高度，仅留背景图，去掉标题/副标题/按钮后作为矮 banner */
.hero.hero-center.hero-contact { min-height: 220px; }
@media (max-width: 768px) { .hero.hero-center.hero-contact { min-height: 160px; } }
@media (max-width: 768px) { .hero.hero-center.hero-contact .hero-title { font-size: clamp(28px, 6vw, 40px); white-space: normal; } }
/* resources.html hero 居中专属字号（专属类 hero-resources 作用域，id=top 与 projects/support/contact 重复故不能用 #top） */
.hero.hero-center.hero-resources .hero-title { font-size: clamp(34px, 5.4vw, 64px); }
.hero.hero-center.hero-resources .hero-lead { font-size: clamp(17px, 1.8vw, 21px); max-width: 980px; margin-left: auto; margin-right: auto; }
@media (max-width: 768px) { .hero.hero-center.hero-resources .hero-title { font-size: clamp(28px, 6vw, 40px); } }
.hero.hero-center.hero-solutions .hero-title { font-size: clamp(34px, 5.4vw, 64px); }
.hero.hero-center.hero-solutions .hero-lead { font-size: clamp(17px, 1.8vw, 21px); max-width: 980px; margin-left: auto; margin-right: auto; }
@media (max-width: 768px) { .hero.hero-center.hero-solutions .hero-title { font-size: clamp(28px, 6vw, 40px); } }
.hero.hero-center.hero-support .hero-title { font-size: clamp(34px, 5.4vw, 64px); }
.hero.hero-center.hero-support .hero-lead { font-size: clamp(17px, 1.8vw, 21px); max-width: 980px; margin-left: auto; margin-right: auto; }
@media (max-width: 768px) { .hero.hero-center.hero-support .hero-title { font-size: clamp(28px, 6vw, 40px); } }
/* support.html 紧凑 band（hero-blog）也要按 hero-center 居中：覆盖 hero-blog 的 text-align:left（提升特异性） */
.hero.hero-blog.hero-center.hero-support .hero-content { text-align: center; max-width: 1120px; }
.hero.hero-blog.hero-center.hero-support .hero-lead { margin-left: auto; margin-right: auto; max-width: 980px; }
.hero-scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.6); border-radius: 8px; z-index: 2; }
.hero-scroll::after { content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:4px; height:8px; background:var(--brand); border-radius: 6px; animation: scrolldot 1.6s infinite; }
@keyframes scrolldot { 0%{opacity:0;top:8px} 40%{opacity:1} 80%{opacity:0;top:22px} 100%{opacity:0} }

/* Compact hero variant for the Blog listing page (360px band).
   padding-top:84px pushes the centered content clear of the fixed site header
   (which overlaps the hero top on inner pages); the headline is shrunk to suit
   the short band. */
.hero.hero-blog { min-height: 360px; padding-top: 84px; }
.hero.hero-blog .hero-content { padding-top: 0; margin: 0 auto; max-width: var(--maxw); text-align: left; }
.hero.hero-blog .hero-title { font-size: clamp(28px, 4vw, 44px); }
.hero.hero-blog .hero-lead { font-size: clamp(15px, 1.5vw, 18px); margin: 16px 0 0; max-width: 640px; }
.hero.hero-blog + .page-breadcrumb { margin-top: 0; }

/* =========================================================
   Article detail (blog-detail.html)
   Two-column body: left = article text, right = sticky sidebar.
   Reuses the .hero-blog band, .page-breadcrumb and the standard
   header/footer from the Blog listing page.
   ========================================================= */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}
.article-main { min-width: 0; }                 /* let long media/words shrink inside the grid track */

.article-title { font-size: clamp(26px, 3vw, 38px); line-height: 1.2; font-weight: 700; color: var(--ink); margin: 0 0 18px; letter-spacing: -0.01em; }

/* Author box + post navigation (blog-detail) */
.author-box { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid #E5E6E6; border-radius: var(--radius); padding: 22px; margin: 44px 0 8px; }
.author-avatar { width: 72px; height: 72px; flex: 0 0 72px; border-radius: var(--radius); background: var(--brand); color: #4C4948; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 26px; letter-spacing: .02em; }
.author-info { flex: 1; min-width: 0; }
.author-name { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--ink); }
.author-bio { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.author-wa { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #1ebe5d; text-decoration: none; }
.author-wa:hover { text-decoration: underline; }
.wa-ico { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }

.post-nav { display: flex; gap: 16px; margin: 28px 0 0; }
.post-nav a { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid #E5E6E6; border-radius: var(--radius); background: #fff; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease; }
.post-nav a:hover { border-color: var(--brand); box-shadow: 0 3px 12px rgba(250,190,0,.18); }
.post-next { text-align: right; align-items: flex-end; }
.pn-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); font-weight: 700; }
.pn-title { font-size: 15px; color: var(--ink); font-weight: 600; line-height: 1.4; }

@media (max-width: 560px) {
  .post-nav { flex-direction: column; }
  .author-box { flex-direction: column; }
  .author-avatar { width: 56px; height: 56px; flex-basis: 56px; font-size: 20px; }
}

/* FAQ module on blog-detail reuses the shared global .faq-* accordion (no custom CSS needed) */

.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  color: var(--muted); font-size: 14px; margin: 0 0 22px;
}
.article-meta .dot { color: #c9c5c2; }

.article-main h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; margin: 38px 0 14px; scroll-margin-top: 100px; }
.article-main h3 { font-size: clamp(18px, 2vw, 22px); margin: 28px 0 12px; scroll-margin-top: 100px; }
.article-main p { margin: 0 0 18px; line-height: 1.78; color: var(--body); }
.article-main p.lead { font-size: 18px; line-height: 1.7; color: var(--ink); margin-bottom: 26px; }
.article-main img { width: 100%; height: auto; border-radius: var(--radius); margin: 6px 0 26px; }
.article-main figure { margin: 6px 0 26px; }
.article-main figure img { margin: 0; }
.article-main figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.article-main blockquote {
  margin: 24px 0; padding: 14px 20px;
  border-left: 4px solid var(--brand);
  background: var(--bg); border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink); font-style: italic;
}
.article-main ul, .article-main ol { margin: 0 0 18px; padding-left: 22px; }
.article-main li { margin: 0 0 8px; line-height: 1.7; }

.article-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 22px; }
.side-block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.side-title { font-size: 15px; font-weight: 700; color: var(--ink-deep); margin: 0 0 14px; }
.toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.toc a { color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1.45; transition: color .2s ease; }
.toc a:hover, .toc a.active { color: var(--brand); }
.toc a.active { font-weight: 600; }
.side-post { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: var(--ink); padding: 12px 0; border-top: 1px solid var(--line); }
.side-post:first-of-type { border-top: 0; padding-top: 0; }
.side-post img { width: 76px; height: 52px; object-fit: cover; border-radius: var(--radius-sm); flex: 0 0 auto; }
.side-post .sp-text { font-size: 14px; line-height: 1.4; }
.side-post .sp-text strong { display: block; font-weight: 600; color: var(--ink-deep); margin-bottom: 2px; }

/* narrow screens: stack the sidebar beneath the article */
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; gap: 32px; }
  .article-sidebar { position: static; top: auto; }
}

/* Blog listing pagination (replaces the old "See all" button) */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 36px; flex-wrap: wrap; }
.pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.pagination a:hover { border-color: var(--brand); color: var(--brand); }
.pagination a.active { background: var(--brand); border-color: var(--brand); color: var(--ink-deep); }
.pagination a[aria-disabled="true"] { color: #c9c5c2; cursor: not-allowed; pointer-events: none; }
.pagination .page-prev, .pagination .page-next { gap: 6px; }

/* ---------- Sections ---------- */
.section { padding: 40px 0; border-top: 1px solid rgba(246,171,80,.28); }
.section-alt { background: #FBF3E3; }

/* ===== Core Products (homepage showcase strip) ===== */
.core-prod-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 22px; }
.core-prod-head h2 { font-size: clamp(28px, 3.6vw, 44px); margin: 0 0 10px; }
.core-prod-head .section-lead { margin: 0; max-width: 560px; }
.core-prod-head-center { flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 26px; }
.core-prod-head-center h2 { font-size: clamp(28px, 3.6vw, 44px); margin: 0 0 6px; }
.core-prod-head-center .section-lead { max-width: 640px; margin: 0; }
.core-prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.prod-show-card { position: relative; display: block; height: 230px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.prod-show-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .35s ease; }
.prod-show-card:hover .prod-show-img { transform: scale(1.06); }
.prod-show-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; background: linear-gradient(to top, rgba(76,73,72,.94) 0%, rgba(76,73,72,.72) 55%, rgba(76,73,72,0) 100%); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .2px; }
@media (max-width: 980px) { .core-prod-grid { grid-template-columns: repeat(2, 1fr); } .core-prod-head { flex-direction: column; align-items: flex-start; gap: 14px; } .core-prod-head-center { align-items: center; text-align: center; } }
@media (max-width: 520px) { .core-prod-grid { grid-template-columns: 1fr; } }
#challenges { background: var(--white); }

/* TCO section: revert to plain #FBF3E3 (Ownership.webp background removed per user request) */
.section-dark { background: var(--ink-deep); color: rgba(255,255,255,.85); }

/* ---------- Explore GSS — gold CTA band (distinct from dark footer) ---------- */
/* Explore GSS — gold band, 2-col: left intro / right tabbed feed (distinct from dark footer) */
.gold-cta { background: var(--brand); color: var(--ink-deep); }
.gold-cta .kicker { color: var(--ink-deep); opacity: 1; font-weight: 800; }
.explore-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 52px; align-items: start; }
.explore-intro h2 { color: var(--ink-deep); font-size: clamp(28px, 3.4vw, 40px); margin: 10px 0 16px; }
.explore-intro p { color: var(--ink); font-weight: 500; font-size: 16px; line-height: 1.7; margin-bottom: 16px; }
.intro-stats { list-style: none; display: flex; gap: 26px; margin: 22px 0 26px; padding: 0; flex-wrap: wrap; }
.intro-stats li { display: flex; flex-direction: column; }
.intro-stats strong { font-family: var(--font-head); font-size: 30px; color: var(--ink-deep); line-height: 1; }
.intro-stats span { font-size: 12.5px; color: var(--ink); margin-top: 6px; opacity: .85; }
.gold-cta .btn-primary { background: var(--ink-deep); color: #fff; }
.gold-cta .btn-primary:hover { background: #2a2726; }
/* right: tabbed feed */
.tab-head { display: flex; gap: 10px; margin-bottom: 18px; }
.tab-btn { font-family: var(--font-body); font-size: 15px; font-weight: 700; padding: 10px 22px; border-radius: 6px; border: 1.5px solid rgba(76,73,72,.35); background: transparent; color: var(--ink-deep); cursor: pointer; transition: all .2s ease; }
.tab-btn:hover { border-color: var(--ink-deep); }
.tab-btn.active { background: var(--ink-deep); color: #fff; border-color: var(--ink-deep); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: feedFade .25s ease; }
@keyframes feedFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.feed-item { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.5); border: 1px solid rgba(76,73,72,.16); border-radius: var(--radius-sm); padding: 10px 14px 10px 10px; margin-bottom: 12px; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.feed-item:last-child { margin-bottom: 0; }
.feed-item:hover { transform: translateX(4px); background: rgba(255,255,255,.72); box-shadow: 0 10px 24px rgba(58,55,54,.16); border-color: var(--ink-deep); }
.feed-thumb { flex: 0 0 100px; width: 100px; height: 100px; border-radius: 8px; object-fit: cover; display: block; background: rgba(76,73,72,.10); }
.feed-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.feed-meta { font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: .3px; }
.feed-meta.tag { align-self: flex-start; color: var(--ink-deep); background: rgba(76,73,72,.12); border-radius: 6px; padding: 2px 8px; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; }
.feed-title { font-size: 14px; color: var(--ink-deep); font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed-summary { font-size: 12.5px; color: rgba(76,73,72,.82); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.feed-go { flex: 0 0 auto; color: var(--ink-deep); font-size: 16px; font-weight: 700; }
.feed-item:hover .feed-go { color: var(--brand-deep); }
.section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-head-mini { text-align: center; margin: 0 auto 28px; }
.section-head-mini h2 { font-size: clamp(18px, 2vw, 24px); font-weight: 600; color: var(--ink-deep); letter-spacing: .3px; }
.mode-panel .section-head-mini h2 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; }
.section-dark .section-head-mini h2 { color: #fff; }
.kicker { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }
.kicker.light { color: var(--brand); }
.about-figure { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 56px; }
.wwa-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: center; margin-bottom: 56px; }
.wwa-title { font-size: clamp(28px, 3.6vw, 40px); color: var(--ink); margin: 6px 0 18px; line-height: 1.15; }
.wwa-text p { font-size: 17px; line-height: 1.9; color: var(--ink); margin: 0; }
.wwa-media .about-figure { margin: 0; }
@media (max-width: 768px) { .wwa-grid { grid-template-columns: 1fr; gap: 28px; } .wwa-text { order: 2; } .wwa-media { order: 1; } }
.mv-rows { display: flex; flex-direction: column; gap: 44px; max-width: 1080px; margin: 0 auto; padding-top: 8px; }
.mv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.mv-row.reverse .mv-media { order: 2; }
.mv-row.reverse .mv-text { order: 1; }
.mv-media img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }
.mv-tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand); margin-bottom: 16px; }
.mv-statement { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.45; color: var(--ink); font-weight: 700; margin: 0; }
@media (max-width: 768px) {
  .mv-row { grid-template-columns: 1fr; gap: 22px; }
  .mv-row.reverse .mv-media { order: 0; }
  .mv-row.reverse .mv-text { order: 0; }
}

/* ---------- Quality Control showcase band ---------- */
.qc-band { position: relative; min-height: 440px; display: flex; align-items: center; justify-content: center; background-color: var(--ink-deep); background-size: cover; background-position: center; overflow: hidden; }
.qc-overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(58,55,54,.62) 0%, rgba(58,55,54,.38) 60%, rgba(250,190,80,.28) 100%); }
.qc-inner { position: relative; z-index: 1; text-align: center; padding: 40px 20px; }
.qc-title { margin: 0; color: #fff; font-family: var(--font-head); font-weight: 900; font-size: clamp(30px, 4.4vw, 54px); letter-spacing: .5px; line-height: 1.05; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.qc-play {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 28px; padding: 14px 30px;
  background: rgba(250,190,80,.14);
  border: 2px solid var(--brand, #FABE50);
  color: #fff; font-family: var(--font-head); font-weight: 700;
  font-size: 16px; letter-spacing: .3px; cursor: pointer;
  border-radius: 6px; backdrop-filter: blur(2px);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.qc-play:hover { background: var(--brand, #FABE50); color: var(--ink-deep, #2b2926); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(250,190,80,.35); }
.qc-play-icon { font-size: 12px; line-height: 1; display: inline-flex; }
.qc-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.qc-modal[hidden] { display: none; }
.qc-modal-backdrop { position: absolute; inset: 0; background: rgba(28,26,25,.82); backdrop-filter: blur(3px); }
.qc-modal-dialog { position: relative; z-index: 1; width: min(960px, 100%); background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.qc-video { display: block; width: 100%; height: auto; max-height: 82vh; background: #000; }
.qc-modal-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 8px; border: none; background: var(--brand, #FABE50); color: var(--ink-deep, #2b2926); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.4); z-index: 2; }
.qc-modal-close:hover { background: #fff; }

/* ===== Hero entrance animation (runs on page load) ===== */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(46px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-content > .hero-eyebrow,
.hero-content > .hero-title,
.hero-content > .hero-lead,
.hero-content > .hero-actions {
  animation: heroRise .9s cubic-bezier(.22,.61,.36,1) both;
}
.hero-content > .hero-eyebrow { animation-delay: .05s; }
.hero-content > .hero-title   { animation-delay: .18s; }
.hero-content > .hero-lead    { animation-delay: .32s; }
.hero-content > .hero-actions { animation-delay: .46s; }
/* Hero highlight chips — staggered rise, appearing one by one after the text */
.hero-highlights .hero-highlight { opacity: 0; animation: heroRise .7s cubic-bezier(.22,.61,.36,1) both; }
.hero-highlights .hero-highlight:nth-child(1) { animation-delay: .60s; }
.hero-highlights .hero-highlight:nth-child(2) { animation-delay: .72s; }
.hero-highlights .hero-highlight:nth-child(3) { animation-delay: .84s; }
.hero-highlights .hero-highlight:nth-child(4) { animation-delay: .96s; }
@media (prefers-reduced-motion: reduce) {
  .hero-content > .hero-eyebrow,
  .hero-content > .hero-title,
  .hero-content > .hero-lead,
  .hero-content > .hero-actions,
  .hero-highlights .hero-highlight { animation: none; opacity: 1; transform: none; }
  .hero-zoom { animation: none; transform: none; }
}

/* Hero — rotating three-sentence headline (12s loop, 4s per line, one at a time) */
.hero-rotate {
  margin: 0 auto;
  max-width: 1080px;
  display: grid;
  text-align: center;
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.05;
  font-weight: 900;
  color: #fff;
  text-wrap: balance;
}
.hero-line {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
/* Text switching is driven by the VIDEO clock in JS (index.html), not a CSS
   timer, so it stays perfectly in sync with home-hero.mp4 at any real length. */
.hero-line.is-active {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .hero-line { transition: none; transform: none; }
}

/* Hero — background slow zoom on load (scoped to .hero-zoom, used on Support hero) */
.hero-zoom { animation: heroZoom 1.9s cubic-bezier(.22,.61,.36,1) both; }
@keyframes heroZoom {
  from { transform: scale(1.14); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-zoom { animation: none; transform: none; }
}

/* ===== Who We Are — columns slide in from both sides on scroll ===== */
.js-anim .wwa-grid .wwa-text,
.js-anim .wwa-grid .wwa-media {
  opacity: 0;
  transition: opacity .85s ease, transform .85s cubic-bezier(.22,.61,.36,1);
}
.js-anim .wwa-grid .wwa-text  { transform: translateX(-90px); }
.js-anim .wwa-grid .wwa-media { transform: translateX(90px); }
.wwa-grid.in-view .wwa-text,
.wwa-grid.in-view .wwa-media {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 768px) {
  .js-anim .wwa-grid .wwa-text,
  .js-anim .wwa-grid .wwa-media { transform: translateY(50px); }
}
@media (prefers-reduced-motion: reduce) {
  .wwa-grid .wwa-text,
  .wwa-grid .wwa-media { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== Mission & Vision — rows use the shared .reveal-item fly-in ===== */
@media (prefers-reduced-motion: reduce) {
  .mv-row .mv-media,
  .mv-row .mv-text { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 768px) { .qc-band { min-height: 320px; } .cert-hero { white-space: normal; font-size: clamp(24px, 7vw, 40px); } }

/* ---------- Global Certifications & Compliance ---------- */
.cert-head { text-align: center; max-width: 900px; margin: 0 auto 46px; }
.cert-hero { font-size: clamp(26px, 4.2vw, 50px); font-weight: 900; line-height: 1.06; color: #fff; letter-spacing: .5px; margin: 18px 0 22px; white-space: nowrap; }
.cert-accent { color: var(--brand); }
.cert-desc { font-size: 17px; line-height: 1.85; color: rgba(255,255,255,.82); max-width: 760px; margin: 0 auto; }

.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cert-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-top: 3px solid var(--accent, var(--brand)); border-radius: var(--radius-sm); padding: 26px 22px 24px; transition: transform .2s ease, background .2s ease; }
.cert-card:hover { transform: translateY(-5px); background: rgba(255,255,255,.08); }
.cert-card.is-iso,.cert-card:nth-of-type(1) { --accent: #3BA7C4; }
.cert-card.is-ce,.cert-card:nth-of-type(2) { --accent: var(--brand); }
.cert-card.is-iecex,.cert-card:nth-of-type(3) { --accent: #E0533D; }
.cert-card.is-food,.cert-card:nth-of-type(4){ --accent: #4CAF7D; }

.cert-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent, var(--brand)); color: #2b2624; font-weight: 900; font-size: 15px; margin-bottom: 14px; }
.cert-card h3 { font-size: 16.5px; line-height: 1.4; color: #fff; margin-bottom: 10px; }
.cert-card p { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.74); margin: 0; }

/* Global Certifications — cards use the shared .reveal-item fly-in (staggered via generic nth-child) */
.js-anim .reveal-grid .cert-card.in-view:hover { transform: translateY(-5px); background: rgba(255,255,255,.08); transition: transform .2s ease, background .2s ease; }

.js-anim .news-grid .news-card { opacity: 0; transform: translateY(48px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.js-anim .news-grid.in-view .news-card { opacity: 1; transform: none; }
.js-anim .news-grid.in-view .news-card:nth-child(2) { transition-delay: .12s; }
.js-anim .news-grid.in-view .news-card:nth-child(3) { transition-delay: .24s; }
.js-anim .news-grid.in-view .news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--brand); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .cert-grid .cert-card { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.cert-marquee { overflow: hidden; margin-top: 50px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cert-track { display: flex; gap: 56px; width: max-content; animation: certScroll 24s linear infinite; }
.cert-track span { font-size: 19px; font-weight: 800; letter-spacing: 1px; color: var(--brand); white-space: nowrap; }
@keyframes certScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 900px) { .cert-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .cert-grid { grid-template-columns: 1fr; } }

/* ---------- ESG Values ---------- */
.esg-band { position: relative; background-color: var(--ink-deep); background-size: cover; background-position: center; overflow: hidden; padding: 40px 0; }
.esg-overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(58,55,54,.88) 0%, rgba(58,55,54,.66) 55%, rgba(58,55,54,.52) 100%); }
.esg-inner { position: relative; z-index: 1; }
.esg-head { text-align: center; margin-bottom: 46px; }
.esg-title { color: #fff; font-size: clamp(28px, 4vw, 46px); font-weight: 900; margin-top: 6px; letter-spacing: .5px; }
.esg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.esg-col { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); padding: 30px 26px; }
.esg-pillar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.esg-letter { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; background: var(--brand); color: var(--ink-deep); font-weight: 900; font-size: 18px; }
.esg-pname { color: #fff; font-size: 19px; font-weight: 700; letter-spacing: .5px; }
.esg-list { list-style: none; margin: 0; padding: 0; }
.esg-list li { color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.5; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.1); }
.esg-list li:first-child { border-top: 0; }
/* ESG columns use the shared .reveal-item fly-in (staggered via generic nth-child) */
@media (prefers-reduced-motion: reduce) {
  .esg-col { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 768px) { .esg-grid { grid-template-columns: 1fr; } .esg-band { padding: 40px 0; } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 40px; align-items: start; }
.contact-form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 34px; box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 7px; letter-spacing: .3px; }
.form-field .req { color: var(--brand); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .18s ease, box-shadow .18s ease; box-sizing: border-box;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(250,190,80,.18);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 13px; color: var(--muted); margin: 2px 0 20px; }
.contact-form .btn-primary { width: 100%; justify-content: center; }
.contact-info { background: var(--ink-deep); color: rgba(255,255,255,.85); border-radius: var(--radius); padding: 34px 32px; }
.contact-info h3 { color: var(--brand); font-size: 18px; margin: 0 0 18px; letter-spacing: .5px; }
.info-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.10); }
.info-item:last-of-type { border-bottom: 0; }
.info-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 8px; background: rgba(250,190,80,.18); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
.info-body span { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.5); margin-bottom: 4px; }
.info-body a, .info-body p { color: #fff; font-size: 15px; text-decoration: none; margin: 0; line-height: 1.5; }
.info-body a:hover { color: var(--brand); }
.contact-map { margin-top: 22px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(135deg, #4a4644, #343130); min-height: 150px; display: flex; align-items: center; justify-content: center; }
.contact-map span { color: rgba(255,255,255,.6); font-size: 14px; letter-spacing: 1px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.section-head h2 { font-size: clamp(28px, 3.6vw, 44px); color: var(--ink); margin-top: 4px; }
.section-head .section-sub { max-width: 640px; margin: 14px auto 0; font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.section-dark .section-head h2 { color: #fff; }
#clients .section-head { max-width: 1040px; }
#clients .section-head h2 { white-space: nowrap; }
@media (max-width: 768px) { #clients .section-head h2 { white-space: normal; } }
/* TCO / TVO section heads: wider, no wrap */
#tco .section-head, #tvo .section-head { max-width: 1040px; }
#tco .section-head h2, #tvo .section-head h2 { white-space: nowrap; font-size: clamp(23px, 2.7vw, 33px); }
@media (max-width: 768px) {
  #tco .section-head h2, #tvo .section-head h2 { white-space: normal; }
}
.section-lead { margin-top: 14px; font-size: 17px; color: var(--muted); }
.section-dark .section-lead { color: rgba(255,255,255,.7); }

/* ---------- Solutions cards ---------- */
.card-grid { display: grid; gap: 26px; }
.solutions-grid { grid-template-columns: repeat(3, 1fr); }
.home-sol-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .home-sol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .home-sol-grid { grid-template-columns: 1fr; } }
.sol-card {
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column;
  position: relative;
}
.sol-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* Core Solutions — all 12 items rendered as large cards via .home-sol-grid (4×3) */

/* Project filter bar */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 30px; }
#work .section-head { margin-bottom: 28px; }
.filter-btn {
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  padding: 10px 18px; border-radius: 6px; cursor: pointer; text-decoration: none;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.filter-btn:hover { border-color: var(--brand); color: var(--brand); }
.filter-btn.active { background: var(--brand); color: var(--ink-deep); border-color: var(--brand); }
.sol-media { position: relative; height: 200px; background-size: cover; background-position: center; filter: brightness(1.07) contrast(1.03) saturate(1.05); }
.sol-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.card-badge {
  position: absolute;
  top: 12px;
  left: 0;
  z-index: 2;
  display: inline-block;
  padding: 6px 26px 6px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ink-deep);
  background: var(--brand);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%);
  filter: drop-shadow(0 2px 5px rgba(76,73,72,.35));
}
/* Blog/Resources cards: the category tag floats on the image (top-left), not in
   the body below it. Restored after the projects cleanup pruned it (blog cards
   are .sol-card and keep the tag on the image). */
.sol-card .res-tag { position: absolute; top: 12px; left: 0; z-index: 3; margin: 0; }
.sol-body { padding: 22px 24px 26px; }
.sol-body h3 { font-size: 21px; color: var(--ink); margin-bottom: 8px; }
.sol-body p { font-size: 15px; }
.card-link { display: inline-block; margin-top: 14px; color: var(--brand); font-weight: 700; font-size: 14px; }

/* ---------- Resources ---------- */
.res-card { cursor: pointer; }

/* ===== Resources — scroll-reveal for card grids (Latest News / Blogs) ===== */
.js-anim .reveal-grid .sol-card {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.js-anim .reveal-grid .sol-card.in-view {
  opacity: 1;
  transform: none;
}
.js-anim .reveal-grid .sol-card.in-view:nth-child(2) { transition-delay: .12s; }
.js-anim .reveal-grid .sol-card.in-view:nth-child(3) { transition-delay: .24s; }
.js-anim .reveal-grid .sol-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  transition: transform .2s ease, box-shadow .2s ease;
}
/* solutions.html (#appsGrid) and projects.html (#projGrid): each card now
   reveals individually as it scrolls into view, so the row-by-row fly-in is
   handled by the generic .sol-card.in-view rules above — no grid-wide
   stagger is needed (and a grid-wide stagger would make a lone card that
   enters by itself appear with an unwanted delay). */
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal-grid .sol-card { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.res-tag { display: inline-block; width: -webkit-fit-content; width: fit-content; padding: 5px 17px 5px 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--ink-deep); background: var(--brand); clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%); filter: drop-shadow(0 2px 4px rgba(76,73,72,.22)); margin-bottom: 12px; }
.res-tag.event { background: var(--ink); color: #fff; }
.res-tag.case { background: var(--ink); color: var(--brand); }
.res-meta { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.res-meta .dot { margin: 0 7px; opacity: .5; }
.featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 52px; position: relative; }
.featured-media { min-height: 320px; background-size: cover; background-position: center; filter: brightness(1.07) saturate(1.05); }
.featured-body { padding: 44px 42px; display: flex; flex-direction: column; justify-content: center; }
.featured-body .res-tag { margin-bottom: 14px; }
.featured .res-tag { position: absolute; top: 12px; left: 0; z-index: 3; margin: 0; }
.featured-body h2 { font-size: clamp(24px, 2.6vw, 34px); color: var(--ink); margin: 0 0 14px; line-height: 1.2; }
.featured-body p { font-size: 16px; line-height: 1.7; color: var(--muted); margin-bottom: 22px; }
@media (max-width: 820px) { .featured { grid-template-columns: 1fr; } .featured-media { min-height: 220px; } .featured-body { padding: 30px 26px; } }

/* ===== Resources — Newsroom (Latest Events & News) two-column ===== */
/* ===== Resources — Latest News as a uniform card grid ===== */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.news-card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  box-shadow: var(--shadow); text-decoration: none; color: inherit;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(250,190,80,.55); }
.news-card-media {
  position: relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center;
  filter: brightness(1.05) saturate(1.05);
}
.news-card .res-tag { position: absolute; top: 12px; left: 0; margin: 0; z-index: 3; }
.news-card-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: rgba(0,0,0,.55); padding: 14px 16px 16px; }
.news-card-meta { font-size: 12.5px; color: rgba(255,255,255,.82); margin-bottom: 8px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.news-card-meta .dot { opacity: .55; }
.news-card-title { font-size: 18px; line-height: 1.35; color: #fff; margin: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .18s ease; }
.news-card:hover .news-card-title { color: var(--brand); }
@media (max-width: 980px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }

/* ===== Resources — Blogs & Custom Stories as a list ===== */
.blog-list { display: flex; flex-direction: column; }
.blog-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center;
  padding: 24px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: background .18s ease;
}
.blog-row:first-child { padding-top: 0; }
.blog-row:last-child { border-bottom: none; padding-bottom: 0; }
.blog-row:hover { background: rgba(250,190,80,.06); }
.blog-thumb {
  width: 200px; height: 132px; border-radius: var(--radius-sm);
  background-size: cover; background-position: center;
  filter: brightness(1.07) contrast(1.03) saturate(1.05);
}
.blog-body { display: flex; flex-direction: column; min-width: 0; }
.blog-body .res-tag { margin-bottom: 10px; }
.blog-body h3 { font-size: 20px; color: var(--ink); line-height: 1.35; margin-bottom: 8px; transition: color .18s ease; }
.blog-row:hover .blog-body h3 { color: var(--brand-deep); }
.blog-body p { font-size: 14.5px; line-height: 1.7; color: var(--body); margin: 0 0 14px; }
.blog-foot { display: flex; align-items: center; gap: 18px; }
.blog-foot .res-meta { margin-top: 0; }
.blog-link { color: var(--brand-deep); font-weight: 700; font-size: 14px; white-space: nowrap; transition: color .18s ease; }
.blog-link::after { content: " \2192"; }
.blog-row:hover .blog-link { color: var(--ink-deep); }
@media (max-width: 768px) {
  .blog-row { grid-template-columns: 1fr; gap: 14px; padding: 20px 0; }
  .blog-thumb { width: 100%; height: 180px; }
  .blog-foot { flex-wrap: wrap; gap: 8px 16px; }
}

/* ===== Featured insights as a 3-card grid ===== */
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.featured-grid .featured { display: flex; flex-direction: column; margin-bottom: 0; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.featured-grid .featured:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(76,73,72,.18); border-color: rgba(250,190,80,.55); }
.featured-grid .featured-media { min-height: 188px; }
.featured-grid .featured-body { padding: 22px 22px 26px; justify-content: flex-start; }
.featured-grid .featured-body h2 { font-size: clamp(18px, 1.7vw, 21px); margin: 0 0 12px; line-height: 1.3; }
.featured-grid .featured-body p { font-size: 14.5px; line-height: 1.65; margin-bottom: 16px; }
.featured-grid .featured .card-link { margin-top: auto; }
@media (max-width: 900px) { .featured-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .featured-grid { grid-template-columns: 1fr; gap: 18px; } }
/* slightly lighter than footer (#3A3736) so the two dark bands don't merge */

.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dl-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; text-decoration: none; }
.dl-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(58,55,54,.14); }
.dl-cover { width: 100%; height: 300px; object-fit: cover; display: block; }
.dl-info { display: flex; gap: 16px; align-items: center; padding: 18px 22px; }
.dl-ico { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 8px; background: var(--brand); color: #3A3736; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; letter-spacing: .5px; }
.dl-body h3 { font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.dl-body span { font-size: 13px; color: var(--muted); }
@media (max-width: 860px) { .dl-grid { grid-template-columns: 1fr; } }

.prod-block { margin-bottom: 44px; }
.prod-block:last-child { margin-bottom: 0; }
.prod-block-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--brand); }
.prod-block-head h3 { margin: 0; font-size: 22px; color: var(--ink); }
.prod-block-head .prod-count { font-size: 13px; font-weight: 800; color: var(--brand); letter-spacing: .4px; }
.prod-list { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 36px; }
.prod-list li { break-inside: avoid; padding: 11px 0 11px 22px; position: relative; font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--line); }
.prod-list li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 7px; height: 7px; background: var(--brand); border-radius: 2px; }
.prod-list a { transition: color .18s ease; }
.prod-list a:hover { color: var(--brand); }
.prod-block-head h3 a:hover { color: var(--brand); }
@media (max-width: 900px) { .prod-list { columns: 2; } }
@media (max-width: 600px) { .prod-list { columns: 1; } }

/* ===== Products Category page — card grid ===== */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cat-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; box-shadow: var(--shadow); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.cat-card:hover { border-color: var(--brand); transform: translateY(-4px); box-shadow: 0 16px 34px rgba(58,55,54,.16); }
.cat-cover { width: 100%; height: 300px; object-fit: cover; display: block; }
.cat-name { display: block; padding: 16px 16px 6px; text-align: center; font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: .2px; }
.cat-desc { display: block; padding: 0 16px 18px; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.cat-card:hover .cat-name { color: var(--brand); }
@media (max-width: 980px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cat-grid { grid-template-columns: 1fr; } }

/* ===== Products Category page — pillars / service blocks ===== */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pillar { background: #fff; border: 1px solid rgba(246,171,80,.35); border-radius: var(--radius-sm); padding: 28px 26px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background-color .5s ease; }
.pillar:nth-child(2), .pillar:nth-child(3), .pillar:nth-child(4), .pillar:nth-child(5), .pillar:nth-child(6) { background: #fff; }
.pillar:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-4px); box-shadow: 0 12px 26px rgba(76,73,72,.12); }
.pillar-no { font-size: 13px; font-weight: 800; color: var(--ink-deep); letter-spacing: 1px; }
.pillar h3 { font-size: 21px; color: var(--ink); margin: 8px 0 8px; }
.pillar p { font-size: 15px; }
/* staggered reveal for pillars (element also carries .reveal-item) */
.js-anim .reveal-grid.pillars .pillar { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.js-anim .reveal-grid.pillars .pillar.in-view { opacity: 1; transform: translateY(0); }
.js-anim .reveal-grid.pillars .pillar.in-view:nth-child(2) { transition-delay: .10s; }
.js-anim .reveal-grid.pillars .pillar.in-view:nth-child(3) { transition-delay: .20s; }
.js-anim .reveal-grid.pillars .pillar.in-view:nth-child(4) { transition-delay: .30s; }
.js-anim .reveal-grid.pillars .pillar.in-view:nth-child(5) { transition-delay: .40s; }
.js-anim .reveal-grid.pillars .pillar.in-view:nth-child(6) { transition-delay: .50s; }

/* ===== Products Category page — feature checklist ===== */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 36px; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.6; color: var(--ink); }
.check-list .check-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.check-list .check-ic svg { width: 14px; height: 14px; display: block; }
.check-list .check-ic svg path { fill: var(--ink-deep); }
.check-list strong { color: var(--ink-deep); }
@media (max-width: 720px) { .check-list { grid-template-columns: 1fr; gap: 14px; } }

/* ===== Resources — scroll-reveal for Downloads cards ===== */
.js-anim .reveal-grid .dl-card {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.js-anim .reveal-grid .dl-card.in-view { opacity: 1; transform: none; }
.js-anim .reveal-grid .dl-card.in-view:nth-child(2) { transition-delay: .08s; }
.js-anim .reveal-grid .dl-card.in-view:nth-child(3) { transition-delay: .16s; }
.js-anim .reveal-grid .dl-card.in-view:nth-child(4) { transition-delay: .24s; }
.js-anim .reveal-grid .dl-card.in-view:nth-child(5) { transition-delay: .32s; }
.js-anim .reveal-grid .dl-card.in-view:nth-child(6) { transition-delay: .40s; }
.js-anim .reveal-grid .dl-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  background: rgba(255,255,255,.12);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal-grid .dl-card { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Reliable Services — split (vertical tabs + pinned panel) ----------
   Left: 6 stage steps (number + icon + name). Right: a sticky pinned panel
   that swaps its content (title, one-line summary, 2 support points, scene
   image) when a step is hovered/clicked. Mobile collapses to an accordion. */
.srv-split { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 62%); column-gap: 40px; align-items: start; margin-top: 6px; }
.srv-nav { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 96px; }
.srv-step { display: flex; align-items: center; gap: 14px; box-sizing: border-box; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.srv-step-no { flex: 0 0 auto; font-size: 13px; font-weight: 800; letter-spacing: 1px; color: var(--ink-deep); opacity: .5; transition: color .25s ease, opacity .25s ease; }
.srv-step-ic { flex: 0 0 26px; width: 26px; height: 26px; color: var(--ink-deep); opacity: .5; transition: color .25s ease, opacity .25s ease; }
.srv-step-ic svg { width: 100%; height: 100%; display: block; }
.srv-step-name { flex: 1 1 auto; font-size: 16px; font-weight: 600; line-height: 1.25; }
.srv-step-arrow { flex: 0 0 0; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid var(--brand); opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
.srv-step:hover { border-color: var(--brand); }
.srv-step.is-active { background: var(--brand); border-color: var(--brand); box-shadow: 0 12px 26px rgba(250,190,0,.22); }
.srv-step.is-active .srv-step-no,
.srv-step.is-active .srv-step-ic,
.srv-step.is-active .srv-step-name { color: #fff; opacity: 1; }
.srv-step.is-active .srv-step-arrow { opacity: 1; transform: translateX(0); border-left-color: #fff; }
.srv-panel-wrap { position: sticky; top: 96px; }
.srv-panel { display: none; }
.srv-panel.is-active { display: block; animation: srvFade .45s ease both; }
@keyframes srvFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.srv-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 14px 34px rgba(76,73,72,.08); }
.srv-panel-media { position: relative; aspect-ratio: 32 / 9; background: #e9e9e9; }
.srv-panel-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.srv-panel-body { padding: 26px 28px 30px; }
.srv-panel-title { font-size: 20px; line-height: 1.18; margin: 6px 0 10px; color: var(--ink); }
.srv-panel-lead { font-size: 16px; line-height: 1.55; color: var(--body); margin: 0 0 18px; }
.srv-panel-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.srv-panel-points li { position: relative; padding-left: 34px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.srv-check { position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; }
.srv-check::after { content: ""; width: 11px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .srv-panel.is-active { animation: none; } }
@media (max-width: 720px) {
  .srv-split { display: block; }
  .srv-nav { position: static; }
  .srv-panel-wrap { display: none; }
  .srv-panel.is-active { display: block; margin: 8px 0 14px; animation: srvFade .4s ease both; }
  .srv-card { box-shadow: none; }
}

/* =========================================================
   Solution Detail Page (专题页) — Bulk Material Handling etc.
   ========================================================= */

/* Hero (centered, big title, capacity badge) */
.hero.hero-sol { min-height: 100vh; }
.hero.hero-sol .hero-content { max-width: 1120px; margin: 0 auto; text-align: center; padding-top: 100px; }
.hero.hero-sol .hero-title { font-size: clamp(34px, 5.4vw, 64px); }
.hero.hero-sol .hero-lead { font-size: clamp(17px, 1.8vw, 21px); max-width: 880px; margin-left: auto; margin-right: auto; }
.hero.hero-sol .hero-actions { justify-content: center; }
/* Hero left-aligned variant (per-page override, used on solution-receiving-dispatching) */
.hero.hero-left .hero-content,.hero.hero-right .hero-content { max-width: var(--maxw); margin: 0 auto; text-align: left; }
.hero.hero-left .hero-title { max-width: 60%; font-size: clamp(34px, 4.8vw, 56px); }
.hero.hero-left .hero-lead { max-width: 60%; margin-left: 0; margin-right: 0; }
.hero.hero-left .hero-actions { justify-content: flex-start; margin-top: 28px; }
.hero.hero-left .hero-actions .btn { border-radius: 6px; }
/* Hero overlay variant: darken the text column (left), let the right side of the photo show through */
.hero.hero-left .hero-overlay {
  background: linear-gradient(90deg,
    rgba(30,28,27,.95) 0%,
    rgba(30,28,27,.70) 44%,
    rgba(30,28,27,.20) 64%,
    rgba(30,28,27,0) 88%);
}
/* Hero highlight cards (2x2) below subtitle, used on solution-receiving-dispatching */
.hero.hero-left .hero-highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 60%; margin-top: 26px; }
.hero.hero-left .hero-highlight { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: 6px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20); backdrop-filter: blur(2px); transition: background .2s ease, border-color .2s ease; }
.hero.hero-left .hero-highlight i { flex: 0 0 auto; width: 22px; text-align: center; font-size: 20px; color: var(--brand); }
.hero.hero-left .hero-highlight span { color: rgba(255,255,255,.94); font-size: 14px; font-weight: 600; line-height: 1.32; }
.hero.hero-left .hero-highlight:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.45); }

/* Industry Challenges Addressed */
.challenge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.challenge-card {
  background: #FBF3E3; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px; box-shadow: var(--shadow); position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.js-anim .reveal-grid.in-view .challenge-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(58,55,54,.18); border-color: rgba(250,190,80,.55); }
.challenge-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--brand); }
.challenge-card .ch-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 8px; background: var(--brand); margin-bottom: 16px; box-shadow: 0 6px 16px rgba(250,190,80,.32); color: #4C4948; transition: background .25s ease, box-shadow .25s ease, color .25s ease; }
.js-anim .reveal-grid.in-view .challenge-card:hover .ch-icon { background: var(--ink-deep); color: #fff; box-shadow: 0 8px 22px rgba(76,73,72,.38); }
.challenge-card .ch-icon svg { width: 26px; height: 26px; display: block; }
.challenge-card .ch-icon i { width: 26px; font-size: 22px; text-align: center; display: block; }
.challenge-card h3 { font-size: 19px; color: var(--ink); margin: 6px 0 10px; line-height: 1.25; }
.challenge-card p { font-size: 15px; color: var(--body); line-height: 1.65; }
@media (max-width: 1000px) { .challenge-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .challenge-grid { grid-template-columns: 1fr; } }

/* Processing Flow (two rows, arrow-connected steps) */
/* .flow-block { margin-bottom: 38px; } */
.flow-block:last-child { margin-bottom: 0; }
.flow-label {
  font-size: 14px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-deep); margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
}
.flow-label::before { content: ""; width: 26px; height: 3px; background: var(--brand); border-radius: 6px; }
.flow-row { display: flex; align-items: stretch; flex-wrap: nowrap; /*gap: 24px 10px;*/ /*padding-top: 14px;*/ overflow-x: auto; }
.flow-step {
  flex: 1 1 0; min-width: 0; border-radius: 6px; padding: 0px 4px;
  text-align: center; font-size: 14px; font-weight: 400; color: var(--ink-deep);
  background: #fff;
  /* box-shadow: var(--shadow); position: relative; */
  display: flex; align-items: center; justify-content: center; 
  min-height: 42px;
  transition: background .5s ease, color .5s ease;
}
/* 默认白底；hover 时缓慢切换为品牌金 */
.flow-step:hover { background: var(--brand); color: var(--ink-deep); }
.flow-arrow { flex: 0 0 30px; display: flex; align-items: center; justify-content: center; color: var(--brand-deep); font-size: 20px; font-weight: 700; }
@media (max-width: 640px) {
  .flow-step { flex-basis: 0; padding: 10px 6px 8px; font-size: 13px; }
  .flow-arrow { flex-basis: 20px; font-size: 17px; }
}

/* Core Equipment — Main Dryers (featured) + Auxiliary Systems (compact) */
.equip-sublabel { display: block; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand); margin: 4px 0 14px; }
.equip-sublabel + .equip-mini-grid { margin-top: 0; }

/* Scoped to receiving-dispatching page: make equip-sublabel a centered, high-contrast pill */
.solution-rd .equip-sublabel {
  width: fit-content; margin: 6px auto 18px; text-align: center;
  font-size: 14px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-deep); background: var(--brand); padding: 10px 22px; border-radius: 6px;
}
/* scoped to receiving-dispatching page: Core Equipment image zoom on hover */
.solution-rd .equip-mini-media { transition: transform .55s ease; }
.solution-rd .equip-mini:hover .equip-mini-media { transform: scale(1.12); }
/* Benchmark Projects cards: image zoom on hover */
.solution-rd .case-media { transition: transform .55s ease; }
.solution-rd .case-card:hover .case-media { transform: scale(1.12); }
/* keep caption area aligned when titles span 1 vs 2 lines */
.solution-rd .equip-mini-body { min-height: 86px; justify-content: flex-end; }
.solution-rd .equip-mini-body h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.equip-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.equip-mini { background: #fff; border: 1px solid var(--line); /*border-radius: var(--radius-sm);*/ overflow: hidden; box-shadow: 0 1px 4px rgba(76,73,72,.08); display: flex; flex-direction: column; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; position: relative; }
.equip-mini:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(76,73,72,.12); border-color: var(--brand); }
.equip-mini-media { width: 100%; height: 170px; flex: 0 0 170px; background-size: cover; background-position: center; filter: brightness(1.05) saturate(1.05); position: relative; overflow: hidden; }
.equip-mini-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.equip-mini-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 14px 12px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,0) 100%); }
.equip-mini-body h4 { font-size: 15.5px; color: #fff; font-weight: 700; line-height: 1.3; }
.equip-mini-body p { font-size: 13px; color: rgba(255,255,255,.88); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 860px) {
        .equip-mini-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .equip-mini-grid { grid-template-columns: 1fr; }
}

/* Application Cases */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease; text-decoration: none;
  position: relative;
}
.case-card .res-tag { position: absolute; top: 12px; left: 0; z-index: 3; margin: 0; }
.case-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.case-media { height: 190px; background-size: cover; background-position: center; filter: brightness(1.05) saturate(1.05); position: relative; overflow: hidden; }
.case-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-body { padding: 20px 22px 24px; }
.case-body h3 { font-size: 18px; color: var(--ink); margin: 10px 0 8px; }
.case-body p { font-size: 14px; color: var(--body); }
.case-body .card-link { margin-top: 12px; display: inline-block; }
@media (max-width: 860px) { .case-grid { grid-template-columns: 1fr; } }

/* Generic scroll-reveal for solution-detail grids (challenges / equipment / cases) */
.js-anim .reveal-grid .reveal-item { opacity: 0; transform: translateY(40px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.js-anim .reveal-grid .reveal-item.in-view { opacity: 1; transform: none; }
.js-anim .reveal-grid .reveal-item.in-view:nth-child(2) { transition-delay: .10s; }
.js-anim .reveal-grid .reveal-item.in-view:nth-child(3) { transition-delay: .20s; }
.js-anim .reveal-grid .reveal-item.in-view:nth-child(4) { transition-delay: .30s; }
.js-anim .reveal-grid .reveal-item.in-view:nth-child(5) { transition-delay: .40s; }
.js-anim .reveal-grid .reveal-item.in-view:nth-child(6) { transition-delay: .50s; }
/* Industry Challenges — explicit staggered fly-in (6 cards, one by one) */
.js-anim .challenge-grid .challenge-card { opacity: 0; transform: translateY(44px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease; }
.js-anim .challenge-grid.in-view .challenge-card { opacity: 1; transform: none; }
.js-anim .challenge-grid.in-view .challenge-card:nth-child(1) { transition-delay: 0s; }
.js-anim .challenge-grid.in-view .challenge-card:nth-child(2) { transition-delay: .10s; }
.js-anim .challenge-grid.in-view .challenge-card:nth-child(3) { transition-delay: .20s; }
.js-anim .challenge-grid.in-view .challenge-card:nth-child(4) { transition-delay: .30s; }
.js-anim .challenge-grid.in-view .challenge-card:nth-child(5) { transition-delay: .40s; }
.js-anim .challenge-grid.in-view .challenge-card:nth-child(6) { transition-delay: .50s; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal-grid .reveal-item { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* TCO / TVO cards — scroll-reveal fly-in (staggered) */
.js-anim .reveal-grid.tco-grid .tco-card {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.js-anim .reveal-grid.tco-grid .tco-card.in-view {
  opacity: 1;
  transform: translateY(0);
}
.js-anim .reveal-grid.tco-grid .tco-card.in-view:nth-child(2) { transition-delay: .10s; }
.js-anim .reveal-grid.tco-grid .tco-card.in-view:nth-child(3) { transition-delay: .20s; }
.js-anim .reveal-grid.tco-grid .tco-card.in-view:nth-child(4) { transition-delay: .30s; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal-grid.tco-grid .tco-card { opacity: 1; transform: none; transition: none; }
}

/* ---------- TCO (Total Cost of Ownership) ---------- */
.tco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tco-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.tco-card:hover { border-color: var(--brand); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(58,55,54,.12); }
.tco-media { height: 168px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; }
.tco-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tco-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(180deg, rgba(58,55,54,0) 0%, rgba(58,55,54,.34) 100%); }
.tco-body { padding: 18px 20px 22px; }
.tco-body h3 { font-size: 19px; color: var(--ink); margin: 0 0 8px; line-height: 1.25; }
.tco-body p { font-size: 14px; color: var(--body); line-height: 1.6; }
/* TCO & TVO card override: images replaced by centered brand icons, title centered */
#tco .tco-card, #tvo .tco-card { position: relative; border-radius: 6px; }
#tco .tco-media, #tvo .tco-media { height: auto; background: rgba(250,190,0,.10); display: flex; align-items: center; justify-content: center; padding: 28px 0; }
#tco .tco-media::after, #tvo .tco-media::after { display: none; }
#tco .tco-media .icon, #tvo .tco-media .icon { width: 48px; height: 48px; }
#tco .tco-media .icon path, #tvo .tco-media .icon path { fill: var(--ink); }
#tco .tco-body, #tvo .tco-body { text-align: center; }

/* ---------- Global MRO & Parts Supply (globe) ---------- */
.globe-section {
  position: relative;
  background: radial-gradient(130% 120% at 50% 0%, #1c2c4d 0%, #0e1626 72%);
  color: #fff;
  overflow: hidden;
}
.globe-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('assets/Partners.webp') center/cover no-repeat;
  opacity: .16;
  z-index: 0;
}
.globe-section > .container { position: relative; z-index: 1; }
.globe-section .kicker { color: var(--brand); }
.globe-section .section-head h2 { color: #fff; }
.globe-section .section-lead { color: rgba(255,255,255,.78); }
/* support.html (MRO module): bg.webp background, no blue gradient, black text, static earth */
.globe-section.globe-alt { background: url('assets/bg.webp') center/cover no-repeat; color: #111; }
.globe-section.globe-alt::before { display: none; }
.globe-section.globe-alt .kicker { color: #111; }
.globe-section.globe-alt .section-head h2 { color: #111; }
.globe-section.globe-alt .section-lead { color: rgba(0,0,0,.72); }
.globe-section.globe-alt .globe-note { color: rgba(0,0,0,.7); }
.globe-section.globe-alt .globe-note strong { color: #111; }
.globe-section.globe-alt .globe-img { animation: none; background: none; border: 0; box-shadow: none; filter: none; }
.globe-stage {
  position: relative;
  max-width: 1120px;
  margin: 34px auto 0;
  min-height: 460px;
}
.globe-img {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 360px; height: 360px;
  object-fit: contain;
  z-index: 1;
  filter: drop-shadow(0 18px 50px rgba(0,0,0,.45));
  pointer-events: none;
  animation: globeSpin 42s linear infinite;
}
@keyframes globeSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .globe-img { animation: none; }
}
.brand-ring {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.mro-logo {
  position: absolute;
  left: 50%; top: 50%;
  width: 150px; height: 150px;
  margin: -75px 0 0 -75px;
  transform: translate(var(--tx, 0), var(--ty, 0));
  transition: transform .25s ease;
  z-index: 1;
}
.mro-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: filter .2s ease;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
  animation: mroFloat 6s ease-in-out infinite;
}
.mro-logo:nth-child(2n) img { animation-duration: 5.2s; animation-delay: -2.6s; }
.mro-logo:nth-child(3n) img { animation-duration: 6.6s; animation-delay: -3.9s; }
.mro-logo:nth-child(4n) img { animation-duration: 5.7s; animation-delay: -1.3s; }
@keyframes mroFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.mro-logo:hover { z-index: 3; }
.mro-logo:hover img { filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)) brightness(1.12); }
@media (prefers-reduced-motion: reduce) {
  .mro-logo img { animation: none; }
}
.globe-note {
  text-align: center;
  margin-top: 26px;
  font-size: 15px;
  color: rgba(255,255,255,.7);
}
.globe-note strong { color: var(--brand); }

/* ---------- News cards (About) ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
.news-media { height: 178px; background-size: cover; background-position: center; filter: brightness(1.07) contrast(1.03) saturate(1.05); position: relative; overflow: hidden; }
.news-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.news-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.news-tag { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand); background: rgba(250,190,80,.16); padding: 4px 10px; border-radius: 6px; }
.news-date { font-size: 13px; color: var(--muted); }
.news-title { font-size: 19px; color: var(--ink); line-height: 1.3; margin-bottom: 10px; }
.news-excerpt { font-size: 14.5px; line-height: 1.7; color: var(--ink); margin: 0 0 16px; flex: 1; }
@media (max-width: 768px) { .news-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .js-anim .stats .stat,
  .js-anim .news-grid .news-card { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.center { text-align: center; margin-top: 44px; }

/* ---------- Explore (dark) ---------- */
/* (Explore GSS card styles live in the gold-cta block above) */

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-deep); color: rgba(255,255,255,.75); padding: 64px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.footer-brand p { margin: 14px 0 18px; font-size: 14px; max-width: 280px; }
.footer-contact { display: flex; flex-direction: column; gap: 8px; }
.footer-contact-line { font-size: 14px; color: rgba(255,255,255,.78); text-decoration: none; transition: color .15s ease; }
.footer-contact-line:hover { color: var(--brand); }
.footer-col h5 { color: var(--brand); font-size: 16px; margin-bottom: 14px; letter-spacing: .5px; }
.footer-col a { display: block; font-size: 14px; padding: 5px 0; color: rgba(255,255,255,.7); transition: color .15s ease; }
.footer-col a:hover { color: var(--brand); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; flex-wrap: wrap; gap: 10px; }
.footer-bottom-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.social a { margin-left: 18px; color: rgba(255,255,255,.7); }
.social a:first-child { margin-left: 0; }
.social a:hover { color: var(--brand); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .solutions-grid, .project-grid, .pillars, .tco-grid { grid-template-columns: repeat(2, 1fr); }
    .explore-split { grid-template-columns: 1fr; gap: 34px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .globe-stage { min-height: 420px; max-width: 1000px; }
  .globe-img { width: 300px; height: 300px; }
  .brand-ring { transform: scale(.82); }
  .mro-logo { width: 132px; height: 132px; margin: -66px 0 0 -66px; }
}
@media (max-width: 720px) {
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: #fff; padding: 10px 24px 18px;
    box-shadow: var(--shadow); display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { color: var(--ink); padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .solutions-grid, .project-grid, .pillars, .tco-grid, .stats, .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 40px 0; }
  .globe-stage { min-height: auto; padding: 12px 0 4px; margin-top: 0; }
  .globe-section .section-head { margin-bottom: 0; }
  .globe-section.globe-alt { background: #FBF3E3; }
  .globe-section.globe-alt .globe-img { display: none; }
  .brand-ring { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 auto; }
  .mro-logo { position: static; transform: none; margin: 0; width: auto; height: auto; display: flex; align-items: center; justify-content: center; }
  .mro-logo img { width: 100%; height: auto; max-height: 150px; object-fit: contain; animation: none; }
  .globe-note { font-size: 13px; }
}

/* ---------- Client logo wall (projects) ---------- */
.clients { background: var(--section-alt, #FBF3E3); border-top: 1px solid rgba(246,171,80,.28); }
.logo-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; margin-top: 36px; }
.logo-cell { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:16px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:78px; transition: transform .2s ease, box-shadow .2s ease; }
.logo-cell:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.logo-img { width:100%; height:40px; object-fit:contain; object-position:center; transition: filter .2s ease; }
.logo-cell:hover .logo-img { filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
.js-anim .reveal-grid.logo-grid .logo-cell { opacity:0; transform:translateY(40px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.js-anim .reveal-grid.logo-grid.in-view .logo-cell { opacity:1; transform:translateY(0); }
@media (max-width:980px){ .logo-grid{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:600px){ .logo-grid{ grid-template-columns:repeat(3,1fr);} }

/* ===== Receiving & Dispatching solution page ===== */
/* Mode tabs (Ship / Railcar / Truck switching) */
.modes-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1200px) minmax(0,1fr); align-items: start; gap: 0; }
.mode-side { position: sticky; top: 100px; align-self: start; display: flex; justify-content: flex-end; padding-right: 36px; }
.mode-tabs { display: flex; flex-direction: column; gap: 14px; align-items: stretch; width: 116px; }
.mode-panels { min-width: 0; padding: 0 24px; }
.mode-tab {
  appearance: none; -webkit-appearance: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: .4px;
  color: #fff; background-color: #3A3736;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  border: 1px solid rgba(255,255,255,.28);
  padding: 18px 6px; border-radius: 8px; cursor: pointer; min-height: 116px;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* per-tab background images with dark overlay for legibility */
.mode-tab[data-target="panel-ship"]  { background-image: linear-gradient(rgba(58,55,54,.72), rgba(58,55,54,.72)), url('assets/sea-400.webp'); }
.mode-tab[data-target="panel-rail"]  { background-image: linear-gradient(rgba(58,55,54,.72), rgba(58,55,54,.72)), url('assets/rail-400.webp'); }
.mode-tab[data-target="panel-truck"] { background-image: linear-gradient(rgba(58,55,54,.72), rgba(58,55,54,.72)), url('assets/road-400.webp'); }
.mode-tab:hover { border-color: var(--brand); box-shadow: 0 8px 20px rgba(76,73,72,.18); }
/* active state: lighter overlay (more transparent image), white text, no gold */
.mode-tab.is-active[data-target="panel-ship"]  { background-image: linear-gradient(rgba(58,55,54,.04), rgba(58,55,54,.04)), url('assets/sea-400.webp'); }
.mode-tab.is-active[data-target="panel-rail"]  { background-image: linear-gradient(rgba(58,55,54,.04), rgba(58,55,54,.04)), url('assets/rail-400.webp'); }
.mode-tab.is-active[data-target="panel-truck"] { background-image: linear-gradient(rgba(58,55,54,.04), rgba(58,55,54,.04)), url('assets/road-400.webp'); }
.mode-tab.is-active { color: #fff; border-color: rgba(255,255,255,.92); box-shadow: 0 10px 24px rgba(76,73,72,.42); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.mode-panel { display: none; }
.mode-panel.is-active { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.mode-panel .section-head-mini,
.mode-panel .equip-sublabel,
.mode-panel .equip-mini-grid,
.mode-panel .scn-note { grid-column: 1 / -1; }
.mode-panel .flow-block { grid-column: 1 / -1; align-self: start; }
@media (max-width: 920px){
  .mode-panel.is-active { display: block; }
  .mode-panel .scn-band,
  .mode-panel .flow-block { grid-column: auto; }
}
@media (max-width: 1280px){
  .modes-layout { grid-template-columns: 132px minmax(0,1fr); gap: 30px; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .mode-side { display: block; padding-right: 0; }
  .mode-tabs { width: 100%; }
}
@media (max-width: 920px){
  .modes-layout { display: block; max-width: 100%; padding: 0 16px; }
  .mode-side { position: static; margin-bottom: 22px; display: block; padding-right: 0; }
  .mode-tabs { flex-direction: row; flex-wrap: wrap; justify-content: center; width: auto; }
  .mode-tab { padding: 14px 24px; flex-direction: row; gap: 8px; }
}

/* Small attribution / note line under a group */
.scn-note { font-size: 13.5px; color: var(--muted); line-height: 1.68; margin: 16px 0 0; padding-left: 15px; border-left: 3px solid var(--brand); }
.scn-note strong { color: var(--ink); font-weight: 700; }

/* 3-column variant of the compact equipment grid */
.equip-mini-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px){ .equip-mini-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .equip-mini-grid.cols-3 { grid-template-columns: 1fr; } }

/* Slightly taller thumb for the 3-card scenario equipment rows */
.equip-mini-grid.cols-3 .equip-mini-media { height: 190px; flex-basis: 190px; }

.cta-form-wrap { max-width: 960px; margin: 0 auto; text-align: center; }
.cta-form-title { font-size: clamp(28px,3.6vw,44px); color: var(--ink-deep); margin-top: 4px; }
.cta-form-lead { max-width: 660px; margin: 14px auto 26px; font-weight: 500; font-size: 17px; line-height: 1.7; color: var(--ink); }
.gold-cta .contact-form { text-align: left; margin-top: 8px; }
.gold-cta .contact-form .btn-primary { width: 100%; justify-content: center; }
.form-success { background: #fff; border-radius: var(--radius); padding: 40px 34px; box-shadow: var(--shadow); text-align: center; }
.form-success i { font-size: 46px; color: var(--brand); display: block; margin-bottom: 12px; }
.form-success h3 { color: var(--ink-deep); margin-bottom: 8px; }
.form-success p { color: var(--muted); }

/* ===== Case Study Detail (simplified, case-yihai-kerry.html) ===== */

/* breadcrumb bar directly below the fixed header */
.page-breadcrumb {
  position: relative; z-index: 5;
  margin-top: 84px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
  font-size: 13px;
}
.page-breadcrumb .container { display: flex; align-items: center; flex-wrap: wrap; }
.page-breadcrumb a { color: var(--muted); text-decoration: none; transition: color .2s ease; }
.page-breadcrumb a:hover { color: var(--brand); }
.page-breadcrumb .sep { margin: 0 10px; color: #c9c5c2; }
.page-breadcrumb .current { color: var(--ink-deep); font-weight: 600; }
/* breadcrumb links never underline (reinforced for every state); the Home icon
   inherits the link colour via currentColor and turns gold on hover like the text */
.page-breadcrumb a:hover { text-decoration: none; }
.page-breadcrumb .bc-icon { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; vertical-align: -2.5px; margin-right: 2px; }
/* Blog listing: its card-grid .section sits directly under the breadcrumb, so the
   generic .section gold border-top would draw a stray line right below the crumbs.
   Suppress it only when a .section immediately follows the breadcrumb (case page
   uses .case-layout, so it is unaffected). */
.page-breadcrumb + .section { border-top: 0; }

/* sticky model switcher bar (product-line cross-links) */
.model-switcher { position: sticky; top: 83px; z-index: 40; background: #fff; box-shadow: 0 4px 14px rgba(58,55,54,.06); }
.model-switcher-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 12px 0; }
.model-pill { display: inline-flex; align-items: center; padding: 8px 18px; border: 1.5px solid rgba(246,171,80,.5); border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--ink-deep); text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.model-pill:hover { background: rgba(250,190,80,.12); border-color: var(--brand); }
.model-pill.is-active { background: var(--brand); color: var(--ink-deep); border-color: var(--brand); }

/* two-column layout: 70% content / 30% sidebar */
.case-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: 48px;
  align-items: start;
  margin-top: 44px;
  margin-bottom: 72px;
}
.case-main { min-width: 0; }
.case-aside { min-width: 0; position: sticky; top: 100px; }

.case-title-block { margin-bottom: 8px; }
.case-page-title {
  font-size: clamp(24px, 3.2vw, 36px); line-height: 1.2; font-weight: 700;
  color: var(--ink-deep); margin: 0 0 16px; letter-spacing: -.2px;
}

.case-section { margin-top: 52px; }
.case-section:first-child { margin-top: 0; }
.case-h { font-size: clamp(20px, 2.4vw, 26px); color: var(--ink-deep); font-weight: 700; margin: 0 0 18px; padding-left: 14px; border-left: 4px solid var(--brand); line-height: 1.3; }
.case-lead { font-size: 16px; color: var(--body); line-height: 1.8; margin: 0 0 16px; }
.case-lead:last-child { margin-bottom: 0; }

.case-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.case-list li { position: relative; padding-left: 30px; font-size: 15px; color: var(--body); line-height: 1.68; }
.case-list li::before {
  content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 0; top: 2px; color: var(--brand); font-size: 14px;
}

/* equipment configuration table inside Customized Solution */
.case-table-wrap { margin-top: 30px; }
.case-table-scroll { overflow-x: auto;  }
.case-table { margin-bottom: 16px; width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); /*border-radius: var(--radius);*/ overflow: hidden; font-size: 14px; }
.case-table th, .case-table td { padding: 12px 16px; text-align: left; border: 1px solid var(--line); }
.case-table thead th { background: var(--brand); color: var(--ink-deep); font-weight: 700; font-size: 12.5px; letter-spacing: .4px; text-transform: uppercase; }
.case-table tbody tr:nth-child(even) { background: #FBF3E3; }
.case-table tbody tr:last-child td { border-bottom: none; }
.case-table tbody td { color: var(--ink); }

/* results: simple 3-up */
.case-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.case-result { background: var(--bg, #FBFAF8); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; }
.case-result .r-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.case-result h4 { font-size: 16px; color: var(--ink-deep); font-weight: 700; margin: 0 0 8px; }
.case-result p { font-size: 13.5px; color: var(--body); line-height: 1.6; margin: 0; }

/* testimonial light */
.case-quote { margin-top: 8px; background: #FBF3E3; border: 1px solid rgba(246,171,80,.35); border-left: 5px solid var(--brand); border-radius: var(--radius); padding: 30px 34px; box-shadow: 0 1px 4px rgba(76,73,72,.08); }
.case-quote .q-mark { font-size: 46px; line-height: .7; color: var(--brand); font-family: Georgia, "Times New Roman", serif; display: block; margin-bottom: 4px; }
.case-quote blockquote { font-size: 18px; line-height: 1.7; font-weight: 500; color: var(--ink-deep); margin: 0 0 14px; }
.case-quote .q-author { font-size: 13.5px; color: var(--brand); font-weight: 600; text-align: right; }
.case-quote:hover{transform: translateY(-6px); box-shadow: 0 16px 34px rgba(58,55,54,.16); border-color: rgba(250,190,80,.55); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }

/* ===== Right sidebar cards ===== */
.case-aside-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(76,73,72,.08); }
.case-aside-card h4 { font-size: 15px; color: var(--ink-deep); font-weight: 700; margin: 0 0 12px; padding-left: 12px; border-left: 4px solid var(--brand); line-height: 1.3; }

/* On-page TOC (SEO/GEO friendly anchor nav) — replaces Project at a Glance */
.case-toc { border-left: 3px solid var(--brand); }
.case-toc .toc-title { font-size: 15px; color: var(--ink-deep); font-weight: 700; margin: 0 0 12px; }
.toc-nav { display: flex; flex-direction: column; gap: 2px; }
.toc-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  font-size: 13.5px; color: var(--body); border-radius: 6px; line-height: 1.4;
  border-left: 2px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.toc-link .toc-dot { width: 6px; height: 6px; border-radius: 8px; background: var(--paper); flex: 0 0 auto; transition: background .2s ease, transform .2s ease; }
.toc-link:hover { background: #FBF3E3; color: var(--ink-deep); }
.toc-link.active { background: #FBF3E3; color: var(--ink-deep); font-weight: 700; border-left-color: var(--brand); }
.toc-link.active .toc-dot { background: var(--brand); transform: scale(1.4); }

/* Case image gallery (slideshow) */
.case-gallery { margin-top: 52px; }
.gallery { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink-deep); border: 1px solid var(--line); box-shadow: 0 1px 4px rgba(76,73,72,.08); }
.gallery-viewport { overflow: hidden; }
.gallery-track { display: flex; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.gallery-slide { flex: 0 0 100%; min-width: 100%; margin: 0; }
.gallery-slide img { width: 100%; height: clamp(260px, 46vw, 520px); object-fit: cover; display: block; }
.gallery-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 8px; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--ink-deep); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(76,73,72,.28); transition: background .2s ease;
}
.gallery-btn:hover { background: var(--brand); }
.gallery-prev { left: 14px; }
.gallery-next { right: 14px; }
.gallery-dots { display: flex; gap: 8px; justify-content: center; padding: 16px 0 2px; }
.gallery-dot { width: 9px; height: 9px; border-radius: 8px; border: none; cursor: pointer; padding: 0; background: var(--paper); transition: background .2s ease, transform .2s ease; }
.gallery-dot.is-active { background: var(--brand); transform: scale(1.4); }
@media (max-width: 900px) { .gallery-btn { width: 38px; height: 38px; font-size: 14px; } .gallery-prev { left: 8px; } .gallery-next { right: 8px; } }

.rel-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.rel-item:last-child { border-bottom: none; padding-bottom: 0; }
.rel-thumb { width: 54px; height: 54px; border-radius: 8px; flex: 0 0 54px; background-size: cover; background-position: center; background-color: var(--bg, #FBFAF8); }
.rel-body { min-width: 0; }
.rel-title { font-size: 14px; font-weight: 600; color: var(--ink-deep); line-height: 1.4; display: block; transition: color .2s ease; }
.rel-meta { font-size: 12px; color: var(--muted); margin-top: 3px; display: block; }
.rel-item:hover .rel-title { color: var(--brand); }

.case-aside-cta { background: var(--ink-deep); color: #fff; border-radius: var(--radius); padding: 22px 20px; text-align: center; }
.case-aside-cta h4 { color: #fff; font-size: 16px; margin: 0 0 8px; }
.case-aside-cta p { font-size: 13px; color: rgba(255,255,255,.82); margin: 0 0 16px; line-height: 1.6; }
.case-aside-cta .btn { width: 100%; }

@media (max-width: 900px) {
  .case-layout { grid-template-columns: 1fr; gap: 36px; margin-top: 32px; }
  .case-aside { position: static; }
  .case-equip-row, .case-results { grid-template-columns: 1fr; }
    .case-hero-figure img { height: 230px; }
  .case-hero-badge { left: 12px; bottom: 12px; font-size: 12px; padding: 7px 12px; }
  .highlight-grid { grid-template-columns: 1fr; gap: 20px; }
  .case-quote { padding: 24px; }
  .case-quote blockquote { font-size: 16px; }
}

/* featured image under title, with trust badge overlay */
.case-hero-figure { position: relative; width: 100%; border-radius: 8px; overflow: hidden; margin: 6px 0 0; background: var(--ink-deep); border: 1px solid var(--line); }
.case-hero-figure img { display: block; width: 100%; height: 420px; object-fit: cover; }
.case-hero-figure::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none; background: linear-gradient(to top, rgba(58,55,54,.74), rgba(58,55,54,0)); }
.case-hero-badge { position: absolute; left: 20px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 6px; background: var(--brand); color: var(--ink-deep); font-size: 13.5px; font-weight: 700; letter-spacing: .2px; box-shadow: 0 2px 10px rgba(76,73,72,.28); }
.case-hero-badge i { color: var(--ink-deep); font-size: 14px; flex: 0 0 auto; }

/* Key Highlights — three independent white cards */
.case-highlights { margin-top: 26px; }
.case-highlights .case-h { color: var(--ink-deep); margin-bottom: 22px; }
.highlight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.highlight-item { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: var(--radius); padding: 24px 22px; box-shadow: 0 1px 4px rgba(76,73,72,.08); }
.hl-label { display: block; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.highlight-item p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink); }
/* Key Highlights cards fly-in (staggered) */
.js-anim .case-highlights .highlight-item { opacity: 0; transform: translateY(46px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease; }
.js-anim .case-highlights.in-view .highlight-item { opacity: 1; transform: none; }
.js-anim .case-highlights.in-view .highlight-item:nth-child(1) { transition-delay: 0s; }
.js-anim .case-highlights.in-view .highlight-item:nth-child(2) { transition-delay: .12s; }
.js-anim .case-highlights.in-view .highlight-item:nth-child(3) { transition-delay: .24s; }
.js-anim .case-highlights.in-view .highlight-item:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(58,55,54,.16); border-color: rgba(250,190,80,.55); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }

/* Project Value — result cards fly-in (staggered) + hover */
/* Project Value — result cards reveal via the shared .reveal-item mechanism
   (app.js reveals each item individually, so #value itself never gets .in-view).
   Only the hover lift is kept here. */
.js-anim #value .case-result:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(58,55,54,.16); border-color: rgba(250,190,80,.55); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }

/* ===== Product Detail Page — Bucket Elevator (product-be) ===== */
/* hero: white panel, headline block grouped, dark text, smaller title */
/* hero 内容左/右切换：section 加 hero-left（默认靠左）或 hero-right（靠右），背景图不受影响 */
.product-be .hero-content { display: flex; }
.product-be .hero-right .hero-text-card { margin-left: auto; }
.product-be .hero-text-card { background: transparent; box-shadow: none; border-radius: 0; padding: 0; width: fit-content; max-width: min(92%, 620px); display: flex; flex-direction: column; gap: 6px; }
.product-be .hero-headline { background: #fff; border-radius: 6px 6px 0 0; padding: 28px 32px; box-shadow: 0 14px 38px rgba(58,55,54,.22); }
.product-be .hero-foot { background: #fff; border-radius: 0 0 6px 6px; padding: 24px 32px; box-shadow: 0 14px 38px rgba(58,55,54,.22); }
.product-be .hero-text-card .hero-headline,
.product-be .hero-text-card .hero-foot { opacity: 0; transform: translateY(40px); animation: heroRise .7s cubic-bezier(.22,.61,.36,1) forwards; }
.product-be .hero-text-card .hero-foot { animation-delay: .16s; }
.product-be .hero-text-card .hero-title { color: var(--ink-deep); font-size: clamp(26px, 3.6vw, 40px); line-height: 1.1; margin: 0; max-width: none; text-transform: uppercase; }
.product-be .hero-text-card .hero-lead { color: var(--ink); font-size: clamp(14px, 1.4vw, 17px); margin: 16px 0 0; max-width: none; }
.product-be .hero-foot-label { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand); }
.product-be .hero-text-card .hero-foot ul.hero-points { margin: 10px 0 18px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.product-be .hero-text-card ul.hero-points { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 20px; }
.product-be .hero-text-card ul.hero-points li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; line-height: 1.4; color: var(--ink); font-weight: 600; }
.product-be .hero-text-card ul.hero-points li i { color: var(--brand); font-size: 15px; flex: 0 0 auto; }
.product-be .hero-text-card a.hero-text-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15px; color: var(--ink-deep); text-decoration: underline; text-underline-offset: 3px; }
.product-be .hero-text-card a.hero-text-link i { color: var(--brand); font-size: 13px; }
.product-be .hero-text-card a.hero-text-link:hover { color: var(--brand); }
.product-be .perf-list { display: block; overflow: hidden; }
.product-be .perf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding: 30px 0; border-top: 1px solid var(--line); }
.product-be .perf-row:first-child { border-top: 0; padding-top: 0; }
.product-be .perf-row:nth-child(even) .perf-media { order: -1; }
.product-be .perf-no { display: block; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: var(--brand); margin-bottom: 10px; }
.product-be .perf-row h3 { font-size: 23px; color: var(--ink); margin: 0 0 14px; line-height: 1.25; }
.product-be .perf-row p { font-size: 15px; color: var(--body); line-height: 1.75; margin: 0; }
.product-be .perf-media { aspect-ratio: 16 / 9; border-radius: 6px; background: linear-gradient(135deg, #FBF3E3 0%, #F8DCAB 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 1px 4px rgba(76,73,72,.08); }
.product-be .perf-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== Performance Features — text-only variants (no media) =====
   Two reusable styles for products that only have text content.
   Both reuse the shared .reveal-item fly-in (wrap in .reveal-grid).
   Not scoped under .product-be so any page can use them. */

/* Style A — text card grid */
.perf-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.perf-cards .perf-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 32px 30px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.perf-cards .perf-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep));
}
.perf-cards .perf-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 8px;
  background: rgba(250,190,0,.14); color: var(--brand);
  font-size: 16px; font-weight: 800; letter-spacing: .5px; margin-bottom: 18px;
}
.perf-cards .perf-card h3 { font-size: 19px; color: var(--ink); margin: 0 0 12px; line-height: 1.3; }
.perf-cards .perf-card p { font-size: 15px; color: var(--body); line-height: 1.75; margin: 0; }

/* Specifications & Downloads band */
.product-be .dl-band { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 0; box-shadow: var(--shadow); overflow: hidden; }
.product-be .dl-band-text { padding: 36px 38px; display: flex; flex-direction: column; justify-content: center; }
.product-be .dl-band h3 { font-size: 22px; color: var(--ink); margin: 0 0 12px; }
.product-be .dl-band p { font-size: 15px; color: var(--body); line-height: 1.7; margin: 0; }
.product-be .dl-media { position: relative; overflow: hidden; min-height: 240px; align-self: stretch; background: url(assets/support-hero.webp) center/cover no-repeat; display: flex; align-items: center; justify-content: center; }
.product-be .dl-media::after { content: ""; position: absolute; inset: 0; background: rgba(58,55,54,.40); }
.product-be .dl-media .dl-media-btn { position: relative; z-index: 1; border-radius: 6px; }

/* FAQ accordion (shared module: product page + blog-detail) */
.faq-list { max-width: 912px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 14px; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.faq-item[open] { border-color: rgba(250,190,80,.55); box-shadow: 0 6px 18px rgba(58,55,54,.10); }
.faq-item summary { cursor: pointer; list-style: none; padding: 18px 22px; font-size: 16px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--brand); font-size: 22px; font-weight: 800; line-height: 1; flex: 0 0 auto; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-a { padding: 0 22px 20px; font-size: 15px; color: var(--body); line-height: 1.75; }

/* Performance Features: text & media fly in from both sides */
.product-be .js-anim .perf-list .perf-row { transform: none; }
.product-be .js-anim .perf-list .perf-text,
.product-be .js-anim .perf-list .perf-media { opacity: 0; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.product-be .js-anim .perf-list .perf-row:nth-child(odd) .perf-text { transform: translateX(-64px); }
.product-be .js-anim .perf-list .perf-row:nth-child(odd) .perf-media { transform: translateX(64px); }
.product-be .js-anim .perf-list .perf-row:nth-child(even) .perf-media { transform: translateX(-64px); }
.product-be .js-anim .perf-list .perf-row:nth-child(even) .perf-text { transform: translateX(64px); }
.product-be .js-anim .perf-list.in-view .perf-text,
.product-be .js-anim .perf-list.in-view .perf-media { opacity: 1; transform: none; }

/* Product page responsive */
@media (max-width: 860px) {
  .product-be .perf-row { grid-template-columns: 1fr; gap: 20px; padding: 24px 0; }
  .product-be .perf-row:nth-child(even) .perf-media { order: 0; }
  .product-be .dl-band { grid-template-columns: 1fr; gap: 0; }
  .product-be .dl-band-text { padding: 28px 24px; }
  .product-be .dl-media { min-height: 200px; }
  .perf-cards { grid-template-columns: 1fr; }
  }