/* ============================================================
   Design foundation — buttons and colour tokens from Clayton's Figma
   "Beyondsoft — Visual foundation" (DESIGN SYSTEM / HOMEPAGE / V1.0), applied 7 Oct 2026.
   The typeface (Aileron, per the design system's later revision) lives in header-format.css.

   Loaded last on every page (functions.php, priority 99), because the site has a few dozen
   page- and hero-specific button rules up to (0,4,0); the shape and colour below are the
   spec's, so they carry !important rather than chase each of those selectors.

   Button motion (7 Oct, after the morning meeting): Kelvin did not want CTA buttons to "shake", and Clayton
   asked for the Figma style guide's states — "Use color and outline changes for interaction states. Do
   not animate scale or apply bounce effects … No scale, lift or animated shadows." So hover and press
   change colour/outline only: no lift, no magnetic lean (removed from fx.js), no arrow slide, no sheen,
   and the shadow stays as it is at rest.
   ============================================================ */

/* ---- colour tokens ---- */
:root{
  --blue-hi:#004A8C;   /* "Deep blue — primary action hover state" (was #004A85) */
  --bg-2:#F1F8FB;      /* "Pale blue — section background" (was #F4F7FC) */
  --bg-3:#F1F8FB;
}

/* ---- buttons ----
   48px high (13px + 20px line + 13px, plus a 1px border), 28px horizontal padding, 6px corners,
   Inter 16/600. min-height rather than height so a label that wraps on a phone grows the
   button instead of spilling out of it. .btn-sm (40px) and the cookie banner's .btn-mini
   keep their own sizes. */
:is(.btn,.ah-btn,.ab-hero-btn,.crv-cta-btn):not(.btn-sm){
  height:auto!important;min-height:48px!important;
  padding:13px 27px!important;
  border-width:1px!important;border-style:solid!important;
  border-radius:6px!important;
  font-family:var(--f-body)!important;font-size:16px!important;font-weight:600!important;
  line-height:20px!important;letter-spacing:0!important;
  align-items:center;
}
.btn-sm{border-radius:6px!important;}

/* Primary: the action gradient, vertical, primary buttons only; one per region. */
:is(.btn-primary,.ah-btn:not(.ah-btn-ghost)){
  background:linear-gradient(180deg,#005DA7 0%,#004A8C 100%)!important;
  color:#fff!important;border-color:transparent!important;
  box-shadow:inset 0 0 0 100px rgba(0,74,140,0),0 4px 16px -4px rgba(0,93,167,.25);
}
/* 8 Oct 2026: hover used to swap the gradient for a flat #004A8C. A gradient cannot be transitioned, so the
   change was instant and read as a flash ("这个button hover的时候会闪一下"). The gradient now stays and an
   inset layer of #004A8C fades in over 200ms instead; same end colour, no jump. */
:is(.btn-primary,.ah-btn:not(.ah-btn-ghost)):hover{color:#fff!important;}
:is(.btn-primary,.ah-btn:not(.ah-btn-ghost)) :is(.arrow,.ah-arw){color:#fff!important;}

/* Secondary: white, 1px blue outline, blue label; hover fills pale blue. On a dark hero it reads
   as the white second button in the Figma banners. */
:is(.btn-ghost,.ah-btn-ghost,.ab-hero-btn,.crv-cta-btn){
  background:#fff!important;color:#005DA7!important;border-color:#005DA7!important;
}
:is(.btn-ghost,.ah-btn-ghost,.ab-hero-btn,.crv-cta-btn):hover{
  background:#F1F8FB!important;color:#005DA7!important;border-color:#005DA7!important;
}
:is(.btn-ghost,.ah-btn-ghost,.ab-hero-btn,.crv-cta-btn) :is(.arrow,.ah-arw){color:#005DA7!important;}

/* No movement on hover, press or focus (see the header note). */
:is(.btn,.ah-btn,.ab-hero-btn,.crv-cta-btn,.magnetic):is(:hover,:active,:focus-visible){transform:none!important;translate:none!important;scale:none!important;}
:is(.btn,.ah-btn):hover :is(.arrow,.ah-arw){transform:none!important;}
:is(.btn,.ah-btn)::after{animation:none!important;}
.btn-primary:hover,.ah-btn:not(.ah-btn-ghost):hover{box-shadow:inset 0 0 0 100px #004A8C,0 4px 16px -4px rgba(0,93,167,.25)!important;}
.ah-btn-ghost:hover,.btn-ghost:hover{box-shadow:none!important;}

/* Focus: 2px brand ring with a 2px clear gap. */
:is(.btn,.ah-btn,.ab-hero-btn,.crv-cta-btn):focus-visible{outline:2px solid #005DA7!important;outline-offset:2px!important;}

/* Disabled: grey fill, secondary-grey label, no shadow. The repeated :is() lifts it to (0,3,0) so it also
   beats the primary :hover rule above. */
:is(.btn,.ah-btn):is(:disabled,[aria-disabled="true"]):is(.btn,.ah-btn){
  background:#E7ECF0!important;color:#6E7276!important;border-color:transparent!important;
  box-shadow:none!important;cursor:not-allowed;
}

/* ---- hero banners (Figma → Banners, 7 Oct) ----
   inc/bs-hero-sites.php (bs_hero_banners) marks these heroes bs-hero--custom bs-hero--banner, so the
   neutral custom-image treatment in base.css applies; below is what differs for the Figma photographs.
   Each is drawn 1920 × 800 with the copy side already dark (or light) and the subject on the right. */
.bs-hero--banner img[data-bs-hero]{object-position:100% 50%!important;}
@media (max-width:820px){ .bs-hero--banner img[data-bs-hero]{object-position:74% 50%!important;} }
/* the copy side is already dark in the photograph: a light scrim only steadies the type */
@media (min-width:821px){
  .bs-hero--banner.bs-hero--custom.bs-hero--dark:not(.aeg-hero):not(.ct-wrap) .bg::after{
    background:linear-gradient(90deg,rgba(4,14,28,.5) 0%,rgba(4,14,28,.28) 38%,rgba(4,14,28,0) 62%)!important;
  }
}
/* keyword: bys-gradient-2 on dark banners (sampled from the Figma file), the spec's hero phrase
   gradient #0255A6 → #7C4A9B on light ones. The repeated class outranks capability-priority.css's
   keyword rule, (0,7,1). width:fit-content because some keywords are display:block lines, and the
   gradient would otherwise stretch across the empty rest of the line. */
html body.interior-v2 :is(.hero-image,.independent-hero,.page-hero).bs-hero--banner.bs-hero--dark h1 .grad-text.grad-text.grad-text.grad-text{
  background:linear-gradient(90deg,#4A85F6 0%,#59B1E4 60%,#A691ED 100%)!important;background-size:100% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;text-shadow:none!important;filter:none!important;animation:none!important;background-position:0 0!important;width:fit-content!important;
}
html body.interior-v2 :is(.hero-image,.independent-hero,.page-hero).bs-hero--banner.bs-hero--light h1 .grad-text.grad-text.grad-text.grad-text{
  background:linear-gradient(90deg,#0255A6 0%,#7C4A9B 100%)!important;background-size:100% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;text-shadow:none!important;filter:none!important;animation:none!important;background-position:0 0!important;width:fit-content!important;
}
/* type: the design system's hero heading is Aileron 700 72/84, tracking -0.75%, at 1920, the lead 20/32; scaled
   with the viewport on laptops (54px at 1440). Phones and tablets keep each page's own sizes. */
@media (min-width:1101px){
  html body.interior-v2 .hero-image.bs-hero--banner :is(h1,.h1){
    font-size:clamp(46px,3.75vw,72px)!important;line-height:1.1667!important;letter-spacing:-.0075em!important;font-weight:700!important;
  }
  /* Figma's text column is 801px wide at 1920 (heading) and 787px (lead): the copy stays on the dark side */
  html body.interior-v2 :is(.hero-image,.independent-hero,.page-hero).bs-hero--banner :is(h1,.h1){width:auto!important;max-width:min(52vw,900px)!important;}
  /* Localisation's two phrases each hold one line (its base.css column is 52vw, sized for the old globe) */
  html body.interior-v2.pg-localisation .hero-image.bs-hero--banner.capability-hero--localisation .h1{max-width:min(61vw,1080px)!important;width:auto!important;}
  html body.interior-v2 .hero-image.bs-hero--banner .lead{font-size:clamp(18px,1.39vw,20px)!important;line-height:1.6!important;max-width:min(41vw,787px)!important;}
}
/* phones: the copy covers the photograph, so the scrim spans it (base.css .62 → .84); the banners
   are already dark, so a lighter one lets the subject show through */
@media (max-width:820px){
  .bs-hero--banner.bs-hero--custom.bs-hero--dark:not(.aeg-hero):not(.ct-wrap) .bg::after{
    background:linear-gradient(180deg,rgba(4,14,28,.5),rgba(4,14,28,.78))!important;
  }
}

/* ---- the bar over the first hero (7 Oct, "所有的hero都cover header") ----
   functions.php bs_hero_under_header_boot pulls the page's first hero up behind the sticky header and
   sets html.hero-under--dark|light. At the top of the page the bar is clear, with a soft band for the
   type; over a dark picture its logo, links and controls turn white (the logo by filter, the same
   alpha mask as the footer's white logo), as on Events, Insights and About. It returns to the white
   bar with the blue logo once the page scrolls or the phone menu opens. */
html.hero-under body:not(.nav-open):not(:has(#mobileMenu.open)) .site-header:not(.scrolled){
  -webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;box-shadow:none;
  background-origin:border-box;background-repeat:no-repeat;   /* else the band restarts in the 1px bottom border */
}
html.hero-under--dark body:not(.nav-open):not(:has(#mobileMenu.open)) .site-header:not(.scrolled){
  background-color:transparent;background-image:linear-gradient(180deg,rgba(6,19,36,.55) 0%,rgba(6,19,36,0) 100%);
}
html.hero-under--light body:not(.nav-open):not(:has(#mobileMenu.open)) .site-header:not(.scrolled){
  background-color:transparent;background-image:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,0) 100%);
}
html.hero-under--dark .site-header .brand img{transition:filter var(--dur-fast);}
html.hero-under--dark body:not(.nav-open):not(:has(#mobileMenu.open)) .site-header:not(.scrolled) .brand img{filter:brightness(0) invert(1);}
html.hero-under--dark body:not(.nav-open):not(:has(#mobileMenu.open)) .site-header:not(.scrolled) :is(.nav-links,.nav-links :is(a,button)){color:rgba(255,255,255,.9);}
html.hero-under--dark body:not(.nav-open):not(:has(#mobileMenu.open)) .site-header:not(.scrolled) .nav-links :is(a,button):is(:hover,.active){color:#fff;}
html.hero-under--dark body:not(.nav-open):not(:has(#mobileMenu.open)) .site-header:not(.scrolled) .nav-links :is(a,button).active::after{background:#fff;}
html.hero-under--dark body:not(.nav-open):not(:has(#mobileMenu.open)) .site-header:not(.scrolled) .search-btn{background:rgba(6,19,36,.36);border-color:rgba(255,255,255,.38);color:#fff;}
html.hero-under--dark body:not(.nav-open):not(:has(#mobileMenu.open)) .site-header:not(.scrolled) .search-btn:hover{background:rgba(6,19,36,.55);border-color:rgba(255,255,255,.6);color:#fff;}
html.hero-under--dark body:not(.nav-open):not(:has(#mobileMenu.open)) .site-header:not(.scrolled) :is(#regionSwitch,#langSwitch){color:#fff;}
html.hero-under--dark body:not(.nav-open):not(:has(#mobileMenu.open)) .site-header:not(.scrolled) :is(#regionSwitch,#langSwitch):is(:hover,.open){background:rgba(255,255,255,.12);color:#fff;}
html.hero-under--dark body:not(.nav-open):not(:has(#mobileMenu.open)) .site-header:not(.scrolled) .nav-burger span{background:#fff;}

/* ---- home hero (Figma → Homepage frame, 7 Oct) ----
   The skyline photograph replaces the plexus canvas (front-page.php). In the frame the picture is 1920 × 1001
   with the bar over its top, the headline and buttons in the sky (headline ~160px below the bar) and the
   skyline along the bottom, so the copy now sits at the top of the band instead of its middle, and the
   picture is anchored to its bottom edge. Headline: Aileron 700 72/84, sentence case, "expectations" in the
   spec's hero phrase gradient (#0255A6 → #7C4A9B); the per-letter entrance stays. */
.home .ah-herobg--photo{background:#dfe9f5;}
.home .ah-herobg--photo::after{content:none;}
.home .ah-herobg--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;}
.home .ah-hero .container{align-items:start;}
.home .ah-hero .ah-hero-in{padding:clamp(40px,8.3vw,160px) 0 0;}
html body.home .ah-hero .ah-h1{font-size:clamp(40px,3.75vw,72px);line-height:1.1667;letter-spacing:-.0075em;text-transform:none;color:#26292C;}
html body.home .ah-hero .ah-h1 .ah-hline{line-height:inherit;letter-spacing:inherit;margin-top:0;}
html body.home .ah-hero .ah-h1 .ah-accent.ah-accent,
html body.home .ah-hero .ah-h1 .ah-accent .ah-accent-ch{
  background-image:linear-gradient(90deg,#0255A6 0%,#7C4A9B 100%)!important;background-size:100% 100%!important;
  background-position:0 0!important;background-repeat:no-repeat!important;
}
html body.home .ah-hero .ah-h1.ah-htype-on .ah-accent-whole{animation:ah-ch-on-acc .65s cubic-bezier(.2,.72,.24,1) both!important;}
html body.home .ah-hero .ah-lead{margin-top:24px;font-size:clamp(17px,1.04vw,20px);line-height:1.6;color:#4B4F54;}
html body.home .ah-hero .ah-cta-row{margin-top:32px;}

/* ---- hero headline and supporting line (7 Oct, Copy Review "Revised Hero Supporting Copy") ----
   Every page's hero now has a short headline and one supporting line of 12-15 words, to read on two lines
   ("我将它压缩到最多15字，两行呈现"). On desktop the first hero's headline takes the style guide's scale
   (72/84 at 1920, 54px at 1440 — the size the banner pages already use) instead of each family's own
   (62-76px), the accent word stays inline so it does not force a line of its own, and the supporting
   line gets at least a 620px column (some families held it to ~490px, which made three lines).
   Phones and tablets keep each page's sizes. html.hero-under is set by the head script in functions.php. */
@media (min-width:1101px){
  html.hero-under body :is(.hero-image,.independent-hero,.page-hero,.cr-hero,.te-hero,.aeg-hero) :is(h1,.h1){
    font-size:clamp(46px,3.75vw,72px)!important;line-height:1.1667!important;letter-spacing:-.0075em!important;
    min-width:min(640px,100%);
  }
  html.hero-under body :is(.hero-image,.independent-hero,.page-hero,.cr-hero,.te-hero,.aeg-hero) :is(h1,.h1) .grad-text{display:inline!important;}
  html.hero-under body :is(.hero-image,.independent-hero,.page-hero,.cr-hero,.te-hero,.aeg-hero) :is(.lead,.te-hero-subtitle,.aeg-hero-copy>p){min-width:min(clamp(620px,36vw,720px),100%);max-width:max(680px,36vw)!important;}
}
.te-hero .te-hero-subtitle{font-size:clamp(18px,1.39vw,20px)!important;line-height:1.6!important;}

/* banner heroes use the standard buttons (the Figma banners): Energy's lime and Consumer's orange page accents
   were drawn for their old artwork */
html body.interior-v2 :is(.hero-image,.independent-hero,.page-hero).bs-hero--banner .btn-primary.btn-primary{
  background:linear-gradient(180deg,#005DA7 0%,#004A8C 100%)!important;color:#fff!important;border-color:transparent!important;
}
html body.interior-v2 :is(.hero-image,.independent-hero,.page-hero).bs-hero--banner .btn-primary.btn-primary:hover{box-shadow:inset 0 0 0 100px #004A8C,0 4px 16px -4px rgba(0,93,167,.25)!important;}
html body.interior-v2 :is(.hero-image,.independent-hero,.page-hero).bs-hero--banner .btn-ghost.btn-ghost{background:#fff!important;color:#005DA7!important;border-color:#005DA7!important;}
html body.interior-v2 :is(.hero-image,.independent-hero,.page-hero).bs-hero--banner .btn :is(.arrow){color:inherit!important;}

/* ============================================================
   The rest of the Visual foundation (7 Oct 2026, the user: "改" — apply it site-wide):
   type scale, card radius and shadow, image corners, badges, contact panel, section rhythm.
   Values from the Figma "Beyondsoft — Visual foundation" frame.
   ============================================================ */

/* type — section heading 48 (scaled down on smaller screens), body 16/26, navigation 18/600 */
body{font-size:16px;line-height:1.625;}
html body :is(.h2,h2.h2):not(.bs-x-h3){font-size:clamp(30px,3vw,48px)!important;line-height:1.2!important;letter-spacing:-.01em!important;}
html body :is(.section,.section-tight,.bs-x-sec,.bs-faq) :is(.h2,h2.h2) ~ p:not(.eyebrow):not([class*="kicker"]),
html body .bs-x-head > p{font-size:16px!important;line-height:1.625!important;}
@media (min-width:1240px){
  html body .site-header .nav-links > :is(a,.nav-item > a,.nav-item > button),
  html body .site-header .nav-links .nav-item > :is(a,button){font-size:18px!important;font-weight:600!important;}
}

/* cards — capability / icon cards 4px with the spec shadow; news, story and image cards square */
html body :is(.ah-cap2,.bs-card,.dat-hub-item,.sai-flow-step){border-radius:4px!important;}
html body :is(.ah-cap2,.bs-card){box-shadow:0 6px 24px -8px rgba(11,73,104,.08)!important;}
html body :is(.rcard,.fs-lead,.pa-card,.ins-card,.ev-card,.news-card,.ah-news2-card,.ind-card){border-radius:0!important;}
html body :is(.rcard,.fs-lead,.pa-card,.ins-card,.ev-card,.news-card,.ah-news2-card,.ind-card) img,
html body :is(.fs-lead-img,.rc-img,.pa-card-img){border-radius:0!important;}
.ah-cap2-ic,.ah-cap2-ic img{border-radius:50%;}                    /* emblems stay circles */

/* industry badges / tags 14px */
html body :is(.badge,.fs-lead-tag,.rc-tag,.pa-tag,.ind-tag,.tag-chip){border-radius:14px!important;}

/* contact panels 16px (the contact form card, the FAQ CTA card) */
html body :is(.ah-contact-card,.ct-panel,.bs-faq-aside--cta){border-radius:16px!important;}

/* inputs 4px */
html body :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-radius:4px;}

/* tabs and panels built today: buttons 6, panels 4 */
.bs-tabs-bar,.bs-panel,.bs-panel-art{border-radius:4px!important;}
.bs-tab{border-radius:6px!important;}
.bs-panel{box-shadow:0 6px 24px -8px rgba(11,73,104,.08)!important;}

/* section rhythm 72-104 */
html body.interior-v2 .section:not(.bs-faq){padding-top:clamp(72px,7.2vw,104px);}

/* ============================================================
   Homepage = the Figma "Homepage" frame (8 Oct 2026, the user: "整个homepage的设计你都要follow figma里面的design").
   Measured at 1920: content 1520 wide (200px gutters), section headings Inter→Aileron 700 40/40 -0.5px,
   newsroom on #FAFAFA, solutions on #DCE5EB (80px padding, 56 gap), partners on a white → #F1F8FB → #E9F4F9 wash
   (72 / 84 padding), cards white, square, the spec shadow.
   ============================================================ */
.home :is(.ah-news2,.ah-caps2,.ah-cp,.ah-contact) .container{max-width:min(100%, calc(1520px + 2 * var(--pad)));}
html body.home :is(.ah-news2-head h2,.ah-caps2-h2,.ah-cp-h2){font-size:clamp(30px,2.6vw,40px)!important;line-height:1.2!important;letter-spacing:-.5px!important;font-weight:700!important;color:#26292C;}

/* ---- newsroom ---- */
.home .ah-news2{background:#FAFAFA!important;padding:clamp(56px,4.2vw,80px) 0!important;}
.home .ah-news2::before,.home .ah-news2::after{content:none!important;}
.home .ah-news2-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:32px;}
.home .ah-news2-head h2{margin:0;}
.home .ah-news2-nav{display:flex;gap:12px;width:auto;}
.home .ah-news2-arrow{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #005DA7;color:#005DA7;display:grid;place-items:center;box-shadow:none;}
.home .ah-news2-arrow:hover:not(:disabled){background:#F1F8FB;}
.home .ah-news2-arrow:disabled{opacity:.35;}
/* 22 Oct: the rail takes the page container's width, so the cards line up with the heading and the arrows on
   wide screens too (it was 1520px wide against the heading's narrower container from about 1500px up). */
.home .ah-news2-stage{width:var(--maxw);max-width:100%;margin:0 auto;padding:0 var(--pad);}
.home .ah-news2-marquee{padding:0 0 8px!important;margin:0 -8px;padding-inline:8px!important;container-type:inline-size;}
.home .ah-news2-track{--news-cols:3;gap:32px!important;padding:8px 0 24px!important;align-items:stretch!important;}
@media (max-width:1100px){.home .ah-news2-track{--news-cols:2;}}
@media (max-width:640px){.home .ah-news2-track{--news-cols:1;}}
.home .ah-news2-track .ah-tile{
  flex:0 0 auto!important;max-width:none!important;min-width:0!important;
  width:calc(((min(100vw, 1520px + 2 * var(--pad)) - 2 * var(--pad)) - (var(--news-cols) - 1) * 32px) / var(--news-cols))!important;
  /* 22 Oct (Clayton: the third card's words were cut at the right edge): 100vw counts the page scrollbar, so the
     cards came out wider than the rail and the last one was clipped by up to a scrollbar's width. The rail is a
     size container below; 100cqi is its real inner width. */
  width:calc((100cqi - (var(--news-cols) - 1) * 32px) / var(--news-cols))!important;
  aspect-ratio:auto!important;display:flex!important;flex-direction:column;padding:24px;border-radius:0!important;
  background:#fff;color:#26292C;box-shadow:0 6px 24px -8px rgba(11,73,104,.08)!important;outline:0!important;transform:none!important;translate:none!important;
}
.home .ah-tile-media{position:relative!important;inset:auto!important;display:block;aspect-ratio:428/250;overflow:hidden;}
.home .ah-tile-media img{transform:none!important;}
.home .ah-tile-shade{display:none!important;}
.home .ah-tile-b{position:static!important;padding:24px 0 0;}
.home .ah-tcat{display:block;font:400 13px/1.4 var(--f-body)!important;letter-spacing:0!important;text-transform:none!important;color:#6E7276!important;}
.home .ah-tcat > :is(span[data-i18n],.ah-tsep){display:none;}           /* Figma shows the date only */
.home .ah-tile h3{margin:10px 0 10px!important;font:700 clamp(20px,1.25vw,24px)/1.25 var(--f-display)!important;letter-spacing:-.5px!important;color:#26292C!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* 22 Oct, Clayton: the summary under each card title is two lines, not four ("四行字太厚重"). */
.home .ah-tile-ex{margin:0;font:400 16px/26px var(--f-body);color:#4B4F54;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.home .ah-tile-go{display:none!important;}
.home .ah-news2-all{display:flex;justify-content:center;margin-top:24px;}

/* ---- solutions ---- */
.home .ah-caps2{background:#DCE5EB;}
.home .ah-caps2-grid{gap:24px;}

/* ---- partners & industries ---- */
.home .ah-cp{background:linear-gradient(180deg,#FFFFFF 0%,#F1F8FB 55%,#E9F4F9 100%)!important;padding:72px 0 84px!important;}
.home .ah-cp-head{text-align:center;margin-bottom:40px;}
.home .ah-cp-lead{font-size:16px!important;line-height:26px!important;color:#4B4F54;}
.home .ah-cp-label{text-align:center;font:600 12px/1.4 var(--f-body)!important;letter-spacing:.2em!important;text-transform:uppercase;color:#6E7276!important;margin:0 0 16px!important;}
.home .ah-cp-logos{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 32px;margin-bottom:24px;}
.home .ah-cp-logos .ah-cp-item{display:flex;align-items:center;justify-content:center;width:168px;height:58px;opacity:.88;}
.home .ah-cp-logos .ah-cp-item img{max-width:120px;max-height:30px;width:auto;height:auto;}
.home .ah-cp-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,211px));justify-content:center;gap:16px;}
.home .ah-cp-tile{position:relative;display:block;height:140px;border-radius:6px;overflow:hidden;box-shadow:0 6px 24px -8px rgba(11,73,104,.08);background:#0b1b33;}
.home .ah-cp-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:80% 50%;}
.home .ah-cp-tile span{position:absolute;left:0;right:0;bottom:0;padding:32px 14px 12px;font:700 13px/18px var(--f-body);color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%);}
.home .ah-cp-tile:focus-visible{outline:2px solid #005DA7;outline-offset:2px;}
@media (max-width:1100px){.home .ah-cp-tiles{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:640px){.home .ah-cp-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;} .home .ah-cp-tile{height:120px;}}
/* 15 Oct: with Agriculture held back there are nine tiles. Other Industries (the last) spans two columns where
   the grid would otherwise end on a gap — five across and two across; three across is already full. */
.home .ah-cp-tiles[data-count="9"] .ah-cp-tile:last-child{grid-column:span 2;}
@media (max-width:1100px) and (min-width:641px){.home .ah-cp-tiles[data-count="9"] .ah-cp-tile:last-child{grid-column:auto;}}

/* ---- contact ---- */
.home .ah-ci-points{display:none!important;}
.home .ah-ci-lead{font-size:16px!important;line-height:26px!important;color:rgba(255,255,255,.88)!important;max-width:40ch;}
.home .ah-contact-intro h2{font-size:clamp(28px,2.1vw,36px)!important;line-height:1.2!important;}
/* 8 Oct 2026, Figma homepage › Section - Contact form (node 21-1008): card 1px #005DA7 6% border, radius 4,
   card shadow; blue panel #001B45→#005DA7 with a dotted globe lower right; inputs #F4F8FD / #E1E8F1, radius 4,
   51px; a short rule above the email link, white icon tile; section white with two soft glows only. */
.home .ah-contact::before{background:none!important;}
.home .ah-c-net{display:none!important;}
html body.home .ah-contact-card{min-height:426px;border-radius:4px!important;border:1px solid rgba(0,93,167,.06);box-shadow:0 6px 24px -8px rgba(11,73,104,.08);}
.home .ah-contact-intro{padding:47px 44px 48px;gap:24px;
  background:radial-gradient(125% 95% at 88% 6%,rgba(0,93,167,.75),rgba(0,93,167,0) 56%),linear-gradient(150deg,#001B45,#005DA7 55%,#005DA7);}
.home .ah-ci-globe{position:absolute;right:0;bottom:0;width:294px;height:auto;max-width:48%;z-index:0;pointer-events:none;user-select:none;}
.home .ah-contact-intro h2{letter-spacing:-.5px!important;margin-bottom:16px;}
.home .ah-ci-direct{border-top:0;padding-top:0;margin-top:12px;}
.home .ah-ci-direct::before{content:"";position:absolute;left:0;top:-18px;width:min(222px,60%);height:1px;background:rgba(255,255,255,.18);}
.home .ah-ci-direct .ah-ci-ic{width:32px;height:32px;border-radius:4px;background:#fff!important;border:0;}
.home .ah-ci-direct .ah-ci-ic svg{width:15px;height:15px;stroke:#005DA7;}
.home .ah-ci-direct:hover{transform:none;}
.home .ah-ci-direct-t em{font-size:12px;color:rgba(255,255,255,.72);}
.home .ah-ci-direct-t b{font-size:15px;font-weight:500;}
.home .ah-form{padding:36px 36px 40px;gap:16px;}
.home .ah-field :is(input,select){height:51px;}
.home .ah-field :is(input,select,textarea){border-radius:4px!important;background-color:#F4F8FD;border-color:#E1E8F1;font-size:14px;}
.home .ah-field textarea{min-height:100px;}
.home .ah-field input:placeholder-shown:not(:focus)+label,.home .ah-field textarea:placeholder-shown:not(:focus)+label{font-size:14px;color:#6E7276;}
.home .ah-field-sel label,.home .ah-field input:focus+label,.home .ah-field input:not(:placeholder-shown)+label,.home .ah-field textarea:focus+label,.home .ah-field textarea:not(:placeholder-shown)+label{font-size:9.5px;letter-spacing:.06em;}
.home .ah-form-note{font-size:13px;color:#4B4F54;}
@media (max-width:860px){html body.home .ah-contact-card{min-height:0;} .home .ah-contact-intro{padding:36px 28px;} .home .ah-ci-globe{width:150px;opacity:.45;} .home .ah-form{padding:28px 24px 32px;}}

/* ---- Motion guide (Clayton, 8 Oct 2026): homepage, industry and capability pages (body.bs-motion-guide) ----
   Hover = a 200ms colour / soft-shadow change on cards that go somewhere: no lift, sweep line, pattern reveal,
   icon motion or arrow movement (those rules skip .bs-motion-guide). Cards that do not link stay still.
   Scroll-lit service rows keep the blue left border and filled step marker, with a lighter shadow. */
html body.bs-motion-guide :is(a.ah-cap2,a.fs-lead,a.rcard,.clogo--link){
  transition:opacity .55s ease,transform .7s cubic-bezier(.22,1,.36,1),border-color .2s ease,box-shadow .2s ease,background-color .2s ease!important;}
html body.bs-motion-guide :is(a.ah-cap2,a.fs-lead,a.rcard,.clogo--link):is(:hover,:focus-visible){
  border-color:rgba(0,93,167,.34)!important;box-shadow:0 10px 28px -16px rgba(11,73,104,.24)!important;transition-delay:0s!important;}
html body.bs-motion-guide :is(a.ah-cap2,a.fs-lead,a.rcard) :is(h3,.ah-cap2-go,.fs-lead-go,.rc-title){transition:color .2s ease;}
html body.bs-motion-guide :is(a.ah-cap2,a.fs-lead,a.rcard):is(:hover,:focus-visible) h3{color:#005DA7;}
html body.bs-motion-guide a.ah-cap2:is(:hover,:focus-visible) .ah-cap2-go{color:#004A8C;}
html body.bs-motion-guide .sai-steps .sai-service{transition:background-color .22s ease,box-shadow .22s ease,border-color .22s ease,opacity .22s ease;}
html body.bs-motion-guide .sai-steps .sai-service::before{transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease;}
html body.bs-motion-guide .sai-steps .sai-service h3{transition:color .22s ease;}
html body.bs-motion-guide .sai-steps.is-live .sai-service.is-on{box-shadow:0 8px 22px -16px rgba(24,60,93,.24);}
html body.bs-motion-guide .sai-steps.is-live .sai-service.is-on::before{box-shadow:0 0 0 4px rgba(0,93,167,.12);}
html body.bs-motion-guide .sai-steps.is-live .sai-service.is-on h3{color:#005DA7;}

/* 8 Oct 2026, motion guide — one button treatment everywhere: background, border, text colour and shadow move in
   200ms; no lift, bounce, scale or arrow movement (rules above). The entrance fade some buttons carry keeps its
   own timing. The :not(#_) pair outranks the content-motion and capability-priority !important transitions that
   left bottom CTAs at 0.55-0.7s, or opacity-only on Infrastructure and Robotics. */
@media (prefers-reduced-motion:no-preference){
  html body :is(.btn,.ah-btn,.ab-hero-btn,.crv-cta-btn):not(#_):not(#_){
    transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,opacity .55s ease,transform .7s cubic-bezier(.22,1,.36,1)!important;}
  html body.bs-priority-capability :is(.btn,.ah-btn,.ab-hero-btn,.crv-cta-btn):not(#_):not(#_){
    transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,opacity .28s ease!important;}
}

/* 8 Oct 2026, motion guide — looping decoration that explains nothing is stopped; the artwork stays, still.
   Homepage, industry and capability pages: keyword shimmer, the solutions band's ambient sweep, the capability
   icons' idle loops, the contact glows, the atmospheric light leak. Everywhere: the assistant button's turning
   ring and pulse (the ring itself stays as a static outline). */
html body.bs-motion-guide :is(.grad-text,.ah-caps2,.ah-cap2-ic,.ah-cap2-ic img,.ah-cap2-glyphfx,.ah-c-glow,.fx-atmos-leak){animation:none!important;}
html body.bs-motion-guide :is(.ah-caps2,.ah-cap2-glyphfx,.grad-text)::before,
html body.bs-motion-guide :is(.ah-caps2,.ah-cap2-glyphfx,.grad-text)::after{animation:none!important;}
.bx-btn-ring{animation:none!important;}
.bx-btn-ring::after{animation:none!important;display:none;}

/* 8 Oct 2026, motion guide — page changes are a short cross-fade. The old handoff faded the outgoing page to .14
   while shrinking it, slid the new one up 18px at 101.2%, and swept a gradient line under the header; with the
   entrances on the next page it read as a flash. Now: out 160ms, in 220ms, opacity only; no signal line. */
@keyframes bs-vt-fade-out{to{opacity:0;}}
@keyframes bs-vt-fade-in{from{opacity:0;}}
::view-transition-old(root),html.bs-nav-back::view-transition-old(root){animation:bs-vt-fade-out .16s ease-out both!important;}
::view-transition-new(root),html.bs-nav-back::view-transition-new(root){animation:bs-vt-fade-in .22s ease-out both!important;}
::view-transition-old(bs-capability-art),::view-transition-old(bs-capability-copy){animation:bs-vt-fade-out .16s ease-out both!important;}
::view-transition-new(bs-capability-art),::view-transition-new(bs-capability-copy){animation:bs-vt-fade-in .22s ease-out both!important;}
#bs-nav-signal{display:none!important;}

/* Insights: the story cards and images arrive as one quiet fade instead of 24 wipes and zooms at once; sections
   fade without the 30px rise; the background glows stand still. */
@keyframes bs-ins-fade{from{opacity:0;}}
html body.pg-insights :is(.rcard,.card){clip-path:none!important;translate:none!important;animation:bs-ins-fade .24s ease-out both!important;animation-timeline:auto!important;}
html body.pg-insights :is(.rcard,.card) :is(img,.rc-body){clip-path:none!important;scale:none!important;translate:none!important;animation:none!important;}
html body.pg-insights .bs-content-motion{transform:none!important;}
html body.pg-insights :is(.glow,.fx-atmos-leak,.float,.float-2){animation:none!important;}

/* ---- Customer Stories: two-column editorial list, Load More, Back to Top (8 Oct 2026, Clayton's wireframe) ---- */
.cs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,2.6vw,40px);row-gap:clamp(40px,3.6vw,56px);margin-top:32px;}
.cs-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;color:#26292C;text-decoration:none;}
.cs-card.lm-hide{display:none!important;}
.cs-media{display:block;width:100%;aspect-ratio:16/7;overflow:hidden;border-radius:4px;background:#E9F4F9;margin-bottom:20px;}
.cs-media img{display:block;width:100%;height:100%;object-fit:cover;}
.cs-tag{margin-bottom:10px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#005DA7;}
.interior-v2 .cs-card h3{margin:0 0 10px;font-size:clamp(20px,1.6vw,24px);line-height:1.3;font-weight:700;color:#26292C;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;transition:color .2s ease;}
.interior-v2 .cs-card .cs-ex{margin:0 0 16px;font-size:16px;line-height:26px;color:#4B4F54;max-width:60ch;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;}
.cs-more{margin-top:auto;font-size:15px;font-weight:600;color:#005DA7;transition:color .2s ease;}
.cs-card:hover h3,.cs-card:focus-visible h3{color:#005DA7;}
.cs-card:hover .cs-more{color:#004A8C;}
.cs-card:focus-visible{outline:2px solid #005DA7;outline-offset:6px;border-radius:4px;}
.cs-load-wrap{display:flex;justify-content:center;margin-top:clamp(40px,4vw,56px);}
.cs-load-wrap[hidden]{display:none;}
.bs-to-top{position:fixed;z-index:60;right:24px;bottom:104px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:#fff;color:#005DA7;border:1px solid rgba(0,93,167,.35);box-shadow:0 6px 24px -8px rgba(11,73,104,.18);
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s,background-color .2s ease,border-color .2s ease;}
.bs-to-top.is-on{opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s,background-color .2s ease,border-color .2s ease;}
.bs-to-top:hover{background:#F1F8FB;border-color:#005DA7;}
.bs-to-top:focus-visible{outline:2px solid #005DA7;outline-offset:2px;}
.bs-to-top[hidden]{display:none;}
@media (max-width:760px){
  .cs-grid{grid-template-columns:minmax(0,1fr);}
  .cs-media{aspect-ratio:16/9;}
  .bs-to-top{right:16px;bottom:92px;width:44px;height:44px;}
}

/* AI Ethical Guidelines hero (9 Oct 2026, "文字和右侧元素水平没有很对齐"): the artwork's light beam runs across 48.5% of
   the picture's height (measured on hero-ai-ethical-guidelines-v3.webp), and the picture covers the whole hero; the copy
   was placed by top padding and sat ~60px below it at 1440 and 1920. The copy block is now centred on that line. */
@media (min-width:761px){
  /* the inner box keeps its size (so the hero keeps its height) but stops being the positioning context; the copy,
     with no left/right set, keeps its horizontal place and is placed vertically against the whole hero */
  html body .aeg-hero > .aeg-hero-inner{position:static;}
  html body .aeg-hero .aeg-hero-copy{position:absolute;top:48.5%;transform:translateY(-50%);width:min(620px,calc(100% - 2 * var(--pad,24px)));}
}

/* Trust & Excellence credentials, simplified (12 Oct 2026, Clayton's mock): 2x2 plain cards, a hairline, then the
   Microsoft recognition as one small card. */
.trust-credentials--simple .tc-head{margin:0 0 24px;max-width:760px;}
.trust-credentials--simple .tc-head .h2{margin:0 0 10px;}
.interior-v2 .trust-credentials--simple .tc-head p{margin:0;color:#4B4F54;}
.tc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;}
.interior-v2 .tc-grid > li{max-width:none;margin:0;}
.tc-grid > li::before{content:none;display:none;}
.tc-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px 30px;border-radius:12px;background:#fff;border:1px solid #ECECEC;box-shadow:0 6px 24px -8px rgba(11,73,104,.08);}
.tc-ic{display:inline-grid;place-items:center;color:#4B4F54;}
.tc-card .tc-ic{margin-bottom:14px;}
.interior-v2 .tc-card h3{margin:0 0 8px;font-size:18px;line-height:1.35;font-weight:700;color:#26292C;}
.interior-v2 .tc-card p{margin:0;font-size:15px;line-height:24px;color:#6E7276;}
.tc-partner{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:28px;padding-top:40px;border-top:1px solid #ECECEC;}
.interior-v2 .tc-eyebrow{margin:0 0 14px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#6E7276;}
.tc-pill{display:inline-flex;align-items:center;gap:14px;padding:16px 26px;border-radius:12px;background:#F5F5F5;color:#26292C;}
.tc-pill b{display:block;font-size:17px;line-height:1.5;font-weight:700;text-align:center;}
.interior-v2 .tc-caption{margin:14px 0 6px;font-size:15px;color:#6E7276;}
.trust-credentials--simple .trust-scope{margin-top:32px;}
@media (max-width:640px){.tc-grid{grid-template-columns:minmax(0,1fr);} .tc-pill{padding:14px 18px;}}
.tc-card .tc-mark{display:flex;align-items:center;justify-content:center;width:100%;height:88px;margin-bottom:16px;}
.tc-card .tc-mark img{display:block;max-width:min(240px,80%);max-height:88px;width:auto;height:auto;object-fit:contain;}
.interior-v2 .tc-card .tc-reg{margin-top:6px;font-size:13px;color:#6E7276;}
.tc-badge img{display:block;width:240px;max-width:100%;height:auto;}

/* ---- Capabilities dropdown, three columns (16 Oct 2026, Copy Review (8) wireframe) ----
   Left (widest): AI, Data, Robotics as rows with a one-line benefit. Middle: five plain links. Right (narrow):
   the two programmes. Quiet 200ms colour hover only (motion guide); no thumbnails, dots or sliding arrows. */
.mega--tri .mega-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;}
.mega--tri .mega-head .mt{margin:0;}
.mega--tri .mega-all{font-size:15px;font-weight:600;color:rgba(255,255,255,.86);text-decoration:none;white-space:nowrap;transition:color .2s ease;}
.mega--tri .mega-all:hover,.mega--tri .mega-all:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:4px;}
html body .mega--tri .mega-cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.8fr);gap:0;align-items:start;flex-wrap:nowrap;}
.mega--tri .mt3-col{min-width:0;}
.mega--tri .mt3-col + .mt3-col{padding-left:clamp(24px,2.6vw,44px);margin-left:clamp(24px,2.6vw,44px);border-left:1px solid rgba(255,255,255,.14);}
html body .mega--tri .mt3-h{margin:0 0 16px;font-size:12px;line-height:1.4;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.mega--tri .mcl{display:flex;flex-direction:column;}
html body .mega--tri .mega-col a{position:static;display:flex;padding:0;font-size:inherit;white-space:normal;color:#fff;text-decoration:none;transform:none!important;transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
html body .mega--tri .mega-col a::before,html body .mega--tri .mega-col a::after{content:none!important;display:none!important;}
.mega--tri .mt3-go{flex:0 0 auto;margin-left:auto;padding-left:12px;font-size:20px;line-height:1;color:rgba(255,255,255,.6);transition:color .2s ease;}
/* left: rows */
.mega--tri .mt3-rows .mcl{gap:10px;}
html body .mega--tri a.mt3-row{align-items:center;padding:16px 20px;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);}
.mega--tri .mt3-body{display:flex;flex-direction:column;gap:4px;min-width:0;}
.mega--tri .mt3-row .mt3-t{font-size:19px;line-height:1.3;font-weight:700;}
.mega--tri .mt3-d{font-size:14px;line-height:1.45;font-weight:400;color:rgba(255,255,255,.72);}
html body .mega--tri a.mt3-row:hover,html body .mega--tri a.mt3-row:focus-visible{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);}
/* middle: plain links */
html body .mega--tri a.mt3-link{align-items:center;padding:11px 0;font-size:17px;line-height:1.35;font-weight:500;border-bottom:1px solid rgba(255,255,255,.08);}
/* right: programmes */
.mega--tri .mt3-progs .mcl{gap:22px;}
html body .mega--tri a.mt3-prog{flex-direction:column;gap:4px;}
.mega--tri .mt3-prog .mt3-t{display:flex;align-items:center;gap:6px;font-size:17px;line-height:1.35;font-weight:700;}
.mega--tri .mt3-prog .mt3-go{margin-left:0;padding-left:0;font-size:18px;}
html body .mega--tri .mega-col a:is(.mt3-link,.mt3-prog):hover,html body .mega--tri .mega-col a:is(.mt3-link,.mt3-prog):focus-visible{color:#BFE3FF;}
html body .mega--tri .mega-col a:hover .mt3-go{color:#fff;}
html body .mega--tri .mega-col a:focus-visible{outline:2px solid #fff;outline-offset:2px;}
/* phones: the three groups stacked, labelled, no nested toggles */
.mobile-menu .m-glabel{margin:14px 0 2px;padding-left:16px;font-size:11.5px;line-height:1.4;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#6E7276);}
.mobile-menu .m-panel .m-glabel:first-child{margin-top:6px;}
.mobile-menu .m-sub.m-all{margin-top:6px;font-weight:600;color:#005DA7;}

/* ---- Homepage capabilities, option A (16 Oct 2026, Copy Review (8)) ---- */
.ah-caps3 .ah-caps2-h2{max-width:none;}
.c3-feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:8px;}
.c3-card{display:flex;flex-direction:column;align-items:flex-start;padding:28px 28px 26px;border-radius:4px;background:#F5F9FC;border:1px solid #D9E3EC;
  color:#26292C;text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;}
.c3-ic{display:block;width:72px;height:72px;margin:-6px 0 14px -6px;}
.c3-ic img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.05);}  /* the renders sit on #F3F3F3; 1.05 lifts that to white so multiply leaves only the icon */
html body .c3-card h3{margin:0 0 8px;font-size:clamp(20px,1.6vw,24px);line-height:1.25;font-weight:700;color:#26292C;transition:color .2s ease;}
html body .c3-card p{margin:0 0 20px;font-size:16px;line-height:26px;color:#4B4F54;max-width:34ch;}
.c3-card .ah-cap2-go{margin-top:auto;font-size:15px;font-weight:600;color:#005DA7;}
.c3-card:hover,.c3-card:focus-visible{border-color:rgba(0,93,167,.4);box-shadow:0 10px 28px -16px rgba(11,73,104,.24);background:#fff;}
.c3-card:hover h3,.c3-card:focus-visible h3{color:#005DA7;}
html body .c3-svc-h{margin:44px 0 16px;font-size:20px;line-height:1.3;font-weight:700;color:#26292C;}
.c3-svcs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;}
.c3-svc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-height:112px;padding:18px 18px 16px;border-radius:4px;background:#fff;border:1px solid #E1E8EF;
  color:#26292C;text-decoration:none;transition:border-color .2s ease,color .2s ease;}
.c3-svc-ic{color:#005DA7;}
.c3-svc-t{font-size:16px;line-height:1.35;font-weight:600;padding-right:18px;}
.c3-svc-go{position:absolute;right:16px;bottom:14px;font-size:18px;line-height:1;color:#6E7276;transition:color .2s ease;}
.c3-svc:hover,.c3-svc:focus-visible{border-color:rgba(0,93,167,.4);color:#005DA7;}
.c3-svc:hover .c3-svc-go{color:#005DA7;}
.c3-card:focus-visible,.c3-svc:focus-visible{outline:2px solid #005DA7;outline-offset:2px;}
.c3-all{display:flex;justify-content:center;margin-top:36px;}
@media (max-width:1100px){.c3-svcs{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:860px){.c3-feat{grid-template-columns:minmax(0,1fr);} .c3-svcs{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:400px){.c3-svcs{grid-template-columns:minmax(0,1fr);} .c3-svc{min-height:0;flex-direction:row;align-items:center;}}

/* ---- AI Ethical Guidelines, 17 Oct 2026 layout (Copy Review (8) colour wireframe) ---- */
.aeg-hero .aeg-hero-btn{margin-top:28px;}
.aeg-page .aeg-sub{margin:10px 0 28px;font-size:16px;line-height:26px;color:#4B4F54;max-width:62ch;}
.aeg-page .aeg-delivery .h2,.aeg-page .aeg-practice .h2{margin:0;}
.aeg-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:0;padding:0;list-style:none;counter-reset:none;}
.interior-v2 .aeg-stages > li,.aeg-stages > li{position:relative;max-width:none;margin:0;padding:22px 22px 24px;border-top:3px solid #005DA7;border-radius:0 0 4px 4px;background:#F1F8FB;}
.aeg-stages > li:last-child{border-top-color:#904799;}
.aeg-stages > li::before{content:none;}
.aeg-stages > li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-22px;width:16px;height:2px;background:#9DB7CF;}
html body .aeg-stages h3{margin:0 0 6px;font-size:19px;line-height:1.3;font-weight:700;color:#26292C;}
html body .aeg-stages p{margin:0;font-size:15px;line-height:24px;color:#4B4F54;}
html body .aeg-oversight{max-width:none;width:100%;margin:18px 0 0;padding:12px 20px;border-radius:4px;background:#06182E;color:#fff;font-size:15px;font-weight:600;line-height:1.4;}
.aeg-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none;}
.interior-v2 .aeg-cards > li,.aeg-cards > li{max-width:none;margin:0;padding:24px 26px 26px;border:1px solid #E1E8EF;border-radius:4px;background:#fff;box-shadow:0 6px 24px -8px rgba(11,73,104,.08);}
.aeg-cards > li::before{content:none;}
html body .aeg-cards h3{display:flex;align-items:baseline;gap:12px;margin:0 0 10px;font-size:19px;line-height:1.3;font-weight:700;color:#26292C;}
.aeg-no{font-size:14px;font-weight:700;letter-spacing:.04em;color:#005DA7;font-variant-numeric:tabular-nums;}
html body .aeg-cards p{margin:0;font-size:16px;line-height:26px;color:#4B4F54;}
.aeg-cta-wrap{padding-bottom:clamp(56px,6vw,88px);}
.aeg-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:32px 36px;border-radius:4px;background:#F1F8FB;border:1px solid #D9E7F0;}
html body .aeg-cta h2{margin:0 0 6px;font-size:clamp(24px,2.2vw,30px);line-height:1.25;font-weight:700;color:#26292C;}
html body .aeg-cta p{margin:0;font-size:16px;line-height:26px;color:#4B4F54;}
@media (max-width:960px){.aeg-stages{grid-template-columns:repeat(2,minmax(0,1fr));} .aeg-stages > li:nth-child(2)::after{display:none;}}
@media (max-width:640px){.aeg-stages,.aeg-cards{grid-template-columns:minmax(0,1fr);} .aeg-stages > li::after{display:none;} .aeg-cta{padding:24px 20px;}}

/* ---- Insights listing, 17 Oct 2026 (Copy Review (8) "Insights Page Update") ---- */
.pa-index-browse{display:inline-flex;gap:6px;margin-top:18px;font-size:15px;font-weight:600;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;}
.pa-index-browse:hover{border-color:#fff;}
.ins-latest .ins-facet-filter{display:block;margin:20px 0 0;padding:0;border:0;background:none;box-shadow:none;}
.ins-ff-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,260px) auto;gap:12px;align-items:end;}
.ins-facet-filter label{display:flex;flex-direction:column;gap:6px;min-width:0;}
.ins-facet-filter label > span{font-size:13px;font-weight:600;color:#4B4F54;}
html body .ins-facet-filter :is(input[type=search],select){height:46px;min-height:46px;padding:0 14px;border:1px solid #D4DCE8;border-radius:4px;background:#fff;font:inherit;font-size:15px;color:#26292C;width:100%;}
.ins-facet-filter :is(input,select):focus{outline:2px solid #005DA7;outline-offset:1px;border-color:#005DA7;}
.ins-ff-more{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border:1px solid #D4DCE8;border-radius:4px;background:#fff;font:inherit;font-size:15px;font-weight:600;color:#26292C;cursor:pointer;transition:border-color .2s ease,color .2s ease;}
.ins-ff-more:hover,.ins-ff-more[aria-expanded="true"]{border-color:#005DA7;color:#005DA7;}
.ins-ff-panel{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:12px;margin-top:12px;}
.ins-ff-panel[hidden]{display:none;}
.ins-count{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:22px 0 14px;font-size:14px;color:#6E7276;}
.ins-count p{margin:0;}
.ins-count .ins-facet-clear{font-size:14px;font-weight:600;color:#005DA7;}
.ins-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.ins-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;border:1px solid #E1E8EF;border-radius:4px;background:#fff;overflow:hidden;color:#26292C;text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease;}
.ins-card-media{display:block;width:100%;aspect-ratio:16/9;background:#E9F4F9;}
.ins-card-media img{display:block;width:100%;height:100%;object-fit:cover;}
.ins-card-kind{margin:18px 20px 8px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#005DA7;}
html body .ins-card h3{margin:0 20px 8px;font-size:18px;line-height:1.35;font-weight:700;color:#26292C;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;transition:color .2s ease;}
.ins-card-date{margin:0 20px 14px;font-size:14px;color:#6E7276;}
.ins-card-go{margin:auto 20px 20px;font-size:15px;font-weight:600;color:#005DA7;}
.ins-card:hover,.ins-card:focus-visible{border-color:rgba(0,93,167,.4);box-shadow:0 10px 28px -16px rgba(11,73,104,.24);}
.ins-card:hover h3{color:#005DA7;}
.ins-card:focus-visible{outline:2px solid #005DA7;outline-offset:2px;}
.ins-empty{grid-column:1/-1;margin:0;color:#6E7276;}
.ins-latest .bs-pager{display:flex;justify-content:center;gap:6px;margin-top:36px;}
.ins-latest .bs-pager > :is(a,span){display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;min-width:40px;height:40px;padding:0 10px;border:1px solid #D4DCE8;border-radius:4px;font-size:15px;color:#26292C;text-decoration:none;transition:border-color .2s ease,color .2s ease;}
.ins-latest .bs-pager .current{background:#005DA7;border-color:#005DA7;color:#fff;}
.ins-latest .bs-pager a:hover{border-color:#005DA7;color:#005DA7;}
.ins-latest .bs-pager .dots{border:0;}
.ins-subscribe{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,420px);align-items:center;gap:20px 24px;margin-top:48px;padding:24px 28px;border-radius:4px;background:#F1F8FB;border:1px solid #D9E7F0;}
.ins-subscribe-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:#005DA7;}
html body .ins-subscribe h2{margin:0 0 4px;font-size:19px;line-height:1.35;font-weight:700;color:#26292C;}
html body .ins-subscribe p{margin:0;font-size:15px;line-height:24px;color:#4B4F54;}
.ins-subscribe-form{display:flex;gap:10px;}
.ins-subscribe-form input{flex:1;min-width:0;height:48px;padding:0 14px;border:1px solid #D4DCE8;border-radius:4px;font:inherit;font-size:15px;}
@media (max-width:1100px){.ins-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .ins-subscribe{grid-template-columns:auto minmax(0,1fr);} .ins-subscribe-form{grid-column:1/-1;}}
@media (max-width:640px){.ins-ff-row{grid-template-columns:minmax(0,1fr) auto;} .ins-ff-search{grid-column:1/-1;} .ins-ff-panel{grid-template-columns:minmax(0,1fr);} .ins-grid{grid-template-columns:minmax(0,1fr);} .ins-subscribe{grid-template-columns:minmax(0,1fr);padding:22px 18px;} .ins-subscribe-ic{display:none;}}

/* Events cards, 17 Oct (Copy Review (8)): links under the button and small print — the Tech Bridge
   Showcase listing ("Register Now" + View Event Details | About Tech Bridge + trial terms).
   18 Oct: the Featured card reads as an event, not a cropped poster — whole key visual, icon fact lines,
   arrow links like the button, the terms set off by a hairline. */
.evf-ex p{margin:0 0 10px;}
.evf-ex p:last-child{margin-bottom:0;}
.evf .evf-ex{font-size:15.5px;line-height:1.65;}
.evf-facts{display:grid;gap:8px;margin:4px 0 2px;padding:0;list-style:none;font-size:15px;line-height:1.45;color:#26292C;}
.evf-facts li{display:flex;align-items:flex-start;gap:10px;}
.evf-facts li.evc-when{font-weight:600;}
.evf-ico{flex:none;margin-top:1px;color:#005DA7;}
.ev-card-links{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px 24px;margin:14px 0 0;font-size:15px;font-weight:600;}
.ev-card-links a{color:#005DA7;text-decoration:none;white-space:nowrap;transition:color .2s ease;}
.ev-card-links a b{font-weight:400;}
.ev-card-links a:hover{color:#003F73;text-decoration:underline;text-underline-offset:3px;}
.ev-card-note{margin:16px 0 0;padding-top:14px;border-top:1px solid #E6EBF1;font-size:13px;line-height:1.55;color:#6E7276;}
.evc .ev-card-links{margin-top:8px;font-size:14px;}
.evc .ev-card-note{border-top:0;padding-top:0;margin-top:8px;}
.evf.evf--wide{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,4.4vw,72px);align-items:center;min-height:0;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;}
.evf.evf--wide:hover,.evf.evf--wide:focus-within{transform:none;border-color:transparent;box-shadow:none;}
.evf--wide .evf-img{min-height:0;aspect-ratio:16/9;overflow:hidden;border-radius:16px;background:#F5F2FB;box-shadow:0 28px 56px -36px rgba(12,40,80,.45);}
.evf--wide .evf-img img{object-fit:cover;object-position:center;}
.evf--wide .evf-body{padding:0;}
.evf-facts [data-i18n],.evf-nw{white-space:nowrap;}
.ev-featured-slot{margin:0;}
.ev-featured-slot .evf{margin:0;}
.ev-featured-slot + .evc-grid{margin-top:28px;}
@media (max-width:860px){.evf.evf--wide{grid-template-columns:1fr;gap:24px;}}
.evd-fig{margin:22px 0;}
.evd-fig img{display:block;width:100%;height:auto;border-radius:4px;}
.evd-btn{margin:22px 0 0;}

/* 19 Oct (Copy Review (9) image note 6): the Frontier article's hero is a 16:9 canvas, full width like other heroes */
.pr-badge.pr-badge--169,.pa-body .pr-badge.pr-badge--169{max-width:none;margin:0 0 32px;}
.pr-badge--169 img{aspect-ratio:16/9;object-fit:cover;}

/* 19 Oct (Copy Review (9) image note 2): every Insights hero sits in a fixed 16:9 frame with object-fit: cover,
   so a 4:3 or odd-ratio upload no longer changes the page. Poster covers (.pa-cover-tall) keep showing whole —
   cropping them cut titles, logos and QR codes (see the note on .pa-cover-tall in base.css). */
.pa-cover:not(.pa-cover-tall) img{aspect-ratio:16/9;object-fit:cover;height:auto;}

/* Footer, 19 Oct 2026 (Copy Review (9) "Homepage Footer Revision — Spotlighting AI, Robotics and Data"):
   Capabilities in two groups — AI, Data, Robotics larger and white under a small label, a hairline, then the
   five Technology & Delivery Services — and Explore all capabilities. LinkedIn as a text link; Contact Us at
   the right end of the bottom rail. */
.foot-col .links .foot-grp{display:flex;flex-direction:column;align-items:flex-start;gap:13px;width:100%;}
.foot-col .links .foot-sub{margin:0;font-size:11px;line-height:1.4;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(202,225,247,.55);}
.foot-col .links .foot-grp--feat{gap:10px;padding-bottom:18px;margin-bottom:5px;border-bottom:1px solid rgba(202,225,247,.14);}
.foot-col .links .foot-grp--feat a{color:#fff;font-size:17px;font-weight:700;}
.foot-col .links .foot-grp--feat a::after{content:" \203A";font-weight:400;}
.foot-col--capabilities .links a.foot-all{color:#8ee5f3;font-weight:600;margin-top:5px;}
.foot-linkedin-txt{color:#dce8f5;font-size:15px;font-weight:600;text-decoration:none;transition:color .2s ease;}
.foot-linkedin-txt:hover{color:#8ee5f3;}
@media(min-width:641px){
  .foot-bot .legal{flex:1;}
  .foot-bot .legal a.foot-rail-contact{margin-left:auto;}
  .foot-bot .legal a.foot-rail-contact::before{display:none;}
}

/* Homepage hero, 19 Oct 2026 (Copy Review (9)): the AI-city still with the client's loop over it. The video fades in
   only once playing; a soft white glow behind the headline keeps it readable over the moving scene. */
.home .ah-herobg--ai{background:#E9EEFB;}
/* 20 Oct: the clip is the Figma still's scene zoomed in, so full-bleed it came out ~1.4x the still and ran up behind
   the headline ("怎么和figma的demo不一样"). Scaled to the still's own composition instead — the three-tower group measured
   about 12% of the hero width in the Figma frame against 13% of the clip frame, so the clip is drawn at 92% of the hero width,
   centred and standing on the hero floor — with its edges faded into the ground. */
.home .ah-herobg--ai .ah-hero-video{position:absolute;left:50%;bottom:0;top:auto;width:min(92%,1700px);height:auto;aspect-ratio:16/9;
  transform:translate(-50%,10%);object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%);mask-composite:intersect;}
/* from 768px the clip (or its first-frame poster) is the whole visual; the Figma still is for phones only */
@media (min-width:768px){ .home .ah-herobg--ai img{display:none!important;} }
@media (max-width:767px){ .home .ah-herobg--ai .ah-hero-video{display:none;} }
.home .ah-herobg--ai::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(52% 46% at 50% 22%,rgba(246,249,255,.86) 0%,rgba(246,249,255,.55) 45%,rgba(246,249,255,0) 100%);}
/* phones: no video, and "cover" on a tall narrow hero blew the still up ~4x; the illustration sits on the floor of the
   hero at a readable scale instead (its centre 55%), the sky colour fills above it behind the copy */
@media (max-width:767px){
  .home .ah-herobg--ai img{top:auto!important;right:auto!important;bottom:0;left:-40%!important;width:180%!important;max-width:none!important;height:auto!important;object-fit:contain!important;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%);mask-image:linear-gradient(180deg,transparent 0,#000 38%);}
}
/* 20 Oct: the Figma frame is about half as tall as it is wide (1920 x ~1000); the hero's viewport-based height made it
   ~0.63 at 1440 and pushed the headline down into the scene. Desktop/tablet follow the frame's proportion. */
@media (min-width:768px){ .home .ah-hero{min-height:clamp(600px,52vw,1000px);} }

/* Insights Featured main card, 20 Oct (Clayton: "这标题排成一堆挡住了人物…最多让主标题两行字"): the headline at most two
   lines, set smaller and across the card instead of a 28ch column, so the photograph shows above it. */
html body .ins-main .ins-main-title{font-size:clamp(18px,1.5vw,22px);line-height:1.24;max-width:none;text-wrap:pretty;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;}
/* below 1100px the card is too narrow for a long headline in two lines at a readable size: three there */
@media (max-width:1279px){ html body .ins-main .ins-main-title{-webkit-line-clamp:3;line-clamp:3;} }
@media (max-width:640px){ html body .ins-main .ins-main-title{-webkit-line-clamp:5;line-clamp:5;} }

/* Mobile navigation, 20 Oct 2026 (Copy Review (10) "Mobile Navigation – Layout & Visual Hierarchy", wireframe
   "Recommended colour treatment"): a compact accordion. Top level 17px in the dark heading blue; an open section
   sits on a pale-blue band; Capabilities' three groups are their own accordions in a white panel, sub-links small
   and quiet; Explore all capabilities closes the band in blue. Only the phone/tablet menu (.mobile-menu). */
html body .mobile-menu{padding-top:12px;}
html body .mobile-menu .m-item{border-bottom:1px solid #E6EBF1;}
html body .mobile-menu :is(a.m-link,button.m-link){padding:15px 0;font:600 17px/1.3 var(--f-display);color:#0B2A4A;border-bottom:0;}
html body .mobile-menu .m-toggle{color:#5A6B7E;}
html body .mobile-menu .m-caret{font-size:11px;}
html body .mobile-menu .m-item.open{background:#EEF5FC;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 14px;border-bottom-color:transparent;}
html body .mobile-menu .m-item.open > .m-row :is(.m-link,.m-toggle){color:#005DA7;}
html body .mobile-menu .m-item.open .m-panel{max-height:1400px;}
/* the white subcategory panel */
html body .mobile-menu .m-tripanel{background:#fff;border-radius:8px;padding:2px 14px;box-shadow:0 1px 2px rgba(11,42,74,.06);}
html body .mobile-menu .m-group--tri + .m-group--tri{border-top:1px solid #E6EBF1;}
html body .mobile-menu .m-panel .m-group--tri .m-gbtn{min-height:46px;padding:10px 0;font:600 14.5px/1.3 var(--f-body);color:#0B2A4A;}
html body .mobile-menu .m-group--tri.open .m-gbtn{color:#005DA7;}
html body .mobile-menu .m-group--tri .m-gbtn .m-caret{flex:0 0 32px;}
html body .mobile-menu .m-panel .m-group--tri .m-gpanel .m-sub{padding:8px 0 8px 10px;font:400 14px/1.35 var(--f-body);color:#4B4F54;border:0;}
html body .mobile-menu .m-panel .m-group--tri .m-gpanel .m-sub:last-child{padding-bottom:12px;}
html body .mobile-menu .m-panel .m-sub.m-all{display:inline-block;margin:12px 0 0;padding:6px 0;font:600 14.5px/1.3 var(--f-body);color:#005DA7;border:0;}
/* the other labelled panels (Clients & Partners, Company) get the same compact sizes */
html body .mobile-menu .m-panel :is(.m-gbtn,.m-glink):not(.m-group--tri .m-gbtn){min-height:46px;padding:10px 0;font:600 15px/1.3 var(--f-body);color:#0B2A4A;}
html body .mobile-menu .m-panel .m-group:not(.m-group--tri) .m-gpanel .m-sub{padding:8px 0 8px 18px;font:400 14px/1.35 var(--f-body);color:#4B4F54;border:0;}
html body .mobile-menu .m-tripanel .m-group:not(.m-group--tri) + :is(.m-group,.m-glink),
html body .mobile-menu .m-tripanel .m-glink + :is(.m-group,.m-glink){border-top:1px solid #E6EBF1;}
html body .mobile-menu .m-tripanel :is(.m-gbtn,.m-glink){padding-left:0;}
html body .mobile-menu .m-tripanel .m-group.open > .m-gbtn{color:#005DA7;}
html body .mobile-menu .m-panel .m-group:not(.m-group--tri) .m-gpanel .m-sub{padding-left:10px;}
/* 20 Oct (Clayton): the mobile menu's carets as a line chevron (V) instead of the ▾ glyph. The glyph stays in the
   markup for nothing but layout; the chevron is drawn, and the existing open-state rotate(180deg) turns it up. */
html body .mobile-menu .m-caret{position:relative;display:inline-block;width:12px;height:12px;font-size:0;line-height:0;color:inherit;}
html body .mobile-menu .m-caret::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translate(-50%,-70%) rotate(45deg);}
html body .mobile-menu .m-gbtn .m-caret{flex:0 0 12px;margin-right:10px;}

/* Whitepaper download buttons, 20 Oct (Clayton: "黑底蓝字，看起来像bug"): WordPress's File block paints its button
   #32373c and the site's link colour turned the label blue. They now match the site's primary button. */
html body .wp-block-file{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;}
html body .wp-block-file .wp-block-file__button,
html body .wp-block-file a.wp-block-file__button:visited{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin:0;padding:13px 27px;
  border:0;border-radius:6px;background:linear-gradient(180deg,#005DA7 0%,#004A8C 100%);color:#fff!important;
  font:600 16px/20px var(--f-body);text-decoration:none!important;box-shadow:inset 0 0 0 100px rgba(0,74,140,0),0 4px 16px -4px rgba(0,93,167,.25);
  transition:box-shadow .2s ease;}
html body .wp-block-file .wp-block-file__button:hover,
html body .wp-block-file .wp-block-file__button:focus-visible{box-shadow:inset 0 0 0 100px #004A8C,0 4px 16px -4px rgba(0,93,167,.25);color:#fff!important;}
html body .wp-block-file .wp-block-file__button:focus-visible{outline:2px solid #005DA7;outline-offset:3px;}

/* Insights cards, 20 Oct: one frame for every card. The 16:9 box used aspect-ratio with an in-flow image, and a taller
   image grew the box (aspect-ratio keeps min-height:auto), so cards came out 239 / 280 / 286px tall. The image is now
   laid over a fixed box. Off-ratio images (.ins-card-media--fit) sit whole on a blurred, softened copy of themselves. */
html body .ins-card .ins-card-media{position:relative;display:block;width:100%;aspect-ratio:16/9;min-height:0;height:auto;overflow:hidden;background:#E9F4F9;}
html body .ins-card .ins-card-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;}
/* 22 Oct (Clayton's PowerPoint reference): the filler is the same picture enlarged and faded, not blurred — a light,
   sharp echo of the image behind the whole one. */
html body .ins-card .ins-card-media--fit{background:#fff;}
html body .ins-card .ins-card-media--fit::before{content:"";position:absolute;inset:0;background:var(--ins-fill) center/cover no-repeat;transform:scale(1.18);opacity:.32;}
html body .ins-card .ins-card-media--fit::after{content:none;}
html body .ins-card .ins-card-media--fit img{z-index:1;object-fit:contain;}
html body .wp-block-file{justify-content:flex-start;text-align:left;margin-top:28px;}
html body .wp-block-file object{display:none!important;}   /* WordPress's file script un-hides the empty PDF preview in browsers that can show PDFs */

/* Insights Featured, 21 Oct (Outstanding Actions: "16:9 landscape image containers with object-fit: cover"; main + three).
   Every featured image sits in a 16:9 frame. The main card puts its picture above the text instead of under it, so the
   headline no longer covers the people in the photo (Clayton, 20 Oct). The three secondary cards keep a 16:9 thumbnail. */
html body .ins-main{display:flex;flex-direction:column;min-height:0;background:#fff;color:var(--ink);}
html body .ins-main::after{content:none;}
html body .ins-main img{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}
html body .ins-main-body{position:static;flex:1;justify-content:flex-start;gap:10px;padding:clamp(20px,2.4vw,30px);}
html body .ins-main .ins-tag{color:var(--blue-text);background:none;border:0;padding:0;backdrop-filter:none;font:700 11px/1 var(--f-mono);letter-spacing:.14em;}
html body .ins-main .ins-main-title{color:var(--ink);}
html body .ins-main .ins-ex{color:var(--text);}
html body .ins-main .ins-date{color:var(--muted);}
html body .ins-main .ins-go{color:var(--blue-text);}
html body .ins-main--contain{background:#fff;}
html body .ins-main--contain img{object-fit:contain;background:#eef3f8;}
html body .ins-side-list{grid-template-rows:repeat(2,minmax(0,1fr));gap:20px;}
@media (max-width:980px){ html body .ins-side-list{grid-template-rows:none;} }
html body .ins-side{grid-template-columns:minmax(0,44%) minmax(0,1fr);align-items:center;}
html body .ins-side-img{min-height:0;aspect-ratio:16/9;align-self:center;height:auto;margin-left:12px;border-radius:12px;overflow:hidden;}
html body .ins-side-body{padding:14px clamp(14px,1.6vw,22px);gap:8px;}
html body .ins-side-title{font-size:clamp(16px,1.25vw,19px);-webkit-line-clamp:3;line-clamp:3;}
@media (max-width:560px){ html body .ins-side{grid-template-columns:minmax(0,40%) minmax(0,1fr);} html body .ins-side-img{min-height:0;} }
@media (max-width:1279px){ html body .ins-side-title{-webkit-line-clamp:4;line-clamp:4;} }
@media (max-width:560px){
  html body .ins-side{grid-template-columns:minmax(0,1fr);}
  html body .ins-side-img{margin:0;border-radius:0;align-self:stretch;}
  html body .ins-side-title{-webkit-line-clamp:unset;line-clamp:none;display:block;}
}
/* 21 Oct: Technology & Delivery tiles carry small glass icons (same renders and treatment as .c3-ic) */
.c3-svc-glass{display:block;width:52px;height:52px;margin:-6px 0 -4px -6px;}
.c3-svc-glass img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.05);}
@media (max-width:400px){ .c3-svc .c3-svc-go{position:static;margin-left:auto;align-self:center;} }

/* Spotlight main card with its own call to action (21 Oct: the Showcase, Register now) */
html body .ins-main--cta .ins-main-media{display:block;}
html body .ins-main--cta a.ins-main-title{text-decoration:none;}
html body .ins-main--cta a.ins-main-title:hover{color:#005DA7;}
html body .ins-main--cta .ins-meta{align-items:center;gap:10px 20px;margin-top:6px;}
html body .ins-main--cta .ins-main-cta{min-height:44px;padding:11px 22px;font-size:15px;}
html body .ins-main--cta:hover{transform:none;}
/* Spotlight 1 + 2 (21 Oct pm): the two small cards also put a 16:9 picture above their text. Columns ~2.3 : 1 make the two
   stacked small cards about as tall as the main card (0.5625W + body = 2 × (0.5625w + body) + gap). */
@media (min-width:1280px){
  html body .ins-feat-grid{grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);}
  html body .ins-side{grid-template-columns:minmax(0,1fr);align-items:stretch;align-content:start;}
  html body .ins-side-img{margin:0;border-radius:0;align-self:auto;width:100%;}
  html body .ins-side-body{justify-content:flex-start;padding:16px 20px 18px;}
  html body .ins-side-title{-webkit-line-clamp:3;line-clamp:3;}
}
@media (min-width:1280px){ html body .ins-side-title{-webkit-line-clamp:4;line-clamp:4;} }
/* below 1200: the main card full width, the two small cards side by side under it, picture above text */
@media (min-width:561px) and (max-width:1279px){
  html body .ins-feat-grid{grid-template-columns:minmax(0,1fr);}
  html body .ins-side-list{grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
  html body .ins-side{grid-template-columns:minmax(0,1fr);align-items:stretch;align-content:start;}
  html body .ins-side-img{margin:0;border-radius:0;align-self:auto;width:100%;}
  html body .ins-side-body{justify-content:flex-start;padding:16px 20px 18px;}
  html body .ins-side-title{-webkit-line-clamp:unset;line-clamp:none;display:block;}
}

/* Article picture caption (22 Oct, Clayton: the Tech Bridge photo line "移到图片之下"). Small, muted, italic like the
   line it replaces; a tall poster cover is a centred flex row, so the caption breaks onto its own line there. */
.pa-cover-cap{margin:12px 0 0;font:italic 400 14px/1.55 var(--f-body);color:#6E7276;}
.interior-v2 .pa .pa-cover-cap{max-width:none;}   /* the site's 56ch prose cap would hold it to half the picture */
.pa-cover-tall{flex-wrap:wrap;}
.pa-cover-tall .pa-cover-cap{flex-basis:100%;text-align:center;}

/* Tag lines written out in full (case studies, and the Copy Review pieces since 21 Oct) had no edge — border
   transparent — so beside every other article's chips they read as loose words. Linked chips take the outlined
   blue of the second tier, plain ones the grey of the third (22 Oct). */
.pa-tags--case-spec a.pa-tag{background:transparent;border-color:color-mix(in srgb,var(--blue) 40%,transparent);color:var(--blue-text,var(--blue));}
.pa-tags--case-spec a.pa-tag:hover{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 7%,transparent);}
.pa-tags--case-spec span.pa-tag{background:var(--bg-2);border-color:var(--line);color:var(--text-2);font-weight:500;}

/* Closing call to action inside an article (22 Oct, the Tech Week news: "Explore AI for Your Business" with
   Explore Tech Bridge / Explore Our AI Capabilities). A light panel at the end of the prose, one primary button
   and a text link, so it reads as the article's next step and not as a site banner. */
.pa-body .pa-cta{margin:clamp(40px,4vw,56px) 0 0;padding:clamp(24px,2.6vw,32px);background:#F1F8FB;border:1px solid #DCE9F2;border-radius:14px;}
.pa-body .pa-cta .pa-cta-h{margin:0 0 8px;font:700 clamp(20px,1.6vw,24px)/1.3 var(--f-display);color:#26292C;letter-spacing:-.01em;}
.pa-body .pa-cta p.pa-cta-p{margin:0 0 20px;color:#4B4F54;}
.pa-body .pa-cta p.pa-cta-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin:0;}
.pa-body .pa-cta .pa-cta-links .btn{color:#fff;text-decoration:none;}
.pa-body .pa-cta .pa-cta-2{font-weight:600;color:#005DA7;text-decoration:none;}
.pa-body .pa-cta .pa-cta-2:hover{text-decoration:underline;text-underline-offset:3px;}


/* WordPress button blocks in post content (22 Oct): the Tech Bridge Showcase article's "Register for the Tech Bridge
   Showcase →" rendered as WordPress's own default — #32373c dark grey — with the article's blue link colour on top,
   "黑底蓝字". The theme had never styled the core Buttons block. A filled block button is now the site's primary
   button and an outline one its secondary, same sizes, colours and 200ms hover as .btn-primary / .btn-ghost. */
.wp-block-button .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:13px 27px;border:1px solid transparent;border-radius:6px;
  font:600 16px/20px var(--f-body);letter-spacing:0;text-decoration:none!important;
  background:linear-gradient(180deg,#005DA7 0%,#004A8C 100%);color:#fff!important;
  box-shadow:inset 0 0 0 100px rgba(0,74,140,0),0 4px 16px -4px rgba(0,93,167,.25);
  transition:box-shadow .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease;
}
.wp-block-button .wp-block-button__link:hover{color:#fff!important;box-shadow:inset 0 0 0 100px #004A8C,0 4px 16px -4px rgba(0,93,167,.25);}
.wp-block-button.is-style-outline .wp-block-button__link{background:#fff;color:#005DA7!important;border-color:#005DA7;box-shadow:none;}
.wp-block-button.is-style-outline .wp-block-button__link:hover{background:#F1F8FB;color:#005DA7!important;box-shadow:none;}
.wp-block-button .wp-block-button__link:focus-visible{outline:2px solid #005DA7;outline-offset:2px;}
.pa-body .wp-block-buttons{margin:24px 0;}

/* Tall poster covers on article pages (22 Oct): the whole poster stands in the middle of the 16:9 frame on an enlarged,
   faded copy of itself — the same filler as off-ratio Insights cards — instead of white space either side. */
.pa-cover.pa-cover-tall{position:relative;overflow:hidden;border-radius:var(--radius-14);background:#fff;align-items:center;}
.pa-cover.pa-cover-tall::before{content:"";position:absolute;inset:0;background:var(--pa-fill) center/cover no-repeat;transform:scale(1.18);opacity:.32;pointer-events:none;}
.pa-cover.pa-cover-tall img{position:relative;z-index:1;border:0;border-radius:0;box-shadow:0 8px 28px -12px rgba(11,27,51,.35);}
.pa-cover.pa-cover-tall .pa-cover-cap{position:relative;z-index:1;background:#fff;margin:0;padding:12px 0 0;}


/* Article covers on desktop (23 Oct, Clayton: "主图在电脑上看有点太大了，可以把它缩到跟下面正文一样宽，左右对齐吗？手机上
   看是正常的"). From 960px the cover broke out of the 720px text column to 1040px; it now takes the column's width,
   edges level with the paragraphs. Phones and tablets are unchanged (the cover was already the column there). The
   side-by-side story hero (.pa-hero-side) keeps its own layout. Tall posters keep showing whole, a little lower. */
@media (min-width:960px){
  body:not(.pa-hero-side) .pa-main > .pa-cover{width:100%;max-width:100%;margin-left:0;margin-right:0;}
  body:not(.pa-hero-side) .pa-main > .pa-cover-tall img{max-height:640px;}
}

/* Our Clients & Partners on desktop (24 Oct, Clayton's wireframe): the Capabilities panel's type, labels, dividers and
   arrows (.mega--tri), in its own proportions — Industries wide in two columns of four, then Partners, then Customer
   Stories — with each name followed by its arrow rather than the arrow at the column's edge. */
/* 26 Oct (Clayton: "这一块的空位太大了…让三个柱子都可以平衡分布"): Industries is as wide as its two columns of names
   need and the three columns share the rest evenly, instead of 2.2 : 1 : 0.7 leaving a gap after Industries. Company
   (three short columns) splits evenly too. */
html body .mega--tri[data-menu="clientsPartners"] .mega-cols{grid-template-columns:max-content minmax(0,1fr) minmax(0,1fr);}
html body .mega--tri[data-menu="clientsPartners"] .mt3-col:first-child{padding-right:clamp(16px,2vw,40px);}
html body .mega--tri[data-menu="team"] .mega-cols{grid-template-columns:repeat(3,minmax(0,1fr));}
.mega--tri .mt3-2col .mcl{display:grid;grid-auto-flow:column;grid-template-rows:repeat(4,auto);   /* the row count is also written on the element by app.js */grid-template-columns:repeat(2,minmax(0,max-content));column-gap:clamp(32px,4.2vw,72px);}
html body .mega--tri a.mt3-inl-a{display:inline-flex;align-items:center;align-self:flex-start;padding:10px 0;font-size:17px;line-height:1.35;font-weight:500;color:#fff;transition:color .2s ease;}
.mega--tri .mt3-inl-a .mt3-go{margin-left:0;padding-left:10px;font-size:20px;}
html body .mega--tri .mega-col a.mt3-inl-a:hover,html body .mega--tri .mega-col a.mt3-inl-a:focus-visible{color:#BFE3FF;}

/* Author credit under an article's date (26 Oct, Perspective Attribution Updates): the name in the text colour, the note
   in small muted italics beneath it; it sits between the date line and the tag chips. */
.pa-heading .pa-byline{margin:10px 0 0;}
.interior-v2 .pa .pa-byline p{max-width:none;}
.pa-heading .pa-byline-by{margin:0;font:600 15px/1.5 var(--f-body);color:#26292C;}
.pa-heading .pa-byline-note{margin:2px 0 0;font:italic 400 13.5px/1.5 var(--f-body);color:#6E7276;}

/* Spotlight holds still (27 Oct, Clayton): no scroll drift (fx.js) and no entrance fade or slide on its heading and
   cards, at every width; the gap between the main and side cards never changes. */
html body .ins-featured,html body .ins-featured :is(.reveal,.ins-main,.ins-side-list,.ins-side,.ins-main-media,.ins-side-media){
  opacity:1!important;transform:none!important;translate:none!important;animation:none!important;
}
html body .ins-featured .reveal{transition:none!important;}   /* the 200ms hover border/shadow on the cards stays */