/* ============================================================
   Sha Lanka — custom styles (layered on top of Tailwind CDN)
   Palette: cream #F5F0E6 · sand #D9C3A3 · clay #B5532A
            olive #556B2F · espresso #1C1A17 · bark #2B2620
            accent ember #E2711D · amberglow #F4A100
   ============================================================ */

:root {
  --brand: #1577BE;        /* brand blue (primary accent) */
  --brand-deep: #0E5896;   /* darker blue for hovers */
  --brand-glow: #2BA8E0;   /* light azure highlight */
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* Sticky-header offset for anchored sections */
section[id] { scroll-margin-top: 5rem; }

/* Font-weight helpers (Oswald loaded at 400/500/600/700) */
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }

/* ---------- Buttons ---------- */
.btn-primary,
.btn-ghost,
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 500;
  padding: .8rem 1.7rem;
  border-radius: 9999px;
  transition: all .25s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(21,119,190,.7);
}
.btn-primary:hover { background: var(--brand-deep); transform: translateY(-2px); }
.btn-ghost {
  border: 2px solid rgba(245,240,230,.55);
  color: #F5F0E6;
}
.btn-ghost:hover { background: #F5F0E6; color: #1C1A17; }
.btn-outline { border: 2px solid #1C1A17; color: #1C1A17; }
.btn-outline:hover { background: #1C1A17; color: #F5F0E6; }

/* ---------- Header / Nav ---------- */
#site-header { background: transparent; }
#nav-inner { transition: height .3s ease; }
.nav-brand   { color: #F5F0E6; transition: color .25s; }
.nav-tagline { color: rgba(245,240,230,.65); transition: color .25s; }

.logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2BA8E0, #1577BE);
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: .03em;
  box-shadow: 0 6px 16px -6px rgba(21,119,190,.7);
  flex: 0 0 auto;
}

/* Brand logo (image) — swaps version on scroll */
.brand-logo-img {
  height: 84px;
  width: auto;
  display: block;
  transition: height .3s ease;
}
.brand-logo-on-light { display: none; }            /* dark-text version hidden over hero */
#site-header.scrolled .brand-logo-on-dark  { display: none; }
#site-header.scrolled .brand-logo-on-light { display: block; }
#site-header.scrolled .brand-logo-img { height: 69px; }
.footer-logo { height: 64px; width: auto; display: block; }
@media (max-width: 480px) { .brand-logo-img { height: 75px; } }

.nav-link {
  position: relative;
  color: rgba(245,240,230,.9);
  font-weight: 500;
  transition: color .25s;
}
.nav-link:hover { color: #fff; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  height: 2px; width: 0;
  background: var(--brand);
  transition: width .25s ease;
}
.nav-link:hover::after { width: 100%; }

#menu-toggle { color: #F5F0E6; }

/* Scrolled state */
#site-header.scrolled {
  background: rgba(245,240,230,.97);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px -16px rgba(28,26,23,.45);
}
#site-header.scrolled #nav-inner { height: 5rem; }
#site-header.scrolled .nav-brand   { color: #1C1A17; }
#site-header.scrolled .nav-tagline { color: rgba(43,38,32,.55); }
#site-header.scrolled .nav-link    { color: #2B2620; }
#site-header.scrolled .nav-link:hover { color: var(--brand); }
#site-header.scrolled #menu-toggle { color: #2B2620; }

.mobile-link {
  display: block;
  padding: .8rem .25rem;
  border-bottom: 1px solid rgba(245,240,230,.08);
  color: rgba(245,240,230,.85);
  transition: all .2s ease;
}
.mobile-link:hover { color: var(--brand); padding-left: .75rem; }

/* ---------- Hero ---------- */
.hero-bg {
  background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  animation: kenburns 22s ease-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.05); }
  to   { transform: scale(1.16); }
}
.hero-overlay {
  background: linear-gradient(to bottom,
    rgba(28,26,23,.55), rgba(28,26,23,.62) 45%, rgba(28,26,23,.88));
}

/* ---------- Section heading kit ---------- */
.eyebrow {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: .8rem;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: .6rem;
}
.section-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  line-height: 1.05;
  color: inherit;
}
.title-underline {
  display: block;
  width: 64px; height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2BA8E0, #1577BE);
  margin: 1.1rem auto 0;
}
.section-sub {
  max-width: 42rem;
  margin: 1.1rem auto 0;
  font-weight: 300;
  opacity: .82;
  text-align: center;
}

/* ---------- Clean (non-bold) lists ---------- */
.clean-list { list-style: none; padding: 0; margin: 0; }
.clean-list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-weight: 400;          /* never bold */
  line-height: 1.5;
  color: inherit;
}
.clean-list--dark li { color: rgba(245,240,230,.82); }

.tick {
  position: relative;
  flex: 0 0 auto;
  width: 1.15rem; height: 1.15rem;
  margin-top: .15rem;
  border-radius: 9999px;
  background: rgba(21,119,190,.16);
}
.tick::after {
  content: "";
  position: absolute;
  left: .38rem; top: .2rem;
  width: .3rem; height: .58rem;
  border: solid var(--brand);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.list-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 9px;
  background: rgba(21,119,190,.14);
  color: var(--brand);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: .85rem;
}

.placeholder-note { border-bottom: 1px dotted rgba(21,119,190,.55); }

/* ---------- Map ---------- */
.map-frame {
  position: relative;
  height: 420px;
  border-radius: 18px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 30px 60px -28px rgba(28,26,23,.55);
}
.map-frame iframe { display: block; width: 100%; height: 100%; }

/* ---------- Animation highlight band ---------- */
.band-bg {
  background-image: url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.band-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(28,26,23,.86), rgba(28,26,23,.92));
}
.band-card {
  background: rgba(245,240,230,.06);
  border: 1px solid rgba(245,240,230,.12);
  border-radius: 16px;
  padding: 2.2rem 1.5rem;
  backdrop-filter: blur(4px);
  transition: all .3s ease;
}
.band-card:hover {
  background: rgba(21,119,190,.12);
  border-color: rgba(21,119,190,.4);
  transform: translateY(-5px);
}
.band-icon { font-size: 2.6rem; display: block; margin-bottom: .8rem; }
.band-title {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.35rem;
  color: #F5F0E6;
  margin-bottom: .4rem;
}
.band-text { color: rgba(245,240,230,.72); font-weight: 300; }

/* ---------- Fleet / Tour cards ---------- */
.fleet-card, .tour-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}
.fleet-card {
  background: #fff;
  box-shadow: 0 22px 42px -30px rgba(28,26,23,.5);
}
.tour-card {
  background: #241f1b;
  box-shadow: 0 22px 42px -28px rgba(0,0,0,.65);
}
.fleet-card:hover, .tour-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 32px 55px -26px rgba(28,26,23,.55);
}
.fleet-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.fleet-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.fleet-card:hover .fleet-media img,
.tour-card:hover .fleet-media img { transform: scale(1.08); }

/* Card slideshows — horizontal sliding carousel (advances every 5s) */
.slideshow { position: absolute; inset: 0; overflow: hidden; }
.slides-track { display: flex; height: 100%; width: 100%; will-change: transform; }
.slideshow .slide {
  position: relative; inset: auto;
  flex: 0 0 100%;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
}
.fleet-tag {
  position: absolute; top: 1rem; left: 1rem;
  background: rgba(28,26,23,.8);
  color: #F5F0E6;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  padding: .32rem .75rem;
  border-radius: 9999px;
}
.fleet-media img.card-badge {
  position: absolute;
  bottom: .7rem; right: .7rem;
  width: 76px; height: 76px;
  object-fit: contain;
  border-radius: 9999px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.5));
  transition: transform .4s ease;
  z-index: 2;
}
.fleet-card:hover .fleet-media img.card-badge,
.tour-card:hover .fleet-media img.card-badge { transform: scale(1.07) rotate(-3deg); }
@media (max-width: 480px) { .fleet-media img.card-badge { width: 64px; height: 64px; } }

.fleet-body { padding: 1.8rem; }
.fleet-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.5rem;
  color: inherit;
  margin-bottom: .55rem;
}
.fleet-desc { font-weight: 300; opacity: .8; margin-bottom: 1.1rem; }
.card-cta {
  display: inline-block;
  margin-top: 1.3rem;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .88rem;
  font-weight: 600;
  color: var(--brand);
  transition: all .2s ease;
}
.card-cta:hover { color: var(--brand-deep); transform: translateX(4px); }

/* ---------- Car carrier ---------- */
.carrier-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(28,26,23,.55);
}
.carrier-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 1 / 1;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.gallery-item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,26,23,.45), transparent 55%);
  opacity: 0;
  transition: opacity .35s ease;
}
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item:hover::after { opacity: 1; }

@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
  }
  .gallery-item { aspect-ratio: auto; }
  .gallery-item--tall { grid-row: span 2; }
  .gallery-item--wide { grid-column: span 2; }
}

/* ---------- Gallery mosaic (orientation-matched frames, balanced equal-height columns) ---------- */
/* Full-bleed: the mosaic sits outside the centred container in index.php, so
   width:100% already spans the page — no 100vw (which counts the scrollbar
   and would push the page sideways). The heading stays in the normal column.
   IMPORTANT (iOS): no mask-image and no transform/AOS on this element. A mask
   (or an animated transform) on the container of the sliding track hits a
   WebKit compositing bug — iPhones drew the photos unmasked and overlapping
   ("scrambled"). The edge fade is done with the ::before/::after gradient
   overlays below instead, which never touch the animated layer. */
.gallery-mosaic {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* The strip is far wider than the screen; paint containment tells the
     browser nothing renders outside this box (correct clipping + cheaper
     painting for the always-running slide). */
  contain: paint;
}
/* Edge fade: dark vignette gradients painted OVER the photo wall, so photos
   dim into near-black as they slide off either edge (espresso #1C1A17 tone
   to stay in the palette). */
.gallery-mosaic::before,
.gallery-mosaic::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 6%;
  z-index: 1;
  pointer-events: none;
}
.gallery-mosaic::before { left: 0;  background: linear-gradient(to right, rgba(28, 26, 23, .85), rgba(28, 26, 23, 0)); }
.gallery-mosaic::after  { right: 0; background: linear-gradient(to left,  rgba(28, 26, 23, .85), rgba(28, 26, 23, 0)); }
/* Before main.js builds the rows, the mosaic holds every photo as a flat
   vertical list ~11,000px tall — that momentarily giant page made AOS compute
   scroll-reveal positions thousands of px too low, so every section BELOW the
   gallery stayed invisible (opacity 0) after the gallery collapsed to its
   real height. Hiding the unbuilt flat frames keeps the page height stable:
   built frames live inside .gseq, so this only targets the flat state. */
.gallery-mosaic > .gframe { display: none; }

/* TWO ROWS. Each .grow is one row: an animated track holding two identical
   .gseq copies; the CSS slides it by exactly -50% (= one copy), so the loop
   is seamless BY CONSTRUCTION — no measured pixel distance to get wrong
   (a JS-measured distance is what used to overshoot on iOS and show the end
   of the wall). width:max-content sizes the row to its content, so -50%
   resolves to exactly one copy. No will-change: the running animation
   promotes the layer by itself. */
.grow { display: flex; width: max-content; }
.grow + .grow { margin-top: .85rem; }
.grow.is-sliding { animation: gslide linear infinite; }
@keyframes gslide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Pause on hover so mouse users can click a photo — but ONLY on devices with
   a real pointer. On a touch phone a tap sticks the :hover state, which froze
   the slide indefinitely and looked like the loop had "ended". @media
   (hover: hover) keeps the pause on desktop and never applies it on touch. */
@media (hover: hover) and (pointer: fine) {
  .gallery-mosaic:hover .grow.is-sliding { animation-play-state: paused; }
}

/* flex: 0 0 auto stops Safari shrinking the sequence copies to the row's
   width (that shrink is what once scrambled the wall on iPhone). */
.gseq { display: flex; flex: 0 0 auto; gap: .85rem; padding-right: .85rem; }
/* EVERY frame size is EXPLICIT: height per row, width per orientation, capped
   with min-width:0 + max-width. This is the hard-won iOS invariant: flex's
   default min-width:auto lets WebKit floor a frame at the PHOTO's intrinsic
   width (700px thumbnails) once it loads — frames ballooned, the wall outgrew
   its slide distance, and the loop ran off the end into empty space (Chrome
   never inflates, which hid it). Fixed sizes mean nothing that loads can ever
   change the wall's geometry. */
.gframe {
  display: block; flex: 0 0 auto; min-width: 0; margin: 0; padding: 0;
  border: 0; background: #efe7d7; border-radius: 12px; overflow: hidden;
  cursor: pointer; line-height: 0; position: relative;
  height: 260px;
  transition: box-shadow .35s ease;
}
.gframe.landscape { width: 390px; max-width: 390px; }  /* 3:2 at 260 tall */
.gframe.portrait  { width: 195px; max-width: 195px; }  /* 3:4 at 260 tall */
/* No zoom/transform on the photo. A scaled photo overflows its frame, and
   Safari does NOT clip a transformed child inside a rounded, overflow-hidden
   box — on iOS every photo bled over its neighbours and the gaps vanished. */
.gframe img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gframe:hover { box-shadow: 0 10px 26px -8px rgba(0,0,0,.45); }
@media (max-width: 899px) {
  .gframe { height: 160px; }
  .gframe.landscape { width: 240px; max-width: 240px; }
  .gframe.portrait  { width: 120px; max-width: 120px; }
}

/* ---------- Footer partner-site logos (compact single line) ---------- */
.partner-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.75rem; }
.partner-logo { display: inline-flex; align-items: center; justify-content: center; transition: transform .3s ease; }
.partner-logo img { height: 100px; width: auto; display: block; }
.partner-logo:hover { transform: translateY(-2px) scale(1.08); }
@media (max-width: 480px) { .partner-logos { gap: 1.1rem; } .partner-logo img { height: 74px; } }

/* ---------- FAQ accordion ---------- */
.faq-item {
  background: #fff;
  border: 1px solid rgba(28,26,23,.08);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.faq-item.open {
  border-color: rgba(21,119,190,.4);
  box-shadow: 0 18px 34px -24px rgba(28,26,23,.45);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 1.02rem;
  color: #1C1A17;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.faq-chevron { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; color: var(--brand); transition: transform .3s ease; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a p { padding: 0 1.5rem 1.35rem; font-weight: 300; color: rgba(43,38,32,.72); }

/* ---------- Contact ---------- */
.contact-card {
  background: #241f1b;
  border: 1px solid rgba(245,240,230,.08);
  border-radius: 18px;
  padding: 2rem;
}
.field-label {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .76rem;
  color: rgba(245,240,230,.7);
  margin-bottom: .4rem;
}
.field {
  width: 100%;
  background: rgba(245,240,230,.06);
  border: 1px solid rgba(245,240,230,.15);
  border-radius: 10px;
  padding: .72rem .9rem;
  color: #F5F0E6;
  font-weight: 300;
  transition: all .2s ease;
}
.field::placeholder { color: rgba(245,240,230,.4); }
.field:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(245,240,230,.1);
  box-shadow: 0 0 0 3px rgba(21,119,190,.15);
}
select.field option { color: #1C1A17; }

.contact-detail {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(245,240,230,.05);
  border: 1px solid rgba(245,240,230,.1);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  color: rgba(245,240,230,.9);
  transition: all .25s ease;
}
a.contact-detail:hover {
  background: rgba(21,119,190,.12);
  border-color: rgba(21,119,190,.35);
  transform: translateX(3px);
}
.contact-ic {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(21,119,190,.18);
  color: var(--brand);
}
.contact-ic--wa { background: rgba(37,211,102,.18); color: #25D366; }
.contact-label {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  color: rgba(245,240,230,.55);
}

.social-ic {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(245,240,230,.08);
  color: rgba(245,240,230,.8);
  transition: all .25s ease;
}
.social-ic:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }

/* ---------- Footer ---------- */
.footer-h {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .95rem;
  color: #F5F0E6;
  margin-bottom: 1rem;
}
.footer-link { transition: color .2s ease; }
.footer-link:hover { color: var(--brand); }

/* ---------- Stop the page being draggable sideways ----------
   AOS's "fade-left" reveal starts an element 100px to the RIGHT and only
   slides it home once you scroll it into view. #carrier sits far down the
   page, so it parked 100px off-screen for most of a visit and made the page
   ~68px wider than the screen (a sideways wobble on phones).
   These two sections are the only ones using fade-left.
   overflow-x:clip, NOT hidden — `hidden` would turn the section into a
   scroll container (which can break sticky/smooth scrolling); `clip` just
   trims the overhang and leaves the animation intact. */
#about, #carrier { overflow-x: clip; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
  .band-bg { background-attachment: scroll; }
  .grow, .grow.is-sliding { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* iOS: avoid fixed-attachment jank */
@media (max-width: 768px) {
  .band-bg { background-attachment: scroll; }
}