/* ============================================================
   GLOBAL PLUS — Portfolio: Flagpoles of Honour (เสาธงชาติ)
   ------------------------------------------------------------
   Design language: Editorial museum-catalog (Claude Version / Option A)
   dusty pink / mauve · cream panels · near-black ink · yellow accent
   Methodology: BEM. Mobile-first. 768px / 1024px breakpoints.
   ============================================================ */

/* ----- Design tokens ----- */
:root {
  /* Colour — editorial museum catalog */
  --c-page:        #D4C1BC;   /* dusty pink / mauve page bg       */
  --c-deep:        #C9B5AF;   /* footer / deeper tone             */
  --c-panel:       #F5EFE8;   /* cream card panels                */
  --c-panel-bright:#FAF5ED;   /* brighter cream — forms           */

  --c-ink:         #1A1814;   /* primary near-black               */
  --c-ink-mid:     #4A413B;   /* body copy                        */
  --c-ink-dim:     #7A6F68;   /* captions, labels                 */
  --c-ink-faint:   #A89E96;   /* whispered metadata               */

  --c-accent:      #F5C518;   /* highlighter yellow — sparingly   */
  --c-accent-soft: #FFE066;   /* lighter accent for hover         */

  --c-line:        rgba(26, 24, 20, 0.12);
  --c-line-strong: rgba(26, 24, 20, 0.28);

  /* Typography */
  --font-display:  "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-italic:   "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:     "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-thai:     "Noto Sans Thai", "Sukhumvit Set", "Thonburi", sans-serif;

  /* Scale — mobile-first */
  --t-xs:   0.6875rem;   /* 11  */
  --t-sm:   0.8125rem;   /* 13  */
  --t-base: 1rem;        /* 16  */
  --t-md:   1.0625rem;   /* 17  */
  --t-lg:   1.25rem;     /* 20  */
  --t-xl:   1.625rem;    /* 26  */
  --t-2xl:  2.25rem;     /* 36  */
  --t-3xl:  3.25rem;     /* 52  */
  --t-4xl:  4.5rem;      /* 72  */
  --t-5xl:  6rem;        /* 96  */
  --t-6xl:  8rem;        /* 128 */
  --t-7xl:  10rem;       /* 160 */

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 12rem;

  --max-w: 1280px;
  --max-w-narrow: 720px;
  --gutter: 1.5rem;
}

/* ----- Reset & base ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--c-ink-mid);
  background-color: var(--c-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--c-accent); color: var(--c-ink); }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

.skip-link {
  position: absolute; top: -100%; left: var(--s-4);
  background: var(--c-ink); color: var(--c-panel);
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  z-index: 1000;
  transition: top 200ms ease;
}
.skip-link:focus { top: var(--s-4); }

/* ----- Typography utilities ----- */
.font-thai { font-family: var(--font-thai); }

/* ----- Ornament ----- */
.ornament {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  color: var(--c-ink-dim);
}
.ornament__line {
  display: block; width: 48px; height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--c-ink-faint) 40%, var(--c-ink-faint) 60%, transparent 100%);
}
.ornament--top .ornament__line { width: 72px; }
.ornament__diamond { font-size: 0.625rem; letter-spacing: 0; line-height: 1; }
.ornament--small .ornament__line { width: 36px; }

/* Chapter label — small-caps with hairline */
.chapter {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  margin-bottom: var(--s-6);
}

/* Caption labels — small-caps Inter with underline */
.caption-label {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  border-bottom: 1px solid var(--c-line-strong);
  padding-bottom: var(--s-1);
  display: inline-block;
}

/* Yellow accent underline */
.accent-underline {
  position: relative; display: inline-block;
}
.accent-underline::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 6px;
  background: var(--c-accent);
  border-radius: 3px;
  z-index: -1;
  opacity: 0.85;
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1rem 2.25rem;
  min-height: 48px;
  border: 1px solid var(--c-ink);
  color: var(--c-ink);
  background: transparent;
  transition: background 350ms ease, color 350ms ease, border-color 350ms ease, transform 350ms ease;
}
.btn:hover,
.btn:focus-visible {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-ink);
  transform: translateY(-1px);
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead {
  position: sticky; top: 0; left: 0; right: 0;
  z-index: 50;
  padding: var(--s-5) 0;
  background: rgba(212, 193, 188, 0.82);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}
.masthead--scrolled {
  border-bottom-color: var(--c-line);
  box-shadow: 0 1px 12px rgba(26, 24, 20, 0.06);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  gap: var(--s-5);
}
.brand { flex-shrink: 0; }
.brand__logo {
  display: block; width: 120px; height: auto;
  max-height: 60px; object-fit: contain;
  filter: brightness(0) saturate(100%); /* make logo near-black on light bg */
}

/* Nav */
.nav { flex-shrink: 0; }
.nav__list {
  display: none;
  align-items: center;
  gap: var(--s-7);
}
.nav__link {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  padding: var(--s-2) 0;
  transition: color 300ms ease;
}
.nav__link:hover { color: var(--c-ink); }
.nav__link::after {
  content: "";
  position: absolute; left: 50%; right: 50%; bottom: -2px;
  height: 1px; background: var(--c-accent);
  transition: left 350ms ease, right 350ms ease;
}
.nav__link:hover::after,
.nav__link:focus-visible::after { left: 0; right: 0; }

/* Hamburger */
.nav__toggle {
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 12px;
}
.nav__toggle-bar {
  width: 20px; height: 2px;
  background: var(--c-ink);
  transition: transform 350ms ease, opacity 350ms ease;
}

/* Mobile nav panel */
.nav__list.is-open {
  display: flex; flex-direction: column;
  position: fixed; inset: 0; top: 64px;
  background: var(--c-page);
  padding: var(--s-6) var(--gutter);
  gap: var(--s-5);
  z-index: 40;
  animation: slideIn 300ms ease forwards;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HERO — "เสาธงชาติ"
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--s-10) var(--gutter) var(--s-8);
  overflow: hidden;
  isolation: isolate;
}

/* Hero with real photo background — motif overlay preserved */
.hero--with-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero__overlay {
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(212, 193, 188, 0.55) 0%, rgba(212, 193, 188, 0.75) 60%, rgba(212, 193, 188, 0.92) 100%);
  pointer-events: none;
}

/* CSS-built flagpole motif — subtle vertical lines */
.hero__motif {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  display: flex; justify-content: center; align-items: flex-end;
  gap: 8vw;
  padding-bottom: var(--s-10);
  opacity: 0.35;
}
.hero__pole {
  width: 2px;
  height: 45vh;
  background: linear-gradient(to bottom, var(--c-ink-faint) 0%, var(--c-ink-faint) 70%, transparent 100%);
  position: relative;
}
.hero__pole::before {
  /* flag shape */
  content: "";
  position: absolute;
  top: 0; left: 4px;
  width: 32px; height: 20px;
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-soft) 100%);
  border-radius: 0 2px 2px 0;
  opacity: 0.6;
}
.hero__pole:nth-child(2) { height: 55vh; opacity: 0.5; }
.hero__pole:nth-child(2)::before { width: 40px; height: 26px; }
.hero__pole:nth-child(3) { height: 38vh; opacity: 0.25; }

.hero__content {
  display: flex; flex-direction: column; align-items: center;
  max-width: var(--max-w-narrow);
  position: relative;
}

.hero__kicker {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  margin-bottom: var(--s-6);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-4xl);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  margin-bottom: var(--s-4);
}
.hero__title-thai {
  font-family: var(--font-thai);
  font-weight: 700;
  font-size: var(--t-5xl);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  margin-bottom: var(--s-4);
}

.hero__subtitle {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lg);
  color: var(--c-ink-mid);
  letter-spacing: 0.01em;
  line-height: 1.5;
  max-width: 42ch;
  margin-bottom: var(--s-7);
}

.hero__rule {
  width: 1px; height: 56px;
  background: linear-gradient(to bottom, transparent 0%, var(--c-accent) 50%, transparent 100%);
  margin: var(--s-3) auto var(--s-6);
}

.hero__lede {
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--c-ink-mid);
  max-width: 40ch;
  margin-bottom: var(--s-7);
}

.hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: center;
}

/* Corner footnotes */
.hero__footer {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: var(--s-5);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.hero__foot-label {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  white-space: nowrap;
}

/* ============================================================
   STATEMENT — Chapter 02, giant "58"
   ============================================================ */
.statement {
  padding: var(--s-11) var(--gutter) var(--s-10);
  background: var(--c-page);
}
.statement__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: center;
}

.statement__figure {
  text-align: center;
}
.statement__number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-7xl);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--c-ink);
}
.statement__caption {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  margin-top: var(--s-4);
}

.statement__body {
  max-width: 52ch;
  margin: 0 auto;
}
.statement__text {
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.75;
  color: var(--c-ink-mid);
  margin-bottom: var(--s-6);
}
.statement__text em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--c-ink);
}

.statement__data {
  display: flex; gap: var(--s-8); justify-content: center;
  margin-top: var(--s-7);
}
.statement__datum {
  text-align: center;
}
.statement__datum-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-2xl);
  color: var(--c-ink);
  line-height: 1;
}
.statement__datum-label {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  margin-top: var(--s-2);
}

/* ============================================================
   PHASES — Two Movements
   ============================================================ */
.phases {
  padding: var(--s-10) var(--gutter);
  background: var(--c-page);
}
.phases__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.phases__header {
  text-align: center;
  margin-bottom: var(--s-9);
}
.phases__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-3xl);
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin-bottom: var(--s-3);
}
.phases__subtitle {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lg);
  color: var(--c-ink-mid);
}

.phases__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  position: relative;
}

/* Vertical divider between cards (desktop) */
.phases__divider {
  display: none;
  position: absolute;
  left: 50%; top: var(--s-6); bottom: var(--s-6);
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%, var(--c-line-strong) 20%, var(--c-line-strong) 80%, transparent 100%);
}

.phase-card {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  padding: var(--s-7) var(--s-6);
  position: relative;
  transition: transform 350ms ease, box-shadow 350ms ease;
}
.phase-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(26, 24, 20, 0.08);
}

.phase-card__label {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  margin-bottom: var(--s-4);
}
.phase-card__number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-4xl);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  margin-bottom: var(--s-3);
}
.phase-card__title {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-mid);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-line-strong);
  padding-bottom: var(--s-3);
  display: inline-block;
}
.phase-card__body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--c-ink-mid);
}
.phase-card__body p + p { margin-top: var(--s-3); }

/* Progress bar */
.phases__progress {
  margin-top: var(--s-9);
  max-width: 600px;
  margin-left: auto; margin-right: auto;
}
.phases__progress-label {
  display: flex; justify-content: space-between;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  margin-bottom: var(--s-3);
}
.phases__progress-bar {
  width: 100%; height: 4px;
  background: var(--c-line);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
}
.phases__progress-fill {
  height: 100%;
  background: var(--c-accent);
  border-radius: 2px;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.phases__progress-fill--secondary {
  background: var(--c-ink-faint);
}

/* ============================================================
   PROTOTYPES — Three Pioneers
   ============================================================ */
.prototypes {
  padding: var(--s-10) var(--gutter);
  background: var(--c-page);
}
.prototypes__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.prototypes__header {
  text-align: center;
  margin-bottom: var(--s-9);
}
.prototypes__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-3xl);
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin-bottom: var(--s-3);
}
.prototypes__subtitle {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lg);
  color: var(--c-ink-mid);
}

.prototypes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}

.prototype-card {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  padding: var(--s-7) var(--s-6);
  text-align: center;
  transition: transform 350ms ease, box-shadow 350ms ease;
  position: relative;
  overflow: hidden;
}
.prototype-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(26, 24, 20, 0.08);
}
.prototype-card__number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-5xl);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--c-ink);
  margin-bottom: var(--s-4);
}
.prototype-card__label {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  margin-bottom: var(--s-5);
}

/* CSS flagpole icon inside each card */
.prototype-card__icon {
  width: 48px; height: 80px;
  margin: 0 auto var(--s-5);
  position: relative;
}
.prototype-card__pole {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 3px; height: 72px;
  background: linear-gradient(to bottom, var(--c-ink-faint) 0%, var(--c-ink-dim) 100%);
  border-radius: 2px;
}
.prototype-card__flag {
  position: absolute; top: 0; left: calc(50% + 4px);
  width: 36px; height: 22px;
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-soft) 100%);
  border-radius: 0 3px 3px 0;
  opacity: 0.85;
}
.prototype-card__location {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--c-ink-mid);
  margin-top: var(--s-4);
}

/* Real photo inside prototype cards */
.prototype-card__photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: var(--s-5);
}

/* ============================================================
   SPONSORS — With Gratitude
   ============================================================ */
.sponsors {
  padding: var(--s-10) var(--gutter);
  background: var(--c-panel);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.sponsors__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
}
.sponsors__header {
  margin-bottom: var(--s-9);
}
.sponsors__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-3xl);
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin-bottom: var(--s-3);
}
.sponsors__subtitle {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lg);
  color: var(--c-ink-mid);
  max-width: 44ch;
  margin: 0 auto;
}

.sponsors__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  max-width: 500px;
  margin: 0 auto;
}

.sponsor-card {
  background: var(--c-panel-bright);
  border: 1px solid var(--c-line);
  padding: var(--s-7) var(--s-6);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s-4);
  transition: transform 350ms ease, box-shadow 350ms ease;
}
.sponsor-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(26, 24, 20, 0.06);
}
.sponsor-card__logo {
  width: auto;
  max-width: 160px;
  max-height: 60px;
  object-fit: contain;
  filter: none; /* monochrome near-black */
  opacity: 0.85;
  transition: opacity 300ms ease;
}
.sponsor-card:hover .sponsor-card__logo {
  opacity: 1;
}
.sponsor-card__name {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
}

/* ============================================================
   CONTACT / COLOPHON
   ============================================================ */
.contact {
  padding: var(--s-10) var(--gutter);
  background: var(--c-page);
}
.contact__inner {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  text-align: center;
}
.contact__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-3xl);
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin-bottom: var(--s-4);
}
.contact__lede {
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.7;
  color: var(--c-ink-mid);
  max-width: 48ch;
  margin: 0 auto var(--s-7);
}
.contact__details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}
.contact__detail dt {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  margin-bottom: var(--s-1);
}
.contact__detail dd {
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--c-ink-mid);
}

/* ============================================================
   FOOTER
   ============================================================ */
.colophon {
  padding: var(--s-9) var(--gutter) var(--s-7);
  background: var(--c-deep);
  text-align: center;
}
.colophon__inner {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
}
.colophon__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin-bottom: var(--s-2);
}
.colophon__tag {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-sm);
  color: var(--c-ink-dim);
  margin-bottom: var(--s-6);
}
.colophon__links {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.colophon__links a {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  transition: color 300ms ease;
}
.colophon__links a:hover { color: var(--c-accent); }

.colophon__copy {
  font-family: var(--font-body);
  font-size: 0.625rem;
  color: var(--c-ink-faint);
  letter-spacing: 0.06em;
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal--stagger .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal--stagger .reveal:nth-child(2) { transition-delay: 100ms; }
.reveal--stagger .reveal:nth-child(3) { transition-delay: 200ms; }

/* ============================================================
   DARK MODE — warm aubergine night palette
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --c-page:        #2A1F1D;   /* warm aubergine                 */
    --c-deep:        #1F1614;   /* deeper footer                  */
    --c-panel:       #352926;   /* dark cream panel               */
    --c-panel-bright:#3D2E2A;   /* brighter dark panel            */

    --c-ink:         #F0E8E0;   /* warm ivory headlines           */
    --c-ink-mid:     #B8A99C;   /* body copy                      */
    --c-ink-dim:     #8A7E72;   /* captions                       */
    --c-ink-faint:   #6A6056;   /* whispered metadata             */

    --c-line:        rgba(240, 232, 224, 0.10);
    --c-line-strong: rgba(240, 232, 224, 0.22);
  }

  .masthead {
    background: rgba(42, 31, 29, 0.88);
    border-bottom-color: var(--c-line);
  }
  .brand__logo {
    filter: brightness(0) invert(1) opacity(0.92);
  }
  .sponsors {
    background: var(--c-panel);
  }
  .sponsor-card {
    background: var(--c-panel-bright);
  }
  .sponsor-card__logo {
    filter: none;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet 768px+ */
@media (min-width: 768px) {
  :root {
    --t-3xl: 3.75rem;   /* 60  */
    --t-4xl: 5.5rem;    /* 88  */
    --t-5xl: 7.5rem;    /* 120 */
    --t-6xl: 10rem;     /* 160 */
    --t-7xl: 12rem;     /* 192 */
  }

  .nav__toggle { display: none; }
  .nav__list { display: flex !important; }

  .hero__title-thai { font-size: var(--t-6xl); }
  .hero__title { font-size: var(--t-5xl); }

  .statement__inner {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }
  .statement__figure { text-align: left; }
  .statement__body { margin: 0; }
  .statement__data { justify-content: flex-start; }

  .phases__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
  }
  .phases__divider { display: block; }

  .prototypes__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
  }

  .sponsors__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
  }

  .contact__details {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__footer { padding: 0 var(--s-6); }
}

/* Desktop 1024px+ */
@media (min-width: 1024px) {
  :root {
    --gutter: 2.5rem;
    --t-3xl: 4.25rem;   /* 68  */
    --t-4xl: 6.5rem;    /* 104 */
    --t-5xl: 9rem;      /* 144 */
    --t-6xl: 12rem;     /* 192 */
    --t-7xl: 14rem;     /* 224 */
  }

  .hero__title-thai { font-size: var(--t-7xl); }
  .hero__title { font-size: var(--t-6xl); }

  .statement__inner {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s-10);
  }

  .phase-card { padding: var(--s-8) var(--s-7); }

  .sponsor-card { padding: var(--s-8) var(--s-7); }

  .contact__details {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Wide 1440px+ */
@media (min-width: 1440px) {
  :root {
    --t-7xl: 16rem;     /* 256 */
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ===== Real image overrides (flagpoles placeholders) ===== */
.hero--with-bg {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
}
.hero--with-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(26,24,20,0.7) 0%, rgba(26,24,20,0.3) 60%, rgba(212,193,188,0.9) 100%);
  z-index: 1;
}
.hero--with-bg .hero__content,
.hero--with-bg .hero__footer {
  position: relative;
  z-index: 2;
}
.hero--with-bg .hero__motif {
  opacity: 0.4;
  z-index: 1;
}

.prototype-card__photo {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 2px;
  margin-bottom: var(--s-5, 1.5rem);
  filter: saturate(0.7) brightness(0.95);
  transition: filter 0.4s ease;
}
.prototype-card:hover .prototype-card__photo {
  filter: saturate(1) brightness(1);
}

@media (prefers-color-scheme: dark) {
  .hero--with-bg::before {
    background: linear-gradient(to bottom, rgba(26,24,20,0.85) 0%, rgba(26,24,20,0.5) 60%, rgba(30,26,40,0.9) 100%);
  }
  .prototype-card__photo {
    filter: saturate(0.5) brightness(0.7);
  }
  .prototype-card:hover .prototype-card__photo {
    filter: saturate(0.8) brightness(0.85);
  }
}

Append the following to `portfolio-flagpoles.css`.

```css
/* ============================================================
   INTERACTIVE REDESIGN — Animated Counter + Dashboard + Map
   ============================================================ */

/* ----- Animated Counter (Slot Machine) ----- */
.counter {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6rem, 18vw, 14rem);
  line-height: 1;
  color: var(--c-ink);
  overflow: hidden;
  height: 1.1em;
}

.counter__digit {
  width: 0.6em;
  height: 1.1em;
  overflow: hidden;
  position: relative;
}

.counter__wheel {
  display: flex;
  flex-direction: column;
  transition: transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.counter__wheel span {
  display: block;
  height: 1.1em;
  line-height: 1.1em;
  text-align: center;
}

/* Counter is visible */
.counter.is-active .counter__wheel {
  transform: translateY(var(--offset, 0));
}

/* Thai flag in statement */
.statement__flag {
  margin-top: var(--s-6);
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8) translateY(10px);
  transition: opacity 600ms ease 2s, transform 600ms ease 2s;
}

.statement--interactive.is-active .statement__flag {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.statement__flag-svg {
  filter: drop-shadow(0 4px 12px rgba(26, 24, 20, 0.15));
  animation: flagWave 3s ease-in-out infinite;
}

@keyframes flagWave {
  0%, 100% { transform: skewX(0deg); }
  25% { transform: skewX(1.5deg); }
  75% { transform: skewX(-1deg); }
}

/* Statement datum animations */
.statement__datum {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.statement--interactive.is-active .statement__datum:nth-child(1) { transition-delay: 1.8s; opacity: 1; transform: translateY(0); }
.statement--interactive.is-active .statement__datum:nth-child(2) { transition-delay: 2.0s; opacity: 1; transform: translateY(0); }
.statement--interactive.is-active .statement__datum:nth-child(3) { transition-delay: 2.2s; opacity: 1; transform: translateY(0); }

/* ----- Progress Dashboard ----- */
.dashboard {
  padding: var(--s-10) var(--gutter);
  background: var(--c-panel);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.dashboard__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.dashboard__header {
  text-align: center;
  margin-bottom: var(--s-9);
}

.dashboard__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-3xl);
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin-bottom: var(--s-3);
}

.dashboard__subtitle {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lg);
  color: var(--c-ink-mid);
}

.dashboard__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-9);
}

/* Metric Cards */
.metric-card {
  background: var(--c-page);
  border: 1px solid var(--c-line);
  padding: var(--s-6);
  text-align: center;
  transition: transform 350ms ease, box-shadow 350ms ease;
  position: relative;
  overflow: hidden;
}

.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(26, 24, 20, 0.1);
}

.metric-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transition: transform 400ms ease;
}

.metric-card:hover::before {
  transform: scaleX(1);
}

.metric-card--featured {
  grid-column: 1 / -1;
}

.metric-card__ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto var(--s-4);
}

.metric-card__ring--phase1,
.metric-card__ring--phase2 {
  width: 100px;
  height: 100px;
}

.progress-ring {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.progress-ring__track {
  fill: none;
  stroke: var(--c-line);
  stroke-width: 6;
  stroke-linecap: round;
}

.progress-ring__fill {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.metric-card__center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-display);
}

.metric-card__value {
  font-weight: 700;
  font-size: var(--t-2xl);
  color: var(--c-ink);
  line-height: 1;
}

.metric-card__unit {
  font-weight: 500;
  font-size: var(--t-sm);
  color: var(--c-ink-dim);
}

.metric-card__label {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-bottom: var(--s-1);
}

.metric-card__sublabel {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  color: var(--c-ink-dim);
}

/* Stat variant */
.metric-card--stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
}

.metric-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
}

.metric-card__icon svg {
  transition: transform 400ms ease;
}

.metric-card:hover .metric-card__icon svg {
  transform: scale(1.1);
}

.metric-card__stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-4xl);
  color: var(--c-ink);
  line-height: 1;
}

.metric-card__bar {
  width: 100%;
  max-width: 80px;
  height: 3px;
  background: var(--c-line);
  border-radius: 2px;
  overflow: hidden;
  margin-top: auto;
}

.metric-card__bar-fill {
  height: 100%;
  width: var(--fill, 0%);
  background: var(--c-accent);
  border-radius: 2px;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Waving flag in icon */
.flagpole-icon__flag {
  transform-origin: left center;
  animation: flagFlutter 2s ease-in-out infinite;
}

@keyframes flagFlutter {
  0%, 100% { transform: scaleX(1) skewY(0deg); }
  25% { transform: scaleX(0.9) skewY(2deg); }
  75% { transform: scaleX(0.95) skewY(-1deg); }
}

/* Timeline */
.dashboard__timeline {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--s-6);
  background: var(--c-page);
  border: 1px solid var(--c-line);
}

.timeline {
  position: relative;
}

.timeline__track {
  position: absolute;
  top: 16px;
  left: 0; right: 0;
  height: 2px;
  background: var(--c-line);
  border-radius: 1px;
  overflow: hidden;
}

.timeline__progress {
  height: 100%;
  width: 0%;
  background: var(--c-accent);
  border-radius: 1px;
  transition: width 2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

.timeline__progress.is-active {
  width: 5.2%;
}

.timeline__items {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.timeline__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  text-align: center;
  flex: 1;
}

.timeline__dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-panel);
  border: 2px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 400ms ease, background 400ms ease, box-shadow 400ms ease;
  position: relative;
  z-index: 1;
}

.timeline__item--completed .timeline__dot {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-ink);
  box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.2);
}

.timeline__dot--final {
  border-color: var(--c-accent);
  border-style: dashed;
}

.timeline__label {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-ink-mid);
}

.timeline__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-lg);
  color: var(--c-ink);
}

/* ----- Interactive Thailand Map ----- */
.map-section {
  padding: var(--s-10) var(--gutter);
  background: var(--c-page);
}

.map-section__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.map-section__header {
  text-align: center;
  margin-bottom: var(--s-9);
}

.map-section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-3xl);
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin-bottom: var(--s-3);
}

.map-section__subtitle {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lg);
  color: var(--c-ink-mid);
}

.map-section__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: start;
}

.map-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
}

.thailand-map {
  width: 100%;
  max-width: 400px;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(26, 24, 20, 0.08));
}

/* Thailand outline shape */
.thailand-outline {
  fill: var(--c-panel);
  stroke: var(--c-line-strong);
  stroke-width: 2;
  transition: fill 300ms ease;
}

.map-region {
  fill: var(--c-accent);
  fill-opacity: 0.15;
  stroke: var(--c-accent);
  stroke-width: 1.5;
  stroke-opacity: 0.4;
  cursor: pointer;
  transition: fill-opacity 300ms ease, stroke-opacity 300ms ease, filter 300ms ease;
}

.map-region:hover,
.map-region.is-active {
  fill-opacity: 0.4;
  stroke-opacity: 1;
  filter: drop-shadow(0 4px 12px rgba(245, 197, 24, 0.3));
}

.map-region__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--c-ink-mid);
  pointer-events: none;
  transition: fill 300ms ease;
}

.map-region:hover + .map-region__label,
.map-region.is-active + .map-region__label {
  fill: var(--c-ink);
}

.map-region__count {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  fill: var(--c-ink);
  pointer-events: none;
}

/* Map info panel */
.map-info {
  width: 100%;
  max-width: 400px;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  padding: var(--s-5);
  transition: border-color 300ms ease, box-shadow 300ms ease;
}

.map-info.is-active {
  border-color: var(--c-accent);
  box-shadow: 0 8px 32px rgba(245, 197, 24, 0.1);
}

.map-info__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line);
}

.map-info__region {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-md);
  color: var(--c-ink);
}

.map-info__badge {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  background: var(--c-page);
  padding: 2px var(--s-2);
  border-radius: 2px;
}

.map-info__desc {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--c-ink-mid);
  margin-bottom: var(--s-3);
}

.map-info__stats {
  display: flex;
  gap: var(--s-5);
}

.map-info__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map-info__stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-xl);
  color: var(--c-ink);
  line-height: 1;
}

.map-info__stat-label {
  font-family: var(--font-body);
  font-size: 0.625rem;
  color: var(--c-ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-info__bar {
  height: 3px;
  background: var(--c-line);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--s-4);
}

.map-info__bar-fill {
  height: 100%;
  width: var(--fill, 0%);
  background: var(--c-accent);
  border-radius: 2px;
  transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- Interactive Phase Cards ----- */
.phase-card--interactive {
  cursor: default;
}

.phase-card__header {
  position: relative;
}

.phase-card__badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
  background: rgba(245, 197, 24, 0.12);
  padding: var(--s-1) var(--s-3);
  border-radius: 2px;
  margin-bottom: var(--s-4);
}

.phase-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-line);
  background: transparent;
  transition: color 300ms ease, border-color 300ms ease, background 300ms ease;
}

.phase-card__toggle:hover {
  color: var(--c-ink);
  border-color: var(--c-accent);
  background: rgba(245, 197, 24, 0.06);
}

.phase-card__toggle-icon {
  transition: transform 350ms ease;
}

.phase-card__toggle[aria-expanded="true"] .phase-card__toggle-icon {
  transform: rotate(180deg);
}

.phase-card__details {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  animation: expandIn 400ms ease forwards;
}

.phase-card__details[hidden] {
  display: none;
}

@keyframes expandIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Milestone checklist */
.milestone-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.milestone {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--c-ink-mid);
}

.milestone--done {
  color: var(--c-ink);
}

.milestone__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 300ms ease, background 300ms ease;
}

.milestone--done .milestone__check {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-ink);
}

.milestone__text {
  transition: color 300ms ease;
}

/* Mini progress bar inside phase card */
.phase-card__progress-mini {
  width: 100%;
  height: 4px;
  background: var(--c-line);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--s-2);
}

.phase-card__progress-mini-bar {
  height: 100%;
  width: var(--progress, 0%);
  background: var(--c-accent);
  border-radius: 2px;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.phase-card__progress-label {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  color: var(--c-ink-dim);
  letter-spacing: 0.05em;
}

/* Enhanced segmented progress bar */
.phases__progress--animated {
  margin-top: var(--s-9);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--s-6);
  background: var(--c-panel);
  border: 1px solid var(--c-line);
}

.phases__progress-bar--segmented {
  height: 8px;
  background: var(--c-line);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  margin-bottom: var(--s-4);
}

.phases__progress-segment {
  width: var(--segment-width, 0%);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.phases__progress-segment--done {
  background: var(--c-accent);
}

.phases__progress-segment--pending {
  background: var(--c-ink-faint);
}

.phases__progress-segment--future {
  background: var(--c-line);
}

.phases__progress-segment-glow {
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.phases__progress-meta {
  display: flex;
  justify-content: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}

.phases__progress-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  color: var(--c-ink-dim);
}

.phases__progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.phases__progress-dot--done { background: var(--c-accent); }
.phases__progress-dot--pending { background: var(--c-ink-faint); }
.phases__progress-dot--future { background: var(--c-line); border: 1px solid var(--c-ink-faint); }

/* ----- Interactive Prototypes ----- */
.prototype-card--interactive {
  cursor: default;
  padding: 0;
  overflow: hidden;
}

.prototype-card__visual {
  background: var(--c-page);
  padding: var(--s-8) var(--s-6) var(--s-6);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--c-line);
}

.prototype-card__visual::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 50% 30%, rgba(245, 197, 24, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.prototype-card__flagpole-svg {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-4);
}

.waving-flag {
  animation: flagWaveSVG 2.5s ease-in-out infinite;
  transform-origin: left center;
}

@keyframes flagWaveSVG {
  0%, 100% { transform: scaleX(1) skewY(0deg); }
  20% { transform: scaleX(0.92) skewY(2deg); }
  40% { transform: scaleX(0.96) skewY(-1.5deg); }
  60% { transform: scaleX(0.9) skewY(1deg); }
  80% { transform: scaleX(0.94) skewY(-0.5deg); }
}

.prototype-card__status {
  display: flex;
  justify-content: center;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--s-1) var(--s-3);
  border-radius: 20px;
}

.status-badge--complete {
  color: #2D5A3D;
  background: rgba(45, 90, 61, 0.1);
}

.status-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2D5A3D;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.prototype-card--interactive .prototype-card__number,
.prototype-card--interactive .prototype-card__label,
.prototype-card--interactive .prototype-card__location {
  padding-left: var(--s-6);
  padding-right: var(--s-6);
}

.prototype-card--interactive .prototype-card__number {
  margin-top: var(--s-6);
  font-size: var(--t-4xl);
}

.prototype-card__specs {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6) var(--s-6);
  margin-top: var(--s-3);
}

.spec {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spec__label {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  color: var(--c-ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spec__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-base);
  color: var(--c-ink);
}

/* Confetti canvas */
.confetti-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 10;
}

.prototypes__grid {
  position: relative;
}

/* Prototypes CTA */
.prototypes__cta {
  text-align: center;
  margin-top: var(--s-9);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.prototypes__cta.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.prototypes__cta-text {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--c-ink-mid);
  margin-bottom: var(--s-4);
}

.prototypes__cta-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
}

.prototypes__cta-line {
  display: block;
  width: 48px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--c-accent), transparent);
}

.prototypes__cta-star {
  animation: starSpin 8s linear infinite;
}

@keyframes starSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ----- Scroll Reveal Enhancements ----- */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered reveal for dashboard grid */
.dashboard__grid [data-animate]:nth-child(1) { transition-delay: 0ms; }
.dashboard__grid [data-animate]:nth-child(2) { transition-delay: 100ms; }
.dashboard__grid [data-animate]:nth-child(3) { transition-delay: 200ms; }
.dashboard__grid [data-animate]:nth-child(4) { transition-delay: 300ms; }
.dashboard__grid [data-animate]:nth-child(5) { transition-delay: 400ms; }
.dashboard__grid [data-animate]:nth-child(6) { transition-delay: 500ms; }

/* Phases stagger */
.phases__grid [data-animate]:nth-child(2) { transition-delay: 100ms; }
.phases__grid [data-animate]:nth-child(3) { transition-delay: 200ms; }

/* Prototypes stagger */
.prototypes__grid [data-animate]:nth-child(2) { transition-delay: 150ms; }
.prototypes__grid [data-animate]:nth-child(3) { transition-delay: 300ms; }
.prototypes__grid [data-animate]:nth-child(4) { transition-delay: 450ms; }

/* Gold accent underline for heading emphasis */
.gold-accent {
  position: relative;
  display: inline-block;
}

.gold-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--c-accent);
  border-radius: 2px;
}

/* ============================================================
   RESPONSIVE — Interactive Redesign
   ============================================================ */

@media (min-width: 768px) {
  .dashboard__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .metric-card--featured {
    grid-column: span 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--s-6);
    text-align: left;
  }

  .metric-card--featured .metric-card__ring {
    margin: 0;
    flex-shrink: 0;
  }

  .map-section__body {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--s-8);
    justify-items: start;
  }

  .map-container {
    flex-direction: row;
    align-items: flex-start;
  }

  .thailand-map {
    max-width: 560px;
  }

  .map-info {
    max-width: 280px;
  }
}

@media (min-width: 1024px) {
  .dashboard__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .metric-card--featured {
    grid-column: span 1;
    flex-direction: column;
    text-align: center;
  }

  .metric-card--featured .metric-card__ring {
    margin: 0 auto var(--s-4);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .counter__wheel { transition: none !important; }
  .counter.is-active .counter__wheel { transform: translateY(var(--offset, 0)) !important; }
  .waving-flag,
  .flagpole-icon__flag,
  .statement__flag-svg,
  .status-badge__dot,
  .phases__progress-segment-glow,
  .prototypes__cta-star { animation: none !important; }
  .timeline__progress { width: 5.2% !important; }
  .progress-ring__fill { transition: none !important; }
  .map-region { transition: none !important; }
  .metric-card__bar-fill,
  .phase-card__progress-mini-bar,
  .map-info__bar-fill { transition: none !important; }
  .confetti-canvas { display: none !important; }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .dashboard { background: var(--c-panel); }
  .metric-card { background: var(--c-deep); }
  .metric-card__bar { background: var(--c-line); }
  .timeline__track { background: var(--c-line); }
  .timeline__dot { background: var(--c-panel); }
  .dashboard__timeline { background: var(--c-deep); }
  .map-info { background: var(--c-panel); }
  .map-info__badge { background: var(--c-deep); }
  .phase-card__badge { background: rgba(245, 197, 24, 0.08); }
  .phases__progress--animated { background: var(--c-panel); }
  .prototype-card__visual { background: var(--c-deep); }
}
```

---