/* ===== extras: new sections & upgrades (guide, audiences, tour, blog, UGC, compare, price calendar, guarantee) ===== */

/* skip link */
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}

/* scroll progress */
.sprog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;background:var(--brass);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* line illustrations */
.ill{width:100%;height:auto;display:block;color:var(--pine);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ill .b{stroke:var(--brass)}
.ill .f{fill:var(--brass-soft);stroke:none}

/* ---------- audiences (business / students' parents) ---------- */
.aud{background:var(--surface)}
.aud-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--paper-2);margin-bottom:clamp(28px,4vw,44px)}
.aud-tabs button{border:0;background:none;padding:10px 20px;border-radius:999px;font-weight:600;font-size:15px;cursor:pointer;color:var(--muted);transition:background .25s,color .25s}
.aud-tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 4px 14px -6px rgba(0,0,0,.2)}
.aud-p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.aud-p[hidden]{display:none}
.aud-ph{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3.4}
.aud-ph img{width:100%;height:115%;object-fit:cover}
.aud-ph .badge{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-radius:14px;padding:12px 16px;display:grid;gap:2px;max-width:70%}
.aud-ph .badge b{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.1}
.aud-ph .badge small{color:var(--muted);font-size:13px}
.aud-tx{display:grid;gap:22px;align-content:start}
.aud-tx h3{font-size:clamp(26px,2.6vw,34px)}
.aud-tx>p{margin:0;color:var(--muted);font-size:17px;max-width:52ch}
.aud-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;margin:0;padding:0;list-style:none}
.aud-list li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start}
.aud-list .em{width:40px;height:40px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;color:var(--pine)}
.aud-list .em .ico{width:19px;height:19px}
.aud-list b{display:block;font-size:15px}
.aud-list small{color:var(--muted);font-size:13.5px;line-height:1.45;display:block}
.aud-act{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
@media (max-width:860px){.aud-p{grid-template-columns:1fr}.aud-list{grid-template-columns:1fr}}

/* ---------- video tour ---------- */
.tour{background:var(--night);color:var(--on-night)}
.tour .sec-head h2{color:#fff}
.tour .lead{color:var(--on-night-mute)}
.tour-box{position:relative;display:block;width:100%;border:0;padding:0;cursor:pointer;border-radius:24px;overflow:hidden;aspect-ratio:16/8;background:#000;isolation:isolate;color:#fff;text-align:left}
.tour-box img{position:absolute;inset:0;width:100%;height:115%;object-fit:cover;z-index:-2;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.tour-box:hover img{transform:scale(1.04)}
.tour-box::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55))}
.tour-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.tour-play::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(255,255,255,.35);animation:tourRing 2.4s ease-out infinite}
.tour-play i{width:0;height:0;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
@keyframes tourRing{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.35);opacity:0}}
.tour-cap{position:absolute;left:clamp(18px,3vw,32px);bottom:clamp(16px,3vw,28px);right:20px;display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.tour-cap b{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.2vw,28px)}
.tour-cap span{font-size:13px;background:rgba(0,0,0,.4);padding:6px 12px;border-radius:999px}
.tour-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.tour-chips span{font-size:13px;border:1px solid rgba(255,255,255,.18);padding:6px 14px;border-radius:999px;color:var(--on-night-mute)}
.tv{position:fixed;inset:0;z-index:90;background:rgba(8,9,8,.94);display:grid;place-items:center;padding:16px}
.tv[hidden]{display:none}
.tv-in{position:relative;width:min(1100px,100%);aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000}
.tv-in video{width:100%;height:100%;object-fit:cover;display:block}
.tv-in .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s}
.tv-in .slide.on{opacity:1}
.tv-in .slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.tv-in .slide.on img{animation:tvKen 5s linear forwards}
@keyframes tvKen{from{transform:scale(1.04) translateX(0)}to{transform:scale(1.14) translateX(-2%)}}
.tv-cap{position:absolute;left:24px;bottom:22px;color:#fff;font-family:var(--display);font-size:clamp(20px,2.4vw,30px);text-shadow:0 2px 20px rgba(0,0,0,.6)}
.tv-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.2)}
.tv-bar i{display:block;height:100%;background:var(--brass);width:0}
.tv-x{position:absolute;right:20px;top:20px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:grid;place-items:center;z-index:2}
.tv-note{position:absolute;right:20px;bottom:20px;font-size:12px;color:rgba(255,255,255,.75);background:rgba(0,0,0,.45);padding:5px 10px;border-radius:999px}
@media (max-width:640px){.tour-box{aspect-ratio:4/3.6}.tour-play{width:72px;height:72px}}

/* ---------- guide ---------- */
.guide{background:var(--paper)}
.guide-art{display:block;width:min(100%,420px);height:auto;margin:0 0 30px}
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.gcard:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(27,28,26,.45)}
.gcard .art{background:linear-gradient(180deg,#f3efe6,#fbfaf7);padding:22px 26px 6px;border-bottom:1px solid var(--line)}
.gcard .art .ill{max-height:130px}
.gcard .bd{padding:20px 22px 22px;display:grid;gap:10px;flex:1;align-content:start}
.gcard .meta{display:flex;gap:8px;flex-wrap:wrap}
.gcard .meta span{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--paper-2);display:inline-flex;gap:5px;align-items:center}
.gcard .meta .ico{width:14px;height:14px;color:var(--brass)}
.gcard h3{font-size:22px}
.gcard p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.gcard .tip{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--ink);display:flex;gap:8px}
.gcard .tip .ico{width:16px;height:16px;color:var(--brass);margin-top:2px}
@media (max-width:980px){.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.guide-grid{grid-template-columns:1fr}}

/* partners */
.partners{position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(40px,6vw,64px);background:var(--night);color:var(--on-night);border-radius:26px;padding:clamp(28px,4vw,52px)}
.partners::before{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-160px;top:-260px;border-radius:50%;background:radial-gradient(closest-side,rgba(228,196,140,.22),transparent)}
.partners::after{content:"";position:absolute;z-index:-1;width:420px;height:420px;left:-180px;bottom:-240px;border-radius:50%;background:radial-gradient(closest-side,rgba(228,196,140,.12),transparent)}
.partners-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,36px)}
.partners-h h3{font-size:clamp(26px,2.6vw,36px);line-height:1.15;color:#fff}
.partners-h .demo-tag{background:#e4c48c;color:#1a140a;margin-left:8px}
.partners-h p{margin:0;color:#d6d8d1;font-size:15px;max-width:34ch;padding-left:16px;border-left:2px solid #e4c48c}
.pt-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.pt{position:relative;border-radius:18px;background:linear-gradient(165deg,#2f302b,#22231f);border:1px solid rgba(228,196,140,.45);box-shadow:0 14px 30px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);padding:20px 18px 18px;display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,background .35s}
.pt:hover{transform:translateY(-6px);border-color:#e4c48c;background:linear-gradient(165deg,#3b3628,#25241f)}
.pt .em{width:44px;height:44px;border-radius:50%;background:rgba(228,196,140,.24);display:grid;place-items:center;color:#f0d7a6;margin-bottom:6px;transition:background .35s,color .35s}
.pt:hover .em{background:#e4c48c;color:#1a140a}
.pt .em .ico{width:20px;height:20px}
.pt b{font-size:16px;color:#fff}
.pt small{color:#cfd1ca;font-size:13.5px;line-height:1.5}
.pt .off{justify-self:stretch;margin-top:10px;padding-top:14px;border-top:1px dashed rgba(228,196,140,.6);font-family:var(--display);font-size:34px;line-height:1;font-weight:600;color:#f0d7a6;background:none;border-radius:0}
.pt::before,.pt::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:var(--night);border:1px solid rgba(228,196,140,.45);bottom:54px}
.pt::before{left:-8px}
.pt::after{right:-8px}
@media (max-width:980px){.pt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.pt-grid{grid-template-columns:1fr 1fr}.partners-h p{border-left:0;padding-left:0}}

/* ---------- blog teaser + page ---------- */
.blog-t{background:var(--surface)}
.blog-t .sec-top{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.blog-t .sec-top .sec-head{margin:0}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.bl{display:grid;gap:14px;text-decoration:none;color:inherit;align-content:start}
.bl .ph{border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
.bl .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.bl:hover .ph img{transform:scale(1.05)}
.bl .m{font-size:12.5px;color:var(--muted);display:flex;gap:10px}
.bl .m b{color:var(--brass);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:11.5px}
.bl h3{font-size:22px;transition:color .2s}
.bl:hover h3{color:var(--pine-2)}
.bl p{margin:0;color:var(--muted);font-size:14.5px}
@media (max-width:900px){.bl-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.bl-grid{grid-template-columns:1fr}}
.art-wrap{max-width:760px;margin-inline:auto}
.art-wrap .back{display:inline-flex;gap:8px;align-items:center;font-weight:600;text-decoration:none;color:var(--pine);margin-bottom:28px}
.art-wrap .back .ico{width:18px;height:18px;transform:rotate(180deg)}
.art-body{font-size:18px;line-height:1.75}
.art-body h2{font-size:clamp(26px,2.8vw,34px);margin:44px 0 14px}
.art-body p{margin:0 0 18px}
.art-body ul{padding-left:20px;margin:0 0 18px}
.art-body li{margin-bottom:8px}
.art-body .callout{background:var(--brass-soft);border-radius:16px;padding:20px 22px;margin:28px 0;font-size:16px;line-height:1.6}
.art-body .callout b{display:block;margin-bottom:4px}
.art-meta{display:flex;align-items:center;gap:14px;padding-bottom:24px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.art-meta .av{flex:none;width:46px;height:46px;border-radius:50%;background:var(--pine);color:#e4c48c;display:grid;place-items:center;font-family:var(--display);font-size:22px}
.art-meta b{display:block;font-size:15px}
.art-meta span{font-size:13.5px;color:var(--muted)}
.art-facts{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:16px;padding:22px 24px;margin-bottom:22px}
.art-facts h3,.art-toc h3,.art-src h3{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-ink);margin:0 0 12px}
.art-facts dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px}
.art-facts dt{font-size:12.5px;color:var(--muted);margin-bottom:2px}
.art-facts dd{margin:0;font-size:15.5px;font-weight:600;line-height:1.4}
.art-toc{border:1px solid var(--line);border-radius:16px;padding:20px 24px;margin-bottom:36px}
.art-toc ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15.5px}
.art-toc a{color:var(--pine);text-decoration:none}
.art-toc a:hover{text-decoration:underline}
.art-body h2{scroll-margin-top:100px}
.art-src{margin-top:48px;padding-top:28px;border-top:1px solid var(--line);font-size:14.5px}
.art-src ol{margin:0 0 16px;padding-left:20px;display:grid;gap:8px}
.art-src li a{color:var(--pine);font-weight:600}
.art-src li span{display:block;font-size:12.5px;color:var(--muted)}
.art-src p{margin:0 0 6px;color:var(--muted);line-height:1.6}
.art-src .cr-note{font-size:12.5px}
@media (max-width:600px){.art-facts dl{grid-template-columns:1fr}}
.art-cta{margin-top:40px;background:var(--pine);color:#fff;border-radius:22px;padding:28px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.art-cta b{font-family:var(--display);font-weight:500;font-size:24px}
.art-more{margin-top:56px}
.art-more h3{font-size:24px;margin-bottom:18px}

/* ---------- UGC strip ---------- */
.ugc{padding-block:clamp(64px,8vw,104px);overflow:hidden;background:var(--paper)}
.ugc .sec-top{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.ugc .sec-head{margin:0}
.ugc-tag{font-family:var(--display);font-size:clamp(20px,2vw,26px);color:var(--pine)}
.ugc-row{display:flex;gap:14px;width:max-content;animation:ugcRun 60s linear infinite}
.ugc-row:hover{animation-play-state:paused}
.ugc-row figure{margin:0;width:clamp(180px,20vw,260px);aspect-ratio:1;border-radius:18px;overflow:hidden;position:relative;flex:none}
.ugc-row figure:nth-child(even){transform:translateY(22px)}
.ugc-row img{width:100%;height:100%;object-fit:cover}
.ugc-row figcaption{position:absolute;left:10px;bottom:10px;font-size:12px;font-weight:600;color:#fff;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);padding:4px 10px;border-radius:999px}
@keyframes ugcRun{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ugc-row{animation:none}}

/* ---------- room comparison (rooms page) ---------- */
.cmpt-wrap{overflow-x:auto;border-radius:20px;border:1px solid var(--line);background:var(--surface)}
.cmpt{width:100%;border-collapse:collapse;min-width:760px;font-size:15px}
.cmpt th,.cmpt td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.cmpt tr:last-child td{border-bottom:0}
.cmpt thead th{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--paper)}
.cmpt .nm{display:flex;gap:14px;align-items:center}
.cmpt .nm img{width:64px;height:48px;border-radius:10px;object-fit:cover;flex:none}
.cmpt .nm span{display:grid;gap:4px;justify-items:start}
.cmpt .nm b{font-weight:600}
.cmpt .pr{white-space:nowrap}
.cmpt .y{color:var(--pine)} .cmpt .n{color:#b5b1a6}
.cmpt .ico{width:18px;height:18px}
.cmpt .pr b{font-family:var(--body);font-size:18px}
.cmpt .pr small{color:var(--muted)}
.cmpt tbody tr{transition:background .2s}
.cmpt tbody tr:hover{background:#faf8f3}
.cmpt .best{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--brass-soft);color:#6b4e1d;padding:2px 7px;border-radius:999px;vertical-align:middle}
.cmpt button{white-space:nowrap}

/* ---------- price calendar ---------- */
.cal-d .pz{position:absolute;left:0;right:0;bottom:4px;z-index:2;font-style:normal;text-align:center;font-size:9.5px;line-height:1;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums;pointer-events:none}
.cal-d:has(.pz) span{place-items:start center;padding-top:8px;box-sizing:border-box}
.cal-d:has(.pz).td span::after{bottom:auto;top:4px}
.cal-d[data-lo] .pz{color:#2f7a4a;font-weight:700}
.cal-d:disabled .pz{opacity:0}
.cal-d.s .pz,.cal-d.e .pz{color:#fff;opacity:.85}
.cal-leg{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--muted);padding:6px 4px 0}
.cal-leg i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2f7a4a;margin-right:5px}

/* ---------- best price guarantee ---------- */
.bpg{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(180,138,70,.5);background:rgba(239,227,204,.5);color:var(--ink);border-radius:999px;padding:6px 12px 6px 8px;font:600 13px var(--body);cursor:pointer;text-decoration:none}
.bpg .seal{width:22px;height:22px;border-radius:50%;background:var(--brass);display:grid;place-items:center;color:#1a140a}
.bpg .seal .ico{width:13px;height:13px;stroke-width:2.4}
.bpg-pop{position:fixed;inset:0;z-index:95;background:rgba(10,12,10,.55);display:grid;place-items:center;padding:16px}
.bpg-pop[hidden]{display:none}
.bpg-card{background:var(--surface);border-radius:22px;max-width:480px;width:100%;padding:30px;display:grid;gap:14px;position:relative}
.bpg-card .seal-big{width:64px;height:64px;border-radius:50%;background:var(--brass);display:grid;place-items:center;color:#1a140a;box-shadow:0 0 0 6px var(--brass-soft)}
.bpg-card .seal-big .ico{width:30px;height:30px;stroke-width:2}
.bpg-card h3{font-size:28px}
.bpg-card ol{margin:0;padding-left:20px;color:var(--muted);display:grid;gap:8px}
.bpg-card .x{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;border:0;background:var(--paper-2);cursor:pointer;display:grid;place-items:center}

/* ---------- richer room page ---------- */
.rp-fit{display:flex;flex-wrap:wrap;gap:8px}
.rp-fit span{display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border-radius:999px;background:var(--paper-2);font-size:14px;font-weight:500}
.rp-fit .ico{width:17px;height:17px;color:var(--pine)}
.rp-inc{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin:0;padding:0;list-style:none}
.rp-inc li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.rp-inc .ico{width:18px;height:18px;color:var(--pine);flex:none;margin-top:3px}
.rp-near{display:grid;gap:0}
.rp-near div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.rp-near div:last-child{border-bottom:0}
.rp-near span{color:var(--muted)}
.rp-mini{width:100%;border-collapse:collapse;font-size:14.5px}
.rp-mini th,.rp-mini td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
.rp-mini th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.rp-mini tr.me td{background:var(--brass-soft);font-weight:600}
.rp-mini button{border:0;background:none;padding:0;font:inherit;color:var(--pine);text-decoration:underline;cursor:pointer}
.rcard .bpg{margin-top:4px;justify-self:center}
@media (max-width:640px){.rp-inc{grid-template-columns:1fr}}

/* ---------- mobile book bar upgrade ---------- */
.mbar.up{grid-template-columns:auto 1fr auto}
.mbar.up .mb-ic{width:46px;padding:0}
.mbar.up .mb-info{display:grid;gap:0;justify-items:start;text-align:left;border:0;background:none;padding:4px 2px;line-height:1.2}
.mbar.up .mb-info b{font-size:15px}
.mbar.up .mb-info small{font-size:12px;color:var(--muted);font-weight:500}
.mbar.up .main{padding-inline:22px}

/* headline line reveal */
.h2l.lnrev{overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.h2l.lnrev>span{display:inline-block}

/* two-line headings: never let a nowrap line stretch its grid/flex parent (fitH2 shrinks the font instead) */
h2{min-width:0;max-width:100%}

/* audience tabs on phones */
@media (max-width:520px){.aud-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}.aud-tabs button{padding:10px 8px;font-size:14px;white-space:nowrap}}

/* lobby card stack rotates past the edge on phones: clip it so the page never scrolls sideways */
.lobby{overflow-x:clip}
.mbar.up .mb-info{min-width:0;overflow:hidden}
.mbar.up .mb-info small{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* blog cards: line illustration instead of photo */
.bl .ph-ill{background:linear-gradient(180deg,#f3efe6,#fbfaf7);border:1px solid var(--line);display:grid;place-items:center;padding:26px 30px}
.bl .ph-ill .ill{max-height:100%;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.bl:hover .ph-ill .ill{transform:scale(1.05)}

/* contrast (WCAG AA): brass is too light for small text on light backgrounds */
:root{--brass-ink:#85612a}
.eyebrow,.bl .m b,.loc-cat b{color:var(--brass-ink)}
.hero .eyebrow,.lobby .eyebrow,.tour .eyebrow,.pg-hero .eyebrow,.cta-box[data-bg="pine"] .eyebrow{color:#e4c48c}
.ftr .lbl{opacity:.8}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* guide + blog cards: real place photos (Wikimedia Commons, credited) */
.gcard .art-ph{position:relative;padding:0;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.gcard .art-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.gcard:hover .art-ph img{transform:scale(1.06)}
.art-ph .cr,.bl .ph .cr{position:absolute;right:8px;bottom:6px;font-size:10px;line-height:1.3;color:rgba(255,255,255,.85);background:rgba(18,19,17,.45);padding:2px 6px;border-radius:4px;pointer-events:none}
.bl .ph{position:relative}

/* ---------- smooth transitions: language switch + page changes (View Transitions API) ---------- */
.lang.has-pill{position:relative}
.lang.has-pill .pill{position:absolute;left:0;top:3px;bottom:3px;width:0;border-radius:999px;background:var(--brass);box-shadow:0 4px 12px -4px rgba(180,138,70,.7);transition:transform .5s cubic-bezier(.34,1.4,.5,1),width .5s cubic-bezier(.34,1.4,.5,1);z-index:0}
.lang.has-pill a{position:relative;z-index:1;transition:color .35s,opacity .35s}
.lang.has-pill a.on{background:transparent}
.lang.has-pill a:not(.on):hover{opacity:1}

.hdr{view-transition-name:hdr}
.lang{view-transition-name:lang}
.mbar{view-transition-name:mbar}
::view-transition-old(lang){display:none}
::view-transition-new(lang){animation:none}
::view-transition-group(hdr),::view-transition-group(mbar){animation-duration:.5s}

html[data-vt="lang"]::view-transition-old(root){animation:vtLangOut .28s cubic-bezier(.4,0,1,1) both}
html[data-vt="lang"]::view-transition-new(root){animation:vtLangIn .5s .12s cubic-bezier(0,0,.2,1) both}
@keyframes vtLangOut{to{opacity:0;filter:blur(6px)}}
@keyframes vtLangIn{from{opacity:0;filter:blur(6px)}}

/* page change: quick overlapping cross-fade, compositor-only (opacity + transform, no blur) */
html[data-vt="page"]::view-transition-old(root){animation:vtPageOut .2s cubic-bezier(.4,0,1,1) both}
html[data-vt="page"]::view-transition-new(root){animation:vtPageIn .38s .03s cubic-bezier(.16,1,.3,1) both}
@keyframes vtPageOut{to{opacity:0;transform:scale(.985)}}
@keyframes vtPageIn{from{opacity:0;transform:translateY(22px)}}

@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ---------- guide: clickable cards + place detail window ---------- */
.gcard.is-link{cursor:pointer}
.gcard.is-link:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.gcard .more{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--pine);margin-top:4px}
.gcard .more .ico{width:16px;height:16px;transition:transform .3s}
.gcard:hover .more .ico{transform:translateX(4px)}

.pm{position:fixed;inset:0;z-index:96;display:grid;place-items:center;padding:16px;background:rgba(10,12,10,0);transition:background .26s}
.pm[hidden]{display:none}
.pm.on{background:rgba(10,12,10,.6)}
.pm-card{position:relative;width:min(820px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);border-radius:24px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);opacity:0;transform:translateY(24px) scale(.97);transition:opacity .26s,transform .4s cubic-bezier(.2,.9,.3,1.1)}
.pm.on .pm-card{opacity:1;transform:none}
.pm-card.swap .pm-bd,.pm-card.swap .pm-ph img{opacity:0;transform:translateY(6px)}
.pm-bd,.pm-ph img{transition:opacity .16s,transform .16s}
.pm-ph{position:relative;aspect-ratio:16/8;background:var(--paper-2);overflow:hidden}
.pm-ph img{width:100%;height:100%;object-fit:cover;display:block}
.pm-art{height:100%;display:grid;place-items:center;padding:24px 15%;background:linear-gradient(180deg,#f3efe6,#fbfaf7)}
.pm-ph .cr{position:absolute;left:12px;bottom:10px;font-size:11px;color:rgba(255,255,255,.9);background:rgba(18,19,17,.5);padding:3px 8px;border-radius:6px}
.pm-x{position:absolute;right:14px;top:14px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 16px -6px rgba(0,0,0,.35)}
.pm-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.9);cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 16px -6px rgba(0,0,0,.35);transition:transform .2s}
.pm-nav:hover{transform:translateY(-50%) scale(1.08)}
.pm-nav.p{left:14px}.pm-nav.n{right:14px}
.pm-bd{padding:clamp(22px,3.5vw,36px);display:grid;gap:16px}
.pm-bd .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pm-bd .meta span{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--paper-2);display:inline-flex;gap:5px;align-items:center}
.pm-bd .meta .ico{width:14px;height:14px;color:var(--brass)}
.pm-bd .meta .pm-count{margin-left:auto;background:none;color:var(--muted);font-weight:500}
.pm-bd h3{font-size:clamp(26px,3vw,36px)}
.pm-lead{margin:0;color:var(--ink);font-size:16.5px;line-height:1.65}
.pm-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pm-facts div{background:var(--paper);border-radius:14px;padding:14px 16px;display:grid;gap:4px;align-content:start}
.pm-facts b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-ink,#85612a)}
.pm-facts span{font-size:14.5px;line-height:1.5}
.pm-tip{display:flex;gap:12px;background:var(--brass-soft);border-radius:14px;padding:14px 16px;font-size:14.5px;line-height:1.5}
.pm-tip .ico{width:20px;height:20px;color:var(--brass-ink,#85612a);flex:none;margin-top:1px}
.pm-tip b{display:block;margin-bottom:2px}
.pm-act{display:flex;gap:10px;flex-wrap:wrap}
.pm-act .btn .ico{width:18px;height:18px}
@media (max-width:640px){.pm{padding:0;align-items:end}.pm-card{border-radius:24px 24px 0 0;max-height:92vh}.pm-facts{grid-template-columns:1fr}.pm-ph{aspect-ratio:16/10}}
@media (prefers-reduced-motion:reduce){.pm,.pm-card,.pm-bd,.pm-ph img{transition:none}}
/* place window: stacked photo layers for cross-fades */
.pm-stack{position:absolute;inset:0;overflow:hidden}
.pm-layer{position:absolute;inset:0;will-change:opacity,transform}
.pm-layer img{width:100%;height:100%;object-fit:cover;display:block}
.pm-layer .pm-art{height:100%}
.pm-ph .cr,.pm-nav,.pm-x{z-index:2}
.pm-bd{overflow:hidden}

/* =====================================================================
   RESPONSIVE LAYER — centred headings, full-width actions, tidy grids.
   Pattern (Mobbin refs: Lloyds, Rodeo, Delta, Trainline): heading + lead +
   primary button centred, icon lists stay left for easy scanning.
   ===================================================================== */

/* stacked section headers read better centred at every size */
#za-kogo .sec-head,#tur .sec-head,#lokaciya .sec-head,#vidite .sec-head{justify-items:center;text-align:center}
#za-kogo .sec-head .lead,#tur .sec-head .lead,#lokaciya .sec-head .lead,#vidite .sec-head .lead{margin-inline:auto}
.aud-tabs{display:flex;width:max-content;margin-inline:auto}
.tour-chips{justify-content:center}
.guide-sky{margin-inline:auto}

/* ---------- tablet & phone ---------- */
@media (max-width:860px){
  /* every header block: centred */
  .sec-head,.about-txt,.cta-tx,.lobby-g > div:not([class]),.lobby-g .lobby-tx{justify-items:center;text-align:center}
  .sec-head .lead,.about-txt p,.cta-tx p{margin-inline:auto}
  .rev-head,.blog-t .sec-top,.ugc .sec-top{flex-direction:column;align-items:center;text-align:center;justify-content:center}
  .ugc .sec-top > div:last-child{justify-items:center!important;text-align:center!important}
  .score{justify-content:center}
  .cta-tx{justify-items:center}
  .cta-act{justify-content:center}
  .partners-h{flex-direction:column;align-items:center;text-align:center}
  .loc-cat{justify-content:center;flex-wrap:wrap;text-align:center}
  /* audience panel: photo, then centred title/lead, list stays left */
  .aud-tx{justify-items:center;text-align:center}
  .aud-tx>p{margin-inline:auto}
  .aud-list{text-align:left;justify-self:stretch}
}

/* ---------- phone ---------- */
@media (max-width:640px){
  section{padding-block:clamp(56px,14vw,80px)}
  .sec-head{margin-bottom:28px}

  /* primary actions: full width, stacked */
  .aud-act,.pm-act,.art-cta{flex-direction:column;align-items:stretch;width:100%}
  .aud-act .btn,.pm-act .btn,.art-cta .btn{width:100%}
  .cta-act{flex-direction:column;align-items:stretch;width:100%}
  .cta-act .btn{width:100%}
  .cta-act .cta-tel,.cta-act .bpg{align-self:center}
  .art-cta{text-align:center}

  /* USP: two tidy columns instead of a long single list */
  .usp-grid{grid-template-columns:1fr 1fr;gap:34px 14px}
  .usp-i h3{font-size:16px}
  .usp-i p{font-size:13.5px;line-height:1.5}
  .usp-i .circ{width:50px;height:50px}

  /* rooms rail: taller, more photographic cards with a peek of the next */
  .rail{grid-auto-columns:82vw}
  .room{aspect-ratio:4/4.6}
  .room .bt span{font-size:13px}

  /* tour: caption no longer collides with the play button */
  .tour-play{top:42%}
  .tour-cap{flex-direction:column;align-items:flex-start;gap:8px}
  .tour-cap b{font-size:19px}

  /* about photo: credit moves up so the address pill has room */
  .about-ph .cr{top:10px;bottom:auto;right:10px;left:auto}

  /* partners: two equal columns that never overflow */
  .pt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-grid > *{min-width:0}

  /* guide header illustration: less empty space */
  .guide-sky{margin-bottom:12px;max-height:150px}

  /* audience tabs fit 320px phones */
  .aud-tabs{width:100%}
  .aud-tabs button{flex:1;padding:10px 6px;font-size:13.5px}

  /* footer: centred, generous tap targets */
  .ftr-g{text-align:center;justify-items:center}
  .ftr-g > div{display:grid;justify-items:center;width:100%}
  .ftr-logo{justify-items:center}
  .ftr .news{width:100%;max-width:420px}
  .ftr-ic{justify-items:center}
  .ftr-ic li{justify-content:center;text-align:left}
  .ftr-ic li a{display:inline-flex;align-items:center;min-height:36px}
  .ftr-nav{width:100%;max-width:320px;text-align:center}
  .ftr-nav a{display:flex;align-items:center;justify-content:center;min-height:40px}
  .ftr-b{flex-direction:column;align-items:center;text-align:center}
  .ftr-b div:last-child{justify-content:center;gap:4px 18px}
  .ftr-b a{display:inline-flex;align-items:center;min-height:36px}
}

/* ---------- small phones ---------- */
@media (max-width:360px){
  .usp-grid{gap:28px 10px}
  .usp-i p{font-size:13px}
  .pt-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  /* owner quote: centred, so the accent rule moves from the left edge to a short line on top */
  .host{border-left:0;padding:22px 0 0;position:relative;text-align:center}
  .host::before{content:"";position:absolute;top:0;left:50%;width:48px;height:2px;margin-left:-24px;background:#e4c48c}
  .host cite{justify-content:center}
}
@media (max-width:860px){
  .sec-head > .link-btn{justify-self:center!important}
}
/* tablet: keep the mobile book bar's content in a centred cluster instead of stretched edge-to-edge */
@media (min-width:641px) and (max-width:820px){
  .mbar.up{padding-inline:max(12px,calc((100vw - 620px)/2))}
}
#vidite .guide-sky,#vidite .guide-art{display:block;margin-left:auto;margin-right:auto}
/* the visually-hidden table header must stay inside the scrolling wrapper (otherwise it widens the page on phones) */
.cmpt-wrap{position:relative}