/* ─── Design Tokens ──────────────────────────────────────────── */
    :root {
      --primary:   #0a3d62;
      --secondary: #1e90ff;
      --bg:        #f4f7fb;
      --text:      #2f3640;

      --accent-gold:  #e8b84b;
      --accent-teal:  #00c9a7;
      --surface:      #ffffff;
      --muted:        #6b7a8d;
      --border:       #d4dde8;
      --timeline-dot: var(--secondary);

      --font-display: 'Playfair Display', Georgia, serif;
      --font-body:    'DM Sans', sans-serif;

      --radius-sm: 6px;
      --radius-md: 14px;
      --radius-lg: 24px;
      --shadow-card: 0 4px 24px rgba(10,61,98,.10);
      --shadow-hover: 0 10px 40px rgba(10,61,98,.18);
    }

    /* ─── Reset & Base ───────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }

    /* ─── Hero / Cover ───────────────────────────────────────────── */
    .hero {
      position: relative;
      width: 100%;
      height: 88vh;
      min-height: 520px;
      background: var(--primary);
      overflow: hidden;
      display: flex;
      align-items: flex-end;
    }

    /* ---- Cover image slot ---- */
    .hero__img {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 30%;
      opacity: 0.45;
    }

    /* Gradient overlay */
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        170deg,
        rgba(10,61,98,0.25) 0%,
        rgba(10,61,98,0.80) 60%,
        rgba(10,61,98,0.97) 100%
      );
    }

    .hero__content {
      position: relative;
      z-index: 2;
      max-width: 860px;
      margin-top: 20px;
      padding: 0 48px 0px;
    }

    .hero__eyebrow {
      font-family: var(--font-body);
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--accent-gold);
      margin-bottom: 16px;
      opacity: 0;
      animation: fadeUp .7s .2s forwards;
    }

    .hero__title {
      font-family: var(--font-display);
      font-size: clamp(2.6rem, 6vw, 5rem);
      font-weight: 900;
      line-height: 1.05;
      color: #fff;
      margin-bottom: 20px;
      opacity: 0;
      animation: fadeUp .7s .4s forwards;
    }

    .hero__title span { color: var(--secondary); }

    .hero__subtitle {
      font-size: clamp(1rem, 2vw, 1.2rem);
      color: rgba(255,255,255,.75);
      max-width: 580px;
      opacity: 0;
      animation: fadeUp .7s .6s forwards;
    }

    .hero__badge {
      position: absolute;
      top: 40px; right: 48px;
      z-index: 2;
      background: var(--accent-gold);
      color: var(--primary);
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1rem;
      padding: 10px 20px;
      border-radius: 50px;
      letter-spacing: .02em;
      opacity: 0;
      animation: fadeUp .6s .8s forwards;
    }

    /* ─── Main Container ─────────────────────────────────────────── */
    .container {
      max-width: 1060px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ─── Section Utilities ──────────────────────────────────────── */
    .section { padding: 80px 0; }

    .section__label {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--secondary);
      margin-bottom: 10px;
    }

    .section__heading {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      font-weight: 700;
      color: var(--primary);
      line-height: 1.2;
      margin-bottom: 16px;
    }

    .section__intro {
      font-size: 1.05rem;
      color: var(--muted);
      max-width: 640px;
      margin-bottom: 56px;
    }

    /* ─── Origin Section ─────────────────────────────────────────── */
    .origin {
      background: var(--surface);
      border-radius: var(--radius-lg);
      padding: 56px 56px 56px 56px;
      box-shadow: var(--shadow-card);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }

    .origin__text h2 {
      font-family: var(--font-display);
      font-size: 1.9rem;
      color: var(--primary);
      margin-bottom: 14px;
      line-height: 1.25;
    }
    .origin__text p { color: var(--muted); margin-bottom: 14px; font-size: .97rem; }

    .origin__image-slot {
      width: 100%;
      aspect-ratio: 4/3;
      border-radius: var(--radius-md);
      overflow: hidden;
      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .origin__image-slot img {
      width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md);
    }
    .origin__image-slot .img-placeholder {
      color: rgba(255,255,255,.35);
      font-size: .8rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .quote-block {
      border-left: 4px solid var(--accent-gold);
      padding: 14px 20px;
      background: #f9fbff;
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      margin-top: 20px;
      font-style: italic;
      color: var(--primary);
      font-size: .95rem;
    }

    /* ─── Stats Bar ──────────────────────────────────────────────── */
    .stats-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2px;
      background: var(--border);
      border-radius: var(--radius-md);
      overflow: hidden;
      margin: 56px 0;
    }
    .stat {
      background: var(--surface);
      text-align: center;
      padding: 28px 16px;
      transition: background .2s;
    }
    .stat:hover { background: #eef4ff; }
    .stat__number {
      font-family: var(--font-display);
      font-size: 2.4rem;
      font-weight: 900;
      color: var(--secondary);
      line-height: 1;
    }
    .stat__label {
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .06em;
      color: var(--muted);
      margin-top: 6px;
      text-transform: uppercase;
    }

    /* ─── Timeline ───────────────────────────────────────────────── */
    .timeline-wrapper {
      position: relative;
    }
    /* Vertical spine */
    .timeline-wrapper::before {
      content: '';
      position: absolute;
      left: 120px;
      top: 0; bottom: 0;
      width: 2px;
      background: linear-gradient(to bottom, var(--secondary) 0%, var(--border) 100%);
    }

    .era {
      margin-bottom: 64px;
    }

    .era__header {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 28px;
      position: relative;
    }

    .era__years {
      width: 120px;
      flex-shrink: 0;
      text-align: right;
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--primary);
      padding-right: 28px;
      line-height: 1.2;
    }

    /* Big dot on spine */
    .era__dot {
      position: absolute;
      left: 112px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--secondary);
      border: 3px solid var(--surface);
      box-shadow: 0 0 0 3px var(--secondary);
      z-index: 1;
    }

    .era__title-wrap { padding-left: 28px; }
    .era__title-wrap h3 {
      font-family: var(--font-display);
      font-size: 1.35rem;
      color: var(--primary);
      font-weight: 700;
    }
    .era__title-wrap p {
      font-size: .85rem;
      color: var(--muted);
      margin-top: 2px;
    }

    /* Era body: offset to the right of the spine */
    .era__body {
      margin-left: 148px;
    }

    .era__desc {
      font-size: .97rem;
      color: var(--text);
      margin-bottom: 28px;
      max-width: 780px;
    }

    /* Event cards grid */
    .events-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 16px;
      margin-top: 8px;
    }

    .event-card {
      background: var(--surface);
      border-radius: var(--radius-md);
      padding: 20px 22px;
      border: 1px solid var(--border);
      box-shadow: 0 2px 8px rgba(10,61,98,.06);
      transition: box-shadow .25s, transform .25s;
      position: relative;
      overflow: hidden;
    }
    .event-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 4px; height: 100%;
      background: var(--secondary);
      border-radius: 4px 0 0 4px;
    }
    .event-card:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-3px);
    }

    .event-card.highlight { background: linear-gradient(135deg,#f0f7ff 0%,#fff 100%); }
    .event-card.highlight::before { background: var(--accent-gold); }

    .event-year {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--secondary);
      margin-bottom: 6px;
    }
    .event-card.highlight .event-year { color: var(--accent-gold); }

    .event-title {
      font-weight: 600;
      font-size: .95rem;
      color: var(--primary);
      margin-bottom: 6px;
      line-height: 1.35;
    }

    .event-desc {
      font-size: .83rem;
      color: var(--muted);
      line-height: 1.6;
    }

    /* Icon badges */
    .event-icon {
      font-size: 1.3rem;
      margin-bottom: 8px;
    }

    /* Milestone full-width card */
    .milestone-card {
      background: linear-gradient(135deg, var(--primary) 0%, #0e5185 100%);
      color: #fff;
      border-radius: var(--radius-md);
      padding: 28px 32px;
      display: flex;
      align-items: center;
      gap: 24px;
      margin-bottom: 16px;
      box-shadow: var(--shadow-card);
    }
    .milestone-card .milestone-icon {
      font-size: 2.2rem;
      flex-shrink: 0;
    }
    .milestone-card h4 {
      font-family: var(--font-display);
      font-size: 1.1rem;
      margin-bottom: 4px;
    }
    .milestone-card p { font-size: .88rem; opacity: .8; }

    /* Awards row */
    .awards-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
    }
    .award-tag {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 50px;
      padding: 6px 14px;
      font-size: .78rem;
      font-weight: 600;
      color: var(--primary);
    }
    .award-tag span { font-size: 1rem; }

    /* ─── Closing CTA / Note ─────────────────────────────────────── */
    .closing {
      background: linear-gradient(135deg, var(--primary) 0%, #0c4a76 100%);
      border-radius: var(--radius-lg);
      padding: 64px 56px;
      text-align: center;
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .closing::before {
      content: '';
      position: absolute;
      top: -60px; right: -60px;
      width: 240px; height: 240px;
      border-radius: 50%;
      background: rgba(30,144,255,.15);
    }
    .closing::after {
      content: '';
      position: absolute;
      bottom: -80px; left: -40px;
      width: 320px; height: 320px;
      border-radius: 50%;
      background: rgba(232,184,75,.08);
    }
    .closing h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem,3vw,2.4rem);
      margin-bottom: 16px;
      position: relative; z-index: 1;
    }
    .closing p {
      font-size: 1rem;
      opacity: .8;
      max-width: 520px;
      margin: 0 auto;
      position: relative; z-index: 1;
    }

    /* ─── Animations ─────────────────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .55s ease, transform .55s ease;
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ─── Responsive ─────────────────────────────────────────────── */
    @media (max-width: 780px) {
      .hero__content { padding: 0 24px 48px; }
      .hero__badge { top: 24px; right: 24px; }

      .origin {
        grid-template-columns: 1fr;
        padding: 32px 24px;
      }

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

      .timeline-wrapper::before { left: 18px; }
      .era__years { width: auto; font-size: .85rem; padding-right: 0; text-align: left; }
      .era__header { flex-direction: column; align-items: flex-start; gap: 6px; }
      .era__dot { left: 10px; }
      .era__body { margin-left: 36px; }
      .era__title-wrap { padding-left: 0; }

      .milestone-card { flex-direction: column; }
      .closing { padding: 40px 24px; }
    }