:root {
  --ink: #1D1D1F;
  --mut: #6E6E73;
  --body: #3A3A3C;
  --pan: #F5F5F7;
  --line: #D2D2D7;
  --blue: #0B5CAD;
  --r: 22px;
  --gut: 48px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 124px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FFFFFF; color: var(--ink); font-family: 'Archivo', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .75; }
h1, h2, h3, p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.t { font-weight: 640; font-stretch: 80%; letter-spacing: -.012em; line-height: 1.02; }
.h1 { font-size: clamp(40px, 5.4vw, 80px); }
.h2 { font-size: clamp(32px, 3.6vw, 52px); }
.h3 { font-size: clamp(24px, 2.2vw, 34px); }
.lead { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; color: var(--mut); }
.muted { color: var(--mut); }
.body { color: var(--body); line-height: 1.65; }
.center { text-align: center; }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gut); }
.sec { padding: 10px 0; }
.sec-lg { padding: 72px 0; }
.stack { display: flex; flex-direction: column; gap: 14px; }

/* header */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid #E8E8ED; }
.hdr .wrap { height: 60px; display: flex; align-items: center; gap: 32px; }
.hdr .logo img { height: 24px; width: auto; }
.nav { flex: 1; display: flex; justify-content: center; gap: 30px; font-size: 14px; color: var(--mut); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.lang { font-size: 13px; color: var(--mut); }
.lang b { color: var(--ink); }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.menu-btn span { display: block; width: 20px; height: 1.5px; background: var(--ink); position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ''; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--ink); }
.menu-btn span::before { top: -6px; } .menu-btn span::after { top: 6px; }
.mnav { display: none; }

/* buttons */
.pill { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 24px; border-radius: 999px; background: var(--ink); color: #FFFFFF; font-size: 15px; font-weight: 500; border: 0; cursor: pointer; white-space: nowrap; }
.pill.sm { height: 36px; padding: 0 16px; font-size: 13px; }
.pill.light { background: #FFFFFF; color: var(--ink); }
.lnk { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 500; color: var(--blue); }
.actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-top: 8px; }
.soon { align-self: flex-start; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: #FFFFFF; font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.eyebrow { font-size: 15px; font-weight: 600; color: var(--mut); }

/* panels */
.panel { position: relative; border-radius: var(--r); overflow: hidden; background: var(--pan); }
.photo { min-height: 760px; }
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo .fade { position: absolute; inset: 0; }
.photo.left .fade { background: linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.55) 32%, rgba(255,255,255,0) 55%); }
.photo.right .fade { background: linear-gradient(270deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.55) 32%, rgba(255,255,255,0) 55%); }
.photo .txt { position: absolute; top: 50%; transform: translateY(-50%); max-width: 540px; display: flex; flex-direction: column; gap: 14px; }
.photo.left .txt { left: 72px; }
.photo.right .txt { right: 72px; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 760px; }
.split .txt { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 64px 72px; }
.split > img { width: 100%; height: 100%; object-fit: cover; }
.dark { background: var(--ink); color: #FFFFFF; }
.caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px; background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0)); color: #FFFFFF; display: flex; flex-direction: column; gap: 6px; }
.caption span { color: #E5E5EA; font-size: 17px; }
.caption.top { top: 0; bottom: auto; background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,0)); align-items: center; text-align: center; padding: 56px 24px; }
.tile { position: relative; display: block; border-radius: var(--r); overflow: hidden; min-height: 720px; }
.tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* grids */
.g2, .g3, .g4, .g6 { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { border-radius: var(--r); background: var(--pan); padding: 36px; display: flex; flex-direction: column; gap: 12px; }
.card p { font-size: 16px; line-height: 1.6; color: var(--body); }

/* intro */
.intro { padding-top: 80px; padding-bottom: 56px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.intro .lead { max-width: 760px; }

/* spec lists */
.spec div { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 16px; }
.spec div span:first-child { color: var(--mut); }
.spec div span:last-child { font-weight: 600; text-align: right; }
.spec-v div { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.spec-v div span:first-child { font-size: 13px; font-weight: 600; color: var(--mut); }
.spec-v div span:last-child { font-size: 16px; line-height: 1.5; }
.timeline div { display: grid; grid-template-columns: 64px minmax(0, 1fr); padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.timeline b { font-weight: 600; }
ul.plain { margin: 0; padding-left: 20px; font-size: 20px; line-height: 1.7; color: var(--body); }

/* product cards */
.fmt .img { height: 400px; display: flex; align-items: flex-end; justify-content: center; gap: 24px; }
.fmt .img img:first-child { max-height: 100%; width: auto; }
.fmt .ico { height: 170px; width: auto; }
.designs { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; align-items: flex-end; margin-top: 20px; }
.designs img { height: 330px; width: auto; }
.label-card .img { height: 330px; border-radius: 14px; background: #FFFFFF; overflow: hidden; }
.label-card .img img { width: 100%; height: 100%; object-fit: contain; }
.vcard { border-radius: var(--r); background: var(--pan); overflow: hidden; display: flex; flex-direction: column; }
.vcard > img { width: 100%; height: 560px; object-fit: cover; object-position: 50% 60%; }
.vcard .in { padding: 36px 44px 40px; display: flex; flex-direction: column; gap: 6px; }
.obal .img { height: 300px; display: flex; align-items: flex-end; justify-content: center; }
.obal .img img { max-height: 100%; width: auto; mix-blend-mode: multiply; }
.founder { display: grid; grid-template-columns: 520px minmax(0, 1fr); }
.founder > img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 25%; min-height: 560px; }
.founder .in { padding: 56px 64px; display: flex; flex-direction: column; gap: 18px; }
.more a { border-radius: 18px; background: var(--pan); overflow: hidden; display: flex; flex-direction: column; }
.more a img { width: 100%; height: 200px; object-fit: cover; }
.more a div { padding: 22px; display: flex; flex-direction: column; gap: 6px; }

/* contact */
.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; padding: 64px 72px; }
.contact form { display: flex; flex-direction: column; gap: 14px; }
.contact input, .contact textarea { width: 100%; height: 52px; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; padding: 0 16px; font-size: 16px; }
.contact textarea { height: 130px; padding: 14px 16px; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; }
.chips legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.chips label { height: 38px; padding: 0 14px; display: flex; align-items: center; gap: 8px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.chips input { width: auto; height: auto; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sent { display: none; padding: 18px 20px; border-radius: 12px; background: #FFFFFF; border: 1px solid var(--line); font-size: 16px; }
.sent.on { display: block; }

/* footer */
.ftr { margin-top: 60px; background: var(--pan); font-size: 13px; line-height: 1.7; color: var(--mut); }
.ftr .wrap { padding-top: 40px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 20px; }
.ftr .cols { display: flex; flex-wrap: wrap; gap: 24px 72px; }
.ftr .cols > div { display: flex; flex-direction: column; }
.ftr strong { color: var(--ink); font-weight: 600; margin-bottom: 6px; }
.ftr a { color: var(--ink); }
.ftr .bottom { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; }
.ftr .bottom span:last-child { display: flex; gap: 22px; }
.demo-note { text-align: center; font-size: 12px; color: var(--mut); padding: 10px 16px; background: #FFFFFF; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  :root { --gut: 24px; }
  .nav, .lang, .hdr .pill { display: none; }
  .menu-btn { display: inline-flex; margin-left: auto; }
  .mnav.open { display: flex; flex-direction: column; gap: 4px; padding: 8px 24px 20px; border-top: 1px solid #E8E8ED; }
  .mnav a { padding: 12px 0; font-size: 17px; border-bottom: 1px solid #F0F0F2; }
  .mnav .pill { margin-top: 12px; align-self: flex-start; }
  .photo { min-height: 0; display: flex; flex-direction: column; }
  .photo > img { position: static; aspect-ratio: 16 / 10; height: auto; }
  .photo .fade { display: none; }
  .photo .txt, .photo.left .txt, .photo.right .txt { position: static; transform: none; max-width: none; padding: 32px; }
  .photo.flip-mobile > img { order: 2; }
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split .txt { padding: 40px 32px; }
  .split > img { aspect-ratio: 4 / 5; height: auto; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; }
  .founder > img { aspect-ratio: 1 / 1; min-height: 0; }
  .founder .in { padding: 36px 32px; }
  .contact { grid-template-columns: 1fr; gap: 40px; padding: 40px 32px; }
  .tile { min-height: 520px; }
  .designs img { height: 220px; }
  .vcard > img { height: 420px; }
}
/* ---------- phone ---------- */
@media (max-width: 700px) {
  :root { --gut: 16px; --r: 18px; }
  .g2, .g4 { grid-template-columns: 1fr; }
  .photo .txt, .split .txt, .founder .in, .card, .vcard .in { padding: 24px; }
  .contact { padding: 28px 20px; }
  .intro { padding-top: 48px; padding-bottom: 32px; }
  .tile { min-height: 440px; }
  .caption { padding: 24px; }
  .fmt .img { height: 320px; }
  .fmt .ico { height: 130px; }
  .designs { gap: 12px; }
  .designs img { height: 150px; }
  .obal .img { height: 220px; }
  .ftr .bottom { flex-direction: column; gap: 8px; }
  .spec div { flex-direction: column; gap: 2px; }
  .spec div span:last-child { text-align: left; }
}

/* logos and images inside text columns keep their own size */
.txt > img, .stack > img, .in > img { align-self: flex-start; }

/* ===== Apple-style layer ===== */
/* local product nav (sticky under the global bar) */
.lnav { position: sticky; top: 60px; z-index: 40; background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid #E8E8ED; }
.lnav .wrap { height: 52px; display: flex; align-items: center; gap: 28px; }
.lnav b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.lnav nav { flex: 1; display: flex; justify-content: flex-end; gap: 24px; font-size: 13px; color: var(--mut); white-space: nowrap; }

/* reveal on scroll */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .rv.in { opacity: 1; transform: none; }
.panel img, .tile img, .vcard > img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
a.tile:hover img, .more a:hover img { transform: scale(1.03); }
a:hover { opacity: 1; }
.nav a:hover, .lnk:hover, .ftr a:hover, .lnav nav a:hover { opacity: .7; }
.pill { transition: transform .2s, background .2s; }
.pill:hover { background: #000000; transform: scale(1.02); }
.pill.light:hover { background: #F5F5F7; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .panel img, .tile img, .vcard > img, .pill { transition: none; }
}

.call-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ink); color: #FFFFFF; font-size: 18px; }
.mlang { display: none; }

@media (max-width: 1100px) {
  .call-btn { display: inline-flex; margin-left: auto; }
  .menu-btn { margin-left: 0; }
  body.menu-open { overflow: hidden; }
  .mnav.open { position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: #FFFFFF; overflow-y: auto; padding: 16px 24px 40px; }
  .mnav a { font-size: 28px; font-weight: 600; letter-spacing: -.02em; padding: 14px 0; border-bottom: 1px solid #F0F0F2; }
  .mnav .mlang { display: block; padding: 18px 0; font-size: 17px; color: var(--mut); }
  .mnav .mlang a, .mnav .mlang b { font-size: 17px; border: 0; padding: 0; display: inline; }
  .mnav .pill { font-size: 17px; height: 52px; border: 0; }
  .lnav nav { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .lnav nav::-webkit-scrollbar { display: none; }
}

@media (max-width: 700px) {
  .lnav .wrap { gap: 16px; height: 48px; }
  .lnav b { font-size: 16px; }
  .lnav .pill { display: none; }
  .lnav nav { gap: 18px; }
  .photo > img { aspect-ratio: 4 / 3; }
  .photo .txt img { height: 84px !important; }
  /* swipe carousels */
  .more, .designs { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 8px; scrollbar-width: none; }
  .more::-webkit-scrollbar, .designs::-webkit-scrollbar { display: none; }
  .more > *, .designs > * { scroll-snap-align: start; }
  .designs { grid-auto-columns: 38%; justify-content: start; }
  .designs img { height: 230px; justify-self: center; }
  /* denser cards */
  .g3.checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .g3.checks .card { padding: 18px !important; }
  .g3.checks b { font-size: 16px !important; }
  .g3.checks span { font-size: 14px !important; }
  .g4.obaly { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .g4.obaly .card { padding: 16px !important; }
  .g4.obaly .img { height: 150px; }
  .g4.obaly h3 { font-size: 17px !important; }
  .g4.obaly p { font-size: 13px; }
  .label-card .img { height: 190px; }
  .fmt .img { height: 280px; }
  .tile { min-height: 0 !important; aspect-ratio: 4 / 5; }
  #puvod .tile { aspect-ratio: 3 / 4; }
  .vcard > img { height: 320px; }
  .timeline div { grid-template-columns: 52px minmax(0, 1fr); }
  .contact .t { word-break: keep-all; }
  .ftr .cols > div[style] { margin-left: 0 !important; }
}

/* ===== Apple-style interaction ===== */
/* press feedback */
.pill, .lnk, .call-btn, .menu-btn, .chips label, a.tile, .more a, .nav a, .lnav nav a { transition: transform .18s cubic-bezier(.2,.7,.2,1), opacity .2s, background .2s; -webkit-tap-highlight-color: transparent; }
.pill:active, .call-btn:active { transform: scale(.95); }
.lnk:active, .nav a:active, .lnav nav a:active { transform: scale(.96); opacity: .6; }
a.tile:active, .more a:active { transform: scale(.985); }
.chips label:active { transform: scale(.96); }
.chips label:has(input:checked) { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.chips input { accent-color: #FFFFFF; }

/* hamburger morphs to a cross */
.menu-btn span, .menu-btn span::before, .menu-btn span::after { transition: transform .3s cubic-bezier(.2,.7,.2,1), top .3s, background .2s; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* menu opens with a staggered cascade */
@media (max-width: 1100px) {
  .mnav.open { animation: menu-in .32s cubic-bezier(.2,.7,.2,1) both; }
  .mnav.open > * { animation: item-in .45s cubic-bezier(.2,.7,.2,1) both; }
  .mnav.open > *:nth-child(2) { animation-delay: .04s; } .mnav.open > *:nth-child(3) { animation-delay: .08s; }
  .mnav.open > *:nth-child(4) { animation-delay: .12s; } .mnav.open > *:nth-child(5) { animation-delay: .16s; }
  .mnav.open > *:nth-child(6) { animation-delay: .2s; } .mnav.open > *:nth-child(n+7) { animation-delay: .24s; }
}
@keyframes menu-in { from { opacity: 0; } }
@keyframes item-in { from { opacity: 0; transform: translateY(-10px); } }

/* local nav: current section */
.lnav nav a.on { color: var(--ink); font-weight: 600; }

/* form: sending state and confirmation */
.pill.busy { pointer-events: none; }
.pill.busy::after { content: ''; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #FFFFFF; border-radius: 50%; animation: spin .7s linear infinite; }
.pill.done { background: #1E7B3A; }
.sent.on { animation: item-in .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mnav.open, .mnav.open > *, .sent.on { animation: none; }
}

/* ===== v7: outdoor walls, per-product colour, strips (client feedback 1 Oct) ===== */
body { background: var(--bg); }
body.p-home { --bg: #FBF8F3; --pan: #F2ECE3; --tone: #E9DFD1; }
body.p-wilp { --bg: #F8F0E5; --pan: #F0E3D2; --tone: #E5CFB4; }
body.p-min { --bg: #F8F8F5; --pan: #EFEFEA; --tone: #E3E5E1; }
body.p-saffra { --bg: #FAF0EE; --pan: #F3E2DF; --tone: #EBCFCB; }
body.p-media { --bg: #FAF0EE; --pan: #F3E2DF; --tone: #EBCFCB; }
body.p-vyvoj { --bg: #F9EFE6; --pan: #F1E1D3; --tone: #E7CCB6; }
.hdr, .lnav { background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom-color: rgba(0,0,0,.06); }
.mnav.open { background: var(--bg); }
.photo.left .fade { background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, transparent 45%); }
.photo.right .fade { background: linear-gradient(270deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, transparent 45%); }
.panel.dark:not(.tile) { background: var(--tone); color: var(--ink); }
.panel.dark:not(.tile) span { color: var(--body) !important; }
.panel.dark:not(.tile) .pill.light { background: var(--ink); color: #FFFFFF; }
.ftr { background: var(--pan); }
.demo-note { background: var(--bg); }
.contact input, .contact textarea, .chips label { background: #FFFFFF; }

/* landing strips */
.strips { display: flex; height: calc(100svh - 60px); min-height: 620px; max-height: 960px; }
.strip { position: relative; flex: 1 1 0; overflow: hidden; color: var(--ink); transition: flex-grow .7s cubic-bezier(.2,.7,.2,1); }
.strip + .strip { box-shadow: inset 1px 0 0 rgba(0,0,0,.06); }
.strip > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.strip .st { position: absolute; left: clamp(20px, 2.4vw, 40px); right: 20px; top: clamp(28px, 4vh, 52px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.strip .num { display: flex; gap: 10px; align-items: baseline; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(29,29,31,.7); }
.strip .num b { color: var(--ink); }
.strip h2 { margin: 6px 0 0; font-size: clamp(30px, 2.7vw, 46px); line-height: 1; }
.strip p { font-size: 16px; line-height: 1.45; color: rgba(29,29,31,.78); max-width: 260px; }
.strip .soon { margin-top: 2px; }
.strip .go { position: absolute; left: clamp(20px, 2.4vw, 40px); bottom: 32px; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.35); backdrop-filter: blur(6px); transition: background .3s, color .3s, transform .3s; }
.strip:hover { opacity: 1; }
@media (hover: hover) and (min-width: 1101px) {
  .strips:hover .strip { flex-grow: .85; }
  .strips .strip:hover { flex-grow: 1.55; }
  .strip:hover > img { transform: scale(1.035); }
  .strip:hover .go { background: var(--ink); color: #FFFFFF; transform: translateX(6px); }
}
.strip:active .go { transform: scale(.94); }
@media (max-width: 1100px) {
  .strips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; max-height: none; }
  .strip { min-height: 72svh; }
  .strip > img { object-position: 50% 92%; }
}
@media (max-width: 700px) {
  .strips { grid-template-columns: 1fr; }
  .strip { min-height: 0; aspect-ratio: 3 / 4.4; }
  .strip > img { object-position: 50% 95%; }
  .strip .go { bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { .strip, .strip > img, .strip .go { transition: none; } }
.strip::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 46%; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0)); }
.strip .st, .strip .go { z-index: 1; }

/* phone: strips stacked flush, tighter rhythm (1 Oct) */
@media (max-width: 700px) {
  .strips { display: block; height: auto; min-height: 0; max-height: none; }
  .strip { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .strip + .strip { box-shadow: none; }
  .strip > img { object-position: 50% 100%; }
  .strip .st { top: 22px; gap: 10px; }
  .strip h2 { font-size: 30px; }
  .strip p { font-size: 15px; }
  .strip .go { width: 44px; height: 44px; bottom: 16px; }
  .sec { padding: 6px 0; }
  .sec-lg { padding: 36px 0; }
  .intro { padding-top: 40px; padding-bottom: 24px; gap: 12px; }
  .ftr { margin-top: 32px; }
  #kontakt.sec-lg { padding-top: 20px; }
}

/* maker line above the strips: Herbaport is the creator of all four */
.maker { background: var(--bg); border-bottom: 1px solid rgba(0,0,0,.06); }
.maker .wrap { height: 44px; display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.maker b { color: var(--ink); font-weight: 600; }
.strips { height: calc(100svh - 104px); }
@media (max-width: 1100px) { .strips { height: auto; } }
@media (max-width: 700px) { .maker .wrap { height: 38px; font-size: 11px; } }
.caption.light { background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); color: var(--ink); }
.caption.light span { color: var(--body); }
.tile.barista { min-height: 0 !important; aspect-ratio: 16 / 9; }
.tile.barista .caption.top { padding: 28px 24px; gap: 4px; }
.tile.barista .caption.top img { width: 72px !important; height: 72px !important; margin-bottom: 4px !important; }
@media (max-width: 700px) { .tile.barista { aspect-ratio: 4 / 5; } .tile.barista > img { object-position: 50% 100% !important; } }
@media (max-width: 700px) {
  .tile.barista { aspect-ratio: auto; display: flex; flex-direction: column; background: var(--pan); }
  .tile.barista > img { position: static; order: 2; aspect-ratio: 16 / 10; height: auto; }
  .tile.barista .caption.top { position: static; order: 1; background: none; padding: 24px 20px 16px; }
  .tile.barista .caption.top img { width: 56px !important; height: 56px !important; }
}

/* mobile menu: backdrop-filter on the bar made it the containing block of the fixed menu (menu got ~0 height) */
body.menu-open .hdr { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
@media (max-width: 1100px) {
  .mnav.open { position: fixed; top: 60px; left: 0; right: 0; height: calc(100dvh - 60px); z-index: 60; }
}

/* touch: 44px hit areas without changing the look */
@media (pointer: coarse), (max-width: 1100px) {
  .lnav nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
  .hdr .logo { display: inline-flex; align-items: center; min-height: 44px; }
  .lnk { min-height: 44px; }
  .contact a[href^="mailto"], .contact a[href^="tel"] { display: inline-flex; align-items: center; min-height: 44px; }
  .ftr a { display: inline-block; padding: 8px 0; }
}





/* longer German labels: keep the top bar on one line */
.nav a { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1360px) {
  .hdr .wrap { gap: 18px; }
  .nav { gap: 18px; font-size: 13px; }
}

/* ===== 4 Oct: Jiří's comments ===== */
.serif { font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.01em; line-height: 1.05; }
.hdr .logo img { height: 30px; }
/* maker line removed: strips start right under the bar */
.strips { height: calc(100svh - 60px); }
@media (max-width: 1100px) { .strips { height: auto; } }
/* strips: level 1 (logo or name) in one equal box so all four line up, level 2 on one shared line below */
.strip .st { gap: 0; }
.strip .num { margin-bottom: clamp(18px, 2.4vh, 28px); }
.strip h2.l1 { margin: 0; height: clamp(92px, 8.4vw, 132px); display: flex; align-items: flex-end; }
.strip h2.l1 .serif { font-size: clamp(30px, 2.5vw, 44px); line-height: 1.04; }
.strip h2.l1 .brand-mark { width: auto; max-width: 100%; height: clamp(76px, 7vw, 112px); }
.strip h2.l1 img.brand-mark[alt="WILP"] { height: clamp(68px, 6.2vw, 98px); }
.strip p.l2 { margin: 16px 0 0; min-height: 2.9em; max-width: 280px; }
@media (max-width: 700px) {
  .strip h2.l1 { height: 84px; }
  .strip h2.l1 .serif { font-size: 32px; }
  .strip h2.l1 .brand-mark { height: 76px; }
  .strip h2.l1 img.brand-mark[alt="WILP"] { height: 66px; }
  .strip p.l2 { min-height: 0; margin-top: 12px; }
}
/* who stands behind it: dark aged portrait, he stays half in shadow */
.who { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: #12110E; color: #F3F0E9; min-height: 560px; }
.who > img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }
.who .in { padding: clamp(36px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.who .eyebrow { color: #A39F94; }
.who .lead { color: #CFCAC0; max-width: 620px; }
.who .in > span:last-child { color: #A39F94; }
@media (max-width: 900px) { .who { grid-template-columns: 1fr; } .who > img { aspect-ratio: 1 / 1; height: auto; } }
/* minerálky hero: text pushed further right, bottles stay free */
.photo.right.far .txt { right: 48px; max-width: 440px; }
.photo.right.far .fade { background: linear-gradient(270deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.5) 26%, rgba(255,255,255,0) 44%); }
.brand-line { font-size: clamp(24px, 2vw, 30px); color: var(--ink); }
/* Šaffra: serotonin banner with the mortar, pictograms on the small cards, harvest divider */
.serbanner { display: flex; align-items: center; gap: clamp(24px, 4vw, 56px); padding: clamp(36px, 6vw, 80px) clamp(24px, 7vw, 110px); }
.serbanner .mortar { flex: none; width: clamp(72px, 9vw, 128px); height: auto; color: var(--ink); opacity: .8; }
.serbanner .t { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.2; font-weight: 500; }
.serbanner .sub { margin-top: 14px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--body); }
@media (max-width: 700px) { .serbanner { flex-direction: column; align-items: flex-start; } }
.checks .card.has-ico { position: relative; padding-right: 96px !important; }
.checks .pikto { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; object-fit: contain; opacity: .85; }
@media (max-width: 700px) { .checks .card.has-ico { padding-right: 18px !important; padding-top: 70px !important; } .checks .pikto { top: 16px; left: 18px; right: auto; transform: none; width: 44px; height: 44px; } }
.tile.sber { min-height: 0; aspect-ratio: 16 / 7; }
@media (max-width: 700px) { .tile.sber { aspect-ratio: 4 / 3; } }
/* WILP assortment + packaging */
.soon.sm { height: 22px; padding: 0 9px; font-size: 10.5px; margin-left: 8px; vertical-align: middle; }
.flav { position: relative; gap: 14px; }
.flav .sw { width: 44px; height: 6px; border-radius: 3px; }
.flav .packs { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--ink); }
.flav .packs span { display: inline-flex; align-items: center; gap: 6px; }
.flav .packs .off { color: var(--mut); }
.flav p { font-size: 15px; }
.pack .img { border-radius: calc(var(--r) - 8px); overflow: hidden; aspect-ratio: 4 / 3; background: #FFFFFF; }
.pack .img img { width: 100%; height: 100%; object-fit: cover; }
.pack .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
/* Média */
.media-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.media-imgs { display: grid; gap: 16px; }
.media-imgs .tile { min-height: 0; aspect-ratio: 4 / 3; }
.ucinky { margin: 0; padding-left: 22px; font-size: 18px; line-height: 1.65; color: var(--body); display: flex; flex-direction: column; gap: 10px; }
.ucinky b { color: var(--ink); font-weight: 600; }
.ucinky ul { margin: 6px 0 0; padding-left: 18px; font-size: 16px; }
.body.small { font-size: 14px; }
@media (max-width: 900px) { .media-grid { grid-template-columns: 1fr; } .media-imgs { grid-template-columns: 1fr 1fr; } }
.tile.lineup { min-height: 0; aspect-ratio: 2.06 / 1; }
@media (max-width: 700px) { .tile.lineup { aspect-ratio: 4 / 3; } .tile.lineup img { object-position: 30% 50%; } }
.tile.vid { min-height: 0; aspect-ratio: 16 / 9; background: #2a0d0b; }
.tile.vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.who { background: #26261C; }
.who > img { object-position: 45% 40%; }
/* PŘIPRAVUJEME badge inside spec rows: the row's first-child span rule greyed it out */
.soon, .spec .soon, .eyebrow .soon { color: #FFFFFF !important; }
.soon.sm { height: 24px; padding: 0 10px; font-size: 11.5px; letter-spacing: .07em; font-weight: 600; }
.founder > img { object-position: 50% 40%; }
.who > img { object-position: 50% 50%; }
/* phone: strip text sits over trees / the bottle drawing; a stronger soft light wash behind level 1 + 2 */
@media (max-width: 700px) {
  .strip::before { height: 62%; background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.62) 45%, rgba(255,255,255,0) 100%); }
  .strip p.l2 { color: rgba(29,29,31,.88); }
}
@media (max-width: 700px) {
  .strip::before { z-index: 1; }
  .strip .st, .strip .go { z-index: 2; }
}

/* ===== 5 Oct: Jiří's second round ===== */
.serbanner .sub.small { font-size: 14px; margin-top: 10px; }
/* founder: his B&W portrait with a 1996–2026 axis on the dark right side of the photo */
.founder .cb { position: relative; background: #0B0B0B; min-height: 560px; overflow: hidden; }
.founder .cb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 20%; }
.tl30 { position: absolute; top: 8%; right: 7%; bottom: 26%; display: grid; grid-template-columns: auto auto; grid-template-rows: auto 1fr auto; column-gap: 22px; color: #F2F2F2; }
.tl30 b { grid-column: 1; font-size: 15px; font-weight: 600; text-align: center; }
.tl30 .axis { grid-column: 1; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin: 8px 0; }
.tl30 .axis::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255,255,255,.75); }
.tl30 .axis i { display: block; width: 22px; height: 1px; background: rgba(255,255,255,.75); }
.tl30 p { grid-column: 2; grid-row: 1 / 4; align-self: center; text-align: right; font-style: italic; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.6; color: #EDEDED; }
@media (max-width: 900px) { .founder .cb { aspect-ratio: 4 / 5; min-height: 0; } .tl30 { top: 6%; bottom: 30%; right: 5%; column-gap: 14px; } .tl30 p { font-size: 13px; } }
/* services as shadow lettering on the plaster, like the leaf shadows */
.wallshadow { position: absolute; top: 9%; left: 9%; right: 6%; margin: 0; padding: 0; list-style: none; pointer-events: none;
  font-weight: 640; font-stretch: 80%; font-size: clamp(19px, 1.75vw, 27px); line-height: 1.5; color: rgba(70,40,18,.5); mix-blend-mode: multiply; filter: blur(.7px); transform: skewX(-6deg) rotate(-1.5deg); }
.wallshadow li::before { content: '• '; }
@media (max-width: 700px) { .wallshadow { font-size: 17px; top: 7%; } }
.founder .cb > img { object-position: 12% 20%; }
/* shadow lettering should read as light blocked by a stencil, not as print: softer, lighter, cast at an angle */
.wallshadow { font-weight: 500; color: rgba(90,52,22,.32); filter: blur(1.6px); transform: perspective(700px) rotateY(-14deg) skewX(-10deg) rotate(-2deg); transform-origin: left top; letter-spacing: .01em; }
.wallshadow li::before { content: none; }
.wallshadow { color: rgba(80,45,18,.44); filter: blur(1px); font-weight: 560; }
.wallshadow { transform: none; filter: blur(.9px); }
.tile.lab { min-height: 0; aspect-ratio: 1 / 1; align-self: center; } .tile.lab > img { object-position: 50% 0%; }
.strip > picture { display: contents; } .strip > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); } @media (hover: hover) and (min-width: 1101px) { .strip:hover > picture > img { transform: scale(1.035); } }

/* cookie consent (live site only) */
.consent { position: fixed; z-index: 55; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 12px 12px 12px 22px; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 6px 24px rgba(0, 0, 0, .07); font-size: 14px; line-height: 1.45; color: var(--body); }
.consent[hidden] { display: none; }
.consent p { flex: 1; }
.consent p a { color: var(--blue); white-space: nowrap; }
.consent div { display: flex; gap: 8px; flex: none; }
.consent .pill.light { border: 1px solid var(--line); }
@media (max-width: 700px) {
  .consent { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; border-radius: 16px; }
  .consent div .pill { flex: 1; justify-content: center; height: 42px; }
}