/* ══════════════════════════════════════════════════════════════
   HORNIK COMPANY — Second Pass, sibling register
   HORNIK LTD · Company No. 17332817

   Built on the Horník IT "Second Pass" identity, deliberately
   shifted so the two brands read as related but not identical.
   Every departure below is on purpose — do not "fix" them back:

   ─────────────────┬──────────────────┬─────────────────────────
                    │ Horník IT        │ Hornik Company
   ─────────────────┼──────────────────┼─────────────────────────
   ground           │ #F6EFDF          │ #FBF7EC (tints below it)
   structural ink   │ blue             │ tomato
   interactive ink  │ blue             │ blue (unchanged — only
                    │                  │ ink that clears AA)
   D/01 ghost       │ tomato           │ blue
   stickers         │ yes              │ dropped, zero rotation
   panel radius     │ 12px             │ 4px
   layout skeleton  │ alternating      │ mono index rail +
                    │ full-bleed       │ asymmetric column
   display type     │ Bricolage 800    │ Bricolage 700, smaller
   mono             │ annotation only  │ structural, +0.14em
   grain            │ .05              │ .035
   ─────────────────┴──────────────────┴─────────────────────────

   Unchanged and non-negotiable: three inks only, no fourth, no
   gradients, no blurred shadows, no glow, no serif, no Inter,
   overlaps via mix-blend-mode:multiply and never sampled into a
   variable, grain under the ink, motion only on press.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── ground ──────────────────────────────────────────────── */
  /* Sibling shift: the lightest tint is promoted to the page
     ground, the other two demote to bands. Smoother stock. */
  --paper:    #FBF7EC; /* unslop-ignore — cream is a client decision, kept on request */
  --paper-2:  #F6EFDF; /* unslop-ignore — band tint, same decision */
  --paper-3:  #EFE5D0; /* unslop-ignore — deepest band, same decision */
  --panel-bg: #FDFBF5; /* unslop-ignore — panels must sit above the new ground */

  /* ── inks ────────────────────────────────────────────────── */
  --marigold: #FFC42E;
  --blue:     #1E4FD8;
  --blue-2:   #1539A3;
  --tomato:   #F2542D;

  --ink:      #241E17;
  --ink-2:    #6A5F51;
  --ink-3:    #9C907E;
  --rule:     #DCCFB4;

  --ok:       #12A594; /* status dot only — never an area fill */

  /* ── spacing, 4px base ───────────────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;

  /* ── radius, assigned by role ────────────────────────────── */
  --r-chip:  4px; /* chips, buttons, inputs */
  --r-panel: 4px; /* sibling shift: 12px → 4px. Squarer, more technical. */
  /* no --r-sticker: stickers are dropped in this register */

  /* ── type ────────────────────────────────────────────────── */
  --disp: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --measure: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

/* ── EN / SK ────────────────────────────────────────────────
   The two languages are separate documents — index.html and
   sk/index.html — cross-linked with hreflang, so each has its
   own indexable URL. There is no runtime language switching and
   no JavaScript on the page at all. Edit copy in BOTH files.
   ─────────────────────────────────────────────────────────── */

body {
  margin: 0;
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* paper grain — UNDER the ink, never a top-layer overlay.
   .035 not .05: this brand prints on smoother stock. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, .disp {
  font-family: var(--disp);
  font-weight: 700;               /* sibling shift: 800 → 700 */
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0;
}

p { margin: 0; }

a { color: var(--blue); }
a:hover { color: var(--blue-2); }

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

/* ── mono, structural in this register ─────────────────────────
   Tomato is this brand's structural ink, but it is structural IN
   MASS ONLY — never in small type. Measured on these grounds it
   reaches just 3.2:1 on the paper and 2.8:1 on the tint bands, so
   any label set in it fails WCAG AA. It therefore carries the
   large outline numerals, the wordmark accent, the 3px emphasis
   rules and the pictogram fills, and nothing you have to read.
   ───────────────────────────────────────────────────────────── */
.label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;          /* sibling shift: .12 → .14 */
  text-transform: uppercase;
  color: var(--ink-2);             /* ink-3 measures 2.9:1 here — sub-AA */
  margin: 0;
}
.label.ink { color: var(--ink); }

/* D/06 — the tomato emphasis rule that opens the hero */
.eyebrow {
  width: 64px;
  border-top: 3px solid var(--tomato);
}

/* ── overprint ─────────────────────────────────────────────── */
.overprint { mix-blend-mode: multiply; }

/* D/01 — off-register pass. ONCE per page. Ghost in blue, not tomato. */
.reg { position: relative; display: inline-block; }
.reg::before {
  content: attr(data-t);
  position: absolute; left: -4px; top: 4px;
  color: var(--blue);
  mix-blend-mode: multiply;
  z-index: -1;
}
h1:has(.reg) { position: relative; z-index: 0; }

/* D/02 — drawn underline */
.squig { display: block; width: 100%; height: 12px; margin-top: -4px; }

/* D/04 — chip. The keyline is never optional. */
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--body);
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  padding: 5px 11px;
  border-radius: var(--r-chip);
  border: 2px solid var(--ink);
}
.chip.tom    { background: var(--tomato); color: var(--panel-bg); border-color: var(--tomato); }
.chip.mari   { background: var(--marigold); color: var(--ink); }
.chip.hollow { background: transparent; }

/* D/05 — hard offset shadow. Presses in, never lifts. */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--disp); font-weight: 700; font-size: 16px;
  text-decoration: none;
  padding: var(--s3) var(--s5);
  border: 2px solid var(--ink);
  border-radius: var(--r-chip);
  box-shadow: 5px 5px 0 var(--ink);
  transition: box-shadow .1s, transform .1s;
}
.btn:hover  { box-shadow: 7px 7px 0 var(--ink); }
.btn:active { box-shadow: 1px 1px 0 var(--ink); transform: translate(4px, 4px); }
.btn-blue  { background: var(--blue); color: #FBF7EC; }
.btn-blue:hover { background: var(--blue-2); color: #FBF7EC; }
.btn-paper { background: var(--panel-bg); color: var(--ink); }
.btn-paper:hover { color: var(--ink); }

/* D/06 — rules */
.rule-hard { border-top: 2px solid var(--ink); }
.rule-soft { border-top: 1px dashed var(--rule); }
.rule-mark { border-top: 3px solid var(--tomato); }

/* live status dot — the only permitted ambient motion */
.dot-live {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  animation: hc-blink 1.8s steps(1) infinite;
}
@keyframes hc-blink { 50% { opacity: .25; } }

/* ── layout shell ──────────────────────────────────────────── */
.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--s6);
}

.ico { width: 100%; height: 100%; display: block; }

/* ── sibling brand link ─────────────────────────────────────────
   Hornik IT is a brand, not a footnote, so it gets a mark and a
   pressable panel rather than an underlined URL. Blue "IT" mirrors
   their own wordmark; the rack pictogram is theirs too.
   ─────────────────────────────────────────────────────────────── */
.sib {
  display: inline-flex; align-items: center; gap: var(--s4);
  text-decoration: none; color: var(--ink);
  background: var(--panel-bg);
  border: 2px solid var(--ink);
  border-radius: var(--r-panel);
  box-shadow: 5px 5px 0 var(--ink);
  padding: var(--s3) var(--s5) var(--s3) var(--s3);
  transition: box-shadow .1s, transform .1s;
}
.sib:hover  { box-shadow: 7px 7px 0 var(--ink); color: var(--ink); }
.sib:active { box-shadow: 1px 1px 0 var(--ink); transform: translate(4px, 4px); }

.sib-ico  { width: 40px; height: 40px; flex: none; }
.sib-body { display: flex; flex-direction: column; gap: 2px; }
.sib-mark {
  font-family: var(--disp); font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em; line-height: 1.1;
}
.sib-it   { color: var(--blue); }
.sib-sub  {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.sib-go {
  font-family: var(--disp); font-weight: 700; font-size: 19px;
  color: var(--blue); margin-left: auto; padding-left: var(--s2);
}

/* footer variant: no pictogram, tighter */
.sib.sm { padding: var(--s2) var(--s4); gap: var(--s5); box-shadow: 4px 4px 0 var(--ink); }
.sib.sm:hover  { box-shadow: 6px 6px 0 var(--ink); }
.sib.sm:active { box-shadow: 1px 1px 0 var(--ink); }
.sib.sm .sib-mark { font-size: 15px; }

/* ── header ────────────────────────────────────────────────── */
.hdr { border-bottom: 2px solid var(--ink); }
.hdr-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5);
  padding: var(--s5) var(--s6);
  max-width: var(--measure); margin: 0 auto;
}
.mark {
  font-family: var(--disp); font-weight: 700; font-size: 21px;
  letter-spacing: -0.015em; line-height: 1;
  text-decoration: none; color: var(--ink);
}
.mark .co { color: var(--tomato); }
.hdr-right {
  display: flex; align-items: center; gap: var(--s5);
}
.hdr-mail {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  text-decoration: none;
}
.hdr-mail:hover { text-decoration: underline; }

/* language switch — real links to / and /sk/, not a JS toggle, so each
   language has its own indexable URL and its own hreflang */
.lang { display: inline-flex; border: 2px solid var(--ink); border-radius: var(--r-chip); overflow: hidden; }
.lang a {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em;
  padding: 4px 9px;
  background: transparent; color: var(--ink-2);
  text-decoration: none;
}
.lang a + a { border-left: 2px solid var(--ink); }
.lang a:hover { background: var(--paper-2); color: var(--ink); }
.lang a[aria-current="page"] { background: var(--ink); color: var(--paper); }

/* ── hero ──────────────────────────────────────────────────── */
.hero { position: relative; padding: var(--s9) 0 var(--s8); }
.hero-in {
  display: grid;
  grid-template-columns: 1.15fr .85fr;   /* asymmetric, never centred */
  gap: var(--s8);
  align-items: center;
}
/* Sized so BOTH language sets break on the <br> and nowhere else —
   the Slovak headline is ~4 characters longer and will wrap to a
   third line, which tears the D/01 ghost apart, if this grows. */
.hero h1 {
  font-size: clamp(34px, 4.4vw, 52px);   /* moderate, not monumental */
  max-width: 20ch;
  margin: var(--s5) 0 0;
}
.hero-sub {
  margin-top: var(--s5);
  max-width: 46ch;
  font-size: 17.5px;
  color: var(--ink-2);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s7); }
/* the drawn underline sits under one short phrase only */
.uline { display: inline-block; position: relative; }

/* hero plate: the drawn thing, not a stock mockup */
.plate {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: var(--r-panel);
  background: var(--panel-bg);
  padding: var(--s6);
  box-shadow: 6px 6px 0 var(--ink);
}
.plate-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--s5);
}
.plate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s5);
}
.plate-cell { text-align: center; }
.plate-cell svg { width: 96px; height: 96px; margin: 0 auto; }
.plate-cell .label { margin-top: var(--s2); }
.plate-cell.wide {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--s4); text-align: left;
  border-top: 1px dashed var(--rule);
  padding-top: var(--s5);
}
.plate-cell.wide svg { width: 62px; height: 62px; margin: 0; flex: none; }
.plate-cell.wide .label { margin-top: 0; }

/* registration crosshairs — mark the edges of a content area,
   never decorate the middle */
.crosshair { position: absolute; width: 15px; height: 15px; color: var(--ink-3); }
.crosshair.tl { top: -22px; left: -22px; }
.crosshair.br { bottom: -22px; right: -22px; }

/* ── services: indexed rows, not cards ─────────────────────── */
.svc { border-top: 2px solid var(--ink); }
/* Tint is set with an explicit class, not :nth-of-type — sibling
   counting silently reflows every band when a section is added. */
.svc.tint { background: var(--paper-2); }
/* padding-block, never the `padding: X 0` shorthand — these elements
   also carry .wrap, and the shorthand silently zeroes its gutters. */
.svc-in { padding-block: var(--s8); }
.svc-row {
  display: grid;
  grid-template-columns: 92px 1fr 132px;
  gap: var(--s6);
  align-items: start;
}
.svc-no {
  font-family: var(--disp); font-weight: 700; font-size: 44px; line-height: .85;
  color: transparent;
  -webkit-text-stroke: 2px var(--tomato);   /* structural ink */
}
.svc h2 { font-size: clamp(25px, 3vw, 33px); margin-bottom: var(--s3); }
.svc p { max-width: 54ch; color: var(--ink-2); }
.svc-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.svc-art svg { width: 112px; height: 112px; margin-left: auto; }
.svc .sib { margin-top: var(--s5); }

/* ── how we work: a schedule table, not three columns ──────── */
.how { border-top: 2px solid var(--ink); background: var(--paper-3); }
.how-in { padding-block: var(--s8); }
.how table { width: 100%; border-collapse: collapse; margin-top: var(--s6); }
.how caption { text-align: left; }
.how th, .how td {
  text-align: left; vertical-align: top;
  padding: var(--s5) var(--s4);
  border-top: 1px dashed var(--rule);
}
.how thead th {
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  padding-top: var(--s3); padding-bottom: var(--s3);
}
.how tbody th {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .14em; color: var(--ink);
  width: 92px;
}
.how .step-t { font-family: var(--disp); font-weight: 700; font-size: 19px; }
.how td.dur { font-family: var(--mono); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.how tbody td p { color: var(--ink-2); max-width: 52ch; margin-top: var(--s1); }

/* ── common questions ──────────────────────────────────────────
   Answers are laid out plainly rather than hidden behind <details>:
   a collapsed answer is worse for featured snippets, and the page
   carries no JavaScript to open one anyway.
   ─────────────────────────────────────────────────────────────── */
/* Tinted, not left on the page ground. It is the tallest band on the
   page and sits between .how (darkest) and .contact (lightest) — left
   untinted it merges with .contact into one pale slab and the band
   alternation collapses. */
.faq { border-top: 2px solid var(--ink); background: var(--paper-2); }
.faq-in { padding-block: var(--s8); }
.faq h2 { font-size: clamp(25px, 3vw, 33px); margin-bottom: var(--s6); }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6) var(--s7);
}
.faq-item { border-top: 1px dashed var(--rule); padding-top: var(--s4); }
.faq h3 {
  font-family: var(--disp); font-weight: 700; font-size: 18px;
  line-height: 1.2; max-width: 30ch; margin-bottom: var(--s2);
}
.faq p { color: var(--ink-2); max-width: 50ch; }

/* ── contact ───────────────────────────────────────────────── */
.contact { border-top: 2px solid var(--ink); }
.contact-in {
  padding-block: var(--s8);
  display: grid; grid-template-columns: 1fr .8fr; gap: var(--s8);
  align-items: start;
}
.contact h2 { font-size: clamp(29px, 3.6vw, 41px); margin-top: var(--s4); }
.contact-lede { margin-top: var(--s5); max-width: 40ch; color: var(--ink-2); }
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s6); }
.contact dl { margin: 0; }
.contact dt { margin-top: var(--s4); }
.contact dt:first-child { margin-top: 0; }
.contact dd {
  margin: var(--s1) 0 0;
  font-family: var(--mono); font-size: 14px; letter-spacing: .02em;
}
.contact dd a { text-decoration: none; }
.contact dd a:hover { text-decoration: underline; }

/* ── footer ────────────────────────────────────────────────── */
.ftr { border-top: 2px solid var(--ink); background: var(--paper-2); }
.ftr-in {
  padding-block: var(--s6) var(--s7);
  display: flex; flex-wrap: wrap; gap: var(--s5);
  justify-content: space-between; align-items: flex-start;
}
.ftr-legal {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.9;
  letter-spacing: .02em; color: var(--ink-2);
  max-width: 62ch;
}
.ftr-legal strong { color: var(--ink); font-weight: 600; }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-in,
  .contact-in { grid-template-columns: 1fr; gap: var(--s7); }
  .hero { padding-top: var(--s8); }
  .svc-row { grid-template-columns: 1fr; gap: var(--s4); }
  .svc-art svg { margin-left: 0; }
  .svc-no { font-size: 38px; }
  .faq-grid { grid-template-columns: 1fr; gap: var(--s5); }
}

@media (max-width: 620px) {
  .wrap, .hdr-in { padding-left: var(--s5); padding-right: var(--s5); }
  body { font-size: 16px; }
  .hdr-in { flex-wrap: wrap; align-items: center; gap: var(--s3); }
  .hdr-mail { display: none; }          /* the contact block carries it */
  .hero { padding: var(--s7) 0 var(--s7); }
  .hero h1 { max-width: none; }
  .svc-in, .how-in, .contact-in { padding-block: var(--s7); }
  .plate { padding: var(--s5); }
  .plate-grid { gap: var(--s4); }
  .plate-cell svg { width: 66px; height: 66px; }
  .crosshair { display: none; }
  .btn { width: 100%; justify-content: center; }

  /* the schedule table folds to stacked blocks */
  .how thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .how tr { display: block; border-top: 1px dashed var(--rule); padding: var(--s5) 0; }
  .how tr:first-child { border-top: 2px solid var(--ink); }
  .how th, .how td { display: block; border: 0; padding: 0; width: auto; }
  .how tbody th { margin-bottom: var(--s2); }
  .how td.dur { margin-top: var(--s2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── print ─────────────────────────────────────────────────── */
@media print {
  .lang, .hero-cta, .contact-actions { display: none; }
  body::before { display: none; }
  .btn, .plate { box-shadow: none; }
}