/* ============================================================
   Mandala Microsite — styles
   Plain CSS, no build step. Desktop-first (1440), breakpoints:
   tablet 744–1279, mobile <744.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "CircularXX";
  src: url("/en-au/economic-impact-report/assets/fonts/CircularXXWeb-Regular.fc3a9ae2.woff2") format("woff2"),
       url("/en-au/economic-impact-report/assets/fonts/CircularXXWeb-Regular.e3fab94c.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CircularXX";
  src: url("/en-au/economic-impact-report/assets/fonts/CircularXXWeb-Medium.2d463e33.woff2") format("woff2"),
       url("/en-au/economic-impact-report/assets/fonts/CircularXXWeb-Medium.562c13f2.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CircularXX";
  src: url("/en-au/economic-impact-report/assets/fonts/CircularXXWeb-Bold.ff7495d2.woff2") format("woff2"),
       url("/en-au/economic-impact-report/assets/fonts/CircularXXWeb-Bold.204a596e.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens (from Figma variables) ---------- */
:root {
  --font-sans: "CircularXX", "Helvetica Neue", Arial, sans-serif;

  --black: #000000;
  --white: #ffffff;
  --gray-100: #14171a; /* text primary */
  --gray-90: #1b1f21;
  --gray-80: #2b2f33;
  --gray-70: #4c5259;
  --gray-60: #68707a;  /* text secondary */
  --gray-50: #878e99;
  --gray-30: #d0d4d9;
  --gray-20: #e8eaed;
  --gray-10: #f5f6f7;
  --gray-5: #fafafb;
  --orange-40: #ff8e3c;
  --orange-30: #ffb27a;
  --orange-20: #ffd9bd;
  --red: #ff4f42;

  --gradient-brand: linear-gradient(178.5deg, #ff4f42 0%, #ff8e3c 100%);

  /* type scale */
  --type-hero: 65px;
  --type-h2: 50px;
  --type-h3: 28px;
  --type-h4: 20px;
  --type-body: 16px;
  --type-label: 14px;
  --type-caption: 12px;

  /* spacing scale */
  --s8: 8px;
  --s16: 16px;
  --s24: 24px;
  --s32: 32px;
  --s48: 48px;
  --s64: 64px;
  --s80: 80px;
  --s96: 96px;
  --s128: 128px;
  --s160: 160px;

  --radius-md: 8px;
  --radius-lg: 16px;
  --header-h: 80px;

  --page-pad: var(--s160);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

@media (max-width: 743px), (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  padding-top: var(--header-h);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-body);
  line-height: 1.5;
  color: var(--gray-100);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
p, h1, h2, h3 { margin: 0; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  width: 100%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-pad);
}

.site-header__logo {
  display: flex;
  align-items: center;
  padding: 30px 0;
}
.site-header__logo img { width: 146px; height: 20px; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.download-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--type-caption);
  font-weight: 700;
  line-height: 17.5px;
  text-transform: uppercase;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.download-link img { width: 7.2px; height: 9.2px; }

.contents-link {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--type-caption);
  font-weight: 700;
  line-height: 17.5px;
  text-transform: uppercase;
  color: var(--gray-60);
}
.contents-link img { width: 8px; height: 6px; }

.site-header__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  pointer-events: none;
}

.site-header__progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ff4f42 0%, #ff8e3c 100%);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ---------- Hero / ATF ---------- */
.hero {
  position: relative;
  height: min(960px, calc(100vh - var(--header-h)));
  height: min(960px, calc(100svh - var(--header-h)));
  overflow: hidden;
  background: var(--black);
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }

.hero__media picture {
  position: absolute;
  inset: 0;
  display: block;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.hero__gradient,
.hero__dots-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 2;
}

.hero.has-dot-fx .hero__gradient {
  opacity: 0;
}

.hero__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s48);
  padding: var(--s80) var(--page-pad);
  text-align: center;
  z-index: 3;
}

.hero__eyebrow {
  font-size: var(--type-label);
  font-weight: 700;
  line-height: 17.5px;
  text-transform: uppercase;
  color: var(--white);
}

.hero__title {
  font-size: var(--type-hero);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.13px;
  color: var(--white);
  max-width: 930px;
}

.hero__sub {
  font-size: var(--type-h3);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.056px;
  color: var(--white);
  max-width: 732px;
}

/* ---------- Intro statement ---------- */
.intro {
  background: var(--gray-80);
  padding: var(--s96) var(--page-pad);
  text-align: center;
}

.intro__text {
  max-width: 658px;
  margin: 0 auto;
  color: var(--white);
  font-size: var(--type-h4);
  line-height: 1.2;
  letter-spacing: 0.04px;
}

.intro__text p + p { margin-top: 24px; }

/* ---------- Table of Contents ---------- */
.toc {
  background: var(--white);
  padding: var(--s96) var(--page-pad);
}

.toc__title {
  font-size: var(--type-h4);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04px;
  color: var(--black);
  margin-bottom: var(--s32);
}

.toc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s24);
}

.toc__col { display: flex; flex-direction: column; }

.toc__download { display: none; }

.toc__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s24) 0;
  border-top: 1px solid var(--red);
  font-size: var(--type-h4);
  line-height: 35px;
  color: color-mix(in srgb, var(--gray-60) 80%, transparent);
  transition: color 0.2s ease;
}

.toc__item:hover,
.toc__item:focus-visible {
  color: var(--black);
}

.toc__item:last-child { border-bottom: 1px solid var(--red); }

.toc__item img {
  width: 35px;
  height: 35px;
  transform: rotate(90deg);
  opacity: 0.8;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.toc__item:hover img,
.toc__item:focus-visible img {
  opacity: 1;
  filter: brightness(0);
}

/* ---------- Shared section bits ---------- */
.eyebrow {
  font-size: var(--type-label);
  font-weight: 700;
  line-height: 17.5px;
  text-transform: uppercase;
  color: var(--white);
}

.rule {
  height: 1px;
  width: 100%;
  background: var(--white);
  flex-shrink: 0;
}

/* ---------- Economic Impact ---------- */
.impact {
  background: var(--gray-80);
  padding: var(--s96) var(--page-pad) var(--s160);
}

.impact__intro {
  display: flex;
  flex-direction: column;
  gap: var(--s48);
}

.impact__title {
  font-size: var(--type-h3);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.056px;
  color: var(--white);
  max-width: 739px;
}

.impact__mandala {
  margin-top: 151px;
  height: 398px;
  overflow: hidden;
  position: relative;
}

.impact__mandala-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.impact__mandala picture,
.impact__mandala img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.impact__mandala picture {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
}

.impact__mandala.is-ready img { opacity: 0; }

.impact__mandala.is-complete img { opacity: 1; }
.impact__mandala.is-complete .impact__mandala-fx { display: none; }

@media (prefers-reduced-motion: reduce), (max-width: 743px) {
  .impact__mandala.is-ready img,
  .impact__mandala.is-complete img {
    opacity: 1;
  }
  .impact__mandala-fx { display: none; }
}

html.lite-fx .impact__mandala.is-ready img,
html.lite-fx .impact__mandala.is-complete img {
  opacity: 1;
}
html.lite-fx .impact__mandala-fx,
html.lite-fx .hero__dots-fx,
html.lite-fx .photo-card__dots-fx {
  display: none;
}
html.lite-fx .hero.has-dot-fx .hero__gradient,
html.lite-fx .photo-card.has-dot-fx .photo-card__dots {
  opacity: 1;
}
html.lite-fx .stat-card__money.is-ready .money__fill,
html.lite-fx .stat-card__money.is-visible .money__fill {
  opacity: 1;
  transition: none;
}
html.lite-fx .productivity__visual.is-ready .productivity__circle,
html.lite-fx .productivity__visual.is-ready .productivity__tag,
html.lite-fx .productivity__visual.is-visible .productivity__circle,
html.lite-fx .productivity__visual.is-visible .productivity__tag {
  opacity: 1;
  animation: none;
}
html.lite-fx .chart.is-ready .chart__bar,
html.lite-fx .chart.is-visible .chart__bar,
html.lite-fx .chart.is-ready .chart__mbar,
html.lite-fx .chart.is-visible .chart__mbar {
  transform: none;
  animation: none;
}
html.lite-fx .world__visual.is-ready .world__map,
html.lite-fx .world__visual.is-visible .world__map,
html.lite-fx .world__visual.is-complete .world__map {
  animation: none;
  -webkit-mask-image: none;
  mask-image: none;
}
html.lite-fx .markets__diagram.is-ready .markets-dot,
html.lite-fx .markets__diagram.is-visible .markets-dot {
  opacity: 1;
  transform: none;
  animation: none;
}

.impact__flow { margin-top: 240px; }

.impact__flow .impact__intro { margin-bottom: var(--s96); }

.impact__cards {
  display: flex;
  gap: var(--s24);
}

.stat-card {
  width: 548px;
  height: 548px;
  background: var(--gray-90);
  border-radius: var(--radius-lg);
  padding: var(--s48);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--white);
}

.stat-card__label {
  font-size: var(--type-h4);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04px;
}

.stat-card__label strong { font-weight: 700; }

.stat-card__big {
  font-size: 135px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -2.7px;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.stat-card__money {
  display: flex;
  gap: 10px;
}

.money {
  position: relative;
  width: 109px;
  height: 109px;
}

.money img { width: 109px; height: 109px; }

.money__fill {
  position: absolute;
  inset: 0;
  opacity: 1;
}

.stat-card__money.is-ready .money__fill { opacity: 0; }
.stat-card__money.is-visible .money__fill {
  opacity: 1;
  transition: opacity 2.4s ease-out;
}

@media (prefers-reduced-motion: reduce), (max-width: 743px) {
  .stat-card__money.is-ready .money__fill,
  .stat-card__money.is-visible .money__fill {
    opacity: 1;
    transition: none;
  }
}

.money span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-hero);
  font-weight: 700;
  letter-spacing: 0.13px;
  color: var(--gray-90);
}

.impact__map {
  margin-top: var(--s24);
  position: relative;
  width: 1120px;
  height: 689px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--gray-90);
}

.impact__map-stage,
.impact__map-picture,
.impact__map-ui {
  position: absolute;
  inset: 0;
}

.impact__map-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.impact__map-caption {
  position: absolute;
  top: var(--s48);
  left: var(--s48);
  color: var(--white);
  font-size: var(--type-h4);
  line-height: 1.2;
  letter-spacing: 0.04px;
  z-index: 4;
}

.impact__map-caption strong { font-weight: 700; }

.map-state {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  object-fit: contain;
  z-index: 1;
}

.map-state[hidden] { display: none; }

.map-pin {
  position: absolute;
  z-index: 2;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #4c5259;
  color: transparent;
  font-size: 0;
  cursor: pointer;
}

.map-pin::before,
.map-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 1px;
  background: #000;
  border-radius: 1px;
}

.map-pin::before { transform: translate(-50%, -50%); }
.map-pin::after { transform: translate(-50%, -50%) rotate(90deg); }

.map-pin.is-active {
  background: #fff;
}

.map-pin.is-active::before { transform: translate(-50%, -50%) rotate(45deg); }
.map-pin.is-active::after { transform: translate(-50%, -50%) rotate(-45deg); }

.map-pin--wa { inset: 44.12% 64.89% 50.37% 31.72%; }
.map-pin--tas { inset: 87.81% 29.41% 6.69% 67.2%; }
.map-pin--nt { inset: 28.16% 48.26% 66.34% 48.35%; }
.map-pin--sa { inset: 52.69% 45.49% 41.81% 51.12%; }
.map-pin--vic { inset: 71.41% 33.97% 23.09% 62.65%; }
.map-pin--act { inset: 66.47% 26.46% 28.02% 70.15%; }
.map-pin--nsw { inset: 58.2% 28.4% 36.3% 68.21%; }
.map-pin--qld { inset: 35.99% 31.19% 58.5% 65.42%; }

.map-card {
  position: absolute;
  z-index: 3;
  width: 225px;
  background: #fff;
  border-radius: 10px;
  padding: var(--s24);
  display: flex;
  flex-direction: column;
  gap: var(--s24);
  color: #14171a;
}

.map-card[hidden] { display: none; }

.map-card__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.map-card__name {
  font-size: var(--type-label);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.028px;
  text-transform: uppercase;
  color: #14171a;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.map-card__rule {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, #ff4f42 0%, #ff8e3c 100%);
}

.map-card__body {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.map-card__value {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.096px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.map-card__text {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.032px;
}

.map-card__text strong {
  font-weight: 700;
}

.map-card--qld { inset: 41.51% 11.07% 26.27% 68.84%; width: auto; }
.map-card--nt { inset: 33.67% 28.13% 34.11% 51.79%; width: auto; }
.map-card--sa { inset: 58.2% 49.02% 9.58% 30.89%; width: auto; }
.map-card--wa { inset: 49.64% 68.3% 18.14% 11.61%; width: auto; }
.map-card--nsw { inset: 25.98% 8.3% 41.8% 71.61%; width: auto; }
.map-card--tas { inset: 55.59% 9.29% 12.19% 70.63%; width: auto; }
.map-card--vic { inset: 39.19% 13.84% 28.59% 66.07%; width: auto; }
.map-card--act {
  left: 73.57%;
  right: 6.34%;
  top: calc(50% - 7px);
  bottom: auto;
  width: auto;
  transform: translateY(-50%);
}

/* ---------- Business Productivity ---------- */
.productivity {
  background: var(--gray-10);
  padding: var(--s96) var(--page-pad) var(--s160);
}

.eyebrow--dark { color: var(--gray-80); }
.rule--dark { background: var(--gray-80); }

.productivity__intro {
  display: flex;
  flex-direction: column;
  gap: var(--s48);
}

.productivity__title {
  font-size: var(--type-h3);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.056px;
  color: var(--gray-80);
  max-width: 641px;
}

.productivity__title--wide { max-width: 927px; }
.productivity__title--outro { max-width: 763px; }

.productivity__visual {
  position: relative;
  width: 1120px;
  height: 596px;
}

.productivity__circle {
  position: absolute;
  width: 287px;
  height: 287px;
}

.productivity__circle--1 { left: -84px; top: 373px; }
.productivity__circle--2 { left: 497px; top: -28px; }
.productivity__circle--3 { left: 681px; top: 325px; }

.productivity__big {
  position: absolute;
  left: 559.5px;
  top: 216px;
  transform: translateX(-50%);
  font-size: 180.4px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -3.608px;
  white-space: nowrap;
  background: linear-gradient(170.7deg, #ff4f42 0%, #ff8e3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.productivity__tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 15px;
  white-space: nowrap;
  background: linear-gradient(165deg, #ff4f42 0%, #ff8e3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.productivity__tag > span:first-child {
  font-size: 45px;
  font-weight: 700;
  letter-spacing: 0.09px;
  line-height: 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  background: linear-gradient(128deg, #ff4f42 0%, #ff8e3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.productivity__tag > span:last-child {
  font-size: var(--type-h3);
  font-weight: 500;
  line-height: 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.productivity__tag--1 { left: 47px; top: 492px; }
.productivity__tag--2 { left: 628px; top: 99px; }
.productivity__tag--3 { left: 815px; top: 452px; gap: 24px; }

.productivity__visual.is-ready .productivity__circle,
.productivity__visual.is-ready .productivity__tag {
  opacity: 0;
}

.productivity__visual.is-visible .productivity__circle--2,
.productivity__visual.is-visible .productivity__tag--2 {
  animation: productivity-item-in 0.9s ease-out forwards;
}

.productivity__visual.is-visible .productivity__circle--3,
.productivity__visual.is-visible .productivity__tag--3 {
  animation: productivity-item-in 0.9s ease-out 0.55s forwards;
}

.productivity__visual.is-visible .productivity__circle--1,
.productivity__visual.is-visible .productivity__tag--1 {
  animation: productivity-item-in 0.9s ease-out 1.1s forwards;
}

@keyframes productivity-item-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce), (max-width: 743px) {
  .productivity__visual.is-ready .productivity__circle,
  .productivity__visual.is-ready .productivity__tag,
  .productivity__visual.is-visible .productivity__circle,
  .productivity__visual.is-visible .productivity__tag {
    opacity: 1;
    animation: none;
  }
}

.productivity__block { margin-top: var(--s160); }

.productivity__block .productivity__intro { margin-bottom: var(--s96); }

.productivity__cards {
  display: flex;
  gap: var(--s24);
}

.stat-card--light {
  background: var(--gray-20);
  color: var(--gray-80);
}

.stat-card__big--unit {
  display: flex;
  align-items: baseline;
  gap: var(--s16);
  line-height: 1.2;
  text-box-trim: none;
  text-box-edge: auto;
}

.stat-card__big--unit span {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.stat-card__big--unit span:last-child {
  font-size: 67.5px;
  letter-spacing: -1.35px;
}

/* ---------- Revenue growth chart ---------- */
.chart {
  margin-top: var(--s24);
  position: relative;
  width: 1120px;
  height: 689px;
  background: var(--gray-20);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.chart__caption {
  position: absolute;
  top: var(--s48);
  left: var(--s48);
  font-size: var(--type-h4);
  line-height: 1.2;
  letter-spacing: 0.04px;
  color: var(--gray-80);
  max-width: 452px;
}

.chart__caption strong { font-weight: 700; }

.chart__guide {
  position: absolute;
  top: 245px;
  width: 1px;
  height: 325px;
  background: var(--gray-80);
}

.chart__guide--1 { left: 191.5px; }
.chart__guide--2 { left: 572.5px; }

.chart__pct {
  position: absolute;
  top: 249px;
  display: flex;
  align-items: flex-start;
  font-size: 88.3px;
  font-weight: 500;
  line-height: 58.16px;
  letter-spacing: -1.77px;
  color: var(--gray-100);
}

.chart__pct--1 { left: 210.4px; }
.chart__pct--2 { left: 595.5px; }

.chart__pct span {
  font-size: 57px;
  font-weight: 700;
  margin-top: 3.7px;
  margin-left: 4px;
}

.chart__bar { position: absolute; }

.chart__bar--1 {
  left: 191.5px;
  top: 430px;
  width: 357px;
  height: 140px;
  background: var(--gray-5);
}

.chart__bar--2 {
  left: 572.5px;
  top: 343px;
  width: 356px;
  height: 227px;
  background: linear-gradient(147.5deg, #ff4f42 0%, #ff8e3c 100%);
}

.chart.is-ready .chart__bar {
  transform: scaleY(0);
  transform-origin: center bottom;
}

.chart.is-visible .chart__bar--1 {
  animation: chart-bar-grow 0.95s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

.chart.is-visible .chart__bar--2 {
  animation: chart-bar-grow 1.1s cubic-bezier(0.33, 0, 0.2, 1) 0.12s forwards;
}

@keyframes chart-bar-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes chart-mbar-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce), (max-width: 743px) {
  .chart.is-ready .chart__bar,
  .chart.is-visible .chart__bar,
  .chart.is-ready .chart__mbar,
  .chart.is-visible .chart__mbar {
    transform: none;
    animation: none;
  }
}

.chart__label {
  position: absolute;
  top: 602px;
  font-size: var(--type-body);
  line-height: 1.2;
  letter-spacing: 0.032px;
  color: var(--gray-80);
}

.chart__label--1 { left: 194.5px; }
.chart__label--2 { left: 575.5px; }

.productivity__outro { margin-top: var(--s160); }

/* ---------- Global Competitiveness ---------- */
.world {
  background: linear-gradient(152.8deg, #ff4f42 0%, #ff8e3c 100%);
  padding: var(--s96) var(--page-pad) var(--s160);
}

.world__visual {
  margin-top: var(--s128);
  position: relative;
  width: 1120px;
  height: 429px;
}

.world__map {
  position: absolute;
  left: 15px;
  top: 0;
  width: 1105px;
  height: 429px;
  max-width: none;
}

.world__visual.is-ready .world__map {
  -webkit-mask-image: linear-gradient(to top left, #000 58%, transparent 72%);
  mask-image: linear-gradient(to top left, #000 58%, transparent 72%);
  -webkit-mask-size: 280% 280%;
  mask-size: 280% 280%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
}

.world__visual.is-visible .world__map {
  animation: world-map-reveal 4.2s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

.world__visual.is-complete .world__map {
  -webkit-mask-image: none;
  mask-image: none;
}

@keyframes world-map-reveal {
  from {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
  }
  to {
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
  }
}

@media (prefers-reduced-motion: reduce), (max-width: 743px) {
  .world__visual.is-ready .world__map,
  .world__visual.is-visible .world__map,
  .world__visual.is-complete .world__map {
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.world__stat {
  position: absolute;
  left: -12px;
  top: 132px;
  width: 623px;
  margin: 0;
  font-size: 420px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.84px;
  color: var(--white);
  text-align: center;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  z-index: 1;
}

.world__stat span {
  font-size: 220px;
}

.world__markets { margin-top: 200px; }

.markets__diagram {
  margin-top: 81px;
  width: 1120px;
  height: 515px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.1);
  position: relative;
}

.markets__groups {
  position: absolute;
  left: 193px;
  top: 128px;
  display: flex;
  gap: 142px;
}

.markets__group {
  display: flex;
  flex-direction: column;
  gap: var(--s24);
}

.markets__svg {
  display: block;
  overflow: visible;
}

.markets__diagram.is-ready .markets-dot {
  opacity: 0;
  transform: scale(0.55);
  transform-box: fill-box;
  transform-origin: center;
}

.markets__diagram.is-visible .markets-dot {
  animation: markets-dot-in 0.55s cubic-bezier(0.33, 0, 0.2, 1) both;
}

.markets__svg--2021 .markets-dot:nth-child(1) { animation-delay: 0s; }
.markets__svg--2021 .markets-dot:nth-child(2) { animation-delay: 0.12s; }
.markets__svg--2021 .markets-dot:nth-child(3) { animation-delay: 0.24s; }

.markets__svg--today .markets-dot:nth-child(1) { animation-delay: 0.18s; }
.markets__svg--today .markets-dot:nth-child(2) { animation-delay: 0.3s; }
.markets__svg--today .markets-dot:nth-child(3) { animation-delay: 0.42s; }
.markets__svg--today .markets-dot:nth-child(4) { animation-delay: 0.54s; }
.markets__svg--today .markets-dot:nth-child(5) { animation-delay: 0.66s; }

@keyframes markets-dot-in {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce), (max-width: 743px) {
  .markets__diagram.is-ready .markets-dot,
  .markets__diagram.is-visible .markets-dot {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.markets__group p {
  font-size: var(--type-body);
  line-height: 1.2;
  letter-spacing: 0.032px;
  color: var(--white);
}

.world .eyebrow,
.world .impact__title,
.markets__group p {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.world__outro {
  margin-top: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--s48);
}

/* ---------- From Australia to the World ---------- */
.future {
  background: var(--gray-90);
  padding: var(--s96) var(--page-pad);
  display: flex;
  gap: var(--s24);
}

.future__left { width: 356px; flex-shrink: 0; }

.future__title {
  margin-top: var(--s32);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08px;
  background: linear-gradient(158deg, #ff4f42 0%, #ff8e3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.future__cols {
  display: flex;
  gap: var(--s24);
}

.future__text {
  width: 358px;
  color: var(--white);
  font-size: var(--type-body);
  line-height: 24px;
}

.future__text p + p { margin-top: 24px; }

.future__bio {
  width: 358px;
  min-height: 696px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.future__bio-text {
  color: var(--white);
  font-size: var(--type-body);
  line-height: 24px;
}

.future__bio-text p + p { margin-top: 24px; }
/* Hidden tablet-only <p> still matches p + p; don't indent the first desktop/mobile paragraph. */
.future__bio-text .only-tablet + p { margin-top: 0; }

.future__person {
  display: flex;
  flex-direction: column;
  gap: var(--s24);
}

.future__person-name {
  color: var(--white);
  font-size: var(--type-body);
  line-height: 24px;
}

.future__person-name strong { font-weight: 700; }

/* ---------- Photo card (shared) ---------- */
.photo-card {
  position: relative;
  width: 262px;
  height: 262px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 7%;
  isolation: isolate;
  background: #e8eaed;
}

.future__person .photo-card {
  background: #e8eaed;
}

.photo-card__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.photo-card__dots,
.photo-card__dots-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border-radius: inherit;
}

.photo-card.has-dot-fx .photo-card__dots {
  opacity: 0;
}

/* ---------- About the Research ---------- */
.research {
  background: var(--gray-10);
  padding: var(--s96) var(--page-pad);
}

.research__title {
  font-size: var(--type-h3);
  font-weight: 700;
  line-height: 35px;
  color: var(--gray-70);
  margin-bottom: var(--s64);
}

.research__row {
  display: flex;
  gap: var(--s24);
}

.rule--orange { background: var(--orange-40); }

.research__main {
  width: 834px;
  display: flex;
  flex-direction: column;
  gap: var(--s32);
}

.research__cols {
  display: flex;
  gap: var(--s24);
}

.research__col-a {
  width: 357px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s24);
}

.research__note {
  font-size: var(--type-label);
  line-height: 21px;
  color: var(--gray-60);
  max-width: 258px;
  min-height: 103px;
}

.research__link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-label);
  line-height: 21px;
  color: var(--gray-60);
  text-decoration: underline;
  text-underline-position: from-font;
}

.research__link img {
  width: 10px;
  height: 10px;
  transform: rotate(-90deg) scaleY(-1);
}

.research__method {
  width: 452px;
  font-size: var(--type-body);
  line-height: 24px;
  color: var(--gray-60);
}

.research__method p + p { margin-top: 24px; }

.research__aside {
  width: 262px;
  display: flex;
  flex-direction: column;
  gap: var(--s32);
}

.research__mandala-logo {
  position: relative;
  width: 93.4px;
  height: 114.3px;
}

.research__mandala-logo-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 81.69%;
}

.research__mandala-logo-bottom {
  position: absolute;
  left: 1.29%;
  right: 0.99%;
  bottom: 0;
  width: 96.72%;
  height: 9.78%;
}

.research__aside-body {
  display: flex;
  flex-direction: column;
  gap: var(--s16);
}

.research__aside-title {
  font-size: var(--type-label);
  font-weight: 700;
  line-height: 21px;
  color: var(--gray-60);
}

.research__aside-text {
  font-size: var(--type-label);
  line-height: 21px;
  color: var(--gray-60);
}

/* ---------- Advisory Council ---------- */
.council {
  background: var(--white);
  padding: var(--s96) var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: var(--s96);
  align-items: flex-start;
}

.council__intro {
  display: flex;
  flex-direction: column;
  gap: var(--s32);
  width: 100%;
}

.council__kicker {
  font-size: var(--type-label);
  font-weight: 700;
  line-height: 17.5px;
  text-transform: uppercase;
  color: var(--gray-100);
}

.council__lede {
  font-size: var(--type-h3);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.056px;
  color: var(--gray-100);
  max-width: 834px;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.council__row {
  display: flex;
  gap: var(--s24);
  align-items: stretch;
  width: 100%;
}

.council-card {
  width: 262px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s32);
}

.council-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--s32);
}

.council-card__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s16);
  width: 100%;
}

.council-card__region {
  font-size: var(--type-label);
  font-weight: 700;
  line-height: 17.5px;
  text-transform: uppercase;
  color: var(--gray-70);
}

.council-card__who {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.council-card__name {
  font-size: var(--type-h4);
  line-height: 1.2;
  letter-spacing: 0.04px;
  color: var(--gray-100);
}

.council-card__role {
  font-size: var(--type-label);
  line-height: 1.2;
  letter-spacing: 0.028px;
  color: var(--gray-60);
}

.council-card .photo-card {
  overflow: hidden;
}

.council-card .photo-card__img {
  object-position: bottom;
}

/* ---------- About Airwallex ---------- */
.about-awx {
  background: linear-gradient(152.8deg, #ff4f42 0%, #ff8e3c 100%);
  padding: var(--s96) var(--page-pad);
  display: flex;
  gap: var(--s24);
  align-items: center;
}

.about-awx__text {
  width: 548px;
  display: flex;
  flex-direction: column;
  gap: var(--s24);
  color: var(--white);
}

.about-awx__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
  max-width: 452px;
}

.about-awx__body {
  font-size: var(--type-body);
  line-height: 24px;
  max-width: 478px;
}

.about-awx__body a {
  color: var(--white);
  text-decoration: underline;
  text-underline-position: from-font;
}

.about-awx__visual.photo-card {
  width: 548px;
  height: 548px;
  background: #f5f6f7;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--gray-10);
  padding: var(--s32) var(--page-pad);
  display: flex;
  align-items: center;
}

.footer__rights {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s16);
  font-size: var(--type-label);
  color: #6c747f;
}

.footer__socials {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.footer__socials a {
  display: flex;
  color: #18171c;
}

.footer__socials svg {
  display: block;
  height: 14px;
  width: auto;
}

/* ============================================================
   Responsive components & passes
   ============================================================ */

html, body { overflow-x: clip; }

/* visibility utilities */
.only-mobile { display: none; }
.only-tablet { display: none; }

.site-header__tools {
  display: none;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.header-watch {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 8px 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.header-watch__label {
  font-size: var(--type-caption);
  font-weight: 700;
  line-height: 17.5px;
  letter-spacing: 0.024px;
  text-transform: uppercase;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.header-watch__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gray-20);
}

.header-watch__play img {
  width: 7px;
  height: 8px;
  margin-left: 1px;
}
.header-watch--download .header-watch__play img {
  width: 8px;
  height: 9px;
  margin: 0;
}

/* hamburger button (hidden on desktop) */
.site-header__menu-btn {
  display: none;
  width: 48px;
  height: 48px;
  padding: 12px;
  background: var(--white);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.site-header__menu-btn img { width: 24px; height: 24px; }

/* mobile dropdown menu (no Figma design — minimal adaptation) */
.mobile-menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: var(--s32);
  background: var(--white);
  padding: var(--s80) var(--s24);
}

.mobile-menu[hidden] { display: none; }

.mobile-menu__title {
  font-size: var(--type-h4);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04px;
  color: var(--black);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.mobile-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s24) 0;
  border-top: 1px solid var(--red);
  font-size: var(--type-h4);
  line-height: 35px;
  color: color-mix(in srgb, var(--gray-60) 80%, transparent);
  transition: color 0.2s ease;
}

.mobile-menu__item:last-child { border-bottom: 1px solid var(--red); }

.mobile-menu__item:hover,
.mobile-menu__item:focus-visible {
  color: var(--black);
}

.mobile-menu__item img {
  width: 35px;
  height: 35px;
  transform: rotate(90deg);
  flex-shrink: 0;
  opacity: 0.8;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.mobile-menu__item:hover img,
.mobile-menu__item:focus-visible img {
  opacity: 1;
  filter: brightness(0);
}

.mobile-menu__download {
  width: 169px;
  gap: 8px;
}

/* video player chip (hero, all breakpoints) */
/* video player chip — anchored to the hero slot, then pinned to that screen position */
.video-chip-anchor {
  position: absolute;
  right: 35px;
  bottom: 32px;
  width: 176px;
  height: 128px;
  pointer-events: none;
  visibility: hidden;
}

.video-chip {
  position: absolute;
  right: 35px;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: var(--s8);
  padding: var(--s8);
  background: var(--gray-20);
  border-radius: var(--radius-md);
  z-index: 90;
  cursor: pointer;
}
.video-chip__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s8);
  font-size: var(--type-caption);
  line-height: 1.2;
  letter-spacing: 0.024px;
  color: var(--black);
}
.video-chip__label img {
  width: 7px;
  height: 7px;
  margin: 1.45px;
  transform: rotate(46.65deg);
}
.video-chip__thumb {
  width: 160px;
  height: 90px;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-chip__thumb img { width: 40px; height: 40px; }

/* GTM-3895: hide the bottom-right "Watch video" chip */
.video-chip,
.video-chip-anchor { display: none !important; }

.video-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 24px;
  border: 0;
  background: rgba(20, 12, 8, 0.72);
  z-index: 200;
}

.video-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-lightbox::backdrop {
  background: transparent;
}

.video-lightbox__player {
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.video-lightbox__player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* states carousel (mobile map card only) */
.states { display: none; }

/* mobile chart variant */
.chart__mobile { display: none; }

/* world title width modifiers (replacing inline styles) */
.impact__title--641 { max-width: 641px; }
.impact__title--834 { max-width: 834px; }

/* desktop range: keep the 1120px layouts intact down to 1280px,
   center content above 1440px */
@media (min-width: 1280px) {
  :root { --page-pad: max(24px, calc((100vw - 1120px) / 2)); }
  .video-chip { position: fixed; }
}

/* ============================================================
   Tablet pass — 744px design (466:1194), applies 744–1279
   ============================================================ */
@media (max-width: 1279px) {
  :root { --page-pad: var(--s64); --header-h: 72px; }

  /* Header (466:1196): 72px, white, px24, logo 131.4x18, hamburger */
  .site-header { height: 72px; padding: 12px var(--s24); }
  .site-header__logo { padding: 0; }
  .site-header__logo img { width: 131.4px; height: 18px; }
  .site-header__actions { display: none; }
  .site-header__tools { display: flex; }
  .site-header__menu-btn { display: flex; }

  /* Hero (471:2412): 1133 artboard, but fill the window so Watch video stays on-screen */
  .hero { height: min(1133px, calc(100svh - var(--header-h))); }
  .hero__media {
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
  }
  .hero__content {
    top: 0;
    height: 100%;
    padding: var(--s80) var(--s160) 0;
  }
  .hero__eyebrow { max-width: 452px; }
  .hero__title { max-width: 696px; }
  .hero__sub { max-width: 732px; }
  .hero__sub br { display: none; }

  .video-chip-anchor,
  .video-chip { right: 24px; bottom: 25px; }
  .video-chip {
    position: absolute;
    top: auto;
    left: auto;
  }

  /* Intro (471:2459) */
  .intro__text { max-width: 614px; }

  /* TOC (471:2461) */
  .toc__grid { grid-template-columns: 295px 297px; }
  .toc__title {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
  .toc__download {
    display: flex;
    margin-top: 40px;
    width: 169px;
  }

  /* Economic Impact (471:2551): content 624 centered */
  .impact { padding: var(--s96) var(--s24) var(--s160); }
  .impact__intro,
  .impact__mandala,
  .impact__flow { width: 624px; max-width: 100%; margin-left: auto; margin-right: auto; }
  .impact__flow { overflow: visible; }
  .impact__mandala { margin-top: var(--s96); height: 302px; }
  .impact__flow { margin-top: var(--s160); }
  .impact__flow .impact__intro { margin-bottom: var(--s96); }
  .impact__flow .impact__title--flow br { display: none; }
  /* Figma trims these headings (cap/alphabetic) at this breakpoint */
  .impact__title,
  .productivity__title {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
  .world__markets .impact__title br { display: none; }
  .markets__group p {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
  .impact__cards { flex-direction: column; }
  .impact__cards .stat-card { width: 100%; }
  .impact__map {
    width: 100%;
    max-width: 100%;
    left: auto;
    margin-left: 0;
    transform: none;
    height: auto;
    border-radius: var(--radius-lg);
    padding: var(--s24);
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: visible;
  }
  .impact__map-caption {
    position: static;
    max-width: none;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
  .impact__map-stage {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1120 / 689;
    border-radius: 20px;
    overflow: visible;
    flex-shrink: 0;
  }
  .impact__map-picture {
    overflow: hidden;
    border-radius: 20px;
  }
  .impact__map-img { object-fit: contain; }
  .impact__map-ui { overflow: visible; }
  .map-card {
    bottom: auto;
    height: auto;
    width: 168px;
    padding: 16px;
    gap: 12px;
  }
  .map-card__head { gap: 10px; }
  .map-card__body { gap: 12px; }
  .map-card__value { font-size: 28px; letter-spacing: 0.04px; }
  .map-card__text { font-size: 12px; letter-spacing: 0.02px; }
  .map-card--qld,
  .map-card--nt,
  .map-card--sa,
  .map-card--wa,
  .map-card--nsw,
  .map-card--tas,
  .map-card--vic {
    bottom: auto;
    right: auto;
    width: 168px;
  }
  .map-card--act {
    bottom: auto;
    width: 168px;
    transform: none;
  }

  /* Business Productivity (471:2788) */
  .productivity { padding: var(--s96) var(--s64) var(--s160); overflow: hidden; }
  .productivity__visual { margin-left: -250px; }
  .productivity__big {
    font-size: 140.3px;
    letter-spacing: -2.806px;
    left: 559.5px;
    top: 219px;
  }
  .productivity__circle--1 { left: 152px; top: 373px; }
  .productivity__circle--3 { left: 425px; top: 280px; }
  .productivity__tag--1 { left: 283px; top: 492px; }
  .productivity__tag--3 { left: 559px; top: 407px; }
  .productivity__cards { flex-direction: column; }
  .productivity__cards .stat-card { width: 100%; }
  .chart {
    width: 100%;
    max-width: 100%;
    height: 689px;
    overflow: hidden;
  }
  .chart__desktop {
    position: relative;
    width: 616px;
    height: 689px;
    margin: 0 auto;
    transform: none;
  }
  .chart__caption { max-width: 520px; }
  .chart__guide--1 { left: 79px; }
  .chart__guide--2 { left: 320px; }
  .chart__pct--1 { left: 103px; }
  .chart__pct--2 { left: 342px; }
  .chart__bar--1 { left: 79px; top: 430px; width: 217px; height: 140px; }
  .chart__bar--2 { left: 320px; top: 343px; width: 216px; height: 227px; }
  .chart__label--1 { left: 79px; }
  .chart__label--2 { left: 320px; }

  /* Global Competitiveness — map + 1.5× like desktop composition, full content width */
  .world { padding: var(--s96) var(--s64) var(--s160); }
  .world__visual {
    width: calc(100% + 128px);
    max-width: none;
    height: auto;
    aspect-ratio: 1488 / 646;
    margin-top: var(--s128);
    margin-left: -64px;
  }
  .world__map {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .world__stat {
    left: 64px;
    top: 16%;
    transform: none;
    width: 72%;
    font-size: calc(100vw * 646 / 1488 * 0.92);
    letter-spacing: 0.08vw;
    text-align: left;
    line-height: 0.9;
  }
  .world__stat span { font-size: 0.52em; }
  .world__markets { margin-top: 200px; }
  .markets__diagram {
    width: 100%;
    max-width: 100%;
    height: 879px;
    margin-top: 81px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .markets__groups {
    position: static;
    flex-direction: column;
    gap: var(--s96);
  }

  /* From Australia to the World (471:10812) */
  .future { flex-direction: column; gap: var(--s96); padding: var(--s96) var(--s64); }
  .future__left { width: 452px; }
  .future__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "text biotext"
      "person biotext";
    gap: var(--s32) var(--s24);
    width: 100%;
    align-items: start;
  }
  .future__text { width: auto; grid-area: text; }
  .future__bio { display: contents; }
  .future__bio-text { grid-area: biotext; }
  .future__person {
    grid-area: person;
    width: auto;
    align-items: flex-start;
    margin-top: var(--s32);
  }
  .future__person .photo-card {
    width: 131px;
    height: 131px;
  }
  .only-tablet { display: block; }
  .not-tablet { display: none; }
  .future__bio-text .only-tablet + p { margin-top: 24px; }

  /* About the Research (471:10862) */
  .research { padding: var(--s96) var(--s64); }
  .research__title { margin-bottom: var(--s64); }
  .research__row { flex-direction: column; gap: var(--s64); }
  .research__main { width: 100%; }
  .research__col-a { width: 295px; }
  .research__note { max-width: 295px; min-height: 90px; }
  .research__method { width: 297px; }
  .research__aside {
    width: 615px;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 225px;
    row-gap: var(--s32);
  }
  .research__aside .rule { flex: 0 0 100%; }
  .research__aside-body { width: 296px; }

  /* Advisory Council (471:12183): 2x2 grid */
  .council { padding: var(--s96) var(--s64); }
  .council__lede { max-width: none; }
  .council__row {
    display: grid;
    grid-template-columns: 296px 296px;
    column-gap: var(--s24);
    row-gap: var(--s64);
  }
  .council-card { width: 296px; }
  .council-card .photo-card { width: 296px; height: 296px; }

  /* About Airwallex (471:13000): content frame at y48 → py48 */
  .about-awx {
    padding: var(--s48) var(--s64);
    flex-direction: column;
    align-items: stretch;
    background: linear-gradient(119.5deg, #ff4f42 0%, #ff8e3c 100%);
  }
  .about-awx__text { width: 100%; }
  .about-awx__title { max-width: none; }
  .about-awx__body { max-width: none; }
  .about-awx__visual.photo-card { width: 100%; height: auto; aspect-ratio: 1; }
}

/* 960–1279: fluidize the 744px-locked tablet widths for iPad landscape / 1024 */
@media (min-width: 960px) and (max-width: 1279px) {
  .toc__grid {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }

  .impact {
    padding-left: var(--s64);
    padding-right: var(--s64);
  }
  .impact__intro,
  .impact__mandala,
  .impact__flow {
    width: 100%;
  }
  .impact__mandala {
    height: auto;
    aspect-ratio: 624 / 302;
  }

  .productivity__visual {
    margin-left: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .markets__diagram {
    height: auto;
    min-height: 515px;
    padding: 80px 48px;
  }
  .markets__groups {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-evenly;
    gap: 80px;
    width: 100%;
  }
  .markets__group:first-child img,
  .markets__group:first-child .markets__svg {
    width: 280px;
    height: auto;
  }
  .markets__group:last-child img,
  .markets__group:last-child .markets__svg {
    width: 352px;
    height: auto;
  }

  .future__left {
    width: 100%;
    max-width: none;
  }
  .future__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "text biotext"
      "person biotext";
    gap: var(--s32);
    width: 100%;
    align-items: start;
  }
  .future__text {
    width: auto;
    min-width: 0;
    grid-area: text;
  }
  .future__bio {
    display: contents;
  }
  .future__bio-text { grid-area: biotext; }
  .future__person {
    grid-area: person;
    width: auto;
    margin-top: var(--s48);
    align-items: flex-start;
  }
  .future__person .photo-card {
    width: 50%;
    max-width: 180px;
    height: auto;
    aspect-ratio: 1;
  }

  .research__cols {
    display: grid;
    grid-template-columns: minmax(200px, 0.34fr) minmax(0, 1fr);
    gap: var(--s32);
    width: 100%;
  }
  .research__col-a,
  .research__method {
    width: auto;
    min-width: 0;
  }
  .research__note { max-width: none; }
  .research__aside {
    width: 100%;
    column-gap: var(--s24);
    justify-content: space-between;
  }
  .research__aside-body {
    width: calc((100% - var(--s24)) / 2);
  }

  .council__row {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }
  .council-card { width: auto; min-width: 0; }
  .council-card .photo-card {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}

/* ============================================================
   Mobile pass — 402px design (466:1193), applies <744
   ============================================================ */
@media (max-width: 743px) {
  :root { --page-pad: var(--s24); --header-h: 72px; }

  .not-mobile { display: none; }
  .only-mobile { display: block; }
  .only-tablet { display: none; }
  .not-tablet { display: inline; }

  /* Header (466:1414): 72px, white, logo 146x20 at left 27 */
  .site-header { height: 72px; padding: 12px var(--s24); }
  .site-header__logo img { width: 146px; height: 20px; }
  /* App-bar CTA intentionally hidden — the download link lives in the
     hamburger menu (.mobile-menu__download). */
  .header-watch { display: none; }

  /* Hero (466:1435): 730px — photo is already 402×730 */
  .hero { height: 730px; }
  .hero__media {
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
  }
  .hero__gradient,
  .hero__dots-fx {
    inset: auto;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 274.5px;
  }
  .hero__content {
    top: 293px;
    bottom: auto;
    left: 0;
    right: 0;
    height: auto;
    width: auto;
    padding: 0 26px;
    gap: 28px;
    transform: translateY(-50%);
    align-items: center;
    text-align: center;
  }
  .hero__title { font-size: 32px; letter-spacing: 0.064px; max-width: 352px; }
  .hero__sub { font-size: 18px; letter-spacing: 0.036px; max-width: 352px; }
  .video-chip-anchor,
  .video-chip { right: 24px; bottom: 24px; }
  .video-chip {
    position: absolute;
    top: auto;
    left: auto;
  }

  /* Intro (466:1455) */
  .intro { padding: var(--s80) var(--s24); }
  .intro__text { max-width: none; font-size: 18px; letter-spacing: 0.036px; }
  .intro__text p + p { margin-top: 21.6px; }

  /* TOC (466:1476): single column */
  .toc { padding: var(--s80) var(--s24); }
  .toc__grid { grid-template-columns: 1fr; gap: 0; }
  .toc__col:first-child .toc__item:last-child { border-bottom: 0; }

  /* Economic Impact (466:1551) */
  .impact { padding: var(--s80) var(--s24); }
  .impact__intro { gap: var(--s32); }
  .impact__title { font-size: 18px; letter-spacing: 0.036px; max-width: none; }
  .impact__mandala {
    margin-top: var(--s32);
    height: auto;
    aspect-ratio: 708 / 400;
  }
  .impact__flow { margin-top: var(--s80); }
  .impact__flow .impact__intro { margin-bottom: var(--s64); }
  .impact__cards { flex-direction: column; width: 100%; }
  .impact__cards .stat-card { width: 100%; max-width: 100%; }
  .stat-card { height: 260px; padding: var(--s32) var(--s24); }
  .stat-card__label { font-size: 18px; letter-spacing: 0.036px; }
  .stat-card__label br { display: none; }
  .stat-card__big { font-size: 87.2px; letter-spacing: -1.744px; }
  .stat-card__big--unit { gap: 11px; }
  .stat-card__big--unit span:last-child { font-size: 43.75px; letter-spacing: -0.875px; }
  .money { width: 69px; height: 69px; }
  .money img { width: 69px; height: 69px; }
  .money span { font-size: 41.15px; letter-spacing: 0.0823px; }
  .impact__map {
    width: 100%;
    max-width: 100%;
    height: auto;
    left: auto;
    margin-left: 0;
    transform: none;
    border-radius: var(--radius-lg);
    padding: var(--s32) var(--s24);
    display: flex;
    flex-direction: column;
    gap: var(--s24);
    overflow: visible;
  }
  .impact__map-caption { position: static; font-size: 18px; letter-spacing: 0.036px; padding: 0; }
  .impact__map-caption br { display: none; }
  .impact__map-stage {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1120 / 689;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .impact__map-picture,
  .impact__map-ui {
    transform: scale(1.18);
    transform-origin: 50% 48%;
  }
  .impact__map-picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  .impact__map-img { width: 100%; height: 100%; object-fit: contain; }
  .impact__map-ui {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .impact__map-ui .map-pin,
  .impact__map-ui .map-card {
    display: none !important;
  }

  /* states carousel */
  .states {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: visible;
  }
  .states__scroller {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .states__scroller::-webkit-scrollbar { display: none; }
  .states__track {
    display: flex;
    gap: 17px;
    justify-content: flex-start;
    height: 222px;
    width: max-content;
  }
  .states__box {
    width: 250px;
    height: 222px;
    flex-shrink: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    background: var(--white);
    border: 0;
    border-radius: 10px;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    appearance: none;
    touch-action: pan-x;
  }
  .states__box.is-dim { filter: blur(4.5px); opacity: 0.22; }
  .states__name {
    font-size: var(--type-label);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.028px;
    text-transform: uppercase;
    color: var(--gray-100);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
  .states__rule { height: 1px; background: var(--gray-20); margin-top: 20px; }
  .states__value {
    margin-top: var(--s24);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.096px;
    color: var(--black);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
  .states__text {
    margin-top: auto;
    padding-top: 16px;
    font-size: var(--type-body);
    line-height: 1.2;
    letter-spacing: 0.032px;
    color: var(--black);
  }
  .states__text strong { font-weight: 700; }
  .states__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    width: 100%;
    height: 4px;
    margin: var(--s16) auto 0;
  }
  .states__dots button {
    width: 4px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d9d9d9;
    cursor: pointer;
  }
  .states__dots button.is-active {
    background: linear-gradient(180deg, #ff4f42 0%, #ff8e3c 100%);
  }

  /* Business Productivity (466:1797): white bg */
  .productivity { background: var(--white); padding: var(--s80) var(--s24); overflow-x: hidden; overflow-y: visible; }
  .productivity__intro { gap: var(--s32); }
  .productivity__title { font-size: 18px; letter-spacing: 0.036px; max-width: none; }
  .productivity__visual {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 354 / 500;
    margin-left: 0;
    margin-top: var(--s64);
    overflow: visible;
  }
  .productivity__circle {
    width: 58%;
    height: auto;
    aspect-ratio: 1;
  }
  .productivity__circle--1 { left: -22%; top: 0; }
  .productivity__circle--2 { left: auto; right: 0; top: 11%; }
  .productivity__circle--3 { left: 6%; top: 56%; }
  .productivity__big {
    font-size: clamp(56px, 21vw, 80px);
    letter-spacing: -0.02em;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    width: max-content;
    max-width: 100%;
  }
  .productivity__tag { gap: 8px; }
  .productivity__tag > span:first-child { font-size: 28px; letter-spacing: 0.056px; }
  .productivity__tag > span:last-child { font-size: 18px; }
  .productivity__tag--1 { left: 4%; top: 13%; gap: 8px; }
  .productivity__tag--2 { left: auto; right: 6%; top: 26%; }
  .productivity__tag--3 { left: 16%; top: 74%; gap: 10px; }
  .productivity__block { margin-top: var(--s80); }
  .productivity__block .productivity__intro { margin-bottom: var(--s64); }
  .productivity__cards { flex-direction: column; width: 100%; }
  .productivity__cards .stat-card { width: 100%; max-width: 100%; }
  .chart {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: var(--s32) var(--s24);
    overflow: hidden;
    box-sizing: border-box;
  }
  .chart__caption {
    position: static;
    max-width: none;
    font-size: 18px;
    letter-spacing: 0.036px;
    margin-bottom: var(--s48);
  }
  .chart__desktop { display: none; }
  .chart__mobile { display: flex; flex-direction: column; gap: 20px; width: 100%; }
  .chart__mrow { position: relative; height: 120px; }
  .chart__mbar { position: absolute; left: 0; top: 22px; height: 98px; transform-origin: left center; }
  .chart__mbar--awx { width: 175px; background: linear-gradient(150.75deg, #ff4f42 0%, #ff8e3c 100%); }
  .chart__mbar--plain { width: 109px; background: var(--white); }
  .chart.is-ready .chart__mbar,
  .chart.is-visible .chart__mbar {
    transform: none;
    animation: none;
  }
  .chart__mguide { position: absolute; left: 0; top: 22px; width: 100%; height: 1px; background: var(--gray-80); }
  .chart__mpct {
    position: absolute;
    top: 37px;
    right: 0;
    left: auto;
    display: flex;
    align-items: flex-start;
    font-size: clamp(40px, 15vw, 61.6px);
    font-weight: 500;
    line-height: 40.56px;
    letter-spacing: -1.23px;
    color: var(--gray-100);
  }
  .chart__mpct span { font-size: 0.64em; font-weight: 700; margin-top: 2.6px; margin-left: 3px; }
  .chart__mpct--13 { left: auto; }
  .chart__mpct--9 { left: auto; }
  .chart__mlabel {
    position: absolute;
    left: 0;
    top: 0;
    font-size: var(--type-caption);
    line-height: 1.2;
    letter-spacing: 0.024px;
    color: var(--gray-90);
    white-space: nowrap;
  }
  .chart__mlabel--dark { color: var(--gray-90); }
  .productivity__outro { margin-top: var(--s80); }

  /* Global Competitiveness (541:30484) */
  .world { padding: var(--s80) var(--s24); overflow: visible; }
  .world .impact__title { font-size: 20px; letter-spacing: 0.04px; }
  .world__visual {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 2210 / 858;
    margin-top: var(--s64);
    margin-left: 0;
    overflow: visible;
  }
  .world__map {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
  }
  .world__stat {
    left: 0;
    top: 22%;
    width: 100%;
    font-size: clamp(88px, 26vw, 140px);
    letter-spacing: 0.04vw;
    text-align: left;
    line-height: 0.9;
    transform: none;
  }
  .world__stat span { font-size: 0.52em; letter-spacing: inherit; margin-left: 0; }
  .world > .impact__intro > .impact__title br { display: none; }
  .world__markets { margin-top: var(--s80); }
  .markets__diagram {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: var(--s64);
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--s48) 36px;
  }
  .markets__groups { position: static; flex-direction: column; gap: var(--s48); left: auto; top: auto; }
  .markets__group:first-child img,
  .markets__group:first-child .markets__svg { width: 173.15px; max-width: 100%; height: auto; }
  .markets__group:last-child img,
  .markets__group:last-child .markets__svg { width: 100%; max-width: 217.36px; height: auto; }
  .world__outro { margin-top: var(--s80); gap: var(--s32); }

  /* From Australia to the World (466:33847) */
  .future { flex-direction: column; gap: var(--s80); padding: var(--s80) var(--s24); }
  .future__left { width: 100%; max-width: 100%; }
  .future__title { margin-top: var(--s32); }
  .future__cols { display: flex; flex-direction: column; gap: 27px; }
  .future__text { width: 100%; font-size: 18px; line-height: 27px; grid-area: auto; }
  .future__text p + p { margin-top: 27px; }
  .future__bio { display: flex; width: 100%; min-height: 0; gap: var(--s80); }
  .future__bio-text { font-size: 18px; line-height: 27px; }
  .future__bio-text p + p { margin-top: 27px; }
  .future__bio-text .only-tablet + p { margin-top: 0; }
  .future__person { width: 100%; gap: var(--s32); grid-area: auto; align-items: stretch; margin-top: 0; }
  .future__person-name { font-size: 18px; line-height: 27px; }
  .future__person .photo-card { width: 100%; max-width: 100%; height: auto; aspect-ratio: 1; }

  /* About the Research (466:33887) */
  .research { padding: var(--s80) var(--s24); }
  .research__title { margin-bottom: var(--s32); }
  .research__row { flex-direction: column; gap: var(--s80); }
  .research__main { width: 100%; gap: var(--s32); }
  .research__cols { flex-direction: column; gap: var(--s32); }
  .research__col-a { width: 100%; gap: var(--s32); }
  .research__note {
    font-size: 18px;
    line-height: 27px;
    color: var(--gray-70);
    max-width: none;
    min-height: 0;
  }
  .research__method {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    color: var(--gray-70);
  }
  .research__method p + p { margin-top: 24px; }
  .research__aside { width: 100%; gap: var(--s32); flex-direction: column; }
  .research__aside .rule { flex: none; }
  .research__aside-body { gap: var(--s24); width: 100%; }
  .research__aside-title { font-size: var(--type-body); line-height: 24px; }
  .research__aside-text { font-size: var(--type-body); line-height: 24px; }

  /* Advisory Council (466:33924): stacked */
  .council { padding: var(--s80) var(--s24); gap: var(--s80); }
  .council__lede { font-size: 18px; letter-spacing: 0.036px; max-width: none; }
  .council__row { display: flex; flex-direction: column; gap: var(--s80); width: 100%; }
  .council-card { width: 100%; height: auto; gap: var(--s32); }
  .council-card .photo-card { width: 100%; max-width: 100%; height: auto; aspect-ratio: 1; }

  /* About Airwallex (466:34101) */
  .about-awx {
    padding: var(--s80) var(--s24);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s32);
    background: linear-gradient(108.65deg, #ff4f42 0%, #ff8e3c 100%);
  }
  .about-awx__text { width: 100%; gap: var(--s32); }
  .about-awx__title { font-size: 28px; line-height: 35px; max-width: none; }
  .about-awx__body { max-width: none; }
  .about-awx__visual.photo-card { width: 100%; max-width: 100%; height: auto; aspect-ratio: 1; }

  .footer { padding: var(--s32) var(--s24); }
  .footer__rights { flex-direction: column; align-items: flex-start; gap: var(--s16); }
}