/* Konsep (#konsep) — three F&B homepage concepts, added 2026-10-12.
   Each concept sits on its own brand field (colours sampled from the approved
   exports: MALK #bb1b11, Sagumi #fcc183, Capli #06291A) and uses a
   different composition, so the band never reads as a uniform card grid:
     MALK   — full-bleed laptop shot, giant name below, phone overlapping up into it
     Sagumi — split: name + phone column left, laptop shot right
     Capli  — laptop shot left, phone overlapping its lower-right corner, dark green
   Hard edges between bands, no fades. Images are the approved exports from
   outreach-2026-10/hero-demos/new-batch-2026-10-03 and device-mockups/. */

.konsep{ background:var(--ink); }
.konsep-head{ padding-bottom:clamp(3rem, 2rem + 3vw, 5rem); }
.konsep-head p{ max-width:44ch; margin-top:1.4rem; }

.kp{ position:relative; color:var(--kp-ink); background:var(--kp-field); }
.kp figure{ margin:0; }
.kp img{ width:100%; height:auto; display:block; }
.kp-name{
  font-family:var(--font-display); font-weight:var(--display-weight); font-stretch:var(--display-stretch);
  font-size:var(--text-display); letter-spacing:var(--display-tracking); line-height:.88; color:var(--kp-ink);
}
.kp-line{
  margin:1.25rem 0 0; max-width:34ch; font-family:var(--font-copy);
  font-size:clamp(1.05rem, .95rem + .4vw, 1.3rem); line-height:1.5; color:var(--kp-ink); opacity:.86;
}
/* phone screenshots read as a handset: dark bezel, rounded screen */
.kp-phone img{ border:6px solid #111; border-radius:26px; background:#111; }

/* ---- MALK Chips: full-bleed shot, name below, phone rising into the shot */
.kp--malk{ --kp-field:#bb1b11; --kp-ink:#FFF2E4; }
.kp--malk .kp-desk{ border-bottom:1px solid rgba(0,0,0,.25); }
.kp--malk .kp-foot{ padding-block:clamp(2rem, 1rem + 3vw, 4rem) clamp(4rem, 2rem + 5vw, 7rem); align-items:start; }
.kp--malk .kp-text{ grid-column:1 / span 7; }
.kp--malk .kp-phone{ grid-column:10 / span 3; margin-top:-13vw; position:relative; z-index:1; }

/* ---- Sagumi: split composition on peach */
.kp--sagumi{ --kp-field:#fcc183; --kp-ink:#5B1420; padding-block:clamp(4rem, 2rem + 5vw, 8rem); }
.kp--sagumi .kp-split{ align-items:end; row-gap:3rem; }
.kp--sagumi .kp-text{ grid-column:1 / span 4; }
.kp--sagumi .kp-phone{ margin-top:2.5rem; width:min(15rem, 70%); }
.kp--sagumi .kp-desk{ grid-column:5 / span 8; }
.kp--sagumi .kp-desk img{ border-radius:2px; }

/* ---- Capli: laptop shot right, phone overlapping its lower-left corner, on the brand's dark green */
.kp--capli{ --kp-field:#06291A; --kp-ink:#F3EBD3; padding-block:clamp(4rem, 2rem + 5vw, 8rem); }
.kp--capli .kp-plate{ align-items:end; row-gap:2.5rem; }
.kp--capli .kp-text{ grid-column:1 / span 6; grid-row:1; }
.kp--capli .kp-desk{ grid-column:1 / span 9; grid-row:2; }
.kp--capli .kp-desk img{ border-radius:2px; }
.kp--capli .kp-phone{ grid-column:10 / span 3; grid-row:2; align-self:end; position:relative; z-index:1; } /* its own column: never over the desktop's CTA or footer text */

@media (max-width:767px){
  .kp--malk .kp-text, .kp--sagumi .kp-text, .kp--capli .kp-text{ grid-column:1 / -1; }
  .kp--malk .kp-phone{ grid-column:1 / -1; width:52vw; margin:2.5rem 0 0 auto; }
  .kp--sagumi .kp-desk{ grid-column:1 / -1; order:-1; }
  .kp--sagumi .kp-phone{ width:52vw; }
  .kp--capli .kp-desk{ grid-column:1 / -1; grid-row:auto; }
  .kp--capli .kp-phone{ grid-column:1 / -1; grid-row:auto; width:52vw; margin:0; }
}

/* scroll reveal (js/konsep.js): the shot opens from an inset frame to full size.
   Start state is set by JS only, so with JS off the images are simply visible. */
[data-kp-reveal]{ will-change:clip-path; }