/* ==========================================================================
   Devomarks — service pages
   Deliberately flat: every section is <section> > .dv-wrap > content, so one
   Elementor container plus one HTML widget reproduces a whole section and the
   markup never needs re-templating.
   No images are used, so Elementor's `.elementor img { height: auto }` rule
   (which outranks single-class sizing) has nothing to collapse here.
   ========================================================================== */

.dv {
  --dv-accent: var(--primary-color-03, #de1a39);
  --dv-accent-soft: var(--primary-color-02, #f73737);
  --dv-ink: #fff;
  --dv-muted: var(--_colors---theeme-color--text-color, #c1c1c2);
  --dv-dim: var(--text-color-02, #828282);
  --dv-line: var(--border-color-02, #292929);
  --dv-bg-a: var(--_colors---theeme-color--bg-color-01, #181a1c);
  --dv-bg-b: var(--_colors---theeme-color--bg-color-02, #101010);
  --dv-head: var(--_fonts---heading-font, Geist, sans-serif);
}

.dv-sec {
  position: relative;
  width: 100%;
  padding: clamp(64px, 11vh, 140px) clamp(20px, 4vw, 60px);
  background: var(--dv-bg-a);
  overflow: clip;
}

.dv-sec--alt { background: var(--dv-bg-b); }

.dv-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
}

/* ------------------------------------------------------------- typography */
.dv-label {
  margin: 0 0 clamp(14px, 2vh, 22px);
  color: var(--dv-accent-soft);
  font-size: var(--small-font, 14px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dv-h1 {
  margin: 0 0 clamp(16px, 2.4vh, 26px);
  color: var(--dv-ink);
  font-family: var(--dv-head);
  font-size: clamp(34px, 5.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 16ch;
}

.dv-h2 {
  margin: 0 0 clamp(14px, 2vh, 22px);
  color: var(--dv-ink);
  font-family: var(--dv-head);
  font-size: clamp(26px, 3.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  max-width: 20ch;
}

.dv-lead {
  margin: 0;
  color: var(--dv-muted);
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.6;
  max-width: 62ch;
}

/* ------------------------------------------------------------------ hero --
   Compact by design: an inner page needs its H1 and one clear action, not the
   home page's full-height showcase. */
.dv-hero { padding-top: clamp(120px, 20vh, 220px); padding-bottom: clamp(72px, 13vh, 150px); }

/* outlined wordmark, the same device the home page uses behind the deck */
.dv-hero__ghost {
  position: absolute;
  right: clamp(-30px, -2vw, 0px);
  bottom: clamp(-16px, -1vh, 0px);
  z-index: 0;
  margin: 0;
  font-family: var(--dv-head);
  font-size: clamp(70px, 12vw, 190px);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.13);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.dv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(24px, 3.6vh, 40px);
}

.dv-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}

.dv-btn--solid { background: var(--dv-accent); color: #fff; }
.dv-btn--solid:hover { background: var(--dv-accent-soft); gap: 16px; }

.dv-btn--ghost { border-color: var(--dv-line); color: var(--dv-ink); }
.dv-btn--ghost:hover { border-color: var(--dv-accent); color: var(--dv-accent-soft); gap: 16px; }

/* ------------------------------------------------------------------ grid --
   One rule drives both the six build cards and the four process steps. */
.dv-grid {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(30px, 5vh, 56px);
}

.dv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.dv-card {
  position: relative;
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px solid var(--dv-line);
  border-radius: var(--border-radius--radius-small-xl, 16px);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0));
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.dv-card:hover { border-color: rgba(222, 26, 57, 0.55); transform: translateY(-4px); }

/* the accent hairline that wipes in on hover */
.dv-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--dv-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.35s ease;
}
.dv-card:hover::after { transform: scaleX(1); }

.dv-card__n {
  display: block;
  margin-bottom: 14px;
  color: var(--dv-dim);
  font-family: var(--dv-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.dv-card__t {
  margin: 0 0 10px;
  color: var(--dv-ink);
  font-family: var(--dv-head);
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.16;
  letter-spacing: -0.008em;
  text-transform: uppercase;
}

.dv-card__p {
  margin: 0;
  color: var(--dv-muted);
  font-size: clamp(13px, 0.96vw, 15px);
  line-height: 1.55;
}

/* process steps read as a numbered rail rather than boxes */
.dv-step {
  position: relative;
  padding: clamp(20px, 2.2vw, 30px) 0 0;
  border-top: 1px solid var(--dv-line);
  transition: border-color 0.3s ease;
}
.dv-step:hover { border-top-color: var(--dv-accent); }

.dv-step__n {
  display: block;
  margin-bottom: 12px;
  color: var(--dv-accent-soft);
  font-family: var(--dv-head);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------- why block */
.dv-why {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.dv-why__claim {
  margin: clamp(20px, 3vh, 32px) 0 0;
  padding-top: clamp(18px, 2.6vh, 26px);
  border-top: 1px solid var(--dv-line);
  color: var(--dv-ink);
  font-family: var(--dv-head);
  font-size: clamp(15px, 1.35vw, 22px);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.35;
}
.dv-why__claim span { color: var(--dv-accent-soft); }

/* ------------------------------------------------------------- closing cta */
.dv-cta { text-align: center; }
.dv-cta .dv-h2,
.dv-cta .dv-lead { margin-inline: auto; }
.dv-cta .dv-actions { justify-content: center; }

/* ------------------------------------------------------------- reveal ---- */
/* js/service-page.js adds .is-in as each element enters the viewport. Without
   JavaScript nothing is hidden, so the page still reads. */
.dv-reveal { opacity: 0; transform: translateY(18px); }
.dv-js .dv-reveal { transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1); }
.dv-reveal.is-in { opacity: 1; transform: none; }
html:not(.dv-js) .dv-reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------- responsive */
@media screen and (max-width: 991px) {
  .dv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-why { grid-template-columns: minmax(0, 1fr); }
  .dv-h1 { max-width: 100%; }
}

@media screen and (max-width: 599px) {
  .dv-grid--3,
  .dv-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .dv-btn { padding: 13px 22px; }
  .dv-hero__ghost { font-size: clamp(52px, 20vw, 90px); }
}

@media (prefers-reduced-motion: reduce) {
  .dv-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .dv-card, .dv-step, .dv-btn { transition: none !important; }
}

/* ------------------------------------------------- home page button motion --
   The header/hero button swaps its icon on hover: the front icon slides out
   right while a second copy slides in from the left, clipped by the icon box.
   On the home page those transforms are applied at runtime by Webflow IX3.
   These pages deliberately don't load that bundle, so the same states are
   declared here — measured off the live home page (0 -> 50px, -50px -> 0). */
.dv .white-button .button-box-icon {
  overflow: hidden;
}

.dv .white-button .button-icon-front,
.dv .white-button .button-icon-back {
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.dv .white-button .button-icon-front { transform: translateX(0); }
.dv .white-button .button-icon-back { transform: translateX(-50px); }

.dv .white-button:hover .button-icon-front,
.dv .white-button:focus-visible .button-icon-front { transform: translateX(50px); }

.dv .white-button:hover .button-icon-back,
.dv .white-button:focus-visible .button-icon-back { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .dv .white-button .button-icon-front,
  .dv .white-button .button-icon-back { transition: none; }
}