/* Moonstone Lanka — "Ocean & sunset" bright theme (preview: loaded after styles.css on the home page).
   Turquoise ocean, sunset coral and sunshine yellow on white, deep navy type. Bold Poppins headings with
   handwritten Caveat lines above them; the moonstone and Sinhala greeting stay as brand signatures. */
:root {
  --ocean: #0096c7;
  --ocean-2: #00b4d8;
  --ocean-soft: #e4f6fb;
  --navy: #0b2545;
  --navy-2: #13315c;
  --coral: #ff6b4a;
  --coral-2: #ff8466;
  --coral-soft: #ffe9e2;
  --sun: #ffc43d;
  --sun-soft: #fff4d6;
  --leaf: #2bb39a;

  /* Remap the original tokens so shared components pick up the new look. */
  --mist: #f3f9fc;
  --paper: #ffffff;
  --tea: var(--navy);
  --tea-2: var(--navy-2);
  --tea-3: var(--ocean);
  --ink: #1d2b3a;
  --muted: #5f6f80;
  --line: #e2ecf2;
  --saffron: var(--coral);
  --saffron-soft: var(--coral-soft);
  --saffron-ink: #b23a1c;
  --lagoon: var(--ocean);
  --lagoon-soft: var(--ocean-soft);
  --f-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-script: 'Caveat', 'Segoe Script', cursive;
  --r-img: 16px;
  --r-ui: 14px;
  --shadow: 0 18px 40px -22px rgba(11, 37, 69, .35);
  --shadow-lg: 0 30px 60px -28px rgba(11, 37, 69, .45);
}

body.theme-bright { background: #fff; color: var(--ink); font-size: 15.5px; line-height: 1.7; }
.theme-bright h1, .theme-bright h2, .theme-bright h3, .theme-bright h4 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
.theme-bright h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.15; }
.theme-bright a { color: var(--ocean); }
.theme-bright a:hover { color: var(--coral); }
.theme-bright :focus-visible { outline-color: var(--ocean); }
.bx-script { font-family: var(--f-script); font-weight: 700; font-size: 1.65rem; line-height: 1; color: var(--coral); margin: 0 0 8px; }

/* ---------- buttons ---------- */
.theme-bright .btn { border-radius: 8px; border-color: var(--coral); background: var(--coral); color: #fff; font-weight: 600; font-size: .95rem; padding: 13px 26px; box-shadow: 0 10px 22px -12px rgba(255, 107, 74, .9); transition: transform .2s, background .2s, box-shadow .2s; }
.theme-bright .btn:hover { background: var(--coral-2); border-color: var(--coral-2); color: #fff; transform: translateY(-2px); }
.theme-bright .btn.ghost { background: transparent; color: var(--navy); border-color: var(--navy); box-shadow: none; }
.theme-bright .btn.ghost:hover { background: var(--navy); color: #fff; }
.theme-bright .btn.ghost.light { color: #fff; border-color: rgba(255, 255, 255, .85); }
.theme-bright .btn.ghost.light:hover { background: #fff; color: var(--navy); }
.theme-bright .btn.small { padding: 8px 18px; font-size: .85rem; }

/* ---------- top bar + header ---------- */
.theme-bright .topbar { display: block; background: var(--navy); color: #c9d6e6; font-size: .8rem; }
.topbar-inner { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.topbar-left, .topbar-right { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: var(--sun); }
.topbar strong { color: var(--sun); font-weight: 600; }
.topbar-left > * + *::before, .topbar-right > * + *::before { content: '•'; color: var(--ocean-2); margin-right: 22px; margin-left: -12px; }
@media (max-width: 700px) { .topbar-right { display: none; } .topbar-left a[href^="mailto"] { display: none; } }

.theme-bright .site-header { background: rgba(255, 255, 255, .97); border-bottom: 0; box-shadow: 0 8px 30px -18px rgba(11, 37, 69, .35); }
.theme-bright .header-inner { min-height: 76px; }
.theme-bright .brand { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; color: var(--navy); letter-spacing: -.01em; }
.theme-bright .brand svg, .theme-bright .brand .brand-logo { width: 40px; height: 40px; }
.theme-bright .nav > li > a, .theme-bright .nav > li > button { font: 500 .92rem var(--f-body); color: var(--navy); border-radius: 6px; }
.theme-bright .nav > li > a:hover, .theme-bright .nav > li > button:hover, .theme-bright .nav > li > button[aria-expanded="true"], .theme-bright .nav > li > a[aria-current="page"] { background: transparent; color: var(--coral); }
@media (min-width: 1021px) {
  .theme-bright .nav > li + li:not(:last-child)::before { content: ''; position: absolute; left: -2px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--ocean-2); transform: translateY(-50%); }
}
.theme-bright .nav .cta-link { background: var(--coral) !important; color: #fff !important; padding: 12px 22px; border-radius: 8px; margin-left: 14px; box-shadow: 0 10px 22px -12px rgba(255, 107, 74, .9); }
.theme-bright .nav .cta-link:hover { background: var(--coral-2) !important; }
.theme-bright .dropdown { border: 0; border-top: 3px solid var(--coral); border-radius: 0 0 12px 12px; box-shadow: var(--shadow-lg); padding: 10px; }
.theme-bright .dropdown a { color: var(--navy); font-weight: 500; }
.theme-bright .dropdown a:hover { background: var(--ocean-soft); color: var(--ocean); }

/* ---------- hero ---------- */
/* --pw: width of the navy panel. It follows the centred content column (wrap edge + gutter + text width + room for
   the brush edge), so the headline always stays inside the panel at any screen width. The photo starts under the
   panel's brush edge and fills the rest, so its subject is never hidden behind the panel. */
.bx-hero { --pw: calc(max(0px, (100% - var(--wrap)) / 2) + 40px + 720px); position: relative; isolation: isolate; background: var(--navy); min-height: clamp(560px, 82vh, 760px); display: flex; align-items: center; color: #fff; overflow: hidden; }
.bx-hero-photo { position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--pw) - 110px); z-index: -2; background: var(--navy) center / cover no-repeat; }
/* Navy panel with a brush-stroke right edge over the left of the photo (City Tour / Tourism themes). */
.bx-hero::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--pw); z-index: -1;
  /* A fixed 120 px brush-stroke edge on a solid panel, so the edge's wiggle doesn't grow with screen width. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 400' preserveAspectRatio='none'%3E%3Cpath d='M0 0h40c-14 22 10 38-8 62 22 18-6 40 14 64-18 20 8 44-10 70 24 22-4 46 16 72-20 24 6 44-14 66 18 20-4 40 10 66H0Z' fill='%230b2545' fill-opacity='.93'/%3E%3C/svg%3E") right / 120px 100% no-repeat,
    linear-gradient(rgba(11, 37, 69, .93), rgba(11, 37, 69, .93)) left / calc(100% - 119px) 100% no-repeat; }
.bx-hero-photo .photo-credit { right: 16px; bottom: 90px; }
.bx-hero-inner { padding-top: 64px; padding-bottom: 120px; }
.bx-hero-copy { max-width: 560px; }
.bx-greet { color: var(--sun); font-size: 1.9rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.bx-greet .sinhala { font-family: var(--f-sinhala); font-size: 1.6rem; font-weight: 700; color: var(--sun); }
.bx-hero h1 { color: #fff; font-size: clamp(2.4rem, 5.4vw, 4.1rem); font-weight: 800; line-height: 1.05; margin: 10px 0 18px; max-width: 13ch; }
.bx-hl { color: var(--ocean-2); position: relative; white-space: nowrap; }
.bx-hl::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.08em; height: .18em; background: var(--coral); border-radius: 6px; transform: skewX(-12deg); z-index: -1; opacity: .9; }
.bx-lead { font-size: 1.05rem; color: #d7e3f0; max-width: 46ch; margin-bottom: 26px; }
.bx-stats { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; font-size: .85rem; color: #c9d6e6; }
.bx-stats strong { color: var(--sun); font-size: 1.05rem; }
.bx-hero .photo-credit { right: 16px; bottom: 90px; }

/* Quick planner as a floating search bar overlapping the hero */
.bx-search { position: relative; z-index: 5; margin-top: -64px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.7fr) auto; align-items: stretch; padding: 10px; gap: 0; }
.bx-field { display: flex; align-items: center; gap: 10px; padding: 12px 12px; min-width: 0; cursor: pointer; border-radius: 10px; }
.bx-field + .bx-field { border-left: 1px solid var(--line); }
.bx-field:hover { background: var(--ocean-soft); }
.bx-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ocean-soft); font-size: 1.1rem; }
.bx-field > span:last-child { display: grid; min-width: 0; flex: 1; }
.bx-label { font-weight: 600; color: var(--navy); font-size: .88rem; line-height: 1.2; }
.bx-field input, .bx-field select { font: 400 .88rem var(--f-body); color: var(--muted); border: 0; background: transparent; padding: 2px 0; width: 100%; min-width: 0; cursor: pointer; -moz-appearance: textfield; }
.bx-field input::-webkit-inner-spin-button { opacity: .5; }
.bx-field input:focus-visible, .bx-field select:focus-visible { outline: 2px solid var(--ocean); outline-offset: 2px; border-radius: 4px; }
.bx-go { align-self: center; margin: 0 6px; padding: 16px 28px !important; white-space: nowrap; }
@media (max-width: 1060px) {
  .bx-search { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .bx-field + .bx-field { border-left: 0; }
  .bx-field { border: 1px solid var(--line); }
  .bx-wide { grid-column: 1 / -1; }
  .bx-go { grid-column: 1 / -1; margin: 6px 0 2px; width: 100%; }
}

/* ---------- live strip ---------- */
.bx-live { padding: 44px 0 10px; }
.theme-bright .wx-banner { border-radius: 12px; }
.theme-bright .wx-banner.amber { background: var(--sun-soft); color: var(--ink); border-left: 5px solid var(--sun); box-shadow: none; }
.theme-bright .wx-banner.red { background: var(--coral-soft); color: var(--ink); border-left: 5px solid #d8432a; box-shadow: none; }
.theme-bright .lk-now-grid { grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); gap: 18px; }
.lk-clock { border-radius: 16px; padding: 22px 24px; color: #fff; background: linear-gradient(135deg, var(--ocean) 0%, var(--ocean-2) 100%); position: relative; overflow: hidden; }
.lk-clock::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.theme-bright .lk-clock h2 { color: rgba(255, 255, 255, .9); font: 600 .78rem var(--f-body); letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.theme-bright .lk-time { color: #fff; font-family: var(--f-display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 2.8rem); }
.lk-clock .small { color: rgba(255, 255, 255, .9); margin: 0 0 2px; }
.lk-wx { border-radius: 16px; padding: 20px 22px; background: var(--mist); }
.theme-bright .lk-wx-head h3 { font-size: 1.15rem; }
.theme-bright .lk-town { background: #fff; border: 0; border-radius: 14px; box-shadow: 0 8px 18px -14px rgba(11, 37, 69, .5); transition: transform .2s; }
.theme-bright .lk-town:hover { transform: translateY(-3px); }
.theme-bright .lk-temp { font-family: var(--f-display); font-weight: 700; color: var(--navy); }

/* ---------- section scaffolding ---------- */
.bx-band { padding: clamp(56px, 8vw, 104px) 0; position: relative; }
.bx-soft { background: var(--mist); }
.bx-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 40px; margin-bottom: 40px; }
.bx-head > div { max-width: 640px; }
.bx-head p.muted { margin: 0; }

/* ---------- intro with dotted island map ---------- */
.bx-intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; margin-bottom: 56px; }
.bx-intro-grid .btn { margin-top: 6px; }
.bx-map { position: relative; aspect-ratio: 10 / 17; justify-self: center; width: 100%; max-width: 290px; }
/* A dotted Sri Lanka: a dot grid masked by the island's outline, traced from real coastline coordinates
   (the inspirations use a dotted world map). Town pins in index.html sit at their true positions. */
.bx-map-dots { position: absolute; inset: 0; background: radial-gradient(circle, var(--ocean-2) 2.2px, transparent 2.7px) 0 0 / 11px 11px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 170' preserveAspectRatio='none'%3E%3Cpath d='M27.1 4.9L18.8 5.7L11.7 9.4L16.7 14.3L20.0 17.2L14.6 22.5L13.8 31.5L5.0 36.0L12.5 39.7L13.3 50.4L10.8 59.4L9.6 69.6L5.4 75.0L8.3 81.9L9.2 96.3L10.0 110.6L10.8 123.7L13.3 135.2L15.8 145.4L20.0 155.7L25.8 161.0L35.4 164.3L41.7 165.1L52.1 161.8L62.5 156.9L70.8 151.6L79.2 144.6L87.5 136.4L92.9 124.9L92.9 110.6L89.6 98.3L84.2 86.0L77.1 73.7L70.8 63.5L67.5 54.5L61.7 45.1L54.2 34.8L46.7 25.8L37.5 17.6L31.3 10.2Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 170' preserveAspectRatio='none'%3E%3Cpath d='M27.1 4.9L18.8 5.7L11.7 9.4L16.7 14.3L20.0 17.2L14.6 22.5L13.8 31.5L5.0 36.0L12.5 39.7L13.3 50.4L10.8 59.4L9.6 69.6L5.4 75.0L8.3 81.9L9.2 96.3L10.0 110.6L10.8 123.7L13.3 135.2L15.8 145.4L20.0 155.7L25.8 161.0L35.4 164.3L41.7 165.1L52.1 161.8L62.5 156.9L70.8 151.6L79.2 144.6L87.5 136.4L92.9 124.9L92.9 110.6L89.6 98.3L84.2 86.0L77.1 73.7L70.8 63.5L67.5 54.5L61.7 45.1L54.2 34.8L46.7 25.8L37.5 17.6L31.3 10.2Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; opacity: .6; }
.bx-intro .moonstone { width: 120px; height: 60px; margin: 0 0 14px; }
/* ---------- interactive route map ---------- */
.bx-route { justify-self: center; width: 100%; max-width: 380px; display: grid; gap: 10px; }
.bx-route .bx-map { max-width: 330px; margin: 0 auto; }
.bx-route-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bx-route-lines line { stroke: var(--coral); stroke-width: 1.5; stroke-linecap: round; transition: stroke-dashoffset .7s cubic-bezier(.22, .61, .36, 1); }
.bx-route-lines .bx-preview { stroke: var(--navy); stroke-width: 1; stroke-dasharray: 2.4 2 !important; stroke-dashoffset: 0 !important; opacity: .7; transition: none; }
/* Each pin is a button whose dot sits exactly on the place; the label sits to its right (or left near the east coast). */
.bx-pin { position: absolute; transform: translate(-9px, -50%); display: flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 .7rem var(--f-body); color: var(--navy); z-index: 1; }
.bx-pin.left { flex-direction: row-reverse; transform: translate(calc(-100% + 9px), -50%); }
.bx-pin.up { flex-direction: column-reverse; gap: 3px; transform: translate(-50%, calc(-100% + 9px)); }
.bx-pin.down { flex-direction: column; gap: 3px; transform: translate(-50%, -9px); }
.bx-pin-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid var(--coral); box-shadow: 0 0 0 4px rgba(255, 107, 74, .18); font-size: .62rem; font-weight: 700; line-height: 1; color: #fff; transition: transform .2s, background .2s; }
.bx-pin.airport .bx-pin-dot { border-color: var(--ocean); box-shadow: 0 0 0 4px rgba(0, 150, 199, .18); }
.bx-pin-label { background: #fff; padding: 2px 8px; border-radius: 999px; box-shadow: 0 6px 14px -8px rgba(11, 37, 69, .6); white-space: nowrap; transition: background .2s, color .2s; }
.bx-pin:hover .bx-pin-dot, .bx-pin:focus-visible .bx-pin-dot { transform: scale(1.25); }
.bx-pin:hover .bx-pin-label, .bx-pin:focus-visible .bx-pin-label { background: var(--navy); color: #fff; }
.bx-pin[aria-pressed="true"] { z-index: 2; }
.bx-pin[aria-pressed="true"] .bx-pin-dot { background: var(--coral); }
.bx-pin.airport[aria-pressed="true"] .bx-pin-dot { background: var(--ocean); }
.bx-pin[aria-pressed="true"] .bx-pin-label { background: var(--coral); color: #fff; }
.bx-pin:focus-visible { outline: none; }
.bx-pin:focus-visible .bx-pin-label { outline: 2px solid var(--ocean); outline-offset: 2px; }
.bx-leg-tip { position: absolute; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; background: var(--navy); color: #fff; font-size: .7rem; font-weight: 600; padding: 3px 9px; border-radius: 6px; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(11, 37, 69, .7); }
.bx-route-panel { font-size: .8rem; color: var(--muted); }
.bx-legs { list-style: none; margin: 0 0 6px; padding: 0; counter-reset: leg; }
.bx-legs li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.bx-legs li span:first-child { color: var(--navy); font-weight: 500; }
.bx-legs em { font-style: normal; color: #c2410c; font-weight: 600; }
.bx-total { margin: 6px 0 8px; color: var(--navy); font-size: .85rem; }
.bx-route-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bx-chip-btn { font: 600 .75rem var(--f-body); color: var(--navy); background: var(--ocean-soft); border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; text-decoration: none; }
.bx-chip-btn:hover { background: var(--navy); color: #fff !important; }
.theme-bright .bx-chip-cta { background: var(--coral); color: #fff; }
.bx-route-note { margin: 0; font-size: .72rem; line-height: 1.45; }
@media (max-width: 820px) { .bx-intro-grid { grid-template-columns: 1fr; } .bx-route .bx-map { max-width: 300px; } }

/* essentials tiles: brighter, rounder, ocean overlay */
.theme-bright .ess { border-radius: 18px; background: var(--navy); box-shadow: var(--shadow); }
.theme-bright .ess, .theme-bright .ess:hover { color: #fff; } /* not the blue link colour */
.theme-bright .ess::before { background: linear-gradient(180deg, rgba(11, 37, 69, 0) 35%, rgba(11, 37, 69, .55) 65%, rgba(11, 37, 69, .9) 100%); }
.theme-bright .ess::after { display: none; }
.theme-bright .ess-body::before { background: linear-gradient(180deg, rgba(0, 150, 199, .82) 0%, rgba(11, 37, 69, .94) 100%); }
.theme-bright .ess-title { font-weight: 700; letter-spacing: -.01em; }
.theme-bright .ess-fact { background: var(--sun); color: var(--navy); border-radius: 6px; }
.theme-bright .ess-cta { color: var(--sun); }
.theme-bright .ess:focus-visible { outline-color: var(--sun); }

/* ---------- arch destination cards ---------- */
.bx-arches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.bx-arch { position: relative; display: block; aspect-ratio: 3 / 4.6; border-radius: 999px 999px 18px 18px; overflow: hidden; isolation: isolate; text-decoration: none; color: #fff; box-shadow: var(--shadow); }
.bx-arch:nth-child(even) { transform: translateY(26px); }
.bx-arch-img, .bx-arch-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.bx-arch::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 37, 69, 0) 38%, rgba(11, 37, 69, .7) 62%, rgba(11, 37, 69, .95) 100%); }
.bx-arch:hover img { transform: scale(1.08); }
.theme-bright .bx-arch, .theme-bright .bx-arch:hover { color: #fff; }
.bx-arch-name { text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
.bx-arch-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 16px; display: grid; gap: 2px; text-align: center; }
.bx-arch-region { font-family: var(--f-script); font-size: 1.25rem; color: var(--sun); line-height: 1; }
.bx-arch-name { font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.bx-arch-meta { font-size: .78rem; opacity: .9; }
@media (max-width: 1000px) { .bx-arches { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bx-arch:nth-child(even) { transform: none; } }
@media (max-width: 620px) { .bx-arches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- tour cards (wildlife) ---------- */
.bx-tours, .bx-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 30px); }
.bx-tour { background: #fff; border-radius: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.bx-tour:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.bx-tour-img { display: block; aspect-ratio: 16 / 11; overflow: hidden; }
.bx-tour-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.bx-tour:hover .bx-tour-img img { transform: scale(1.06); }
.bx-tour-strip { margin: -22px 18px 0; position: relative; background: #fff; border-radius: 10px; box-shadow: 0 10px 24px -14px rgba(11, 37, 69, .55); display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; font-size: .78rem; color: var(--muted); }
.bx-tour-body { padding: 18px 22px 8px; flex: 1; }
.bx-tour-body h3 { font-size: 1.2rem; margin: 0 0 4px; }
.bx-tour-body h3 a { color: var(--navy); text-decoration: none; }
.bx-tour-body h3 a:hover { color: var(--coral); }
.bx-tour-where { font-size: .82rem; color: var(--ocean); margin: 0 0 10px; }
.bx-tour-text { font-size: .9rem; color: var(--muted); margin: 0; }
.bx-tour-foot { display: flex; justify-content: space-between; align-items: center; margin: 14px 22px 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.bx-price { display: grid; text-align: right; font-weight: 800; font-size: 1.45rem; color: var(--navy); line-height: 1.1; }
.bx-price small { font-weight: 400; font-size: .75rem; color: var(--muted); }
@media (max-width: 900px) { .bx-tours, .bx-posts { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }

/* ---------- photo band (train to Ella) ---------- */
.bx-photo-band { position: relative; isolation: isolate; background: var(--navy) center / cover no-repeat; padding: clamp(80px, 12vw, 150px) 0; }
.bx-photo-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 37, 69, .15), rgba(11, 37, 69, 0)); }
.bx-photo-card { max-width: 520px; background: var(--coral); color: #fff; border-radius: 20px; padding: clamp(26px, 4vw, 40px); box-shadow: var(--shadow-lg); }
.bx-photo-card .bx-script { color: var(--sun); }
.bx-photo-card h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.bx-photo-card p { color: #fff; }
.theme-bright .bx-photo-card .btn { background: #fff; color: var(--coral); border-color: #fff; box-shadow: none; }
.theme-bright .bx-photo-card .btn.ghost { background: transparent; color: #fff; }
.theme-bright .bx-photo-card .btn.ghost:hover { background: #fff; color: var(--coral); }

/* ---------- blog cards (news) ---------- */
.bx-post { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.bx-post:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.bx-post-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.bx-post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.bx-post:hover .bx-post-img img { transform: scale(1.06); }
.bx-post-date { position: absolute; left: 16px; bottom: 16px; background: var(--coral); color: #fff; font-size: .75rem; font-weight: 600; padding: 5px 12px; border-radius: 6px; }
.bx-post-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bx-tag { align-self: flex-start; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ocean); }
.bx-post-body h3 { font-size: 1.08rem; line-height: 1.35; margin: 0; }
.bx-post-body h3 a { color: var(--navy); text-decoration: none; }
.bx-post-body h3 a:hover { color: var(--coral); }
.bx-post-body p { font-size: .88rem; color: var(--muted); margin: 0; flex: 1; }
.bx-more { font-weight: 600; font-size: .88rem; color: var(--coral) !important; text-decoration: none; }

/* ---------- brush-edged CTA cards ---------- */
.bx-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 30px); }
.bx-brush { position: relative; isolation: isolate; display: block; min-height: 300px; border-radius: 20px; overflow: hidden; text-decoration: none; color: #fff; box-shadow: var(--shadow); }
/* The photo fills only the right side; the coloured brush panel just overlaps its left edge, so people in the
   photo (faces) stay visible. Each photo's focus point (images.js) decides the crop. */
.bx-brush > img { position: absolute; top: 0; bottom: 0; right: 0; width: 46%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s ease; }
.bx-brush { background: var(--b, var(--ocean)); }
.bx-brush:hover > img { transform: scale(1.06); }
.theme-bright .bx-brush, .theme-bright .bx-brush:hover { color: #fff; }
.bx-brush-panel { position: relative; display: flex; flex-direction: column; gap: 10px; width: 60%; min-height: 100%; padding: 30px 40px 30px 30px; }
.bx-brush-panel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--b, var(--ocean)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' preserveAspectRatio='none'%3E%3Cpath d='M0 0h268c-10 18 8 30-6 48 16 16-4 34 10 52-14 18 6 36-8 54 18 18-4 36 12 56-16 20 4 36-10 52 12 16-2 28 8 38H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' preserveAspectRatio='none'%3E%3Cpath d='M0 0h268c-10 18 8 30-6 48 16 16-4 34 10 52-14 18 6 36-8 54 18 18-4 36 12 56-16 20 4 36-10 52 12 16-2 28 8 38H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100%; opacity: .95; }
.bx-brush.coral { --b: var(--coral); }
.bx-brush.ocean { --b: var(--ocean); }
.bx-brush-ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); font-size: 1.5rem; }
.bx-brush-title { font-weight: 700; font-size: 1.35rem; line-height: 1.2; }
.bx-brush-text { font-size: .88rem; opacity: .95; }
.bx-brush-cta { margin-top: auto; font-weight: 600; color: var(--sun); }
.bx-brush.coral .bx-brush-cta { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
/* Phones: photo on top, text below, so nothing covers the people in the photo. */
@media (max-width: 820px) {
  .bx-duo { grid-template-columns: minmax(0, 1fr); }
  .bx-brush { display: flex; flex-direction: column; min-height: 0; }
  .bx-brush > img { position: static; width: 100%; height: 210px; order: -1; }
  .bx-brush-panel { width: 100%; min-height: 0; padding: 22px 24px 26px; }
  .bx-brush-panel::before { -webkit-mask: none; mask: none; opacity: 1; }
}

/* ---------- footer ---------- */
.theme-bright .motif { display: none; }
.theme-bright .site-footer { background: var(--navy) radial-gradient(circle at 85% 0%, rgba(0, 180, 216, .22), transparent 45%); color: #b9c7d8; border-top: 4px solid var(--coral); }
.theme-bright .site-footer h4 { color: #fff; font-family: var(--f-display); font-weight: 600; }
.theme-bright .site-footer a { color: #e3ecf5; }
.theme-bright .site-footer a:hover { color: var(--sun); }
.theme-bright .footer-base { border-top-color: rgba(255, 255, 255, .12); }
.theme-bright .footer-thanks { color: var(--sun); }
.theme-bright .fx-pill { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- imagery grade ----------
   Vivid, warm and crisp like the reference style (aerial, golden-hour travel photography), so older
   Wikimedia photos sit comfortably next to the new ones. Kept subtle: skin and food colours stay natural. */
.theme-bright img[data-img], .theme-bright .bx-arch img, .theme-bright .bx-tour-img img, .theme-bright .bx-post-img img { filter: saturate(1.16) contrast(1.06) brightness(1.02); }

/* ---------- scroll reveal (only when JS adds .bx-anim and motion is allowed) ---------- */
.bx-anim [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1); }
.bx-anim [data-reveal].in { opacity: 1; transform: none; }

/* Tablets and phones: the photo fills the hero and the navy panel becomes a full-width see-through layer. */
@media (max-width: 1020px) {
  .bx-hero-photo { left: 0; }
  .bx-hero::before { width: 100%; background: linear-gradient(90deg, rgba(11, 37, 69, .92) 0%, rgba(11, 37, 69, .78) 60%, rgba(11, 37, 69, .55) 100%); }
  .bx-hero-inner { padding-bottom: 100px; }
}
@media (max-width: 520px) {
  .bx-ico { display: none; }
  .bx-field { padding: 10px 12px; }
  .topbar-left > * + *::before { display: none; }
  .bx-hero .photo-credit { bottom: auto; top: 10px; }
}
@media (max-width: 760px) {
  .bx-hero { background-position: 70% center; min-height: auto; }
  .bx-hero-inner { padding-top: 48px; }
  .bx-search { margin-top: -48px; }
  .theme-bright .lk-now-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ================= Inner pages ================= */
/* Remaining heritage tokens → the bright palette (dark sections, logo previews and any leftovers). */
:root { --teak: var(--navy); --teak-2: var(--navy-2); --teak-3: #26466e; }

/* Page banner: photo under a navy wash, white headline, pill breadcrumb, soft wave into the page. */
.theme-bright .page-hero { background-color: var(--navy); }
.theme-bright .page-hero::before { background: linear-gradient(90deg, rgba(11, 37, 69, .93) 0%, rgba(11, 37, 69, .72) 50%, rgba(11, 37, 69, .18) 100%); }
.theme-bright .page-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 34px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V18c120-14 260-20 420-8s300 18 460 6S1120 0 1200 4v30Z' fill='%23fff'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; }
.theme-bright .page-hero .wrap { padding-bottom: clamp(64px, 9vw, 104px); }
.theme-bright .page-hero h1 { color: #fff; font-weight: 800; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; }
.theme-bright .page-hero p { color: #d7e3f0; font-size: 1.05rem; }
.theme-bright .crumbs { display: inline-block; color: #c9d6e6; background: rgba(255, 255, 255, .1); padding: 4px 14px; border-radius: 999px; font-size: .8rem; }
.theme-bright .crumbs a { color: var(--sun); text-decoration: none; }
.theme-bright .crumbs a:hover { text-decoration: underline; }

/* Sections */
.theme-bright .band.paper { background: var(--mist); }
.theme-bright .band.dark { background: var(--navy) radial-gradient(circle at 90% 0%, rgba(0, 180, 216, .2), transparent 50%); color: #d7e3f0; }
.theme-bright .band.dark h2, .theme-bright .band.dark h3, .theme-bright .band.dark h4 { color: #fff; }
.theme-bright .band.dark a { color: var(--sun); }
.theme-bright .band.dark .muted { color: #b9c7d8; }
.theme-bright .band.dark a.btn:not(.ghost), .theme-bright .band.dark a.btn:not(.ghost):hover { color: #fff; }
.theme-bright .band.dark .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .8); }
.theme-bright .band.dark .panel { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); box-shadow: none; }
.theme-bright .lede { color: var(--muted); }

/* Panels, tiles, facts */
.theme-bright .panel { border: 0; border-radius: 18px; box-shadow: var(--shadow); background: #fff; }
.theme-bright .panel.flat { box-shadow: none; background: var(--mist); }
.theme-bright .panel-media img, .theme-bright .tile figure { border-radius: 14px; }
.theme-bright .tile h3 { color: var(--navy); }
.theme-bright .tile:hover h3 { color: var(--coral); }
.theme-bright .facts li { border-top-color: var(--ocean); }

/* Notes */
.theme-bright .note { border-radius: 12px; border-left-width: 5px; }
.theme-bright .note.gold { border-color: var(--sun); background: var(--sun-soft); }
.theme-bright .note.warn { border-color: #d8432a; background: var(--coral-soft); }
.theme-bright .note strong:first-child { color: var(--navy); }

/* Tables */
.theme-bright .table-wrap { border: 0; border-radius: 16px; box-shadow: var(--shadow); background: #fff; }
.theme-bright th { background: var(--ocean-soft); color: var(--navy); }
.theme-bright th, .theme-bright td { border-bottom-color: var(--line); }
.theme-bright .est { color: var(--saffron-ink); }

/* Filter buttons and choice chips */
.theme-bright .filters button { border-color: var(--line); background: #fff; color: var(--navy); font-weight: 500; transition: background .2s, color .2s, border-color .2s; }
.theme-bright .filters button:hover { border-color: var(--ocean); color: var(--ocean); }
.theme-bright .filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.theme-bright .chip.saffron { background: var(--sun-soft); color: #8a5a00; }

/* Forms */
.theme-bright .field label, .theme-bright .field legend, .theme-bright .ce-lbl { color: var(--navy); }
.theme-bright input:not([type]), .theme-bright input[type=file], .theme-bright input[type=text], .theme-bright input[type=email], .theme-bright input[type=tel],
.theme-bright input[type=number], .theme-bright input[type=date], .theme-bright input[type=time], .theme-bright input[type=url], .theme-bright input[type=password],
.theme-bright select, .theme-bright textarea { border-color: #cfdee8; border-radius: 10px; }
.theme-bright input:focus, .theme-bright select:focus, .theme-bright textarea:focus { border-color: var(--ocean); outline: 3px solid rgba(0, 150, 199, .18); }
.theme-bright .checks label { border-color: #cfdee8; transition: background .2s, border-color .2s; }
.theme-bright .checks label:hover { border-color: var(--ocean); }
.theme-bright .checks input { accent-color: var(--ocean); }
.theme-bright .checks label:has(input:checked) { background: var(--ocean); border-color: var(--ocean); color: #fff; }
.theme-bright .combo-list, .theme-bright .combo-add { border-color: #cfdee8; }
.theme-bright .form-status.ok { color: #0f7a5f; }

/* Planner steps and itinerary */
.theme-bright .steps li { border-top-width: 4px; border-radius: 2px; }
.theme-bright .steps li.active { border-color: var(--coral); color: var(--navy); }
.theme-bright .steps li.done { border-color: var(--ocean); }
.theme-bright .day-num { font-family: var(--f-display); color: var(--coral); }
.theme-bright .day-num b { font-weight: 800; }
.theme-bright .day .slot { color: var(--ocean); }
.theme-bright .total-line { font-weight: 800; color: var(--navy); }

/* Listings (directory) */
.theme-bright .listing { border: 0; border-radius: 18px; box-shadow: var(--shadow); }
.theme-bright .listing img { border-radius: 12px; }
.theme-bright .listing .price { font-weight: 800; color: var(--navy); }

/* Month strips: ocean for the best months, light ocean for good ones */
.theme-bright .months span { background: #eef3f7; color: var(--muted); border-radius: 4px; }
.theme-bright .months span.good { background: var(--ocean); color: #fff; font-weight: 600; }
.theme-bright .months span.ok { background: #a8e1ef; color: var(--navy); }
.theme-bright .band.dark .months span { background: rgba(255, 255, 255, .08); color: #b9c7d8; }
.theme-bright .band.dark .months span.good { background: var(--sun); color: var(--navy); }
.theme-bright .band.dark .months span.ok { background: rgba(0, 180, 216, .5); color: #fff; }

/* Modal, admin editor */
.theme-bright dialog::backdrop { background: rgba(11, 37, 69, .6); }
.theme-bright .ce-savebar { background: #fff; }
.theme-bright .ce-nav button:hover { background: var(--ocean-soft); }

/* Text-heavy pages (privacy & terms): reading-size section headings */
.theme-bright.doc h2 { font-size: 1.45rem; margin-top: 1.6em; }

/* Footer rate pill: a rounded card rather than a pill, so the two lines sit comfortably. */
.theme-bright .fx-pill { border-radius: 12px; padding: 8px 14px; border-color: rgba(255, 255, 255, .18); }
.theme-bright .fx-pill-rate { color: var(--sun); }

/* Headline line spacing: Poppins Extra-Bold needs more room between lines than the old serif. */
.theme-bright .page-hero h1 { line-height: 1.18; }
.bx-hero h1 { line-height: 1.12; }
.theme-bright h2 { line-height: 1.22; }
.theme-bright h3 { line-height: 1.3; }

/* Footer on small phones: columns may shrink, long words (e.g. @moonstonelanka) wrap instead of widening the page. */
.theme-bright .footer-grid > * { min-width: 0; }
.theme-bright .site-footer a, .theme-bright .site-footer li { overflow-wrap: anywhere; }

/* Footer on phones and tablets: the brand column spans the full width so the name never runs into the link columns. */
@media (max-width: 900px) { .theme-bright .footer-grid > :first-child { grid-column: 1 / -1; } }

/* Home hero: room between the handwritten greeting and the headline. */
.bx-greet { line-height: 1.25; margin-bottom: 14px; }

/* Clock card: decorative circle drawn inside the card (no overflow). */
.lk-clock { background: radial-gradient(circle at 100% 100%, rgba(255, 255, 255, .14) 0 75px, transparent 76px), linear-gradient(135deg, var(--ocean) 0%, var(--ocean-2) 100%); overflow: visible; }
.lk-clock::after { display: none; }

/* Money: breathing room between each rate label and its big number. */
.theme-bright .usd .big { margin-top: 6px; line-height: 1.15; }
/* Tables: keep the first column wide enough that names don't wrap word by word on phones (the table scrolls sideways instead). */
.theme-bright .table-wrap td:first-child, .theme-bright .table-wrap th:first-child { min-width: 9.5em; }
/* Weather cards: room for the emoji above the town name. */
.theme-bright .wx-icon { line-height: 1.25; margin-bottom: 6px; }
/* Route map on narrow phones: Arugam Bay sits on the east edge, so its label ends at the dot instead of centring over it. */
@media (max-width: 420px) { .bx-pin.up[data-town="arugam"] { align-items: flex-end; transform: translate(calc(-100% + 9px), calc(-100% + 9px)); } }

/* Day timelines: the time sits in its own column ("9:00 am –") and wrapped lines stay under the text, not under the time. */
.theme-bright .day li { position: relative; padding-left: 82px; }
.theme-bright .day li .slot { position: absolute; left: 0; top: 0; min-width: 0; line-height: inherit; font-size: .78rem; white-space: nowrap; }

/* SIM cards: signal bars grow left to right from a common baseline, on their own line in every card. */
.theme-bright .sim-cov { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.theme-bright .bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 19px; }
.theme-bright .bars i { display: block; width: 5px; border-radius: 2px; background: #d3e4ec; }
.theme-bright .bars i.on { background: var(--ocean); }

/* Logo: the illustrated island mark. On the navy footer it sits on a white disc so the dark outlines stay visible. */
.theme-bright .brand .brand-logo { width: 56px; height: 56px; }
.theme-bright .site-footer .brand .brand-logo { width: 56px; height: 56px; padding: 4px; background: #fff; border-radius: 50%; }
@media (max-width: 420px) { .theme-bright .site-header .brand .brand-logo { width: 42px; height: 42px; } }