@charset "utf-8";
/* ==========================================================================
   en.css — English-locale stylesheet
   Usage: English landing pages only. Load AFTER css/common.css.
   Design intent: conventions of professional-services sites in English-speaking
   markets (CPA / legal / consulting): system sans stack, generous whitespace,
   constrained measure, two-column hero, restrained accent use, small radii.
   All selectors are scoped under .en-site so nothing leaks into the CN site.
   No webfonts on purpose: zero extra requests keeps overseas load fast.
   ========================================================================== */

/* ---------- 1. Base & typography ---------- */
.en-site{
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  color: #33405a;
  background: #fff;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Scoped reset. Pages that load only en.css (no common.css) still need a baseline:
   border-box everywhere, no default body margin, fluid media. */
.en-site, .en-site *, .en-site *::before, .en-site *::after{ box-sizing: border-box; }
.en-site img, .en-site svg{ max-width: 100%; height: auto; }
.en-site ul, .en-site ol{ margin: 0; padding: 0; }
.en-site b, .en-site strong{ font-weight: 650; }

.en-site .wrap{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.en-site h1, .en-site h2, .en-site h3, .en-site h4{
  font-weight: 650;
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: #16294a;
  margin: 0;
}
.en-site h1{ font-size: clamp(31px, 4.1vw, 47px); line-height: 1.10; letter-spacing: -0.028em; }
.en-site h2{ font-size: clamp(25px, 3.0vw, 35px); }
.en-site h3{ font-size: 19.5px; line-height: 1.32; letter-spacing: -0.010em; }
.en-site h4{ font-size: 16.5px; line-height: 1.4; }
.en-site p{ margin: 0; }
/* Default link colour for plain inline links — but skip en-btn*. Without the
   :not() guard, ".en-site a" wins on specificity over ".en-btn--primary" and
   forces the dark-navy button text to inherit from .en-site (navy on navy =
   invisible). */
.en-site a:not([class*="en-btn"]){ color: inherit; }
.en-site a, .en-site a *{ text-decoration: none; }

/* Eyebrow / section label */
.en-eyebrow{
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #a97c2f;
  margin-bottom: 14px;
}
/* Constrained measure — never let a paragraph run the full grid width */
.en-measure{ max-width: 68ch; }
.en-lead{ font-size: 17.5px; line-height: 1.62; color: #4a5670; }

/* ---------- 2. Sections & rhythm ---------- */
.en-sec{ padding: clamp(58px, 7.4vw, 96px) 0; }
.en-sec--tint{ background: #f2f6fb; border-top: 1px solid #e3eaf4; border-bottom: 1px solid #e3eaf4; }
.en-sec--navy{ background: #16294a; color: #d9e2f1; }
.en-sec--navy h2, .en-sec--navy h3{ color: #fff; }
.en-sec--navy .en-lead{ color: #b8c6de; }
.en-head{ max-width: 760px; margin-bottom: 46px; }
.en-head p{ margin-top: 15px; }

/* ---------- 3. Header ---------- */
.en-hd{
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid #e7ecf3;
}
.en-hd .wrap{ display: flex; align-items: center; gap: 30px; height: 72px; }
.en-logo{ display: flex; align-items: center; gap: 11px; font-weight: 700; color: #16294a; }
.en-logo .en-mark{
  width: 34px; height: 34px; border-radius: 7px;
  background: #16294a; color: #e8a94e;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.en-logo small{ display: block; font-size: 11px; font-weight: 500; color: #7b869c; letter-spacing: .04em; }
.en-nav{ margin-left: auto; display: flex; align-items: center; gap: 27px; }
.en-nav a{ font-size: 15px; font-weight: 550; color: #3d4a63; }
.en-nav a:hover{ color: #16294a; }
.en-nav select{
  font: inherit; font-size: 14.5px; padding: 6px 9px;
  border: 1px solid #dde3ec; border-radius: 6px; background: #fff; color: #3d4a63; cursor: pointer;
}
@media (max-width: 900px){ .en-nav a{ display: none; } }

/* ---------- 4. Buttons (small radii — the EN convention) ---------- */
.en-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 6px;
  font-size: 15.5px; font-weight: 700; font-family: inherit;
  border: 1px solid transparent; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.en-btn:hover{ transform: translateY(-1px); }
.en-btn--primary{ background: #16294a; color: #fff; }
.en-btn--primary:hover{ background: #1f3a68; }
.en-btn--gold{ background: #e8a94e; color: #33240a; }
.en-btn--gold:hover{ background: #f0b862; }
.en-btn--ghost{ border-color: #cbd4e2; color: #16294a; background: #fff; }
.en-btn--ghost:hover{ border-color: #16294a; }
.en-btn--onnavy{ background: #fff; color: #16294a; }
.en-btn--sm{ padding: 9px 17px; font-size: 14.5px; }
.en-btn--block{ width: 100%; }

/* ---------- 5. Hero (two-column, dark band) ----------
   The hero carries the page's visual weight: a full-bleed navy band that
   breaks up the otherwise all-white body. Everything inside is themed for
   dark, except the enquiry card, which stays white as the floating shape. */
.en-hero{
  padding: clamp(30px, 3.4vw, 44px) 0 clamp(26px, 3vw, 38px);
  background: #16294a; color: #dbe4f4;
  border-bottom: 3px solid #e8a94e;
}
.en-hero .wrap{ display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; }
@media (max-width: 940px){ .en-hero .wrap{ grid-template-columns: 1fr; gap: 38px; } }
.en-hero h1{ margin-bottom: 14px; color: #fff; }
.en-hero .en-lead{ font-size: 17.5px; color: #c2d0e8; }
.en-hero .en-eyebrow{ color: #e8a94e; }
.en-hero-cta{ display: flex; flex-wrap: wrap; gap: 13px; margin-top: 22px; }
/* On the dark band only gold reads as primary, so swap the button roles */
.en-hero .en-btn--primary{ background: #e8a94e; color: #33240a; border-color: #e8a94e; }
.en-hero .en-btn--primary:hover{ background: #f0b862; border-color: #f0b862; }
.en-hero .en-btn--ghost{ background: transparent; color: #fff; border-color: rgba(255,255,255,.38); }
.en-hero .en-btn--ghost:hover{ background: rgba(255,255,255,.10); border-color: #fff; }
/* Chips, ticks and pillars re-themed for the dark band */
.en-hero .en-chips span{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); color: #eaf0fb; }
.en-hero .en-chips .ch-key{ color: #a9bcd8; }
.en-hero .en-ticks li{ color: #c2d0e8; }
.en-hero .en-ticks li b{ color: #fff; }
.en-hero .en-ticks li::before{
  background: rgba(232,169,78,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23e8a94e'%3E%3Cpath d='M8.1 14.3l-3.6-3.6 1.4-1.4 2.2 2.2 6-6 1.4 1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
}
.en-hero .en-pillar{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); }
.en-hero .en-pillar h4{ color: #fff; }
.en-hero .en-pillar p{ color: #aebfdc; }
.en-hero .en-pillar .en-pillar-ic{ background: rgba(232,169,78,.16); color: #f0bb6e; }
.en-hero .en-card{ box-shadow: 0 18px 42px rgba(8,18,38,.35); }
/* Customer-type chip row, sits between lead and CTA */
.en-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.en-chips span{ display:inline-flex; align-items:center; padding:5px 11px; font-size:13px; font-weight:600; color:#16294a; background:#eef2f8; border:1px solid #dde4ef; border-radius:999px; letter-spacing:0.01em; }
.en-chips .ch-key{ color:#6b7688; font-weight:500; margin-right:4px; }
/* Evidence row, sits under the ticks — 4 hard numbers + labels */
.en-evidence{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:22px; padding:14px 0; border-top:1px solid #e7ecf3; border-bottom:1px solid #e7ecf3; }
.en-evidence .num{ font-size:24px; font-weight:700; color:#16294a; letter-spacing:-0.02em; line-height:1; }
.en-evidence .lbl{ font-size:12.5px; color:#6b7688; margin-top:6px; line-height:1.4; }
@media (max-width: 640px){ .en-evidence{ grid-template-columns:repeat(2,1fr); gap:14px 18px; } }
/* Trust ticks under the hero copy */
.en-ticks{ list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.en-ticks li{ display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: #4a5670; }
.en-ticks li::before{
  content: ""; flex: none; width: 19px; height: 19px; margin-top: 3px; border-radius: 50%;
  background: #e8f3ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231a7f4b'%3E%3Cpath d='M8.1 14.3l-3.6-3.6 1.4-1.4 2.2 2.2 6-6 1.4 1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
}
/* Pillars: 4 differentiator cards with icon, title, 1-line desc.
   Replaces the plain tick list when more visual density is needed. */
.en-pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:20px; }
.en-pillar{ padding:12px 12px 13px; border:1px solid #e2e8f1; border-radius:10px; background:#fbfcfe; display:flex; flex-direction:column; gap:5px; }
.en-pillar .en-pillar-ic{ width:30px; height:30px; border-radius:8px; background:#eef2f8; display:inline-flex; align-items:center; justify-content:center; color:#16294a; }
.en-pillar .en-pillar-ic svg{ width:17px; height:17px; }
.en-pillar h4{ font-size:13.5px; font-weight:700; color:#16294a; margin:2px 0 0; line-height:1.25; }
.en-pillar p{ font-size:12px; color:#6b7688; line-height:1.4; margin:0; }
@media (max-width: 760px){ .en-pillars{ grid-template-columns:repeat(2,1fr); } }

/* Enquiry card (hero right rail) */
.en-card{
  background: #fff; border: 1px solid #e2e8f1; border-radius: 12px;
  padding: 22px 22px 21px; box-shadow: 0 14px 34px rgba(22,41,74,.09);
}
.en-card h3{ font-size: 18px; margin-bottom: 6px; }
.en-card .en-card-note{ font-size: 14px; color: #6b7688; margin-bottom: 18px; }

/* ---------- 6. Forms ---------- */
.en-field{ margin-bottom: 11px; }
.en-field-row{
  display: grid; grid-template-columns: 1fr 1fr; gap: 11px;
  margin-bottom: 11px;
}
.en-field-row .en-field{ margin-bottom: 0; }
.en-field--grow{ min-width: 0; }
.en-field label{ display: block; font-size: 13.5px; font-weight: 650; color: #2b3446; margin-bottom: 6px; }
.en-field label .req{ color: #c0392b; }
.en-site input[type=text], .en-site input[type=email], .en-site input[type=tel],
.en-site select, .en-site textarea{
  width: 100%; font: inherit; font-size: 15px; color: #2b3446;
  padding: 11px 13px; background: #fff;
  border: 1px solid #d5dce7; border-radius: 6px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.en-site textarea{ min-height: 56px; resize: vertical; line-height: 1.5; }
.en-site input:focus, .en-site select:focus, .en-site textarea:focus{
  outline: none; border-color: #16294a; box-shadow: 0 0 0 3px rgba(22,41,74,.10);
}
.en-consent{ display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: #6b7688; margin: 4px 0 15px; }
.en-consent input{ margin-top: 3px; }
.en-form-msg{ font-size: 13.5px; margin-top: 10px; display: none; }
.en-form-msg.ok{ display: block; color: #1a7f4b; }
.en-form-msg.err{ display: block; color: #c0392b; }

/* ---------- 7. Trust bar ---------- */
.en-trust{ background: #e9eff8; border-bottom: 1px solid #dbe4f1; padding: 18px 0; }
.en-trust .wrap{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
@media (max-width: 820px){ .en-trust .wrap{ grid-template-columns: repeat(2, 1fr); gap: 22px; } }
.en-trust .k{ font-size: 16.5px; font-weight: 700; color: #16294a; letter-spacing: -0.01em; }
.en-trust .v{ font-size: 12.5px; color: #6b7688; margin-top: 2px; line-height: 1.4; }
/* Verifiable credential strip */
.en-cred{ background: #fff; border: 1px solid #e7ecf3; border-radius: 10px; padding: 19px 22px; margin-top: 30px; }
.en-cred dl{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 13px 30px; margin: 0; }
.en-cred dt{ font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8b96aa; }
.en-cred dd{ margin: 3px 0 0; font-size: 14.5px; color: #2b3446; font-weight: 550; }

/* ---------- 8. Cards & grids ---------- */
.en-grid{ display: grid; gap: 22px; }
.en-grid--3{ grid-template-columns: repeat(3, 1fr); }
.en-grid--2{ grid-template-columns: repeat(2, 1fr); }
.en-grid--4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .en-grid--3, .en-grid--4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .en-grid--2, .en-grid--3, .en-grid--4{ grid-template-columns: 1fr; } }

.en-tile{
  background: #fff; border: 1px solid #e4e9f1; border-radius: 10px;
  padding: 25px 24px; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.en-tile:hover{ border-color: #c3cee0; box-shadow: 0 12px 28px rgba(22,41,74,.09); transform: translateY(-2px); }
.en-tile h3{ margin-bottom: 9px; }
.en-tile p{ font-size: 15px; color: #5b6779; }
.en-tile .en-more{ display: inline-block; margin-top: 15px; font-size: 14.5px; font-weight: 650; color: #16294a; }
.en-tile .en-more:hover{ color: #a97c2f; }
/* Numbered / icon variant */
.en-ic{
  width: 40px; height: 40px; border-radius: 9px; margin-bottom: 15px;
  background: #eef2f8; color: #16294a;
  display: grid; place-items: center; font-weight: 700; font-size: 16px;
}
.en-ic--gold{ background: #fdf3e3; color: #a97c2f; }

/* ---------- 9. Process steps ---------- */
.en-steps{ counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
@media (max-width: 900px){ .en-steps{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .en-steps{ grid-template-columns: 1fr; } }
.en-step{ position: relative; padding-top: 17px; border-top: 3px solid #e8a94e; }
.en-step::before{
  counter-increment: s; content: "0" counter(s);
  display: block; font-size: 13px; font-weight: 700; color: #a97c2f; letter-spacing: .08em; margin-bottom: 8px;
}
.en-step h4{ margin-bottom: 7px; }
.en-step p{ font-size: 14.5px; color: #5b6779; }

/* ---------- 10. Testimonials ---------- */
.en-quote{
  background: #fff; border: 1px solid #e4e9f1; border-left: 3px solid #e8a94e;
  border-radius: 8px; padding: 24px 25px;
}
.en-quote p{ font-size: 15.5px; color: #3d4a63; font-style: italic; }
.en-quote .by{ margin-top: 14px; font-size: 13.5px; color: #6b7688; font-style: normal; }
.en-quote .by strong{ color: #2b3446; font-weight: 650; }

/* ---------- 11. FAQ accordion ---------- */
.en-faq{ border-top: 1px solid #e4e9f1; }
.en-faq details{ border-bottom: 1px solid #e4e9f1; }
.en-faq summary{
  cursor: pointer; list-style: none; padding: 19px 44px 19px 0; position: relative;
  font-size: 16.5px; font-weight: 600; color: #16294a;
}
.en-faq summary::-webkit-details-marker{ display: none; }
.en-faq summary::after{
  content: "+"; position: absolute; right: 8px; top: 17px;
  font-size: 22px; font-weight: 400; color: #8b96aa; transition: transform .18s ease;
}
.en-faq details[open] summary::after{ content: "\2212"; }
.en-faq .en-ans{ padding: 0 60px 21px 0; font-size: 15.5px; color: #5b6779; max-width: 78ch; }
.en-faq .en-ans p + p{ margin-top: 11px; }
.en-sec--navy .en-faq{ border-color: rgba(255,255,255,.16); }
.en-sec--navy .en-faq details{ border-color: rgba(255,255,255,.16); }
.en-sec--navy .en-faq summary{ color: #fff; }
.en-sec--navy .en-faq .en-ans{ color: #b8c6de; }

/* ---------- 12. Scope list (service pages) ---------- */
.en-scope{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 34px; }
@media (max-width: 700px){ .en-scope{ grid-template-columns: 1fr; } }
.en-scope li{ display: flex; gap: 12px; font-size: 15.5px; color: #3d4a63; padding: 13px 0; border-bottom: 1px solid #eef1f6; }
.en-scope li b{ display: block; color: #16294a; font-weight: 650; margin-bottom: 3px; }
.en-scope li span{ color: #5b6779; font-size: 14.5px; }
.en-scope li::before{
  content: ""; flex: none; width: 7px; height: 7px; margin-top: 9px;
  border-radius: 50%; background: #e8a94e;
}

/* ---------- 13. Two-column content split ---------- */
.en-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
@media (max-width: 900px){ .en-split{ grid-template-columns: 1fr; gap: 30px; } }
.en-aside{ background: #f7f9fb; border: 1px solid #e7ecf3; border-radius: 10px; padding: 25px 26px; }
.en-aside h3{ margin-bottom: 13px; font-size: 17px; }
.en-aside ul{ display: grid; gap: 11px; }
.en-aside li{ font-size: 14.8px; color: #4a5670; padding-left: 20px; position: relative; }
.en-aside li::before{ content: "\2022"; position: absolute; left: 4px; color: #e8a94e; font-weight: 700; }

/* ---------- 14. CTA band ---------- */
.en-cta-band{ background: #16294a; color: #d9e2f1; padding: clamp(48px, 5.6vw, 74px) 0; }
.en-cta-band h2{ color: #fff; }
.en-cta-band .wrap{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
@media (max-width: 900px){ .en-cta-band .wrap{ grid-template-columns: 1fr; gap: 30px; } }
.en-cta-band p{ color: #b8c6de; margin-top: 13px; }
.en-cta-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.en-contact-inline{ display: grid; gap: 9px; font-size: 15.5px; }
.en-contact-inline a{ color: #fff; font-weight: 600; border-bottom: 1px solid rgba(232,169,78,.55); }
.en-contact-inline a:hover{ color: #e8a94e; }

/* ---------- 15. Footer ---------- */
.en-ft{ background: #0f1e38; color: #9fb0cc; padding: 52px 0 26px; font-size: 14.5px; }
.en-ft .wrap{ display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px; }
@media (max-width: 880px){ .en-ft .wrap{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .en-ft .wrap{ grid-template-columns: 1fr; } }
.en-ft h4{ color: #fff; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 15px; }
.en-ft ul{ display: grid; gap: 9px; }
.en-ft a:hover{ color: #e8a94e; }
.en-ft .en-logo{ color: #fff; margin-bottom: 13px; }
.en-ft .en-logo small{ color: #7f90ad; }
.en-ft .en-logo .en-mark{ background: #e8a94e; color: #0f1e38; }
.en-ft-bottom{
  margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.11);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13px; color: #7f90ad;
}

/* ---------- 16. Misc helpers ---------- */
.en-note{
  background: #fdf3e3; border: 1px solid #f2ddb8; border-radius: 8px;
  padding: 15px 18px; font-size: 14.5px; color: #6b5320;
}
.en-note b{ color: #4d3b12; }
.en-center{ text-align: center; }
.en-center .en-head{ margin-left: auto; margin-right: auto; }
.en-mt{ margin-top: 30px; }
.en-mt-lg{ margin-top: 46px; }
.en-hr{ height: 1px; background: #e7ecf3; border: 0; margin: 40px 0; }
.en-badge{
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 4px;
  background: #eef2f8; color: #16294a;
}
.en-badge--gold{ background: #fdf3e3; color: #8a6522; }

/* ==========================================================================
   17. Home page components (en-home.html)
   Written for the rebuilt English home: left-argument hero with a right-rail
   enquiry card, fact-only trust bar, scenario-tagged service cards, named-team
   block and a two-group service index. No emoji, no mascots, no adjectives.
   Heading overrides use a two-class selector so they beat the .en-site h2/h3
   element rules above.
   ========================================================================== */

/* ---------- Header ---------- */
.en-logo-mark{
  flex: none;
  width: 34px; height: 34px; border-radius: 7px;
  background: #16294a; color: #e8a94e;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.en-logo-txt{ display: flex; flex-direction: column; line-height: 1.12; }
.en-logo-txt em{
  font-style: normal; font-size: 11px; font-weight: 500;
  color: #7b869c; letter-spacing: .04em; margin-top: 2px;
}
.en-hd-cta{ display: flex; align-items: center; gap: 13px; flex: none; }
.en-lang{
  font-size: 14.5px; font-weight: 600; color: #3d4a63;
  padding: 6px 11px; border: 1px solid #dde3ec; border-radius: 6px;
  transition: border-color .15s ease, color .15s ease;
}
.en-lang:hover{ border-color: #16294a; color: #16294a; }
@media (max-width: 700px){
  .en-hd .wrap{ gap: 14px; }
  .en-lang{ padding: 5px 8px; font-size: 13.5px; }
}

/* ---------- Hero ---------- */
.en-hero-grid{ align-items: start; }
.en-hero-copy{ max-width: 660px; }
.en-hero-copy .en-cta-actions{ margin-top: 30px; }
.en-ticks li b{ color: #16294a; font-weight: 650; }

/* ---------- Enquiry card ---------- */
.en-form{ margin: 0; }
.en-card .en-card-title{ font-size: 19px; margin-bottom: 5px; }
.en-card-sub{ font-size: 14.2px; color: #6b7688; margin-bottom: 17px; }
.en-card .en-consent{ margin: 12px 0 0; }

/* ---------- Trust bar (facts only, no numerals-as-bragging) ---------- */
/* Explicit four-up so the grid intent is stated here, not only in section 7 */
.en-trust .wrap.en-trust-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.en-trust-item{ display: flex; flex-direction: column; gap: 3px; }
.en-trust-k{ font-size: 15px; font-weight: 650; color: #16294a; line-height: 1.35; }
.en-trust-v{ font-size: 13.5px; color: #6b7688; line-height: 1.45; }
@media (max-width: 560px){ .en-trust .wrap{ grid-template-columns: 1fr; gap: 18px; } }

/* ---------- Service cards (scenario-tagged) ---------- */
.en-svc-card{
  display: block; background: #fff;
  border: 1px solid #e4e9f1; border-radius: 10px;
  padding: 23px 25px 22px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.en-svc-card:hover{
  border-color: #c3cee0; box-shadow: 0 12px 28px rgba(22,41,74,.09); transform: translateY(-2px);
}
.en-svc-card h3{ font-size: 18.5px; margin: 10px 0 9px; }
.en-svc-card p{ font-size: 14.8px; color: #5b6779; }
.en-ic-tag{
  display: inline-block;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #8a6522; background: #fdf3e3; border-radius: 4px; padding: 4px 9px;
}
.en-ic-more{
  display: inline-block; margin-top: 14px;
  font-size: 14.5px; font-weight: 650; color: #16294a;
  transition: color .15s ease;
}
.en-ic-more::after{ content: " \2192"; display: inline-block; transition: margin-left .15s ease; }
.en-svc-card:hover .en-ic-more{ color: #a97c2f; }
.en-svc-card:hover .en-ic-more::after{ margin-left: 5px; }

/* ---------- Pain-point tiles ---------- */
.en-tile-fix{
  margin-top: 14px; padding-top: 13px; border-top: 1px solid #eef1f6;
  font-size: 14.6px; color: #3d4a63;
}
.en-tile-fix b{ display: block; color: #16294a; margin-bottom: 3px; }

/* ---------- Team ---------- */
/* Portrait placeholder — intentionally restrained: small icon + label, never a
   4:5 grey slab. The point is to look like a deliberately empty slot, not a
   broken image. */
.en-person-ph{
  position: relative;
  aspect-ratio: 1 / 1; border-radius: 10px; margin-bottom: 16px;
  background: linear-gradient(160deg, #eef2f8, #dde5f0);
  border: 1px solid #e4e9f1;
  display: grid; place-items: center;
}
.en-person-ph svg{ width: 38%; height: auto; color: #aab5cc; opacity: .8; }
.en-person-ph .ph-cap{
  position: absolute; left: 0; right: 0; bottom: 10px;
  text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #8b96aa;
}
.en-person h3{ font-size: 18px; margin-bottom: 4px; }
.en-person-role{ font-size: 13.5px; font-weight: 650; color: #a97c2f; margin-bottom: 8px; }
.en-person-bio{ font-size: 14.6px; color: #5b6779; }
.en-person-bio em{ display: block; margin-top: 6px; font-size: 13.5px; color: #8b96aa; }

/* ---------- Two-group service index ---------- */
.en-svc-cols{ display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; }
/* min-width:0 stops long link text from forcing the column wider than its track */
.en-svc-col{ min-width: 0; }
@media (max-width: 900px){ .en-svc-cols{ grid-template-columns: 1fr; gap: 34px; } }
.en-svc-cols .en-svc-h{
  font-size: 16px; letter-spacing: .01em; margin-bottom: 4px;
  padding-bottom: 11px; border-bottom: 1px solid #dde4ee;
}
.en-svc-list{ list-style: none; }
.en-svc-list li{ padding: 11px 0; border-bottom: 1px solid #e7ecf3; }
.en-svc-list li:last-child{ border-bottom: 0; }
.en-svc-list a{ font-size: 15.3px; font-weight: 600; color: #16294a; }
.en-svc-list a:hover{ color: #a97c2f; }
/* The domestic-only group: present, but visually recessed */
.en-svc-list-muted a{ font-weight: 550; color: #5b6779; }
.en-svc-note-inline{
  display: block; margin-top: 3px;
  font-size: 13px; font-style: italic; color: #8b96aa;
}
.en-svc-note{ margin-top: 16px; font-size: 14px; color: #6b7688; }

/* ---------- Process steps (h3 variant) ---------- */
.en-step h3{ font-size: 16.5px; margin-bottom: 7px; }

/* ---------- 16. Fee calculator (en-calculator.js) ---------- */
.zt-calc{
  background: #fff; border: 1px solid #e2e8f1; border-radius: 12px;
  padding: 26px 26px 22px; box-shadow: 0 14px 34px rgba(22,41,74,.07);
}
.zt-calc-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px){ .zt-calc-grid{ grid-template-columns: 1fr; } }
.zt-calc-field{ display: flex; flex-direction: column; gap: 6px; }
.zt-calc-field label{ font-size: 13.5px; font-weight: 650; color: #2b3446; }
.zt-calc-field input, .zt-calc-field select{
  width: 100%; font: inherit; font-size: 15px; padding: 11px 13px;
  border: 1px solid #d5dce7; border-radius: 6px; background: #fff; color: #2b3446;
}
.zt-calc-field input:focus, .zt-calc-field select:focus{
  outline: none; border-color: #16294a; box-shadow: 0 0 0 3px rgba(22,41,74,.10);
}
.zt-calc-hint-inline{ font-size: 12.5px; color: #8b96aa; }
.zt-calc-svc{ margin-top: 20px; display: grid; gap: 9px; }
.zt-calc-svc label{
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  font-size: 15px; color: #3d4a63; padding: 11px 13px;
  border: 1px solid #e4e9f1; border-radius: 8px; background: #fbfcfe;
}
.zt-calc-svc label:hover{ border-color: #c3cee0; }
.zt-calc-svc input{ margin-top: 3px; flex: none; }
.zt-calc-svc .zt-sub{ display: block; font-size: 12.5px; color: #6b7688; margin-top: 2px; }
.zt-calc-express{
  margin-left: 26px; font-size: 14px; padding: 8px 13px;
  background: #fdf7ec; border-color: #f0dcbb;
}
#ztResult{ margin-top: 20px; }
.zt-calc-table{ width: 100%; border-collapse: collapse; font-size: 15px; }
.zt-calc-table td{ padding: 9px 0; border-bottom: 1px solid #eef1f6; color: #3d4a63; }
.zt-calc-table td:last-child{
  text-align: right; font-weight: 650; color: #16294a;
  white-space: nowrap; padding-left: 14px;
}
.zt-calc-lines{ margin-top: 14px; display: grid; gap: 8px; }
.zt-calc-lines div{
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 15px; color: #3d4a63;
}
.zt-calc-lines b{ font-size: 16px; color: #16294a; }
.zt-calc-save span, .zt-calc-save b{ color: #1a7f4b; }
.zt-calc-total{ border-top: 2px solid #16294a; padding-top: 11px; margin-top: 4px; }
.zt-calc-total span{ font-weight: 650; color: #16294a; }
.zt-calc-total b{ font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.zt-calc-note{ margin-top: 13px; font-size: 13px; color: #6b7688; line-height: 1.6; }
.zt-calc-hint{ font-size: 15px; color: #6b7688; }

/* ---------- 17. Compliance calendar ---------- */
.zt-cal{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px){ .zt-cal{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .zt-cal{ grid-template-columns: 1fr; } }
.zt-cal-m{ border: 1px solid #e4e9f1; border-radius: 10px; padding: 14px 15px; background: #fff; }
.zt-cal-m h4{
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em;
  color: #8b96aa; margin-bottom: 8px;
}
.zt-cal-m .d{ font-size: 14.5px; font-weight: 650; color: #16294a; }
.zt-cal-m p{ font-size: 13.5px; color: #5b6779; margin-top: 4px; line-height: 1.5; }
.zt-cal-m.key{ border-left: 3px solid #e8a94e; }

/* ---------- Centred CTA band ---------- */
.en-cta-band .wrap.en-center{ display: block; }
.en-cta-band .wrap.en-center .en-measure{ margin-left: auto; margin-right: auto; }
.en-cta-actions-center{ justify-content: center; }

/* ---------- Footer ---------- */
/* Two-class selectors so these beat the generic .en-ft .wrap grid rule used by
   the older English pages. */
.en-ft .wrap.en-ft-grid{
  display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 34px;
}
.en-ft .en-ft-h{
  color: #fff; font-size: 14px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 13px;
}
.en-ft .wrap.en-ft-grid p + p{ margin-top: 5px; }
/* Fixes an inherited bug: .en-ft .wrap (2 classes) was overriding the flex
   layout of .en-ft-bottom (1 class) on en-thanks.html too. */
.en-ft .wrap.en-ft-bottom{
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  margin-top: 36px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.11);
  font-size: 13px; color: #7f90ad;
}
@media (max-width: 880px){ .en-ft .wrap.en-ft-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .en-ft .wrap.en-ft-grid{ grid-template-columns: 1fr; } }

/* ---------- HNTE fee estimator (en-hnte-audit.html) ---------- */
.zt-year-block{
  margin-top: 18px; padding: 16px 18px; border: 1px solid #e6ebf3;
  border-radius: 12px; background: #fbfcfe;
}
.zt-year-label{
  font-size: 13px; font-weight: 700; color: #16294a; letter-spacing: .04em;
  margin: 0 0 11px; text-transform: uppercase;
}
.zt-year-block .zt-calc-grid{ gap: 13px; }
.zt-btns{ display: flex; flex-wrap: wrap; gap: 11px; margin-top: 20px; }
.zt-btns .en-btn{ cursor: pointer; border: 0; font-family: inherit; }
.zt-warn{
  margin-top: 14px; padding: 12px 15px; border-radius: 10px;
  background: #fff4e5; border: 1px solid #f0d3a4; color: #8a5a12; font-size: 14px;
}
.zt-hnte-result{ margin-top: 22px; }
.zt-hnte-table{ width: 100%; border-collapse: collapse; font-size: 15px; }
.zt-hnte-table td{ padding: 10px 0; border-bottom: 1px solid #eef1f6; color: #3d4a63; }
.zt-hnte-table td:last-child{ text-align: right; font-weight: 650; white-space: nowrap; }
.zt-hnte-table .zt-total td{
  border-bottom: 0; padding-top: 14px; font-weight: 700; color: #16294a; font-size: 16px;
}
.zt-hnte-table .zt-cmp td{ color: #6b7688; font-weight: 500; font-size: 14px; }
.zt-hnte-table .zt-strike{ text-decoration: line-through; }
.zt-hnte-table .zt-save td{ color: #1a7f4b; font-weight: 650; }
.zt-hnte-table .zt-sec td{
  padding-top: 18px; border-bottom: 1px solid #dde4ee; font-size: 12.5px;
  letter-spacing: .05em; text-transform: uppercase; color: #8b96aa; font-weight: 700;
}
.zt-hnte-table .zt-opt td{ font-size: 14.5px; }
.zt-hnte-table .zt-opt label{ display: flex; align-items: center; gap: 9px; cursor: pointer; }
.zt-hnte-table .zt-opt input{ flex: none; }
.zt-pkg-badge{
  display: inline-block; margin-left: 7px; padding: 2px 8px; border-radius: 20px;
  background: #e8f3ec; color: #1a7f4b; font-size: 11.5px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; vertical-align: 2px;
}
.zt-band-table thead th{
  text-align: left; padding: 9px 0; border-bottom: 2px solid #dde4ee;
  font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: #8b96aa;
}
.zt-band-table th:last-child, .zt-band-table td:last-child{ text-align: right; }

/* ============================================================
   2026-09-07 remediation: booking, legal row, WeChat, downloads,
   insights (blog) and trust signal strip
   ============================================================ */
.en-ft-legal{
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding: 0 0 18px; font-size: 13px; color: #8b96aa;
}
.en-ft-legal a{ color: #8b96aa; text-decoration: none; }
.en-ft-legal a:hover{ color: #16294a; text-decoration: underline; }

/* ---- S2 book a call ---- */
.en-book{
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: start;
}
.en-book-note{
  background: #f2f6fb; border: 1px solid #dde4ee; border-radius: 12px;
  padding: 22px 24px; font-size: 15px; color: #3d4a63;
}
.en-book-note h3{ margin: 0 0 10px; font-size: 17px; color: #16294a; }
.en-book-note ul{ margin: 12px 0 0; padding-left: 18px; }
.en-book-note li{ margin-bottom: 7px; }
.en-slots{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
.en-slot{
  border: 1px solid #cfd8e6; border-radius: 9px; padding: 10px 12px;
  font-size: 14px; background: #fff; cursor: pointer;
}
.en-slot input{ margin-right: 8px; }
@media (max-width: 900px){ .en-book{ grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 520px){ .en-slots{ grid-template-columns: 1fr; } }

/* ---- S7 WeChat ---- */
.en-wechat{ display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.en-wechat img{
  width: 150px; height: 150px; border: 1px solid #dde4ee; border-radius: 10px; background: #fff;
}
.copy-wechat{
  margin-top: 10px; padding: 9px 15px; border: 1px solid #16294a; border-radius: 8px;
  background: #fff; color: #16294a; font-size: 14px; font-weight: 650; cursor: pointer;
}
.copy-wechat:hover{ background: #16294a; color: #fff; }

/* ---- A2 downloads ---- */
.en-dl{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.en-dl-card{
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid #dde4ee; border-radius: 12px; padding: 22px;
}
.en-dl-card h3{ margin: 0; font-size: 17px; color: #16294a; }
.en-dl-card p{ margin: 0; font-size: 14.5px; color: #5b6779; }
.en-dl-meta{ font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: #8b96aa; }
.en-dl-form{ display: flex; gap: 10px; margin-top: auto; }
.en-dl-form input{
  flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #cfd8e6;
  border-radius: 8px; font-size: 14.5px;
}
@media (max-width: 900px){ .en-dl{ grid-template-columns: 1fr; } }

/* ---- A1 insights / blog ---- */
.en-posts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.en-post{
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid #dde4ee; border-radius: 12px; padding: 24px;
}
.en-post:hover{ border-color: #b9c6d8; }
.en-post h3{ margin: 10px 0; font-size: 18px; line-height: 1.35; color: #16294a; }
.en-post h3 a{ color: inherit; text-decoration: none; }
.en-post h3 a:hover{ text-decoration: underline; }
.en-post p{ margin: 0 0 14px; font-size: 14.5px; color: #5b6779; }
.en-post-meta{
  margin-top: auto; font-size: 12.5px; letter-spacing: .04em;
  text-transform: uppercase; color: #8b96aa;
}
.en-tag{
  display: inline-block; padding: 3px 10px; border-radius: 20px; background: #eef3fa;
  color: #16294a; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase;
}
@media (max-width: 980px){ .en-posts{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .en-posts{ grid-template-columns: 1fr; } }

.en-article{ max-width: 760px; margin: 0 auto; }
.en-article h2{ margin: 38px 0 12px; font-size: 24px; color: #16294a; }
.en-article h3{ margin: 28px 0 10px; font-size: 19px; color: #16294a; }
.en-article p, .en-article li{ font-size: 16.5px; line-height: 1.75; color: #3d4a63; }
.en-article ul, .en-article ol{ margin: 0 0 18px; padding-left: 22px; }
.en-article li{ margin-bottom: 9px; }
.en-article-meta{ font-size: 13.5px; color: #8b96aa; margin-bottom: 26px; }
.en-keybox{
  background: #f2f6fb; border-left: 3px solid #16294a; border-radius: 0 10px 10px 0;
  padding: 16px 20px; margin: 22px 0; font-size: 15.5px; color: #3d4a63;
}
.en-table{ width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.en-table th, .en-table td{ text-align: left; padding: 10px 8px; border-bottom: 1px solid #eef1f6; }
.en-table th{ font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: #8b96aa; }

/* ---- trust strip (verifiable facts only, no invented client numbers) ---- */
.en-trusted{ background: #f2f6fb; padding: 26px 0; border-bottom: 1px solid #e3eaf4; }
.en-trusted-label{
  margin: 0 0 16px; text-align: center; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: #8b96aa; font-weight: 700;
}
.en-trusted-items{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
}
.en-pill-fact{
  padding: 8px 16px; border-radius: 22px; background: #fff;
  border: 1px solid #dde4ee; font-size: 14px; color: #3d4a63;
}
.en-pill-fact b{ color: #16294a; }