/* ==========================================================================
   Easy Tech - About Us / Contact Us
   --------------------------------------------------------------------------
   New components only. Everything here is built from the same primitives as
   css.css: the fluid rem scale (1rem tracks the viewport), the .fNN type
   classes, #c8102e as the single accent, #f6f6f7 card surfaces, 1px #eee
   hairlines, square corners, and `all .5s ease-in-out` transitions.
   ========================================================================== */

/* --- vendor overrides --------------------------------------------------------
   Swiper ships its own accent (#007aff) and uses it for the navigation arrows,
   the pagination bullets and the scrollbar. It is a CSS variable, so one
   redefinition on :root retints every slider on the site.                     */
:root {
  --swiper-theme-color: #c8102e;
  --swiper-navigation-color: #c8102e;
  --swiper-pagination-color: #c8102e;
  --swiper-scrollbar-drag-bg-color: #9e0c24;
}

/* --- red-shifted photography -------------------------------------------------
   All the photography is blue-lit. Instead of editing or re-shooting files,
   each photo is composited as a brand-red duotone at display time: the image
   supplies luminosity, #c8102e supplies hue and saturation. Nothing on disk is
   touched and deleting this block restores the originals exactly.

   Scoped on purpose. Heroes and editorial photos only — partner brand logos,
   certification marks, the world map and the WeChat QR keep their real colours,
   because recolouring another company's mark would misrepresent it.           */
.banenr,
.IndexBox .serverBox .pic,
.IndexBox .advantageBox .pic,
.IndexBox .industryBox .pic,
.mainBox .introSplit .shot,
.tintMedia {
  background-color: #c8102e;
  isolation: isolate;
}

.banenr > picture img,
.IndexBox .serverBox .pic img,
.IndexBox .advantageBox .pic img,
.IndexBox .industryBox .pic img,
.mainBox .introSplit .shot img,
.tintMedia video {
  mix-blend-mode: luminosity;
}

/* the hero video needs its own backdrop to blend against; .rightBox is wider
   than the video, so the wrapper hugs it rather than showing red bars */
.tintMedia { display: inline-block; line-height: 0; max-width: 100%; }
.tintMedia video { display: block; max-width: 100%; }

/* --- wordmark ---------------------------------------------------------------
   The header and footer logos were raster artwork. Setting the name as text
   makes it real content — selectable, searchable, and it gives the home link
   an accessible name the old empty-alt image never had. Weight, case and
   tracking follow the original mark; colour is handled per placement below.  */
.logoText {
  display: inline-block;
  font-family: arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  /* letter-spacing trails the last glyph; pull it back so the mark sits flush */
  margin-right: -0.06em;
}

/* the container was sized for the old bitmap, so let the text set its own width */
.header .logo,
.footer .flogo { max-width: none; }

/* header: white over the hero, dark once the header turns light */
.header .logo .logoText {
  font-size: 0.3rem;
  color: #ffffff;
  transition: color 0.5s ease-in-out;
}
.header.white .logo .logoText,
.header.black .logo .logoText { color: #333333; }

/* footer sits on #f6f6f7, so the mark takes the brand red */
.footer .flogo .logoText { font-size: 0.34rem; color: #c8102e; }

@media screen and (max-width: 640px) {
  .header .logo .logoText { font-size: 0.28rem; }
  .footer .flogo .logoText { font-size: 0.3rem; }
}

/* --- header: room for the sixth nav item -----------------------------------
   The cloned nav was spaced for five top-level items. "Contact Us" makes six,
   which overflowed and wrapped the labels, so the per-item padding tightens on
   desktop only. The mobile drawer (<=1024px) is untouched.                    */
@media screen and (min-width: 1025px) {
  .header .navTop li span a { padding-left: 0.26rem; padding-right: 0.26rem; white-space: nowrap; }
  .header .lang > a { white-space: nowrap; }
}

/* --- shared section rhythm ------------------------------------------------ */
.mainBox .pgSection { padding: 1rem 0; }
.mainBox .pgSection.tint { background-color: #f6f6f7; }
.mainBox .pgHead { max-width: 9.6rem; margin-bottom: 0.6rem; }
.mainBox .pgHead.center { margin-left: auto; margin-right: auto; text-align: center; }
.mainBox .pgTitle { color: #333333; font-weight: bold; margin-bottom: 0.24rem; }
.mainBox .pgLead { color: #666666; line-height: calc(30 / 18); }

/* a hairline that carries the accent, used under section heads */
.mainBox .pgRule { width: 0.48rem; height: 3px; background-color: #c8102e; margin-bottom: 0.26rem; }
.mainBox .pgHead.center .pgRule { margin-left: auto; margin-right: auto; }

/* --- About: opening statement --------------------------------------------- */
/* the photo tracks the height of the copy beside it rather than floating short */
.mainBox .introSplit { gap: 0.8rem; align-items: stretch; }
.mainBox .introSplit .copy { width: 50%; }
.mainBox .introSplit .copy p { color: #666666; line-height: calc(32 / 18); margin-bottom: 0.24rem; }
.mainBox .introSplit .copy p:last-child { margin-bottom: 0; }
.mainBox .introSplit .shot { width: calc(50% - 0.8rem); position: relative; overflow: hidden; min-height: 4.2rem; }
.mainBox .introSplit .shot img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* the founding creed, lifted out of the paragraph flow */
.mainBox .creed { border-left: 3px solid #c8102e; padding-left: 0.28rem; margin: 0.36rem 0; }
.mainBox .creed .quote { color: #333333; font-weight: bold; line-height: calc(34 / 24); }
.mainBox .creed .who { color: #999999; margin-top: 0.12rem; }

/* --- About: figures band --------------------------------------------------- */
.mainBox .figureBand { background-color: #c8102e; color: #ffffff; }
.mainBox .figureBand .figureList { padding: 0.6rem 0; }
.mainBox .figureBand .figureList li {
  width: 25%; box-sizing: border-box; text-align: center; padding: 0 0.2rem;
  border-right: 1px solid rgba(255, 255, 255, 0.22); list-style-type: none;
}
.mainBox .figureBand .figureList li:last-child { border-right: 0; }
.mainBox .figureBand .figureList .num { font-weight: bold; margin-bottom: 0.1rem; display: block; }
.mainBox .figureBand .figureList .cap { color: rgba(255, 255, 255, 0.8); display: block; }

/* --- About: Our Journey ---------------------------------------------------
   A real chronology, so the years carry information and lead each row.       */
.mainBox .journey { position: relative; padding-left: 2.2rem; }
/* the rule runs through the centre of the markers: .stop starts at the 2.2rem
   padding edge and its marker is inset -0.05rem, so 2.2rem is that centre */
.mainBox .journey::before {
  content: ''; position: absolute; left: 2.2rem; top: 0.12rem; bottom: 0.12rem;
  width: 1px; background-color: #dddddd;
}
.mainBox .journey .stop { position: relative; padding: 0 0 0.5rem 0.5rem; list-style-type: none; }
.mainBox .journey .stop:last-child { padding-bottom: 0; }
.mainBox .journey .stop .year {
  position: absolute; left: -2.2rem; top: 0; width: 1.6rem;
  text-align: right; color: #c8102e; font-weight: bold;
}
.mainBox .journey .stop::before {
  content: ''; position: absolute; left: -0.05rem; top: 0.07rem;
  width: 0.1rem; height: 0.1rem; background-color: #c8102e;
  transition: all 0.5s ease-in-out;
}
.mainBox .journey .stop:hover::before { transform: scale(1.6); }
.mainBox .journey .stop .place { color: #333333; font-weight: bold; margin-bottom: 0.08rem; }
.mainBox .journey .stop .what { color: #666666; }

/* --- About: what guides us ------------------------------------------------- */
.mainBox .creedGrid { gap: 0.24rem; flex-wrap: wrap; }
.mainBox .creedGrid li {
  background-color: #ffffff; border: 1px solid #eeeeee; box-sizing: border-box;
  padding: 0.44rem 0.4rem; list-style-type: none; transition: all 0.5s ease-in-out;
}
.mainBox .creedGrid li:hover { border-color: #c8102e; box-shadow: 0 0.1rem 0.3rem rgba(200, 16, 46, 0.1); }
.mainBox .creedGrid li.wide { width: calc(50% - 0.12rem); }
.mainBox .creedGrid li.third { width: calc(33.333% - 0.16rem); }
/* The company icons ship as near-white artwork for dark panels. Masking keeps
   the original shapes and paints them in the brand red on a light card. */
.mainBox .creedGrid li .ico { height: 0.44rem; margin-bottom: 0.24rem; }
.mainBox .creedGrid li .ico .glyph {
  display: block; width: 0.44rem; height: 0.44rem;
  background-color: #c8102e;
  -webkit-mask: var(--glyph) no-repeat center center; -webkit-mask-size: contain;
  mask: var(--glyph) no-repeat center center; mask-size: contain;
  transition: all 0.5s ease-in-out;
}
.mainBox .creedGrid li:hover .ico .glyph { background-color: #9e0c24; }
.mainBox .creedGrid li .label { color: #333333; font-weight: bold; margin-bottom: 0.16rem; }
.mainBox .creedGrid li .body { color: #666666; line-height: calc(30 / 18); }

/* --- Global footprint / office directory ----------------------------------- */
.mainBox .region { margin-bottom: 0.6rem; }
.mainBox .region:last-child { margin-bottom: 0; }
.mainBox .region .regionName {
  color: #333333; font-weight: bold; padding-bottom: 0.18rem;
  border-bottom: 1px solid #dddddd; margin-bottom: 0.32rem;
}
.mainBox .region .regionName em { font-style: normal; color: #999999; font-weight: normal; margin-left: 0.12rem; }
.mainBox .officeGrid { gap: 0.24rem; flex-wrap: wrap; }
/* white cards with a hairline read the same on the tinted About section and the
   plain Contact one, so the directory looks identical on both pages */
.mainBox .officeGrid li {
  width: calc(33.333% - 0.16rem); box-sizing: border-box; list-style-type: none;
  background-color: #ffffff; border: 1px solid #eeeeee;
  padding: 0.32rem 0.3rem; transition: all 0.5s ease-in-out;
}
.mainBox .officeGrid li:hover { border-color: #c8102e; box-shadow: 0 0.1rem 0.3rem rgba(200, 16, 46, 0.1); }
.mainBox .officeGrid li .city { color: #333333; font-weight: bold; margin-bottom: 0.14rem; }
.mainBox .officeGrid li .addr { color: #666666; line-height: calc(28 / 16); min-height: 0.84rem; }
.mainBox .officeGrid li .addr.none { color: #999999; }
.mainBox .officeGrid li .mail { margin-top: 0.16rem; padding-top: 0.16rem; border-top: 1px solid #eeeeee; }
.mainBox .officeGrid li .mail a { color: #c8102e; }
.mainBox .officeGrid li .mail a:hover { text-decoration: underline; }

/* --- Contact: direct channels ---------------------------------------------- */
.mainBox .channelGrid { gap: 0.24rem; flex-wrap: wrap; }
.mainBox .channelGrid li {
  width: calc(25% - 0.18rem); box-sizing: border-box; list-style-type: none;
  border: 1px solid #eeeeee; padding: 0.44rem 0.36rem; text-align: center;
  transition: all 0.5s ease-in-out; position: relative;
}
.mainBox .channelGrid li:hover { border-color: #c8102e; box-shadow: 0 0.1rem 0.3rem rgba(200, 16, 46, 0.1); }
.mainBox .channelGrid li .ico {
  width: 0.72rem; height: 0.72rem; margin: 0 auto 0.24rem auto;
  background-color: #f6f6f7; display: flex; align-items: center; justify-content: center;
  transition: all 0.5s ease-in-out;
}
.mainBox .channelGrid li:hover .ico { background-color: #c8102e; }
/* masked so the shared footer icons read at brand red, then invert on hover */
.mainBox .channelGrid li .ico .glyph {
  display: block; width: 0.3rem; height: 0.3rem; background-color: #c8102e;
  -webkit-mask: var(--glyph) no-repeat center center; -webkit-mask-size: contain;
  mask: var(--glyph) no-repeat center center; mask-size: contain;
  transition: all 0.5s ease-in-out;
}
.mainBox .channelGrid li:hover .ico .glyph { background-color: #ffffff; }
.mainBox .channelGrid li .label { color: #999999; margin-bottom: 0.1rem; }
.mainBox .channelGrid li .value { color: #333333; font-weight: bold; word-break: break-word; display: block; }
.mainBox .channelGrid li a.value:hover { color: #c8102e; }
.mainBox .channelGrid li .qr { width: 1.06rem; margin: 0.14rem auto 0 auto; display: block; }

/* --- Contact: enquiry form -------------------------------------------------- */
.mainBox .enquiry { gap: 0.8rem; align-items: flex-start; }
.mainBox .enquiry .aside { width: 32%; }
.mainBox .enquiry .aside .pgLead { margin-bottom: 0.3rem; }
.mainBox .enquiry .aside .promise { list-style-type: none; }
.mainBox .enquiry .aside .promise li {
  color: #666666; padding-left: 0.28rem; position: relative; margin-bottom: 0.18rem;
}
.mainBox .enquiry .aside .promise li::before {
  content: ''; position: absolute; left: 0; top: 0.1rem;
  width: 0.08rem; height: 0.08rem; background-color: #c8102e;
}
/* named .formCol, not .form — the <form> element inside carries .form and would
   otherwise match this rule too and shrink a second time */
.mainBox .enquiry .formCol { width: calc(68% - 0.8rem); }
.mainBox .fieldRow { gap: 0.24rem; flex-wrap: wrap; margin-bottom: 0.24rem; }
.mainBox .field { width: calc(50% - 0.12rem); }
.mainBox .field.full { width: 100%; }
.mainBox .field label { display: block; color: #333333; margin-bottom: 0.1rem; }
.mainBox .field label .req { color: #f40500; margin-left: 0.04rem; }
.mainBox .field .control {
  width: 100%; box-sizing: border-box; border: 1px solid #eeeeee; background-color: #ffffff;
  height: 0.48rem; line-height: 0.48rem; padding: 0 0.2rem; color: #333333;
  font-family: arial, sans-serif; transition: all 0.5s ease-in-out;
}
.mainBox .field textarea.control { height: auto; line-height: calc(28 / 16); padding: 0.14rem 0.2rem; resize: vertical; }
.mainBox .field .control::placeholder { color: #999999; }
.mainBox .field .control:focus { outline: none; border-color: #c8102e; }
.mainBox .field .control:focus-visible { outline: 2px solid #c8102e; outline-offset: 1px; }
.mainBox .field.invalid .control { border-color: #f40500; }
.mainBox .field .err { color: #f40500; margin-top: 0.08rem; min-height: 0.2rem; display: block; }

.mainBox .formFoot { gap: 0.3rem; margin-top: 0.1rem; }
.mainBox .formNote { color: #999999; }
.mainBox button.Hmore { border: 0; cursor: pointer; font-family: arial, sans-serif; }
.mainBox button.Hmore[disabled] { opacity: 0.55; cursor: not-allowed; }

.mainBox .formMsg {
  padding: 0.22rem 0.26rem; margin-top: 0.24rem; border-left: 3px solid #c8102e;
  background-color: #f6f6f7; color: #333333;
}
.mainBox .formMsg.bad { border-left-color: #f40500; }

/* --- responsive ------------------------------------------------------------
   The same breakpoints css.css uses, so both stylesheets step together.      */
@media screen and (max-width: 1024px) {
  .mainBox .pgSection { padding: 0.8rem 0; }
  .mainBox .introSplit .copy,
  .mainBox .introSplit .shot { width: 100%; }
  .mainBox .introSplit { gap: 0.4rem; }
  .mainBox .creedGrid li.wide,
  .mainBox .creedGrid li.third { width: calc(50% - 0.12rem); }
  .mainBox .officeGrid li { width: calc(50% - 0.12rem); }
  .mainBox .channelGrid li { width: calc(50% - 0.12rem); }
  .mainBox .enquiry .aside,
  .mainBox .enquiry .formCol { width: 100%; }
  .mainBox .enquiry { gap: 0.4rem; }
}

@media screen and (max-width: 768px) {
  .mainBox .pgSection { padding: 0.6rem 0; }
  .mainBox .figureBand .figureList li { width: 50%; border-right: 0; padding: 0.2rem 0.1rem; }
  .mainBox .journey { padding-left: 0; }
  .mainBox .journey::before { left: 0.05rem; }
  .mainBox .journey .stop { padding-left: 0.4rem; }
  .mainBox .journey .stop .year { position: static; width: auto; text-align: left; display: block; margin-bottom: 0.06rem; }
  .mainBox .journey .stop::before { left: 0; }
  .mainBox .creedGrid li.wide,
  .mainBox .creedGrid li.third,
  .mainBox .officeGrid li,
  .mainBox .channelGrid li { width: 100%; }
  .mainBox .field { width: 100%; }
  .mainBox .officeGrid li .addr { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mainBox .journey .stop::before,
  .mainBox .creedGrid li,
  .mainBox .officeGrid li,
  .mainBox .channelGrid li,
  .mainBox .channelGrid li .ico,
  .mainBox .channelGrid li .ico img,
  .mainBox .field .control { transition: none; }
}