/* =====================================================================
   Vzhľad „Dielňa" – zelená rezacia podložka, žlté pravítko, purpurová
   rezná čiara (CutContour). Načítava sa len keď je v administrácii
   zapnutý tento vzhľad; všetky funkcie a HTML ostávajú rovnaké.
   ===================================================================== */

@font-face { font-family: 'Big Shoulders Display'; font-weight: 800; font-display: swap;
  src: url('../fonts/bigshoulders-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Big Shoulders Display'; font-weight: 800; font-display: swap;
  src: url('../fonts/bigshoulders-800-latinext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-weight: 400; font-display: swap; src: url('../fonts/instrument-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Instrument Sans'; font-weight: 400; font-display: swap; src: url('../fonts/instrument-400-latinext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-weight: 600; font-display: swap; src: url('../fonts/instrument-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Instrument Sans'; font-weight: 600; font-display: swap; src: url('../fonts/instrument-600-latinext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-weight: 700; font-display: swap; src: url('../fonts/instrument-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Instrument Sans'; font-weight: 700; font-display: swap; src: url('../fonts/instrument-700-latinext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tokeny ---------- */
[data-skin="dielna"] {
  --mat:      #24533F;
  --mat-deep: #1B4232;
  --ruler:    #F3C318;
  --cut:      #E4007C;
  --ink:      #10231A;
  --ink-2:    #3C4E44;
  --blue:     #1F6B4A;          /* odkazy a akcenty = zelená */
  --blue-2:   #2E8A5F;
  --sky:      #F3C318;
  --sky-10:   #EEF4EF;
  --mist:     #F3F6F2;
  --paper:    #FFFFFF;
  --surface:  #FFFFFF;
  --surface-2:#F5F7F3;
  --muted:    #56695E;
  --line:     #D6E0D9;
  --shadow:   0 1px 2px rgba(16,35,26,.06), 0 8px 22px rgba(16,35,26,.07);
  --shadow-lg:0 2px 6px rgba(16,35,26,.08), 0 20px 44px rgba(16,35,26,.14);
  --grad:     linear-gradient(0deg, var(--mat), var(--mat));
  --display:  'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --body:     'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
  --grid: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px),
          linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
}
[data-skin="dielna"][data-theme="dark"] {
  --mat: #173628; --mat-deep: #112A1F;
  --ink: #EEF3EE; --ink-2: #C3D1C7; --blue: #7FD1A3; --blue-2: #9EE0B9;
  --sky-10: #1A2E23; --mist: #13241B; --paper: #0C1812; --surface: #15251C; --surface-2: #101E17;
  --muted: #98AE9F; --line: #2A3F32;
}
.cut-frame { display: none; }           /* vo vzhľade Modrý sa nezobrazuje */

/* ---------- typografia ---------- */
[data-skin="dielna"] h1, [data-skin="dielna"] h2, [data-skin="dielna"] h3 { letter-spacing: 0; line-height: .92; }
[data-skin="dielna"] h1 { font-size: clamp(3.6rem, 11vw, 8.6rem); }
[data-skin="dielna"] h2 { font-size: clamp(2.6rem, 7vw, 5rem); }
[data-skin="dielna"] h3 { font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1; }
[data-skin="dielna"] .section-label { font-family: var(--body); font-weight: 600; color: var(--muted); font-size: .92rem; }

/* ---------- pravítko a hlavička na podložke ---------- */
.ruler { display: none; }
[data-skin="dielna"] .ruler {
  display: block; height: 30px; position: relative; z-index: 41;
  background-color: var(--ruler);
  background-image:
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 50px),
    repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 100px);
  background-size: 100% 7px, 100% 12px, 100% 18px; background-repeat: repeat-x;
}
[data-skin="dielna"] .topbar {
  background-color: var(--mat); background-image: var(--grid);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  backdrop-filter: none; border-bottom: 0;
}
[data-skin="dielna"] .brand img { width: 84px; }
[data-skin="dielna"] .topbar.is-compact .brand img { width: 70px; }
[data-skin="dielna"] .nav a { color: #FFFFFF; }
[data-skin="dielna"] .nav a:not(.nav-cta)::after { background: var(--ruler); }
[data-skin="dielna"] .nav-cta { background: var(--ruler); color: var(--ink) !important; border-radius: var(--r-sm); box-shadow: none; }
[data-skin="dielna"] .nav-cta:hover { box-shadow: 0 6px 16px rgba(0,0,0,.25); }
[data-skin="dielna"] .theme-toggle, [data-skin="dielna"] .nav-burger { color: #fff; border-color: rgba(255,255,255,.35); background: transparent; }
@media (max-width: 900px) {
  [data-skin="dielna"] .nav.is-open { background: var(--mat); border-bottom: 3px solid var(--ruler); }
  [data-skin="dielna"] .nav.is-open a:not(.nav-cta) { color: #fff; border-color: rgba(255,255,255,.15); background: transparent; }
}

/* ---------- tlačidlá ---------- */
[data-skin="dielna"] .btn { border-radius: var(--r-sm); font-family: var(--body); font-weight: 700; letter-spacing: 0; }
[data-skin="dielna"] .btn-primary { background: var(--ruler); color: var(--ink); box-shadow: none; }
[data-skin="dielna"] .btn-primary:hover { box-shadow: 0 8px 18px rgba(16,35,26,.22); }
[data-skin="dielna"] .btn-ghost { color: var(--ink); border-color: var(--ink); }
[data-skin="dielna"][data-theme="dark"] .btn-ghost { color: var(--ink); border-color: var(--ink); }

/* ---------- úvod: podložka, video, rezná čiara ---------- */
[data-skin="dielna"] .hero {
  background-color: var(--mat); background-image: var(--grid);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  padding-top: clamp(2rem, 5vw, 3.6rem);
}
[data-skin="dielna"] .hero::before, [data-skin="dielna"] .hero-blobs, [data-skin="dielna"] .ribbon { display: none; }
[data-skin="dielna"] .hero-video .hero-bg { opacity: 1; filter: none; }
[data-skin="dielna"] .hero-video::after {        /* mriežka podložky cez video */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-color: rgba(12,34,24,.42); background-image: var(--grid);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
[data-skin="dielna"] .hero-in { z-index: 2; }
[data-skin="dielna"] .hero-text { position: relative; padding: clamp(1.4rem, 3vw, 2.4rem); }
[data-skin="dielna"] .hero h1 { color: #FFFFFF; }
[data-skin="dielna"] .hero .lede { color: #DDEBE3; max-width: 34ch; }
[data-skin="dielna"] .hero-kicker { font-family: var(--body); background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.22); color: #FFFFFF; border-radius: var(--r-sm); }
[data-skin="dielna"] .hero-kicker::before { background: var(--ruler); }
[data-skin="dielna"] .hero .btn-ghost { color: #fff; border-color: #fff; }
[data-skin="dielna"] .badges li { color: #DDEBE3; }
[data-skin="dielna"] .badges svg { color: var(--ruler); }
[data-skin="dielna"] .badges { padding-bottom: clamp(2rem, 5vw, 3.4rem); }

/* purpurová rezná čiara: pri načítaní sa nakreslí, potom beží ako nôž */
[data-skin="dielna"] .cut-frame { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
[data-skin="dielna"] .cut-frame rect { fill: none; stroke: var(--cut); stroke-width: 3; stroke-dasharray: 14 9;
  animation: cut-draw 1.8s cubic-bezier(.6,.05,.3,1) both, cut-march 1.2s linear 1.8s infinite; }
@keyframes cut-draw  { from { stroke-dashoffset: 2600; } to { stroke-dashoffset: 0; } }
@keyframes cut-march { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -46; } }

/* fotka zákazky ako nálepka + žlté logo z fólie */
.hero-sticker { position: relative; justify-self: center; width: min(520px, 100%); }
.hero-sticker-photo { background: #fff; padding: 12px; transform: rotate(-3deg); box-shadow: 0 22px 40px rgba(6,22,14,.45);
  animation: sticker-drop .9s cubic-bezier(.2,.9,.25,1.15) .4s both; }
.hero-sticker-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hero-sticker > .cut-frame { inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); transform: rotate(-3deg); }
.hero-sticker-logo img { position: absolute; right: -24px; bottom: 6px; width: clamp(110px, 30%, 180px); transform: rotate(9deg);
  filter: drop-shadow(0 12px 18px rgba(6,22,14,.45)); animation: sticker-slap .55s cubic-bezier(.3,1.4,.4,1) 1.1s both; }
.hero-sticker:not(:has(.hero-sticker-photo)) .hero-sticker-logo img { position: static; width: min(320px, 70%); margin-inline: auto; }
.hero-sticker-cap { margin: 1.4rem 0 0; color: #fff; font-size: .92rem; display: flex; align-items: center; gap: .8rem; }
.hero-sticker-cap::before, .hero-sticker-cap::after { content: ''; flex: 1; border-top: 2px solid rgba(255,255,255,.8); }
@keyframes sticker-drop { from { opacity: 0; transform: translateY(-36px) rotate(-9deg) scale(1.06); } }
@keyframes sticker-slap { from { opacity: 0; transform: rotate(18deg) scale(1.5); } }
@media (min-width: 900px) { [data-skin="dielna"] .hero-in { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; } }
@media (max-width: 700px) {
  .hero-sticker { width: calc(100% - 20px); }
  .hero-sticker-logo img { right: -12px; width: 108px; }
  [data-skin="dielna"] .hero-text { padding: 1.2rem 1.1rem 1.4rem; }
}

/* ---------- pás služieb = žlté pravítko ---------- */
[data-skin="dielna"] .marquee { background: var(--ruler); border: 0; }
[data-skin="dielna"] .marquee span { color: var(--ink); font-family: var(--body); font-weight: 700; }
[data-skin="dielna"] .marquee i { background: var(--cut); border-radius: 0; width: 7px; height: 7px; transform: rotate(45deg); }

/* ---------- služby: bez kariet, oddelené reznou čiarou ---------- */
[data-skin="dielna"] .svc { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 1.4rem 0; }
[data-skin="dielna"] .svc:hover { transform: none; box-shadow: none; }
[data-skin="dielna"] .svc + .svc { border-top: 2px dashed var(--cut); }
@media (min-width: 900px) {
  [data-skin="dielna"] .svc { padding: 0 2rem; }
  [data-skin="dielna"] .svc + .svc { border-top: 0; border-left: 2px dashed var(--cut); }
  [data-skin="dielna"] .svc:first-child { padding-left: 0; }
}
[data-skin="dielna"] .svc-icon { background: var(--mat); border-radius: var(--r-sm); box-shadow: none; }
[data-skin="dielna"] .svc:hover .svc-icon { transform: rotate(-6deg); }
[data-skin="dielna"] .svc h3 a { color: var(--ink); }

/* ---------- čísla ---------- */
[data-skin="dielna"] .stat { border-radius: var(--r-sm); box-shadow: none; border: 2px solid var(--ink); }
[data-skin="dielna"] .stat b { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; font-size: clamp(2.4rem, 5vw, 3.4rem); }

/* ---------- pozvánka do návrhára a kontakt na podložke ---------- */
[data-skin="dielna"] .designer-cta-in, [data-skin="dielna"] .contact {
  background-color: var(--mat); background-image: var(--grid);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; color: #fff; border: 0; box-shadow: none;
}
[data-skin="dielna"] .designer-cta-in { border-radius: var(--r-sm); }
[data-skin="dielna"] .designer-cta-in h2, [data-skin="dielna"] .contact h2 { color: #fff; }
[data-skin="dielna"] .designer-cta-in p, [data-skin="dielna"] .contact .lede { color: #DDEBE3; }
[data-skin="dielna"] .designer-cta-art svg { color: #fff; }
[data-skin="dielna"] .contact-mail a { color: #fff; border-color: var(--ruler); }
[data-skin="dielna"] .contact-note { color: #BFD3C6; }
[data-skin="dielna"] .contact-form { border-radius: var(--r-sm); box-shadow: 0 20px 40px rgba(6,22,14,.35); }
[data-skin="dielna"] .contact .btn-ghost, [data-skin="dielna"] .designer-cta .btn-ghost { color: #fff; border-color: #fff; }

/* ---------- galéria: hranaté fotky, pri prejdení rezná čiara ---------- */
[data-skin="dielna"] .ptile-g, [data-skin="dielna"] .tile-btn { border-radius: var(--r-sm); box-shadow: none; outline: 2px dashed transparent; outline-offset: 6px; transition: outline-color .2s ease; }
[data-skin="dielna"] .ptile-g:hover, [data-skin="dielna"] .tile-btn:hover { outline-color: var(--cut); }
[data-skin="dielna"] .ptile-g img, [data-skin="dielna"] .tile-btn img { border-radius: 0; }
[data-skin="dielna"] .ptile-g-tag, [data-skin="dielna"] .tile-chip { border-radius: 2px; background: var(--ruler); color: var(--ink); }
[data-skin="dielna"] .gallery { background: var(--paper); border: 0; }
[data-skin="dielna"] .filter, [data-skin="dielna"] .gallery-page .filters { border-radius: var(--r-sm); }
[data-skin="dielna"] .gallery-page .filters .filter.is-active, [data-skin="dielna"] .filter.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
[data-skin="dielna"] .btn-n { background: rgba(16,35,26,.15); }

/* ---------- postup, otázky, pätička ---------- */
[data-skin="dielna"] .step-list span { background: var(--ruler); color: var(--ink); border-radius: var(--r-sm); }
[data-skin="dielna"] .step-list li::after { background: none; border-top: 2px dashed var(--cut); height: 0; }
[data-skin="dielna"] .step-list li:hover span { background: var(--ink); color: #fff; }
[data-skin="dielna"] .faq-item { border-radius: var(--r-sm); box-shadow: none; }
[data-skin="dielna"] .faq-item[open] { border-color: var(--ink); }
[data-skin="dielna"] .footer { background: var(--paper); border-top: 6px solid var(--ruler); }
[data-skin="dielna"] .footer-logo { width: 84px; }
[data-skin="dielna"] .progress { background: var(--cut); }

/* ---------- stránky služieb, galéria, súkromie ---------- */
[data-skin="dielna"] .svc-hero {
  background-color: var(--mat); background-image: var(--grid);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; color: #fff;
}
[data-skin="dielna"] .svc-hero h1 { color: #fff; }
[data-skin="dielna"] .svc-hero .lede { color: #DDEBE3; }
[data-skin="dielna"] .svc-hero .btn-ghost { color: #fff; border-color: #fff; }
[data-skin="dielna"] .crumbs { background: var(--surface-2); }
[data-skin="dielna"] .svc-aside, [data-skin="dielna"] .svc-cta-in { border-radius: var(--r-sm); box-shadow: none; border: 2px solid var(--ink); }
[data-skin="dielna"] .tick-list li::before { border-radius: 2px; background-color: var(--mat); }

/* ---------- návrhár ---------- */
[data-skin="dielna"] .ptile, [data-skin="dielna"] .card, [data-skin="dielna"] .pick,
[data-skin="dielna"] .stage-box, [data-skin="dielna"] .layer, [data-skin="dielna"] .draft-bar { border-radius: var(--r-sm); box-shadow: none; }
[data-skin="dielna"] .stage-box {
  background-color: var(--mat); background-image: var(--grid);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; border: 0;
}
[data-skin="dielna"] .stage-hint { color: var(--muted); }
[data-skin="dielna"] .ptile.is-active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
[data-skin="dielna"] .vtab.is-active, [data-skin="dielna"] .swatch-size.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
[data-skin="dielna"] .dz-steps span { background: var(--ruler); color: var(--ink); border-radius: 2px; }
[data-skin="dielna"] .dz-steps li { border-radius: var(--r-sm); }
[data-skin="dielna"] .size-info { border: 2px dashed var(--cut); background: transparent; }
[data-skin="dielna"] .size-info.is-over { border-style: solid; }
[data-skin="dielna"] .pick { border-color: var(--ink); color: var(--ink); background: var(--surface); }
[data-skin="dielna"] .pick:hover { background: var(--sky-10); }
[data-skin="dielna"] .mobile-send { background: var(--ruler); color: var(--ink); border-radius: var(--r-sm); }
[data-skin="dielna"] .wiz-ico { background: var(--ruler); color: var(--ink); border-radius: var(--r-sm); }
[data-skin="dielna"] .wiz-card { border-radius: var(--r-lg); }

/* ---------- výkon a prístupnosť ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-skin="dielna"] .cut-frame rect, .hero-sticker-photo, .hero-sticker-logo img { animation: none; }
  [data-skin="dielna"] .hero-video .hero-bg { display: none; }
}

/* ---------- doladenie po kontrole ---------- */
[data-skin="dielna"] .hero h1 { font-size: clamp(3.3rem, 6.6vw, 6.4rem); }
@media (max-width: 700px) { [data-skin="dielna"] .hero h1 { font-size: clamp(2.9rem, 13.5vw, 3.9rem); } }
/* ilustrácia trička v pozvánke: biela kresba, žltý motív, purpurová rezná čiara */
[data-skin="dielna"] .dc-shirt { fill: transparent; stroke: #FFFFFF; }
[data-skin="dielna"] .dc-area { stroke: var(--cut); }
[data-skin="dielna"] .dc-dot { fill: var(--ruler); }
[data-skin="dielna"] .brand img, [data-skin="dielna"] .footer-logo, [data-skin="dielna"][data-theme="dark"] .brand img,
[data-skin="dielna"][data-theme="dark"] .footer-logo { filter: none; }
@media (min-width: 900px) { [data-skin="dielna"] .hero-in { grid-template-columns: 1.25fr .75fr; } }
[data-skin="dielna"] .hero h1 { font-size: clamp(3.3rem, 6.2vw, 5.6rem); }
@media (max-width: 700px) { [data-skin="dielna"] .hero h1 { font-size: clamp(2.9rem, 13.5vw, 3.9rem); } }

/* =================== typografická mierka (po kontrole) =================== */
/* Úzke písmo potrebuje väčší stupeň ako Poppins, ale nie všade rovnako veľký. */
[data-skin="dielna"] h1 { font-size: clamp(2.9rem, 6.4vw, 5.4rem); }
[data-skin="dielna"] h2 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); }
[data-skin="dielna"] h3 { font-size: clamp(1.45rem, 2.2vw, 1.75rem); }
[data-skin="dielna"] .hero h1 { font-size: clamp(3.3rem, 6.2vw, 5.6rem); }
/* nadpisy panelov v návrhári a bočných boxoch – malé */
[data-skin="dielna"] .card h2, [data-skin="dielna"] .svc-aside h2, [data-skin="dielna"] .contact-form h3,
[data-skin="dielna"] .wiz-slide h3 { font-size: clamp(1.55rem, 2.4vw, 1.9rem); line-height: 1; margin-bottom: .7rem; }
/* textové stránky (súkromie) – pokojnejšia mierka */
[data-skin="dielna"] article.page h2 { font-size: clamp(1.9rem, 3vw, 2.4rem); margin-top: 2.2rem; }
[data-skin="dielna"] body { font-size: 17.5px; }
[data-skin="dielna"] .lede { font-size: 1.15rem; line-height: 1.55; }
@media (max-width: 700px) {
  [data-skin="dielna"] h1 { font-size: clamp(2.6rem, 11.5vw, 3.3rem); }
  [data-skin="dielna"] h2 { font-size: clamp(2.1rem, 9.4vw, 2.6rem); }
  [data-skin="dielna"] .hero h1 { font-size: clamp(2.9rem, 13.5vw, 3.9rem); }
  [data-skin="dielna"] body { font-size: 17px; }
}

/* =================== video na mobile =================== */
/* Na telefóne ide video na výšku (vlastný orez), závoj je ľahší a tmavne len tam, kde je text. */
@media (max-width: 700px) {
  [data-skin="dielna"] .hero-video::after {
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(12,34,24,.62) 0%, rgba(12,34,24,.46) 48%, rgba(12,34,24,.12) 100%),
      linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 100% 100%, 20px 20px, 20px 20px;
  }
  [data-skin="dielna"] .hero-video .hero-bg { object-position: 50% 40%; }
  [data-skin="dielna"] .hero h1, [data-skin="dielna"] .hero .lede { text-shadow: 0 2px 14px rgba(8,24,16,.55); }
  [data-skin="dielna"] .hero-sticker { margin-top: .6rem; }
}

/* =================== drobnosti =================== */
[data-skin="dielna"] .footer-legal { max-width: 78ch; }

/* =================== mobil: video za textom, zmenšené =================== */
/* Na telefóne je video len za nadpisom a tlačidlami (nie za celou výškou úvodu), takže
   sa nepriblíži – vidno celý plotter aj to, čo kreslí. Spodok sa plynulo stratí v podložke. */
@media (max-width: 700px) {
  [data-skin="dielna"] .hero-video .hero-bg {
    height: 600px; bottom: auto; object-fit: cover; object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }
  [data-skin="dielna"] .hero-video::after {
    height: 600px; bottom: auto;
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(12,34,24,.42) 0%, rgba(12,34,24,.26) 55%, rgba(36,83,63,0) 100%),
      linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 100% 100%, 20px 20px, 20px 20px;
  }
  [data-skin="dielna"] .hero h1, [data-skin="dielna"] .hero .lede { text-shadow: 0 2px 12px rgba(8,24,16,.6); }
}

/* nadpisy bez osamotených slov, spojnica krokov nepreškrtáva nadpisy */
[data-skin="dielna"] h1, [data-skin="dielna"] h2, [data-skin="dielna"] h3 { text-wrap: balance; }
[data-skin="dielna"] .step-list li::after { display: none; }
[data-skin="dielna"] .step-list { gap: 2rem; }