@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/hanken-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/hanken-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/caslon-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Libre Caslon Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/caslon-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/caslon-text-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/caslon-text-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/bodoni-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/bodoni-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/playfair-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/playfair-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/garamond-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/garamond-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/jost-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/jost-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/marcellus-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/marcellus-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


/* Layout: Panoramatafel. One full-bleed season photograph, then a square-edged 12-column grid where
   photographs and text interlock like timber joinery. Gold appears only as emblem, hairline and call to action. */
:root{
  --bg:#F5F4F0; --surface:#FFFFFF; --surface-2:#EBE9E2; --ink:#1A1D18; --ink-2:#4B5046;
  --line:#DAD7CD; --field-line:#8A867B;
  --accent:#B18642; --accent-ink:#7A5626; --on-accent:#16120B; --logo:#A47A38;
  --band:#2F382B; --on-band:#F2EFE7; --on-band-2:#C9CCBF; --band-accent:#D9BC8A;
  --map-dim:brightness(1); --bad:#A3302A; --st-ok:#2C5E8C; --st-in:#2D7247; --scrim:rgba(12,14,10,.62); --photo-ink:#FFFFFF; --photo-logo:#FFFFFF; --demo-bg:#1A1D18; --demo-fg:#F2EFE7;
  --f-display:"Libre Caslon Display","Libre Caslon Text",Georgia,"Times New Roman",serif;
  --f-head:"Libre Caslon Text",Georgia,"Times New Roman",serif; /* text cut of the display face for headings below 30px */
  --f-body:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --display-weight:400; --display-track:-.01em;
  --r:0px; --r-lg:calc(var(--r) * 1.5);
  --ctl:56px; --ctl-sm:40px;
  --wrap:1320px; --gut:max(16px, env(safe-area-inset-left, 0px));
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* the site's own choice is data-mode and always wins. data-theme is set by the claude.ai viewer for its own theme
   and counts like the device setting: it applies only while the site is on "System" */
@media (prefers-color-scheme: dark){
  :root:not([data-mode="light"]):not([data-theme="light"]){
    --bg:#11130F; --surface:#191C17; --surface-2:#22261F; --ink:#EEEBE3; --ink-2:#B3AFA4;
    --line:#2E332B; --field-line:#6A6F63;
    --accent:#C9A063; --accent-ink:#D9BC8A; --on-accent:#16120B; --logo:#C9A063;
    --band:#1C2219; --on-band:#EEEBE3; --on-band-2:#B3AFA4; --band-accent:#D9BC8A;
    --map-dim:brightness(.84); --bad:#F0968A; --st-ok:#8CB6E0; --st-in:#86C49B; --scrim:rgba(6,7,5,.66); --demo-bg:#262B23; --demo-fg:#EEEBE3; color-scheme:dark;
  }
}
:root[data-mode="dark"], :root[data-theme="dark"]:not([data-mode="light"]){
  --bg:#11130F; --surface:#191C17; --surface-2:#22261F; --ink:#EEEBE3; --ink-2:#B3AFA4;
  --line:#2E332B; --field-line:#6A6F63;
  --accent:#C9A063; --accent-ink:#D9BC8A; --on-accent:#16120B; --logo:#C9A063;
  --band:#1C2219; --on-band:#EEEBE3; --on-band-2:#B3AFA4; --band-accent:#D9BC8A;
  --map-dim:brightness(.84); --bad:#F0968A; --st-ok:#8CB6E0; --st-in:#86C49B; --scrim:rgba(6,7,5,.66); --demo-bg:#262B23; --demo-fg:#EEEBE3; color-scheme:dark;
}
:root[data-font]{ --f-head:var(--f-display); }
:root[data-font="modern"]{ --f-display:"Hanken Grotesk","Segoe UI",system-ui,sans-serif; --display-weight:500; --display-track:-.03em; }
:root[data-font="elegant"]{ --f-display:"Playfair Display",Georgia,serif; --display-weight:500; --display-track:-.01em; }
:root[data-font="garamond"]{ --f-display:"EB Garamond",Garamond,Georgia,serif; --display-weight:500; --display-track:-.005em; }
:root[data-font="warm"]{ --f-display:"Fraunces",Georgia,serif; --display-weight:500; --display-track:-.015em; }
:root[data-font="geo"]{ --f-display:"Jost",Futura,"Century Gothic",system-ui,sans-serif; --display-weight:450; --display-track:-.02em; }
:root[data-font="roman"]{ --f-display:"Marcellus",Georgia,serif; --display-weight:400; --display-track:.005em; }
:root[data-font="editorial"]{ --f-display:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif; --display-weight:500; --display-track:-.015em; }

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
/* overlay scrollbars (theme for OverlayScrollbars, see app.js): thin and half transparent over the content, in the text colour
   of their panel, so they read on light, dark and photo grounds; wider under the pointer; hidden shortly after scrolling stops */
.os-theme-nkh{box-sizing:border-box; --os-size:12px; --os-padding-perpendicular:3px; --os-padding-axis:3px; --os-track-border-radius:0;
  --os-handle-border-radius:min(var(--r), 6px); --os-handle-min-size:40px; --os-handle-interactive-area-offset:4px;
  --os-handle-bg:color-mix(in srgb, currentColor 36%, transparent); --os-handle-bg-hover:color-mix(in srgb, currentColor 55%, transparent); --os-handle-bg-active:color-mix(in srgb, currentColor 68%, transparent);
  --os-handle-border:1px solid color-mix(in srgb, var(--bg) 45%, transparent); --os-handle-border-hover:var(--os-handle-border); --os-handle-border-active:var(--os-handle-border);
  --os-handle-perpendicular-size:50%; --os-handle-perpendicular-size-hover:100%; --os-handle-perpendicular-size-active:100%}
.os-theme-nkh.os-scrollbar{transition:opacity .35s var(--ease), visibility .35s}
/* the library makes every element it scrolls position:relative; a modal dialog has to stay fixed to the window */
dialog:modal{position:fixed}
.os-theme-nkh .os-scrollbar-handle{transition:width .15s var(--ease), height .15s var(--ease), background-color .15s}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after,::backdrop{animation-duration:.01ms!important; animation-delay:0s!important; animation-iteration-count:1!important; transition-duration:.01ms!important; transition-delay:0s!important} }
body{margin:0; background:var(--bg); color:var(--ink); font:400 1.062rem/1.6 var(--f-body); overflow-x:clip}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:60; background:var(--bg)}
img{display:block; max-width:100%; height:auto}
picture{display:block}
a{color:inherit}
button,input,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent-ink); outline-offset:3px}
.hero-content :focus-visible, .band :focus-visible{outline-color:var(--photo-ink)}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:16px; top:-100px; z-index:100; background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:var(--r)}
.skip:focus{top:calc(12px + env(safe-area-inset-top, 0px))}
.wrap{width:100%; max-width:calc(var(--wrap) + 2 * var(--gut)); margin-inline:auto;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
@media (min-width:720px){ .wrap{padding-left:max(32px, env(safe-area-inset-left, 0px)); padding-right:max(32px, env(safe-area-inset-right, 0px))} }

/* type */
.display{font-family:var(--f-display); font-weight:var(--display-weight); letter-spacing:var(--display-track); line-height:1.04; text-wrap:balance; margin:0}
.h1{font-size:clamp(2.625rem, calc(6.4vw * var(--fs, 1)), 5.75rem)}
.h2{font-size:clamp(2.125rem, calc(4.4vw * var(--fs, 1)), 3.875rem)}
.h3{font-size:clamp(1.5rem, calc(2.2vw * var(--fs, 1)), 1.875rem); line-height:1.15}
.eyebrow{font:600 0.8125rem/1.3 var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); margin:0}
.lede{font-size:clamp(1.125rem, calc(1.5vw * var(--fs, 1)), 1.312rem); line-height:1.55; color:var(--ink-2); max-width:58ch; margin:0}
p{margin:0}
.muted{color:var(--ink-2)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* controls: one height per context, one radius everywhere */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:var(--ctl); padding:0 24px;
  border:1px solid transparent; border-radius:var(--r); font:600 0.9375rem/1 var(--f-body); letter-spacing:.03em;
  text-decoration:none; cursor:pointer; white-space:nowrap; background:transparent;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease)}
.btn svg{width:18px; height:18px; flex:none}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{background:color-mix(in oklab, var(--accent) 86%, var(--ink))}
.btn-quiet{border-color:var(--field-line); color:var(--ink)}
.btn-quiet:hover{border-color:var(--ink)}
.btn-sm{height:var(--ctl-sm); padding:0 16px; font-size:0.875rem}
.btn-icon{width:var(--ctl-sm); padding:0; flex:none}
.btn-x{width:44px; height:44px; flex:none; padding:0; display:inline-grid; place-items:center; border:0; border-radius:var(--r); background:transparent; color:inherit; cursor:pointer}
.btn-x:hover{background:color-mix(in oklab, currentColor 12%, transparent)}
.btn-x svg{width:22px; height:22px}

.seg{display:inline-flex; height:var(--ctl-sm); border:1px solid var(--field-line); border-radius:var(--r); overflow:hidden}
.seg button{border:0; background:transparent; padding:0 12px; min-width:44px; cursor:pointer; font:600 0.8125rem/1 var(--f-body); letter-spacing:.06em; color:inherit}
.seg button + button{border-left:1px solid var(--field-line)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.select{height:var(--ctl-sm); border:1px solid var(--field-line); border-radius:var(--r); background:transparent;
  padding:0 34px 0 12px; font:600 0.8125rem/1 var(--f-body); letter-spacing:.04em; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size:5px 5px; background-repeat:no-repeat}
.select option{color:var(--ink); background:var(--surface)}
.dd{position:relative; display:inline-block}
.dd-btn{height:var(--ctl-sm); min-width:84px; display:inline-flex; align-items:center; justify-content:space-between; gap:10px; padding:0 12px; border:1px solid var(--field-line); border-radius:var(--r);
  background:transparent; color:inherit; font:600 0.8125rem/1 var(--f-body); letter-spacing:.04em; cursor:pointer; text-align:left}
.dd-btn svg{width:12px; height:12px; flex:none; transition:transform .2s var(--ease)}
.dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd-list{position:absolute; z-index:65; top:calc(100% + 4px); left:0; min-width:100%; width:max-content; max-width:min(320px, calc(100vw - 32px)); max-height:min(320px, 55svh); overflow:auto;
  margin:0; padding:6px; list-style:none; background:var(--surface); color:var(--ink); border:1px solid var(--field-line); border-radius:var(--r-lg); box-shadow:0 24px 50px -20px rgba(0,0,0,.45)}
.dd-list.right{left:auto; right:0}
.dd-list.up{top:auto; bottom:calc(100% + 4px)}
@media (max-width:640px){
  .dd-list, .dd-list.up{position:fixed; z-index:120; left:0; right:0; top:auto; bottom:0; width:100%; max-width:none; max-height:62svh;
    border-radius:var(--r-lg) var(--r-lg) 0 0; border-left:0; border-right:0; border-bottom:0; padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -24px 70px rgba(0,0,0,.5)}
  .dd-opt{min-height:52px}
  .dd-list.has-q{width:100%; max-height:62svh; padding:0 0 env(safe-area-inset-bottom, 0px)}
  .dd-qw{padding:12px 12px 6px}
  .dd-qi{left:24px}
  .dd .dd-q{height:48px}
}
.dd-opt{display:grid; grid-template-columns:minmax(0,1fr) 16px; align-items:center; gap:2px 18px; min-height:44px; padding:6px 12px; border-radius:var(--r); cursor:pointer; font:500 0.9375rem/1.2 var(--f-body); letter-spacing:0}
.dd-opt small{grid-column:1; font-size:0.8125rem; color:var(--ink-2); font-weight:400}
.dd-opt .tick{grid-column:2; grid-row:1 / span 2; width:16px; height:16px; color:var(--accent-ink); visibility:hidden}
.dd-opt[aria-selected="true"]{font-weight:600}
.dd-opt[aria-selected="true"] .tick{visibility:visible}
.dd-opt:hover, .dd-opt:focus{background:var(--surface-2); outline:none}
.dd-opt:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-ink)}
/* with a search: the field stays on top (its rules carry .dd so the styles of the form around it do not reach it), only the entries scroll; a line parts the five on top from all others */
.dd-list.has-q{display:flex; flex-direction:column; width:min(340px, calc(100vw - 32px)); max-height:min(400px, 62svh); padding:0; overflow:hidden}
.dd-qw{position:relative; flex:none; padding:8px 8px 4px}
.dd-qi{position:absolute; left:20px; top:calc(50% + 2px); translate:0 -50%; width:16px; height:16px; color:var(--ink-2); pointer-events:none}
.dd .dd-q{width:100%; height:44px; padding:0 12px 0 38px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); font:500 1rem/1 var(--f-body); letter-spacing:0}
.dd .dd-q::placeholder{color:var(--ink-2); opacity:1}
.dd .dd-q:focus{outline:2px solid var(--accent-ink); outline-offset:-1px}
.dd-ul{flex:1 1 auto; min-height:0; overflow:auto; margin:0; padding:4px 6px 6px; list-style:none}
.dd-opt.is-active{background:var(--surface-2)}
.dd-opt.is-sep{position:relative; margin-top:9px}
.dd-opt.is-sep::before{content:""; position:absolute; left:12px; right:12px; top:-5px; border-top:1px solid var(--line)}
.dd-none{margin:0; padding:6px 16px 16px; color:var(--ink-2); font-size:0.875rem}
.dd-none:empty{display:none}
.site-header:not(.is-solid) .dd-btn{border-color:rgba(255,255,255,.55); color:#fff}

/* demo notice */
.demo-bar{background:var(--demo-bg); color:var(--demo-fg); font:500 0.8438rem/1.4 var(--f-body)}
.demo-bar .wrap{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; justify-content:center; padding-block:9px; text-align:center}
.demo-bar strong{font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:0.7812rem}
.demo-bar ul{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px; list-style:none; margin:0; padding:0}
.demo-bar li{display:inline-flex; align-items:center; gap:7px}
.demo-bar li::before{content:""; width:5px; height:5px; background:var(--accent); flex:none}
.about-btn{height:30px; padding:0 10px; border:1px solid currentColor; border-radius:var(--r); background:transparent; color:inherit; font:600 0.7812rem/1 var(--f-body); cursor:pointer; display:inline-flex; align-items:center; gap:6px; flex:none}
.about-btn svg{width:16px; height:16px; display:none}
@media (max-width:640px){
  .demo-bar{font-size:0.75rem}
  .demo-bar .wrap{flex-wrap:nowrap; justify-content:space-between; gap:10px; padding-block:6px; text-align:left}
  .demo-bar .txt{display:block; line-height:1.4}
  .demo-bar strong{font-size:0.6875rem; margin-right:4px}
  .demo-bar ul{display:inline; gap:0}
  .demo-bar li{display:inline}
  .demo-bar li::before{display:inline-block; vertical-align:middle; width:4px; height:4px; margin:0 6px 2px 2px}
  .about-btn{width:36px; height:36px; padding:0; justify-content:center}
  .about-btn span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .about-btn svg{display:block}
}

/* header */
.site-header{position:sticky; top:env(safe-area-inset-top, 0px); z-index:50; color:var(--photo-ink);
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); border-bottom:1px solid transparent}
.site-header > .wrap{display:flex; align-items:center; gap:24px; height:76px}
.site-header.is-solid{background:var(--bg); color:var(--ink); border-bottom-color:var(--line)}
.brand{display:block; color:var(--photo-logo); flex:none; line-height:0}
.brand svg{height:56px; width:auto}
.is-solid .brand{color:var(--logo)}
.nav{display:flex; gap:26px; margin-left:auto}
.nav a{font:500 0.9375rem/1 var(--f-body); text-decoration:none; padding:10px 0; border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:currentColor}
.nav[aria-label]{align-items:center}
/* the group reaches down to its panel, so the pointer never leaves it on the way into the menu */
.nav-group{position:relative; padding-block:10px; margin-block:-10px}
.nav-tog{display:inline-flex; align-items:center; gap:6px; padding:10px 0; border:0; border-bottom:1px solid transparent; background:none; color:inherit; font:500 0.9375rem/1 var(--f-body); cursor:pointer}
.nav-tog .chev{width:12px; height:12px; transition:transform .2s var(--ease)}
.nav-tog[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-tog:hover{border-bottom-color:currentColor}
.nav-menu{position:absolute; z-index:60; top:100%; left:-16px; min-width:220px; display:grid; padding:8px; background:var(--surface); color:var(--ink); border:1px solid var(--field-line); border-radius:var(--r-lg); box-shadow:0 24px 50px -20px rgba(0,0,0,.45)}
.nav-menu.right{left:auto; right:-16px}
.nav .nav-menu a{padding:12px; border:0; border-radius:var(--r); white-space:nowrap}
.nav .nav-menu a:hover, .nav .nav-menu a[aria-current="page"]{background:var(--surface-2)}
.nav a[aria-current="page"]{border-bottom-color:currentColor}
.drawer .nav-sec{margin:44px 0 0; padding:0 0 10px; font:600 0.75rem/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); border-bottom:1px solid var(--line)}
.drawer .nav-sec:first-child{margin-top:0}
.drawer nav a[aria-current="page"]{color:var(--accent-ink)}
.tools{display:flex; align-items:center; gap:8px}
.site-header:not(.is-solid) .seg, .site-header:not(.is-solid) .select, .site-header:not(.is-solid) .btn-quiet{border-color:rgba(255,255,255,.55)}
.site-header:not(.is-solid) .seg button + button{border-left-color:rgba(255,255,255,.55)}
.site-header:not(.is-solid) .seg button[aria-pressed="true"]{background:#fff; color:#16130d}
.site-header:not(.is-solid) .btn-quiet{color:#fff}
.menu-btn{display:none}
@media (max-width:1180px){ .nav{display:none} .tools{margin-left:auto} .menu-btn{display:inline-flex} }
@media (max-width:860px){ .tools .seg, .tools .cur-dd, .tools .mode-btn{display:none} .brand svg{height:46px} }
.site-header.is-tight .nav{display:none}
.site-header.is-tight .tools{margin-left:auto}
.site-header.is-tight .menu-btn{display:inline-flex}
.site-header.is-tighter .tools .seg, .site-header.is-tighter .tools .cur-dd, .site-header.is-tighter .tools .mode-btn{display:none}
@media (max-width:420px){ .tools .book-btn{display:none} .bk-field{padding:0 16px} }

.drawer{position:fixed; inset:0; z-index:80; background:var(--bg); color:var(--ink); display:flex; flex-direction:column;
  padding:calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); overflow:auto;
  clip-path:inset(0 0 calc(100% - 72px - env(safe-area-inset-top, 0px)) 0); transition:clip-path .6s cubic-bezier(.7,0,.2,1)}
.drawer-head{display:flex; justify-content:space-between; align-items:center; height:56px}
.drawer nav{display:grid; margin-top:28px}
.drawer nav a{font:var(--display-weight) 1.375rem/1.15 var(--f-head); text-decoration:none; padding:12px 0; border-bottom:1px solid var(--line)}
.drawer .tools-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:36px}
/* opening: the panel unrolls from the header band, then groups and links rise into place one after another;
   closing runs the other way and faster. Reduced motion skips both (global rules above). */
.drawer nav > *, .drawer .tools-row{opacity:0; transform:translateY(18px);
  transition:opacity .45s var(--ease), transform .6s var(--ease); transition-delay:calc(160ms + var(--i, 0) * 26ms)}
.drawer.is-open{clip-path:inset(0)}
.drawer.is-open nav > *, .drawer.is-open .tools-row{opacity:1; transform:none}
.drawer.is-closing{transition-duration:.4s; pointer-events:none}
.drawer.is-closing nav > *, .drawer.is-closing .tools-row{transition-duration:.18s; transition-delay:0s}

/* hero */
/* one layer above the content that follows, so the search popovers opening downwards stay on top of it */
.hero{position:relative; z-index:2; margin-top:-77px; padding-top:calc(77px + 28px); min-height:clamp(600px, 94svh, 920px); display:flex; flex-direction:column; justify-content:flex-end; color:var(--photo-ink); background:#2a2c24}
.hero-media{position:absolute; inset:0; overflow:hidden}
.hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; opacity:0; transition:opacity 1.1s var(--ease); background-size:cover}
.hero-media img.is-active{opacity:1}
@media (prefers-reduced-motion: no-preference){ .hero-media img.is-active{animation:drift 26s var(--ease) both} }
@keyframes drift{ from{transform:scale(1.07)} to{transform:scale(1)} }
.hero-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,9,7,.8) 0%, rgba(8,9,7,.58) 38%, rgba(8,9,7,0) 68%),
             linear-gradient(180deg, rgba(8,9,7,.6) 0%, rgba(8,9,7,0) 20%, rgba(8,9,7,0) 58%, rgba(8,9,7,.6) 100%)}
@media (max-width:860px){ .hero-media::after{background:linear-gradient(180deg, rgba(8,9,7,.6) 0%, rgba(8,9,7,.2) 16%, rgba(8,9,7,.66) 40%, rgba(8,9,7,.88) 100%)} }
.hero-content{position:relative; display:grid; gap:22px; padding-bottom:28px}
.hero .eyebrow{color:#fff}
.hero h1{max-width:13ch; text-shadow:0 1px 24px rgba(0,0,0,.3)}
.hero .lede, .hero .eyebrow, .season{text-shadow:0 1px 12px rgba(0,0,0,.45)}
.hero .lede{color:#fff; max-width:48ch}
.hero-foot{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between}
.season{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; font:500 0.875rem/1 var(--f-body)}
.season .seg{border-color:rgba(255,255,255,.55)}
.season .seg button + button{border-left-color:rgba(255,255,255,.55)}
.season .seg button[aria-pressed="true"]{background:#fff; color:#16130d}
.sun{display:flex; align-items:center; gap:10px; min-height:var(--ctl-sm); padding:6px 14px; background:rgba(8,9,7,.62); border-radius:var(--r); font:500 0.875rem/1.3 var(--f-body); color:#fff}
.sun svg{width:20px; height:20px; color:var(--photo-logo)}

/* booking bar */
.booking{position:relative; padding-bottom:clamp(24px, 4vw, 44px)}
body.pop-open .fab-zone, body.cc-open .cw{display:none}
@media (max-width:860px){ body.cc-open .dial{display:none} }
@media (max-width:860px){ body.over-hero:not(.tour-fabs) .fab-zone{display:none} }
@media (min-width:861px){ .booking{padding-bottom:104px} }
.bk{--bk-h:72px; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1.1fr) minmax(0,.9fr) auto; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.bk-field{display:flex; flex-direction:column; justify-content:center; gap:3px; height:var(--bk-h); padding:0 22px; border:0; background:transparent; text-align:left; cursor:pointer; min-width:0}
.bk-field + .bk-field{border-left:1px solid var(--line)}
.bk-field .k{font:600 0.75rem/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink)}
.bk-field .v{font:500 1.062rem/1.25 var(--f-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bk-field[aria-expanded="true"]{background:var(--surface-2)}
.bk-code .v{color:var(--ink-2)}
.bk-code.has-code .v{color:var(--accent-ink); font-weight:600}
.bk-code .code-ic{display:none; width:22px; height:22px}
.bk-submit{height:var(--bk-h); border-radius:0; padding:0 32px}
.bk-submit .lbl-short{display:none}
.bk :focus-visible{outline-offset:-4px}
@media (max-width:860px){
  .bk{--bk-h:64px; grid-template-columns:repeat(2, minmax(0,1fr))}
  .bk-field:first-child, .bk-submit{grid-column:1 / -1}
  .bk-field + .bk-field{border-left:0; border-top:1px solid var(--line)}
  .bk-field.bk-code{border-left:1px solid var(--line)}
  .bk-field .k{letter-spacing:.08em}
  .bk-submit{padding:0 20px}
  .hero-content{gap:16px; padding-bottom:20px}
  .hero .lede{font-size:1.062rem}
  .hero .eyebrow{letter-spacing:.1em; font-size:0.75rem}
  .sun{display:none}
}
.bk-host{position:relative}
.pop{position:absolute; z-index:30; bottom:100%; left:0; overflow:auto; background:var(--surface); color:var(--ink); border:1px solid var(--field-line);
  border-radius:var(--r-lg); box-shadow:0 24px 60px -24px rgba(0,0,0,.35); padding:22px}
.pop-cal{width:min(760px, 100%)}
/* the calendar spans the whole search bar and grows out of the dates field without a seam: no line under that field,
   one line under the others, square corners where bar and calendar meet (the side it opens to is set by placePop) */
@media (min-width:641px){
  .pop-cal{width:100%}
  .pop-cal.is-joined{--seam:linear-gradient(var(--line), var(--line)); border-color:var(--line);
    background:var(--seam) 0 0 / var(--fx) 1px no-repeat, var(--seam) calc(var(--fx) + var(--fw)) 0 / 100% 1px no-repeat, var(--surface)}
  .pop-cal.is-joined.is-below{border-top:0; border-top-left-radius:0; border-top-right-radius:0}
  .pop-cal.is-joined:not(.is-below){border-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; box-shadow:0 -20px 50px -24px rgba(0,0,0,.35);
    background-position:0 100%, calc(var(--fx) + var(--fw)) 100%, 0 0}
  .bk-host.is-docked .pop-cal.is-joined{border-color:var(--field-line); --seam:linear-gradient(var(--field-line), var(--field-line))}
  .bk-host[data-join="below"] .bk{border-bottom-color:transparent; border-bottom-left-radius:0; border-bottom-right-radius:0}
  .bk-host[data-join="above"] .bk{border-top-color:transparent; border-top-left-radius:0; border-top-right-radius:0}
  .bk-host[data-join] #bkDates{background:var(--surface)}
}
.pop-guests{width:min(400px, 100%); overflow:visible}
.pop-code{width:min(400px, 100%); display:grid; gap:12px}
.pop-t{font:600 1rem/1.3 var(--f-body); margin:0}
.code-form{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px}
.code-form input{height:48px; min-width:0; padding:0 14px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); font:600 1rem/1 var(--f-body); letter-spacing:.06em; text-transform:uppercase}
.code-form input::placeholder{text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink-2)}
.code-form .btn{height:48px}
.code-msg{min-height:1.4em; margin:0; font-size:0.9062rem; line-height:1.45}
.code-msg.ok{color:var(--accent-ink)} .code-msg.bad{color:var(--bad)}
.code-foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; font-size:0.875rem}
.code-foot a{color:var(--accent-ink)}
.bk-host.is-docked .pop, .pop.is-below{bottom:auto; top:100%}
.hdr-dock{position:absolute; left:0; right:0; top:100%; background:var(--bg); color:var(--ink); border-bottom:1px solid var(--line); box-shadow:0 14px 28px -24px rgba(0,0,0,.5)}
.hdr-dock .wrap{padding-block:8px}
.bk-host.is-docked .bk{--bk-h:48px; border-color:var(--field-line)}
.bk-host.is-docked .bk-field{flex-direction:row; align-items:center; justify-content:flex-start; gap:10px; padding:0 16px}
.bk-host.is-docked .bk-field .k{font-size:0.6875rem}
.bk-host.is-docked .bk-field .v{font-size:0.9375rem}
.site-header.is-docked .book-btn{display:none}
@media (max-width:860px){
  .bk-host.is-docked .bk{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 48px 48px}
  .bk-host.is-docked .bk-code{justify-content:center; padding:0; position:relative}
  .bk-host.is-docked .bk-code .v{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .bk-host.is-docked .bk-code .code-ic{display:block; color:var(--accent-ink)}
  .bk-host.is-docked .bk-code.has-code::after{content:""; position:absolute; top:9px; right:9px; width:8px; height:8px; border-radius:4px; background:var(--accent)}
  .bk-host.is-docked .bk-field{grid-column:auto; border-top:0}
  .bk-host.is-docked .bk-field + .bk-field{border-left:1px solid var(--line)}
  .bk-host.is-docked .bk-field .k{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .bk-host.is-docked .bk-field{padding:0 12px}
  .bk-host.is-docked .bk-submit{grid-column:auto; padding:0}
  .bk-host.is-docked .bk-submit span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
}
@media (max-width:640px){
  .pop{position:fixed; inset:auto 0 0 0; width:100%!important; top:auto!important; bottom:0!important; left:0!important; right:0!important; max-height:88svh; overflow:auto;
    padding:20px max(16px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); border-left:0; border-right:0; border-bottom:0}
}
.cal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.cal-head .btn{height:44px; width:44px; padding:0}
.cal-months{display:grid; grid-template-columns:repeat(var(--months,2), minmax(0,1fr)); gap:28px}
.cal-month h3{font:600 0.9375rem/1 var(--f-body); letter-spacing:.04em; margin:0 0 12px; text-align:center}
/* as many week rows as the longest month in view, so the months line up and no empty row is left */
.cal-grid{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); grid-template-rows:auto repeat(var(--rows, 6), 50px); gap:2px}
.cal-dow{font:600 0.6875rem/1 var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); text-align:center; padding:6px 0}
.day{position:relative; height:50px; border:0; background:transparent; border-radius:var(--r); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:0}
.day b{font:600 0.9375rem/1 var(--f-body)}
.day small{font:500 0.6562rem/1 var(--f-body); color:var(--ink-2); font-variant-numeric:tabular-nums}
.day:hover:not(:disabled){background:var(--surface-2)}
.day:disabled{cursor:not-allowed; color:color-mix(in oklab, var(--ink) 38%, transparent)}
.day:disabled small{visibility:hidden}
.day.sold b{text-decoration:line-through}
.day .ms{position:absolute; top:4px; right:5px; font:700 0.5938rem/1 var(--f-body); color:var(--accent-ink); font-style:normal}
.day.cta{background-image:repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in oklab, var(--ink) 16%, transparent) 5px 6px)}
.day.cta:disabled small{visibility:visible}
.cal-tip{min-height:22px; margin-top:10px; font-size:0.875rem; color:var(--ink)}
.cal-tip-note{color:var(--ink-2); font-size:0.8125rem}
.cal-tip.has-day .cal-tip-note{display:none}
.legend{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:0.8125rem; color:var(--ink-2); align-items:center}
.legend > span{display:inline-flex; align-items:center; gap:7px}
.lg-sw{display:inline-block; width:18px; height:18px; border:1px solid var(--field-line); border-radius:var(--r);
  background-image:repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in oklab, var(--ink) 22%, transparent) 4px 5px)}
.lg-ms{font:700 0.6875rem/1 var(--f-body); color:var(--accent-ink); font-style:normal}
.lg-sold{font-weight:600; text-decoration:line-through; color:var(--ink)}
.day.in-range{background:color-mix(in oklab, var(--accent) 18%, var(--surface))}
.day.is-start, .day.is-end{background:var(--ink); color:var(--bg)}
.day.is-start small, .day.is-end small{color:var(--bg)}
.day.is-today b{text-decoration:underline; text-underline-offset:4px}
.cal-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); margin-top:16px; padding-top:16px}
.cal-foot .btn{height:48px}
/* legend and buttons share one row next to each other from tablet width on, so the calendar stays short */
.cal-acts{display:flex; gap:8px}
@media (min-width:641px){ .cal-foot{flex-wrap:nowrap} .cal-foot .legend{flex:1 1 auto; min-width:0} .cal-acts{flex:none} }
/* short windows: the same calendar, a little denser, so it still fits without scrolling */
@media (min-width:641px) and (max-height:820px){
  .pop{padding:16px 18px}
  .cal-head{margin-bottom:8px}
  .cal-head .btn{height:40px; width:40px}
  .cal-month h3{margin-bottom:8px}
  .cal-dow{padding:4px 0}
  .cal-grid{grid-template-rows:auto repeat(var(--rows, 6), 40px)}
  .day{height:40px}
  .cal-tip{min-height:20px; margin-top:6px}
  .cal-foot{margin-top:10px; padding-top:10px}
  .cal-foot .btn{height:44px}
  .cal-top{margin-bottom:10px}
  .tabs [role="tab"]{min-height:40px}
  .cal-seg{height:40px}
}
.cal-note{font-size:0.875rem; color:var(--ink-2)}
/* tabs: a row of views with the current one underlined (calendar and price overview) */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line)}
.tabs [role="tab"]{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; margin-bottom:-1px; border:0; border-bottom:2px solid transparent; background:none; color:var(--ink-2); font:600 0.9062rem/1 var(--f-body); cursor:pointer}
.tabs [role="tab"] svg{width:20px; height:20px}
.tabs [role="tab"]:hover{color:var(--ink)}
.tabs [role="tab"][aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}
/* calendar top: the tabs on the left, the search type always at the right end of the same row; the nights of a
   flexible stay appear to its left, or on a row of their own where the width runs short */
.cal-top{display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"tabs stay seg"; align-items:end; gap:12px 20px; margin-bottom:16px}
.cal-top .tabs{grid-area:tabs}
.cal-mode{display:contents}
.cal-seg{grid-area:seg; height:44px}
.cal-seg button{padding:0 16px; letter-spacing:.02em; font-size:0.875rem}
.cal-stay{display:flex; align-items:center; gap:12px}
#calStay{grid-area:stay; justify-self:end}
.cal-stay > span{font:600 0.8125rem/1 var(--f-body); color:var(--ink-2)}
.cal-stay .stepper{gap:10px}
.cal-stay .stepper button{width:36px; height:36px; font-size:1.125rem}
.cal-stay output{min-width:76px; font-size:0.9375rem}
@media (max-width:900px){ .cal-top{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"tabs seg" "stay stay"} }
/* phones: the whole calendar fits its sheet without scrolling. Search type and nights share one row, the label of the
   nights is read out but not shown, rows, gaps and type are a little tighter */
@media (max-width:640px){
  .pop-cal{padding-top:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
  .cal-top{grid-template-columns:auto minmax(0,1fr); grid-template-areas:"tabs tabs" "seg stay"; gap:10px 12px; margin-bottom:10px}
  .tabs [role="tab"]{flex:1; justify-content:center; min-height:40px}
  .cal-seg{height:38px} .cal-seg button{padding:0 11px; font-size:0.8125rem}
  #calStay{justify-self:end}
  #calStay > span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .cal-stay .stepper{gap:6px} .cal-stay .stepper button{width:34px; height:34px} .cal-stay output{min-width:64px; font-size:0.875rem}
  .cal-head{margin-bottom:6px} .cal-head .btn{width:38px; height:38px}
  .cal-note{font-size:0.8125rem; line-height:1.3}
  .cal-month h3{margin-bottom:6px; font-size:0.875rem}
  .cal-dow{padding:3px 0}
  .cal-grid{grid-template-rows:auto repeat(var(--rows, 6), 40px)} .day{height:40px} .day b{font-size:0.875rem} .day small{font-size:0.625rem}
  .cal-tip{min-height:0; margin-top:6px; font-size:0.75rem}
  .cal-tip-note{font-size:0.75rem}
  .cal-foot{margin-top:8px; padding-top:8px; gap:8px} .cal-foot .legend{font-size:0.75rem; gap:6px 12px} .cal-foot .btn{height:44px}
  .cal-acts{width:100%} .cal-acts .btn{flex:1}
}
/* small phones (like 375 × 667): a little lower day rows */
@media (max-width:640px) and (max-height:720px){
  .cal-grid{grid-template-rows:auto repeat(var(--rows, 6), 38px)} .day{height:38px}
}
/* price overview (LeoFlex IBE design set): a bar per arrival day across the full width, the chosen stay in one row below */
.po{display:grid; gap:14px}
.po-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px}
.po-nav{display:flex; align-items:center; gap:4px}
.po-nav span{min-width:210px; text-align:center; font:600 0.875rem/1.2 var(--f-body)}
.po-nav .btn{width:44px; height:44px; padding:0}
.po-legend{margin:0}
.po-k{font:600 0.75rem/1.2 var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.po-chart{display:grid; gap:6px; min-width:0}
.po-bars{position:relative; display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); gap:6px; align-items:end; height:200px; padding-top:44px}
.po-bar{position:relative; height:100%; display:flex; align-items:flex-end; min-width:0; padding:0; border:0; background:none; cursor:pointer}
.po-bar span{display:block; width:100%; height:var(--h); border-radius:max(2px, min(var(--r), 6px)) max(2px, min(var(--r), 6px)) 2px 2px; background:color-mix(in oklab, var(--accent) 55%, var(--surface)); transition:opacity .15s}
.po-bar:hover span{opacity:.82}
.po-bar.is-stay span{background:color-mix(in oklab, var(--accent) 82%, var(--ink))}
.po-bar.is-on span{background:var(--ink); outline:2px solid var(--ink); outline-offset:2px}
.po-bar.is-na:not(.is-on) span{opacity:.42}
.po-bar.is-sold span{background:repeating-linear-gradient(135deg, var(--field-line) 0 2px, transparent 2px 6px)}
.po-tip{position:absolute; z-index:5; display:grid; gap:2px; width:max-content; max-width:220px; margin:0; padding:8px 12px; border-radius:var(--r); background:var(--ink); color:var(--bg); font-size:0.7812rem; line-height:1.35; pointer-events:none; box-shadow:0 8px 20px -8px rgba(0,0,0,.4)}
.po-tip b{font-size:0.8125rem} .po-tip span{font-weight:600} .po-tip small{opacity:.8}
.po-days{display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); gap:6px; font-size:0.7188rem; line-height:1.3; color:var(--ink-2); text-align:center}
.po-days span{display:grid} .po-days b{font-weight:500; color:var(--ink)} .po-days .is-we b{font-weight:700}
.po-lg{display:inline-block; width:12px; height:12px; border-radius:3px; background:color-mix(in oklab, var(--accent) 55%, var(--surface))}
.po-lg-1{background:var(--ink); box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--ink)}
.po-lg-2{background:color-mix(in oklab, var(--accent) 82%, var(--ink))}
.po-lg-3{opacity:.42}
.po-lg-4{background:repeating-linear-gradient(135deg, var(--field-line) 0 2px, transparent 2px 6px); border:1px solid var(--field-line)}
.po-scale{color:var(--ink)}
/* the stay: four cells in a row, each with its own small heading */
.po-sum{display:grid; grid-template-columns:minmax(0,1.2fr) auto minmax(0,1.6fr) auto; align-items:start; padding-top:16px; border-top:1px solid var(--line)}
.po-cell{display:grid; gap:6px; align-content:start; min-width:0; padding:0 24px; border-left:1px solid var(--line)}
.po-cell:first-child{padding-left:0; border-left:0}
.po-cell:last-child{padding-right:0; align-self:center}
.po-cell:empty{display:none}
.po-arr{justify-items:start}
.po-arr b{font:var(--display-weight) 1.312rem/1.25 var(--f-head); letter-spacing:var(--display-track)}
.po-best{display:inline-block; padding:4px 8px; border-radius:var(--r); background:color-mix(in oklab, var(--accent) 16%, var(--surface)); color:var(--accent-ink); font:600 0.75rem/1.2 var(--f-body)}
.po-why{margin:0; font-size:0.9062rem}
.po-price dl{display:flex; flex-wrap:wrap; gap:6px 28px; margin:0}
.po-price dl > div{display:grid; gap:4px}
.po-price dt{font:600 0.75rem/1.2 var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.po-price dd{margin:0; font:600 0.9375rem/1.3 var(--f-body)}
.po-price .po-total dd{font:var(--display-weight) 1.375rem/1.1 var(--f-head)}
.po-note{margin:0; font-size:0.7812rem; color:var(--ink-2)}
.po-take{height:48px; white-space:nowrap}
.po-deals{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px}
.po-deal{display:flex; align-items:center; gap:8px; min-height:40px; padding:6px 12px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); font:500 0.8438rem/1.3 var(--f-body); text-align:left; cursor:pointer}
.po-deal svg{width:18px; height:18px; flex:none; color:var(--accent-ink)}
.po-deal small{font-size:0.75rem; font-weight:600; color:var(--accent-ink)}
.po-deal:hover, .po-deal[aria-pressed="true"]{border-color:var(--ink)}
@media (max-width:1000px){
  .po-sum{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px 0}
  .po-cell:nth-child(3){padding-left:0; border-left:0}
  .po-go{grid-column:1 / -1; padding:0; border-left:0} .po-take{width:100%}
}
@media (max-width:640px){
  .po-bars{gap:3px; height:128px; padding-top:30px} .po-days{gap:3px; font-size:0.6562rem}
  .po-nav .btn{width:38px; height:38px}
  .po-legend{font-size:0.7188rem; gap:4px 10px} .po-legend .po-scale{display:none}
  /* arrival and nights side by side, then the price; the offers come before the button, so taking the dates stays the
     last step */
  .po{grid-template-columns:minmax(0,1fr) auto; gap:10px 12px}
  .po-head, .po-chart, .po-price, .po-deals, .po-go{grid-column:1 / -1}
  .po-sum{display:contents} .po-cell{padding:0; border-left:0; gap:4px}
  .po-sum > .po-cell:nth-child(-n+2){padding-top:10px; border-top:1px solid var(--line)}
  .po-sum > .po-cell:nth-child(2){justify-items:end}
  .po-arr b{font-size:1.062rem}
  .po-price dl{gap:4px 18px} .po-price dd{font-size:0.875rem} .po-price .po-total dd{font-size:1.188rem}
  .po-take{height:44px}
  .po-deals{order:1} .po-go{order:2}
  .po-nav{width:100%} .po-nav span{flex:1; min-width:0}
}
/* small phones (like 375 × 667): lower bars and tighter gaps */
@media (max-width:640px) and (max-height:720px){
  .po{gap:8px 12px} .po-bars{height:92px; padding-top:26px}
  .po-arr b{font-size:1rem} .po-best{padding:3px 6px}
}
.g-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line)}
.g-row:nth-last-child(1 of .g-row){border-bottom:0}
.g-row .lbl b{display:block; font-weight:600}
.g-row .lbl small{color:var(--ink-2); font-size:0.875rem}
.stepper{display:flex; align-items:center; gap:4px}
.stepper button{width:44px; height:44px; border:1px solid var(--field-line); border-radius:var(--r); background:transparent; cursor:pointer; font-size:1.25rem; line-height:1}
.stepper button:disabled{opacity:.35; cursor:not-allowed}
.stepper output{min-width:34px; text-align:center; font:600 1.062rem/1 var(--f-body)}
/* several rooms: one block per room under a header line; one is open, the others show their guests in that line */
.g-room-h{display:none}
.g-rooms.is-multi .g-room-h{display:flex; align-items:center; gap:4px; border-bottom:1px solid var(--line)}
.g-rooms.is-multi .g-room-b{padding-left:12px; border-bottom:1px solid var(--line)}
.g-room-t{flex:1; min-width:0; display:flex; align-items:center; gap:10px; min-height:48px; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.g-room-t b{flex:none; font-weight:600}
.g-room-s{flex:1; min-width:0; color:var(--ink-2); font-size:0.875rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.g-room.is-open .g-room-s{visibility:hidden}
.g-room-t svg{flex:none; width:12px; height:12px; transition:transform .2s var(--ease)}
.g-room-t[aria-expanded="true"] svg{transform:rotate(180deg)}
.g-room-x{flex:none; width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:var(--r); background:none; color:var(--ink-2); cursor:pointer}
.g-room-x:hover{background:var(--surface-2); color:var(--ink)}
.g-room-x svg{width:16px; height:16px}
.g-add{display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:4px; padding:0; border:0; background:none; color:var(--accent-ink); font:600 0.9375rem/1.2 var(--f-body); cursor:pointer}
.g-add svg{width:16px; height:16px}
.g-group{margin:4px 0 0; color:var(--ink-2); font-size:0.875rem}
.g-group a{color:var(--accent-ink); font-weight:600}
.ages{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; padding:4px 0 12px}
.ages:empty{display:none}
.age{display:grid; gap:6px} .age-l{font-size:0.8125rem; color:var(--ink-2)}
.ages .dd, .ages .dd-btn{width:100%}
.ages .dd-btn{height:44px; font:500 0.9375rem/1 var(--f-body); letter-spacing:0; background:var(--surface)}
.pop .done{width:100%; height:48px; margin-top:8px}

/* sections */
section{scroll-margin-top:150px}
.sec{padding-block:clamp(72px, 10vw, 140px)}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 48px; align-items:end; margin-bottom:clamp(36px, 5vw, 64px)}
.sec-head .stack{display:grid; gap:18px; min-width:0}
@media (max-width:720px){ .sec-head{grid-template-columns:1fr} }
.rule{display:flex; align-items:center; gap:14px}
.rule svg{width:18px; height:18px; color:var(--accent)}
.rule::after{content:""; height:1px; flex:1; background:var(--line)}

/* welcome */
.welcome{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(20px, 3vw, 40px); align-items:start}
.welcome-text{grid-column:1 / span 5; display:grid; gap:26px; padding-top:clamp(0px, 4vw, 56px)}
/* --r-frame: the light frame stays concentric with the photo inside and turns square with the design radius at 0 */
.welcome-pics{--frame:clamp(8px, 1.2vw, 14px); --r-frame:calc(var(--r-lg) + min(var(--r) * 100, var(--frame)));
  grid-column:7 / span 6; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:clamp(12px, 2vw, 24px)}
.welcome-pics .a{grid-column:1 / span 6}
.welcome-pics .b{grid-column:3 / span 4; margin-top:calc(-1 * clamp(40px, 8vw, 120px)); border:var(--frame) solid var(--bg); border-radius:var(--r-frame)}
.welcome-pics img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r-lg); background-size:cover}
.welcome-pics .sig{grid-column:1 / -1; max-width:440px; margin:0 0 12px; display:grid; gap:16px}
.welcome-pics .sig img{aspect-ratio:1}
.sig figcaption{display:grid; gap:8px; padding-left:16px; border-left:1px solid var(--accent)}
.sig b{font:var(--display-weight) 1.625rem/1.15 var(--f-head); letter-spacing:var(--display-track); text-wrap:balance}
.sig span{font:600 0.75rem/1.3 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink)}
/* desktop: the square portrait overlaps the reception like a pinned photo, the caption sits beside it,
   so both columns end together */
@media (min-width:901px){
  .welcome-pics .a{grid-row:1}
  .welcome-pics .b{display:none}
  .welcome-pics .sig{grid-column:1 / -1; grid-row:2; max-width:none; margin:0; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 clamp(12px, 2vw, 24px); align-items:end}
  .welcome-pics .sig picture{grid-area:1 / 2; position:relative; z-index:1; margin-top:calc(-1 * clamp(40px, 8vw, 120px)); border:var(--frame) solid var(--bg); border-radius:var(--r-frame)}
  .welcome-pics .sig figcaption{grid-area:1 / 1; justify-items:end; text-align:right; margin-bottom:var(--frame); padding:0 16px 0 0; border-left:0; border-right:1px solid var(--accent)}
}
.facts{grid-column:1 / -1; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--line); margin-top:clamp(40px, 6vw, 80px)}
.fact{padding:26px 24px 0 0; display:grid; gap:6px}
.fact + .fact{padding-left:24px; border-left:1px solid var(--line)}
.fact b small{font:500 .4em/1 var(--f-body); letter-spacing:.02em; margin-left:.2em}
.fact b{font-family:var(--f-display); font-weight:var(--display-weight); font-size:clamp(2.25rem, calc(4vw * var(--fs, 1)), 3.5rem); line-height:1; letter-spacing:var(--display-track)}
.fact span{font-size:0.9375rem; color:var(--ink-2)}
@media (max-width:900px){
  .welcome-text, .welcome-pics{grid-column:1 / -1}
  .facts{grid-template-columns:1fr 1fr}
  .fact:nth-child(3){padding-left:0; border-left:0}
  .fact:nth-child(n+3){border-top:1px solid var(--line); margin-top:26px}
}

/* rooms */
.rooms{background:var(--surface-2)}
.rail-ctl{display:flex; gap:8px}
.rail-ctl .btn{width:var(--ctl); padding:0}
.stay{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:0.9375rem; color:var(--ink-2); min-height:24px}
.stay b{color:var(--ink); font-weight:600}
.rail{position:relative; margin:0; list-style:none; display:grid; grid-auto-flow:column; grid-auto-columns:clamp(280px, 31%, 440px); gap:clamp(16px, 2vw, 28px); overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:max(16px, calc((100vw - var(--wrap)) / 2));
  padding-inline:max(16px, calc((100vw - var(--wrap)) / 2)); padding-bottom:12px; scrollbar-width:thin; overscroll-behavior-x:contain}
@media (min-width:720px){ .rail{padding-inline:max(32px, calc((100vw - var(--wrap)) / 2)); scroll-padding-inline:max(32px, calc((100vw - var(--wrap)) / 2))} }
@media (max-width:720px){ .rail{grid-auto-columns:84%} }
@media (min-width:1280px){ .rail{grid-auto-flow:row; grid-template-columns:repeat(4, minmax(0,1fr)); overflow:visible; max-width:calc(var(--wrap) + 64px); margin-inline:auto; padding-inline:32px} .rail-ctl{display:none} }
.room{position:relative; scroll-snap-align:start; display:flex; flex-direction:column; background:var(--surface); border-radius:var(--r-lg); overflow:hidden; min-width:0}
.room-pic{position:relative; overflow:hidden}
.room-pic img{width:100%; aspect-ratio:4/3; object-fit:cover; background-size:cover; transition:transform .8s var(--ease)}
.room:hover .room-pic img{transform:scale(1.035)}
.room-tag{position:absolute; left:14px; top:14px; background:var(--surface); color:var(--ink); font:600 0.75rem/1 var(--f-body); letter-spacing:.1em; text-transform:uppercase; padding:8px 10px; border-radius:var(--r)}
.room-photos{position:absolute; right:12px; bottom:12px; height:36px; display:inline-flex; align-items:center; gap:7px; padding:0 12px; border:0; border-radius:var(--r);
  background:rgba(12,14,10,.74); color:#fff; font:600 0.8125rem/1 var(--f-body); letter-spacing:.02em; cursor:zoom-in}
.room-photos svg{width:16px; height:16px}
.room-body{display:flex; flex-direction:column; gap:14px; padding:24px; flex:1}
.room-facts{display:flex; flex-wrap:wrap; gap:6px 16px; list-style:none; margin:0; padding:0; font-size:0.9062rem; color:var(--ink-2)}
.room-facts li{display:inline-flex; align-items:center; gap:7px}
.room-facts svg{width:17px; height:17px; color:var(--accent-ink)}
.room-facts .dog-ok{color:var(--accent-ink); font-weight:600}
.room-facts .dog-no{color:var(--ink-2)}
.room-facts .dog-no svg{color:var(--ink-2)}
.price{margin-top:auto; padding-top:16px; border-top:1px solid var(--line); display:grid; gap:4px; min-height:92px}
.price .from{font-size:0.875rem; color:var(--ink-2)}
.price .amt{font:600 1.625rem/1.1 var(--f-body); font-variant-numeric:tabular-nums}
.price .amt small{font:500 0.875rem/1 var(--f-body); color:var(--ink-2)}
.price .rates{display:grid; gap:4px; font-size:0.9062rem}
.price .rates div{display:flex; justify-content:space-between; gap:12px}
.price .rates b{font-variant-numeric:tabular-nums; font-weight:600}
.price .rates div > span:first-child{display:grid; gap:1px; justify-items:start}
/* the board of a rate: with breakfast, half board or room only */
.board{display:inline-flex; align-items:center; gap:5px; font-size:0.7812rem; line-height:1.3; color:var(--ink-2)}
.board svg{width:15px; height:15px; flex:none; color:var(--accent-ink)}
.board.is-ro svg{color:var(--ink-2)}
.notice{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; background:var(--surface-2); border:1px solid var(--field-line); border-radius:var(--r); font-size:0.9375rem; line-height:1.45; color:var(--ink)}
.notice svg{width:18px; height:18px; flex:none; margin-top:2px; color:var(--accent-ink)}
.room.is-off .room-pic img{filter:grayscale(.9); opacity:.5}
.room.is-off .room-pic{background:var(--surface-2)}
.btn:disabled, .btn:disabled:hover{background:var(--surface-2); color:var(--ink-2); border-color:var(--line); cursor:not-allowed}
.left{color:var(--accent-ink); font-weight:600; font-size:0.875rem}
.room-act{display:flex; gap:8px}
.room-act .btn{flex:1; height:48px; padding:0 14px}

/* genuss */
.taste{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(16px, 2.4vw, 32px)}
.taste figure{margin:0; display:grid; gap:14px; align-content:start}
.taste img{width:100%; object-fit:cover; border-radius:var(--r-lg); background-size:cover}
.taste figcaption{display:grid; gap:4px}
.taste figcaption b{font:var(--display-weight) 1.5rem/1.15 var(--f-head); letter-spacing:var(--display-track)}
.taste figcaption span{font-size:0.9375rem; color:var(--ink-2)}
.t-main{grid-column:1 / span 7; grid-row:span 2}
.t-main img{aspect-ratio:4/3.4}
.t-text{grid-column:8 / span 5; display:grid; gap:22px; align-content:start; padding-top:clamp(0px, 2vw, 24px)}
.t-side{grid-column:8 / span 5}
.t-side img{aspect-ratio:16/9}
.t-a{grid-column:1 / span 6} .t-b{grid-column:7 / span 6}
.t-a img, .t-b img{aspect-ratio:16/10}
.hours{display:grid; grid-template-columns:auto 1fr; gap:8px 20px; font-size:0.9688rem; margin:0}
.hours dt{color:var(--ink-2)} .hours dd{margin:0; font-variant-numeric:tabular-nums}
@media (max-width:900px){ .t-main, .t-text, .t-side{grid-column:1 / -1; grid-row:auto} .t-a, .t-b{grid-column:span 12} }
@media (min-width:600px) and (max-width:900px){ .t-a, .t-b{grid-column:span 6} }

/* spa band */
.band{background:var(--band); color:var(--on-band)}
.band .eyebrow{color:var(--band-accent)}
.band .lede, .band .muted{color:var(--on-band-2)}
.spa-hero{position:relative; margin-bottom:clamp(24px, 3vw, 40px)}
.spa-hero img{width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:var(--r-lg); background-size:cover}
@media (max-width:720px){ .spa-hero img{aspect-ratio:4/3} }
.spa-grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(16px, 2.4vw, 32px)}
.spa-text{grid-column:1 / span 5; display:grid; gap:22px; align-content:start}
.spa-list{grid-column:1 / span 5; list-style:none; margin:0; padding:0; border-top:1px solid color-mix(in oklab, var(--on-band) 22%, transparent)}
.spa-list li{display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid color-mix(in oklab, var(--on-band) 22%, transparent); font-size:1rem}
.spa-list li span:last-child{color:var(--band-accent); font-variant-numeric:tabular-nums; text-align:right}
.spa-pics{grid-column:7 / span 6; grid-row:1 / span 2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px, 2vw, 24px); align-content:start}
.spa-pics figure{margin:0; display:grid; gap:10px}
.spa-pics img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r-lg); background-size:cover}
.spa-pics figure:nth-child(2){margin-top:clamp(32px, 6vw, 90px)}
.spa-pics figcaption{font-size:0.9062rem; color:var(--on-band-2)}
@media (max-width:900px){ .spa-text, .spa-list, .spa-pics{grid-column:1 / -1; grid-row:auto} }

/* family */
.family{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(20px, 3vw, 40px); align-items:center}
.family-pic{grid-column:1 / span 7}
.family-pic img{width:100%; aspect-ratio:16/11; object-fit:cover; border-radius:var(--r-lg); background-size:cover}
.family-text{grid-column:9 / span 4; display:grid; gap:22px}
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.ticks li{display:grid; grid-template-columns:22px 1fr; gap:12px; font-size:1rem}
.ticks svg{width:18px; height:18px; margin-top:4px; color:var(--accent-ink)}
@media (max-width:900px){ .family-pic, .family-text{grid-column:1 / -1} }

/* team */
.team{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:clamp(14px, 2vw, 24px)}
.person{margin:0; display:grid; gap:12px; align-content:start}
.person img{width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 20%; border-radius:var(--r-lg); background-size:cover; filter:saturate(.92)}
.person figcaption{display:grid; gap:3px}
.person b{font:var(--display-weight) 1.375rem/1.15 var(--f-head); letter-spacing:var(--display-track)}
.person span{font-size:0.9062rem; color:var(--ink-2)}
.person q{font-size:0.9062rem; line-height:1.5; color:var(--ink); quotes:"„" "“"; margin-top:4px}
:root[lang="en"] .person q{quotes:"“" "”"}
@media (max-width:1100px){ .team{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (max-width:600px){ .team{grid-template-columns:repeat(2, minmax(0,1fr))} }

/* reviews */
.reviews{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 2.4vw, 32px)}
.review{margin:0; display:grid; gap:18px; align-content:start; padding-top:22px; border-top:1px solid var(--ink)}
.review blockquote{margin:0; font:var(--display-weight) clamp(1.312rem, calc(1.8vw * var(--fs, 1)), 1.562rem)/1.32 var(--f-head); letter-spacing:var(--display-track)}
.review figcaption{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:0.9062rem; color:var(--ink-2)}
.stars{display:flex; gap:3px; color:var(--accent-ink)}
.stars svg{width:15px; height:15px}
.example{font:600 0.7188rem/1 var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink)}
@media (max-width:900px){ .reviews{grid-template-columns:1fr} }
/* ---------- guest ratings (LeoFlex IBE design set): strip, badge, side sheet ---------- */
:root{--rev-pos:#2e7d32; --rev-neg:#a35a17}
@media (prefers-color-scheme: dark){ :root:not([data-mode="light"]):not([data-theme="light"]){--rev-pos:#8cc78f; --rev-neg:#e2a56b} }
:root[data-mode="dark"], :root[data-theme="dark"]:not([data-mode="light"]){--rev-pos:#8cc78f; --rev-neg:#e2a56b}
.rv-logo{width:var(--lg-z); height:var(--lg-z); flex:none; display:inline-grid; place-items:center; border-radius:50%; background:var(--lg-bg); color:var(--lg-fg); font:800 calc(var(--lg-z) * .46)/1 system-ui, sans-serif; letter-spacing:-.03em}
.rv-logo.is-long{font-size:calc(var(--lg-z) * .34)}
.rv-logo.is-ring{box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.rv-logo svg{display:block; color:var(--lg-fg)}
.rv-more{width:var(--lg-z); height:var(--lg-z); flex:none; display:inline-grid; place-items:center; margin-left:-4px; border-radius:50%; background:var(--surface-2); color:var(--ink); font:700 calc(var(--lg-z) * .4)/1 var(--f-body)}
.rv-badge .rv-more{background:#fff; color:#1A1D18}
.rv-chip{min-width:var(--z); height:var(--z); flex:none; display:inline-grid; place-items:center; padding:0 calc(var(--z) * .16); background:var(--accent); color:var(--on-accent); border-radius:var(--r); font:700 calc(var(--z) * .4)/1 var(--f-body)}
.rv-strip{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; grid-template-areas:"head grid open"; align-items:center; gap:20px; margin-bottom:clamp(32px, 4vw, 48px); padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.rv-head{grid-area:head; display:flex; align-items:center; gap:12px}
.rv-head-t{display:grid; gap:1px}
.rv-head-t .example{margin-top:3px}
.rv-lab{font:600 1rem/1.375rem var(--f-body)}
.rv-cnt{display:inline-flex; align-items:center; gap:4px; white-space:nowrap; font-size:0.8438rem; line-height:18px; color:var(--ink-2)}
.rv-grid{grid-area:grid; display:grid; grid-template-columns:repeat(var(--n, 6), minmax(0, 1fr)); gap:8px; min-width:0}
.rv-grid .rv-pill-l{display:none}
.rv-pill{display:flex; align-items:center; gap:10px; min-width:0; padding:6px 14px 6px 6px; background:var(--surface-2); border-radius:var(--r)}
.rv-pill > span:not(.rv-logo){display:grid; min-width:0}
.rv-pill b{font:600 0.9375rem/1.188rem var(--f-body); white-space:nowrap}
.rv-pill b small{font-size:0.75rem; font-weight:400; color:var(--ink-2)}
.rv-pill > span > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.7188rem; line-height:15px; color:var(--ink-2)}
.rv-open{grid-area:open; display:inline-flex; align-items:center; gap:6px; min-height:var(--ctl-sm); padding:0 16px; border:0; border-radius:var(--r); background:color-mix(in oklab, var(--accent) 16%, var(--surface)); color:var(--ink); font:600 0.9062rem/1.2 var(--f-body); white-space:nowrap; cursor:pointer}
.rv-open:hover{background:color-mix(in oklab, var(--accent) 26%, var(--surface))}
.rv-open svg{width:18px; height:18px}
@media (max-width:999px){
  .rv-strip{grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"head open" "grid grid"; gap:14px}
  .rv-grid .rv-pill-l{display:inline}
}
@media (max-width:640px){
  .rv-strip{grid-template-columns:minmax(0, 1fr); grid-template-areas:"head" "grid" "open"}
  .rv-open{justify-content:center}
}
.rv-badge{display:inline-flex; align-items:center; gap:10px; max-width:100%; height:48px; padding:0 14px 0 6px; border:1px solid rgba(255,255,255,.4); border-radius:var(--r); background:rgba(12,14,10,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font:600 0.9062rem/1 var(--f-body); white-space:nowrap; cursor:pointer}
.rv-badge .rv-chip{background:#fff; color:#1A1D18}
.rv-badge-t{overflow:hidden; text-overflow:ellipsis}
.rv-badge-t span{font-weight:400; opacity:.85}
.rv-stack{display:inline-flex; padding-left:2px}
.rv-stack .rv-logo + .rv-logo{margin-left:-4px}
.rv-badge.is-sm{height:34px; gap:8px; padding:0 12px 0 4px; border:1px solid var(--line); background:var(--surface); color:var(--ink); -webkit-backdrop-filter:none; backdrop-filter:none; font-size:0.8438rem}
.rv-badge.is-sm .rv-chip{background:var(--accent); color:var(--on-accent)}
.rv-badge.is-sm:hover{background:var(--surface-2)}
.hero-rev:empty{display:none}
@media (max-width:640px){ .rv-stack{display:none} }
dialog.rsheet{margin:0 0 0 auto; width:min(480px, 100vw); max-width:100vw; height:100%; max-height:100%; padding:0; border-radius:0; overflow:hidden}
dialog.rsheet[open]{display:flex; flex-direction:column}
dialog.rsheet::backdrop{background:rgba(0,0,0,.32)}
.rs-head{flex:none; display:flex; align-items:flex-start; gap:8px; padding:20px 12px 8px 24px}
.rs-head > div{flex:1; min-width:0}
.rs-head h2{margin:0; font:var(--display-weight) 1.625rem/1.2 var(--f-head); letter-spacing:var(--display-track)}
.rs-head p{margin:2px 0 0; font-size:0.875rem; color:var(--ink-2)}
.rs-body{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:grid; grid-auto-rows:max-content; gap:16px; padding:12px 24px 28px}
.rs-score{display:flex; align-items:center; gap:14px}
.rs-score > span{display:grid; gap:2px}
.rs-score .rv-lab{font-size:1.125rem; line-height:24px}
.rs-ai{display:flex; align-items:flex-start; gap:10px; margin:0; padding:10px 12px; background:var(--surface-2); border-radius:var(--r); font-size:0.7812rem; line-height:1.5; color:var(--ink-2)}
.rs-ai svg{width:18px; height:18px; flex:none; color:var(--accent-ink)}
.rs-block{display:grid; gap:12px; padding:16px; border:1px solid var(--line); border-radius:var(--r)}
.rs-ph{display:flex; align-items:center; gap:10px; min-width:0}
.rs-ph > span:not(.rv-logo){display:grid; flex:1; min-width:0}
.rs-ph b{font-size:0.9375rem}
.rs-ph small{font-size:0.7812rem; color:var(--ink-2)}
.rs-ps{white-space:nowrap; font-size:1rem}
.rs-ps small{font-weight:400}
.rs-themes{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px}
.rs-tl{display:grid; gap:7px; align-content:start; min-width:0}
.rs-tl-h{display:flex; align-items:center; gap:6px; font:600 0.8438rem/1.3 var(--f-body)}
.rs-tl-h svg{width:16px; height:16px}
.rs-tl.is-pos{--tc:var(--rev-pos)} .rs-tl.is-neg{--tc:var(--rev-neg)}
.rs-tl-h svg, .rs-bar i{color:var(--tc)}
.rs-t{display:grid; gap:3px; min-width:0}
.rs-t > span:first-child{display:flex; align-items:baseline; gap:8px; font-size:0.875rem; line-height:1.35}
.rs-t > span:first-child > span{flex:1; min-width:0}
.rs-t em{font-style:normal; font-size:0.75rem; color:var(--ink-2); white-space:nowrap}
.rs-bar{display:block; height:4px; background:var(--surface-2); overflow:hidden}
.rs-bar i{display:block; height:100%; background:currentColor; opacity:.8}
.rs-note{margin:0; font-size:0.7812rem; line-height:1.5; color:var(--ink-2)}
/* the summary across all portals leads, on a tinted ground; the portals follow under their own heading */
.rs-block.is-all{border-color:color-mix(in oklab, var(--accent) 40%, var(--line)); background:color-mix(in oklab, var(--accent) 6%, var(--surface))}
.rs-sum{margin:0; font-size:0.9375rem; line-height:1.55}
.rs-sub{margin:8px 0 -4px; font:600 0.75rem/1.3 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
@media (max-width:599px){
  dialog.rsheet{margin:auto 0 0; width:100vw; height:92svh; max-height:92svh}
  .rs-head{padding:16px 8px 6px 20px}
  .rs-body{padding:10px 20px calc(24px + env(safe-area-inset-bottom, 0px))}
  .rs-themes{grid-template-columns:minmax(0, 1fr); gap:14px}
}
/* info button and dark tooltip shared by ratings and price comparison */
.tip-btn{display:inline-grid; place-items:center; width:28px; height:28px; margin:-6px 0; padding:0; flex:none; border:0; border-radius:50%; background:transparent; color:var(--accent-ink); cursor:help}
.tip-btn svg{width:17px; height:17px}
.tip-btn[aria-expanded="true"], .tip-btn:hover{background:color-mix(in oklab, var(--accent) 18%, transparent)}
.tip{position:fixed; z-index:220; display:flex; flex-direction:column; width:min(380px, calc(100vw - 24px)); box-sizing:border-box; padding:0; background:#2b2d31; color:#f3f0f2; border-radius:var(--r); box-shadow:0 8px 28px rgba(0,0,0,.28); font-size:0.75rem; line-height:1.45; text-align:left}
.tip[hidden]{display:none}
.tip-in{min-height:0; padding:14px 16px; overflow-y:auto; overscroll-behavior:contain}
.tip::after{content:""; position:absolute; left:calc(var(--ax, 50%) - 7px); width:14px; height:14px; background:#2b2d31; transform:rotate(45deg)}
.tip[data-side="above"]::after{bottom:-6px}
.tip[data-side="below"]::after{top:-6px}
.tip-t{display:block; margin-bottom:4px; font:600 0.875rem/1.25rem var(--f-body)}
.tip-i{display:block; margin-bottom:12px; color:rgba(243,240,242,.76)}
.tip-rows{display:grid; gap:10px; position:relative; z-index:1}
.tip-row{display:flex; align-items:flex-start; gap:10px}
.tip-row > span:last-child{display:grid; gap:1px; min-width:0; padding-top:1px}
.tip-row b{font-size:0.7812rem; line-height:17px}
.tip-row small{font-size:0.75rem; line-height:16px; color:rgba(243,240,242,.76)}
.tip-ic{width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.1)}
.tip-ic svg{width:16px; height:16px}
/* home page price comparison: badge with the saving in the example, statement, example and source line */
.cmp-strip{display:flex; align-items:center; gap:clamp(14px, 2vw, 20px); margin-top:clamp(24px, 3vw, 36px); padding:10px clamp(16px, 2.6vw, 32px) 10px 10px; background:color-mix(in oklab, var(--accent) 14%, var(--surface)); border-radius:var(--r)}
.cmp-badge{flex:none; display:grid; place-items:center; align-content:center; width:92px; height:92px; background:var(--accent); color:var(--on-accent); border-radius:var(--r); text-align:center}
.cmp-badge b{font:700 1.375rem/1 var(--f-body); white-space:nowrap}
.cmp-badge span{margin-top:3px; font-size:0.7188rem; font-weight:600}
.cmp-txt{display:grid; gap:3px; min-width:0}
.cmp-txt > b{font-size:1.062rem; line-height:1.35}
.cmp-ex{display:flex; align-items:flex-end; gap:4px; font-size:0.875rem; line-height:1.4}
.cmp-ex-tip{display:none}
.cmp-legal{display:block; margin:0; font-size:0.7812rem; line-height:1.45; color:var(--ink-2)}
.cmp-legal .tip-btn{vertical-align:middle; margin:-6px 0 -5px 2px}
@media (max-width:640px){
  .cmp-badge{width:76px; height:76px} .cmp-badge b{font-size:1.188rem} .cmp-badge span{font-size:0.6562rem}
  .cmp-txt > b{font-size:0.9375rem}
  .cmp-ex{font-size:0.8125rem}
  .cmp-ex > span:first-child{flex:1 1 auto; min-width:0}
  .cmp-ex-tip{display:inline-flex}
  .cmp-strip .cmp-txt > .cmp-legal{display:none}
}
.spin{width:18px; height:18px; flex:none; display:inline-block; box-sizing:border-box; border:2px solid var(--accent-ink); border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite}
.spin.is-sm{width:12px; height:12px; border-color:var(--ink-2); border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}


/* location */
.loc{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(20px, 3vw, 40px)}
/* the map is a picture with its own labels; the pin marks the hotel with its tip, the emblem on the band colour */
.map{grid-column:1 / span 7; align-self:start; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; max-width:100%; background:var(--surface)}
.map-pan{position:relative; overflow:hidden}
.map-img{position:relative}
/* the supplied map in the site's colours: muted sage, grey-blue water, warm white; darker in the dark theme */
.map-img img{display:block; width:100%; height:auto; background-size:cover; filter:saturate(.45) sepia(.3) contrast(.95) brightness(1.02) var(--map-dim)}
.map-pin{position:absolute; translate:-50% -100%; display:grid; place-items:center; width:42px; height:42px; margin-top:-8px; background:var(--band); color:var(--band-accent); border-radius:calc(var(--r) * 3); box-shadow:0 4px 12px rgba(0,0,0,.28)}
.map-pin::after{content:""; position:absolute; top:100%; left:50%; translate:-50% 0; border:8px solid transparent; border-top-color:var(--band); border-bottom:0}
.map-pin svg{width:26px; height:26px}
.loc-text{grid-column:9 / span 4; display:grid; gap:24px; align-content:start}
.dist{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.dist li{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:0.9688rem}
.dist li span:last-child{font-variant-numeric:tabular-nums; color:var(--ink-2)}
.addr{font-style:normal; display:grid; gap:4px; font-size:0.9688rem}
.addr .sel{user-select:all}
.garage{display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:center; font-size:0.9375rem; color:var(--ink-2)}
.garage img{width:120px; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); background-size:cover}
@media (max-width:900px){ .map, .loc-text{grid-column:1 / -1} }
/* phones: the map shows larger in a frame that moves by swiping, so its labels stay readable */
@media (max-width:640px){ .map-pan{aspect-ratio:4/3; overflow:auto; overscroll-behavior:contain} .map-img{width:1000px} }

/* closing */
.closing{position:relative; color:var(--on-band); background:var(--band); overflow:hidden; isolation:isolate}
.closing .wrap{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:24px 48px; align-items:center; padding-block:clamp(56px, 8vw, 104px)}
.closing .emb{width:clamp(72px, 9vw, 120px); color:var(--band-accent)}
.closing h2{color:var(--on-band)}
.closing .acts{display:flex; flex-wrap:wrap; gap:12px}
.closing .btn-quiet{border-color:color-mix(in oklab, var(--on-band) 55%, transparent); color:var(--on-band)}
@media (max-width:900px){ .closing .wrap{grid-template-columns:1fr} }

/* footer: the newsletter on a light plate, then contact and pages on a dark plate that follows the house colour */
.foot{font-size:0.9688rem}
.foot a{color:inherit; text-decoration:none}
.foot a:hover, .linkish:hover{text-decoration:underline; text-underline-offset:3px}
.linkish{background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; text-align:left}
.foot-news{background:var(--surface); color:var(--ink); border-top:1px solid var(--line)}
.foot-news-in{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px, 5vw, 80px); align-items:start; padding-block:clamp(48px, 7vw, 88px)}
.foot-news-text{display:grid; gap:16px}
.foot-news-text p:not(.eyebrow){margin:0; color:var(--ink-2); max-width:46ch; font-size:1.062rem}
.nl-form{display:grid; gap:16px}
.nl-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end}
.nl-row .btn{min-width:160px}
.nl-form .err{margin:-6px 0 0; font-size:0.875rem; color:var(--bad)}
.nl-form .err:empty{display:none}
.nl-topics .pill > span{height:44px}
.nl-form .check{font-size:0.9062rem; color:var(--ink-2)}
.nl-note{margin:0; font-size:0.8438rem; color:var(--ink-2)}
.nl-done{display:grid; gap:6px; align-self:start; padding:14px 18px 16px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg)}
.nl-done h3{display:flex; align-items:center; gap:10px; margin:0; font:var(--display-weight) 1.375rem/1.2 var(--f-head); letter-spacing:var(--display-track)}
.nl-done .ok{width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:min(50%, var(--r)); background:var(--accent); color:var(--on-accent)}
.nl-done .ok svg{width:16px; height:16px}
.nl-done p{margin:0; color:var(--ink-2)}
.nl-done .linkish{color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px}
.foot-plate{--foot-bg:color-mix(in oklab, var(--band) 78%, #000); background:var(--foot-bg); color:var(--on-band)}
.foot-plate :focus-visible{outline-color:var(--band-accent)}
.foot-main{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px, 5vw, 80px); padding-block:clamp(44px, 6vw, 72px)}
.foot-brand{display:grid; gap:20px; align-content:start; justify-items:start}
.foot .foot-logo{display:block; color:var(--band-accent); line-height:0}
.foot-logo svg{height:72px; width:auto}
.foot-addr{font-style:normal; display:grid; gap:8px; color:var(--on-band-2)}
.foot-addr > a, .foot-addr > span{display:inline-flex; align-items:center; gap:10px}
.foot-addr > span:first-child{display:block}
.foot-addr svg{width:18px; height:18px; flex:none; color:var(--band-accent)}
.foot-addr a:hover{color:var(--on-band)}
.foot-acts{display:flex; flex-wrap:wrap; gap:10px}
.foot-plate .btn-quiet{color:var(--on-band); border-color:color-mix(in oklab, var(--on-band) 45%, transparent); background:transparent}
.foot-plate .btn-quiet:hover{border-color:var(--on-band)}
.foot-cols{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px}
.foot-cols h3{font:600 0.7812rem/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--band-accent); margin:0 0 18px}
.foot-cols ul, .foot-legal{list-style:none; margin:0; padding:0}
.foot-cols ul{display:grid; gap:12px}
.foot-cols a{color:var(--on-band)}
.foot-cols a:hover{color:var(--band-accent)}
.foot-bottom{display:grid; gap:12px; padding-block:0 32px; font-size:0.875rem; color:var(--on-band-2)}
.foot-legal{display:flex; flex-wrap:wrap; gap:8px 24px; padding-top:24px; border-top:1px solid color-mix(in oklab, var(--on-band) 16%, transparent)}
.foot-legal a, .foot-legal button{color:var(--on-band)}
.foot-legal a[aria-current="page"]{color:var(--band-accent)}
.foot-demo, .foot-credit{margin:0}
.foot-credit{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 24px}
.foot-demo .linkish{color:var(--band-accent); text-decoration:underline; text-underline-offset:3px}
@media (max-width:900px){ .foot-news-in, .foot-main{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){
  .nl-row{grid-template-columns:minmax(0,1fr)}
  .nl-row .btn{width:100%}
  .foot-cols{grid-template-columns:repeat(2, minmax(0,1fr))}
  .foot-logo svg{height:60px}
}
@media (max-width:860px){ .foot-bottom{padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px))} }

/* bilingual long-form text: both languages ship in the markup, the active one shows */
:root[lang="en"] [data-l="de"], :root:not([lang="en"]) [data-l="en"]{display:none!important}

/* subpages: the search is docked under the header from the start */
.sub .page-head{padding-top:calc(65px + clamp(32px, 5vw, 64px)); padding-bottom:clamp(28px, 4vw, 48px)}
.sub .page-head-tight{padding-bottom:16px}
.page-head .wrap{display:grid; gap:18px}
.page-head .lede{max-width:62ch}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:0.875rem; color:var(--ink-2)}
.crumbs a{color:var(--ink-2); text-underline-offset:3px}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink); font-weight:500}
.sec-tight{padding-block:clamp(48px, 7vw, 96px)}
.sub-h{font:600 0.7812rem/1.2 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 14px}
.prose{max-width:72ch; display:grid; gap:16px}
.prose h2{font:var(--display-weight) clamp(1.625rem, calc(2.6vw * var(--fs, 1)), 2.125rem)/1.15 var(--f-head); letter-spacing:var(--display-track); margin:24px 0 0; hyphens:auto; overflow-wrap:anywhere}
.prose h3{font:600 1.125rem/1.3 var(--f-body); margin:12px 0 0}
.prose ul{margin:0; padding-left:20px; display:grid; gap:6px}
.prose a{color:var(--accent-ink)}
.note{padding:14px 16px; border-left:3px solid var(--accent); background:var(--surface); border-radius:var(--r); font-size:0.9375rem; color:var(--ink-2)}
.note b{color:var(--ink)}

/* room page */
.room-top{padding-bottom:clamp(40px, 6vw, 80px)}
.room-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px, 4vw, 56px); align-items:start}
.room-gal{display:grid; gap:8px}
.room-gal .gal-main img{aspect-ratio:3/2}
.room-gal .gal-thumb img{aspect-ratio:3/2}
.room-info{display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-content:start}
.room-book{display:grid; gap:14px; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.room-book .price{min-height:0; margin-top:0; padding-top:0; border-top:0}
.room-book .stay{font-size:0.9062rem}
.room-book .room-act{flex-wrap:wrap}
.room-book .room-act .btn{height:52px; flex:1 1 200px}
@media (min-width:901px){ .room-info{position:sticky; top:calc(76px + 65px + 24px)} }
@media (max-width:900px){
  .room-grid{grid-template-columns:minmax(0,1fr)}
  /* phones and tablets: one swipeable strip instead of a large picture with a thumbnail row */
  .room-gal{display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline:max(16px, env(safe-area-inset-left, 0px)); scroll-padding-inline:max(16px, env(safe-area-inset-left, 0px))}
  .room-gal::-webkit-scrollbar{display:none}
  .room-gal .gal-thumbs{display:contents}
  .room-gal .gal-main, .room-gal .gal-thumb{flex:0 0 82%; scroll-snap-align:start}
}
.amen-groups{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(24px, 3vw, 40px); margin-top:clamp(24px, 3vw, 36px)}
.amen-groups .amen{grid-template-columns:1fr}
@media (max-width:900px){ .amen-groups{grid-template-columns:1fr} }
.facts-list{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 clamp(24px, 3vw, 40px); margin:clamp(24px, 3vw, 36px) 0 0}
.facts-list div{display:grid; gap:6px; padding:16px 0; border-top:1px solid var(--field-line)}
.facts-list dt{font-weight:600}
.facts-list dd{margin:0; color:var(--ink-2); font-size:0.9688rem}
@media (max-width:900px){ .facts-list{grid-template-columns:1fr} }
.rail-3{margin-top:clamp(24px, 3vw, 36px)}
@media (min-width:1280px){ .rail-3{grid-template-columns:repeat(3, minmax(0,1fr)); max-width:calc(var(--wrap) + 64px)} }
.price .save{display:flex; align-items:flex-start; gap:8px; color:var(--accent-ink); font-weight:600; font-size:0.9062rem; line-height:1.4}
.price .save svg{width:18px; height:18px; flex:none; margin-top:1px}
.price .save.is-off{color:var(--ink-2); font-weight:500}

/* rooms overview */
.room-rows{display:grid; gap:clamp(48px, 7vw, 96px)}
.room-row{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px, 4vw, 56px); align-items:center}
.room-row.flip .room-row-pic{order:2}
.room-row-pic{position:relative; display:block; border-radius:var(--r-lg); overflow:hidden}
.room-row-pic img{width:100%; aspect-ratio:4/3; object-fit:cover; background-size:cover; transition:transform .8s var(--ease)}
.room-row-pic:hover img{transform:scale(1.03)}
.room-row-body{display:grid; gap:18px; align-content:start}
.room-row-body h2 a{text-decoration:none}
.room-row-body h2 a:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px}
.room-row-foot{display:grid; gap:14px; padding-top:18px; border-top:1px solid var(--line)}
.room-row-foot .price{margin-top:0; padding-top:0; border-top:0; min-height:0}
.room-row-foot .room-act{flex-wrap:wrap} .room-row-foot .room-act .btn{flex:1 1 180px; height:52px}
@media (max-width:900px){ .room-row{grid-template-columns:minmax(0,1fr)} .room-row.flip .room-row-pic{order:0} }
.table-scroll{overflow-x:auto; margin-top:clamp(20px, 3vw, 32px); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface)}
.table-scroll:focus-visible{outline-offset:2px}
.cmp{width:100%; min-width:680px; border-collapse:collapse; font-size:0.9375rem}
.cmp th, .cmp td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.cmp thead th{font:var(--display-weight) 1.25rem/1.2 var(--f-head); letter-spacing:var(--display-track)}
.cmp thead a{text-decoration:none} .cmp thead a:hover{text-decoration:underline}
.cmp tbody th{font-weight:600; color:var(--ink-2); white-space:nowrap}
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td{border-bottom:0}
.cmp b{font-size:1.125rem}
.cmp small{color:var(--ink-2)}

/* content pages */
.sec-flush{padding-top:0}
.sec-near{padding-top:clamp(32px, 5vw, 64px)}
.facts-2{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:700px){ .facts-2{grid-template-columns:1fr} }
.steps{list-style:none; counter-reset:step; margin:clamp(20px, 3vw, 32px) 0 24px; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 2.4vw, 32px)}
.steps li{counter-increment:step; display:grid; gap:8px; align-content:start; padding-top:16px; border-top:1px solid var(--field-line); font-size:0.9688rem; color:var(--ink-2)}
.steps li::before{content:counter(step); font:var(--display-weight) 2.125rem/1 var(--f-display); color:var(--accent-ink)}
.steps b{color:var(--ink); font-size:1.062rem}
@media (max-width:800px){ .steps{grid-template-columns:1fr} }

.offers{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px, 2.4vw, 32px)}
.offer{display:grid; grid-template-rows:auto 1fr; background:var(--surface); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line)}
.offer-wide{grid-column:1 / -1; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:auto}
.offer-pic{position:relative}
.offer-pic img{width:100%; height:100%; aspect-ratio:16/10; object-fit:cover; background-size:cover}
.offer-tag{position:absolute; left:14px; top:14px; background:var(--surface); color:var(--ink); font:600 0.75rem/1 var(--f-body); letter-spacing:.1em; text-transform:uppercase; padding:8px 10px; border-radius:var(--r)}
.offer-body{display:grid; gap:14px; align-content:start; padding:clamp(20px, 2.6vw, 32px)}
.offer-gain{font:600 0.9375rem/1.2 var(--f-body); letter-spacing:.04em; color:var(--accent-ink); margin:0}
.ticks-sm{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:0.9375rem; color:var(--ink-2)}
.ticks-sm li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px}
.ticks-sm svg{width:18px; height:18px; margin-top:3px; color:var(--accent-ink)}
.offer-code{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line)}
.offer-code .btn{height:48px; flex:1 1 auto}
.code-chip{display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 14px; border:1px dashed var(--field-line); border-radius:var(--r); font:700 0.9375rem/1 var(--f-body); letter-spacing:.08em; font-variant-numeric:tabular-nums}
.code-chip svg{width:18px; height:18px; color:var(--accent-ink)}
@media (max-width:900px){ .offers{grid-template-columns:minmax(0,1fr)} .offer-wide{grid-template-columns:minmax(0,1fr)} }

/* content pages: photo and text in alternation, cards, plans and lists */
.split{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(24px, 4vw, 64px); align-items:center}
.split + .split{margin-top:clamp(56px, 8vw, 112px)}
.split-pic{grid-column:1 / span 6; margin:0}
.split-pic img{width:100%; aspect-ratio:4/3.1; object-fit:cover; border-radius:var(--r-lg); background-size:cover}
.split-body{grid-column:7 / span 6; display:grid; gap:18px; align-content:center; max-width:580px}
.split-body p{margin:0}
.split.flip .split-pic{grid-column:7 / span 6; grid-row:1}
.split.flip .split-body{grid-column:1 / span 6; grid-row:1}
@media (max-width:900px){ .split-pic, .split-body, .split.flip .split-pic, .split.flip .split-body{grid-column:1 / -1; grid-row:auto} }
.producers{list-style:none; margin:6px 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:24px; border-top:1px solid var(--line)}
.producers li{display:grid; gap:2px; padding:12px 0; border-bottom:1px solid var(--line)}
.producers b{font-weight:600; font-size:1rem}
.producers li > span{font-size:0.9062rem; color:var(--ink-2)}
@media (max-width:520px){ .producers{grid-template-columns:minmax(0,1fr)} }
.menu-list{list-style:none; counter-reset:menu; margin:4px 0 0; padding:0; display:grid; border-top:1px solid var(--line)}
.menu-list li{counter-increment:menu; display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--line); font-size:1.031rem}
.menu-list li::before{content:counter(menu, upper-roman); font:var(--display-weight) 1.312rem/1 var(--f-head); color:var(--accent-ink)}
.menu-card{display:grid; gap:18px; justify-items:center; max-width:760px; text-align:center}
.menu-card .menu-list{width:100%; margin-top:8px; border-color:color-mix(in oklab, var(--on-band) 22%, transparent)}
.menu-card .menu-list li{grid-template-columns:minmax(0,1fr); justify-items:center; gap:6px; padding:16px 0; border-color:color-mix(in oklab, var(--on-band) 22%, transparent); font:var(--display-weight) clamp(1.25rem, calc(2vw * var(--fs, 1)), 1.562rem)/1.3 var(--f-display); letter-spacing:var(--display-track)}
.menu-card .menu-list li::before{font:600 0.7812rem/1 var(--f-body); letter-spacing:.16em; color:var(--band-accent)}
.duo{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px, 2.4vw, 32px)}
.duo.trio{grid-template-columns:repeat(3, minmax(0,1fr))}
.duo.quad{grid-template-columns:repeat(4, minmax(0,1fr))}
.duo-card{display:grid; grid-template-rows:auto 1fr; margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.duo-card img{width:100%; aspect-ratio:16/10; object-fit:cover; background-size:cover}
.duo-card > div{display:grid; gap:12px; align-content:start; padding:clamp(20px, 2.4vw, 28px)}
.duo-card p{margin:0}
.duo-card .meta{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); font-size:0.875rem; color:var(--ink-2)}
.duo-card .meta span{display:inline-flex; align-items:center; gap:6px}
.duo-card .meta svg{width:16px; height:16px; color:var(--accent-ink)}
@media (max-width:1100px){ .duo.quad{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:900px){ .duo.trio{grid-template-columns:minmax(0,1fr)} }
@media (max-width:760px){ .duo, .duo.quad{grid-template-columns:minmax(0,1fr)} }
.plan{list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--line)}
.plan li{display:grid; grid-template-columns:84px minmax(0,1fr) auto; gap:4px 18px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line)}
.plan time, .plan .t{font:600 1.062rem/1.3 var(--f-body); font-variant-numeric:tabular-nums; color:var(--accent-ink)}
.plan b{font-weight:600}
.plan .where{font-size:0.9062rem; color:var(--ink-2); text-align:right}
.plan .cost{font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.plan small{display:block; font-size:0.875rem; color:var(--ink-2); font-weight:400}
@media (max-width:560px){ .plan li{grid-template-columns:72px minmax(0,1fr)} .plan .where, .plan .cost{grid-column:2; text-align:left} }
.jump{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.jump a{display:inline-flex; align-items:center; height:var(--ctl-sm); padding:0 16px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); font-size:0.9062rem; font-weight:600; text-decoration:none}
.jump a:hover{border-color:var(--ink)}
.tips{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(24px, 4vw, 64px); align-items:start}
.tips .person{max-width:340px}
.tips blockquote{margin:0 0 clamp(20px, 3vw, 32px); font:var(--display-weight) clamp(1.5rem, calc(2.6vw * var(--fs, 1)), 2.125rem)/1.25 var(--f-head); letter-spacing:var(--display-track)}
.routes{display:grid; gap:12px}
.route{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 24px; padding:18px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.route h3{margin:0; font:600 1.125rem/1.3 var(--f-body)}
.route p{margin:0; grid-column:1 / -1; color:var(--ink-2); font-size:0.9688rem}
.route dl{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px 22px; margin:0; font-size:0.9062rem}
.route dt{color:var(--ink-2)} .route dd{margin:0 0 0 6px; font-weight:600; font-variant-numeric:tabular-nums}
.route dl div{display:flex}
@media (max-width:480px){ .route{grid-template-columns:minmax(0,1fr)} .route .level{grid-row:1; justify-self:start} }
.level{display:inline-flex; align-items:center; height:28px; padding:0 10px; border-radius:var(--r); font:600 0.7812rem/1 var(--f-body); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.level.l1{background:color-mix(in oklab, #4f7a3a 18%, var(--surface)); color:color-mix(in oklab, #4f7a3a 70%, var(--ink))}
.level.l2{background:color-mix(in oklab, var(--accent) 22%, var(--surface)); color:var(--accent-ink)}
.level.l3{background:color-mix(in oklab, var(--bad) 16%, var(--surface)); color:var(--bad)}
@media (max-width:900px){ .tips{grid-template-columns:minmax(0,1fr)} .tips .person{max-width:260px} }
.ways{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 2.4vw, 32px)}
.way{display:grid; gap:12px; align-content:start; padding:clamp(20px, 2.6vw, 32px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.way svg.ic{width:36px; height:36px; color:var(--accent-ink)}
.way p{margin:0; color:var(--ink-2)}
.way ul{margin:0; padding-left:1.1em; color:var(--ink-2); display:grid; gap:6px}
@media (max-width:900px){ .ways{grid-template-columns:minmax(0,1fr)} }
.kv{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 32px; margin:0; border-top:1px solid var(--line)}
.kv div{display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:0.9688rem}
.kv dt{color:var(--ink-2)} .kv dd{margin:0; font-weight:600; text-align:right; font-variant-numeric:tabular-nums}
@media (max-width:700px){ .kv{grid-template-columns:minmax(0,1fr)} }

/* forms on content pages: one field height, own checkboxes and choice pills */
.form-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
.form-grid .wide{grid-column:1 / -1}
@media (max-width:560px){ .form-grid{grid-template-columns:minmax(0,1fr)} }
.fld{display:grid; gap:6px; align-content:start; min-width:0}
.fld > label, .fset > legend{font-size:0.9062rem; font-weight:600}
.fld .opt{font-weight:400; color:var(--ink-2)}
.fld input, .fld textarea{width:100%; height:var(--ctl); padding:0 16px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); font:inherit; font-size:1rem}
.fld textarea{height:auto; min-height:132px; padding:14px 16px; resize:vertical; line-height:1.5}
.fld input:focus-visible, .fld textarea:focus-visible{outline:2px solid var(--accent-ink); outline-offset:1px}
.fld [aria-invalid="true"]{border-color:var(--bad); box-shadow:inset 0 0 0 1px var(--bad)}
.fld .err{margin:0; min-height:0; font-size:0.875rem; color:var(--bad)}
.fld .err:empty{display:none}
.fld .hint{display:flex; justify-content:space-between; gap:12px; font-size:0.8438rem; color:var(--ink-2)}
.fset{border:0; margin:0; padding:0; min-width:0; display:grid; gap:12px}
.fset > legend{padding:0; margin-bottom:12px}
.pills{display:flex; flex-wrap:wrap; gap:8px}
.pill{position:relative}
.pill input{position:absolute; opacity:0; width:1px; height:1px}
.pill > span{display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 18px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); font-weight:600; font-size:0.9375rem; cursor:pointer}
.pill > span svg{width:16px; height:16px; display:none}
.pill input:checked + span{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.pill input:checked + span svg{display:block}
.pill input:focus-visible + span{outline:2px solid var(--accent-ink); outline-offset:3px}
.check{display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; align-items:start; font-size:0.9688rem; cursor:pointer}
.check input{appearance:none; -webkit-appearance:none; width:24px; height:24px; margin:0; border:1.5px solid var(--field-line); border-radius:min(6px, var(--r)); background:var(--surface); display:grid; place-items:center; cursor:pointer}
.check input::after{content:""; width:12px; height:7px; border-left:2px solid var(--bg); border-bottom:2px solid var(--bg); transform:translateY(-2px) rotate(-45deg); opacity:0}
.check input:checked{background:var(--ink); border-color:var(--ink)}
.check input:checked::after{opacity:1}
.check input[aria-invalid="true"]{border-color:var(--bad); box-shadow:0 0 0 1px var(--bad)}
.check a{color:var(--accent-ink)}

.iq{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(28px, 5vw, 72px); align-items:start}
.iq-form{display:grid; gap:32px}
.iq-stay{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; padding:16px 18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.iq-stay > div{display:grid; gap:2px; min-width:0}
.iq-stay b{font-size:1.062rem}
.iq-stay span{font-size:0.9062rem; color:var(--ink-2)}
.iq-side{position:sticky; top:calc(76px + 65px + 24px); display:grid; gap:24px}
.iq-side .steps{grid-template-columns:minmax(0,1fr); margin:0}
.iq-host{display:grid; grid-template-columns:88px minmax(0,1fr); gap:16px; align-items:center; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.iq-host img{width:88px; height:88px; object-fit:cover; object-position:50% 20%; border-radius:var(--r)}
.iq-host p{margin:0; font-size:0.9375rem; color:var(--ink-2)}
.iq-host b{display:block; color:var(--ink); font-size:1rem}
.iq-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px}
.iq-actions .btn{min-width:240px}
.iq-done{display:grid; gap:18px; justify-items:start; padding:clamp(24px, 4vw, 40px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.iq-done .ok{width:56px; height:56px; display:grid; place-items:center; border-radius:min(50%, var(--r-lg)); background:var(--ink); color:var(--bg)}
.iq-done .ok svg{width:28px; height:28px}
.iq-done dl{width:100%}
@media (max-width:960px){ .iq{grid-template-columns:minmax(0,1fr)} .iq-side{position:static} }

.gal-filter{display:flex; flex-wrap:wrap; gap:8px}
.gal-filter button{display:inline-flex; align-items:center; gap:8px; height:var(--ctl-sm); padding:0 16px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); font-weight:600; font-size:0.9062rem; cursor:pointer}
.gal-filter button small{font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums}
.gal-filter button[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.gal-filter button[aria-pressed="true"] small{color:inherit; opacity:.75}
.gal-count{margin:14px 0 0; font-size:0.9062rem; color:var(--ink-2)}
.gal-grid{list-style:none; margin:clamp(20px, 3vw, 32px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-flow:dense; gap:clamp(8px, 1.2vw, 16px)}
.gal-grid li{position:relative; min-width:0}
.gal-grid li.w2{grid-column:span 2; grid-row:span 2; aspect-ratio:4/3}
.gal-grid li.w2 button{position:absolute; inset:0}
.gal-grid li.w2 picture{height:100%}
.gal-grid button{position:relative; display:block; width:100%; height:100%; padding:0; border:0; background:none; border-radius:var(--r-lg); overflow:hidden; cursor:zoom-in}
.gal-grid img{width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; background-size:cover; transition:transform .6s var(--ease)}
.gal-grid li.w2 img{height:100%; aspect-ratio:auto}
.gal-grid button:hover img{transform:scale(1.04)}
.gal-grid .cap{position:absolute; inset:auto 0 0 0; padding:28px 14px 12px; background:linear-gradient(transparent, rgba(8,9,7,.72)); color:#fff; font-size:0.875rem; line-height:1.35; text-align:left; opacity:0; transition:opacity .3s var(--ease)}
.gal-grid button:hover .cap, .gal-grid button:focus-visible .cap{opacity:1}
@media (max-width:900px){ .gal-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (hover:none){ .gal-grid .cap{display:none} }

.faq-search{position:relative; max-width:560px; margin-top:6px}
.faq-search svg{position:absolute; left:14px; top:14px; width:22px; height:22px; color:var(--ink-2)}
.faq-search input{width:100%; height:52px; padding:0 16px 0 46px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); font:inherit; font-size:1rem}
.faq-count{margin:8px 0 0; min-height:1.3em; font-size:0.875rem; color:var(--ink-2)}
.faq{display:grid; gap:clamp(28px, 4vw, 44px); max-width:880px}
.faq-group{display:grid}
.faq-group .sub-h{margin-bottom:6px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{position:relative; display:block; padding:18px 44px 18px 0; font-weight:600; font-size:1.062rem; line-height:1.4; cursor:pointer; list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:""; position:absolute; right:8px; top:24px; width:10px; height:10px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); transition:transform .2s var(--ease)}
.faq-item[open] summary::after{transform:translate(0, 4px) rotate(-135deg)}
.faq-a{padding:0 0 20px; color:var(--ink-2); max-width:70ch}
.faq-a a{color:var(--accent-ink)}
.faq-none{margin:0; padding:20px; background:var(--surface); border-radius:var(--r)}
.ask{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 40px}
.ask > div{display:grid; gap:10px; max-width:60ch}

.fam-photo{margin:0 auto; display:grid; gap:12px}
.fam-photo img{width:100%; aspect-ratio:16/8; object-fit:cover; object-position:50% 35%; border-radius:var(--r-lg); background-size:cover}
.fam-photo figcaption{font-size:0.9062rem; color:var(--ink-2)}
@media (max-width:720px){ .fam-photo img{aspect-ratio:4/3} }
/* family timeline: one line through six decades; photos alternate sides on wide screens, chapters mark the generations */
.tl-intro{display:grid; gap:18px; justify-items:center; max-width:760px; margin:0 auto clamp(48px, 7vw, 96px); text-align:center}
.tl{--tl-x:50%; --tl-p:0; position:relative; list-style:none; margin:0; padding:0; display:grid; gap:clamp(56px, 8vw, 112px)}
.tl::before, .tl::after{content:""; position:absolute; left:var(--tl-x); top:0; transform:translateX(-50%); pointer-events:none}
.tl::before{bottom:0; width:1px; background:var(--field-line)}
.tl::after{width:3px; height:calc(var(--tl-p) * 100%); background:var(--accent)}
.tl-item{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(56px, 9vw, 128px); align-items:center}
.tl-item::before{content:""; position:absolute; z-index:1; left:var(--tl-x); top:50%; width:17px; height:17px; transform:translate(-50%, -50%);
  background:var(--bg); border:3px solid var(--accent); border-radius:min(50%, var(--r)); transition:background-color .4s var(--ease)}
.tl-item.is-past::before{background:var(--accent)}
.tl-pic{position:relative; display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 18px 40px -24px rgba(12,14,10,.55)}
.tl-pic img{width:100%; aspect-ratio:16/9; object-fit:cover; background-size:cover; transition:transform .7s var(--ease)}
.tl-pic:hover img{transform:scale(1.035)}
.tl-body{display:grid; gap:12px; align-content:center; max-width:500px}
.tl-item.flip .tl-pic{order:2}
.tl-item.flip .tl-body{justify-self:end; text-align:right}
.tl-year{font:var(--display-weight) clamp(3.625rem, calc(7vw * var(--fs, 1)), 6.75rem)/.9 var(--f-display); letter-spacing:var(--display-track); color:var(--accent-ink)}
.tl-body h3{margin:4px 0 0; font:var(--display-weight) clamp(1.5rem, calc(2.2vw * var(--fs, 1)), 1.875rem)/1.15 var(--f-head); letter-spacing:var(--display-track)}
.tl-body p{margin:0; color:var(--ink-2)}
.tl-mini .tl-body{grid-column:2; padding:22px 24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.tl-mini.flip .tl-body{grid-column:1; grid-row:1}
.tl-mini .tl-year{font-size:clamp(2.5rem, calc(4vw * var(--fs, 1)), 3.5rem)}
.tl-era{position:relative; z-index:1; justify-self:center; display:grid; gap:6px; justify-items:center; padding:18px 28px; text-align:center;
  background:var(--band); color:var(--on-band); border-radius:var(--r-lg)}
.tl-era > span{font:600 0.7812rem/1 var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--band-accent)}
.tl-era b{font:var(--display-weight) clamp(1.5rem, calc(2.4vw * var(--fs, 1)), 2rem)/1.1 var(--f-head); letter-spacing:var(--display-track)}
/* reveal: only when the script runs and motion is welcome; without it everything is simply there */
.tl.tl-anim .tl-item > *{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.tl.tl-anim .tl-item > .tl-body{transition-delay:.12s}
.tl.tl-anim .tl-item.is-in > *{opacity:1; transform:none}
@media (max-width:860px){
  .tl{--tl-x:9px; gap:44px; padding-left:36px}
  .tl::before, .tl::after{left:9px}
  .tl-item, .tl-item.flip{grid-template-columns:minmax(0,1fr); gap:18px}
  .tl-item::before{left:-27px; top:6px; transform:translateX(-50%)}
  .tl-item.flip .tl-pic{order:0}
  .tl-item.flip .tl-body{justify-self:start; text-align:left}
  .tl-mini .tl-body, .tl-mini.flip .tl-body{grid-column:1; grid-row:auto}
  .tl-era{justify-self:start; justify-items:start; text-align:left; margin-left:-36px; padding:14px 18px}
  .tl-year{font-size:clamp(2.875rem, calc(13vw * var(--fs, 1)), 4rem)}
}
.team-4{grid-template-columns:repeat(4, minmax(0,1fr))}
@media (max-width:900px){ .team-4{grid-template-columns:repeat(2, minmax(0,1fr))} }
.values{list-style:none; margin:clamp(24px, 3vw, 40px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px, 3vw, 40px)}
.values li{display:grid; gap:10px; align-content:start}
.values svg{width:32px; height:32px; color:var(--accent-ink)}
.values h3{margin:0; font:var(--display-weight) 1.625rem/1.15 var(--f-head); letter-spacing:var(--display-track)}
.values p{color:var(--ink-2)}
@media (max-width:800px){ .values{grid-template-columns:minmax(0,1fr)} }

/* settings dial (left) and concierge (right): NEO pattern */
.fab{position:relative; width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center; border:1px solid color-mix(in oklab, var(--on-band) 18%, transparent); border-radius:var(--r); cursor:pointer;
  background:var(--band); color:var(--on-band); box-shadow:0 12px 32px -12px rgba(0,0,0,.55)}
.fab svg{width:26px; height:26px}
.fab-badge{position:absolute; top:-7px; right:-7px; min-width:22px; height:22px; padding:0 6px; display:grid; place-items:center; background:var(--accent); color:var(--on-accent); border-radius:11px; font:700 0.75rem/1 var(--f-body); box-shadow:0 0 0 2px var(--bg)}
.dial{position:fixed; z-index:70; left:max(20px, calc(16px + env(safe-area-inset-left, 0px))); bottom:calc(20px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.dial-acts{display:grid; gap:8px}
.dial-act{display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 18px 0 14px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink);
  font:600 0.9062rem/1 var(--f-body); cursor:pointer; box-shadow:0 10px 26px -14px rgba(0,0,0,.45)}
.dial-act svg{width:20px; height:20px; color:var(--accent-ink)}
.dial-act:hover{border-color:var(--ink)}
.fab .ic-close{display:none} .fab[aria-expanded="true"] .ic-open{display:none} .fab[aria-expanded="true"] .ic-close{display:block}
.cw{position:fixed; z-index:72; right:max(20px, calc(16px + env(safe-area-inset-right, 0px))); bottom:calc(20px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; align-items:flex-end; gap:12px}
.cw-fab{width:auto; padding:0 20px 0 14px; gap:10px; font:600 0.9375rem/1 var(--f-body); letter-spacing:.02em}
.cw-fab svg{color:var(--band-accent); width:28px; height:28px}
@media (max-width:520px){ .cw-fab span{display:none} .cw-fab{width:56px; padding:0} .cw-panel:not([hidden]) + .cw-fab{display:none} }
.cw-panel{width:min(400px, calc(100vw - 32px)); height:min(620px, calc(100svh - 120px)); display:flex; flex-direction:column; background:var(--surface); color:var(--ink);
  border:1px solid var(--field-line); border-radius:var(--r-lg); box-shadow:0 30px 70px -25px rgba(0,0,0,.5); overflow:hidden}
.cw-panel[hidden]{display:none}
.cw-head{display:flex; align-items:center; gap:12px; padding:14px 14px 14px 18px; background:var(--band); color:var(--on-band)}
.cw-head .av{width:42px; height:42px; display:grid; place-items:center; color:var(--band-accent); border:1px solid color-mix(in oklab, var(--band-accent) 50%, transparent); border-radius:calc(var(--r) * 3); flex:none}
.cw-head .av svg{width:26px; height:26px}
.cw-head b{display:block; font-weight:600}
.cw-head small{display:block; font-size:0.8125rem; color:var(--on-band-2)}
.cw-head .btn-x{margin-left:auto; color:var(--on-band)}
.cw-body{flex:1; overflow:auto; padding:18px; display:grid; gap:12px; align-content:start; overscroll-behavior:contain}
.cw-log{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.cw-msg{max-width:88%; padding:11px 14px; font-size:0.9375rem; line-height:1.5; border-radius:var(--r-lg); overflow-wrap:anywhere}
.cw-msg.user{justify-self:end; background:var(--ink); color:var(--bg)}
.cw-msg.bot{justify-self:start; background:var(--surface-2)}
.cw-msg.bot ul{margin:6px 0; padding-left:18px}
.cw-msg p + p, .cw-msg p + ul, .cw-msg ul + p{margin-top:6px}
.cw-msg .acts{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.cw-msg .acts .btn{height:40px; padding:0 14px; font-size:0.875rem; background:var(--surface); border-color:var(--field-line); color:var(--ink)}
.cw-think{justify-self:start; display:inline-flex; gap:5px; padding:14px 16px; background:var(--surface-2); border-radius:var(--r-lg)}
.cw-think i{width:7px; height:7px; background:var(--ink-2); animation:blink 1s infinite}
.cw-think i:nth-child(2){animation-delay:.15s} .cw-think i:nth-child(3){animation-delay:.3s}
@keyframes blink{ 0%,100%{opacity:.25} 50%{opacity:1} }
.cw-sugg{display:flex; flex-wrap:wrap; gap:6px}
/* what the concierge is doing on the page, and the places it changed, which light up for a moment */
.cw-act{display:flex; align-items:center; gap:8px; margin:0; font-size:0.8438rem; color:var(--ink-2)}
.cw-act::before{content:""; width:8px; height:8px; flex:none; border-radius:50%; background:var(--accent); animation:blink 1s infinite}
.cw-mark{outline:2px solid var(--accent); outline-offset:3px; animation:cw-mark 1.8s var(--ease) both}
@keyframes cw-mark{0%{outline-color:transparent} 15%,70%{outline-color:var(--accent)} 100%{outline-color:transparent}}
@media (prefers-reduced-motion: reduce){ .cw-mark{animation:none} .cw-act::before{animation:none} }
.cw-sugg button{height:40px; padding:0 12px; border:1px solid var(--field-line); border-radius:var(--r); background:transparent; font:500 0.875rem/1.2 var(--f-body); cursor:pointer; text-align:left}
.cw-sugg button:hover{border-color:var(--ink)}
.cw-gate{display:grid; gap:14px; padding:16px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface-2); font-size:0.9375rem}
.cw-gate b{font-size:1rem}
.cw-gate .row{display:flex; flex-wrap:wrap; gap:8px}
.cw-gate .btn{height:44px}
.cw-form{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line)}
.cw-form input{flex:1; min-width:0; height:48px; padding:0 14px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); font-size:1rem}
.cw-form .btn{height:48px; padding:0 18px}
.cw-note{padding:0 14px 12px; font-size:0.7812rem; color:var(--ink-2)}
@media (max-width:520px){ .cw-panel{position:fixed; inset:auto 0 0 0; width:100%; height:min(88svh, 720px); border-radius:var(--r-lg) var(--r-lg) 0 0; border-left:0; border-right:0; border-bottom:0; padding-bottom:env(safe-area-inset-bottom, 0px)} }

/* consent */
.cc{position:fixed; z-index:85; left:50%; transform:translateX(-50%); bottom:calc(20px + env(safe-area-inset-bottom, 0px)); width:min(620px, calc(100vw - 32px)); max-height:calc(100svh - 40px); overflow:auto;
  background:var(--surface); color:var(--ink); border:1px solid var(--field-line); border-radius:var(--r-lg); box-shadow:0 30px 80px -25px rgba(0,0,0,.55); padding:22px; display:grid; gap:16px}
.cc-head{display:grid; grid-template-columns:auto 1fr; gap:14px}
.cc-ico{width:44px; height:44px; display:grid; place-items:center; background:var(--band); color:var(--band-accent); border-radius:calc(var(--r) * 3)}
.cc-ico svg{width:24px; height:24px}
.cc h2{font:var(--display-weight) 1.625rem/1.15 var(--f-head); letter-spacing:var(--display-track); margin:0 0 6px}
.cc p{font-size:0.9375rem; color:var(--ink-2)}
.cc .when-settings{display:none} .cc.is-settings .when-settings{display:inline} .cc.is-settings .when-banner{display:none}
.cc-cats{display:grid; border-top:1px solid var(--line)}
.cc-cat{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line)}
.cc-cat b{font-weight:600} .cc-cat p{font-size:0.875rem; margin-top:2px}
.cc-acts{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
.cc-acts .btn{height:48px; padding:0 10px; border-color:var(--ink); white-space:normal; text-align:center; line-height:1.15}
@media (max-width:560px){
  .cc{left:0; transform:none; width:100%; bottom:0; gap:12px; padding:16px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); border-radius:var(--r-lg) var(--r-lg) 0 0; border-left:0; border-right:0; border-bottom:0}
  .cc-head{grid-template-columns:1fr} .cc-ico{display:none}
  .cc h2{font-size:1.375rem} .cc p{font-size:0.875rem} .cc-cat p{font-size:0.8125rem}
  .cc-cat{padding:9px 0}
  .cc-acts .btn{height:52px; font-size:0.8438rem; padding:0 6px}
}
.switch{position:relative; width:52px; height:30px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface-2); cursor:pointer; padding:0; flex:none}
.switch span{position:absolute; top:3px; left:3px; width:22px; height:22px; background:var(--ink-2); border-radius:var(--r); transition:transform .2s var(--ease), background-color .2s var(--ease)}
.switch[aria-checked="true"]{background:var(--ink); border-color:var(--ink)}
.switch[aria-checked="true"] span{transform:translateX(22px); background:var(--bg)}
.switch:disabled{cursor:not-allowed; opacity:.6}

/* accessibility panel */
.ax-sec{display:grid; gap:2px}
.ax-sec h3{font:600 0.7812rem/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 8px}
.ax-profiles{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
.ax-profile{display:grid; justify-items:center; align-content:center; gap:8px; min-height:84px; padding:12px 6px; border:1px solid var(--field-line); border-radius:var(--r); background:transparent; color:var(--ink);
  font:600 0.8438rem/1.2 var(--f-body); text-align:center; cursor:pointer}
.ax-profile svg{width:24px; height:24px; color:var(--accent-ink)}
.ax-profile[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.ax-profile[aria-pressed="true"] svg{color:var(--bg)}
.ax-size{display:grid; gap:10px; padding:4px 0 14px; border-bottom:1px solid var(--line)}
.ax-size > span{font-weight:600; font-size:0.9688rem}
.ax-size .seg{width:100%; height:44px} .ax-size .seg button{flex:1}
.ax-toggle{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; width:100%; min-height:62px; padding:10px 0; border:0; border-bottom:1px solid var(--line);
  background:none; color:var(--ink); text-align:left; cursor:pointer; font:inherit}
.ax-toggle b{display:block; font-weight:600; font-size:0.9688rem}
.ax-toggle small{display:block; font-size:0.8438rem; color:var(--ink-2)}
.ax-toggle .switch{pointer-events:none}
.ax-toggle[aria-checked="true"] .switch{background:var(--ink); border-color:var(--ink)}
.ax-toggle[aria-checked="true"] .switch span{transform:translateX(22px); background:var(--bg)}
.ax-toggle:disabled{opacity:.55; cursor:not-allowed}
.ax-foot{display:grid; gap:12px; font-size:0.875rem; color:var(--ink-2)}

/* accessibility settings applied to the page */
:root{font-size:calc(100% * var(--fs, 1))}
:root{filter:var(--a11y-filter, none)}
:root[data-a11y-contrast]{--ink-2:var(--ink); --line:var(--field-line); --field-line:var(--ink)}
:root[data-a11y-contrast] .hero-media::after{background:rgba(6,7,5,.74)}
:root[data-a11y-font] body, :root[data-a11y-font] body *{font-family:Verdana, Tahoma, "Segoe UI", Arial, sans-serif!important; letter-spacing:0!important}
:root[data-a11y-spacing] body{letter-spacing:.05em; word-spacing:.16em}
:root[data-a11y-spacing] p, :root[data-a11y-spacing] li, :root[data-a11y-spacing] dd, :root[data-a11y-spacing] blockquote{line-height:2!important}
:root[data-a11y-left] body *{text-align:left!important}
:root[data-a11y-headings] h1, :root[data-a11y-headings] h2, :root[data-a11y-headings] h3{outline:2px dashed var(--accent-ink); outline-offset:6px}
:root[data-a11y-links] a{text-decoration:underline!important; text-decoration-thickness:2px!important; text-underline-offset:.22em}
:root[data-a11y-cursor], :root[data-a11y-cursor] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M4 3l28 14-12 3-5 13z' fill='%23111' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, auto!important}
:root[data-a11y-focus] :focus-visible{outline:4px solid var(--accent-ink)!important; outline-offset:4px!important; box-shadow:0 0 0 9px color-mix(in oklab, var(--accent) 35%, transparent)}
:root[data-a11y-motion] *, :root[data-a11y-motion] *::before, :root[data-a11y-motion] *::after, :root[data-a11y-motion] ::backdrop{animation:none!important; transition:none!important; scroll-behavior:auto!important}
:root[data-a11y-noimg] img{visibility:hidden}
:root[data-a11y-noimg] picture, :root[data-a11y-noimg] .hero-media{background:var(--surface-2)}
.ax-line{position:fixed; left:0; right:0; top:0; height:4px; z-index:96; background:var(--accent); box-shadow:0 0 0 1px var(--bg); pointer-events:none; transform:translateY(40vh)}
.ax-mask{position:fixed; inset:0; z-index:95; pointer-events:none; --t:40vh; --b:calc(40vh + 92px)}
.ax-mask span{position:absolute; left:0; right:0; background:rgba(12,14,10,.62)}
.ax-mask span:first-child{top:0; height:var(--t)}
.ax-mask span:last-child{top:var(--b); bottom:0}
.ax-speaking{outline:3px solid var(--accent)!important; outline-offset:4px; background:color-mix(in oklab, var(--accent) 14%, transparent)}

/* design studio */
.studio{position:fixed; z-index:75; top:0; bottom:0; left:0; width:min(400px, 100%); background:var(--surface); color:var(--ink); border-right:1px solid var(--field-line);
  padding:calc(20px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); overflow:auto; display:grid; gap:26px; align-content:start;
  box-shadow:24px 0 60px -30px rgba(0,0,0,.45)}
.studio-head{display:flex; justify-content:space-between; align-items:start; gap:16px}
.studio h2{font:var(--display-weight) 1.875rem/1.1 var(--f-display); margin:0}
.studio p{font-size:0.9062rem; color:var(--ink-2)}
.studio fieldset{border:0; margin:0; padding:0; display:grid; gap:10px; min-width:0}
.studio legend{font:600 0.7812rem/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); padding:0; margin-bottom:10px}
.studio .seg{width:100%}
.studio .seg button{flex:1}
.swatches{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.sw{position:relative; width:44px; height:44px; border-radius:var(--r); border:1px solid var(--field-line); cursor:pointer; padding:0; background:var(--c)}
.sw[aria-checked="true"]{outline:2px solid var(--ink); outline-offset:3px}
.sw-custom{display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 12px 0 5px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); font:500 0.875rem/1 var(--f-body); cursor:pointer}
.sw-custom[aria-checked="true"]{outline:2px solid var(--ink); outline-offset:3px}
.sw-custom i{width:32px; height:32px; border-radius:var(--r); background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.fonts{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
.fonts button{display:grid; gap:2px; justify-items:start; min-height:60px; padding:8px 12px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); text-align:left; cursor:pointer}
.fonts button[aria-pressed="true"]{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.fonts .fs{font-size:1.312rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.fonts small{font-size:0.7812rem; color:var(--ink-2)}
/* colour picker (design set: field, hue slider, swatches) */
dialog.cpick{width:min(340px, calc(100vw - 24px)); max-width:calc(100vw - 24px); padding:0}
.cp{display:grid; gap:14px; padding:16px}
.cp-head{display:flex; align-items:center; gap:12px}
.cp-dot{width:40px; height:40px; flex:none; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.cp-head > span:nth-child(2){display:grid; gap:2px; flex:1; min-width:0}
.cp-head b{font-size:1rem}
.cp-head small{font:500 0.8125rem/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color:var(--ink-2)}
.cp-sv{position:relative; height:160px; cursor:crosshair; touch-action:none; background:linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--h), 100%, 50%)); border-radius:var(--r)}
.cp-sv i{position:absolute; left:calc(var(--s) * 100% - 9px); top:calc((1 - var(--v)) * 100% - 9px); width:18px; height:18px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.45); pointer-events:none}
.cp-row{display:flex; align-items:center; gap:14px}
.cp-hue{position:relative; flex:1; height:12px; border-radius:6px; cursor:pointer; touch-action:none; background:linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)}
.cp-hue i{position:absolute; top:-5px; left:calc(var(--h) / 360 * 100% - 11px); width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); pointer-events:none}
.cp-sv:focus-visible, .cp-hue:focus-visible{outline:2px solid var(--ink); outline-offset:4px}
.cp-sws{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:6px; padding:8px; border:1px solid var(--line); border-radius:var(--r)}
.cp-sws button{height:28px; padding:0; border:0; border-radius:var(--r); background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); cursor:pointer}
.cp-sws button[aria-pressed="true"]{outline:2px solid var(--ink); outline-offset:2px}
.cp-hex{display:flex; align-items:center; gap:8px}
.cp-hex label{font-size:0.8438rem; color:var(--ink-2)}
.cp-hex input{width:110px; height:var(--ctl-sm); padding:0 10px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); font:500 0.9375rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-transform:uppercase}
.cp-hex input[aria-invalid="true"]{border-color:var(--bad)}
.cp-note{margin:0; font-size:0.7812rem; line-height:1.4; color:var(--ink-2)}
.cp-acts{display:flex; justify-content:flex-end; gap:10px}
.contrast{display:grid; gap:6px; font-size:0.875rem; padding:14px; background:var(--surface-2); border-radius:var(--r)}
.contrast div{display:flex; justify-content:space-between; gap:12px}
.contrast b{font-variant-numeric:tabular-nums}
.ok{color:var(--accent-ink)}

/* dialogs and toast */
dialog{border:0; padding:0; background:var(--surface); color:var(--ink); border-radius:var(--r-lg); max-width:min(880px, calc(100vw - 32px)); width:100%; max-height:calc(100svh - 32px)}
dialog::backdrop{background:rgba(8,9,7,.6)}
.gal-main, .gal-thumb{position:relative; display:block; width:100%; padding:0; border:0; background:none; border-radius:var(--r); overflow:hidden; cursor:zoom-in}
.gal-main img, .gal-thumb img{width:100%; aspect-ratio:4/3; object-fit:cover; background-size:cover; transition:transform .5s var(--ease)}
.gal-main:hover img, .gal-thumb:hover img{transform:scale(1.03)}
.gal-main .zoom{position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 10px; background:rgba(12,14,10,.74); color:#fff; border-radius:var(--r); font:600 0.8125rem/1 var(--f-body)}
.gal-main .zoom svg{width:16px; height:16px}
.gal-thumbs{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
dialog.lb{max-width:none; max-height:none; width:100vw; height:100vh; height:100svh; margin:0; padding:0; border-radius:0; background:#0c0d0b; color:#f1ede4}
dialog.lb[open]{display:grid; grid-template-rows:auto minmax(0,1fr) auto}
dialog.lb::backdrop{background:#0c0d0b}
.lb-top{display:flex; align-items:center; gap:16px; padding:calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px))}
.lb-top b{font:var(--display-weight) 1.375rem/1.2 var(--f-head); letter-spacing:var(--display-track)}
.lb-count{margin-left:auto; color:#cfcabe; font-variant-numeric:tabular-nums}
.lb-stage{position:relative; display:grid; place-items:center; min-height:0; padding:0 84px; touch-action:pan-y}
.lb-stage picture{display:contents}
.lb-img{max-width:100%; max-height:calc(100svh - 210px); width:auto; height:auto; object-fit:contain; border-radius:var(--r); background-size:cover}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; background:rgba(255,255,255,.1); color:#fff}
.lb-nav:hover{background:rgba(255,255,255,.2)}
.lb-nav.prev{left:max(12px, env(safe-area-inset-left, 0px))} .lb-nav.next{right:max(12px, env(safe-area-inset-right, 0px))}
.lb-foot{display:grid; gap:12px; justify-items:center; padding:12px 16px calc(16px + env(safe-area-inset-bottom, 0px))}
.lb-cap{font-size:0.9375rem; color:#e8e4da; text-align:center; max-width:70ch}
.lb-thumbs{display:flex; gap:8px; max-width:100%; overflow:auto}
.lb-thumbs button{width:84px; height:56px; flex:none; padding:0; border:2px solid transparent; border-radius:var(--r); overflow:hidden; background:none; cursor:pointer; opacity:.55}
.lb-thumbs button[aria-current="true"]{border-color:var(--accent); opacity:1}
.lb-thumbs img{width:100%; height:100%; object-fit:cover}
dialog.lb .btn-x{color:#f1ede4}
@media (max-width:640px){ .lb-stage{padding:0 8px} .lb-nav{width:48px; height:48px; background:rgba(12,14,10,.55)} }
.dlg-close{position:absolute; right:10px; top:10px; z-index:2; background:var(--surface)}
/* room quick view: header, scrolling body and a footer that never covers the content */
dialog.rdlg{max-width:min(920px, calc(100vw - 32px)); max-height:calc(100svh - 32px); overflow:hidden}
dialog.rdlg[open]{display:flex; flex-direction:column}
.rd-head{flex:none; display:flex; align-items:flex-start; gap:12px; padding:18px 12px 14px clamp(18px, 3vw, 28px); border-bottom:1px solid var(--line)}
.rd-ttl{flex:1; min-width:0; display:grid; gap:4px}
.rd-ttl .eyebrow{margin:0}
#rdTitle{margin:0; font-size:clamp(1.5rem, calc(3vw * var(--fs, 1)), 2rem); line-height:1.15}
.rd-body{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:grid; grid-auto-rows:max-content; gap:20px; align-content:start; padding:clamp(16px, 2.6vw, 24px) clamp(18px, 3vw, 28px) clamp(20px, 3vw, 28px)}
.rd-body > *{margin:0}
.rd-gal{display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); grid-template-rows:1fr 1fr; gap:8px}
.rd-gal .gal-main{grid-row:span 2}
.rd-gal .gal-main img{aspect-ratio:3/2; height:100%}
.rd-gal .gal-thumb{height:100%}
.rd-gal .gal-thumb picture, .rd-gal .gal-thumb img{height:100%}
.rd-gal .gal-thumb img{aspect-ratio:auto}
@media (min-width:641px){ .rd-gal .gal-thumb:nth-child(n+4){display:none} }
.rd-facts{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.rd-facts li{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:4px 12px; border:1px solid var(--line); border-radius:var(--r); font-size:0.9062rem; font-weight:500}
.rd-facts svg{width:18px; height:18px; color:var(--accent-ink); flex:none}
.rd-h{margin:0 0 -8px; font:600 0.7812rem/1.2 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink)}
.rd-body .price{display:grid; gap:6px; padding-top:16px; border-top:1px solid var(--line)}
.rd-foot{flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding:14px clamp(18px, 3vw, 28px) calc(14px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--line); background:var(--surface)}
.rd-sum{flex:1 1 180px; margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; min-width:0}
.rd-sum b{font:600 1.375rem/1.2 var(--f-body)}
.rd-sum span{color:var(--ink-2); font-size:0.9062rem}
.rd-acts{display:flex; flex-wrap:wrap; gap:10px; flex:1 1 auto; justify-content:flex-end}
@media (max-width:640px){
  dialog.rdlg{max-width:100vw; width:100vw; max-height:100svh; height:100svh; margin:0; border-radius:0}
  .rd-head{padding-top:calc(14px + env(safe-area-inset-top, 0px))}
  .rd-gal{display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:calc(-1 * clamp(18px, 3vw, 28px)); padding-inline:clamp(18px, 3vw, 28px); scroll-padding-inline:clamp(18px, 3vw, 28px)}
  .rd-gal::-webkit-scrollbar{display:none}
  .rd-gal .gal-main, .rd-gal .gal-thumb{flex:0 0 84%; height:auto; scroll-snap-align:start}
  .rd-gal .gal-main img, .rd-gal .gal-thumb img, .rd-gal .gal-thumb picture{height:auto; aspect-ratio:3/2}
  .rd-foot{gap:10px}
  .rd-sum{flex-basis:100%}
  .rd-acts{flex-wrap:nowrap; flex-basis:100%}
  .rd-acts .btn{flex:1 1 0; min-width:0; padding-inline:12px}
}
dialog.hand{max-width:min(600px, calc(100vw - 32px))}
.hand-body{display:grid; gap:16px; padding:clamp(24px, 4vw, 36px)}
.hand-body .h3{padding-right:44px}
.hand-sum{display:grid; gap:0; margin:0; border-top:1px solid var(--line)}
.hand-sum div{display:grid; grid-template-columns:minmax(0,9rem) minmax(0,1fr); gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:0.9688rem}
.hand-sum dt{color:var(--ink-2)} .hand-sum dd{margin:0; font-weight:600}
.hand-link{display:grid; gap:6px; font-size:0.875rem; color:var(--ink-2)}
.hand-link code{display:block; padding:12px 14px; background:var(--surface-2); border-radius:var(--r); color:var(--ink); font:500 0.8438rem/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap:anywhere}
.hand-acts{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px}
.hand-acts .btn{flex:1 1 auto}
@media (max-width:480px){ .hand-sum div{grid-template-columns:minmax(0,1fr); gap:2px} }
.st-note{margin:10px 0 0; font-size:0.8438rem; line-height:1.45; color:var(--ink-2)}
.st-sub{margin:4px 0 0; font-size:0.875rem; font-weight:500}
.st-sub.is-off{color:var(--ink-2)}
.studio .seg button:disabled{opacity:.45; cursor:not-allowed}
.keyfeat{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
.keyfeat li{display:grid; gap:10px; align-content:start; padding:14px 12px; border:1px solid var(--line); border-radius:var(--r); font-size:0.9062rem; line-height:1.35; font-weight:500}
.keyfeat svg{width:28px; height:28px; color:var(--accent-ink)}
@media (max-width:520px){ .keyfeat{grid-template-columns:1fr} .keyfeat li{grid-template-columns:28px minmax(0,1fr); align-items:center; gap:14px; padding:12px 14px} }
.dogrow{display:grid; grid-template-columns:auto 1fr; gap:2px 14px; align-items:center; padding:14px 16px; border-radius:var(--r); font-size:0.9062rem; line-height:1.4}
.dogrow svg{grid-row:span 2; width:32px; height:32px}
.dogrow b{font-size:1rem; font-weight:600}
.dogrow.is-yes{background:color-mix(in oklab, var(--accent) 16%, var(--surface)); border:1px solid color-mix(in oklab, var(--accent) 55%, transparent)}
.dogrow.is-yes svg{color:var(--accent-ink)}
.dogrow.is-no{background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}
.dogrow.is-no b{color:var(--ink)}
.amen{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; font-size:0.9375rem}
.amen li{display:flex; align-items:center; gap:10px} .amen svg{width:20px; height:20px; color:var(--accent-ink); flex:none}
@media (max-width:720px){ .amen{grid-template-columns:1fr} }
.about-body{padding:clamp(22px, 3vw, 36px); display:grid; gap:16px; max-width:640px}
.about-body ul{margin:0; padding-left:20px; display:grid; gap:8px}
.toast{position:fixed; z-index:90; left:50%; bottom:calc(72px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  background:var(--ink); color:var(--bg); padding:14px 20px; border-radius:var(--r); font-size:0.9375rem; max-width:min(520px, calc(100vw - 32px)); transition:opacity .25s var(--ease), transform .25s var(--ease)}
.toast.on{opacity:1; transform:translate(-50%, 0)}

/* payment logos and seals in one colour (design set): a mask filled with the text colour */
.pm{display:block; flex:none; background:currentColor; -webkit-mask:var(--m) center / contain no-repeat; mask:var(--m) center / contain no-repeat}
.pm-t{font:800 0.8125rem/1 var(--f-body); letter-spacing:.02em; white-space:nowrap}


/* ---------- opening and closing of overlays: menus, lists, popovers, panels, sheets and dialogs fade and move in from where
   they come from and leave the same way. They stay drawn until the move ends (display and top layer switch last) and take
   no clicks while leaving. Reduced motion (system or accessibility panel) skips the move. ---------- */
.nav-menu, .dd-list, .vs-emo, .pop, .tip, .dial-acts, .cw-panel, .studio, .cc, .ibe-proc, dialog{
  transition:opacity var(--ov-t, .2s) var(--ease), translate var(--ov-t, .2s) var(--ease), scale var(--ov-t, .2s) var(--ease),
    display var(--ov-t, .2s) allow-discrete, overlay var(--ov-t, .2s) allow-discrete}
:is(.nav-menu, .dd-list, .vs-emo, .pop, .tip, .dial-acts, .cw-panel, .studio, .cc, .ibe-proc)[hidden], dialog:not([open]){pointer-events:none}
/* menus and lists drop from their button */
.nav-menu, .dd-list, .vs-emo{--ov-t:.18s}
:is(.nav-menu, .dd-list, .vs-emo)[hidden]{opacity:0; translate:0 -6px}
@starting-style{ .nav-menu, .dd-list, .vs-emo{opacity:0; translate:0 -6px} }
@media (max-width:640px){ /* on phones the list is a sheet at the bottom and slides up */
  .dd-list{--ov-t:.28s}
  .dd-list[hidden]{opacity:1; translate:0 100%}
  @starting-style{ .dd-list{opacity:1; translate:0 100%} }
}
/* search popovers rise from the bar, or drop when they hang below it; on phones they slide up as a sheet */
.pop{--ov-t:.22s}
.pop[hidden]{opacity:0; translate:0 8px}
@starting-style{ .pop{opacity:0; translate:0 8px} }
:is(.pop.is-below, .bk-host.is-docked .pop)[hidden]{translate:0 -8px}
@starting-style{ .pop.is-below, .bk-host.is-docked .pop{translate:0 -8px} }
@media (max-width:640px){
  .pop{--ov-t:.3s}
  .pop[hidden], :is(.pop.is-below, .bk-host.is-docked .pop)[hidden]{opacity:1; translate:0 100%}
  @starting-style{ .pop, .pop.is-below, .bk-host.is-docked .pop{opacity:1; translate:0 100%} }
}
/* hints and processing layers fade */
.tip{--ov-t:.15s}
:is(.tip, .ibe-proc)[hidden]{opacity:0; scale:.97}
.ibe-proc[hidden]{scale:none}
@starting-style{ .tip{opacity:0; scale:.97} .ibe-proc{opacity:0} }
/* the settings dial, the concierge, the consent bar and the booking bar rise from the bottom */
.dial-acts[hidden], .cc[hidden]{opacity:0; translate:0 12px}
@starting-style{ .dial-acts, .cc{opacity:0; translate:0 12px} }
.cw-panel{--ov-t:.24s; transform-origin:100% 100%}
.cw-panel[hidden]{opacity:0; translate:0 16px; scale:.97}
@starting-style{ .cw-panel{opacity:0; translate:0 16px; scale:.97} }
@media (max-width:520px){
  .cw-panel{--ov-t:.3s}
  .cw-panel[hidden]{opacity:1; translate:0 100%; scale:none}
  @starting-style{ .cw-panel{opacity:1; translate:0 100%; scale:none} }
}
/* side panels (design, accessibility) slide in from the left edge */
.studio{--ov-t:.3s}
.studio[hidden]{translate:-100% 0}
@starting-style{ .studio{translate:-100% 0} }
/* dialogs rise and settle, their backdrop fades; sheets slide in from their edge; the birth date picker drops from its field */
dialog{--ov-t:.24s}
dialog:not([open]){opacity:0; translate:0 14px; scale:.98}
@starting-style{ dialog[open]{opacity:0; translate:0 14px; scale:.98} }
dialog::backdrop{opacity:0; transition:opacity .24s var(--ease), display .24s allow-discrete, overlay .24s allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{ dialog[open]::backdrop{opacity:0} }
dialog.lb:not([open]){translate:none; scale:none}
@starting-style{ dialog.lb[open]{translate:none; scale:none} }
dialog.rsheet{--ov-t:.32s}
dialog.rsheet:not([open]){opacity:1; translate:100% 0; scale:none}
@starting-style{ dialog.rsheet[open]{opacity:1; translate:100% 0; scale:none} }
dialog.ibe-sheet{--ov-t:.3s}
dialog.ibe-sheet:not([open]){opacity:1; translate:0 100%; scale:none}
@starting-style{ dialog.ibe-sheet[open]{opacity:1; translate:0 100%; scale:none} }
@media (max-width:599px){
  dialog.rsheet:not([open]){translate:0 100%}
  @starting-style{ dialog.rsheet[open]{translate:0 100%} }
}
dialog.bdp.is-anchored{--ov-t:.18s}
dialog.bdp.is-anchored:not([open]){translate:0 -6px; scale:none}
@starting-style{ dialog.bdp.is-anchored[open]{translate:0 -6px; scale:none} }
dialog.bdp.is-anchored.is-up:not([open]){translate:0 6px}
@starting-style{ dialog.bdp.is-anchored.is-up[open]{translate:0 6px} }

/* voucher shop (gutscheine.html) */
.vs{padding-bottom:clamp(56px, 8vw, 104px)}
.vs [data-vs-focus]:focus{outline:none}
.vs-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px; padding:14px 0 18px; border-bottom:1px solid var(--line); margin-bottom:24px}
.vs-demo{margin:0; font-size:0.8438rem; color:var(--ink-2)}
.vs-cartbtn{position:relative; gap:8px}
.vs-badge{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:var(--r); background:var(--accent); color:var(--on-accent); font:700 0.75rem/1 var(--f-body)}
.vs-h2{font:var(--display-weight) clamp(1.875rem, calc(3.4vw * var(--fs, 1)), 2.75rem)/1.1 var(--f-display); letter-spacing:var(--display-track); margin:0}
.vs-h3{font:var(--display-weight) clamp(1.5rem, calc(2.2vw * var(--fs, 1)), 1.875rem)/1.15 var(--f-head); letter-spacing:var(--display-track); margin:0}
.vs-h4{font:600 1.062rem/1.3 var(--f-body); margin:0 0 14px}
.vs-l{margin:0 0 6px; font:600 0.9375rem/1.3 var(--f-body)}
.vs-sub, .vs-hint{margin:0 0 12px; font-size:0.875rem; line-height:1.45; color:var(--ink-2)}
.vs-hint{margin:6px 0 0}
.vs-err{margin:6px 0 0; font-size:0.875rem; line-height:1.4; color:var(--bad)}
.vs-req{color:var(--bad)}
.vs-opt-l{font-weight:400; color:var(--ink-2)}
.vs-approx{display:block; font:400 0.7812rem/1.3 var(--f-body); color:var(--ink-2)}
.vs-grow{flex:1}
.vs-link{display:inline-flex; align-items:center; gap:8px; text-align:left; min-height:40px; padding:0; border:0; background:none; color:var(--accent-ink); font:600 0.9062rem/1.3 var(--f-body); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.vs-link svg{width:18px; height:18px; flex:none}
.vs-spin{display:inline-block; width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:vs-spin .8s linear infinite; flex:none}
.vs-spin.is-big{width:36px; height:36px; border-width:3px}
@keyframes vs-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .vs-spin{animation-duration:2.4s!important; animation-iteration-count:infinite!important} }
.vs-h48{height:48px}

/* catalogue */
.vs-chips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 0 24px; padding:2px}
.vs-chips::-webkit-scrollbar{display:none}
@media (max-width:720px){ .vs-chips{margin-inline:-16px; padding-inline:16px} }
.vs-chip{flex:none; display:inline-flex; align-items:center; gap:6px; height:var(--ctl-sm); padding:0 16px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); font:600 0.875rem/1 var(--f-body); cursor:pointer}
.vs-chip svg{width:16px; height:16px}
.vs-chip[aria-checked="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.vs-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 272px), 1fr)); gap:clamp(16px, 2vw, 24px)}
.vs-tile{position:relative; display:grid; grid-template-rows:auto 1fr; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.vs-tile:hover{border-color:var(--field-line); box-shadow:0 10px 28px rgba(20,18,12,.10)}
.vs-tile:focus-within{outline:2px solid var(--accent-ink); outline-offset:3px}
.vs-tile-pic img{width:100%; aspect-ratio:16/10; object-fit:cover; background-size:cover}
.vs-tile-art{display:grid; place-items:center; aspect-ratio:16/10; overflow:hidden; background:color-mix(in oklab, var(--accent) 16%, var(--surface))}
.vs-tile-art .vs-a4{transform:translateY(18px) rotate(-6deg)}
.vs-tile-b{display:grid; gap:8px; align-content:start; padding:18px 18px 20px}
.vs-tile h3{margin:0; font:var(--display-weight) 1.375rem/1.2 var(--f-head); letter-spacing:var(--display-track)}
.vs-tile-btn{padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.vs-tile-btn::after{content:""; position:absolute; inset:0; z-index:1}
.vs-tile-btn:focus-visible{outline:none}
.vs-tile-b > p{margin:0; font-size:0.9062rem; line-height:1.45; color:var(--ink-2)}
.vs-where{display:flex; align-items:center; gap:6px; font-size:0.8125rem!important}
.vs-where svg{width:16px; height:16px; flex:none; color:var(--accent-ink)}
.vs-tile-f{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:6px}
.vs-tile-f b{font:600 1.188rem/1.2 var(--f-body); font-variant-numeric:tabular-nums}
.vs-tile-cta{display:inline-flex; align-items:center; height:var(--ctl-sm); padding:0 16px; border-radius:var(--r); background:var(--ink); color:var(--bg); font:600 0.875rem/1 var(--f-body)}
.vs-perks{list-style:none; margin:clamp(32px, 4vw, 48px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.vs-perks li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:start}
.vs-perks svg{width:26px; height:26px; color:var(--accent-ink)}
.vs-perks b{display:block; font-size:0.9688rem}
.vs-perks span{display:block; font-size:0.875rem; line-height:1.45; color:var(--ink-2)}
@media (max-width:820px){ .vs-perks{grid-template-columns:minmax(0,1fr)} }
.vs-bal{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:16px 40px; align-items:start; margin-top:clamp(32px, 4vw, 48px); padding:clamp(20px, 3vw, 32px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); scroll-margin-top:170px}
.vs-bal .muted{margin:8px 0 0; font-size:0.9375rem}
.vs-bal-f{display:flex; flex-wrap:wrap; align-items:end; gap:10px}
.vs-bal-f .vs-field{flex:1 1 220px}
.vs-bal-f input{text-transform:uppercase; letter-spacing:.06em; font-variant-numeric:tabular-nums}
.vs-bal > div[aria-live], .vs-try{grid-column:2}
.vs-bal-res{display:flex; gap:12px; align-items:flex-start; margin:0; padding:14px 16px; border-radius:var(--r); font-size:0.9375rem; line-height:1.45}
.vs-bal-res svg{width:22px; height:22px; flex:none; margin-top:1px}
.vs-bal-res.is-bad{background:color-mix(in oklab, var(--bad) 10%, var(--surface)); color:var(--ink); border:1px solid color-mix(in oklab, var(--bad) 45%, transparent)}
.vs-bal-res.is-bad svg{color:var(--bad)}
.vs-bal-res.is-ok{background:color-mix(in oklab, var(--accent) 14%, var(--surface)); border:1px solid color-mix(in oklab, var(--accent) 50%, transparent)}
.vs-bal-res.is-ok svg{color:var(--accent-ink)}
.vs-bal-res div{display:grid; gap:2px}
.vs-bal-res b{font-size:1.062rem}
.vs-bal-res span{color:var(--ink-2)}
.vs-try{margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:0 14px; font-size:0.875rem; color:var(--ink-2)}
.vs-try .vs-link{font-variant-numeric:tabular-nums; letter-spacing:.04em}
@media (max-width:820px){ .vs-bal{grid-template-columns:minmax(0,1fr)} .vs-bal > div[aria-live], .vs-try{grid-column:auto} }

/* steps, back link, two columns */
.vs-back{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 10px 0 4px; margin:-6px 0 12px -4px; border:0; border-radius:var(--r); background:none; color:var(--ink-2); font:600 0.9062rem/1 var(--f-body); cursor:pointer}
.vs-back:hover{color:var(--ink); background:var(--surface-2)}
.vs-back svg{width:20px; height:20px}
.vs-head{display:grid; gap:8px; margin-bottom:clamp(20px, 3vw, 32px)}
.vs-head .muted{margin:0; max-width:64ch}
.vs-step{margin:0; font:600 0.7812rem/1.2 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink)}
.vs-two{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(24px, 3vw, 40px); align-items:start}
.vs-main{display:grid; gap:clamp(24px, 3vw, 32px); min-width:0}
.vs-sticky{position:sticky; top:calc(76px + 65px + 16px); display:grid; gap:16px}
.vs-mobile-only{display:none}
@media (max-width:959px){
  .vs-two{grid-template-columns:minmax(0,1fr)}
  .vs-desk-only{display:none}
  .vs-mobile-only{display:block}
  .vs-sticky{position:static}
}
.vs-sec{display:grid; gap:14px; min-width:0}
.vs-sec-h{display:flex; gap:12px; align-items:flex-start}
.vs-num{display:inline-grid; place-items:center; width:30px; height:30px; flex:none; border-radius:min(50%, var(--r)); background:color-mix(in oklab, var(--accent) 20%, var(--surface)); color:var(--accent-ink); font:700 0.875rem/1 var(--f-body)}
.vs-sec-h h3{margin:3px 0 0; font:600 1.188rem/1.3 var(--f-body)}
.vs-sec-h p{margin:4px 0 0; font-size:0.9062rem; line-height:1.45; color:var(--ink-2)}
.vs-card{min-width:0; padding:clamp(18px, 2.4vw, 24px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.vs-block + .vs-block{margin-top:24px; padding-top:24px; border-top:1px solid var(--line)}
.vs-block:empty{display:none}
.vs-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px}
@media (max-width:620px){ .vs-split{grid-template-columns:minmax(0,1fr)} }

/* form controls: 48 px fields and buttons inside forms */
.vs-fields{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 16px}
.vs-wide{grid-column:1 / -1}
.vs-desk-gap{display:block}
@media (max-width:620px){ .vs-fields{grid-template-columns:minmax(0,1fr)} .vs-desk-gap{display:none} }
.vs-field{position:relative; display:grid; gap:6px; align-content:start; min-width:0}
.vs-field label, .vs-lbl{font-size:0.875rem; font-weight:500; color:var(--ink)}
.vs-field input, .vs-field textarea{width:100%; min-height:48px; padding:10px 14px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--bg); color:var(--ink); font:inherit; font-size:1rem; line-height:1.4}
.vs-field textarea{resize:vertical; min-height:96px}
.vs-field input:focus, .vs-field textarea:focus{border-color:var(--ink); outline:2px solid var(--accent-ink); outline-offset:1px}
.vs-field input[aria-invalid="true"], .vs-field textarea[aria-invalid="true"]{border-color:var(--bad); box-shadow:inset 0 0 0 1px var(--bad)}
.vs-count{justify-self:end; font-size:0.8125rem; color:var(--ink-2); font-variant-numeric:tabular-nums}
.vs-zip input{font-variant-numeric:tabular-nums}
.vs-dd .dd{display:block}
.vs-dd .dd-btn{width:100%; height:48px; padding:0 14px; background:var(--bg); font:500 1rem/1 var(--f-body); letter-spacing:0}
.vs-dd .dd-list{max-width:min(360px, calc(100vw - 32px))}
.vs-pill, .vs-seg-o, .vs-sw-o, .vs-rc, .vs-tpl, .vs-method, .vs-ai-o{position:relative; cursor:pointer}
.vs-pill input, .vs-seg-o input, .vs-sw-o input, .vs-rc input, .vs-tpl input, .vs-method input, .vs-ai-o input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.vs-chips2{display:flex; flex-wrap:wrap; gap:8px}
.vs-pill > span{display:inline-flex; align-items:center; height:48px; padding:0 18px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--bg); font:600 0.9375rem/1 var(--f-body); font-variant-numeric:tabular-nums}
.vs-pill input:checked + span{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.vs-pill input:focus-visible + span, .vs-seg-o input:focus-visible + span, .vs-sw-o input:focus-visible + .vs-sw, .vs-rc:has(input:focus-visible), .vs-tpl:has(input:focus-visible), .vs-method:has(input:focus-visible), .vs-ai-o:has(input:focus-visible){outline:2px solid var(--accent-ink); outline-offset:3px}
.vs-amt-row{display:flex; align-items:end; gap:10px; margin-top:16px}
.vs-amt-f{flex:0 1 220px}
.vs-round{display:inline-grid; place-items:center; width:48px; height:48px; flex:none; border:1px solid var(--field-line); border-radius:min(50%, var(--r)); background:var(--bg); color:var(--ink); cursor:pointer}
.vs-round svg{width:20px; height:20px}
.vs-round:disabled{opacity:.4; cursor:not-allowed}
.vs-suffix{position:relative}
.vs-suffix input{padding-right:40px; font-variant-numeric:tabular-nums; font-weight:600}
.vs-suffix span{position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--ink-2); font-weight:600}
.vs-cards2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
@media (max-width:560px){ .vs-cards2{grid-template-columns:minmax(0,1fr)} }
.vs-rc{display:grid; gap:6px; align-content:start; padding:16px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--bg)}
.vs-rc:has(input:checked){border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:var(--surface)}
.vs-rc-t{font-weight:600; font-size:1rem}
.vs-rc-d{font-size:0.875rem; line-height:1.45; color:var(--ink-2)}
.vs-rc b{font-variant-numeric:tabular-nums; font-size:0.9375rem}
.vs-seg{display:inline-flex; flex-wrap:wrap; border:1px solid var(--field-line); border-radius:var(--r); overflow:hidden}
.vs-seg-o > span{display:inline-flex; align-items:center; height:46px; padding:0 16px; font-weight:600; font-size:0.9375rem; background:var(--bg)}
.vs-seg-o + .vs-seg-o > span{border-left:1px solid var(--field-line)}
.vs-seg-o input:checked + span{background:var(--ink); color:var(--bg)}
.vs-seg-o input:focus-visible + span{outline-offset:-3px}
.vs-swatches{display:flex; flex-wrap:wrap; gap:10px}
.vs-sw{display:grid; place-items:center; width:44px; height:44px; border-radius:min(50%, var(--r)); background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.vs-sw-o input:checked + .vs-sw{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--ink)}
.vs-sw.is-custom{color:#fff}
.vs-sw.is-custom svg{width:20px; height:20px; filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.vs-sw-name{margin:8px 0 0; font-size:0.875rem; color:var(--ink-2)}

/* templates and photos */
.vs-tpls{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px}
@media (max-width:560px){ .vs-tpls{grid-template-columns:repeat(2, minmax(0,1fr))} }
.vs-tpl{display:grid; justify-items:center; gap:4px; padding:12px 8px 10px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--bg); text-align:center}
.vs-tpl:has(input:checked){border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:var(--surface)}
.vs-tpl-art{display:block; margin-bottom:6px}
.vs-tpl-n{font-weight:600; font-size:0.9062rem}
.vs-tpl-c{font-size:0.8125rem; color:var(--ink-2)}
.vs-slots{list-style:none; margin:0 0 12px; padding:0; display:grid; gap:8px}
.vs-slot{display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg)}
.vs-slots.has-bad .vs-slot:has(.vs-q.is-bad){border-color:var(--bad)}
.vs-slot-n{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:min(50%, var(--r)); background:var(--ink); color:var(--bg); font:700 0.8125rem/1 var(--f-body)}
.vs-slot-th{display:block; background-color:var(--surface-2); background-repeat:no-repeat; border-radius:calc(var(--r) / 2)}
.vs-slot.is-empty .vs-slot-th{border:1px dashed var(--field-line)}
.vs-slot-t{display:grid; gap:4px; min-width:0}
.vs-slot-t b{font-size:0.9375rem}
.vs-slot-a{display:flex; align-items:center; gap:4px}
.vs-ix{width:40px; height:40px}
.vs-ix svg{width:20px; height:20px}
.vs-ix:disabled{opacity:.35; cursor:not-allowed}
.vs-slot-a .vs-ix:first-child svg{transform:rotate(90deg)}
.vs-slot-a .vs-ix:nth-child(2) svg{transform:rotate(90deg)}
@media (max-width:560px){ .vs-slot{grid-template-columns:auto auto minmax(0,1fr)} .vs-slot-a{grid-column:1 / -1; justify-content:flex-end} }
.vs-q{display:inline-flex; align-items:center; gap:6px; font-size:0.8438rem; font-weight:600}
.vs-q svg{width:16px; height:16px; flex:none}
.vs-q.is-top{color:var(--accent-ink)}
.vs-q.is-ok{color:var(--ink-2)}
.vs-q.is-bad{color:var(--bad)}
.vs-q.is-none{color:var(--ink-2); font-weight:400}
.vs-alert{display:flex; gap:10px; align-items:flex-start; margin:0 0 14px; padding:12px 14px; border-radius:var(--r); background:color-mix(in oklab, var(--bad) 10%, var(--surface)); border:1px solid color-mix(in oklab, var(--bad) 45%, transparent); font-size:0.875rem; line-height:1.45}
.vs-alert svg{width:20px; height:20px; flex:none; color:var(--bad)}
.vs-pool-h{display:flex; justify-content:space-between; margin:16px 0 8px; font-size:0.875rem; font-weight:600}
.vs-pool-h .num{color:var(--ink-2); font-variant-numeric:tabular-nums}
.vs-pool{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:8px}
.vs-pt{position:relative; aspect-ratio:1}
.vs-pt-b{position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:6px; width:100%; height:100%; padding:0; border:1px solid var(--line); border-radius:var(--r); background-color:var(--surface-2); background-size:cover; background-position:center; color:var(--ink); font:600 0.8125rem/1.2 var(--f-body); cursor:pointer; overflow:hidden}
.vs-pt.is-on .vs-pt-b{border:3px solid var(--accent)}
.vs-pt-b:focus-visible{outline:2px solid var(--accent-ink); outline-offset:2px}
.vs-pt-add .vs-pt-b{border:1px dashed var(--field-line); background:var(--bg)}
.vs-pt-add .vs-pt-b:focus-within{outline:2px solid var(--accent-ink); outline-offset:2px}
.vs-pt-add svg{width:24px; height:24px; color:var(--accent-ink)}
.vs-pt-n{position:absolute; left:6px; top:6px; display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 6px; border-radius:min(50%, var(--r)); background:var(--accent); color:var(--on-accent); font:700 0.8125rem/1 var(--f-body)}
.vs-pt-n svg{width:14px; height:14px}
.vs-pt-tag{position:absolute; left:0; right:0; bottom:0; padding:4px 6px; background:rgba(12,14,10,.62); color:#fff; font:600 0.6875rem/1.2 var(--f-body); text-align:left}
.vs-pt-x{position:absolute; right:4px; top:4px; z-index:1; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:var(--r); background:rgba(12,14,10,.66); color:#fff; cursor:pointer}
.vs-pt-x svg{width:16px; height:16px}
.vs-pt-x:focus-visible{outline:2px solid #fff; outline-offset:-3px}
.vs-flash{margin:8px 0 0; min-height:1.3em; font-size:0.875rem; color:var(--bad)}

/* rich-text editor */
.vs-rt{border:1px solid var(--field-line); border-radius:var(--r); background:var(--bg)}
.vs-rt:focus-within{border-color:var(--ink); outline:2px solid var(--accent-ink); outline-offset:1px}
.vs-rt-bar{display:flex; flex-wrap:wrap; align-items:center; gap:2px; padding:4px; border-bottom:1px solid var(--line)}
.vs-rt-b{display:inline-grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:var(--r); background:transparent; color:var(--ink); font:600 1.062rem/1 Georgia, serif; cursor:pointer}
.vs-rt-b svg{width:20px; height:20px}
.vs-rt-b:hover{background:var(--surface-2)}
.vs-rt-b[aria-pressed="true"], .vs-rt-b[aria-expanded="true"]{background:color-mix(in oklab, var(--accent) 22%, var(--surface)); color:var(--accent-ink)}
.vs-rt-emo{position:relative}
.vs-emo{position:absolute; left:0; top:calc(100% + 6px); z-index:20; display:grid; grid-template-columns:repeat(8, 36px); gap:2px; max-height:224px; overflow:auto; padding:8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 14px 40px rgba(0,0,0,.18)}
.vs-emo[hidden]{display:none}
.vs-emo button{width:36px; height:36px; padding:0; border:0; border-radius:var(--r); background:transparent; font-size:1.25rem; line-height:1; cursor:pointer}
.vs-emo button:hover, .vs-emo button:focus{background:var(--surface-2)}
@media (max-width:420px){ .vs-emo{grid-template-columns:repeat(6, 36px)} }
.vs-ai-b{display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px; border:0; border-radius:var(--r); background:color-mix(in oklab, var(--accent) 18%, var(--surface)); color:var(--accent-ink); font:600 0.875rem/1 var(--f-body); cursor:pointer}
.vs-ai-b svg{width:18px; height:18px}
.vs-rt-ed{padding:12px 14px; font-size:1rem; line-height:1.55; overflow-wrap:anywhere; outline:none}
.vs-rt-ed.is-empty::before{content:attr(data-ph); color:var(--ink-2); pointer-events:none}
.vs-rt-ed ul{margin:0; padding-left:22px}
.vs-rt-f{display:flex; justify-content:space-between; gap:12px; padding:6px 14px 8px; border-top:1px solid var(--line); font-size:0.8125rem; color:var(--ink-2)}
.vs-rt-w{min-height:1.3em}
.vs-rt-c.is-high{color:var(--bad); font-weight:600}
.vs-mail{margin-top:20px}

/* preview and price card */
.vs-prev{display:grid; justify-items:center; gap:10px}
.vs-prev-art{display:flex; justify-content:center; min-height:120px}
.vs-cap{margin:0; font-size:0.8125rem; line-height:1.4; color:var(--ink-2); text-align:center; max-width:34ch}
.vs-prev-m{padding:8px 0}
.vs-price{display:grid; gap:10px; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.vs-price-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:0.9375rem}
.vs-price-row b{font:600 1.5rem/1 var(--f-body)}
.vs-price-x{margin:-6px 0 0; text-align:right}
.vs-valid{margin:0; font-size:0.8125rem; line-height:1.45; color:var(--ink-2)}
.vs-wide-btn{width:100%; height:auto; min-height:56px; padding-block:12px; white-space:normal; line-height:1.25; text-align:center}
/* single-column grids: a long word or button never widens the column beyond the screen */
.vs-main, .vs-sec, .vs-field, .vs-ai-body, .vs-3ds-b, .vs-tile-b, .vs-price, .vs-done-b, .vs-sum-rows{grid-template-columns:minmax(0,1fr)}

/* basket and checkout */
.vs-rows{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.vs-row{display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.vs-row-b{display:grid; gap:4px; min-width:0}
.vs-row-h{display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 12px; align-items:baseline}
.vs-row-h b{font-size:1.062rem}
.vs-row-h .num{font-weight:600; white-space:nowrap}
.vs-row-b p{margin:0; font-size:0.875rem; color:var(--ink-2); overflow-wrap:anywhere}
.vs-row-a{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.vs-del{color:var(--bad); border-color:color-mix(in oklab, var(--bad) 55%, transparent)}
.vs-another{justify-self:start}
.vs-sum{padding:20px}
.vs-sum-rows{display:grid; gap:10px}
.vs-sum-rows > div{display:flex; justify-content:space-between; gap:12px; font-size:0.9375rem}
.vs-sum-rows > div small{display:block; color:var(--ink-2); font-size:0.8125rem}
.vs-sum-total{padding-top:12px; border-top:1px solid var(--line)}
.vs-sum-total b{font:600 1.312rem/1.1 var(--f-body)}
.vs-sum-x{justify-content:flex-end!important; text-align:right}
.vs-sum .vs-wide-btn{margin-top:16px}
.vs-empty{display:grid; justify-items:center; gap:12px; padding:clamp(40px, 6vw, 72px) 16px; text-align:center}
.vs-empty > svg{width:44px; height:44px; color:var(--accent-ink)}
.vs-empty .muted{margin:0}
.vs-mini{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:10px}
.vs-mini li, .vs-lines li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; font-size:0.9062rem}
.vs-mini li > span:nth-child(2), .vs-lines li > span:nth-child(2){display:grid; gap:2px; min-width:0}
.vs-mini small, .vs-lines small{color:var(--ink-2); font-size:0.8125rem}
.vs-lines{list-style:none; margin:0; padding:0 0 14px; display:grid; gap:12px; border-bottom:1px solid var(--line)}
.vs-lnum{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:min(50%, var(--r)); background:var(--surface-2); font:700 0.8125rem/1 var(--f-body)}
.vs-lnum svg{width:16px; height:16px}
.vs-due{display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; font-size:1rem; font-weight:600}
.vs-due b{font:600 1.375rem/1 var(--f-body)}
.vs-sec .vs-l#vsPayL{margin-top:22px}
.vs-methods{display:grid; gap:8px}
.vs-method{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:12px; align-items:center; min-height:56px; padding:10px 14px 10px 46px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--bg)}
.vs-method::before{content:""; position:absolute; left:16px; top:50%; width:18px; height:18px; transform:translateY(-50%); border:1.6px solid var(--field-line); border-radius:50%; background:var(--bg)}
.vs-method:has(input:checked){border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:var(--surface)}
.vs-method:has(input:checked)::before{border:6px solid var(--ink)}
.vs-m-t{font-weight:600; font-size:0.9688rem}
.vs-m-d{grid-column:1; font-size:0.8438rem; color:var(--ink-2)}
.vs-logos{grid-column:2; grid-row:1 / span 2; display:flex; align-items:center; gap:10px; color:var(--ink)}
.vs-logo{display:inline-grid; place-items:center; min-width:40px; height:26px; padding:0 6px; border:1px solid var(--line); border-radius:calc(var(--r) / 2); background:var(--surface); font:800 0.6875rem/1 var(--f-body); letter-spacing:.02em; color:var(--ink)}
.vs-logo.is-visa{font-style:italic; color:#1A1F71}
:root[data-mode="dark"] .vs-logo.is-visa, :root[data-theme="dark"]:not([data-mode="light"]) .vs-logo.is-visa{color:#C8D0FF}
@media (prefers-color-scheme: dark){ :root:not([data-mode="light"]):not([data-theme="light"]) .vs-logo.is-visa{color:#C8D0FF} }
@media (max-width:420px){ .vs-method{grid-template-columns:minmax(0,1fr)} .vs-logos{grid-column:1; grid-row:auto; gap:8px} }
.vs-cardbox{margin-top:12px; padding:16px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg)}
.vs-cardbox-h{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px}
.vs-cardbox-h span{display:inline-flex; align-items:center; gap:6px; font-size:0.8125rem; color:var(--ink-2)}
.vs-cardbox-h svg{width:16px; height:16px}
.vs-cardbox-f{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:14px}
.vs-cardbox-f .vs-hint{margin:0}
.vs-in{position:relative; display:block}
.vs-in input{padding-right:64px}
.vs-brand{position:absolute; right:14px; top:50%; transform:translateY(-50%); font:800 0.75rem/1 var(--f-body); color:var(--ink-2); letter-spacing:.04em; pointer-events:none}
.vs-noreal{display:flex; gap:10px; align-items:flex-start; margin:14px 0 0; padding:12px 14px; border-left:3px solid var(--accent); background:var(--bg); border-radius:var(--r); font-size:0.875rem; line-height:1.45; color:var(--ink-2)}
.vs-noreal svg{width:18px; height:18px; flex:none; margin-top:1px; color:var(--accent-ink)}
.vs-consents{display:grid; gap:12px}
.vs-check{display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; align-items:start; font-size:0.9375rem; line-height:1.45; cursor:pointer}
.vs-check input{width:22px; height:22px; margin:1px 0 0; accent-color:var(--ink); cursor:pointer}
.vs-check a{color:var(--accent-ink)}
.vs-check.is-bad span{color:var(--bad)}
.vs-check.is-bad input{outline:2px solid var(--bad); outline-offset:2px}
.vs-indent{padding-left:36px; margin-top:-4px}
.vs-sec .vs-check + div{margin-top:16px}
.vs-paybtn[aria-disabled="true"]{background:var(--surface-2); color:var(--ink-2); border-color:var(--line); cursor:not-allowed}
.vs-blocked{margin-top:10px}
.vs-blocked .vs-link{min-height:0; display:inline}

/* busy layer and dialogs */
.vs-busy{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:16px; background:color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter:blur(3px)}
.vs-busy-box{display:grid; justify-items:center; gap:10px; max-width:360px; padding:28px 24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.18)}
.vs-busy-box .vs-spin{color:var(--accent-ink)}
.vs-busy-box b{font-size:1.062rem}
.vs-busy-box span:last-child{font-size:0.875rem; color:var(--ink-2)}
dialog.vs-dlg{width:min(640px, calc(100vw - 32px)); max-height:calc(100svh - 32px); padding:0; overflow:auto}
dialog.vs-dlg::backdrop{background:rgba(8,9,7,.55)}
.vs-dlg-h{position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:18px 18px 12px 24px; background:var(--surface)}
.vs-dlg-t{margin:6px 0 0; font:var(--display-weight) 1.625rem/1.15 var(--f-head); letter-spacing:var(--display-track)}
.vs-dlg-s{margin:6px 0 0; font-size:0.9062rem; color:var(--ink-2)}
.vs-dlg-a{position:sticky; bottom:0; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; padding:14px 24px 20px; background:var(--surface); border-top:1px solid var(--line)}
.vs-dlg-a .btn{height:48px}
@media (max-width:520px){ .vs-dlg-a{padding:12px 16px 16px} .vs-dlg-a .btn{flex:1 1 40%} .vs-dlg-h{padding:14px 12px 10px 16px} .vs-ai-body, .vs-3ds-b, .vs-crop-q{padding-inline:16px} .vs-crop-stage, .vs-crop-z{padding-inline:16px} .vs-gal{padding-inline:16px} }
.vs-gal{list-style:none; margin:0; padding:4px 24px 20px; display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px}
.vs-gal-b{position:relative; display:block; width:100%; padding:0; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); overflow:hidden; cursor:pointer; text-align:left; color:var(--ink)}
.vs-gal-b img{width:100%; aspect-ratio:4/3; object-fit:cover; background-size:cover}
.vs-gal-b.is-on{border:3px solid var(--accent)}
.vs-gal-b:disabled{opacity:.45; cursor:not-allowed}
.vs-gal-c{display:block; padding:6px 8px 8px; font-size:0.7812rem; line-height:1.35; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.vs-crop-stage{display:grid; place-items:center; padding:8px 24px 0}
.vs-crop-vp{position:relative; max-width:100%; background-color:var(--surface-2); background-repeat:no-repeat; cursor:grab; touch-action:none; border-radius:calc(var(--r) / 2)}
.vs-crop-vp:active{cursor:grabbing}
.vs-crop-vp:focus-visible{outline:2px solid var(--accent-ink); outline-offset:3px}
.vs-crop-grid{position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255,255,255,.6) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255,255,255,.6) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)), linear-gradient(180deg, transparent calc(33.33% - .5px), rgba(255,255,255,.6) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255,255,255,.6) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.vs-crop-z{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:14px 24px 0}
.vs-crop-z .vs-link{margin-left:8px}
.vs-range{flex:1; accent-color:var(--accent-ink); height:40px}
.vs-crop-q{display:grid; gap:4px; padding:12px 24px 18px}
.vs-crop-q .vs-l{margin:0; font-size:0.8438rem; color:var(--ink-2); font-weight:500}
.vs-crop-q p{margin:0; font-size:0.875rem; line-height:1.45; color:var(--ink-2)}
.vs-ai-body{display:grid; gap:16px; padding:4px 24px 20px}
.vs-info{margin:0; padding:10px 12px; background:var(--surface-2); border-radius:var(--r); font-size:0.8438rem; line-height:1.45; color:var(--ink-2)}
.vs-skel{display:grid; gap:10px}
.vs-skel span{display:block; height:84px; border-radius:var(--r); background:linear-gradient(90deg, var(--surface-2) 25%, color-mix(in oklab, var(--surface-2) 60%, var(--surface)) 50%, var(--surface-2) 75%); background-size:200% 100%; animation:vs-sk 1.2s linear infinite}
@keyframes vs-sk{to{background-position:-200% 0}}
.vs-ai-list{display:grid; gap:10px}
.vs-ai-more{justify-self:start}
.vs-ai-more:disabled{opacity:.6; cursor:wait}
.vs-ai-o{display:grid; gap:6px; padding:14px 16px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--bg)}
.vs-ai-o:has(input:checked){border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:var(--surface)}
.vs-ai-n{font:600 0.7812rem/1.2 var(--f-body); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink)}
.vs-ai-t{font-size:0.9688rem; line-height:1.5}
.vs-ai-t ul{margin:0; padding-left:20px}
.vs-3ds-b{display:grid; gap:12px; padding:4px 24px 20px}
.vs-3ds-b p{margin:0; color:var(--ink-2)}
.vs-3ds-b dl{margin:0; display:grid; border-top:1px solid var(--line)}
.vs-3ds-b dl div{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line)}
.vs-3ds-b dt{color:var(--ink-2)} .vs-3ds-b dd{margin:0; font-weight:600}
dialog.vs-dlg-3ds{width:min(440px, calc(100vw - 32px))}

/* confirmation */
.vs-done{display:grid; justify-items:center; gap:12px; max-width:820px; margin:0 auto; text-align:center}
.vs-done-ok{display:grid; place-items:center; width:64px; height:64px; border-radius:min(50%, var(--r-lg)); background:color-mix(in oklab, var(--accent) 22%, var(--surface)); color:var(--accent-ink)}
.vs-done-ok svg{width:34px; height:34px}
.vs-done > .muted{margin:0}
.vs-done-l{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:14px; width:100%; text-align:left}
.vs-done-i{display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.vs-done-b{display:grid; gap:6px; align-content:start; min-width:0}
.vs-done-b p{margin:0; font-size:0.9062rem; overflow-wrap:anywhere}
.vs-done-t{font-size:1.125rem}
.vs-done-code{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px}
.vs-done-code small{font:600 0.75rem/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.vs-done-code span{font:600 1.25rem/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing:.06em}
.vs-done-a{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:6px}
.vs-done-qr{display:block; width:104px; height:104px; padding:6px; background:#fff; border:1px solid var(--line); line-height:0}
.vs-done-qr svg{width:100%; height:100%}
.vs-paid{margin:6px 0 0; font-weight:600}
.vs-done .note{text-align:left; margin:4px 0 8px}
@media (max-width:560px){ .vs-done-i{grid-template-columns:minmax(0,1fr); justify-items:center} .vs-done-b{justify-items:start; width:100%} }

/* the A4 voucher: fixed page units, scaled as a whole (a print preview does not follow the text size) */
.vs-a4{position:relative; flex:none; overflow:hidden; background:#FFFDF9; box-shadow:0 6px 22px rgba(20,18,12,.18), 0 1px 3px rgba(20,18,12,.12)}
.vs-a4.is-print{box-shadow:none}
.vs-a4-page{--a4u:16px; --vs-sans:'Hanken Grotesk', system-ui, sans-serif; position:absolute; left:0; top:0; width:595px; height:842px; display:grid; transform-origin:0 0; font-size:var(--a4u); line-height:1.4; color:#26231F; background:#FFFDF9; font-family:var(--vs-sans); text-align:left; overflow:hidden; -webkit-print-color-adjust:exact; print-color-adjust:exact}
.vs-a4-page *{box-sizing:border-box}
.vs-t-classic, .vs-t-collage{grid-template-rows:auto minmax(0,1fr) auto}
.vs-a4-ph{background-color:#E9E5DB; background-repeat:no-repeat; background-size:cover; background-position:center}
.vs-a4-ph.is-empty{background-image:repeating-linear-gradient(135deg, #EDE9E0 0 14px, #E2DDD1 14px 28px)}
.vs-a4-top{position:relative}
.vs-t-classic .vs-a4-ph{height:320px}
.vs-a4-seal{position:absolute; z-index:1; left:48px; bottom:-36px; display:flex; align-items:center; padding:14px 22px; border-radius:calc(var(--r) * 1.2); background:#FFFDF9; color:var(--ink); box-shadow:0 12px 28px -14px rgba(0,0,0,.4)}
.vs-a4-seal .vs-a4-logo{height:58px; width:auto}
.vs-a4-body{display:grid; gap:12px; align-content:start; justify-items:start; min-height:0; padding:56px 48px 0; overflow:hidden}
.vs-a4-label{font:600 0.75em/1 var(--vs-sans); letter-spacing:.32em; text-transform:uppercase; color:var(--ink)}
.vs-a4-big{font:400 2.375em/1.08 var(--vf); color:#26231F; text-wrap:balance; overflow-wrap:anywhere}
.vs-a4-big.is-value{font-size:4em}
.vs-a4-head{font:400 1.625em/1.2 var(--vf); color:var(--ink); overflow-wrap:anywhere}
.vs-a4-msg{margin:0; font:400 1em/1.5 var(--vf); color:#26231F; overflow:hidden; overflow-wrap:anywhere; width:100%}
.vs-a4-msg ul{margin:0; padding-left:1.2em}
.vs-a4-msg.is-ph{font-style:italic; color:#5E574D; opacity:.75; font-size:.95em}
.vs-t-classic .vs-a4-msg{max-height:240px}
.vs-t-collage .vs-a4-msg{max-height:240px}
.vs-t-full .vs-a4-msg{max-height:300px}
.vs-t-elegant .vs-a4-msg{max-height:320px}
.vs-a4-names{display:flex; flex-wrap:wrap; gap:4px 32px; font:400 0.8125em/1.4 var(--vs-sans); color:#5E574D}
.vs-a4-names b{font-weight:600; color:#26231F}
.vs-a4-foot{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:16px; align-items:end; margin:0 48px 36px; padding-top:14px; border-top:1px solid rgba(0,0,0,.14); font:400 0.6875em/1.5 var(--vs-sans); color:#5E574D}
.vs-a4-where{display:grid; min-width:0}
.vs-a4-code{display:grid; justify-items:end; gap:2px}
.vs-a4-code small{font:500 0.9em/1.2 var(--vs-sans); letter-spacing:.14em; text-transform:uppercase}
.vs-a4-code b{font:600 1.36em/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color:#26231F; letter-spacing:.06em; white-space:nowrap}
.vs-a4-qr{display:block; width:62px; height:62px; padding:5px; background:#FFFFFF; line-height:0}
.vs-a4-qr svg{display:block; width:100%; height:100%}
.vs-a4-grid{position:relative; display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:8px; height:300px; padding:28px 28px 0}
.vs-a4-grid .is-big{grid-row:1 / 3}
.vs-a4-grid .vs-a4-ph{border-radius:calc(var(--r) / 4)}
.vs-t-collage .vs-a4-body{padding-top:66px}
.vs-t-full{grid-template-rows:minmax(0,1fr)}
.vs-a4-ph.is-bg{position:absolute; inset:0}
.vs-a4-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.02) 18%, rgba(0,0,0,.5) 46%, rgba(0,0,0,.78) 74%)}
.vs-a4-logo{display:block}
.vs-a4-logo.is-top{position:absolute; top:36px; left:48px; height:58px; width:auto; color:#FFFFFF}
.vs-a4-low{position:relative; align-self:end; display:grid; gap:24px}
.vs-t-full .vs-a4-body{padding:0 48px}
.vs-t-full .vs-a4-label, .vs-t-full .vs-a4-big, .vs-t-full .vs-a4-head, .vs-t-full .vs-a4-msg, .vs-t-full .vs-a4-names b, .vs-t-full .vs-a4-code b{color:#FFFFFF}
.vs-t-full .vs-a4-names, .vs-t-full .vs-a4-foot, .vs-t-full .vs-a4-msg.is-ph{color:rgba(255,255,255,.88)}
.vs-t-full .vs-a4-foot{border-top-color:rgba(255,255,255,.4)}
.vs-t-elegant{padding:26px; background:#FBF8F2}
.vs-a4-frame{display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:20px; height:100%; padding:48px 36px 28px; border:1.5px solid var(--ink); outline:1px solid var(--ink); outline-offset:-8px; border-radius:var(--r)}
.vs-a4-logo.is-center{justify-self:center; height:100px; width:auto; color:var(--ink)}
.vs-t-elegant .vs-a4-body{align-self:center; justify-items:center; padding:0 12px; text-align:center}
.vs-t-elegant .vs-a4-msg ul{list-style-position:inside; padding:0}
.vs-t-elegant .vs-a4-names{justify-content:center}
.vs-t-elegant .vs-a4-foot{margin:0 12px}
.vs-a4-mark{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(-32deg); font:700 9.375em/1 var(--vs-sans); letter-spacing:.06em; color:rgba(140,140,140,.32); pointer-events:none; white-space:nowrap}
.vs-mini-art, .vs-row-art{display:block; line-height:0}
.vs-mini-art .vs-a4, .vs-row-art .vs-a4, .vs-tpl-art .vs-a4{box-shadow:0 1px 4px rgba(20,18,12,.2)}

/* print: only the voucher, as one A4 page */
#vsPrint{display:none}
@page vsA4{size:A4; margin:0}
@media print{
  body.vs-printing > *:not(#vsPrint){display:none!important}
  body.vs-printing{margin:0; background:#FFFFFF}
  body.vs-printing::before{display:none}
  body.vs-printing #vsPrint{display:block; page:vsA4; width:794px; height:1122px; overflow:hidden; break-after:avoid}
  #vsPrint .vs-a4{box-shadow:none}
}

/* booking engine: steps, results with rates, cart, guests and extras, payment, confirmation */
.ibe-steps{list-style:none; margin:4px 0 0; padding:0 0 16px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; border-bottom:1px solid var(--line)}
.ibe-steps li{display:flex; align-items:center; gap:14px}
.ibe-steps li:not(.ibe-step-of) + li:not(.ibe-step-of)::before{content:""; width:clamp(16px, 3vw, 44px); height:1px; background:var(--field-line)}
.ibe-steps button, .ibe-step-in{display:inline-flex; align-items:center; gap:10px; padding:4px 0; border:0; background:none; color:var(--ink-2); font:500 0.9375rem/1.2 var(--f-body)}
.ibe-steps button{cursor:pointer}
.ibe-steps button:hover .ibe-step-t{text-decoration:underline; text-underline-offset:3px}
.ibe-step-n{width:30px; height:30px; flex:none; display:inline-grid; place-items:center; border:1px solid var(--field-line); border-radius:var(--r); font:600 0.875rem/1 var(--f-body); font-variant-numeric:tabular-nums}
.ibe-step-n svg{width:16px; height:16px}
.ibe-steps .is-cur .ibe-step-n{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.ibe-steps .is-cur .ibe-step-t{color:var(--ink); font-weight:600}
.ibe-steps .is-done .ibe-step-n{background:color-mix(in oklab, var(--accent) 22%, var(--surface)); border-color:var(--accent); color:var(--accent-ink)}
.ibe-steps .is-done .ibe-step-t{color:var(--ink)}
.ibe-steps .ibe-step-of{display:none}
@media (max-width:640px){
  .ibe-steps{gap:8px 10px}
  .ibe-steps li{gap:10px}
  .ibe-step-t{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .ibe-steps .ibe-step-of{display:block; order:-1; flex-basis:100%; font-size:0.875rem; color:var(--ink-2)}
}
.ibe-sec{padding:clamp(20px, 3vw, 32px) 0 clamp(72px, 9vw, 120px)}
.ibe-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:32px; align-items:start}
.ibe-main{min-width:0}
@media (min-width:1100px){
  .ibe-grid{grid-template-columns:minmax(0,1fr) 340px; gap:40px}
  .ibe-aside{position:sticky; top:calc(76px + 65px + 20px); max-height:calc(100svh - 76px - 65px - 40px); overflow:auto; overscroll-behavior:contain}
}
@media (max-width:1099px){ .ibe-aside.is-rooms{display:none} }
.ibe-h1{font-size:clamp(2.125rem, calc(4vw * var(--fs, 1)), 3.25rem)}
.ibe-h1:focus{outline:none}
.ibe-lead{margin-top:10px; max-width:62ch; font-size:1.062rem; line-height:1.55; color:var(--ink-2)}
.ibe-back{display:inline-flex; align-items:center; gap:6px; margin-bottom:10px; padding:6px 0; border:0; background:none; color:var(--ink-2); font:500 0.9375rem/1.2 var(--f-body); cursor:pointer}
.ibe-back svg{width:18px; height:18px}
.ibe-back:hover{color:var(--ink)}
.ibe-link{display:inline-flex; align-items:center; gap:6px; padding:4px 0; border:0; background:none; color:var(--accent-ink); font:600 0.875rem/1.3 var(--f-body); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; cursor:pointer}
.ibe-link svg{width:16px; height:16px; flex:none}
.ibe-sub{margin:0 0 12px; font:600 0.7812rem/1.2 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink)}
.ibe-small{font-size:0.875rem; line-height:1.45; color:var(--ink-2)}
.ibe-fine{font-size:0.8438rem; line-height:1.45; color:var(--ink-2)}

/* step 1: stay, offers, rooms and rates */
.ibe-stay{display:grid; gap:14px; margin-bottom:24px}
.ibe-chips{display:flex; flex-wrap:wrap; gap:8px}
.ibe-chip{display:inline-flex; align-items:center; gap:8px; min-height:var(--ctl-sm); padding:6px 14px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); font:500 0.9375rem/1.25 var(--f-body); text-align:left; cursor:pointer}
.ibe-chip svg{width:18px; height:18px; flex:none; color:var(--accent-ink)}
.ibe-chip:hover{border-color:var(--ink)}
.ibe-chip.is-code{border-style:dashed; font-weight:700; letter-spacing:.06em}
.ibe-chip.is-code svg:last-child{width:16px; height:16px; color:var(--ink-2)}
.ibe-status{font-size:0.9062rem; color:var(--ink-2)}
.ibe-ages{flex-wrap:wrap; align-items:center; margin-bottom:24px}
.ibe-ages span{flex:1 1 260px}
.ibe-rooms.is-locked .ibe-add{opacity:.45; pointer-events:none}
.ibe-deals{margin-bottom:28px}
.ibe-deal-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:12px}
.ibe-deal{display:grid; gap:8px; align-content:start; padding:18px; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--r)}
.ibe-deal.is-hit{background:color-mix(in oklab, var(--accent) 12%, var(--surface))}
.ibe-deal.is-off{border-left-color:var(--field-line)}
.ibe-deal-k{display:flex; align-items:center; gap:8px; font:700 0.7812rem/1 var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink)}
.ibe-deal-k svg{width:16px; height:16px}
.ibe-deal h3{margin:0; font:600 1.062rem/1.3 var(--f-body)}
.ibe-deal p:not(.ibe-deal-k){font-size:0.9062rem; line-height:1.45; color:var(--ink-2)}
.ibe-deal .btn{justify-self:start; margin-top:4px; white-space:normal; text-align:left; height:auto; min-height:var(--ctl-sm); padding-block:8px; line-height:1.25}
/* price comparison: one strip on wide screens, a line that opens on phones */
.ibe-cmp{margin-bottom:24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.ibe-cmp-tog{display:none; width:100%; min-height:60px; align-items:center; gap:12px; padding:10px 12px 10px 16px; border:0; background:none; color:var(--ink); text-align:left; cursor:pointer; font:inherit}
.ibe-cmp-tog > svg{width:22px; height:22px; flex:none; color:var(--accent-ink)}
.ibe-cmp-tog > svg:last-child{width:22px; height:22px; color:var(--ink-2); transition:transform .2s var(--ease)}
.ibe-cmp-tog[aria-expanded="true"] > svg:last-child{transform:rotate(180deg)}
.ibe-cmp-tog > span{flex:1; min-width:0; display:grid; gap:2px}
.ibe-cmp-tog b{font-size:0.9375rem}
.ibe-cmp-tog > span > span{font-size:0.8438rem; line-height:1.35; color:var(--ink-2)}
.ibe-cmp-tog small{font-size:0.7188rem; line-height:1.35; color:var(--ink-2)}
.ibe-cmp-full{display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 3fr); gap:8px 16px; align-items:center; padding:14px 16px}
.ibe-cmp-head{display:grid; gap:3px; min-width:0}
.ibe-cmp-t{display:flex; align-items:center; gap:8px; margin:0; font:600 1rem/1.3 var(--f-body)}
.ibe-cmp-t svg{width:20px; height:20px; color:var(--accent-ink); flex:none}
.ibe-cmp-save{margin:0; font-weight:600; font-size:0.9062rem; line-height:1.35; color:var(--accent-ink)}
.ibe-cmp-m{margin:0; font-size:0.8125rem; line-height:1.35; color:var(--ink-2)}
.ibe-cmp-tiles{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px}
.ibe-cmp-tile{display:grid; gap:1px; min-width:0; padding:10px 12px; background:var(--surface-2); border-radius:var(--r)}
.ibe-cmp-tile span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.7812rem; line-height:1.3; color:var(--ink-2)}
.ibe-cmp-tile b{font:600 1.125rem/1.3 var(--f-body)}
.ibe-cmp-tile.is-me{background:var(--ink); color:var(--bg)}
.ibe-cmp-tile.is-me span{color:var(--bg)}
.ibe-cmp-full > .cmp-legal{grid-column:1 / -1}
.ibe-cmp-slot{margin-bottom:24px}
.ibe-cmp-slot .ibe-cmp{margin-bottom:0}
.ibe-cmp-load{display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.ibe-cmp-load > span:last-child{display:grid; min-width:0}
.ibe-cmp-load b{font-size:0.9062rem; line-height:1.35}
.ibe-cmp-load small{font-size:0.7812rem; color:var(--ink-2)}
.ibe-cmp-st{display:inline-flex; align-items:center; gap:6px; font-size:0.7812rem; line-height:1.35; color:var(--ink-2)}
.ibe-cmp-tile.is-in{animation:cmpIn .35s var(--ease) both}
.ibe-cmp-tile.is-wait{gap:6px; align-content:center}
.ibe-cmp-tile.is-wait i{display:block; height:10px; width:55%; background:color-mix(in oklab, var(--ink) 10%, transparent)}
.ibe-cmp-tile.is-wait i:nth-child(2){height:16px; width:70%}
.ibe-cmp-tile.is-wait i:nth-child(3){width:40%}
@keyframes cmpIn{from{opacity:0; transform:translateY(6px) scale(.97)}to{opacity:1; transform:none}}
@media (max-width:899px){
  .ibe-cmp-tog{display:flex}
  .ibe-cmp-full{display:none; grid-template-columns:minmax(0, 1fr); padding:0 12px 14px}
  .ibe-cmp.is-open .ibe-cmp-full{display:grid}
  .ibe-cmp-head{display:none}
  .ibe-cmp-tiles{gap:6px}
  .ibe-cmp-tile{padding:8px}
  .ibe-cmp-tile span{font-size:0.7188rem}
  .ibe-cmp-tile b{font-size:0.9688rem}
}
@media (max-width:460px){ .ibe-cmp-tiles{grid-template-columns:repeat(2, minmax(0, 1fr))} }
.ibe-rev{margin:12px 0 0}
.ibe-rooms{display:grid; gap:20px}
.ibe-room{display:grid; grid-template-columns:minmax(0,1fr); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; scroll-margin-top:calc(76px + 65px + 16px)}
@media (min-width:760px){ .ibe-room{grid-template-columns:minmax(0,40%) minmax(0,1fr)} .ibe-rates{grid-column:1 / -1} }
.ibe-pics{display:grid; grid-template-columns:1fr 1fr; gap:3px; align-content:start; background:var(--surface)}
.ibe-pic{position:relative; display:block; padding:0; border:0; background:var(--surface-2); overflow:hidden; cursor:zoom-in}
.ibe-pic img{width:100%; height:100%; aspect-ratio:16/10; object-fit:cover; background-size:cover; transition:transform .6s var(--ease)}
.ibe-pic.is-main{grid-column:1 / -1}
.ibe-pic.is-main img{aspect-ratio:4/3}
/* only with a real pointer: on touch screens the zoom would stay on the picture under the last tap */
@media (hover:hover){ .ibe-pic:hover img{transform:scale(1.03)} }
.ibe-pic:focus-visible{outline-offset:-4px}
.ibe-photos{position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px; background:rgba(12,14,10,.74); color:#fff; border-radius:var(--r); font:600 0.8125rem/1 var(--f-body)}
.ibe-photos svg{width:16px; height:16px}
@media (max-width:759px){ .ibe-pic:not(.is-main){display:none} .ibe-pic.is-main img{aspect-ratio:16/10} }
.ibe-room-body{display:flex; flex-direction:column; gap:10px; min-width:0; padding:clamp(18px, 2.4vw, 28px)}
.ibe-room-tag{font:600 0.75rem/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink)}
.ibe-room-n{font-size:clamp(1.5rem, calc(2.4vw * var(--fs, 1)), 2rem); line-height:1.1}
.ibe-facts{list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:0.9062rem; color:var(--ink-2)}
.ibe-facts li{display:inline-flex; align-items:center; gap:7px}
.ibe-facts svg{width:18px; height:18px; flex:none; color:var(--accent-ink)}
.ibe-facts .dog-ok{color:var(--accent-ink); font-weight:600}
.ibe-facts .dog-no svg{color:var(--ink-2)}
.ibe-room-d{font-size:0.9688rem; line-height:1.55; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.ibe-details{align-self:flex-start}
.ibe-room-foot{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 20px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line)}
.ibe-from{display:grid; gap:3px}
.ibe-from-k, .ibe-from-n{font-size:0.875rem; color:var(--ink-2)}
.ibe-from b{font:600 1.75rem/1.1 var(--f-body)}
.ibe-incart{display:inline-flex; align-items:center; gap:6px; font-size:0.875rem; font-weight:600; color:var(--accent-ink)}
.ibe-incart svg{width:16px; height:16px}
.ibe-rates-btn svg{width:16px; height:16px; transition:transform .2s var(--ease)}
.ibe-rates-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.ibe-room-foot .notice{flex:1 1 100%}
.ibe-off{flex:1 1 auto}
.ibe-room.is-off .ibe-pic img{filter:grayscale(.85); opacity:.55}
.ibe-sold{flex:1 1 100%; display:grid; gap:10px}
.ibe-alt-lead{font-size:0.9062rem; color:var(--ink-2)}
.ibe-alts{display:flex; flex-wrap:wrap; gap:8px}
.ibe-alt{display:grid; gap:3px; min-height:var(--ctl); padding:8px 14px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); text-align:left; cursor:pointer}
.ibe-alt b{font-size:0.9375rem; font-weight:600}
.ibe-alt span{font-size:0.8438rem; color:var(--ink-2)}
.ibe-alt:hover{border-color:var(--ink)}
/* flexible search: the cheapest stays in the period as cards, the best one marked */
.ibe-best{display:grid; gap:12px; margin-top:8px}
.ibe-best-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px}
.ibe-best-c{gap:4px; padding:14px 16px; align-content:start}
.ibe-best-c.is-top{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:color-mix(in oklab, var(--accent) 8%, var(--surface))}
.ibe-best-c .ibe-best-k{font:700 0.6875rem/1.2 var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink)}
.ibe-best-c .ibe-best-code{display:inline-flex; align-items:center; gap:6px; color:var(--accent-ink); font-weight:600}
.ibe-best-code svg{width:14px; height:14px}
.ibe-best-c .ibe-best-p{padding-top:4px; color:var(--ink)}
.ibe-best-p b{font:var(--display-weight) 1.25rem/1.2 var(--f-head)}
.ibe-rates{border-top:1px solid var(--line); background:color-mix(in oklab, var(--surface-2) 45%, var(--surface))}
.ibe-rate{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px 24px; padding:18px clamp(18px, 2.4vw, 28px); border-bottom:1px solid var(--line)}
.ibe-rate:last-child{border-bottom:0}
.ibe-rate.is-best{box-shadow:inset 3px 0 0 var(--accent)}
.ibe-rate-info{display:grid; gap:4px; min-width:0}
.ibe-rate-n{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; font-size:1.062rem}
.ibe-rate-n svg{width:20px; height:20px; flex:none; color:var(--accent-ink)}
.ibe-tag{display:inline-flex; align-items:center; height:24px; padding:0 8px; background:var(--accent); color:var(--on-accent); border-radius:var(--r); font:700 0.7188rem/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase}
.ibe-rate-d{font-size:0.9062rem; color:var(--ink-2)}
.ibe-rate-x{display:flex; flex-wrap:wrap; align-items:center; gap:2px 14px}
.ibe-codein{display:inline-flex; align-items:center; gap:6px; font-size:0.875rem; font-weight:600; color:var(--accent-ink)}
.ibe-codein svg{width:15px; height:15px}
.ibe-rate-p{display:grid; justify-items:end; gap:2px; text-align:right}
.ibe-rate-p s{font-size:0.875rem; color:var(--ink-2)}
.ibe-rate-p b{font:600 1.375rem/1.1 var(--f-body)}
.ibe-rate-p span{font-size:0.8438rem; color:var(--ink-2)}
.ibe-add{min-width:150px}
.ibe-add svg{width:16px; height:16px}
@media (max-width:640px){
  .ibe-rate{grid-template-columns:minmax(0,1fr) auto}
  .ibe-rate-info{grid-column:1 / -1}
  .ibe-rate-p{justify-items:start; text-align:left}
  .ibe-add{min-width:0}
}

/* cart */
.ibe-cart{display:grid; gap:14px; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.ibe-cart-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.ibe-cart-t{margin:0; font:var(--display-weight) 1.5rem/1.15 var(--f-head); letter-spacing:var(--display-track)}
.ibe-cart-head span{font-size:0.875rem; color:var(--ink-2)}
/* several rooms: one line per room of the search, the one to choose next marked */
.ibe-pick{display:grid; gap:4px; padding:16px clamp(16px, 2.4vw, 22px); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface)}
.ibe-pick .ibe-sub{margin:0 0 4px; outline:none}
.ibe-pks{list-style:none; margin:0; padding:0; display:grid}
.ibe-pk{display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:12px; padding:8px 0; border-top:1px solid var(--line)}
.ibe-pk:first-child{border-top:0}
.ibe-pk-n{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; border:1px solid var(--field-line); font:600 0.875rem/1 var(--f-body); color:var(--ink-2)}
.ibe-pk-n svg{width:16px; height:16px}
.ibe-pk.is-done .ibe-pk-n{border-color:var(--accent); background:var(--accent); color:var(--on-accent)}
.ibe-pk.is-now .ibe-pk-n{border:2px solid var(--accent-ink); color:var(--accent-ink)}
.ibe-pk-t{display:grid; gap:2px; min-width:0}
.ibe-pk-t b{font-size:0.9375rem; font-weight:600; line-height:1.3}
.ibe-pk-t > span{font-size:0.8438rem; line-height:1.4; color:var(--ink-2)}
.ibe-pk-t em{font-style:normal; font-weight:600; color:var(--accent-ink)}
.ibe-items{list-style:none; margin:0; padding:0; display:grid}
.ibe-item{display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:8px 12px; padding:12px 0; border-top:1px solid var(--line)}
.ibe-item.is-open .ibe-item-pic{display:grid; place-items:center; width:56px; height:56px; border:1px dashed var(--field-line); border-radius:var(--r); font:600 1rem/1 var(--f-body); color:var(--ink-2)}
.ibe-item-pic img{width:56px; height:56px; object-fit:cover; border-radius:var(--r); background-size:cover}
.ibe-item-m{display:grid; align-content:start; gap:3px; min-width:0}
.ibe-item-m b{font-size:0.9375rem; font-weight:600; line-height:1.3}
.ibe-item-m > span{font-size:0.8438rem; line-height:1.4; color:var(--ink-2)}
.ibe-item-e{display:grid; justify-items:end; align-content:start; gap:2px}
.ibe-item-e b{font-weight:600; white-space:nowrap}
.ibe-del{width:40px; height:40px; margin-right:-8px; color:var(--ink-2)}
.ibe-del svg{width:18px; height:18px}
.ibe-lines{grid-column:2 / -1; display:grid; gap:3px; margin:0; font-size:0.8438rem}
.ibe-lines div{display:flex; justify-content:space-between; gap:12px}
.ibe-lines dt{color:var(--ink-2)}
.ibe-lines dd{margin:0; white-space:nowrap}
.ibe-total{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-top:14px; border-top:1px solid var(--line)}
.ibe-total span{font-weight:600}
.ibe-total b{font:600 1.625rem/1 var(--f-body)}
.ibe-total.is-now{padding-top:0; border-top:0}
.ibe-total.is-now span{font-weight:500; color:var(--ink-2)}
.ibe-total.is-now b{font-size:1.125rem}
.ibe-go{width:100%}
/* the way on stays at the foot of the right column (and of the selection sheet) while the content above it scrolls */
.ibe-cart-go{position:sticky; bottom:0; z-index:1; display:grid; gap:8px; margin:0 -20px -20px; padding:12px 20px 20px; background:var(--surface); border-top:1px solid var(--line); border-radius:0 0 var(--r-lg) var(--r-lg)}
.ibe-go svg, .ibe-cta svg{width:18px; height:18px}
.ibe-more{justify-self:start}
.ibe-more svg{width:16px; height:16px}
.ibe-hint{display:flex; gap:10px; font-size:0.8438rem; line-height:1.45; color:var(--ink-2)}
.ibe-hint svg{width:20px; height:20px; flex:none; color:var(--accent-ink)}
.ibe-bar{position:fixed; z-index:60; left:0; right:0; bottom:0; display:flex; align-items:center; gap:12px; padding:10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background:var(--surface); color:var(--ink); border-top:1px solid var(--line); box-shadow:0 -16px 34px -26px rgba(0,0,0,.55)}
.ibe-bar-sum{flex:1; min-width:0; min-height:var(--ctl); display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:8px; padding:0; border:0; background:none; color:inherit; text-align:left; cursor:pointer}
.ibe-bar-sum span{grid-column:1; font-size:0.8438rem; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ibe-bar-sum b{grid-column:1; font:600 1.25rem/1.15 var(--f-body)}
.ibe-bar-sum svg{grid-column:2; grid-row:1 / span 2; width:20px; height:20px; transform:rotate(180deg)}
.ibe-bar .btn{flex:none; max-width:62%}
.ibe-bar-go svg{width:18px; height:18px}
/* the bar carries the total and the way on, so the total line at the end of the form would only repeat it */
body.ibe-has-bar .ibe-psum{display:none}
@media (min-width:1100px){ .ibe-bar{display:none!important} }
body.pop-open .ibe-bar{display:none}
@media (max-width:1099px){
  body.ibe-has-bar .dial, body.ibe-has-bar .cw{bottom:calc(96px + env(safe-area-inset-bottom, 0px))}
  body.ibe-has-bar .ibe-sec{padding-bottom:180px}
}
dialog.ibe-sheet{width:100%; max-width:none; max-height:86svh; margin:auto 0 0; border-radius:var(--r-lg) var(--r-lg) 0 0}
.ibe-sheet-h{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 12px 0 20px}
.ibe-sheet-h h2{margin:0; font:var(--display-weight) 1.5rem/1.2 var(--f-head); letter-spacing:var(--display-track)}
.ibe-sheet .ibe-cart{padding:4px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border:0; border-radius:0}
.ibe-sheet .ibe-cart-head{display:none}
/* the rates of a room in the sheet on phones */
.ibe-sheet-h p{margin:2px 0 0; color:var(--ink-2); font-size:0.875rem}
.ibe-sheet.is-rates .ibe-rates{margin-top:12px; padding-bottom:env(safe-area-inset-bottom, 0px); background:none}

/* step 2: one panel per room */
.ibe-banner{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:20px; padding:14px 16px; background:color-mix(in oklab, var(--accent) 14%, var(--surface)); border:1px solid color-mix(in oklab, var(--accent) 50%, transparent); border-radius:var(--r); font-weight:500}
.ibe-banner svg{width:22px; height:22px; flex:none; color:var(--accent-ink)}
.ibe-banner span{flex:1 1 240px}
.ibe-fs{display:grid; gap:10px; min-width:0; margin:0; padding:0; border:0}
.ibe-lg{margin:0 0 12px; padding:0; font:600 0.7812rem/1.2 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink)}
.ibe-fields{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 14px}
@media (max-width:560px){ .ibe-fields{grid-template-columns:minmax(0,1fr)} }
.ibe-field{display:grid; align-content:start; gap:6px; min-width:0}
.ibe-field.is-wide{grid-column:1 / -1}
.ibe-field label, .ibe-lbl{font-size:0.875rem; font-weight:500; color:var(--ink)}
.ibe-field input, .ibe-field textarea{width:100%; height:var(--ctl); padding:0 14px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); font:400 1rem/1.3 var(--f-body)}
.ibe-field textarea{height:auto; min-height:96px; padding:12px 14px; resize:vertical}
.ibe-field input::placeholder{color:var(--ink-2)}
.ibe-field small{font-size:0.8125rem; line-height:1.4; color:var(--ink-2)}
.ibe-field.has-err input{border-color:var(--bad); box-shadow:inset 0 0 0 1px var(--bad)}
/* birth date: typing stays possible, the calendar opens from the button only */
.ibe-in-cal{position:relative}
.ibe-in-cal input{padding-right:56px}
.ibe-cal-btn{position:absolute; right:4px; top:50%; transform:translateY(-50%); width:48px; height:48px; display:grid; place-items:center; padding:0; border:0; border-radius:var(--r); background:transparent; color:var(--accent-ink); cursor:pointer}
.ibe-cal-btn:hover{background:color-mix(in oklab, currentColor 12%, transparent)}
.ibe-cal-btn svg{width:22px; height:22px}
dialog.bdp{max-width:min(380px, calc(100vw - 24px)); padding:0}
dialog.bdp[open]{display:flex; flex-direction:column; max-height:calc(100svh - 24px)}
/* at the field (larger screens): hangs under or over the field and scrolls with the page */
dialog.bdp.is-anchored{position:absolute; z-index:70; inset:auto; width:360px; margin:0; max-height:min(560px, calc(100svh - 120px)); border:1px solid var(--field-line); box-shadow:0 24px 50px -20px rgba(0,0,0,.45)}
.bdp-step{margin:2px 4px 10px; font:600 0.875rem/1.3 var(--f-body); color:var(--ink-2)}
.bdp-months{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; padding:2px}
.bdp-months button{min-height:48px; padding:0 6px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink); font:500 0.9375rem/1.2 var(--f-body); cursor:pointer}
.bdp-months button:hover:not(:disabled){background:var(--surface-2)}
.bdp-months button[aria-current="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.bdp-months button:disabled{color:var(--ink-2); opacity:.45; cursor:default}
.bdp-head{flex:none; display:grid; gap:4px; padding:18px 20px 14px; border-bottom:1px solid var(--line)}
.bdp-head p{margin:0}
.bdp-l{font:600 0.7812rem/1.2 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink)}
.bdp-v{font:var(--display-weight) 1.625rem/1.2 var(--f-head); letter-spacing:var(--display-track)}
.bdp-n{font-size:0.8125rem; color:var(--ink-2)}
.bdp-body{flex:1 1 auto; min-height:0; overflow-y:auto; padding:12px 14px}
.bdp-nav{display:flex; align-items:center; gap:4px; margin-bottom:6px}
.bdp-ym{flex:1; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 8px; border:0; border-radius:var(--r); background:transparent; color:var(--ink); font:600 1rem/1.2 var(--f-body); text-align:left; cursor:pointer}
.bdp-ym svg{width:18px; height:18px}
.bdp-ym:hover{background:var(--surface-2)}
.bdp-nav .btn-x:disabled{opacity:.35; cursor:default}
.bdp-wd, .bdp-days{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:2px}
.bdp-wd span{padding:6px 0; text-align:center; font-size:0.7812rem; font-weight:600; color:var(--ink-2)}
.bdp-days button{aspect-ratio:1; min-height:40px; border:0; border-radius:var(--r); background:transparent; color:var(--ink); font:500 0.9375rem/1 var(--f-body); cursor:pointer}
.bdp-days button:hover:not(:disabled){background:var(--surface-2)}
.bdp-days button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent)}
.bdp-days button:disabled{color:var(--ink-2); opacity:.45; cursor:default}
.bdp-years{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; max-height:min(300px, 50svh); overflow-y:auto; padding:2px}
.bdp-years button{min-height:44px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink); font:500 0.9375rem/1 var(--f-body); cursor:pointer}
.bdp-years button:hover{background:var(--surface-2)}
.bdp-years button[aria-current="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.bdp-foot{flex:none; display:flex; justify-content:flex-end; padding:10px 14px 14px; border-top:1px solid var(--line)}

.ibe-err{margin:0; font-size:0.8438rem; line-height:1.4; color:var(--bad)}
.ibe-dd{display:block}
.ibe-dd .dd-btn{width:100%; height:var(--ctl); padding:0 14px; background:var(--surface); font:400 1rem/1.2 var(--f-body); letter-spacing:0}
.ibe-dd .dd-btn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ibe-seg{display:inline-flex; max-width:100%; border:1px solid var(--field-line); border-radius:var(--r); overflow:hidden; justify-self:start}
.ibe-seg button{min-height:48px; padding:6px 18px; border:0; background:var(--surface); color:var(--ink); font:600 0.9062rem/1.25 var(--f-body); cursor:pointer}
.ibe-seg button + button{border-left:1px solid var(--field-line)}
.ibe-seg button[aria-checked="true"]{background:var(--ink); color:var(--bg)}
.ibe-seg button:focus-visible{outline-offset:-4px}
.ibe-seg-wide{display:flex; justify-self:stretch}
.ibe-seg-wide button{flex:1 1 0}
.ibe-more-d{background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.ibe-more-d > summary{display:grid; grid-template-columns:minmax(0,1fr) 20px; gap:2px 12px; padding:14px 16px; list-style:none; cursor:pointer}
.ibe-more-d > summary::-webkit-details-marker{display:none}
.ibe-more-d > summary::after{content:""; grid-column:2; grid-row:1 / span 2; align-self:center; justify-self:center; width:9px; height:9px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s var(--ease)}
.ibe-more-d[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.ibe-more-d > summary span{font-size:0.9688rem}
.ibe-more-d > summary b{font-weight:600}
.ibe-more-d > summary small{font-size:0.8438rem; line-height:1.4; color:var(--ink-2)}
.ibe-more-d > :not(summary){margin:0 16px 16px}

/* upgrade */
.ibe-up{position:relative; isolation:isolate; display:grid; min-height:280px; color:#fff; border-radius:var(--r-lg); overflow:hidden}
.ibe-up-pic{position:absolute; inset:0; z-index:-1}
.ibe-up-pic picture, .ibe-up-pic img{width:100%; height:100%}
.ibe-up-pic img{object-fit:cover; background-size:cover}
.ibe-up-pic::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,9,7,.2) 0%, rgba(8,9,7,.55) 42%, rgba(8,9,7,.9) 100%)}
.ibe-up-b{display:grid; align-content:end; gap:8px; padding:clamp(18px, 3vw, 28px)}
.ibe-up-k{display:inline-flex; align-items:center; gap:6px; justify-self:start; height:28px; padding:0 10px; background:#fff; color:#16130d; border-radius:var(--r); font:700 0.75rem/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase}
.ibe-up-k svg{width:16px; height:16px}
.ibe-up-l{font-size:0.9375rem; color:rgba(255,255,255,.9)}
.ibe-up h3{margin:0; font-size:clamp(1.625rem, calc(3vw * var(--fs, 1)), 2.25rem); line-height:1.1}
.ibe-up-f{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.ibe-up-f li{padding:5px 10px; border:1px solid rgba(255,255,255,.55); border-radius:var(--r); font-size:0.8438rem}
.ibe-up-p{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; margin-top:6px}
.ibe-up-p b{font:600 1.75rem/1 var(--f-body)}
.ibe-up-p s{color:rgba(255,255,255,.75)}
.ibe-up-p span, .ibe-up-sum{font-size:0.875rem; color:rgba(255,255,255,.9)}
.ibe-up-a{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.ibe-up-yes{background:#fff; color:#16130d}
.ibe-up-yes:hover{background:#ece8de}
.ibe-up-no{border-color:rgba(255,255,255,.65); color:#fff}
.ibe-up-no:hover{border-color:#fff}
.ibe-up :focus-visible{outline-color:#fff}
@media (max-width:560px){ .ibe-up-a{flex-direction:column} .ibe-up-a .btn{width:100%} }
.ibe-upd{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:14px 16px; background:color-mix(in oklab, var(--accent) 14%, var(--surface)); border:1px solid color-mix(in oklab, var(--accent) 50%, transparent); border-radius:var(--r); font-weight:600}
.ibe-upd svg{width:20px; height:20px; flex:none; color:var(--accent-ink)}
.ibe-upd span{flex:1 1 220px}
/* extras as a list: one tap adds, amount and days right in the line, the description folded away */
.ibe-xl{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.ibe-xr{display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:start; gap:6px 12px; padding:10px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.ibe-xr.is-on{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.ibe-xr-pic img{width:56px; height:56px; object-fit:cover; border-radius:var(--r); background-size:cover}
.ibe-xr-m{display:grid; gap:2px; min-width:0; font-size:0.875rem}
.ibe-xr-m b{font-size:0.9375rem; font-weight:600; line-height:1.3}
.ibe-xr-m > span{color:var(--ink-2); font-size:0.8125rem; line-height:1.35}
.ibe-xr-m > .ibe-xr-on{display:inline-flex; align-items:center; gap:6px; color:var(--accent-ink); font-weight:600}
.ibe-xr-on svg{width:14px; height:14px; flex:none}
.ibe-xr-d summary{display:inline-flex; align-items:center; gap:5px; min-height:32px; color:var(--accent-ink); font-size:0.8125rem; font-weight:600; cursor:pointer; list-style:none}
.ibe-xr-d summary::-webkit-details-marker{display:none}
.ibe-xr-d summary svg{width:14px; height:14px}
.ibe-xr-d p{margin:0 0 4px; color:var(--ink-2); font-size:0.8438rem; line-height:1.45}
.ibe-xr-c{grid-column:2 / -1; display:grid; gap:10px; padding-top:2px}
.ibe-xr-q{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:0.875rem; font-weight:600}
.ibe-xr-c .ibe-days legend{margin-bottom:6px; font-size:0.875rem}
.ibe-xs{display:grid; gap:10px; margin-bottom:12px}
.ibe-xs-same{display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:600}
.ibe-xs-rooms{display:flex; flex-wrap:wrap}
.ibe-xa{align-items:center}
.ibe-xa-sum{flex:1 1 auto; margin:0; color:var(--ink-2); font-size:0.875rem}
.ibe-xa-sum b{color:var(--ink)}
@media (max-width:560px){ .ibe-xa-sum{flex-basis:100%} .ibe-xa .btn{flex:1 1 0; min-width:0; padding-inline:12px} .ibe-xr-c{grid-column:1 / -1} }
.ibe-tog{width:44px; height:44px; flex:none; display:grid; place-items:center; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); cursor:pointer}
.ibe-tog svg{width:20px; height:20px}
.ibe-tog:hover{border-color:var(--ink)}
.ibe-tog[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.ibe-proceed{display:grid; gap:12px; margin-top:24px}
.ibe-cta{width:100%}
@media (min-width:720px){ .ibe-cta{width:auto; min-width:320px; justify-self:start} }
/* the way on looks the same wherever it stands: in the page, at the foot of the right column, in the bar and the sheet */
.btn[data-go][aria-disabled="true"], .btn[data-go][aria-disabled="true"]:hover{background:var(--surface-2); color:var(--ink-2); border-color:var(--line); cursor:not-allowed}
.ibe-open{font-size:0.9062rem; line-height:1.6; color:var(--ink-2)}
.ibe-open .ibe-link{margin-right:6px}

/* step 3: booker, summary, payment */
/* details: the rooms with their guest in one line each, the pencil enters another guest */
.ibe-rl{list-style:none; margin:0; padding:0; display:grid}
.ibe-rl-i{display:grid; gap:10px; padding:14px 0; border-top:1px solid var(--line)}
.ibe-rl-i:first-child{padding-top:0; border-top:0}
.ibe-rl-h{display:flex; align-items:center; gap:12px; min-width:0}
.ibe-rl-pic img{width:56px; height:56px; object-fit:cover; border-radius:var(--r); background-size:cover}
.ibe-rl-t{display:grid; gap:3px; min-width:0}
.ibe-rl-t b{font-size:0.9688rem; font-weight:600; line-height:1.3}
.ibe-rl-t span{font-size:0.8438rem; line-height:1.4; color:var(--ink-2)}
.ibe-rl-g{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 16px; margin:0; padding:10px 12px; background:var(--surface-2); border-radius:var(--r); font-size:0.9062rem}
.ibe-rl-g.is-own{display:grid; justify-content:stretch; background:none; padding:0}
.ibe-rl-g.is-own .ibe-link{justify-self:start}
.ibe-rl-edit{display:inline-flex; align-items:center; gap:6px}
.ibe-rl-edit svg, .ibe-who .ibe-link svg, .ibe-exline .btn svg, .ibe-done-ck .btn svg{width:16px; height:16px}
.ibe-fhint{font-size:0.8125rem; line-height:1.4; color:var(--ink-2)}
/* email or phone: one group with one mark; the phone has its country code in front */
.ibe-contact{display:grid; gap:10px; min-width:0; margin:16px 0 0; padding:14px 0 0; border:0; border-top:1px solid var(--line)}
.ibe-contact legend{float:left; width:100%; padding:0; font-size:0.875rem; font-weight:600; color:var(--ink)}
.ibe-contact legend + *{clear:left}
.ibe-contact > .ibe-fhint{margin:-4px 0 0}
.ibe-contact.has-err .ibe-field input{border-color:var(--bad); box-shadow:inset 0 0 0 1px var(--bad)}
.ibe-tel-row{display:flex; min-width:0}
.ibe-tel-row input{flex:1 1 auto; min-width:0; border-top-left-radius:0; border-bottom-left-radius:0}
.ibe-dial{flex:none}
.ibe-dial .dd-btn{width:auto; min-width:92px; border-right:0; border-top-right-radius:0; border-bottom-right-radius:0}
.ibe-field.has-err .ibe-dial .dd-btn, .ibe-contact.has-err .ibe-dial .dd-btn{border-color:var(--bad)}
.ibe-exline{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px}
.ibe-exline h2{margin:0; font:var(--display-weight) clamp(1.375rem, calc(2vw * var(--fs, 1)), 1.625rem)/1.2 var(--f-head); letter-spacing:var(--display-track)}
.ibe-exline p{margin:4px 0 0; font-size:0.9062rem; color:var(--ink-2)}
.ibe-main > .ibe-who{margin-top:16px}
.ibe-who .ibe-link{display:inline-flex; align-items:center; gap:6px}
/* confirmation: check-in details can follow, per room */
.ibe-ckin{display:flex; align-items:flex-start; gap:14px; width:100%; margin-top:20px; padding:16px 18px; background:var(--surface-2); border-radius:var(--r-lg); text-align:left}
.ibe-ckin > svg{width:24px; height:24px; flex:none; color:var(--accent-ink)}
.ibe-ckin h2{margin:0; font-size:1.062rem; font-weight:600}
.ibe-ckin p{margin:4px 0 0; font-size:0.9062rem; color:var(--ink-2)}
.ibe-done-m .ibe-done-ck{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:6px}
.ibe-done-ck .btn{display:inline-flex; align-items:center; gap:6px}
.ibe-done-m .ibe-done-ok{display:inline-flex; align-items:center; gap:6px; color:var(--accent-ink); font-weight:600}
.ibe-done-ok svg{width:16px; height:16px}
.ibe-box{display:grid; gap:16px; margin-top:20px; padding:clamp(18px, 2.6vw, 28px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.ibe-box-h h2{margin:0; font:var(--display-weight) clamp(1.375rem, calc(2vw * var(--fs, 1)), 1.625rem)/1.2 var(--f-head); letter-spacing:var(--display-track)}
.ibe-box-h p{margin-top:4px; font-size:0.9062rem; color:var(--ink-2)}
.ibe-sumlist{list-style:none; margin:0; padding:0; display:grid}
.ibe-sumlist li{display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:start; gap:12px; padding:12px 0; border-top:1px solid var(--line)}
.ibe-sumlist li > b{white-space:nowrap}
.ibe-n{width:28px; height:28px; display:grid; place-items:center; background:var(--surface-2); border-radius:var(--r); font:600 0.8125rem/1 var(--f-body)}
.ibe-sumlist li > div{display:grid; gap:2px; min-width:0}
.ibe-sumlist li > div > span{font-size:0.8438rem; line-height:1.4; color:var(--ink-2)}
/* what the amount of a room holds: the room, an upgrade, each extra */
.ibe-sumlist .ibe-lines{grid-column:auto; margin-top:6px}
.ibe-totals{display:grid; gap:6px; margin:0; padding-top:12px; border-top:1px solid var(--line)}
.ibe-totals div{display:flex; justify-content:space-between; gap:16px; font-size:0.9375rem}
.ibe-totals dt{color:var(--ink-2)}
.ibe-totals dd{margin:0; font-weight:600; text-align:right}
.ibe-totals .is-v dd{color:var(--accent-ink)}
.ibe-totals .is-now{font-size:1.125rem}
.ibe-totals .is-now dt{color:var(--ink); font-weight:600}
.ibe-totals dt small, .ibe-total small{display:block; font-size:0.7812rem; font-weight:400; line-height:1.35; color:var(--ink-2)}
.ibe-totals .is-sum{padding-top:6px; border-top:1px solid var(--line)}
/* when no line comes before it, the list's own rule is enough */
.ibe-totals .is-sum:first-child{padding-top:0; border-top:0}
.ibe-totals .is-sum dt{color:var(--ink); font-weight:600}
.ibe-totals .is-sum + .is-now, .ibe-totals .is-v + .is-now{padding-top:2px}
/* VAT as on a receipt: rate, net, VAT, gross per row, the sum below */
.ibe-vat{width:100%; border-collapse:collapse; font-size:0.8438rem; line-height:1.35; color:var(--ink-2)}
.ibe-vat caption{padding:0 0 4px; text-align:left; font-weight:600; color:var(--ink)}
.ibe-vat th, .ibe-vat td{padding:4px 0 4px 10px; text-align:right; font-weight:400; white-space:nowrap}
.ibe-vat th:first-child{padding-left:0; text-align:left}
.ibe-vat thead th{padding-top:0; font-size:0.7812rem; border-bottom:1px solid var(--line)}
.ibe-vat tfoot th, .ibe-vat tfoot td{border-top:1px solid var(--line); font-weight:600; color:var(--ink)}
.ibe-total.is-tax{padding-top:10px}
.ibe-total.is-tax span{font-weight:500}
.ibe-total.is-tax b{font-size:1rem}
.ibe-total.is-tax + .ibe-total{padding-top:10px}
/* board of each rate */
.ibe-board{margin-top:-2px}
/* when to pay: both ways stay visible, online shows all methods it offers */
.ibe-when{margin-bottom:12px}
.ibe-mark-all{flex-wrap:wrap; justify-content:flex-end; gap:6px 8px; max-width:200px}
@media (max-width:440px){ .ibe-mark-all{justify-content:flex-start; max-width:none} }
.ibe-vform{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px}
.ibe-vform input{text-transform:uppercase; letter-spacing:.06em; font-weight:600}
.ibe-vform input::placeholder{text-transform:none; letter-spacing:0; font-weight:400}
.ibe-vform .btn{height:var(--ctl)}
.ibe-more-d > .ibe-vmsg{margin-top:-6px; font-size:0.875rem; color:var(--bad)}
.ibe-vmsg:empty{display:none}
.ibe-vok{display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 8px 10px 14px; background:color-mix(in oklab, var(--accent) 12%, var(--surface)); border:1px solid color-mix(in oklab, var(--accent) 45%, transparent); border-radius:var(--r)}
.ibe-vok > svg{width:22px; height:22px; color:var(--accent-ink)}
.ibe-vok div{display:grid; gap:2px; min-width:0}
.ibe-vok b{letter-spacing:.06em}
.ibe-vok span{font-size:0.875rem; color:var(--ink-2)}
.ibe-spin{display:inline-block; width:16px; height:16px; flex:none; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:ibeSpin .8s linear infinite}
.ibe-spin.is-lg{width:40px; height:40px; border-width:3px; color:var(--accent-ink)}
@keyframes ibeSpin{ to{transform:rotate(360deg)} }
.ibe-methods{display:grid; gap:8px}
.ibe-method{display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:14px; min-height:64px; padding:10px 16px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer}
.ibe-method:hover{border-color:var(--ink)}
.ibe-method[aria-checked="true"]{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.ibe-radio{width:20px; height:20px; display:grid; place-items:center; border:1.5px solid var(--field-line); border-radius:50%}
.ibe-method[aria-checked="true"] .ibe-radio{border-color:var(--ink)}
.ibe-method[aria-checked="true"] .ibe-radio::after{content:""; width:10px; height:10px; border-radius:50%; background:var(--ink)}
.ibe-method-t{display:grid; gap:2px; min-width:0}
.ibe-method-t b{font-weight:600}
.ibe-method-t small{font-size:0.8438rem; color:var(--ink-2)}
.ibe-mark{display:flex; align-items:center; gap:10px; color:var(--ink)}
@media (max-width:440px){ .ibe-method{grid-template-columns:20px minmax(0,1fr)} .ibe-mark{grid-column:2; gap:8px} }
.ibe-card{display:grid; gap:14px; padding:16px; background:color-mix(in oklab, var(--surface-2) 40%, var(--surface)); border:1px solid var(--line); border-radius:var(--r)}
.ibe-card-h{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px}
.ibe-card-h span, .ibe-card-f > span{display:inline-flex; align-items:center; gap:6px; font-size:0.8438rem; color:var(--ink-2)}
.ibe-card-h svg, .ibe-card-f svg{width:16px; height:16px; flex:none}
.ibe-cnum{position:relative}
.ibe-cnum input{padding-right:156px; font-variant-numeric:tabular-nums; letter-spacing:.04em}
.ibe-brands{position:absolute; right:10px; top:50%; transform:translateY(-50%); display:flex; gap:4px; pointer-events:none}
.ibe-brands i{display:grid; place-items:center; min-height:24px; padding:3px 6px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); color:var(--ink-2); font-style:normal}
.ibe-brands i.is-on{border-color:var(--ink); color:var(--ink)}
.ibe-brands i.is-dim{opacity:.35}
@media (max-width:440px){ .ibe-cnum input{padding-right:70px} .ibe-brands i:not(.is-on){display:none} }
.ibe-card-f{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px}
.ibe-secure{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-top:12px; padding-top:14px; border-top:1px solid var(--line); font-size:0.8125rem; color:var(--ink-2)}
.ibe-secure > span:first-child{display:inline-flex; align-items:center; gap:6px}
.ibe-secure svg{width:16px; height:16px; flex:none}
.ibe-seals{display:flex; align-items:center; gap:16px; color:var(--ink)}
.confetti{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:2147483000}
.confetti i{position:absolute; border-radius:2px; animation:confettiFall 3s cubic-bezier(.4,.1,.85,.75) both}
@keyframes confettiFall{0%{transform:translate3d(0, -10vh, 0) rotate(0)}100%{transform:translate3d(var(--dx), calc(100vh + 320px), 0) rotate(calc(var(--r) + 720deg))}}
.ibe-final{display:grid; gap:14px; margin-top:24px}
.ibe-check{position:relative; display:grid; grid-template-columns:24px minmax(0,1fr); align-items:start; gap:12px; font-size:0.9375rem; line-height:1.45; cursor:pointer}
.ibe-check input{position:absolute; left:0; top:0; width:24px; height:24px; margin:0; opacity:0; cursor:pointer}
.ibe-box-i{width:24px; height:24px; display:grid; place-items:center; background:var(--surface); border:1.5px solid var(--field-line); border-radius:var(--r); color:transparent}
.ibe-box-i svg{width:16px; height:16px}
.ibe-check input:checked + .ibe-box-i{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.ibe-check input:focus-visible + .ibe-box-i{outline:2px solid var(--accent-ink); outline-offset:2px}
.ibe-check.has-err .ibe-box-i{border-color:var(--bad); box-shadow:0 0 0 1px var(--bad)}
.ibe-check a{color:var(--accent-ink)}
.ibe-check b{font-weight:600}
.ibe-check small{display:block; margin-top:2px; font-size:0.8438rem; line-height:1.4; color:var(--ink-2)}
.ibe-paybtn svg{width:18px; height:18px}
.ibe-demo{display:flex; gap:10px; font-size:0.8438rem; line-height:1.45; color:var(--ink-2)}
.ibe-demo svg{width:18px; height:18px; flex:none; margin-top:1px; color:var(--accent-ink)}

/* dialogs, 3-D Secure, processing */
dialog.ibe-dlg{max-width:min(600px, calc(100vw - 32px))}
.ibe-dlg-h{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px 14px 6px 24px}
.ibe-dlg-h h2{margin:0; font:var(--display-weight) 1.75rem/1.15 var(--f-head); letter-spacing:var(--display-track)}
.ibe-dlg-h p{margin-top:4px; font-size:0.9062rem; color:var(--ink-2)}
.ibe-dlg-b{display:grid; gap:14px; padding:10px 24px 8px}
/* the buttons of a dialog stay at its lower edge while a long content scrolls */
.ibe-dlg-a{position:sticky; bottom:0; z-index:1; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; padding:16px 24px 22px; background:inherit; box-shadow:0 -1px 0 var(--line)}
@media (max-width:560px){ .ibe-dlg-a .btn{flex:1 1 auto} .ibe-dlg-h{padding-left:18px} .ibe-dlg-b{padding-inline:18px} .ibe-dlg-a{padding-inline:18px} }
.ibe-pol{display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; padding:14px 16px; background:color-mix(in oklab, var(--accent) 12%, var(--surface)); border-radius:var(--r)}
.ibe-pol.is-strict{background:var(--surface-2)}
.ibe-pol svg{width:22px; height:22px; color:var(--accent-ink)}
.ibe-pol p{margin-top:2px; font-size:0.9062rem; color:var(--ink-2)}
.ibe-pol-l{display:grid; margin:0}
.ibe-pol-l div{display:grid; grid-template-columns:minmax(0,9rem) minmax(0,1fr); gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:0.9062rem}
.ibe-pol-l dt{font-weight:600}
.ibe-pol-l dd{margin:0; color:var(--ink-2)}
@media (max-width:480px){ .ibe-pol-l div{grid-template-columns:minmax(0,1fr); gap:2px} }
.ibe-days{display:grid; gap:8px; margin:0; padding:0; border:0; min-width:0}
.ibe-days legend{margin-bottom:8px; padding:0; font-weight:600}
.ibe-days div{display:flex; flex-wrap:wrap; gap:6px}
.ibe-day{height:var(--ctl-sm); padding:0 12px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); font:600 0.8438rem/1 var(--f-body); cursor:pointer}
.ibe-day[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.ibe-dlg .g-row{padding:6px 0}
.ibe-tds{display:grid; gap:14px; padding:24px}
.ibe-tds-h{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.ibe-tds-h b{font:700 1.125rem/1 var(--f-body); letter-spacing:.02em}
.ibe-tds-h span{display:inline-flex; align-items:center; gap:6px; font-size:0.8438rem; color:var(--ink-2)}
.ibe-tds-h svg{width:18px; height:18px; color:var(--accent-ink)}
.ibe-tds .ibe-dlg-a{padding:8px 0 0}
.ibe-proc{position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:16px; background:color-mix(in oklab, var(--bg) 84%, transparent); backdrop-filter:blur(3px)}
.ibe-proc-b{display:grid; justify-items:center; gap:16px; max-width:min(420px, 100%); padding:28px 32px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 30px 70px -30px rgba(0,0,0,.5); text-align:center}
.ibe-proc-b p{display:grid; gap:4px}
.ibe-proc-b span{font-size:0.875rem; color:var(--ink-2)}
.ibe-proc-ok{width:44px; height:44px; display:grid; place-items:center; background:var(--accent); color:var(--on-accent); border-radius:var(--r)}
.ibe-proc-ok svg{width:24px; height:24px}
body.ibe-busy{overflow:hidden}

/* confirmation */
.ibe-done{display:grid; justify-items:center; gap:18px; max-width:880px; margin:0 auto; text-align:center}
.ibe-ok svg{width:72px; height:72px; fill:none; stroke:var(--accent-ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.ibe-ok circle{stroke-dasharray:151; stroke-dashoffset:151; animation:ibeDraw .7s var(--ease) forwards}
.ibe-ok path{stroke-dasharray:36; stroke-dashoffset:36; animation:ibeDraw .4s .55s var(--ease) forwards}
@keyframes ibeDraw{ to{stroke-dashoffset:0} }
@media (prefers-reduced-motion: reduce){ .ibe-ok circle, .ibe-ok path{animation:none; stroke-dashoffset:0} }
:root[data-a11y-motion] .ibe-ok circle, :root[data-a11y-motion] .ibe-ok path{animation:none; stroke-dashoffset:0}
.ibe-done .ibe-lead{margin:0 auto}
.ibe-done .ibe-demo{justify-content:center; text-align:left}
.ibe-done-list{list-style:none; width:100%; margin:8px 0 0; padding:0; display:grid; gap:12px; text-align:left}
.ibe-done-list li{display:grid; grid-template-columns:140px minmax(0,1fr) auto; align-items:center; gap:16px; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.ibe-done-pic img{width:140px; aspect-ratio:4/3; object-fit:cover; background-size:cover; border-radius:var(--r)}
.ibe-done-m{display:grid; gap:3px; min-width:0}
.ibe-done-m b{font-size:1.062rem; font-weight:600}
.ibe-done-m span{font-size:0.875rem; color:var(--ink-2)}
.ibe-done-no{display:grid; justify-items:end; gap:4px; text-align:right}
.ibe-done-no small{font-size:0.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.ibe-done-no b{font:600 1rem/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing:.04em}
@media (max-width:640px){
  .ibe-done-list li{grid-template-columns:72px minmax(0,1fr)}
  .ibe-done-pic img{width:72px}
  .ibe-done-no{grid-column:1 / -1; justify-items:start; padding-top:10px; border-top:1px solid var(--line); text-align:left}
}
.ibe-done-t{width:100%; padding:16px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); text-align:left}
.ibe-done-a{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.ibe-done-a .btn svg{width:18px; height:18px}
@media (max-width:520px){ .ibe-done-a .btn{flex:1 1 100%} }
.ibe-ext{display:grid; gap:16px; max-width:760px; padding:clamp(24px, 4vw, 40px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.ibe-ext-a{display:flex; flex-wrap:wrap; gap:10px}
@media (max-width:520px){ .ibe-ext-a .btn{flex:1 1 100%} }
/* long labels (names, amounts, larger text size) wrap instead of pushing the column wider than the screen */
#ibe .btn, .ibe-bar .btn, .ibe-dlg .btn, .ibe-sheet .btn{height:auto; min-height:var(--ctl); padding-block:8px; white-space:normal; line-height:1.25; text-align:center}
#ibe .btn-sm, .ibe-sheet .btn-sm{min-height:var(--ctl-sm); padding-block:6px}

/* phones and tablets: the booking steps as a focused checkout. Newsletter, full footer and the sticky header leave
   room for the booking; settings and concierge stay (above the bar), help and the legal links close each step */
.ibe-help, .ibe-psum{display:none}
@media (max-width:1099px){
  body.ibe-focus .foot-news, body.ibe-focus .foot-main{display:none}
  /* the floating buttons stand at the end of the page (above the bar while it shows): the legal links end above them */
  body.ibe-focus .foot-bottom{padding-top:8px; padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px))}
  /* the legal links stand alone here: the line that separates them from the footer columns has nothing to separate */
  body.ibe-focus .foot-legal{border-top:0}
  body.ibe-focus.ibe-has-bar .foot-bottom{padding-bottom:calc(168px + env(safe-area-inset-bottom, 0px))}
  body.ibe-focus .page-head{padding-top:calc(65px + 14px)}
  body.ibe-focus .site-header{position:relative}
  body.ibe-focus .crumbs{display:none}
  body.ibe-focus .ibe-room{scroll-margin-top:16px}
  body.ibe-focus:is([data-ibe-view="guests"], [data-ibe-view="pay"], [data-ibe-view="find"], [data-ibe-view="code"], [data-ibe-view="manage"]) .hdr-dock{display:none}
  body.ibe-focus:is([data-ibe-view="guests"], [data-ibe-view="pay"], [data-ibe-view="find"], [data-ibe-view="code"], [data-ibe-view="manage"]) .page-head{padding-top:20px}
  body.ibe-focus .ibe-sec{padding-block:16px 40px}
  /* the search in the header already shows dates and guests */
  .ibe-chips{display:none}
  .ibe-stay{gap:8px; margin-bottom:18px}
  .ibe-rev{margin:0}
  /* the side column is missing here: the summary of step 2 is one line above the button, step 3 has its overview */
  .ibe-aside{display:none}
  .ibe-psum{display:flex; align-items:baseline; gap:10px; margin:0; padding-top:14px; border-top:1px solid var(--line)}
  .ibe-psum span{font-weight:600}
  .ibe-psum b{margin-right:auto; font:600 1.375rem/1 var(--f-body)}
  .ibe-help{display:grid; gap:12px; margin-top:32px; padding-top:20px; border-top:1px solid var(--line)}
  .ibe-help p{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:0; font-size:0.9062rem}
  .ibe-help p b{flex-basis:100%; font-weight:600}
  .ibe-help a{display:inline-flex; align-items:center; gap:6px; min-height:40px; color:var(--ink); font-weight:600}
  .ibe-help a svg{width:18px; height:18px; color:var(--accent-ink)}
  .ibe-help small{font-size:0.8438rem; color:var(--ink-2)}
  .ibe-help-a{display:flex; flex-wrap:wrap; gap:8px}
}
@media (max-width:640px){
  /* steps as one line with three short bars */
  .ibe-steps{flex-wrap:nowrap; gap:6px; padding-bottom:12px}
  .ibe-steps li{gap:0}
  .ibe-steps li:not(.ibe-step-of) + li:not(.ibe-step-of)::before{display:none}
  .ibe-steps .ibe-step-of{flex:1 1 auto; flex-basis:auto; min-width:0}
  .ibe-steps button, .ibe-step-in{min-width:28px; min-height:32px; padding:0; justify-content:center}
  .ibe-step-n{width:28px; height:4px; border:0; border-radius:2px; background:var(--line); font-size:0; overflow:hidden}
  .ibe-step-n svg{display:none}
  .ibe-steps .is-cur .ibe-step-n{background:var(--ink)}
  .ibe-steps .is-done .ibe-step-n{background:var(--accent)}
  /* offers: one line each, the first one shows */
  .ibe-deals{margin-bottom:16px}
  .ibe-deals .ibe-sub{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .ibe-deal-row{gap:8px}
  .ibe-deal{grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 12px; padding:12px 12px 12px 14px}
  .ibe-deal-k, .ibe-deal p:not(.ibe-deal-k){display:none}
  .ibe-deal h3{font-size:0.9688rem}
  .ibe-deal .btn{margin:0; justify-self:end}
  .ibe-deals:not(.is-all) .ibe-deal:nth-child(n+2){display:none}
  .ibe-deals-more{margin-top:6px}
  .ibe-deals-more svg{width:16px; height:16px}
  .ibe-cmp-slot{margin-bottom:16px}
  .ibe-cmp-tog{min-height:52px}
  .ibe-cmp-tog b{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  /* room cards: facts, price and rates; the description stays in the room details */
  .ibe-rooms{gap:16px}
  .ibe-pic.is-main img{aspect-ratio:16/9}
  .ibe-room-body{gap:8px; padding:16px}
  .ibe-room-d{display:none}
  .ibe-room-foot{padding-top:12px}
  .ibe-rates-btn{width:100%}
  .ibe-room.is-off .ibe-pics, .ibe-room.is-off .ibe-facts, .ibe-room.is-off .ibe-details, .ibe-off{display:none}
  .ibe-rate{padding:14px 16px; gap:10px 16px}
  /* upgrade as a compact card instead of the large photo */
  .ibe-up{grid-template-columns:76px minmax(0,1fr); align-items:start; gap:4px 14px; min-height:0; padding:14px; color:var(--ink); background:color-mix(in oklab, var(--accent) 10%, var(--surface)); border:1px solid color-mix(in oklab, var(--accent) 45%, transparent)}
  .ibe-up-pic{position:static; z-index:auto; grid-column:1; grid-row:1 / span 3}
  .ibe-up-pic img{width:76px; height:76px; border-radius:var(--r)}
  .ibe-up-pic::after{display:none}
  .ibe-up-b{display:contents}
  .ibe-up-k, .ibe-up h3, .ibe-up-p{grid-column:2}
  .ibe-up-k{height:24px; padding:0 8px; background:var(--accent); color:var(--on-accent); font-size:0.6875rem}
  .ibe-up-l, .ibe-up-f{display:none}
  .ibe-up h3{font-size:1.312rem}
  .ibe-up-p{margin:0}
  .ibe-up-p b{font-size:1.25rem}
  .ibe-up-p s, .ibe-up-p span, .ibe-up-sum{color:var(--ink-2)}
  .ibe-up-a{grid-column:1 / -1; flex-direction:row; margin-top:10px}
  .ibe-up-a .btn{flex:1 1 auto; width:auto; padding-inline:14px}
  .ibe-up-yes{background:var(--ink); border-color:var(--ink); color:var(--bg)}
  .ibe-up-yes:hover{background:var(--ink); opacity:.9}
  .ibe-up-no{border-color:var(--field-line); color:var(--ink)}
  .ibe-up-no:hover{border-color:var(--ink)}
  .ibe-up :focus-visible{outline-color:var(--accent-ink)}
  /* card: expiry and security code side by side */
  .ibe-card .ibe-fields{grid-template-columns:repeat(2, minmax(0,1fr))}
}
/* step 3: the main guest books unless someone else does */
.ibe-who{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px; padding:12px 14px; background:var(--surface-2); border-radius:var(--r)}
.ibe-who span{display:grid; gap:2px}
.ibe-who b{font-weight:600}
.ibe-who small{font-size:0.8438rem; color:var(--ink-2)}

/* manage a booking: find it, confirm by code, then one card per reservation */
.mg-wrap{display:grid; justify-items:center; gap:14px; padding-block:8px 24px}
.mg-card{width:100%; max-width:500px; display:grid; gap:18px; padding:clamp(20px, 3vw, 32px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.mg-head{display:grid; justify-items:center; gap:6px; text-align:center}
.mg-head p:last-child{color:var(--ink-2); font-size:0.9688rem; line-height:1.5; text-wrap:pretty}
.mg-ic{width:56px; height:56px; display:grid; place-items:center; margin-bottom:4px; border-radius:var(--r); background:color-mix(in oklab, var(--accent) 16%, var(--surface)); color:var(--accent-ink)}
.mg-ic svg{width:26px; height:26px}
.mg-step{font:600 0.75rem/1.2 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.mg-t{font-size:clamp(1.75rem, calc(3vw * var(--fs, 1)), 2.25rem)}
.mg-form{display:grid; gap:16px}
.mg-wide{width:100%}
.mg-wide svg{width:18px; height:18px}
.mg-lock{align-items:flex-start}
.mg-where ul{margin:0 16px 16px; padding-left:18px; display:grid; gap:8px; font-size:0.875rem; line-height:1.45; color:var(--ink-2)}
.mg-demo{max-width:500px; text-align:center; font-size:0.8125rem; line-height:1.45; color:var(--ink-2)}
.mg-sent{margin-top:0}
.mg-ways .ibe-mark.is-ic svg{width:24px; height:24px; color:var(--accent-ink)}
.mg-portal{margin:0}
.mg-otp{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:8px}
.mg-otp input{width:100%; min-width:0; height:56px; padding:0; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); text-align:center; font:600 1.375rem/1 var(--f-body); font-variant-numeric:tabular-nums}
.mg-otp input[aria-invalid="true"]{border-color:var(--bad); box-shadow:inset 0 0 0 1px var(--bad)}
.mg-otp-f{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 12px; font-size:0.8438rem; color:var(--ink-2)}
.mg-otp-f .is-off{color:var(--bad)}
#mgLeft{font-variant-numeric:tabular-nums}
.mg-acts{display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap}
.mg-help{display:flex; gap:10px; padding-top:16px; border-top:1px solid var(--line); font-size:0.8438rem; line-height:1.45; color:var(--ink-2)}
.mg-help svg{width:18px; height:18px; flex:none; margin-top:1px}
.mg-manage{display:grid; gap:20px; width:100%; max-width:860px; margin-inline:auto}
.mg-ok{margin-top:0}
.mg-items{display:grid; gap:16px}
.mg-item{display:grid; grid-template-columns:minmax(0, 260px) minmax(0, 1fr); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.mg-item.is-x .mg-pic img{filter:grayscale(.85); opacity:.6}
.mg-pic img{width:100%; height:100%; min-height:180px; object-fit:cover; background-size:cover}
.mg-b{display:grid; align-content:start; gap:10px; padding:clamp(16px, 2.4vw, 24px); min-width:0}
.mg-no{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; font:600 0.8125rem/1.3 var(--f-body); letter-spacing:.04em; color:var(--ink-2); font-variant-numeric:tabular-nums}
.mg-st{display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:var(--r); font:700 0.7188rem/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase}
/* status as in the PMS: confirmed blue, checked in green, cancelled and no-show red, departed grey */
.mg-st{--c:var(--ink-2); background:color-mix(in oklab, var(--c) 14%, var(--surface)); color:var(--c)}
.mg-st.is-ok{--c:var(--st-ok)}
.mg-st.is-in{--c:var(--st-in)}
.mg-st.is-x, .mg-st.is-noshow{--c:var(--bad)}
/* the price of a reservation: room, extras, tourist tax, total */
.mg-price{display:grid; gap:4px; padding:10px 0 0; border-top:1px solid var(--line)}
.mg-price dl{display:grid; gap:4px; margin:0}
.mg-price dl > div{display:flex; justify-content:space-between; gap:12px; font-size:0.875rem; color:var(--ink-2)}
.mg-price dd{margin:0; color:var(--ink)}
.mg-price .is-sum{padding-top:4px; font-weight:600; color:var(--ink)}
.mg-price p{margin:0; font-size:0.8125rem; color:var(--ink-2)}
.mg-n{margin:0; font:var(--display-weight) clamp(1.375rem, calc(2.2vw * var(--fs, 1)), 1.75rem)/1.15 var(--f-head); letter-spacing:var(--display-track)}
.mg-facts{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:0.9062rem; color:var(--ink-2)}
.mg-facts li{display:flex; align-items:flex-start; gap:8px}
.mg-facts svg{width:18px; height:18px; flex:none; margin-top:1px; color:var(--accent-ink)}
.mg-pol{font-size:0.875rem; font-weight:600; color:var(--accent-ink)}
.mg-pol.is-x{color:var(--ink-2)}
.mg-btns{display:flex; flex-wrap:wrap; gap:8px; padding-top:4px}
.mg-btns .btn svg{width:16px; height:16px}
.mg-msg{display:flex; gap:10px; padding:12px 16px; background:var(--surface-2); border-radius:var(--r); font-size:0.9062rem}
.mg-msg svg{width:18px; height:18px; flex:none; color:var(--accent-ink); margin-top:2px}
.mg-money{margin-top:0}
.mg-money > .btn{justify-self:start}
.mg-money > .btn svg{width:18px; height:18px}
.mg-paid{display:flex; align-items:center; gap:8px; font-weight:600; color:var(--accent-ink)}
.mg-paid svg{width:18px; height:18px}
@media (max-width:640px){
  .mg-item{grid-template-columns:minmax(0, 1fr)}
  .mg-pic img{min-height:0; aspect-ratio:16/9}
  .mg-acts .btn{flex:1 1 auto}
  .mg-money > .btn{justify-self:stretch}
}
/* dialogs */
/* one group per person, the same space between groups as in the booking's guest step */
.mg-people{display:grid; gap:22px}
.mg-ch{display:grid; gap:4px}
.mg-ch .g-row .lbl small{font-size:0.8125rem; color:var(--ink-2)}
.mg-ch .stepper output{min-width:64px}
.mg-av{display:flex; gap:10px; margin-top:12px; padding:12px 14px; border-radius:var(--r); font-size:0.9062rem}
.mg-av svg{width:20px; height:20px; flex:none; margin-top:1px}
.mg-av span{display:grid; gap:2px}
.mg-av small{font-size:0.8438rem; color:var(--ink-2)}
.mg-av.is-ok{background:color-mix(in oklab, var(--accent) 12%, var(--surface)); color:var(--ink)}
.mg-av.is-ok svg{color:var(--accent-ink)}
.mg-av.is-no{background:color-mix(in oklab, var(--bad) 10%, var(--surface)); color:var(--ink)}
.mg-av.is-no svg{color:var(--bad)}
.mg-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.mg-chips button{min-height:40px; padding:6px 14px; border:1px solid var(--field-line); border-radius:var(--r); background:var(--surface); color:var(--ink); font:500 0.875rem/1.2 var(--f-body); cursor:pointer}
.mg-chips button[aria-checked="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.mg-fee{display:grid; gap:4px; margin:14px 0; padding:12px 14px; border-radius:var(--r); font-size:0.9062rem}
.mg-fee.is-free{background:color-mix(in oklab, var(--accent) 12%, var(--surface))}
.mg-fee.is-fee{background:color-mix(in oklab, var(--bad) 10%, var(--surface))}
.mg-fee span{color:var(--ink-2)}
.mg-amount{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.mg-amount b{font:600 1.625rem/1 var(--f-body)}
.ibe-dlg .ibe-card{margin-top:12px}
.ibe-dlg .ibe-methods{gap:6px}
/* invoices and receipts */
.mg-docs{margin-top:0}
.mg-bill{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:6px 16px; padding:12px 14px; background:var(--surface-2); border-radius:var(--r); font-size:0.9062rem}
.mg-bill > span{display:grid; gap:2px; min-width:0}
.mg-bill small{font:600 0.75rem/1.2 var(--f-body); letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink)}
.mg-bill b{font-weight:600}
.mg-bill > span > span{color:var(--ink-2)}
.mg-doclist{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--r)}
.mg-doclist li{display:grid; grid-template-columns:36px minmax(0, 1fr) auto 44px; align-items:center; gap:12px; min-height:60px; padding:6px 4px 6px 12px}
.mg-doclist li + li{border-top:1px solid var(--line)}
.mg-doc-ic{width:36px; height:36px; display:grid; place-items:center; border-radius:var(--r); background:color-mix(in oklab, var(--accent) 14%, var(--surface)); color:var(--accent-ink)}
.mg-doc-ic svg{width:20px; height:20px}
.mg-doclist .is-storno .mg-doc-ic{background:color-mix(in oklab, var(--bad) 10%, var(--surface)); color:var(--bad)}
.mg-doc-t{display:grid; gap:2px; min-width:0}
.mg-doc-t b{font-size:0.9062rem; font-weight:600; overflow-wrap:anywhere}
.mg-doc-t small{font-size:0.8125rem; color:var(--ink-2)}
.mg-doclist .is-void .mg-doc-t b{text-decoration:line-through; text-decoration-thickness:1px; color:var(--ink-2)}
.mg-doclist li > .num{font-weight:600; white-space:nowrap}
.mg-dl{width:44px; height:44px; color:var(--accent-ink)}
.mg-dl svg{width:20px; height:20px}
.mg-docs > .btn{justify-self:start}
.mg-docs > .btn svg{width:18px; height:18px}
.mg-billf .ibe-banner{margin-top:0}
@media (max-width:440px){ .mg-doclist li{grid-template-columns:minmax(0, 1fr) auto 44px} .mg-doc-ic{display:none} }

/* ---------- guided tour (Driver.js). Its own stylesheet is not loaded: the base rules below follow driver.css (MIT),
   the look is the site's. The page under the dark layer takes no clicks; the tour clicks for the guest. ---------- */
.driver-active .driver-overlay, .driver-active *{pointer-events:none}
.driver-active .driver-active-element, .driver-active .driver-active-element *, .driver-popover, .driver-popover *{pointer-events:auto}
.driver-no-interaction, .driver-no-interaction *{pointer-events:none!important}
.driver-fade .driver-overlay, .driver-fade .driver-popover{animation:tour-fade .2s var(--ease)}
@keyframes tour-fade{from{opacity:0}}
.driver-popover.tour{box-sizing:border-box; position:fixed; top:0; right:0; z-index:1000000000; margin:0;
  width:min(360px, calc(100vw - 32px)); padding:20px 20px 16px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); color:var(--ink); box-shadow:0 18px 48px rgba(0,0,0,.3); font:400 0.9375rem/1.55 var(--f-body)}
.tour .driver-popover-progress-text{margin:0 0 8px; font:600 0.75rem/1.3 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink)}
.tour .driver-popover-title{margin:0 0 6px; font:400 1.375rem/1.25 var(--f-head); letter-spacing:var(--display-track); text-wrap:balance}
.tour .driver-popover-description{margin:0; color:var(--ink-2)}
.tour .driver-popover-footer{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:18px}
.tour .driver-popover-navigation-btns{display:flex; gap:8px; margin-left:auto}
.tour .tour-skip{font-size:0.875rem; color:var(--ink-2)}
.tour .driver-popover-close-btn{display:none}
.tour .driver-popover-arrow{position:absolute; border:8px solid var(--surface)}
.tour .driver-popover-arrow-side-over, .tour .driver-popover-arrow-side-center, .tour .driver-popover-arrow-none{display:none}
.tour .driver-popover-arrow-side-left{left:100%; border-right-color:transparent; border-bottom-color:transparent; border-top-color:transparent}
.tour .driver-popover-arrow-side-right{right:100%; border-left-color:transparent; border-bottom-color:transparent; border-top-color:transparent}
.tour .driver-popover-arrow-side-top{top:100%; border-right-color:transparent; border-bottom-color:transparent; border-left-color:transparent}
.tour .driver-popover-arrow-side-bottom{bottom:100%; border-left-color:transparent; border-top-color:transparent; border-right-color:transparent}
.tour :is(.driver-popover-arrow-side-left, .driver-popover-arrow-side-right).driver-popover-arrow-align-start{top:16px}
.tour :is(.driver-popover-arrow-side-top, .driver-popover-arrow-side-bottom).driver-popover-arrow-align-start{left:16px}
.tour :is(.driver-popover-arrow-side-left, .driver-popover-arrow-side-right).driver-popover-arrow-align-end{bottom:16px}
.tour :is(.driver-popover-arrow-side-top, .driver-popover-arrow-side-bottom).driver-popover-arrow-align-end{right:16px}
.tour :is(.driver-popover-arrow-side-left, .driver-popover-arrow-side-right).driver-popover-arrow-align-center{top:50%; margin-top:-8px}
.tour :is(.driver-popover-arrow-side-top, .driver-popover-arrow-side-bottom).driver-popover-arrow-align-center{left:50%; margin-left:-8px}
/* the ring where the tour clicks */
.tour-tap{position:fixed; z-index:1000000001; width:48px; height:48px; margin:-24px 0 0 -24px; border:2px solid var(--accent); border-radius:50%;
  background:color-mix(in oklab, var(--accent) 28%, transparent); pointer-events:none; animation:tour-tap .62s var(--ease) both}
@keyframes tour-tap{0%{opacity:0; scale:.4} 35%{opacity:1; scale:1} 100%{opacity:0; scale:1.7}}
/* the question before the tour of a page: at the bottom, above the floating buttons, without taking the focus */
.tour-ask{position:fixed; z-index:75; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); translate:-50% 0; display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;
  width:min(460px, calc(100vw - 32px)); box-sizing:border-box; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); color:var(--ink);
  box-shadow:0 12px 32px rgba(0,0,0,.22); animation:tour-fade .2s var(--ease)}
.tour-ask-t{display:grid; gap:2px; flex:1 1 200px; min-width:0}
.tour-ask-t b{font:600 0.9688rem/1.35 var(--f-body)}
.tour-ask-t span{font-size:0.8438rem; color:var(--ink-2)}
.tour-ask-a{display:flex; gap:8px; margin-left:auto}
@media (max-width:1099px){ body.ibe-has-bar .tour-ask{bottom:calc(96px + env(safe-area-inset-bottom, 0px))} }
/* where the question would reach the floating buttons, it stands above them */
@media (max-width:899px){ .tour-ask{bottom:calc(88px + env(safe-area-inset-bottom, 0px))} body.ibe-has-bar .tour-ask{bottom:calc(164px + env(safe-area-inset-bottom, 0px))} }