/* Rizovit home page. Builds on base.css tokens. */

:root {
  --glow: #71863A;          /* sunlit paddy */
  --white-rice: #FBF9F2;    /* milled grain */
  --bran: #A2733C;          /* bran layer */
  --shade: rgba(20, 26, 8, .62); /* photo shade, from --paddy-deep */
}

/* ==========================================================================
   Opening: one season in the Kochani valley (real photos, scrubbed by scroll)
   ========================================================================== */
.open { position: relative; background: var(--paddy-deep); color: var(--on-dark); }
.open__pin {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
}
.open__frames { position: absolute; inset: 0; z-index: 0; }
.oframe { position: absolute; inset: 0; margin: 0; overflow: hidden; will-change: clip-path, transform; }
.oframe:nth-child(n + 2) { clip-path: inset(100% 0 0 0); }
.oframe__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);
  transform-origin: 50% 62%;
  will-change: transform;
}
.open.is-static .oframe__img { transform: none; }
/* Only the background moves on the first screen: a slow drift on the first photo.
   Individual scale/translate properties, so they stack with the scroll transform. */
.oframe:first-child .oframe__img { animation: open-drift 22s ease-in-out infinite alternate; }
@keyframes open-drift {
  from { scale: 1; translate: 0 0; }
  to { scale: 1.07; translate: -1.6% -1.2%; }
}
@media (prefers-reduced-motion: reduce) { .oframe:first-child .oframe__img { animation: none; } }
.open__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--shade) 0%, rgba(20, 26, 8, .14) 32%, rgba(20, 26, 8, .1) 56%, rgba(20, 26, 8, .74) 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(20, 26, 8, .35) 100%);
}
.open__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(243, 238, 226, .13) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
}

.open__word {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 3;
  margin: 0;
  transform: translateY(-54%);
  text-align: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: min(21vw, 36vh);
  line-height: .78;
  letter-spacing: -.035em;
  color: var(--rice);
  pointer-events: none;
  user-select: none;
}
.open__word-inner { display: inline-block; clip-path: inset(-40% -6% -3% -6%); will-change: transform; }
.hl { display: inline-block; }

.open__kicker, .open__intro, .open__meter, .open__timeline, .open__credit, .open__scroll { position: absolute; z-index: 4; }
/* Intro fade-in once the loader has lifted (home.js adds .is-in) */
.open__kicker > *, .open__intro > *, .open__scroll > * { transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.open:not(.is-in) :is(.open__kicker, .open__intro, .open__scroll) > * { opacity: 0; transform: translateY(24px); }
.open.is-in .open__intro > :nth-child(2), .open.is-in .open__kicker > :nth-child(2) { transition-delay: .08s; }
.open.is-in .open__scroll > * { transition-delay: .16s; }
.open__kicker {
  top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 28px);
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  max-width: 19em;
  display: grid;
  gap: 12px;
  justify-items: end;
  text-align: right;
}
.open__side { font-size: var(--t-md); line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.open__intro {
  left: max(var(--gutter), env(safe-area-inset-left, 0px));
  bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  max-width: 27em;
  display: grid;
  gap: 20px;
}
.open__tag { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.25; font-weight: 500; letter-spacing: -.015em; }
.open__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.open__scroll {
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--on-dark-2);
}
.open__scroll i { width: 1px; height: 44px; background: currentColor; transform-origin: top; animation: scrollcue 2.2s var(--ease) infinite; }
@keyframes scrollcue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Stage sentences: first half top-left, second half bottom-right */
.open__pairs { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.gpair { position: absolute; inset: 0; margin: 0; }
.gpair__a, .gpair__b {
  position: absolute;
  max-width: 9em;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(2.1rem, 1.1rem + 3.6vw, 5rem);
  line-height: .98;
  letter-spacing: -.04em;
  color: var(--rice);
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(20, 26, 8, .35);
}
.gpair__a {
  top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 5vh);
  left: max(var(--gutter), env(safe-area-inset-left, 0px));
}
.gpair__b {
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  bottom: calc(15vh + env(safe-area-inset-bottom, 0px));
  text-align: right;
}
.gpair .wi { transform: translateY(112%); transition: transform .85s var(--ease-out); }
.gpair.is-active .wi { transform: none; transition-delay: calc(var(--i, 0) * 45ms + 120ms); }
.gpair.is-past .wi { transform: translateY(-112%); transition: transform .55s var(--ease); }

.open__meter {
  top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 5vh);
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  display: grid;
  justify-items: end;
  gap: 6px;
  text-align: right;
}
.open__meter .label { color: var(--on-dark-2); }
.open__day {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(3.6rem, 2rem + 4.4vw, 7rem);
  line-height: .8;
  letter-spacing: -.02em;
  color: var(--straw);
}
.open__stage { font-weight: 500; font-size: var(--t-md); letter-spacing: -.01em; }

.open__timeline {
  left: max(var(--gutter), env(safe-area-inset-left, 0px));
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  width: min(46vw, 620px);
  display: grid;
  gap: 10px;
}
.open__timeline ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.open__timeline li { color: var(--on-dark-2); opacity: .55; transition: opacity .4s, color .4s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.open__timeline li.is-done { opacity: .85; }
.open__timeline li.is-active { opacity: 1; color: var(--straw); }
.open__bar { display: block; height: 2px; background: rgba(243, 238, 226, .25); overflow: hidden; }
.open__bar i { display: block; height: 100%; background: var(--straw); transform: scaleX(0); transform-origin: left; }

.open__credit {
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  display: grid;
  justify-items: end;
  gap: 2px;
  font-size: var(--t-xs);
  line-height: 1.35;
  text-align: right;
}
.open__place { font-weight: 600; letter-spacing: .02em; }

.open.is-static .open__meter, .open.is-static .open__timeline, .open.is-static .open__pairs { display: none; }

@media (max-width: 900px) {
  .open__scroll { display: none; }
  .open__timeline { width: min(60vw, 420px); }
}
@media (max-width: 720px) {
  .open__word { top: 44%; font-size: 23vw; }
  .open__kicker { display: none; }
  .gpair { display: flex; flex-direction: column; gap: .2em; padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 3vh); padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
  .gpair__a, .gpair__b { position: static; max-width: 11em; font-size: clamp(2rem, 9vw, 2.8rem); }
  .gpair__b { align-self: flex-end; }
  .open__meter { top: auto; right: auto; left: max(var(--gutter), env(safe-area-inset-left, 0px)); bottom: calc(64px + env(safe-area-inset-bottom, 0px)); justify-items: start; text-align: left; }
  .open__day { font-size: 3.4rem; }
  .open__timeline { display: none; }
  .open__credit { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); max-width: 60vw; }
}

/* 3D viewer placeholders (used if the 3D kit can't load) */
.viewer { position: relative; }
.viewer.is-fallback::before, .viewer.no-webgl::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 9%;
  background:
    radial-gradient(circle at 20% 30%, rgba(122, 84, 34, .55) 0 1.5px, transparent 2px) 0 0 / 23px 19px,
    radial-gradient(circle at 70% 60%, rgba(181, 131, 58, .7) 0 1.5px, transparent 2px) 0 0 / 17px 21px,
    linear-gradient(150deg, var(--straw), var(--fin-natural));
  box-shadow: 0 40px 60px -30px rgba(20, 26, 8, .6), inset 0 -10px 0 rgba(122, 84, 34, .25);
  transform: perspective(900px) rotateX(38deg) rotateZ(-18deg);
}

/* ==========================================================================
   Material
   ========================================================================== */
.mat__statement {
  max-width: 13.5em;
  margin-bottom: clamp(56px, 7vw, 120px);
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(2.5rem, 1rem + 5.4vw, 7.2rem);
  line-height: .95;
  letter-spacing: -.05em;
  text-wrap: balance;
  color: var(--ink);
}
.material__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 48px 24px;
  align-items: start;
}
.mat-photo { grid-column: 1 / span 5; display: grid; gap: 12px; margin: 0; }
.mat-photo__frame, .koc-photo__frame { position: relative; overflow: hidden; border-radius: 22px; }
.mat-photo__frame { aspect-ratio: 4 / 3; background: var(--rice-2); }
.mat-photo__frame img, .koc-photo__frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); will-change: transform; }
.mat-photo figcaption, .koc-photo figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.material__copy { grid-column: 7 / -1; display: grid; gap: clamp(40px, 4.4vw, 64px); align-content: start; padding-top: clamp(0px, 3vw, 48px); }
.mat__lead {
  max-width: 27em;
  font-size: clamp(1.2rem, 1rem + .75vw, 1.7rem);
  line-height: 1.36;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: pretty;
}

.comp { display: grid; gap: 18px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.comp__title { color: var(--ink-2); }
.comp__bar { display: flex; gap: 3px; height: 16px; }
.comp__seg {
  flex: 0 0 calc(var(--w) - 2px);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.3s var(--ease-out);
}
.comp.is-in .comp__seg { transform: none; }
.comp.is-in .comp__seg--bran { transition-delay: .18s; }
.comp.is-in .comp__seg--white { transition-delay: .36s; }
.comp__seg--husk, .comp__row--husk i { background: var(--husk); }
.comp__seg--bran, .comp__row--bran i { background: var(--bran); }
.comp__seg--white, .comp__row--white i { background: var(--white-rice); box-shadow: inset 0 0 0 1px var(--line-2); }
.comp__legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.comp__row { display: grid; gap: 6px; align-content: start; }
.comp__row dt { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ink-2); }
.comp__row i { width: 10px; height: 10px; flex: none; border-radius: 50%; }
.comp__row dd {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem);
  line-height: .9;
  letter-spacing: -.01em;
  color: var(--paddy);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: clamp(72px, 9vw, 150px);
}
.facts li { display: grid; gap: 16px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line-2); }
.facts__n {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(3.8rem, 2rem + 5.4vw, 8rem);
  line-height: .8;
  letter-spacing: -.03em;
  color: var(--paddy);
}
.facts__t { max-width: 22em; font-size: 1.05rem; line-height: 1.45; color: var(--ink-2); }

@media (max-width: 900px) {
  .mat-photo, .material__copy { grid-column: 1 / -1; }
  .mat-photo__frame { aspect-ratio: 4 / 3; }
  .material__copy { padding-top: 0; }
  .facts { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .comp__legend { grid-template-columns: 1fr; }
  .comp__row { grid-template-columns: 1fr auto; align-items: baseline; }
}

/* ==========================================================================
   Section heading row
   ========================================================================== */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px 56px;
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 88px);
}
.sec-head__side { display: grid; gap: 20px; justify-items: start; }
@media (max-width: 900px) {
  .sec-head { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Products
   ========================================================================== */
.pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pcard {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 16px;
  min-height: clamp(520px, 52vw, 760px);
  padding: clamp(20px, 2.2vw, 32px);
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .7s var(--ease-out);
}
.pcard--panel {
  color: var(--on-dark);
  background: radial-gradient(90% 75% at 50% 42%, var(--paddy-2) 0%, var(--paddy) 55%, var(--paddy-deep) 100%);
}
.pcard--tile {
  color: var(--ink);
  background: radial-gradient(90% 75% at 50% 42%, #F7F1E2 0%, var(--straw) 70%, #D3BC78 100%);
}
.pcard__stage { position: relative; min-height: 300px; transition: transform .9s var(--ease-out); }
.pcard__viewer { position: absolute; inset: 0; }
.pcard__info { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.pcard__names { display: grid; gap: 4px; }
.pcard__kind { opacity: .75; }
.pcard__price { font-size: var(--t-md); white-space: nowrap; }
.pcard__price strong { font-weight: 600; }
.pcard__note { position: absolute; top: clamp(20px, 2.2vw, 32px); left: clamp(20px, 2.2vw, 32px); max-width: 16em; opacity: .8; }
.pcard__cta { position: absolute; top: clamp(16px, 2vw, 28px); right: clamp(16px, 2vw, 28px); }
.pcard:hover .pcard__stage { transform: scale(1.04); }
.pcard:focus-visible { outline-offset: 4px; }
@media (hover: hover) {
  .pcard:hover { transform: translateY(-6px); }
}
@media (max-width: 800px) {
  .pcards { grid-template-columns: 1fr; }
  .pcard { min-height: 480px; }
}

/* ==========================================================================
   Process: five steps, photo and text alternating
   ========================================================================== */
.steps__head { display: grid; gap: 18px; justify-items: start; margin-bottom: clamp(48px, 7vw, 120px); }
.steps__kicker { color: var(--husk); }
.steps__title {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(2.6rem, 1rem + 5vw, 6.8rem);
  line-height: .92;
  letter-spacing: -.05em;
}
.steps__list { display: grid; gap: clamp(64px, 9vw, 150px); margin: 0; padding: 0; list-style: none; }
.step {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: 24px clamp(20px, 3vw, 48px);
}
.step__media { grid-column: 1 / span 7; margin: 0; }
.step__copy { grid-column: 9 / span 4; display: grid; gap: 12px; align-content: center; }
.step:nth-child(even) .step__media { grid-column: 6 / span 7; grid-row: 1; }
.step:nth-child(even) .step__copy { grid-column: 1 / span 4; grid-row: 1; }
.step__frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 22px; background: var(--rice-2); }
.step__frame > img:not(.step__render) { width: 100%; height: 100%; object-fit: cover; }
.step__media--render .step__frame { background: radial-gradient(75% 75% at 55% 40%, #5B6B33 0%, var(--paddy) 45%, var(--paddy-deep) 100%); }
.step__render { position: absolute; height: auto; object-fit: contain; filter: drop-shadow(0 30px 30px rgba(10, 14, 4, .5)) drop-shadow(0 6px 8px rgba(10, 14, 4, .3)); }
.step__render--panel { width: 46%; left: 10%; top: 8%; }
.step__render--tile { width: 38%; right: 10%; bottom: 8%; }
.step__render:not([src]) { visibility: hidden; }
.step__n {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 2rem + 4vw, 6rem);
  line-height: .85;
  letter-spacing: -.02em;
  color: var(--husk);
}
.step__meta { color: var(--ink-2); }
.step__title { font-family: var(--f-sans); font-weight: 500; font-size: var(--t-lg); line-height: 1.05; letter-spacing: -.03em; }
.step__text { max-width: 26em; color: var(--ink-2); font-size: clamp(1rem, .94rem + .3vw, 1.15rem); line-height: 1.5; }
@media (max-width: 900px) {
  .step, .step:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .step__media, .step__copy, .step:nth-child(even) .step__media, .step:nth-child(even) .step__copy { grid-column: 1; grid-row: auto; }
  .step__frame { aspect-ratio: 4 / 3; }
  .step__n { font-size: 3rem; }
}

/* ==========================================================================
   Finishes: three tall columns, the open one widens
   ========================================================================== */
.finishes__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px clamp(32px, 5vw, 96px);
  margin-bottom: clamp(32px, 5vw, 72px);
}
.finishes__titles { display: grid; gap: 18px; }
.finishes__kicker { color: var(--husk); }
.finishes__title {
  max-width: 9em;
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(2.4rem, 1rem + 4.4vw, 6rem);
  line-height: .92;
  letter-spacing: -.05em;
}
.fins { display: flex; gap: 12px; height: clamp(520px, 74vh, 760px); margin: 0; padding: 0; list-style: none; }
.fin {
  --fin-bg: var(--rice-2);
  --fin-ink: var(--ink);
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
  background: radial-gradient(90% 70% at 50% 38%, rgba(255, 255, 255, .28), transparent 70%), var(--fin-bg);
  color: var(--fin-ink);
  transition: flex-grow .9s var(--ease);
}
.fin--natural { --fin-bg: #D9C39A; }
.fin--charcoal { --fin-bg: #2F2E28; --fin-ink: var(--on-dark); }
.fin--straw { --fin-bg: #EFE3BF; }
.fin.is-open { flex-grow: 2.6; }
.fin__btn {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(18px, 2vw, 28px);
  text-align: left;
  color: inherit;
}
.fin__n { font-family: var(--f-cond); font-weight: 600; font-size: var(--t-xs); letter-spacing: .1em; opacity: .7; }
.fin__name {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(1.6rem, 1rem + 1.8vw, 3rem);
  line-height: .95;
  letter-spacing: -.04em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: opacity .4s;
}
.fin.is-open .fin__name { writing-mode: horizontal-tb; transform: none; }
.fin__art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fin__render {
  position: absolute;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 30px rgba(20, 26, 8, .35)) drop-shadow(0 6px 8px rgba(20, 26, 8, .2));
  transition: transform 1s var(--ease), opacity .6s;
}
.fin__render:not([src]) { opacity: 0; }
.fin__render--panel { width: min(58%, 380px); left: 50%; top: 16%; transform: translateX(-62%) rotate(-4deg) scale(.82); }
.fin__render--tile { width: min(46%, 300px); left: 50%; top: 40%; transform: translateX(-8%) rotate(6deg) scale(.82); }
.fin.is-open .fin__render--panel { transform: translateX(-74%) rotate(-2deg) scale(1); }
.fin.is-open .fin__render--tile { transform: translateX(4%) rotate(3deg) scale(1); }
.fin__copy {
  position: absolute;
  z-index: 2;
  left: clamp(18px, 2vw, 28px);
  right: clamp(18px, 2vw, 28px);
  bottom: clamp(18px, 2vw, 28px);
  display: grid;
  gap: 10px;
  max-width: 30em;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .35s, transform .7s var(--ease-out);
  pointer-events: none;
}
.fin.is-open .fin__copy { opacity: 1; transform: none; transition-delay: .35s; }
.fin__text { font-size: clamp(1.02rem, .92rem + .35vw, 1.2rem); line-height: 1.45; }
.fin__note { opacity: .7; }
@media (hover: hover) {
  .fins:hover .fin { flex-grow: 1; }
  .fins:hover .fin:hover { flex-grow: 2.6; }
}
@media (max-width: 900px) {
  .finishes__head { grid-template-columns: minmax(0, 1fr); }
  .fins { flex-direction: column; height: auto; }
  .fin { flex: none; height: 92px; transition: height .8s var(--ease); }
  .fin.is-open { height: min(560px, 120vw); }
  .fin__name { writing-mode: horizontal-tb; transform: none; }
  .fin__render--panel { top: 14%; }
  .fin__render--tile { top: 34%; }
}

/* ==========================================================================
   Kochani
   ========================================================================== */
.kochani__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 72px) 24px;
  align-items: start;
}
.kochani__head { grid-column: 1 / -1; display: grid; gap: 20px; }
.kochani__head .t-xxl { font-size: clamp(3.2rem, 1rem + 9.5vw, 12rem); max-width: 9em; }
.kochani__coords { color: var(--sprout); }
.kochani__text { grid-column: 1 / span 5; display: grid; gap: 24px; }
.koc-photo { grid-column: 6 / -1; display: grid; gap: 12px; margin: 0; }
.koc-photo__frame { aspect-ratio: 16 / 10; background: var(--paddy); }
.koc-photo figcaption { color: var(--on-dark-2); }
.kstats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  margin: 0;
}
.kstats div { display: grid; gap: 8px; }
.kstats dt { color: var(--on-dark-2); }
.kstats dd { margin: 0; font-size: var(--t-md); font-weight: 500; }
@media (max-width: 900px) {
  .kochani__text, .koc-photo { grid-column: 1 / -1; }
  .kstats { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Shop teaser
   ========================================================================== */
.scards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.scard {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: 22px;
  overflow: hidden;
  background: var(--rice-2);
}
.scard__img {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, #F7F2E7 0%, var(--rice-2) 72%);
}
.scard__img::before {
  content: "";
  grid-area: 1 / 1;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 12%;
  background: var(--sw, var(--fin-natural));
  opacity: .8;
}
.scard__img img { grid-area: 1 / 1; position: relative; width: 88%; height: 88%; object-fit: contain; transition: transform .8s var(--ease-out); }
.scard__img img:not([src]) { visibility: hidden; }
.scard__img:has(img[src])::before { display: none; }
.scard:hover .scard__img img { transform: scale(1.05) rotate(-2deg); }
.scard__body { display: grid; gap: 4px; align-content: start; padding: 16px 18px 18px; }
.scard__name { font-size: 1.15rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.scard__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.scard__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.scard__price { font-weight: 600; }
@media (max-width: 1000px) { .scards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) {
  .scards { gap: 10px; }
  .scard__body { padding: 12px 12px 14px; }
  .scard__row .btn { width: 100%; }
}

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.cta { padding-block: clamp(96px, 12vw, 180px); overflow: clip; }
.cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px 64px;
  align-items: center;
}
.cta__copy { display: grid; gap: 24px; justify-items: start; }
.cta__kicker { display: inline-flex; align-items: center; gap: 14px; color: var(--straw); }
.cta__price { padding: 5px 12px; border: 1px solid rgba(226, 207, 147, .5); border-radius: 999px; letter-spacing: .04em; }
.cta__copy .lead { max-width: 27em; }
.cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Three sample tiles, one per finish: they fan out as the section scrolls in */
.cta__tiles { position: relative; aspect-ratio: 10 / 8; margin: 0; padding: 0; list-style: none; }
.ctile {
  position: absolute;
  top: 4%;
  left: 23%;
  width: 54%;
  display: grid;
  justify-items: center;
  gap: 6px;
}
.ctile:nth-child(1) { translate: -54% 12%; rotate: -8deg; }
.ctile:nth-child(2) { z-index: 1; translate: 0 -4%; }
.ctile:nth-child(3) { translate: 54% 12%; rotate: 8deg; }
.ctile .label { margin-top: -14%; }
.ctile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 30px 28px rgba(10, 14, 4, .5)) drop-shadow(0 6px 8px rgba(10, 14, 4, .3));
  transition: transform .6s var(--ease-out);
}
.ctile img:not([src]) { visibility: hidden; }
.ctile:hover img { transform: translateY(-14px) rotate(-2deg); }
.ctile .label { color: var(--on-dark-2); }
@media (max-width: 900px) {
  .cta__inner { grid-template-columns: 1fr; }
  .cta__tiles { aspect-ratio: 10 / 7; }
}