/* East Jeanna Travel and Tours. Motif: the pearl in the pink shell from their logo. Palawan stops are pearls on a
   string; shell-curved frames hold their real trip photos. Palette from the logo: navy, hot pink, lagoon teal, pearl. */
@font-face { font-family: "Playfair Display"; src: url(/fonts/playfair.woff2) format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url(/fonts/playfair-italic.woff2) format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/inter-400-700.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: Yellowtail; src: url(/fonts/yellowtail.woff2) format("woff2"); font-display: swap; }

:root {
  --navy: #10294a;
  --navy-2: #0a1c34;
  --pink: #e8197c;
  --pink-d: #c0135f;
  --teal: #0fa3b1;
  --lagoon: #bfeef0;
  --pearl: #fbf7f3;
  --shell: #f8d9c8;
  --ink: #14213a;
  --serif: "Playfair Display", Georgia, serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --script: Yellowtail, "Brush Script MT", cursive;
  --pearl-orb: radial-gradient(circle at 34% 30%, #fff 0 12%, #fdf3ee 22%, #f3d6cf 48%, #d9c6d8 68%, #a9c7cf 86%, #8fb3bd 100%);

  --k-ink: var(--ink);
  --k-muted: #55607a;
  --k-paper: #ffffff;
  --k-surface: #f3efe9;
  --k-line: #e3dcd2;
  --k-accent: var(--pink);
  --k-accent-ink: #fff;
  --k-accent-2: var(--teal);
  --k-dark: var(--navy-2);
  --k-dark-muted: #b9c6da;
  --k-font: var(--sans);
  --k-display: var(--serif);
  --k-display-weight: 600;
  --k-head-em: var(--pink-d);
  --k-sec-pad: clamp(44px, 7vw, 88px);
  --k-form-bg: var(--navy);
  --k-dock-bg: var(--navy-2);
  --k-dock-cta-bg: var(--pink);
  --k-dock-cta-ink: #fff;
  --k-chat-head: var(--navy);
  --k-radius: 14px;
}

body { margin: 0; background: var(--pearl); color: var(--ink); font: 400 16px/1.6 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.08; margin: 0 0 16px; }
h2 em, h1 em { font-style: italic; color: var(--pink-d); font-weight: 500; }
img { max-width: 100%; height: auto; display: block; }
.ej-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ej-eyebrow, .ej-kicker { font: 600 .74rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--teal); margin: 0 0 12px; }
.ej-eyebrow--light { color: var(--lagoon); }
.ej-dim { opacity: .7; letter-spacing: .06em; }
.ej-btn-pink { background: linear-gradient(180deg, #ff3d95, var(--pink) 60%, var(--pink-d)); color: #fff; box-shadow: 0 12px 28px -12px rgba(232,25,124,.85); }
.ej-btn-glass { background: rgba(10,28,52,.35); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75); backdrop-filter: blur(4px); }
.ej-btn-wa { background: #1fa855; color: #fff; box-shadow: 0 12px 28px -14px rgba(31,168,85,.9); }
.ej-btn-wa::before { content: ""; width: 18px; height: 18px; margin-right: 8px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.5-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .5l-.3.5-.4.5c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.3 2.4 1.5.3.1.5.1.6-.1l.9-1.1c.2-.3.4-.2.7-.1l1.9.9c.3.1.5.2.5.3.1.2.1.7-.1 1.3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.5-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .5l-.3.5-.4.5c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.3 2.4 1.5.3.1.5.1.6-.1l.9-1.1c.2-.3.4-.2.7-.1l1.9.9c.3.1.5.2.5.3.1.2.1.7-.1 1.3z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* the seal: their own pearl-in-shell logo in a pearl ring */
.ej-seal { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(232,25,124,.7), 0 14px 30px -10px rgba(0,0,0,.5); margin-bottom: 18px; }
.ej-seal--sm { width: 64px; height: 64px; }

/* shell frame: a scallop-curved top like the open shell in their logo */
.ej-shell { margin: 0; border-radius: 48% 48% 14px 14px / 30% 30% 14px 14px; overflow: hidden; position: relative; background: var(--shell); box-shadow: 0 0 0 6px var(--pearl), 0 0 0 7px rgba(232,25,124,.35), 0 24px 40px -24px rgba(16,41,74,.45); }
.ej-shell img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }

/* ---------- hero ---------- */
.ej-hero { position: relative; min-height: min(94svh, 860px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--navy-2); }
.ej-hero__bg, .ej-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ej-hero__bg img { animation: ej-drift 24s ease-out both; }
@keyframes ej-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
.ej-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,28,52,.45) 0%, rgba(10,28,52,0) 26%, rgba(10,28,52,.1) 48%, rgba(10,28,52,.86) 100%); }
.ej-hero__copy { position: relative; padding-top: 96px; padding-bottom: clamp(30px, 6vw, 64px); }
.ej-hero .ej-kicker { color: var(--shell); }
.ej-hero h1 { font-size: clamp(2.5rem, 7.4vw, 5.2rem); line-height: 1.02; margin: 0 0 14px; max-width: 13ch; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.ej-hero h1 em { color: #fff; font-family: var(--script); font-weight: 400; font-size: 1.15em; letter-spacing: 0; color: #ffd1e6; }
.ej-hero__sub { max-width: 34rem; font-size: clamp(1rem, 2.2vw, 1.15rem); margin: 0 0 22px; color: #eef4fb; }
.ej-hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.ej-hero__string { list-style: none; margin: 0; padding: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 600 .78rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; position: relative; }
.ej-hero__string::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.7), rgba(255,255,255,.1)); }
.ej-hero__string li { display: flex; align-items: center; gap: 7px; }
.ej-hero__string i { width: 11px; height: 11px; border-radius: 50%; background: var(--pearl-orb); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
@media (min-width: 760px) { .ej-hero__shade { background: linear-gradient(90deg, rgba(10,28,52,.82) 0%, rgba(10,28,52,.35) 50%, rgba(10,28,52,0) 75%), linear-gradient(0deg, rgba(10,28,52,.55), transparent 40%); } }

/* ---------- intro ---------- */
.ej-intro { padding: var(--k-sec-pad) 0; }
.ej-intro__grid { display: grid; gap: 34px; align-items: center; }
.ej-quote { font: italic 500 1.15rem/1.5 var(--serif); color: var(--navy); border-left: 3px solid var(--pink); padding-left: 16px; margin-top: 20px; }
.ej-intro__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 6px; }
.ej-shell--b { margin-top: 44px; }
@media (min-width: 900px) { .ej-intro__grid { grid-template-columns: 1.05fr 1fr; gap: 64px; } }

/* ---------- tours ---------- */
.ej-tours { padding: var(--k-sec-pad) 0; background: linear-gradient(180deg, #fff, var(--pearl)); }
.ej-tours__grid { display: grid; gap: 22px; margin-top: 26px; }
.ej-tour { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 1px 0 var(--k-line), 0 20px 40px -30px rgba(16,41,74,.5); display: grid; }
.ej-tour__pic img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ej-tour__txt { padding: 20px 20px 22px; }
.ej-tour h3 { font-size: 1.35rem; line-height: 1.2; margin: 0 0 8px; color: var(--navy); }
.ej-tour p { margin: 0 0 12px; }
.ej-tag { font: 700 .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pink-d); display: inline-flex; align-items: center; gap: 8px; }
.ej-tag::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pearl-orb); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ej-pkg { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.ej-pkg li { padding: 10px 12px; border-radius: 12px; background: #f1fafb; font-size: .94rem; line-height: 1.45; }
.ej-pkg b { color: var(--navy); }
.ej-incl { font-size: .9rem; color: var(--k-muted); }
.ej-ask { font: 600 .92rem/1 var(--sans); color: var(--navy); background: none; border: 1.5px solid var(--navy); border-radius: 999px; padding: 12px 18px; min-height: 44px; cursor: pointer; }
.ej-ask:hover { background: var(--navy); color: #fff; }
.ej-tours__note { margin-top: 22px; color: var(--k-muted); font-size: .95rem; }
@media (min-width: 900px) {
  .ej-tours__grid { grid-template-columns: repeat(6, 1fr); }
  .ej-tour--feature, .ej-tour--pb { grid-column: span 3; }
  .ej-tour { grid-column: span 2; }
  .ej-tour--feature .ej-tour__pic img, .ej-tour--pb .ej-tour__pic img { aspect-ratio: 16 / 9; }
}

/* ---------- planner ---------- */
.ej-plan { padding: var(--k-sec-pad) 0; background: radial-gradient(120% 80% at 90% 0%, #16406a 0%, var(--navy) 45%, var(--navy-2) 100%); color: #fff; }
.ej-plan h2 em { color: #ff8cc0; }
.ej-plan__lede { color: #c9d6ea; max-width: 40rem; }
.ej-plan__grid { display: grid; gap: 26px; margin-top: 24px; }
.ej-step { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); }
.ej-step__h { display: flex; align-items: center; gap: 10px; font: 600 1.02rem/1.3 var(--sans); margin: 0 0 12px; color: #fff; }
.ej-step__h span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; background: var(--pearl-orb); color: var(--navy); flex: none; }
.ej-step__h small { font-weight: 400; color: #9fb2cd; }
.ej-step--row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }
.ej-pearls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ej-pearl { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; min-height: 58px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: #fff; cursor: pointer; font: inherit; transition: background .25s, border-color .25s, transform .25s; }
.ej-pearl strong { display: block; font-size: .95rem; line-height: 1.2; }
.ej-pearl small { display: block; font-size: .74rem; color: #a9bbd4; line-height: 1.25; }
.ej-pearl__orb { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), rgba(255,255,255,.06) 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .35s cubic-bezier(.3,1.6,.5,1), background .3s; }
.ej-pearl__orb b { font: 700 .8rem/1 var(--sans); color: var(--navy); opacity: 0; transition: opacity .2s; }
.ej-pearl[aria-pressed="true"] { background: rgba(232,25,124,.16); border-color: #ff7ab5; }
.ej-pearl[aria-pressed="true"] .ej-pearl__orb { background: var(--pearl-orb); box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 18px 2px rgba(255,190,220,.55); transform: scale(1.08); }
.ej-pearl[aria-pressed="true"] .ej-pearl__orb b { opacity: 1; }
.ej-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ej-chips button { font: 500 .9rem/1 var(--sans); color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 12px 15px; min-height: 44px; cursor: pointer; }
.ej-chips button[aria-pressed="true"] { background: #fff; color: var(--navy); border-color: #fff; font-weight: 600; }
.ej-input { width: 100%; box-sizing: border-box; min-height: 48px; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; padding: 10px 12px; font: inherit; color-scheme: dark; }
.ej-stepper { display: flex; align-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; }
.ej-stepper button { width: 46px; height: 46px; border: 0; background: none; color: #fff; font-size: 1.3rem; cursor: pointer; }
.ej-stepper output { min-width: 30px; text-align: center; font-weight: 700; }

.ej-card { background: var(--pearl); color: var(--ink); border-radius: 26px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); align-self: start; }
.ej-card__pic { position: relative; height: 170px; overflow: hidden; }
.ej-card__pic img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s; }
.ej-card__pic::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34px; background: var(--pearl); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.ej-card__body { padding: 4px 22px 22px; }
.ej-card__k { font: 400 1.4rem/1 var(--script); color: var(--pink-d); margin: 0 0 4px; }
.ej-route { font-size: 1.45rem; line-height: 1.2; margin: 0; color: var(--navy); min-height: 1.2em; }
.ej-thread { width: 100%; height: 22px; display: block; margin-top: 8px; }
.ej-thread path { fill: none; stroke: #d5b9b0; stroke-width: 1.4; }
.ej-beads { list-style: none; margin: -18px 0 8px; padding: 0 6px; display: flex; justify-content: space-around; min-height: 26px; }
.ej-beads li { width: 22px; height: 22px; border-radius: 50%; background: var(--pearl-orb); box-shadow: 0 2px 6px rgba(16,41,74,.35); animation: ej-bead .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes ej-bead { from { transform: translateY(-14px) scale(.4); opacity: 0; } }
.ej-card__list { margin: 6px 0 16px; display: grid; gap: 0; }
.ej-card__list div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #e3d6cc; }
.ej-card__list dt { color: var(--k-muted); font-size: .9rem; }
.ej-card__list dd { margin: 0; font-weight: 600; text-align: right; color: var(--navy); }
.ej-card .k-btn { width: 100%; justify-content: center; }
.ej-card__alt { font-size: .86rem; color: var(--k-muted); margin: 12px 0 0; text-align: center; }
.ej-card__alt a { color: var(--navy); font-weight: 600; }
@media (min-width: 900px) { .ej-plan__grid { grid-template-columns: 1.25fr 1fr; gap: 48px; } .ej-card { position: sticky; top: 90px; } .ej-pearls { grid-template-columns: 1fr 1fr 1fr; } }

/* ---------- review ---------- */
.ej-review { padding: var(--k-sec-pad) 0; }
.ej-review__grid { display: grid; gap: 34px; align-items: center; }
.ej-shell--c { max-width: 300px; margin-inline: auto; }
.ej-bq { margin: 0 0 14px; }
.ej-bq p { font: italic 500 clamp(1.15rem, 2.6vw, 1.5rem)/1.5 var(--serif); color: var(--navy); margin: 0 0 12px; }
.ej-bq footer { font: 600 .82rem/1.3 var(--sans); letter-spacing: .06em; color: var(--pink-d); }
.ej-link { color: var(--navy); font-weight: 600; }
@media (min-width: 900px) { .ej-review__grid { grid-template-columns: 1fr 1.6fr; gap: 64px; } }

/* ---------- gallery ---------- */
.ej-gallery { padding: var(--k-sec-pad) 0; background: #fff; }
.ej-gallery__lede { color: var(--k-muted); margin-top: -4px; }
.ej-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; gap: 8px; margin-top: 22px; }
.ej-tile { padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: var(--shell); aspect-ratio: 1; }
.ej-tile.is-tall { grid-row: span 2; aspect-ratio: auto; }
.ej-tile.is-wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.ej-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ej-tile:hover img { transform: scale(1.04); }
@media (min-width: 760px) { .ej-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; } }
.ej-lb { position: fixed; inset: 0; z-index: 90; background: rgba(6,16,30,.94); display: grid; place-items: center; padding: 56px 12px 90px; }
.ej-lb[hidden] { display: none; }
.ej-lb figure { margin: 0; max-width: min(1100px, 100%); }
.ej-lb img { max-height: 74svh; width: auto; max-width: 100%; margin: auto; border-radius: 10px; }
.ej-lb figcaption { color: #dfe8f5; text-align: center; font-size: .92rem; margin-top: 10px; }
.ej-lb__x { position: absolute; top: 10px; right: 12px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 1.8rem; cursor: pointer; }
.ej-lb__nav { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.8rem; cursor: pointer; }
.ej-lb__prev { left: 8px; } .ej-lb__next { right: 8px; }
.ej-lb__cta { position: absolute; bottom: 22px; left: 50%; translate: -50% 0; }

/* ---------- contact ---------- */
.ej-contact { padding: var(--k-sec-pad) 0; background: var(--navy-2); color: #fff; }
.ej-contact h2 em { color: #ff8cc0; }
.ej-contact__grid { display: grid; gap: 30px; }
.ej-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ej-lines li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); display: grid; gap: 2px; }
.ej-lines span { font: 600 .7rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #8ea4c4; }
.ej-lines a { color: #fff; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 900px) { .ej-contact__grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } }

@media (prefers-reduced-motion: reduce) { .ej-hero__bg img, .ej-beads li { animation: none; } }

/* illustrative destination photos (Coron, Balabac, Puerto Princesa) */
.ej-tour__pic { position: relative; }
.ej-illu { position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,.9); }
.ej-places { padding: var(--k-sec-pad) 0; background: var(--pearl); }
.ej-places__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.ej-places figure { margin: 0; position: relative; border-radius: 16px; overflow: hidden; }
.ej-places img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ej-places figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; color: #fff; font: 600 .82rem/1.3 var(--sans); background: linear-gradient(transparent, rgba(10,28,52,.8)); }
.ej-places__note { color: var(--k-muted); font-size: .85rem; margin-top: 12px; }
.ej-illu-note { color: #b9c6da; }
@media (min-width: 900px) { .ej-places__grid { grid-template-columns: repeat(4, 1fr); } }