/* ---- 00-base.css ---- */
  :root{
    --navy:#0f1d30;
    --navy-2:#142640;
    --navy-deep:#0a1422;
    --cream:#f4efe4;
    --cream-2:#ece2cd;
    --paper:#fffdf8;
    --ink:#152234;
    --ink-soft:#3a4656;
    --ink-dim:#58657a;
    --on-dark:#f4efe4;
    --on-dark-dim:#c6d0dc;
    --copper:#b87333;
    --copper-deep:#8a4d1f;
    --copper-light:#e3a868;
    --sky:#8ab8d4;
    --line-dark:rgba(244,239,228,.16);
    --line-light:rgba(15,29,48,.14);
    --maxw:1180px;
    --bar-h:40px;
    --nav-h:76px;
    --ease:cubic-bezier(.22,.7,.2,1);
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
  body{
    margin:0;background:var(--cream);color:var(--ink-soft);
    font-family:var(--font-text);font-size:16px;line-height:1.65;
    -webkit-font-smoothing:antialiased;
    padding-top:calc(var(--bar-h) + var(--nav-h));
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  h1,h2,h3,h4{color:inherit;font-weight:600;margin:0;line-height:1.15;font-family:var(--font-head);}
  p{margin:0;}
  ul,ol{margin:0;padding:0;list-style:none;}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
  fieldset{border:0;padding:0;margin:0;min-width:0;}
  input,select,textarea{font:inherit;color:inherit;}
  em{font-style:italic;}

  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;}

  :focus-visible{outline:3px solid var(--copper-light);outline-offset:3px;border-radius:4px;}

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

  .skip-link{
    position:fixed;top:-100px;left:1rem;z-index:10000;background:var(--copper-deep);color:var(--cream);
    padding:.7rem 1.2rem;border-radius:100px;font-weight:700;text-decoration:none;
    transition:top .15s var(--ease);
  }
  .skip-link:focus{top:calc(var(--bar-h) + .6rem);}

  /* ============ PREVIEW BAR ============ */
  .preview-bar{
    position:fixed;top:0;left:0;right:0;height:var(--bar-h);z-index:9999;
    background:var(--navy-deep);color:var(--on-dark-dim);
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    font-size:.78rem;letter-spacing:.03em;border-bottom:1px solid var(--line-dark);
  }
  .preview-bar strong{color:var(--copper-light);font-weight:700;}

  /* ============ NAV ============ */
  .site-nav{
    position:fixed;top:var(--bar-h);left:0;right:0;z-index:900;height:var(--nav-h);
    background:rgba(244,239,228,.92);backdrop-filter:none;
    border-bottom:1px solid var(--line-light);
    display:flex;align-items:center;
  }
  .nav-inner{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,4vw,2.6rem);
    display:flex;align-items:center;justify-content:space-between;gap:1rem;}
  .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);}
  /* Skutečný monogram klienta (01_logo_JM-8.svg) — jediná cesta v jedné barvě,
     takže se vybarvuje přes currentColor a drží paletu konceptu. viewBox je utažený
     na kresbu, originální artboard má kolem dokola velké prázdno. */
  .brand-seal{width:46px;height:46px;flex:none;display:block;color:var(--navy);}
  .brand-seal path{fill:currentColor;}
  .brand-name{font-family:var(--font-head);font-weight:600;font-size:1.02rem;line-height:1.1;}
  .brand-name span{display:block;font-family:var(--font-text);font-weight:600;font-size:.72rem;color:var(--ink-dim);}
  .nav-links{display:flex;align-items:center;gap:1.6rem;}
  .nav-links a{text-decoration:none;font-weight:600;font-size:.92rem;color:var(--ink-soft);
    padding:.3rem 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
  .nav-links a:hover{color:var(--copper-deep);border-color:var(--copper-light);}
  .nav-links a.nav-cta{
    background:var(--copper-deep);color:var(--cream);padding:.65rem 1.2rem;border-radius:100px;
    border-bottom:0;transition:background .15s,transform .15s;
  }
  .nav-links a.nav-cta:hover{background:var(--navy);transform:translateY(-1px);}
  .nav-toggle{display:none;}
  @media (max-width:1100px){
    .nav-links{position:fixed;top:calc(var(--bar-h) + var(--nav-h));left:0;right:0;
      background:var(--paper);flex-direction:column;align-items:stretch;gap:0;
      max-height:0;overflow:hidden;transition:max-height .3s var(--ease);border-bottom:1px solid var(--line-light);}
    .nav-links.open{max-height:calc(100vh - var(--bar-h) - var(--nav-h));overflow-y:auto;}
    .nav-links a{padding:1rem clamp(1.2rem,4vw,2.6rem);border-bottom:1px solid var(--line-light);}
    .nav-links a.nav-cta{margin:.8rem clamp(1.2rem,4vw,2.6rem);text-align:center;}
    .nav-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
      border:1px solid var(--line-light);border-radius:8px;}
    .nav-toggle span,.nav-toggle::before,.nav-toggle::after{content:"";display:block;width:20px;height:2px;
      background:var(--ink);position:relative;transition:transform .2s;}
    .nav-toggle::before{transform:translateY(-6px);position:absolute;}
    .nav-toggle::after{transform:translateY(6px);position:absolute;}
  }

  /* ============ BANDS ============ */
  .band{position:relative;overflow:hidden;}
  .band-dark{background:var(--navy);color:var(--on-dark);}
  .band-dark h2,.band-dark h3{color:var(--on-dark);}
  .band-darker{background:var(--navy-deep);color:var(--on-dark);}
  .band-light{background:var(--cream);color:var(--ink-soft);}
  .band-paper{background:var(--paper);color:var(--ink-soft);}
  .band > .wrap{position:relative;z-index:2;}
  section{padding:clamp(3.2rem,7vw,6.5rem) 0;}

  /* POZADÍ — pravidlo, na které jsem doplatil: hýbat se smí jen VELKÁ MĚKKÁ plocha.
     Jemný pravidelný rastr (vrstevnice, šrafy), který se posouvá, vytváří moiré
     a je po chvíli nesnesitelný. Rastr proto stojí a pohyb nesou jen rozostřené
     gradienty s dlouhou periodou a malou amplitudou. */

  /* Statická vrstevnicová textura světlých pásů — jen papírový charakter, žádný pohyb. */
  .contour-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
    background-image:
      repeating-radial-gradient(ellipse 60% 40% at 20% 30%, rgba(15,29,48,.055) 0 2px, transparent 2px 38px),
      repeating-radial-gradient(ellipse 70% 45% at 80% 75%, rgba(184,115,51,.06) 0 2px, transparent 2px 44px);
    background-size:120% 120%,140% 140%;
  }
  /* Pohyb světlých pásů: dvě velká teplá pole plující proti sobě.
     Amplituda musí být řádově desítky procent — při 4 % je pohyb pod prahem vnímání
     a pozadí působí staticky, i když se technicky hýbe. */
  .sheen{position:absolute;inset:-18%;z-index:0;pointer-events:none;
    background:
      radial-gradient(ellipse 42% 38% at 34% 40%,rgba(184,115,51,.15) 0%,rgba(184,115,51,0) 70%),
      radial-gradient(ellipse 38% 34% at 72% 64%,rgba(138,184,212,.14) 0%,rgba(138,184,212,0) 70%);
    animation:field-drift 8s ease-in-out infinite alternate,
              glow-pulse 6s ease-in-out infinite alternate;
  }
  @keyframes field-drift{
    from{transform:translate3d(-20%,-11%,0) scale(1.04);}
    to{transform:translate3d(23%,13%,0) scale(1.04);}
  }
  /* Dýchající záře tmavých pásů. Každá má vlastní dráhu i periodu, aby se pohyb
     nesčítal do jednoho společného posunu, který oko přečte jako nic. */
  /* will-change povýší vrstvu na vlastní kompozitní plochu: gradient se rastruje
     jednou a scale/translate pak jede na GPU. Bez toho se velký radiální gradient
     překresluje každý snímek a fps padá na ~44. */
  /* Posun hladkého gradientu je opticky téměř nezjistitelný — oko na něm nemá
     čeho se chytit. Pohyb proto nese kombinace posunu a změny jasu; na tu je oko
     citlivé i u plochy bez struktury. Obě animace běží na jedné vrstvě (transform
     + opacity se skládají na kompozitoru), takže cena zůstává jako u jedné. */
  .glow{position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:none;
    background:radial-gradient(circle,rgba(184,115,51,.6) 0%,rgba(184,115,51,0) 66%);
    animation:drift-a 6.5s ease-in-out infinite alternate,
              glow-pulse 4.5s ease-in-out infinite alternate;
  }
  .glow-a{width:62vw;height:62vw;top:-12vw;right:-10vw;}
  /* Cena je lineární v počtu animovaných vrstev: měřeno 60/60 fps při jedné
     hýbající se vrstvě na pás, 42/31 při třech. Proto se hýbe jen glow-a (tmavé
     pásy) a sheen (světlé); glow-b a glow-c zůstávají jako statická barevná plocha. */
  .glow-b{width:30vw;height:30vw;bottom:-12vw;left:-8vw;
    background:radial-gradient(circle,rgba(138,184,212,.38) 0%,rgba(138,184,212,0) 70%);}
  .glow-c{width:30vw;height:30vw;top:18%;left:30%;
    background:radial-gradient(circle,rgba(228,214,190,.16) 0%,rgba(228,214,190,0) 70%);}
  @keyframes drift-a{
    from{transform:translate3d(8%,-7%,0) scale(1.05);}
    to{transform:translate3d(-26%,18%,0) scale(1.05);}
  }
  @keyframes glow-pulse{
    from{opacity:.5;}
    to{opacity:.9;}
  }
  @media (prefers-reduced-motion: reduce){
    .glow,.sheen{animation:none !important;}
  }

  /* ============ SCROLL REVEAL ============ */
  [data-reveal]{opacity:0;transform:translate3d(0,26px,0);
    transition:opacity .72s var(--ease),transform .72s var(--ease);
    transition-delay:calc(var(--i,0) * 80ms);}
  [data-reveal].is-visible{opacity:1;transform:none;}
  /* Směr náběhu podle typu obsahu — jednotný fade-up působil, že se neděje nic.
     Bez clip-path: animovaný clip-path v Chromiu utíná diakritiku (ř, ě, í). */
  .reason-card[data-reveal],.city-seal[data-reveal]{transform:scale(.92) translate3d(0,20px,0);}
  .team-card[data-reveal]{transform:translate3d(0,34px,0) rotate(-1.2deg);}
  .rung[data-reveal]{transform:translate3d(-30px,0,0);}
  /* Na úzkých displejích jede příčka zdola — vodorovný posun by při náběhu
     zasahoval mimo pás (pás sice ořezává, ale je to zbytečné riziko). */
  @media (max-width:480px){ .rung[data-reveal]{transform:translate3d(0,24px,0);} }
  .hero-photo-wrap[data-reveal]{transform:scale(.9);}
  @media (prefers-reduced-motion: reduce){
    [data-reveal]{opacity:1;transform:none !important;transition:none;}
  }
  .stagger > *{transition-delay:calc(var(--i,0) * 70ms);}

  /* Plátno s tekoucími vlnovkami přes celou stránku. Leží nad podkladem pásů
     (.glow má z-index 0) a pod obsahem (.band > .wrap má z-index 2), takže jedno
     jediné plátno obsluhuje tmavé i světlé pásy — každému se jen mění barva linek. */
  #fx{position:fixed;inset:0;z-index:1;pointer-events:none;}

  /* Ukazatel postupu čtení pod navigací. */
  .scroll-progress{position:fixed;top:calc(var(--bar-h) + var(--nav-h) - 3px);left:0;right:0;height:3px;
    z-index:901;transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
    background:linear-gradient(90deg,var(--copper),var(--sky));}

  /* ============ TYPE HELPERS ============ */
  .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.78rem;
    letter-spacing:.09em;text-transform:uppercase;color:var(--copper-light);}
  .band-light .eyebrow,.band-paper .eyebrow{color:var(--copper-deep);}
  .eyebrow::before{content:"";width:22px;height:2px;background:currentColor;display:block;}
  h2.h-title{font-size:clamp(1.9rem,4vw,2.9rem);margin-top:.6rem;max-width:34ch;}
  .lede{font-size:1.1rem;max-width:56ch;margin-top:1rem;}
  .band-dark .lede,.band-darker .lede{color:var(--on-dark-dim);}
  .band-light .lede,.band-paper .lede{color:var(--ink-dim);}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.9rem 1.7rem;border-radius:100px;font-weight:700;font-size:.98rem;text-decoration:none;
    min-height:44px;transition:transform .15s var(--ease),background .15s,box-shadow .15s;border:2px solid transparent;}
  .btn-primary{background:var(--copper-deep);color:var(--cream);}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(138,77,31,.35);}
  .btn-ghost{border-color:var(--line-dark);color:var(--on-dark);}
  .band-dark .btn-ghost:hover,.band-darker .btn-ghost:hover{background:rgba(244,239,228,.08);}
  .btn-ghost.on-light{border-color:var(--line-light);color:var(--ink);}
  .btn-ghost.on-light:hover{background:rgba(15,29,48,.06);}
  .cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem;}

  /* ============ HERO ============ */
  .hero{padding-top:clamp(3rem,7vw,5rem);}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,420px);gap:clamp(2rem,5vw,4rem);
    align-items:center;}
  /* Medailon: čtvercový rám drží prstenec kruhový (dřív byl elipsa 518x479)
     a fotka se vykresluje nejvýš v nativním rozlišení 600 px při DPR 2 —
     proto je strop 300 px, ne 380, kde se výřez viditelně roztahoval. */
  .hero-photo-wrap{position:relative;justify-self:center;width:min(100%,340px);aspect-ratio:1;}
  /* Nová fotka (3808x5712) unesla plný medailon — dřív byl strop 300 px kvůli
     předloze 600x600, která se nad ním viditelně roztahovala. */
  .hero-photo-wrap picture{position:absolute;inset:0;z-index:2;border-radius:50%;overflow:hidden;will-change:transform;
    box-shadow:0 26px 64px rgba(0,0,0,.42);}
  .hero-photo-wrap img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 16%;}
  /* z-index 3: fotka je ve vrstvě 2, bez toho odznak mizel za postavou */
  .hero-badge{position:absolute;bottom:4%;left:-17%;z-index:3;background:var(--paper);color:var(--ink);
    border-radius:16px;padding:.9rem 1.1rem;box-shadow:0 18px 40px rgba(0,0,0,.35);
    font-size:.85rem;font-weight:600;max-width:190px;}
  .hero-badge b{display:block;font-family:var(--font-head);font-size:1.4rem;color:var(--copper-deep);}
  .hero h1{font-size:clamp(2.3rem,5.2vw,3.6rem);max-width:16ch;}
  .hero .role{font-size:1.15rem;color:var(--copper-light);font-weight:700;margin-top:.9rem;}
  .hero .name{font-weight:700;color:var(--on-dark);}
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-photo-wrap{order:-1;width:min(100%,270px);margin:0 auto;}
  }

  /* ============ SECTION HEAD (generic) ============ */
  .section-head{max-width:64ch;}

  /* ============ KDO JSEM ============ */
  .about-grid{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:clamp(2rem,5vw,3.5rem);align-items:start;}
  @media (max-width:900px){.about-grid{grid-template-columns:1fr;}}
  .about-photo{position:relative;}
  /* Stejný princip jako portrét na martinavahalova.cz: hýbe se celá fotková
     dlaždice proti statickému měděnému rámu (.about-photo::after), ne obrázek
     uvnitř okna. Proto tu není žádné zvětšení — to dřív usekávalo hlavu. */
  .about-photo picture{display:block;border-radius:22px;overflow:hidden;aspect-ratio:3/2;
    will-change:transform;}
  .about-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 28%;}
  .about-photo::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:2px solid var(--copper);
    border-radius:22px;z-index:-1;}
  .about-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.8rem;}
  .about-fact{background:var(--navy-2);border-radius:14px;padding:1rem;text-align:center;}
  .about-fact b{display:block;font-family:var(--font-head);font-size:1.5rem;color:var(--copper-light);}
  .about-fact span{font-size:.8rem;color:var(--on-dark-dim);}
  blockquote.motto{margin:2rem 0 0;padding:1.6rem 1.8rem;border-left:3px solid var(--copper);
    font-family:var(--font-head);font-style:italic;font-size:1.35rem;color:var(--on-dark);background:var(--navy-2);
    border-radius:0 16px 16px 0;}
  blockquote.motto footer{margin-top:.7rem;font-family:var(--font-text);font-style:normal;
    font-size:.85rem;color:var(--on-dark-dim);}

  /* ============ PROČ TÝM ============ */
  .reasons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;margin-top:2.4rem;}
  .reason-card{background:var(--paper);border-radius:18px;padding:1.6rem;border:1px solid var(--line-light);
    transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
  .reason-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(15,29,48,.1);}
  .reason-num{font-family:var(--font-head);font-size:1.5rem;color:var(--copper);}
  .reason-card h3{font-size:1.15rem;margin-top:.5rem;color:var(--ink);}
  .reason-card p{font-size:.92rem;color:var(--ink-dim);margin-top:.5rem;}

  /* ============ KARIÉRNÍ DRÁHA ============ */
  .ladder{margin-top:2.8rem;display:flex;flex-direction:column;gap:0;}
  .rung{display:grid;grid-template-columns:44px 1fr;gap:1.1rem;position:relative;padding-bottom:2.1rem;}
  .rung:last-child{padding-bottom:0;}
  .rung-dot{width:44px;height:44px;border-radius:50%;background:var(--navy-2);border:2px solid var(--copper);
    display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;
    color:var(--copper-light);position:relative;z-index:1;}
  .rung::after{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--line-dark);
    transform:scaleY(0);transform-origin:top;transition:transform .85s var(--ease) .18s;}
  .rung.is-visible::after{transform:scaleY(1);}
  @media (prefers-reduced-motion: reduce){.rung::after{transform:none;transition:none;}}
  .rung:last-child::after{display:none;}
  .rung-body h3{font-size:1.1rem;color:var(--on-dark);}
  .rung-people{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.7rem;}
  .rung-person{display:flex;align-items:center;gap:.5rem;background:var(--navy-2);border-radius:100px;
    padding:.35rem .9rem .35rem .35rem;font-size:.82rem;}
  .rung-person img{width:34px;height:34px;border-radius:50%;object-fit:cover;}
  .rung-person.open-slot{background:transparent;border:1.5px dashed var(--copper);padding:.5rem 1rem;}

  /* ============ TÝM ============ */
  .team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.4rem;margin-top:2.4rem;}
  .team-card{background:var(--paper);border-radius:18px;overflow:hidden;border:1px solid var(--line-light);}
  .team-card .ph{aspect-ratio:1;overflow:hidden;}
  .team-card img{width:100%;height:100%;object-fit:cover;object-position:center 22%;}
  .team-card-body{padding:1rem 1.2rem 1.3rem;}
  .team-card-body h3{font-size:1.02rem;color:var(--ink);}
  .team-card-body .role{color:var(--copper-deep);font-weight:700;font-size:.85rem;margin-top:.2rem;}
  .team-card-body .city{font-size:.85rem;color:var(--ink-dim);margin-top:.5rem;}
  .team-card-body a.phone{display:inline-flex;align-items:center;min-height:44px;margin-top:.4rem;
    font-weight:700;font-size:.88rem;color:var(--navy);text-decoration:underline;text-underline-offset:3px;}

  /* ============ MĚSTA ============ */
  .cities-seal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.1rem;margin-top:2.4rem;}
  .city-seal{border:1.5px solid var(--line-dark);border-radius:18px;padding:1.3rem 1.1rem;text-align:center;
    transition:transform .2s var(--ease),border-color .2s;}
  .city-seal:hover{transform:translateY(-3px);border-color:var(--copper);}
  .city-seal.home{border-color:var(--copper);background:rgba(184,115,51,.08);}
  .city-seal .pin{width:34px;height:34px;margin:0 auto .6rem;border-radius:50%;border:2px solid var(--copper);
    display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--copper-light);}
  .city-seal h3{font-size:1.02rem;color:var(--on-dark);}
  .city-seal p{font-size:.78rem;color:var(--on-dark-dim);margin-top:.3rem;}

  /* ============ POZICE ============ */
  .jobs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.6rem;margin-top:2.4rem;}
  .job-card{background:var(--paper);border-radius:20px;border:1px solid var(--line-light);padding:1.7rem;}
  .job-card h3{font-size:1.35rem;color:var(--ink);}
  .job-card .perex{margin-top:.7rem;font-style:italic;color:var(--ink-dim);font-size:.96rem;}
  .job-card details{margin-top:1.2rem;}
  .job-card summary{cursor:pointer;font-weight:700;color:var(--copper-deep);list-style:none;
    display:flex;align-items:center;gap:.5rem;padding:.4rem 0;}
  .job-card summary::-webkit-details-marker{display:none;}
  .job-card summary::after{content:"+";font-size:1.3rem;line-height:1;margin-left:auto;transition:transform .2s;}
  .job-card details[open] summary::after{content:"–";}
  .job-card h4{font-size:.88rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-dim);
    margin-top:1.1rem;margin-bottom:.5rem;}
  .job-card ul li{padding-left:1.2rem;position:relative;font-size:.92rem;margin-top:.4rem;}
  .job-card ul li::before{content:"·";position:absolute;left:0;color:var(--copper);font-weight:900;font-size:1.2rem;line-height:.8;}
  .job-apply{margin-top:1.3rem;display:flex;flex-wrap:wrap;gap:.8rem;}

  /* ============ PŘIHLÁŠKA ============ */
  .form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:2.4rem;}
  @media (max-width:700px){.form-wrap{grid-template-columns:1fr;}}
  .form-field{display:flex;flex-direction:column;gap:.4rem;}
  .form-field.full{grid-column:1 / -1;}
  .form-field label{font-size:.85rem;font-weight:700;color:var(--on-dark-dim);}
  .form-field input,.form-field select,.form-field textarea{
    background:var(--navy-2);border:1.5px solid var(--line-dark);border-radius:10px;
    padding:.8rem .9rem;color:var(--cream);min-height:44px;}
  .form-field textarea{min-height:96px;resize:vertical;}
  .form-field input::placeholder,.form-field textarea::placeholder{color:var(--on-dark-dim);opacity:.7;}
  .form-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:.6rem;}

  /* ============ FAQ ============ */
  /* Native <details> accordion — works without JS, and build.mjs reads this markup for FAQPage JSON-LD. */
  .faq-list{margin-top:2.2rem;border-top:1px solid var(--line-light);}
  .faq-item{border-bottom:1px solid var(--line-light);}
  .faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
    gap:1rem;padding:1.3rem .2rem;font-weight:700;font-size:1.02rem;color:var(--ink);font-family:var(--font-head);}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:"+";flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--copper);
    display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--copper-deep);transition:transform .25s var(--ease);}
  .faq-item[open] summary::after{content:"–";}
  .faq-item > div{padding:0 .2rem 1.3rem;color:var(--ink-dim);font-size:.95rem;max-width:64ch;}
  .band-dark .faq-item,.band-darker .faq-item{border-color:var(--line-dark);}
  .band-dark .faq-item summary,.band-darker .faq-item summary{color:var(--on-dark);}
  .band-dark .faq-item > div,.band-darker .faq-item > div{color:var(--on-dark-dim);}

  /* ============ KLIENTI ============ */
  .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.1rem;margin-top:2.2rem;}
  .service-card{background:var(--navy-2);border-radius:16px;padding:1.3rem;border:1px solid var(--line-dark);}
  .service-card h3{font-size:1.05rem;color:var(--on-dark);}
  .service-card p{font-size:.88rem;color:var(--on-dark-dim);margin-top:.5rem;}

  /* ============ FOOTER ============ */
  footer.band-darker{padding-bottom:2.4rem;}
  .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.4rem;}
  @media (max-width:920px){.footer-grid{grid-template-columns:1fr;}}
  .footer-col h3{font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--copper-light);margin-bottom:1rem;}
  .footer-col p, .footer-col li{font-size:.92rem;color:var(--on-dark-dim);margin-top:.5rem;}
  .footer-col a{color:var(--on-dark);text-decoration:underline;text-underline-offset:3px;}
  .assistant-row{display:flex;align-items:center;gap:.8rem;margin-top:1rem;}
  .assistant-row img{width:48px;height:48px;border-radius:50%;object-fit:cover;}
  .social-row{display:flex;gap:.8rem;margin-top:1rem;}
  .social-row a{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line-dark);
    display:flex;align-items:center;justify-content:center;text-decoration:none;}
  .social-row a:hover{border-color:var(--copper);}
  .legal-block{margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line-dark);
    font-size:.78rem;color:var(--on-dark-dim);line-height:1.7;}
  .legal-block p{margin-top:.6rem;max-width:90ch;}
  .footer-bottom{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
    font-size:.78rem;color:var(--on-dark-dim);}



  @media (max-width:480px){.about-facts{grid-template-columns:1fr 1fr;}}

/* ---- 01-fonts.css ---- */
/* Self-hosted (OFL) — no request to Google from the visitor's browser. */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/libre-baskerville-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/libre-baskerville-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/libre-baskerville-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/libre-baskerville-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- 10-layout.css ---- */
/* Shared layout for the multi-page site: tokens on top of koncept 8, page heroes,
   breadcrumbs, long-form text, article cards, forms on light bands, notices. */

/* STELAR corporate identity (kodex.stelaradvisory.cz): headings Rework Headline, text Rework Text,
   secondary headings/quotes Libre Baskerville. Rework is a licensed font — until STELAR marketing
   provides the WOFF2 files, Manrope (closest open-licence match) renders in its place. */
:root{
  --font-head:'Rework Headline','Manrope',Verdana,sans-serif;
  --font-text:'Rework Text','Manrope',Verdana,sans-serif;
  --font-editorial:'Libre Baskerville',Georgia,serif;
  --maxw:1320px;
}
:root:not(.is-preview){--bar-h:0px;}
h1,h2{font-weight:600;letter-spacing:-.012em;}
.editorial{font-family:var(--font-editorial);font-weight:400;font-style:italic;letter-spacing:0;}

/* ---------- navigation ---------- */
.nav-links{gap:1.35rem;}
.nav-links a[aria-current="page"]{color:var(--copper-deep);border-color:var(--copper);}
.brand-seal{color:var(--navy);}

/* ---------- page hero (subpages) ---------- */
.page-hero{padding:clamp(2.6rem,6vw,4.6rem) 0 clamp(2.8rem,6vw,4.8rem);}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:22ch;margin-top:.7rem;}
.page-hero .lede{font-size:1.15rem;}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;}
@media (max-width:900px){.page-hero-grid{grid-template-columns:1fr;}}
.page-hero-photo{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 26px 64px rgba(0,0,0,.42);aspect-ratio:4/5;max-height:520px;}
.page-hero-photo img{width:100%;height:100%;object-fit:cover;}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.84rem;font-weight:600;color:var(--on-dark-dim);margin-bottom:1.4rem;}
.crumbs a{color:var(--on-dark-dim);text-decoration:none;border-bottom:1px solid transparent;}
.crumbs a:hover{color:var(--copper-light);border-color:currentColor;}
.crumbs [aria-current]{color:var(--on-dark);}
.crumbs__sep{opacity:.5;}

/* ---------- long-form text (articles, legal pages, service detail) ---------- */
.prose{max-width:72ch;font-size:1.06rem;line-height:1.75;color:var(--ink-soft);}
.prose > * + *{margin-top:1.1em;}
.prose h2{font-size:clamp(1.45rem,2.6vw,1.9rem);margin-top:2.2em;color:var(--ink);}
.prose h3{font-size:1.2rem;margin-top:1.8em;color:var(--ink);}
.prose ul,.prose ol{padding-left:1.3em;}
.prose ul{list-style:disc;}
.prose ol{list-style:decimal;}
.prose li + li{margin-top:.45em;}
.prose li::marker{color:var(--copper);}
.prose a{color:var(--copper-deep);font-weight:600;text-underline-offset:3px;}
.prose blockquote{margin:1.6em 0;padding:.4em 0 .4em 1.3em;border-left:3px solid var(--copper);
  font-family:var(--font-editorial);font-style:italic;font-size:1.12rem;color:var(--ink);}
.prose strong{color:var(--ink);}
.band-dark .prose,.band-darker .prose{color:var(--on-dark-dim);}
.band-dark .prose h2,.band-dark .prose h3,.band-dark .prose strong{color:var(--on-dark);}

/* ---------- notices (orientational outputs, preview-only behaviour) ---------- */
.notice{display:flex;gap:.8rem;align-items:flex-start;padding:1rem 1.2rem;border-radius:14px;
  background:rgba(184,115,51,.08);border:1px solid rgba(184,115,51,.28);font-size:.92rem;color:var(--ink-soft);}
.notice::before{content:"i";flex:none;width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;
  background:var(--copper-deep);color:var(--cream);font-weight:800;font-size:.8rem;font-family:var(--font-editorial);}
.band-dark .notice,.band-darker .notice{background:rgba(244,239,228,.05);border-color:var(--line-dark);color:var(--on-dark-dim);}

/* ---------- article cards (home teaser, /clanky/, related articles) ---------- */
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:1.4rem;margin-top:2.4rem;}
.article-card__link{display:flex;flex-direction:column;gap:.7rem;height:100%;padding:1.6rem 1.6rem 1.4rem;border-radius:18px;
  background:var(--paper);border:1px solid var(--line-light);text-decoration:none;color:var(--ink-soft);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;}
.article-card__link:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(15,29,48,.12);border-color:rgba(184,115,51,.45);}
.article-card__cat{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--copper-deep);}
.article-card__title{font-size:1.28rem;line-height:1.25;color:var(--ink);}
.article-card__perex{font-size:.96rem;color:var(--ink-dim);flex:1;}
.article-card__meta{font-size:.82rem;color:var(--ink-dim);font-weight:600;}
.band-dark .article-card__link,.band-darker .article-card__link{background:var(--navy-2);border-color:var(--line-dark);color:var(--on-dark-dim);}
.band-dark .article-card__title,.band-darker .article-card__title{color:var(--on-dark);}
.band-dark .article-card__perex,.band-dark .article-card__meta{color:var(--on-dark-dim);}
.band-dark .article-card__cat{color:var(--copper-light);}

.chip{display:inline-flex;align-items:center;min-height:40px;padding:.45rem 1.05rem;border-radius:100px;
  border:1.5px solid var(--line-light);font-weight:700;font-size:.88rem;color:var(--ink-soft);background:var(--paper);}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--cream);}
.chip:hover{border-color:var(--copper);}

/* ---------- forms on light bands (koncept 8 styled them for dark bands only) ---------- */
.band-light .form-field label,.band-paper .form-field label{color:var(--ink);}
.band-light .form-field input,.band-light .form-field select,.band-light .form-field textarea,
.band-paper .form-field input,.band-paper .form-field select,.band-paper .form-field textarea{
  background:var(--paper);border-color:rgba(15,29,48,.22);color:var(--ink);}
.band-light .form-field input::placeholder,.band-paper .form-field input::placeholder,
.band-light .form-field textarea::placeholder,.band-paper .form-field textarea::placeholder{color:var(--ink-dim);}
.form-field input:focus-visible,.form-field select:focus-visible,.form-field textarea:focus-visible{
  outline:2px solid var(--copper);outline-offset:1px;border-color:var(--copper);}
.form-check{grid-column:1 / -1;display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;}
.form-check input{width:20px;height:20px;margin-top:.15rem;accent-color:var(--copper-deep);flex:none;}
.form-msg{grid-column:1 / -1;padding:1rem 1.2rem;border-radius:12px;background:var(--navy-2);color:var(--on-dark);
  border-left:3px solid var(--copper);font-size:.95rem;}
.form-msg[hidden]{display:none;}
.form-msg a{color:var(--copper-light);font-weight:700;}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- footer ---------- */
.footer-h{font-family:var(--font-text);font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--copper-light);margin-bottom:1rem;}
.footer-h--gap{margin-top:2rem;}
.footer-logo{width:112px;height:112px;margin-bottom:1.2rem;}
.assistant-role{font-size:.85rem;}
.footer-bottom a{color:var(--on-dark-dim);}
.social-row a{color:var(--on-dark);}

/* ---------- preview bar: one line on phones ---------- */
@media (max-width:640px){.preview-bar__more{display:none;}}

/* ---------- buttons inside long-form text: .prose a (0,1,1) would otherwise beat .btn-* (0,1,0) ---------- */
.prose a.btn{text-decoration:none;font-weight:700;}
.prose a.btn-primary{color:var(--cream);}
.prose a.btn-ghost{color:var(--on-dark);}
.prose a.btn-ghost.on-light{color:var(--ink);}

/* ---------- utilities (no inline style attributes: CSP has no 'unsafe-inline') ---------- */
.u-mt-sm{margin-top:.8rem;}

/* ---- 30-uvod.css ---- */
/* Úvodní stránka, O mně, 404, Ochrana osobních údajů — vlastní styly (třídy prefixu home-/om-),
   aby se nepotkaly se styly ostatních oblastí. Komponenty beze jména oblasti (.about-grid,
   .reasons-grid, .ladder, .services-grid…) jsou sdílené z 00-base.css a používají se tu beze změny. */

/* ---------- domovský hero: velká fotka, ne medailon (platí jen na / ) ---------- */
.home-hero{padding:0;}
.home-hero-photo{position:absolute;inset:0;z-index:0;overflow:hidden;}
.home-hero-photo picture{position:absolute;top:0;right:0;height:100%;width:58%;display:block;}
.home-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;}
/* Fotka přechází do tmavě modré vlevo, kde sedí text — žádná další animovaná vrstva,
   jen statický gradient nad obrázkem. */
.home-hero-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 26%,rgba(15,29,48,.62) 46%,rgba(15,29,48,0) 68%);}
/* Jen top/bottom padding jako vlastní longhandy — zápis zkratkou "padding:X 0" by
   přepsal i levý/pravý padding z .wrap (stejná specificita, tenhle soubor se načítá
   později) a na mobilu to lepilo text na okraj. */
.home-hero-inner{position:relative;z-index:2;min-height:calc(100vh - var(--bar-h) - var(--nav-h));
  display:flex;align-items:center;padding-top:clamp(3rem,8vw,5rem);padding-bottom:clamp(3rem,8vw,5rem);}
.home-hero-copy{max-width:600px;}
.home-hero-copy h1{font-size:clamp(2.3rem,5vw,3.7rem);white-space:nowrap;}
.home-hero-role{font-size:1.1rem;font-weight:700;color:var(--copper-light);margin-top:.8rem;}
.home-hero-copy .lede{margin-top:1.1rem;}
.home-stats{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,2.6rem);margin-top:2.4rem;padding-top:1.6rem;
  border-top:1px solid var(--line-dark);}
.home-stats > div{display:flex;flex-direction:column;}
.home-stats dt{font-family:var(--font-head);font-size:clamp(1.6rem,3vw,2.1rem);font-weight:700;color:var(--on-dark);}
.home-stats dd{font-size:.85rem;color:var(--on-dark-dim);margin-top:.2rem;}
.home-hero-motto{margin-top:2rem;font-size:1.15rem;color:var(--on-dark-dim);}
.home-hero-motto::before{content:"";}
@media (max-width:900px){
  .home-hero-copy h1{white-space:normal;}
}
@media (max-width:760px){
  .home-hero-photo{position:relative;inset:auto;height:62vh;}
  .home-hero-photo picture{position:static;width:100%;height:100%;}
  .home-hero-photo img{object-position:50% 12%;}
  .home-hero-photo::after{background:linear-gradient(0deg,var(--navy) 0%,rgba(15,29,48,.5) 32%,rgba(15,29,48,0) 60%);}
  .home-hero-inner{min-height:0;padding-top:clamp(2rem,6vw,2.6rem);}
}

/* ---------- dva směry (rozcestník) — dva velké rovnocenné panely přes celou šířku wrapu ---------- */
.home-directions{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.6rem;}
@media (max-width:860px){.home-directions{grid-template-columns:1fr;}}
.home-direction-card{position:relative;overflow:hidden;border-radius:28px;
  padding:clamp(2.2rem,4vw,3.4rem);display:flex;flex-direction:column;min-height:480px;}
.home-direction-card--light{background:var(--paper);border:1px solid var(--line-light);}
.home-direction-card--dark{background:var(--navy);color:var(--on-dark);}
.home-direction-card--dark .eyebrow{color:var(--copper-light);}
.home-direction-card h3{font-size:clamp(2rem,3vw,2.6rem);margin-top:.9rem;max-width:14ch;}
.home-direction-card--light h3{color:var(--ink);}
.home-direction-card--dark h3{color:var(--on-dark);}
.home-direction-card > p{margin-top:1rem;max-width:40ch;position:relative;z-index:1;}
.home-direction-card--light > p{color:var(--ink-dim);}
.home-direction-card--dark > p{color:var(--on-dark-dim);}
.home-direction-list{margin-top:1.5rem;display:grid;gap:.65rem;position:relative;z-index:1;max-width:40ch;}
.home-direction-list li{padding-left:1.4rem;position:relative;font-size:.98rem;}
.home-direction-list li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;border-radius:50%;background:var(--copper);}
.home-direction-card--dark .home-direction-list li::before{background:var(--copper-light);}
.home-direction-card--light .home-direction-list{color:var(--ink-soft);}
.home-direction-card--dark .home-direction-list{color:var(--on-dark-dim);}
.home-direction-card .cta-row{margin-top:auto;padding-top:1.8rem;position:relative;z-index:1;}
/* Fotka u kariérního panelu — stejný princip jako u hera (fotka přechází do tmavě
   modré gradientem), ale jiný snímek (jiri-stoji), ať to nepůsobí jako opakování hera. */
/* The photo sits in the right part of the card so the face stays visible next to the text;
   every text child is lifted above it (a positioned photo paints over non-positioned siblings). */
.home-direction-photo{position:absolute;top:0;bottom:0;right:0;left:42%;z-index:0;}
.home-direction-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;}
.home-direction-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy) 0%,rgba(15,29,48,.55) 38%,rgba(15,29,48,.08) 75%);}
.home-direction-card--dark > :not(.home-direction-photo){position:relative;z-index:1;}
@media (max-width:560px){
  .home-direction-photo{left:0;}
  .home-direction-photo::after{background:linear-gradient(180deg,rgba(15,29,48,.55) 0%,var(--navy) 62%);}
}

/* ---------- ikony oblastí (sdílené mezi "Komplexní řešení" a "Kalkulačky") ---------- */
.service-icon{width:48px;height:48px;flex:none;border-radius:50%;background:rgba(184,115,51,.15);
  display:flex;align-items:center;justify-content:center;color:var(--copper-light);margin-bottom:1.1rem;}
.band-light .service-icon,.band-paper .service-icon{background:rgba(184,115,51,.12);color:var(--copper-deep);}
.service-icon svg{width:24px;height:24px;}

/* .service-card (00-base.css) počítá s <div> — tady je to odkaz, doplnit chybějící
   display/text-decoration, jinak padá do inline toku. Zvětšeno oproti základu (menší
   karty s drobným textem v úzkém pruhu), přidána ikona a číslo. */
.services-grid{gap:1.4rem;}
.services-grid a.service-card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  padding:1.8rem 1.7rem 2rem;border-radius:20px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;}
.services-grid a.service-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.35);border-color:var(--copper);}
.services-grid a.service-card .service-num{position:absolute;top:1.6rem;right:1.7rem;font-family:var(--font-head);
  font-size:.85rem;color:var(--line-dark);}
.services-grid a.service-card h3{font-size:1.3rem;}
.services-grid a.service-card p{flex:1;font-size:1rem;margin-top:.6rem;}

/* ---------- "Člověk za profesí" — větší fotka (~45 % šířky), jiný snímek než hero ---------- */
.home-about-grid{grid-template-columns:minmax(320px,45%) 1fr;align-items:center;}
@media (max-width:900px){.home-about-grid{grid-template-columns:1fr;}}
.home-values-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem;}
.home-values-row .chip{pointer-events:none;}

/* ---------- kalkulačky — výrazné dlaždice místo prázdna pod nadpisem ---------- */
.home-calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem;margin-top:2.6rem;}
.home-calc-tile{display:flex;flex-direction:column;align-items:flex-start;padding:1.8rem 1.6rem;min-height:150px;
  border-radius:20px;background:var(--paper);border:1px solid var(--line-light);text-decoration:none;color:inherit;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;}
.home-calc-tile:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,29,48,.12);border-color:rgba(184,115,51,.45);}
.home-calc-tile h3{font-size:1.1rem;color:var(--ink);margin-top:auto;}
.home-calc-tile .service-icon{margin-bottom:1.4rem;}

/* ---------- druhý portrét ve "O mně" (jiri-stoji je na výšku) ---------- */
.about-photo.is-portrait picture{aspect-ratio:4/5;max-width:420px;margin:0 auto;}
.about-photo.is-portrait img{object-position:50% 14%;}

/* ---------- 404 ---------- */
.notfound-links{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem;}

/* ---- 31-sluzby.css ---- */
/* Styles for /sluzby/ (overview + 5 detail pages) and /kalkulacky/. Classes are
   not prefixed per-page since they are scoped to this agent's pages only. */

/* ---------- /sluzby/ overview: a list of five distinct rows, not a grid of
   identical cards (CSS lets the row grow on hover instead of relying on a
   shared card shape, so each entry reads as its own doorway, not a tile). */
.service-nav-list{margin-top:2.6rem;display:flex;flex-direction:column;border-top:1px solid var(--line-light);}
a.service-nav-item{display:flex;align-items:center;gap:1.3rem;padding:1.7rem .3rem;
  border-bottom:1px solid var(--line-light);text-decoration:none;color:inherit;
  transition:padding-left .2s var(--ease),background .2s;}
a.service-nav-item:hover,a.service-nav-item:focus-visible{padding-left:.9rem;background:rgba(184,115,51,.07);}
.service-nav-icon{width:50px;height:50px;border-radius:50%;border:1.5px solid var(--copper);
  display:flex;align-items:center;justify-content:center;color:var(--copper-deep);flex:none;}
.service-nav-body{flex:1;min-width:0;}
.service-nav-title{display:block;font-family:var(--font-head);font-weight:600;font-size:1.4rem;color:var(--ink);}
.service-nav-title b{color:var(--copper-deep);font-weight:700;margin-right:.6rem;font-size:1rem;vertical-align:.15em;}
.service-nav-desc{display:block;margin-top:.4rem;font-size:.96rem;color:var(--ink-dim);max-width:58ch;}
.service-nav-go{flex:none;font-size:1.4rem;line-height:1;color:var(--copper);transition:transform .2s var(--ease);}
a.service-nav-item:hover .service-nav-go,a.service-nav-item:focus-visible .service-nav-go{transform:translateX(5px);}
@media (max-width:560px){
  a.service-nav-item{gap:.9rem;padding:1.4rem .1rem;}
  .service-nav-icon{width:42px;height:42px;}
  .service-nav-title{font-size:1.14rem;}
}

/* ---------- cross-links to other service pages (dark closing band) ---------- */
.more-areas{display:flex;flex-wrap:wrap;gap:.9rem 1.8rem;margin-top:2rem;list-style:none;padding:0;}
.more-areas a{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.95rem;
  color:var(--on-dark);text-decoration:underline;text-underline-offset:3px;min-height:44px;}
.more-areas a:hover{color:var(--copper-light);}

/* ---------- calculator teaser panel inside a service detail page ---------- */
.tool-cta{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;align-items:center;justify-content:space-between;
  background:var(--navy-2);border:1px solid var(--line-dark);border-radius:22px;padding:clamp(1.7rem,4vw,2.5rem);}
.tool-cta-body{flex:1;min-width:240px;}
.tool-cta-body h2{font-size:1.55rem;margin-top:.5rem;}
.tool-cta-body p{margin-top:.6rem;color:var(--on-dark-dim);max-width:48ch;}

/* ---------- "co spolu můžeme řešit" on a service detail page: a plain list
   left of a full-width empty column read as unfinished, so the right column
   now carries real content from the same source bullets ("na co si dát
   pozor" / things worth preparing for), not another copy of the left list. */
.service-detail-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,3.5rem);margin-top:2.4rem;align-items:start;}
@media (max-width:860px){.service-detail-grid{grid-template-columns:1fr;}}
.service-detail-grid h3{font-family:var(--font-head);font-weight:600;font-size:1.2rem;color:var(--ink);margin-bottom:1rem;}
.service-list{display:grid;gap:.85rem;}
.service-list li{padding-left:1.4em;position:relative;font-size:1.02rem;line-height:1.55;color:var(--ink-soft);}
.service-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--copper);}
.watch-panel{background:var(--cream-2);border:1px solid var(--line-light);border-radius:20px;padding:clamp(1.5rem,3vw,2.1rem);}
.watch-panel ul{display:grid;gap:.9rem;margin-top:0;}
.watch-panel li{padding-left:1.7em;position:relative;font-size:.96rem;line-height:1.55;color:var(--ink-soft);}
.watch-panel li::before{content:"!";position:absolute;left:0;top:.05em;width:20px;height:20px;border-radius:50%;
  background:var(--copper-deep);color:var(--cream);font-weight:800;font-size:.72rem;font-family:var(--font-text);
  display:flex;align-items:center;justify-content:center;}

/* ---------- "jak probíhá spolupráce" steps: a dedicated component instead of
   reusing the shared .reason-card (that one belongs to kariéra's "Proč tým" —
   changing it there would ripple into another agent's page). Bigger type and
   a large editorial-serif number per feedback. ---------- */
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem;}
@media (max-width:760px){.step-grid{grid-template-columns:1fr;}}
.step-card{background:var(--paper);border-radius:20px;border:1px solid var(--line-light);
  padding:clamp(1.6rem,3vw,2.1rem);display:flex;gap:1.3rem;align-items:flex-start;}
.step-num{flex:none;font-family:var(--font-editorial);font-style:italic;font-size:2.6rem;line-height:1;color:var(--copper);}
.step-card h3{font-size:1.3rem;color:var(--ink);}
.step-card p{margin-top:.5rem;font-size:1rem;line-height:1.55;color:var(--ink-dim);}

/* ---------- FAQ split: heading + intro sentence on the left (fixed width),
   accordion on the right — the single centred column left most of a 1920px
   row empty. Markup is plain <details class="faq-item"><summary>…</summary>
   <div>…</div></details> (no extra classes) so build.mjs's faqJsonLd() can
   read it as FAQPage structured data. The .faq-item accordion itself (native
   <details>, marker suppressed, "+"/"–" via summary::after, no JS) is styled
   in 32-kariera.css, not here — that file got there first and its selectors
   are bare (.faq-item summary), so they already apply to every page in the
   bundle. Styling it again here would just race the same properties; this
   file only adds the two-column layout kariéra's page does not use. ---------- */
.faq-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,3.5rem);align-items:start;}
@media (max-width:860px){.faq-split{grid-template-columns:1fr;}}
.faq-split-head .lede{margin-top:.8rem;}
.faq-split .faq-list{margin-top:0;}

/* ---------- /kalkulacky/: embedded paycalceu.com widgets ----------
   Each card now reads as a real tile even collapsed: icon, area tag,
   name and one-sentence description all sit in the summary, not hidden
   until opened. The iframe only gets its real src on first expand (see
   51-sluzby.js), so the page does not pull in six widgets nobody opened. */
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:1.2rem;margin-top:2.4rem;align-items:start;}
.calc-card{background:var(--paper);border:1px solid var(--line-light);border-radius:18px;overflow:hidden;
  transition:border-color .2s;}
.calc-card[open],.calc-card:hover{border-color:var(--copper);}
/* The opened card takes the full row — a widget stretched to half of 1320px
   is cramped, and the collapsed neighbours still read fine stacked below it. */
.calc-card[open]{grid-column:1 / -1;}
.calc-card > summary{list-style:none;cursor:pointer;padding:1.4rem 1.5rem;display:flex;
  align-items:center;gap:1.1rem;min-height:44px;}
.calc-card > summary::-webkit-details-marker{display:none;}
.calc-card > summary::marker{content:"";}
.calc-card > summary:focus-visible{outline:3px solid var(--copper-light);outline-offset:-3px;border-radius:12px;}
.calc-icon{flex:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--copper);
  display:flex;align-items:center;justify-content:center;color:var(--copper-deep);}
.calc-head{flex:1;min-width:0;}
.calc-tag{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--copper-deep);}
.calc-title{display:block;margin-top:.3rem;font-family:var(--font-head);font-weight:600;font-size:1.3rem;color:var(--ink);}
.calc-summary-desc{display:block;margin-top:.35rem;font-size:.92rem;line-height:1.5;color:var(--ink-dim);max-width:46ch;}
.calc-chev{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--copper);
  display:flex;align-items:center;justify-content:center;color:var(--copper-deep);font-size:1.05rem;
  transition:transform .25s var(--ease);}
.calc-chev::before{content:"+";}
.calc-card[open] .calc-chev{transform:rotate(45deg);}
.calc-body{padding:0 1.5rem 1.4rem;}
.calc-card iframe{display:block;width:100%;border:0;border-radius:10px;background:var(--cream);
  /* Height starts low and is driven up by postMessage once the widget measures its own
     content (see 51-sluzby.js) — a fixed guess would either clip the calculator or leave
     empty space, since the same widget renders at very different heights on mobile. */
  height:60px;transition:height .25s var(--ease);opacity:0;}
.calc-card.ready iframe{opacity:1;}
.calc-card .calc-loading{font-size:.82rem;font-weight:600;color:var(--ink-dim);margin-bottom:.9rem;}
.calc-card .calc-src{font-size:.78rem;color:var(--ink-dim);margin-top:.9rem;}
.calc-card .calc-src a{color:var(--copper-deep);font-weight:600;}
.calc-card .notice{margin-top:.9rem;}
.calc-card .link-more{display:inline-flex;align-items:center;gap:.35rem;margin-top:.9rem;font-weight:700;
  font-size:.9rem;color:var(--copper-deep);text-decoration:underline;text-underline-offset:3px;min-height:44px;}

/* Fullscreen takeover: the widget asks the host (postMessage) to let it fill the
   viewport on devices without native iframe Fullscreen API (notably iOS Safari). */
.calc-card iframe.maxi{position:fixed;inset:0;z-index:1000;width:100%;height:100%!important;border-radius:0;margin:0;}
body.calc-maxi-open{overflow:hidden;}

@media (prefers-reduced-motion: reduce){
  .calc-card iframe{transition:none;}
}

/* ---- 32-kariera.css ---- */
/* Styles for /kariera/ and /kontakt/. */

/* ---------- two-card split (reuses .job-card for visual consistency) ----------
   Fixed column count, not auto-fit: with exactly two cards auto-fit measured
   narrower than the full wrap on review — explicit 1fr/1fr always fills it. */
.kar-split{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.4rem;}
@media (max-width:700px){.kar-split{grid-template-columns:1fr;}}

/* ---------- six reasons to join: full-width 3x2, bigger type (review 27.10.) ---------- */
.kar-reasons{grid-template-columns:repeat(3,minmax(0,1fr));}
.kar-reasons .reason-card h3{font-size:1.25rem;}
.kar-reasons .reason-card p{font-size:1.02rem;}
@media (max-width:860px){.kar-reasons{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.kar-reasons{grid-template-columns:1fr;}}

/* ---------- career ladder: two columns so it uses the full wrap width ----------
   Two independent .ladder lists (not one list split by CSS) so each still gets
   its own correct :last-child connector-line cutoff from the shared ladder CSS. */
.kar-ladder-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4rem);}
.kar-ladder-col{display:flex;flex-direction:column;}
.kar-ladder-note{margin-top:1.6rem;background:var(--navy-2);border-radius:16px;padding:1.4rem 1.6rem;}
.kar-ladder-note p:last-child{margin-top:.5rem;color:var(--on-dark-dim);font-size:.94rem;}
@media (max-width:860px){.kar-ladder-grid{grid-template-columns:1fr;}}

/* ---------- cities: fill the row evenly (10 seals -> 5x2 fits exactly) ---------- */
.kar-cities{grid-template-columns:repeat(5,minmax(0,1fr));}
.kar-cities .city-seal h3{font-size:1.1rem;}
@media (max-width:1100px){.kar-cities{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:760px){.kar-cities{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:420px){.kar-cities{grid-template-columns:1fr;}}

/* ---------- contact-page "how booking works" steps, full width (review 27.10.) ---------- */
.kar-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,4vw,2.6rem);margin-top:2.8rem;}
.kar-step{display:flex;flex-direction:column;gap:.9rem;}
.kar-step h3{color:var(--on-dark);font-size:1.1rem;}
.kar-step p{color:var(--on-dark-dim);font-size:.95rem;}
@media (max-width:760px){.kar-steps{grid-template-columns:1fr;gap:2rem;}}

/* ---------- certificate / long-term value block ---------- */
.kar-cert{margin-top:2.6rem;}
.kar-cert .about-facts{grid-template-columns:repeat(2,minmax(150px,1fr));max-width:420px;}
.kar-cert .prose{margin-top:1.8rem;}
.kar-cert .notice{margin-top:1.4rem;}
.kar-cert .cta-row{margin-top:1.8rem;}

/* ---------- contact-page hero card (replaces a map, which CSP and GDPR rule out) ---------- */
.kar-office{background:var(--navy-2);border-radius:22px;padding:clamp(1.6rem,3vw,2.2rem);color:var(--on-dark);}
.kar-office address{font-style:normal;margin-top:.8rem;color:var(--on-dark-dim);line-height:1.6;}
.kar-office p{margin-top:.8rem;color:var(--on-dark-dim);}
.kar-office p a{color:var(--on-dark);font-weight:700;}
.kar-office .assistant-row{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line-dark);}


/* ---------- career form in a dialog (/kariera/) ---------- */
.career-dialog{width:min(860px,calc(100vw - 2rem));max-height:calc(100vh - 2rem);padding:clamp(1.3rem,3vw,2.2rem);
  border:0;border-radius:22px;background:var(--cream);color:var(--ink-soft);box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:auto;}
.career-dialog::backdrop{background:rgba(10,20,34,.6);}
.career-dialog__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;}
.career-dialog .eyebrow{color:var(--copper-deep);}
.career-dialog h2{font-size:clamp(1.6rem,3vw,2.1rem);color:var(--ink);margin-top:.4rem;}
.career-dialog__close{flex:none;width:44px;height:44px;border-radius:50%;font-size:1.7rem;line-height:1;color:var(--ink);border:1px solid var(--line-light);}
.career-dialog__lede{margin-top:.6rem;color:var(--ink-dim);}
.career-dialog .form-wrap{margin-top:1.4rem;}
.career-dialog .form-field label{color:var(--ink);}
.career-dialog .form-field input,.career-dialog .form-field select,.career-dialog .form-field textarea{
  background:var(--paper);border-color:rgba(15,29,48,.22);color:var(--ink);}
.career-dialog .form-msg{background:var(--navy-2);color:var(--on-dark);}

/* ---- 33-clanky.css ---- */
/* Styly pro /clanky/ a detail článku (src/article.html). Třídy prefixované "clanky-"
   nebo "article-", ať se nepotkají se styly ostatních oblastí webu. */

/* ---------- hero detailu článku ---------- */
.article-byline{margin-top:1.3rem;font-size:.92rem;font-weight:600;color:var(--on-dark-dim);}

/* ---------- dvousloupcový grid: text článku + sticky karta autora ----------
   Pod 1100px jede jako jeden sloupec (aside je v DOM za článkem, takže je pod ním
   i bez media query). Stejný grid používá i pásmo "Mohlo by vás zajímat" níž,
   ať se CTA řádek v patičce článku a nadpis/karty pod ním vizuálně lícují. */
.article-layout{display:grid;gap:clamp(2.4rem,5vw,3.6rem);}
@media (min-width:1100px){
  .article-layout{grid-template-columns:minmax(0,1fr) minmax(260px,340px);align-items:start;}
}

.article-aside__card{background:var(--paper);border:1px solid var(--line-light);border-radius:18px;overflow:hidden;}
.article-aside__card picture,.article-aside__card img{display:block;width:100%;height:auto;aspect-ratio:700/467;object-fit:cover;}
.article-aside__body{padding:1.5rem 1.4rem 1.7rem;}
.article-aside__name{font-weight:700;color:var(--ink);font-size:1.05rem;}
.article-aside__role{margin-top:.4rem;font-size:.92rem;color:var(--ink-dim);}
.article-aside__link{display:inline-block;margin-top:.9rem;font-weight:700;color:var(--copper-deep);text-decoration:none;}
.article-aside__link:hover{text-decoration:underline;}
.article-aside__cta{flex-direction:column;align-items:stretch;margin-top:1.3rem;gap:.7rem;}
.article-aside__cta .btn{width:100%;}
@media (min-width:1100px){
  .article-aside{position:sticky;top:calc(var(--bar-h) + var(--nav-h) + 1.5rem);}
}

/* ---------- rozcestník: hledání a filtrace kategorií ---------- */
.clanky-controls{display:flex;flex-wrap:wrap;gap:1.2rem 1.6rem;align-items:center;margin-top:1.8rem;}
.clanky-search-wrap{flex:1 1 280px;max-width:380px;}
.clanky-search{width:100%;min-height:44px;padding:.6rem 1.1rem;border-radius:100px;
  border:1.5px solid var(--line-light);background:var(--paper);color:var(--ink);font-size:.95rem;}
.clanky-search::placeholder{color:var(--ink-dim);}
.clanky-search:focus-visible{outline:2px solid var(--copper);outline-offset:1px;border-color:var(--copper);}
.clanky-chips{display:flex;flex-wrap:wrap;gap:.6rem;flex:2 1 420px;}
.clanky-count{margin-top:1.4rem;font-size:.9rem;font-weight:600;color:var(--ink-dim);}
.clanky-empty{margin-top:1.4rem;padding:1.4rem 1.6rem;border-radius:14px;background:var(--paper);
  border:1px solid var(--line-light);color:var(--ink-dim);}
.clanky-empty[hidden]{display:none;}

/* ---------- drobný disclaimer na konci článku ---------- */
.article-disclaimer{font-size:.88rem;color:var(--ink-dim);border-top:1px solid var(--line-light);padding-top:1.2rem;}