/* Page composition only. Visual values come from the canonical website kit. */
html { scroll-behavior: smooth; }
.wrap { width: min(var(--ks-layout-max), calc(100% - var(--ks-gutter) * 2)); margin-inline: auto; }
.section { padding-block: var(--ks-section-space); border-top: var(--ks-border-hairline) solid var(--ks-border); }
.studio-page :is(section, article, main, aside, .field) { min-width: 0; }
.studio-page :is(h1,h2,h3) { max-width: var(--ks-layout-reading); }
.studio-page p { max-width: var(--ks-layout-reading); }
.studio-page p + p { margin-top: var(--ks-space-4); }
.eyebrow { margin-bottom: var(--ks-space-4) !important; color: var(--ks-text-secondary); font: var(--ks-label-weight) var(--ks-label-size)/var(--ks-label-line) var(--ks-label-font); letter-spacing: var(--ks-label-tracking); text-transform: uppercase; }
.section-heading { display: grid; gap: var(--ks-space-4); margin-bottom: var(--ks-space-8); max-width: var(--ks-layout-reading); }
.section-heading .eyebrow { margin: 0 !important; }
/* One large ghost figure per numbered section. It is hidden from assistive
   technology because the eyebrow beside it already names the section, and the
   readout reads the number from here. */
.section-index {
  display: block;
  font: var(--ks-display-weight) var(--ks-display-size)/0.85 var(--ks-display-font);
  letter-spacing: var(--ks-display-tracking);
  font-variant-numeric: tabular-nums;
  color: var(--ks-border);
}
.section-heading > p:last-child { color: var(--ks-text-secondary); }
.icon { width: var(--ks-control-icon); height: var(--ks-control-icon); flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; vertical-align: middle; }
.icon-sprite, .visually-hidden, .hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav-shell { justify-content: space-between; }
.nav-links { align-items: center; }
.ks-nav .ks-button { color: var(--ks-canvas); border: var(--ks-border-hairline) solid var(--ks-text); padding-inline: var(--ks-space-4); }
.ks-nav .ks-button:hover { color: var(--ks-canvas); border-color: var(--ks-primary-hover); }
.menu-toggle { display: none; }
.icon-close { display: none; }
.menu-toggle[aria-expanded=true] .icon-menu { display: none; }
.menu-toggle[aria-expanded=true] .icon-close { display: block; }
/* HERO. One statement, one column, feature rhythm. The dark panel that used to
   share this grid is now the band directly below it, so the value flip lands
   immediately after the headline instead of beside it. */
.hero { padding-top: 50px; padding-bottom: calc(var(--ks-section-space) * 1.5); background-color: var(--ks-canvas); background-image: url('/assets/kirari-hero-production-flow.webp'); background-position: center; background-repeat: no-repeat; background-size: cover; }
.hero-copy { display: grid; justify-items: center; gap: var(--ks-space-6); text-align: center; }
/* Line breaks in the statement are authored, so each line is its own mask. */
.hero-copy h1 { max-width: 22ch; margin: 0 auto; text-wrap: balance; }
.hero-subtitle { max-width: 48ch; color: var(--ks-accent-inverse); font: var(--ks-label-weight) var(--ks-label-size)/var(--ks-label-line) var(--ks-label-font); letter-spacing: var(--ks-label-tracking); text-transform: uppercase; }
.hero-lede { max-width: 48ch; margin-inline: auto; color: var(--ks-text-secondary); }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--ks-space-3); margin-top: var(--ks-space-8); }
/* The one surface with the slower register: a short hold, a wider stagger, and
   a longer travel. Scoped to the hero, so no other section and no guide route
   can inherit it. The statement duration itself rides on the reveal modifier. */
.hero-copy { --ks-reveal-hold: var(--ks-motion-hold); --ks-motion-stagger: var(--ks-motion-stagger-slow); --ks-motion-shift: var(--ks-motion-travel); }

/* PRODUCTION FRAME BAND. Full width and dark. The signature chamfer stays on
   the one contained surface, where a cut corner still reads as a cut corner. */
.frame-band { padding-block: calc(var(--ks-section-space) * 1.5); border-top: 0; background: var(--ks-surface); }
.frame-grid { display: grid; grid-template-columns: minmax(0,6fr) minmax(0,6fr); gap: var(--ks-space-16); align-items: center; }
.frame-copy { display: grid; align-content: start; gap: var(--ks-space-6); }

.frame-copy .ks-button { justify-self: start; }
.frame-copy .ks-label { justify-self: start; padding: var(--ks-space-1) var(--ks-space-3); }
/* One hatched marker, the reference language at its smallest. */
.frame-mark { display: block; width: var(--ks-space-16); height: var(--ks-space-2); }
.frame-panel::before { background: var(--ks-surface-raised); }
.hero-sequence { list-style: none; margin: 0 !important; padding: 0 !important; }
.hero-sequence li { display: flex; align-items: baseline; gap: var(--ks-space-6); padding-block: var(--ks-space-3); border-top: var(--ks-border-hairline) solid var(--ks-border); margin: 0 !important; }
.hero-sequence span { color: var(--ks-text-secondary); font: var(--ks-meta-weight) var(--ks-meta-size)/var(--ks-meta-line) var(--ks-meta-font); }
.services-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); border-top: var(--ks-border-hairline) solid var(--ks-border); }
.service-card { grid-column: span 4; display: grid; align-content: start; gap: var(--ks-space-4); padding: var(--ks-space-6); border-bottom: var(--ks-border-hairline) solid var(--ks-border); border-right: var(--ks-border-hairline) solid var(--ks-border); }
.service-card:nth-child(3) { border-right: 0; }
.service-card:nth-child(n+4) { grid-column: span 6; }
.service-card:last-child { border-right: 0; }
.service-card p { color: var(--ks-text-secondary); }
.service-number { color: var(--ks-accent); font: var(--ks-meta-weight) var(--ks-meta-size)/var(--ks-meta-line) var(--ks-meta-font); }
.service-formats { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--ks-space-8); padding-top: var(--ks-space-8); }
.service-formats h2 { font-size: var(--ks-h3-size); line-height: var(--ks-h3-line); letter-spacing: var(--ks-h3-tracking); }
.service-formats .section-heading { margin: 0; gap: var(--ks-space-3); }
.service-formats .eyebrow { display: none; }
.format-cloud { display: flex; flex-wrap: wrap; align-content: start; gap: var(--ks-space-2); }
.format-cloud span { display: inline-flex; align-items: center; padding: var(--ks-space-2) var(--ks-space-3); background: var(--ks-surface); font: var(--ks-body-small-weight) var(--ks-body-small-size)/var(--ks-body-small-line) var(--ks-body-small-font); }
.portfolio { background: var(--ks-surface); }
.filter-bar { display: flex; gap: var(--ks-space-2); flex-wrap: wrap; }
.filter-chip { min-height: var(--ks-control-height); border-radius: var(--ks-radius-control); font-family: var(--ks-font-sans); font-size: var(--ks-nav-size); }
.filter-chip:active { background: var(--ks-accent-soft); }
.filter-chip[aria-pressed=true]:active { background: var(--ks-primary-active); }
.filter-count { color: var(--ks-text-secondary); margin-block: var(--ks-space-4) !important; font: var(--ks-body-small-weight) var(--ks-body-small-size)/var(--ks-body-small-line) var(--ks-body-small-font); }
/* The same six slots at three widths and two ratios. Three wide and three
   narrow fill every row exactly, and the ratios give the empty states the
   rhythm that identical boxes could not. */
.portfolio-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--ks-space-6); }
.portfolio-card--wide { grid-column: span 2; }
.portfolio-card--tall .media-placeholder { aspect-ratio: 3/4; }
.portfolio-card { border: var(--ks-border-hairline) solid var(--ks-border); background: var(--ks-canvas); }
.portfolio-card.is-filtered-out { display: none; }
/* An empty slot is a bracketed frame, which is what the references use a
   corner tick for: marking a measured area that has nothing in it yet. */
.media-placeholder { aspect-ratio: 16/9; display: grid; place-items: center; padding: var(--ks-space-6); background: var(--ks-canvas); border-bottom: var(--ks-border-hairline) dashed var(--ks-border-control); color: var(--ks-text-muted); text-align: center; font: var(--ks-meta-weight) var(--ks-meta-size)/var(--ks-meta-line) var(--ks-meta-font); }
.media-placeholder--image { position: relative; overflow: hidden; padding: 0; border-bottom-style: solid; }
.media-placeholder--image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-placeholder--image span { position: absolute; z-index: 2; inset: auto auto var(--ks-space-4) var(--ks-space-4); padding: var(--ks-space-2) var(--ks-space-3); border: var(--ks-border-hairline) solid var(--ks-border-control); background: var(--ks-canvas); color: var(--ks-text-secondary); }
.media-placeholder--image::before, .media-placeholder--image::after { z-index: 2; }
.portfolio-copy { display: grid; gap: var(--ks-space-4); padding: var(--ks-space-6); }
.portfolio-copy .chip { justify-self: start; }
.portfolio-copy h3 { font-size: var(--ks-h4-size); line-height: var(--ks-h4-line); letter-spacing: var(--ks-h4-tracking); }
.portfolio-copy p { color: var(--ks-text-secondary); }
.process-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); counter-reset: step; border-top: var(--ks-border-hairline) solid var(--ks-border); }
.process-step { padding: var(--ks-space-6); border-bottom: var(--ks-border-hairline) solid var(--ks-border); counter-increment: step; }
.process-step::before { content: counter(step, decimal-leading-zero); display: block; color: var(--ks-accent); font: var(--ks-meta-weight) var(--ks-meta-size)/var(--ks-meta-line) var(--ks-meta-font); margin-bottom: var(--ks-space-4); }
.process-step h3 { font-size: var(--ks-h4-size); line-height: var(--ks-h4-line); margin-bottom: var(--ks-space-3); }
.process-step p { color: var(--ks-text-secondary); }
.studio-page :is(.pipeline-disclosure, .planning-disclosure, .brief-builder) { border-block: var(--ks-border-hairline) solid var(--ks-border-control); }
.studio-page :is(.pipeline-disclosure, .planning-disclosure, .brief-builder) > summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ks-space-3); min-height: var(--ks-control-height); padding-block: var(--ks-space-4); font-weight: var(--ks-weight-semibold); cursor: pointer; list-style: none; }
.studio-page :is(.pipeline-disclosure, .planning-disclosure, .brief-builder) > summary::-webkit-details-marker { display: none; }
.studio-page :is(.pipeline-disclosure, .planning-disclosure, .brief-builder) > summary::after { content: '+'; margin-left: auto; font-size: var(--ks-h3-size); }
.studio-page :is(.pipeline-disclosure, .planning-disclosure, .brief-builder)[open] > summary::after { content: '−'; }
.disclosure-body { padding-block: var(--ks-space-6); }
.pipeline-disclosure { margin-top: var(--ks-space-8); }
.pipeline-disclosure h2 { font-size: var(--ks-h3-size); line-height: var(--ks-h3-line); }
.pipeline-track { gap: var(--ks-space-2); }
.pipeline-stage { flex: 1 1 0; text-align: left; padding: var(--ks-space-3); }
.pipeline-stage span { display: block; color: var(--ks-text-secondary); font: var(--ks-meta-weight) var(--ks-meta-size)/var(--ks-meta-line) var(--ks-meta-font); margin-bottom: var(--ks-space-2); }
.pipeline-stage strong { font: inherit; }
.pipeline-detail { display: flex; gap: var(--ks-space-4); padding: var(--ks-space-6); background: var(--ks-surface); margin-top: var(--ks-space-6); }
.pipeline-detail h3 { margin-bottom: var(--ks-space-3); }
.detail-flag { display: flex; align-items: center; gap: var(--ks-space-2); margin-top: var(--ks-space-4); color: var(--ks-text-secondary); font: var(--ks-body-small-weight) var(--ks-body-small-size)/var(--ks-body-small-line) var(--ks-body-small-font); }
.why { background: var(--ks-surface); padding-block: calc(var(--ks-section-space) * 1.5); }
.why .eyebrow, .why p { color: var(--ks-text-secondary); }
.why-grid, .faq-grid, .intake-layout { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,8fr); gap: var(--ks-space-16); align-items: start; }
.why-item { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--ks-space-6); padding-block: var(--ks-space-6); border-top: var(--ks-border-hairline) solid var(--ks-border); }
.why-item > span { color: var(--ks-accent); font: var(--ks-meta-weight) var(--ks-meta-size)/var(--ks-meta-line) var(--ks-meta-font); }
.why-item h3 { font-size: var(--ks-h4-size); line-height: var(--ks-h4-line); margin-bottom: var(--ks-space-3); }
.faq-body p { color: var(--ks-text-secondary); }
.intake { background: var(--ks-surface); }
.intake-copy > p:not(.eyebrow) { margin-top: var(--ks-space-6); color: var(--ks-text-secondary); }
.contact-note { margin-top: var(--ks-space-8); display: flex; gap: var(--ks-space-3); padding: var(--ks-space-4); border-left: var(--ks-border-emphasis) double var(--ks-border-strong); background: var(--ks-canvas); font: var(--ks-body-small-weight) var(--ks-body-small-size)/var(--ks-body-small-line) var(--ks-body-small-font); }
.brief-builder { margin-bottom: var(--ks-space-8); }
.builder-content { padding-block: var(--ks-space-6); }
.builder-content h3 { margin-bottom: var(--ks-space-4); }
.builder-content > p { color: var(--ks-text-secondary); margin-bottom: var(--ks-space-6); }
.builder-grid, .form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--ks-space-6); }
.field { align-content: start; }
.full { grid-column: 1 / -1; }
.form-group-title { padding-top: var(--ks-space-6); border-top: var(--ks-border-hairline) solid var(--ks-border-control); font-size: var(--ks-h4-size); line-height: var(--ks-h4-line); }
.form-group-title:first-child { padding-top: 0; border: 0; }
.required-label { color: var(--ks-text-secondary); font-weight: var(--ks-weight-regular); }
.builder-out { margin-block: var(--ks-space-6); display: flex; gap: var(--ks-space-3); padding: var(--ks-space-4); background: var(--ks-canvas); border-left: var(--ks-border-emphasis) solid var(--ks-accent); }
.builder-actions, .submit-row { display: flex; gap: var(--ks-space-3); flex-wrap: wrap; }
.field-error { display: none; align-items: flex-start; gap: var(--ks-space-2); font: var(--ks-body-small-weight) var(--ks-body-small-size)/var(--ks-body-small-line) var(--ks-body-small-font); }
.has-error .field-error { display: flex; }
.form-note { color: var(--ks-text-secondary); font: var(--ks-body-small-weight) var(--ks-body-small-size)/var(--ks-body-small-line) var(--ks-body-small-font); }
.form-result { display: none; gap: var(--ks-space-3); padding: var(--ks-space-4); background: var(--ks-info-bg); border: var(--ks-border-hairline) solid var(--ks-info-border); border-left-width: var(--ks-border-emphasis); }
.form-result.is-shown { display: flex; }
.form-result.is-error { background: var(--ks-error-bg); border-color: var(--ks-error-border); }
.form-result.is-success { background: var(--ks-success-bg); border-color: var(--ks-success-border); }
.retry-button { margin-top: var(--ks-space-4); }
.planning { padding-block: var(--ks-space-12); }
.planning-group + .planning-group { margin-top: var(--ks-space-12); }
.planning-group h2 { font-size: var(--ks-h3-size); line-height: var(--ks-h3-line); }
.systems-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--ks-space-6); }
.system-card, .workspace-card { border: var(--ks-border-hairline) dashed var(--ks-border-control); padding: var(--ks-space-6); }
.system-card h3 { font-size: var(--ks-h4-size); line-height: var(--ks-h4-line); margin-bottom: var(--ks-space-3); }
.system-card p { color: var(--ks-text-secondary); }
.system-label { display: flex; align-items: center; gap: var(--ks-space-2); margin-top: var(--ks-space-4); color: var(--ks-text-secondary); font: var(--ks-meta-weight) var(--ks-meta-size)/var(--ks-meta-line) var(--ks-meta-font); }
.workspace-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--ks-space-6); }
.workspace-card > .system-label { margin: 0 0 var(--ks-space-4); }
.preview-rows { margin-top: var(--ks-space-6); }
.preview-row { display: flex; justify-content: space-between; gap: var(--ks-space-4); padding-block: var(--ks-space-3); border-top: var(--ks-border-hairline) solid var(--ks-border); }
.preview-row span { color: var(--ks-text-secondary); }
.preview-row strong { font-weight: var(--ks-weight-medium); }
.footer-grid { display: grid; grid-template-columns: minmax(0,6fr) minmax(0,2fr) minmax(0,4fr); gap: var(--ks-space-8); }
.footer-grid h3 { font-size: var(--ks-h4-size); line-height: var(--ks-h4-line); margin-bottom: var(--ks-space-4); }
.footer-links { display: grid; }
.footer-links a, .footer-contact a { gap: var(--ks-space-3); overflow-wrap: anywhere; }
.footer-contact { margin-bottom: var(--ks-space-4) !important; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--ks-space-6); flex-wrap: wrap; border-top: var(--ks-border-hairline) solid var(--ks-border); margin-top: var(--ks-space-12); padding-top: var(--ks-space-6); color: var(--ks-text-secondary); font: var(--ks-meta-weight) var(--ks-meta-size)/var(--ks-meta-line) var(--ks-meta-font); }
.to-top { position: fixed; right: var(--ks-gutter); bottom: var(--ks-space-6); z-index: var(--ks-layer-raised); visibility: hidden; }
.to-top.is-shown { visibility: visible; }

.toast-stack { position: fixed; bottom: var(--ks-space-6); left: var(--ks-gutter); width: min(var(--ks-layout-dialog), calc(100% - var(--ks-gutter) * 2)); z-index: var(--ks-layer-toast); display: grid; gap: var(--ks-space-3); pointer-events: none; }
.toast { display: flex; align-items: center; gap: var(--ks-space-3); background: var(--ks-surface-raised); border: var(--ks-border-hairline) solid var(--ks-border-control); padding: var(--ks-space-4); box-shadow: var(--ks-shadow-overlay); pointer-events: auto; }
.toast p { flex: 1; }
.toast button { display: grid; place-items: center; width: var(--ks-control-height); height: var(--ks-control-height); background: transparent; border: var(--ks-border-hairline) solid var(--ks-border-control); border-radius: var(--ks-radius-control); }
.toast button:hover { background: var(--ks-surface); }

/* ---------------------------------------------------------------------------
   PAGE MOTION
   Composed from the shared motion layer. Nothing here introduces a duration,
   easing, distance, or color: those come from the kit. Every rule that hides
   something sits behind .ks-motion, which is armed only when scripting is
   available and reduced motion is not requested.
   --------------------------------------------------------------------------- */

/* Section readout. Sits outside the content column, so it appears only where
   the viewport is wider than the measure plus its gutters. */
.section-rail {
  position: fixed; left: var(--ks-space-4); top: 50%; transform: translateY(-50%);
  z-index: var(--ks-layer-raised); display: none; justify-items: center; gap: var(--ks-space-2);
  color: var(--ks-text-secondary); pointer-events: none;
  font: var(--ks-meta-weight) var(--ks-meta-size)/var(--ks-meta-line) var(--ks-meta-font);
  letter-spacing: var(--ks-meta-tracking);
}
.rail-index { color: var(--ks-text); font-weight: var(--ks-weight-semibold); }
.rail-line { width: var(--ks-border-hairline); height: var(--ks-space-8); background: var(--ks-border-control); }
.rail-label { writing-mode: vertical-rl; white-space: nowrap; margin-top: var(--ks-space-3); max-height: calc(var(--ks-space-24) * 1.5); overflow: hidden; text-transform: uppercase; letter-spacing: var(--ks-label-tracking); }
@media (min-width: 82rem) { .section-rail { display: grid; } }
/* Over a dark zone both fixed overlays switch to the inverse pairings, so
   the readout stays legible and the control keeps a 3:1 boundary. */
.section-rail.is-inverse { color: var(--ks-text-inverse-secondary); }
.section-rail.is-inverse .rail-index { color: var(--ks-text-inverse); }
.section-rail.is-inverse .rail-line { background: var(--ks-border-inverse); }
.to-top.is-inverse { background: var(--ks-text-inverse); border-color: var(--ks-text-inverse); color: var(--ks-inverse); }
.to-top.is-inverse:hover { background: var(--ks-accent-inverse); border-color: var(--ks-accent-inverse); color: var(--ks-inverse); }
.ks-motion .rail-index.is-updated { animation: ks-tick var(--ks-motion-standard) var(--ks-motion-ease); }
@keyframes ks-tick { from { opacity: 0; transform: translateY(calc(var(--ks-motion-shift) * -0.5)); } }

/* Back to top. Hidden state stays unfocusable, then slides the short distance
   it travels when pressed. */
.to-top {
  opacity: 0; transform: translateY(var(--ks-motion-shift));
  transition: opacity var(--ks-motion-standard) var(--ks-motion-ease), transform var(--ks-motion-standard) var(--ks-motion-ease), visibility 0s linear var(--ks-motion-standard);
}
.to-top.is-shown { opacity: 1; transform: none; transition-delay: 0s; }
.to-top.is-shown:active { transform: translateY(1px); }
.to-top:where(:hover,:focus-visible) > .icon { transform: translateY(calc(var(--ks-motion-shift) * -0.25)); }

/* Notifications enter from the edge they are docked to. */
.toast {
  opacity: 0; transform: translateX(calc(var(--ks-motion-shift) * -2));
  transition: opacity var(--ks-motion-standard) var(--ks-motion-ease), transform var(--ks-motion-standard) var(--ks-motion-ease);
}
.toast.is-shown { opacity: 1; transform: none; }

/* Filtering. Slots that stay visible redraw through a directional mask, so a
   changed result set reads as a change rather than a redraw. */
@media (prefers-reduced-motion: no-preference) {
  .ks-motion .portfolio-card.is-entering { animation: ks-card-in var(--ks-motion-deliberate) var(--ks-motion-ease) both; }
  .ks-motion .form-result.is-shown, .ks-motion .has-error .field-error { animation: ks-disclose var(--ks-motion-deliberate) var(--ks-motion-ease) both; }
  .ks-motion .nav-links.open { animation: ks-nav-in var(--ks-motion-standard) var(--ks-motion-ease); }
}
@keyframes ks-card-in { from { opacity: 0; clip-path: inset(0 100% 0 0); } }
@keyframes ks-nav-in { from { opacity: 0; transform: translateY(calc(var(--ks-motion-shift) * -1)); } }

/* Hover tracing. A hairline runs along the leading edge of a block that the
   pointer is over, matching the card contract in the shared layer. */
.service-card, .process-step, .system-card, .workspace-card, .portfolio-card { position: relative; }
.service-card::after, .process-step::after, .system-card::after, .workspace-card::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: var(--ks-stroke-strong);
  background: var(--ks-accent); pointer-events: none;
  transform: scaleY(0); transform-origin: center top;
  transition: transform var(--ks-motion-standard) var(--ks-motion-ease);
}
.service-card:hover::after, .process-step:hover::after, .system-card:hover::after, .workspace-card:hover::after { transform: scaleY(1); }
.portfolio-card::after {
  content: ''; position: absolute; inset: 0 0 auto; height: var(--ks-stroke-strong);
  background: var(--ks-text); pointer-events: none;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--ks-motion-standard) var(--ks-motion-ease);
}
.portfolio-card:where(:hover,:focus-within)::after { transform: scaleX(1); }
.media-placeholder { transition: border-color var(--ks-motion-standard) var(--ks-motion-ease), color var(--ks-motion-standard) var(--ks-motion-ease); }
.portfolio-card:hover .media-placeholder { border-bottom-color: var(--ks-text); color: var(--ks-text-secondary); }
.format-cloud span { transition: background-color var(--ks-motion-fast) var(--ks-motion-ease); }
.format-cloud span:hover { background: var(--ks-accent-soft); }
.preview-row, .hero-sequence li { transition: border-color var(--ks-motion-fast) var(--ks-motion-ease); }
.hero-sequence li:hover { border-top-color: var(--ks-border-strong); }

/* Controlled parallax, used once. The chamfered panel in the frame band drifts
   against the page as it scrolls, which reads as depth. It is driven by the
   scroll timeline, so it runs off the main thread and stops under reduced
   motion with the rest of the animation. */
@supports (animation-timeline: view()) {
  @media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
    .frame-panel { animation: ks-hero-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes ks-hero-drift { from { transform: translateY(var(--ks-motion-shift)); } to { transform: translateY(calc(var(--ks-motion-shift) * -1)); } }

@media (max-width: 63.999rem) {
  .frame-grid, .why-grid, .faq-grid, .intake-layout { gap: var(--ks-space-8); }
  .hero-actions .ks-button { flex-grow: 1; }
  .ks-js .menu-toggle { display: inline-flex; margin-left: auto; }
  .ks-js .nav-links { display: none; }
  .ks-js .nav-links.open { display: flex; }
  .nav-links { flex-basis: 100%; flex-direction: column; align-items: stretch; margin: 0; padding-bottom: var(--ks-space-4); gap: var(--ks-space-2); max-height: calc(100dvh - var(--ks-header-height)); overflow: auto; }
  .nav-links a { min-height: var(--ks-control-height); padding: var(--ks-space-3); }
  .pipeline-stage { flex-basis: calc(33.333% - var(--ks-space-2)); }
  .footer-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 47.999rem) {
  .hero { background-image: url('/assets/kirari-hero-production-flow-mobile.webp'); background-position: center top; background-size: 100% auto; }
  .frame-grid, .service-formats, .why-grid, .faq-grid, .intake-layout, .workspace-grid { grid-template-columns: minmax(0,1fr); }
  .section-index { font-size: var(--ks-h1-size); }
  .services-grid { display: block; }
  .service-card, .service-card:nth-child(3) { padding-inline: 0; border-right: 0; }
  .service-card { grid-template-columns: auto minmax(0,1fr); gap: var(--ks-space-3) var(--ks-space-6); }
  .service-card p { grid-column: 2; }
  .service-top { grid-row: span 2; }
  .portfolio-grid, .process-grid, .systems-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .process-step { padding: var(--ks-space-4); }
  .process-step:nth-child(odd) { padding-left: 0; }
  .process-step:nth-child(even) { padding-right: 0; }
  .builder-grid, .form-grid { grid-template-columns: minmax(0,1fr); }
  .intake-layout { gap: var(--ks-space-8); }
  .builder-actions .ks-button, .submit-row .ks-button { flex-grow: 1; }
  .media-placeholder { aspect-ratio: 4/3; padding: var(--ks-space-4); }
  .portfolio-copy { padding: var(--ks-space-6); }
  .footer-grid { grid-template-columns: minmax(0,1fr); }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: var(--ks-space-3); }
  .ks-header { position: relative; }
}
@media (max-width: 29.999rem) {
  .portfolio-grid, .systems-grid { grid-template-columns: minmax(0,1fr); }
  .portfolio-card--wide { grid-column: auto; }
  .pipeline-stage { flex-basis: calc(50% - var(--ks-space-2)); }
  .menu-toggle { padding-inline: var(--ks-space-3); gap: var(--ks-space-2); }
  .menu-toggle .icon { width: var(--ks-control-icon-small); height: var(--ks-control-icon-small); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (forced-colors: active) {
  .hero { background-image: none; }
  .why { background: Canvas; color: CanvasText; }
  .why :is(.eyebrow,p,.why-item > span) { color: CanvasText; }
  .filter-chip[aria-pressed=true] { outline: var(--ks-stroke-strong) solid Highlight; }
}
@media (forced-colors: active) {
  .service-card::after, .process-step::after, .system-card::after, .workspace-card::after, .portfolio-card::after { background: CanvasText; }
  .section-rail, .section-rail.is-inverse, .section-rail.is-inverse .rail-index { color: CanvasText; }
  .to-top.is-inverse { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { opacity: 1; transform: none; }
  .toast { opacity: 1; transform: none; }
}
@media print {
  .ks-header, .to-top, .toast-stack, .menu-toggle { display: none !important; }
  .wrap { width: 100%; }
  .section { padding-block: var(--ks-space-8); }
  .frame-grid, .intake-layout { display: block; }
}