/* Top Rank Solutions, Sept 2026: phone and tablet tidy. Loaded after style.css; versioned filename so it is never stuck in a cache. */

/* --- the slide-in menu (tablets and phones) --- */
@media (max-width: 991px) {
  .nav-wrapper { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 60px; }
  .navigation li.dropdown { position: relative; }
  .navigation li.dropdown > .dropdown-menu { display: none; }            /* closed until tapped */
  .navigation li.dropdown.sfs-open > .dropdown-menu { display: block; }
  .navigation > li.dropdown > a { padding-right: 60px; }
  .navigation > li.dropdown > a:after { display: none; }                 /* the chevron is a real button now */
  .sfs-dd-toggle { position: absolute; top: 0; right: 0; width: 56px; height: 47px; border: 0; background: transparent; color: #fff; padding: 0; cursor: pointer; }
  .sfs-dd-toggle:before { font-family: bootstrap-icons; content: "\F282"; font-size: 18px; display: inline-block; transition: transform .25s; }
  .navigation li.dropdown.sfs-open > .sfs-dd-toggle:before { transform: rotate(180deg); }
  .navigation li.dropdown > .dropdown-menu li a { padding: 10px 20px 10px 34px; }
  /* after a tap the row stays gold and the label went gold too, so the words vanished */
  .navigation > li:hover > a, .navigation > li:focus-within > a, .navigation > li.active > a { color: #fff !important; }
  /* the 2-3 second fade-ins left blank space under a fast-scrolling thumb: keep the effect, make it quick */
  [data-aos] { transition-duration: .5s !important; transition-delay: 0s !important; }
  /* fixed background images are not supported on touch devices and leave blank panels */
  [style*="background-attachment"] { background-attachment: scroll !important; background-position: center !important; }
}
.sfs-dd-toggle { display: none; }
@media (max-width: 991px) { .sfs-dd-toggle { display: block; } }
/* iPads wider than 991px are touch devices too: fixed backgrounds still need switching off there */
@media (hover: none) { [style*="background-attachment"] { background-attachment: scroll !important; background-position: center !important; } }

/* --- tablets and phones: slim header row, the whole banner photo, zoom-out --- */
@media (max-width: 991px) {
  .header-bottom { padding: 8px 16px; }
  .header-bottom > .row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; margin: 0; }
  .header-bottom > .row > [class*="col-"] { width: auto; flex: 0 0 auto; padding: 0; }
  .header-bottom > .row > .col-lg-10 { flex: 1 1 auto; min-width: 0; }
  .logo { display: block; margin: 0; }
  .logo .img-fluid { max-width: 76px; padding: 0; }
  .header-top-right { text-align: right; }
  .top-contact-list { margin: 0; white-space: nowrap; }
  .top-contact-list li { padding: 0 10px; }
  .top-contact-list li:last-child { padding-right: 0; }
  .top-contact-list li a { font-size: 16px; line-height: 22px; }
  .top-contact-list li i { font-size: 18px; }
  .top-contact-list li:before { height: 13px; }
  /* inner-page banners: the photo itself (a crop cut for the screen shape), zooming out as it loads, title at the foot */
  .parallax-window { height: auto !important; min-height: 56vh; max-height: 640px; position: relative; overflow: hidden; isolation: isolate; display: flex !important; align-items: flex-end; }
  .sfs-hero-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; z-index: -1; transform-origin: 50% 50%; animation: sfsZoomOut 8s cubic-bezier(.2,.7,.2,1) forwards; will-change: transform; }
  .parallax-window.overlap:before { z-index: 0; background-color: rgb(9 9 9 / 38%); }
  .home-slide, .parallax-window .home-slide { position: relative !important; top: auto !important; z-index: 1; width: 100%; padding: 0 0 36px; }
  .home-parallax h1, .home-slide .font { font-size: 40px; line-height: 50px; }
  @keyframes sfsZoomOut { from { transform: scale(1.35); } to { transform: scale(1); } }
  /* homepage banner (a one-slide carousel): same treatment, no longer a full screen tall */
  .banner.slider-fade { min-height: 0 !important; }
  .slider-fade .owl-item { min-height: 56vh !important; height: 56vh; max-height: 640px; }
  .slider-fade .item.bg-img { background-image: none !important; isolation: isolate; overflow: hidden; }
  .slider-fade .item .caption.v-middle { position: absolute !important; left: 0; right: 0; top: auto !important; bottom: 32px; transform: none !important; }
  .banner .caption .font { font-size: 40px !important; line-height: 50px !important; margin-bottom: 10px; }
  .banner .caption .caption-text { font-size: 14px; letter-spacing: 2px; margin-bottom: 0; }
  /* homepage contact strip: straight under the banner, compact */
  .booking-wrapper { padding: 14px 0 16px; }
  .booking-inner { padding: 0 16px; }
  .form1 .c2, .form1 .c3 { margin-bottom: 0; }
}

/* --- phones only --- */
@media (max-width: 767px) {
  .header-bottom { padding: 6px 12px; }
  .logo .img-fluid { max-width: 62px; }
  .top-contact-list li { padding: 0 7px; }
  .top-contact-list li a { font-size: 14px; line-height: 20px; }
  .top-contact-list li i { font-size: 17px; }
  .top-contact-list li:before { height: 12px; }
  .parallax-window { max-height: 560px; }
  .home-slide, .parallax-window .home-slide { padding-bottom: 30px; }
  .home-parallax h1, .home-slide .font { font-size: 30px; line-height: 38px; }
  .slider-fade .owl-item { max-height: 560px; }
  .slider-fade .item .caption.v-middle { bottom: 26px; }
  .banner .caption .font { font-size: 30px !important; line-height: 38px !important; margin-bottom: 8px; }
  .banner .caption .caption-text { font-size: 13px; }
  .booking-wrapper { padding: 12px 0 14px; }
  .booking-inner { padding: 0 12px; }
  .form1 { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .form1 .col1, .form1 .col2, .form1 .col3 { float: none; width: auto; }
  .form1 .c2, .form1 .c3 { height: auto; }
  .top-contact-box { padding: 10px 14px; font-size: 15px; }
  .top-contact-box .icon-box i { font-size: 20px; width: 22px; height: 22px; line-height: 22px; }
  .submit-btn1 a { padding: 14px 20px; }
  .progress-wrap { display: none !important; }                           /* back-to-top sat under the reviews badge */
  .about .text-center p { text-align: left; }                            /* long centred paragraphs are hard to read */
  h2 { font-size: 28px; }
  section.p-3, div.p-3 { padding: 24px 16px !important; }
}