/* KUBOLAB redesign — Home (scoped under .kbl) */

/* ---------- Hero (collage) ---------- */
.kbl .hero{
  min-height:100vh;
  display:grid; grid-template-columns:1.2fr 1fr 1fr; grid-template-rows:1fr 1fr;
  gap:1px; background:var(--line);
}
.kbl .hero-tile{ position:relative; overflow:hidden; background:var(--bg-panel); }
.kbl .hero-tile:hover .kbl-fill img{ transform:scale(1.05); }
.kbl .hero-tile.big{ grid-column:1; grid-row:1 / 3; }
.kbl .hero-tile.text{
  grid-column:2; grid-row:1; background:var(--bg);
  display:flex; flex-direction:column; justify-content:center;
  padding:32px clamp(20px,3vw,40px);
}
.kbl .hero-tile.text h1{ font-weight:600; font-size:clamp(2.1rem,3.6vw,3rem); line-height:0.98; letter-spacing:-0.02em; margin:0 0 18px; }
.kbl .hero-tile.text p{ font-size:0.92rem; color:var(--text-soft); max-width:26ch; margin:0 0 22px; line-height:1.6; }
.kbl .hero-cta{
  display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  background:var(--ink); color:var(--ink-contrast); padding:14px 22px; border-radius:2px; transition:background .2s;
  align-self:flex-start;
}
.kbl .hero-cta:hover{ background:var(--ink-hover); }
.kbl .hero-tag{
  position:absolute; bottom:14px; left:14px; z-index:1;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(6px);
  padding:7px 12px; font-size:10.5px; font-weight:500; letter-spacing:0.04em; border:1px solid var(--line);
}
@media (max-width:900px){
  .kbl .hero{ grid-template-columns:1fr; grid-template-rows:none; min-height:auto; }
  .kbl .hero-tile.big{ grid-column:1; grid-row:auto; aspect-ratio:1/1; }
  .kbl .hero-tile.text{ grid-column:1; grid-row:auto; padding:40px clamp(20px,5vw,48px); }
  .kbl .hero-tile:not(.text):not(.big){ aspect-ratio:1/1; }
}

/* ---------- Type row ---------- */
.kbl .type-row-wrap{ padding:90px clamp(20px,4vw,48px); }
.kbl .type-row-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; gap:16px; flex-wrap:wrap; }
.kbl .type-row-head h2{ font-weight:600; font-size:clamp(1.6rem,3vw,2.1rem); margin:0; letter-spacing:-0.01em; }
.kbl .type-row-head span{ color:var(--text-faint); font-size:12px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; }
.kbl .type-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.kbl .type-tile{ position:relative; background:var(--bg); overflow:hidden; }
.kbl .type-tile-img{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--bg-panel); }
.kbl .type-tile-img .kbl-fill img{ transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.kbl .type-tile:hover .type-tile-img .kbl-fill img{ transform:scale(1.06); }
.kbl .type-tile-label{
  display:flex; justify-content:space-between; align-items:center; padding:18px 20px;
  font-weight:600; font-size:0.95rem; letter-spacing:0.02em;
}
.kbl .type-tile-label .arrow{ color:var(--text-faint); transition:transform .2s; }
.kbl .type-tile:hover .type-tile-label .arrow{ transform:translateX(4px); color:var(--text); }
@media (max-width:900px){ .kbl .type-row{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Scroll story moment ---------- */
.kbl .story{
  position:relative; height:100vh; overflow:hidden; background:var(--bg-panel);
  display:flex; align-items:center; justify-content:center;
}
.kbl .story .kbl-fill img{
  opacity:0.22; transform:scale(1.08);
  transition:opacity 1s ease, transform 1.2s ease;
}
.kbl .story.in-view .kbl-fill img{ opacity:0.34; transform:scale(1); }
.kbl .story-copy{
  position:relative; z-index:1; max-width:720px; text-align:center; padding:0 24px;
  opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s ease;
}
.kbl .story.in-view .story-copy{ opacity:1; transform:translateY(0); }
.kbl .story-copy .eyebrow{
  display:block; font-weight:500; font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-soft); margin-bottom:18px;
}
.kbl .story-copy .eyebrow::before{ display:none; }
.kbl .story-copy h2{ font-weight:600; font-size:clamp(2rem,4.5vw,3.2rem); line-height:1.08; letter-spacing:-0.01em; margin:0; text-wrap:balance; }

/* ---------- Brand blurb ---------- */
.kbl .blurb{ padding:110px clamp(20px,4vw,48px); max-width:760px; margin:0 auto; text-align:center; }
.kbl .blurb .eyebrow{
  display:block; font-weight:500; font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-soft); margin-bottom:20px;
}
.kbl .blurb .eyebrow::before{ display:none; }
.kbl .blurb h2{ font-weight:600; font-size:clamp(1.7rem,3.2vw,2.3rem); line-height:1.2; letter-spacing:-0.01em; margin:0 0 22px; }
.kbl .blurb p{ color:var(--text-soft); font-size:1rem; line-height:1.75; margin:0; }

@media (prefers-reduced-motion: reduce){
  .kbl .story .kbl-fill img, .kbl .story-copy{ transition:none; }
}