/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 24 2026 | 01:37:13 */
/* ==========================================================================
   CAMPKING HOME · Flatsome / UX Builder build · stylesheet · v3
   --------------------------------------------------------------------------
   Pairs with campking-home.ux.txt (the page), campking-home-footer-script.txt
   (the page script) and map/campking-map.js (the experience-centre map).

   Scope
   Every rule starts from .ck, the class on each Campking section, so the
   site's header, footer and every other page are untouched.

   Source of truth
   Sizes, spacing, colours and type come from campking-home-v3-rounded-
   phone-v2.html. UX Builder's own padding, margin and colour fields are left
   empty on purpose: change a value here, not in the builder, and it stays
   the same everywhere it is used.

   Desktop and phone copies
   Every section except the ticker exists twice. The desktop copy
   (.ck--desk, "Hide for small") covers tablets and desktops from 550px; the
   phone copy (.ck--phone, "Show for small only") covers 549px and below.
   Each copy is styled for its own screens only, so a phone rule can never
   leak into a tablet and the other way round.

   Breakpoints
     549px   the only switch between copies: Flatsome's own "small" line.
             Phone copies show at 549px and below, desktop copies from 550px.
     Inside a copy, every layout switches exactly where the current page
     does (1000, 900, 600px and so on), so alignment and spacing match it
     value for value. Each section's header comment lists its own.

   Writing rules
   · No child combinator anywhere in this file (not even in comments): if the
     sheet is pasted into Flatsome's Custom CSS box, that box stores the
     character as an HTML entity and the rule is dropped.
   · !important only where Flatsome writes inline styles or its own
     !important rules; each one says so.

   Contents
      1. Tokens
      2. Grounds · white, snow, dark
      3. Base inside .ck
      4. Flatsome structure · section, row, column
      5. Shared pieces · heading, eyebrow, title, sub, links, arrows
      6. Hero
      7. Ticker
      8. About Campking
      9. Signature structures
     10. Card carousels · Architectural pods, Amenities (+ the phone hero strip)
     10b. Card rails · the reference page's snap track (desktop copies)
     11. Our process
     12. Before / After
     13. Why Campking (desktop copy only)
     14. Solutions by project type
     15. Project planner
     16. Moments
     17. Extended services
     18. Experience centre
     19. Recognition
     20. FAQ
      ·· Reduced motion (last)

   Page order (the builder's) differs from this sheet's order in two places:
   Amenities (10) sits after the planner (15), and Moments (16) after it.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
.ck {
  /* type */
  --ck-f-sans:    'Jost', system-ui, sans-serif;           /* headings, body, labels */
  --ck-f-accent:  'Bodoni Moda', Georgia, serif;           /* italic accent, 24px and up */
  --ck-t-body:    16px;
  --ck-lh-body:   1.65;
  --ck-t-label:   12px;                                    /* eyebrows, tags, buttons */
  --ck-ls-label:  .22em;
  --ck-t-sec:     clamp(30px, 3.9vw, 56px);                /* every section title */
  --ck-lh-sec:    1.05;
  --ck-ls-sec:    -.022em;
  --ck-t-sub:     clamp(16px, 1.45vw, 18px);               /* every section sub / lead */

  /* space */
  --ck-gut:        clamp(20px, 5vw, 72px);                 /* side padding, desktop copies */
  --ck-gut-phone:  10px;                                   /* side padding, phone copies */
  --ck-maxw:       1600px;                                 /* content container */
  --ck-sec-y:      clamp(64px, 8vw, 120px);                /* section top + bottom */
  --ck-sec-y-s:    clamp(32px, 3.2vw, 48px);               /* strips: recognition */
  --ck-gap-eyebrow: clamp(14px, 1.6vw, 20px);              /* eyebrow → title */
  --ck-gap-sub:     clamp(14px, 1.5vw, 20px);              /* title → sub */
  --ck-gap-head:    clamp(34px, 4.4vw, 64px);              /* section head → content */

  /* shape */
  --ck-r:     8px;                                         /* photos, cards, filled buttons */
  --ck-r-nav: 50%;                                         /* round arrow controls */

  /* motion */
  --ck-ease:  cubic-bezier(.2, .75, .2, 1);                /* settles: hovers, reveals */
  --ck-slide: cubic-bezier(.62, .02, .24, 1);              /* travels: slides changing */

  /* palette */
  --ck-white:  #FFFFFF;
  --ck-snow:   #F5F6F7;
  --ck-ink:    #141A1F;
  --ck-bark:   #12100D;
  --ck-bone:   #F2EFEA;
  --ck-gold:   #B8841C;   /* the one accent, on light and dark grounds alike */
  --ck-beige:  #C9B49B;   /* logo ground; the ticker's type */
  --ck-cream:  #F6EFE3;
}
/* the page gutter drops to 10px at 599px, desktop copies included */
@media (max-width: 599px) {
  .ck { --ck-gut: var(--ck-gut-phone); }
}


/* --------------------------------------------------------------------------
   2. GROUNDS
   Each section carries one ground class. It sets the background and the
   role colours every component reads, so a component never needs to know
   which ground it sits on.
   -------------------------------------------------------------------------- */
.ck--white,
.ck--snow {
  --ck-fg:        var(--ck-ink);
  --ck-fg-70:     rgba(20, 26, 31, .68);   /* subs, answers */
  --ck-fg-45:     rgba(20, 26, 31, .62);   /* labels, meta */
  --ck-line:      rgba(20, 26, 31, .13);
  --ck-line-soft: rgba(20, 26, 31, .06);
  --ck-lift:      rgba(20, 26, 31, .035);  /* a panel one step off the ground */
  --ck-dim:       rgba(20, 26, 31, .21);   /* unrevealed statement words */
}
.ck--white { --ck-bg: var(--ck-white); }
.ck--snow  { --ck-bg: var(--ck-snow); }

.ck--dark {
  --ck-bg:        var(--ck-bark);
  --ck-fg:        var(--ck-bone);
  --ck-fg-70:     rgba(242, 239, 234, .62);
  --ck-fg-45:     rgba(242, 239, 234, .55);
  --ck-line:      rgba(242, 239, 234, .15);
  --ck-line-soft: rgba(242, 239, 234, .11);
  --ck-lift:      rgba(242, 239, 234, .045);
  --ck-dim:       rgba(242, 239, 234, .16);
}


/* --------------------------------------------------------------------------
   3. BASE INSIDE .ck
   Flatsome styles headings, paragraphs, lists, links and buttons for the
   whole site. Inside a Campking section those defaults are cleared so the
   design's own values apply.
   -------------------------------------------------------------------------- */
.ck {
  position: relative;
  background-color: var(--ck-bg);
  color: var(--ck-fg);
  font-family: var(--ck-f-sans);
  font-size: var(--ck-t-body);
  font-weight: 400;
  line-height: var(--ck-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ck *,
.ck *::before,
.ck *::after { box-sizing: border-box; }

.ck h1, .ck h2, .ck h3, .ck h4,
.ck p, .ck ul, .ck ol, .ck li,
.ck dl, .ck dt, .ck dd, .ck figure {
  margin: 0;
  padding: 0;
}
.ck h1, .ck h2, .ck h3, .ck h4 {
  width: auto;
  font-family: var(--ck-f-sans);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: inherit;
  text-transform: none;
}
.ck ul, .ck ol { list-style: none; }
/* Flatsome sets dl dd, dl dt { display: inline-block }, which runs a
   figure's value and label onto one line */
.ck dt, .ck dd { display: block; }
.ck dt { font-weight: inherit; }
.ck b, .ck strong { font-weight: 500; }
.ck a { color: inherit; text-decoration: none; }
/* THE SITE'S OWN COLOURS. Flatsome wraps the page in a main element with class "dark",
   and the theme options print .dark p (grey #7A7A7A) and .dark a (#4E4E4E)
   after this sheet. "html .ck" outranks both, while every coloured rule
   below (two classes or more) still outranks this reset. */
html .ck :is(p, a, td, th, label) { color: inherit; }
html .ck a:hover { color: inherit; }    /* over .dark a:hover (white) */
/* Links inside image boxes: Flatsome makes them inline-block (.box a) */
.ck .box :where(a:not(.button)) { display: inline; }
.ck img, .ck svg, .ck canvas { display: block; max-width: 100%; }

/* WORDPRESS AUTO-FORMATTING. If the page's content goes through wpautop,
   WordPress adds line breaks (br) and empty paragraphs (p) inside the HTML elements. Neither is
   ever authored in this build, so both are hidden here and removed by the
   script (which also unwraps the paragraphs it puts round buttons and links). */
.ck br,
.ck p:not([class]):empty { display: none; }

/* the luxury accent: italic Bodoni, never below 24px */
.ck em {
  font-family: var(--ck-f-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

/* custom controls written in HTML elements (Flatsome's [button] keeps .button) */
.ck :where(button:not(.button):not(.flickity-button)) {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-shadow: none;
  color: inherit;
  cursor: pointer;
  position: static;        /* Flatsome sets button { position: relative } */
}

.ck :focus-visible {
  outline: 2px solid var(--ck-gold);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Flickity focuses the whole slider when its arrows or dots are used, which
   would frame the entire carousel; the controls inside keep their ring */
.ck .slider:focus,
.ck .slider:focus-visible,
.ck .flickity-enabled:focus,
.ck .flickity-enabled:focus-visible { outline: none; }

/* announced, not drawn */
.ck .ck-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* In-page link target, placed by the script at the top of whichever copy
   of a section is showing (a desktop copy and its phone copy cannot share
   an id). Flatsome already offsets anchors by the sticky header height. */
.ck .ck-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.ck) { scroll-behavior: smooth; }
}


/* --------------------------------------------------------------------------
   4. FLATSOME STRUCTURE
   Sections, rows and columns keep Flatsome's markup and builder controls;
   their spacing comes from here.
   · Every section's padding is 0px in the builder (Flatsome's default is
     30px). The design's padding goes on .section-content instead.
   · A row is the 1600px container with the design gutter; the phone copy
     uses the phone gutter.
   · Rows lay their columns out with CSS grid, so every gap is the design's
     exact value rather than Flatsome's 15px column padding. The column spans
     set in UX Builder mirror these layouts for the builder's own canvas.
   -------------------------------------------------------------------------- */
.ck.section {
  display: block;
  padding: 0;
}
.ck .section-content {
  width: 100%;
  padding-block: var(--ck-sec-y);
}

/* .ck.section outranks Flatsome's own row widths (1080px, 1050px collapsed) */
.ck.section .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: var(--ck-maxw);
  margin: 0 auto;
  padding-inline: var(--ck-gut);
}
/* Flatsome clears every row with .row::after { content: ""; display: table }.
   In a grid that invisible box takes a cell of its own: an extra row (and
   its gap) under every grid, and a centred title pushed off centre. */
.ck.section .row::before,
.ck.section .row::after { content: none; display: none; }
.ck--phone.section .row { padding-inline: var(--ck-gut-phone); }

/* edge-to-edge rows: ticker, photo walls, logo rail, map band */
.ck.section .row.ck-bleed {
  max-width: none;
  padding-inline: 0;
}

/* !important: Flatsome sizes columns with flex-basis and max-width
   percentages per breakpoint, and pads them 15px */
.ck.section .row .col {
  width: auto !important;
  min-width: 0;
  max-width: none !important;
  flex-basis: auto !important;
  margin: 0;
  padding: 0 !important;
}
.ck.section .row .col .col-inner {
  width: 100%;
  margin: 0;
}

/* Flatsome spaces stacked images 1em apart; each section sets its own */
.ck.section .col-inner .img { margin-bottom: 0; }

/* Pinned blocks (the statement) need every ancestor to let them stick. A
   wrapper clipped with overflow:hidden becomes a scroll container and stops
   them; overflow-x:clip trims the same edge without that. */
html:has(.ck-say, .ck-cz) #wrapper,
html:has(.ck-say, .ck-cz) #main {
  overflow: visible;
  overflow-x: clip;
}


/* --------------------------------------------------------------------------
   5. SHARED PIECES
   -------------------------------------------------------------------------- */

/* the Campking branch, as a mask so it takes any colour */
.ck {
  --ck-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M398 202 L555 628 L648 850 M293 305 L458 357 M582 220 L477 390 M252 591 L566 629 M746 404 L566 629' fill='none' stroke='%23000' stroke-width='102' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* the two chevrons every arrow control draws */
  --ck-chev-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ck-chev-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* EYEBROW · 12px tracked uppercase */
.ck .ck-eyebrow {
  font-family: var(--ck-f-sans);
  font-size: var(--ck-t-label);
  font-weight: 500;
  line-height: var(--ck-lh-body);
  letter-spacing: var(--ck-ls-label);
  text-transform: uppercase;
  color: var(--ck-gold);
}

/* TITLE · one spec for every section */
.ck .ck-title {
  margin-top: var(--ck-gap-eyebrow);
  font-family: var(--ck-f-sans);
  font-size: var(--ck-t-sec);
  font-weight: 400;
  line-height: var(--ck-lh-sec);
  letter-spacing: var(--ck-ls-sec);
  color: var(--ck-fg);
  text-wrap: balance;
}
.ck .ck-title em { color: var(--ck-gold); }
/* a title authored as two lines breaks on each .ck-ln */
.ck .ck-ln { display: block; }

/* SUB · the line under a title */
.ck .ck-sub {
  font-size: var(--ck-t-sub);
  line-height: var(--ck-lh-body);
  color: var(--ck-fg-70);
  text-wrap: balance;
}

/* HEADING · one HTML element in one full-width column.
   .ck-head holds .ck-head__main (eyebrow + title) and .ck-head__side (the
   sub, and a link under it where there is one). Stacked by default; title
   left and sub right on a shared baseline from 900px, as on the page.
   Left-aligned by design, set outright because theme styles can centre
   column content. */
.ck .ck-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: var(--ck-gap-head);
  text-align: left;
}
.ck .ck-head__side .ck-sub { margin-top: var(--ck-gap-sub); }
.ck .ck-head__side .ck-link { margin-top: clamp(16px, 1.6vw, 22px); }
@media (min-width: 900px) {
  .ck .ck-head {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    column-gap: clamp(32px, 4vw, 80px);
    align-items: end;
  }
  /* the sub block ends on the right edge; its lines stay left-aligned (the
     script then shrinks the block to its widest line) */
  /* .4em of the sub's own size, as on the page (a side that also holds a
     link is measured at 16px: .ck-head__side--link) */
  .ck .ck-head__side {
    justify-self: end;
    max-width: 100%;
    padding-bottom: .4em;
    font-size: var(--ck-t-sub);
  }
  .ck .ck-head__side--link { font-size: var(--ck-t-body); }
  .ck .ck-head__side .ck-sub { max-width: 44ch; margin-top: 0; }
}
/* phone copies open on the heading alone: the sub repeats what the section shows */
.ck--phone .ck-head__side { display: none; }

/* TEXT LINK · "Explore all services", "More info": tracked caps, gold rule */
.ck .ck-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 9px 0 8px;
  border-bottom: 2px solid var(--ck-gold);
  font-size: var(--ck-t-label);
  font-weight: 500;
  line-height: var(--ck-lh-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ck-fg);
}
.ck .ck-link::after {
  content: "\2197";
  font-size: 1.15em;
  line-height: 1;
  transition: transform .3s var(--ck-ease);
}
@media (hover: hover) {
  .ck .ck-link:hover::after { transform: translate(2px, -2px); }
}

/* FLATSOME [button] · reset to a bare label; each use adds its own look.
   ".ck .col-inner" outranks Flatsome's colour rules, printed after this
   sheet; ".ck .text-inner" does the same inside banners. */
.ck .col-inner .button[class*="ck-"],
.ck .text-inner .button[class*="ck-"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-shadow: none;
  font-family: var(--ck-f-sans);
  font-size: var(--ck-t-label);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
  opacity: 1;
}
.ck .col-inner .button[class*="ck-"] i,
.ck .text-inner .button[class*="ck-"] i { display: none; }

/* UNDERLINE + BRAND MARK · "Discover Campking": no box, a 2px gold rule
   carries the emphasis and the branch trails the label. The label itself is
   ink, so the accent is never small text. */
.ck .col-inner .button.ck-btn-mark {
  position: relative;
  gap: 14px;
  padding: 0 0 12px;
  line-height: var(--ck-lh-body);
  letter-spacing: .12em;
  color: var(--ck-fg);
}
.ck .col-inner .button.ck-btn-mark::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--ck-gold);
  transform-origin: left;
  transition: transform .38s var(--ck-ease);
}
.ck .col-inner .button.ck-btn-mark::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: var(--ck-gold);
  -webkit-mask: var(--ck-mark) center / contain no-repeat;
          mask: var(--ck-mark) center / contain no-repeat;
  transition: transform .4s var(--ck-ease);
}
@media (hover: hover) {
  .ck .col-inner .button.ck-btn-mark:hover { color: var(--ck-fg); background: none; }
  .ck .col-inner .button.ck-btn-mark:hover::before { transform: scaleX(1.12); }
  .ck .col-inner .button.ck-btn-mark:hover::after  { transform: translateX(4px) rotate(-10deg); }
}

/* TABLET TEXT · a desktop copy covers 550–899px too, where the current page
   switches to its shorter phone wording. Both versions sit in the desktop
   copy; these two classes show the right one. */
@media (max-width: 899px) { .ck .ck-only-wide   { display: none !important; } }
@media (min-width: 900px) { .ck .ck-only-narrow { display: none !important; } }

/* QUIET EYEBROWS · at 899px and below a section's eyebrow goes neutral, as
   on the page: no single gold reaches 4.5:1 on both white and black at 12px */
.ck--white, .ck--snow { --ck-eyebrow-quiet: var(--ck-fg-45); }
.ck--dark             { --ck-eyebrow-quiet: var(--ck-fg-70); }
@media (max-width: 899px) {
  .ck .ck-eyebrow.ck-quiet { color: var(--ck-eyebrow-quiet); }
}

/* ARROW CONTROL · 44px round, drawn from a mask so it takes the ground's
   colour. Used by the carousels' own arrows (Flickity's buttons and ours).
   !important on the size and visibility: Flatsome draws slider arrows as a
   stretched band (top 40% / bottom 40%) that stays invisible until hover. */
.ck .ck-arrow,
.ck .flickity-prev-next-button {
  display: grid;
  place-items: center;
  width: 44px !important;
  height: 44px !important;
  bottom: auto !important;
  margin: 0;
  padding: 0;
  opacity: 1 !important;
  border: 1px solid var(--ck-line);
  border-radius: var(--ck-r-nav);
  background: none;
  color: var(--ck-fg);
  cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease, opacity .25s ease;
}
.ck .ck-arrow::before,
.ck .flickity-prev-next-button::before {
  content: "";
  width: 17px;
  height: 17px;
  background-color: currentColor;
  -webkit-mask: var(--ck-chev-next) center / contain no-repeat;
          mask: var(--ck-chev-next) center / contain no-repeat;
}
.ck .ck-arrow--prev::before,
.ck .flickity-prev-next-button.previous::before {
  -webkit-mask-image: var(--ck-chev-prev);
          mask-image: var(--ck-chev-prev);
}
.ck .flickity-prev-next-button .flickity-button-icon { display: none; }
.ck .ck-arrow[disabled],
.ck .flickity-prev-next-button[disabled] { opacity: .3 !important; cursor: default; }
@media (hover: hover) {
  .ck .ck-arrow:not([disabled]):hover,
  .ck .flickity-prev-next-button:not([disabled]):hover { border-color: var(--ck-gold); }
}

/* SLIDER DASHES · Flatsome's slider bullets, redrawn as the page's dashes:
   a 38px hairline each, the live one in full ink, hung just under the
   slider (so the slider's own height, which the arrows centre on, is the
   cards' height). The wrapper keeps room for them. Every slider except
   the hero, which has its own bars. A section sets the gap above them
   with --ck-dots-gap. */
.ck :where(.slider-wrapper:not(.ck-hero__slider)) {
  --ck-dots-gap: 14px;
  padding-bottom: calc(var(--ck-dots-gap) + 26px);
}
.ck :where(.slider-wrapper:not(.ck-hero__slider)) .flickity-page-dots {
  position: absolute;
  top: 100%;
  right: 0;
  bottom: auto;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: var(--ck-dots-gap) 0 0;
  padding: 0;
  line-height: 1;
}
.ck :where(.slider-wrapper:not(.ck-hero__slider)) .flickity-page-dots .dot {
  display: block;
  width: 38px;
  height: auto;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: none;
  opacity: 1 !important;                   /* over Flatsome's .is-selected rule */
}
.ck :where(.slider-wrapper:not(.ck-hero__slider)) .flickity-page-dots .dot::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--ck-line);
  transition: background-color .4s ease;
}
@media (hover: hover) {
  .ck :where(.slider-wrapper:not(.ck-hero__slider)) .flickity-page-dots .dot:hover::before { background: var(--ck-fg-45); }
}
.ck :where(.slider-wrapper:not(.ck-hero__slider)) .flickity-page-dots .dot.is-selected::before { background: var(--ck-fg); }


/* --------------------------------------------------------------------------
   6. HERO
   A slider of full-screen banners. Each banner is a whole slide: photo, and
   a text box holding the headline (and on the desktop copy the note) plus
   "Book a site visit", laid along the foot of the picture over one
   hairline. The slider's own dots are redrawn as bars under that line, and
   the live bar's gold fill IS the timer: the script moves to the next slide
   when the fill ends, so bar and picture never drift apart.
   Breakpoints are the current page's own, so every measure matches it:
   · ≥1000  full screen · headline left, note + button right, 14vw inset
   · ≤999   85% of the screen · one column · no note
   · ≤899   no hairline, arrows or scroll cue · bottom-weighted wash
   · ≤599   10px inset (the page gutter)
   · phone copy (≤549) · its own crops and shorter headlines
   -------------------------------------------------------------------------- */
.ck-hero {
  overflow: clip;
  isolation: isolate;
  --ck-h-ink:    #FFFFFF;
  --ck-h-ink-88: rgba(255, 255, 255, .88);
  --ck-h-line:   rgba(255, 255, 255, .32);
  --ck-h-dwell:  6.5s;                                     /* time on each slide */
  --ck-h-foot:   clamp(40px, 5vh, 62px);                   /* space under the bars */
  --ck-h-bars:   calc(25px + clamp(16px, 1.9vw, 26px));    /* bar row + its gap above */
  --ck-h-inset:  clamp(24px, 5vw, 96px);                   /* the line's side inset */
  --ck-h-note:   clamp(14.5px, 1.1vw, 16.5px);             /* the note's type size */
  --ck-h-aside:  calc(var(--ck-h-note) * 17.4);            /* note column: 38ch of the note's Jost, 276px at 1440, 287px from 1500 */
}
.ck-hero .section-content { padding-block: 0; }
.ck-hero .slider-wrapper { background: var(--ck-bark); }
.ck-hero .slider-wrapper .loading-spin { display: none; }
/* until the slider starts (or if it never does) the first slide shows alone */
.ck-hero .slider:not(.flickity-enabled) .banner + .banner { display: none; }

/* each slide takes 80% of the screen, so the ticker under it is always in
   view; !important beats Flatsome's padding-top sizing */
.ck-hero .banner {
  height: 80svh !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  background: var(--ck-bark);
}
.ck-hero .banner-bg img {
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-user-drag: none;
  user-select: none;
}
/* the dark rises from the foot just far enough to hold the line; the photo
   above it is untouched */
.ck-hero .banner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(18, 16, 13, .72) 0%, rgba(18, 16, 13, .42) 28%, rgba(18, 16, 13, 0) 55%);
}

/* the text box runs the full width along the foot of the banner.
   !important: Flatsome positions and sizes text boxes with inline styles */
.ck-hero .banner-layers {
  width: 100%;
  max-width: none !important;
  height: 100%;
  margin: 0;
  padding: 0 !important;
  overflow: visible !important;
}
.ck-hero .text-box {
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  max-height: 100%;
  margin: 0 !important;
  padding: 0 var(--ck-h-inset) calc(var(--ck-h-foot) + var(--ck-h-bars));
  transform: none !important;
}
.ck-hero .text-box-content { font-size: 100% !important; }

/* one line of copy over one hairline */
.ck-hero .text-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: clamp(8px, .9vw, 13px);
  border-bottom: 1px solid var(--ck-h-line);
  text-align: left;
}
.ck-hero .ck-hero__top { display: contents; }

.ck-hero .text-inner .ck-hero__line {
  max-width: 24ch;
  font-size: clamp(32px, 4vw, 60px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.024em;
  color: var(--ck-h-ink);
  text-wrap: balance;
  text-shadow: 0 1px 26px rgba(9, 13, 17, .42);
}
.ck-hero .text-inner .ck-hero__line em { color: var(--ck-gold); }
.ck-hero .ck-hero__hl { display: inline; }

.ck-hero .text-inner .ck-hero__note {
  font-size: var(--ck-h-note);
  line-height: 1.55;
  color: var(--ck-h-ink-88);
  text-shadow: 0 1px 18px rgba(9, 13, 17, .5);
}
.ck-hero .ck-hero__nl { display: inline; }

/* "Book a site visit": white words on a gold rule, the arrow lifts on hover.
   The rule and padding sit on Flatsome's inner span, so the rule is exactly
   as long as the words and arrow (158px) while the link itself can take the
   note's column width and start on the note's left edge. */
.ck-hero .text-inner .button.ck-hero__go {
  justify-self: start;
  margin-top: clamp(14px, 4.4vw, 20px);
  line-height: var(--ck-lh-body);
  color: var(--ck-h-ink);
}
.ck-hero .text-inner .button.ck-hero__go span {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0 9px;
  border-bottom: 2px solid var(--ck-gold);
}
.ck-hero .text-inner .button.ck-hero__go span::after {
  content: "\2197";
  font-size: 1.15em;
  line-height: 1;
  letter-spacing: 0;
  transition: transform .3s var(--ck-ease);
}
@media (hover: hover) {
  .ck-hero .text-inner .button.ck-hero__go:hover { color: var(--ck-h-ink); background: none; }
  .ck-hero .text-inner .button.ck-hero__go:hover span::after { transform: translate(3px, -3px); }
}

/* THE BARS · Flickity's dots, centred under the line. Each is a 25px tap
   target showing a 3px stripe; the live one is longer and a gold fill runs
   across it for the length of the slide. !important: Flickity and Flatsome
   both style dots as round and position them themselves. */
.ck-hero .flickity-page-dots {
  position: absolute;
  top: auto !important;
  right: 0;
  bottom: var(--ck-h-foot) !important;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, .8vw, 12px);
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  list-style: none;
}
.ck-hero .flickity-page-dots .dot {
  position: relative;
  display: block;
  width: 32px;
  height: 25px;
  margin: 0 !important;
  padding: 11px 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, .34) content-box !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: pointer;
  transition: width .45s var(--ck-ease), background-color .45s ease;
}
.ck-hero .flickity-page-dots .dot.is-selected { width: 56px; }
.ck-hero .flickity-page-dots .dot::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--ck-gold);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.ck-hero .flickity-page-dots .dot.is-selected::after {
  animation: ck-hero-fill var(--ck-h-dwell) linear forwards;
}
/* paused while the hero is off screen, the tab is hidden or a slide is held */
.ck-hero.is-paused .flickity-page-dots .dot.is-selected::after { animation-play-state: paused; }
@keyframes ck-hero-fill {
  to { transform: scaleX(1); }
}
@media (hover: hover) {
  .ck-hero .flickity-page-dots .dot:not(.is-selected):hover { background-color: rgba(255, 255, 255, .68) !important; }
}

/* ARROWS · frosted discs on the photo's midline. The one control that
   cannot share the page's plain arrow: a bare hairline over a bright sky is
   not a control anyone can see. Hidden at 899px and below, where the edges
   belong to the headline and the photo is swiped. */
.ck-hero .flickity-prev-next-button {
  position: absolute;
  top: 50%;
  z-index: 3;
  border-color: rgba(255, 255, 255, .3);
  background: rgba(18, 16, 13, .22);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #FFFFFF;
  transform: translateY(-50%);
  transition: background-color .3s ease, border-color .3s ease, translate .3s var(--ck-ease);
}
.ck-hero .flickity-prev-next-button.previous { left: clamp(12px, 2vw, 36px); right: auto; }
.ck-hero .flickity-prev-next-button.next     { right: clamp(12px, 2vw, 36px); left: auto; }
@media (hover: hover) {
  .ck-hero .flickity-prev-next-button:hover { background: rgba(18, 16, 13, .46); border-color: rgba(255, 255, 255, .62); }
  .ck-hero .flickity-prev-next-button.previous:hover { translate: -2px 0; }
  .ck-hero .flickity-prev-next-button.next:hover     { translate: 2px 0; }
}

/* SCROLL CUE · one row laid over the slider on the right edge, low enough to
   clear the arrow on the midline and high enough to clear the line */
.ck-hero .row.ck-hero__cue {
  position: absolute;
  top: auto;
  right: clamp(14px, 2vw, 36px);
  bottom: clamp(150px, 20vh, 230px);
  z-index: 3;
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
.ck-hero .ck-hero__scroll {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  padding: 10px 8px;
  color: var(--ck-h-ink);
  transition: opacity .3s ease;
}
@media (hover: hover) {
  .ck-hero .ck-hero__scroll:hover { opacity: .72; }
}
.ck-hero .ck-hero__scroll-txt {
  font-size: 11px;
  font-weight: 500;
  line-height: var(--ck-lh-body);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  writing-mode: vertical-rl;
}
.ck-hero .ck-hero__scroll-rail {
  position: relative;
  display: block;
  width: 1px;
  height: 62px;
  overflow: hidden;
  background: rgba(255, 255, 255, .3);
}
.ck-hero .ck-hero__scroll-rail::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 22px;
  background: #FFFFFF;
  animation: ck-hero-cue 2.1s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes ck-hero-cue {
  0%        { transform: translateY(-24px); }
  60%, 100% { transform: translateY(62px); }
}

/* ---- ≥1000: the two-column line ---- */
@media (min-width: 1000px) {
  .ck-hero { --ck-h-inset: clamp(96px, 14vw, 400px); }
  .ck-hero .text-inner {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "line note"
      "line go";
    column-gap: clamp(40px, 6vw, 120px);
    align-items: start;
  }
  .ck-hero .text-inner .ck-hero__line { grid-area: line; text-wrap: pretty; }
  /* note and button share one right-hand block, 38ch wide and set against
     the right edge, so the button starts on the note's left edge */
  .ck-hero .text-inner .ck-hero__note,
  .ck-hero .text-inner .button.ck-hero__go {
    justify-self: end;
    width: min(100%, var(--ck-h-aside));
  }
  .ck-hero .text-inner .ck-hero__note {
    grid-area: note;
    padding-top: .28em;                /* seats the note against the headline's cap height */
  }
  .ck-hero .text-inner .button.ck-hero__go {
    grid-area: go;
    align-self: start;
    margin-top: clamp(16px, 2vw, 28px);
  }
  /* each half of a headline and of the note takes its own line */
  .ck-hero .ck-hero__hl,
  .ck-hero .ck-hero__nl { display: block; }
}

/* ---- ≤999: one column, no note, 85% of the screen ---- */
@media (max-width: 999px) {
  .ck-hero { --ck-h-foot: clamp(18px, 2.6vh, 30px); }
  .ck-hero .banner { height: 85svh !important; }
  .ck-hero .text-inner .ck-hero__note { display: none; }
}
/* ---- ≤899: no hairline, arrows or scroll cue; a deeper wash ---- */
@media (max-width: 899px) {
  .ck-hero .text-inner {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .ck-hero .flickity-prev-next-button,
  .ck-hero .row.ck-hero__cue { display: none; }
  .ck-hero .banner-bg::after {
    background: linear-gradient(to top, rgba(18, 16, 13, .78) 0%, rgba(18, 16, 13, .5) 30%, rgba(18, 16, 13, 0) 58%);
  }
  /* shorter bars: 24px, the live one 42px */
  .ck-hero .flickity-page-dots .dot { width: 24px; }
  .ck-hero .flickity-page-dots .dot.is-selected { width: 42px; }
}
/* ---- ≤599: the page gutter ---- */
@media (max-width: 599px) {
  .ck-hero { --ck-h-inset: var(--ck-gut-phone); }
}

/* ---- phone copy, ≤549 ---- */
.ck-hero.ck--phone { --ck-h-inset: var(--ck-gut-phone); }
/* every phone headline is written as two short lines: each takes its own */
.ck-hero.ck--phone .ck-hero__hl {
  display: block;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   7. TICKER
   One section for every screen. One set of items drifts left; the script
   adds a silent copy so the -50% step lands exactly on it. The hairlines
   run full width and only the words fade, holding full strength across a
   centred 1500px. Beige rather than gold: gold on near-black is what every
   other site in the category looks like, and the hero already spent it.
   -------------------------------------------------------------------------- */
.ck-ticker {
  border-block: 1px solid rgba(201, 180, 155, .2);
  --ck-tk-clear: max(0px, calc((100% - 1660px) / 2));
  --ck-tk-solid: max(56px, calc((100% - 1500px) / 2));
}
.ck-ticker .section-content { padding-block: 0; }
/* phones: no line on top, so the hero photo runs straight into the ticker
   (under the photo the hairline read as a stray light line) */
@media (max-width: 549px) {
  .ck-ticker { border-top: 0; }
}

.ck-ticker .ck-ticker__view {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent var(--ck-tk-clear), #000 var(--ck-tk-solid), #000 calc(100% - var(--ck-tk-solid)), transparent calc(100% - var(--ck-tk-clear)));
          mask-image: linear-gradient(90deg, transparent var(--ck-tk-clear), #000 var(--ck-tk-solid), #000 calc(100% - var(--ck-tk-solid)), transparent calc(100% - var(--ck-tk-clear)));
}
.ck-ticker .ck-ticker__track {
  display: flex;
  width: max-content;
}
/* it only moves once the script has added its copy (.is-looping) */
.ck-ticker .ck-ticker__track.is-looping { animation: ck-drift 46s linear infinite; }
@media (hover: hover) {
  .ck-ticker:hover .ck-ticker__track { animation-play-state: paused; }
}
@keyframes ck-drift {
  to { transform: translateX(-50%); }
}

.ck-ticker .ck-ticker__row {
  display: flex;
  flex: none;
  align-items: center;
  padding-block: clamp(15px, 1.7vw, 21px);
}
.ck-ticker .ck-ticker__item {
  display: flex;
  align-items: center;
  gap: clamp(11px, 1.2vw, 16px);
  padding-inline-end: clamp(22px, 2.6vw, 40px);
  font-size: clamp(12px, .95vw, 13.5px);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ck-beige);
}
.ck-ticker .ck-ticker__ic {
  flex: none;
  width: 19px;
  height: 19px;
  overflow: visible;
  fill: none;
  stroke: var(--ck-beige);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* at 899px and below the words carry it alone */
@media (max-width: 899px) {
  .ck-ticker .ck-ticker__ic { display: none; }
}


/* --------------------------------------------------------------------------
   8. ABOUT CAMPKING · "Where design meets the wild"
   A centred heading, five photos of different sizes in a row so their
   heights make an arc (they rise in once, the script arms them), then two
   lines of copy and "Discover Campking".
   · ≥720   the arc
   · ≤719   one row of equal 2:3 frames drifting right on its own; the
            script adds the silent copy that makes the loop seamless
   · ≤899   one short line of copy instead of two
   Phone copy: the same, always the drifting row.
   -------------------------------------------------------------------------- */
.ck-about { overflow: clip; }

.ck-about .ck-about__copy {
  max-width: min(100%, 860px);
  margin-inline: auto;
  text-align: center;
}
.ck-about .ck-about__copy .ck-eyebrow { letter-spacing: .26em; }
/* the enlarged italic overflows its line box at the descender, so the
   heading carries a little padding to keep it off whatever follows */
.ck-about .ck-about__title {
  margin-top: var(--ck-gap-eyebrow);
  padding-bottom: .1em;
  font-size: var(--ck-t-sec);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: var(--ck-ls-sec);
  text-wrap: balance;
}
.ck-about .ck-about__title em {
  display: block;
  font-size: 1.1em;
  line-height: 1.02;
  color: var(--ck-gold);
}

/* the arc: five photos centred, their widths and ratios make the shape.
   !important: Flatsome writes each image's width inline */
.ck-about .row.ck-about__wave { margin-top: clamp(34px, 4.4vw, 68px); }
.ck.section .row.ck-about__wave .col-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 22px);
}
.ck-about .ck-about__tile {
  flex: 0 0 auto;
  width: var(--w) !important;
  aspect-ratio: var(--ar);
  overflow: hidden;
  border-radius: var(--ck-r);
  background: var(--ck-line-soft);
}
.ck-about .ck-about__tile .img-inner,
.ck-about .ck-about__tile img {
  width: 100%;
  height: 100%;
}
.ck-about .ck-about__tile img { object-fit: cover; }
/* every stop 15% up on the original, so the arc keeps its proportions */
.ck-about .ck-about__tile:nth-child(1) { --w: clamp(97px, 12.65vw, 173px);  --ar: .58; --d: 0ms; }
.ck-about .ck-about__tile:nth-child(2) { --w: clamp(143px, 19.55vw, 265px); --ar: .63; --d: 135ms; }
.ck-about .ck-about__tile:nth-child(3) { --w: clamp(94px, 12.4vw, 168px);   --ar: .70; --d: 270ms; }
.ck-about .ck-about__tile:nth-child(4) { --w: clamp(143px, 19.55vw, 265px); --ar: .63; --d: 405ms; }
.ck-about .ck-about__tile:nth-child(5) { --w: clamp(97px, 12.65vw, 173px);  --ar: .58; --d: 540ms; }

/* the reveal: each frame rises and fades in while its photo settles out of
   a slight over-scale. The script adds .is-armed, then takes it off once
   the row is on screen. */
@media (prefers-reduced-motion: no-preference) {
  .ck-about .ck-about__tile {
    transition: opacity 1.05s cubic-bezier(.22, .7, .2, 1), transform 1.05s cubic-bezier(.22, .7, .2, 1);
    transition-delay: var(--d, 0ms);
  }
  .ck-about .ck-about__tile img {
    transition: transform 1.6s cubic-bezier(.22, .7, .2, 1);
    transition-delay: var(--d, 0ms);
  }
  .ck-about .ck-about__wave.is-armed .ck-about__tile {
    opacity: 0;
    transform: translateY(30px) scale(.96);
    transition: none;
  }
  .ck-about .ck-about__wave.is-armed .ck-about__tile img {
    transform: scale(1.14);
    transition: none;
  }
}

/* the script's loop copies only ever show in the drifting row */
@media (min-width: 720px) {
  .ck-about .ck-about__tile.ck-dup { display: none; }
}

/* copy + button */
.ck-about .row.ck-about__foot { margin-top: clamp(32px, 4vw, 60px); }
/* ".ck.section .row" outranks the column reset in section 4 */
.ck.section .row.ck-about__foot .col-inner {
  max-width: min(100%, 52ch);
  margin-inline: auto;
  text-align: center;
}
.ck-about .ck-about__sub {
  font-size: var(--ck-t-sub);
  line-height: var(--ck-lh-body);
  color: var(--ck-fg-70);
  text-wrap: balance;
}
/* the gap between the two long lines only; the short tablet line is last
   and never takes it, even though the hidden long lines sit before it */
.ck-about .ck-about__sub + .ck-about__sub:not(.ck-only-narrow) { margin-top: .85em; }
/* +5px: on the page the button sits in its own line box, whose strut lowers
   it 5px under the margin; matched here so the gap is the same */
.ck-about .col-inner .button.ck-btn-mark { margin-top: calc(clamp(24px, 2.8vw, 38px) + 5px); }

@media (max-width: 899px) {
  .ck-about .row.ck-about__foot { margin-top: 24px; }
}

/* ---- ≤719 and the phone copy: one drifting row of equal frames ----
   Every frame the same: one width, one 2:3 height, one gap. The gap is a
   trailing margin on each frame, not a flex gap, so ten frames halve
   exactly and the -50% step lands on the copy with no tick. */
@media (max-width: 719px) {
  .ck-about .row.ck-about__wave {
    padding-inline: 0;
    overflow: hidden;
  }
  .ck.section .row.ck-about__wave .col-inner {
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    width: max-content;
    gap: 0;
  }
  .ck-about .ck-about__tile,
  .ck-about .ck-about__tile:nth-child(n) {
    --tw: clamp(150px, 46vw, 200px);
    width: var(--tw) !important;
    height: calc(var(--tw) * 3 / 2);
    aspect-ratio: auto;
    margin-inline-end: 10px;
  }
  /* always a row the reader can swipe. The slow drift is done by the footer
     script moving this scroll position (not a CSS animation), so a finger can
     take over at any moment and the loop carries on from wherever it is left. */
  .ck-about .row.ck-about__wave {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ck-about .row.ck-about__wave::-webkit-scrollbar { display: none; }
}


/* --------------------------------------------------------------------------
   9. SIGNATURE STRUCTURES · the six canvas tents
   In UX Builder: a UX Builder slider holding one image box per tent: its
   photo, then its "1 / 6" chip, label and name, "More info", the three
   figures and (desktop copy) the tablet crop.
   Flatsome's slider does the sliding, dragging, swiping and arrows, and the
   class it puts on the tent in view (.is-selected) drives the animation,
   so it runs without the page script:
   · one large photo and an 8% sliver of the next; the arriving photo comes
     in 6% larger and settles to size
   · the words under it fade out, and the next tent's fade in a beat later
   The page script adds the row of names above it, kept in step.
   · ≥1000  arrows in lanes beside the slider
   · 900–999  arrows under it, one at each end
   · ≤899   no arrows; dashes under it; the names become a swipeable rail;
            4:5 photos (the desktop copy switches to the tablet crops);
            the figures in a 2×2 panel
   -------------------------------------------------------------------------- */
.ck-sc { --ck-sc-g: 12px; }                 /* photo to sliver */
@media (max-width: 899px) {
  .ck-sc { --ck-sc-g: 6px; }
}
.ck-sc .ck-head .ck-eyebrow { letter-spacing: .24em; }
.ck-sc .ck-head__side .ck-sub { color: var(--ck-fg-70); }

/* NAMES · filled in by the script. A model rail: reading size, sentence
   case; the live one is simply brighter and larger. Only colour is
   transitioned: animating the size would reflow the row. */
.ck-sc .ck-sc__tabs:empty { display: none; }
.ck-sc .ck-sc__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 3vw, 44px);
  margin-bottom: clamp(24px, 3vw, 44px);
}
.ck-sc .ck-sc__tab {
  padding: 8px 2px;
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--ck-fg-45);
  transition: color .3s ease;
}
@media (hover: hover) {
  .ck-sc .ck-sc__tab:hover { color: var(--ck-fg-70); }
}
.ck-sc .ck-sc__tab[aria-current="true"] {
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 400;
  color: var(--ck-fg);
}

/* THE SLIDER · lanes for the arrows (≥1000) or a row under it (900–999) */
.ck-sc .ck-sc__slider { position: relative; padding-bottom: 0; }   /* no dashes: the names do their job */
@media (min-width: 1000px) {
  .ck-sc .ck-sc__slider { padding-inline: calc(44px + clamp(12px, 1.6vw, 24px)); }
}
@media (min-width: 900px) and (max-width: 999px) {
  .ck-sc .ck-sc__slider { padding-bottom: calc(44px + clamp(20px, 3.4vw, 30px)); }
}

/* THE TENT · the full width. The slider is type="fade": Flatsome stacks
   every tent in the same place and cross-fades them, so no next slide sits
   beside this one, and a 92% card would leave 8% of empty ground down the
   right. Same as the reference page, where the slides share one grid cell.
   !important: Flatsome sets every slide to width: 100% !important. */
.ck-sc .slider .ck-sc__slide,
.ck-sc .flickity-slider .ck-sc__slide {
  width: 100% !important;
  margin: 0;
}

/* THE STRIP · from 900px the photographs are drawn by the carousel the
   script builds (see PHONE STRIPS, which now runs here too): one large card
   and an 8% sliver of the next, and a drag trades their widths. The slides
   stay where they are and keep their bar, which the fade cross-fades, so
   the words change with the picture. Only each slide's own photograph is
   stood down, since the strip is drawing it. Below 900 nothing changes:
   the strip is not shown and the slides carry their photographs as before. */
@media (min-width: 900px) {
  .ck-sc.has-hs-pics .ck-sc__slide .box-image { display: none; }
  .ck-sc.has-hs-pics .ck-sc__slide .box-text-inner { margin-top: 0; }
  .ck-sc .ck-hs { margin-bottom: clamp(24px, 3vw, 40px); }
  /* the chip belongs to the picture, and the strip carries its own. The
     slide's one is anchored to the slide, which is now the bar alone, so it
     came to rest on top of the eyebrow. */
  .ck-sc.has-hs-pics .ck-sc__slide .ck-sc__chip { display: none; }
  /* and the slider's arrows would centre themselves on the bar for the same
     reason: the strip has its own, on the frame around it */
  .ck-sc.has-hs-pics .slider .flickity-prev-next-button { display: none !important; }
  .ck-sc .ck-hs__frame { position: relative; }
  .ck-sc .ck-hs__nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    color: var(--ck-fg-45);
    transform: translateY(-50%);
  }
  .ck-sc .ck-hs__nav--prev { left: calc(-44px - clamp(12px, 1.6vw, 24px)); }
  .ck-sc .ck-hs__nav--next { right: calc(-44px - clamp(12px, 1.6vw, 24px)); }
}
@media (min-width: 900px) and (hover: hover) {
  .ck-sc .ck-hs__nav:hover { border-color: var(--ck-fg); color: var(--ck-fg); }
}
/* Below 900 the strip stays (it is the phone's gallery, as in every other
   ck--phone section): .ck--phone.has-hs hides Flatsome's slider outright,
   so standing the strip down here left the section with no photographs at
   all. Only the arrows go — the phone drags the strip instead. */
@media (max-width: 899px) {
  .ck-sc .ck-hs__nav { display: none; }
}
.ck-sc .ck-sc__slide { position: relative; }
.ck-sc .ck-sc__slide .box-image {
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--ck-r);
  background: rgba(242, 239, 234, .04);
}
.ck-sc .ck-sc__slide .box-image div,
.ck-sc .ck-sc__slide .box-image img { width: 100%; height: 100%; }
.ck-sc .ck-sc__slide img { object-fit: cover; -webkit-user-drag: none; }
/* box text: Flatsome's padding, centring and position off (the chip is
   placed against the whole tent, not the text) */
.ck-sc .ck-sc__slide .box-text {
  position: static;
  padding: 0;
  font-size: inherit;
  text-align: left;
}
.ck-sc .ck-sc__alt { display: none; }       /* the tablet crop, ≤899 only */

/* THE ANIMATION · the slider is type="fade": Flatsome stacks the slides in
   one place and cross-fades the whole tent, photo and words together, the
   way the reference page does.
   The words used to be faded on their own here, keyed off .is-selected, so
   every tent that was not the live one had its chip, label, name, spec and
   "More info" at opacity 0. On the desktop copy that read as a spec strip
   that never quite arrived (it waited .28s, then took .6s). Fading the whole
   slide replaces it: nothing is hidden per-element any more. */
.ck-sc .flickity-slider .ck-sc__slide img { transition: transform .9s var(--ck-slide); }
.ck-sc .flickity-slider .ck-sc__slide.is-selected ~ .ck-sc__slide img { transform: scale(1.06); }

/* the "1 / 6" chip: top-left on the photo, frosted like the hero's arrows */
.ck-sc .ck-sc__chip {
  position: absolute;
  top: clamp(12px, 1.2vw, 18px);
  left: clamp(12px, 1.2vw, 18px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(18, 16, 13, .42);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-size: 12.5px;
  font-weight: 500;
  line-height: var(--ck-lh-body);
  letter-spacing: 0;
  color: #FFFFFF;
  pointer-events: none;
}
.ck-sc .ck-sc__chip b { font-weight: 500; }
.ck-sc .ck-sc__chip i { margin: 0 5px; font-style: normal; opacity: .7; }

/* THE ARROWS · Flatsome's, drawn as the round control (section 5) */
.ck-sc .slider .flickity-prev-next-button {
  top: 50%;
  color: var(--ck-fg-45);
  transform: translateY(-50%) !important;       /* over Flatsome's slide-in */
}
.ck-sc .slider .flickity-prev-next-button.previous { right: auto; left: calc(-44px - clamp(12px, 1.6vw, 24px)); }
.ck-sc .slider .flickity-prev-next-button.next     { right: calc(-44px - clamp(12px, 1.6vw, 24px)); left: auto; }
@media (hover: hover) {
  .ck-sc .slider .flickity-prev-next-button:hover { border-color: var(--ck-fg); color: var(--ck-fg); }
}
@media (min-width: 900px) and (max-width: 999px) {
  .ck-sc .slider .flickity-prev-next-button {
    top: calc(100% + clamp(20px, 3.4vw, 30px));
    transform: none !important;
  }
  .ck-sc .slider .flickity-prev-next-button.previous { left: 0; }
  .ck-sc .slider .flickity-prev-next-button.next     { right: 0; }
}
/* the names do the dashes' job (the slider's bullets are off; this covers them if switched on) */
.ck-sc .slider .flickity-page-dots { display: none; }

/* THE BAR · label over name + "More info" on the left, the figures on the
   right, one hairline above. Box text is flat (label, name, button,
   figures in a row), so the bar is laid out as one grid. */
.ck-sc .ck-sc__slide .box-text-inner {
  /* the tent's own width. It used to be stretched past the card, to run on
     under the sliver; Flatsome's .box clips at the card's edge, so the last
     figure (the price) was cut off there. With the tents stacked there is
     no sliver to reach under, and the three figures fit inside the card, as
     they do on the reference page. */
  width: 100%;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  margin-top: clamp(24px, 3vw, 40px);
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--ck-line-soft);
}
.ck-sc .ck-sc__label {
  grid-column: 1 / 3;
  grid-row: 1;
  margin-bottom: 5px;
  font-size: var(--ck-t-label);
  font-weight: 500;
  line-height: var(--ck-lh-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ck-gold);
}
.ck-sc .ck-sc__name {
  grid-column: 1;
  grid-row: 2;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ck-fg);
}
/* "More info": the hero's link style, light words on a 2px gold rule.
   !important on the left margin: Flatsome zeroes it with
   .text-center .button:first-of-type { margin-left: 0 !important }. */
.ck-sc .box-text-inner .button.ck-sc__more {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  margin-left: clamp(16px, 2.4vw, 32px) !important;
  padding: 9px 0 8px;
  border-bottom: 2px solid var(--ck-gold);
  line-height: var(--ck-lh-body);
  color: var(--ck-fg);
}
/* !important: the button carries Flatsome's "is-link" class, whose own rule
   clears the border colour after this one. Width and style survive, so the
   line is drawn and then painted transparent; naming the colour on its own
   is what keeps it gold. */
.ck-sc .box-text-inner .button.ck-sc__more { border-bottom-color: var(--ck-gold) !important; }
.ck-sc .box-text-inner .button.ck-sc__more::after {
  content: "\2197";
  font-size: 1.15em;
  line-height: 1;
  transition: transform .3s var(--ck-ease);
}
@media (hover: hover) {
  .ck-sc .box-text-inner .button.ck-sc__more:hover { color: var(--ck-gold); background: none; opacity: 1; }
  .ck-sc .box-text-inner .button.ck-sc__more:hover::after { transform: translate(3px, -3px); }
}
/* the figures: value first, label under, hairlines between */
.ck-sc .ck-sc__spec {
  grid-column: 4;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  margin-left: clamp(22px, 3vw, 44px);
}
.ck-sc .ck-sc__spec div {
  min-width: 0;
  padding-inline: clamp(14px, 1.8vw, 26px);
}
.ck-sc .ck-sc__spec div + div { border-inline-start: 1px solid var(--ck-line-soft); }
.ck-sc .ck-sc__spec div:first-child { padding-inline-start: 0; }
.ck-sc .ck-sc__spec div:last-child  { padding-inline-end: 0; }
.ck-sc .ck-sc__spec dd {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--ck-fg);
}
.ck-sc .ck-sc__spec dt {
  margin-top: 3px;
  font-size: var(--ck-t-label);
  font-weight: 500;
  line-height: var(--ck-lh-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ck-fg-45);
}

/* ---- ≤899 (and the phone copy) ---- */
@media (max-width: 899px) {
  .ck-sc .ck-head { text-align: center; }
  .ck-sc .ck-head__side { display: none; }

  /* names: one rail that scrolls from the gutter, with soft edges that step
     aside at each end (the script sets .is-start / .is-end). The gutters
     are margins on the end names so the edges pin to the true screen edge. */
  .ck-sc .ck-sc__tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: clamp(14px, 4vw, 26px);
    margin-inline: calc(var(--ck-gut) * -1);
    padding-inline: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ck-sc .ck-sc__tabs::-webkit-scrollbar { display: none; }
  .ck-sc .ck-sc__tab { flex: none; }
  .ck-sc .ck-sc__tab:first-child { margin-inline-start: var(--ck-gut); }
  .ck-sc .ck-sc__tab:last-child  { margin-inline-end: var(--ck-gut); }
  .ck-sc .ck-sc__tabs::before,
  .ck-sc .ck-sc__tabs::after {
    content: "";
    position: sticky;
    z-index: 1;
    flex: none;
    align-self: stretch;
    width: 64px;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .ck-sc .ck-sc__tabs::before {
    left: 0;
    margin-inline-end: calc(-64px - clamp(14px, 4vw, 26px));
    background: linear-gradient(to left, rgba(18, 16, 13, 0), var(--ck-bark) 85%);
    -webkit-mask-image: linear-gradient(to left, transparent, #000 60%);
            mask-image: linear-gradient(to left, transparent, #000 60%);
  }
  .ck-sc .ck-sc__tabs::after {
    right: 0;
    margin-inline-start: calc(-64px - clamp(14px, 4vw, 26px));
    background: linear-gradient(to right, rgba(18, 16, 13, 0), var(--ck-bark) 85%);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 60%);
            mask-image: linear-gradient(to right, transparent, #000 60%);
  }
  .ck-sc .ck-sc__tabs.is-start::before,
  .ck-sc .ck-sc__tabs.is-end::after { opacity: 0; }

  /* no arrows: swiping, the names, the dashes and the chip move and locate */
  .ck-sc .slider .flickity-prev-next-button { display: none !important; }

  /* 4:5 photos. The desktop copy shows each tent's tablet crop instead of
     its landscape photo: the crop sits in the box text, so it is lifted to
     the top of the text and the text's own top margin goes. */
  .ck-sc .ck-sc__slide .box-image { aspect-ratio: 4 / 5; }
  .ck-sc .ck-sc__slide:has(.ck-sc__alt) .box-image { display: none; }
  .ck-sc .ck-sc__slide:has(.ck-sc__alt) .box-text-inner { margin-top: 0; }
  .ck-sc .box-text-inner .img.ck-sc__alt {
    display: block;
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;                         /* the tent's width; Flatsome writes it inline */
    margin: 0 0 calc(clamp(22px, 4.4vw, 30px) - 16px);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--ck-r);
    background: rgba(242, 239, 234, .04);
  }
  .ck-sc .ck-sc__alt .img-inner,
  .ck-sc .ck-sc__alt img { width: 100%; height: 100%; }

  /* the bar: name, then the figures on a soft panel two a row, then
     "More info". The label repeats the figures, so it goes. */
  .ck-sc .ck-sc__slide .box-text-inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
    align-items: start;
    margin-top: clamp(22px, 4.4vw, 30px);
    padding-top: 0;
    border-top: 0;
  }
  .ck-sc .ck-sc__label { display: none; }
  .ck-sc .ck-sc__name { grid-column: 1; grid-row: 1; }
  .ck-sc .ck-sc__spec {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    margin: 0;
    padding: 16px;
    border-radius: 10px;
    background: rgba(242, 239, 234, .05);
  }
  .ck-sc .ck-sc__spec div,
  .ck-sc .ck-sc__spec div + div {
    display: flex;
    flex-direction: column-reverse;
    padding: 0;
    border: 0;
  }
  .ck-sc .ck-sc__spec dt {
    margin: 0 0 3px;
    font-size: 10.5px;
    letter-spacing: .16em;
    color: rgba(242, 239, 234, .5);
  }
  .ck-sc .ck-sc__spec dd { white-space: normal; }
  /* with the tablet crop on top, everything moves down a row */
  .ck-sc .ck-sc__slide:has(.ck-sc__alt) .ck-sc__name { grid-row: 2; }
  .ck-sc .ck-sc__slide:has(.ck-sc__alt) .ck-sc__spec { grid-row: 3; }
  .ck-sc .ck-sc__slide:has(.ck-sc__alt) .button.ck-sc__more { grid-row: 4; }
  .ck-sc .ck-sc__spec div:last-child dd { font-weight: 400; color: var(--ck-gold); }
  .ck-sc .box-text-inner .button.ck-sc__more {
    grid-column: 1;
    grid-row: 3;
    margin: 4px 0 0 !important;
  }
}
/* the narrowest phones keep every name on one line beside "More info" */
@media (max-width: 374px) {
  .ck-sc .ck-sc__name { font-size: 20px; }
  .ck-sc .box-text-inner .button.ck-sc__more { padding: 9px 0 8px; letter-spacing: .12em; }
}

/* ---- PHONE COPY · a wider sliver, and ONE fixed panel under the slider ----
   The next tent shows 14% instead of 8%. The script builds a single panel
   under the slider (.ck-sc__panel) and, on every swipe, fades only the words
   inside it to the new tent: the name on top, capacity and setup time, then
   the price with "More info" in the space beside it. Each slide keeps just
   its photo and "1 / 6" chip. .has-panel is set by the script, so without it
   the slides keep their own words, exactly as before. */
.ck-sc.ck--phone .slider .ck-sc__slide,
.ck-sc.ck--phone .flickity-slider .ck-sc__slide {
  width: 100% !important;    /* stacked and cross-faded, as above (the phone
                                normally shows the strip instead) */
}
.ck-sc.ck--phone.has-panel .ck-sc__slide :is(.ck-sc__label, .ck-sc__name, .ck-sc__spec) { display: none; }
.ck-sc.ck--phone.has-panel .ck-sc__slide .button.ck-sc__more { display: none !important; }
.ck-sc.ck--phone.has-panel .ck-sc__slide .box-text-inner {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}
/* The panel is the soft box; the words are layers stacked in one grid cell,
   so on a swipe the old words fade out while the new fade in, in the same
   place: no empty moment, and the box keeps the taller layer's height. */
.ck-sc .ck-sc__panel {
  display: grid;
  margin-top: 18px;
  padding: 18px 16px 16px;
  border-radius: 10px;
  background: rgba(242, 239, 234, .05);
  overflow: hidden;
}
.ck-sc .ck-sc__panel-in {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  transition: opacity .34s ease, transform .44s var(--ck-ease);
}
.ck-sc .ck-sc__panel-in.is-in  { opacity: 0; transform: translateY(5px); transition: none; }
.ck-sc .ck-sc__panel-in.is-out { opacity: 0; transform: translateY(-4px); pointer-events: none; transition-duration: .22s, .3s; }
.ck-sc .ck-sc__pname {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ck-fg);
}
.ck-sc .ck-sc__pspec { display: contents; }
.ck-sc .ck-sc__pspec div { display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0; }
.ck-sc .ck-sc__pspec dt {
  margin: 0 0 3px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: var(--ck-lh-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242, 239, 234, .5);
}
.ck-sc .ck-sc__pspec dd {
  margin: 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--ck-fg);
}
.ck-sc .ck-sc__pspec div:last-child dd { font-weight: 400; color: var(--ck-gold); }
/* "More info" in the cell beside the price, sitting on the price's baseline */
.ck-sc .ck-sc__pmore {
  align-self: end;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0 5px;
  border-bottom: 2px solid var(--ck-gold);
  font-size: var(--ck-t-label);
  font-weight: 500;
  line-height: var(--ck-lh-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ck-fg);
  text-decoration: none;
}
.ck-sc .ck-sc__pmore::after { content: "\2197"; font-size: 1.15em; line-height: 1; transition: transform .3s var(--ck-ease); }
@media (hover: hover) {
  .ck-sc .ck-sc__pmore:hover { color: var(--ck-gold); }
  .ck-sc .ck-sc__pmore:hover::after { transform: translate(3px, -3px); }
}
@media (prefers-reduced-motion: reduce) {
  .ck-sc .ck-sc__panel-in { transition: none; }
}


/* --------------------------------------------------------------------------
   10. CARD CAROUSELS · Architectural pods (.ck-am--pods) and Amenities
   One component, two sections. In UX Builder: a UX Builder slider holding
   one image box per card: its photo, then one HTML element with the tag,
   name, (pods: spec line), price and "Get a quote".
   On the PHONE copies Flatsome's slider still does the sliding. On the
   DESKTOP copies the page script lifts the cards onto a native snap rail
   (section 10b), which is what the reference page does; everything below
   still applies, because the card itself is unchanged.
   · ≥1040  three cards and a tenth of the next
   · 700–1039  two and a tenth
   · ≥1100  each arrow sits centred in the page margin outside the cards
   · 720–1099  arrows in their own lanes beside the cards
   · ≤719 (and the phone copy)  one large card and an 8% sliver of the next
   -------------------------------------------------------------------------- */
.ck-am--pods { border-bottom: 1px solid var(--ck-line); }
.ck-am { --g: clamp(14px, 1.7vw, 26px); }
@media (min-width: 900px) {
  /* a flat 16px, not a clamp: clamp(8px, .9vw, 16px) would only reach 16 at
     1778px, so a 1440 laptop would sit at 13px and nothing would change. Flat
     also removes the pinch between 900 and 1040, where the gap fell to 8px
     while the cards were still two across. */
  .ck-am { --g: 16px; }
}

/* THE SLIDER */
.ck-am .ck-am__slider { position: relative; --ck-dots-gap: clamp(30px, 3.6vw, 52px); }
@media (min-width: 720px) and (max-width: 1099px) {
  .ck-am .ck-am__slider { padding-inline: calc(44px + clamp(12px, 1.6vw, 24px)); }
}

/* THE CARD · an image box. The divisor carries a spare tenth of a card, so
   the next one always shows past the edge. !important: Flatsome sets every
   slide to width: 100% !important. */
.ck-am .slider .ck-am__card,
.ck-am .flickity-slider .ck-am__card {
  width: calc((100% - var(--g)) / 1.15) !important;
  margin: 0 var(--g) 4px 0;        /* 4px under the cards: room for the focus ring, as on the page */
}
@media (min-width: 700px) {
  .ck-am .slider .ck-am__card,
  .ck-am .flickity-slider .ck-am__card { width: calc((100% - 2 * var(--g)) / 2.1) !important; }
}
@media (min-width: 1040px) {
  .ck-am .slider .ck-am__card,
  .ck-am .flickity-slider .ck-am__card { width: calc((100% - 3 * var(--g)) / 3.1) !important; }
}
.ck-am .ck-am__card { position: relative; color: inherit; }
.ck-am .ck-am__card img { -webkit-user-drag: none; }

/* photo: 5:4, rounded, a slow zoom on hover */
.ck-am .ck-am__card .box-image {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--ck-r);
  background: var(--ck-line-soft);
}
.ck-am .ck-am__card .box-image div,
.ck-am .ck-am__card .box-image img { width: 100%; height: 100%; }
.ck-am .ck-am__card .box-image img { object-fit: cover; }
.ck-am .ck-img-left15 .box-image img { object-position: 15% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .ck-am .ck-am__card .box-image img { transition: transform .8s var(--ck-ease); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .ck-am .ck-am__card:hover .box-image img { transform: scale(1.04); }
}

/* the words under the photo (Flatsome's box text, reset) */
.ck-am .ck-am__card .box-text {
  position: static;
  padding: 0;
  font-size: inherit;
  text-align: left;
}

/* TAG · a tab on the photo, flush to its left edge, same spot on every card:
   one line, 10px tracked caps, an ellipsis as a safety net */
.ck-am .ck-am__tag {
  position: absolute;
  top: 22px;
  left: 0;
  z-index: 2;
  max-width: calc(100% - 10px);
  padding: 5px 9px 5px 10px;
  border-radius: 0 8px 8px 0;
  background: rgba(18, 16, 13, .62);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #FFFFFF;
}

.ck-am .ck-am__name {
  margin-top: clamp(14px, 1.5vw, 20px);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.015em;
}
/* pods: the whole card opens the pod. The name is the link and its ::after
   is stretched over the card ("Get a quote" sits above that layer). */
.ck-am .ck-am__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ck-am .ck-am__link:focus-visible { outline: none; }
.ck-am .ck-am__card:has(.ck-am__link:focus-visible) {
  outline: 2px solid var(--ck-gold);
  outline-offset: 3px;
  border-radius: var(--ck-r);
}
/* the nudge moves margin, not transform. A transform on the name would make
   it the containing block for its own absolutely positioned descendants, and
   .ck-am__link::after above is one of them: on hover the stretched layer
   snapped from the whole card down to the name's box, so the card stopped
   being clickable exactly when the pointer was on it. (position: relative
   with `left` would do the same; margin does not.) Amenities never had this
   rule, which is why only the pods cards lost their link. */
.ck-am--pods .ck-am__name { transition: margin-left .38s var(--ck-ease); }
@media (hover: hover) {
  .ck-am--pods .ck-am__card:hover .ck-am__name { margin-left: 3px; }
}
/* pods: capacity and install time between the name and the price */
.ck-am .ck-am__meta {
  margin-top: 7px;
  font-size: 14px;
  color: var(--ck-fg-45);
}

/* THE FOOT · the details and the price on one line, then a hairline, then
   the two links. The hairline sits on .ck-am__acts rather than on the foot,
   so the price can sit above it while every part stays INSIDE .ck-am__foot —
   which is what the phone strip lifts out of the card (see words() in the
   footer script). Anything moved outside the foot vanishes on phones. */
.ck-am .ck-am__foot {
  display: block;
  margin-top: 7px;             /* the detail line keeps the gap it always had */
  padding-top: 0;
  border-top: 0;
}
/* above the hairline: pods put their details left and the price right;
   amenities have no details, so the price sits alone on the left */
.ck-am .ck-am__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ck-am .ck-am__top .ck-am__meta { margin-top: 0; }
/* 10px, not 14, so the name-to-hairline distance is 44px in both sections:
   pods 7 + 23 (detail line) + 14 · amenities 10 + 20 (price) + 14 */
.ck-am .ck-am__foot:not(:has(.ck-am__meta)) { margin-top: 10px; }
/* under the hairline: the two links. 14px above it is the gap the foot
   itself used to carry, so the card keeps the rhythm it has today. */
.ck-am .ck-am__acts {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--ck-line);
}
.ck-am .ck-am__price {
  font-size: var(--ck-t-label);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ck-gold);
}
.ck-am .ck-am__quote {
  position: relative;
  z-index: 2;
  flex: none;
  padding-bottom: 3px;
  font-size: var(--ck-t-label);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ck-fg);
  transition: color .25s ease;
}
.ck-am .ck-am__quote::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--ck-gold);
  transform-origin: left center;
  transition: transform .45s var(--ck-ease);
}
.ck-am .ck-am__quote:focus-visible { outline: 2px solid var(--ck-gold); outline-offset: 4px; }
@media (hover: hover) {
  .ck-am .ck-am__quote:hover { color: var(--ck-gold); }
  .ck-am .ck-am__quote:hover::after { transform: scaleX(.35); }
}

/* THE SECOND LINK · the card has always opened the product page (the name's
   stretched ::after), but nothing on it said so. This says it, and is held
   quieter than "Get a quote" so the enquiry stays the loud one: the same
   label type, but muted ink instead of gold and a hairline that only draws
   itself on hover. z-index 2 puts it above the stretched layer. */
.ck-am .ck-am__more {
  position: relative;
  z-index: 2;
  flex: none;
  padding-bottom: 3px;
  font-size: var(--ck-t-label);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ck-fg-45);
  transition: color .25s ease;
}
.ck-am .ck-am__more::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ck-ease);
}
.ck-am .ck-am__more:focus-visible { outline: 2px solid var(--ck-gold); outline-offset: 4px; }
@media (hover: hover) {
  .ck-am .ck-am__more:hover { color: var(--ck-fg); }
  .ck-am .ck-am__more:hover::after { transform: scaleX(1); }
}

/* THE ARROWS · Flatsome's, drawn as the round control (section 5),
   centred on the cards (the phone copies; the desktop copies use the
   rail's own arrows in 10b) */
.ck-am .slider .flickity-prev-next-button {
  top: 50%;
  color: var(--ck-fg-45);
  transform: translateY(-50%) !important;       /* over Flatsome's slide-in */
}
@media (hover: hover) {
  .ck-am .slider .flickity-prev-next-button:not([disabled]):hover { border-color: var(--ck-fg); color: var(--ck-fg); }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .ck-am .slider .flickity-prev-next-button.previous { right: auto; left: calc(-44px - clamp(12px, 1.6vw, 24px)); }
  .ck-am .slider .flickity-prev-next-button.next     { right: calc(-44px - clamp(12px, 1.6vw, 24px)); left: auto; }
}
@media (min-width: 1100px) {
  .ck-am .slider .flickity-prev-next-button.previous { right: auto; left: calc(var(--ck-gut) / -2 - 22px); }
  .ck-am .slider .flickity-prev-next-button.next     { right: calc(var(--ck-gut) / -2 - 22px); left: auto; }
}

/* ---- ≤899: no sub; "Architectural pods" on one line; a quieter price ---- */
@media (max-width: 899px) {
  .ck-am .ck-head__side { display: none; }
  .ck-am--pods .ck-title .ck-ln { display: inline; }
  .ck-am .ck-am__price { color: var(--ck-fg-70); }
}

/* ---- ≤719 (and the phone copy): the strip ---- */
@media (max-width: 719px) {
  .ck-am .slider .ck-am__card,
  .ck-am .flickity-slider .ck-am__card {
    width: calc(92% - 6px) !important;
    margin-right: 6px;
  }
  .ck-am .slider .flickity-prev-next-button { display: none !important; }
  /* the page's strip sits 30px under the heading's gap and its dashes 27px
     under the live card's quote row (4px of that is the cards' margin) */
  .ck-am .ck-am__slider { margin-top: 30px; --ck-dots-gap: 23px; }
  /* only the live card's words: they fade out, and the next card's in.
     Kept quick (no wait before the new words): out in .1s, in over .18s
     starting at once, so the text is there almost as soon as the swipe ends. */
  .ck-am .flickity-slider .ck-am__card :is(.ck-am__name, .ck-am__foot) {
    opacity: 0;
    visibility: hidden;
    transition: opacity .1s ease, visibility 0s linear .1s;
  }
  .ck-am .flickity-slider .ck-am__card.is-selected :is(.ck-am__name, .ck-am__foot) {
    opacity: 1;
    visibility: visible;
    transition: opacity .18s ease 0s, visibility 0s linear 0s;
  }
  /* the arriving photo settles from 6% larger */
  .ck-am .flickity-slider .ck-am__card .box-image img { transition: transform .9s var(--ck-slide); }
  .ck-am .flickity-slider .ck-am__card.is-selected ~ .ck-am__card .box-image img { transform: scale(1.06); }
}

/* PODS AND AMENITIES · "Get a quote" stays in the row under the photo, beside
   the price, with a gold arrow after the words (the gold underline stays) */
.ck-am .ck-am__quote,
.ck-am .ck-am__more { display: inline-flex; align-items: center; gap: 6px; }
.ck-am .ck-am__quote::before,
.ck-am .ck-am__more::before {
  content: "\2197";
  order: 2;
  font-size: 1.15em;
  line-height: 1;
  letter-spacing: 0;
  transition: transform .3s var(--ck-ease);
}
.ck-am .ck-am__quote::before { color: var(--ck-gold); }
.ck-am .ck-am__more::before  { color: currentColor; }   /* muted, with its words */
@media (hover: hover) {
  .ck-am .ck-am__quote:hover::before,
  .ck-am .ck-am__more:hover::before { transform: translate(2px, -2px); }
}


/* --------------------------------------------------------------------------
   10b. CARD RAILS · the reference page's snap track (desktop copies)
   The page script lifts the slider's cards onto a native scroll-snap rail
   and removes Flatsome's slider, so the two carousels behave exactly as
   they do on campking-home-v3: smooth one-card snapping, arrows that nudge
   one card, dashes that drive and follow it, a 1:1 mouse drag that settles
   on the nearest card, the spring off the last card, and the SOFT CROP
   while the rail moves. That last one is drawn inline by the script, frame
   by frame, from the scroll position alone: the leaving card's frame closes
   over its photograph from the left while the photo trails at half speed
   and the words fade, and the arriving card's photo starts 6% zoomed and
   settles to size.
   .has-rail is set once the rail exists, so without the script the section
   keeps Flatsome's slider exactly as it was.
   -------------------------------------------------------------------------- */
.ck-am.has-rail .slider-wrapper { display: none !important; }

/* arrow lane · rail · arrow lane, with the dashes on a row of their own
   underneath — the same frame both carousels use, so the two on the page
   are driven the same way. Lanes rather than buttons laid over the rail:
   overlaid arrows would sit on the first and last photograph, and these
   cards are the product. */
.ck-am .ck-am__frame {
  display: grid;
  align-items: center;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  grid-template-areas:
    "prev track next"
    "dots dots dots";
  column-gap: clamp(12px, 1.6vw, 24px);
  row-gap: clamp(30px, 3.6vw, 52px);
}
.ck-am .ck-am__track {
  grid-area: track;
  display: flex;
  gap: var(--g);
  padding-bottom: 4px;              /* room for the focus ring, as on the page */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: none;      /* the script supplies the stretch instead */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ck-am .ck-am__track::-webkit-scrollbar { display: none; }

/* the divisor carries a spare tenth of a card, so the next one always shows
   past the edge. !important on the width: Flatsome sizes its slides with
   width: 100% !important and that rule can still match a card it has
   already laid out before the script moved it here. */
.ck-am .ck-am__track .ck-am__card {
  flex: 0 0 calc((100% - var(--g)) / 1.15);
  width: auto !important;
  margin: 0;
  scroll-snap-align: start;
}
@media (min-width: 700px) {
  .ck-am .ck-am__track .ck-am__card { flex-basis: calc((100% - 2 * var(--g)) / 2.1); }
}
@media (min-width: 1040px) {
  .ck-am .ck-am__track .ck-am__card { flex-basis: calc((100% - 3 * var(--g)) / 3.1); }
}

/* a mouse cannot scroll this by itself, so the script carries it. The
   cursor says so, and only where there is a real pointer to say it to.
   While the button is down, snapping and smooth scroll are off: the script
   sets the position every frame and mandatory snapping pulls against it,
   which makes the drag feel sticky. */
@media (hover: hover) and (pointer: fine) {
  .ck-am .ck-am__track { cursor: grab; }
}
.ck-am .ck-am__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
  -webkit-user-select: none;
}
.ck-am .ck-am__track.is-dragging .ck-am__card { pointer-events: none; }

/* THE ARROWS · the page's round control (section 5), in their own lanes */
.ck-am .ck-am__nav { color: var(--ck-fg-45); }
.ck-am .ck-am__nav--prev { grid-area: prev; justify-self: start; }
.ck-am .ck-am__nav--next { grid-area: next; justify-self: end; }
@media (hover: hover) {
  .ck-am .ck-am__nav:not([disabled]):hover { border-color: var(--ck-fg); color: var(--ck-fg); }
}
/* Wide screens: the rail runs the full width of the section, flush with the
   heading's left and right edges, and each arrow sits centred in the page
   margin outside it. From 1100 up only — the gutter is 5vw capped at 72px,
   and below about 1000 it is narrower than a 44px arrow, so the lane layout
   stays there. Sits after the grid-area rules above so it wins at equal
   specificity. */
@media (min-width: 1100px) {
  .ck-am .ck-am__frame {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "track" "dots";
  }
  .ck-am .ck-am__nav { position: relative; z-index: 2; align-self: center; }
  .ck-am .ck-am__nav--prev { grid-area: track; margin-left: calc(var(--ck-gut) / -2 - 22px); }
  .ck-am .ck-am__nav--next { grid-area: track; margin-right: calc(var(--ck-gut) / -2 - 22px); }
}
/* PHONE WIDTHS: no arrows at all. They used to drop into the row beside the
   dashes, which gave a phone three ways to move the same rail — a swipe, a
   dash and an arrow — and the arrows were the one nobody used, because the
   rail is already under the thumb. This sits AFTER the base rule and after
   the 1100 block on purpose: both set the same properties at the same
   specificity, so a media query placed above them loses the cascade. */
@media (max-width: 719px) {
  .ck-am .ck-am__frame {
    grid-template-areas:
      "track track track"
      "dots dots dots";
    margin-top: 30px;
    row-gap: 23px;
  }
  .ck-am .ck-am__nav { display: none; }
}

/* THE DASHES · drawn as every other slider's (section 5) */
.ck-am .ck-am__pips {
  grid-area: dots;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.ck-am .ck-am__pips button {
  display: block;
  width: 38px;
  min-height: 0;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  line-height: 1;
  cursor: pointer;
}
.ck-am .ck-am__pips button::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--ck-line);
  transition: background-color .4s ease;
}
@media (hover: hover) {
  .ck-am .ck-am__pips button:hover::before { background: var(--ck-fg-45); }
}
.ck-am .ck-am__pips button[aria-current="true"]::before { background: var(--ck-fg); }


/* --------------------------------------------------------------------------
   11. OUR PROCESS · four stages and the photo they drive
   In UX Builder: the heading; a row of four columns, each one stage button
   (number, name, a long and a short line); a row with the four stage photos
   and (narrow screens) the chip laid on them.
   The live stage's hairline fills gold over 5.2s and the photo moves on
   when it has filled (the script); a tap, a swipe or a mouse drag on the
   photo picks a stage.
   · ≥900  stages in a row of four, the photo under them at 2:1
   · ≤899  the photo first (4:3) with a "01 · Plan" chip on it, then the
           four stages as tabs, the live one's short line under the row
   -------------------------------------------------------------------------- */
.ck-proc { --ck-dwell: 5.2s; }
.ck-proc .ck-head__side .ck-sub { color: var(--ck-fg-70); }

/* THE STAGES · one row, four columns */
.ck.section .row.ck-proc__steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.4vw, 40px);
}
@media (min-width: 900px) {
  .ck.section .row.ck-proc__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* flex column, not block: a button centres its own contents vertically,
   which would drop the rule of a step whose line runs short */
.ck-proc .ck-step {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
}
/* the rule doubles as the timer: it fills gold over the dwell on the live stage */
.ck-proc .ck-step__bar {
  position: relative;
  display: block;
  height: 1px;
  overflow: hidden;
  background: var(--ck-line);
}
.ck-proc .ck-step__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ck-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0s;
}
.ck-proc .ck-step[aria-current="true"] .ck-step__bar::after {
  transform: scaleX(1);
  transition: transform var(--ck-dwell) linear;
}
.ck-proc .ck-step__num {
  display: block;
  margin-top: clamp(15px, 1.7vw, 22px);
  font-size: var(--ck-t-label);
  font-weight: 500;
  line-height: var(--ck-lh-body);
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  color: var(--ck-gold);
}
.ck-proc .ck-step__name {
  display: block;
  margin-top: clamp(7px, .9vw, 11px);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.015em;
}
.ck-proc .ck-step__note {
  display: block;
  max-width: 30ch;
  margin-top: clamp(8px, .9vw, 12px);
  font-size: 15px;
  line-height: var(--ck-lh-body);
  color: var(--ck-fg-70);
}

/* THE STAGE · the four photos stacked, cross-fading */
.ck-proc .row.ck-proc__stage { margin-top: clamp(34px, 4.2vw, 62px); }
.ck-proc .ck-proc__stage .col-inner {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--ck-r);
  background: var(--ck-line-soft);
  touch-action: pan-y;                     /* a sideways swipe is ours */
  user-select: none;
}
@media (min-width: 900px) {
  .ck-proc .ck-proc__stage .col-inner { aspect-ratio: 2 / 1; }
}
@media (hover: hover) and (pointer: fine) {
  .ck-proc .ck-proc__stage .col-inner { cursor: grab; }
}
.ck-proc .ck-proc__stage .col-inner.is-dragging { cursor: grabbing; }
/* !important: Flatsome writes each image's width inline */
.ck-proc .ck-proc__shot {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  margin: 0;
  opacity: 0;
  transition: opacity .9s ease;
}
.ck-proc .ck-proc__shot.is-active { opacity: 1; }
.ck-proc .ck-proc__shot .img-inner,
.ck-proc .ck-proc__shot img { width: 100%; height: 100%; }
.ck-proc .ck-proc__shot img { object-fit: cover; -webkit-user-drag: none; }
/* without the script the first photo shows */
.ck-proc .ck-proc__stage .col-inner:not(.is-live) .ck-proc__shot:first-child { opacity: 1; }
/* the chip on the photo: narrow screens only */
.ck-proc .ck-proc__over { display: none; }

/* ---- ≤899 (and the phone copy): photo first, stages as tabs ---- */
@media (max-width: 899px) {
  .ck-proc .section-content { display: flex; flex-direction: column; }
  .ck-proc .row.ck-headrow     { order: 1; }
  .ck-proc .row.ck-proc__stage { order: 2; margin-top: 0; }
  .ck-proc .row.ck-proc__steps { order: 3; }
  .ck-proc .ck-head__side { display: none; }

  .ck-proc .ck-proc__over {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 2;
    display: block;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(18, 16, 13, .55);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    color: #FFFFFF;
  }
  .ck-proc .ck-proc__over p {
    font-size: var(--ck-t-label);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: opacity .25s ease;
  }
  .ck-proc .ck-proc__over.is-swap p { opacity: 0; }

  /* the row of four; the space under it is kept for the live stage's line */
  .ck.section .row.ck-proc__steps {
    position: relative;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 8px;
    margin-top: 16px;
    padding-bottom: 40px;
  }
  /* the live line measures from the row, not from its own column
     (Flatsome positions every column and column-inner) */
  .ck.section .row.ck-proc__steps .col,
  .ck.section .row.ck-proc__steps .col-inner { position: static; }
  .ck-proc .ck-step {
    align-items: flex-start;
    min-height: 44px;
  }
  /* timer rule on top, then a small tracked number, then the name */
  .ck-proc .ck-step__bar {
    order: 1;
    align-self: stretch;
    height: 2px;
    margin: 0 0 12px;
  }
  .ck-proc .ck-step__num {
    order: 2;
    margin: 0;
    font-size: 10.5px;
    line-height: 1.2;
    letter-spacing: .2em;
    color: var(--ck-fg-45);
    transition: color .3s ease;
  }
  .ck-proc .ck-step__name {
    order: 3;
    margin: 3px 0 0;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: var(--ck-fg-45);
    transition: color .3s ease;
  }
  .ck-proc .ck-step[aria-current="true"] .ck-step__num  { color: var(--ck-gold); }
  .ck-proc .ck-step[aria-current="true"] .ck-step__name { font-weight: 400; color: var(--ck-fg); }
  /* the live line sits under the whole row, not under its own tab */
  .ck-proc .ck-step__note {
    position: absolute;
    right: var(--ck-row-pad, var(--ck-gut));
    bottom: 0;
    left: var(--ck-row-pad, var(--ck-gut));
    max-width: none;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }
  .ck-proc .ck-step[aria-current="true"] .ck-step__note { padding-top: 10px; opacity: 1; }
}
.ck-proc.ck--phone { --ck-row-pad: var(--ck-gut-phone); }


/* --------------------------------------------------------------------------
   12. BEFORE / AFTER · "From bare land to open for guests"
   One full-bleed photo: the After frame, with the Before frame stacked on
   it and clipped to nothing; the switch un-clips it with a hard edge that
   travels across (a wipe, not a cross-fade, which would dip through a double
   exposure). In UX Builder: the two photos, then one HTML element with the
   washes, the heading and the switch.
   · ≥900  21:9 · heading on the left, on the photo's midline
   · ≤899  4:5 · a softer oval wash behind the heading
   -------------------------------------------------------------------------- */
.ck-ba .section-content { padding-block: 0; }
.ck.section .row.ck-ba__main .col-inner {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  isolation: isolate;
  background: #1A1611;
}
@media (max-width: 899px) {
  .ck.section .row.ck-ba__main .col-inner { aspect-ratio: 4 / 5; }
}
/* the two frames; !important: Flatsome writes each image's width inline */
.ck-ba .ck-ba__after,
.ck-ba .ck-ba__before {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  width: 100% !important;
  margin: 0;
}
.ck-ba .ck-ba__after .img-inner, .ck-ba .ck-ba__after img,
.ck-ba .ck-ba__before .img-inner, .ck-ba .ck-ba__before img { width: 100%; height: 100%; }
/* Flatsome fades every picture in over 1s as it loads (and dims image boxes
   on hover): here that ran under the wipe as a dark veil, so the frames
   show at full strength with no fade of their own */
.ck-ba .ck-ba__after img, .ck-ba .ck-ba__before img {
  object-fit: cover;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}
.ck-ba .ck-ba__before {
  clip-path: inset(0 0 0 100%);
  transition: clip-path .9s cubic-bezier(.65, 0, .35, 1);
}
.ck-ba .is-before .ck-ba__before { clip-path: inset(0 0 0 0%); }

/* two shaped washes where the type is: a ramp from the left edge for the
   heading, a short ramp along the foot for the switch */
.ck-ba .ck-ba__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(9, 10, 8, .68) 0%, rgba(9, 10, 8, .4) 26%, rgba(9, 10, 8, .08) 52%, rgba(9, 10, 8, 0) 68%),
    linear-gradient(to top, rgba(9, 10, 8, .5) 0%, rgba(9, 10, 8, .18) 12%, rgba(9, 10, 8, 0) 28%);
}
@media (max-width: 899px) {
  .ck-ba .ck-ba__scrim {
    background:
      radial-gradient(112% 30% at 24% 50%, rgba(9, 10, 8, .68) 0%, rgba(9, 10, 8, .42) 38%, rgba(9, 10, 8, .12) 64%, rgba(9, 10, 8, 0) 84%),
      linear-gradient(to top, rgba(9, 10, 8, .62) 0%, rgba(9, 10, 8, .24) 17%, rgba(9, 10, 8, 0) 36%);
  }
}

/* the overlay: the heading row fills it (so centred means the photo's
   midline); the foot row sits --pad above the bottom edge */
.ck-ba .ck-ba__over {
  --pad: clamp(22px, 3.2vw, 54px);
  position: absolute;
  inset: 0;
  z-index: 3;
  padding-block: var(--pad);
  pointer-events: none;
}
.ck-ba .ck-ba__in {
  width: 100%;
  max-width: var(--ck-maxw);
  margin-inline: auto;
  padding-inline: var(--ck-gut);
}
.ck-ba.ck--phone .ck-ba__in { padding-inline: var(--ck-gut-phone); }
.ck-ba .ck-ba__in--head {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.ck-ba .ck-ba__in--foot {
  position: absolute;
  right: 0;
  bottom: var(--pad);
  left: 0;
}
.ck-ba .ck-ba__head-in,
.ck-ba .ck-ba__foot { pointer-events: auto; }

/* a short gold rule over the eyebrow; the italic stays white (on a photo
   that is already gold at this hour, gold stops reading as emphasis) */
.ck-ba .ck-ba__rule {
  display: block;
  width: clamp(48px, 6vw, 96px);
  height: 2px;
  margin-bottom: clamp(12px, 1.4vw, 18px);
  background: #D9AE55;
}
.ck-ba .ck-ba__head-in .ck-eyebrow {
  color: #D9AE55;
  text-shadow: 0 1px 3px rgba(9, 13, 17, .55);
}
.ck-ba .ck-ba__title {
  max-width: 20ch;
  margin-top: var(--ck-gap-eyebrow);
  font-size: clamp(31px, 4vw, 64px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.026em;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(9, 13, 17, .5), 0 3px 30px rgba(9, 13, 17, .5);
}
.ck-ba .ck-ba__title em { color: #FFFFFF; }

/* switch on top, caption under it, both on the centre line */
.ck-ba .ck-ba__foot {
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1vw, 14px);
}
.ck-ba .ck-ba__state { display: grid; text-align: center; }
.ck-ba .ck-ba__state span {
  grid-area: 1 / 1;
  font-size: 11px;
  font-weight: 500;
  line-height: var(--ck-lh-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 3px rgba(9, 13, 17, .5);
  transition: opacity .45s ease, transform .45s var(--ck-ease);
}
.ck-ba .ck-ba__state .is-b { opacity: 0; transform: translateY(6px); }
.ck-ba .is-before .ck-ba__state .is-a { opacity: 0; transform: translateY(-6px); }
.ck-ba .is-before .ck-ba__state .is-b { opacity: 1; transform: none; }

/* the two-way switch, frosted on the photo */
.ck-ba .ck-sw {
  display: inline-flex;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 100px;
  background: rgba(18, 16, 13, .46);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.ck-ba .ck-sw button {
  min-height: 44px;
  padding: 9px 20px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  transition: background-color .32s ease, color .32s ease;
}
.ck-ba .ck-sw button[aria-pressed="true"] { background: var(--ck-gold); color: #1A1611; }
@media (hover: hover) {
  .ck-ba .ck-sw button:not([aria-pressed="true"]):hover { color: #FFFFFF; }
}
@media (max-width: 899px) {
  .ck-ba .ck-sw button { padding: 9px 17px; }
}


/* --------------------------------------------------------------------------
   13. WHY CAMPKING · the scroll statement (desktop copy only)
   The section is 140vh tall and its one row is pinned for the length of it;
   as the page scrolls through, the words come up from dim to full ink one
   at a time (the script), and the branch lights when the last one has.
   Hidden at 899px and below, as on the current page.
   -------------------------------------------------------------------------- */
.ck-say {
  --ck-dim-accent: rgba(184, 132, 28, .24);
  border-bottom: 1px solid var(--ck-line);
}
.ck-say .section-content {
  height: 140vh;
  padding-block: 0;
}
.ck.section .row.ck-say__stick {
  position: sticky;
  top: 0;
  height: 100svh;
  align-content: center;
  justify-items: center;
  text-align: center;
}
/* the column spans the row, as the page's inner block does */
.ck.section .row.ck-say__stick .col { width: 100% !important; }
.ck-say .ck-say__eyebrow { margin-bottom: clamp(26px, 3.4vw, 48px); }
.ck-say .ck-say__text {
  max-width: 34ch;
  margin: 0 auto;
  font-size: clamp(26px, 3.9vw, 56px);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -.022em;
  text-wrap: balance;
}
/* words arrive dim and come up to full ink one at a time */
.ck-say .ck-say__text .w { color: var(--ck-dim); transition: color .2s linear; }
.ck-say .ck-say__text .w.hl {
  font-family: var(--ck-f-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--ck-dim-accent);
}
.ck-say .ck-say__text .w.on { color: var(--ck-fg); }
.ck-say .ck-say__text .w.hl.on { color: var(--ck-gold); }
/* a closing mark, dim until the last word lights */
.ck-say .ck-say__mark {
  width: auto;
  height: clamp(38px, 3.4vw, 46px);
  margin: clamp(34px, 4.4vw, 60px) auto 0;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 64;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ck-dim);
  transition: color .5s ease;
}
.ck-say .ck-say__mark.on { color: var(--ck-gold); }
@media (max-width: 899px) {
  .ck-say { display: none; }
}


/* --------------------------------------------------------------------------
   14. SOLUTIONS BY PROJECT TYPE · six expanding panels
   Each panel is an image box: the photo, then its number, name and one line.
   The column holding them is the row of panels. Nothing here counts them,
   so adding or removing one in UX Builder needs no change: the open panel
   takes 2.6 shares and the rest divide what is left.
   · ≥900  side by side; the one under the pointer (or tapped, or focused)
           grows to 2.6 shares and opens its line
   · ≤899  stacked 5:2 strips; the open one grows to 6:5 with its number and
           line, and follows the scroll (the script)
   The second panel is open at rest, so the row never opens on six closed
   photos with nothing to read.
   -------------------------------------------------------------------------- */
.ck-env .ck-head__side .ck-sub { color: var(--ck-fg-70); }

.ck.section .row.ck-env__row .col-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 900px) {
  .ck.section .row.ck-env__row .col-inner {
    flex-direction: row;
    height: clamp(440px, 58vh, 660px);
  }
}

.ck-env .ck-env__panel {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--ck-r);
  background: #1A1712;
  color: #FFFFFF;
  cursor: pointer;
}
.ck-env .ck-env__panel .box-image {
  position: absolute;
  inset: 0;
  height: 100%;
}
.ck-env .ck-env__panel .box-image div,
.ck-env .ck-env__panel .box-image img { width: 100%; height: 100%; }
.ck-env .ck-env__panel .box-image img { object-fit: cover; }
.ck-env .ck-env__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(18, 16, 13, .86) 0%, rgba(18, 16, 13, .46) 34%, rgba(18, 16, 13, .06) 66%, rgba(18, 16, 13, 0) 100%);
}
.ck-env .ck-env__panel .box-text {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: clamp(20px, 2vw, 32px);
  font-size: inherit;
  text-align: left;
}
.ck-env .ck-env__num {
  display: block;
  font-size: var(--ck-t-label);
  font-weight: 500;
  line-height: var(--ck-lh-body);
  letter-spacing: .18em;
  font-variant-numeric: tabular-nums;
  color: var(--ck-gold);
}
.ck-env .ck-env__name {
  display: block;
  margin-top: clamp(8px, .9vw, 12px);
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -.015em;
  color: #FFFFFF;
}
/* the name is the button (the whole panel answers the click, the button
   gives it a name and a state for keyboards and screen readers) */
.ck-env .ck-env__btn { text-align: left; }
.ck-env .ck-env__panel:has(.ck-env__btn:focus-visible) { outline: 2px solid var(--ck-gold); outline-offset: 3px; }
.ck-env .ck-env__btn:focus-visible { outline: none; }
/* the line folds with a 0fr → 1fr row; its child needs min-height:0 or the
   closed row floors at min-content */
.ck-env .ck-env__more { display: grid; grid-template-rows: 1fr; opacity: 1; }
.ck-env .ck-env__more span { display: block; overflow: hidden; min-height: 0; }
.ck-env .ck-env__copy {
  display: block;
  max-width: 34ch;
  margin-top: clamp(8px, .9vw, 12px);
  font-size: 15px;
  line-height: var(--ck-lh-body);
  color: rgba(255, 255, 255, .76);
}

/* ---- ≥900: side by side ---- */
@media (min-width: 900px) {
  .ck-env .ck-env__panel {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    aspect-ratio: auto;
    transition: flex-grow .75s cubic-bezier(.22, .7, .25, 1);
  }
  .ck-env .ck-env__panel.is-open { flex-grow: 2.6; }
  .ck-env .ck-env__panel:has(.ck-env__btn:focus-visible) { flex-grow: 2.6; }
  .ck-env .ck-env__more {
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .6s cubic-bezier(.22, .7, .25, 1), opacity .35s ease;
  }
  .ck-env .ck-env__panel.is-open .ck-env__more,
  .ck-env .ck-env__panel:has(.ck-env__btn:focus-visible) .ck-env__more {
    grid-template-rows: 1fr;
    opacity: 1;
    transition-delay: .18s;
    transition-duration: .6s, .45s;
  }
}
/* the panel under the pointer always wins: an open one folds back while
   another is hovered, so two are never wide at once */
@media (min-width: 900px) and (hover: hover) {
  .ck-env .ck-env__panel:hover { flex-grow: 2.6; }
  .ck-env .col-inner:hover .ck-env__panel.is-open:not(:hover) { flex-grow: 1; }
  .ck-env .ck-env__panel:hover .ck-env__more {
    grid-template-rows: 1fr;
    opacity: 1;
    transition-delay: .18s;
    transition-duration: .6s, .45s;
  }
  .ck-env .col-inner:hover .ck-env__panel.is-open:not(:hover) .ck-env__more {
    grid-template-rows: 0fr;
    opacity: 0;
    transition-delay: 0s;
  }
}

/* ---- ≤899: stacked strips, one open ---- */
@media (max-width: 899px) {
  .ck-env .ck-head__side { display: none; }
  .ck-env .ck-env__panel {
    aspect-ratio: 5 / 2;
    transition: aspect-ratio .55s cubic-bezier(.22, .7, .2, 1);
  }
  .ck-env .ck-env__panel.is-open { aspect-ratio: 6 / 5; }
  .ck-env .ck-env__panel .box-text { padding: 16px 18px; }
  .ck-env .ck-env__panel:not(.is-open) .ck-env__num { display: none; }
  .ck-env .ck-env__panel:not(.is-open) .ck-env__name { margin: 0; }
  .ck-env .ck-env__more {
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .5s cubic-bezier(.22, .7, .2, 1), opacity .3s ease;
  }
  /* the line starts unfolding with the panel, not after it */
  .ck-env .ck-env__panel.is-open .ck-env__more {
    grid-template-rows: 1fr;
    opacity: 1;
    transition-delay: 0s, .06s;
  }
  /* each panel repaints on its own while the sizes change, and its photo
     sits on its own layer, so slower phones keep up */
  .ck-env .ck-env__panel { contain: layout paint; }
  .ck-env .ck-env__panel .box-image { transform: translateZ(0); }
}


/* --------------------------------------------------------------------------
   15. PROJECT PLANNER · the reader prices their own project
   A working calculator, so it is one HTML element (the rail above it is a
   second one). Built to the legal team's six rules for anything that
   estimates a return:
     1 every number is the reader's own: three steppers, the other three
       behind Edit
     2 revenue, running costs and the surplus always shown together
     3 cautious starting figures: 45% occupancy, 70% running costs
     4 "Illustrative estimate - not a promise or guarantee" right under the
       results
     5 the exclusions named in that same note
     6 no single big figure anywhere
   · ≥1040  numbers left, the sum and the recovery curve right
   · 720–1039  one column, the halves capped
   · ≤719   the compact list: the sum as rows with setup and recovery, no
            curve, Reset last (the phone copy always)
   -------------------------------------------------------------------------- */
.ck-pp .ck-pp__rail {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  padding-bottom: clamp(32px, 4.2vw, 60px);
}
.ck-pp .ck-pp__rail .ck-eyebrow { white-space: nowrap; }
.ck-pp .ck-pp__rail i { flex: 1; height: 1px; background: var(--ck-line); }

.ck-pp .ck-pp__grid { display: grid; gap: clamp(36px, 4.5vw, 64px); }
@media (min-width: 1040px) {
  .ck-pp .ck-pp__grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
    column-gap: clamp(44px, 5vw, 96px);
    align-items: start;
  }
}
@media (min-width: 720px) and (max-width: 1039px) {
  .ck-pp .ck-pp__in  { max-width: 560px; }
  .ck-pp .ck-pp__out { max-width: 720px; }
}
.ck-pp .ck-pp__title {
  max-width: 13ch;
  font-size: var(--ck-t-sec);
  font-weight: 400;
  line-height: var(--ck-lh-sec);
  letter-spacing: var(--ck-ls-sec);
  text-wrap: balance;
}
.ck-pp .ck-pp__title em { color: var(--ck-gold); }

/* the reader's numbers */
.ck-pp .ck-pp__ctls { margin-top: clamp(20px, 2.4vw, 30px); }
.ck-pp .ck-pp__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 60px;
  border-bottom: 1px solid var(--ck-line-soft);
}
.ck-pp .ck-pp__lbl { font-size: 15.5px; }
.ck-pp .ck-pp__lbl small {
  display: block;
  max-width: 30ch;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ck-fg-45);
}
.ck-pp .ck-pp__stp { display: inline-flex; flex: none; align-items: center; gap: 4px; }
.ck-pp .ck-pp__stp button {
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ck-line);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--ck-fg);
  touch-action: manipulation;
  user-select: none;
  transition: border-color .2s ease, color .2s ease;
}
.ck-pp .ck-pp__stp button::before { content: ""; position: absolute; inset: -4px; }
@media (hover: hover) {
  .ck-pp .ck-pp__stp button:not([disabled]):hover { border-color: var(--ck-gold); color: var(--ck-gold); }
}
.ck-pp .ck-pp__stp button[disabled] { opacity: .28; cursor: default; }
.ck-pp .ck-pp__stp b {
  min-width: 86px;
  font-size: 17px;
  font-weight: 400;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* the other three numbers: one summary line, opened by Edit */
.ck-pp .ck-pp__more {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--ck-lift);
  box-shadow: inset 0 0 0 1px var(--ck-line-soft);
}
.ck-pp .ck-pp__more-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ck-fg-70);
}
.ck-pp .ck-pp__more-line b { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--ck-fg); }
.ck-pp .ck-pp__more-line em { font-family: inherit; font-style: normal; color: var(--ck-fg-45); }
.ck-pp .ck-pp__edit {
  flex: none;
  padding: 2px 0;
  border-bottom: 1px solid rgba(184, 132, 28, .5);
  font-size: var(--ck-t-label);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ck-gold);
}
.ck-pp .ck-pp__more-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ck-ease);
}
.ck-pp .ck-pp__more.is-open .ck-pp__more-body { grid-template-rows: 1fr; }
.ck-pp .ck-pp__more-in { min-height: 0; overflow: hidden; }
.ck-pp .ck-pp__more .ck-pp__row { min-height: 56px; }
.ck-pp .ck-pp__more .ck-pp__row:last-child { border-bottom: 0; }
.ck-pp .ck-pp__reset {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ck-fg-45);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .ck-pp .ck-pp__reset:hover { color: var(--ck-fg); }
}

/* the answer: revenue − running costs = surplus, never one alone */
.ck-pp .ck-pp__eq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 10px;
}
.ck-pp .ck-pp__eq div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ck-pp .ck-pp__eq span { font-size: 12.5px; line-height: 1.3; color: var(--ck-fg-45); }
.ck-pp .ck-pp__eq b {
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 400;
  letter-spacing: -.015em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ck-pp .ck-pp__sum b { color: var(--ck-gold); }
.ck-pp .ck-pp__eq i { padding-bottom: 2px; font-size: 19px; font-style: normal; color: var(--ck-fg-45); }
/* the setup / recovery row belongs to the compact list only */
.ck-pp .ck-pp__eq .ck-pp__x { display: none; }

/* the recovery curve (drawn by the script; the viewBox is fixed, so it
   scales with the column) */
.ck-pp .ck-pp__chart { margin-top: 24px; }
.ck-pp .ck-pp__key {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: 10px;
  font-size: var(--ck-t-label);
  color: var(--ck-fg-45);
}
.ck-pp .ck-pp__key span::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: 0;
  background: rgba(242, 239, 234, .3);
}
.ck-pp .ck-pp__key .s::before { background: var(--ck-gold); }
.ck-pp .ck-pp__plot { width: 100%; height: auto; overflow: visible; }
.ck-pp .ck-pp__plot text { font-family: var(--ck-f-sans); font-size: 11px; fill: rgba(242, 239, 234, .5); }
/* the month tag: outlined gold, so it marks the point without shouting */
.ck-pp .ck-pp__plot .ck-pp__pill { font-weight: 500; letter-spacing: .02em; fill: #D3A447; }

.ck-pp .ck-pp__note {
  max-width: 64ch;
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ck-fg-45);
}
.ck-pp .ck-pp__note b { font-weight: 500; color: var(--ck-fg); }
.ck-pp .ck-pp__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  margin-top: 20px;
  padding: 0 24px;
  border-radius: var(--ck-r);
  background: var(--ck-gold);
  font-size: var(--ck-t-label);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #12100D;
  transition: background-color .25s ease;
}
.ck-pp .ck-pp__cta span { transition: transform .3s var(--ck-ease); }
@media (hover: hover) {
  .ck-pp .ck-pp__cta:hover { background: #C9962E; }
  .ck-pp .ck-pp__cta:hover span { transform: translate(2px, -2px); }
}

/* ---- ≤719 (and the phone copy): the compact list. The two halves drop out
   of the box tree so their parts can be ordered as one list: Reset moves
   below the button, everything else keeps its place. ---- */
@media (max-width: 719px) {
  .ck-pp .ck-pp__rail { padding-bottom: 22px; }
  .ck-pp .ck-pp__title { max-width: none; }
  .ck-pp .ck-pp__grid { display: flex; flex-direction: column; gap: 0; }
  .ck-pp .ck-pp__in,
  .ck-pp .ck-pp__out { display: contents; }
  .ck-pp .ck-pp__reset { order: 1; align-self: flex-start; margin-top: 14px; }
  .ck-pp .ck-pp__ctls { margin-top: 14px; }
  .ck-pp .ck-pp__row { min-height: 58px; }
  .ck-pp .ck-pp__lbl { font-size: 15px; }
  .ck-pp .ck-pp__stp button { width: 44px; height: 44px; }
  .ck-pp .ck-pp__stp b { min-width: 78px; font-size: 16.5px; }
  .ck-pp .ck-pp__more { margin-top: 10px; padding: 11px 13px; }
  .ck-pp .ck-pp__more-line { font-size: 13px; }
  .ck-pp .ck-pp__eq {
    display: block;
    margin-top: 16px;
    padding: 4px 14px;
    border-radius: 12px;
    background: var(--ck-lift);
    box-shadow: inset 0 0 0 1px var(--ck-line-soft);
  }
  .ck-pp .ck-pp__eq div,
  .ck-pp .ck-pp__eq .ck-pp__x {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ck-line-soft);
  }
  .ck-pp .ck-pp__eq .ck-pp__x { border-bottom: 0; }
  .ck-pp .ck-pp__eq i,
  .ck-pp .ck-pp__chart { display: none; }
  .ck-pp .ck-pp__eq span { font-size: 14px; color: var(--ck-fg-70); }
  .ck-pp .ck-pp__eq b { font-size: 17px; }
  .ck-pp .ck-pp__x span { font-size: 13px; }
  .ck-pp .ck-pp__x b { font-size: 14px; }
  .ck-pp .ck-pp__note { margin-top: 12px; font-size: 12px; }
  .ck-pp .ck-pp__cta { display: flex; justify-content: center; width: 100%; min-height: 52px; margin-top: 16px; }
}


/* --------------------------------------------------------------------------
   16. MOMENTS · the drifting photo wall
   Four columns of four photos each; the script lays each column's photos
   down twice, so -50% lands exactly on the copy and the loop has no seam.
   Even columns run the same drift in reverse. The title sits over the wall
   in exclusion, so every glyph paints the inverse of the photo under it.
   · ≥1000  four columns, a screen and a bit tall
   · ≤999   two columns, 69svh (the phone copy holds only two)
   · ≤719   an 8px frame instead of 16px
   -------------------------------------------------------------------------- */
.ck-gal {
  --ck-gal-gap: 16px;               /* between photos, across and down */
  --ck-gal-inset: var(--ck-gal-gap);
}
.ck-gal .section-content {
  height: clamp(620px, 115svh, 1320px);
  padding-block: 0;
  overflow: hidden;
  isolation: isolate;
}
.ck.section .row.ck-gal__cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ck-gal-gap);
  height: 100%;
  padding: var(--ck-gal-inset);
}
@media (min-width: 1000px) {
  .ck.section .row.ck-gal__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .ck-gal .section-content { height: clamp(372px, 69svh, 792px); }
  .ck.section .row.ck-gal__cols .col:nth-child(n+3) { display: none; }
}
@media (max-width: 719px) {
  .ck-gal { --ck-gal-inset: 8px; }
}
.ck.section .row.ck-gal__cols .col { min-height: 0; overflow: hidden; }
/* the column's inner box is the track; its trailing gap makes 8 photos + 8
   gaps, so -50% is exactly one set and one gap */
.ck.section .row.ck-gal__cols .col-inner {
  display: grid;
  gap: var(--ck-gal-gap);
  padding-bottom: var(--ck-gal-gap);
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .ck.section .row.ck-gal__cols.is-looping .col-inner { animation: ck-gal-drift 91s linear infinite; }
  .ck.section .row.ck-gal__cols.is-looping .col:nth-child(even) .col-inner { animation-direction: reverse; }
  @keyframes ck-gal-drift {
    to { transform: translateY(-50%); }
  }
}
/* !important: Flatsome writes each image's width inline */
.ck-gal .ck-gal__fig {
  width: 100% !important;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--ck-r);
  background: rgba(242, 239, 234, .05);
}
.ck-gal .ck-gal__fig .img-inner,
.ck-gal .ck-gal__fig img { width: 100%; height: 100%; }
.ck-gal .ck-gal__fig img { object-fit: cover; }

/* the title over the wall, in exclusion (the section content isolates it,
   so the blend stops at the section edge) */
.ck.section .row.ck-gal__over {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  max-width: none;
  text-align: center;
  pointer-events: none;
  mix-blend-mode: exclusion;
}
.ck-gal .ck-gal__t {
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.022em;
  color: #FFFFFF;
}
.ck-gal .ck-gal__t em { display: block; color: #FFFFFF; }
/* where the blend is unavailable the words take a solid plate */
@supports not (mix-blend-mode: exclusion) {
  .ck.section .row.ck-gal__over { mix-blend-mode: normal; }
  .ck-gal .ck-gal__t { padding: clamp(22px, 3vw, 40px) clamp(30px, 5vw, 72px); background: var(--ck-ink); }
  .ck-gal .ck-gal__t em { color: var(--ck-gold); }
}


/* --------------------------------------------------------------------------
   17. EXTENDED SERVICES · four add-ons, the words on the photograph
   In UX Builder: the heading (its side holds the sub and "Explore all
   services"); one full-width column holding four image boxes, in order.
   Each box's name is its link, stretched over the card.
   · ≥1040  bento: a wide lead card over two, a full-height card beside them
   · ≤1039  square cards, two across (one across below 600)
   · ≤899   no sub and no link
   · ≤599   the hero strip (the script), the words laid on the photo
   The one-line description stays folded until hover (always open on
   touch screens that can't hover).
   -------------------------------------------------------------------------- */
.ck.section .ck-sv__grid .col-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 1.7vw, 26px);
}
@media (min-width: 600px) {
  .ck.section .ck-sv__grid .col-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .ck.section .ck-sv__grid .col-inner { gap: clamp(8px, .9vw, 14px); }
}
@media (min-width: 1040px) {
  .ck.section .ck-sv__grid .col-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.12fr); }
  .ck-sv .ck-sv__card:nth-child(1) { grid-column: 1 / 3; grid-row: 1; min-height: 384px; }
  .ck-sv .ck-sv__card:nth-child(2) { grid-column: 1; grid-row: 2; }
  .ck-sv .ck-sv__card:nth-child(3) { grid-column: 2; grid-row: 2; }
  /* spans both rows, so it takes the pair's height */
  .ck-sv .ck-sv__card:nth-child(4) { grid-column: 3; grid-row: 1 / 3; min-height: 0; }
}

/* THE CARD · the photo fills it; a foot of ink under the words */
.ck-sv .ck-sv__card {
  position: relative;
  min-height: 288px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ck-r);
  background: #1A1712;
  color: #FFFFFF;
}
@media (max-width: 1039px) {
  .ck-sv .ck-sv__card { aspect-ratio: 1 / 1; min-height: 0; }
}
.ck-sv .ck-sv__card .box-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: rgba(242, 239, 234, .05);
}
.ck-sv .ck-sv__card .box-image div,
.ck-sv .ck-sv__card .box-image img { width: 100%; height: 100%; }
.ck-sv .ck-sv__card .box-image img { object-fit: cover; }
.ck-sv .ck-sv__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(18, 16, 13, .55) 0%, rgba(18, 16, 13, .24) 30%, rgba(18, 16, 13, 0) 55%);
}
.ck-sv .ck-sv__card .box-text {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(18px, 1.8vw, 26px);
  font-size: inherit;
  text-align: left;
  text-shadow: 0 1px 16px rgba(9, 13, 17, .6), 0 0 2px rgba(9, 13, 17, .35);
}
@media (prefers-reduced-motion: no-preference) {
  .ck-sv .ck-sv__card .box-image img { transition: transform .8s var(--ck-ease); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .ck-sv .ck-sv__card:hover .box-image img { transform: scale(1.045); }
}

.ck-sv .ck-sv__tag {
  display: block;
  font-size: var(--ck-t-label);
  font-weight: 500;
  line-height: var(--ck-lh-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ck-gold);
}
.ck-sv .ck-sv__row {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin-top: 9px;
}
.ck-sv .ck-sv__name {
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: #FFFFFF;
}
.ck-sv .ck-sv__go {
  flex: none;
  font-size: 16px;
  line-height: 1;
  color: var(--ck-gold);
}
@media (prefers-reduced-motion: no-preference) {
  .ck-sv .ck-sv__go { transition: transform .32s var(--ck-ease); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .ck-sv .ck-sv__card:hover .ck-sv__go { transform: translate(3px, -3px); }
}
/* the whole card is the link: the name's ::after is stretched over it */
.ck-sv .ck-sv__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
.ck-sv .ck-sv__link:focus-visible { outline: none; }
.ck-sv .ck-sv__card:has(.ck-sv__link:focus-visible) {
  outline: 2px solid var(--ck-gold);
  outline-offset: 4px;
}
.ck-sv .ck-sv__card:has(.ck-sv__link:focus-visible) .box-image img { transform: scale(1.045); }
.ck-sv .ck-sv__card:has(.ck-sv__link:focus-visible) .ck-sv__go { transform: translate(3px, -3px); }
.ck-sv .ck-sv__card:active { scale: .99; }

/* the line under the name, folded until hover (0fr to 1fr, so no height
   is guessed); the inner span is what collapses */
.ck-sv .ck-sv__desc {
  display: grid;
  grid-template-rows: 0fr;
  max-width: 32ch;
  margin-top: 0;
  opacity: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
  transition: grid-template-rows .45s var(--ck-ease), opacity .3s ease, margin-top .45s var(--ck-ease);
}
.ck-sv .ck-sv__desc span { display: block; min-height: 0; overflow: hidden; }
@media (hover: hover) {
  .ck-sv .ck-sv__card:hover .ck-sv__desc,
  .ck-sv .ck-sv__card:has(.ck-sv__link:focus-visible) .ck-sv__desc { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; }
}
@media (hover: none) {
  .ck-sv .ck-sv__desc { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; }
}

/* ---- ≤899: the heading alone ---- */
@media (max-width: 899px) {
  .ck-sv .ck-head__side { display: none; }
}

/* ---- ≤599 (desktop copy): a snap rail bled to the screen edges ---- */
@media (max-width: 599px) {
  .ck.section .ck-sv__grid .col-inner {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--ck-gut) * -1);
    padding: 0 var(--ck-gut) 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--ck-gut);
    overscroll-behavior-x: none;
    scrollbar-width: none;
  }
  .ck.section .ck-sv__grid .col-inner::-webkit-scrollbar { display: none; }
  .ck-sv .ck-sv__grid .ck-sv__card { flex: 0 0 82%; scroll-snap-align: start; aspect-ratio: 1 / 1; min-height: 0; }
  .ck-sv .ck-sv__desc { display: none; }
}

/* PHONE COPY · a UX Builder slider: one large square card and an 8% sliver
   of the next, the dashes under it. The tag and name sit on the photo over
   a deeper foot of ink, on one line; only the live card's words show, and
   the arriving photo settles from 6% larger (classes only).
   !important on the width: Flatsome sets every slide to 100% !important. */
.ck-sv .slider .ck-sv__card,
.ck-sv .flickity-slider .ck-sv__card {
  width: calc(92% - 6px) !important;
  margin: 0 6px 0 0;
  aspect-ratio: 1 / 1;
  min-height: 0;
}
.ck-sv .ck-sv__slider .ck-sv__card::after {
  background: linear-gradient(to top, rgba(12, 10, 8, .78), rgba(12, 10, 8, 0) 45%);
}
.ck-sv .ck-sv__slider .ck-sv__card .box-text {
  padding: 16px 16px 18px;
  white-space: nowrap;
}
.ck-sv .ck-sv__slider .ck-sv__row { margin-top: 3px; }
.ck-sv .ck-sv__slider .ck-sv__desc { display: none; }
.ck-sv .flickity-slider .ck-sv__card .box-text {
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.ck-sv .flickity-slider .ck-sv__card.is-selected .box-text {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s ease .2s, visibility 0s linear 0s;
}
.ck-sv .flickity-slider .ck-sv__card .box-image img { transition: transform .9s var(--ck-slide); }
.ck-sv .flickity-slider .ck-sv__card.is-selected ~ .ck-sv__card .box-image img { transform: scale(1.06); }
.ck-sv .slider .flickity-prev-next-button { display: none !important; }


/* --------------------------------------------------------------------------
   18. EXPERIENCE CENTRE · the calm zoom, half and half
   A pinned stage on snow. Scrolling zooms a dotted world to India (gold),
   then to Bangalore; the pin names itself and the photograph opens out of
   it as one circle in the right half (the top half below 900px) while the
   map fades behind the words.
   In UX Builder: one edge-to-edge row (the stage) with one column holding
   the map layer (HTML), the photograph (an image) and the words (HTML).
   The map and the motion come from campking-map.js (child theme, with d3,
   topojson and the two map data files). Without it, or inside the builder,
   the section is one screen tall and shows its finished state: photograph
   open, words in place, no map.
   · ≥900  photo in the right half, words on the left of the 1600px grid
   · ≤899  photo in the top half, words under it; no facts; 250vh of scroll
   -------------------------------------------------------------------------- */
.ck-cz {
  --ck-bg: #F4F5F7;
  --ck-cz-ink-70: rgba(20, 26, 31, .7);
  --ck-cz-ink-55: rgba(20, 26, 31, .55);
  --ck-cz-line:   rgba(20, 26, 31, .12);
  --ck-cz-gold-d: #8A6212;                  /* the darker gold, for words on snow */
  color: #141A1F;
}
.ck-cz .section-content { height: 100vh; height: 100svh; padding-block: 0; }
.ck-cz.is-live .section-content { height: 280vh; }
@media (max-width: 899px) {
  .ck-cz.is-live .section-content { height: 250vh; }
}

/* THE STAGE · one screen, pinned while the section scrolls under it. Its
   edge is the page's 1600px grid with this section's own gutter. */
.ck.section .row.ck-cz__stage {
  --ck-cz-edge: calc(max(0px, (100% - 1600px) / 2) + clamp(24px, 5vw, 80px));
  position: sticky;
  top: 0;
  display: block;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
/* the column and its inner box step aside, so every layer is placed on the stage */
.ck.section .row.ck-cz__stage .col,
.ck.section .row.ck-cz__stage .col-inner { position: static; height: 100%; }
.ck.section .row.ck-cz__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(115% 95% at 62% 50%, rgba(244, 245, 247, 0) 42%, rgba(244, 245, 247, .92) 100%);
}
.ck-cz .ck-cz__map { position: absolute; inset: 0; width: 100%; height: 100%; }

/* THE PHOTOGRAPH · the right half; the script clips it to the circle.
   !important: Flatsome writes the image's width inline. */
.ck-cz .ck-cz__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  z-index: 2;
  width: auto !important;
  margin: 0;
}
.ck-cz .ck-cz__photo .img-inner { position: absolute; inset: 0; overflow: hidden; }
/* The circle and the settle are driven every frame by the map script, so:
   the photograph gets a layer of its own (Safari otherwise flickers when a
   clip-path grows over a scaled picture), and Flatsome's own 1s fade-in and
   hover moves are switched off, since they ran against the script's
   frames and flashed as the photograph arrived */
.ck-cz .ck-cz__photo { transform: translateZ(0); will-change: clip-path; }
.ck-cz .ck-cz__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
  will-change: transform;
}

/* THE PIN · white core, gold ring (it reads on gold India), two pings */
.ck-cz .ck-cz__pin {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
}
.ck-cz .ck-cz__pin i {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px var(--ck-gold), 0 0 0 8px rgba(184, 132, 28, .2), 0 6px 16px rgba(20, 26, 31, .25);
}
.ck-cz .ck-cz__pin b {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 12px;
  height: 12px;
  border: 1px solid var(--ck-gold);
  border-radius: 50%;
  opacity: 0;
}
.ck-cz .ck-cz__pin span {
  position: absolute;
  top: -15px;
  left: 20px;
  padding: 6px 12px 7px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(20, 26, 31, .12);
  font-size: 11px;
  font-weight: 500;
  line-height: var(--ck-lh-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .5s, transform .5s;
}
.ck-cz .ck-cz__pin.is-named span { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .ck-cz .ck-cz__pin b { animation: ck-cz-ping 2.8s cubic-bezier(.2, .6, .3, 1) infinite; }
  .ck-cz .ck-cz__pin b + b { animation-delay: 1.4s; }
  @keyframes ck-cz-ping {
    0%        { transform: scale(.8); opacity: .9; }
    80%, 100% { transform: scale(6); opacity: 0; }
  }
}
.ck-cz .ck-cz__country {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  translate: -50% -50%;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--ck-f-accent);
  font-size: clamp(22px, 2.2vw, 32px);
  font-style: italic;
  color: var(--ck-cz-gold-d);
  opacity: 0;
}

/* THE WORDS · on the left of the 1600px grid, centred down the stage */
.ck-cz .ck-cz__copy {
  position: absolute;
  top: 50%;
  left: var(--ck-cz-edge);
  z-index: 5;
  width: min(460px, 38vw);
  transform: translateY(-50%);
  text-align: left;
}
.ck-cz .ck-cz__eyebrow { color: var(--ck-cz-gold-d); }
.ck-cz .ck-cz__title {
  margin-top: 16px;
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -.025em;
  color: #141A1F;
}
.ck-cz .ck-cz__title em { color: var(--ck-cz-gold-d); }
.ck-cz .ck-cz__lead {
  max-width: 40ch;
  margin-top: 18px;
  font-size: 16px;
  color: var(--ck-cz-ink-70);
}
.ck-cz .ck-cz__facts {
  display: flex;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--ck-cz-line);
}
.ck-cz .ck-cz__facts div { padding-right: 20px; }
.ck-cz .ck-cz__facts div + div { padding-left: 20px; border-left: 1px solid var(--ck-cz-line); }
.ck-cz .ck-cz__facts dt {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ck-cz-ink-55);
}
.ck-cz .ck-cz__facts dd { margin-top: 3px; font-size: 14.5px; white-space: nowrap; }
.ck-cz .ck-cz__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  margin-top: 26px;
}
/* filled CTA: rounded like the planner's; the text CTA keeps its gold rule */
.ck-cz .ck-cz__btn,
.ck-cz .ck-cz__ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ck-cz .ck-cz__btn {
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--ck-r);
  background: #141A1F;
  font-size: 12.5px;
  color: #FFFFFF;
  transition: background-color .25s;
}
.ck-cz .ck-cz__ghost {
  padding: 9px 0 8px;
  border-bottom: 2px solid var(--ck-gold);
  font-size: 12px;
  color: #141A1F;
}
.ck-cz .ck-cz__btn span,
.ck-cz .ck-cz__ghost span { font-size: 1.2em; line-height: 1; transition: transform .3s; }
@media (hover: hover) {
  .ck-cz .ck-cz__btn:hover { background: var(--ck-cz-gold-d); color: #FFFFFF; }
  .ck-cz .ck-cz__btn:hover span,
  .ck-cz .ck-cz__ghost:hover span { transform: translate(2px, -2px); }
}
.ck-cz .ck-cz__btn:active,
.ck-cz .ck-cz__ghost:active { scale: .97; }

/* the card that names the place, bottom right once the photo is open */
.ck-cz .ck-cz__chip {
  position: absolute;
  right: var(--ck-cz-edge);
  bottom: clamp(24px, 5vh, 48px);
  z-index: 6;
  display: grid;
  gap: 1px;
  padding: 9px 14px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(20, 26, 31, .15);
  line-height: var(--ck-lh-body);
}
.ck-cz .ck-cz__chip strong {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.ck-cz .ck-cz__chip small { font-size: 11px; color: var(--ck-cz-ink-55); }

/* "Scroll to find us", with a gold drip; only while the map runs */
.ck-cz .ck-cz__hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ck-cz-ink-55);
}
.ck-cz.is-live .ck-cz__hint { display: flex; }
.ck-cz .ck-cz__hint i {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--ck-gold), rgba(184, 132, 28, 0));
}
@media (prefers-reduced-motion: no-preference) {
  .ck-cz .ck-cz__hint i { animation: ck-cz-drip 1.8s cubic-bezier(.65, 0, .35, 1) infinite; }
  @keyframes ck-cz-drip {
    0%   { transform: scaleY(0); transform-origin: top; }
    50%  { transform: scaleY(1); transform-origin: top; }
    51%  { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
  }
}

/* ---- ≤899: the same idea on its side; the photo on top, the words under ---- */
@media (max-width: 899px) {
  .ck-cz .ck-cz__photo { right: 0; bottom: auto; left: 0; height: 46%; }
  .ck-cz .ck-cz__copy {
    top: calc(46% + 28px);
    bottom: auto;
    width: calc(100% - 2 * var(--ck-cz-edge));
    transform: none;
  }
  .ck-cz .ck-cz__title { font-size: 34px; }
  .ck-cz .ck-cz__lead { margin-top: 12px; font-size: 15.5px; }
  .ck-cz .ck-cz__facts { display: none; }
  .ck-cz .ck-cz__acts { margin-top: 18px; }
  .ck-cz .ck-cz__hint { top: 22px; bottom: auto; }
  .ck-cz .ck-cz__chip { top: auto; right: 16px; bottom: calc(54% + 14px); }
  .ck-cz .ck-cz__chip small { display: none; }
}


/* --------------------------------------------------------------------------
   19. RECOGNITION · a centred line over a full-bleed rail of logo boxes
   In UX Builder: the line (HTML) in the page container; an edge-to-edge row
   holding the rail (HTML): one row of boxes, which the script repeats four
   times and drifts (88s a cycle, paused on hover).
   Every mark sits in its own box, 2:1, the same size whatever is inside,
   so a wide wordmark and a square badge line up. To add a logo, put an
   inline SVG (currentColor) or a light img inside a .ck-bl__slot, in
   place of the word "Logo", at about 60% of the box.
   -------------------------------------------------------------------------- */
.ck-bl {
  --ck-bl-gap: clamp(10px, 1vw, 16px);       /* between boxes AND between the rows */
  --ck-bl-box: #1A1814;
  --ck-bl-box-hover: #221F1A;
  --ck-bl-edge: rgba(242, 239, 234, .09);
  --ck-fg-45: rgba(242, 239, 234, .56);
  --ck-line: rgba(242, 239, 234, .16);
}
.ck-bl .section-content { padding-block: var(--ck-sec-y-s); }
.ck-bl .ck-bl__head { margin-bottom: clamp(16px, 1.5vw, 22px); text-align: center; }
.ck-bl .ck-bl__t {
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.28;
  letter-spacing: -.018em;
}
.ck-bl .ck-bl__t span { display: block; font-weight: 300; color: var(--ck-fg-45); }
.ck-bl .ck-bl__t b { display: block; font-weight: 500; color: var(--ck-fg); }

/* the rules run the full width; only the boxes fade at the edges (a mask,
   so it needs no matching ground) */
.ck.section .row.ck-bl__rail {
  display: block;
  padding-block: clamp(15px, 1.7vw, 24px);
  border-block: 1px solid var(--ck-line);
}
.ck-bl .ck-bl__view {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.ck-bl .ck-bl__track {
  display: flex;
  align-items: center;
  gap: var(--ck-bl-gap);
  width: max-content;
}
@media (prefers-reduced-motion: no-preference) {
  .ck-bl .ck-bl__track.is-looping { animation: ck-bl-drift 88s linear infinite; }
  @keyframes ck-bl-drift {
    to { transform: translateX(-50%); }
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .ck-bl .ck-bl__rail:hover .ck-bl__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-bl .ck-bl__view { overflow-x: auto; }
}
.ck-bl .ck-bl__row {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--ck-bl-gap);
}
.ck-bl .ck-bl__mark,
.ck-bl .ck-bl__slot {
  display: grid;
  flex: none;
  place-items: center;
  width: clamp(124px, 12vw, 204px);
  aspect-ratio: 2 / 1;
  padding: 0 12px;
  border-radius: var(--ck-r);
  background: var(--ck-bl-box);
  box-shadow: inset 0 0 0 1px var(--ck-bl-edge);
  text-align: center;
  transition: background-color .35s ease, box-shadow .35s ease, color .3s ease;
}
@media (hover: hover) {
  .ck-bl .ck-bl__mark:hover,
  .ck-bl .ck-bl__slot:hover { background: var(--ck-bl-box-hover); box-shadow: inset 0 0 0 1px rgba(184, 132, 28, .55); }
  .ck-bl .ck-bl__mark:hover { color: var(--ck-fg); }
}
/* placeholder wordmark (flex, so "Forbes" and its em stay on one line) */
.ck-bl .ck-bl__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  font-size: clamp(13px, 1.2vw, 17px);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ck-fg-45);
}
.ck-bl .ck-bl__mark em { letter-spacing: .02em; text-transform: none; }
/* empty slots stay visibly empty: an unverified name here reads as a claim */
.ck-bl .ck-bl__slot {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(242, 239, 234, .28);
}
.ck-bl .ck-bl__slot img,
.ck-bl .ck-bl__slot svg { max-width: 60%; max-height: 60%; }


/* --------------------------------------------------------------------------
   20. FAQ · a numbered accordion beside a product shot
   In UX Builder: a row of two columns. The left holds the heading (HTML)
   and the questions (one HTML element: a list of details elements, each a
   number, question and answer). The right holds the picture (an image).
   To add a question, copy one details block inside the list and change
   its number and words.
   The script takes the toggle over for a soft unfold (the answer's height
   opens, a short gold rule draws out, the words rise into place), one
   answer open at a time. Without it each question still opens and shuts.
   · ≥1000  list left, picture right; the picture's foot sits level with
            the last question's rule with every answer closed (the script)
   · ≤999   stacked, the picture under the list
   · ≤899   no picture and no sub
   -------------------------------------------------------------------------- */
.ck.section .row.ck-faq__grid {
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
@media (min-width: 1000px) {
  .ck.section .row.ck-faq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
.ck-faq .ck-faq__sub { max-width: 46ch; margin-top: var(--ck-gap-sub); }
.ck-faq .ck-num { font-variant-numeric: tabular-nums; }

/* THE LIST · one HTML element holding a details element per question, a
   hairline over the list and under each question */
.ck-faq .ck-faq__list {
  margin-top: clamp(30px, 3.6vw, 54px);
  border-top: 1px solid var(--ck-line-soft);
}
.ck-faq .ck-faq__item { border-bottom: 1px solid var(--ck-line-soft); }
.ck-faq .ck-faq__q {
  display: grid;
  grid-template-columns: clamp(38px, 3.4vw, 54px) minmax(0, 1fr) 20px;
  align-items: baseline;
  gap: 0 12px;
  padding: clamp(16px, 1.8vw, 22px) 0;
  list-style: none;
  cursor: pointer;
}
.ck-faq .ck-faq__q::-webkit-details-marker { display: none; }
.ck-faq .ck-faq__q::marker { content: ""; }
.ck-faq .ck-faq__no {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ck-fg-45);
  transition: color .25s ease;
}
.ck-faq .ck-faq__text {
  font-size: clamp(16.5px, 1.35vw, 19px);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -.01em;
  transition: color .25s ease;
}
/* + drawn from two rules; the upright one turns flat into a minus when open */
.ck-faq .ck-faq__mark {
  position: relative;
  align-self: center;
  justify-self: end;
  width: 13px;
  height: 13px;
  color: var(--ck-fg-45);
  transition: color .25s ease;
}
.ck-faq .ck-faq__mark::before,
.ck-faq .ck-faq__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform .3s var(--ck-ease);
}
.ck-faq .ck-faq__mark::after { transform: rotate(90deg); }
/* the whole row answers a hover or a focus, not just the words */
@media (hover: hover) {
  .ck-faq .ck-faq__q:hover .ck-faq__text,
  .ck-faq .ck-faq__q:hover .ck-faq__no,
  .ck-faq .ck-faq__q:hover .ck-faq__mark { color: var(--ck-gold); }
}
.ck-faq .ck-faq__q:focus-visible { outline-offset: 4px; }
.ck-faq .ck-faq__q:focus-visible .ck-faq__text,
.ck-faq .ck-faq__q:focus-visible .ck-faq__no,
.ck-faq .ck-faq__q:focus-visible .ck-faq__mark { color: var(--ck-gold); }
/* open: .is-open while the script runs (it flips at the click, so a closing
   answer's mark turns back at once), [open] without it */
.ck-faq .ck-faq__item.is-open .ck-faq__mark,
.ck-faq .ck-faq__item.is-open .ck-faq__no,
.ck-faq:not(.is-js) .ck-faq__item[open] .ck-faq__mark,
.ck-faq:not(.is-js) .ck-faq__item[open] .ck-faq__no { color: var(--ck-gold); }
.ck-faq .ck-faq__item.is-open .ck-faq__mark::after,
.ck-faq:not(.is-js) .ck-faq__item[open] .ck-faq__mark::after { transform: rotate(0deg); }

/* THE ANSWER · under the question, not the number; a short gold rule on top */
.ck-faq .ck-faq__a {
  max-width: 60ch;
  padding: 0 0 clamp(20px, 2.2vw, 28px) calc(clamp(38px, 3.4vw, 54px) + 12px);
  font-size: 15px;
  line-height: 1.62;
  color: var(--ck-fg-70);
}
.ck-faq .ck-faq__a::before {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin-bottom: clamp(14px, 1.6vw, 20px);
  background: var(--ck-gold);
}
.ck-faq .ck-faq__a p + p { margin-top: .7em; }
/* phone copy: the hairlines keep the page's 10px edge like every section,
   but the numbers, questions, answers and the + come 8px in on each side.
   Elsewhere the words near the edge sit inside photos, cards and panels
   with room of their own; here they ran to the edge and read cramped. */
.ck-faq.ck--phone .ck-faq__q { padding-inline: 8px; }
.ck-faq.ck--phone .ck-faq__a { padding-inline: calc(clamp(38px, 3.4vw, 54px) + 12px + 8px) 8px; }

/* SOFT UNFOLD (the script wraps each answer in .ck-faq__pn): the height
   opens 0fr to 1fr so the questions below glide, the rule draws out, then
   the words rise 8px. Closing runs it back, quicker. */
.ck-faq .ck-faq__pn {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.65, 0, .35, 1);
}
.ck-faq .ck-faq__item.is-open .ck-faq__pn { grid-template-rows: 1fr; }
.ck-faq .ck-faq__pn-in { min-height: 0; overflow: hidden; }
/* With the script, the answer's height is stepped by it in whole pixels
   (same .5s and curve). The 0fr to 1fr transition moved everything under
   the answer by fractions of a pixel each frame, and on phones the
   questions below shimmered as their text snapped between pixel rows. */
.ck-faq.is-px .ck-faq__pn { display: block; height: 0; overflow: hidden; transition: none; }
.ck-faq.is-px .ck-faq__item.is-open .ck-faq__pn { height: auto; }
/* No scroll anchoring in the two sections that change while you watch:
   Android Chrome nudges the scroll position whenever something on screen
   changes size, and against an opening answer or the pinned map stage
   those tiny corrections read as the section shivering. */
.ck-faq, .ck-cz { overflow-anchor: none; }
/* iPhone (Safari): text that fades or moves is lifted onto a layer of its
   own while it animates and dropped back when it stops, and the redraw at
   that moment shows as a shiver. The answers' words and the map's moving
   pieces keep their layer for good, so nothing is redrawn when they settle. */
.ck-faq.is-js .ck-faq__a p,
.ck-cz .ck-cz__rest,
.ck-cz .ck-cz__pin,
.ck-cz .ck-cz__country,
.ck-cz .ck-cz__chip,
.ck-cz .ck-cz__hint {
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.ck-faq.is-js .ck-faq__a::before { width: 0; transition: width .4s var(--ck-ease); }
.ck-faq.is-js .ck-faq__item.is-open .ck-faq__a::before { width: 34px; transition: width .5s var(--ck-ease) .18s; }
.ck-faq.is-js .ck-faq__a p {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .35s var(--ck-ease);
}
.ck-faq.is-js .ck-faq__item.is-open .ck-faq__a p {
  opacity: 1;
  transform: none;
  transition: opacity .45s ease .28s, transform .6s var(--ck-ease) .28s;
}

/* THE PICTURE · a cut-out render, so no ground and no crop: 3:2 to match
   it, contain. It stays put when an answer opens (the script sets its top
   margin once). !important: Flatsome writes the image's width inline. */
.ck-faq .ck-faq__media {
  width: 100% !important;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ck-r);
}
.ck-faq .ck-faq__media .img-inner,
.ck-faq .ck-faq__media img { width: 100%; height: 100%; }
.ck-faq .ck-faq__media img { object-fit: contain; object-position: center; }

/* ---- ≤899: the list alone ---- */
@media (max-width: 899px) {
  .ck.section .row.ck-faq__grid .col:nth-child(2),
  .ck-faq .ck-faq__sub { display: none; }
  .ck-faq .ck-faq__item.is-open .ck-faq__no,
  .ck-faq:not(.is-js) .ck-faq__item[open] .ck-faq__no { color: var(--ck-fg); }
}


/* --------------------------------------------------------------------------
   ·· TOUCH SCREENS · smooth swipes on every phone
   A blurred backdrop has to be redrawn on every frame when the photo under
   it moves. The tent chip and the pod and amenity tags ride on the sliding
   photos, and the process chip sits on photos that slide under it, so on
   mid-range phones a swipe dropped frames. On touch screens they take a
   slightly deeper solid tint instead, which reads the same.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .ck-sc .ck-sc__chip,
  .ck-am .ck-am__tag,
  .ck-proc .ck-proc__over {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .ck-sc .ck-sc__chip    { background: rgba(18, 16, 13, .6); }
  .ck-am .ck-am__tag     { background: rgba(18, 16, 13, .76); }
  .ck-proc .ck-proc__over { background: rgba(18, 16, 13, .7); }
  /* Services: a press used to shrink the card a little, so every swipe
     began with a hitch while the card redrew; and the names' wide soft glow
     was redrawn on every frame of the slide. On touch: no press shrink, and
     a tight shadow (the dark foot under the words already carries them). */
  .ck-sv .ck-sv__card:active { scale: none; }
  .ck-sv .ck-sv__card .box-text { text-shadow: 0 1px 3px rgba(9, 13, 17, .55); }
}


/* --------------------------------------------------------------------------
   ·· PHONE SWIPERS · one feel for all of them
   Tents, pods, amenities and services each had their own timing (the tents'
   words waited .28s and took .6s; every arriving photo took .9s to settle
   on a slow-starting curve), so each swiper felt different and some felt
   late. Below 720px they now share one: the old words go in .14s, the new
   ones come in over .26s at once, and the arriving photo settles from 4%
   larger in .55s on a quick-starting curve. With the sliders' own pace
   (the script's "slider feel") every swipe is at rest in about half a
   second, on every swiper alike.
   -------------------------------------------------------------------------- */
@media (max-width: 719px) {
  .ck {
    --ck-sw-out: .14s;
    --ck-sw-in: .26s;
    --ck-sw-settle: .55s;
  }
  /* the words: out. The tents are not here: they fade as whole slides now
     (section 9), so there is no per-word opacity left to time. */
  .ck.ck-am .flickity-slider .ck-am__card :is(.ck-am__name, .ck-am__foot),
  .ck.ck-sv .flickity-slider .ck-sv__card .box-text {
    transition: opacity var(--ck-sw-out) ease, visibility 0s linear var(--ck-sw-out);
  }
  /* the words: in, straight away */
  .ck.ck-am .flickity-slider .ck-am__card.is-selected :is(.ck-am__name, .ck-am__foot),
  .ck.ck-sv .flickity-slider .ck-sv__card.is-selected .box-text {
    transition: opacity var(--ck-sw-in) ease 0s, visibility 0s linear 0s;
  }
  /* the arriving photo settles */
  .ck.ck-sc .flickity-slider .ck-sc__slide img,
  .ck.ck-am .flickity-slider .ck-am__card .box-image img,
  .ck.ck-sv .flickity-slider .ck-sv__card .box-image img {
    transition: transform var(--ck-sw-settle) var(--ck-ease);
  }
  .ck.ck-sc .flickity-slider .ck-sc__slide.is-selected ~ .ck-sc__slide img,
  .ck.ck-am .flickity-slider .ck-am__card.is-selected ~ .ck-am__card .box-image img,
  .ck.ck-sv .flickity-slider .ck-sv__card.is-selected ~ .ck-sv__card .box-image img {
    transform: scale(1.04);
  }
  /* the tents' panel under the photos: the same pace for its cross-fade */
  .ck.ck-sc .ck-sc__panel-in { transition: opacity var(--ck-sw-in) ease, transform .32s var(--ck-ease); }
  .ck.ck-sc .ck-sc__panel-in.is-out { transition-duration: var(--ck-sw-out), .2s; }
  .ck.ck-sc .ck-sc__panel-in.is-in  { transition: none; }
}


/* --------------------------------------------------------------------------
   ·· PHONE STRIPS · the hero carousel (tents, pods, amenities, services)
   The script builds the strip from the phone copy's own slides and drives
   it (see PHONE STRIPS in the footer script); these rules are only its
   frame. .has-hs is set once the strip exists, so without the script the
   phone keeps Flatsome's slider. One large card and a 14% sliver of the
   next; a transparent native scroller over the cards supplies momentum
   and one-card snapping.
   -------------------------------------------------------------------------- */
.ck--phone.has-hs .slider-wrapper { display: none !important; }
.ck .ck-hs { position: relative; overflow: hidden; }
.ck .ck-hs__stage { position: absolute; inset: 0; pointer-events: none; }
.ck .ck-hs__card {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  border-radius: var(--ck-r);
  background: var(--ck-line-soft);
  will-change: transform, width;
}
/* the photograph is the strip's full width, centred by the script, so the
   card's edges sweep across it (max-width: none against the theme's 100%) */
.ck .ck-hs__card img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
.ck .ck-hs__scroll {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: none;
  scrollbar-width: none;
  -webkit-tap-highlight-color: transparent;
}
.ck .ck-hs__scroll::-webkit-scrollbar { display: none; }
/* A mouse cannot scroll this by itself, so the script carries it (see MOUSE
   DRAG). The cursor says so, and only where there is a real pointer to say
   it to. While the button is down the snap points are off: the script is
   setting the position every frame, and mandatory snapping pulls against
   it, which makes the drag feel sticky. */
@media (hover: hover) and (pointer: fine) {
  .ck .ck-hs__scroll { cursor: grab; }
  .ck .ck-hs__scroll.is-dragging { cursor: grabbing; }
}
.ck .ck-hs__scroll.is-dragging { scroll-snap-type: none; }
.ck .ck-hs__track { position: relative; height: 100%; }
.ck .ck-hs__track i {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* tents: the chip stays put on the strip, over the scroller */
.ck-sc .ck-hs .ck-sc__chip { z-index: 4; }
/* pods and amenities: the live card's words under the strip; they leave in
   .18s with a small lift and the next card's come in */
.ck .ck-hs__info { position: relative; }
.ck .ck-hs__info .ck-am__name { margin-top: 14px; }
/* the detail line is not named here: it sits inside .ck-am__foot now, so it
   already leaves with it. Naming it as well moved it twice (the transforms
   compound on a nested element), and it drifted 8px while the rest went 4. */
.ck .ck-hs__info .ck-am__name,
.ck .ck-hs__info .ck-am__foot { transition: opacity .18s ease, transform .18s ease; }
.ck .ck-hs__info.is-swap .ck-am__name,
.ck .ck-hs__info.is-swap .ck-am__foot { opacity: 0; transform: translateY(-4px); }
/* services: the words stay on the photograph, over a deeper foot of ink */
.ck-sv .ck-hs__ov {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 16px 16px 18px;
  white-space: nowrap;
  background: linear-gradient(to top, rgba(12, 10, 8, .78), rgba(12, 10, 8, 0));
  color: #FFFFFF;
}
.ck-sv .ck-hs__ov .ck-sv__tag { display: block; }
.ck-sv .ck-hs__ov .ck-sv__row { margin-top: 3px; }
/* the dashes under the strip, drawn as the sliders' own */
.ck .ck-hs__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 23px;
}
.ck .ck-hs__dots button {
  display: block;
  width: 38px;
  min-height: 0;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  line-height: 1;
  cursor: pointer;
}
.ck .ck-hs__dots button::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--ck-line);
  transition: background-color .4s ease;
}
.ck .ck-hs__dots button[aria-current="true"]::before { background: var(--ck-fg); }


/* --------------------------------------------------------------------------
   ·· MOMENTS, PHONE COPY · a taller wall, and a title that always reads
   The wall takes 90% of the screen. The title keeps a blend, but
   luminosity instead of exclusion: each letter takes the colour of the
   photo under it at a fixed brightness, so it tints with the wall as it
   drifts and never sinks into a mid-tone photo, as exclusion did. A soft
   shade sits under the words (its own layer, below the blended title):
   60% at the centre, fading out within about a third of the section.
   Where the blend is unavailable the words are plain light over the shade.
   -------------------------------------------------------------------------- */
.ck-gal.ck--phone .section-content {
  position: relative;
  height: clamp(520px, 90svh, 900px);
}
/* 16px of dark above and below the wall (where the drifting photos are cut
   off), 8px at the sides */
.ck.ck-gal.ck--phone .row.ck-gal__cols { padding-block: 16px; }
.ck-gal.ck--phone .section-content::before {
  content: "";
  position: absolute;
  top: 33%;
  left: 2%;
  z-index: 1;
  width: 96%;
  height: 34%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(12, 10, 8, .6), rgba(12, 10, 8, .42) 45%, rgba(12, 10, 8, .14) 75%, rgba(12, 10, 8, 0));
}
.ck.ck-gal.ck--phone .row.ck-gal__over { mix-blend-mode: luminosity; }
.ck-gal.ck--phone .ck-gal__t,
.ck-gal.ck--phone .ck-gal__t em { color: #F4E9D6; }
@supports not (mix-blend-mode: luminosity) {
  .ck.ck-gal.ck--phone .row.ck-gal__over { mix-blend-mode: normal; }
}


/* --------------------------------------------------------------------------
   ·· REDUCED MOTION
   Nothing drifts, fills or glides: as on the page, every animation and
   transition inside a Campking section is switched off (!important, so it
   also outranks each section's own timings). What that leaves:
   · the hero keeps its first slide until a bar or an arrow is used
   · the ticker and the logo rail become rows you can scroll; the About
     photos and the Moments wall stand still (the script adds no copies)
   · the card rails still snap, but without the smooth glide, the spring or
     the soft crop
   · the experience centre jumps between the world and the finished frame
   · the FAQ and the service lines open at once
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ck *,
  .ck *::before,
  .ck *::after {
    animation: none !important;
    transition: none !important;
  }
  .ck-hero .flickity-page-dots .dot.is-selected::after { transform: none; }
  .ck-ticker .ck-ticker__view { overflow-x: auto; }
  .ck-am .ck-am__track { scroll-behavior: auto; }
  .ck-sv .ck-sv__card:has(.ck-sv__link:focus-visible) .box-image img { transform: none; }
}