/* ── tokens ─────────────────────────────────────────────────
   Forbes register: near-black on white, one burgundy, nothing else.
   Colour is never decorative — it marks a category, a link, or the
   point where something breaks.

   Type: Work Sans for anything structural (headlines, labels,
   navigation, numbers), Source Serif for anything read at length.
   That split is the magazine convention and it does the hierarchy
   work on its own, without extra colour or boxes.

   Both themes ship; the OS picks. Every colour below is swapped in
   the dark block, so no rule needs a theme-specific override.
─────────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  --bg:        #FFFFFF;
  --bg-2:      #F4F4F2;   /* cards, quiet panels */
  --bg-3:      #EDEDEA;
  --ink:       #101010;
  --ink-2:     #3D3D3D;
  --muted:     #767676;
  --rule:      #E0E0DD;   /* hairlines */
  --rule-bold: #101010;   /* the heavy editorial rule */
  --accent:    #8C2340;   /* bordová */
  --accent-2:  #6E1B2E;   /* hover, o stupeň tmavšia */
  --accent-lg: #8C2340;   /* len veľký displejový text */
  --on-accent: #FFFFFF;   /* text položený NA bordovú plochu */
  --wash:      rgba(140, 35, 64, .08);

  --sans:  "Work Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --gutter: 9.5rem;
  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --measure: 36rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0B0B0C;
    --bg-2:      #151517;
    --bg-3:      #1D1D20;
    --ink:       #F2F2F0;
    --ink-2:     #BDBDBA;
    --muted:     #8A8A87;
    --rule:      #2B2B2F;
    --rule-bold: #F2F2F0;
    /* Bordová sa na čiernom nedá udržať tmavá: #8C2340 má kontrast 1.9:1.
       Drobný text preto musí ísť do vínovej (4.5:1). Displejový nadpis je
       podľa WCAG „large text" a stačí mu 3:1, takže ostáva sýtejší a menej
       ružový — preto dve premenné namiesto jednej. */
    --accent:    #CE6076;
    --accent-2:  #E08B9C;
    --accent-lg: #B9485F;
    /* na svetlejšej bordovej z tmavej témy biela nestačí (3.78:1) */
    --on-accent: #14070B;
    --wash:      rgba(206, 96, 118, .12);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: .6rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── topbar ─────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem var(--pad);
  border-bottom: 2px solid var(--rule-bold);
}

.wordmark {
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.035em;
  text-decoration: none;
  line-height: 1;
}
.wordmark__suffix {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
}

.topnav {
  display: flex;
  gap: clamp(.9rem, 2.6vw, 2.1rem);
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.topnav a {
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.topnav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── hero ───────────────────────────────────────────────── */
.hero {
  padding: clamp(2.75rem, 7vw, 5.5rem) var(--pad) clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--rule);
}

/* the kicker above a headline — the most Forbes object on the page */
.eyebrow {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--accent);
  flex: none;
}

.hero__title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.1rem, 5.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -.038em;
  margin: 0;
  max-width: 30ch;
}
/* both lines are blocks so each balances its own wrap — as inlines they
   couldn't, and narrow screens orphaned the last word */
.hero__title span,
.hero__title em {
  display: block;
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  color: var(--accent-lg);
}

.hero__lead {
  max-width: var(--measure);
  margin: 1.8rem 0 0;
  font-size: 1.18rem;
  line-height: 1.58;
  color: var(--ink-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 2.2rem;
}

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .85rem 1.5rem;
  border: 2px solid var(--ink);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }

/* ── signature: the Q2C rail ────────────────────────────── */
.rail {
  margin: clamp(3rem, 7vw, 5.5rem) 0 0;
  padding: 0;
}

.rail__track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 1.5rem 0 0;
  display: flex;
  justify-content: space-between;
  max-width: 64rem;
}

/* the line itself, drawn on load */
.rail__track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(1.5rem + 6px);
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  animation: draw 1.1s cubic-bezier(.2,.7,.2,1) .15s forwards;
}

@keyframes draw { to { transform: scaleX(1); } }

.rail__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
  opacity: 0;
  animation: fade .5s ease forwards;
}
.rail__stage:nth-child(1) { animation-delay: .25s; }
.rail__stage:nth-child(2) { animation-delay: .45s; }
.rail__stage:nth-child(3) { animation-delay: .65s; }
.rail__stage:nth-child(4) { animation-delay: .85s; }
.rail__stage:nth-child(5) { animation-delay: 1.05s; }

@keyframes fade { to { opacity: 1; } }

.rail__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--ink);
}
.rail__stage:last-child .rail__dot { background: var(--ink); }

.rail__name {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rail__stage:last-child { align-items: flex-end; }

/* the joints where value leaks — marks only, the caption explains them */
.rail__leak {
  position: absolute;
  left: var(--at);
  top: calc(1.5rem + 6px);
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: fade .6s ease 1.35s forwards;
}
.rail__leakMark {
  display: block;
  width: 3px;
  height: 26px;
  background: var(--accent);
}

.rail__cap {
  max-width: 48rem;
  margin: 3rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: 1rem;
  color: var(--muted);
}

/* ── record grid: label gutter, wide body ───────────────── */
.record {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  gap: 0 3.5rem;
  padding: clamp(3rem, 6.5vw, 5.5rem) var(--pad);
  border-bottom: 1px solid var(--rule);
}
.record--last { border-bottom: 0; }

.record__gutter { position: relative; }

.code {
  position: sticky;
  top: 1.5rem;
  display: inline-block;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.code::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  background: var(--accent);
  margin-bottom: .75rem;
}

.record__body { max-width: 58rem; }
.record--wide .record__body { max-width: 74rem; }

.h2 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -.032em;
  margin: 0 0 1.3rem;
  max-width: 22ch;
  text-wrap: balance;
}

.prose {
  max-width: var(--measure);
  margin: 0 0 1.1rem;
  color: var(--ink-2);
}
.prose--lead {
  font-size: 1.14rem;
  line-height: 1.56;
  margin-bottom: 2.6rem;
  color: var(--ink);
}

/* ── people ─────────────────────────────────────────────────
   Two columns of the same ledger, each opened by the heavy rule.
─────────────────────────────────────────────────────────── */
.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4.5rem);
}

.person {
  border-top: 3px solid var(--rule-bold);
  padding-top: 1.4rem;
}

.person__tag {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}

.person__name {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 .35rem;
}

.person__role {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
  margin: 0 0 1.4rem;
}

.person .prose { max-width: none; font-size: 1rem; }

.people__note {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  color: var(--muted);
  max-width: none;
  margin: 2.6rem 0 0;
}

/* ── facts ──────────────────────────────────────────────── */
.facts { margin: 2.6rem 0 0; }

.facts__row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: .85rem 0;
  border-top: 1px solid var(--rule);
}
.facts__row:last-child { border-bottom: 1px solid var(--rule); }

.facts dt {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: .3rem;
}
.facts dd { margin: 0; font-size: .98rem; }

/* inside a half-width column the label gutter has to give way */
.facts--tight { margin-top: 2rem; }
.facts--tight .facts__row {
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: .7rem 0;
}
.facts--tight dt { font-size: .68rem; }
.facts--tight dd { font-size: .92rem; line-height: 1.5; }

/* ── service sheets ─────────────────────────────────────── */
.sheets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 1.25rem;
}

.sheet {
  background: var(--bg-2);
  border-top: 3px solid var(--rule-bold);
  padding: clamp(1.5rem, 3vw, 2.3rem);
}

.sheet__code {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .9rem;
}

.sheet__title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.12;
  letter-spacing: -.03em;
  margin: 0 0 .5rem;
}

.sheet__by {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 1.2rem;
}
.sheet__by a {
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.sheet__by a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.sheet__intro {
  margin: 0 0 1.8rem;
  font-size: 1rem;
  color: var(--ink-2);
}

.offer {
  list-style: none;
  margin: 0;
  padding: 0;
}
.offer li {
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  font-size: .96rem;
  color: var(--ink-2);
}
.offer b {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: .25rem;
}

/* ── steps: a real sequence, so numbers earn their place ── */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-left: 1px solid var(--rule);
}
@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.step {
  padding: 1.3rem clamp(1rem, 2vw, 1.6rem) 1.6rem;
  border-right: 1px solid var(--rule);
  border-top: 3px solid var(--rule-bold);
}
.step p { margin: 0 0 .7rem; font-size: .95rem; color: var(--ink-2); }

.step__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .7rem !important;
}
.step__num {
  font-family: var(--sans);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--accent);
  line-height: 1;
}
.step__time {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.step__title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -.025em;
  margin: 0 0 .5rem;
}

.step__out {
  font-family: var(--sans);
  font-size: .84rem !important;
  font-weight: 600;
  color: var(--ink) !important;
  margin: 1rem 0 0 !important;
  padding-top: .7rem;
  border-top: 1px solid var(--rule);
}

/* ── deliverables ───────────────────────────────────────── */
.deliverables {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 48rem;
}
.deliverables li {
  padding: 1.05rem 0 1.05rem 2.4rem;
  border-top: 1px solid var(--rule);
  position: relative;
  color: var(--ink-2);
  font-size: 1rem;
}
.deliverables li:last-child { border-bottom: 1px solid var(--rule); }
.deliverables li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55rem;
  width: 16px;
  height: 3px;
  background: var(--accent);
}
.deliverables b {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* ── contact ────────────────────────────────────────────── */
.contact {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 42rem;
}
.contact li {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: .95rem 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.contact li:last-child { border-bottom: 1px solid var(--rule); }

.contact__label {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact__value {
  font-family: var(--sans);
  font-weight: 600;
  justify-self: start;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}
a.contact__value:hover { color: var(--accent); }
span.contact__value { border-bottom: 0; font-weight: 500; }

.contact__value--pair { display: flex; flex-wrap: wrap; gap: .55rem; border-bottom: 0; }
.contact__value--pair a {
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}
.contact__value--pair a:hover { color: var(--accent); }
.contact__sep { color: var(--muted); font-weight: 400; }

/* content placeholders — visible on purpose while drafting */
.todo { background: var(--wash); box-shadow: 0 0 0 3px var(--wash); }

/* ── footer ─────────────────────────────────────────────── */
.foot {
  padding: 2.4rem var(--pad) 3.5rem;
  border-top: 2px solid var(--rule-bold);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .8rem 2rem;
  align-items: baseline;
}
.foot__name {
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.035em;
  margin: 0;
}
.foot__legal {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--muted);
  text-align: right;
}
.foot__legal p { margin: 0; }

@media (max-width: 860px) {
  .foot__legal { text-align: left; }
}

/* ── reveal on scroll ───────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}

/* ── narrow screens ─────────────────────────────────────── */
@media (max-width: 860px) {
  .record {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .code { position: static; }

  .rail__track { flex-direction: column; align-items: flex-start; gap: 1.2rem; padding-top: 0; }
  .rail__track::before { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto;
    transform: scaleY(0); transform-origin: top center; animation-name: drawY; }
  @keyframes drawY { to { transform: scaleY(1); } }
  .rail__stage { flex-direction: row; align-items: center; gap: .9rem; }
  .rail__stage:last-child { align-items: center; }
  .rail__leak { left: 6px; top: var(--at); }
  .rail__leakMark { width: 26px; height: 3px; }

  .people { grid-template-columns: minmax(0, 1fr); gap: 3rem 0; }

  .facts__row, .contact li { grid-template-columns: 1fr; gap: .25rem; }
  .facts--tight .facts__row { grid-template-columns: 1fr; gap: .25rem; }
  .steps { border-left: 0; grid-template-columns: minmax(0, 1fr); }
  .step { border-right: 0; padding-left: 0; padding-right: 0; }
}

@media (max-width: 520px) {
  .topbar { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .topnav { gap: 1rem; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .rail__track::before { transform: none; }
  .rail__stage, .rail__leak { opacity: 1; }
  .reveal { opacity: 1; transform: none; }
}