/* ==========================================================================
   Sabah Booking — brand homepage.
   Self-contained: this page does NOT load bootstrap/style.css/custom1.15.css,
   so there is no legacy cascade to fight and no !important anywhere.
   All classes are sb- prefixed. Tokens copied from
   .claude/skills/sabah-booking-design/tokens/
   ========================================================================== */

:root{
  --green:#6CC243; --blue:#1180FF; --charcoal:#222222;
  --white:#FFFFFF; --sand:#F8EDE3; --coral:#FF6A3D;
  --green-100:#E8F5E1; --green-300:#BFE7A3; --green-500:#6CC243;
  --green-600:#4FA62B; --green-800:#2E7D1A;
  --blue-100:#E6F2FF; --blue-300:#83D8FF; --blue-500:#1180FF;
  --blue-600:#0A5FCC; --blue-800:#064A99;
  --sand-100:#FFF6EC; --sand-300:#F8EDE3; --sand-500:#EAD8C2;
  --sand-600:#D6C4A9; --sand-800:#BDAA8C;
  --coral-100:#FFE9E3; --coral-300:#FFB8A5; --coral-500:#FF6A3D;
  --coral-600:#E64E25; --coral-800:#B73316;
  --gray-100:#F2F2F2; --gray-300:#BDBDBD; --gray-500:#6B6B6B;
  --gray-700:#3A3A3A; --gray-900:#111111;

  --surface-page:var(--white); --surface-soft:var(--sand-100);
  --surface-card:var(--white); --surface-inverse:var(--charcoal);
  --text-heading:var(--charcoal); --text-body-color:var(--gray-700);
  --text-muted:var(--gray-500); --text-inverse:var(--white);
  --text-link:var(--blue-500);
  --action-primary:var(--green-500); --action-primary-hover:var(--green-600);
  --action-cta:var(--coral-500); --action-cta-hover:var(--coral-600);
  --border-subtle:#E9E2D8; --focus-ring:var(--blue-300);
  --star:#F5A623;

  --font-display:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
  --text-h1:600 48px/1.2 var(--font-display);
  --text-h2:600 28px/1.2 var(--font-display);
  --text-h3:600 20px/1.2 var(--font-display);
  --text-h4:600 16px/1.25 var(--font-display);
  --text-subtitle:500 14px/1.4 var(--font-body);
  --text-body:400 14px/1.6 var(--font-body);
  --text-caption:400 12px/1.35 var(--font-body);
  --text-button:600 16px/1.25 var(--font-display);
  --text-small:500 12px/1.35 var(--font-body);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px;
  --radius-pill:999px;

  --shadow-card:0 2px 8px rgba(34,34,34,.06),0 8px 24px rgba(34,34,34,.08);
  --shadow-float:0 12px 32px rgba(34,34,34,.14);
  --shadow-search:0 8px 28px rgba(17,128,255,.10);
  --ease-brand:cubic-bezier(.25,.6,.3,1);
  --dur-fast:150ms; --dur-med:250ms;

  --gutter:40px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.sb-home{
  margin:0;
  font:var(--text-body);
  color:var(--text-body-color);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
}
.sb-home h1,.sb-home h2,.sb-home h3,.sb-home h4{
  margin:0;font-family:var(--font-display);font-weight:600;color:var(--text-heading);
}
.sb-home p{margin:0}
.sb-home a{color:var(--text-link);text-decoration:none}
.sb-home img{max-width:100%;display:block}
.sb-home ul{margin:0;padding:0;list-style:none}
.sb-home button{font-family:inherit}
.sb-home :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.sb-icon{width:24px;height:24px;flex:none;stroke-width:2}

/* ---- header ------------------------------------------------------------ */
.sb-header{
  display:flex;align-items:center;gap:28px;
  padding:14px var(--gutter);
  background:var(--surface-page);
  position:sticky;top:0;z-index:20;
  box-shadow:0 1px 0 var(--gray-100);
}
.sb-header__logo{height:34px;width:auto}
/* Hamburger: hidden until the nav collapses at 767px. Declared here rather
   than inside the query so the button has its box even when not displayed. */
.sb-burger{
  display:none;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;margin-left:-8px;
  border:0;border-radius:var(--radius-sm);background:transparent;
  color:var(--text-heading);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-brand);
}
.sb-burger:hover{background:var(--gray-100)}
.sb-burger .sb-icon{width:24px;height:24px}
.sb-burger__close{display:none}
.sb-burger[aria-expanded="true"] .sb-burger__open{display:none}
.sb-burger[aria-expanded="true"] .sb-burger__close{display:block}
.sb-nav{display:flex;gap:22px;flex:1;flex-wrap:wrap}
.sb-nav a{
  font:var(--text-subtitle);font-weight:600;white-space:nowrap;
  color:var(--text-heading);transition:color var(--dur-fast) var(--ease-brand);
}
.sb-nav a:hover{color:var(--green-600)}
.sb-nav a.is-active{color:var(--green-600)}
.sb-header__aside{display:flex;align-items:center;gap:18px}
.sb-header__aside a{
  display:inline-flex;align-items:center;gap:6px;
  font:var(--text-subtitle);color:var(--text-heading);
}
.sb-header__aside a:hover{color:var(--green-600)}
.sb-header__aside .sb-icon{width:16px;height:16px}
.sb-locale-wrap{position:relative;display:inline-flex}
.sb-locale{
  display:inline-flex;align-items:center;gap:4px;
  font:var(--text-small);color:var(--text-muted);white-space:nowrap;
  background:none;border:0;padding:0;cursor:pointer;
  transition:color var(--dur-fast) var(--ease-brand);
}
.sb-locale:hover{color:var(--green-600)}
.sb-locale .sb-icon{width:14px;height:14px}
.sb-locale-pop[hidden]{display:none}
.sb-locale-pop{
  position:absolute;top:calc(100% + 10px);right:0;z-index:30;
  display:flex;flex-direction:column;gap:var(--space-1);
  min-width:180px;padding:var(--space-4);
  background:var(--surface-card);border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);border:1px solid var(--gray-100);
}
.sb-locale-pop__label{
  font:var(--text-caption);color:var(--text-muted);
}
.sb-locale-pop__label + select{margin-bottom:var(--space-2)}
.sb-locale-pop select{
  font:var(--text-subtitle);color:var(--text-heading);
  padding:6px 8px;border-radius:var(--radius-sm);
  border:1px solid var(--border-subtle);background:var(--surface-page);
  cursor:pointer;
}
.sb-locale-pop .sb-btn{margin-top:var(--space-2);justify-content:center}

/* ---- hero -------------------------------------------------------------- */
.sb-hero{
  position:relative;
  padding:56px var(--gutter) 92px;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  overflow:hidden;
}
.sb-hero::before{                       /* white protection gradient, never a dark scrim */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.92) 26%,
    rgba(255,255,255,0)   62%);
}
.sb-hero__inner{position:relative;z-index:2;max-width:500px}
.sb-hero h1{font:var(--text-h1);font-size:clamp(30px,3vw,36px);padding-bottom:18px}
.sb-hero h1 .sb-accent{color:var(--blue)}
.sb-hero__sub{font:var(--text-body);font-size:16px;color:var(--text-body-color);margin-top:12px}
.sb-hero__sub .sb-accent{color:var(--blue);display:block}
.sb-hero__badges{display:flex;gap:22px;margin-top:22px;flex-wrap:wrap}
/* the three chips read as one trust line, so keep them on a single row and
   let them run past the 500px headline column when a locale's labels are long.
   Below 1000px the mascot sits too far left for that, so they wrap instead. */
@media (min-width:1000px){
  .sb-hero__badges{flex-wrap:nowrap;width:max-content}
}
.sb-hero__boki{
  position:absolute;right:70px;bottom:0px;height:340px;width:auto;
  z-index:2;pointer-events:none;
}

/* trust badge: green disc + label */
.sb-trust{display:inline-flex;align-items:center;gap:10px}
.sb-trust__disc{
  width:36px;height:36px;border-radius:var(--radius-pill);background:var(--green-100);
  display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.sb-trust__disc .sb-icon{width:18px;height:18px;color:var(--green-600)}
.sb-trust__label{font:var(--text-subtitle);font-weight:600;color:var(--text-heading)}

/* ---- search bar (floats over the hero) --------------------------------- */
.sb-searchwrap{position:relative;z-index:5;margin:-46px var(--gutter) 0}
.sb-search{
  display:flex;align-items:center;
  background:var(--surface-card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-search),0 1px 0 rgba(34,34,34,.04);
  padding:6px;
  /* one keyword field doesn't need the full page width - centring it keeps the
     visual weight under the hero copy instead of spanning edge to edge */
  max-width:760px;margin:0 auto;
}
.sb-search__field{
  flex:1;display:flex;align-items:center;gap:10px;
  padding:10px 18px;min-width:0;
}
.sb-search__field--wide{flex:1.4}
.sb-search__field .sb-icon{width:18px;height:18px;color:var(--gray-500)}
.sb-search__label{font:var(--text-small);color:var(--text-heading)}
.sb-search__value{
  font:400 14px/1.35 var(--font-body);color:var(--text-heading);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sb-search__value--muted{color:var(--text-muted)}
.sb-search__field input{
  font:400 14px/1.35 var(--font-body);color:var(--text-heading);
  border:0;padding:0;outline:none;width:100%;background:transparent;
}
.sb-search__field input::placeholder{color:var(--text-muted)}
.sb-search__field select{
  font:400 14px/1.35 var(--font-body);color:var(--text-heading);
  border:0;padding:0;outline:none;background:transparent;cursor:pointer;max-width:100%;
}
/* Vertical divider between search fields. The homepage bar is a single field
   and does not use it, but the listing pages (tours/cars/holidays/transfers)
   still run a multi-field bar and emit one between each pair. */
.sb-search__rule{width:1px;align-self:stretch;background:var(--gray-100);margin:8px 0}
.sb-search__cta{
  white-space:nowrap;font:var(--text-button);color:var(--text-inverse);
  background:var(--action-cta);border:0;border-radius:var(--radius-md);
  padding:12px 22px;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-brand);
}
.sb-search__cta:hover{background:var(--action-cta-hover)}
.sb-search__cta:active{background:var(--coral-800)}

/* ---- search modal ------------------------------------------------------
   Focusing the hero field opens this; it owns all typing and results, so
   there is no second inline dropdown to keep in sync. */
.sb-noscroll{overflow:hidden}
.sb-smodal{position:fixed;inset:0;z-index:100}
.sb-smodal__backdrop{position:absolute;inset:0;background:rgba(34,34,34,.45)}
.sb-smodal__panel{
  position:relative;margin:10vh auto 0;
  max-width:680px;width:calc(100% - 32px);max-height:76vh;
  display:flex;flex-direction:column;
  background:var(--surface-card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-float);overflow:hidden;
}
.sb-smodal__bar{
  display:flex;align-items:center;gap:12px;flex:none;
  padding:16px 18px;border-bottom:1px solid var(--border-subtle);
}
.sb-smodal__baricon{width:20px;height:20px;color:var(--gray-500);flex:none}
.sb-smodal__bar input{
  flex:1;min-width:0;border:0;outline:none;background:transparent;
  font:400 17px/1.3 var(--font-body);color:var(--text-heading);
}
.sb-smodal__bar input::placeholder{color:var(--text-muted)}
.sb-smodal__clear{
  border:0;background:transparent;padding:0;flex:none;cursor:pointer;
  display:flex;align-items:center;color:var(--gray-500);
}
.sb-smodal__clear:hover{color:var(--text-heading)}
.sb-smodal__clear .sb-icon{width:18px;height:18px}
.sb-smodal__close{
  flex:none;cursor:pointer;padding:5px 9px;
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  background:var(--surface-card);font:500 11px/1 var(--font-body);color:var(--text-muted);
}
.sb-smodal__close:hover{border-color:var(--gray-300);color:var(--text-heading)}
.sb-smodal__body{flex:1;overflow-y:auto;padding:var(--space-2)}

/* result rows - shared by the empty state and the live results */
.sb-sres__group{
  font:600 11px/1 var(--font-body);color:var(--gray-500);
  text-transform:uppercase;letter-spacing:.06em;padding:14px 12px 6px;
}
.sb-sres__row{
  display:flex;align-items:center;gap:12px;
  font:400 14px/1.35 var(--font-body);color:var(--text-heading);
  padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;
  overflow-wrap:anywhere;
  transition:background var(--dur-fast) var(--ease-brand);
}
.sb-sres__row:hover{background:var(--sand-100)}
.sb-sres__row--on{background:var(--sand-100)}   /* keyboard highlight - same weight as hover */
.sb-sres__rowicon{width:16px;height:16px;color:var(--gray-500);flex:none}
.sb-sres__thumb{
  width:44px;height:44px;border-radius:var(--radius-sm);
  object-fit:cover;flex:none;background:var(--sand-100);
}
.sb-sres__itemtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.sb-sres__itemname{overflow-wrap:anywhere}
.sb-sres__itemarea{font:400 12px/1.2 var(--font-body);color:var(--gray-500)}
.sb-sres__row--viewall{color:var(--blue-500);font-weight:500;margin-top:var(--space-2)}
.sb-sres__row--viewall .sb-sres__rowicon{color:var(--blue-500)}
.sb-sres__none{padding:28px 12px;text-align:center;font:var(--text-body);color:var(--text-muted)}

/* ---- section scaffolding ----------------------------------------------- */
.sb-section{padding:28px var(--gutter) 0}
.sb-section__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.sb-section__head h2{font:var(--text-h2);font-size:24px}
.sb-link{
  display:inline-flex;align-items:center;gap:6px;
  font:var(--text-subtitle);font-weight:600;color:var(--text-link);
}
.sb-link:hover{color:var(--blue-600)}
.sb-link .sb-icon{width:16px;height:16px}

/* ---- tour cards -------------------------------------------------------- */
.sb-tours{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:16px;
}
.sb-card{
  background:var(--surface-card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);overflow:hidden;display:block;color:inherit;
  transition:transform var(--dur-med) var(--ease-brand),
             box-shadow var(--dur-med) var(--ease-brand);
}
.sb-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}
.sb-card__media{position:relative}
.sb-card__media img{width:100%;height:150px;object-fit:cover}
.sb-badge{
  position:absolute;top:10px;left:10px;
  font:var(--text-small);color:var(--text-inverse);
  background:var(--blue-500);border-radius:var(--radius-sm);padding:4px 10px;
}
.sb-badge--green{background:var(--green-500)}
.sb-badge--coral{background:var(--coral-500)}
.sb-wish{
  position:absolute;top:8px;right:8px;width:32px;height:32px;
  border:0;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.sb-wish .sb-icon{width:16px;height:16px;color:var(--gray-500)}
.sb-wish.is-on .sb-icon{color:var(--coral);fill:var(--coral)}
.sb-card__body{padding:14px}
.sb-card__title{font:var(--text-h4);color:var(--text-heading)}
.sb-card__sub{font:var(--text-caption);color:var(--text-muted);margin-top:2px}
.sb-rating{display:inline-flex;align-items:center;gap:5px;font:var(--text-small);color:var(--text-heading);margin-top:8px}
.sb-rating__star{color:var(--star);font-size:15px;line-height:1}
.sb-rating__count{color:var(--text-muted);font-weight:400}
.sb-price{display:flex;align-items:baseline;gap:4px;margin-top:8px}
.sb-price__from{font:var(--text-caption);color:var(--text-muted)}
.sb-price__amount{font:600 18px/1 var(--font-display);color:var(--text-heading)}
.sb-price__unit{font:var(--text-caption);color:var(--text-muted)}

/* ---- why band ---------------------------------------------------------- */
.sb-why{background:var(--sand-100);padding:48px var(--gutter);margin-top:48px}
.sb-why__head{text-align:center;max-width:600px;margin:0 auto}
.sb-why__head h2{font:var(--text-h2)}
.sb-why__head p{font:var(--text-subtitle);color:var(--text-muted);margin-top:6px}
.sb-why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.sb-why__card{
  background:var(--surface-card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);padding:24px;text-align:center;
}
.sb-why__disc{
  width:48px;height:48px;border-radius:50%;background:var(--green-100);
  display:inline-flex;align-items:center;justify-content:center;
}
.sb-why__disc .sb-icon{width:22px;height:22px;color:var(--green-600)}
.sb-why__card h3{font:var(--text-h3);margin-top:12px}
.sb-why__card p{font:var(--text-body);color:var(--text-body-color);margin-top:8px}

/* ---- "Find by Interest" — photo tiles ----------------------------------
   Photography, not icons: the page already carries four icon-led sections
   (triad, six reasons, trust badges, support strip) and this one needs to
   look different from them.
   The earlier crowding was tile SIZE, not the photos - 4-across 16:9 made
   each tile ~250px tall, so 16 of them ran ~1050px. Smaller tiles on a 3:2
   ratio, ~6 across, brings the section to a similar height as the icon
   version while keeping the imagery.
   The label gradient stays: it sits on photography and is the only thing
   making white text legible. */
.sb-interest{padding:var(--space-16) var(--gutter)}
.sb-interest__head{text-align:center;max-width:560px;margin:0 auto}
.sb-interest__head h2{font:var(--text-h2)}
.sb-interest__head p{font:var(--text-subtitle);font-size:16px;color:var(--text-muted);margin-top:8px}
.sb-interest__grid{
  display:grid;
  /* 170px min lands on 6 columns at 1280 -> 3 rows for 16 tiles.
     A 196px min gave 5 columns, which left a single orphan tile on row 4. */
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:var(--space-5);
  margin-top:var(--space-10);
}
.sb-interest__tile{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--radius-lg);
  aspect-ratio:3/2;
  background:var(--gray-100);
  box-shadow:var(--shadow-card);
  transition:transform var(--dur-med) var(--ease-brand),
             box-shadow var(--dur-med) var(--ease-brand);
}
.sb-interest__tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}
.sb-interest__tile figure{margin:0;width:100%;height:100%}
.sb-interest__tile img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-med) var(--ease-brand);
}
.sb-interest__tile:hover img{transform:scale(1.04)}
.sb-interest__label{
  position:absolute;left:0;right:0;bottom:0;
  padding:24px var(--space-3) var(--space-3);
  background:linear-gradient(transparent,rgba(0,0,0,.66));
  font:var(--text-subtitle);font-weight:600;color:var(--text-inverse);
  text-align:center;line-height:1.3;
}

/* ---- "Plan your Sabah holiday" — 6 reasons ----------------------------
   Reuses .sb-why__card / .sb-why__disc: same component, wider grid.
   NOTE: ID_LABEL_FRONTPAGEBIGTITLE embeds <span class="color-green font-38">.
   Those are legacy custom1.15.css classes and this page does not load that
   file, so .color-green is redefined here or the highlight silently vanishes.
   .font-38 is deliberately NOT redefined - letting the span inherit the h2
   size keeps the brand type scale intact. */
.sb-plan{padding:48px var(--gutter) 0}
.sb-plan__head{text-align:center;max-width:640px;margin:0 auto}
.sb-plan__head h2{font:var(--text-h2)}
.sb-plan__head p{font:var(--text-subtitle);font-size:16px;color:var(--text-muted);margin-top:8px}
.sb-plan__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.color-green{color:var(--green-600)}

/* ---- "Are we reliable?" — licence verification ------------------------- */
.sb-verify{background:var(--sand-100);padding:48px var(--gutter);margin-top:48px}
.sb-verify__head{text-align:center}
.sb-verify__head h2{font:var(--text-h3);color:var(--text-heading)}
.sb-verify__rule{
  width:60px;height:3px;background:var(--green);border-radius:2px;
  margin:0 auto var(--space-4);
}
.sb-verify__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px;
  max-width:840px;margin-left:auto;margin-right:auto;
}
.sb-verify__card{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  padding:28px 24px;text-align:center;color:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  transition:transform var(--dur-med) var(--ease-brand),
             box-shadow var(--dur-med) var(--ease-brand);
}
.sb-verify__card:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}
.sb-verify__card img{height:120px;width:auto;object-fit:contain}
.sb-verify__card--qr img{height:170px}
.sb-verify__card b{font:var(--text-subtitle);font-weight:600;color:var(--text-heading)}
.sb-verify__card span{font:var(--text-subtitle);font-weight:600;color:var(--text-heading)}

/* ---- journeys + testimonial ------------------------------------------- */
.sb-split{display:flex;gap:24px;padding:40px var(--gutter) 0;align-items:stretch;flex-wrap:wrap}
.sb-journey{
  flex:2;min-width:280px;position:relative;border-radius:var(--radius-xl);
  overflow:hidden;min-height:240px;
  background-position:center;background-size:cover;
}
.sb-journey__cap{
  position:absolute;left:0;right:0;bottom:0;padding:40px 24px 20px;
  background:linear-gradient(transparent,rgba(0,0,0,.55));
}
.sb-journey__cap h3{color:var(--text-inverse)}
.sb-journey__cap p{font:var(--text-caption);color:var(--text-inverse);margin-top:4px}
.sb-quote{
  flex:1;min-width:280px;background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:24px;
  display:flex;flex-direction:column;
}
.sb-quote > h3{font:var(--text-h3)}

/* real guest reviews, latest 3 from review_tour */
.sb-reviews{display:flex;flex-direction:column;gap:14px;margin-top:16px;flex:1}
.sb-review{
  display:block;color:inherit;
  padding-bottom:14px;border-bottom:1px solid var(--gray-100);
}
.sb-review:last-of-type{border-bottom:0;padding-bottom:0}
.sb-review__stars{color:var(--star);font-size:13px;line-height:1;letter-spacing:1px}
.sb-review__text{
  font:var(--text-body);color:var(--text-body-color);margin-top:6px;
}
.sb-review__by{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.sb-review__avatar{
  width:28px;height:28px;border-radius:50%;background:var(--green-100);flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font:var(--text-small);color:var(--green-800);
}
.sb-review__flag{width:18px;height:auto;border-radius:2px;flex:none}
.sb-review__name{font:var(--text-subtitle);font-weight:600;color:var(--text-heading)}
.sb-verified{
  display:inline-flex;align-items:center;gap:4px;
  font:var(--text-caption);color:var(--green-800);
  background:var(--green-100);border-radius:var(--radius-pill);padding:2px 8px;
}
.sb-verified .sb-icon{width:12px;height:12px}
.sb-review__tour{
  display:block;font:var(--text-caption);color:var(--text-muted);margin-top:4px;
}
.sb-review:hover .sb-review__tour{color:var(--text-link)}
.sb-quote__foot{margin-top:16px}

/* ---- footer ------------------------------------------------------------ */
.sb-footer{background:var(--surface-inverse);padding:40px var(--gutter) 24px;margin-top:8px}
.sb-footer__grid{display:grid;grid-template-columns:1.6fr .9fr .9fr .9fr 1.2fr;gap:24px}
.sb-footer__logo{height:34px;width:auto}
.sb-footer__tag{font:var(--text-caption);color:var(--gray-300);margin-top:12px;max-width:320px}
.sb-footer .sb-footer__tag a{display:inline;color:var(--green-300);margin:0}
.sb-footer .sb-footer__tag a:hover{color:var(--green-100)}
.sb-footer h4{font:var(--text-subtitle);font-weight:600;color:var(--text-inverse);margin-bottom:10px}
.sb-footer a{display:block;font:var(--text-caption);color:var(--gray-300);margin-bottom:7px;
             transition:color var(--dur-fast) var(--ease-brand)}
.sb-footer a:hover{color:var(--text-inverse)}
.sb-footer__contact{display:flex;align-items:center;gap:8px}
.sb-footer__contact .sb-icon{width:14px;height:14px}
.sb-footer__social{display:flex;align-items:center;gap:12px;margin-top:14px}
.sb-footer__social span{font:var(--text-small);color:var(--text-inverse);text-transform:uppercase;letter-spacing:.5px}
.sb-footer__social a{margin:0;display:inline-flex}
.sb-footer__social .sb-icon{width:18px;height:18px}
.sb-footer__legal{
  font:var(--text-caption);color:var(--gray-500);text-align:center;
  border-top:1px solid var(--gray-700);margin-top:28px;padding-top:16px;
}
.sb-footer__legal a{display:inline;color:var(--gray-300);text-decoration:underline;margin:0}
.sb-footer__bar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:16px;
}
.sb-footer__bar span{font:var(--text-caption);color:var(--gray-500)}
.sb-footer__payments{display:inline-flex;gap:8px;flex-wrap:wrap}
.sb-footer__pay{height:22px;border-radius:4px}

/* ---- tooltip ------------------------------------------------------------
   Hover/focus hint, used on the info icons beside constrained fields (child
   and infant age ranges, fees that do not apply, promo-code exclusions).

   Not a `title` attribute: lucide REPLACES the `<i data-lucide>` placeholder
   with a fresh <svg> and the attributes on the placeholder do not survive, so
   a title put there silently disappears once createIcons() runs. The wrapper
   holds the tooltip instead, and the icon inside it can be swapped freely.

   `tabindex="0"` on .sb-tip makes it keyboard reachable; :focus-within covers
   that without a second rule per browser. */
.sb-tip{
  position:relative;display:inline-flex;align-items:center;
  cursor:help;vertical-align:-3px;
}
.sb-tip > .sb-icon{width:15px;height:15px;color:var(--blue-500)}
/* Anchored to the icon's left edge and growing rightwards, NOT centred on it.
   A centred bubble on a label that sits at the left of a narrow panel resolves
   to a negative `left`, and a `visibility:hidden` box still contributes to
   scroll overflow — so the page gains a horizontal scrollbar even while the
   tooltip is closed. Use .sb-tip--end for icons near a right edge. */
.sb-tip__bubble{
  position:absolute;bottom:calc(100% + 9px);left:-6px;
  transform:translateY(4px);
  z-index:40;width:max-content;min-width:140px;
  /* never wider than the screen on a narrow device */
  max-width:min(230px,calc(100vw - 24px));
  padding:9px 11px;border-radius:var(--radius-sm);
  background:var(--charcoal);color:var(--text-inverse);
  font:var(--text-caption);line-height:1.45;text-align:left;
  box-shadow:var(--shadow-float);
  opacity:0;pointer-events:none;
  /* CLOSED STATE IS display:none, NOT visibility:hidden.
     A visibility:hidden box still occupies the scrollable overflow region, so
     every closed tooltip near a right edge silently widened the document —
     the page gained a horizontal scrollbar and the fixed scroll-to-top button
     ended up floating outside the layout. display:none removes it entirely.
     `allow-discrete` + @starting-style keep the fade where supported and
     degrade to an instant show where not. */
  display:none;
  transition:opacity var(--dur-fast) var(--ease-brand),
             transform var(--dur-fast) var(--ease-brand),
             display var(--dur-fast) allow-discrete;
}
.sb-tip__bubble::after{               /* pointer, aligned under the icon */
  content:"";position:absolute;top:100%;left:12px;
  border:5px solid transparent;border-top-color:var(--charcoal);
}
.sb-tip:hover .sb-tip__bubble,
.sb-tip:focus-within .sb-tip__bubble{
  display:block;opacity:1;transform:translateY(0);
}
@starting-style{
  .sb-tip:hover .sb-tip__bubble,
  .sb-tip:focus-within .sb-tip__bubble{opacity:0;transform:translateY(4px)}
}
/* for an icon near a right edge, grow leftwards instead */
.sb-tip--end .sb-tip__bubble{left:auto;right:-6px}
.sb-tip--end .sb-tip__bubble::after{left:auto;right:12px}
@media (prefers-reduced-motion:reduce){
  .sb-tip__bubble{transition:opacity var(--dur-fast) linear;transform:none}
}

/* ---- scroll to top ------------------------------------------------------
   Shown by brandFooter.jsp's script once the page is scrolled a screen or so.
   Sits above the Boki bubble's corner, below any modal. */
.sb-totop{
  position:fixed;right:20px;bottom:20px;z-index:60;
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:var(--surface-card);color:var(--text-heading);
  box-shadow:var(--shadow-float);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--dur-med) var(--ease-brand),
             transform var(--dur-med) var(--ease-brand),
             visibility var(--dur-med) var(--ease-brand),
             background var(--dur-fast) var(--ease-brand);
}
.sb-totop.is-on{opacity:1;visibility:visible;transform:none}
.sb-totop:hover{background:var(--green-500);color:var(--text-inverse)}
.sb-totop .sb-icon{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){
  .sb-totop{transition:opacity var(--dur-fast) linear;transform:none}
}

/* ---- mobile sticky booking bar -------------------------------------------
   Shown by the page JS only under the 900px breakpoint (it checks the same
   media query), so this stays display:none for everyone else.

   Lives here, next to .sb-totop, rather than in brand-detail.css: it is used
   by both the sb-detail pages (car/tour/holiday) and shuttleinfo, which is an
   sb-page and does not load the detail layer. Every brand-detail.css consumer
   loads this file first, so the move is invisible to them. */
.sb-mobar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:var(--surface-card);box-shadow:0 -3px 12px rgba(17,17,17,.12);
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
}
.sb-mobar__inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sb-mobar__label{font:var(--text-caption);color:var(--text-muted)}
.sb-mobar__price{font:600 17px/1.25 var(--font-display);color:var(--text-heading)}
.sb-mobar__price small{font:var(--text-caption);font-weight:400;color:var(--text-muted)}
/* struck original, shown only when the record carries a promotional price */
.sb-mobar__ori{font-size:14px;color:var(--text-muted);text-decoration:line-through}
.sb-mobar .sb-btn{white-space:nowrap;flex:none}

/* ---- Boki chat bubble -------------------------------------------------- */
.sb-boki{
  position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:30;
  display:flex;gap:12px;align-items:center;max-width:340px;
  background:var(--surface-card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-float);padding:12px 16px;
}
.sb-boki img{height:92px;width:auto;align-self:flex-end;margin-bottom:-12px}
.sb-boki b{display:block;font:var(--text-subtitle);font-weight:600;color:var(--text-heading)}
.sb-boki__sub{font:var(--text-caption);color:var(--text-muted)}
.sb-boki__row{display:flex;gap:8px;margin-top:8px}
.sb-btn{
  font:600 14px/1.25 var(--font-display);border:0;border-radius:var(--radius-md);
  padding:8px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background var(--dur-fast) var(--ease-brand);
}
/* No radius override here on purpose: the design system's Button component
   specifies --radius-md for EVERY variant, and the pill this used to carry
   made primary buttons read as a different family from every other button —
   most visibly at large sizes, where a pill resolves to a ~26px radius. */
.sb-btn--primary{background:var(--action-primary);color:var(--text-inverse)}
.sb-btn--primary:hover{background:var(--action-primary-hover)}
.sb-btn--primary:active{background:var(--green-800)}
/* The committing action — "Book Now", "Submit". The design system reserves
   coral for exactly this and caps it at ONE per screen (colour ratio is
   60% white/sand, 15% green, 15% blue, 7% charcoal, 3% coral), so green stays
   the everyday primary and coral marks the one thing the page is asking for. */
.sb-btn--cta{background:var(--action-cta);color:var(--text-inverse)}
.sb-btn--cta:hover{background:var(--action-cta-hover)}
.sb-btn--cta:active{background:var(--coral-800)}
.sb-btn--ghost{background:transparent;color:var(--text-heading)}
.sb-btn--ghost:hover{background:var(--gray-100)}
.sb-btn .sb-icon{width:16px;height:16px}

/* Anchors styled as buttons. `.sb-home a{color:var(--text-link)}` up at the top
   of this file is (0,1,1) and beats every `.sb-btn--x{color:…}` at (0,1,0), so
   <a class="sb-btn sb-btn--cta"> rendered blue-500 text on coral instead of
   white. Restore each variant at (0,2,1); the <button> form was never affected.
   A new variant that sets its own colour and gets used on an <a> needs a line
   here too. */
.sb-home a.sb-btn--primary,
.sb-home a.sb-btn--cta{color:var(--text-inverse)}
.sb-home a.sb-btn--ghost{color:var(--text-heading)}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:1100px){
  .sb-tours{grid-template-columns:repeat(3,1fr)}
  .sb-footer__grid{grid-template-columns:1fr 1fr}
  .sb-plan__grid{grid-template-columns:repeat(2,1fr)}

  /* Tablet / small laptop: the inline header needs 1083px to fit on one line
     (measured — logo 167 + nav 496 + aside 284 + gaps and gutters). Below that
     the nav used to wrap mid-list, breaking "Charter & Transfer" across two
     rows. Instead the nav drops cleanly onto its own full-width line, which it
     fits on without wrapping all the way down to the phone breakpoint.
     No hamburger here: there is room for the real nav, so it stays visible. */
  .sb-header{flex-wrap:wrap;gap:10px 20px;padding:10px var(--gutter)}
  .sb-header__aside{margin-left:auto}
  .sb-nav{
    order:3;flex-basis:100%;gap:20px;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;
    margin:0 calc(var(--gutter) * -1);
    padding:2px var(--gutter) 0;
  }
  .sb-nav::-webkit-scrollbar{display:none}
}
@media (max-width:900px){
  .sb-why__grid{grid-template-columns:1fr}
  .sb-plan__grid{grid-template-columns:1fr}
  .sb-verify__grid{grid-template-columns:1fr}
  .sb-hero__boki{display:none}          /* mascot would overlap the copy */
  .sb-search{flex-wrap:wrap}
  .sb-search__field{flex:1 1 100%}
  .sb-search__rule{display:none}        /* fields stack, so a vertical rule reads as a stray line */
  .sb-search__cta{flex:1 1 100%;margin:6px}
}
@media (max-width:767px){
  :root{--gutter:20px}
  .sb-tours{grid-template-columns:repeat(2,1fr)}
  /* 196px minimum would collapse to one column at 375w; force two */
  .sb-interest__grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
  .sb-interest{padding:var(--space-12) var(--gutter)}
  .sb-interest__label{padding:18px var(--space-2) var(--space-2);font-size:13px}
  /* Phone: no room for a nav line as well, so the five items collapse behind
     the hamburger and the whole header becomes one row — burger + logo left,
     account controls right. Tablets keep the real nav (see the 1100 block). */
  .sb-header{flex-wrap:nowrap;gap:10px;padding:8px var(--gutter)}
  .sb-burger{display:inline-flex}
  .sb-header__logo{height:32px}
  .sb-header__aside{gap:14px}
  .sb-header__aside .sb-header__label{display:none}   /* icons speak for themselves here */
  .sb-header__aside .sb-icon{width:20px;height:20px}

  /* The panel hangs off the header, which is position:sticky and therefore
     already a containing block for absolutely positioned children. */
  .sb-nav{
    position:absolute;top:100%;left:0;right:0;z-index:25;
    flex-direction:column;flex-wrap:nowrap;gap:0;
    margin:0;padding:4px var(--gutter) 8px;
    background:var(--surface-page);
    border-top:1px solid var(--gray-100);
    box-shadow:var(--shadow-card);
    overflow-x:visible;
    display:none;
  }
  .sb-nav.is-open{display:flex}
  .sb-nav a{padding:13px 2px;border-bottom:1px solid var(--gray-100)}
  .sb-nav a:last-child{border-bottom:0}

  /* Footer: five stacked blocks made this taller than most of the pages it
     sits under. Two columns for the link lists roughly halves it; the brand
     block and the contact block still want the full width, and the whole
     thing runs tighter — a footer should not cost a full screen of scrolling. */
  .sb-footer{padding:28px var(--gutter) 20px}
  .sb-footer__grid{grid-template-columns:1fr 1fr;gap:20px 18px}
  .sb-footer__grid > :first-child,
  .sb-footer__grid > :last-child{grid-column:1 / -1}
  .sb-footer__logo{height:30px}
  .sb-footer__tag{margin-top:8px}
  .sb-footer h4{margin-bottom:7px}
  .sb-footer a{margin-bottom:5px}
  .sb-footer__legal{margin-top:20px;padding-top:12px}
  .sb-footer__bar{justify-content:center;text-align:center;gap:10px;margin-top:12px}
  .sb-footer__payments{justify-content:center;width:100%}
  .sb-totop{right:14px;bottom:14px}
  .sb-hero{padding:36px var(--gutter) 168px}
  .sb-hero__boki{right:4px;height:160px}
  /* the icon discs cost ~250px of the 320px available here, so the three
     chips only hold one row as plain labels. wrap is kept as a safety
     valve for <=320px devices, where the longest locale still overflows */
  .sb-hero__badges{gap:12px}
  .sb-hero__badges .sb-trust__disc{display:none}
  .sb-hero__badges .sb-trust__label{font-size:12px}
  .sb-hero::before{                     /* horizontal fade leaves no photo at this width */
    background:linear-gradient(180deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.82) 45%,
      rgba(255,255,255,.32) 100%);
  }
  .sb-hero__inner{max-width:none}
  .sb-boki{right:12px;bottom:12px;max-width:calc(100vw - 24px)}
  .sb-boki img{height:64px}
  /* a centred sheet wastes the screen at this width - go full-screen instead */
  .sb-smodal__panel{
    margin:0;width:100%;max-width:none;height:100%;max-height:none;border-radius:0;
  }
}
@media (max-width:479px){
  .sb-tours{grid-template-columns:1fr}
}