/* Public visitor pages. Loaded after the legacy styles to isolate this update. */
.hero-mobile, .room-card-label, .room-list-meta, .room-rates, .table-heading-short { display: none; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 30; transform: translateY(-160%); padding: 12px 20px; background: #fff; color: #111; border: 2px solid #0060df; border-radius: var(--border-radius); }
.skip-link:focus { transform: none; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid #0060df !important; outline-offset: 4px; }
button#hamburger { display: none; }
form.check-available button.button { box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 18px; border: 0; border-radius: var(--border-radius); background: #0060df; color: #fff; font: 700 16px/1.5 'Inter', sans-serif; cursor: pointer; }
form.check-available button.button:hover { background: #004fb8; }
div#room-overview form#book button.button { width: calc(30% - 20px); align-self: end; margin: 0 0 8px; min-height: 56px; }
form#book label.title { display: block; }
.booking-intro { color: #50555c; }
.unavailable-rooms summary { padding: 16px 0; cursor: pointer; color: #62676e; }
.workspace-information > summary { display: none; }
.availability-error { padding: 16px; border: 1px solid #b62324; border-radius: var(--border-radius); }
.room-unavailable { font-size: 13px; color: #50555c; }
body.visitor-page #main_body { min-width: 0; }
body.visitor-page { overflow: visible; }
body.visitor-page.modal-open, body.visitor-page.menu-open { overflow: hidden; }
body.visitor-page #room-info .room-title { margin: 0 0 8px; }
body.visitor-page #room-info .room-subtitle { margin: 0 0 24px; }
body.visitor-page form#book .booking-heading { width: 100%; font-size: 24px; margin: 0 0 24px; }
form#book .booking-datetime, form#book .booking-field { display: block; width: 100%; }
form#book .booking-field { margin: 0 0 10px; font-weight: 600; font-size: 14px; }
form#book .booking-field input { width: 100% !important; font-weight: 400; }
form#book div.time.booking-times { display: flex; width: 100% !important; gap: 12px; margin-bottom: 12px; }
form#book .booking-times label { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
form#book .booking-times select { width: 100%; border: 1px solid #d4d7dc; border-radius: var(--border-radius); font-weight: 400; }
.field-label { display: block; width: 100%; margin-top: 16px; font-weight: 600; }
body.visitor-page form#book div.extra span.tooltip > span { box-sizing: border-box; max-width: 280px; }
body.visitor-page form#book div.total ul li { display: flex; gap: 12px; }
body.visitor-page form#book div.total ul li span.key { flex: 1; width: auto !important; min-width: 0; }
body.visitor-page form#book div.total ul li span.value { width: auto !important; min-width: 90px; white-space: nowrap; }
body.visitor-page form#book div.total ul li span.value:before { float: none; margin-right: 6px; }
.room-description { margin: 24px 0; border-block: 1px solid #ddd; }
.room-description summary { padding: 16px 0; cursor: pointer; color: #231f20; font-weight: 700; }
.office-history summary { padding: 20px 0; font-size: 24px; font-weight: 700; cursor: pointer; }
.gallery-launch { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: zoom-in; }
body.visitor-page div.gallery:not(.fullscreen) > :is(.close, .img) { display: none; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.contact-actions a { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 24px; border: 1px solid #d3d7dd; border-radius: var(--border-radius); color: #231f20; text-decoration: none; font-weight: 700; }
.contact-actions a:first-child { background: #0060df; border-color: #0060df; color: #fff; }
body.visitor-page #main_body :is(h1, h2, h3, h4, p) { overflow-wrap: break-word; }
body.visitor-page #main_body .page-title { font-size: 48px; }
body.visitor-page #room-overview h1 { font-size: 36px; margin: 0 0 16px; }

/* Tablet widths still need fluid desktop containers. */
@media (min-width: 1001px) and (max-width: 1500px) {
    body.visitor-page .wrapper { box-sizing: border-box; width: 100%; max-width: 1400px; padding-inline: 32px; }
    body.visitor-page div#main_content > .wrapper { width: 100%; padding: 56px 32px; }
    div#top div.wrapper { width: calc(100% - 48px); padding: 0; }
    div#top div#logo, div#top div#logo a { width: 190px; }
    div#top div#menu { width: calc(100% - 190px); }
    div#top div#menu ul.menu { margin-left: 12px; }
    div#top div#menu ul.menu a { padding: 8px 10px; }
    body#home div#header div.meta h1 { font-size: clamp(40px, 4.6vw, 64px); }
    body#home div#header div.book-room { padding: 28px; flex: 0 0 340px; box-sizing: border-box; }
    body#home .flexwrap { gap: 32px; }
    body#home div#header div.quicknav a { width: calc((100% - 60px) / 6); margin-right: 8px; }
    body#home div#header div.quicknav.small a { width: auto; }
    body#home div.object_wrapper { position: static; width: 100%; max-width: none; margin: 0; padding: 32px 0; }
    body#home div.object_wrapper div.category { gap: 16px; }
    body#home div.object { flex: 0 0 calc((100% - 48px) / 4); min-width: 0; margin: 0; padding: 20px; }
    body#home div.object div.image img { width: 100%; object-fit: cover; }
}

@media (max-width: 1000px) {
    html { scroll-padding-top: 96px; overflow-x: clip; }
    body.menu-open { height: auto; overflow: hidden; }
    div#top, div#top.stuck { height: 76px; padding: 0; transition: none; z-index: 8; }
    div#top div.wrapper { height: 100%; padding: 0 20px !important; }
    div#top div#logo, div#top.stuck div#logo { width: auto; min-width: 0; margin: 0; padding-top: 19px; }
    div#top div#logo a, body.menu-open div#logo a { position: relative; width: 185px; height: 42px; margin: 0; background: none !important; z-index: 3; }
    div#top div#logo svg { width: 100%; height: auto; }
    div#top button#hamburger { display: block; position: absolute; top: 14px; right: 12px; width: 48px; height: 48px; padding: 12px; z-index: 4; border: 0; border-radius: var(--border-radius); background: transparent; cursor: pointer; }
    div#top button#hamburger span { display: block; position: absolute; width: 24px; height: 2px; left: 12px; top: 23px; background: #111; transition: transform .15s; }
    div#top button#hamburger span:first-child { transform: translateY(-7px); }
    div#top button#hamburger span:last-child { transform: translateY(7px); }
    body.menu-open div#top button#hamburger span { background: #fff; }
    body.menu-open div#top button#hamburger span:first-child { transform: rotate(45deg); }
    body.menu-open div#top button#hamburger span:nth-child(2) { opacity: 0; }
    body.menu-open div#top button#hamburger span:last-child { transform: rotate(-45deg); }
    div#top div#menu { visibility: hidden; transform: none; opacity: 0; padding: 88px 20px 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); height: 100dvh; overflow-y: auto; box-sizing: border-box; transition: opacity .15s, visibility .15s; }
    body.menu-open div#top div#menu { visibility: visible; opacity: 1; transition: opacity .15s; }
    div#top div#menu ul.cta { position: static; margin-top: 24px; }
    div#top div#menu ul li a { padding: 16px; font-size: 18px !important; line-height: 1.5; text-align: left; white-space: normal; }
    div#top div#menu ul.menu a { text-align: left; }
    div#top ul.cta li a.readmore { display: block; }
    div#top div#menu a:focus-visible { outline-color: #ffdd46 !important; outline-offset: -4px; }

    body.visitor-page { font: 16px/1.65 'Inter', sans-serif !important; color: #34383d; }
    body.visitor-page :is(p, li, label, input, select, textarea, summary) { font-size: 16px !important; }
    body.visitor-page :is(p, li, label) :is(b, strong, em, a, span) { font-size: inherit !important; }
    body.visitor-page p { color: #50555c; line-height: 1.65 !important; margin: 16px 0; }
    body.visitor-page .wrapper { width: 100% !important; max-width: 760px; padding-inline: 20px !important; }
    body.visitor-page #main_content { padding: 0; }
    body.visitor-page div#main_content > .wrapper { padding-block: 28px !important; }
    body.visitor-page #main_body .columns { margin: 0 0 36px !important; }
    body.visitor-page #main_body .column { min-width: 0; margin-bottom: 24px; }
    body.visitor-page #main_body :is(h1, .page-title, .room-title), body.visitor-page #room-overview h1 { font-size: clamp(28px, 7vw, 38px) !important; font-weight: 700; line-height: 1.12 !important; letter-spacing: -.7px; margin: 0 0 20px !important; color: #231f20; }
    body.visitor-page h2 { font-size: 25px !important; font-weight: 700; line-height: 1.2 !important; margin: 28px 0 16px !important; text-transform: none; }
    body.visitor-page h3 { font-size: 20px !important; line-height: 1.35 !important; font-weight: 700; }
    body.visitor-page h4 { font-size: 18px !important; font-weight: 700; }
    body.visitor-page a.button, body.visitor-page button.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px; font-size: 16px !important; line-height: 1.5 !important; border-radius: var(--border-radius); opacity: 1; }
    body.visitor-page a.readmore { padding: 12px 0; }
    body.visitor-page div.column div.image { position: relative; display: block; min-height: 0; aspect-ratio: 4 / 3; padding: 0; }
    body.visitor-page div.column div.image.static { display: block; }
    body.visitor-page div#main_content div#main_body table thead { display: table-header-group; }
    body.visitor-page div#main_content div#main_body table :is(td, th) { white-space: normal; }
    body.visitor-page div#main_content div#main_body table a { line-height: 1.5 !important; }
    body.visitor-page a.renewed:after { display: none; }

    /* Homepage: stable headline, compact shortcuts, visible rooms. */
    body#home .hero-desktop { display: none; }
    body#home .hero-mobile { display: block; }
    body#home div#header .flexwrap { padding: 0; }
    body#home div#header div.meta { margin: 28px 0 24px; }
    body#home div#header h1, body#home div#header h1 span.hero-mobile { font-size: clamp(32px, 9vw, 54px) !important; font-weight: 900; line-height: 1.06 !important; letter-spacing: -1px; color: #231f20; }
    body#home div#header div.meta p { font-size: 25px !important; margin: 16px 0; }
    body#home div#header div.meta p.hero-description { font: 16px/1.65 'Inter', sans-serif !important; color: #50555c; max-width: 540px; }
    body#home div#header div.quicknav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px; }
    body#home div#header div.quicknav h3 { grid-column: 1 / -1; margin: 0 0 4px !important; }
    body#home div#header div.quicknav a, body#home div#header div.quicknav.small a { display: flex; align-items: center; justify-content: center; width: 100%; height: auto; min-height: 76px; margin: 0; padding: 42px 8px 12px; font-size: 15px !important; font-weight: 600; line-height: 1.3; background-position: center 14px !important; background-size: 20px !important; border-color: #d9dde2; }
    body#home div#header div.quicknav.small a { min-height: 48px; padding: 12px 8px 12px 32px; background-size: 15px !important; background-position: left 10px center !important; font-size: 13px !important; }
    body#home div#header div.quicknav a:hover { margin: 0; }
    body#home div#header div.slider { height: auto !important; margin: 8px 0 32px !important; padding-inline: 20px; overflow-x: auto; scroll-snap-type: x mandatory; }
    body#home div.slider div.slide { width: 82vw; max-width: 580px; min-width: 0; margin-right: 12px; aspect-ratio: 4 / 3; scroll-snap-align: center; }
    body#home div#header div.column { margin: 0 0 32px; }
    body#home div#header div.column h4 { font-size: 25px !important; }
    body#home div#header div.column a.button { display: flex; width: 100%; }
    body#home div.tenants { padding: 16px 20px; }
    body#home div.tenants div.tenant { min-width: 100px; margin-right: 24px; }
    body#home div.tenants div.tenant a { height: 70px; }
    body#home div#content div.wrapper { margin: 24px auto; }
    body#home div.object_wrapper { position: static; width: 100%; max-width: 100%; padding: 0; margin: 0; overflow: visible; white-space: normal; }
    body#home div.object_wrapper div.category { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; margin: 0 0 32px; }
    body#home div.object_wrapper div.category h3 { margin: 0 !important; }
    body#home div.object_wrapper div.category > p { margin: 0 0 4px; padding: 0; }
    body#home div.object { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 0 16px; min-width: 0; width: 100%; max-width: none; margin: 0; padding: 16px 0; border: 0; border-top: 1px solid #e1e4e8; border-radius: 0; background: none; box-shadow: none; }
    body#home div.object div.image { grid-column: 1; grid-row: 1 / 3; align-self: start; width: 80px; height: 80px; margin: 4px 0 0; border-radius: var(--border-radius-small); overflow: hidden; background: #f2f2f7; }
    body#home div.object div.image img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
    body#home div.object div.image :is(.price_hour, .price_day) { display: none; }
    body#home div.object div.meta { grid-column: 2; margin: 0; }
    body#home div.object div.meta span.title { font-size: 18px !important; line-height: 1.25; }
    body#home div.object div.meta span.type { display: inline; font-size: 13px !important; color: #62676e; letter-spacing: 0; }
    body#home div.object div.meta div.tags { display: inline; margin: 0; }
    body#home div.object div.meta div.tags span { display: none; }
    body#home div.object div.meta div.tags span.persons { display: inline; font-size: 12px !important; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: #62676e; }
    body#home div.object div.meta div.tags span.persons:before { content: ' · '; }
    body#home div.object .room-rates { display: block; margin: 4px 0 0; font-size: 13px !important; color: #34383d; }
    body#home div.object a.button { grid-column: 2; justify-self: start; width: auto; min-height: 32px; margin: 2px 0 0; padding: 4px 0; border: 0; background: none; color: #0060df; font-size: 14px !important; }
    body#home div.object a.button:after { content: ''; display: inline-block; width: 18px; height: 18px; margin-left: 6px; vertical-align: middle; background: currentColor; mask: url('/resources/img/icons/outline/arrow-right.svg') center / contain no-repeat; }

    /* One aligned row per room: compare names, capacity and price at a glance. */
    body.visitor-page div#room-overview div.columns { max-width: 100%; }
    body.visitor-page #room-overview .column.small { margin-bottom: 20px; }
    body.visitor-page div#room-overview form#book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 8px 12px; padding: 0; margin: 0 !important; border: 0; border-radius: 0; background: none; box-shadow: none; }
    body.visitor-page div#room-overview form#book div.form-input.wide { width: 100% !important; margin: 0; }
    body.visitor-page div#room-overview form#book :is(input#date, select) { height: 44px; min-height: 44px; margin: 4px 0 0; padding: 8px !important; }
    body.visitor-page div#room-overview form#book input#date { background-position: right 8px center; padding-right: 30px !important; }
    body.visitor-page div#room-overview form#book div.time span { width: 20px; min-width: 20px; margin: 4px 0 0; background-size: 12px; }
    body.visitor-page div#room-overview form#book button.button { grid-column: 1 / -1; justify-self: end; width: auto; min-height: 40px; padding: 8px 16px; margin: 4px 0 0; font-size: 14px !important; }
    body.visitor-page div#room-overview p.activity { display: none; }
    body.visitor-page div#main_content div#main_body div.block.room-overview { margin: 0 !important; padding: 0 !important; background: transparent; border: 0; box-shadow: none; }
    body.visitor-page div#main_content div#main_body div.room-overview table { display: block; width: 100%; margin: 0 !important; border: 0; box-shadow: none; background: transparent; }
    body.visitor-page div#main_content div#main_body div.room-overview table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    body.visitor-page div#main_content div#main_body div.room-overview table tbody { display: block; }
    body.visitor-page div#main_content div#main_body div.room-overview table tr:not(:has(th)) { display: grid; grid-template-columns: 48px minmax(0, 1fr) 80px; grid-template-rows: auto auto; gap: 0 10px; padding: 12px 0; border: 0; border-top: 1px solid #e1e4e8; border-radius: 0; background: none; align-items: center; }
    body.visitor-page div#main_content div#main_body div.room-overview table td { display: block; width: auto; padding: 0 !important; border: 0 !important; background: none; line-height: 1.5 !important; white-space: normal; }
    body.visitor-page div#main_content div#main_body div.room-overview table td.room-photo { grid-column: 1; grid-row: 1 / 3; }
    body.visitor-page div#main_content div#main_body div.room-overview table span.image { width: 48px; height: 48px; filter: none; border-radius: var(--border-radius-small); }
    body.visitor-page div#main_content div#main_body div.room-overview table td.wide { grid-column: 2; grid-row: 1 / 3; }
    body.visitor-page div#main_content div#main_body div.room-overview table td.wide > a { display: inline-flex; align-items: center; min-height: 28px; font-size: 15px !important; line-height: 1.3 !important; }
    body.visitor-page .room-list-meta { display: block; font-size: 12px !important; font-weight: 400; color: #62676e; line-height: 1.5; }
    body.visitor-page div#main_content div#main_body div.room-overview table td:is(.type, .room-capacity) { display: none; }
    body.visitor-page div#main_content div#main_body div.room-overview table td.price { grid-column: 3; grid-row: 1; font-size: 15px !important; font-weight: 600; text-align: right; white-space: nowrap; }
    body.visitor-page div#main_content div#main_body div.room-overview table td.room-action { grid-column: 3; grid-row: 2; text-align: right; }
    body.visitor-page div#main_content div#main_body div.room-overview table td a.button { width: auto; min-height: 32px; padding: 4px 0 4px 10px !important; margin: 0; background: none; border: 0; box-shadow: none; color: #0060df; font-size: 14px !important; }
    body.visitor-page div#main_content div#main_body div.room-overview table td a.button:after { content: ' →'; margin-left: 4px; }
    body.visitor-page div#main_content div#main_body div.room-overview table tr ul.taken-times { display: block; margin: 4px 0 0; padding: 0; border: 0; }
    body.visitor-page div#main_content div#main_body div.room-overview table tr ul.taken-times li { white-space: normal; font-size: 11px !important; color: #62676e; background: none; padding: 0; }
    body.visitor-page .room-unavailable { font-size: 12px !important; line-height: 1.4; }
    body.visitor-page .workspace-information { margin: 24px 0; border-block: 1px solid #e1e4e8; }
    body.visitor-page .workspace-information > summary { display: list-item; padding: 16px 0; cursor: pointer; font-weight: 600; }

    /* Room detail, photos and booking fields. */
    body.visitor-page #room-info .room-subtitle { font-size: 16px !important; margin: -8px 0 20px; }
    body.visitor-page div#main_body ul.roomselector { margin: 0 0 16px; }
    body.visitor-page div#main_body ul.roomselector li a { padding: 12px; }
    body.visitor-page div#main_body ul.roomselector li span.image { padding-left: 0; width: 48px; min-width: 48px; height: 48px; margin: 0 12px 0 0; }
    body.visitor-page div#main_body ul.roomselector li span.persons { display: none; }
    body.visitor-page div#main_body ul.roomselector li span.name { font-size: 16px !important; }
    body.visitor-page div#main_body ul.roomselector li span.type { font-size: 13px !important; }
    body.visitor-page div#main_body div.pricing { margin: 16px 0; gap: 8px; }
    body.visitor-page div#main_body div.pricing div { font-size: 14px !important; color: #50555c; }
    body.visitor-page div#main_body div.pricing div span { font-size: 20px !important; }
    body.visitor-page #wrapper-image-div { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--border-radius); }
    body.visitor-page #wrapper-image-div img { width: 100%; height: 100%; margin: 0; object-fit: cover; }
    body.visitor-page div.gallery:not(.fullscreen) > :is(.close, .img) { display: none; }
    body.visitor-page ul.gallery { display: flex; gap: 8px; margin-top: 8px !important; padding: 0; overflow-x: auto; }
    body.visitor-page ul.gallery li { flex: 0 0 auto; padding: 0; }
    body.visitor-page ul.gallery li img { width: 88px; height: 66px; max-height: none; object-fit: cover; }
    body.visitor-page ul.gallery li a { opacity: .8; }
    body.visitor-page div.gallery.fullscreen div.img { height: calc(100dvh - 150px); max-height: none; margin: 50px 12px 0; max-width: calc(100% - 24px); }
    body.visitor-page div.gallery.fullscreen a.close { width: 48px; height: 48px; top: 4px; right: 8px; opacity: 1; }
    body.visitor-page div.gallery.fullscreen div.img a { top: calc(50dvh - 24px); width: 48px; height: 48px; background-position: center; background-color: #1119; border-radius: 50%; }
    body.visitor-page div.gallery.fullscreen div.img a.prev { left: 8px; }
    body.visitor-page div.gallery.fullscreen div.img a.next { right: 8px; }
    body.visitor-page div#main_content div#main_body address, body.visitor-page div#main_content div#main_body address a { font-size: 14px !important; line-height: 1.65; }
    body.visitor-page div#main_content div#main_body div.tags-inline { margin: 16px 0; display: flex; flex-wrap: wrap; gap: 8px; }
    body.visitor-page div#main_content div#main_body div.tags-inline span { font-size: 14px !important; margin: 0; }
    /* The page wrapper supplies the only horizontal gutter. */
    body.visitor-page form#book.room, body.visitor-page form#book.wachtrij { padding: 0; margin: 24px 0 !important; border: 0; border-radius: 0; background: none; box-shadow: none; }
    body.visitor-page form#book .booking-heading { font-size: 22px !important; margin: 0 0 20px !important; }
    body.visitor-page form#book h4 { width: 100%; margin-top: 24px !important; }
    body.visitor-page form#book :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea) { min-width: 0; min-height: 48px; font-size: 16px !important; padding: 12px !important; }
    body.visitor-page form#book .booking-field { margin-bottom: 10px; font-size: 14px !important; }
    body.visitor-page form#book .booking-field input#date { width: 100%; }
    body.visitor-page form#book div.time { width: 100%; }
    body.visitor-page form#book .booking-times select { border: 1px solid #d4d7dc; border-radius: var(--border-radius); }
    body.visitor-page form#book .booking-times :is(select#time-from, select#time-to) { border: 1px solid #d4d7dc; border-radius: var(--border-radius); }
    body.visitor-page form#book div.axis div { opacity: 1; color: #62676e; }
    body.visitor-page form#book .extra label { min-height: 52px; padding: 10px; gap: 8px; flex-wrap: wrap; }
    body.visitor-page form#book .extra label input:is([type="radio"], [type="checkbox"]) { flex: 0 0 22px; width: 22px; height: 22px; margin: 4px; padding: 0 !important; }
    body.visitor-page form#book .extra label span.tooltip { flex: 1; min-width: 0; font-size: 15px !important; }
    body.visitor-page form#book .extra label span.price { font-size: 14px !important; color: #50555c; line-height: 1.5; }
    body.visitor-page form#book .extra label span.tooltip > span { position: static; display: block; visibility: visible; opacity: 1; width: auto; max-width: 100%; margin: 6px 0 0; padding: 0; border: 0; box-shadow: none; background: none; color: #62676e; font-size: 13px !important; white-space: normal; }
    body.visitor-page form#book .extra label span.tooltip:has(> span) { display: block; }
    body.visitor-page form#book .extra label span.tooltip > span:before { display: none; }
    body.visitor-page form#book #taken-check:before { display: none; }
    body.visitor-page form#book #taken-check > div { padding: 12px 0; border: 0; border-block: 1px solid #e1e4e8; border-radius: 0; background: none; }
    body.visitor-page form#book #taken-check div.available h3 { font-size: 14px !important; margin: 0 0 10px !important; }
    body.visitor-page .flatpickr-calendar { max-width: calc(100vw - 24px); }
    body.visitor-page .flatpickr-calendar :is(.flatpickr-rContainer, .flatpickr-days, .dayContainer) { width: 100% !important; min-width: 0; max-width: 100%; }
    body.visitor-page form#book div.total { width: 100%; }
    body.visitor-page form#book div.total ul li { gap: 12px; }
    body.visitor-page form#book div.total ul li span.key { flex: 1; width: auto !important; min-width: 0; }
    body.visitor-page form#book div.total ul li span.value { width: auto !important; min-width: 90px; white-space: nowrap; }
    body.visitor-page form#book div.total ul li span.value:before { float: none; margin-right: 6px; }
    body.visitor-page form#book div.total ul li.total i { color: #62676e; }

    /* Numerical comparisons stay in a table, with local scrolling on narrow phones. */
    body#kantoor-huren-in-hoogeveen section.offices .non-mobile { display: block; }
    body#kantoor-huren-in-hoogeveen section.offices { margin: 24px 0; }
    body#kantoor-huren-in-hoogeveen section.offices ul li { padding: 20px; }
    body#kantoor-huren-in-hoogeveen .visitor-table-scroll { overflow-x: auto; margin: 20px 0; }
    body#kantoor-huren-in-hoogeveen .table-heading-full { display: none; }
    body#kantoor-huren-in-hoogeveen .table-heading-short { display: inline; font: inherit !important; text-decoration: none; }
    body#kantoor-huren-in-hoogeveen div#main_content div#main_body table.visitor-data-table { display: table; width: 100%; max-width: none; margin: 0; box-shadow: none; background: transparent; border: 0; }
    body#kantoor-huren-in-hoogeveen div#main_content div#main_body table.visitor-data-table :is(td, th) { padding: 10px 6px !important; border: 0; border-bottom: 1px solid #e1e4e8; font: 13px/1.5 'Inter', sans-serif !important; text-align: right; }
    body#kantoor-huren-in-hoogeveen div#main_content div#main_body table.visitor-data-table th { background: #f6f7f9; font-weight: 600 !important; white-space: nowrap; }
    body#kantoor-huren-in-hoogeveen div#main_content div#main_body table.visitor-data-table td { white-space: nowrap; }
    body#kantoor-huren-in-hoogeveen div#main_content div#main_body table.visitor-data-table :is(td, th):first-child { text-align: left; padding-left: 0 !important; }
    body#kantoor-huren-in-hoogeveen div#main_content div#main_body table.visitor-data-table :is(td, th):last-child { font-weight: 700 !important; padding-right: 0 !important; }
    body#contact .contact-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    body#contact .contact-actions a { padding: 10px 4px; font-size: 15px !important; }
    body#contact div.flex div { padding: 16px 0; margin-bottom: 0; border: 0; border-top: 1px solid #e1e4e8; border-radius: 0; }
    body#contact div.flex div :is(h3, p) { margin-top: 0 !important; }
    body#contact div#map { height: 300px; }

    body.visitor-page section.usp { padding: 24px 20px; }
    body.visitor-page section.usp ul li { margin: 0; padding-block: 8px; font-size: 14px !important; }
    body.visitor-page div#footer { padding: 24px 0 0; }
    body.visitor-page div#footer div#top_bar { padding-bottom: 24px; }
    body.visitor-page div#footer #sitemap h4 { margin: 16px 0 !important; padding: 0; background: none; font-size: 20px !important; }
    body.visitor-page div#footer ul { margin: 0; }
    body.visitor-page div#footer li { padding: 0; white-space: normal !important; }
    body.visitor-page div#footer li a { padding: 10px 0; }
    body.visitor-page div#footer #sitemap li:hover { transform: none; }
    body.visitor-page div#footer #sitemap li span.value { width: auto !important; }
    body.visitor-page div#footer #sitemap ul.open-hours li { padding: 8px 0; }
    body.visitor-page div#footer #sitemap ul.open-hours li:last-child { line-height: 1.6; }
    body.visitor-page div#footer p { color: #d5d5d5; }
    body.visitor-page div#footer div#footnote div.legal { display: flex; flex-wrap: wrap; gap: 8px 16px; }
    body.visitor-page div#footer div#footnote a { font-size: 13px !important; padding: 8px 0; }
    body.visitor-page div#footer form#updates { display: flex; flex-wrap: wrap; gap: 8px; }
    body.visitor-page div#footer form#updates :is(input, button) { width: 100%; min-height: 48px; margin: 0; box-sizing: border-box; }
}

@media (max-width: 360px) {
    body.visitor-page div#room-overview form#book { grid-template-columns: minmax(0, 1fr); }
    body.visitor-page div#main_content div#main_body div.room-overview table tr:not(:has(th)) { grid-template-columns: 40px minmax(0, 1fr) 76px; column-gap: 8px; }
    body.visitor-page div#main_content div#main_body div.room-overview table span.image { width: 40px; height: 40px; }
}

@media (min-width: 600px) and (max-width: 1000px) {
    body#home div#header div.quicknav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body#home div#header div.quicknav.small { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body#home div.object_wrapper div.category { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body#home div.object_wrapper div.category > :is(h3, p) { grid-column: 1 / -1; }
    body.visitor-page div#room-overview form#book { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: end; }
    body.visitor-page div#room-overview form#book button.button { grid-column: auto; min-height: 44px; }
}

@media (min-width: 1001px) and (max-width: 1200px) {
    body#kantoor-huren-in-hoogeveen #main_body > .columns, body#werkruimte-huren-in-hoogeveen .workspace-information > .columns { display: block; margin: 32px 0; }
    body#kantoor-huren-in-hoogeveen #main_body > .columns > .column, body#werkruimte-huren-in-hoogeveen .workspace-information > .columns > .column { width: 100%; margin-bottom: 32px; }
    body#kantoor-huren-in-hoogeveen #main_body > .columns > .column > .image, body#werkruimte-huren-in-hoogeveen .workspace-information > .columns > .column > .image { position: relative; height: 320px; }
    body#kantoor-huren-in-hoogeveen section.offices ul li { flex-wrap: wrap; gap: 16px; padding: 24px; }
    body#kantoor-huren-in-hoogeveen section.offices ul li span { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body.visitor-page *, body.visitor-page *::before, body.visitor-page *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
