/* ==========================================================================
   About page styles.
   Layout source of truth: design/about.psd (+ design/about.jpg flat mockup),
   canvas 1920 x 8000. Copy source: 关于我们.docx.
   Every size / colour is measured from the design. All rules are scoped to
   .zxy-about-page so nothing leaks into other pages (Avada compatibility).
   ========================================================================== */

.zxy-about-page {
    --zxy-red: #a8343c;
    --zxy-gold: #e1cda0;
    --zxy-light-gold: #f0dbac;
    --zxy-dark: #181818;
    --zxy-navy: #04132b;
    --zxy-text: #353535;
    --zxy-muted: #bababa;
    --zxy-border: #d2d2d2;
    color: var(--zxy-text);
    font-size: 16px;
    line-height: 1.6;
    overflow: hidden;
}

.zxy-about-page{
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
}


.zxy-about-page h1,
.zxy-about-page h2,
.zxy-about-page h3,
.zxy-about-page p {
    margin-top: 0;
}

.zxy-about-page h1,
.zxy-about-page h2,
.zxy-about-page h3 {
    overflow-wrap: normal;
    text-wrap: balance;
    text-transform: none;
}

.zxy-about-page img {
    display: block;
    max-width: 100%;
}

.zxy-about-page a {
    color: inherit;
    text-decoration: none;
}

.zxy-about-page button,
.zxy-about-page input,
.zxy-about-page textarea {
    font: inherit;
}

.zxy-about-page button {
    color: inherit;
}

.zxy-about-page button:focus-visible,
.zxy-about-page a:focus-visible {
    outline: 2px solid var(--zxy-light-gold);
    outline-offset: 2px;
}

/* design eyebrows on this page are 16px (common.css ships 18px) */
.zxy-about-page .zxy-eyebrow {
    margin-bottom: 2px;
    font-size: min(16px, 0.833vw);
}

/* ==========================================================================
   1. Hero (design y 0 - 1082 : banner + stats band)
   ========================================================================== */

.zxy-about-page .zxy-about-hero {
    position: relative;
    height: min(1082px, 56.354vw);
    overflow: hidden;
    background: #111 url("../images/about-zxy-banner-bg.jpg") center center / cover no-repeat;
}

.zxy-about-page .zxy-about-hero-copy {
    position: absolute;
    top: min(394px, 20.521vw);
    left: 0;
    width: 100%;
    text-align: center;
}

.zxy-about-page .zxy-about-hero-copy h1 {
    margin-bottom: 0;
    color: #fff;
    /* 50px at 1920, tapering linearly down to 20px at 320 */
    font-size: clamp(20px, calc(14px + 1.875vw), 50px);
    font-weight: 500;
    line-height: 1.15;
}

.zxy-about-page .zxy-about-hero-copy p {
    margin-top: min(18px, 0.938vw);
    margin-bottom: 0;
    color: #fff;
    font-size: min(20px, 1.042vw);
    font-weight: 300;
    line-height: 1.5;
}

/* --- stats band (design y 846 - 1082, 1584 wide, flush with the hero bottom) --- */
.zxy-about-page .zxy-about-stats {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    width: min(1584px, 82.5vw);
    height: min(236px, 12.292vw);
}

.zxy-about-page .zxy-about-stats-white {
    display: flex;
    width: 78.283%;
    align-items: center;
    background: #fff;
}

.zxy-about-page .zxy-about-stat {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: min(12px, 0.625vw);
}

.zxy-about-page .zxy-about-stats-white .zxy-about-stat:nth-of-type(1) {
    width: 40.323%;
    padding-left: 16.935%;
}

.zxy-about-page .zxy-about-stats-white .zxy-about-stat:nth-of-type(2) {
    width: 33.145%;
    padding-left: 9.113%;
}

.zxy-about-page .zxy-about-stats-white .zxy-about-stat:nth-of-type(3) {
    width: 26.532%;
    padding-left: 7.016%;
}

.zxy-about-page .zxy-about-stat img {
    width: min(60px, 3.125vw);
    height: min(60px, 3.125vw);
    flex: 0 0 auto;
    object-fit: contain;
}

.zxy-about-page .zxy-about-stat p {
    margin-bottom: 0;
    line-height: 1.2;
}

/* animated counter + its suffix ("+", " m²") share the number styling */
.zxy-about-page .zxy-about-stat .numb {
    display: inline-block;
    color: var(--zxy-red);
    font-size: min(24px, 1.25vw);
    font-weight: 600;
    line-height: 1.15;
}

.zxy-about-page .zxy-about-stat .numb-suffix {
    color: var(--zxy-red);
    font-size: min(24px, 1.25vw);
    font-weight: 600;
}

/* the caption is always the last span of the row */
.zxy-about-page .zxy-about-stat p > span:last-child {
    display: block;
    margin-top: min(4px, 0.208vw);
    max-width: min(160px, 8.333vw);
    color: #3d3d3d;
    font-size: min(16px, 0.833vw);
    font-weight: 400;
}

.zxy-about-page .zxy-about-stat-divider {
    display: block;
    width: min(3px, 0.156vw);
    height: min(79px, 4.115vw);
    flex: 0 0 auto;
    background: #eaeaea;
}

.zxy-about-page .zxy-about-stat--accent {
    width: 21.717%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--zxy-red);
    text-align: center;
}

.zxy-about-page .zxy-about-stat--accent .numb,
.zxy-about-page .zxy-about-stat--accent .numb-suffix {
    color: var(--zxy-gold);
    font-size: min(36px, 1.875vw);
    font-weight: 500;
}

.zxy-about-page .zxy-about-stat--accent p > span:last-child {
    margin-top: min(5px, 0.26vw);
    max-width: none;
    color: #dae3ef;
    font-size: min(24px, 1.25vw);
    font-weight: 300;
}

/* ==========================================================================
   2. From design to operation (design y 1082 - 2566)
   ========================================================================== */

.zxy-about-page .zxy-about-do {
    padding-top: min(138px, 7.188vw);
    padding-bottom: min(133px, 6.927vw);
    background: #fff;
}

.zxy-about-page .zxy-about-do-heading {
    margin-bottom: 0;
    color: #2d2d2d;
    font-size: min(40px, 2.083vw);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.zxy-about-page .zxy-about-do-rows {
    display: grid;
    margin-top: min(75px, 3.906vw);
    gap: min(78px, 4.063vw);
}

.zxy-about-page .zxy-about-do-row {
    display: flex;
    align-items: flex-start;
}

.zxy-about-page .zxy-about-do-media {
    width: 63.933%;
    flex: 0 0 auto;
    margin-left: calc(50% - 50vw);
}

.zxy-about-page .zxy-about-do-media img {
    width: 100%;
    aspect-ratio: 960 / 505;
    object-fit: cover;
}

.zxy-about-page .zxy-about-do-copy {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    padding-top: min(45px, 2.344vw);
    padding-left: 1.867%;
    gap: min(60px, 3.125vw);
}

.zxy-about-page .zxy-about-do-row--reverse .zxy-about-do-copy {
    flex: 0 0 48%;
    padding-top: min(28px, 1.458vw);
    padding-left: 6.2%;
}

.zxy-about-page .zxy-about-do-row--reverse .zxy-about-do-media {
    margin-right: calc(50% - 50vw);
    margin-left: 2.467%;
}

/* number in column 1, title / rule in column 2, body across both */
.zxy-about-page .zxy-about-do-item {
    display: grid;
    grid-template-columns: min(95px, 4.948vw) minmax(0, 1fr);
    align-items: start;
}

.zxy-about-page .zxy-about-do-index {
    margin-bottom: 0;
    color: #e4e4e4;
    font-size: min(45px, 2.344vw);
    font-weight: 500;
    line-height: 1;
    grid-column: 1;
    grid-row: 1;
}

.zxy-about-page .zxy-about-do-title {
    margin-bottom: 0;
    color: var(--zxy-red);
    font-size: min(30px, 1.563vw);
    font-weight: 500;
    line-height: 1.2;
    grid-column: 2;
    grid-row: 1;
}

/* two-tone rule under the title: 73px red + 262px light grey */
.zxy-about-page .zxy-about-do-rule {
    display: block;
    width: min(335px, 17.448vw);
    height: min(3px, 0.156vw);
    margin-top: 4px;
    background: linear-gradient(to right, var(--zxy-red) 0 21.79%, #e4e4e4 21.79% 100%);
    grid-column: 2;
    grid-row: 2;
}

.zxy-about-page .zxy-about-do-text {
    max-width: min(661px, 34.427vw);
    margin-bottom: 0;
    padding-top: min(46px, 2.396vw);
    color: #535353;
    font-size: min(16px, 0.833vw);
    font-weight: 400;
    line-height: 1.875;
    grid-column: 1 / -1;
    grid-row: 3;
}

/* ==========================================================================
   3. Our journey — looping Swiper carousel (design y 2566 - 3590, red band)
   ========================================================================== */

.zxy-about-page .zxy-about-history {
    padding-top: min(104px, 5.417vw);
    padding-bottom: min(193px, 10.052vw);
    background: var(--zxy-red);
    color: #fff;
}

.zxy-about-page .zxy-about-history-heading {
    margin-bottom: 0;
    color: #fff;
    font-size: min(40px, 2.083vw);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.zxy-about-page .zxy-about-history-sub {
    margin-top: min(23px, 1.198vw);
    margin-bottom: 0;
    font-size: min(16px, 0.833vw);
    font-weight: 300;
    line-height: 1.4;
    text-align: center;
}

.zxy-about-page .zxy-about-history-inner {
    position: relative;
    margin-top: min(102px, 5.313vw);
}

.zxy-about-page .zxy-about-history-swiper {
    overflow: hidden;
}

.zxy-about-page .zxy-about-history-body {
    display: flex;
    align-items: flex-start;
}

.zxy-about-page .zxy-about-history-media {
    width: 43.933%;
    flex: 0 0 auto;
}

.zxy-about-page .zxy-about-history-media img {
    width: 100%;
    aspect-ratio: 655 / 390;
    object-fit: cover;
    background: #fff;
}

.zxy-about-page .zxy-about-history-copy {
    min-width: 0;
    flex: 1 1 auto;
    padding-top: min(64px, 3.333vw);
    padding-left: 7.133%;
}

.zxy-about-page .zxy-about-history-copy h3 {
    margin-bottom: 0;
    color: #fff;
    font-size: min(24px, 1.25vw);
    font-weight: 500;
    line-height: 1.5;
}

.zxy-about-page .zxy-about-history-copy p {
    margin-top: min(42px, 2.188vw);
    margin-bottom: 0;
    color: #fff;
    font-size: min(16px, 0.833vw);
    font-weight: 300;
    line-height: 1.625;
}

/* circular prev / next controls sit outside the container and are centred
   vertically on the timeline line */
.zxy-about-page .zxy-about-history-arrow {
    position: absolute;
    top: calc(var(--zxy-history-dot) / 2);
    display: grid;
    width: min(51px, 2.656vw);
    height: min(51px, 2.656vw);
    padding: 0;
    border: 1px solid #fff;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    place-items: center;
    transform: translateY(-50%);
    z-index: 2;
}

.zxy-about-page .zxy-about-history-arrow--prev {
    left: min(-87px, -4.531vw);
}

.zxy-about-page .zxy-about-history-arrow--next {
    right: min(-85px, -4.427vw);
    border-color: var(--zxy-gold);
    background: var(--zxy-gold);
}

.zxy-about-page .zxy-about-history-arrow span {
    width: min(7px, 0.365vw);
    height: min(7px, 0.365vw);
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    transform: rotate(-45deg);
}

.zxy-about-page .zxy-about-history-arrow--next span {
    border-top: 0;
    border-left: 0;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(-45deg);
}

/* --- year timeline = Swiper pagination --- */
.zxy-about-page .zxy-about-history-timeline {
    /* single source of truth for the dot size: the rule and the two round
       buttons centre themselves on it, so they stay aligned at every width */
    --zxy-history-dot: min(15px, 0.781vw);
    position: relative;
    margin-top: min(77px, 4.01vw);
}

.zxy-about-page .zxy-about-history-line {
    position: absolute;
    top: calc((var(--zxy-history-dot) - min(4px, 0.208vw)) / 2);
    left: calc(50% + min(24px, 1.25vw));
    width: min(1636px, 85.208vw);
    height: min(4px, 0.208vw);
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(-50%);
}

/* the timeline itself is a swiper: desktop fits all 8 milestones, smaller
   screens fit fewer and the rest can be swiped */
.zxy-about-page .zxy-about-history-years-swiper {
    width: min(1256px, 65.417vw, 100%);
    margin-right: auto;
    margin-left: auto;
    transform: translateX(min(24px, 1.25vw));overflow: visible;
}

.zxy-about-page .zxy-about-history-year-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 1;
}

.zxy-about-page .zxy-about-history-dot {
    display: block;
    width: var(--zxy-history-dot);
    height: var(--zxy-history-dot);
    border-radius: 50%;
    background: #fff;
}

.zxy-about-page .zxy-about-history-year-item.is-active .zxy-about-history-dot {
    background: #f8b300;
    animation: witr_squarest 2s linear infinite;
}
@keyframes witr_squarest {
  0% {
    box-shadow: 0 0 0 0 rgba(248, 179, 0, 0.5),
      0 0 0 3px rgba(248, 179, 0, 0.5), 0 0 0 6px rgba(248, 179, 0, 0.5);
  }

  100% {
    box-shadow: 0 0 0 3px rgba(248, 179, 0, 0.5),
      0 0 0 6px rgba(248, 179, 0, 0.5), 0 0 0 9px rgba(255, 255, 255, 0);
  }
}
.zxy-about-page .zxy-about-history-year {
    margin-top: 6px;
    font-size: min(16px, 0.833vw);
    font-style: normal;
    font-weight: 300;
    line-height: 1.4;
}

/* ==========================================================================
   4. Manufacturing strength — photo collage (design y 3590 - 4560)
   Design canvas: container x 0-1500 (page x 210-1710), y 3739-4441 = 1500 x 702.
   ========================================================================== */

.zxy-about-page .zxy-about-team {
    padding-top: min(149px, 7.76vw);
    padding-bottom: min(130px, 6.771vw);
    background: #fff;
}

.zxy-about-page .zxy-about-team-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1500 / 702;
}

.zxy-about-page .zxy-about-team-photo {
    position: absolute;
    border-radius: min(12px, 0.625vw);
    overflow: hidden;
}

.zxy-about-page .zxy-about-team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zxy-about-page .zxy-about-team-photo--a {
    left: 0;
    top: 0.285%;
    width: 39.2%;
    height: 48.718%;
}

.zxy-about-page .zxy-about-team-photo--b {
    left: 70.2%;
    top: 0.142%;
    width: 29.8%;
    height: 42.308%;
}

.zxy-about-page .zxy-about-team-photo--c {
    left: 0;
    top: 51.852%;
    width: 39.2%;
    height: 48.006%;
}

.zxy-about-page .zxy-about-team-photo--d {
    left: 40.733%;
    top: 44.302%;
    width: 59.267%;
    height: 55.698%;
}

.zxy-about-page .zxy-about-team-copy {
    position: absolute;
    left: 41.6%;
    top: 2.564%;
    width: 27.133%;
}

.zxy-about-page .zxy-about-team-copy .zxy-eyebrow {
    margin-bottom: min(13px, 0.677vw);
    color: var(--zxy-red);
}

.zxy-about-page .zxy-about-team-copy h2 {
    margin-bottom: 0;
    color: #282828;
    font-size: min(26px, 1.563vw);
    font-weight: 600;
    line-height: 1.167;
}

.zxy-about-page .zxy-about-team-copy > p:last-child {
    margin-top: min(12px, 0.625vw);
    margin-bottom: 0;
    color: #454545;
    font-size: min(15px, 0.833vw);
    font-weight: 400;
    line-height: 1.575;
}

/* ==========================================================================
   5. Certifications & quality assurance (design y 4560 - 5493)
   ========================================================================== */

.zxy-about-page .zxy-about-cert {
    padding-bottom: min(149px, 7.76vw);
    background: #fff;
}

.zxy-about-page .zxy-about-cert .zxy-eyebrow,
.zxy-about-page .zxy-about-cert-eyebrow {
    color: var(--zxy-red);
    text-align: center;
}

.zxy-about-page .zxy-about-cert h2 {
    margin-bottom: 0;
    color: #082845;
    font-size: min(40px, 2.083vw);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.zxy-about-page .zxy-about-cert-media {
    position: relative;
    margin-top: min(68px, 3.542vw);
}

/* full-bleed champagne band behind the certificate grid */
.zxy-about-page .zxy-about-cert-band {
    position: absolute;
    top: 24.596%;
    left: 50%;
    width: 100vw;
    height: 56.472%;
    background: var(--zxy-gold);
    transform: translateX(-50%);
}

.zxy-about-page .zxy-about-cert-grid {
    position: relative;
    display: grid;
    width: 93.533%;
    margin: 0 auto;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: min(22px, 1.146vw) min(19px, 0.99vw);
}

.zxy-about-page .zxy-about-cert-grid img {
    width: 100%;
    aspect-ratio: 218 / 298;
    object-fit: cover;
}

/* ==========================================================================
   6. Global projects & customer visits — two opposite marquee rows
   (design y 5493 - 6438)
   ========================================================================== */

.zxy-about-page .zxy-about-visit {
    padding-bottom: min(92px, 4.792vw);
    position: relative;
}
.zxy-about-page .zxy-about-visit::before{
  content: "";
  width: 100%;
  height: 70%;
  background-color: var(--zxy-red);
  position: absolute;
  left: 0;
  top: 0;
}
.zxy-about-page .zxy-about-visit-band {
    padding-top: min(65px, 3.385vw);
    padding-bottom:12px;
    position: relative;
    z-index:2;
    
}
.zxy-about-page .zxy-container{
        position: relative;
    z-index:2;
} 
.zxy-about-page .zxy-about-visit-eyebrow {
    color: #fff;
    text-align: center;
}

.zxy-about-page .zxy-about-visit-band h2 {
    margin-bottom: 0;
    color: var(--zxy-gold);
    font-size: min(40px, 2.083vw);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

/* two photo rows scrolling in opposite directions; the top row overlaps the
   red band exactly as the design's first row does */


/* ==========================================================================
   7. Contact (design y 6438 - 7525)
   ========================================================================== */

.zxy-about-page .zxy-about-contact {
    position: relative;
    z-index: 2;
    height: min(787px, 40.99vw);
    background: #1e1f21;
    color: #fff;
}

.zxy-about-page .zxy-about-contact::before {
    position: absolute;
    inset: 0;
    background: url("../images/about-zxy-item7-bg.jpg") center center / cover no-repeat;
    content: "";
    opacity: 0.12;
    pointer-events: none;
}

.zxy-about-page .zxy-about-contact-head {
    position: relative;
    padding-top: min(114px, 5.938vw);
    text-align: center;
}

.zxy-about-page .zxy-about-contact-head h2 {
    margin-bottom: 0;
    color: var(--zxy-gold);
    font-size: min(40px, 2.083vw);
    font-weight: 600;
    line-height: 1.15;
}

.zxy-about-page .zxy-about-contact-head p {
    margin-top: min(31px, 1.615vw);
    margin-bottom: 0;
    color: #fff;
    font-size: min(18px, 0.938vw);
    font-weight: 300;
    line-height: 1.5;
}

.zxy-about-page .zxy-about-contact-panel {
    position: absolute;
    top: min(309px, 16.094vw);
    left: 50%;
    width: min(1591px, 82.865vw);
    padding: min(71px, 3.698vw) 0 min(65px, 3.385vw);
    border-radius: min(30px, 1.5625vw);
    background: rgba(255, 255, 255, 0.6);
    transform: translateX(-50%);
}

.zxy-about-page .zxy-about-contact-card {
    display: flex;
    width: 88.372%;
    margin: 0 auto;
    padding: 45px 45px 46px 56px;
    align-items: flex-start;
    gap: min(62px, 3.229vw);
    border-radius: min(24px, 1.25vw);
    background: #fff;
}

/* the form box is intentionally empty — content and styling are added later */
.zxy-about-page .zxy-about-form {
    min-width: 0;
    flex: 1 1 auto;
}

.zxy-about-page .zxy-about-map {
    width: 38.391%;
    flex: 0 0 auto;
    aspect-ratio: 501 / 553;
    overflow: hidden;
    background: #e8ecef;
}

.zxy-about-page .zxy-about-map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   8. Ready to work with us (design y 7225 - 8000, red)
   ========================================================================== */

.zxy-about-page .zxy-about-footer {
    position: relative;
    z-index: 1;
    padding-top: min(425px, 22.135vw);
    padding-bottom: min(209px, 10.885vw);
    background: var(--zxy-red);
    color: #fff;
    text-align: center;
}

.zxy-about-page .zxy-about-footer h2 {
    margin-bottom: 0;
    color: var(--zxy-light-gold);
    font-size: min(18px, 0.938vw);
    font-weight: 500;
    line-height: 1.4;
}

.zxy-about-page .zxy-about-footer-contact {
    display: flex;
    margin-top: min(20px, 1.042vw);
    align-items: center;
    justify-content: center;
    gap: min(54px, 2.812vw);
}

.zxy-about-page .zxy-about-footer-mail {
    display: grid;
    width: min(44px, 2.292vw);
    height: min(44px, 2.292vw);
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    place-items: center;
}

.zxy-about-page .zxy-about-footer-mail svg {
    width: min(25px, 1.302vw);
    height: auto;
    color: #fff;
}

.zxy-about-page .zxy-about-footer-contact a {
    font-size: min(30px, 1.563vw);
    font-weight: 500;
    line-height: 1.2;
}

.zxy-about-page .zxy-about-footer-contact a:hover {
    color: var(--zxy-light-gold);
}

.zxy-about-page .zxy-about-footer-divider {
    display: block;
    height: min(3px, 0.156vw);
    margin-top: min(49px, 2.552vw);
    background: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   Responsive — 1199px / 767px / 420px (same breakpoints as common.css)
   ========================================================================== */

/* 768-1400 px: this section's absolute mosaic cannot hold the copy once the column
   narrows. Measured overlap of the copy over photo D: +92.7 px at 1024, +244.4 px at 768
   (at 768 the text even left the section by 8.9 px), +25.5 px at 1200 and +13.2 px at
   1280 - the body copy jumps to 16 px and the heading dips to 18.8 px in that range.
   Below 1400 px it becomes a copy-on-top + 2x2 collage; phones (<=767) fall back to a
   single column. From 1400 px up the design's mosaic is untouched (the crossover is
   between 1280 and 1366). */
@media (max-width: 1400px) {
    .zxy-about-page .zxy-about-team-canvas {
        display: grid;
        aspect-ratio: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .zxy-about-page .zxy-about-team-photo,
    .zxy-about-page .zxy-about-team-copy {
        position: static;
        width: 100%;
        height: auto;
        margin: 0;
    }

    .zxy-about-page .zxy-about-team-copy {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .zxy-about-page .zxy-about-team-photo--a {
        grid-column: 1;
        grid-row: 2;
    }

    .zxy-about-page .zxy-about-team-photo--b {
        grid-column: 2;
        grid-row: 2;
    }

    .zxy-about-page .zxy-about-team-photo--c {
        grid-column: 1;
        grid-row: 3;
    }

    .zxy-about-page .zxy-about-team-photo--d {
        grid-column: 2;
        grid-row: 3;
    }

    .zxy-about-page .zxy-about-team-photo img {
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }
}

@media (max-width: 1199px) {
    .zxy-about-page .zxy-about-hero {
        height: 56.354vw;
    }

    /* hero h1 and section h2 sizes now come from the base rules, which
       already taper with the viewport */

    .zxy-about-page .zxy-about-do-heading,
    .zxy-about-page .zxy-about-history-heading,
    .zxy-about-page .zxy-about-cert h2,
    .zxy-about-page .zxy-about-visit-band h2 {
        font-size: clamp(24px, 2.6vw, 32px);
    }

    .zxy-about-page .zxy-about-do-index {
        font-size: clamp(30px, 3.4vw, 38px);
    }

    .zxy-about-page .zxy-about-do-title,
    .zxy-about-page .zxy-about-team-copy h2 {
        font-size: clamp(20px, 2.1vw, 24px);
    }

    .zxy-about-page .zxy-about-do-item {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .zxy-about-page .zxy-about-do-text,
    .zxy-about-page .zxy-about-team-copy > p:last-child,
    .zxy-about-page .zxy-about-history-copy p,
    .zxy-about-page .zxy-about-history-sub,
    .zxy-about-page .zxy-eyebrow {
        font-size: 14px;
    }

    .zxy-about-page .zxy-about-stat .numb,
    .zxy-about-page .zxy-about-stat .numb-suffix {
        font-size: 18px;
    }

    .zxy-about-page .zxy-about-stat p > span:last-child {
        max-width: 160px;
        font-size: 13px;
    }

    .zxy-about-page .zxy-about-stat--accent .numb,
    .zxy-about-page .zxy-about-stat--accent .numb-suffix {
        font-size: 24px;
    }

    .zxy-about-page .zxy-about-stat--accent p > span:last-child {
        font-size: 15px;
    }

    .zxy-about-page .zxy-about-history-arrow--prev {
        left: 0;
    }

    .zxy-about-page .zxy-about-history-arrow--next {
        right: 0;
    }

    .zxy-about-page .zxy-about-history-years-swiper {
        width: 100%;
    }

    .zxy-about-page .zxy-about-contact-head h2 {
        font-size: 30px;
    }

    .zxy-about-page .zxy-about-contact-head p {
        font-size: 16px;
    }

    .zxy-about-page .zxy-about-contact {
        height: auto;
        padding-bottom: 56px;
    }

    .zxy-about-page .zxy-about-contact-panel {
        position: relative;
        top: auto;
        left: auto;
        width: calc(100% - 40px);
        margin: 50px auto 0;
        transform: none;
    }

    .zxy-about-page .zxy-about-contact-card {
        width: auto;
        margin: 0 24px;
        padding: 34px 28px;
        gap: 28px;
    }

    .zxy-about-page .zxy-about-footer {
        padding-top: 220px;
        padding-bottom: 90px;
    }

    .zxy-about-page .zxy-about-footer h2 {
        font-size: 17px;
    }

    .zxy-about-page .zxy-about-footer-contact a {
        font-size: 22px;
    }

    .zxy-about-page .zxy-about-footer-mail {
        width: 40px;
        height: 40px;
    }

    .zxy-about-page .zxy-about-footer-mail svg {
        width: 22px;
    }
}

@media (max-width: 767px) {
    .zxy-about-page .zxy-about-hero {
        height: auto;
        min-height: 0;
        padding: clamp(132px, 24vw, 200px) 0 0;
    }

    .zxy-about-page .zxy-about-hero-copy {
        position: static;
        padding: 0 20px 54px;
    }

    .zxy-about-page .zxy-about-hero-copy p {
        margin-top: 8px;
        font-size: 14px;
    }


    .zxy-about-page .zxy-about-stats {
        position: static;
        bottom: auto;
        width: 100%;
        height: auto;
        flex-direction: column;
    }

    .zxy-about-page .zxy-about-stats-white {
        display: grid;
        width: 100%;
        padding: 22px 20px;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .zxy-about-page .zxy-about-stats-white .zxy-about-stat {
        align-items: flex-start;
        gap: 12px;
    }

    /* the desktop rows are written as :nth-of-type(1|2|3), i.e. specificity (0,4,0), so
       they outrank the plain override above. They have to be neutralised the same way:
       otherwise each row keeps its share of the band (40.3 / 33.1 / 26.5 %) plus a
       16.9 / 9.1 / 7.0 % left inset, which left the rows 157 / 129 / 103 px wide on a
       phone and pushed every caption onto three lines. */
    .zxy-about-page .zxy-about-stats-white .zxy-about-stat:nth-of-type(1),
    .zxy-about-page .zxy-about-stats-white .zxy-about-stat:nth-of-type(2),
    .zxy-about-page .zxy-about-stats-white .zxy-about-stat:nth-of-type(3) {
        width: 100%;
        padding-left: 0;
    }

    /* icon belongs on the number's line, not centred against the wrapped caption */
    .zxy-about-page .zxy-about-stat img {
        align-self: flex-start;
        width: 20px;
        height: 20px;
        margin-top: 1px;
    }

    .zxy-about-page .zxy-about-stat p > span:last-child {
        max-width: none;
    }

    .zxy-about-page .zxy-about-stat-divider {
        display: none;
    }

    .zxy-about-page .zxy-about-stat--accent {
        width: 100%;
        padding: 18px 0;
    }

    .zxy-about-page .zxy-about-do {
        padding-top: 52px;
        padding-bottom: 56px;
    }

    .zxy-about-page .zxy-about-team {
        padding-top: 52px;
        padding-bottom: 52px;
    }

    .zxy-about-page .zxy-about-do-heading,
    .zxy-about-page .zxy-about-history-heading,
    .zxy-about-page .zxy-about-cert h2,
    .zxy-about-page .zxy-about-visit-band h2 {
        font-size: 22px;
    }

    .zxy-about-page .zxy-about-do-rows {
        margin-top: 30px;
        gap: 40px;
    }

    .zxy-about-page .zxy-about-do-row,
    .zxy-about-page .zxy-about-do-row--reverse {
        display: block;
    }

    /* the 2nd row's image is shown BEFORE its copy so it lands between item 02 and item 03 */
    .zxy-about-page .zxy-about-do-row--reverse {
        display: flex;
        flex-direction: column-reverse;
    }

    .zxy-about-page .zxy-about-do-row--reverse .zxy-about-do-media,
    .zxy-about-page .zxy-about-do-row--reverse .zxy-about-do-copy {
        width: 100%;
        flex: 0 0 auto;
    }

    .zxy-about-page .zxy-about-do-media,
    .zxy-about-page .zxy-about-do-row--reverse .zxy-about-do-media {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    .zxy-about-page .zxy-about-do-copy,
    .zxy-about-page .zxy-about-do-row--reverse .zxy-about-do-copy {
        width: auto;
        padding-top: 26px;
        padding-left: 0;
        gap: 34px;
    }

    /* gap between that image and the module below it */
    .zxy-about-page .zxy-about-do-row--reverse .zxy-about-do-copy {
        padding-top: 34px;
    }

    .zxy-about-page .zxy-about-do-row + .zxy-about-do-row {
        margin-top: 0;
    }

    .zxy-about-page .zxy-about-do-item {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .zxy-about-page .zxy-about-do-index {
        font-size: 30px;
    }

    .zxy-about-page .zxy-about-do-title {
        font-size: 18px;
    }

    .zxy-about-page .zxy-about-do-rule {
        width: 100%;
        max-width: 335px;
    }

    .zxy-about-page .zxy-about-do-text {
        max-width: none;
        padding-top: 16px;
        font-size: 14px;
        line-height: 1.7;
    }

    .zxy-about-page .zxy-about-history {
        padding-top: 52px;
        padding-bottom: 60px;
    }

    .zxy-about-page .zxy-about-history-sub {
        margin-top: 12px;
        font-size: 13px;
    }

    .zxy-about-page .zxy-about-history-inner {
        margin-top: 36px;
    }

    .zxy-about-page .zxy-about-history-body {
        display: block;
    }

    .zxy-about-page .zxy-about-history-media,
    .zxy-about-page .zxy-about-history-copy {
        width: 100%;
        padding-left: 0;
        padding-top: 0;
    }

    .zxy-about-page .zxy-about-history-copy {
        padding-top: 22px;
    }

    .zxy-about-page .zxy-about-history-copy h3 {
        font-size: 18px;
        line-height: 1.4;
    }

    .zxy-about-page .zxy-about-history-copy p {
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.7;
    }

    .zxy-about-page .zxy-about-history-arrow {
        display: none;
    }

    .zxy-about-page .zxy-about-history-timeline {
        --zxy-history-dot: 11px;
        margin-top: 34px;
    }

    .zxy-about-page .zxy-about-history-years-swiper {
        width: 100%;
        transform: none;
    }

    .zxy-about-page .zxy-about-history-line {
        left: 50%;
        width: 100%;
    }

    .zxy-about-page .zxy-about-history-year {
        margin-top: 6px;
        font-size: 12px;
    }

    /* photo collage becomes a simple stack */
    .zxy-about-page .zxy-about-team-canvas {
        display: block;
        aspect-ratio: auto;
    }

    .zxy-about-page .zxy-about-team-photo,
    .zxy-about-page .zxy-about-team-copy {
        position: static;
        width: 100%;
        height: auto;
    }

    .zxy-about-page .zxy-about-team-photo img {
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .zxy-about-page .zxy-about-team-photo--b,
    .zxy-about-page .zxy-about-team-photo--c,
    .zxy-about-page .zxy-about-team-photo--d {
        margin-top: 14px;
    }

    .zxy-about-page .zxy-about-team-copy {
        margin-top: 22px;
    }

    .zxy-about-page .zxy-about-team-copy h2 {
        font-size: 21px;
    }

    .zxy-about-page .zxy-about-team-copy > p:last-child {
        font-size: 14px;
        line-height: 1.7;
    }

    .zxy-about-page .zxy-about-cert {
        padding-bottom: 52px;
    }

    .zxy-about-page .zxy-about-cert-media {
        margin-top: 30px;
    }

    .zxy-about-page .zxy-about-cert-band {
        top: 21%;
        height: 58%;
    }

    .zxy-about-page .zxy-about-cert-grid {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .zxy-about-page .zxy-about-visit {
        padding-bottom: 52px;
    }

    .zxy-about-page .zxy-about-visit-band {
        padding-top: 36px;
        padding-bottom: 78px;
    }

    .zxy-about-page .zxy-about-contact {
        padding-bottom: 36px;
    }

    .zxy-about-page .zxy-about-contact-head {
        padding-top: 42px;
    }

    .zxy-about-page .zxy-about-contact-head h2 {
        font-size: 24px;
    }

    .zxy-about-page .zxy-about-contact-head p {
        font-size: 14px;
    }

    .zxy-about-page .zxy-about-contact-panel {
        width: calc(100% - 24px);
        margin-top: 28px;
        padding: 18px 0;
    }

    .zxy-about-page .zxy-about-contact-card {
        display: block;
        margin: 0 14px;
        padding: 20px 16px;
    }

    .zxy-about-page .zxy-about-map {
        width: 100%;
        margin-top: 20px;
    }

    .zxy-about-page .zxy-about-footer {
        padding-top: 110px;
        padding-bottom: 60px;
    }

    .zxy-about-page .zxy-about-footer-contact {
        gap: 16px;
    }

    .zxy-about-page .zxy-about-footer-contact a {
        font-size: 16px;
    }

    .zxy-about-page .zxy-about-footer-divider {
        margin-top: 32px;
    }
}

@media (max-width: 420px) {
    .zxy-about-page .zxy-about-hero {
        height: auto;
    }

    .zxy-about-page .zxy-about-footer-contact a {
        font-size: 14px;
    }
}




.access-box {
  width: 100%;
}

.scroller__inner {
  display: flex;
  gap: 1rem;
  padding-block: 1rem;
  flex-wrap: wrap;
}

.access-box[data-animated="true"] {
  overflow: hidden;
  /* mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent); */
}

.access-box[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 100s) var(--_animation-direction, normal) linear infinite;    padding: 0;
}

.access-box[data-duration="fast"] {
  --_animation-duration: 80s;
}

.access-box[data-duration="slow"] {
  --_animation-duration: 100s;
}

.access-box[data-direction="right"] {
  --_animation-direction: reverse;
}

.access-box[data-direction="left"] {
  --_animation-direction: normal;
}

@keyframes scroll {
  to {
    transform: translateX(calc(-50% - 0.5rem));
  }
}

.access-box .img {
  width: 280px;
  height: auto;    list-style: none;
}