/* ============================================================================
   NAUTIKA · Composable content pages
   ----------------------------------------------------------------------------
   The furniture around a contentPage's blocks: the hero, the rhythm between
   sections, and the image card row.

   The prose inside a text section is styled by .nk-prose in nautika.site.css,
   which is loaded on every page — nothing here restyles editor HTML.

   The card row is one layout with one knob. --cp-cards is set inline by the
   template from the block's Columns setting, and the grid is auto-fit rather
   than a fixed track count, so a row of three on a laptop becomes two on a
   tablet and one on a phone without a media query per column count. The legacy
   site's two different strips — three big island cards, five small equipment
   tiles — are this one row with different values.
   ========================================================================== */

/* ==========================================================================
   1 · HERO
   ========================================================================== */

/* Bottom-anchored and tall enough to feel like a place rather than a page header. The photograph
   sits in its own oversized layer (.cp-hero-media) so nautika.parallax.js can drift it as the page
   scrolls — the same engine and markup contract as the parallax bands, and the same graceful
   degradation: no script, no motion preference, and it is an ordinary cover photograph. */
.cp-hero{position:relative;overflow:hidden;background:var(--nk-grad-deep);color:#fff;
  display:flex;align-items:flex-end;min-height:clamp(19rem,44vh,28rem);
  padding-block:clamp(5.5rem,12vw,8rem) clamp(3.5rem,8vw,5.5rem)}
.cp-hero-media{position:absolute;left:0;right:0;top:-9%;height:118%;z-index:0;will-change:transform}
.cp-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* The page's ground rises into the photograph as a swell line — the one shape on this site that
   says "boat" without a word. A mask, not an SVG in the markup, so the wave is painted in whatever
   --nk-bg the theme resolves to. */
.cp-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(2rem,4.5vw,3.5rem);
  z-index:3;pointer-events:none;background:var(--nk-bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C240,96 480,16 720,44 C960,72 1200,24 1440,56 L1440,96 L0,96 Z' fill='%23000'/%3E%3C/svg%3E") center top/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C240,96 480,16 720,44 C960,72 1200,24 1440,56 L1440,96 L0,96 Z' fill='%23000'/%3E%3C/svg%3E") center top/100% 100% no-repeat}
/* The veil, not the image, is what makes the title readable over any photograph an editor picks.
   It is weighted to the left rather than spread evenly: the copy is on the left, so that is where
   the contrast has to be, and a veil dense enough everywhere hides the picture it is protecting. */
.cp-hero-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(108deg,rgba(4,18,31,.88) 0%,rgba(6,38,66,.7) 46%,rgba(10,90,145,.34) 100%)}
.cp-hero-inner{position:relative;z-index:2}
.cp-hero .nk-display{color:#fff;font-size:clamp(2.3rem,5.5vw,4rem);line-height:1.06;letter-spacing:-.03em}
.cp-hero-intro{margin-top:1rem;max-width:60ch;color:rgba(217,232,244,.85);font-size:var(--nk-text-lg);line-height:1.6}
.cp-crumbs{margin-bottom:.9rem;font-size:var(--nk-text-sm);font-weight:600}
.cp-crumbs a{color:var(--nk-reef);text-decoration:none}
.cp-crumbs a:hover{text-decoration:underline}

/* ==========================================================================
   2 · SECTIONS
   ========================================================================== */

/* Prose keeps a readable measure of its own (.nk-prose is capped below), but a
   card row breaks out of it — a three-up row squeezed into 68ch is three
   thumbnails.

   Each section owns its own vertical padding rather than the page owning one
   block of it, because a tinted or photographic band has to paint edge to edge
   AND have its own breathing room; a margin between sections would leave a
   stripe of the page's background inside the band. */
.cp-sections > .cp-section{padding-block:clamp(3rem,7vw,5.5rem)}
/* Two tinted bands in a row are one band. An editor reordering the page can put
   them next to each other, and a seam between two identical grounds reads as a
   mistake. */
.cp-sections > .cp-section.is-tinted + .cp-section.is-tinted{padding-top:0}
/* One measure for the whole text column, in rem rather than ch: `ch` is relative to the element's
   own font size, so a heading and its paragraph given the same ch value do not line up. The rule
   under a heading has to stop where the prose under it does, or it reads as a page divider rather
   than as this section's heading. */
.cp-section{--cp-measure:46rem}
/* No hairline underline any more: the legacy site ruled every heading, and it read as a document.
   Scale and weight carry the hierarchy now, the way an editorial page does it. */
.cp-section-title{font-family:var(--nk-font-display);font-weight:800;color:var(--nk-ink);
  font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.15;letter-spacing:-.02em;max-width:var(--cp-measure)}
.cp-section-intro{margin-top:1rem;color:var(--nk-ink-soft);font-size:var(--nk-text-lg);max-width:var(--cp-measure)}
.cp-section .nk-prose{margin-top:1.25rem;max-width:var(--cp-measure)}

/* ==========================================================================
   3 · IMAGE CARD ROW
   ========================================================================== */

/* The track minimum is the editor's share of the row OR a readable floor, whichever is larger.
   The floor is what makes the row responsive: without it the share is a percentage, a percentage
   shrinks with the container, and auto-fit then keeps all N columns at every width — which is how
   a phone got three 100px-wide cards with one word per line. With it, a card that cannot have
   --cp-card-min of width wraps instead, so three on a laptop becomes two on a tablet and one on a
   phone with no media query per column count. */
.cp-cards{--cp-cards:3;--cp-card-min:15rem;display:grid;gap:clamp(1rem,2.5vw,1.75rem);margin-top:1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,max(var(--cp-card-min),calc((100% - (var(--cp-cards) - 1) * 1.75rem) / var(--cp-cards)))),1fr))}
/* Borderless and rounder than the legacy card: the picture carries the card, a soft shadow lifts
   it off the page, and the hairline box that framed everything on the old site is gone. */
.cp-card{position:relative;display:flex;flex-direction:column;background:var(--nk-surface);
  border-radius:var(--nk-radius-xl);overflow:hidden;box-shadow:var(--nk-shadow-sm);
  transition:transform var(--nk-dur) var(--nk-ease),box-shadow var(--nk-dur) var(--nk-ease)}
.cp-card:has(.cp-card-link):hover{transform:translateY(-6px);box-shadow:var(--nk-shadow-lg)}
.cp-card-media{aspect-ratio:4/3;overflow:hidden;background:var(--nk-surface-2)}
.cp-card-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--nk-ease)}
.cp-card:hover .cp-card-media img{transform:scale(1.04)}
.cp-card-body{padding:1.3rem 1.4rem 1.5rem}
.cp-card-title{font-family:var(--nk-font-display);font-weight:700;color:var(--nk-ink);font-size:var(--nk-text-xl);line-height:1.25;letter-spacing:-.01em}
.cp-card-text{margin-top:.55rem;color:var(--nk-ink-soft);font-size:var(--nk-text-sm);line-height:1.65}
/* One anchor, stretched over the card, so the picture and the title are a single target. */
.cp-card-link{color:inherit;text-decoration:none}
.cp-card-link::after{content:"";position:absolute;inset:0}
.cp-card-link:hover{color:var(--nk-primary-700)}

/* The compact treatment: the small tile strip the legacy equipment row used.
   Anything four-up or denser gets it whether or not the editor asked, because a
   full-height photo card at that width is a stamp. */
/* Compact tiles keep a much lower floor: they are icon stamps, and two or three abreast is the
   right shape on a phone where a full-width tile each would be a poster per icon. */
.cp-cards.is-compact{--cp-card-min:7.5rem}
.cp-cards.is-compact .cp-card{border:none;background:none;text-align:center}
.cp-cards.is-compact .cp-card:hover{transform:none;box-shadow:none}
.cp-cards.is-compact .cp-card-media{aspect-ratio:1;border-radius:var(--nk-radius-lg);
  border:1px solid var(--nk-line);background:var(--nk-surface)}
.cp-cards.is-compact .cp-card-media img{object-fit:contain;padding:12%}
.cp-cards.is-compact .cp-card-body{padding:.9rem .25rem 0}
.cp-cards.is-compact .cp-card-title{font-size:var(--nk-text-base)}

@media(prefers-reduced-motion:reduce){
  .cp-card,.cp-card-media img{transition:none}
  .cp-card:has(.cp-card-link):hover{transform:none}
  .cp-card:hover .cp-card-media img{transform:none}
}

/* ==========================================================================
   4 · TIMELINE
   --------------------------------------------------------------------------
   A single vertical rail with a marker per entry, rather than the legacy
   site's alternating left/right layout. Alternating reads well at 1400px and
   badly at every width below it, and it forces two copies of the same content
   into the markup (the legacy page ships a desktop timeline and a mobile one,
   with the text duplicated and already drifting between them). One rail is one
   copy, and it reflows to a phone without a second version.
   ========================================================================== */

.cp-timeline{list-style:none;margin-top:2rem;padding:0;position:relative}
.cp-timeline::before{content:"";position:absolute;left:.55rem;top:.6rem;bottom:.6rem;width:2px;
  background:linear-gradient(180deg,var(--nk-primary),color-mix(in srgb,var(--nk-primary) 15%,transparent))}
.cp-timeline-item{position:relative;padding-left:2.4rem;padding-bottom:2.2rem}
.cp-timeline-item:last-child{padding-bottom:0}
.cp-timeline-marker{position:absolute;left:0;top:.45rem;width:1.15rem;height:1.15rem;border-radius:50%;
  background:var(--nk-surface);border:3px solid var(--nk-primary);box-shadow:0 0 0 4px var(--nk-primary-50)}
.cp-timeline-year{font-family:var(--nk-font-display);font-weight:800;font-size:var(--nk-text-2xl);
  line-height:1;color:var(--nk-primary-700);letter-spacing:-.02em}
.cp-timeline-title{margin-top:.5rem;font-family:var(--nk-font-display);font-weight:700;
  font-size:var(--nk-text-lg);line-height:1.35;color:var(--nk-ink)}
.cp-timeline-text{margin-top:.6rem;color:var(--nk-ink-soft);line-height:1.7;max-width:var(--cp-measure)}

/* ==========================================================================
   5 · CALL TO ACTION
   ========================================================================== */

/* nk-chart-bg supplies the chart texture and nothing else — it paints a ::before overlay, not a
   colour — so the dark ground the white type needs has to be set here. */
.cp-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.5rem,4vw,2.75rem);border-radius:var(--nk-radius-lg);
  background:var(--nk-grad-deep,var(--nk-abyss));color:#fff;position:relative;overflow:hidden}
.cp-cta-heading{font-family:var(--nk-font-display);font-weight:800;color:#fff;
  font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.2;max-width:24ch}
.cp-cta-text{margin-top:.6rem;color:rgba(217,232,244,.82);max-width:52ch;line-height:1.65}
.cp-cta-copy{position:relative;z-index:1}
.cp-cta .nk-btn{position:relative;z-index:1;flex-shrink:0}

/* ==========================================================================
   6 · CONTACT — the details panel and the form
   ========================================================================== */

.cp-contact-panel{margin-top:1.5rem;padding:clamp(1.25rem,3vw,2rem);background:var(--nk-surface);
  border:1px solid var(--nk-line);border-radius:var(--nk-radius-lg)}

.cp-form{margin-top:1.75rem;max-width:44rem}
.cp-form-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.cp-form-wide{grid-column:1/-1}
.cp-form-optional{font-weight:400;color:var(--nk-muted)}
.cp-form textarea.nk-input{min-height:9rem;resize:vertical;line-height:1.6;padding-block:.7rem}
/* 16px floor on the widths phones occupy: below it iOS Safari zooms the page the moment a field
   takes focus, and the form the visitor was filling slides out from under the keyboard. */
@media(max-width:820px){.cp-form .nk-input{font-size:max(16px,var(--nk-text-base))}}
.cp-form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;margin-top:1.5rem}

/* Off-screen rather than display:none. A bot that skips hidden fields still finds this one, which is
   the entire point; the label and tabindex keep it away from anybody using a keyboard or a reader. */
.cp-form-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.cp-form-note{display:flex;align-items:flex-start;gap:.7rem;margin-top:1.5rem;padding:.9rem 1.1rem;
  border-radius:var(--nk-radius);font-size:var(--nk-text-sm);line-height:1.6;border:1px solid}
.cp-form-note.is-sent{background:color-mix(in srgb,var(--nk-success,#12a150) 10%,var(--nk-surface));
  border-color:color-mix(in srgb,var(--nk-success,#12a150) 35%,transparent);color:var(--nk-ink)}
.cp-form-note.is-sent .nk-icon{color:var(--nk-success,#12a150)}
.cp-form-note.is-error{background:color-mix(in srgb,var(--nk-danger,#d92d20) 8%,var(--nk-surface));
  border-color:color-mix(in srgb,var(--nk-danger,#d92d20) 35%,transparent);color:var(--nk-ink)}
.cp-form-note.is-error .nk-icon{color:var(--nk-danger,#d92d20)}
.cp-form-note a{color:var(--nk-primary-700);text-decoration:underline}

/* ==========================================================================
   7 · BANDS
   --------------------------------------------------------------------------
   The section types the landing page is built from. They are all in this file
   rather than a landing-only one because they are Block List blocks: an editor
   can put any of them on any Content Page, and a stylesheet loaded only by the
   home page would leave that page unstyled.

   A band paints the full width of the window; its content sits in the same
   .nk-container everything else does. Nothing here uses a 100vw breakout — the
   sections partial gives each block its own container precisely so this can be
   plain CSS with no horizontal-scrollbar tax.
   ========================================================================== */

.cp-band.is-tinted{background:var(--nk-surface-2)}
.cp-band-heading{font-family:var(--nk-font-display);font-weight:800;color:var(--nk-ink);
  font-size:clamp(1.8rem,3.8vw,2.9rem);line-height:1.1;letter-spacing:-.025em;margin-top:.6rem}
.cp-band-lead{margin-top:.9rem;color:var(--nk-ink-soft);font-size:var(--nk-text-lg);line-height:1.65;max-width:60ch}
/* A centred head over a grid, which is how the legacy site introduced its rows. */
.cp-band-head{text-align:center;max-width:56rem;margin-inline:auto;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.cp-band-head .cp-band-lead{margin-inline:auto}
.cp-band-head .nk-eyebrow{justify-content:center}
.cp-band-foot{margin-top:clamp(1.75rem,3.5vw,2.5rem);text-align:center}

/* A standfirst beside a grid: copy on the left, the grid on the right, stacking
   under 900px where two columns leave neither enough room. */
.cp-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.cp-split-faq{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
@media(max-width:899px){.cp-split,.cp-split-faq{grid-template-columns:1fr}}

/* ---- Feature tiles ------------------------------------------------------ */
/* 12rem, not 15: this grid usually sits in the 7/12 column of a split, where 15rem fits only two
   and leaves a three-tile row as two and an orphan. */
.cp-tiles{display:grid;gap:clamp(.9rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.cp-tile{background:var(--nk-surface);border:1px solid var(--nk-line);border-radius:var(--nk-radius-lg);
  padding:1.4rem 1.3rem;transition:transform var(--nk-dur) var(--nk-ease),box-shadow var(--nk-dur) var(--nk-ease)}
.cp-tile:hover{transform:translateY(-3px);box-shadow:var(--nk-shadow-lg)}
.cp-tile-ico{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;
  border-radius:var(--nk-radius-sm);background:var(--nk-primary-50);color:var(--nk-primary-600);
  font-size:1.5rem;margin-bottom:.9rem}
.cp-tile-ico img{width:1.8rem;height:1.8rem;object-fit:contain}
.cp-tile-title{font-family:var(--nk-font-display);font-weight:700;color:var(--nk-ink);font-size:var(--nk-text-lg)}
.cp-tile-text{margin-top:.5rem;color:var(--nk-ink-soft);font-size:var(--nk-text-sm);line-height:1.65}

/* ---- Feature strip: one line of small claims ---------------------------- */
.cp-strip{display:grid;gap:clamp(.75rem,2vw,1.25rem);margin-top:1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.cp-strip-item{display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem;background:var(--nk-surface);
  border:1px solid var(--nk-line);border-radius:var(--nk-radius);color:var(--nk-ink);
  font-weight:600;font-size:var(--nk-text-sm);line-height:1.4}
img.cp-strip-ico{width:2rem;height:2rem;object-fit:contain;flex-shrink:0}
span.cp-strip-ico{font-size:1.6rem;color:var(--nk-primary-600);flex-shrink:0}

/* ---- Stat band: the numbers are the picture ----------------------------- */
/* The framework's .nk-statband sizes its numerals for an admin dashboard. On a marketing page the
   figures ARE the section — 15,00,000 travellers deserves display scale. Same slab, same palette. */
.cp-band .nk-statband{gap:2rem var(--nk-gutter);border-radius:var(--nk-radius-xl)}
.cp-band .nk-statband-value{font-size:clamp(2.1rem,4.5vw,3.4rem);line-height:1.05}
.cp-band .nk-statband-label{font-size:var(--nk-text-xs);letter-spacing:.14em;margin-top:.35rem}

/* ---- Trust band --------------------------------------------------------- */
.cp-trust-heading{font-family:var(--nk-font-display);font-weight:800;color:var(--nk-ink);text-align:center;
  font-size:clamp(1.15rem,2.4vw,1.7rem);line-height:1.35;max-width:56rem;margin-inline:auto;
  margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.cp-trust-row{display:grid;gap:clamp(.9rem,2vw,1.4rem);align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.cp-trust-card{display:flex;flex-direction:column;gap:.6rem;background:var(--nk-surface);
  border:1px solid var(--nk-line);border-radius:var(--nk-radius-lg);padding:1.25rem;text-align:center;
  align-items:center;justify-content:center}
.cp-trust-label{font-family:var(--nk-font-display);font-weight:800;font-size:var(--nk-text-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--nk-muted)}
.cp-trust-source{height:1.4rem;width:auto;object-fit:contain}
.cp-trust-rating{color:var(--nk-ink-soft);font-size:var(--nk-text-sm)}
.cp-trust-rating strong{color:var(--nk-ink);font-size:var(--nk-text-lg);font-family:var(--nk-font-display)}
.cp-trust-quote{color:var(--nk-ink-soft);font-size:var(--nk-text-sm);line-height:1.6;text-align:left}
/* No margin-top:auto here. The grid stretches every card to the tallest one, and pushing the logos
   to the bottom of a short card leaves a hole where the card's own content should be centred. */
.cp-trust-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem}
.cp-trust-logos img{height:2.6rem;width:auto;max-width:9rem;object-fit:contain}
.cp-trust-author{display:flex;align-items:center;gap:.6rem;margin-top:auto;text-align:left;width:100%}
.cp-trust-author img{width:2.6rem;height:2.6rem;border-radius:50%;object-fit:cover;flex-shrink:0}
.cp-trust-author strong{display:block;font-size:var(--nk-text-sm);color:var(--nk-ink)}
.cp-trust-author small{display:block;font-size:var(--nk-text-xs);color:var(--nk-muted)}

/* Stars. The filled run and the empty remainder are one string so they cannot
   drift apart; the rating itself is announced as text beside them. */
.cp-stars{color:#f5a524;letter-spacing:.06em;font-size:1.05rem;line-height:1}
.cp-stars-off{color:var(--nk-line-strong)}

/* ---- Route strip -------------------------------------------------------- */
.cp-routes{display:grid;gap:clamp(1rem,2.5vw,1.75rem);margin-top:clamp(1.5rem,3vw,2.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.cp-route{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:14rem;
  padding:1.5rem;border-radius:var(--nk-radius-lg);overflow:hidden;color:#fff;text-decoration:none;
  background:var(--nk-grad-deep);border:1px solid var(--nk-deck-line);
  transition:transform var(--nk-dur) var(--nk-ease-out),box-shadow var(--nk-dur) var(--nk-ease-out)}
.cp-route:hover{transform:translateY(-5px);box-shadow:var(--nk-shadow-lg)}
.cp-route-fare{position:absolute;top:1.1rem;right:1.1rem}
.cp-route .nk-route{margin-bottom:.35rem}
.cp-route .nk-route-time{font-size:var(--nk-text-lg)}
.cp-route-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;
  color:var(--nk-deck-muted);font-size:var(--nk-text-sm)}
.cp-route-go{display:inline-flex;align-items:center;gap:.3rem;color:var(--nk-reef);font-weight:600;margin-left:auto}
.cp-route-go .nk-icon{font-size:1rem;transition:transform var(--nk-dur) var(--nk-ease)}
.cp-route:hover .cp-route-go .nk-icon{transform:translateX(3px)}

/* ---- Destination cards: copy written over a photograph ------------------ */
/* Same floor trick as .cp-cards, higher floor: these carry copy over a photograph, and below about
   16rem the bullet list inside breaks a word per line. */
.cp-destinations{--cp-cards:3;--cp-card-min:16rem;display:grid;gap:clamp(1rem,2.5vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,max(var(--cp-card-min),calc((100% - (var(--cp-cards) - 1) * 1.75rem) / var(--cp-cards)))),1fr))}
.cp-dest{position:relative;display:flex;align-items:flex-end;min-height:26rem;overflow:hidden;
  border-radius:var(--nk-radius-xl);color:#fff;isolation:isolate;box-shadow:var(--nk-shadow-sm);
  transition:transform var(--nk-dur) var(--nk-ease-out),box-shadow var(--nk-dur) var(--nk-ease-out)}
.cp-dest:hover{transform:translateY(-5px);box-shadow:var(--nk-shadow-lg)}
.cp-dest-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .6s var(--nk-ease)}
.cp-dest:hover .cp-dest-bg{transform:scale(1.05)}
/* The veil is what makes the copy readable over whatever photograph an editor
   picks, rather than trusting the picture to be dark in the right corner. The
   copy block starts around the card's midpoint, so the dense part of the
   gradient has to reach that far up — a bottom-weighted veil leaves the title
   sitting on bare sky. */
.cp-dest-veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(4,18,31,.94) 0%,rgba(4,18,31,.86) 48%,rgba(4,18,31,.5) 74%,rgba(4,18,31,.12) 100%)}
.cp-dest-body{padding:1.5rem}
/* The card's Book Now is pressed with a thumb far more often than a pointer. */
.cp-dest .nk-btn{min-height:2.75rem}
.cp-dest-title{font-family:var(--nk-font-display);font-weight:800;font-size:var(--nk-text-xl);line-height:1.2}
.cp-dest-points{margin:.85rem 0 1.1rem;padding-left:1.1rem;display:grid;gap:.35rem;
  color:rgba(233,242,250,.92);font-size:var(--nk-text-sm);line-height:1.5}

/* ---- Reviews ------------------------------------------------------------ */
.cp-reviews{display:grid;gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.cp-review{display:flex;flex-direction:column;gap:.9rem;padding:1.4rem;background:var(--nk-surface);
  border:1px solid var(--nk-line);border-radius:var(--nk-radius-lg);box-shadow:var(--nk-shadow-sm)}
.cp-review-head{display:flex;align-items:center;gap:.75rem}
.cp-review-head img{width:2.9rem;height:2.9rem;border-radius:50%;object-fit:cover;flex-shrink:0}
.cp-review-name{display:block;font-family:var(--nk-font-display);font-weight:700;color:var(--nk-ink)}
/* The quote mark is drawn, not typed: an editor pasting a review should not have
   to remember to include one, and a decorative glyph is not content. */
.cp-review-quote{position:relative;color:var(--nk-ink-soft);font-size:var(--nk-text-sm);line-height:1.7;flex:1}
.cp-review-quote::before{content:"\201C";position:absolute;top:-1.9rem;left:-.6rem;font-size:3.5rem;
  line-height:1;color:color-mix(in srgb,var(--nk-primary) 16%,transparent);
  font-family:var(--nk-font-display);z-index:0}
.cp-review-quote>*{position:relative}
.cp-review-source{font-size:var(--nk-text-xs);color:var(--nk-muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}

/* ---- Payment band ------------------------------------------------------- */
.cp-pay-marks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.5rem,4vw,3rem);margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.cp-pay-marks img{height:clamp(2rem,3.5vw,3rem);width:auto;max-width:9rem;object-fit:contain}
.cp-pay-promises{display:grid;gap:.5rem;padding:clamp(1rem,2.5vw,1.5rem);border-radius:var(--nk-radius-lg);
  color:#fff;background:var(--nk-grad-deep);box-shadow:var(--nk-shadow-lg);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.cp-pay-promise{display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.6rem;
  font-weight:600;font-size:var(--nk-text-sm);text-align:center}
.cp-pay-promise img{width:1.4rem;height:1.4rem;object-fit:contain}
.cp-pay-promise .nk-icon{color:var(--nk-reef)}

/* ---- Pinned articles ---------------------------------------------------- */
.cp-posts{display:grid;gap:clamp(1rem,2.5vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.cp-post{display:flex;flex-direction:column;background:var(--nk-surface);border:1px solid var(--nk-line);
  border-radius:var(--nk-radius-lg);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform var(--nk-dur) var(--nk-ease),box-shadow var(--nk-dur) var(--nk-ease)}
.cp-post:hover{transform:translateY(-3px);box-shadow:var(--nk-shadow-lg)}
.cp-post-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--nk-surface-2)}
.cp-post-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--nk-ease)}
.cp-post:hover .cp-post-media img{transform:scale(1.04)}
.cp-post-body{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 1.2rem 1.25rem;flex:1}
.cp-post-title{font-family:var(--nk-font-display);font-weight:700;color:var(--nk-ink);
  font-size:var(--nk-text-lg);line-height:1.3}
.cp-post-text{color:var(--nk-ink-soft);font-size:var(--nk-text-sm);line-height:1.6}
.cp-post-go{margin-top:auto;align-self:flex-end;color:var(--nk-primary-600)}
.cp-post-go .nk-icon{transition:transform var(--nk-dur) var(--nk-ease)}
.cp-post:hover .cp-post-go .nk-icon{transform:translateX(3px)}

/* ==========================================================================
   8 · PARALLAX BAND
   --------------------------------------------------------------------------
   background-attachment:fixed is not used: iOS has never supported it and
   Android drops it under a compositing threshold, so it silently degrades to a
   static background on most of the traffic this site gets. An <img> translated
   on the compositor is the same effect, works everywhere, and is what
   wwwroot/js/nautika.parallax.js drives.

   The layer is deliberately taller than its frame (--cp-parallax-overhang), so
   there is picture to travel over and no bare edge appears at either end of the
   scroll. With no script, or with reduced motion asked for, the layer simply
   sits still and the band is an ordinary cover photograph.
   ========================================================================== */

.cp-parallax{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  display:flex;align-items:center;background:var(--nk-grad-deep);
  --cp-parallax-overhang:18%}
/* The page's ground swells into the photograph at both edges, so a parallax band reads as water
   the page passes over rather than a rectangle dropped into it. Same mask trick as the hero. */
.cp-parallax::before,.cp-parallax::after{content:"";position:absolute;left:0;right:0;z-index:2;
  height:clamp(1.6rem,3.5vw,2.75rem);pointer-events:none;background:var(--nk-bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C240,96 480,16 720,44 C960,72 1200,24 1440,56 L1440,96 L0,96 Z' fill='%23000'/%3E%3C/svg%3E") center top/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C240,96 480,16 720,44 C960,72 1200,24 1440,56 L1440,96 L0,96 Z' fill='%23000'/%3E%3C/svg%3E") center top/100% 100% no-repeat}
.cp-parallax::before{top:-1px;transform:scaleY(-1)}
.cp-parallax::after{bottom:-1px}
/* A band opening the page sits right under the hero, which has a swell line of its own — two waves
   a few pixels apart read as a printing error, so the band keeps only its bottom one there. */
.cp-sections > .cp-parallax:first-child::before{display:none}
.cp-parallax.is-short{min-height:clamp(12rem,26vw,18rem)}
.cp-parallax.is-medium{min-height:clamp(17rem,38vw,26rem)}
.cp-parallax.is-tall{min-height:clamp(22rem,52vw,34rem)}
/* A band with no copy is a divider; it needs no minimum beyond a strip. */
.cp-parallax.is-plain.is-short{min-height:clamp(9rem,18vw,13rem)}
.cp-parallax-media{position:absolute;left:0;right:0;top:calc(var(--cp-parallax-overhang) / -2);
  height:calc(100% + var(--cp-parallax-overhang));z-index:-2;will-change:transform}
.cp-parallax-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Left-weighted, because the copy is: a veil dense enough across the whole band to carry text
   anywhere on it hides the photograph the band exists to show. A band with no copy at all is
   `.is-plain` and gets no veil rendered, so the picture is untouched. */
.cp-parallax-veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(112deg,rgba(4,18,31,.86) 0%,rgba(6,38,66,.6) 44%,rgba(4,18,31,.2) 100%)}
/* Above the wave edges (z-index 2), or a short band's copy could sit under the swell line. */
.cp-parallax-inner{position:relative;z-index:3;padding-block:clamp(3rem,7vw,5.5rem);max-width:var(--nk-container)}
.cp-parallax .nk-eyebrow{color:var(--nk-reef)}
.cp-parallax .nk-eyebrow::before{background:var(--nk-reef)}
.cp-parallax-heading{font-family:var(--nk-font-display);font-weight:800;color:#fff;
  font-size:clamp(1.7rem,4vw,3rem);line-height:1.15;margin-top:.7rem;max-width:20ch}
.cp-parallax-text{margin-top:1rem;color:rgba(217,232,244,.88);font-size:var(--nk-text-lg);
  line-height:1.65;max-width:52ch}

@media(prefers-reduced-motion:reduce){
  .cp-parallax-media{transform:none !important;transition:none}
}

/* ==========================================================================
   9 · FERRY SCHEDULE
   --------------------------------------------------------------------------
   The timetable band. The tab strip and the panels are the framework's own
   (.nk-tabs / nautika.js initTabs); everything here is the table inside them.

   The table scrolls in its own box rather than letting the page scroll
   sideways — five columns of times do not fit a phone, and a horizontally
   scrolling *page* is the one thing a layout must never do.
   ========================================================================== */

.cp-schedule-day{margin-top:1rem;color:var(--nk-muted);font-size:var(--nk-text-sm);line-height:1.6;max-width:44ch}
.cp-schedule-day strong{color:var(--nk-ink)}
.cp-schedule .nk-tabs-nav{overflow-x:auto;scrollbar-width:none}
.cp-schedule .nk-tabs-nav::-webkit-scrollbar{display:none}
.cp-schedule .nk-tab{white-space:nowrap;font-size:var(--nk-text-sm)}

.cp-schedule-scroll{overflow-x:auto}
.cp-schedule-table{width:100%;border-collapse:collapse;font-size:var(--nk-text-sm)}
.cp-schedule-table th{text-align:left;padding:.5rem .75rem .7rem;color:var(--nk-muted);
  font-family:var(--nk-font-display);font-weight:700;font-size:var(--nk-text-xs);
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  border-bottom:1px solid var(--nk-line)}
.cp-schedule-table td{padding:.75rem;border-bottom:1px solid var(--nk-line);color:var(--nk-ink-soft);
  white-space:nowrap}
.cp-schedule-table tbody tr:last-child td{border-bottom:none}
.cp-schedule-table tbody tr:hover td{background:var(--nk-surface-2)}
.cp-schedule-vessel{display:block;font-weight:700;color:var(--nk-ink);white-space:nowrap}
/* A sailing that calls somewhere on the way — one vessel, one seat, and the reason this row takes
   longer than the direct one above it. */
.cp-schedule-via{display:block;font-size:var(--nk-text-xs);color:var(--nk-muted)}

.cp-schedule-empty{display:flex;align-items:center;gap:.6rem;padding:1.5rem .25rem;
  color:var(--nk-muted);font-size:var(--nk-text-sm)}
.cp-schedule-empty .nk-icon{color:var(--nk-line-strong)}
.cp-schedule-more{display:inline-flex;align-items:center;gap:.35rem;margin-top:.7rem;
  padding-block:.5rem; /* a finger-sized target, not a text-sized one */
  font-weight:700;font-size:var(--nk-text-sm);color:var(--nk-primary-700);text-decoration:none}
.cp-schedule-more:hover{text-decoration:underline}
.cp-schedule-more .nk-icon{font-size:1rem;transition:transform var(--nk-dur) var(--nk-ease)}
.cp-schedule-more:hover .nk-icon{transform:translateX(3px)}

/* ==========================================================================
   10 · CARD RAILS ON PHONES
   --------------------------------------------------------------------------
   Below 768px every multi-card row becomes a horizontally snapping rail
   instead of a stack. A phone page that stacked four destination cards, five
   reviews and three articles was ten screens of thumb travel; a rail shows
   one card and the edge of the next — the sliver is the affordance — and the
   row costs one screen whatever it holds.

   The rail bleeds to the viewport edge (the negative inline margins undo the
   container's gutter) and snaps to the gutter line, so cards land exactly
   where the page's other content begins. Scrollbars are hidden because the
   sliver already says "there is more"; scrolling itself is native.
   ========================================================================== */

@media(max-width:767px){
  .cp-cards:not(.is-compact),.cp-destinations,.cp-reviews,.cp-posts,.cp-routes,.cp-trust-row{
    display:grid;grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:min(80vw,20rem);gap:.9rem;
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--nk-gutter) * -1);
    padding-inline:var(--nk-gutter);padding-block:.25rem .9rem;
    scroll-padding-inline:var(--nk-gutter);
    scrollbar-width:none}
  .cp-cards:not(.is-compact)::-webkit-scrollbar,.cp-destinations::-webkit-scrollbar,
  .cp-reviews::-webkit-scrollbar,.cp-posts::-webkit-scrollbar,
  .cp-routes::-webkit-scrollbar,.cp-trust-row::-webkit-scrollbar{display:none}
  .cp-cards:not(.is-compact) > *,.cp-destinations > *,.cp-reviews > *,
  .cp-posts > *,.cp-routes > *,.cp-trust-row > *{scroll-snap-align:start}
  /* A destination card in a rail keeps its poster height but not the desktop's. */
  .cp-destinations > .cp-dest{min-height:22rem}
  /* Trust cards hold logos and quotes; a little narrower reads better in a rail. */
  .cp-trust-row{grid-auto-columns:min(74vw,17rem)}
}