/* Cendavo mockup kit (Daylight, Task 34): the homepage's "after" mini-site (Harbourside, in the before/after comparison),
   the device bench that plays the concept projects' screen-recording loops (Work, Services), its interface cards, and
   the phone frame for the silent social clips. Loaded only on /, /work/ and /services/ (KIT_PAGES in
   scripts/build_site.py). Every device is decorative: its parts are aria-hidden and one role="img" group describes it.
   Nothing here moves or hides content; motion.js and reel.js add the movement. Tokens come from site.css. */
/* Harbourside mini-site (homepage comparison) */
.ms{position:absolute;inset:0;overflow:hidden;line-height:1.3;font-size:4.3cqw}
.ms img{width:100%;height:100%;object-fit:cover}
.ms i{font-style:normal}
.hb{display:flex;flex-direction:column;background:#0C1116;color:#EEF1F2;font-family:var(--font-display)}
.hb-nav{position:absolute;z-index:2;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:1.4em 2.6em}
.hb-logo{font-weight:700;font-stretch:125%;letter-spacing:.14em;font-size:.92em;line-height:1}
.hb-logo small{display:block;margin-top:.35em;font:400 .66em var(--font-text);letter-spacing:.04em;opacity:.7}
.hb-links i{margin:0 1.2em;font-family:var(--font-text);font-size:.8em;opacity:.82}
.hb-book{padding:.85em 1.35em;border-radius:.2em;background:#EEF1F2;color:#0C1116;font-weight:700;font-size:.78em}
.hb-hero{position:relative;flex:1 1 auto;min-height:0}
.hb-hero img{position:absolute;inset:0;object-position:62% 60%}
.hb-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,16,.86),rgba(8,12,16,.5) 36%,rgba(8,12,16,0) 62%),linear-gradient(180deg,rgba(8,12,16,.6),rgba(8,12,16,0) 26%)}
.hb-copy{position:absolute;z-index:1;left:2.6em;bottom:2.6em;width:44%}
.hb-kick{font-family:var(--font-text);font-size:.78em;color:#A9CBDB}
.hb-h{margin:.3em 0 .35em;font-size:3.6em;font-weight:820;font-stretch:76%;line-height:.9;letter-spacing:-.02em}
.hb-p{max-width:24em;font-family:var(--font-text);font-size:.86em;color:rgba(238,241,242,.78)}
.hb-btns{display:flex;gap:.6em;margin-top:1.3em}
.hb-btn{padding:.9em 1.4em;border-radius:.2em;background:#A9CBDB;color:#0C1116;font-weight:700;font-size:.8em}
.hb-btn-o{background:transparent;color:#EEF1F2;box-shadow:inset 0 0 0 1px rgba(238,241,242,.45)}
.hb-pk{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6em;padding:1.3em 2.6em 1.5em;border-top:1px solid rgba(238,241,242,.1)}
.hb-pk>div{display:grid;grid-template-columns:5em 1fr;column-gap:.9em;align-items:center}
.hb-pk img{grid-row:span 2;height:3.4em;border-radius:.15em}
.hb-pk b{align-self:end;font-weight:650;font-size:.95em}
.hb-pk span{align-self:start;font-family:var(--font-text);font-size:.74em;color:rgba(238,241,242,.6)}

@container (max-width:560px){.hb-links,.hb-book,.hb-p,.hb-pk>div:nth-child(3){display:none}
.hb-nav{padding:1.2em 1.4em}
.hb-copy{left:1.4em;right:1.4em;width:auto;bottom:1.4em}
.hb-h{font-size:2.6em}
.hb-pk{grid-template-columns:1fr 1fr;gap:1em;padding:1em 1.4em}
}


/* Device bench: a laptop and a phone on a warm plinth, drawn in cqw so the whole set scales with its column and the
   stage's aspect-ratio reserves the space before anything loads. The screens show the loop's poster until it plays. */
.bench{position:relative;margin:0;container-type:inline-size}
.bench-stage{position:relative;aspect-ratio:100/56}
.bench-plinth{position:absolute;left:7%;right:0;top:7%;bottom:2%;border-radius:2.6cqw;background:linear-gradient(160deg,#F6F5F1 0%,#F0EEE7 100%);box-shadow:inset 0 0 0 1px rgba(14,14,13,.04)}
.bench-plinth::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(90deg,rgba(14,14,13,.035) 0 1px,transparent 1px 4cqw),repeating-linear-gradient(0deg,rgba(14,14,13,.035) 0 1px,transparent 1px 4cqw);-webkit-mask:radial-gradient(ellipse at 55% 40%,#000 20%,transparent 75%);mask:radial-gradient(ellipse at 55% 40%,#000 20%,transparent 75%)}
.bench-floor{position:absolute;left:12%;right:6%;bottom:2%;height:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(58,40,12,.16),transparent)}
.d-lap{position:absolute;left:14%;top:10%;width:66%}
.d-lid{position:relative;padding:1.05cqw 1.05cqw 1.3cqw;border-radius:1.8cqw 1.8cqw .6cqw .6cqw;background:linear-gradient(160deg,#1B1B1A,#0B0B0A 60%);box-shadow:inset 0 0 0 .1cqw #3A3936,0 2.4cqw 4cqw -1.6cqw rgba(14,14,13,.38)}
.d-scr{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:.4cqw;background:#151514}
.d-video{display:block;width:100%;height:100%;object-fit:cover}
.d-base{position:relative;height:1.5cqw;margin:0 -4cqw;border-radius:.25cqw .25cqw 2cqw 2cqw;background:linear-gradient(180deg,#F2F1EE 0%,#D9D7D1 45%,#BDBAB3 100%);box-shadow:inset 0 .1cqw 0 #fff,0 1.4cqw 2cqw -.8cqw rgba(14,14,13,.32)}
.d-base::before{content:"";position:absolute;left:50%;top:0;width:8cqw;height:.6cqw;margin-left:-4cqw;border-radius:0 0 .6cqw .6cqw;background:linear-gradient(#CBC8C1,#DEDCD6)}
.d-ph{position:absolute;left:3%;top:30%;width:15.5%;padding:.6cqw;border-radius:2.6cqw;background:linear-gradient(150deg,#262624,#0C0C0B);box-shadow:inset 0 0 0 .12cqw #4A4844,0 2cqw 3.4cqw -1.4cqw rgba(14,14,13,.45),0 .7cqw 1.2cqw -.5cqw rgba(58,40,12,.3)}
.d-ph-scr{position:relative;aspect-ratio:780/1688;overflow:hidden;border-radius:2cqw;background:#151514}
.d-ph-scr::after{content:"";position:absolute;top:.6cqw;left:50%;width:4cqw;height:1.1cqw;margin-left:-2cqw;border-radius:1cqw;background:#000}
.bench-cap{margin-top:18px;color:var(--ink-2);font-size:.9375rem}

/* Interface cards on the bench (illustrations, in their finished state; motion.js plays the state change) */
.ui{position:absolute;z-index:4;display:flex;align-items:center;gap:.9em;padding:1em 1.15em;border-radius:1.1em;background:rgba(255,255,255,.94);box-shadow:var(--shadow-lift);color:var(--ink);font-size:clamp(10px,1.08cqw,15px);line-height:1.2}
.ui-t{display:flex;flex-direction:column;gap:.3em;white-space:nowrap}
.ui-t b{font:700 1.08em/1.1 var(--font-display);font-stretch:96%;letter-spacing:-.01em}
.ui-t small{color:var(--mute);font-size:.86em}
.ui .tag{display:inline-flex;padding:.3em .6em;border-radius:999px;background:var(--warm);color:var(--amber-ink);font:600 .78em/1 var(--font-display)}
.ui-ava{display:grid;place-items:center;flex:none;width:2.6em;height:2.6em;overflow:hidden;border-radius:50%;background:var(--amber);font:760 1em/1 var(--font-display)}
.ui-ava img{width:100%;height:100%;object-fit:cover}
.ui-col{flex-direction:column;align-items:stretch;gap:.75em}
.ui-row{display:flex;align-items:center;justify-content:space-between;gap:1em}
.ui svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ui .ck{display:inline;margin-right:.3em;vertical-align:-.2em;color:var(--ok)}
.ui-btn{display:flex;align-items:center;justify-content:center;gap:.45em;height:2.6em;border-radius:999px;background:var(--amber);font:680 .92em/1 var(--font-display)}
.ui-btn.done{background:var(--ok);color:#fff}
.ui-chips{display:flex;flex-wrap:wrap;gap:.4em;max-width:19em}
.ui-chips span{display:inline-flex;align-items:center;height:2.1em;padding:0 .8em;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font:600 .86em/1 var(--font-display)}
.ui-chips .on{background:var(--ink);color:#fff;box-shadow:none}
.ui-thumbs{display:grid;grid-template-columns:repeat(4,3.4em);gap:.45em}
.ui-thumbs img,.ui-thumbs i{width:3.4em;height:3.4em;border-radius:.6em;object-fit:cover}
.ui-thumbs i{display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--mute);font-style:normal;font-size:1.2em}
.ui-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
.ui-slots span{display:grid;place-items:center;height:2.2em;border-radius:.6em;box-shadow:inset 0 0 0 1px var(--line-2);font:600 .86em/1 var(--font-display);font-variant-numeric:tabular-nums}
.ui-slots .on{background:var(--ink);color:#fff;box-shadow:none}
.ui-pill{gap:.6em;padding:.7em 1em;border-radius:999px}
.ui-pill i{width:.65em;height:.65em;border-radius:50%;background:#2F9E64;box-shadow:0 0 0 .3em rgba(47,158,100,.16)}
.ui-pill b{font:650 1em/1 var(--font-display);font-stretch:96%}
/* Per project: where the devices and cards sit */
.b-hb .d-lap{left:15%}
.b-hb .ui-a{left:1%;top:3%}
.b-hb .ui-b{left:69%;top:55%;width:19em}
.b-gl .bench-plinth{left:0;right:7%}
.b-gl .d-lap{left:5%;top:9%}
.b-gl .d-ph{left:auto;right:4%;top:24%}
.b-gl .ui-a{left:58%;top:1%}
.b-gl .ui-b{left:0;top:60%}
.b-fc .bench-plinth{left:0;right:3%}
.b-fc .d-lap{left:4%;top:11%;width:64%}
.b-fc .d-ph{left:auto;right:6%;top:13%;width:18%}
.b-fc .ui-a{left:57%;top:66%;width:17.5em}
.b-fc .ui-b{left:2%;top:2%}
/* Narrow columns (phones, and Fade & Co's bench on tablets): a taller stage, the laptop full width, the phone in front */
@container (max-width:700px){
.bench-stage{aspect-ratio:100/128}
.bench-plinth,.b-gl .bench-plinth,.b-fc .bench-plinth{left:0;right:0;top:14%;bottom:10%;border-radius:5cqw}
.d-lap,.b-hb .d-lap,.b-gl .d-lap,.b-fc .d-lap{left:4%;top:25%;width:92%}
.d-lid{padding:1.8cqw 1.8cqw 2.2cqw;border-radius:3cqw 3cqw 1cqw 1cqw}
.d-base{height:2.4cqw;margin:0 -3cqw}
.d-ph,.b-gl .d-ph,.b-fc .d-ph{left:auto;right:3%;top:47%;width:25%;padding:1cqw;border-radius:4.4cqw}
.d-ph-scr{border-radius:3.4cqw}
.ui{font-size:clamp(10px,2.9cqw,13px)}
.b-hb .ui-a,.b-gl .ui-a,.b-fc .ui-b{left:0;right:auto;top:0}
.b-hb .ui-b,.b-gl .ui-b,.b-fc .ui-a{left:0;top:auto;bottom:0;width:auto;max-width:72%}
}

/* Silent social clips (Work, Services): a 9:16 video in a phone frame, shown whole, with its description, caption and the
   Pause/Play button beside it. reel.js swaps the native controls for the button; without JS the controls stay. */
.clip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:end;margin-top:40px}
.sp{position:relative;width:230px;margin:0}
.sp-frame{padding:10px;border-radius:44px;background:linear-gradient(150deg,#262624,#0C0C0B);box-shadow:inset 0 0 0 2px #4A4844,0 30px 50px -24px rgba(14,14,13,.5),0 10px 20px -10px rgba(58,40,12,.3)}
.sp-scr{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:34px;background:#151514}
.sp-video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.clip-side{min-width:0}
.clip-desc{max-width:42ch;margin:0;color:var(--ink-2);font-size:.9375rem;line-height:1.5}
.clip-cap{margin:8px 0 0;color:var(--mute);font-size:.875rem}
.vt{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:16px;padding:0 18px 0 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--paper);color:var(--ink);font:650 .9375rem/1 var(--font-display)}
.vt:hover{border-color:var(--ink)}
.vt::before{content:"";width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.vt.is-playing::before{width:9px;height:11px;border:0;border-inline:3px solid currentColor}
/* Task 48: the Play button ships hidden and reel.js reveals it. With scripts on (.js, set in <head>) an empty placeholder
   of exactly its size (16px gap, 44px button: a block-level button, so no line box adds to it) holds its place from the
   first paint, so revealing it never pushes the content below (CLS). The placeholder is empty: nothing to announce. */
.clip-side .vt{display:flex;width:fit-content}
.js .clip-side:has(>.vt[hidden])::after{content:"";display:block;height:44px;margin-top:16px}
@media(max-width:560px){
.clip{grid-template-columns:42% minmax(0,1fr);gap:16px}
.sp{width:100%}
.sp-frame{padding:6px;border-radius:30px}
.sp-scr{border-radius:24px}
.clip-desc{font-size:.875rem}
}