/* =============================================================================
 * Creytix Site Kit — PREMIUM BASE TEMPLATE
 * The award-tier starter every brand rebuilds on. Consumes the design-token
 * SSOT (--ctx-color-*, --ctx-font-*, --ctx-type-*, --ctx-space-*, --ctx-leading-*,
 * --ctx-tracking-*, --ctx-measure-*) so ANY brand themes it by swapping one
 * `.brand-<slug>` token sheet. No hard-coded brand colors, no hard-coded fonts.
 *
 * Built to the rubric in docs/creytix/CREYTIX_DESIGN_COMPETITIVENESS_GAP.md §2.2:
 * one bold idea, huge confident type, art-directed full-bleed zones, generous
 * negative space, intentional asymmetry, choreographed motion (designed-in via
 * creytix-motion data-cx-motion), premium micro-detail.
 *
 * Namespacing: every class is `.ck-*` (Creytix Kit). Motion is applied via
 * `data-cx-motion` (creytix-motion, vendored in assets/motion.css).
 * =========================================================================== */

/* ----------------------------------------------------------------------------
 * 0 · Template-local design constants (derived from tokens where possible;
 *     these are the "premium micro-detail" system — one radius scale, one
 *     shadow depth, one hairline, one motif — applied consistently everywhere).
 * -------------------------------------------------------------------------- */
:root {
  /* Radii — one consistent scale (the "expensive read" is consistency). */
  --ck-radius-sm: 8px;
  --ck-radius: 16px;
  --ck-radius-lg: 28px;
  --ck-radius-pill: 999px;

  /* Hairline — always the brand border token, never a random grey. */
  --ck-hairline: color-mix(in srgb, var(--ctx-color-primary-text, #111) 14%, transparent);

  /* Shadow depth — one soft, one lifted. Tuned for dark AND light shells. */
  --ck-shadow: 0 1px 2px rgba(0,0,0,.10), 0 12px 32px -12px rgba(0,0,0,.30);
  --ck-shadow-lift: 0 2px 6px rgba(0,0,0,.14), 0 28px 64px -20px rgba(0,0,0,.45);

  /* Section vertical rhythm — fluid, generous. Sections BREATHE. */
  --ck-section-y: clamp(5rem, 3rem + 9vw, 11rem);
  --ck-gutter: clamp(1.25rem, 0.5rem + 4vw, 4.5rem);
  --ck-maxw: 84rem;
  --ck-maxw-prose: var(--ctx-measure-base, 66ch);

  /* Photo-treatment tokens — promoted from Villas Campestre's brand-local
   * --photo-filter/--photo-tint into the shared kit. A real full-bleed photo
   * drops into any .ck-media and inherits ONE consistent grade across the set. */
  --ck-photo-filter: saturate(1.05) contrast(1.04) brightness(0.92);
  --ck-photo-tint: color-mix(in srgb, var(--ctx-color-brand-accent, #c9a24b) 18%, transparent);

  /* Focus ring — accessible, on-brand. */
  --ck-focus: 0 0 0 3px color-mix(in srgb, var(--ctx-color-brand-accent, #c9a24b) 55%, transparent);
}

/* ----------------------------------------------------------------------------
 * 1 · Reset + document base
 * -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* Neutral fallback only — the THEMED background/color/font live on .ck-shell,
   * which carries the `.brand-<slug>` class so every --ctx-* var resolves in
   * scope. (Setting them on body would fall back to defaults, because the
   * tokens are defined on body's CHILD, not on body itself — that inverted
   * heading contrast on light brands.) */
  background: #0b0f14;
  font-size: var(--ctx-type-body, 1.0625rem);
  line-height: var(--ctx-leading-body, 1.6);
  font-weight: 420;
  letter-spacing: var(--ctx-tracking-normal, 0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Editorial CSS micro-layer (CREYTIX_AWARD_TIER_RESEARCH §2 row 7, §3 add 1) —
   * near-zero-cost, progressive-enhancement, kit-wide. Unsupported browsers
   * ignore each declaration individually; nothing here has a layout fallback
   * to maintain. */
  font-optical-sizing: auto; /* variable-font display/caption get size-correct letterforms "for free" */
  text-wrap: pretty; /* kills widows in body copy; inherits down to every <p> */
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: none; box-shadow: var(--ck-focus); border-radius: var(--ck-radius-sm); }
::selection { background: var(--ctx-color-brand-accent, #c9a24b); color: var(--ctx-color-background, #0b0f14); }

/* ----------------------------------------------------------------------------
 * 2 · Typographic system — every role maps to a TYPE_SCALE step. Display faces
 *     use the brand's --ctx-font-display; body uses --ctx-font-body. Huge,
 *     confident, tightly-tracked headings; open, readable body.
 * -------------------------------------------------------------------------- */
.ck-display,
.ck-h1, .ck-h2, .ck-h3 {
  font-family: var(--ctx-font-display, Georgia, serif);
  font-weight: 500;
  line-height: var(--ctx-leading-display, 1.04);
  letter-spacing: var(--ctx-tracking-tight, -0.02em);
  text-wrap: balance;
  margin: 0;
}
/* Fraunces' optical-size axis ("opsz") — at display scale it should read as the
   bolder, higher-contrast cut the type family draws for large sizes, not the
   same shapes as body text just scaled up. Complements font-weight (wght axis)
   rather than overriding it. */
.ck-display { font-size: var(--ctx-type-display, clamp(3rem, 8vw, 8rem)); letter-spacing: var(--ctx-tracking-tighter, -0.03em); line-height: var(--ctx-leading-tight, 0.98); font-variation-settings: "opsz" 144; }
.ck-h1 { font-size: var(--ctx-type-h1, clamp(2.5rem, 5vw, 5rem)); }
.ck-h2 { font-size: var(--ctx-type-h2, clamp(2rem, 3vw, 3.5rem)); line-height: var(--ctx-leading-heading, 1.12); }
.ck-h3 { font-size: var(--ctx-type-h3, clamp(1.6rem, 2vw, 2.375rem)); line-height: var(--ctx-leading-heading, 1.12); letter-spacing: var(--ctx-tracking-tight, -0.02em); }
.ck-h4 { font-family: var(--ctx-font-display, Georgia, serif); font-size: var(--ctx-type-h4, 1.5rem); font-weight: 500; line-height: var(--ctx-leading-snug, 1.1); margin: 0; text-wrap: balance; }

.ck-lead {
  font-size: var(--ctx-type-body-lg, 1.375rem);
  line-height: var(--ctx-leading-relaxed, 1.6);
  color: color-mix(in srgb, var(--ctx-color-primary-text, #f4efe6) 82%, transparent);
  max-width: var(--ctx-measure-base, 66ch);
  font-weight: 400;
  text-wrap: pretty;
}
.ck-body { max-width: var(--ctx-measure-base, 66ch); text-wrap: pretty; }
.ck-body p + p { margin-top: 1em; }

/* Hanging punctuation — optical margin so opening quotes sit outside the
 * measure instead of visually indenting the line (Safari-only today; other
 * engines ignore the property and read exactly as before — no fallback
 * needed). Scoped to prose/quote copy, not headings/UI labels. */
.ck-lead, .ck-body, .ck-testimonial__quote, blockquote {
  hanging-punctuation: first;
}

/* Drop cap — `initial-letter` sunk 3 lines into the paragraph it opens.
 * Opt-in: add .ck-dropcap to the first <p> of an editorial/article block.
 * `-webkit-initial-letter` covers Safari's older two-value syntax; other
 * engines that support neither simply render a normal first letter. */
.ck-dropcap::first-letter {
  initial-letter: 3;
  -webkit-initial-letter: 3;
  font-family: var(--ctx-font-display, Georgia, serif);
  font-weight: 600;
  color: var(--ctx-color-brand-accent, #c9a24b);
  padding-right: 0.08em;
}

/* Overline / eyebrow / small-caps label — a repeated system element. */
.ck-overline {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--ctx-font-body, system-ui, sans-serif);
  font-size: var(--ctx-type-overline, 0.75rem);
  font-weight: 600;
  letter-spacing: var(--ctx-tracking-overline, 0.18em);
  text-transform: uppercase;
  color: var(--ctx-color-brand-accent, #c9a24b);
  margin: 0 0 clamp(1rem, 2vw, 1.75rem);
}
/* Signature motif: a short accent tick that precedes every overline. */
.ck-overline::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.8;
}

.ck-accent { color: var(--ctx-color-brand-accent, #c9a24b); }
/* Editorial italic emphasis for display serifs (Zodiak/Fraunces/Instrument). */
.ck-emph { font-style: italic; font-weight: 500; }

/* Numerals — tabular, huge, for stat rows. */
.ck-stat-num {
  display: block;
  font-family: var(--ctx-font-display, Georgia, serif);
  font-size: clamp(3rem, 1.5rem + 6vw, 6rem);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: var(--ctx-tracking-tighter, -0.03em);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------
 * 3 · Layout primitives — the grid + intentional asymmetry
 * -------------------------------------------------------------------------- */
/* THE brand-scoped root — carries `.brand-<slug>`, so every --ctx-* resolves
 * here and cascades correctly (background, text color, body font). */
.ck-shell {
  width: 100%;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--ctx-color-background, #0b0f14);
  color: var(--ctx-color-primary-text, #f4efe6);
  font-family: var(--ctx-font-body, system-ui, sans-serif);
}
.ck-container {
  width: 100%;
  max-width: var(--ck-maxw);
  margin-inline: auto;
  padding-inline: var(--ck-gutter);
}
.ck-section { padding-block: var(--ck-section-y); position: relative; }
.ck-section--tight { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }

/* Bleed: a section that runs edge-to-edge (full-bleed art direction). */
.ck-bleed { max-width: none; padding-inline: 0; }

/* 12-col grid for intentional asymmetry. */
.ck-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--ck-gutter); }
.ck-col-7 { grid-column: span 7; }
.ck-col-5 { grid-column: span 5; }
.ck-col-6 { grid-column: span 6; }
.ck-col-8 { grid-column: span 8; }
.ck-col-4 { grid-column: span 4; }
.ck-offset-1 { grid-column-start: 2; }
@media (max-width: 860px) {
  .ck-grid { grid-template-columns: 1fr; }
  .ck-col-7, .ck-col-5, .ck-col-6, .ck-col-8, .ck-col-4 { grid-column: 1 / -1; }
  .ck-offset-1 { grid-column-start: 1; }
}

/* ----------------------------------------------------------------------------
 * 4 · Global texture — a faint film grain over the whole page (premium tell,
 *     unifies flat color into "material"). SVG noise, no external asset.
 * -------------------------------------------------------------------------- */
.ck-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------------------
 * 5 · Navigation — minimal, sticky, backdrop-blur, one accent CTA
 * -------------------------------------------------------------------------- */
.ck-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ck-gutter);
  padding: clamp(1rem, 1.4vw, 1.4rem) var(--ck-gutter);
  background: color-mix(in srgb, var(--ctx-color-background, #0b0f14) 72%, transparent);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--ck-hairline);
}
.ck-wordmark {
  font-family: var(--ctx-font-display, Georgia, serif);
  font-size: var(--ctx-type-h4, 1.5rem);
  font-weight: 500;
  letter-spacing: var(--ctx-tracking-tight, -0.02em);
}
.ck-navlinks { display: flex; gap: clamp(1.25rem, 2.5vw, 2.75rem); align-items: center; }
.ck-navlink {
  font-size: var(--ctx-type-caption, 0.875rem);
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ctx-color-primary-text, #f4efe6) 74%, transparent);
  transition: color .25s ease;
}
.ck-navlink:hover { color: var(--ctx-color-primary-text, #f4efe6); }
@media (max-width: 720px) { .ck-navlinks .ck-navlink:not(:last-child) { display: none; } }

/* ----------------------------------------------------------------------------
 * 6 · Buttons
 * -------------------------------------------------------------------------- */
.ck-btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--ctx-font-body, system-ui, sans-serif);
  font-size: var(--ctx-type-caption, 0.9rem);
  font-weight: 600; letter-spacing: 0.02em;
  padding: 0.9em 1.5em;
  border-radius: var(--ck-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background .25s ease, box-shadow .25s ease, color .25s ease;
}
.ck-btn--primary {
  background: var(--ctx-color-brand-accent, #c9a24b);
  color: var(--ctx-color-background, #0b0f14);
}
.ck-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--ctx-color-brand-accent, #c9a24b) 60%, transparent); }
.ck-btn--ghost {
  background: transparent;
  color: var(--ctx-color-primary-text, #f4efe6);
  border-color: var(--ck-hairline);
}
.ck-btn--ghost:hover { border-color: var(--ctx-color-brand-accent, #c9a24b); color: var(--ctx-color-brand-accent, #c9a24b); }
.ck-btn__arrow { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.ck-btn:hover .ck-btn__arrow { transform: translateX(4px); }

/* ----------------------------------------------------------------------------
 * 7 · HERO — full-bleed, huge type, art-directed media zone behind
 * -------------------------------------------------------------------------- */
.ck-hero {
  position: relative;
  min-height: min(94svh, 60rem);
  display: grid;
  align-items: end;
  padding: var(--ck-gutter);
  padding-block-end: clamp(3rem, 6vw, 6rem);
  overflow: clip;
  isolation: isolate;
}
/* The media zone: a REAL photo drops in here as background-image + the shared
 * photo treatment. Until then, a layered art-directed gradient stands in. */
.ck-hero__media {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 78% 8%, color-mix(in srgb, var(--ctx-color-brand-accent, #c9a24b) 30%, transparent), transparent 60%),
    radial-gradient(90% 80% at 12% 100%, color-mix(in srgb, var(--ctx-color-surface, #171b22) 90%, transparent), transparent 55%),
    linear-gradient(200deg, color-mix(in srgb, var(--ctx-color-background,#0b0f14) 40%, transparent), var(--ctx-color-background, #0b0f14) 78%);
  filter: var(--ck-photo-filter);
}
/* Duotone tint wash over the media — the "consistent grade across the set". */
.ck-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ck-photo-tint);
  mix-blend-mode: soft-light;
}
.ck-hero__inner { position: relative; z-index: 1; max-width: 60rem; }
.ck-hero .ck-display { margin-block: 0 clamp(1.25rem, 2.5vw, 2rem); }
.ck-hero__lead { max-width: 42ch; }
.ck-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: clamp(1.75rem, 3vw, 2.75rem); }

/* Scroll cue — bottom-right micro-detail. */
.ck-scrollcue {
  position: absolute; right: var(--ck-gutter); bottom: clamp(2rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  font-size: var(--ctx-type-overline, 0.72rem); letter-spacing: var(--ctx-tracking-overline, 0.18em);
  text-transform: uppercase; color: color-mix(in srgb, var(--ctx-color-primary-text,#f4efe6) 55%, transparent);
  writing-mode: vertical-rl;
}
.ck-scrollcue span { writing-mode: horizontal-tb; }
.ck-scrollcue::after {
  content: ""; width: 1px; height: 3.5rem;
  background: linear-gradient(var(--ctx-color-brand-accent, #c9a24b), transparent);
}
@media (max-width: 720px) { .ck-scrollcue { display: none; } }

/* ----------------------------------------------------------------------------
 * 8 · Statement / manifesto — one bold idea, oversized, asymmetric
 * -------------------------------------------------------------------------- */
.ck-statement { max-width: 30ch; margin-left: auto; }
.ck-statement .ck-h2 { font-weight: 450; }

/* ----------------------------------------------------------------------------
 * 9 · Feature bento — asymmetric grid, hairline cards, hover-lift
 * -------------------------------------------------------------------------- */
.ck-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.ck-card {
  background: color-mix(in srgb, var(--ctx-color-surface, #171b22) 90%, var(--ctx-color-background,#0b0f14));
  border: 1px solid var(--ck-hairline);
  border-radius: var(--ck-radius-lg);
  padding: clamp(1.5rem, 2.4vw, 2.5rem);
  display: flex; flex-direction: column; gap: 0.75rem;
  min-height: 15rem;
  position: relative; overflow: hidden;
}
.ck-card--feature { grid-column: span 4; grid-row: span 2; justify-content: flex-end; min-height: 30rem; }
.ck-card--sm { grid-column: span 2; }
.ck-card__media {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(75% 60% at 72% 14%, color-mix(in srgb, var(--ctx-color-brand-accent,#c9a24b) 40%, transparent), transparent 62%),
    radial-gradient(90% 80% at 20% 92%, color-mix(in srgb, var(--ctx-color-surface,#171b22) 96%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--ctx-color-surface,#171b22) 70%, transparent), color-mix(in srgb, var(--ctx-color-background,#0b0f14) 92%, transparent));
  filter: var(--ck-photo-filter);
}
.ck-card > * { position: relative; z-index: 1; }
.ck-card__icon {
  width: 2.75rem; height: 2.75rem; border-radius: var(--ck-radius);
  display: grid; place-items: center;
  border: 1px solid var(--ck-hairline);
  color: var(--ctx-color-brand-accent, #c9a24b);
  margin-bottom: 0.5rem;
}
.ck-card__icon svg { width: 1.4rem; height: 1.4rem; }
.ck-card p { color: color-mix(in srgb, var(--ctx-color-primary-text,#f4efe6) 72%, transparent); margin: 0; }
@media (max-width: 860px) {
  .ck-bento { grid-template-columns: repeat(2, 1fr); }
  .ck-card--feature { grid-column: 1 / -1; grid-row: auto; min-height: 22rem; }
  .ck-card--sm { grid-column: span 1; }
}

/* ----------------------------------------------------------------------------
 * 10 · Gallery band — full-bleed, art-directed "photo" tiles, ONE treatment
 * -------------------------------------------------------------------------- */
.ck-gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 34rem);
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--ck-gutter);
  padding-block: 0.5rem 1.5rem;
  scrollbar-width: none;
}
.ck-gallery::-webkit-scrollbar { display: none; }
.ck-frame {
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--ck-radius-lg);
  overflow: hidden;
  /* signature motif: arch top — repeated shape system, not one-off decoration */
  border-start-start-radius: 14rem;
  border-start-end-radius: 14rem;
  border: 1px solid var(--ck-hairline);
}
.ck-frame__media {
  position: absolute; inset: 0;
  background:
    radial-gradient(85% 55% at 50% 4%, color-mix(in srgb, var(--ctx-color-brand-accent,#c9a24b) 38%, transparent), transparent 58%),
    radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--ctx-color-surface,#171b22) 96%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--ctx-color-surface,#171b22) 82%, transparent), var(--ctx-color-background,#0b0f14));
  filter: var(--ck-photo-filter);
}
.ck-frame__media::after { content:""; position:absolute; inset:0; background: var(--ck-photo-tint); mix-blend-mode: soft-light; }
.ck-frame__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: linear-gradient(transparent, color-mix(in srgb, var(--ctx-color-background,#0b0f14) 88%, transparent));
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
}
.ck-frame__cap .ck-h4 { margin: 0; }
.ck-frame__cap small { color: var(--ctx-color-brand-accent,#c9a24b); font-size: var(--ctx-type-caption,.85rem); letter-spacing: .12em; text-transform: uppercase; }

/* ----------------------------------------------------------------------------
 * 11 · Stat row — huge numerals, overline labels, hairline dividers
 * -------------------------------------------------------------------------- */
.ck-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ck-gutter); }
.ck-stat { padding-top: 1.5rem; border-top: 1px solid var(--ck-hairline); }
.ck-stat .ck-overline { margin-bottom: 0.75rem; }
.ck-stat p { margin: 0.75rem 0 0; color: color-mix(in srgb, var(--ctx-color-primary-text,#f4efe6) 66%, transparent); font-size: var(--ctx-type-caption, .9rem); }
@media (max-width: 860px) { .ck-stats { grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem,4vw,2.5rem); } }

/* ----------------------------------------------------------------------------
 * 12 · Split editorial — media + text, alternating
 * -------------------------------------------------------------------------- */
.ck-split { align-items: center; }
.ck-split__media {
  aspect-ratio: 5 / 6;
  border-radius: var(--ck-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ck-hairline);
  position: relative;
}
.ck-split__media::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 32% 18%, color-mix(in srgb, var(--ctx-color-brand-accent,#c9a24b) 42%, transparent), transparent 58%),
    radial-gradient(80% 70% at 85% 95%, color-mix(in srgb, var(--ctx-color-surface,#171b22) 98%, transparent), transparent 55%),
    linear-gradient(150deg, color-mix(in srgb, var(--ctx-color-surface,#171b22) 88%, transparent), var(--ctx-color-background,#0b0f14));
  filter: var(--ck-photo-filter);
}
.ck-split__media::after { content:""; position:absolute; inset:0; background: var(--ck-photo-tint); mix-blend-mode: soft-light; }

/* ----------------------------------------------------------------------------
 * 13 · CTA band — full-bleed, accent-tinted, huge type
 * -------------------------------------------------------------------------- */
.ck-cta {
  position: relative;
  text-align: center;
  padding-block: clamp(5rem, 4rem + 8vw, 10rem);
  overflow: clip;
}
.ck-cta__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 120% at 50% -10%, color-mix(in srgb, var(--ctx-color-brand-accent,#c9a24b) 30%, transparent), transparent 60%),
    color-mix(in srgb, var(--ctx-color-surface,#171b22) 60%, var(--ctx-color-background,#0b0f14));
  border-block: 1px solid var(--ck-hairline);
}
.ck-cta .ck-display { max-width: 18ch; margin-inline: auto; }
.ck-cta .ck-lead { margin-inline: auto; margin-top: 1.25rem; text-align: center; }
.ck-cta__actions { display:flex; justify-content:center; gap: 0.85rem; margin-top: 2.25rem; flex-wrap: wrap; }

/* ----------------------------------------------------------------------------
 * 14 · Footer — refined, multi-column, hairlines, small-caps labels
 * -------------------------------------------------------------------------- */
.ck-footer { border-top: 1px solid var(--ck-hairline); padding-block: clamp(3.5rem, 5vw, 6rem) 2.5rem; }
.ck-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--ck-gutter); }
.ck-footer__brand .ck-wordmark { font-size: var(--ctx-type-h3, 2rem); display: inline-block; margin-bottom: 1rem; }
.ck-footer h5 { font-size: var(--ctx-type-overline,.72rem); letter-spacing: var(--ctx-tracking-overline,.18em); text-transform: uppercase; color: color-mix(in srgb, var(--ctx-color-primary-text,#f4efe6) 55%, transparent); margin: 0 0 1rem; }
.ck-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.ck-footer a { color: color-mix(in srgb, var(--ctx-color-primary-text,#f4efe6) 72%, transparent); font-size: var(--ctx-type-caption,.9rem); transition: color .2s ease; }
.ck-footer a:hover { color: var(--ctx-color-brand-accent,#c9a24b); }
.ck-footer__base {
  margin-top: clamp(3rem,5vw,5rem); padding-top: 1.5rem; border-top: 1px solid var(--ck-hairline);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: var(--ctx-type-caption,.85rem); color: color-mix(in srgb, var(--ctx-color-primary-text,#f4efe6) 50%, transparent);
}
@media (max-width: 860px) { .ck-footer__grid { grid-template-columns: 1fr 1fr; } }

/* Section header helper — overline + heading, consistent everywhere. */
.ck-sechead { max-width: 52rem; margin-bottom: clamp(2.5rem, 4vw, 4.5rem); }
.ck-sechead .ck-lead { margin-top: 1.25rem; }

/* ============================================================================
 * 15 · PREMIUM MICRO-MOTION + DETAIL LAYER
 * Tasteful, compositor-first, reduced-motion-safe polish. All transform/opacity
 * (S-tier), CSS scroll-timelines where the effect is scroll-bound, and a tiny
 * optional enhance.js for the two things CSS alone can't do (scroll-state class,
 * cursor position). Nothing here is required for the page to render or read.
 * ========================================================================== */

/* 15.1 · Scroll progress bar — pure CSS scroll-driven, no JS. */
.ck-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg,
    var(--ctx-color-brand-accent, #c9a24b),
    color-mix(in srgb, var(--ctx-color-brand-accent, #c9a24b) 35%, transparent));
  pointer-events: none;
}
@keyframes ck-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) {
  .ck-progress { animation: ck-progress auto linear both; animation-timeline: scroll(root); will-change: transform; }
}
@media (prefers-reduced-motion: reduce) { .ck-progress { display: none; } }

/* 15.2 · Sticky-nav shrink + reveal on scroll (enhance.js toggles the state). */
.ck-nav { transition: padding .38s cubic-bezier(.2,.7,.2,1), background .38s ease, box-shadow .38s ease, border-color .38s ease; }
.ck-wordmark { transition: font-size .38s cubic-bezier(.2,.7,.2,1); }
.ck-shell[data-ck-scrolled] .ck-nav {
  padding-block: clamp(.5rem, .9vw, .8rem);
  background: color-mix(in srgb, var(--ctx-color-background, #0b0f14) 88%, transparent);
  box-shadow: 0 10px 34px -20px rgba(0,0,0,.7);
}
.ck-shell[data-ck-scrolled] .ck-wordmark { font-size: var(--ctx-type-body-lg, 1.25rem); }
@media (prefers-reduced-motion: reduce) { .ck-nav, .ck-wordmark { transition: none; } }

/* 15.3 · Animated link underlines — nav, wordmark, footer (scaleX from left). */
.ck-navlink, .ck-wordmark, .ck-footer a { position: relative; }
.ck-navlink::after, .ck-wordmark::after, .ck-footer a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.28em; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
}
.ck-navlink:hover::after, .ck-wordmark:hover::after,
.ck-footer a:hover::after, .ck-navlink:focus-visible::after, .ck-footer a:focus-visible::after { transform: scaleX(1); }
/* the ghost-button nav CTA shouldn't get a second underline */
.ck-navlinks .ck-btn::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ck-navlink::after, .ck-wordmark::after, .ck-footer a::after { transition: none; }
}

/* 15.4 · Primary button sheen sweep on hover (transform-only). */
.ck-btn { position: relative; overflow: hidden; }
.ck-btn--primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 34%,
    color-mix(in srgb, #fff 42%, transparent) 50%, transparent 66%);
  transform: translateX(-130%); transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.ck-btn--primary:hover::after { transform: translateX(130%); }
@media (prefers-reduced-motion: reduce) { .ck-btn--primary::after { display: none; } }

/* 15.5 · Cursor-adjacent glow on cards (enhance.js sets --ck-mx / --ck-my). */
.ck-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(16rem 16rem at var(--ck-mx, 50%) var(--ck-my, 50%),
    color-mix(in srgb, var(--ctx-color-brand-accent, #c9a24b) 22%, transparent), transparent 60%);
  opacity: 0; transition: opacity .4s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ck-card:hover::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ck-card::after { display: none; } }

/* 15.6 · Gentle gradient drift on the CTA band (very slow, restrained). */
@keyframes ck-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.06); }
  50%  { transform: translate3d(2%, 1.5%, 0) scale(1.1); }
  100% { transform: translate3d(-2%, -1%, 0) scale(1.06); }
}
.ck-cta__bg::after {
  content: ""; position: absolute; inset: -12%;
  background: radial-gradient(46% 60% at 32% 22%,
    color-mix(in srgb, var(--ctx-color-brand-accent, #c9a24b) 22%, transparent), transparent 62%);
  animation: ck-drift 28s ease-in-out infinite; will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .ck-cta__bg::after { animation: none; } }

/* 15.7 · Marquee band — seamless, hover-pauses, edge-masked. */
.ck-marquee {
  overflow: hidden; border-block: 1px solid var(--ck-hairline);
  padding-block: clamp(1rem, 2vw, 1.6rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ck-marquee__track { display: flex; align-items: center; gap: 3rem; width: max-content; animation: ck-marquee 42s linear infinite; }
.ck-marquee:hover .ck-marquee__track { animation-play-state: paused; }
@keyframes ck-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.ck-marquee__item {
  display: inline-flex; align-items: center; gap: 3rem; white-space: nowrap;
  font-family: var(--ctx-font-display, Georgia, serif);
  font-size: clamp(1.25rem, 1rem + 2vw, 2.25rem); font-weight: 500;
  letter-spacing: var(--ctx-tracking-tight, -0.02em);
  color: color-mix(in srgb, var(--ctx-color-primary-text, #f4efe6) 62%, transparent);
}
.ck-marquee__item::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--ctx-color-brand-accent, #c9a24b); flex: none;
}
@media (prefers-reduced-motion: reduce) { .ck-marquee__track { animation: none; } }

/* 15.8 · Stat emphasis — accent bar draws across the top hairline on reveal. */
.ck-stat { position: relative; }
.ck-stat::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 2px;
  background: var(--ctx-color-brand-accent, #c9a24b);
  transform: scaleX(0); transform-origin: left;
}
@keyframes ck-line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: view()) {
  .ck-stat::before { animation: ck-line-grow auto linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; will-change: transform; }
}
@media (prefers-reduced-motion: reduce) { .ck-stat::before { transform: scaleX(1); animation: none; } }

/* 15.9 · Scroll-through size stepper (data-cx-count-steps demo). */
.ck-stepper { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--ck-gutter); align-items: center; }
.ck-stepper__display { line-height: 0.8; }
.ck-stepper__display .ck-stat-num {
  font-size: clamp(4rem, 1.5rem + 13vw, 12rem);
  line-height: 0.82; color: var(--ctx-color-primary-text, #f4efe6);
}
.ck-stepper__hint { margin-top: 1rem; color: color-mix(in srgb, var(--ctx-color-primary-text,#f4efe6) 55%, transparent); font-size: var(--ctx-type-caption, .9rem); }
.ck-stepper__legend { list-style: none; margin: 0; padding: 0; display: grid; }
.ck-stepper__legend li {
  position: relative; display: flex; justify-content: space-between; gap: 1rem;
  padding: .95rem 0 .95rem 0; border-top: 1px solid var(--ck-hairline);
  color: color-mix(in srgb, var(--ctx-color-primary-text,#f4efe6) 52%, transparent);
  transition: color .32s ease, padding-left .32s cubic-bezier(.2,.7,.2,1);
}
.ck-stepper__legend li span { font-variant-numeric: tabular-nums; }
.ck-stepper__legend li.is-active { color: var(--ctx-color-primary-text, #f4efe6); padding-left: 1.15rem; }
.ck-stepper__legend li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: .45rem; height: .45rem;
  border-radius: 50%; background: var(--ctx-color-brand-accent, #c9a24b);
  transform: translateY(-50%) scale(0); transform-origin: center; transition: transform .32s cubic-bezier(.2,.7,.2,1);
}
.ck-stepper__legend li.is-active::before { transform: translateY(-50%) scale(1); }
@media (prefers-reduced-motion: reduce) { .ck-stepper__legend li { transition: color .2s ease; } }
@media (max-width: 860px) { .ck-stepper { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2.5rem); } }

/* ----------------------------------------------------------------------------
 * 8 · Tap targets — every interactive element (a[href], button, [role=button])
 *     needs a real >=44x44px hit area, not just visually-sized text. Padding
 *     grows the click/tap box without changing the visible text size; a
 *     min-height/min-width floor catches icon-only or short-text controls.
 * -------------------------------------------------------------------------- */
.ck-navlink,
.ck-footer a,
.ck-wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-block: 0.5rem;
}
.ck-nav .ck-wordmark { min-height: 2.75rem; padding-block: 0; } /* nav's own padding provides most of the height; floor covers the rest */
.ck-footer__grid a { min-width: 2.75rem; }
.villas-market__tile { min-height: 2.75rem; }

/* ----------------------------------------------------------------------------
 * 9 · Print — a resident (or board member) printing this page for an asamblea
 *     handout gets the real content, not the dark hero/motion chrome.
 * -------------------------------------------------------------------------- */
@media print {
  .ck-announce, .ck-progress, .ck-nav, .ck-scrollcue, .ck-marquee,
  .ck-cta__bg, [data-ck-scroll-top], .ck-footer__base .villas-powered {
    display: none !important;
  }
  body, .ck-shell { background: #fff !important; color: #111 !important; }
  .ck-display, .ck-h1, .ck-h2, .ck-h3, .ck-h4 { color: #111 !important; }
  a { color: #111 !important; text-decoration: underline; }
  .ck-btn { border: 1px solid #111 !important; background: transparent !important; color: #111 !important; }
  .villas-hero-v2__media, .ck-frame__media, .villas-shot { display: none; } /* background-image sketches rarely print well */
  section { break-inside: avoid; }
}