/* =========================================================
   PROJECT PAGE  (Figma: Multivu Desktop 213:3258 / Tablet 213:2948 /
   Mobile 213:2640). Loaded after styles.css and portfolio.css (which give
   the light page, the blue nav, the bottom band and the footer).

   Side margins follow the rest of the site: the content lines up with the
   homepage gutter, and the project card's frame lines up with the nav.
   ========================================================= */

.pj {
  --ink-dark: #030321;           /* dark text on white (Figma) */
  --card-blue: var(--blue);
  --edge-nav: calc(60 * var(--s));   /* where the nav's N logo starts */
  background: #fff;
  color: var(--ink-dark);
}

/* Section titles: same size as the homepage section titles */
.pj-title {
  font-size: var(--fs-title);
  line-height: 1.07;
  letter-spacing: -0.04em;
  margin: 0;
  text-wrap: wrap;
}
.pj-title--watch { max-width: 8.2em; }    /* "Watch Multivu’s / Branding Video:" */
.pj-title--story { max-width: 10.2em; }   /* "A Bold Visual Identity / for Growth Marketing" */

/* =========================================================
   PROJECT CARD
   ========================================================= */
.pj-hero {
  /* light page behind the card; on desktop the white starts a little above
     the card's bottom edge, as in Figma */
  /* the light blue runs right down to the card's bottom edge; the white
     space comes after it, before the content below */
  --white-from: 0px;
  background: linear-gradient(to bottom, var(--mist) calc(100% - var(--white-from)), #fff 0);
  margin-bottom: calc(94 * var(--s));
  padding: calc(135 * var(--s)) var(--edge-nav) calc(80 * var(--s));   /* light blue continues a little below the card */
  overflow-x: clip;   /* the diamonds' larger tap area never makes the page scroll sideways */
}
.pj-card {
  --gap: calc(24 * var(--s));             /* light strip between the frame and the blue */
  position: relative;
  --bw: max(1px, calc(1.58 * var(--s)));   /* frame line */
  border: var(--bw) solid var(--frame);
  padding: var(--gap) 0;
  background: var(--mist);
  color: #fff;
}
.pj-card__inner {
  display: grid;
  grid-template-columns: calc(978.4 * var(--s)) 1fr;
  column-gap: calc(36 * var(--s));
  /* the picture and text start on the homepage gutter */
  padding: calc(138 * var(--s)) calc(var(--gutter) - var(--edge-nav)) calc(138 * var(--s));
  background: var(--card-blue);
}

/* the tab hanging from the top edge (as on the portfolio cards) */
.pj-card__tab {
  --h: calc(57.6 * var(--s));
  --slant: calc(19 * var(--s));
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  translate: -50% 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(16 * var(--s));
  width: calc(256.7 * var(--s));
  height: var(--h);
  padding-top: calc(25.5 * var(--s));
  background: var(--mist);
  /* straight down through the light strip, then slanted into the blue */
  clip-path: polygon(0 0, 100% 0, 100% calc(var(--gap) / var(--h) * 100%),
                     calc(100% - var(--slant)) 100%, var(--slant) 100%, 0 calc(var(--gap) / var(--h) * 100%));
  color: var(--blue);
  font-size: max(12px, calc(19 * var(--s)));
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* previous / next: diamonds sitting on the frame, dark half pointing out */
/* the diamonds sit on the frame lines, centred on the card's height; they
   scale with the screen and never get too small to tap */
.pj-card { container-type: inline-size; }
.pj-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: clamp(30px, 3.85vw, 74px);
  aspect-ratio: 74 / 75;
  translate: -50% -50%;
  transition: transform .25s cubic-bezier(.3, .7, .2, 1);
}
.pj-arrow::before { content: ""; position: absolute; inset: -10px; }   /* bigger tap area */
.pj-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pj-arrow__body { fill: var(--mist); }
.pj-arrow__half { fill: #00001e; }
/* centred exactly on the frame line: the split between the halves sits on it */
.pj-arrow--prev { left: calc(var(--bw) / -2); }
.pj-arrow--next { left: calc(100% + var(--bw) / 2); }
.pj-arrow--next svg { transform: scaleX(-1); }
/* hover: grows in place */
.pj-arrow:hover,
.pj-arrow:focus-visible { transform: scale(1.15); }

/* picture: same frame, inset and corner flags as the portfolio cards
   (identical proportions, so the triangles sit in exactly the same spots) */
.pj-card__photo {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 82.76 / 48.52;
  border: max(1px, calc(1.56 * var(--s))) solid var(--frame);
  align-self: start;
}
.pj-card__photo img {
  position: absolute;
  inset: 2.757cqw;
  width: calc(100% - 5.515cqw);
  height: calc(100% - 5.515cqw);
  object-fit: cover;
}
.pj-card__photo::before,
.pj-card__photo::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 4.715cqw;
  aspect-ratio: 1;
  background: var(--pj-tri, #00001e);
}
.pj-card__photo::before { top: 3.867cqw; right: 3.867cqw; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.pj-card__photo::after  { bottom: 3.867cqw; left: 3.867cqw; clip-path: polygon(0 0, 0 100%, 100% 100%); }
/* entrance: as the page opens, the two triangles slide into their corners
   the same way as on the portfolio cards (the bottom one mirrored) */
.js .pj-card__photo::before,
.js .pj-card__photo::after {
  opacity: 0;
  transition: opacity .5s cubic-bezier(.4, 0, 0, 1) .35s, transform .5s cubic-bezier(.4, 0, 0, 1) .35s;
}
.js .pj-card__photo::before { transform: translate(-19%, 19%); }
.js .pj-card__photo::after  { transform: translate(19%, -19%); }
.js.is-ready .pj-card__photo::before,
.js.is-ready .pj-card__photo::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .pj-card__photo::before, .js .pj-card__photo::after { opacity: 1; transform: none; transition: none; }
}

.pj-card__body { display: flex; flex-direction: column; align-items: flex-start; }
.pj-card__name {
  margin-top: calc(14 * var(--s));
  font-size: calc(72 * var(--s));
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.pj-card__text {
  /* always one empty line of the text between it and "Learn More" */
  margin-bottom: 1.24em;
  margin-bottom: 1lh;
  max-width: max(calc(482 * var(--s)), 21em);
  margin-top: calc(48 * var(--s));
  font-size: max(14px, calc(16 * var(--s)));
  line-height: 1.24;
  letter-spacing: -0.02em;
}
.pj-card__more {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin-top: auto;
  font-size: var(--fs-more-sm);
  letter-spacing: -0.04em;
}
/* a solid down-pointing triangle, in the text colour, sized to the text */
.pj-card__more svg { width: 1.16em; height: .58em; fill: currentColor; align-self: center; transition: transform .25s; }
.pj-card__more:hover svg { transform: translateY(4px); }

/* =========================================================
   VIDEO
   ========================================================= */
.pj-watch { padding-top: calc(21 * var(--s)); }   /* same start as every project page */
.pj-watch .pj-title { margin: 0 var(--gutter) calc(66 * var(--s)); }
.pj-band {
  background: var(--navy);
  padding: calc(150 * var(--s)) var(--gutter);
}
.pj-player {
  position: relative;
  aspect-ratio: 1520 / 854;
  border: max(1px, calc(1.44 * var(--s))) solid var(--frame);
  background: var(--navy);
  overflow: hidden;
}
.pj-player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--navy);
}
.pj-player__start {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.pj-player__circle {
  display: grid;
  place-items: center;
  width: 13.5%;
  min-width: 48px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  transition: background-color .3s ease, transform .3s cubic-bezier(.3, .7, .2, 1);
}
.pj-player__circle svg { width: 23%; height: auto; margin-left: 9%; fill: #fff; }
.pj-player__start:hover .pj-player__circle,
.pj-player__start:focus-visible .pj-player__circle { background: rgba(13, 41, 228, .85); transform: scale(1.06); }
.pj-player.is-playing .pj-player__start,
.pj-player.is-paused .pj-player__start { display: none; }
.pj-player__soon {
  position: absolute;
  left: 0; right: 0;
  bottom: 12%;
  text-align: center;
  color: #fff;
  font-size: var(--fs-small);
}
/* controls: show while paused, or when the pointer moves over the video */
.pj-player__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 20px 14px;
  background: linear-gradient(to top, rgba(0, 0, 30, .75), rgba(0, 0, 30, 0));
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transition: opacity .3s ease;
}
.pj-player__bar[hidden] { display: none; }
.pj-player.is-paused .pj-player__bar,
.pj-player.show-bar .pj-player__bar,
.pj-player__bar:focus-within { opacity: 1; }
.pj-player__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.pj-player__btn svg { width: 20px; height: 20px; fill: currentColor; }
.pj-player__btn:hover { color: var(--sky); }
.pj-player .i-play, .pj-player .i-muted { display: none; }
.pj-player.is-paused .i-play { display: block; }
.pj-player.is-paused .i-pause { display: none; }
.pj-player.is-muted .i-muted { display: block; }
.pj-player.is-muted .i-sound { display: none; }
.pj-player__seek {
  flex: 1;
  min-width: 60px;
  height: 4px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 2px;
  background: linear-gradient(to right, var(--sky) var(--p, 0%), rgba(255, 255, 255, .35) 0);
  cursor: pointer;
}
.pj-player__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 0; }
.pj-player__seek::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 0; }
.pj-player__time { flex: none; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.pj-player:fullscreen { border: 0; }
.pj-player:fullscreen video { object-fit: contain; }

/* =========================================================
   VISUAL IDENTITY
   ========================================================= */
.pj-story { padding: calc(100 * var(--s)) var(--gutter) calc(89 * var(--s)); }
.pj-story__text {
  max-width: calc(700 * var(--s));
  margin-top: calc(48 * var(--s));
  font-size: var(--fs-small);
  line-height: 1.22;
  letter-spacing: -0.02em;
}
@media (min-width: 1100px) {
  .pj-story__text { min-width: 34em; }
}

/* Collage: one grid, laid out per screen size in design units
   (--u = one Figma pixel of the collage's width), so every picture keeps
   its Figma size and position as the page scales. */
.pj-collage { container-type: inline-size; margin-top: calc(80 * var(--s)); }
.pj-collage__grid {
  --u: calc(100cqw / 1520);
  display: grid;
  grid-template-columns:
    calc(378 * var(--u)) calc(20 * var(--u)) calc(128 * var(--u)) calc(355 * var(--u))
    calc(20 * var(--u)) calc(49 * var(--u)) calc(20 * var(--u)) calc(230.5 * var(--u))
    calc(20 * var(--u)) calc(140.5 * var(--u)) calc(159 * var(--u));
  grid-template-rows:
    calc(487 * var(--u)) calc(20 * var(--u)) calc(133 * var(--u)) calc(20 * var(--u))
    calc(335 * var(--u)) calc(22 * var(--u)) calc(267 * var(--u)) calc(21 * var(--u)) calc(242 * var(--u));
}
.c { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the animated drawings are shown whole, on their own light background */
.c-hand, .c-float, .c-walk { object-fit: contain; background: #fbfbfb; }
.c-tower  { grid-area: 1 / 1 / 6 / 2; }
.c-desk   { grid-area: 1 / 3 / 4 / 5; }
.c-space  { grid-area: 5 / 3 / 6 / 5; }
.c-orange { grid-area: 1 / 6 / 2 / 9; }
.c-pink   { grid-area: 1 / 10 / 2 / 12; }
.c-lounge { grid-area: 3 / 6 / 6 / 12; }
.c-hand   { grid-area: 7 / 1 / 10 / 4; }
.c-float  { grid-area: 7 / 4 / 8 / 7; }
.c-walk   { grid-area: 9 / 4 / 10 / 7; }
.c-swatches { grid-area: 7 / 8 / 10 / 12; }
.c-mark   { grid-area: 7 / 11 / 10 / 12; align-self: end; justify-self: end; width: calc(157.5 * var(--u)); height: auto; }

.c-swatches {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-swatches li { display: flex; align-items: flex-start; gap: calc(18 * var(--u)); }
.swatch__chip { flex: none; width: calc(136 * var(--u)); height: calc(73 * var(--u)); }
.swatch__text {
  padding-top: calc(4 * var(--u));
  font-size: max(9px, calc(11 * var(--u)));
  line-height: 1.22;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* =========================================================
   CLIENTS
   ========================================================= */
.pj-brands {
  background: #030222;
  color: #fff;
  padding-top: calc(122 * var(--s));
}
.pj-brands .pj-title { margin: 0 var(--gutter); }
.pj-logos {
  display: grid;
  grid-template-columns: repeat(7, calc(134.4 * var(--s)));
  justify-content: space-between;
  row-gap: calc(18.4 * var(--s));
  margin: calc(186 * var(--s)) var(--gutter) 0;
  padding: 0;
  list-style: none;
}
.pj-logos img { width: 100%; height: auto; }
.pj-client {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: calc(217 * var(--s));
  padding-bottom: calc(150 * var(--s));   /* space down to the bottom band */
}
.pj-client__logo { width: calc(391 * var(--s)); min-width: 120px; height: auto; }
.pj-client__tag {
  margin-top: calc(38 * var(--s));
  font-size: var(--fs-card);
  letter-spacing: -0.02em;
}

/* =========================================================
   TABLET  (Figma 992 wide; --s = 1/1000 of the screen)
   ========================================================= */
@media (max-width: 1099px) {
  .pj { --edge-nav: calc(43 * var(--s)); }
  .pj-hero { --white-from: 0px; margin-bottom: 0; padding-top: calc(130 * var(--s)); padding-bottom: calc(56 * var(--s)); }
  .pj-card { --gap: calc(22 * var(--s)); }
  .pj-card__inner {
    grid-template-columns: 1fr;
    padding: calc(49 * var(--s)) calc(48 * var(--s)) calc(45 * var(--s));
  }
  .pj-card__tab { --h: calc(38.5 * var(--s)); --slant: calc(9.5 * var(--s)); width: calc(127.7 * var(--s)); min-width: 104px; padding-top: calc(13.1 * var(--s)); gap: calc(6 * var(--s)); font-size: max(11px, calc(16.5 * var(--s))); }
  .pj-card__tab-our { display: none; }
  .pj-card__name { margin-top: calc(28 * var(--s)); font-size: calc(52 * var(--s)); }
  .pj-card__text { max-width: calc(660 * var(--s)); margin-top: calc(14 * var(--s)); font-size: max(14px, calc(14.6 * var(--s))); line-height: 1.33; }
  .pj-card__more { margin-top: 0; font-size: max(16px, calc(19 * var(--s))); }

  .pj-watch { padding-top: calc(90 * var(--s)); }   /* same start as every project page */
  .pj-watch .pj-title { margin-bottom: calc(58 * var(--s)); }
  .pj-band { padding-block: calc(53 * var(--s)); }

  .pj-story { padding: calc(73 * var(--s)) var(--gutter) calc(35 * var(--s)); }
  .pj-story__text { max-width: calc(600 * var(--s)); margin-top: calc(20 * var(--s)); line-height: 1.3; }
  .pj-collage { margin-top: calc(34 * var(--s)); }
  .pj-collage__grid {
    --u: calc(100cqw / 911);
    grid-template-columns:
      calc(307 * var(--u)) calc(26 * var(--u)) calc(55 * var(--u)) calc(26 * var(--u))
      calc(81 * var(--u)) calc(19 * var(--u)) calc(127 * var(--u)) calc(22 * var(--u)) calc(248 * var(--u));
    grid-template-rows:
      calc(658.8 * var(--u)) calc(20.9 * var(--u)) calc(342.4 * var(--u)) calc(16.2 * var(--u))
      calc(500 * var(--u)) calc(21 * var(--u)) calc(500.6 * var(--u)) calc(22 * var(--u))
      calc(250.4 * var(--u)) calc(15 * var(--u)) calc(231.5 * var(--u));
  }
  .c-tower  { grid-area: 1 / 1 / 4 / 4; }
  .c-desk   { grid-area: 1 / 5 / 2 / 10; }
  .c-space  { grid-area: 3 / 5 / 4 / 10; }
  .c-orange { grid-area: 5 / 1 / 6 / 2; }
  .c-pink   { grid-area: 5 / 3 / 6 / 8; }
  .c-swatches { grid-area: 5 / 9 / 6 / 10; }
  .c-lounge { grid-area: 7 / 1 / 8 / 8; }
  .c-mark   { grid-area: 7 / 9 / 8 / 10; width: calc(138 * var(--u)); margin: 0 calc(22 * var(--u)) calc(33 * var(--u)) 0; }
  .c-hand   { grid-area: 9 / 1 / 12 / 6; }
  .c-float  { grid-area: 9 / 7 / 10 / 10; }
  .c-walk   { grid-area: 11 / 7 / 12 / 10; }
  .c-swatches li { gap: calc(15 * var(--u)); }
  .swatch__chip { width: calc(112.2 * var(--u)); height: calc(57.3 * var(--u)); }
  .swatch__text { padding-top: calc(2 * var(--u)); font-size: max(8.5px, calc(10.5 * var(--u))); }

  .pj-brands { padding-top: calc(100 * var(--s)); }
  .pj-title--brands { max-width: 11em; }
  .pj-logos { grid-template-columns: repeat(4, calc(104 * var(--s))); row-gap: calc(28 * var(--s)); margin-top: calc(83 * var(--s)); }
  /* tablet keeps the first four logos of each desktop row */
  .pj-logos li:nth-child(7n+5),
  .pj-logos li:nth-child(7n+6),
  .pj-logos li:nth-child(7n) { display: none; }
  .pj-client { padding-top: calc(207 * var(--s)); padding-bottom: calc(100 * var(--s)); }
  .pj-client__logo { width: calc(382 * var(--s)); }
  .pj-client__tag { margin-top: calc(44 * var(--s)); }
}

/* =========================================================
   PHONE  (Figma 480 wide)
   ========================================================= */
@media (max-width: 599px) {
  .pj { --edge-nav: var(--gutter); }
  .pj-hero { padding-top: calc(42 * var(--s)); padding-bottom: calc(25 * var(--s)); }
  .pj-card { --gap: calc(11 * var(--s)); }
  .pj-card__inner { padding: calc(23 * var(--s)) calc(23 * var(--s)) calc(44 * var(--s)); }
  .pj-card__tab { --h: calc(18.5 * var(--s)); --slant: calc(4.5 * var(--s)); width: calc(61.4 * var(--s)); min-width: 52px; padding-top: calc(7 * var(--s)); }
  .pj-card__tab { --h: calc(23 * var(--s)); width: calc(90 * var(--s)); padding-top: calc(6 * var(--s)); font-size: 11px; }   /* room for the word "Portfolio" */
  /* phone: the diamonds sit level with the middle of the picture */
  .pj-card__name { margin-top: calc(19 * var(--s)); font-size: calc(42 * var(--s)); }
  .pj-card__text { margin-top: calc(30 * var(--s)); font-size: calc(16.5 * var(--s)); line-height: 1.18; letter-spacing: -0.01em; }

  .pj-watch { padding-top: calc(45 * var(--s)); }
  .pj-watch .pj-title { margin-bottom: calc(14 * var(--s)); }
  .pj-band { padding-block: calc(29 * var(--s)); }

  .pj-story { padding: calc(35 * var(--s)) var(--gutter) calc(26 * var(--s)); }
  .pj-title--story { max-width: 11.5em; }
  .pj-story__text { margin-top: calc(10 * var(--s)); font-size: calc(16.5 * var(--s)); line-height: 1.25; }
  .pj-collage { margin-top: calc(24 * var(--s)); }
  .pj-collage__grid {
    --u: calc(100cqw / 422);
    grid-template-columns:
      calc(180 * var(--u)) calc(12 * var(--u)) calc(15 * var(--u)) calc(8 * var(--u))
      calc(14 * var(--u)) calc(9 * var(--u)) calc(184 * var(--u));
    grid-template-rows:
      calc(305 * var(--u)) calc(9.7 * var(--u)) calc(158.5 * var(--u)) calc(7.6 * var(--u))
      calc(329 * var(--u)) calc(13 * var(--u)) calc(330 * var(--u)) calc(7.4 * var(--u))
      calc(115.9 * var(--u)) calc(9 * var(--u)) calc(105 * var(--u));
  }
  .c-tower  { grid-area: 1 / 1 / 4 / 2; }
  .c-desk   { grid-area: 1 / 3 / 2 / 8; }
  .c-space  { grid-area: 3 / 3 / 4 / 8; }
  .c-orange { grid-area: 5 / 1 / 6 / 4; }
  .c-pink   { grid-area: 5 / 5 / 6 / 8; }
  .c-lounge { grid-area: 7 / 1 / 8 / 8; }
  .c-hand   { grid-area: 9 / 1 / 12 / 6; }
  .c-float  { grid-area: 9 / 7 / 10 / 8; }
  .c-walk   { grid-area: 11 / 7 / 12 / 8; }
  .c-swatches, .c-mark { display: none; }   /* not in the phone design */

  .pj-brands { padding-top: calc(54 * var(--s)); }
  .pj-title--brands { max-width: 13em; }
  .pj-logos { grid-template-columns: repeat(3, calc(68 * var(--s))); row-gap: calc(18 * var(--s)); margin-top: calc(42 * var(--s)); }
  .pj-logos li:nth-child(7n+4) { display: none; }
  .pj-client { padding-top: calc(122 * var(--s)); padding-bottom: calc(70 * var(--s)); }
  .pj-client__logo { width: calc(150 * var(--s)); }
  .pj-client__tag { display: none; }        /* not in the phone design */
}

@media (prefers-reduced-motion: reduce) {
  .pj-arrow, .pj-player__circle, .pj-card__more svg { transition: none; }
}

/* =========================================================
   NORTHEASTERN UNIVERSITY  (Figma: NEU Desktop / Tablet / Mobile)
   Same card, margins and titles as the other project pages.
   Picture groups are laid out in Figma units as shares of their box,
   so they keep their arrangement as the page scales.
   ========================================================= */
.nu-title--right { margin-left: auto; text-align: right; }
.nu-title--framework { max-width: 18.3em; }
.nu-title--modules { max-width: 13.8em; }
.nu-title--motion { max-width: 12.4em; }
.nu-title--podcast { max-width: 10.2em; }

/* palette + framework */
.nu-framework { padding: calc(21 * var(--s)) var(--gutter) 0; }   /* every project page's content starts at the same place */
.nu-swatches {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nu-swatch { display: flex; align-items: flex-end; gap: calc(9.6 * var(--s)); }
.nu-swatch__chip { flex: none; width: calc(86.3 * var(--s)); height: calc(171.5 * var(--s)); }
.nu-swatch__text {
  font-size: max(11px, calc(15 * var(--s)));
  line-height: 1.24;
  letter-spacing: -0.02em;
  white-space: nowrap;
  margin-bottom: -.2em;
}
.nu-title--framework { margin-top: calc(95 * var(--s)); }

/* two framed photos with their texts. Desktop (Figma 1520 wide): each text
   sits beside its photo with its last line level with the bottom edge of
   that photo's coloured frame. --u = 1 Figma px. */
.nu-framework { container-type: inline-size; }
.nu-collage {
  --u: calc(100cqw / 1520);
  display: grid;
  grid-template-columns: calc(771.6 * var(--u)) calc(748.4 * var(--u));
  grid-template-rows: auto auto;
  row-gap: calc(70 * var(--u));
  margin-top: calc(78 * var(--s));
}
.nu-pair { position: relative; }
.nu-pair > * { position: absolute; }
.nu-pair--team { grid-column: 1; grid-row: 1; width: calc(741 * var(--u)); height: calc(743.7 * var(--u)); }
.nu-frame--gold { left: calc(27.6 * var(--u)); top: 0; width: calc(713.4 * var(--u)); height: calc(743.7 * var(--u)); background: #e4c972; }
.nu-photo--team { left: 0; top: calc(35 * var(--u)); width: calc(708.7 * var(--u)); height: auto; }
.nu-pair--student { grid-column: 2; grid-row: 2; width: calc(748.4 * var(--u)); height: calc(753.3 * var(--u)); }
.nu-frame--blue { left: calc(35 * var(--u)); top: calc(11 * var(--u)); width: calc(713.4 * var(--u)); height: calc(742.3 * var(--u)); background: #a9bec2; }
.nu-photo--student { left: 0; top: 0; width: calc(713.7 * var(--u)); height: auto; }
.nu-text {
  font-size: var(--fs-small);
  line-height: 1.22;
  letter-spacing: -0.02em;
}
/* last line sits on the frame's bottom edge (the descenders hang just below the line box) */
.nu-text--1 { grid-column: 2; grid-row: 1; align-self: end; width: calc(588 * var(--u)); min-width: 22em; margin: 0 0 -.25em calc(15.6 * var(--u)); }
.nu-text--2 { grid-column: 1; grid-row: 2; align-self: end; width: calc(590 * var(--u)); min-width: 22em; margin: 0 0 -.25em; }

/* learning modules (desktop box: Figma 1520 x 617, starting at the hatch) */
.nu-modules { padding: calc(140 * var(--s)) var(--gutter) calc(112 * var(--s)); }
.nu-mods { margin-top: calc(50 * var(--s)); }
.nu-mods__box { position: relative; padding-top: calc(617 / 1520 * 100%); }
.nu-mods__box > * { position: absolute; height: auto; }
.nu-hatch { left: .26%; top: 0; width: 21.64%; }
.nu-mod { width: 34.74%; }
.nu-mod--environment { left: -.26%;  top: 7.02%; }
.nu-mod--business    { left: 33.36%; top: 7.02%; }
.nu-mod--vrio        { left: 66.91%; top: 7.02%; }
.nu-mod--corporate   { left: 16.05%; top: 51.1%; }
.nu-mod--market      { left: 50%;    top: 51.43%; }

/* promotional videos: grey band */
.nu-motion {
  background: #95adaf;
  color: #fff;
  padding: calc(82 * var(--s)) var(--gutter) calc(161 * var(--s));
}
.nu-motion__row { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(40 * var(--s)); }
.nu-motion__row--1 { margin-top: calc(80 * var(--s)); }
.nu-motion__row--2 { margin-top: calc(65 * var(--s)); }
.nu-motion__img { flex: none; width: calc(1014 / 1520 * 100%); height: auto; }
.nu-motion__text {
  max-width: calc(446 * var(--s));
  min-width: 18em;
  font-size: var(--fs-small);
  line-height: 1.22;
  letter-spacing: -0.02em;
}

/* podcast */
.nu-podcast { padding: calc(82 * var(--s)) var(--gutter) calc(62 * var(--s)); }
.nu-podcast__player { width: 103.55%; max-width: none; height: auto; margin: calc(30 * var(--s)) 0 0 -1.78%; }
.nu-pods {
  display: grid;
  grid-template-columns: repeat(5, 21.78%);
  justify-content: space-between;
  margin: calc(-35 * var(--s)) .26% 0;
}
.nu-pods img { width: 100%; height: auto; }

/* ---------- tablet ---------- */
@media (max-width: 1099px) {
  .nu-framework { padding-top: calc(90 * var(--s)); }
  .nu-swatches { padding: 0 calc(45 * var(--s)); }
  .nu-swatch { flex-direction: column; align-items: flex-start; gap: calc(18 * var(--s)); }
  .nu-swatch__chip { width: calc(44.4 * var(--s)); height: calc(97 * var(--s)); }
  .nu-swatch__text { font-size: max(10.5px, calc(14 * var(--s))); margin: 0; }
  .nu-title--framework { margin-top: calc(85 * var(--s)); }

  /* Figma tablet: 912 wide, the two photos side by side, text below */
  .nu-collage { --u: calc(100cqw / 912); grid-template-columns: calc(444.5 * var(--u)) 1fr; grid-template-rows: auto auto; row-gap: 0; margin-top: calc(40 * var(--s)); }
  .nu-pair--team { grid-row: 1; width: calc(437.4 * var(--u)); height: calc(435.6 * var(--u)); }
  .nu-frame--gold { left: calc(12.9 * var(--u)); width: calc(424.5 * var(--u)); height: calc(435.4 * var(--u)); }
  .nu-photo--team { top: calc(13.9 * var(--u)); width: calc(421.7 * var(--u)); }
  .nu-pair--student { grid-row: 1; width: calc(439 * var(--u)); height: calc(439.6 * var(--u)); margin-top: calc(65.8 * var(--u)); }
  .nu-frame--blue { left: calc(14.5 * var(--u)); top: calc(4.2 * var(--u)); width: calc(424.5 * var(--u)); height: calc(435.4 * var(--u)); }
  .nu-photo--student { width: calc(424.7 * var(--u)); }
  .nu-frame--gold { height: calc(435.4 * var(--u)); }
  .nu-text--1 { grid-column: 1 / -1; grid-row: 2; align-self: start; width: auto; min-width: 0; margin: calc(70 * var(--s)) 0 0; }
  .nu-text--2 { display: none; }       /* not in the tablet/phone designs */
  .nu-text { line-height: 1.3; }

  .nu-modules { padding: calc(75 * var(--s)) var(--gutter) calc(40 * var(--s)); }
  .nu-mods { margin-top: calc(5 * var(--s)); }
  .nu-mods__box { padding-top: calc(354.4 / 912 * 100%); }
  .nu-hatch { left: .25%; width: 21.43%; }
  .nu-mod { width: 33.63%; }
  .nu-mod--environment { left: -.33%;  top: 6.74%; }
  .nu-mod--business    { left: 33.2%;  top: 6.74%; }
  .nu-mod--vrio        { left: 66.73%; top: 6.74%; }
  .nu-mod--corporate   { left: 16.07%; top: 50.96%; }
  .nu-mod--market      { left: 49.7%;  top: 50.96%; }

  /* tablet uses the phone arrangement here (side by side the texts run far
     longer than the pictures): data picture, building blocks, then the text */
  .nu-motion { display: flex; flex-direction: column; padding: calc(60 * var(--s)) var(--gutter) calc(73 * var(--s)); }
  .nu-motion__row { display: contents; }
  .nu-motion__img { width: 100%; }
  .nu-motion__row--2 .nu-motion__img { order: 1; margin-top: calc(40 * var(--s)); }
  .nu-motion__row--1 .nu-motion__img { order: 2; margin-top: calc(25 * var(--s)); }
  .nu-motion__row--1 .nu-motion__text { order: 3; max-width: none; min-width: 0; margin-top: calc(30 * var(--s)); line-height: 1.3; }
  .nu-motion__row--2 .nu-motion__text { display: none; }

  .nu-podcast { padding: calc(80 * var(--s)) var(--gutter) calc(41 * var(--s)); }
  .nu-podcast__player { width: 106.5%; margin: calc(8 * var(--s)) 0 0 -2.2%; }
  .nu-pods {
    grid-template-columns: repeat(6, 1fr);
    justify-content: stretch;
    width: 106.5%;
    margin: calc(-21 * var(--s)) 0 0 -2.2%;
  }
  .nu-pods img { grid-column: span 2; }
  .nu-pods .nu-pod--advocate { grid-column: 2 / span 2; margin-top: calc(-33 * var(--s)); }
  .nu-pods .nu-pod--listening { grid-column: 4 / span 2; margin-top: calc(-33 * var(--s)); }
}

/* ---------- phone ---------- */
@media (max-width: 599px) {
  .nu-framework { padding-top: calc(45 * var(--s)); }
  .nu-swatches { display: grid; grid-template-columns: repeat(3, calc(141 * var(--s))); row-gap: calc(25 * var(--s)); padding: 0 0 0 calc(17 * var(--s)); }
  .nu-swatch { gap: calc(8.8 * var(--s)); }
  .nu-swatch__chip { width: calc(97 * var(--s)); height: calc(44.4 * var(--s)); }
  .nu-swatch__text { font-size: clamp(10.5px, calc(14.5 * var(--s)), 12px); }   /* stays smaller than the body text */
  .nu-title--framework { margin-top: calc(50 * var(--s)); }

  /* Figma phone: 438 wide, photos one under the other */
  .nu-collage { --u: calc(100cqw / 438); grid-template-columns: 1fr; row-gap: 0; }
  .nu-pair--team { grid-column: 1; grid-row: 1; width: calc(359 * var(--u)); height: calc(358 * var(--u)); }
  .nu-frame--gold { left: calc(11 * var(--u)); width: calc(348 * var(--u)); height: calc(358 * var(--u)); }
  .nu-photo--team { top: calc(11 * var(--u)); width: calc(347 * var(--u)); }
  .nu-pair--student { grid-column: 1; grid-row: 2; width: calc(361.4 * var(--u)); height: calc(361 * var(--u)); margin: calc(17 * var(--u)) 0 0 calc(64.6 * var(--u)); }
  .nu-frame--blue { left: calc(11.4 * var(--u)); top: calc(4 * var(--u)); width: calc(350 * var(--u)); height: calc(357 * var(--u)); }
  .nu-photo--student { width: calc(349.2 * var(--u)); }
  .nu-text--1 { grid-row: 3; margin-top: calc(50 * var(--s)); }
  .nu-text { font-size: calc(16 * var(--s)); line-height: 1.24; }

  .nu-modules { padding: calc(45 * var(--s)) var(--gutter) calc(24 * var(--s)); }
  .nu-mods { margin-top: calc(20 * var(--s)); }
  .nu-mods__box { padding-top: calc(770 / 438 * 100%); }
  .nu-hatch { left: .07%; width: 44.61%; }
  .nu-mod { width: 70.02%; }
  .nu-mod--environment { left: -2.97%; top: 2.6%; }
  .nu-mod--business    { left: 32.92%; top: 21.3%; }
  .nu-mod--vrio        { left: -2.97%; top: 40%; }
  .nu-mod--corporate   { left: 32.92%; top: 58.7%; }
  .nu-mod--market      { left: -2.97%; top: 77.4%; }

  /* phone: data picture first, then the building blocks and their text */
  .nu-motion { padding: calc(30 * var(--s)) var(--gutter) calc(54 * var(--s)); }
  .nu-motion__row--2 .nu-motion__img { margin-top: calc(25 * var(--s)); }
  .nu-motion__row--1 .nu-motion__img { margin-top: calc(16 * var(--s)); }
  .nu-motion__row--1 .nu-motion__text { margin-top: calc(18 * var(--s)); font-size: calc(16 * var(--s)); line-height: 1.24; }

  .nu-podcast { padding: calc(35 * var(--s)) var(--gutter) calc(38 * var(--s)); }
  .nu-podcast__player { width: 102.3%; margin: calc(10 * var(--s)) 0 0 -1.15%; }
  .nu-pods { grid-template-columns: repeat(4, 1fr); width: 105%; margin: calc(-6 * var(--s)) 0 0 -2.5%; }
  .nu-pods img { grid-column: span 2; }
  .nu-pods .nu-pod--resources { grid-column: 2 / span 2; margin-top: calc(-24 * var(--s)); }
  .nu-pods .nu-pod--advocate { grid-column: 1 / span 2; margin-top: calc(-24 * var(--s)); }
  .nu-pods .nu-pod--listening { grid-column: 3 / span 2; margin-top: calc(-24 * var(--s)); }
}

/* =========================================================
   AMAZON WEB SERVICES  (Figma: AWS Desktop; tablet and phone stack
   the stills). Same card, margins and titles as the other projects.
   ========================================================= */
.pj--dark { --card-blue: #171d25; --pj-tri: #173df0; --aws-gap: max(10px, calc(20 * var(--s))); }   /* same space across and down between stills */
.aws-sec { padding: calc(100 * var(--s)) var(--gutter) 0; }
.aws-sec--containers { padding-top: calc(21 * var(--s)); }   /* one title line higher than Figma 96 */
.aws-sec--dms { padding-top: calc(147 * var(--s)); }
.aws-title { max-width: 12em; }
.aws-sec--containers .aws-title { max-width: 7.6em; }   /* two lines, as in Figma */
.aws-title--dms { max-width: 9.6em; }
.aws-text {
  max-width: max(calc(680 * var(--s)), 24em);
  margin-top: calc(65 * var(--s));
  font-size: var(--fs-small);
  line-height: 1.24;
  letter-spacing: -0.02em;
}
.aws-grid { display: grid; margin-top: calc(85 * var(--s)); }
/* each clip is masked to its rounded rectangle, with a thin outline on top */
.aws-media { position: relative; margin: 0; overflow: hidden; isolation: isolate; }
.aws-vid { display: block; width: 100%; height: 100%; object-fit: cover; }
.aws-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(190, 198, 219, .85);
  border-radius: inherit;
  pointer-events: none;
}
.aws-grid--two { grid-template-columns: 1fr 1fr; gap: var(--aws-gap); }
.aws-grid--two .aws-media { aspect-ratio: 753 / 621; border-radius: 4% / 4.8%; }
/* DMS: tall clip on the left, two stacked on the right (Figma 877 | 621) */
.aws-grid--dms { grid-template-columns: 877fr 621fr; gap: var(--aws-gap); margin-top: calc(80 * var(--s)); }
.aws-dms-1 { grid-row: 1 / 3; border-radius: 4.1% / 3.3%; }
.aws-dms-2, .aws-dms-3 { aspect-ratio: 621 / 540; border-radius: 5.8% / 6.7%; }
/* dark section with four stills */
.aws-sec--dark {
  margin-top: calc(224 * var(--s));
  padding-top: calc(160 * var(--s));
  padding-bottom: calc(200 * var(--s));
  background: #171d25;
  color: #fff;
}
.aws-grid--four { grid-template-columns: 1fr 1fr; gap: var(--aws-gap); margin-top: calc(110 * var(--s)); }
.aws-grid--four .aws-media { aspect-ratio: 753 / 621; border-radius: 4% / 4.85%; }
.aws-sec--lakes { padding-top: calc(138 * var(--s)); padding-bottom: calc(46 * var(--s)); }
.aws-band { background: #171d25; padding-block: calc(113 * var(--s)); }

@media (max-width: 1099px) {
  .aws-sec--containers { padding-top: calc(70 * var(--s)); }
  .aws-sec, .aws-sec--dms { padding-top: calc(90 * var(--s)); }
  .aws-sec--dark { margin-top: calc(100 * var(--s)); padding-top: calc(80 * var(--s)); padding-bottom: calc(90 * var(--s)); }
  .aws-sec--lakes { padding-top: calc(80 * var(--s)); padding-bottom: calc(40 * var(--s)); }
  .aws-text { max-width: calc(700 * var(--s)); margin-top: calc(30 * var(--s)); line-height: 1.3; }
  .aws-grid, .aws-grid--dms, .aws-grid--four { margin-top: calc(45 * var(--s)); }
  .aws-band { padding-block: calc(53 * var(--s)); }
}
/* phone: every still in one column */
@media (max-width: 599px) {
  .aws-grid--two, .aws-grid--dms, .aws-grid--four { grid-template-columns: 1fr; }
  .aws-dms-1 { grid-row: auto; aspect-ratio: 968 / 1226; }
  .aws-text { font-size: calc(16 * var(--s)); line-height: 1.25; margin-top: calc(18 * var(--s)); }
  .aws-sec, .aws-sec--dms { padding-top: calc(60 * var(--s)); }
  .aws-sec--containers { padding-top: calc(45 * var(--s)); }
  .aws-sec--dark { margin-top: calc(60 * var(--s)); padding-top: calc(50 * var(--s)); padding-bottom: calc(50 * var(--s)); }
  .aws-sec--lakes { padding-top: calc(50 * var(--s)); padding-bottom: calc(30 * var(--s)); }
  .aws-grid, .aws-grid--dms, .aws-grid--four { margin-top: calc(28 * var(--s)); }
  .aws-band { padding-block: calc(29 * var(--s)); }
}

/* Northeastern: the header card in the same grey-teal as its portfolio card */
.pj--neu { --card-blue: #a5c1c4; }

/* Multivu: the header card in a soft purple */
.pj--mv { --card-blue: #a3a4c0; }
/* Northeastern: Northeastern-red corner triangles, as on the portfolio page */
.pj--neu { --pj-tri: #c83334; }

/* the frame round the header picture is white on every project page */
.pj-card__photo { border-color: #fff; }

/* =========================================================
   SCOUT
   ========================================================= */
.pj--scout { --card-blue: #2a527f; --pj-tri: #6ea482; }
.sc-text {
  margin-top: calc(25 * var(--s));
  font-size: var(--fs-small);
  line-height: 1.22;
  letter-spacing: -0.02em;
}
/* white section: title and text sit over the top left of the big graphic,
   which runs the full width from 187 (Figma) down to the dark section, so the
   section always ends exactly at the graphic's bottom edge (no white gap) */
.sc-insights {
  position: relative;
  overflow: hidden;
  background: #fff;
  color: var(--navy);
}
/* desktop: the graphic starts 187 (Figma) from the top, but never so high that
   its grey frame comes closer than a set gap to the end of the text
   (project.js works that out as --gm, since the text size has a minimum) */
.sc-graphic-wrap { display: block; margin-top: var(--gm, calc(187 * var(--s) - 430 * var(--s))); }
.sc-graphic { display: block; width: 100%; height: auto; }
.sc-insights__copy { position: relative; z-index: 1; padding: calc(21 * var(--s)) var(--gutter) 0; }   /* same start as every project page */
.sc-title { max-width: 12.4em; }
.sc-insights .sc-text { max-width: calc(683 * var(--s)); }
/* the phone copy of the graphic (and the shape the text wraps along) */
.sc-wrap, .sc-graphic-inline { display: none; }
/* dark section: title and text on the right, video, then six stills */
.sc-video {
  padding: calc(103 * var(--s)) calc(200 * var(--s)) calc(280 * var(--s));
  background: linear-gradient(to bottom, #0a1b3d, #081736);
  color: #fff;
}
.sc-video__head { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.sc-title--video { max-width: none; }
.sc-video .sc-text { max-width: calc(680 * var(--s)); }
.sc-player { margin-top: calc(122 * var(--s)); }
.sc-player .pj-player { border: 0; }   /* no outline round the Scout film */
.sc-stills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(18 * var(--s)) calc(25 * var(--s));
  margin-top: calc(182 * var(--s));
}
.sc-still { display: block; width: 100%; height: auto; aspect-ratio: 485 / 273; object-fit: cover; }

/* tablet and phone: one column. The graphic sits behind the text, which follows
   the artwork's diagonal edge (each line stops short of it), then the graphic
   runs on below. project.js moves the graphic down if the text needs more room. */
@media (max-width: 1099px) {
  .sc-insights { padding-top: 0; }
  .sc-insights__copy { position: relative; padding-top: calc(90 * var(--s)); }
  .sc-graphic-wrap { display: none; }
  .sc-insights .sc-text--wrap {
    --off: 6vw;                       /* the graphic starts a line or two into the text */
    --gh: calc(100vw * 2478 / 3840);  /* the graphic's height (full width) */
    --frame: .36;                     /* where the grey frame starts, as a share of that height */
    position: relative;
    z-index: 0;
    display: flow-root;
    max-width: 36em;              /* comfortable line length */
  }
  .sc-wrap {
    display: block;
    float: right;
    width: 100%;
    height: calc(var(--off) + var(--gh));
    shape-outside: polygon(100% 0, max(0px, calc(0.759 * 100vw - var(--gutter) - 6vw)) 0, max(0px, calc(0.759 * 100vw - var(--gutter) - 6vw)) calc(var(--off) + 0 * var(--gh)), max(0px, calc(0.75 * 100vw - var(--gutter) - 6vw)) calc(var(--off) + 0.18 * var(--gh)), max(0px, calc(0.719 * 100vw - var(--gutter) - 6vw)) calc(var(--off) + 0.2 * var(--gh)), max(0px, calc(0.687 * 100vw - var(--gutter) - 6vw)) calc(var(--off) + 0.22 * var(--gh)), max(0px, calc(0.687 * 100vw - var(--gutter) - 6vw)) calc(var(--off) + 0.235 * var(--gh)), max(0px, calc(0.472 * 100vw - var(--gutter) - 6vw)) calc(var(--off) + 0.24 * var(--gh)), max(0px, calc(0.458 * 100vw - var(--gutter) - 6vw)) calc(var(--off) + 0.34 * var(--gh)), max(0px, calc(0.458 * 100vw - var(--gutter) - 6vw)) calc(var(--off) + 0.355 * var(--gh)), max(0px, calc(0.079 * 100vw - var(--gutter) - 6vw)) calc(var(--off) + 0.36 * var(--gh)), max(0px, calc(0.079 * 100vw - var(--gutter) - 6vw)) calc(var(--off) + 0.6 * var(--gh)), max(0px, calc(0.054 * 100vw - var(--gutter) - 6vw)) calc(var(--off) + 0.62 * var(--gh)), 0px calc(var(--off) + 0.66 * var(--gh)), 0px calc(var(--off) + 1 * var(--gh)), 100% calc(var(--off) + var(--gh)));
  }
  .sc-graphic-inline {
    display: block;
    position: absolute;
    z-index: -1;
    top: var(--off);
    left: calc(var(--gutter) * -1);
    width: 100vw;
    max-width: none;
    height: auto;
  }
  .sc-graphic-inline img { display: block; width: 100%; max-width: none; height: auto; }
  .sc-video { padding: calc(80 * var(--s)) var(--gutter) calc(90 * var(--s)); }
  .sc-video__head { align-items: flex-start; text-align: left; }
  .sc-video .sc-text { max-width: calc(700 * var(--s)); }
  .sc-player { margin-top: calc(50 * var(--s)); }
  .sc-stills { grid-template-columns: 1fr 1fr; gap: calc(14 * var(--s)); margin-top: calc(40 * var(--s)); }
}
/* phone: its own crop of the artwork, so its own edge */
@media (max-width: 599px) {
  .sc-insights .sc-text--wrap {
    --off: 14vw;
    --gh: calc(100vw * 1116 / 1188);
    --frame: .555;
    max-width: none;
  }
  .sc-insights__copy { padding-top: calc(45 * var(--s)); }
  .sc-wrap { shape-outside: polygon(100% 0, 100% var(--off), max(0px, calc(0.983 * 100vw - var(--gutter) - 7vw)) calc(var(--off) + 0 * var(--gh)), max(0px, calc(0.906 * 100vw - var(--gutter) - 7vw)) calc(var(--off) + 0.06 * var(--gh)), max(0px, calc(0.906 * 100vw - var(--gutter) - 7vw)) calc(var(--off) + 0.075 * var(--gh)), max(0px, calc(0.742 * 100vw - var(--gutter) - 7vw)) calc(var(--off) + 0.08 * var(--gh)), max(0px, calc(0.725 * 100vw - var(--gutter) - 7vw)) calc(var(--off) + 0.2 * var(--gh)), max(0px, calc(0.284 * 100vw - var(--gutter) - 7vw)) calc(var(--off) + 0.54 * var(--gh)), max(0px, calc(0.284 * 100vw - var(--gutter) - 7vw)) calc(var(--off) + 0.555 * var(--gh)), max(0px, calc(0.079 * 100vw - var(--gutter) - 7vw)) calc(var(--off) + 0.56 * var(--gh)), 0px calc(var(--off) + 0.57 * var(--gh)), 0px calc(var(--off) + 1 * var(--gh)), 100% calc(var(--off) + var(--gh))); }
}

/* =========================================================
   RUCKUS NETWORKS
   ========================================================= */
.pj--ruckus { --card-blue: #87ba40; --pj-tri: #dc7f3b; }
.rk-sec { overflow-x: clip; padding: calc(21 * var(--s)) 0 calc(60 * var(--s)); background: #fff; color: var(--ink-dark); }
.rk-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--gutter); }
.rk-title { max-width: 14em; }
.rk-logo { display: block; flex: none; width: clamp(110px, calc(300 * var(--s)), 300px); height: auto; margin-block: calc(-10.4 * var(--s)); }
.rk-text {
  max-width: calc(900 * var(--s));
  margin-top: calc(30 * var(--s));
  font-size: var(--fs-small);
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.rk-sec > .rk-text { padding: 0 var(--gutter); max-width: calc(900 * var(--s) + 2 * var(--gutter)); }
.rk-head + .rk-text { margin-top: calc(80 * var(--s)); }
/* the collage: each picture placed as in the design (a 546 x 730 grid) */
.rk-collage { position: relative; aspect-ratio: 1197 / 1788.2; margin-top: calc(70 * var(--s)); }
.rk-c { position: absolute; display: block; height: auto; overflow: visible; max-width: none; }
/* placed as in the original design: the frames of the feature list and
   ChannelFly line up with the text's left edge, the bike frame ends on the
   right margin, and the city runs off the right edge of the screen */
.rk-features { left: -0.144%; top: 0.295%;  width: 36.862%; }
.rk-bike     { left: 63.348%; top: -0.096%; width: 36.843%; }
.rk-dog      { left: 48.956%; top: 13.421%; width: 16.708%; z-index: 1; }
.rk-channel  { left: -1.713%; top: 28.423%; width: 43.799%; }
.rk-mesh     { left: 44.816%; top: 26.699%; width: 48.433%; }
.rk-city     { left: -4.871%; top: 48.707%; width: 119.716%; }
@media (min-width: 600px) and (max-width: 1099px) { .rk-collage { margin-left: var(--gutter); margin-right: var(--gutter); } }
/* lavender band: title and text on the right, then the film */
.rk-video { padding: calc(110 * var(--s)) calc(140 * var(--s)) calc(150 * var(--s)); background: #7690d1; color: #fff; }
.rk-video__head { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.rk-video .rk-text { max-width: calc(900 * var(--s)); }
.rk-player { margin-top: calc(80 * var(--s)); }
.rk-player .pj-player { border: 0; }

/* tablet: the same collage, a little more room around the text */
@media (max-width: 1099px) {
  .rk-video { padding: calc(80 * var(--s)) var(--gutter) calc(90 * var(--s)); }
  .rk-video__head { align-items: flex-start; text-align: left; }
  .rk-player { margin-top: calc(50 * var(--s)); }
}
/* tablet and phone: no Ruckus logo beside the title */
@media (max-width: 1099px) { .rk-logo { display: none; } }
.rk-strip { display: contents; }   /* only groups the pictures; no layout of its own */
/* phone: one column, in the order of the phone design (bike and dog,
   SmartMesh, the feature list, then the city); ChannelFly is left out */
@media (max-width: 599px) {
  .rk-head { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .rk-collage { aspect-ratio: auto; display: flex; flex-direction: column; gap: 44px; padding: 0 var(--gutter); }
  .rk-c { position: static; width: 100% !important; }
  /* bike and dog arranged exactly as on desktop: the bike on the right, the
     dog square overlapping its left edge from just above halfway down */
  .rk-bike { order: 1; width: 74.4% !important; align-self: flex-end; }
  .rk-dog { order: 1; width: 30% !important; margin-top: calc(-31.6% - 44px); margin-bottom: 4.5%; }
  .rk-mesh { order: 2; } .rk-features { order: 3; width: 80% !important; } .rk-city { order: 4; }
  .rk-channel { display: none; }
}
/* Ruckus, desktop: 200px margins each side at 1920 (scaling with the width) */
@media (min-width: 1100px) {
  .rk-sec { padding-left: calc(200 * var(--s)); padding-right: calc(200 * var(--s)); }
  .rk-head, .rk-sec > .rk-text { padding-left: 0; padding-right: 0; }
  .rk-video { padding-left: calc(200 * var(--s)); padding-right: calc(200 * var(--s)); }
}
/* Ruckus, tablet and phone: start at the same place as the other project pages */
@media (min-width: 600px) and (max-width: 1099px) { #access-points { padding-top: calc(90 * var(--s)); } }
@media (max-width: 599px) { #access-points { padding-top: calc(45 * var(--s)); } }
@media (max-width: 1099px) { .rk-head + .rk-text { margin-top: calc(45 * var(--s)); } }

/* =========================================================
   BOMBORA
   ========================================================= */
.pj--bombora { --card-blue: #3f8eba; --pj-tri: #3f8eba; }   /* the blue the gradient band starts with */
/* palette on white, starting where every project page's content starts */
.bm-palette { padding: calc(21 * var(--s)) var(--gutter) calc(67 * var(--s)); background: #fff; color: var(--ink-dark); }
/* one long blue band: Bombora's gradient with its dotted curves, from the
   top (it is taller than the band, so it is cut at the bottom) */
.bm-band {
  position: relative;
  background: #13334b url("../assets/img/bombora/background.webp") center top / 100% auto no-repeat;
  color: #fff;
  overflow-x: clip;
  padding-bottom: calc(60 * var(--s));
}
.bm-sec { padding: 0 var(--gutter); }
.bm-sec:first-child { padding-top: calc(160 * var(--s)); }
.bm-title { max-width: 14em; }
.bm-text { max-width: calc(860 * var(--s)); margin: calc(25 * var(--s)) 0 0; font-size: var(--fs-small); line-height: 1.22; letter-spacing: -0.02em; }
.bm-sec--right .bm-title, .bm-sec--right .bm-text { margin-left: auto; text-align: right; }
/* the pictures, placed as in the design (desktop sizes in 1920 px) */
.bm-art { position: relative; }
.bm-a { position: absolute; display: block; height: auto; max-width: none; }
.bm-art--ads { height: calc(1096 * var(--s)); margin-top: calc(100 * var(--s)); }
.bm-social-1 { left: calc(29 * var(--s)); top: 0; width: calc(503 * var(--s)); }
.bm-social-2 { left: calc(691 * var(--s)); top: calc(80 * var(--s)); width: calc(780 * var(--s)); }
.bm-social-3 { left: calc(15 * var(--s)); top: calc(617 * var(--s)); width: calc(1266 * var(--s)); }
.bm-sec--right + .bm-sec--right { margin-top: calc(172 * var(--s)); }
.bm-art--assets { height: calc(823 * var(--s)); margin-top: calc(150 * var(--s)); }
.bm-icon-large { left: calc(-6 * var(--s)); top: 0; width: calc(611 * var(--s)); }
.bm-icons { left: calc(523 * var(--s)); top: calc(73 * var(--s)); width: calc(991 * var(--s)); }
.bm-sec--video { margin-top: calc(77 * var(--s)); }
.bm-player { width: calc(1241 * var(--s)); margin: calc(110 * var(--s)) auto 0; }
.bm-player .pj-player { border: 0; }
.bm-quote {
  margin: calc(88 * var(--s)) 0 0;
  font-family: "Trebuchet MS", "Poppins", sans-serif;
  font-weight: 700;
  font-size: calc(65 * var(--s));
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-align: center;
}
.bm-quote span { color: #de8439; }
/* closing scene: the sunrise over the reef, the logo in the sky */
.bm-beach { position: relative; background: #f7fbe9; }
.bm-beach__art { display: block; width: 100%; height: auto; }
.bm-beach__logo { position: absolute; left: 50%; top: calc(120 / 1128 * 100%); translate: -50% 0; width: calc(391 / 1920 * 100%); height: auto; }

/* tablet and phone: one picture after another */
@media (max-width: 1099px) {
  .bm-sec:first-child { padding-top: calc(90 * var(--s)); }
  .bm-sec--right .bm-title, .bm-sec--right .bm-text { margin-left: 0; text-align: left; }
  .bm-text { max-width: none; }
  .bm-art { height: auto !important; display: flex; flex-direction: column; gap: calc(40 * var(--s)); margin-top: calc(50 * var(--s)) !important; }
  .bm-a { position: static; width: 100% !important; }
  .bm-social-1 { width: 60% !important; }
  .bm-icon-large { width: 70% !important; }
  .bm-sec--right + .bm-sec--right, .bm-sec--video { margin-top: calc(90 * var(--s)); }
  .bm-player { width: 100%; margin-top: calc(50 * var(--s)); }
  .bm-quote { font-size: calc(36 * var(--s)); margin-top: calc(60 * var(--s)); }
}
@media (max-width: 599px) {
  .bm-sec:first-child { padding-top: calc(45 * var(--s)); }
  .bm-social-1 { width: 80% !important; }
  .bm-icon-large { width: 90% !important; }
  .bm-quote { font-size: calc(26 * var(--s)); }
}
@media (max-width: 599px) { .bm-br { display: none; } }
/* tablet and phone: the two social ads share one line (widths set so both
   are the same height), the display ads full width below */
@media (max-width: 1099px) {
  .bm-art--ads { display: grid; grid-template-columns: 1fr 1.81fr; column-gap: calc(24 * var(--s)); row-gap: calc(40 * var(--s)); align-items: center; }
  .bm-art--ads .bm-a { width: 100% !important; }
  .bm-social-3 { grid-column: 1 / -1; }
}
/* tablet and phone: the asset illustrations 25% smaller (the large one stays
   on the left, the group of five sits on the right, as on desktop) */
@media (max-width: 1099px) {
  .bm-icon-large { width: 52.5% !important; }
  .bm-icons { width: 75% !important; align-self: flex-end; }
}
@media (max-width: 599px) {
  .bm-icon-large { width: 67.5% !important; }
}
/* the five icons tuck up beside the large illustration (their top left is empty) */
@media (max-width: 1099px) { .bm-icons { margin-top: -18%; } }
@media (max-width: 599px) { .bm-icons { margin-top: -18%; } }
/* tablet and phone: a little more room between the text and the pictures */
@media (max-width: 1099px) { .bm-art { margin-top: calc(90 * var(--s)) !important; } }
/* The band's white lines (same background at every size) run down the left
   edge to about 0.8 x the screen width, then sweep across to the right
   edge, ending about 1.35 x the screen width from the top. Titles and texts
   are placed clear of them; pictures may sit over them. */
.bm-head { display: flex; flex-direction: column; }
/* desktop: "Assets Design" sits just above the sweep (its last line ends at
   0.955 x the width), its pictures start right after it */
@media (min-width: 1600px) {
  .bm-sec:first-child { min-height: calc(1.012 * 100vw); }
  .bm-sec--assets { margin-top: 0 !important; }
  .bm-sec--assets .bm-head { position: absolute; right: var(--gutter); top: calc(0.955 * 100vw); translate: 0 -100%; width: calc(1000 * var(--s)); }
  .bm-art--assets { margin-top: 0; }
}
/* tablet: titles and texts right-aligned as on desktop, clear of the lines
   down the left edge; "Assets Design" starts below the sweep */
@media (min-width: 600px) and (max-width: 1099px) {
  .bm-sec--right .bm-title, .bm-sec--right .bm-text { margin-left: auto; text-align: right; }
  .bm-sec--right .bm-text { max-width: 72%; }
}
/* tablet and smaller desktops (where the text runs taller): "Assets Design"
   starts below the sweep */
@media (min-width: 600px) and (max-width: 1599px) {
  .bm-sec:first-child { min-height: calc(1.14 * 100vw); }
  .bm-sec--assets { margin-top: 0 !important; }
}
@media (min-width: 1100px) and (max-width: 1599px) {
  .bm-sec:first-child { min-height: calc(1.14 * 100vw); }
}
/* phone: Bombora's mobile background. Its lines run down the left edge,
   then sweep across: titles and texts keep clear of the left edge, and the
   page script slides the background so the sweep falls between the
   "Assets Design" text and the "Explainer Video" title, behind the
   illustrations. Order of text and pictures as on every other size. */
@media (max-width: 599px) {
  .bm-band {
    background:
      url("../assets/img/bombora/background-mobile.webp") left var(--bm-off, 0px) / 125% auto no-repeat,
      linear-gradient(#3f8eba, #3f8eba) center top / 100% max(0px, var(--bm-off, 0px)) no-repeat,
      #13334b;
  }
  .bm-sec--assets .bm-head { padding-left: 20%; text-align: right; }
  .bm-sec--video .bm-head { max-width: 62%; }   /* runs beside the lines' sweep */
  .bm-sec--video { margin-top: var(--bm-video-gap, calc(90 * var(--s))) !important; }
}
/* where "Assets Design" sits below the sweep (tablet and smaller desktops),
   it and its text are left-aligned */
@media (min-width: 600px) and (max-width: 1599px) {
  .bm-sec--assets .bm-title, .bm-sec--assets .bm-text { margin-left: 0; text-align: left; }
  .bm-sec--assets .bm-text { max-width: calc(860 * var(--s)); }
}
@media (min-width: 600px) and (max-width: 1099px) { .bm-sec--assets .bm-text { max-width: 72%; } }
/* swatch labels: always the same proportion to the body text (15 : 17, as on
   desktop), at every size */
.pj .nu-swatch__text { font-size: calc(var(--fs-small) * 15 / 17) !important; }
/* phone: the swatch labels shrink with the screen so the three columns never
   run into each other */
@media (max-width: 599px) {
  .pj .nu-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3vw; }
  .pj .nu-swatch__text { font-size: min(calc(var(--fs-small) * 15 / 17), 2.65vw) !important; }
}
/* phone: "Assets Design" and its text right-aligned */
@media (max-width: 599px) {
  .bm-sec--assets .bm-title, .bm-sec--assets .bm-text { text-align: right; }
}
/* tablet and smaller desktop: always clear space between the display ads and
   "Assets Design" */
@media (min-width: 600px) and (max-width: 1599px) {
  .bm-sec:first-child { padding-bottom: calc(110 * var(--s)); }
}
@media (max-width: 599px) { .bm-sec--assets .bm-title { margin-left: auto; } }
/* tablet: the five swatch labels shrink with the screen so the columns keep
   clear space between them */
@media (min-width: 600px) and (max-width: 1099px) {
  .pj .nu-swatch__text { font-size: min(calc(var(--fs-small) * 15 / 17), 1.45vw) !important; }
}

/* =========================================================
   SCALPEL
   ========================================================= */
.pj--scalpel { --card-blue: #0b0d11; --pj-tri: #aebad4; }
/* Multivu: a white card with navy (#00001e) text and triangles and a blue frame */
.pj--mv { --card-blue: #fbfbfb; --pj-tri: #00001e; }
.pj--mv .pj-card__inner { color: #00001e; }
.pj--mv .pj-card__photo { border-color: #4c9dee; }
/* sections: dark bands with the white "Problem" band between them */
.pj--scalpel { --sp-dark: #0b0d11; }
.sp-sec { background: var(--sp-dark); color: #fff; padding: 0 var(--gutter); }
.sp-sec--ui { padding-top: calc(21 * var(--s)); }
.sp-head { max-width: calc(900 * var(--s)); }
.sp-head--right { margin-left: auto; text-align: right; }
.sp-head--right .sp-text { margin-left: auto; }
.sp-title { max-width: 16em; }
.sp-text { max-width: calc(860 * var(--s)); margin: calc(25 * var(--s)) 0 0; font-size: var(--fs-small); line-height: 1.22; letter-spacing: -0.02em; }
/* the two tablets, the landscape one in front, overlapping (desktop sizes in 1920 px) */
.sp-devices { position: relative; height: calc(990 * var(--s)); margin-top: calc(90 * var(--s)); }
.sp-dev { position: absolute; display: block; height: auto; max-width: none; }
.sp-dev--product { left: 0; top: 0; width: calc(675 * var(--s)); }
.sp-dev--orders { right: 0; top: calc(260 * var(--s)); width: calc(930 * var(--s)); }
.sp-sec--deck { padding-top: calc(160 * var(--s)); padding-bottom: 0; }
.sp-strip { display: block; width: calc(100% + 2 * var(--gutter)); max-width: none; height: auto; margin: calc(100 * var(--s)) calc(-1 * var(--gutter)) 0; }
.sp-strip-phone { display: none; }
/* white band: icons, title and lede on the left, the photo running off the right edge */
.sp-problem { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(60 * var(--s)); background: #fff; color: #183251; padding: calc(60 * var(--s)) 0 calc(80 * var(--s)); }
.sp-problem__copy { padding-left: var(--gutter); }
.sp-problem__icons { display: block; width: calc(420 * var(--s)); height: auto; margin-left: calc(-1 * var(--gutter)); }
.sp-problem__title { margin-top: calc(130 * var(--s)); color: #183251; }
.sp-problem__lede { max-width: 15em; margin: calc(25 * var(--s)) 0 0; font-size: var(--fs-card); line-height: 1.2; letter-spacing: -0.02em; color: #2c5b98; }
.sp-problem__photo { flex: none; display: block; width: calc(720 * var(--s)); height: auto; }
.sp-sec--fac { padding-top: calc(150 * var(--s)); }
.sp-fac { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(24 * var(--s)); margin: calc(90 * var(--s)) 0 0; padding: 0; list-style: none; }
.sp-fac img { display: block; width: 100%; height: auto; }
.sp-sec--focus { padding-top: calc(200 * var(--s)); }
.sp-title--focus { max-width: 13em; }
.sp-focus { display: block; width: calc(1586 * var(--s)); max-width: none; height: auto; margin: calc(80 * var(--s)) 0 0 calc(-1 * var(--gutter)); }
.sp-sec--road { padding-top: calc(170 * var(--s)); padding-bottom: calc(200 * var(--s)); }
.sp-road__head { display: flex; align-items: center; justify-content: space-between; }
.sp-road__next { display: none; padding: 0; border: 0; background: none; cursor: pointer; }
.sp-road__next img { display: block; width: 44px; height: 44px; }
.sp-road { margin: calc(90 * var(--s)) calc(-1 * var(--gutter)) 0; }
.sp-road__svg { display: block; width: 100%; height: auto; }

/* tablet */
@media (max-width: 1099px) {
  .sp-sec--ui { padding-top: calc(90 * var(--s)); }
  .sp-head { max-width: none; }
  .sp-text { max-width: none; }
  .sp-devices { height: calc(0.86 * (100vw - 2 * var(--gutter))); margin-top: calc(60 * var(--s)); }
  .sp-dev--product { width: 44%; }
  .sp-dev--orders { width: 61%; top: 17%; }
  .sp-sec--deck, .sp-sec--fac, .sp-sec--focus, .sp-sec--road { padding-top: calc(110 * var(--s)); }
  .sp-strip { margin-top: calc(60 * var(--s)); }
  .sp-problem__icons { width: calc(330 * var(--s)); }
  .sp-problem__title { margin-top: calc(80 * var(--s)); }
  .sp-problem__photo { width: 42%; }
  .sp-fac { gap: calc(16 * var(--s)); margin-top: calc(50 * var(--s)); }
  .sp-focus { width: calc(100% + var(--gutter)); margin-top: calc(50 * var(--s)); }
  .sp-road { margin-top: calc(60 * var(--s)); }
  .sp-sec--road { padding-bottom: calc(120 * var(--s)); }
}
/* phone: one column; the deck strip stands down the left edge beside its text;
   the roadmap scrolls sideways with the arrow */
@media (max-width: 599px) {
  .sp-sec--ui { padding-top: calc(45 * var(--s)); }
  .sp-head--right { text-align: left; }
  .sp-head--right .sp-text { margin-left: 0; }
  .sp-devices { height: auto; display: flex; flex-direction: column; margin-top: calc(40 * var(--s)); }
  .sp-dev { position: static; }
  .sp-dev--product { width: 66%; align-self: center; }
  .sp-dev--orders { width: 92%; margin-top: -14%; }
  .sp-sec--deck { display: grid; grid-template-columns: 26% 1fr; column-gap: calc(24 * var(--s)); padding-left: 0; }
  .sp-sec--deck .sp-head { grid-column: 2; grid-row: 1; align-self: center; }
  .sp-strip { display: none; }
  .sp-strip-phone { display: block; grid-column: 1; grid-row: 1; width: 100%; height: auto; }
  .sp-problem { flex-direction: column; align-items: stretch; padding-bottom: calc(50 * var(--s)); }
  .sp-problem__copy { padding-right: var(--gutter); }
  .sp-problem__icons { width: 60%; }
  .sp-problem__title { margin-top: calc(50 * var(--s)); }
  .sp-problem__photo { width: calc(100% - var(--gutter)); margin-left: var(--gutter); }
  .sp-fac { grid-template-columns: repeat(2, 1fr); gap: calc(14 * var(--s)); }
  .sp-fac--prim { order: 1; } .sp-fac--nurs { order: 2; } .sp-fac--hosp { order: 3; } .sp-fac--dent { order: 4; }
  .sp-road__next { display: block; }
  .sp-road { overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
  .sp-road::-webkit-scrollbar { display: none; }
  .sp-road__svg { width: 300vw; max-width: none; }
}
.pj.pj--scalpel { background: #0b0d11; }   /* the dark runs right up to the light blue */
/* the pharmacist photo runs right off the edge of the screen: no margin shows beside its stripe */
.sp-problem { overflow-x: clip; }
.sp-problem__photo { translate: 4% 0; }
/* the pharmacist photo's lavender stripe runs the full height of the white band */
.sp-problem { position: relative; --pw: calc(720 * var(--s)); }
.sp-problem__photo { width: var(--pw); }
.sp-problem::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: calc(-0.035 * var(--pw));
  width: calc(0.097 * var(--pw));
  background: #788cb6;
  opacity: .6;
  mix-blend-mode: multiply;
  pointer-events: none;
}
@media (max-width: 1099px) { .sp-problem { --pw: 42vw; } }
@media (max-width: 599px) { .sp-problem { --pw: calc(100vw - var(--gutter)); } .sp-problem__photo { width: var(--pw); } }
/* tablet: Platform UI title and text right-aligned, the text over three lines */
@media (min-width: 600px) and (max-width: 1099px) {
  .sp-head--right .sp-title { margin-left: auto; }
  .sp-head--right .sp-text { max-width: 74%; }
}
/* the upright tablet sets the height of the tablets' area (no empty space below) */
.sp-dev--product { position: relative; }
.sp-dev--product img { display: block; width: 100%; height: auto; }
.sp-devices { height: auto !important; padding-bottom: calc(40 * var(--s)); }
@media (max-width: 1099px) { .sp-devices { padding-bottom: 4%; } }
@media (max-width: 599px) { .sp-devices { padding-bottom: 0; } }
/* phone, as in the mobile design */
@media (max-width: 599px) {
  .sp-dev--product { width: 76%; align-self: flex-start; margin-left: 8%; }
  .sp-dev--orders { width: 82%; margin-top: -8%; margin-left: 3%; }
  .sp-sec--deck { grid-template-columns: 34% 1fr; }
  .sp-problem__icons { width: 63%; }
  .sp-problem { --pw: calc(100vw - 18%); }
  .sp-problem__photo { margin-left: 18%; width: var(--pw); }
}
@media (max-width: 599px) { .sp-sec--deck { padding-top: calc(60 * var(--s)); grid-template-columns: 30% 1fr; } }
/* phone: back and forward arrows for the roadmap */
.sp-road__nav { display: none; gap: 10px; }
.sp-road__btn { padding: 0; border: 0; background: none; cursor: pointer; }
.sp-road__btn img { display: block; width: 44px; height: 44px; }
.sp-road__prev img { transform: scaleX(-1); }
@media (max-width: 599px) { .sp-road__nav { display: flex; } }
/* phone: the deck strip always runs the full height of its section, down to the white band */
@media (max-width: 599px) {
  .sp-sec--deck { padding-bottom: 0; align-items: stretch; }
  .sp-strip-phone { height: 100%; min-height: 100%; object-fit: cover; object-position: left top; align-self: stretch; }
}
.sp-problem__lede { color: #183251; }
/* phone: the deck title starts level with the top of the "Loss" button */
@media (max-width: 599px) { .sp-sec--deck .sp-head { align-self: start; margin-top: 12.5vw; } }
/* phone: a thin white frame around the presentation deck section, as in the design */
@media (max-width: 599px) {
  .sp-sec--deck { margin: calc(40 * var(--s)) 6px 0; border: 1.5px solid #fff; padding-right: calc(var(--gutter) - 6px); padding-bottom: 0; }
}
@media (max-width: 599px) {
  .sp-sec--deck { padding-top: 0; }
  .sp-sec--deck .sp-head { padding-bottom: 24px; }
  .sp-sec--deck .sp-text { font-size: 12.5px; line-height: 1.3; }
}
/* phone deck section, measured from the mobile design (shares of the screen width) */
@media (max-width: 599px) {
  .sp-sec--deck { grid-template-columns: 34.5% 1fr; column-gap: 10.5%; padding-right: 9.5%; align-items: start; }
  .sp-strip-phone { height: auto !important; min-height: 0 !important; object-fit: initial; align-self: start; }
  .sp-sec--deck .sp-head { margin-top: 14.7vw; padding-bottom: 0; }
  .sp-sec--deck .sp-title { font-size: 4.33vw; line-height: 1.15; }
  .sp-sec--deck .sp-text { font-size: 2.69vw; line-height: 1.55; margin-top: 4vw; }
}
/* phone deck: only top and bottom white lines, running the full screen width */
@media (max-width: 599px) {
  .sp-sec--deck { margin-left: 0; margin-right: 0; border-left: 0; border-right: 0; padding-right: calc(9.5% + 6px); }
}
.sp-problem__title { margin-left: -0.03em; }   /* the T sits a little in from the P of the line below */
.sp-strip { margin-bottom: -1px; position: relative; }   /* no hairline of the dark band below the strip */

/* =========================================================
   DEEP INTENT
   ========================================================= */
.pj--deepintent { --card-blue: #112435; --pj-tri: #ed7930; }
.pj--deepintent { --dp-navy: linear-gradient(90deg, #19344f, #162f48 14%, #102233 66%, #0e1e2c); --dp-orange: #ed7930; }
.pj--deepintent .pj-hero { margin-bottom: 0; }
.dp-text { max-width: calc(860 * var(--s)); margin: calc(25 * var(--s)) 0 0; font-size: var(--fs-small); line-height: 1.22; letter-spacing: -0.02em; }
.dp-title { max-width: 12em; }
.dp-head--right { margin-left: auto; text-align: right; max-width: calc(900 * var(--s)); }
.dp-head--right .dp-title, .dp-head--right .dp-text { margin-left: auto; }
/* dark band, the nurse photo against the right edge (desktop sizes in 1920 px) */
.dp-s1 { position: relative; min-height: calc(910 * var(--s)); padding: calc(115 * var(--s)) var(--gutter) 0; background: var(--dp-navy); color: #fff; overflow: hidden; }
.dp-s1 .dp-head { position: relative; z-index: 1; max-width: calc(860 * var(--s)); }
.dp-nurse { position: absolute; right: 0; top: 0; width: calc(633 * var(--s)); }
.dp-nurse img { display: block; width: 100%; height: auto; }
/* orange band, the video stills running above and below it */
.dp-video { position: relative; z-index: 2; min-height: calc(423 * var(--s)); background: var(--dp-orange); color: #fff; }
.dp-grid { position: absolute; left: 0; top: calc(-119 * var(--s)); width: calc(1177 * var(--s)); height: auto; max-width: none; }
.dp-head--video { margin-left: calc(1232 * var(--s)); padding: calc(105 * var(--s)) var(--gutter) calc(60 * var(--s)) 0; }
.dp-head--video .dp-text { max-width: calc(560 * var(--s)); }
/* the clinic photo behind the title; the cards run down onto white */
.dp-clinic { position: relative; isolation: isolate; padding: calc(300 * var(--s)) var(--gutter) 0; background: #1d3f73 url("../assets/img/deepintent/clinic.webp") center top / 100% auto no-repeat; color: #fff; }
.dp-cards { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(37 * var(--s)); row-gap: calc(20 * var(--s)); margin-top: calc(-25 * var(--s)); }
.dp-cards::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: calc(337 * var(--s)); bottom: calc(-200 * var(--s)); background: #fff; }
.dp-cards img { display: block; width: 100%; height: auto; }
.dp-cards img:nth-child(even) { margin-top: calc(88 * var(--s)); margin-bottom: calc(-88 * var(--s)); }
/* numbers on white, the navy starting halfway down them; then the toolkit */
.dp-tool { --dp-cut: calc(368 * var(--s)); padding: calc(200 * var(--s)) var(--gutter) calc(130 * var(--s)); background: linear-gradient(#fff, #fff) top / 100% calc(200 * var(--s) + var(--dp-cut)) no-repeat, var(--dp-navy); color: #fff; }
.dp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(37 * var(--s)); margin: 0 auto; padding: 0; list-style: none; max-width: calc(1600 * var(--s)); }
.dp-stats img { display: block; width: 100%; height: auto; }
.dp-tool__row { display: flex; align-items: center; justify-content: space-between; gap: calc(80 * var(--s)); margin-top: calc(170 * var(--s)); }
.dp-tool__row .dp-head { flex: 1 1 0; }
.dp-reach { flex: none; display: block; width: calc(962 * var(--s)); height: auto; margin-right: calc(-119 * var(--s)); }
.dp-tagline { padding: calc(100 * var(--s)) var(--gutter) calc(120 * var(--s)); background: #fff; text-align: center; }
.dp-tagline img { display: inline-block; width: max(280px, calc(790 * var(--s))); height: auto; }

/* tablet: the same layout, scaled; text a little wider */
@media (max-width: 1099px) {
  .dp-s1 { padding-top: calc(90 * var(--s)); min-height: calc(780 * var(--s)); }
  .dp-s1 .dp-head { max-width: 55%; }
  .dp-text { max-width: none; }
  .dp-nurse { width: 42%; }
  .dp-grid { width: 58%; top: calc(-90 * var(--s)); }
  .dp-head--video { margin-left: 61%; padding-top: calc(60 * var(--s)); }
  .dp-video { min-height: calc(400 * var(--s)); }
  .dp-clinic { padding-top: calc(200 * var(--s)); background-size: cover; }
  .dp-head--right { max-width: 80%; }
  .dp-cards::before { top: 40%; }
  .dp-tool__row { margin-top: calc(110 * var(--s)); }
  .dp-reach { width: 55%; margin-right: 0; }
}
/* phone: one column */
@media (max-width: 599px) {
  .dp-s1 { min-height: 0; padding: calc(45 * var(--s)) var(--gutter) 0; display: flex; flex-direction: column; }
  .dp-s1 .dp-head { max-width: none; }
  .dp-nurse { position: static; align-self: flex-end; width: 70%; margin: calc(20 * var(--s)) calc(-1 * var(--gutter)) 0 0; }
  .dp-video { min-height: 0; padding-bottom: calc(40 * var(--s)); }
  .dp-grid { position: relative; top: 0; width: 100%; margin-top: calc(-60 * var(--s)); }
  .dp-head--video { margin: 0; padding: calc(30 * var(--s)) var(--gutter) 0; }
  .dp-head--video .dp-text { max-width: none; }
  .dp-clinic { padding-top: calc(60 * var(--s)); background-size: auto 60%; }
  .dp-head--right { max-width: none; text-align: left; }
  .dp-cards { grid-template-columns: 1fr; margin-top: calc(40 * var(--s)); }
  .dp-cards img:nth-child(even) { margin: 0; }
  .dp-cards::before { top: 20%; bottom: calc(-100 * var(--s)); }
  .dp-tool { padding-top: calc(100 * var(--s)); --dp-cut: calc(150 * var(--s)); background: linear-gradient(#fff, #fff) top / 100% calc(100 * var(--s) + var(--dp-cut)) no-repeat, var(--dp-navy); }
  .dp-stats { gap: calc(10 * var(--s)); }
  .dp-tool__row { flex-direction: column; align-items: stretch; margin-top: calc(60 * var(--s)); }
  .dp-reach { width: 100%; }
}
@media (max-width: 599px) { .dp-head--right .dp-title, .dp-head--right .dp-text { margin-left: 0; } }
.dp-nurse { top: auto; bottom: 0; }   /* the photo always sits right on the orange band */
@media (max-width: 599px) { .dp-nurse { margin-bottom: 0; } }
/* desktop: the dark band is exactly as tall as the nurse photo (her head on
   its top edge), and the orange band keeps the design's height with the
   video stills running equally above and below it */
@media (min-width: 1100px) {
  .dp-s1 { min-height: 0; height: calc(910 * var(--s)); }
  .dp-nurse { top: 0; bottom: auto; }
  .dp-video { min-height: 0; height: calc(423 * var(--s)); display: flex; align-items: center; }
  .dp-head--video { padding: 0 var(--gutter) 0 0; }
  .dp-head--video .dp-text { font-size: clamp(13px, calc(17 * var(--s)), 17px); }
}
.dp-nurse img { margin-bottom: -2px; }   /* no hairline between the photo and the orange */
@media (min-width: 1100px) { .dp-grid { top: 50%; translate: 0 -50%; } }
/* "Clinically Driven Impact" starts the usual section distance below the video stills */
.dp-clinic { padding-top: calc(230 * var(--s)); }
.dp-clinic .dp-head--right { max-width: calc(860 * var(--s)); }
@media (max-width: 1099px) { .dp-clinic { padding-top: calc(190 * var(--s)); } .dp-clinic .dp-head--right { max-width: 80%; } }
@media (max-width: 599px) { .dp-clinic { padding-top: calc(60 * var(--s)); } .dp-clinic .dp-head--right { max-width: none; } }
.dp-cards { margin-top: calc(60 * var(--s)); }
@media (max-width: 1099px) { .dp-clinic { padding-top: calc(120 * var(--s)); } .dp-cards { margin-top: calc(50 * var(--s)); } }
@media (max-width: 599px) { .dp-clinic { padding-top: calc(60 * var(--s)); } }
/* the dark band is always as tall as the nurse photo, her cap on its top edge
   (if the text ever runs taller, the photo grows with the band) */
.dp-s1 { padding-top: calc(160 * var(--s)); }
@media (max-width: 1099px) {
  .dp-s1 { padding-top: calc(120 * var(--s)); padding-bottom: calc(60 * var(--s)); min-height: calc(42vw * 2018 / 1400); height: auto; }
  .dp-nurse { top: 0; bottom: 0; width: 42%; }
  .dp-nurse img { width: 100%; height: 100%; object-fit: cover; object-position: center top; margin-bottom: 0; }
}
@media (max-width: 599px) {
  .dp-s1 { padding-top: calc(45 * var(--s)); padding-bottom: 0; min-height: 0; }
  .dp-nurse { width: 70%; }
  .dp-nurse img { height: auto; }
}
.dp-clinic { padding-top: calc(195 * var(--s)); }
@media (max-width: 1099px) { .dp-clinic { padding-top: calc(80 * var(--s)); } }
@media (max-width: 599px) { .dp-clinic { padding-top: calc(50 * var(--s)); } }
.dp-s1 { padding-top: calc(130 * var(--s)); }
@media (max-width: 1099px) { .dp-s1 { padding-top: calc(90 * var(--s)); } }
@media (max-width: 599px) { .dp-s1 { padding-top: calc(45 * var(--s)); } }
/* tablet: as in the tablet design. The stills take the left 61%, just
   poking above the orange band and ending with it; the title and a
   smaller text sit beside them */
.dp-br { display: none; }
@media (min-width: 600px) and (max-width: 1099px) {
  .dp-video { min-height: 0; height: 33.7vw; display: flex; align-items: center; }
  .dp-grid { width: 61%; top: -2.4vw; translate: none; }
  .dp-head--video { margin-left: 63.5%; padding: 0 2vw 0 0; }
  .dp-head--video .dp-title { font-size: 4.6vw; line-height: 1.07; }
  .dp-head--video .dp-text { font-size: max(11px, 1.75vw); line-height: 1.3; margin-top: 2vw; }
  .dp-br { display: inline; }
  .dp-clinic { padding-top: calc(80 * var(--s)); }
}
/* tablet: title and text at the page's usual sizes; the band grows to fit
   them, the stills stay centred on it, poking out a little above and below */
@media (min-width: 600px) and (max-width: 1099px) {
  .dp-video { height: auto; min-height: 31.7vw; }
  .dp-grid { top: 50%; translate: 0 -50%; }
  .dp-head--video { padding: calc(40 * var(--s)) var(--gutter) calc(40 * var(--s)) 0; }
  .dp-head--video .dp-title { font-size: var(--fs-title); }
  .dp-head--video .dp-text { font-size: var(--fs-small); line-height: 1.22; margin-top: calc(25 * var(--s)); }
  .dp-br { display: none; }
}
/* more blue between the text and the cards; the clinic photo grows with it */
.dp-cards { margin-top: calc(120 * var(--s)); }
.dp-clinic { background-size: max(100%, 1920px * 0) auto; }
@media (max-width: 1099px) { .dp-cards { margin-top: calc(110 * var(--s)); } .dp-clinic { background-size: auto 115%; background-position: center top; } }
@media (max-width: 599px) { .dp-cards { margin-top: calc(40 * var(--s)); } .dp-clinic { background-size: auto 60%; } }
/* phone, as in the mobile design: orange band with the title and text first,
   then the video stills full width on navy below it */
@media (max-width: 599px) {
  .dp-video { display: flex; flex-direction: column; padding-bottom: 0; background: #112435; }
  .dp-head--video { order: 1; margin: 0; padding: calc(45 * var(--s)) var(--gutter) calc(55 * var(--s)); background: var(--dp-orange); }
  .dp-grid { order: 2; position: static; translate: none; width: 100%; margin: 0; background: #112435; display: block; }
}
.dp-grid img { display: block; width: 100%; height: auto; }
/* tablet, as in the tablet design: the blue capsule panel on the left, its
   top just over the nurse photo; the orange box on the right starting at
   the photo's foot and running down past the capsules; then "Clinically
   Driven Impact" left-aligned */
@media (min-width: 600px) and (max-width: 1099px) {
  .dp-video { --gw: 61vw; position: relative; display: block; height: calc(var(--gw) * 941 / 1600 * 0.82); min-height: 0; padding: 0; background: #112435; overflow: visible; }
  .dp-grid { position: absolute; left: 0; top: calc(var(--gw) * 941 / 1600 * -0.18); translate: none; width: var(--gw); margin: 0; z-index: 2; }
  .dp-head--video { position: absolute; z-index: 3; right: 0; top: 0; width: calc(100% - var(--gw)); min-height: calc(var(--gw) * 941 / 1600 * 1.17); margin: 0; padding: 4.5vw var(--gutter) 4.5vw 3.5vw; background: var(--dp-orange); box-sizing: border-box; }
  .dp-head--video .dp-title { font-size: var(--fs-title); }
  .dp-head--video .dp-text { font-size: var(--fs-small); line-height: 1.22; margin-top: calc(25 * var(--s)); max-width: none; }
  .dp-clinic { padding-top: calc(var(--gw, 61vw) * 941 / 1600 * 0.35 + 110 * var(--s)); }
  .dp-clinic { --gw: 61vw; }
  .dp-clinic .dp-head--right { margin-left: 0; text-align: left; max-width: 80%; }
  .dp-clinic .dp-head--right .dp-title, .dp-clinic .dp-head--right .dp-text { margin-left: 0; }
}
@media (min-width: 600px) and (max-width: 1099px) { .dp-clinic { padding-top: calc(61vw * 941 / 1600 * 0.35 + 160 * var(--s)); } }
/* phone: title and text beside the nurse photo (as on larger screens) */
@media (max-width: 599px) {
  .dp-s1 { display: block; position: relative; min-height: calc(50vw * 1626 / 892); padding: calc(45 * var(--s)) 0 calc(30 * var(--s)) var(--gutter); }
  .dp-s1 .dp-head { max-width: 50%; }
  .dp-s1 .dp-title { font-size: clamp(22px, 6.4vw, 30px); }
  .dp-nurse { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; margin: 0; }
  .dp-nurse img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
}
@media (max-width: 599px) { .dp-s1 .dp-head { max-width: calc(50vw - var(--gutter) - 12px); } }
/* tablet: the orange box is only as tall as its text (same space above and
   below), and starts a hair to the left so it covers the capsules' frame edge */
@media (min-width: 600px) and (max-width: 1099px) {
  .dp-head--video { min-height: 0; width: calc(100% - var(--gw) + 0.9vw); padding: 4.5vw var(--gutter) 4.5vw calc(3.5vw + 0.9vw); }
}
/* tablet: the box covers only the capsule picture's thin outer frame (0.5% of its width) */
@media (min-width: 600px) and (max-width: 1099px) {
  .dp-head--video { width: calc(100% - var(--gw) + var(--gw) * 0.004); padding-left: calc(3.5vw + var(--gw) * 0.004); }
}
/* tablet: the orange box is as tall as the capsule picture and sits the same
   distance lower than it, so the picture pokes out above the box by exactly
   as much as the box runs on below the picture */
@media (min-width: 600px) and (max-width: 1099px) {
  .dp-head--video { min-height: calc(var(--gw) * 941 / 1600); display: flex; flex-direction: column; justify-content: center; padding-top: 3vw; padding-bottom: 3vw; }
}
@media (min-width: 600px) and (max-width: 860px) {
  .dp-head--video { padding-top: 2vw; padding-bottom: 2vw; }
  .dp-head--video .dp-title { font-size: 4.6vw; }
  .dp-head--video .dp-text { font-size: max(11.5px, 1.95vw); margin-top: 1.6vw; line-height: 1.2; }
}
@media (min-width: 600px) and (max-width: 860px) { .dp-head--video { padding-top: 1.2vw; padding-bottom: 1.2vw; } .dp-head--video .dp-title { font-size: 4.4vw; } }
/* tablet (final): the capsule picture and the orange box share one row, so
   they are always the same height; the picture is lifted by a fixed amount,
   giving the same offset at the top and at the bottom. Title and text keep
   the page's usual sizes; when they need more room the picture shows a
   little less at its sides instead */
@media (min-width: 600px) and (max-width: 1099px) {
  .dp-video { display: grid; grid-template-columns: 61vw 1fr; align-items: stretch; height: auto; min-height: 0; overflow: visible; }
  .dp-grid { position: relative; top: auto; left: auto; width: auto; translate: 0 calc(61vw * 941 / 1600 * -0.18); min-height: calc(61vw * 941 / 1600); margin: 0; z-index: 2; }
  .dp-grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .dp-head--video { position: relative; top: auto; right: auto; width: auto; min-height: 0; margin: 0 0 0 calc(61vw * -0.004); padding: 4vw var(--gutter) 4vw calc(3.5vw + 61vw * 0.004); display: flex; flex-direction: column; justify-content: center; }
  .dp-head--video .dp-title { font-size: var(--fs-title); }
  .dp-head--video .dp-text { font-size: var(--fs-small); line-height: 1.22; margin-top: calc(25 * var(--s)); }
}
/* desktop: the video text at the page's usual size too; the band grows if ever needed */
@media (min-width: 1100px) {
  .dp-video { height: auto; min-height: calc(423 * var(--s)); }
  .dp-head--video { padding: calc(40 * var(--s)) var(--gutter) calc(40 * var(--s)) 0; }
  .dp-head--video .dp-text { font-size: var(--fs-small); line-height: 1.22; }
}
/* tablet: keep the capsule picture's orange frame on all sides even when it
   shows less at its sides, and let the clinic photo start right under it */
@media (min-width: 600px) and (max-width: 1099px) {
  .dp-grid::after { content: ""; position: absolute; inset: 0; border: max(1.5px, calc(61vw * 0.005)) solid #ed7930; pointer-events: none; }
  .dp-video { position: relative; z-index: 2; background: transparent; }
  .dp-clinic { position: relative; z-index: 1; margin-top: calc(61vw * 941 / 1600 * -0.18); }
}
@media (max-width: 599px) { .dp-tagline img { width: 70%; max-width: 70%; display: block; margin: 0 auto; } }
@media (max-width: 599px) { .dp-tagline img { width: 84%; max-width: 84%; } }
/* the "reaching" card is the video's cover, with the usual play button */
.dp-reach .pj-player { aspect-ratio: 1700 / 998; border: 0; background: transparent; }
.dp-reach .pj-player video { object-fit: cover; }
/* the play button sits on the photo arch, clear of the headline */
/* tablet + phone: the reach card runs full width, edge to edge, under the toolkit text */
@media (max-width: 1099px) {
  .dp-tool { padding-bottom: 0; }
  .dp-tool__row { flex-direction: column; align-items: stretch; gap: calc(60 * var(--s)); }
  .dp-tool__row .dp-head { flex: none; }
  .dp-reach { width: auto; margin: 0 calc(-1 * var(--gutter)); }
}
@media (max-width: 599px) { .dp-tool__row { gap: calc(40 * var(--s)); } }
/* phone: card and story paragraphs use the same body size as every other paragraph */
@media (max-width: 599px) {
  .pj-card__text, .pj-story__text { font-size: var(--fs-small); line-height: 1.3; letter-spacing: 0; }
}
/* phone: plenty of dark space above the nurse's head; the photo keeps its
   natural size and sits on the section's bottom edge */
@media (max-width: 599px) {
  .dp-s1 { min-height: calc(50vw * 1626 / 892 * 1.5); }
  .dp-nurse { top: auto; height: calc(50vw * 1626 / 892); }
}
/* desktop: "Clinically Driven Impact" starts further below the video stills */
@media (min-width: 1100px) { .dp-clinic { padding-top: calc(290 * var(--s)); background-position: center top; } }
@media (min-width: 1100px) { .dp-clinic { padding-top: calc(360 * var(--s)); } }
/* tablet: title and text sit lower, just above the cards */
@media (min-width: 600px) and (max-width: 1099px) { .dp-cards { margin-top: calc(50 * var(--s)); } }
/* phone, as in the mobile design: more of the clinic photo above a
   right-aligned title and text; the cards are narrower and staggered
   (left, right, left…), the white band starting halfway down the first */
@media (max-width: 599px) {
  .dp-clinic { padding-top: 60vw; background-position: 48% top; }
  .dp-clinic .dp-head--right { text-align: right; max-width: none; margin-left: auto; }
  .dp-clinic .dp-head--right .dp-title, .dp-clinic .dp-head--right .dp-text { margin-left: auto; }
  .dp-cards { margin-top: 7vw; row-gap: 5vw; }
  .dp-cards img { width: 80%; justify-self: start; }
  .dp-cards img:nth-child(even) { justify-self: end; margin: 0; }
  .dp-cards::before { top: calc((100vw - 2 * var(--gutter)) * 0.8 * 818 / 1400 * 0.52); }
}
@media (max-width: 599px) {
  .dp-clinic { background:
      linear-gradient(rgba(29, 63, 115, 0) 72vw, #1d3f73 100vw) top / 100% 100vw no-repeat,
      url("../assets/img/deepintent/clinic.webp") 48% top / 190% auto no-repeat,
      #1d3f73; }
  .dp-cards { row-gap: 3vw; }
}
/* the star pattern on the dark part of the closing section (from the
   Deep_Intent_stars design): faint at the top, stronger towards the bottom */
.dp-tool { position: relative; isolation: isolate; --dp-white: calc(200 * var(--s) + var(--dp-cut)); }
.dp-tool::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: var(--dp-white);
  background: url("../assets/img/deepintent/star-tile.svg") left top / max(24px, calc(31.1 * 1920 / 1280 * var(--s))) auto repeat;
  opacity: .2;
  -webkit-mask-image: linear-gradient(rgba(0,0,0,.3), #000);
          mask-image: linear-gradient(rgba(0,0,0,.3), #000);
  pointer-events: none;
}
@media (max-width: 1099px) { .dp-tool::before { background-size: calc(31.1 * 1000 / 760 * var(--s)) auto; } }
@media (max-width: 599px) {
  .dp-tool { --dp-white: calc(100 * var(--s) + var(--dp-cut)); }
  .dp-tool::before { background-size: calc(31.1 * var(--s)) auto; }
}
@media (min-width: 600px) { .dp-tool::before { opacity: .14; } }
/* no dark hairline under the full-width orange card */
.dp-reach .pj-player video { background: #ed7a31; }
@media (max-width: 1099px) { .dp-reach { margin-bottom: -2px; position: relative; z-index: 1; } .dp-reach .pj-player { margin-bottom: 0; } }
/* desktop: the stills' orange frame is a real border, so all four sides are
   exactly the same whole-pixel width (the picture itself has no frame) */
@media (min-width: 1100px) {
  .dp-grid { box-sizing: border-box; border: max(2px, round(calc(1177 * var(--s) * 9 / 1800), 1px)) solid #ed7930; }
}
/* tablet + phone: the picture of the stills has no frame of its own; the
   orange frame is one border, the same whole-pixel width on every side */
@media (min-width: 600px) and (max-width: 1099px) {
  .dp-grid::after { border-width: max(2px, round(calc(61vw * 0.005), 1px)); }
}
@media (max-width: 599px) {
  .dp-grid { position: relative; }
  .dp-grid::after { content: ""; position: absolute; inset: 0; border: 2px solid #ed7930; pointer-events: none; }
}
/* tablet: no light hairline between the stills and the clinic photo below */
@media (min-width: 600px) and (max-width: 1099px) { .dp-clinic { margin-top: calc(61vw * 941 / 1600 * -0.18 - 2px); } }
/* the frame around the stills is exactly as thick as the capsules' own orange
   outline (10.5px per 1775px of picture on desktop, 8.2 per 1584 below) */
@media (min-width: 1100px) { .dp-grid { border-width: max(2px, round(calc((1177 * var(--s)) * 9.6 / 1775), 1px)); } }
@media (min-width: 600px) and (max-width: 1099px) { .dp-grid::after { border-width: max(2px, round(calc(61vw * 8.2 / 1584), 1px)); } }
@media (max-width: 599px) { .dp-grid::after { border-width: max(2px, round(calc(100vw * 8.2 / 1584), 1px)); } }
/* desktop: the navy between the capsules (the stills picture is see-through there) */
@media (min-width: 1100px) { .dp-grid { background: #223963; } }

/* =========================================================
   DOCEREE
   ========================================================= */
.pj--doceree { --card-blue: #59bcea; --pj-tri: #5277e6; --dc-ink: #302d2d; }
.pj--doceree .pj-player { border: 0; background: #fff; }
.pj--doceree .pj-player__circle { background: rgba(48, 45, 45, .92); }   /* the design's dark circle, usual size */
.dc-brand { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(80 * var(--s)); align-items: start; padding: calc(130 * var(--s)) var(--gutter) calc(110 * var(--s)); background: #fff; color: var(--dc-ink); }
.dc-title { max-width: 8.2em; }
.dc-text { max-width: calc(620 * var(--s)); margin: calc(25 * var(--s)) 0 0; font-size: var(--fs-small); line-height: 1.22; letter-spacing: -0.02em; }
.dc-palette { display: flex; align-items: flex-start; gap: calc(50 * var(--s)); padding-top: calc(10 * var(--s)); }
.dc-swatches { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(31 * var(--s)); width: calc(281 * var(--s)); }
.dc-grad { grid-column: 1 / -1; height: calc(21 * var(--s)); background: linear-gradient(90deg, #59bbe9, #5374e5); margin-bottom: calc(12 * var(--s)); }
.dc-chip__c { display: block; aspect-ratio: 121.2 / 78.2; }
.dc-chip p { margin: calc(14 * var(--s)) 0 0; font-size: max(10px, calc(15 * var(--s))); line-height: 1.2; letter-spacing: .01em; }
.dc-logos { display: grid; grid-template-columns: repeat(3, calc(167 * var(--s))); column-gap: calc(22 * var(--s)); row-gap: calc(18 * var(--s)); }
.dc-logos img { display: block; width: 100%; height: auto; }
.dc-logos img:first-child { outline: 1px solid #d9d9d9; outline-offset: -1px; }   /* the white tile's hairline frame */
.dc-logos .dc-wordmark { grid-column: 1 / span 2; width: calc(200 * var(--s)); }
.dc-film { padding: 0 var(--gutter) calc(150 * var(--s)); background: #fff; }
.dc-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; }
.dc-grid > img, .dc-tile--soon { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.dc-tile--soon { background: #eef1f6; }

/* tablet: text above, palette below in one row */
@media (max-width: 1099px) {
  .dc-brand { grid-template-columns: 1fr; row-gap: calc(50 * var(--s)); padding-top: calc(90 * var(--s)); padding-bottom: calc(80 * var(--s)); }
  .dc-text { max-width: 36em; }
  .dc-swatches { width: calc(300 * var(--s)); }
  .dc-logos { grid-template-columns: repeat(3, calc(170 * var(--s))); }
  .dc-chip p { font-size: max(11px, calc(15 * var(--s))); }
  .dc-film { padding-bottom: calc(90 * var(--s)); }
}
/* phone: swatches, then the logos; the frames in two columns */
@media (max-width: 599px) {
  .dc-brand { padding-top: calc(60 * var(--s)); padding-bottom: calc(50 * var(--s)); row-gap: calc(36 * var(--s)); }
  .dc-palette { flex-direction: column; gap: calc(30 * var(--s)); }
  .dc-swatches { width: 100%; max-width: calc(300 * var(--s)); }
  .dc-logos { grid-template-columns: repeat(3, 1fr); width: 100%; }
  .dc-logos .dc-wordmark { width: calc(160 * var(--s)); }
  .dc-chip p { font-size: 11px; }
  .dc-film { padding-bottom: calc(50 * var(--s)); }
  .dc-grid { grid-template-columns: repeat(2, 1fr); }
}
.dc-brand { padding-top: calc(21 * var(--s)); }   /* same start as every project page */
.dc-title { max-width: 11em; }                    /* "Branding Campaign / for Doceree" */
@media (max-width: 1099px) { .dc-brand { padding-top: calc(21 * var(--s)); } }
@media (max-width: 599px) { .dc-brand { padding-top: calc(21 * var(--s)); } }
/* desktop: as in the design, the palette runs out to the card's right edge,
   leaving the title room for two lines */
@media (min-width: 1100px) { .dc-brand { padding-right: calc(80 * var(--s)); } }
/* Doceree layout (final): the usual margins on both sides; the title on two
   lines with its text under it, the three logos beside it and the colours
   under the logos */
.dc-brand { grid-template-columns: min-content minmax(0, 1fr); column-gap: calc(80 * var(--s)); padding-left: var(--gutter); padding-right: var(--gutter); }
.dc-title { max-width: none; }
.dc-title > span { display: block; white-space: nowrap; }
.dc-text { max-width: none; }
.dc-palette { flex-direction: column; align-items: flex-start; justify-self: end; gap: calc(44 * var(--s)); padding-top: calc(12 * var(--s)); }
@media (min-width: 1100px) { .dc-brand { padding-right: var(--gutter); } }
@media (max-width: 1099px) {
  .dc-brand { grid-template-columns: 1fr; }
  .dc-text { max-width: 36em; }
  .dc-palette { justify-self: start; gap: calc(40 * var(--s)); }
}
@media (max-width: 599px) {
  .dc-palette { gap: calc(30 * var(--s)); }
}
/* Doceree film: the frame is exactly the film's shape and white behind, so no
   dark sliver can show at the edges (Safari fits the cover picture inside) */
.pj--doceree .pj-player { aspect-ratio: 16 / 9; }
.pj--doceree .pj-player video { background: #fff; }
/* tablet: more white above the title; the logos and colours sit on the right */
@media (min-width: 600px) and (max-width: 1099px) {
  .dc-brand { padding-top: calc(100 * var(--s)); }
  .dc-palette { justify-self: end; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .dc-palette { align-items: flex-end; }
  .dc-logos .dc-wordmark { grid-column: 1 / -1; justify-self: end; }
}
/* tablet (revised): logos, wordmark and colours all centred on the page */
@media (min-width: 600px) and (max-width: 1099px) {
  .dc-palette { justify-self: center; align-items: center; }
  .dc-logos .dc-wordmark { justify-self: center; }
}
/* tablet (final): the whole block is centred on the page; inside it, the
   wordmark and colours line up with the left edge of the logo squares */
@media (min-width: 600px) and (max-width: 1099px) {
  .dc-palette { justify-self: center; align-items: flex-start; }
  .dc-logos .dc-wordmark { justify-self: start; }
}
/* phone, as in the mobile design: the colours (with a short label) on the
   left, the three logos beside them, the wordmark under the logos on the right */
.dc-chip__m { display: none; }
@media (max-width: 599px) {
  .dc-palette { flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; width: 100%; gap: 3vw; padding-top: 0; }
  .dc-swatches { flex: 0 0 31%; width: auto; max-width: none; column-gap: 9%; }
  .dc-grad { height: 2.4vw; margin-bottom: 2.4vw; }
  .dc-chip__c { aspect-ratio: 120 / 78; }
  .dc-chip p { display: none; }
  .dc-chip .dc-chip__m { display: block; margin-top: 2.4vw; font-size: clamp(7px, 1.75vw, 10px); line-height: 1.35; white-space: nowrap; letter-spacing: 0; }
  .dc-logos { flex: 0 0 60%; width: auto; grid-template-columns: repeat(3, 1fr); column-gap: 2vw; row-gap: 3vw; }
  .dc-logos img:not(.dc-wordmark) { aspect-ratio: 162 / 143; object-fit: cover; }
  .dc-logos .dc-wordmark { grid-column: 1 / -1; justify-self: end; width: 55%; }
}
@media (max-width: 599px) {
  .dc-swatches { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dc-chip { min-width: 0; }
  .dc-chip .dc-chip__m { font-size: clamp(8px, 2.15vw, 11px); }
}
@media (max-width: 599px) {
  .dc-swatches { flex-basis: 37%; column-gap: 10%; }
  .dc-logos { flex-basis: 57%; }
  .dc-chip .dc-chip__m { font-size: clamp(7px, 1.9vw, 10px); }
}

/* ===== Doceree brand section, as in the final designs =====
   desktop: title + text | colours | the three logos (wordmark under them, left)
   tablet + phone: title, text, then colours on the left and logos on the right
   (wordmark under the logos, on the right) */
.dc-chip__label { display: block !important; margin: calc(18 * var(--s)) 0 0; font-size: max(11px, calc(15 * var(--s))); line-height: 1.38; white-space: nowrap; letter-spacing: 0; }
.dc-brand { grid-template-columns: min-content minmax(0, 1fr); column-gap: calc(80 * var(--s)); }
.dc-palette { flex-direction: row-reverse; justify-content: flex-end; justify-self: end; align-items: flex-start; gap: calc(55 * var(--s)); padding-top: calc(14 * var(--s)); width: auto; }
.dc-swatches { flex: none; width: calc(290 * var(--s)); max-width: none; column-gap: calc(34 * var(--s)); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dc-grad { height: calc(26 * var(--s)); margin-bottom: calc(16 * var(--s)); }
.dc-chip__c { aspect-ratio: 125 / 85; }
.dc-logos { flex: none; width: auto; grid-template-columns: repeat(3, calc(170 * var(--s))); column-gap: calc(22 * var(--s)); row-gap: calc(22 * var(--s)); }
.dc-logos img:not(.dc-wordmark) { aspect-ratio: 170 / 150; object-fit: cover; }
.dc-logos .dc-wordmark { grid-column: 1 / span 2; justify-self: start; width: calc(200 * var(--s)); }
@media (max-width: 1099px) {
  .dc-brand { grid-template-columns: 1fr; }
  .dc-palette { justify-self: stretch; justify-content: space-between; width: 100%; gap: 4%; padding-top: 0; align-items: flex-start; }
  .dc-swatches { flex: 0 0 37%; width: auto; column-gap: 12%; }
  .dc-grad { height: 3.6vw; margin-bottom: 2.6vw; }
  .dc-logos { flex: 0 0 57%; grid-template-columns: repeat(3, 1fr); column-gap: 3.5%; row-gap: 2.8vw; }
  .dc-logos .dc-wordmark { grid-column: 1 / -1; justify-self: end; width: 45%; }
  .dc-chip__label { margin-top: 2.2vw; font-size: clamp(8.5px, 1.75vw, 13px); }
}
@media (max-width: 599px) {
  .dc-swatches { flex-basis: 39%; column-gap: 8%; }
  .dc-logos { flex-basis: 56%; }
  .dc-logos .dc-wordmark { width: 55%; }
}
.dc-chip .dc-chip__label { margin-top: calc(18 * var(--s)); font-size: max(11px, calc(15 * var(--s))); line-height: 1.38; }
.dc-swatches { width: calc(250 * var(--s)); column-gap: calc(30 * var(--s)); }
.dc-palette { gap: calc(40 * var(--s)); }
.dc-brand { column-gap: calc(60 * var(--s)); }
.dc-logos { grid-template-columns: repeat(3, calc(145 * var(--s))); column-gap: calc(18 * var(--s)); }
.dc-logos .dc-wordmark { width: calc(180 * var(--s)); }
/* below a large laptop the row gets too tight: use the stacked layout */
@media (max-width: 1399px) {
  .dc-brand { grid-template-columns: 1fr; row-gap: calc(50 * var(--s)); }
  .dc-palette { justify-self: stretch; justify-content: space-between; width: 100%; gap: 4%; padding-top: 0; }
  .dc-swatches { flex: 0 0 37%; width: auto; column-gap: 12%; }
  .dc-grad { height: min(3.6vw, 32px); margin-bottom: min(2.6vw, 22px); }
  .dc-logos { flex: 0 0 57%; grid-template-columns: repeat(3, 1fr); column-gap: 3.5%; row-gap: min(2.8vw, 26px); }
  .dc-logos .dc-wordmark { grid-column: 1 / -1; justify-self: end; width: 45%; }
  .dc-chip .dc-chip__label { margin-top: min(2.2vw, 18px); font-size: clamp(9px, 1.75vw, 15px); }
}
@media (max-width: 599px) {
  .dc-swatches { flex-basis: 40%; column-gap: 7%; }
  .dc-logos { flex-basis: 55%; }
  .dc-logos .dc-wordmark { width: 55%; }
  .dc-chip .dc-chip__label { font-size: clamp(8px, 2.2vw, 11px); }
}
@media (min-width: 600px) and (max-width: 1399px) { .dc-text { max-width: 36em; } }
/* colour labels a little smaller on smaller screens (room to spare between the columns) */
@media (max-width: 1399px) { .dc-chip .dc-chip__label { font-size: clamp(8px, 1.4vw, 13px); } }
@media (max-width: 599px)  { .dc-chip .dc-chip__label { font-size: clamp(6.5px, 1.75vw, 9px); } }
/* Doceree film: the play button sits on the centre of the spark mark's circle */
.pj--doceree .pj-player__circle { position: relative; left: 1.5%; }
.pj--mv .pj-arrow__body { fill: #b9d4b4; }   /* Multivu: the pale half of the arrows in a stronger brand green, so it reads on the white card */
/* Scout, tablet: the text sits lower and its lines follow one straight
   diagonal (from the top of the blue panel down to the grey frame), so the
   paragraph tapers along the artwork's slope */
@media (min-width: 600px) and (max-width: 1099px) {
  .sc-insights .sc-text--wrap { --off: 0.01vw; text-wrap: pretty; }
  .sc-wrap {
    shape-outside: polygon(100% 0,
      max(0px, calc(0.759 * 100vw - var(--gutter) - 3.5vw)) var(--off),
      max(0px, calc(0.458 * 100vw - var(--gutter) - 3.5vw)) calc(var(--off) + 0.24 * var(--gh)),
      max(0px, calc(0.458 * 100vw - var(--gutter) - 3.5vw)) calc(var(--off) + 0.355 * var(--gh)),
      max(0px, calc(0.079 * 100vw - var(--gutter) - 3.5vw)) calc(var(--off) + 0.36 * var(--gh)),
      0px calc(var(--off) + 0.4 * var(--gh)),
      0px calc(var(--off) + var(--gh)), 100% calc(var(--off) + var(--gh)));
  }
}
/* Scout, phone: the same — text sits lower and tapers along the diagonal */
@media (max-width: 599px) {
  .sc-insights .sc-text--wrap { --off: 0.01vw; text-wrap: pretty; }
}
@media (max-width: 599px) {
  /* below the top of the bar chart the edge drops straight down (the bars are
     upright), so the last lines aren't squeezed to a word or two */
  .sc-wrap { shape-outside: polygon(100% 0, 100% var(--off), max(0px, calc(0.983 * 100vw - var(--gutter) - 7vw)) calc(var(--off) + 0 * var(--gh)), max(0px, calc(0.906 * 100vw - var(--gutter) - 7vw)) calc(var(--off) + 0.06 * var(--gh)), max(0px, calc(0.906 * 100vw - var(--gutter) - 7vw)) calc(var(--off) + 0.075 * var(--gh)), max(0px, calc(0.742 * 100vw - var(--gutter) - 7vw)) calc(var(--off) + 0.08 * var(--gh)), max(0px, calc(0.725 * 100vw - var(--gutter) - 7vw)) calc(var(--off) + 0.2 * var(--gh)), max(0px, calc(0.49 * 100vw - var(--gutter) - 5vw)) calc(var(--off) + 0.37 * var(--gh)), max(0px, calc(0.49 * 100vw - var(--gutter) - 5vw)) calc(var(--off) + 0.54 * var(--gh)), max(0px, calc(0.079 * 100vw - var(--gutter) - 7vw)) calc(var(--off) + 0.56 * var(--gh)), 0px calc(var(--off) + 0.57 * var(--gh)), 0px calc(var(--off) + 1 * var(--gh)), 100% calc(var(--off) + var(--gh))); }
}

.sc-nowrap .sc-wrap { shape-outside: none; width: 0; }
/* Ruckus, tablet and phone: the green frames in the pictures sit a touch
   left of the text — nudge them onto it */
@media (max-width: 1099px) { .rk-c { translate: 3.5px 0; } }