/**
 * "Why this project?" (v2) — the dark benefits band in the language of the
 * home page's momentum rail (projects-rail.css).
 *
 * - .deka-benefits2--cards: a rail of 4:5 photo cards, the first on the
 *   heading's line, the row bleeding off the right edge of the page and ending
 *   on the frame's right line. Under each photo: a Cashmere mono index, a
 *   hairline that draws across on hover / focus and the caption in the display
 *   face. A rolling counter and hairline arrows sit at the right of the
 *   heading; a progress line runs under the row. 3.5 cards in view (4.25 on
 *   very wide screens, 2.5 on tablets, 1.25 on phones), so a row that does not
 *   fit always ends on part of a photo. A row that fits (Garemo's three on a
 *   desktop) is a still, evenly filled row without controls.
 * - .deka-benefits2--list: a ruled grid of numbered cells, no images.
 *
 * project-benefits-v2.js toggles the state classes: --ready, --static,
 * --physics / --native, --cursor, -is-moving, -is-dragging.
 *
 * Colours come from the brand layer's tokens (--dk-*) when present, through the
 * --deka-b2-* set below, so nothing here depends on the brand being loaded.
 */

.deka-benefits2 {
  --deka-b2-ground: var(--dk-black, var(--deka-surface-page));
  --deka-b2-black: var(--dk-black, var(--deka-black));
  --deka-b2-off: var(--dk-off, var(--deka-white));
  --deka-b2-accent: var(--dk-cashmere, var(--deka-oxblood-500));
  --deka-b2-stone: var(--dk-stone, var(--deka-grey-300));
  --deka-b2-raised: var(--dk-charcoal, var(--deka-surface-raised));
  --deka-b2-line: var(--dk-line, rgb(250 247 246 / 16%));
  --deka-b2-mono: var(--dk-mono, var(--deka-font-body));
  --deka-b2-ease: var(--dk-ease, var(--deka-ease-out));
  --deka-b2-ease-out: var(--deka-ease-out);

  position: relative;
  background: var(--deka-b2-ground);
  color: var(--deka-b2-off);
}

/*
 * The band is as wide as the page (scrollbar excluded), so it is the measure
 * for the rail's bleed (100cqi below). The clip is a safety net: the bleed
 * lands exactly on the band's edges, but nothing in it may ever make the page
 * scroll sideways. The container lives here rather than on the section: a
 * container is the containing block of fixed descendants, and the drag
 * cursor (a sibling of the band) must stay fixed to the window.
 *
 * Rail measures:
 *   --deka-b2-inset  page edge to the heading's line: the section's side
 *                    padding plus, past the 1800 frame, the frame's margin;
 *   --deka-b2-frame  heading's line to the frame's right line;
 *   --deka-b2-w      one card: the frame shared by the cards in view, with
 *                    the gaps between them taken out. A project with fewer
 *                    cards than fit (three, at 3.5 in view) fills the frame
 *                    with them instead of leaving half a card's hole; one or
 *                    two cards keep a third of the frame each.
 */
.deka-benefits2__band {
  --deka-b2-pad: var(--deka-space-lg, 2rem);
  --deka-b2-inset: max(var(--deka-b2-pad), (100cqi - 112.5rem) / 2 + var(--deka-b2-pad));
  --deka-b2-frame: calc(100cqi - 2 * var(--deka-b2-inset));
  --deka-b2-gap: clamp(12px, 1.6vw, 24px);
  --deka-b2-visible: 3.5;
  --deka-b2-gaps: 3;
  --deka-b2-v: min(var(--deka-b2-visible), max(var(--deka-b2-n, 4), 3));
  --deka-b2-g: min(var(--deka-b2-gaps), max(var(--deka-b2-n, 4), 3) - 1);
  --deka-b2-w: calc((var(--deka-b2-frame) - var(--deka-b2-g) * var(--deka-b2-gap)) / var(--deka-b2-v));

  container-type: inline-size;
  overflow: hidden;
  overflow: clip;
}

.deka-benefits2 :focus-visible { outline-color: var(--deka-b2-accent); }

/* ==========================================================================
   Heading
   ========================================================================== */

.deka-benefits2__heading {
  flex: 1 1 28rem;
  min-width: 0;
}

/* Two classes deep: the brand colours these graphite for light sections. */
.deka-benefits2 .deka-section-head .deka-section-head__eyebrow { color: var(--deka-b2-accent); }
.deka-benefits2 .deka-section-head .deka-section-head__lead { color: rgb(250 247 246 / 78%); }

/* The lead is wysiwyg, so it arrives as paragraphs inside the lead block. */
.deka-benefits2 .deka-section-head__lead p { margin: 0 0 0.75em; }
.deka-benefits2 .deka-section-head__lead p:last-child { margin-bottom: 0; }

/* --- Controls: rolling counter + hairline arrows ---------------------------- */

/* Shown once the script has measured the row and found it overflows. */
.deka-benefits2__controls {
  display: none;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-right: -10px; /* the arrows' own side room: the head lands on the frame line */
  margin-left: auto;   /* stays on the right when it wraps under the heading (tablets) */
}

.deka-benefits2--ready:not(.deka-benefits2--static) .deka-benefits2__controls { display: flex; }

.deka-benefits2__count {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--deka-b2-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--deka-b2-stone);
}

.deka-benefits2__count-cur {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.4em;
  color: var(--deka-b2-off);
}

.deka-benefits2__count-cur span { display: block; }
.deka-benefits2__count-cur span + span { position: absolute; top: 0; left: 0; }

.deka-benefits2__count-dash {
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.deka-benefits2__arrows { display: flex; }

.deka-benefits2__arrow {
  --deka-b2-shaft: 60px;
  position: relative;
  width: calc(var(--deka-b2-shaft) + 20px);
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--deka-b2-off);
  cursor: pointer;
  transition: color 0.35s var(--deka-b2-ease);
}

.deka-benefits2__arrow-in {
  position: absolute;
  top: 50%;
  right: 10px;
  width: var(--deka-b2-shaft);
  height: 11px;
  margin-top: -5.5px;
  transition: opacity 0.5s var(--deka-b2-ease);
}

.deka-benefits2__arrow--prev .deka-benefits2__arrow-in {
  right: auto;
  left: 10px;
  transform: scaleX(-1);
}

.deka-benefits2__shaft {
  position: absolute;
  top: 5px;
  right: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.72);
  transform-origin: 100% 50%;
  transition: transform 0.7s var(--deka-b2-ease-out);
}

.deka-benefits2__tip {
  position: absolute;
  top: 1.5px;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateX(-1px) rotate(45deg);
}

.deka-benefits2__arrow[aria-disabled='true'] { cursor: default; }
.deka-benefits2__arrow[aria-disabled='true'] .deka-benefits2__arrow-in { opacity: 0.28; }
.deka-benefits2__arrow[aria-disabled='true'] .deka-benefits2__shaft { transform: scaleX(0.38); }

@media (hover: hover) and (pointer: fine) {
  .deka-benefits2__arrow:not([aria-disabled='true']):hover { color: var(--deka-b2-accent); }
  .deka-benefits2__arrow:not([aria-disabled='true']):hover .deka-benefits2__shaft { transform: scaleX(1); }
}

.deka-benefits2__arrow:focus-visible {
  outline: 2px solid var(--deka-b2-accent);
  outline-offset: -2px;
  border-radius: 0;
}

/* ==========================================================================
   Rail
   ========================================================================== */

/*
 * The viewport spans the band from page edge to page edge; its start padding
 * puts the first card back on the heading's line, and the track's end padding
 * lets the last card stop on the frame's right line. The few pixels of clip
 * room above and below keep the focus ring and the lean inside the clip.
 *
 * Without the script (and on touch devices) it is a native scroll-snap
 * scroller; with a mouse the script clips it and moves the track itself.
 */
.deka-benefits2__viewport {
  --deka-b2-clip: 10px;
  position: relative;
  margin: calc(-1 * var(--deka-b2-clip)) calc(-1 * var(--deka-b2-inset));
  padding: var(--deka-b2-clip) 0 var(--deka-b2-clip) var(--deka-b2-inset);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--deka-b2-inset);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
}

.deka-benefits2__viewport::-webkit-scrollbar { display: none; }

/* No script: the row itself takes the ring when it has keyboard focus. */
.deka-benefits2:not(.deka-benefits2--ready) .deka-benefits2__viewport:focus-visible {
  outline: 2px solid var(--deka-b2-accent);
  outline-offset: -2px;
}

.deka-benefits2--physics .deka-benefits2__viewport {
  overflow: clip;
  scroll-snap-type: none;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

/* A row that fits stays put: no stray pixel of sideways scroll for a wheel or a thumb. */
.deka-benefits2--static .deka-benefits2__viewport {
  overflow: clip;
  scroll-snap-type: none;
}

.deka-benefits2--physics.deka-benefits2-is-dragging .deka-benefits2__viewport,
.deka-benefits2--physics.deka-benefits2-is-dragging .deka-benefits2__viewport * { cursor: grabbing; }

/* Qualified with the tag so base.css's ul[role="list"] reset cannot take the padding back. */
ul.deka-benefits2__track {
  position: relative;
  display: flex;
  gap: var(--deka-b2-gap);
  width: max-content;
  margin: 0;
  padding: 0 var(--deka-b2-inset) 0 0;
  list-style: none;
}

.deka-benefits2--physics .deka-benefits2__track { will-change: transform; }

.deka-benefits2__slide {
  flex: none;
  width: var(--deka-b2-w);
  scroll-snap-align: start;
  container-type: inline-size;
}

/* --- Card ---------------------------------------------------------------- */

.deka-benefits2__card {
  position: relative;
  margin: 0;
  backface-visibility: hidden;
}

.deka-benefits2--physics .deka-benefits2__card,
.deka-benefits2--native .deka-benefits2__card { will-change: transform, opacity; }

.deka-benefits2__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--deka-b2-raised);
}

/* Oversized frame: the photo drifts sideways inside it while the rail moves. */
.deka-benefits2__drift {
  position: absolute;
  inset: -3% -9%;
}

.deka-benefits2--physics .deka-benefits2__drift,
.deka-benefits2--native .deka-benefits2__drift { will-change: transform; }

.deka-benefits2__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 1s var(--deka-b2-ease-out);
  -webkit-user-drag: none;
  user-select: none;
}

/* A quiet shade at the foot, so the photo settles into the ground above its caption. */
.deka-benefits2__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(34 33 34 / 52%) 0%, rgb(34 33 34 / 16%) 24%, rgb(34 33 34 / 0%) 46%);
  pointer-events: none;
}

.deka-benefits2__caption {
  display: block;
  padding-top: clamp(1rem, 1.3vw, 1.25rem);
}

.deka-benefits2__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.deka-benefits2__index {
  flex: none;
  font-family: var(--deka-b2-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--deka-b2-accent);
}

.deka-benefits2__rule {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  overflow: hidden;
  background: var(--deka-b2-line);
}

.deka-benefits2__rule span {
  position: absolute;
  inset: 0;
  background: var(--deka-b2-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.8s var(--deka-b2-ease-out);
}

/* Two lines at most; the bit of bottom room keeps Georgian descenders whole.
   One size for the whole row: a caption that reads as a sentence (flagged by
   the template from its length) takes a third line rather than a smaller face. */
.deka-benefits2__name {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 0.875rem;
  padding-bottom: 0.08em;
  font-family: var(--deka-font-display);
  font-stretch: 72%;
  font-size: var(--deka-b2-name, clamp(1.125rem, 6.1cqi, 1.5rem));
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--deka-b2-off);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  transition: transform 0.7s var(--deka-b2-ease-out);
}

.deka-benefits2__name--long {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* Only when a row carries a URL: the caption's link covers the whole card. */
.deka-benefits2__link,
.deka-benefits2__link:hover,
.deka-benefits2__link:focus {
  display: block;
  color: var(--deka-b2-off);
  text-decoration: none;
  outline: none;
  -webkit-user-drag: none;
}

.deka-benefits2__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.deka-benefits2__link:focus-visible::after {
  outline: 2px solid var(--deka-b2-accent);
  outline-offset: 4px;
}

/* Hover only when the rail is still, on devices that hover. */
@media (hover: hover) and (pointer: fine) {
  .deka-benefits2:not(.deka-benefits2-is-moving) .deka-benefits2__card:hover .deka-benefits2__img { transform: scale(1.04); }
  .deka-benefits2:not(.deka-benefits2-is-moving) .deka-benefits2__card:hover .deka-benefits2__rule span { transform: scaleX(1); }
  .deka-benefits2:not(.deka-benefits2-is-moving) .deka-benefits2__card:hover .deka-benefits2__name { transform: translateY(-4px); }
}

/* Keyboard: the row is one tab stop; the card the counter points at shows it.
   Touch (no hover): the line draws under each card as it settles into place. */
.deka-benefits2__viewport:focus-visible .deka-benefits2__card.is-current .deka-benefits2__rule span,
.deka-benefits2__card:focus-within .deka-benefits2__rule span,
.deka-benefits2--native .deka-benefits2__card.is-current .deka-benefits2__rule span { transform: scaleX(1); }

.deka-benefits2__viewport:focus-visible .deka-benefits2__card.is-current .deka-benefits2__media {
  outline: 2px solid var(--deka-b2-accent);
  outline-offset: 4px;
}

/* --- Progress hairline --------------------------------------------------------- */

.deka-benefits2__foot {
  display: none;
  align-items: center;
  gap: 1.5rem;
  margin-top: clamp(1.75rem, 2.6vw, 2.5rem);
}

.deka-benefits2--ready:not(.deka-benefits2--static) .deka-benefits2__foot { display: flex; }

/* The counter sits in the heading on wider screens; on phones it moves down here. */
.deka-benefits2__count--foot { display: none; }

.deka-benefits2__progress {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  background: var(--deka-b2-line);
}

.deka-benefits2__thumb {
  position: absolute;
  top: -1px;
  left: 0;
  width: 40%;
  height: 3px;
  background: var(--deka-b2-accent);
  will-change: transform;
}

/* --- Drag cursor (fine pointers only) ---------------------------------------- */

.deka-benefits2__cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  .deka-benefits2--cursor .deka-benefits2__viewport,
  .deka-benefits2--cursor .deka-benefits2__viewport * { cursor: none; }

  .deka-benefits2--cursor .deka-benefits2__cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 250;
    display: block;
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
    pointer-events: none;
    will-change: transform;
  }
}

/* A dark band: the disc is Cashmere with Black glyphs. */
.deka-benefits2__cursor-body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--deka-b2-accent);
  color: var(--deka-b2-black);
  opacity: 0;
  transform: scale(0.3);
  transition: transform 0.5s var(--deka-b2-ease-out), opacity 0.35s var(--deka-b2-ease);
}

.deka-benefits2__cursor:not(.deka-benefits2__cursor--on) .deka-benefits2__cursor-body { transition-duration: 0.3s, 0.2s; }
.deka-benefits2__cursor--on .deka-benefits2__cursor-body { opacity: 1; transform: scale(1); }
.deka-benefits2__cursor--on.deka-benefits2__cursor--drag .deka-benefits2__cursor-body { transform: scale(0.6667); }

.deka-benefits2__cursor-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: opacity 0.3s var(--deka-b2-ease);
}

.deka-benefits2__cursor-ring text {
  font-family: var(--deka-b2-mono);
  font-size: 11px;
  font-weight: 500;
  fill: var(--deka-b2-black);
}

.deka-benefits2__cursor--drag .deka-benefits2__cursor-ring { opacity: 0; }

.deka-benefits2__cursor-arrows {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.deka-benefits2__cursor-arrows svg {
  width: 14px;
  height: 9px;
  transition: transform 0.45s var(--deka-b2-ease-out), opacity 0.3s var(--deka-b2-ease);
}

.deka-benefits2__cursor--drag .deka-benefits2__cursor-arrows svg:first-child { transform: translateX(-3px); }
.deka-benefits2__cursor--drag .deka-benefits2__cursor-arrows svg:last-child { transform: translateX(3px); }
.deka-benefits2__cursor--left .deka-benefits2__cursor-arrows svg:last-child,
.deka-benefits2__cursor--right .deka-benefits2__cursor-arrows svg:first-child { opacity: 0.3; }

/* ==========================================================================
   Ruled list (projects without photos)
   ========================================================================== */

/*
 * A line over the grid, one under every cell, and a vertical line before every
 * cell that does not start a row. Lines hang off the cells (not the grid's
 * foot) so a short last row — Verona's seven in threes — closes off cleanly.
 * The first column has no left padding so its text lines up with the heading;
 * a short Cashmere tick marks the top of every cell.
 */
.deka-benefits2__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--deka-b2-line);
}

.deka-benefits2__item {
  --deka-b2-cell: var(--deka-space-md, 1.5rem);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--deka-space-lg, 2rem);
  min-height: 10rem;
  padding: var(--deka-b2-cell) var(--deka-b2-cell) var(--deka-space-lg, 2rem);
  border-bottom: 1px solid var(--deka-b2-line);
}

.deka-benefits2__item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: var(--deka-b2-cell);
  width: 1.75rem;
  height: 1px;
  background: var(--deka-b2-accent);
}

.deka-benefits2__item:nth-child(n) { border-left: 1px solid var(--deka-b2-line); }

.deka-benefits2__item:nth-child(3n + 1) {
  padding-left: 0;
  border-left: 0;
}

.deka-benefits2__item:nth-child(3n + 1)::before { left: 0; }

.deka-benefits2__item-index {
  font-family: var(--deka-b2-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--deka-b2-accent);
}

.deka-benefits2__item-name {
  max-width: 18em;
  margin: 0;
  font-family: var(--deka-font-display);
  font-stretch: 72%;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--deka-b2-off);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Very wide screens: more of the row in view, cards stay a comfortable size. */
@media (min-width: 100rem) {
  .deka-benefits2__band {
    --deka-b2-visible: 4.25;
    --deka-b2-gaps: 4;
  }
}

@media (max-width: 63.9375rem) {
  .deka-benefits2__band {
    --deka-b2-visible: 2.5;
    --deka-b2-gaps: 2;
  }

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

  .deka-benefits2__item:nth-child(n) {
    padding-left: var(--deka-b2-cell);
    border-left: 1px solid var(--deka-b2-line);
  }

  .deka-benefits2__item:nth-child(n)::before { left: var(--deka-b2-cell); }

  .deka-benefits2__item:nth-child(2n + 1) {
    padding-left: 0;
    border-left: 0;
  }

  .deka-benefits2__item:nth-child(2n + 1)::before { left: 0; }
}

@media (max-width: 48rem) {
  .deka-benefits2__item { min-height: 8.5rem; }
}

/*
 * Phones: one card fills most of the width with the next peeking in; the
 * arrows go (a swipe is the gesture here) and the counter joins the progress
 * line under the row. The list becomes plain rows, number beside title.
 */
@media (max-width: 40rem) {
  .deka-benefits2__band {
    --deka-b2-pad: 1.25rem;
    --deka-b2-visible: 1.25;
    --deka-b2-gaps: 1;
  }

  .deka-benefits2--ready:not(.deka-benefits2--static) .deka-benefits2__controls { display: none; }
  .deka-benefits2__count--foot { display: inline-flex; }

  .deka-benefits2__name { --deka-b2-name: 1.25rem; }

  /* A phone card is narrow: a sentence-long caption may need a fourth line. */
  .deka-benefits2__name--long {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  .deka-benefits2__list { grid-template-columns: minmax(0, 1fr); }

  .deka-benefits2__item,
  .deka-benefits2__item:nth-child(n) {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0;
    min-height: 0;
    padding: 1.25rem 0;
    border-left: 0;
  }

  .deka-benefits2__item:nth-child(n)::before { left: 0; }

  .deka-benefits2__item-name { font-size: 1.125rem; }
}

/* --- Reduced motion: no zoom, no lift, no drawn lines; plain fades. -------- */

@media (prefers-reduced-motion: reduce) {
  .deka-benefits2__img,
  .deka-benefits2__name,
  .deka-benefits2__shaft,
  .deka-benefits2__arrow { transition: none; }

  .deka-benefits2:not(.deka-benefits2-is-moving) .deka-benefits2__card:hover .deka-benefits2__img,
  .deka-benefits2:not(.deka-benefits2-is-moving) .deka-benefits2__card:hover .deka-benefits2__name { transform: none; }

  .deka-benefits2__rule span {
    transform: none;
    opacity: 0;
    transition: opacity 0.3s linear;
  }

  .deka-benefits2:not(.deka-benefits2-is-moving) .deka-benefits2__card:hover .deka-benefits2__rule span,
  .deka-benefits2__viewport:focus-visible .deka-benefits2__card.is-current .deka-benefits2__rule span,
  .deka-benefits2__card:focus-within .deka-benefits2__rule span,
  .deka-benefits2--native .deka-benefits2__card.is-current .deka-benefits2__rule span {
    transform: none;
    opacity: 1;
  }
}