* { box-sizing: border-box; }

:root {
  --gutter: clamp(16px, 6vw, 64px);
  /* Corner radius for photos and image placeholders. Full-bleed media stays
     square, see .ln-plate. */
  --pic-radius: 12px;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: "Inter", system-ui, sans-serif;
  color: #1a1a1a;
  background: #fff;
}

.skeleton-item {
  width: 100%;
  height: 300px;
  background: linear-gradient(100deg, #ececec 30%, #f5f5f5 50%, #ececec 70%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Scoped to the site nav: a bare `header` selector also captured <header>
   elements used inside case study content and tore them out of flow. */
body > header {
  position: fixed;
  bottom: 30px;
  left: 50%;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 20px 50px;
  background: #fff;
  border: 1px solid #b7b7b7;
  border-radius: 9999px;
  transform: translate(-50%, 0);
  transition: transform 0.3s ease;
}

body > header.nav-hidden {
  transform: translate(-50%, 150%);
}

body > header .logo {
  /* A button, not a link: there is no second document to go to, it resets
     the canvas. The UA styling comes off so it still reads as the wordmark. */
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: "purista-web", sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 4vw, 18px);
  text-transform: uppercase;
  letter-spacing: inherit;
  cursor: pointer;
}

body > header .logo:hover {
  color: #555;
}

body > header nav {
  font-family: "purista-web", sans-serif;
  text-transform: uppercase;
  font-size: clamp(13px, 3vw, 15px);
  white-space: nowrap;
}

body > header nav a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

header nav a:hover {
  color: #555;
}

header nav a.nav-current {
  color: #555;
  font-weight: 700;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  color: #1a1a1a;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle .icon-close {
  display: none;
}

header.menu-open .nav-toggle .icon-open {
  display: none;
}

header.menu-open .nav-toggle .icon-close {
  display: block;
}

@media (max-width: 600px) {
  /* These undo the floating pill set on `body > header`, so they have to match
     its specificity. Written as a bare `header` they lose silently, which is
     what broke the mobile bar: the pill stayed fixed and kept its transform,
     and a transformed ancestor becomes the containing block for position:
     fixed children, so the hamburger positioned against the pill instead of
     the viewport. */
  body > header {
    position: static;
    transform: none;
    background: none;
    border: none;
    padding: 0;
    gap: 0;
  }

  /* Same trap: the open-detail state must not reintroduce a transform here.
     There is nothing to slide away on mobile, so the controls hide instead. */
  body > header.nav-hidden {
    transform: none;
  }

  body > header .logo {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10;
    width: 44px;
    height: 44px;
    background: #fff;
    border: 1px solid #b7b7b7;
    border-radius: 9999px;
  }

  body > header nav {
    position: fixed;
    top: 72px;
    right: 20px;
    left: auto;
    bottom: auto;
    transform: none;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4px;
    white-space: normal;
    width: max-content;
    min-width: 216px;
    font-size: 15.6px;
    background: #fff;
    border: 1px solid #b7b7b7;
    border-radius: 24px;
    padding: 14.4px 28.8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 10;
  }

  body > header.menu-open nav {
    display: flex;
  }

  body > header nav .nav-dot {
    display: none;
  }

  body > header nav a {
    padding: 9.6px 0;
  }

  /* Last, so it wins the tie against the menu-open rule above when a case
     study is opened while the menu happens to be up. */
  body > header.nav-hidden .nav-toggle,
  body > header.nav-hidden nav {
    display: none;
  }
}

.pan-viewport {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  overflow-y: auto;
  /* Proximity, not mandatory: a panel that is nearly in place settles into
     it, and a deliberate scroll into the middle of a long one is left alone. */
  scroll-snap-type: y proximity;
}

/* Each panel is a snap point at its own top, the same position the navigation
   scrolls to, so a click and a scroll finish in the same place. */
.project-list > .project-item {
  scroll-snap-align: start;
}

/* An opened panel is a long reading page. Snapping it would fight the reader
   on the way down, so the snap point goes away while it is open. */
.project-list > .project-item.expanded {
  scroll-snap-align: none;
}

.pan-canvas {
  position: relative;
  width: 100%;
}

.pan-canvas img {
  -webkit-user-drag: none;
  user-drag: none;
}

.project-item {
  position: relative;
  width: 100%;
  height: 300px;
  min-height: 100vh;
  overflow: hidden;
  transition: height 0.3s ease;
}

.cover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
}

.view-button {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  font: inherit;
  font-family: "purista-web", sans-serif;
  text-transform: uppercase;
  padding: 14px 28px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.view-button svg {
  flex-shrink: 0;
}

.view-button[hidden] {
  display: none;
}

.project-item.dark-panel .view-button {
  background: #fff;
  color: #1a1a1a;
}

.detail-toolbar {
  position: fixed;
  top: 70px;
  right: calc(var(--gutter) + 6px);
  z-index: 11;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: opacity 0.5s ease;
}

/* Faded out by script.js once the page has been still for a few seconds.
   Scrolling, a keypress, or the pointer coming near brings it back. */
.detail-toolbar.is-idle {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .detail-toolbar {
    transition-duration: 0.01ms;
  }
}

.detail-close {
  display: flex;
  align-items: center;
  gap: 9px;
  font: inherit;
  font-family: "purista-web", sans-serif;
  text-transform: uppercase;
  padding: 14px 28px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.detail-close[hidden] {
  display: none;
}

.detail-nav {
  position: relative;
}

.detail-nav[hidden] {
  display: none;
}

/* With a page open, the page picker gets out of the way and Close is all that
   is left. Reaching the toolbar brings the picker back, and it stays for as
   long as the pointer is anywhere in the toolbar, the dropdown is open, or
   something inside has keyboard focus. Pointer devices only: without hover
   there is no way to bring it back, so touch keeps it on screen. */
@media (hover: hover) and (pointer: fine) {
  .detail-nav {
    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .detail-toolbar:hover .detail-nav,
  .detail-toolbar:focus-within .detail-nav,
  .detail-nav.is-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .detail-nav {
      transform: none;
      transition: opacity 0.2s ease;
    }
  }
}

.detail-nav-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  font: inherit;
  font-family: "purista-web", sans-serif;
  text-transform: uppercase;
  padding: 14px 28px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.detail-nav-toggle .chevron {
  transform: rotate(-90deg);
  transition: transform 0.25s ease;
}

.detail-nav:hover .detail-nav-toggle .chevron {
  transform: rotate(0deg);
}

.detail-nav-list {
  position: absolute;
  top: 100%;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  width: max-content;
  min-width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}

/* Hover alone left this unopenable on a phone, so the toggle also sets
   .is-open from script.js. Hover stays for pointer devices. */
.detail-nav:hover .detail-nav-list,
.detail-nav.is-open .detail-nav-list {
  max-height: calc(100vh - 150px);
  overflow: hidden auto;
  overscroll-behavior: contain;
  opacity: 1;
  pointer-events: auto;
}

.detail-nav-item {
  display: block;
  text-decoration: none;
  font: inherit;
  font-family: "purista-web", sans-serif;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  padding: 14px 28px;
  background: #fff;
  color: #1a1a1a;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: background 0.15s ease, color 0.15s ease;
}

.detail-nav-item:hover,
.detail-nav-item:active {
  background: #1a1a1a;
  color: #fff;
}

/* The case study currently open, already named on the button. */
.detail-nav-item.is-current {
  background: #1a1a1a;
  color: #fff;
  cursor: default;
}

.expanded-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--gutter);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.project-item.expanded > .expanded-content {
  opacity: 1;
  pointer-events: auto;
}

.about-heading {
  margin: 0;
  font-family: "purista-web", sans-serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 42px;
  color: #1a1a1a;
}

.about-heading-large {
  font-weight: 200;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.15;
  text-transform: uppercase;
  text-align: center;
}

.dark-panel .about-heading {
  color: #fff;
}

.about-paragraph {
  margin: 0;
  white-space: pre-line;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #1a1a1a;
}

.about-paragraph-large {
  font-size: 20px;
  line-height: 1.4;
  text-align: center;
}

.dark-panel .about-paragraph {
  color: #d9d9d9;
}

.about-details {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
}

.about-details-heading {
  margin: 0;
  font-family: "purista-web", sans-serif;
  font-weight: 300;
  font-size: clamp(32px, 4vw, 48px);
  text-transform: uppercase;
  color: #1a1a1a;
  text-wrap: balance;
}

.about-numbers-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.about-number-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.about-number-value {
  font-family: "purista-web", sans-serif;
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  text-transform: uppercase;
  color: #1a1a1a;
}

.about-number-label {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #6b6b6b;
  text-wrap: pretty;
}

.about-name-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-name-label {
  margin: 0;
  font-family: "purista-web", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6b6b;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.22);
}

.about-name-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 0;
}

.about-name-item {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  color: #1a1a1a;
  text-wrap: balance;
}

.about-logo-carousel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.about-logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 56px;
  animation: about-logo-scroll 22s linear infinite;
}

.about-logo-carousel:hover .about-logo-track {
  animation-play-state: paused;
}

.about-logo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.about-logo-item img {
  display: block;
  width: auto;
}

@keyframes about-logo-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.about-name-item:not(:last-child)::after {
  content: "\00B7";
  margin: 0 14px;
  color: rgba(26, 26, 26, 0.35);
}

.about-who-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}

.about-who-intro {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #1a1a1a;
  text-wrap: pretty;
}

.about-who-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 900px) {
  .about-who-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .about-who-list {
    grid-template-columns: 1fr;
  }
}

.about-who-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 16px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.about-who-box-star {
  position: absolute;
  height: auto;
  pointer-events: none;
  filter: invert(1);
}

.about-who-box > :not(.about-who-box-star) {
  position: relative;
}

.about-who-headline {
  margin: 0;
  font-family: "purista-web", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}

.about-who-text {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #d9d9d9;
  text-wrap: pretty;
}

.about-personal-note {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: -44px;
}

@media (min-width: 801px) {
  .about-personal-note {
    flex-direction: row;
    align-items: flex-start;
    gap: 64px;
  }

  .about-note-text {
    order: 1;
    flex: 1 1 0;
  }

  .about-note-image {
    order: 2;
    flex: 0 0 380px;
  }
}

.about-note-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-note-text p {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #1a1a1a;
  text-wrap: pretty;
}

.about-note-subheadline {
  margin: 0;
  font-family: "purista-web", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6b6b;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.22);
}

.about-note-section-heading {
  margin: 0;
  font-family: "purista-web", sans-serif;
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  color: #1a1a1a;
  text-wrap: balance;
}

.about-note-image > img,
.about-note-image-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--pic-radius);
  background: rgba(0, 0, 0, 0.06);
}

.about-note-image {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.about-linkedin-link img {
  display: block;
  width: 36px;
  height: 36px;
}

.about-work-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  color: #1a1a1a;
  text-decoration: none;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.about-work-link span {
  text-decoration: underline;
  text-wrap: balance;
}

.about-work-link:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 4px;
}

.about-work-link svg {
  flex-shrink: 0;
  stroke: #1a1a1a;
  transition: transform 0.2s ease;
}

.about-work-link:hover svg {
  transform: translateX(4px);
}

/* Hero (Project One) */

.hero-item {
  background: #fff;
}

.hero-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.project-item.expanded > .hero-visual {
  display: none;
}

.hero-plus-field,
.hero-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-plus {
  position: absolute;
  bottom: 0;
  pointer-events: none;
}

.hero-line {
  position: absolute;
  bottom: 0;
  width: 1px;
  pointer-events: none;
}

.hero-line-segment {
  width: 1px;
  background: rgba(0, 0, 0, 0.18);
}

.hero-rise {
  animation: hero-rise-up var(--duration, 24s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes hero-rise-up {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-1 * var(--rise, 800px))); }
}

.hero-vertical-wrap {
  position: absolute;
  bottom: 0;
  pointer-events: none;
}

.hero-vertical-wrap.hero-vertical-left {
  left: 34%;
}

.hero-vertical-wrap.hero-vertical-right {
  right: 6%;
}

.hero-vertical {
  display: block;
  width: auto;
}

.hero-portrait {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 140%;
  width: auto;
  max-width: 73%;
  object-fit: contain;
  object-position: bottom right;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: var(--gutter);
  padding-top: calc(var(--gutter) + 94px);
  width: 32%;
  min-width: 220px;
}

.hero-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

.hero-eyebrow {
  font-family: "purista-web", sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
}

.hero-logo {
  width: clamp(120px, 14vw, 170px);
  height: auto;
}

.hero-tagline {
  font-family: "purista-web", sans-serif;
  font-size: clamp(21px, 2.4vw, 25.5px);
  line-height: 1.4;
  margin: 0;
  font-weight: 300;
  text-transform: uppercase;
}

.hero-bio-button {
  position: static;
  align-self: flex-start;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 10px;
  padding: 14px 28px;
  font-family: "purista-web", sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-bio-button svg {
  flex-shrink: 0;
}

.hero-bio-label-short {
  display: none;
}

/* Phone hero: text stacks above a larger, centered portrait. The vertical
   type and the big page counter collide with the text at this width. */
@media (max-width: 600px) {
  .hero-vertical-wrap,
  .page-indicator-bottom {
    display: none;
  }

  /* data.js hard-codes the hero panel at 700px (a desktop number) as an
     inline style; on a phone that hangs below the visible page and clips
     the portrait. Match the real viewport instead.
     Scoped to :not(.expanded) — expanding sets an inline height to fit the
     detail content, and an unscoped !important here overrides it, leaving
     the detail page clipped at one screen with no way to scroll. */
  /* .project-item carries min-height: 100vh. On iOS 100vh is the LARGE
     viewport (toolbar hidden), so with the toolbar showing every panel is
     taller than the screen: percentage-sized children blow up, and the
     extra height becomes pan slack that shifts content under the fixed
     page indicator. svh is the toolbar-visible height, so the panel
     matches what is actually on screen. */
  .project-item {
    min-height: 100svh;
  }

  /* collapsedHeight values are desktop numbers written as inline heights
     (700, 756, 880). On a phone they make panels taller than the screen, so
     they cannot sit one per screen: Offer spills past the bottom, Contact
     leaves a void under its content, and nav lands at an arbitrary y.
     Every collapsed panel is exactly one screen instead. */
  .project-item:not(.expanded) {
    height: 100svh !important;
  }

  /* Detail About header, pulled from the Paper artboard: block starts at
     y81 and the heading/subheadline gap tightens from 64px to 3px. The
     4px bottom margin keeps every section below it at its existing y. */
  .about-details-heading {
    margin-top: 57px;
  }

  .about-note-subheadline {
    margin-top: -61px;
    margin-bottom: 4px;
  }

  /* Close button sits above the headline. */
  .detail-toolbar {
    top: 30px;
  }

  .hero-content {
    width: auto;
    gap: 32px;
    height: 100%;
    padding-top: calc(var(--gutter) + 54px);
  }

  .hero-logo {
    width: 167px;
  }

  .hero-tagline {
    display: none;
  }

  /* Pulled from Paper "Mobile Hero — Code (14 Oct)": a round black badge
     beside the wordmark, 94x92 with its box at 229,71 on a 393px panel.
     Right-anchored so it tracks the nav toggle on wider phones. */
  .hero-bio-button {
    position: absolute;
    top: 71px;
    right: 70px;
    /* .view-button sets left/transform; both must be cleared or `left`
       wins over `right` and translateY(-50%) lifts the badge. */
    left: auto;
    transform: none;
    margin: 0;
    width: 94px;
    height: 92px;
    padding: 0;
    gap: 0;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    background: #000;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.02em;
    font-weight: 700;
  }

  .hero-bio-button svg,
  .hero-bio-label-full {
    display: none;
  }

  .hero-bio-label-short {
    display: block;
    max-width: 67px;
    /* .hero-bio-button sets white-space: nowrap for the wide pill. Inside the
       round badge that stops max-width doing anything, so the label runs past
       the circle and gets cut. Inherited, so clearing it here is enough. */
    white-space: normal;
    text-wrap: balance;
  }

  .hero-portrait {
    left: 50%;
    right: auto;
    bottom: -20px;
    height: 81.8%;
    width: 168%;
    max-width: none;
    object-fit: cover;
    /* The base rule anchors bottom right. That was harmless under
       object-fit: contain, but Paper's 660x490 crop (1.347) is narrower
       than the source (1.431), so cover trims ~41px horizontally and
       `right` took it all off the left, shifting the face. */
    object-position: center;
    transform: translateX(-50%);
  }
}

/* Offer card (Project Two) */

.offer-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  padding: var(--gutter);
  padding-top: calc(var(--gutter) + 94px);
}

.offer-content[hidden] {
  display: none;
}

.offer-headline {
  position: absolute;
  top: 203px;
  left: var(--gutter);
  width: max-content;
  max-width: calc(100% - 2 * var(--gutter));
  margin: 0;
  font-family: "purista-web", sans-serif;
  font-weight: 200;
  font-size: clamp(38px, 4.56vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
}

.offer-cursor {
  display: inline-block;
  width: 0.09em;
  height: 0.78em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -0.08em;
  animation: offer-cursor-blink 0.9s steps(1) infinite;
}

@keyframes offer-cursor-blink {
  50% {
    opacity: 0;
  }
}

.offer-text-columns {
  position: absolute;
  top: 208px;
  left: calc(var(--gutter) + 484px);
  right: var(--gutter);
  display: flex;
  /* 120px at 1440 and up, easing to 48px so laptops still fit both columns. */
  gap: clamp(48px, calc(100vw - 1320px), 120px);
}

/* 10px below the headline's own box, which is where its first line of caps
   begins: the headline sits at 66px on a 1.06 line, so its glyphs start well
   inside the box, and matching box tops would leave the columns riding high. */

.offer-col {
  display: flex;
  flex-direction: column;
}

.offer-col-intro {
  position: relative;
  flex: 0 1 306px;
}

.offer-plus {
  position: absolute;
  top: -38px;
  left: 0;
  width: 22px;
  height: auto;
}

.offer-intro {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  line-height: 28px;
  color: #d9d9d9;
}

.offer-book-button {
  align-self: flex-start;
  margin-top: 40px;
}

.offer-col-pitch {
  position: relative;
  flex: 0 1 349px;
  gap: 20px;
}

/* Tablet: no room beside the headline, so both columns move under it. */
@media (min-width: 601px) and (max-width: 1100px) {
  .offer-text-columns {
    top: calc(203px + 4 * 1.06 * clamp(38px, 4.56vw, 66px) + 64px);
    left: var(--gutter);
  }
}

.offer-pitch {
  margin: 0;
  font-family: "purista-web", sans-serif;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.3;
  color: #d9d9d9;
}

.offer-cta {
  align-self: flex-start;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #3a3a3a;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  font: inherit;
  font-family: "purista-web", sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}

.offer-cta svg {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .offer-headline {
    top: 110px;
    font-size: 60px;
    line-height: 1;
    letter-spacing: -0.38px;
  }

  /* Holds the pitch and the Show Me button, so both move together. */
  .offer-text-columns {
    top: 381px;
    left: var(--gutter);
    right: var(--gutter);
  }

  .offer-col-intro {
    display: none;
  }

  .offer-col-pitch {
    flex: 1 1 auto;
    max-width: 333px;
  }

  .offer-pitch {
    font-size: 28px;
    line-height: 36px;
  }

  .offer-cta {
    margin-top: 24px;
  }

  /* Phone drops the closing line; the <br><br> is inside the span so the
     blank lines go with it and the Show Me button sits straight under the
     remaining sentence. */
  .offer-pitch-aside {
    display: none;
  }
}

/* Work hub (panel 03) card row, from the "03 Work — Desktop (code)"
   artboard in Paper: four cards at y206, 391 tall, starting at the gutter
   and ending at x1113 on a 1440 canvas. Each card links to its case study.
   Phones stack the cards vertically. */
/* Work hub card row. One carousel at every width: the frame shows a whole
   number of cards and the arrows underneath page through them. Four at a
   time on a desktop, one on a phone, which is the only thing that differs.
   Driven by transform, so none of it depends on native scrolling, which
   .pan-viewport blocks with touch-action: none. */
.work-cards {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 116px;
  bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Opening a case study swaps the hub for the detail page, so the row has to
   go with it. Without this it stays absolutely positioned over the top of
   whatever case study is open. */
.project-item.expanded > .work-cards {
  display: none;
}

.work-frame {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* The track holds the whole list plus a duplicate set so the loop has no
   seam. --card-w is set by the carousel so a whole number of cards fills
   the frame at any width. */
.work-track {
  display: flex;
  flex-direction: row;
  gap: 12px;
  height: 100%;
  width: max-content;
  will-change: transform;
}

.work-controls {
  display: flex;
  align-items: center;
  /* Right-aligned: the big page numeral is fixed to the bottom left of the
     viewport, and left-aligned arrows land on top of it. */
  justify-content: flex-end;
  gap: 10px;
}

.work-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(26, 26, 26, 0.25);
  border-radius: 50%;
  background: transparent;
  color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.work-arrow:hover {
  border-color: #1a1a1a;
  background: rgba(26, 26, 26, 0.06);
}

.work-counter {
  order: -1;
  margin: 0 6px 0 0;
  color: rgba(26, 26, 26, 0.55);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.work-counter b {
  font-weight: 700;
  color: #1a1a1a;
}

.work-card {
  position: relative;
  overflow: hidden;
  flex: 0 0 var(--card-w, 100%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
  background: #1a1a1a;
  border-radius: 15px;
  color: #fff;
  font-family: "purista-web", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s ease;
}

.work-card:hover,
.work-card:focus-visible {
  background: #000;
}

.work-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.15s ease;
}

/* The artwork is light where the label sits, so the label gets a scrim. */
.work-card.has-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.work-card > span {
  position: relative;
  z-index: 1;
}

/* Artwork that already carries the project name: the label stays for screen
   readers and for the link's accessible name, but is not printed twice. */
.work-card.label-in-art > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.work-card.label-in-art::after {
  display: none;
}

.work-card.has-image:hover .work-card-image,
.work-card.has-image:focus-visible .work-card-image {
  opacity: 0.82;
}

@media (prefers-reduced-motion: reduce) {
  .work-card-image {
    transition: none;
  }
}

@media (min-width: 601px) {
  .work-cards {
    /* Pinned to the two page numerals rather than to a fixed offset: the
       small one ends at gutter + its 34px line, the big one starts at its
       own 8% + size (see .page-indicator-*). Centring between them lets the
       leftover space grow with the screen instead of staying at 110px. */
    top: calc(var(--gutter) + 34px);
    bottom: calc(8% + clamp(90px, 11vw, 140px));
    /* Centred, so the gap under the small numeral and the gap above the big
       one are the same number at every screen size. */
    justify-content: center;
    right: auto;
    /* Spans the content width now that VIEW PROJECT no longer sits to
       the right; capped so cards stay portrait on very wide screens. */
    width: min(1312px, calc(100% - 2 * var(--gutter)));
    gap: 20px;
  }

  .work-frame {
    flex: 0 0 391px;
  }

  /* Pulled back out of the column's height by exactly what it occupies (46px
     of arrow plus the 20px gap above it), so centring measures the cards
     alone. The gap a reader sees is card-to-numeral, and the counter hangs
     into the lower one — it is right-aligned and the numeral is bottom-left,
     so they share that band without ever touching. */
  .work-controls {
    margin-bottom: -66px;
  }

  .work-track {
    gap: 20px;
  }
}

/* The link to the next case study reads as a button. .expanded-content
   already supplies the gutter, so this only needs the top margin. */
.case-next {
  display: inline-block;
  align-self: flex-start;
  margin: 48px 0 0;
  padding: 14px 28px;
  border-radius: 10px;
  background: #1a1a1a;
  color: #fff;
  font-family: "purista-web", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.case-next:hover,
.case-next:focus-visible {
  opacity: 0.85;
}

.dark-panel .case-next {
  background: #fff;
  color: #1a1a1a;
}

@media (min-width: 901px) {
  .contact-content {
    display: block;
    padding: 0;
  }

  .contact-col-left {
    position: absolute;
    left: var(--gutter);
    top: calc(var(--gutter) + 100px);
    width: 340px;
  }

  .contact-col-right {
    position: absolute;
    left: calc(var(--gutter) + 484px);
    top: calc(var(--gutter) + 100px);
    width: 580px;
  }
}

.contact-headline {
  margin: 0;
  font-family: "purista-web", sans-serif;
  font-weight: 200;
  font-size: clamp(38px, 4.56vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
}

.contact-intro {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  line-height: 28px;
  color: #d9d9d9;
}

.contact-email {
  align-self: flex-start;
  margin-top: 4px;
}

.contact-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  width: 100%;
  /* The READ and FOLLOW labels sat flush against the podcast card above. */
  margin-top: 16px;
}

.contact-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-group-label {
  margin: 0;
  font-family: "purista-web", sans-serif;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.contact-group-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-podcast-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 40px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.13);
}

.contact-podcast-logo {
  flex: 0 0 140px;
  width: 140px;
  height: auto;
  align-self: flex-start;
}

.contact-podcast-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.contact-podcast-text {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

.contact-podcast-link {
  margin-top: 8px;
}

@media (max-width: 600px) {
  /* There is no base rule for this: the layout only exists from 901px up, so
     below that the card had no gutter and no column at all and everything
     stacked flush against the top left corner of the panel. */
  .contact-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 104px var(--gutter) var(--gutter);
  }

  .contact-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .contact-intro {
    font-size: 15px;
    line-height: 24px;
  }

  .contact-groups {
    flex-direction: column;
    gap: 20px;
  }

  .contact-podcast-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .contact-group-podcast {
    display: none;
  }

  .contact-group-links .detail-cta-button {
    padding: 11px 20px;
    font-size: 12px;
  }
}

/* Detail sections (Project Two detail page) */

.detail-sections {
  display: flex;
  flex-direction: column;
  gap: 120px;
  padding-bottom: 80px;
  width: 100%;
}

.detail-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 40px;
}

.detail-hero .about-paragraph-large {
  margin-top: 30px;
}

.detail-hero .detail-cta-buttons {
  margin-top: 50px;
}

/* The break after "organized" is phone-only; a display:none <br> does not
   break, so desktop keeps the line as written in data.js. */
.offer-headline-break {
  display: none;
}

@media (max-width: 600px) {
  /* Pushes the headline, subheadline and the two CTA buttons down, away
     from the Close button: 40px base + 15px + 20px. */
  /* Packages is a desktop two-column row: a 360px list beside a flexible
     detail panel. At 393px the detail column lands at x424, fully off
     screen. Stack them instead; tapping a row still swaps the panel. */
  .detail-package-layout {
    flex-direction: column;
    gap: 20px;
  }

  .detail-package-list {
    flex: 0 0 auto;
    width: 100%;
  }

  /* The detail node is moved inside the list, directly after the active
     row. The two are styled as a single card so the row reads as expanding
     in place: the row drops its bottom rounding and border, the detail
     picks up exactly where it ends and repeats neither. It cannot be
     nested inside the row itself, which is a <button> — the proof link in
     the detail would be an anchor inside a button. */
  /* These are scoped through .detail-package-list so they outrank the base
     rules, which are declared later in this file. */
  .detail-package-list .detail-package-row.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    padding-bottom: 16px;
  }

  .detail-package-list .detail-package-detail {
    width: 100%;
    /* -16px cancels the list's row gap so the two boxes meet. */
    margin-top: -16px;
    padding: 0 24px 24px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-top: none;
    border-radius: 0 0 16px 16px;
  }

  /* The row directly above already says "Package N" and its title.
     Scoped through the parent so it outranks the base rule's display:flex,
     which is declared later in this file. */
  .detail-package-detail .detail-package-detail-header {
    display: none;
  }

  .detail-hero {
    padding-top: 75px;
    /* Trims only the hero-to-"The problem" gap (the .detail-sections gap
       is 120px and spaces every section); 120 - 40 = 80px. */
    margin-bottom: -40px;
  }

  .offer-headline-break {
    display: inline;
  }
}

.detail-plus {
  position: absolute;
  opacity: 0.6;
  pointer-events: none;
}

.detail-plus-a {
  top: -10px;
  left: 8%;
  width: 28px;
}

.detail-plus-b {
  bottom: -20px;
  right: 12%;
  width: 44px;
}

.detail-section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
}

.detail-eyebrow {
  font-family: "purista-web", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.detail-package-layout {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.detail-package-list {
  flex: 0 0 360px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-package-row {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.13);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.detail-package-row:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

.detail-package-row.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.45);
}

.detail-package-row-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-package-label {
  font-family: "purista-web", sans-serif;
  font-weight: 300;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.detail-package-title {
  font-family: "purista-web", sans-serif;
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  color: #fff;
}

.detail-package-for {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}

.detail-package-detail {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.13);
}

.detail-package-detail-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-package-detail-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-label {
  font-family: "purista-web", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.detail-package-text {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #d9d9d9;
}

.detail-package-bullets {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-package-bullets li {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #d9d9d9;
}

.detail-meta-value {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  color: #fff;
}

.detail-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  color: #fff;
  text-decoration: none;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
}

.detail-proof-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  object-fit: cover;
}

.detail-proof-text {
  text-decoration: underline;
}

.detail-package-note {
  margin: 8px 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  color: #fff;
  text-align: center;
}

.detail-steps {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 32px;
  max-width: 780px;
  text-align: center;
}

.detail-steps::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.detail-step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.detail-step-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.39);
  font-family: "purista-web", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

.detail-step p {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}

.detail-faq {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.detail-faq-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  padding-bottom: 16px;
}

.detail-faq-q {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #fff;
}

.detail-faq-q::-webkit-details-marker {
  display: none;
}

.detail-faq-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.detail-faq-item[open] .detail-faq-chevron {
  transform: rotate(180deg);
}

.detail-faq-a {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #d9d9d9;
}

.detail-cta-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.detail-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 10px;
  background: #fff;
  color: #1a1a1a;
  font-family: "purista-web", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.detail-cta-button-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.39);
}

.page-indicator-top,
.page-indicator-bottom {
  position: fixed;
  left: var(--gutter);
  z-index: 10;
  color: #1a1a1a;
  pointer-events: none;
  transition: color 0.3s ease;
}

.page-indicator-top.hidden,
.page-indicator-bottom.hidden {
  display: none;
}

.page-indicator-top {
  top: var(--gutter);
  font-family: "purista-web", sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
}

.page-indicator-top.light {
  color: #fff;
}

.page-indicator-bottom {
  bottom: 8%;
  font-family: "purista-web", sans-serif;
  font-weight: 200;
  font-size: clamp(90px, 11vw, 140px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: #1a1a1a;
}

.page-indicator-bottom.light {
  color: #fff;
}

.cal-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-lightbox[hidden] {
  display: none;
}

.cal-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.cal-lightbox-panel {
  position: relative;
  width: min(900px, 92vw);
  height: min(80vh, 850px);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.cal-lightbox-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.cal-lightbox-close {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

/* Keeps detail pages clear of the fixed Choose/Close toolbar. Desktop has
   room beside the headings; tablet and phone case studies do not. */
@media (min-width: 601px) and (max-width: 1199px) {
  .project-item.expanded > .expanded-content {
    padding-top: 130px;
  }
}

@media (max-width: 600px) {
  .project-item .project-item.expanded > .expanded-content {
    padding-top: 80px;
  }
}

/* Tablet portrait: the full "Read more about me" label runs into the
   vertical type, so it uses the phone's shorter label. */
@media (min-width: 601px) and (max-width: 900px) {
  .hero-bio-label-full {
    display: none;
  }

  .hero-bio-label-short {
    display: inline;
  }
}

/* Case study (Paper "Project 1 — Detail"): title, intro beside an aside,
   then full-width images, two-column text and section headings. Image
   blocks keep Paper's 1312px-wide proportions so they scale on any width. */
/* Widow control: `pretty` keeps a lone word off the last line of running
   text, `balance` evens out short headings. Components that need something
   different override this below. */
p,
li,
dd,
figcaption {
  text-wrap: pretty;
}

blockquote,
dt {
  text-wrap: balance;
}

.nowrap {
  white-space: nowrap;
}

.case-study {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 51px;
  width: 100%;
  color: #1a1a1a;
  /* Captions and the section heading, muted against the page colour. */
  --case-muted: rgba(0, 0, 0, 0.5);
}

.case-study p {
  margin: 0;
}

.case-title {
  width: 100%;
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 42px;
  text-transform: uppercase;
}

.case-intro,
.case-aside {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 18px;
  line-height: 28px;
}

.case-intro {
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex: 1 1 0;
  max-width: 543px;
}

.case-aside {
  flex: 0 1 656px;
  margin-left: auto !important;
}

.case-aside-image {
  border-radius: var(--pic-radius);
}

.case-figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
}

.case-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pic-radius);
  object-fit: cover;
}

.case-figure figcaption {
  font-family: system-ui, sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: var(--case-muted);
}

.case-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.case-heading {
  margin: 0;
  font-family: system-ui, sans-serif;
  font-weight: 400;
  font-size: 82px;
  line-height: 100px;
  color: var(--case-muted);
}

.case-columns {
  display: flex;
  gap: 14px;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

.case-columns p {
  flex: 1 1 0;
}

@media (min-width: 1200px) {
  /* Paper starts the title 126px down; expanded-content already pads 64. */
  .case-study {
    padding-top: 62px;
  }
}

@media (max-width: 900px) {
  .case-intro,
  .case-aside {
    flex: 1 1 100%;
    max-width: none;
    margin-left: 0 !important;
  }

  .case-heading {
    font-size: 44px;
    line-height: 52px;
  }

  .case-split-text,
  .case-split-image {
    flex: 1 1 100%;
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .case-study {
    row-gap: 32px;
  }

  .case-title {
    font-size: 28px;
    line-height: 36px;
  }

  .case-intro,
  .case-aside {
    font-size: 16px;
    line-height: 26px;
  }

  .case-columns {
    flex-direction: column;
    gap: 16px;
  }
}


/* ==========================================================================
   Lenorah — editorial case study.
   A left rail of section names beside a ~68ch measure. Ground is pure white
   so the product's amber reads at full chroma; the one dark band is where
   Lenorah speaks. Type is the site's own purista-web for display, Inter for
   anything read at length.
   ========================================================================== */
.ln {
  --ln-ink: #171210;
  --ln-muted: #6d635c;
  --ln-accent: #ff792c;
  /* The accent again, tuned for the dark band where the page accent may be
     too dark to read. Defaults to the page accent. */
  --ln-accent-on-dark: var(--ln-accent);
  --ln-rule: #e3ddd6;
  --ln-dark: #171210;
  --ln-measure: 680px;
  --ln-rail: 220px;

  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  color: var(--ln-ink);
  font-family: "Inter", system-ui, sans-serif;
}

.ln p {
  margin: 0;
}

.ln-banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pic-radius);
  object-fit: cover;
}

/* --- Masthead ------------------------------------------------------------ */
.ln-head {
  padding: 72px 0 56px;
}

.ln-title {
  margin: 0;
  /* Falls back to the body ink, so only a case study that sets the token
     colours its headline differently. */
  color: var(--ln-title, var(--ln-ink));
  font-family: "purista-web", sans-serif;
  font-weight: 700;
  font-size: clamp(64px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

p.ln-subtitle {
  text-wrap: balance;
  margin-top: 10px;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2;
  font-weight: 300;
  color: var(--ln-subtitle, var(--ln-muted));
}

p.ln-deck {
  text-wrap: balance;
  margin-top: 36px;
  max-width: var(--ln-measure);
  font-size: 21px;
  line-height: 32px;
}

.ln-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 32px;
  margin: 48px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--ln-rule);
}

.ln-meta dt {
  font-size: 13px;
  line-height: 18px;
  color: var(--ln-muted);
}

.ln-meta dd {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 24px;
}

/* --- Sections: rail + measure -------------------------------------------- */
.ln-section {
  display: grid;
  grid-template-columns: var(--ln-rail) minmax(0, 1fr);
  gap: 0 48px;
  padding: 56px 0;
  border-top: 1px solid var(--ln-rule);
}

.ln-rail {
  text-wrap: balance;
  margin: 0;
  font-size: 19px;
  line-height: 26px;
  font-weight: 500;
  color: var(--ln-muted);
}

.ln-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: var(--ln-measure);
  font-size: 19px;
  line-height: 31px;
  text-wrap: pretty;
}

.ln-section-wide .ln-body {
  max-width: none;
}

/* Prose inside a wide section stays at the reading measure; only the media
   is allowed to run the full content width. */
.ln-section-wide .ln-body > :not(.ln-carousel):not(.ln-pdf):not(.ln-terms-wide) {
  max-width: var(--ln-measure);
}

/* A term list carrying a diagram: the prose keeps the reading measure, the
   diagram runs the full content width. */
.ln-terms-wide dt,
.ln-terms-wide dd:not(.ln-term-figure) {
  max-width: var(--ln-measure);
}

.ln-term-figure {
  margin: 0 0 24px;
}

/* A system diagram reads better at a fixed size than stretched to the
   content width. The file stays at twice this, so it renders at 2x. */
.ln-term-image {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
}

.ln-lead {
  text-wrap: balance;
  font-size: 26px;
  line-height: 38px;
  font-weight: 300;
  letter-spacing: -0.01em;
}

/* --- Term lists ----------------------------------------------------------- */
.ln-terms {
  margin: 8px 0 0;
}

.ln-terms dt {
  padding-top: 18px;
  border-top: 1px solid var(--ln-rule);
  font-weight: 600;
}

.ln-terms dt:first-child {
  border-top: 0;
  padding-top: 0;
}

.ln-terms dd {
  margin: 4px 0 20px;
  color: var(--ln-muted);
}

.ln-terms dd:last-child {
  margin-bottom: 0;
}

/* --- Who did what: a responsibility map, scanned rather than read ------- */
.ln-roles {
  margin: 8px 0 0;
}

.ln-role {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 8px 32px;
  padding: 16px 0;
  border-top: 1px solid var(--ln-rule);
}

.ln-role:first-child {
  border-top: 0;
  padding-top: 0;
}

.ln-role dt {
  margin: 0;
  font-weight: 600;
}

.ln-role dd {
  margin: 0;
  color: var(--ln-muted);
}

@media (max-width: 600px) {
  .ln-role {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* --- The one bold moment: Lenorah speaking -------------------------------- */
.ln-voice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr);
  align-items: center;
  gap: 56px;
  margin-inline: calc(-1 * var(--gutter));
  padding: 72px var(--gutter);
  background: var(--ln-dark);
  color: var(--ln-dark-ink, #f6f1ec);
}

.ln-voice-lines {
  display: flex;
  flex-direction: column;
  gap: 28px;
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.35;
  font-weight: 300;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* The middle line is Elena answering, not Lenorah. */
.ln-voice-lines p:nth-child(2) {
  color: var(--ln-accent-on-dark);
  padding-left: 28px;
  border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

/* Cropped to the hand and phone: the spoken lines are set in type beside it,
   so the speech bubbles in the source frame would only repeat them. */
.ln-voice-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--pic-radius);
}

/* --- Feature list --------------------------------------------------------- */
.ln-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 17px;
}

.ln-features li {
  padding: 12px 0;
  border-top: 1px solid var(--ln-rule);
}

/* --- Pull quote ----------------------------------------------------------- */
.ln-quote {
  text-wrap: balance;
  margin: 12px 0;
  padding-left: 24px;
  border-left: 2px solid var(--ln-accent);
  font-size: 22px;
  line-height: 33px;
  font-weight: 300;
}

/* --- App screens: a click-through carousel ------------------------------- */
.ln-carousel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.ln-carousel:focus-visible {
  outline: 2px solid var(--ln-accent);
  outline-offset: 6px;
  border-radius: var(--pic-radius);
}

.ln-carousel-frame {
  position: relative;
  width: 100%;
  border-radius: var(--pic-radius);
  overflow: hidden;
  cursor: pointer;
  background: #f1eeea;
}

.ln-carousel-frame .ln-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.ln-carousel-frame .ln-slide.is-active {
  opacity: 1;
}

/* Media that has no artwork yet. */
.ln-ph {
  display: grid;
  place-items: center;
  border: 1px dashed color-mix(in srgb, currentColor 32%, transparent);
  background: color-mix(in srgb, currentColor 7%, transparent);
  border-radius: var(--pic-radius);
  color: inherit;
}

.ln-ph span {
  padding: 0 24px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  opacity: 0.75;
}

.ln-plate.ln-ph {
  border-radius: 0;
  border-inline: 0;
}

.ln-carousel-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ln-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--ln-rule);
  border-radius: 50%;
  background: transparent;
  color: var(--ln-ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* The hover fill is a fixed near-white, so the chevron and the ring have to
   be a fixed dark too. Taking them from --ln-ink put a white chevron on a
   white disc in every dark-ground case study. */
.ln-arrow:hover {
  border-color: #1a1a1a;
  background: #f6f3f0;
  color: #1a1a1a;
}

.ln-arrow:focus-visible {
  outline: 2px solid var(--ln-accent);
  outline-offset: 3px;
}

p.ln-counter {
  margin-left: 10px;
  font-family: "purista-web", sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--ln-muted);
}

.ln-counter b {
  font-weight: 700;
  color: var(--ln-ink);
}

/* --- Tiles: a row of square cards used as navigation ---------------------- */
.ln-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 20px;
  width: 100%;
  padding: 56px 0;
  border-top: 1px solid var(--ln-rule);
}

.ln-tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}

.ln-tile-face {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: 20px;
  border-radius: var(--pic-radius);
  background: #1a1a1a;
  color: #fff;
  font-family: "purista-web", sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  object-fit: cover;
  transition: background 0.15s ease;
}

/* Every experiment is still unbuilt; the tile says so where a reader clicks. */
.ln-tile-status {
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.75);
}

a.ln-tile:hover .ln-tile-face,
a.ln-tile:focus-visible .ln-tile-face {
  background: #000;
}

a.ln-tile:focus-visible {
  outline: 2px solid var(--ln-accent);
  outline-offset: 4px;
  border-radius: var(--pic-radius);
}

.ln-tile-heading {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 26px;
  text-wrap: balance;
}

p.ln-tile-body {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--ln-muted);
  text-wrap: pretty;
}

/* --- Numbers -------------------------------------------------------------- */
/* auto-fit rather than a fixed four, so a case study with three stats
   spreads across the rule instead of leaving a column-wide hole under it. */
.ln-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 32px;
  padding: 56px 0;
  border-top: 1px solid var(--ln-rule);
}

.ln-figure {
  font-family: "purista-web", sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* The unit sits under the number rather than beside it. Inline, a figure like
   "3,000 concepts" ran three times the width of "25" and crowded the column
   next to it, which no amount of column spacing could even out. Stacked, every
   figure is just its numerals wide. The reserved line keeps the captions on
   one baseline when a stat has no unit. */
.ln-figure span {
  display: block;
  margin-top: 8px;
  min-height: 1em;
  font-size: 0.3em;
  letter-spacing: 0.04em;
  color: var(--ln-accent);
}

p.ln-stat-caption {
  /* Captions are short; balance evens the lines instead of leaving one
     word stranded on the last. */
  text-wrap: balance;
  margin-top: 14px;
  font-size: 15px;
  line-height: 23px;
  color: var(--ln-muted);
}

.ln-plate {
  display: block;
  height: auto;
  margin-inline: calc(-1 * var(--gutter));
  width: calc(100% + 2 * var(--gutter));
  max-width: none;
  object-fit: cover;
}

p.ln-closing {
  margin-top: 12px;
  font-size: 24px;
  line-height: 36px;
  font-weight: 300;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* --- Narrow ---------------------------------------------------------------- */
@media (max-width: 900px) {
  .ln-voice {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .ln-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 44px 0;
  }

  .ln-rail {
    font-size: 15px;
    color: var(--ln-accent);
  }

  .ln-meta,
  .ln-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ln-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ln-tiles {
    gap: 28px 20px;
    padding: 44px 0;
  }
}

@media (max-width: 600px) {
  .ln-head {
    padding: 48px 0 40px;
  }

  p.ln-deck {
    margin-top: 28px;
    font-size: 18px;
    line-height: 28px;
  }

  .ln-body {
    font-size: 17px;
    line-height: 28px;
  }

  .ln-lead {
    font-size: 21px;
    line-height: 31px;
  }

  .ln-features,
  .ln-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .ln-voice-lines {
    gap: 20px;
  }

  .ln-closing {
    font-size: 19px;
    line-height: 29px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ln-carousel-frame .ln-slide,
  .ln-arrow {
    transition: none;
  }
}

/* An unlisted case study has no card, no Choose entry and no collapsed panel.
   It exists only at its own hash. The .expanded state wins, so opening it
   still works. */
.project-item.unlisted-item:not(.expanded) {
  display: none;
}

/* Phone overrides for components declared further up this file. A media query
   adds no specificity, so these have to sit after the rules they replace or
   they lose the cascade silently. */
@media (max-width: 600px) {
  /* Equal breathing room above and below, and the block centred in what is
     left, rather than pinned to the top with a dead band underneath. */
  .work-cards {
    top: 88px;
    bottom: 88px;
    justify-content: center;
  }

  /* width: max-content made this 353px wide, anchored right inside a toolbar
     near the right edge, so it opened off the side of the screen. Pin it to
     the viewport instead and let the long titles wrap. */
  .detail-nav-list {
    position: fixed;
    top: 122px;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    min-width: 0;
    max-height: 0;
  }

  .detail-nav:hover .detail-nav-list,
  .detail-nav.is-open .detail-nav-list {
    max-height: min(480px, calc(100vh - 160px));
    overflow-y: auto;
  }

  .detail-nav-item {
    white-space: normal;
  }

  /* The case study banner is a wide strip cropped for desktop. At phone width
     it collapses to a sliver that reads as a glitch above the title. */
  .ln-banner {
    display: none;
  }
}

/* An embedded deck. Sits in the same full-width slot a carousel would, with
   the same corner radius as the photographs. */
.ln-pdf {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  /* Hugs the slide so the controls row ends where the slide ends, and the
     whole block sits on the left edge of the column rather than centred. */
  width: fit-content;
  max-width: 100%;
}

.ln-pdf-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: fit-content;
  max-width: 100%;
  min-width: min(320px, 100%);
  /* Matches the height allowance the renderer uses, so the placeholder box
     before load is the same size as the painted slide and nothing jumps. */
  max-height: max(320px, calc(100svh - 170px));
  overflow: hidden;
  border: 1px solid var(--ln-rule);
  border-radius: var(--pic-radius);
  background: #fff;
}

/* At fit-width the whole page is visible. Only a zoomed page is boxed and
   scrolled, so the stage never crops a slide at its default size. */
.ln-pdf-scroll {
  width: 100%;
  display: grid;
  place-items: start center;
}

.ln-pdf-canvas {
  display: block;
  max-width: none;
}

.ln-pdf-status {
  position: absolute;
  margin: 0;
  font-size: 14px;
  color: #6b6b6b;
}

.ln-pdf-full {
  margin-left: auto;
  width: 34px;
  height: 34px;
}

/* The browser hands the figure the whole display, so it stops hugging the
   slide and centres it instead. */
.ln-pdf:fullscreen {
  width: 100%;
  height: 100%;
  max-width: none;
  justify-content: center;
  padding: 24px;
  background: #101010;
}

.ln-pdf:fullscreen .ln-pdf-stage {
  max-height: none;
  border-color: transparent;
}

.ln-pdf:fullscreen .ln-pdf-controls {
  color: #f2f2f2;
}

.ln-pdf:fullscreen .ln-arrow {
  border-color: rgba(242, 242, 242, 0.35);
  color: #f2f2f2;
}

/* Beats the rule above, which is more specific than .ln-arrow:hover. */
.ln-pdf:fullscreen .ln-arrow:hover {
  border-color: #1a1a1a;
  color: #1a1a1a;
}

.ln-pdf:fullscreen .ln-counter {
  color: rgba(242, 242, 242, 0.7);
}

.ln-pdf:fullscreen .ln-counter b {
  color: #f2f2f2;
}

.ln-counter i {
  font-style: normal;
}

/* Nested stacks hold the case studies: one long read each, so they do not
   snap the way the panels above them do. */
.project-item .pan-viewport {
  scroll-snap-type: none;
}

/* The clamp floor of 64px assumed a title could wrap. Single-word titles
   like BENCHNOTES and DRAUGHTMASTER cannot, so on a phone they ran past the
   gutter and were clipped. Scale with the viewport instead. */
@media (max-width: 600px) {
  .ln-title {
    font-size: clamp(30px, 9.5vw, 64px);
  }
}

/* On a phone the page picker stays on screen: there is no hover to summon it
   back, and no banner above it that it needs to keep clear of. */
@media (max-width: 600px) {
  .detail-nav,
  .detail-toolbar.is-idle {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* --- Button hover states -------------------------------------------------- */
/* The arrows, work cards and nav items already had one. These are the solid
   pills: a short background shift, nothing that moves the layout. */
.detail-cta-button,
.detail-close,
.detail-nav-toggle,
.view-button,
.offer-cta,
.nav-toggle,
.cal-lightbox-close,
.about-linkedin-link,
.detail-proof,
.detail-faq-q {
  transition: background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease, opacity 0.18s ease;
}

/* Light pill on a dark ground. */
.detail-cta-button:hover,
.detail-cta-button:focus-visible {
  background: #d9d9d9;
}

/* Outlined pill: fill it rather than tint it, so the change is unmistakable. */
.detail-cta-button-secondary:hover,
.detail-cta-button-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.8);
  color: #fff;
}

/* Dark pills lighten, since they sit on pale and dark grounds alike. */
.detail-close:hover,
.detail-close:focus-visible,
.detail-nav-toggle:hover,
.detail-nav-toggle:focus-visible,
.view-button:hover,
.view-button:focus-visible {
  background: #3a3a3a;
}

/* SHOW ME already sits at the hover colour of the pills above, so it takes
   the same step again rather than landing on a shade it is already wearing. */
.offer-cta:hover,
.offer-cta:focus-visible {
  background: #4f4f4f;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  opacity: 0.6;
}

/* Icon and text links: nothing to fill, so they fade instead. */
.about-linkedin-link:hover,
.about-linkedin-link:focus-visible,
.detail-proof:hover,
.detail-proof:focus-visible,
.detail-faq-q:hover {
  opacity: 0.7;
}

.cal-lightbox-close:hover,
.cal-lightbox-close:focus-visible {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .detail-cta-button,
  .detail-close,
  .detail-nav-toggle,
  .view-button,
  .offer-cta,
  .nav-toggle,
  .cal-lightbox-close,
  .about-linkedin-link,
  .detail-proof,
  .detail-faq-q {
    transition-duration: 0.01ms;
  }
}

/* --- Mid-page call to action --------------------------------------------- */
/* Sits between "How we start" and "Questions", where someone has read the
   packages and the first step is a call. The same two buttons as the top of
   the page, centred and unruled so it reads as an invitation rather than
   another section. */
.detail-midcta {
  display: flex;
  justify-content: center;
  margin-block: -40px;
}

@media (max-width: 600px) {
  .detail-midcta {
    margin-block: -24px;
  }
}