/* as-mobile.css - Aruba Surf Resort: the DESIGNED tablet and phone layer (Stage 4, skill Rule 2). Loads LAST, after as-design.css.
   Nothing in this file applies from 1250px up: every rule sits inside a max-width 1249px (or narrower) media query, so the 1:1 copy
   of live (as-design.css) is untouched there.
   Started from the starter pack's render_mobile_css.py output (build/stage4/as-mobile.starter-render.css, palette in
   build/site-params.json, AA check exit 0), then rewritten for THIS site's markup: header logo + menu on white, the slider with the
   orange-bordered booking box, the home orange banner row (.feature-banners), the light blue welcome band with the beach photo
   (.content .contentimage), Latest Blogs, full-width inner .content pages (no 1170 container), room cards (.list .entry), photo
   galleries and the green photo footer. None of the starter's VARIANT blocks match this site; only its patterns are reused.
   WIDTH BANDS
     1250 and up    live's exact look (as-design.css; nothing here).
     1170 to 1249   live's layout, fixed rows fitted, plus the AA layer.
     768 to 1169    a reflow: the menu behind a button, the booking box under the photo, banners and blog teasers in 3 columns,
                    columns stacked, fluid galleries. Plus the AA layer.
     below 768      the phone design: compact header, stacked booking block, one column, 2-up galleries, 4-up room thumbnails.
   AA LAYER (below 1250, every state: rest, hover, focus, active): text 14px or more, inputs 16px, tap targets 24px or more.
     Live colour (ratio)                          below 1250 (ratio)
     link #f57c31 on white (2.7)                  #b84d0b (5.1 on white, 4.7 on the #f5f5f5 room cards)
     blue headings / more / menu hover #4489da (3.6) #2a6bbd (5.3)
     yellow buttons, white label (1.6)            the same yellow #fcc20c with a dark label #252a2d (8.9); hover #eca201 (6.7)
     booking fields white on #53a93a (3.0)        white on #2f7a1f (5.4), labels on #245f18
     menu Book Now #ffae00 on white (1.9)         #9a5a00 (5.5)
     sub-menu white on #4489da (3.6)              white on #2a6bbd (5.3); current/hover item #ffe2a8 on #1d4f8f (6.5)
     grey details #888 (3.5), pager #808080 on #ededed (3.4), pager current white on #b0b0b0 (2.2)
                                                  #6b6b6b (5.3), #444 on #ededed (8.3), white on #6b6b6b (5.3)
     grey a.link #666 on the home blue #b1e3ff (4.2) #4a4a4a (6.5)
     calendar header white on #ffae00 (1.9)       white on #8a5a00 (5.9)
     footer: white on a photo (not measurable)    the same photo under a dark green veil: white on at worst #405e36 (7.0),
                                                  hover #ffd34d (5.1 or more)
   Focus: a dark 3px ring with a 2px white halo, visible on white, blue, green and photo grounds. */

/* =================== below 1250: the AA layer =================== */
@media (max-width: 1249px) {
  /* ---- text floor: live's panel (13px), details and "more" (11px), pager (12px), back-to-top (11px), footer (13px), smalltext, the
     home offer box (12px), form notes (11px) ---- */
  body.as-site #page-container :is(.panel, .panel li, .panel .summary, .panel .date, .panel .details, .panel li em, .entry .details, .entry .details a,
    a.more, .paging, .paging a, .paging em, span.options, span.options a, span.result-count, div.top, div.top a, .smalltext, .smalltext a,
    #footer, #footer p, #footer li, #footer a, .copyright, .copyright p, .copyright li, .copyright a, .footer-tags, .footer-tags p, .footer-tags a,
    .footermenu, .footermenu li, .footermenu a, .special p, .special .text, .form td em, blockquote .details, p.ils-required-note, p.ils-required-note em) {
    font-size: 14px; line-height: 1.5; }
  body.as-site #page-container .special strong { font-size: 15px; }
  /* the blog sidebar's empty tag-cloud link (inline 10px, no text): nothing to read or tap */
  body.as-site #page-container .panel .text a:empty { display: none; }
  body.as-site #page-container .panel .text a { font-size: 14px !important; }
  /* pasted page and post text carries inline 13.6px and 12px sizes (the terms page, some posts; 11pt, 1.2em and 15px are fine) */
  body.as-site #page-container :is(.content, .map-wrapper) :is([style*="font-size: 13.6px"], [style*="font-size:13.6px"], [style*="font-size: 12px"], [style*="font-size:12px"]) { font-size: 14px !important; line-height: 1.5 !important; }
  /* form controls 16px (also stops iOS zooming on focus) */
  body.as-site #page-container :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]), select, textarea) { font-size: 16px; }
  /* tap targets 24px: inline vertical padding on list and running-text links (no change to how a line wraps); boxes for pager links */
  body.as-site #page-container :is(#footer a:not(.socialmedia a), .panel a:not(.button), .copyright li a, .footer-tags a, .details a, a.more:not(.button), .content p a:not(.button), .content td a:not(.button), .content li a:not(.button), blockquote a, .special .text a:not(.button)) {
    padding-top: 5px; padding-bottom: 5px; }
  body.as-site #page-container :is(.paging a, .paging em, span.options a) { display: inline-block; min-width: 24px; min-height: 24px; line-height: 24px; box-sizing: border-box; text-align: center; }
  body.as-site #page-container div.top a { padding-top: 2px; padding-bottom: 2px; line-height: 20px; }
  body.as-site #page-container .list .entry h2 > a { padding-top: 2px; padding-bottom: 2px; }
  /* the search page's image "go" button (27 x 23px): padding grows the tap box, the image stays the same size */
  body.as-site #page-container .form.searchpage input[type="image"] { box-sizing: content-box; padding: 8px; font-size: 16px; }
  body.as-site #page-container .socialmedia a { min-width: 24px; min-height: 24px; }
  /* the logo link was a 16px text line around the logo image; the header search's image button is 23px tall on live */
  body.as-site #page-container #header .logo a { display: block; width: fit-content; }
  body.as-site #page-container #header .search input[type="image"] { box-sizing: content-box; padding-bottom: 1px; }
  /* room thumbnails: the link box is the text line around the photo; make it the photo's size */
  body.as-site #page-container .gallery.room a.gallery-item { display: inline-block; vertical-align: top; }

  /* ---- colours, every state ---- */
  /* body links: live's orange #f57c31 is 2.7:1 on white */
  body.as-site #page-container a:is(:link, :visited, :active, :hover) { color: #b84d0b; }
  body.as-site #page-container a.link:is(:link, :visited, :active, :hover) { color: #5c5c5c; }
  body.as-site.as-home #page-container .content a.link:is(:link, :visited, :active, :hover) { color: #4a4a4a; }
  /* headings: live's blue #4489da (3.6:1) */
  body.as-site #page-container :is(h2, #booking h3) { color: #2a6bbd; }
  body.as-site #page-container h2 a:is(:link, :visited, :active) { color: #2a6bbd; }
  body.as-site #page-container h2 a:hover { color: #444444; }
  body.as-site #page-container h3 a:is(:link, :visited, :active, :hover) { color: #5c5c5c; }
  body.as-site #page-container em.highlight { background: #2a6bbd; }
  /* buttons: live's yellow with a dark label (white was 1.6:1); hover/focus/active the deeper yellow, same dark label */
  body.as-site #page-container :is(a.button, input.button:not([type="image"])),
  body.as-site #page-container :is(a.button, input.button:not([type="image"])):is(:link, :visited, :active, :hover, :focus, :focus-visible) {
    background-color: #fcc20c; color: #252a2d; text-shadow: none; text-decoration: none; }
  body.as-site #page-container :is(a.button, input.button:not([type="image"])):is(:hover, :focus, :focus-visible, :active) { background-color: #eca201; border-bottom-color: #cc8c00; }
  /* the header and search-page image "go" buttons carry live's yellow button fill under the image and a white "Submit" value that
     shows only if the image fails: dark, like every other button label below 1250 */
  body.as-site #page-container input.button[type="image"]:is(*, :hover, :focus, :focus-visible, :active) { color: #252a2d; text-shadow: none; }
  /* the Divi contact and review form button, drawn as live's yellow button */
  body.as-site #page-container .et_pb_section .as-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button,
  body.as-site #page-container .et_pb_section .as-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:is(:hover, :focus, :focus-visible, :active) {
    color: #252a2d !important; text-shadow: none !important; }
  body.as-site #page-container .et_pb_section .as-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:is(:hover, :focus, :focus-visible, :active) { background-color: #eca201 !important; }
  /* keyboard focus: dark ring + white halo (Divi removes every ring) */
  body.as-site #page-container :is(a, input, select, textarea, button):focus-visible,
  body.as-site :is(#datepicker_div, #fancybox-wrap) :is(a, select):focus-visible {
    outline: 3px solid #111111 !important; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }
  /* the home Latest Blogs photo links and a post's lead photo link: the photo is floated, so the link itself is an empty 0 x 0 box and its ring
     is invisible; ring the photo */
  body.as-site #page-container :is(.panel.blog li > a, .entry > a.gallery-item):focus-visible > img { outline: 3px solid #111111; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }
  /* menu: hover #4489da (3.6:1) and Book Now #ffae00 (1.9:1) */
  body.as-site #page-container #menu li:hover > a:is(:link, :visited, :active, :hover) { color: #2a6bbd; }
  body.as-site #page-container #menu li.alt a:is(:link, :visited, :active, :hover) { color: #9a5a00; }
  body.as-site #page-container #menu li ul { background: #2a6bbd; }
  body.as-site #page-container #menu li:hover ul a:is(:link, :visited, :active), body.as-site #page-container #menu li ul a:is(:link, :visited, :active) { color: #ffffff; }
  body.as-site #page-container #menu li li:is(:hover, .active) { background: #1d4f8f; }
  body.as-site #page-container #menu li li:is(:hover, .active) a:is(:link, :visited, :active, :hover), body.as-site #page-container #menu li ul a:is(:hover, :focus) { color: #ffe2a8; }
  /* header phone (shown below 1170): live's orange */
  body.as-site #page-container #header .phone, body.as-site #page-container #header .phone a.tel-link { color: #b84d0b; }
  /* booking box: white field text on a deeper green; the select's options stay dark on white */
  body.as-site #page-container .bookingform span.check-in, body.as-site #page-container .bookingform span.duration { background: #2f7a1f; }
  body.as-site #page-container .bookingform em { background: #245f18; }
  body.as-site #page-container .bookingform select option { color: #252a2d; background: #ffffff; }
  /* the nights select: WebKit (Safari, iPhone and iPad) draws its own light grey control under the white text (unreadable); draw it
     ourselves on the green with a white arrow, as Chrome shows it */
  body.as-site #page-container .bookingform span select { -webkit-appearance: none; appearance: none; border: 0; border-radius: 0; color: #ffffff;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; padding-right: 32px; }
  body.as-site #page-container #booking { background-color: #ffffff; }
  /* panels, details, pager, back to top */
  body.as-site #page-container .panel .title a:is(:link, :visited, :active) { color: #444444; }
  body.as-site #page-container .panel .title a:is(:hover, :focus) { color: #2a6bbd; }
  body.as-site #page-container :is(.panel .date, .panel .details, .entry .details, .panel li em, blockquote .details, .smalltext, .form td) { color: #6b6b6b; }
  body.as-site #page-container :is(.panel .details a, .entry .details a, .smalltext a):is(:link, :visited, :active) { color: #5c5c5c; }
  body.as-site #page-container :is(.panel .details a, .entry .details a, .smalltext a):is(:hover, :focus) { color: #444444; }
  body.as-site #page-container a.more:not(.button):is(:link, :visited, :active) { color: #2a6bbd; }
  body.as-site #page-container a.more:not(.button):is(:hover, :focus) { color: #444444; }
  body.as-site #page-container blockquote .highlight { color: #b84d0b; }
  body.as-site #page-container .paging { color: #5c5c5c; }
  body.as-site #page-container .paging a:is(:link, :visited, :active) { color: #444444; background-color: #ededed; }
  body.as-site #page-container :is(.paging a:hover, .paging a:focus, .paging em, .paging em a:is(:link, :visited)) { color: #ffffff; background-color: #6b6b6b; }
  body.as-site #page-container div.top a:is(:link, :visited, :active) { color: #5c5c5c; }
  body.as-site #page-container div.top a:is(:hover, :focus) { color: #ffffff; background: #5c5c5c; }
  /* home offer box (white on red passes); its link hover was black on red */
  body.as-site #page-container .special a:not(.button):is(:link, :visited, :active, :hover) { color: #ffffff; }
  /* footer: the same photo under a dark green veil, so white text is AA on any pixel of the photo; hover yellow is AA on the veil */
  body.as-site #page-container #footer { background-image: linear-gradient(rgba(28, 64, 16, 0.84), rgba(28, 64, 16, 0.84)), url(/wp-content/uploads/ilaunch/skin/images/footer-bg.jpg); background-color: #2f5a22; }
  body.as-site #page-container #footer a:is(:link, :visited, :active) { color: #ffffff; }
  body.as-site #page-container #footer a:is(:hover, :focus) { color: #ffd34d; }
  body.as-site #page-container #footer .vcard a.tel-link[href^="tel:"]:is(:link, :visited, :hover, :active, :focus) { color: #ffffff !important; }
  /* in-text links (C2, WCAG 1.4.1): live's grey "a.link" and the post and panel meta links differ from the text around them by colour
     alone (#5c5c5c on #444, 1.46:1). Below 1250 every link inside running text is underlined in every state; phone numbers in a
     sentence too. Menus, buttons, "more" links, headings, the pager and photo links are not touched. */
  body.as-site #page-container :is(.content, .special, .map-wrapper) :is(p, li, td, dd, blockquote, .details, .summary, .text, .smalltext) a[href]:not(.button):not(.more):not(.top):is(:link, :visited, :hover, :active, :focus),
  body.as-site #page-container a.link:is(:link, :visited, :hover, :active, :focus) {
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
  /* phone numbers inside content text (the offer box, /offers, the contact table): as-design.css keeps them exactly like the text
     around them with an !important "no underline" (1250 and up is live's look); below 1250 they are underlined like every in-text link */
  body.as-site #page-container :is(.content, .special) a.tel-link[href^="tel:"]:is(:link, :visited, :hover, :active, :focus) {
    text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 2px; }
  body.as-site #page-container :is(.content, .special) :is(h1, h2, h3, h4, .title, .paging, .options) a[href]:is(:link, :visited, :hover, :active, :focus),
  body.as-site #page-container :is(.content, .special) a[href]:has(> img):is(:link, :visited, :hover, :active, :focus) { text-decoration: none; }
  /* C4: the map box's Get Directions link (89 x 16) gets a 24px tap height */
  body.as-site #page-container .map-info-window a[href] { display: inline-block; min-height: 24px; padding: 4px 0; line-height: 16px; box-sizing: border-box; }
  /* text that would break out of a narrow column */
  body.as-site #page-container .content :is(h1, h2, h3, h4, p, li, td, blockquote) { overflow-wrap: break-word; }
  /* the home page's DoubleClick activity pixel (copied as live, a 1x1 image straight inside <body>) sits on its own 22px text line
     above the page: below 1250 it is taken out of the flow (it still loads and counts) */
  body.as-site > img[src*="doubleclick.net"] { position: absolute; top: 0; left: 0; }
  /* layout shift (perf pre-check, CLS 0.100 at phone width): the logo image has no width/height attributes, and the slider list keeps a
     14px browser margin until the slider script zeroes it. Reserve the logo box (170 x 152, shown smaller below 1170) and set the slider's
     own end state (no margin, clipped) up front, so the photo and the booking box never move after first paint. */
  body.as-site #page-container #header .logo img { width: 170px; height: auto; aspect-ratio: 170 / 152; }
  body.as-site #page-container #featuremain { margin: 0; overflow: hidden; }
  /* the Facebook like button (kept as live): never wider than its column */
  body.as-site #page-container .fb-like, body.as-site #page-container .fb-like > span, body.as-site #page-container .fb-like iframe { max-width: 100% !important; }
}

/* =================== 1170 to 1249: live's layout with the fixed rows fitted =================== */
@media (min-width: 1170px) and (max-width: 1249px) {
  /* the home offer box is a fixed 73px text box: 14px text needs it to grow */
  body.as-site.as-home #page-container .special .text { height: auto; min-height: 73px; }
  /* live's photo galleries are fixed 436px items: two per row with a 200px hole from 1170 up to live's width. A fluid grid of three. */
  body.as-site #page-container .gallery:not(.room) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 6px; }
  body.as-site #page-container .gallery:not(.room) > :is(h3, p) { grid-column: 1 / -1; }
  body.as-site #page-container .gallery:not(.room) > a:not(.gallery-item) { position: absolute; }
  body.as-site #page-container .gallery:not(.room) > br { display: none; }
  body.as-site #page-container .gallery:not(.room) a.gallery-item { display: block; }
  body.as-site #page-container .gallery:not(.room) a.gallery-item img { display: block; width: 100%; height: auto; box-sizing: border-box; }
  /* home: live's third banner photo is 362px plus an 8px border in a 370px column (8px past the page edge from 1170 to 1177): the border
     inside the column, live's 285px height kept (the photo loses 4px at each side) */
  body.as-site.as-home #page-container .feature-banners .banner img { box-sizing: border-box; width: 100%; height: 285px; object-fit: cover; }
  /* attractions: live's four-photo booking table is a fixed 1170px inside a 1090px column (live scrolls sideways below 1370): the column's
     width, the four 262px photos a few pixels smaller */
  body.as-site #page-container .content table[style*="width: 1170px"] { width: 100% !important; }
  body.as-site #page-container .content table[style*="width: 1170px"] img { max-width: 100%; height: auto !important; }
  /* touch tablets: the first tap on Contact Us opens its drop-down (the header script adds .ils-sub-open and holds that tap's navigation) */
  body.as-site #page-container #menu li.ils-sub-open > ul { display: block; }
  body.as-site #page-container #menu li.ils-sub-open { z-index: 2; }
}

/* =================== below 1170: the reflow (tablet and phone) =================== */
@media (max-width: 1169px) {
  body.as-site #page-container :is(#container-outer-bg, #container-outer, #header, #feature, .featureimage, .feature-banners, .content, .panel.blog, #footer) { min-width: 0; }
  body.as-site #page-container .container { width: auto; max-width: 1170px; padding-left: 24px; padding-right: 24px; }
  body.as-site.as-home #page-container .panel.blog { width: auto; }

  /* ---- header: logo, phone, social, menu button on one row; the menu (and the search) open below as a panel ---- */
  body.as-site #page-container #header .container { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "logo . phone social toggle" "menu menu menu menu menu" "search search search search search";
    align-items: center; column-gap: 16px; padding-top: 12px; padding-bottom: 12px; }
  body.as-site #page-container #header .container > .clearboth { display: none; }
  body.as-site #page-container #header .logo { grid-area: logo; float: none; width: auto; }
  body.as-site #page-container #header .logo a { display: block; width: fit-content; }
  body.as-site #page-container #header .logo img { display: block; width: 150px; height: auto; }
  body.as-site #page-container #header .right { display: contents; }
  body.as-site #page-container #header .phone { grid-area: phone; display: block; float: none; margin: 0; padding-left: 27px; font-size: 20px; line-height: 30px; white-space: nowrap; }
  body.as-site #page-container #header .phone a.tel-link { display: inline-block; padding: 4px 0; }
  body.as-site #page-container #header .socialmedia { grid-area: social; float: none; display: flex; gap: 6px; line-height: 24px; }
  body.as-site #page-container #header .socialmedia a { margin: 0; }
  body.as-site #page-container .ils-menu-toggle { grid-area: toggle; display: inline-flex; align-items: center; gap: 10px; height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: 4px;
    background: #2a6bbd; color: #ffffff; font: 16px/44px 'AdventorMedium', Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
  body.as-site #page-container .ils-menu-toggle span, body.as-site #page-container .ils-menu-toggle span::before, body.as-site #page-container .ils-menu-toggle span::after {
    display: block; position: relative; width: 18px; height: 2px; background: #ffffff; content: ""; }
  body.as-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; }
  body.as-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; }
  body.as-site #page-container .ils-menu-toggle:is(:hover, :focus-visible), body.as-site #page-container #header.ils-menu-open .ils-menu-toggle { background: #1d4f8f; color: #ffffff; }
  /* the menu panel (in the flow, so nothing is drawn over the photo or the booking box) */
  body.as-site #page-container #menu { grid-area: menu; display: none; position: static; margin: 12px -24px 0; padding: 0; font-size: 17px; text-align: left; background: #2a6bbd; z-index: auto; }
  body.as-site #page-container #header.ils-menu-open #menu { display: block; }
  body.as-site #page-container #menu > ul { display: block; width: auto; }
  body.as-site #page-container #menu li { display: block; margin: 0; padding: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
  body.as-site #page-container #menu li:hover, body.as-site #page-container #menu li.active { border-bottom: 0; }
  body.as-site #page-container #menu li a:is(:link, :visited, :active, :hover), body.as-site #page-container #menu li:hover > a:is(:link, :visited, :active, :hover) {
    display: block; padding: 0 24px; line-height: 50px; font-size: 17px; color: #ffffff; background: none; }
  body.as-site #page-container #menu li a:focus-visible { outline-offset: -4px; }
  body.as-site #page-container #menu li > a:hover, body.as-site #page-container #menu li > a:focus { background: #1d4f8f; color: #ffffff; }
  body.as-site #page-container #menu li.active > a:is(:link, :visited, :active, :hover) { background: #1d4f8f; color: #ffffff; }
  body.as-site #page-container #menu li ul { position: static; display: block; width: auto; padding: 0; margin: 0; background: none; }
  body.as-site #page-container #menu li li { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  body.as-site #page-container #menu li li:is(:hover, .active) { background: none; }
  body.as-site #page-container #menu li ul a:is(:link, :visited, :active, :hover), body.as-site #page-container #menu li:hover ul a:is(:link, :visited, :active, :hover) {
    padding: 0 24px 0 44px; line-height: 46px; font-size: 16px; color: #ffffff; }
  body.as-site #page-container #menu li li.active > a:is(:link, :visited, :active, :hover) { background: #1d4f8f; color: #ffffff; }
  body.as-site #page-container #menu li.alt > a:is(:link, :visited, :active, :hover) { background: #fcc20c; color: #252a2d; }
  body.as-site #page-container #menu li.alt > a:is(:hover, :focus) { background: #eca201; color: #252a2d; }
  /* the header search: in the open panel, under the menu */
  body.as-site #page-container #header .search { grid-area: search; display: none; float: none; margin: 0 -24px; padding: 14px 24px 16px; background: #1d4f8f; line-height: normal; }
  body.as-site #page-container #header.ils-menu-open .search { display: block; }
  body.as-site #page-container #header .search form { display: flex; align-items: center; gap: 10px; }
  body.as-site #page-container #header .search input.clicknclear { flex: 1 1 auto; min-width: 0; width: auto; height: 44px; margin: 0; padding: 0 12px; box-sizing: border-box; font-size: 16px; color: #444444; background: #ffffff; }
  body.as-site #page-container #header .search input.button { float: none; flex: 0 0 auto; padding: 10px; margin: 0; box-sizing: content-box; }
  body.as-site #page-container #header .search .clearright { display: none; }

  /* ---- hero: the photo, then the booking box under it in the flow ---- */
  body.as-site #page-container #feature { position: relative; }
  body.as-site #page-container .featureimage { height: 300px; }
  body.as-site #page-container .featuremain, body.as-site #page-container .featuremain li, body.as-site #page-container .featuremain li img { height: 420px !important; }
  body.as-site #page-container .featuremain li img { width: 100% !important; object-fit: cover; }
  body.as-site #page-container #booking { position: relative; bottom: auto; left: auto; width: auto; margin: 0; padding: 4px 24px 16px; border: 0; border-top: 8px solid #e38d52; z-index: 5; }
  body.as-site #page-container #booking h3 { line-height: 44px; }
  body.as-site #page-container .bookingform { display: flex; flex-wrap: nowrap; gap: 10px; max-width: 900px; margin: 0 auto; padding: 0; }
  body.as-site #page-container .bookingform > .clearleft { display: none; }
  body.as-site #page-container .bookingform span.check-in, body.as-site #page-container .bookingform span.duration {
    float: none; display: flex; align-items: stretch; flex: 1 1 0; min-width: 0; height: 48px; margin: 0; padding: 0 6px 0 0; line-height: 48px; }
  body.as-site #page-container .bookingform em { flex: 0 0 auto; width: auto; padding: 0 12px; white-space: nowrap; }
  body.as-site #page-container .bookingform span.check-in { flex-grow: 1.45; }
  /* the calendar script wraps the date field and its icon in span.datepicker_wrap: that is the flex item that must shrink */
  body.as-site #page-container .bookingform .datepicker_wrap { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; float: none; }
  body.as-site #page-container .bookingform span input { flex: 1 1 auto; width: auto; min-width: 0; height: 40px; padding: 0 0 0 12px; box-sizing: border-box; }
  body.as-site #page-container .bookingform .datepicker_wrap > img { flex: 0 0 auto; margin: 0 6px 0 4px; }
  body.as-site #page-container .bookingform span select { flex: 1 1 auto; width: auto; min-width: 0; height: 46px; align-self: center; padding: 0 32px 0 12px; }
  body.as-site #page-container .bookingbutton { float: none; flex: 0 0 auto; }
  body.as-site #page-container .bookingbutton .button { display: block; height: 48px; padding: 3px 30px 0; }

  /* ---- home: the orange banner row in three columns ---- */
  body.as-site.as-home #page-container .feature-banners { padding: 24px 0; }
  body.as-site.as-home #page-container .feature-banners .container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
  body.as-site.as-home #page-container .feature-banners .container > .clearleft { display: none; }
  body.as-site.as-home #page-container .special, body.as-site.as-home #page-container .feature-banners .banner { float: none; width: auto; margin: 0; }
  body.as-site.as-home #page-container .special .image { width: auto; height: auto; }
  body.as-site.as-home #page-container .special .image img { width: 100%; height: auto; }
  body.as-site.as-home #page-container .special .text { height: auto; }
  body.as-site.as-home #page-container .special .button { float: none; display: inline-block; margin-top: 4px; }
  body.as-site.as-home #page-container .feature-banners .banner iframe { width: 100%; height: auto; aspect-ratio: 370 / 285; }
  body.as-site.as-home #page-container .feature-banners .banner img { display: block; width: 100%; height: auto; box-sizing: border-box; }
  body.as-site.as-home #page-container .feature-banners .banner .text { left: 0; right: 0; width: auto; }

  /* ---- home welcome band: the text on the light blue, the beach photo under it ---- */
  body.as-site.as-home #page-container .content { display: flex; flex-direction: column; }
  body.as-site.as-home #page-container .content .inner { order: 1; margin-right: 0; padding: 32px 24px 28px; }
  body.as-site.as-home #page-container .contentimage { order: 2; position: relative; right: auto; width: auto; height: 380px; background-position: center 30%; }
  body.as-site.as-home #page-container .contentimageoverlay { display: none; }
  /* Latest Blogs: live's teaser (photo floated left of its title) in three columns, one column below 960 */
  body.as-site.as-home #page-container .panel.blog { padding: 32px 24px 36px; }
  body.as-site.as-home #page-container .panel.blog ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; }
  body.as-site.as-home #page-container .panel.blog li { float: none; width: auto; margin: 0; display: flow-root; }
  body.as-site.as-home #page-container .panel.blog img { float: left; margin: 2px 14px 6px 0; max-width: 40%; height: auto; }
  body.as-site.as-home #page-container .panel.blog .title { line-height: 21px; }
  body.as-site.as-home #page-container .panel.blog .clearleft { display: none; }

  /* ---- inner pages: one column ---- */
  body.as-site #page-container .content { padding: 32px 24px 36px; }
  body.as-site #page-container .content :is(.left, .right), body.as-site #page-container .content.split :is(.left, .right) { float: none; width: auto; }
  body.as-site #page-container .content .right { margin-top: 28px; }
  body.as-site #page-container .content img { max-width: 100%; height: auto; }
  body.as-site #page-container .content img[style*="height"] { height: auto !important; }
  body.as-site #page-container .content :is(table, iframe) { max-width: 100%; }
  body.as-site #page-container .content h1 { font-size: 40px; line-height: 1.2; }
  body.as-site #page-container .content h2 { font-size: 34px; line-height: 1.2; }
  /* blog titles are links inside a 42px heading: the heading takes a title size, so a wrapped title reads as one heading */
  body.as-site #page-container .list .entry h2:has(> a) { font-size: 28px; line-height: 1.25; }
  body.as-site #page-container .list .entry > .summary { display: flow-root; }

  /* room cards: photo and thumbnails on the left, text on the right; the thumbnails a full 4-up grid */
  body.as-site #page-container .list .entry { padding: 20px; }
  /* a two-column card (photos | text) so long text never wraps under the photo column */
  body.as-site #page-container .list .entry:has(> .images) { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); column-gap: 24px; align-content: start; }
  body.as-site #page-container .list .entry:has(> .images) > * { grid-column: 2; }
  body.as-site #page-container .list .entry:has(> .images) > .images { grid-column: 1; grid-row: 1 / span 30; }
  body.as-site #page-container .list .entry:has(> .images) > .clearleft { display: none; }
  body.as-site #page-container .list .entry .images { float: none; width: auto; margin: 0; }
  body.as-site #page-container .list .entry .images > img { display: block; width: 100%; height: auto; }
  body.as-site #page-container .gallery.room { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
  body.as-site #page-container .gallery.room a.gallery-item { display: block; }
  body.as-site #page-container .gallery.room a.gallery-item img { display: block; width: 100%; height: auto; }
  body.as-site #page-container .gallery.room > :not(a) { display: none; }
  body.as-site #page-container .list .entry h2 { font-size: 32px; line-height: 1.2; }

  /* photo galleries (facilities, location, attractions): a fluid grid of full rows */
  body.as-site #page-container .gallery:not(.room) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 4px 6px; margin: 0 24px 36px; }
  body.as-site #page-container .gallery:not(.room) > :is(h3, p) { grid-column: 1 / -1; }
  body.as-site #page-container .gallery:not(.room) > a:not(.gallery-item) { position: absolute; }
  body.as-site #page-container .gallery:not(.room) > br { display: none; }
  body.as-site #page-container .gallery:not(.room) a.gallery-item { display: block; }
  body.as-site #page-container .gallery:not(.room) a.gallery-item img { display: block; width: 100%; height: auto; box-sizing: border-box; }

  /* contact and review forms, map */
  body.as-site #page-container .map-wrapper :is(h3, p) { margin-left: 24px; margin-right: 24px; }
  body.as-site #page-container .map-container { height: 420px; }
  body.as-site #page-container .panel.contact { padding: 32px 24px; }

  /* ---- footer: two columns (menu and copyright | address and social) ---- */
  body.as-site #page-container #footer { padding: 36px 0 16px; }
  body.as-site #page-container #footer > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "menu vcard" "copy social"; column-gap: 32px; row-gap: 20px; }
  body.as-site #page-container #footer .container > .clearboth { display: none; }
  body.as-site #page-container .footermenu { grid-area: menu; float: none; width: auto; }
  body.as-site #page-container .footermenu li { display: block; width: auto; }
  body.as-site #page-container .vcard { grid-area: vcard; float: none; width: auto; }
  body.as-site #page-container .copyright { grid-area: copy; float: none; width: auto; }
  body.as-site #page-container #footer .socialmedia { grid-area: social; float: none; width: auto; margin: 0; align-self: end; }
  body.as-site #page-container .copyright li { display: inline-block; white-space: nowrap; }
  /* the eTourism logo after "Hotel Website Design by" on its own line at every width (it wrapped at some widths and not at others), so the
     page ends the same distance below the last line everywhere: 44px, live's own */
  body.as-site #page-container .footer-tags a.tag { display: block; width: fit-content; height: 16px; margin-top: 2px; }
}

/* =================== 768 to 959: the home banner row as the offer across the top, the video and the photo under it =================== */
@media (min-width: 768px) and (max-width: 959px) {
  body.as-site.as-home #page-container .panel.blog ul { grid-template-columns: minmax(0, 1fr); }
  body.as-site.as-home #page-container .feature-banners .container { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  /* photo on the left; on the right the "SPECIAL OFFER" label (live draws it on the photo's lower edge) as the top bar of the text */
  body.as-site.as-home #page-container .special { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; background: #dd234b; border: 5px solid #c21f42; }
  body.as-site.as-home #page-container .special .image { display: contents; }
  body.as-site.as-home #page-container .special .image > a { grid-column: 1; grid-row: 1 / span 2; }
  body.as-site.as-home #page-container .special .image > a img { display: block; }
  body.as-site.as-home #page-container .special h3 { position: static; grid-column: 2; grid-row: 1; padding: 0 18px; }
  body.as-site.as-home #page-container .special .text { grid-column: 2; grid-row: 2; border: 0; padding: 12px 18px 16px; }
}

/* =================== C6: home, 960 to 1169 (the three-tile promo row): the Special Offer tile (photo + text) ran about 135px below the video
   and the Check Availability photo. The row's tiles are one height: the video fills its tile (the player letterboxes on black, as it
   already does), the photo is cropped to fill (cover), Check Availability stays on its lower edge =================== */
@media (min-width: 960px) and (max-width: 1169px) {
  body.as-site.as-home #page-container .feature-banners .container { align-items: stretch; }
  body.as-site.as-home #page-container .feature-banners .banner { display: flex; flex-direction: column; min-height: 0; }
  body.as-site.as-home #page-container .feature-banners .banner.mid { background: #000000; }
  body.as-site.as-home #page-container .feature-banners .banner.mid > p { position: relative; flex: 1 1 auto; min-height: 220px; margin: 0; }
  /* Divi's fitVids wraps the player in .fluid-width-video-wrapper (a padding-top aspect box): that wrapper fills the tile instead */
  body.as-site.as-home #page-container .feature-banners .banner.mid :is(.fluid-width-video-wrapper, > p > iframe) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 0 !important; }
  body.as-site.as-home #page-container .feature-banners .banner.mid .fluid-width-video-wrapper iframe { width: 100%; height: 100%; aspect-ratio: auto; }
  body.as-site.as-home #page-container .feature-banners .banner:not(.mid) > img { flex: 1 1 auto; height: 100%; min-height: 0; object-fit: cover; }
}

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

  /* header: logo and menu button, then a strip with the phone number and the social icons */
  body.as-site #page-container #header .container { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo toggle" "phone social" "menu menu" "search search"; column-gap: 12px; row-gap: 6px; padding-top: 10px; padding-bottom: 8px; }
  body.as-site #page-container #header .logo img { width: 120px; }
  body.as-site #page-container #header .phone { justify-self: start; font-size: 19px; }
  body.as-site #page-container #header .socialmedia { justify-self: end; }
  body.as-site #page-container #menu { margin: 6px -16px 0; }
  body.as-site #page-container #header .search { margin: 0 -16px; padding: 12px 16px 14px; }
  body.as-site #page-container #menu li a:is(:link, :visited, :active, :hover), body.as-site #page-container #menu li:hover > a:is(:link, :visited, :active, :hover) { padding: 0 16px; }
  body.as-site #page-container #menu li ul a:is(:link, :visited, :active, :hover), body.as-site #page-container #menu li:hover ul a:is(:link, :visited, :active, :hover) { padding: 0 16px 0 36px; }

  /* hero: a shorter photo; the booking box a stacked block under it */
  body.as-site #page-container .featureimage { height: 190px; }
  body.as-site #page-container .featuremain, body.as-site #page-container .featuremain li, body.as-site #page-container .featuremain li img { height: 240px !important; }
  body.as-site #page-container #booking { padding: 4px 16px 18px; }
  body.as-site #page-container #booking h3 { font-size: 26px; line-height: 40px; }
  body.as-site #page-container .bookingform { flex-direction: column; gap: 10px; }
  body.as-site #page-container .bookingform span.check-in, body.as-site #page-container .bookingform span.duration { flex: 0 0 auto; height: 50px; line-height: 50px; }
  body.as-site #page-container .bookingform em { width: 132px; box-sizing: border-box; font-size: 15px; }
  body.as-site #page-container .bookingbutton .button { width: 100%; height: 52px; font-size: 20px; }

  /* home banners: one column */
  body.as-site.as-home #page-container .feature-banners { padding: 20px 0; }
  body.as-site.as-home #page-container .feature-banners .container { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  body.as-site.as-home #page-container .contentimage { height: 240px; }
  body.as-site.as-home #page-container .content .inner { padding: 24px 16px 22px; }
  body.as-site.as-home #page-container .content h1 { font-size: 34px; }
  body.as-site.as-home #page-container .panel.blog { padding: 26px 16px 30px; }
  body.as-site.as-home #page-container .panel.blog h3 { font-size: 28px; line-height: 34px; margin-bottom: 14px; }
  body.as-site.as-home #page-container .panel.blog ul { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  body.as-site.as-home #page-container .panel.blog li { display: flow-root; }
  body.as-site.as-home #page-container .panel.blog img { float: left; width: 96px; margin: 2px 14px 6px 0; }

  /* type on a phone */
  body.as-site #page-container .content { padding: 24px 16px 28px; }
  body.as-site #page-container .content h1 { font-size: 30px; line-height: 36px; margin-bottom: 16px; }
  body.as-site #page-container .content h2 { font-size: 26px; line-height: 32px; margin: 26px 0 8px; }
  body.as-site #page-container .content h3 { font-size: 20px; line-height: 26px; }
  body.as-site #page-container .content h4 { font-size: 20px; line-height: 26px; }
  body.as-site #page-container .content p { margin: 14px 0; }
  body.as-site #page-container :is(.content, .map-wrapper) :is(p, h1, h2, h3, h4, li, td) { text-align: left !important; }
  body.as-site #page-container .list .entry h2:has(> a) { font-size: 22px; line-height: 28px; }

  /* room cards: photo, a 4-up thumbnail grid, then the text */
  body.as-site #page-container .list .entry { padding: 14px 14px 18px; margin: 16px 0; }
  body.as-site #page-container .list .entry:has(> .images) { display: block; }
  body.as-site #page-container .list .entry .images { float: none; width: auto; margin: 0 0 16px; }
  body.as-site #page-container .list .entry h2 { font-size: 26px; line-height: 32px; }
  body.as-site #page-container .button.roombooking { padding: 12px 24px 9px; }

  /* photo galleries: two up */
  body.as-site #page-container .gallery:not(.room) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 16px 28px; }
  body.as-site #page-container .gallery:not(.room) a.gallery-item img { border-width: 4px; }

  /* blog list, post, sidebar */
  body.as-site #page-container .blog-image { max-width: 40%; height: auto; margin: 4px 14px 10px 0; }
  body.as-site.single-post #page-container .content .entry > a.gallery-item .blog-image { float: none; display: block; max-width: 100%; margin: 4px 0 16px; }
  body.as-site #page-container .panel { padding: 20px 0; }
  body.as-site #page-container .panel h3 { font-size: 26px; line-height: 32px; }
  body.as-site #page-container .panel li { margin: 16px 0; }
  body.as-site #page-container .paging { text-align: left; }
  body.as-site #page-container .paging .options { margin: 0 12px; }
  body.as-site #page-container blockquote { padding: 6px 0 16px 52px; background-size: 40px auto; }

  /* search page: the field and the button on one row */
  body.as-site #page-container table.form.searchpage, body.as-site #page-container table.form.searchpage tbody, body.as-site #page-container table.form.searchpage tr { display: block; width: auto; }
  body.as-site #page-container table.form.searchpage td { display: flex; align-items: center; gap: 8px; width: auto; padding: 8px 0; }
  body.as-site #page-container .form.searchpage input.clicknclear { float: none; flex: 1 1 auto; min-width: 0; width: auto; height: 44px; margin: 0; box-sizing: border-box; }
  body.as-site #page-container .form.searchpage input:not(.clicknclear):not([type="hidden"]) { float: none; flex: 0 0 auto; margin: 0; }

  /* live's fixed-width form tables (newsletter unsubscribe): see the C5 block below 1250 */

  /* map */
  body.as-site #page-container .map-wrapper :is(h3, p) { margin-left: 16px; margin-right: 16px; }
  body.as-site #page-container .map-container { height: 320px; }

  /* footer: one column; the 3b agent's 830px phone copy of the footer photo (47 KB instead of 213 KB) under the same veil */
  body.as-site #page-container #footer { padding: 28px 0 16px; background-image: linear-gradient(rgba(28, 64, 16, 0.84), rgba(28, 64, 16, 0.84)), url(/wp-content/uploads/ilaunch/theme/footer-bg-830.jpg); }
  body.as-site #page-container #footer > .container { grid-template-columns: minmax(0, 1fr); grid-template-areas: "vcard" "social" "menu" "copy"; row-gap: 18px; }
  body.as-site #page-container #footer .socialmedia { align-self: start; margin-top: -6px; }
  body.as-site #page-container .vcard .adr { font-size: 20px; line-height: 26px; }
  body.as-site #page-container .vcard ul { margin-top: 12px !important; }
  body.as-site #page-container .vcard li { font-size: 17px; line-height: 28px; }
  body.as-site #page-container .footermenu a { display: inline-block; }
}

/* =================== C1: /attractions, live's two ExperienceOz widgets (inline float: right, 218 and 220px) squeezed the text beside them
   to 47px at 320. Below 768 they sit in the column on their own line, centred, at their own size (the widget is drawn for that width) =================== */
@media (max-width: 767px) {
  body.as-site #page-container .content iframe[src*="experienceoz"] { float: none !important; display: block; clear: both; max-width: 100%; margin: 8px auto 24px !important; }
}

/* =================== C7: blog lists below 480: the 200px thumbnail left about 50px for "Posted in ... at" beside it (one word per line at
   320). The thumbnail sits on its own line, the meta line and the teaser under it =================== */
@media (max-width: 479px) {
  body.as-site #page-container .list .entry .summary > img.blog-image { float: none; display: block; max-width: 100%; height: auto; margin: 2px 0 12px; }
}

/* =================== C5: the newsletter unsubscribe form (live's table: a 150px label beside a 420px field, required marked only by live's
   small pale yellow star image) below 1250: the label above a full-width 48px field, a dark asterisk on the label, as the contact and
   review forms =================== */
@media (max-width: 1249px) {
  body.as-site #page-container .content table.form:not(.searchpage), body.as-site #page-container .content table.form:not(.searchpage) :is(tbody, tr, th, td) { display: block; width: auto; }
  body.as-site #page-container .content table.form:not(.searchpage) { max-width: 560px; }
  body.as-site #page-container .content table.form:not(.searchpage) th { padding: 8px 0 5px; font: bold 15px/20px Arial, Helvetica, sans-serif; color: #444444; text-align: left; }
  body.as-site #page-container .content table.form:not(.searchpage) tr:has(> td.required) > th::after { content: " *"; color: #b84d0b; }
  body.as-site #page-container .content table.form:not(.searchpage) td { padding: 0 0 12px; }
  body.as-site #page-container .content table.form:not(.searchpage) td.required { padding-right: 0; background: none; }
  body.as-site #page-container .content table.form:not(.searchpage) :is(input:not([type="submit"]):not([type="button"]):not([type="hidden"]), textarea, select) {
    width: 100%; height: 48px; box-sizing: border-box; padding: 0 12px; font-size: 16px; color: #252a2d; background: #ffffff; border: 1px solid #767676; border-radius: 0; }
  /* the button row's label cell is a single space: no empty label line above Unsubscribe */
  body.as-site #page-container .content table.form:not(.searchpage) tr:has(> td > input:is([type="submit"], .button)) > th { display: none; }
}

/* =================== narrow phones (320 to 379): the booking labels give the date field room =================== */
@media (max-width: 379px) {
  body.as-site #page-container .bookingform em { width: 112px; padding: 0 8px; font-size: 14px; }
  body.as-site #page-container .bookingform span input, body.as-site #page-container .bookingform span select { padding-left: 6px; }
}

/* =================== contact and review forms below 1250 (live's two-column label table is 1250 and up only, in as-design.css) ===================
   One column: a visible label over each full-width field (the placeholders, which were the only labels, are hidden as on live), a dark
   asterisk on required fields and before "Required fields" (live's small yellow star icon is 1.4:1 on white), 48px fields with a 4.5:1
   border, the sum question and its box on one line, then Submit (full width below 768). Divi's button arrow and its hover padding jump
   are switched off so the button never moves under a finger. */
@media (max-width: 1249px) {
  body.as-site #page-container .as-contact-form :is(.et_pb_contact, .et_pb_contact_form) { float: none; width: auto; margin: 0 !important; padding: 0 !important; }
  body.as-site #page-container .as-contact-form .et_pb_contact_form .et_pb_contact_field { float: none !important; clear: both; width: auto !important; margin: 0 0 14px !important; padding: 0 !important; }
  body.as-site #page-container .as-contact-form .et_pb_contact_field .et_pb_contact_form_label { display: block !important; position: static; margin: 0 0 5px; padding: 0; font: bold 15px/20px Arial, Helvetica, sans-serif; letter-spacing: 0; color: #444444; text-align: left; }
  body.as-site #page-container .as-contact-form .et_pb_contact_field:has(> [data-required_mark="required"]) .et_pb_contact_form_label::after { content: " *"; color: #b84d0b; }
  body.as-site #page-container p.ils-required-note em.required::before { content: "* "; color: #b84d0b; font-style: normal; }
  body.as-site #page-container .as-contact-form .et_pb_contact_field .input { display: block; box-sizing: border-box; width: 100% !important; max-width: none; height: 48px; min-height: 0; margin: 0;
    padding: 0 12px; font: 16px/22px Arial, Helvetica, sans-serif; color: #252a2d; background: #ffffff; border: 1px solid #767676; border-radius: 0; }
  body.as-site #page-container .as-contact-form .et_pb_contact_field textarea.input { height: 150px; padding: 10px 12px; resize: vertical; }
  body.as-site #page-container .as-contact-form .input::placeholder { color: transparent; opacity: 0; }
  body.as-site #page-container .as-contact-form .et_contact_bottom_container { display: flex !important; flex-wrap: wrap; align-items: center; gap: 14px 20px; float: none !important; clear: both;
    width: auto; margin: 4px 0 0 !important; padding: 0 !important; text-align: left; }
  body.as-site #page-container .as-contact-form .et_contact_bottom_container .et_pb_contact_right { display: block; float: none; width: auto; min-width: 0; height: auto; margin: 0; padding: 0; text-align: left; background: none; }
  body.as-site #page-container .as-contact-form .et_pb_contact_right p { display: flex; align-items: center; column-gap: 8px; margin: 0 !important; padding: 0 !important; font: 16px/22px Arial, Helvetica, sans-serif; color: #444444; white-space: nowrap; }
  body.as-site #page-container .as-contact-form .et_pb_contact_right p .et_pb_contact_captcha { display: block; box-sizing: border-box; flex: 0 0 auto; width: 76px; max-width: none; height: 48px; margin: 0; padding: 0 10px;
    font-size: 16px; color: #252a2d; background: #ffffff; border: 1px solid #767676; border-radius: 0; }
  body.as-site #page-container .et_pb_section .as-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit,
  body.as-site #page-container .et_pb_section .as-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:is(:hover, :focus, :active) {
    display: block; box-sizing: border-box; height: 48px; min-width: 140px; margin: 0 !important; padding: 0 28px !important; font-family: 'AdventorMedium', Arial, Helvetica, sans-serif !important;
    font-size: 18px !important; font-weight: normal !important; line-height: 45px !important; text-transform: uppercase; letter-spacing: 0 !important; border: 0 !important; border-bottom: 3px solid #cc8c00 !important; border-radius: 0 !important; }
  body.as-site #page-container .et_pb_section .as-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit::after { display: none !important; content: none !important; }
  body.as-site #page-container .as-contact-form .et_contact_error { border-color: #c40000 !important; }
}
@media (max-width: 767px) {
  body.as-site #page-container .et_pb_section .as-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit,
  body.as-site #page-container .et_pb_section .as-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button.et_pb_contact_submit:is(:hover, :focus, :active) { flex: 1 0 100%; width: 100%; height: 52px; font-size: 20px !important; line-height: 49px !important; }
}

/* =================== the booking calendar (appended to <body>) below 1250 =================== */
@media (max-width: 1249px) {
  /* the photo pop-up (fancybox) is appended to <body> as well: live's ".fancy-bg" rule (the eight 20px shadow pieces round the frame) was
     ported under #page-container and never reached them, so below 1250 they sat in the flow as 310px tall static blocks (stripes over the
     photo). The same fix as as-design.css makes from 1250 up. */
  body.as-site .fancy-bg { position: absolute; padding: 0; margin: 0; border: 0; width: 20px; height: 20px; z-index: 1001; box-sizing: content-box; }
  body.as-site #fancybox-tmp { box-sizing: content-box; }
  /* live: white on #0092ba/#4389da in the control row (3.6:1), #eee day names on #777 (3.9:1), 11px control text, white on #ffae00 */
  body.as-site #datepicker_div .datepicker_control { background: #2a6bbd; }
  body.as-site #datepicker_div .datepicker_links { background: #222222; }
  body.as-site #datepicker_div :is(.datepicker_titleRow, .datepicker_titleRow .datepicker_weekEndCell) { background: #595959; }
  body.as-site #datepicker_div :is(.datepicker_control, .datepicker_links, .datepicker_header) { font-size: 14px; }
  body.as-site #datepicker_div :is(.datepicker_control, .datepicker_links) a { display: inline-block; line-height: 24px; }
  body.as-site #datepicker_div .datepicker_header { height: auto; background: #8a5a00; }
  body.as-site #datepicker_div .datepicker_header select { font-size: 16px; color: #ffffff; -webkit-appearance: none; appearance: none; border: 0; border-radius: 0;
    background: #8a5a00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 4px center; padding-right: 20px; }
  body.as-site #datepicker_div .datepicker_header select option { color: #252a2d; background: #ffffff; }
  /* C3: the month and year lists were 21px tall from 768 to 1249: 32px tap targets (36px below 768) */
  body.as-site #datepicker_div .datepicker_header select { height: 32px; min-height: 32px; margin: 2px 0; }
  body.as-site #datepicker_div .datepicker_oneMonth { width: 252px; }
  body.as-site #datepicker_div { width: 252px; z-index: 100001 !important; }
  body.as-site #datepicker_div td { font-size: 15px; }
  body.as-site #datepicker_div td a { line-height: 28px; }
  /* live's day-table rules were ported under #page-container and never reach the calendar: the table full width, centred */
  body.as-site #datepicker_div table.datepicker { clear: both; float: left; width: 100%; border-collapse: collapse; background: #cccccc; color: #ffffff; text-align: center; }
  body.as-site #datepicker_div table.datepicker a { display: block; width: 100%; }
  body.as-site #datepicker_div .datepicker_titleRow td { color: #ffffff; }
  body.as-site #datepicker_div .datepicker_daysCell { color: #000000; }
  /* days before today (not selectable): #888 on #eee/#ddd was 3.0:1 */
  body.as-site #datepicker_div .datepicker_daysCell.datepicker_unselectable { color: #555555; }
  body.as-site #datepicker_div .datepicker_daysCell a:is(:hover, :focus) { color: #000000; }
}
@media (max-width: 767px) {
  body.as-site #datepicker_div { width: calc(100vw - 32px) !important; left: 16px !important; font-size: 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
  body.as-site #datepicker_div .datepicker_oneMonth { width: 100%; }
  body.as-site #datepicker_div .datepicker_control a, body.as-site #datepicker_div .datepicker_links a { display: block; padding: 0 12px !important; line-height: 42px; font-size: 15px; }
  body.as-site #datepicker_div .datepicker_control, body.as-site #datepicker_div .datepicker_links { padding: 0; }
  body.as-site #datepicker_div .datepicker_header select { height: 36px; padding: 0 20px 0 6px; }
  body.as-site #datepicker_div td { font-size: 16px !important; height: 42px; line-height: 42px; }
  body.as-site #datepicker_div td a { line-height: 42px; }
}