/* =====================================================================
   Kaka Nexus — public site styles. Tokens live in tokens.css.
   Motif: the nexus — gold hairlines that connect things. Used for
   structure (orbits, flow lines, dividers), never as decoration alone.
   ===================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-body);
  font-stretch: var(--stretch-body); font-kerning: normal; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 560; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
dl, dd { margin: 0; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
main:focus { box-shadow: none; }
::selection { background: var(--kn-gold); color: var(--kn-navy); }

.container { width: 100%; max-width: calc(var(--width-page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--width-narrow) + 2 * var(--gutter)); }
.visually-hidden, .visually-hidden-head {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100; padding: var(--space-3) var(--space-5);
  background: var(--kn-gold); color: var(--kn-navy); font-weight: 600; border-radius: var(--radius-sm); text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

/* ---------- Buttons and links ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.4rem;
  border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600;
  font-stretch: 106%; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.button--primary { background: var(--kn-gold); border-color: var(--kn-gold); color: var(--kn-navy); }
.button--primary:hover { background: var(--kn-gold-soft); border-color: var(--kn-gold-soft); transform: var(--hover-lift); }
.button--ghost { background: transparent; border-color: var(--color-line-strong); color: var(--color-text); }
.button--ghost:hover { border-color: var(--kn-gold); color: var(--kn-gold); }
.button:active { transform: none; }
.button[disabled], .button[aria-busy="true"] { opacity: 0.6; cursor: progress; transform: none; }

.text-link {
  display: inline-block; color: var(--color-accent); font-weight: 600; font-size: var(--text-sm);
  text-decoration: underline; text-decoration-color: rgba(198, 165, 104, 0.45); text-underline-offset: 0.35em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.text-link:hover { text-decoration-color: currentColor; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgba(23, 35, 45, 0.92); border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) { .site-header { background: rgba(23, 35, 45, 0.78); backdrop-filter: blur(16px) saturate(1.2); } }
.js .site-header.is-scrolled { border-bottom-color: var(--color-line); }
.js .page-home .site-header:not(.is-scrolled):not(.is-open) { background: transparent; backdrop-filter: none; }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.brand { display: block; flex: none; width: 13rem; }
.brand img { width: 100%; height: auto; }
.site-nav__list { list-style: none; display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.nav-link {
  position: relative; display: inline-block; padding-block: var(--space-2); font-size: var(--text-sm); font-weight: 500;
  color: rgba(245, 241, 232, 0.82); text-decoration: none; transition: color var(--dur-fast) var(--ease-out);
}
.nav-link:hover { color: var(--kn-ivory); }
.nav-link[aria-current="page"] { color: var(--kn-ivory); }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 1px; background: var(--kn-gold);
}
.nav-link--cta {
  padding: 0.55rem 1rem; border: 1px solid rgba(198, 165, 104, 0.7); border-radius: var(--radius-sm); color: var(--kn-ivory);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav-link--cta:hover, .nav-link--cta[aria-current="page"] { background: var(--kn-gold); border-color: var(--kn-gold); color: var(--kn-navy); }
.nav-link--cta[aria-current="page"]::after { display: none; }
.nav-toggle { display: none; }

@media (max-width: 63.99rem) {
  /* No backdrop-filter here: it would become the containing block for the fixed menu panel. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(23, 35, 45, 0.97); }
  .brand { width: 10rem; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; padding: 0 var(--space-4);
    background: transparent; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); cursor: pointer;
    font-size: var(--text-sm); font-weight: 600;
  }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 1px;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

  /* With JavaScript: full-screen panel. Without: the toggle is hidden and links wrap below the logo. */
  .js .site-nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; overflow-y: auto; padding: var(--space-6) var(--gutter) var(--space-9);
    background: var(--kn-navy-deep); border-top: 1px solid var(--color-line);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  }
  .js .site-header.is-open .site-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .js .site-header.is-open { background: var(--kn-navy-deep); }
  .js .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .js .site-nav__list li { border-bottom: 1px solid var(--color-line); }
  .js .nav-link { display: block; padding: var(--space-4) 0; font-size: var(--text-lg); font-stretch: 112%; font-weight: 520; color: var(--kn-ivory); }
  .js .nav-link[aria-current="page"] { color: var(--kn-gold); }
  .js .nav-link[aria-current="page"]::after { display: none; }
  .js .site-nav__list li:last-child { border-bottom: 0; margin-top: var(--space-6); }
  .js .nav-link--cta { text-align: center; padding: var(--space-4); font-size: var(--text-base); background: var(--kn-gold); color: var(--kn-navy); border-color: var(--kn-gold); }
  .no-js .site-header { height: auto; position: relative; }
  .no-js .site-header__inner { flex-wrap: wrap; padding-block: var(--space-4); }
  .no-js .site-nav__list { flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
  .no-js .nav-toggle { display: none; }
  body.nav-locked { overflow: hidden; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: 1fr auto;
  min-height: min(100svh, 62rem); margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h);
  background:
    radial-gradient(ellipse 55% 50% at 74% 48%, rgba(198, 165, 104, 0.11), transparent 70%),
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(44, 63, 77, 0.55), transparent 70%),
    var(--kn-navy);
}
.hero__floor {
  position: absolute; z-index: -1; left: -25%; right: -25%; bottom: -2px; height: 48%;
  background-image:
    linear-gradient(to right, rgba(245, 241, 232, 0.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245, 241, 232, 0.075) 1px, transparent 1px);
  background-size: 76px 76px; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 80%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 80%);
}
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "tag tag" "title title" "copy visual";
  align-items: start; column-gap: var(--space-8); padding-block: var(--space-9) var(--space-6);
}
.hero__tagline { grid-area: tag; }
.hero__title { grid-area: title; }
.hero__copy { grid-area: copy; padding-top: var(--space-2); }
.hero__tagline {
  display: flex; align-items: center; gap: var(--space-3); color: var(--kn-gold); font-size: var(--text-sm); font-weight: 600; font-stretch: 112%; letter-spacing: 0.015em;
}
.hero__tagline::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; }
.hero__title {
  margin: var(--space-5) 0 var(--space-5); font-size: var(--text-display); font-weight: 540; font-stretch: var(--stretch-display);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-display);
}
.hero__title .line { display: block; }
.hero__lead { max-width: 33rem; font-size: var(--text-md); line-height: 1.55; color: rgba(245, 241, 232, 0.82); }
.hero__visual { grid-area: visual; position: relative; min-width: 0; margin-top: calc(-1 * var(--space-9)); }
.hero__foot { padding-bottom: var(--space-7); }
.hero__next {
  display: inline-flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); font-weight: 500;
  color: var(--color-text-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-out);
}
.hero__next:hover { color: var(--kn-ivory); }
.hero__next-line { position: relative; width: 1px; height: 2.75rem; background: var(--color-line-strong); overflow: hidden; }
.hero__next-line::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--kn-gold); }
@media (prefers-reduced-motion: no-preference) {
  .hero__next-line::after { animation: kn-drip 2.4s var(--ease-in-out) infinite; }
  .js .hero__title .line, .js .hero__tagline, .js .hero__lead, .js .hero .actions { animation: kn-rise 0.9s var(--ease-out) both; }
  .js .hero__tagline { animation-delay: 0.05s; }
  .js .hero__title .line:nth-child(1) { animation-delay: 0.12s; }
  .js .hero__title .line:nth-child(2) { animation-delay: 0.2s; }
  .js .hero__title .line:nth-child(3) { animation-delay: 0.28s; }
  .js .hero__lead { animation-delay: 0.34s; }
  .js .hero .actions { animation-delay: 0.42s; }
  .js .nexus { animation: kn-fade 1.4s var(--ease-out) 0.2s both; }
}
@keyframes kn-rise { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } }
@keyframes kn-fade { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes kn-drip { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }

/* The nexus diagram */
.nexus { margin: 0; }
.nexus__svg { width: 100%; height: auto; overflow: visible; }
.nx-ring { fill: none; stroke: var(--kn-gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
.nx-ring--back { opacity: 0.22; }
.nx-ring--front { opacity: 0.62; }
.nx-spoke { stroke: var(--kn-gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
.nx-dot { fill: var(--kn-ivory); }
.nx-node[data-ring="0"] .nx-dot { fill: var(--kn-gold); }
.nx-node[data-ring="2"] .nx-dot { fill: var(--kn-navy); stroke: var(--kn-ivory); stroke-width: 1.5; }
.nx-halo { fill: rgba(198, 165, 104, 0); stroke: var(--kn-gold); stroke-opacity: 0; stroke-width: 1; transition: stroke-opacity var(--dur-fast) linear, fill var(--dur-fast) linear; }
.nx-label { fill: var(--kn-ivory); font-family: var(--font-sans); font-size: 16px; font-weight: 500; }
.nexus__legend ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.nexus__key { display: inline-flex; align-items: center; gap: var(--space-2); }
.nexus__swatch { position: relative; width: 1.75rem; height: 0.5rem; }
.nexus__swatch::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--kn-gold); opacity: 0.8; }
.nexus__swatch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--kn-gold); }
.nexus__key--1 .nexus__swatch::before { border-top-style: dashed; }
.nexus__key--1 .nexus__swatch::after { background: var(--kn-ivory); }
.nexus__key--2 .nexus__swatch::before { border-top-style: dotted; border-top-width: 2px; }
.nexus__key--2 .nexus__swatch::after { background: var(--kn-navy); border: 1.5px solid var(--kn-ivory); }
.nx-node { cursor: pointer; }
.nx-node:hover .nx-halo, .nx-node:focus-visible .nx-halo { stroke-opacity: 0.9; fill: rgba(198, 165, 104, 0.12); }
.nx-node:hover .nx-label, .nx-node:focus-visible .nx-label { fill: var(--kn-gold); }
.nx-node:focus-visible { box-shadow: none; }
.nx-core__plate { fill: var(--kn-navy-deep); stroke: var(--kn-gold); stroke-opacity: 0.55; }
.nx-core__ring { fill: none; stroke: var(--kn-gold); stroke-opacity: 0.3; stroke-dasharray: 2 5; }

@media (max-width: 63.99rem) {
  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; grid-template-areas: "tag" "title" "copy" "visual"; padding-block: var(--space-9) var(--space-4); }
  .hero__visual { max-width: 44rem; width: 100%; margin: var(--space-7) auto 0; }
}
@media (max-width: 39.99rem) {
  .nx-label { display: none; }
  .hero__visual { margin-inline: calc(-1 * var(--space-3)); width: calc(100% + 2 * var(--space-3)); }
  .hero .actions .button { flex: 1 1 100%; }
}

/* ---------- Sections ---------- */
.section { position: relative; padding-block: var(--section-pad); }
.section--tight { padding-block: var(--space-10); }
.section--deep { background: var(--kn-navy-deep); }
.section--ivory {
  background: var(--color-bg-light); color: var(--color-text-on-light);
  --color-text: var(--kn-navy); --color-text-muted: var(--color-text-muted-on-light); --color-line: var(--color-line-on-light);
  --color-line-strong: rgba(23, 35, 45, 0.3); --color-accent: var(--kn-gold-ink); --focus-ring: var(--focus-ring-on-light);
}
.section--ivory ::selection { background: var(--kn-navy); color: var(--kn-ivory); }
.section--ivory .button--ghost:hover { border-color: var(--kn-navy); color: var(--kn-navy); }
.section-head { display: grid; gap: var(--space-4); max-width: 46rem; margin-bottom: var(--space-8); }
.section-title { font-size: var(--text-2xl); font-weight: 540; font-stretch: 114%; line-height: 1.06; letter-spacing: -0.02em; }
.section-title--sm { font-size: var(--text-xl); }
.section-lead { font-size: var(--text-md); line-height: 1.55; color: var(--color-text-muted); max-width: 40rem; }
.empty { padding: var(--space-6); border: 1px dashed var(--color-line-strong); border-radius: var(--radius-sm); color: var(--color-text-muted); }
.empty a { color: var(--color-accent); }

/* Reveal: added by site.js only when motion is allowed; content is visible without JS */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Home: what the group is ---------- */
.group__intro { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; margin-bottom: var(--space-10); }
.group__text { display: grid; gap: var(--space-5); max-width: 44rem; }
.group__text p:not(.statement) { color: var(--color-text-muted); font-size: var(--text-md); line-height: 1.6; }
.statement { font-family: var(--font-serif); font-size: var(--text-xl); line-height: 1.3; font-weight: 420; letter-spacing: -0.01em; color: var(--kn-navy); }

.flow { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.flow::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--kn-gold-ink); opacity: 0.55; }
.flow__step { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-7) var(--space-7) 0 0; }
.flow__step::before {
  content: ""; position: absolute; top: -5px; left: 0; width: 11px; height: 11px; border-radius: 50%;
  background: var(--kn-ivory); border: 1.5px solid var(--kn-gold-ink);
}
.flow__step:first-child::before { background: var(--kn-gold-ink); }
.flow__title { font-size: var(--text-lg); font-stretch: 110%; font-weight: 560; letter-spacing: -0.01em; }
.flow__step > p { color: var(--color-text-muted); }
.flow__items { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.flow__items li { padding: 0.2rem 0.65rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-xs); font-size: var(--text-xs); font-weight: 500; color: var(--kn-navy); }
.flow__step .text-link { margin-top: auto; padding-top: var(--space-3); align-self: flex-start; }

/* ---------- Services ---------- */
.service-list { border-top: 1px solid var(--color-line); }
.service { border-bottom: 1px solid var(--color-line); padding-block: var(--space-7); }
.service__body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); gap: var(--space-3) var(--space-7); align-items: start; }
.service__title { font-size: var(--text-lg); font-stretch: 108%; font-weight: 560; line-height: 1.2; }
.service__desc { color: var(--color-text-muted); }
.service__uses-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-accent); margin-bottom: var(--space-2); }
.service__uses ul { list-style: none; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.service__uses li { position: relative; padding-left: 1.1rem; }
.service__uses li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.6rem; height: 1px; background: var(--color-accent); }

.service--detailed { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; padding-block: var(--space-9); }
.service--detailed .service__body { grid-template-columns: 1fr; gap: var(--space-4); max-width: 40rem; }
.service--detailed .service__title { font-size: var(--text-xl); font-stretch: 112%; }
.service--detailed .service__desc { font-size: var(--text-md); line-height: 1.55; }
.service--detailed .service__uses { margin-top: var(--space-2); }
.service--detailed .text-link { margin-top: var(--space-2); justify-self: start; }
.service__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--kn-navy-raised);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer));
}
.service__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.55) contrast(1.05) brightness(0.9); }
.service__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(23, 35, 45, 0) 40%, rgba(23, 35, 45, 0.55)); }
.service__media--empty, .venture__media--empty, .product__media--empty, .story__media--empty {
  background:
    radial-gradient(circle at 70% 60%, transparent 0 22%, rgba(198, 165, 104, 0.22) 22.2% 22.6%, transparent 22.8% 38%, rgba(198, 165, 104, 0.14) 38.2% 38.6%, transparent 38.8%),
    var(--kn-navy-raised);
}

/* ---------- Ventures ---------- */
.venture-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.venture-grid--preview { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.venture-grid--preview > .venture--large { grid-row: span 2; }
.venture-grid--preview:has(> :only-child) { grid-template-columns: 1fr; }
.venture {
  position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--kn-navy-raised);
  border: 1px solid var(--color-line); border-radius: var(--radius-xs); overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.venture__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--kn-navy); }
.venture--large .venture__media { aspect-ratio: auto; flex: 1 1 18rem; min-height: 16rem; }
.venture__media img {
  width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.85) sepia(0.12) contrast(1.05) brightness(0.78);
  transition: filter var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.venture__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 35, 45, 0) 35%, rgba(23, 35, 45, 0.75)); pointer-events: none; }
.venture__mark { position: absolute; z-index: 1; left: var(--space-5); bottom: var(--space-4); }
.venture__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-6); flex: 1; }
.venture--large .venture__body { flex: 0 0 auto; }
.venture__category { font-size: var(--text-xs); font-weight: 600; color: var(--kn-gold); }
.venture__name { font-size: var(--text-lg); font-stretch: 110%; font-weight: 560; line-height: 1.15; letter-spacing: -0.01em; }
.venture--large .venture__name { font-size: var(--text-xl); }
.venture__link { text-decoration: none; }
.venture__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.venture__link:focus-visible { box-shadow: none; }
.venture:has(.venture__link:focus-visible) { box-shadow: var(--focus-ring); }
.venture__desc { color: var(--color-text-muted); font-size: var(--text-sm); }
.venture__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); }
.venture__visit { font-size: var(--text-sm); font-weight: 600; color: var(--kn-gold); text-decoration: underline; text-decoration-color: rgba(198, 165, 104, 0.4); text-underline-offset: 0.35em; }
.status { display: inline-block; padding: 0.15rem 0.65rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); font-size: var(--text-xs); color: var(--color-text-muted); }
@media (hover: hover) {
  .venture:hover { border-color: rgba(198, 165, 104, 0.55); transform: var(--hover-lift); box-shadow: var(--shadow-lift); }
  .venture:hover .venture__media img { filter: none; transform: scale(1.035); }
  .venture:hover .venture__visit { text-decoration-color: currentColor; }
}
.venture:focus-within .venture__media img { filter: none; }

.mark {
  display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; flex: none;
  background: var(--kn-navy-deep); border: 1px solid rgba(198, 165, 104, 0.6); border-radius: var(--radius-xs);
  color: var(--kn-gold); font-size: var(--text-md); font-weight: 600; font-stretch: 120%; letter-spacing: 0.04em;
}
.mark--logo { background: var(--kn-ivory); border-color: transparent; padding: 0.4rem; }
.mark--logo img { width: 100%; height: 100%; object-fit: contain; }
.mark--sm { width: 2.5rem; height: 2.5rem; font-size: var(--text-xs); }
.mark--xl { width: 7rem; height: 7rem; font-size: var(--text-2xl); }

/* ---------- Products ---------- */
.product-list { display: grid; }
.product { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-9); align-items: center; padding-block: var(--space-9); border-top: 1px solid var(--color-line); }
.product:first-child { border-top: 0; padding-top: 0; }
.product--flip .product__media { order: 2; }
.product__media {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--kn-navy-raised);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
.product__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) brightness(0.92); }
.product__body { display: grid; gap: var(--space-4); }
.product__head { display: flex; align-items: center; gap: var(--space-3); }
.product__category { font-size: var(--text-sm); font-weight: 600; color: var(--kn-gold); }
.product__name { font-size: var(--text-xl); font-stretch: 114%; font-weight: 560; letter-spacing: -0.015em; }
.product__desc { font-size: var(--text-md); line-height: 1.55; color: var(--color-text-muted); }
.product__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.product__facts dt { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.product__facts dd { font-size: var(--text-sm); font-weight: 500; overflow-wrap: anywhere; }
.product__facts a { color: var(--kn-gold); }

/* ---------- Stories ---------- */
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.story { position: relative; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.story__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-xs); background: var(--kn-navy-raised); }
.story__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform var(--dur-slow) var(--ease-out); }
.story__body { display: grid; gap: var(--space-3); }
.story__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.story__meta span { color: var(--color-accent); font-weight: 600; }
.story__title { font-size: var(--text-lg); font-stretch: 106%; font-weight: 560; line-height: 1.2; letter-spacing: -0.01em; }
.story__title a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur-base) var(--ease-out); }
.story__title a::after { content: ""; position: absolute; inset: 0; }
.story__title a:focus-visible { box-shadow: none; }
.story:has(.story__title a:focus-visible) { box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.story__excerpt { color: var(--color-text-muted); font-size: var(--text-sm); }
.story__more { font-size: var(--text-xs); color: var(--color-text-muted); }
@media (hover: hover) {
  .story:hover .story__title a { background-size: 100% 1px; }
  .story:hover .story__media img { transform: scale(1.03); }
}
.story--feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: center; padding-bottom: var(--space-8); border-bottom: 1px solid var(--color-line); }
.story--feature .story__media { aspect-ratio: 16 / 10; }
.story--feature .story__title { font-size: var(--text-xl); font-stretch: 112%; }
.story--feature .story__excerpt { font-size: var(--text-md); }

.filters ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.filters a { display: inline-block; padding: 0.45rem 1rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); font-size: var(--text-sm); text-decoration: none; color: var(--color-text-muted); }
.filters a:hover { color: var(--kn-ivory); border-color: var(--kn-ivory); }
.filters a[aria-current="true"] { background: var(--kn-gold); border-color: var(--kn-gold); color: var(--kn-navy); font-weight: 600; }

/* ---------- Clients ---------- */
.client-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.client { display: grid; place-items: center; min-height: 6.5rem; padding: var(--space-5); border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.client a { display: grid; place-items: center; width: 100%; height: 100%; text-decoration: none; }
.client img { max-height: 2.75rem; max-width: 8.5rem; object-fit: contain; filter: grayscale(1) brightness(1.6); opacity: 0.8; transition: opacity var(--dur-fast) linear, filter var(--dur-fast) linear; }
.client a:hover img { filter: none; opacity: 1; }
.client span { font-weight: 600; font-stretch: 110%; color: var(--color-text-muted); }

/* ---------- Name / meaning ---------- */
.name__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-9); align-items: center; }
.name__grid .section-lead { margin-block: var(--space-4) var(--space-5); }
.meaning { display: grid; }
.meaning > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-5); align-items: baseline; padding-block: var(--space-6); border-top: 1px solid var(--color-line); }
.meaning > div:last-child { border-bottom: 1px solid var(--color-line); }
.meaning dt { font-family: var(--font-serif); font-size: clamp(3rem, 1.8rem + 4.4vw, 5.5rem); font-weight: 430; line-height: 0.95; letter-spacing: -0.025em; color: var(--kn-navy); }
.meaning dd { font-size: var(--text-md); line-height: 1.5; color: var(--color-text-muted); }

/* ---------- About ---------- */
.pv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-9); }
.pv__item { display: grid; gap: var(--space-4); align-content: start; padding-top: var(--space-5); border-top: 1px solid var(--kn-gold); }
.pv__item h3 { font-size: var(--text-sm); font-weight: 600; color: var(--kn-gold); }
.pv__item p { font-family: var(--font-serif); font-size: var(--text-xl); line-height: 1.3; font-weight: 420; letter-spacing: -0.01em; }
.areas { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.areas a { display: grid; gap: var(--space-2); align-content: start; height: 100%; padding: var(--space-5) 0; border-top: 1px solid var(--color-line-strong); text-decoration: none; color: var(--color-text-muted); transition: border-color var(--dur-fast) var(--ease-out); }
.areas__title { font-size: var(--text-lg); font-stretch: 110%; font-weight: 560; color: var(--kn-ivory); transition: color var(--dur-fast) var(--ease-out); }
.areas a:hover { border-color: var(--kn-gold); }
.areas a:hover .areas__title { color: var(--kn-gold); }

/* ---------- Principles and steps ---------- */
.principles { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
.principles li { display: grid; gap: var(--space-3); align-content: start; padding-left: var(--space-5); border-left: 1px solid var(--color-line-strong); }
.principles h3 { font-size: var(--text-md); font-stretch: 108%; font-weight: 600; }
.principles p { color: var(--color-text-muted); }
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
.steps li { counter-increment: step; display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-5); border-top: 2px solid var(--kn-navy); }
.steps li::before { content: counter(step, decimal-leading-zero); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--kn-gold-ink); }
.steps h3 { font-size: var(--text-md); font-stretch: 108%; font-weight: 600; }
.steps p { color: var(--color-text-muted); }
.split-note { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: baseline; }
.split-note p { color: var(--color-text-muted); font-size: var(--text-md); }
.split-note .text-link { margin-left: var(--space-2); }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(180deg, var(--kn-navy-raised), var(--kn-navy)); border-top: 1px solid var(--color-line); }
.cta-band__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-9); align-items: center; }
.cta-band .section-lead { margin-top: var(--space-4); }
.paths { list-style: none; display: grid; gap: var(--space-3); }
.path {
  position: relative; display: grid; gap: var(--space-1); padding: var(--space-5) var(--space-9) var(--space-5) var(--space-6);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-xs); text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.path::after {
  content: ""; position: absolute; right: var(--space-6); top: 50%; width: 0.7rem; height: 0.7rem; margin-top: -0.35rem;
  border-top: 1.5px solid var(--kn-gold); border-right: 1.5px solid var(--kn-gold); transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.path__title { font-size: var(--text-md); font-stretch: 108%; font-weight: 600; }
.path__text { font-size: var(--text-sm); color: var(--color-text-muted); }
.path:hover { border-color: var(--kn-gold); background: rgba(198, 165, 104, 0.06); }
.path:hover::after { transform: translateX(3px) rotate(45deg); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + var(--space-9)); padding-bottom: var(--space-10);
  background: radial-gradient(ellipse 60% 70% at 85% 30%, rgba(198, 165, 104, 0.08), transparent 70%), var(--kn-navy);
  border-bottom: 1px solid var(--color-line);
}
.page-hero__art {
  position: absolute; z-index: -1; right: max(-6rem, calc((100vw - var(--width-page)) / 2 - 10rem)); top: 50%;
  width: min(46rem, 62vw); aspect-ratio: 1; transform: translateY(-42%);
  background: no-repeat center / contain; opacity: 0.9; pointer-events: none;
}
.page-hero--orbit .page-hero__art { background-image: url("/assets/art/orbit.svg"); }
.page-hero--stack .page-hero__art { background-image: url("/assets/art/stack.svg"); }
.page-hero--frames .page-hero__art { background-image: url("/assets/art/frames.svg"); }
.page-hero--constellation .page-hero__art { background-image: url("/assets/art/constellation.svg"); }
.page-hero--arch .page-hero__art { background-image: url("/assets/art/arch.svg"); }
.page-hero--lines .page-hero__art { background-image: url("/assets/art/lines.svg"); }
.page-hero--signal .page-hero__art { background-image: url("/assets/art/signal.svg"); }
.page-hero__grid { max-width: 50rem; }
.page-hero__title { font-size: clamp(2.4rem, 1.3rem + 4.2vw, 4.75rem); font-weight: 540; font-stretch: 116%; line-height: 1.04; letter-spacing: -0.025em; margin-top: var(--space-6); }
.page-hero__lead { margin-top: var(--space-5); max-width: 40rem; font-size: var(--text-md); line-height: 1.55; color: rgba(245, 241, 232, 0.82); }
@media (max-width: 63.99rem) { .page-hero__art { opacity: 0.5; } }
@media (max-width: 47.99rem) {
  .page-hero__art { width: 120vw; right: -60vw; top: 2rem; transform: none; opacity: 0.35; }
}

.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.breadcrumbs li + li::before { content: "/"; color: var(--color-line-strong); }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--kn-ivory); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--kn-ivory); max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Article ---------- */
.article__header {
  margin-top: calc(-1 * var(--header-h)); padding-top: calc(var(--header-h) + var(--space-9)); padding-bottom: var(--space-11);
  background: radial-gradient(ellipse 60% 80% at 80% 0%, rgba(198, 165, 104, 0.08), transparent 70%), var(--kn-navy);
}
.article__kicker { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); font-size: var(--text-sm); font-weight: 600; color: var(--kn-gold); }
.article__kicker span + span { padding-left: var(--space-3); border-left: 1px solid var(--color-line-strong); }
.article__title { margin-top: var(--space-4); font-size: clamp(2.1rem, 1.3rem + 3vw, 3.75rem); font-weight: 540; font-stretch: 112%; line-height: 1.06; letter-spacing: -0.02em; }
.article__lead { margin-top: var(--space-5); font-family: var(--font-serif); font-size: var(--text-lg); line-height: 1.45; color: rgba(245, 241, 232, 0.85); }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); }
.article__main { background: var(--kn-ivory); color: var(--kn-navy); padding-bottom: var(--space-10);
  --color-text-muted: var(--color-text-muted-on-light); --color-line: var(--color-line-on-light); --color-line-strong: rgba(23, 35, 45, 0.3); --color-accent: var(--kn-gold-ink); --focus-ring: var(--focus-ring-on-light); }
.article__cover { max-width: calc(68rem + 2 * var(--gutter)); margin: 0 auto; transform: translateY(calc(-1 * var(--space-9))); margin-bottom: calc(-1 * var(--space-9) + var(--space-8)); }
.article__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-xs); }
.article__main > .container:first-child { padding-top: var(--space-9); }
.prose { font-family: var(--font-serif); font-size: 1.1875rem; line-height: var(--leading-serif); max-width: var(--width-text); color: #23313B; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-family: var(--font-sans); font-size: var(--text-lg); font-stretch: 110%; font-weight: 600; line-height: 1.25; margin-top: 2em; color: var(--kn-navy); }
.prose ul { padding-left: 1.25em; }
.prose li + li { margin-top: 0.4em; }
.prose a { color: var(--kn-gold-ink); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); }
.tags li { padding: 0.2rem 0.7rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-xs); font-size: var(--text-xs); }
.share { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-line); max-width: var(--width-text); }
.share__title { font-size: var(--text-sm); font-weight: 600; color: var(--kn-gold-ink); }
.share ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.share a, .share button { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--space-4); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: transparent; font-size: var(--text-sm); text-decoration: none; cursor: pointer; color: var(--kn-navy); }
.share a:hover, .share button:hover { border-color: var(--kn-navy); }
.share__status { min-height: 1.5em; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-success-on-light); }
.text-link--back { margin-top: var(--space-6); }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-10); align-items: start; }
.form-note { margin: var(--space-3) 0 var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.field { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--text-sm); font-weight: 600; }
.field__optional { font-weight: 400; color: var(--color-text-muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.75rem 0.9rem; background: var(--kn-navy-deep); color: var(--kn-ivory);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field select { appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--kn-gold) 50%), linear-gradient(135deg, var(--kn-gold) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.9rem) 55%; background-size: 0.36rem 0.36rem; background-repeat: no-repeat; }
.field textarea { min-height: 10rem; resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(245, 241, 232, 0.4); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--kn-gold); box-shadow: 0 0 0 3px rgba(198, 165, 104, 0.35); border-radius: var(--radius-sm); }
.field [aria-invalid="true"] { border-color: var(--color-error); }
.field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.field__error { font-size: var(--text-sm); color: var(--color-error); }
.field__error:empty { display: none; }
.field--trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
.form__status { margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); border-left: 3px solid; border-radius: var(--radius-xs); font-weight: 500; }
.form__status:empty { display: none; }
.form__status.is-success { border-color: var(--color-success); background: rgba(143, 209, 168, 0.08); color: var(--color-success); }
.form__status.is-error { border-color: var(--color-error); background: rgba(232, 165, 152, 0.08); color: var(--color-error); }
.form__status:focus-visible { box-shadow: var(--focus-ring); }
.form__actions { margin-top: var(--space-2); }
.form__actions .button { min-width: 12rem; }
.contact__aside { display: grid; gap: var(--space-6); }
.contact__block { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.contact__heading { font-size: var(--text-sm); font-weight: 600; color: var(--kn-gold); }
.contact__block p { color: var(--color-text-muted); font-size: var(--text-sm); }
.contact__email { font-size: var(--text-lg); font-weight: 560; font-stretch: 108%; color: var(--kn-ivory) !important; text-decoration-color: rgba(198, 165, 104, 0.6); overflow-wrap: anywhere; }
.contact__email:hover { text-decoration-color: var(--kn-gold); }
.contact__list { list-style: none; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.contact__list li { position: relative; padding-left: 1.1rem; }
.contact__list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.6rem; height: 1px; background: var(--kn-gold); }

/* ---------- Footer ---------- */
.site-footer { background: var(--kn-navy-deep); border-top: 1px solid var(--color-line); padding-block: var(--space-10) var(--space-6); font-size: var(--text-sm); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.brand--footer { width: 13rem; margin-bottom: var(--space-5); }
.site-footer__brand p { max-width: 24rem; color: var(--color-text-muted); }
.site-footer__tagline { margin-top: var(--space-4); color: var(--kn-gold) !important; font-weight: 600; font-stretch: 110%; }
.site-footer__heading { font-size: var(--text-xs); font-weight: 600; color: var(--kn-gold); margin-bottom: var(--space-4); }
.site-footer ul { list-style: none; display: grid; gap: var(--space-3); }
.site-footer ul a { color: rgba(245, 241, 232, 0.8); text-decoration: none; overflow-wrap: anywhere; }
.site-footer ul a:hover { color: var(--kn-gold); text-decoration: underline; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-10); padding-top: var(--space-5); border-top: 1px solid var(--color-line); color: var(--color-text-muted); font-size: var(--text-xs); }
.site-footer__base a { color: var(--color-text-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 63.99rem) {
  .group__intro, .name__grid, .cta-band__inner, .contact__grid, .split-note { grid-template-columns: 1fr; gap: var(--space-6); }
  .group__intro { margin-bottom: var(--space-9); }
  .service__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .service__body .service__uses { grid-column: 1 / -1; }
  .service--detailed { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-8); }
  .venture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .venture-grid--preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .venture-grid--preview > .venture--large { grid-column: 1 / -1; grid-row: auto; }
  .venture--large .venture__media { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story--feature { grid-template-columns: 1fr; gap: var(--space-5); }
  .product { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-8); }
  .product--flip .product__media { order: 0; }
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
  .contact__grid { gap: var(--space-9); }
}
@media (max-width: 47.99rem) {
  .flow { grid-template-columns: 1fr; padding-left: var(--space-6); }
  .flow::before { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .flow__step { padding: 0 0 var(--space-8) var(--space-2); }
  .flow__step:last-child { padding-bottom: 0; }
  .flow__step::before { top: 0.45rem; left: calc(-1 * var(--space-6)); }
  .service__body { grid-template-columns: 1fr; }
  .principles, .steps, .areas, .pv { grid-template-columns: 1fr; gap: var(--space-6); }
  .meaning > div { grid-template-columns: 1fr; gap: var(--space-3); }
  .form__grid { grid-template-columns: 1fr; }
  .form__actions .button { width: 100%; }
  .path { padding-right: var(--space-8); }
}
@media (max-width: 39.99rem) {
  .venture-grid, .venture-grid--preview, .story-grid { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-5); }
  .product__facts { grid-template-columns: 1fr; }
  .breadcrumbs [aria-current] { max-width: 18ch; }
}

/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media print {
  .site-header, .site-footer, .cta-band, .share, .hero__visual, .hero__foot, .page-hero__art, .skip-link { display: none !important; }
  body, .section--ivory, .article__main { background: #fff; color: #000; }
  .hero, .page-hero, .article__header { margin-top: 0; padding-top: 1rem; background: none; color: #000; min-height: 0; }
  a { color: #000; }
}