/* ==========================================================================
   Devomarks — "What We Do"
   Reference composition: an oversized outlined wordmark split across the two
   far corners, a stack of tilted image plates shuffling through the centre,
   and a single short paragraph bottom-left. Devomarks palette (near-black
   ground, #DE1A39 accent) instead of the light original.
   Motion lives in js/devomarks.js; the resting state below is legible on its
   own so the section still reads with JavaScript disabled.
   ========================================================================== */

.dm-what {
  --dm-accent: var(--primary-color-03, #de1a39);
  --dm-accent-soft: var(--primary-color-02, #f73737);
  --dm-muted: var(--_colors---theeme-color--text-color, #c1c1c2);

  position: relative;
  width: 100%;
  background-color: var(--_colors---theeme-color--bg-color-01, #181a1c);
  overflow: clip;
}

/* The stage is what gets pinned, so the section's own vertical padding would
   push it below the viewport and cut the paragraph off the bottom. The stage
   carries its own padding instead. */
.dm-what.section-padding {
  padding-top: 0;
  padding-bottom: 0;
}

.dm-what__stage {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 7vh, 96px) clamp(20px, 4vw, 64px);
  overflow: hidden;
}

/* ------------------------------------------------------------ background --
   Transparent fill with a hairline stroke keeps the type a frame rather than
   a headline competing with the plates. */
.dm-what__word {
  position: absolute;
  z-index: 1;
  font-family: var(--_fonts---heading-font, Geist, sans-serif);
  font-weight: 400;
  font-size: clamp(88px, 17.5vw, 260px);
  line-height: 0.8;
  letter-spacing: -0.015em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.dm-what__word--a { top: clamp(24px, 7vh, 90px); left: clamp(16px, 3vw, 56px); }
.dm-what__word--b { bottom: clamp(24px, 7vh, 90px); right: clamp(16px, 3vw, 56px); }

/* ----------------------------------------------------------------- deck --
   Plates are absolutely centred; JS moves each one to its slot. z-index sits
   above the wordmark so the centre plate crosses over the letterforms exactly
   as in the reference. */
.dm-what__deck {
  position: relative;
  z-index: 3;
  width: min(92vw, 620px);
  height: min(58vh, 460px);
  transform-style: preserve-3d;
}

.dm-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(190px, 22vw, 330px);
  height: clamp(230px, 30vw, 400px);
  margin: 0;
  border-radius: 2px;
  overflow: hidden;
  background: #0d0f11;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  /* resting fan, replaced by JS once it takes over */
  transform: translate(-50%, -50%) rotate(calc((var(--i, 0) - 1.5) * 6deg));
}

.dm-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* the plate's name: available to assistive tech and to search, not painted */
.dm-card__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- intro --
   One paragraph, bottom-left, matching the reference's single block of copy. */
.dm-what__intro {
  position: absolute;
  z-index: 4;
  left: clamp(20px, 4vw, 64px);
  bottom: clamp(28px, 7vh, 88px);
  max-width: min(52ch, 38vw);
}

.dm-what__label {
  color: var(--dm-accent-soft);
  font-size: var(--small-font, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: clamp(10px, 1.6vh, 16px);
}

/* Panels are stacked on one grid cell so the block never changes height as the
   copy swaps - otherwise the paragraph would jump between services. */
.dm-what__panels {
  display: grid;
}

.dm-what__panel {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.dm-what__panel.is-current {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.dm-what__step {
  display: block;
  color: var(--dm-accent-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.dm-what__step em { font-style: normal; opacity: 0.6; }

.dm-what__heading {
  margin: 0 0 10px;
  color: #fff;
  font-family: var(--_fonts---heading-font, Geist, sans-serif);
  font-size: clamp(20px, 2.1vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}

.dm-what__support {
  margin: 0;
  color: var(--dm-muted);
  font-size: clamp(13px, 1.02vw, 16px);
  line-height: 1.55;
}

/* a single accent rule tying the block to the brand */
.dm-what__intro::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-bottom: 14px;
  background: var(--dm-accent);
}

/* --------------------------------------------------------------- responsive */
@media screen and (max-width: 991px) {
  .dm-what__word { font-size: clamp(64px, 21vw, 150px); -webkit-text-stroke-width: 1px; }
  .dm-what__deck { height: min(46vh, 360px); }
  .dm-card { width: clamp(150px, 42vw, 240px); height: clamp(190px, 54vw, 300px); }
  .dm-what__intro { max-width: min(46ch, 72vw); }
}

@media screen and (max-width: 479px) {
  .dm-what__word--a { top: clamp(16px, 5vh, 40px); }
  .dm-what__word--b { bottom: clamp(96px, 22vh, 160px); }
  .dm-what__intro { bottom: clamp(20px, 4vh, 40px); max-width: 88vw; }
}

/* Plates settle into a static fan for motion-sensitive visitors. */
@media (prefers-reduced-motion: reduce) {
  .dm-card,
  .dm-what__word {
    transition: none !important;
    animation: none !important;
  }
}