/* tt-mobile.css: responsive layer for the Tropic Towers iLaunch migration (generated from build/tt-responsive.src.css:
   tokens: P = the #page-container prefix, H = the home-page prefix; see kit/ilaunch-responsive.template.css).
   Live ships NO responsive CSS (a fixed 1170-1370px layout). Desktop (1250px and up) is live, pixel for pixel, and this
   file does not touch it. Bands:
     1170-1369  live layout, only the home offer row and the content/sidebar split made to fit (live scrolls sideways here)
     768-1169   tablet: live colours and type, layout reflowed (stacked hero, booking row, one-column rooms, 3-up galleries)
     below 768  phone: designed (menu button, stacked booking block, 2-up galleries, swipe thumbnails, 14px+ text,
                16px inputs, 44px+ tap targets, WCAG AA colours)
   Every width from 320 to 1440 must show no horizontal scroll. */

/* ---------- 1170-1369: fit the fixed home offer row and the sidebar split ---------- */
@media (min-width: 1170px) and (max-width: 1369px) {
  body.tt-site.tt-home #page-container #special { width: calc(100% - 700px); }
  body.tt-site.tt-home #page-container #special .text { width: calc(100% - 70px); }
  body.tt-site.tt-home #page-container .faq { left: auto; right: 0; }
}
@media (min-width: 1170px) and (max-width: 1249px) {
  body.tt-site #page-container .container .left { width: calc(100% - 400px); }
}

/* ---------- below 1250: the 1184px live form no longer fits; label and field pairs, two per row ---------- */
@media (max-width: 1249px) {
  body.tt-site #page-container .tt-contact-form { width: auto; max-width: 900px; }
  body.tt-site #page-container .tt-contact-form form.et_pb_contact_form { display: grid; grid-template-columns: 120px 1fr 120px 1fr; row-gap: 10px; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact, body.tt-site #page-container .tt-contact-form p.et_pb_contact_field, body.tt-site #page-container .tt-contact-form .et_contact_bottom_container, body.tt-site #page-container .tt-contact-form .et_pb_contact_right { display: contents; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_field.et_pb_contact_field_3 > .et_pb_contact_form_label { grid-column: 1; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_field.et_pb_contact_field_3 > textarea.input { grid-column: 2 / -1; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_right p.clearfix { grid-column: 1 / -1; }
  body #page-container .et_pb_section .tt-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit { grid-column: 1 / -1; justify-self: end; margin: 0 !important; }
  body.tt-site #page-container .tt-contact-form form.et_pb_contact_form::after { grid-column: 1 / -1; justify-self: end; margin-top: -6px; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_field > .input { min-width: 0; }
}

/* ---------- below 1170: tablet and phone share the reflow ---------- */
@media (max-width: 1169px) {
  /* header: out of the hero and into the flow, above it */
  body.tt-site #page-container #container-outer { display: flex; flex-direction: column; }
  body.tt-site #page-container #header { order: -1; position: relative; top: auto; height: auto; padding: 12px 0; background: #0a3200; }
  body.tt-site #page-container #header .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; column-gap: 20px; row-gap: 10px; width: auto; padding: 0 24px; }
  body.tt-site #page-container #header .container > .clearboth { display: none; }
  body.tt-site #page-container #header .logo { float: none; margin: 0 auto 0 0; flex: 0 1 auto; }
  body.tt-site #page-container #header .logo img { width: 400px; max-width: 100%; height: auto; }
  body.tt-site #page-container #header .phone { float: none; margin: 0; }
  body.tt-site #page-container #header .socialmedia { float: none; }
  body.tt-site #page-container #menu { position: relative; top: auto; right: auto; flex: 1 1 100%; order: 10; margin: 0 -24px -12px; }
  body.tt-site #page-container #menu ul { float: none; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
  body.tt-site #page-container #menu > ul > li { margin: 0; }
  body.tt-site #page-container #menu li a:link, body.tt-site #page-container #menu li a:visited, body.tt-site #page-container #menu li a:active { line-height: 48px; padding: 0 14px; font-size: 15px; }
  body.tt-site #page-container #menu .clearboth { display: none; }
  body.tt-site #page-container .ils-menu-toggle { display: none; }

  /* hero */
  body.tt-site #page-container #feature { height: auto; }
  body.tt-site #page-container .featuremain, body.tt-site #page-container .featureimage { height: 300px; }
  body.tt-site.tt-home #page-container #feature, body.tt-site.tt-home #page-container .featuremain { height: 420px; }
  body.tt-site #page-container #feature > .container { position: static; width: auto; }

  /* booking bar: one olive block under the hero, fields in a row */
  body.tt-site #page-container #booking, body.tt-site.tt-home #page-container #booking { position: relative; top: auto; bottom: auto; left: auto; width: auto; height: auto; padding: 20px 24px 24px; box-shadow: none; }
  body.tt-site #page-container #booking h3, body.tt-site.tt-home #page-container #booking h3 { position: static; padding: 0 0 14px; margin: 0; line-height: 28px; background: none; border: 0; text-align: left; }
  body.tt-site #page-container .bookingform, body.tt-site.tt-home #page-container .bookingform { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 20px; row-gap: 14px; align-items: end; }
  body.tt-site #page-container .bookingform .clearboth { display: none; }
  body.tt-site #page-container .bookingform div.check-in, body.tt-site #page-container .bookingform div.duration,
  body.tt-site.tt-home #page-container .bookingform div.check-in, body.tt-site.tt-home #page-container .bookingform div.duration { float: none; display: block; width: auto; margin: 0; }
  body.tt-site #page-container .bookingform em { float: none; }
  body.tt-site #page-container .bookingform .datepicker_wrap { float: none; display: flex; width: auto; }
  body.tt-site #page-container .bookingform div.check-in input { flex: 1 1 auto; width: auto; min-width: 0; }
  body.tt-site #page-container .bookingform .datepicker_wrap img { flex: 0 0 auto; }
  body.tt-site #page-container .bookingform div.duration select { float: none; width: 100%; }
  body.tt-site #page-container .bookingbutton, body.tt-site.tt-home #page-container .bookingbutton { position: static; float: none; display: block; width: auto; height: auto; margin: 0; }
  body.tt-site #page-container .bookingbutton .button, body.tt-site.tt-home #page-container .bookingbutton .button { display: block; width: 100%; height: 43px; line-height: 43px; }

  /* home: offer row stacked */
  body.tt-site.tt-home #page-container .topcontainer-wrapper { float: none; height: auto; }
  body.tt-site.tt-home #page-container #topcontainer { height: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; padding: 0; }
  body.tt-site.tt-home #page-container #topcontainer > .clearboth { display: none; }
  body.tt-site.tt-home #page-container #booking { grid-column: 1 / -1; }
  body.tt-site.tt-home #page-container #special { position: relative; top: auto; left: auto; width: auto; height: 340px; margin-top: 27px; }
  body.tt-site.tt-home #page-container #special .text { width: auto; right: 0; padding: 20px 24px; }
  body.tt-site.tt-home #page-container #special p { float: none; width: auto; padding-right: 190px; }
  body.tt-site.tt-home #page-container #special .button { top: 50%; transform: translateY(-50%); right: 20px; }
  body.tt-site.tt-home #page-container .faq { position: relative; top: auto; left: auto; width: auto; height: auto; min-height: 340px; margin-top: 27px; }
  body.tt-site.tt-home #page-container h3.blog-label { position: static; width: auto; padding: 32px 24px 8px; margin: 0; }
  body.tt-site.tt-home #page-container #content, body.tt-site.tt-home #page-container #content .left { min-height: 0; }
  body.tt-site.tt-home #page-container #content .left { float: none; width: auto; display: flex; flex-direction: column; }
  body.tt-site.tt-home #page-container #content .left .text-wrapper { order: 1; float: none; width: auto; padding: 24px; }
  body.tt-site.tt-home #page-container #content .left .bg-wrapper { order: 2; position: static; width: auto; display: grid; grid-template-columns: 1fr 1fr; }
  body.tt-site.tt-home #page-container #content .left .bg-wrapper .contentimage, body.tt-site.tt-home #page-container #content .left .bg-wrapper .map-wrapper { position: relative; top: auto; bottom: auto; height: 360px; }
  body.tt-site.tt-home #page-container #content .left .clearboth { display: none; }
  body.tt-site.tt-home #page-container #content .blog-wrapper { position: static; width: auto; }
  body.tt-site.tt-home #page-container .panel.blog { position: static; }
  body.tt-site.tt-home #page-container .panel.blog ul { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2px; background: #ffffff; }
  body.tt-site.tt-home #page-container .panel.blog li { margin: 0; padding-bottom: 20px; background: #8b8760; }
  body.tt-site.tt-home #page-container .panel.blog .blog-image { float: none; }
  body.tt-site.tt-home #page-container .panel.blog .blog-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
  body.tt-site.tt-home #page-container .panel.blog .text { padding: 14px 20px 0; }

  /* inner pages */
  body.tt-site #page-container .innercontent .inner-wrapper { width: auto; padding: 0 24px 40px; }
  body.tt-site #page-container #content h1 { padding: 32px 0 20px; font-size: 40px; line-height: 44px; }
  body.tt-site #page-container #content .container { width: auto; padding: 30px 24px 0; }
  body.tt-site #page-container #content .container .left, body.tt-site #page-container #content .container .right { float: none; width: auto; }
  body.tt-site #page-container #content .container .right { margin-top: 30px; }
  body.tt-site #page-container #content img, body.tt-site #page-container #content iframe, body.tt-site #page-container #content video { max-width: 100%; }
  body.tt-site #page-container #content img { height: auto; }
  body.tt-site #page-container #content table:not(.form) { max-width: 100%; }
  body.tt-site.page-id-1414 #page-container #content .container > .right ~ .right { display: none; }

  /* apartments: each room full width (live's own card, just wider) */
  body.tt-site #page-container .list.rooms .entry, body.tt-site #page-container .list.rooms .entry.even { float: none; width: auto; margin: 0 0 2px; }
  body.tt-site #page-container .gallery.room { min-width: 0; }

  /* image galleries: 3 up */
  body.tt-site #page-container .gallery:not(.room) ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  body.tt-site #page-container .gallery:not(.room) li { float: none; margin: 0; }
  body.tt-site #page-container .gallery:not(.room) img { width: 100%; height: auto; box-sizing: border-box; }
  body.tt-site #page-container .gallery:not(.room) .clearleft { display: none; }

  /* maps */
  body.tt-site #page-container .map-container { height: 420px; }

  /* footer */
  body.tt-site #page-container #footer .container { height: auto; width: auto; padding: 32px 24px 36px; }
  body.tt-site #page-container #footer .container .left { float: left; width: 48%; }
  body.tt-site #page-container #footer .copyright { float: none; width: auto; margin-top: 20px; }
  body.tt-site #page-container #footer .vcard { float: right; width: 48%; }
  body.tt-site #page-container .vcard li:nth-of-type(3), body.tt-site #page-container .vcard li:nth-of-type(4), body.tt-site #page-container .vcard li:nth-of-type(5) { float: none; width: auto; }
  body.tt-site #page-container #footer .container > .clearboth { clear: both; }

}

/* ---------- below 980: menu behind a button, booking button on its own row ---------- */
@media (max-width: 979px) {
  /* header: logo, then phone + menu button; the menu opens below (tablet portrait and phones) */
  body.tt-site #page-container #header { padding: 10px 0 12px; }
  body.tt-site #page-container #header .container { padding: 0 24px; column-gap: 14px; justify-content: flex-start; }
  body.tt-site #page-container #header .logo { flex: 1 1 100%; margin: 0; }
  body.tt-site #page-container #header .logo img { width: 400px; }
  body.tt-site #page-container #header .phone { font-size: 20px; line-height: 30px; padding-left: 36px; margin-right: auto; }
  body.tt-site #page-container #header .socialmedia { display: none; }
  body.tt-site #page-container .ils-menu-toggle { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; margin: 0; border: 0; border-radius: 0; background: #8b8760; color: #ffffff;
    font: 700 15px/44px 'Raleway', Arial, Helvetica, sans-serif; text-transform: uppercase; cursor: pointer; }
  body.tt-site #page-container .ils-menu-toggle span, body.tt-site #page-container .ils-menu-toggle span::before, body.tt-site #page-container .ils-menu-toggle span::after { display: block; position: relative; width: 18px; height: 2px; background: #ffffff; content: ""; }
  body.tt-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; }
  body.tt-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; }
  body.tt-site #page-container #menu { display: none; margin: 0 -24px -12px; }
  body.tt-site #page-container #header.ils-menu-open #menu { display: block; }
  body.tt-site #page-container #menu ul { flex-direction: column; }
  body.tt-site #page-container #menu > ul > li { display: block; border-top: 1px solid rgba(255, 255, 255, 0.25); }
  body.tt-site #page-container #menu li a:link, body.tt-site #page-container #menu li a:visited, body.tt-site #page-container #menu li a:active { display: block; padding: 0 16px; line-height: 50px; font-size: 16px; }
  body.tt-site #page-container #menu li.alt a { background: #d5ab18; }
  body.tt-site #page-container #menu li:hover, body.tt-site #page-container #menu li.active { background: #6d6a48; }
  body.tt-site #page-container #menu li:hover a:link, body.tt-site #page-container #menu li:hover a:visited { background: #6d6a48; }
  body.tt-site #page-container #menu li ul { position: static; display: block; width: auto; padding: 0; background: none; }
  body.tt-site #page-container #menu li ul a:link, body.tt-site #page-container #menu li ul a:visited, body.tt-site #page-container #menu li ul a:active, body.tt-site #page-container #menu li:hover ul a:link, body.tt-site #page-container #menu li:hover ul a:visited { padding: 0 16px 0 34px; line-height: 44px; font-size: 15px; }
  body.tt-site #page-container #menu > ul > li.active > a:link, body.tt-site #page-container #menu > ul > li.active > a:visited { background: #4f4c30; }
  body.tt-site #page-container #menu li li.active a:link, body.tt-site #page-container #menu li li.active a:visited { background: #4f4c30; color: #ffffff; }

  body.tt-site #page-container .bookingform, body.tt-site.tt-home #page-container .bookingform { grid-template-columns: 1fr 1fr; }
  body.tt-site #page-container .bookingbutton, body.tt-site.tt-home #page-container .bookingbutton { grid-column: 1 / -1; }
}

/* ---------- phone: below 768 ---------- */
@media (max-width: 767px) {
  /* header sizes on a phone */
  body.tt-site #page-container #header .container { padding: 0 16px; }
  body.tt-site #page-container #header .logo img { width: 300px; }
  body.tt-site #page-container #header .phone { font-size: 20px; padding-left: 36px; }
  body.tt-site #page-container #menu { margin: 0 -16px -12px; }
  body.tt-site #page-container #menu li.alt a:link, body.tt-site #page-container #menu li.alt a:visited { color: #1f1d0e; }

  /* hero */
  body.tt-site #page-container .featuremain, body.tt-site #page-container .featureimage { height: 200px; }
  body.tt-site.tt-home #page-container #feature, body.tt-site.tt-home #page-container .featuremain { height: 280px; }

  /* booking: stacked block, 16px fields, full-width button */
  body.tt-site #page-container #booking, body.tt-site.tt-home #page-container #booking { padding: 18px 16px 20px; }
  body.tt-site #page-container #booking h3, body.tt-site.tt-home #page-container #booking h3 { font-size: 22px; }
  body.tt-site #page-container .bookingform, body.tt-site.tt-home #page-container .bookingform { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  body.tt-site #page-container .bookingform em { margin-bottom: 8px; font-size: 14px; }
  body.tt-site #page-container .bookingform div.check-in input, body.tt-site #page-container .bookingform div.duration select { height: 48px; line-height: 48px; font-size: 16px; }
  body.tt-site #page-container .bookingform .datepicker_wrap img { height: 48px; }
  body.tt-site #page-container .bookingbutton, body.tt-site.tt-home #page-container .bookingbutton { grid-column: 1 / -1; margin-top: 4px; }
  body.tt-site #page-container .bookingbutton .button, body.tt-site.tt-home #page-container .bookingbutton .button { height: 52px; line-height: 52px; color: #1f1d0e; background-color: #edbb0d; }

  /* home offer row */
  body.tt-site.tt-home #page-container #topcontainer { grid-template-columns: 1fr; }
  body.tt-site.tt-home #page-container #special { height: 300px; margin-top: 43px; }
  body.tt-site.tt-home #page-container #special h3 { font-size: 20px; line-height: 44px; top: -22px; padding: 0 16px; }
  body.tt-site.tt-home #page-container #special .text { padding: 16px; }
  body.tt-site.tt-home #page-container #special h4 { font-size: 22px; line-height: 26px; }
  body.tt-site.tt-home #page-container #special p { padding-right: 0; color: #555555; }
  body.tt-site.tt-home #page-container #special .button { position: static; transform: none; display: block; width: 100%; height: 48px; line-height: 48px; margin-top: 12px; color: #1f1d0e; background: #edbb0d; }
  body.tt-site.tt-home #page-container .faq { min-height: 200px; margin-top: 0; }
  body.tt-site.tt-home #page-container .faq p a { left: 16px; bottom: 16px; font-size: 18px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
  body.tt-site.tt-home #page-container .faq p a strong { font-size: 30px; line-height: 32px; }
  body.tt-site.tt-home #page-container h3.blog-label { font-size: 30px; padding: 28px 16px 8px; }
  body.tt-site.tt-home #page-container #content .left .text-wrapper { padding: 24px 16px 28px; }
  body.tt-site.tt-home #page-container #content h1 { font-size: 34px; line-height: 38px; margin-top: 0; }
  body.tt-site.tt-home #page-container #content h2 { font-size: 20px; line-height: 26px; }
  body.tt-site.tt-home #page-container #content .left .bg-wrapper { grid-template-columns: 1fr; }
  body.tt-site.tt-home #page-container #content .left .bg-wrapper .contentimage { height: 240px; }
  body.tt-site.tt-home #page-container #content .left .bg-wrapper .map-wrapper { height: 300px; }
  body.tt-site.tt-home #page-container .panel.blog ul { grid-template-columns: 1fr; row-gap: 2px; }
  /* the teaser thumbnails are 225px files: a thumbnail-and-text row keeps them sharp instead of stretching them to the full width */
  body.tt-site.tt-home #page-container .panel.blog li { display: grid; grid-template-columns: 112px 1fr; column-gap: 14px; align-items: start; padding: 16px; }
  body.tt-site.tt-home #page-container .panel.blog .blog-image img { width: 112px; aspect-ratio: auto; }
  body.tt-site.tt-home #page-container .panel.blog .blog-image a { display: block; }
  body.tt-site.tt-home #page-container .panel.blog .title { font-size: 17px; line-height: 22px; }
  body.tt-site.tt-home #page-container .panel.blog .date { font-size: 14px; color: #ffffff !important; }
  body.tt-site.tt-home #page-container .panel.blog .summary { font-size: 15px; line-height: 22px; color: #ffffff; }
  body.tt-site.tt-home #page-container .panel.blog a.more { font-size: 14px; line-height: 44px; color: #ffffff; }
  body.tt-site.tt-home #page-container .panel.blog .text { padding: 0; }

  /* inner pages */
  body.tt-site #page-container .innercontent .inner-wrapper { padding: 0 16px 28px; }
  body.tt-site #page-container #content h1 { padding: 24px 0 14px; font-size: 30px; line-height: 34px; }
  body.tt-site #page-container #content h2 { font-size: 24px; line-height: 30px; }
  body.tt-site #page-container #content h3 { font-size: 21px; line-height: 27px; }
  body.tt-site #page-container #content .container { padding: 24px 16px 0; }
  body.tt-site #page-container .gallery h3 { font-size: 26px; line-height: 32px; color: #7a6400; }

  /* apartments: card stacked, photo shows between text and title, swipeable thumbnails */
  body.tt-site #page-container .list.rooms .entry { height: auto; display: flex; flex-direction: column; }
  body.tt-site #page-container .list.rooms .roomtext { position: static; width: auto; margin: 16px 16px 200px; padding: 16px; background: rgba(255, 255, 255, 0.88); }
  body.tt-site #page-container .list.rooms .entry .innertext { position: relative; bottom: auto; display: flex; align-items: stretch; background: rgba(255, 255, 255, 0.92); }
  body.tt-site #page-container .list.rooms .entry .innertext p { flex: 0 0 auto; }
  body.tt-site #page-container .list.rooms .entry h2 { min-width: 0; flex: 1 1 auto; width: auto; padding: 12px 16px; line-height: 28px; font-size: 22px; }
  body.tt-site #page-container .button.roombooking { position: static; flex: 0 0 auto; width: auto; padding: 0 18px; line-height: 52px; font-size: 16px; letter-spacing: 0.5px; display: flex; align-items: center; white-space: nowrap; color: #1f1d0e; }
  body.tt-site #page-container .list.rooms .entry .innertext p { display: flex; }
  body.tt-site #page-container .list.rooms .entry .images { position: static; height: auto; padding: 8px 10px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  body.tt-site #page-container .gallery.room { height: auto; }
  body.tt-site #page-container .gallery.room li { scroll-snap-align: start; }
  body.tt-site #page-container .gallery.room img { width: 120px; height: auto; }

  /* galleries 2 up */
  body.tt-site #page-container .gallery:not(.room) { margin: 24px 0 40px; }
  body.tt-site #page-container .gallery:not(.room) ul { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* blog list, posts and sidebar */
  body.tt-site #page-container .list .entry .blog-image, body.tt-site #page-container .entry img.blog-image { float: none; display: block; width: 100%; max-width: 100%; height: auto; margin: 0 0 14px; }
  body.tt-site #page-container .entry > a.gallery-item img { float: none; display: block; width: 100%; height: auto; margin: 0 0 16px; }
  body.tt-site #page-container .paging { text-align: left; font-size: 14px; line-height: 40px; }
  body.tt-site #page-container .paging a:link, body.tt-site #page-container .paging a:visited, body.tt-site #page-container .paging em { display: inline-block; min-width: 32px; padding: 0 8px; line-height: 32px; text-align: center; color: #555555; }
  body.tt-site #page-container .paging em, body.tt-site #page-container .paging em a:link { color: #ffffff; background-color: #6d6d6d; }
  body.tt-site #page-container .paging .options { display: block; margin: 0; }
  body.tt-site #page-container .paging .result-count { display: block; margin: 0; }
  body.tt-site #page-container .panel .date, body.tt-site #page-container .panel .details, body.tt-site #page-container .entry .details, body.tt-site #page-container .panel li em { font-size: 14px; }
  body.tt-site #page-container .panel li { margin: 18px 0; }
  body.tt-site #page-container div.top { font-size: 14px; line-height: 32px; }
  body.tt-site #page-container #content .summary table, body.tt-site #page-container #content .entry table { display: block; overflow-x: auto; }

  /* maps */
  body.tt-site #page-container .map-container { height: 320px; }
  body.tt-site #page-container .map-wrapper .map-info a { display: inline-block; padding: 6px 0; }

  /* forms: label bar over a full-width field */
  body.tt-site #page-container .tt-contact-form { margin: 20px 0; }
  body.tt-site #page-container .tt-contact-form form.et_pb_contact_form { grid-template-columns: 1fr; row-gap: 0; padding: 12px; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_form_label { line-height: 36px; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_field .input { height: 48px; font-size: 16px; margin-bottom: 12px; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_field.et_pb_contact_field_3 > .et_pb_contact_form_label { grid-column: 1; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_field.et_pb_contact_field_3 > textarea.input { grid-column: 1; width: 100%; height: 140px; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_right p.clearfix { padding: 46px 0 12px; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_right p.clearfix::before { width: 100%; bottom: auto; height: 36px; line-height: 36px; }
  body.tt-site #page-container .tt-contact-form input.et_pb_contact_captcha { height: 48px; width: 90px; font-size: 16px; }
  body #page-container .et_pb_section .tt-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button { width: 100%; height: 52px; line-height: 52px !important; justify-self: stretch; color: #1f1d0e !important; }
  body.tt-site #page-container .tt-contact-form form.et_pb_contact_form::after { font-size: 14px; margin-top: 6px; }
  body.tt-site #page-container #content .form.searchpage input { float: none; width: auto; max-width: 100%; font-size: 16px; }
  body.tt-site #page-container #content table.form.searchpage, body.tt-site #page-container #content table.form.searchpage tbody, body.tt-site #page-container #content table.form.searchpage tr, body.tt-site #page-container #content table.form.searchpage td { display: block; width: auto; }
  body.tt-site #page-container #content table.form.searchpage td { display: flex; gap: 8px; padding: 10px; }
  body.tt-site #page-container #content .form.searchpage input.clicknclear { flex: 1 1 auto; min-width: 0; width: auto; height: 48px; margin: 0; box-sizing: border-box; }
  body.tt-site #page-container #content .form.searchpage input.button { flex: 0 0 auto; height: 48px; line-height: 48px; padding: 0 18px; margin: 0; color: #1f1d0e; }

  /* WCAG AA colours and 14px+ text on phones (desktop keeps live's exact colours) */
  body.tt-site #page-container .ils-menu-toggle, body.tt-site #page-container #menu, body.tt-site.tt-home #page-container .panel.blog li, body.tt-site.tt-home #page-container #content .blog-wrapper { background-color: #6d6a48; }
  body.tt-site #page-container a.more, body.tt-site #page-container a.more:link, body.tt-site #page-container a.more:visited { font-size: 14px; line-height: 20px; padding: 12px 14px 12px 0; color: #7a6400 !important; }
  body.tt-site.tt-home #page-container .panel.blog a.more, body.tt-site.tt-home #page-container .panel.blog a.more:link { color: #ffffff !important; }
  body.tt-site #page-container .paging, body.tt-site #page-container .paging a:link, body.tt-site #page-container .paging a:visited { color: #595959; }
  body.tt-site #page-container span.options a:link, body.tt-site #page-container span.options a:visited, body.tt-site #page-container span.options a { display: inline-block; min-width: 32px; line-height: 32px; text-align: center; font-size: 14px; }
  body.tt-site #page-container div.top a { color: #666666; padding: 6px 12px; }
  body.tt-site #page-container blockquote .highlight, body.tt-site #page-container blockquote .highlight a, body.tt-site #page-container blockquote .highlight strong { color: #7a6400; }
  body.tt-site #page-container blockquote .details { color: #666666; }
  body.tt-site #page-container blockquote { padding-left: 56px; background-size: 40px auto; }
  body.tt-site #page-container .panel .title a, body.tt-site #page-container .panel ul.archive a, body.tt-site #page-container .panel li > a { display: inline-block; padding: 6px 0; }
  body.tt-site #page-container #footer .vcard a.email { display: inline-block; padding: 4px 0; }
  body.tt-site #page-container #content p > a:only-child { display: inline-block; padding: 6px 0; }
  /* the room Book Now sits alone in its <p>, so the tap-area rule above zeroed its side padding (3.18 m3, 2026-10-07) */
  body.tt-site #page-container #content .list.rooms .button.roombooking { display: flex; padding: 0 18px; }
  /* live's inline text-align: justify opens wide word gaps on a phone column (3.18 m8, 2026-10-07) */
  body.tt-site #page-container #content [style*="justify"] { text-align: left !important; }
  body.tt-site #page-container #content td a { display: inline-block; padding: 4px 0; }
  body.tt-site #page-container #content a.button:link, body.tt-site #page-container #content a.button:visited { color: #1f1d0e; }
  /* site map: links stay inline so a wrapped item keeps its bullet on the FIRST line (an inline-block puts the marker
     beside its last line); the vertical padding still gives a tall tap area (3.18 m2, 2026-10-07) */
  body.tt-site.page-id-1423 #page-container #content li a { display: inline; padding: 7px 0; }
  body.tt-site.page-id-1423 #page-container #content li { line-height: 22px; padding: 6px 0; }
  body.tt-site #page-container #footer .footer-tags p, body.tt-site #page-container #footer .footer-tags a { font-size: 14px; }
  body.tt-site #page-container .tt-contact-form .et_pb_contact_field.et_pb_contact_field > .input { font-size: 16px; }

  /* footer */
  body.tt-site #page-container #footer { font-size: 14px; }
  body.tt-site #page-container #footer .footertop { padding: 20px 16px; }
  body.tt-site #page-container .infomenu li { display: block; background: none; padding: 0; margin: 0; }
  body.tt-site #page-container .infomenu li a { display: inline-block; line-height: 40px; font-size: 15px; }
  body.tt-site #page-container #footer .container { padding: 28px 16px 34px; }
  body.tt-site #page-container #footer .container .left, body.tt-site #page-container #footer .vcard { float: none; width: auto; }
  body.tt-site #page-container #footer .vcard { margin-top: 28px; }
  body.tt-site #page-container .footermenu li { display: inline-block; }
  body.tt-site #page-container .footermenu a { display: inline-block; font-size: 14px; line-height: 40px; color: #d6d3bb !important; }
  body.tt-site #page-container #footer .copyright { font-size: 14px; }
  body.tt-site #page-container .footer-tags { display: block; margin: 8px 0 0; }
  body.tt-site #page-container .footer-tags a { font-size: 14px; line-height: 32px; }
  body.tt-site #page-container .vcard .org { font-size: 30px; }
  body.tt-site #page-container .vcard .adr { font-size: 17px; line-height: 24px; }
  body.tt-site #page-container .vcard li { line-height: 26px; }
}

/* ---------- phone: the booking calendar (appended to <body>) at a usable size ---------- */
@media (max-width: 767px) {
  body.tt-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.tt-site #datepicker_div .datepicker_oneMonth { width: 100%; }
  body.tt-site #datepicker_div .datepicker_control a, body.tt-site #datepicker_div .datepicker_links a { display: block; padding: 0 12px !important; line-height: 42px; font-size: 15px; }
  body.tt-site #datepicker_div .datepicker_control a { color: #1f1d0e !important; }
  body.tt-site #datepicker_div .datepicker_control, body.tt-site #datepicker_div .datepicker_links { padding: 0; }
  body.tt-site #datepicker_div .datepicker_header { height: auto; padding: 6px 0; }
  body.tt-site #datepicker_div .datepicker_header select { font-size: 16px; height: 36px; padding: 0 6px; }
  body.tt-site #datepicker_div td { font-size: 16px !important; height: 42px; line-height: 42px; }
  body.tt-site #datepicker_div td a { line-height: 42px; }
  body.tt-site #datepicker_div .datepicker_unselectable { color: #6b6b6b; }
  body.tt-site #datepicker_div .datepicker_currentDay a { color: #1f1d0e !important; }
}

/* ==================== fix round 2: 3.18 verifier findings (2026-10-07) ==================== */

/* M2: the home offer heading ran under the BOOK NOW button. 768-1169: the button drops below the offer text;
   1170-1249: the heading leaves room for the button (live's fixed layout, which no longer has the width) */
@media (min-width: 768px) and (max-width: 1169px) {
  body.tt-site.tt-home #page-container #special .text { padding: 20px 24px; }
  body.tt-site.tt-home #page-container #special p { padding-right: 0; }
  body.tt-site.tt-home #page-container #special .button { position: static; transform: none; display: inline-block; width: auto; height: 52px; line-height: 52px; padding: 0 28px; margin-top: 14px; }
}
@media (min-width: 1170px) and (max-width: 1249px) {
  body.tt-site.tt-home #page-container #special h4 { padding-right: 191px; }
  /* the blog teaser column is a fixed 888px box that cuts the third teaser in half under the footer (live does the
     same at 1250 and up, kept there for parity). Here it grows with its teasers and the text column grows with it. */
  body.tt-site.tt-home #page-container #content { display: flex; align-items: stretch; }
  body.tt-site.tt-home #page-container #content .left { float: none; flex: 1 1 auto; width: auto; }
  body.tt-site.tt-home #page-container #content .blog-wrapper { position: relative; top: auto; bottom: auto; right: auto; flex: 0 0 225px; height: auto; overflow: visible; }
  body.tt-site.tt-home #page-container .panel.blog { position: static; }
}

/* m4, m5: tablet footer (768-1169): the credit line starts flush with the lines above it; the SEO link row wraps as
   whole items, with no separator bullet left at the start of a line */
@media (min-width: 768px) and (max-width: 1169px) {
  body.tt-site #page-container .footer-tags { display: block; margin: 8px 0 0; }
  body.tt-site #page-container .infomenu ul { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 28px; row-gap: 4px; }
  body.tt-site #page-container .infomenu li, body.tt-site #page-container .infomenu li:first-child { background: none; margin: 0; padding: 5px 0; }
  /* N1 (3.18 re-check, 2026-10-07): the SEO link row ran edge to edge near 1024; same 24px inset as the footer rows below */
  body.tt-site #page-container #footer .footertop { padding-left: 24px; padding-right: 24px; }
}
/* m6, m7: 768-1249 is ours (live itself scrolls sideways there), so a 14px floor, 16px inputs and AA colours;
   live's own sizes and colours stay at 1250 and up */
@media (min-width: 768px) and (max-width: 1249px) {
  body.tt-site #page-container #footer .copyright, body.tt-site #page-container .footermenu a, body.tt-site #page-container #footer .footer-tags p, body.tt-site #page-container .footer-tags a { font-size: 14px; }
  body.tt-site #page-container a.more, body.tt-site #page-container a.more:link, body.tt-site #page-container a.more:visited { font-size: 14px; line-height: 20px; color: #7a6400 !important; }
  body.tt-site #page-container .panel .date, body.tt-site #page-container .panel .details, body.tt-site #page-container .entry .details, body.tt-site #page-container .panel li em, body.tt-site #page-container .details strong, body.tt-site #page-container .details a { font-size: 14px; }
  body.tt-site #page-container div.top { font-size: 14px; }
  body.tt-site #page-container div.top a { color: #666666; }
  body.tt-site #page-container .paging, body.tt-site #page-container .paging a:link, body.tt-site #page-container .paging a:visited { font-size: 14px; color: #595959; }
  body.tt-site #page-container .paging em, body.tt-site #page-container .paging em a:link, body.tt-site #page-container .paging em a:visited { color: #ffffff; background-color: #6d6d6d; }
  body.tt-site #page-container .gallery h3 { color: #7a6400; }
  body.tt-site.tt-home #page-container #special p { color: #555555; }
  body.tt-site.tt-home #page-container .panel.blog li, body.tt-site.tt-home #page-container #content .blog-wrapper { background-color: #6d6a48; }
  body.tt-site.tt-home #page-container .panel.blog .date { font-size: 14px; color: #ffffff !important; }
  body.tt-site.tt-home #page-container .panel.blog .summary { font-size: 15px; line-height: 22px; color: #ffffff; }
  body.tt-site.tt-home #page-container .panel.blog a.more, body.tt-site.tt-home #page-container .panel.blog a.more:link, body.tt-site.tt-home #page-container .panel.blog a.more:visited { color: #ffffff !important; }
  body.tt-site #page-container .tt-contact-form form.et_pb_contact_form::after { font-size: 14px; }
  /* 16px inputs (no zoom-on-focus on tablets) */
  body.tt-site #page-container .bookingform div.check-in input, body.tt-site #page-container .bookingform div.duration select, body.tt-site #page-container .tt-contact-form .et_pb_contact_field.et_pb_contact_field > .input,
  body.tt-site #page-container .tt-contact-form input.et_pb_contact_captcha, body.tt-site #page-container #content .form.searchpage input.clicknclear { font-size: 16px; }
}

/* M3 + m6: every button readable in EVERY state below 1250 (rest: dark text on yellow; hover, focus and the tap
   that sticks on a phone: white on dark green). Live's white-on-yellow and dark-green hover stay at 1250 and up. */
@media (max-width: 1249px) {
  body.tt-site #page-container input.button, body.tt-site #page-container a.button, body.tt-site #page-container #content a.button:link, body.tt-site #page-container #content a.button:visited, body.tt-site #page-container #content input.button,
  body.tt-site #page-container .bookingbutton .button, body.tt-site.tt-home #page-container .bookingbutton .button, body.tt-site #page-container #content .list.rooms .button.roombooking, body.tt-site.tt-home #page-container #special .button,
  body.tt-site #page-container #content .form.searchpage input.button,
  body #page-container .et_pb_section .tt-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button { color: #1f1d0e !important; background-color: #edbb0d !important; }
  body.tt-site #page-container input.button:hover, body.tt-site #page-container input.button:focus, body.tt-site #page-container input.button:active,
  body.tt-site #page-container a.button:hover, body.tt-site #page-container a.button:focus, body.tt-site #page-container a.button:active,
  body.tt-site #page-container #content a.button:hover, body.tt-site #page-container #content a.button:focus, body.tt-site #page-container #content a.button:active,
  body.tt-site #page-container #content input.button:hover, body.tt-site #page-container #content input.button:focus, body.tt-site #page-container #content input.button:active,
  body.tt-site #page-container .bookingbutton .button:hover, body.tt-site #page-container .bookingbutton .button:focus, body.tt-site #page-container .bookingbutton .button:active,
  body.tt-site.tt-home #page-container .bookingbutton .button:hover, body.tt-site.tt-home #page-container .bookingbutton .button:focus, body.tt-site.tt-home #page-container .bookingbutton .button:active,
  body.tt-site #page-container #content .list.rooms .button.roombooking:hover, body.tt-site #page-container #content .list.rooms .button.roombooking:focus, body.tt-site #page-container #content .list.rooms .button.roombooking:active,
  body.tt-site.tt-home #page-container #special .button:hover, body.tt-site.tt-home #page-container #special .button:focus, body.tt-site.tt-home #page-container #special .button:active,
  body.tt-site #page-container #content .form.searchpage input.button:hover, body.tt-site #page-container #content .form.searchpage input.button:focus, body.tt-site #page-container #content .form.searchpage input.button:active,
  body #page-container .et_pb_section .tt-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:hover,
  body #page-container .et_pb_section .tt-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:focus,
  body #page-container .et_pb_section .tt-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:active { color: #ffffff !important; background-color: #0a3200 !important; }
}
/* the horizontal menu bar at 980-1249: live's olive (#8b8760, white text 3.7:1; active/hover #a6a279, 2.6:1) darkened
   to the phone menu's AA olives; the drop-down follows */
@media (min-width: 980px) and (max-width: 1249px) {
  body.tt-site #page-container #menu { background-color: #6d6a48; }
  body.tt-site #page-container #menu li:hover, body.tt-site #page-container #menu li.active, body.tt-site #page-container #menu li ul,
  body.tt-site #page-container #menu li:hover a:link, body.tt-site #page-container #menu li:hover a:active, body.tt-site #page-container #menu li:hover a:visited, body.tt-site #page-container #menu li:hover a:hover { background-color: #4f4c30; }
  body.tt-site #page-container #menu li li:hover, body.tt-site #page-container #menu li li.active, body.tt-site #page-container #menu li li:hover a:hover, body.tt-site #page-container #menu li li.active a, body.tt-site #page-container #menu li:hover li.active a { background-color: #ffffff; color: #4f4c30; }
}
/* the menu's Book Now item below 1250 (live's white on gold is 2.2:1), and the phone/tablet menu button (below 980) */
@media (max-width: 1249px) {
  body.tt-site #page-container #menu li.alt a:link, body.tt-site #page-container #menu li.alt a:visited { color: #1f1d0e; background-color: #d5ab18; }
  body.tt-site #page-container #menu li.alt:hover a:link, body.tt-site #page-container #menu li.alt:hover a:visited, body.tt-site #page-container #menu li.alt a:focus, body.tt-site #page-container #menu li.alt a:active { color: #ffffff; background-color: #0a3200; }
}
@media (max-width: 979px) {
  body.tt-site #page-container .ils-menu-toggle, body.tt-site #page-container .ils-menu-toggle:hover, body.tt-site #page-container .ils-menu-toggle:focus, body.tt-site #page-container .ils-menu-toggle:active { background-color: #6d6a48; color: #ffffff; }
}

/* Heading order (Darcie on a real phone, 2026-10-07): below 1170 the "Blog" label (in the top row wrapper) stacked
   under the FAQ banner while its teasers (in #content) landed below the welcome text, photo and map. Both wrappers
   step aside (display: contents) so their children share one column and the label sits directly above its teasers.
   Phone/tablet order: booking, offer, FAQ banner (live's top row), welcome text, photo and map, then Blog + teasers.
   1170 and up keep live's absolute layout. */
@media (max-width: 1169px) {
  body.tt-site.tt-home #page-container .et_pb_code_inner:has(> .topcontainer-wrapper) { display: flex; flex-direction: column; }
  body.tt-site.tt-home #page-container .topcontainer-wrapper, body.tt-site.tt-home #page-container #content { display: contents; }
  body.tt-site.tt-home #page-container #topcontainer { order: 1; }
  body.tt-site.tt-home #page-container .topcontainer-wrapper > .clearboth { order: 2; }
  body.tt-site.tt-home #page-container #content .left { order: 3; }
  body.tt-site.tt-home #page-container h3.blog-label { order: 4; }
  body.tt-site.tt-home #page-container #content .blog-wrapper { order: 5; }
}

/* Text-link states below 1250 (found by kit/link_contrast.js, 2026-10-07): live's hover turns "Back to top" white on
   #e3e3e3 (1.3:1) and the blog pager grey on #b0b0b0 (3.2:1, our darker phone/tablet pager text). Both hover, focus
   and the tap that sticks on a phone become white on mid grey (5.3:1). */
@media (max-width: 1249px) {
  body.tt-site #page-container div.top a:hover, body.tt-site #page-container div.top a:focus, body.tt-site #page-container div.top a:active { color: #ffffff !important; background: #6d6d6d; }
  body.tt-site #page-container .paging a:link:hover, body.tt-site #page-container .paging a:visited:hover, body.tt-site #page-container .paging a:focus, body.tt-site #page-container .paging a:active { color: #ffffff; background-color: #6d6d6d; }
}
/* tel: links in the contact table stay inline on phones (the table-link tap rule made them inline-block with 4px
   padding, so the number sat 4px below its label) */
@media (max-width: 767px) {
  body.tt-site #page-container #content td a.tel-link { display: inline; padding: 0; }
}