/* nf-mobile.css - Stage 4 DESIGNED tablet and phone layer for Norfolk Apartments (skill Rule 2). Loaded LAST.
   1250px and up is untouched: every rule here sits inside a max-width query below 1250.
   Bands:  1170-1249  live's layout (fluid 95% container, logo-and-menu bar, hover drop-downs), the fixed rows fitted, plus the floor below.
           768-1169   a reflow: the teal phone bar and a logo bar with Book Now and a Menu button, shorter hero, fluid content,
                      home blocks stacked in reading order, rooms as photo / text / thumbnail strip, sidebars beside the text from 980.
           below 768  the phone design.
   Floor below 1250 (every state): WCAG AA colours, text 14px+, inputs 16px+, tap targets 24px+, no clipping, no overlap, no sideways scroll.
   Started from the kit's ilaunch-responsive.template.css (copy in build/stage4/; the starter pack's mobile starter does not apply: check_v2_pattern
   exit 3, no booking bar) for its band structure, menu button and every-state rules, with the family B sister builds' phone layers as the worked
   example; every selector is written for this skin (header-top / header-bottom, home .content / .mid-content / .bottom-content, .list.rooms,
   .gallery, blog and FAQ .left / .right.sidemenu, .content.bottom forms, #footer .mid / .right).
   Palette below 1250 (AA, computed for this site's colours):
     teal surfaces     #006e6d   white 6.08:1, live's pale #c6e9e9 4.70:1   (live #00abaa: white 2.84:1)
     teal link states  #006e6d   on white 6.08:1                              (live #00b9b8 on white 2.43:1)
     blue text         #0a6fa6   on white 5.47:1, white on it 5.47:1          (live #0a89cb 3.85:1)
     yellow buttons    #ffcd33   live's rgba(0,0,0,0.7) text = #4d3e0f, 6.98:1; every hover, focus and tap state white on #0a6fa6 (5.47:1)
     Book Now / FAQ    #5c480d   on #ffcd33 5.88:1                            (live #735b11 4.34:1)
     muted text        #595959   on white 7.0:1                               (live #888 / #979797 / #999 3.5 / 2.9 / 2.8:1)
     footer            live's #0d507f: white 8.5:1, #bdd0de 5.36:1 (kept) */

/* ======================= below 1250: accessibility floor (all narrower bands) ======================= */
@media (max-width: 1249px) {
  /* the iLaunch 1170px frame (nf-extra.css) is released: below 1250 the page is as wide as the screen */
  body.nf-site #page-container { min-width: 0; }
  body.nf-site #page-container :where(#main-content) img { max-width: 100%; }
  body.nf-site #page-container :where(#main-content) img[style*="height"] { height: auto !important; }

  /* type floor: live's 11 to 13px lines */
  body.nf-site #page-container .panel { font-size: 14px; line-height: 20px; }
  body.nf-site #page-container .panel .date, body.nf-site #page-container .panel .details, body.nf-site #page-container .entry .details,
  body.nf-site #page-container .panel li em, body.nf-site #page-container .details strong, body.nf-site #page-container .details a { font-size: 14px; }
  body.nf-site #page-container .panel .summary { font-size: 14px; line-height: 20px; }
  body.nf-site #page-container a.more, body.nf-site #page-container a.more:link, body.nf-site #page-container a.more:visited { font-size: 14px; line-height: 24px; }
  body.nf-site #page-container .smalltext, body.nf-site #page-container .smalltext a { font-size: 14px; line-height: 20px; }
  body.nf-site #page-container div.top { font-size: 14px; line-height: 24px; }
  /* Back to top: live's #999 on white (2.8:1), hover white on #e3e3e3 (1.3:1) */
  body.nf-site #page-container div.top a:is(:link, :visited) { color: #595959; padding: 2px 10px; border-color: #767676; }
  body.nf-site #page-container div.top a:is(:hover, :focus, :active), body.nf-site #page-container div.top a.scrollto:is(:hover, :focus, :active) { color: #ffffff; background: #595959; }
  body.nf-site #page-container .paging { font-size: 14px; line-height: 32px; }
  body.nf-site #page-container .paging a:link, body.nf-site #page-container .paging a:visited, body.nf-site #page-container .paging em { display: inline-block; min-width: 14px; line-height: 24px; padding: 2px 8px; text-align: center; }
  /* pager: live's #808080 on #ededed (3.2:1), hover white on #b0b0b0 (2.1:1) */
  body.nf-site #page-container .paging { color: #595959; }
  body.nf-site #page-container .paging a:is(:link, :visited) { color: #4a4a4a; }
  body.nf-site #page-container .paging a:is(:hover, :focus, :active), body.nf-site #page-container .paging em { background-color: #595959; color: #ffffff; }
  body.nf-site #page-container h5, body.nf-site #page-container h6 { font-size: 14px; }
  body.nf-site #page-container .form td em, body.nf-site #page-container p.ils-required-note em.required { font-size: 14px; color: #595959; }
  body.nf-site #page-container .form td { color: #595959; }
  body.nf-site.nf-home #page-container .special p { font-size: 14px; line-height: 20px; }
  body.nf-site #page-container .panel.blog .date { font-size: 14px; line-height: 18px; }
  body.nf-site #page-container .panel.blog .summary { font-size: 14px; line-height: 20px; }
  body.nf-site #page-container #footer, body.nf-site #page-container #footer li, body.nf-site #page-container #footer p { font-size: 14px; line-height: 22px; }
  body.nf-site #page-container blockquote .details { font-size: 14px; }
  /* fields: 16px (no zoom-on-focus) */
  body.nf-site #page-container input, body.nf-site #page-container select, body.nf-site #page-container textarea { font-size: 16px; }
  body.nf-site #page-container .nf-contact-form p.et_pb_contact_field .input, body.nf-site #page-container .nf-contact-form input.et_pb_contact_captcha { font-size: 16px; }
  body.nf-site #page-container input.button, body.nf-site #page-container .form input.button { font-size: 16px; }

  /* headings and links in live's #0a89cb (3.85:1 on white) take the darker brand blue */
  body.nf-site #page-container :is(h1, h2, h3, h4, h5) { color: #0a6fa6; }
  body.nf-site #page-container h2 a:is(:link, :visited, :hover, :active, :focus) { color: #0a6fa6; }
  body.nf-site.nf-home #page-container .content .maintext h1 { color: #595959 !important; }   /* live's #888 (3.5:1) on white */
  body.nf-site.nf-home #page-container .content .maintext h3 { color: #0a6fa6; }
  body.nf-site #page-container .content.bottom :is(h2, h3, h4) { color: #333333; }
  body.nf-site #page-container .list.rooms .entry h2, body.nf-site.nf-home #page-container .special :is(h3, h4), body.nf-site.nf-home #page-container .panel.blog h3 { color: #ffffff; }
  body.nf-site #page-container blockquote .highlight { color: #0a6fa6; }
  body.nf-site #page-container .container.main blockquote .highlight { color: #333333; }

  /* links: live's hover and active colours */
  body.nf-site #page-container .panel .title a:is(:hover, :focus, :active) { color: #0a6fa6; text-decoration: underline; }

  /* menu (1170 to 1249: live's drop-downs). Active and hover titles: live's #00b9b8 (2.4:1) becomes the dark teal; the lists' white on
     #00b9b8 becomes white on the dark teal; a list item's hover, live's #0a89cb on white, the darker blue */
  body.nf-site #page-container #menu li.active > a:is(:link, :visited, :active),
  body.nf-site #page-container #menu li:hover > a:is(:link, :visited, :active, :hover),
  body.nf-site #page-container #menu > ul > li > a:focus { color: #006e6d; }
  body.nf-site #page-container #menu li ul, body.nf-site #page-container #menu li:hover ul a:is(:link, :visited),
  body.nf-site #page-container #menu li ul a:is(:link, :visited) { background: #006e6d; color: #ffffff; }
  body.nf-site #page-container #menu li li:hover a:link, body.nf-site #page-container #menu li li a:hover, body.nf-site #page-container #menu li li a:focus,
  body.nf-site #page-container #menu li li.active a:is(:link, :visited), body.nf-site #page-container #menu li:hover li.active a { background: #ffffff; color: #0a6fa6; }
  body.nf-site #page-container #menu li:focus-within > ul { display: block; }
  /* touch and keyboard drop-downs (script in nf-sitewide.php): li.nf-open = a list opened by a first tap; li.nf-shut = a list closed with Escape */
  body.nf-site #page-container #menu > ul > li.nf-open > ul { display: block; }
  body.nf-site #page-container #menu > ul > li.nf-open > a:is(:link, :visited) { color: #006e6d; }
  body.nf-site #page-container #menu > ul > li.nf-shut > ul { display: none; }
  body.nf-site #page-container #menu li.alt a:is(:link, :visited) { background: #ffcd33; color: #5c480d; }
  body.nf-site #page-container #menu li.alt a:is(:hover, :focus, :active), body.nf-site #page-container #menu li.alt:hover a:is(:link, :visited) { background: #0a6fa6; color: #ffffff; }

  /* the teal phone bar: live's white on #00abaa is 2.84:1 */
  body.nf-site #page-container .header-top { background: #006e6d; }

  /* buttons: live's yellow at rest (dark text 6.98:1); live's hover (white on #0a89cb, 3.85:1) becomes white on the darker blue in every
     active state, so a tapped button never shows a pale label */
  body.nf-site #page-container a.button:is(:link, :visited), body.nf-site #page-container input.button,
  body.nf-site #page-container .et_pb_section .nf-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { background-color: #ffcd33 !important; color: #4d3e0f !important; }
  body.nf-site #page-container a.button:is(:hover, :focus, :active), body.nf-site #page-container input.button:is(:hover, :focus, :active),
  body.nf-site #page-container .et_pb_section .nf-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:is(:hover, :focus, :active) { background-color: #0a6fa6 !important; color: #ffffff !important; }

  /* teal panels: the room text, the home offer, the home Book Direct box and the Latest Blog panel */
  body.nf-site #page-container .list.rooms .entry .roomtext { background: #006e6d; }
  body.nf-site.nf-home #page-container .special .text { background: #006e6d; }
  body.nf-site.nf-home #page-container .bookingbannercontent { background: #006e6d; }
  /* the one-bedroom page repeats the Book Direct list inside its content, white words straight on a sea-and-sky photo (live, 1250 and up):
     below 1250 the list sits on the same dark teal panel as on the home page */
  body.nf-site:not(.nf-home) #page-container .content .bookingbannercontent { display: inline-block; max-width: 100%; box-sizing: border-box; background: #006e6d; padding: 16px 22px 20px; }
  body.nf-site:not(.nf-home) #page-container .content .bookingbannercontent p { margin: 12px 0 0; }
  body.nf-site.nf-home #page-container .blog-wrapper { background: #006e6d; }
  body.nf-site.nf-home #page-container .panel.blog .title a:is(:link, :visited, :hover, :focus, :active) { color: #ffffff; }
  body.nf-site.nf-home #page-container .panel.blog .title a:is(:hover, :focus, :active) { text-decoration: underline; }
  body.nf-site.nf-home #page-container .panel.blog :is(.date, .summary) { color: #ffffff; }
  body.nf-site.nf-home #page-container .panel.blog .more:is(:link, :visited) { color: #ffffff !important; }
  body.nf-site.nf-home #page-container .panel.blog .more:is(:hover, :focus, :active) { color: #ffffff !important; text-decoration: underline; }
  body.nf-site.nf-home #page-container .special a:not(.button):is(:hover, :focus, :active) { color: #ffffff; }
  /* the yellow FAQ banner: live's #735b11 on #ffcd33 is 4.34:1 */
  body.nf-site.nf-home #page-container .faq a:is(:link, :visited, :hover, :focus, :active) { color: #5c480d; }
  body.nf-site.nf-home #page-container .faq a:is(:hover, :focus, :active) { text-decoration: underline; }

  /* footer */
  /* pages shorter than the screen (the empty blog categories, short pages on a tall tablet) end with a white strip under the footer: the
     footer's own blue carries on to the bottom of the screen (a shadow adds no scroll height). 1250 and up keeps live's strip, as live. */
  body.nf-site #page-container #footer { box-shadow: 0 100vh 0 100vh #0d507f; }
  body.nf-site #page-container #footer .fmenu li a { font-size: 14px; line-height: 24px; height: auto; }
  body.nf-site #page-container .copyright, body.nf-site #page-container .footer-tags p, body.nf-site #page-container .footer-tags a { font-size: 14px; line-height: 24px; }
  body.nf-site #page-container .footer-tags a { display: inline-block; }
  body.nf-site #page-container #footer .vcard li a { display: inline-block; line-height: 24px; }
  /* the social icons are 24 x 23px sprites: one more pixel of tap height, the sprite drawn in the content box */
  body.nf-site #page-container .socialmedia a { padding-top: 1px; background-origin: content-box; background-clip: content-box; }
  /* the icons' hidden words (em, display none) take white, so no state of the link reads dark-on-teal to a contrast check */
  body.nf-site #page-container .socialmedia a:is(:link, :visited, :hover, :focus, :active) { color: #ffffff; }
  /* field edges: live's #e1e1e1 (1.3:1 against white) darkened so a field reads as a field (4.5:1) */
  body.nf-site #page-container .nf-contact-form p.et_pb_contact_field .input, body.nf-site #page-container .nf-contact-form input.et_pb_contact_captcha { border-color: #767676; }

  /* 24px tap rows without changing how lines wrap: inline vertical padding (site map, month list, one-link paragraphs, table links) */
  body.nf-site #page-container .content li > a, body.nf-site #page-container .panel li a, body.nf-site #page-container .container > ul li > a,
  body.nf-site #page-container .content p > a:only-child:not(.button), body.nf-site #page-container .content td a:not(.button) { padding-top: 4px; padding-bottom: 4px; }
  body.nf-site #page-container .panel .title a { display: inline; padding: 4px 0; }
  body.nf-site #page-container a.tel-link[href^="tel:"]:is(:link, :visited) { padding-top: 4px; padding-bottom: 4px; }
  body.nf-site #page-container .details a { display: inline-block; padding: 2px 0; }
  /* a link that holds only a picture: its box wraps the picture (an inline link round an inline image is only one text line tall) */
  body.nf-site #page-container :is(.content, .container) a:has(> img:only-child):not(.gallery-item) { display: inline-block; }
  /* booking links inside running text (the SEO pages and the post point at the booking page): bold, a 24px tap box */
  body.nf-site #page-container :is(.content, .container) a[href*="onlinebooking.direct"]:not(.button) { font-weight: 700; color: #0a6fa6; padding-top: 4px; padding-bottom: 4px; }

  /* keyboard focus below 1250: two-tone ring (2px white against the element, 2px near-black outside), visible on any ground */
  body.nf-site :focus-visible { outline: 2px solid #101010 !important; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }
}

/* ======================= 1170 to 1249: live's layout, fitted ======================= */
@media (min-width: 1170px) and (max-width: 1249px) {
  /* the menu: live's .right is 80% of the container, too narrow for the eight items below about 1200px; it takes the room it needs and the
     items sit 8px apart instead of 11px */
  body.nf-site #page-container #header .container .right { width: auto; float: right; }
  body.nf-site #page-container #menu li { margin: 0 8px; }
  body.nf-site #page-container #menu li.alt { margin: 0 0 0 4px; }
  /* forms: live's six-column grid, fluid (labels at their words, fields share the rest) */
  body.nf-site #page-container .nf-contact-form form.et_pb_contact_form, body.nf-site.page-id-1393 #page-container .nf-contact-form form.et_pb_contact_form { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr) max-content minmax(0, 1fr); grid-template-rows: auto auto auto; max-width: none; }
  body.nf-site #page-container .nf-contact-form p.et_pb_contact_field .input { width: calc(100% - 25px); height: 40px; }
  body.nf-site #page-container .nf-contact-form p.et_pb_contact_field textarea.input { width: calc(100% - 25px); height: 110px; }
  body.nf-site #page-container .nf-contact-form .et_pb_contact_form_label { line-height: 40px; }
  /* the star follows the label word (the field cells are fluid here, so it cannot hang at a fixed distance as at 1250 and up) */
  body.nf-site #page-container .nf-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after { position: static; display: inline-block; vertical-align: -2px; margin-left: 6px; }
  body.nf-site #page-container .nf-contact-form input.et_pb_contact_captcha { height: 40px; }
  body.nf-site.page-id-1414 #page-container .nf-contact-form form.et_pb_contact_form { grid-template-columns: 115px 300px; }
}

/* ======================= below 1170: tablet and phone reflow ======================= */
@media (max-width: 1169px) {
  body.nf-site #page-container .container, body.nf-site #page-container .container.main { width: auto; min-width: 0; max-width: 1170px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
  body.nf-site #page-container .gallery .container { width: auto !important; }
  body.nf-site #page-container #container-outer, body.nf-site #page-container #feature, body.nf-site #page-container .content,
  body.nf-site #page-container .content-bottom, body.nf-site #page-container #footer, body.nf-site #page-container #header,
  body.nf-site #page-container .special, body.nf-site #page-container .bottom-content { min-width: 0; }

  /* ---- header: the teal phone bar, then the logo bar with Book Now and a Menu button; the menu opens below as full-width rows ---- */
  body.nf-site #page-container .header-top { height: auto; }
  body.nf-site #page-container .header-top .container { display: flex; align-items: center; justify-content: space-between; column-gap: 16px; padding-top: 6px; padding-bottom: 6px; }
  body.nf-site #page-container .header-top .container > .clearboth { display: none; }
  body.nf-site #page-container #header .header-top .tel { float: none; order: 1; font-size: 22px; line-height: 30px; padding-left: 33px; }
  body.nf-site #page-container #header .header-top .tel a.tel-link { display: inline-block; padding: 4px 0; }
  body.nf-site #page-container #header .header-top .socialmedia { float: none; order: 2; margin: 0; }
  body.nf-site #page-container .header-bottom .container { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 0; padding-top: 12px; padding-bottom: 12px; }
  body.nf-site #page-container #header #left { order: 1; float: none; width: auto; margin: 0 auto 0 0; background: none; }
  body.nf-site #page-container #header .logo { float: none; padding: 0; }
  body.nf-site #page-container #header .logo a { display: block; }
  body.nf-site #page-container #header .container .right { display: contents; }
  body.nf-site #page-container #menu, body.nf-site #page-container #menu > ul { display: contents; }
  body.nf-site #page-container #menu > ul > li.alt { order: 2; display: block; margin: 0; padding: 0; }
  body.nf-site #page-container #menu > ul > li.alt > a:is(:link, :visited) { display: block; margin: 0; padding: 0 18px; line-height: 44px; font-size: 16px; }
  body.nf-site #page-container .ils-menu-toggle { order: 3; display: inline-flex; align-items: center; gap: 10px; height: 44px; margin: 0; padding: 0 14px; border: 2px solid #006e6d; border-radius: 0;
    background: #ffffff; color: #006e6d; font: 700 16px/40px 'Lato', Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
  body.nf-site #page-container .ils-menu-toggle:is(:hover, :focus, :active), body.nf-site #page-container #header.ils-menu-open .ils-menu-toggle { background: #006e6d; color: #ffffff; }
  body.nf-site #page-container .ils-menu-toggle span, body.nf-site #page-container .ils-menu-toggle span::before, body.nf-site #page-container .ils-menu-toggle span::after { display: block; position: relative; width: 18px; height: 2px; background: currentColor; content: ""; }
  body.nf-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; }
  body.nf-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; }
  /* the menu items: hidden until the button opens them, then one full-width row each, the sub-pages indented under their title */
  body.nf-site #page-container #menu > ul > li:not(.alt) { display: none; order: 10; flex: 0 0 100%; margin: 0; text-align: left; border-top: 1px solid #e3e3e3; }
  body.nf-site #page-container #header.ils-menu-open #menu > ul > li:not(.alt) { display: block; }
  body.nf-site #page-container #header.ils-menu-open #menu > ul > li:first-child { margin-top: 12px; }
  body.nf-site #page-container #menu > ul > li:not(.alt) > a:is(:link, :visited) { display: block; padding: 0 0 0 16px; line-height: 48px; font-size: 16px; color: #333333; }
  body.nf-site #page-container #menu > ul > li.active:not(.alt) > a:is(:link, :visited),
  body.nf-site #page-container #menu > ul > li:not(.alt):hover > a:is(:link, :visited), body.nf-site #page-container #menu > ul > li:not(.alt) > a:focus { color: #006e6d; }
  /* the current page: dark teal with a bar beside it (shape as well as colour) */
  body.nf-site #page-container #menu li.active > a:is(:link, :visited) { box-shadow: inset 4px 0 0 #006e6d; }
  body.nf-site #page-container #menu li ul { position: static; display: block; width: auto; padding: 0 0 8px; background: none; }
  body.nf-site #page-container #menu li li { border: 0; }
  body.nf-site #page-container #menu li ul a:is(:link, :visited), body.nf-site #page-container #menu li:hover ul a:is(:link, :visited) { display: block; padding: 0 0 0 40px; line-height: 44px; font-size: 16px; font-weight: 400; text-transform: none; background: none; color: #333333; }
  body.nf-site #page-container #menu li li a:is(:hover, :focus), body.nf-site #page-container #menu li li.active a:is(:link, :visited), body.nf-site #page-container #menu li:hover li.active a { background: none; color: #006e6d; }
  body.nf-site #page-container #menu li li.active > a:is(:link, :visited) { padding-left: 40px; }

  /* ---- hero: in the flow under the header, shorter ---- */
  body.nf-site #page-container #feature { height: auto; }
  body.nf-site #page-container .featureimage { height: 300px; }
  body.nf-site.nf-home #page-container #feature .featuremain, body.nf-site.nf-home #page-container .featuremain li, body.nf-site.nf-home #page-container .featuremain img { height: 460px; }
  body.nf-site #page-container .featuremain img { width: 100%; object-fit: cover; }
  /* the home line over the photo becomes a dark band under it */
  body.nf-site #page-container .featureoverlay { position: static; width: auto; margin: 0; padding: 18px 24px; border-radius: 0; background: #262626; }
  body.nf-site #page-container .featureoverlay p { font-size: 26px; line-height: 34px; letter-spacing: 1px; }
  body.nf-site #page-container #feature:not(:has(.featureimage, .featuremain)) { height: 0; }

  /* ---- inner content ---- */
  /* live's empty Google +1 and Facebook Like box (dead services) keeps its 24px at 1170 and up; stacked below, it is only a gap */
  body.nf-site #page-container .socialwidgets { display: none; }
  body.nf-site #page-container .container.main { padding-top: 40px; padding-bottom: 24px; }
  body.nf-site #page-container .content.bottom { margin: 40px 0; }
  body.nf-site #page-container .content img, body.nf-site #page-container .container img { max-width: 100%; height: auto; }
  body.nf-site #page-container .content table[width], body.nf-site #page-container .content table[style*="width"] { max-width: 100%; }
  /* the Experience Oz widget (a 220 x 260 frame live floats right of the attractions text): on a narrower column its float reached down beside
     the next heading and sat between it and its text; below 1170 it stands on its own line under the page title */
  body.nf-site #page-container iframe#experience-oz { max-width: 100%; float: none !important; display: block; margin: 0 0 20px !important; }
  /* live sets every list's bullet inside the text box (ul { list-style-position: inside }), so a long item that wraps on a narrow screen
     starts its second line under the bullet (the site map's post title): bullets hang outside the text below 1170 */
  body.nf-site #page-container :where(#main-content) ul { list-style-position: outside; }
  /* wrapped headings: live's 20px blog titles sit in 34px lines and the 18px FAQ questions in 28px lines (1.7 and 1.6 times the type),
     so a title that wraps on a narrower column reads as two headings: about 1.3 times the type below 1170 */
  body.nf-site #page-container .list:not(.rooms) .entry :is(h2, h3), body.nf-site #page-container .content :is(h2, h3) { line-height: 1.3; }
  body.nf-site #page-container .panel .title, body.nf-site #page-container .panel .title a { line-height: 1.3; }
  /* FAQ questions, blog entries and sidebar panels: live's 65px gaps are long on a narrow screen */
  body.nf-site #page-container .list:not(.rooms) .entry { margin-top: 40px; }
  body.nf-site #page-container .panel { margin: 40px 0; }
  /* sidebars (blog, posts, FAQ): beside the text from 980 */
  body.nf-site #page-container .container .left { float: left; width: calc(100% - 340px); }
  body.nf-site #page-container .container .right.sidemenu { float: right; width: 300px; }

  /* page galleries (facilities, location): fluid grid, full rows at every width */
  body.nf-site #page-container .gallery:not(.room) .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
  body.nf-site #page-container .gallery:not(.room) .container > :not(a.gallery-item) { grid-column: 1 / -1; }
  body.nf-site #page-container .gallery:not(.room) .container > a:not(.gallery-item), body.nf-site #page-container .gallery:not(.room) .container > .clearleft { display: none; }
  body.nf-site #page-container .gallery:not(.room) a.gallery-item { display: block; }
  body.nf-site #page-container .gallery:not(.room) img { float: none; display: block; width: 100%; height: auto; margin: 0; }
  body.nf-site #page-container .gallery { margin: 40px 0; }
  body.nf-site #page-container .gallery h3 { margin: 0 0 8px; }

  /* apartments: each room is the photo, then the text and Book Now, then a strip of thumbnails */
  body.nf-site #page-container .list.rooms .entry { width: auto; height: auto; margin: 0 0 48px; padding: 0; display: flex; flex-direction: column; }
  body.nf-site #page-container .list.rooms .entry .main-photo { position: relative; top: auto; left: auto; bottom: auto; right: auto; order: 1; width: auto; height: 400px; margin: 0 24px; }
  body.nf-site #page-container .list.rooms .entry .roomtext { order: 2; float: none; width: auto; height: auto; margin: 0 24px; padding: 28px 24px 24px; }
  body.nf-site #page-container .list.rooms .entry .images { order: 3; position: static; float: none; width: auto; height: auto; margin: 12px 24px 0; }
  body.nf-site #page-container .list.rooms .entry .clearleft { display: none; }
  body.nf-site #page-container .gallery.room { float: none; width: auto; height: auto; overflow-x: auto; overflow-y: hidden; display: flex; flex-wrap: nowrap; gap: 8px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 6px; }
  body.nf-site #page-container .gallery.room a.gallery-item { display: block; flex: 0 0 auto; scroll-snap-align: start; }
  body.nf-site #page-container .gallery.room img { float: none; display: block; width: 163px; height: auto; margin: 0; }
  body.nf-site #page-container .button.roombooking { margin-top: 16px; }

  /* forms: label over a full-width field (the desktop grid applies from 1170) */
  body.nf-site #page-container .nf-contact-form { max-width: 640px; }
  body.nf-site #page-container .nf-contact-form form.et_pb_contact_form { display: block; }
  body.nf-site #page-container .nf-contact-form .et_pb_contact_form_label { text-align: left; padding: 0; line-height: 24px; margin: 14px 0 6px; font-size: 16px; }
  body.nf-site #page-container .nf-contact-form p.et_pb_contact_field .input { width: 100%; height: 48px; margin: 0; }
  body.nf-site #page-container .nf-contact-form p.et_pb_contact_field textarea.input { width: 100%; height: 150px; min-height: 150px; margin: 0; }
  body.nf-site #page-container .nf-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after { position: static; display: inline-block; vertical-align: -2px; margin-left: 6px; }
  body.nf-site #page-container .nf-contact-form .et_contact_bottom_container, body.nf-site #page-container .nf-contact-form .et_pb_contact_right { display: block; width: auto; text-align: left; }
  body.nf-site #page-container .nf-contact-form .et_pb_contact_right p.clearfix { margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; column-gap: 8px; line-height: 48px; font-size: 16px; text-align: left; }
  body.nf-site #page-container .nf-contact-form .et_pb_contact_right p.clearfix::before { content: "Verification"; flex: 1 1 100%; display: block; visibility: visible; height: auto; font: 400 16px/24px 'Lato', Arial, Helvetica, sans-serif; color: #333333; margin: 0 0 6px; }
  body.nf-site #page-container .nf-contact-form input.et_pb_contact_captcha { width: 90px; height: 48px; }
  body.nf-site #page-container .et_pb_section .nf-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { display: block; width: 100%; height: 52px; margin: 22px 0 0 0; line-height: 50px !important; font-size: 16px !important; padding: 0 20px !important; }
  body.nf-site #page-container p.ils-required-note { width: auto; margin: 8px 0 20px; text-align: left; }
  body.nf-site #page-container p.ils-required-note em.required { display: inline-block; }

  /* search form */
  body.nf-site #page-container table.form.searchpage, body.nf-site #page-container table.form.searchpage tbody, body.nf-site #page-container table.form.searchpage tr { display: block; width: auto; }
  body.nf-site #page-container table.form.searchpage td { display: flex; gap: 8px; width: auto; max-width: 560px; padding: 0; }
  body.nf-site #page-container .form.searchpage input { float: none; margin: 0; }
  body.nf-site #page-container .form.searchpage input.clicknclear { flex: 1 1 auto; min-width: 0; width: auto; height: 48px; box-sizing: border-box; border: 1px solid #767676; }
  body.nf-site #page-container .form.searchpage input.button { flex: 0 0 auto; height: 48px; line-height: 48px; padding: 0 22px; }

  /* maps: the address box goes under the map (laid over a narrow map it covers Google's attribution row) */
  body.nf-site #page-container .map-wrapper { width: auto; display: flex; flex-direction: column; }
  body.nf-site #page-container .map-wrapper .map-container { order: 1; height: 380px; }
  body.nf-site #page-container .map-wrapper .map-info { position: static; order: 2; align-self: center; transform: none; margin: 16px 0; box-shadow: none; border: 1px solid #d0d0d0; }

  /* footer: the address and the legal links side by side, the credit under them */
  body.nf-site #page-container #footer { padding: 32px 0; }
  body.nf-site #page-container #footer > .container { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 32px; row-gap: 20px; }
  body.nf-site #page-container #footer .container > .clearboth, body.nf-site #page-container #footer .footermenu { display: none; }
  body.nf-site #page-container #footer .container .mid { float: none; width: auto; flex: 1 1 320px; }
  body.nf-site #page-container #footer .container .right { float: none; width: auto; flex: 1 1 320px; text-align: right; }
  body.nf-site #page-container #footer .fmenu { float: none; display: block; margin: 0 0 12px; }
  body.nf-site #page-container .copyright { float: none; display: block; }
  body.nf-site #page-container #footer .vcard { float: none; width: auto; }
  body.nf-site #page-container #footer .vcard li { line-height: 24px; }
  body.nf-site #page-container #footer .container :is(.mid, .right) { min-width: 0; }
  body.nf-site #page-container #footer .socialmedia { float: none; margin-top: 12px; }
}

/* ======================= home below 1170: one column in reading order ======================= */
@media (max-width: 1169px) {
  /* welcome: the text, then the video photo with the building photo and the TripAdvisor badge beside it */
  body.nf-site.nf-home #page-container .content { display: grid; grid-template-columns: minmax(0, 1fr) 270px; height: auto; }
  body.nf-site.nf-home #page-container .content > .clearboth { display: none; }
  body.nf-site.nf-home #page-container .content .maintext { grid-column: 1 / -1; grid-row: 1; position: relative; float: none; width: auto; margin: 0; padding: 36px 24px 28px; }
  body.nf-site.nf-home #page-container .content .maintext > * { max-width: 820px; }
  body.nf-site.nf-home #page-container .contentphoto { grid-column: 1; grid-row: 2; position: relative; top: auto; left: auto; bottom: auto; right: auto; width: auto; min-height: 360px; }
  body.nf-site.nf-home #page-container .thinbanner { grid-column: 2; grid-row: 2; position: relative; top: auto; right: auto; bottom: auto; width: 270px; height: 360px; box-shadow: none; }
  body.nf-site.nf-home #page-container .thinbannertop { bottom: 150px; }
  body.nf-site.nf-home #page-container .thinbannercontent { height: 150px; display: flex; align-items: center; justify-content: center; }
  body.nf-site.nf-home #page-container .thinbannercontent p { margin: 0; }

  /* special offers: the photo, then the offer panel */
  body.nf-site.nf-home #page-container .mid-content { height: auto; }
  body.nf-site.nf-home #page-container .special { width: auto; height: auto; display: flex; flex-direction: row; align-items: center; padding: 40px 24px; }
  body.nf-site.nf-home #page-container .special::before, body.nf-site.nf-home #page-container .special::after { display: none; }
  body.nf-site.nf-home #page-container .special .special-image { position: relative; top: auto; left: auto; flex: 1 1 auto; width: auto; height: 380px; z-index: 2; }
  body.nf-site.nf-home #page-container .special .container { flex: 0 0 300px; width: 300px; padding: 0; margin: 0 0 0 -24px; z-index: 3; }
  body.nf-site.nf-home #page-container .special .text { float: none; display: block; position: relative; width: auto; margin: 0; padding: 28px 24px 30px; z-index: 2; }
  body.nf-site.nf-home #page-container .special h3 { float: none; font-size: 28px; line-height: 32px; }
  body.nf-site.nf-home #page-container .special h4, body.nf-site.nf-home #page-container .special h4 a { width: auto; }
  body.nf-site.nf-home #page-container .special > .clearboth { display: none; }
  body.nf-site.nf-home #page-container .faq { position: relative; bottom: auto; right: auto; width: auto; margin: 0; padding: 18px 24px; box-shadow: none; }
  body.nf-site.nf-home #page-container .faq a { display: inline-block; padding: 2px 0; }

  /* Book Direct: the photo, then the teal list and Book Online Now; then the Latest Blog panel */
  body.nf-site.nf-home #page-container .bottom-content { float: none; height: auto; display: flex; flex-direction: column; }
  body.nf-site.nf-home #page-container .bookingbanner { float: none; width: auto; height: auto; display: flex; flex-direction: column; justify-content: flex-end; min-height: 520px; }
  body.nf-site.nf-home #page-container .bookingbannercontent { position: relative; top: auto; left: auto; width: auto; max-width: 420px; margin: 24px; padding: 20px 26px 26px; }
  body.nf-site.nf-home #page-container .blog-wrapper { float: none; width: auto; height: auto; padding: 0 24px 36px; }
  body.nf-site.nf-home #page-container .panel.blog { width: auto; }
  body.nf-site.nf-home #page-container .panel.blog h3 { margin: 32px 0 20px; }
  body.nf-site.nf-home #page-container .panel.blog li { float: none; display: flow-root; width: auto; margin: 0; }
}

/* ======================= below 980: sidebars under the text ======================= */
@media (max-width: 979px) {
  body.nf-site #page-container .container .left, body.nf-site #page-container .container .right.sidemenu { float: none; width: auto; }
  body.nf-site #page-container .container .right.sidemenu .panel:first-child { margin-top: 40px; }
  /* FAQ: live repeats the FAQ Categories panel beside each of its three sections; stacked, it would repeat after each one, so it is shown
     once, above the questions (it is the page's jump list) */
  body.nf-site #page-container .container:has(> .right.sidemenu > .panel.faqs) { display: flex; flex-direction: column; }
  body.nf-site #page-container .container:has(> .right.sidemenu > .panel.faqs) > .right.sidemenu { order: -1; }
  body.nf-site #page-container .container:has(> .right.sidemenu > .panel.faqs) > .right.sidemenu ~ .right.sidemenu { display: none; }
  body.nf-site #page-container .container:has(> .right.sidemenu > .panel.faqs) > .right.sidemenu .panel { margin: 0 0 8px; }
  body.nf-site #page-container .container:has(> .right.sidemenu > .panel.faqs) > .clearboth { display: none; }

  /* home welcome below 980: the photos side by side under the text, the badge under the building photo */
  body.nf-site.nf-home #page-container .content { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.nf-site.nf-home #page-container .thinbanner { width: auto; }
  body.nf-site.nf-home #page-container .thinbannertop, body.nf-site.nf-home #page-container .thinbannercontent { width: auto; left: 0; }
}

/* ======================= phone: below 768 ======================= */
@media (max-width: 767px) {
  body.nf-site #page-container .container, body.nf-site #page-container .container.main { padding-left: 16px; padding-right: 16px; }

  /* header */
  body.nf-site #page-container #header .header-top .tel { font-size: 19px; line-height: 28px; padding-left: 30px; background-size: 21px auto; }
  body.nf-site #page-container .header-bottom .container { column-gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  body.nf-site #page-container #header .logo img { width: 150px; height: auto; }
  /* logo and Menu on the first row, Book Now as a full-width bar under them (live's phone template ends its first screen with a
     "Make a Booking" bar the same way) */
  body.nf-site #page-container .ils-menu-toggle { order: 2; padding: 0 12px; gap: 8px; }
  body.nf-site #page-container #menu > ul > li.alt { order: 3; flex: 0 0 100%; margin: 10px 0 0; }
  body.nf-site #page-container #menu > ul > li.alt > a:is(:link, :visited) { padding: 0 12px; line-height: 46px; font-size: 16px; text-align: center; }

  /* hero */
  body.nf-site #page-container .featureimage { height: 190px; }
  body.nf-site.nf-home #page-container #feature .featuremain, body.nf-site.nf-home #page-container .featuremain li, body.nf-site.nf-home #page-container .featuremain img { height: 260px; }
  body.nf-site #page-container .featureoverlay { padding: 14px 16px; }
  body.nf-site #page-container .featureoverlay p { font-size: 19px; line-height: 26px; letter-spacing: 0.5px; }

  /* type */
  body.nf-site #page-container h1 { font-size: 26px; line-height: 32px; }
  body.nf-site #page-container h2 { font-size: 21px; line-height: 28px; }
  body.nf-site #page-container h3 { font-size: 19px; line-height: 26px; }
  body.nf-site #page-container .list.rooms .entry h2 { font-size: 24px; line-height: 30px; }
  body.nf-site #page-container .panel h3 { font-size: 24px; line-height: 28px; }
  body.nf-site #page-container .container.main { padding-top: 28px; padding-bottom: 16px; }
  body.nf-site #page-container [style*="justify"] { text-align: left !important; }
  body.nf-site #page-container .content.bottom { margin: 28px 0; }
  body.nf-site #page-container .content p { margin: 14px 0; }
  body.nf-site #page-container .list:not(.rooms) .entry { margin-top: 32px; }
  body.nf-site #page-container .panel { margin: 32px 0; }
  body.nf-site #page-container blockquote { padding-left: 50px; background-size: 36px auto; }

  /* home */
  body.nf-site.nf-home #page-container .content { grid-template-columns: minmax(0, 1fr) 140px; }
  body.nf-site.nf-home #page-container .content .maintext { padding: 28px 16px 20px; }
  body.nf-site.nf-home #page-container .content .maintext h1 { font-size: 26px !important; line-height: 32px !important; }
  body.nf-site.nf-home #page-container .contentphoto { min-height: 240px; }
  body.nf-site.nf-home #page-container .contentphoto p a { background-size: 72px auto; }
  body.nf-site.nf-home #page-container .thinbanner { height: 240px; }
  body.nf-site.nf-home #page-container .thinbannertop { bottom: 110px; }
  body.nf-site.nf-home #page-container .thinbannercontent { height: 110px; }
  body.nf-site.nf-home #page-container .thinbannercontent img { width: 100px; height: auto; }
  body.nf-site.nf-home #page-container .special { flex-direction: column; align-items: stretch; padding: 0; }
  body.nf-site.nf-home #page-container .special .container { flex: none; width: auto; margin: 0; }
  body.nf-site.nf-home #page-container .special .special-image { height: 230px; }
  body.nf-site.nf-home #page-container .special .text { padding: 24px 16px 26px; }
  body.nf-site.nf-home #page-container .special .button { display: block; text-align: center; padding: 0 16px; }
  body.nf-site.nf-home #page-container .faq { padding: 16px; }
  body.nf-site.nf-home #page-container .faq a { font-size: 18px; line-height: 24px; }
  body.nf-site.nf-home #page-container .faq a strong { font-size: 22px; line-height: 28px; }
  body.nf-site.nf-home #page-container .bookingbanner { min-height: 0; padding-top: 220px; background-size: auto 240px !important; background-position: top center !important; background-color: #006e6d; }
  body.nf-site.nf-home #page-container .bookingbannercontent { max-width: none; margin: 0; padding: 20px 16px 24px; }
  body.nf-site.nf-home #page-container .bookingbannercontent li { font-size: 19px; line-height: 30px; }
  body.nf-site.nf-home #page-container .bookingbannercontent a.button { display: block; width: auto; }
  /* the one-bedroom page's text panels carry live's inline 5% margins and 10% padding, which leave a 250px column on a phone */
  body.nf-site:not(.nf-home) #page-container .content div[style*="margin: 0 5%"] { margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  /* the one-bedroom page's Book Direct block: live's inline 100px side padding and 24px list lines leave no room on a phone */
  body.nf-site:not(.nf-home) #page-container .content div:has(> .bookingbannercontent) { padding: 24px 16px !important; }
  body.nf-site:not(.nf-home) #page-container .content .bookingbannercontent { display: block; }
  body.nf-site:not(.nf-home) #page-container .content .bookingbannercontent li { font-size: 19px !important; line-height: 30px !important; }
  body.nf-site:not(.nf-home) #page-container .content .bookingbannercontent a.button { display: block; }
  body.nf-site.nf-home #page-container .blog-wrapper { padding: 0 16px 28px; }
  body.nf-site.nf-home #page-container .panel.blog h3 { margin: 28px 0 16px; }

  /* rooms */
  body.nf-site #page-container .list.rooms .entry .main-photo { height: 230px; margin: 0; }
  body.nf-site #page-container .list.rooms .entry .roomtext { margin: 0; padding: 22px 16px 20px; }
  body.nf-site #page-container .list.rooms .entry .roomtext a.button { display: block; text-align: center; padding: 0 16px; }
  body.nf-site #page-container .list.rooms .entry .images { margin: 10px 0 0 16px; }
  body.nf-site #page-container .gallery.room img { width: 120px; }
  body.nf-site #page-container .gallery:not(.room) .container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  /* tables of short label and value cells (contact details): label column plus value */
  body.nf-site #page-container .content table:not(.form), body.nf-site #page-container .content table:not(.form) tbody { display: block; width: auto !important; }
  body.nf-site #page-container .content table:not(.form) tr { display: grid; grid-template-columns: 84px minmax(0, 1fr); row-gap: 4px; margin-bottom: 6px; }
  body.nf-site #page-container .content table:not(.form) td { display: block; width: auto !important; overflow-wrap: anywhere; }
  body.nf-site #page-container .content table:not(.form) td:empty { display: none; }
  body.nf-site #page-container .content a.button:is(:link, :visited) { box-sizing: border-box; max-width: 100%; height: auto; min-height: 46px; padding: 11px 24px; line-height: 24px; white-space: normal; text-align: center; }
  body.nf-site #page-container .map-wrapper .map-container { height: 300px; }
  body.nf-site #page-container .list .entry .blog-image, body.nf-site #page-container .entry img.blog-image,
  body.nf-site #page-container .entry > a.gallery-item img { float: none; display: block; margin: 0 0 14px; }
  /* the post's photo link wraps its (now unfloated) photo, so its keyboard ring is drawn round the picture, not round an empty line */
  body.nf-site #page-container .entry > a.gallery-item:has(> img) { display: inline-block; vertical-align: top; }

  /* footer: one column */
  body.nf-site #page-container #footer .container .right { text-align: left; }
  body.nf-site #page-container #footer .fmenu ul { display: flex; flex-wrap: wrap; column-gap: 16px; }
  body.nf-site #page-container #footer .fmenu li, body.nf-site #page-container #footer .fmenu li:first-child { display: block; padding: 0; background: none; }
  body.nf-site #page-container #footer .fmenu li a { line-height: 36px; }
}

/* ======================= small phones: below 380 ======================= */
@media (max-width: 379px) {
  body.nf-site #page-container .header-bottom .container { column-gap: 8px; }
  body.nf-site #page-container #header .header-top .tel { font-size: 18px; }
}

/* blog photos: the post and list photo use the larger 800px file on phone and tablet (srcset in ilaunch-site.php); object-fit keeps the 3:2 desktop box undistorted if a hi-res screen picks the 16:9 file */
body.nf-site #page-container .blog-image { object-fit: cover; }
@media (max-width: 979px) {
  body.nf-site #page-container .entry > a.gallery-item:has(> img.blog-image) { display: block; }
  body.nf-site #page-container .entry > a.gallery-item img.blog-image { float: none; display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0 0 18px; }
}
@media (max-width: 767px) {
  body.nf-site #page-container .list .entry .summary > a:has(> img.blog-image) { display: block; }
  body.nf-site #page-container .list .entry .blog-image { width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; }
}