:root{
    --forest-950:#16281C; --forest-700:#2F4A34; --sage-500:#7C9070;
    --clay-600:#A85C3B;
    --sand-050:#FAF7EE; --ink-900:#211C14; --ink-700:#4A4335;
    --paper:var(--sand-050); --text:var(--ink-900); --text-soft:var(--ink-700);
    --note-bg: rgba(168,92,59,0.10); --note-line: rgba(168,92,59,0.35);
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--paper);color:var(--text);font-family:'Work Sans',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;margin:0;letter-spacing:-0.01em;}
  a{color:inherit;}

  header{position:fixed;top:0;left:0;right:0;z-index:40;padding:20px clamp(20px,4vw,48px);
    display:flex;align-items:center;justify-content:space-between; pointer-events:none;}
  header .inner{display:flex;align-items:center;justify-content:space-between;width:100%;opacity:0;transform:translateY(-8px);pointer-events:auto;}
  .logo img{height:30px;width:auto;}
  .nav-wrap{display:flex;align-items:center;gap:26px;}
  nav{display:flex;gap:28px;font-size:13.5px;letter-spacing:0.03em;text-transform:uppercase;color:var(--text-soft);}
  nav a{text-decoration:none;}
  nav a.current{color:var(--clay-600);}
  .lang-switch{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:0.04em;
    padding-left:20px;border-left:1px solid var(--note-line);}
  .lang-switch button{background:none;border:none;cursor:pointer;color:var(--text-soft);
    font-family:'Work Sans',sans-serif;font-size:12px;letter-spacing:0.04em;padding:2px 1px;}
  .lang-switch button.active{color:var(--clay-600);font-weight:600;}
  .lang-switch .sep{color:var(--note-line);}

  .hamburger{
    display:none; width:44px; height:44px; border:none; background:none; cursor:pointer;
    flex-direction:column; justify-content:center; align-items:center; gap:6px; padding:0;
  }
  .hamburger span{width:22px;height:2px;background:var(--text);display:block;transition:transform .25s ease, opacity .25s ease;}
  .hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

  .mobile-nav{
    display:none;
    position:fixed; top:0; left:0; right:0; bottom:0; z-index:39;
    background:var(--paper); padding:96px 32px 40px;
    flex-direction:column; align-items:center; gap:8px;
    opacity:0; visibility:hidden; transition:opacity .3s ease;
  }
  .mobile-nav.open{ opacity:1; visibility:visible; }
  .mobile-nav nav{ display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; }
  .mobile-nav nav a{
    text-decoration:none; color:var(--text); font-family:'Fraunces',serif; font-size:22px;
    padding:16px 0; width:100%; text-align:center;
  }
  .mobile-nav .lang-switch{ margin-top:20px; padding-left:0; border-left:none; gap:14px; }
  .mobile-nav .lang-switch button{ font-size:15px; padding:10px; }

  @media (max-width:820px){
    .nav-wrap{gap:10px;}
    header .inner > .nav-wrap > nav,
    header .inner > .nav-wrap > .lang-switch{ display:none; }
    .hamburger{ display:flex; }
    .mobile-nav{ display:flex; }
  }

  .page-hero{ padding:150px 24px 20px; text-align:center; }
  .page-hero h1{ font-size:clamp(28px,4.4vw,46px); opacity:0; transform:translateY(10px); }
  .page-hero p{ margin-top:12px; font-size:16px; color:var(--text-soft); opacity:0; }

  footer.site-footer{
    padding:60px 24px 50px; text-align:center; color:var(--text-soft); font-size:13px;
  }


  .kontakt-wrap{
    max-width:520px; margin:30px auto 90px; padding:0 24px; text-align:center;
  }
  .kontakt-block{ margin-top:40px; }
  .kontakt-block .label{
    font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-soft); margin-bottom:8px;
  }
  .kontakt-block .value{ font-size:17px; line-height:1.6; }
  .kontakt-block a{ text-decoration:none; border-bottom:1px solid var(--note-line); }

  .people-grid{
    display:flex; flex-wrap:nowrap; justify-content:center; gap:56px;
    max-width:980px; margin:10px auto 70px; padding:0 24px;
    overflow-x:auto;
  }
  .ceo-card{ width:280px; text-align:center; }
  .ceo-card img{
    width:132px; height:132px; border-radius:50%; object-fit:cover;
    margin:0 auto 20px; display:block;
    box-shadow:0 18px 34px -14px rgba(20,30,20,0.35);
  }
  .ceo-card .role{
    font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--clay-600); margin-bottom:8px;
  }
  .ceo-card .name{ font-size:21px; }
  .ceo-card .name.name-long{ font-size:18px; white-space:nowrap; }
  .ceo-card .resp{ margin-top:8px; font-size:14px; color:var(--text-soft); font-style:italic; }
  .ceo-card .ceo-contact{ margin-top:20px; font-size:15px; line-height:1.9; }
  .ceo-card .ceo-contact a{ text-decoration:none; border-bottom:1px solid var(--note-line); }

  @media (max-width:820px){
    .page-hero{ padding:130px 20px 16px; }
    .people-grid{ flex-direction:column; align-items:center; flex-wrap:wrap; overflow-x:visible; gap:44px; }
    .ceo-card{ width:100%; max-width:280px; }
    .ceo-card .ceo-contact{ font-size:14px; word-break:break-word; }
    .kontakt-block .value{ font-size:16px; word-break:break-word; }
    .cert-section{ margin-top:60px; }
  }

  /* ---- Certification — its own quiet block, visually separate from the
       contact cards and the address/hours/email block above it. ---- */
  .cert-section{
    max-width:400px; margin:80px auto 0; padding:0 24px; text-align:center;
  }
  .cert-section .label{
    font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-soft); margin-bottom:22px;
  }
  .cert-section img{ width:88px; height:auto; margin:0 auto; display:block; }
  .cert-section .cert-number{ margin-top:18px; font-size:15px; color:var(--text-soft); }

  /* ---- Find us — plain address + link to Google Maps. A live embedded
       map isn't possible in this prototype environment (blocked CSP, no
       network access to fetch real map tiles), and a drawn illustration
       would misrepresent itself as a map — so for now this is simply the
       address and a clear way to open the real location elsewhere. The
       real interactive map goes in once the site is on a real server. ---- */
  .kontakt-map-section{ max-width:520px; margin:80px auto 0; padding:0 24px; text-align:center; }
  .kontakt-map-address{ font-size:17px; line-height:1.6; }
  .kontakt-map-btn{
    display:inline-block; margin-top:22px; padding:10px 22px; border-radius:3px;
    border:1px solid var(--text-soft); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase;
    text-decoration:none; color:inherit; transition:border-color .25s ease, color .25s ease;
  }
  .kontakt-map-btn:hover{ border-color:var(--clay-600); color:var(--clay-600); }

  @media (max-width:820px){
    .kontakt-map-section{ margin-top:56px; }
  }