/* ── Reset & Tokens ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --navy:   #0d2137;
      --blue:   #1a4a7a;
      --sky:    #2e7fc1;
      --teal:   #1aaca9;
      --green:  #2a7d4f;
      --gold:   #e8a320;
      --red:    #c0392b;
      --light:  #f0f5fa;
      --white:  #ffffff;
      --gray1:  #f7f9fc;
      --gray2:  #e4ecf4;
      --gray3:  #8fa8c0;
      --text:   #1a2a3a;
      --muted:  #4a6070;
      --radius: 14px;
      --shadow: 0 4px 24px rgba(13,33,55,.12);
      --shadow-sm: 0 2px 10px rgba(13,33,55,.08);
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', sans-serif;
      background: var(--white);
      color: var(--text);
      line-height: 1.6;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }

    /* ── Layout helpers ── */
    .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
    .section    { padding: 72px 0; }
    .section--alt { background: var(--gray1); }
    .section-label {
      display: inline-block;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--sky);
      margin-bottom: 10px;
    }
    .section-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      color: var(--navy);
      line-height: 1.2;
      margin-bottom: 16px;
    }
    .section-intro {
      max-width: 660px;
      color: var(--muted);
      font-size: 1.05rem;
      margin-bottom: 42px;
    }
    .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
    .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
    .grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

    /* ── Card ── */
    .card {
      background: var(--white);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      transition: transform .2s, box-shadow .2s;
    }
    .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .card__body { padding: 24px; }
    .card__icon { font-size: 2rem; margin-bottom: 12px; }
    .card__title { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
    .card__text  { font-size: .93rem; color: var(--muted); line-height: 1.6; }

    /* ── Badge ── */
    .badge {
      display: inline-block;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 20px;
      margin-bottom: 10px;
    }
    .badge--gold  { background: #fff3d6; color: #7a4f00; }
    .badge--teal  { background: #d4f0ef; color: #0a5c5a; }
    .badge--red   { background: #fde8e6; color: #8b1a12; }
    .badge--blue  { background: #ddeeff; color: #0a3d6b; }
    .badge--green { background: #d6f0e2; color: #164d2f; }

    /* ── Button ── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 11px 22px;
      border-radius: 8px;
      font-size: .92rem;
      font-weight: 600;
      cursor: pointer;
      transition: opacity .2s, transform .1s;
      border: none;
    }
    .btn:hover { opacity: .88; transform: translateY(-1px); }
    .btn--primary { background: var(--sky); color: var(--white); }
    .btn--outline  { background: transparent; color: var(--sky); border: 2px solid var(--sky); }
    .btn--gold     { background: var(--gold); color: var(--navy); }
    .btn--teal     { background: var(--teal); color: var(--white); }

    /* ────────────────────────────────────────
       NAVIGATION
    ──────────────────────────────────────── */
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(13,33,55,.96);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .nav__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 62px;
    }
    .nav__brand {
      font-family: 'Playfair Display', serif;
      font-size: 1.5rem;
      color: var(--white);
      font-weight: 800;
      letter-spacing: -.5px;
    }
    .nav__brand span { color: var(--gold); }
    .nav__links {
      display: flex;
      gap: 6px;
      list-style: none;
    }
    .nav__links a {
      color: rgba(255,255,255,.75);
      font-size: .86rem;
      font-weight: 500;
      padding: 6px 12px;
      border-radius: 6px;
      transition: background .2s, color .2s;
    }
    .nav__links a:hover { background: rgba(255,255,255,.1); color: var(--white); }
    .nav__alert {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--gold);
      color: var(--navy);
      font-size: .78rem;
      font-weight: 700;
      padding: 0 14px;
      border-radius: 20px;
      height: 30px;
      white-space: nowrap;
    }
    /* ────────────────────────────────────────
       HAMBURGER BUTTON
    ──────────────────────────────────────── */
    .nav__hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 38px;
      height: 38px;
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 8px;
      cursor: pointer;
      padding: 8px;
      flex-shrink: 0;
      transition: background .2s;
    }
    .nav__hamburger:hover { background: rgba(255,255,255,.18); }
    .nav__hamburger span {
      display: block;
      height: 2px;
      background: var(--white);
      border-radius: 2px;
      transition: transform .25s ease, opacity .2s ease, width .2s ease;
      transform-origin: center;
    }
    /* Animated X state */
    .nav__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav__hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ────────────────────────────────────────
       MOBILE MENU DRAWER
    ──────────────────────────────────────── */
    .nav__mobile-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0; right: 0;
      background: rgba(10,28,50,.98);
      backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.06);
      z-index: 99;
      overflow: hidden;
      max-height: 0;
      transition: max-height .35s cubic-bezier(.4,0,.2,1);
    }
    .nav__mobile-menu.is-open {
      max-height: 600px;
    }
    .nav__mobile-inner {
      padding: 16px 20px 24px;
    }
    .nav__mobile-links {
      list-style: none;
      margin-bottom: 16px;
    }
    .nav__mobile-links li { border-bottom: 1px solid rgba(255,255,255,.06); }
    .nav__mobile-links li:last-child { border-bottom: none; }
    .nav__mobile-links a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px 4px;
      color: rgba(255,255,255,.85);
      font-size: .97rem;
      font-weight: 500;
      transition: color .15s;
    }
    .nav__mobile-links a:hover { color: var(--white); }
    .nav__mobile-links a .link-icon { font-size: 1.1rem; width: 24px; text-align: center; }
    .nav__mobile-divider {
      border: none;
      border-top: 1px solid rgba(255,255,255,.1);
      margin: 8px 0 16px;
    }
    .nav__mobile-lang-label {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.35);
      margin-bottom: 10px;
    }
    .nav__mobile-lang-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
    }
    .mobile-lang-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 8px 4px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 10px;
      cursor: pointer;
      transition: background .2s, border-color .2s;
      font-family: 'Inter', sans-serif;
    }
    .mobile-lang-btn:hover  { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); }
    .mobile-lang-btn.active { background: rgba(232,163,32,.2); border-color: var(--gold); }
    .mobile-lang-btn__flag  { font-size: 1.4rem; line-height: 1; }
    .mobile-lang-btn__code  { font-size: .65rem; font-weight: 700; color: rgba(255,255,255,.65); letter-spacing: .04em; }
    .nav__mobile-alert {
      margin-top: 16px;
      background: var(--gold);
      color: var(--navy);
      font-size: .78rem;
      font-weight: 700;
      padding: 8px 14px;
      border-radius: 20px;
      text-align: center;
    }

    @media (max-width: 768px) {
      .nav__links  { display: none; }
      .nav__alert  { display: none; }
      .nav__hamburger { display: flex; }
      .nav { position: sticky; }
      .nav__mobile-menu { display: block; }
    }

    /* ────────────────────────────────────────
       HERO
    ──────────────────────────────────────── */
    .hero {
      background: linear-gradient(135deg, var(--navy) 0%, #0a3259 50%, #0d4a6b 100%);
      position: relative;
      overflow: hidden;
      padding: 90px 0 80px;
    }
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 70% 50%, rgba(46,127,193,.25) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(26,172,169,.15) 0%, transparent 50%);
    }
    /* Space Needle silhouette */
    .hero__needle {
      position: absolute;
      right: 8%;
      bottom: 0;
      width: 120px;
      opacity: .18;
    }
    .hero__inner {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }
    @media (max-width: 700px) {
      .hero__inner { grid-template-columns: 1fr; }
    }
    .hero__eyebrow {
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 14px;
    }
    .hero__title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2rem, 5vw, 3.4rem);
      color: var(--white);
      line-height: 1.15;
      margin-bottom: 18px;
    }
    .hero__subtitle {
      color: rgba(255,255,255,.72);
      font-size: 1.05rem;
      line-height: 1.7;
      margin-bottom: 28px;
    }
    .hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
    .hero__stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .stat-card {
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius);
      padding: 20px;
      backdrop-filter: blur(4px);
    }
    .stat-card__number {
      font-size: 2.4rem;
      font-weight: 800;
      color: var(--gold);
      line-height: 1;
      margin-bottom: 4px;
    }
    .stat-card__label {
      font-size: .82rem;
      color: rgba(255,255,255,.65);
      font-weight: 500;
    }

    /* ────────────────────────────────────────
       ALERT BANNER
    ──────────────────────────────────────── */
    .alert-bar {
      background: linear-gradient(90deg, #1a4a7a 0%, #0d2d52 100%);
      color: var(--white);
      padding: 13px 0;
    }
    .alert-bar__inner {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: .9rem;
    }
    .alert-bar__icon { font-size: 1.2rem; flex-shrink: 0; }
    .alert-bar strong { font-weight: 700; }
    .alert-bar a { text-decoration: underline; opacity: .85; }

    /* ────────────────────────────────────────
       QUICK ACCESS
    ──────────────────────────────────────── */
    .quick-access { padding: 40px 0; border-bottom: 1px solid var(--gray2); }
    .quick-access__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 12px;
    }
    .quick-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 18px 12px;
      border-radius: 12px;
      background: var(--gray1);
      border: 1px solid var(--gray2);
      cursor: pointer;
      transition: background .2s, border-color .2s, transform .15s;
      text-align: center;
    }
    .quick-btn:hover {
      background: var(--blue);
      border-color: var(--blue);
      transform: translateY(-2px);
    }
    .quick-btn:hover .quick-btn__label { color: var(--white); }
    .quick-btn__icon { font-size: 1.8rem; }
    .quick-btn__label { font-size: .8rem; font-weight: 600; color: var(--navy); }

    /* ────────────────────────────────────────
       FIFA WORLD CUP SECTION
    ──────────────────────────────────────── */
    .fifa-hero {
      background: linear-gradient(135deg, #0a2540 0%, #1a4a7a 100%);
      border-radius: 20px;
      padding: 42px;
      color: var(--white);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
      align-items: center;
      margin-bottom: 36px;
    }
    @media (max-width: 640px) { .fifa-hero { grid-template-columns: 1fr; padding: 28px; } }
    .fifa-hero__label {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 10px;
    }
    .fifa-hero__title {
      font-family: 'Playfair Display', serif;
      font-size: 2rem;
      line-height: 1.2;
      margin-bottom: 14px;
    }
    .fifa-hero__body { color: rgba(255,255,255,.75); font-size: .95rem; line-height: 1.7; }
    .match-list { list-style: none; }
    .match-list li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      margin-bottom: 8px;
      background: rgba(255,255,255,.08);
      border-radius: 10px;
      font-size: .88rem;
      border-left: 3px solid var(--gold);
    }
    .match-list .match-date { color: var(--gold); font-weight: 700; }
    .match-list .match-venue { color: rgba(255,255,255,.6); font-size: .78rem; }
    .impact-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 18px;
    }
    .impact-card {
      border-radius: 12px;
      padding: 22px;
      border: 1px solid var(--gray2);
    }
    .impact-card--warn { background: #fff8e6; border-color: #f0d080; }
    .impact-card--info { background: #e8f4fd; border-color: #a8d4f0; }
    .impact-card--ok   { background: #e8f5ee; border-color: #90d0a8; }
    .impact-card__title { font-weight: 700; font-size: .95rem; margin-bottom: 8px; color: var(--navy); }
    .impact-card__text  { font-size: .88rem; color: var(--muted); line-height: 1.6; }

    /* Schedule Table */
    /* ── Match Day Guide ── */
    .mdg { margin: 48px 0; }
    .mdg__title { font-size: 1.2rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
    .mdg__sub { font-size: .88rem; color: var(--muted); margin-bottom: 28px; }
    /* Timeline */
    .mdg-timeline { display: flex; gap: 0; overflow-x: auto; padding-bottom: 8px; margin-bottom: 36px; scrollbar-width: thin; }
    .mdg-step { flex: 0 0 auto; width: 148px; position: relative; }
    .mdg-step::before { content: ''; position: absolute; top: 22px; left: 50%; right: -50%; height: 2px;
      background: var(--gray2); z-index: 0; }
    .mdg-step:last-child::before { display: none; }
    .mdg-step__dot { width: 44px; height: 44px; border-radius: 50%; background: var(--gray1);
      border: 2px solid var(--gray2); display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem; margin: 0 auto 8px; position: relative; z-index: 1; }
    .mdg-step--active .mdg-step__dot { background: var(--gold); border-color: var(--gold); }
    .mdg-step--key .mdg-step__dot { background: var(--navy); border-color: var(--navy); }
    .mdg-step__time { font-size: .72rem; font-weight: 700; color: var(--sky); text-align: center; margin-bottom: 3px; }
    .mdg-step__label { font-size: .77rem; color: var(--text); text-align: center; line-height: 1.35; padding: 0 6px; }
    /* Two-col layout */
    .mdg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 36px; }
    @media (max-width:680px) { .mdg-cols { grid-template-columns: 1fr; } }
    .mdg-col__title { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
      color: var(--navy); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); display: inline-block; }
    /* Pre-game spots */
    .pregame-spot { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--gray2); }
    .pregame-spot:last-child { border-bottom: none; }
    .pregame-spot__emoji { font-size: 1.4rem; flex-shrink: 0; width: 32px; text-align: center; }
    .pregame-spot__name { font-weight: 700; font-size: .88rem; color: var(--navy); }
    .pregame-spot__detail { font-size: .8rem; color: var(--muted); line-height: 1.4; }
    .pregame-spot__tag { display: inline-block; font-size: .68rem; font-weight: 700; border-radius: 10px;
      padding: 2px 8px; margin-top: 3px; }
    .pgt--open { background: #e8f8ee; color: #1a7a3a; }
    .pgt--busy { background: #fff3e0; color: #a05000; }
    .pgt--walk { background: var(--gray1); color: var(--navy); }
    /* Banned items */
    .banned-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .banned-item { display: flex; align-items: center; gap: 8px; font-size: .82rem;
      background: #fff4f4; border: 1px solid #fcc; border-radius: 8px; padding: 7px 10px; color: #7a1a1a; }
    .banned-item::before { content: '✕'; font-weight: 900; color: #c0392b; flex-shrink: 0; }
    .allowed-item { display: flex; align-items: center; gap: 8px; font-size: .82rem;
      background: #f2fbf5; border: 1px solid #b0e8c0; border-radius: 8px; padding: 7px 10px; color: #1a5a2a; }
    .allowed-item::before { content: '✓'; font-weight: 900; color: #27ae60; flex-shrink: 0; }
    /* Transit strip */
    .mdg-transit { background: var(--navy); color: #fff; border-radius: 14px; padding: 22px 26px; }
    .mdg-transit__title { font-weight: 700; margin-bottom: 14px; font-size: .95rem; }
    .mdg-route { display: flex; align-items: center; gap: 0; flex-wrap: wrap; font-size: .85rem; margin-bottom: 10px; }
    .mdg-route__stop { background: rgba(255,255,255,.12); border-radius: 8px; padding: 5px 12px; font-weight: 600; }
    .mdg-route__arrow { color: var(--gold); font-weight: 700; padding: 0 6px; }
    .mdg-route__note { font-size: .78rem; color: rgba(255,255,255,.55); margin-top: 4px; width: 100%; }

    /* ── Rich Match Cards ── */
    .match-cards { display: grid; gap: 20px; margin-bottom: 40px; }
    .mc { border-radius: 16px; border: 1px solid var(--gray2); background: var(--white);
      overflow: hidden; transition: box-shadow .2s; }
    .mc:hover { box-shadow: 0 4px 24px rgba(0,0,0,.1); }
    .mc__header { display: flex; align-items: stretch; gap: 0; }
    .mc__datebox { display: flex; flex-direction: column; align-items: center; justify-content: center;
      min-width: 80px; padding: 16px 12px; text-align: center; flex-shrink: 0; }
    .mc__datebox--group    { background: linear-gradient(160deg,#0a2a3a,#0d4060); }
    .mc__datebox--knockout { background: linear-gradient(160deg,#3a0a1a,#7a1a1a); }
    .mc__month { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
      color: rgba(255,255,255,.6); }
    .mc__day   { font-size: 2rem; font-weight: 900; color: #fff; line-height: 1; }
    .mc__dow   { font-size: .68rem; color: rgba(255,255,255,.5); margin-top: 2px; }
    .mc__main  { flex: 1; padding: 16px 20px 14px; border-left: 1px solid var(--gray2); }
    .mc__meta  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
    .mc__stage { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
      padding: 3px 8px; border-radius: 4px; }
    .mc__stage--group    { background: #e8f4ff; color: #0a3d6b; }
    .mc__stage--knockout { background: #fff0f0; color: #7a0a0a; }
    .mc__time  { font-size: .75rem; color: var(--muted); font-weight: 600; }
    .mc__conflict { font-size: .68rem; font-weight: 700; background: #fff3cd; color: #856404;
      padding: 2px 8px; border-radius: 4px; }
    .mc__teams { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
    .mc__team  { display: flex; align-items: center; gap: 7px; }
    .mc__flag  { font-size: 1.6rem; line-height: 1; }
    .mc__team-name { font-size: 1.05rem; font-weight: 800; color: var(--navy); }
    .mc__team-rank { font-size: .72rem; color: var(--muted); font-weight: 600; }
    .mc__vs    { font-size: .8rem; font-weight: 700; color: var(--muted); flex-shrink: 0; }
    .mc__group-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--gray1);
      border-radius: 6px; padding: 4px 10px; font-size: .76rem; font-weight: 700; color: var(--navy);
      margin-bottom: 10px; }
    .mc__body  { padding: 0 20px 16px; display: grid; gap: 10px; }
    .mc__context { font-size: .83rem; color: var(--muted); line-height: 1.6; }
    .mc__context strong { color: var(--navy); }
    .mc__fans  { display: flex; flex-wrap: wrap; gap: 6px; }
    .mc__fan-pill { font-size: .74rem; background: #eef7ff; border-radius: 20px;
      padding: 3px 10px; color: #0a3d6b; }
    .mc__alert { font-size: .8rem; background: #fff8e6; border: 1px solid #f5c842;
      border-radius: 8px; padding: 9px 12px; color: #7a4800; line-height: 1.5; }
    .mc__tip   { font-size: .8rem; background: #eef7ff; border-radius: 8px; padding: 9px 12px;
      color: var(--navy); line-height: 1.5; border-left: 3px solid var(--sky); }
    .mc__tbd   { opacity: .6; font-style: italic; }
    @media (max-width: 600px) {
      .mc__team-name { font-size: .9rem; }
      .mc__flag { font-size: 1.3rem; }
    }
    .schedule-wrap { margin-bottom: 40px; }
    .schedule-heading {
      font-size: 1.1rem; font-weight: 700; color: var(--navy);
      margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
    }
    .schedule-table {
      width: 100%; border-collapse: collapse; font-size: .9rem;
      background: var(--white); border-radius: 14px; overflow: hidden;
      box-shadow: var(--shadow-sm);
    }
    .schedule-table thead th {
      background: var(--navy); color: var(--white);
      padding: 12px 16px; text-align: left; font-size: .75rem;
      font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    }
    .schedule-table tbody tr { border-bottom: 1px solid var(--gray2); transition: background .15s; }
    .schedule-table tbody tr:last-child { border-bottom: none; }
    .schedule-table tbody tr:hover { background: var(--gray1); }
    .schedule-table td { padding: 14px 16px; vertical-align: middle; }
    .sch-date { font-weight: 700; color: var(--navy); white-space: nowrap; }
    .sch-day  { font-size: .75rem; color: var(--muted); }
    .sch-time { font-weight: 600; color: var(--sky); white-space: nowrap; }
    .sch-teams { font-weight: 600; color: var(--text); }
    .sch-teams .flags { font-size: 1.2rem; margin-right: 6px; }
    .sch-stage { display: inline-block; font-size: .72rem; font-weight: 700;
      letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px;
      border-radius: 20px; }
    .stage--group    { background: #ddeeff; color: #0a3d6b; }
    .stage--knockout { background: #fff0cc; color: #7a4800; }
    .sch-tbd { color: var(--muted); font-style: italic; }
    @media (max-width: 600px) {
      .schedule-table thead th:nth-child(4),
      .schedule-table td:nth-child(4) { display: none; }
    }

    /* ────────────────────────────────────────
       CRUISE SECTION
    ──────────────────────────────────────── */
    .cruise-banner {
      background: linear-gradient(135deg, #062b20 0%, #0d5e44 100%);
      border-radius: 20px;
      padding: 42px;
      color: var(--white);
      margin-bottom: 36px;
      position: relative;
      overflow: hidden;
    }
    .cruise-banner::after {
      content: '🚢';
      position: absolute;
      right: 40px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 7rem;
      opacity: .15;
    }
    .cruise-banner__label {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #7fdfbf;
      margin-bottom: 10px;
    }
    .cruise-banner__title {
      font-family: 'Playfair Display', serif;
      font-size: 1.9rem;
      margin-bottom: 14px;
    }
    .cruise-banner__body { color: rgba(255,255,255,.75); max-width: 600px; font-size: .95rem; line-height: 1.7; }
    .terminal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 32px; }
    @media (max-width: 560px) { .terminal-cards { grid-template-columns: 1fr; } }
    .terminal-card {
      background: var(--white);
      border: 1px solid var(--gray2);
      border-radius: 14px;
      padding: 22px;
    }
    .terminal-card__name { font-weight: 700; font-size: 1rem; color: var(--navy); margin-bottom: 4px; }
    .terminal-card__address { font-size: .82rem; color: var(--muted); margin-bottom: 12px; }
    .terminal-card__lines { display: flex; flex-wrap: wrap; gap: 6px; }
    .line-pill {
      font-size: .75rem;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 20px;
      background: var(--gray2);
      color: var(--blue);
    }
    /* Terminal Tabs */
    .term-tabs { display: flex; gap: 0; margin-bottom: 0; border-radius: 14px 14px 0 0; overflow: hidden; }
    .term-tab {
      flex: 1; padding: 16px 20px; background: var(--gray2); border: none; cursor: pointer;
      font-family: 'Inter', sans-serif; font-size: .95rem; font-weight: 700; color: var(--muted);
      transition: all .2s; text-align: center;
    }
    .term-tab.active { background: var(--navy); color: var(--white); }
    .term-tab:hover:not(.active) { background: var(--gray3); color: var(--white); }
    .term-panel { display: none; background: var(--white); border: 2px solid var(--gray2); border-top: none;
      border-radius: 0 0 14px 14px; padding: 28px; margin-bottom: 32px; }
    .term-panel.active { display: block; }
    .term-top { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
    @media (max-width: 620px) { .term-top { grid-template-columns: 1fr; } }
    .term-facts { background: var(--gray1); border-radius: 12px; padding: 18px; }
    .term-facts h4 { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sky); margin-bottom: 12px; }
    .fact-row { display: flex; gap: 8px; font-size: .87rem; margin-bottom: 8px; color: var(--text); }
    .fact-row .fact-label { color: var(--muted); min-width: 90px; flex-shrink: 0; }
    .term-lines { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    /* Transport modes */
    .transport-section h4 { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sky); margin-bottom: 12px; }
    .transport-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px; }
    .transport-card {
      border: 1px solid var(--gray2); border-radius: 10px; padding: 12px 14px;
      font-size: .85rem; line-height: 1.5;
    }
    .transport-card__mode { font-weight: 700; color: var(--navy); font-size: .88rem; margin-bottom: 4px; }
    .transport-card__detail { color: var(--muted); }
    .transport-card__time { display: inline-block; background: var(--teal); color: #fff; font-size: .72rem;
      font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-top: 5px; }
    /* Walkability */
    .walk-section { margin-bottom: 20px; }
    .walk-section h4 { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sky); margin-bottom: 10px; }
    .walk-grid { display: flex; flex-wrap: wrap; gap: 8px; }
    .walk-pill {
      display: flex; align-items: center; gap: 6px; padding: 6px 12px;
      border-radius: 20px; font-size: .82rem; font-weight: 500;
    }
    .walk-pill--close  { background: #e8f5ee; color: #1a6b3a; border: 1px solid #90d0a8; }
    .walk-pill--medium { background: #fff8e6; color: #7a4800; border: 1px solid #f0d080; }
    .walk-pill--far    { background: #fdecea; color: #8a1a1a; border: 1px solid #f0a8a0; }
    .walk-none { font-size: .88rem; color: var(--muted); font-style: italic; background: var(--gray1); padding: 10px 14px; border-radius: 8px; }
    /* Airport route */
    .airport-section { margin-bottom: 4px; }
    .airport-section h4 { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sky); margin-bottom: 10px; }
    .airport-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
    .airport-route { background: var(--gray1); border-radius: 10px; padding: 12px 14px; font-size: .85rem; }
    .airport-route__mode { font-weight: 700; color: var(--navy); margin-bottom: 4px; }
    .airport-route__detail { color: var(--muted); line-height: 1.5; }
    .airport-route__time { color: var(--teal); font-weight: 700; }
    /* Day-of timeline */
    .timeline { list-style: none; position: relative; padding-left: 28px; margin-bottom: 32px; }
    .timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--gray2); }
    .timeline li { position: relative; margin-bottom: 18px; }
    .timeline li::before {
      content: ''; position: absolute; left: -24px; top: 5px;
      width: 10px; height: 10px; border-radius: 50%; background: var(--sky); border: 2px solid var(--white);
      box-shadow: 0 0 0 2px var(--sky);
    }
    .tl-time { font-weight: 700; color: var(--sky); font-size: .85rem; }
    .tl-event { color: var(--text); font-size: .9rem; }
    .tl-note  { color: var(--muted); font-size: .8rem; }
    /* FIFA overlap alert */
    .overlap-alert { background: #fff8e6; border: 1px solid #f0d080; border-radius: 12px; padding: 16px 20px; margin-bottom: 28px; display: flex; gap: 12px; align-items: flex-start; }
    .overlap-alert__icon { font-size: 1.4rem; flex-shrink: 0; }
    .overlap-alert__title { font-weight: 700; color: #7a4800; font-size: .93rem; margin-bottom: 4px; }
    .overlap-alert__body { font-size: .85rem; color: #5a3800; line-height: 1.6; }
    .cruise-tips { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
    .cruise-tip {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: var(--white);
      border: 1px solid var(--gray2);
      border-radius: 10px;
    }
    .cruise-tip__icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
    .cruise-tip__text { font-size: .9rem; color: var(--muted); line-height: 1.6; }
    .cruise-tip__title { font-weight: 700; color: var(--navy); font-size: .93rem; margin-bottom: 3px; }

    /* ────────────────────────────────────────
       SUMMER 2026 CONVERGENCE
    ──────────────────────────────────────── */
    .convergence {
      background: linear-gradient(135deg, #1a0a30 0%, #2d1060 100%);
      color: var(--white);
      border-radius: 20px;
      padding: 48px;
      text-align: center;
      margin-bottom: 0;
    }
    .convergence__title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      margin-bottom: 16px;
    }
    .convergence__body { max-width: 680px; margin: 0 auto 32px; color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.7; }
    .convergence__stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 20px;
      max-width: 700px;
      margin: 0 auto 32px;
    }
    .conv-stat { background: rgba(255,255,255,.08); border-radius: 12px; padding: 20px; border: 1px solid rgba(255,255,255,.12); }
    .conv-stat__num  { font-size: 2rem; font-weight: 800; color: var(--gold); }
    .conv-stat__desc { font-size: .82rem; color: rgba(255,255,255,.6); margin-top: 4px; }

    /* ────────────────────────────────────────
       TRANSIT & TRAFFIC
    ──────────────────────────────────────── */
    .transit-options {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 18px;
      margin-bottom: 32px;
    }
    .transit-card {
      border-radius: 12px;
      padding: 22px;
      border: 1px solid var(--gray2);
      background: var(--white);
      position: relative;
      overflow: hidden;
    }
    .transit-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
    }
    .transit-card--rail::before { background: var(--sky); }
    .transit-card--bus::before  { background: var(--green); }
    .transit-card--ferry::before { background: var(--teal); }
    .transit-card--bike::before { background: var(--gold); }
    .transit-card__icon  { font-size: 1.8rem; margin-bottom: 10px; }
    .transit-card__title { font-weight: 700; font-size: .98rem; color: var(--navy); margin-bottom: 6px; }
    .transit-card__body  { font-size: .87rem; color: var(--muted); line-height: 1.6; }
    .transit-card__link  {
      display: inline-block;
      margin-top: 10px;
      font-size: .82rem;
      font-weight: 600;
      color: var(--sky);
    }
    .traffic-tips {
      background: #fff8e6;
      border: 1px solid #f0d080;
      border-radius: 14px;
      padding: 24px;
    }
    .traffic-tips__title { font-weight: 700; font-size: 1rem; color: #7a4f00; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
    .traffic-tips__list { list-style: none; display: grid; gap: 8px; }
    .traffic-tips__list li {
      display: flex;
      gap: 10px;
      font-size: .9rem;
      color: var(--muted);
    }
    .traffic-tips__list li::before { content: '→'; color: var(--gold); font-weight: 700; flex-shrink: 0; }

    /* ────────────────────────────────────────
       CITY SERVICES
    ──────────────────────────────────────── */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 16px;
    }
    .service-btn {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 20px;
      background: var(--white);
      border: 1px solid var(--gray2);
      border-radius: 12px;
      cursor: pointer;
      transition: border-color .2s, box-shadow .2s;
    }
    .service-btn:hover { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(46,127,193,.12); }
    .service-btn__icon { font-size: 1.6rem; flex-shrink: 0; }
    .service-btn__label { font-size: .9rem; font-weight: 600; color: var(--navy); }
    .service-btn__sub   { font-size: .78rem; color: var(--muted); }

    /* ────────────────────────────────────────
       EVENTS
    ──────────────────────────────────────── */
    .event-card {
      display: flex;
      gap: 18px;
      padding: 20px;
      background: var(--white);
      border: 1px solid var(--gray2);
      border-radius: 14px;
      margin-bottom: 14px;
      transition: box-shadow .2s;
    }
    .event-card:hover { box-shadow: var(--shadow); }
    .event-date {
      flex-shrink: 0;
      width: 58px;
      text-align: center;
      background: var(--navy);
      color: var(--white);
      border-radius: 10px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .event-date__month { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
    .event-date__day   { font-size: 1.6rem; font-weight: 800; line-height: 1; }
    .event-info__title { font-weight: 700; font-size: .98rem; color: var(--navy); margin-bottom: 4px; }
    .event-info__meta  { font-size: .82rem; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
    .event-info__desc  { font-size: .88rem; color: var(--muted); margin-top: 6px; line-height: 1.5; }
    .event-tag {
      display: inline-block;
      font-size: .7rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 12px;
      margin-right: 6px;
    }
    .tag--fifa    { background: #ddeeff; color: #0a3d6b; }
    .tag--cruise  { background: #d6f0e2; color: #164d2f; }
    .tag--local   { background: #f5e6ff; color: #4a1580; }
    .tag--music   { background: #ffe6f0; color: #7a0a3a; }
    .tag--holiday { background: #fff3cc; color: #7a4800; }
    .tag--sports  { background: #e6f4e6; color: #1a4d1a; }
    .tag--food    { background: #fff0e6; color: #7a3300; }
    .tag--film    { background: #f0e6ff; color: #3d0080; }
    .tag--market  { background: #e6fff0; color: #005a2b; }
    /* Event filters */
    .event-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
    .evt-filter {
      padding: 7px 16px; border-radius: 20px; border: 1px solid var(--gray2);
      background: var(--white); font-size: .83rem; font-weight: 600; cursor: pointer;
      color: var(--muted); transition: all .15s; font-family: 'Inter', sans-serif;
    }
    .evt-filter:hover  { border-color: var(--sky); color: var(--sky); }
    .evt-filter.active { background: var(--navy); color: var(--white); border-color: var(--navy); }
    /* Past event */
    .event-card--past { opacity: .45; }
    .event-card--past .event-date { background: var(--gray2); color: var(--muted); }
    .event-card--today .event-date { background: var(--red); }
    .event-card--today { border-color: var(--red); }
    /* Conflict badge */
    .conflict-badge {
      display: inline-block; font-size: .7rem; font-weight: 700; padding: 2px 8px;
      background: #fff0cc; color: #7a4800; border-radius: 10px; margin-left: 6px;
      vertical-align: middle;
    }

    /* ────────────────────────────────────────
       NEIGHBORHOOD GUIDE
    ──────────────────────────────────────── */
    /* Neighborhood guide — visitor picker */
    .nb-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
    .nb-pick-btn {
      padding: 10px 18px; border-radius: 24px; border: 2px solid var(--gray2);
      background: var(--white); font-family: 'Inter', sans-serif; font-size: .88rem;
      font-weight: 600; color: var(--muted); cursor: pointer; transition: all .15s;
    }
    .nb-pick-btn:hover  { border-color: var(--sky); color: var(--sky); }
    .nb-pick-btn.active { background: var(--navy); color: var(--white); border-color: var(--navy); }
    /* Neighborhood cards — new */
    .nb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 20px; }
    .nb-card {
      border-radius: 16px; border: 2px solid var(--gray2); overflow: hidden;
      background: var(--white); transition: box-shadow .2s, border-color .2s;
    }
    .nb-card:hover { box-shadow: var(--shadow); }
    .nb-card.nb-highlight { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,163,32,.15); }
    .nb-card.nb-dim { opacity: .4; }
    .nb-header {
      padding: 18px 20px 14px; color: var(--white); position: relative;
    }
    .nb-header__name { font-size: 1.05rem; font-weight: 800; margin-bottom: 3px; }
    .nb-header__vibe { font-size: .78rem; opacity: .8; }
    .nb-best { position: absolute; top: 12px; right: 12px; background: var(--gold);
      color: #0d2137; font-size: .65rem; font-weight: 800; letter-spacing: .08em;
      text-transform: uppercase; padding: 3px 8px; border-radius: 10px; }
    .nb-body { padding: 16px 20px; }
    .nb-distances { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
    .nb-dist {
      display: flex; align-items: center; gap: 6px; font-size: .78rem; padding: 5px 8px;
      border-radius: 8px; background: var(--gray1);
    }
    .nb-dist__label { color: var(--muted); flex: 1; }
    .nb-dist__val { font-weight: 700; white-space: nowrap; }
    .nb-dist--close  .nb-dist__val { color: #1a6b3a; }
    .nb-dist--medium .nb-dist__val { color: #7a4800; }
    .nb-dist--far    .nb-dist__val { color: var(--muted); }
    .nb-desc { font-size: .86rem; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
    .nb-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
    .nb-tag {
      font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 12px;
      background: var(--gray2); color: var(--muted);
    }
    .nb-price { font-size: .8rem; color: var(--muted); }
    .nb-price strong { color: var(--navy); }
    .neighborhood-card {
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--gray2);
      background: var(--white);
    }
    .neighborhood-card__header {
      padding: 18px 20px;
      font-weight: 700;
      font-size: 1rem;
      color: var(--white);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .nb--downtown  .neighborhood-card__header { background: #1a4a7a; }
    .nb--belltown  .neighborhood-card__header { background: #2d7d4f; }
    .nb--sodo      .neighborhood-card__header { background: #6b2d8a; }
    .nb--waterfront .neighborhood-card__header { background: #0d7a7a; }
    .nb-section-lbl { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
      color: var(--muted); margin: 14px 0 7px; }
    .nb-hotels-list { display: grid; gap: 0; }
    .nb-hotel-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
      font-size: .81rem; padding: 6px 0; border-bottom: 1px solid var(--gray2); }
    .nb-hotel-row:last-child { border-bottom: none; }
    .nb-hotel-name { font-weight: 600; color: var(--navy); }
    .nb-hotel-name a { color: var(--sky); text-decoration: none; }
    .nb-hotel-name a:hover { text-decoration: underline; }
    .nb-hotel-rate { font-size: .76rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
    .nb-walk-pills { display: flex; flex-wrap: wrap; gap: 5px; }
    .nb-walk-pill { font-size: .74rem; background: var(--gray1); border-radius: 20px; padding: 3px 9px; color: var(--navy); }
    .nb-eats-list { font-size: .81rem; color: var(--muted); line-height: 1.7; }
    .nb-eats-list strong { color: var(--navy); }
    .nb-tip { font-size: .79rem; background: #eef7ff; border-radius: 8px; padding: 9px 12px;
      margin-top: 12px; border-left: 3px solid var(--sky); color: var(--navy); line-height: 1.55; }
    .nb-catch { font-size: .79rem; background: #fff8ee; border-radius: 8px; padding: 9px 12px;
      margin-top: 8px; border-left: 3px solid var(--gold); color: #6a3c00; line-height: 1.55; }
    .neighborhood-card__body { padding: 16px 20px; }
    .neighborhood-card__body ul { list-style: none; display: grid; gap: 6px; }
    .neighborhood-card__body li {
      font-size: .88rem;
      color: var(--muted);
      display: flex;
      gap: 8px;
    }
    .neighborhood-card__body li::before { content: '·'; color: var(--sky); font-weight: 700; }

    /* ────────────────────────────────────────
       LOCALS TIPS
    ──────────────────────────────────────── */
    .locals-banner {
      background: linear-gradient(135deg, #0f1f10 0%, #1c3d1c 55%, #0a2d1a 100%);
      border-radius: 20px; color: var(--white); padding: 36px 40px;
      margin-bottom: 36px; position: relative; overflow: hidden;
      display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
    }
    @media (max-width: 600px) { .locals-banner { grid-template-columns: 1fr; padding: 28px; } }
    .locals-banner::before {
      content: '🌧️'; position: absolute; right: 40px; top: 50%;
      transform: translateY(-50%); font-size: 8rem; opacity: .07; pointer-events: none;
    }
    .locals-banner__label { font-size: .72rem; font-weight: 700; letter-spacing: .14em;
      text-transform: uppercase; color: #7ac87a; margin-bottom: 8px; }
    .locals-banner__title { font-family: 'Playfair Display', serif; font-size: clamp(1.5rem,3vw,2rem);
      line-height: 1.2; margin-bottom: 10px; }
    .locals-banner__sub { color: rgba(255,255,255,.65); font-size: .9rem; line-height: 1.6; max-width: 540px; }
    .locals-banner__badge {
      flex-shrink: 0; background: rgba(122,200,122,.15); border: 1px solid rgba(122,200,122,.3);
      border-radius: 14px; padding: 16px 20px; text-align: center; min-width: 110px;
    }
    .locals-banner__badge-num { font-size: 2.2rem; font-weight: 900; color: #7ac87a; line-height: 1; }
    .locals-banner__badge-lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; color: rgba(255,255,255,.5); margin-top: 4px; }

    /* Category filter row */
    .locals-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
    .locals-filter {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 16px; border-radius: 20px; font-size: .82rem; font-weight: 600;
      border: 2px solid var(--gray2); background: var(--white); color: var(--muted);
      cursor: pointer; transition: all .15s;
    }
    .locals-filter.active, .locals-filter:hover {
      border-color: var(--navy); background: var(--navy); color: var(--white);
    }

    /* Tip card grid */
    .locals-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
      gap: 16px;
    }
    .tip-card {
      background: var(--white);
      border: 1.5px solid var(--gray2);
      border-radius: 14px;
      padding: 20px;
      transition: box-shadow .2s, transform .15s;
      position: relative;
    }
    .tip-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
    .tip-card[style*="none"] { display: none; }
    .tip-card__top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
    .tip-card__emoji { font-size: 1.8rem; flex-shrink: 0; line-height: 1; }
    .tip-card__meta { flex: 1; }
    .tip-card__cat {
      display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .09em;
      text-transform: uppercase; border-radius: 10px; padding: 2px 8px; margin-bottom: 5px;
    }
    .tip-cat--food    { background: #fff0e0; color: #a04800; }
    .tip-cat--coffee  { background: #f5ede4; color: #6b3a1f; }
    .tip-cat--transit { background: #e4eeff; color: #1a3a8a; }
    .tip-cat--spots   { background: #e6f5ec; color: #1a5a2e; }
    .tip-cat--timing  { background: #f0e8ff; color: #4a1a8a; }
    .tip-cat--avoid   { background: #fff0f0; color: #8a1a1a; }
    .tip-card__title { font-weight: 700; font-size: .92rem; color: var(--navy); line-height: 1.3; }
    .tip-card__body { font-size: .85rem; color: var(--muted); line-height: 1.6; }
    .tip-card__contrast {
      margin-top: 10px; font-size: .79rem; border-radius: 8px; padding: 8px 11px;
      line-height: 1.5;
    }
    .tip-card__contrast--local   { background: #e8f5ee; border-left: 3px solid #27ae60; color: #1a4a2e; }
    .tip-card__contrast--tourist { background: #fff4f4; border-left: 3px solid #e74c3c; color: #7a1a1a; }

    /* ────────────────────────────────────────
       DAY TRIPS
    ──────────────────────────────────────── */
    .daytrip-featured {
      background: linear-gradient(135deg, #0a2540 0%, #1a4a7a 60%, #0d7a7a 100%);
      border-radius: 20px; color: var(--white); padding: 40px;
      margin-bottom: 36px; position: relative; overflow: hidden;
    }
    .daytrip-featured::after {
      content: '⛴️'; position: absolute; right: 40px; top: 50%;
      transform: translateY(-50%); font-size: 7rem; opacity: .12;
      pointer-events: none;
    }
    .daytrip-featured__label { font-size: .72rem; font-weight: 700; letter-spacing: .14em;
      text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
    .daytrip-featured__title { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem,3vw,2.2rem);
      line-height: 1.2; margin-bottom: 10px; }
    .daytrip-featured__sub { color: rgba(255,255,255,.7); font-size: .93rem; line-height: 1.6; max-width: 560px; margin-bottom: 20px; }
    .daytrip-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
    .daytrip-pill { background: rgba(255,255,255,.12); border-radius: 20px; padding: 5px 14px;
      font-size: .8rem; font-weight: 600; }
    .daytrip-pill--gold { background: var(--gold); color: #0d2137; }
    /* Ferry info strip */
    .ferry-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px; background: rgba(255,255,255,.08); border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; }
    .ferry-item__label { font-size: .68rem; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 3px; }
    .ferry-item__val { font-size: .92rem; font-weight: 700; }
    /* ── Ferry Live Widget ── */
    .fw { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14);
      border-radius: 14px; padding: 16px 18px; margin-bottom: 20px; backdrop-filter: blur(6px); }
    .fw__header { display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
    .fw__title { font-size: .78rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .1em; color: var(--gold); }
    .fw__meta { display: flex; align-items: center; gap: 10px; }
    .fw__clock { font-size: .78rem; color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; }
    .fw__refresh { background: none; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.6);
      border-radius: 6px; padding: 3px 10px; font-size: .75rem; cursor: pointer; transition: all .15s; }
    .fw__refresh:hover { background: rgba(255,255,255,.1); color: #fff; }
    .fw__body { display: grid; gap: 10px; min-height: 60px; }
    .fw__row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
      background: rgba(255,255,255,.07); border-radius: 10px; padding: 12px 14px; }
    .fw__row--primary { background: rgba(232,163,32,.12); border: 1px solid rgba(232,163,32,.25); }
    .fw__row-left { flex: 1; min-width: 0; }
    .fw__vessel-name { font-weight: 700; font-size: .9rem; color: #fff; margin-bottom: 2px; }
    .fw__direction { font-size: .75rem; color: rgba(255,255,255,.5); margin-bottom: 5px; }
    .fw__badge { display: inline-block; font-size: .72rem; font-weight: 600;
      border-radius: 20px; padding: 2px 9px; }
    .fw__badge--dock   { background: rgba(255,200,0,.18);  color: #ffd966; }
    .fw__badge--route  { background: rgba(50,220,100,.18);  color: #6feaa0; }
    .fw__badge--return { background: rgba(80,160,255,.18);  color: #80c8ff; }
    .fw__badge--board  { background: rgba(50,220,100,.35);  color: #fff; font-weight:800; }
    .fw__row-right { text-align: right; flex-shrink: 0; }
    .fw__time { font-size: 1.35rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
    .fw__sub  { font-size: .73rem; color: rgba(255,255,255,.5); margin-top: 3px; }
    .fw__msg  { font-size: .84rem; color: rgba(255,255,255,.55); padding: 12px 4px; text-align: center; }
    .fw__toggle { display: flex; background: rgba(255,255,255,.08); border-radius: 8px; padding: 3px; gap: 3px; }
    .fw__dir-btn { background: none; border: none; color: rgba(255,255,255,.5); font-size: .72rem; font-weight: 700;
      padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
    .fw__dir-btn.active { background: rgba(255,255,255,.18); color: #fff; }
    .fw__footer { margin-top: 12px; display: flex; align-items: center; justify-content: space-between;
      font-size: .72rem; color: rgba(255,255,255,.3); flex-wrap: wrap; gap: 6px; }
    .fw__footer a { color: rgba(255,255,255,.45); text-decoration: underline; }
    .fw__footer a:hover { color: var(--gold); }
    /* ── Plan Your Visit Quiz ── */
    .pvq { background: linear-gradient(135deg,#0a2a3a 0%,#0d3d56 100%); padding: 52px 0; }
    .pvq__inner { max-width: 680px; margin: 0 auto; padding: 0 24px; }
    .pvq__eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 8px; }
    .pvq__heading { font-size: 1.55rem; font-weight: 800; color: #fff; margin-bottom: 6px; line-height: 1.25; }
    .pvq__sub { font-size: .9rem; color: rgba(255,255,255,.55); margin-bottom: 28px; }
    .pvq__progress { display: flex; gap: 6px; margin-bottom: 26px; }
    .pvq__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); transition: background .3s; }
    .pvq__dot.done  { background: var(--gold); }
    .pvq__dot.active{ background: #fff; }
    .pvq__step { display: none; }
    .pvq__step.is-active { display: block; }
    .pvq__q { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 18px; }
    .pvq__opts { display: grid; gap: 10px; }
    .pvq__opts--2 { grid-template-columns: 1fr 1fr; }
    .pvq__opts--3 { grid-template-columns: 1fr 1fr 1fr; }
    @media (max-width: 520px) { .pvq__opts--2,.pvq__opts--3 { grid-template-columns: 1fr; } }
    .pvq__opt { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
      padding: 14px 16px; text-align: left; cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
      color: #fff; display: flex; flex-direction: column; gap: 4px; }
    .pvq__opt:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
    .pvq__opt-icon { font-size: 1.6rem; margin-bottom: 2px; }
    .pvq__opt-label { font-size: .9rem; font-weight: 700; }
    .pvq__opt-desc  { font-size: .75rem; color: rgba(255,255,255,.5); line-height: 1.4; }
    .pvq__back { background: none; border: none; color: rgba(255,255,255,.4); font-size: .8rem; cursor: pointer;
      padding: 0; margin-top: 16px; text-decoration: underline; }
    .pvq__back:hover { color: rgba(255,255,255,.7); }
    /* Result */
    .pvq__result { display: none; }
    .pvq__result.is-active { display: block; }
    .pvq__result-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 10px; }
    .pvq__result-title { font-size: 1.2rem; font-weight: 800; color: #fff; margin-bottom: 6px; }
    .pvq__result-sub { font-size: .85rem; color: rgba(255,255,255,.55); margin-bottom: 22px; }
    .pvq__cards { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
    @media (max-width: 480px) { .pvq__cards { grid-template-columns: 1fr; } }
    .pvq__card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
      border-radius: 12px; padding: 16px; text-decoration: none; display: flex; gap: 12px;
      align-items: flex-start; transition: background .15s, border-color .15s; }
    .pvq__card:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
    .pvq__card-icon { font-size: 1.4rem; flex-shrink: 0; }
    .pvq__card-body {}
    .pvq__card-title { font-size: .88rem; font-weight: 700; color: #fff; margin-bottom: 3px; }
    .pvq__card-desc  { font-size: .75rem; color: rgba(255,255,255,.5); line-height: 1.4; }
    .pvq__restart { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px;
      background: none; border: 1px solid rgba(255,255,255,.2); border-radius: 8px;
      color: rgba(255,255,255,.5); font-size: .8rem; padding: 7px 14px; cursor: pointer; transition: all .15s; }
    .pvq__restart:hover { border-color: rgba(255,255,255,.4); color: #fff; }
    /* Highlight spots */
    .daytrip-spots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; margin-bottom: 32px; }
    .spot-card { border-radius: 14px; border: 2px solid var(--gray2); overflow: hidden; background: var(--white); }
    .spot-card__img { height: 6px; }
    .spot-card__body { padding: 18px 20px; }
    .spot-card__name { font-weight: 800; font-size: 1rem; color: var(--navy); margin-bottom: 4px; }
    .spot-card__meta { font-size: .78rem; color: var(--muted); margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
    .spot-card__desc { font-size: .86rem; color: var(--muted); line-height: 1.6; margin-bottom: 10px; }
    .spot-card__alert { font-size: .8rem; background: #fff8e6; border: 1px solid #f0d080;
      border-radius: 8px; padding: 7px 10px; color: #7a4800; margin-bottom: 10px; }
    /* Itinerary timeline */
    .itin { list-style: none; }
    .itin li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--gray2); font-size: .88rem; }
    .itin li:last-child { border-bottom: none; }
    .itin__time { font-weight: 700; color: var(--sky); min-width: 70px; flex-shrink: 0; }
    .itin__event { color: var(--text); line-height: 1.5; }
    .itin__event em { color: var(--muted); font-style: normal; }
    /* Other trips grid */
    .other-trips { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 14px; }
    .other-trip { border-radius: 12px; border: 1px solid var(--gray2); padding: 16px 18px; background: var(--white);
      cursor: pointer; transition: border-color .2s, box-shadow .2s; user-select: none; }
    .other-trip:hover { border-color: var(--sky); box-shadow: 0 2px 12px rgba(0,0,0,.07); }
    .other-trip.is-open { border-color: var(--sky); box-shadow: 0 4px 18px rgba(0,0,0,.09); }
    .other-trip__toggle { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
    .other-trip__chevron { font-size: .72rem; color: var(--sky); transition: transform .25s; flex-shrink: 0; margin-top: 3px; }
    .other-trip.is-open .other-trip__chevron { transform: rotate(180deg); }
    .other-trip__name { font-weight: 700; color: var(--navy); font-size: .93rem; margin-bottom: 4px; }
    .other-trip__meta { font-size: .75rem; color: var(--sky); font-weight: 600; margin-bottom: 6px; }
    .other-trip__desc { font-size: .83rem; color: var(--muted); line-height: 1.5; }
    /* Expanded guide */
    .other-trip__guide { display: none; border-top: 1px solid var(--gray2); margin-top: 12px; padding-top: 14px; }
    .other-trip.is-open .other-trip__guide { display: block; }
    .other-trip__logistics { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
    .other-trip__pill { background: var(--gray1); border-radius: 20px; padding: 3px 10px;
      font-size: .75rem; font-weight: 600; color: var(--navy); }
    .other-trip__spots { list-style: none; padding: 0; margin: 0 0 12px; }
    .other-trip__spots li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--gray2); font-size: .82rem; }
    .other-trip__spots li:last-child { border-bottom: none; }
    .other-trip__spot-name { font-weight: 700; color: var(--navy); min-width: 110px; flex-shrink: 0; }
    .other-trip__spot-desc { color: var(--muted); line-height: 1.45; }
    .other-trip__tip { font-size: .8rem; background: #f0f8ff; border-radius: 8px; padding: 8px 12px;
      color: var(--navy); border-left: 3px solid var(--sky); margin-bottom: 12px; line-height: 1.5; }

    /* ────────────────────────────────────────
       FOOTER
    ──────────────────────────────────────── */
    .footer {
      background: var(--navy);
      color: rgba(255,255,255,.65);
      padding: 56px 0 32px;
    }
    .footer__grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 48px;
    }
    @media (max-width: 768px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }
    .footer__brand {
      font-family: 'Playfair Display', serif;
      font-size: 1.6rem;
      color: var(--white);
      font-weight: 800;
      margin-bottom: 12px;
    }
    .footer__brand span { color: var(--gold); }
    .footer__tagline { font-size: .88rem; line-height: 1.6; margin-bottom: 20px; }
    .footer__col-title {
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 16px;
    }
    .footer__links { list-style: none; display: grid; gap: 8px; }
    .footer__links a {
      font-size: .88rem;
      color: rgba(255,255,255,.6);
      transition: color .15s;
    }
    .footer__links a:hover { color: var(--white); }
    .footer__bottom {
      border-top: 1px solid rgba(255,255,255,.1);
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      font-size: .82rem;
    }
    .footer__disclaimer { max-width: 600px; font-size: .8rem; opacity: .5; }

    /* ────────────────────────────────────────
       RESPONSIVE TWEAKS
    ──────────────────────────────────────── */
    @media (max-width: 480px) {
      .section { padding: 48px 0; }
      .convergence { padding: 28px 20px; }
      .fifa-hero { padding: 24px 20px; }
      .cruise-banner { padding: 24px 20px; }
      .cruise-banner::after { display: none; }
      .stat-card__number { font-size: 1.8rem; }
      .map-filter-bar { flex-wrap: wrap; }
      #seattle-map { height: 420px; }
      .map-below { grid-template-columns: 1fr 1fr; }
      .map-legend-card { grid-column: 1 / -1; grid-row: auto; }
    }

    /* ────────────────────────────────────────
       WEATHER WIDGET
    ──────────────────────────────────────── */
    .weather-loading {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--muted);
      font-size: .95rem;
      padding: 32px 0;
    }
    .weather-spinner {
      width: 24px; height: 24px;
      border: 3px solid var(--gray2);
      border-top-color: var(--sky);
      border-radius: 50%;
      animation: spin .8s linear infinite;
      flex-shrink: 0;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .weather-error {
      background: #fff3d6;
      border: 1px solid #f0d080;
      border-radius: 12px;
      padding: 20px 24px;
      color: #7a4f00;
      font-size: .92rem;
    }
    /* Current conditions card */
    .weather-current {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0 32px;
      align-items: center;
      background: linear-gradient(135deg, #0a2540 0%, #1a4a7a 100%);
      border-radius: 20px;
      padding: 32px 36px;
      color: var(--white);
      margin-bottom: 24px;
    }
    @media (max-width: 600px) {
      .weather-current { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
    }
    .weather-main {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .weather-emoji { font-size: 5rem; line-height: 1; }
    .weather-temp  { font-size: 4.5rem; font-weight: 800; line-height: 1; }
    .weather-temp sup { font-size: 1.8rem; vertical-align: super; font-weight: 600; }
    .weather-desc  { font-size: 1.3rem; font-weight: 600; margin-top: 4px; opacity: .9; }
    .weather-location { font-size: .82rem; opacity: .5; margin-top: 2px; }
    .weather-details {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .weather-detail-item {
      background: rgba(255,255,255,.08);
      border-radius: 12px;
      padding: 14px 16px;
      border: 1px solid rgba(255,255,255,.1);
    }
    .weather-detail-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .55; margin-bottom: 4px; }
    .weather-detail-value { font-size: 1.2rem; font-weight: 700; }
    .weather-detail-sub   { font-size: .78rem; opacity: .6; margin-top: 2px; }
    /* Context cards */
    .weather-context {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
      margin-bottom: 28px;
    }
    .weather-ctx-card {
      border-radius: 12px;
      padding: 16px 18px;
      border: 1px solid var(--gray2);
      background: var(--white);
    }
    .weather-ctx-title { font-weight: 700; font-size: .9rem; color: var(--navy); margin-bottom: 6px; }
    .weather-ctx-body  { font-size: .85rem; color: var(--muted); line-height: 1.6; }
    /* 7-day forecast */
    .weather-forecast-title {
      font-size: .78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted);
      margin-bottom: 14px;
    }
    .weather-forecast {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 10px;
    }
    @media (max-width: 700px) {
      .weather-forecast { grid-template-columns: repeat(4, 1fr); }
    }
    @media (max-width: 420px) {
      .weather-forecast { grid-template-columns: repeat(3, 1fr); }
    }
    .forecast-day {
      background: var(--gray1);
      border: 1px solid var(--gray2);
      border-radius: 12px;
      padding: 12px 8px;
      text-align: center;
      transition: background .2s;
    }
    .forecast-day:hover { background: var(--gray2); }
    .forecast-day__name  { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
    .forecast-day__emoji { font-size: 1.6rem; margin-bottom: 6px; }
    .forecast-day__hi    { font-size: .95rem; font-weight: 700; color: var(--navy); }
    .forecast-day__lo    { font-size: .8rem; color: var(--muted); }
    .forecast-day__rain  { font-size: .72rem; color: var(--sky); margin-top: 4px; font-weight: 600; }
    .forecast-day--today { background: var(--navy); border-color: var(--navy); }
    .forecast-day--today .forecast-day__name,
    .forecast-day--today .forecast-day__hi,
    .forecast-day--today .forecast-day__lo { color: var(--white); }
    .forecast-day--today .forecast-day__rain { color: #7fd4f8; }
    .weather-updated { font-size: .75rem; color: var(--muted); margin-top: 16px; }

    /* ────────────────────────────────────────
       TRANSIT MAP
    ──────────────────────────────────────── */
    .map-wrapper {
      display: block;
    }
    .map-below {
      display: grid;
      grid-template-columns: 200px 1fr 1fr;
      gap: 12px;
      margin-top: 16px;
    }
    .map-legend-card {
      grid-row: 1 / 3;
    }
    .map-filter-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      flex-wrap: nowrap;
    }
    .map-filter-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: 20px;
      font-size: .82rem;
      font-weight: 600;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all .2s;
      white-space: nowrap;
      background: var(--gray2);
      color: var(--navy);
    }
    .map-filter-btn.active    { border-color: currentColor; background: var(--white); }
    .map-filter-btn--rail     { color: #1a6fc4; }
    .map-filter-btn--cruise   { color: #0d7a5c; }
    .map-filter-btn--fifa     { color: #8a1a1a; }
    .map-filter-btn--ferry    { color: #0d6b7a; }
    .map-filter-btn--all      { color: var(--navy); }
    .map-filter-btn--parking  { color: #5a1a8a; }

    /* Parking reference table */
    .parking-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 28px; }
    .parking-zone {
      border-radius: 14px; border: 1.5px solid var(--gray2); overflow: hidden;
    }
    .parking-zone__header {
      padding: 12px 18px; color: var(--white); font-weight: 700; font-size: .9rem;
      display: flex; align-items: center; gap: 8px;
    }
    .parking-zone__header--lumen  { background: #8a1a1a; }
    .parking-zone__header--pier91 { background: #0a3d20; }
    .parking-zone__header--pier66 { background: #0a2a4a; }
    .parking-lot { padding: 0 18px; }
    .parking-lot-row {
      display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
      padding: 10px 0; border-bottom: 1px solid var(--gray2); font-size: .84rem;
    }
    .parking-lot-row:last-child { border-bottom: none; }
    .parking-lot-name { font-weight: 600; color: var(--navy); line-height: 1.3; }
    .parking-lot-walk { font-size: .75rem; color: var(--muted); }
    .parking-rate {
      font-weight: 700; font-size: .82rem; border-radius: 8px;
      padding: 3px 8px; white-space: nowrap; text-align: center;
    }
    .parking-rate--normal  { background: #e8f5ee; color: #1a5a2e; }
    .parking-rate--matchday { background: #fff0f0; color: #8a1a1a; }
    .parking-rate--cruise  { background: #e4eeff; color: #1a3a8a; }
    .parking-zone__note {
      font-size: .79rem; color: var(--muted); padding: 10px 18px 14px;
      background: var(--gray1); border-top: 1px solid var(--gray2); line-height: 1.5;
    }
    #seattle-map {
      width: 100%;
      height: 680px;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow);
      z-index: 0;
    }
    .map-legend-card {
      background: var(--white);
      border: 1px solid var(--gray2);
      border-radius: 12px;
      padding: 16px;
    }
    .map-legend-card h4 {
      font-size: .8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--navy);
      margin-bottom: 12px;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      font-size: .84rem;
      color: var(--muted);
    }
    .legend-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .legend-line {
      width: 20px;
      height: 4px;
      border-radius: 2px;
      flex-shrink: 0;
    }
    .map-tip-card {
      background: #fff8e6;
      border: 1px solid #f0d080;
      border-radius: 12px;
      padding: 14px;
      font-size: .82rem;
      color: #5a3e00;
      line-height: 1.6;
    }
    .map-tip-card strong { display: block; margin-bottom: 4px; font-size: .84rem; }
    /* Custom Leaflet marker styles */
    .map-marker-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 3px solid white;
      box-shadow: 0 2px 8px rgba(0,0,0,.35);
      font-size: 1rem;
      line-height: 1;
    }

    /* ────────────────────────────────────────
       GOOGLE TRANSLATE — hide default chrome
    ──────────────────────────────────────── */
    .goog-te-banner-frame,
    .goog-te-banner-frame.skiptranslate,
    #goog-gt-tt,
    .goog-tooltip,
    .goog-tooltip:hover { display: none !important; }
    body { top: 0 !important; }
    .goog-te-combo { display: none !important; }
    .skiptranslate > iframe { display: none !important; }

    /* ────────────────────────────────────────
       LANGUAGE SWITCHER
    ──────────────────────────────────────── */
    .lang-switcher {
      position: relative;
    }
    .lang-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.2);
      color: var(--white);
      padding: 6px 12px;
      border-radius: 20px;
      font-size: .82rem;
      font-weight: 600;
      cursor: pointer;
      transition: background .2s;
      white-space: nowrap;
    }
    .lang-btn:hover { background: rgba(255,255,255,.18); }
    .lang-btn__flag { font-size: 1rem; }
    .lang-btn__arrow {
      font-size: .6rem;
      opacity: .7;
      transition: transform .2s;
    }
    .lang-switcher.open .lang-btn__arrow { transform: rotate(180deg); }
    .lang-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: var(--white);
      border-radius: 14px;
      box-shadow: 0 8px 32px rgba(13,33,55,.22);
      min-width: 200px;
      overflow: hidden;
      z-index: 200;
      border: 1px solid var(--gray2);
    }
    .lang-switcher.open .lang-dropdown { display: block; }
    .lang-dropdown__header {
      padding: 10px 16px;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      border-bottom: 1px solid var(--gray2);
      background: var(--gray1);
    }
    .lang-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      cursor: pointer;
      transition: background .15s;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      font-family: 'Inter', sans-serif;
    }
    .lang-option:hover { background: var(--gray1); }
    .lang-option.active { background: #eef4ff; }
    .lang-option__flag { font-size: 1.2rem; flex-shrink: 0; }
    .lang-option__name { font-size: .88rem; font-weight: 600; color: var(--navy); }
    .lang-option__native { font-size: .78rem; color: var(--muted); }
    .lang-option__check { margin-left: auto; color: var(--sky); font-size: .9rem; opacity: 0; }
    .lang-option.active .lang-option__check { opacity: 1; }

    /* ────────────────────────────────────────
       BUSINESS DIRECTORY
    ──────────────────────────────────────── */
    .dir-controls {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 28px;
    }
    .dir-search-wrap {
      position: relative;
    }
    .dir-search {
      width: 100%;
      padding: 13px 18px 13px 44px;
      border: 2px solid var(--gray2);
      border-radius: 12px;
      font-size: .95rem;
      font-family: 'Inter', sans-serif;
      color: var(--text);
      background: var(--white);
      transition: border-color .2s, box-shadow .2s;
      outline: none;
    }
    .dir-search:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(46,127,193,.12); }
    .dir-search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.1rem;
      pointer-events: none;
    }
    .dir-filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .dir-filter {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: .82rem;
      font-weight: 600;
      cursor: pointer;
      border: 2px solid var(--gray2);
      background: var(--white);
      color: var(--muted);
      transition: all .18s;
      font-family: 'Inter', sans-serif;
    }
    .dir-filter:hover { border-color: var(--sky); color: var(--sky); }
    .dir-filter.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
    .dir-filter-sep {
      width: 1px;
      background: var(--gray2);
      align-self: stretch;
      margin: 0 4px;
    }
    /* Featured section */
    .dir-featured-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #7a4f00;
      margin-bottom: 14px;
    }
    .dir-featured-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: #f0d080;
    }
    .dir-featured-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 16px;
      margin-bottom: 32px;
    }
    /* Regular grid */
    .dir-grid-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 14px;
    }
    .dir-grid-label::after { content: ''; flex: 1; height: 1px; background: var(--gray2); }
    .dir-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 16px;
    }
    /* Business card */
    .biz-card {
      background: var(--white);
      border: 1px solid var(--gray2);
      border-radius: 14px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: box-shadow .2s, transform .2s;
      position: relative;
    }
    .biz-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
    .biz-card--featured {
      border-color: #e8c040;
      background: linear-gradient(135deg, #fffdf0 0%, #fff8d6 100%);
      box-shadow: 0 2px 12px rgba(232,163,32,.15);
    }
    .biz-card--featured:hover { box-shadow: 0 6px 28px rgba(232,163,32,.25); }
    .biz-featured-badge {
      position: absolute;
      top: -1px; right: 16px;
      background: var(--gold);
      color: var(--navy);
      font-size: .65rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 0 0 8px 8px;
    }
    .biz-card__header {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    .biz-card__emoji {
      font-size: 1.8rem;
      line-height: 1;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .biz-card__name {
      font-size: 1rem;
      font-weight: 700;
      color: var(--navy);
      line-height: 1.3;
    }
    .biz-card__zone {
      font-size: .72rem;
      font-weight: 600;
      color: var(--muted);
      margin-top: 2px;
    }
    .biz-card__desc {
      font-size: .87rem;
      color: var(--muted);
      line-height: 1.6;
    }
    .biz-card__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .biz-tag {
      font-size: .7rem;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 10px;
      background: var(--gray2);
      color: var(--blue);
    }
    .biz-card__footer {
      display: flex;
      gap: 8px;
      margin-top: auto;
      padding-top: 8px;
      border-top: 1px solid var(--gray2);
    }
    .biz-card--featured .biz-card__footer { border-top-color: #e8c040; }
    .biz-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: .78rem;
      font-weight: 600;
      color: var(--sky);
      padding: 5px 10px;
      border-radius: 6px;
      border: 1px solid var(--gray2);
      background: var(--white);
      transition: background .15s, border-color .15s;
    }
    .biz-link:hover { background: var(--gray1); border-color: var(--sky); }
    .biz-card--featured .biz-link { border-color: #e8c040; background: rgba(255,255,255,.7); }
    /* Empty state */
    .dir-empty {
      grid-column: 1 / -1;
      text-align: center;
      padding: 48px 24px;
      color: var(--muted);
    }
    .dir-empty__icon { font-size: 3rem; margin-bottom: 12px; }
    .dir-empty__text { font-size: .95rem; }
    /* Submit CTA */
    .dir-submit-cta {
      margin-top: 36px;
      background: linear-gradient(135deg, var(--navy) 0%, #1a4a7a 100%);
      border-radius: 16px;
      padding: 28px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
    }
    .dir-submit-cta__text h3 { font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
    .dir-submit-cta__text p  { font-size: .88rem; color: rgba(255,255,255,.65); }
    .dir-count {
      font-size: .82rem;
      color: var(--muted);
      margin-bottom: 20px;
    }
    .dir-count span { font-weight: 700; color: var(--navy); }

    /* ────────────────────────────────────────
       COUNTDOWN TIMER
    ──────────────────────────────────────── */
    .countdown-section {
      background: linear-gradient(135deg, #05111f 0%, #0a2540 60%, #0d3d6b 100%);
      padding: 48px 0;
      position: relative;
      overflow: hidden;
    }
    .countdown-section::before {
      content: '⚽';
      position: absolute;
      font-size: 18rem;
      right: -3rem;
      top: 50%;
      transform: translateY(-50%);
      opacity: .04;
      line-height: 1;
      pointer-events: none;
    }
    .countdown-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
    }
    .countdown-eyebrow {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 6px;
    }
    .countdown-title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.4rem, 3vw, 2rem);
      color: var(--white);
      margin-bottom: 4px;
    }
    .countdown-subtitle {
      font-size: .85rem;
      color: rgba(255,255,255,.45);
      margin-bottom: 32px;
    }
    .countdown-units {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      flex-wrap: wrap;
      justify-content: center;
    }
    .countdown-unit {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 100px;
    }
    .countdown-box {
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      width: 100px;
      height: 96px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(4px);
    }
    .countdown-box::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 1px;
      background: rgba(255,255,255,.08);
    }
    .countdown-num {
      font-size: 2.8rem;
      font-weight: 800;
      color: var(--white);
      line-height: 1;
      font-variant-numeric: tabular-nums;
      letter-spacing: -.02em;
      transition: transform .15s ease;
    }
    .countdown-num.tick {
      transform: scale(1.08);
      color: var(--gold);
    }
    .countdown-label {
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: rgba(255,255,255,.45);
      margin-top: 10px;
    }
    .countdown-sep {
      font-size: 2.4rem;
      font-weight: 800;
      color: rgba(255,255,255,.2);
      margin-top: 28px;
      line-height: 1;
    }
    .countdown-cta {
      margin-top: 28px;
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: center;
    }
    .countdown-note {
      font-size: .78rem;
      color: rgba(255,255,255,.35);
      margin-top: 20px;
    }
    .countdown-done {
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--gold);
    }
    @media (max-width: 480px) {
      .countdown-unit { min-width: 72px; }
      .countdown-box  { width: 72px; height: 72px; border-radius: 12px; }
      .countdown-num  { font-size: 2rem; }
      .countdown-sep  { font-size: 1.8rem; margin-top: 18px; }
      .countdown-units { gap: 8px; }
    }