/* ==========================================================================
   Devomarks — web development page, reference-led sections
   Three set pieces modelled on the supplied video:
     1. hero    — drifting token field + radial glow behind the headline
     2. build   — full-bleed marquee, display heading over a wireframe, list
     3. process — numbered steps sitting on a drawn arc
   Accent stays Devomarks red rather than the reference's neon green.
   Structure is deliberately flat so each section is one Elementor container.
   ========================================================================== */

/* ------------------------------------------------------------------ hero --
   Split banner: copy on the left over a dark ground, one full-bleed image on
   the right. Everything animates on load - the eyebrow rule draws out, the
   headline rises line by line under a mask with a slow sheen passing through
   it, and the photograph wipes up while drifting in scale. */
.wd-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  min-height: 100vh;
  background: var(--dv-bg-b, #101010);
  margin-top: -110px;
  overflow: clip;
  isolation: isolate;
}

.wd-hero__content {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(96px, 15vh, 170px) clamp(24px, 4.5vw, 84px) clamp(60px, 9vh, 110px);
  overflow: hidden;
}

.wd-field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

.wd-hero__glow {
  position: absolute;
  left: 18%; top: 46%;
  z-index: 0;
  width: min(760px, 96%);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(222,26,57,.22) 0%, rgba(222,26,57,.07) 34%, rgba(222,26,57,0) 64%);
}

.wd-hero__inner { position: relative; z-index: 2; width: 100%; max-width: 660px; }

/* eyebrow: a red rule draws out, then the label fades in beside it */
.wd-hero__eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 clamp(16px, 2.4vh, 26px);
  color: var(--dv-accent-soft, #f73737);
  font-size: 13px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}
.wd-hero__eyebrow::before {
  content: ""; width: 46px; height: 1px; flex: none;
  background: var(--dv-accent, #de1a39);
  transform-origin: left;
  transform: scaleX(0);
  animation: wd-draw .8s cubic-bezier(.22,.61,.36,1) .15s forwards;
}
.wd-hero__eyebrow span { opacity: 0; animation: wd-in .7s ease .45s forwards; }
@keyframes wd-draw { to { transform: scaleX(1); } }
@keyframes wd-in { to { opacity: 1; } }

/* headline: masked lines rise in sequence, with a sheen crossing the letters */
.wd-hero__h1 {
  margin: 0 0 clamp(16px, 2.4vh, 24px);
  font-family: var(--dv-head, Geist, sans-serif);
  /* sized so the longest line clears the column without wrapping */
  font-size: clamp(29px, 3.55vw, 60px);
  line-height: 1.04;
  letter-spacing: -.026em;
  text-transform: uppercase;
}
.wd-hero__h1 span { display: block; overflow: hidden; }
.wd-hero__h1 i {
  display: block; font-style: normal;
  transform: translateY(108%);
  animation: wd-rise .95s cubic-bezier(.16,.84,.3,1) forwards,
             wd-sheen 5.5s ease-in-out 1.6s infinite;
  background: linear-gradient(100deg, #fff 0%, #fff 40%, #ffc3cd 47%, #fff 55%, #fff 100%);
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.wd-hero__h1 span:nth-child(1) i { animation-delay: .22s, 1.6s; }
.wd-hero__h1 span:nth-child(2) i { animation-delay: .34s, 1.75s; }
.wd-hero__h1 span:nth-child(3) i { animation-delay: .46s, 1.9s; }
@keyframes wd-rise { to { transform: translateY(0); } }
@keyframes wd-sheen { 0% { background-position: 100% 0; } 45%,100% { background-position: -60% 0; } }

.wd-hero__lead {
  margin: 0; max-width: 54ch;
  color: var(--dv-muted, #c1c1c2);
  font-size: clamp(14px, 1.05vw, 17px); line-height: 1.62;
  opacity: 0; animation: wd-up .85s cubic-bezier(.22,.61,.36,1) .72s forwards;
}
.wd-hero__cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(24px, 3.6vh, 40px);
  opacity: 0; animation: wd-up .85s cubic-bezier(.22,.61,.36,1) .88s forwards;
}
@keyframes wd-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* the photograph: wipes up into place, then drifts in scale for good */
.wd-hero__media { position: relative; overflow: hidden; }
.wd-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  clip-path: inset(100% 0 0 0);
  animation: wd-wipe 1.15s cubic-bezier(.22,.61,.36,1) .25s forwards,
             wd-drift 22s ease-in-out 1.4s infinite;
}
@keyframes wd-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes wd-drift { 0%,100% { transform: scale(1.04); } 50% { transform: scale(1.12); } }

/* The seam: start fully opaque so there is no step from the black panel to the
   image, then fall away slowly. Ending the old gradient at .92 left a visible
   vertical line right where the two halves met. */
.wd-hero__media::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg,
    #101010 0%,
    rgba(16,16,16,.98) 4%,
    rgba(16,16,16,.86) 11%,
    rgba(16,16,16,.55) 22%,
    rgba(16,16,16,.22) 34%,
    rgba(16,16,16,0) 48%);
}

@media screen and (max-width: 991px) {
  .wd-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .wd-hero__content { padding-top: clamp(96px, 16vh, 150px); order: 2; }
  .wd-hero__media { order: 1; height: clamp(280px, 46vh, 420px); }
  .wd-hero__media::before { background: linear-gradient(180deg, rgba(16,16,16,0) 55%, rgba(16,16,16,.9) 100%); }
  .wd-hero__inner { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wd-hero__eyebrow::before { animation: none; transform: scaleX(1); }
  .wd-hero__eyebrow span,
  .wd-hero__lead,
  .wd-hero__cta { animation: none; opacity: 1; }
  .wd-hero__h1 i {
    animation: none; transform: none;
    -webkit-text-fill-color: #fff; color: #fff; background: none;
  }
  .wd-hero__media img { animation: none; clip-path: none; }
}

/* --------------------------------------------------------------- marquee -- */
.wd-build { position: relative; padding-top: 0; overflow: clip; }

.wd-marquee {
  width: 100%;
  overflow: hidden;
  padding: clamp(18px, 3vh, 34px) 0 clamp(30px, 5vh, 60px);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.wd-marquee__track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: wd-slide 42s linear infinite;
}

.wd-marquee__run {
  font-family: var(--dv-head, Geist, sans-serif);
  font-size: clamp(38px, 6.6vw, 104px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  padding-right: 0.3em;
}

@keyframes wd-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ----------------------------------------------------------- accordion --
   Horizontal accordion after the reference: the open panel grows and reveals
   its copy and image, the rest collapse to a vertical title. Measured on the
   original at 480px open against 277px closed - about 1.7:1, which is the
   flex ratio used here. */
.wd-accordion {
  display: flex;
  gap: clamp(8px, 0.9vw, 14px);
  margin: clamp(30px, 5vh, 56px) 0 0;
  padding: 0;
  list-style: none;
  height: clamp(380px, 42vw, 500px);
}

.wd-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--dv-line, #292929);
  border-radius: var(--border-radius--radius-small-xl, 16px);
  background: linear-gradient(165deg, #1c1f22 0%, #121416 100%);
  overflow: hidden;
  transition: flex-grow 0.62s cubic-bezier(.4, 0, .2, 1), border-color 0.4s ease;
}

.wd-panel.is-open {
  flex-grow: 1.75;
  border-color: rgba(222, 26, 57, 0.5);
}

/* the whole panel is the control, so it works by keyboard as well as hover */
.wd-panel__hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: clamp(18px, 1.9vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wd-panel__n {
  color: var(--dv-accent-soft, #f73737);
  font-family: var(--dv-head, Geist, sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

/* closed panels turn their title on its side so six of them stay readable */
.wd-panel__label {
  color: #fff;
  font-family: var(--dv-head, Geist, sans-serif);
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.wd-panel.is-open .wd-panel__label { opacity: 0; pointer-events: none; }

.wd-panel__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 1.9vw, 26px);
  padding-top: calc(clamp(18px, 1.9vw, 26px) + 26px);
  opacity: 0;
  translate: 0 10px;
  pointer-events: none;
  transition: opacity 0.4s ease 0.12s, translate 0.5s ease 0.12s;
}

.wd-panel.is-open .wd-panel__body { opacity: 1; translate: 0 0; }

.wd-panel__t {
  margin: 0 0 10px;
  color: #fff;
  font-family: var(--dv-head, Geist, sans-serif);
  font-size: clamp(18px, 1.6vw, 26px);
  line-height: 1.14;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.wd-panel__p {
  margin: 0;
  max-width: 34ch;
  color: var(--dv-muted, #c1c1c2);
  font-size: clamp(12.5px, 0.94vw, 15px);
  line-height: 1.5;
}

/* aspect-ratio rather than a fixed height: Elementor's
   `.elementor img { height: auto }` outranks single-class sizing, and would
   collapse an image sized by height alone. */
.wd-panel__img {
  flex: 0 0 auto;              /* keep flex from stretching it past its ratio */
  width: 100%;
  height: auto;
  margin-top: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.wd-panel__arrow {
  position: absolute;
  right: clamp(14px, 1.4vw, 20px);
  bottom: clamp(14px, 1.4vw, 20px);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background-color 0.4s ease, color 0.4s ease, scale 0.4s ease;
}
.wd-panel__arrow svg { width: 19px; height: 19px; }

.wd-panel.is-open .wd-panel__arrow {
  background: var(--dv-accent, #de1a39);
  color: #fff;
  scale: 1.06;
}

/* ------------------------------------------------------------- arc steps -- */
.wd-arc {
  position: relative;
  margin-top: clamp(30px, 5vh, 60px);
  /* tall enough that a card hanging off the lowest point (67% + badge + card)
     still lands inside the box */
  height: clamp(520px, 44vw, 620px);
}

.wd-arc__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wd-arc__track {
  stroke: var(--dv-line, #292929);
  stroke-width: 26;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* drawn in by js/wd-sections.js once the section is on screen */
.wd-arc__line {
  stroke: var(--dv-accent, #de1a39);
  stroke-width: 26;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.92;
}

.wd-steps {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each step is a zero-size anchor pinned to a point on the curve; the badge is
   centred on it and the card hangs above or below. The four points are the
   cubic's own coordinates at t = .125/.375/.625/.875, so they sit exactly on
   the path at any width without measuring it at runtime. */
.wd-step {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
}

.wd-step[data-step="0"] { --x: 12.9%; --y: 67%; }
.wd-step[data-step="1"] { --x: 36.6%; --y: 37%; }
.wd-step[data-step="2"] { --x: 63.4%; --y: 37%; }
.wd-step[data-step="3"] { --x: 87.1%; --y: 67%; }

.wd-step__badge {
  position: absolute;
  left: -23px;
  top: -23px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--dv-accent, #de1a39);
  color: #fff;
  font-family: var(--dv-head, Geist, sans-serif);
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 0 0 6px rgba(222, 26, 57, 0.14);
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.45s ease, scale 0.45s cubic-bezier(.34,1.56,.64,1);
}

.wd-step__card {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  width: clamp(168px, 15.5vw, 216px);
  padding: 14px 16px;
  border: 1px solid var(--dv-line, #292929);
  border-radius: 12px;
  background: rgba(20, 22, 24, 0.82);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.55s ease, translate 0.55s ease;
}

/* alternate the cards off the curve so none of them sit on the stroke */
.wd-step[data-step="0"] .wd-step__card,
.wd-step[data-step="2"] .wd-step__card { top: 38px; translate: -50% 14px; }
.wd-step[data-step="1"] .wd-step__card,
.wd-step[data-step="3"] .wd-step__card { bottom: 38px; translate: -50% -14px; }

.wd-step.is-in .wd-step__badge { opacity: 1; scale: 1; }
.wd-step.is-in .wd-step__card { opacity: 1; translate: -50% 0; }

.wd-step__t {
  margin: 0 0 8px;
  color: #fff;
  font-family: var(--dv-head, Geist, sans-serif);
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.wd-step__p {
  margin: 0;
  color: var(--dv-muted, #c1c1c2);
  font-size: 12.5px;
  line-height: 1.5;
}

/* --------------------------------------------------------------- responsive */
@media screen and (max-width: 991px) {
  /* six horizontal panels cannot work on a phone: stack them open instead */
  .wd-accordion { flex-direction: column; height: auto; gap: 12px; }
  .wd-panel { flex: none; }
  .wd-panel__hit { position: relative; inset: auto; height: auto; padding-bottom: 0; }
  .wd-panel__label { writing-mode: horizontal-tb; opacity: 1 !important; }
  .wd-panel__body {
    position: relative;
    inset: auto;
    opacity: 1;
    translate: none;
    padding-top: 0;
  }
  .wd-panel__t { display: none; }              /* the label already names it */
  .wd-panel__img { max-height: 200px; }
  .wd-panel__arrow { position: absolute; top: clamp(14px, 3vw, 20px); bottom: auto; }

  /* the arc does not survive narrow columns — fall back to a plain rail */
  .wd-arc { aspect-ratio: auto; min-height: 0; }
  .wd-arc__svg { display: none; }
  .wd-steps { position: static; display: grid; gap: 14px; }
  .wd-step {
    position: static;
    translate: none;
    width: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  .wd-step__card,
  .wd-step[data-step="0"] .wd-step__card,
  .wd-step[data-step="3"] .wd-step__card {
    width: auto; margin: 0; order: 0;
  }
  .wd-step__badge { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wd-marquee__track { animation: none; }
  .wd-step__badge,
  .wd-step__card { opacity: 1 !important; scale: 1 !important; translate: none !important; transition: none !important; }
}

/* ------------------------------------------------------------ statement --
   Centred manifesto with two photographs flanking it at different heights,
   the arrangement the reference uses for its agency statement. The images are
   decoration, so they carry empty alt text and sit behind the copy. */
.wd-statement { position: relative; overflow: clip; }

.wd-statement .dv-wrap {
  position: relative;
  padding-block: clamp(24px, 5vh, 64px);
  padding-inline: clamp(0px, 19vw, 300px);
  text-align: center;
}

.wd-statement__label { margin-bottom: clamp(18px, 3vh, 30px); }

.wd-statement__h {
  position: relative;
  z-index: 2;
  margin: 0 auto clamp(16px, 2.4vh, 24px);
  max-width: 17ch;
  color: #fff;
  font-family: var(--dv-head, Geist, sans-serif);
  font-size: clamp(26px, 3.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.wd-statement__p {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 60ch;
  color: var(--dv-muted, #c1c1c2);
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.6;
}

.wd-statement__claim {
  position: relative;
  z-index: 2;
  margin: clamp(22px, 3.4vh, 36px) auto 0;
  color: #fff;
  font-family: var(--dv-head, Geist, sans-serif);
  font-size: clamp(14px, 1.3vw, 21px);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.wd-statement__claim span { color: var(--dv-accent-soft, #f73737); }

.wd-statement__media {
  position: absolute;
  z-index: 1;
  margin: 0;
  width: clamp(150px, 17vw, 250px);
  border-radius: 14px;
  overflow: hidden;
  opacity: 0.5;
}

/* aspect-ratio, not height: Elementor's `.elementor img{height:auto}` beats
   single-class height rules and would flatten these. */
.wd-statement__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.wd-statement__media--l { left: 0; top: 16%; }
.wd-statement__media--r { right: 0; bottom: 12%; }

/* ---------------------------------------------------------------- close --
   One rounded panel carrying the closing pitch, as the reference ends on. */
.wd-close__panel {
  padding: clamp(38px, 7vw, 96px) clamp(24px, 5vw, 72px);
  border: 1px solid var(--dv-line, #292929);
  border-radius: var(--border-radius--radius-regular, 24px);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(222, 26, 57, 0.16) 0%, rgba(222, 26, 57, 0) 58%),
    linear-gradient(165deg, #1c1f22 0%, #121416 100%);
  text-align: center;
}

.wd-close__h {
  margin: 0 auto clamp(14px, 2vh, 20px);
  max-width: 20ch;
  color: #fff;
  font-family: var(--dv-head, Geist, sans-serif);
  font-size: clamp(26px, 3.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.wd-close__p {
  margin: 0 auto;
  max-width: 58ch;
  color: var(--dv-muted, #c1c1c2);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.6;
}

.wd-close__panel .dv-actions { justify-content: center; margin-top: clamp(24px, 3.4vh, 38px); }

@media screen and (max-width: 991px) {
  /* the flanking photographs have nowhere to go on a narrow screen */
  .wd-statement__media { display: none; }
  .wd-statement .dv-wrap { padding-inline: 0; }
}