/* KAWEN — campaign homepage (H13). One composition for the showcase (example
 * prices, concept renders) and for production (no price, honest status,
 * real-geometry renders + design plates). Components come from kawen.css;
 * this file is layout and art direction. Loaded by /showcase/index.html and
 * /index.html. The reference image is the art-direction target: a large
 * physical object in a lit room, six objects together, playful colour held by
 * white space, hand-drawn marks, one dark closing band. */
:root{--acid:#E8FF28}
.h12 h2 em,.h12 h1 em{font-style:normal;color:var(--acid)}
.h12 .sec-head{margin-bottom:clamp(18px,2.2vw,30px)}
.h12 .sec-head h2{font-size:clamp(30px,3.4vw,46px);letter-spacing:-.04em}

/* hero — the object is the page, not a card ------------------------------- */
.hz{position:relative;overflow:hidden;background:#fff;min-height:clamp(520px,56vw,740px);display:flex;align-items:center}
.hz-pic{position:absolute;inset:0 0 0 28%;z-index:0}
.hz-pic img{width:100%;height:100%;object-fit:cover;object-position:60% 58%;display:block}
.hz-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.94) 12%,rgba(255,255,255,0) 40%)}
.hz-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding:clamp(28px,4vw,56px) var(--pad) clamp(40px,5vw,72px)}
.hz-copy{max-width:36%}
.hz-k{margin-bottom:clamp(12px,1.4vw,20px)}
.hz-h1{font-size:clamp(46px,5.4vw,82px);line-height:.9;letter-spacing:-.05em;text-transform:uppercase;position:relative}
.hz-h1::after{content:"";display:block;width:52%;height:7px;margin-top:16px;border-radius:4px;
  background:linear-gradient(90deg,var(--spray-pink),var(--spray-violet) 50%,var(--spray-cyan))}
.hz-line{margin-top:clamp(14px,1.6vw,22px);font-size:clamp(16px,1.25vw,19px);color:var(--muted);max-width:30ch}
.hz-cta{margin-top:clamp(20px,2.2vw,30px)}
.hz-prod{display:grid;gap:2px;margin-top:clamp(22px,2.6vw,36px);width:max-content}
.hz-name{font-weight:700;font-size:16px}
.hz-prod .price-lg{font-size:clamp(26px,2.2vw,34px)}
.hz-prod .chip{width:max-content;margin-top:4px}
/* spray at the edges, over the room, never over the object */
.hz-spray{position:absolute;z-index:1;pointer-events:none;border-radius:50%;filter:blur(26px);mix-blend-mode:multiply;opacity:.85}
.hz-spray-a{width:26vw;max-width:380px;aspect-ratio:1;left:-8vw;top:-10vw;background:radial-gradient(circle,var(--spray-pink) 0%,rgba(255,45,155,.55) 34%,transparent 68%)}
.hz-spray-b{width:24vw;max-width:360px;aspect-ratio:1;right:-6vw;top:-9vw;background:radial-gradient(circle,var(--spray-violet) 0%,rgba(122,59,255,.5) 34%,transparent 68%)}
.hz-spray-c{width:18vw;max-width:260px;aspect-ratio:1;right:14vw;top:-8vw;background:radial-gradient(circle,var(--spray-cyan) 0%,transparent 66%);opacity:.7}
.hz-spray-d{width:22vw;max-width:320px;aspect-ratio:1;right:-5vw;bottom:-12vw;background:radial-gradient(circle,var(--acid) 0%,rgba(232,255,40,.5) 30%,transparent 66%);opacity:.8}
.hz-spray-e{width:16vw;max-width:220px;aspect-ratio:1;left:24%;bottom:-8vw;background:radial-gradient(circle,var(--spray-orange) 0%,transparent 66%);opacity:.6}
/* hand-drawn marks (assets/marks/*.svg, stroked in currentColor) */
.mark{position:absolute;z-index:3;pointer-events:none;color:var(--ink)}
.mark svg,.mark img{width:100%;height:auto;display:block}
.hz-mark-crown{right:33%;top:5%;width:clamp(54px,5vw,84px);transform:rotate(-8deg)}
.hz-mark-good{right:21%;top:10%;width:clamp(150px,15vw,240px);transform:rotate(-9deg)}
.hz-mark-people{right:3%;top:22%;width:clamp(96px,8.4vw,130px);transform:rotate(7deg)}
.hz-mark-word{right:5%;bottom:11%;width:clamp(120px,11vw,170px);transform:rotate(-4deg)}
.hz-mark-arrow{right:15%;bottom:23%;width:clamp(60px,6vw,92px);transform:rotate(12deg)}
.hz-dim{left:auto;right:37%;bottom:8%;width:22%;color:var(--dim)}
@media (max-width:960px){
  .hz{min-height:0;display:block}
  .hz-pic{position:relative;inset:auto;margin:0;aspect-ratio:16/11;border-radius:var(--r-md);overflow:hidden}
  .hz-pic::after{display:none}
  .hz-in{display:grid;gap:12px;padding-top:12px}
  .hz-copy{max-width:none;display:contents}
  .hz-k{order:0}.hz-h1{order:1;font-size:clamp(42px,12vw,70px)}.hz-line{display:none}
  .hz-pic{order:3}
  .hz-prod{order:4;grid-template-columns:1fr auto;align-items:end;width:100%;margin-top:6px}
  .hz-cta{order:5;margin-top:10px}.hz-cta .btn-ghost{display:none}.hz-cta .btn-primary{width:100%}
  .hz-mark-crown,.hz-mark-people,.hz-mark-arrow,.hz-dim,.hz-spray{display:none}
  .hz-mark-good{right:6%;top:8%;width:38%}
  .hz-mark-word{right:5%;bottom:8%;width:34%}
}
@media (max-width:640px){.hz-pic{aspect-ratio:1/1}}

/* featured objects — six across, a real catalogue ------------------------ */
.fz{padding-top:clamp(30px,3.6vw,56px)}
.fz-grid{display:grid;gap:clamp(14px,1.6vw,22px) clamp(10px,1.2vw,18px);grid-template-columns:repeat(6,minmax(0,1fr))}
.fz-card{position:relative;display:grid;gap:3px;grid-template-rows:auto auto auto 1fr;min-width:0}
.fz-img{position:relative;border-radius:var(--r-md);overflow:hidden;background:#E9E3D9;aspect-ratio:1;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);box-shadow:0 18px 40px -26px rgba(9,10,12,.35)}
.fz-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.fz-card:hover .fz-img{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(9,10,12,.45)}
.fz-card:hover .fz-img img{transform:scale(1.04)}
.fz-card h3{margin-top:12px;font-size:clamp(14.5px,1.1vw,16px);letter-spacing:-.015em;line-height:1.2}
.fz-card p{font-size:12.5px;color:var(--muted);line-height:1.3}
.fz-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;align-self:end}
.fz-foot .price{font-size:clamp(14.5px,1.1vw,16px)}
.fz-foot .price small,.fz-foot .price .from{font-size:9px}
.fz-start{font-weight:700;font-size:14px}
.fz-go{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;transition:background .25s,border-color .25s}
.fz-go .arrow{width:16px;stroke:var(--ink)}
.fz-card:hover .fz-go{background:var(--ink);border-color:var(--ink)}
.fz-card:hover .fz-go .arrow{stroke:var(--paper);transform:translateX(3px)}
.fz-link{position:absolute;inset:0;z-index:2;border-radius:var(--r-md)}
.fz-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.fz-img::after{content:"";position:absolute;right:-18%;top:-18%;width:46%;aspect-ratio:1;border-radius:50%;filter:blur(18px);opacity:.55;mix-blend-mode:multiply;
  background:radial-gradient(circle,var(--fa,var(--spray-pink)) 0%,transparent 66%);pointer-events:none}
.fz-img.is-plate{background:var(--ink)}
.fz-img.is-plate::after{mix-blend-mode:screen;opacity:.35}
.fz-img.is-plate img{object-fit:cover;object-position:50% 40%;transform:scale(1.12)}
.fz-card:hover .fz-img.is-plate img{transform:scale(1.16)}
.fz-kind{position:absolute;left:10px;top:10px;z-index:2;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);background:rgba(9,10,12,.7);padding:4px 8px;border-radius:999px}
@media (max-width:1280px) and (min-width:801px){.fz-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fz-card h3{font-size:19px}.fz-card p{font-size:14px}.fz-foot .price{font-size:19px}.fz-go{width:36px;height:36px}}
@media (max-width:800px) and (min-width:521px){.fz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fz-card h3{font-size:19px}.fz-card p{font-size:14px}.fz-foot .price{font-size:19px}.fz-go{width:36px;height:36px}}
@media (max-width:520px){.fz-grid{grid-template-columns:1fr;gap:26px}.fz-card h3{font-size:24px;margin-top:12px}.fz-card p{font-size:15px}.fz-foot .price{font-size:22px}.fz-go{width:44px;height:44px}}

/* four ways — white cards, one burst each ---------------------------------- */
.wz{padding-block:clamp(40px,4.6vw,72px)}
.wz-grid{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
.wz-way{position:relative;display:grid;gap:4px;padding:22px 22px 20px;border-radius:var(--r-md);background:var(--paper);
  border:1px solid var(--line);isolation:isolate;overflow:hidden;min-height:200px;align-content:end;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.wz-way:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 30px 60px -30px rgba(9,10,12,.35)}
.wz-ico{position:relative;width:64px;height:64px;margin-bottom:auto;display:grid;place-items:center}
.wz-ico::before{content:"";position:absolute;inset:-26px;border-radius:50%;filter:blur(14px);opacity:.95;
  background:radial-gradient(circle,var(--sa) 0%,color-mix(in srgb,var(--sb) 70%,transparent) 40%,transparent 70%)}
.wz-ico::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;right:-14px;top:-6px;background:var(--sb);opacity:.9}
.wz-ico svg{position:relative;width:34px;height:34px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wz-way h3{margin-top:18px;font-size:clamp(19px,1.5vw,22px);letter-spacing:-.025em}
.wz-way p{font-size:14.5px;color:var(--muted)}
.wz-way .chip{position:absolute;top:16px;right:16px}
.wz-go{position:absolute;right:16px;bottom:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .25s,border-color .25s}
.wz-go .arrow{width:18px;stroke:var(--ink)}
.wz-way:hover .wz-go{background:var(--ink);border-color:var(--ink)}
.wz-way:hover .wz-go .arrow{stroke:var(--paper)}
.wz-way.is-off{color:var(--muted)}
.wz-way.is-off .wz-ico::before{opacity:.4}
.wz-way.is-off h3{color:var(--dim)}
@media (max-width:960px){.wz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wz-way{min-height:180px}}
@media (max-width:420px){.wz-grid{grid-template-columns:1fr}.wz-way{min-height:0;padding:18px}.wz-ico{width:52px;height:52px}.wz-way h3{margin-top:10px}}

/* editorial collage — text left, four images right --------------------------- */
.ez{padding-block:clamp(44px,5vw,80px)}
.ez-in{display:grid;gap:clamp(24px,3.6vw,56px);grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:center}
.ez-copy h2{font-size:clamp(30px,3.2vw,44px);text-transform:uppercase;letter-spacing:-.04em;line-height:.95}
.ez-copy h2::after{content:"";display:block;width:44%;height:6px;margin-top:14px;border-radius:3px;background:linear-gradient(90deg,var(--spray-pink),var(--spray-violet) 50%,var(--spray-cyan))}
.ez-copy p{margin-top:16px;font-size:clamp(15px,1.2vw,18px);color:var(--muted);max-width:30ch}
.ez-copy .btn{margin-top:22px}
.ez-facts{list-style:none;display:flex;gap:22px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
.ez-facts li{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:8px}
.ez-facts li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sa,var(--acid))}
.ez-grid{position:relative;display:grid;gap:clamp(8px,1vw,14px);grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"a b d" "a c d"}
.ez-grid figure{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;background:#E9E3D9;min-height:0}
.ez-grid img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.ez-a{grid-area:a;min-height:100%}.ez-b{grid-area:b;aspect-ratio:1}.ez-c{grid-area:c;aspect-ratio:1}.ez-d{grid-area:d;min-height:100%}
.ez-grid .mark{color:var(--paper);filter:drop-shadow(0 2px 6px rgba(9,10,12,.45))}
.ez-mark-sketch{left:8%;top:10%;width:40%;transform:rotate(-6deg)}
.ez-mark-arrow{left:36%;bottom:10%;width:16%;transform:rotate(60deg)}
.ez-mark-saudi{right:8%;top:8%;width:52%;transform:rotate(6deg)}
.ez-grid .is-plate{background:var(--ink)}
.ez-grid .is-plate img{transform:scale(1.15);object-position:50% 40%}
.ez-grid .fz-kind{left:10px;bottom:10px;top:auto}
@media (max-width:960px){
  .ez-in{grid-template-columns:1fr}
  .ez-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;grid-template-areas:"a a" "b c" "d d"}
  .ez-a{aspect-ratio:16/10}.ez-d{aspect-ratio:16/9}
}

/* dark band — bring your model ---------------------------------------------- */
.bz{padding-block:0 clamp(40px,5vw,80px)}
.bz .band{text-align:left;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px;padding:0;overflow:hidden;min-height:clamp(300px,30vw,440px)}
.bz-copy{padding:clamp(30px,4vw,60px) clamp(24px,4vw,56px)}
.bz .band h2{margin:0 0 10px;font-size:clamp(34px,4.2vw,62px);text-transform:uppercase;letter-spacing:-.04em;line-height:.92}
.bz-fmt{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:22px}
.bz .band .cta-row{justify-content:flex-start}
.bz-vis{position:relative;height:100%;min-height:260px}
.bz-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 22%);mask:linear-gradient(90deg,transparent 0,#000 22%)}
.bz-vis .sig-dim{left:14%;right:24%;top:14%;color:rgba(255,255,255,.75)}
.bz-mark{right:6%;bottom:12%;width:clamp(110px,10vw,160px);color:var(--acid);transform:rotate(-8deg)}
@media (max-width:800px){.bz .band{grid-template-columns:1fr}.bz-vis{min-height:220px}.bz-vis img{-webkit-mask:linear-gradient(180deg,transparent 0,#000 25%);mask:linear-gradient(180deg,transparent 0,#000 25%)}}

/* one-row footer -------------------------------------------------------------- */
.foot-line{padding-block:clamp(26px,3vw,40px) 22px}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:18px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:15px;font-weight:500}
.foot-links a:hover{text-decoration:underline;text-underline-offset:3px}

/* design-review disclosure: a corner chip, not a strip ------------------------ */
.review-chip{position:fixed;z-index:60;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;height:30px;
  padding-inline:12px;border-radius:999px;border:0;cursor:pointer;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;box-shadow:0 10px 30px -10px rgba(9,10,12,.5)}
.review-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acid)}
.review-chip[aria-expanded="true"]{border-radius:16px;height:auto;padding:12px 14px;text-align:left;text-transform:none;letter-spacing:0;font-weight:500;font-size:13px;line-height:1.4;max-width:min(320px,calc(100vw - 28px));display:grid;gap:4px;font-family:var(--sans)}
.review-chip[aria-expanded="true"]::before{display:none}
.review-chip[aria-expanded="true"] b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acid)}
.review-chip span{display:none}
.review-chip[aria-expanded="true"] span{display:block}
@media (prefers-reduced-motion:reduce){.fz-card:hover .fz-img,.fz-card:hover .fz-img img,.wz-way:hover{transform:none}}