/* Shared front-end and editor styles for the clean block theme.
   Every colour, font size, spacing and container width comes from theme.json
   (docs/brand/2026-11-02-keppel-explorer-design-guide.md in the client folder).
   Fixed values below are component geometry only: hero heights, slide positions,
   photo panel heights and the booking iframe height. */
:root {
  --ke-gutter: var(--wp--custom--layout--gutter);
  --ke-inner: var(--wp--custom--layout--inner);
  --ke-narrow: var(--wp--custom--layout--narrow);
  --ke-wide: var(--wp--style--global--wide-size);
  --ke-touch: var(--wp--custom--touch--target);
  --ke-s10: var(--wp--preset--spacing--10);
  --ke-s20: var(--wp--preset--spacing--20);
  --ke-s30: var(--wp--preset--spacing--30);
  --ke-s40: var(--wp--preset--spacing--40);
  --ke-s50: var(--wp--preset--spacing--50);
  --ke-s60: var(--wp--preset--spacing--60);
  --ke-s70: var(--wp--preset--spacing--70);
  --ke-s100: var(--wp--preset--spacing--100);
}
html { scroll-behavior: smooth; }
body { margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
:where(a, button, input, textarea, select, summary):focus-visible { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--contrast); outline-offset: 4px; }
/* Twenty Twenty-Five outlines anything with focus (:where(.wp-site-blocks :focus)), so a mouse click or tap left a box
   round links and buttons. Keep the outline for keyboard focus only (the :focus-visible rule above). */
.wp-site-blocks :focus:not(:focus-visible) { outline: none; }
.wp-site-blocks { padding-block: 0; }
.wp-site-blocks > header, .wp-site-blocks > footer, .wp-site-blocks > main { margin-block-start: 0; }
.wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }
.wp-block-post-content > .alignfull { padding-inline: var(--ke-gutter); }

/* Booking strip and header */
.ke-header { position: relative; z-index: 100; }
.ke-header-inner > .ke-header-main { margin-block-start: 0; }
.ke-booking-strip { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); padding: var(--ke-s20) var(--ke-gutter); border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line); }
.ke-booking-strip-inner { max-width: var(--ke-inner); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--ke-s20); }
.ke-booking-strip p { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast); }
.ke-booking-text { --ke-icon-colour: var(--wp--preset--color--pink); }
.ke-booking-strip .wp-block-buttons { margin: 0; flex-shrink: 0; }
.ke-booking-strip .wp-block-button__link { min-height: var(--ke-touch); }
.ke-header-main { background: var(--wp--preset--color--base); padding: var(--ke-s50) var(--ke-gutter) var(--ke-s30); border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line); }
.ke-home .ke-header-main, .ke-overlay-header .ke-header-main { position: absolute; width: 100%; background: transparent; border-bottom-color: transparent; }
.ke-header-row { max-width: var(--ke-inner); margin-inline: auto; display: flex; align-items: flex-start; gap: var(--ke-s20); }
.ke-logo { flex: 0 0 var(--wp--custom--logo--width); margin: 0; }
.ke-logo img { display: block; width: var(--wp--custom--logo--width); }
.ke-main-nav { margin: 0 0 0 auto; padding-top: 0; }
.ke-main-nav .wp-block-navigation__container { gap: var(--ke-s30); }
.ke-main-nav .wp-block-navigation-item__content { min-height: var(--ke-touch); display: flex; align-items: center; text-decoration: none; }
/* Desktop dropdown as the original (Fabienne, 5 Nov): a turquoise panel with white text; the item under the pointer
   or keyboard focus becomes a white box with pink text. White on turquoise is the owner's original colour (1.86:1). */
.wp-block-navigation.ke-main-nav .wp-block-navigation__submenu-container { padding: var(--ke-s20); border: 0; background: var(--wp--preset--color--turquoise); color: var(--wp--preset--color--base); }
.ke-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: var(--ke-s10) var(--ke-s20); color: var(--wp--preset--color--base); }
.ke-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) { background: var(--wp--preset--color--base); color: var(--wp--preset--color--pink); }
.ke-main-nav .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--contrast); min-width: var(--ke-touch); min-height: var(--ke-touch); justify-content: center; align-items: center; }
.ke-header-cta { margin: 0; flex-shrink: 0; }
/* Phone and tablet header Book Now (shown at 1100px and below). The row selector outranks core's
   "body .is-layout-flex { display: flex }" (0,1,1), which otherwise showed it on desktop. */
.ke-header-row > .ke-header-book { display: none; margin: 0; flex-shrink: 0; }
/* VIEW TOURS: original turquoise fill and white frame; text dark for contrast (9.71:1). */
.ke-header-cta .wp-block-button__link { font-size: var(--wp--custom--button--small); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: var(--wp--custom--button--small-padding); min-height: var(--ke-touch); border: var(--wp--custom--border--button) solid var(--wp--preset--color--base); border-radius: var(--wp--custom--radius--cta); background: var(--wp--preset--color--turquoise); color: var(--wp--preset--color--contrast); }
.ke-header-cta .wp-block-button__link:hover, .ke-header-cta .wp-block-button__link:focus-visible { background: var(--wp--preset--color--base); color: var(--wp--preset--color--pink-action); border-color: var(--wp--preset--color--pink-action); }

/* Archive: the sticky header turns turquoise. */
.ke-header .ke-header-main.is-stuck { position: fixed; inset: var(--wp-admin--admin-bar--height, 0px) 0 auto; padding-block: var(--ke-s10); background: var(--wp--preset--color--turquoise); }
.ke-header-main.is-stuck .ke-logo { flex-basis: var(--wp--custom--logo--stuck); }
.ke-header-main.is-stuck .ke-logo img { width: var(--wp--custom--logo--stuck); }

.ke-main-nav .ke-nav-booking { display: none; }
.ke-main-nav .is-menu-open .ke-nav-booking { display: block; margin-bottom: var(--ke-s20); }
.ke-main-nav .is-menu-open .ke-nav-booking a { width: 100%; padding: var(--ke-s10) var(--ke-s30); background: var(--wp--preset--color--pink-action); color: var(--wp--preset--color--base); justify-content: center; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }

/* Page shell */
/* Inner-page title band: the original light grey wave (page-title-bg.png, re-encoded) behind a near-black title.
   No background colour: the wave's transparent lower edge must show the white page.
   On the front end the header floats over it; home.js sets --ke-header-main-height, and the
   fallbacks are the measured header heights (151, 111 and 89px) for first paint and no-JS. */
:root { --ke-header-fallback: 151px; }
/* Desktop, where the dark menu floats over a photo (homepage slider, Tours hero, tour hero, Timetable strip): the top fades from white,
   continuing the booking strip, so the menu keeps its contrast on any photo or video frame. */
:root { --ke-header-fade: linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent), color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent) calc(var(--ke-header-main-height, var(--ke-header-fallback)) * 0.75), color-mix(in srgb, var(--wp--preset--color--base) 0%, transparent) calc(var(--ke-header-main-height, var(--ke-header-fallback)) + var(--ke-s70))); }
.ke-page-title { background: url(../images/page-title-wave.webp) center bottom / cover no-repeat; padding-block: var(--ke-s100); }
.ke-overlay-header .wp-block-post-content > .ke-page-title { padding-top: calc(var(--ke-header-main-height, var(--ke-header-fallback)) + var(--ke-s100)); }
.ke-page-title h1 { color: var(--wp--preset--color--contrast); font-weight: 400; margin: 0; }
.ke-main { padding-block: var(--ke-s60) var(--ke-s50); }
.ke-main-hero { padding-block: 0; }
/* Inner page titles keep the archive page-title size and weight until the photo title band is built. */
.ke-page-heading { margin-bottom: var(--ke-s40); font-size: var(--wp--preset--font-size--title); font-weight: 400; }
.ke-section { padding-block: var(--ke-s60) var(--ke-s50); }
.ke-section-center, .ke-hidden-treasures { text-align: center; }

/* Homepage slider */
.wp-block-post-content > .ke-home-slider { padding: 0; }
/* The hero fills the screen together with the booking strip and header above it (home.js measures that
   offset as --ke-hero-top; the fallbacks are the measured offsets for first paint). */
.ke-home-slider { --ke-hero-top-fallback: 93px; position: relative; height: calc(100vh - var(--ke-hero-top, var(--ke-hero-top-fallback))); height: calc(100svh - var(--ke-hero-top, var(--ke-hero-top-fallback))); min-height: 420px; overflow: hidden; }
.ke-home-slider > .ke-hero-slide { height: 100%; min-height: 100%; margin: 0; padding: 0; }
.ke-home-slider > .ke-hero-slide { display: none; }
.ke-home-slider > .ke-hero-slide.is-current { display: flex; }
/* !important: a hidden slide stays hidden even when .is-current or .is-leaving (display: flex) also matches it. */
.ke-home-slider .ke-hero-slide[hidden] { display: none !important; }
.ke-hero-slide .wp-block-cover__image-background { object-position: left center; }
.ke-hero-slide .wp-block-cover__inner-container { position: absolute; inset: 0; max-width: none; width: 100%; }
.ke-hero-copy { position: absolute; top: 53.8%; left: 3%; width: 94%; transform: translateY(-50%); text-align: center; }
.ke-hero-copy h1, .ke-hero-copy h2 { margin: 0; color: var(--wp--preset--color--base); line-height: var(--wp--custom--line-height--tight); }
.ke-hero-copy h2, .ke-hero-caption, .ke-hero-tagline { text-shadow: var(--wp--custom--shadow--text); }
.ke-hero-caption, .ke-hero-tagline { font-family: var(--wp--preset--font-family--caption); color: var(--wp--preset--color--base); }
.ke-hero-copy .ke-hero-caption { font-size: var(--wp--preset--font-size--caption-large); margin: var(--ke-s10) 0 0; line-height: var(--wp--custom--line-height--heading); }
.ke-hero-badge { position: absolute; top: 25.3%; left: 4%; width: 18.8%; max-width: 233px; margin: 0; }
.ke-hero-tagline { position: absolute; top: 85.6%; left: 55.3%; width: 30.4%; margin: 0; font-size: var(--wp--preset--font-size--caption); line-height: var(--wp--custom--line-height--tight); text-align: center; }
/* Slideshow controls (home.js adds them): previous, pause and next stay for WCAG 2.2.2, kept small and discreet
   (Ollie, 5 Nov): 40px round icon buttons on a translucent white disc, fully white on hover and keyboard focus.
   40px clears the 24px target minimum (WCAG 2.5.8). The focus ring is dark between two white rings, so it shows on any photo. */
.ke-slider-controls { position: absolute; z-index: 5; bottom: var(--ke-s20); left: var(--ke-s20); display: flex; gap: var(--ke-s10); }
.ke-slider-controls button { display: grid; place-items: center; inline-size: var(--wp--custom--slider--control); block-size: var(--wp--custom--slider--control); padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent); color: var(--wp--preset--color--contrast); cursor: pointer; transition: background-color .2s; }
.ke-slider-controls button:is(:hover, :focus-visible) { background: var(--wp--preset--color--base); }
.ke-slider-controls button:focus-visible { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--contrast); outline-offset: 2px; box-shadow: 0 0 0 calc(var(--wp--custom--border--focus) + 4px) var(--wp--preset--color--base); }
.ke-slider-controls button::before { content: ""; inline-size: 0.875rem; block-size: 0.875rem; background: currentColor; }
.ke-slider-controls :is(.ke-slider-prev, .ke-slider-next)::before { -webkit-mask: url(../icons/fa-angle-right.svg) center / contain no-repeat; mask: url(../icons/fa-angle-right.svg) center / contain no-repeat; }
.ke-slider-controls .ke-slider-prev::before { transform: scaleX(-1); }
.ke-slider-controls .ke-slider-toggle::before { inline-size: 0.75rem; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.ke-slider-controls .ke-slider-toggle.is-paused::before { margin-inline-start: 2px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
@media (prefers-reduced-motion: reduce) { .ke-slider-controls button { transition: none; } }
/* Forced colours replace backgrounds, which would blank the masked icons: draw them in the button text colour. */
@media (forced-colors: active) { .ke-slider-controls button::before { forced-color-adjust: none; background-color: ButtonText; } }
/* Slow zoom and crossfade, as the original Revolution Slider (home.js sets each slide's zoom and timing).
   The slides stack once the script runs; the outgoing slide stays underneath while the next fades in. */
.ke-home-slider.is-ready > .ke-hero-slide { position: absolute; inset: 0; }
.ke-home-slider.is-ready > .ke-hero-slide.is-leaving { display: flex; z-index: 1; }
.ke-home-slider.is-ready > .ke-hero-slide.is-current { z-index: 2; }
.ke-home-slider.has-changed > .ke-hero-slide.is-current { animation: ke-slide-in 600ms ease-out both; }
.ke-home-slider.is-ready > .ke-hero-slide:is(.is-current, .is-leaving) .wp-block-cover__image-background { transform-origin: center; animation: ke-slow-zoom var(--ke-zoom-ms, 10000ms) linear both; }
/* Pause freezes only the zoom (same specificity as the zoom rule, placed after it): fades and entrances complete. */
.ke-home-slider.is-ready.is-paused > .ke-hero-slide:is(.is-current, .is-leaving) .wp-block-cover__image-background { animation-play-state: paused; }
/* Slide elements enter as on the original (archived Revolution Slider layers, timed from a frame-by-frame
   recording of the archive): 600ms after the slide starts, the title drops from the top over 1.5s, the
   captions slide in from the side over 2s or grow from 80% over 2.5s, and all of it fades out before the next slide.
   Entrances fill backwards only, so the fade-out's opacity applies once they finish. */
.ke-home-slider.is-ready > .ke-hero-slide.is-current .ke-hero-copy h2 { animation: ke-drop 1500ms cubic-bezier(0.215, 0.61, 0.355, 1) 600ms backwards; }
.ke-home-slider.is-ready > .ke-hero-slide:nth-child(1 of .ke-hero-slide).is-current .ke-hero-caption { animation: ke-from-left 2000ms cubic-bezier(0.215, 0.61, 0.355, 1) 600ms backwards; }
.ke-home-slider.is-ready > .ke-hero-slide:nth-child(1 of .ke-hero-slide).is-current .ke-hero-tagline, .ke-home-slider.is-ready > .ke-hero-slide:nth-child(2 of .ke-hero-slide).is-current .ke-hero-caption { animation: ke-grow-in 2500ms cubic-bezier(0.23, 1, 0.32, 1) 600ms backwards; }
.ke-home-slider.is-ready > .ke-hero-slide:nth-child(3 of .ke-hero-slide).is-current .ke-hero-caption { animation: ke-from-right 2000ms cubic-bezier(0.215, 0.61, 0.355, 1) 600ms backwards; }
.ke-home-slider.is-ready > .ke-hero-slide :is(.ke-hero-copy, .ke-hero-tagline, .ke-hero-badge) { transition: opacity 400ms ease; }
.ke-home-slider.is-ready > .ke-hero-slide:is(.is-ending, .is-leaving) :is(.ke-hero-copy, .ke-hero-tagline, .ke-hero-badge) { opacity: 0; }
@keyframes ke-drop { from { transform: translateY(-60vh); } to { transform: none; } }
@keyframes ke-from-left { from { transform: translateX(-100vw); } to { transform: none; } }
@keyframes ke-from-right { from { transform: translateX(100vw); } to { transform: none; } }
@keyframes ke-grow-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes ke-slide-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ke-slow-zoom { from { transform: scale(1); } to { transform: scale(var(--ke-zoom-end, 1.2)); } }
@media (prefers-reduced-motion: reduce) {
  /* !important: the entrance rules are more specific, and a media query adds no specificity. */
  .ke-home-slider.is-ready > .ke-hero-slide, .ke-home-slider.is-ready > .ke-hero-slide :is(.wp-block-cover__image-background, h2, .ke-hero-caption, .ke-hero-tagline) { animation: none !important; }
}

/* Introduction and why-us */
.wp-block-post-content > .ke-home-introduction { padding: 0; }
/* "As seen on" logos: one even row, each logo sized by its proportions so all six carry the same visual
   weight (wide wordmarks shorter, compact marks taller). --h is the height in px at 1440px wide; logos
   shrink with the viewport to 60% of it. Phones: two columns. */
.ke-as-seen-logos { max-width: var(--ke-inner); margin: 0 auto; padding-block: var(--ke-s40); gap: var(--ke-s30) var(--ke-s40); }
.ke-as-seen-logos > .wp-block-image { margin: 0; flex: none; }
.ke-as-seen-logos .wp-block-image img { display: block; width: auto; max-width: 100%; height: clamp(calc(var(--h) * 0.6px), calc(var(--h) * 0.0694vw), calc(var(--h) * 1px)); object-fit: contain; }
.ke-logo-7-news { --h: 46; }
.ke-logo-9-news { --h: 32; }
.ke-logo-qld-weekender { --h: 72; }
.ke-logo-getaway { --h: 46; }
.ke-logo-creek-to-coast { --h: 60; }
.ke-logo-the-weekend-australian { --h: 26; }
@media (max-width: 600px) {
  .ke-as-seen-logos.is-layout-flex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; align-items: center; }
}
.ke-vip-copy { max-width: var(--ke-wide); margin: var(--ke-s60) auto var(--ke-s10); padding-inline: var(--ke-s100) 0; }
.ke-vip-copy .ke-intro-kicker { color: var(--wp--preset--color--pink-action); font-size: var(--wp--preset--font-size--medium); margin: 0; }
.ke-vip-copy .ke-intro-lead { color: var(--wp--preset--color--pink-action); font-size: var(--wp--preset--font-size--display-small); font-weight: 500; line-height: var(--wp--custom--line-height--heading); margin-top: var(--ke-s10); }
.ke-vip-copy .ke-vip-heading { font-size: var(--wp--preset--font-size--display); margin-block: var(--ke-s30) var(--ke-s20); }
.ke-vip-copy > p { margin-block: 0 var(--ke-s20); }
/* Button pair (A9): pink VIEW TIMETABLE is the theme button; VIEW TOURS is the original turquoise with dark text (9.71:1). */
.ke-vip-copy .wp-block-buttons { padding: var(--ke-s20) var(--ke-s100) 0; gap: var(--ke-s10); }
.ke-button-turquoise .wp-block-button__link { background: var(--wp--preset--color--turquoise); color: var(--wp--preset--color--contrast); }
.ke-button-turquoise .wp-block-button__link:is(:hover, :focus-visible) { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.ke-why-columns { max-width: var(--ke-wide); margin: 0 auto; gap: 0; }
.ke-why-copy { padding: var(--ke-s70) var(--ke-s40) var(--ke-s40); }
.ke-why-copy > h2 { color: var(--wp--preset--color--turquoise-ink); font-size: var(--wp--preset--font-size--display-small); font-weight: 500; margin: 0 0 var(--ke-s30); }
/* Icon features (A17): a 30px turquoise icon beside the title and copy. The icon is decorative, so it keeps the original turquoise. */
.ke-experience-feature { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--ke-s30); margin: var(--ke-s50) var(--ke-s50) 0; --ke-icon-size: 1.875rem; --ke-icon-gap: 0; --ke-icon-colour: var(--wp--preset--color--turquoise); }
.ke-experience-feature::before { grid-row: 1 / span 2; }
.ke-experience-feature > * { grid-column: 2; }
.ke-experience-feature.ke-experience-feature > h3 { font-size: var(--wp--preset--font-size--large); font-weight: 500; line-height: var(--wp--custom--line-height--heading); color: var(--wp--preset--color--contrast); margin: 0 0 var(--ke-s10); }
.ke-experience-feature.ke-experience-feature > p { margin: 0; font-size: var(--wp--preset--font-size--small); }
.ke-why-columns .wp-block-image { margin: 0; }
.ke-why-columns img { width: 100%; display: block; }

/* Tour band and card */
.wp-block-post-content > .ke-tour-band { padding: 0; }
/* Home tour band (A10 to A12): photo half beside a white half with the title row and the compact tour card. */
.ke-tour-columns { margin: 0; gap: 0; }
.ke-tour-columns > .wp-block-column { min-width: 0; }
.ke-tour-photo-col .wp-block-cover { height: 100%; min-height: 360px; }
.ke-tour-list-col { padding: var(--ke-s30) var(--ke-s30) var(--ke-s50); }
.ke-tour-band-head { margin-bottom: var(--ke-s50); gap: 0 var(--ke-s50); align-items: baseline; }
.ke-tour-band-head > * { margin: 0; }
.ke-tour-band-head h2 { font-size: var(--wp--preset--font-size--section); font-weight: 500; color: var(--wp--preset--color--contrast); --ke-icon-gap: 0.7em; }
/* "View All Tours": brand pink (the original coral replaced, Fabienne 5 Nov: no red). */
.ke-view-all a { display: inline-flex; align-items: center; min-height: var(--ke-touch); color: var(--wp--preset--color--pink-action); text-decoration: none; }
.ke-view-all a:is(:hover, :focus-visible) { text-decoration: underline; }
/* Home compact card (A10, A11): the Tours card's bound blocks, with a 15px weight 900 title and a 158px price column. */
.ke-tour-card-compact .wp-block-post-featured-image img { aspect-ratio: 660 / 424; object-fit: cover; }
.ke-tour-card-compact .ke-tour-card-body { padding: var(--ke-s40) 0 0; }
.ke-tour-card-compact .ke-tour-card-copy { padding: 0; }
.ke-tour-card-compact .ke-tour-card-copy h3 { font-size: var(--wp--preset--font-size--body); font-weight: 900; line-height: var(--wp--custom--line-height--heading); margin: 0 0 var(--ke-s20); }
.ke-tour-card-compact .ke-tour-card-copy h3 a { color: var(--wp--preset--color--contrast); }
/* The card sits in a half-width column, so its price column follows the column width, not the viewport:
   stacked until the column has room for the copy beside the 158px price column. */
.ke-tour-list-col { container-type: inline-size; }
.ke-tour-card-compact .ke-tour-card-body { grid-template-columns: minmax(0, 1fr); }
.ke-tour-card-compact .ke-tour-price-col { border-left: 0; padding-left: 0; }
@container (min-width: 600px) {
  .ke-tour-card-compact .ke-tour-card-body { grid-template-columns: minmax(0, 1fr) 158px; }
  .ke-tour-card-compact .ke-tour-price-col { border-left: var(--wp--custom--border--button) solid var(--wp--preset--color--line); padding-left: var(--ke-s20); }
}
.ke-tour-card { background: var(--wp--preset--color--base); color: var(--wp--preset--color--body-copy); }
.ke-tour-card > * { margin-block: 0; }
.ke-tour-card .wp-block-image { margin: 0; }
.ke-tour-card img { display: block; width: 100%; }
.ke-tour-ribbon { background: var(--wp--preset--color--pink-action); color: var(--wp--preset--color--base); padding: var(--ke-s10) var(--ke-s20); font-size: var(--wp--preset--font-size--small); }
.ke-tour-card-copy { padding: var(--ke-s30); }
.ke-tour-card-copy h3 { margin: 0 0 var(--ke-s20); text-transform: uppercase; font-size: var(--wp--preset--font-size--x-large); }
.ke-tour-price { font-size: var(--wp--preset--font-size--large); }
/* Tour fields from ACF block bindings: label + value groups, price group, reviews. Empty bound
   paragraphs are removed in PHP, so a group without its value hides itself. */
.ke-fact-group { gap: 0.3em; align-items: baseline; }
.ke-fact-group > p, .ke-tour-price > p { margin: 0; }
.ke-price-value { font-weight: 800; }
.ke-price-from { color: var(--wp--preset--color--body-copy); font-size: var(--wp--preset--font-size--body); font-weight: 400; }
.ke-tour-reviews::before { content: "("; }
.ke-tour-reviews::after { content: " Reviews)"; }
/* Tour cards drawn from tour posts (Query Loop). Empty facts leave an empty paragraph. */
.ke-tour-query .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.ke-tour-card p:empty:not(.ke-stars) { display: none; }
.ke-tour-card-copy .ke-tour-fact { margin-block: 0 var(--ke-s10); }
.ke-tour-card-copy .ke-tour-price { display: flex; gap: 0.3em; align-items: baseline; color: var(--wp--preset--color--pink); }
.ke-tour-card .ke-tour-ribbon { display: block; }
.ke-tour-card .wp-block-post-featured-image { margin: 0; }
.ke-tour-card-copy > * { margin-block: 0 var(--ke-s10); }
.ke-tour-card-copy h3 a { color: inherit; text-decoration: none; }
.ke-tour-card-copy .wp-block-read-more { display: inline-flex; align-items: center; min-height: var(--ke-touch); }
.ke-tour-list-full .wp-block-post-template { display: grid; gap: var(--ke-s30); }
.ke-tour-list-full .wp-block-post-template > li { margin: 0; }
.ke-tour-list-full .wp-block-query-pagination { margin-top: var(--ke-s50); }
.ke-tour-list-full .wp-block-query-pagination a, .ke-tour-list .wp-block-query-pagination a { display: inline-flex; align-items: center; min-height: var(--ke-touch); min-width: var(--ke-touch); justify-content: center; }
.ke-tour-card-full { border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--pale); }

/* Tour lists */
.ke-tour-list .wp-block-query-pagination { margin-top: var(--ke-s50); }
.ke-tour-list .ke-tour-card { height: 100%; border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--pale); }
.ke-tour-list .wp-block-post-title { font-size: var(--wp--preset--font-size--x-large); text-transform: uppercase; }

/* Single tour: a full-screen hero (the tour video over the featured image) with the title, rating and facts,
   a slim section nav that sticks under the header, then the body beside the booking box (inventory A14,
   reworked 4 Nov). The booking box comes first in the content, so on phones the Rezdy calendar sits straight
   after the hero; from 1000px it moves to the right-hand column. Measured widths: 807px body, 383px sidebar. */
.ke-tour-page { padding-bottom: var(--ke-s70); }
.ke-tour-page p:empty:not(.ke-stars) { display: none; }
/* Anchored sections and keyboard focus stop below the stuck header and the section nav (home.js measures both; the
   fallbacks are the measured heights). FAQ items keep no margin of their own here, or the offset would count twice. */
html:has(.ke-tour-page > .ke-tour-tabs) { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ke-header-stuck-height, 70px) + var(--ke-tour-nav-height, 64px) + var(--ke-s20)); }
.ke-tour-page :is(.rank-math-block, .wp-block-rank-math-faq-block) .rank-math-list-item { scroll-margin-top: 0; }

/* Hero: same height rule as the homepage (hero, booking strip and header fill the screen; home.js measures the offset). */
/* A minimum, not a fixed height: a long title, a narrow screen or zoomed text makes the hero taller instead of clipping it.
   The contrast background stands in for a missing featured image. */
.ke-tour-page > .wp-block-cover.ke-tour-hero { --ke-hero-top-fallback: 93px; --ke-hero-floor: 560px; min-height: max(var(--ke-hero-floor), calc(100vh - var(--ke-hero-top, var(--ke-hero-top-fallback)))); min-height: max(var(--ke-hero-floor), calc(100svh - var(--ke-hero-top, var(--ke-hero-top-fallback)))); margin: 0; background-color: var(--wp--preset--color--contrast); padding: var(--ke-s30) var(--ke-gutter) var(--ke-s60); align-items: flex-end; overflow: hidden; }
/* A dark gradient behind the copy keeps white text readable on any video frame; the top stays clear for the header. */
.wp-block-cover.ke-tour-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--contrast) 88%, transparent), color-mix(in srgb, var(--wp--preset--color--contrast) 72%, transparent) 42%, color-mix(in srgb, var(--wp--preset--color--contrast) 0%, transparent) 80%); }
/* Desktop, where the header floats over the video: the shared header fade (measured 2.3:1 on a dark frame without it). */
@media (min-width: 1101px) {
  /* A tall hero (long title, zoomed text) keeps its copy clear of the floating header. */
  .ke-tour-page > .wp-block-cover.ke-tour-hero { padding-top: calc(var(--ke-header-main-height, var(--ke-header-fallback)) + var(--ke-s30)); }
  .wp-block-cover.ke-tour-hero::before { background:
    var(--ke-header-fade),
    linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--contrast) 88%, transparent), color-mix(in srgb, var(--wp--preset--color--contrast) 72%, transparent) 42%, color-mix(in srgb, var(--wp--preset--color--contrast) 0%, transparent) 80%); }
}
.wp-block-cover.ke-tour-hero .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; max-width: var(--ke-inner); margin-inline: auto; color: var(--wp--preset--color--base); }
.ke-tour-hero-copy { max-width: 60rem; }
.ke-tour-hero-copy > * { margin-block: 0; }
.ke-tour-hero .wp-block-post-title { margin: 0; color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--display); font-weight: 700; line-height: var(--wp--custom--line-height--heading); text-shadow: var(--wp--custom--shadow--text); text-wrap: balance; }
.ke-tour-rating { gap: var(--ke-s20); align-items: center; }
.ke-tour-rating > p { margin: 0; }
.ke-tour-rating .ke-stars { font-size: var(--wp--preset--font-size--medium); }
.ke-tour-hero-copy > .ke-tour-rating { margin-top: var(--ke-s20); }
.ke-tour-hero .ke-tour-reviews { color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--small); text-shadow: var(--wp--custom--shadow--text); }
.ke-tour-hero-copy > .ke-tour-facts { display: flex; flex-wrap: wrap; gap: var(--ke-s10) var(--ke-s30); margin-top: var(--ke-s30); padding-top: var(--ke-s20); border-top: var(--wp--custom--border--hairline) solid color-mix(in srgb, var(--wp--preset--color--base) 35%, transparent); --ke-icon-size: 1.375rem; --ke-icon-gap: var(--ke-s10); --ke-icon-colour: var(--wp--preset--color--turquoise); }
.ke-tour-facts > .ke-tour-fact { display: flex; align-items: center; margin: 0; color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--medium); font-weight: 500; text-shadow: var(--wp--custom--shadow--text); }
.ke-tour-facts > .ke-tour-fact::before { flex: none; margin-inline-end: var(--ke-s10); }
.ke-tour-facts .ke-fact-group { gap: 0.3em; }
.ke-tour-facts .ke-fact-group > p { margin: 0; }
/* Background video (home.js adds it): cover-cropped 16:9, 70px extra top and bottom hide YouTube's title and logo bars.
   It fades in over the featured image once it plays. */
.ke-tour-hero .ke-hero-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; container-type: size; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.ke-tour-hero.is-playing .ke-hero-video { opacity: 1; }
.ke-hero-video iframe { --ke-video-h: calc(max(100cqh, 56.25cqw) + 140px); position: absolute; top: 50%; left: 50%; width: calc(var(--ke-video-h) * 16 / 9); height: var(--ke-video-h); max-width: none; border: 0; transform: translate(-50%, -50%); }
.ke-hero-video-toggle { position: absolute; z-index: 3; right: max(var(--ke-gutter), calc((100% - var(--ke-inner)) / 2)); bottom: var(--ke-s60); display: inline-flex; align-items: center; gap: var(--ke-s10); min-width: var(--ke-touch); min-height: var(--ke-touch); padding: var(--ke-s10) var(--ke-s20); border: 0; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); font: inherit; font-size: var(--wp--preset--font-size--small); font-weight: 600; cursor: pointer; }
.ke-hero-video-toggle[hidden] { display: none; }
.ke-hero-video-toggle::before { content: ""; inline-size: 0.75rem; block-size: 0.875rem; background: currentColor; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.ke-hero-video-toggle.is-paused::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ke-hero-video-toggle:hover { background: var(--wp--preset--color--turquoise); }
/* The ring sits on the dark gradient: white, as on the other dark surfaces. */
.ke-hero-video-toggle:focus-visible { outline-color: var(--wp--preset--color--base); }
@media (prefers-reduced-motion: reduce) { .ke-tour-hero .ke-hero-video { transition: none; } }

/* Section nav: a slim white bar under the hero that sticks below the header. The section being read is a
   turquoise pill (dark text, 9.71:1); Book now jumps to the booking box. Phones scroll it sideways. */
.ke-tour-page > .ke-tour-tabs { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ke-sticky-top, 0px)); z-index: 50; margin: 0; padding-inline: var(--ke-gutter); background: var(--wp--preset--color--base); border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line); transition: box-shadow .2s; }
.ke-tour-tabs.is-stuck { box-shadow: var(--wp--custom--shadow--box); }
.ke-tour-tabs-inner { max-width: var(--ke-inner); margin-inline: auto; display: flex; align-items: center; gap: var(--ke-s20); }
.ke-tour-tabs-inner > * { margin-block: 0; }
/* The list pads its links so the 4px focus outline is not clipped by the sideways scroll. */
.ke-tour-tab-list { position: relative; flex: 1 1 auto; min-width: 0; display: flex; gap: var(--ke-s10); margin: 0 0 0 calc(var(--ke-s10) * -1); padding: var(--ke-s10); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: var(--ke-s10); scrollbar-width: none; }
.ke-tour-tab-list::-webkit-scrollbar { display: none; }
.ke-tour-tab-list.has-more-end { -webkit-mask-image: linear-gradient(to right, var(--wp--preset--color--contrast) calc(100% - var(--ke-s50)), transparent); mask-image: linear-gradient(to right, var(--wp--preset--color--contrast) calc(100% - var(--ke-s50)), transparent); }
.ke-tour-tab-list.has-more-start { -webkit-mask-image: linear-gradient(to left, var(--wp--preset--color--contrast) calc(100% - var(--ke-s50)), transparent); mask-image: linear-gradient(to left, var(--wp--preset--color--contrast) calc(100% - var(--ke-s50)), transparent); }
.ke-tour-tab-list.has-more-start.has-more-end { -webkit-mask-image: linear-gradient(to right, transparent, var(--wp--preset--color--contrast) var(--ke-s50) calc(100% - var(--ke-s50)), transparent); mask-image: linear-gradient(to right, transparent, var(--wp--preset--color--contrast) var(--ke-s50) calc(100% - var(--ke-s50)), transparent); }
.ke-tour-tab-list li { flex: none; margin: 0; }
.ke-tour-tab-list a { display: flex; align-items: center; min-height: var(--ke-touch); padding: 0 var(--ke-s20); border-radius: var(--wp--custom--radius--pill); color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .2s; }
.ke-tour-tab-list a:hover { background: var(--wp--preset--color--pale); }
.ke-tour-tab-list a[aria-current] { background: var(--wp--preset--color--turquoise); color: var(--wp--preset--color--contrast); }
.ke-tour-tabs-book { flex: none; }
.ke-tour-tabs-book .wp-block-button__link { display: inline-flex; align-items: center; min-height: var(--ke-touch); padding: 0 var(--ke-s30); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ke-tour-tabs, .ke-tour-tab-list a { transition: none; } }

.ke-tour-content { max-width: var(--ke-inner); margin-inline: auto; padding-inline: var(--ke-gutter); box-sizing: content-box; }
.ke-tour-content { padding-top: var(--ke-s60); }
.ke-tour-content > * { margin-block: 0; }

/* Photos: the native Gallery block (Expand on click), 10px apart, rounded as the original gallery. */
/* Doubled class: core prints its own gallery gap rule (.wp-block-gallery.wp-block-gallery-1) after this file. */
.wp-block-gallery.ke-tour-photos.ke-tour-photos { --wp--style--unstable-gallery-gap: var(--ke-s10); gap: var(--ke-s10); }
/* Laid out as the original gallery: the first photo large with a 2 x 2 block beside it; the original kept its other
   six photos in the lightbox only, here they follow three across (12-column grid: 6, then 3 each, then 4 each).
   Phones: two across under a full-width first photo. The first photo takes its height from the grid (contain: size),
   whatever its own proportions. Core sizes gallery images with :not(#individual-image)
   widths, so these rules carry an ID-level :not() to take over. */
.wp-block-gallery.ke-tour-photos.has-nested-images { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.wp-block-gallery.ke-tour-photos.has-nested-images figure.wp-block-image:not(#ke-tour-photo) { grid-column: span 3; width: auto; height: auto; min-height: 0; margin: 0; aspect-ratio: 1; }
.wp-block-gallery.ke-tour-photos.has-nested-images figure.wp-block-image:not(#ke-tour-photo):first-child { grid-column: span 6; grid-row: span 2; aspect-ratio: auto; contain: size; }
.wp-block-gallery.ke-tour-photos.has-nested-images figure.wp-block-image:not(#ke-tour-photo):nth-child(n + 6) { grid-column: span 4; aspect-ratio: 4 / 3; }
.wp-block-gallery.ke-tour-photos.has-nested-images figure.wp-block-image:not(#ke-tour-photo) img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--wp--custom--radius--box); }
@media (max-width: 600px) {
  .wp-block-gallery.ke-tour-photos.has-nested-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-block-gallery.ke-tour-photos.has-nested-images figure.wp-block-image:not(#ke-tour-photo):is(*, :nth-child(n + 6)) { grid-column: auto; aspect-ratio: 1; }
  .wp-block-gallery.ke-tour-photos.has-nested-images figure.wp-block-image:not(#ke-tour-photo):first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}

/* Body and sidebar */
.ke-tour-layout { display: grid; gap: var(--ke-s50); }
.ke-tour-layout > *, .ke-tour-main > *, .ke-tour-section > * { margin-block: 0; }
.ke-tour-section > * + * { margin-top: var(--ke-s20); }
.ke-tour-section .ke-tour-section-title { margin-bottom: var(--ke-s30); font-size: var(--wp--preset--font-size--section); font-weight: 400; color: var(--wp--preset--color--contrast); }
.ke-tour-section > p { font-size: var(--wp--preset--font-size--large); }
.ke-tour-lead { font-size: var(--wp--preset--font-size--section); font-weight: 400; color: var(--wp--preset--color--contrast); --ke-icon-size: 1.15em; --ke-icon-gap: 0.5em; }
.ke-tour-section .ke-tour-kicker { margin-top: var(--ke-s10); font-size: var(--wp--preset--font-size--medium); font-style: italic; }
.ke-tour-section > .ke-tour-kicker + p { margin-top: var(--ke-s30); }
.ke-tour-divider.wp-block-separator { margin-block: var(--ke-s50); border: 0; border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line); opacity: 1; }
.ke-tour-info-row { display: grid; gap: var(--ke-s10) var(--ke-s20); }
.ke-tour-section > .ke-tour-info-row { margin-top: var(--ke-s50); }
.ke-tour-info-row > * { margin: 0; }
.ke-tour-info-label { color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--large); font-weight: 500; }
.ke-tour-icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ke-s10); color: var(--wp--preset--color--body-copy); font-size: var(--wp--preset--font-size--large); --ke-icon-size: 1.125rem; --ke-icon-gap: var(--ke-s10); --ke-icon-colour: var(--wp--preset--color--contrast); }
.ke-tour-icon-list li { display: grid; grid-template-columns: var(--ke-icon-size) minmax(0, 1fr); column-gap: var(--ke-s10); }
.ke-tour-icon-list li::before { margin: 0.3em 0 0; }
.ke-tour-expect-list { --ke-icon-size: 0.9375rem; }
.ke-tour-section > .ke-tour-expect-list { margin-top: var(--ke-s30); }
.ke-tour-main > .ke-tour-section + .ke-tour-section { margin-top: var(--ke-s70); }

/* Itinerary toggles: Montserrat titles, blue when open (4.52:1), hairline dividers. */
.ke-itinerary-item.wp-block-details { border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line); padding-block: var(--ke-s10); }
.ke-tour-section > .ke-itinerary-item + .ke-itinerary-item { margin-top: 0; }
.ke-itinerary-item summary { display: flex; align-items: center; min-height: var(--ke-touch); cursor: pointer; list-style: none; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); font-weight: 700; color: var(--wp--preset--color--contrast); }
.ke-itinerary-item summary::-webkit-details-marker { display: none; }
.ke-itinerary-item[open] summary { color: var(--wp--preset--color--blue); }
.ke-itinerary-item > p { margin: var(--ke-s10) 0 var(--ke-s20); font-size: var(--wp--preset--font-size--body); }
.ke-tour-section .wp-block-image { margin: 0; }
.ke-tour-section .wp-block-image img { display: block; width: 100%; }

/* Tour and FAQs page toggles (A15): Montserrat questions, plus and minus, the open answer in a white box with a soft shadow. */
:is(.ke-tour-faq, .ke-faq-cols):is(.ke-tour-faq, .ke-faq-cols) .rank-math-list-item { padding: var(--ke-s20) var(--ke-s30); border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line); }
:is(.ke-tour-faq, .ke-faq-cols):is(.ke-tour-faq, .ke-faq-cols) .rank-math-list-item:has([aria-expanded="true"]) { padding: var(--ke-s20) var(--ke-s40); border-bottom-color: transparent; border-radius: var(--wp--custom--radius--box); box-shadow: var(--wp--custom--shadow--box); margin-bottom: var(--ke-s20); }
:is(.ke-tour-faq, .ke-faq-cols):is(.ke-tour-faq, .ke-faq-cols) .rank-math-question { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); font-weight: 700; }
:is(.ke-tour-faq, .ke-faq-cols):is(.ke-tour-faq, .ke-faq-cols) .ke-faq-toggle { padding-block: var(--ke-s10); }
:is(.ke-tour-faq, .ke-faq-cols):is(.ke-tour-faq, .ke-faq-cols) .ke-faq-toggle::after { content: ""; inline-size: 1rem; block-size: 1rem; background: var(--wp--preset--color--contrast); -webkit-mask: url(../icons/fa-plus.svg) center / contain no-repeat; mask: url(../icons/fa-plus.svg) center / contain no-repeat; }
:is(.ke-tour-faq, .ke-faq-cols):is(.ke-tour-faq, .ke-faq-cols) .ke-faq-toggle[aria-expanded="true"]::after { content: ""; -webkit-mask-image: url(../icons/fa-minus.svg); mask-image: url(../icons/fa-minus.svg); }
:is(.ke-tour-faq, .ke-faq-cols):is(.ke-tour-faq, .ke-faq-cols) .rank-math-answer { color: var(--wp--preset--color--body-copy); }

/* Award badges, four across. */
.ke-tour-main > .ke-tour-awards { margin-top: var(--ke-s50); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ke-s30); align-items: center; }
.ke-tour-awards .wp-block-image { margin: 0; text-align: center; }
.ke-tour-awards img { display: inline-block; max-height: 150px; width: auto; }

/* Booking box: MOST POPULAR, the price and the Rezdy calendar; Book With Confidence below. */
.ke-booking-box { background: var(--wp--preset--color--base); border-radius: var(--wp--custom--radius--box); box-shadow: var(--wp--custom--shadow--box); padding: var(--ke-s30); }
.ke-booking-box > * { margin-block: 0; }
.ke-booking-box > * + * { margin-top: var(--ke-s10); }
.ke-booking-box > .screen-reader-text + * { margin-top: 0; }
.ke-booking-ribbon { color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--medium); font-weight: 600; text-transform: uppercase; }
.ke-booking-box .ke-tour-price { display: flex; align-items: baseline; gap: var(--ke-s10); color: var(--wp--preset--color--contrast); --ke-icon-size: 1.4375rem; --ke-icon-gap: var(--ke-s10); }
.ke-booking-box .ke-tour-price::before { align-self: center; }
.ke-booking-box .ke-price-from { color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--small); font-weight: 500; }
.ke-booking-box .ke-price-value { font-size: var(--wp--preset--font-size--display-small); }
/* Rezdy's own code is 300px wide; it centres in the box and never overflows a narrow phone. */
.ke-booking-box iframe.rezdy { display: block; max-width: 100%; margin: var(--ke-s20) auto 0; border: 0; }
.ke-tour-aside > * + * { margin-top: var(--ke-s40); }

/* Reviews: the count and stars between 2px rules, then each review beside its reviewer. */
.ke-tour-content > .ke-tour-reviews-band { max-width: var(--ke-narrow); margin: var(--ke-s70) auto 0; }
.ke-tour-reviews-band > * { margin-block: 0; }
.ke-reviews-head { gap: var(--ke-s20); align-items: center; padding-block: var(--ke-s30); margin-bottom: var(--ke-s40); border-block: var(--wp--custom--border--button) solid var(--wp--preset--color--line); }
.ke-reviews-head > p { margin: 0; }
.ke-reviews-total { color: var(--wp--preset--color--contrast); font-weight: 700; }
.ke-reviews-total::after { content: " Reviews"; }
.ke-reviews-head .ke-stars { font-size: var(--wp--preset--font-size--medium); }
.ke-review { display: grid; gap: var(--ke-s10) var(--ke-s40); margin-bottom: var(--ke-s30); }
.ke-review > * { margin: 0; }
.ke-review-user { text-align: center; }
.ke-review-user > * { margin: 0; }
.ke-review-name { display: flex; flex-direction: column; align-items: center; font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--preset--color--contrast); --ke-icon-size: 1.75rem; --ke-icon-gap: 0; --ke-icon-colour: var(--wp--preset--color--base); }
/* Avatar: a grey disc with a white person, as the original's default avatar. */
.ke-review-name::before { box-sizing: content-box; padding: 1.125rem; margin-block-end: var(--ke-s10); border-radius: 50%; background: var(--wp--preset--color--body-copy); -webkit-mask: none; mask: none; background-image: none; }
.ke-review-name { position: relative; }
.ke-review-name::after { content: ""; position: absolute; top: 1.125rem; left: 50%; inline-size: 1.75rem; block-size: 1.75rem; margin-left: -0.875rem; background: var(--wp--preset--color--base); -webkit-mask: var(--ke-icon) center / contain no-repeat; mask: var(--ke-icon) center / contain no-repeat; }
.ke-review-type { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--contrast); }
.ke-review-detail { padding-bottom: var(--ke-s30); border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line); }
.ke-review-detail > * { margin: 0; }
.ke-review-detail > * + * { margin-top: var(--ke-s20); }
.ke-review-detail > .ke-review-date { margin-top: var(--ke-s10); font-size: var(--wp--preset--font-size--small); font-style: italic; }
.ke-stars.ke-stars-text { color: transparent; overflow: hidden; white-space: nowrap; font-size: var(--wp--preset--font-size--small); }
/* Forced colours drop the star graphic: show the rating text in full instead. */
@media (forced-colors: active) { .ke-stars.ke-stars-text { inline-size: auto; -webkit-mask: none; mask: none; } }

@media (min-width: 782px) {
  .ke-tour-info-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ke-review { grid-template-columns: 8.75rem minmax(0, 1fr); }
}
@media (min-width: 1000px) {
  .ke-tour-layout { grid-template-columns: minmax(0, 1fr) 383px; }
  /* The booking box is first in the content (phones); here it takes the right-hand column. */
  .ke-tour-layout > .ke-tour-main { grid-column: 1; grid-row: 1; }
  .ke-tour-layout > .ke-tour-aside { grid-column: 2; grid-row: 1; }
}
/* The booking box follows the reader only where it fits on screen: with the Rezdy calendar it is about 1150px tall,
   and a sticky box taller than the screen would hide its own bottom. Keep this height gate. */
@media (min-width: 1000px) and (min-height: 1280px) {
  .ke-booking-box { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ke-sticky-top, 0px) + var(--ke-tour-nav-height, 64px) + var(--ke-s20)); }
}
@media (max-width: 781px) {
  /* Phones: the facts sit two to a row in smaller type; the copy clears the pause button below it. */
  .ke-tour-page > .wp-block-cover.ke-tour-hero { --ke-hero-floor: 480px; padding-bottom: var(--ke-s30); }
  .ke-tour-page > .wp-block-cover.ke-tour-hero.has-ke-video { padding-bottom: calc(var(--ke-s20) * 2 + var(--ke-touch)); }
  .ke-hero-video-toggle { bottom: var(--ke-s20); }
  .ke-tour-hero-copy > .ke-tour-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ke-s10) var(--ke-s20); margin-top: var(--ke-s20); padding-top: var(--ke-s20); --ke-icon-size: 1.125rem; }
  .ke-tour-facts > .ke-tour-fact { align-items: flex-start; font-size: var(--wp--preset--font-size--small); line-height: var(--wp--custom--line-height--heading); }
  .ke-tour-facts .ke-fact-group { flex-wrap: wrap; }
  .ke-tour-main > .ke-tour-awards { grid-template-columns: minmax(0, 1fr); }
}

/* Inner pages (inventory A7 to A9, A15 to A18, A20, A21). */
.wp-block-post-content > .ke-page-title > * { max-width: var(--ke-inner); }
.ke-page-title .ke-page-caption { margin: var(--ke-s10) 0 0; color: var(--wp--custom--on-pale--text); font-size: var(--wp--preset--font-size--large); }
.wp-block-post-content > :is(.ke-about-intro, .ke-about-story, .ke-about-services-band, .ke-faq-page, .ke-policy-page, .ke-contact-intro, .ke-insta-cta, .ke-timetable-head) > * { max-width: var(--ke-inner); margin-inline: auto; }
.ke-button-pill .wp-block-button__link { border-radius: var(--wp--custom--radius--pill); }
.ke-centred-title { text-align: center; font-size: var(--wp--preset--font-size--hero); font-weight: 400; color: var(--wp--preset--color--contrast); }

/* Blockquotes (A16): big quote mark, italic centred text, the source after an en dash. */
.ke-quote.wp-block-quote { margin-block: 0 var(--ke-s40); padding: 0; border: 0; text-align: center; }
.ke-quote::before { content: "\201C"; content: "\201C" / ""; display: block; font-family: var(--wp--preset--font-family--heading); font-size: 6.25rem; line-height: 0.8; color: var(--wp--preset--color--contrast); }
.ke-quote p { margin: 0; font-size: var(--wp--preset--font-size--medium); font-style: italic; }
.ke-quote cite { display: block; margin-top: var(--ke-s20); color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--small); font-style: italic; font-weight: 700; }
.ke-quote cite::before { content: "\2013\00a0"; }

/* About: intro and button, the photo collage beside the icon features, then Services. */
.ke-about-intro { padding-block: var(--ke-s60) 0; }
.ke-about-intro > p { margin-block: 0 var(--ke-s20); font-size: var(--wp--preset--font-size--medium); }
.ke-button-turquoise.ke-button-turquoise .wp-block-button__link { padding: var(--ke-s10) var(--ke-s30); min-height: var(--ke-touch); font-size: var(--wp--preset--font-size--large); }
.ke-about-story, .ke-about-services-band { padding-block: var(--ke-s70) 0; }
.ke-about-columns { gap: var(--ke-s100); align-items: center; }
.ke-about-columns .wp-block-image { margin: 0; }
.ke-about-columns .wp-block-image img { display: block; width: 100%; }
.ke-about-collage img { max-width: 420px; }
.ke-about-lead { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--large); font-weight: 700; color: var(--wp--preset--color--contrast); }
.ke-about-feature { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--ke-s20); margin-top: var(--ke-s30); --ke-icon-size: 3rem; --ke-icon-gap: 0; --ke-icon-colour: var(--wp--preset--color--contrast); }
.ke-about-feature::before { grid-row: 1 / span 2; }
.ke-about-feature > * { grid-column: 2; margin: 0; }
.ke-about-feature h3 { margin-bottom: var(--ke-s10); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--large); font-weight: 700; color: var(--wp--preset--color--contrast); }
.ke-about-feature p { font-size: var(--wp--preset--font-size--medium); }
.ke-about-services-title { font-size: var(--wp--preset--font-size--hero); font-weight: 400; color: var(--wp--preset--color--contrast); }
.ke-about-services-band { padding-bottom: var(--ke-s100); }

/* FAQs: the quote, the centred title, two columns of toggles and the services band. */
.ke-faq-page { padding-block: var(--ke-s60) var(--ke-s70); }
.ke-faq-page > .ke-centred-title { margin-block: 0 var(--ke-s50); }
.ke-faq-cols.ke-faq-cols.ke-faq-cols .rank-math-question { font-weight: 500; }
.ke-faq-col { display: grid; align-content: start; }
@media (min-width: 782px) {
  .ke-faq-cols :has(> .ke-faq-col) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ke-s30); align-items: start; }
}
/* The texture is lightened 40% so the copy keeps 4.5:1 over its darkest grain. */
.ke-services-band { padding: var(--ke-s60) var(--ke-gutter); background: linear-gradient(color-mix(in srgb, var(--wp--preset--color--base) 40%, transparent) 0 0), url(../images/services-band-texture.webp) center / cover, var(--wp--preset--color--pale); }
.wp-block-post-content > .ke-services-band { padding-inline: var(--ke-gutter); }
.ke-services-inner { max-width: var(--ke-inner); margin-inline: auto; display: grid; gap: var(--ke-s30); }
.ke-service-item { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: var(--ke-s20); align-items: start; }
.ke-service-item > * { margin: 0; }
.ke-service-icon img { display: block; width: 100%; height: auto; }
.ke-service-copy > * { margin: 0; }
.ke-service-copy h3 { margin-bottom: var(--ke-s10); font-size: var(--wp--preset--font-size--x-large); font-weight: 400; color: var(--wp--preset--color--contrast); }
.ke-service-copy p { font-size: var(--wp--preset--font-size--large); color: var(--wp--custom--on-pale--text); }
@media (min-width: 1000px) { .ke-services-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Policy: two quotes, then the terms beside the turquoise and pink flip boxes (A18). */
.ke-policy-page { padding-block: var(--ke-s60) var(--ke-s70); }
.ke-policy-columns { gap: var(--ke-s40); margin-top: var(--ke-s20); }
/* Tablets: the terms take a full row and the two flip boxes sit side by side below (!important against core's nowrap). */
@media (min-width: 782px) and (max-width: 1099px) {
  .ke-policy-columns.ke-policy-columns { flex-wrap: wrap !important; }
  .ke-policy-columns > .wp-block-column:first-child { flex-basis: 100% !important; }
}
.ke-terms-title { font-size: var(--wp--preset--font-size--display); font-weight: 300; text-transform: uppercase; color: var(--wp--preset--color--contrast); }
.ke-flip-policy .ke-flip-face { min-height: 393px; padding: var(--ke-s50) var(--ke-s40); }
.ke-flip-policy .ke-flip-front { position: relative; display: flex; flex-direction: column; justify-content: center; }
.ke-flip-policy .ke-flip-front > * { margin: 0; }
.ke-flip-policy .ke-flip-front > * + * { margin-top: var(--ke-s10); }
.ke-flip-policy .ke-flip-front .ke-flip-caption + p { margin-top: var(--ke-s20); }
.ke-flip-policy .ke-flip-front p { font-size: var(--wp--preset--font-size--small); }
/* The turquoise box keeps dark text and icons (9.71:1); the pink one white (original pink, 4.21:1, owner's choice). */
.ke-flip-policy .ke-flip-turquoise :is(h3, p) { color: var(--wp--preset--color--contrast); --ke-icon-colour: var(--wp--preset--color--contrast); }
.ke-flip-policy .ke-flip-turquoise::after { border-color: var(--wp--preset--color--contrast); }
.ke-flip-policy .ke-flip-back-title { font-size: var(--wp--preset--font-size--display-small); --ke-icon-size: 3.8rem; }

/* Contact: icon items, then the grey form section with the Fluent Forms enquiry (A17, A20). */
.ke-contact-intro { padding-block: var(--ke-s60); }
.ke-contact-items { gap: var(--ke-s40); text-align: center; }
.ke-contact-items h2 { display: flex; flex-direction: column; align-items: center; font-size: var(--wp--preset--font-size--x-large); font-weight: 500; color: var(--wp--preset--color--contrast); --ke-icon-size: 2.5rem; --ke-icon-gap: 0; --ke-icon-colour: var(--wp--preset--color--contrast); }
.ke-contact-items h2::before { margin-block-end: var(--ke-s20); }
.ke-contact-items p { margin-block: 0 var(--ke-s10); font-size: var(--wp--preset--font-size--medium); }
.ke-contact-items a { color: var(--wp--preset--color--turquoise-ink); text-decoration: none; }
.ke-contact-items a:is(:hover, :focus-visible) { text-decoration: underline; }
.wp-block-post-content > .ke-contact-form { padding: var(--ke-s70) var(--ke-gutter); }
.ke-contact-form > * { max-width: 720px; margin-inline: auto; }
.ke-contact-form > .ke-centred-title { margin-block: 0; font-size: var(--wp--preset--font-size--display); font-weight: 500; }
.ke-contact-form > .ke-contact-caption { margin-block: var(--ke-s10) var(--ke-s40); text-align: center; font-size: var(--wp--preset--font-size--large); }
.ke-contact-form .frm-fluent-form :is(input, textarea, select, button, label) { font-family: inherit; }
.ke-contact-form .frm-fluent-form label { color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--small); }
/* The required asterisk in dark: the plugin's red is about 2.6:1 on the grey. */
.ke-contact-form .frm-fluent-form .ff-el-input--label.ff-el-is-required.ff-el-is-required label::after { color: var(--wp--preset--color--contrast); }
.ke-contact-form .frm-fluent-form .ff-el-form-control { border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--body-copy); border-radius: 0; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--body); padding: var(--ke-s10) var(--ke-s20); min-height: var(--ke-touch); }
.ke-contact-form .frm-fluent-form .ff-el-form-control::placeholder { color: var(--wp--preset--color--body-copy); opacity: 1; }
/* Submit: full width, pink with white text (original pink, 4.21:1); outranks the form's own inline colour. */
.ke-contact-form form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) { width: 100%; min-height: 47px; border-radius: 0; background-color: var(--wp--preset--color--pink-action); color: var(--wp--preset--color--base); font-size: var(--wp--custom--button--font-size); font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; }
.ke-contact-form form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):is(:hover, :focus-visible) { background-color: var(--wp--preset--color--contrast); }
@media (min-width: 600px) {
  .ke-contact-form .frm-fluent-form fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ke-s10); }
  .ke-contact-form .frm-fluent-form fieldset > * { grid-column: 1 / -1; }
  .ke-contact-form .frm-fluent-form fieldset > .ff-el-group:has(:is([name="name"], [name="email"])) { grid-column: auto; }
}

/* Instagram call to action (A21) and the pink Follow pill. */
.ke-insta-cta { padding-block: var(--ke-s60) var(--ke-s70); text-align: center; }
.ke-insta-cta > * { margin-block: 0; }
.ke-insta-title { font-size: var(--wp--preset--font-size--display-small); font-weight: 800; letter-spacing: 2px; color: var(--wp--preset--color--contrast); }
.ke-insta-cta .ke-insta-caption { margin-block: var(--ke-s10) var(--ke-s30); font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); }
.ke-insta-cta .wp-block-buttons { justify-content: center; }

/* Timetable: the photo strip, then the centred uppercase title (A7). */
.wp-block-cover.ke-photo-strip { min-height: 200px; padding: 0; }
.ke-timetable-head { padding-block: var(--ke-s50) var(--ke-s70); text-align: center; }
.ke-timetable-head > * { margin-block: 0; }
.ke-timetable-title { font-size: var(--wp--preset--font-size--display); font-weight: 800; text-transform: uppercase; color: var(--wp--preset--color--contrast); }
.ke-timetable-head p { margin-top: var(--ke-s20); font-size: var(--wp--preset--font-size--small); }
.wp-block-post-content > .ke-timetable-calendar { max-width: var(--ke-inner); margin-inline: auto; padding: 0 var(--ke-gutter) var(--ke-s70); }

/* Hidden treasures (A8 stunning text): DM Sans italic caption, heavy uppercase title. */
.ke-hidden-treasures { max-width: none; padding-block: var(--ke-s100) var(--ke-s50); }
.ke-hidden-treasures > * { max-width: var(--ke-narrow); margin-inline: auto; }
.ke-hidden-treasures.ke-hidden-treasures > .ke-hidden-caption { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--medium); font-style: italic; letter-spacing: 0.5px; color: var(--wp--preset--color--body-copy); margin-block: 0 var(--ke-s10); }
.ke-hidden-treasures.ke-hidden-treasures > h2 { font-size: var(--wp--preset--font-size--display); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--contrast); margin-block: 0 var(--ke-s20); }
.ke-hidden-treasures > p:not(.ke-hidden-caption) { font-size: var(--wp--preset--font-size--medium); }

/* Flip boxes (A18). Front: photo on turquoise with a white frame, camera icon, title and caption.
   Back: dark panel with the text. Flips on hover, on keyboard focus inside the tile, and on tap (home.js adds is-flipped). */
.ke-destinations { padding-bottom: var(--ke-s70); }
.ke-gallery { max-width: var(--ke-inner); margin: 0 auto; gap: var(--ke-s40); }
.ke-flip.ke-flip { display: grid; height: 100%; perspective: 1200px; }
.ke-flip.ke-flip > * { grid-area: 1 / 1; margin: 0; }
.ke-flip-face { min-height: 359px; padding: var(--ke-s70) var(--ke-s40) var(--ke-s50); text-align: center; color: var(--wp--preset--color--base); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s; }
.wp-block-cover.ke-flip-front { min-height: 359px; padding: var(--ke-s70) var(--ke-s40) var(--ke-s50); background-color: var(--wp--preset--color--contrast); text-shadow: var(--wp--custom--shadow--text); }
/* White text over bright sand: a soft dark shade behind the text keeps 4.5:1 without darkening the whole photo. */
.wp-block-cover.ke-flip-front::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 42% at 50% 55%, color-mix(in srgb, var(--wp--preset--color--contrast) 50%, transparent) 40%, transparent); }
.ke-flip-front .wp-block-cover__inner-container { position: relative; z-index: 2; }
.ke-flip-front::after { content: ""; position: absolute; z-index: 1; inset: var(--ke-s10); border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--base); pointer-events: none; }
.ke-flip-back { display: flex; flex-direction: column; justify-content: center; background: var(--wp--preset--color--contrast); border: 5px solid var(--wp--preset--color--body-copy); transform: rotateY(180deg); pointer-events: none; }
.ke-flip:is(:focus-within, .is-flipped) .ke-flip-front { transform: rotateY(-180deg); pointer-events: none; }
.ke-flip:is(:focus-within, .is-flipped) .ke-flip-back { transform: rotateY(0deg); pointer-events: auto; }
/* Hover turns the tile only where hover is real; on touch screens a sticky :hover would undo the second tap. */
@media (hover: hover) {
  .ke-flip:hover .ke-flip-front { transform: rotateY(-180deg); pointer-events: none; }
  .ke-flip:hover .ke-flip-back { transform: rotateY(0deg); pointer-events: auto; }
}
@media (hover: none) { .ke-flip.ke-flip { cursor: pointer; } }
.ke-flip :is(h3, h4) { display: flex; flex-direction: column; align-items: center; margin: 0 0 var(--ke-s10); color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--x-large); font-weight: 700; --ke-icon-size: 3.125rem; --ke-icon-gap: 0; }
.ke-flip :is(h3, h4)::before { margin-block-end: var(--ke-s30); }
.ke-flip p { margin: 0; color: var(--wp--preset--color--base); }
.ke-flip .ke-flip-caption { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-small); font-weight: 400; }
.ke-flip-back .ke-flip-caption { margin-bottom: var(--ke-s20); }
.ke-flip-back a { display: inline-flex; align-items: center; min-height: var(--ke-touch); color: var(--wp--preset--color--base); }
.ke-flip :focus-visible { outline-color: var(--wp--preset--color--base); }

/* Where to find us (A19): navy panel, photo and island map. */
.wp-block-post-content > .ke-location { padding: 0; }
.ke-location-columns { margin: 0; gap: 0; }
.ke-location-columns > .wp-block-column { min-width: 0; }
.ke-location-panel { height: 100%; padding: var(--ke-s70) var(--ke-s50); }
.ke-location-panel > * { margin: 0; }
.ke-location-panel h2 { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: var(--ke-s30); color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--section); font-weight: 600; --ke-icon-size: 2.0625rem; --ke-icon-gap: 0; --ke-icon-colour: var(--wp--preset--color--pink); }
.ke-location-panel h2::before { margin-block-end: var(--ke-s20); }
.ke-location-panel a { display: inline-flex; align-items: center; min-height: var(--ke-touch); color: var(--wp--preset--color--base); text-decoration: none; }
.ke-location-panel a:is(:hover, :focus-visible) { text-decoration: underline; }
.ke-location-panel :focus-visible { outline-color: var(--wp--preset--color--base); }
.ke-location-columns .wp-block-image { margin: 0; height: 100%; }
.ke-location-columns img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Pink band (A19): italic caption, 50px uppercase title, social links with icons. White text on the original pink (4.21:1: large text passes, small text is the owner's choice). */
.ke-social-strip { background: var(--wp--preset--color--pink-action); color: var(--wp--preset--color--base); text-align: center; padding-block: var(--ke-s60) var(--ke-s70); }
.ke-social-strip > * { max-width: var(--ke-inner); margin-inline: auto; }
.ke-social-strip.ke-social-strip > .ke-social-caption { margin-block: 0 var(--ke-s10); font-size: var(--wp--preset--font-size--medium); font-style: italic; }
.ke-social-strip.ke-social-strip > h2 { margin-block: 0 var(--ke-s10); color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--hero); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.ke-social-strip.ke-social-strip > .ke-social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--ke-s40); margin-block: 0; padding: 0; list-style: none; --ke-icon-size: 1.25rem; --ke-icon-gap: 0.75rem; }
.ke-social-links li::before { content: none; }
.ke-social-links a { display: inline-flex; align-items: center; min-height: var(--ke-touch); color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--medium); letter-spacing: 1px; text-decoration: none; }
.ke-social-links a::before { content: ""; flex: none; inline-size: var(--ke-icon-size); block-size: var(--ke-icon-size); margin-inline-end: var(--ke-icon-gap); background-color: currentColor; -webkit-mask: var(--ke-icon) center / contain no-repeat; mask: var(--ke-icon) center / contain no-repeat; }
.ke-social-links a:is(:hover, :focus-visible) { text-decoration: underline; }
.ke-social-strip :focus-visible { outline-color: var(--wp--preset--color--base); }

/* Footer: archive widget titles were 27px weight 400, copy 16px. */
/* Footer: original turquoise; text, lines and icons dark for contrast (9.71:1). */
.ke-footer { padding: var(--ke-s70) var(--ke-gutter) var(--ke-s50); background: var(--wp--preset--color--turquoise); color: var(--wp--preset--color--contrast); }
.ke-footer .wp-block-columns { max-width: var(--ke-inner); margin: auto; gap: var(--ke-s30); }
.ke-footer h3 { color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--section); font-weight: 400; margin: 0 0 var(--ke-s30); }
.ke-footer p { font-size: var(--wp--preset--font-size--medium); --ke-icon-colour: var(--wp--preset--color--contrast); }
.ke-footer a { color: var(--wp--preset--color--contrast); }
.ke-footer-menu a { text-decoration: none; }
.ke-footer-menu a:hover, .ke-footer-menu a:focus-visible { text-decoration: underline; }
.ke-footer :focus-visible { outline-color: var(--wp--preset--color--contrast); }
.ke-footer-menu { list-style: none; margin: 0; padding: 0; }
.ke-footer-menu li { font-size: var(--wp--preset--font-size--small); border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--contrast); }
.ke-footer-menu li + li { margin-top: var(--ke-s10); }
.ke-footer-menu a { display: flex; align-items: center; min-height: var(--ke-touch); }
.ke-card-logos { list-style: none; margin: var(--ke-s20) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ke-s10) var(--ke-s20); --ke-icon-size: 1.4375rem; --ke-icon-gap: 0; }
.ke-card-logos li { display: flex; }
/* !important: screen-reader text must stay off screen even inside blocks that set position. */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* FAQs, booking and forms */
.ke-faq details { border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--pale); padding-block: var(--ke-s20); }
.ke-faq summary { cursor: pointer; min-height: var(--ke-touch); color: var(--wp--preset--color--contrast); font-weight: 600; }
.ke-faq details > :not(summary) { margin-top: var(--ke-s20); }
/* Rank Math FAQ blocks (FAQPage schema), shown as toggles like the original site. */
:is(.rank-math-block, .wp-block-rank-math-faq-block) .rank-math-list-item { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ke-s70) + var(--ke-s20)); border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--pale); padding-block: var(--ke-s20); }
:is(.rank-math-block, .wp-block-rank-math-faq-block) .rank-math-question { margin: 0; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--medium); font-weight: 600; line-height: var(--wp--custom--line-height--heading); color: var(--wp--preset--color--contrast); }
:is(.rank-math-block, .wp-block-rank-math-faq-block) .rank-math-answer { margin-top: var(--ke-s20); }
:is(.rank-math-block, .wp-block-rank-math-faq-block) .rank-math-answer[hidden] { margin-top: 0; }
:is(.rank-math-block, .wp-block-rank-math-faq-block) .rank-math-answer > :first-child { margin-top: 0; }
.ke-faq-toggle { display: flex; width: 100%; min-height: var(--ke-touch); align-items: center; justify-content: space-between; gap: var(--ke-s20); padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ke-faq-toggle::after { content: '+'; content: '+' / ''; flex: none; font-size: var(--wp--preset--font-size--x-large); line-height: 1; color: var(--wp--preset--color--pink-action); }
.ke-faq-toggle[aria-expanded="true"]::after { content: '\2212'; content: '\2212' / ''; }
.ke-empty { min-height: 40vh; }
.ke-timetable-calendar iframe.rezdy { display: block; border: 0; }
.ke-enquiry .ff-btn-submit { min-height: var(--ke-touch); background: var(--wp--preset--color--pink-action); color: var(--wp--preset--color--base); }
p.has-text-color:not(.has-background) { background-color: transparent; }

/* Editor */
.editor-styles-wrapper .ke-tour-page > .wp-block-cover.ke-tour-hero { height: auto; min-height: 600px; }
.editor-styles-wrapper .ke-tour-page > .ke-tour-tabs { position: relative; top: auto; }
.editor-styles-wrapper .ke-home-slider { height: auto; overflow: visible; }
/* !important (editor only): every slide shows for editing, over the front-end [hidden] rule above. */
.editor-styles-wrapper .ke-home-slider .ke-hero-slide { display: flex !important; min-height: 600px; height: 600px; }
.editor-styles-wrapper .ke-flip.ke-flip { display: block; }
.editor-styles-wrapper .ke-flip.ke-flip .ke-flip-face, .editor-styles-wrapper .ke-flip.ke-flip:is(:hover, :focus-within, .is-flipped) .ke-flip-face { transform: none; opacity: 1; pointer-events: auto; }
.editor-styles-wrapper .ke-flip.ke-flip > .ke-flip-back { margin-top: var(--ke-s10); }

/* Pale grey sections: text and link colours from custom.onPale (the original grey and pink since 5 Nov, owner's choice). */
.has-pale-background-color, .ke-tours-main { color: var(--wp--custom--on-pale--text); }
:is(.has-pale-background-color, .ke-tours-main) a:not(.wp-element-button, .ke-view-details, .wp-block-post-title a) { color: var(--wp--custom--on-pale--link); }
:is(.has-pale-background-color, .ke-tours-main) a:not(.wp-element-button, .ke-view-details):hover { color: var(--wp--preset--color--contrast); }

/* Tours page: photo hero, grey listing panel and sidebar (inventory A6, A10 to A13). */
.wp-block-cover.ke-photo-hero { min-height: clamp(360px, 43vw, 616px); padding: var(--ke-s100) var(--ke-gutter) calc(var(--ke-s100) * 2); align-items: flex-end; text-align: center; }
/* A soft dark gradient behind the title keeps white text readable over the bright water (no tint at the top). */
.wp-block-cover.ke-photo-hero .wp-block-cover__inner-container { position: relative; z-index: 2; }
.wp-block-cover.ke-photo-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.35) 45%, rgb(0 0 0 / 0) 75%); }
@media (min-width: 1101px) {
  /* The floating header's white fade over the top of the photo (the hero stays fixed while the page scrolls). */
  .ke-overlay-header .wp-block-cover.ke-photo-hero::before { background: var(--ke-header-fade), linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.35) 45%, rgb(0 0 0 / 0) 75%); }
  /* Homepage slider: the same fade above the slides and below the slideshow controls. */
  .ke-home .ke-home-slider::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--ke-header-fade); }
  /* Timetable photo strip (200px, almost all of it under the header): the same fade (the menu measured 1.03:1 without it). */
  .ke-overlay-header .wp-block-cover.ke-photo-strip::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--ke-header-fade); }
}
.ke-overlay-header .wp-block-cover.ke-photo-hero { padding-top: calc(var(--ke-header-main-height, var(--ke-header-fallback)) + var(--ke-s100)); }
.ke-photo-hero h1 { margin: 0; color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--display); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; text-shadow: var(--wp--custom--shadow--text); }
.ke-photo-hero p { margin: var(--ke-s10) 0 0; color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--medium); font-style: italic; text-shadow: var(--wp--custom--shadow--text); }
:is(.wp-block-post-content, .ke-tours-archive) > .ke-tours-layout { padding-inline: var(--ke-gutter); }
/* Tours archive template: hero and listing sit flush, as on the page they replace. */
.ke-tours-archive > .alignfull + .alignfull { margin-block-start: 0; }
.ke-tours-inner { max-width: var(--ke-inner); margin-inline: auto; display: grid; gap: var(--ke-s70); }
.ke-tours-inner > *, .ke-tour-card-body > * { margin-block: 0; }
.ke-tours-main { padding-block: var(--ke-s60) var(--ke-s100); border-image: conic-gradient(var(--wp--preset--color--pale) 0 0) fill 0 // 0 var(--ke-s40) 0 100vw; }
.ke-tours-aside { padding-block: var(--ke-s60); }
.ke-confidence-box { background: var(--wp--preset--color--base); border-radius: var(--wp--custom--radius--box); box-shadow: var(--wp--custom--shadow--box); padding: var(--ke-s20) var(--ke-s20) var(--ke-s30) var(--ke-s40); }
.ke-confidence-box h3 { font-size: var(--wp--preset--font-size--x-large); font-weight: 500; margin: var(--ke-s10) 0 var(--ke-s20); }
.ke-confidence-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ke-s10); font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--body-copy); --ke-icon-size: 1.75rem; --ke-icon-gap: var(--ke-s10); --ke-icon-colour: var(--wp--preset--color--turquoise); }
.ke-confidence-list li { display: flex; align-items: center; }
@media (min-width: 1000px) {
  .ke-tours-inner { grid-template-columns: minmax(0, 1fr) 363px; }
}
@media (max-width: 999px) {
  .ke-tours-main { border-image: conic-gradient(var(--wp--preset--color--pale) 0 0) fill 0 // 0 100vw 0 100vw; }
}
.ke-tour-card { position: relative; }
.ke-tour-card .ke-tour-ribbon { position: absolute; z-index: 2; top: var(--ke-s30); left: calc(var(--ke-s10) * -1); display: block; padding: var(--ke-s10) var(--ke-s20) var(--ke-s10) var(--ke-s30); background: var(--wp--preset--color--pink-action); color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.ke-tour-card .ke-tour-ribbon::after { content: ""; position: absolute; left: 0; top: 100%; border-top: var(--ke-s10) solid color-mix(in srgb, var(--wp--preset--color--pink-action) 55%, #000); border-left: var(--ke-s10) solid transparent; }
.ke-tour-card-full { background: var(--wp--preset--color--base); border: 0; }
.ke-tour-card-full .wp-block-post-featured-image img { display: block; width: 100%; aspect-ratio: 782 / 354; object-fit: cover; }
.ke-tour-card-body { display: grid; gap: var(--ke-s30); padding: var(--ke-s40) var(--ke-s30); }
.ke-tour-card-full .ke-tour-card-copy { padding: 0; }
.ke-tour-card-full .ke-tour-card-copy h3 { margin: 0 0 var(--ke-s20); font-size: var(--wp--preset--font-size--x-large); font-weight: 800; text-transform: uppercase; }
.ke-tour-card-full .ke-tour-card-copy h3 a { color: var(--wp--preset--color--contrast); }
.ke-tour-card-copy .ke-tour-fact { font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--wp--preset--color--body-copy); --ke-icon-colour: var(--wp--preset--color--turquoise); }
.ke-tour-card-copy .wp-block-post-excerpt { margin-top: var(--ke-s20); color: var(--wp--preset--color--body-copy); }
.ke-tour-price-col { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--ke-s10); }
.ke-tour-price-col > * { margin: 0; }
.ke-tour-price-col .ke-tour-price { display: flex; flex-direction: column; align-items: center; color: var(--wp--preset--color--pink); font-size: var(--wp--preset--font-size--section); }
.ke-tour-price-col .ke-tour-reviews { color: var(--wp--preset--color--body-copy); font-size: var(--wp--preset--font-size--x-small); }
.ke-stars { display: inline-block; inline-size: 5.6em; block-size: 1em; font-size: 0.8125rem; background: linear-gradient(90deg, var(--wp--preset--color--star) calc(var(--ke-rating, 5) * 20%), var(--wp--preset--color--line) 0); -webkit-mask: url(../icons/fa-star.svg) left center / 1.12em 1em repeat-x; mask: url(../icons/fa-star.svg) left center / 1.12em 1em repeat-x; }
.ke-view-details { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ke-touch); padding: 0 var(--ke-s20); background: var(--wp--preset--color--turquoise); color: var(--wp--preset--color--contrast); font-size: var(--wp--custom--button--small); font-weight: 700; text-transform: uppercase; text-decoration: none; }
.ke-view-details:hover, .ke-view-details:focus-visible { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
@media (min-width: 700px) {
  .ke-tour-card-body { grid-template-columns: minmax(0, 1fr) 173px; }
  .ke-tour-price-col { border-left: var(--wp--custom--border--button) solid var(--wp--preset--color--line); padding-left: var(--ke-s30); }
}

/* Back-to-top button (home.js adds it; shown after scrolling). */
.ke-back-to-top { position: fixed; right: var(--ke-s30); bottom: calc(var(--ke-s30) + env(safe-area-inset-bottom, 0px)); z-index: 90; inline-size: var(--wp--custom--back-to-top--size); block-size: var(--wp--custom--back-to-top--size); display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--wp--custom--back-to-top--disc); box-shadow: 0 0 0 var(--wp--custom--border--hairline) var(--wp--custom--back-to-top--ring); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.ke-back-to-top.is-visible { opacity: 1; visibility: visible; }
.ke-back-to-top::before { content: ""; inline-size: 1.125rem; block-size: 1.125rem; background: var(--wp--custom--back-to-top--chevron); -webkit-mask: url(../icons/fa-angle-up.svg) center / contain no-repeat; mask: url(../icons/fa-angle-up.svg) center / contain no-repeat; }
@media (min-width: 1101px) {
  /* Active and hover menu item: the original turquoise sliding bar with a notch. */
  .ke-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { position: relative; }
  .ke-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after { content: ""; position: absolute; inset-inline: -3px; bottom: 0; block-size: 3px; background: var(--wp--preset--color--turquoise); transform: scaleX(0); transition: transform .2s; }
  .ke-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before { content: ""; position: absolute; left: 50%; bottom: 3px; margin-left: -5px; border: 5px solid transparent; border-bottom-color: var(--wp--preset--color--turquoise); border-top: 0; opacity: 0; transition: opacity .2s; }
  .ke-main-nav .wp-block-navigation__container > .wp-block-navigation-item:is(.ke-current, :hover, :focus-within) > .wp-block-navigation-item__content::after { transform: scaleX(1); }
  .ke-main-nav .wp-block-navigation__container > .wp-block-navigation-item:is(.ke-current, :hover, :focus-within) > .wp-block-navigation-item__content::before { opacity: 1; }
  /* On the turquoise sticky header the bar and notch turn dark (9.71:1). */
  .ke-header-main.is-stuck .ke-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after { background: var(--wp--preset--color--contrast); }
  .ke-header-main.is-stuck .ke-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before { border-bottom-color: var(--wp--preset--color--contrast); }
  .ke-header-row { display: grid; grid-template-columns: 1fr auto 1fr; }
  .ke-header-row > .ke-main-nav { margin: 0; }
  .ke-header-row > .ke-header-cta { justify-self: end; }
}
@media (max-width: 1100px) {
  :root { --ke-header-fallback: 111px; }
  .ke-main-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  .ke-main-nav .wp-block-navigation__responsive-container-open { display: flex; }
  .ke-header-row { align-items: center; }
  .ke-header-main { padding-block: var(--ke-s20); }
  /* Mobile header: the original turquoise bar with the white logo; the menu button is dark for contrast. */
  .ke-header .ke-header-main, .ke-home .ke-header-main, .ke-overlay-header .ke-header-main { position: relative; background: var(--wp--preset--color--turquoise); border-bottom: 0; }
  .ke-header .ke-header-main.is-stuck { position: fixed; background: var(--wp--preset--color--turquoise); }
  .ke-overlay-header .wp-block-post-content > .ke-page-title { padding-top: var(--ke-s100); }
  .ke-overlay-header .wp-block-cover.ke-photo-hero { padding-top: var(--ke-s100); }
  /* The header sits above the tour hero here (booking strip 93px + header 111px, measured). */
  .ke-tour-page > .wp-block-cover.ke-tour-hero { --ke-hero-top-fallback: 204px; }
  .ke-logo a { display: block; background: url(../images/keppel-explorer-logo-white.webp) left center / contain no-repeat; }
  .ke-logo img { opacity: 0; }
  .ke-main-nav .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--contrast); }
  /* Phones and tablets (Fabienne, 5 Nov): the header is logo, BOOK NOW and the menu button; one Book Now only,
     so the strip's button and VIEW TOURS (Tours is in the menu) step back. */
  .ke-header-row > .ke-header-book { display: flex; margin-left: auto; }
  .ke-header-book .wp-block-button__link { min-height: var(--ke-touch); display: inline-flex; align-items: center; padding: 0 var(--ke-s20); font-size: var(--wp--custom--button--small); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
  .ke-header-row > .ke-main-nav { margin-left: var(--ke-s10); }
  .ke-header-row > .ke-header-cta, .ke-booking-strip .wp-block-buttons { display: none; }
  .ke-vip-copy { padding-inline: var(--ke-gutter); }
  .ke-why-copy { padding: var(--ke-s40) var(--ke-s20); }
  .ke-experience-feature { margin-inline: var(--ke-s20); }
  /* Below 1100px the decorative location photo drops out so the navy panel has room (phones too, as the original). */
  .ke-location-photo-col { display: none; }
}

@media (min-width: 782px) and (max-width: 1100px) {
  /* !important overrides the columns' inline widths; below 782px core stacks them at 100%. */
  .ke-location-columns > .wp-block-column:first-child { flex-basis: 40% !important; }
  .ke-location-columns > .wp-block-column:last-child { flex-basis: 60% !important; }
}

/* Phone menu overlay */
.ke-main-nav .wp-block-navigation__responsive-container.is-menu-open { position: fixed; inset: 0; z-index: 99999; overflow-y: auto; background-color: var(--wp--preset--color--turquoise); color: var(--wp--preset--color--contrast); padding: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ke-s70) + var(--ke-s30)) var(--ke-gutter) var(--ke-s40); --navigation-layout-align: stretch; --navigation-layout-justify: flex-start; --navigation-layout-justification-setting: flex-start; }
.ke-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { margin: 0; }
.ke-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding: 0; }
.ke-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position: fixed; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ke-s20)); right: var(--ke-s20); }
.ke-main-nav .is-menu-open .wp-block-navigation__responsive-container-content, .ke-main-nav .is-menu-open .wp-block-navigation__container { align-items: stretch; }
.ke-main-nav .is-menu-open .wp-block-navigation__container { width: 100%; gap: var(--ke-s10); }
.ke-main-nav .is-menu-open .wp-block-navigation-item { width: 100%; }
.ke-main-nav .is-menu-open .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--x-large); min-height: var(--ke-touch); color: var(--wp--preset--color--contrast); text-align: left; justify-content: flex-start; }
/* One level only in the phone menu (Fabienne, 5 Nov): parents link to their pages, sub-items and their toggles are hidden. */
.ke-main-nav .is-menu-open .wp-block-navigation__submenu-container, .ke-main-nav .is-menu-open .wp-block-navigation__submenu-icon { display: none !important; }
.ke-main-nav .wp-block-navigation__responsive-container-close { position: absolute; top: var(--ke-s20); right: var(--ke-s20); min-width: var(--ke-touch); min-height: var(--ke-touch); color: var(--wp--preset--color--contrast); }

@media (max-width: 781px) {
  /* Hero captions are under 24px up to about 745px wide (normal text, 4.5:1): a denser shadow keeps them readable on bright sand and sky. */
  .ke-hero-caption, .ke-hero-tagline { text-shadow: var(--wp--custom--shadow--text-strong); }
  .ke-vip-copy .wp-block-buttons { padding-inline: 0; }
  .ke-why-copy { padding-inline: 0; }
  /* Phones, as the original: the tour band photo drops out; the card stays. */
  .ke-tour-photo-col { display: none; }
  .ke-tour-list-col { padding-inline: var(--ke-gutter); }
  .ke-location-panel { padding: var(--ke-s50) var(--ke-gutter); }
}
@media (max-width: 600px) {
  .wp-block-cover.ke-photo-hero::before { background: linear-gradient(to top, rgb(0 0 0 / 0.65), rgb(0 0 0 / 0.5) 60%, rgb(0 0 0 / 0.15)); }
  :root { --ke-header-fallback: 89px; }
  /* The strip held only its button on phones; the header Book Now replaces it. */
  .ke-booking-strip { display: none; }
  .ke-header-main { padding: var(--ke-s20) var(--ke-gutter); }
  .ke-header-row { gap: var(--ke-s10); }
  /* The logo gives way to BOOK NOW and the menu button on narrow phones (180px at most, 96px at least). */
  .ke-logo { flex: 0 1 var(--wp--custom--logo--phone); min-width: 96px; }
  .ke-logo img { width: 100%; max-width: var(--wp--custom--logo--phone); }
  .ke-header-row > .ke-header-cta { display: none; }
  .ke-home-slider { --ke-hero-top-fallback: 89px; }
  .ke-tour-page > .wp-block-cover.ke-tour-hero { --ke-hero-top-fallback: 89px; }
  .ke-hero-copy { top: 54%; }
  .ke-hero-badge { top: 23%; width: 110px; }
  /* Sit above the slider controls (20 offset + 40 control + 10 gap). */
  .ke-hero-tagline { top: auto; bottom: calc(var(--ke-s20) + var(--wp--custom--slider--control) + var(--ke-s10)); left: 10%; width: 80%; }
  .wp-block-post-content > :is(.ke-home-slider,.ke-home-introduction,.ke-tour-band,.ke-location) { padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ke-back-to-top { transition: none; }
  /* Flip boxes swap faces without turning. */
  .ke-flip-face, .wp-block-cover.ke-flip-front { transition: none; transform: none; }
  .ke-flip-back { transform: none; opacity: 0; }
  .ke-flip:is(:focus-within, .is-flipped) .ke-flip-front { transform: none; opacity: 0; }
  .ke-flip:is(:focus-within, .is-flipped) .ke-flip-back { transform: none; opacity: 1; }
  @media (hover: hover) { .ke-flip:hover .ke-flip-front { transform: none; opacity: 0; } .ke-flip:hover .ke-flip-back { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1101px) {
  .ke-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after,
  .ke-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before { transition: none; }
}
/* Last, and with an element selector, so it beats the groups' own display rules. */
div.ke-fact-group:not(:has(.ke-fact-value)), div.ke-tour-price:not(:has(.ke-price-value)) { display: none; }