/* ==========================================================================
   CROSS OVER HOLIDAYS — SECTION IMAGERY ADD-ON
   --------------------------------------------------------------------------
   Load AFTER site.css:
     <link rel="stylesheet" href="assets/css/site.css">
     <link rel="stylesheet" href="assets/css/sections.css">

   Every class here is prefixed .co- so nothing can collide with site.css.
   No new colours are introduced — this file only consumes the existing
   tokens (--trust, --sand, --action, --ink …).

   Each section gets its OWN image shape, so nothing repeats down the page:
     About .......... arch-top portrait overlapping a square
     Why Cross Over . wide arch medallion + amber icon badge
     Travel Guide ... notched-corner frame (+ vertical strip on the data card)
     How it works ... tall pill filmstrip on a dotted route line
     Reach us ....... duotone panel, two deep corners only
     Loyalty ........ one full-bleed card against two paper cards
     Footer ......... darkened panoramic band
   ========================================================================== */

/* =========================================================================
   00 · RULES YOUR MARKUP NEEDS THAT site.css DOESN'T DEFINE
   These six classes appear in the HTML with no matching rule. If your own
   site.css already styles them, delete this block — yours should win.
   ========================================================================= */

/* split navigation with the logo centred between two link groups */
.nav-links-left { flex:1 1 0; justify-content:flex-end; }
.nav-links-right{ flex:1 1 0; justify-content:flex-start; }
@media (max-width:1080px){
  .nav-links-left,.nav-links-right{ flex:0 0 auto; }
}

/* testimonial text column beside the circular photo stack */
.circ-content{ align-self:center; min-width:0; }

/* ========================= DESTINATIONS — stacked sticky cards =========================
   Each card sticks --i bars lower than the one before it, so the next card
   slides over its body and leaves only its header row pinned. You finish the
   section with 01…09 stacked at the top and the last card open.
   The stack is pure position:sticky — no scroll handler. Don't add one.
   Card order paints correctly on DOM order alone (later sticky siblings sit
   above earlier ones), so no z-index ladder is needed either. */
.co-dsec{ padding-block:clamp(56px,7vw,104px) 0; }

/* the section's only heading — the big word, no eyebrow, no lede */
.co-dword{
  display:block;
  font-family:var(--sans); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.6rem,13vw,10.5rem); line-height:.86;
  letter-spacing:-.045em; text-align:center;
  margin:0 0 clamp(26px,4vw,56px); color:var(--trust-ink);
  /* faint bevel — reads as extruded type without a second font or an image */
  text-shadow:0 1px 0 #fff, 0 2px 0 var(--trust-line), 0 3px 0 var(--trust-soft),
              0 14px 30px rgba(47,111,105,.16);
}

/* scroll fill: word sits pale/hollow-looking until it scrolls into view, then
   solidifies to full ink colour — same word, no layout shift, colour only */
.why-because{ font-size:1.3em; color:var(--trust-ink); }

/* about section's giant word sits above a left-aligned two-column grid, not
   a centered layout, so it lines up with the copy column instead */
.co-dword-left{ text-align:left; }

.co-dword[data-reveal="fill"]{
  color:var(--trust-line); text-shadow:none;
  transition:color .9s var(--ease-out), opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.co-dword[data-reveal="fill"].in{
  color:var(--trust-ink);
  text-shadow:0 1px 0 #fff, 0 2px 0 var(--trust-line), 0 3px 0 var(--trust-soft),
              0 14px 30px rgba(47,111,105,.16);
}

.co-dstack{ padding-inline:var(--gut); }

/* extra breathing room under the big word before the contact content starts;
   flat colour, no bevel — the 3D text-shadow reads odd at this size/weight */
.ct-dword{ display:block; margin-bottom:clamp(48px,7vw,96px); text-shadow:none; }

/* The bar is derived from the header height and the card padding, never
   guessed — an under-tall bar clips the pinned row mid-glyph on every
   collapsed card. Change the header, and the bar follows.
   It also has to stay small: nine cards each keeping a bar is 9 x --co-dbar of
   the viewport gone before the open card starts, so the pinned row is one line
   only (numeral, name, CTA) and the route/nights line lives in the body where
   the next card may cover it. --n is the card count, stamped by build_nav.py,
   so a tenth destination doesn't quietly push the last card off-screen. */
.co-dstack{
  --co-dpad:clamp(12px,1.3vw,16px);
  --co-dheadh:clamp(38px,3.4vw,42px);
  /* Exactly the card's top padding plus its header row — no third term. That's
     deliberate: site.js needs this length in pixels, and getComputedStyle hands
     back a custom property as its literal calc() token, not a resolved value.
     Keeping the bar equal to padding-top + .co-dhead height lets the JS measure
     it off real layout instead of re-deriving the arithmetic and drifting. */
  --co-dbar:calc(var(--co-dpad) + var(--co-dheadh));
  --co-dtop:clamp(10px,1.6vw,22px);
  --co-dbot:clamp(10px,1.6vw,22px);
}

.co-dcard{
  /* Every card pins at the SAME offset — one bar down — and site.js slides the
     card being covered up by exactly one bar so its row appears above the new
     one. That's the sliding window: one previous bar, never a growing pile.
     Fixed offsets can't do this; sticky only knows static tops, so capping the
     pile at the first N meant the numbers jumped (04 straight to 07, with 05
     and 06 leaving no trace). Don't reintroduce a per-card offset. */
  position:sticky;
  top:calc(var(--co-dbar) + var(--co-dtop));
  /* Height is what's LEFT of the viewport, never a free-standing min-height: a
     card taller than its leftover space hangs below the fold while pinned and
     can't be scrolled to. Fixed, not min, so all nine are the same size —
     content-height cards came out 774px or 881px depending on whether the route
     line wrapped, and visibly jumped. */
  height:calc(100svh - var(--co-dbar) - var(--co-dtop) - var(--co-dbot));
  /* the slide, driven from site.js; 0 until a card starts being covered */
  transform:translate3d(0, calc(var(--co-dbar) * -1 * var(--t,0)), 0);
  background:var(--surface); border:1px solid var(--trust-line);
  border-radius:var(--r-lg); box-shadow:var(--e2); overflow:hidden;
  padding:var(--co-dpad);
  display:flex; flex-direction:column; gap:clamp(8px,1vw,12px);
}

/* the pinned row: numeral · name · pill CTA. One line, always. */
.co-dhead{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(10px,1.4vw,20px); height:var(--co-dheadh);
}
.co-dnum{
  font-weight:800; font-size:clamp(1.15rem,1.9vw,1.55rem); line-height:1;
  letter-spacing:-.03em; color:var(--trust-soft);
}
.co-dhead h3{
  margin:0; min-width:0; font-family:var(--sans); font-weight:700;
  font-size:clamp(1.05rem,1.7vw,1.4rem); line-height:1.15;
  letter-spacing:-.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.co-dhead h3 a{ color:var(--ink); text-decoration:none; }
.co-dhead h3 a:hover{ color:var(--trust-ink); }
.co-dcta{
  flex:0 0 auto; gap:8px; white-space:nowrap;
  padding:8px 16px; font-size:.83rem;
}
/* one line, ellipsised — a wrapped route line steals a row from the collage */
.co-dmeta{
  margin:0; display:flex; flex-wrap:nowrap; gap:14px; min-width:0;
  overflow:hidden; font-size:.83rem; color:var(--muted);
}
.co-dmeta span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.co-dmeta span+span{ flex:0 0 auto; white-space:nowrap; }

/* collage: one wide frame left, two stacked right */
.co-dshots{
  flex:1 1 auto; display:grid; gap:clamp(10px,1.2vw,16px);
  grid-template-columns:1.62fr 1fr; grid-template-rows:1fr 1fr;
}
.co-dshot{ margin:0; overflow:hidden; border-radius:var(--r-md); background:var(--trust-tint); }
.co-dshot-lead{ grid-row:span 2; }
.co-dshot img{ width:100%; height:100%; object-fit:cover; display:block; }

/* scroll room so the last card can be read in full before the next section */
.co-dstack-end{ height:min(26vh,220px); }

@media (max-width:760px){
  /* the collage goes lead-over-pair so images don't shrink to stamps */
  .co-dshots{ grid-template-columns:1fr 1fr; grid-template-rows:1.35fr 1fr; }
  .co-dshot-lead{ grid-row:auto; grid-column:span 2; }
  /* the pinned row stays one line here too — the CTA shrinks rather than
     wrapping, so the bar stays slim on a phone */
  .co-dstack{ --co-dheadh:40px; }
}

/* No stacking without scroll-linked motion: the cards just sit in a column. */
@media (prefers-reduced-motion:reduce){
  /* height:auto, or the viewport-derived height would clip a card that is no
     longer pinned to anything */
  .co-dcard{
    position:static; height:auto; min-height:min(62svh,660px);
    margin-bottom:clamp(16px,2vw,26px); transform:none;
  }
  .co-dstack-end{ display:none; }
}

/* fine film grain over the whole page — the "printed" feel */
.lux-grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* reading-progress bar pinned to the very top */
.lux-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:1001; pointer-events:none;
  background:rgba(27,25,23,.06);
}
.lux-progress i{
  display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--trust), var(--action));
  transition:transform .12s linear;
}

/* ---------- shared: image frame behaviour ----------
   Stacking order matters: the "image slot" label must sit UNDER the photo, so
   that once a real file exists it covers the label completely, and if the file
   is ever missing the label reappears as the fallback.
       1  slot-tag label
       2  the photo
       3  warm veil + inner ring
   ------------------------------------------------------------------------- */
.co-fig{
  position:relative; overflow:hidden; display:block;
  background:linear-gradient(150deg, var(--trust-tint), var(--sand) 60%, var(--base-2));
}
.co-fig .slot-tag{ position:absolute; inset:auto 10px 10px 10px; z-index:1; }
.co-fig img{
  position:relative; z-index:2;
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.2s var(--ease-out), filter .6s var(--ease);
}
/* warm veil keeps any photograph inside the palette, + a hairline inner ring */
.co-fig::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  border-radius:inherit;
  background:linear-gradient(150deg, rgba(255,246,228,.16), transparent 46%, rgba(47,111,105,.10));
  box-shadow:inset 0 0 0 1px rgba(27,25,23,.06);
}

/* images settle in as their section reveals, rather than snapping */
[data-reveal] .co-fig img,
.co-fig[data-reveal] img{ transform:scale(1.06); }
[data-reveal].in .co-fig img,
.co-fig[data-reveal].in img{ transform:none; }

/* =========================================================================
   01 · ABOUT — arch portrait overlapping a square
   ========================================================================= */
.co-about{ background:var(--base); }
.co-about-grid{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(32px,6vw,86px); align-items:center;
}
.co-about-copy p{ color:var(--ink-2); font-size:1rem; line-height:1.75; }
.co-about-copy p + p{ margin-top:.2em; }
.co-sign{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; gap:clamp(20px,3vw,40px); flex-wrap:wrap;
}
.co-sign div{ min-width:120px; }
.co-sign b{ display:block; font-family:var(--display); font-size:1.5rem; line-height:1; color:var(--ink); margin-bottom:5px; }
.co-sign span{ font-size:.8rem; color:var(--muted); }

.co-about-media{ position:relative; padding:0 0 0 clamp(38px,6vw,66px); }
/* thin teal rule running down the left, echoing the .cred border */
.co-about-media::before{
  content:""; position:absolute; left:clamp(14px,2.4vw,26px); top:14%; bottom:clamp(56px,8vw,92px);
  width:2px; background:linear-gradient(var(--trust), var(--trust-line)); border-radius:2px;
}
/* .co-sq / .co-badge overlays were removed from the about media; the rules
   below are kept only if that layout returns. */
.co-arch{
  aspect-ratio:3/4; border-radius:clamp(140px,26vw,260px) clamp(140px,26vw,260px) var(--r-lg) var(--r-lg);
  box-shadow:var(--e3);
}
.co-sq{
  position:absolute; left:0; bottom:0; width:clamp(140px,26%,220px); aspect-ratio:1/1;
  border-radius:var(--r-md); border:9px solid var(--base); box-shadow:var(--e2);
}
.co-badge{
  position:absolute; right:clamp(-6px,-1vw,0px); top:clamp(22px,5vw,54px); z-index:4;
  background:var(--surface); border:1px solid var(--trust-line); border-radius:var(--r-md);
  padding:15px 20px; box-shadow:var(--e2); max-width:210px;
}
.co-badge b{ display:block; font-family:var(--display); font-size:1.32rem; color:var(--trust-ink); line-height:1; margin-bottom:5px; }
.co-badge span{ font-size:.76rem; color:var(--muted); line-height:1.45; display:block; }

@media (max-width:900px){
  .co-about-grid{ grid-template-columns:1fr; gap:44px; }
  /* photo above the copy: stacked, the portrait landing after three
     paragraphs read as an afterthought. order beats moving it in the HTML —
     the desktop grid keeps copy-left / photo-right untouched. */
  .co-about-media{ max-width:620px; order:-1; padding-left:clamp(20px,5vw,38px); }
  .co-about-media::before{ left:0; }
}

/* =========================================================================
   02 · WHY CROSS OVER — sticky image, scrolling text
   The image column holds still while the six promises scroll past it; the
   photo crossfades as each block reaches the middle. At the end of the last
   block the whole section releases and carries on up the page.
   ========================================================================= */
.co-sticky{ background:var(--trust-tint); }
.co-stk-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(30px,5vw,84px); align-items:start;
}

/* ---- the column that stays put ---- */
.co-stk-media{
  position:sticky; top:calc((100vh - 62vh) / 2);
  display:grid; gap:16px;
}
.co-stk-frame{ position:relative; }
.co-stk-stack{
  position:relative; aspect-ratio:4/3; height:auto; max-height:62vh;
  border-radius:3px;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 54px), calc(100% - 54px) 100%, 0 100%);
  box-shadow:0 18px 50px rgba(27,25,23,.12);
}
.co-stk-img{
  position:absolute; inset:0; border-radius:inherit;
  opacity:0; transform:scale(1.035);
  transition:opacity .7s var(--ease), transform 1.5s var(--ease-out);
}
.co-stk-img.is-active{ opacity:1; transform:none; }


/* ---- the column that scrolls ---- */
.co-stk-text{ min-width:0; }
.co-stk-block{
  min-height:78vh; display:flex; align-items:center;
  opacity:.34; transition:opacity .5s var(--ease);
}
.co-stk-block.is-active{ opacity:1; }
.co-stk-block:first-child{ min-height:62vh; align-items:flex-start; }
.co-stk-block:last-child{ min-height:64vh; }
.co-block-label{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:14px;
  font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--action-text);
}
.co-block-label i{ width:7px; height:7px; border-radius:50%; background:var(--action); flex:none; }
.co-stk-block h3{ margin-bottom:17px; }   /* size set in "one heading scale" below */
.co-stk-block p{ color:var(--muted); font-size:.98rem; line-height:1.75; margin:0 0 20px; max-width:50ch; }
.co-stk-block p em{ font-style:normal; color:var(--ink-2); font-weight:600; }
.co-block-link{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.83rem; font-weight:600; color:var(--trust-ink);
  padding-bottom:4px; border-bottom:1px solid var(--trust-line);
  transition:gap .3s var(--ease-out), border-color .3s, color .3s;
}
.co-block-link:hover{ gap:14px; color:var(--ink); border-color:var(--trust); }

/* ---- narrow screens: one photo per pillar, no sticky ----
   The media column must NOT stay sticky here. In the one-column grid its
   containing block is the whole grid, so a sticky media column travels down
   across the text and the photo floats over the copy. site.js moves each
   figure into its own block instead (see the layout() guard there); these
   rules take them out of the absolute stack and let them sit in flow. */
@media (max-width:900px){
  .co-stk-grid{ grid-template-columns:1fr; gap:20px; }
  .co-stk-media{ position:static; top:auto; }
  .co-stk-stack{ display:none; }          /* emptied by site.js; hidden in case JS never runs */
  .co-stk-block{
    min-height:0; padding:30px 0; opacity:1;
    display:block;                         /* was flex-centred for the tall pinned blocks */
  }
  .co-stk-block:first-child,.co-stk-block:last-child{ min-height:0; }
  .co-stk-block .co-stk-img{
    position:relative; inset:auto; opacity:1; transform:none;
    display:block; margin:0 0 20px; width:100%;
    aspect-ratio:16/10; border-radius:3px; overflow:hidden;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 38px), calc(100% - 38px) 100%, 0 100%);
    box-shadow:0 12px 32px rgba(27,25,23,.12);
  }
  .co-stk-block .co-stk-img img{ width:100%; height:100%; object-fit:cover; }
}
@media (prefers-reduced-motion: reduce){
  .co-stk-media{ position:static; }
  .co-stk-stack{ max-height:none; }
  .co-stk-block{ min-height:0; padding:30px 0; opacity:1; }
  .co-stk-img{ transition:none; }
}

/* =========================================================================
   02b · icon badge on the stepper's image panel
   ========================================================================= */
.co-stepimg .why-ico{
  position:absolute; right:18px; bottom:18px; z-index:5;
  width:52px; height:52px; margin:0; border-radius:50%;
  background:var(--surface); border:1px solid var(--trust-line);
  box-shadow:var(--e2); color:var(--trust-ink);
  display:grid; place-items:center;
}
.co-stepimg .why-ico::after{
  content:""; position:absolute; right:1px; top:1px; width:10px; height:10px;
  border-radius:50%; background:var(--action); border:2px solid var(--surface);
}
.co-step-p em{ font-style:normal; color:var(--ink-2); font-weight:600; }

/* =========================================================================
   03 · TRAVEL GUIDE — expanding cards
   Ported from the React/Tailwind reference into this stack. One card is open
   at a time: it grows to 4.6fr while the rest hold at 1fr, the photo drops its
   greyscale, and the icon, title and copy fade up in sequence. Collapsed cards
   show a rotated label. Grid columns are set inline by JS; everything else,
   including the whole open/closed animation, is CSS.
   ========================================================================= */
/* two-tone section headings (the <em> half in teal) — used across the page */
.co-zighead h2 em,
.co-steps-head h2 em,
.co-blocks h2 em{ font-style:normal; color:var(--trust-ink); }
.co-expand{ background:var(--base-2); }

.co-cards{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
  grid-template-rows:1fr;
  grid-template-columns:4.6fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;  /* 9 guides, first open */
  height:clamp(430px, 46vw, 540px);
  transition:grid-template-columns .55s var(--ease-out);
}
.co-card{
  position:relative; overflow:hidden; min-width:0; min-height:0;
  border-radius:var(--r-md); background:var(--base-2);
  box-shadow:var(--e1);
}
/* The button is the accordion hit area only. It must sit above the photo and the
   shade, but below .co-card-body so the "Read the guide" link stays clickable. */
.co-card-btn{
  position:absolute; inset:0; width:100%; height:100%; z-index:3;
  display:block; text-align:left; padding:0; cursor:pointer;
}
/* Everything painted over .co-card-btn must be transparent to the pointer,
   otherwise it swallows the hover that opens the card. */
.co-card img, .co-card-shade, .co-card-vert{ pointer-events:none; }

.co-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  filter:grayscale(1); transform:scale(1.1);
  transition:filter .45s var(--ease), transform .55s var(--ease-out);
}
/* the open card's photo keeps drifting in, restarting each time a card opens */
@keyframes coCardZoomIn{
  from{ transform:scale(1); }
  to  { transform:scale(1.14); }
}
.co-card[data-active="true"] img{
  filter:grayscale(0); transform:scale(1);
  animation:coCardZoomIn 8s var(--ease-out) forwards;
}
@media (prefers-reduced-motion: reduce){
  .co-card[data-active="true"] img{ animation:none; }
}
.co-card-shade{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(15,20,19,.86), rgba(15,20,19,.42) 42%, rgba(15,20,19,.06));
}

/* rotated label while the card is closed */
.co-card-vert{
  position:absolute; left:14px; top:18px; z-index:4;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.86); white-space:nowrap;
  transition:opacity .3s var(--ease);
}
.co-card[data-active="true"] .co-card-vert{ opacity:0; }

/* the open panel */
.co-card-body{
  position:absolute; inset:auto 0 0 0; z-index:4;
  display:block; padding:clamp(20px,2.2vw,30px);
  min-width:clamp(240px, 26vw, 400px);
  pointer-events:none;            /* let hover fall through to .co-card-btn */
}
.co-card-body > *{
  opacity:0; transform:translate3d(0,10px,0);
  transition:opacity .35s var(--ease), transform .45s var(--ease-out);
}
.co-card[data-active="true"] .co-card-body > *{ opacity:1; transform:none; }
.co-card[data-active="true"] .co-card-kick{ transition-delay:.10s; }
.co-card[data-active="true"] .co-card-h   { transition-delay:.15s; }
.co-card[data-active="true"] .co-card-p   { transition-delay:.20s; }
.co-card[data-active="true"] .season      { transition-delay:.26s; }

.co-card-kick{
  display:block; font-size:.64rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--trust-soft); margin-bottom:8px;
}
.co-card-h{
  display:block; font-family:var(--display); font-weight:400; color:#fff;
  font-size:clamp(1.3rem,2.1vw,1.75rem); line-height:1.12; margin-bottom:11px;
}
/* Two lines, never three: the copy is written to an ~88ch budget (44ch measure
   x 2) and the clamp is the backstop if someone later writes past it. */
.co-card-p{
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
  font-size:.9rem; line-height:1.66; color:rgba(255,255,255,.8);
  max-width:44ch;
}
/* the season bars keep working inside the open card */
.co-card .season{ display:grid; gap:7px; margin-top:16px; max-width:330px; }
.co-card .season-row{ display:grid; grid-template-columns:82px 1fr; align-items:center; gap:11px;
  font-size:.75rem; color:rgba(255,255,255,.8); }
.co-card .bar{ height:6px; border-radius:100px; background:rgba(255,255,255,.2); overflow:hidden; }

/* "Read the guide" link — only reachable once its card is open */
.co-card-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:9px;
  font-size:.82rem; font-weight:600; letter-spacing:.02em; color:#fff;
  text-decoration:none; border-bottom:1.5px solid rgba(255,255,255,.45);
  padding-bottom:2px; pointer-events:none;
  transition:border-color .25s var(--ease), gap .25s var(--ease-out);
}
.co-card-link svg{ transition:transform .25s var(--ease-out); }
.co-card-link:hover{ border-bottom-color:#fff; gap:12px; }
.co-card-link:hover svg{ transform:translateX(3px); }
.co-card[data-active="true"] .co-card-link{ pointer-events:auto; transition-delay:.26s; }
.co-card-link:focus-visible{ outline:2.5px solid var(--trust-soft); outline-offset:4px; border-radius:4px; }

.co-card-btn:focus-visible{ outline:2.5px solid var(--trust-soft); outline-offset:-4px; border-radius:var(--r-md); }

/* stacked on narrow screens: rows instead of columns */
@media (max-width:900px){
  .co-cards{
    grid-template-columns:1fr;
    grid-template-rows:4.6fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    height:clamp(680px, 150vw, 940px);
    transition:grid-template-rows .55s var(--ease-out);
  }
  .co-card-vert{ writing-mode:horizontal-tb; left:18px; top:auto; bottom:16px; }
  .co-card-body{ min-width:0; }
  .co-card .season{ display:none; }   /* no room once the card is a short row */
}
@media (prefers-reduced-motion: reduce){
  .co-cards{ transition:none; }
  .co-card img, .co-card-body > *{ transition:none; }
}

/* closing reassurance strip */

/* =========================================================================
   04 · HOW IT WORKS — scroll-pinned stepper
   The section is four viewports tall; the inner panel sticks while you scroll
   through it, advancing one step at a time with the image panel in sync.
   ========================================================================= */
/* --steps is set inline per section; 70vh of scroll buys each step */
.co-steps{
  position:relative; padding:0; background:var(--base);
  height:calc(100vh + (var(--steps, 4) * 70vh));
}
.co-steps-pin{
  /* min-height must never exceed the viewport, or a sticky panel taller than
     the screen would clip its own bottom on short windows */
  position:sticky; top:0; height:100vh; min-height:min(640px, 100vh);
  display:flex; align-items:center; overflow:hidden;
}
.co-steps-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; margin-bottom:clamp(26px,4vw,50px);
}
.co-steps-head h2{ font-size:clamp(1.9rem,4vw,3.1rem); }
.co-steps-label{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--action-text); padding-top:8px;
}
.co-steps-label i{ width:7px; height:7px; border-radius:50%; background:var(--action); }

.co-steps-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(30px,6vw,86px); align-items:center;
}

/* ---- the list ---- */
.co-steplist{ list-style:none; margin:0; padding:0; }
.co-step-btn{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(12px,1.6vw,20px);
  width:100%; text-align:left; padding:clamp(15px,1.9vw,21px) 0;
  border-top:1px solid var(--line); transition:opacity .4s var(--ease);
}
.co-steplist li:last-child .co-step-btn{ border-bottom:1px solid var(--line); }
.co-step-body{ display:block; min-width:0; }
.co-step-n{
  display:flex; align-items:center; gap:9px; padding-top:6px;
  font-size:.7rem; font-weight:700; letter-spacing:.12em; color:var(--muted);
  transition:color .4s var(--ease);
}
.co-step-n::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--line); transition:background .4s var(--ease), transform .4s var(--ease-out);
}
.co-step-h{
  display:block; font-family:var(--display); letter-spacing:-.015em;
  font-size:clamp(1.15rem,2.1vw,1.6rem); line-height:1.15;
  color:var(--muted); transition:color .45s var(--ease);
}
.co-step-p{
  display:block; font-size:.9rem; line-height:1.68; color:var(--muted);
  max-height:0; opacity:0; overflow:hidden; max-width:46ch;
  transition:max-height .55s var(--ease-out), opacity .4s var(--ease), margin-top .55s var(--ease-out);
}
.co-step-k{
  display:block; font-size:.62rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
  transition:color .45s var(--ease);
}
.co-step.is-active .co-step-k{ color:var(--trust-ink); }
.co-step.is-active .co-step-n{ color:var(--action-text); }
.co-step.is-active .co-step-n::before{ background:var(--action); transform:scale(1.25); }
.co-step.is-active .co-step-h{ color:var(--ink); }
.co-step.is-active .co-step-p{ max-height:260px; opacity:1; margin-top:10px; }
.co-step-btn:hover .co-step-h{ color:var(--trust-ink); }

/* ---- the synced image panel ---- */
.co-stepmedia{ position:relative; aspect-ratio:5/4; }
.co-stepimg{
  position:absolute; inset:0; border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 72px;
  box-shadow:var(--e3);
  opacity:0; transform:scale(1.05); pointer-events:none;
  transition:opacity .6s var(--ease), transform 1s var(--ease-out);
}
.co-stepimg.is-active{ opacity:1; transform:none; pointer-events:auto; }
.co-stepbar{
  position:absolute; left:0; right:0; bottom:-22px; height:2px;
  background:var(--line); border-radius:2px; overflow:hidden;
}
.co-stepbar i{
  display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--trust), var(--action));
  transition:transform .15s linear;
}

/* =========================================================================
   05b · TOURS & PACKAGES — rail moved to the bottom-right, smaller, calmer
   These override site.css, which loads first.
   ========================================================================= */
.pkgh-rail{
  left:auto; top:auto; transform:none;
  right:clamp(20px,6vw,80px);
  bottom:clamp(56px,9vh,90px);            /* same baseline as the arrows */
  /* flex-start (the default), not flex-end: with 9 cards heavily
     overflowing a 3-card-wide container, flex-end broke scrollLeft/offsetLeft
     entirely — the rail sat stuck on the last few cards no matter which one
     was active, since pkghCenterCard's scrollTo math assumes a normal
     left-anchored scroll track. */
  justify-content:flex-start;
  gap:10px; padding:8px 4px;
  /* exactly 3 cards' worth of width — the rest scrolls out of view, so the
     smooth-scroll centering in pkghCenterCard (site.js) reads as a rolling
     3-card window (prev peeking / active / next peeking) instead of a
     static row of five-plus thumbnails. */
  max-width:calc(3 * clamp(92px,8.8vw,132px) + 2 * 10px);
}
.pkgh-card{
  flex:0 0 clamp(92px,8.8vw,132px);
  border-radius:12px;
  transform:scale(.94); filter:brightness(.55) saturate(.85);
  transition:transform .85s var(--ease-out), filter .85s var(--ease),
             box-shadow .85s var(--ease-out), opacity .6s var(--ease);
}
.pkgh-card.active{ transform:scale(1.04); box-shadow:0 16px 38px rgba(0,0,0,.36); }
.pkgh-card:hover{ filter:brightness(.82) saturate(1); }
.pkgh-card .cap{ padding:8px 9px; font-size:.6rem; }
.pkgh-card .cap b{ font-size:.68rem; }
/* bookmark glyph, top-right of every rail card — pops on the active card */
.pkgh-card::after{
  content:""; position:absolute; top:8px; right:8px; z-index:3;
  width:22px; height:22px; border-radius:50%;
  background:rgba(15,20,19,.4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/12px no-repeat;
  backdrop-filter:blur(4px);
  transform:scale(.85); opacity:.75;
  transition:transform .5s var(--ease-out), opacity .5s var(--ease);
}
.pkgh-card.active::after{ transform:scale(1.12); opacity:1; }

/* ---- left progress sidebar: a full-height stepper — nine fixed dots (one
   per package) plus a numbered bubble that slides between them as the
   active package changes. Matches the reference video's vertical rail
   more closely than a single dot on a short segment. ---- */
.pkgh-side{
  position:absolute; z-index:4; left:clamp(18px,3.4vw,36px); top:14%; bottom:16%;
  display:flex; flex-direction:column; align-items:center; color:rgba(255,255,255,.85);
}
.pkgh-side-track{ position:relative; width:1px; flex:1 1 auto; background:rgba(255,255,255,.28); }
.pkgh-side-dot{
  position:absolute; left:50%; width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:rgba(255,255,255,.55);
}
.pkgh-side-bubble{
  position:absolute; left:50%; top:0%; width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:50%; border:1px solid rgba(255,255,255,.65); background:rgba(15,20,19,.55);
  color:#fff; font-size:.7rem; font-weight:700; display:grid; place-items:center;
  backdrop-filter:blur(6px); transition:top .6s var(--ease-out);
}
@media (max-width:900px){ .pkgh-side{ display:none; } }

/* background settles rather than snaps — slower, smoother crossfade than the
   base rule's 1.15s, plus a longer entry-zoom settle. */
.pkgh-bg{ transform:scale(1.045); transition:opacity 1.8s var(--ease-out), transform 3.2s var(--ease-out); }
.pkgh-bg.active{ transform:scale(1); }

/* while a background is the active one, its image keeps a slow, continuous
   breathing zoom (classic Ken Burns) instead of sitting perfectly still —
   runs on the <img>, separate from .pkgh-bg's own entry-settle transform so
   the two motions don't fight each other. */
@keyframes pkghBreathe{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.07); }
}
.pkgh-bg .slot img{ transform:scale(1); }
.pkgh-bg.active .slot img{ animation:pkghBreathe 14s var(--ease) infinite; }

/* copy crossfade given room to breathe */
.pkgh-content .pk-top,
.pkgh-content h3,
.pkgh-content .desc{ transition:opacity .42s var(--ease), transform .52s var(--ease-out); }
.pkgh-content .pk-foot{ transition:opacity .42s var(--ease); }
.pkgh-content.fading .pk-top,
.pkgh-content.fading h3,
.pkgh-content.fading .desc{ transform:translateY(14px); }

@media (max-width:900px){
  /* Unpinned, the rail is in flow (site.css sets position:relative; inset:auto).
     This block loads after site.css, so it must NOT re-assert left/right/bottom
     — a relatively-positioned element still honours them, which lifted the rail
     ~150px out of flow and painted it over the price row. Offsets stay auto;
     the side gutter is padding now, not an offset. */
  .pkgh-rail{
    inset:auto; left:auto; right:auto; bottom:auto;
    justify-content:flex-start; max-width:none;
    /* the gutter is padding here — .pkgh-rail's base padding:8px 4px above
       would otherwise pull the first thumbnail flush to the screen edge while
       the copy and buttons stay inset. Right stays open: the rail scrolls. */
    padding-left:clamp(16px,5vw,40px);
  }
  .pkgh-card{ flex-basis:66px; }
}

/* ---- unpinned fallback: narrow screens and reduced motion ---- */
@media (max-width:900px){
  .co-steps{ height:auto; padding:clamp(72px,10vw,140px) 0; }
  .co-steps-pin{ position:static; height:auto; min-height:0; display:block; }
  .co-steps-grid{ grid-template-columns:1fr; gap:30px; }
  .co-stepmedia{ order:-1; aspect-ratio:16/11; }
  .co-stepimg{ border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 48px; }
  .co-stepbar{ bottom:-14px; }
}
@media (prefers-reduced-motion: reduce){
  .co-steps{ height:auto; padding:clamp(72px,10vw,140px) 0; }
  .co-steps-pin{ position:static; height:auto; min-height:0; display:block; }
  .co-step-p{ max-height:none; opacity:1; margin-top:10px; }
  .co-step-h{ color:var(--ink); }
  .co-step-k{ color:var(--trust-ink); }
  .co-stepimg{ opacity:1; transform:none; position:relative; }
  .co-stepimg:not(.is-active){ display:none; }
}
/* Below 900px the stepper is not pinned, so there is no scroll position to
   drive an "active" step — the accordion just hid three of the four
   descriptions behind opacity:0 while still reserving their height, leaving
   blank gaps under 02, 03 and 04. On mobile every step reads as plain text:
   all four descriptions open, all four headings at full ink. */
@media (max-width:900px){
  .co-step-p, .co-step.is-active .co-step-p{
    max-height:none; opacity:1; margin-top:10px; overflow:visible;
  }
  .co-step-h, .co-step.is-active .co-step-h{ color:var(--ink); }
  .co-step-k, .co-step.is-active .co-step-k{ color:var(--trust-ink); }
  .co-step-p{ color:var(--ink-2); }
}

/* =========================================================================
   04b · HOW IT WORKS — four numbered steps on a dotted route line
   Deliberately NOT the stepper: that interaction belongs to the pillars.
   ========================================================================= */
.co-film{
  margin-top:20px; aspect-ratio:5/4;
  border-radius:var(--r-md) var(--r-md) var(--r-md) 44px;
  box-shadow:var(--e1); filter:saturate(.94);
}
.step:hover .co-film img{ transform:scale(1.06); }
.step .co-film::before{
  content:""; position:absolute; z-index:6; top:44%;
  right:calc(-1 * clamp(16px,2vw,26px) - 7px);
  width:clamp(16px,2vw,26px); height:2px;
  background:repeating-linear-gradient(90deg, var(--trust) 0 5px, transparent 5px 10px);
}
.step:last-child .co-film::before{ display:none; }
@media (max-width:900px){ .step .co-film::before{ display:none; } }

/* =========================================================================
   05 · REACH US — full-width live Google Map
   Two deep corners keep the panel shape distinct from every other section.
   ========================================================================= */
.co-map{
  margin-top:clamp(38px,5.5vw,68px); padding:0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl) var(--r-sm) var(--r-xl) var(--r-sm);
  box-shadow:var(--e2); overflow:hidden;
}
.co-map-frame{
  position:relative; width:100%;
  height:clamp(300px,42vw,480px);
  background:var(--trust-tint);
}
.co-map-frame iframe{ display:block; width:100%; height:100%; border:0; }
/* the embed renders in Google's own colours — a light teal veil settles it into
   the palette without dulling the labels enough to hurt legibility */
.co-map-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(150deg, rgba(140,196,189,.14), transparent 55%, rgba(217,142,39,.08));
}
.co-map-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,32px); flex-wrap:wrap;
  padding:clamp(18px,2.4vw,26px) clamp(20px,3vw,34px);
  background:var(--surface); border-top:1px solid var(--line);
}
.co-map-pin{ display:flex; align-items:flex-start; gap:13px; min-width:0; }
.co-map-pin > svg{ flex:none; margin-top:3px; color:var(--trust-ink); }
.co-map-pin b{ display:block; font-size:.95rem; font-weight:600; color:var(--ink); margin-bottom:3px; }
.co-map-pin span span{ display:block; font-size:.83rem; color:var(--muted); line-height:1.55; }
.co-map-bar .btn{ flex:none; }
@media (max-width:620px){
  .co-map-bar{ flex-direction:column; align-items:stretch; }
  .co-map-bar .btn{ width:100%; }
}

/* =========================================================================
   07b · FAQ — a chat thread
   Questions sit left in light bubbles, answers arrive right in dark ones.
   Overrides the plain accordion styling in site.css.
   ========================================================================= */
.co-faq{ background:var(--base); }
.co-chat{ max-width:940px; margin-inline:auto; }
.co-chat-meta{
  display:flex; align-items:center; gap:9px;
  font-size:.8rem; color:var(--muted); margin:0 0 26px;
}
.co-chat .faq-a > .co-replywrap{
  display:flex; justify-content:flex-end;
  padding:10px 0 16px; max-width:none;
}

/* ---- zigzag: odd rows hug the left, even rows are pushed right, and each
   answer lands on the side opposite its own question so the thread still
   reads as a conversation ---- */
.faq-item .co-ask{ max-width:80%; }
.faq-item:nth-child(even) .co-ask{ margin-left:auto; }
.co-chat .faq-item:nth-child(even) .faq-a > .co-replywrap{ justify-content:flex-start; }
.co-dot{
  width:8px; height:8px; border-radius:50%; background:var(--wa); flex:none;
  box-shadow:0 0 0 3px rgba(14,124,55,.16);
}

.co-msg{ scroll-margin-top:110px; }   /* clears the fixed nav on anchor jumps */

/* ---- the question bubble ---- */
.co-ask{ margin:0; }
/* light neutral grey, generous rounding and a flat offset shadow — the
   bubbles should feel like stickers rather than table rows */
.co-bub{
  display:block; text-align:left;
  background:#F2F2F0; color:var(--ink);
  padding:17px 27px; border-radius:26px;
  font-size:clamp(1.04rem,1.55vw,1.2rem); line-height:1.45; font-weight:500;
  border:1.5px solid #E6E6E2;
  box-shadow:0 3px 0 rgba(27,25,23,.055);
  transition:background .3s var(--ease), border-color .3s,
             transform .38s cubic-bezier(.34,1.56,.64,1),
             box-shadow .38s cubic-bezier(.34,1.56,.64,1);
}
.faq-item.open .co-bub{
  background:var(--trust-tint); border-color:var(--trust); box-shadow:0 3px 0 rgba(47,111,105,.16);
}

/* ---- the reply bubble ---- */
.co-reply{
  display:block; max-width:min(660px, 90%);
  /* light grey bubble — the text had to flip from white to ink to stay legible */
  background:#F5F5F7; color:var(--ink);
  padding:19px 28px; border-radius:26px;
  font-size:1.02rem; line-height:1.66;
  border:1.5px solid #E8E8EC;
  box-shadow:0 3px 0 rgba(27,25,23,.05), 0 14px 34px rgba(27,25,23,.07);
  /* arrives a beat after the panel opens, like an incoming message */
  opacity:0; transform:translateY(14px) scale(.97);
  transition:opacity .42s var(--ease) .1s, transform .55s var(--ease-out) .1s;
}
.faq-item.open .co-reply{ opacity:1; transform:none; }


@media (max-width:620px){
  .co-bub{ padding:12px 18px; }
  .co-reply{ max-width:96%; padding:14px 19px; }
}
@media (prefers-reduced-motion: reduce){
  .co-reply{ opacity:1; transform:none; }
}

/* =========================================================================
   06 · LOYALTY — one full-bleed card against two paper cards
   ========================================================================= */
.lcard.co-bleed{
  position:relative; overflow:hidden; border:0;
  min-height:clamp(300px,34vw,360px); display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff; background:var(--ink);
}
.lcard.co-bleed .co-fig{ position:absolute; inset:0; z-index:0; background:none; }
.lcard.co-bleed .co-fig::after{
  background:linear-gradient(180deg, rgba(20,26,25,.18) 0%, rgba(20,26,25,.30) 42%, rgba(20,26,25,.86) 100%);
}
.lcard.co-bleed > *{ position:relative; z-index:3; }
.lcard.co-bleed h3{ color:#fff; }
.lcard.co-bleed p{ color:rgba(255,255,255,.82); }
.lcard.co-bleed .badge{ background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(6px); }
.lcard.co-bleed:hover .co-fig img{ transform:scale(1.05); }

/* =========================================================================
   07 · FOOTER — darkened panoramic band
   ========================================================================= */
.co-pano{
  position:relative; overflow:hidden;
  height:clamp(200px,26vw,320px);
  display:grid; place-items:center; text-align:center;
  background:var(--ink);
}
.co-pano img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.co-pano::after{
  content:""; position:absolute; inset:0; z-index:1;
  /* .58 → .82 keeps white type above 4.5:1 even over a bright photo */
  background:linear-gradient(180deg, rgba(20,26,25,.58), rgba(27,25,23,.82));
}
.co-pano-in{ position:relative; z-index:3; padding:0 var(--gut); }
.co-pano-in p{
  font-family:var(--display); color:#fff; margin:0 0 14px;
  font-size:clamp(1.4rem,3.4vw,2.4rem); line-height:1.18; letter-spacing:-.02em;
}
.co-pano-in span{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--trust-soft);
}
.co-pano-in span::before,.co-pano-in span::after{ content:""; width:26px; height:1.5px; background:var(--trust); opacity:.7; }

/* =========================================================================
   Motion / reduced-motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .co-fig img{ transition:none !important; transform:none !important; }
}

/* ==========================================================================
   99 · NORMALISATION LAYER
   Loaded last, so it settles the inconsistencies that accumulated as the page
   grew: one vertical rhythm, one content width, one heading scale, one family
   of image ratios, one card treatment, one entrance-animation system.
   ========================================================================== */
:root{
  /* vertical rhythm — every full section uses --sec-y, compact bands --sec-y-sm */
  --sec-y:      clamp(78px, 9vw, 132px);
  --sec-y-sm:   clamp(48px, 6vw, 78px);

  /* one card treatment */
  --card-pad:   clamp(24px, 2.8vw, 34px);
  --grid-gap:   clamp(18px, 2.4vw, 30px);

  /* one family of image ratios */
  --ar-editorial: 4 / 3;
  --ar-portrait:  3 / 4;
  --ar-wide:      16 / 10;
  --ar-square:    1 / 1;

  /* one heading scale below h2 */
  --h3-lead: clamp(1.5rem, 2.9vw, 2.2rem);   /* section-internal lead headings */
  --h3-card: 1.18rem;                        /* headings inside cards */

  --reveal-d: .62s;
}

/* ---------- rhythm ---------- */
section,
.co-about, .co-sticky, .guide, .why, .loyal, .cta-band, .co-faq, .tst{
  padding-block: var(--sec-y);
}
.creds{ padding-block: var(--sec-y-sm); }
.foot { padding-block: 0 34px; }            /* top padding owned by .foot-art */
.co-steps{ padding-block: 0; }              /* pinned — must own its own height */
@media (max-width:900px){ .co-steps{ padding-block: var(--sec-y); } }

/* ---------- one content width ---------- */
.sec-head{ max-width:min(760px, 100%); margin-bottom:clamp(38px,5vw,64px); }
.sec-head .lede{ margin-top:18px; }         /* replaces seven inline styles */
.sec-head > :last-child{ margin-bottom:0; }

/* ---------- one heading scale ---------- */
h2{ font-size:clamp(2rem, 4.2vw, 3.2rem); }
.co-steps-head h2{ font-size:clamp(2rem, 4.2vw, 3.2rem); }
.gcard h3, .step h3, .lcard h3{ font-size:var(--h3-card); line-height:1.25; }
/* The "Why Cross Over" pillars read as section headings, not card headings —
   one per full viewport of scroll — so they sit above the card scale. */
.co-stk-block h3{ font-size:clamp(1.75rem,3.4vw,2.7rem); line-height:1.1; }

/* ---------- one image-ratio family ---------- */
.co-arch{ aspect-ratio:var(--ar-portrait); }
.co-sq  { aspect-ratio:var(--ar-square); }
@media (max-width:900px){
  }

/* ---------- one card treatment ---------- */
.lcard, .form-card{ padding:var(--card-pad); border-radius:var(--r-lg); }
.loyal-grid, .steps{ gap:var(--grid-gap); }

/* ==========================================================================
   ENTRANCE ANIMATIONS
   Short (0.62s), small travel (max 34px), composited properties only.
   Every variant collapses to a plain fade when the section is already in view,
   and to nothing at all under prefers-reduced-motion.
   ========================================================================== */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity var(--reveal-d) var(--ease-out),
             transform var(--reveal-d) var(--ease-out);
  transition-delay:var(--d, 0ms);
}
[data-reveal="left"] { transform:translate3d(-34px,0,0); }
[data-reveal="right"]{ transform:translate3d(34px,0,0); }
[data-reveal="up"]   { transform:translate3d(0,34px,0); }
[data-reveal="pop"]  { transform:scale(.94) translate3d(0,14px,0); }
[data-reveal="scale"]{ transform:scale(.95); }
[data-reveal="fade"] { transform:none; }
[data-reveal].in,
[data-reveal].in[data-reveal]{ opacity:1; transform:none; }

/* headings and lede inside a revealed head cascade rather than arriving as a slab */
[data-stagger] > *{
  opacity:0; transform:translate3d(0,18px,0);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay:calc(var(--i, 0) * 70ms);
}
[data-stagger].in > *{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-stagger] > *{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* one-off head modifiers that replaced inline styles */
.co-head-flush{ margin-bottom:0; }
.co-head-tight{ margin-bottom:24px; }
.co-note{ font-size:.88rem; color:var(--muted); margin-bottom:22px; }
.co-note-flush{ margin:0; font-size:.9rem; }
.co-h3-tight{ margin-bottom:6px; }
.co-sheet-cta{ color:var(--trust-ink); }

/* nine packages instead of six — the pinned rail needs proportionally more room */
.pkgh-wrap{ height:900vh; }
/* ≤900px it is unpinned and flows at natural height — see the unpinned
   fallback block in site.css. Do not restore a vh height here. */
@media (max-width:900px){ .pkgh-wrap{ height:auto; } }
.pkgh-actions{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pkgh-actions .btn-ghost{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.34); }
.pkgh-actions .btn-ghost:hover{ background:rgba(255,255,255,.24); }
.pkgh-actions .btn{ padding:11px 22px; font-size:.85rem; }

.pkgh-nav{ gap:10px; }
.pkgh-arrow{ width:34px; height:34px; }
.pkgh-count{ font-size:.74rem; }

/* =========================================================================
   12 · LOYALTY — editorial "journal" layout
   Dark ground, centred masthead, image-above-text cards. Structure follows the
   reference; every colour, face and weight is this site's own — Fraunces for
   the headings, teal for the quiet meta line, amber still reserved for CTAs.
   ========================================================================= */
/* Last section before the footer, so it must be --base (or transparent) —
   the footer's sky fades to whatever sits above it, and a tint here shows as
   a seam. Was #F2F2F0. See "Pre-footer background" in CLAUDE.md. */
.loyal.co-journal{ background:var(--base); color:var(--muted); }

/* centred masthead */
.co-journal .sec-head{
  max-width:min(620px, 100%); margin-inline:auto; text-align:center;
}
.co-journal .stage{ color:var(--muted); opacity:1; }
.co-journal .eyebrow{ color:var(--trust-ink); justify-content:center; }
.co-journal .eyebrow::before{ background:var(--trust); }
.co-journal h2{ color:var(--ink); }
.co-journal .lede{ color:var(--ink-2); margin-inline:auto; }

/* the three journal entries */
.co-journal .loyal-grid{
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(30px,4.5vw,66px);
  max-width:940px; margin-inline:auto;   /* two entries shouldn't stretch the full width */
}
.co-journal .lcard{
  background:none; border:0; box-shadow:none; padding:0;
  backdrop-filter:none; text-align:center; min-height:0;
  display:flex; flex-direction:column;
}
.co-journal-img{
  aspect-ratio:var(--ar-wide);
  border-radius:var(--r-md);
  margin-bottom:clamp(20px,2.6vw,30px);
}
.co-journal .lcard:hover .co-journal-img img{ transform:scale(1.05); }

/* the badge becomes the small dateline-style meta */
.co-journal .badge{
  background:none; padding:0; border-radius:0; margin-bottom:11px;
  color:var(--trust-ink); font-size:.68rem; letter-spacing:.2em;
}
.co-journal .lcard h3{
  color:var(--ink); font-family:var(--display); font-weight:400;
  font-size:clamp(1.24rem,2vw,1.62rem); line-height:1.16; margin-bottom:12px;
}
.co-journal .lcard p{
  color:var(--muted); font-size:.94rem; line-height:1.72;
  max-width:36ch; margin-inline:auto;
}

@media (max-width:900px){
  .co-journal .loyal-grid{ grid-template-columns:1fr; gap:clamp(38px,7vw,56px); }
  .co-journal .lcard p{ max-width:46ch; }
}

/* ==========================================================================
   SHARED INNER-PAGE COMPONENTS
   Used by contact, blog, package and destination pages.
   ========================================================================== */




.co-next{ list-style:none; margin:clamp(26px,3.4vw,38px) 0 0; padding:0; display:grid; gap:22px; }
.co-next li{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; }
.co-nx-n{
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--trust-tint); color:var(--trust-ink);
  font-size:.8rem; font-weight:700; margin-top:2px;
}
.co-next h3{ font-family:var(--sans); font-size:1rem; font-weight:600; margin-bottom:5px; }
.co-next p{ font-size:.9rem; line-height:1.66; color:var(--muted); margin:0; max-width:44ch; }

/* current page marker in the nav */
.nav-links a[aria-current="page"]{ color:var(--ink); background:var(--base-2); }

@media (max-width:900px){
          }
@media (max-width:620px){
  }
.nav-sheet a[aria-current="page"]{ color:var(--trust-ink); }

/* travel-guide reassurance strip (homepage) */
.co-chips{
  list-style:none; margin:clamp(40px,5vw,66px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.co-chips li{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--trust-line);
  color:var(--ink-2); font-size:.83rem; font-weight:500;
  padding:11px 18px 11px 14px; border-radius:100px; box-shadow:var(--e1);
}
.co-chips li::before{
  content:""; flex:none; width:17px; height:17px; border-radius:50%;
  background:var(--trust-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6F69' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ==========================================================================
   ARTICLE / LONG-FORM READING  —  blog posts in /blog/
   --------------------------------------------------------------------------
   site.css has no prose typography (it was built for a single landing page),
   so this is the one genuinely new pattern the blog wave needs. Same .co-
   prefix, same tokens, no new colours.

   Shapes chosen so an article still reads as the same site:
     entry heading .. hairline rule + amber serif index number
     fact callout ... teal left rule on a tinted panel
     figure ......... notched corner, matching the travel-guide frame
     TOC ............ sticky rail on desktop, plain list on mobile
   ========================================================================== */

.co-post{ padding-top:clamp(96px,11vw,150px); }

/* --- breadcrumb ---------------------------------------------------------- */
.co-crumb{ margin-bottom:clamp(26px,3vw,40px); }
.co-crumb ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:.78rem; color:var(--muted);
}
.co-crumb li+li::before{ content:"/"; margin-right:8px; color:var(--sand-deep); }
/* padded so each crumb clears the 24px WCAG target minimum; inline-block
   keeps the separators and baseline exactly where they were */
.co-crumb a{ color:var(--trust-ink); display:inline-block; padding:5px 0; min-height:24px; }
.co-crumb a:hover{ text-decoration:underline; text-underline-offset:3px; }
.co-crumb [aria-current="page"]{ color:var(--ink-2); }

/* --- article header ------------------------------------------------------ */
.co-post-head{ max-width:820px; margin-bottom:clamp(30px,4vw,48px); }
.co-post-head h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,4.6vw,3.35rem); line-height:1.1;
  letter-spacing:-.02em; margin:0 0 20px;
}
.co-post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  margin-top:22px; font-size:.8rem; color:var(--muted);
}
.co-post-meta span{ display:inline-flex; align-items:center; gap:7px; }
.co-post-meta span::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--trust);
}
.co-byline{
  margin:14px 0 0; font-size:.84rem; color:var(--muted); font-style:italic;
}
.co-byline a{ color:var(--trust-ink); font-style:normal; font-weight:600; }

/* hero — notched frame, echoes the travel-guide cards on the homepage */
.co-post-hero{
  margin:0 0 clamp(40px,5vw,70px);
  border-radius:var(--r-lg) 6px var(--r-lg) 6px;
  overflow:hidden; box-shadow:var(--e2); background:var(--sand);
}
.co-post-hero img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }

/* --- two-column shell: sticky TOC + article ------------------------------ */
.co-post-body{
  display:grid; gap:clamp(32px,4vw,64px);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:1040px){
  .co-post-body{ grid-template-columns:238px minmax(0,1fr); }
  .co-toc{ position:sticky; top:112px; }
}

/* single-column article shell — package and destination pages have no TOC,
   so they use this instead of .co-post-body (which reserves a 238px rail
   for a sibling .co-toc that doesn't exist on these pages) */
.co-body-wide{ display:block; }

/* Readable measure for running prose inside the wide shell.
   The shell is full-width on purpose so grids, tables and the day-by-day
   timeline can breathe — but body copy inheriting that width runs to ~140
   characters per line at 1440px, roughly double the comfortable 65-75.
   Constrain only direct-child prose; every full-width component
   (.co-why, .co-hl, .co-glance, .co-itin, .co-incl, .co-plan, .co-dest-pkg,
   .co-table-wrap, .faq-list, .co-related, .co-inline-cta, .co-sources,
   .co-answer-list) carries a class and is deliberately excluded, so the
   layout keeps its full-bleed structure. 68ch matches the blog article
   column so every article-style page shares one measure. */
.co-body-wide .co-article > p,
.co-body-wide .co-article > ul:not([class]),
.co-body-wide .co-article > ol:not([class]){
  max-width:68ch;
}

/* --- table of contents --------------------------------------------------- */
.co-toc{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:24px 22px;
  box-shadow:var(--e1);
}
.co-toc h2{
  font-family:var(--sans); font-size:.7rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--trust-ink);
  margin:0 0 14px;
}
.co-toc ol{
  list-style:none; margin:0; padding:0;
  counter-reset:toc; max-height:none;
}
.co-toc li{ counter-increment:toc; }
.co-toc a{
  display:block; padding:6px 0; font-size:.85rem; color:var(--ink-2);
  line-height:1.4; transition:color .25s;
}
.co-toc a::before{
  content:counter(toc) ". "; color:var(--muted); font-variant-numeric:tabular-nums;
}
.co-toc a:hover{ color:var(--trust-ink); }
@media (max-width:1039px){
  .co-toc ol{ columns:2; column-gap:26px; }
  .co-toc li{ break-inside:avoid; }
}
@media (max-width:560px){ .co-toc ol{ columns:1; } }

/* --- the prose ----------------------------------------------------------- */
.co-article{ max-width:68ch; }
.co-article > p{
  font-size:1.03rem; line-height:1.75; color:var(--ink-2); margin:0 0 22px;
}
.co-article > p.co-intro{
  font-size:clamp(1.06rem,1.5vw,1.22rem); line-height:1.68; color:var(--ink);
}
.co-article a:not(.btn){
  color:var(--trust-ink); border-bottom:1px solid var(--trust-line);
  padding-bottom:1px; transition:color .25s, border-color .25s;
}
.co-article a:not(.btn):hover{ color:var(--ink); border-color:var(--trust); }

/* entry heading: serif index number in amber, hairline above */
.co-article h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.42rem,2.5vw,1.92rem); line-height:1.22;
  letter-spacing:-.015em; color:var(--ink);
  margin:clamp(48px,5vw,72px) 0 16px; padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--line);
  scroll-margin-top:104px;
}
.co-article h2 .co-n{
  color:var(--action-text); font-variant-numeric:tabular-nums;
  margin-right:.4em;
}
.co-article h3{
  font-family:var(--display); font-weight:500;
  font-size:1.15rem; margin:34px 0 12px; color:var(--ink);
}
.co-article ul, .co-article ol{ margin:0 0 22px; padding-left:1.3em; color:var(--ink-2); }
.co-article li{ margin-bottom:9px; line-height:1.7; }
.co-article li::marker{ color:var(--trust); }

/* --- featured-snippet answer block ---------------------------------------
   Sits directly under the H2 that restates the search query. Google extracts
   the first answer-shaped block on the page, so this deliberately comes
   before the numbered entries. Styled to read as a summary, not a callout,
   because it is genuinely the first thing a reader wants too. */
.co-article > p.co-answer{
  font-size:1.05rem; line-height:1.7; color:var(--ink);
  background:var(--surface); border:1px solid var(--trust-line);
  border-radius:var(--r-md) var(--r-md) 0 0;
  padding:22px 24px 18px; margin:0;
}
.co-answer-list{
  list-style:none; margin:0 0 30px !important; padding:4px 24px 22px !important;
  background:var(--surface); border:1px solid var(--trust-line); border-top:0;
  border-radius:0 0 var(--r-md) var(--r-md);
  columns:2; column-gap:30px;
}
.co-answer-list li{
  break-inside:avoid; margin-bottom:7px; padding-left:20px; position:relative;
  font-size:.9rem; color:var(--ink-2);
}
.co-answer-list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--trust);
}
@media (max-width:640px){ .co-answer-list{ columns:1; } }

/* --- the practical-catch callout ----------------------------------------- */
/* NOTE: deliberately not display:flex — the callout contains inline <b> and
   text, and flex would promote the <b> to its own flex item and stack it in a
   narrow column. Indent + absolutely positioned icon keeps it as normal prose. */
.co-fact{
  position:relative;
  background:var(--trust-tint); border-left:3px solid var(--trust);
  border-radius:6px var(--r-sm) var(--r-sm) 6px;
  padding:15px 18px 15px 48px; margin:0 0 24px;
  font-size:.9rem; line-height:1.6; color:var(--ink-2);
}
.co-fact::before{
  content:""; position:absolute; left:18px; top:17px;
  width:17px; height:17px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6F69' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E") center/17px no-repeat;
}
.co-fact b{ color:var(--trust-ink); font-weight:600; }

/* --- official source citations -------------------------------------------- */
.co-sources{
  list-style:none; margin:0 0 26px !important; padding:0 !important;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); overflow:hidden;
}
.co-sources li{
  margin:0; padding:14px 18px 14px 44px; position:relative;
  border-bottom:1px solid var(--line); font-size:.88rem; color:var(--muted);
}
.co-sources li:last-child{ border-bottom:0; }
.co-sources li::before{
  content:""; position:absolute; left:17px; top:17px; width:15px; height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6F69' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 21V9l8-6 8 6v12'/%3E%3Cpath d='M9 21v-7h6v7'/%3E%3C/svg%3E") center/15px no-repeat;
}
.co-sources a{ font-weight:600; color:var(--trust-ink); }

/* --- inline figure ------------------------------------------------------- */
.co-article figure{
  margin:clamp(28px,3.4vw,42px) 0;
  border-radius:var(--r-md) 6px var(--r-md) 6px;
  overflow:hidden; box-shadow:var(--e1); background:var(--sand);
}
.co-article figure img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.co-article figcaption{
  padding:12px 18px 15px; font-size:.79rem; color:var(--muted);
  background:var(--surface); border-top:1px solid var(--line);
}

/* --- season / fact table ------------------------------------------------- */
.co-table-wrap{ overflow-x:auto; margin:0 0 26px; -webkit-overflow-scrolling:touch; }
.co-table{
  width:100%; min-width:460px; border-collapse:collapse;
  font-size:.88rem; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;
}
.co-table th, .co-table td{
  text-align:left; padding:13px 16px; border-bottom:1px solid var(--line);
  vertical-align:top;
}
.co-table th{
  background:var(--trust-tint); color:var(--trust-ink);
  font-size:.72rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  white-space:nowrap;
}
.co-table tr:last-child td{ border-bottom:0; }
.co-table td:first-child{ font-weight:600; color:var(--ink); white-space:nowrap; }

/* --- mid-article + closing CTA ------------------------------------------- */
.co-inline-cta{
  background:var(--sand); border:1px solid var(--sand-deep);
  border-radius:var(--r-md); padding:clamp(22px,2.6vw,30px);
  margin:clamp(36px,4vw,52px) 0;
}
.co-inline-cta h3{
  font-family:var(--display); font-size:1.2rem; margin:0 0 9px; color:var(--ink);
}
.co-inline-cta p{ font-size:.92rem; color:var(--ink-2); margin:0 0 18px; }
.co-inline-cta .co-cta-btns{ display:flex; flex-wrap:wrap; gap:11px; }

/* --- related guides ------------------------------------------------------ */
.co-related{ margin-top:clamp(56px,6vw,88px); }
.co-related h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.4rem,2.4vw,1.85rem); margin:0 0 clamp(20px,2.4vw,30px);
}
.co-related-grid{
  display:grid; gap:clamp(14px,2vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
}
.co-rcard{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden; box-shadow:var(--e1);
  transition:transform .5s var(--ease-out), border-color .3s, box-shadow .4s;
  display:flex; flex-direction:column;
}
.co-rcard:hover{ transform:translateY(-5px); border-color:var(--trust); box-shadow:var(--e2); }
.co-rcard img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.co-rcard-body{ padding:18px 20px 22px; }
.co-rcard .kicker{
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--trust-ink); display:block; margin-bottom:9px;
}
.co-rcard h3{ font-family:var(--display); font-weight:500; font-size:1.04rem; margin:0; line-height:1.32; }

/* ==========================================================================
   BLOG HUB  —  blog.html
   Card grid + region filter. Built to absorb the rest of the content
   calendar: every card is one repeating block with data-region.
   ========================================================================== */

.co-hub-head{ padding-top:clamp(96px,11vw,150px); }

/* filter chips — interactive sibling of the static .co-chips strip */
.co-filter{
  list-style:none; margin:clamp(30px,3.6vw,44px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.co-filter button{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--trust-line);
  color:var(--ink-2); font-size:.83rem; font-weight:500;
  padding:10px 20px; border-radius:100px; box-shadow:var(--e1);
  transition:background .28s, color .28s, border-color .28s, transform .28s var(--ease-out);
}
.co-filter button:hover{ transform:translateY(-2px); border-color:var(--trust); }
.co-filter button[aria-pressed="true"]{
  background:var(--trust-ink); border-color:var(--trust-ink); color:#fff;
}
.co-filter .co-filter-n{ font-size:.74rem; opacity:.7; font-variant-numeric:tabular-nums; }

.co-hub-grid{
  display:grid; gap:clamp(18px,2.4vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
}
.co-hub-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg) 6px var(--r-lg) 6px; overflow:hidden;
  box-shadow:var(--e1); display:flex; flex-direction:column;
  transition:transform .5s var(--ease-out), border-color .3s, box-shadow .4s;
}
.co-hub-card:hover{ transform:translateY(-6px); border-color:var(--trust); box-shadow:var(--e2); }
.co-hub-card[hidden]{ display:none; }
.co-hub-media{ position:relative; background:var(--sand); }
.co-hub-media img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.co-hub-region{
  position:absolute; left:14px; top:14px;
  background:rgba(255,255,255,.93); backdrop-filter:blur(6px);
  color:var(--trust-ink); font-size:.66rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  padding:7px 13px; border-radius:100px; box-shadow:var(--e1);
}
.co-hub-body{ padding:clamp(20px,2.2vw,26px); display:flex; flex-direction:column; flex:1; }
.co-hub-body h3{
  font-family:var(--display); font-weight:400; font-size:1.24rem;
  line-height:1.28; margin:0 0 11px; color:var(--ink);
}
.co-hub-body p{ font-size:.89rem; color:var(--muted); margin:0 0 20px; flex:1; line-height:1.62; }
.co-hub-foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-top:15px; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--muted);
}
/* Now an <a>, not a <span> — it always looked clickable but wasn't.
   min-height clears the WCAG 2.5.8 (AA) 24px target minimum. */
.co-hub-foot .co-hub-go{
  font-weight:600; color:var(--trust-ink); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; min-height:24px;
}
.co-hub-foot .co-hub-go:hover{ text-decoration:underline; }
.co-hub-card:hover .co-hub-go{ gap:10px; }
.co-hub-go svg{ transition:transform .35s var(--ease-out); }
.co-hub-card:hover .co-hub-go svg{ transform:translateX(3px); }

.co-hub-empty{
  padding:clamp(40px,5vw,64px); text-align:center; color:var(--muted);
  border:1px dashed var(--sand-deep); border-radius:var(--r-md);
}

@media (prefers-reduced-motion:reduce){
  .co-rcard, .co-hub-card, .co-filter button, .co-hub-go svg{ transition:none; }
  .co-rcard:hover, .co-hub-card:hover, .co-filter button:hover{ transform:none; }
}

/* ==========================================================================
   PACKAGE PAGES  —  /packages/*.html and packages.html
   The money pages. Price and duration are stamped from assets/data/packages.json
   by assets/tools/build_packages.py — never hand-edit them in the HTML.
   ========================================================================== */

.co-pkg{ padding-top:clamp(96px,11vw,150px); }

/* --- hero: photo left, price card right ---------------------------------- */
.co-pkg-hero{
  display:grid; gap:clamp(24px,3vw,42px); align-items:start;
  grid-template-columns:minmax(0,1fr);
  margin-bottom:clamp(40px,5vw,70px);
}
@media (min-width:960px){ .co-pkg-hero{ grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr); } }

.co-pkg-media{
  border-radius:var(--r-lg) 6px var(--r-lg) 6px; overflow:hidden;
  box-shadow:var(--e2); background:var(--sand);
}
.co-pkg-media img{ width:100%; aspect-ratio:16/10; object-fit:cover; }

.co-pkg-buy{
  background:var(--surface); border:1px solid var(--trust-line);
  border-radius:var(--r-lg); padding:clamp(24px,2.6vw,32px);
  box-shadow:var(--e2);
}
@media (min-width:960px){ .co-pkg-buy{ position:sticky; top:112px; } }
.co-pkg-price{
  font-family:var(--display); font-weight:500;
  font-size:clamp(2.1rem,3.6vw,2.9rem); line-height:1; color:var(--ink);
  letter-spacing:-.02em; margin:0;
}
.co-pkg-from{
  display:block; font-family:var(--sans); font-size:.7rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--trust-ink);
  margin-bottom:9px;
}
.co-pkg-basis{ font-size:.8rem; color:var(--muted); margin:8px 0 0; }
.co-pkg-dur{
  display:flex; align-items:center; gap:9px; margin:20px 0 22px;
  padding:13px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:.9rem; color:var(--ink-2); font-weight:500;
}
.co-pkg-buy .btn{ width:100%; justify-content:center; }
.co-pkg-buy .btn + .btn{ margin-top:10px; }
.co-pkg-assure{
  list-style:none; margin:22px 0 0; padding:0;
  font-size:.82rem; color:var(--muted);
}
.co-pkg-assure li{ padding:6px 0 6px 24px; position:relative; }
.co-pkg-assure li::before{
  content:""; position:absolute; left:0; top:11px; width:13px; height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6F69' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* --- trip at a glance ----------------------------------------------------- */
.co-glance{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  margin:0 0 clamp(40px,5vw,64px);
}
.co-glance div{ background:var(--surface); padding:18px 20px; }
.co-glance dt{
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--trust-ink); margin-bottom:7px;
}
.co-glance dd{ margin:0; font-size:.9rem; color:var(--ink-2); line-height:1.5; }

/* --- day-by-day itinerary ------------------------------------------------- */
.co-itin{ list-style:none; margin:0 0 clamp(40px,5vw,64px); padding:0; position:relative; }
.co-itin::before{
  content:""; position:absolute; left:23px; top:14px; bottom:14px;
  width:1px; background:var(--trust-line);
}
@media (max-width:640px){ .co-itin::before{ left:17px; } }

.co-itin > li{ position:relative; padding:0 0 clamp(28px,3vw,40px) 66px; }
@media (max-width:640px){ .co-itin > li{ padding-left:50px; } }
.co-itin > li:last-child{ padding-bottom:0; }

.co-itin-n{
  position:absolute; left:0; top:0;
  width:47px; height:47px; border-radius:50%;
  background:var(--trust-tint); border:1px solid var(--trust-line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--sans); line-height:1;
}
@media (max-width:640px){ .co-itin-n{ width:35px; height:35px; } }
.co-itin-n b{ font-size:.95rem; font-weight:700; color:var(--trust-ink); }
.co-itin-n span{ font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
@media (max-width:640px){ .co-itin-n span{ display:none; } }

.co-itin h3{
  font-family:var(--display); font-weight:500; font-size:1.16rem;
  margin:11px 0 10px; color:var(--ink); line-height:1.3;
}
.co-itin p{ margin:0; font-size:.94rem; line-height:1.7; color:var(--ink-2); }
.co-itin figure{
  margin:16px 0 0; border-radius:var(--r-sm); overflow:hidden;
  max-width:440px; background:var(--sand);
}
.co-itin figure img{ width:100%; aspect-ratio:3/2; object-fit:cover; }

/* --- what's included / not included --------------------------------------- */
.co-incl{
  display:grid; gap:clamp(18px,2.4vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin:0 0 clamp(40px,5vw,64px);
}
.co-incl > div{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:clamp(22px,2.4vw,28px);
}
.co-incl h3{
  font-family:var(--display); font-weight:500; font-size:1.1rem;
  margin:0 0 16px; color:var(--ink);
}
.co-incl ul{ list-style:none; margin:0; padding:0; }
.co-incl li{
  position:relative; padding:7px 0 7px 26px;
  font-size:.89rem; line-height:1.6; color:var(--ink-2);
}
.co-incl li::before{
  content:""; position:absolute; left:0; top:12px; width:14px; height:14px;
  background-repeat:no-repeat; background-position:center; background-size:14px;
}
.co-incl-yes li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C37' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.co-incl-no li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23736C62' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.co-incl-no{ background:var(--base-2) !important; }

/* --- package cards (packages.html + related rails) ------------------------ */
.co-pkg-grid{
  display:grid; gap:clamp(18px,2.4vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(292px,1fr));
}
.co-pcard{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg) 6px var(--r-lg) 6px; overflow:hidden;
  box-shadow:var(--e1); display:flex; flex-direction:column;
  transition:transform .5s var(--ease-out), border-color .3s, box-shadow .4s;
}
.co-pcard:hover{ transform:translateY(-6px); border-color:var(--trust); box-shadow:var(--e2); }
.co-pcard[hidden]{ display:none; }
.co-pcard-media{ position:relative; background:var(--sand); }
.co-pcard-media img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.co-pcard .tag{
  position:absolute; left:14px; top:14px; z-index:2;
}
.co-pcard-body{ padding:clamp(20px,2.2vw,26px); display:flex; flex-direction:column; flex:1; }
.co-pcard-body h3{
  font-family:var(--display); font-weight:400; font-size:1.2rem;
  line-height:1.3; margin:0 0 11px; color:var(--ink);
}
.co-pcard-body p{ font-size:.88rem; color:var(--muted); margin:0 0 20px; flex:1; line-height:1.62; }
.co-pcard-foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  padding-top:16px; border-top:1px solid var(--line);
}
.co-pcard-price{
  font-family:var(--display); font-size:1.32rem; font-weight:500; color:var(--ink); line-height:1;
}
.co-pcard-price small{
  display:block; font-family:var(--sans); font-size:.66rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--trust-ink);
  margin-bottom:6px;
}
.co-pcard-dur{ font-size:.78rem; color:var(--muted); text-align:right; }

/* ==========================================================================
   DESTINATION PAGES  —  /destinations/*.html and destinations.html
   The pillar pages. Same components as the package pages where they overlap;
   the two patterns unique to this template are the why-go grid and the
   highlights mosaic.
   ========================================================================== */

.co-dest-hero{
  position:relative; border-radius:var(--r-xl) 8px var(--r-xl) 8px;
  overflow:hidden; margin:0 0 clamp(40px,5vw,68px);
  background:var(--sand); box-shadow:var(--e2);
}
.co-dest-hero img{ width:100%; aspect-ratio:21/9; object-fit:cover; display:block; }
@media (max-width:700px){ .co-dest-hero img{ aspect-ratio:4/3; } }
.co-dest-hero figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(26px,4vw,46px) clamp(22px,3.4vw,44px);
  background:linear-gradient(to top, rgba(27,25,23,.82), rgba(27,25,23,.34) 55%, transparent);
  color:#fff; font-family:var(--display); font-weight:400;
  font-size:clamp(1.05rem,2vw,1.5rem); line-height:1.35;
  max-width:24ch; text-shadow:0 1px 20px rgba(0,0,0,.3);
}

/* --- why go: 4 reasons ---------------------------------------------------- */
.co-why{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  margin:0 0 clamp(44px,5vw,70px); padding:0; list-style:none;
}
.co-why li{ background:var(--surface); padding:clamp(22px,2.4vw,28px); }
.co-why h3{
  font-family:var(--display); font-weight:500; font-size:1.06rem;
  margin:0 0 10px; color:var(--ink); line-height:1.32;
}
.co-why p{ margin:0; font-size:.89rem; line-height:1.65; color:var(--ink-2); }

/* --- highlights mosaic ---------------------------------------------------- */
.co-hl{
  display:grid; gap:clamp(14px,1.8vw,22px); list-style:none; margin:0 0 clamp(44px,5vw,70px); padding:0;
  grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
}
.co-hl li{
  border-radius:var(--r-md) 6px var(--r-md) 6px; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--e1);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease-out), border-color .3s;
}
.co-hl li:hover{ transform:translateY(-4px); border-color:var(--trust); }
.co-hl img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.co-hl-body{ padding:17px 19px 21px; }
.co-hl h3{
  font-family:var(--display); font-weight:500; font-size:1.02rem;
  margin:0 0 8px; color:var(--ink); line-height:1.3;
}
.co-hl p{ margin:0; font-size:.85rem; line-height:1.6; color:var(--muted); }

/* --- planning notes ------------------------------------------------------- */
.co-plan{
  display:grid; gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
  margin:0 0 clamp(44px,5vw,70px);
}
.co-plan > div{
  background:var(--trust-tint); border:1px solid var(--trust-line);
  border-radius:var(--r-md); padding:clamp(20px,2.2vw,26px);
}
.co-plan h3{
  font-family:var(--sans); font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--trust-ink);
  margin:0 0 11px;
}
.co-plan p{ margin:0; font-size:.9rem; line-height:1.66; color:var(--ink-2); }

/* --- the package cross-sell strip ---------------------------------------- */
.co-dest-pkg{
  display:grid; gap:clamp(20px,2.6vw,34px); align-items:center;
  grid-template-columns:minmax(0,1fr);
  background:var(--sand); border:1px solid var(--sand-deep);
  border-radius:var(--r-lg); padding:clamp(24px,3vw,38px);
  margin:0 0 clamp(44px,5vw,70px);
}
@media (min-width:760px){ .co-dest-pkg{ grid-template-columns:minmax(0,1fr) auto; } }
.co-dest-pkg h3{
  font-family:var(--display); font-weight:400; font-size:clamp(1.24rem,2.2vw,1.6rem);
  margin:0 0 10px; color:var(--ink); line-height:1.28;
}
.co-dest-pkg p{ margin:0; font-size:.93rem; color:var(--ink-2); line-height:1.65; }
.co-dest-pkg-buy{ text-align:left; }
@media (min-width:760px){ .co-dest-pkg-buy{ text-align:right; white-space:nowrap; } }
.co-dest-pkg-price{
  font-family:var(--display); font-size:clamp(1.6rem,2.8vw,2.05rem);
  font-weight:500; color:var(--ink); line-height:1; margin:0 0 4px;
}
.co-dest-pkg-price small{
  display:block; font-family:var(--sans); font-size:.66rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--trust-ink); margin-bottom:6px;
}
.co-dest-pkg-meta{ font-size:.79rem; color:var(--muted); margin:0 0 16px; }

@media (prefers-reduced-motion:reduce){
  .co-hl li, .co-hl li:hover, .co-pcard, .co-pcard:hover{ transition:none; transform:none; }
}

/* ==========================================================================
   CONTACT PAGE
   A contact page has one job, so the detail sits in the first screen rather
   than behind a hero. The composition is the distinctive part: an asymmetric
   split where the photograph breaks the 1240px container and bleeds off the
   right edge of the viewport — the only place on the site that happens.
   ========================================================================== */

.ct-lead{
  background:linear-gradient(168deg, var(--trust-tint), var(--base) 62%);
  padding-block:calc(var(--sec-y) + 64px) var(--sec-y);   /* clears the fixed nav */
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.ct-lead-grid{
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(34px,5vw,76px); align-items:center;
}
.ct-lead h1{
  font-size:clamp(2.4rem,5.4vw,4.1rem); line-height:1.04; letter-spacing:-.025em;
  color:var(--ink); margin-bottom:20px;
}
.ct-lead h1 em{ font-style:normal; color:var(--trust-ink); }
.ct-lead .lede{ margin-bottom:clamp(30px,4vw,44px); }

/* ---- contact rows: editorial list, not cards ---- */
.ct-rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--trust-line); }
.ct-row{ border-bottom:1px solid var(--trust-line); }
.ct-row > a{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(14px,2vw,20px);
  padding:clamp(15px,1.9vw,20px) 4px;
  min-height:64px;                                  /* comfortable touch target */
  transition:padding-inline .35s var(--ease-out), background .3s var(--ease);
  border-radius:var(--r-sm);
}
.ct-row > a:hover{ padding-inline:14px 10px; background:rgba(255,255,255,.6); }
.ct-row-ico{
  display:grid; place-items:center; width:42px; height:42px; border-radius:13px;
  background:var(--surface); border:1px solid var(--trust-line); color:var(--trust-ink);
  transition:background .3s, color .3s, border-color .3s;
}
.ct-row-wa   .ct-row-ico{ color:var(--wa); }
.ct-row-mail .ct-row-ico{ color:var(--action-text); }
.ct-row > a:hover .ct-row-ico{ background:var(--trust-tint); border-color:var(--trust); }
.ct-row-main{ min-width:0; }
.ct-row-label{
  display:block; font-size:.64rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:3px;
}
.ct-row-value{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(1.08rem,1.9vw,1.42rem); line-height:1.15; color:var(--ink);
  word-break:break-word;
}
.ct-row-note{ display:block; font-size:.8rem; color:var(--muted); margin-top:4px; }
.ct-row-go{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  color:var(--trust-ink); background:transparent;
  opacity:.45; transform:translateX(-4px);
  transition:opacity .3s var(--ease), transform .35s var(--ease-out), background .3s;
}
.ct-row > a:hover .ct-row-go{ opacity:1; transform:none; background:var(--trust-tint); }

.ct-hours{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin:clamp(22px,3vw,30px) 0 0; font-size:.85rem; color:var(--muted);
}

/* ---- the photograph breaks the container and bleeds right ---- */
.ct-lead-media{
  position:relative; aspect-ratio:4/5; max-height:600px;
  border-radius:var(--r-xl) 0 0 var(--r-xl);
  margin-right:calc(-1 * ((100vw - min(100% * 0.96 / 0.96, var(--maxw))) / 2) - var(--gut));
  box-shadow:var(--e3);
}
.ct-plate{
  position:absolute; left:0; bottom:clamp(22px,4vw,44px); z-index:5;
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:clamp(18px,2.2vw,24px) clamp(20px,2.6vw,28px);
  max-width:min(330px,80%); box-shadow:var(--e2);
  transform:translateX(-14px);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.ct-plate:hover{ transform:translateX(-6px); box-shadow:var(--e3); }
.ct-plate-k{
  display:block; font-size:.62rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--trust-ink); margin-bottom:9px;
}
.ct-plate-v{ display:block; font-size:.88rem; line-height:1.6; color:var(--ink-2); }
.ct-plate-go{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  font-size:.76rem; font-weight:600; color:var(--trust-ink);
  transition:gap .3s var(--ease-out);
}
.ct-plate:hover .ct-plate-go{ gap:12px; }

/* ---- form polish ---- */
.field-hint{ display:block; margin-top:6px; font-size:.74rem; color:var(--muted); }
.form-note-pre{ text-align:left !important; margin:0 0 14px !important; }
.ct-map-h{
  font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--trust-ink);
  padding:0 clamp(20px,3vw,34px); margin:0 0 -6px; transform:translateY(22px);
  position:relative; z-index:2;
}

@media (max-width:900px){
  .ct-lead{ padding-block:calc(var(--sec-y) + 52px) var(--sec-y); }
  .ct-lead-grid{ grid-template-columns:1fr; gap:34px; }
  .ct-lead-media{
    aspect-ratio:16/11; max-height:340px; order:-1;
    margin-right:calc(-1 * var(--gut)); margin-left:calc(-1 * var(--gut));
    border-radius:0;
  }
  .ct-plate{ left:var(--gut); transform:none; border-radius:var(--r-md); max-width:min(320px,84%); }
  .ct-plate:hover{ transform:none; }
}
@media (max-width:620px){
  .ct-row > a{ grid-template-columns:auto minmax(0,1fr); }
  .ct-row-go{ display:none; }
  .ct-plate{ position:static; max-width:none; margin-top:14px; backdrop-filter:none; }
}
@media (prefers-reduced-motion: reduce){
  .ct-row > a, .ct-row-go, .ct-plate{ transition:none !important; }
}

/* contact: wrappers + the phone row (default teal icon, named for symmetry) */
.ct-lead-copy{ min-width:0; }
.ct-row-phone .ct-row-ico{ color:var(--trust-ink); }
.page-contact .nav{ background:rgba(255,255,255,.88); }
.nav-sheet a[aria-current="page"]{ color:var(--trust-ink); }