/* ==========================================================================
   JKVL Site Factory — Sprint 4A design families
   Config-driven distinct layouts. Body carries jksf-layout-*, jksf-hero-*,
   jksf-surface-*, jksf-geometry-*, jksf-motion-* classes (injected by the
   Site Factory Core plugin from each manifest's theme.design). Extended color
   tokens (--jksf-ink, --jksf-surface-2, --jksf-accent-2, --jksf-radius) also
   arrive from the manifest.
   ========================================================================== */

/* ---------- Surface depth ---------- */
.jksf-surface-flat .jksf-card,
.jksf-surface-flat .jksf-contact-panel { box-shadow: none; }
.jksf-surface-layered .jksf-hero {
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--jksf-ink) 6%, transparent) 0%, transparent 46%),
    linear-gradient(180deg, var(--jksf-surface) 0%, var(--jksf-background) 100%);
}
.jksf-surface-layered .jksf-card { box-shadow: 0 2px 6px rgb(0 0 0 / 0.05), 0 20px 44px -22px rgb(0 0 0 / 0.25); }
.jksf-surface-paper .jksf-hero,
.jksf-surface-paper .jksf-page-head {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--jksf-surface-2) 55%, transparent), transparent 52%),
    var(--jksf-background);
}
.jksf-surface-paper .jksf-card { background: var(--jksf-background); border-color: var(--jksf-border-soft); }
.jksf-surface-mineral .jksf-card { border-radius: var(--jksf-radius); border-color: color-mix(in srgb, var(--jksf-accent) 26%, transparent); }
.jksf-surface-dark { background: var(--jksf-ink); }
.jksf-surface-dark .jksf-section { color: var(--jksf-text); }
.jksf-surface-dark .jksf-alt { background: var(--jksf-surface); }
.jksf-surface-dark .jksf-card { background: var(--jksf-surface); border-color: color-mix(in srgb, var(--jksf-text) 20%, transparent); }

/* ---------- Geometry: border weight + radius consistency ---------- */
.jksf-geometry-sharp { --jksf-radius: 0px; }
.jksf-geometry-crisp { --jksf-radius: 1px; }
.jksf-geometry-architectural { --jksf-radius: 2px; }
.jksf-geometry-soft { --jksf-radius: 14px; }
.jksf-geometry-soft .jksf-card,
.jksf-geometry-soft .jksf-step,
.jksf-geometry-soft .site-contact { border-radius: var(--jksf-radius); }
.jksf-geometry-architectural .jksf-card { border: 1px solid var(--jksf-border); }
.jksf-geometry-architectural .jksf-step { border-top-width: 1px; }

/* ---------- Hero compositions ---------- */
.jksf-hero { border-radius: 0; }

/* Compact / institutional (Aegis, Sentinel, Vanguard) */
.jksf-hero-compact .jksf-hero {
  min-height: 0; padding-block: clamp(56px, 8vw, 104px) clamp(48px, 7vw, 92px);
  align-items: start; background: var(--jksf-background);
}
.jksf-hero-compact .jksf-hero__inner { max-width: 820px; border-left: 4px solid var(--jksf-accent); padding-left: clamp(22px, 3.4vw, 44px); }
.jksf-hero-compact .jksf-hero h1 { font-size: clamp(38px, 5.6vw, 74px); letter-spacing: -0.03em; }
.jksf-hero-compact .jksf-hero__rule { height: 2px; margin-top: 28px; }

/* Portfolio-led / forward motion (JKVL) */
.jksf-hero-portfolio .jksf-hero {
  min-height: min(640px, 80vh); align-items: end;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--jksf-accent) 12%, transparent) 0%, transparent 40%),
    var(--jksf-background);
}
.jksf-hero-portfolio .jksf-hero__inner { max-width: 1120px; }
.jksf-hero-portfolio .jksf-hero h1 { font-size: clamp(52px, 7.4vw, 104px); letter-spacing: -0.04em; }
.jksf-hero-portfolio .jksf-hero__rule { width: min(320px, 60vw); height: 3px; background: linear-gradient(90deg, var(--jksf-accent), transparent); }

/* Editorial luxury (Aurea) */
.jksf-site-aurea-elite .site-header { background: rgb(247 243 236 / .94); backdrop-filter: blur(18px); }
.jksf-site-aurea-elite .site-brand__logo { max-height: 62px; }
.jksf-site-aurea-elite .jksf-section--hero {
  background:
    linear-gradient(115deg, transparent 0 58%, rgb(156 140 107 / .09) 58% 100%),
    var(--jksf-background);
}
.jksf-site-aurea-elite .jksf-hero-title { font-weight: 300; max-width: 11ch; }
.jksf-site-aurea-elite .jksf-hero-art { min-height: 520px; }
.jksf-site-aurea-elite .jksf-hero-art::before,
.jksf-site-aurea-elite .jksf-hero-art::after {
  content: ""; position: absolute; border: 1px solid var(--jksf-accent);
  border-radius: 50%; inset: 9% 8% 9% 8%; transform: rotate(-11deg);
}
.jksf-site-aurea-elite .jksf-hero-art::after { inset: 21% 20%; border-color: var(--jksf-accent-2); transform: rotate(19deg); }
.jksf-site-aurea-elite .jksf-hero-art span:nth-child(1) {
  width: 62%; aspect-ratio: 1; border: 22px solid var(--jksf-ink); border-radius: 50%;
  left: 19%; top: 18%; transform: perspective(700px) rotateX(68deg) rotateZ(-16deg);
  box-shadow: 0 28px 70px rgb(14 14 12 / .16);
}
.jksf-site-aurea-elite .jksf-hero-art span:nth-child(2) {
  width: 74px; aspect-ratio: 1; border-radius: 50%; left: 45%; top: 35%;
  background: radial-gradient(circle at 34% 30%, #fff 0 6%, #d8cdb8 18%, #9c8c6b 47%, #1c1b19 100%);
  box-shadow: 0 0 0 12px var(--jksf-background), 0 0 0 13px var(--jksf-accent), 0 18px 38px rgb(14 14 12 / .22);
}
.jksf-site-aurea-elite .jksf-hero-art span:nth-child(3) { width: 1px; height: 92%; left: 50%; top: 4%; background: linear-gradient(transparent, var(--jksf-accent), transparent); }
.jksf-site-aurea-elite .jksf-section--introduction { background: var(--jksf-ink); color: #f7f3ec; }
.jksf-site-aurea-elite .jksf-section--introduction p { color: rgb(247 243 236 / .72); max-width: 50ch; }
.jksf-site-aurea-elite .jksf-section--cards .jksf-card { padding-top: 28px; border-top: 1px solid var(--jksf-accent); }
.jksf-site-aurea-elite .jksf-section--call_to_action { background: var(--jksf-surface-2); }

/* Organic / restorative (Parasym) */
.jksf-hero-organic .jksf-hero {
  min-height: min(620px, 78vh); align-items: end; border-radius: 0 0 var(--jksf-radius) var(--jksf-radius);
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--jksf-accent) 18%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--jksf-surface) 0%, var(--jksf-background) 100%);
}
.jksf-hero-organic .jksf-hero__inner { max-width: 960px; }
.jksf-hero-organic .jksf-hero h1 { font-size: clamp(46px, 7vw, 96px); letter-spacing: -0.035em; }
.jksf-hero-organic .jksf-hero__rule { width: 120px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--jksf-accent), var(--jksf-accent-2)); }

/* Split / confrontational (Alt Wild) */
.jksf-site-alt-wild { --jksf-border: rgb(245 241 234 / .24); }
.jksf-site-alt-wild .site-header { background: #0a0a0a; border-color: rgb(245 241 234 / .16); }
.jksf-site-alt-wild .site-brand__logo { filter: invert(1); max-height: 64px; }
.jksf-site-alt-wild .site-nav a, .jksf-site-alt-wild .nav-toggle { color: #f5f1ea; }
.jksf-site-alt-wild .jksf-section--hero { background: #0a0a0a; color: #f5f1ea; overflow: hidden; }
.jksf-site-alt-wild .jksf-section--hero .jksf-container-inner { grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); }
.jksf-site-alt-wild .jksf-hero-title { max-width: 10ch; text-transform: uppercase; font-weight: 800; line-height: .88; letter-spacing: -.065em; }
.jksf-site-alt-wild .jksf-section--hero .jksf-lede { color: rgb(245 241 234 / .72); }
.jksf-site-alt-wild .jksf-hero-art { min-height: 520px; background: #c91422; transform: rotate(4deg) scale(.94); overflow: visible; }
.jksf-site-alt-wild .jksf-hero-art::before { content: "A"; position: absolute; left: -7%; bottom: -18%; color: #0a0a0a; font: 900 590px/.75 Arial, sans-serif; letter-spacing: -.13em; }
.jksf-site-alt-wild .jksf-hero-art::after { content: "WILD"; position: absolute; right: -8%; top: 8%; color: #f5f1ea; writing-mode: vertical-rl; font: 900 clamp(42px, 4.5vw, 72px)/.85 Arial, sans-serif; letter-spacing: .04em; }
.jksf-site-alt-wild .jksf-hero-art span:nth-child(1) { inset: 8% auto 8% 20%; width: 3px; background: #f5f1ea; }
.jksf-site-alt-wild .jksf-hero-art span:nth-child(2) { width: 70%; height: 10px; left: 5%; top: 22%; background: #0a0a0a; transform: rotate(-21deg); }
.jksf-site-alt-wild .jksf-hero-art span:nth-child(3) { width: 54%; height: 2px; right: -4%; bottom: 18%; background: #f5f1ea; transform: rotate(18deg); }
.jksf-site-alt-wild .jksf-section--introduction { border-top: 10px solid var(--jksf-accent); }
.jksf-site-alt-wild .jksf-section--cards { background: var(--jksf-surface); color: #f5f1ea; }
.jksf-site-alt-wild .jksf-section--cards p, .jksf-site-alt-wild .jksf-section--cards li { color: rgb(245 241 234 / .7); }
.jksf-site-alt-wild .jksf-section--cards .jksf-card { background: transparent; border: 0; border-top: 6px solid var(--jksf-accent); padding-inline: 0; }
.jksf-site-alt-wild .jksf-section--cards .jksf-card__title::after { display: none; }

/* Immersive / cinematic (Dreamscape) */
.jksf-hero-immersive .jksf-hero {
  min-height: min(760px, 92vh); align-items: center; text-align: center;
  background:
    radial-gradient(90% 80% at 50% 18%, color-mix(in srgb, var(--jksf-accent) 34%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, var(--jksf-ink) 0%, var(--jksf-surface-2) 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--jksf-accent) 30%, transparent);
}
.jksf-hero-immersive .jksf-hero__inner { max-width: 1040px; margin-inline: auto; }
.jksf-hero-immersive .jksf-hero__eyebrow { letter-spacing: 0.4em; font-size: 11px; color: var(--jksf-accent-2); }
.jksf-hero-immersive .jksf-hero h1 { font-size: clamp(48px, 8vw, 120px); letter-spacing: -0.04em; text-shadow: 0 4px 40px rgb(0 0 0 / 0.5); }
.jksf-hero-immersive .jksf-hero__summary { margin-inline: auto; color: var(--jksf-muted); }
.jksf-hero-immersive .jksf-hero__rule { width: 140px; height: 2px; margin: 40px auto 0; background: linear-gradient(90deg, transparent, var(--jksf-accent), transparent); }

/* ---------- Layout families: section rhythm & composition ---------- */
.jksf-layout-governance .jksf-section { border-bottom: 1px solid var(--jksf-border-soft); }
.jksf-layout-governance .jksf-section-title { max-width: 720px; }
.jksf-layout-governance .jksf-card { border-left: 3px solid var(--jksf-accent); }
.jksf-layout-governance .jksf-steps { border-top: 3px solid var(--jksf-text); }

.jksf-layout-forward .jksf-section { position: relative; }
.jksf-layout-forward .jksf-section-title::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 18px; background: var(--jksf-accent); }
.jksf-layout-forward .jksf-step { border-top-color: var(--jksf-accent); }

.jksf-layout-fortress .jksf-container-inner { max-width: 900px; }
.jksf-layout-fortress .jksf-section { border: 1px solid var(--jksf-border); border-top-width: 3px; margin-block: clamp(16px, 2.4vw, 30px); }
.jksf-layout-fortress .jksf-card { border: 1px solid var(--jksf-border); box-shadow: none; }

.jksf-layout-modular .jksf-section { border-top: 1px solid var(--jksf-border-soft); }
.jksf-layout-modular .jksf-card { border-radius: var(--jksf-radius); border: 1px solid var(--jksf-border-soft); box-shadow: none; }
.jksf-layout-modular .jksf-step__number { font-family: var(--jksf-body); font-weight: 800; }

.jksf-layout-editorial .jksf-section { padding-block: clamp(56px, 8vw, 120px); }
.jksf-layout-editorial .jksf-section-title { font-size: clamp(34px, 4.6vw, 62px); font-weight: 300; letter-spacing: -0.03em; }
.jksf-layout-editorial .jksf-card { background: transparent; border: 0; box-shadow: none; padding-inline: 0; border-top: 1px solid var(--jksf-border); }

.jksf-layout-organic .jksf-section { padding-block: clamp(44px, 6.6vw, 100px); }
.jksf-layout-organic .jksf-card { border-radius: var(--jksf-radius); border: 0; background: var(--jksf-surface); }
.jksf-layout-organic .jksf-alt .jksf-card { background: var(--jksf-background); }

.jksf-layout-confrontational .jksf-alt { background: var(--jksf-surface); color: var(--jksf-background); }
.jksf-layout-confrontational .jksf-alt .jksf-card { background: var(--jksf-ink); border-color: color-mix(in srgb, var(--jksf-background) 18%, transparent); }
.jksf-layout-confrontational .jksf-card { border-left: 4px solid var(--jksf-accent); box-shadow: none; }
.jksf-layout-confrontational .jksf-section-title { text-transform: uppercase; letter-spacing: -0.02em; }

.jksf-layout-cinematic .jksf-section { color: var(--jksf-text); }
.jksf-layout-cinematic .jksf-alt { background: var(--jksf-surface); }
.jksf-layout-cinematic .jksf-card { background: var(--jksf-surface); border-color: color-mix(in srgb, var(--jksf-accent) 22%, transparent); }
.jksf-layout-cinematic .jksf-section-title { letter-spacing: 0.01em; }

/* ---------- Dark surface adjustments ---------- */
.jksf-surface-dark .site-header { background: var(--jksf-ink); border-bottom: 1px solid color-mix(in srgb, var(--jksf-text) 20%, transparent); }
.jksf-surface-dark .site-brand__name, .jksf-surface-dark .site-nav a { color: var(--jksf-text); }
.jksf-surface-dark .site-contact { border-color: var(--jksf-text); color: var(--jksf-text); }
.jksf-surface-dark .jksf-page-head { background: var(--jksf-surface); }

/* ---------- Motion policy ---------- */
.jksf-motion-subtle a, .jksf-motion-subtle .jksf-card, .jksf-motion-subtle .jksf-step {
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.jksf-motion-subtle .jksf-card:hover { transform: translateY(-2px); }
.jksf-motion-cinematic .jksf-hero { animation: jksf-fade 0.9s ease both; }
.jksf-motion-cinematic .jksf-card { transition: box-shadow 0.35s ease, transform 0.35s ease; }
.jksf-motion-cinematic .jksf-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -20px rgb(0 0 0 / 0.4); }
@keyframes jksf-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive distinctness (hero-split collapses) ---------- */
@media (max-width: 767px) {
  .jksf-section--hero .jksf-container-inner,
  .jksf-site-alt-wild .jksf-section--hero .jksf-container-inner { grid-template-columns: 1fr; }
  .jksf-site-aurea-elite .jksf-hero-art { min-height: 320px; }
  .jksf-site-alt-wild .jksf-hero-art { min-height: 360px; transform: rotate(3deg) scale(.9); }
  .jksf-site-alt-wild .jksf-hero-art::before { font-size: 410px; }
  .jksf-hero-compact .jksf-hero__inner { border-left-width: 3px; padding-left: 18px; }
  .jksf-layout-fortress .jksf-section { margin-block: 12px; }
  .jksf-layout-editorial .jksf-section { padding-block: 48px; }
}