/* =====================================================================
   DUNBEN — Delivery Cards module (homepage "A hybrid approach" section)
   Replaces the old text-block-simple-left + block-cards-services sections.
   Standalone module: NOT wired into app.min.js. Scoped under .dv-dc.
   Spec source: Figma "Dilivery" frame 4:5 (1920-wide). px ÷ 19.2 = vw.
   Phase 1 = static layout. Per-card interactions come in phase 2; each
   card is an isolated .dv-dc__card[data-card] so it can get its own JS.
   ===================================================================== */

.dv-dc {
  --dv-gap: 1.04vw;          /* 20px */
  --dv-radius: 1.04vw;       /* 20px */
  --dv-text: #1a1813;
  --dv-label: #b8b8b8;
  --dv-muted: #6c6c6c;
  --dv-orange: #ff8f29;
  --dv-blue: #2d6bf2;
  --dv-stack-gap-after-base: 28vh;
  box-sizing: border-box;
}

.dv-dc > .overlay {
  display: none !important;
}

/* Stacking base: registered as the first block-cards-services .content panel,
   so the original GSAP/ScrollTrigger stack treats it like the panel that
   Signature Works should cover. */
.dv-dc--stack {
  position: relative;
  min-height: 100lvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  background: #fff;
  padding: 4vw 0;
  box-sizing: border-box;
}

.dv-dc-stack-section > .container.--full > .content {
  position: relative;
  z-index: 1;
}

.dv-dc-stack-section > .container.--full > .content:nth-of-type(2) { z-index: 2; }
.dv-dc-stack-section > .container.--full > .content:nth-of-type(3) { z-index: 3; }
.dv-dc-stack-section > .container.--full > .content:nth-of-type(4) { z-index: 4; }

@media (min-width: 1101px) {
  .dv-dc-stack-section {
    padding-top: 0;
  }

  .dv-dc-stack-section > .container.--full > .content {
    position: sticky !important;
    top: 0;
    height: 100lvh;
    margin-bottom: 0;
    padding-bottom: 0;
    transform: none !important;
    will-change: transform;
  }

  .dv-dc-stack-section > .container.--full > .dv-dc-stack-base {
    margin-bottom: var(--dv-stack-gap-after-base);
  }

  .dv-dc-stack-section > .container.--full > .dv-dc-stack-base > .overlay {
    opacity: 0 !important;
  }

  .dv-dc-stack-section > .container.--full > .content:last-of-type {
    margin-bottom: 0;
  }
}

/* ---------- headline ---------- */
.dv-dc__head { text-align: center; margin: 0 auto 3.6vw; padding: 0 10.8vw; }
.dv-dc__title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-style: normal;
  color: var(--dv-text);
  font-size: 3.125vw;        /* 60px */
  line-height: 1.08;
  letter-spacing: -0.0625vw;  /* ~-1.2px */
  margin: 0;
}
.dv-dc__accent {
  font-family: var(--font-primary);
  font-style: italic;
  color: var(--dv-blue);
}
.dv-dc__accent-orange { color: var(--dv-orange); }

/* ---------- bento grid ---------- */
.dv-dc__grid {
  width: 78.39vw;            /* 1505px content width */
  max-width: 1505px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 29.9fr 24.11fr 22.29fr;   /* 574 / 463 / 428 */
  grid-template-rows: 8.59vw 16.15vw 9.375vw;       /* 165 / 310 / 180 */
  grid-template-areas:
    "c1 c2 c4"
    "c1 c3 c4"
    "c1 c5 c5";
  gap: var(--dv-gap);
}

/* shared card */
.dv-dc__card {
  position: relative;
  border-radius: var(--dv-radius);
  border: 0.6px solid transparent;
  overflow: hidden;
  box-sizing: border-box;
}
.dv-dc__label {
  font-family: var(--font-secondary);
  font-weight: 500;
  color: var(--dv-label);
  font-size: 1.04vw;          /* 20px */
  letter-spacing: -0.02vw;
  line-height: 1.08;
}
.dv-dc__card-title {
  font-family: var(--font-primary);
  font-style: italic;
  color: var(--dv-text);
  margin: 0;
  line-height: 1.08;
}
.dv-dc__card-title em { font-style: italic; }
.dv-dc__card-title--lg { font-size: 3.23vw; letter-spacing: -0.0645vw; }  /* 62px */
.dv-dc__card-title--md { font-size: 1.875vw; letter-spacing: -0.0375vw; } /* 36px */
.dv-dc__body {
  font-family: var(--font-secondary);
  font-weight: 300;
  color: var(--dv-text);
  font-size: 1.458vw;         /* 28px */
  line-height: 1.34;
  letter-spacing: -0.029vw;
  margin: 0;
}
.dv-dc__body--muted { color: var(--dv-muted); font-weight: 400; font-size: 0.9375vw; line-height: 1.37; } /* 18px */

/* ---------- card 1: Main Expertise (3-slide carousel) ----------
   The card is a viewport; a flex track of 3 slides translates horizontally
   with an eased curve. Each slide carries its own tint + glow + line-art, so
   the colour "slides in" with the content. Label + dots stay fixed on the card.
   Auto-rotate / swipe / dots are driven by js/expertise-carousel.js. */
.dv-dc__card--expertise {
  grid-area: c1;
  background: #fff;
  border-color: transparent;     /* the gradient ring (::after) is the border now */
  padding: 0;                    /* padding now lives in each slide's content */
}

/* Gradient stroke ring — a 1px gradient border that follows the rounded corners,
   drawn as a masked ::after so it works over the overflow-hidden carousel.
   The gradient colour follows the active slide's accent (Figma stroke values). */
.dv-dc__card--expertise::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;                  /* stroke weight */
  background: linear-gradient(135deg, rgba(255,143,41,0.10) 0%, rgba(255,204,157,1) 51%, rgba(255,143,41,0.10) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 6;
  transition: opacity 0.4s ease;
}
.dv-dc__card--expertise[data-accent="orange"]::after {
  background: linear-gradient(135deg, rgba(255,143,41,0.10) 0%, rgba(255,204,157,1) 51%, rgba(255,143,41,0.10) 100%);
}
.dv-dc__card--expertise[data-accent="purple"]::after {
  background: linear-gradient(135deg, rgba(235,231,255,0.10) 0%, rgba(213,205,255,1) 51%, rgba(231,227,252,0.10) 100%);
}
.dv-dc__card--expertise[data-accent="green"]::after {
  background: linear-gradient(135deg, rgba(222,242,234,0.10) 0%, rgba(203,242,226,1) 51%, rgba(222,242,234,0.10) 100%);
}

/* fixed overlays above the sliding track */
.dv-dc__card--expertise .dv-dc__label {
  position: absolute;
  top: 2.94vw; left: 2.42vw;
  z-index: 3;
  pointer-events: none;
}

/* carousel viewport + track */
.dv-exp-car {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}
.dv-exp-car__track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: pan-y;          /* let vertical page scroll pass; JS handles horizontal */
}
.dv-exp-car.is-dragging .dv-exp-car__track { transition: none; }

.dv-exp-car__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.dv-exp-car__content {
  position: relative;
  z-index: 2;
  padding: 5.6vw 2.42vw 2.94vw;  /* top clears the fixed label */
}
.dv-dc__card--expertise .dv-dc__card-title { margin: 0 0 1.3vw; }
.dv-dc__card--expertise .dv-dc__body { max-width: 24.5vw; }

/* per-slide colored glow (behind the line-art) */
.dv-exp-car__glow {
  position: absolute;
  right: -4vw; bottom: -6vw;
  width: 26vw; height: 26vw;
  z-index: 0;
  pointer-events: none;
}
/* per-slide decorative line-art (white line-art at reduced opacity).
   The exported SVG is white-filled; it is painted as a background image and made
   translucent via `opacity`, so it reads as subtle tone-on-tone line-art over the
   coloured glow — matching the Figma design. Geometry (width/height/right/bottom)
   is set inline per slide from the Figma insets; bottom is negative so the icon
   bleeds past the card edge and is clipped by the card (Figma overflow-clip).

   ROOT CAUSE (why the image URL is set INLINE per slide in index.html, as
   `background-image:url(...)`, and NOT via a `--art` custom property here):
   a relative url() carried inside a CSS custom property is resolved against THIS
   stylesheet's folder (…/css/), not the HTML document — so the SVG 404'd and the
   icon was invisible. Verified with _icon-test.html: a var()-fed background was
   blank while an inline background-image / <img> rendered. So each slide supplies
   its own `background-image:url(...)` inline (document-relative → resolves), and
   this rule only sets repeat/position/size + opacity.
   DO NOT move the url back into a custom property, and DO NOT reintroduce
   mask + backdrop-filter (backdrop-filter is also nullified inside the
   transformed .dv-exp-car__track). See DECISIONS.md. */
.dv-exp-car__art {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  /* geometry vars (fallbacks; overridden inline per slide) */
  width: var(--art-w, 44%);
  height: var(--art-h, 40%);
  right: var(--art-r, 2.6%);
  bottom: var(--art-b, -6.9%);
  /* image comes from inline `background-image:url(...)` per slide; keep these as
     longhands so that inline image is NOT wiped by a `background` shorthand.
     opacity = the "white + transparency" look (tunable via --art-opacity). */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: var(--art-opacity, 0.4);
}

/* --- accents: orange / purple / green --- */
.dv-exp-car__slide[data-accent="orange"] { background: #fff9f4; }
.dv-exp-car__slide[data-accent="orange"] .dv-exp-car__glow {
  background: radial-gradient(circle, rgba(255,143,41,0.22) 0%, rgba(255,143,41,0.05) 45%, transparent 68%);
}
.dv-exp-car__slide[data-accent="purple"] { background: #f5f3fe; }
.dv-exp-car__slide[data-accent="purple"] .dv-exp-car__glow {
  background: radial-gradient(circle, rgba(110,93,232,0.20) 0%, rgba(110,93,232,0.05) 45%, transparent 68%);
}
.dv-exp-car__slide[data-accent="green"] { background: #f1f9f5; }
.dv-exp-car__slide[data-accent="green"] .dv-exp-car__glow {
  background: radial-gradient(circle, rgba(52,184,122,0.20) 0%, rgba(52,184,122,0.05) 45%, transparent 68%);
}

/* dots (now interactive buttons) */
.dv-dc__dots {
  position: absolute;
  left: 2.42vw; bottom: 2.9vw;
  z-index: 3;
  display: flex; gap: 1.6vw; align-items: center;
}
.dv-dc__dot {
  width: 0.83vw; height: 0.83vw; border-radius: 50%;
  background: #e7ddce;
  border: 0; padding: 0; margin: 0;
  cursor: pointer;
  transition: background 0.4s ease, transform 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.dv-dc__dot:hover { transform: scale(1.2); }
/* active dot colour follows the current slide's accent */
.dv-dc__card--expertise[data-accent="orange"] .dv-dc__dot.is-active { background: #ff8f29; }
.dv-dc__card--expertise[data-accent="purple"] .dv-dc__dot.is-active { background: #6e5de8; }
.dv-dc__card--expertise[data-accent="green"]  .dv-dc__dot.is-active { background: #34b87a; }

/* ---------- card 2: Focused Capabilities ---------- */
.dv-dc__card--capabilities {
  grid-area: c2;
  background: #f5fffd;
  border-color: rgba(144,234,216,0.1);
  padding: 1.95vw 2.05vw;
}
.dv-dc__pills { display: flex; gap: 1.04vw; align-items: center; margin-top: 1.4vw; }
.dv-dc__pill {
  flex: 0 0 auto;
  background: #fff;
  border-radius: 0.42vw;       /* 8px */
  box-shadow: 0 0.21vw 0.52vw rgba(0,0,0,0.1);
  padding: 0.62vw 0.73vw;
  font-family: var(--font-primary);
  color: #070707;
  font-size: 1.04vw;
  letter-spacing: -0.02vw;
  line-height: 1.08;
  white-space: nowrap;
}
.dv-dc__pill--more { color: var(--dv-muted); }

/* ---------- card 3: Delivery Strengths ---------- */
.dv-dc__card--delivery {
  grid-area: c3;
  background: #fffff4;
  border-color: rgba(255,234,41,0.1);
  padding: 1.95vw 2.05vw;
}
.dv-dc__card--delivery .dv-dc__card-title {
  font-size: 2.8125vw;         /* 54px */
  letter-spacing: -0.056vw;
  margin-top: 2.7vw;
  max-width: 18.5vw;
}

/* ---------- card 4: Design-to-Code Velocity ---------- */
.dv-dc__card--velocity {
  grid-area: c4;
  background: #fefcfa;
  border-color: rgba(255,143,41,0.1);
  padding: 2.57vw 1.8vw 0;
  display: flex;
  flex-direction: column;
}
.dv-dc__velocity-head { display: flex; flex-direction: column; gap: 0.62vw; }
.dv-dc__velocity-head .dv-dc__body { width: 16.5vw; }
.dv-dc__media--velocity {
  margin-top: auto;
  width: 100%;
  aspect-ratio: 358 / 261;
  align-self: center;
}
.dv-dc__media--velocity img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- card 5: Tools I use ---------- */
.dv-dc__card--tools {
  grid-area: c5;
  background: #f6fbff;
  border-color: rgba(173,206,232,0.18);
  display: flex; align-items: center; justify-content: center;
  gap: 3.65vw;
}
.dv-dc__tools-label {
  font-family: var(--font-secondary);
  font-weight: 500;
  color: #000;
  font-size: 1.04vw;
  letter-spacing: -0.02vw;
  white-space: nowrap;
}
.dv-dc__tools-divider { width: 1px; height: 1.6vw; background: #d9e2ec; }
.dv-dc__tools-list { display: flex; align-items: center; gap: 3.85vw; margin: 0; padding: 0; list-style: none; }
.dv-dc__tools-list li { width: 2.65vw; height: 2.65vw; }   /* ~51px */
.dv-dc__tools-list img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- asset placeholders (until exported from Figma) ---------- */
.dv-dc__ph {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed #d8cfc3;
  border-radius: 0.6vw;
  color: #b6ab9c;
  font-family: var(--font-secondary);
  font-size: 0.85vw;
  background: rgba(0,0,0,0.015);
  text-align: center;
}
.dv-dc__media--velocity .dv-dc__ph { width: 100%; height: 100%; aspect-ratio: 358/261; }
.dv-dc__tools-list li .dv-dc__ph { width: 100%; height: 100%; border-radius: 50%; font-size: 0; }

/* ============================================================
   Phase-2 card interactions (2026-07-03)
   Card 2 Focused Capabilities -> marquee; Card 3 Delivery Strengths -> typewriter.
   Driven by standalone JS (js/capabilities-marquee.js, js/delivery-typewriter.js),
   NOT wired into app.min.js.
   ============================================================ */

/* Delivery Strengths — typewriter (cycles 6 phrases; per-char dark/orange) */
.dv-dc__delivery-type {
  /* reserve two lines so the card never reflows as the phrase length changes */
  min-height: 2.16em;                 /* 2 x line-height 1.08 */
}
.dv-dc__delivery-type-text { font-style: italic; }
.dv-dc__delivery-type-caret {
  display: inline-block;
  width: 0.05em;
  height: 0.84em;
  margin-left: 0.06em;
  background: var(--dv-text);
  vertical-align: -0.06em;
  animation: dv-type-caret 1.05s steps(1) infinite;
}
@keyframes dv-type-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* Focused Capabilities — marquee (auto right->left, hover-pause, drag) */
.dv-dc__marquee {
  margin-top: 0.9vw;
  margin-left: -2.05vw;               /* full-bleed: cancel the card's h-padding so */
  margin-right: -2.05vw;              /* tags scroll edge to edge (card clips them) */
  -webkit-user-select: none;
  user-select: none;
}
.dv-dc__marquee-track {
  display: flex;
  align-items: center;
  gap: 1.04vw;                        /* 20px */
  width: max-content;
  padding: 0.5vw 2.05vw;             /* v: pill drop-shadow room; h: initial label inset */
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;               /* vertical page scroll passes through; JS owns horizontal */
}
.dv-dc__marquee.is-dragging .dv-dc__marquee-track { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .dv-dc__delivery-type-caret { animation: none; }
}

/* ---------- responsive: stack on small screens (site breakpoint 1100px) ---------- */
@media (max-width: 1100px) {
  /* on mobile, don't pin: let the base scroll normally (panels keep their own behavior) */
  .dv-dc--stack { position: static; min-height: 0; display: block; padding: 14vw 0; }
  .dv-dc__head { padding: 0 6vw; margin-bottom: 8vw; }
  .dv-dc__title { font-size: 7.2vw; letter-spacing: -0.1vw; }
  .dv-dc__grid {
    width: 88vw;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "c1" "c2" "c3" "c4" "c5";
    gap: 4vw;
  }
  .dv-dc__card { padding: 6vw 6vw; }
  .dv-dc__label { font-size: 3.6vw; }        /* shared: capabilities / delivery labels */
  .dv-dc__body { font-size: 4.4vw; }
  .dv-dc__body--muted { font-size: 3.6vw; }
  .dv-dc__card-title--md { font-size: 6vw; }
  .dv-dc__card--delivery .dv-dc__card-title { font-size: 8vw; max-width: none; }
  .dv-dc__pill { font-size: 3.4vw; border-radius: 1.6vw; padding: 2vw 2.6vw; }
  /* --- Main Expertise carousel on mobile: give the absolute track a height --- */
  .dv-dc__card--expertise { padding: 0; min-height: 128vw; }
  .dv-dc__card--expertise .dv-dc__label { top: 6vw; left: 6vw; font-size: 3.6vw; }
  .dv-dc__card--expertise .dv-dc__card-title--lg { font-size: 9vw; }
  .dv-dc__card--expertise .dv-dc__body { max-width: none; font-size: 4.4vw; }
  .dv-exp-car__content { padding: 16vw 6vw 22vw; }
  /* keep the per-slide % geometry (inline vars) on mobile too — the icon is a
     plain white background image now, so no mobile blur override is needed. */
  .dv-exp-car__glow { width: 70vw; height: 70vw; right: -18vw; bottom: -22vw; }
  .dv-dc__card--expertise .dv-dc__dots { left: 6vw; bottom: 8vw; gap: 3vw; }
  .dv-dc__dot { width: 2.6vw; height: 2.6vw; }
  .dv-dc__card--tools { flex-wrap: wrap; gap: 5vw; }
  .dv-dc__tools-label { font-size: 3.6vw; }
  .dv-dc__tools-list { gap: 6vw; }
  .dv-dc__tools-list li { width: 9vw; height: 9vw; }
}

/* ---------- legacy collection wall fallback ----------
   The exported destination card wall starts hidden and depends on ScrollTrigger
   to reveal cards. In static/file previews that trigger can miss, leaving the
   section blank. Keep the content visible as part of the homepage. */
.component--block-cards-collection-medium .card.--collection-medium {
  opacity: 1 !important;
  transform: none !important;
}

.component--block-cards-collection-medium .card.--collection-medium .image.--default {
  opacity: 1 !important;
  transform: none !important;
}

.component--block-cards-collection-medium .card.--collection-medium .heading .char,
.component--block-cards-collection-medium .card.--collection-medium .heading .word {
  opacity: 1 !important;
  transform: none !important;
}

.component--block-cards-collection-medium .title .word,
.component--block-cards-collection-medium .wysiwyg .word {
  display: inline-block;
}

.component--block-cards-collection-medium .title .whitespace,
.component--block-cards-collection-medium .wysiwyg .whitespace {
  display: inline-block;
  width: clamp(8px, 0.55vw, 14px);
  font-size: 0;
  line-height: 0;
  vertical-align: baseline;
}