/* Borágó Vendégház – site.css (design source of truth; reuse as production CSS) */
:root{
  --borago:#3B52AC; --borago-dark:#2B3E88; --borago-tint:#E4E9FA;
  --moha:#3E6B4F; --zsalya:#E3EAE1; --zsalya-line:#C3CEC1;
  --kreta:#F2F3EE; --feher:#FFFFFF; --ko:#DCE0D8;
  --ink:#1D2420; --ink-2:#34403A; --ink-soft:#4A534C;
  --r-sm:12px; --r:18px; --r-lg:24px; --r-xl:28px;
  --f-display:'Bricolage Grotesque',system-ui,sans-serif;
  --f-body:'Figtree',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--kreta);color:var(--ink);font:400 17px/1.65 var(--f-body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--borago)}a:hover{color:var(--borago-dark)}
:focus-visible{outline:3px solid rgba(59,82,172,.4);outline-offset:2px}

.wrap{max-width:1200px;margin-inline:auto;padding-inline:32px}
.sec{padding-block:112px}
.sec-sm{padding-block:56px}
.band{background:var(--feher);border-top:1px solid var(--ko);border-bottom:1px solid var(--ko)}
.tint{background:var(--zsalya)}

/* type */
.h1{margin:0;font:700 64px/1.02 var(--f-display);letter-spacing:-.03em}
.h2{margin:0;font:700 44px/1.08 var(--f-display);letter-spacing:-.02em}
.h3{margin:0;font:700 26px/1.15 var(--f-display);letter-spacing:-.01em}
.h4{margin:0;font:600 18px/1.35 var(--f-body)}
.lead{margin:0;font-size:20px;line-height:1.55;color:var(--ink-soft);max-width:34ch}
.p{margin:0;font-size:18px;line-height:1.65;color:var(--ink-soft);max-width:60ch}
.small{font-size:15px;line-height:1.55;color:var(--ink-soft)}
.label{font:600 15px/1 var(--f-body);color:var(--ink-2)}
.num{font:700 34px/1 var(--f-display);color:var(--borago);letter-spacing:-.02em}
.huge{font:700 120px/.9 var(--f-display);letter-spacing:-.04em;color:var(--borago)}
.stack{display:flex;flex-direction:column;gap:20px}
.stack-sm{display:flex;flex-direction:column;gap:8px}
.row{display:flex;flex-wrap:wrap;gap:12px}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:rgba(242,243,238,.94);border-bottom:1px solid var(--ko)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.logo:hover{color:var(--ink)}
.logo-t{font:700 20px/1 var(--f-display);letter-spacing:-.01em}
.nav{display:flex;align-items:center;gap:26px}
.nav a{color:var(--ink);text-decoration:none;font:500 15px/1 var(--f-body);padding:8px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--borago)}
.nav a.on{border-bottom-color:var(--borago)}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;font:600 15px/1 var(--f-body)}
.mnav summary::-webkit-details-marker{display:none}
.mnav-panel{position:absolute;right:0;top:54px;width:min(86vw,320px);background:var(--feher);border:1px solid var(--ko);border-radius:var(--r);padding:10px;box-shadow:0 16px 40px rgba(29,36,32,.14);display:flex;flex-direction:column}
.mnav-panel a{color:var(--ink);text-decoration:none;font:600 18px/1 var(--f-body);padding:16px 14px;border-radius:12px}
.mnav-panel a:hover,.mnav-panel a.on{background:var(--zsalya)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font:600 16px/1 var(--f-body);text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:background .2s,color .2s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--borago);color:var(--feher)}
.btn-p:hover{background:var(--borago-dark);color:var(--feher)}
.btn-s{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-s:hover{background:var(--ink);color:var(--kreta)}
.btn-sm{min-height:44px;padding:0 20px;font-size:15px}
.btn-w{width:100%}

/* media */
.img{width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.img-lg{border-radius:22px}
.ph{border-radius:var(--r);border:1.5px dashed #8FA396;background:rgba(227,234,225,.6);display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:#4E6356;font-size:15px;line-height:1.45}

/* hero */
.g-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center}
.rating{position:absolute;left:-28px;bottom:-28px;display:flex;align-items:center;gap:14px;background:var(--feher);border-radius:var(--r);padding:16px 20px 16px 16px;box-shadow:0 12px 32px rgba(29,36,32,.12)}
.rating-c{width:56px;height:56px;border-radius:999px;border:3px solid var(--moha);display:flex;align-items:center;justify-content:center;font:700 20px/1 var(--f-display)}

/* page hero (subpages) */
.phero{padding-block:80px 56px}
.crumb{font-size:15px;color:var(--ink-soft);text-decoration:none}

/* grids */
.facts{display:flex;flex-wrap:wrap;gap:12px 48px;padding:28px 0}
.fact{display:flex;flex-direction:column;gap:4px}
.fact b{font:700 28px/1 var(--f-display)}
.fact span{font-size:15px;color:var(--ink-soft)}
.g-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:start}
.g-2-tight{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.g-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.g-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:260px 260px;gap:16px}
.b-big{grid-column:span 4;grid-row:span 2;border-radius:22px;overflow:hidden}
.b-sm{grid-column:span 2;border-radius:22px;overflow:hidden}
.b-blue{background:var(--borago);color:var(--feher);padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.panel{border-radius:var(--r-xl);padding:56px}
.card{background:var(--feher);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:8px}
.card-b{border:1px solid var(--ko)}
.name{font:700 30px/1 var(--f-display)}

/* definition list */
.dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.dl div{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--ko)}
.dl dt{color:var(--ink-soft)}
.dl dd{margin:0;font-weight:600;text-align:right}

/* steps */
.step{display:flex;gap:18px;align-items:flex-start}
.step-n{flex:none;width:40px;height:40px;border-radius:999px;background:var(--borago);color:var(--feher);display:flex;align-items:center;justify-content:center;font-weight:700}

/* price list */
.price{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:22px 0}
.price + .price{border-top:1px solid var(--ko)}
.price b{font:700 26px/1 var(--f-display)}
.check{display:flex;gap:12px;align-items:flex-start}
.check svg{flex:none;margin-top:4px;color:var(--moha)}

/* gallery filter (CSS only) */
.gf input{position:absolute;opacity:0;pointer-events:none}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.pills label{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--zsalya-line);font:600 15px/1 var(--f-body);color:var(--ink)}
#g-all:checked ~ .pills label[for=g-all],#g-haz:checked ~ .pills label[for=g-haz],#g-kert:checked ~ .pills label[for=g-kert],#g-korny:checked ~ .pills label[for=g-korny]{background:var(--ink);color:var(--kreta);box-shadow:none}
#g-haz:checked ~ .ggrid .gi:not(.haz),#g-kert:checked ~ .ggrid .gi:not(.kert),#g-korny:checked ~ .ggrid .gi:not(.korny){display:none}
.ggrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;gap:12px}
.gi{margin:0;border-radius:var(--r);overflow:hidden}
.gi.w2{grid-column:span 2}.gi.h2{grid-row:span 2}

/* forms */
.form{background:var(--feher);border-radius:var(--r-lg);padding:36px;display:flex;flex-direction:column;gap:18px}
.fld label{font:600 14px/1.3 var(--f-body);color:var(--ink);display:block;margin-bottom:6px}
.fld input,.fld select,.fld textarea{font:400 16px/1.4 var(--f-body);color:var(--ink);background:var(--feher);border:1.5px solid #8E968C;border-radius:var(--r-sm);padding:13px 14px;width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:3px solid rgba(59,82,172,.35);border-color:var(--borago)}
.help{font-size:14px;color:var(--ink-soft);margin-top:6px}
.ok{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5}
.ok input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--borago)}

/* prose (privacy) */
.prose{max-width:68ch}
.prose h2{font:700 26px/1.2 var(--f-display);margin:48px 0 12px}
.prose p,.prose li{font-size:17px;line-height:1.7;color:var(--ink-2)}

/* footer */
.ftr{background:var(--ink);color:#C9D0CA;padding:72px 0 120px}
.ftr a{color:var(--feher);text-decoration:none}.ftr a:hover{text-decoration:underline}
.ftr-g{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.ftr-t{font:700 22px/1.2 var(--f-display);color:var(--feher)}
.ftr-l{display:flex;flex-direction:column;gap:10px;font-size:15px}
.ftr-b{margin-top:56px;padding-top:24px;border-top:1px solid #36403A;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px}

/* mobile action bar */
.mbar{display:none}


/* ================= v2: editorial layout ================= */
:root{--moha-deep:#21362A;--ease:cubic-bezier(.16,1,.3,1)}
::selection{background:var(--borago);color:#fff}
.logo svg{transition:transform 1.4s var(--ease)}
.logo:hover svg{transform:rotate(72deg)}

.d1{margin:0;font:700 clamp(44px,5.6vw,84px)/.95 var(--f-display);letter-spacing:-.045em}
.d2{margin:0;font:700 clamp(34px,4.6vw,66px)/1 var(--f-display);letter-spacing:-.035em}
.statement{margin:0;font:600 clamp(26px,3.2vw,44px)/1.2 var(--f-display);letter-spacing:-.02em;max-width:30ch}
.statement .mute{color:#8F998F}
.kicker{display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--f-body);color:var(--ink-2)}

/* load-in motion */
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:block;animation:lineUp 1.2s var(--ease) both;animation-delay:var(--d,0s)}
.fade-in{animation:fadeUp 1.1s var(--ease) both;animation-delay:var(--d,0s)}
.phero>*>*,.phero>*>*>*{animation:fadeUp 1.1s var(--ease) both}
.phero>*>*:nth-child(2),.phero>*>*>*:nth-child(2){animation-delay:.08s}
.phero>*>*:nth-child(3),.phero>*>*>*:nth-child(3){animation-delay:.16s}
.phero>*>*:nth-child(4),.phero>*>*>*:nth-child(4){animation-delay:.24s}
@keyframes lineUp{from{transform:translateY(108%)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes heroIn{from{clip-path:inset(14% 0 0 0 round 28px)}to{clip-path:inset(0 0 0 0 round 28px)}}
@keyframes kenburns{from{transform:scale(1.16)}to{transform:scale(1)}}

/* frames */
.frame{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--zsalya);margin:0}
.frame>img{width:100%;height:100%;object-fit:cover;display:block}
.zoom>img{transition:transform 1.6s var(--ease)}
.zoom:hover>img{transform:scale(1.045)}
.cap{display:block;margin-top:12px;font-size:14px;line-height:1.4;color:var(--ink-soft)}

/* home hero */
.hero{padding-block:40px 120px}
.hero-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center}
.hero-media{position:relative;padding-left:80px}
.hero-big{aspect-ratio:4/5;animation:heroIn 1.7s var(--ease) both}
.hero-big>img{animation:kenburns 2.6s var(--ease) both}
.hero-small{position:absolute;left:0;bottom:-56px;width:40%;aspect-ratio:3/4;border:8px solid var(--kreta);border-radius:26px;animation:fadeUp 1.3s var(--ease) .55s both}
.chip{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border-radius:999px;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:14px;line-height:1.3;animation:fadeUp 1s var(--ease) 1s both}
.chip b{flex:none;width:44px;height:44px;border-radius:999px;background:var(--borago);color:#fff;display:flex;align-items:center;justify-content:center;font:700 17px/1 var(--f-display)}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:44px;padding-top:22px;border-top:1px solid var(--ko);font-size:15px;color:var(--ink-soft)}
.hero-meta b{font-weight:600;color:var(--ink)}

/* links and buttons */
.go{display:inline-flex;align-items:center;gap:10px;font:600 16px/1 var(--f-body);color:var(--ink);text-decoration:none;padding-bottom:7px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;transition:background-size .6s var(--ease),color .2s}
.go:hover{color:var(--borago);background-size:0 1.5px;background-position:100% 100%}
.go svg,.btn svg{flex:none;transition:transform .5s var(--ease)}
.go:hover svg,.btn:hover svg{transform:translateX(4px)}
.btn-l{background:#fff;color:var(--ink)}
.btn-l:hover{background:var(--borago-tint);color:var(--ink)}
.btn-o{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.btn-o:hover{background:#fff;color:var(--borago)}

/* story: sticky text + staggered photos */
.story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:88px;align-items:start}
.sticky{position:sticky;top:120px}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pair>.col{display:flex;flex-direction:column;gap:28px}
.pair>.col:nth-child(2){padding-top:150px}

/* dark garden */
.dark{background:var(--moha-deep);color:#E6EBE4}
.dark .p,.dark .small{color:#B7C3B8}
.dark .kicker{color:#B7C3B8}
.dark .go{color:#fff}
.dark .go:hover{color:#C9D3FF}
.garden-g{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:72px;align-items:center}
.res{border-top:1px solid rgba(255,255,255,.16);margin-top:22px}
.res-r{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:28px;align-items:baseline;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.16);transition:padding-left .7s var(--ease)}
.res-r:hover{padding-left:14px}
.res-n{font:700 clamp(30px,3.2vw,44px)/1 var(--f-display);letter-spacing:-.03em;color:#fff}

/* seasons scroller */
.hs{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,26vw,370px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(20px,calc((100% - 1136px)/2));padding:6px max(20px,calc((100% - 1136px)/2)) 28px;scrollbar-width:thin;scrollbar-color:var(--zsalya-line) transparent;overscroll-behavior-x:contain}
.hs>figure{margin:0;scroll-snap-align:start}
.hs figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px;font-size:15px;color:var(--ink-soft)}
.hs figcaption b{font:700 22px/1 var(--f-display);color:var(--ink);letter-spacing:-.01em}

/* direct-booking offer */
.blue{background:var(--borago);color:#fff}
.offer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:64px;align-items:center}
.pct{font:700 clamp(110px,15vw,220px)/.8 var(--f-display);letter-spacing:-.06em;color:var(--borago-tint)}

/* distance rows */
.near{border-top:1px solid var(--ko)}
.near-r{display:grid;grid-template-columns:180px minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--ko);transition:padding-left .7s var(--ease)}
.near-r:hover{padding-left:12px}
.near-r .n{font:700 44px/1 var(--f-display);letter-spacing:-.035em;color:var(--borago)}
.near-r .h4{font-size:20px}

/* booking steps */
.steps{border-top:1px solid var(--zsalya-line)}
.st{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:24px 0;border-bottom:1px solid var(--zsalya-line)}
.st i{font:700 20px/1.3 var(--f-display);font-style:normal;color:var(--borago)}

/* footer wordmark */
.ftr-mark{margin:72px 0 -18px;font:700 clamp(84px,17vw,250px)/.8 var(--f-display);letter-spacing:-.06em;color:#2B3530;white-space:nowrap;overflow:hidden;user-select:none}

/* ============ scroll-driven motion (progressive) ============ */
@keyframes unveil{from{clip-path:inset(14% 5% 0 5% round 28px)}to{clip-path:inset(0 0 0 0 round 28px)}}
@keyframes settle{from{transform:scale(1.18)}to{transform:scale(1)}}
@keyframes drift{from{transform:translateY(-6%) scale(1.14)}to{transform:translateY(6%) scale(1.14)}}
@keyframes cardIn{from{opacity:.35;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scale(.72);opacity:0}to{transform:none;opacity:1}}
@keyframes hdrOn{to{background:rgba(242,243,238,.8);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 12px 32px rgba(29,36,32,.07)}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rv{animation:fadeUp linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .rv.s2{animation-range:entry 10% entry 80%}
    .rv.s3{animation-range:entry 20% entry 90%}
    .uv{animation:unveil linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    .uv>img{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
    .px>img{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .hs>figure{animation:cardIn linear both;animation-timeline:view(inline);animation-range:entry 0% entry 90%}
    .grow{animation:grow linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
    .hdr{animation:hdrOn linear both;animation-timeline:scroll(root);animation-range:0 180px}
  }
}
/* fallback for browsers without scroll timelines: JS adds .io on <html> and .in on elements */
.io .rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.io .uv{clip-path:inset(14% 5% 0 5% round 28px);transition:clip-path 1.4s var(--ease)}
.io .uv>img{transform:scale(1.16);transition:transform 1.8s var(--ease)}
.io .grow{opacity:0;transform:scale(.8);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.io .in.rv,.io .in.grow{opacity:1;transform:none}
.io .in.uv{clip-path:inset(0 0 0 0 round 28px)}
.io .in.uv>img{transform:none}


/* ============ states: form errors, success, cookie banner, lightbox, 404 ============ */
.fld.err input,.fld.err select,.fld.err textarea{border-color:#A23B2A;border-width:2px}
.err-msg{display:flex;gap:6px;align-items:flex-start;margin-top:6px;font-size:14px;line-height:1.4;color:#A23B2A;font-weight:500}
.form-alert{border-radius:var(--r-sm);padding:14px 16px;font-size:15px;line-height:1.5;background:#F7E4E0;color:#6E2318}
.sent{background:var(--feher);border-radius:var(--r-lg);padding:44px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.sent-ic{width:56px;height:56px;border-radius:999px;background:var(--moha);display:flex;align-items:center;justify-content:center}
.cookie{position:fixed;left:24px;bottom:24px;z-index:40;width:min(420px,calc(100% - 32px));background:var(--feher);border:1px solid var(--ko);border-radius:var(--r-xl);padding:24px;box-shadow:0 20px 50px rgba(29,36,32,.14);display:flex;flex-direction:column;gap:14px;animation:fadeUp .8s var(--ease) .6s both}
.cookie .row .btn{flex:1}
.lb{position:fixed;inset:0;z-index:50;background:rgba(33,54,42,.96);display:grid;grid-template-columns:72px minmax(0,1fr) 72px;grid-template-rows:72px minmax(0,1fr) auto;align-items:center;justify-items:center;color:#E6EBE4}
.lb img{grid-column:2;grid-row:2;max-height:100%;max-width:100%;border-radius:var(--r);animation:lbIn .6s var(--ease) both}
.lb-b{width:52px;height:52px;border-radius:999px;border:0;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.lb-b:hover{background:rgba(255,255,255,.24)}
.lb-x{grid-column:3;grid-row:1}.lb-p{grid-column:1;grid-row:2}.lb-n{grid-column:3;grid-row:2}
.lb-c{grid-column:2;grid-row:3;padding:18px 0 24px;font-size:15px;text-align:center}
@keyframes lbIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
body.lb-open{overflow:hidden}

@media (max-width:1000px){
  .nav{display:none}.mnav{display:block}
  .hdr-call{display:none}
}
@media (max-width:900px){
  .wrap{padding-inline:20px}
  .sec{padding-block:72px}
  .phero{padding-block:48px 40px}
  .h1{font-size:44px}.h2{font-size:34px}.huge{font-size:88px}
  .g-hero,.g-2,.g-split{grid-template-columns:minmax(0,1fr);gap:32px}
  .rating{left:12px;bottom:-24px}
  .bento{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
  .b-big,.b-sm{grid-column:auto;grid-row:auto;min-height:240px}
  .g-4,.ggrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ggrid{grid-auto-rows:180px}
  .gi.w2{grid-column:span 2}
  .dl{grid-template-columns:minmax(0,1fr)}
  .panel{padding:28px 20px}
  .form{padding:24px}
  .ftr-g{grid-template-columns:minmax(0,1fr)}
  .hero{padding-block:20px 72px}
  .hero-g,.story,.garden-g,.offer{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero-media{padding-left:0;padding-right:56px;order:-1;margin-bottom:36px}
  .chip{left:12px;right:auto;top:12px}
  .hero-small{left:auto;right:0;bottom:-40px;width:42%}
  .sticky{position:static}
  .pair>.col:nth-child(2){padding-top:64px}
  .pair{gap:14px}.pair>.col{gap:18px}
  .res-r{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px 0}
  .near-r{grid-template-columns:110px minmax(0,1fr);gap:6px 16px;padding:20px 0}
  .near-r .n{font-size:32px}
  .near-r .small{grid-column:2}
  .hs{grid-auto-columns:76%}
  .st{grid-template-columns:52px minmax(0,1fr)}
  .cookie{left:16px;bottom:88px}
  .lb{grid-template-columns:0 minmax(0,1fr) 0}
  .lb-p,.lb-n{display:none}
  .lb-x{grid-column:2;justify-self:end;margin-right:12px}
  .mbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(242,243,238,.97);border-top:1px solid var(--ko)}
}
@media (max-width:520px){
  .g-4,.g-2-tight{grid-template-columns:minmax(0,1fr)}
  .h1{font-size:38px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}


/* ===== production additions (phase 2). Everything above this line is the unchanged prototype CSS. ===== */
.skip{position:absolute;left:12px;top:-64px;z-index:100;background:var(--ink);color:#fff;padding:14px 20px;border-radius:999px;font:600 15px/1 var(--f-body);text-decoration:none;transition:top .2s}
.skip:focus{top:12px;color:#fff}
a.chip{color:inherit;text-decoration:none}
.fld input,.fld select,.fld textarea{caret-color:var(--borago)}

/* gallery: every tile is a real link (works without JS, JS upgrades it to the lightbox) */
.gi>a{display:block;height:100%}
.zoom>a>img{transition:transform 1.6s var(--ease)}
.zoom:hover>a>img{transform:scale(1.045)}
#g-all:focus-visible ~ .pills label[for=g-all],#g-haz:focus-visible ~ .pills label[for=g-haz],#g-kert:focus-visible ~ .pills label[for=g-kert],#g-korny:focus-visible ~ .pills label[for=g-korny]{outline:3px solid rgba(59,82,172,.4);outline-offset:2px}

/* lightbox details the prototype board does not show */
.lb{touch-action:pan-y pinch-zoom}
.lb-b:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* click-to-load map (consent friendly) */
.map-box{min-height:380px;border-radius:var(--r-xl);background:var(--zsalya);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;padding:32px}
.map-box.loaded{display:block;padding:0;min-height:0;background:none}
.map-box iframe{display:block;width:100%;height:380px;border:0;border-radius:var(--r-xl)}

/* 404 card */
@media (max-width:900px){
  .nf{grid-template-columns:minmax(0,1fr)!important;padding:28px!important;gap:28px!important}
  .nf .frame{max-width:280px}
}

/* accessibility fixes to the prototype (SPEC §11 outranks the prototype): the muted statement text
   was 2.64:1 on the page background, large text needs 3:1 */
.statement .mute{color:#7E877E}
/* the oversized footer wordmark is decoration: drawn as generated content so it is not read as text */
.ftr-mark::before{content:attr(data-text)}

/* Photos are wrapped in <picture> (WebP + JPEG), so the prototype's `.frame>img` selectors need the
   same rules one level deeper. `display:contents` keeps the <picture> out of the layout. */
picture{display:contents}
.frame>picture>img{width:100%;height:100%;object-fit:cover;display:block}
.zoom>picture>img,.zoom>a>picture>img{transition:transform 1.6s var(--ease)}
.zoom:hover>picture>img,.zoom:hover>a>picture>img{transform:scale(1.045)}
.hero-big>picture>img{animation:kenburns 2.6s var(--ease) both}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .uv>picture>img{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
    .px>picture>img{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
.io .uv>picture>img{transform:scale(1.16);transition:transform 1.8s var(--ease)}
.io .in.uv>picture>img{transform:none}

/* enquiry form: honeypot field (kept in the layout, away from the screen, so simple bots still fill it) and inline errors */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.err-msg svg{flex:none}
[data-field] .err-msg span{min-width:0}
.btn[disabled]{opacity:.7;cursor:progress}

/* cookie banner: the prototype CSS sets display:flex, which would override the hidden attribute */
.cookie[hidden]{display:none}
/* the footer "Süti-beállítások" control is a button that looks like the footer links */
.ftr-btn{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--feher);cursor:pointer;min-height:24px}
.ftr-btn:hover{text-decoration:underline}

/* the banner's two buttons are equal in width (design); the longer label wraps instead of widening its button */
.cookie .row .btn{flex:1 1 0;min-width:0;white-space:normal;text-align:center;line-height:1.2;padding-block:8px}

/* Owner videos on the gallery page (uploaded in the admin). */
.vids{margin-top:72px;display:flex;flex-direction:column;gap:28px}
@media (max-width:900px){
  .vids{margin-top:56px}
}

/* ============ wide screens, smoothness (production additions; nothing below 1440 px changes) ============ */
/* The page width grows with the screen from 1440 px up (1200 px at 1440, about 1580 px at 1920, 1840 px at most),
   so a wide monitor does not end up with huge empty margins. */
:root{--wrap-w:clamp(1200px,calc(1200px + (100vw - 1440px) * .8),1840px);--wrap-in:calc(var(--wrap-w) - 64px)}
.wrap{max-width:var(--wrap-w)}
.hs{scroll-padding-inline:max(20px,calc((100% - var(--wrap-in)) / 2));padding-inline:max(20px,calc((100% - var(--wrap-in)) / 2))}
html{scroll-padding-top:96px}
h1,h2,h3,.d1,.d2,.statement{text-wrap:balance}
.lead,.p,.small{text-wrap:pretty}

@media (min-width:1600px){
  body{font-size:18px}
  .lead{font-size:22px}
  .p{font-size:19px}
  .small{font-size:16px}
  .hdr-in{height:80px}
  .logo-t{font-size:22px}
  .nav{gap:34px}
  .nav a{font-size:16px}
  .btn{min-height:56px;padding:0 30px;font-size:17px}
  .btn-sm{min-height:44px;padding:0 22px;font-size:15px}
  .go{font-size:17px}
  .kicker{font-size:15px}
  .sec{padding-block:clamp(112px,7vw,156px)}
  .phero{padding-block:clamp(80px,5vw,112px) 56px}
  .d1{font-size:clamp(84px,5.4vw,128px)}
  .d2{font-size:clamp(66px,3.7vw,96px)}
  .statement{font-size:clamp(44px,2.5vw,60px)}
  .pct{font-size:clamp(220px,13vw,300px)}
  .res-n{font-size:clamp(44px,2.4vw,56px)}
  .near-r .n{font-size:clamp(44px,2.8vw,58px)}
  .near-r .h4{font-size:21px}
  .hero-g{gap:clamp(64px,5vw,110px)}
  .hero-meta{font-size:16px}
  .hs{grid-auto-columns:clamp(260px,22vw,480px)}
  .ggrid{grid-auto-rows:clamp(220px,14vw,300px)}
  .ftr-mark{font-size:clamp(84px,17vw,340px)}
}
/* ---- first screen: the hero fits the window exactly (home and A ház), on every screen size ----
   desktop: the photo is as tall as the window minus the header; phone: the text keeps its size, the photo takes what is left. */
:root{--hdr-h:73px;--mbar-h:0px;--hero-pad:clamp(20px,4vh,48px);--d1:clamp(44px,5.6vw,84px)}
@supports (height:1svh){:root{--hero-pad:clamp(20px,4svh,48px)}}
@media (min-width:1600px){:root{--hdr-h:81px;--d1:clamp(84px,5.4vw,128px)}}
@media (max-width:900px){:root{--mbar-h:calc(77px + env(safe-area-inset-bottom,0px))}}
@media (min-width:901px){
  .hero,.phero-fit{display:flex;align-items:center;padding-block:var(--hero-pad);min-height:calc(100vh - var(--hdr-h));min-height:calc(100svh - var(--hdr-h))}
  .hero-g,.phero-fit>.g-hero{width:100%}
  /* the title shrinks on low windows so the text never needs more than one screen */
  .hero .d1,.phero-fit .d1{font-size:min(var(--d1),max(44px,calc((100vh - 470px) / 2.85)));font-size:min(var(--d1),max(44px,calc((100svh - 470px) / 2.85)))}
  .hero-media{padding-bottom:56px}
  .hero-small{bottom:0}
  .hero-big{aspect-ratio:auto;height:max(360px,calc(100vh - var(--hdr-h) - 2 * var(--hero-pad) - 56px));height:max(360px,calc(100svh - var(--hdr-h) - 2 * var(--hero-pad) - 56px))}
  .phero-fit .hero-big{height:max(360px,calc(100vh - var(--hdr-h) - 2 * var(--hero-pad)));height:max(360px,calc(100svh - var(--hdr-h) - 2 * var(--hero-pad)))}
  .phero-fit + .band{margin-top:0!important}
}
@media (min-width:2000px){
  .hero-small{width:36%}
}
@media (max-width:900px){
  .hero,.phero-fit{display:flex;padding-block:16px 20px;min-height:calc(100vh - var(--hdr-h) - var(--mbar-h));min-height:calc(100svh - var(--hdr-h) - var(--mbar-h))}
  .hero-g,.phero-fit>.g-hero{flex:1;display:flex;flex-direction:column;align-items:stretch!important;gap:20px;min-width:0;width:100%}
  .hero-media{flex:1 1 auto;display:flex;flex-direction:column;margin-bottom:40px}
  .hero-big,.phero-fit .hero-big{flex:1 1 auto;height:auto;aspect-ratio:auto!important;min-height:150px}
  /* the photo fills the box the layout gives it, it never decides the height itself */
  .hero-big>picture>img,.hero-big>img{position:absolute;inset:0}
  .hero .lead{font-size:18px;margin-top:18px!important}
  .hero .row.fade-in{margin-top:20px!important}
  .hero-meta{margin-top:20px;padding-top:14px;gap:4px 18px;font-size:14px}
  .phero-fit + .band{margin-top:0!important}
}
@media (max-width:900px) and (max-height:760px){
  .hero-meta{display:none}
}
@media (max-width:520px){
  /* narrow phones: the two buttons stay in one row and the text is a little tighter, so the photo keeps its room */
  .hero .btn{min-height:46px;padding:0 18px;font-size:15px}
  .hero .lead{font-size:16px}
  .hero .row.fade-in{gap:10px}
  .phero-fit .lead{font-size:16px}
  .phero-fit .stack{gap:14px!important}
}

/* smooth movement: eased scrolling, a soft cross-fade between pages (browsers without support just navigate) */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @view-transition{navigation:auto}
  .hdr{view-transition-name:hdr}
  ::view-transition-group(hdr){animation-duration:0s}
  .btn,.pills label,.mnav summary,.card{transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
  .btn:hover{transform:translateY(-1px)}
  .btn:active{transform:translateY(1px)}
}

/* ============ credit band, first-visit loading screen, page transitions ============ */
.ftr{padding-bottom:72px}
.credit{background:var(--kreta);border-top:1px solid var(--ko);font-size:14px;line-height:1.4;color:var(--ink-soft)}
.credit-in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 28px;padding-block:16px}
.credit b{color:var(--ink);font-weight:600}
.credit a{color:var(--ink);text-decoration:none;padding-bottom:2px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease),color .2s}
.credit a:hover{color:var(--borago);background-size:0 1px;background-position:100% 100%}
@media (max-width:900px){
  .ftr{padding-bottom:120px}
  .credit{padding-bottom:var(--mbar-h)}
  .credit-in{flex-direction:column;gap:6px}
}

/* a short curtain on the first page of a visit (the class "sp" is set before the first paint, once per browser session);
   the page's own entrance animations wait for it to lift. Never with reduced motion, never without JS. */
.splash{display:none}
@media (prefers-reduced-motion:no-preference){
  .sp .splash{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:var(--moha-deep);color:#fff;pointer-events:none;animation:splashOut .8s var(--ease) .85s both}
  .splash-in{display:flex;flex-direction:column;align-items:center;gap:18px;font:700 clamp(22px,3vw,30px)/1 var(--f-display);letter-spacing:-.02em;animation:splashIn .7s var(--ease) both}
  .splash-in svg{animation:splashSpin 1.5s var(--ease) both}
  .sp .ln>span,.sp .fade-in{animation-delay:calc(var(--d,0s) + .95s)}
  .sp .hero-big,.sp .hero-big>picture>img{animation-delay:.95s}
  .sp .hero-small{animation-delay:1.5s}
  .sp .chip{animation-delay:1.95s}
  .sp .phero>*>*,.sp .phero>*>*>*{animation-delay:.95s}
}
@keyframes splashIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes splashSpin{from{transform:rotate(-72deg) scale(.7)}to{transform:none}}
@keyframes splashOut{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtOut .3s var(--ease) both}
  ::view-transition-new(root){animation:vtIn .5s var(--ease) both}
}
@keyframes vtOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(18px)}}

/* ============ phones and touch screens ============ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,input,select,textarea,label,summary{touch-action:manipulation;-webkit-tap-highlight-color:rgba(59,82,172,.14)}
@media (max-width:900px){
  /* safe areas (notch, rounded corners, landscape) */
  .wrap{padding-inline:max(20px,env(safe-area-inset-left),env(safe-area-inset-right))}
  .hdr{padding-top:env(safe-area-inset-top)}
  /* the rating badge stays small, so the photo is still a photo */
  .chip{padding:6px 14px 6px 6px;gap:8px;font-size:12px;line-height:1.25;max-width:calc(100% - 150px)}
  .chip b{width:34px;height:34px;font-size:14px}
  /* calmer rhythm between sections: the long desktop gaps are too airy on a phone */
  [style*="padding-block: 128px"]{padding-block:80px!important}
  [style*="padding-block: 120px"]{padding-block:76px!important}
  [style*="padding-block: 128px 96px"]{padding-block:80px 64px!important}
  [style*="padding-block: 64px 120px"]{padding-block:40px 72px!important}
  [style*="padding-bottom: 140px"],[style*="padding-bottom: 128px"]{padding-bottom:84px!important}
  [style*="padding-bottom: 112px"]{padding-bottom:72px!important}
  [style*="padding-bottom: 96px"]{padding-bottom:64px!important}
  [style*="padding: 44px"],[style*="padding: 48px"],[style*="padding: 56px"]{padding:28px 22px!important}
  /* tap targets of at least 44 px in the footer and in lists of links */
  .ftr-l{gap:0}
  .ftr-l a,.ftr-l span{display:block;padding-block:11px}
  .ftr-b .row{gap:0 22px}
  .ftr-b a,.ftr-btn{display:inline-flex;align-items:center;min-height:44px}
  .mnav-panel a{min-height:52px;display:flex;align-items:center}
  .crumb{display:inline-flex;align-items:center;min-height:44px}
  .go{min-height:44px}
  /* the bar at the bottom blurs what scrolls under it */
  .mbar{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:rgba(242,243,238,.9)}
  /* forms: comfortable fields, no zoom on focus (16 px), the inputs show the right keyboard from the markup */
  .fld input,.fld select,.fld textarea{min-height:52px;font-size:16px}
  .fld textarea{min-height:132px}
}
/* hover effects are for mice: on a touch screen they would stay "stuck" after a tap */
@media (hover:none){
  .zoom:hover>img,.zoom:hover>picture>img,.zoom:hover>a>picture>img,.zoom:hover>a>img{transform:none}
  .res-r:hover,.near-r:hover{padding-left:0}
  .btn:hover{transform:none}
  .go:hover{background-size:100% 1.5px;background-position:0 100%}
  .go:hover svg,.btn:hover svg{transform:none}
}

/* the big footer word: the descender of the "g" must not be cut off by the box (line-height .8 clips it) */
.ftr-mark{padding-bottom:.22em;margin-bottom:calc(-18px - .22em)}

/* legal pages: the cookie table */
.ctable{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.ctable th,.ctable td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--ko)}
.ctable thead th{font:600 13px var(--f-body);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
.ctable code{font:600 14px var(--f-body);background:var(--zsalya);border-radius:6px;padding:2px 6px;white-space:nowrap}

/* cookie banner: the settings panel (one switch per category the site really uses) */
.cookie-set summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:600 14px var(--f-body);color:var(--borago)}
.cookie-opts{display:flex;flex-direction:column;gap:12px;padding:4px 0 8px}
.cookie-opts .ok span{font-size:14px;line-height:1.4}
.cookie-opts .btn{align-self:flex-start}

/* videos: an even grid, every player exactly the same size, so the captions line up. Three columns on a computer, two on a phone.
   A landscape video takes two columns at the same height. Phone videos fill their box (a little is cropped at the edges),
   landscape ones are shown whole. The height is worked out from the grid's own width, so it is the same for every video. */
.vgrid{container-type:inline-size;--g:24px;--cols:3;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:28px var(--g);width:100%;max-width:1040px;margin-inline:auto;align-items:start}
.vid{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.vid.wide{grid-column:span 2}
.vid video{display:block;width:100%;height:min(calc((100cqw - (var(--cols) - 1) * var(--g)) / var(--cols) * 16 / 9),85vh);background:#101512;border-radius:var(--r);object-fit:cover}
.vid.wide video{object-fit:contain}
.vid figcaption{text-align:center;max-width:36ch;margin-inline:auto;text-wrap:balance}
@media (max-width:700px){
  .vgrid{--cols:2;--g:12px;gap:22px var(--g)}
}

/* the gallery grid fills the holes the wide tiles leave */
.ggrid{grid-auto-flow:dense}
/* seen on arrival: already on screen when the page opened, so no scroll fade (set by site.js) */
.rv.seen{animation:none}
/* the season cards that slide in from the right edge stay readable while they arrive (contrast), a little less faint than the prototype's .35 */
@keyframes cardIn2{from{opacity:.65;transform:scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .hs>figure{animation-name:cardIn2}
  }
}