/* Process section: a finished example website assembles itself in a quiet browser frame (assembly.js).
   Everything inside the site is sized in cqw of the window, so the composition scales like a picture;
   below 520px the site switches to its own phone layout. The CSS alone shows the finished site. */
.asm{position:relative;width:100%}
.asm-window{position:relative;overflow:hidden;border-radius:12px;background:#0a1730;box-shadow:0 1px 0 #ffffff14 inset,0 30px 60px -24px #02081acc,0 10px 24px -12px #02081a99;container-type:inline-size;contain:layout paint}
.asm-bar{display:flex;align-items:center;gap:6px;height:clamp(22px,3.2cqw,30px);padding:0 clamp(10px,1.6cqw,16px);background:#0a1730}
.asm-bar i{width:clamp(5px,.75cqw,8px);aspect-ratio:1;border-radius:50%;background:#ffffff26}
.asm-site{position:relative;overflow:hidden;background:#0f2448}
.asm-canvas{inset:0}
.asm-site *{box-sizing:border-box}
.asm-a{position:absolute;margin:0}
.asm-l{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.asm-l>span{display:block;white-space:nowrap;will-change:transform}
.asm-ph{overflow:hidden}
.asm-ph img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.asm-rule{height:1px;transform-origin:0 50%}
.asm-menu{display:none}

/* the build made visible: a column grid and an outline where each block will land (hidden when finished) */
.asm-guides{inset:0 4cqw;display:grid;grid-template-columns:repeat(12,1fr);gap:1.6cqw;pointer-events:none;z-index:3}
.asm-guides i{background:#d6ae5b12;border-inline:1px solid #d6ae5b2e;transform-origin:50% 0;opacity:0}
.asm-ols{inset:0;pointer-events:none;z-index:4}
.asm-ols i{position:absolute;border:1px dashed #d6ae5bcc;background:#d6ae5b0f;opacity:0}
.asm-ols i::before,.asm-ols i::after{content:"";position:absolute;width:5px;height:5px;background:#d6ae5b}
.asm-ols i::before{left:-3px;top:-3px}.asm-ols i::after{right:-3px;bottom:-3px}

/* the conversation before the build, in Krascorp's own colours */
.asm-chat{left:14cqw;right:14cqw;top:9cqw;display:grid;gap:1.6cqw;z-index:5;font-family:InterTight,system-ui,sans-serif;font-size:clamp(12px,1.9cqw,17px);line-height:1.4}
.asm-msg{display:flex;align-items:flex-end;gap:1.2cqw;opacity:0}
.asm-msg.is-us{flex-direction:row-reverse}
.asm-av{flex:none;display:grid;place-items:center;width:clamp(26px,3.6cqw,36px);height:clamp(26px,3.6cqw,36px);border-radius:50%;background:#f4efe3;color:#0b1a33;font-size:.7em;font-weight:700;letter-spacing:-.02em}
img.asm-av{background:#0b1a33;padding:5px;border:1px solid #d6ae5b66}
.asm-bub{position:relative;max-width:78%;margin:0;padding:.75em 1em;border-radius:1.1em 1.1em 1.1em .3em;background:#f4efe3;color:#0b1a33}
.is-us .asm-bub{border-radius:1.1em 1.1em .3em 1.1em;background:#d6ae5b;color:#0b1a33;font-weight:500}
.asm-dots{position:absolute;inset:0;display:flex;align-items:center;gap:.3em;padding:0 1em;opacity:0}
.asm-dots i{width:.42em;height:.42em;border-radius:50%;background:currentColor;opacity:.45;animation:asm-dot 1s infinite}
.asm-dots i:nth-child(2){animation-delay:.15s}.asm-dots i:nth-child(3){animation-delay:.3s}
@keyframes asm-dot{0%,60%,100%{transform:none;opacity:.35}30%{transform:translateY(-.25em);opacity:.8}}

/* the invoice that goes out at the end: the site dims, the card comes forward, ka-ching */
.asm-dim{inset:0;z-index:5;background:#0b1a33b8;opacity:0}
.asm-inv{left:29cqw;right:29cqw;top:50%;margin-top:-10cqw;padding:2.2cqw 2.6cqw 2.4cqw;z-index:6;background:#f7f2e6;color:#0b1a33;border-top:.5cqw solid #d6ae5b;box-shadow:0 3cqw 6cqw -2cqw #02081ae6;font-family:InterTight,system-ui,sans-serif;overflow:visible;opacity:0}
.asm-inv-head{display:flex;align-items:center;justify-content:space-between;font-size:1.5cqw}
.asm-inv-head img{width:3cqw;height:3cqw;padding:.45cqw;border-radius:50%;background:#0b1a33}
.asm-inv-item{display:block;margin-top:.6cqw;font-size:1.3cqw;color:#0b1a33a6}
.asm-inv-row{display:flex;align-items:center;justify-content:space-between;margin-top:1.4cqw;padding-top:1.4cqw;border-top:1px solid #0b1a331f}
.asm-inv-row strong{display:block;font-family:DMSerifDisplay,Georgia,serif;font-weight:400;font-size:4.6cqw;line-height:1;transform-origin:0 70%;font-variant-numeric:tabular-nums}
.asm-chip{position:relative;display:grid;font-size:1.3cqw;font-weight:600}
.asm-chip>span:not(.asm-rays){grid-area:1/1;padding:.6cqw 1.3cqw;border-radius:99px;text-align:center}
.asm-chip .is-sent{border:1px solid #0b1a3340}
.asm-chip .is-paid{background:#0b1a33;color:#e8c57c}
.asm-rays{position:absolute;left:50%;top:50%;width:0;height:0}
.asm-rays i{position:absolute;left:0;top:-1px;width:1.1em;height:2px;border-radius:2px;background:#d6ae5b;transform-origin:0 50%;opacity:0}
.asm-shine{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.asm-shine i{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffffd9 50%,transparent 65%);transform:translateX(110%)}

/* controls: a hairline that fills with the loop, pause and replay */
.asm-ctl{display:flex;align-items:center;gap:8px;width:100%;justify-self:stretch;margin-top:14px}
.asm-ctl[hidden]{display:none}
.asm-track{flex:1;height:1px;background:#ffffff1f;overflow:hidden}
.asm-track i{display:block;height:100%;background:var(--gold,#d6ae5b);transform-origin:0 50%;transform:scaleX(0)}
.asm-btn{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid #ffffff26;border-radius:50%;background:none;color:var(--gold-soft,#e8c57c);cursor:pointer;transition:background-color .2s,border-color .2s,transform .15s}
.asm-btn:hover{background:#ffffff0f;border-color:#e8c57c80}
.asm-btn:active{transform:scale(.94)}
.asm-btn:focus-visible{outline:2px solid var(--gold,#d6ae5b);outline-offset:2px}
.asm-btn svg{width:14px;height:14px;fill:currentColor}
.asm-btn .i-play,.asm-ctl.is-paused .asm-btn .i-pause{display:none}
.asm-ctl.is-paused .asm-btn .i-play{display:block}

/* ---------- Orvel, an independent watchmaker ---------- */
.asm--watch .asm-canvas{background:#14110e}
.asm--watch .asm-site{height:66cqw;color:#ece4d6;font-family:InterTight,system-ui,sans-serif}
.asm--watch .w-mark{left:4cqw;top:2.05cqw;font-family:DMSerifDisplay,Georgia,serif;font-size:2.5cqw;line-height:1.1;letter-spacing:.01em}
.asm--watch .w-links{right:17cqw;top:2.95cqw;display:flex;gap:2.8cqw;font-size:1.05cqw;font-weight:500;color:#ece4d6b3}
.asm--watch .w-navcta{right:4cqw;top:2.05cqw;padding:.75cqw 1.35cqw;border:1px solid #b8925f;font-size:1.05cqw;font-weight:500;color:#ece4d6;white-space:nowrap}
.asm--watch .w-rule{left:4cqw;right:4cqw;top:7cqw;background:#ece4d621}
.asm--watch .w-hero{left:46cqw;right:0;top:7cqw;height:39cqw}
.asm--watch .w-hero img{object-position:30% 50%}
.asm--watch .w-h1{left:4cqw;top:10.6cqw;font-family:DMSerifDisplay,Georgia,serif;font-weight:400;font-size:7.3cqw;line-height:.96;letter-spacing:-.012em}
.asm--watch .w-h1 .asm-l:last-child>span{color:#c9a46c}
.asm--watch .w-lede{left:4cqw;top:34.2cqw;width:21cqw;font-size:1.2cqw;line-height:1.5;color:#ece4d6a6}
.asm--watch .w-cta{left:27cqw;top:34.4cqw;display:flex;align-items:center;gap:1.4cqw;padding:1cqw 1.5cqw;background:#c9a46c;color:#14110e;font-size:1.1cqw;font-weight:600;white-space:nowrap}
.asm--watch .w-cta b{width:.9cqw;height:1px;background:currentColor}
.asm--watch .w-panel{left:0;right:0;top:46cqw;bottom:0;background:#ebe4d6;transform-origin:50% 100%}
.asm--watch .w-piece{left:4cqw;top:42cqw;width:16cqw;height:22cqw;box-shadow:0 1.2cqw 2.4cqw -1cqw #14110e66}
.asm--watch .w-h2{left:25cqw;top:49.6cqw;font-family:DMSerifDisplay,Georgia,serif;font-weight:400;font-size:3.3cqw;line-height:1.02;color:#1a1612}
.asm--watch .w-text{left:25cqw;top:58.6cqw;width:30cqw;font-size:1.1cqw;line-height:1.5;color:#1a1612a6}
.asm--watch .w-specs{left:62cqw;top:49.6cqw;width:34cqw;color:#1a1612}
.asm--watch .w-row{position:relative;display:flex;justify-content:space-between;height:3.5cqw;align-items:center;font-size:1.05cqw}
.asm--watch .w-row span{color:#1a161299}
.asm--watch .w-row .asm-rule{position:absolute;left:0;right:0;top:0;background:#1a161226}
.asm--watch .w-price{left:62cqw;top:61cqw;width:34cqw;display:flex;justify-content:space-between;align-items:baseline;color:#1a1612}
.asm--watch .w-price strong{font-family:DMSerifDisplay,Georgia,serif;font-weight:400;font-size:2.1cqw}
.asm--watch .w-price span{font-size:1.05cqw;font-weight:600;border-bottom:1px solid #1a1612}


/* ---------- the phone layout of both sites ---------- */
@container (max-width:520px){
  .asm-chat{left:6cqw;right:6cqw;top:16cqw;gap:4cqw;font-size:4cqw}
  .asm-av{width:9cqw;height:9cqw}
  .asm-guides{inset:0 6cqw;grid-template-columns:repeat(4,1fr);gap:4cqw}.asm-guides i:nth-child(n+5){display:none}
  .asm-inv{left:8cqw;right:8cqw;margin-top:-22cqw;padding:5cqw 5.5cqw;border-top-width:1.2cqw}
  .asm-inv-head{font-size:3.8cqw}.asm-inv-head img{width:7cqw;height:7cqw;padding:1.1cqw}
  .asm-inv-item{font-size:3.4cqw;margin-top:1.2cqw}.asm-inv-row{margin-top:3cqw;padding-top:3cqw}
  .asm-inv-row strong{font-size:10cqw}.asm-chip{font-size:3.4cqw}.asm-chip>span:not(.asm-rays){padding:1.4cqw 3cqw}
  .asm-menu{display:grid;gap:1.6cqw;right:6cqw;top:6cqw;width:7cqw}.asm-menu i{height:2px;background:currentColor}
  .asm--watch .asm-site{height:160cqw}
  .asm--watch .w-mark{left:6cqw;top:4.2cqw;font-size:6.4cqw}
  .asm--watch .w-links,.asm--watch .w-navcta,.asm--watch .w-specs{display:none}
  .asm--watch .w-rule{left:6cqw;right:6cqw;top:15cqw}
  .asm--watch .w-h1{left:6cqw;top:21cqw;font-size:15.5cqw}
  .asm--watch .w-lede{left:6cqw;top:70cqw;width:80cqw;font-size:3.7cqw}
  .asm--watch .w-cta{left:6cqw;top:85cqw;padding:3cqw 4.2cqw;font-size:3.6cqw;gap:4cqw}.asm--watch .w-cta b{width:3cqw}
  .asm--watch .w-hero{left:0;top:99cqw;height:33cqw}
  .asm--watch .w-panel{top:132cqw}
  .asm--watch .w-piece{left:6cqw;top:122cqw;width:30cqw;height:34cqw}
  .asm--watch .w-h2{left:42cqw;top:137cqw;font-size:6.2cqw}
  .asm--watch .w-text{display:none}
  .asm--watch .w-price{left:42cqw;top:151cqw;width:52cqw}.asm--watch .w-price strong{font-size:5cqw}.asm--watch .w-price span{display:none}
}
@media (prefers-reduced-motion:reduce){.asm-ctl{display:none}}