.elementor-kit-7{--e-global-color-primary:#0b3e47;--e-global-color-secondary:#147182;--e-global-color-text:#404040;--e-global-color-accent:#1fb1cc;--e-global-color-onprimary:#ffffff;--e-global-color-surfacecream:#fff9f0;--e-global-color-surfacetint:#f0f9fa;--e-global-color-brandlime:#d3d508;--e-global-color-seatint:#e4eff0;--e-global-typography-primary-font-family:"DM Sans";--e-global-typography-primary-font-size:60px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-text-decoration:none;--e-global-typography-primary-line-height:68px;--e-global-typography-primary-letter-spacing:-1.8px;--e-global-typography-primary-word-spacing:0px;--e-global-typography-secondary-font-family:"DM Sans";--e-global-typography-secondary-font-size:34px;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-font-style:normal;--e-global-typography-secondary-text-decoration:none;--e-global-typography-secondary-line-height:40px;--e-global-typography-secondary-letter-spacing:-1.02px;--e-global-typography-secondary-word-spacing:0px;--e-global-typography-text-font-family:"DM Sans";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-text-decoration:none;--e-global-typography-text-line-height:24px;--e-global-typography-text-letter-spacing:0px;--e-global-typography-text-word-spacing:0px;--e-global-typography-accent-font-family:"DM Sans";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-font-style:normal;--e-global-typography-accent-text-decoration:none;--e-global-typography-accent-line-height:21px;--e-global-typography-accent-letter-spacing:1.6px;--e-global-typography-accent-word-spacing:0px;--e-global-typography-bodycopy-font-family:"DM Sans";--e-global-typography-bodycopy-font-size:20px;--e-global-typography-bodycopy-font-weight:400;--e-global-typography-bodycopy-text-transform:none;--e-global-typography-bodycopy-font-style:normal;--e-global-typography-bodycopy-text-decoration:none;--e-global-typography-bodycopy-line-height:30px;--e-global-typography-bodycopy-letter-spacing:0px;--e-global-typography-bodycopy-word-spacing:0px;--e-global-typography-btnlabel-font-family:"DM Sans";--e-global-typography-btnlabel-font-size:18px;--e-global-typography-btnlabel-font-weight:700;--e-global-typography-btnlabel-text-transform:uppercase;--e-global-typography-btnlabel-font-style:normal;--e-global-typography-btnlabel-text-decoration:none;--e-global-typography-btnlabel-line-height:18px;--e-global-typography-btnlabel-letter-spacing:0px;--e-global-typography-btnlabel-word-spacing:0px;--e-global-typography-herotitle-font-family:"DM Sans";--e-global-typography-herotitle-font-size:80px;--e-global-typography-herotitle-font-weight:700;--e-global-typography-herotitle-text-transform:none;--e-global-typography-herotitle-font-style:normal;--e-global-typography-herotitle-text-decoration:none;--e-global-typography-herotitle-line-height:100px;--e-global-typography-herotitle-letter-spacing:-2.16px;--e-global-typography-herotitle-word-spacing:0px;--e-global-typography-cardtitle28-font-family:"DM Sans";--e-global-typography-cardtitle28-font-size:28px;--e-global-typography-cardtitle28-font-weight:700;--e-global-typography-cardtitle28-text-transform:none;--e-global-typography-cardtitle28-font-style:normal;--e-global-typography-cardtitle28-text-decoration:none;--e-global-typography-cardtitle28-line-height:36px;--e-global-typography-cardtitle28-letter-spacing:-0.56px;--e-global-typography-cardtitle28-word-spacing:0px;--e-global-typography-navlink-font-family:"DM Sans";--e-global-typography-navlink-font-size:18px;--e-global-typography-navlink-font-weight:600;--e-global-typography-navlink-text-transform:uppercase;--e-global-typography-navlink-font-style:normal;--e-global-typography-navlink-text-decoration:none;--e-global-typography-navlink-line-height:23px;--e-global-typography-navlink-letter-spacing:0px;--e-global-typography-navlink-word-spacing:0px;color:var( --e-global-color-secondary );font-family:"DM Sans", sans-serif;font-size:16px;font-weight:400;text-transform:none;font-style:normal;text-decoration:none;line-height:24px;letter-spacing:0px;word-spacing:0px;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:var( --e-global-color-primary );font-family:"DM Sans", sans-serif;font-size:18px;font-weight:700;text-transform:uppercase;font-style:normal;text-decoration:none;line-height:18px;letter-spacing:0px;word-spacing:0px;color:var( --e-global-color-onprimary );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );border-radius:60px 60px 60px 60px;padding:0px 32px 0px 32px;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{background-color:var( --e-global-color-onprimary );color:var( --e-global-color-primary );}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 p{margin-block-end:0px;}.elementor-kit-7 a{color:var( --e-global-color-secondary );font-family:"DM Sans", sans-serif;text-decoration:none;}.elementor-kit-7 a:hover{color:var( --e-global-color-primary );}.elementor-kit-7 h1{color:var( --e-global-color-primary );font-family:"DM Sans", sans-serif;font-size:80px;font-weight:700;text-transform:none;font-style:normal;text-decoration:none;line-height:100px;letter-spacing:-2.16px;word-spacing:0px;}.elementor-kit-7 h2{color:var( --e-global-color-primary );font-family:"DM Sans", sans-serif;font-size:60px;font-weight:700;text-transform:none;font-style:normal;text-decoration:none;line-height:68px;letter-spacing:-1.8px;word-spacing:0px;}.elementor-kit-7 h3{color:var( --e-global-color-primary );font-family:"DM Sans", sans-serif;font-size:34px;font-weight:700;text-transform:none;font-style:normal;text-decoration:none;line-height:40px;letter-spacing:-1.02px;word-spacing:0px;}.elementor-kit-7 h4{color:var( --e-global-color-primary );font-family:"DM Sans", sans-serif;font-size:28px;font-weight:700;text-transform:none;font-style:normal;text-decoration:none;line-height:36px;letter-spacing:-0.56px;word-spacing:0px;}.elementor-kit-7 h5{color:var( --e-global-color-primary );font-family:"DM Sans", sans-serif;font-size:24px;font-weight:700;text-transform:none;font-style:normal;text-decoration:none;line-height:32px;letter-spacing:-0.48px;word-spacing:0px;}.elementor-kit-7 h6{color:var( --e-global-color-primary );font-family:"DM Sans", sans-serif;font-size:20px;font-weight:700;text-transform:none;font-style:normal;text-decoration:none;line-height:28px;letter-spacing:-0.4px;word-spacing:0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1520px;}.e-con{--container-max-width:1520px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:991px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:480px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* RESIDUAL BREAKPOINT-BAND SHIM - rung (d), justified.
   This template steps measured values at NINE thresholds (1920,1600,1440,1366,1199,1023,991,767,480).
   Elementor exposes exactly SIX custom breakpoint slots, spent on the thresholds that change LAYOUT:
   1920/1440/1023/991/767/480. No Elementor control can express a value in the 1441-1600, 1201-1366 or
   1024-1199 bands, so the numeric steps the source makes at 1600, 1366 and 1199 are restated here and
   ONLY here. Every rule is scoped to a section marker class (.s-*) that exists nowhere else on the site.
   SELECTOR SHAPE: Elementor emits `.elementor-<doc> .elementor-element.elementor-element-<id> ...`,
   and the Kit stylesheet (post-7.css) loads BEFORE per-document CSS, so each rule here carries a
   leading `body` plus `.elementor-element` to land strictly above Elementor's own specificity. */
@media (min-width: 1024px) and (max-width: 1199px) {
  body .s-header .elementor-element.elementor-element-hdrmenu .elementor-nav-menu .elementor-item { font-size: 14px; }
  body .s-header .elementor-element.elementor-element-hdracts { --gap: 10px 10px; --row-gap: 10px; --column-gap: 10px; }
  body .s-header .elementor-element.elementor-element-hdrcall { --padding-right: 12px; }
  body .s-header .elementor-element.elementor-element-hdrcta .elementor-button { padding-left: 20px; padding-right: 20px; }
}

/* NAV-MENU SUBMENU CARET - rung (d), justified.
   The Nav Menu widget's own submenu_icon control is the correct native home for this glyph, but on
   Elementor Pro 4.0.4 it CANNOT hold a custom SVG: Nav_Menu::get_frontend_settings() runs substr() on
   the icon value, which is an ARRAY when library === 'svg', producing an uncaught TypeError that
   white-screens every page the widget appears on (verified twice on this install). The control only
   accepts a font icon, and no font icon matches the template's 13x8 round-cap chevron, so the glyph
   is masked here. !important is required to beat Elementor's own .e-font-icon-svg{width:1em;height:1em}. */
body .s-header .elementor-nav-menu .sub-arrow { display: inline-flex; align-items: center; margin-inline-start: 12px; width: 13px; height: 8px; }
body .s-header .elementor-nav-menu .sub-arrow svg {
  width: 13px !important; height: 8px !important;
  background-color: currentColor;
  -webkit-mask: url("//srv/htdocs/wp-content/uploads/2026/09/nav-caret.svg") no-repeat center / 13px 8px;
  mask: url("//srv/htdocs/wp-content/uploads/2026/09/nav-caret.svg") no-repeat center / 13px 8px;
}
@media (max-width: 1199px) { body .s-header .elementor-nav-menu .sub-arrow { margin-inline-start: 8px; } }

/* BURGER -> X - rung (d), justified.
   Elementor's hover/state controls style the element they are set on. There is no control that reacts
   to a SIBLING Off-Canvas panel being open, which is what the source's [aria-expanded=true] rule does. */
.s-header-burger .elementor-widget-divider { transition: transform .3s ease, opacity .2s ease; }
body.e-off-canvas--open .s-header-burger .elementor-element-hdrbar1 { transform: translateY(7px) rotate(45deg); }
body.e-off-canvas--open .s-header-burger .elementor-element-hdrbar2 { opacity: 0; }
body.e-off-canvas--open .s-header-burger .elementor-element-hdrbar3 { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================================
   SECTION 01 — HERO (.s-hero) — rung (d), justified.
   (a) RESIDUAL PADDING BANDS. The source steps the hero's vertical padding at
       1600 / 1440 / 1366 / 1199 / 1023 / 991. Elementor's six breakpoint slots
       are already spent (and locked by the header), so 1440 / 1023 / 991 are
       native controls and the three bands below have no control that can hold
       them. Values are the source's own, measured.
   (b) MOBILE BACKGROUND STACK. The desktop stack (flat #111E20 @60% over a
       radial .7 -> 0) composes exactly to ONE 2-stop radial and is therefore
       a native gradient overlay. The <=767 stack cannot be: it is a THREE-stop
       linear plus a radial with an explicit `303.42% 100% at 50% 100%` extent,
       and Elementor's overlay is a single 2-stop gradient with no extent
       control. One declaration, on the overlay element the control already owns.
   Selector shape follows the header's: `body` + three classes, so each rule
   lands strictly above Elementor's own `.elementor-88 .elementor-element...`.
   ========================================================================== */
@media (min-width: 1441px) and (max-width: 1600px) {
  body .elementor-element.elementor-element-hero.s-hero { --padding-top: 54px; --padding-bottom: 108px; }
}
@media (min-width: 1200px) and (max-width: 1366px) {
  body .elementor-element.elementor-element-hero.s-hero { --padding-top: 44px; --padding-bottom: 88px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  body .elementor-element.elementor-element-hero.s-hero { --padding-top: 40px; --padding-bottom: 76px; }
}
@media (max-width: 767px) {
  body .elementor-element.elementor-element-hero.s-hero::before {
    background-image:
      linear-gradient(180deg, rgba(17, 30, 32, 0) 31.25%, rgba(17, 30, 32, 0.656) 67.09%, rgba(17, 30, 32, 0.8) 100%),
      radial-gradient(303.42% 100% at 50% 100%, rgba(17, 30, 32, 0.7) 0%, rgba(17, 30, 32, 0) 100%);
  }
}


/* --- SECTION 02 — ABOUT (.s-about): residual padding bands — rung (d), same
       justification as the hero's. Source steps: 1600 / 1440 / 1366 / 1199 / 1023. --- */
@media (min-width: 1441px) and (max-width: 1600px) {
  body .elementor-element.elementor-element-abt.s-about { --padding-top: 135px; --padding-bottom: 180px; }
}
@media (min-width: 1200px) and (max-width: 1366px) {
  body .elementor-element.elementor-element-abt.s-about { --padding-top: 108px; --padding-bottom: 144px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  body .elementor-element.elementor-element-abt.s-about { --padding-top: 92px; --padding-bottom: 120px; }
}


/* --- SECTION 02 — ABOUT: two <=767 properties with no responsive control — rung (d).
       1. Eyebrow colour. Elementor COLOR controls are registered with add_control(), never
          add_responsive_control() (verified in heading.php: `title_color`), so no widget on
          this install can change colour at a breakpoint. The source's mobile layer recolours
          the eyebrow #1FB1CC -> #147182. The alternative (a second Heading widget behind
          hide_* flags) would duplicate the word "ABOUT" in two places in the Navigator, which
          is worse for the client than one scoped declaration.
       2. Photo-frame shadow. Group_Control_Box_Shadow is likewise non-responsive, and the
          source adds this shadow only in the mobile layer; applying it at every width would
          paint a halo inside the 16px white card the >=1441 layout draws. --- */
@media (max-width: 767px) {
  body .elementor-element.elementor-element-abtebt .elementor-heading-title { color: #147182; }
  body .elementor-element.elementor-element-abtfrm { box-shadow: 0 4px 50px 0 rgba(11, 62, 71, 0.08); }
}


/* ============================================================================
   SECTION 03 — OUR TOURS (.s-tours) — rung (d), justified.
   (a) CARD CTA BOX. The Button widget has no min-height control: its height is
       line-height + text_padding + border, which cannot express the source's
       "at least 56/52px, and GROW when the label wraps to two lines" box. Six
       labels wrap at 1100-1366 and do not at 1400+, so a padding-only height
       is wrong at one band or the other. Restated here as the source's own
       three declarations (inline-flex + centring) plus min-height per band.
   (b) RESIDUAL PADDING BANDS at 1600 / 1366 / 1199 (same reason as the hero).
   (c) 1024-1199 CARD METRICS. The source drops the grid gap to 20px at 1199,
       which also changes the card width and therefore the 4:3 image height.
       Both are inside a band Elementor has no breakpoint slot for.
   (d) PER-CARD IMAGE CROP at <=1023. The source tunes object-position to
       `80% 0%` (cards 1-2) and `0% 18%` (card 3); Elementor's object-position
       control is a NINE-KEYWORD SELECT with no percentage input, so the exact
       crop cannot be stored in the control. The control still carries the
       nearest keyword so the panel is not silent about it.
   ========================================================================== */
.s-tours .elementor-widget-button .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}
@media (max-width: 1440px) { .s-tours .elementor-widget-button .elementor-button { min-height: 52px; } }
@media (max-width: 767px)  { .s-tours .elementor-widget-button .elementor-button { min-height: 56px; } }

@media (min-width: 1441px) and (max-width: 1600px) {
  body .elementor-element.elementor-element-tours.s-tours { --padding-top: 90px; --padding-bottom: 117px; }
}
@media (min-width: 1200px) and (max-width: 1366px) {
  body .elementor-element.elementor-element-tours.s-tours { --padding-top: 72px; --padding-bottom: 94px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  body .elementor-element.elementor-element-tours.s-tours { --padding-top: 64px; --padding-bottom: 80px; }
  body .s-tours .elementor-element.elementor-element-tourgrid { --gap: 20px 20px; --row-gap: 20px; --column-gap: 20px; }
}
@media (min-width: 768px) {
  body .s-tours .elementor-element.elementor-element-tci1 img,
  body .s-tours .elementor-element.elementor-element-tci2 img { object-position: 80% 0%; }
  body .s-tours .elementor-element.elementor-element-tci3 img { object-position: 0% 18%; }
}

/* ============================================================================
   RESPONSIVE IMAGE ASPECT RATIOS — rung (d), justified.
   ----------------------------------------------------------------------------
   Elementor's Image widget has NO aspect-ratio control: its only sizing controls
   are width / max-width / height, and `height` takes a length. This template
   sizes every responsive photo with `aspect-ratio`, and the two are NOT
   interchangeable: a calc() height cannot follow the browser's 1/64px CSS-grid
   track rounding, so a card whose track resolves to 395.3125px gets an image
   296.484375px tall from aspect-ratio but 296.5px from calc -- which rounds the
   whole card body onto the next device pixel and shifts its title, copy and
   button down by one. Measured directly: cards 1-2 of Our Tours were exactly
   1px low at 1300 while card 3 was exact. `height: auto` alone is not a fix
   either, because WordPress's srcset makes the browser pick a resized file
   whose ROUNDED intrinsic ratio differs from the original's (1024x683 vs
   2048x1365 moved the About photo 0.5px, which then shifted every section
   below it out of sub-pixel phase).
   Each rule below is the source's own declaration, verbatim.
   ========================================================================== */
@media (max-width: 1440px) {
  body .s-tours .elementor-element.tours-card-photo img { height: auto; aspect-ratio: 4/3; }
}
@media (max-width: 1023px) {
  body .s-tours .elementor-element.tours-card-photo img { aspect-ratio: 485/340; }
}
@media (min-width: 481px) and (max-width: 767px) {
  body .s-tours .elementor-element.tours-card-photo img { aspect-ratio: auto; height: 360px; }
}
@media (max-width: 480px) {
  body .s-tours .elementor-element.tours-card-photo img { height: auto; aspect-ratio: 17/12; }
}

/* ============================================================================
   SECTION 04 — WHY CHOOSE US (.s-wcu) — rung (d), justified.
   (a) SECTION OVERLAY. The source paints a SIX-stop vertical gradient over the
       photo. Elementor's background-overlay gradient is a single 2-stop pair
       (color / color_b) with no stop list, so the middle four stops cannot be
       stored in the control. The control still owns the overlay (it is what
       makes the ::before element exist at all); only its background-image is
       restated. Same reason as the hero's mobile stack.
   (b) MOBILE BACKGROUND. At <=767 the source replaces the whole background
       with a 6-stop gradient layer PLUS the photo, each layer with its own
       background-size and background-position. Elementor's background group
       is one layer with one size and one position.
   (c) HARD LINE BREAKS IN CARD TITLES. The design breaks "Exclusive / Access",
       "Small / Groups" and "Tailored / Tours" with a real newline and
       `white-space: pre-line`, and lets them reflow normally at <=767. A <br>
       in the Heading widget's title would be permanent, so the newline is
       stored in the control and rendered with the source's own declaration.
   (d) RESIDUAL PADDING BAND at 1441-1600.
   ========================================================================== */
@media (min-width: 768px) {
  body .elementor-element.elementor-element-wcu.s-wcu::before {
    background-image: linear-gradient(180deg,
      rgba(11, 62, 71, 0) 0%, rgba(11, 62, 71, 0) 50%, rgba(11, 62, 71, 0.58) 65%,
      rgba(11, 62, 71, 0.88) 82%, rgba(11, 62, 71, 0.96) 95%, rgba(11, 62, 71, 0.98) 100%);
  }
}
@media (max-width: 767px) {
  /* `.s-wcu.s-wcu` is deliberate: Elementor's own background rule carries a
     `:not(.elementor-motion-effects-element-type-background)`, which counts as a
     class, making it (0,4,0). The repeated marker class is the least invasive way
     to reach (0,4,1) without an !important or a page-id dependency. */
  body .elementor-element.elementor-element-wcu.s-wcu.s-wcu {
    background-image:
      linear-gradient(180deg, rgba(11, 62, 71, 0) 0%, rgba(11, 62, 71, 0) 42%, rgba(11, 62, 71, 0.35) 58%,
        rgba(11, 62, 71, 0.72) 75%, rgba(11, 62, 71, 0.93) 90%, rgb(11, 62, 71) 100%),
      url("//srv/htdocs/wp-content/uploads/2026/09/bg-image.jpg");
    background-size: 100% 760px, 1140px 760px;
    background-position: left top, calc(50% - 109px) top;
    background-repeat: no-repeat, no-repeat;
  }
  body .elementor-element.elementor-element-wcu.s-wcu::before { background-image: none; }
}
@media (min-width: 1441px) {
  body .s-wcu .elementor-widget-heading h3.elementor-heading-title { white-space: pre-line; }
}
/* Only the BOTTOM padding steps at 1600 here: the source's own >=1441 rule pins
   padding-top:772px with !important, so it survives the 1600 vertical-rhythm step
   and only drops to 695 at <=1440 (which is the laptop control's value). */
@media (min-width: 1441px) and (max-width: 1600px) {
  body .elementor-element.elementor-element-wcu.s-wcu { --padding-bottom: 90px; }
}

/* ============================================================================
   SECTION 05 — TESTIMONIALS (.s-testi) — rung (d), justified.
   (a) CAROUSEL ARROWS AT >=1920. The source's nav row is `display: contents` at
       the canvas width so each button keeps its absolute placement in the 200px
       gutter; below 1920 the same row is a centred flex row in flow. Elementor's
       Container has no `display: contents`, and `position` is NOT a responsive
       control — so one set of buttons cannot be absolute at one breakpoint and
       static at another through controls alone. Restated here rather than
       duplicating the two buttons behind hide_<bp> flags.
   (b) SLIDES-PER-VIEW BAND 1024-1279. The source's Swiper switches 2 -> 3 slides
       at 1280, which is NOT one of this site's six Elementor breakpoints (they
       are locked by the header). The track is a CSS grid precisely so the slide
       width can be corrected in that band; a nested-carousel widget could not,
       because slidesPerView is a JS setting keyed to Elementor's own breakpoints
       and 1100 would have rendered 3-up against the source's 2-up.
   (c) "Read More" is an inline link inside the quote and takes the source's own
       bold white treatment.
   ========================================================================== */
@media (min-width: 1920px) {
  body .s-testi .elementor-element.elementor-element-tnav { display: contents; }
  body .s-testi .elementor-element.elementor-element-tarwprev,
  body .s-testi .elementor-element.elementor-element-tarwnext { position: absolute; top: 537px; z-index: 3; }
  /* offsets are 110px in the source but resolve against the SECTION; here the nearest
     positioned ancestor is the inner container, which the section's own 25px side padding
     insets — so 110 - 25 = 85. Verified with measure.js at 1920 (orig prev x=110). */
  body .s-testi .elementor-element.elementor-element-tarwprev { left: 85px; }
  body .s-testi .elementor-element.elementor-element-tarwnext { right: 85px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body .s-testi .elementor-element.elementor-element-ttrack { --e-con-grid-template-columns: repeat(4, calc((100% - 20px) / 2)); }
}
body .s-testi .testi-more { color: #FFFFFF; font-weight: 700; text-decoration: none; white-space: nowrap; }

/* SECTION 05 — author weight at <=767. The source switches the reviewer name from
   400 to 500 below 767. Elementor's typography GROUP control is only responsive for
   font-size / line-height / letter-spacing / word-spacing — `font_weight` has no
   per-breakpoint field, so `typography_font_weight_mobile_extra` is stored but never
   emitted (verified: computed weight stayed 400 at 600px). rung (d), 1 rule. */
@media (max-width: 767px) {
  body .s-testi .elementor-element.elementor-element-tsn1 .elementor-heading-title,
  body .s-testi .elementor-element.elementor-element-tsn2 .elementor-heading-title,
  body .s-testi .elementor-element.elementor-element-tsn3 .elementor-heading-title,
  body .s-testi .elementor-element.elementor-element-tsn4 .elementor-heading-title { font-weight: 500; }
}

/* SECTION 05 — the mobile-only badge row and topo watermark carry
   hide_laptop:"hidden-laptop", and the setting IS stored (verified with
   dev/elementor-get-element-settings), but this install did not emit
   `elementor-hidden-laptop` on these two elements while it did emit it on the
   identical why-choose-us element. Rather than leave a 81px block visible
   through the whole 1024-1440 band, the same visibility is restated here.
   rung (d), 1 rule. */
@media (min-width: 1024px) and (max-width: 1440px) {
  body .s-testi .elementor-element.elementor-element-tbrowm,
  body .s-testi .elementor-element.elementor-element-ttopom { display: none; }
}


/* ============================================================================
   SECTION 06 — TOUR REGIONS (.s-regions) — rung (d), justified.
   (a) The source body copy is ONE paragraph that carries a literal blank line and
       renders it with `white-space: pre-line` at every width. Elementor has no
       white-space control, and splitting it into two <p> widgets would change the
       wrap at every width below 1441 (each paragraph would round its own last line
       up). The copy is stored with &#10;&#10; so the newline survives wpautop.
       1 rule.
   ========================================================================== */
body .s-regions .elementor-element.elementor-element-rgbody p { white-space: pre-line; }


/* ============================================================================
   SECTION 07 — NEWS (.s-news) — rung (d), justified.
   (a) HEADER REORDER AT <=767. The source sets `display: contents` on
       .media-card-grid__header below 767 so the View All button LEAVES the
       header row and lands between the card grid and the trust strip, while the
       eyebrow and heading stay above the grid. Elementor has no `display:
       contents` control; its Container `position` control is add_control(), not
       add_responsive_control(), so the button cannot be absolute at one
       breakpoint and in flow at another; and the Order control can only reorder
       siblings INSIDE one container, whereas here the button's sibling set is
       what changes. The alternative is a second duplicate Button widget behind
       hide_* flags, which would put "View All" in two places in the Navigator.
       These are the source's own five declarations.
   (b) RESIDUAL PADDING / GRID-GAP BANDS at 1366 and 1199 — same justification as
       the hero block above: the source steps values at thresholds Elementor has
       no breakpoint slot left for.
   (c) TRUST-STRIP GROUND. The source paints a SYMMETRIC THREE-STOP 90deg ramp
       plus `backdrop-filter: blur(4px)`. Elementor's gradient control carries
       exactly two colour stops (color / color_b) and has no backdrop-filter
       control at all.
   (d) LOGO INTRINSIC WIDTH. The five trust logos are sized by HEIGHT with
       `width: auto`. The Image widget's width control is a length slider with no
       `auto` keyword, so "height from the control, width from the aspect ratio"
       has no control pairing that expresses it.
   (e) FIFTH LOGO SPANS BOTH COLUMNS AT <=480. Elementor exposes grid-item
       placement (grid_column / grid_row) on CONTAINERS only. These are Image
       widgets, so `grid-column: 1 / -1` has nowhere native to live.
   (f) CARD PHOTO ASPECT RATIO — identical justification to the tours block
       above (the Image widget has no aspect-ratio control and a calc() height
       cannot follow CSS-grid track rounding).
   (g) 1441-1919 FLUID BAND. The source sizes the logo row's leading gap and the
       logo height with clamp() across this whole band; Elementor slider controls
       hold one length per breakpoint, and clamp() is the source's own value.
   ========================================================================== */
@media (max-width: 767px) {
  body .s-news .elementor-element.news-hdr { display: contents; }
  body .s-news .elementor-element.news-hdr-col { order: 1; width: 100%; }
  body .s-news .elementor-element.news-grid { order: 2; }
  body .s-news .elementor-element.news-cta { order: 3; }
  body .s-news .elementor-element.news-badges { order: 4; }
}
@media (min-width: 1200px) and (max-width: 1366px) {
  body .elementor-element.elementor-element-news.s-news { --padding-top: 72px; --padding-bottom: 144px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  body .elementor-element.elementor-element-news.s-news { --padding-top: 64px; --padding-bottom: 120px; }
  body .s-news .elementor-element.elementor-element-ngrid { --gap: 20px 20px; --row-gap: 20px; --column-gap: 20px; }
}
body .s-news .elementor-element.news-badges {
  background-image: linear-gradient(90deg, rgba(240, 249, 250, 0.3) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(240, 249, 250, 0.3) 100%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
body .s-news .elementor-element.news-logo img { width: auto; max-width: 100%; }
body .s-news .elementor-element.news-logo-qual img { width: 188px; }
@media (max-width: 480px) {
  body .s-news .elementor-element.news-logo-5 { grid-column: 1 / -1; }
}
@media (min-width: 1441px) and (max-width: 1919px) {
  body .s-news .elementor-element.elementor-element-nbrow {
    --gap: clamp(24px, 6vw, 140px) 0px;
    --column-gap: clamp(24px, 6vw, 140px);
    --row-gap: 0px;
  }
  body .s-news .elementor-element.news-logo:not(.news-logo-qual) img { height: clamp(72px, 7.5vw, 120px); }
}
@media (max-width: 1440px) {
  body .s-news .elementor-element.news-card-photo img { height: auto; aspect-ratio: 97/102; }
}
@media (max-width: 767px) {
  body .s-news .elementor-element.news-card-photo img { aspect-ratio: 170/179; }
}


/* ============================================================================
   SECTION 08 — INSTAGRAM FEED (.s-insta) — rung (d), justified.
   (a) HANDLE WEIGHT AT <=480. The source switches @privatediscoverytoursnz from
       500 to 600 below 480. Elementor's typography GROUP control is responsive
       only for font-size / line-height / letter-spacing / word-spacing —
       `font_weight` has no per-breakpoint field, so typography_font_weight_mobile
       is stored and silently never emitted. Same contract as the testimonials
       author name.
   (b) MOBILE TILE SCROLLER. At <=480 the tile row becomes a horizontal
       scroll-snap carousel. Elementor's Container `overflow` control offers only
       hidden/auto on BOTH axes, and there is no control at all for
       `scroll-snap-type` or for hiding the scrollbar. The row's five 166px
       tracks are a native grid control; only the scroll BEHAVIOUR is here.
   ========================================================================== */
@media (max-width: 480px) {
  body .s-insta .elementor-element.elementor-element-ight .elementor-heading-title { font-weight: 600; }
  body .s-insta .elementor-element.elementor-element-igrow {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body .s-insta .elementor-element.elementor-element-igrow::-webkit-scrollbar { display: none; }
  body .s-insta .elementor-element.elementor-element-igrow > .elementor-widget-image { scroll-snap-align: start; }
}


/* SECTION 08 — INSTAGRAM: the tile anchor. rung (d), justified.
   Each tile is an Image widget with its own Link control, which is the right
   native home for the href. Elementor wraps the <img> in an `<a>` that its own
   stylesheet leaves `display: inline-block`, so the img's `width: 100%` (set by
   the widget's Width control, and correctly emitted) resolves against a
   shrink-to-fit box — circular, so the browser falls back to the intrinsic
   width and the 266px tile rendered a 180px image. Elementor exposes no control
   for the anchor's display. This is the source's own `.image-strip__link
   { display: block }` declaration, one rule. */
body .s-insta .elementor-widget-image > .elementor-widget-container > a { display: block; width: 100%; }


/* CORRECTION to the rule above: Elementor 4.2.4 emits the Image widget WITHOUT
   a `.elementor-widget-container` wrapper — the <a> is a DIRECT child of
   `.elementor-widget-image` (verified in the rendered markup). The previous
   .elementor-kit-7 therefore never matched. Same justification, correct .elementor-kit-7. */
body .s-insta .elementor-widget-image a { display: block; width: 100%; }


/* SECTION 08 — INSTAGRAM: last-row tile spans below 1024. rung (d), justified.
   The source's tile row is `flex-wrap: wrap` with `flex: 1 1 calc(33.333% - 10px)`,
   so the items on the LAST row grow to share the full width: at <=1023 the two
   leftovers are 483px each (not 318.7), and at <=767 the single leftover is the
   whole 576px row. A flex container cannot be used here at all — this project's
   own scripts/validate_elementor_tree.py forbids the flex_wrap control outright
   (`flex_wrap_forbidden`) — so the row is a 6-track grid and the tiles carry
   column spans. Elementor exposes grid-item placement (grid_column / grid_row)
   on CONTAINERS only, and these tiles are Image WIDGETS, so the spans have no
   control to live in. Track maths: at 1000, t = (976 - 5*10)/6 = 154.33, so a
   2-track item is 318.67 and a 3-track item is 483 — the source's numbers exactly.
   The <=480 rule resets the spans because that breakpoint switches the row to
   five fixed 166px tracks (a native grid control). */
@media (max-width: 1023px) {
  body .s-insta .elementor-element.elementor-element-igrow > .elementor-widget-image { grid-column: span 2; }
  body .s-insta .elementor-element.elementor-element-igrow > .elementor-element.elementor-element-igi4,
  body .s-insta .elementor-element.elementor-element-igrow > .elementor-element.elementor-element-igi5 { grid-column: span 3; }
}
@media (max-width: 767px) {
  body .s-insta .elementor-element.elementor-element-igrow > .elementor-widget-image { grid-column: span 3; }
  body .s-insta .elementor-element.elementor-element-igrow > .elementor-element.elementor-element-igi5 { grid-column: span 6; }
}
@media (max-width: 480px) {
  body .s-insta .elementor-element.elementor-element-igrow > .elementor-widget-image,
  body .s-insta .elementor-element.elementor-element-igrow > .elementor-element.elementor-element-igi4,
  body .s-insta .elementor-element.elementor-element-igrow > .elementor-element.elementor-element-igi5 { grid-column: auto; }
}


/* ============================================================================
   SECTION 09 — CTA BANNER (.s-cta) — rung (d), justified.
   (a) RESIDUAL PADDING BANDS at 1366 and 1199 — same justification as the hero.
   (b) DECOR PHOTO SCALE 1200-1440. The source scales the four side photos to
       0.72 with `transform-origin: left top` / `right top` in that band only.
       Elementor's Transform section exposes rotate / scale / offset / flip but
       no transform-origin control, and the band is one Elementor slot has no
       breakpoint for anyway. Below 1200 the photos are hidden by native
       hide_<bp> flags, so this rule covers exactly the band the source does.
   (c) DESCRIPTION WEIGHT AT <=767. The source drops the paragraph from 500 to
       400 below 767; `font_weight` has no per-breakpoint field in Elementor's
       typography group (same contract as the testimonials author name).
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1366px) {
  body .elementor-element.elementor-element-cta.s-cta { --padding-top: 100px; --padding-bottom: 42px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  body .elementor-element.elementor-element-cta.s-cta { --padding-top: 88px; --padding-bottom: 40px; }
  body .s-cta .elementor-element.cta-photo { display: none; }
}
@media (min-width: 1200px) and (max-width: 1440px) {
  body .s-cta .elementor-element.cta-photo-lt { transform: rotate(1.5deg) scale(0.72); transform-origin: left top; }
  body .s-cta .elementor-element.cta-photo-lb { transform: rotate(-5.1deg) scaleX(-1) scale(0.72); transform-origin: left top; }
  body .s-cta .elementor-element.cta-photo-rt { transform: rotate(-2.5deg) scale(0.72); transform-origin: right top; }
  body .s-cta .elementor-element.cta-photo-rb { transform: rotate(6.6deg) scale(0.72); transform-origin: right top; }
}
@media (max-width: 767px) {
  body .s-cta .elementor-element.elementor-element-ctadesc { font-weight: 400; }
}


/* ============================================================================
   FOOTER (.s-footer, Theme Builder post 91) — rung (d), justified.
   (a) TOP LIGHT BAND. `linear-gradient(180deg, #F7F9F9 0px, #F7F9F9 343px,
       rgba(247,249,249,0) 345px)` — three stops at PIXEL positions. Elementor's
       gradient control carries two colour stops and its stop sliders are
       percentage-only, so neither the third stop nor the px positions fit.
   (b) PHOTO-BAND OVERLAY. The source's `.site-footer-rich__media::after` is a
       TWELVE-stop vertical ramp solved against the reference. The native
       background-overlay control is what makes that ::before element exist
       (and is set on the container); only its background-image is restated —
       exactly the hero and why-choose-us precedent.
   (c) SUBTITLE WEIGHT AT <=767. The source goes 500 -> 600; Elementor's
       typography group has no per-breakpoint font_weight.
   (d) CONTACT-TITLE NOWRAP AT >=1920. `white-space` has no control.
   (e) 1024-1199 COLUMN GAP. The source steps the link-column gap to 30/15 at
       1199, inside the laptop slot (1024-1440), which has no breakpoint left.
   (f) CONTACT COLUMN STACKS ITS ICON AT <=767. The source turns each contact
       row into a column (icon above text). Elementor's Icon List lays the icon
       inline with the text and exposes no direction control.
   (g) COPYRIGHT INLINE LINK COLOUR. The link inside the Text Editor takes the
       Kit's global link colour (#147182); the footer wants #1FB1CC. The Text
       Editor widget has no link-colour control.
   ========================================================================== */
body .s-footer {
  background-image: linear-gradient(180deg, #F7F9F9 0px, #F7F9F9 343px, rgba(247, 249, 249, 0) 345px);
}
body .s-footer .elementor-element.footer-media::before {
  background-image: linear-gradient(180deg,
    rgba(11, 62, 71, 0) 20%, rgba(11, 62, 71, 0.28) 50%, rgba(11, 62, 71, 0.34) 55%,
    rgba(11, 62, 71, 0.42) 59%, rgba(11, 62, 71, 0.51) 63%, rgba(11, 62, 71, 0.6) 66.5%,
    rgba(11, 62, 71, 0.72) 70.5%, rgba(11, 62, 71, 0.77) 74.5%, rgba(11, 62, 71, 0.82) 78%,
    rgba(11, 62, 71, 0.93) 85%, rgba(11, 62, 71, 0.99) 92%, #0B3E47 100%);
}
@media (min-width: 1920px) {
  body .s-footer .elementor-element.elementor-element-footctitle .elementor-heading-title { white-space: nowrap; }
}
@media (max-width: 767px) {
  body .s-footer .elementor-element.elementor-element-footcsub .elementor-heading-title { font-weight: 600; }
  body .s-footer .elementor-element.footer-col-contact .elementor-icon-list-item > a {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  body .s-footer .elementor-element.footer-col-contact .elementor-icon-list-item { justify-content: center; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  body .s-footer .elementor-element.elementor-element-footcols { --gap: 30px 15px; --row-gap: 30px; --column-gap: 15px; }
}
body .s-footer .elementor-element.elementor-element-footcopy a { color: #1FB1CC; text-decoration: none; }
body .s-footer .elementor-element.elementor-element-footcopy a:hover { text-decoration: underline; }/* End custom CSS */