*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --blue:     #1a73e8;
      --blue-lt:  #e8f0fe;
      --blue-dk:  #1557b0;
      --teal:     #1a73e8;
      --green:    #137333;
      --green-dk: #0d5228;
      --amber:    #b45309;
      --amber-lt: #fef3c7;
      --purple:   #6200ea;
      --purple-dk:#4a00b4;
      --red:      #c5221f;
      --bg:       #ffffff;
      --card:     #ffffff;
      --text:     #202124;
      --muted:    #5f6368;
      --border:   #e8eaed;
      --r:        12px;
    }

    html { scroll-behavior: smooth; }
    .skip-link {
      position: absolute; left: -9999px; top: 0; z-index: 300;
      background: var(--blue); color: #fff; padding: 10px 18px;
      border-radius: 0 0 8px 0; font-size: 14px; text-decoration: none;
    }
    .skip-link:focus { left: 0; }
    body {
      font-family: 'Roboto', 'Google Sans', system-ui, -apple-system, sans-serif;
      background: var(--bg); color: var(--text);
      line-height: 1.65; -webkit-font-smoothing: antialiased;
    }

    /* ── LINKEDIN TOP BAR ─────────────────────────────────── */
    .li-top-bar {
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
      padding: 10px 24px;
      display: flex; align-items: center; justify-content: center;
      gap: 14px; flex-wrap: wrap;
      position: sticky; top: 0; z-index: 100;
    }
    .li-top-bar p {
      font-size: 13px; color: var(--muted); font-weight: 400;
    }
    .li-top-bar p strong { color: var(--text); font-weight: 500; }
    .li-top-btn {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--blue); color: #fff;
      padding: 6px 16px; border-radius: 20px;
      font-size: 12.5px; font-weight: 500;
      text-decoration: none; transition: all 0.18s;
      white-space: nowrap;
    }
    .li-top-btn:hover { background: var(--blue-dk); }

    /* ── HERO ─────────────────────────────────────────────── */
    .hero {
      background: linear-gradient(160deg, #ffffff 0%, #f8f9fa 100%);
      color: var(--text);
      padding: 0;
      position: relative; overflow: hidden;
      border-bottom: 1px solid var(--border);
      min-height: 88vh; display: flex; align-items: center;
    }
    .hero::before { display: none; }
    .hero::after { display: none; }

    .hero-inner {
      position: relative; z-index: 2;
      max-width: 1100px; margin: 0 auto; padding: 60px 28px;
      display: grid; grid-template-columns: 1fr 360px;
      gap: 64px; align-items: start; width: 100%;
    }
    @media (max-width: 900px) {
      .hero-cta-panel { display: none; }
      .hero-inner { grid-template-columns: 1fr; }
    }
    @media (max-width: 680px) {
      .hero-inner { gap: 32px; padding: 40px 28px; }
    }
    .hero-photo { flex-shrink: 0; }

    /* ── HERO CTA PANEL ──────────────────────────────────── */
    .hero-cta-panel {
      display: flex; flex-direction: column; align-items: stretch;
      gap: 16px; padding: 32px; background: #f8f9fa;
      border-radius: 20px; border: 1px solid var(--border);
      position: sticky; top: 80px;
    }
    .hero-cta-title { font-family: 'Google Sans', sans-serif; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
    .hero-cta-btn-primary {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      background: var(--blue); color: #fff; border: none; cursor: pointer;
      padding: 16px 24px; border-radius: 12px; font-size: 15px; font-weight: 600;
      font-family: 'Google Sans', sans-serif; text-decoration: none; transition: background 0.18s;
    }
    .hero-cta-btn-primary:hover { background: var(--blue-dk); }
    .hero-cta-btn-secondary {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      background: #fff; color: var(--text); border: 1.5px solid var(--border);
      padding: 14px 24px; border-radius: 12px; font-size: 14px; font-weight: 500;
      font-family: 'Google Sans', sans-serif; text-decoration: none; cursor: pointer; transition: all 0.18s;
    }
    .hero-cta-btn-secondary:hover { border-color: var(--blue); color: var(--blue); }
    .hero-cta-divider { height: 1px; background: var(--border); margin: 4px 0; }
    .hero-cta-links { display: flex; flex-direction: column; gap: 10px; }
    .hero-cta-link {
      display: flex; align-items: center; gap: 10px; padding: 10px 12px;
      border-radius: 8px; text-decoration: none; color: var(--text);
      font-size: 13px; font-weight: 500; transition: background 0.15s;
      border: 1px solid var(--border);
    }
    .hero-cta-link:hover { background: var(--blue-lt); border-color: var(--blue); }
    .hero-cta-link img { height: 20px; width: auto; border-radius: 3px; }

    .avatar-ring {
      position: relative; display: inline-block; margin-bottom: 0;
    }
    .avatar-ring::before { display: none; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .avatar {
      width: 220px; height: 220px; border-radius: 50%;
      border: 3px solid #fff; object-fit: cover;
      display: block; position: relative; z-index: 1;
      box-shadow: 0 8px 40px rgba(0,0,0,0.12), 0 0 0 1px var(--border);
    }
    .avatar-fb {
      width: 200px; height: 200px; border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--blue-lt);
      display: none; align-items: center; justify-content: center;
      font-size: 64px; font-weight: 700; color: var(--blue);
      position: relative; z-index: 1;
    }

    .hero h1 {
      font-family: 'Google Sans', 'Roboto', sans-serif;
      font-size: clamp(44px, 6vw, 76px); font-weight: 700;
      letter-spacing: -2px; line-height: 0.97;
      color: var(--text);
      margin-bottom: 18px;
    }
    .hero .tagline {
      font-size: clamp(14px, 1.8vw, 16px); color: var(--muted);
      margin-bottom: 16px; font-weight: 400; line-height: 1.7;
    }
    .hero-kicker {
      font-size: 11px; font-weight: 500; letter-spacing: 2px;
      text-transform: uppercase; color: var(--blue);
      margin-bottom: 16px;
    }
    .hero .fpill {
      display: inline-flex; align-items: center; gap: 6px;
      background: #f8f9fa; border: 1px solid var(--border);
      border-radius: 20px; padding: 4px 14px;
      font-size: 12.5px; color: var(--muted); margin-bottom: 28px;
    }
    .fpill .live { width: 6px; height: 6px; border-radius: 50%; background: #34a853; }

    .hero-links { display: flex; gap: 8px; flex-wrap: wrap; }
    .btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 9px 20px; border-radius: 100px;
      font-size: 13px; font-weight: 500;
      text-decoration: none; transition: all 0.18s;
    }
    .btn-white  { background: var(--blue); color: #fff; }
    .btn-white:hover { background: var(--blue-dk); box-shadow: 0 2px 8px rgba(26,115,232,0.3); }
    .btn-ghost  { background: transparent; color: var(--text); border: 1.5px solid var(--border); }
    .btn-ghost:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-lt); }
    .btn-green  { background: transparent; color: var(--green); border: 1.5px solid var(--border); }
    .btn-green:hover  { border-color: var(--green); background: #e6f4ea; }

    /* ── AWARD HERO — Cinematic full-bleed image section ─── */
    .award-hero { position: relative; width: 100%; background: #000; overflow: hidden; }
    .award-hero-img {
      width: 100%; height: 580px;
      object-fit: cover; object-position: center 18%;
      display: block; opacity: 0.82;
    }
    @media (max-width: 700px) { .award-hero-img { height: 340px; } }

    .award-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(
        to top,
        rgba(2, 5, 20, 0.97) 0%,
        rgba(2, 5, 20, 0.65) 38%,
        rgba(2, 5, 20, 0.15) 72%,
        transparent 100%
      );
      display: flex; flex-direction: column;
      justify-content: flex-end;
      padding: 0 52px 46px;
    }
    @media (max-width: 700px) { .award-overlay { padding: 0 22px 28px; } }

    .aw-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      background: #fbbf24; color: #1a0800;
      font-size: 10.5px; font-weight: 900;
      letter-spacing: 2.5px; text-transform: uppercase;
      padding: 5px 15px; border-radius: 24px;
      margin-bottom: 14px; width: fit-content;
    }
    .aw-headline {
      font-size: clamp(26px, 5vw, 62px);
      font-weight: 900; color: #fff;
      letter-spacing: -2.5px; line-height: 1.0;
      margin-bottom: 12px;
    }
    .aw-sub {
      font-size: clamp(13px, 1.6vw, 16px);
      color: rgba(255,255,255,0.7);
      max-width: 580px; line-height: 1.65;
      margin-bottom: 20px; font-weight: 400;
    }
    .aw-stats {
      display: flex; gap: 28px; flex-wrap: wrap;
    }
    .aw-stat .aw-n {
      font-size: 26px; font-weight: 900;
      color: #fbbf24; display: block; letter-spacing: -1px;
    }
    .aw-stat .aw-l {
      font-size: 10px; color: rgba(255,255,255,0.48);
      text-transform: uppercase; letter-spacing: 1.5px;
      font-weight: 500;
    }
    .award-caption {
      background: #000; padding: 11px 52px;
      font-size: 11.5px; color: rgba(255,255,255,0.35);
      font-style: italic; letter-spacing: 0.3px;
    }
    @media (max-width: 700px) { .award-caption { padding: 9px 22px; } }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .aw-eyebrow { animation: fadeUp 0.7s ease 0.15s both; }
    .aw-headline { animation: fadeUp 0.7s ease 0.28s both; }
    .aw-sub      { animation: fadeUp 0.7s ease 0.4s  both; }
    .aw-stats    { animation: fadeUp 0.7s ease 0.52s both; }

    /* ── TICKER ────────────────────────────────────────────── */
    .ticker-wrap {
      background: #f8f9fa;
      border-bottom: 1px solid var(--border);
      height: 40px; overflow: hidden; display: flex; align-items: center;
    }
    .ticker-inner {
      display: flex; animation: tick 32s linear infinite; white-space: nowrap;
    }
    @keyframes tick { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    .tick-item {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 0 26px; font-size: 12px; font-weight: 500;
      color: var(--muted); flex-shrink: 0;
    }
    .tick-sep { opacity: 0.3; font-size: 14px; }

    /* ── LAYOUT ─────────────────────────────────────────────── */
    main { max-width: 980px; margin: 0 auto; padding: 64px 28px 88px; }

    .sl {
      text-transform: uppercase; font-size: 11px; font-weight: 500;
      letter-spacing: 2px; color: var(--blue); margin-bottom: 8px;
      display: block;
    }
    /* .st defined below */
    .ss { font-size: 15px; color: var(--muted); max-width: 720px;
          margin-bottom: 24px; line-height: 1.75; }
    .divider { height: 1px; background: var(--border); margin: 52px 0; }

    /* ── STAT STRIP ─────────────────────────────────────────── */
    .stat-strip {
      display: flex; flex-wrap: wrap; gap: 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: 20px 0; margin: 36px 0;
    }
    .ss-item {
      padding: 0 28px 0 0; margin-right: 28px;
      border-right: 1px solid var(--border);
      line-height: 1.3;
    }
    .ss-item:last-child { border-right: none; padding-right: 0; margin-right: 0; }
    @media (max-width: 600px) {
      .ss-item { border-right: none; padding-right: 0; margin-right: 0;
                 flex: 1 1 45%; padding-bottom: 12px; margin-bottom: 12px;
                 border-bottom: 1px solid var(--border); }
      .ss-item:last-child, .ss-item:nth-last-child(2):nth-child(odd) { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
    }
    .ss-n {
      font-family: 'Google Sans', 'Roboto', sans-serif;
      display: block; font-size: 32px; font-weight: 700;
      color: var(--blue); letter-spacing: -0.5px;
    }
    .ss-l { font-size: 12px; color: var(--muted); font-weight: 400; }

    /* ── CARDS ──────────────────────────────────────────────── */
    .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
    @media (max-width: 700px) { .g2, .g3 { grid-template-columns: 1fr; } }
    @media (min-width: 701px) and (max-width: 900px) { .g3 { grid-template-columns: 1fr 1fr; } }

    .card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 16px; padding: 28px;
      transition: box-shadow 0.18s ease-out, transform 0.18s ease-out;
    }
    .card:hover {
      box-shadow: 0 8px 32px rgba(0,0,0,0.08);
      transform: translateY(-3px);
    }
    .card h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; color: var(--text); }
    .card p, .card li { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
    .card ul { padding-left: 17px; }
    .card ul li { margin-bottom: 5px; }

    /* ── LOGO IMG WITHIN CARDS ──────────────────────────────── */
    .card-logo { height: 32px; width: auto; object-fit: contain; margin-bottom: 14px; display: block; }
    .card-logo-sm { height: 24px; width: auto; object-fit: contain; }

    /* ── GRADIENT WAVE TRANSITIONS ──────────────────────────── */
    .wave-transition { display: none; }

    /* ── HIGHLIGHT BLOCKS ───────────────────────────────────── */
    .hl {
      border-radius: 0; padding: 64px 0; color: var(--text);
      position: relative; overflow: hidden;
      background: #f8f9fa;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .hl-inner { max-width: 980px; margin: 0 auto; padding: 0 28px; }
    .hl-purple { background: #f8f9fa; border-left: 4px solid #6200ea; }
    .hl-green  { background: #f8f9fa; border-left: 4px solid #137333; }
    .hl-teal   { background: #f8f9fa; border-left: 4px solid #1a73e8; }
    .hl-amber  { background: #f8f9fa; border-left: 4px solid #b45309; }

    .hl .sl { color: var(--blue); letter-spacing: 2px; }
    .hl .st { color: var(--text); }
    .hl .ss { color: var(--muted); max-width: 680px; }
    .hl .corner {
      position: absolute; right: 40px; top: 20px;
      font-size: 90px; opacity: 0.04; pointer-events: none;
    }

    /* logo in highlight */
    .hl-logo { height: 36px; width: auto; object-fit: contain; margin-bottom: 18px; display: block; filter: none !important; opacity: 1 !important; }

    /* stats in hl */
    .srow { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 20px; }
    .srow .s .n { font-family: 'Google Sans', 'Roboto', sans-serif; font-size: 34px; font-weight: 700; display: block; letter-spacing: -0.5px; }
    .hl-purple .srow .s .n { color: #6200ea; }
    .hl-green  .srow .s .n { color: #137333; }
    .hl-teal   .srow .s .n { color: var(--blue); }
    .hl-amber  .srow .s .n { color: #b45309; }
    .srow .s .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; }

    /* award box */
    .abox {
      display: flex; align-items: center; gap: 14px;
      background: #fff; border: 1px solid var(--border);
      border-radius: 12px; padding: 16px 20px; margin-top: 18px; max-width: 580px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    }
    .abox .ic { font-size: 30px; }
    .abox .tx { font-size: 13px; color: var(--muted); }
    .abox .tx strong { display: block; font-size: 14px; margin-bottom: 2px; color: var(--text); }
    .hl-purple .abox .tx strong { color: #6200ea; }
    .hl-green  .abox .tx strong { color: #137333; }
    .hl-amber  .abox .tx strong { color: #b45309; }

    /* ── PM PROJECT CARDS ───────────────────────────────────── */
    .pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
    @media (max-width: 680px) { .pm-grid { grid-template-columns: 1fr; } }
    .pm-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--r); padding: 22px;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .pm-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
    .pm-card .pm-tag {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--blue-lt);
      border-radius: 20px; padding: 3px 11px;
      font-size: 11px; font-weight: 500; color: var(--blue);
      text-transform: uppercase; letter-spacing: 1px;
      margin-bottom: 10px;
    }
    .pm-card h4 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
    .pm-card .pm-budget {
      font-family: 'Google Sans', 'Roboto', sans-serif;
      font-size: 28px; font-weight: 700; color: var(--blue);
      display: block; margin-bottom: 8px; letter-spacing: -0.5px;
    }
    .pm-card p { font-size: 13px; color: var(--muted); line-height: 1.65; }
    .pm-card ul { padding-left: 16px; margin-top: 8px; }
    .pm-card ul li { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-bottom: 3px; }

    .pm-total-bar {
      display: flex; align-items: center;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: 22px 0; gap: 32px; flex-wrap: wrap;
      margin-bottom: 26px;
    }
    .pm-total-bar .total-num {
      font-family: 'Google Sans', 'Roboto', sans-serif;
      font-size: 52px; font-weight: 700; color: var(--blue); letter-spacing: -2px;
    }
    .pm-total-bar .total-label { font-size: 14px; color: var(--muted); line-height: 1.5; }
    .pm-total-bar .total-label strong { display: block; font-size: 15px; color: var(--text); }

    .learning-section-title {
      font-size: 11px; font-weight: 500; text-transform: uppercase;
      letter-spacing: 2px; color: var(--muted); margin: 28px 0 12px;
    }
    .learning-section-title:first-of-type { margin-top: 32px; }
    .learning-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
    @media (max-width: 700px) { .learning-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 440px) { .learning-grid { grid-template-columns: 1fr; } }
    .learning-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px; padding: 16px;
      transition: box-shadow 0.18s;
    }
    .learning-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
    .learning-card .lc-icon { font-size: 20px; margin-bottom: 7px; }
    .learning-card .lc-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 5px; line-height: 1.3; }
    .learning-card .lc-text  { font-size: 12px; color: var(--muted); line-height: 1.6; }

    /* chips */
    .chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
    .chip {
      padding: 4px 12px; border-radius: 20px;
      background: #fff; border: 1px solid var(--border);
      font-size: 12px; color: var(--muted); font-weight: 400;
    }

    /* hl buttons */
    .hl-btns { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 22px; }
    .hl-bw {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--blue); color: #fff;
      padding: 9px 20px; border-radius: 100px;
      font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.18s;
    }
    .hl-purple .hl-bw { background: #6200ea; }
    .hl-green  .hl-bw { background: #137333; }
    .hl-amber  .hl-bw { background: #b45309; }
    .hl-bw:hover { opacity: 0.9; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
    .hl-bo {
      display: inline-flex; align-items: center; gap: 7px;
      background: transparent; color: var(--text);
      border: 1.5px solid var(--border);
      padding: 9px 20px; border-radius: 100px;
      font-size: 13px; font-weight: 500; text-decoration: none; transition: all 0.18s;
    }
    .hl-bo:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-lt); }

    /* ── PARTNER LOGO STRIP ─────────────────────────────────── */
    .logo-strip {
      display: flex; align-items: center; gap: 20px;
      flex-wrap: wrap; margin-top: 22px;
    }
    .logo-strip-label {
      font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
      color: var(--muted); font-weight: 500; flex-basis: 100%; margin-bottom: 4px;
    }
    .logo-strip img {
      height: 28px; width: auto; object-fit: contain;
      filter: grayscale(30%); opacity: 0.75;
      transition: opacity 0.18s, filter 0.18s;
    }
    .logo-strip img:hover { opacity: 1; filter: grayscale(0); }

    /* partner logos on white bg */
    .logo-strip-light { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 16px; }
    .logo-strip-light .lsl {
      font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
      color: var(--muted); font-weight: 700; flex-basis: 100%; margin-bottom: 4px;
    }
    .logo-strip-light img {
      height: 28px; width: auto; object-fit: contain; opacity: 0.7; filter: grayscale(20%);
      transition: opacity 0.18s, filter 0.18s;
    }
    .logo-strip-light img:hover { opacity: 1; filter: grayscale(0); }

    /* ── TIMELINE ───────────────────────────────────────────── */
    .timeline { margin-top: 28px; position: relative; padding-left: 32px; }
    .timeline::before {
      content: ''; position: absolute; left: 10px; top: 6px; bottom: 6px;
      width: 1px;
      background: var(--border);
      border-radius: 1px;
    }
    .tli { position: relative; margin-bottom: 26px; }
    .tli:last-child { margin-bottom: 0; }
    .dot {
      position: absolute; left: -26px; top: 4px;
      width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #fff;
    }
    .d-b { background: var(--blue);   box-shadow: 0 0 0 2.5px var(--blue); }
    .d-g { background: var(--green);  box-shadow: 0 0 0 2.5px var(--green); }
    .d-a { background: var(--amber);  box-shadow: 0 0 0 2.5px var(--amber); }
    .d-t { background: var(--teal);   box-shadow: 0 0 0 2.5px var(--teal); }
    .d-p { background: var(--purple); box-shadow: 0 0 0 2.5px var(--purple); }
    .tl-yr  { font-size: 11px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
    .tl-ttl { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 2px; }
    .tl-sub { font-size: 13px; color: var(--muted); line-height: 1.6; }

    /* ── AWARD LIST (editorial timeline) ───────────────────── */
    .award-list { margin-top: 24px; }
    .award-row {
      display: grid; grid-template-columns: 68px 1fr;
      gap: 20px; padding: 16px 0;
      border-bottom: 1px solid var(--border);
      align-items: baseline;
    }
    .award-row:last-child { border-bottom: none; }
    .ar-year {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 13px; font-weight: 800;
      color: var(--blue); letter-spacing: 0.5px; padding-top: 1px;
    }
    .ar-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; line-height: 1.35; }
    .ar-desc  { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

    /* ── TEACHING LIST ──────────────────────────────────────── */
    .teach-list { margin-top: 20px; columns: 2; gap: 32px; }
    @media (max-width: 600px) { .teach-list { columns: 1; } }
    .teach-item {
      break-inside: avoid; margin-bottom: 14px;
      padding-bottom: 14px; border-bottom: 1px solid var(--border);
    }
    .teach-item:last-child { border-bottom: none; }
    .teach-uni { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
    .teach-course { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

    /* ── PUBLICATIONS ───────────────────────────────────────── */
    .pub-list { list-style: none; margin-top: 18px; }
    .pub-item {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 11px; padding: 16px 18px; margin-bottom: 10px;
      display: flex; gap: 13px; align-items: flex-start; transition: border-color 0.18s;
    }
    .pub-item:hover { border-color: var(--blue); }
    .pub-num {
      min-width: 26px; height: 26px; border-radius: 50%;
      background: var(--blue); color: #fff; font-size: 11px; font-weight: 700;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
    }
    .pub-ttl { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; line-height: 1.45; }
    .pub-meta { font-size: 12.5px; color: var(--muted); }
    .pbadge {
      display: inline-block; margin-top: 5px; padding: 2px 9px; border-radius: 20px;
      font-size: 11px; font-weight: 700;
    }
    .pbj { background: #eff6ff; color: var(--blue-dk); }
    .pbc { background: #f5f3ff; color: var(--purple-dk); }

    /* ── PROJECT GRID ───────────────────────────────────────── */
    .proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
    @media (max-width: 700px) { .proj-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 480px) { .proj-grid { grid-template-columns: 1fr; } }
    .proj-card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: 11px; padding: 18px;
      display: flex; flex-direction: column; gap: 6px; transition: all 0.2s;
    }
    .proj-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
    .proj-ico  { font-size: 24px; }
    .proj-name { font-size: 13.5px; font-weight: 800; color: var(--text); }
    .proj-desc { font-size: 12.5px; color: var(--muted); line-height: 1.55; flex: 1; }
    .proj-link { font-size: 12px; font-weight: 700; color: var(--blue); text-decoration: none; margin-top: 4px; }
    .proj-link:hover { text-decoration: underline; }

    /* ── TAGS ───────────────────────────────────────────────── */
    .tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
    .tag { padding: 5px 13px; border-radius: 20px; font-size: 12.5px; font-weight: 600; }
    .tb { background: #eff6ff; color: var(--blue-dk); }
    .tt { background: #ecfeff; color: #0e7490; }
    .tg { background: #f0fdf4; color: #15803d; }
    .tp { background: #f5f3ff; color: var(--purple-dk); }
    .ta { background: #fffbeb; color: #92400e; }
    .ts { background: #f1f5f9; color: #475569; }
    .tr { background: #fef2f2; color: #991b1b; }

    /* ── LINKEDIN BIG CTA ───────────────────────────────────── */
    .li-cta {
      background: #f8f9fa;
      border-top: 1px solid var(--border);
      padding: 80px 24px; text-align: center; position: relative; overflow: hidden;
    }
    .li-cta::before { display: none; }
    .li-cta-inner { position: relative; z-index: 1; }
    .li-icon {
      width: 56px; height: 56px; background: #0a66c2; border-radius: 14px;
      display: inline-flex; align-items: center; justify-content: center;
      margin-bottom: 24px;
    }
    .li-icon svg { width: 32px; height: 32px; fill: #fff; }
    .li-cta h2 {
      font-family: 'Google Sans', 'Roboto', sans-serif;
      font-size: clamp(24px, 4vw, 40px); font-weight: 700; color: var(--text);
      letter-spacing: -0.5px; margin-bottom: 12px;
    }
    .li-cta p { font-size: 15px; color: var(--muted); max-width: 520px; margin: 0 auto 32px; }
    .li-cta-btn {
      display: inline-flex; align-items: center; gap: 10px;
      background: #0a66c2; color: #fff;
      padding: 14px 36px; border-radius: 100px;
      font-size: 15px; font-weight: 500; text-decoration: none;
      transition: all 0.2s;
    }
    @keyframes pulse-li { 0%,100%,50% {} }
    .li-cta-btn:hover { background: #004182; box-shadow: 0 2px 12px rgba(10,102,194,0.3); }
    .li-proof { margin-top: 16px; font-size: 13px; color: var(--muted); }
    .li-proof strong { color: var(--text); font-weight: 500; }

    /* ── DISPLAY FONT for section headings ─────────────────── */
    .st {
      font-family: 'Google Sans', 'Roboto', sans-serif;
      font-size: clamp(24px, 3.5vw, 36px); font-weight: 700; color: var(--text);
      margin-bottom: 10px; letter-spacing: -0.5px; line-height: 1.15;
    }
    .hl .st { color: var(--text); }

    /* ── SLIDE MOTTO ────────────────────────────────────────── */
    .slide-motto {
      display: flex; gap: 6px; align-items: center;
      margin-bottom: 18px;
    }
    .slide-motto span {
      font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
      text-transform: uppercase; color: var(--muted);
    }
    .slide-motto .sm-dot { opacity: 0.3; }

    /* Hero slogan */
    .hero-slogan {
      font-family: 'Google Sans', 'Roboto', sans-serif;
      font-size: clamp(17px, 2.2vw, 22px);
      font-weight: 700; letter-spacing: -0.3px;
      color: var(--text); margin-bottom: 16px;
      border-left: 3px solid var(--blue);
      padding-left: 14px;
    }

    /* Inline logo badge next to text */
    .logo-inline {
      height: 20px; width: auto; vertical-align: middle;
      object-fit: contain; margin-left: 6px;
      border-radius: 4px; position: relative; top: -1px;
      max-width: 90px;
    }
    .logo-inline-lg {
      height: 22px; width: auto; vertical-align: middle;
      object-fit: contain; border-radius: 5px; position: relative; top: -2px;
      max-width: 110px;
    }

    /* ── HERO PRESENTATION BUTTON ──────────────────────────── */
    #hero-pres-btn {
      display: inline-flex; align-items: center; gap: 10px;
      margin-top: 32px;
      background: transparent;
      border: 2px solid var(--border);
      border-radius: 100px;
      padding: 13px 28px;
      font-family: 'Roboto', sans-serif;
      font-size: 15px; font-weight: 500;
      color: var(--text);
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
    }
    #hero-pres-btn:hover {
      border-color: var(--blue); color: var(--blue);
      background: var(--blue-lt);
      box-shadow: 0 4px 20px rgba(26,115,232,0.15);
    }
    .hpb-arrow {
      display: flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--blue); color: #fff;
      flex-shrink: 0;
      transition: transform 0.3s ease, background 0.2s;
    }
    #hero-pres-btn:hover .hpb-arrow { transform: translateY(3px); background: var(--blue-dk); }
    @keyframes bounce-down {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(5px); }
    }
    .hpb-arrow svg { animation: bounce-down 1.8s ease-in-out infinite; }
    #hero-pres-btn:hover .hpb-arrow svg { animation: none; }

    /* ── FOCUS STYLES ───────────────────────────────────────── */
    :focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 3px;
      border-radius: 4px;
    }
    .btn:focus-visible,
    .hl-bw:focus-visible,
    .hl-bo:focus-visible,
    .li-top-btn:focus-visible,
    .li-cta-btn:focus-visible,
    .pres-btn:focus-visible,
    .pres-exit:focus-visible,
    .pres-fab:focus-visible { outline-offset: 2px; }

    /* ── REDUCED MOTION ─────────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
      html { scroll-behavior: auto; }
      .avatar-ring::before { animation: none; }
      .ticker-inner { animation: none; }
    }

    /* ── PRESENTATION MODE & EXECUTIVE SLIDE ARCHITECTURE ───── */
    [id^="slide-"] { scroll-margin-top: 0; }

    /* Lock viewport in presentation mode: true discrete full-screen slide deck
       with zero document scrollbars and zero possibility of mid-slide stops */
    html.pres-mode,
    body.pres-mode {
      overflow: hidden !important;
      height: 100dvh !important;
      background: #040711 !important;
    }

    body.pres-mode .li-top-bar,
    body.pres-mode footer,
    body.pres-mode .divider,
    body.pres-mode .wave-transition,
    body.pres-mode .ticker-wrap,
    body.pres-mode .award-caption,
    body.pres-mode .pres-fab,
    body.pres-mode #section-label {
      display: none !important;
    }

    body.pres-mode [id^="slide-"]:not(.pres-slide-active) {
      display: none !important;
    }

    body.pres-mode [id^="slide-"].pres-slide-active {
      position: fixed !important;
      inset: 0 !important;
      width: 100vw !important;
      height: 100dvh !important;
      min-height: 100dvh !important;
      max-height: 100dvh !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
      box-sizing: border-box !important;
      z-index: 50 !important;
      margin: 0 !important;
    }
    body.pres-mode [id^="slide-"].pres-slide-active::-webkit-scrollbar {
      display: none !important;
    }

    /* Instant rendering in presentation mode — no delayed blanking or stuck opacities */
    body.pres-mode .aw-eyebrow,
    body.pres-mode .aw-headline,
    body.pres-mode .aw-sub,
    body.pres-mode .aw-stats,
    body.pres-mode .slide-brand-logo,
    body.pres-mode .aw-brand-badge,
    body.pres-mode .project-badge-row {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }

    /* Hide "Start Presentation" CTA button on Slide 1 when presentation mode is ALREADY active */
    body.pres-mode .hero-cta-btn-primary,
    body.pres-mode .hero-cta-divider {
      display: none !important;
    }

    /* ── NON-CLIPPING SLIDE CONTAINER ARCHITECTURE (NORMAL + PRES MODE) ──
       Making .award-hero a flex column with .award-hero-img absolute (inset: 0)
       and .award-overlay relative in flow guarantees that:
       1) In Normal Mode on desktop AND mobile, the slide automatically expands
          to fit all text/stats/buttons — top-clipping is mathematically impossible.
       2) In Presentation Mode, the slide fills 100dvh cleanly with safe bottom padding
          for the control bar. */
    .award-hero {
      position: relative !important;
      width: 100%;
      background: #040711;
      overflow: hidden;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-end !important;
      min-height: clamp(640px, 90vh, 880px);
      --slide-accent: #38bdf8;
      --slide-accent-bg: rgba(56, 189, 248, 0.2);
      --slide-accent-border: rgba(56, 189, 248, 0.52);
    }
    @media (max-width: 700px) {
      .award-hero { min-height: 580px; }
    }

    .award-hero-img {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block;
      opacity: 0.86 !important;
      z-index: 0 !important;
      pointer-events: none;
    }

    .award-overlay {
      position: relative !important;
      inset: auto !important;
      z-index: 2 !important;
      width: 100%;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-end !important;
      padding: clamp(56px, 9vh, 110px) clamp(28px, 5.5vw, 84px) clamp(44px, 6vh, 64px) !important;
      background:
        linear-gradient(to right, rgba(3, 7, 18, 0.86) 0%, rgba(3, 7, 18, 0.58) 46%, rgba(3, 7, 18, 0.14) 82%, transparent 100%),
        linear-gradient(to top, rgba(3, 7, 18, 0.96) 0%, rgba(3, 7, 18, 0.76) 34%, rgba(3, 7, 18, 0.18) 72%, transparent 100%) !important;
    }
    @media (max-width: 700px) {
      .award-overlay {
        padding: 72px 22px 36px !important;
        background:
          linear-gradient(to top, rgba(3, 7, 18, 0.97) 0%, rgba(3, 7, 18, 0.84) 48%, rgba(3, 7, 18, 0.32) 82%, rgba(3, 7, 18, 0.12) 100%) !important;
      }
    }

    /* Presentation Mode Safe Area & Projector Layout */
    body.pres-mode .award-hero:not(.cta-hero):not(.dzb-hero) .award-overlay {
      flex: 1 1 auto !important;
      justify-content: flex-start !important;
      padding-left: clamp(32px, 5vw, 84px) !important;
      padding-right: clamp(32px, 5vw, 84px) !important;
      padding-top: clamp(20px, 3.5vh, 44px) !important;
      padding-bottom: calc(var(--pres-bar-h, 56px) + clamp(16px, 2.5vh, 28px)) !important;
    }
    body.pres-mode .award-hero:not(.cta-hero):not(.dzb-hero) .award-overlay > :first-child {
      margin-top: auto !important;
    }

    /* High contrast text guarantees readability on washed-out classroom beamers */
    .aw-headline {
      font-family: 'Google Sans', 'Roboto', sans-serif;
      font-size: clamp(30px, 5.2vw, 66px) !important;
      font-weight: 900 !important;
      line-height: 0.96 !important;
      letter-spacing: -2px !important;
      margin-bottom: 16px !important;
      max-width: 22ch;
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
      background: none !important;
      text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75);
    }
    .aw-sub {
      font-size: clamp(13.5px, 1.55vw, 16.5px) !important;
      color: rgba(255, 255, 255, 0.88) !important;
      max-width: 62ch !important;
      line-height: 1.62 !important;
      margin-bottom: 24px !important;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
    }
    .award-overlay .slide-motto {
      margin-bottom: 12px !important;
    }
    .award-overlay .slide-motto span {
      font-size: 10.5px !important;
      letter-spacing: 3.2px !important;
      color: rgba(255, 255, 255, 0.62) !important;
    }
    .award-overlay .slide-3slogan {
      font-size: clamp(13px, 1.45vw, 15px);
      font-style: italic;
      color: rgba(255, 255, 255, 0.88) !important;
      line-height: 1.65;
      margin-bottom: 16px;
      border-left: 3px solid var(--slide-accent) !important;
      padding-left: 14px;
      max-width: 66ch !important;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
    }

    /* Cohesive per-slide eyebrow & stat styling */
    .aw-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--slide-accent-bg) !important;
      border: 1px solid var(--slide-accent-border) !important;
      color: #ffffff !important;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 6px 15px;
      border-radius: 100px;
      margin-bottom: 16px !important;
      width: fit-content;
    }
    .aw-eyebrow svg {
      color: var(--slide-accent);
      flex-shrink: 0;
    }

    /* Balanced 4-across Grid on Desktop/Beamer, 2x2 Grid on Mobile */
    .aw-stats {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(115px, auto)) !important;
      gap: 28px !important;
      padding-top: 20px !important;
      border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
      width: fit-content;
      max-width: 100%;
    }
    @media (max-width: 680px) {
      .aw-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        width: 100% !important;
        gap: 14px 18px !important;
      }
    }

    .aw-stat {
      padding-left: 14px !important;
      border-left: 2.5px solid var(--slide-accent) !important;
    }
    .aw-stat .aw-n {
      font-family: 'Google Sans', 'Roboto', sans-serif;
      font-size: clamp(26px, 3vw, 42px) !important;
      font-weight: 800 !important;
      letter-spacing: -1.2px !important;
      line-height: 1 !important;
      color: var(--slide-accent) !important;
      -webkit-text-fill-color: var(--slide-accent) !important;
      background: none !important;
      display: block;
    }
    .aw-stat .aw-l {
      font-size: 10px !important;
      color: rgba(255, 255, 255, 0.72) !important;
      letter-spacing: 1.5px !important;
      margin-top: 4px !important;
      font-weight: 600 !important;
      display: block !important;
      text-transform: uppercase;
    }

    /* ── PER-SLIDE BRAND COLOR THEMES & PHOTO FOCAL POINTS ────────── */

    /* Slide 2: Sustainista (Emerald Green) */
    #slide-sustainista {
      --slide-accent: #34d399;
      --slide-accent-bg: rgba(16, 185, 129, 0.24);
      --slide-accent-border: rgba(52, 211, 153, 0.55);
    }
    #slide-sustainista .award-hero-img {
      object-position: 68% 22% !important;
    }
    @media (max-width: 700px) {
      #slide-sustainista .award-hero-img { object-position: 74% 20% !important; }
    }
    #slide-sustainista .award-overlay {
      background:
        linear-gradient(to right, rgba(4, 24, 14, 0.90) 0%, rgba(4, 24, 14, 0.62) 48%, rgba(4, 24, 14, 0.14) 84%, transparent 100%),
        linear-gradient(to top, rgba(4, 24, 14, 0.97) 0%, rgba(4, 24, 14, 0.74) 36%, rgba(4, 24, 14, 0.15) 74%, transparent 100%) !important;
    }

    /* Slide 3: Digitale Zukunftsbildung / Skills-UP! (Teal & Violet) */
    #slide-dzb {
      --slide-accent: #5eead4;
      --slide-accent-bg: rgba(124, 58, 237, 0.34);
      --slide-accent-border: rgba(167, 139, 250, 0.6);
    }

    /* Slide 4: €200.000 Pitch Award (Trophy Gold) */
    #slide-award {
      --slide-accent: #fbbf24;
      --slide-accent-bg: rgba(245, 158, 11, 0.22);
      --slide-accent-border: rgba(251, 191, 36, 0.6);
    }
    #slide-award .award-hero-img {
      object-position: 54% 20% !important;
    }
    @media (max-width: 700px) {
      #slide-award .award-hero-img { object-position: 56% 18% !important; }
    }

    /* Slide 5: Endowed Professor (Executive Sky Blue) */
    #slide-professor {
      --slide-accent: #60a5fa;
      --slide-accent-bg: rgba(37, 99, 235, 0.26);
      --slide-accent-border: rgba(96, 165, 250, 0.58);
    }
    #slide-professor .award-hero-img {
      object-position: 78% 24% !important;
    }
    @media (max-width: 700px) {
      #slide-professor .award-hero-img { object-position: 82% 22% !important; }
    }

    /* Slide 6: Project Leadership (Electric Cyan) */
    #slide-projects {
      --slide-accent: #38bdf8;
      --slide-accent-bg: rgba(14, 165, 233, 0.25);
      --slide-accent-border: rgba(56, 189, 248, 0.55);
    }
    #slide-projects .award-hero-img {
      object-position: 76% 32% !important;
    }
    @media (max-width: 700px) {
      #slide-projects .award-hero-img { object-position: 92% 28% !important; }
    }

    /* Slide 7: Bäckerei Karl Bauer (Warm Artisan Amber) */
    #slide-baeckerei {
      --slide-accent: #fbbf24;
      --slide-accent-bg: rgba(217, 119, 6, 0.26);
      --slide-accent-border: rgba(251, 191, 36, 0.58);
    }
    #slide-baeckerei .award-hero-img {
      object-position: 60% 38% !important;
    }
    #slide-baeckerei .award-overlay {
      background:
        linear-gradient(to right, rgba(20, 10, 4, 0.90) 0%, rgba(20, 10, 4, 0.62) 48%, rgba(20, 10, 4, 0.16) 84%, transparent 100%),
        linear-gradient(to top, rgba(20, 10, 4, 0.97) 0%, rgba(20, 10, 4, 0.74) 36%, rgba(20, 10, 4, 0.18) 74%, transparent 100%) !important;
    }

    /* ── BRAND LOGOS & BADGES ON SLIDES ────────────────────────── */
    .slide-brand-logo {
      display: block;
      align-self: flex-start;
      object-fit: contain;
      filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.55));
    }
    .sustainista-icon-badge {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.18);
      flex-shrink: 0;
    }
    .slide-logo-sustainista {
      height: 30px;
      width: auto;
      margin-bottom: 0;
    }
    .baeckerei-slide-logo {
      height: 62px;
      width: auto;
      margin-bottom: 14px;
      filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.65));
    }
    .aw-brand-badge {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      align-self: flex-start;
    }
    .aw-brand-badge-row {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }
    .mega-badge-img {
      height: 42px;
      width: auto;
      border-radius: 8px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
      background: #ffffff;
      padding: 3px 6px;
    }
    .skillsup-award-badge {
      height: 42px;
      width: auto;
      border-radius: 8px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.22);
    }
    .lbs-badge-img {
      height: 52px;
      width: 52px;
      object-fit: contain;
      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
    }
    .wien-badge-img {
      height: 36px;
      width: auto;
      filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
    }

    /* Slide 6 — High-legibility Project & Partner Pills */
    .project-badge-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 14px;
      align-self: flex-start;
    }
    .proj-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      height: 34px;
      padding: 0 12px;
      border-radius: 8px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.3px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    }
    .proj-pill-light {
      background: rgba(255, 255, 255, 0.96);
      color: #14532d;
      border: 1px solid rgba(255, 255, 255, 0.9);
    }
    .proj-pill-dark {
      background: rgba(15, 23, 42, 0.78);
      color: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(255, 255, 255, 0.22);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      font-weight: 600;
    }
    .proj-pill-logo {
      height: 22px;
      width: auto;
      object-fit: contain;
      display: block;
    }
    .proj-pill-logo-wide {
      height: 19px;
    }

    /* Slide 8 — Interactive LinkedIn QR card */
    .cta-qr-container {
      display: flex;
      justify-content: center;
      margin-bottom: 24px;
    }
    .cta-qr-card {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      padding: 12px 14px 10px;
      border-radius: 14px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.25);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .cta-qr-card:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    }
    .cta-qr-img {
      width: 128px;
      height: 128px;
      display: block;
    }
    .cta-qr-tag {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #0b1220;
      text-transform: uppercase;
    }

    /* Hero Quick Access Logo styling */
    .hcl-logo-img {
      height: 24px !important;
      width: 24px !important;
      object-fit: contain;
      flex-shrink: 0;
    }
    .hcl-logo-rounded {
      border-radius: 5px !important;
      object-fit: contain !important;
      background: #674ea7;
      padding: 2px;
    }

    /* ── PRESENTATION BAR & CONTROLS ──────────────────────────── */
    #pres-progress {
      position: fixed; top: 0; left: 0; height: 3px; z-index: 1100;
      background: linear-gradient(90deg, #10b981 0%, #3b82f6 50%, #8b5cf6 100%);
      width: 0%; transition: width 0.25s ease-out;
      pointer-events: none;
    }

    .pres-fab {
      position: fixed; bottom: 28px; right: 28px; z-index: 900;
      background: #0f172a; color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.16);
      cursor: pointer; padding: 12px 20px;
      border-radius: 100px;
      font-family: 'Google Sans', 'Roboto', sans-serif;
      font-size: 13.5px; font-weight: 600;
      display: inline-flex; align-items: center; gap: 8px;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
      transition: transform 0.18s ease-out, box-shadow 0.18s, background 0.18s;
      white-space: nowrap;
    }
    .pres-fab:hover {
      background: #1e293b;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.38);
      transform: translateY(-2px);
    }

    .pres-bar {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
      background: rgba(8, 12, 22, 0.94);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-top: 1px solid rgba(255, 255, 255, 0.14);
      padding: 10px 24px;
      display: flex; align-items: center;
      justify-content: space-between; gap: 16px;
      transform: translateY(100%);
      transition: transform 0.22s ease-out;
      color: #ffffff;
      box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
    }
    .pres-bar.pres-active { transform: translateY(0); }

    .pres-nav {
      display: flex; align-items: center; gap: 8px;
    }
    .pres-btn {
      width: 36px; height: 36px; border-radius: 8px;
      background: rgba(255, 255, 255, 0.09);
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: #ffffff; cursor: pointer; font-size: 15px;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.14s, border-color 0.14s, transform 0.14s;
      flex-shrink: 0;
    }
    .pres-btn:hover:not(:disabled) {
      background: rgba(59, 130, 246, 0.28);
      border-color: #60a5fa;
      color: #ffffff;
      transform: translateY(-1px);
    }
    .pres-btn:disabled { opacity: 0.25; cursor: not-allowed; }

    .pres-counter {
      font-family: 'Google Sans', 'Roboto', sans-serif;
      font-size: 16px; font-weight: 700; color: #ffffff;
      letter-spacing: -0.3px; min-width: 52px; text-align: center;
    }
    .pres-counter .pc-total {
      font-size: 12px; font-weight: 400;
      color: rgba(255, 255, 255, 0.5);
    }

    .pres-title {
      font-size: 13px; font-weight: 500;
      color: rgba(255, 255, 255, 0.8);
      flex: 1; text-align: center;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      padding: 0 12px;
    }
    @media (max-width: 640px) { .pres-title { display: none; } }

    .pres-dots {
      display: flex; gap: 6px; align-items: center;
      padding: 0 8px;
    }
    @media (max-width: 768px) { .pres-dots { display: none; } }
    .pres-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: rgba(255, 255, 255, 0.24);
      cursor: pointer; transition: all 0.15s; flex-shrink: 0;
    }
    .pres-dot.active {
      background: #38bdf8; transform: scale(1.4);
      box-shadow: 0 0 8px rgba(56, 189, 248, 0.75);
    }
    .pres-dot:hover { background: rgba(255, 255, 255, 0.65); }

    .pres-actions {
      display: flex; align-items: center; gap: 8px;
    }
    .pres-keys-inline {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.45);
      margin-right: 4px;
      white-space: nowrap;
    }
    @media (max-width: 1020px) { .pres-keys-inline { display: none; } }

    .pres-btn-action,
    .pres-exit {
      background: rgba(255, 255, 255, 0.09);
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: rgba(255, 255, 255, 0.9);
      padding: 6px 12px; border-radius: 7px;
      font-size: 12px; font-weight: 500; cursor: pointer;
      font-family: 'Roboto', sans-serif;
      display: inline-flex; align-items: center; gap: 6px;
      transition: all 0.15s; white-space: nowrap;
      flex-shrink: 0;
    }
    .pres-btn-action:hover,
    .pres-exit:hover {
      background: rgba(255, 255, 255, 0.18);
      border-color: #ffffff;
      color: #ffffff;
    }

    /* ── SECTION LABEL (sticky position indicator) ───────────── */
    #section-label {
      position: fixed; top: 52px; left: 50%; transform: translateX(-50%);
      background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);
      border: 1px solid var(--border); border-radius: 20px;
      padding: 4px 14px; font-size: 11px; font-weight: 600;
      color: var(--muted); letter-spacing: 1px; text-transform: uppercase;
      z-index: 90; opacity: 0; transition: opacity 0.25s;
      pointer-events: none; white-space: nowrap;
    }
    #section-label.visible { opacity: 1; }

    /* ── FOOTER ─────────────────────────────────────────────── */
    footer {
      text-align: center; padding: 36px 24px;
      background: #fff; color: var(--muted); font-size: 12.5px;
      border-top: 1px solid var(--border);
    }
    footer a { color: var(--muted); text-decoration: none; transition: color 0.15s; }
    footer a:hover { color: var(--blue); }
    footer .d { margin: 0 8px; opacity: 0.4; }

    .award-caption {
      background: #020509 !important;
      border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
      padding: 12px clamp(22px, 5.5vw, 84px) !important;
      font-size: 11.5px !important;
      color: rgba(255, 255, 255, 0.42) !important;
      letter-spacing: 0.3px !important;
      font-style: italic;
    }

    /* ══════════════════════════════════════════════════════
       SLIDE 1 — HERO EXECUTIVE REDESIGN
    ══════════════════════════════════════════════════════ */
    .hero {
      background: #ffffff !important;
      border-bottom: 1px solid var(--border);
      min-height: clamp(640px, 90vh, 880px);
    }

    .hero::before {
      content: '' !important;
      display: block !important;
      position: absolute; inset: 0;
      background: url('sustainista-team-viennaup.jpg') 65% center / cover no-repeat;
      opacity: 0.82;
      filter: saturate(1.25) contrast(1.05);
      transition: opacity 0.6s ease-out;
      z-index: 0;
    }

    /* Directional scrim keeps the left identity + role cards crisp while showing the ViennaUP team photo on the right */
    .hero::after {
      content: '' !important;
      display: block !important;
      position: absolute; inset: 0;
      pointer-events: none;
      background:
        linear-gradient(to right,
          rgba(255, 255, 255, 0.97) 0%,
          rgba(255, 255, 255, 0.93) 44%,
          rgba(255, 255, 255, 0.52) 76%,
          rgba(255, 255, 255, 0.22) 100%),
        linear-gradient(to bottom,
          rgba(255, 255, 255, 0.92) 0%,
          rgba(255, 255, 255, 0) 18%,
          rgba(255, 255, 255, 0) 82%,
          rgba(255, 255, 255, 0.95) 100%);
      z-index: 1;
    }
    @media (max-width: 900px) {
      .hero::after {
        background:
          linear-gradient(to bottom,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.91) 65%,
            rgba(255, 255, 255, 0.96) 100%);
      }
    }

    .hero-blob {
      position: absolute; border-radius: 50%; pointer-events: none; z-index: 1;
    }
    .hero-blob-1 {
      width: 320px; height: 320px;
      background: radial-gradient(ellipse, rgba(22,163,74,0.14) 0%, transparent 68%);
      bottom: -70px; left: -50px; filter: blur(55px);
    }
    .hero-blob-2 {
      width: 260px; height: 260px;
      background: radial-gradient(ellipse, rgba(124,58,237,0.12) 0%, transparent 68%);
      top: -40px; left: 200px; filter: blur(48px);
    }
    .hero-blob-3 {
      width: 180px; height: 180px;
      background: radial-gradient(ellipse, rgba(26,115,232,0.10) 0%, transparent 68%);
      top: 55%; left: 36%; filter: blur(40px);
    }
    .hero-inner {
      position: relative;
      z-index: 2;
      max-width: 1160px;
      margin: 0 auto;
      padding: 52px clamp(24px, 4.5vw, 64px);
      display: grid;
      grid-template-columns: 1fr 330px;
      gap: 44px;
      align-items: center;
      width: 100%;
    }
    @media (max-width: 920px) {
      .hero-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 36px 22px;
      }
      /* In presentation mode on narrow screens, hide the side panel so Slide 1 fits in 100dvh */
      body.pres-mode .hero-cta-panel {
        display: none !important;
      }
    }

    .hero-header-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2.2px;
      text-transform: uppercase;
      color: var(--blue);
      background: rgba(26, 115, 232, 0.08);
      border: 1px solid rgba(26, 115, 232, 0.2);
      padding: 4px 12px;
      border-radius: 100px;
      margin-bottom: 14px;
    }

    .hero-identity {
      display: flex;
      align-items: center;
      gap: 22px;
      margin-bottom: 24px;
    }

    .hero h1.hero-name-sm {
      font-family: 'Google Sans', 'Roboto', sans-serif;
      font-size: clamp(28px, 3.6vw, 44px) !important;
      font-weight: 800 !important;
      letter-spacing: -1px !important;
      line-height: 1.06 !important;
      color: #0f172a !important;
      -webkit-text-fill-color: #0f172a !important;
      background: none !important;
      margin-bottom: 6px !important;
    }

    .hero .hero-kicker {
      font-size: clamp(13px, 1.35vw, 15.5px) !important;
      font-weight: 500 !important;
      color: #475569 !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
      line-height: 1.45 !important;
      margin-bottom: 0 !important;
    }

    .hero .avatar-ring {
      background: linear-gradient(135deg, #16a34a 0%, #1a73e8 50%, #7c3aed 100%);
      padding: 3px;
      border-radius: 50%;
      display: inline-block;
      flex-shrink: 0;
      box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
    }
    .hero .avatar {
      border: 3px solid #ffffff !important;
      width: 104px !important;
      height: 104px !important;
      object-fit: cover;
    }

    /* Role grid with official full-color brand logos */
    .role-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 22px;
    }
    @media (max-width: 640px) {
      .role-grid { grid-template-columns: 1fr; gap: 10px; }
    }
    .role-card {
      position: relative;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.94);
      border: 1px solid rgba(15, 23, 42, 0.1);
      border-radius: 14px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
      transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    }
    .role-card:hover {
      background: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
    }
    .role-icon {
      width: 46px;
      height: 46px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: #ffffff;
      border: 1px solid rgba(15, 23, 42, 0.08);
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
      padding: 5px;
      overflow: hidden;
    }
    .role-icon-flush {
      padding: 0 !important;
      border: none !important;
    }
    .role-logo-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
    .role-logo-cover {
      object-fit: cover;
      border-radius: 10px;
    }
    .role-card-purple .role-icon {
      background: #674ea7 !important;
      padding: 3px !important;
    }
    .role-card-purple .role-logo-img {
      object-fit: contain !important;
    }
    .role-card-blue   { border-left: 3.5px solid #e11d48; }
    .role-card-green  { border-left: 3.5px solid #16a34a; }
    .role-card-purple { border-left: 3.5px solid #7c3aed; }
    .role-card-amber  { border-left: 3.5px solid #d97706; }

    .role-title {
      font-family: 'Google Sans', 'Roboto', sans-serif;
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.22;
    }
    .role-org {
      font-size: 12px;
      color: #475569;
      margin-top: 2px;
      font-weight: 500;
    }

    .hero .fpill {
      background: rgba(255, 255, 255, 0.92);
      border-color: rgba(15, 23, 42, 0.12);
      color: #334155;
      font-weight: 500;
      margin-bottom: 0;
    }
    .hero .fpill .live {
      background: #10b981;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
    }

    /* Right CTA Panel */
    .hero .hero-cta-panel {
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid rgba(15, 23, 42, 0.1);
      box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      padding: 24px;
      border-radius: 18px;
      position: relative;
      top: 0;
    }
    .hero .hero-cta-link {
      background: #f8fafc;
      border-color: rgba(15, 23, 42, 0.09);
      color: #0f172a;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 10px;
    }
    .hero .hero-cta-link:hover {
      background: var(--blue-lt);
      border-color: var(--blue);
      color: var(--blue);
    }
    .hcl-label { font-size: 13.5px; font-weight: 600; display: block; }
    .hcl-url { font-size: 11px; color: var(--muted); font-weight: 400; display: block; }
    .hero .hero-cta-link:hover .hcl-url { color: var(--blue); }
    .hcl-text { display: flex; flex-direction: column; gap: 1px; }
    .hero-cta-sims-block { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; border-top: 1px solid var(--border); }
    .hero-cta-sim-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .hero-cta-sim-pill {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      padding: 8px 6px; border-radius: 9px; text-decoration: none;
      background: #f8fafc; border: 1px solid rgba(15, 23, 42, 0.09);
      color: #0f172a; font-size: 12px; font-weight: 600;
      transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.18s ease-out;
    }
    .hero-cta-sim-pill:hover {
      background: var(--blue-lt); border-color: var(--blue); color: var(--blue);
      transform: translateY(-2px);
    }
    .hero-cta-sim-pill img { width: 17px; height: 17px; border-radius: 5px; flex-shrink: 0; }
    .hero-slide-nav-hint { margin-top: 14px; display: flex; align-items: center; }
    .hero-arrow-pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 7px 14px; border-radius: 100px; cursor: pointer;
      background: rgba(26, 115, 232, 0.08); border: 1px solid rgba(26, 115, 232, 0.24);
      color: #1e293b; font-family: 'Google Sans', 'Roboto', sans-serif;
      font-size: 12.5px; font-weight: 500;
      transition: background 0.18s, border-color 0.18s, transform 0.18s ease-out;
    }
    .hero-arrow-pill:hover {
      background: rgba(26, 115, 232, 0.14); border-color: var(--blue);
      transform: translateY(-1px);
    }
    .hap-kbd {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 24px; height: 22px; padding: 0 6px;
      border-radius: 6px; background: var(--blue); color: #ffffff;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 13px; font-weight: 700; line-height: 1;
      box-shadow: 0 2px 0 rgba(15, 23, 42, 0.22);
    }
    .hero-key-hint {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      padding: 8px 12px; border-radius: 10px; cursor: pointer;
      background: #f1f5f9; border: 1px dashed rgba(26, 115, 232, 0.35);
      color: #334155; font-family: 'Google Sans', 'Roboto', sans-serif;
      font-size: 12px; font-weight: 600;
      transition: background 0.18s, border-color 0.18s, color 0.18s;
    }
    .hero-key-hint:hover {
      background: var(--blue-lt); border-color: var(--blue); color: var(--blue);
    }
    .hkh-keys { display: inline-flex; align-items: center; gap: 4px; }
    .hkh-keys kbd {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 5px;
      background: #ffffff; border: 1px solid #cbd5e1;
      box-shadow: 0 1.5px 0 #94a3b8;
      color: #475569; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 12px; font-weight: 700; line-height: 1;
    }
    .hkh-keys kbd.hkh-key-primary {
      background: var(--blue); border-color: var(--blue);
      box-shadow: 0 1.5px 0 #1557b0; color: #ffffff;
    }
    @media (max-height: 760px) {
      body.pres-mode .hero-cta-sims-block { display: none; }
      body.pres-mode .hero-slide-nav-hint { margin-top: 8px; }
      body.pres-mode .hero-arrow-pill { padding: 4px 10px; font-size: 11px; }
    }
    @media (max-height: 680px) {
      body.pres-mode .hero-slide-nav-hint { display: none; }
    }

    /* ══════════════════════════════════════════════════════════════
       SLIDE 3 — DIGITALE ZUKUNFTSBILDUNG (gradient slide + mascot)
    ══════════════════════════════════════════════════════════════ */
    .dzb-hero {
      background:
        radial-gradient(ellipse at 20% 26%, rgba(107, 77, 176, 0.62) 0%, transparent 56%),
        radial-gradient(ellipse at 80% 80%, rgba(42, 138, 118, 0.44) 0%, transparent 54%),
        #190d33 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .dzb-hero .award-overlay {
      position: relative !important;
      z-index: 2;
      background: none !important;
      width: 100%;
      max-width: 1180px;
      margin: 0 auto;
      padding: 64px clamp(28px, 5.5vw, 84px) !important;
    }
    .dzb-mascot {
      position: absolute;
      right: clamp(16px, 4vw, 96px);
      bottom: 0;
      height: clamp(200px, 38vh, 440px);
      width: auto;
      object-fit: contain;
      pointer-events: none;
      filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.45));
      z-index: 1;
    }
    @media (max-width: 820px) { .dzb-mascot { display: none; } }
    @media (min-width: 821px) and (max-width: 1080px) {
      .dzb-mascot {
        height: clamp(160px, 30vh, 270px);
        right: 16px;
        opacity: 0.9;
      }
      .dzb-hero .aw-headline,
      .dzb-hero .slide-3slogan,
      .dzb-hero .aw-sub { max-width: 540px !important; }
      .dzb-hero .aw-stats,
      .dzb-hero .slide-links { max-width: 640px !important; }
    }
    @media (min-width: 1081px) {
      .dzb-hero .aw-headline,
      .dzb-hero .slide-3slogan,
      .dzb-hero .aw-sub { max-width: 650px !important; }
      .dzb-hero .aw-stats,
      .dzb-hero .slide-links { max-width: 780px !important; }
    }
    body.pres-mode .dzb-mascot { bottom: calc(var(--pres-bar-h, 56px) + 10px); }

    .dzb-logo {
      height: 52px;
      width: auto;
      align-self: flex-start;
      object-fit: contain;
      display: block;
      margin-bottom: 16px;
      border-radius: 12px;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    /* ══════════════════════════════════════════════════════════════
       SLIDE 8 — CTA SLIDE
    ══════════════════════════════════════════════════════════════ */
    .cta-hero {
      background:
        radial-gradient(ellipse at 25% 60%, rgba(22, 163, 74, 0.28) 0%, transparent 52%),
        radial-gradient(ellipse at 75% 40%, rgba(124, 58, 237, 0.28) 0%, transparent 52%),
        #080b10 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center;
    }
    .cta-hero .award-overlay {
      position: relative !important;
      background: none !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      max-width: 780px;
      margin: 0 auto;
      padding: 64px 28px !important;
    }
    .cta-hero .aw-headline {
      font-size: clamp(2.6rem, 6.5vw, 5.2rem) !important;
      text-align: center;
      margin-bottom: 16px !important;
    }
    .cta-hero .aw-sub {
      text-align: center;
      max-width: 540px !important;
      margin-bottom: 28px !important;
    }
    .cta-buttons { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 30px;
      border-radius: 12px;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: .02em;
      text-decoration: none;
      transition: transform .18s, box-shadow .18s, background .18s, border-color .18s;
    }
    .cta-btn:hover { transform: translateY(-2px); }
    .cta-btn-linkedin {
      background: linear-gradient(135deg, #16a34a 0%, #7c3aed 100%) !important;
      color: #ffffff !important;
      box-shadow: 0 4px 24px rgba(124, 58, 237, 0.4) !important;
    }
    .cta-btn-linkedin:hover { box-shadow: 0 8px 32px rgba(124, 58, 237, 0.6) !important; }
    .cta-btn-email {
      background: rgba(255, 255, 255, 0.1) !important;
      color: #ffffff !important;
      border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .cta-btn-email:hover {
      background: rgba(255, 255, 255, 0.2) !important;
      border-color: #ffffff !important;
    }

    /* ── Slide link buttons (shared across slides) ─────────────── */
    .slide-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
    .slide-link {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 22px; border-radius: 100px;
      font-size: 13px; font-weight: 600; text-decoration: none;
      transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, background 0.18s;
    }
    .slide-link-solid { background: #ffffff; color: #0f172a; }
    .slide-link-ghost {
      background: rgba(255, 255, 255, 0.12); color: #ffffff;
      border: 1.5px solid rgba(255, 255, 255, 0.34); font-weight: 500;
    }
    .slide-link:hover { transform: translateY(-2px); }
    .slide-link-solid:hover { box-shadow: 0 6px 22px rgba(255, 255, 255, 0.28); }
    .slide-link-ghost:hover { background: rgba(255, 255, 255, 0.22); }

    /* ── PRESENTATION MODE RESPONSIVE SCALING (BEAMERS & MOBILE) ── */
    body.pres-mode .hero,
    body.pres-mode .cta-hero,
    body.pres-mode .dzb-hero {
      padding-bottom: calc(var(--pres-bar-h, 56px) + clamp(12px, 2vh, 24px)) !important;
    }

    /* Short screens (beamers 1024x768, 1280x720, 1280x800) */
    @media (max-height: 800px) {
      body.pres-mode .aw-headline { font-size: clamp(26px, 3.8vw, 44px) !important; margin-bottom: 10px !important; line-height: 1.02 !important; }
      body.pres-mode .aw-eyebrow { margin-bottom: 10px !important; font-size: 10px !important; padding: 4px 12px !important; }
      body.pres-mode .aw-sub { font-size: 13px !important; margin-bottom: 14px !important; line-height: 1.52 !important; }
      body.pres-mode .slide-3slogan { font-size: 12.5px !important; margin-bottom: 12px !important; line-height: 1.5 !important; }
      body.pres-mode .aw-stats { gap: 22px !important; padding-top: 14px !important; }
      body.pres-mode .aw-stat .aw-n { font-size: clamp(22px, 2.5vw, 32px) !important; }
      body.pres-mode .slide-links { margin-top: 14px; gap: 10px; }
      body.pres-mode .slide-link { padding: 8px 18px; font-size: 12.5px; }
      body.pres-mode .dzb-hero .award-overlay { padding-top: 28px !important; padding-bottom: 28px !important; }
      body.pres-mode .dzb-logo { height: 42px; margin-bottom: 10px; }
      body.pres-mode .sustainista-icon-badge { width: 34px; height: 34px; }
      body.pres-mode .slide-logo-sustainista { height: 24px; }
      body.pres-mode .baeckerei-slide-logo { height: 48px; margin-bottom: 10px; }
      body.pres-mode .mega-badge-img,
      body.pres-mode .skillsup-award-badge { height: 34px; }
      body.pres-mode .lbs-badge-img { height: 42px; width: 42px; }
      body.pres-mode .wien-badge-img { height: 30px; }
      body.pres-mode .project-badge-row { margin-bottom: 10px; gap: 8px; }
      body.pres-mode .proj-pill { height: 28px; font-size: 10.5px; padding: 0 10px; }
      body.pres-mode .proj-pill-logo { height: 18px; }
      body.pres-mode .proj-pill-logo-wide { height: 15px; }
      body.pres-mode .cta-qr-container { margin-bottom: 16px; }
      body.pres-mode .cta-qr-img { width: 104px; height: 104px; }
      body.pres-mode .hero-inner { padding-top: 18px !important; padding-bottom: 18px !important; }
      body.pres-mode .hero-identity { margin-bottom: 16px !important; }
      body.pres-mode .hero .avatar { width: 82px !important; height: 82px !important; }
      body.pres-mode .role-card { padding: 11px 14px !important; gap: 12px !important; }
      body.pres-mode .role-icon { width: 40px; height: 40px; }
      body.pres-mode .hero-cta-panel { padding: 18px !important; gap: 10px !important; }
    }

    /* Classic 4:3 beamers (800x600, viewports < 680px tall) */
    @media (max-height: 680px) {
      body.pres-mode .aw-headline { font-size: clamp(22px, 3.4vw, 34px) !important; margin-bottom: 8px !important; }
      body.pres-mode .aw-eyebrow { margin-bottom: 8px !important; font-size: 9.5px !important; padding: 3px 10px !important; }
      body.pres-mode .aw-sub { font-size: 12px !important; margin-bottom: 10px !important; line-height: 1.45 !important; }
      body.pres-mode .slide-3slogan { font-size: 11.5px !important; margin-bottom: 8px !important; line-height: 1.4 !important; }
      body.pres-mode .slide-motto { margin-bottom: 6px !important; }
      body.pres-mode .aw-stats { gap: 16px !important; padding-top: 8px !important; }
      body.pres-mode .aw-stat .aw-n { font-size: clamp(18px, 2.2vw, 26px) !important; }
      body.pres-mode .aw-stat .aw-l { font-size: 8.5px !important; }
      body.pres-mode .slide-links { margin-top: 10px; gap: 8px; }
      body.pres-mode .slide-link { padding: 6px 14px; font-size: 11.5px; }
      body.pres-mode .dzb-logo { height: 34px; margin-bottom: 8px; }
      body.pres-mode .baeckerei-slide-logo { height: 38px; margin-bottom: 6px; }
      body.pres-mode .lbs-badge-img { height: 34px; width: 34px; }
      body.pres-mode .wien-badge-img { height: 24px; }
      body.pres-mode .cta-qr-img { width: 84px; height: 84px; }
      body.pres-mode .hero .avatar { width: 64px !important; height: 64px !important; }
      body.pres-mode .role-card { padding: 8px 10px !important; }
      body.pres-mode .role-icon { width: 34px; height: 34px; }
    }

    /* Mobile Portrait in Presentation Mode */
    @media (max-width: 700px) {
      body.pres-mode .award-hero .award-overlay,
      body.pres-mode .hero-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
      }
      body.pres-mode .hero-inner { padding-top: 16px !important; padding-bottom: 16px !important; }
      body.pres-mode .hero .avatar { width: 76px !important; height: 76px !important; }
      body.pres-mode .hero h1.hero-name-sm { font-size: 26px !important; }
      body.pres-mode .role-grid { gap: 8px !important; margin-bottom: 14px !important; }
      body.pres-mode .role-card { padding: 10px 12px !important; }
      body.pres-mode .role-icon { width: 38px; height: 38px; }
      body.pres-mode .aw-headline { font-size: clamp(24px, 7vw, 34px) !important; margin-bottom: 10px !important; }
      body.pres-mode .aw-eyebrow { margin-bottom: 8px !important; font-size: 9.5px !important; padding: 4px 12px !important; }
      body.pres-mode .aw-sub { font-size: 12.5px !important; margin-bottom: 14px !important; line-height: 1.5 !important; }
      body.pres-mode .slide-3slogan { font-size: 12px !important; margin-bottom: 10px !important; line-height: 1.48 !important; }
      body.pres-mode .aw-stats { gap: 12px 16px !important; padding-top: 12px !important; }
      body.pres-mode .aw-stat { padding-left: 10px !important; }
      body.pres-mode .aw-stat .aw-n { font-size: 22px !important; }
      body.pres-mode .aw-stat .aw-l { font-size: 9px !important; letter-spacing: 1.1px !important; }
      body.pres-mode .slide-motto { margin-bottom: 8px !important; }
      body.pres-mode .slide-links { margin-top: 14px; gap: 8px; }
      body.pres-mode .slide-link { padding: 8px 14px; font-size: 12px; }
      body.pres-mode .dzb-hero .award-overlay { padding: 24px 20px !important; }
      body.pres-mode .dzb-logo { height: 40px; margin-bottom: 10px; }
    }