@charset "utf-8";
/* ============================================================
   PEERS REAL ESTATE: presentation site (D2 final)
   V1 photo hero base + V3 "Selected mandates" offering section.
   Brand register: takmer cierna a oranzova, svetly stred, tmave zaciatok a koniec.
   Pisma z Adobe Fonts kitu PEERS: Lora na nadpisy, Futura PT na text.
   ============================================================ */

:root{
  /* Znacka PEERS Real Estate. Hodnoty od grafika, ktory robil logo (27. 8. 2026):
     oranzova #e85d18, tmava seda #1a1b1f, svetla seda #f4f5f7. Su to presne farby
     z vektoru loga. Skorsia hodnota #E65803 od klienta bola o par bodov vedla. */
  --brand:         #e85d18;   /* oficialna oranzova: znacka, velke plochy, tlacidla */
  --brand-deep:    #bf4c13;   /* drobny text a linky na svetlom (4,93 na bielej) */
  --brand-on-dark: #e85d18;   /* na tmavej sedej ma oficialna oranzova 4,92, staci */
  --brand-tint:    color-mix(in srgb, #e85d18 10%, transparent);

  /* Svetle plochy */
  --bg:        #ffffff;
  --bg-alt:    #f4f5f7;       /* svetla seda od grafika */
  --surface:   #ffffff;

  /* Tmave plochy, tmava seda zo znacky */
  --field-deep:    #26272c;
  --field-deepest: #1a1b1f;

  /* Text */
  --ink:       #1a1b1f;       /* tmava seda zo znacky, 17,21 na bielej */
  --ink-body:  oklch(34% 0.004 260);
  --muted:     oklch(48% 0.004 260);
  --hairline:  oklch(90% 0.003 250);

  /* Text na tmavom */
  --on-dark:        oklch(96% 0.002 250);
  --on-dark-soft:   oklch(82% 0.003 250);
  --on-dark-faint:  oklch(70% 0.004 250);
  --hairline-dark:  oklch(38% 0.006 260);

  /* Pisma. Futura PT ma v kite iba rezy 400 a 700, ziadny light ani medium,
     preto su vahy nizsie zamerne len 400 alebo 700. */
  /* Pisma drzime u seba, viď fonts.css. Jost je docasna nahrada za Futuru PT,
     ktora sa z balika od Adobe servuje bez slovenskych znakov (BL-739). */
  --font-head: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "futura-pt", Futura, "Century Gothic", system-ui, Arial, sans-serif;

  --maxw: 1180px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  --r-pill: 100px;
  --r-card: 14px;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-soft: 0 1px 2px oklch(20% 0.004 260 / 0.05), 0 8px 28px oklch(20% 0.004 260 / 0.07);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* Keyboard focus: visible everywhere, brand-coloured. */
:where(a,button,select,input):focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:4px;
}
.hero :where(a,button):focus-visible,
.culture :where(a,button):focus-visible,
.statement :where(a,button):focus-visible,
.foot :where(a,button):focus-visible{ outline-color:var(--brand-on-dark); }
/* keep anchor-jump targets clear of the fixed nav */
:target{ scroll-margin-top:88px; }

body{
  margin:0;
  /* Na kratkej stranke (Novinky bez clankov) by patka inak zostala v strede
     okna a pod nou by svietil prazdny pruh. */
  min-height:100vh; display:flex; flex-direction:column;
  background:var(--bg);
  color:var(--ink-body);
  font-family:var(--font-body);
  font-weight:400;
  font-size:1.0625rem;          /* 17px */
  line-height:1.65;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--ink);
  font-weight:400;
  line-height:1.14;
  letter-spacing:-0.005em;
  text-wrap:balance;
  margin:0;
}
p{ margin:0; }
a{ color:inherit; }

main{ flex:1 0 auto; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* Section rhythm: varied, not uniform. */
section{ position:relative; }
/* Odsadenie sekcii sa odvija od SIRKY okna, nie od vysky. Kym stalo na 11vh,
   na vysokom monitore sa dve susedne sekcie scitali na 220 az 290 px prazdna
   a medzi blokmi vznikla diera (CEO 28. 8. 2026). */
/* Odsadenia dvoch susednych sekcii sa scitaju, takze medzi poslednym riadkom jednej
   a stitkom druhej bolo 173 px pri okne 1440 a 224 px pri 1920 (CEO 1. 9. 2026: prilis
   roztiahnute). Znizene na 121 a 144 px. Hodnota sa odvija od SIRKY okna, nie od vysky:
   pri vh sa na vysokom monitore medzery nafukovali este viac. */
.band{ padding-block:clamp(3rem, 4.2vw, 4.5rem); }
.band-tight{ padding-block:clamp(3.5rem, 7vh, 5.5rem); }

.eyebrow-once{
  font-family:var(--font-body); font-weight:700; font-size:0.8125rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--brand-deep);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.55rem;
  font-family:var(--font-body); font-weight:700; font-size:0.975rem;
  border-radius:var(--r-pill); padding:0.85rem 1.6rem;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background .18s var(--ease-out-quart), color .18s, border-color .18s, transform .18s var(--ease-out-quart);
}
.btn-primary{ background:var(--brand); color:oklch(99% 0.004 260); }
.btn-primary:hover{ background:var(--brand-deep); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--hairline); }
.btn-ghost:hover{ border-color:var(--brand-deep); color:var(--brand-deep); }
.btn-on-dark{ background:var(--on-dark); color:var(--field-deepest); }
.btn-on-dark:hover{ background:#fff; transform:translateY(-1px); }
.btn-ghost-dark{ background:transparent; color:var(--on-dark); border-color:var(--hairline-dark); }
.btn-ghost-dark:hover{ border-color:var(--on-dark); }
.btn .arrow{ transition:transform .2s var(--ease-out-quart); }
.btn:hover .arrow{ transform:translateX(3px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  --nav-p:0;                  /* scroll progress 0 (over hero) → 1 (solid). JS-driven. */
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  /* Fixed height: never changes on scroll, so the bar can't grow/jump. */
  height:72px;
  /* Lista je cez celu sirku, ale jej obsah stoji na tej istej osi ako text
     v hero (max --maxw). Bez toho sa na sirokom monitore logo a prava strana
     od seba rozliezli az ku krajom okna. */
  padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  border-bottom:1px solid transparent;
}
/* Solid background fades in gradually with --nav-p (no on/off jump). */
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:oklch(99% 0.004 260 / 0.92);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--hairline);
  box-shadow:0 1px 0 oklch(26% 0.004 260 / 0.03);
  opacity:var(--nav-p);
}
/* Text/logo colours interpolate between on-dark (hero) and ink (solid). */
.brand{ display:flex; align-items:center; text-decoration:none; }
/* Logo je vlozene priamo v HTML, aby sa tmava cast dala prefarbit na svetlu,
   kym navigacia lezi nad tmavym hero. Oranzova cast ostava vzdy oranzova. */
.brand__logo{ height:40px; width:auto; display:block; }
.brand__logo .logo__ink{ fill:color-mix(in oklab, var(--ink) calc(var(--nav-p)*100%), var(--on-dark)); }
.brand__logo .logo__mark{ fill:var(--brand); }

.nav-links{ display:flex; align-items:center; gap:2rem; }

/* Prepínač jazyka. Aktívny stav sa riadi cez aria-pressed, žiadna extra trieda. */
.lang{ display:flex; align-items:center; gap:0.1rem; }
.lang button{
  font-family:var(--font-body); font-size:0.78rem; font-weight:700;
  letter-spacing:0.06em; padding:0.3rem 0.5rem; border:0; background:transparent; cursor:pointer;
  color:color-mix(in oklab, var(--muted) calc(var(--nav-p)*100%), var(--on-dark-faint));
  transition:color .2s var(--ease-out-quart);
}
.lang button[aria-pressed="true"]{
  color:color-mix(in oklab, var(--brand-deep) calc(var(--nav-p)*100%), var(--brand-on-dark));
}
.lang button:hover{ color:color-mix(in oklab, var(--ink) calc(var(--nav-p)*100%), var(--on-dark)); }
.nav-links a.link{
  font-size:0.92rem; font-weight:400; text-decoration:none;
  color:color-mix(in oklab, var(--ink-body) calc(var(--nav-p)*100%), var(--on-dark-soft));
  position:relative; padding-block:0.2rem;
}
.nav-links a.link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
  background:color-mix(in oklab, var(--brand-deep) calc(var(--nav-p)*100%), var(--brand-on-dark));
  transition:width .28s var(--ease-out-quart);
}
.nav-links a.link:hover{ color:color-mix(in oklab, var(--brand-deep) calc(var(--nav-p)*100%), var(--on-dark)); }
.nav-links a.link:hover::after{ width:100%; }
.nav .cta-wrap .btn{ padding:0.6rem 1.3rem; font-size:0.9rem; }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:0.4rem; }
.nav-toggle span{ display:block; width:24px; height:2px; margin:5px 0;
  background:color-mix(in oklab, var(--ink) calc(var(--nav-p)*100%), var(--on-dark));
  transition:transform .3s, opacity .3s; }

/* ============================================================
   HERO: tmave pole s architektonickou fotkou
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  color:var(--on-dark); overflow:hidden; isolation:isolate;
  background:var(--field-deepest);
}
.hero__img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  object-position:center 30%;
}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, oklch(27% 0.004 260 / 0.62) 0%, oklch(27% 0.004 260 / 0.55) 38%, oklch(24% 0.004 260 / 0.88) 100%),
    linear-gradient(90deg, oklch(27% 0.004 260 / 0.55) 0%, oklch(27% 0.004 260 / 0.10) 60%);
}
.hero .wrap{ padding-bottom:clamp(3.5rem, 9vh, 7rem); padding-top:8rem; }
.hero__kicker{ color:var(--brand-on-dark); letter-spacing:0.18em; text-transform:uppercase; font-weight:700; font-size:0.8rem; }
.hero h1{
  color:var(--on-dark);
  font-size:clamp(2.6rem, 6vw, 5rem);
  font-weight:400; line-height:1.1; letter-spacing:-0.01em;
  max-width:18ch; margin-top:1.4rem;
}
.hero__lede{
  margin-top:1.6rem; max-width:52ch;
  font-size:clamp(1.05rem, 1.6vw, 1.3rem); line-height:1.55;
  color:var(--on-dark-soft); font-weight:400;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:2.4rem; }

/* ============================================================
   MISSION / VISION: light, type-led
   ============================================================ */
.lead-statement{
  font-family:var(--font-head); font-weight:400;
  font-size:clamp(1.7rem, 3.4vw, 2.9rem); line-height:1.24; letter-spacing:-0.005em;
  color:var(--ink); max-width:20ch; text-wrap:balance;
}
.lead-statement em{ font-style:italic; color:var(--brand-deep); }

.split{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(2rem, 6vw, 5.5rem); align-items:start; }
.split__body p + p{ margin-top:1.15rem; }
.split__body{ max-width:62ch; color:var(--ink-body); }
.section-label{ margin-bottom:1.1rem; display:block; }

.statement-rule{ width:54px; height:2px; background:var(--brand); margin-bottom:1.6rem; }

/* Vision callout: karta s jemnym oranzovym nadychom */
.vision{ background:var(--bg-alt); border-block:1px solid var(--hairline); }
.vision__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.vision__media{ border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-soft); aspect-ratio:4/5; }
.vision__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.vision__list{ list-style:none; padding:0; margin:1.8rem 0 0; display:flex; flex-direction:column; gap:1.15rem; }
.vision__list li{ display:flex; gap:0.9rem; align-items:flex-start; font-size:1.05rem; color:var(--ink-body); }
.vision__list svg{ flex:none; margin-top:0.28rem; color:var(--brand); }
.pull{ font-family:var(--font-head); font-style:italic; font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.35; color:var(--ink); margin-top:2.2rem; max-width:30ch; }

/* ============================================================
   PILLARS: typographic enumerated list (NOT a card grid)
   ============================================================ */
.pillars{ background:var(--bg); }
/* Nadpis sekcie ide cez celu sirku a podnadpis pod neho (CEO 31. 8. 2026). Dovtedy
   stal nadpis v lavej tretine (max-width 40ch) a lamal sa do troch riadkov, hoci
   vpravo bolo prazdno. Plati tam, kde vedla nadpisu nie je obrazok, ktory by to
   miesto vyplnil; sekcia Preco ma obrazok, tej sa to netyka. */
/* Medzera pod hlavickou sekcie je rovnaka ako pri Spoznajte partnerov (CEO 31. 8.
   2026). Dovtedy mali sekcie s touto hlavickou 64 px a partneri 38 px, takze
   Zavazok a O spolocnosti odskakovali od zvysku stranky. */
.pillars__head{ max-width:none; margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.pillars__head h2{ font-size:clamp(2rem,3.6vw,3rem); }
.pillars__lede{ color:var(--ink-body); margin-top:1.1rem; max-width:62ch; }

/* Riadky su odsadene uzsie, nez boli, aby text dostal viac miesta: 72 znakov na
   riadok namiesto 55. Pohodlne citanie je zhruba 60 az 75 znakov, pod 50 sa oko
   prilis casto vracia na zaciatok dalsieho riadku. */
.pillar{
  display:grid; grid-template-columns:3.4rem 1fr; gap:1.4rem;
  padding-block:clamp(1.8rem, 3.4vw, 2.6rem);
  border-top:1px solid var(--hairline);
  align-items:start;
}
.pillar:last-child{ border-bottom:1px solid var(--hairline); }
.pillar__num{
  font-family:var(--font-body); font-weight:400; font-size:clamp(1.5rem,2.4vw,2.1rem);
  color:var(--brand-deep); line-height:1; padding-top:0.2rem;
  font-variant-numeric:lining-nums; letter-spacing:0;
}
.pillar__body{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:2rem; }
/* Sluzby stratili cisla 01 az 07 (CEO 31. 8. 2026): hned za nimi nasledovala druha
   cislovana sekcia a citatel oba zoznamy scital do jedneho. Cislo nesie vyznam len
   pri troch pilieroch, kde je pocet sucastou posolstva. Bez neho pripadne cely
   riadok na text a lavy stlpec sa uvolni. */
.pillars--nonum .pillar{ grid-template-columns:1fr; gap:0; }
/* Bez cisla je lavy stlpec sirsi, tak dostane nadpis viac znakov na riadok: pri
   20ch sa „Poradenstvo v oblasti statnej pomoci a eurofondov" lamalo do troch
   riadkov, hoci vpravo od neho ostavalo prazdne miesto. */
.pillars--nonum .pillar h3{ max-width:26ch; }

/* V kartickach tecie obsah zhora: ikona, nadpis a text tesne pod nim. Zdielanie vysky
   riadkov cez subgrid, aby text zacinal vo vsetkych troch na tej istej linke, sme
   1. 9. 2026 skusali a zahodili: treti nadpis ma tri riadky a prve dva jeden, takze
   pod kratkymi vznikla 60 px diera. Karticky maju ram a rovnaku vysku, takze rozny
   zaciatok textu v nich nikto necita ako chybu, prazdne miesto ano. */
.promise__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2rem); }
/* Karticky splyvali so svetlosivym pasom pod nimi, klient chcel 31. 8. 2026 viac
   oranzovej. Oranzova je preto na hornej hrane, v jemnom prechode pozadia a v plnej
   farbe na ikone; text ostava na skoro bielom podklade, aby sa nezhorsila citatelnost. */
.promise-card{
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 9%, #fff), #fff);
  border:1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  border-top:3px solid var(--brand);
  border-radius:var(--r-card);
  padding:clamp(1.6rem,2.4vw,2.2rem);
  display:flex; flex-direction:column; gap:0.9rem;
  text-decoration:none; color:inherit;
  transition:border-color .25s var(--ease-out-quart), transform .25s var(--ease-out-quart), box-shadow .25s;
}
.promise-card:hover{ border-color:var(--brand); transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.promise-card .ico{ width:2.6rem; height:2.6rem; border-radius:50%; display:grid; place-items:center; background:var(--brand); color:#fff; }
/* Karticka je odkaz do sekcie, kde sa ta vec vysvetluje, preto sa pri prejdeni mysou
   ikona vymeni za sipku. Bez toho karticka pri hoveri vyzerala ako tlacidlo, ale klik
   nerobil nic (CEO 1. 9. 2026). Obe znacky stoja v tom istom policku mriezky, takze
   sa vymenia bez poskocenia. */
.promise-card .ico > *{ grid-area:1/1; transition:opacity .2s var(--ease-out-quart), transform .2s var(--ease-out-quart); }
.ico__arrow{ font-size:1.2rem; line-height:1; opacity:0; transform:translateX(-4px); }
.promise-card:hover .ico svg,
.promise-card:focus-visible .ico svg{ opacity:0; }
.promise-card:hover .ico__arrow,
.promise-card:focus-visible .ico__arrow{ opacity:1; transform:none; }
.promise-card h4{ font-size:1.25rem; color:var(--ink); }
.promise-card p{ color:var(--ink-body); font-size:0.98rem; }
.pillar h3{ font-size:clamp(1.35rem,2vw,1.7rem); letter-spacing:-0.015em; max-width:20ch; }
.pillar__practice{ color:var(--ink-body); }
.pillar__practice .tag{ display:block; font-family:var(--font-body); font-weight:700; font-size:0.74rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--muted); margin-bottom:0.5rem; }
.pillar__practice p + p{ margin-top:1.05rem; }

/* Hodnoty: zaverecne dva bloky (Zavazok voci klientom, O spolocnosti) nemaju
   cislo, preto nepouzivaju .pillar, ale rovnaky dvojstlpec ako .pillar__body,
   aby nadpis aj text sedeli v tej istej mriezke ako tri piliere nad nimi. */
.values__block{
  display:grid; grid-template-columns:3.4rem 0.8fr 1.2fr; gap:1.4rem 2rem;
  padding-block:clamp(1.8rem, 3.4vw, 2.6rem);
  border-top:1px solid var(--hairline); align-items:start;
}
.values__block > h3{
  grid-column:2; font-size:clamp(1.35rem,2vw,1.7rem); letter-spacing:-0.015em; max-width:20ch;
}
.values__block > .pillar__practice{ grid-column:3; }
/* Zavazok voci klientom: tri sluby pod sebou s oranzovou sipkou, presne ten isty
   prvok ako odrazky v hero. Prva verzia mala nad kazdym bodom hrubu oranzovu linku,
   ta ale citala ako podciarknutie nadpisu (CEO 31. 8. 2026) a plny akcent patri
   podla nasho checklistu vyhradne vyzve k akcii, nie statickemu zoznamu. */
.promise__lede{ max-width:62ch; }
.promise__three{
  list-style:none; margin:2rem 0 0; padding:0;
  display:grid; gap:0.7rem; max-width:62ch;
}
.promise__three li{ color:var(--ink); position:relative; padding-left:1.7rem; }
.promise__three li::before{
  content:"→"; position:absolute; left:0; top:0; color:var(--brand-deep);
}
.promise__close{ margin-top:2rem; max-width:62ch; }

/* O spolocnosti: bezny text v jednom stlpci, sirka na pohodlne citanie. */
.about__body{ max-width:62ch; }
.about__body p + p{ margin-top:1.15rem; }
@media (max-width: 900px){
  .values__block{ grid-template-columns:1fr; }
  .values__block > h3,
  .values__block > .pillar__practice{ grid-column:1; }
}

/* ============================================================
   OFFERING: selected mandates (V3 register, ported to V1 tokens)
   ============================================================ */
.offer{ background:var(--bg-alt); border-block:1px solid var(--hairline); }
.offer__head{ margin-bottom:1.8rem; max-width:56ch; }
.offer__head h2{ font-size:clamp(2rem,3.6vw,3rem); }
.offer__head p{ color:var(--muted); margin-top:0.6rem; }
.cats{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.3rem; }
.cat{
  font-family:var(--font-body); font-size:0.9rem; padding:0.5rem 1.1rem;
  border-radius:var(--r-pill); border:1px solid var(--hairline);
  background:var(--surface); color:var(--ink-body); cursor:pointer;
  transition:background .15s var(--ease-out-quart), color .15s, border-color .15s;
}
.cat.is-active{ background:var(--brand-deep); color:#fff; border-color:var(--brand-deep); }
.cat:not(.is-active):hover{ border-color:var(--brand-deep); color:var(--brand-deep); }
.filters{
  display:flex; flex-wrap:wrap; gap:0.6rem 1.2rem; padding:0.9rem 1.2rem;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card);
  margin-bottom:1.8rem; box-shadow:var(--shadow-soft);
}
.filter{ flex:1; min-width:150px; display:flex; flex-direction:column; gap:0.25rem; }
.filter label{ font-size:0.7rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); }
.filter .field{
  font-family:inherit; font-size:0.92rem; color:var(--ink); padding:0.5rem 0.1rem;
  border:none; border-bottom:1px solid var(--hairline); background:transparent;
}
.filter .field:focus{ border-bottom-color:var(--brand-deep); outline:none; }
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:1.3rem; }
.card{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-card);
  overflow:hidden; transition:transform .3s var(--ease-out-quart), box-shadow .3s var(--ease-out-quart);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.card__media{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--bg-alt); }
.card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease-out-quart); }
.card:hover .card__media img{ transform:scale(1.04); }
.card__tag{
  position:absolute; top:0.8rem; left:0.8rem; font-size:0.72rem; letter-spacing:0.04em;
  text-transform:uppercase; font-weight:700; color:#fff; background:oklch(34% 0.004 260 / 0.86);
  padding:0.3rem 0.7rem; border-radius:var(--r-pill); backdrop-filter:blur(4px);
}
.card__deal{
  position:absolute; top:0.8rem; right:0.8rem; font-size:0.72rem; font-weight:700;
  color:var(--brand-deep); background:oklch(99% 0.004 260 / 0.92);
  padding:0.3rem 0.7rem; border-radius:var(--r-pill);
}
.card__body{ padding:1.1rem 1.2rem 1.3rem; }
.card__loc{ font-size:0.8rem; color:var(--muted); }
.card__name{ font-family:var(--font-head); font-size:1.2rem; color:var(--ink); margin-top:0.2rem; }
.card__meta{ display:flex; gap:1.3rem; margin-top:0.9rem; padding-top:0.9rem; border-top:1px solid var(--hairline); font-size:0.88rem; }
.card__meta .k{ color:var(--muted); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; }
.card__meta .v{ color:var(--ink); font-weight:700; }
.card__foot{ display:flex; align-items:center; gap:0.6rem; margin-top:1rem; }
.card__avatar{
  width:30px; height:30px; border-radius:50%; background:var(--brand-tint); color:var(--brand-deep);
  display:grid; place-items:center; font-size:0.72rem; font-weight:700; font-family:var(--font-body);
}
.card__advisor{ font-size:0.82rem; color:var(--ink-body); }
.card__advisor b{ color:var(--ink); font-weight:700; }
.offer__empty{ color:var(--muted); padding:2.5rem 0 1rem; text-align:center; font-size:1rem; }

/* ============================================================
   CULTURE CODE: tichsi tmavy pas
   ============================================================ */
.culture{
  position:relative; color:var(--on-dark); overflow:hidden; isolation:isolate;
  background:var(--field-deep);
}
/* Text vlavo, fotka vpravo ako samostatny blok. Predtym tu ta ista fotka
   lezala v pozadi na 14 % pod tmavym zavojom, z coho ostali len obrysy
   sklenenych priecok a pravá polovica pasu bola prazdna (CEO 28. 8. 2026). */
.culture__split{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.culture__media{
  margin:0; border-radius:var(--r-card); overflow:hidden; aspect-ratio:4/3;
  border:1px solid var(--hairline-dark); box-shadow:0 20px 60px oklch(15% 0.004 260 / 0.45);
}
.culture__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.culture h2{ color:var(--on-dark); font-size:clamp(2rem,3.6vw,3rem); max-width:16ch; }
/* Zarovnanie do bloku podla CEO. hyphens delí slová, inak by v slovencine
   vznikli medzi slovami diery. */
.culture__intro{
  color:var(--on-dark-soft); margin-top:1.2rem; font-size:1.1rem; font-weight:400;
  text-align:justify; hyphens:auto;
}
.culture__grid{ margin-top:clamp(2.5rem,5vw,3.6rem); display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,290px),1fr)); gap:1.6rem 2.4rem; }
.culture__item{ padding-top:1.3rem; border-top:1px solid var(--hairline-dark); }
.culture__item h4{ color:var(--on-dark); font-size:1.18rem; }
.culture__item p{ color:var(--on-dark-soft); margin-top:0.5rem; font-size:0.98rem; line-height:1.6; }

/* ============================================================
   CLIENT PROMISE: the proof, light
   ============================================================ */
.promise__head{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:end; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.promise__head h2{ font-size:clamp(2rem,3.8vw,3.1rem); max-width:14ch; }
.promise__head p{ color:var(--ink-body); max-width:46ch; }

/* ============================================================
   STATEMENT / 5 PARTNERS: drenched close
   ============================================================ */
.statement{ background:var(--field-deepest); color:var(--on-dark); }
.statement__grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }
.statement h2{ color:var(--on-dark); font-size:clamp(2.2rem,4.2vw,3.4rem); line-height:1.1; max-width:16ch; }
.statement__body{ color:var(--on-dark-soft); max-width:54ch; }
.statement__body p + p{ margin-top:1.1rem; }
/* Bez kurzivy: bola to jedina veta v sekcii, ktora sa svojim sklonom lisila
   od vsetkeho okolo (CEO 28. 8. 2026). Pismo je to iste ako v nadpisoch. */
.signature{
  font-family:var(--font-head); font-weight:400;
  font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.3; color:var(--on-dark);
  border-top:1px solid var(--hairline-dark); padding-top:1.8rem; margin-top:2rem;
}
.partners{ display:flex; flex-direction:column; gap:0; border:1px solid var(--hairline-dark); border-radius:var(--r-card); overflow:hidden; }
.partner{ display:flex; align-items:center; gap:1.1rem; padding:1.15rem 1.4rem; border-bottom:1px solid var(--hairline-dark); }
.partner:last-child{ border-bottom:0; }
.partner__avatar{ width:2.9rem; height:2.9rem; border-radius:50%; flex:none; display:grid; place-items:center; background:linear-gradient(140deg, var(--brand) , var(--field-deep)); color:var(--on-dark); font-family:var(--font-body); font-size:1.05rem; font-weight:700; }
.partner__meta b{ font-family:var(--font-body); font-weight:700; font-size:1rem; color:var(--on-dark); display:block; }
.partner__meta span{ font-size:0.84rem; color:var(--on-dark-faint); }
.partners__note{ font-size:0.82rem; color:var(--on-dark-faint); margin-top:1rem; text-align:center; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ background:var(--bg-alt); border-top:1px solid var(--hairline); }

/* ============================================================
   NAVRAT HORE: splyvajuca sipka vpravo dole
   ============================================================ */
/* Objavi sa az po prvej obrazovke, aby na kratkych strankach neprekazala. Drzi sa
   tichy: biele koliesko s tenkou linkou, oranzove az pri prejdeni mysou. Plna oranzova
   patri vyzve k akcii v liste, nie pomocnemu ovladaciu (pravidlo 60-30-10). */
.to-top{
  position:fixed; right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem); z-index:60;
  width:2.75rem; height:2.75rem; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--surface); color:var(--ink); border:1px solid var(--hairline);
  font-size:1.15rem; line-height:1; box-shadow:var(--shadow-soft);
  opacity:0; pointer-events:none; transform:translateY(6px);
  transition:opacity .2s var(--ease-out-quart), transform .2s var(--ease-out-quart),
             background .15s, color .15s, border-color .15s;
}
.to-top.is-on{ opacity:1; pointer-events:auto; transform:none; }
.to-top:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }
@media (prefers-reduced-motion: reduce){
  .to-top{ transition:opacity .01s; transform:none; }
}
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.contact h2{ font-size:clamp(2.2rem,4vw,3.2rem); max-width:14ch; }
.contact__lede{ color:var(--ink-body); margin-top:1.2rem; max-width:46ch; font-size:1.08rem; }
.contact__actions{ display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:2rem; }
.contact__detail{ display:flex; flex-direction:column; gap:1.4rem; }
.contact__row{ border-top:1px solid var(--hairline); padding-top:1.1rem; }
.contact__row .k{ font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.contact__row .v{ font-family:var(--font-head); font-size:1.2rem; color:var(--ink); margin-top:0.35rem; }
.contact__row a.v{ text-decoration:none; }
.contact__row a.v:hover{ color:var(--brand-deep); }

/* Enquiry form: lands in the CRM as a Dopyt (inquiry), not as a deal. */
.form{ margin-top:2rem; display:flex; flex-direction:column; gap:1rem; }
/* `display:flex` by inak prebilo atribút hidden a odoslaný formulár by ostal
   na stránke vedľa poďakovania. */
.form[hidden]{ display:none; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ display:flex; flex-direction:column; gap:0.4rem; }
.field label{ font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.field input,.field textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--hairline); border-radius:8px;
  padding:0.75rem 0.9rem; width:100%;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--brand); }
.field textarea{ min-height:8rem; resize:vertical; }
/* Honeypot: off-screen, never shown, never announced. A human cannot fill it. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__note{ font-size:0.82rem; color:var(--muted); }
.form__status{ font-size:0.95rem; color:var(--brand-deep); }
.form__status[data-state="error"]{ color:var(--rust, #7E1717); }
/* Rovnaký odstup od tlačidiel, aký mal formulár: box nastupuje na jeho miesto. */
.form__sent{ margin-top:2rem; border:1px solid var(--hairline); border-radius:var(--r-card); padding:1.6rem; background:var(--surface); }
.form__sent h3{ font-size:1.3rem; color:var(--ink); }
.form__sent p{ color:var(--ink-body); margin-top:0.5rem; }
.card__enquire{
  margin-top:0.9rem; width:100%; justify-content:center;
  font-size:0.86rem; padding:0.6rem 1rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--field-deepest); color:var(--on-dark-soft); padding-block:2.6rem; border-top:1px solid var(--hairline-dark); }
.foot__grid{ display:flex; flex-wrap:wrap; gap:1.2rem 2rem; align-items:center; justify-content:space-between; }
.foot b{ font-family:var(--font-head); color:var(--on-dark); font-weight:700; font-size:1.05rem; }
.foot__legal{ font-size:0.84rem; color:var(--on-dark-faint); }
.foot__legal a{ color:var(--on-dark-soft); text-decoration:none; }
.foot__legal a:hover{ color:var(--on-dark); }

/* ============================================================
   REVEAL: visible by default; class only ENHANCES.
   ============================================================ */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo); transition-delay:calc(var(--i,0) * 70ms); }
.js .reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .split,.vision__grid,.promise__head,.statement__grid,.contact__grid,.pillar__body,.culture__split{ grid-template-columns:1fr; }
  .culture__media{ aspect-ratio:16/9; }
  .promise__grid{ grid-template-columns:1fr; }
  .vision__media{ aspect-ratio:16/10; max-height:420px; order:-1; }
  .statement__grid .partners{ order:-1; }
  .pillar{ grid-template-columns:3rem 1fr; gap:1rem; }
  .pillar__num{ font-size:1.5rem; }
  .pillars--nonum .pillar{ grid-template-columns:1fr; }
}
/* Medzi 901 a 1040 px je v liste pat odkazov, prepinac jazyka aj tlacidlo a hamburger
   sa este nezapina. Odkedy 31. 8. 2026 pribudla polozka Hodnoty, menu sa pri tychto
   sirkach tlacilo na logo, preto sa v tomto pasme stlacia medzery a pismo. */
@media (max-width: 1040px) and (min-width: 901px){
  .nav-links{ gap:1rem; }
  .nav-links a.link{ font-size:0.92rem; }
  .nav-links .btn{ padding:0.7rem 1.05rem; font-size:0.88rem; }
  .brand__logo{ height:34px; }
}
/* Hamburger sa zapina od 900 px (do 31. 8. 2026 to bolo 720 px). Po pridani polozky
   Hodnoty sa sirsia lista uz do tabletovej sirky nezmestila a prekryvala logo. */
@media (max-width: 900px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(82vw,340px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem;
    background:var(--field-deepest); padding:2rem 2rem;
    transform:translateX(100%); transition:transform .35s var(--ease-out-expo);
    box-shadow:-20px 0 60px oklch(20% 0.004 260 / 0.4); z-index:60;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a.link{ color:var(--on-dark-soft) !important; font-size:1.15rem; }
  .nav-links .cta-wrap{ margin-top:0.5rem; }
  .nav-toggle{ display:block; z-index:61; position:relative; }
  .nav-toggle.open span{ background:var(--on-dark) !important; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  body.nav-open{ overflow:hidden; }
  .culture__grid{ grid-template-columns:1fr; }
  .filter{ min-width:100%; }
}

/* ============================================================
   HERO: doplnky k novej struktrure (odrazky a rad disciplin)
   ============================================================ */
/* Riadok odborov: slovencina je dlhsia nez anglictina a pri max-width 60ch
   padalo posledne slovo (Pravo) samo na druhy riadok. Sirsi limit ho na
   beznej obrazovke udrzi v jednom riadku a text-wrap:balance sa postara,
   aby pri zuzeni okna vznikli dva vyvazene riadky, nie osamotene slovo. */
.hero__disciplines{
  margin-top:1.5rem; color:var(--on-dark-soft); font-weight:400;
  font-size:clamp(0.9rem,1.4vw,1.02rem); letter-spacing:0.02em; max-width:76ch;
  text-wrap:balance;
}
.hero__points{ list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:0.45rem; }
/* Sipka je odsadena absolutne, aby veta ostala bezny tok textu. Flex by z kazdeho
   kusa vety (aj z tucneho slova) spravil samostatny stlpec a na uzkej obrazovke by
   sa slova poprehadzovali. */
.hero__points li{ color:var(--on-dark); font-size:1.02rem; font-weight:400; position:relative; padding-left:1.7rem; }
.hero__points li::before{ content:"→"; position:absolute; left:0; top:0; color:var(--brand-on-dark); }
.hero__points strong{ font-weight:700; color:#fff; }

/* ============================================================
   PILIERE: tri vodorovne boxy (pokyn klienta v komentari vo Worde)
   ============================================================ */
/* Striedanie pozadi: sekcie sa maju od seba vizualne oddelit, aby dlha stranka
   nesplyvala do jednej plochy (CEO 31. 8. 2026). Poradie zhora nadol je
   Preco (biela), Tri veci (siva), Sluzby (biela), Hodnoty (siva), Zavazok (biela),
   O spolocnosti (siva), Tim (tmava). Dve susedne sekcie nikdy nemaju rovnaky podklad. */
.trio,
.band--tinted{ background:var(--bg-alt); border-block:1px solid var(--hairline); }
/* Rovnaky dovod ako pri .pillars__head: nadpis nema zostavat zalomeny v lavej
   polovici, ked vedla neho nic nie je (CEO 31. 8. 2026). */
.trio__head{ max-width:none; margin-bottom:clamp(2rem,4vw,3rem); }
.trio__head h2{ font-size:clamp(2rem,3.6vw,3rem); }

/* ============================================================
   TIM: profily partnerov (foto vlavo, medailonik vpravo)
   ============================================================ */
/* Text ide na celu sirku obsahu (ako spolocna fotka pod nim), nie do uzkeho
   stlpca. Ziadal CEO 28. 8. 2026. */
.team__head{ margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.team__head h2{ font-size:clamp(2rem,3.6vw,3rem); }
.team__intro p + p{ margin-top:1.1rem; }
.person{
  display:grid; grid-template-columns:190px 1fr; gap:clamp(1.4rem,3.5vw,2.8rem);
  padding-block:clamp(2rem,3.6vw,3rem); border-top:1px solid var(--hairline); align-items:start;
}
.person:last-of-type{ border-bottom:1px solid var(--hairline); }
.person__photo{
  aspect-ratio:3/4; border-radius:var(--r-card); overflow:hidden;
  background:var(--bg-alt); border:1px solid var(--hairline);
  display:grid; place-items:center;
}
.person__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.team__photo{
  margin:clamp(2.2rem,4vw,3rem) 0 0; border-radius:var(--r-card);
  overflow:hidden; box-shadow:var(--shadow-soft); aspect-ratio:16/9;
}
.team__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.person__name{ font-family:var(--font-head); font-size:clamp(1.35rem,2.2vw,1.65rem); color:var(--ink); }
.person__role{ color:var(--brand-deep); font-weight:700; font-size:0.95rem; margin-top:0.3rem; }
.person__bio{ margin-top:1.1rem; }
.person__bio p + p{ margin-top:0.85rem; }
.person__links{ display:flex; flex-wrap:wrap; gap:0.4rem 1.6rem; margin-top:1.2rem; font-size:0.93rem; }
.person__links a{ color:var(--brand-deep); text-decoration:none; border-bottom:1px solid transparent; }
.person__links a:hover{ border-bottom-color:currentColor; }

/* ============================================================
   NOVINKY: prehlad clankov (domovska stranka aj stranka Novinky)
   ============================================================ */
.post{
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--r-card); overflow:hidden;
  text-decoration:none; transition:transform .3s var(--ease-out-quart), box-shadow .3s var(--ease-out-quart);
}
.post:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.post__body{ padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:0.5rem; }
.post__date{ font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.post__title{ font-family:var(--font-head); font-size:1.2rem; color:var(--ink); }
.post__lede{ color:var(--ink-body); font-size:0.96rem; }
.news__empty{ color:var(--muted); border:1px dashed var(--hairline); border-radius:var(--r-card); padding:2.4rem; text-align:center; }
.news__foot{ margin-top:2rem; }

/* Stranka Novinky a clanok: obsah pod fixnou navigaciou, bez hero fotky */
.page-head{ background:var(--field-deepest); color:var(--on-dark); padding-block:clamp(7rem,14vh,10rem) clamp(3rem,6vh,4.5rem); }
.page-head h1{ color:var(--on-dark); font-size:clamp(2.2rem,4.6vw,3.4rem); max-width:18ch; }
.page-head p{ color:var(--on-dark-soft); margin-top:1.1rem; max-width:56ch; }
.article{ max-width:72ch; }
.article h2{ font-size:clamp(1.5rem,2.6vw,2rem); margin-top:2.4rem; }
.article p{ margin-top:1.1rem; color:var(--ink-body); }
.article__meta{ color:var(--muted); font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase; }
.back-link{ display:inline-flex; gap:0.5rem; align-items:center; color:var(--brand-deep); text-decoration:none; font-size:0.95rem; margin-top:2.6rem; }
.back-link:hover{ border-bottom:1px solid currentColor; }

/* ============================================================
   MAPA: nacita sa az po kliknuti, aby stranka sama od seba
   neposielala navstevnika na servery Googlu (nemame este text o
   spracovani osobnych udajov)
   ============================================================ */
.map{ margin-top:1.6rem; border:1px solid var(--hairline); border-radius:var(--r-card); overflow:hidden; background:var(--surface); }
.map__head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0.6rem 1.2rem;
  padding:1.1rem clamp(1.3rem,3vw,1.8rem); border-bottom:1px solid var(--hairline);
}
.map__head .k{ font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.map__link{ font-size:0.9rem; color:var(--brand-deep); }
.map__ph{ padding:clamp(1.3rem,3vw,1.8rem); display:flex; flex-direction:column; align-items:flex-start; gap:0.8rem; }
.map__note{ font-size:0.84rem; color:var(--muted); max-width:44ch; }
.map iframe{ display:block; width:100%; height:340px; border:0; }

@media (max-width: 900px){
  .person{ grid-template-columns:130px 1fr; gap:1.2rem; }
}
@media (max-width: 560px){
  .person{ grid-template-columns:1fr; }
  .person__photo{ max-width:180px; aspect-ratio:1/1; }
}