/* =========================================================
   Pixel Peak Logos - service page demos
   Every service page opens with a small window that shows the work itself: a logo changing style,
   a site building, a search result climbing. Built from HTML, CSS and the icon sprite, in the same
   language as the home page's project window (.pw in styles.css). scenes.js only starts and stops them.
   Reduced motion: every scene shows its finished state and nothing loops.
   ========================================================= */

/* ---------- The window ---------- */
.demo {
  position: relative; isolation: isolate;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px;
  width: 100%; max-width: 620px; justify-self: center;
  aspect-ratio: 6 / 5;
  margin: 0;
  padding: clamp(16px, 2.2vw, 26px);
  border-radius: var(--radius-lg);
  background: var(--grad);
  overflow: hidden;
  --scene-ink: #140D0D;
  --scene-line: #E9E1DB;
  --scene-soft: #F7F3EF;
  --scene-dim: #D9CEC6;
}
.demo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .2) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .2) 1px, transparent 1px);
  background-size: 12.5% 15%;
}
.demo--ink { background: var(--ink); }
.demo--ink::before { background-image: linear-gradient(to right, rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .07) 1px, transparent 1px); }
.demo--orange { background: var(--orange); }

.demo__win {
  position: relative; z-index: 1;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 26px 50px -22px rgba(72, 10, 20, .6);
  overflow: hidden;
}
.demo--ink .demo__win { box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .8); }
.demo__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--scene-line);
  background: var(--scene-soft);
  font-family: var(--mono); font-size: .625rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.demo__lights { display: flex; gap: 5px; flex: none; }
.demo__lights i { width: 7px; height: 7px; border-radius: 50%; background: var(--scene-dim); }
.demo__file { margin-left: auto; }
.demo__body { position: relative; min-height: 0; padding: 14px; overflow: hidden; }

.demo__cap {
  display: inline-flex; align-items: center; gap: 9px;
  justify-self: start;
  padding: 8px 15px;
  border-radius: 999px;
  background: #fff; color: var(--ink);
  box-shadow: 0 10px 22px -12px rgba(72, 10, 20, .55);
  font-family: var(--mono); font-size: .6875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.demo__cap .pixel-dot { width: 8px; height: 8px; }

/* Step dots, bottom right of the window */
.demo__steps { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; gap: 6px; }
.demo__steps button {
  width: 9px; height: 9px; padding: 0; border: 0;
  background: var(--scene-dim);
  transition: background-color .25s, transform .25s var(--ease);
}
.demo__steps button:hover { background: var(--muted); }
.demo__steps button.is-active { background: var(--grad-a); transform: scale(1.35); }

/* Shared scene bits */
.sc-label { font-family: var(--mono); font-size: .5625rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sc-bar { display: block; height: 6px; border-radius: 3px; background: var(--scene-line); }
.sc-bar--ink { background: var(--scene-ink); }
.sc-bar--grad { background: var(--grad); }
@media (prefers-reduced-motion: reduce) {
  .demo *, .demo *::before, .demo *::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   01 Logo design - one business, six logo styles
   ========================================================= */
.sc-logo { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; padding-bottom: 12px; }
.sc-logo__stage {
  position: relative; min-height: 0;
  border-radius: 10px;
  background:
    linear-gradient(to right, rgba(20, 13, 13, .05) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(to bottom, rgba(20, 13, 13, .05) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--scene-soft);
}
.sc-logo__slide {
  position: absolute; inset: 8%;
  margin: 0;
  opacity: 0; transform: scale(.94);
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
/* Absolute, so the picture is sized by the frame and never by its own proportions */
.sc-logo__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sc-logo__slide.is-active { opacity: 1; transform: none; }
.sc-logo__rail { display: flex; gap: 6px; justify-content: center; }
.sc-logo__rail button {
  display: grid; place-items: center;
  width: 42px; height: 42px; padding: 5px;
  border: 1.5px solid var(--scene-line); border-radius: 8px; background: #fff;
  transition: border-color .25s, transform .25s var(--ease);
}
.sc-logo__rail img { width: 100%; height: 100%; object-fit: contain; opacity: .55; transition: opacity .25s; }
.sc-logo__rail button:hover img { opacity: .9; }
.sc-logo__rail button.is-active { border-color: var(--grad-a); transform: translateY(-2px); }
.sc-logo__rail button.is-active img { opacity: 1; }

/* =========================================================
   02 Brand identity - the kit assembles itself
   ========================================================= */
.sc-kit { display: block; }
.sc-kit > * { position: absolute; }
.sc-kit__card {
  left: 6%; top: 10%; width: 52%; aspect-ratio: 1.7;
  display: grid; align-content: center; gap: 4px;
  padding: 12px 14px;
  border-radius: 8px; background: var(--scene-ink); color: #fff;
  box-shadow: 0 14px 26px -14px rgba(20, 13, 13, .7);
}
.sc-kit__card svg { width: 22px; height: 22px; color: var(--ex-kit, #F2B33D); }
.sc-kit__card b { font-size: .875rem; letter-spacing: -.02em; }
.sc-kit__card small { font-family: var(--mono); font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.sc-kit__sheet {
  right: 5%; top: 6%; width: 34%; aspect-ratio: .72;
  display: grid; align-content: start; gap: 6px;
  padding: 12px 10px;
  border-radius: 6px; background: #fff; border: 1px solid var(--scene-line);
  box-shadow: 0 12px 24px -14px rgba(20, 13, 13, .4);
}
.sc-kit__sheet i { display: block; height: 4px; border-radius: 2px; background: var(--scene-line); }
.sc-kit__sheet i:first-child { width: 40%; height: 8px; background: var(--ex-kit, #F2B33D); }
.sc-kit__sheet i:nth-child(3) { width: 70%; }
.sc-kit__sheet i:nth-child(5) { width: 55%; }
.sc-kit__palette { left: 6%; bottom: 8%; display: flex; gap: 6px; }
.sc-kit__palette li { width: 34px; height: 34px; border-radius: 6px; background: var(--c); box-shadow: 0 6px 14px -8px rgba(20, 13, 13, .6); }
.sc-kit__type {
  right: 8%; bottom: 10%;
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: 8px; background: var(--scene-soft); border: 1px solid var(--scene-line);
  font-size: 1.75rem; font-weight: 800; letter-spacing: -.04em;
}
.demo.is-live .sc-kit__card { animation: sc-drop .7s var(--ease) .1s both; }
.demo.is-live .sc-kit__sheet { animation: sc-drop .7s var(--ease) .3s both; }
.demo.is-live .sc-kit__type { animation: sc-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.35s both; }
.demo.is-live .sc-kit__palette li { animation: sc-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.demo.is-live .sc-kit__palette li:nth-child(1) { animation-delay: .75s; }
.demo.is-live .sc-kit__palette li:nth-child(2) { animation-delay: .88s; }
.demo.is-live .sc-kit__palette li:nth-child(3) { animation-delay: 1.01s; }
.demo.is-live .sc-kit__palette li:nth-child(4) { animation-delay: 1.14s; }
@keyframes sc-drop { from { opacity: 0; transform: translateY(-14px) rotate(-2deg); } }
@keyframes sc-pop { from { opacity: 0; transform: scale(.4); } }

/* =========================================================
   03 Website development - the page builds, then scores
   ========================================================= */
.sc-site { display: grid; grid-template-rows: auto auto 1fr; gap: 8px; padding: 0; }
.sc-site__nav { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--scene-line); }
.sc-site__nav svg { width: 18px; height: 18px; color: var(--grad-a); }
.sc-site__nav i { height: 5px; width: 26px; border-radius: 3px; background: var(--scene-line); }
.sc-site__nav em { margin-left: auto; width: 52px; height: 18px; border-radius: 999px; background: var(--scene-ink); }
.sc-site__hero { display: grid; gap: 7px; padding: 10px 14px 0; }
.sc-site__hero b { font-size: 1rem; letter-spacing: -.03em; line-height: 1.1; }
.sc-site__hero i { height: 5px; border-radius: 3px; background: var(--scene-line); }
.sc-site__hero i:nth-of-type(1) { width: 80%; }
.sc-site__hero i:nth-of-type(2) { width: 62%; }
.sc-site__cta { width: 92px; height: 26px; border-radius: 999px; background: var(--grad); }
.sc-site__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 14px 14px; align-items: end; }
.sc-site__cards i { display: block; border-radius: 8px; background: var(--scene-soft); border: 1px solid var(--scene-line); height: 100%; min-height: 46px; }
.sc-site__cards i:nth-child(2) { background: #FDE3D3; border-color: #F8CDB4; }
.sc-site__gauge {
  position: absolute; right: 12px; bottom: 12px;
  display: grid; place-items: center;
  width: 74px; height: 74px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 12px 24px -12px rgba(20, 13, 13, .45);
}
.sc-site__gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sc-site__gauge circle { fill: none; stroke-width: 5; }
.sc-site__gauge .sc-track { stroke: var(--scene-line); }
.sc-site__gauge .sc-arc { stroke: url(#g-brand); stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 176; }
.sc-site__gauge b { font-size: 1.125rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.sc-site__gauge small { font-family: var(--mono); font-size: .5rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.demo.is-live .sc-site__nav { animation: sc-in .5s var(--ease) .1s both; }
.demo.is-live .sc-site__hero > * { animation: sc-in .5s var(--ease) both; }
.demo.is-live .sc-site__hero b { animation-delay: .35s; }
.demo.is-live .sc-site__hero i:nth-of-type(1) { animation-delay: .5s; }
.demo.is-live .sc-site__hero i:nth-of-type(2) { animation-delay: .6s; }
.demo.is-live .sc-site__cta { animation-delay: .75s; }
.demo.is-live .sc-site__cards i { animation: sc-rise .6s var(--ease) both; }
.demo.is-live .sc-site__cards i:nth-child(1) { animation-delay: .95s; }
.demo.is-live .sc-site__cards i:nth-child(2) { animation-delay: 1.08s; }
.demo.is-live .sc-site__cards i:nth-child(3) { animation-delay: 1.21s; }
.demo.is-live .sc-site__gauge { animation: sc-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.5s both; }
.demo.is-live .sc-site__gauge .sc-arc { animation: sc-arc 1.4s var(--ease) 1.7s both; }
@keyframes sc-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes sc-rise { from { opacity: 0; transform: translateY(18px) scale(.96); } }
@keyframes sc-arc { to { stroke-dashoffset: 4; } }

/* =========================================================
   04 UI/UX - drag the handle: wireframe on one side, design on the other
   ========================================================= */
.sc-wire { --wipe: 50%; padding: 0; touch-action: pan-y; }
.sc-wire__layer { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto 1fr; gap: 8px; padding: 14px; }
.sc-wire__layer--wire {
  background:
    linear-gradient(to right, rgba(20, 13, 13, .05) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(to bottom, rgba(20, 13, 13, .05) 1px, transparent 1px) 0 0 / 16px 16px,
    #fff;
}
/* Crossed boxes, the way a wireframe marks an image */
.sc-wire__layer--wire .sc-wire__tiles i, .sc-wire__layer--wire .sc-wire__head span {
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--scene-dim) calc(50% - .5px), var(--scene-dim) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--scene-dim) calc(50% - .5px), var(--scene-dim) calc(50% + .5px), transparent calc(50% + .5px));
  border: 1.5px solid var(--scene-dim);
  opacity: 1;
}
.sc-wire__layer--real { clip-path: inset(0 calc(100% - var(--wipe)) 0 0); background: #fff; }
.sc-wire__head { display: flex; align-items: center; gap: 8px; }
.sc-wire__head span { width: 22px; height: 22px; border-radius: 6px; background: var(--scene-dim); }
.sc-wire__head i { height: 6px; width: 60px; border-radius: 3px; background: var(--scene-dim); }
.sc-wire__head em { margin-left: auto; width: 46px; height: 20px; border-radius: 4px; background: var(--scene-dim); }
.sc-wire__block { display: grid; gap: 6px; }
.sc-wire__block i { height: 7px; border-radius: 3px; background: var(--scene-dim); }
.sc-wire__block i:nth-child(1) { width: 70%; height: 13px; }
.sc-wire__block i:nth-child(2) { width: 90%; }
.sc-wire__block i:nth-child(3) { width: 55%; }
.sc-wire__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-wire__tiles i { border-radius: 8px; background: var(--scene-dim); opacity: .55; }
.sc-wire__layer--real .sc-wire__head span { background: var(--grad); }
.sc-wire__layer--real .sc-wire__head i { background: var(--scene-ink); width: 74px; }
.sc-wire__layer--real .sc-wire__head em { background: var(--scene-ink); border-radius: 999px; }
.sc-wire__layer--real .sc-wire__block i { background: var(--scene-line); }
.sc-wire__layer--real .sc-wire__block i:nth-child(1) { background: var(--scene-ink); }
.sc-wire__layer--real .sc-wire__tiles i { opacity: 1; background: var(--scene-soft); border: 1px solid var(--scene-line); }
.sc-wire__layer--real .sc-wire__tiles i:nth-child(1) { background: #FDE3D3; border-color: #F8CDB4; }
.sc-wire__layer--real .sc-wire__tiles i:nth-child(2) { background: #FCD6DF; border-color: #F7B9C8; }
.sc-wire__layer--real .sc-wire__tiles i:nth-child(3) { background: #FFE8CC; border-color: #FAD4A4; }
.sc-wire__tag {
  position: absolute; top: 12px; z-index: 2;
  padding: 4px 9px; border-radius: 999px;
  font-family: var(--mono); font-size: .5rem; letter-spacing: .08em; text-transform: uppercase;
}
.sc-wire__tag--wire { right: 12px; background: var(--scene-soft); color: var(--muted); }
.sc-wire__tag--real { left: 12px; background: var(--ink); color: #fff; }
.sc-wire__handle {
  position: absolute; top: 0; bottom: 0; left: var(--wipe); z-index: 4;
  width: 40px; margin-left: -20px; padding: 0;
  border: 0; background: none; cursor: ew-resize; touch-action: none;
}
.sc-wire__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 19px; width: 2px; background: var(--ink); }
.sc-wire__handle span {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(20, 13, 13, .8);
  font-size: .75rem; letter-spacing: -.1em;
}
.sc-wire:not(.is-touched) .sc-wire__handle, .sc-wire:not(.is-touched) .sc-wire__layer--real { transition: none; }
.demo.is-live .sc-wire:not(.is-touched) { animation: sc-sweep 6s var(--ease) 1s infinite; }
.sc-wire.is-dragging .sc-wire__handle span { scale: 1.1; }
@keyframes sc-sweep {
  0%, 8% { --wipe: 8%; }
  46%, 58% { --wipe: 92%; }
  96%, 100% { --wipe: 8%; }
}
@property --wipe { syntax: '<percentage>'; inherits: true; initial-value: 50%; }

/* =========================================================
   05 Mobile apps - three screens in a phone
   ========================================================= */
.sc-app { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.sc-app__phone {
  position: relative; overflow: hidden;
  width: 132px; aspect-ratio: .5;
  border: 5px solid var(--scene-ink); border-radius: 22px;
  background: #fff;
}
.sc-app__phone::before { content: ""; position: absolute; top: 6px; left: 50%; translate: -50%; z-index: 3; width: 38px; height: 5px; border-radius: 3px; background: var(--scene-ink); }
.sc-app__screen {
  position: absolute; inset: 0;
  display: grid; align-content: start; gap: 7px;
  padding: 18px 10px 10px;
  opacity: 0; transform: translateX(14%);
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.sc-app__screen.is-active { opacity: 1; transform: none; }
.sc-app__screen b { font-size: .6875rem; letter-spacing: -.02em; }
.sc-app__screen i { display: block; height: 6px; border-radius: 3px; background: var(--scene-line); }
.sc-app__hero { height: 54px; border-radius: 8px; background: var(--grad); }
.sc-app__row { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: center; }
.sc-app__row span { height: 22px; border-radius: 6px; background: var(--scene-soft); border: 1px solid var(--scene-line); }
.sc-app__tabs { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 2; display: flex; justify-content: space-between; }
.sc-app__tabs i { width: 20px; height: 5px; border-radius: 3px; background: var(--scene-line); }
.sc-app__tabs i:first-child { background: var(--grad-a); }
.sc-app__notes { display: grid; gap: 8px; }
.sc-app__notes li {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--scene-line); border-radius: 8px;
  font-size: .75rem; font-weight: 600; letter-spacing: -.01em;
}
.sc-app__notes li::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--grad); }
.demo.is-live .sc-app__notes li { animation: sc-in .5s var(--ease) both; }
.demo.is-live .sc-app__notes li:nth-child(1) { animation-delay: .2s; }
.demo.is-live .sc-app__notes li:nth-child(2) { animation-delay: .35s; }
.demo.is-live .sc-app__notes li:nth-child(3) { animation-delay: .5s; }

/* =========================================================
   06 Custom software - a dashboard doing its job
   ========================================================= */
.sc-dash { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 12px; }
.sc-dash__side { display: grid; align-content: start; gap: 7px; padding-right: 10px; border-right: 1px solid var(--scene-line); }
.sc-dash__side i { height: 8px; border-radius: 3px; background: var(--scene-line); }
.sc-dash__side i:first-child { background: var(--grad); }
.sc-dash__main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; min-height: 0; }
.sc-dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-dash__kpi { padding: 8px 10px; border-radius: 8px; background: var(--scene-soft); }
.sc-dash__kpi b { display: block; font-size: .9375rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sc-dash__chart { display: flex; align-items: flex-end; gap: 7px; min-height: 0; padding: 8px; border-radius: 8px; border: 1px solid var(--scene-line); }
.sc-dash__chart i { flex: 1; border-radius: 3px 3px 0 0; background: var(--scene-line); height: var(--h, 40%); transform-origin: bottom; }
.sc-dash__chart i:nth-child(4) { background: var(--grad); }
.sc-dash__flow { display: flex; align-items: center; gap: 6px; }
.sc-dash__flow span { flex: 1; display: grid; place-items: center; padding: 6px 4px; border-radius: 6px; background: var(--scene-soft); font-family: var(--mono); font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sc-dash__flow em { width: 10px; height: 1.5px; background: var(--scene-dim); flex: none; }
.demo.is-live .sc-dash__chart i { animation: sc-grow .8s var(--ease) both; }
.demo.is-live .sc-dash__chart i:nth-child(1) { animation-delay: .2s; }
.demo.is-live .sc-dash__chart i:nth-child(2) { animation-delay: .32s; }
.demo.is-live .sc-dash__chart i:nth-child(3) { animation-delay: .44s; }
.demo.is-live .sc-dash__chart i:nth-child(4) { animation-delay: .56s; }
.demo.is-live .sc-dash__chart i:nth-child(5) { animation-delay: .68s; }
.demo.is-live .sc-dash__flow span { animation: sc-flow 4.5s var(--ease) infinite; }
.demo.is-live .sc-dash__flow span:nth-child(3) { animation-delay: 1.2s; }
.demo.is-live .sc-dash__flow span:nth-child(5) { animation-delay: 2.4s; }
@keyframes sc-grow { from { transform: scaleY(.05); opacity: .4; } }
@keyframes sc-flow { 0%, 100% { background: var(--scene-soft); color: var(--muted); } 12%, 26% { background: var(--ink); color: #fff; } }

/* =========================================================
   07 SEO - the result climbs to the top
   ========================================================= */
.sc-rank { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
.sc-rank__search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--scene-line); border-radius: 999px; }
.sc-rank__search svg { width: 14px; height: 14px; color: var(--muted); }
.sc-rank__search span { font-size: .6875rem; color: var(--muted); }
.sc-rank__search em { margin-left: auto; font-family: var(--mono); font-size: .5625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--grad-a); font-style: normal; }
.sc-rank__list { position: relative; display: grid; grid-auto-rows: 34px; gap: 6px; align-content: start; }
.sc-rank__list li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; background: var(--scene-soft); }
.sc-rank__list li span { font-family: var(--mono); font-size: .5625rem; color: var(--muted); }
.sc-rank__list li i { display: block; height: 6px; border-radius: 3px; background: var(--scene-dim); width: var(--w, 70%); }
.sc-rank__list li em { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--scene-line); width: calc(var(--w, 70%) - 18%); }
.sc-rank__you {
  position: relative; z-index: 2;
  background: #fff !important; border: 1.5px solid var(--grad-a);
  box-shadow: 0 10px 22px -12px rgba(239, 90, 26, .7);
}
.sc-rank__you i { background: var(--grad) !important; }
.sc-rank__you span { color: var(--grad-a) !important; font-weight: 600; }
.demo.is-live .sc-rank__you { animation: sc-climb 5s var(--ease) 1s infinite; }
@keyframes sc-climb {
  0%, 14% { transform: translateY(0); }
  46%, 88% { transform: translateY(-160px); }
  100% { transform: translateY(0); }
}

/* =========================================================
   08 Social media - a feed that keeps going
   ========================================================= */
.sc-feed { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 12px; }
.sc-feed__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 6px; }
.sc-feed__grid i { border-radius: 6px; background: var(--scene-soft); border: 1px solid var(--scene-line); }
.sc-feed__grid i:nth-child(3n + 1) { background: #FDE3D3; border-color: #F8CDB4; }
.sc-feed__grid i:nth-child(3n + 2) { background: var(--grad); border: 0; }
.sc-feed__side { display: grid; align-content: start; gap: 8px; }
.sc-feed__stat { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--scene-line); }
.sc-feed__stat b { display: block; font-size: .9375rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sc-feed__cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sc-feed__cal i { aspect-ratio: 1; border-radius: 3px; background: var(--scene-line); }
.demo.is-live .sc-feed__grid i { animation: sc-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.demo.is-live .sc-feed__grid i:nth-child(1) { animation-delay: .15s; }
.demo.is-live .sc-feed__grid i:nth-child(2) { animation-delay: .25s; }
.demo.is-live .sc-feed__grid i:nth-child(3) { animation-delay: .35s; }
.demo.is-live .sc-feed__grid i:nth-child(4) { animation-delay: .45s; }
.demo.is-live .sc-feed__grid i:nth-child(5) { animation-delay: .55s; }
.demo.is-live .sc-feed__grid i:nth-child(6) { animation-delay: .65s; }
.demo.is-live .sc-feed__grid i:nth-child(7) { animation-delay: .75s; }
.demo.is-live .sc-feed__grid i:nth-child(8) { animation-delay: .85s; }
.demo.is-live .sc-feed__grid i:nth-child(9) { animation-delay: .95s; }
.demo.is-live .sc-feed__cal i { animation: sc-fill 4s steps(1) infinite; }
.demo.is-live .sc-feed__cal i:nth-child(2n) { animation-delay: .6s; }
.demo.is-live .sc-feed__cal i:nth-child(3n) { animation-delay: 1.2s; }
@keyframes sc-fill { 0%, 40% { background: var(--scene-line); } 50%, 100% { background: var(--orange); } }

/* =========================================================
   09 Content and creative - the edit comes together
   ========================================================= */
.sc-edit { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 10px; }
.sc-edit__canvas {
  position: relative; display: grid; place-items: center; min-height: 0;
  border-radius: 8px; background: var(--ink); color: #fff; overflow: hidden;
}
.sc-edit__canvas b { position: relative; z-index: 2; max-width: 80%; font-size: .9375rem; letter-spacing: -.03em; line-height: 1.2; text-align: center; }
.sc-edit__canvas b::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -.15em; background: var(--orange); }
.demo.is-live .sc-edit__canvas b::after { animation: sc-blink 1s steps(1) infinite; }
.sc-edit__glow { position: absolute; inset: -30%; background: radial-gradient(circle at 30% 30%, rgba(239, 90, 26, .55), transparent 60%); }
.demo.is-live .sc-edit__glow { animation: sc-drift 9s ease-in-out infinite alternate; }
.sc-edit__track { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 6px; border-radius: 6px; background: var(--scene-soft); }
.sc-edit__track i { height: 18px; border-radius: 3px; background: var(--scene-dim); }
.sc-edit__track i:nth-child(2), .sc-edit__track i:nth-child(5) { background: var(--grad); }
.sc-edit__head { position: absolute; top: 2px; bottom: 2px; left: 6px; width: 2px; background: var(--ink); }
.demo.is-live .sc-edit__head { animation: sc-play 5s linear infinite; }
.sc-edit__meta { display: flex; gap: 6px; }
.sc-edit__meta span { padding: 4px 8px; border-radius: 999px; background: var(--scene-soft); font-family: var(--mono); font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@keyframes sc-blink { 50% { opacity: 0; } }
@keyframes sc-drift { to { transform: translate(20%, 12%); } }
@keyframes sc-play { from { left: 6px; } to { left: calc(100% - 8px); } }

/* =========================================================
   10 Virtual assistance - the list clears itself
   ========================================================= */
.sc-inbox { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; }
.sc-inbox__head { display: flex; align-items: center; justify-content: space-between; }
.sc-inbox__head b { font-size: .875rem; letter-spacing: -.02em; }
.sc-inbox__list { display: grid; gap: 6px; align-content: start; }
.sc-inbox__list li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: center; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--scene-line); }
.sc-inbox__tick { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--scene-dim); color: transparent; font-size: .625rem; }
.sc-inbox__list i { display: block; height: 6px; border-radius: 3px; background: var(--scene-line); width: var(--w, 80%); }
.sc-inbox__saved { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 8px; background: var(--scene-ink); color: #fff; }
.sc-inbox__saved b { font-size: 1rem; font-weight: 800; letter-spacing: -.03em; }
.sc-inbox__saved span { font-family: var(--mono); font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-ink); }
.demo.is-live .sc-inbox__list li { animation: sc-done 6s var(--ease) infinite; }
.demo.is-live .sc-inbox__list li:nth-child(2) { animation-delay: .7s; }
.demo.is-live .sc-inbox__list li:nth-child(3) { animation-delay: 1.4s; }
.demo.is-live .sc-inbox__list li:nth-child(4) { animation-delay: 2.1s; }
@keyframes sc-done {
  0%, 30% { opacity: 1; }
  38% { background: #F4FBF6; border-color: #BFE3CC; }
  70%, 100% { opacity: .35; background: #fff; border-color: var(--scene-line); }
}
.demo.is-live .sc-inbox__list li .sc-inbox__tick { animation: sc-ticked 6s steps(1) infinite; }
.demo.is-live .sc-inbox__list li:nth-child(2) .sc-inbox__tick { animation-delay: .7s; }
.demo.is-live .sc-inbox__list li:nth-child(3) .sc-inbox__tick { animation-delay: 1.4s; }
.demo.is-live .sc-inbox__list li:nth-child(4) .sc-inbox__tick { animation-delay: 2.1s; }
@keyframes sc-ticked { 0%, 35% { background: none; border-color: var(--scene-dim); color: transparent; } 36%, 100% { background: #17A34A; border-color: #17A34A; color: #fff; } }

/* ---------- Phones: the window keeps its shape, the scenes get simpler ---------- */
@media (max-width: 560px) {
  .demo { aspect-ratio: 1 / 1; }
  .sc-app { grid-template-columns: 1fr; justify-items: center; }
  .sc-app__notes { display: none; }
  .sc-feed { grid-template-columns: minmax(0, 1fr); }
  .sc-feed__side { grid-template-columns: 1fr 1fr; display: grid; }
  .sc-feed__cal { display: none; }
  .sc-dash { grid-template-columns: 1fr; }
  .sc-dash__side { display: none; }
}

/* =========================================================
   Wall - a slow strip of work or quotes that keeps moving (portfolio and reviews)
   ========================================================= */
.wall { display: grid; gap: clamp(10px, 1.2vw, 14px); overflow: hidden; width: 100%; }
.wall__row { display: flex; gap: clamp(10px, 1.2vw, 14px); width: max-content; }
.motion .wall__row { animation: wall-slide 64s linear infinite; will-change: transform; }
.motion .wall__row--back { animation-duration: 82s; animation-direction: reverse; }
.wall:hover .wall__row, .wall:focus-within .wall__row { animation-play-state: paused; }
@keyframes wall-slide { to { transform: translateX(-50%); } }
.wall__item { flex: none; overflow: hidden; border-radius: 12px; background: var(--ink-2); }
.wall__item img { display: block; width: auto; height: clamp(90px, 11vw, 132px); aspect-ratio: 4 / 3; object-fit: cover; }
/* Quotes instead of pictures */
.wall--quotes .wall__item {
  display: grid; align-content: center; gap: 8px;
  width: clamp(230px, 24vw, 300px); padding: 18px 20px;
  border: 1px solid rgba(20, 13, 13, .12); border-radius: var(--radius);
  background: rgba(255, 255, 255, .82);
  font-size: .9375rem; line-height: 1.45;
}
.wall--quotes .wall__item cite { font-family: var(--mono); font-size: .625rem; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .wall { mask-image: none; } }
.wall--faded { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }

/* =========================================================
   Lightbox - a bigger look at a portfolio piece
   ========================================================= */
.lb { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: clamp(14px, 2vw, 28px); background: rgba(10, 6, 6, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lb__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #fff; }
.lb__count { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-ink); }
.lb__stage { position: relative; display: grid; place-items: center; min-height: 0; }
.lb__stage img { max-width: min(1080px, 100%); max-height: 100%; border-radius: 16px; background: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.lb__foot { display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; }
.lb__cap { text-align: center; }
.lb__cap b { display: block; font-size: 1.125rem; letter-spacing: -.02em; }
.lb__cap span { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-ink); }
.lb__btn { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.1rem; transition: background-color .2s, border-color .2s; }
.lb__btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.lb__btn--prev, .lb__btn--next { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; }
.lb__btn--prev { left: 0; }
.lb__btn--next { right: 0; }
.lb__btn--prev .icon { transform: rotate(180deg); }
body.lb-open { overflow: hidden; }
.gallery__item button { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.gallery__item button::after {
  content: "View"; position: absolute; left: 50%; top: 40%; translate: -50% -50%;
  padding: 9px 16px; border-radius: 999px; background: #fff; color: var(--ink);
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transition: opacity .25s var(--ease), translate .25s var(--ease);
  pointer-events: none;
}
@media (hover: hover) { .gallery__item button:hover::after, .gallery__item button:focus-visible::after { opacity: 1; translate: -50% -60%; } }

/* =========================================================
   Package picker - three questions, one recommendation (pricing)
   ========================================================= */
.picker {
  position: relative; overflow: hidden;
  display: grid; gap: clamp(20px, 3vw, 32px);
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: var(--radius-lg);
  background: var(--ink); color: #fff;
}
@media (min-width: 900px) { .picker { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.picker::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
}
.picker > * { position: relative; }
.picker__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; max-width: 12em; }
.picker__lede { margin-top: 14px; color: var(--muted-on-ink); max-width: 34em; }
.picker__steps { display: flex; gap: 6px; margin-top: 24px; }
.picker__steps i { width: 26px; height: 4px; border-radius: 2px; background: var(--ink-3); transition: background-color .3s; }
.picker__steps i.is-done { background: var(--grad); }
.picker__panel { display: grid; gap: 14px; align-content: start; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--ink-3); min-height: 260px; }
.picker__q { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }
.picker__options { display: grid; gap: 8px; }
.picker__options button {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 16px;
  border: 1.5px solid var(--ink-3); border-radius: 12px; background: transparent; color: #fff;
  font-size: .9375rem; font-weight: 600; text-align: left;
  transition: border-color .2s, background-color .2s, transform .2s var(--ease);
}
.picker__options button::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--grad); opacity: .55; transition: opacity .2s, scale .2s; }
.picker__options button:hover { border-color: #fff; transform: translateX(3px); }
.picker__options button:hover::before { opacity: 1; scale: 1.2; }
.picker__back { justify-self: start; margin-top: 2px; color: var(--muted-on-ink); font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; background: none; border: 0; padding: 0; }
.picker__back:hover { color: #fff; }
.picker__result { display: grid; gap: 10px; }
.picker__result-label { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-ink); }
.picker__result b { font-size: 1.5rem; letter-spacing: -.03em; }
.picker__price { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.picker__price span { font-size: .45em; vertical-align: .55em; margin-right: .1em; }
.picker__why { color: var(--muted-on-ink); font-size: .9375rem; line-height: 1.5; }
.picker__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.motion .picker__panel > * { animation: sc-in .45s var(--ease) both; }

/* =========================================================
   One roof - the About window that walks through what the team does
   ========================================================= */
.sc-team { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; }
.sc-team__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-content: center; }
.sc-team__grid span {
  display: grid; place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--scene-line); border-radius: 10px;
  transition: border-color .35s, background-color .35s, transform .35s var(--ease);
}
.sc-team__grid svg { width: 60%; height: 60%; fill: none; stroke: var(--scene-dim); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s; }
.sc-team__grid span.is-active { border-color: transparent; background: var(--ink); transform: translateY(-3px); }
.sc-team__grid span.is-active svg { stroke: #fff; }
.sc-team__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; background: var(--scene-soft); }
.sc-team__bar b { font-size: .875rem; letter-spacing: -.02em; }

/* =========================================================
   Flow - three steps, for pages that need the shape of the work
   ========================================================= */
.flow { display: grid; gap: clamp(14px, 1.8vw, 20px); counter-reset: flow; }
@media (min-width: 800px) { .flow { grid-template-columns: repeat(3, 1fr); } }
.flow li {
  position: relative;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff;
}
.flow__num { display: block; margin-bottom: 18px; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; color: var(--muted); }
.flow h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: -.03em; line-height: 1.1; }
.flow p { margin-top: 10px; color: var(--muted); font-size: .96875rem; line-height: 1.55; }
.flow li::after {
  content: ""; position: absolute; right: clamp(22px, 2.4vw, 30px); top: clamp(22px, 2.4vw, 30px);
  width: 10px; height: 10px; background: var(--grad);
}
@media (min-width: 800px) {
  .flow li:not(:last-child)::before {
    content: ""; position: absolute; right: -1px; top: 50%; z-index: 1;
    width: clamp(14px, 1.8vw, 20px); height: 1px; translate: 100% 0;
    background: var(--line);
  }
}
.section > .wall { margin-bottom: clamp(32px, 4vw, 56px); }
.gallery__item button { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.wall--top { margin-top: clamp(32px, 4vw, 56px); margin-bottom: clamp(40px, 5vw, 72px); }