/* ============================================================================
   DEEPAL — S07 DIGITAL CAMPAIGN CASE STUDY
   "The Electric Canvas". Nine sections, campaign-archive led.

   Written mobile-first for real: every rule outside a media query targets a
   ~390px canvas, and larger screens only ever ADD to it through min-width
   blocks. Nothing here is a desktop layout being folded back down.

   Layered on top of style.css, which already supplies the design tokens, the
   topbar/footer chrome, the optional-image loader, the reveal system and the
   .btn set.

   COLOUR — the accent is #d71920, the same one the Delhivery, Warner Bros.,
   AIFF, Siemens, LTFS, VSI and Disney×BBW studies use. Every eyebrow, rule,
   counter and control on this page is red, exactly as it is on those. Do NOT
   reintroduce a per-client accent: eight studies each borrowing their client's
   colour is what makes a portfolio read as eight different websites.

   The electric blue this page does carry is ATMOSPHERE only — the glow behind
   the hero car, the wash behind the colour carousel, the film stage. It never
   touches type, borders or controls, so it reads as lighting rather than as a
   second brand colour.

   BREAKPOINTS — 561 / 1025 / 1440. Note the 1025 rather than the usual 1024:
   style.css narrows --shell to 900px at max-width:1024px, so a layout that
   switches AT 1024 changes shape and container width in the same pixel.

     1  Page tokens
     2  Chrome adjustments
     3  Editorial furniture — eyebrow, headings, lede
     4  Hero
     5  Campaign at a glance
     6  The campaign wall
     7  Carousels — shared
     8  Carousel variants + colour experience
     9  The commercial
    10  Product reels
    11  Email design
    12  One visual language
    13  Closing
    14  Media viewer
    15  TABLET         min-width: 561px
    16  DESKTOP        min-width: 1025px
    17  LARGE DESKTOP  min-width: 1440px
    18  Reduced motion
   ========================================================================= */

/* ------------------------------------------------------------- 1 page tokens */
:root {
  --cs-red:    #d71920;
  --cs-red-lo: rgba(215, 25, 32, .42);
  --cs-white:  #f4f5f7;      /* very slightly cool — this page is graphite */
  --cs-grey:   #a3a6ab;
  --cs-dim:    #6a6d73;
  --cs-line:   rgba(244, 245, 247, .1);
  --cs-line-2: rgba(244, 245, 247, .2);

  /* graphite surfaces */
  --dp-ink:    #060607;
  --dp-panel:  #0c0d0f;
  --dp-panel-2:#121417;

  /* atmosphere only — never type, never borders */
  --dp-blue:      rgba(46, 108, 232, .5);
  --dp-blue-soft: rgba(46, 108, 232, .16);

  --cs-space: 5.5rem;        /* 88px — mobile section rhythm */
  --dp-h1:    2.35rem;
  --dp-h2:    1.95rem;
  --dp-mega:  2.7rem;

  /* CAROUSEL SIZING — height first, then width.
     Slides used to be sized purely in vw. A 4:5 frame at 42vw on a 1440×900
     screen is 605×756, and once the title and the controls are added the unit
     is ~1100px tall: the visitor could see the artwork or the controls, never
     both, and the top and bottom of the frame were cut off. Now the frame is
     capped by the height LEFT OVER after the section's own furniture, so a
     whole carousel — title, frame, counter, controls — always fits on screen.
     --dp-slide-w is only the secondary guard for wide frames on narrow screens. */
  --dp-stage:   min(calc(100svh - var(--dp-topbar) - 18rem), 440px);
  --dp-slide-w: 84vw;

  /* driven by JS on scroll; 0 at the top of the hero, 1 once it has left */
  --dp-scroll: 0;

  /* The topbar is position:sticky, so it still occupies flow space above the
     hero. A plain 100svh hero therefore ends one topbar BELOW the fold, which
     pushed the "49 creative assets" line off-screen. JS overwrites this with
     the measured height; the value here is the fallback for no-JS. */
  --dp-topbar: 3.95rem;

  --gutter: 1.375rem;
}

/* --------------------------------------------------- 2 chrome adjustments */
/* style.css makes the topbar transparent under 640px for the homepage hero.
   This page has its own hero behind it, but a dark bar is needed for the
   nav to stay legible over the car. */
@media (max-width: 640px) {
  .topbar { background: rgba(6, 6, 7, .82); backdrop-filter: blur(10px); }
}

.cs-brand { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.cs-brand__arrow {
  width: 1.3rem; height: .6rem; color: var(--cs-grey);
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.cs-brand:hover .cs-brand__arrow,
.cs-brand:focus-visible .cs-brand__arrow { transform: translateX(-5px); color: var(--cs-red); }

.dp-body { background: var(--dp-ink); overflow-x: hidden; }

/* Visible focus everywhere. The page is mostly dark imagery, so the ring is
   drawn in red with a dark outer edge to survive on a bright creative. */
.dp-body :focus-visible {
  outline: 2px solid var(--cs-red);
  outline-offset: 3px;
  border-radius: 1px;
}

.dp-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ============================================== 3 editorial furniture */
.dp-sec {
  position: relative;
  padding-block: var(--cs-space);
}
.dp-sec__head { margin-bottom: 2.5rem; }

.dp-eyebrow {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: 1.3rem;
  font-family: var(--font-cond); font-weight: 500;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cs-red);
}
.dp-eyebrow__rule { width: 1.6rem; height: 1px; background: var(--cs-red); flex: none; }
.dp-eyebrow__num { color: var(--cs-dim); }

.dp-h1, .dp-h2 {
  color: var(--cs-white);
  font-family: var(--font-cond); font-weight: 400;
  letter-spacing: -.012em; line-height: 1.08;
  text-wrap: balance;
}
.dp-h1 { font-size: var(--dp-h1); }
.dp-h2 { font-size: var(--dp-h2); max-width: 20ch; }

/* The oversized voice. Anton is the site's display face; here it is set
   uppercase and tight, with the second line drawn as an outline so the two
   lines read as one lockup rather than as a heading and a subheading. */
.dp-mega {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--dp-mega); line-height: .94;
  letter-spacing: -.005em; text-transform: uppercase;
  color: var(--cs-white);
}
.dp-mega em {
  font-style: normal;
  color: var(--cs-dim);
}
@supports ((-webkit-text-stroke: 1px #fff) or (text-stroke: 1px #fff)) {
  .dp-mega em {
    color: transparent;
    -webkit-text-stroke: 1px rgba(244, 245, 247, .55);
  }
}

.dp-lede {
  margin-top: 1.4rem;
  font-size: 1rem; line-height: 1.7;
  color: var(--cs-grey);
  max-width: 46ch;
}

.dp-hint {
  margin-top: 1.1rem;
  font-family: var(--font-cond); font-weight: 300;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cs-dim);
}

/* ==================================================================== 4 hero */
.dp-hero {
  position: relative;
  min-height: 88svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 3.25rem; padding-bottom: 2.5rem;
  overflow: hidden;
  isolation: isolate;
}

/* The atmosphere: one wide, very soft blue pool under the car. This is the
   only place the blue is allowed to be this strong, and it sits BEHIND the
   artwork so the creative itself is never tinted. */
.dp-hero::before {
  content: "";
  position: absolute; inset: auto 0 -12% 0; height: 70%;
  background:
    radial-gradient(60% 70% at 50% 78%, var(--dp-blue-soft), transparent 70%);
  z-index: 0; pointer-events: none;
}

/* Below the desktop breakpoint the copy sits ABOVE the car. With a landscape
   cover image the media now fills the entire hero, and a scrim ensures the
   typography remains readable against whatever the photograph shows. */
.dp-hero__media {
  position: absolute; inset: 0; z-index: 1;
}
/* Darkening scrim so text on the left reads cleanly over the photograph.
   The hero-banner image has a bright sky, so the scrim needs to be heavier
   than it would be on a dark studio shot. */
.dp-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(6,6,7,.94) 22%, rgba(6,6,7,.7) 50%, rgba(6,6,7,.2) 80%, transparent 100%),
    linear-gradient(to top,   rgba(6,6,7,.75) 0%, rgba(6,6,7,.3) 40%, transparent 70%);
  pointer-events: none;
}

/* The entrance lives on the WRAPPER and the scroll link on the image, so the
   two never overwrite each other's transform. An animation with fill-mode
   both holds its end state forever, which would otherwise freeze the parallax
   at whatever the last keyframe declared. */
.js .dp-hero__media { animation: dp-hero-in 2.4s var(--ease-out) both; }
@keyframes dp-hero-in {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: scale(1); }
}

/* cover, not contain: the hero creative is now a widescreen landscape image
   that should fill the entire stage and crop gracefully. */
.dp-hero__car {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  transform: translateY(calc(var(--dp-scroll) * -1.8%));
  will-change: transform;
}

.dp-hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  padding-block: clamp(2.5rem, 9vw, 4rem) clamp(1.5rem, 5vw, 2.5rem);
  /* the copy fades as the car takes over */
  opacity: calc(1 - var(--dp-scroll) * .85);
  transform: translateY(calc(var(--dp-scroll) * -1.5rem));
}

.dp-hero__eyebrow { margin-bottom: 1.1rem; }

.dp-hero__cats {
  margin-top: 1.5rem;
  font-family: var(--font-cond); font-weight: 300;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cs-grey);
}

/* the count is a caption to the whole composition, hung on a hairline —
   deliberately not a stat card */
/* width:max-content so the box hugs "49 / Creative Assets". As a block it
   spanned the whole shell, which ran its hairline straight across the car
   below it on every width under 1025. */
.dp-hero__count {
  margin-top: 1.9rem;
  display: flex; align-items: flex-end; gap: .85rem;
  width: max-content; max-width: 100%;
  padding-top: 1rem; padding-right: 1.5rem;
  border-top: 1px solid var(--cs-line);
}
.dp-hero__count-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: 3.4rem; line-height: .8;
  color: var(--cs-white);
}
.dp-hero__count-label {
  font-family: var(--font-cond); font-weight: 400;
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  line-height: 1.4; color: var(--cs-red);
  padding-bottom: .2rem;
}

.dp-hero__scroll {
  position: absolute; right: var(--gutter); bottom: 1.6rem; z-index: 2;
  font-family: var(--font-cond); font-weight: 300;
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--cs-dim);
  writing-mode: vertical-rl;
  opacity: calc(1 - var(--dp-scroll) * 2);
}

/* ===================================================== 5 campaign at a glance */
.dp-glance { border-top: 1px solid var(--cs-line); }
.dp-glance .dp-mega { margin-top: .4rem; }

.dp-credits {
  margin-top: 3rem;
  border-top: 1px solid var(--cs-line);
}
.dp-credits__row {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  align-items: baseline; gap: 1.1rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--cs-line);
}
.dp-credits__num {
  font-family: var(--font-display); font-weight: 400;
  font-size: 2.6rem; line-height: .82;
  color: var(--cs-white);
  font-variant-numeric: tabular-nums;
}
.dp-credits__label {
  font-family: var(--font-cond); font-weight: 400;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cs-grey);
}

/* ================================================== 6 the campaign wall */
.dp-wall { border-top: 1px solid var(--cs-line); }

/* Columns, not a row grid. Twenty creatives at 1:1, 4:5, 9:16 and 6:5 in a
   row grid align to a shared baseline and leave holes wherever the ratios
   disagree; columns flow, so the wall is always solid. */
.dp-wall__grid {
  column-count: 1;
  column-gap: 1rem;
}
.dp-tile {
  break-inside: avoid;
  margin: 0 0 1rem;
}
/* scale is art-directed per tile rather than left to the browser */
.dp-tile--inset { padding-inline: 14%; }
.dp-tile--bleed { margin-bottom: 1.6rem; }

.dp-tile__btn {
  display: block; position: relative;
  width: 100%; padding: 0;
  background: var(--dp-panel); border: 0;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.dp-tile__btn img {
  display: block; width: 100%; height: auto;
  opacity: 0;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.dp-tile__btn img.is-loaded { opacity: 1; }

/* the whole hover move is a 1.5% push in and a hairline appearing — no
   lift, no shadow bloom, no border glow */
.dp-tile__btn::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid transparent;
  transition: border-color .4s var(--ease);
  pointer-events: none;
}
@media (hover: hover) {
  .dp-tile__btn:hover img { transform: scale(1.015); }
  .dp-tile__btn:hover::after { border-color: var(--cs-red-lo); }
}
.dp-tile__btn:focus-visible::after { border-color: var(--cs-red); }

.dp-tile__flag {
  position: absolute; left: .6rem; bottom: .6rem;
  padding: .28rem .5rem;
  font-family: var(--font-cond); font-weight: 500;
  font-size: .55rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cs-white);
  background: rgba(6, 6, 7, .66);
  backdrop-filter: blur(6px);
}

/* ================================================ 7 carousels — shared */
.dp-stories { border-top: 1px solid var(--cs-line); }

.dp-car {
  position: relative;
  padding-block: 3.2rem;
  isolation: isolate;
}

.dp-car__head {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem 1.1rem;
  align-items: start;
  margin-bottom: 1.8rem;
}
.dp-car__num {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.7rem; line-height: 1;
  color: var(--cs-red);
}
.dp-car__title {
  font-family: var(--font-cond); font-weight: 400;
  font-size: 1.5rem; line-height: 1.05; letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--cs-white);
}
.dp-car__sub {
  margin-top: .4rem;
  font-family: var(--font-cond); font-weight: 300;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cs-dim);
}

/* The rail. touch-action keeps vertical flicks scrolling the page while
   horizontal ones belong to the carousel; the JS also commits a drag on
   pointercancel so a gesture the browser steals is not simply lost. */
.dp-car__viewport {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.dp-car__viewport.is-dragging { cursor: grabbing; }
.dp-car__viewport:focus-visible { outline-offset: -3px; }

/* No padding-inline: the active slide is centred by the --shift transform, and
   padding on the track only cancels out of that calculation. */
.dp-car__track {
  position: relative;
  display: flex; align-items: center;
  gap: 1rem;
  transform: translate3d(var(--shift, 0px), 0, 0);
  transition: transform .72s var(--ease-out);
}
.dp-car__viewport.is-dragging .dp-car__track { transition: none; }

/* width:auto — the frame's own size decides, and the caps below decide that.
   offsetLeft/offsetWidth still report layout values, so the centring maths is
   unaffected by the scale on the inactive slides. */
.dp-car__slide {
  flex: none;
  width: auto;
  opacity: .3;
  transform: scale(.9);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.dp-car__slide.is-active { opacity: 1; transform: scale(1); }

.dp-car__media {
  display: block; width: auto; padding: 0;
  background: var(--dp-panel); border: 0;
  cursor: pointer; overflow: hidden;
  box-shadow: 0 40px 80px -44px rgba(0, 0, 0, .95);
}
/* Both dimensions auto with BOTH caps: the frame scales down to fit whichever
   bites first and keeps its ratio either way. Setting an explicit height with
   width:auto would distort as soon as max-width clamped. */
.dp-car__media img {
  display: block;
  width: auto; height: auto;
  max-width: var(--dp-slide-w);
  max-height: var(--dp-stage);
  opacity: 0; transition: opacity .7s var(--ease-out);
}
.dp-car__media img.is-loaded { opacity: 1; }

.dp-car__bar {
  display: flex; align-items: center; gap: .9rem;
  margin-top: 1.8rem;
}
.dp-car__nav {
  flex: none;
  width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--cs-line-2);
  color: var(--cs-white);
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease),
              background-color .3s var(--ease);
}
.dp-car__nav svg { width: 1.4rem; height: .7rem; overflow: visible; }
.dp-car__nav svg path {
  fill: none; stroke: currentColor; stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
@media (hover: hover) {
  .dp-car__nav:hover:not(:disabled) { border-color: var(--cs-red); color: var(--cs-red); }
}
.dp-car__nav:disabled { opacity: .28; cursor: default; }

.dp-car__count {
  font-family: var(--font-cond); font-weight: 400;
  font-size: .8rem; letter-spacing: .16em;
  color: var(--cs-white);
  font-variant-numeric: tabular-nums;
}
.dp-car__count i { font-style: normal; color: var(--cs-dim); margin-inline: .2rem; }
.dp-car__count b { font-weight: 400; color: var(--cs-dim); }

/* progress ticks — hairlines, not dots */
.dp-car__ticks {
  display: flex; align-items: center; gap: .3rem;
  margin-left: auto;
  list-style: none;
}
.dp-car__ticks button {
  display: block;
  width: 1.5rem; height: 2px;
  padding: 0; border: 0;
  background: var(--cs-line-2);
  cursor: pointer;
  transition: background-color .4s var(--ease);
}
.dp-car__ticks button::before {          /* 44px touch target, 2px paint */
  content: ""; position: absolute;
  inset: -1rem -.15rem;
}
.dp-car__ticks li { position: relative; display: flex; }
.dp-car__ticks button[aria-current="true"] { background: var(--cs-red); }

/* ==================================== 8 carousel variants + colour experience */

/* The five sets differ in the SIZE of the stage and the furniture around it,
   not in the mechanics. Every one still resolves to something that fits the
   screen whole, because each is a cap rather than a fixed dimension. */

/* 03 — offset: a touch smaller, title set beside the frame on desktop */
.dp-car--offset { --dp-stage: min(calc(100svh - var(--dp-topbar) - 19rem), 390px); }

/* 04 — the biggest stage of the five */
.dp-car--wide { --dp-stage: min(calc(100svh - var(--dp-topbar) - 18rem), 490px); --dp-slide-w: 92vw; }
.dp-car--wide .dp-car__track { gap: .7rem; }

/* 05 — darker, cinematic: a graphite floor under the rail */
.dp-car--dark::before {
  content: "";
  position: absolute; inset: 12% 0 0;
  background: linear-gradient(180deg, transparent, var(--dp-panel) 32%, var(--dp-ink));
  z-index: -1;
}
.dp-car--dark .dp-car__media { box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 1); }

/* --- 02 · COLOUR EXPERIENCE ------------------------------------------------
   The wash is the only thing that changes with the active slide. The creative
   itself is never touched: no filter, no blend mode, no overlay on the image.
   Colours are keyed to the five real finishes in the campaign. */
.dp-car--colour {
  padding-block: 3.6rem;
  overflow: hidden;
  --dp-stage: min(calc(100svh - var(--dp-topbar) - 18rem), 465px);
}
.dp-colour__wash {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(78% 58% at 50% 42%, var(--dp-wash, rgba(46,108,232,.15)), transparent 72%),
    linear-gradient(180deg, transparent, var(--dp-wash-2, rgba(10,11,13,.9)));
  transition: background 1.1s var(--ease-out);
}
.dp-car--colour[data-colour="sunset-orange"] { --dp-wash: rgba(214, 96, 30, .3);  --dp-wash-2: rgba(38, 18, 8, .85); }
.dp-car--colour[data-colour="comet-white"]   { --dp-wash: rgba(196, 205, 218, .24); --dp-wash-2: rgba(26, 29, 34, .85); }
.dp-car--colour[data-colour="cosmic-yellow"] { --dp-wash: rgba(150, 178, 44, .26); --dp-wash-2: rgba(20, 28, 12, .85); }
.dp-car--colour[data-colour="eclipse-black"] { --dp-wash: rgba(38, 62, 120, .32);  --dp-wash-2: rgba(8, 10, 16, .92); }
.dp-car--colour[data-colour="lunar-grey"]    { --dp-wash: rgba(128, 136, 148, .26); --dp-wash-2: rgba(20, 22, 25, .85); }

.dp-colour__label {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-cond); font-weight: 400;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cs-white);
}
.dp-colour__swatch {
  width: .7rem; height: .7rem; flex: none;
  border: 1px solid var(--cs-line-2);
  background: var(--dp-swatch, #888);
  transition: background-color .9s var(--ease-out);
}
.dp-car--colour[data-colour="sunset-orange"] { --dp-swatch: #d4571c; }
.dp-car--colour[data-colour="comet-white"]   { --dp-swatch: #e8ebef; }
.dp-car--colour[data-colour="cosmic-yellow"] { --dp-swatch: #b9d130; }
.dp-car--colour[data-colour="eclipse-black"] { --dp-swatch: #16181d; }
.dp-car--colour[data-colour="lunar-grey"]    { --dp-swatch: #8a9099; }

/* ========================================================= 9 the commercial */
.dp-film {
  border-top: 1px solid var(--cs-line);
  position: relative; isolation: isolate;
}
.dp-film::before {
  content: "";
  position: absolute; inset: 30% 0 0; z-index: -1;
  background: radial-gradient(60% 60% at 50% 40%, var(--dp-blue-soft), transparent 70%);
  pointer-events: none;
}
.dp-mega--turn { margin-bottom: 2.6rem; }

.dp-film__stage { position: relative; }

/* a screen, not a device: black surround, no bezel, no laptop lid */
.dp-film__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 1);
}
.dp-film__poster,
.dp-film__screen video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}
.dp-film__poster { opacity: 0; transition: opacity .8s var(--ease-out); }
.dp-film__poster.is-loaded { opacity: 1; }
.dp-film__screen.is-playing .dp-film__poster,
.dp-film__screen.is-playing .dp-film__play { display: none; }

.dp-film__play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .9rem;
  background: linear-gradient(180deg, rgba(6,6,7,.1), rgba(6,6,7,.55));
  border: 0; cursor: pointer;
  color: var(--cs-white);
  transition: background-color .4s var(--ease);
}
.dp-film__play svg {
  width: 3.4rem; height: 3.4rem;
  padding: 1rem;
  fill: var(--cs-white);
  border: 1px solid var(--cs-line-2);
  border-radius: 50%;
  transition: transform .45s var(--ease-out), border-color .45s var(--ease),
              background-color .45s var(--ease);
}
.dp-film__play span {
  font-family: var(--font-cond); font-weight: 400;
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
}
@media (hover: hover) {
  .dp-film__play:hover svg {
    transform: scale(1.08);
    border-color: var(--cs-red);
    background: rgba(215, 25, 32, .16);
  }
}

.dp-film__meta {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.1rem;
  font-family: var(--font-cond); font-weight: 300;
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cs-dim);
}

/* ======================================================= 10 product reels */
.dp-reels { border-top: 1px solid var(--cs-line); }

.dp-reels__row {
  display: grid; gap: 2.4rem;
  list-style: none;
}

.dp-reel__screen {
  display: block; position: relative;
  width: 100%; padding: 0;
  background: #000; border: 0;
  cursor: pointer; overflow: hidden;
  box-shadow: 0 40px 80px -44px rgba(0, 0, 0, .95);
}
.dp-reel__screen img,
.dp-reel__screen video {
  display: block; width: 100%; height: auto;
}
.dp-reel__screen img { opacity: 0; transition: opacity .7s var(--ease-out); }
.dp-reel__screen img.is-loaded { opacity: 1; }
/* the clip is laid over the poster once it exists, at the poster's own box */
.dp-reel__screen video {
  position: absolute; inset: 0;
  height: 100%; object-fit: cover;
}

.dp-reel__cue {
  position: absolute; right: .75rem; bottom: .75rem;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  background: rgba(6, 6, 7, .55);
  backdrop-filter: blur(6px);
  border: 1px solid var(--cs-line-2);
  border-radius: 50%;
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
.dp-reel__cue::before {
  content: "";
  border-style: solid;
  border-width: .38rem 0 .38rem .62rem;
  border-color: transparent transparent transparent var(--cs-white);
  margin-left: .12rem;
}
.dp-reel__screen.is-playing .dp-reel__cue::before {
  border: 0;
  width: .55rem; height: .62rem;
  border-left: 2px solid var(--cs-white);
  border-right: 2px solid var(--cs-white);
  margin-left: 0;
}
@media (hover: hover) {
  .dp-reel__screen:hover .dp-reel__cue { border-color: var(--cs-red); background: rgba(215, 25, 32, .28); }
}

.dp-reel__meta {
  display: flex; flex-direction: column; gap: .3rem;
  margin-top: .85rem;
}
.dp-reel__meta b {
  font-family: var(--font-cond); font-weight: 500;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cs-white);
}
.dp-reel__meta span {
  font-family: var(--font-cond); font-weight: 300;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cs-dim);
}

/* ======================================================== 11 email design
   All three EDMs are on screen at once, side by side. They were a draggable
   stack, which hid two of the three behind the front one and made a set of
   three read as something you had to operate. Three documents is not enough
   to be worth paging through — showing them is simpler and faster.

   They are 1:1.8 to 1:2.8, far too tall to show whole at a readable width, so
   each is cropped to a common height and faded out at the foot; the viewer
   scrolls the complete design. */
.dp-mail { border-top: 1px solid var(--cs-line); }

.dp-mail__row {
  display: grid; gap: 2.4rem;
  margin-top: 2.8rem;
  list-style: none;
}
.dp-mail__item { margin: 0; }

.dp-mail__doc {
  position: relative;
  display: block; width: 100%; padding: 0;
  max-height: min(52vh, 460px);
  overflow: hidden;
  background: var(--dp-panel); border: 0;
  cursor: pointer;
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 1);
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent);
          mask-image: linear-gradient(180deg, #000 76%, transparent);
}
.dp-mail__doc img {
  display: block; width: 100%; height: auto;
  opacity: 0; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.dp-mail__doc img.is-loaded { opacity: 1; }
@media (hover: hover) {
  .dp-mail__doc:hover img { transform: translateY(-1.5%); }
}

.dp-mail__label {
  display: flex; flex-direction: column; gap: .3rem;
  margin-top: .9rem;
}
.dp-mail__label b {
  font-family: var(--font-cond); font-weight: 500;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cs-white);
}
.dp-mail__label span {
  font-family: var(--font-cond); font-weight: 300;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cs-dim);
}

/* ================================================= 12 one visual language */
.dp-lang { border-top: 1px solid var(--cs-line); }
.dp-lang__wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
  margin-top: 3rem;
}
.dp-lang__piece { position: relative; margin: 0; }
.dp-lang__piece img {
  display: block; width: 100%; height: auto;
  background: var(--dp-panel);
  opacity: 0; transition: opacity .8s var(--ease-out);
}
.dp-lang__piece img.is-loaded { opacity: 1; }
.dp-lang__piece figcaption {
  margin-top: .5rem;
  font-family: var(--font-cond); font-weight: 300;
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cs-dim);
}
/* the two tall pieces are cropped to a shared height on small screens so the
   collage does not become a column of very long documents */
.dp-lang__piece--b img,
.dp-lang__piece--c img {
  aspect-ratio: 3 / 4; object-fit: cover; object-position: top;
}

/* ============================================================= 13 closing */
.dp-close {
  border-top: 1px solid var(--cs-line);
  text-align: left;
}
.dp-close__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.8rem, 15vw, 6rem); line-height: .9;
  text-transform: uppercase; letter-spacing: -.01em;
  color: var(--cs-white);
}
.dp-close__lines {
  margin-top: 1.6rem;
  font-family: var(--font-cond); font-weight: 300;
  font-size: 1.05rem; line-height: 1.5; letter-spacing: .02em;
  color: var(--cs-grey);
}
.dp-close__cats {
  margin-top: 1.4rem;
  font-family: var(--font-cond); font-weight: 400;
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cs-red);
}
.dp-close .cs-cta { margin-top: 3.2rem; }
.dp-close .cs-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.dp-close .cs-next {
  margin-top: 3.5rem; padding-top: 1.6rem;
  border-top: 1px solid var(--cs-line);
}
.dp-close .cs-next__label {
  font-family: var(--font-cond); font-weight: 400;
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cs-dim); margin-bottom: .5rem;
}
.dp-close .cs-next__link {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--font-cond); font-weight: 400;
  font-size: 1.35rem; letter-spacing: -.01em;
  color: var(--cs-white);
  transition: color .3s var(--ease);
}
.dp-close .cs-next__link .arrow { width: 2rem; }
.dp-close .cs-next__link:hover { color: var(--cs-red); }
.dp-close .cs-next__link:hover .arrow { transform: translateX(6px); }

/* ======================================================= 14 media viewer */
.dp-lb {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(.75rem, 3vw, 2rem);
}
.dp-lb[hidden] { display: none; }
.dp-lb__backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 4, 5, .96);
  backdrop-filter: blur(8px);
}

.dp-lb__dialog {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  max-width: 1400px;
  gap: .75rem;
}

/* The stage takes the leftover height. min-height:0 is what lets it actually
   shrink inside the flex column; without it the media pushes the bar off the
   bottom of the screen. Media is sized with max-width/max-height against a
   stage that has a definite box, never with percentage width — a percentage
   here resolves against the parent's intrinsic size and overflows. */
.dp-lb__stage {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.dp-lb__stage img,
.dp-lb__stage video {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  background: var(--dp-panel);
}
/* the EDMs are up to 1:2.8 — fitting them to the screen height would make
   them unreadable, so the stage scrolls them instead */
.dp-lb__stage.is-tall {
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.dp-lb__stage.is-tall img {
  max-height: none;
  width: min(100%, 32rem);
  margin-inline: auto;
}

.dp-lb__caption {
  flex: none; text-align: center;
  font-family: var(--font-cond); font-weight: 300;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cs-grey);
}

.dp-lb__bar {
  flex: none;
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
}
.dp-lb__nav {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--cs-line-2);
  color: var(--cs-white);
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.dp-lb__nav svg { width: 1.4rem; height: .7rem; overflow: visible; }
.dp-lb__nav svg path {
  fill: none; stroke: currentColor; stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
@media (hover: hover) {
  .dp-lb__nav:hover:not(:disabled) { border-color: var(--cs-red); color: var(--cs-red); }
}
.dp-lb__nav:disabled { opacity: .25; cursor: default; }

.dp-lb__count {
  min-width: 5rem; text-align: center;
  font-family: var(--font-cond); font-weight: 400;
  font-size: .8rem; letter-spacing: .18em;
  color: var(--cs-white); font-variant-numeric: tabular-nums;
}

.dp-lb__close {
  position: absolute; top: -.25rem; right: -.25rem;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: rgba(6, 6, 7, .7);
  border: 1px solid var(--cs-line-2);
  color: var(--cs-white);
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.dp-lb__close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }
@media (hover: hover) {
  .dp-lb__close:hover { border-color: var(--cs-red); color: var(--cs-red); }
}

/* ================================================== 15 TABLET  min 561px */
@media (min-width: 561px) {
  :root {
    --cs-space: 7rem;
    --dp-h1: 3rem;
    --dp-h2: 2.4rem;
    --dp-mega: 4rem;
    --gutter: clamp(1.5rem, 3.2vw, 2.5rem);
    --dp-stage: min(calc(100svh - var(--dp-topbar) - 19rem), 500px);
    --dp-slide-w: 62vw;
  }

  /* a wider stage needs less black above the car for the copy to breathe */
  .dp-wall__grid { column-count: 2; column-gap: 1.2rem; }
  .dp-tile { margin-bottom: 1.2rem; }
  .dp-tile--bleed { margin-bottom: 2.2rem; }

  .dp-credits__row { grid-template-columns: 6rem 1fr; }
  .dp-credits__num { font-size: 3.4rem; }

  .dp-reels__row { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .dp-reel--high { grid-column: span 2; max-width: 70%; margin-inline: auto; }

  .dp-mail__row { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: start; }

  .dp-lang__wall { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

/* ================================================= 16 DESKTOP  min 1025px */
@media (min-width: 1025px) {
  :root {
    --cs-space: 9rem;
    --dp-h1: 3.9rem;
    --dp-h2: 3rem;
    --dp-mega: 5.6rem;
    /* The frame gets whatever the viewport has left once the sticky topbar and
       the section's own furniture are paid for. Measured: title + counter +
       controls + padding come to ~277px, so 20rem leaves ~40px of breathing
       room and the whole unit lands inside one screen. --dp-topbar is written
       by JS from the real topbar height (3.95rem fallback for no-JS). */
    --dp-stage: min(calc(100svh - var(--dp-topbar) - 20rem), 540px);
    --dp-slide-w: 46vw;
  }

  /* --- hero: type left, car right, both full height -------------------
     Here the car moves out from behind the typography entirely: the media
     goes back to full bleed and object-position parks the artwork in the
     right-hand 82%, so the left column is clean black for the copy. */
  .dp-hero { padding-top: 4rem; padding-bottom: 3rem; }
  .dp-hero__car { object-position: 60% center; }
  .dp-hero__media::after {
    background:
      linear-gradient(to right, rgba(6,6,7,.92) 18%, rgba(6,6,7,.6) 45%, rgba(6,6,7,.15) 75%, transparent 100%),
      linear-gradient(to top,   rgba(6,6,7,.55) 0%, rgba(6,6,7,.2) 35%, transparent 60%);
  }
  .dp-hero::before {
    inset: auto 0 -10% 30%;
    background: radial-gradient(52% 62% at 62% 74%, var(--dp-blue-soft), transparent 70%);
  }
  .dp-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 30rem) 1fr;
    grid-template-rows: 1fr auto;
    align-items: end;
    flex: 1;                 /* the 1fr row needs the hero's full height */
    gap: 0;
    padding-block: 5rem 3rem;
  }
  .dp-hero__copy { grid-column: 1; grid-row: 1; align-self: center; }
  .dp-hero__count {
    grid-column: 1; grid-row: 2;
    margin-top: 0;           /* the grid row does the pinning here */
    max-width: 30rem;
  }
  .dp-hero__count-num { font-size: 5rem; }
  .dp-hero__scroll { bottom: 2.4rem; }

  /* --- glance -------------------------------------------------------- */
  .dp-glance .dp-lede { margin-top: 2rem; }
  .dp-credits {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 4.5rem;
    border-top: 1px solid var(--cs-line);
    border-bottom: 1px solid var(--cs-line);
  }
  .dp-credits__row {
    display: block;
    padding: 2.2rem 1.2rem 2rem 0;
    border-bottom: 0;
    border-right: 1px solid var(--cs-line);
  }
  .dp-credits__row:last-child { border-right: 0; }
  .dp-credits__num { font-size: 4.4rem; }
  .dp-credits__label { display: block; margin-top: .9rem; font-size: .7rem; }

  /* --- wall ---------------------------------------------------------- */
  .dp-wall__grid { column-count: 3; column-gap: 1.5rem; }
  .dp-tile { margin-bottom: 1.5rem; }
  .dp-tile--inset { padding-inline: 17%; }
  .dp-tile--bleed { margin-bottom: 3.2rem; }

  /* --- carousels -----------------------------------------------------
     Vertical padding is deliberately modest here: it is the section furniture
     that eats the height the artwork needs, and the whole unit has to sit
     inside one screen. */
  .dp-car { padding-block: 3.5rem; }
  .dp-car__head { grid-template-columns: 5rem 1fr auto; align-items: center; }
  .dp-car__num { font-size: 2.6rem; }
  .dp-car__title { font-size: 2.2rem; }
  .dp-car__track { gap: 1.6rem; }

  .dp-car--offset { --dp-stage: min(calc(100svh - var(--dp-topbar) - 21rem), 470px); }
  .dp-car--wide   { --dp-stage: min(calc(100svh - var(--dp-topbar) - 20rem), 600px); --dp-slide-w: 62vw; }
  .dp-car--colour { --dp-stage: min(calc(100svh - var(--dp-topbar) - 20rem), 570px); --dp-slide-w: 52vw; }
  .dp-car--dark   { --dp-stage: min(calc(100svh - var(--dp-topbar) - 20rem), 540px); --dp-slide-w: 48vw; }

  .dp-colour__label { grid-column: auto; justify-self: end; }

  /* --- reels: three screens, staggered, each at its own ratio --------- */
  .dp-reels__row {
    grid-template-columns: 0.78fr 1fr 0.92fr;
    gap: 2.2rem;
    align-items: start;
  }
  .dp-reel--low  { margin-top: 5.5rem; }
  .dp-reel--lead { margin-top: 0; }
  .dp-reel--high { margin-top: 9rem; grid-column: auto; max-width: none; margin-inline: 0; }

  /* --- email --------------------------------------------------------- */
  .dp-mail__row { gap: 2rem; margin-top: 3.5rem; }
  .dp-mail__doc { max-height: min(62vh, 620px); }

  /* --- collage: a presentation wall, pieces at their own scale -------- */
  .dp-lang__wall {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 3.2rem;
    gap: 1.2rem;
    margin-top: 4.5rem;
  }
  .dp-lang__piece img { height: 100%; object-fit: cover; }
  .dp-lang__piece { display: flex; flex-direction: column; }
  .dp-lang__piece img { flex: 1; min-height: 0; }

  .dp-lang__piece--a { grid-column: 1 / span 5;  grid-row: 1 / span 5; }
  .dp-lang__piece--b { grid-column: 6 / span 3;  grid-row: 2 / span 6; }
  .dp-lang__piece--c { grid-column: 9 / span 4;  grid-row: 1 / span 7; }
  .dp-lang__piece--d { grid-column: 1 / span 4;  grid-row: 6 / span 5; }
  .dp-lang__piece--e { grid-column: 5 / span 5;  grid-row: 8 / span 4; }
  .dp-lang__piece--f { grid-column: 10 / span 3; grid-row: 8 / span 4; }
  .dp-lang__piece--b img,
  .dp-lang__piece--c img { aspect-ratio: auto; }

  /* --- closing ------------------------------------------------------- */
  .dp-close__lines { font-size: 1.35rem; }
  .dp-close .cs-next { display: flex; align-items: baseline; gap: 2rem; }
  .dp-close .cs-next__label { margin-bottom: 0; }
  .dp-close .cs-next__link { font-size: 1.9rem; }

  /* --- viewer -------------------------------------------------------- */
  .dp-lb__close { top: 0; right: 0; }
  .dp-lb__stage.is-tall img { width: min(100%, 40rem); }
}

/* ============================================ 17 LARGE DESKTOP  min 1440px */
@media (min-width: 1440px) {
  :root {
    --cs-space: 10.5rem;
    --dp-h1: 4.5rem;
    --dp-mega: 6.6rem;
  }
  .dp-hero__inner { grid-template-columns: minmax(0, 36rem) 1fr; }
  .dp-hero__count-num { font-size: 6rem; }
  .dp-credits__num { font-size: 5.4rem; }
}

/* ===================================================== 18 reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dp-hero__media,
  .dp-hero__car,
  .dp-hero__inner {
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
  }
  .dp-hero__scroll { opacity: 1; }
  .dp-car__track,
  .dp-car__slide,
  .dp-colour__wash,
  .dp-tile__btn img,
  .dp-mail__doc img,
  .dp-film__play svg {
    transition-duration: .01ms !important;
  }
  .dp-mail__doc:hover img { transform: none; }
  .dp-tile__btn:hover img { transform: none; }
  /* the inactive carousel slides stay dimmed but are not scaled, so the rail
     is still readable without any movement */
  .dp-car__slide { transform: none; }
}