/* ===========================================================================
   /landing-3 — cinematic, scroll-driven take on the homepage.
   ---------------------------------------------------------------------------
   Loaded AFTER landing-2.css (which provides the shared .dc-* classes:
   .dc-gradient, .dc-gradient-text, .dc-cta, .dc-dark, .dc-marquee, .dc-cellgrid,
   .dc-statcell, .dc-stat, .dc-pushdown, .dc-award-*, .dc-on-dark*). This file
   adds only what landing-3 needs on top: the hero pixel-grid + its motion, the
   in-view reveal, the bracket eyebrow, and the hero visibility fallbacks.
   No JS (Shell injects the body via set:html, which can't run inline scripts) —
   everything here is pure CSS, with graceful fallbacks where scroll-driven
   animation isn't supported.
   =========================================================================== */

/* Bracket eyebrow spacing (matches the calm Space-Mono label rhythm) */
.dc-eyebrow { letter-spacing: 0.14em; }
/* Hero eyebrow reads bigger — proportional Space Grotesk sits smaller than the old
   mono at text-eyebrow-small (.6875rem). Scoped to the hero so other eyebrows are
   untouched (two classes out-specify the .text-eyebrow-small utility). */
.dc-hero3 .dc-eyebrow { font-size: clamp(0.8125rem, 0.72rem + 0.4vw, 0.9375rem); line-height: 1.2; }

/* Laptop band: the frozen text-display token is a FIXED 6rem/6rem, which
   overflows the 44% hero column below ~1650px ("Orchestrated" ≈ 6.3em wide).
   Fluid cap that equals 6rem at ≥~1650px, so big desktop is unchanged.
   line-height restated because the token's line-height is also a fixed 6rem. */
@media (min-width: 1024px) {
  .dc-hero3 .dc-h3-title {
    font-size: min(6rem, 6.6vw - 0.8rem);
    line-height: 1;
  }
}

/* ---------------------------------------------------------------------------
   Hero title fallback — the dc-atom-text-hero-title controller reveals the
   .js-title (it starts at opacity-0) via the letter animation. This CSS fade
   guarantees the headline is visible even if that controller doesn't run.
   --------------------------------------------------------------------------- */
.dc-hero3 .js-title { animation: dc-fade-in 1s 0.15s ease both; }
@keyframes dc-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------------------
   Hero field — a full-height grid of distinct squares (navy field + brand-colour
   accents) that continuously shimmer/pulse out of phase, so it stays alive like
   the old Lottie but dense, small, distinct (6px gaps), and filling the height.
   --------------------------------------------------------------------------- */
.dc-h3-grid {
  /* colour tokens for the homepage hero grid (defaults; section pages now use recoloured Lottie variants) */
  --c-base: #04204a; --c-cell: #082a57; --c-persian: #0b44cf; --c-tufts: #1892e5;
  --c-light: #6fc0f5; --c-mint: #22d2a2; --c-grad: linear-gradient(135deg, #22d2a2, #0b44cf);
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: 1fr;
  gap: 6px;
  width: 100%;
  height: 100%;
  background: var(--c-base);      /* field shows through the gaps */
}
.dc-h3-grid > i {
  display: block;
  background: var(--c-cell);      /* base cell */
  animation: dc-cellmorph 6s ease-in-out infinite;
}
/* scattered brand-colour accents (later rules win on overlap) */
.dc-h3-grid > i:nth-child(2n)    { background: var(--c-base); }
.dc-h3-grid > i:nth-child(7n+1)  { background: var(--c-persian); }
.dc-h3-grid > i:nth-child(5n+2)  { background: var(--c-tufts); }
.dc-h3-grid > i:nth-child(11n+4) { background: var(--c-light); }
.dc-h3-grid > i:nth-child(9n+5)  { background: var(--c-mint); }
.dc-h3-grid > i:nth-child(13n+6) { background-image: var(--c-grad); }

/* (per-page section-hero colour now comes from recoloured Lottie variants + the .dc-hero-ai/ent/ins rules below) */
/* stagger the shimmer so cells pulse out of phase (delay + duration variety) */
.dc-h3-grid > i:nth-child(2n) { animation-delay: -1s;   animation-duration: 7s;   }
.dc-h3-grid > i:nth-child(3n) { animation-delay: -3s;   }
.dc-h3-grid > i:nth-child(4n) { animation-delay: -5s;   animation-duration: 8s;   }
.dc-h3-grid > i:nth-child(5n) { animation-delay: -2.5s; }
.dc-h3-grid > i:nth-child(7n) { animation-delay: -4s;   animation-duration: 6.5s; }
@keyframes dc-cellmorph { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
/* From lg up the Lottie layer sits ON TOP of this grid with an opaque background, so
   all 110 cells were pulsing where nobody could see them — pure work on every frame,
   competing with the scroll choreography. Only run them when the grid is the layer
   actually on show: `.dc-lottie-off` is set on <html> by the Shell init whenever
   lottie-web fails or reduced motion is on, which is exactly the fallback case. */
@media (min-width: 1024px) {
  html:not(.dc-lottie-off) .dc-h3-grid > i { animation: none; }
}

/* ---------------------------------------------------------------------------
   Moving field — the real recolored DesiCrew Lottie (hero-desicrew-grid.lottie),
   TILED to fill the tall panel. The Lottie is wide (~3:1, 992×333); we stack
   copies at their native aspect (no distortion) and mirror alternates so the
   seam reads as a reflection, not a hard repeat. The navy backstop (= the
   Lottie's own bg) hides any uncovered sliver. Desktop-only; below lg (and under
   reduced motion) the .dc-h3-grid fallback shows instead. Painted above the grid
   so it covers it once the global <dc-block-richmedia-lottie> player upgrades.
   --------------------------------------------------------------------------- */
/* Shown at EVERY width since the switch to the pure-JS lottie-web SVG renderer
   (the old WASM/canvas player was desktop-only). Below lg the panel is a single
   16:9 box (w-full aspect-video) — one 2:1 tile already fills ~89% of it, so the
   extra tiles are hidden there: 1 animation instance on a phone instead of 3.
   The .dc-h3-grid underneath stays as the reduced-motion / no-JS / failure layer. */
.dc-h3-lottie {
  display: flex;
  flex-direction: column;
  background: #1892e5;              /* bright-blue backstop = homepage Lottie bg → seamless if a tile is short */
  z-index: 1;
}
.dc-h3-grid { z-index: 0; }
@media (max-width: 1023px) {
  .dc-h3-lottie > .dc-h3-tile:nth-child(n + 2) { display: none; }
}
/* Fallback reveals: when the Lottie is intentionally off (reduced-motion, no-JS,
   or the lottie-web loader failed → html.dc-lottie-off set in Shell.astro), hide
   the Lottie layer so the always-present animated .dc-h3-grid shows instead —
   never a bare blue backstop. (no-JS is handled by a <noscript> in Shell head.) */
html.dc-lottie-off .dc-h3-lottie { display: none; }
/* (reduced motion also hides .dc-h3-lottie — see the block near .dc-hero3 below.
   This adds the cell-shimmer stop for the NON-hero panels that block doesn't scope.) */
@media (prefers-reduced-motion: reduce) {
  .dc-h3-grid > i { animation: none; }
}
.dc-h3-lottie > .dc-h3-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 664 / 333;          /* the CUBE-cluster region only (≈2:1); the 992-wide comp has dead navy on BOTH sides of it */
  flex: 0 0 auto;
  overflow: hidden;                 /* clip the dead navy that overflows the edges */
}
/* Show ONLY the cube cluster. CRUCIAL: the cubes are NOT at the comp's left edge — the
   "Mistra Cubes 02.svg" precomp is placed with a +121.5px x-offset (layer pos.x 496 − anchor.x
   374.5), so the cubes render at main-comp x ∈ [122.5, 786.5], with DEAD navy on the left
   [0,122.5] and right [786.5,992]. We size the Lottie box to the full comp aspect (so the
   player's fit:"cover" shows the whole comp with no internal crop), then pin it LEFT by 122.5
   and widen it so the window [122.5,786.5] fills the tile — the dead navy on both sides overflows
   and is clipped. (The player's own cover is centre-anchored, so this MUST be done in CSS.)
   ~100px cells = parity with the homepage; same size as before, just the correct window.
   (`.dc-lottie` = the lottie-web SVG container that replaced <dc-block-richmedia-lottie>.) */
.dc-h3-tile .dc-lottie {
  position: absolute;
  left: calc(-100% * 122.5 / 664); right: auto; top: 0; bottom: auto;
  width: calc(100% * 992 / 664);
  height: 100%;
}
.dc-h3-lottie > .dc-h3-tile:nth-child(even) { transform: scaleY(-1); }  /* mirror the seam */

/* ---------------------------------------------------------------------------
   Hero scroll choreography (desktop, scroll-driven, no JS). Over the pinned
   160dvh runway: the field slides off-screen to the right (away from centre, like
   the main page's field exiting the edge) and the headline block slides to centre
   while the eyebrow / subhead / CTA fade. Falls back to the clean at-rest layout
   where scroll timelines aren't supported, on mobile, or when motion is reduced.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* Runway length. The markup keeps `lg:min-h-[200dvh]` because that is the only
       arbitrary dvh value the frozen Tailwind bundle ever compiled (35/80/200 — a
       160 would silently be a no-op), so the real length is set here, where we own
       the rule. It must stay comfortably longer than the longest animation-range
       below, or the panel unpins mid-choreography. */
    .dc-hero3 { min-height: 160dvh; }
    .dc-hero3 .dc-h3-headline {
      animation: dc-h3-center linear both;
      animation-timeline: scroll(root);
      animation-range: 0 55vh;
    }
    .dc-hero3 .dc-h3-grid,
    .dc-hero3 .dc-h3-lottie {
      animation: dc-h3-exit linear both;
      animation-timeline: scroll(root);
      animation-range: 0 52vh;
    }
    .dc-hero3 .dc-h3-sub {
      animation: dc-h3-fade linear both;
      animation-timeline: scroll(root);
      animation-range: 0 28vh;
    }
    /* each headline line + the CTA button slide from left → centred SMOOTHLY
       (unlike a text-align flip, which snaps). They centre within the headline
       block; the block itself slides to screen centre (dc-h3-center) — combined,
       each line ends centred.

       The headline block is the query container so dc-h3-linecentre can express
       "half of me" in transform units. This USED to animate `left: 0 → 50%`, which
       reads the same but is a LAYOUT property: it cannot be composited, so every
       scroll frame re-ran layout for these four elements. Safari only gained
       threaded scroll-driven animations in 26.4, and even then only transform and
       opacity run on the compositor — one `left` in the set dragged the whole hero
       back onto the main thread and made scrolling stutter. Transform-only now. */
    .dc-hero3 .dc-h3-headline { container-type: inline-size; }
    .dc-hero3 .dc-h3-cx,
    .dc-hero3 .dc-h3-cx-btn {
      animation: dc-h3-linecentre linear both;
      animation-timeline: scroll(root);
      animation-range: 0 55vh;
    }
  }

  /* ---- JS-driven fallback: the SAME choreography where scroll timelines don't exist.
     Everything above is behind @supports (animation-timeline), and Safari only shipped
     scroll-driven animations in 26. A MacBook Air still on macOS Sequoia runs Safari
     18, which has none of it — so the whole hero sat static there: the headline never
     centred, the field never left, the certified strip never rose. That is the
     "it doesn't come up on Safari" report.

     Here the same transforms are expressed against three progress variables that
     Shell.astro's fallback sets from a rAF-throttled scroll handler. The vars are set
     on .dc-hero3, not <html>, so the style recalc stays inside the hero subtree, and
     every animated property is still transform/opacity only.
     Ranges must stay in step with the @supports block above: 55vh / 52vh / 28vh. ---- */
  /* vh first, dvh second: engines that understand dvh override, older ones keep the vh
     line. That drops this path's floor from Safari 15.4 (dvh) to 13.1, so the hero still
     animates on a Safari where other dvh sizing would degrade. */
  html.dc-hero-js .dc-hero3 { min-height: 160vh; min-height: 160dvh; }
  html.dc-hero-js .dc-hero3 .dc-h3-headline {
    /* no container-type needed on this path — the line centring below uses the
       measured --dc-hw rather than cqi, precisely so old Safari is covered. */
    transform: translateX(calc((min(50vw, 54rem) - 2.5rem - 50%) * var(--dc-hp, 0)))
               translateY(calc(-9vh * var(--dc-hp, 0)));
  }
  html.dc-hero-js .dc-hero3 .dc-h3-grid,
  html.dc-hero-js .dc-hero3 .dc-h3-lottie {
    transform: translateX(calc(115% * var(--dc-hpx, 0)));
  }
  html.dc-hero-js .dc-hero3 .dc-h3-sub { opacity: calc(1 - var(--dc-hps, 0)); }
  /* Deliberately NOT `50cqi` here, unlike the native rule above. Container query units
     need Safari 16, and this fallback exists to serve Safari 15 and older — depending
     on a newer feature than the thing we are polyfilling would defeat the point. The
     script measures the headline instead and publishes --dc-hw, so this path needs
     nothing beyond calc() + custom properties (Safari 9.1). */
  html.dc-hero-js .dc-hero3 .dc-h3-cx,
  html.dc-hero-js .dc-hero3 .dc-h3-cx-btn {
    transform: translateX(calc((var(--dc-hw, 0px) / 2 - 50%) * var(--dc-hp, 0)));
  }
}
/* Headline lines are individual blocks so each can centre on its own line. */
.dc-h3-title .dc-h3-cx { display: block; width: fit-content; position: relative; left: 0; }
.dc-hero3 .dc-h3-cx-btn { position: relative; left: 0; }
/* Centre the headline block exactly at the centred max-w-432 (108rem) inner on ANY
   screen: min(50vw,54rem) = half the inner width; 50% = half the block's own width;
   2.5rem = the column's lg:px-10 pad. So the block centre lands at the inner centre
   (= screen centre, the inner is mx-auto) — no big-screen overshoot. The per-line
   dc-h3-linecentre then centres each line within the now-centred block. */
/* translateY lifts the whole headline block (incl. the CTA) up a touch as it centres,
   so the "Talk to us" button climbs with the scroll instead of resting dead-centre —
   tightening the gap down to the trusted-by strip (which rises up to meet it). */
@keyframes dc-h3-center { to { transform: translateX(calc(min(50vw, 54rem) - 2.5rem - 50%)) translateY(-9vh); } }
/* 50cqi = half the headline block (the query container), 50% = half this element —
   so the element lands centred, exactly as `left:50% + translateX(-50%)` did, but
   as a single composited transform with no layout. */
@keyframes dc-h3-linecentre { to { transform: translateX(calc(50cqi - 50%)); } }
@keyframes dc-h3-exit   { to { transform: translateX(115%); } }   /* slide off the right edge */
@keyframes dc-h3-fade   { to { opacity: 0; } }

/* ---------------------------------------------------------------------------
   Trusted-by strip lift. The hero runs on a 200dvh pinned runway (needed so the
   headline can finish centring), but the headline + CTA rest in the vertical
   centre of the 100dvh panel — which left ~half a viewport of dead white space
   between the CTA and this strip. Pull the strip up into that empty tail so it
   rises to meet the CTA as the pin releases (mirrors landing-4's flush logo
   strip). Desktop only; the mobile/stacked hero has no pin and needs no lift. */
/* Gated on scroll-timeline support: the lift is only safe because the hero field
   slides off-screen (dc-h3-exit) as you scroll. Where scroll timelines are
   unsupported (Safari), the hero field never exits, so lifting the strip up into
   the hero would put it UNDER the hero's right panel — a blue/animated block over
   the logos. There, keep margin-top:0 so the wall sits cleanly below the hero. */
@media (min-width: 1024px) {
  @supports (animation-timeline: scroll()) {
    /* -26vh was not the reason this strip appeared late. The hero's pinned panel is
       `position: sticky` with an opaque background, and a POSITIONED element paints
       above a STATIC one — so the strip sat behind the panel no matter how far it was
       lifted, and only appeared once the pin released a full viewport in. That is the
       screen of centred headline over empty space.
       Give the strip its own stacking position so it paints OVER the pinned panel, and
       lift it far enough to rise into the hero's empty lower half while the headline is
       still centring — which is what the note above always intended. */
    .dc-trusted-lift { position: relative; z-index: 2; margin-top: -18vh; }
  }
  /* Same lift for the JS fallback — it is only safe when the field actually exits,
     which under .dc-hero-js it now does. */
  html.dc-hero-js .dc-trusted-lift { position: relative; z-index: 2; margin-top: -18vh; }
}
/* homepage "Globally certified" wall — extra top/bottom breathing room
   (py-16/py-24 are absent from the frozen Tailwind bundle, so use a real rule) */
.dc-certwall-pad { padding-top: 4.5rem; padding-bottom: 4.5rem; }
@media (min-width: 768px) { .dc-certwall-pad { padding-top: 7rem; padding-bottom: 7rem; } }

/* ---------------------------------------------------------------------------
   In-view reveal (.dc-reveal) — gentle fade + rise as sections enter view.

   This is a one-shot TRANSITION driven by an IntersectionObserver (Shell.astro),
   not a `view()` scroll timeline. Two reasons it moved:
     - a view timeline re-evaluates on every scroll frame, and there are 8 of these
       on the homepage. Safari only threads scroll-driven animations from 26.4; below
       that they all run on the main thread, on top of the hero's own choreography.
       An IO fires once and then the compositor owns a plain transition.
     - the timeline version starts at opacity:0 and only becomes visible when the
       timeline resolves. If it never fires, the content stays invisible.
   Default state is fully visible. `html.dc-io` is the ONLY thing that hides these, and
   Shell.astro sets it exclusively from inside a delivered IntersectionObserver callback
   — never before observing. So the page fails visible: no JS, no IntersectionObserver,
   or an observer that never delivers all render the content normally, just unanimated.
   Setting `dc-io` any earlier reintroduces a blank-page bug on Safari. Don't.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.dc-io .dc-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.dc-io .dc-reveal.is-in { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Reduced motion — everything static + visible.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dc-hero3 .js-title { animation: none; opacity: 1; }
  .dc-hero3 .dc-h3-headline,
  .dc-hero3 .dc-h3-grid { animation: none; transform: none; }
  .dc-hero3 .dc-h3-cx,
  .dc-hero3 .dc-h3-cx-btn { animation: none; left: 0; transform: none; }
  .dc-hero3 .dc-h3-grid > i { animation: none; opacity: 1; }
  .dc-h3-lottie { display: none; }          /* reduced motion → no Lottie; the static grid shows */
  .dc-hero3 .dc-h3-sub { animation: none; opacity: 1; }
  .dc-reveal { opacity: 1; transform: none; animation: none; }
}

/* ---------------------------------------------------------------------------
   Legacy markitecture recolour (.dc-fame .dc-mc…) — retired; the homepage
   moved to the bespoke .dc-fame2 stat wall further down.
   `.dc-fame-num` (below) is shared with the capability pages and .dc-fame2.
   --------------------------------------------------------------------------- */
.dc-fame-num { font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1; letter-spacing: -0.02em; }
.dc-fame-num {
  background-image: linear-gradient(100deg, #22d2a2 0%, #1892e5 30%, #0b44cf 50%, #1892e5 70%, #22d2a2 100%);
  background-size: 220% 100%;
  animation: dc-fame-num-pan 8s ease-in-out infinite;
}
@keyframes dc-fame-num-pan { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.dc-fame-num--solid { font-size: clamp(1.7rem, 2.7vw, 2.7rem); line-height: 1; letter-spacing: -0.02em; color: #fff; }

/* Recolour each stat card's sliding inner panel by its brand hue (--c); the outer
   card takes a deeper tint so the hover-slide reveals a hue edge. Unlayered rules
   beat the card's Tailwind @layer bg utilities without !important. */
.dc-fame .dc-mc { background-color: color-mix(in srgb, var(--c, #1892e5) 22%, var(--color-surface-brand-primary, #fbfcfe)); transition: box-shadow .3s ease; }
.dc-fame .dc-mc > div {
  background-color: color-mix(in srgb, var(--c, #1892e5) 14%, var(--color-surface-brand-primary, #fbfcfe));
  border-color: color-mix(in srgb, var(--c, #1892e5) 26%, var(--color-border-primary, #e4e3de));
}
.dc-fame .dc-mc:hover { position: relative; z-index: 5; box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--c, #1892e5) 60%, transparent); }

/* The two big anchor cards — vivid, slowly-panning brand gradient + white type. */
.dc-fame .dc-mc--fill { background-color: #0b44cf; }
.dc-fame .dc-mc--fill > div {
  background-color: #0b44cf;
  background-image: linear-gradient(140deg, #127ad1 0%, #0b44cf 55%, #06246e 100%);
  background-size: 200% 200%; border-color: transparent;
  animation: dc-proof-pan 9s ease-in-out infinite;
}
@keyframes dc-proof-pan { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.dc-fame .dc-mc--fill:hover { box-shadow: 0 24px 48px -26px rgba(11, 68, 207, .55); }
.dc-fame .dc-mc--fill .dc-mc-claim { color: rgba(255, 255, 255, .88); }
.dc-fame .dc-mc--fill .dc-mc-client { color: rgba(255, 255, 255, .68); }

.dc-mc-claim { color: var(--color-text-secondary, #52525b); }
.dc-mc-client { color: var(--color-text-tertiary, #a1a1aa); }

/* Filler squares + diamonds — brand-tinted pale blocks (they drop in with the cards). */
.dc-fame .markitecture-block.aspect-square { background-color: rgba(24, 146, 229, .28); }
.dc-fame .markitecture-block-rotated { background-color: rgba(34, 210, 162, .36); }

@media (prefers-reduced-motion: reduce) {
  /* no fall — reveal the pyramid statically */
  .dc-fame-num, .dc-fame .dc-mc--fill > div { animation: none; }
  .dc-fame .markitecture-block, .dc-fame .markitecture-block-rotated { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Mobile / tablet (≤1023px): the interlocking desktop pyramid is a poor fit on a
   narrow screen — the decorative fillers/diamonds are already `hidden lg:block`,
   and the six stat cards carry fixed pyramid heights (h-30/h-34/h-40) that CLIP
   the number + claim + client, with a stray w-1/2 pair. Flatten it into a
   deliberate full-width stat STACK: every card spans the column, sizes to its
   content (no clipping), and the gradient anchor cards bookend the run. The
   fall-in reveal + brand tint/animation are untouched (we only set width/height).
   Two classes out-specify the single-class Tailwind width and height utilities. */
@media (max-width: 1023px) {
  .dc-fame .markitecture-block {
    width: 100%;
    height: auto;
    min-height: 124px;
  }
  /* the sliding inner panel already is flex-col justify-between with p-3 — give it
     a touch more breathing room and centre short cards so the stat sits balanced. */
  .dc-fame .dc-mc > div {
    padding: 1.15rem 1.2rem;
    justify-content: center;
    gap: 0.5rem;
  }
  .dc-fame .dc-mc-claim { margin-top: 0.35rem; }
  /* Vertical rhythm: the lifted "Do it all" editorial headline (pt-40 = 160px) +
     the markitecture wrapper (pt-20/pb-20 = 80px each) leave a cavernous gap on a
     phone. Tighten to a compact rhythm so the stat wall follows its heading. */
  .dc-fame [class~="pt-40"] { padding-top: 3rem; }
  .dc-fame [class~="pt-20"][class~="pb-20"] { padding-top: 1rem; padding-bottom: 2.5rem; }
}

/* ---------------------------------------------------------------------------
   "Deploying Intelligence at scale" — the DesiCrew stat PYRAMID (.dc-fame2).
   Bespoke markup (not the legacy markitecture): six tiles on a GAPPED 12-col
   grid, each row a step wider than the last — a paired peak, a wide gradient
   anchor ("1 in 10") with "15M" beside it, and a full-width base. The small
   gaps + eight brand "pixel" squares (.dc-px, deck-mosaic motif: pale fills
   with three saturated accent pops hugging the staircase) make the wall read
   as a pixel cluster instead of welded rows. The anchors carry the brand's
   SIGNATURE gradient (mint → tufts → persian, per deck stat chips — not the
   old dark navy). Tiles RISE + fade in a stagger when the section scrolls
   into view (the builder's inline script adds .is-armed then .in-view;
   without JS the wall just shows), pixels settle after them. Hover lifts
   with a hue glow.
   --------------------------------------------------------------------------- */
.dc-fame2 {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3.25rem);
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 4vw, 2.5rem) clamp(3.5rem, 6vw, 5.5rem);
}
.dc-fame2-title { text-align: center; }

.dc-fame2-grid {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* the pixel-cluster air between tiles (deck mosaics keep visible seams) */
  gap: clamp(6px, 0.6vw, 10px);
}

/* Tile — soft brand tint by hue (--c); the grid gap does the separating. */
.dc-mc2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.1rem;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  min-height: 9.5rem;
  background-color: color-mix(in srgb, var(--c, #1892e5) 15%, var(--color-surface-brand-primary, #fbfcfe));
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}
.dc-mc2:hover {
  position: relative;
  z-index: 5;
  transform: translateY(-6px);
  box-shadow: 0 26px 52px -30px color-mix(in srgb, var(--c, #1892e5) 60%, transparent);
}
.dc-mc2-claim { margin-top: .45rem; font-size: 1rem; line-height: 1.5; font-weight: 700; color: var(--color-text-secondary, #52525b); }

/* Homepage wall reads bolder: numerals + claims at 700, and ONE numeral size
   across pale and gradient tiles (the anchors' larger clamp). */
.dc-fame2 .dc-fame-num, .dc-fame2 .dc-fame-num--solid {
  font-weight: 700;
  font-size: clamp(2.1rem, 3.2vw, 3.2rem);
}

/* The two wide anchor tiles — the brand SIGNATURE gradient (mint → tufts →
   persian, as on the deck's stat chips), slowly panning, white type. Mint is
   kept to the bottom-right corner so the white numerals sit over the blue end
   (white on #22d2a2 alone would fall under large-text contrast).
   dc-proof-pan keyframes are defined with the legacy block above. */
.dc-mc2--fill {
  background-color: #0b44cf;
  background-image: linear-gradient(to top left, #22d2a2 0%, #1892e5 45%, #0b44cf 100%);
  background-size: 200% 200%;
  animation: dc-proof-pan 9s ease-in-out infinite;
}
.dc-mc2--fill:hover { box-shadow: 0 26px 52px -28px rgba(24, 146, 229, .5); }
.dc-mc2--fill .dc-mc2-claim { color: rgba(255, 255, 255, .92); }

/* Brand pixel squares — the deck's mosaic motif scattered around the pyramid.
   Hidden below 1024px (the mobile stack stays clean); positioned per-pixel in
   the desktop grid below. Pale fills carry the surface neutrals; the three
   accent pops (mint / french-rose / sunglow) stay small and sparse. */
.dc-px {
  display: none;
  width: 4.75rem;
  aspect-ratio: 1;
  place-self: center;
}
.dc-px--p1, .dc-px--p5 { background-color: #e7edfb; } /* lavender    */
.dc-px--p2, .dc-px--p7 { background-color: #e8f5fd; } /* alice blue  */
.dc-px--p3             { background-color: #def8f1; } /* mint green  */
.dc-px--p0 { background-color: #22d2a2; width: 3.25rem; } /* mint pop     */
.dc-px--p4 { background-color: #fd4c8c; width: 3.25rem; } /* rose drifter */
.dc-px--p6 { background-color: #ffd23f; width: 3.25rem; } /* sunglow pop  */

/* Mobile: the two anchors run full-width; the four squares pair up 2-up. */
.dc-mc2--s2, .dc-mc2--s5 { grid-column: 1 / -1; min-height: 11rem; }
@media (max-width: 639px) {
  .dc-fame2-grid { grid-template-columns: 1fr; }
  .dc-mc2 { min-height: 8rem; }
}

/* Desktop: a SYMMETRIC centred pyramid on the 12-col grid — every band steps
   in one column on BOTH sides (6 → 8 → 10 cols wide), so both silhouettes
   stair-step; no two bands share an edge line. Rows are SIX half-rows (tiles
   span two) so the pixel squares get square-ish cells at the band seams. */
@media (min-width: 1024px) {
  .dc-fame2-grid {
    grid-template-columns: repeat(12, 1fr);
    /* minmax floors keep the 1728px pyramid stable (content fits, auto
       resolves to the minimum); at 1024–1440 a long claim grows its band
       instead of spilling out of the tile. Rows grow uniformly. */
    grid-template-rows: repeat(6, minmax(6.75rem, auto));
  }
  .dc-mc2, .dc-mc2--s2, .dc-mc2--s5 { min-height: 0; }
  .dc-mc2--s0 { grid-column: 4 / 7;  grid-row: 1 / 3; } /* 50%      — peak pair */
  .dc-mc2--s1 { grid-column: 7 / 10; grid-row: 1 / 3; } /* 30,000              */
  .dc-mc2--s2 { grid-column: 3 / 8;  grid-row: 3 / 5; } /* 1 in 10  — anchor   */
  .dc-mc2--s3 { grid-column: 8 / 11; grid-row: 3 / 5; } /* 15M — beside anchor */
  .dc-mc2--s4 { grid-column: 2 / 6;  grid-row: 5 / 7; } /* 100M                */
  .dc-mc2--s5 { grid-column: 6 / 12; grid-row: 5 / 7; } /* 13.5M    — anchor   */

  /* pixels hug the staircase corners; two accents drift just off the mass */
  .dc-px { display: block; }
  .dc-px--p0 { grid-column: 10; grid-row: 1; justify-self: start; align-self: end;   } /* mint, right of the peak     */
  .dc-px--p1 { grid-column: 3;  grid-row: 2; justify-self: end;   align-self: end;   } /* lavender, left of 50%       */
  .dc-px--p2 { grid-column: 11; grid-row: 2; }                                         /* alice, floating right       */
  .dc-px--p3 { grid-column: 2;  grid-row: 4; justify-self: end;   align-self: end;   } /* mint-green, left of anchor  */
  .dc-px--p4 { grid-column: 12; grid-row: 3; }                                         /* rose drifter, off the mass  */
  .dc-px--p5 { grid-column: 11; grid-row: 4; justify-self: start; align-self: end;   } /* lavender, right of 15M      */
  .dc-px--p6 { grid-column: 1;  grid-row: 6; justify-self: end;   align-self: start; } /* sunglow, left of the base   */
  .dc-px--p7 { grid-column: 12; grid-row: 5; justify-self: start; }                    /* alice, right of the base    */
}

/* Rise-in reveal: hidden only once the inline script has armed the section;
   .in-view plays the stagger (fill mode "both" holds the hidden from-state
   through each tile's delay). */
.dc-fame2.is-armed:not(.in-view) :is(.dc-mc2, .dc-px) { opacity: 0; }
.dc-fame2.in-view :is(.dc-mc2, .dc-px) {
  animation: dc-mc2-rise .7s cubic-bezier(.22, .61, .36, 1) calc(var(--i, 0) * 90ms) both;
}
/* fills keep their gradient pan running alongside the rise */
.dc-fame2.in-view .dc-mc2--fill {
  animation:
    dc-mc2-rise .7s cubic-bezier(.22, .61, .36, 1) calc(var(--i, 0) * 90ms) both,
    dc-proof-pan 9s ease-in-out infinite;
}
/* `to` deliberately omits transform: once the rise ends, the held 100% frame
   resolves transform to the underlying value, so the hover lift still works. */
@keyframes dc-mc2-rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-fame2.is-armed:not(.in-view) :is(.dc-mc2, .dc-px) { opacity: 1; }
  .dc-fame2.in-view :is(.dc-mc2, .dc-px) { animation: none; }
  .dc-mc2--fill { animation: none; }
  .dc-mc2, .dc-mc2:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Worldview — the dark "punctuation" band: oxford-navy + a Brand-Book mosaic
   (backdrop 6) behind a radial scrim, white copy centred over it.
   --------------------------------------------------------------------------- */
.dc-worldview { background: #011c46; }
.dc-worldview-bg {
  position: absolute; inset: 0;
  background: url('/images/backdrops/6.png') center / cover no-repeat;
  background-image:
    image-set(url('/images/backdrops/6.avif') type('image/avif'), url('/images/backdrops/6.webp') type('image/webp'), url('/images/backdrops/6.png') type('image/png'));
  opacity: 0.5;
}
.dc-worldview-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(130% 130% at 50% 0%, rgba(1, 28, 70, 0.55) 0%, rgba(1, 28, 70, 0.92) 70%);
}
.dc-worldview h2 { color: #fff; }
.dc-worldview .dc-world-para { color: rgba(255, 255, 255, 0.82); }
/* The global gradient ends in #0b44cf, which disappears on the navy band —
   teal→mint gradient (no blue stops) so the whole phrase stays legible.
   First and last stops match so the sliding loop is seamless. */
.dc-worldview .dc-gradient-text {
  background-image: linear-gradient(90deg, #22d2a2, #5fe3c0, #aef3dd, #5fe3c0, #22d2a2);
  background-size: 200% 100%;
  animation: dc-worldview-shimmer 5s linear infinite;
}
@keyframes dc-worldview-shimmer {
  from { background-position: 0% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-worldview .dc-gradient-text { animation: none; }
}

/* ---------------------------------------------------------------------------
   Section-page heroes (ported from landing-3/5/7): a Brand-Book backdrop PNG is
   the static field base (shows on mobile / where the Lottie is hidden), with a
   matching backstop behind the recoloured Lottie. One colour per page.
   --------------------------------------------------------------------------- */
/* Pink CTA gradient for the Enabling-AI page (uses the page's own pinks:
   light Lottie pop → field #f94492 → deep eyebrow #c4136a). Applied via the
   .dc-gradient-pink class in markup, so it only affects tagged buttons. */
.dc-gradient-pink { background-image: linear-gradient(90deg, #fb7cb4 0%, #f94492 50%, #c4136a 100%); }
.dc-gradient-pink:hover { filter: brightness(1.06); }
.dc-hero-ent .dc-lh-panel { background: #2e2400 url('/images/backdrops/8.png') center / cover no-repeat;
 background-image:
   image-set(url('/images/backdrops/8.avif') type('image/avif'), url('/images/backdrops/8.webp') type('image/webp'), url('/images/backdrops/8.png') type('image/png')); }
.dc-hero-ent .dc-h3-lottie { background: #2e2400; }
/* Editorial hero entrance — masked per-line rise + staggered fade-up (replaces
   the scramble/grow that ballooned a line into the subhead then snapped up). No
   size change → no overlap, no reflow. Used by whichever page has the editorial
   layout (currently Enabling AI). */
.dc-ae-line { display: block; overflow: hidden; padding-block: 0.14em; margin-block: -0.14em; }
.dc-ae-line > span { display: block; transform: translateY(112%); animation: dc-ae-rise 0.85s cubic-bezier(.16,1,.3,1) both; }
.dc-ae-line:nth-child(1) > span { animation-delay: 0.10s; }
.dc-ae-line:nth-child(2) > span { animation-delay: 0.22s; }
.dc-ae-line:nth-child(3) > span { animation-delay: 0.34s; }
.dc-ae-up { animation: dc-ae-fadeup 0.7s ease both; }
@keyframes dc-ae-rise { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes dc-ae-fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .dc-ae-line > span,
  .dc-ae-up { animation: none; transform: none; opacity: 1; }
}
.dc-hero-ins.dc-an-fullbleed { background: #c81e5b url('/images/backdrops/7.png') center / cover no-repeat;
 background-image:
   image-set(url('/images/backdrops/7.avif') type('image/avif'), url('/images/backdrops/7.webp') type('image/webp'), url('/images/backdrops/7.png') type('image/png')); }
.dc-hero-ins .dc-h3-lottie { background: #c81e5b; }
.dc-hero-ins .dc-an-scrim {
  background:
    linear-gradient(100deg, rgba(74,16,40,.94) 0%, rgba(74,16,40,.82) 30%, rgba(74,16,40,.42) 58%, rgba(74,16,40,.12) 82%, rgba(74,16,40,0) 100%),
    linear-gradient(0deg, rgba(74,16,40,.7) 0%, rgba(74,16,40,.15) 38%, rgba(74,16,40,0) 60%);
}

/* ===========================================================================
   Section 3 · "Both sides of AI" streams — brand-book treatment (deck slide 5).
   A subtle light pixel backdrop, scattered accent squares, a gradient centre
   divider, tinted icon bullets and gradient-filled industry chips. All the
   decorative layers are aria-hidden + pointer-events:none and sit behind the
   content (z-0/1); content is lifted with `relative z-10` in the markup.
   =========================================================================== */
/* Section padding + inter-column spacing live here (not Tailwind) so they don't
   depend on utilities that may be absent from the prebuilt CSS. */
.dc-streams { isolation: isolate; padding-block: 3.5rem; }
@media (min-width: 768px) { .dc-streams { padding-block: 5.5rem; } }
@media (min-width: 1024px) { .dc-streams { padding-block: 7rem; } }
/* Constrain the two-stream grid to a centred column so the lists sit balanced
   under the centred heading instead of hugging the far left/right edges on wide
   viewports. (Mobile stays full-width single-column.) */
@media (min-width: 768px) {
  .dc-streams > .grid.grid-cols-1 { max-width: 1140px; margin-inline: auto; width: 100%; }
}
/* breathing room between each stream and the centre divider (desktop) */
@media (min-width: 768px) {
  .dc-stream--mint { padding-right: 2.5rem; }
  .dc-stream--blue { padding-left: 2.5rem; }
}
/* Wide desktop only — at 1024–1279 the 1140px grid is already viewport-bound,
   so keep the tighter ≥768 paddings there and give the columns the width back. */
@media (min-width: 1280px) {
  .dc-stream--mint { padding-right: 4rem; }
  .dc-stream--blue { padding-left: 4rem; }
}

/* Light pixel-grid wash + a soft teal→blue glow along the bottom edge. */
.dc-streams-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(255,255,255,.5), rgba(255,255,255,.5)),
    linear-gradient(180deg, #f5f8fd 0%, #eef2fb 60%, #f7f9fe 100%),
    url('/images/backdrops/streams-pixel-light.png') center / cover no-repeat;
  background-image:
    linear-gradient(0deg, rgba(255,255,255,.5), rgba(255,255,255,.5)),
    linear-gradient(180deg, #f5f8fd 0%, #eef2fb 60%, #f7f9fe 100%),
    image-set(url('/images/backdrops/streams-pixel-light.avif') type('image/avif'), url('/images/backdrops/streams-pixel-light.webp') type('image/webp'), url('/images/backdrops/streams-pixel-light.png') type('image/png'));
  background-blend-mode: normal, multiply, normal;
}
.dc-streams-bg::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  background: linear-gradient(180deg,
    rgba(34,210,162,0) 0%, rgba(34,210,162,.08) 40%,
    rgba(24,146,229,.14) 78%, rgba(11,68,207,.16) 100%);
}

/* Scattered accent squares (deck's floating pixels). Positioned via --x/--y/--s. */
.dc-streams-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.dc-sq {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); border-radius: 3px; opacity: .92;
  box-shadow: 0 8px 20px -10px rgba(8,42,87,.35);
  animation: dc-sq-bob 9s ease-in-out infinite;
}
.dc-sq--mint   { background: #22d2a2; }
.dc-sq--tufts  { background: #1892e5; }
.dc-sq--light  { background: #6fc0f5; }
.dc-sq--pink   { background: #fe9dbe; }
.dc-sq--yellow { background: #ffd23f; }
.dc-sq:nth-child(2n)  { animation-duration: 11s; animation-delay: -2s; }
.dc-sq:nth-child(3n)  { animation-duration: 13s; animation-delay: -4s; }
.dc-sq:nth-child(4n)  { animation-duration: 10s; animation-delay: -6s; }
@keyframes dc-sq-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (max-width: 767px) {
  .dc-sq { opacity: .55; box-shadow: none; }
  .dc-sq--m-hide { display: none; }
}

/* Header gradient dash accent (centred, above the eyebrow). */
.dc-streams-dash { display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--dc-gradient); }

/* Gradient centre divider — vertical between the two streams (desktop only). */
.dc-streams-divider { display: none; }
@media (min-width: 768px) {
  .dc-streams-divider {
    display: block; position: absolute; left: 50%; top: 6%; bottom: 6%;
    width: 2px; transform: translateX(-50%); border-radius: 2px; opacity: .85;
    background: linear-gradient(180deg, #22d2a2 0%, #1892e5 55%, #0b44cf 100%);
  }
}
/* When stacked (mobile), a gradient rule sits in the gap above the 2nd stream. */
.dc-stream--blue { position: relative; }
@media (max-width: 767px) {
  .dc-stream--blue::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1.25rem; height: 2px;
    border-radius: 2px; opacity: .7;
    background: linear-gradient(90deg, #22d2a2, #1892e5, #0b44cf);
  }
}

/* Tinted rounded icon bullets — mint for Enabling, blue for Accelerating. */
.dc-stream-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: .55rem; flex: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dc-stream-ico img { width: 1.15rem; height: 1.15rem; }
.dc-stream--mint .dc-stream-ico { background: rgba(34,210,162,.13); box-shadow: inset 0 0 0 1px rgba(34,210,162,.30); }
.dc-stream--blue .dc-stream-ico { background: rgba(24,146,229,.13); box-shadow: inset 0 0 0 1px rgba(24,146,229,.30); }
.dc-stream-list > li:hover .dc-stream-ico { transform: translateY(-1px); }
.dc-stream--mint .dc-stream-list > li:hover .dc-stream-ico { box-shadow: inset 0 0 0 1px rgba(34,210,162,.55); }
.dc-stream--blue .dc-stream-list > li:hover .dc-stream-ico { box-shadow: inset 0 0 0 1px rgba(24,146,229,.55); }

/* Column titles — these are the stream headings, so bold + large per deck slide 5. */
.dc-stream-title { font-size: 1.6rem; line-height: 1.05; font-weight: 700; letter-spacing: .03em; }
@media (min-width: 1024px) { .dc-stream-title { font-size: 1.9rem; } }

/* The small labels under each stream title + above the industry chips
   ("For companies…", "Industries") — a step up from text-eyebrow-small. */
.dc-stream-sub { font-size: 1rem; font-weight: 600; } /* 16px */

/* Service links read as the section's primary content — a step above text-body-base. */
.dc-stream-list a { font-size: 1.125rem; } /* 18px */
@media (min-width: 1024px) { .dc-stream-list a { font-size: 1.2rem; } }

/* Industry chips as equal aligned boxes on a single row, centred text (deck). */
.dc-stream-industries {
  display: flex; flex-wrap: wrap;
  gap: .6rem; max-width: 30rem;
}
.dc-stream-industries .dc-chip {
  /* Equal thirds where there's room (basis 0 + grow), but never narrower than the
     label: .dc-chip is white-space:nowrap, so a chip shrunk below its text spilled
     out of the pill and off-screen on phones ("AGRICULTURE", "E-COMMERCE").
     min-width:max-content also feeds flex line-breaking, so the row now wraps to a
     second line instead of overflowing. Desktop is unchanged — there the three
     max-contents fit, so they still grow to exact thirds. */
  flex: 1 1 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: .85rem .7rem;
  font-size: 1rem; /* 16px — scoped so the shared .dc-chip base stays 14px elsewhere */
}

/* Industry TAGS (deck) — labels, not controls. Mint tint for the Enabling
   stream, blue tint for Accelerating.
   ---------------------------------------------------------------------------
   These are plain <span>s with no href, and they must not look otherwise. The
   previous treatment was a false affordance: the same gradient fill the primary
   CTA uses (.dc-cta.dc-gradient), an elevation shadow, and — the real tell — a
   `translateY(-1px)` lift on hover. They physically responded to the cursor and
   then did nothing. They also sit directly beneath six REAL service links that
   are styled as plain grey text, so the dead elements were the loudest thing in
   the column. Do not reintroduce a hover transform, an elevation shadow, or the
   CTA gradient here unless these become links.
   Contrast: the old white-on-gradient text was 1.94:1 at the mint end — a 1.4.3
   failure at 14px bold. Brand ink on the tint is 14.7:1. The 1px ring is INSET
   so it rings the pill without adding to the box: `.dc-stream-industries .dc-chip`
   sizes three-across with flex + min-width:max-content, and a real border would
   have nudged that toward an early wrap. */
.dc-chip {
  display: inline-block; padding: .42rem .72rem; border-radius: .55rem;
  font-size: .875rem; font-weight: 700; letter-spacing: .05em; line-height: 1; text-transform: uppercase; /* 14px */
  color: #011c46; white-space: nowrap;
}
.dc-stream--mint .dc-chip { background: rgba(34, 210, 162, .14); box-shadow: inset 0 0 0 1px rgba(34, 210, 162, .45); }
.dc-stream--blue .dc-chip { background: rgba(24, 146, 229, .12); box-shadow: inset 0 0 0 1px rgba(24, 146, 229, .42); }

@media (prefers-reduced-motion: reduce) {
  .dc-sq { animation: none; }
}

/* ===========================================================================
   Capabilities — 2×3 grid of blocks ("Supported by expert partnership"
   pattern): icon top-left, title bottom-left. At rest each card shows only its
   icon + title; on hover an accent line draws in above the card, the surface
   tints, and the description + note reveal in beneath the title. Card heights are
   reserved so the reveal fits inside — the grid never shifts. Below the desktop
   breakpoint the grid collapses (2 cols → 1 col) and every card shows its full
   text. CSS-only (a grid-rows collapse + a scaleX bar) because the body HTML is
   injected via set:html (inline JS won't run).
   =========================================================================== */
.dc-capscroll {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--color-border-primary, #6e84a8);      /* 1px bleed = hairline dividers */
  border: 1px solid var(--color-border-primary, #6e84a8);
}
@media (min-width: 640px)  { .dc-capscroll { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dc-capscroll { grid-template-columns: repeat(3, 1fr); } }

.dc-capcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--color-surface-brand-primary, #fbfcfe);
  padding: 1.5rem; min-height: 260px;
  transition: background .3s ease;
  color: inherit; text-decoration: none;                 /* cards are <a> links now */
}
@media (min-width: 640px) { .dc-capcard { padding: 2rem; } }

.dc-capcard__ico img { width: 40px; height: 40px; display: block; }
.dc-capcard__foot { margin-top: auto; display: flex; flex-direction: column; gap: .75rem; }
.dc-capcard__note { font-style: italic; }

/* ↗ arrow, top-right — always visible on touch (it's the only click
   affordance there); on hover-capable desktops it hides at rest and slides in
   diagonally on hover/keyboard focus. */
.dc-capcard__arrow {
  position: absolute; top: 1.5rem; right: 1.5rem;
  width: 1.375rem; height: 1.375rem;
  color: var(--color-orange-500, #0b44cf);
  transition: opacity .3s ease, transform .3s ease;
}
.dc-capcard__arrow svg { display: block; width: 100%; height: 100%; }
@media (min-width: 640px) { .dc-capcard__arrow { top: 2rem; right: 2rem; } }

/* accent bar on top, hidden until active */
.dc-capcard::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--color-orange-500, #0b44cf);          /* Persian Blue — primary accent */
  transform: scaleX(0); transform-origin: left; transition: transform .4s ease;
}

/* Desktop: subtitle stays visible at all times (same as mobile). Hover only tints
   the surface and draws the top accent line — no collapse/reveal. */
@media (hover: hover) and (min-width: 1024px) {
  .dc-capcard { padding: 2.5rem 2rem; min-height: 340px; }
  .dc-capcard:hover { background: var(--color-surface-brand-secondary, #f1f6fd); }
  .dc-capcard:hover::before { transform: scaleX(1); }
  .dc-capcard__arrow { top: 2.5rem; opacity: 0; transform: translate(-6px, 6px); }
  .dc-capcard:hover .dc-capcard__arrow,
  .dc-capcard:focus-visible .dc-capcard__arrow { opacity: 1; transform: translate(0, 0); }
  .dc-capcard:focus-visible { background: var(--color-surface-brand-secondary, #f1f6fd); }
  .dc-capcard:focus-visible::before { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .dc-capcard, .dc-capcard__reveal, .dc-capcard__reveal-in, .dc-capcard::before, .dc-capcard__arrow { transition: none; }
}

/* Anchor targets on the stream pages sit under the fixed 3rem nav — reserve
   headroom so a capability card / footer link lands with the section title visible. */
#data-annotation, #rlhf, #llm-language, #physical-ai, #model-eval, #data-engine,
#idp, #finance-accounting, #quality-engineering, #it-operations, #bpm {
  scroll-margin-top: 3.5rem;
}

/* ============ Accelerating-Enterprise — models-style light hero ============ */
/* This section is sized to a fixed 800px (min-h-200), NOT the full viewport — so it
   sits in the first fold with the next section peeking below, and the logo cards stay visible. */
.dc-mh-hero{
  position:relative; overflow:hidden; min-height:800px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:5rem 1.5rem 9rem;   /* top = nav clearance; bottom keeps the centered copy above the cards */
  background:#edf7fd url('/images/backdrops/12.png') center / cover no-repeat;
  background-image:
    image-set(url('/images/backdrops/12.avif') type('image/avif'), url('/images/backdrops/12.webp') type('image/webp'), url('/images/backdrops/12.png') type('image/png'));
  border-bottom:1px solid var(--color-border-primary, #dfe6f1);
  color:#0a0a0a;
}
.dc-mh-inner{ max-width:900px; display:flex; flex-direction:column; align-items:center; gap:1rem; position:relative; z-index:2; }
.dc-mh-eyebrow{ margin:0; font-family:var(--font-mono, "Helvetica Neue", Arial, sans-serif); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:#5b6b83; }
.dc-mh-title{ margin:0; font-family:var(--font-main); font-weight:600; font-size:clamp(2.5rem,5.5vw,4.5rem); line-height:1.03; letter-spacing:-.02em; color:#0a0a0a; }
.dc-mh-sub{ margin:0 auto; max-width:620px; font-family:var(--font-main); font-weight:500; font-size:clamp(1rem,1.5vw,1.375rem); line-height:1.4; color:#1c2733; }
.dc-mh-cta-wrap{ margin-top:.5rem; }
.dc-mh-cta{ display:inline-flex; align-items:center; gap:.4rem; padding:.7rem 1.15rem; border-radius:8px; background:#0a0a0a; color:#fff; font-family:var(--font-main); font-weight:500; text-decoration:none; transition:transform .2s ease, background .2s ease; }
.dc-mh-cta:hover{ background:#000; transform:translateY(-1px); }

/* peeking client-logo cards, anchored to the bottom edge (h-50 absolute -bottom-10, items-end) */
.dc-mh-cards{ position:absolute; left:0; right:0; bottom:0; z-index:1; height:210px;
  display:flex; justify-content:center; align-items:flex-end; gap:clamp(1rem,4vw,2.75rem); padding:0 1.5rem; pointer-events:none; }
.dc-mh-card{ pointer-events:auto; position:relative; display:flex; flex-direction:column; align-items:center;
  transform:rotate(var(--r)) translateY(var(--y)); transform-origin:center bottom; }
/* the white tile holding the logo */
.dc-mh-face{ margin:0; width:clamp(104px,13vw,168px); aspect-ratio:1/1; background:#fff; border-radius:16px;
  box-shadow:0 18px 40px -12px rgba(10,20,40,.22), 0 2px 8px rgba(10,20,40,.06);
  display:flex; align-items:center; justify-content:center; padding:clamp(14px,1.6vw,26px);
  transition:transform .18s cubic-bezier(.4,0,.2,1); }
.dc-mh-face img{ width:100%; height:100%; object-fit:contain; }
/* hover name chip above the card (absolute -top-24, opacity 0 → 100 on group-hover) */
.dc-mh-label{ position:absolute; top:-2.5rem; margin:0; padding:.22rem .55rem; border-radius:6px;
  background:#fff; color:#0a0a0a; border:1px solid rgba(10,20,40,.12); box-shadow:0 6px 16px -4px rgba(10,20,40,.18);
  font-family:var(--font-mono, "Helvetica Neue", Arial, sans-serif); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  white-space:nowrap; pointer-events:none; opacity:0; transform:scale(.8) translateY(6px);
  transition:opacity .15s cubic-bezier(.4,0,.2,1), transform .15s cubic-bezier(.4,0,.2,1); }
/* hover: lift + scale the tile, reveal the chip, bring the card forward */
.dc-mh-card:hover{ z-index:50; }
.dc-mh-card:hover .dc-mh-face{ transform:translateY(-12px) scale(1.06); }
.dc-mh-card:hover .dc-mh-label{ opacity:1; transform:scale(1) translateY(0); }

@media (prefers-reduced-motion: no-preference){ .dc-mh-title{ animation:dc-fade-in 1s .12s ease both; } }
@media (max-width:640px){
  .dc-mh-hero{ min-height:640px; padding:4.5rem 1.25rem 6.5rem; }
  .dc-mh-cards{ height:150px; gap:.5rem; }
  .dc-mh-face{ width:23vw; border-radius:12px; padding:10px; }
  .dc-mh-label{ font-size:.62rem; top:-2rem; }
}

/* ---- Enabling-AI variant: same light-hero style, LIVE brand-teal pixel field,
   no peeking logo cards. Taller first fold so the animated field has room to breathe;
   next section still peeks a little below. Teal = the head of the brand gradient
   (#22d2a2), keeping this page distinct from Accelerating-Enterprise's blue. ---- */
.dc-mh-hero--ai{
  min-height:820px; padding:7rem 1.5rem 7rem;
  background:#e7f8f2;   /* flat pale-mint field; the grid + cells are drawn live below */
}
.dc-mh-hero--ai .dc-mh-title{ max-width:16ch; }
.dc-mh-hero--ai .dc-mh-cta-wrap{ margin-top:1rem; }
@media (max-width:640px){
  .dc-mh-hero--ai{ min-height:640px; padding:5.5rem 1.25rem 4.5rem; }
}

/* ---- Press & Media Kit variant: same LIVE pixel field as --ai, blue tone, no logo cards.
   Flat pale-blue field (the mirror of --ai's #fbe9f1) so the white gridlines + blue cells
   read exactly as they do on Enabling AI. ---- */
.dc-mh-hero--press{
  min-height:820px; padding:7rem 1.5rem 7rem;
  background:#e9f1fb;   /* flat pale-blue field; the grid + cells are drawn live below */
}
.dc-mh-hero--press .dc-mh-cta-wrap{ margin-top:1rem; }
@media (max-width:640px){
  .dc-mh-hero--press{ min-height:640px; padding:5.5rem 1.25rem 4.5rem; }
}

/* ---- Rich pixel field — shared by all three light heroes ----
   Enabling AI (teal), Accelerating Enterprise (blue) and Press (brand mint+blue)
   all use the SAME lively treatment: vivid brand-tone cells, a few gradient-filled
   and chunky 2x2 blocks, and a quicker pace. Only the per-cell --tint changes per
   page, so the three read as one deliberate, matched set. */
.dc-mh-grid{ --spd:.72; }
/* gradient-filled cells (brand mint -> blue -> deep blue) — instant focal points */
.dc-mh-grid > i.g{ background-image:var(--dc-gradient); }
/* chunky 2x2 blocks for rhythm — kept in the corners, away from the copy */
.dc-mh-grid > i.big{ width:calc(var(--cell) * 2); height:calc(var(--cell) * 2); }

/* ---- Accelerating-Enterprise variant: the same live pixel field in AE's blue
   (the Enabling-AI hero mirrored). Longer headline → slightly smaller clamp + wider
   measure so it doesn't overpower. ---- */
.dc-mh-hero--ae{
  min-height:820px; padding:7rem 1.5rem 7rem;
  background:#eef6fd;   /* flat light-blue field; the grid + cells are drawn live below */
}
.dc-mh-hero--ae .dc-mh-title{ max-width:22ch; font-size:clamp(2.25rem,4.6vw,3.9rem); }
/* Small screens: ignore the hard 3-line breaks and let the headline wrap to fit. */
.dc-mh-hero--ae .dc-mh-title br{ display:none; }
/* Wide desktop only (≥1280): honour the <br>s for a clean, balanced three-line
   headline. Keep the full title size and just widen the measure so the longest
   line (line 2) fits on one line. At 1024–1279 the forced lines exceed the hero
   width and get clipped by its overflow:hidden, so that band falls back to the
   natural-wrap behavior above instead. */
@media (min-width:1280px){
  .dc-mh-hero--ae .dc-mh-inner{ max-width:1200px; }
  .dc-mh-hero--ae .dc-mh-title{ max-width:none; }
  .dc-mh-hero--ae .dc-mh-title br{ display:inline; }
}
.dc-mh-hero--ae .dc-mh-cta-wrap{ margin-top:1rem; }
@media (max-width:640px){
  .dc-mh-hero--ae{ min-height:660px; padding:5.5rem 1.25rem 4.5rem; }
}

/* Short laptops (768–900px tall): the fixed 800/820px heroes push the
   bottom-anchored logo cards / the fold below the viewport. Track the viewport
   with svh, floored at the mobile-proven heights and capped at today's values —
   viewports ≥800/820px tall render exactly as before. Placed after every
   variant so file order wins; desktop-only so ≤1023 keeps its composition. */
@media (min-width: 1024px) {
  .dc-mh-hero { min-height: clamp(640px, 100svh, 800px); }
  .dc-mh-hero--ai,
  .dc-mh-hero--press,
  .dc-mh-hero--ae { min-height: clamp(660px, 100svh, 820px); }
}

/* Animated pixel field: faint gridlines + a scatter of brand-tone cells that gently
   breathe, with a few "drifters" gliding across. Everything shares one --cell
   token so cells stay snapped to the gridlines at any width. Sits behind the
   copy (.dc-mh-inner is z-index:2). */
.dc-mh-grid{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  --cell:clamp(58px, 6vw, 92px);
  background-image:
    linear-gradient(to right, rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:var(--cell) var(--cell);
}
.dc-mh-grid > i{
  position:absolute; display:block;
  width:var(--cell); height:var(--cell);
  left:calc(var(--c) * var(--cell)); top:calc(var(--r) * var(--cell));
  background:var(--tint, #f5bdd5);
  opacity:var(--o0, .2); transform:scale(.9);
  /* --spd nudges the whole field's pace at once (lower = faster); .85 = a touch quicker */
  animation:dc-cell-breathe calc(var(--dur, 9s) * var(--spd, .85)) ease-in-out var(--delay, 0s) infinite;
  will-change:opacity, transform;
}
.dc-mh-grid > i.d{
  animation:dc-cell-drift calc(var(--dur, 28s) * var(--spd, .85)) linear var(--delay, 0s) infinite;
}
.dc-mh-grid > i.dv{
  animation:dc-cell-drift-y calc(var(--dur, 30s) * var(--spd, .85)) linear var(--delay, 0s) infinite;
}
@keyframes dc-cell-breathe{
  0%,100%{ opacity:var(--o0, .2); transform:scale(.9); }
  50%    { opacity:var(--o1, .6); transform:scale(1); }
}
@keyframes dc-cell-drift{
  0%  { transform:translateX(0) scale(.94); opacity:0; }
  14% { opacity:var(--o1, .45); }
  86% { opacity:var(--o1, .45); }
  100%{ transform:translateX(calc(var(--dist, 5) * var(--cell))) scale(.94); opacity:0; }
}
@keyframes dc-cell-drift-y{
  0%  { transform:translateY(0) scale(.94); opacity:0; }
  14% { opacity:var(--o1, .45); }
  86% { opacity:var(--o1, .45); }
  100%{ transform:translateY(calc(var(--dist, 5) * var(--cell))) scale(.94); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .dc-mh-grid > i{ animation:none; opacity:calc(var(--o1, .5) * .7); transform:none; }
}

/* ---------------------------------------------------------------------------
   "Why the work holds" — deploy section, LIGHT variant.
   Centered intro (mono eyebrow + brand-pixel pips + big headline), then three
   divided columns; each column's body copy is pinned to the BOTTOM of a tall
   cell (tall-cell trick). Sits on a pale alice-blue brand ground so
   it reads as its own light band — distinct from the dark navy CTA below — with
   a faint alice-blue pixel-grid scatter fading in from the top-right corner.
   Navy headings/icons + mint icon-accents (the deck's light-slide treatment).
   --------------------------------------------------------------------------- */
.dc-holds {
  position: relative; overflow: hidden;
  /* Generous top & bottom breathing room. Set here (not via py-* utilities) —
     .py-16 / .py-28 aren't in the frozen Tailwind build, so those classes are no-ops. */
  padding-block: clamp(5rem, 8vw, 8rem);
  background: #eaf4fc;                 /* pale alice-blue brand ground */
  color: #011c46;
}

/* alice-blue pixel-grid backdrop, biased to the top-right, masked so the text
   area stays clean (the deck's light-slide corner-scatter treatment) */
.dc-holds__scatter {
  position: absolute; top: 0; right: 0; z-index: 0; pointer-events: none;
  width: min(64%, 860px); aspect-ratio: 16 / 9;
  background:
    linear-gradient(0deg, rgba(234,244,252,.14), rgba(234,244,252,.14)),
    url('/images/backdrops/streams-pixel-light.png') top right / cover no-repeat;
  background-image:
    linear-gradient(0deg, rgba(234,244,252,.14), rgba(234,244,252,.14)),
    image-set(url('/images/backdrops/streams-pixel-light.avif') type('image/avif'), url('/images/backdrops/streams-pixel-light.webp') type('image/webp'), url('/images/backdrops/streams-pixel-light.png') type('image/png'));
  -webkit-mask-image: linear-gradient(215deg, #000 0%, #000 22%, transparent 78%);
          mask-image: linear-gradient(215deg, #000 0%, #000 22%, transparent 78%);
}

/* centered intro */
.dc-holds__intro { position: relative; z-index: 1; max-width: 58rem; margin-inline: auto; text-align: center; }
.dc-holds__intro h2 { color: #011c46; }
.dc-holds__pips { display: flex; gap: 0.4rem; }
.dc-holds__pips i { width: 0.55rem; height: 0.55rem; display: block; }
.dc-holds__pips i:nth-child(1){ background:#22d2a2; }
.dc-holds__pips i:nth-child(2){ background:#1892e5; }
.dc-holds__pips i:nth-child(3){ background:#0b44cf; }

/* three divided columns — the top/bottom rules run FULL WIDTH (break out of the
   block's px padding with a negative margin), while the text is inset via cell
   padding. Full-bleed horizontal rules + inset columns. */
.dc-holds__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr;
  margin-inline: -1rem;                              /* cancel the block's px-4 (mobile) → rules span edge-to-edge */
  border-top: 1px solid rgba(1,28,70,0.16);
  border-bottom: 1px solid rgba(1,28,70,0.16);
}
.dc-holds__cell {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 2rem 1rem;
  border-top: 1px solid rgba(1,28,70,0.10);
}
.dc-holds__cell:first-child { border-top: 0; }
.dc-holds__ico { width: 32px; height: 32px; color: #011c46; flex: 0 0 auto; }
.dc-holds__ico .accent { color: #22d2a2; }
.dc-holds__h {                                        /* column heading: 32px / 500 / 40px */
  color: #011c46; font-size: 2rem; line-height: 2.5rem; font-weight: 500; letter-spacing: -0.01em;
}
.dc-holds__body { margin-top: auto; }                 /* pin body to the bottom */

@media (min-width: 768px) {
  .dc-holds__grid { grid-template-columns: repeat(3, 1fr); margin-inline: -2.5rem; }  /* cancel px-10 */
  .dc-holds__cell {
    min-height: 300px; padding: 2.5rem; border-top: 0;
    border-left: 1px solid rgba(1,28,70,0.10);        /* vertical dividers between columns */
  }
  .dc-holds__cell:first-child { border-left: 0; }     /* no divider before the first column */
}

/* ============ Closing CTA band — "ready to get started" (brand gradient + film grain) ============ */
/* Full-bleed bg-surface-brand + a tiled noise PNG overlay at mix-blend plus-lighter,
   left copy (eyebrow + big headline) with a black pill button bottom-right. Here: DesiCrew brand gradient
   as the fill, with a self-contained SVG grain overlay (no external asset). */
.dc-cta-band{
  position:relative; overflow:hidden; width:100%; isolation:isolate;
  padding:2.5rem 1rem 4rem;
  background:#0b44cf;   /* fallback under the gradient */
  /* reversed brand gradient — dark (deep blue) on the LEFT behind the white copy for contrast, light (teal) on the right */
  background-image:linear-gradient(90deg,#0b44cf 0%,#1892e5 52%,#22d2a2 100%);
  color:#fff;
}
@media (min-width:768px){ .dc-cta-band{ padding:2.5rem 2.5rem 5rem; } }
/* film grain — tiled grayscale fractal noise, blended into the gradient */
.dc-cta-band__grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px; background-repeat:repeat;
  mix-blend-mode:overlay; opacity:.7;
}
.dc-cta-band__row{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:1.75rem;
}
@media (min-width:768px){
  .dc-cta-band__row{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:3rem; }
}
.dc-cta-band__copy{ display:flex; flex-direction:column; gap:1rem; max-width:44rem; }
.dc-cta-band__eyebrow{ margin:0; font-family:var(--font-mono, "Helvetica Neue", Arial, sans-serif); font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.9); }
.dc-cta-band__title{ margin:0; font-family:var(--font-main); font-weight:600; font-size:clamp(1.75rem,3.4vw,2.75rem); line-height:1.14; letter-spacing:-.01em; color:#fff; }
.dc-cta-band__btn{ flex:none; align-self:flex-start; display:inline-flex; align-items:center; gap:.45rem;
  padding:.75rem 1.15rem; border-radius:8px; background:#0a0a0a; color:#fff;
  font-family:var(--font-main); font-weight:500; text-decoration:none; white-space:nowrap;
  transition:transform .2s ease, background .2s ease; }
@media (min-width:768px){ .dc-cta-band__btn{ align-self:flex-end; } }
.dc-cta-band__btn:hover{ background:#000; transform:translateY(-1px); }
/* the closing CTA button is now the homepage gradient .dc-cta (gradient + arrow, matching every
   other page). On the same-gradient band it needs elevation — a light ring + drop shadow — so it
   reads as a crisp pill instead of dissolving into the band. */
.dc-cta-band .dc-cta{ align-self:flex-start; box-shadow:0 0 0 1.5px rgba(255,255,255,.5), 0 14px 30px -12px rgba(2,16,43,.6); }
@media (min-width:768px){ .dc-cta-band .dc-cta{ align-self:flex-end; } }
.dc-cta-band .dc-cta:hover{ box-shadow:0 0 0 1.5px rgba(255,255,255,.7), 0 18px 34px -12px rgba(2,16,43,.65); }
/* pink variant for the /enabling-ai/ page — dark crimson on the LEFT behind the copy, light pink on the right */
.dc-cta-band--pink{ background:#c4136a; }
.dc-cta-band--pink{ background-image:linear-gradient(90deg,#c4136a 0%,#f94492 52%,#fb7cb4 100%); }
/* optional body line under the CTA title */
.dc-cta-band__body{ margin:0; font-family:var(--font-main); font-size:1.0625rem; line-height:1.55; color:rgba(255,255,255,.85); max-width:40rem; }

/* ============ Stream pages (enabling-ai / accelerating-enterprise) — semi-hero, logo wall,
   pipeline / pillar strips, and horizontal capability sections. ============ */

/* --- Semi-hero: why the stream matters + how we solve it --- */
.dc-semi{ display:flex; flex-direction:column; gap:1.25rem; padding:3.5rem 1rem; }
@media (min-width:768px){ .dc-semi{ padding:5rem 2.5rem; gap:1.5rem; } }
.dc-semi__eyebrow{ margin:0; font-family:var(--font-mono); font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase; color:#5b6b86; }
.dc-semi__title{ margin:0; font-weight:600; font-size:clamp(2rem,4vw,3.25rem); line-height:1.06; letter-spacing:-.025em; color:#011c46; max-width:22ch; }
.dc-semi__title br{ display:none; }
@media (min-width:768px){ .dc-semi__title{ max-width:none; } .dc-semi__title br{ display:inline; } }
.dc-semi__lead{ margin:0; font-size:clamp(1.05rem,1.35vw,1.3rem); line-height:1.6; color:#33415c; max-width:62ch; }
.dc-semi__how{ margin:.15rem 0 0; font-size:1rem; line-height:1.55; color:#55617a; max-width:62ch; }
.dc-semi__how strong{ color:#011c46; font-weight:600; }
.dc-semi__proof{ margin:.4rem 0 0; font-family:var(--font-main); font-weight:600; font-size:1.05rem; color:#011c46; }
/* head row: copy (left) + "Partners" rail (right) */
.dc-semi__head{ display:flex; flex-direction:column; gap:2rem; }
@media (min-width:768px){ .dc-semi__head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; column-gap:2.75rem; } }
.dc-semi__headcopy{ display:flex; flex-direction:column; gap:1.15rem; }
.dc-members{ display:flex; flex-direction:column; gap:.9rem; }
@media (min-width:768px){ .dc-members{ align-items:flex-end; text-align:right; padding-top:.5rem; } }
.dc-members__label{ margin:0; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#5b6b86; white-space:nowrap; }
/* Stacked column: CeRAI on top sets the width, IIT Mandi below stretches to match.
   Both cards share one fixed height; the IIT art (pre-trimmed to its content box,
   489×340) is squarer than CeRAI's wide mark, so it gets a taller image slot to
   read at a comparable optical size. */
.dc-members__logos{ display:flex; flex-direction:column; align-items:stretch; gap:.75rem; }
.dc-member-logo{ display:flex; align-items:center; justify-content:center; height:84px; padding:.5rem 1.1rem; background:#fff; border:1px solid #e4e8f1; border-radius:12px; box-shadow:0 10px 24px -16px rgba(11,68,207,.4); }
.dc-member-logo img{ height:52px; width:auto; max-width:180px; object-fit:contain; display:block; }
.dc-member-logo--iit img{ height:66px; }
/* AE "what endures" — big gradient stat in the same right-rail position as the members rail */

/* Services overview + industry chips (deck "Both sides of AI" — Enabling-AI column) */
.dc-services{ display:flex; flex-direction:column; gap:1rem; margin-top:1.75rem; padding-top:1.75rem; border-top:1px solid #e4e8f1; }
.dc-services__eyebrow{ margin:0; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:#5b6b86; }
.dc-services__eyebrow--ind{ margin-top:.85rem; }
.dc-services__grid{ display:grid; grid-template-columns:1fr; gap:.6rem; }
@media (min-width:640px){ .dc-services__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .dc-services__grid{ grid-template-columns:repeat(3,1fr); } }
/* icon-led service tiles: brand-gradient icon (echoes the section it links to) + name + descriptor + sliding arrow */
.dc-service-tile{ display:flex; align-items:center; gap:.9rem;
  padding:.95rem 1.05rem; border:1px solid #e4eaf3; border-radius:16px;
  background:linear-gradient(180deg,#ffffff,#fbfdff); text-decoration:none;
  box-shadow:0 1px 0 rgba(11,68,207,.03);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease; }
.dc-service-tile__ico{ display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem;
  border-radius:.72rem; flex:none; background:linear-gradient(150deg,#22d2a2,#1892e5 58%,#0b44cf);
  box-shadow:0 10px 20px -10px rgba(24,146,229,.6); transition:transform .22s ease, box-shadow .22s ease; }
.dc-service-tile__ico img{ width:1.2rem; height:1.2rem; filter:brightness(0) invert(1); }
.dc-service-tile__txt{ display:flex; flex-direction:column; gap:.12rem; min-width:0; margin-right:auto; }
.dc-service-tile__name{ font-family:var(--font-main); font-weight:600; font-size:1rem; line-height:1.2; color:#011c46; }
.dc-service-tile__desc{ font-size:.8rem; line-height:1.3; color:#4d5c75; }
.dc-service-tile__arr{ width:15px; height:15px; flex:none; color:#9fb2d8; transition:transform .22s ease, color .22s ease; }
.dc-service-tile:hover{ transform:translateY(-3px); border-color:rgba(24,146,229,.5);
  background:linear-gradient(160deg,#ffffff,#f1f8ff); box-shadow:0 22px 40px -24px rgba(11,68,207,.55); }
.dc-service-tile:hover .dc-service-tile__ico{ transform:translateY(-1px) scale(1.05); box-shadow:0 14px 26px -10px rgba(24,146,229,.72); }
.dc-service-tile:hover .dc-service-tile__arr{ transform:translateX(3px); color:#1892e5; }
/* industry tags — mint tint, matching the homepage Enabling-AI stream. Carries
   the same no-false-affordance rule as .dc-chip above: no gradient fill, no
   elevation, no hover transform. (No markup currently uses .dc-industries; the
   rule is kept so a future section inherits the tag treatment, not the old
   button one.) */
.dc-industries{ display:flex; flex-wrap:wrap; gap:.55rem; }
.dc-industries .dc-chip{ background:rgba(34,210,162,.14); box-shadow:inset 0 0 0 1px rgba(34,210,162,.45); }

/* Pillar strip (Accelerating Enterprise 3-up + Enabling-AI "AI Data Factory" 5-up) —
   brand-gradient cards that pop (gradient top-bar + gradient number + hover lift). */
.dc-pillars{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:.5rem; }
@media (min-width:768px){ .dc-pillars{ grid-template-columns:repeat(3,1fr); gap:1.75rem; } }
.dc-pillar{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.55rem;
  padding:1.5rem 1.4rem 1.6rem; border:1px solid #dbe6fb; border-radius:14px;
  background:linear-gradient(160deg,#ffffff 0%,#f4f8ff 62%,#eef4ff 100%);
  box-shadow:0 16px 32px -24px rgba(11,68,207,.55); transition:transform .25s ease, box-shadow .25s ease; }
.dc-pillar::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--dc-gradient); }
.dc-pillar:hover{ transform:translateY(-3px); box-shadow:0 24px 42px -22px rgba(11,68,207,.55); }
.dc-pillar__n{ font-family:var(--font-mono); font-weight:600; font-size:.8rem; letter-spacing:.08em;
  background:var(--dc-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.dc-pillar__t{ font-family:var(--font-main); font-weight:600; font-size:1.15rem; color:#011c46; }
.dc-pillar__p{ font-size:.95rem; line-height:1.5; color:#55617a; }
/* Enabling-AI 5-up only: lives inside the headcopy column (left of the members
   rail), so it's compact — 3+2 over two rows on a 6-track grid (cards span 2,
   04 offset so the second row sits centered). */
#data-engine .dc-pillars{ gap:1rem; margin-top:1rem; }
@media (min-width:768px){
  #data-engine .dc-pillars{ grid-template-columns:repeat(6,1fr); gap:1.1rem 1rem; }
  #data-engine .dc-pillar{ grid-column:span 2; padding:1.15rem 1.15rem 1.25rem; }
  #data-engine .dc-pillar:nth-child(4){ grid-column:2 / span 2; }
  #data-engine .dc-pillar__t{ font-size:1.05rem; }
  #data-engine .dc-pillar__p{ font-size:.88rem; line-height:1.45; }
}

/* --- Client logo wall (static, grayscale; reuses .dc-logo img styling from landing-2.css) --- */
.dc-logowall{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2rem 4rem; }
.dc-logowall .dc-logo{ height:120px; }
.dc-logowall .dc-logo img{ max-height:84px; max-width:240px; }

/* --- Horizontal capability sections --- */
.dc-capsec{ display:flex; flex-direction:column; gap:1.5rem; padding:3rem 1rem; }
@media (min-width:768px){ .dc-capsec{ padding:4rem 2.5rem; } }
/* Enabling-AI variant only (has a .dc-capsec__body): copy left, facts rail right.
   Scoped with :has() so /accelerating-enterprise's original stacked capsecs are untouched. */
@media (min-width:768px){
  .dc-capsec:has(.dc-capsec__body){ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
    column-gap:3rem; row-gap:1.75rem; align-items:start; }
  /* icon+title header spans both columns, so the facts grid starts level with the copy */
  .dc-capsec:has(.dc-capsec__body) .dc-capsec__marker{ grid-column:1 / -1; }
}
.dc-capsec__body{ display:flex; flex-direction:column; gap:1.1rem; }
.dc-capsec__links{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.5rem; margin-top:.15rem; }
/* icon marker (gradient tile + white brand icon) with the section title inline to its right */
.dc-capsec__marker{ display:flex; align-items:center; gap:1rem; }
.dc-capsec__icon{ flex:none; width:clamp(2rem,2.9vw,2.45rem); height:clamp(2rem,2.9vw,2.45rem); border-radius:11px; background:linear-gradient(150deg,#22d2a2,#1892e5 58%,#0b44cf); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 10px 20px -10px rgba(24,146,229,.6); }
.dc-capsec__icon img{ width:55%; height:55%; filter:brightness(0) invert(1); }
.dc-capsec__eyebrow{ margin:0; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#5b6b86; }
/* title + subtitle stacked (the icon marker sits above) */
.dc-capsec__top{ display:flex; flex-direction:column; gap:.85rem; }
.dc-capsec__title{ margin:0; font-weight:600; font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1.1; letter-spacing:-.02em; color:#011c46; }
.dc-capsec__para{ margin:0; font-size:clamp(1rem,1.15vw,1.15rem); line-height:1.6; color:#33415c; max-width:64ch; }
/* Facts rail — rounded hairline grid (2026-07-22, final round): the original
   boxed cell grid, founder-approved shape, minus the sharp corners. All stats
   are PEERS — equal size, all gradient numerals, no promoted first item. One
   full hairline border wraps the group, radius clips the corners, and the
   cells share inner hairlines (right edge on the left column, bottom edge on
   every non-final row). nth-child divider logic assumes the 2-col grid every
   usage sets via --cols:2. */
.dc-capsec__facts{ margin-top:.25rem; display:grid; grid-template-columns:repeat(2,1fr);
  border:1px solid #e4e8f1; border-radius:16px; overflow:hidden; }
@media (min-width:768px){ .dc-capsec__facts{ grid-template-columns:repeat(var(--cols,4),1fr); } }
.dc-capsec__fact{ padding:1.2rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.55rem;
  border-bottom:1px solid #e4e8f1; transition:background .25s ease; }
.dc-capsec__fact:nth-child(odd){ border-right:1px solid #e4e8f1; }
.dc-capsec__fact:last-child,
.dc-capsec__fact:nth-last-child(2):nth-child(odd){ border-bottom:0; }
.dc-capsec-bg .dc-capsec__fact{ background:rgba(255,255,255,.72); }
.dc-capsec-bg .dc-capsec__fact:hover{ background:#fff; }
/* line-height 1.28 + a little bottom room so gradient-clipped (background-clip:text)
   values keep their descenders (g/y/p) — line-height:1 was cutting them off. */
.dc-capsec__fact .dc-fame-num{ font-size:clamp(1.25rem,1.9vw,1.7rem); line-height:1.28; padding-bottom:.06em; overflow-wrap:break-word; }
/* Gradient-clipped numerals read thin at rail sizes — bold them for legibility
   (the homepage .dc-fame2 wall is bolded separately with its own rule). */
.dc-capsec__fact .dc-fame-num{ font-weight:700; }
.dc-capsec__fact-label{ font-family:var(--font-mono); font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; color:#33415c; line-height:1.4; }
.dc-capsec__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.75rem; }
.dc-capsec__cslink{ display:inline-flex; align-items:baseline; gap:.35rem; font-family:var(--font-main); font-size:.95rem; color:#0b44cf; text-decoration:none; }
.dc-capsec__cslink:hover{ text-decoration:underline; }
/* inline links inside capability copy — brand blue, underlined so they read as a
   link mid-paragraph, inheriting the para size. */
.dc-capsec__para a{ color:#0b44cf; text-decoration:underline; text-underline-offset:2px; }
.dc-capsec__para a:hover{ color:#1892e5; }
/* Whole-line link (the QAonCloud mention): the entire sentence is both the hit area
   and underlined, so the whole line reads as one link. */
.dc-capsec__linkline a{ text-decoration:underline; text-underline-offset:2px; }
.dc-capsec__cta{ margin-left:auto; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#011c46; text-decoration:none; white-space:nowrap; }
.dc-capsec__cta:hover{ color:#1892e5; }
/* alternating light brand-book backdrops behind the capability sections — a white
   wash over the image keeps the pixel grid subtle (lower apparent opacity). */
.dc-capsec-bg{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.dc-capsec-bg--a{ background-color:#fbfcfe; background-image:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)),url('/images/backdrops/12.png');
 background-image:
   linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)), image-set(url('/images/backdrops/12.avif') type('image/avif'), url('/images/backdrops/12.webp') type('image/webp'), url('/images/backdrops/12.png') type('image/png')); }
.dc-capsec-bg--b{ background-color:#fbfcfe; background-image:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)),url('/images/backdrops/11.png');
 background-image:
   linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)), image-set(url('/images/backdrops/11.avif') type('image/avif'), url('/images/backdrops/11.webp') type('image/webp'), url('/images/backdrops/11.png') type('image/png')); }

/* --- Child practices nested inside a parent capsec (AE: BPM → IDP + F&A) ---
   The children sit in .dc-capsub-group, indented inside the parent behind a
   vertical brand-gradient rail; each child's header hangs off the rail with a
   short connector tick, so the pair reads as parts of BPM rather than as
   sibling sections. Each child keeps the capsec rhythm — smaller icon+title
   header spanning both columns, copy left, its own facts rail right.
   Children must NOT use .dc-capsec__body: that class would trip the parent's
   :has() two-column grid above. */
.dc-capsub-group{ --dc-subindent:1.15rem; position:relative; margin-top:.7rem;
  padding-left:var(--dc-subindent); display:flex; flex-direction:column; gap:2rem; }
@media (min-width:768px){ .dc-capsub-group{ --dc-subindent:2.25rem; margin-top:1.1rem; gap:2.5rem; } }
/* the rail — same gradient as the icon tiles, fading out past the last child */
.dc-capsub-group::before{ content:""; position:absolute; left:0; top:.15rem; bottom:0;
  width:2px; border-radius:2px;
  background:linear-gradient(180deg,#22d2a2,#1892e5 52%,rgba(11,68,207,.85) 86%,rgba(11,68,207,0)); }
.dc-capsub{ display:flex; flex-direction:column; gap:1.1rem; }
.dc-capsub + .dc-capsub{ border-top:1px solid #dfe5f0; padding-top:1.9rem; }
.dc-capsub__head{ position:relative; display:flex; align-items:center; gap:.8rem; }
/* connector tick from the rail to each child's icon */
.dc-capsub__head::before{ content:""; position:absolute; top:50%; left:calc(-1 * var(--dc-subindent));
  width:calc(var(--dc-subindent) - .55rem); height:2px; border-radius:2px;
  transform:translateY(-50%); background:linear-gradient(90deg,#1892e5,#22d2a2); }
.dc-capsec__icon--sub{ width:clamp(1.6rem,2.2vw,1.9rem); height:clamp(1.6rem,2.2vw,1.9rem); border-radius:9px; box-shadow:0 8px 16px -9px rgba(24,146,229,.55); }
.dc-capsub__title{ margin:0; font-weight:600; font-size:clamp(1.25rem,1.9vw,1.6rem); line-height:1.15; letter-spacing:-.015em; color:#011c46; }
@media (min-width:768px){
  .dc-capsub{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
    column-gap:3rem; row-gap:1.4rem; align-items:start; }
  .dc-capsub__head{ grid-column:1 / -1; }
  .dc-capsub__copy{ grid-column:1; }
  .dc-capsub > .dc-capsec__facts{ grid-column:2; margin-top:0; }
}

/* ===== Featured case-study cards (capability sections) =====
   Compact title-only teaser cards sitting inside the section's copy column
   (.dc-capsec__body / .dc-capsub__copy), directly under the intro paragraphs —
   they fill the empty left-column space beside the facts rail instead of
   dropping below it as a labelled full-width row. Text-only by design — no
   hero thumbnail, no label, no takeaway (they competed with the copy). */
.dc-csgrid{ margin-top:.35rem;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,15rem), 20rem));
  gap:1rem; justify-content:start; }

/* Phones: a section with 2+ case cards reads as one swipeable row rather than a
   vertical stack that pushes the rest of the section down. Only `--multi` grids opt
   in — a single card should still fill the copy column, not shrink to swipe width.
   Cards are ~80% wide so the next one peeks, which is the affordance that says
   "scrollable"; the scrollbar itself is hidden. The negative/positive margin pair
   lets the row bleed to the section's edge so a card can scroll fully off, and
   overscroll-behavior stops a horizontal swipe turning into a browser back-gesture. */
@media (max-width: 767px) {
  .dc-csgrid--multi{
    display:flex; flex-wrap:nowrap; overflow-x:auto;
    margin-inline:-1rem; padding-inline:1rem;
    scroll-snap-type:x proximity; scroll-padding-left:1rem;
    overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .dc-csgrid--multi::-webkit-scrollbar{ display:none; }
  .dc-csgrid--multi > .dc-cscard{
    flex:0 0 auto; width:min(80%, 18rem); scroll-snap-align:start;
  }
}

.dc-cscard{ position:relative; display:flex; flex-direction:column;
  border:1px solid #e4e8f1; border-radius:16px; background:#fff; overflow:hidden;
  text-decoration:none; isolation:isolate; box-shadow:0 1px 2px rgba(1,28,70,.05);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease; }
.dc-cscard:hover{ transform:translateY(-4px); border-color:#c7d5ea; box-shadow:0 22px 40px -24px rgba(1,28,70,.34); }
.dc-cscard:focus-visible{ outline:2px solid #1892e5; outline-offset:3px; }

/* brand keyline stands in for the removed hero thumbnail */
.dc-cscard::before{ content:""; flex:none; height:3px;
  background:linear-gradient(90deg,#22d2a2,#1892e5); }

/* content */
.dc-cscard__content{ display:flex; flex-direction:column; gap:.5rem; padding:1rem 1.1rem 1.1rem; flex:1; }
.dc-cscard__title{ margin:0; font-family:var(--font-main); font-weight:600; font-size:1.02rem;
  line-height:1.25; letter-spacing:-.01em; color:#011c46; text-wrap:balance; }
.dc-cscard__foot{ display:inline-flex; align-items:center; gap:.4rem; margin-top:auto; padding-top:.7rem;
  font-family:var(--font-main); font-weight:500; font-size:.85rem; color:#0b44cf; }
.dc-cscard__foot svg{ flex:none; width:.95rem; height:.95rem; transition:transform .3s ease; }
.dc-cscard:hover .dc-cscard__foot svg{ transform:translateX(4px); }

/* Logo-wall section — explicit padding (the frozen Tailwind bundle has no py-16/py-24,
   so those utilities were no-ops). */
.dc-logowall-sec{ display:flex; flex-direction:column; gap:2rem; padding:2.75rem 1rem; }
@media (min-width:768px){ .dc-logowall-sec{ gap:2.25rem; padding:3.5rem 1rem; } }
/* These logo-wall tracks repeat their set until one HALF of the track outspans the
   1728px container (18/20 slots per half — a half narrower than the container leaves
   a blank region in the -50% loop). Duration is tuned to those half widths
   (~2700-3000px) for the same ~56px/s as the homepage marquee. */
.dc-logowall-sec .dc-marquee__track{ animation-duration:50s; }
/* (The deterministic 96px logo slots that keep this marquee scrolling correctly from
   load — independent of lazy-image loading — live in landing-2.css alongside the
   shared .dc-marquee component, so every marquee benefits.) */

/* Press-mention rows (/press/): pin the outlet label to one column width on md+ so
   every headline starts on the same vertical line. Sized to the longest label
   ("The Hindu BusinessLine" in Space Grotesk uppercase small). Hand-written because
   the frozen Tailwind bundle has no md:w-* utilities. Mobile keeps the stacked flow. */
@media (min-width: 768px) {
  .dc-press-outlet { width: 14rem; flex: none; }
}

/* ---------------------------------------------------------------------------
   Nav "Talk to us" — lights up once you scroll past the hero's Talk-to-us pill.
   Motion is DELIBERATELY DECOUPLED from raw scroll: a single IntersectionObserver
   (index.astro) just flips .is-active when the hero pill slips behind the nav, and
   a time-based CSS transition does the gliding — so it eases at a steady 60fps no
   matter how choppy the wheel/trackpad deltas are. (The earlier version tracked
   scroll position frame-by-frame, which is exactly what made it stutter.)

   The brand gradient rises to fill the cell like liquid — clip-path sweeping up
   from the base — while the label crosses to white a beat behind it. One slow,
   gentle ease-in-out both ways (~0.66s), so scrolling back up drains it just as
   smoothly. Homepage-only sheet, so no other page's nav is affected; without the
   observer the fill simply stays dormant.
   --------------------------------------------------------------------------- */
[data-nav-cta]{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* label eases to white a beat after the fill starts rising past it */
  transition: color .52s cubic-bezier(.65,0,.35,1) .08s;
}
[data-nav-cta]::before{               /* the rising gradient fill */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                        /* above the cell's own bg, below the label */
  background-image: var(--dc-gradient);
  clip-path: inset(100% 0 0 0);       /* clipped to a zero-height sliver at the base */
  transition: clip-path .66s cubic-bezier(.65,0,.35,1);
}
[data-nav-cta].is-active{ color: #fff; }
[data-nav-cta].is-active::before{ clip-path: inset(0 0 0 0); } /* rises to fill */

@media (prefers-reduced-motion: reduce){
  /* keep it legible, just cross-fade quickly instead of sweeping */
  [data-nav-cta]{ transition: color .12s linear; }
  [data-nav-cta]::before{ clip-path: none; opacity: 0; transition: opacity .15s linear; }
  [data-nav-cta].is-active::before{ opacity: 1; }
}

/* ===========================================================================
   Stream-page heroes — the "tablet band" (641–1023px).
   ---------------------------------------------------------------------------
   The dc-mh-* pixel-field heroes are sized to a fixed ~800–820px first fold for
   desktop and drop to ~640px only at ≤640px. That leaves the whole large-phone /
   tablet band showing a desktop-tall hero, so the copy floats in an ocean of
   dead field and the next section never peeks. Trim the fold to a screen-relative
   height here and tighten the vertical padding, so the hero reads as one tidy
   panel on a 700–1000px screen. Desktop (≥1024px) is untouched.
   =========================================================================== */
@media (min-width: 641px) and (max-width: 1023px) {
  .dc-mh-hero { min-height: min(80svh, 640px); padding: 6rem 1.5rem 5rem; }
  .dc-mh-hero--ai,
  .dc-mh-hero--ae,
  .dc-mh-hero--press { min-height: min(84svh, 680px); padding: 6.5rem 1.5rem 5rem; }
  /* keep the headline measured on tablet (the ≥1024 rule widens it for the
     honoured 3-line <br>; below that the natural wrap wants a tighter measure) */
  .dc-mh-hero--ae .dc-mh-title { max-width: 20ch; }
}

/* ===========================================================================
   Homepage hero — phone redesign (≤767px). "Calmer & compact" + inset panel.
   ---------------------------------------------------------------------------
   At rest on mobile the hero stacks: copy column (px-4 → 22px via Lever 2, the
   headline now ~32px via the recalibrated tokens) above the pixel field. Three
   fixes here: pull the copy up under the nav (pt-24 = 96px was a huge gap),
   tighten the copy→panel gap, and turn the full-bleed 16:9 field into a
   deliberate INSET rounded panel that lines up with the copy gutter. Desktop
   choreography (≥1024px) is untouched — these are all ≤767px only.
   =========================================================================== */
@media (max-width: 767px) {
  /* copy column: sit up near the nav, tighten the gap down to the panel */
  .dc-hero3 [class~="pt-24"] { padding-top: 3.5rem; }
  .dc-hero3 [class~="pb-10"] { padding-bottom: 1.5rem; }
  /* headline: the token gives ~32px; keep the lines tight + hard-left */
  .dc-hero3 .dc-h3-title { letter-spacing: -0.02em; }
  .dc-hero3 .dc-h3-headline { gap: 1rem; }
  /* pixel field → framed inset panel (the div that directly holds .dc-h3-grid).
     width:auto lets the stretch flex item fill the row minus the side margins,
     which match the 22px copy gutter; overflow:hidden (already on it) clips the
     grid to the rounded corners. aspect-video keeps it a tidy ~2:1-ish band. */
  .dc-hero3 div:has(> .dc-h3-grid) {
    width: auto;
    margin: 0.25rem 1.375rem 2rem;
    border-radius: 14px;
    box-shadow: 0 18px 40px -24px rgba(1, 28, 70, 0.45);
  }
}

/* Section-page heroes (enabling-ai / accelerating-enterprise / press) — phone calm.
   .dc-mh-title uses its OWN clamp (not the --text-* tokens), so Lever 1 doesn't reach
   it; it renders at its ~40px floor on a phone — too loud for the "calmer" direction.
   Bring it in line with the homepage hero (~32px) and trim the tall first fold so the
   copy isn't marooned in a sea of pixel field. ≤767px only; desktop untouched. */
@media (max-width: 767px) {
  .dc-mh-title { font-size: 2rem; line-height: 1.12; }
  .dc-mh-hero--ae .dc-mh-title { font-size: 1.85rem; }
  .dc-mh-hero--ai,
  .dc-mh-hero--ae,
  .dc-mh-hero--press { min-height: 78svh; padding-top: 5rem; padding-bottom: 3.5rem; }
}