/* ==========================================================================
   Záhradníctvo Atrium – main stylesheet
   ========================================================================== */

:root {
  --paper: #f4f0e6;
  --paper-2: #ece6d8;
  --paper-3: #e1d9c5;
  --ink: #14251c;
  --ink-2: #213529;
  --forest: #1b3326;
  --moss: #4d6b52;
  --sage: #9fb295;
  --mist: #cbd5c0;
  --lime: #d3ec6e;
  --lime-2: #b9d64a;
  --blush: #f1c9bc;
  --rose: #e0786a;

  --line: color-mix(in oklab, var(--ink) 14%, transparent);
  --line-light: color-mix(in oklab, var(--paper) 18%, transparent);
  --muted: color-mix(in oklab, var(--ink) 68%, var(--paper));
  --muted-light: color-mix(in oklab, var(--paper) 72%, var(--ink));

  --f-display: "Fraunces", "Iowan Old Style", "Times New Roman", serif;
  --f-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: max(clamp(16px, 4.2vw, 56px), env(safe-area-inset-left), env(safe-area-inset-right));
  --max: 1440px;
  --sec: clamp(88px, 11vw, 168px);
  --r-sm: 14px;
  --r-lg: clamp(20px, 2.2vw, 34px);
  --hdr-h: 76px;

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; background-size: cover; background-position: center; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible, .menu :focus-visible, .lb :focus-visible, .world:focus-visible,
.callbar :focus-visible, .video__frame :focus-visible, .loc__mapbtn:focus-visible { outline-color: var(--lime); }
.sheet :focus-visible { outline-color: var(--forest); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* keyboard "skip to content" link: invisible (not just moved off-screen, which Safari's
   rubber-band overscroll would briefly reveal) until it receives keyboard focus */
.skip {
  position: fixed; left: 16px; top: 12px; z-index: 200;
  padding: 10px 16px; border-radius: 99px; background: var(--ink); color: var(--paper);
  opacity: 0; pointer-events: none; transform: translateY(-160%);
  transition: transform .3s var(--ease), opacity .2s;
}
.skip:focus { opacity: 1; pointer-events: auto; transform: none; }

/* subtle paper grain over everything */
@media (max-width: 960px) { body::after { display: none; } }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .14 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------- typography */
.display {
  font-family: var(--f-display);
  font-weight: 340;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  letter-spacing: -.028em;
  line-height: .98;
  text-wrap: balance;
}
.display em, .em {
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--moss);
}
.on-dark .display em, .display.on-dark em { color: var(--lime); }
.amp { font-family: var(--f-display); font-style: italic; font-weight: 300; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--moss); }
.on-dark .amp, .world .amp { color: var(--lime); }
h2.display { font-size: clamp(2.5rem, 5.4vw, 5.4rem); }
h3.display { font-size: clamp(1.9rem, 3vw, 2.9rem); line-height: 1.02; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 .75rem/1.4 var(--f-sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--moss);
  margin-bottom: clamp(16px, 2vw, 26px);
}
.eyebrow .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime-2); box-shadow: 0 0 0 4px color-mix(in oklab, var(--lime) 45%, transparent); }
.eyebrow--light { color: var(--lime); }
.lead { font-size: clamp(1.1rem, 1.35vw, 1.3rem); line-height: 1.6; color: var(--muted); max-width: 38ch; }
.on-dark .lead { color: var(--muted-light); }
.muted { color: var(--muted); }

.wrap { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }
.section { padding-block: var(--sec); }
.on-dark { background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------------- icons */
.i { width: 1.15em; height: 1.15em; flex: none; }

/* -------------------------------------------------------------- buttons */
.btn {
  --bg: var(--ink); --fg: var(--paper);
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  min-height: 54px; padding: 8px 10px 8px 26px; border-radius: 99px;
  background: var(--bg); color: var(--fg);
  font: 700 .95rem/1 var(--f-sans); letter-spacing: .01em;
  overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--lime); transform: translateY(101%); transition: transform .55s var(--ease);
}
.btn:focus-visible::before { transform: none; }
@media (hover: hover) { .btn:hover::before { transform: none; } }
.btn:focus-visible { color: var(--ink); }
@media (hover: hover) { .btn:hover { color: var(--ink); } }
.btn__ico {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--lime); color: var(--ink); transition: transform .5s var(--ease), background .4s;
}
@media (hover: hover) { .btn:hover .btn__ico { transform: rotate(-45deg); background: var(--ink); color: var(--lime); } }
.btn--plain { padding-right: 26px; }
.btn--lime { --bg: var(--lime); --fg: var(--ink); }
.btn--lime::before { background: var(--paper); }
.btn--lime .btn__ico { background: var(--ink); color: var(--lime); }
.btn--line { --bg: transparent; --fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); padding-right: 26px; }
.on-dark .btn--line { --fg: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-light); }
.btn--sm { min-height: 44px; padding: 6px 18px; font-size: .88rem; gap: 8px; }
.btn--sm .i { width: 1rem; height: 1rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 700;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  padding-bottom: 4px; transition: background-size .5s var(--ease);
}
@media (hover: hover) { .link-arrow:hover { background-size: 100% 1.5px; } }
.link-arrow .i { transition: transform .4s var(--ease); }
@media (hover: hover) { .link-arrow:hover .i { transform: translateX(4px); } }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: 99px; font-weight: 600; font-size: .92rem;
  box-shadow: inset 0 0 0 1.5px var(--line); transition: background .3s, color .3s, box-shadow .3s;
}
.chip sup { font-size: .7em; opacity: .6; }
@media (hover: hover) { .chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }
.chip.is-active { background: var(--ink); color: var(--paper); box-shadow: none; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  padding: 8px 14px; border-radius: 99px; font-size: .9rem; font-weight: 600;
  background: var(--paper-2);
}
.on-dark .tags li { background: color-mix(in oklab, var(--paper) 10%, transparent); }

/* -------------------------------------------------------------- status */
.status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 11px; border-radius: 99px;
  font: 600 .8rem/1.1 var(--f-sans); letter-spacing: .01em;
  background: color-mix(in oklab, var(--paper-2) 92%, transparent); color: var(--ink);
  white-space: nowrap;
}
.status__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--sage); flex: none; }
.status.is-open .status__dot { background: #5cb342; }
.status.is-open .status__dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #5cb342;
  animation: ping 2s var(--ease) infinite;
}
.status.is-closed .status__dot { background: var(--rose); }
.status.is-season .status__dot { background: var(--sage); }
.status--lg { justify-self: start; align-self: start; padding: 10px 16px 10px 14px; font-size: .9rem; background: var(--paper); }
@keyframes ping { 0% { transform: scale(.5); opacity: 1; } 80%, 100% { transform: scale(1.8); opacity: 0; } }

/* ---------------------------------------------------------------- logo */
.logo { display: inline-flex; align-items: center; color: var(--ink); }
/* the wordmark (partials/logo-art.html): letters in the text colour, the tulip in green; it sways on hover */
.logo__svg { display: block; height: 44px; width: auto; overflow: visible; } /* ~165px wide; thin lines need the size */
@media (max-width: 640px) { .logo__svg { height: 38px; } }
.logo__letters { fill: currentColor; }
.logo__flower { fill: var(--moss); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .6s var(--ease-back); }
@media (hover: hover) { .logo:hover .logo__flower { transform: rotate(-7deg); } }

/* -------------------------------------------------------------- header */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--hdr-h);
  transition: transform .5s var(--ease), background .4s, box-shadow .4s;
}
.hdr__in { height: 100%; width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; display: flex; align-items: center; gap: 24px; }
.hdr.is-scrolled { background: color-mix(in oklab, var(--paper) 84%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 var(--line); }
.hdr.is-hidden { transform: translateY(-105%); }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: clamp(18px, 2.4vw, 38px); }
.nav a {
  position: relative; display: inline-block; padding: 8px 0; font-weight: 600; font-size: .98rem;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 2px) / 0 1.5px no-repeat;
  transition: background-size .45s var(--ease);
}
@media (hover: hover) { .nav a:hover { background-size: 100% 1.5px; } }
.nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: 50%; top: -4px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--lime-2);
}
.hdr__aside { display: flex; align-items: center; gap: 12px; }
/* both shops at a glance: live status dot · name · phone */
.stores { display: grid; grid-template-columns: auto auto auto; gap: 2px 12px; margin-left: 8px; padding-left: 22px; border-left: 1px solid var(--line); font-size: .78rem; line-height: 1.35; }
.stores li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; }
.stores__name { font-weight: 650; white-space: nowrap; }
.stores__short { display: none; }
.stores__tel { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .3s; }
@media (hover: hover) { .stores__tel:hover { color: var(--ink); } }
.status--dot { padding: 0; background: none; cursor: help; }
.status--dot .status__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.burger { display: none; position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); }
.burger span:not(.sr) { position: absolute; left: 15px; right: 15px; height: 2px; border-radius: 2px; background: var(--paper); transition: transform .5s var(--ease), top .5s var(--ease); }
.burger span:nth-child(1) { top: 19px; }
.burger span:nth-child(2) { top: 27px; }
.menu-open .burger span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { top: 23px; transform: rotate(-45deg); }
.menu-open .burger { background: var(--lime); }
.menu-open .burger span:not(.sr) { background: var(--ink); }

/* mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 55; background: var(--ink); color: var(--paper);
  padding: calc(var(--hdr-h) + 24px) var(--gutter) 32px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px; overflow-y: auto;
  clip-path: circle(0 at calc(100% - var(--gutter) - 24px) calc(var(--hdr-h) / 2));
  transition: clip-path .8s var(--ease-io), visibility 0s .8s; visibility: hidden;
}
.menu-open .menu { clip-path: circle(150% at calc(100% - var(--gutter) - 24px) calc(var(--hdr-h) / 2)); visibility: visible; transition: clip-path .8s var(--ease-io); }
/* solid while the menu is open, so menu links scrolling underneath don't show through the logo;
   the fade waits until the opening circle has covered the header */
.menu-open .hdr {
  background: var(--ink); box-shadow: 0 1px 0 var(--line-light); backdrop-filter: none; -webkit-backdrop-filter: none; transform: none;
  transition: transform .5s var(--ease), background .25s ease .35s, box-shadow .25s ease .35s;
}
.menu-open .logo { color: var(--paper); }
.menu-open .logo__flower { fill: var(--lime); }
.menu-open .hdr__aside .stores { opacity: 0; pointer-events: none; }
.menu__links li { overflow: hidden; border-bottom: 1px solid var(--line-light); }
.menu__links a {
  display: flex; align-items: baseline; gap: 14px; padding: 13px 0;
  font: 360 clamp(1.6rem, 3.5vw + .9rem, 2.4rem)/1.1 var(--f-display); letter-spacing: -.02em;
  transform: translateY(110%); transition: transform .8s var(--ease);
}
.menu__links a small { font: 700 .75rem/1 var(--f-sans); letter-spacing: .1em; color: var(--lime); }
.menu__links a[aria-current="page"] { font-style: italic; color: var(--lime); }
.menu-open .menu__links a { transform: none; }
.menu-open .menu__links li:nth-child(2) a { transition-delay: .06s; }
.menu-open .menu__links li:nth-child(3) a { transition-delay: .12s; }
.menu-open .menu__links li:nth-child(4) a { transition-delay: .18s; }
.menu-open .menu__links li:nth-child(5) a { transition-delay: .24s; }
.menu__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-size: .92rem; color: var(--muted-light); }
.menu__foot strong { display: block; color: var(--paper); font-weight: 700; margin-bottom: 4px; }
.menu__foot a { color: var(--lime); }
/* the contacts follow the links in: fade + slight rise, right after the last link */
.menu__foot p { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.menu-open .menu__foot p { opacity: 1; transform: none; transition-delay: .32s; }
.menu-open .menu__foot p + p { transition-delay: .4s; }
.menu-open { overflow: hidden; }

/* ------------------------------------------------------------ preloader */
.preloader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 18px;
  background: var(--ink); color: var(--paper);
  /* the wordmark writes itself (done at ~1.25s) and stays a moment, then the curtain lifts slowly */
  animation: pre-out .85s var(--ease-io) 1.4s forwards;
}
.preloader__mark { width: min(340px, 72vw); height: auto; overflow: visible; color: var(--paper); }
.preloader__mark .logo__flower { fill: var(--lime); }
/* the wordmark writes itself: each mask stroke (partials/logo-draw.html, with its own delay) reveals part of the artwork */
.preloader__mark mask path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .3s var(--ease-io) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* explicit start shape: from the default "none" browsers can't interpolate and the curtain would just vanish halfway */
@keyframes pre-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
.seen .preloader, .no-preloader .preloader { display: none; }

/* --------------------------------------------------------------- reveal */
.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* hidden until main.js has split it into words – otherwise the heading paints once in full,
   vanishes when it's split, and then animates in a second time */
.js [data-split]:not(.is-split) { opacity: 0; }
/* each word rises inside its own clipping box. Fraunces' accents, descenders (j, y, comma) and
   overhanging curves reach outside the line box, so the box gets room on every side – the negative
   margins cancel the padding, so the layout is unchanged */
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .18em .14em .26em; margin: -.18em -.14em -.26em; }
.js [data-split] .w > span { display: inline-block; transform: translateY(150%); transition: transform 1s var(--ease); transition-delay: calc(var(--d, 0s) + var(--i) * 40ms); }
.js [data-split].is-in .w > span { transform: none; }

/* ----------------------------------------------------------------- hero */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding-top: calc(var(--hdr-h) + clamp(16px, 4vh, 56px)); }
.hero__grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.hero__title { font-size: clamp(2.9rem, 8.9vw, 9.4rem); line-height: .92; letter-spacing: -.04em; margin-bottom: clamp(22px, 3vw, 40px); }
.hero__title em { color: var(--moss); }
.hero__lead { margin-bottom: clamp(26px, 3vw, 40px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__media { position: relative; height: min(72vh, 720px); min-height: 440px; container-type: inline-size; --ai: .10; --al: var(--ai); }
.hero__arch {
  position: absolute; inset: 0 calc((var(--ai) - var(--al)) * 100%) 0 calc(var(--al) * 100%); overflow: hidden;
  border-radius: 1000px 1000px var(--r-lg) var(--r-lg);
  box-shadow: 0 40px 80px -40px color-mix(in oklab, var(--ink) 55%, transparent);
}
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; animation: drift 22s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.08) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-1.5%, -2%, 0); } }
.hero__circle {
  position: absolute; left: -2%; bottom: 9%; width: clamp(118px, 12vw, 196px); height: clamp(118px, 12vw, 196px);
  border-radius: 50%; overflow: hidden; border: 7px solid var(--paper);
  box-shadow: 0 24px 50px -20px color-mix(in oklab, var(--ink) 60%, transparent);
}
.hero__circle img { width: 100%; height: 100%; object-fit: cover; }
/* The arch's top is a semicircle with radius R = arch width / 2. The badge's centre sits on that
   curve at 45° (upper left): R·(1 − cos 45°) = 0.2929·R in from the arch's corner. The bouquet circle
   is centred on the arch's left edge. Everything scales with the arch (cqw = % of .hero__media width). */
.hero__media .badge {
  --b: clamp(96px, 26cqw, 150px);
  width: var(--b);
  left: calc(var(--al) * 100cqw + (1 - var(--ai)) * 50cqw * .2929 - var(--b) / 2);
  top: calc((1 - var(--ai)) * 50cqw * .2929 - var(--b) / 2);
}
.hero__media .hero__circle {
  --c: clamp(104px, 33cqw, 196px);
  width: var(--c); height: var(--c); /* explicit: the portrait photo inside would otherwise stretch it into an oval */
  /* centred on the arch's left edge, but never past the edge of the page (when the arch spans the width) */
  left: max(calc(var(--al) * 100cqw - var(--c) * .4), calc(6px - var(--gutter)));
}
.badge {
  position: absolute; top: 4%; left: 0; width: clamp(108px, 9.5vw, 150px); aspect-ratio: 1; border-radius: 50%;
  background: var(--lime); display: grid; place-items: center; color: var(--ink);
}
.badge > svg { position: absolute; inset: 6%; width: 88%; height: 88%; animation: spin 22s linear infinite; }
.badge text { font: 700 14.5px var(--f-sans); letter-spacing: .2em; text-transform: uppercase; fill: currentColor; }
.badge__core .i { width: 34px; height: 34px; stroke-width: 1.4; }
@keyframes spin { to { transform: rotate(360deg); } }

/* hero intro choreography (triggered by JS after the preloader) */
.js .hero [data-hero] { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
.js .hero__arch[data-hero] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round 1000px 1000px 0 0); transition: clip-path 1.1s var(--ease-io); }
.js .hero__circle[data-hero], .js .badge[data-hero] { transform: scale(.4); transition: opacity .8s var(--ease), transform 1.2s var(--ease-back); }
.hero.is-in [data-hero] { opacity: 1 !important; transform: none !important; }
.hero.is-in .hero__arch[data-hero] { clip-path: inset(0 0 0 0 round 1000px 1000px 0 0); }

.hero__bar {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 20px; align-items: center;
  margin-top: clamp(28px, 5vh, 56px); padding-block: 20px 26px; border-top: 1px solid var(--line);
}
.hero__loc { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; font-size: .92rem; }
.hero__loc-name { font-weight: 700; }
.hero__loc > span:nth-child(2) { color: var(--muted); grid-column: 1; }
.hero__loc .status { grid-column: 2; grid-row: 1 / span 2; justify-self: start; }
.hero__scroll { display: inline-flex; align-items: center; gap: 12px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero__scroll i { position: relative; width: 26px; height: 42px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px currentColor; }
.hero__scroll i::after { content: ""; position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: currentColor; animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* --------------------------------------------------------------- window */
.window { position: relative; height: 260vh; --wt: 15vh; }
.window__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.window__frame {
  --a: min(21vw, 300px); --q: calc(1 - var(--p, 0));
  position: absolute; inset: 0; overflow: hidden; background: var(--ink);
  clip-path: inset(calc(var(--q) * var(--wt)) calc(var(--q) * (50% - var(--a))) calc(var(--q) * 9vh)
    round calc(var(--q) * var(--a)) calc(var(--q) * var(--a)) calc(var(--q) * 24px) calc(var(--q) * 24px));
}
.window__img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.32 - .32 * var(--p, 0))); }
.window__shade { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at center, color-mix(in oklab, var(--ink) 76%, transparent), color-mix(in oklab, var(--ink) 52%, transparent)); opacity: var(--t, 0); }
.window__hint {
  position: absolute; top: calc(var(--wt) - 52px); left: 0; right: 0; text-align: center;
  font: italic 340 1.25rem/1.2 var(--f-display); color: var(--moss); opacity: calc(1 - var(--p, 0) * 4);
}
.window__text { position: relative; z-index: 2; text-align: center; color: var(--paper); padding-inline: var(--gutter); opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 40px)); }
.window__text h2 { font-size: clamp(2.6rem, 6.6vw, 6.8rem); line-height: .96; }
.window__text h2 em { color: var(--lime); }
.window__text p:last-child { margin-top: 26px; font-size: 1.1rem; color: color-mix(in oklab, var(--paper) 82%, transparent); }

/* -------------------------------------------------------------- marquee */
.marquee { overflow: hidden; padding-block: clamp(36px, 5vw, 64px); border-block: 1px solid var(--line); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__item { font: 340 clamp(3rem, 7.4vw, 7.2rem)/1 var(--f-display); letter-spacing: -.035em; white-space: nowrap; padding-inline: clamp(18px, 2.2vw, 34px); }
.marquee__item:nth-child(4n + 3) { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--moss); }
.marquee__item:nth-child(4n + 1) { color: transparent; -webkit-text-stroke: 1.4px var(--ink); }
.marquee__sep { width: clamp(28px, 3.4vw, 54px); height: clamp(28px, 3.4vw, 54px); color: var(--lime-2); flex: none; }
.marquee__sep .i { width: 100%; height: 100%; stroke-width: 2; }

/* ------------------------------------------------------------ manifesto */
.manifesto { padding-block: var(--sec); }
.manifesto__text { font: 330 clamp(1.85rem, 4vw, 4rem)/1.12 var(--f-display); letter-spacing: -.025em; max-width: 22ch; font-variation-settings: "SOFT" 50; }
.manifesto__text { max-width: 1180px; }
.js .manifesto__text .mw { opacity: .14; transition: opacity .5s var(--ease); }
.js .manifesto__text .mw.on { opacity: 1; }
.mw-keep { white-space: nowrap; } /* a pill never starts a line on its own */
.pill {
  display: inline-block; width: 2.5em; height: 1.04em; margin: 0 .04em 0 .1em; vertical-align: -.13em;
  border-radius: 99px; overflow: hidden; box-shadow: 0 0 0 2px var(--paper), 0 6px 16px -8px rgba(20, 37, 28, .45);
  transform: scale(.6); opacity: 0; transition: transform .9s var(--ease-back), opacity .5s;
}
.pill.on, html:not(.js) .pill { transform: none; opacity: 1; }
.pill img { width: 100%; height: 100%; object-fit: cover; }
/* hand-drawn botanical pills, in the logo's line style */
.pill--art { box-shadow: none; }
.pill--art svg { width: 100%; height: 100%; }
.pill--sage { background: color-mix(in oklab, var(--sage) 42%, var(--paper)); color: var(--forest); }
.pill--lime { background: var(--lime); color: var(--ink); }
.pill--blush { background: var(--blush); color: var(--ink); }
.pill__petals ellipse { fill: #fbeee6; }
.manifesto__foot { margin-top: clamp(40px, 5vw, 72px); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; }
.manifesto__foot p { max-width: 46ch; color: var(--muted); }

/* ---------------------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stat { padding: clamp(24px, 3vw, 40px) clamp(14px, 2vw, 28px) 0; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__num { display: block; font: 300 clamp(3rem, 6.4vw, 6.4rem)/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; }
.stat__num sup { font-size: .45em; vertical-align: .9em; color: var(--moss); }
.stat__label { display: block; margin-top: 14px; max-width: 22ch; color: var(--muted); font-size: .95rem; line-height: 1.45; }

/* --------------------------------------------------------------- worlds */
.worlds { padding-block: var(--sec); }
.worlds__head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.worlds__head .eyebrow { grid-column: 1 / -1; margin-bottom: -8px; }
.worlds__row { display: flex; gap: 14px; height: clamp(540px, 76vh, 780px); }
.world {
  position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--r-lg); overflow: hidden; color: var(--paper);
  transition: flex-grow .9s var(--ease); isolation: isolate;
}
.world.is-open { flex-grow: 2.3; }
.world__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.06); transition: transform 1.4s var(--ease); }
.world.is-open .world__img { transform: scale(1); }
.world::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, color-mix(in oklab, var(--ink) 88%, transparent) 100%); transition: opacity .6s; }
.world__body { position: absolute; inset: auto 0 0; padding: clamp(22px, 2.6vw, 38px); display: grid; gap: 14px; }
.world__num { position: absolute; top: clamp(20px, 2.4vw, 32px); left: clamp(22px, 2.6vw, 38px); font: 700 .78rem/1 var(--f-sans); letter-spacing: .14em; padding: 9px 12px; border-radius: 99px; background: color-mix(in oklab, var(--paper) 18%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.world__title { font-size: clamp(2rem, 3.2vw, 3.3rem); color: var(--paper); transition: font-size .8s var(--ease); }
.world:not(.is-open) .world__title { font-size: clamp(1.7rem, 2.3vw, 2.4rem); }
.world__more { display: grid; gap: 18px; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .8s var(--ease), opacity .5s; }
.world__more > div { overflow: hidden; display: grid; gap: 18px; }
.world.is-open .world__more { grid-template-rows: 1fr; opacity: 1; transition-delay: .15s; }
.world__desc { max-width: 40ch; color: color-mix(in oklab, var(--paper) 86%, transparent); }
.world .tags li { background: color-mix(in oklab, var(--paper) 16%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.world__cta { position: absolute; right: clamp(20px, 2.4vw, 32px); top: clamp(16px, 2vw, 28px); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--lime); color: var(--ink); transform: scale(.6) rotate(-45deg); opacity: 0; transition: transform .6s var(--ease-back), opacity .4s; }
.world.is-open .world__cta { transform: none; opacity: 1; }
.world__cta .i { width: 22px; height: 22px; }

/* --------------------------------------------------------------- season */
.season { padding-block: var(--sec); overflow: hidden; position: relative; }
.season__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(40px, 6vw, 110px); align-items: center; }
.season__h { font-size: clamp(2.4rem, 4.6vw, 4.6rem); margin-bottom: clamp(32px, 4vw, 56px); }
.dial { position: relative; width: min(100%, 440px); aspect-ratio: 1; }
.dial svg { width: 100%; height: 100%; overflow: visible; }
.dial__track { stroke: var(--line-light); }
.dial__arc { stroke: var(--lime); stroke-dasharray: var(--m, 1) 12; transition: stroke-dasharray 1.1s var(--ease); }
.dial__ticks line { stroke: color-mix(in oklab, var(--paper) 35%, transparent); }
.dial__labels text { font: 700 11px var(--f-sans); letter-spacing: .12em; text-transform: uppercase; fill: color-mix(in oklab, var(--paper) 55%, transparent); transition: fill .4s; }
.dial__labels text.is-active { fill: var(--lime); }
.dial__marker { transform-origin: 200px 200px; transform: rotate(calc(var(--m, 1) * 30deg)); transition: transform 1.1s var(--ease); }
.dial__center { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; text-align: center; }
.dial__num { font: 300 clamp(5rem, 10vw, 8.5rem)/.9 var(--f-display); letter-spacing: -.05em; font-variant-numeric: lining-nums; }
.dial__lbl { font: 700 .72rem/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted-light); margin-top: 10px; }
.season__panel { transition: opacity .45s var(--ease), transform .6s var(--ease); }
.season__panel.is-swapping { opacity: 0; transform: translateY(14px); }
.season__name { display: block; font-size: clamp(3.6rem, 8vw, 8rem); font-style: italic; font-weight: 300; color: var(--lime); font-variation-settings: "SOFT" 100, "WONK" 1; line-height: .9; }
.season__moment { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; border-radius: 99px; background: var(--blush); color: var(--ink); font-weight: 700; font-size: .85rem; }
.season__title { margin-top: 26px; font: 400 clamp(1.4rem, 2.1vw, 1.9rem)/1.2 var(--f-display); letter-spacing: -.015em; }
.season__tips { margin-top: 28px; display: grid; gap: 0; counter-reset: tip; }
.season__tips li { counter-increment: tip; display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line-light); color: color-mix(in oklab, var(--paper) 88%, transparent); }
.season__tips li::before { content: "0" counter(tip); font: 700 .78rem/1.9 var(--f-sans); letter-spacing: .1em; color: var(--lime); }
.season__shop { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.season__shop > span { font: 700 .72rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-light); }
.season__months { margin-top: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; padding: 6px; border-radius: 99px; background: color-mix(in oklab, var(--paper) 7%, transparent); }
.season__months button { position: relative; padding: 12px 4px; border-radius: 99px; font-weight: 700; font-size: .85rem; color: var(--muted-light); transition: background .4s var(--ease), color .3s; }
@media (hover: hover) { .season__months button:hover { color: var(--paper); } }
.season__months button[aria-selected="true"] { background: var(--lime); color: var(--ink); }
.season__months button.is-now::after { content: ""; position: absolute; top: 6px; right: calc(50% - 16px); width: 5px; height: 5px; border-radius: 50%; background: var(--rose); }
.season__leaf { position: absolute; right: -60px; bottom: -80px; width: 380px; color: color-mix(in oklab, var(--paper) 5%, transparent); pointer-events: none; }

/* ----------------------------------------------------------------- reel */
.reel { position: relative; }
.reel__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 4vh, 48px); }
.reel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 60px; }
.reel__head p:not(.eyebrow) { max-width: 40ch; color: var(--muted); }
.reel__track { display: flex; align-items: flex-end; gap: clamp(14px, 1.6vw, 24px); padding-inline: max(var(--gutter), (100vw - var(--max)) / 2); width: max-content; will-change: transform; transform: translate3d(var(--x, 0px), 0, 0); }
.reel__card { position: relative; flex: none; height: clamp(300px, 54vh, 580px); aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden; }
.reel__card--wide { aspect-ratio: 4 / 3; }
.reel__card--sq { aspect-ratio: 1; height: clamp(240px, 42vh, 460px); }
.reel__card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
@media (hover: hover) { .reel__card:hover img { transform: scale(1.05); } }
.reel__card figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 10px 14px; border-radius: 14px; background: color-mix(in oklab, var(--paper) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .85rem; font-weight: 600; line-height: 1.35; transform: translateY(calc(100% + 20px)); transition: transform .6s var(--ease); }
.reel__card:focus-within figcaption { transform: none; }
@media (hover: hover) { .reel__card:hover figcaption { transform: none; } }
.reel__card--more { display: grid; align-content: space-between; padding: clamp(24px, 2.6vw, 40px); background: var(--lime); aspect-ratio: 3 / 4; }
.reel__card--more .display { font-size: clamp(2.4rem, 4vw, 4rem); }
.reel__card--more .display em { color: var(--ink); }
.reel__card--more > .i { width: 64px; height: 64px; justify-self: end; transition: transform .6s var(--ease); }
@media (hover: hover) { .reel__card--more:hover > .i { transform: rotate(45deg); } }
.reel__progress { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.reel__progress i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--rp, 0)); }

/* ---------------------------------------------------------------- motto */
.motto { position: relative; padding-block: var(--sec); text-align: center; }
.motto blockquote p { font-size: clamp(2.4rem, 6vw, 6rem); max-width: 16ch; margin-inline: auto; line-height: 1; }
.motto blockquote p::before { content: "“"; display: block; height: .5em; font-size: 2em; line-height: 1; color: var(--lime-2); font-style: italic; }
.motto footer { margin-top: 32px; display: inline-flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: .95rem; }
.motto footer span { color: var(--ink); font-weight: 700; font-size: 1.05rem; }
.motto__leaf { position: absolute; width: clamp(80px, 10vw, 150px); color: var(--sage); pointer-events: none; }
.motto__leaf--a { left: 4%; top: 18%; transform: rotate(-24deg); }
@media (max-width: 640px) { .motto__leaf--a { top: 4%; left: 2%; width: 64px; } .motto__leaf--b { bottom: 4%; width: 64px; } }
.motto__leaf--b { right: 6%; bottom: 14%; transform: rotate(140deg); color: var(--lime-2); }

/* --------------------------------------------------------------- places */
.places { padding-block: var(--sec); }
.places__head { margin-bottom: clamp(36px, 5vw, 64px); }
.places__head h2 { font-size: clamp(2.6rem, 6.2vw, 6.4rem); }
.rotator { display: inline-grid; vertical-align: top; overflow: hidden; padding: .18em .14em .26em; margin: -.18em -.14em -.26em; }
.rotator > span { grid-area: 1 / 1; font-style: italic; font-weight: 300; color: var(--moss); font-variation-settings: "SOFT" 100, "WONK" 1; transform: translateY(150%); transition: transform .9s var(--ease); }
.rotator > span.is-active { transform: none; }
.rotator > span.is-leaving { transform: translateY(-150%); }
html:not(.js) .rotator > span:not(:first-child) { display: none; }
html:not(.js) .rotator > span { transform: none; }
.places__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.place { border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); display: flex; flex-direction: column; }
.place__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.place__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
@media (hover: hover) { .place:hover .place__media img { transform: scale(1.04); } }
.place__media .status { position: absolute; left: 18px; top: 18px; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .3); }
.place__body { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; gap: 22px; flex: 1; }
.place__kicker { font: 700 .75rem/1.4 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--moss); margin-bottom: -12px; }
.facts { display: grid; gap: 10px; }
.facts li { display: flex; align-items: center; gap: 12px; }
.facts .i { color: var(--moss); }
.facts a { font-weight: 700; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .4s var(--ease); }
@media (hover: hover) { .facts a:hover { background-size: 100% 1.5px; } }
.place__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }

.hours__list li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.hours__list li:last-child { border-bottom: 0; }
.hours__list li span:last-child { font-variant-numeric: tabular-nums; color: var(--muted); }
.hours__list li.is-today { font-weight: 700; }
.hours__list li.is-today span:first-child::after { content: "dnes"; margin-left: 10px; padding: 3px 8px; border-radius: 99px; background: var(--lime); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.hours__list li.is-today span:last-child { color: var(--ink); }
.hours__notice { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--r-sm); background: color-mix(in oklab, var(--sage) 28%, transparent); font-weight: 600; line-height: 1.5; }
.hours__notice .i { color: var(--moss); margin-top: 2px; }
.hours--notice .hours__list, .hours__soon + .hours__list { margin-top: 12px; }
.hours__alt { margin-top: 12px; font-size: .93rem; line-height: 1.5; color: var(--muted); }
.hours__alt a { font-weight: 700; color: var(--ink); white-space: nowrap; }
.on-dark .hours__alt a { color: var(--paper); }

/* ---------------------------------------------------------------- video */
.video { padding-bottom: var(--sec); }
.video__frame { position: relative; aspect-ratio: 16 / 8; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); isolation: isolate; }
.video__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transition: transform 1.6s var(--ease); }
@media (hover: hover) { .video__frame:hover > img { transform: scale(1.04); } }
.video__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in oklab, var(--ink) 90%, transparent) 0%, color-mix(in oklab, var(--ink) 62%, transparent) 42%, transparent 78%); pointer-events: none; }
.video__copy .display em { color: var(--lime); }
.video__copy { position: absolute; z-index: 2; left: clamp(24px, 4vw, 64px); top: 50%; transform: translateY(-50%); max-width: 520px; color: var(--paper); }
.video__copy h2 { font-size: clamp(2.2rem, 4.6vw, 4.6rem); margin-bottom: 18px; }
.video__copy p { color: color-mix(in oklab, var(--paper) 82%, transparent); margin-bottom: 28px; }
.video__play { display: inline-flex; align-items: center; gap: 18px; font-weight: 700; color: var(--paper); text-align: left; }
.video__btn { position: relative; flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--lime); color: var(--ink); transition: transform .5s var(--ease-back); }
.video__btn::before, .video__btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--lime); animation: ring 2.6s var(--ease) infinite; }
.video__btn::after { animation-delay: 1.3s; }
.video__btn .i { width: 28px; height: 28px; margin-left: 4px; }
@media (hover: hover) { .video__play:hover .video__btn { transform: scale(1.1); } }
.video__play small { display: block; font-weight: 500; font-size: .85rem; color: color-mix(in oklab, var(--paper) 70%, transparent); }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }

/* --------------------------------------------------------------- footer */
.ftr { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; padding-top: var(--sec); }
.ftr__top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px clamp(40px, 6vw, 120px); }
.ftr__cta h2 { font-size: clamp(2.6rem, 5.4vw, 5.6rem); margin-bottom: 32px; }
.ftr__cta h2 em { color: var(--lime); }
.ftr__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 40px; align-content: start; font-size: .95rem; }
.ftr__cols h3 { font: 700 .72rem/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--lime); margin-bottom: 16px; }
.ftr__cols p, .ftr__cols li { color: var(--muted-light); line-height: 1.7; }
.ftr__cols a { color: var(--paper); }
@media (hover: hover) { .ftr__cols a:hover { color: var(--lime); } }
.ftr__cols .status { margin-top: 10px; background: color-mix(in oklab, var(--paper) 10%, transparent); color: var(--paper); }
.social { display: flex; gap: 10px; margin-top: 4px; }
.social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-light); transition: background .3s, color .3s, transform .4s var(--ease-back); }
@media (hover: hover) { .social a:hover { background: var(--lime); color: var(--ink); transform: translateY(-3px); } }
/* the big wordmark: one gradient across the whole logo (lime fading into green), like the large word it replaced */
.ftr__word { display: block; width: min(58%, 920px); height: auto; margin: clamp(56px, 8vw, 120px) auto clamp(24px, 3vw, 44px); user-select: none; }
@media (max-width: 640px) { .ftr__word { width: 76%; } }
.ftr__word .logo__letters, .ftr__word .logo__flower { fill: url(#ftr-word-grad); }
.ftr__word stop:first-child { stop-color: var(--lime); stop-opacity: .7; }
.ftr__word stop:last-child { stop-color: var(--moss); stop-opacity: .3; }
.ftr__bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding-block: 22px 28px; border-top: 1px solid var(--line-light); font-size: .85rem; color: var(--muted-light); }
@media (hover: hover) { .ftr__bottom a:hover, .ftr__bottom button:hover { color: var(--lime); } }
.ftr__bottom nav { display: flex; gap: 24px; }
@media (max-width: 960px) {
  .ftr__top, .ftr__cols { text-align: center; justify-items: center; }
  .ftr__cols > div { display: grid; justify-items: center; align-content: start; }
  .social { justify-content: center; }
  .ftr__bottom { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .ftr__bottom nav { flex-wrap: wrap; justify-content: center; gap: 6px 24px; }
}
/* mid-size: the two columns are centred as a block, their text stays left-aligned */
@media (min-width: 641px) and (max-width: 960px) {
  .ftr__cols { grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; justify-items: start; text-align: left; column-gap: clamp(40px, 9vw, 96px); }
  .ftr__cols > div { justify-items: start; }
  .ftr__cols .social { justify-content: flex-start; }
}

/* ------------------------------------------------------------ page hero */
.phero { padding-top: calc(var(--hdr-h) + clamp(20px, 4vh, 48px)); padding-bottom: clamp(48px, 7vw, 96px); }
.phero__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 32px clamp(32px, 6vw, 96px); align-items: center; }
/* the taller column sets the height, the shorter one is centred against it */
.phero h1 { font-size: clamp(3rem, 8vw, 8.4rem); line-height: .92; letter-spacing: -.04em; }
.phero__aside { display: grid; gap: 24px; }
.phero__jump { display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs { display: flex; gap: 10px; font-size: .85rem; color: var(--muted); margin-bottom: 22px; }
@media (hover: hover) { .crumbs a:hover { color: var(--ink); } }
.crumbs span[aria-hidden] { opacity: .5; }

/* arches strip under the page hero */
.arches { display: grid; grid-template-columns: 1.1fr .8fr 1.1fr; gap: clamp(12px, 1.6vw, 22px); align-items: end; }
.arches figure { border-radius: 1000px 1000px var(--r-lg) var(--r-lg); overflow: hidden; aspect-ratio: 3 / 3.4; }
.arches figure:nth-child(2) { aspect-ratio: 3 / 4.2; }
.arches img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------- services */
.intro2 { display: grid; grid-template-columns: .9fr 1.1fr; gap: 32px clamp(40px, 6vw, 110px); padding-block: var(--sec); }
.intro2 h2 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }
.intro2__text { display: grid; gap: 18px; color: var(--muted); font-size: 1.1rem; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.value { padding: 24px; border-radius: var(--r-sm); background: var(--paper-2); }
.value .i { width: 30px; height: 30px; color: var(--moss); margin-bottom: 22px; }
.value h3 { font: 500 1.45rem/1.1 var(--f-display); letter-spacing: -.015em; }
.value p { color: var(--muted); font-size: .95rem; margin-top: 6px; }

.svc { padding-block: var(--sec); border-top: 1px solid var(--line); }
.svc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(40px, 6vw, 110px); align-items: start; }
.svc--flip .svc__media { order: 2; }
.svc__media { position: sticky; top: calc(var(--hdr-h) + 24px); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.svc__media figure { border-radius: var(--r-lg); overflow: hidden; }
.svc__media figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 11; border-radius: 1000px 1000px var(--r-lg) var(--r-lg); }
.svc__media figure:not(:first-child) { aspect-ratio: 1; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; }
.svc__num { font: 300 clamp(4rem, 8vw, 7.5rem)/.8 var(--f-display); color: transparent; -webkit-text-stroke: 1.2px var(--moss); letter-spacing: -.04em; }
.svc__body { display: grid; gap: 26px; }
.svc__body h2 { font-size: clamp(2.6rem, 5vw, 5rem); }
.svc__body > p { color: var(--muted); font-size: 1.12rem; max-width: 52ch; }
.svc__label { font: 700 .72rem/1.4 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--moss); margin-bottom: 12px; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.checks li { display: flex; gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.checks .i { color: var(--moss); transform: translateY(3px); }
.callout { display: flex; gap: 18px; align-items: center; padding: 22px 24px; border-radius: var(--r-sm); background: var(--lime); }
.callout .i { width: 32px; height: 32px; }
.callout strong { display: block; font-size: 1.05rem; }
.callout a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.where { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-top: 6px; font-size: .95rem; }
.where .i { color: var(--moss); }

.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; counter-reset: step; }
.step { position: relative; padding: 22px 22px 24px; border-radius: var(--r-sm); background: var(--paper-2); counter-increment: step; }
.step::before { content: "0" counter(step); display: block; font: 700 .75rem/1 var(--f-sans); letter-spacing: .12em; color: var(--moss); margin-bottom: 30px; }
.step .i { position: absolute; right: 20px; top: 18px; width: 26px; height: 26px; color: var(--moss); }
.step h3 { font: 500 1.35rem/1.15 var(--f-display); letter-spacing: -.01em; margin-bottom: 6px; }
.step p { font-size: .93rem; color: var(--muted); }

.quote { padding-block: var(--sec); }
.quote__grid { display: grid; grid-template-columns: auto 1fr; gap: 32px clamp(40px, 6vw, 100px); align-items: center; }
.quote__img { width: clamp(180px, 24vw, 340px); aspect-ratio: 3 / 4; border-radius: 1000px 1000px var(--r-lg) var(--r-lg); overflow: hidden; }
.quote__img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.quote blockquote p { font: 330 clamp(1.6rem, 2.9vw, 2.8rem)/1.2 var(--f-display); letter-spacing: -.02em; }
.quote blockquote p em { color: var(--lime); }
.quote footer { margin-top: 28px; display: flex; flex-direction: column; color: var(--muted-light); }
.quote footer strong { color: var(--paper); font-size: 1.1rem; }

.faq { padding-block: var(--sec); display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px clamp(40px, 6vw, 110px); }
.faq h2 { font-size: clamp(2.4rem, 4.4vw, 4.4rem); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; cursor: pointer; font: 400 clamp(1.2rem, 1.7vw, 1.5rem)/1.25 var(--f-display); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--paper-2); transition: transform .5s var(--ease), background .3s; }
.faq details[open] summary .i { transform: rotate(45deg); background: var(--lime); }
.faq details p { padding: 0 0 26px; color: var(--muted); max-width: 60ch; }

/* ---------------------------------------------------------------- about */
.goal { padding-block: var(--sec); }
.goal h2 { font-size: clamp(2.4rem, 5vw, 5rem); max-width: 18ch; margin-bottom: clamp(36px, 5vw, 64px); }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px clamp(24px, 3vw, 48px); color: var(--muted); }
.cols3 p::first-line { color: var(--ink); font-weight: 600; }

.chapters { padding-block: var(--sec); }
.chapters__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(36px, 5vw, 64px); }
.chapter { position: relative; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); background: color-mix(in oklab, var(--paper) 6%, transparent); box-shadow: inset 0 0 0 1px var(--line-light); min-height: 320px; display: flex; flex-direction: column; }
.chapter__year { font: 300 clamp(3.4rem, 6vw, 5.6rem)/.9 var(--f-display); letter-spacing: -.04em; color: var(--lime); font-variant-numeric: lining-nums; }
.chapter__year em { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
.chapter h3 { margin-top: 40px; padding-top: 0; font: 500 1.4rem/1.2 var(--f-display); }
.chapter p { margin-top: 8px; color: var(--muted-light); font-size: .97rem; }

.letter { padding-block: var(--sec); }
.letter__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px clamp(40px, 6vw, 110px); align-items: center; }
.letter__media { position: relative; }
.letter__media figure { border-radius: 1000px 1000px var(--r-lg) var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; }
.letter__media img { width: 100%; height: 100%; object-fit: cover; }
.letter__media .badge { top: auto; bottom: 6%; left: auto; right: -4%; }
.letter__card { position: relative; padding: clamp(28px, 4vw, 60px); border-radius: var(--r-lg); background: #fbf8f1; box-shadow: 0 30px 80px -40px color-mix(in oklab, var(--ink) 40%, transparent); }
.letter__card::before { content: "“"; position: absolute; top: -.18em; left: clamp(20px, 3vw, 48px); font: italic 300 9rem/1 var(--f-display); color: var(--lime-2); }
.letter__card h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); margin-bottom: 24px; }
.letter__card p { color: var(--muted); margin-bottom: 14px; }
.letter__sign { margin-top: 28px; display: flex; flex-direction: column; }
.letter__sign strong { font: italic 400 1.9rem/1.1 var(--f-display); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--moss); }
.letter__sign span { font-size: .9rem; color: var(--muted); }

.mission { padding-block: var(--sec); display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px clamp(40px, 6vw, 110px); }
.mission h2 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }
.mission__text { display: grid; gap: 18px; font-size: 1.12rem; color: var(--muted); }
.mission__text strong { color: var(--ink); font-weight: 600; }

.family { padding-block: var(--sec); }
.family__head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.family__head h2 { font-size: clamp(2.4rem, 5vw, 5rem); }
.family__head p { color: var(--muted); max-width: 46ch; }
.family__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.member { text-align: center; }
.member__arch { position: relative; aspect-ratio: 3 / 4; border-radius: 1000px 1000px var(--r-sm) var(--r-sm); overflow: hidden; display: grid; place-items: center; background: var(--paper-2); margin-bottom: 16px; transition: transform .6s var(--ease); }
@media (hover: hover) { .member:hover .member__arch { transform: translateY(-6px); } }
.member__arch img { width: 100%; height: 100%; object-fit: cover; }
.member__mono { font: italic 300 clamp(2.6rem, 4vw, 3.8rem)/1 var(--f-display); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--moss); }
.member__arch .i { position: absolute; bottom: 16px; left: 50%; width: 22px; height: 22px; margin-left: -11px; color: var(--sage); }
.member:nth-child(2) .member__arch { background: color-mix(in oklab, var(--blush) 60%, var(--paper)); }
.member:nth-child(3) .member__arch { background: color-mix(in oklab, var(--lime) 45%, var(--paper)); }
.member:nth-child(4) .member__arch { background: color-mix(in oklab, var(--sage) 55%, var(--paper)); }
.member h3 { font: 500 1.2rem/1.2 var(--f-display); }
.member p { font-size: .88rem; color: var(--muted); margin-top: 2px; }

/* -------------------------------------------------------------- gallery */
.gal { padding-bottom: var(--sec); }
/* while the header is hidden, the filters move up into its place (and back when it returns) */
.hdr-hidden .gal__filters { top: max(8px, env(safe-area-inset-top)); }
.gal__filters {
  position: sticky; top: calc(var(--hdr-h) + 8px); z-index: 5;
  width: max-content; max-width: calc(100% + 28px); margin: 0 -14px clamp(28px, 4vw, 48px); padding: 8px 14px; border-radius: 32px;
  transition: top .5s var(--ease), background .3s, box-shadow .3s;
}
/* once it sticks over the photos the bar gets a visible surface, so its padding reads as padding */
.gal__filters.is-stuck {
  background: color-mix(in oklab, var(--paper) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px var(--line), 0 14px 34px -18px rgba(20, 37, 28, .45);
}
.gal__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gal__grid { columns: 3 300px; column-gap: clamp(12px, 1.4vw, 20px); }
.gal__grid.is-masonry { columns: auto; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-auto-rows: 4px; column-gap: clamp(12px, 1.4vw, 20px); align-items: start; }
.gal__grid.is-masonry .gal__item { margin-bottom: 0; }
.gal__item { break-inside: avoid; margin-bottom: clamp(12px, 1.4vw, 20px); }
.gal__item.is-hidden { display: none; }
.gal__item a { position: relative; display: block; border-radius: var(--r-sm); overflow: hidden; }
.gal__item img { width: 100%; transition: transform 1.2s var(--ease), filter .6s; }
@media (hover: hover) { .gal__item a:hover img { transform: scale(1.04); } }
.gal__zoom { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--lime); color: var(--ink); transform: scale(.5); opacity: 0; transition: transform .5s var(--ease-back), opacity .3s; }
.gal__item a:focus-visible .gal__zoom { transform: none; opacity: 1; }
@media (hover: hover) { .gal__item a:hover .gal__zoom { transform: none; opacity: 1; } }
/* order code badge (gallery tiles, homepage reel) */
.gal__code {
  position: absolute; left: 12px; top: 12px; z-index: 2; padding: 7px 11px; border-radius: 99px;
  background: color-mix(in oklab, var(--paper) 94%, transparent); /* no backdrop-filter: Safari drops it inside the rounded, clipped tiles */
  font: 800 .78rem/1 var(--f-sans); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--ink);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4); pointer-events: none;
}
.reel__link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.reel__link:focus-visible { outline-offset: -4px; }

/* "Máte kód z galérie?" */
.find { display: grid; gap: 10px; max-width: 380px; }
.find label { font: 700 .72rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--moss); }
.find__row { display: flex; gap: 8px; }
.find input { flex: 1; width: 0; min-width: 0; padding: 12px 18px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--paper); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: border-color .3s; }
.find input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.find input:focus { outline: none; border-color: var(--ink); }
.find__err { font-size: .85rem; color: #b5483a; min-height: 1.3em; }

.gal__item figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 10px 4px 0; font-size: .85rem; line-height: 1.4; color: var(--muted); }
.gal__item figcaption em { flex: none; font-style: normal; font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--moss); padding-top: 2px; }

.lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; overscroll-behavior: contain; background: color-mix(in oklab, var(--ink) 96%, transparent); color: var(--paper); }
.lb::backdrop { background: transparent; }
.lb:focus, .lb:focus-visible { outline: none; }
.lb[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; animation: lb-in .4s var(--ease); }
@keyframes lb-in { from { opacity: 0; } }
.lb__top { display: flex; justify-content: space-between; align-items: center; padding: 18px var(--gutter); font-size: .9rem; }
.lb__count { font-variant-numeric: tabular-nums; color: var(--muted-light); }
.lb__stage { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 0 clamp(16px, 7vw, 120px); min-height: 0; touch-action: pan-y; }
.lb__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-sm); animation: lb-img .5s var(--ease); background: none; }
@keyframes lb-img { from { opacity: 0; transform: scale(.97); } }
.lb__btn { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in oklab, var(--paper) 12%, transparent); transition: background .3s, color .3s; }
.lb__btn:active, .lb__share:active { background: var(--lime); color: var(--ink); transition-duration: 0s; }
@media (hover: hover) { .lb__btn:hover { background: var(--lime); color: var(--ink); } }
/* panel below the photo (phones, portrait tablets): the photo area's height depends on the panel (a coded product
   has the big order panel), so the arrows sit in the middle of the screen instead – the same spot for every photo */
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lb__nav--prev { left: var(--gutter); }
.lb__nav--next { right: var(--gutter); }
.lb__foot { display: grid; justify-items: center; gap: 14px; padding: 0 var(--gutter) 22px; }
.lb__cap { padding-top: 16px; text-align: center; color: var(--muted-light); font-size: .95rem; text-wrap: balance; }
.lb__order {
  width: min(100%, 1000px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 24px; align-items: center;
  padding: 16px 18px; border-radius: var(--r-lg); background: color-mix(in oklab, var(--paper) 7%, transparent); box-shadow: inset 0 0 0 1px var(--line-light);
}
.lb__codebox { display: grid; justify-items: center; min-width: 96px; padding: 12px 14px 10px; border-radius: 18px; background: var(--lime); color: var(--ink); }
.lb__codebox span { font: 700 .6rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; }
.lb__codebox strong { font: 400 2.3rem/1 var(--f-display); letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: lining-nums; }
.lb__ordertext { display: grid; gap: 8px; font-size: .95rem; line-height: 1.45; color: color-mix(in oklab, var(--paper) 82%, transparent); }
.lb__ordertext strong { color: var(--paper); }
.lb__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .82rem; color: var(--muted-light); }
.status--lb { background: color-mix(in oklab, var(--paper) 10%, transparent); color: var(--paper); white-space: normal; border-radius: 14px; text-align: left; }
.lb__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.lb__actions .btn--line { --fg: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-light); }
.lb__share { display: inline-flex; align-items: center; gap: 8px; min-height: 54px; padding: 0 18px; border-radius: 99px; font-weight: 700; font-size: .9rem; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-light); transition: background .3s, color .3s; }
@media (hover: hover) { .lb__share:hover { background: var(--paper); color: var(--ink); } }
/* short screens (landscape phones, small laptops): keep the photo big, the panel lean */
@media (max-height: 720px) {
  .lb__top { padding-block: 10px; }
  .lb__foot { gap: 8px; padding-bottom: 12px; }
  .lb__cap { padding-top: 8px; font-size: .85rem; }
  .lb__cap em { display: inline; margin: 0 8px 0 0; }
  .lb__order { padding: 10px 12px; }
  .lb__codebox { padding: 8px 12px; }
  .lb__codebox strong { font-size: 1.7rem; }
  .lb__actions .btn, .lb__share { min-height: 46px; }
}
/* "Každý produkt robíme ručne …" only where it doesn't cost the photo (small phones and landscape: hidden) */
@media (max-height: 700px) { .lb__note { display: none; } }
/* narrower than the side-by-side layout: code + text in one row, buttons full width below */
@media (max-width: 1023px) {
  .lb__order { grid-template-columns: auto minmax(0, 1fr); }
  .lb__actions { grid-column: 1 / -1; justify-content: stretch; }
  .lb__actions .btn--lime { flex: 1 1 100%; justify-content: space-between; }
  .lb__actions .btn--line, .lb__share { flex: 1 1 0; justify-content: center; }
}
/* photo without a code (only a caption below it): the photo exactly in the middle of the screen, in line with the
   arrows, and the caption centred in the space between the photo and the bottom edge. --lb-edge keeps room for the
   top bar above and the caption below when the photo is tall */
.lb--plain { --lb-edge: 96px; }
.lb.lb--plain[open] { grid-template-rows: minmax(var(--lb-edge), 1fr) auto minmax(var(--lb-edge), 1fr); }
.lb--plain .lb__top { align-self: start; }
.lb--plain .lb__stage img { max-height: calc(100vh - 2 * var(--lb-edge)); max-height: calc(100dvh - 2 * var(--lb-edge)); }
.lb--plain .lb__foot { align-self: center; padding-block: 0; }
.lb--plain .lb__cap { padding-top: 0; }
@media (min-width: 1024px) and (min-height: 600px), (orientation: landscape) and (max-height: 600px) and (min-width: 640px) {
  .lb[open], .lb.lb--plain[open] { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); grid-template-rows: auto minmax(0, 1fr); }
  /* panel beside the photo: the photo without a code keeps the regular layout */
  .lb--plain .lb__top { align-self: auto; }
  .lb--plain .lb__stage img { max-height: 100%; }
  .lb--plain .lb__foot { align-self: auto; padding-block: 0 24px; }
  .lb__top { grid-column: 1 / -1; }
  .lb__stage { position: relative; padding-bottom: 24px; } /* panel beside the photo: arrows centred on the photo area */
  .lb__foot { align-content: center; justify-items: stretch; padding: 0 var(--gutter) 24px 0; }
  .lb__cap { padding-top: 0; text-align: center; }
  /* stacked in a column beside the photo: everything centred */
  .lb__order { grid-template-columns: 1fr; gap: 14px; justify-items: center; text-align: center; }
  .lb__codebox { justify-self: center; }
  .lb__meta { justify-content: center; }
  .lb__actions { justify-self: stretch; justify-content: center; }
  .lb__actions .btn--lime { flex: 1 1 100%; justify-content: space-between; }
  .lb__actions .btn--line, .lb__share { flex: 1 1 140px; justify-content: center; padding-inline: 12px; white-space: nowrap; font-size: .9rem; }
  .lb__stage { padding-inline: 76px; }
  .lb__nav--prev { left: 12px; }
  .lb__nav--next { right: 12px; }
}
@media (orientation: landscape) and (max-height: 600px) and (min-width: 640px) {
  .lb[open] { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); }
  .lb__ordertext p:first-child { display: none; }
  /* code box and open/closed status side by side, buttons below: one row less, so it fits next to the photo */
  .lb__order { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; }
  .lb__codebox { justify-self: start; }
  .lb__meta { justify-content: flex-start; }
  .lb__actions { grid-column: 1 / -1; }
  .lb__cap em { display: block; margin: 0 0 3px; }
  .lb__cap span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .lb__foot { overflow-y: auto; align-content: safe center; padding-top: 4px; }
  .lb__order { gap: 10px; }
  .lb__actions .btn--line, .lb__share { flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: .85rem; }
  .lb__stage { padding-inline: 64px; }
}
/* very short landscape (Safari with its bars showing): a compact panel that fits without scrolling */
@media (orientation: landscape) and (max-height: 380px) and (min-width: 640px) {
  .lb__top { padding-block: 6px; }
  .lb__order { padding: 8px 10px; gap: 8px; }
  .lb__codebox { padding: 6px 12px; }
  .lb__codebox strong { font-size: 1.4rem; margin-top: 2px; }
  .lb__actions .btn, .lb__share { min-height: 40px; }
  .lb__actions .btn__ico { width: 30px; height: 30px; }
}
.lb__cap em { display: block; font-style: normal; font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); margin-bottom: 4px; }

/* phones (and landscape phones, where wrapped rows would fill the short screen): one swipeable row inside the
   bar; the edges fade where more chips are hidden */
@media (max-width: 640px), (max-height: 500px) {
  .gal__filters { width: auto; max-width: none; margin-inline: -8px; padding: 8px 6px; border-radius: 30px; }
  .gal__chips {
    --fl: 0px; --fr: 0px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-inline: 2px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  }
  .gal__chips::-webkit-scrollbar { display: none; }
  .gal__chips::after { content: ""; flex: 0 0 2px; }
  .gal__chips.fade-l { --fl: 28px; }
  .gal__chips.fade-r { --fr: 28px; }
  .gal__filters .chip { flex: none; }
}

/* -------------------------------------------------------------- contact */
.locs { display: grid; gap: clamp(16px, 2vw, 28px); padding-bottom: var(--sec); }
.loc { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); }
.loc__info { padding: clamp(26px, 4vw, 56px); display: grid; gap: 24px; align-content: start; }
.loc__info h2 { font-size: clamp(2.4rem, 4.4vw, 4.2rem); }
.loc__map { position: relative; min-height: 420px; background: var(--paper-3); }
.loc__map > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loc__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.75) contrast(1.02); }
.loc__mapbtn { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; padding: 24px; text-align: center; color: var(--paper); background: linear-gradient(0deg, color-mix(in oklab, var(--ink) 70%, transparent), color-mix(in oklab, var(--ink) 25%, transparent)); }
.loc__mapbtn .btn { pointer-events: none; }
.loc__mapbtn small { max-width: 34ch; font-size: .8rem; color: color-mix(in oklab, var(--paper) 78%, transparent); }

.form-sec { padding-block: var(--sec); }
.form-sec__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px clamp(40px, 6vw, 110px); }
.form-sec h2 { font-size: clamp(2.6rem, 5vw, 5rem); margin-bottom: 22px; }
.form-sec__aside p { color: var(--muted-light); max-width: 40ch; }
.form-sec__aside .facts { margin-top: 32px; }
.form-sec__aside .facts .i { color: var(--lime); }
.form-sec__aside .social { margin-top: 28px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--muted-light); }
.field input, .field textarea, .field select {
  width: 100%; padding: 16px 18px; border-radius: var(--r-sm); border: 1.5px solid var(--line-light);
  background: color-mix(in oklab, var(--paper) 5%, transparent); color: var(--paper); transition: border-color .3s, background .3s;
}
.field textarea { min-height: 160px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--lime) 50%), linear-gradient(135deg, var(--lime) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.field select option { color: var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--lime); background: color-mix(in oklab, var(--paper) 9%, transparent); }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in oklab, var(--paper) 40%, transparent); }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--rose); }
.field__err { font-size: .8rem; color: var(--blush); min-height: 0; }
.radios { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.radios legend { margin-bottom: 8px; }
.radios label { position: relative; }
.radios input { position: absolute; opacity: 0; }
.radios span { display: inline-block; padding: 11px 18px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line-light); font-weight: 600; font-size: .92rem; cursor: pointer; transition: background .3s, color .3s; color: var(--paper); letter-spacing: 0; }
.radios input:checked + span { background: var(--lime); color: var(--ink); box-shadow: none; }
.radios input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }
.consent, .field .consent { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; font-weight: 500; letter-spacing: 0; line-height: 1.5; color: var(--muted-light); }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--lime); flex: none; }
.consent a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 6px; }
.form__msg { grid-column: 1 / -1; display: none; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r-sm); }
.form__msg.is-ok { display: block; background: var(--lime); color: var(--ink); }
.form__msg.is-err { display: block; background: var(--blush); color: var(--ink); }
.form__msg a { font-weight: 700; text-decoration: underline; overflow-wrap: anywhere; }
.form.is-sending .btn { opacity: .6; pointer-events: none; }

/* ------------------------------------------------- seasonal notice */
.notice {
  display: inline-grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; max-width: 640px; margin-bottom: 20px;
  padding: 9px 16px 9px 12px; border-radius: 22px; background: var(--blush); color: var(--ink);
  font-size: .88rem; line-height: 1.4; transition: background .3s;
}
.notice > .i { color: #b5483a; grid-row: span 2; align-self: start; margin-top: 2px; }
.notice strong { grid-column: 2; justify-self: start; }
.notice strong { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.notice strong .i { width: 1rem; height: 1rem; transition: transform .4s var(--ease); }
@media (hover: hover) { .notice:hover { background: color-mix(in oklab, var(--blush) 75%, var(--paper)); } }
@media (hover: hover) { .notice:hover strong .i { transform: translateX(3px); } }
.phero__aside .notice { margin-bottom: 0; max-width: 25.5rem; } /* same width as the lead text below it */
/* single-column header below 768px: notice and lead text use the full width (like on phones) */
@media (max-width: 767px) {
  .phero__aside > .notice, .phero__aside > .lead { max-width: none; }
  /* the code finder is centred */
  .phero__aside > .find { justify-self: center; width: 100%; text-align: center; }
}
/* tablets (single-column header): use the width – notice across, lead text and the next block side by side */
@media (min-width: 768px) and (max-width: 960px) {
  .phero__aside { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 48px); align-items: start; }
  .phero__aside > .notice { grid-column: 1 / -1; max-width: none; }
  .phero__aside > .lead { max-width: none; }
  .phero__aside > :only-child { grid-column: 1 / -1; max-width: 38ch; }
}

/* ------------------------------------------- call bar (phones) + sheets */
.callbar { display: none; }
.callbar__btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 99px; color: var(--paper); font-weight: 700; font-size: .92rem; }
.callbar__btn .i { width: 18px; height: 18px; }
.callbar__btn--main { background: var(--lime); color: var(--ink); }
.callbar__btn[aria-current="page"] { color: var(--lime); }
@media (max-width: 960px) {
  .callbar {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 58;
    display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 4px; padding: 5px; border-radius: 99px; max-width: 520px; margin-inline: auto;
    background: color-mix(in oklab, var(--forest) 96%, transparent);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55), 0 0 0 1px color-mix(in oklab, var(--paper) 22%, transparent);
    transition: transform .5s var(--ease), opacity .3s;
  }
  /* hidden on the first screen (it would crowd the hero) – slides in once the visitor starts scrolling */
  .menu-open .callbar, .typing .callbar, .at-top .callbar { transform: translateY(150%); opacity: 0; pointer-events: none; }

  .page-catalog .callbar { display: none; }
  .sheet__note { display: block; margin-top: 2px; font-size: .82rem; color: var(--muted); }
  /* keep the end of the page clear of the bar */
  .ftr__bottom { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

.sheet {
  position: fixed; inset: auto 0 0; width: 100%; max-width: 560px; max-height: 92vh; margin: 0 auto; padding: 0; border: 0; overflow: auto;
  border-radius: 28px 28px 0 0; background: var(--paper); color: var(--ink); box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .45);
}
.sheet::backdrop { background: color-mix(in oklab, var(--ink) 55%, transparent); }
.sheet[open] { animation: sheet-in .45s var(--ease); }
@keyframes sheet-in { from { transform: translateY(100%); } }
.sheet__in { display: grid; gap: 10px; padding: 22px var(--gutter) calc(20px + env(safe-area-inset-bottom)); }
.sheet__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sheet__head h2 { font-size: 2rem; }
.sheet__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper-2); }
.sheet__row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: var(--paper-2); transition: background .3s; }
.sheet__row:active { background: var(--paper-3); }
@media (hover: hover) { .sheet__row:hover { background: var(--paper-3); } }
.sheet__info { flex: 1 1 auto; min-width: 0; display: grid; gap: 6px; justify-items: start; }
.sheet__info strong { font-weight: 700; line-height: 1.3; }
.sheet__info small { color: var(--muted); font-size: .85rem; }
.sheet__info .status { background: var(--paper); white-space: normal; }
.sheet__val { flex: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; color: var(--moss); }
/* very narrow phones (320–374px): labels fit their cells */
@media (max-width: 374px) {
  .callbar { left: 8px; right: 8px; gap: 2px; padding: 4px; }
  .callbar__btn { gap: 5px; font-size: .82rem; }
  .callbar__btn .i { width: 16px; height: 16px; }
}
/* short screens (landscape phones): the bar also steps aside while scrolling down, like the header –
   it comes back as soon as the visitor scrolls up */
@media (max-width: 960px) and (max-height: 500px) {
  .hdr-hidden .callbar { transform: translateY(150%); opacity: 0; pointer-events: none; }
}
.sheet__link { display: inline-flex; align-items: center; gap: 8px; justify-self: center; padding: 10px; font-size: .9rem; font-weight: 600; }

/* ---------------------------------------------------- shop catalogue */
.cat__head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px 64px; align-items: end; }
.cat__head h1 { font-size: clamp(2.8rem, 6vw, 6rem); }
.cat__aside { display: grid; gap: 20px; justify-items: start; color: var(--muted); }
.cat { padding-bottom: var(--sec); }
.cat__group + .cat__group { margin-top: clamp(36px, 4.4vw, 64px); }
.cat__title { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font: 400 clamp(1.5rem, 2.4vw, 2.2rem)/1.1 var(--f-display); letter-spacing: -.015em; }
.cat__title span { display: grid; place-items: center; flex: none; width: 1.75em; height: 1.75em; border-radius: 50%; background: var(--ink); color: var(--lime); font: 700 .55em/1 var(--f-sans); }
.cat__title small { font: 700 .72rem/1 var(--f-sans); letter-spacing: .1em; color: var(--muted); }
.cat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.cat__item { border-radius: var(--r-sm); overflow: hidden; background: var(--paper-2); break-inside: avoid; }
.cat__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cat__item figcaption { display: grid; gap: 3px; padding: 10px 12px 12px; font-size: .82rem; line-height: 1.35; color: var(--muted); }
.cat__item strong { font: 400 1.7rem/1 var(--f-display); color: var(--ink); }

@media print {
  @page { size: A4; margin: 10mm 11mm; }
  body { background: #fff; font-size: 10pt; }
  body::after, .hdr, .menu, .ftr, .skip, [data-print], .eyebrow, .callbar { display: none !important; }
  .wrap { width: 100%; }
  .phero { padding: 0 0 5mm; }
  .cat__head { grid-template-columns: 1fr; gap: 2mm; }
  .cat__head h1 { font-size: 22pt; }
  .cat__aside { font-size: 9pt; }
  .cat { padding: 0; }
  .cat__group + .cat__group { margin-top: 5mm; }
  .cat__title { margin: 0 0 2.5mm; gap: 2.5mm; font-size: 14pt; break-after: avoid; page-break-after: avoid; }
  .cat__title span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cat__title small { font-size: 7.5pt; }
  /* inline blocks instead of a grid: browsers (Safari especially) split grid items across pages,
     but never an inline block – a card that doesn't fit moves to the next page whole */
  .cat__grid { display: block; font-size: 0; }
  .cat__item {
    display: inline-block; vertical-align: top; width: calc((100% - 10mm) / 5); margin: 0 2.5mm 2.5mm 0;
    font-size: 10pt; break-inside: avoid; page-break-inside: avoid;
    background: none; border: .3mm solid #ccc; border-radius: 2mm;
  }
  .cat__item:nth-child(5n) { margin-right: 0; }
  .cat__item img { aspect-ratio: 3 / 2; }
  .cat__item figcaption { padding: 1.3mm 1.8mm 1.6mm; gap: .3mm; font-size: 7pt; line-height: 1.28; color: #333; }
  .cat__item strong { font-size: 13pt; }
}

/* --------------------------------------------------------------- prose */
.prose { padding-bottom: var(--sec); }
.prose > * { max-width: 760px; }
.nobr { white-space: nowrap; }
.prose h2 { font: 400 1.8rem/1.2 var(--f-display); margin: 48px 0 14px; }
.prose p, .prose li { color: var(--muted); margin-bottom: 12px; }
.prose ul { list-style: disc; padding-left: 22px; }
.todo { background: color-mix(in oklab, var(--lime) 70%, transparent); color: var(--ink); padding: 0 6px; border-radius: 4px; font-weight: 600; }

/* ----------------------------------------------------------------- 404 */
.e404 { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--hdr-h) + 40px) var(--gutter) 80px; }
.e404__sprout { width: 140px; height: 160px; margin: 0 auto 28px; color: var(--moss); }
.e404__sprout path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s var(--ease-io) .2s forwards; }
.e404__sprout path:nth-child(2) { animation-delay: .9s; }
.e404__sprout path:nth-child(3) { animation-delay: 1.3s; }
.e404 h1 { font-size: clamp(2.8rem, 7vw, 6.4rem); max-width: 14ch; margin: 0 auto 20px; }
.e404 p { color: var(--muted); margin-bottom: 32px; }
.e404 .e404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 32px 0 0; font-weight: 600; color: var(--ink); }
.e404__links a { padding-bottom: 2px; border-bottom: 1.5px solid var(--line); transition: border-color .3s; }
@media (hover: hover) { .e404__links a:hover { border-color: var(--ink); } }

/* ----------------------------------------------------------- responsive */
@media (max-width: 1320px) {
  .hero__loc { grid-template-columns: 1fr; gap: 4px; align-content: start; }
  .hero__loc .status { grid-column: 1; grid-row: auto; margin-top: 6px; white-space: normal; }
}

@media (max-width: 1100px) {
  .nav ul { gap: 20px; }
  .stores__full { display: none; }
  .stores__short { display: inline; }
  .stores { margin-left: 0; padding-left: 16px; gap: 2px 10px; }
  .family__list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  :root { --hdr-h: 68px; }
  .nav, .stores { display: none; }
  .burger { display: block; }
  .hdr__aside { margin-left: auto; }

  .hero__grid { grid-template-columns: 1fr; }
  /* keep the arch portrait at every size – a wide, low dome would leave the badge and the
     bouquet circle floating next to it instead of overlapping its edge */
  .hero__media { height: auto; min-height: 0; aspect-ratio: 4 / 4.8; width: min(100%, 76vh); max-height: none; margin-inline: auto; }
  .hero__media { --ai: .06; --al: calc(var(--ai) / 2); }
  .hero__bar { grid-template-columns: 1fr 1fr; gap: 18px; }
  .hero__scroll { display: none; }
  .br-lg { display: none; }

  .worlds__head, .phero__grid, .intro2, .svc__grid, .faq, .mission, .family__head, .letter__grid, .form-sec__grid, .ftr__top, .season__grid { grid-template-columns: minmax(0, 1fr); }
  .worlds__row { flex-direction: column; height: auto; }
  .world { min-height: 72vh; flex: none; }
  .world__more { grid-template-rows: 1fr; opacity: 1; }
  .world__cta { transform: none; opacity: 1; }

  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 24px; }

  .season__left { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; }
  .season__h { margin-bottom: 0; }
  .dial { width: clamp(150px, 34vw, 240px); }
  .dial__labels { display: none; }
  .dial__num { font-size: clamp(3rem, 9vw, 4.6rem); }
  .dial__lbl { display: none; }
  .season__months { display: flex; overflow-x: auto; border-radius: 22px; scrollbar-width: none; }
  .season__months::-webkit-scrollbar { display: none; }
  .season__months button { flex: 0 0 auto; padding: 12px 16px; }

  .window { --wt: 9vh; }
  .window__hint { font-size: 1.1rem; top: calc(var(--wt) - 40px); }
  .reel { height: auto !important; }
  .reel__sticky { position: static; height: auto; padding-block: var(--sec); }
  .reel__track { overflow-x: auto; width: auto; transform: none !important; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
  .reel__track::-webkit-scrollbar { display: none; }
  .reel__card { scroll-snap-align: center; height: 62vw; max-height: 460px; }
  .reel__card figcaption { transform: none; }
  .reel__progress { display: none; }

  .places__grid, .loc { grid-template-columns: 1fr; }
  .loc__map { min-height: 320px; }
  .svc--flip .svc__media { order: 0; }
  .svc__media { position: relative; top: 0; }
  .video__frame { aspect-ratio: auto; min-height: 520px; }
  .video__frame::after { background: linear-gradient(0deg, color-mix(in oklab, var(--ink) 85%, transparent) 20%, transparent 90%); }
  .video__copy { top: auto; bottom: 0; transform: none; padding-bottom: 32px; padding-right: 24px; }
  .values, .chapters__list { grid-template-columns: 1fr; }
  .cols3 { grid-template-columns: 1fr; }
  .cat__head { grid-template-columns: 1fr; }
  .chapter { min-height: 0; }
  .quote__grid { grid-template-columns: 1fr; }
  .arches { grid-template-columns: 1fr 1fr; }
  .arches figure:nth-child(3) { display: none; }
}

/* stacked hero (phones, portrait tablets): text block centred over the centred arch */
@media (max-width: 960px) {
  .hero__copy { text-align: center; }
  .hero__copy .notice { text-align: left; }
  /* the dot flows with the (possibly wrapping) text instead of sitting at the far left */
  .hero__copy .eyebrow { display: block; }
  .hero__copy .eyebrow .dot { display: inline-block; vertical-align: .05em; margin-right: 10px; }
  .hero__lead { margin-inline: auto; text-wrap: balance; }
  .hero__actions { justify-content: center; }
  .hero__loc { justify-items: center; text-align: center; }
  .hero__loc .status { justify-self: center; }
}

/* near-square and wider screens below desktop size: text and arch side by side, like on desktop */
@media (min-width: 700px) and (max-width: 960px) and (min-aspect-ratio: 9/10) {
  .hero__copy { text-align: left; }
  .hero__copy .eyebrow { display: inline-flex; }
  .hero__copy .eyebrow .dot { margin-right: 0; }
  .hero__lead { margin-inline: 0; text-wrap: wrap; }
  .hero__actions { justify-content: flex-start; }
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .hero__title { font-size: clamp(2.9rem, 7.6vw, 5rem); }
  .hero__media { width: min(100%, 58vh); margin: 0 0 0 auto; --al: var(--ai); }
  .hero__bar { margin-top: 18px; padding-top: 14px; }
  /* here the whole hero fits on the first screen – keep its shop/status bar clear of the call bar */
  .hero { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .letter__media .badge { right: 8px; }
  .hero__bar { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(2.6rem, 12.4vw, 4rem); }
  .hero__actions .btn { flex: 1 1 auto; justify-content: space-between; }
  .hero__actions .btn--line { justify-content: center; }
  .window { height: 200vh; }
  .window__frame { --a: 36vw; }
  .checks { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .family__list { grid-template-columns: 1fr 1fr; }
  .ftr__cols { grid-template-columns: 1fr; gap: 30px; }
  .menu__foot { grid-template-columns: 1fr; }
  .gal__grid { columns: 2 140px; }
  .gal__item figcaption { display: none; }
  .lb__foot { padding-bottom: 14px; gap: 10px; }
  .lb__cap { padding-top: 10px; font-size: .85rem; }
  .lb__order { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px; }
  .lb__codebox { min-width: 72px; padding: 10px; }
  .lb__codebox strong { font-size: 1.8rem; }
  .lb__ordertext { font-size: .88rem; }
  .lb__actions { grid-column: 1 / -1; justify-content: stretch; }
  .lb__actions .btn--lime { flex: 1 1 100%; justify-content: space-between; }
  .lb__actions .btn--line, .lb__share { flex: 1 1 0; justify-content: center; min-height: 48px; padding: 0 14px; }
  .phero h1 { font-size: clamp(2.6rem, 12vw, 4rem); }
}

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .preloader { display: none; }
  .window { height: auto; }
  .window__sticky { position: relative; height: 80vh; }
  .window__frame { --p: 1; }
  .window__text { --t: 1; }
  .window__shade { --t: 1; }
  .reel { height: auto !important; }
  .reel__sticky { position: static; height: auto; padding-block: var(--sec); }
  .reel__track { overflow-x: auto; width: auto; transform: none !important; }
  .reel__progress { display: none; }
}

/* No cross-document view transitions: Safari shows the new page in its end state during the
   transition and then replays every entrance animation afterwards, so headings appear twice.
   The reveal animations already give each page its entrance. */