/* ==========================================================================
   Devomarks — web development page: added sections + layout corrections.

     .wd-flow   development approach — an editorial split intro over a
                connected four-step process rail
     .wd-stack  development capabilities — an asymmetric bento whose cards
                carry a rotating gradient edge and a cursor-tracked spotlight

   Built from the tokens in novacraft-sections.css so these sit inside the
   existing system rather than beside it: Geist headings on the --h2/--h3/--h4
   ramp, Inter body at --p-d, --paper card ground, --line hairlines, Devomarks
   red for accent, --ease for transitions. Markup is deliberately shallow —
   one container per card, every layer drawn by a pseudo-element rather than a
   second wrapper.

   Every structural rule is scoped `.dm-devomarks-page .elementor` (three
   classes). Elementor declares container layout at two —
   `.e-con.e-flex { flex-direction: var(--flex-direction) }` — and
   wp-compat.css resets that variable to `row`. A one-class rule loses to it,
   which was not theoretical: the first build of this file set
   `flex-direction: column` on the step and card containers, lost, and every
   one of them laid its children out in a row. Three classes wins outright.
   ========================================================================== */

/* the lead paragraph added under a section heading */
.dm-devomarks-page .elementor .shead__lead {
  margin: 0; color: var(--gray);
  font-size: var(--p-d); line-height: 170%;
}

/* ======================= section rhythm ==================================
   The export stacked --s-2xl (130px) on --s-l (100px) and the trench between
   two sections varied from 190px to 230px. Every section now contributes the
   same half, so the space between any two is exactly 200px. */
.dm-devomarks-page .elementor .section,
.dm-devomarks-page .elementor .wd-flow,
.dm-devomarks-page .elementor .wd-stack,
.dm-devomarks-page .elementor .faq { padding-block: 100px; }

.dm-devomarks-page .elementor .projects { padding-top: 100px; padding-bottom: 100px; }
.dm-devomarks-page .elementor .awards   { padding-top: 100px; padding-bottom: 100px; }
.dm-devomarks-page .elementor .cta      { padding-block: 100px; }

/* ============================== hero ==================================== */
/* the drawn rule before the badge reads as a stray artifact next to the
   header logo — the label carries itself */
.dm-devomarks-page .elementor .wd-hero__eyebrow::before { display: none; }

/* "Websites Built to Work" needs 618px and the column offers 597, so the
   first line wrapped and the headline ran to four rows. Sized so the longest
   line clears the column at every width. */
.dm-devomarks-page .elementor .wd-hero__h1 { font-size: clamp(28px, 3.35vw, 56px); }

/* ===================== section heads: measured widths ====================
   Each cap is derived from the heading's own max-content width so the line
   count is deliberate rather than incidental. */

/* projects h2 is 1569px unwrapped and needs 940px to break cleanly in two,
   so the block that holds it is given room for that plus a little slack. The
   heading's own width lives in the editor as a per-element setting. */
.dm-devomarks-page .elementor .projects .shead > .rv { width: 100%; max-width: 1000px; }

/* The services h2 carries its own 858px width from the editor, which lands it
   on two lines; this only has to give the block room for it. Overrides
   `.services .shead { max-width: 557px }`, which would force three lines. */
.dm-devomarks-page .elementor .services .shead { max-width: 900px; }
.dm-devomarks-page .elementor .services .shead__lead { text-align: center; }

/* Lead widths need five classes, not four. wp-compat.css relaxes every widget
   with `.dm-devomarks-page .e-con .elementor-widget.elementor-widget
   { max-width: none }` so a widget stops being capped by its container, and
   that rule is four classes loading after this file — a four-class cap here
   is silently discarded, which is exactly what happened to the first attempt:
   `text-align: center` applied and `max-width` did not, leaving the services
   lead centred but still running the full 900px. */
.dm-devomarks-page .elementor .projects .shead__lead.elementor-widget { max-width: 780px; }
.dm-devomarks-page .elementor .services .shead__lead.elementor-widget { max-width: 640px; }

/* breathing room under every section head before the content starts */
.dm-devomarks-page .elementor .shead { margin-bottom: 56px; }

/* ============================== awards ================================== */
/* the intro column sat directly on the first row */
.dm-devomarks-page .elementor .aw__top { margin-bottom: 56px; }

/* ============================== agency ================================== */
/* this line is the section's whole statement — give it h2 weight */
.dm-devomarks-page .elementor .agency__title {
  font-size: var(--h2);
  line-height: 112%;
  letter-spacing: var(--ls-h2);
}

/* ============================ approach / flow ============================ */
.dm-devomarks-page .elementor .wd-flow__head {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(24px, 4.5vw, 80px);
  align-items: start;
  margin-bottom: 56px;
}

/* sentence case: at --h3 a full sentence set in caps shouts */
.dm-devomarks-page .elementor .wd-flow__lede {
  margin: 0; color: #fff;
  font-family: var(--dm-head); text-transform: none; font-weight: 500;
  font-size: var(--h3); line-height: 120%; letter-spacing: var(--ls-h3);
}

.dm-devomarks-page .elementor .wd-flow__notes {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 16px; padding-top: 6px;
}
.dm-devomarks-page .elementor .wd-flow__notes > * {
  margin: 0; color: var(--gray);
  font-size: var(--p-d); line-height: 172%;
}

.dm-devomarks-page .elementor .wd-flow__rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
  position: relative; padding-top: 30px;
}
.dm-devomarks-page .elementor .wd-flow__rail::before {
  content: ""; position: absolute; left: 0; right: 0; top: 6px;
  height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(222,26,57,.6), var(--line) 55%, var(--line));
}
.dm-devomarks-page .elementor .wd-flow__step {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  transition: transform .6s var(--ease);
}
.dm-devomarks-page .elementor .wd-flow__step::before {
  content: ""; position: absolute; top: -27px; left: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line);
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
.dm-devomarks-page .elementor .wd-flow__step:hover { transform: translateY(-6px); }
.dm-devomarks-page .elementor .wd-flow__step:hover::before {
  background: var(--dv-accent, #de1a39);
  box-shadow: 0 0 0 5px rgba(222,26,57,.16);
}
.dm-devomarks-page .elementor .wd-flow__n {
  font-family: var(--dm-head);
  font-size: 56px; line-height: 1; letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.17);
  transition: -webkit-text-stroke-color .55s var(--ease);
}
.dm-devomarks-page .elementor .wd-flow__step:hover .wd-flow__n {
  -webkit-text-stroke-color: rgba(222,26,57,.8);
}
.dm-devomarks-page .elementor .wd-flow__t {
  margin: 0; color: #fff; font-family: var(--dm-head);
  font-size: var(--h5); letter-spacing: -.02em; font-weight: 500;
}
.dm-devomarks-page .elementor .wd-flow__d {
  margin: 0; color: var(--gray);
  font-size: var(--p-d); line-height: 165%;
}

/* ========================== capabilities / stack ==========================
   Three effects layered on one container, no extra markup:

     ::before  a conic gradient, twice the card's diagonal, rotating slowly.
               Clipped by the card's overflow so only the 1px margin between
               it and ::after shows — that is the moving edge light.
     ::after   the card interior. Carries the paper ground plus a radial
               spotlight positioned from --mx/--my, which wd-extra.js writes
               on pointer move.
     children  lifted above both on z-index.

   The rotation animates `transform` on a pseudo-element, so it composites on
   the GPU and never triggers layout. */
/* padding lives with the section rhythm block at the top of this file — a
   second declaration here previously reset it to 60px and pinched the two
   gaps either side of this section to 160px */
.dm-devomarks-page .elementor .wd-stack__head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px; max-width: 900px; margin-bottom: 56px;
}

.dm-devomarks-page .elementor .wd-stack__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
}

/* 2 + 1 / 1 + 2 — the row breaks rather than marching in fours */
.dm-devomarks-page .elementor .wd-stack__card:nth-child(1),
.dm-devomarks-page .elementor .wd-stack__card:nth-child(4) { grid-column: span 2; }

.dm-devomarks-page .elementor .wd-stack__card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch;
  justify-content: flex-start; gap: 12px;
  padding: clamp(26px, 2.4vw, 38px);
  border: 0; border-radius: var(--r-xl);
  background: transparent;
  transition: transform .7s cubic-bezier(.32,.72,0,1);
}

/* the moving edge light */
.dm-devomarks-page .elementor .wd-stack__card::before {
  content: ""; position: absolute; z-index: 0;
  top: 50%; left: 50%; width: 190%; aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(222,26,57,.85) 40deg,
    rgba(255,255,255,.30) 78deg, transparent 130deg,
    transparent 220deg, rgba(222,26,57,.45) 268deg, transparent 320deg);
  opacity: .5;
  animation: wd-edge 9s linear infinite;
  transition: opacity .6s var(--ease);
}

/* the card interior + cursor spotlight */
.dm-devomarks-page .elementor .wd-stack__card::after {
  content: ""; position: absolute; z-index: 1; inset: 1px;
  border-radius: calc(var(--r-xl) - 1px);
  background:
    radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
      rgba(222,26,57,.20), transparent 60%),
    var(--paper);
  transition: background .25s linear;
}

.dm-devomarks-page .elementor .wd-stack__card > * { position: relative; z-index: 2; }

.dm-devomarks-page .elementor .wd-stack__card:hover { transform: translateY(-6px); }
.dm-devomarks-page .elementor .wd-stack__card:hover::before { opacity: 1; }

@keyframes wd-edge { to { rotate: 360deg; } }

.dm-devomarks-page .elementor .wd-stack__k {
  margin: 0; color: #fff; font-family: var(--dm-head);
  font-size: var(--h4); letter-spacing: var(--ls-h4); font-weight: 500;
  width: fit-content;
}
/* the label underlines itself as the card is entered */
.dm-devomarks-page .elementor .wd-stack__k::after {
  content: ""; display: block; height: 1px; margin-top: 8px;
  background: var(--dv-accent, #de1a39);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.dm-devomarks-page .elementor .wd-stack__card:hover .wd-stack__k::after { transform: scaleX(1); }

.dm-devomarks-page .elementor .wd-stack__d {
  margin: 0; color: var(--gray);
  font-size: var(--p-d); line-height: 170%; max-width: 62ch;
}

/* ================================ responsive ============================= */
@media (max-width: 1000px) {
  .dm-devomarks-page .elementor .wd-flow__head { grid-template-columns: 1fr; gap: 22px; }
  .dm-devomarks-page .elementor .wd-flow__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px;
  }
  .dm-devomarks-page .elementor .wd-stack__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-devomarks-page .elementor .wd-stack__card:nth-child(1),
  .dm-devomarks-page .elementor .wd-stack__card:nth-child(4) { grid-column: span 2; }
  .dm-devomarks-page .elementor .services .shead,
  .dm-devomarks-page .elementor .projects .shead > .rv { max-width: 100%; }
  /* five classes here too, for the same reason as the caps above */
  .dm-devomarks-page .elementor .services .shead__lead.elementor-widget,
  .dm-devomarks-page .elementor .projects .shead__lead.elementor-widget { max-width: 100%; }

  /* Both section headings carry a pixel width set in the editor (980px and
     858px). Elementor writes that as `--container-widget-width` with no
     breakpoint, so it survives into mobile: the projects heading measured
     980px wide inside a 339px column and ran 623px off-screen. The section
     does not scroll, so nothing looked wrong until the text was measured.
     Released back to the column here; the desktop widths are unaffected. */
  .dm-devomarks-page .elementor .projects .shead .dm-t-h2.elementor-widget,
  .dm-devomarks-page .elementor .services .shead .dm-t-h2.elementor-widget {
    width: 100%; max-width: 100%;
  }
}

@media (max-width: 640px) {
  .dm-devomarks-page .elementor .wd-flow__rail {
    grid-template-columns: 1fr; row-gap: 34px; padding-top: 24px;
  }
  .dm-devomarks-page .elementor .wd-flow__rail::before { display: none; }
  .dm-devomarks-page .elementor .wd-flow__step::before { top: -20px; }
  .dm-devomarks-page .elementor .wd-flow__n { font-size: 46px; }
  .dm-devomarks-page .elementor .wd-stack__grid { grid-template-columns: 1fr; }
  .dm-devomarks-page .elementor .wd-stack__card:nth-child(1),
  .dm-devomarks-page .elementor .wd-stack__card:nth-child(4) { grid-column: span 1; }
  .dm-devomarks-page .elementor .shead,
  .dm-devomarks-page .elementor .aw__top,
  .dm-devomarks-page .elementor .wd-flow__head,
  .dm-devomarks-page .elementor .wd-stack__head { margin-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-devomarks-page .elementor .wd-flow__step,
  .dm-devomarks-page .elementor .wd-stack__card { transition: none; }
  .dm-devomarks-page .elementor .wd-flow__step:hover,
  .dm-devomarks-page .elementor .wd-stack__card:hover { transform: none; }
  .dm-devomarks-page .elementor .wd-stack__card::before { animation: none; }
  .dm-devomarks-page .elementor .wd-stack__k::after { transition: none; }
}