/* SeeHog Logistics — "Customs House" design system.
   The site reads like a well-kept customs file: ink-navy authority, security-paper backgrounds (guilloche line
   work as on certificates and banknotes), brass hairlines, cinnabar "seal" red for the one action that matters,
   monospaced figures for codes and money, numbered sections (§ 01), crop-mark frames on photographs.
   Square corners, real rules, no drop-shadow fluff. Logical properties throughout (RTL-safe). */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Serif'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/assets/fonts/serif-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: 'Serif'; font-style: italic; font-weight: 200 900; font-display: swap; src: url(/assets/fonts/serif-latin-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Serif'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/assets/fonts/serif-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Serif'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/assets/fonts/serif-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Serif'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/assets/fonts/serif-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

:root {
  --ink: #081222; --navy: #0b1e3c; --navy-2: #102a52; --navy-3: #1d4175; --navy-soft: #e7ebf2;
  --gold: #8f6c2c; --gold-2: #cba968; --gold-3: #ecdcb9;            /* brass: text-safe / line / tint */
  --seal: #b0302a; --seal-2: #8c221d; --seal-soft: #f7ebe8;          /* cinnabar seal red — the action colour */
  --green: #1d7a55;                                                   /* "released" */
  --ivory: #f0ede4; --paper: #f8f6f1; --white: #fff;
  --text: #2b3340; --muted: #5d6675; --rule: #dcd6c8; --rule-2: #c6bda8;
  --ok: #1d7a55; --err: #b0302a;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Serif', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --display: var(--serif);
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --wrap: 1240px; --gutter: clamp(16px, 4vw, 40px);
  --shadow: 0 1px 0 rgba(8,18,34,.04), 0 24px 48px -30px rgba(8,18,34,.45);
  /* Guilloche: two offset families of concentric rings interfere like the line work on a certificate. */
  --guilloche: repeating-radial-gradient(circle at 0 0, transparent 0 15px, rgba(203,169,104,.07) 15px 16px),
               repeating-radial-gradient(circle at 100% 0, transparent 0 15px, rgba(203,169,104,.07) 15px 16px),
               repeating-radial-gradient(circle at 50% 120%, transparent 0 22px, rgba(255,255,255,.035) 22px 23px);
  --paper-lines: repeating-linear-gradient(0deg, transparent 0 31px, rgba(8,18,34,.035) 31px 32px);
}
/* Per-script font stacks: CJK / Thai / Arabic use native faces. */
:lang(zh) { --sans: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; --display: 'Serif', 'Source Han Serif SC', 'Noto Serif SC', 'Songti SC', 'PingFang SC', 'Microsoft YaHei', serif; }
:lang(ja) { --sans: 'Inter', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', 'Noto Sans JP', sans-serif; --display: 'Serif', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif; }
:lang(th) { --sans: 'Inter', 'Leelawadee UI', 'Noto Sans Thai', 'Tahoma', sans-serif; --display: 'Serif', 'Leelawadee UI', 'Noto Serif Thai', 'Tahoma', serif; }
:lang(ar) { --sans: 'Segoe UI', 'Noto Sans Arabic', 'Geeza Pro', Tahoma, sans-serif; --display: 'Noto Naskh Arabic', 'Segoe UI', 'Geeza Pro', Tahoma, serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: clamp(16px, .25vw + 15px, 17.5px); scroll-behavior: smooth; }
body { margin: 0; font: 400 1rem/1.7 var(--sans); color: var(--text); background: var(--paper); overflow-x: hidden; }
main { counter-reset: sec; display: block; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-3); text-decoration-color: rgba(29,65,117,.3); text-underline-offset: 3px; }
a:hover { color: var(--seal); }
h1, h2, h3, h4 { font-family: var(--display); color: var(--navy); font-weight: 500; line-height: 1.14; margin: 0 0 .5em; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 4.2vw + .5rem, 4.2rem); font-weight: 500; line-height: 1.06; }
h2 { font-size: clamp(1.7rem, 2.1vw + .9rem, 2.75rem); font-weight: 500; }
h3 { font-size: 1.25rem; }
:lang(zh) h1, :lang(ja) h1 { font-size: clamp(2rem, 3.1vw + .6rem, 3.3rem); letter-spacing: .01em; line-height: 1.2; }
:lang(zh) h2, :lang(ja) h2 { font-size: clamp(1.5rem, 1.5vw + .85rem, 2.2rem); letter-spacing: .01em; line-height: 1.3; }
:lang(th) h1, :lang(ar) h1 { line-height: 1.3; } :lang(th) h2, :lang(ar) h2 { line-height: 1.4; }
p { margin: 0 0 1em; }
.ico { width: 20px; height: 20px; flex: none; }
:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; }
::selection { background: var(--gold-3); color: var(--navy); }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: calc(820px + 2 * var(--gutter)); }
.skip { position: absolute; inset-inline-start: -999px; top: 8px; z-index: 200; background: var(--navy); color: #fff; padding: 8px 14px; }
.skip:focus { inset-inline-start: 8px; }
.muted { color: var(--muted); } .small { font-size: .88rem; }
.hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
bdi, .num { unicode-bidi: plaintext; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── eyebrow / numbered section heads ── */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 600 .74rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--seal); }
:lang(zh) .eyebrow, :lang(ja) .eyebrow { letter-spacing: .12em; font-size: .82rem; }
/* Section heads count themselves: § 01, § 02 … like the articles of a filing. */
.sec-head { max-width: 780px; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head .eyebrow::before { counter-increment: sec; content: '§ ' counter(sec, decimal-leading-zero); width: auto; height: auto; background: none; padding-inline-end: 12px; border-inline-end: 1px solid var(--rule-2);
  font: 600 .78rem/1 var(--mono); letter-spacing: .06em; color: var(--seal); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head .lead { margin: 0; }
.lead { font-size: 1.12rem; line-height: 1.7; color: var(--muted); }
.lead.big { font-size: clamp(1.1rem, .5vw + 1rem, 1.3rem); color: var(--text); line-height: 1.65; }

.section { padding-block: clamp(68px, 8.5vw, 124px); position: relative; }
.section.tight { padding-block: clamp(40px, 5vw, 64px); }
.section.alt { background: var(--ivory); }
.section.white { background: var(--white); }
.section.dark { background: var(--guilloche), var(--navy); color: #c4cedc; }
.section.dark h2, .section.dark h3 { color: #fff; }
.section.dark .lead { color: #a9b6c8; }
.section.dark .eyebrow { color: var(--gold-2); }
.section.dark .sec-head .eyebrow::before { color: #f0a59f; border-color: rgba(255,255,255,.2); }
.rule-top { border-top: 1px solid var(--rule); }

/* ── buttons: one red action, navy and outline for the rest ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 1px solid transparent; border-radius: 2px;
  font: 600 .86rem/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s var(--ease); white-space: nowrap; }
:lang(zh) .btn, :lang(ja) .btn, :lang(th) .btn, :lang(ar) .btn { letter-spacing: .04em; font-size: .94rem; }
.btn .ico { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
[dir=rtl] .btn .ico { transform: scaleX(-1); } [dir=rtl] .btn:hover .ico { transform: scaleX(-1) translateX(3px); }
.btn-gold { background: var(--seal); color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }      /* primary action (class name kept from v1) */
.btn-gold:hover { background: var(--seal-2); color: #fff; transform: translateY(-1px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 12px 24px -12px rgba(176,48,42,.7); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-3); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: #fff; }
.btn-light { background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.4); }
.btn-light:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-wa { background: #1f7a4a; color: #fff; }
.btn-wa:hover { background: #17633b; color: #fff; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .78rem; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font: 600 .82rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold-2); padding-bottom: 4px; }
.link-arrow .ico { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.link-arrow:hover { color: var(--seal); border-color: var(--seal); } .link-arrow:hover .ico { transform: translateX(4px); }
[dir=rtl] .link-arrow .ico { transform: scaleX(-1); }

/* photographs carry crop marks, like a plate in a printed report */
.intro-media, .phero-media, .sd-media, .lanes-media, .case-media, .split-media, .sx-fig { position: relative; }
.intro-media::before, .phero-media::before, .sd-media::before, .lanes-media::before, .case-media::before, .split-media::before, .sx-fig::before,
.intro-media::after, .phero-media::after, .sd-media::after, .lanes-media::after, .case-media::after, .split-media::after, .sx-fig::after {
  content: ''; position: absolute; width: 36px; height: 36px; border: 2px solid var(--gold-2); pointer-events: none; z-index: 2; }
.intro-media::before, .phero-media::before, .sd-media::before, .lanes-media::before, .case-media::before, .split-media::before, .sx-fig::before { inset-block-start: -10px; inset-inline-start: -10px; border-inline-end: 0; border-block-end: 0; }
.intro-media::after, .phero-media::after, .sd-media::after, .lanes-media::after, .case-media::after, .split-media::after, .sx-fig::after { inset-block-end: -10px; inset-inline-end: -10px; border-inline-start: 0; border-block-start: 0; }

/* ── header ── */
.site-header { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--rule); transition: box-shadow .3s; }
.site-header::after { content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--seal) 0 96px, var(--gold-2) 96px 100%); opacity: .9; }
.site-header.scrolled { box-shadow: 0 14px 34px -26px rgba(8,18,34,.6); }
.topbar { background: var(--ink); color: #aab5c5; font-size: .78rem; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.tb-left { display: flex; gap: 24px; letter-spacing: .04em; min-width: 0; overflow: hidden; white-space: nowrap; }
.tb-left span { flex: none; }
.tb-left span { display: inline-flex; align-items: center; gap: 8px; }
.tb-left span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(29,122,85,.25); }
.tb-right { display: flex; align-items: center; gap: 20px; margin-inline-start: auto; flex: none; }
.tb-link { display: inline-flex; align-items: center; gap: 7px; color: #d3dbe6; text-decoration: none; font-family: var(--mono); font-size: .76rem; }
.tb-link:hover { color: var(--gold-2); }
.tb-link .ico { width: 15px; height: 15px; color: var(--gold-2); }
.bar .wrap { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.logo { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; flex: none; }
.logo-mark { width: 54px; height: 54px; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text b { font: 600 1.42rem/1 var(--serif); letter-spacing: .14em; color: var(--navy); }
.logo-text i { font: 600 .6rem/1 var(--sans); font-style: normal; letter-spacing: .28em; color: var(--gold); margin-top: 7px; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 30px 12px; white-space: nowrap; font: 500 .91rem var(--sans); color: var(--ink); text-decoration: none; position: relative; }
.nav-link .chev { width: 14px; height: 14px; opacity: .6; transition: transform .2s; }
.nav-link::after { content: ''; position: absolute; inset-inline: 12px; bottom: 20px; height: 2px; background: var(--seal); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
[dir=rtl] .nav-link::after { transform-origin: right; }
.nav-link:hover, .nav-link[aria-current=page] { color: var(--navy); }
.nav-link:hover::after, .nav-link[aria-current=page]::after { transform: scaleX(1); }
.open > .nav-link .chev { transform: rotate(180deg); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-cta { background: var(--seal); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.header-cta:hover { background: var(--seal-2); }
.menu-btn { display: none; width: 46px; height: 46px; border: 1px solid var(--rule-2); background: #fff; color: var(--navy); cursor: pointer; place-items: center; border-radius: 2px; }
.menu-btn .ico { width: 22px; height: 22px; }

/* mega + dropdown */
.mega, .drop { position: absolute; top: 100%; inset-inline-start: 50%; transform: translate(-50%, 8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .25s var(--ease), visibility .2s;
  background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--navy); box-shadow: var(--shadow); }
[dir=rtl] .mega, [dir=rtl] .drop { transform: translate(50%, 8px); }
.open > .mega, .open > .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
[dir=rtl] .open > .mega, [dir=rtl] .open > .drop { transform: translate(50%, 0); }
.mega { width: min(960px, 92vw); padding: 28px; }
.mega-cols { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; }
.mega-groups { display: flex; flex-direction: column; border-inline-end: 1px solid var(--rule); padding-inline-end: 18px; }
.mega-group { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; color: var(--ink); text-decoration: none; font: 500 1.02rem var(--display); border-inline-start: 3px solid transparent; }
.mega-group.on, .mega-group:hover { color: var(--navy); background: var(--ivory); border-inline-start-color: var(--seal); }
.mega-group .chev { width: 14px; transform: rotate(-90deg); opacity: .5; }
[dir=rtl] .mega-group .chev { transform: rotate(90deg); }
.mega-panel-title { display: block; font: 600 .72rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.mega-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; align-content: start; }
.mega-panel[hidden] { display: none; }
.mega-panel .mega-panel-title { grid-column: 1 / -1; }
.mega-item { display: flex; gap: 12px; padding: 10px; text-decoration: none; color: var(--ink); align-items: flex-start; }
.mega-item:hover { background: var(--ivory); }
.mega-item .ico { width: 22px; height: 22px; color: var(--gold); margin-top: 2px; }
.mega-item b { display: block; font: 600 .92rem/1.35 var(--sans); color: var(--navy); }
.mega-item small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.45; margin-top: 3px; }
.mega-all { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); width: 100%; font: 600 .78rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); text-decoration: none; }
.mega-all .ico { width: 16px; }
.drop { width: 380px; padding: 10px; }
.drop-item { display: flex; gap: 14px; padding: 12px; text-decoration: none; color: var(--ink); }
.drop-item:hover { background: var(--ivory); }
.drop-item .ico { color: var(--gold); width: 22px; height: 22px; margin-top: 2px; }
.drop-item b { display: block; color: var(--navy); font-size: .93rem; font-weight: 600; }
.drop-item small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.45; }

/* language switcher */
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; color: #d3dbe6; cursor: pointer; font: 500 .78rem var(--mono); padding: 6px 0; }
.lang-btn .chev { width: 13px; height: 13px; }
.flag { width: 20px; height: 14px; flex: none; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.lang-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 70; list-style: none; margin: 0; padding: 8px; width: 230px; background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--navy); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s; max-height: 70vh; overflow: auto; }
.lang.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--ink); text-decoration: none; font-size: .9rem; }
.lang-menu a:hover, .lang-menu a[aria-current] { background: var(--ivory); color: var(--navy); }
.lang-menu .tick { width: 15px; height: 15px; margin-inline-start: auto; color: var(--seal); }

/* ── hero (home): statement on the left, a sample tax bill on the right ── */
.hero { position: relative; color: #fff; background: var(--ink); overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -3; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(100deg, rgba(8,18,34,.96) 0%, rgba(8,18,34,.86) 38%, rgba(8,18,34,.5) 72%, rgba(8,18,34,.35) 100%), linear-gradient(0deg, rgba(8,18,34,.85), transparent 45%); }
[dir=rtl] .hero::before { background: linear-gradient(-100deg, rgba(8,18,34,.96) 0%, rgba(8,18,34,.86) 38%, rgba(8,18,34,.5) 72%, rgba(8,18,34,.35) 100%), linear-gradient(0deg, rgba(8,18,34,.85), transparent 45%); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--guilloche); mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 75%); -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.5) 45%, transparent 75%); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(64px, 8vw, 112px) clamp(150px, 16vw, 190px); }
.hero-copy { max-width: 700px; }
.hero .eyebrow { color: var(--gold-2); }
.hero h1 { color: #fff; margin-bottom: 26px; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--gold-3); }
:lang(zh) .hero h1 em, :lang(ja) .hero h1 em, :lang(th) .hero h1 em, :lang(ar) .hero h1 em { font-style: normal; }
.hero .lead { color: #c9d2df; max-width: 620px; margin-bottom: 36px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-points { list-style: none; margin: 34px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: .88rem; color: #c9d2df; }
.hero-points li { display: inline-flex; align-items: center; gap: 9px; }
.hero-points .ico { width: 16px; height: 16px; color: #6fd3a5; }
/* the bill */
.bill { position: relative; justify-self: end; width: min(100%, 400px); background: #fffdf8 var(--paper-lines); color: var(--ink); padding: 30px 30px 26px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(203,169,104,.45); transform: rotate(1.4deg); }
[dir=rtl] .bill { transform: rotate(-1.4deg); justify-self: start; }
.bill::before { content: ''; position: absolute; inset-inline: 0; top: -9px; height: 10px; background: radial-gradient(circle at 9px 0, transparent 6px, #fffdf8 6.5px) 0 0 / 18px 10px repeat-x; }   /* perforated edge */
.bill-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 2px solid var(--ink); }
.bill-head b { font: 600 1.12rem/1.2 var(--display); color: var(--navy); }
.bill-no { font: 500 .72rem var(--mono); color: var(--muted); white-space: nowrap; }
.bill-goods { margin: 10px 0 6px; font-size: .84rem; color: var(--muted); }
.bill table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.bill th, .bill td { padding: 9px 0; border-bottom: 1px dashed var(--rule-2); font-weight: 400; text-align: start; }
.bill th small { color: var(--muted); font: 500 .74rem var(--mono); margin-inline-start: 6px; }
.bill td { text-align: end; font: 500 .92rem var(--mono); color: var(--ink); white-space: nowrap; }
.bill-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--ink); }
.bill-total span { font: 600 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bill-total b { font: 600 1.7rem/1 var(--mono); color: var(--navy); letter-spacing: -.02em; }
.bill-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font: 600 .78rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--seal); text-decoration: none; }
.bill-link .ico { width: 15px; height: 15px; } .bill-link:hover { color: var(--seal-2); }
[dir=rtl] .bill-link .ico { transform: scaleX(-1); }
.seal-svg { color: var(--seal); display: block; }
.bill .seal-svg { position: absolute; inset-inline-end: -44px; bottom: -52px; width: 132px; height: 132px; transform: rotate(-14deg); opacity: .82; mix-blend-mode: multiply; pointer-events: none; }
.js .bill.reveal .seal-svg { opacity: 0; transform: rotate(-14deg) scale(1.6); transition: opacity .25s ease-in .9s, transform .35s cubic-bezier(.2, 1.4, .4, 1) .9s; }
.js .bill.reveal.in .seal-svg { opacity: .82; transform: rotate(-14deg) scale(1); }
/* credentials bar */
.hero-creds { position: absolute; inset-inline: 0; bottom: 0; border-top: 1px solid rgba(203,169,104,.35); background: rgba(8,18,34,.72); backdrop-filter: blur(8px); }
.hero-creds .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cred { padding: 24px 24px; border-inline-start: 1px solid rgba(255,255,255,.1); }
.cred:first-child { border-inline-start: 0; padding-inline-start: 0; }
.cred b { display: block; font: 500 2rem/1 var(--serif); color: #fff; letter-spacing: .01em; }
.cred span { display: block; margin-top: 8px; font-size: .78rem; letter-spacing: .06em; color: #a9b6c8; }

/* ports ticker */
.ports { background: var(--white); border-bottom: 1px solid var(--rule); overflow: hidden; }
.ports-track { display: inline-flex; gap: 44px; padding: 15px 0; white-space: nowrap; animation: ports 60s linear infinite; font: 500 .8rem var(--mono); color: var(--muted); letter-spacing: .04em; }
.ports-track span { display: inline-flex; align-items: center; gap: 10px; }
.ports-track b { color: var(--navy); font-weight: 600; }
.ports-track i { width: 6px; height: 6px; background: var(--gold-2); transform: rotate(45deg); }
@keyframes ports { to { transform: translateX(-50%); } }
[dir=rtl] .ports-track { animation-direction: reverse; }

/* ── intro / pillars ── */
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.intro-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.intro-media .seal { position: absolute; inset-inline-end: -18px; bottom: 34px; z-index: 3; background: var(--navy); color: #fff; padding: 18px 22px; text-align: center; box-shadow: 0 0 0 6px var(--paper); border-top: 3px solid var(--seal); }
.seal b { display: block; font: 500 2.4rem/1 var(--serif); color: var(--gold-2); }
.seal small { display: block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; margin-top: 6px; color: #c4cedc; }
.pillars { display: grid; gap: 0; margin-top: 34px; border-top: 2px solid var(--ink); }
.pillar { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.pillar i { font: 600 .82rem/1 var(--mono); font-style: normal; color: var(--seal); padding-top: 8px; letter-spacing: .04em; }
.pillar b { display: block; font: 500 1.18rem/1.3 var(--display); color: var(--navy); margin-bottom: 4px; }
.pillar p { margin: 0; color: var(--muted); font-size: .96rem; }

/* ── home: service index, set like a tariff schedule ── */
.sx { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--navy); box-shadow: var(--shadow); }
.sx-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.sx-tab { display: grid; gap: 4px; padding: 20px 24px; text-align: start; background: var(--paper); border: 0; border-inline-end: 1px solid var(--rule); cursor: pointer; color: var(--muted); font: inherit; position: relative; transition: background .2s; }
.sx-tab:last-child { border-inline-end: 0; }
.sx-tab i { font: 600 .72rem var(--mono); font-style: normal; color: var(--gold); letter-spacing: .06em; }
.sx-tab b { font: 500 1.12rem/1.25 var(--display); color: var(--navy); }
.sx-tab small { font-size: .78rem; }
.sx-tab::after { content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 3px; background: var(--seal); transform: scaleX(0); transition: transform .3s var(--ease); }
.sx-tab:hover { background: #fff; }
.sx-tab.on { background: #fff; } .sx-tab.on::after { transform: scaleX(1); }
.sx-panel { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 3.5vw, 52px); padding: clamp(22px, 3vw, 40px); align-items: start; }
.sx-panel[hidden] { display: none; }
.sx-fig { margin: 0; }
.sx-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sx-fig figcaption { margin-top: 18px; color: var(--muted); font-size: .95rem; }
.sx-fig .link-arrow { margin-top: 14px; }
.sx-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.sx-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 20px; gap: 16px; align-items: center; padding: 17px 6px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--text); transition: background .2s, padding .25s var(--ease); }
.sx-list a:hover { background: var(--paper); padding-inline-start: 14px; color: var(--text); }
.sx-no { font: 600 .8rem var(--mono); color: var(--seal); }
.sx-list b { display: block; font: 500 1.1rem/1.3 var(--display); color: var(--navy); }
.sx-list small { display: block; color: var(--muted); font-size: .86rem; line-height: 1.5; margin-top: 2px; }
.sx-fact { font: 500 .74rem var(--mono); color: var(--muted); text-align: end; max-width: 190px; }
.sx-list .ico { width: 18px; height: 18px; color: var(--gold); transition: transform .25s var(--ease); }
.sx-list a:hover .ico { transform: translateX(4px); color: var(--seal); }
[dir=rtl] .sx-list .ico { transform: scaleX(-1); }

/* ── service cards (listing pages) ── */
.svc-group + .svc-group { margin-top: 60px; }
.svc-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 16px; margin-bottom: 26px; border-bottom: 2px solid var(--ink); }
.svc-group-head h3 { margin: 0; font-size: 1.6rem; font-weight: 500; }
.svc-group-head p { margin: 0; color: var(--muted); max-width: 520px; font-size: .95rem; }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.svc-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); text-decoration: none; color: var(--text); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.svc-card::before { content: ''; position: absolute; inset-inline: -1px; top: -1px; height: 3px; background: var(--navy); transition: background .3s; z-index: 1; }
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--rule-2); color: var(--text); }
.svc-card:hover::before { background: var(--seal); }
.svc-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-soft); }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.svc-card:hover .svc-img img { transform: scale(1.05); }
.svc-body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 22px; }
.svc-cat { font: 600 .7rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.svc-body b { font: 500 1.22rem/1.3 var(--display); color: var(--navy); margin-bottom: 10px; }
.svc-body p { color: var(--muted); font-size: .94rem; line-height: 1.6; margin: 0 0 18px; }
.svc-facts { list-style: none; margin: 0 0 18px; padding: 14px 0 0; border-top: 1px dashed var(--rule-2); display: grid; gap: 6px; font-size: .85rem; }
.svc-facts li { display: flex; justify-content: space-between; gap: 12px; }
.svc-facts span { color: var(--muted); } .svc-facts strong { color: var(--navy); font-weight: 600; text-align: end; }
.svc-body .link-arrow { margin-top: auto; align-self: flex-start; }

/* ── duty estimator: a declaration form and the bill it produces ── */
.duty { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--navy); box-shadow: var(--shadow); counter-reset: box; }
.duty-form { padding: clamp(24px, 3.4vw, 44px); display: grid; gap: 18px; align-content: start; background: #fff var(--paper-lines); }
.duty-form h3 { font-size: 1.25rem; margin: 0 0 4px; }
.duty-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dfield { display: grid; gap: 7px; }
.dfield > span:not(.unit) { font: 600 .74rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: baseline; gap: 8px; }
.dfield > span:not(.unit)::before { counter-increment: box; content: counter(box, decimal-leading-zero); font: 600 .7rem var(--mono); color: var(--seal); letter-spacing: 0; }
:lang(zh) .dfield > span:not(.unit), :lang(ja) .dfield > span:not(.unit) { letter-spacing: .04em; font-size: .82rem; }
.dfield input, .dfield select { width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--rule-2); background: #fff; font: 500 1rem var(--mono); color: var(--ink); border-radius: 0; }
.dfield input[type=text] { font-family: var(--sans); }
.dfield input:focus, .dfield select:focus { outline: none; border-color: var(--navy); box-shadow: inset 0 -2px 0 var(--navy); }
.dfield .unit { position: relative; }
.dfield .unit input { padding-inline-end: 56px; }
.dfield .unit em { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font: 500 .82rem var(--mono); color: var(--muted); }
.dfield small { color: var(--muted); font-size: .8rem; line-height: 1.45; }
.duty-result { position: relative; background: var(--guilloche), var(--navy); color: #c4cedc; padding: clamp(24px, 3.4vw, 44px); display: flex; flex-direction: column; }
.duty-result h3 { color: #fff; font-size: 1.25rem; }
.duty-table { width: 100%; border-collapse: collapse; margin: 6px 0 22px; font-size: .95rem; }
.duty-table th, .duty-table td { padding: 12px 0; border-bottom: 1px dashed rgba(255,255,255,.18); text-align: start; font-weight: 400; }
.duty-table td { text-align: end; color: #fff; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.duty-table small { display: block; color: #8b9ab0; font: 500 .74rem var(--mono); }
.duty-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-top: 2px solid var(--gold-2); border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 8px; }
.duty-total span { font: 600 .76rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
.duty-total b { font: 600 2.1rem/1 var(--mono); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.duty-landed { display: flex; justify-content: space-between; gap: 16px; font-size: .92rem; margin-bottom: 12px; }
.duty-landed b { color: #fff; font-weight: 600; font-family: var(--mono); }
.duty-landed + .btn { margin-top: 16px; }
.duty-note { font-size: .8rem; color: #8b9ab0; margin: 18px 0 0; line-height: 1.55; }
.duty-result .btn { align-self: flex-start; }

/* ── goods specialties ── */
.goods-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.goods-card { position: relative; grid-column: span 4; min-height: 360px; display: flex; align-items: flex-end; color: #fff; text-decoration: none; overflow: hidden; isolation: isolate; background: var(--navy); }
.goods-card.wide { grid-column: span 6; min-height: 420px; }
.goods-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--ease); }
.goods-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8,18,34,.94) 6%, rgba(8,18,34,.4) 58%, rgba(8,18,34,.12)); transition: background .4s; }
.goods-card::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(203,169,104,0); transition: border-color .4s; pointer-events: none; }
.goods-card:hover img { transform: scale(1.06); }
.goods-card:hover::after { border-color: rgba(203,169,104,.7); }
.goods-card .gc-body { padding: 30px; }
.goods-card small { display: inline-block; font: 600 .68rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); background: var(--gold-2); padding: 4px 10px; margin-bottom: 12px; }
.goods-card b { display: block; font: 500 1.55rem/1.25 var(--display); margin-bottom: 8px; }
.goods-card p { margin: 0; color: #c9d2df; font-size: .93rem; max-width: 460px; }
.goods-card:hover { color: #fff; }

/* ── trade lanes: a departure board ── */
.lanes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.lane-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--gold-2); }
.lane-list a { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 6px; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; text-decoration: none; transition: background .25s, padding .25s; }
.lane-list a:hover { background: rgba(255,255,255,.05); padding-inline-start: 14px; color: #fff; }
.lane-list i { font: 600 .78rem var(--mono); font-style: normal; color: var(--ink); background: var(--gold-2); padding: 5px 0; text-align: center; letter-spacing: .04em; }
.lane-list b { display: block; font: 500 1.3rem/1.25 var(--display); }
.lane-list small { display: block; color: #9cabbf; font-size: .86rem; margin-top: 3px; }
.lane-list .ico { color: var(--gold-2); transition: transform .25s var(--ease); }
.lane-list a:hover .ico { transform: translateX(4px); }
[dir=rtl] .lane-list .ico { transform: scaleX(-1); }
.lane-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lane-modes span { font: 500 .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #c9d2df; border: 1px solid rgba(255,255,255,.22); padding: 2px 8px; }
.lanes-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.lanes-media figcaption { margin-top: 20px; font-size: .84rem; color: #9cabbf; }

/* ── process: six numbered boxes, the last one released ── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rule-2); background: #fff; }
.step { position: relative; padding: 26px 22px 28px; border-inline-end: 1px solid var(--rule); }
.step:last-child { border-inline-end: 0; }
.step::after { content: ''; position: absolute; top: 34px; inset-inline-end: -7px; width: 12px; height: 12px; background: #fff; border-top: 1px solid var(--rule-2); border-inline-end: 1px solid var(--rule-2); transform: rotate(45deg); z-index: 1; }
[dir=rtl] .step::after { transform: rotate(-135deg); }
.step:last-child::after { display: none; }
.step-n { display: inline-block; font: 600 .78rem var(--mono); color: var(--seal); letter-spacing: .06em; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 2px solid var(--ink); min-width: 44px; }
.step:last-child { background: var(--navy); color: #c4cedc; }
.step:last-child .step-n { color: #6fd3a5; border-color: #6fd3a5; }
.step:last-child b { color: #fff; } .step:last-child p { color: #a9b6c8; }
.step b { display: block; font: 500 1.1rem/1.3 var(--display); color: var(--navy); margin-bottom: 8px; }
.step p { font-size: .88rem; color: var(--muted); margin: 0; line-height: 1.55; }

/* ── commitments ── */
.commit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); border-inline-start: 1px solid var(--rule); }
.commit { padding: 34px 28px; border-inline-end: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: #fff; transition: background .3s; }
.commit:hover { background: var(--paper); }
.commit .ico { width: 30px; height: 30px; color: var(--seal); margin-bottom: 20px; }
.commit b { display: block; font: 500 1.16rem/1.3 var(--display); color: var(--navy); margin-bottom: 10px; }
.commit p { margin: 0; color: var(--muted); font-size: .93rem; }

/* ── stats ── */
.stats { background: var(--guilloche), var(--ink); color: #fff; border-block: 1px solid rgba(203,169,104,.35); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: 50px 26px; border-inline-start: 1px solid rgba(255,255,255,.1); text-align: center; }
.stat:first-child { border-inline-start: 0; }
.stat-v { display: block; font: 400 clamp(2.4rem, 3.4vw, 3.4rem)/1 var(--serif); color: var(--gold-2); margin-bottom: 12px; }
.stat span { font-size: .84rem; color: #a9b6c8; letter-spacing: .05em; }

/* ── FAQ ── */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-grid .sec-head { position: sticky; top: 150px; }
.faq-list { border-top: 2px solid var(--ink); }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 0; font: 500 1.12rem/1.4 var(--display); color: var(--navy); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--rule-2); font: 400 1.2rem/1 var(--mono); color: var(--seal); transition: transform .3s, background .3s, color .3s; }
.qa[open] summary::after { transform: rotate(45deg); background: var(--seal); border-color: var(--seal); color: #fff; }
.qa p { margin: 0 0 22px; color: var(--text); max-width: 680px; }

/* ── news ── */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.ncard { display: flex; flex-direction: column; text-decoration: none; color: var(--text); border-top: 2px solid var(--ink); padding-top: 18px; }
.ncard-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-soft); margin-bottom: 18px; order: 2; }
.ncard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ncard:hover .ncard-img img { transform: scale(1.04); }
.ncard time { font: 500 .74rem var(--mono); letter-spacing: .06em; color: var(--seal); order: 1; margin-bottom: 14px; }
.ncard b { font: 500 1.22rem/1.35 var(--display); color: var(--navy); margin: 0 0 10px; order: 3; }
.ncard:hover b { color: var(--seal-2); }
.ncard small { color: var(--muted); font-size: .92rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; order: 4; }
.center-row { display: flex; justify-content: center; margin-top: 48px; }

/* ── CTA band ── */
.cta-band { position: relative; background: var(--guilloche), var(--navy); color: #c9d2df; overflow: hidden; isolation: isolate; border-top: 3px solid var(--seal); }
.cta-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 88% 10%, rgba(203,169,104,.22), transparent 55%); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: clamp(60px, 7.5vw, 96px); position: relative; }
.cta-inner h2 { color: #fff; margin-bottom: 12px; font-size: clamp(1.8rem, 2.4vw + .9rem, 3rem); }
.cta-inner p { margin: 0; max-width: 620px; }
.cta-inner .eyebrow { color: var(--gold-2); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }
.cta-band .seal-svg { position: absolute; inset-inline-end: -70px; top: 50%; width: 340px; height: 340px; transform: translateY(-50%) rotate(-12deg); color: var(--gold-2); opacity: .1; z-index: -1; pointer-events: none; }

/* ── page hero ── */
.phero { position: relative; background: var(--guilloche), var(--navy); color: #c9d2df; overflow: hidden; isolation: isolate; border-bottom: 3px solid var(--seal); }
.phero-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; padding-block: clamp(48px, 6vw, 88px); }
.phero-inner.solo { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.phero h1 { color: #fff; font-size: clamp(2.1rem, 2.9vw + .8rem, 3.3rem); }
.phero .lead { color: #b8c4d4; margin: 0; }
.phero .eyebrow { color: var(--gold-2); }
.phero-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.crumbs ol { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font: 500 .76rem var(--mono); letter-spacing: .02em; }
.crumbs li { color: #8b9ab0; }
.crumbs li + li::before { content: '›'; margin-inline-end: 6px; color: var(--gold-2); }
.crumbs a { color: #c9d2df; text-decoration: none; }
.crumbs a:hover { color: var(--gold-2); }
.art-head .crumbs li, .art-head .crumbs a { color: var(--muted); }

/* ── services listing ── */
.cat-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 44px; align-items: start; }
.cat-side { position: sticky; top: 150px; border: 1px solid var(--rule); border-top: 3px solid var(--navy); background: #fff; }
.cat-side h2 { margin: 0; padding: 18px 20px; font: 600 .74rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--rule); }
.cat-side a { display: flex; justify-content: space-between; gap: 10px; padding: 12px 20px; color: var(--ink); text-decoration: none; font-size: .93rem; border-inline-start: 3px solid transparent; }
.cat-side a:hover { background: var(--ivory); }
.cat-side a.on { border-inline-start-color: var(--seal); background: var(--ivory); color: var(--navy); font-weight: 600; }
.cat-side small { color: var(--muted); font: 500 .76rem var(--mono); }
.cat-side .grp { padding: 14px 20px 6px; font: 500 1rem var(--display); color: var(--navy); border-top: 1px solid var(--rule); }
.cat-side .grp:first-of-type { border-top: 0; }
.cat-side .grp + a, .cat-side a.sub { padding-inline-start: 30px; }
.cat-main .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cat-intro { margin-bottom: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
.cat-intro ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.cat-intro li { display: flex; gap: 10px; font-size: .94rem; }
.cat-intro li .ico { color: var(--green); width: 18px; margin-top: 4px; }

/* ── service detail ── */
.sd-hero { background: var(--guilloche), var(--navy); color: #c9d2df; position: relative; isolation: isolate; overflow: hidden; border-bottom: 3px solid var(--seal); }
.sd-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(44px, 5.5vw, 80px); }
.sd-hero h1 { color: #fff; font-size: clamp(2.1rem, 2.9vw + .8rem, 3.3rem); }
.sd-hero .lead { color: #c9d2df; }
.sd-cat { display: inline-block; font: 600 .72rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); background: var(--gold-2); padding: 5px 12px; text-decoration: none; margin-bottom: 18px; }
.sd-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 30px 0 32px; border-top: 2px solid var(--gold-2); border-bottom: 1px solid rgba(255,255,255,.14); }
.sd-kpis div { padding: 18px 16px 18px 0; border-inline-end: 1px solid rgba(255,255,255,.1); }
.sd-kpis div + div { padding-inline-start: 18px; }
.sd-kpis div:last-child { border-inline-end: 0; }
.sd-kpis dt { font: 500 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #8b9ab0; margin-bottom: 6px; }
.sd-kpis dd { margin: 0; font: 500 1.12rem/1.3 var(--display); color: #fff; }
.sd-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.sd-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: clamp(32px, 5vw, 64px); align-items: start; }
.sd-main > * + * { margin-top: 56px; }
.sd-main h2 { font-size: clamp(1.5rem, 1.3vw + .9rem, 2rem); padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.sd-summary { font: 400 1.2rem/1.75 var(--display); color: var(--ink); }
.scope { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.scope li { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.scope .ico { color: var(--green); width: 20px; margin-top: 3px; }
.sd-aside { position: sticky; top: 150px; display: grid; gap: 20px; }
.facts-card { background: #fff var(--paper-lines); border: 1px solid var(--rule); border-top: 3px solid var(--navy); padding: 24px; }
.facts-card h2 { font: 600 .74rem var(--sans) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; border: 0 !important; padding: 0 !important; }
.facts { margin: 0; display: grid; }
.facts div { padding: 12px 0; border-bottom: 1px dashed var(--rule-2); }
.facts div:last-child { border-bottom: 0; }
.facts dt { font: 500 .72rem var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.facts dd { margin: 0; color: var(--navy); font-weight: 600; font-size: .95rem; }
.aside-cta { background: var(--guilloche), var(--navy); color: #c9d2df; padding: 26px; border-top: 3px solid var(--seal); }
.aside-cta h2 { color: #fff; font-size: 1.25rem !important; border: 0 !important; padding: 0 !important; }
.aside-cta p { font-size: .92rem; }
.aside-cta .btn { width: 100%; }
.aside-cta .btn + .btn { margin-top: 10px; }

/* tables */
.spec-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule); background: #fff; }
.spec { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 520px; }
.spec th, .spec td { padding: 14px 18px; text-align: start; border-bottom: 1px solid var(--rule); vertical-align: top; }
.spec thead th { background: var(--navy); color: #fff; font: 600 .76rem var(--sans); letter-spacing: .1em; text-transform: uppercase; border-bottom: 0; }
.spec tbody th { width: 34%; color: var(--navy); font-weight: 600; background: var(--paper); }
.spec tbody tr:last-child > * { border-bottom: 0; }
.ds-note { font-size: .84rem; color: var(--muted); margin: 12px 0 0; }

/* trade lane detail */
.lane-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule); border-top: 3px solid var(--navy); background: #fff; }
.lane-facts div { padding: 24px; border-inline-end: 1px solid var(--rule); }
.lane-facts div:last-child { border-inline-end: 0; }
.lane-facts dt { font: 600 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--seal); margin-bottom: 8px; }
.lane-facts dd { margin: 0; font: 500 1.15rem/1.35 var(--display); color: var(--navy); }

/* about */
.about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.about-block { padding: 36px 30px 36px 0; border-inline-end: 1px solid var(--rule); }
.about-block + .about-block { padding-inline-start: 30px; }
.about-block:last-child { border-inline-end: 0; }
.about-n { display: block; font: 600 .82rem var(--mono); color: var(--seal); margin-bottom: 16px; letter-spacing: .06em; }
.about-block h2 { font-size: 1.45rem; }
.about-block p { color: var(--muted); margin: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.values { list-style: none; margin: 24px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.values li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); color: var(--ink); }
.values .ico { color: var(--green); margin-top: 3px; }
.network { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hub { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--navy); padding: 28px; }
.hub small { font: 600 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--seal); }
.hub b { display: block; font: 500 1.35rem var(--display); color: var(--navy); margin: 10px 0 12px; }
.hub p { margin: 0; color: var(--muted); font-size: .94rem; }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.contact-cards { display: grid; gap: 14px; }
.ccard { display: flex; gap: 16px; align-items: center; padding: 20px 22px; background: #fff; border: 1px solid var(--rule); text-decoration: none; color: var(--text); transition: border-color .25s, transform .25s var(--ease); }
a.ccard:hover { border-color: var(--navy); color: var(--text); transform: translateX(3px); }
.ccard .ico { width: 26px; height: 26px; color: var(--seal); }
.ccard small { display: block; font: 500 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ccard b { display: block; color: var(--navy); font-weight: 600; overflow-wrap: anywhere; }
.contact-form { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--seal); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow); }
.offices { display: grid; gap: 10px; margin-top: 8px; }
.office { padding: 16px 20px; border: 1px solid var(--rule); background: #fff; }
.office b { display: block; color: var(--navy); font-family: var(--display); font-weight: 500; }
.office span { font-size: .9rem; color: var(--muted); }
.ccard-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.people { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 8px; }
.person { padding: 20px 22px; background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--navy); display: grid; gap: 6px; }
.person small { font: 600 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--seal); }
.person b { font-family: var(--display); font-weight: 500; font-size: 1.15rem; color: var(--navy); }
.person a, .office a { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font: 500 .9rem var(--mono); overflow-wrap: anywhere; }
.person a:hover, .office a:hover { color: var(--seal); }
.person .ico, .office .ico { width: 15px; height: 15px; color: var(--gold); flex: none; }
.office a { margin-top: 4px; }

/* ── inquiry form ── */
.inq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field > span { font: 600 .74rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
:lang(zh) .field > span, :lang(ja) .field > span { letter-spacing: .04em; font-size: .84rem; }
.field em { color: var(--err); font-style: normal; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--rule-2); background: var(--paper); font: 400 .98rem var(--sans); color: var(--ink); border-radius: 0; }
.field input, .field select { height: 50px; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); background: #fff; box-shadow: inset 0 -2px 0 var(--navy); }
.field.invalid input { border-color: var(--err); }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0; font-size: .88rem; color: var(--muted); }
.consent input { margin-top: 4px; accent-color: var(--navy); }
.inq-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.inq-actions .btn-primary { background: var(--seal); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.inq-actions .btn-primary:hover { background: var(--seal-2); }
.inq-status { margin: 0; font-size: .92rem; }
.inq-status.ok { color: var(--ok); } .inq-status.err { color: var(--err); }
.inq.sent .inq-grid, .inq.sent .consent { opacity: .45; pointer-events: none; }
.inq-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .9rem; }
.inq-compact .inq-grid { gap: 12px; }
.inq-band { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 48px; background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--seal); padding: clamp(24px, 4vw, 48px); box-shadow: var(--shadow); }
.inq-side h2 { font-size: 1.7rem; }

/* ── article ── */
.art-head { padding-block: clamp(40px, 5vw, 72px) 32px; background: var(--ivory) var(--paper-lines); border-bottom: 2px solid var(--ink); margin-bottom: 40px; }
.art-head h1 { font-size: clamp(1.9rem, 2.3vw + .9rem, 3rem); }
.art-meta { display: flex; flex-wrap: wrap; gap: 10px; font: 500 .76rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--seal); margin-bottom: 16px; }
.art-meta .tag { color: var(--navy); }
.art-by { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; margin: 0; }
.art-by .ico { width: 16px; color: var(--gold); }
.art-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.art-credit { font-size: .78rem; color: var(--muted); margin: 8px 0 32px; }
.prose { font-size: 1.06rem; line-height: 1.8; color: var(--text); }
.prose h2 { font-size: 1.6rem; margin-top: 1.9em; padding-top: .6em; border-top: 1px solid var(--rule); }
.prose h3 { font-size: 1.25rem; margin-top: 1.5em; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--seal); }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-inline-start: 3px solid var(--seal); font: italic 400 1.15rem/1.6 var(--display); color: var(--navy); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .94rem; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 10px 14px; border: 1px solid var(--rule); text-align: start; }
.prose th { background: var(--navy); color: #fff; font-weight: 600; }
.prose td { font-variant-numeric: tabular-nums; }
.prose .faq { margin-top: 40px; }
.prose .faq details { border-bottom: 1px solid var(--rule); padding: 14px 0; }
.prose .faq summary { cursor: pointer; font: 500 1.08rem var(--display); color: var(--navy); }
.art-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 0; padding: 0; list-style: none; }
.art-tags li { font: 500 .76rem var(--mono); color: var(--navy); background: var(--ivory); border: 1px solid var(--rule); padding: 5px 11px; }
.art-cta { margin: 44px 0; padding: 32px; background: var(--guilloche), var(--navy); color: #c9d2df; border-top: 3px solid var(--seal); }
.art-cta h2 { color: #fff; margin-top: 0; font-size: 1.4rem; border: 0; padding: 0; }
.art-note { font-size: .85rem; color: var(--muted); display: flex; gap: 8px; }
.art-note .ico { width: 16px; color: var(--gold); }
.sources { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: .9rem; }
.sources h2 { font-size: 1.1rem; border: 0; padding: 0; }
.h-sm { font-size: 1.5rem; margin: 26px 0 14px; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule); }
.pager a { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); text-decoration: none; font-weight: 600; }
.empty { text-align: center; color: var(--muted); padding: 60px 0; }

/* ── case studies ── */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.case-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); text-decoration: none; color: var(--text); transition: border-color .25s, transform .3s var(--ease), box-shadow .3s; }
.case-card:hover { border-color: var(--rule-2); transform: translateY(-5px); color: var(--text); box-shadow: var(--shadow); }
.case-img, .case-media { position: relative; display: block; }
.case-img { overflow: hidden; }
.case-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.case-card:hover .case-img img { transform: scale(1.05); }
.case-img em, .case-media em { position: absolute; inset-inline-start: 0; bottom: 0; padding: 7px 14px; background: var(--seal); color: #fff; font: 600 .7rem var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; z-index: 1; }
.case-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 24px; flex: 1; }
.case-body b { font: 500 1.24rem/1.35 var(--serif); font-family: var(--display); color: var(--navy); }
.case-body small { color: var(--gold); font: 500 .76rem var(--mono); }
.case-body p { color: var(--muted); font-size: .92rem; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.case-body .link-arrow { margin-top: auto; align-self: flex-start; }
.case-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border-inline-start: 3px solid var(--gold-2); background: #fff; color: var(--muted); font-size: .92rem; margin: 0 0 26px; }
.case-note .ico { width: 20px; height: 20px; color: var(--gold); flex: none; }
.case-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 2px solid var(--ink); }
.case-index a { display: flex; gap: 14px; align-items: baseline; padding: 14px 4px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--navy); font-family: var(--display); }
.case-index a:hover { color: var(--seal); }
.case-index i { font: 600 .78rem var(--mono); font-style: normal; color: var(--seal); }
.case { scroll-margin-top: 110px; }
.case-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.case-split.flip .case-media { order: 2; }
.case-media { position: sticky; top: 130px; }
.case-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.case-text h2 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin: 6px 0 20px; }
.case-text h3 { font: 600 .74rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--seal); margin: 22px 0 6px; }
.case-text p { margin: 0; line-height: 1.75; }
.case-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.case-meta div { padding-block: 14px; padding-inline: 0 16px; }
.case-meta div + div { padding-inline-start: 16px; border-inline-start: 1px solid var(--rule); }
.case-meta dt { font: 500 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.case-meta dd { margin: 4px 0 0; color: var(--navy); font-weight: 500; }
.case-docs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.case-docs li { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; }
.case-docs .ico { width: 16px; height: 16px; color: var(--gold); flex: none; margin-top: 3px; }
.case-delivered { margin-top: 24px !important; padding: 16px 20px; background: var(--navy); color: #e3e7ee; border-inline-start: 3px solid #6fd3a5; }
.case-delivered b { display: block; color: #6fd3a5; font: 600 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.case-text .link-arrow { margin-top: 22px; }

/* ── footer ── */
.site-footer { position: relative; background: var(--guilloche), var(--ink); color: #8b9ab0; font-size: .92rem; overflow: hidden; border-top: 3px solid var(--gold-2); }
.footer-mark { font: 600 clamp(5rem, 19vw, 17rem)/.8 var(--serif); letter-spacing: .06em; color: transparent; -webkit-text-stroke: 1px rgba(203,169,104,.22); text-align: center; padding-top: 48px; margin-bottom: -.12em; user-select: none; white-space: nowrap; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.2fr); gap: 56px; padding-block: 64px 48px; border-top: 1px solid rgba(255,255,255,.08); position: relative; }
.site-footer .logo-text b { color: #fff; }
.footer-brand p { margin: 22px 0 0; max-width: 360px; line-height: 1.7; }
.footer-company { color: #c9d2df; font-family: var(--display); }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 32px; }
.site-footer h3 { font: 600 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 20px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: #c9d2df; text-decoration: none; }
.site-footer a:hover { color: var(--gold-2); }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; }
.footer-contact a, .footer-contact span { min-width: 0; overflow-wrap: break-word; }
.footer-contact .ico { width: 17px; height: 17px; color: var(--gold-2); margin-top: 3px; }
.footer-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.08); }
.footer-langs .ico { color: var(--gold-2); width: 18px; }
.footer-langs a { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; }
.footer-langs a[aria-current] { color: var(--gold-2); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px 0 30px; border-top: 1px solid rgba(255,255,255,.08); font: 500 .76rem var(--mono); }

/* ── floating actions, drawer ── */
.fabs { position: fixed; z-index: 50; inset-inline-end: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; opacity: 0; transform: translateY(16px); pointer-events: none; transition: .35s var(--ease); }
.fabs.show { opacity: 1; transform: none; pointer-events: auto; }
.fab { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; border: 0; background: var(--seal); color: #fff; cursor: pointer; font: 600 .8rem var(--sans); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 16px 30px -14px rgba(8,18,34,.7); text-decoration: none; border-radius: 2px; }
.fab:hover { background: var(--seal-2); color: #fff; }
.fab-wa { width: 52px; padding: 0; justify-content: center; background: #1f7a4a; }
.fab-wa:hover { background: #17633b; }
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer[hidden] { display: none; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(8,18,34,.6); animation: fade .25s; }
.drawer-panel { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(520px, 100vw); background: var(--paper); padding: 40px 32px; overflow-y: auto; border-inline-start: 3px solid var(--seal); animation: slide .35s var(--ease); }
[dir=rtl] .drawer-panel { animation-name: slide-rtl; }
.drawer-panel h2 { font-size: 1.8rem; }
.drawer-x { position: absolute; top: 16px; inset-inline-end: 16px; width: 40px; height: 40px; border: 1px solid var(--rule-2); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--navy); }
@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(100%); } }
@keyframes slide-rtl { from { transform: translateX(-100%); } }

/* ── live chat ── */
.chat-tab { position: fixed; z-index: 45; inset-inline-end: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 11px; border: 0; background: var(--navy); color: #fff; cursor: pointer; font: 600 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; border-inline-start: 3px solid var(--gold-2); }
.chat-tab:hover { background: var(--navy-3); }
.chat-tab svg { width: 19px; height: 19px; }
.chat-tab span { writing-mode: vertical-rl; }
.chat-badge { position: absolute; top: -8px; inset-inline-start: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--seal); color: #fff; font: 600 .7rem/20px var(--sans); text-align: center; }
.chat-badge[hidden] { display: none; }
.chat-tab.is-open { opacity: 0; pointer-events: none; }
.chat { position: fixed; z-index: 85; inset-inline-end: 18px; bottom: 18px; width: min(380px, calc(100vw - 28px)); height: min(600px, calc(100vh - 36px)); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule-2); box-shadow: 0 30px 60px -24px rgba(8,18,34,.6); animation: chat-in .28s var(--ease); }
.chat[hidden] { display: none; }
@keyframes chat-in { from { opacity: 0; transform: translateY(12px); } }
.chat-head { position: relative; padding: 20px; background: var(--guilloche), var(--navy); color: #fff; border-bottom: 3px solid var(--seal); }
.chat-head h2 { font-size: 1.15rem; color: #fff; margin: 10px 0 4px; }
.chat-status { margin: 0; display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: #b8c4d4; }
.chat-status i { width: 8px; height: 8px; border-radius: 50%; background: #6fd3a5; }
.chat-x { position: absolute; top: 12px; inset-inline-end: 12px; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; }
.chat-x .ico { width: 16px; height: 16px; }
.chat-avatars { display: flex; } .chat-avatars span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid var(--navy); overflow: hidden; }
.chat-avatars span + span { margin-inline-start: -8px; } .chat-avatars img { width: 28px; height: auto; }
.chat-av2 { background: var(--gold-2) !important; color: var(--ink); } .chat-av2 svg { width: 20px; height: 20px; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.chat-msg { max-width: 82%; padding: 10px 13px; font-size: .92rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.agent { align-self: flex-start; background: #fff; border: 1px solid var(--rule); }
.chat-msg.visitor { align-self: flex-end; background: var(--navy); color: #fff; }
.chat-msg.note { align-self: center; max-width: 92%; background: #e8f4ee; color: var(--ok); font-size: .82rem; text-align: center; }
.chat-msg.pending { opacity: .6; } .chat-msg.failed { background: var(--seal-soft); color: var(--err); }
.chat-gate { padding: 16px; display: grid; gap: 10px; border-top: 1px solid var(--rule); }
.chat-gate h3 { font-size: 1rem; margin: 0; }
.chat-gate input { padding: 11px 12px; border: 1px solid var(--rule-2); background: #fff; font: inherit; }
.chat-gate input:focus { outline: none; border-color: var(--navy); }
.chat-err { margin: 0; color: var(--err); font-size: .84rem; }
.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--rule); }
.chat-input[hidden], .chat-gate[hidden] { display: none; }
.chat-input textarea { flex: 1; resize: none; padding: 10px 12px; border: 1px solid var(--rule-2); max-height: 120px; font: inherit; }
.chat-input textarea:focus { outline: none; border-color: var(--navy); }
.chat-input button { width: 44px; border: 0; background: var(--seal); color: #fff; cursor: pointer; display: grid; place-items: center; }

/* ── lightbox ── */
.lb { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; gap: 12px; padding: 48px 20px 28px; background: rgba(8,18,34,.92); cursor: zoom-out; }
.lb[hidden] { display: none; }
.lb-fig { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 0; }
.lb-fig img { max-width: min(100%, 980px); max-height: calc(100% - 40px); object-fit: contain; background: #fff; padding: 10px; cursor: default; }
.lb-fig figcaption { display: flex; gap: 16px; align-items: center; color: #e6ecef; font-size: .82rem; letter-spacing: .08em; cursor: default; }
.lb-n { color: var(--gold-2); }
.lb-x, .lb-nav { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 22px; }
.lb-x { position: absolute; top: 14px; inset-inline-end: 14px; }
.lb.single .lb-nav { visibility: hidden; }

/* 404 */
.nf { padding-block: 120px; text-align: center; }
.nf-code { font: 600 7rem/1 var(--mono); color: var(--gold-2); margin: 0 0 12px; letter-spacing: -.04em; }

/* ── reveal ── */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .bill.reveal { transform: translateY(26px) rotate(0deg); } .js .bill.reveal.in { transform: rotate(1.4deg); }
[dir=rtl] .js .bill.reveal.in, .js [dir=rtl] .bill.reveal.in { transform: rotate(-1.4deg); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .bill.reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; }
  .js .bill.reveal .seal-svg { opacity: .82; transform: rotate(-14deg); transition: none; } .ports-track { animation: none; }
}

/* ── responsive ── */
@media (max-width: 1180px) {
  .svc-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step:nth-child(3) { border-inline-end: 0; } .step:nth-child(3)::after { display: none; }
  .step:nth-child(-n+3) { border-bottom: 1px solid var(--rule); }
  .commit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-fact { display: none; } .sx-list a { grid-template-columns: 40px minmax(0, 1fr) 20px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .menu-btn { display: grid; }
  .header-cta { display: none; }
  .header-actions { margin-inline-start: auto; }
  .tb-left { display: none; }
  .bar .wrap { min-height: 72px; }
  .nav { position: fixed; inset: 110px 0 0; z-index: 55; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gutter) 40px; background: #fff; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility .35s; }
  [dir=rtl] .nav { transform: translateX(-100%); }
  .nav.open { transform: none; visibility: visible; }
  .nav-link { padding: 16px 0; border-bottom: 1px solid var(--rule); justify-content: space-between; width: 100%; font-size: 1.05rem; }
  .nav-link::after { display: none; }
  .mega, .drop { position: static; transform: none !important; width: auto; box-shadow: none; border: 0; padding: 0; display: none; opacity: 1; visibility: visible; }
  .open > .mega, .open > .drop { display: block; }
  .mega-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mega-groups { display: none; }
  .mega-panel, .mega-panel[hidden] { display: grid; grid-template-columns: minmax(0, 1fr); padding: 8px 0 12px; }
  .mega-item small, .drop-item small { display: none; }
  .svc-grid, .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-inner, .intro-grid, .lanes, .faq-grid, .sd-grid, .sd-layout, .phero-inner, .contact-grid, .split, .duty, .inq-band, .cat-layout, .sx-panel { grid-template-columns: minmax(0, 1fr); }
  .bill { justify-self: start; }
  .faq-grid .sec-head, .sd-aside, .cat-side, .case-media { position: static; }
  .intro-media { max-width: 560px; }
  .goods-card, .goods-card.wide { grid-column: span 6; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .network { grid-template-columns: minmax(0, 1fr); }
  .lane-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lane-facts div:nth-child(2) { border-inline-end: 0; }
  .lane-facts div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .sx-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sx-tab:nth-child(2) { border-inline-end: 0; } .sx-tab:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .case-grid { grid-template-columns: 1fr 1fr; } .case-split { grid-template-columns: 1fr; gap: 32px; } .case-split.flip .case-media { order: 0; }
  .cta-band .seal-svg { display: none; }
}
@media (max-width: 760px) {
  .topbar .tb-link span { display: none; }
  .hero-inner { padding-block: 56px 44px; }
  .hero-creds { position: static; background: var(--navy-2); }
  .hero-creds .wrap, .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cred { padding: 20px 14px; border-top: 1px solid rgba(255,255,255,.1); }
  .cred:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .cred b { font-size: 1.5rem; }
  .bill { transform: none !important; width: 100%; padding: 24px 22px 22px; } .bill .seal-svg { inset-inline-end: -6px; width: 96px; height: 96px; bottom: -40px; }
  .stat { padding: 30px 14px; border-top: 1px solid rgba(255,255,255,.1); }
  .stat:nth-child(odd) { border-inline-start: 0; }
  .svc-grid, .news-grid, .cat-main .svc-grid, .about-grid, .commit-grid, .scope, .duty-row, .inq-grid, .cat-intro ul, .case-grid, .case-meta, .case-docs, .ccard-row { grid-template-columns: minmax(0, 1fr); }
  .case-meta div + div { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--rule); }
  .about-block, .about-block + .about-block { padding: 28px 0; border-inline-end: 0; border-bottom: 1px solid var(--rule); }
  .goods-card, .goods-card.wide { grid-column: span 12; min-height: 300px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { border-bottom: 1px solid var(--rule); } .step::after { display: none; }
  .step:nth-child(odd) { border-inline-end: 1px solid var(--rule); } .step:nth-child(even) { border-inline-end: 0; }
  .step:nth-last-child(-n+2) { border-bottom: 0; }
  .footer-cols { grid-template-columns: minmax(0, 1fr); }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .sd-kpis { grid-template-columns: minmax(0, 1fr); }
  .sd-kpis div, .sd-kpis div + div { padding: 14px 0; border-inline-end: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .sd-kpis div:last-child { border-bottom: 0; }
  .intro-media .seal { inset-inline-end: -6px; padding: 12px 16px; } .seal b { font-size: 1.8rem; }
  .intro-media::before, .phero-media::before, .sd-media::before, .lanes-media::before, .case-media::before, .split-media::before, .sx-fig::before,
  .intro-media::after, .phero-media::after, .sd-media::after, .lanes-media::after, .case-media::after, .split-media::after, .sx-fig::after { display: none; }
  .lane-facts { grid-template-columns: minmax(0, 1fr); }
  .lane-facts div { border-inline-end: 0 !important; border-bottom: 1px solid var(--rule); }
  .lane-list a { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; }
  .lb { grid-template-columns: minmax(0, 1fr); padding: 60px 12px 20px; }
  .lb-nav { display: none; }
  .logo-text b { font-size: 1.2rem; } .logo-mark { width: 44px; height: 44px; }
  .chat-tab { padding: 14px 8px; }
  .fabs { inset-inline-end: 14px; bottom: 14px; }
  .fab span { display: none; } .fab { width: 52px; padding: 0; justify-content: center; }
  .sx-tabs { grid-template-columns: minmax(0, 1fr); } .sx-tab { border-inline-end: 0; border-bottom: 1px solid var(--rule); padding: 14px 18px; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 10px; } .sx-tab small { text-align: end; }
  .sx-tab::after { inset-inline: 0 auto; inset-block: 0; width: 3px; height: auto; transform: scaleY(0); } .sx-tab.on::after { transform: scaleY(1); }
  .sx-list a { grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 12px; }
  .footer-mark { padding-top: 32px; }
}
@media (max-width: 520px) { .hero-points { flex-direction: column; } }

/* Arabic is a joined script: letter-spacing breaks the joins. Latin artwork (the seal, the wordmark) keeps its spacing. */
:lang(ar) *:not(.seal-svg):not(.seal-svg *):not(.footer-mark), :lang(ar) *::before, :lang(ar) *::after { letter-spacing: 0 !important; }

/* Desktop widths where the translated menu does not fit on one row (set by site.js → html.nav-compact):
   same collapsed menu as on mobile, but the quote button stays visible. */
html.nav-compact .menu-btn { display: grid; }
html.nav-compact .nav { position: fixed; inset: var(--nav-top, 112px) 0 0; z-index: 55; flex-direction: column; align-items: stretch; gap: 0; padding: 12px max(var(--gutter), calc((100vw - 760px) / 2)) 40px; background: #fff; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility .35s; }
html.nav-compact[dir=rtl] .nav { transform: translateX(-100%); }
html.nav-compact .nav.open { transform: none; visibility: visible; }
html.nav-compact .nav-link { padding: 16px 0; border-bottom: 1px solid var(--rule); justify-content: space-between; width: 100%; font-size: 1.05rem; white-space: normal; }
html.nav-compact .nav-link::after { display: none; }
html.nav-compact .mega, html.nav-compact .drop { position: static; transform: none !important; width: auto; box-shadow: none; border: 0; padding: 0; display: none; opacity: 1; visibility: visible; }
html.nav-compact .open > .mega, html.nav-compact .open > .drop { display: block; }
html.nav-compact .mega-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
html.nav-compact .mega-groups { display: none; }
html.nav-compact .mega-panel, html.nav-compact .mega-panel[hidden] { display: grid; grid-template-columns: minmax(0, 1fr); padding: 8px 0 12px; }
html.nav-compact .mega-item small, html.nav-compact .drop-item small { display: none; }
html.nav-compact .header-actions { margin-inline-start: auto; }
/* On a full desktop bar the red "Request a quote" button already leads to the contact page. */
@media (min-width: 1101px) { html:not(.nav-compact) .nav-contact { display: none; } }
/* RTL: phone numbers, e-mails and figures keep their own (left-to-right) order inside Arabic text. */
[dir=rtl] .tb-link span, [dir=rtl] .footer-contact a, [dir=rtl] .footer-contact span, [dir=rtl] .ccard b, [dir=rtl] .cred b, [dir=rtl] .stat b, [dir=rtl] .person a, [dir=rtl] .office a, [dir=rtl] [data-d], [dir=rtl] .bill td, [dir=rtl] .bill th small, [dir=rtl] .bill-total b, [dir=rtl] .bill-no { unicode-bidi: plaintext; }
[dir=rtl] .bill th small { display: inline-block; }
[dir=rtl] .bill .seal-svg { bottom: -78px; }
/* A filter / backdrop-filter on the header would make it the containing block of the fixed mobile menu (menu collapses to a sliver). Keep the header unfiltered. */
/* Long translations: content buttons may wrap instead of widening the page (the header button stays on one line). */
.btn { max-width: 100%; }
.duty-result .btn, .aside-cta .btn, .art-cta .btn, .cta-actions .btn, .hero-ctas .btn, .sd-ctas .btn, .inq-actions .btn, .center-row .btn { white-space: normal; text-align: center; line-height: 1.3; padding-block: 12px; }