:root{
    --bg:           #fafbfc;
    --surface:      #ffffff;
    --ink:          #0a0e1a;
    --ink-soft:     #4a5468;
    --ink-mute:     #8b94a3;
    --rule:         #e5e7eb;
    --rule-strong:  #cbd2db;
    --accent:       #1e3a8a;
    --accent-hover: #1e40af;
    --max:          1200px;
    --radius:       4px;
  }

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

  html{ scroll-behavior: smooth; }

  body{
    background: var(--bg);
    color: var(--ink);
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
    font-weight: 400;
    line-height: 1.55;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* Thin accent bar — corporate letterhead feel */
  .top-bar{
    height: 3px;
    background: var(--accent);
  }

  .wrap{
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  }

  a{ color: inherit; }

  /* ---------- NAV ---------- */
  .nav-bar{
    border-bottom: 1px solid var(--rule);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(1.4) blur(8px);
    background: rgba(255,255,255,.85);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding: 1rem 0;
    gap: 1rem;
  }
  .mono{
    display: flex;
    align-items: center;
    height: 2.25rem;
    color: var(--ink);
    text-decoration: none;
    flex-shrink: 0;
    transition: color .25s ease;
  }
  .mono svg{
    height: 100%;
    width: auto;
    display: block;
  }
  .mono:hover{ color: var(--accent); }

  .nav-right{
    display:flex; align-items:center; gap: clamp(1rem, 3vw, 2rem);
  }
  .nav-links{ display:flex; gap: clamp(1rem, 2.5vw, 1.75rem); list-style:none; }
  .nav-links a{
    color: var(--ink-soft);
    text-decoration:none;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: color .2s ease;
  }
  .nav-links a:hover{ color: var(--ink); }

  .lang-toggle{
    display: flex; align-items: center; gap: .4rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    padding-left: clamp(.75rem, 2vw, 1.25rem);
    border-left: 1px solid var(--rule);
  }
  .lang-toggle button{
    background: none; border: none; padding: 0;
    font: inherit; letter-spacing: inherit;
    color: var(--ink-mute);
    cursor: pointer;
    text-transform: uppercase;
    transition: color .2s ease;
  }
  .lang-toggle button:hover{ color: var(--ink); }
  .lang-toggle button.active{ color: var(--accent); }
  .lang-toggle .sep{ color: var(--rule-strong); }

  /* ---------- HERO ---------- */
  header.hero{
    padding: clamp(4rem, 10vw, 7rem) 0 clamp(3.5rem, 8vw, 6rem);
  }
  .eyebrow{
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1.75rem;
  }
  .eyebrow .dot{
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    flex-shrink: 0;
  }
  h1{
    font-weight: 700;
    font-size: clamp(2.5rem, 7.5vw, 5.6rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    color: var(--ink);
    max-width: 14ch;
  }
  .lede{
    margin-top: 1.75rem;
    max-width: 56ch;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--ink-soft);
    line-height: 1.6;
  }

  .hero-actions{
    margin-top: 2.5rem;
    display: flex; gap: 1rem; flex-wrap: wrap;
    align-items: center;
  }
  .btn{
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--ink);
    color: var(--surface);
    text-decoration: none;
    padding: .9rem 1.5rem;
    border-radius: var(--radius);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: background .25s ease, transform .25s ease;
  }
  .btn:hover{ background: var(--accent); transform: translateY(-1px); }
  .btn .arrow{ transition: transform .25s ease; }
  .btn:hover .arrow{ transform: translateX(3px); }
  .btn-ghost{
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--rule-strong);
  }
  .btn-ghost:hover{ background: var(--surface); border-color: var(--ink); color: var(--ink); }

  /* Credentials strip below hero */
  .credentials{
    margin-top: clamp(3rem, 6vw, 4.5rem);
    border-top: 1px solid var(--rule);
    padding-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2rem;
  }
  .cred-item .cred-label{
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: .5rem;
  }
  .cred-item .cred-value{
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
  }

  /* ---------- SECTIONS ---------- */
  section{
    padding: clamp(4rem, 8vw, 6rem) 0;
    border-top: 1px solid var(--rule);
  }

  .section-head{
    display: flex; align-items: baseline; gap: 1rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
  }
  .section-label{
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .section-label::before{
    content: "—";
    color: var(--accent);
    margin-right: .5rem;
  }
  h2{
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ink);
  }

  /* ---------- ABOUT ---------- */
  .about-grid{
    display:grid;
    grid-template-columns: 4fr 7fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }

  .portrait{
    position: relative;
    aspect-ratio: 4/5;
    background: linear-gradient(135deg, #e5e7eb 0%, #cbd2db 100%);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--rule);
  }
  .portrait::after{
    content: none;
  }
  .portrait img{
    width:100%; height:100%; object-fit:cover; display:block;
  }

  .about-text .quote{
    font-weight: 500;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    line-height: 1.35;
    letter-spacing: -.015em;
    color: var(--ink);
    padding-left: 1.25rem;
    border-left: 3px solid var(--accent);
    margin-bottom: 2rem;
  }
  .bio p{
    font-size: 1rem;
    color: var(--ink-soft);
    margin-bottom: 1.1rem;
    line-height: 1.65;
  }
  .bio p:last-child{ margin-bottom: 0; }
  .bio strong{ color: var(--ink); font-weight: 600; }

  /* ---------- EXPERTISE ---------- */
  .expertise-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .expertise{
    padding: 1.75rem;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    transition: background .25s ease;
  }
  .expertise:hover{ background: #f7f9fc; }
  .expertise .num{
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--accent);
    margin-bottom: .85rem;
    font-feature-settings: "tnum";
  }
  .expertise .name{
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -.005em;
  }

  /* ---------- CONTACT ---------- */
  .contact-card{
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: clamp(2rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
  }
  .contact-intro p{
    color: var(--ink-soft);
    font-size: 1rem;
    margin-top: 1rem;
    max-width: 38ch;
  }
  .contact-list{ list-style:none; }
  .contact-list li + li{ border-top: 1px solid var(--rule); }
  .contact-list a{
    display:flex; align-items:center; justify-content:space-between;
    padding: 1.1rem 0;
    color: var(--ink);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 500;
    transition: color .25s ease;
  }
  .contact-list a:first-child{ padding-top: 0; }
  .contact-list a .label{
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    display: block;
    margin-bottom: .25rem;
  }
  .contact-list a .arrow-link{
    font-size: 1.1rem;
    color: var(--ink-mute);
    transition: transform .25s ease, color .25s ease;
  }
  .contact-list a:hover{ color: var(--accent); }
  .contact-list a:hover .arrow-link{
    transform: translateX(4px);
    color: var(--accent);
  }

  /* ---------- FOOTER ---------- */
  footer{
    border-top: 1px solid var(--rule);
    padding: 2rem 0 2.5rem;
    display:flex; flex-wrap: wrap; gap: 1rem;
    justify-content: space-between; align-items: center;
    font-size: .82rem;
    color: var(--ink-mute);
  }

  /* ---------- ENTRANCE ---------- */
  .reveal{ opacity:0; transform: translateY(16px); animation: reveal .7s cubic-bezier(.2,.8,.2,1) forwards; }
  .reveal.d1{ animation-delay:.05s; }
  .reveal.d2{ animation-delay:.18s; }
  .reveal.d3{ animation-delay:.32s; }
  .reveal.d4{ animation-delay:.48s; }
  .reveal.d5{ animation-delay:.62s; }
  @keyframes reveal{ to{ opacity:1; transform: translateY(0); } }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 820px){
    .about-grid{ grid-template-columns: 1fr; }
    .portrait{ max-width: 320px; }
    .contact-card{ grid-template-columns: 1fr; }
  }
  @media (max-width: 560px){
    .nav-links{ gap: 1rem; }
    .nav-links a{ font-size: .72rem; letter-spacing: .06em; }
    .lang-toggle{ font-size: .72rem; padding-left: .8rem; }
    h1{ max-width: 18ch; }
  }