:root {
  --paper: #ffffff;
  --ink: #1e1f1d;
  --muted: #696a66;
  --gold: #b79552;
  --gold-soft: #d8c69c;
  --line: #ddd6c6;
  --font-body: "Plus Jakarta Sans", sans-serif;
  --font-thin: "Plus Jakarta Sans", sans-serif;
  --font-bold: "Plus Jakarta Sans", sans-serif;
  --font-title: "Montserrat", sans-serif;
  --font-subtitle: "Plus Jakarta Sans", sans-serif;
  --font-time: "Inter", sans-serif;
  --font-decorative: "Inter", sans-serif;
  --font-balerno: "Plus Jakarta Sans", sans-serif;
  --font-bayon: "Plus Jakarta Sans", sans-serif;
  --font-philosopher: "Plus Jakarta Sans", sans-serif;
  --serif: var(--font-title);
  --sans: var(--font-body);
  --page: min(1280px, calc(100vw - 96px));
  --motion-fast: .34s;
  --motion-medium: .78s;
  --motion-slow: 1.32s;
  --motion-cinematic: 1.5s;
  --motion-stagger: .1s;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-cinematic-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Final desktop header alignment: text utilities above, balanced navigation below. */
@media (min-width: 981px) {
  .site-topbar .topbar-tools {
    position: absolute !important;
    top: 8px;
    right: clamp(32px, 3.2vw, 48px);
    width: auto !important;
    gap: 18px !important;
    z-index: 3;
  }
  .site-topbar .career-link,
  .site-topbar .contact-link {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
    padding: 2px 0 !important;
    color: #30312e !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 8px !important;
    font-weight: 500 !important;
    letter-spacing: .1em !important;
    line-height: 1.2;
  }
  .site-topbar .career-link:hover,
  .site-topbar .career-link:focus-visible,
  .site-topbar .contact-link:hover,
  .site-topbar .contact-link:focus-visible {
    color: var(--gold) !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0;
  }
  .site-topbar .primary-nav {
    position: absolute !important;
    left: clamp(220px, 17.5vw, 252px);
    right: clamp(250px, 20vw, 288px);
    bottom: 1px;
    width: auto !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    justify-items: center;
    gap: 0 !important;
  }
  .site-topbar .primary-nav > a,
  .site-topbar .primary-nav-sector-link {
    width: max-content;
    padding: 10px 0 8px;
    font-size: 10px;
    letter-spacing: .085em;
    text-align: center;
  }
  .site-topbar .primary-nav-sector {
    width: 100%;
    align-self: stretch;
    justify-content: center;
  }
  .site-topbar .language {
    position: fixed !important;
    right: clamp(286px, 22vw, 320px);
    top: 64px;
    bottom: auto !important;
    margin: 0 !important;
    font-size: 8px !important;
    gap: 6px;
    line-height: 1;
  }
  .site-topbar .language i { height: 10px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; overflow-x: clip; background: #fff; }

@media (min-width: 981px) {
  main > section:not(:first-of-type) {
    margin-top: 128px !important;
  }
}
body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
main { background: #fff; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.page-section { width: var(--page); max-width: 85vw; margin-inline: auto; }
.opening-inner,
.site-footer { max-width: none; }
.section-index { margin: 0 0 25px; color: #33332f; font-size: var(--fs-label-section, 11px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.section-index b { color: var(--gold); font-weight: 600; }
.section-index span { margin: 0 12px; color: var(--gold); }

/* Section titles stand on their own; redundant numbered overlines are removed site-wide. */
.section-index,
.callout-kicker,
.watermark {
  display: none !important;
}
.gold-rule { display: block; width: 34px; height: 2px; margin: 22px 0 20px; background: var(--gold); }
.section-desc { max-width: 320px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2 { font-family: var(--font-title); }
h3 { font-family: var(--font-subtitle); }
.split-reveal-title { isolation: isolate; }
.titleRevealLine,
.titleRevealLine-mask {
  position: relative !important;
  display: block !important;
  background: transparent !important;
}
.titleRevealLine-mask {
  width: max-content;
  max-width: none;
  overflow: hidden !important;
}
main > section:not(.opening) { max-width: 85vw; margin-inline: auto; background-color: #fff; }

.site-topbar {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;
  padding-inline: clamp(32px, 3.2vw, 48px);
  display: grid;
  grid-template-columns: clamp(164px, 13.5vw, 190px) minmax(0, 1fr) clamp(205px, 16vw, 225px);
  align-items: center;
  gap: clamp(16px, 1.6vw, 22px);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: transform .35s ease, height .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.site-topbar.is-scrolled {
  top: 0;
  height: 72px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 8px 28px rgba(46,39,25,.08);
}
.site-topbar.is-hidden { transform: translateY(-110%); }
.topbar-brand { height: 100%; display: flex; align-items: center; justify-content: flex-start; }
.topbar-brand img { width: clamp(150px, 11.8vw, 170px); height: 44px; object-fit: contain; object-position: left center; filter: none; opacity: 1; transition: width .3s ease, height .3s ease; }
.site-topbar.is-scrolled .topbar-brand img { width: 158px; height: 40px; }
.primary-nav { display: flex; align-items: center; justify-content: flex-start; gap: clamp(24px, 2.5vw, 36px); }
.primary-nav-sector { position: relative; align-self: stretch; display: flex; align-items: center; }
.primary-nav-sector-link { position: relative; }
.primary-nav-sector-chevron {
  position: absolute;
  right: -10px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s ease, color .25s ease;
}
.primary-nav-sector-menu {
  position: absolute;
  top: calc(100% - 4px);
  left: 50%;
  width: min(540px, calc(100vw - 48px));
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(183, 149, 82, .34);
  box-shadow: 0 22px 58px rgba(31, 39, 48, .16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .24s ease, visibility .24s ease, transform .32s cubic-bezier(.16, 1, .3, 1);
}
.primary-nav-sector-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.primary-nav .primary-nav-sector-menu a {
  min-height: 48px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #30312e;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .035em;
  line-height: 1.35;
  text-transform: none;
  white-space: normal;
  transition: color .22s ease, background-color .22s ease, border-color .22s ease;
}
.primary-nav .primary-nav-sector-menu a::after { display: none; }
.primary-nav .primary-nav-sector-menu a > span { color: var(--gold); font-family: var(--font-time); font-size: 11px; letter-spacing: .08em; }
.primary-nav .primary-nav-sector-menu a > b { font-weight: 500; }
.primary-nav .primary-nav-sector-menu a:hover,
.primary-nav .primary-nav-sector-menu a:focus-visible { color: #76551d; background: rgba(183, 149, 82, .08); border-color: rgba(183, 149, 82, .26); outline: 0; }
.primary-nav-sector:hover .primary-nav-sector-menu,
.primary-nav-sector.is-open .primary-nav-sector-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.primary-nav-sector:hover .primary-nav-sector-chevron,
.primary-nav-sector.is-open .primary-nav-sector-chevron { color: var(--gold); transform: translateY(-25%) rotate(225deg); }
.primary-nav a { position: relative; padding: 12px 0; color: #30312e; font-family: var(--font-body); font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: color .25s ease; }
.primary-nav a::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 0; height: 1px; background: var(--gold); transform: translateX(-50%); transition: width .3s ease; }
.primary-nav a:hover { color: #946d2c; }
.primary-nav a:hover::after { width: 100%; }
.topbar-tools { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.language { display: flex; align-items: center; gap: 9px; color: inherit; font-size: 11px; line-height: 1; }
.language b { color: var(--gold); }
.language i { width: 1px; height: 12px; background: var(--line); }
.language button,
.mobile-language button {
  padding: 0;
  color: inherit;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.language button:hover,
.language button:focus-visible,
.mobile-language button:hover,
.mobile-language button:focus-visible,
.language button.is-active,
.mobile-language button.is-active {
  color: var(--gold);
  outline: 0;
}
.language button[aria-pressed="true"],
.mobile-language button[aria-pressed="true"] { font-weight: 700; }
.mobile-language { display: none; }
.search-link { position: relative; display: block; width: 27px; height: 27px; flex: 0 0 27px; }
.search-link span::before { content: ""; position: absolute; left: 5px; top: 4px; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%; }
.search-link span::after { content: ""; position: absolute; left: 15px; top: 15px; width: 7px; height: 1.5px; background: currentColor; transform: rotate(45deg); transform-origin: left center; }
.career-link { min-width: 104px; height: 36px; padding: 0 16px; display: grid; place-items: center; color: var(--gold); background: rgba(255,255,255,.72); border: 1px solid var(--gold); border-radius: 0; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-align: center; text-transform: uppercase; white-space: nowrap; transition: color .25s ease, background-color .25s ease, transform .25s ease; }
.career-link:hover, .career-link:focus-visible { color: #fff; background: var(--gold); outline: 0; }
.contact-link { min-width: 104px; height: 36px; padding: 0 16px; display: grid; place-items: center; color: #fff; background: var(--gold); border: 1px solid var(--gold); border-radius: 0; box-shadow: none; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-align: center; text-transform: uppercase; transition: color .25s ease, background-color .25s ease; }
.contact-link:hover { color: var(--gold); background: #fff; border-color: var(--gold); transform: none; }
.nav-toggle, .mobile-nav-actions { display: none; }

/* Desktop header: a quiet utility rail above an evenly spaced navigation row. */
@media (min-width: 981px) {
  .site-topbar {
    height: 88px;
    align-items: stretch;
  }
  .site-topbar .topbar-tools {
    position: absolute;
    top: 8px;
    right: clamp(32px, 3.2vw, 48px);
    width: auto;
    gap: 18px;
    align-items: center;
    z-index: 3;
  }
  .site-topbar .career-link,
  .site-topbar .contact-link {
    width: auto;
    min-width: 0;
    height: auto;
    flex: 0 0 auto;
    padding: 2px 0;
    color: #30312e;
    background: transparent;
    border: 0;
    box-shadow: none;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.2;
  }
  .site-topbar .career-link:hover,
  .site-topbar .career-link:focus-visible,
  .site-topbar .contact-link:hover,
  .site-topbar .contact-link:focus-visible {
    color: var(--gold);
    background: transparent;
    border: 0;
    outline: 0;
  }
  .site-topbar .primary-nav {
    position: absolute;
    left: clamp(220px, 17.5vw, 252px);
    right: clamp(250px, 20vw, 288px);
    bottom: 1px;
    width: auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    justify-items: center;
    gap: 0;
  }
  .site-topbar .primary-nav > a,
  .site-topbar .primary-nav-sector-link {
    width: max-content;
    padding: 10px 0 8px;
    font-size: 10px;
    letter-spacing: .085em;
    text-align: center;
  }
  .site-topbar .primary-nav-sector {
    width: 100%;
    align-self: stretch;
    justify-content: center;
  }
  .site-topbar .language {
    position: absolute;
    right: clamp(286px, 22vw, 320px);
    bottom: -1px;
    margin: 0;
    font-size: 8px;
    gap: 6px;
    line-height: 1;
  }
  .site-topbar .language i { height: 10px; }
}

/* Desktop header: keep the utility links compact in a quiet top rail. */
@media (min-width: 981px) {
  .site-topbar .topbar-tools {
    position: absolute;
    top: 10px;
    right: clamp(32px, 3.2vw, 48px);
    width: auto;
    gap: 10px;
    z-index: 3;
  }
  .site-topbar .language { font-size: 9px; gap: 6px; }
  .site-topbar .language i { height: 10px; }
  .site-topbar .career-link,
  .site-topbar .contact-link {
    width: 78px;
    min-width: 78px;
    flex: 0 0 78px;
    height: 23px;
    padding-inline: 10px;
    box-sizing: border-box;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .08em;
  }
}

@media (min-width: 981px) and (max-width: 1100px) {
  .site-topbar {
    padding-inline: 32px;
    grid-template-columns: 160px minmax(0, 1fr) 210px;
    gap: 14px;
  }
  .topbar-brand img { width: 154px; }
  .site-topbar.is-scrolled .topbar-brand img { width: 148px; }
  .primary-nav { gap: 12px; }
  .primary-nav a { font-size: 10px; letter-spacing: .075em; }
  .topbar-tools { gap: 11px; }
  .contact-link { min-width: 100px; padding-inline: 13px; }
}

/* Keep the shared desktop header balanced after replacing search with recruitment. */
@media (min-width: 981px) {
  .site-topbar {
    grid-template-columns: clamp(158px, 12.5vw, 182px) minmax(0, 1fr) clamp(270px, 21vw, 304px);
    gap: clamp(16px, 1.45vw, 22px);
  }
  .primary-nav { width: 100%; justify-content: space-evenly; gap: 0; }
  .topbar-tools { gap: 9px; }
  .language { margin-right: 4px; }
  .career-link, .contact-link { min-width: 96px; padding-inline: 12px; font-family: var(--font-time); }
}

/* Final desktop header fit: keep every label on one row with clear separation. */
@media (min-width: 981px) {
  .site-topbar .primary-nav {
    right: clamp(310px, 23vw, 340px) !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
    white-space: nowrap;
  }
  .site-topbar .primary-nav > a,
  .site-topbar .primary-nav-sector-link {
    white-space: nowrap;
  }
  .site-topbar .primary-nav > a:last-of-type {
    font-size: 10px !important;
    letter-spacing: .085em;
  }
  .site-topbar .language {
    position: absolute !important;
    right: clamp(250px, 18vw, 270px) !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
    font-size: 10px !important;
    letter-spacing: .085em;
    white-space: nowrap;
  }
  .site-topbar .career-link {
    font-size: 7px !important;
    letter-spacing: .09em !important;
  }
}

@media (min-width: 981px) and (max-width: 1100px) {
  .site-topbar { grid-template-columns: 148px minmax(0, 1fr) 226px; }
  .primary-nav { gap: 0; }
  .primary-nav a { font-size: 9.2px; letter-spacing: .055em; }
  .topbar-tools { gap: 6px; }
  .language { margin-right: 1px; font-size: 9px; }
  .career-link, .contact-link { min-width: 82px; height: 34px; padding-inline: 8px; font-size: 9px; letter-spacing: .07em; }
}

/* Homepage desktop header: let the full navigation rail use the viewport
   instead of compressing the links into a narrow center column. */
@media (min-width: 1200px) {
  .site-topbar {
    padding-inline: clamp(18px, 1.7vw, 28px);
    grid-template-columns: clamp(158px, 12.5vw, 182px) minmax(0, 1fr) clamp(180px, 14vw, 220px);
    gap: clamp(16px, 1.45vw, 22px);
  }

  .site-topbar .primary-nav {
    left: clamp(190px, 14vw, 220px) !important;
    right: clamp(245px, 18vw, 270px) !important;
    justify-content: space-between;
  }

  .site-topbar .language {
    right: clamp(180px, 14vw, 220px) !important;
  }

  .site-topbar .topbar-tools {
    right: clamp(18px, 1.7vw, 28px);
  }
}

@media (max-width: 980px) {
  .mobile-nav-actions {
    width: min(310px, calc(100vw - 48px));
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .primary-nav .mobile-nav-actions a {
    min-height: 44px;
    padding: 0 12px;
    display: grid;
    place-items: center;
    border: 1px solid var(--gold);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    opacity: 1;
    transform: none;
  }
  .primary-nav .mobile-nav-careers { color: var(--gold); background: transparent; }
  .primary-nav .mobile-nav-contact { color: #fff; background: var(--gold); }
  .mobile-language {
    min-height: 44px;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--ink);
    font-size: 16px;
    letter-spacing: .1em;
  }
  .mobile-language i { width: 1px; height: 16px; background: var(--line); }
}

@media (min-width: 981px) and (max-width: 1000px) {
  .site-topbar {
    padding-inline: 24px;
    gap: 12px;
  }
}

.opening { position: relative; min-height: 715px; border-bottom: 1px solid var(--line); background: #fff; overflow: hidden; }
.opening-inner { position: relative; min-height: 715px; display: flex; align-items: center; }
.opening-inner::after { display: none; }
.opening-copy { position: relative; z-index: 2; width: min(560px, 42%); padding: 112px 0 42px; }
.opening-label { margin: 0 0 20px; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.opening-copy h1,
.capability-copy h2,
.investment > h2,
.featured-projects > h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  line-height: .93;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.opening-copy h1 { color: #172130; font-size: clamp(43px, 4vw, 48px); line-height: 1.08; letter-spacing: -.035em; text-shadow: none; }
.opening-copy h1 > span { display: block; }
.opening-copy h1 > span + span { margin-top: 3px; }
.opening-intro { max-width: 435px; margin: 23px 0 0; color: #384554; font-size: 14px; line-height: 1.7; text-shadow: none; }
.opening-actions { display: flex; align-items: center; gap: 38px; margin-top: 32px; }
.opening-actions a { font-size: var(--fs-label-button, 11px); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.opening-actions a:first-child { padding: 16px 29px; color: #fff; background: var(--gold); }
.opening-actions a:last-child { display: flex; gap: 21px; color: var(--gold); }
.opening-media { position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); }
.opening-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.4) 28%, rgba(255,255,255,.08) 48%, transparent 62%); pointer-events: none; }
.opening-image { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; filter: saturate(.94) contrast(1.02) brightness(.99); }
.opening-scroll { display: none; }

.brand-story {
  position: relative;
  min-height: 0;
  margin-top: 60px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 56%) minmax(0, 44%);
  align-items: stretch;
  border-bottom: 0;
  background: #fff;
  overflow: hidden;
}
.brand-story-visual { position: relative; z-index: 1; min-height: 0; }
.brand-collage { position: relative; width: 100%; height: 100%; min-height: 0; isolation: isolate; }
.brand-collage-image {
  position: absolute;
  left: 0;
  width: 78%;
  height: calc(50% - 12px);
  margin: 0;
  overflow: hidden;
  background: #d8d4ca;
}
.brand-collage-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 55%, rgba(17,31,43,.12)); pointer-events: none; }
.brand-collage-image img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: saturate(.78) contrast(1.025); transform: scale(1.015); transition: transform .9s cubic-bezier(.16,1,.3,1), filter .5s ease; }
.brand-collage-image:hover img { filter: saturate(.96) contrast(1.02); transform: scale(1.045); }
.brand-collage-image-top { top: 0; clip-path: polygon(0 0, 90% 0, 100% 13%, 72% 100%, 0 100%); }
.brand-collage-image-bottom { bottom: 0; clip-path: polygon(0 0, 72% 0, 100% 74%, 92% 100%, 0 100%); }
.brand-collage-image-top img { object-position: center 50%; }
.brand-collage-image-bottom img { object-position: center 60%; }
.brand-collage-logo {
  position: absolute;
  z-index: 3;
  left: 78%;
  top: 50%;
  width: min(29%, 230px);
  padding: 0;
  margin-left: 25px;
  display: grid;
  place-items: center;
  background: transparent;
  transform: translate(-50%, -50%);
}
.brand-collage-logo img {
  display: block;
  width: 100%;
  height: auto;
  margin: auto;
  object-fit: contain;
}
.brand-story-copy {
  position: relative;
  z-index: 2;
  padding: 0 clamp(18px, 2vw, 30px) 0 clamp(34px, 3.7vw, 56px);
  align-self: center;
  isolation: isolate;
}
.brand-story-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -12vw 36px -30px;
  background-image:
    linear-gradient(30deg, rgba(30,62,91,.08) 12%, transparent 12.5%, transparent 87%, rgba(30,62,91,.08) 87.5%),
    linear-gradient(150deg, rgba(30,62,91,.08) 12%, transparent 12.5%, transparent 87%, rgba(30,62,91,.08) 87.5%);
  background-size: 22px 38px;
  background-position: 0 0, 11px 19px;
  mask-image: radial-gradient(ellipse at 57% 46%, #000 0 54%, transparent 82%);
  opacity: .72;
  pointer-events: none;
}
.brand-story-accent { display: block; width: 100px; height: 4px; margin-bottom: 26px; background: #e6542e; }
.brand-story-copy h2 { margin: 0 0 38px; color: #17304c; font-family: var(--font-title); font-size: clamp(30px, 2.8vw, 38px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; }
.brand-story-copy p { max-width: 610px; margin: 0 0 18px; color: #33383d; font-size: 14px; line-height: 1.72; }
.brand-story-copy p:last-child { margin-bottom: 0; }
.brand-story-copy strong { color: var(--ink); font-weight: 600; }
.brand-story-extra,
.brand-story-extra-inner { display: contents; }
.brand-mobile-nav,
.brand-mobile-swipe,
.brand-mobile-pagination,
.brand-story-more { display: none; }
.development-path {
  position: relative;
  padding: clamp(96px, 9vw, 132px) 0 clamp(87px, 7.5vw, 114px);
  border-bottom: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}
.development-path > h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #a88137;
  font-family: var(--font-title);
  font-size: clamp(44px, 4.2vw, 56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .035em;
  text-align: center;
  text-transform: none;
}
.development-path > h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin: 22px auto 0;
  background: var(--gold);
  transform: scaleX(var(--gold-line-scale, 1));
  transform-origin: 0 50%;
}
.development-path-stage {
  position: relative;
  width: min(1200px, 100%);
  height: auto;
  aspect-ratio: 12 / 5;
  margin: 16px auto 0;
}
.development-path-center {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 34%;
  height: 88%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.development-path-logo {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 42.4%;
  height: auto;
  transform: translate(-50%, -50%);
  filter: saturate(.95) contrast(1.02);
  transition: transform .72s cubic-bezier(.22,.8,.24,1);
  will-change: transform;
}
.development-path-detail {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 96%;
  height: 96%;
  padding: 1px;
  border: 0;
  background: linear-gradient(145deg, #dfc07a, #8f6727 58%, #ead5a4);
  border-radius: 48% 48% 10px 10px / 30% 30% 10px 10px;
  box-shadow: 0 22px 44px rgba(65,48,19,.16), 0 0 0 6px rgba(181,138,62,.04);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -47%) scale(.94);
  transition: opacity .38s ease, visibility .38s ease, transform .52s cubic-bezier(.22,.8,.24,1);
  will-change: opacity, transform;
}
.development-path-detail-backdrop,
.development-path-detail-close { display: none; }
.development-path-detail-inner {
  height: 100%;
  padding: 64px 34px 24px;
  display: grid;
  align-content: start;
  justify-items: center;
  border-radius: calc(48% - 1px) calc(48% - 1px) 9px 9px / calc(30% - 1px) calc(30% - 1px) 9px 9px;
  background:
    radial-gradient(circle at 50% 9%, rgba(206,169,91,.12), transparent 34%),
    #fff;
  text-align: center;
}
.development-path-detail span {
  color: #aa7e33;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.development-path-detail strong {
  margin-top: 10px;
  color: #a67a30;
  font-family: var(--font-title);
  font-size: clamp(44px, 3.8vw, 58px);
  font-weight: 500;
  line-height: .8;
}
.development-path-detail h3 {
  max-width: 330px;
  margin: 13px 0 0;
  color: #1f211d;
  font-family: var(--font-title);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1;
}
.development-path-detail p {
  max-width: 330px;
  margin: 12px 0 0;
  color: #6f716a;
  font-size: 12px;
  line-height: 1.5;
}
.development-path-detail small {
  margin-top: 12px;
  color: #a98a52;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .16em;
}
.development-path-stage.has-active .development-path-logo {
  opacity: 0;
  transform: translate(-50%, -50%);
}
.development-path-stage.has-active .development-path-detail {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.development-path-detail.is-updating .development-path-detail-inner > * {
  animation: development-detail-in .55s cubic-bezier(.22,.8,.24,1) both;
}
.development-path-detail.is-updating strong { animation-delay: .03s; }
.development-path-detail.is-updating h3 { animation-delay: .07s; }
.development-path-detail.is-updating p { animation-delay: .11s; }
.development-path-detail.is-updating small { animation-delay: .15s; }
@keyframes development-detail-in {
  from { opacity: 0; transform: translateY(13px); }
  to { opacity: 1; transform: translateY(0); }
}
.development-path-connectors {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.development-path-connectors path {
  fill: none;
  stroke: #bd994f;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: opacity .3s ease, stroke .3s ease, stroke-width .3s ease, filter .3s ease;
}
.development-path-stage.has-sequence-animation .development-path-connectors path {
  stroke-dasharray: var(--connector-length) var(--connector-length);
  stroke-dashoffset: var(--connector-length);
}
.development-path-stage.has-sequence-animation .development-path-connectors path.is-drawing {
  animation: development-connector-draw .708s cubic-bezier(.45, 0, .2, 1) forwards;
}
.development-path-stage.has-sequence-animation .development-path-connectors path.is-erasing {
  animation: development-connector-erase .62s cubic-bezier(.55, 0, .7, 1) forwards;
}
.development-path-stage.has-sequence-animation .development-path-connectors path.is-drawn {
  animation: none;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  filter: none;
}
@keyframes development-connector-draw {
  0% {
    stroke-dashoffset: var(--connector-length);
    stroke: #c7a65e;
    opacity: .22;
    filter: drop-shadow(0 0 0 rgba(216,170,79,0));
  }
  28% {
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(216,170,79,.82));
  }
  82% {
    stroke: #e0b85e;
    opacity: 1;
    filter: drop-shadow(0 0 7px rgba(216,170,79,.72));
  }
  100% {
    stroke-dashoffset: 0;
    stroke: #bd994f;
    opacity: 1;
    filter: drop-shadow(0 0 0 rgba(216,170,79,0));
  }
}
@keyframes development-connector-erase {
  0% {
    stroke-dashoffset: 0;
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(216,170,79,.58));
  }
  100% {
    stroke-dashoffset: var(--connector-length);
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(216,170,79,0));
  }
}
.development-path-connectors circle { fill: #bd994f; }
.development-path-milestones { position: absolute; z-index: 4; inset: 0; }
.development-mobile-scroll-status { display: none; }
.development-milestone {
  position: absolute;
  width: 20.833%;
  color: #252522;
  cursor: pointer;
  outline: none;
  transition: opacity .3s ease, transform .38s cubic-bezier(.22,.8,.24,1);
}
.development-path-stage.has-sequence-animation .development-milestone {
  pointer-events: none;
}
.development-path-stage.has-sequence-animation .development-milestone time,
.development-path-stage.has-sequence-animation .development-milestone p {
  opacity: 0;
  transform: translateY(15px);
  transition:
    opacity .58s cubic-bezier(.22,.8,.24,1),
    transform .72s cubic-bezier(.22,.8,.24,1),
    color .35s ease,
    text-shadow .35s ease,
    filter .35s ease;
}
.development-path-stage.has-sequence-animation .development-milestone p {
  transition-delay: .07s;
}
.development-path-stage.has-sequence-animation .development-milestone.is-sequence-visible {
  pointer-events: auto;
}
.development-path-stage.has-sequence-animation .development-milestone.is-sequence-visible time,
.development-path-stage.has-sequence-animation .development-milestone.is-sequence-visible p {
  opacity: 1;
  transform: translateY(0);
}
.development-path-stage.has-sequence-animation .development-milestone.is-sequence-glowing time {
  animation: development-milestone-year-glow .9s cubic-bezier(.22,.8,.24,1) both;
}
.development-path-stage.has-sequence-animation .development-milestone.is-sequence-glowing p {
  animation: development-milestone-copy-glow .9s cubic-bezier(.22,.8,.24,1) .07s both;
}
@keyframes development-milestone-year-glow {
  0% { color: #a88137; text-shadow: 0 0 0 rgba(218,171,78,0); filter: brightness(1); }
  38% { color: #e0b45a; text-shadow: 0 0 22px rgba(218,171,78,.72); filter: brightness(1.2); }
  100% { color: #a88137; text-shadow: 0 0 0 rgba(218,171,78,0); filter: brightness(1); }
}
@keyframes development-milestone-copy-glow {
  0% { color: #252522; text-shadow: 0 0 0 rgba(218,171,78,0); }
  38% { color: #a87528; text-shadow: 0 0 14px rgba(218,171,78,.46); }
  100% { color: #252522; text-shadow: 0 0 0 rgba(218,171,78,0); }
}
.development-milestone time {
  display: block;
  color: #a88137;
  font-family: var(--font-time);
  font-size: clamp(38px, 3.2vw, 49px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.02em;
  transition: color .35s ease, text-shadow .35s ease;
}
.development-milestone p {
  margin: 11px 0 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .045em;
  text-transform: uppercase;
  transition: color .35s ease;
}
.development-path-stage.has-active .development-milestone:not(.is-active) {
  opacity: .22;
}
.development-milestone.is-active {
  z-index: 2;
  opacity: 1;
  transform: translateY(-3px);
}
.development-milestone.is-active time {
  color: #d2a34c;
  text-shadow: 0 0 18px rgba(203,158,70,.3);
}
.development-milestone.is-active p { color: #966b25; }
.development-milestone:focus-visible { outline: 1px solid rgba(181,138,62,.75); outline-offset: 7px; }
.development-path-stage.has-active .development-path-connectors path { opacity: .2; }
.development-path-stage.has-active .development-path-connectors path.is-active {
  opacity: 1;
  stroke: #d5a64e;
  stroke-width: 1.8;
}
.development-path-stage.has-sequence-animation .development-milestone.is-sequence-visible.is-active {
  transform: translateY(-3px);
}
.milestone-2009,
.milestone-2016,
.milestone-2017 { left: 0; text-align: right; }
.milestone-2020,
.milestone-2023,
.milestone-2026 { right: 0; text-align: left; }
.milestone-2017,
.milestone-2020 { top: 13.6%; }
.milestone-2016,
.milestone-2023 { top: 43.6%; }
.milestone-2009,
.milestone-2026 { top: 73.6%; }

.quick-facts { position: relative; min-height: 424px; padding: 44px 0 28px; border-bottom: 1px solid var(--line); overflow: hidden; }
.quick-facts-inner { position: relative; width: 100%; max-width: none; }
.facts-heading { position: relative; z-index: 2; }
.facts-heading p { margin: 0; color: var(--gold); font-family: var(--font-bold); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.facts-heading > span { display: block; width: 50px; height: 1px; margin: 18px 0; background: var(--gold); }
.facts-heading h2 { margin: 0; font-family: var(--serif); font-size: clamp(51px, 4.6vw, 60px); font-weight: 500; line-height: .95; letter-spacing: -.025em; text-transform: none; }
.facts-track { position: relative; z-index: 2; height: 218px; margin-top: 20px; display: grid; grid-template-columns: repeat(5, 1fr); }
.facts-track::before { content: ""; position: absolute; left: 0; right: 0; top: 98px; height: 1px; background: var(--gold); }
.facts-track article { position: relative; min-width: 0; text-align: center; }
.facts-track strong { position: absolute; left: 0; top: 5px; width: 100%; color: var(--gold); font-family: var(--font-time); font-size: clamp(39px, 3.35vw, 51px); font-weight: 400; line-height: 1; text-transform: uppercase; }
.facts-track article:nth-child(even) strong { top: 126px; }
.fact-marker { position: absolute; z-index: 2; left: 50%; top: 90px; width: 17px; height: 17px; border: 2px solid var(--gold); border-radius: 50%; background: radial-gradient(circle, var(--gold) 0 4px, var(--paper) 4.5px); transform: translateX(-50%); }
.fact-marker::before { display: none; }
.fact-label { position: absolute; top: 148px; left: 0; width: 100%; padding-inline: 12px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.facts-track article:nth-child(even) .fact-label { top: 187px; }
.fact-label::before { content: ""; display: block; width: 38px; height: 1px; margin: 0 auto 14px; background: var(--ink); }
.facts-emblem { position: absolute; z-index: 1; right: -62px; bottom: -92px; width: 265px; height: 400px; opacity: .26; pointer-events: none; transform: scale(.78); transform-origin: bottom right; }
.facts-emblem i { position: absolute; bottom: 0; width: 21px; border: 2px solid var(--gold-soft); background: rgba(255,255,255,.34); transform-origin: bottom center; }
.facts-emblem i:nth-child(1) { left: 4px; height: 150px; transform: rotate(-17deg); }
.facts-emblem i:nth-child(2) { left: 45px; height: 255px; transform: rotate(-10deg); }
.facts-emblem i:nth-child(3) { left: 89px; height: 350px; transform: rotate(-4deg); }
.facts-emblem i:nth-child(4) { left: 132px; height: 395px; }
.facts-emblem i:nth-child(5) { left: 175px; height: 350px; transform: rotate(4deg); }
.facts-emblem i:nth-child(6) { left: 219px; height: 255px; transform: rotate(10deg); }
.facts-emblem i:nth-child(7) { left: 260px; height: 150px; transform: rotate(17deg); }

.capability { display: grid; grid-template-columns: 47% 53%; min-height: 620px; padding: 51px 0; border-bottom: 1px solid var(--line); }
.capability-media { position: relative; width: 100%; height: 550px; overflow: hidden; background: #e7e5df; }
.capability-slide {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  visibility: hidden;
  transform-origin: center center;
}
.capability-slide.is-active { z-index: 1; visibility: visible; }
.capability-pagination { position: absolute; z-index: 4; left: 50%; bottom: 7px; display: flex; align-items: center; gap: 11px; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; transform: translateX(-50%); }
.capability-pagination button { width: 9px; height: 9px; padding: 0; border: 1px solid rgba(30,31,29,.28); border-radius: 50%; background: rgba(255,255,255,.78); box-shadow: 0 1px 5px rgba(20,18,13,.22); cursor: pointer; transition: background-color .3s ease, border-color .3s ease, transform .3s ease; }
.capability-pagination button.is-active { border-color: rgba(255,255,255,.8); background: var(--gold); transform: scale(1.18); }
.capability-copy { padding: 0 0 20px 65px; }
.capability-copy h2 { width: 100%; color: var(--gold); font-size: clamp(49px, 4.5vw, 60px); text-align: center; text-transform: none; }
.capability-kpis {
  height: clamp(330px, 29vw, 430px);
  margin-top: clamp(24px, 2.2vw, 32px);
  display: flex;
  align-items: flex-end;
  gap: clamp(5px, .55vw, 9px);
}
.capability-kpi {
  --pillar-height: 72%;
  --pillar-line: 48px;
  --pillar-shape: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
  position: relative;
  z-index: 1;
  width: auto;
  height: var(--pillar-height);
  min-width: 0;
  min-height: 0;
  flex: 1 1 0;
  padding: 0 clamp(5px, .55vw, 9px) clamp(40px, 3.2vw, 50px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: flex-end;
  color: #fff;
  text-align: center;
  border: 0;
  border-radius: 0;
  background: linear-gradient(145deg, #e2b958, #9d7029 48%, #f0ca70);
  box-shadow: 0 11px 20px rgba(28,23,15,.18);
  clip-path: var(--pillar-shape);
  transition: transform .3s ease, filter .3s ease, box-shadow .3s ease;
}
.capability-kpi::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2px;
  width: auto;
  height: auto;
  background:
    radial-gradient(circle at 25% 18%, rgba(255,255,255,.045), transparent 28%),
    radial-gradient(circle at 75% 58%, rgba(255,255,255,.035), transparent 34%),
    linear-gradient(145deg, #1a1b1a, #0e1110 58%, #171817);
  clip-path: var(--pillar-shape);
}
.capability-kpi::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 22%;
  right: 22%;
  bottom: clamp(19px, 1.7vw, 27px);
  height: 1px;
  background: #e4bd59;
}
.capability-kpi:nth-child(2),
.capability-kpi:nth-child(5) { --pillar-height: 86%; --pillar-line: 68px; --pillar-shape: polygon(0 7%, 100% 0, 100% 100%, 0 100%); }
.capability-kpi:nth-child(3) { --pillar-height: 100%; --pillar-line: 92px; --pillar-shape: polygon(0 6%, 100% 0, 100% 100%, 0 100%); }
.capability-kpi:nth-child(4) { --pillar-height: 100%; --pillar-line: 92px; --pillar-shape: polygon(0 0, 100% 6%, 100% 100%, 0 100%); }
.capability-kpi:nth-child(5) { --pillar-shape: polygon(0 0, 100% 7%, 100% 100%, 0 100%); }
.capability-kpi:nth-child(6) { --pillar-height: 72%; --pillar-line: 48px; --pillar-shape: polygon(0 0, 100% 10%, 100% 100%, 0 100%); }
.capability-kpi:hover { filter: brightness(1.06); box-shadow: 0 17px 28px rgba(28,23,15,.23); transform: translateY(-4px); }
.capability-kpi strong {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  color: #e8c366;
  font-family: var(--font-time);
  font-size: clamp(15px, 1.55vw, 23px);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.035em;
  white-space: nowrap;
  text-shadow: 0 1px 0 #6d4915;
}
.capability-kpi strong::before {
  content: "";
  display: block;
  width: 1px;
  height: var(--pillar-line);
  margin: 0 auto clamp(14px, 1.25vw, 20px);
  background: #e4bd59;
}
.capability-kpi-wide strong,
.capability-kpi:last-child strong { font-size: clamp(15px, 1.55vw, 23px); }
.capability-kpi span {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(52px, 4.5vw, 68px);
  margin-top: clamp(15px, 1.4vw, 22px);
  color: #f7f4ed;
  font-size: clamp(9px, .75vw, 11px);
  font-weight: 600;
  line-height: 1.48;
  letter-spacing: .075em;
  text-align: center;
  text-transform: uppercase;
}

@media (min-width: 981px) {
  .opening { height: 100svh; min-height: 620px; }
  .opening-inner { width: calc(100vw - 96px); max-width: 1600px; height: 100%; min-height: 620px; }
  .opening-copy {
    width: min(630px, 46vw);
    margin-left: 50px;
    padding: clamp(112px, 14vh, 132px) 0 0;
    transform: translateY(8px);
  }
  .opening-copy::before {
    content: "";
    position: absolute;
    left: -50px;
    top: 103px;
    bottom: -14px;
    width: 1px;
    background: var(--gold);
  }
  .opening-label {
    margin-bottom: 22px;
    font-size: clamp(12px, .95vw, 16px);
    letter-spacing: .1em;
  }
  .opening-copy h1 {
    font-family: var(--font-title);
    font-size: clamp(52px, 3.9vw, 58px);
    line-height: 1.02;
    letter-spacing: .015em;
  }
  .opening-copy h1 > span { white-space: nowrap; }
  .opening-copy h1 > span + span { margin-top: clamp(12px, 1.5vh, 16px); }
  .opening-intro {
    max-width: 350px;
    margin-top: 24px;
    font-size: clamp(14px, 1.05vw, 18px);
    line-height: 1.65;
  }
  .opening-actions {
    gap: clamp(34px, 3vw, 52px);
    margin-top: clamp(30px, 4.2vh, 42px);
  }
  .opening-actions a {
    font-size: 12px;
    letter-spacing: .04em;
  }
  .opening-actions a:first-child {
    min-width: 210px;
    height: 40px;
    padding: 0 24px;
    display: grid;
    place-items: center;
  }
  .opening-actions a:last-child { gap: 20px; }
  .opening-actions a:last-child span { font-size: 20px; line-height: 1; }
  .opening-scroll {
    position: absolute;
    z-index: 3;
    right: clamp(28px, 3.2vw, 55px);
    top: 16%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    color: var(--gold);
    font-family: var(--font-bold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
  }
  .opening-scroll i { width: 1px; height: 72px; background: var(--gold); }
  .opening-scroll span { writing-mode: vertical-rl; transform: rotate(180deg); }
  .capability {
    min-height: 0;
    padding-block: clamp(34px, 3.6vw, 52px);
    align-items: center;
  }
  .capability-media {
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .capability-copy {
    padding: 0 0 0 clamp(58px, 4.7vw, 68px);
  }
  .capability-pillars { margin-top: clamp(38px, 3.8vw, 55px); }
}

.investment { padding: 87px 0 105px; border-bottom: 1px solid var(--line); }
.investment > h2,
.featured-projects > h2 { font-size: clamp(48px, 4.1vw, 60px); text-transform: none; }
.investment > h2 { text-align: left; }
.investment > h2::after {
  content: "";
  display: block;
  width: min(500px, 42vw);
  height: 1px;
  margin-top: 24px;
  background: linear-gradient(90deg, var(--gold) 0 56px, var(--line) 56px 100%);
  transform: scaleX(var(--gold-line-scale, 1));
  transform-origin: 0 50%;
}
.featured-projects > h2 { text-align: center; }
.investment-showcase {
  position: relative;
  isolation: isolate;
  overflow: visible;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
  align-items: center;
  gap: clamp(40px, 4.2vw, 66px);
  margin-top: 34px;
}
.investment-feature {
  position: relative;
  z-index: 1;
  height: clamp(390px, 31vw, 420px);
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 20px 45px rgba(45,37,20,.1);
}
.investment-feature-media { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #ddd8cd; }
.investment-feature-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 35%, rgba(255,255,255,.16), transparent 67%); pointer-events: none; }
.investment-feature-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.investment-feature:hover .investment-feature-media img { transform: scale(1.025); }
.investment-feature-copy {
  position: relative;
  min-width: 0;
  padding: clamp(28px, 2.2vw, 34px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.investment-feature-index { color: var(--gold); font-family: var(--font-time); font-size: clamp(42px, 3.6vw, 56px); line-height: .9; }
.investment-feature-copy > i { width: 40px; height: 1px; margin: 12px 0 14px; background: var(--gold); }
.investment-feature-title { margin: 0 0 14px; font-family: var(--font-subtitle); font-size: clamp(21px, 1.75vw, 27px); font-weight: 500; line-height: 1.06; text-transform: uppercase; }
.investment-feature-description { margin: 0; color: #4f504c; font-size: clamp(12px, 1vw, 14px); line-height: 1.65; }
.investment-feature-arrow { position: absolute; left: clamp(28px, 2.2vw, 34px); bottom: clamp(24px, 2vw, 30px); display: block; width: max-content; margin: 0; color: var(--gold); font-size: 26px; line-height: 1; text-decoration: none; transition: transform .25s ease, color .25s ease; }
.investment-feature-arrow:hover { color: #8e6b2f; transform: translateX(5px); }
/* Trên desktop thẻ đã nằm cạnh danh sách lĩnh vực nên chỉ cần mũi tên; chữ
   "Xem thêm" dành riêng cho điện thoại, nơi thẻ đứng một mình. */
.investment-feature-arrow > span { display: none; }
@property --sector-light-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.investment-fan {
  position: relative;
  z-index: 2;
  width: 86%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-self: end;
  overflow: visible;
  isolation: isolate;
}
.investment-sector {
  --investment-ease: cubic-bezier(.22, 1, .36, 1);
  --magnetic-x: 0px;
  --magnetic-y: 0px;
  --sector-hover-scale: 1;
  --sector-light-angle: 0deg;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 62px;
  margin-left: auto;
  margin-right: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 32% 68%;
  color: #f4efe3;
  background: #151919;
  border: 1px solid rgba(183,149,82,.2);
  border-radius: 4px;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
  cursor: pointer;
  isolation: isolate;
  transform: translate3d(var(--magnetic-x), var(--magnetic-y), 0) scale(var(--sector-hover-scale));
  transform-origin: 50% 50%;
  transition: color 450ms var(--investment-ease), border-color 450ms var(--investment-ease), transform 450ms var(--investment-ease), box-shadow 450ms var(--investment-ease);
  will-change: transform;
}
.investment-sector::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(100deg, #e4d2a5 0%, #d5b978 52%, #c9a55f 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 450ms var(--investment-ease);
  pointer-events: none;
}
.investment-sector::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--sector-light-angle),
    transparent 0deg 255deg,
    rgba(210,171,91,.14) 278deg,
    rgba(255,246,207,.98) 309deg,
    #d7a84d 329deg,
    transparent 360deg
  );
  opacity: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 4px rgba(255,229,159,.9));
  transition: opacity 220ms ease;
}
.investment-sector:nth-child(1),
.investment-sector:nth-child(6) { width: 72%; }
.investment-sector:nth-child(2),
.investment-sector:nth-child(5) { width: 86%; }
.investment-sector:nth-child(3),
.investment-sector:nth-child(4) { width: 100%; }
.investment-sector:is(:hover, :focus-visible) {
  --sector-hover-scale: 1.2;
  z-index: 100;
  color: #241c10;
  border-color: rgba(151,109,39,.72);
  box-shadow:
    0 18px 38px rgba(46,35,17,.2),
    0 0 24px rgba(207,160,68,.24);
}
.investment-sector:is(:hover, :focus-visible)::before { transform: scaleX(1); }
.investment-sector:is(:hover, :focus-visible)::after {
  opacity: 1;
  animation: investment-sector-light-orbit 1.35s linear infinite;
}
@keyframes investment-sector-light-orbit {
  to { --sector-light-angle: 360deg; }
}
.investment-sector-media {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(12,17,18,.08), rgba(12,17,18,.42)), var(--sector-image);
  background-size: cover;
  background-position: center;
}
/* Khi rê chuột, lớp phủ vàng (::before) trùm kín hàng và che mất ảnh thu nhỏ
   bên trái, để lại một mảng vàng trống. Logo Tập đoàn lấp đúng khoảng đó.
   Logo phải là con trực tiếp của hàng: đặt bên trong .investment-sector-media
   thì nó nằm trong ngữ cảnh xếp lớp z-index 1 nên vẫn bị lớp vàng che. */
.investment-sector-logo {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 50%;
  box-sizing: border-box;
  width: 32%;
  height: auto;
  padding: 0 clamp(12px, 1.2vw, 20px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(.94);
  transition: opacity 380ms var(--investment-ease), transform 450ms var(--investment-ease);
}

.investment-sector:is(:hover, :focus-visible) .investment-sector-logo {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.investment-sector-content {
  position: relative;
  z-index: 3;
  min-width: 0;
  padding: 0 27px 0 14px;
  display: grid;
  grid-template-columns: auto 1px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  background: transparent;
}
.investment-sector.is-active {
  color: var(--ink);
  background: #fff;
  border-color: var(--gold);
  box-shadow: 0 18px 38px rgba(38,31,18,.13);
}
.investment-sector.is-active .investment-sector-content { background: transparent; }
.investment-sector.is-active .investment-sector-media { background-image: linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.1)), var(--sector-image); }
.investment-sector-number { color: var(--gold); font-family: var(--font-time); font-size: clamp(23px, 2vw, 30px); line-height: 1; transition: color 450ms var(--investment-ease); }
.investment-sector-content > i { width: 1px; height: 32px; background: var(--gold); opacity: .66; transition: background-color 450ms var(--investment-ease), opacity 450ms var(--investment-ease); }
.investment-sector-name { overflow: hidden; font-family: var(--font-body); font-size: clamp(11px, .82vw, 13px); font-weight: 600; line-height: 1.3; letter-spacing: .01em; text-align: left; text-transform: none; white-space: normal; }
.investment-sector-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: 9px;
  color: var(--gold-soft);
  font-size: 17px;
  line-height: 1;
  transform: translate3d(0, -50%, 0);
  transition: color 450ms var(--investment-ease), transform 450ms var(--investment-ease);
  pointer-events: none;
}
.investment-sector:is(:hover, :focus-visible) .investment-sector-number { color: #3a2a12; }
.investment-sector:is(:hover, :focus-visible) .investment-sector-content > i { background: #5d431c; opacity: .52; }
.investment-sector:is(:hover, :focus-visible) .investment-sector-arrow {
  color: #34250f;
  transform: translate3d(6px, -50%, 0);
}
.investment-sector.is-magnetic { will-change: transform; }

.news-feature,
.news-list article {
  position: relative;
  transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) ease;
}
.news-feature { overflow: hidden; }
.news-feature img,
.news-list img {
  transition: transform var(--motion-slow) var(--motion-cinematic-ease), filter var(--motion-medium) ease;
}

@media (hover: hover) and (pointer: fine) {
  .contact-link,
  .opening-actions a:first-child,
  .callout-actions > a:first-child,
  .newsletter button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition:
      color var(--motion-fast) ease,
      background-color var(--motion-fast) ease,
      border-color var(--motion-fast) ease,
      box-shadow var(--motion-fast) ease,
      transform var(--motion-fast) var(--motion-ease);
  }
  .contact-link::after,
  .opening-actions a:first-child::after,
  .callout-actions > a:first-child::after,
  .newsletter button::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: -35% auto -35% -45%;
    width: 34%;
    background: linear-gradient(90deg, transparent, rgba(255,246,211,.72), transparent);
    transform: translateX(-180%) skewX(-18deg);
    transition: transform .58s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
  }
  .contact-link:hover,
  .opening-actions a:first-child:hover,
  .callout-actions > a:first-child:hover,
  .newsletter button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(127,91,29,.2), 0 0 16px rgba(205,159,67,.18);
  }
  .contact-link:hover::after,
  .opening-actions a:first-child:hover::after,
  .callout-actions > a:first-child:hover::after,
  .newsletter button:hover::after {
    transform: translateX(520%) skewX(-18deg);
  }
  .project-card,
  .capability-kpi,
  .news-list article { z-index: 1; }
  .project-card:hover {
    z-index: 8;
    transform: translateY(-3px) scale(1.03);
  }
  .capability-kpi:hover {
    z-index: 8;
    transform: translateY(-3px) scale(1.03);
  }
  .news-list article:hover {
    z-index: 5;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 28px rgba(38,31,18,.08);
  }
  .brand-collage-image:hover img,
  .project-card:hover > img,
  .investment-feature:hover .investment-feature-media img,
  .news-feature:hover img,
  .news-list article:hover img,
  .logo-set article:hover img {
    filter: saturate(1.04) brightness(1.025);
    opacity: 1;
    transform: scale(1.04);
  }
}

@media (hover: none) {
  .project-card:hover,
  .capability-kpi:hover,
  .news-list article:hover { transform: none; }
  .brand-collage-image:hover img,
  .project-card:hover > img,
  .investment-feature:hover .investment-feature-media img,
  .news-feature:hover img,
  .news-list article:hover img,
  .logo-set article:hover img { transform: none; }
}

.featured-projects { padding: 68px 0 83px; border-bottom: 1px solid var(--line); }
.featured-projects > .opening-label { margin-bottom: 8px; text-align: center; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 28px; }
.project-card { position: relative; z-index: 1; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); background: #fff; transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); }
.project-card:hover { z-index: 8; border-color: rgba(183,149,82,.62); box-shadow: 0 20px 38px rgba(38,31,18,.09); transform: translateY(-3px) scale(1.03); }
.project-card > img { width: 100%; height: 235px; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1), filter .5s ease; }
.project-card:hover > img { filter: saturate(1.04) brightness(1.025); transform: scale(1.04); }
.project-card-body { flex: 1; padding: 20px 19px 22px; display: flex; flex-direction: column; }
.project-type { color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.project-card h3 { min-height: 70px; margin: 12px 0 8px; font-family: var(--font-subtitle); font-size: clamp(22px, 1.8vw, 26px); font-weight: 600; line-height: 1.08; text-transform: none; }
.project-meta { min-height: 18px; margin: 0 0 9px !important; color: var(--gold) !important; font-size: 11px !important; font-weight: 500; text-transform: none; }
.project-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.project-card-body > p:last-child { min-height: 58px; }
.project-pagination { display: none; }

.ecosystem {
  position: relative;
  min-height: 760px;
  padding: 111px 0 123px;
  overflow: hidden;
}
.network-heading {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  align-items: end;
  gap: clamp(40px, 7vw, 110px);
}
.network-heading h2,
.journey-intro h2,
.news-title > h2,
.callout > h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  text-transform: uppercase;
  line-height: .93;
  letter-spacing: -.025em;
}
.network-heading h2 { font-size: clamp(48px, 4.35vw, 60px); text-transform: none; }
.network-heading > p {
  max-width: 355px;
  margin: 0 0 4px;
  padding-left: 28px;
  border-left: 1px solid var(--gold);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
}
.watermark {
  position: absolute;
  top: 35px;
  right: -10px;
  color: rgba(183,149,82,.085);
  font-family: var(--serif);
  font-size: 60px;
  font-weight: 400;
  line-height: 1;
}
.network-marquees {
  position: relative;
  z-index: 2;
  width: 100vw;
  margin-top: 58px;
  margin-left: calc(50% - 50vw);
}
.network-lane + .network-lane { margin-top: 22px; }
.network-lane-label {
  width: var(--page);
  max-width: 85vw;
  margin: 0 auto 11px;
  color: #30312f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.network-lane-label span { margin-right: 10px; color: var(--gold); font-family: var(--font-time); font-size: 13px; font-weight: 400; }
.logo-marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.logo-track {
  display: flex;
  width: max-content;
  transform: translate3d(0, 0, 0);
  animation-play-state: paused;
  backface-visibility: hidden;
  will-change: transform;
}
.network-marquees.is-motion-active .logo-track { animation-play-state: running; }
.logo-track-left { animation: logo-marquee-left 60s linear infinite; }
.logo-track-right { transform: translate3d(-50%, 0, 0); animation: logo-marquee-right 44s linear infinite; }
.logo-set { display: flex; flex: none; }
.logo-set article {
  width: 232px;
  flex: 0 0 232px;
  height: 126px;
  padding: 24px 34px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  background: #fff;
}
.logo-set img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: saturate(.88);
  opacity: 1;
  transition: filter .4s ease, transform .4s ease;
}
.partner-logo-set img,
.ecosystem-logo-set img { max-width: 180px; max-height: 62px; }
.ecosystem-logo-set img { filter: grayscale(.1) saturate(.85); }
.logo-set article:hover img { filter: saturate(1); opacity: 1; transform: scale(1.045); }
@keyframes logo-marquee-left { to { transform: translate3d(-50%, 0, 0); } }
@keyframes logo-marquee-right { to { transform: translate3d(0, 0, 0); } }

.journey {
  display: grid;
  grid-template-columns: 28% 72%;
  min-height: 1000px;
  padding: 70px 0 60px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.journey-intro { padding-right: 70px; }
.journey-intro h2 { font-size: clamp(54px, 5vw, 60px); text-transform: none; }
.timeline { position: relative; padding-left: 24px; }
.timeline::before { content: ""; position: absolute; z-index: 1; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, rgba(183,149,82,.25), var(--gold) 12%, var(--gold) 88%, rgba(183,149,82,.25)); }
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 145px;
  gap: 62px;
}
.timeline-item::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; width: 17px; height: 17px; border: 1px solid var(--gold); border-radius: 50%; background: radial-gradient(circle, var(--gold) 0 3px, var(--paper) 3.5px 6px, var(--gold) 6.5px 7.5px, transparent 8px); transform: translate(-50%,-50%); box-shadow: 0 0 0 5px rgba(183,149,82,.11); }
.timeline-item img { width: 100%; height: 122px; object-fit: cover; filter: grayscale(1) contrast(.88); }
.timeline-copy { max-width: 230px; }
.text-left .timeline-copy { justify-self: end; text-align: left; }
.text-right .timeline-copy { justify-self: start; }
.timeline-copy time { display: block; margin-bottom: 6px; color: var(--gold); font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1; }
.timeline-copy h3 { margin: 0 0 7px; font-family: var(--font-subtitle); font-size: 22px; font-weight: 600; text-transform: none; }
.timeline-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.news {
  display: grid;
  grid-template-columns: 25% 31% 44%;
  min-height: 475px;
  padding: 87px 0 72px;
  border-bottom: 1px solid var(--line);
}
.news-title { padding-right: 38px; }
.news-title > h2 { font-size: clamp(46px, 4vw, 59px); text-transform: none; }
.news-title > h2 span,
.callout > h2 span { white-space: nowrap; }
.news-mobile-carousel { display: none; }

.callout {
  position: relative;
  min-height: 390px;
  display: grid;
  grid-template-columns: 41% 37% 22%;
  align-items: center;
  border-bottom: 1px solid var(--gold-soft);
  overflow: hidden;
}
.callout > h2 { padding-left: 24px; font-size: clamp(40px, 3.7vw, 53px); text-transform: none; }
.callout-content { position: relative; z-index: 2; width: min(360px, 100%); justify-self: center; text-align: center; }
.callout-kicker { margin: 0 0 13px; color: var(--gold); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.callout-intro { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.75; }
.callout-actions { margin-top: 25px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.callout-actions > a:first-child { min-width: 280px; padding: 16px 28px; color: var(--gold); border: 1px solid var(--gold); font-size: 11px; font-weight: 600; text-align: center; text-transform: uppercase; letter-spacing: .08em; transition: color .35s ease, background-color .35s ease; }
.callout-actions > a:first-child:hover { color: #fff; background: var(--gold); }
.download-link { display: flex; align-items: center; gap: 38px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; transition: color .3s ease; }
.download-link span { color: var(--gold); font-size: 16px; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.download-link:hover { color: var(--gold); }
.download-link:hover span { transform: translateX(5px); }
.line-emblem { position: absolute; right: 15px; bottom: -44px; width: 210px; height: 220px; display: flex; align-items: end; justify-content: center; opacity: .42; }
.line-emblem i { display: block; width: 22px; height: 75%; margin-left: -4px; border: 2px solid var(--gold-soft); border-bottom: 0; transform-origin: bottom; }
.line-emblem i:nth-child(1) { height: 42%; transform: rotate(-47deg); }
.line-emblem i:nth-child(2) { height: 59%; transform: rotate(-30deg); }
.line-emblem i:nth-child(3) { height: 77%; transform: rotate(-15deg); }
.line-emblem i:nth-child(4) { height: 94%; }
.line-emblem i:nth-child(5) { height: 77%; transform: rotate(15deg); }
.line-emblem i:nth-child(6) { height: 59%; transform: rotate(30deg); }
.line-emblem i:nth-child(7) { height: 42%; transform: rotate(47deg); }

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 25px 0;
  margin-top: 30px;
  margin-bottom: 0;
  padding: clamp(20px, 2vw, 30px) clamp(50px, 6.7vw, 92px) clamp(20px, 2vw, 28px);
  color: #2b2b29;
  background: #fffdf8 url("assets/footer-background-clean.webp") top center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 11px;
  line-height: 1.55;
}
.site-footer::before { display: none; }
.site-footer > * { position: relative; z-index: 1; }
.site-footer > div:not(.footer-bottom) { min-width: 0; }
.footer-heading {
  grid-column: 1 / -1;
  display: flex;
  min-height: clamp(132px, 11vw, 158px);
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
  padding: 0;
  border: 0;
}
.footer-heading img { width: clamp(165px, 16vw, 218px); height: clamp(122px, 10.5vw, 150px); flex: 0 0 auto; object-fit: contain; filter: none; opacity: 1; }
.footer-office { grid-column: span 4; padding: 0 clamp(20px, 2.1vw, 30px); }
.footer-office-headquarters { padding-left: clamp(38px, 4.2vw, 60px); }
.footer-office:nth-of-type(4) { padding-right: 0; padding-left: clamp(24px, 2.5vw, 36px); }
.footer-office + .footer-office { border-left: 1px solid rgba(183,149,82,.72); }
.site-footer h3,
.footer-office-toggle { margin: 0 0 12px; color: #9a741f; font-family: var(--font-body); font-size: clamp(11px, .95vw, 14px); font-weight: 700; line-height: 1.35; text-transform: uppercase; letter-spacing: .055em; }
.footer-office-toggle { width: 100%; padding: 0; display: block; border: 0; background: transparent; text-align: left; cursor: default; }
.footer-office-toggle i { display: none; }
.footer-office-panel { display: block; }
.site-footer p { margin: 0 0 8px; color: #55544f; }
.site-footer > div > a { color: #464540; transition: color .25s ease; }
.site-footer > div > a:hover { color: #9a741f; }
.footer-office address {
  min-height: 62px;
  margin-bottom: 13px;
  color: #4f4e49;
  font-family: var(--font-thin);
  font-style: normal;
  font-weight: 400;
  line-height: 1.55;
}
.footer-contact-list { padding-top: 12px; border-top: 1px solid rgba(183,149,82,.65); }
.footer-contact-list p { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: start; margin-bottom: 6px; }
.footer-contact-list span { min-width: 0; display: flex; align-items: flex-start; gap: 10px; color: #9a741f; font-family: var(--font-bold); font-size: 8.5px; font-weight: 700; line-height: 1.35; letter-spacing: .045em; text-transform: uppercase; white-space: normal; }
.footer-contact-list span::before { content: attr(data-icon); width: 19px; height: 19px; flex: 0 0 19px; display: grid; place-items: center; color: #b58c37; border: 1px solid rgba(183,149,82,.55); border-radius: 50%; font-family: Arial, sans-serif; font-size: 9px; line-height: 1; }
.footer-contact-list a,
.footer-contact-list b { min-width: 0; color: #3f3e3a; font-size: 9.5px; font-weight: 400; line-height: 1.4; overflow-wrap: anywhere; white-space: normal; }
.footer-contact-list a[href^="mailto:"] { font-size: 8.5px; letter-spacing: -.015em; }
.footer-contact-list a:hover { color: #9a741f; }
.footer-navigation { grid-column: 1 / 6; padding: 16px 42px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(183,149,82,.72); }
.footer-navigation h3 { grid-column: 1 / -1; margin-bottom: 8px; }
.footer-navigation > a { display: block; padding-right: 15px; color: #4b4a46; font-size: 10px; white-space: nowrap; }
.footer-navigation > a + a { padding-left: 22px; border-left: 1px solid rgba(183,149,82,.62); }
.newsletter { grid-column: 6 / -1; padding: 16px 0 0 48px; display: grid; grid-template-columns: minmax(150px, .78fr) minmax(250px, 1.22fr); grid-template-rows: auto 1fr; column-gap: 30px; border-top: 1px solid rgba(183,149,82,.72); border-left: 1px solid rgba(183,149,82,.72); }
.newsletter h3 { grid-column: 1; grid-row: 1; margin-bottom: 8px; }
.newsletter p { grid-column: 1; grid-row: 2; max-width: 225px; font-size: 10px; line-height: 1.45; }
.newsletter form { grid-column: 2; grid-row: 1 / 3; align-self: center; display: flex; height: 48px; margin: 0; overflow: hidden; border: 1px solid #c6a04b; border-radius: 10px; background: rgba(255,255,255,.72); }
.newsletter input { width: 100%; min-width: 0; padding: 11px 14px; color: #34332f; background: transparent; border: 0; outline: 0; font-size: 11px; }
.newsletter input::placeholder { color: #989690; }
.newsletter button { width: 52px; flex: 0 0 52px; color: #211d15; background: linear-gradient(135deg, #eed17f, #c99024); border: 0; cursor: pointer; font-size: 20px; transition: color .25s ease, background-color .25s ease; }
.newsletter button:hover { color: #fff; background: #9f7727; }
.footer-bottom { display: none; }

@media (min-width: 981px) and (max-width: 1199px) {
  /* Give each office enough measure before the footer returns to three columns. */
  .footer-office { grid-column: span 6; }
  .footer-office:nth-of-type(4) { border-left: 0; }
}

/* Use one consistent type family throughout the complete interface. */
.section-desc,
.opening-intro,
.capability-intro,
.capability-pillars p,
.sector-copy p,
.project-card-body > p:not(.project-meta),
.timeline-copy p,
.site-footer p,
.site-footer > div > a {
  font-family: var(--font-thin);
  font-weight: 400;
}

.section-index,
.opening-label,
.contact-link,
.opening-actions a,
.quick-facts span,
.project-type,
.callout-actions a,
.download-link,
.language b {
  font-family: var(--font-bold);
  font-weight: 700;
}

.section-index b,
.quick-facts strong,
.sector-copy > span,
.watermark,
.timeline-copy time,
.news time {
  font-family: var(--font-time);
  font-weight: 400;
}

@media (max-width: 980px) {
  .site-topbar > .language { display: none; }
  :root { --page: min(100% - 48px, 760px); }
  body.nav-open { overflow: hidden; }
  .site-topbar { position: fixed; top: 0; left: 0; width: 100%; height: 76px; padding-inline: 24px; grid-template-columns: 1fr auto; border-radius: 0; }
  .site-topbar.is-scrolled { top: 0; height: 70px; }
  .topbar-brand { position: relative; z-index: 2; }
  .topbar-brand img, .site-topbar.is-scrolled .topbar-brand img { width: 164px; height: 40px; }
  .nav-toggle { position: relative; z-index: 2; display: grid; place-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; border: 1px solid var(--gold-soft); border-radius: 0; background: transparent; }
  .nav-toggle > span:not(.sr-only) { width: 18px; height: 1px; background: var(--ink); transition: transform .25s, opacity .25s; }
  .nav-open .nav-toggle > span:first-child { transform: translateY(6px) rotate(45deg); }
  .nav-open .nav-toggle > span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .primary-nav { position: fixed; inset: 0; z-index: 1; max-height: none; padding: 110px 24px 50px; overflow-y: auto; display: flex; flex-direction: column; grid-template-columns: none; align-items: flex-start; justify-content: center; gap: 12px; background: var(--paper); border: 0; border-radius: 0; box-shadow: none; opacity: 0; visibility: hidden; transform: none; transition: opacity .25s, visibility .25s; }
  .nav-open .primary-nav { opacity: 1; visibility: visible; transform: none; }
  .primary-nav a { color: #30312e; font-family: var(--serif); font-size: clamp(34px, 7vw, 55px); font-weight: 500; letter-spacing: -.02em; white-space: normal; }
  .topbar-tools { display: none; }
  .opening, .opening-inner { min-height: 650px; }
  .opening-copy { width: 57%; }
  .opening-copy h1 { font-size: clamp(43px, 6.4vw, 48px); }
  .brand-story { grid-template-columns: 1fr; padding: 0 0 102px; }
  .brand-story-visual { min-height: 520px; }
  .brand-collage { min-height: 520px; }
  .brand-collage-image { width: 82%; }
  .brand-collage-logo { left: 78%; width: min(28%, 218px); }
  .brand-story-copy { padding: 93px 24px; }
  .brand-story-copy::before { inset: 25px -10vw -40px 0; }
  .brand-story-copy p { max-width: 680px; font-size: 13px; }
  .development-path-stage {
    height: auto;
    margin-top: 38px;
    display: flex;
    flex-direction: column;
  }
  .development-path-center {
    position: relative;
    left: auto;
    top: auto;
    order: 1;
    width: min(390px, 100%);
    height: 468px;
    margin: 0 auto 30px;
    transform: none;
  }
  .development-path-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: auto;
    margin: 0;
    transform: translate(-50%, -50%);
  }
  .development-path-detail { width: min(360px, 94%); height: 444px; }
  .development-path-detail-inner { padding: 66px 28px 22px; }
  .development-path-detail strong { font-size: 52px; }
  .development-path-detail h3 { font-size: 23px; }
  .development-path-detail p { font-size: 12px; line-height: 1.5; }
  .development-path-connectors { display: none; }
  .development-path-milestones {
    position: relative;
    order: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    isolation: isolate;
    border-top: 1px solid rgba(183,149,82,.45);
  }
  .development-path-stage.has-sequence-animation .development-path-milestones::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to top, #b79552, #e2c27a 55%, #b79552);
    transform: scaleY(0);
    transform-origin: 50% 100%;
  }
  .development-path-stage.has-sequence-animation.is-sequence-running .development-path-milestones::before {
    animation: development-mobile-spine 2.338s cubic-bezier(.42,0,.2,1) forwards;
  }
  .development-path-stage.has-sequence-animation.is-sequence-complete .development-path-milestones::before {
    transform: scaleY(1);
  }
  .development-path-stage.has-sequence-animation.is-sequence-leaving .development-path-milestones::before {
    animation: development-mobile-spine-out 1.14s cubic-bezier(.55,0,.7,1) forwards;
  }
  @keyframes development-mobile-spine { to { transform: scaleY(1); } }
  @keyframes development-mobile-spine-out { from { transform: scaleY(1); } to { transform: scaleY(0); } }
  .development-milestone,
  .milestone-2009,
  .milestone-2016,
  .milestone-2017,
  .milestone-2020,
  .milestone-2023,
  .milestone-2026 {
    position: relative;
    inset: auto;
    width: auto;
    min-height: 124px;
    padding: 24px 18px 20px;
    border-bottom: 1px solid rgba(183,149,82,.45);
    text-align: left;
  }
  .development-path-stage.has-sequence-animation .development-milestone {
    border-bottom-color: transparent;
    transition: border-color .5s ease, opacity .3s ease, transform .38s cubic-bezier(.22,.8,.24,1);
  }
  .development-path-stage.has-sequence-animation .development-milestone.is-sequence-visible {
    border-bottom-color: rgba(183,149,82,.45);
  }
  .milestone-2009,
  .milestone-2016,
  .milestone-2017 { border-right: 1px solid rgba(183,149,82,.45); }
  .development-path-stage.has-sequence-animation .milestone-2009,
  .development-path-stage.has-sequence-animation .milestone-2016,
  .development-path-stage.has-sequence-animation .milestone-2017 { border-right-color: transparent; }
  .development-milestone::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    width: 28px;
    height: 1px;
    background: #b79552;
    transform: scaleX(0);
    transition: transform .72s cubic-bezier(.42,0,.2,1), filter .3s ease;
  }
  .milestone-2009::after,
  .milestone-2016::after,
  .milestone-2017::after { right: 0; transform-origin: 100% 50%; }
  .milestone-2020::after,
  .milestone-2023::after,
  .milestone-2026::after { left: 0; transform-origin: 0 50%; }
  .development-milestone.is-connecting::after,
  .development-milestone.is-sequence-connected::after {
    transform: scaleX(1);
  }
  .development-milestone.is-connecting::after {
    filter: drop-shadow(0 0 5px rgba(216,170,79,.8));
  }
  .milestone-2017 { grid-column: 1; grid-row: 1; }
  .milestone-2020 { grid-column: 2; grid-row: 1; }
  .milestone-2016 { grid-column: 1; grid-row: 2; }
  .milestone-2023 { grid-column: 2; grid-row: 2; }
  .milestone-2009 { grid-column: 1; grid-row: 3; }
  .milestone-2026 { grid-column: 2; grid-row: 3; }
  .development-milestone::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 18px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    transition: opacity .45s ease, transform .55s cubic-bezier(.22,.8,.24,1), box-shadow .45s ease;
  }
  .development-path-stage.has-sequence-animation .development-milestone::before {
    opacity: 0;
    transform: scale(.5);
  }
  .development-path-stage.has-sequence-animation .development-milestone.is-sequence-visible::before {
    opacity: 1;
    transform: scale(1);
  }
  .development-path-stage.has-sequence-animation .development-milestone.is-sequence-glowing::before {
    box-shadow: 0 0 12px rgba(216,170,79,.72);
  }
  .development-milestone time { font-size: 38px; }
  .development-milestone p { margin-top: 10px; font-size: 11px; line-height: 1.5; }
  .capability { grid-template-columns: 1fr; }
  .capability-media { height: 430px; }
  .capability-copy { padding: 48px 0 30px; }
  .capability-kpi { min-height: 112px; }
  .capability-kpi strong,
  .capability-kpi-wide strong,
  .capability-kpi:last-child strong { font-size: 28px; }
  .investment-showcase { grid-template-columns: 1fr; }
  .investment-feature { width: min(680px, 100%); margin-inline: auto; }
  .investment-fan { width: min(476px, 70%); margin-left: auto; }
  .project-grid { grid-template-columns: 1fr 1fr; }
  .project-card:last-child { grid-column: 1 / -1; width: calc(50% - 13px); justify-self: center; }
  .ecosystem { min-height: 0; }
  .network-heading { grid-template-columns: 1fr; align-items: start; gap: 26px; }
  .network-heading > p { max-width: 520px; }
  .network-marquees { margin-top: 48px; }
  .journey { grid-template-columns: 1fr; }
  .journey-intro { padding: 0 0 70px; }
  .journey-intro h2 { max-width: 600px; }
  .timeline { padding-left: 0; }
  .news { grid-template-columns: 40% 60%; }
  .news-list { grid-column: 1 / -1; margin-left: 0; padding-top: 35px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .news-list article + article { padding-top: 0; }
  .callout { grid-template-columns: 1fr 1fr; column-gap: 36px; }
  .callout > h2 { padding-left: 0; }
  .callout-content { width: 100%; }
  .line-emblem { display: none; }
  .site-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; padding: 28px 36px 30px; background-size: auto 607px; background-color: #fffdf8; border-radius: 0; }
  .footer-heading { grid-column: 1 / -1; }
  .footer-office { grid-column: span 1; padding: 0 24px; }
  .footer-office + .footer-office { border-left: 1px solid rgba(183,149,82,.72); }
  .footer-office-headquarters { grid-column: 1 / -1; padding: 0; }
  .footer-office:nth-of-type(3) { padding-left: 0; border-left: 0; }
  .footer-office:nth-of-type(4) { padding-right: 0; }
  .footer-office address { min-height: 0; }
  .footer-navigation { grid-column: 1 / -1; padding-right: 0; }
  .newsletter { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
}

@media (max-width: 620px) {
  :root {
    --page: calc(100% - 34px);
    --motion-fast: .28s;
    --motion-medium: .64s;
    --motion-slow: 1.08s;
    --motion-cinematic: 1.2s;
    --motion-stagger: .08s;
  }
  main > section + section { margin-top: 16px !important; }
  body { font-size: 13px; }
  .site-topbar { top: 0; width: 100%; height: 74px; padding-inline: 20px 12px; border-radius: 0; }
  .site-topbar.is-scrolled { top: 0; height: 64px; }
  .topbar-brand img { width: 180px; height: 43px; }
  .site-topbar.is-scrolled .topbar-brand img { width: 145px; height: 35px; }
  .nav-toggle { width: 44px; height: 44px; border: 0; }
  .nav-toggle > span:not(.sr-only) { width: 22px; height: 2px; background: #121a21; }
  .primary-nav { padding: 110px 24px 50px; gap: 12px; }
  .primary-nav a { font-size: clamp(34px, 7vw, 55px); }
  .opening { min-height: 100svh; border-bottom: 0; }
  .opening-inner { min-height: 100svh; align-items: stretch; }
  .opening-media { top: 0; bottom: 0; width: 100vw; height: auto; }
  .opening-media::after {
    display: block;
    background:
      radial-gradient(ellipse 92% 47% at 4% 82%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.7) 43%, rgba(255,255,255,0) 78%),
      linear-gradient(180deg, transparent 50%, rgba(255,255,255,.05) 57%, rgba(255,255,255,.68) 77%, rgba(255,255,255,.94) 100%);
  }
  .opening-image { object-position: 52% center; }
  .opening-copy {
    position: absolute;
    z-index: 2;
    left: 25px;
    bottom: 39px;
    width: calc(100% - 38px);
    padding: 0;
  }
  .opening-copy::before { content: ""; position: absolute; top: 0; bottom: 1px; left: -18px; width: 1px; background: var(--gold); }
  .opening-label { margin-bottom: 11px; font-size: 10px; letter-spacing: .1em; }
  .opening-copy h1 { color: #172130; font-size: 27.5px; line-height: 1.12; letter-spacing: -.02em; text-shadow: none; }
  .opening-copy h1 > span + span { margin-top: 4px; }
  .opening-intro { max-width: 305px; margin-top: 12px; color: #283541; font-size: 12px; line-height: 1.5; text-shadow: none; }
  .opening-actions { margin-top: 13px; flex-direction: column; align-items: flex-start; gap: 13px; }
  .opening-actions a { font-size: 10px; }
  .opening-actions a:first-child { width: 185px; height: 38px; padding: 0; display: grid; place-items: center; }
  .opening-actions a:last-child {
    width: 185px;
    justify-content: center;
    gap: 15px;
  }
  .opening-actions a:last-child span { font-size: 20px; line-height: 1; }
  .brand-story { margin-top: 90px; padding: 0 0 81px; }
  .brand-story-visual { min-height: 390px; }
  .brand-collage { min-height: 390px; }
  .brand-collage-image { width: 88%; height: calc(50% - 9px); }
  .brand-collage-image-top { clip-path: polygon(0 0, 90% 0, 100% 13%, 72% 100%, 0 100%); }
  .brand-collage-image-bottom { clip-path: polygon(0 0, 72% 0, 100% 74%, 92% 100%, 0 100%); }
  .brand-collage-logo { left: 77%; width: 30%; padding: 0; }
  .brand-story-copy { padding: 72px 0 84px; }
  .brand-story-accent { width: 64px; height: 3px; margin-bottom: 20px; }
  .brand-story-copy h2 { margin-bottom: 30px; font-size: 27px; }
  .brand-story-copy p { font-size: 11px; line-height: 1.75; }
  .development-path { padding: 78px 0 87px; }
  .development-path > h2 { font-size: 29px; line-height: 1.12; }
  .development-path > h2::after { margin-top: 17px; }
  .development-path-stage {
    height: auto;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
  }
  .development-path-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 86.4px;
    height: auto;
    margin: 0;
    transform: translate(-50%, -50%);
  }
  .development-path-center { width: 100%; height: 456px; margin-bottom: 25px; }
  .development-path-detail { width: min(324px, 92%); height: 432px; }
  .development-path-detail-inner { padding: 60px 20px 18px; }
  .development-path-detail strong { font-size: 48px; }
  .development-path-detail h3 { margin-top: 13px; font-size: 21px; }
  .development-path-detail p { margin-top: 10px; font-size: 12px; line-height: 1.45; }
  .development-path-detail small { margin-top: 11px; }
  .development-path-connectors { display: none; }
  .development-path-milestones {
    position: relative;
    order: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(183,149,82,.45);
  }
  .development-milestone,
  .milestone-2009,
  .milestone-2016,
  .milestone-2017,
  .milestone-2020,
  .milestone-2023,
  .milestone-2026 {
    position: relative;
    inset: auto;
    width: auto;
    min-height: 112px;
    padding: 22px 13px 18px;
    border-bottom: 1px solid rgba(183,149,82,.45);
    text-align: left;
  }
  .milestone-2009,
  .milestone-2016,
  .milestone-2017 { border-right: 1px solid rgba(183,149,82,.45); }
  .development-milestone::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 13px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
  }
  .development-milestone time { font-size: 34px; }
  .development-milestone p { margin-top: 9px; font-size: 11px; line-height: 1.5; }
  .capability-kpis { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 8px; }
  .capability-kpi,
  .capability-kpi-wide {
    --pillar-height: 220px;
    --pillar-line: 34px;
    --pillar-shape: none;
    width: 100%;
    height: 220px;
    min-height: 220px;
    grid-column: span 1;
    padding: 0 13px 34px;
    display: flex;
    clip-path: none;
  }
  .capability-kpi:first-child,
  .capability-kpi-wide,
  .capability-kpi:last-child { grid-column: span 1; }
  .capability-kpi::before { inset: 1px; clip-path: none; }
  .capability-kpi::after { bottom: 18px; }
  .capability-kpi strong,
  .capability-kpi-wide strong,
  .capability-kpi:last-child strong { display: block; margin: 0; font-size: 39px; }
  .capability-kpi strong::before { height: 34px; margin-bottom: 14px; }
  .capability-kpi span { min-height: 48px; margin-top: 15px; display: grid; font-size: 9px; text-align: center; }
  .investment { padding: 69px 0 81px; }
  .investment > h2 { font-size: 42px; }
  .investment > h2::after { width: 100%; margin-top: 18px; }
  .investment-showcase { gap: 30px; margin-top: 22px; }
  .investment-feature { height: auto; grid-template-columns: 1fr; }
  .investment-feature-media { height: auto; aspect-ratio: 4 / 3; }
  .investment-feature-copy { min-height: 265px; padding: 28px 24px 30px; justify-content: center; }
  .investment-feature-index { font-size: 48px; }
  .investment-feature-copy > i { width: 36px; height: 1px; margin: 14px 0 18px; }
  .investment-feature-title { font-size: 25px; }
  .investment-feature-description { font-size: 13px; }
  .investment-feature-arrow { position: static; margin-top: 20px; }
  .investment-fan { width: 100%; height: auto; margin: 0; padding: 0; display: flex; gap: 8px; overflow: visible; }
  .investment-sector,
  .investment-sector:nth-child(n) { width: 100%; height: 72px; margin-inline: 0; grid-template-columns: 30% 70%; clip-path: none; }
  .investment-sector:hover { transform: none; }
  .capability-kpi:hover,
  .project-card:hover,
  .news-list article:hover { transform: none; }
  .brand-collage-image:hover img,
  .project-card:hover > img,
  .investment-feature:hover .investment-feature-media img,
  .news-feature:hover img,
  .news-list article:hover img,
  .logo-set article:hover img { transform: none; }
  .investment-sector-content { padding: 0 12px; grid-template-columns: auto 1px minmax(0,1fr); gap: 10px; }
  .investment-sector-number { font-size: 27px; }
  .investment-sector-content > i { height: 34px; }
  .investment-sector-name { font-size: 13px; }
  .quick-facts { min-height: 0; padding: 32px 0 18px; }
  .facts-heading h2 { font-size: 38px; }
  .facts-heading > span { margin: 14px 0 16px; }
  .facts-track { height: auto; margin: 24px 0 0 8px; padding-left: 32px; display: block; }
  .facts-track::before { left: 8px; right: auto; top: 7px; bottom: 25px; width: 1px; height: auto; }
  .facts-track article { min-height: 88px; padding-bottom: 16px; text-align: left; }
  .facts-track strong,
  .facts-track article:nth-child(even) strong,
  .facts-track .fact-location strong { position: static; display: block; width: auto; font-size: 32px; white-space: normal; }
  .facts-track .fact-location strong { font-size: 19px; }
  .fact-marker { left: -24px; top: 7px; width: 17px; height: 17px; }
  .fact-marker::before,
  .facts-track article:nth-child(even) .fact-marker::before { display: none; }
  .fact-label,
  .facts-track article:nth-child(even) .fact-label { position: static; display: block; width: auto; margin-top: 9px; padding: 0; font-size: 11px; }
  .fact-label::before { width: 28px; margin: 0 0 8px; }
  .facts-emblem { right: -110px; bottom: -70px; opacity: .18; transform: scale(.58); transform-origin: bottom right; }
  .capability { padding-top: 26px; }
  .capability-media { height: 290px; }
  .capability-pagination { left: 50%; bottom: 6px; }
  .capability-copy { padding-top: 35px; }
  .capability-copy h2 { font-size: 43px; }
  .capability-intro { font-size: 13px; }
  .capability-pillars { grid-template-columns: 1fr; gap: 28px; }
  .capability-pillars article { display: grid; grid-template-columns: 55px 1fr; padding: 0 0 22px; border-right: 0; border-bottom: 1px solid var(--line); }
  .capability-pillars article:last-child { border-bottom: 0; }
  .capability-pillars h3 { margin: 3px 0 8px; }
  .capability-pillars p { grid-column: 2; }
  .capability-icon { grid-row: 1 / 3; }
  .investment > h2, .featured-projects > h2 { font-size: 39px; }
  .investment-grid { grid-template-columns: 1fr; min-height: 0; }
  .sector-main { grid-column: auto; }
  .sector-main .sector-media { min-height: 0; height: 245px; }
  .sector-media { height: 170px; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card:last-child { grid-column: auto; width: 100%; }
  .project-card > img { height: 205px; }
  .project-card h3, .project-card p { min-height: 0; }
  .section-index { margin-bottom: 17px; font-size: 11px; }
  .ecosystem { padding: 72px 0 87px; }
  .network-heading h2 { font-size: 41px; }
  .network-heading > p { padding-left: 18px; font-size: 12px; line-height: 1.7; }
  .watermark { top: 15px; right: -15px; font-size: 60px; }
  .network-marquees { margin-top: 38px; }
  .network-lane + .network-lane { margin-top: 18px; }
  .network-lane-label { margin-bottom: 9px; font-size: 11px; }
  .logo-set article { width: 175px; height: 105px; flex-basis: 175px; padding: 19px 25px; }
  .partner-logo-set img,
  .ecosystem-logo-set img { max-width: 140px; max-height: 53px; }
  .logo-track-left { animation-duration: 46s; }
  .logo-track-right { animation-duration: 34s; }
  .journey { padding-top: 50px; }
  .journey-intro { padding-bottom: 48px; }
  .journey-intro h2 { font-size: 48px; }
  .timeline::before { left: 15px; }
  .timeline-item { grid-template-columns: 1fr; gap: 12px; min-height: 0; margin-bottom: 42px; padding-left: 42px; }
  .timeline-item::before { left: 15px; top: 18px; }
  .timeline-item img, .timeline-item .timeline-copy { grid-column: 1; width: 100%; max-width: none; justify-self: stretch; text-align: left; }
  .timeline-item img { height: 150px; }
  .timeline-item .timeline-copy { grid-row: 1; }
  .timeline-copy time { font-size: 24px; }
  .news { grid-template-columns: 1fr; padding-top: 72px; }
  .news-title { padding-right: 0; }
  .news-title > h2 { font-size: 48px; }
  .headline-text { margin-top: 25px; }
  .news-feature { padding-top: 30px; }
  .news-feature img { height: auto; }
  .news-list { display: block; padding-top: 25px; }
  .news-list article + article { padding-top: 20px; }
  .news-list h3 { font-size: 14px; }
  .callout { min-height: 0; grid-template-columns: 1fr; gap: 0; padding: 63px 0; }
  .callout > h2 { font-size: 42px; }
  .callout-content { width: 100%; margin-top: 32px; justify-self: stretch; text-align: left; }
  .callout-actions { align-items: flex-start; margin-top: 32px; }
  .callout-actions > a:first-child { min-width: 250px; }
  .site-footer { grid-template-columns: 1fr; margin-top: 20px; margin-bottom: 0; padding: 26px 20px 28px; gap: 27px; background-size: auto 607px; border-radius: 0; }
  .footer-heading,
  .footer-office,
  .footer-office-headquarters,
  .footer-navigation,
  .newsletter { grid-column: 1 / -1; }
  .footer-heading { min-height: 138px; align-items: center; margin-bottom: 6px; padding: 0; }
  .footer-heading img { width: 168px; height: 125px; }
  .footer-office,
  .footer-office-headquarters,
  .footer-office:nth-of-type(3),
  .footer-office:nth-of-type(4) { padding: 0; border-left: 0; border-bottom: 1px solid rgba(183,149,82,.48); }
  .footer-office-toggle {
    min-height: 61px;
    margin: 0;
    padding: 14px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #795719;
    font-size: 11px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
  }
  .footer-office-toggle span { max-width: calc(100% - 42px); }
  .footer-office-toggle i {
    position: relative;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: block;
    border: 1px solid rgba(183,149,82,.55);
    border-radius: 50%;
    background: rgba(255,253,248,.66);
    box-shadow: 0 5px 13px rgba(83,58,14,.06);
    transition: background-color .4s ease, border-color .4s ease, transform .55s cubic-bezier(.22,1,.36,1);
  }
  .footer-office-toggle i::before,
  .footer-office-toggle i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 1px;
    background: #9a741f;
    transform: translate(-50%, -50%);
    transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  }
  .footer-office-toggle i::after { transform: translate(-50%, -50%) rotate(90deg); }
  .footer-office.is-open .footer-office-toggle i {
    border-color: #b9903c;
    background: #fff9eb;
    transform: rotate(180deg);
  }
  .footer-office.is-open .footer-office-toggle i::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }
  .footer-office-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-7px);
    transition: grid-template-rows .58s cubic-bezier(.22,1,.36,1), opacity .34s ease, transform .58s cubic-bezier(.22,1,.36,1);
  }
  .footer-office-panel-inner { min-height: 0; overflow: hidden; }
  .footer-office.is-open .footer-office-panel { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); }
  .footer-office-panel-inner { padding: 0 3px; }
  .footer-office.is-open .footer-office-panel-inner { padding-bottom: 21px; }
  .footer-office address { min-height: 0; margin-bottom: 15px; font-size: 11px; line-height: 1.65; }
  .footer-contact-list { padding-top: 14px; }
  .footer-contact-list p { grid-template-columns: 96px minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
  /* Keep contact icons identical to the desktop treatment on mobile. */
  .footer-contact-list span { gap: 10px; font-size: 8.5px; }
  .footer-contact-list span::before {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
    font-size: 9px;
  }
  .footer-contact-list a,
  .footer-contact-list b { font-size: 9px; }
  .footer-contact-list a[href^="mailto:"] { font-size: 8px; }
  .footer-navigation { display: none; }
  .newsletter { padding-top: 25px; display: block; border-top: 0; }
  .newsletter h3 { margin-bottom: 9px; font-size: 12px; }
  .newsletter p { max-width: 280px; font-size: 10px; line-height: 1.6; }
  .newsletter form { height: 49px; margin-top: 16px; border-radius: 9px; }
}

/* Network hierarchy: show Discovery's own ecosystem before external partners. */
.network-marquees {
  display: flex;
  flex-direction: column;
}
.network-lane:first-child { order: 2; }
.network-lane:last-child { order: 1; }

/* Keep ecosystem and strategic-partner marquees visually balanced. */
.ecosystem-logo-marquee .logo-set article {
  width: 207px;
  height: 112px;
  flex-basis: 207px;
  padding: 21px 30px;
}
.ecosystem-logo-marquee .ecosystem-logo-set img {
  max-width: 160px;
  max-height: 56px;
}
.partner-marquee .logo-set article {
  width: 207px;
  height: 112px;
  flex-basis: 207px;
  padding: 21px 30px;
}
.partner-marquee .partner-logo-set img {
  max-width: 160px;
  max-height: 56px;
}

@media (max-width: 980px) {
  .ecosystem-logo-marquee .logo-set article {
    width: 207px;
    height: 112px;
    flex-basis: 207px;
  }
  .partner-marquee .logo-set article {
    width: 207px;
    height: 112px;
    flex-basis: 207px;
  }
}

@media (max-width: 620px) {
  .ecosystem-logo-marquee .logo-set article {
    width: 157px;
    height: 95px;
    flex-basis: 157px;
    padding: 17px 22px;
  }
  .ecosystem-logo-marquee .ecosystem-logo-set img {
    max-width: 125px;
    max-height: 48px;
  }
  .partner-marquee .logo-set article {
    width: 157px;
    height: 95px;
    flex-basis: 157px;
    padding: 17px 22px;
  }
  .partner-marquee .partner-logo-set img {
    max-width: 125px;
    max-height: 48px;
  }
}

/* Enlarge the eight editorial sections by 10% while preserving the hero and footer scale. */
@media (min-width: 981px) {
  main > section:not(.opening) {
    width: min(1267px, calc(100vw - 128px));
    max-width: 84.15vw;
  }

  .brand-story { margin-top: 59px; }
  .brand-story-copy { padding: 0 clamp(18px, 1.98vw, 30px) 0 clamp(34px, 3.66vw, 55px); }
  .brand-story-accent { width: 99px; margin-bottom: 25px; }
  .brand-story-copy h2 { margin-bottom: 37px; font-size: clamp(30px, 2.77vw, 37px); }
  .brand-story-copy p { margin-bottom: 18px; font-size: 14px; }

  .development-path { padding: clamp(95px, 8.91vw, 131px) 0 clamp(86px, 7.43vw, 113px); }
  .development-path > h2 { font-size: clamp(44px, 4.16vw, 55px); }
  .development-path > h2::after { margin-top: 22px; }
  .development-path-stage { width: min(1188px, 100%); margin-top: 15px; }
  .development-path-detail-inner { padding: 64px 34px 24px; }
  .development-path-detail strong { font-size: clamp(44px, 3.76vw, 57px); }
  .development-path-detail h3 { font-size: clamp(20px, 1.78vw, 24px); }
  .development-path-detail p { font-size: 12px; }
  .development-milestone time { font-size: clamp(37px, 3.17vw, 48px); }
  .development-milestone p { margin-top: 11px; font-size: 11px; }

  .capability { padding-block: clamp(34px, 3.56vw, 52px); }
  .capability-copy { padding-left: clamp(57px, 4.65vw, 67px); }
  .capability-copy h2 { font-size: clamp(48px, 4.46vw, 59px); }
  .capability-kpis { height: clamp(327px, 28.71vw, 426px); margin-top: clamp(24px, 2.2vw, 32px); }
  .capability-kpi { padding-bottom: clamp(40px, 3.17vw, 50px); }
  .capability-kpi strong,
  .capability-kpi-wide strong,
  .capability-kpi:last-child strong { font-size: clamp(15px, 1.54vw, 23px); }
  .capability-kpi span { min-height: clamp(52px, 4.46vw, 67px); margin-top: clamp(15px, 1.39vw, 22px); font-size: clamp(9px, .75vw, 11px); }

  .investment { padding: 86px 0 105px; }
  .investment > h2,
  .featured-projects > h2 { font-size: clamp(47px, 4.06vw, 59px); }
  .investment > h2::after { width: min(495px, 41.58vw); margin-top: 24px; }
  .investment-showcase { gap: clamp(40px, 4.16vw, 65px); margin-top: 34px; }
  .investment-feature { height: clamp(386px, 30.69vw, 416px); }
  .investment-feature-copy { padding: clamp(28px, 2.2vw, 34px); }
  .investment-feature-index { font-size: clamp(42px, 3.56vw, 55px); }
  .investment-feature-title { font-size: clamp(21px, 1.74vw, 26px); }
  .investment-feature-description { font-size: clamp(12px, .99vw, 14px); }
  .investment-feature-arrow { left: clamp(28px, 2.2vw, 34px); bottom: clamp(24px, 1.98vw, 30px); }
  .investment-fan { gap: 8px; }
  .investment-sector { height: 62px; }
  .investment-sector-number { font-size: clamp(23px, 1.98vw, 30px); }
  .investment-sector-name { font-size: clamp(11px, .81vw, 13px); }

  .featured-projects { padding: 67px 0 83px; }
  .project-grid { gap: 24px; margin-top: 28px; }
  .project-card > img { height: 233px; }
  .project-card-body { padding: 20px 19px 22px; }
  .project-card h3 { min-height: 69px; font-size: clamp(22px, 1.78vw, 25px); }
  .project-card p { font-size: 13px; }
  .project-card-body > p:last-child { min-height: 57px; }

  .ecosystem { min-height: 752px; padding: 110px 0 122px; }
  .network-heading h2 { font-size: clamp(47px, 4.31vw, 59px); }
  .network-heading { gap: clamp(40px, 6.93vw, 109px); }
  .network-marquees { margin-top: 57px; }
  .network-lane + .network-lane { margin-top: 22px; }
  .logo-set article { width: 230px; height: 124px; flex-basis: 230px; padding: 24px 34px; }
  .partner-logo-set img,
  .ecosystem-logo-set img { max-width: 178px; max-height: 62px; }

  .news { min-height: 471px; padding: 86px 0 72px; }
  .news-title { padding-right: 37px; }
  .news-title > h2 { font-size: clamp(45px, 3.96vw, 58px); }
  .headline-text { margin-top: 42px; }
  .news-feature { padding-top: 75px; }
  .news-feature img { height: auto; }
  .news-list { margin-left: 28px; padding-top: 75px; }
  .news-list article { min-height: 124px; }
  .news-list img { height: auto; }
  .news-list h3 { font-size: 15px; }

  .callout { min-height: 386px; }
  .callout > h2 { padding-left: 24px; font-size: clamp(40px, 3.66vw, 53px); }
  .callout-content { width: min(356px, 100%); }
  .callout-actions { margin-top: 25px; gap: 18px; }
  .callout-actions > a:first-child { min-width: 277px; padding: 15px 28px; }
  .line-emblem { width: 208px; height: 218px; }
}

@media (min-width: 621px) and (max-width: 980px) {
  main > section:not(.opening) {
    width: min(752px, calc(100% - 56px));
    max-width: 84.15vw;
  }

  .brand-story { padding-bottom: 101px; }
  .brand-story-visual,
  .brand-collage { min-height: 515px; }
  .brand-story-copy { padding: 92px 24px; }
  .development-path { padding-block: 95px 86px; }
  .development-path > h2 { font-size: clamp(44px, 4.16vw, 55px); }
  .development-path-center { height: 463px; margin-bottom: 30px; }
  .development-path-detail { height: 440px; }
  .development-milestone { min-height: 123px; }
  .capability-media { height: 426px; }
  .capability-copy { padding: 47px 0 30px; }
  .capability-copy h2 { font-size: clamp(48px, 4.46vw, 59px); }
  .investment { padding: 86px 0 105px; }
  .investment-feature { width: min(673px, 100%); height: clamp(386px, 41.8vw, 416px); }
  .investment-fan { width: min(471px, 70%); }
  .featured-projects { padding: 67px 0 83px; }
  .project-card > img { height: 233px; }
  .ecosystem { padding: 110px 0 122px; }
  .logo-set article { width: 230px; height: 124px; flex-basis: 230px; padding: 24px 34px; }
  .partner-logo-set img,
  .ecosystem-logo-set img { max-width: 178px; max-height: 62px; }
  .news { min-height: 471px; padding: 86px 0 72px; }
  .news-feature img { height: auto; }
  .news-list img { height: auto; }
  .callout { min-height: 386px; }
}

@media (max-width: 620px) {
  main > section:not(.opening) {
    width: calc(100% - 20px);
    max-width: 93.5vw;
  }

  .brand-story {
    margin-top: 72px;
    /* Tighten only the handoff from the brand CTA to the next heading. */
    padding-bottom: 8px !important;
    padding-bottom: 78px;
    display: block;
    overflow: visible;
  }
  .brand-story-visual {
    min-height: 0;
    padding-bottom: 36px;
  }
  .brand-collage {
    min-height: 0;
    aspect-ratio: 1 / 1.03;
    overflow: hidden;
    border-radius: 19px;
    background: #dedbd3;
    box-shadow: 0 17px 42px rgba(38, 29, 15, .14);
  }
  .brand-collage-image,
  .brand-collage-image-top,
  .brand-collage-image-bottom {
    inset: 0;
    width: 100%;
    height: 100%;
    clip-path: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.045);
    transition: transform 1.15s cubic-bezier(.16, 1, .3, 1), visibility 0s;
  }
  .brand-collage-image.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
  .brand-collage-image::after {
    z-index: 1;
    background: linear-gradient(180deg, transparent 52%, rgba(10, 12, 12, .1) 67%, rgba(10, 12, 12, .7) 100%);
  }
  .brand-collage-image img,
  .brand-collage-image:hover img {
    height: 100%;
    filter: saturate(.88) contrast(1.02);
    transform: scale(1.01);
  }
  .brand-collage-image-top img { object-position: center center; }
  .brand-collage-image-bottom img { object-position: center center; }
  .brand-collage-logo { display: none; }
  .brand-mobile-nav {
    position: absolute;
    z-index: 5;
    top: auto;
    bottom: -3px;
    width: 30px;
    height: 30px;
    padding: 0 0 2px;
    display: grid;
    place-items: center;
    color: #9c762f;
    font-family: Georgia, serif;
    font-size: 22px;
    line-height: 1;
    border: 1px solid rgba(183, 149, 82, .72);
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 5px 14px rgba(71, 52, 17, .1);
    transition: color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
  }
  .brand-mobile-nav-prev { left: calc(50% - 70px); }
  .brand-mobile-nav-next { right: calc(50% - 70px); }
  .brand-mobile-nav:focus-visible {
    outline: 2px solid rgba(183, 149, 82, .34);
    outline-offset: 3px;
  }
  .brand-mobile-nav:active { transform: scale(.92); }
  .brand-mobile-swipe {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 21px;
    display: block;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .42);
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .brand-mobile-pagination {
    position: absolute;
    left: 50%;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateX(-50%);
  }
  .brand-mobile-pagination button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #dddcd8;
    transition: width .35s cubic-bezier(.22, 1, .36, 1), background-color .35s ease;
  }
  .brand-mobile-pagination button.is-active {
    width: 29px;
    background: var(--gold);
  }
  .brand-story-copy {
    padding: 50px 13px 0;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .brand-story-copy::before,
  .brand-story-accent { display: none; }
  .brand-story-copy h2 {
    margin-bottom: 22px;
    color: #171a19;
    font-family: var(--font-subtitle);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.025em;
    text-transform: none;
  }
  .brand-story-copy p {
    max-width: 345px;
    margin: 0 auto 17px;
    color: #555753;
    font-size: 12px;
    line-height: 1.72;
  }
  .brand-story-extra {
    order: 2;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .58s cubic-bezier(.22, 1, .36, 1), opacity .34s ease;
  }
  .brand-story-extra-inner {
    position: relative;
    min-height: 0;
    display: block;
    overflow: hidden;
  }
  .brand-story-extra-inner::before {
    content: 'DISCOVERY / INSIGHT';
    display: block;
    width: max-content;
    margin: 0 auto 15px;
    color: rgba(156, 119, 53, .72);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .22em;
    line-height: 1;
    opacity: 0;
    transform: translateY(9px);
    transition: opacity .45s ease, transform .62s cubic-bezier(.22, 1, .36, 1);
  }
  .brand-story-copy.is-expanded .brand-story-extra {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .brand-story-extra-inner { padding-top: 0; transition: padding-top .58s cubic-bezier(.22, 1, .36, 1); }
  .brand-story-copy.is-expanded .brand-story-extra-inner { padding-top: 23px; }
  .brand-story-extra-inner p {
    opacity: 0;
    transform: translateY(13px);
    transition: opacity .48s ease, transform .62s cubic-bezier(.22, 1, .36, 1);
  }
  .brand-story-copy.is-expanded .brand-story-extra-inner::before,
  .brand-story-copy.is-expanded .brand-story-extra-inner p {
    opacity: 1;
    transform: translateY(0);
  }
  .brand-story-copy.is-expanded .brand-story-extra-inner p:nth-child(1) { transition-delay: .08s; }
  .brand-story-copy.is-expanded .brand-story-extra-inner p:nth-child(2) { transition-delay: .18s; }
  .brand-story-copy.is-expanded .brand-story-extra-inner p:nth-child(3) { transition-delay: .28s; }
  .brand-story-more {
    position: relative;
    isolation: isolate;
    overflow: visible;
    order: 1;
    min-width: 164px;
    height: 45px;
    margin: 25px auto 0;
    padding: 0 25px;
    display: inline-grid;
    place-items: center;
    color: #9c7735;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    border: 1px solid rgba(183, 149, 82, .72);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(73, 51, 13, .06);
    transition: color .35s ease, background-color .35s ease, border-color .35s ease, box-shadow .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
  }
  .brand-story-more::before {
    content: '';
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(183, 149, 82, .45);
    border-radius: 11px;
    opacity: 0;
    pointer-events: none;
    transform: scale(.72);
  }
  .brand-story-more::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
  }
  .brand-story-copy.is-more-arming .brand-story-more {
    color: #7f5c20;
    border-color: rgba(183, 149, 82, .95);
    background: linear-gradient(105deg, #fff 0%, #fffaf0 42%, #f5ead0 50%, #fffaf0 58%, #fff 100%);
    background-size: 230% 100%;
    box-shadow: 0 0 0 1px rgba(183, 149, 82, .11), 0 13px 30px rgba(73, 51, 13, .13);
    animation: brand-more-sheen 1.05s ease both;
  }
  .brand-story-copy.is-more-arming .brand-story-more::before {
    animation: brand-more-ring .9s cubic-bezier(.22, 1, .36, 1) both;
  }
  .brand-story-copy.is-expanded .brand-story-more::after {
    transform: translateY(-35%) rotate(225deg);
  }
  .brand-story-copy.is-expanded .brand-story-more {
    order: 3;
    margin-top: 23px;
  }
  .brand-story-copy.is-more-holding .brand-story-more { order: 1; margin-top: 25px; }
  .brand-story-copy.is-more-collapsing .brand-story-more { order: 3; margin-top: 23px; }
  .brand-story-copy.is-more-moving .brand-story-more {
    opacity: 0;
    pointer-events: none;
  }
  .brand-story-more.is-reordered {
    transition: transform 1s cubic-bezier(.22, 1, .36, 1);
  }
  .brand-story-more:active { transform: scale(.97); }
  .brand-story-copy.is-expanded .brand-story-more {
    color: #7f5c20;
    border-color: rgba(183, 149, 82, .9);
    background: #fffaf0;
    box-shadow: 0 10px 24px rgba(73, 51, 13, .1);
  }

  @keyframes brand-more-sheen {
    0% { background-position: 120% 0; }
    100% { background-position: -25% 0; }
  }
  @keyframes brand-more-ring {
    0% { opacity: .85; transform: scale(.72); }
    70% { opacity: .2; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.22); }
  }

@media (prefers-reduced-motion: reduce) {
    .brand-story-extra,
    .brand-story-more,
    .brand-story-extra-inner::before,
    .brand-story-extra-inner p { transition-duration: .01ms; }
    .brand-story-more::before,
    .brand-story-more::after { animation: none !important; transition-duration: .01ms; }
  }

  .development-path { padding: 76px 0 80px; }
  .development-path > h2 { font-size: 30px; }
  .development-path-stage {
    --timeline-card-height: clamp(92px, 24vw, 104px);
    --timeline-card-gap: 10px;
    height: auto;
    aspect-ratio: auto;
    margin-top: 31px;
    display: block;
  }
  .development-path-center,
  .development-path-connectors { display: none; }
  .development-path-milestones {
    position: relative;
    inset: auto;
    width: min(354px, calc(100% - 8px));
    height: calc(var(--timeline-card-height) * 4 + var(--timeline-card-gap) * 3 + 8px);
    margin-inline: auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: var(--timeline-card-gap);
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    scroll-snap-type: y mandatory;
    scroll-behavior: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: auto;
    counter-reset: development-card;
  }
  .development-path-milestones::-webkit-scrollbar { display: none; }
  .development-milestone,
  .milestone-2009,
  .milestone-2016,
  .milestone-2017,
  .milestone-2020,
  .milestone-2023,
  .milestone-2026 {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: var(--timeline-card-height);
    height: var(--timeline-card-height);
    flex: 0 0 var(--timeline-card-height);
    padding: 15px 42px 15px 18px;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    overflow: hidden;
    color: #282821;
    text-align: left;
    border: 1px solid rgba(183,149,82,.42);
    border-radius: 13px;
    background:
      radial-gradient(circle at 96% 0%, rgba(214,178,102,.13), transparent 38%),
      linear-gradient(145deg, #fffefb, #fbf7ed);
    box-shadow: 0 9px 24px rgba(67,50,18,.075), inset 0 1px 0 rgba(255,255,255,.92);
    opacity: .42;
    transform: translateY(8px) scale(.985);
    transition: opacity .45s ease, transform .58s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease;
    scroll-snap-align: none;
    counter-increment: development-card;
    cursor: default;
  }
  .development-milestone:nth-child(1),
  .development-milestone:nth-child(3) {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .development-milestone.is-in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .development-milestone::before {
    content: "";
    position: absolute;
    inset: 13px auto 13px 0;
    width: 3px;
    height: auto;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #e1bd6d, #9d7029);
    box-shadow: 0 0 13px rgba(190,145,57,.2);
  }
  .development-milestone::after {
    content: counter(development-card, decimal-leading-zero);
    position: absolute;
    right: 13px;
    top: 12px;
    color: rgba(157,112,41,.44);
    font-family: var(--font-time);
    font-size: 10px;
    letter-spacing: .04em;
  }
  .development-milestone time {
    margin: 0;
    color: #a8792c;
    font-size: clamp(29px, 8.5vw, 35px);
    line-height: 1;
    letter-spacing: -.025em;
  }
  .development-milestone p {
    margin: 0;
    color: #35352f;
    font-size: clamp(9px, 2.6vw, 11px);
    font-weight: 600;
    line-height: 1.42;
    letter-spacing: .035em;
    text-transform: uppercase;
  }
  .development-mobile-scroll-status {
    width: min(354px, calc(100% - 8px));
    margin: 15px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #9b7737;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  .development-mobile-scroll-status > div { display: flex; align-items: center; gap: 7px; }
  .development-mobile-scroll-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(183,149,82,.25);
    transition: width .4s cubic-bezier(.22,1,.36,1), background-color .35s ease, box-shadow .35s ease;
  }
  .development-mobile-scroll-status i.is-active {
    width: 22px;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 3px 9px rgba(113,78,19,.18);
  }

  .capability { padding-top: 25px; }
  .capability-media { height: 287px; }
  .capability-copy { padding-top: 35px; }
  .capability-copy h2 { font-size: 39px; line-height: 1.02; }
  .capability-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 5px;
    margin-top: 22px;
  }
  .capability-kpi,
  .capability-kpi-wide {
    --pillar-height: clamp(172px, 46vw, 190px);
    --pillar-line: 25px;
    height: clamp(172px, 46vw, 190px);
    min-height: clamp(172px, 46vw, 190px);
    padding: 0 4px;
    align-items: center;
    justify-content: center;
  }
  .capability-kpi::after { left: 18%; right: 18%; bottom: 11px; }
  .capability-kpi strong,
  .capability-kpi-wide strong,
  .capability-kpi:last-child strong {
    width: 100%;
    font-size: clamp(22px, 7.2vw, 30px);
    text-align: center;
  }
  .capability-kpi strong::before { height: 25px; margin-bottom: 9px; }
  .capability-kpi span {
    min-height: 39px;
    margin-top: 10px;
    font-size: clamp(6.2px, 1.7vw, 7.4px);
    line-height: 1.4;
    letter-spacing: .045em;
    text-align: center;
  }

  .investment { padding: 68px 0 82px; }
  .investment > h2,
  .featured-projects > h2 { font-size: 39px; }
  .investment > h2 {
    text-align: center;
    line-height: 1.08;
  }
  .investment > h2::after {
    width: 178px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, transparent, var(--gold) 24%, var(--gold) 76%, transparent);
  }
  .investment-showcase {
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 25px;
  }
  .investment-fan {
    order: 1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px 7px;
  }
  .investment-sector,
  .investment-sector:nth-child(n),
  .investment-sector:is(:hover, :focus-visible) {
    --sector-hover-scale: 1;
    width: 100%;
    height: 50px;
    margin: 0;
    display: flex;
    color: #725526;
    background: linear-gradient(180deg, #fffdf8, #f7f0df);
    border: 1px solid rgba(183, 149, 82, .62);
    border-radius: 999px;
    clip-path: none;
    box-shadow: 0 7px 18px rgba(97, 68, 18, .07), inset 0 1px 0 rgba(255,255,255,.9);
    transform: none;
  }
  .investment-sector::before,
  .investment-sector::after,
  .investment-sector-media,
  .investment-sector-number,
  .investment-sector-content > i,
  .investment-sector-arrow { display: none; }
  .investment-sector-content {
    width: 100%;
    height: 100%;
    padding: 0 7px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    background: transparent;
  }
  .investment-sector-name {
    width: 100%;
    color: inherit;
    font-size: 0;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: .015em;
    text-align: center;
    text-transform: none;
  }
  .investment-sector-name::after {
    content: attr(data-mobile-label);
    font-size: clamp(7.2px, 2.2vw, 9px);
  }
  .investment-sector.is-active,
  .investment-sector.is-active:is(:hover, :focus-visible) {
    color: #fffdf7;
    background: linear-gradient(135deg, #8e641f 0%, #c69d4c 48%, #9b712a 100%);
    border-color: #b68a3b;
    box-shadow: 0 11px 24px rgba(112, 76, 17, .22), inset 0 1px 0 rgba(255,255,255,.3);
  }
  .investment-feature {
    order: 2;
    height: auto;
    overflow: hidden;
    grid-template-columns: 1fr;
    border-color: rgba(183, 149, 82, .34);
    border-radius: 17px;
    box-shadow: 0 18px 42px rgba(52, 40, 16, .11);
  }
  .investment-feature-media {
    height: auto;
    aspect-ratio: 16 / 10.5;
  }
  .investment-feature-copy {
    min-height: 0;
    padding: 25px 21px 27px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .investment-feature-index,
  .investment-feature-copy > i { display: none; }
  .investment-feature-title {
    margin-bottom: 13px;
    font-size: 24px;
    line-height: 1.12;
    text-transform: none;
  }
  .investment-feature-description {
    max-width: 330px;
    font-size: 12px;
    line-height: 1.68;
  }
  /* Nút viên thuốc có chữ: trên điện thoại, bấm vào các lĩnh vực phía trên chỉ
     đổi thẻ bên dưới, nên cần một nút nói rõ đây mới là lối vào trang con. */
  .investment-feature-arrow {
    position: static;
    width: auto;
    height: auto;
    margin: 20px auto 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 26px;
    border: 1px solid rgba(183, 149, 82, .72);
    border-radius: 999px;
    background: #fffaf0;
    color: var(--gold);
    font-family: var(--font-time);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
  }

  .investment-feature-arrow > span { display: inline; }

  .investment-feature-arrow > i {
    font-size: 15px;
    font-style: normal;
    line-height: 1;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  }

  .investment-feature-arrow:active { background: var(--gold); border-color: var(--gold); color: #fff; }
  .investment-feature-arrow:active > i { transform: translateX(4px); }

  /* Khối chữ của thẻ căn giữa nên nút cũng phải tự căn giữa theo. */
  .investment-feature-copy { text-align: center; }

  .featured-projects { padding: 67px 0 83px; }
  .project-grid {
    width: 100%;
    margin-top: 28px;
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: auto;
  }
  .project-grid::-webkit-scrollbar { display: none; }
  .project-card,
  .project-card:last-child {
    width: 100%;
    min-width: 100%;
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .project-card > img { height: 204px; }
  .project-card-body { padding: 20px 19px 22px; }
  .project-card h3 { min-height: 54px; }
  .project-card-body > p:last-child { min-height: 84px; }
  .project-pagination {
    min-height: 22px;
    margin-top: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .project-pagination button {
    position: relative;
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(183, 149, 82, .28);
    box-shadow: inset 0 0 0 1px rgba(151, 112, 39, .22);
    transition: background-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
  }
  .project-pagination button::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
  }
  .project-pagination button.is-active {
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(183, 149, 82, .13), 0 2px 7px rgba(112, 77, 18, .24);
    transform: scale(1.16);
  }

  .ecosystem { padding: 72px 0 86px; }
  .network-heading h2 { font-size: 41px; }
  .network-marquees { margin-top: 37px; }
  .logo-set article { width: 174px; height: 105px; flex-basis: 174px; padding: 19px 25px; }
  .partner-logo-set img,
  .ecosystem-logo-set img { max-width: 139px; max-height: 53px; }

  .news { padding: 72px 0; }
  .news-title {
    padding-right: 0;
    text-align: center;
  }
  .news-title .section-index { justify-content: center; }
  .news-title > h2 { font-size: 43px; line-height: 1.02; }
  .news-title .gold-rule { margin: 14px auto 0; }
  .headline-text,
  .news > .news-feature,
  .news > .news-list { display: none; }
  .news-mobile-carousel {
    width: 100%;
    margin-top: 26px;
    display: block;
    overflow: hidden;
  }
  .news-mobile-track {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: auto;
  }
  .news-mobile-track::-webkit-scrollbar { display: none; }
  .news-mobile-card {
    width: 100%;
    min-width: 100%;
    flex: 0 0 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border: 1px solid var(--line);
    background: #fff;
  }
  .news-mobile-card > img,
  .news-mobile-card > a:first-child > img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
  }
  .news-mobile-card > a:first-child {
    width: 100%;
    margin-top: 0;
    display: block;
    overflow: hidden;
  }
  .news-mobile-card > a:first-child > img {
    height: auto;
    object-fit: cover;
  }
  .news-mobile-card > div {
    flex: 1;
    min-height: 188px;
    padding: 21px 19px 23px;
    display: flex;
    flex-direction: column;
  }
  .news-mobile-card time { margin-bottom: 10px; color: var(--gold); }
  .news-mobile-card h3 {
    min-height: 68px;
    font-size: 20px;
    line-height: 1.25;
  }
  .news-mobile-card > div > a { width: max-content; margin-top: auto; }
  .news-pagination {
    min-height: 22px;
    margin-top: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .news-pagination button {
    position: relative;
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(183, 149, 82, .28);
    box-shadow: inset 0 0 0 1px rgba(151, 112, 39, .22);
    transition: background-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
  }
  .news-pagination button::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
  }
  .news-pagination button.is-active {
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(183, 149, 82, .13), 0 2px 7px rgba(112, 77, 18, .24);
    transform: scale(1.16);
  }

  .callout { padding: 63px 0; }
  .callout > h2 { font-size: 42px; }
  .callout-content { margin-top: 32px; }
  .callout-actions { margin-top: 32px; }
  .callout-actions > a:first-child { min-width: 248px; padding: 15px 28px; }
}

/* Section and card headings use the requested all-caps editorial treatment. */
main h1,
main h2,
main h3 {
  text-transform: uppercase !important;
}

/* Montserrat's fine hairlines can disappear on low-density screens; strengthen display text slightly. */
.opening-copy h1,
.brand-story-copy h2,
.development-path > h2,
.development-path-detail h3,
.facts-heading h2,
.capability-copy h2,
.investment > h2,
.featured-projects > h2,
.network-heading > h2,
.news-title > h2,
.callout > h2 {
  font-weight: 600;
  text-rendering: optimizeLegibility;
  -webkit-text-stroke: .12px currentColor;
}

/* Editorial type hierarchy: serif display, quiet sans copy, mono metadata. */
body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

body { font-weight: 300; }

.section-index,
.opening-label,
.primary-nav a,
.language,
.contact-link,
.opening-actions a,
.opening-scroll span,
.facts-heading p,
.fact-label,
.investment-feature-index,
.investment-sector-number,
.network-lane-label span,
.timeline-copy time,
.footer-contact-list span {
  font-family: var(--font-time);
}

.section-index,
.opening-label,
.primary-nav a,
.contact-link,
.opening-actions a,
.facts-heading p,
.fact-label,
.footer-contact-list span {
  letter-spacing: .12em;
}

/* Keep the selected mobile timeline study above the legacy mobile layout. */
@media (max-width: 620px) {
  .page-thomas-home .development-path { padding-top: 64px !important; }
  .development-path { padding: 48px 0 52px; }
  .development-path > h2 { font-size: 28px; line-height: 1.12; }
  .development-path > h2::after { width: 38px; margin-top: 13px; }
  .development-path-stage {
    --timeline-card-height: clamp(52px, 7.9svh, 66px);
    height: auto;
    margin-top: 18px;
  }
  .development-path-milestones {
    position: relative;
    inset: auto;
    width: min(354px, calc(100% - 20px));
    height: auto;
    margin-inline: auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    overflow: visible;
    scroll-snap-type: none;
    counter-reset: none;
  }
  .development-milestone,
  .milestone-2009,
  .milestone-2016,
  .milestone-2017,
  .milestone-2020,
  .milestone-2023,
  .milestone-2026 {
    position: relative;
    inset: auto;
    width: 100%;
    height: var(--timeline-card-height);
    min-height: var(--timeline-card-height);
    padding: 7px 30px;
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgba(183,149,82,.4);
    border-radius: 12px;
    background: linear-gradient(145deg, #fffefb, #faf4e7);
    box-shadow: 0 7px 18px rgba(67,50,18,.065), inset 0 1px 0 rgba(255,255,255,.95);
    opacity: 0;
    transform: translateY(10px) scale(.985);
    scroll-snap-align: none;
  }
  .development-milestone.is-in-view { opacity: 1; transform: translateY(0) scale(1); }
  .development-milestone:nth-child(1),
  .development-milestone:nth-child(3) { scroll-snap-align: none; }
  .milestone-2009,
  .milestone-2016,
  .milestone-2017,
  .milestone-2020,
  .milestone-2023,
  .milestone-2026 {
    grid-column: auto;
    grid-row: auto;
  }
  .development-milestone::before {
    inset: 0 24px auto;
    width: auto;
    height: 2px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, #d5a94f 25%, #b17d27 75%, transparent);
    box-shadow: none;
  }
  .development-milestone::after { display: none; }
  .development-milestone time {
    margin: 0;
    font-size: clamp(19px, 5.5vw, 24px);
    line-height: 1;
    text-align: center;
  }
  .development-milestone p {
    max-width: 276px;
    margin: 0;
    font-size: clamp(7px, 1.95vw, 8.5px);
    line-height: 1.25;
    text-align: center;
  }
  .development-mobile-scroll-status { display: none; }

  .development-path-center {
    position: static;
    width: 0;
    height: 0;
    margin: 0;
    display: block;
    transform: none;
  }
  .development-path-logo { display: none; }
  .development-path-detail-backdrop {
    position: fixed;
    z-index: 80;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    display: block;
    border: 0;
    background: rgba(24, 20, 13, .42);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .42s ease, visibility .42s ease;
  }
  .development-path-detail {
    position: fixed;
    z-index: 81;
    left: 50%;
    top: 50%;
    bottom: auto;
    width: min(354px, calc(100vw - 28px));
    height: auto;
    max-height: calc(100svh - 36px);
    padding: 1px;
    overflow: hidden;
    border-radius: 25px;
    box-shadow: 0 28px 70px rgba(31, 23, 10, .28), 0 0 0 1px rgba(228, 199, 137, .28);
    transform: translate(-50%, calc(-50% + 30px)) scale(.97);
    transition: opacity .38s ease, visibility .38s ease, transform .58s cubic-bezier(.22, 1, .36, 1);
  }
  .development-path-detail-inner {
    position: relative;
    height: auto;
    min-height: 310px;
    max-height: calc(100svh - 38px);
    padding: 35px 24px 25px;
    overflow-y: auto;
    align-content: center;
    border-radius: 24px;
    background: radial-gradient(circle at 50% 0%, rgba(209, 166, 79, .16), transparent 34%), #fffdf8;
  }
  .development-path-stage.has-active .development-path-detail-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .development-path-stage.has-active .development-path-detail {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
  }
  .development-path-detail-close {
    position: absolute;
    z-index: 2;
    right: 14px;
    top: 14px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(183, 149, 82, .32);
    border-radius: 50%;
    background: rgba(255, 253, 248, .88);
    box-shadow: 0 7px 18px rgba(82, 59, 19, .08);
  }
  .development-path-detail-close span,
  .development-path-detail-close span::after {
    width: 13px;
    height: 1px;
    display: block;
    background: #9d722c;
    transform: rotate(45deg);
  }
  .development-path-detail-close span::after {
    content: "";
    transform: rotate(90deg);
  }
  .development-path-detail span { font-size: 8px; }
  .development-path-detail strong { margin-top: 12px; font-size: 48px; }
  .development-path-detail h3 { margin-top: 15px; font-size: 23px; line-height: 1.05; }
  .development-path-detail p { margin-top: 13px; font-size: 11px; line-height: 1.58; }
  .development-path-detail small { margin-top: 15px; }
  .development-path-stage.has-active .development-milestone:not(.is-active) { opacity: 1; }
  .development-milestone.is-active {
    border-color: rgba(180, 134, 48, .82);
    box-shadow: 0 10px 24px rgba(91, 63, 16, .14), inset 0 1px 0 rgba(255,255,255,.95);
    transform: translateY(0) scale(1);
  }
  body.development-detail-open { overflow: hidden; }

  /* Editorial reveal: each milestone enters on its own beat. */
  .development-milestone {
    filter: blur(5px);
    will-change: opacity, transform, filter;
    transition:
      opacity .78s ease,
      transform .78s cubic-bezier(.22, 1, .36, 1),
      filter .78s ease,
      border-color .4s ease,
      box-shadow .4s ease,
      background-color .4s ease;
  }
  .development-milestone:nth-child(odd) { transform: translateX(-18px) translateY(8px) scale(.985); }
  .development-milestone:nth-child(even) { transform: translateX(18px) translateY(8px) scale(.985); }
  .development-milestone.is-in-view {
    filter: blur(0);
    transform: translateX(0) translateY(0) scale(1);
  }
  .development-milestone.is-reveal-active {
    z-index: 2;
    border-color: rgba(175, 126, 39, .9);
    box-shadow: 0 14px 30px rgba(99, 67, 14, .16), 0 0 0 3px rgba(201, 157, 66, .1), inset 0 1px 0 rgba(255,255,255,.98);
    transform: translateX(0) translateY(-3px) scale(1.018);
  }

  /* Footer-inspired curtain lift: each milestone opens softly before settling. */
  .development-milestone {
    clip-path: inset(0 0 100% 0 round 12px);
    transition:
      opacity .78s ease,
      transform .78s cubic-bezier(.22, 1, .36, 1),
      filter .78s ease,
      clip-path .78s cubic-bezier(.22, 1, .36, 1),
      border-color .4s ease,
      box-shadow .4s ease;
  }
  .development-milestone::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    display: block;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,253,248,.98), rgba(249,241,223,.82));
    transform: scaleY(1);
    transform-origin: 50% 0;
    transition: transform .78s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
  }
  .development-milestone.is-in-view {
    clip-path: inset(0 round 12px);
  }
  .development-milestone.is-in-view::after { transform: scaleY(0); }
  .development-milestone.is-reveal-active::after { opacity: .12; }

  .brand-story-more::after {
    right: 17px;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    box-shadow: 0 0 0 8px rgba(183,149,82,.075), 0 0 0 9px rgba(183,149,82,.18);
  }
  .brand-story-copy.is-expanded .brand-story-more::after {
    box-shadow: 0 0 0 8px rgba(183,149,82,.12), 0 0 0 9px rgba(183,149,82,.26);
  }
  .brand-story-more::after { display: none; }
  .brand-story-more > span { position: relative; z-index: 1; }
  .brand-story-more > i {
    position: absolute;
    z-index: 1;
    right: 10px;
    top: 50%;
    width: 22px;
    height: 22px;
    display: block;
    border: 1px solid rgba(183,149,82,.48);
    border-radius: 50%;
    background: rgba(255,253,248,.74);
    box-shadow: 0 4px 10px rgba(83,58,14,.06);
    transform: translateY(-50%);
    transition: background-color .4s ease, border-color .4s ease, transform .55s cubic-bezier(.22,1,.36,1);
  }
  .brand-story-more > i::before,
  .brand-story-more > i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 1px;
    background: #9a741f;
    transform: translate(-50%, -50%);
    transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  }
  .brand-story-more > i::after { transform: translate(-50%, -50%) rotate(90deg); }
  .brand-story-copy.is-expanded .brand-story-more > i {
    border-color: #b9903c;
    background: #fff9eb;
    transform: translateY(-50%) rotate(180deg);
  }
  .brand-story-copy.is-expanded .brand-story-more > i::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0);
  }

  /* Compact pill control: typography stays centered with no inner symbol. */
  .brand-story-more {
    width: 178px;
    min-width: 178px;
    height: 43px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
  }
  .brand-story-more::before { border-radius: 999px; }
  .brand-story-more > i { display: none !important; }

  .development-milestone {
    filter: blur(2.5px);
    transition-duration: .86s;
  }
  .development-milestone:nth-child(odd) { transform: translateX(-12px) translateY(8px) scale(.985); }
  .development-milestone:nth-child(even) { transform: translateX(12px) translateY(8px) scale(.985); }
  .development-milestone.is-in-view {
    filter: blur(0);
    transform: translateX(0) translateY(0) scale(1);
  }
  .development-milestone.is-reveal-active {
    transform: translateX(0) translateY(-2px) scale(1.012);
  }

  @media (prefers-reduced-motion: reduce) {
    .development-milestone,
    .development-milestone:nth-child(odd),
    .development-milestone:nth-child(even) {
      filter: none;
      transition-duration: .01ms;
      transform: none;
    }
  }

  html[data-timeline-demo="2"] .development-path-stage {
    --timeline-card-height: clamp(88px, 14.6svh, 112px);
  }
  html[data-timeline-demo="2"] .development-path-milestones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  html[data-timeline-demo="2"] .development-milestone {
    padding: 13px 9px 10px;
    gap: 7px;
    border-radius: 18px;
    background: radial-gradient(circle at 50% 0%, rgba(221,181,96,.19), transparent 48%), linear-gradient(155deg, #fffefb, #f7efd9);
    box-shadow: 0 10px 24px rgba(67,50,18,.085), inset 0 1px 0 rgba(255,255,255,.96);
  }
  html[data-timeline-demo="2"] .development-milestone::before {
    inset: 9px auto auto 50%;
    width: 29px;
    height: 29px;
    border: 1px solid rgba(183,149,82,.23);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(211,168,78,.16), transparent 68%);
    transform: translateX(-50%);
  }
  html[data-timeline-demo="2"] .development-milestone time {
    position: relative;
    z-index: 1;
    font-size: clamp(24px, 7.2vw, 30px);
  }
  html[data-timeline-demo="2"] .development-milestone p {
    max-width: 135px;
    font-size: clamp(6.5px, 1.82vw, 8px);
  }

  html[data-timeline-demo="3"] .development-path-stage {
    --timeline-card-height: clamp(52px, 7.9svh, 66px);
  }
  html[data-timeline-demo="3"] .development-milestones { gap: 7px; }
  html[data-timeline-demo="3"] .development-milestone {
    padding: 7px 30px;
    border-radius: 999px;
    border-color: rgba(177,125,39,.5);
  }
  html[data-timeline-demo="3"] .development-milestone:nth-child(odd) {
    border-color: #b98937;
    background: linear-gradient(115deg, #93651e, #d3a54b 48%, #a67425);
    box-shadow: 0 9px 22px rgba(106,72,16,.18), inset 0 1px 0 rgba(255,255,255,.25);
  }
  html[data-timeline-demo="3"] .development-milestone:nth-child(even) {
    background: linear-gradient(145deg, #fffefb, #f8f0dc);
  }
  html[data-timeline-demo="3"] .development-milestone::before { display: none; }
  html[data-timeline-demo="3"] .development-milestone:nth-child(odd) time,
  html[data-timeline-demo="3"] .development-milestone:nth-child(odd) p { color: #fffdf8; }
  html[data-timeline-demo="3"] .development-milestone time { font-size: clamp(19px, 5.35vw, 23px); }
  html[data-timeline-demo="3"] .development-milestone p { font-size: clamp(6.8px, 1.9vw, 8.2px); }
}

/* Language rail: make the three locales discoverable without competing with navigation. */
.language,
.mobile-language {
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(183, 149, 82, .34);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 5px 16px rgba(66, 53, 26, .08);
}
.language button,
.mobile-language button {
  width: 28px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  opacity: .62;
  transition: opacity .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.language button img,
.mobile-language button img {
  width: 20px;
  height: 14px;
  display: block;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(28, 31, 29, .12);
}
.language button:hover,
.language button:focus-visible,
.mobile-language button:hover,
.mobile-language button:focus-visible {
  opacity: 1;
  background: rgba(183, 149, 82, .11);
  transform: translateY(-1px);
  outline: none;
}
.language button.is-active,
.mobile-language button.is-active,
.language button[aria-pressed="true"],
.mobile-language button[aria-pressed="true"] {
  opacity: 1;
  background: #fff;
  box-shadow: 0 2px 8px rgba(66, 53, 26, .14), inset 0 0 0 1px rgba(183, 149, 82, .55);
}
.language i,
.mobile-language i {
  width: 1px;
  height: 16px;
  flex: 0 0 1px;
  background: rgba(183, 149, 82, .34);
}

@media (min-width: 981px) {
  .site-topbar .primary-nav {
    left: clamp(190px, 14vw, 220px) !important;
    right: clamp(320px, 23.5vw, 350px) !important;
    justify-content: space-between;
  }
  .site-topbar > .language {
    position: absolute !important;
    top: 10px !important;
    right: clamp(214px, 16vw, 242px) !important;
    bottom: auto !important;
    transform: none !important;
    font-size: 8px !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
  }
  .site-topbar > .header-search-link {
    position: absolute;
    top: 10px;
    right: clamp(178px, 13vw, 198px);
    width: 28px;
    height: 26px;
    display: grid;
    place-items: center;
    color: #30312e;
  }
  .site-topbar .topbar-tools {
    top: 10px !important;
    right: clamp(18px, 1.7vw, 28px) !important;
  }
}

@media (max-width: 980px) {
  .site-topbar > .header-search-link { display: none; }
  .mobile-language {
    min-height: 44px;
    padding: 4px;
    gap: 5px;
    border-color: rgba(183, 149, 82, .3);
    background: rgba(255, 255, 255, .76);
  }
  .mobile-language button { width: 34px; height: 30px; }
  .mobile-language button img { width: 22px; height: 15px; }
}

/* Header refinement: keep Tin tức at the right edge and tighten the links before it. */
@media (min-width: 981px) {
  .site-topbar .primary-nav {
    --nav-tighten: clamp(9px, 1.7vw, 24px);
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    justify-content: space-between !important;
    column-gap: 0 !important;
  }
  .site-topbar .primary-nav > a:nth-child(1) { transform: translateX(calc(var(--nav-tighten) * 4)); }
  .site-topbar .primary-nav > a:nth-child(2) { transform: translateX(calc(var(--nav-tighten) * 3)); }
  .site-topbar .primary-nav > .primary-nav-sector { transform: translateX(calc(var(--nav-tighten) * 2)); }
  .site-topbar .primary-nav > a:nth-child(4) { transform: translateX(var(--nav-tighten)); }
}
.site-topbar .primary-nav > a:first-child { font-weight: 700; }

@media (min-width: 1200px) {
  .site-topbar .primary-nav { right: calc(27px + clamp(245px, 18vw, 270px)) !important; }
}
@media (min-width: 981px) and (max-width: 1199px) {
  .site-topbar .primary-nav { right: calc(27px + clamp(310px, 23vw, 340px)) !important; }
}

/* Keep the two desktop news cards within the same vertical rhythm as the lead image. */
@media (min-width: 981px) {
  .news-feature > a { display: block; margin-top: 0; }
  .news-list.news-stack-aligned {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: none;
    min-height: 0;
    height: calc(var(--news-feature-height) + var(--news-list-padding-top, 75px));
  }
  .news-list.news-stack-aligned article {
    min-height: 0;
    grid-template-columns: 35.5% 64.5%;
  }
}


/* Studio credit line closing the footer. */
.site-footer .footer-credit {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(183, 149, 82, .3);
  color: #7d7a72;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .site-footer .footer-credit { padding-top: 14px; font-size: 8.5px; letter-spacing: .1em; }
}

/* Featured news band directly under the opening banner: image left, headline right. */
.news-highlight { padding-block: clamp(52px, 6vw, 92px); }

.news-highlight-item {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(26px, 3.6vw, 62px);
  align-items: center;
}

.news-highlight-media {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #efeae0;
}

/* Frames are stacked: the active one holds the card while the others wait at a
   slightly larger scale, so each change is a slow dissolve rather than a cut. */
.news-highlight-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1.6s cubic-bezier(.33, 1, .68, 1), transform 1.6s cubic-bezier(.33, 1, .68, 1);
  will-change: opacity, transform;
}

/* The picture on screen keeps easing down to its true size for the whole four
   seconds it is up, so the frame is never completely still. */
.news-highlight-media img.is-active,
.news-highlight-media img:only-child {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1.6s cubic-bezier(.33, 1, .68, 1), transform 7.5s cubic-bezier(.16, .68, .35, 1);
}

/* Fading out, it carries on past its resting size rather than stopping dead. */
.news-highlight-media img.is-leaving {
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 1.6s cubic-bezier(.33, 1, .68, 1), transform 2.6s cubic-bezier(.33, 1, .68, 1);
}

@media (prefers-reduced-motion: reduce) {
  .news-highlight-media img { transition: none; transform: none; }
}

.news-highlight-copy h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-title);
  font-size: clamp(23px, 2.35vw, 35px);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.26;
  text-wrap: balance;
}

.news-highlight-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 0;
}

.news-highlight-tag {
  color: var(--gold);
  font-family: var(--font-bold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.news-highlight-meta > i {
  width: 1px;
  height: 13px;
  background: rgba(183, 149, 82, .5);
}

.news-highlight-meta time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-family: var(--font-time);
  font-size: 12px;
  letter-spacing: .04em;
}

.news-highlight-meta time svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.news-highlight-summary {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.78;
}

@media (max-width: 900px) {
  .news-highlight-item { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .news-highlight-summary { font-size: 14px; }
}

@media (max-width: 620px) {
  .news-highlight { padding-block: 44px; }
  .news-highlight-meta { gap: 11px; margin-top: 16px; }
  .news-highlight-summary { margin-top: 16px; }
}

/* A news headline is running text, not a display section title, so it opts out
   of the global section-heading treatment. */
main > section#news-highlight.news-highlight .news-highlight-copy h2,
main > section#news-highlight.news-highlight .news-highlight-copy h2 * {
  font-family: var(--font-title) !important;
  /* Tiêu đề bài báo, không phải tiêu đề mục, nên giữ cỡ riêng nhỏ hơn bảy
     tiêu đề section (--dg-h2). Xem biến --dg-h2-tin ở cuối file. */
  font-size: var(--dg-h2-tin) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: -.012em !important;
  text-transform: none !important;
}

/* "Xem chi tiết" sits centred under the featured news copy. */
.news-highlight-actions {
  display: flex;
  justify-content: center;
  margin: 30px 0 0;
}

.news-highlight-cta {
  padding: 15px 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--gold);
  border: 1px solid var(--gold);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s ease, background-color .25s ease;
}

.news-highlight-cta:hover,
.news-highlight-cta:focus-visible {
  color: var(--gold);
  background: transparent;
  outline: 0;
}

@media (max-width: 620px) {
  .news-highlight-actions { margin-top: 24px; }
  .news-highlight-cta { width: 100%; padding-inline: 20px; }
}

/* The phone and envelope glyphs used to come from the system font, so iOS swapped
   them for colour emoji while desktop drew flat text. Drawing icon and ring as one
   masked SVG keeps a single identical badge on every platform. */
.footer-contact-list span[data-icon="☎"]::before,
.footer-contact-list span[data-icon="✉"]::before {
  content: "";
  background-color: currentColor;
  border-color: transparent;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-origin: border-box;
  mask-origin: border-box;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.footer-contact-list span[data-icon="☎"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11.4' fill='none' stroke='%23000' stroke-opacity='0.55' stroke-width='1.15'/%3E%3Cg transform='translate(12 12) scale(0.42) translate(-12 -12)'%3E%3Cpath d='M7.4 10.6c1.5 2.9 3.9 5.3 6.8 6.8l2.3-2.3c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.7.6.6 0 1 .4 1 1v3.6c0 .6-.4 1-1 1C11 21.1 2.9 13 2.9 2.8c0-.6.4-1 1-1h3.6c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.7.1.4 0 .8-.2 1l-2.5 3.1z'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11.4' fill='none' stroke='%23000' stroke-opacity='0.55' stroke-width='1.15'/%3E%3Cg transform='translate(12 12) scale(0.42) translate(-12 -12)'%3E%3Cpath d='M7.4 10.6c1.5 2.9 3.9 5.3 6.8 6.8l2.3-2.3c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.7.6.6 0 1 .4 1 1v3.6c0 .6-.4 1-1 1C11 21.1 2.9 13 2.9 2.8c0-.6.4-1 1-1h3.6c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.7.1.4 0 .8-.2 1l-2.5 3.1z'/%3E%3C/g%3E%3C/svg%3E");
}

.footer-contact-list span[data-icon="✉"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11.4' fill='none' stroke='%23000' stroke-opacity='0.55' stroke-width='1.15'/%3E%3Cg transform='translate(12 12) scale(0.45) translate(-12 -12)' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'%3E%3Crect x='2.6' y='5.4' width='18.8' height='13.2' rx='1.4'/%3E%3Cpath d='m3.4 6.6 8.6 6.4 8.6-6.4'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11.4' fill='none' stroke='%23000' stroke-opacity='0.55' stroke-width='1.15'/%3E%3Cg transform='translate(12 12) scale(0.45) translate(-12 -12)' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'%3E%3Crect x='2.6' y='5.4' width='18.8' height='13.2' rx='1.4'/%3E%3Cpath d='m3.4 6.6 8.6 6.4 8.6-6.4'/%3E%3C/g%3E%3C/svg%3E");
}

/* Stacked on a phone the featured news copy sits under the picture, so the whole
   block centres with the button instead of hanging left of it. */
@media (max-width: 900px) {
  .news-highlight-copy { text-align: center; }
  .news-highlight-meta { justify-content: center; }
  .news-highlight-copy h2 { text-wrap: balance; }
}

/* Mobile brand carousel: claim the horizontal axis so a sideways swipe stays a
   swipe. Without this the browser treats the drag as the start of a scroll and
   cancels the pointer stream, and only some swipes ever reached the handler. */
@media (max-width: 620px) {
  .brand-story .brand-collage {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }

  .brand-story .brand-collage img { -webkit-user-drag: none; }
}

/* Smaller stories under the featured one, so the band opens into the newsroom
   instead of ending at a single article. */
.news-highlight-more { margin-top: clamp(38px, 4.4vw, 66px); }

.news-highlight-more-head {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  margin-bottom: clamp(18px, 2.2vw, 30px);
}

.news-highlight-more-head h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
}

.news-highlight-rule {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(183, 149, 82, .55), rgba(183, 149, 82, 0));
}

.news-highlight-all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-deep, #8e6a2f);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.news-highlight-all span { transition: transform .3s ease; }
.news-highlight-all:hover span { transform: translateX(4px); }

/* The strip drifts sideways without a break: the track holds the articles
   twice over, so sliding it half its width lands back on the first card. */
.news-highlight-strip {
  overflow: hidden;
}

.news-strip-track {
  display: flex;
  gap: clamp(16px, 1.8vw, 28px);
  width: max-content;
  animation: dg-news-drift var(--dg-strip-duration, 36s) linear infinite;
}

@keyframes dg-news-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Reading one of them should not be a chase. */
.news-highlight-strip:hover .news-strip-track,
.news-highlight-strip:focus-within .news-strip-track,
.news-highlight-strip.is-paused .news-strip-track { animation-play-state: paused; }

/* WCAG asks for a way to stop anything that moves on its own; it doubles as the
   switch a reader on "reduce motion" can use to start it deliberately. */
.news-strip-toggle {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--gold-deep, #8e6a2f);
  background: transparent;
  border: 1px solid rgba(183, 149, 82, .42);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease;
}
.news-strip-toggle:hover,
.news-strip-toggle:focus-visible { background: rgba(183, 149, 82, .12); border-color: var(--gold, #b79552); outline: none; }

/* Two bars while running, a triangle once stopped. */
.news-strip-toggle span {
  width: 8px;
  height: 9px;
  border-left: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
}
.news-strip-toggle[aria-pressed="false"] span {
  width: 0;
  height: 0;
  border-left: 8px solid currentColor;
  border-right: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translateX(1px);
}

.news-mini {
  width: clamp(216px, 21vw, 292px);
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
  align-content: start;
  color: inherit;
  text-decoration: none;
}

.news-mini-media {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #efeae0;
}

.news-mini-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.news-mini:hover .news-mini-media img { transform: scale(1.05); }

.news-mini-date {
  color: var(--gold-deep, #8e6a2f);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
}

.news-mini-title {
  color: var(--ink);
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-size: clamp(13.5px, 1.05vw, 15.5px);
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .25s ease;
}
.news-mini:hover .news-mini-title { color: var(--gold-deep, #8e6a2f); }

@media (max-width: 900px) {
  .news-strip-track { gap: 14px; }
  .news-mini { width: min(62vw, 250px); }
  .news-highlight-more-head { gap: 12px; }
  .news-highlight-all { font-size: 9.5px; letter-spacing: .12em; }
}

/* With the drift switched off the strip still has to be reachable, so it turns
   into a plain swipeable rail and the duplicate cards step aside. */
/* The drift runs for everyone; WCAG 2.2.2 is met by the pause control in the
   header rather than by stopping the strip outright, which left readers on
   "reduce motion" staring at a scrollbar instead of the news. */
@media (prefers-reduced-motion: reduce) {
  .news-mini-media img,
  .news-highlight-all span { transition: none; }
  .news-mini:hover .news-mini-media img { transform: none; }
}

/* Ranh giới giữa banner và mục kế: một đường chỉ vàng bị ngắt ở giữa bởi biểu
   tượng. Dùng lại được ở bất kỳ chỗ nối section nào. */
.section-divider {
  width: min(1280px, calc(100% - 96px));
  margin: 0 auto;
  padding-block: clamp(30px, 4.2vw, 62px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 2.2vw, 30px);
}

.section-divider-line { height: 1px; }

.section-divider-line-left {
  background: linear-gradient(90deg, transparent, rgba(183, 149, 82, .3) 38%, var(--gold, #b79552));
}

.section-divider-line-right {
  background: linear-gradient(270deg, transparent, rgba(183, 149, 82, .3) 38%, var(--gold, #b79552));
}

.section-divider-mark {
  height: clamp(34px, 3.6vw, 48px);
  width: auto;
  display: block;
}

/* Trạng thái ẩn chỉ tồn tại khi JS bật được chuyển động, nên nếu kịch bản lỗi
   thì hoạ tiết vẫn hiện đầy đủ. */
.section-divider.js-reveal .section-divider-mark {
  opacity: 0;
  transform: scale(.72);
}

.section-divider.js-reveal .section-divider-line {
  transform: scaleX(0);
}

.section-divider.js-reveal .section-divider-line-left { transform-origin: right center; }
.section-divider.js-reveal .section-divider-line-right { transform-origin: left center; }

/* Biểu tượng hiện trước, đường chỉ toả ra từ đó về hai phía. */
.section-divider.js-reveal.is-in .section-divider-mark {
  opacity: 1;
  transform: scale(1);
  transition: opacity .72s ease, transform .86s cubic-bezier(.33, 1, .68, 1);
}

.section-divider.js-reveal.is-in .section-divider-line {
  transform: scaleX(1);
  transition: transform 1.1s cubic-bezier(.33, 1, .68, 1) .3s;
}

@media (max-width: 900px) {
  .section-divider { width: calc(100% - 48px); padding-block: 30px; gap: 14px; }
}

@media (max-width: 620px) {
  .section-divider { width: calc(100% - 32px); padding-block: 26px; }
  .section-divider-mark { height: 32px; }
}

/* Hoạ tiết đã tự mang khoảng thở của nó, nên section ngay sau không cần thêm
   lề trên nữa - nếu không, khoảng dưới biểu tượng sẽ gấp nhiều lần khoảng trên. */
main > .section-divider + section,
main > .section-divider + .page-section {
  /* !important vì quy tắc giãn cách chung của main cũng dùng !important. */
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Logos sit further apart: the cell grows and its side padding grows by the same
   amount, so the box the logo is drawn into stays exactly as it was and only the
   space between two marks changes. */
.ecosystem-logo-marquee .logo-set article,
.partner-marquee .logo-set article {
  width: 247px;
  flex-basis: 247px;
  padding-inline: 50px;
}

@media (max-width: 620px) {
  .ecosystem-logo-marquee .logo-set article,
  .partner-marquee .logo-set article {
    width: 189px;
    flex-basis: 189px;
    padding-inline: 38px;
  }
}

/* The two marquee lanes are re-ordered with flex `order`, so the sibling margin
   that used to separate them lands above the lane the reader sees first instead
   of between the two. A flex gap follows the visual order, so it separates them
   wherever they end up.
   Values come from the spacing scale in spacing-scale.js (4, 8, 12, 16, 24, 32,
   40, 48, 64, ...); anything else is rounded to the nearest step at runtime, so
   writing an off-scale number here would only be misleading. */
.network-marquees { gap: 64px; }

@media (max-width: 980px) { .network-marquees { gap: 48px; } }
@media (max-width: 620px) { .network-marquees { gap: 32px; } }

/* ==========================================================================
   Nhịp dọc trang chủ
   ==========================================================================
   Khoảng trắng giữa hai section - đo từ đáy nội dung section trên tới đỉnh
   nội dung section dưới - bằng nhau trên suốt trang:

     desktop (>= 981px)      250px
     điện thoại (<= 620px)   114px

   Hai khoảng quanh hoạ tiết phân cách là ngoại lệ có chủ ý: 64px trên desktop
   và 36px trên điện thoại.

   Vì sao phải ghim cả padding chứ không chỉ đặt lề: development-path,
   capability, sectors, projects và news đều có đường kẻ mảnh 1px ở đáy. Bỏ
   padding thì chữ dính vào đường kẻ, nên padding giữ nguyên còn phần lề gánh
   đúng số còn thiếu. Mỗi giá trị margin bên dưới là

       250 (hoặc 114) - padding-bottom section trên - padding-top của chính nó

   và padding được ghim để phép tính đó đúng ở mọi bề ngang trong cùng một
   khoảng màn hình, không phụ thuộc clamp() hay biến của spacing-system.css.

   spacing-scale.js được dặn bỏ qua margin-top/padding-top/padding-bottom của
   nhóm phần tử này; nếu không 58px sẽ bị làm tròn về 64px và nhịp lệch ngay.
   ========================================================================== */

@media (min-width: 981px) {
  body.page-thomas-home main > .section-divider { padding-block: 64px !important; }
  body.page-thomas-home main > #news-highlight { padding-bottom: 80px !important; }
  body.page-thomas-home main > #about { padding-top: 0 !important; padding-bottom: 0 !important; }
  body.page-thomas-home main > #development-path,
  body.page-thomas-home main > #capability-overview,
  body.page-thomas-home main > #sectors,
  body.page-thomas-home main > #ecosystem,
  body.page-thomas-home main > #news { padding-top: 96px !important; padding-bottom: 96px !important; }
  body.page-thomas-home main > #projects { padding-top: 96px !important; padding-bottom: 80px !important; }
  body.page-thomas-home > .site-footer { padding-top: 32px !important; }

  body.page-thomas-home main > #about            { margin-top: 170px !important; } /* 80 + 170 +  0 */
  body.page-thomas-home main > #development-path { margin-top: 154px !important; } /*  0 + 154 + 96 */
  body.page-thomas-home main > #capability-overview,
  body.page-thomas-home main > #sectors,
  body.page-thomas-home main > #ecosystem,
  body.page-thomas-home main > #projects         { margin-top: 58px !important; }  /* 96 +  58 + 96 */
  body.page-thomas-home main > #news             { margin-top: 74px !important; }  /* 80 +  74 + 96 */
  body.page-thomas-home > .site-footer           { margin-top: 122px !important; } /* 96 + 122 + 32 */
}

@media (max-width: 620px) {
  body.page-thomas-home main > .section-divider { padding-block: 36px !important; }
  body.page-thomas-home main > #news-highlight { padding-bottom: 48px !important; }
  body.page-thomas-home main > #about { padding-top: 0 !important; padding-bottom: 0 !important; }
  body.page-thomas-home main > #development-path,
  body.page-thomas-home main > #capability-overview,
  body.page-thomas-home main > #sectors,
  body.page-thomas-home main > #ecosystem,
  body.page-thomas-home main > #projects,
  body.page-thomas-home main > #news { padding-top: 48px !important; padding-bottom: 48px !important; }
  body.page-thomas-home > .site-footer { padding-top: 24px !important; }

  body.page-thomas-home main > #about            { margin-top: 66px !important; } /* 48 + 66 +  0 */
  body.page-thomas-home main > #development-path { margin-top: 66px !important; } /*  0 + 66 + 48 */
  body.page-thomas-home main > #capability-overview,
  body.page-thomas-home main > #sectors,
  body.page-thomas-home main > #ecosystem,
  body.page-thomas-home main > #projects,
  body.page-thomas-home main > #news             { margin-top: 18px !important; } /* 48 + 18 + 48 */
  body.page-thomas-home > .site-footer           { margin-top: 42px !important; } /* 48 + 42 + 24 */
}

/* ==========================================================================
   Cỡ chữ tiêu đề mục trang chủ
   ==========================================================================
   Tám thẻ <h2> của trang chủ dùng chung đúng một cỡ. Trước đây bốn file CSS
   cùng khai báo cỡ cho nhóm này và chồng !important lên nhau; giờ tất cả đọc
   một biến duy nhất ở đây - sửa một chỗ là cả tám đổi theo.

   typography-scale.js được dặn bỏ qua h2 của trang chủ; nếu không 28px sẽ bị
   làm tròn lên 34px.
   ========================================================================== */

body.page-thomas-home {
  /* Hai biến này giờ lấy từ cây cỡ chữ (data/typography.css), sửa trong
     CSM › Cỡ chữ. Số phía sau dấu phẩy là giá trị dự phòng nếu cây chưa nạp. */
  --dg-h2: var(--fs-h2-home, 40px);
  /* Tiêu đề khối Tin nổi bật đứng riêng: nó là tiêu đề một bài báo, đặt cạnh
     ảnh trong khối hẹp, nên nhỏ hơn tiêu đề mục một bậc. */
  --dg-h2-tin: var(--fs-h2-hot, 34px);
}

@media (max-width: 620px) {
  body.page-thomas-home {
    /* Bản điện thoại của hai biến đã nằm sẵn trong cây; giữ dòng này chỉ để
       trang vẫn đúng khi cây chưa nạp kịp. */
    --dg-h2: var(--fs-h2-home, 28px);
    --dg-h2-tin: var(--fs-h2-hot, 26px);
  }
}

/* ==========================================================================
   Lưới thẻ ở trang chủ
   ==========================================================================
   Dự án tiêu biểu và Tin tức dùng chung một lưới bốn cột và chung mẫu thẻ
   "khung triện" với trang /tin-tuc/ (news-design.css). Các mốc thu cột giữ
   đúng như trang tin tức để hai nơi không lệch nhịp nhau.
   ========================================================================== */

.dg-home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 1.9vw, 30px);
  margin-top: clamp(28px, 3vw, 44px);
}

/* Nền của section là trắng, nên biểu tượng ngắt đường chỉ vàng cũng lấy trắng. */
body.page-thomas-home .dg-home-grid { --dg-crest-bg: var(--dg-white); }

@media (max-width: 1180px) {
  .dg-home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .dg-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  /* Thẻ không còn biểu tượng ở đầu, ảnh tràn hết bề ngang như ở desktop; chỉ
     phần chữ thu đệm lại cho vừa cột hẹp. */
  .dg-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .dg-home-grid .dg-plate { padding: 0 0 16px; }
  .dg-home-grid .dg-plate-copy { padding: 14px 12px 0; }
}

/* Hai section này vốn có bố cục riêng: Tin tức là lưới ba cột (chữ · ảnh lớn ·
   danh sách), Dự án tiêu biểu là băng chuyền cao bằng màn hình. Giờ cả hai chỉ
   còn tiêu đề rồi tới lưới thẻ, nên trả chúng về khối thường. */
body.page-thomas-home .news,
body.page-thomas-home .project-accordion-shell {
  display: block;
  min-height: 0;
}

body.page-thomas-home .news-title { padding-right: 0; }
body.page-thomas-home .project-accordion-heading { margin-bottom: 0; }