/* clx-cd-methodology — "Our Experience Design Methodology"
   Renders 3 .svc-card leaves with a Da Vinci-style SVG study at the
   top. Card chrome (bg, border, radius, padding, shadow), card title,
   description, bullet list, and bullet markers all come from the
   shipped .svc-card / .svc-card-* classes in site-wide.css — this
   file only adds: section wrapper, the SVG stage box, study-line
   color/stroke primitives, and the IntersectionObserver reveal motion.
   No new design language; no Google Fonts. */

.cdm {
  position: relative;
  /* Padding is intentionally light on both sides because the
     neighbouring sections already supply their own 56px top/bottom
     padding (Industries CTA above, Case Studies below). Stacking
     another 88+96 here gave visible empty bands at both edges. */
  padding: 24px 0 32px;
  background: #fff;
}
.cdm__inner {
  max-width: 1132px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Section heading — reuses .svc-heading-title / .svc-heading-desc
   so the typography matches every other H2 on /creative-design/.
   No max-width cap on the intro: it spans the full section width
   so the three-clause copy reads as a single declarative line. */
.cdm__header {
  margin: 0 0 48px;
}

/* 3-up grid of leaves */
.cdm__spread {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Each leaf is .svc-card (shipped pattern); we just give it a thin
   class hook for the IntersectionObserver target. */
.cdm__leaf {
  display: flex;
  flex-direction: column;
}

/* SVG study stage — matches the SVG viewBox aspect (320:240) so the
   Da Vinci illustration fills the stage without letterboxing. */
.cdm__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 320 / 240;
  margin: 0 0 22px;
}
.cdm__stage svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; overflow: visible;
}

/* ------------------------------------------------------------------
   SVG line primitives — used by the data-draw paths inside each SVG.
   Colors map to existing brand tokens; no new palette.
   ------------------------------------------------------------------ */
.cdm svg .ink        { stroke: #142533; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cdm svg .ink-dim    { stroke: #6F7A82; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cdm svg .ink-faint  { stroke: rgba(20,37,51,0.18); fill: none; stroke-linecap: round; }
.cdm svg .ember-line { stroke: #FA4900; fill: none; stroke-linecap: round; }
.cdm svg .ember-fill { fill: #FA4900; }
.cdm svg .paper-fill { fill: #ffffff; }

.cdm svg .label {
  font-family: 'Cabin', sans-serif; font-weight: 700;
  font-size: 9px; letter-spacing: 1.4px;
  fill: #142533; text-transform: uppercase;
}
.cdm svg .label-em {
  font-family: 'Cabin', sans-serif; font-weight: 700;
  font-size: 9px; letter-spacing: 1.4px;
  fill: #FA4900; text-transform: uppercase;
}
.cdm svg .num {
  /* `ui-monospace` falls back to the platform mono; no Google font
     dependency — keeps the page font budget unchanged. */
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-weight: 400; font-size: 8.5px;
  fill: #6F7A82;
}
.cdm svg .ital {
  font-family: 'Cabin', sans-serif; font-style: italic; font-weight: 400;
  font-size: 9.5px;
  fill: #6F7A82;
}

/* ------------------------------------------------------------------
   Reveal — IntersectionObserver toggles .is-on on the leaf, which
   draws strokes in and fades annotations on. Each element opts in
   with data-draw (path) or data-fade (annotation), and supplies
   --len (path length) and --d (delay) inline.
   ------------------------------------------------------------------ */
.cdm svg [data-draw] {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  opacity: 0;
  transition:
    stroke-dashoffset 1.4s cubic-bezier(.5,.05,.4,1) var(--d, 0s),
    opacity .35s ease var(--d, 0s);
}
.cdm svg [data-fade] {
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity .55s ease var(--d, 0s),
    transform .55s ease var(--d, 0s);
}
.cdm__leaf.is-on svg [data-draw] { stroke-dashoffset: 0; opacity: 1; }
.cdm__leaf.is-on svg [data-fade] { opacity: 1; transform: translateY(0); }

/* Perpetual sub-motions — only after reveal */
.cdm__leaf.is-on .breathe {
  transform-origin: center; transform-box: fill-box;
  animation: cdmBreathe 4.5s ease-in-out infinite;
}
@keyframes cdmBreathe {
  0%, 100% { transform: scale(.92); opacity: .92; }
  50%      { transform: scale(1.06); opacity: 1; }
}
.cdm__leaf.is-on .pulse-ring {
  transform-origin: center; transform-box: fill-box;
  animation: cdmPulseRing 3.6s ease-out infinite;
}
@keyframes cdmPulseRing {
  0%        { transform: scale(1);   opacity: .55; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}
.cdm__leaf.is-on .spin {
  transform-origin: center; transform-box: fill-box;
  animation: cdmSpin 22s linear infinite;
}
.cdm__leaf.is-on .spin-rev {
  transform-origin: center; transform-box: fill-box;
  animation: cdmSpin 22s linear infinite reverse;
}
@keyframes cdmSpin {
  to { transform: rotate(360deg); }
}

.cdm__leaf .svc-card-specs:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   Outro — two paragraphs that close the section. Two-column layout:
   italic quote on the left (shipped `blockquote.svc-quote` 3px orange
   border + 20px padding), plain body on the right. Both columns use
   `.svc-heading-desc` typography (DM Sans 18/28). The quote takes
   the darker ink color + italic so it reads as a declarative
   statement; the right column stays muted body copy.
   ------------------------------------------------------------------ */
.cdm__outro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin: 64px 0 0;
}
.cdm__outro blockquote.svc-quote { margin: 0; }
.cdm__outro .cdm__outro-quote {
  color: #142533;
  margin: 0;
  font-style: italic;
}
.cdm__outro .cdm__outro-body { margin: 0; }

@media (max-width: 860px) {
  .cdm__outro { grid-template-columns: 1fr; gap: 28px; }
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .cdm__spread { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdm__spread > .svc-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: calc(50% - 12px);
    justify-self: center;
  }
}
@media (max-width: 600px) {
  .cdm { padding: 40px 0; }
  .cdm__spread { grid-template-columns: 1fr; gap: 18px; }
  .cdm__spread > .svc-card:nth-child(3) { max-width: none; }
}

/* Respect reduced-motion: skip the draw / fade transitions and stop
   perpetual loops, but keep everything visible. */
@media (prefers-reduced-motion: reduce) {
  .cdm svg [data-draw] { stroke-dashoffset: 0 !important; opacity: 1 !important; transition: none !important; }
  .cdm svg [data-fade] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cdm__leaf.is-on .breathe,
  .cdm__leaf.is-on .pulse-ring,
  .cdm__leaf.is-on .spin,
  .cdm__leaf.is-on .spin-rev { animation: none !important; }
}
</content>
</invoke>