/* Despuga case study. Black and white like the XD (every fill is #000 or #fff), DM Sans 20px body,
   Cousine mono labels, captions sitting on the bottom line of each full-screen slide at ~24.6% from
   the left (x=472 on the 1920px boards). The fixed section grid and label use mix-blend-mode:
   difference, so they read on both white boards and dark video slides. */

body.case-despuga main { margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))); }
.dp {
  --pad: clamp(20px, 4.4vw, 84px);
  --cap-x: 24.6%;
  --gap: clamp(16px, 2.2vw, 40px);
  --asul: #38395a;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --mono: "Cousine", ui-monospace, Menlo, monospace;
  --serif: "Asul", Georgia, serif;
  --head: "Archivo Black", "Arial Black", sans-serif;
  --mark: "Poppins", "Soleil", "Helvetica Neue", Arial, sans-serif;
  background: #fff; color: #000;
  font: 400 clamp(15px, 1.05vw, 20px)/1.45 "DM Sans", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
.dp figure { margin: 0; }
.dp img { display: block; width: 100%; height: auto; }
.dp p { margin: 0; }
.dp :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.dp .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dp-wordmark { font-family: var(--mark); font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.dp-hint { font-family: var(--mono); font-size: 12px; color: #8a8a8a; }

/* Same Ground context */
.dp-intro { background: var(--ground); color: var(--ink); padding: clamp(40px, 8vw, 110px) max(var(--gutter), env(safe-area-inset-left, 0px)) 40px; }
.dp-intro h1 { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; letter-spacing: -.02em; font-weight: 400; margin: 10px 0 32px; }
.dp-intro .meta { margin: 0; }

/* Fixed presentation chrome (only while the case study is on screen) */
.dp-nav, .dp-where { position: fixed; z-index: 15; bottom: 22px; color: #fff; mix-blend-mode: difference; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.dp.chrome-on .dp-nav, .dp.chrome-on .dp-where { opacity: 1; visibility: visible; }
.dp-nav { left: 28px; }
.dp-nav ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 43px); row-gap: 8px; }
.dp-nav a { display: block; padding: 4px 0; font: 15px/1 var(--mono); color: inherit; text-decoration: none; opacity: .55; transition: opacity .25s; }
.dp-nav a:hover, .dp-nav a.on { opacity: 1; }
.dp-ring { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; pointer-events: none; transform: translate(var(--rx, -6px), var(--ry, -8px)); transition: transform .6s var(--ease); }
.dp-where { right: 22px; margin: 0; font: 12px/1 var(--mono); letter-spacing: .06em; white-space: pre; }

/* Slides */
.dp-slide { position: relative; }
.dp-full { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.dp-bg { position: absolute; inset: 0; z-index: 0; background: #111; }
.dp-bg video, .dp-bg img { width: 100%; height: 100%; object-fit: cover; }
.dp-cap { position: relative; z-index: 2; margin: 0 var(--pad) 0 var(--cap-x) !important; padding-bottom: 66px; max-width: 980px; }
.dp-on-light .dp-bg { background: #ece9e4; }
.dp-identity-logo .h-touch { display: none; }
@media (hover: none) { .dp-identity-logo .h-hover { display: none; } .dp-identity-logo .h-touch { display: inline; } }
.dp-identity-logo:focus { outline: none; }
.dp-on-light .dp-bg::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(255, 255, 255, .88)); }
.dp-on-dark { color: #fff; }
.dp-on-dark .dp-bg::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.dp-paper { color: #fff; }
.dp-ink { color: #000; }

/* Video controls */
.dp-vid { position: relative; overflow: hidden; }
.dp-vid video { display: block; width: 100%; height: 100%; object-fit: cover; }
.dp-vid.dp-bg { position: absolute; }
.dp-vid-toggle { position: absolute; z-index: 3; right: 16px; top: 16px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); background: rgba(255, 255, 255, .85); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .25s; }
.dp-full .dp-vid-toggle { top: auto; bottom: 64px; right: 22px; }
.dp-slide:hover .dp-vid-toggle, .dp-vid:hover .dp-vid-toggle, .dp-vid-toggle:focus-visible, .dp-vid-toggle[data-state="paused"] { opacity: 1; }
@media (hover: none) { .dp-vid-toggle { opacity: .9; } }
.dp-vid-toggle span { width: 9px; height: 11px; border-inline: 3px solid #000; }
.dp-vid-toggle[data-state="paused"] span { width: 0; height: 0; border: 0; border-left: 10px solid #000; border-block: 6px solid transparent; margin-left: 3px; }

/* 2 Approach: two captions, ink on the white half, paper on the photo half */
.dp-cap-row { position: relative; z-index: 2; display: grid; grid-template-columns: 26.9% 22.3% 22.3% 1fr; padding-bottom: 66px; }
.dp-cap-row .dp-cap { margin: 0 !important; padding: 0 24px 0 0; }
.dp-cap-row .dp-ink { grid-column: 2; }
.dp-cap-row .dp-paper { grid-column: 3; }

/* 3 Core values */
.dp-values { justify-content: center; }
.dp-values-grid { display: grid; grid-template-columns: minmax(0, 768fr) minmax(0, 991fr); gap: var(--gap); padding: clamp(60px, 5vw, 102px) var(--pad) 90px clamp(20px, 5vw, 96px); align-items: stretch; }
.dp-values-pics { position: relative; aspect-ratio: 768 / 866; overflow: hidden; background: #f2f2f2; }
.dp-vpic { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.dp-vpic img { height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 1.6s var(--ease); }
.dp-vpic.is-on { opacity: 1; }
.dp-vpic.is-on img { transform: none; }
.dp-values-copy { position: relative; display: flex; flex-direction: column; padding-top: 30px; }
.dp-tabs { display: flex; gap: 28px; flex-wrap: wrap; border-bottom: 1px solid #e3e3e3; }
.dp-tabs button { position: relative; padding: 0 0 14px; border: 0; background: none; color: #9a9a9a; font: inherit; cursor: pointer; display: flex; gap: 8px; align-items: baseline; transition: color .3s; }
.dp-tabs .num { font: 11px var(--mono); }
.dp-tabs button[aria-selected="true"] { color: #000; }
.dp-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #000; transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.dp-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.dp-panel { flex: 1; display: flex; flex-direction: column; padding-top: clamp(28px, 3vw, 56px); }
.dp-panel[hidden] { display: none; }
.dp-panel-h { font-weight: 500; margin-bottom: 2.4em !important; }
.dp-panel p:nth-child(2) { max-width: 46ch; }
.dp-word { margin-top: auto !important; font-family: var(--serif); font-size: clamp(56px, 8vw, 150px); line-height: .9; letter-spacing: -.02em; }
.dp-js .dp-panel:not([hidden]) > * { animation: dp-rise .8s var(--ease) both; }
.dp-js .dp-panel:not([hidden]) > :nth-child(2) { animation-delay: .08s; }
.dp-js .dp-panel:not([hidden]) > .dp-word { animation-delay: .16s; }
@keyframes dp-rise { from { opacity: 0; transform: translateY(16px); } }
.dp-timer { position: absolute; left: 0; right: 0; top: 30px; height: 1px; transform: translateY(calc(1.45em + 14px)); }
.dp-timer i { display: block; height: 2px; background: #000; opacity: .2; transform-origin: 0 50%; transform: scaleX(var(--t, 0)); }

/* 4 Essence: d.p.a. opens into Defining Premium Artisanship */
.dp-dpa { position: absolute; z-index: 2; top: clamp(60px, 9vw, 150px); right: calc(100% - 52.8%); display: flex; align-items: baseline; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; font: 700 clamp(26px, 2.1vw, 40px)/1 var(--mark); letter-spacing: -.01em; white-space: nowrap; }
.dp-dpa span:not(.x)::after { content: "."; }
.dp-dpa .dot { display: none; }
.dp-dpa .x { display: inline-block; max-width: 0; overflow: hidden; vertical-align: bottom; opacity: 0; font-weight: 400; transition: max-width 1s var(--ease), opacity .6s; }
.dp-dpa[aria-expanded="true"] .x { max-width: 8em; opacity: .85; }
.dp-dpa[aria-expanded="true"] span:not(.x)::after { content: ""; }
.dp-essence .dp-bg img { filter: grayscale(.2); transform: scale(var(--z, 1)); }

/* 5 Tagline: soft-light black over the video (as in the XD), stitch line draws in */
.dp-softlight { position: absolute; inset: 0; z-index: 1; background: #000; mix-blend-mode: soft-light; }
.dp-tagline { justify-content: center; align-items: center; text-align: center; }
.dp-tag { position: relative; z-index: 2; display: grid; justify-items: center; gap: 18px; padding: 0 var(--pad); }
.dp-tag-line { font-family: var(--serif); font-size: clamp(40px, 3.9vw, 75px); line-height: 1.1; }
.dp-tag-line span { display: inline-block; }
.dp-stitch { width: min(560px, 70vw); height: 10px; overflow: visible; }
.dp-stitch line { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 10 8; }
.dp-tag .dp-wordmark { font-size: clamp(20px, 1.6vw, 30px); }

/* 6 Identity: the exact mark, assembling on reveal, exploded on hover */
.dp-identity { align-items: stretch; }
.dp-identity-logo { flex: 1; display: grid; place-content: center; justify-items: center; gap: 22px; padding-top: 60px; }
.dp-logo { display: grid; justify-items: center; gap: .16em; color: #000; font-size: clamp(44px, 4.2vw, 80px); }
.dp-logo .dp-mark { width: 4.2em; height: auto; overflow: visible; }
.dp-logo .dp-wordmark { font-size: 1em; }
/* Assembly is driven by scroll: the script sets --a from 0 (mark just entering at the bottom of the
   screen) to 1 (mark centre at 65% of screen height), so the mark is always whole before it reaches
   the middle. Each piece lags slightly behind the one before (--i). The "exploded" view (--e) only
   opens on real pointer movement over the finished mark, or a tap. */
.dp-mark .pc {
  --p: clamp(0, calc(var(--a, 1) * 1.6 - var(--i) * .05), 1);
  --e: 0;
  opacity: var(--p);
  transform: translate(calc(var(--dx) * (90px * (1 - var(--p)) + 22px * var(--e))), calc(var(--dy) * (90px * (1 - var(--p)) + 22px * var(--e)))) rotate(calc(var(--dx) * 20deg * (1 - var(--p))));
  transition: transform .5s var(--ease), opacity .3s;
}
[data-assemble].exploded .dp-mark .pc { --e: 1; }
.dp-js [data-assemble] .dp-wordmark { opacity: clamp(0, calc(var(--a, 1) * 2 - 1), 1); letter-spacing: calc(.4em * (1 - clamp(0, calc(var(--a, 1) * 2 - 1), 1)) - .01em); transition: opacity .3s, letter-spacing .4s var(--ease); }
[data-assemble] .dp-mark { cursor: default; }
[data-assemble].done .dp-mark { cursor: pointer; }

/* 7 Brand logo */
.dp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: clamp(56px, 5vw, 100px) var(--pad) 0; align-items: start; }
.dp-grid > * { min-width: 0; }
.dp-logo-intro { justify-content: space-between; }
.dp-logo-intro .dp-grid { padding-top: clamp(60px, 5vw, 101px); }
.dp-samples { grid-column: 1 / 5; aspect-ratio: 605 / 802; border: 1px solid #eee; }
.dp-side { grid-column: 9 / 13; display: grid; gap: 2.2em; }
.dp-point p + p { margin-top: 1.2em; }
.dp-point-h span { font-family: var(--mono); font-size: .8em; }
.dp-letters-row { align-items: center; padding-bottom: clamp(40px, 4vw, 80px); }
.dp-letters { grid-column: 1 / 4; display: grid; grid-template-columns: repeat(3, 1fr); font: 700 clamp(56px, 4.6vw, 89px)/1.2 var(--mark); width: max-content; column-gap: .35em; }
.dp-letters .sp { visibility: hidden; }
.dp-letters span { transition: transform .5s var(--ease); }
.dp-letters:hover span:nth-child(odd) { transform: translateY(-.12em); }
.dp-letters:hover span:nth-child(even) { transform: translateY(.12em); }
.dp-pop { grid-column: 5 / 8; position: relative; z-index: 1; padding: 0; border: 0; background: #f2f2f2; cursor: zoom-in; aspect-ratio: 1; overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.dp-pop + .dp-pop { grid-column: 9 / 12; margin-top: -20%; }
.dp-pop img { height: 100%; object-fit: cover; }
.dp-pop:hover, .dp-pop[aria-pressed="true"] { z-index: 5; transform: scale(1.35); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); cursor: zoom-out; }
.dp-toggle { position: relative; }
.dp-tframe { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #ddd; touch-action: pan-y; }
.dp-tslide { position: absolute; inset: 0; transition: transform 1s var(--ease), opacity 1s; }
.dp-tslide img { height: 100%; object-fit: cover; }
.dp-tslide:not(.is-on) { opacity: 0; transform: translateX(6%); }
.dp-tdots { position: absolute; z-index: 2; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; gap: 10px; }
.dp-tdots button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .5); cursor: pointer; padding: 0; background-clip: content-box; border: 6px solid transparent; }
.dp-tdots button[aria-pressed="true"] { background-color: #fff; }
.dp-card { position: absolute; z-index: 2; right: var(--pad); top: 50%; transform: translateY(-50%); width: min(420px, 30%); padding: 28px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dp-text-row { padding-bottom: clamp(56px, 5vw, 100px); }
.dp-left { grid-column: 1 / 5; }
.dp-bleed { overflow: hidden; }
.dp-bleed img { transform: scale(var(--z, 1)); }
.dp-black { background: #000; }
.dp-halves { display: grid; grid-template-columns: 1fr 1fr; }
.dp-halves figure { overflow: hidden; }
.dp-halves img { aspect-ratio: 2 / 3; object-fit: cover; transition: transform 1.4s var(--ease); }
.dp-halves figure:hover img, .dp-bleed:hover img { transform: scale(1.03); }
.dp-build-row { align-items: center; padding-bottom: clamp(56px, 5vw, 100px); }
.dp-build-logo { grid-column: 1 / 5; }
.dp-build-logo .dp-logo { font-size: clamp(40px, 4.2vw, 80px); justify-items: start; }
.dp-phone { grid-column: 6 / 8; aspect-ratio: 350 / 744; border: 1px solid #e6e6e6; }
.dp-build-row .dp-side { grid-column: 9 / 13; }
.dp-tees-row { padding-bottom: clamp(48px, 4vw, 80px); align-items: end; row-gap: 40px; }
.dp-tees-row .dp-left { grid-column: 1 / 6; grid-row: 1; }
.dp-tees { grid-column: 1 / 8; grid-row: 2; aspect-ratio: 1075 / 446; overflow: hidden; }
.dp-tees img { height: 100%; object-fit: cover; object-position: 50% 30%; }
.dp-tee-black { grid-column: 9 / 13; grid-row: 1 / 3; align-self: end; }
.dp-cap-flow { padding: 0 0 clamp(56px, 5vw, 100px); }

/* 8 Color & typography */
.dp-color { justify-content: space-between; }
.dp-coat { position: relative; margin: clamp(60px, 6.9vw, 132px) 0 0 7.9%; width: 36.3%; aspect-ratio: 697 / 742; overflow: hidden; }
.dp-coat img { height: 100%; object-fit: cover; }
.dp-coat .dp-wordmark { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); color: #fff; font-size: clamp(26px, 2.45vw, 47px); }
.dp-asul { position: absolute; right: var(--pad); top: clamp(60px, 6.9vw, 132px); width: 36%; aspect-ratio: 697 / 742; background: var(--asul); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; }
.dp-asul-name { font-family: var(--serif); font-size: clamp(48px, 5vw, 96px); line-height: 1; }
.dp-asul-sub { font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .75; margin-top: 10px !important; }
.dp-type-row { padding-bottom: clamp(56px, 6vw, 120px); align-items: end; }
.dp-specimen { grid-column: 1 / 6; display: grid; gap: 14px; }
.dp-specimen [contenteditable] { position: relative; outline: none; border-radius: 2px; transition: background .2s; cursor: text; }
.dp-specimen [contenteditable]:hover, .dp-specimen [contenteditable]:focus { background: #f4f4f4; }
.dp-specimen [contenteditable]::after { content: attr(data-font); position: absolute; right: 0; top: -1.6em; font: 11px var(--mono); color: #8a8a8a; opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; }
.dp-specimen [contenteditable]:hover::after, .dp-specimen [contenteditable]:focus::after { opacity: 1; }
.sp-h { font: clamp(40px, 3.1vw, 60px)/1 var(--head); }
.sp-s { font: clamp(28px, 2.1vw, 40px)/1.1 var(--serif); }
.sp-b { max-width: 46ch; }
.sp-m { font: 15px var(--mono); text-decoration: underline; text-underline-offset: 4px; }
.dp-shirt { grid-column: 7 / 12; position: relative; aspect-ratio: 836 / 890; overflow: hidden; }
.dp-shirt img { height: 100%; object-fit: cover; }
.dp-mark-over { position: absolute; left: 41%; top: 42%; width: 10%; color: #000; }

/* Back cover */
.dp-thanks { justify-content: center; align-items: center; }
.dp-thanks p { font: 15px var(--mono); letter-spacing: .04em; }

/* Next project sits on the site ground */
body.case-despuga .next { margin-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); }

/* Reveal motion */
.dp-js .dp .rv { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 100ms); }
.dp-js .dp .rv.in { opacity: 1; transform: none; }
.dp-js .dp-pop.rv.in:hover, .dp-js .dp-pop.rv.in[aria-pressed="true"] { transform: scale(1.35); transition-delay: 0s; }
.dp-js .dp-tag-line span { opacity: 0; transform: translateY(.4em); filter: blur(6px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s; transition-delay: calc(var(--i) * 140ms + 200ms); }
.dp-js .dp-tag.in .dp-tag-line span { opacity: 1; transform: none; filter: none; }
.dp-js .dp-tag .dp-wordmark { opacity: 0; transition: opacity 1s 1.6s; }
.dp-js .dp-tag.in .dp-wordmark { opacity: 1; }
.dp-js .dp-stitch { clip-path: inset(0 100% 0 0); transition: clip-path 2.2s cubic-bezier(.5, 0, .2, 1) .8s; }
.dp-js .dp-tag.in .dp-stitch { clip-path: inset(0); }

@media (prefers-reduced-motion: reduce) {
  .dp *, .dp *::before, .dp *::after { animation: none !important; transition: none !important; }
  .dp-js .dp .rv, .dp-js .dp-tag-line span, .dp-js .dp-tag .dp-wordmark { opacity: 1; transform: none; filter: none; }
  .dp-js .dp-stitch { clip-path: none; }
  .dp [data-assemble] { --a: 1 !important; }
  .dp-bleed img, .dp-essence .dp-bg img { transform: none !important; }
}

/* Tablet and phone */
@media (max-width: 900px) {
  .dp { --cap-x: var(--pad); }
  .dp-cap { padding-bottom: 96px; }
  .dp-approach { min-height: 0; display: block; }
  .dp-approach .dp-bg { position: relative; aspect-ratio: 16 / 9; }
  .dp-cap-row { grid-template-columns: 1fr; gap: 1em; padding: 28px var(--pad) 40px; }
  .dp-cap-row .dp-ink, .dp-cap-row .dp-paper { grid-column: 1; color: #000; }
  .dp-values-grid { grid-template-columns: 1fr; padding: 60px var(--pad) 100px; }
  .dp-values-pics { aspect-ratio: 4 / 5; }
  .dp-word { margin-top: 32px !important; }
  .dp-dpa { right: auto; left: var(--pad); top: 60px; font-size: 26px; }
  .dp-grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .dp-grid > *, .dp-tees-row > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .dp-samples { width: 70%; }
  .dp-letters-row { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .dp-letters { grid-column: 1 / -1 !important; }
  .dp-pop, .dp-pop + .dp-pop { grid-column: auto !important; margin-top: 0; }
  .dp-pop:hover, .dp-pop[aria-pressed="true"], .dp-js .dp-pop.rv.in:hover, .dp-js .dp-pop.rv.in[aria-pressed="true"] { transform: scale(1.06); }
  .dp-tframe { aspect-ratio: 4 / 3; }
  .dp-card { position: static; transform: none; width: auto; padding: 28px var(--pad) 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .dp-phone { width: 46%; justify-self: center; }
  .dp-build-logo .dp-logo { justify-items: center; }
  .dp-tee-black { width: 70%; justify-self: end; }
  .dp-coat { width: auto; margin: 60px var(--pad) 0; }
  .dp-asul { position: relative; right: auto; top: auto; width: auto; aspect-ratio: 3 / 1; margin: 16px var(--pad) 0; }
  .dp-shirt { width: 80%; justify-self: end; }
  /* Chrome becomes a slim solid bar so it never sits on top of text */
  .dp-nav { left: 0; right: 0; bottom: 0; padding: 6px max(10px, env(safe-area-inset-left, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .94); color: #000; mix-blend-mode: normal; border-top: 1px solid #e6e6e6; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .dp-nav ol { grid-template-columns: repeat(8, 1fr); row-gap: 0; }
  .dp-nav a { font-size: 12px; text-align: center; padding: 9px 0; }
  .dp-ring { width: 28px; height: 28px; }
  .dp-where { display: none; }
  .dp-cap { padding-bottom: 76px; }
  .dp-full .dp-vid-toggle { bottom: 64px; }
}