/* Heyus landing page — public, client-facing. Self-contained, system fonts only. */

:root {
  --ink: #141712;          /* near-black base */
  --ink-2: #1b1f19;        /* raised surface */
  --ink-3: #23281f;        /* hairline-ish surface */
  --green: #06462B;        /* heritage deep green */
  --green-2: #0a5636;
  --paper: #f2efe8;        /* warm off-white text */
  --muted: #b5afa3;        /* secondary text, >=4.5:1 on ink */
  --yellow: #FFB90B;       /* brand accent — sparingly */
  --hairline: rgba(242, 239, 232, 0.14);
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--ink);
  color: var(--paper);
  line-height: 1.6;
  font-size: 1rem;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a { color: var(--paper); text-decoration-color: rgba(242, 239, 232, 0.4); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--yellow); }

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

.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;
}

/* ---------- preview banner ---------- */

.preview-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.875rem;
  text-align: center;
  padding: 0.6rem 1rem;
}

/* ---------- header ---------- */

.site-head {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
}

/* One quiet word of orientation next to the wordmark ("Podujatie") for the kinds
   where the visitor may not know what they landed on. It sits beside the brand,
   not in the headline stack, and is skipped when the eyebrow already says it. */
.head-kind {
  padding-left: 0.9rem;
  border-left: 1px solid rgba(242, 239, 232, 0.35);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}

.is-preview .site-head { top: 2.4rem; }

.wordmark {
  font-weight: 700;
  letter-spacing: 0.32em;
  font-size: 0.95rem;
  color: #fff;
}

.wordmark-dot { color: var(--yellow); letter-spacing: 0; }

/* The real mark, inlined from the brand assets. It is drawn with
   fill="currentColor", so it takes the colour of the text around it and works on
   the dark hero and in the footer without a second file. */
.brandmark {
  display: inline-flex;
  align-items: center;
  color: #fff;
}

.brandmark svg { display: block; height: 1.45rem; width: auto; }

/* The colour lockup is dark green and only legible on light — it is offered for
   pages that ask for it, and given a paper chip to sit on so it never disappears
   into the background. */
.brandmark-lockup {
  background: var(--paper);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
}

.brandmark-lockup svg { height: 1.15rem; }

.brandword {
  margin-left: 0.5rem;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: #fff;
}

/* ---------- layout ---------- */

.wrap { margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); }
.wrap-narrow { max-width: 42rem; }
.wrap-wide { max-width: 74rem; }

.section { padding-block: clamp(3.5rem, 9vw, 6.5rem); }

/* The ink sections read as one continuous column, so each hugs the one above it
   instead of stacking two full paddings. A section that starts a new surface
   keeps its own air: the green proof band, whatever follows it, and whichever
   section happens to come first under the hero. */
.section:not(.section-proof) + .section:not(.section-proof) { padding-top: 0; }

.section-headline {
  font-size: clamp(1.35rem, 3.2vw, 1.8rem);
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 1.75rem;
}

.section-headline::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: 0.85rem;
  background: var(--yellow);
  border-radius: 2px;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--ink-2); /* holds space before the image paints — no flash */
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(20, 23, 18, 0.35) 0%,
      rgba(20, 23, 18, 0.05) 30%,
      rgba(20, 23, 18, 0.15) 55%,
      rgba(20, 23, 18, 0.88) 88%,
      var(--ink) 100%);
}

.hero-body {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding: 0 clamp(1.25rem, 5vw, 2.5rem) clamp(2.75rem, 7vh, 5rem);
}

/* ---------- hero without a photo ----------
   Not every page has (or wants) a picture: a job ad or an invitation can arrive
   with none. Then the hero is type-led on the base colour — shorter, lit by a
   single deep-green wash — so it reads as a decision, not a failed image. */

.hero-plain {
  min-height: min(62svh, 31rem);
  align-items: center;
  background:
    radial-gradient(115% 80% at 8% -10%, rgba(10, 86, 54, 0.62) 0%, rgba(6, 70, 43, 0) 62%),
    var(--ink);
  border-bottom: 1px solid var(--hairline);
}

.hero-plain .hero-body {
  padding-block: clamp(5.5rem, 13vh, 7.5rem) clamp(2.5rem, 7vh, 4rem);
}

.hero-plain .hero-body::before {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3px;
  margin-bottom: 1.6rem;
  background: var(--yellow);
  border-radius: 2px;
}

.hero-plain .hero-headline { max-width: 24ch; }
.hero-plain .hero-sub { color: var(--muted); }

.eyebrow {
  color: var(--yellow);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.hero-headline {
  font-size: clamp(2.1rem, 7vw, 4.25rem);
  line-height: 1.05;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 22ch;
  text-wrap: balance;
}

.hero-sub {
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.5;
  color: rgba(242, 239, 232, 0.92);
  max-width: 46ch;
  text-wrap: pretty;
}

.hero-cta { margin-top: 1.9rem; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;           /* >=52px tap target */
  padding: 0.85rem 2.1rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary:hover { background: #ffc63a; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.55; cursor: default; transform: none; }

.btn-block { width: 100%; }

/* ---------- story ---------- */

.story-p {
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.75;
  max-width: 62ch;
  text-wrap: pretty;
}

.story-p + .story-p { margin-top: 1.15rem; }

.story-p:first-of-type {
  color: var(--paper);
  font-size: 1.15rem;
}

/* ---------- details (label/value pairs) ---------- */

.specs { display: grid; grid-template-columns: 1fr; }

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--hairline);
}

.spec-row:first-child { border-top: 1px solid var(--hairline); }

.spec-row dt {
  color: var(--muted);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.spec-row dd {
  font-weight: 600;
  text-align: right;
}

@media (min-width: 44rem) {
  .specs { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .spec-row:nth-child(2) { border-top: 1px solid var(--hairline); }
}

/* ---------- steps ----------
   Reads as a programme ("10:00 privítanie") or as a process ("ozvi sa → dohoda"):
   a numbered rail, hairlines only, no cards and no shadows. */

.steps { list-style: none; counter-reset: step; }

.step {
  counter-increment: step;
  position: relative;
  padding-left: 3.5rem;
  padding-bottom: 1.9rem;
}

.step:last-child { padding-bottom: 0; }

.step::before {                       /* the number */
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--ink);
  color: var(--yellow);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.step::after {                        /* the rail between numbers */
  content: "";
  position: absolute;
  left: 1.125rem;
  top: 2.4rem;
  bottom: -0.1rem;
  width: 1px;
  background: var(--hairline);
}

.step:last-child::after { content: none; }

.step-title {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  padding-top: 0.15rem;
  text-wrap: pretty;
}

.step-text {
  margin-top: 0.35rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 56ch;
  text-wrap: pretty;
}

/* ---------- faq ----------
   <details>/<summary>: it opens with JS off, is focusable and toggles on
   Enter/Space for free. The sign on the right shows +/− so it is obvious it
   expands, and the whole row is a >=48px tap target. */

.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item:first-child { border-top: 1px solid var(--hairline); }

.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 0;
  min-height: 3rem;
  list-style: none;                   /* kill the disclosure triangle */
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.5;
  text-wrap: pretty;
}

.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }

.faq-q:hover { color: #fff; }
.faq-q:hover .faq-mark { border-color: rgba(255, 185, 11, 0.55); }

.faq-mark {
  position: relative;
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  margin-top: 0.05rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

.faq-mark::before,
.faq-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 2px;
  border-radius: 1px;
  background: var(--yellow);
  transform: translate(-50%, -50%);
}

.faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq-item[open] .faq-mark::after { transform: translate(-50%, -50%) rotate(0deg); }

@media (prefers-reduced-motion: no-preference) {
  .faq-mark::after { transition: transform 0.2s ease; }
}

.faq-a { padding: 0 3rem 1.4rem 0; }

.faq-a p {
  color: var(--muted);
  line-height: 1.7;
  max-width: 60ch;
  text-wrap: pretty;
}

/* ---------- gallery ---------- */

.section-gallery { padding-block: 0 clamp(3.5rem, 9vw, 6.5rem); }

.gallery {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.5rem, 1.5vw, 1rem);
}

.gallery-item {
  overflow: hidden;
  border-radius: 6px;
  background: var(--ink-2);
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;          /* intrinsic box — no layout shift while lazy-loading */
  object-fit: cover;
}

.gallery-item:first-child { grid-column: 1 / -1; }
.gallery-item:first-child img { aspect-ratio: 16 / 9; }

@media (min-width: 44rem) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .gallery-item:first-child { grid-column: span 2; grid-row: span 2; }
  .gallery-item:first-child img { aspect-ratio: auto; height: 100%; }
}

/* ---------- proof ---------- */

.section-proof {
  background: var(--green);
  background: linear-gradient(160deg, var(--green-2) 0%, var(--green) 60%);
}

.stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1.75rem 1.25rem;
  margin-bottom: 2.5rem;
}

.stat { display: grid; gap: 0.15rem; }

.stat-value {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--yellow);
  line-height: 1.1;
}

.stat-label {
  color: rgba(242, 239, 232, 0.88);
  font-size: 0.9rem;
}

.quote {
  border-left: 3px solid var(--yellow);
  padding-left: 1.25rem;
}

.quote + .quote { margin-top: 2rem; }

.quote blockquote p {
  font-size: 1.12rem;
  line-height: 1.6;
  font-weight: 500;
  color: #fff;
  text-wrap: pretty;
}

.quote figcaption {
  margin-top: 0.6rem;
  color: rgba(242, 239, 232, 0.85);
  font-size: 0.92rem;
}

/* ---------- lead form ---------- */

.section-lead { scroll-margin-top: 3.25rem; }  /* clears the sticky preview banner on anchor jumps */

.lead-card {
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: clamp(1.5rem, 5vw, 2.5rem);
}

.lead-headline {
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lead-note {
  margin-top: 0.65rem;
  color: var(--muted);
  font-size: 0.98rem;
  text-wrap: pretty;
}

#lead-form { margin-top: 1.75rem; }

.lead-fields { border: 0; min-inline-size: 0; }

.field { margin-bottom: 1.1rem; }

.field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}

.field .optional { color: var(--muted); font-weight: 400; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  min-height: 3rem;              /* >=48px tap target */
  padding: 0.7rem 0.95rem;
  font: inherit;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid rgba(242, 239, 232, 0.25);
  border-radius: 8px;
}

.field textarea { resize: vertical; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255, 185, 11, 0.28);
}

.field input.is-invalid,
.field textarea.is-invalid { border-color: #e4574a; }

/* File field — a CV on a recruitment page. Styled as a full-width control so it
   does not read as an afterthought next to the boxes above it. */
.field input[type="file"] {
  width: 100%;
  padding: 0.7rem 0.95rem;
  font: inherit;
  font-size: 0.92rem;
  color: var(--paper);
  background: var(--ink);
  border: 1px dashed rgba(242, 239, 232, 0.3);
  border-radius: 8px;
}

.field input[type="file"]::file-selector-button {
  margin-right: 0.8rem;
  padding: 0.42rem 0.8rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.field input[type="file"].is-invalid { border-color: #e4574a; }

.field-hint {
  display: block;
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.field-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  margin-top: 1.4rem;
}

.field-consent input[type="checkbox"] {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.15rem;
  accent-color: var(--yellow);
}

.field-consent label {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.55;
}

.field-consent label a { color: var(--paper); }

.form-msg { min-height: 1.4rem; font-size: 0.92rem; }
.form-msg.is-error { color: #ff9a8d; font-weight: 600; }

.form-success {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  border-radius: 10px;
  background: rgba(6, 70, 43, 0.55);
  border: 1px solid rgba(255, 185, 11, 0.45);
  font-size: 1.08rem;
  font-weight: 600;
  color: #fff;
}

.field-submit { margin: 1.4rem 0 0; }

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--hairline);
  padding-block: 2.5rem 3rem;
}

.foot-brand {
  font-weight: 700;
  letter-spacing: 0.32em;
  font-size: 0.85rem;
}

.foot-line {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.brandmark-foot svg { height: 1.25rem; }
.brandword-foot { font-size: 0.95rem; }

.foot-legal {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.foot-legal a { color: var(--muted); }

/* ---------- reveal animation ----------
   landing.js stamps html.js, then adds .reveal-in as sections enter the viewport.
   Without JS (or with reduced motion) nothing is ever hidden. */

@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  html.js .reveal.reveal-in { opacity: 1; transform: none; }
}