/* ---------- Theme: roomy, consistent, readable ---------- */
:root{
    --bg: #ffffff;
    --fg: #0b0b0b;
    --muted: #6b7280;
    --accent: #e6f0ff;
    --line: #e5e7eb;
    --cta-bg: #ffd700;      /* high-contrast background */
    --cta-fg: #111111;      /* black-text CTA requirement */
    --maxw: 1160px;         /* wider to fix "squeezed" */
    --radius: 14px;
    --shadow: 0 6px 18px rgba(0,0,0,.06);
    --space: clamp(16px, 2.5vw, 28px);
    --space-lg: clamp(28px, 4vw, 56px);
    --lh: 1.6;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--fg);
    font: 16px/var(--lh) ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
    text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }

  .container{max-width:var(--maxw); padding:0 20px; margin:0 auto}
  .section{padding: var(--space-lg) 0; border-top:1px solid var(--line)}
  .section:first-of-type{border-top:none}
  h1{font-size: clamp(28px, 3.2vw, 44px); line-height:1.2; margin:0 0 10px}
  h2{font-size: clamp(22px, 2.4vw, 30px); line-height:1.25; margin:0 0 8px}
  h3{font-size: clamp(18px, 2vw, 22px); margin:0 0 6px}
  p{margin: 10px 0; color: var(--fg)}
  .lead{font-size: clamp(16px, 1.5vw, 20px); color:var(--muted)}
  .small{font-size: 14px; color: var(--muted)}

  a{color:inherit; text-decoration:none}
  a.underline{ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  hr{border:0; border-top:1px solid var(--line); margin: var(--space-lg) 0}

  /* ---------- Header ---------- */
  .header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line)}
  .nav{display:flex; align-items:center; justify-content:space-between; height:64px}
  .brand a{font-weight:700; letter-spacing:.2px}
  .brand a:hover{opacity:.8}
  .navlinks{display:flex; gap:18px; align-items:center}
  .navlinks a{padding:10px 12px; border-radius:10px}
  .navlinks a.active, .navlinks a:hover{background: var(--accent)}

  /* ---------- Hero / banner ---------- */
  .hero{padding: clamp(36px, 6vw, 80px) 0; background: #fbfcff}
  .badge{display:inline-flex; gap:10px; align-items:center; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#fff}
  .badge .dot{width:8px; height:8px; border-radius:999px; background:#16a34a}
  .hero h1{margin-top:10px}
  .hero .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}

  /* ---------- Buttons ---------- */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:12px; border:1px solid #111; box-shadow: var(--shadow); transition:transform .05s ease}
  .btn:active{transform:translateY(1px)}
  .btn-cta{background: var(--cta-bg); color: var(--cta-fg); font-weight:700}
  .btn-ghost{background:#fff; color:#111}

  /* ---------- Cards / grids ---------- */
  .grid{display:grid; gap: clamp(16px, 2.2vw, 24px)}
  .grid.cols-3{grid-template-columns: repeat(1,1fr)}
  .card{border:1px solid var(--line); border-radius: var(--radius); padding:18px; background:#fff; box-shadow: var(--shadow)}
  .card h3{margin-bottom:4px}
  .kv{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
  .kv .pill{padding:6px 10px; border-radius:999px; background:#f3f4f6; font-size:13px}
  .kv .pill:hover { filter: brightness(0.98); transform: translateY(-1px); transition: all .15s ease; }

  /* ---------- Two-column content ---------- */
  .twocol{display:grid; gap:24px}
  @media (min-width: 900px){
    .grid.cols-3{grid-template-columns: repeat(3,1fr)}
    .twocol{grid-template-columns: 1.1fr .9fr}
  }

  /* ---------- Lists ---------- */
  .checks{list-style:none; padding:0; margin:6px 0}
  .checks li{padding:8px 0 8px 28px; position:relative; border-bottom:1px dashed #eaeaea}
  .checks li:last-child{border-bottom:none}
  .checks li:before{content:"✓"; position:absolute; left:0; top:8px; font-weight:700}

  /* ---------- Footer ---------- */
  .footer{padding: 28px 0; border-top:1px solid var(--line)}
  .footer .row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}

  /* ---------- Utilities ---------- */
  .muted{color:var(--muted)}
  .mtop{margin-top: var(--space)}
  .center{text-align:center}
  .wide{max-width: 76ch}

  /* Center limited-width text inside centered sections */
.center .wide {
    margin-left: auto;
    margin-right: auto;
  }

  /* Center the buttons in centered sections too */
  .center .actions {
    justify-content: center;
  }

  /* Optional: nicer wrapping for long, comma-heavy sentences */
  .center .wide {
    text-wrap: pretty;   /* harmless if unsupported */
  }
  /* Previous experience */
.experience{ margin-top: 10px; }

.logo-row{
  list-style:none; padding:0; margin:10px 0 0;
  display:flex; gap:22px; align-items:center; flex-wrap:wrap;
}
.logo-row li{display:flex; align-items:center}
.logo-row img{
  height:26px; max-width:160px;
  filter: grayscale(100%) contrast(1.05) opacity(.85);
  transition: filter .2s ease, transform .1s ease, opacity .2s ease;
}
.logo-row img:hover{ filter:none; opacity:1; transform: translateY(-1px); }

@media (min-width: 900px){
  .logo-row img{ height:28px; }
}
/* =========================
   Mobile-only polish (<900px)
   ========================= */
   @media (max-width: 899px) {
    :root {
      --pad-1: 8px;
      --pad-2: 12px;
      --pad-3: 16px;
      --pad-4: 20px;
      --fs-base: 16px;
      --fs-h1: 28px;  /* big enough to feel “hero”, not shouty */
      --fs-h2: 20px;
      --fs-h3: 18px;
    }

    html, body {
      font-size: var(--fs-base);
      line-height: 1.55;
      -webkit-text-size-adjust: 100%;
    }

    /* container padding so text isn’t kissing the bezel */
    .container { padding-left: var(--pad-3); padding-right: var(--pad-3); }

    /* header/nav: wrap nicely, CTA stays visible */
    .header .container.nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pad-2); }
    .header .brand { flex: 1 0 100%; margin-bottom: 2px; }
    .navlinks { display: flex; flex-wrap: wrap; gap: var(--pad-2); }
    .navlinks a { padding: 10px 12px; }
    .navlinks .btn-cta { flex: 1 1 100%; text-align: center; }

    /* hero: tighter hierarchy, readable badge */
    .hero h1 { font-size: var(--fs-h1); line-height: 1.2; margin-bottom: var(--pad-2); }
    .hero .lead.wide { font-size: var(--fs-base); max-width: 42ch; }
    .badge { font-size: 12px; padding: 6px 8px; white-space: normal; }

    /* section rhythm */
    .section { padding: 28px 0; }

    /* two-column blocks collapse to single column */
    .twocol, .two-col, .twoCol { display: grid; grid-template-columns: 1fr; gap: var(--pad-3); }

    /* cards: single column stack */
    .cards { display: grid; grid-template-columns: 1fr; gap: var(--pad-3); }
    .card { padding: var(--pad-3); }

    /* pills and key-value chips don’t cramp */
    .kv { gap: 6px; }
    .kv .pill { font-size: 12px; padding: 6px 8px; }

    /* checklists: give thumbs room to tap */
    .checks li { margin: 10px 0; }

    /* make CTAs easy to hit */
    .btn, .btn-cta { width: 100%; justify-content: center; }

    /* footer: stack rows, keep it legible */
    .footer .row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
    .footer .small { text-align: left; }

    /* media: never overflow */
    img, video, svg { max-width: 100%; height: auto; }
  }
/* ===== MOBILE HEADER FINAL (replace all previous mobile header/hero rules) ===== */
.mobile-pill { display: none; } /* default off; we only show it on phones */

@media (max-width: 899px) {
  /* Header: real white band that contains name, EU pill, and nav pills */
  .header {
    position: static !important;         /* kill sticky */
    background: var(--bg, #fff);
    padding: 18px 0 14px;                /* top room for name, bottom for nav */
    margin: 0;                           /* avoid weird collapses */
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
  }

  .header .container.nav {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    row-gap: 10px;
  }

  /* Big centered name */
  .header .brand { width: 100%; text-align: center; }
  .header .brand a {
    display: inline-block;
    font-weight: 700;
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.2;
  }

  /* EU pill shows under the name (header version), hero pill hidden on mobile */
  .mobile-pill {
    display: inline-flex !important;
    margin: 2px auto 6px;
    text-align: center;
  }
  .hero .badge { display: none !important; }

  /* Four nav pills IN the header band, not floating, not overlapping */
  .navlinks {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
    position: static;   /* neutralize any earlier positioning */
    float: none;        /* neutralize desktop float */
    clear: both;        /* force header height to include nav */
  }
  .navlinks a {
    display: block;
    padding: 9px 6px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid var(--muted, #e6e6e6);
    border-radius: 999px;
    line-height: 1.1;
    font-size: clamp(12px, 3.5vw, 14px);
    background: var(--bg, #fff);
  }
  .navlinks a.active {
    border-color: var(--fg, #111);
    background: var(--surface-2, #f5f7fb);
  }
  .header .navlinks .btn-cta { display: none !important; }

  /* Hard separation: hero always starts below the header band */
  .hero {
    margin-top: 12px !important;
    padding-top: 8px !important;
    border-top: 0 !important;
    clear: both;                     /* belt-and-suspenders */
  }
}

/* Desktop: header pill off, hero pill on (no changes to your layout) */
@media (min-width: 900px) {
  .mobile-pill { display: none !important; }
  .hero .badge { display: inline-flex; }
}
/* ===== MOBILE HOTFIX: stop header/nav from overlaying hero ===== */
@media (max-width: 899px) {
    /* Nuke any sticky/absolute/transform from desktop rules */
    .header,
    .header .container,
    .header .container.nav,
    .header nav,
    .navlinks {
      position: static !important;
      top: auto !important;
      z-index: auto !important;
      transform: none !important;
    }

    /* Make sure header height includes the nav row */
    .header .container.nav::after { content: ""; display: block; clear: both; }

    /* Space inside the band + a hard push below it */
    .header { padding-bottom: 20px !important; }
    .navlinks { margin-top: 6px !important; }
    .hero { margin-top: 16px !important; padding-top: 8px !important; border-top: 0 !important; }
  }
  /* ===== Mobile: let the header actually contain the nav ===== */
@media (max-width: 899px) {
    /* This is the culprit: remove the fixed 64px height from .nav on phones */
    .nav { height: auto !important; }

    /* Keep the header tall enough and clearly separated from the hero */
    .header { padding-bottom: 20px !important; }
    .navlinks { margin-top: 6px !important; }

    /* Belt-and-suspenders so hero always starts below the header */
    .hero { margin-top: 16px !important; padding-top: 8px !important; clear: both; }
  }
  /* ===== MOBILE: freeze header on scroll (sticky, no overlap) ===== */
@media (max-width: 899px) {
    /* Make the header sticky again */
    .header {
      position: sticky !important;
      top: 0;
      z-index: 200 !important;
      background: rgba(255,255,255,.92);
      -webkit-backdrop-filter: saturate(1.2) blur(8px);
      backdrop-filter: saturate(1.2) blur(8px);
      padding-bottom: 20px !important; /* keeps nav contained */
    }

    /* Ensure the nav row expands header height (this killed the overlap before) */
    .nav { height: auto !important; }

    /* Keep a small gap so the hero never tucks under the sticky band */
    .hero { margin-top: 12px !important; }

    /* Optional: smooth in-page anchor jumps with sticky header */
    html { scroll-padding-top: 84px; } /* adjust if your mobile header gets taller */
  }