/* ==========================================================
   KREYA v2 — editorial system
   PT Teknologi Kreatif Berkarya

   Palette extracted from Kreya Brief Company Profile 2026.pdf
   by fill-operator frequency. Five brand colours, four derived
   tints/shades of them. No hues outside the brand.
   ========================================================== */

:root{
  /* --- from the company profile --- */
  --b600:#2F60AE;      /* primary blue — logo dark face  (62 uses) */
  --b400:#2D94D2;      /* secondary blue — logo light face (13) */
  --ink:#3B3838;       /* body text — warm near-black      (20) */
  --grey:#767171;      /* mid grey — labels                (10) */
  --lgrey:#E7E6E6;     /* light grey — rules                (4) */

  /* --- derived: tints and shades of the above --- */
  --b900:#16233C;      /* deep navy — dark panels, footer */
  --b700:#24487E;      /* hover / pressed */
  --b200:#A9CDE8;      /* underlines, soft fills */
  --b050:#E9F1F8;      /* wash behind diagrams */
  --paper:#F5F4F1;     /* page ground — warmed light grey */
  --white:#FDFDFC;
  --mut:#5F5B5B;       /* body copy grey.
                          NOTE: brand --grey (#767171) measures ~4.1:1 on
                          paper, just under WCAG AA 4.5:1 for body text.
                          It stays for labels 14px+ and graphics; running
                          copy uses this darkened value (~5.9:1). */

  --rule:rgba(47,96,174,.20);
  --rule-soft:rgba(47,96,174,.12);
  --rule-dark:rgba(245,244,241,.18);

  --ease:cubic-bezier(.22,1,.36,1);
  --pad-x:clamp(20px,5vw,64px);
  --pad-y:clamp(56px,8vw,104px);
  --max:1240px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
html.lock{ overflow:hidden; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter Tight',system-ui,-apple-system,sans-serif;
  font-size:15.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,canvas{ display:block; max-width:100%; }
ul{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; color:inherit; }

:focus-visible{ outline:2px solid var(--b600); outline-offset:3px; border-radius:2px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--b600); color:#fff; padding:12px 20px; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

/* ---------------------------------------------------------
   TYPE
--------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,serif;
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.025em;
}
h1{ font-size:clamp(34px,5.2vw,58px); line-height:1.06; letter-spacing:-.028em; }
h2{ font-size:clamp(27px,3.6vw,40px); }
h3{ font-size:clamp(20px,2.3vw,28px); line-height:1.16; }
h4{ font-size:clamp(17px,1.6vw,20px); line-height:1.2; }
em.hl{ font-style:italic; color:var(--b600); }

.datum{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey);
}
.lead{ font-size:clamp(15.5px,1.4vw,17px); color:var(--mut); line-height:1.75; max-width:46ch; }
p+p{ margin-top:1.05em; }

.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--pad-x); }

/* chapter opener — the editorial rule */
.chapter{
  display:flex; align-items:baseline; gap:14px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--grey); margin-bottom:clamp(20px,3vw,34px);
}
.chapter::after{ content:""; flex:1; height:1px; background:var(--rule); }
.chapter b{ font-weight:400; color:var(--b400); }

/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--b600); color:#fff;
  border-radius:32px; padding:13px 25px;
  font-size:14px; font-weight:500;
  transition:background .2s var(--ease),transform .2s var(--ease);
  cursor:pointer; border:none;
}
.btn:hover{ background:var(--b700); transform:translateY(-1px); }
.btn svg{ width:16px; height:16px; }
.btn-text{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--b600); font-size:14px; font-weight:500;
  border-bottom:1px solid var(--b200); padding-bottom:2px;
  transition:border-color .2s;
}
.btn-text:hover{ border-bottom-color:var(--b600); }

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(245,244,241,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s;
}
.hdr.stuck{ border-bottom-color:var(--rule-soft); }
.hdr-in{
  max-width:var(--max); margin:0 auto; padding:16px var(--pad-x);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.mark{
  display:flex; align-items:center; gap:11px;
  font-family:'Fraunces',Georgia,serif; font-size:20px; font-weight:600;
  letter-spacing:-.015em;
}
.mark svg{ width:25px; height:25px; flex:none; }
.nav{ display:flex; gap:clamp(16px,2.2vw,28px); font-size:14px; color:var(--mut); }
.nav a{ transition:color .2s; }
.nav a:hover,.nav a[aria-current="true"]{ color:var(--b600); }
.hdr .btn{ padding:10px 20px; font-size:13.5px; }

.burger{
  display:none; background:none; border:1px solid var(--rule);
  border-radius:8px; width:42px; height:38px; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.burger i{ display:block; width:16px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease),opacity .2s; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

.panel{
  display:none; border-top:1px solid var(--rule-soft);
  background:var(--paper); padding:8px var(--pad-x) 26px;
}
.panel.on{ display:block; }
.panel a{
  display:block; padding:13px 0; font-family:'Fraunces',Georgia,serif;
  font-size:22px; border-bottom:1px solid var(--rule-soft);
}
.panel .btn{ margin-top:20px; }

@media (max-width:940px){
  .nav,.hdr-in>.btn{ display:none; }
  .burger{ display:flex; }
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */
.hero{ padding-top:clamp(32px,5vw,56px); }
.hero-grid{
  display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(28px,4.5vw,52px); align-items:center;
}
.hero .datum{ display:block; margin-bottom:18px; color:var(--b400); }
.hero .lead{ margin-top:20px; max-width:42ch; }
.hero-cta{ display:flex; gap:18px; align-items:center; margin-top:30px; flex-wrap:wrap; }

/* the assembly plate — the one element borrowed from the blueprint study.
   Soft container is doing the work: no hard border, no figure number,
   grid masked so it fades before the edges. */
.assembly{
  background:var(--white);
  border:1px solid var(--rule-soft);
  border-radius:26px;
  padding:clamp(18px,2.6vw,30px);
  position:relative; overflow:hidden;
}
.assembly::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(47,96,174,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,96,174,.055) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(72% 64% at 50% 46%,#000 42%,transparent 100%);
  mask-image:radial-gradient(72% 64% at 50% 46%,#000 42%,transparent 100%);
}
.assembly>*{ position:relative; }
.assembly figcaption{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--grey); text-align:center; margin-top:10px;
}
/* plates rise into place from a collapsed stack */
.js .plate-g{ transform:translateY(var(--rise,0)); opacity:0; }
.js .reveal-on .plate-g{ animation:plate-in .8s var(--ease) forwards; animation-delay:var(--d,0ms); }
@keyframes plate-in{ to{ transform:translateY(0); opacity:1; } }

/* data band */
.band{
  margin-top:clamp(34px,5vw,60px);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.band>div{ padding:20px 22px; border-right:1px solid var(--rule-soft); }
.band>div:first-child{ padding-left:0; }
.band>div:last-child{ border-right:none; padding-right:0; }
.band b{
  font-family:'Fraunces',Georgia,serif; font-size:clamp(26px,3vw,34px);
  font-weight:400; color:var(--b600); display:block;
  margin-top:7px; line-height:1; letter-spacing:-.02em;
}
.band span.sub{ font-size:12.5px; color:var(--mut); display:block; margin-top:8px; }

@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; }
  .assembly{ max-width:440px; margin-inline:auto; }
  .band{ grid-template-columns:1fr 1fr; }
  .band>div{ padding:18px 16px; border-bottom:1px solid var(--rule-soft); }
  .band>div:nth-child(2n){ border-right:none; padding-right:0; }
  .band>div:nth-child(2n+1){ padding-left:0; }
  .band>div:nth-last-child(-n+2){ border-bottom:none; }
}

/* ---------------------------------------------------------
   SECTIONS
--------------------------------------------------------- */
section{ padding-block:var(--pad-y); }
section.tight{ padding-top:clamp(30px,4vw,52px); }

.sec-head{ max-width:52ch; margin-bottom:clamp(26px,3.6vw,44px); }
.sec-head .lead{ margin-top:16px; }

/* cards */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,18px); }
.card{
  background:var(--white); border:1px solid var(--rule-soft);
  border-radius:20px; padding:clamp(20px,2.2vw,26px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(22,35,60,.07); border-color:var(--rule); }
.card h3{ margin-top:13px; }
.card p{ font-size:13.5px; color:var(--mut); margin-top:10px; line-height:1.68; }
@media (max-width:1000px){ .cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .cards{ grid-template-columns:1fr; } }

/* services — wider two-up */
.svcs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.4vw,18px); }
.svc{
  background:var(--white); border:1px solid var(--rule-soft);
  border-radius:22px; padding:clamp(22px,2.6vw,32px);
  display:flex; flex-direction:column;
}
.svc h3{ margin-top:14px; }
.svc p{ font-size:14px; color:var(--mut); margin-top:11px; line-height:1.7; }
.svc .tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:20px; }
.svc .tags li{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--b600);
  background:var(--b050); border-radius:20px; padding:6px 11px;
}
@media (max-width:760px){ .svcs{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------
   PORTFOLIO — magazine features
--------------------------------------------------------- */
.proj{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(26px,4vw,48px); align-items:start;
  padding-block:clamp(34px,4.6vw,58px);
  border-top:1px solid var(--rule-soft);
}
.proj:first-of-type{ border-top:none; padding-top:0; }
/* flipped rows: reverse the order AND the column widths, so the figure
   keeps the wide column rather than inheriting the narrow one */
.proj.flip{ grid-template-columns:1.15fr .85fr; }
.proj.flip .proj-fig{ order:1; }
.proj.flip .proj-txt{ order:2; }
.proj-idx{
  font-family:'Fraunces',Georgia,serif; font-size:clamp(48px,6vw,72px);
  font-weight:300; color:var(--b200); line-height:.8; display:block;
  letter-spacing:-.04em;
}
.proj-client{ display:block; margin-top:20px; color:var(--b400); }
.proj-txt h3{ margin-top:11px; }
.proj-body{ font-size:14.5px; color:var(--mut); line-height:1.8; margin-top:16px; }
.proj-body::first-letter{
  font-family:'Fraunces',Georgia,serif; font-size:3.1em; line-height:.82;
  color:var(--b600); float:left; margin:5px 10px 0 0; font-weight:400;
}
.metrics{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-top:24px; padding-top:20px; border-top:1px solid var(--rule);
}
.metrics b{ display:block; font-size:14px; font-weight:500; margin-top:6px; }
.metrics s{ text-decoration:line-through; color:#9E9A9A; }
.metrics .live{ color:var(--b600); }

.proj-fig .mat{
  background:var(--b900); border-radius:24px;
  padding:clamp(16px,2.2vw,26px);
}
.proj-fig .screen{ background:var(--white); border-radius:12px; overflow:hidden; }
.proj-fig figcaption{ margin-top:12px; }

/* pending capture — RADAR */
.pending{
  aspect-ratio:16/9; border-radius:12px; background:var(--b050);
  border:1px dashed var(--rule); display:grid; place-items:center; text-align:center;
  padding:24px;
}
.pending p{ font-size:13px; color:var(--mut); margin-top:10px; max-width:32ch; }

@media (max-width:860px){
  .proj,.proj.flip{ grid-template-columns:1fr; }
  .proj.flip .proj-txt,.proj.flip .proj-fig{ order:0; }
  .metrics{ gap:14px; }
}

/* ---------------------------------------------------------
   WHY — numbered editorial list
--------------------------------------------------------- */
.why{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,26px); }
.why-row{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  padding:22px 0; border-top:1px solid var(--rule-soft);
}
.why-row .n{
  font-family:'Fraunces',Georgia,serif; font-size:26px; font-weight:300;
  color:var(--b200); line-height:1; letter-spacing:-.02em;
}
.why-row p{ font-size:13.5px; color:var(--mut); margin-top:8px; line-height:1.68; }
@media (max-width:760px){ .why{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------
   ABOUT
--------------------------------------------------------- */
.about{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(26px,4vw,52px); align-items:start; }
.ledger{ margin-top:26px; border-top:1px solid var(--rule); }
.ledger li{
  display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--rule-soft); font-size:14.5px;
}
.ledger em{ font-style:normal; }
@media (max-width:820px){ .about{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------
   VISION — dark panel
--------------------------------------------------------- */
.vision{
  background:var(--b900); color:var(--paper);
  border-radius:28px; padding:clamp(28px,4.4vw,52px);
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(26px,4vw,46px);
  align-items:center;
}
.vision h2{ color:var(--paper); margin-top:15px; }
.vision .datum{ color:var(--b200); }
.vision blockquote{
  font-family:'Fraunces',Georgia,serif; font-style:italic;
  font-size:clamp(16px,1.6vw,19px); line-height:1.5; color:var(--b200);
  margin-top:22px; padding-left:18px; border-left:2px solid rgba(169,205,232,.4);
}
.missions{ display:grid; gap:1px; background:var(--rule-dark); border-radius:16px; overflow:hidden; }
.missions>div{ background:var(--b900); padding:20px 22px; }
.missions h4{ margin-top:8px; }
.missions p{ font-size:13.5px; color:#C2D2E4; margin-top:7px; line-height:1.65; }
@media (max-width:860px){ .vision{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------
   CONTACT
--------------------------------------------------------- */
.contact{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4.4vw,56px); align-items:start; }
.info{ margin-top:30px; }
.info li{ padding:14px 0; border-top:1px solid var(--rule-soft); }
.info a{ display:block; font-size:16px; color:var(--b600); margin-top:5px; }
.info a:hover{ color:var(--b700); }

.form{
  background:var(--white); border:1px solid var(--rule-soft);
  border-radius:24px; padding:clamp(22px,3vw,34px);
}
.field{ margin-bottom:16px; }
.field label{ display:block; margin-bottom:7px; }
.field input,.field textarea{
  width:100%; background:var(--paper); border:1px solid var(--rule-soft);
  border-radius:12px; padding:13px 15px; font-size:15px; color:var(--ink);
  transition:border-color .2s,background .2s; resize:vertical;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--b400); background:var(--white); }
.field input:user-invalid,.field textarea:user-invalid{ border-color:#B4524A; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form .btn{ width:100%; justify-content:center; margin-top:6px; }
.note{ margin-top:14px; font-size:13px; line-height:1.6; min-height:1.2em; }
.note.ok{ color:var(--b600); }
.note.bad{ color:#B4524A; }
@media (max-width:820px){ .contact{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */
.foot{ border-top:1px solid var(--rule); padding-block:clamp(34px,4.4vw,52px) 40px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(22px,3vw,40px); }
.foot address{ font-style:normal; font-size:13.5px; color:var(--mut); margin-top:14px; line-height:1.75; }
.foot h5{ font-weight:400; }
.foot ul{ margin-top:11px; }
.foot li{ font-size:14px; line-height:1.95; }
.foot li a{ color:var(--b600); }
.foot li a:hover{ color:var(--b700); }
.foot-end{
  margin-top:34px; padding-top:20px; border-top:1px solid var(--rule-soft);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:12.5px; color:var(--mut);
}
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------
   REVEAL — slow, editorial. No counters, no loops.
--------------------------------------------------------- */
/* scoped to .js — without the script everything stays visible */
.js [data-reveal]{
  opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].on{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .plate-g{ opacity:1; transform:none; }
  .reveal-on .plate-g{ animation:none; }
  .card:hover,.btn:hover{ transform:none; }
}

/* ---------------------------------------------------------
   READING PROGRESS — a hairline, not a bar
--------------------------------------------------------- */
.progress{ height:2px; background:transparent; }
.progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--b400),var(--b600));
  transition:width .1s linear;
}

/* ---------------------------------------------------------
   CAPABILITIES EXPLORER
--------------------------------------------------------- */
.explorer{
  display:grid; grid-template-columns:.95fr 1.05fr;
  gap:clamp(26px,4vw,52px); align-items:center;
}
.explorer-viz{
  background:var(--white); border:1px solid var(--rule-soft);
  border-radius:26px; padding:clamp(16px,2.4vw,28px);
  position:relative; overflow:hidden;
}
.explorer-viz::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(47,96,174,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,96,174,.055) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(72% 64% at 50% 46%,#000 42%,transparent 100%);
  mask-image:radial-gradient(72% 64% at 50% 46%,#000 42%,transparent 100%);
}
.explorer-viz>*{ position:relative; }
.explorer-viz figcaption{ text-align:center; margin-top:8px; color:var(--b600); }

#stack .pl{
  transition:transform .55s var(--ease),opacity .4s var(--ease);
  transform-origin:center;
}
#stack .pl.dim{ opacity:.3; }
#stack .pl.act{ transform:translate(-20px,-10px); }

.disc-list{ border-bottom:1px solid var(--rule-soft); }
.disc{
  display:flex; flex-direction:column; width:100%; text-align:left;
  background:none; border:none; border-top:1px solid var(--rule-soft);
  padding:18px 0; cursor:pointer;
}
.disc-top{ display:flex; align-items:baseline; gap:16px; }
.disc-name{
  flex:1; font-family:'Fraunces',Georgia,serif; font-weight:400;
  font-size:clamp(19px,2vw,24px); letter-spacing:-.018em; line-height:1.2;
  transition:color .25s;
}
.disc.act .disc-name{ color:var(--b600); }
.disc .chev{
  width:13px; height:13px; flex:none; position:relative; opacity:.5;
  transition:opacity .25s,transform .45s var(--ease);
}
.disc .chev::before,.disc .chev::after{
  content:""; position:absolute; background:var(--b600);
  left:50%; top:50%; transform:translate(-50%,-50%);
}
.disc .chev::before{ width:13px; height:1.5px; }
.disc .chev::after{ width:1.5px; height:13px; transition:opacity .3s; }
.disc.act .chev{ opacity:1; transform:rotate(180deg); }
.disc.act .chev::after{ opacity:0; }

/* collapsed only when the script is running to open them again */
.js .disc-body{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .5s var(--ease),opacity .35s var(--ease);
}
.disc-body{ display:grid; grid-template-rows:1fr; }
/* padding on the grid item would survive a 0fr track and leave the collapsed
   row 12px tall, so it only applies where the row is actually open */
html:not(.js) .disc-body>span{ padding-top:12px; }
.disc-body>span{ overflow:hidden; display:block; }
.disc.act .disc-body{ grid-template-rows:1fr; opacity:1; }
.disc-body>span>*,.disc-body>span{
  font-family:'Inter Tight',sans-serif; font-size:14px; color:var(--mut);
  line-height:1.7;
}
.disc.act .disc-body>span{ padding-top:12px; }

@media (max-width:900px){
  .explorer{ grid-template-columns:1fr; }
  .explorer-viz{ max-width:400px; margin-inline:auto; }
}

/* ---------------------------------------------------------
   BEFORE / AFTER COMPARE
--------------------------------------------------------- */
.compare{
  --x:52%;
  position:relative; border-radius:12px; overflow:hidden;
  background:var(--white); isolation:isolate; touch-action:pan-y;
}
.cmp-layer{ display:block; }
.cmp-layer.cmp-after{
  position:absolute; inset:0;
  clip-path:inset(0 0 0 var(--x));
}
.cmp-tag{
  position:absolute; bottom:12px; z-index:3;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  padding:6px 11px; border-radius:20px; pointer-events:none;
  transition:opacity .25s;
}
.cmp-tag.l{ left:12px; background:rgba(59,56,56,.9); color:#F5F4F1; }
.cmp-tag.r{ right:12px; background:var(--b600); color:#fff; }
.cmp-handle{
  position:absolute; top:0; bottom:0; left:var(--x); z-index:4;
  width:2px; background:var(--b600); transform:translateX(-1px);
  pointer-events:none;
}
.cmp-handle i{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:50%;
  background:var(--b600); border:2px solid var(--white);
  box-shadow:0 4px 14px rgba(22,35,60,.28);
  display:block;
}
.cmp-handle i::before,.cmp-handle i::after{
  content:""; position:absolute; top:50%; width:0; height:0;
  border-block:4px solid transparent;
}
.cmp-handle i::before{ left:9px; border-right:6px solid #fff; transform:translateY(-50%); }
.cmp-handle i::after{ right:9px; border-left:6px solid #fff; transform:translateY(-50%); }

/* the range input is the real control — invisible, but focusable and
   draggable, so this works with a keyboard and a screen reader */
.cmp-range{
  position:absolute; inset:0; z-index:5; width:100%; height:100%;
  margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none;
  background:transparent;
}
.cmp-range::-webkit-slider-thumb{ -webkit-appearance:none; width:44px; height:100%; cursor:ew-resize; }
.cmp-range::-moz-range-thumb{ width:44px; height:100%; border:none; background:transparent; cursor:ew-resize; }
.cmp-range:focus-visible{ outline:none; }
.cmp-range:focus-visible ~ .cmp-handle i{ box-shadow:0 0 0 4px rgba(45,148,210,.5); }

/* ---------------------------------------------------------
   COMPOSER
--------------------------------------------------------- */
.composer{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(26px,4vw,52px); align-items:center;
  background:var(--white); border:1px solid var(--rule-soft);
  border-radius:28px; padding:clamp(26px,4vw,48px);
}
.composer h2{ margin-top:14px; }
.composer .lead{ margin-top:16px; }
.picks{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.pick{
  background:var(--paper); border:1px solid var(--rule-soft);
  border-radius:30px; padding:11px 19px; font-size:14px; cursor:pointer;
  transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease);
}
.pick:hover{ border-color:var(--b200); transform:translateY(-1px); }
.pick[aria-pressed="true"]{ background:var(--b600); border-color:var(--b600); color:#fff; }
.composer-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-top:26px;
  padding-top:22px; border-top:1px solid var(--rule-soft);
}
#compose-go[disabled]{ opacity:.4; cursor:not-allowed; }
#compose-go[disabled]:hover{ background:var(--b600); transform:none; }

.composer-viz{ position:relative; }
.composer-viz figcaption{ text-align:center; margin-top:8px; }
.js #build .bp{
  opacity:0; transform:translateY(-18px);
  transition:opacity .45s var(--ease),transform .55s var(--ease);
}
#build .bp.on{ opacity:1; transform:none; }
#build .bp-ghost{ opacity:1; transition:opacity .4s; }
#build.any .bp-ghost{ opacity:0; }

@media (max-width:900px){
  .composer{ grid-template-columns:1fr; }
  .composer-viz{ max-width:360px; margin-inline:auto; order:-1; }
}

/* ---------------------------------------------------------
   HERO ASSEMBLY — pointer tilt
--------------------------------------------------------- */
.assembly{ perspective:1000px; }
.assembly svg{ transition:transform .6s var(--ease); will-change:transform; }

@media (prefers-reduced-motion:reduce){
  .assembly svg{ transform:none !important; transition:none; }
  #stack .pl,.disc-body,#build .bp,.pick,.cmp-handle{ transition:none; }
  #build .bp{ opacity:1; transform:none; }
  .progress i{ transition:none; }
}

@media print{
  .hdr,.panel,.burger,.picks,.composer-foot,.cmp-range,.cmp-handle{ display:none; }
  body{ background:#fff; }
}