/* Campaigns: explanation + horizontal asset map. E-commerce: explanation above the product page demos.
   Mock-up sizes use em; each stage sets font-size to the map unit (--u), so the whole map scales together. */

/* ---------- hero: a little air between Production, Campaigns and E-commerce ---------- */
body:not(.work-open):not(.mobile-work-open) .pillars { gap:calc(var(--overlay-row) * .14); }

/* ---------- chapter intro, shared by Campaigns and E-commerce ---------- */
.cm, .commerce-chapter { border-top:1px solid var(--line); scroll-margin-top:60px; color:#161616; font-family:var(--body-font); }
.cm { --band:#faf9f7; background:var(--band); }
.ci { display:grid; grid-template-columns:1fr 1fr; }
.ci-head { padding:52px 10% 34px; border-right:1px solid var(--line); }
.ci-head h2 { font:400 clamp(36px,4.2vw,68px)/1.04 var(--mark-font); letter-spacing:-.035em; margin:18px 0 14px; }
.ci-head p { max-width:340px; font-size:15px; line-height:1.6; color:#555; }
.ci-body { display:flex; align-items:flex-end; padding:52px 10% 34px; }
.ci-statement { font:400 clamp(23px,2vw,31px)/1.2 var(--mark-font); letter-spacing:-.025em; max-width:520px; }
.ci-points { grid-column:1 / -1; list-style:none; margin:0; padding:0 5%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); }
.ci-points li { padding:20px 5% 24px 0; }
.ci-points li + li { padding-left:5%; border-left:1px solid var(--line); }
.ci-points span { display:block; text-transform:uppercase; font-size:10px; letter-spacing:.14em; line-height:1.5; }
.ci-points p { font-size:14px; line-height:1.6; color:#555; margin-top:9px; }

/* ---------- Campaigns: the map ---------- */
.cm-map { --u:7px; --bronze:#9b7b56; position:relative; background:var(--band); }
.cm-pin { display:flex; flex-direction:column; padding:34px 0 24px; }
.cm-controls { display:flex; align-items:center; gap:10px; }
.cm-sample { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#6f6f69; white-space:nowrap; }
.cm-controls button, .cm-restart { appearance:none; border:1px solid rgba(18,18,18,.2); background:transparent; color:#161616; cursor:pointer; transition:background .25s, color .25s, opacity .25s, border-color .25s; }
.cm-controls button { width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.cm-controls svg, .cm-restart svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.cm-controls button:hover, .cm-restart:hover { background:#161616; color:#fff; border-color:#161616; }
.cm-controls button:disabled { opacity:.28; pointer-events:none; }
.cm-controls button:focus-visible, .cm-restart:focus-visible { outline:1px solid #161616; outline-offset:4px; }
.cm-viewport { position:relative; display:flex; align-items:flex-start; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior-x:contain; padding:8px 0 6px; outline:none; }
.cm-viewport::-webkit-scrollbar { display:none; }
.cm-viewport:focus-visible { outline:1px solid #161616; outline-offset:-1px; }
.cm-viewport img { -webkit-user-drag:none; user-select:none; }
@media (hover:hover) and (pointer:fine) { .cm-viewport { cursor:grab; } .cm-viewport.is-dragging { cursor:grabbing; user-select:none; } .cm-viewport.is-dragging * { pointer-events:none; } }
@media (hover:none) { .cm-viewport { scroll-snap-type:x proximity; } }
.cm-track { position:relative; display:flex; align-items:flex-start; list-style:none; margin:0; padding:0 5vw; }
.cm-track::before { content:""; position:absolute; left:5vw; right:5vw; top:5px; height:1px; background:rgba(18,18,18,.16); }
.cm-station { position:relative; flex:none; width:calc(var(--w) * var(--u)); margin-right:calc(10 * var(--u)); scroll-snap-align:start; scroll-margin-left:5vw; }
.cm-station:last-child { margin-right:0; }
.cm-foot { display:flex; align-items:center; gap:22px; padding:0 5vw; margin-top:16px; }
.cm-progress { position:relative; flex:1; height:1px; background:rgba(18,18,18,.14); overflow:hidden; }
.cm-progress i { position:absolute; inset:0; background:#161616; transform-origin:0 50%; transform:scaleX(0); }

/* lane head: node on the map line, then the destination */
.cm-lane { display:grid; grid-template-columns:11px 1fr; column-gap:0; padding-bottom:calc(2.6 * var(--u)); }
.cm-lane > :not(.cm-node) { grid-column:2; padding-left:14px; }
.cm-node { grid-row:1 / span 2; width:11px; height:11px; background:var(--band); border:1px solid #161616; transition:background .6s ease; position:relative; z-index:1; }
.cm-station.is-live .cm-node { background:#161616; }
.cm-src .cm-node { border-color:var(--bronze); }
.cm-src.is-live .cm-node { background:var(--bronze); }
.cm-idx { justify-self:start; position:relative; z-index:1; padding-right:14px; background:var(--band); font:400 10px/11px var(--body-font); letter-spacing:.14em; text-transform:uppercase; color:#6f6f69; }
.cm-src .cm-idx { color:var(--bronze); }
.cm-lane h3 { font:400 clamp(23px,2vw,31px)/1.15 var(--mark-font); letter-spacing:-.025em; margin:12px 0 0; }

/* deliverables, drawn at their true proportions */
.cm-slots { list-style:none; margin:calc(2.6 * var(--u)) 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.cm-slots li { display:flex; align-items:center; gap:10px; font:400 12px/1.4 var(--body-font); }
.cm-shape-box { flex:none; width:30px; height:18px; display:flex; align-items:center; justify-content:center; }
.cm-shape { width:min(30px, calc(18px * var(--r))); aspect-ratio:var(--r); border:1px solid rgba(18,18,18,.45); }
.cm-shape-seq { width:24px; aspect-ratio:auto; height:6px; border:0; background:radial-gradient(circle, rgba(18,18,18,.5) 0 2px, transparent 2.4px) 0 50% / 9px 6px repeat-x; }
.cm-slots b { font-weight:400; color:#161616; }
.cm-slots span { color:#6f6f69; }

/* ---------- stage + shared device frames ---------- */
.cm-stage { position:relative; display:flex; align-items:center; justify-content:space-between; font-size:var(--u); width:calc(var(--w) * 1em); height:54em; line-height:1.3; color:#161616; }
.cm-stage *, .cm-stage *::before, .cm-stage *::after { box-sizing:border-box; }
.cm-stage img, .cm-stage video { display:block; width:100%; height:100%; object-fit:cover; }
.cm-station:not(.is-live) .cm-stage *, .cm-station:not(.is-live) .cm-stage *::before, .cm-station:not(.is-live) .cm-stage *::after { animation-play-state:paused !important; }
.wm { font-family:var(--mark-font); font-weight:600; letter-spacing:.34em; }
.ico { display:inline-flex; flex:none; width:1.9em; height:1.9em; }
.ico svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.dev-phone { position:relative; flex:none; width:22em; height:47.7em; background:#141414; border-radius:4.5em; padding:.95em; box-shadow:0 2.6em 5.2em -1.8em rgba(24,20,14,.42), 0 .5em 1.2em rgba(24,20,14,.14), inset 0 0 0 .12em #3a3a3a; }
.dev-phone::before { content:""; position:absolute; top:1.85em; left:50%; width:6.6em; height:1.9em; margin-left:-3.3em; border-radius:1em; background:#0b0b0b; z-index:6; }
.ph-screen { position:relative; width:100%; height:100%; border-radius:3.6em; overflow:hidden; background:#fff; isolation:isolate; }
.ph-status { position:absolute; top:0; left:0; right:0; height:4.4em; display:flex; align-items:center; justify-content:space-between; padding:0 2.5em 0 3.1em; z-index:5; }
.ph-status b { font:600 1.2em/1 var(--body-font); letter-spacing:-.01em; }
.ph-status i { width:2.3em; height:1.1em; border:.13em solid currentColor; border-radius:.36em; opacity:.85; position:relative; }
.ph-status i::after { content:""; position:absolute; inset:.14em .5em .14em .14em; background:currentColor; border-radius:.14em; }

.dev-card { position:relative; flex:none; width:28em; background:#fff; border-radius:1.2em; overflow:hidden; box-shadow:0 2.2em 4.6em -1.8em rgba(24,20,14,.34), 0 .4em 1em rgba(24,20,14,.08); }

/* ---------- S: the shoot ---------- */
.src-stage { gap:3em; }
.src-tag { display:block; font:400 .95em/1 var(--body-font); letter-spacing:.14em; text-transform:uppercase; color:var(--bronze); margin-bottom:1.1em; }
.src-sheet { flex:none; width:31em; background:#fff; padding:1.4em 1.4em 1.2em; box-shadow:0 1.6em 3.6em -1.8em rgba(24,20,14,.3); }
.src-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1em .8em; }
.src-frame { margin:0; }
.src-frame img { aspect-ratio:4/5; height:auto; outline:.2em solid transparent; outline-offset:.26em; animation:src-pick 9.6s ease-in-out infinite; animation-delay:calc(var(--i) * 1.2s); }
.src-frame figcaption { font:400 .78em/1 var(--body-font); letter-spacing:.1em; color:#8a8a84; margin-top:.6em; }
@keyframes src-pick { 0%, 2% { outline-color:transparent; } 5%, 12% { outline-color:var(--bronze); } 15%, 100% { outline-color:transparent; } }
.src-film { flex:none; width:19em; }
.src-screen { position:relative; aspect-ratio:9/16; overflow:hidden; background:#111; border-radius:.5em; box-shadow:0 2.2em 4.6em -1.8em rgba(24,20,14,.34), 0 .4em 1em rgba(24,20,14,.08); }
.src-edit { position:absolute; inset:0; }
.src-cut { position:absolute; inset:0; opacity:0; animation:src-cut 12s linear infinite; animation-delay:calc(var(--c) * 3s - 12s); }
.src-cut img { transform-origin:50% 40%; animation:kb 12s ease-out infinite alternate; }
@keyframes src-cut { 0%, 24.9% { opacity:1; } 25%, 100% { opacity:0; } }

/* ---------- 01: the store ---------- */
.dev-browser { position:absolute; left:0; top:2.5em; width:64em; height:40em; background:#fff; border-radius:1em; overflow:hidden; box-shadow:0 2.6em 5.2em -2em rgba(24,20,14,.34), 0 .4em 1em rgba(24,20,14,.08); }
.br-bar { position:relative; height:3.2em; display:flex; align-items:center; gap:.6em; padding:0 1.3em; background:#eeede8; border-bottom:1px solid rgba(0,0,0,.06); }
.br-bar i { width:.95em; height:.95em; border-radius:50%; background:#d5d3cc; }
.br-url { position:absolute; left:50%; top:50%; width:calc(24 * var(--u)); height:calc(1.9 * var(--u)); transform:translate(-50%,-50%); border-radius:1em; background:#fff; display:flex; align-items:center; justify-content:center; font:1em/1 var(--body-font); color:#8a8a84; letter-spacing:.04em; }
.br-screen { position:absolute; top:3.2em; left:0; right:0; bottom:0; overflow:hidden; }
.site-scroll { animation:site-scroll 20s cubic-bezier(.65,0,.3,1) infinite; }
@keyframes site-scroll {
  0%, 12% { transform:translateY(0); }
  27%, 40% { transform:translateY(-31em); }
  55%, 68% { transform:translateY(-58em); }
  82%, 90% { transform:translateY(-83em); }
  100% { transform:translateY(0); }
}
.site-nav { height:4.2em; display:grid; grid-template-columns:auto auto auto 1fr auto auto auto; align-items:center; gap:2.1em; padding:0 2.4em; border-bottom:1px solid #eee; background:#fff; }
.site-nav span { font:.95em/1 var(--body-font); color:#333; }
.site-nav .wm { justify-self:center; font-size:1.7em; margin-right:-.34em; }
.site-hero { position:relative; height:32em; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; background:#ddd; }
.kb { overflow:hidden; }
.kb img { transform-origin:50% 38%; animation:kb 20s ease-in-out infinite alternate; }
.kb-b img { animation-delay:-10s; }
@keyframes kb { from { transform:scale(1); } to { transform:scale(1.09); } }
.site-hero::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(to bottom, transparent, rgba(0,0,0,.34)); pointer-events:none; }
.site-hero-copy { position:absolute; left:3em; bottom:3em; z-index:1; color:#fff; text-shadow:0 .1em 1.2em rgba(0,0,0,.2); }
.site-hero-copy small { display:block; font:500 .9em/1 var(--body-font); letter-spacing:.22em; text-transform:uppercase; }
.site-hero-copy strong { display:block; font:400 3.8em/1 var(--mark-font); letter-spacing:-.02em; margin:.22em 0 .32em; }
.site-hero-copy em { font:normal 1.05em/1 var(--body-font); border-bottom:1px solid #fff; padding-bottom:.25em; }
.site-sec { padding:2.8em 2.4em .6em; }
.site-sec-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1.4em; }
.site-sec-head strong { font:400 1.9em/1 var(--mark-font); letter-spacing:-.01em; }
.site-sec-head em { font:normal .95em/1 var(--body-font); color:#777; border-bottom:1px solid #bbb; padding-bottom:.2em; }
.site-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2em; }
.site-prod-img { aspect-ratio:3/4; background:#f1f0ec; overflow:hidden; margin-bottom:.8em; }
.site-prod b { display:block; font:500 .95em/1.25 var(--body-font); }
.site-prod span { display:block; font:.95em/1.4 var(--body-font); color:#777; }
.site-edit { display:grid; grid-template-columns:.85fr 1.15fr; gap:3.2em; align-items:center; margin:2.6em 0 .4em; padding:3em 2.4em; background:#f6f5f1; }
.site-edit-img { aspect-ratio:4/5; overflow:hidden; }
.site-edit-copy small { font:500 .85em/1 var(--body-font); letter-spacing:.22em; text-transform:uppercase; color:#777; }
.site-edit-copy strong { display:block; font:400 3em/1.04 var(--mark-font); letter-spacing:-.02em; margin:.35em 0 .45em; }
.site-edit-copy p { font:1.1em/1.55 var(--body-font); color:#555; max-width:25em; }
.site-edit-copy em { display:inline-block; margin-top:1.4em; font:normal 1em/1 var(--body-font); border-bottom:1px solid #161616; padding-bottom:.25em; }
.site-foot { display:flex; align-items:center; gap:2em; margin-top:2.6em; padding:3.2em 2.4em 5em; background:#161616; color:#fff; }
.site-foot .wm { font-size:1.6em; }
.site-foot span { margin-left:auto; font:.95em/1 var(--body-font); color:#aaa; }
.site-foot i { width:15em; height:2.4em; border-bottom:1px solid #666; }

.web-stage .web-phone { position:absolute; right:0; bottom:1.2em; }
.m-head { position:absolute; top:4.3em; left:0; right:0; height:3.9em; display:flex; align-items:center; justify-content:space-between; padding:0 1.7em; border-bottom:1px solid #eee; background:#fff; z-index:3; }
.m-head .wm { font-size:1.45em; margin-right:-.34em; }
.m-head .ico { width:1.8em; height:1.8em; }
.pdp-gallery { position:absolute; top:8.2em; left:0; right:0; aspect-ratio:4/5; overflow:hidden; background:#f1f0ec; }
.car-track { display:flex; height:100%; transition:transform .8s cubic-bezier(.65,0,.25,1); }
.car-slide { flex:0 0 100%; height:100%; overflow:hidden; }
.pdp-detail { transform:scale(2.2); transform-origin:50% 42%; }
.car-dots { display:flex; gap:.55em; }
.car-dots span { width:.6em; height:.6em; border-radius:50%; background:rgba(22,22,22,.22); transition:background .3s; cursor:pointer; }
.car-dots span.on { background:#161616; }
.pdp-gallery .car-dots { position:absolute; left:0; right:0; bottom:1.2em; justify-content:center; }
.pdp-gallery .car-dots span { background:rgba(255,255,255,.5); box-shadow:0 0 .3em rgba(0,0,0,.25); }
.pdp-gallery .car-dots span.on { background:#fff; }
.pdp-info { position:absolute; left:1.7em; right:1.7em; top:34.4em; display:flex; justify-content:space-between; }
.pdp-info b, .pdp-info span { font:500 1.12em/1.2 var(--body-font); }
.pdp-info span { font-weight:400; }
.pdp-sizes { position:absolute; left:1.7em; right:1.7em; top:37.2em; display:flex; gap:.45em; }
.pdp-sizes i { flex:1; height:2.5em; display:flex; align-items:center; justify-content:center; border:1px solid #ddd; font:normal .88em/1 var(--body-font); color:#555; }
.pdp-sizes i.on { border-color:#161616; color:#161616; }
.pdp-add { position:absolute; left:1.7em; right:1.7em; bottom:2em; height:3.4em; display:flex; align-items:center; justify-content:center; background:#161616; color:#fff; font:500 .95em/1 var(--body-font); letter-spacing:.08em; animation:pdp-add 6s ease-in-out infinite; }
@keyframes pdp-add { 0%, 76%, 100% { background:#161616; } 82%, 88% { background:#45433e; } }

/* ---------- 02: the feed ---------- */
.ig-top { position:absolute; top:4.4em; left:0; right:0; height:3.8em; display:flex; align-items:center; gap:1.3em; padding:0 1.8em; background:#fff; z-index:3; }
.ig-top b { font:600 1.4em/1 var(--body-font); letter-spacing:-.01em; margin-right:auto; }
.ig-view { position:absolute; top:8.2em; left:0; right:0; bottom:0; overflow:hidden; }
.ig-scroll { animation:ig-scroll 18s cubic-bezier(.65,0,.3,1) infinite; }
@keyframes ig-scroll {
  0%, 14% { transform:translateY(0); }
  32%, 48% { transform:translateY(-19em); }
  66%, 84% { transform:translateY(-34em); }
  100% { transform:translateY(0); }
}
.ig-prof { display:flex; align-items:center; gap:1.3em; padding:1em 1.8em .8em; }
.ig-av { display:inline-flex; align-items:center; justify-content:center; flex:none; width:2.7em; height:2.7em; border-radius:50%; background:#161616; color:#fff; box-shadow:0 0 0 .17em #fff, 0 0 0 .32em #c8a47e; }
.ig-av b { font:600 1.05em/1 var(--mark-font); }
.ig-av-lg { width:6.6em; height:6.6em; }
.ig-av-lg b { font-size:2.5em; }
.ig-stat { flex:1; text-align:center; }
.ig-stat b { display:block; font:600 1.2em/1.25 var(--body-font); }
.ig-stat small { font:.88em/1.2 var(--body-font); color:#555; }
.ig-bio { padding:0 1.8em; }
.ig-bio b { display:block; font:600 1em/1.5 var(--body-font); letter-spacing:.12em; }
.ig-bio span { display:block; font:1em/1.4 var(--body-font); color:#333; }
.ig-btns { display:flex; gap:.6em; padding:1.2em 1.8em; }
.ig-btns i { flex:1; height:2.8em; border-radius:.8em; background:#efefef; display:flex; align-items:center; justify-content:center; font:normal 600 .92em/1 var(--body-font); }
.ig-hl { display:flex; gap:1.5em; padding:.2em 1.8em 1.4em; }
.ig-hl-item { display:flex; flex-direction:column; align-items:center; gap:.55em; }
.ig-hl-ring { width:4.7em; height:4.7em; border-radius:50%; overflow:hidden; box-shadow:0 0 0 .17em #fff, 0 0 0 .3em #d8d8d8; }
.ig-hl-item small { font:.84em/1 var(--body-font); }
.ig-tabs { display:flex; border-top:1px solid #eee; }
.ig-tabs span { flex:1; display:flex; justify-content:center; padding:.75em 0; color:#9a9a9a; width:auto; height:auto; }
.ig-tabs span.on { color:#161616; box-shadow:inset 0 -.14em 0 #161616; }
.ig-tabs svg { width:1.9em; height:1.9em; }
.ig-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.2em; }
.ig-tile { position:relative; aspect-ratio:3/4; overflow:hidden; background:#eee; }
.ig-tile i { position:absolute; top:.55em; right:.55em; width:1.5em; height:1.5em; color:#fff; }
.ig-tile i svg { width:100%; height:100%; fill:none; stroke:#fff; stroke-width:2; filter:drop-shadow(0 0 .3em rgba(0,0,0,.45)); }
.ig-post header, .ad-feed header { display:flex; align-items:center; gap:.9em; padding:1.1em 1.3em; }
.ig-who { display:flex; flex-direction:column; margin-right:auto; min-width:0; }
.ig-who b { font:600 1.05em/1.25 var(--body-font); }
.ig-who small { font:.88em/1.25 var(--body-font); color:#666; }
.ig-car { position:relative; aspect-ratio:4/5; overflow:hidden; background:#eee; }
.car-count { position:absolute; top:1em; right:1em; padding:.4em .75em; border-radius:1em; background:rgba(0,0,0,.55); color:#fff; font:600 .85em/1 var(--body-font); }
.ig-post footer { padding:1em 1.3em 1.4em; }
.ig-actions { display:flex; align-items:center; gap:1.1em; }
.ig-actions .car-dots { flex:1; justify-content:center; margin-right:3em; }
.ig-post p, .ad-feed p { font:1em/1.45 var(--body-font); color:#222; margin-top:.8em; }
.ig-post p b, .ad-feed p b { font-weight:600; }
.ig-like svg path { animation:ig-like 5.2s ease-in-out infinite; }
.ig-like { animation:ig-pop 5.2s ease-in-out infinite; }
@keyframes ig-like { 0%, 70% { fill:transparent; stroke:#161616; } 73%, 96% { fill:#e0245e; stroke:#e0245e; } 100% { fill:transparent; stroke:#161616; } }
@keyframes ig-pop { 0%, 70%, 80%, 100% { transform:scale(1); } 74% { transform:scale(1.28); } }

/* ---------- 03: the inbox ---------- */
.em-stream { position:relative; flex:none; width:28em; height:50em; overflow:hidden; -webkit-mask-image:linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent); }
.em-track { animation:em-feed 36s linear infinite; }
@keyframes em-feed { from { transform:translateY(0); } to { transform:translateY(-50%); } }
.em-mail { background:#fff; border-radius:.9em; overflow:hidden; margin:0 .8em 2.4em; box-shadow:0 .8em 2em -.6em rgba(24,20,14,.16); }
.em-meta { display:flex; align-items:center; gap:.9em; padding:1em 1.3em; border-bottom:1px solid #eee; }
.em-av { flex:none; width:2.6em; height:2.6em; border-radius:50%; background:#161616; color:#fff; display:flex; align-items:center; justify-content:center; font:600 1em/1 var(--mark-font); }
.em-from { display:flex; flex-direction:column; margin-right:auto; min-width:0; }
.em-from b { font:600 .95em/1.3 var(--body-font); letter-spacing:.1em; }
.em-from span { font:1em/1.35 var(--body-font); color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.em-meta em { font:normal .85em/1 var(--body-font); color:#999; }
.em-body { padding:1.8em 2.2em 2.3em; text-align:center; }
.em-body .wm { display:block; font-size:1.4em; margin:0 -.34em .9em 0; }
.em-hero { aspect-ratio:3/2; overflow:hidden; margin:0 -2.2em; }
.em-hero img { object-position:50% 30%; }
.em-body small { display:block; margin-top:1.7em; font:500 .8em/1 var(--body-font); letter-spacing:.22em; text-transform:uppercase; color:#777; }
.em-body strong { display:block; font:400 2.15em/1.08 var(--mark-font); letter-spacing:-.015em; margin:.35em 0 .3em; }
.em-body p { font:1em/1.45 var(--body-font); color:#555; }
.em-btn { display:inline-block; margin-top:1.3em; padding:.95em 1.9em; background:#161616; color:#fff; font:500 .82em/1 var(--body-font); letter-spacing:.16em; text-transform:uppercase; }
.em-2up { display:grid; grid-template-columns:1fr 1fr; gap:1em; margin-top:1.8em; text-align:left; }
.em-2up figure { margin:0; }
.em-2up img { aspect-ratio:1; height:auto; background:#f1f0ec; }
.em-2up figcaption { font:.85em/1.3 var(--body-font); margin-top:.5em; color:#333; }
.lock { background:#2a2622; color:#fff; }
.lock-bg { position:absolute; inset:0; }
.lock-bg img { filter:blur(.1em) brightness(.7) saturate(.9); transform:scale(1.08); }
.lock .ph-status { color:#fff; }
.lock-time { position:absolute; top:6.6em; left:0; right:0; text-align:center; }
.lock-time small { display:block; font:500 1.05em/1 var(--body-font); opacity:.92; }
.lock-time b { display:block; font:500 6.6em/1 var(--mark-font); letter-spacing:-.02em; margin-top:.08em; }
.lock-notes { position:absolute; left:1.1em; right:1.1em; top:19.5em; display:flex; flex-direction:column-reverse; gap:.7em; }
.note { display:flex; align-items:center; gap:.9em; padding:1em 1.1em; border-radius:1.7em; background:rgba(246,245,241,.8); -webkit-backdrop-filter:blur(.8em); backdrop-filter:blur(.8em); color:#161616; opacity:0; }
.note:nth-child(1) { animation:note-1 12s cubic-bezier(.2,.8,.2,1) infinite; }
.note:nth-child(2) { animation:note-2 12s cubic-bezier(.2,.8,.2,1) infinite; }
.note:nth-child(3) { animation:note-3 12s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes note-1 { 0% { opacity:0; transform:translateY(-1.4em) scale(.96); } 5%, 84% { opacity:1; transform:none; } 90%, 100% { opacity:0; transform:translateY(-.4em); } }
@keyframes note-2 { 0%, 22% { opacity:0; transform:translateY(-1.4em) scale(.96); } 27%, 84% { opacity:1; transform:none; } 90%, 100% { opacity:0; transform:translateY(-.4em); } }
@keyframes note-3 { 0%, 44% { opacity:0; transform:translateY(-1.4em) scale(.96); } 49%, 84% { opacity:1; transform:none; } 90%, 100% { opacity:0; transform:translateY(-.4em); } }
.note-app { flex:none; width:2.7em; height:2.7em; border-radius:.7em; background:#161616; color:#fff; display:flex; align-items:center; justify-content:center; }
.note-app svg { width:1.6em; height:1.6em; fill:none; stroke:#fff; stroke-width:1.7; stroke-linejoin:round; }
.note-txt { display:flex; flex-direction:column; min-width:0; margin-right:auto; }
.note-txt b { font:600 .9em/1.3 var(--body-font); letter-spacing:.1em; }
.note-txt span { font:.95em/1.3 var(--body-font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note em { font:normal .8em/1 var(--body-font); color:#777; align-self:flex-start; margin-top:.3em; }

/* ---------- 04: the ads ---------- */
.ad-media { position:relative; aspect-ratio:4/5; overflow:hidden; background:#eee; }
.ad-var { position:absolute; inset:0; }
.ad-var-b { opacity:0; animation:ad-b 10s ease-in-out infinite; }
@keyframes ad-b { 0%, 42% { opacity:0; } 50%, 92% { opacity:1; } 100% { opacity:0; } }
.ad-chip { position:absolute; left:1em; bottom:1em; padding:.5em .8em; border-radius:.4em; background:rgba(255,255,255,.92); font:600 .78em/1 var(--body-font); letter-spacing:.14em; text-transform:uppercase; color:#161616; }
.ad-cta { display:flex; align-items:center; justify-content:space-between; padding:1em 1.3em; font:600 1em/1 var(--body-font); background:#f2f1ed; animation:ad-cta 10s ease-in-out infinite; }
.ad-cta .ico { width:1.5em; height:1.5em; }
@keyframes ad-cta { 0%, 30%, 100% { background:#f2f1ed; color:#161616; } 35%, 58% { background:#161616; color:#fff; } }
.ad-feed .ig-actions { padding:1.1em 1.3em 0; }
.ig-save { margin-left:auto; }
.ad-feed p { padding:0 1.3em 1.3em; }
.story { background:#000; color:#fff; }
.st-frames, .st-frame { position:absolute; inset:0; }
.st-frame { opacity:0; }
.st-frame:nth-child(1) { animation:st-f1 10.5s linear infinite; }
.st-frame:nth-child(2) { animation:st-f2 10.5s linear infinite; }
.st-frame:nth-child(3) { animation:st-f3 10.5s linear infinite; }
@keyframes st-f1 { 0%, 33.3% { opacity:1; } 33.4%, 100% { opacity:0; } }
@keyframes st-f2 { 0%, 33.3% { opacity:0; } 33.4%, 66.6% { opacity:1; } 66.7%, 100% { opacity:0; } }
@keyframes st-f3 { 0%, 66.6% { opacity:0; } 66.7%, 100% { opacity:1; } }
.st-frame img { animation:kb 10.5s ease-out infinite alternate; transform-origin:50% 35%; }
.story::after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,.18) 18%, transparent 30%, transparent 66%, rgba(0,0,0,.55)); z-index:1; pointer-events:none; }
.st-bars { position:absolute; top:5em; left:1.3em; right:1.3em; display:flex; gap:.4em; z-index:3; }
.st-bars i { flex:1; height:.26em; border-radius:.2em; background:rgba(255,255,255,.35); overflow:hidden; }
.st-bars b { display:block; height:100%; background:#fff; transform-origin:0 50%; transform:scaleX(0); }
.st-bars i:nth-child(1) b { animation:st-b1 10.5s linear infinite; }
.st-bars i:nth-child(2) b { animation:st-b2 10.5s linear infinite; }
.st-bars i:nth-child(3) b { animation:st-b3 10.5s linear infinite; }
@keyframes st-b1 { 0% { transform:scaleX(0); } 33.3%, 100% { transform:scaleX(1); } }
@keyframes st-b2 { 0%, 33.3% { transform:scaleX(0); } 66.6%, 100% { transform:scaleX(1); } }
@keyframes st-b3 { 0%, 66.6% { transform:scaleX(0); } 100% { transform:scaleX(1); } }
.st-head { position:absolute; top:6.9em; left:1.3em; right:1.3em; display:flex; align-items:center; gap:.8em; z-index:3; }
.st-head .ig-av { width:2.5em; height:2.5em; box-shadow:0 0 0 .14em rgba(255,255,255,.9); }
.st-head .ig-who small { color:rgba(255,255,255,.85); }
.st-cta { position:absolute; left:0; right:0; bottom:2.8em; display:flex; flex-direction:column; align-items:center; gap:.5em; z-index:3; }
.st-cta .ico { width:1.7em; height:1.7em; animation:st-bob 1.8s ease-in-out infinite; }
.st-cta span:last-child { padding:.85em 1.8em; border-radius:2em; background:#fff; color:#161616; font:600 1em/1 var(--body-font); }
@keyframes st-bob { 50% { transform:translateY(-.35em); } }

/* ---------- 05: the report ---------- */
.rp-card { width:100%; padding:2.4em 2.4em 2.6em; }
.rp-head { display:flex; justify-content:space-between; align-items:baseline; padding-bottom:1.6em; border-bottom:1px solid #eee; }
.rp-head b { font:400 2em/1 var(--mark-font); letter-spacing:-.01em; }
.rp-head span { font:1em/1 var(--body-font); color:#888; }
.rp-row { display:grid; grid-template-columns:4.2em 5.2em 1fr; align-items:center; gap:1.2em; padding:1.1em 0; border-bottom:1px solid #f0efeb; }
.rp-thumb { display:block; aspect-ratio:4/5; overflow:hidden; }
.rp-k { font:1.05em/1 var(--body-font); }
.rp-bar { height:.6em; border-radius:.3em; background:#f0efeb; overflow:hidden; }
.rp-bar i { display:block; height:100%; width:calc(var(--v) * 100%); background:#161616; transform-origin:0 50%; transform:scaleX(0); transition:transform 1.3s cubic-bezier(.2,.8,.2,1) calc(var(--d) * .14s); }
.cm-end.is-live .rp-bar i { transform:scaleX(1); }
.rp-note { margin-top:1.7em; font:400 1.55em/1.3 var(--mark-font); letter-spacing:-.01em; }
.cm-restart { display:inline-flex; align-items:center; gap:9px; margin-top:calc(2.6 * var(--u)); height:40px; padding:0 18px 0 14px; border-radius:20px; font:400 12px/1 var(--body-font); letter-spacing:.04em; }
.cm-restart svg { width:16px; height:16px; }

/* ---------- E-commerce: the demos straight under the intro ---------- */
.commerce-chapter #ecommerce-examples { padding-top:30px; }
.commerce-chapter .examples-heading { display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
.commerce-chapter .examples-sub { font:400 14px/1.5 var(--body-font); color:#6f6f69; }
.commerce-chapter #ecommerce-examples .category-nav { margin-top:14px; }
.commerce-chapter #ecommerce-examples .category-nav button { font:400 10px/1.5 var(--body-font); letter-spacing:.14em; text-transform:uppercase; }
.commerce-chapter #ecommerce-examples .card-copy h2 { font:400 13px/1.35 var(--body-font); letter-spacing:0; color:#161616; }
.commerce-chapter #ecommerce-examples .card-copy p { font:400 12px/1.45 var(--body-font); color:#6f6f69; }
.commerce-chapter #ecommerce-examples .text-reveal-panel p { font-weight:400; }
.commerce-chapter #ecommerce-examples .intro-shell p { font-weight:400; }

/* ---------- small screens: swipe the map, stack the explanations ---------- */
@media (max-width:1100px) {
  .ci-points { grid-template-columns:1fr; padding:0 5%; }
  .ci-points li, .ci-points li + li { display:grid; grid-template-columns:190px 1fr; gap:20px; padding:15px 0; border-left:0; }
  .ci-points li + li { border-top:1px solid var(--line); }
  .ci-points p { margin-top:0; }
}
@media (max-height:780px) and (min-width:900px) {
  .cm-pin { padding:22px 0 16px; }
}
@media (max-width:680px) {
  .ci { grid-template-columns:1fr; }
  .ci-head { border-right:0; padding:45px 0 0; }
  .ci-head h2 { font-size:47px; margin:17px 0; }
  .ci-head p { font-size:14px; }
  .ci-body { padding:22px 0 30px; }
  .ci-statement { font-size:24px; }
  .ci-points { padding:0; }
  .ci-points li, .ci-points li + li { grid-template-columns:1fr; gap:6px; }
  .cm { margin:0 calc(-1 * var(--hero-edge, 16px)); padding:0 var(--hero-edge, 16px); }
  .cm-map { margin:0 calc(-1 * var(--hero-edge, 16px)); }
  .cm-pin { padding:28px 0 22px; }
  .cm-track { padding:0 16px; }
  .cm-track::before { left:16px; right:16px; }
  .cm-station { --u:min(7px, calc((100vw - 48px) / var(--w))); scroll-margin-left:16px; margin-right:28px; }
  .cm-foot { flex-wrap:wrap; gap:14px 18px; padding:0 16px; }
  .cm-sample { order:-1; width:100%; }
  .commerce-chapter #ecommerce-examples { padding-top:34px; }
}
@media (prefers-reduced-motion:reduce) {
  .cm-stage *, .cm-stage *::before, .cm-stage *::after { animation:none !important; transition:none !important; }
  .note, .st-frame:first-child { opacity:1; }
  .st-bars i:first-child b { transform:scaleX(1); }
  .rp-bar i { transform:scaleX(1); }
}

/* ---------- legibility pass 2026-09-26 ---------- */
.solution details p { font-size:13px; color:#666; line-height:1.7; }
.services-questions p { font-size:14px; }
.footer-meta span { color:#8a8a84; }
.chapter-nav a { color:#666; }

/* Keep the original full-bleed framing and motion; protect the top of portraits. */
.cm-stage .site-hero .kb img {object-position:50% 0%;transform-origin:50% 0%;}
.cm-stage .em-hero img, .cm-stage .em-2up img {object-position:50% 0%;}
.cm-stage .site-prod-img img, .cm-stage .site-prod-img video {object-position:50% 0%;}
.cm-stage .src-cut img, .cm-stage .st-frame img {transform-origin:50% 0%;}
.cm-stage .pdp-detail {transform-origin:50% 0%;}