/* KAWEN — the design system. Loaded by every public page.
 *
 * One rule governs the whole thing:
 *
 *   IF THE INTERFACE CAN SHOW IT, THE PAGE DOES NOT SAY IT.
 *
 * A status is a chip, not a sentence. A workflow is an icon, a name and an
 * arrow, not a paragraph. An object is a picture and a line. Copy is what is
 * left when the layout has already done its job — which is why the components
 * below are opinionated about size and spacing: they are carrying the
 * explanation that the writing used to carry.
 *
 * Two colour rules, unchanged from the homepage:
 *   1. Colour is an accent, never a surface. Blooms sit behind and beside
 *      content, never under body text.
 *   2. The object is the darkest thing on the page, so it reads as a lit
 *      object on paper.
 *
 * Page-specific styling lives in home.css / shop.css / flow.css. Anything
 * that appears on two pages belongs here instead.
 */

:root{
  --ink:#090A0C;
  --paper:#FFFFFF;
  --bone:#F6F4EF;
  --line:#E7E3DA;
  --muted:#6B6A66;
  --dim:#3A3A3E;

  --spray-pink:#FF2D9B;
  --spray-violet:#7A3BFF;
  --spray-cyan:#00C2FF;
  --spray-orange:#FF7A1A;
  --spray-lime:#2AD17E;

  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --sans-ar:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --kufi:'Reem Kufi','Noto Kufi Arabic',var(--sans-ar);

  --pad:clamp(20px,5vw,72px);
  --maxw:1320px;
  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --navh:66px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
[lang="ar"]{font-family:var(--sans-ar)}
a{color:inherit;text-decoration:none}

/* `[hidden]` is a user-agent rule and loses to any author rule that sets
   `display` — which is how `.cfg{display:grid}` kept showing the gated
   configurator UI to visitors with no operator key. One guard, so the
   attribute always wins. */
[hidden]{display:none !important}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:900px;margin-inline:auto;padding-inline:var(--pad)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-56px;z-index:99;background:var(--ink);
  color:var(--paper);padding:10px 16px;border-radius:10px;font-weight:600}
.skip:focus{top:12px}

/* ---------------------------------------------------------------- type -- */
h1,h2,h3{letter-spacing:-.035em;line-height:.98;font-weight:700}
h1{font-size:clamp(40px,6.4vw,92px)}
h2{font-size:clamp(30px,4.2vw,56px);line-height:1.02}
h3{font-size:clamp(18px,1.5vw,22px);line-height:1.16;letter-spacing:-.02em}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.lede{font-size:clamp(16px,1.3vw,19px);color:var(--muted);max-width:52ch}
.ar{font-family:var(--kufi);font-weight:600;color:var(--muted)}
.arrow{width:24px;height:9px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;transition:transform .25s var(--ease)}
.hov:hover .arrow,a:hover>.arrow{transform:translateX(5px)}

/* ------------------------------------------------------------- blooms --- */
.bloom{position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(46px);opacity:.55;z-index:0}
.bloom-pink{background:radial-gradient(circle,var(--spray-pink) 0%,transparent 68%)}
.bloom-violet{background:radial-gradient(circle,var(--spray-violet) 0%,transparent 68%)}
.bloom-cyan{background:radial-gradient(circle,var(--spray-cyan) 0%,transparent 68%)}
.bloom-orange{background:radial-gradient(circle,var(--spray-orange) 0%,transparent 68%)}
.bloom-lime{background:radial-gradient(circle,var(--spray-lime) 0%,transparent 68%)}

/* ---------------------------------------------------------------- nav --- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;transition:border-color .3s}
.nav.is-stuck{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:clamp(16px,3vw,44px);
  height:var(--navh);max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad)}
.brand{display:flex;align-items:baseline;gap:9px;font-weight:700;font-size:20px;
  letter-spacing:.02em;margin-inline-end:auto}
.brand-ar{font-family:var(--kufi);font-size:20px;color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px);
  font-size:15px;font-weight:500}
/* The call to action inside the link list belongs to the mobile panel. Above
   the breakpoint it must be out of the flow entirely, or it draws a second
   pill next to the real one in the header. */
.nav-links>.btn{display:none}
.nav-links>a:not(.btn),.nav-trigger{color:#26262A;padding:6px 2px;position:relative;
  background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;
  gap:6px}
.nav-links>a:not(.btn)::after,.nav-trigger::after{content:"";position:absolute;left:0;
  right:0;bottom:0;height:2px;background:var(--ink);transform:scaleX(0);
  transform-origin:left;transition:transform .25s var(--ease)}
.nav-links>a:not(.btn):hover::after,.nav-links>a[aria-current]::after,
.nav-trigger:hover::after,.nav-trigger[aria-expanded="true"]::after{transform:scaleX(1)}
.nav-caret{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.7;
  transition:transform .25s var(--ease)}
.nav-trigger[aria-expanded="true"] .nav-caret{transform:rotate(180deg)}

/* The Create menu. Four workflows with an icon, a colour and a status —
   which is the whole explanation, so the panel carries no prose. */
.nav-menu{position:relative}
.nav-panel{position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(-6px);width:min(560px,88vw);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 26px 60px -22px rgba(9,10,12,.3);padding:10px;
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease),
    transform .2s var(--ease),visibility .2s}
.nav-panel[data-open="true"]{opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0)}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 12px;
  border-radius:var(--r-sm);transition:background .18s}
.nav-item:hover{background:var(--bone)}
.nav-item svg.ico{width:22px;height:22px;flex:none;fill:none;stroke:var(--ink);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nav-item b{display:block;font-weight:600;font-size:15px;letter-spacing:-.01em}
.nav-item .chip{margin-top:3px}

.nav-side{display:flex;align-items:center;gap:12px}
.lang{background:none;border:1px solid var(--line);color:var(--ink);
  font-family:var(--sans-ar);font-size:14px;height:34px;padding-inline:12px;
  border-radius:999px;cursor:pointer;transition:border-color .2s}
.lang:hover{border-color:var(--ink)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);
  border-radius:999px;height:34px;padding-inline:14px;font-size:14px;
  font-weight:500;cursor:pointer}

/* --------------------------------------------------------------- btns --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding-inline:26px;border-radius:999px;font-weight:600;
  font-size:16px;border:1px solid transparent;cursor:pointer;text-align:center;
  transition:transform .2s var(--ease),background .2s,border-color .2s,
    box-shadow .2s,opacity .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink);color:var(--paper);
  box-shadow:0 6px 22px rgba(9,10,12,.18)}
.btn-primary:hover{box-shadow:0 12px 34px rgba(9,10,12,.26)}
.btn-ghost{background:var(--paper);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{height:40px;padding-inline:18px;font-size:15px}
.btn-lg{height:58px;padding-inline:32px;font-size:17px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* -------------------------------------------------------------- chips --- */
/* Availability is a chip, everywhere on the site. It replaced sentences like
   "In development. The home page link leads here on purpose." — the state is
   the information; the sentence was commentary. */
.chip{display:inline-flex;align-items:center;gap:7px;height:24px;
  padding-inline:10px;border-radius:999px;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  font-family:var(--mono)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:none}
.chip-open{background:rgba(42,209,126,.14);color:#0E6B41}
.chip-soon{background:rgba(9,10,12,.06);color:var(--muted)}
.chip-dev{background:rgba(122,59,255,.11);color:#5326B8}
.chip-review{background:rgba(255,122,26,.14);color:#9A4300}
.chip-none::before{display:none}

/* ------------------------------------------------------------ sections -- */
.sec{position:relative;padding-block:clamp(56px,6.4vw,96px)}
.sec-bone{background:var(--bone)}
.sec+.sec{padding-top:clamp(30px,3.4vw,52px)}
.sec-bone+.sec,.sec+.sec-bone{padding-top:clamp(56px,6.4vw,96px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:18px;margin-bottom:clamp(26px,3vw,42px)}
.sec-head h2{max-width:16ch}
.sec-note{font-size:14.5px;color:var(--muted);max-width:40ch}
.sec-link{font-weight:600;font-size:15.5px}
.sec-link a{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}

/* Page masthead — the shared top of every non-home page. Kicker, title, one
   optional line. Never more than one line. */
.masthead{position:relative;overflow:hidden;
  padding-block:clamp(38px,5vw,68px) clamp(28px,3.4vw,48px)}
/* Blur hard enough that the section's own overflow clip lands where the
   bloom is already faint. At 46px of blur the cut was visible as a straight
   horizontal band across the page. */
.masthead .bloom{opacity:.34;filter:blur(72px)}
/* Both are cut at the TOP, where the nav sits over them, and both finish
   inside the section. A bloom anchored to the bottom of a clipped container
   gets sliced mid-brightness and draws a hard horizontal band across the
   page — which is what `bottom:-90%` was doing. */
.mh-b1{width:min(460px,54vw);aspect-ratio:1;right:-10%;top:-58%}
.mh-b2{width:min(360px,44vw);aspect-ratio:1;left:-12%;top:-34%}
.mh-in{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad)}
.mh-in h1{margin:14px 0 0}
.mh-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 28px;
  justify-content:space-between;margin-top:16px}
.mh-in .lede{margin-top:14px}

/* ---------------------------------------------------------- objectcard -- */
/* One product card, used on the homepage and in the shop. Picture, name,
   one line, arrow. Nothing else goes in here — technical description belongs
   on the object's own page, not in a grid the customer is scanning. */
.card{position:relative;display:flex;flex-direction:column;
  border-radius:var(--r-md);overflow:hidden;background:var(--paper);
  border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.card:hover{transform:translateY(-6px);border-color:transparent;
  box-shadow:0 24px 50px -20px rgba(9,10,12,.28)}
.card-shot{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink)}
.card-shot img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease),opacity .4s var(--ease)}
.card:hover .card-shot img{transform:scale(1.045)}
.card-wash{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  mix-blend-mode:screen;transition:opacity .35s}
.card:hover .card-wash{opacity:.8}
.card-body{display:flex;align-items:center;gap:12px;padding:15px 16px 17px}
.card-body h3{margin-bottom:3px}
.card-body p{font-size:14px;color:var(--muted);line-height:1.35}
.card-go{margin-inline-start:auto;flex:none;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  transition:background .25s,color .25s,border-color .25s}
.card:hover .card-go{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.card-tag{position:absolute;z-index:2;left:11px;top:11px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-radius:999px;
  padding:4px 10px;font-size:10.5px;font-weight:700;font-family:var(--mono);
  letter-spacing:.08em;text-transform:uppercase}
.card-link{position:absolute;inset:0;z-index:3}
.grid-obj{display:grid;gap:clamp(14px,1.4vw,20px);
  grid-template-columns:repeat(4,minmax(0,1fr))}

/* ----------------------------------------------------------- waycard ---- */
/* The four workflows. Icon, name, one line, chip, arrow. The line is the
   only prose allowed and it is capped at roughly six words. */
.grid-ways{display:grid;gap:clamp(14px,1.4vw,20px);
  grid-template-columns:repeat(4,minmax(0,1fr))}
.way{position:relative;overflow:hidden;display:flex;flex-direction:column;
  gap:12px;padding:20px 20px 18px;border-radius:var(--r-md);
  background:var(--paper);border:1px solid var(--line);min-height:186px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.way:hover{transform:translateY(-6px);border-color:transparent;
  box-shadow:0 24px 50px -20px rgba(9,10,12,.24)}
.way .bloom{width:150px;height:150px;left:-46px;top:-52px;opacity:.42;
  filter:blur(30px);transition:opacity .35s,transform .45s var(--ease)}
.way:hover .bloom{opacity:.62;transform:scale(1.14)}
.way-ico{position:relative;z-index:1;width:38px;height:38px;fill:none;
  stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.way-txt{position:relative;z-index:1;margin-top:auto}
.way-txt h3{margin-bottom:4px}
.way-txt p{font-size:14px;color:var(--muted);line-height:1.35}
.way-foot{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:space-between;gap:10px;margin-top:12px}
.way-link{position:absolute;inset:0;z-index:2}

/* ---------------------------------------------------------------- band -- */
.band{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);
  border-radius:var(--r-lg);padding:clamp(34px,4.6vw,64px) clamp(22px,4vw,56px);
  text-align:center}
.band .bloom{opacity:.5;filter:blur(60px)}
.band-b1{width:44%;aspect-ratio:1;left:-8%;top:-40%}
.band-b2{width:40%;aspect-ratio:1;right:-6%;bottom:-46%}
.band>:not(.bloom){position:relative;z-index:1}
.band h2{margin-bottom:20px}
.band .cta-row{justify-content:center}
.band .btn-ghost{background:transparent;border-color:rgba(255,255,255,.34);
  color:var(--paper)}
.band .btn-ghost:hover{border-color:var(--paper)}
.band .btn-primary{background:var(--paper);color:var(--ink)}

.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* -------------------------------------------------------------- notice -- */
/* The one place prose is still allowed: a fact the customer needs in order to
   decide, that no chip can carry. Deliberately styled as a quiet aside so it
   never competes with the interface. */
.note{display:flex;gap:11px;padding:13px 15px;border-radius:var(--r-sm);
  background:var(--bone);font-size:14px;line-height:1.45;color:var(--dim)}
.note svg{width:17px;height:17px;flex:none;margin-top:2px;fill:none;
  stroke:currentColor;stroke-width:1.6}
.note-ink{background:rgba(255,255,255,.06);color:rgba(255,255,255,.72)}

/* ------------------------------------------------------------- footer --- */
.foot{border-top:1px solid var(--line);padding-block:clamp(36px,4.2vw,58px) 28px}
.foot-top{display:grid;gap:clamp(22px,3vw,44px);
  grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  margin-bottom:clamp(26px,3vw,42px)}
.foot-brand .brand{margin:0 0 10px}
.foot-brand p{font-size:14.5px;color:var(--muted);max-width:28ch}
.foot h4{font-size:11.5px;font-family:var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:500}
.foot ul{list-style:none;display:grid;gap:8px;font-size:15px}
.foot ul a{color:#33333a}
.foot ul a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot-bot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:space-between;padding-top:20px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted)}

/* -------------------------------------------------------------- reveal -- */
.js .rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---------------------------------------------------------- responsive -- */
@media (max-width:1080px){
  .grid-obj,.grid-ways{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-links.is-open{display:flex;position:absolute;left:0;right:0;
    top:var(--navh);flex-direction:column;align-items:stretch;gap:2px;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:8px var(--pad) 18px;max-height:calc(100dvh - var(--navh));
    overflow-y:auto}
  .nav-links.is-open>a:not(.btn){padding:12px 0;font-size:17px}
  .nav-links.is-open>a:not(.btn)::after{display:none}
  .nav-toggle{display:inline-flex;align-items:center}
  .nav-side>.btn{display:none}
  .nav-links.is-open>.btn{display:inline-flex;margin-top:10px;width:100%}
  /* The Create menu becomes a plain stacked list on a phone — a hover panel
     is a desktop idea, and a nested dropdown inside a burger is a trap. */
  .nav-menu{display:contents}
  .nav-trigger{display:none}
  .nav-panel{position:static;transform:none;width:auto;opacity:1;
    visibility:visible;box-shadow:none;border:0;padding:4px 0 8px;
    grid-template-columns:1fr;gap:0;background:none}
  .nav-panel::before{content:"Create";display:block;font-family:var(--mono);
    font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);padding:12px 0 6px}
  .nav-item{padding:11px 0}
}
@media (max-width:620px){
  body{font-size:16px}
  /* Objects stay two-up on a phone. One card per screen turned a picture and
     two short lines into a full-height block — a lot of scrolling to see very
     little, which is the "giant card, tiny content" failure. Workflow cards
     do go single-column, because they carry an icon, a title, a line and a
     chip and need the width. */
  .grid-obj{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grid-ways{grid-template-columns:1fr}
  .card-body{padding:11px 12px 13px;gap:8px}
  .card-body h3{font-size:15.5px}
  .card-body p{font-size:12.5px}
  .card-go{display:none}
  .card-tag{font-size:9.5px;padding:3px 8px}
  .foot-top{grid-template-columns:1fr}
  .cta-row .btn{flex:1 1 100%}
  .sec-head{gap:12px}
  .sec-note{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .js .rv{opacity:1;transform:none}
  .card:hover,.way:hover,.btn:hover{transform:none}
}

/* ------------------------------------------------------ microinteractions */
/* Restrained, fast, and all on transform/opacity. Every one of these is
   switched off under prefers-reduced-motion below. */
.btn:active{transform:translateY(0) scale(.98)}
.chip{transition:background .25s,color .25s}
.card-go .arrow{transition:transform .25s var(--ease)}
.card:hover .card-go .arrow{transform:translateX(3px)}
.way:active,.card:active{transform:translateY(-2px) scale(.995)}
.seg button,.cfg-swatch{will-change:transform}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------------------------------------------------------- reveal3 ------ */
/* Drawing → Geometry → Object, as one interaction instead of three cards.
   The three plates are pixel-registered exports of one master geometry, so
   cross-fading them IS the story: the same falcon, drawn, then built. Tabs
   jump; the slider scrubs; keyboard arrows work on both. */
.reveal3{display:grid;gap:clamp(14px,2vw,32px);grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr);align-items:center}
.r3-stage{position:relative;aspect-ratio:5/4;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);
  box-shadow:0 30px 70px -34px rgba(9,10,12,.36)}
.r3-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  opacity:0;transition:opacity .35s var(--ease)}
.r3-stage img.on{opacity:1}
.r3-stage img.ghost{opacity:.16}
.r3-stage .r3-tag{position:absolute;left:14px;top:14px;z-index:2;background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);border-radius:999px;padding:5px 11px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.r3-side{display:grid;gap:18px}
.r3-tabs{display:inline-flex;padding:3px;border-radius:999px;background:var(--bone);border:1px solid var(--line);gap:2px}
.r3-tabs button{height:40px;padding-inline:16px;border:0;border-radius:999px;background:transparent;font-size:14.5px;
  font-weight:600;color:var(--dim);cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background .2s,color .2s,transform .2s var(--ease)}
.r3-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);box-shadow:0 4px 14px rgba(9,10,12,.18)}
.r3-tabs button:active{transform:scale(.97)}
.r3-tabs .n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;opacity:.7}
.r3-scrub{width:100%;height:36px;accent-color:var(--ink);cursor:ew-resize}
.r3-scrub:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}
.r3-cap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.r3-line{font-size:clamp(20px,2vw,28px);font-weight:700;letter-spacing:-.025em;line-height:1.1;min-height:2.2em}
.r3-line span{display:block;color:var(--muted);font-size:.6em;font-weight:500;letter-spacing:0;margin-top:6px}
@media (max-width:860px){
  .reveal3{grid-template-columns:1fr}
  .r3-stage{aspect-ratio:16/11}
  .r3-tabs{display:flex}.r3-tabs button{flex:1;justify-content:center;padding-inline:8px}
}

/* ---------------------------------------------------------- create page --- */
.grid-ways-lg{grid-template-columns:repeat(2,minmax(0,1fr))}
.way-lg{min-height:240px;padding:26px 24px 22px}
.way-lg .way-ico{width:46px;height:46px}
.way-lg .way-txt h3{font-size:clamp(22px,2.2vw,30px)}
.way-lg .way-txt p{font-size:15.5px}
.way-lg .bloom{width:220px;height:220px;left:-60px;top:-70px}
@media (max-width:620px){.grid-ways-lg{grid-template-columns:1fr}.way-lg{min-height:170px}}

@media (prefers-reduced-motion:reduce){
  .btn:active,.way:active,.card:active,.seg button:active,.r3-tabs button:active{transform:none}
  .r3-stage img{transition:none}
}

/* ======================================================= merchandising == */
/* Shared product components (H7). Used by the production shop and by the
   /showcase/ design-review route; production never carries a price because
   there is none — the same component renders a status chip in that slot. */

/* Price. A number and a small currency, nothing else. Never a decimal, never
   a strikethrough, never a sticker. */
.price{display:inline-flex;align-items:baseline;gap:6px;font-weight:700;
  letter-spacing:-.03em;font-size:clamp(20px,1.7vw,26px);line-height:1;white-space:nowrap}
.price small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;color:var(--muted)}
.price .from{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;color:var(--muted);margin-inline-end:2px}
.price-lg{font-size:clamp(32px,3.4vw,52px)}
.price-lg small{font-size:13px}
/* Price movement: the old number slides out, the new one settles in. */
.price .num{display:inline-block;transition:transform .32s var(--ease),opacity .32s var(--ease)}
.price.is-out .num{transform:translateY(-.35em);opacity:0}
.price.is-in .num{transform:translateY(.3em);opacity:0;transition:none}

/* Badge: one or two words, on the stage. */
.badge{position:absolute;z-index:3;left:14px;top:14px;display:inline-flex;align-items:center;
  height:24px;padding-inline:10px;border-radius:999px;background:rgba(255,255,255,.92);
  color:var(--ink);font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.badge-ink{background:rgba(9,10,12,.82);color:var(--paper)}

/* The product stage: a dark or paper field with two spray blooms driven by
   --sa / --sb. The object floats in it and may break its bounds. */
.stage-obj{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);
  isolation:isolate;--sa:var(--spray-pink);--sb:var(--spray-violet)}
.stage-obj.stage-paper{background:var(--bone)}
.stage-obj::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(55% 50% at 75% 20%,color-mix(in srgb,var(--sa) 62%,transparent),transparent 72%),
             radial-gradient(50% 46% at 18% 88%,color-mix(in srgb,var(--sb) 48%,transparent),transparent 72%);
  transition:transform .8s var(--ease),opacity .6s}
.stage-obj.stage-paper::before{opacity:.55}
.stage-obj:hover::before{transform:scale(1.08)}
.stage-obj .grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.35) .6px,transparent .6px);background-size:4px 4px}
.stage-obj>img,.stage-obj>model-viewer{position:relative;z-index:2}
.stage-obj>img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease),opacity .4s}
.stage-obj model-viewer{width:100%;height:100%;background:transparent;--poster-color:transparent;height:auto}
/* Hand-drawn accents, only around objects. */
.mark{position:absolute;z-index:3;pointer-events:none;fill:none;stroke:var(--acid,#E8FF28);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.mark-ink{stroke:var(--ink)}
.dim{position:absolute;z-index:3;pointer-events:none;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.75)}
.dim::before,.dim::after{content:"";height:1px;flex:1;background:currentColor;min-width:28px}
.stage-paper .dim{color:var(--dim)}

/* Product card. OBJECT → NAME → PRICE/STATUS → ACTION. */
.pc{position:relative;display:flex;flex-direction:column;gap:0;min-width:0}
.pc .stage-obj{aspect-ratio:4/5;transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  box-shadow:0 26px 60px -30px rgba(9,10,12,.35)}
.pc:hover .stage-obj{transform:translateY(-6px);box-shadow:0 40px 80px -34px rgba(9,10,12,.45)}
.pc:hover .stage-obj>img{transform:scale(1.05) rotate(-.6deg)}
.pc-lg .stage-obj{aspect-ratio:auto;min-height:100%}
.pc-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:end;padding:16px 4px 4px}
.pc-body h3{font-size:clamp(18px,1.5vw,24px);letter-spacing:-.025em}
.pc-body p{font-size:14.5px;color:var(--muted);line-height:1.35}
.pc-body .price{grid-column:2;grid-row:1/3;align-self:center}
.pc-body .chip{grid-column:2;grid-row:1/3;align-self:center}
.pc-link{position:absolute;inset:0;z-index:5;border-radius:var(--r-lg)}
.pc-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.pc-go{position:absolute;z-index:4;right:14px;bottom:14px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.92);display:grid;place-items:center;
  transform:translateY(6px);opacity:0;transition:opacity .25s,transform .25s var(--ease)}
.pc:hover .pc-go,.pc:focus-within .pc-go{opacity:1;transform:none}
.pc-go .arrow{width:20px;stroke:var(--ink)}
@media (hover:none){.pc-go{opacity:1;transform:none}}

/* Editorial grid: one large, two small, then the reverse. */
.ed-grid{display:grid;gap:clamp(14px,1.6vw,24px);grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense}
.ed-grid .pc-lg{grid-column:span 2;grid-row:span 1}
.ed-grid .pc-lg .stage-obj{aspect-ratio:8/5}
.ed-grid .pc-lg .pc-body h3{font-size:clamp(24px,2.4vw,36px)}
@media (max-width:860px){
  .ed-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ed-grid .pc-lg{grid-column:span 2}
  .ed-grid .pc-lg .stage-obj{aspect-ratio:4/3}
}
@media (max-width:520px){
  .ed-grid{grid-template-columns:1fr;gap:22px}
  .ed-grid .pc-lg{grid-column:span 1}
  .pc .stage-obj{aspect-ratio:1/1}
  .pc-body h3{font-size:22px}
}

/* Material chips: a physical-looking swatch with a short name. */
.mchips{display:flex;flex-wrap:wrap;gap:10px 14px}
.mchip{display:grid;justify-items:center;gap:6px;background:none;border:0;padding:4px;cursor:pointer;
  font-size:11.5px;color:var(--muted);font-weight:500;border-radius:12px;min-width:56px}
.mchip i{width:34px;height:34px;border-radius:50%;display:block;position:relative;
  background:radial-gradient(120% 120% at 30% 25%,rgba(255,255,255,.55),transparent 40%),var(--sw);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.18),0 1px 2px rgba(9,10,12,.2);
  border:2px solid transparent;transition:transform .2s var(--ease),box-shadow .2s}
.mchip:hover i{transform:translateY(-2px)}
.mchip[aria-pressed="true"]{color:var(--ink);font-weight:600}
.mchip[aria-pressed="true"] i{border-color:var(--paper);box-shadow:0 0 0 2px var(--ink),inset 0 -3px 6px rgba(0,0,0,.18)}
.mchip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mchip:active i{transform:scale(.94)}

/* Filter chips. */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{height:36px;padding-inline:16px;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.filters button:hover{border-color:var(--ink)}

/* Review strip: the one honest line that says this route is a design review. */
.review-strip{display:flex;align-items:center;justify-content:center;gap:14px;height:28px;
  background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase}
.review-strip b{color:var(--acid,#E8FF28);font-weight:700}
.review-strip a{color:rgba(255,255,255,.7);text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .pc:hover .stage-obj,.pc:hover .stage-obj>img,.stage-obj:hover::before,.mchip:hover i{transform:none}
  .price .num{transition:none}
}

/* ===================================================== KAWEN signature == */
/* One recurring motif, three ingredients: a sprayed colour field (the stage
   blooms), ONE precise engineering dimension, ONE loose hand-drawn mark.
   Appears around major objects only. The mark draws itself once when it
   enters view; reduced motion shows it complete. */
.sig-dim{position:absolute;z-index:3;pointer-events:none;display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  --sigc:currentColor}
.sig-dim::before,.sig-dim::after{content:"";flex:1;height:1px;background:var(--sigc);min-width:24px;position:relative}
.sig-dim>i{display:none}
.sig-dim b{font-weight:500;white-space:nowrap}
.sig-dim.is-ink{color:rgba(255,255,255,.72)}
/* end ticks */
.sig-dim::before{box-shadow:0 -4px 0 -0px transparent}
.sig-dim span.t{width:1px;height:12px;background:var(--sigc);flex:none}
.sig-mark{position:absolute;z-index:3;pointer-events:none;fill:none;stroke:var(--acid,#E8FF28);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.sig-mark.is-ink{stroke:var(--ink)}
.sig-mark.is-paper{stroke:var(--paper)}
.js .sig-mark path{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.3s cubic-bezier(.3,.7,.2,1)}
.js .sig-mark.in path{stroke-dashoffset:0}
.sig-tag{position:absolute;z-index:3;pointer-events:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.sig-tag.is-ink{color:rgba(255,255,255,.55)}
/* Ghost Arabic: an oversized word behind an object, very low contrast. */
.ghost-ar{position:absolute;z-index:1;pointer-events:none;font-family:var(--kufi);font-weight:700;line-height:1;
  color:rgba(9,10,12,.06);font-size:clamp(120px,22vw,340px);inset-inline-end:-2%;bottom:-6%;user-select:none;
  letter-spacing:-.02em;white-space:nowrap}
.stage-obj:not(.stage-paper) .ghost-ar{color:rgba(255,255,255,.07)}

/* -------------------------------------------------- stage identities ---- */
/* Each object keeps the KAWEN stage but gets one texture of its own. */
.stage-obj.m-lines::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(115deg,rgba(9,10,12,.07) 0 1px,transparent 1px 34px)}
.stage-obj.m-grid::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px) 0 0/48px 48px,
             linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px) 0 0/48px 48px}
.stage-obj.m-glow::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(38% 30% at 50% 44%,color-mix(in srgb,var(--sa) 55%,transparent),transparent 72%);
  mix-blend-mode:screen;opacity:.9}
.stage-obj.m-circle::after{content:"";position:absolute;z-index:1;pointer-events:none;width:74%;aspect-ratio:1;
  left:13%;top:13%;border-radius:50%;border:1.5px solid rgba(255,255,255,.16);transform:rotate(-6deg) scale(1.02,.96)}
.stage-obj.m-crop>img{transform:scale(1.28);transform-origin:50% 22%}
.pc:hover .stage-obj.m-crop>img{transform:scale(1.34) rotate(-.4deg)}
.stage-obj.m-mesh::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.35) .8px,transparent .9px);background-size:14px 14px}

/* -------------------------------------------------- card variants -------- */
/* Names and prices live INSIDE the stage on the big cards — the object is
   the card. Small cards keep them below. */
.pc-over{position:absolute;z-index:4;left:18px;right:18px;bottom:16px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:14px;pointer-events:none}
.pc-over h3{font-size:clamp(26px,3vw,44px);letter-spacing:-.035em;line-height:.98;color:var(--paper);
  text-shadow:0 2px 24px rgba(9,10,12,.35)}
.stage-paper .pc-over h3{color:var(--ink);text-shadow:none}
.pc-over p{font-size:14.5px;color:rgba(255,255,255,.75);margin-top:6px}
.stage-paper .pc-over p{color:var(--dim)}
.pc-over .price{color:var(--paper);flex:none}
.pc-over .price small,.pc-over .price .from{color:rgba(255,255,255,.65)}
.stage-paper .pc-over .price{color:var(--ink)}
.stage-paper .pc-over .price small,.stage-paper .pc-over .price .from{color:var(--muted)}
.pc-cue{position:absolute;z-index:4;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;height:26px;
  padding-inline:10px;border-radius:999px;background:rgba(9,10,12,.78);color:var(--paper);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pc-cue svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pc-over~.pc-cue,.pc-cue.is-top{bottom:auto;top:14px;left:auto;right:14px}
.stage-paper .pc-cue{background:rgba(255,255,255,.9);color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .js .sig-mark path{stroke-dashoffset:0;transition:none}
  .stage-obj.m-crop>img,.pc:hover .stage-obj.m-crop>img{transform:scale(1.28)}
}

/* ================================================== H10 · 3D commerce ===== */
/* The object is the interface. Four small components let a real model say
   what copy used to: it turns (cue), it changes (stage chips), it was drawn
   (Object | Drawing), it is being reshaped (shaping). Each appears only where
   the thing it claims is true. */

/* The one 3D mark. Only on a stage whose model can actually be turned; fades
   after the first drag so it never nags. */
.cue3d{position:absolute;z-index:6;right:14px;top:14px;display:inline-flex;align-items:center;gap:6px;height:26px;
  padding-inline:10px;border-radius:999px;background:rgba(9,10,12,.78);color:var(--paper);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .5s var(--ease)}
.cue3d svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.cue3d.is-used{opacity:0}
.stage-paper .cue3d{background:rgba(255,255,255,.9);color:var(--ink)}

/* Quick customisation inside a stage: up to four chips that tint the live
   model. They sit above the card link so a tap changes the colour instead of
   leaving the page; a second element (the ring) marks the choice, not colour
   alone. When chips are present they are the "customise" badge. */
.stage-chips{position:absolute;z-index:6;left:14px;top:14px;display:flex;gap:6px;padding:5px;border-radius:999px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:auto}
.stage-obj:not(.stage-paper) .stage-chips{background:rgba(9,10,12,.62)}
.stage-obj:has(.stage-chips) .badge{display:none}
.mchip-sm{min-width:0;padding:0;gap:0;border-radius:50%}
.mchip-sm i{width:26px;height:26px}
.mchip-sm[aria-checked="true"] i,.mchip-sm[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--ink),inset 0 -2px 4px rgba(0,0,0,.22)}
.stage-obj:not(.stage-paper) .mchip-sm[aria-checked="true"] i{box-shadow:0 0 0 2px var(--paper),inset 0 -2px 4px rgba(0,0,0,.22)}

/* Object | Drawing. Small, in the stage, only where both states are real. */
.stage-seg{position:absolute;z-index:6;top:14px;right:14px;display:inline-flex;gap:2px;padding:3px;border-radius:999px;
  background:rgba(9,10,12,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:auto}
.stage-seg button{height:24px;padding-inline:10px;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.75);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.stage-seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.stage-seg button:focus-visible{outline:2px solid var(--acid,#E8FF28);outline-offset:1px}
.stage-paper .stage-seg{background:rgba(255,255,255,.86)}
.stage-paper .stage-seg button{color:var(--muted)}
.stage-paper .stage-seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.stage-obj>img.is-swapping{opacity:0}

/* Materials that read as matter: a soft top light, a darker underside, a thin
   rim and a resting shadow. Named colours, not photographs of filament. */
.mchip i{background:radial-gradient(90% 90% at 32% 26%,rgba(255,255,255,.62),rgba(255,255,255,0) 44%),
                    radial-gradient(110% 100% at 50% 110%,rgba(0,0,0,.30),transparent 58%),var(--sw);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10),inset 0 -2px 4px rgba(0,0,0,.20),0 2px 3px rgba(9,10,12,.18),0 10px 16px -10px rgba(9,10,12,.45)}
.mchip{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.mchip[aria-pressed="true"],.mchip[aria-checked="true"]{color:var(--ink);font-weight:600}
.mchip[aria-checked="true"] i{border-color:var(--paper);box-shadow:0 0 0 2px var(--ink),inset 0 -3px 6px rgba(0,0,0,.18)}
.mchip.is-any i{background:conic-gradient(from 90deg,#131417,#D9C7A5,#2254FF,#C58B5B,#5B6B3A,#131417)}

/* Reshaping: the previous object stays, desaturates under a fine mesh, and a
   quiet word says what is happening. No modal, no spinner over the product. */
.stage-mesh{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s var(--ease);
  background-image:radial-gradient(rgba(9,10,12,.38) .8px,transparent .9px);background-size:12px 12px}
.stage-obj:not(.stage-paper) .stage-mesh{background-image:radial-gradient(rgba(255,255,255,.4) .8px,transparent .9px)}
.stage-phase{position:absolute;z-index:6;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 10px 0 8px;
  border-radius:999px;background:rgba(255,255,255,.88);color:var(--ink);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
.stage-phase i{width:12px;height:12px;border-radius:50%;border:2px solid rgba(9,10,12,.15);border-top-color:var(--ink);animation:cfg-spin 1s linear infinite}
.stage-obj.is-shaping model-viewer{filter:saturate(.3) contrast(.92);opacity:.55}
.stage-obj model-viewer{transition:filter .4s var(--ease),opacity .4s var(--ease)}
.stage-obj.is-shaping .stage-mesh{opacity:.5}
.stage-obj.is-shaping .stage-phase{opacity:1;transform:none}
@keyframes cfg-spin{to{transform:rotate(360deg)}}

/* Recommended / Customised. The default is a design choice with a name; one
   quiet reset brings it back. */
.pd-state{display:flex;align-items:center;gap:12px;min-height:26px}
.pd-state .chip{background:rgba(232,255,40,.55);color:var(--ink);font-weight:700}
.pd-state .chip.is-custom{background:var(--ink);color:var(--paper)}
.pd-state button{border:0;background:none;padding:0;font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pd-state button:hover{color:var(--ink)}
.pd-state button[hidden]{display:none}

/* A dimension on a card: short, at the top, only where the geometry is real. */
.pc .sig-dim{top:22px;left:36%;right:36%;bottom:auto}
/* The stage is an isolated stacking context under the card's link, so its
   controls could never be hit. The stage now floats above the link but lets
   every pointer through except on the chips and the switch. */
.pc .stage-obj{z-index:6;pointer-events:none}
.pc .stage-obj .stage-chips,.pc .stage-obj .stage-seg{pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  .stage-phase i{animation:none}
  .stage-obj.is-shaping model-viewer{opacity:.75;filter:none}
  .cue3d{transition:none}
}
/* Phone: chips and the 3D mark own the top of a card; the dimension moves to
   the bottom edge, where the name and price sit below the stage anyway. */
@media (max-width:640px){.pc .stage-obj:has(.stage-chips) .sig-dim{top:auto;bottom:14px;left:24%;right:24%}}