/* Horský hotýlek Arnica — main stylesheet
   Concept: "Od stolu na vrchol". Warm inn palette, Young Serif + Figtree. */

:root {
  --cream: #FBF4E6;
  --cream-2: #F3E8D2;
  --cream-3: #E6D7B8;
  --ink: #2A1E16;
  --ink-2: #5A4A3C;
  --ink-3: #66574A;
  --wood: #3B2A1E;
  --wood-2: #54392A;
  --wood-3: #6B4A36;
  --roof: #B8432B;
  --roof-2: #96331F;
  --arnica: #F0B429;
  --arnica-2: #D99A16;
  --arnica-3: #FFD97A;
  --meadow: #7E8F45;
  --meadow-2: #55632B;
  --meadow-3: #C9D39A;
  --dusk: #2B3A5C;
  --dusk-2: #141E33;
  --white: #FFFDF8;

  --font-display: 'Young Serif', Georgia, 'Times New Roman', serif;
  --font-text: 'Figtree', 'Segoe UI', system-ui, sans-serif;

  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1360px;
  --radius: 18px;
  --shadow: 0 18px 40px -18px rgba(42,30,22,.35);
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.05rem;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -.005em; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
@media (max-width: 600px) { .lede, p, li { hyphens: auto; overflow-wrap: break-word; } h1, h2, h3 { overflow-wrap: break-word; } }
h1 { font-size: clamp(2.5rem, 6.4vw, 5.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
p { margin: 0 0 1em; }
.lede { font-size: clamp(1.12rem, 1.5vw, 1.32rem); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.eyebrow { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--roof-2); display: inline-flex; align-items: center; gap: .55em; margin-bottom: 1rem; }
.eyebrow svg { width: 18px; height: 18px; flex: none; }
.eyebrow .arn { width: 16px; height: 16px; color: var(--arnica-2); }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: clamp(64px, 7.5vw, 116px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 96px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--roof); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 200; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--arnica); outline-offset: 3px; border-radius: 6px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .6em; padding: .95em 1.5em; border-radius: 999px; border: 2px solid transparent; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1; transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s, color .16s, border-color .16s; white-space: nowrap; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn--roof { background: var(--roof); color: #fff; box-shadow: 0 10px 24px -12px rgba(184,67,43,.7); }
.btn--roof:hover { background: var(--roof-2); transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(184,67,43,.75); }
.btn--ghost { background: rgba(255,253,248,.12); color: #fff; border-color: rgba(255,253,248,.55); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: rgba(255,253,248,.22); border-color: #fff; transform: translateY(-2px); }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: var(--wood-2); transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.btn--arnica { background: var(--arnica); color: var(--ink); }
.btn--arnica:hover { background: var(--arnica-3); transform: translateY(-2px); }
.btn--sm { padding: .7em 1.1em; font-size: .92rem; }
.btn:active { transform: translateY(0) scale(.98); }
.link { font-weight: 700; text-decoration: none; white-space: nowrap; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px; transition: background-size .3s var(--ease-out); padding-bottom: 2px; }
.link:hover { background-size: 100% 2px; }
.link svg { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; margin-left: .3em; transition: transform .2s; }
.link:hover svg { transform: translateX(3px); }

/* Header */
.header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; transition: background .35s, box-shadow .35s, color .35s; color: #fff; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header--solid { background: rgba(251,244,230,.92); backdrop-filter: blur(12px); color: var(--ink); box-shadow: 0 1px 0 rgba(42,30,22,.08); }
.header--inner { color: var(--ink); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark { width: 44px; height: 44px; color: var(--arnica); flex: none; transition: transform .6s var(--ease-bounce); }
.brand:hover .brand__mark { transform: rotate(45deg); }
.brand__name { font-family: var(--font-display); font-size: 1.55rem; line-height: 1; }
.brand__sub { display: block; font-family: var(--font-text); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin-top: 4px; font-weight: 600; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.nav__list { display: flex; gap: clamp(12px, 1.6vw, 24px); list-style: none; margin: 0; padding: 0; }
.nav__list a { text-decoration: none; font-weight: 600; font-size: .95rem; position: relative; padding: 6px 0; }
.nav__list a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--arnica); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.lang { display: flex; gap: 2px; border: 1.5px solid currentColor; border-radius: 999px; padding: 2px; }
.lang a { text-decoration: none; font-size: .75rem; font-weight: 700; letter-spacing: .06em; padding: 5px 9px; border-radius: 999px; line-height: 1; opacity: .85; transition: background .2s, color .2s, opacity .2s; }
.lang a:hover { opacity: 1; background: rgba(240,180,41,.25); }
.lang a[aria-current="true"] { background: var(--arnica); color: var(--ink); opacity: 1; }
.nav__cta { display: inline-flex; }
.burger { display: none; width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer; border-radius: 12px; align-items: center; justify-content: center; }
.burger span { display: block; width: 24px; height: 2px; background: currentColor; margin: 3px 0; transition: transform .3s var(--ease-out), opacity .2s; border-radius: 2px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 1040px) {
  .nav__list, .nav .lang, .nav__cta { display: none; }
  .burger { display: inline-flex; }
}
.menu { position: fixed; inset: 0; z-index: 90; background: var(--wood); color: var(--cream); padding: calc(var(--header-h) + 24px) var(--gutter) 40px; display: flex; flex-direction: column; gap: 28px; transform: translateY(-104%); visibility: hidden; transition: transform .5s var(--ease-out), visibility 0s .5s; overflow: auto; }
.menu[data-open="true"] { transform: translateY(0); visibility: visible; transition: transform .5s var(--ease-out), visibility 0s; }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.menu ul a { font-family: var(--font-display); font-size: clamp(1.9rem, 7vw, 2.6rem); text-decoration: none; display: flex; align-items: baseline; gap: 14px; padding: 6px 0; border-bottom: 1px solid rgba(251,244,230,.12); }
.menu ul a small { font-family: var(--font-text); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--arnica); font-weight: 700; }
.menu__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.menu__foot .lang { border-color: rgba(251,244,230,.5); }
.menu__phone { font-family: var(--font-display); font-size: 1.5rem; text-decoration: none; }
.menu-arnica { position: absolute; right: -60px; bottom: -60px; width: 320px; height: 320px; color: rgba(240,180,41,.12); pointer-events: none; }

/* Hero */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: #fff; isolation: isolate; overflow: hidden; background: var(--wood); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero__media video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero__media video.is-ready { opacity: 1; }
.hero__grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(42,30,22,.45) 0%, rgba(42,30,22,0) 30%),
  linear-gradient(12deg, rgba(42,30,22,.86) 0%, rgba(42,30,22,.55) 34%, rgba(42,30,22,0) 66%); }
.hero__glow { position: absolute; z-index: -1; right: -10%; top: -20%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(240,180,41,.42), rgba(240,180,41,0) 62%); animation: breathe 12s ease-in-out infinite; pointer-events: none; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }
.hero__inner { position: static; padding-block: calc(var(--header-h) + 40px) 44px; display: grid; gap: 28px; }
.hero__proof { position: absolute; right: max(var(--gutter), calc((100% - var(--max)) / 2)); top: calc(var(--header-h) + 14px); z-index: 2; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.chip { display: inline-flex; align-items: center; gap: 10px; background: rgba(42,30,22,.55); backdrop-filter: blur(8px); border: 1px solid rgba(255,253,248,.25); border-radius: 999px; padding: 8px 14px 8px 10px; font-size: .85rem; text-decoration: none; transition: background .2s, transform .2s; }
.chip:hover { background: rgba(42,30,22,.75); transform: translateY(-1px); }
.chip__score { font-family: var(--font-display); font-size: 1.15rem; color: var(--arnica); line-height: 1; }
.chip__stars { display: inline-flex; gap: 1px; color: var(--arnica); }
.chip__stars svg { width: 12px; height: 12px; }
.chip small { opacity: .85; }
.hero__text { max-width: 900px; }
.hero__eyebrow { color: var(--arnica-3); align-items: flex-start; }
.hero__eyebrow .arn { margin-top: .15em; }
.hero h1 { text-wrap: balance; text-shadow: 0 2px 30px rgba(42,30,22,.4); }
.hero h1 .l { display: inline-block; }
.hero__lede { font-size: clamp(1.08rem, 1.6vw, 1.38rem); max-width: 56ch; margin: 22px 0 30px; line-height: 1.5; color: rgba(255,253,248,.92); text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; padding: 22px 0 0; margin: 0; border-top: 1px solid rgba(255,253,248,.25); font-size: .95rem; }
.hero__facts li { display: inline-flex; align-items: center; gap: 10px; }
.hero__facts b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; color: var(--arnica-3); }
.hero__scroll { position: absolute; right: calc(var(--gutter) + 96px); bottom: 34px; display: none; align-items: center; gap: 12px; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; text-decoration: none; opacity: .85; }
.hero__scroll .arrow { width: 38px; height: 38px; border: 1.5px solid rgba(255,253,248,.6); border-radius: 50%; display: grid; place-items: center; animation: nudge 2.2s ease-in-out infinite; }
.hero__scroll svg { width: 16px; height: 16px; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (min-width: 1041px) { .hero__scroll { display: inline-flex; } }
.hero__sound { position: absolute; left: var(--gutter); bottom: 34px; display: none; }
@media (max-width: 720px) {
  .hero__proof { position: static; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .hero__inner { padding-top: calc(var(--header-h) + 8px); gap: 18px; }
  .hero__media img, .hero__media video { object-position: 46% 62%; }
  .hero__facts { gap: 8px 18px; font-size: .88rem; }
}

/* Reveal system — variants, not one fade for everything */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.rv--tilt { transform: translateY(24px) rotate(-1.4deg); }
.rv--left { transform: translateX(-32px); }
.rv--scale { transform: scale(.94); }
.rv.is-in { opacity: 1; transform: none; }
.rv-group > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.rv-group.is-in > * { opacity: 1; transform: none; }
.rv-group.is-in > :nth-child(2) { transition-delay: .09s; }
.rv-group.is-in > :nth-child(3) { transition-delay: .18s; }
.rv-group.is-in > :nth-child(4) { transition-delay: .27s; }
.rv-group.is-in > :nth-child(5) { transition-delay: .36s; }
.rv-group.is-in > :nth-child(6) { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-group > * { opacity: 1; transform: none; transition: none; }
  .hero__glow, .hero__scroll .arrow, .brand__mark { animation: none !important; }
}

/* Panorama with annotations */
.pano { background: var(--cream); padding-top: clamp(64px, 8vw, 120px); }
.pano__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: end; margin-bottom: 36px; }
.pano__head p { margin: 0; }
.pano__stage { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--cream-3); }
.pano__stage img { width: 100%; height: auto; aspect-ratio: 1600 / 1067; object-fit: cover; }
.pano__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pano__svg line, .pano__svg path { stroke: var(--arnica-3); stroke-width: 1.6; fill: none; stroke-dasharray: 1000; stroke-dashoffset: 1000; stroke-linecap: round; filter: drop-shadow(0 1px 2px rgba(42,30,22,.6)); }
.pano__svg circle { fill: var(--arnica); stroke: var(--ink); stroke-width: 1.5; transform-origin: center; transform-box: fill-box; transform: scale(0); }
.pano__svg .ring { fill: none; stroke: var(--arnica-3); stroke-width: 1.2; opacity: 0; }
.pano.is-drawn .pano__svg line, .pano.is-drawn .pano__svg path { animation: draw 1.1s var(--ease-out) forwards; }
.pano.is-drawn .pano__svg circle { animation: pop .55s var(--ease-bounce) forwards; }
.pano.is-drawn .pano__svg .ring { animation: ringpulse 2.4s ease-out infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { transform: scale(1); } }
@keyframes ringpulse { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.6); } }
.tag { position: absolute; transform: translate(-50%, -50%); background: rgba(42,30,22,.82); color: #fff; backdrop-filter: blur(6px); border: 1px solid rgba(255,253,248,.2); border-radius: 12px; padding: 8px 12px; font-size: .82rem; line-height: 1.25; opacity: 0; transition: opacity .5s ease, transform .5s var(--ease-out); pointer-events: none; white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); }
.tag b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--arnica-3); }
.pano.is-drawn .tag { opacity: 1; }
@media (max-width: 860px) {
  .pano__head { grid-template-columns: 1fr; }
  .tag { font-size: .7rem; padding: 6px 8px; }
  .tag b { font-size: .82rem; }
}
@media (max-width: 560px) {
  .pano__stage { border-radius: 12px; }
  .pano__stage img { aspect-ratio: 4 / 3.4; object-position: 50% 40%; }
  .tag { display: none; }
  .pano__svg { display: none; }
  .pano__legend { display: grid !important; grid-template-columns: 1fr !important; gap: 12px; }
}
.pano__legend { display: none; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; list-style: none; padding: 0; font-size: .88rem; }
.pano__legend b { font-family: var(--font-display); font-weight: 400; display: block; }
.pano__legend li { display: flex; gap: 10px; align-items: flex-start; }
.pano__legend li::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--arnica); border: 1.5px solid var(--ink); flex: none; margin-top: .3em; }

/* Ledger of distances */
.ledger { background: var(--cream-2); }
.ledger__head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: 40px; }
.ledger__rows { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.ledger__row { display: grid; grid-template-columns: 200px 1fr auto; gap: 28px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--cream-3); transition: background .25s; position: relative; }
.ledger__row:hover { background: rgba(240,180,41,.12); }
.ledger__row:hover .ledger__num { color: var(--roof); transform: translateX(6px); }
.ledger__num { font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1; transition: color .25s, transform .3s var(--ease-out); white-space: nowrap; }
.ledger__num small { font-size: .45em; margin-left: .2em; }
.ledger__body h3 { margin-bottom: 6px; }
.ledger__body p { margin: 0; color: var(--ink-2); max-width: 62ch; }
.ledger__pic { width: 150px; height: 104px; border-radius: 12px; object-fit: cover; box-shadow: var(--shadow); transform: rotate(2deg); transition: transform .35s var(--ease-bounce); }
.ledger__row:hover .ledger__pic { transform: rotate(-1deg) scale(1.06); }
@media (max-width: 860px) {
  .ledger__head { grid-template-columns: 1fr; }
  .ledger__row { grid-template-columns: 1fr; gap: 10px; }
  .ledger__pic { width: 100%; height: 160px; transform: none; }
}

/* Kitchen (dark) */
.kitchen { background: var(--wood); color: var(--cream); overflow: hidden; }
.kitchen::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, rgba(240,180,41,.16), transparent 50%), radial-gradient(ellipse at 90% 90%, rgba(184,67,43,.18), transparent 45%); pointer-events: none; }
.kitchen__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; position: relative; }
.kitchen__fire { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.kitchen__fire img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; object-position: 60% 50%; }
.kitchen__fire::after { content: ''; position: absolute; left: 52%; top: 62%; width: 40%; height: 40%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255,160,60,.55), rgba(255,120,40,0) 60%); mix-blend-mode: screen; animation: flicker 2.8s ease-in-out infinite; pointer-events: none; }
@keyframes flicker { 0%, 100% { opacity: .75; transform: translate(-50%,-50%) scale(1); } 30% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } 60% { opacity: .65; transform: translate(-50%,-50%) scale(.96); } 80% { opacity: .95; transform: translate(-50%,-50%) scale(1.04); } }
.kitchen__fire figcaption { position: absolute; left: 16px; bottom: 16px; background: rgba(42,30,22,.7); backdrop-filter: blur(6px); padding: 8px 12px; border-radius: 10px; font-size: .82rem; }
.kitchen h2 { color: var(--arnica-3); }
.kitchen .lede { color: rgba(251,244,230,.85); }
.kitchen__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; list-style: none; padding: 0; margin: 28px 0 0; }
.kitchen__facts li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; font-size: .98rem; }
.kitchen__facts svg { width: 30px; height: 30px; color: var(--arnica); }
.kitchen__facts b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; margin-bottom: 2px; }
.kitchen__facts span { color: rgba(251,244,230,.75); font-size: .92rem; }
.kitchen__facts li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.plates { margin-top: clamp(48px, 6vw, 88px); position: relative; }
.plates__track { display: flex; gap: clamp(16px, 2.4vw, 32px); will-change: transform; width: max-content; padding-left: var(--gutter); }
.plate { width: clamp(220px, 26vw, 360px); flex: none; }
.plate img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.9); transition: transform .5s var(--ease-out); }
.plate:nth-child(odd) { transform: rotate(-1.2deg) translateY(10px); }
.plate:nth-child(even) { transform: rotate(1.1deg); }
.plate:hover img { transform: scale(1.04); }
.plate figcaption { margin-top: 10px; font-size: .88rem; color: rgba(251,244,230,.8); display: flex; justify-content: space-between; gap: 8px; }
.plate figcaption b { font-family: var(--font-display); font-weight: 400; color: var(--cream); }
.plates__hint { display: flex; justify-content: space-between; align-items: center; margin: 0 0 18px; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--arnica); }
.plates__progress { display: none; height: 3px; background: rgba(251,244,230,.16); border-radius: 999px; margin-top: 18px; overflow: hidden; }
.plates__progress span { display: block; height: 100%; width: 30%; background: var(--arnica); border-radius: 999px; will-change: transform; }
@media (pointer: coarse), (max-width: 860px) {
  .plates__track { overflow-x: auto; scroll-snap-type: x mandatory; width: auto; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); gap: 14px; transform: none !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
  .plates__track::-webkit-scrollbar { display: none; }
  .plate { width: min(78vw, 340px); scroll-snap-align: start; transform: none !important; }
  .plate img { aspect-ratio: 4 / 3; }
  .plate figcaption { flex-direction: column; gap: 2px; }
  .plates__progress { display: block; }
}
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: clamp(48px, 6vw, 80px); position: relative; }
.quote { background: rgba(251,244,230,.06); border: 1px solid rgba(251,244,230,.14); border-radius: 16px; padding: 48px 26px 24px; position: relative; }
.quote::before { content: '\201C'; position: absolute; left: 22px; top: 10px; font-family: var(--font-display); font-size: 3.4rem; color: var(--arnica); line-height: .8; opacity: .9; }
.quote p { font-family: var(--font-display); font-size: 1.22rem; line-height: 1.4; margin: 0 0 12px; }
.quote footer { font-size: .85rem; color: rgba(251,244,230,.7); display: flex; gap: 8px; align-items: center; }
.quote footer .stars { color: var(--arnica); display: inline-flex; gap: 1px; }
.quote footer .stars svg { width: 12px; height: 12px; }
@media (max-width: 860px) {
  .kitchen__grid { grid-template-columns: 1fr; }
  .kitchen__facts { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; }
}

/* Rooms — house with lit windows on evening sky */
.rooms { background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 100%); color: var(--ink); transition: background 1.2s ease, color 1.2s ease; overflow: hidden; }
.rooms.is-dusk { background: linear-gradient(180deg, var(--dusk) 0%, var(--dusk-2) 100%); color: var(--cream); }
.rooms__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.house { position: relative; }
.house svg { width: 100%; height: auto; overflow: visible; }
.house .scene { transition: opacity 1.4s ease; }
.rooms.is-dusk .house .scene { opacity: .36; }
.house .sky-star { fill: #fff; opacity: 0; transition: opacity 1.2s ease; }
.rooms.is-dusk .house .sky-star { opacity: .9; animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.house .moon { opacity: 0; transition: opacity 1.6s ease .3s; }
.rooms.is-dusk .house .moon { opacity: .95; }
.house .win { opacity: 0; transition: opacity .9s ease; }
.rooms.is-dusk .house .win.lit { opacity: 1; }
.rooms.is-dusk .house .win.lit.dim { opacity: .12; }
.house .smoke { fill: rgba(251,244,230,.55); opacity: 0; }
.rooms.is-dusk .house .smoke { animation: smoke 5s linear infinite; }
.rooms.is-dusk .house .smoke:nth-of-type(2) { animation-delay: 1.6s; }
.rooms.is-dusk .house .smoke:nth-of-type(3) { animation-delay: 3.2s; }
@keyframes smoke { 0% { opacity: 0; transform: translate(0,0) scale(.6); } 20% { opacity: .7; } 100% { opacity: 0; transform: translate(14px,-60px) scale(1.6); } }
.house__caption { font-size: .82rem; margin-top: 8px; opacity: .7; text-align: center; }
/* Photo house: the day photo fades away and leaves the blue-hour grade; halos add to the light rather than cover it */
.house--photo .scene { transition: opacity 1.8s ease; }
.rooms.is-dusk .house--photo .scene { opacity: 0; }
.house--photo .halo { mix-blend-mode: screen; }
/* Desktop: the house rides along the room list, centred in the viewport (phones get their own sticky band below) */
@media (min-width: 901px) {
  .rooms { overflow: clip; } /* clips like hidden, but keeps the viewport as the sticky scroller */
  .rooms__grid { align-items: start; }
  .house { position: sticky; top: max(calc(var(--header-h) + 24px), calc(50vh - 250px)); }
}
.only-touch { display: none; }
@media (hover: none) { .only-hover { display: none; } .only-touch { display: inline; } }
.rooms h2 { transition: color 1.2s ease; }
.rooms.is-dusk h2 { color: var(--arnica-3); }
.rooms .lede { transition: color 1.2s ease; }
.rooms.is-dusk .lede { color: rgba(251,244,230,.85); }
.roomtypes { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1.5px solid currentColor; }
.roomtype { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; padding: 14px 8px; border-bottom: 1px solid rgba(128,128,128,.25); cursor: default; transition: background .25s, transform .25s var(--ease-out); border-radius: 8px; }
.roomtype:hover, .roomtype:focus-within, .roomtype.is-active { background: rgba(240,180,41,.14); transform: translateX(6px); }
.roomtype__n { font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.roomtype__n small { font-size: .5em; }
.roomtype__t b { display: block; font-weight: 700; }
.roomtype__t span { font-size: .9rem; opacity: .75; }
.roomtype__c { font-family: var(--font-display); font-size: 1.15rem; white-space: nowrap; opacity: .9; }
.rooms__total { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; font-size: .95rem; }
.rooms__total b { font-family: var(--font-display); font-size: 2rem; font-weight: 400; color: var(--arnica-2); }
.rooms.is-dusk .rooms__total b { color: var(--arnica); }
.rooms__equip { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 20px 0 0; }
.rooms__equip li { border: 1px solid currentColor; border-radius: 999px; padding: 6px 12px; font-size: .84rem; opacity: .85; }
.rooms__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.rooms__photos figure { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.rooms__photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s var(--ease-out); }
.rooms__photos figure:hover img { transform: scale(1.04); }
.rooms__photos figcaption { font-size: .82rem; padding: 8px 12px; opacity: .8; }
.rooms__honest { margin-top: 20px; padding: 16px 20px; border-left: 3px solid var(--arnica); background: rgba(240,180,41,.1); border-radius: 0 12px 12px 0; font-size: .95rem; }
@media (max-width: 900px) {
  .rooms { overflow: visible; }
  .rooms.is-dusk { background: var(--dusk); }
  .rooms__grid { display: flex; flex-direction: column; }
  .house { order: -1; position: sticky; top: var(--header-h); z-index: 3; margin: 0 calc(-1 * var(--gutter)) 12px; padding: 6px var(--gutter) 10px; background: var(--cream); box-shadow: 0 14px 22px -16px rgba(20,30,51,.7); transition: background 1.2s ease; }
  .rooms.is-dusk .house { background: var(--dusk); }
  .house__caption { margin-top: 4px; font-size: .76rem; }
  .rooms__photos { grid-template-columns: 1fr; }
  .roomtype { grid-template-columns: 64px 1fr auto; gap: 10px; padding: 14px 10px; }
  .roomtype__n { font-size: 1.6rem; }
  .roomtype:hover, .roomtype:focus-within { transform: none; background: transparent; }
  .roomtype.is-active { background: rgba(240,180,41,.2); transform: none; box-shadow: inset 3px 0 0 var(--arnica); }
}

/* Garden with living meadow */
.garden { background: var(--cream); padding-top: 0; }
.meadow { position: relative; height: clamp(180px, 26vw, 320px); background: linear-gradient(180deg, var(--cream) 0%, #F6EBCF 100%); overflow: hidden; }
.meadow canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.meadow__hint { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--meadow-2); opacity: .7; pointer-events: none; white-space: nowrap; }
.garden__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(40px, 5vw, 72px); }
.garden__pic { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.garden__pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 50%; }
.garden__pic .stamp { position: absolute; right: 18px; top: 18px; width: 108px; height: 108px; border-radius: 50%; background: var(--arnica); color: var(--ink); display: grid; place-items: center; text-align: center; font-size: .72rem; line-height: 1.15; font-weight: 700; letter-spacing: .04em; transform: rotate(-8deg); box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); padding: 10px; }
.garden__pic .stamp b { font-family: var(--font-display); font-size: 1.5rem; display: block; font-weight: 400; }
.garden__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.garden__list li { display: flex; gap: 12px; align-items: flex-start; }
.garden__list svg { width: 28px; height: 28px; color: var(--meadow-2); flex: none; }
.garden__list b { display: block; }
.garden__list span { font-size: .9rem; color: var(--ink-2); }
@media (max-width: 900px) {
  .garden__grid { grid-template-columns: 1fr; }
  .garden__list { grid-template-columns: 1fr; }
}

/* Radial distance map */
.radial { background: var(--cream-2); }
.radial__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.compass { position: relative; width: 100%; aspect-ratio: 1; max-width: 680px; margin-inline: auto; justify-self: center; }
.compass svg { width: 100%; height: 100%; overflow: visible; }
.compass .ring { fill: none; stroke: var(--ink); stroke-opacity: .18; stroke-width: 1; stroke-dasharray: 3 5; }
.compass .ring-label { font-size: 10px; fill: var(--ink-3); font-family: var(--font-text); font-weight: 700; letter-spacing: .08em; }
.compass .sweep, .compass .sweep-line, .compass .ring, .compass .ring-label, .compass .cardinal { pointer-events: none; }
.compass .sweep { fill: url(#sweepGrad); transform-origin: 300px 300px; animation: sweep 18s linear infinite; opacity: .7; }
@keyframes sweep { to { transform: rotate(360deg); } }
.compass .center { fill: var(--roof); stroke: var(--cream); stroke-width: 3; }
.compass .center-label { font-family: var(--font-display); font-size: 13px; fill: var(--ink); text-anchor: middle; }
.compass .cardinal { font-size: 11px; font-weight: 800; fill: var(--ink-2); text-anchor: middle; letter-spacing: .1em; }
.pin { cursor: pointer; }
.pin circle { fill: var(--arnica); stroke: var(--ink); stroke-width: 1.5; transition: transform .3s var(--ease-bounce), fill .2s; transform-origin: center; transform-box: fill-box; }
.pin .halo { fill: var(--arnica); stroke: none; opacity: 0; }
.pin text { font-family: var(--font-text); font-size: 11px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--cream-2); stroke-width: 3px; stroke-linejoin: round; cursor: pointer; }
.pin__num { display: none; stroke: none; font-weight: 800; pointer-events: none; }
.pin:hover circle, .pin.is-active circle { fill: var(--roof); transform: scale(1.6); }
.pin.is-active .halo { animation: ringpulse 1.6s ease-out infinite; }
.pin[data-kind="winter"] circle { fill: #9FC6E8; }
.pin[data-kind="summer"] circle { fill: var(--meadow-3); }
.pin[data-kind="de"] circle { fill: #F4D9A6; }
.compass .sweep-line { stroke: var(--roof); stroke-width: 1; opacity: .35; transform-origin: 300px 300px; animation: sweep 18s linear infinite; }
.radial__side h2 { margin-bottom: 12px; }
.radial__card { margin-top: 20px; background: var(--cream); border: 1px solid var(--cream-3); border-radius: var(--radius); padding: 22px 24px; min-height: 200px; box-shadow: var(--shadow); transition: transform .3s var(--ease-out); }
.radial__card.is-swap { animation: cardin .4s var(--ease-out); }
@keyframes cardin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.radial__card .kind { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--roof); }
.radial__card h3 { margin: 4px 0 6px; }
.radial__card .dist { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink-2); margin-bottom: 8px; }
.radial__card .dist small { font-family: var(--font-text); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin-left: 6px; }
.radial__card p { margin: 0; color: var(--ink-2); }
.radial__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.radial__list button { border: 1px solid var(--cream-3); background: var(--cream); border-radius: 999px; padding: 6px 12px; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.radial__list button:hover, .radial__list button.is-active { background: var(--arnica); border-color: var(--arnica); transform: translateY(-1px); }
@media (max-width: 900px) {
  .radial__grid { grid-template-columns: 1fr; }
  .compass { max-width: 520px; }
  .pin__label { display: none; }
  .pin__num { display: block; font-size: 15px; }
  .pin circle:not(.halo) { r: 12px; }
  .pin .halo { r: 14px; }
  .pin:hover circle, .pin.is-active circle { transform: scale(1.3); }
  .compass .ring-label { font-size: 14px; }
  .compass .cardinal { font-size: 15px; }
  .compass .center-label { font-size: 18px; }
  .compass .center { r: 12px; }
  .radial__list button::before { content: attr(data-n) ' \00b7 '; color: var(--roof-2); font-weight: 800; }
}
@media (prefers-reduced-motion: reduce) { .compass .sweep, .compass .sweep-line { animation: none; opacity: 0; } }

/* Seasons — two editorial chapters */
.seasons { background: var(--cream); }
.seasons__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.season { border-radius: var(--radius); overflow: hidden; background: var(--white); border: 1px solid var(--cream-3); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.season--winter { background: linear-gradient(180deg, #F2F6FB, #FBF4E6 60%); }
.season--summer { background: linear-gradient(180deg, #F4F7E4, #FBF4E6 60%); }
.season__pics { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px; padding: 6px; }
.season__pics img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; border-radius: 12px; }
.season__pics img:first-child { aspect-ratio: 5 / 3.4; }
.season__body { padding: 26px 28px 30px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.season__body .eyebrow { margin-bottom: 0; }
.season--winter .eyebrow { color: #3B6FA8; }
.season--summer .eyebrow { color: var(--meadow-2); }
.season__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 4px; }
.season__stats div { background: rgba(42,30,22,.05); border-radius: 12px; padding: 12px 10px; text-align: center; }
.season__stats b { font-family: var(--font-display); font-size: clamp(1.15rem, 4.6vw, 1.55rem); display: block; font-weight: 400; line-height: 1.05; white-space: nowrap; }
@media (max-width: 420px) { .season__stats { gap: 6px; } .season__stats div { padding: 10px 4px; } .season__stats span { font-size: .62rem; letter-spacing: .03em; } }
.season__stats span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); }
.season__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.season__list li { display: flex; gap: 10px; align-items: flex-start; font-size: .96rem; }
.season__list li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--arnica); flex: none; margin-top: .55em; }
.season__list b { font-weight: 700; }
.season__body .link { margin-top: auto; align-self: flex-start; }
@media (max-width: 860px) { .seasons__grid { grid-template-columns: 1fr; } }

/* Reviews */
.reviews { background: var(--cream-2); }
.reviews__sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0 40px; }
.source { background: var(--cream); border: 1px solid var(--cream-3); border-radius: 16px; padding: 22px 24px; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; text-decoration: none; transition: transform .25s var(--ease-out), box-shadow .25s; }
.source:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.source__score { font-family: var(--font-display); font-size: 2.8rem; line-height: 1; grid-row: span 2; }
.source__score small { font-size: .38em; color: var(--ink-3); }
.source__name { font-weight: 800; }
.source__meta { font-size: .85rem; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.source__meta .stars { color: var(--arnica-2); display: inline-flex; gap: 1px; }
.source__meta .stars svg { width: 13px; height: 13px; }
.reviews__quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rq { background: var(--white); border-radius: 16px; padding: 24px; border: 1px solid var(--cream-3); position: relative; transform: rotate(var(--r, 0deg)); transition: transform .3s var(--ease-out); }
.rq:hover { transform: rotate(0) translateY(-3px); }
.rq p { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.4; margin: 0 0 12px; }
.rq footer { font-size: .84rem; color: var(--ink-3); }
.reviews__note { font-size: .82rem; color: var(--ink-3); margin-top: 18px; }
@media (max-width: 860px) { .reviews__sources, .reviews__quotes { grid-template-columns: 1fr; } }

/* Enquiry */
.enquiry { background: var(--cream); }
.enquiry__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.enquiry__aside { position: sticky; top: calc(var(--header-h) + 24px); }
.contact-lines { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.contact-lines li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; }
.contact-lines .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--cream-2); display: grid; place-items: center; color: var(--roof); }
.contact-lines .ico svg { width: 22px; height: 22px; }
.contact-lines a { text-decoration: none; font-weight: 700; font-size: 1.08rem; }
.contact-lines small { display: block; color: var(--ink-3); font-size: .82rem; }
.form { background: var(--white); border: 1px solid var(--cream-3); border-radius: var(--radius); padding: clamp(20px, 3vw, 36px); box-shadow: var(--shadow); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__row--3 { grid-template-columns: 1fr 1fr 1fr; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--cream-3); border-radius: 12px; background: var(--cream); font: inherit; color: var(--ink); transition: border-color .2s, box-shadow .2s, background .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--arnica-2); box-shadow: 0 0 0 4px rgba(240,180,41,.25); background: #fff; }
.field input:user-invalid, .field.is-error input { border-color: var(--roof); }
.field .err { font-size: .8rem; color: var(--roof); display: none; }
.field.is-error .err { display: block; }
.field textarea { min-height: 110px; resize: vertical; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills label { position: relative; }
.pills input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pills span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--cream-3); background: var(--cream); font-size: .9rem; font-weight: 600; transition: background .2s, border-color .2s, color .2s; }
.pills input:checked + span { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pills input:focus-visible + span { outline: 3px solid var(--arnica); outline-offset: 2px; }
.form__foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 8px; }
.form__note { font-size: .82rem; color: var(--ink-3); max-width: 44ch; }
.form__status { margin-top: 14px; padding: 12px 16px; border-radius: 12px; font-size: .92rem; display: none; }
.form__status.is-ok { display: block; background: rgba(126,143,69,.14); border: 1px solid var(--meadow); color: var(--meadow-2); }
.form__status.is-err { display: block; background: rgba(184,67,43,.1); border: 1px solid var(--roof); color: var(--roof-2); }
.demo-note { font-size: .78rem; color: var(--ink-3); border: 1px dashed var(--cream-3); border-radius: 10px; padding: 8px 12px; margin-top: 12px; }
@media (max-width: 900px) {
  .enquiry__grid { grid-template-columns: 1fr; }
  .enquiry__aside { position: static; }
  .form__row, .form__row--3 { grid-template-columns: 1fr; }
}

/* Steps form (rezervace page) */
.steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; counter-reset: s; }
.steps li { flex: 1; display: flex; align-items: center; gap: 10px; font-size: .84rem; font-weight: 700; color: var(--ink-3); padding-bottom: 10px; border-bottom: 3px solid var(--cream-3); transition: color .3s, border-color .3s; }
.steps li::before { counter-increment: s; content: counter(s); width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: .8rem; }
.steps li.is-active { color: var(--ink); border-color: var(--roof); }
.steps li.is-done { color: var(--meadow-2); border-color: var(--meadow); }
.step { display: none; }
.step.is-active { display: block; animation: cardin .35s var(--ease-out); }
.summary { background: var(--cream-2); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; font-size: .95rem; display: grid; gap: 6px; }
.summary div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--cream-3); padding-bottom: 4px; }
.summary div span:last-child { font-weight: 700; text-align: right; }
.counter { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; border: 1.5px solid var(--cream-3); border-radius: 12px; background: var(--cream); overflow: hidden; }
.counter button { height: 44px; border: 0; background: transparent; cursor: pointer; font-size: 1.4rem; line-height: 1; transition: background .2s; }
.counter button:hover { background: var(--cream-2); }
.counter output { text-align: center; font-weight: 700; font-size: 1.1rem; }

/* Page hero (inner pages) */
.phero { position: relative; padding: calc(var(--header-h) + clamp(40px, 6vw, 90px)) 0 clamp(40px, 6vw, 80px); background: var(--cream-2); overflow: hidden; }
.phero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.phero__pic { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transform: rotate(1.2deg); }
.phero__pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.phero h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); }
.breadcrumb { font-size: .82rem; color: var(--ink-3); margin-bottom: 16px; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--roof); }
@media (max-width: 860px) { .phero__grid { grid-template-columns: 1fr; } .phero__pic { transform: none; } }

/* Guide chapters (okoli page) */
.chapter { padding-block: clamp(48px, 6vw, 96px); border-bottom: 1px solid var(--cream-3); }
.chapter:nth-child(even) { background: var(--cream-2); }
.chapter__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.chapter:nth-child(even) .chapter__grid > :first-child { order: 2; }
.chapter__pic { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.chapter__pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.chapter__pic--small img { aspect-ratio: 3 / 2; }
.chapter .stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.chapter .stats div { background: rgba(42,30,22,.06); border-radius: 12px; padding: 10px 14px; min-width: 100px; }
.chapter .stats b { font-family: var(--font-display); font-size: 1.5rem; display: block; font-weight: 400; line-height: 1.05; }
.chapter .stats span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); }
.chapter ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.chapter ul li { display: flex; gap: 10px; align-items: flex-start; }
.chapter ul li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--arnica); flex: none; margin-top: .6em; }
.chapter .src { font-size: .76rem; color: var(--ink-3); margin-top: 12px; }
.chapter__nopic { max-width: 72ch; }
@media (max-width: 860px) { .chapter__grid { grid-template-columns: 1fr; } .chapter:nth-child(even) .chapter__grid > :first-child { order: 0; } }
.guide-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.guide-nav a { text-decoration: none; border: 1.5px solid var(--ink); border-radius: 999px; padding: 8px 14px; font-size: .86rem; font-weight: 700; transition: background .2s, color .2s, transform .2s; }
.guide-nav a:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }

/* CTA band */
.band { background: var(--roof); color: #fff; padding-block: clamp(48px, 6vw, 80px); position: relative; overflow: hidden; }
.band::before { content: ''; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: rgba(240,180,41,.3); }
.band .wrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; position: relative; }
.band h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); max-width: 22ch; }
.band .btn--arnica { box-shadow: 0 12px 28px -12px rgba(0,0,0,.5); }

/* Footer */
.footer { background: var(--wood); color: var(--cream); position: relative; padding-top: 0; }
.footer__ridge { display: block; width: 100%; height: auto; color: var(--wood); background: var(--cream); }
.footer__ridge--band { background: var(--roof); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: clamp(40px, 5vw, 72px) 0 32px; }
.footer .footer__title { font-family: var(--font-text); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--arnica); margin-bottom: 14px; font-weight: 800; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { text-decoration: none; opacity: .88; transition: opacity .2s, color .2s; }
.footer ul a, .footer address a { text-decoration: underline; text-decoration-color: rgba(240,180,41,.6); text-underline-offset: 3px; }
.msg a { text-decoration: underline; text-underline-offset: 2px; }
.footer a:hover { opacity: 1; color: var(--arnica-3); }
.footer address { font-style: normal; line-height: 1.6; opacity: .9; }
.footer__brand .brand__mark { color: var(--arnica); }
.footer__brand p { opacity: .8; font-size: .95rem; max-width: 40ch; margin-top: 14px; }
.footer__bottom { border-top: 1px solid rgba(251,244,230,.14); padding: 18px 0 calc(18px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: .8rem; opacity: .75; }
.footer .lang { border-color: rgba(251,244,230,.4); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* Sticky mobile CTA */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none; gap: 8px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(251,244,230,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--cream-3); transform: translateY(110%); transition: transform .4s var(--ease-out); }
.sticky.is-on { transform: translateY(0); }
.sticky .btn { flex: 1; justify-content: center; }
@media (max-width: 720px) { .sticky { display: flex; } body { padding-bottom: 0; } }

/* Chatbot — "Recepce" */
.chat-fab { position: fixed; right: 18px; bottom: 18px; z-index: 85; width: 62px; height: 62px; border-radius: 50%; border: 0; background: var(--arnica); color: var(--ink); box-shadow: 0 14px 30px -10px rgba(42,30,22,.5); cursor: pointer; display: grid; place-items: center; transition: transform .3s var(--ease-bounce), background .2s; }
.chat-fab:hover { transform: scale(1.08) rotate(20deg); background: var(--arnica-3); }
.chat-fab svg { width: 32px; height: 32px; }
.chat-fab .badge { position: absolute; top: -4px; right: -4px; background: var(--roof); color: #fff; width: 20px; height: 20px; border-radius: 50%; font-size: .7rem; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--cream); }
.chat-fab[aria-expanded="true"] .badge { display: none; }
.chat { position: fixed; right: 18px; bottom: 92px; z-index: 86; width: min(380px, calc(100vw - 28px)); max-height: min(620px, calc(100vh - 120px)); background: var(--cream); border-radius: 22px; border: 1px solid var(--cream-3); box-shadow: 0 30px 60px -20px rgba(42,30,22,.5); display: flex; flex-direction: column; overflow: hidden; transform: translateY(20px) scale(.96); opacity: 0; pointer-events: none; transition: transform .35s var(--ease-out), opacity .3s; transform-origin: bottom right; }
.chat[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--wood); color: var(--cream); }
.chat__head .mark { width: 38px; height: 38px; border-radius: 50%; background: var(--arnica); color: var(--ink); display: grid; place-items: center; flex: none; }
.chat__head .mark svg { width: 24px; height: 24px; }
.chat__head b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; }
.chat__head small { font-size: .74rem; opacity: .8; display: flex; align-items: center; gap: 6px; }
.chat__head small::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #8BC34A; }
.chat__close { margin-left: auto; width: 36px; height: 36px; border: 0; background: rgba(251,244,230,.12); color: var(--cream); border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.chat__close svg { width: 16px; height: 16px; }
.chat__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: .93rem; line-height: 1.45; animation: cardin .3s var(--ease-out); }
.msg--bot { background: var(--white); border: 1px solid var(--cream-3); border-bottom-left-radius: 6px; align-self: flex-start; }
.msg--user { background: var(--ink); color: var(--cream); border-bottom-right-radius: 6px; align-self: flex-end; }
.msg a { color: var(--roof); font-weight: 700; }
.msg--typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: dot 1s ease-in-out infinite; }
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
.chat__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.chat__chips button { border: 1.5px solid var(--cream-3); background: var(--white); border-radius: 999px; padding: 7px 12px; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, transform .15s; }
.chat__chips button:hover { background: var(--arnica); border-color: var(--arnica); transform: translateY(-1px); }
.chat__form { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--cream-3); background: var(--cream); }
.chat__form input { flex: 1; border: 1.5px solid var(--cream-3); border-radius: 999px; padding: 10px 14px; font: inherit; background: var(--white); }
.chat__form input:focus { outline: none; border-color: var(--arnica-2); box-shadow: 0 0 0 3px rgba(240,180,41,.25); }
.chat__form button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--roof); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .15s; }
.chat__form button:hover { background: var(--roof-2); transform: scale(1.05); }
.chat__form button svg { width: 18px; height: 18px; }
.chat__demo { font-size: .68rem; text-align: center; color: var(--ink-3); padding: 0 12px 8px; }

/* 404 */
.nf { min-height: 80vh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 40px) var(--gutter) 60px; }
.nf .brand__mark { width: 80px; height: 80px; margin-inline: auto; color: var(--arnica); }

/* Live pills */
.live { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 12px 6px 10px; font-size: .8rem; font-weight: 700; background: rgba(251,244,230,.1); border: 1px solid rgba(251,244,230,.2); margin-bottom: 14px; }
.live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #8BC34A; box-shadow: 0 0 0 0 rgba(139,195,74,.6); animation: livepulse 2s ease-out infinite; }
.live[data-state="closed"]::before { background: var(--arnica); box-shadow: none; animation: none; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(139,195,74,.6); } 100% { box-shadow: 0 0 0 9px rgba(139,195,74,0); } }
.now-badge { display: inline-block; margin-left: 10px; background: var(--arnica); color: var(--ink); border-radius: 999px; padding: 3px 10px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; vertical-align: middle; transform: rotate(-3deg); }
img[data-lqip] { background-size: cover; background-position: center; }

/* Utilities */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.mt-2 { margin-top: 2rem; }
.tc { text-align: center; }
.arn-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.arn-list li { display: flex; gap: 10px; align-items: flex-start; }
.arn-list li svg { width: 18px; height: 18px; color: var(--arnica-2); flex: none; margin-top: .25em; }
::selection { background: var(--arnica); color: var(--ink); }

/* Mobile overrides that must win over base rules declared later in the cascade */
@media (max-width: 560px) { .pano__legend { grid-template-columns: 1fr; gap: 12px; } }

/* ==========================================================================
   MOBILE LAYER - chatbot sheet, drawn-house band, enquiry flow.
   Declared last on purpose: these must win over the base rules above.
   ========================================================================== */

/* --- Foundations: nothing may hide behind the sticky bar or the chat button */
@media (max-width: 720px) {
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  body.page-rezervace { padding-bottom: env(safe-area-inset-bottom); }
  body.page-rezervace .sticky { display: none; }
  /* The enquiry page has one job; a floating button over its submit CTA is noise.
     Reception phone, e-mail and FAQ sit directly under the form. */
  body.page-rezervace .chat-fab, body.page-rezervace .chat, body.page-rezervace .chat-scrim { display: none; }
  body.is-locked { overflow: hidden; }
}

/* ==========================================================================
   1. CHATBOT - a real bottom sheet on phones, not a shrunken desktop card
   ========================================================================== */
.chat-scrim { position: fixed; inset: 0; z-index: 84; background: rgba(20,30,51,.55); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-out); display: none; }

@media (max-width: 720px) {
  .chat-scrim { display: block; z-index: 101; }
  body.chat-open .chat-scrim { opacity: 1; pointer-events: auto; }
  body.chat-open .chat { z-index: 102; }

  /* The sheet: full width, anchored to the bottom, keyboard aware through --kb */
  .chat {
    left: 0; right: 0; width: auto;
    bottom: var(--kb, 0px);
    height: 640px;
    height: min(86svh, 680px);
    max-height: calc(100vh - var(--kb, 0px) - 8px);
    max-height: calc(100svh - var(--kb, 0px) - 8px);
    border-radius: 26px 26px 0 0;
    border: 0; border-top: 1px solid var(--cream-3);
    box-shadow: 0 -18px 50px -12px rgba(20,30,51,.55);
    transform: translateY(101%);
    transform-origin: bottom center;
    transition: transform .42s var(--ease-out), opacity .2s, bottom .2s ease, max-height .2s ease;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .chat[data-open="true"] { transform: translateY(0); opacity: 1; }
  .chat.is-dragging { transition: none; }

  /* Grab handle - signals that the sheet can be pulled down */
  .chat__grip { display: block; position: absolute; top: 8px; left: 50%; width: 42px; height: 4px; margin-left: -21px; border-radius: 99px; background: rgba(251,244,230,.42); z-index: 2; pointer-events: none; }
  .chat__head { padding: 22px 14px 14px; gap: 11px; touch-action: none; }
  .chat__head .mark { width: 34px; height: 34px; }
  .chat__head .mark svg { width: 21px; height: 21px; }
  .chat__head b { font-size: 1.02rem; }
  .chat__head small { font-size: .7rem; line-height: 1.3; }
  .chat__close { width: 40px; height: 40px; }

  .chat__log { padding: 14px 14px 6px; gap: 9px; overscroll-behavior: contain; }
  .msg { max-width: 92%; font-size: .95rem; }

  /* Quick replies stay on ONE swipeable row - wrapped they ate three rows of the log */
  .chat__chips {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    padding: 6px 14px 10px; gap: 7px;
    scrollbar-width: none; -ms-overflow-style: none;
    scroll-snap-type: x proximity; scroll-padding-inline: 14px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  }
  .chat__chips::-webkit-scrollbar { display: none; }
  .chat__chips button { flex: none; scroll-snap-align: start; padding: 9px 14px; font-size: .86rem; }
  .chat__chips button:active { background: var(--arnica); border-color: var(--arnica); }

  .chat__form { padding: 10px 12px; gap: 9px; }
  .chat__form input { padding: 12px 16px; font-size: 16px; }
  .chat__form button { width: 46px; height: 46px; }
  .chat__demo { font-size: .66rem; line-height: 1.35; padding: 0 16px 10px; }

  /* While the sheet is open nothing else competes for the thumb */
  body.chat-open .chat-fab { opacity: 0; transform: translateY(28px) scale(.85); pointer-events: none; }
  body.chat-open .sticky { transform: translateY(110%); }

  .chat-fab { bottom: calc(76px + env(safe-area-inset-bottom)); right: 12px; width: 50px; height: 50px; transition: transform .32s var(--ease-out), opacity .25s, background .2s; }
  .chat-fab svg { width: 26px; height: 26px; }
  .chat-fab .badge { width: 18px; height: 18px; font-size: .66rem; }
  /* Peeks aside while the visitor scrolls down, returns the moment they stop */
  .chat-fab.is-peek { transform: translateX(58%); opacity: .5; }
}

/* ==========================================================================
   2. DOMECEK - the drawn house as a cinematic sticky band
   ========================================================================== */
@media (max-width: 900px) {
  .rooms__grid { align-items: stretch; }
  .house {
    order: -1; position: sticky; top: var(--header-h); z-index: 3; align-self: stretch;
    margin: 0 calc(-1 * var(--gutter)) 14px; padding: 0;
    background: transparent; box-shadow: none;
  }
  .rooms.is-dusk .house { background: transparent; }

  /* Fixed aspect so the band never jumps; the SVG is reframed to the facade in JS */
  .house__stage {
    position: relative; overflow: hidden; width: 100%;
    aspect-ratio: 500 / 320;
    background: var(--cream);
    transition: background 1.2s ease;
    box-shadow: 0 16px 26px -20px rgba(20,30,51,.85);
  }
  .rooms.is-dusk .house__stage { background: var(--dusk); }
  .house__stage svg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    /* the ground dissolves into the night instead of being sliced off */
    -webkit-mask-image: linear-gradient(180deg, #000 0 87%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0 87%, transparent 100%);
  }

  .house__caption {
    position: absolute; left: 14px; right: 14px; bottom: 9px; margin: 0;
    text-align: center; font-size: .72rem; line-height: 1.3; opacity: .72;
    transition: opacity .5s ease, transform .5s var(--ease-out);
  }
  /* Once the visitor has picked a room the hint has done its job */
  .rooms.is-explored .house__caption { opacity: 0; transform: translateY(8px); }

  /* right lane kept clear so the chat button never sits on a capacity figure */
  .roomtype { grid-template-columns: 48px 1fr auto; gap: 9px; padding: 15px 46px 15px 8px; }
  .roomtype__t span { font-size: .85rem; }
  .rooms__equip, .rooms__total { padding-right: 46px; }
  .roomtype__n { font-size: 1.55rem; }
  .roomtype__t b { font-size: 1.02rem; }
  .roomtype__c { font-size: 1rem; }
  .roomtype:hover, .roomtype:focus-within { transform: none; background: transparent; }
  .roomtype.is-active { transform: none; background: rgba(240,180,41,.16); box-shadow: inset 3px 0 0 var(--arnica); }
  /* On the dusk background the old flat wash read as muddy grey */
  .rooms.is-dusk .roomtype.is-active { background: linear-gradient(90deg, rgba(240,180,41,.3), rgba(240,180,41,.05) 75%); }
  .rooms.is-dusk .roomtype.is-active .roomtype__n { color: var(--arnica-3); }
  .rooms.is-dusk .roomtype.is-active .roomtype__c { opacity: 1; color: var(--arnica-3); }
}
@media (min-width: 621px) and (max-width: 900px) {
  .house__stage { max-width: 560px; margin-inline: auto; }
}

/* ==========================================================================
   3. POPTAVKA - the enquiry flow
   ========================================================================== */
.form { scroll-margin-top: calc(var(--header-h) + 14px); }
.steps__now { display: none; font-size: .82rem; font-weight: 700; color: var(--ink-2); margin: 0 0 16px; }
.steps__now b { font-family: var(--font-display); font-weight: 400; color: var(--roof); font-size: 1.06rem; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin-bottom: 16px; font-size: .92rem; line-height: 1.45; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--roof); }
.check.is-error { color: var(--roof-2); }
.check.is-error input { outline: 2px solid var(--roof); outline-offset: 2px; }
.nights { font-size: .8rem; font-weight: 700; color: var(--meadow-2); margin: -4px 0 14px; min-height: 1.2em; }

@media (max-width: 720px) {
  /* Dates and counters stay paired - stacked, every step ran a full screen longer */
  /* min-width:0 everywhere, or the date fields' intrinsic width widens the whole column */
  .enquiry__grid, .enquiry__grid > * { min-width: 0; }
  .form__row--pair { grid-template-columns: 1fr 1fr; gap: 10px; }
  .form__row--pair > .field { min-width: 0; }
  .form__row--pair .field input { padding-inline: 10px; min-width: 0; }
  .field { margin-bottom: 13px; }
  .field label { font-size: .78rem; }
  .field input, .field select, .field textarea { font-size: 16px; padding: 13px 14px; }
  .field textarea { min-height: 88px; }

  /* Compact progress: three bars plus one honest line of text */
  .steps { gap: 6px; margin-bottom: 8px; }
  .steps li { gap: 0; font-size: 0; padding-bottom: 0; height: 5px; border-bottom-width: 5px; border-radius: 3px; }
  .steps li::before { display: none; }
  .steps__now { display: block; }

  .counter { grid-template-columns: 46px 1fr 46px; }
  .counter button { height: 48px; font-size: 1.5rem; }
  .pills span { padding: 10px 15px; font-size: .92rem; }
  .summary { padding: 14px 15px; }
  .summary div { gap: 10px; }

  /* The primary action rides with the thumb instead of hiding under the CTA bar */
  .form { padding: 20px 20px 4px; }
  .form__foot {
    position: sticky; bottom: 0; z-index: 4;
    display: grid; grid-template-columns: 1fr; gap: 10px;
    margin: 18px -20px 0; padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255,253,248,0) 0%, var(--white) 22%);
    /* the see-through top of the fade must not swallow taps aimed at the field below it */
    pointer-events: none;
  }
  .form__foot > * { pointer-events: auto; }
  .form__foot--split { grid-template-columns: auto 1fr; }
  .form__foot .btn { justify-content: center; width: 100%; padding-block: 1.05em; }
  .form__foot .btn--outline { padding-inline: 1.2em; }
  .form__foot > span:empty { display: none; }
  .form__note { order: -1; max-width: none; font-size: .78rem; }
  .form__status { margin-bottom: 14px; }
  .demo-note { margin-bottom: 16px; }

  .contact-lines a { font-size: 1.05rem; }
  .enquiry__aside { margin-top: 34px; }
}

/* Reduced motion: the mobile sheet and the chat button appear, they do not travel */
@media (prefers-reduced-motion: reduce) {
  .chat { transition: opacity .15s linear; }
  .chat-scrim { transition: opacity .15s linear; }
  .chat-fab, .chat-fab.is-peek { transition: opacity .15s linear; }
  .chat-fab.is-peek { transform: none; opacity: .6; }
  .house__caption { transition: opacity .2s linear; }
}

/* Touch keeps :hover latched on the element that was tapped - a chip stayed
   highlighted after every answer. Reset the states that show it. */
@media (hover: none) {
  .chat__chips button:hover { background: var(--white); border-color: var(--cream-3); transform: none; }
  .chat__chips button:active { background: var(--arnica); border-color: var(--arnica); }
  .chat__form button:hover { background: var(--roof); transform: none; }
  .chat-fab:hover { transform: none; background: var(--arnica); }
  .chat-fab.is-peek, .chat-fab.is-peek:hover { transform: translateX(58%); opacity: .5; }
  .roomtype:hover { background: transparent; transform: none; }
  .pills span:hover { background: var(--cream); }
  .pills input:checked + span { background: var(--ink); color: var(--cream); border-color: var(--ink); }
}