/* =============================================================
   Infotel Myanmar — site stylesheet
   One file for the whole site. Tokens live at the top; change a
   colour or a size here, never in a page.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* The logo's own colours, read out of assets/images/logo.svg: the blue
     diamond and the red speed lines. The navy scale is that blue darkened,
     so every dark surface on the site is the brand colour rather than a
     neighbouring one. */
  --brand-blue: #02399D;
  --brand-red:  #D9241D;

  --navy-900: #050E24;
  --navy-800: #071431;
  --navy-700: #0C2160;
  --navy-600: #02399D;
  --accent-500: #D9241D;
  --accent-400: #F1453C;
  --accent-100: #FBE7E5;

  --paper:      #FFFFFF;
  --paper-2:    #F7F8FA;
  --paper-3:    #EEF1F5;
  --line:       #DEE3EA;
  --line-soft:  #EAEEF3;

  --text:       #141B2A;
  --text-2:     #4A5568;
  --text-3:     #7B8798;
  --on-dark:    #EEF1F6;
  --on-dark-2:  #A7B2C4;

  --ok:     #1E7F5C;  --ok-bg:  #E7F5EF;
  --warn:   #9A6B00;  --warn-bg:#FBF1DC;
  --err:    #B3261E;  --err-bg: #FCEDEC;
  --info:   #1B5E9E;  --info-bg:#E8F1FA;

  --font-display: "Plus Jakarta Sans", "Noto Sans Myanmar", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body: "Plus Jakarta Sans", "Noto Sans Myanmar", "Padauk", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --gap: 24px;
  --shell: 1200px;
  --header-h: 68px;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-2: 0 4px 12px rgba(16,24,40,.07), 0 12px 32px rgba(16,24,40,.08);
  --shadow-3: 0 18px 48px rgba(11,18,32,.16);
  --ring: 0 0 0 3px rgba(2,57,157,.40);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0D131F; --paper-2: #121A28; --paper-3: #18202F;
    --line: #263043; --line-soft: #1E2739;
    --text: #E9EDF4; --text-2: #AEB9CA; --text-3: #7F8CA1;
    --navy-800: #04091A; --navy-700: #081640;
    --accent-100: #35120F;
    --ok-bg: #0F2A21; --warn-bg: #2C2412; --err-bg: #2A1310; --info-bg: #101F2E;
    --shadow-1: 0 1px 2px rgba(0,0,0,.5);
    --shadow-2: 0 4px 12px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.35);
    --shadow-3: 0 18px 48px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --paper: #0D131F; --paper-2: #121A28; --paper-3: #18202F;
  --line: #263043; --line-soft: #1E2739;
  --text: #E9EDF4; --text-2: #AEB9CA; --text-3: #7F8CA1;
  --navy-800: #04091A; --navy-700: #081640;
  --accent-100: #35120F;
  --ok-bg: #0F2A21; --warn-bg: #2C2412; --err-bg: #2A1310; --info-bg: #101F2E;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* height:auto so the width/height attributes reserve layout space without
   also fixing the rendered height once the width is constrained. */
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* Screen-reader-only text, and a skip link that becomes visible on focus. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-block-start: -60px; inset-inline-start: 12px; z-index: 100;
  background: var(--navy-800); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) var(--r-sm); text-decoration: none; font-weight: 600;
  transition: inset-block-start .18s ease;
}
.skip-link:focus { inset-block-start: 0; }

/* Burmese: taller line box, never track the text, never fix a height. */
:lang(my), [lang="my"] {
  font-family: "Noto Sans Myanmar", "Padauk", var(--font-body);
  line-height: 1.95; letter-spacing: normal !important; word-break: normal;
}

/* ---------- 3. Type ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; color: var(--text); margin: 0 0 .5em; line-height: 1.18; }
h1 { font-size: clamp(2rem, 1.25rem + 3vw, 3.3rem); letter-spacing: -.035em; font-weight: 800; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.3rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.32rem); letter-spacing: -.018em; }
h4 { font-size: 1.02rem; font-weight: 700; }
p  { margin: 0 0 1em; color: var(--text-2); }
.lede { font-size: clamp(1.02rem, .97rem + .3vw, 1.2rem); color: var(--text-2); max-width: 66ch; }
.eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-500);
  margin: 0 0 14px; display: block;
}
.muted { color: var(--text-3); }
.small { font-size: .875rem; }

/* Burmese type scale: Burmese set at the Latin sizes overflows and wraps. */
[lang="my"] h1, [lang="my"] h2, [lang="my"] h3 { line-height: 1.5; }
[lang="my"] h1 { font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.5rem); }
[lang="my"] h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.85rem); }
[lang="my"] h3 { font-size: clamp(1.02rem, .97rem + .3vw, 1.16rem); }
[lang="my"] .lede { font-size: clamp(.97rem, .94rem + .2vw, 1.08rem); }
[lang="my"] p, [lang="my"] .card p, [lang="my"] li { font-size: .95rem; }
[lang="my"] .eyebrow { font-size: .72rem; }
[lang="my"] .ticker-label, [lang="my"] .stat-label { font-size: .72rem; }
/* Burmese digits carry marks above and below the line, so the tight display
   line-height that suits Latin numerals makes them collide with the label. */
[lang="my"] .stat-value, [lang="my"] .ticker-value { line-height: 1.5; }

code, .code {
  font-family: var(--font-mono); font-size: .8em;
  background: var(--paper-3); color: var(--text-2);
  border: 1px solid var(--line-soft); border-radius: 5px;
  padding: 1px 6px; white-space: nowrap;
}

/* ---------- 4. Layout ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 16px; }
.section { padding: clamp(56px, 7vw, 104px) 0; }
.section--tint { background: var(--paper-2); }
.section-head { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: var(--gap); }
/* Without this a wide child - the 520px spec table - sets its column's
   min-content width and pushes the whole page sideways on a phone, even
   though the table sits in its own scroll container. */
.grid > *, .split > *, .bento > *, .stats > *, .footer-grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.split { display: grid; gap: clamp(28px, 5vw, 64px); grid-template-columns: 1.05fr .95fr; align-items: center; }
/* Two columns of running text start level; only a text-beside-image split centres. */
.split--top { align-items: start; }
.stack > * + * { margin-top: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row--between { justify-content: space-between; }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px; border-radius: 999px;
  font-weight: 600; font-size: .95rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  min-height: 46px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--accent-500); color: #fff; box-shadow: var(--shadow-1); }
.btn--primary:hover { background: var(--accent-400); box-shadow: var(--shadow-2); }
.btn--ghost { border-color: var(--line); background: transparent; color: var(--text); }
.btn--ghost:hover { border-color: var(--accent-500); color: var(--accent-500); }
.btn--on-dark { border-color: rgba(255,255,255,.28); color: #fff; background: rgba(255,255,255,.04); }
.btn--on-dark:hover { border-color: var(--accent-400); color: var(--accent-400); }
.btn--sm { padding: 9px 16px; font-size: .85rem; min-height: 38px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn[aria-busy="true"] { pointer-events: none; opacity: .85; }
.btn-link { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-500); font-weight: 600; text-decoration: none; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 4px; }
[lang="my"] .btn { font-size: .88rem; padding: 12px 20px; }
[lang="my"] .btn--sm { font-size: .8rem; padding: 9px 14px; }

/* ---------- 6. Header ---------- */
.topbar { background: var(--navy-900); color: var(--on-dark-2); font-size: .8rem; }
.topbar .shell { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: space-between; padding-block: 8px; }
.topbar a { color: var(--on-dark-2); text-decoration: none; }
.topbar a:hover { color: var(--accent-400); }

.site-header {
  position: sticky; inset-block-start: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .2s ease;
}
.site-header[data-scrolled="true"] { box-shadow: var(--shadow-1); }
.site-header .shell { display: flex; align-items: center; gap: 14px; padding-block: 12px; min-height: var(--header-h); }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-inline-end: auto; flex: none; white-space: nowrap; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 10px; flex: none; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); padding: 4px;
  display: grid; place-items: center;
}
.brand-mark img, .brand-mark svg { width: 100%; height: 100%; object-fit: contain; }
.brand-text { display: grid; gap: 5px; line-height: 1.1; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.06rem; line-height: 1.1; letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
.brand-sub { font-size: .62rem; line-height: 1.1; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
[lang="my"] .brand-sub { font-size: .62rem; letter-spacing: normal; line-height: 1.45; }

.nav { display: flex; gap: 2px; align-items: center; flex: none; }
.nav a {
  padding: 8px 13px; border-radius: 999px; text-decoration: none;
  font-weight: 500; font-size: .92rem; color: var(--text-2);
  white-space: nowrap; line-height: 1.4;
}
.nav a:hover { color: var(--text); background: var(--paper-2); }
.nav a[aria-current="page"] { color: var(--text); background: var(--paper-3); font-weight: 600; }
[lang="my"] .nav a { font-size: .86rem; padding: 8px 10px; }

/* No overflow:hidden here. Burmese glyph ink sits outside the line box, and
   clipping it to the pill cut the marks off "မြန်မာ"; the anchors carry the
   rounding instead so the shape survives without the clip. */
.lang-switch { display: flex; border: 1px solid var(--line); border-radius: 999px; flex: none; }
.lang-switch a:first-child { border-radius: 999px 0 0 999px; }
.lang-switch a:last-child { border-radius: 0 999px 999px 0; }
.lang-switch a { padding: 6px 13px; font-size: .8rem; font-weight: 600; text-decoration: none; color: var(--text-3); display: flex; align-items: center; }
.lang-switch a:hover { color: var(--text); }
.lang-switch a[aria-current="true"] { background: var(--navy-800); color: #fff; }

.burger {
  display: none; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: 11px; background: transparent; cursor: pointer;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--text); margin: 4px auto; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* The drawer is hidden with the hidden attribute, so it is hidden with CSS off too.
   It also carries .shell, which the header styles as a flex row, so the display
   has to be restated at the same specificity or the menu lays out sideways. */
.site-header .drawer { display: block; border-top: 1px solid var(--line); background: var(--paper); padding: 16px; }
.site-header .drawer[hidden] { display: none; }
.drawer a.drawer-link { display: block; padding: 13px 12px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.drawer a.drawer-link:hover { background: var(--paper-2); }
.drawer a.drawer-link[aria-current="page"] { background: var(--paper-3); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 78% -12%, rgba(217,36,29,.22), transparent 62%),
    radial-gradient(760px 420px at 6% 108%, rgba(46,66,131,.55), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-700));
  color: var(--on-dark);
  padding: clamp(56px, 8vw, 110px) 0 0;
}
.hero h1 { color: #fff; }
.hero p { color: var(--on-dark-2); }
.hero .eyebrow { color: var(--accent-400); }
.hero-grid { display: grid; gap: clamp(32px, 5vw, 60px); grid-template-columns: 1.08fr .92fr; align-items: center; }
.hero-art {
  border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  padding: 22px; box-shadow: var(--shadow-3);
}
.hero-art-bar { display: flex; gap: 6px; margin-bottom: 14px; }
.hero-art-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
.hero-art img { border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.14); }
.hero-art-credit { font-size: .72rem; color: var(--on-dark-2); margin: 10px 0 0; }

.ticker { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(255,255,255,.12); }
.ticker-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.ticker-item { padding: 20px 22px; border-inline-end: 1px solid rgba(255,255,255,.12); }
.ticker-item:last-child { border-inline-end: 0; }
.ticker-label { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--on-dark-2); }
.ticker-value { font-weight: 700; color: #fff; margin-top: 4px; }
/* One cell holds a country list, so the row is sized by its tallest cell
   rather than given a height - Burmese sets taller than Latin here. */
.ticker-grid { align-items: stretch; }
.ticker-item--wide .ticker-value { font-size: .92rem; line-height: 1.5; }

.page-hero { background: var(--navy-800); color: var(--on-dark); padding: clamp(44px, 6vw, 84px) 0; }
/* Match the home hero's measure: there the headline sits in a ~half-width
   grid column, so an unconstrained inner-page h1 reads as a larger type size. */
.page-hero h1 { color: #fff; margin-bottom: .3em; max-width: 24ch; }
[lang="my"] .page-hero h1 { max-width: 26ch; }
.page-hero p { color: var(--on-dark-2); max-width: 60ch; }
.page-hero .eyebrow { color: var(--accent-400); }
.crumbs { font-size: .82rem; color: var(--on-dark-2); margin-bottom: 18px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent-400); }

/* Hero with a photograph behind the gradient. The gradient stays on top so
   the headline contrast never depends on which part of the photo loaded. */
.hero--photo::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hero-photo);
  background-size: cover; background-position: center;
  opacity: .28; z-index: 0;
}
.hero--photo > .shell { position: relative; z-index: 1; }

/* Full-width photographic band with copy over it. */
.photo-band {
  position: relative; overflow: hidden;
  background: var(--navy-900); color: #fff;
  padding: clamp(60px, 9vw, 130px) 0;
}
.photo-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--band-photo);
  background-size: cover; background-position: center;
  opacity: .34;
}
.photo-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,17,40,.92) 0%, rgba(10,17,40,.55) 55%, rgba(10,17,40,.25) 100%);
}
.photo-band > .shell { position: relative; z-index: 1; }
.photo-band h2 { color: #fff; }
.photo-band p { color: var(--on-dark-2); }
.photo-band .eyebrow { color: var(--accent-400); }
.photo-band .stat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.photo-band .stat-value { color: #fff; }
.photo-band .stat-label { color: var(--on-dark-2); }

/* Photo credit, small and honest. */
.credit { font-size: .72rem; color: var(--text-3); margin-top: 10px; }
.photo-band .credit { color: rgba(255,255,255,.45); }

/* ---------- 8. Cards ---------- */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px; box-shadow: var(--shadow-1);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  display: flex; flex-direction: column;
}
.card:hover { border-color: var(--accent-500); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card h3 { margin-bottom: .35em; }
.card p { margin-bottom: 0; font-size: .94rem; }
.card > .btn-link { margin-top: auto; padding-top: 18px; }
.card--flat:hover { transform: none; border-color: var(--line); box-shadow: var(--shadow-1); }
/* .card sets display:flex, which outranks the hidden attribute's own rule. */
.card[hidden] { display: none; }

.icon-tile {
  width: 48px; height: 48px; border-radius: 13px; flex: none;
  display: grid; place-items: center; margin-bottom: 18px;
  background: var(--accent-100); color: var(--accent-500);
  border: 1px solid color-mix(in srgb, var(--accent-500) 24%, transparent);
  font-family: var(--font-mono); font-weight: 700; font-size: .95rem;
}
.icon-tile svg { width: 24px; height: 24px; }

.bento { display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0,1fr)); }
.bento > .card:first-child { grid-column: span 2; }

/* ---------- 9. Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gap); }
.stat { padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.stat-value { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; letter-spacing: -.03em; color: var(--text); line-height: 1.05; }
.stat-label { font-size: .82rem; color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; margin-top: 6px; }

/* ---------- 10. Lists and tables ---------- */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.ticks li { position: relative; padding-inline-start: 30px; color: var(--text-2); }
.ticks li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .62em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-500); box-shadow: 0 0 0 4px var(--accent-100);
}
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.spec { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px; }
.spec th, .spec td { text-align: start; padding: 13px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.spec th { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.spec tbody tr:last-child td { border-bottom: 0; }
.spec tbody tr:hover { background: var(--paper-2); }

/* ---------- 11. Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative; padding: 0 0 34px 44px;
  border-inline-start: 2px solid var(--line); margin-inline-start: 16px;
}
.timeline li:last-child { border-color: transparent; padding-bottom: 0; }
.timeline .step-no {
  position: absolute; inset-inline-start: -17px; top: -2px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--navy-800); color: var(--accent-400);
  display: grid; place-items: center; font-size: .82rem; font-weight: 700;
  font-family: var(--font-mono);
}
.timeline h3 { margin-bottom: .25em; }
.timeline p { margin-bottom: 0; font-size: .93rem; }

/* ---------- 12. Alerts ---------- */
.alert {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper-2);
}
.alert h4 { margin: 0 0 4px; }
.alert p { margin: 0; font-size: .92rem; }
.alert p:last-child { margin-bottom: 0; }
.alert--ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.alert--err { background: var(--err-bg); border-color: color-mix(in srgb, var(--err) 26%, transparent); }
.alert--warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.alert--info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 26%, transparent); }
.alert-mark { font-size: 1.15rem; line-height: 1.4; flex: none; }
.alert[hidden] { display: none; }

/* ---------- 13. Forms ---------- */
.form { display: grid; gap: 20px; }
/* align-content:start, or a field in a two-column row stretches its control
   to match the taller neighbour whenever only one of the two has a hint. */
.field { display: grid; gap: 7px; align-content: start; }
.field > label { font-weight: 600; font-size: .9rem; }
.req { color: var(--err); }
.hint { font-size: .82rem; color: var(--text-3); }
.control {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper);
  min-height: 46px;
  transition: border-color .15s ease, background .15s ease;
}
.control:hover { border-color: var(--text-3); }
.control::placeholder { color: var(--text-3); }
textarea.control { min-height: 140px; resize: vertical; }
.control[aria-invalid="true"] { border-color: var(--err); background: var(--err-bg); }
.field-error { font-size: .84rem; color: var(--err); font-weight: 600; }
.field-error[hidden] { display: none; }
.control[readonly], .control[disabled] { background: var(--paper-3); color: var(--text-3); }
fieldset { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px; margin: 0; }
legend { font-weight: 700; font-size: .9rem; padding-inline: 8px; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; cursor: pointer; }
.choice input { margin-top: .45em; flex: none; width: 18px; height: 18px; accent-color: var(--accent-500); }
/* The options are short, so two columns keep the group from running down the
   page; it collapses to one column with the rest of the layout. */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 18px; }
@media (max-width: 720px) { .choices { grid-template-columns: 1fr; } }

/* Honeypot: a field no human sees, and a bot fills in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 14. Media ---------- */
.figure { margin: 0; }
/* height:auto is required, not cosmetic: the width/height attributes on the
   img are there to reserve layout space, and without this the height
   attribute wins as a presentational hint and the image is stretched. */
.figure img, .figure svg {
  display: block; width: 100%; height: auto;
  border-radius: var(--r); border: 1px solid var(--line); background: var(--paper-2);
}
.figure figcaption { font-size: .84rem; color: var(--text-3); padding-top: 10px; }
/* Two device photos side by side: the supplier ships them at different
   aspect ratios, so pin one ratio or the pair sits at unequal heights. */
.figure--device img { aspect-ratio: 3 / 2; object-fit: cover; }

.logo-wall { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }

/* Client logo marquee. One row, scrolling continuously.
   The track holds the logos twice; the animation moves it by exactly half its
   width, so the second copy is in the first copy's place when it loops and the
   seam is invisible. The duplicate is aria-hidden so a screen reader hears the
   list once. */
.logo-marquee {
  position: relative;
  overflow: hidden;
  padding-block: 4px;
  /* Fade both edges so logos enter and leave instead of being cut off. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
@keyframes logo-scroll { to { transform: translateX(-50%); } }
.logo-track {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: logo-scroll 70s linear infinite;
  will-change: transform;
}
/* Pause while a visitor is reading, and while a keyboard user is tabbing through. */
.logo-marquee:hover .logo-track,
.logo-marquee:focus-within .logo-track { animation-play-state: paused; }

/* With JS on the row becomes a real scroll container so it can be dragged or
   flicked left and right; the script then drives the same continuous motion by
   moving scrollLeft, so the keyframe animation is handed over rather than run
   twice. The scrollbar is hidden because the fade mask already signals the
   overflow and the row is one line tall. */
.logo-marquee[data-drag="on"] {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  overscroll-behavior-x: contain;
}
.logo-marquee[data-drag="on"]::-webkit-scrollbar { width: 0; height: 0; }
.logo-marquee[data-drag="on"] .logo-track { animation: none; }
.logo-marquee[data-dragging="true"] { cursor: grabbing; }
.logo-marquee[data-dragging="true"] .client-logo { pointer-events: none; }

/* The tile. Each logo file is already a 3:2 white canvas with the mark centred
   and scaled to the same proportion, so the tile needs no padding of its own
   and no blend mode. Normalising the images rather than the CSS is what keeps a
   dark-block logo the same visual weight as a thin wordmark. */
.client-logo {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.client-logo:hover { border-color: var(--accent-500); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.client-logo img { width: 100%; height: auto; display: block; }

.logo-track .client-logo { width: 176px; flex: none; }
@media (max-width: 720px) { .logo-track .client-logo { width: 140px; } }
.logo-slot {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); padding: 20px 14px;
  display: grid; place-items: center; text-align: center;
  color: var(--text-3); font-size: .82rem; font-weight: 600;
  min-height: 78px;
}
/* Only mounted once an embed URL is configured, so it never renders as an
   empty grey box and never loads Google on a page with nothing to show. */
/* ---------- 14a. Loading screen ----------
   The element only exists while the page is loading, and only when the script
   ran at all, so nothing here can leave a visitor looking at a covered page. */
.preloader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--paper); transition: opacity .35s ease, visibility .35s ease;
}
.preloader[data-hide="yes"] { opacity: 0; visibility: hidden; }
.preloader-inner { display: grid; justify-items: center; gap: 22px; text-align: center; }
/* The ring turns around the mark; the mark itself never rotates. */
.preloader-ring {
  position: relative; display: grid; place-items: center;
  width: 108px; height: 108px; border-radius: 50%;
}
.preloader-ring::before, .preloader-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent;
}
.preloader-ring::before {
  border-top-color: var(--accent-500); border-right-color: var(--accent-500);
  animation: preloader-spin 1.1s linear infinite;
}
.preloader-ring::after {
  inset: 9px; border-bottom-color: var(--brand-blue); border-left-color: var(--brand-blue);
  animation: preloader-spin 1.6s linear infinite reverse;
}
.preloader-ring .brand-mark {
  width: 62px; height: 62px; box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent-500) 8%, transparent);
}
.preloader-text { gap: 8px; }
.preloader-text .brand-name { font-size: 1.3rem; }
.preloader-text .brand-sub { font-size: .68rem; color: var(--text-2); }
@keyframes preloader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  /* No spin: a full ring in the brand colours, holding still. */
  .preloader-ring::before { animation: none; border-color: var(--accent-500); opacity: .35; }
  .preloader-ring::after { animation: none; border-color: var(--brand-blue); opacity: .35; }
}

/* ---------- 14b. Office picker ----------
   Only the JavaScript-upgraded state is styled: with JS off the offices stay
   the plain three-column grid the markup declares, which is why .grid-3 is not
   touched here. */
.offices { display: grid; gap: var(--gap); grid-template-columns: minmax(170px, 230px) 1fr; align-items: stretch; }
/* Without this a grid child takes its content's width as its minimum, and the
   scrolling tab strip on a phone makes the whole page wider than the screen. */
.offices > * { min-width: 0; }
.office-tabs { display: grid; gap: 6px; align-content: start; }
.office-tab {
  text-align: left; cursor: pointer; font-weight: 600; font-size: .92rem;
  padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); color: var(--text); font-family: inherit;
}
.office-tab:hover { border-color: var(--accent-500); }
/* The selected office is marked by the border and the bar, never by colour
   alone, and never by removing the outline a keyboard user needs. */
.office-tab[aria-selected="true"] {
  border-color: var(--accent-500); background: var(--accent-100);
  box-shadow: inset 3px 0 0 var(--accent-500);
}

/* The panel ends level with the last tab. That costs no white space because
   the map takes whatever height the address leaves - which is also why the
   tabs carry the office name alone: a shorter list keeps the map sensible. */
.office-panels { display: grid; }
/* .card is a flex column; the row direction here is the override, not a
   default. Setting display also outranks .card[hidden], hence the rule below
   it - that attribute is what keeps the six unselected offices off the page. */
.office-panels > .card { display: flex; flex-direction: row; gap: 26px; height: 100%; padding: 26px 28px; }
.office-panels > .card[hidden] { display: none; }
.office-text { flex: 1 1 52%; min-width: 0; display: flex; flex-direction: column; }
.office-map { flex: 1 1 48%; min-width: 0; display: flex; flex-direction: column; }
.office-map .map-embed { margin-top: 0; flex: 1; min-height: 210px; display: grid; place-items: center; }
/* Until the visitor asks for it, the map's place holds the button that fetches
   it - not a grey box, and not a frame Google has already been told about. */
.map-ask { background: var(--paper); }
.office-map .map-embed iframe { height: 100%; min-height: 210px; }
@media (max-width: 1040px) {
  .office-panels > .card { flex-direction: column; gap: 18px; }
  .office-map .map-embed { flex: none; height: 230px; }
}
@media (max-width: 860px) {
  .offices { grid-template-columns: 1fr; }
  /* A phone gets a horizontal strip instead of a tall list it must scroll past
     to reach the address. No fixed height: a Burmese office name wraps. */
  .office-tabs { grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; padding-bottom: 4px; }
  .office-panels > .card { padding: 22px; }
}

.map-embed { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--paper-2); }
/* The map sits in the contact sidebar, about 400px wide, so it is squarer
   than a full-width band would be. No fixed aspect ratio: the card's own
   width decides, and 260px keeps the surrounding streets readable. */
.map-embed iframe { width: 100%; height: 260px; border: 0; display: block; }
@media (max-width: 720px) { .map-embed iframe { height: 220px; } }

/* ---------- 15. Footer ---------- */
.site-footer { background: var(--navy-900); color: var(--on-dark-2); padding: clamp(48px, 6vw, 76px) 0 0; }
.site-footer h4 { color: #fff; font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 16px; }
[lang="my"] .site-footer h4 { letter-spacing: normal; }
.site-footer a { color: var(--on-dark-2); text-decoration: none; }
.site-footer a:hover { color: var(--accent-400); }
.site-footer .brand-mark { background: #fff; border-color: rgba(255,255,255,.2); }
.site-footer .brand-name { color: #fff; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .92rem; }
.social { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.social-link { display: inline-flex; align-items: center; gap: 7px; }
/* A fixed height would cut a Burmese label; the icon is sized on its own. */
.social-icon { width: 16px; height: 16px; flex: none; }
/* The legal row sits with the copyright, not in the Company column: it is a
   different kind of link and every site puts it here. */
.footer-legal a + a { margin-left: 2px; }
.footer-bottom {
  margin-top: 44px; border-top: 1px solid rgba(255,255,255,.1);
  padding: 20px 0; font-size: .84rem;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
}

/* ---------- 16. CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--navy-800), var(--navy-600));
  color: #fff; border-radius: var(--r-lg); padding: clamp(32px, 5vw, 56px);
  display: grid; gap: 24px; grid-template-columns: 1.4fr auto; align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: .2em; }
.cta-band p { color: var(--on-dark-2); margin: 0; }

/* ---------- 17. Back to top ---------- */
.to-top {
  position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 60;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  background: var(--navy-800); color: #fff;
  border: 1px solid rgba(255,255,255,.16); box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, background .2s ease;
}
.to-top[data-visible="true"] { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent-500); }
.to-top svg { width: 18px; height: 18px; }
@media (max-width: 720px) { .to-top { inset-block-end: 16px; inset-inline-end: 16px; width: 44px; height: 44px; } }

/* ---------- 18. Loading ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.spinner--lg { width: 40px; height: 40px; border-width: 3.5px; border-color: color-mix(in srgb, var(--text-3) 35%, transparent); border-top-color: var(--accent-500); }
.loading { display: grid; justify-items: center; gap: 14px; text-align: center; padding: clamp(40px, 6vw, 72px) 24px; }
.loading p { margin: 0; color: var(--text-3); font-size: .92rem; }

/* ---------- 19. Scroll reveal ----------
   Applied by JS only; with JS off the .is-revealed class is never needed
   because the base state is visible until JS marks the document ready. */
[data-reveal] { opacity: 1; }
html[data-js="on"] [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
html[data-js="on"] [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Touch. Measured at 360px: the language switch came out 36px tall and the
   checkboxes 18px, both under the 44px a finger needs. Scoped to coarse
   pointers so the mouse-driven layout keeps its tighter proportions. */
@media (pointer: coarse) {
  .lang-switch a { padding-block: 11px; }
  .choice { padding: 10px 0; }
  .choice input { width: 20px; height: 20px; }
  .brand { padding-block: 4px; }
}

/* ---------- 20. Responsive ---------- */
@media (max-width: 1180px) {
  [lang="my"] .nav { display: none; }
  [lang="my"] .burger { display: block; }
}
@media (max-width: 1024px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .grid-4, .stats, .logo-wall { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bento > .card:first-child { grid-column: span 2; }
  .ticker-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ticker-item:nth-child(2) { border-inline-end: 0; }
  .nav { display: none; }
  .burger { display: block; }
}
/* Tablet portrait. Three cards across a 768px screen leaves about 225px each,
   which is too narrow for Burmese body copy, so drop to two before that. */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4, .stats, .bento, .cta-band, .footer-grid { grid-template-columns: 1fr; }
  .bento > .card:first-child { grid-column: auto; }
  .logo-wall { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ticker-grid { grid-template-columns: 1fr; }
  .ticker-item { border-inline-end: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .card { padding: 20px; }
  .topbar .shell { font-size: .75rem; }
  /* The header CTA repeats inside the drawer, so drop it here rather than let
     brand + language + button + burger fight over the width. */
  .site-header .shell > .btn { display: none; }
  .site-header .shell { gap: 10px; }
  /* Same touch sizing as the coarse-pointer rule above. Repeated on width
     because a phone that reports a fine pointer still has a finger on it. */
  .lang-switch a { padding-block: 11px; }
  .choice { padding: 10px 0; }
  .choice input { width: 20px; height: 20px; }
  .brand { padding-block: 4px; }
}

/* Small phones. Designed rather than reflowed: at this width the brand
   subtitle, the topbar's second line and the figure captions all cost more
   than they give, and the tap targets must stay full size. */
@media (max-width: 400px) {
  .shell { padding-inline: 14px; }
  .brand-sub { display: none; }
  .brand-name { font-size: .98rem; overflow: hidden; text-overflow: ellipsis; }
  .brand-mark { width: 34px; height: 34px; }
  /* The brand must give way here, or it pushes the burger off the screen. */
  .brand { gap: 9px; flex: 0 1 auto; min-width: 0; }
  .brand-text { min-width: 0; }
  .site-header .shell { gap: 8px; }
  .lang-switch a { padding-inline: 10px; font-size: .76rem; }
  .topbar .shell > span:first-child { display: none; }
  .logo-track .client-logo { width: 124px; }
  .figure--device img { aspect-ratio: 4 / 3; }
  /* A 520px table cannot fit, so let it scroll and say so. */
  .table-wrap { scrollbar-width: thin; }
  .alert { padding: 14px; gap: 10px; }
  .cta-band { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .logo-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .logo-track { animation: none; }
  html { scroll-behavior: auto; }
  html[data-js="on"] [data-reveal] { opacity: 1; transform: none; }
}
@media print {
  .site-header, .topbar, .to-top, .cta-band, .burger { display: none !important; }
  body { color: #000; background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}