/* ============================================================
   Desire Marketing — components
   Header, footer, buttons, cards. Imported after tokens.css.
   ============================================================ */

/* ---------- Site header ----------
   Sticky across every page. WP wraps my <header class="dm-site-header"> in
   ANOTHER <header class="wp-block-template-part"> that's only as tall as
   its content (100px) — applying sticky to the inner one has no room to
   stick within. We make the OUTER template-part wrapper sticky so it can
   pin against the long .wp-site-blocks parent.
   The .dm-nav band underneath renders a translucent + blurred glass effect
   over whatever section is scrolling. Higher specificity beats WP's
   .has-bg-dark-background-color helper. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
}
header.dm-site-header {
  background: transparent;
}

.dm-nav {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 100px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  max-width: 1920px;
  margin: 0 auto;

  /* The glass lives on ::before, NOT here, and that is load-bearing.
     An element with backdrop-filter becomes the containing block for its
     position:fixed descendants. The mobile drawer (.dm-nav-links) is fixed and
     is a child of this element, so with the filter here it resolved against
     this 72px bar instead of the viewport: top:72px + bottom:0 inside a 72px
     box collapsed it to ZERO height (an empty menu), and the closed state's
     translateX(100%) pushed it out to the right and produced a horizontal
     scrollbar. Moving the filter to a pseudo-element keeps the effect and gives
     the drawer the viewport back. Do not put backdrop-filter back on .dm-nav. */
  position: relative;
  isolation: isolate; /* keeps the z-index:-1 layer inside this element, and
                         unlike transform/filter it does NOT create a containing
                         block for fixed descendants. */
}

/* Translucent dark with strong backdrop blur. Heavy saturate + low alpha so the
   section below visibly bleeds through as a soft frosted glow when it has any
   color contrast (cream cards, coral sections). On uniform dark-bg sections
   (hero, brands) the difference is intentionally subtle: a faint highlight from
   the border + shadow distinguishes the band. */
.dm-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(29, 29, 29, 0.55);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  pointer-events: none;
}

.dm-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.dm-logo__img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 600px) {
  .dm-logo__img { height: 32px; }
}

.dm-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
}
.dm-nav-links a {
  color: #fff;
  opacity: .92;
  text-decoration: none;
  transition: color .15s ease, opacity .15s ease;
}
.dm-nav-links a:hover { opacity: 1; color: var(--color-coral); }

.dm-nav-services {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  opacity: .92;
  transition: color .15s ease, opacity .15s ease;
}
.dm-nav-services:hover { opacity: 1; color: var(--color-coral); }

.dm-chev {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  display: inline-block;
  transition: transform .2s ease;
}

/* ---------- Our Services dropdown ---------- */
.dm-nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.dm-nav-menu {
  position: absolute;
  top: calc(100% + 18px);
  right: 0;
  min-width: 240px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 50;
}

/* Reveal on hover or keyboard focus-within */
.dm-nav-dropdown:hover .dm-nav-menu,
.dm-nav-dropdown:focus-within .dm-nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dm-nav-dropdown:hover .dm-chev,
.dm-nav-dropdown:focus-within .dm-chev {
  transform: rotate(225deg) translate(-2px, -2px);
}

/* Bridge the gap between trigger and menu so hover doesn't drop */
.dm-nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
}

.dm-nav-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  opacity: 1;
  transition: background .15s ease;
}
.dm-nav-menu__item:hover {
  background: rgba(254, 124, 93, 0.10);
  color: #fff;
  opacity: 1;
}

.dm-nav-menu__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-coral);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dm-nav-menu__icon svg {
  width: 16px;
  height: 16px;
}

/* ---------- Hamburger toggle (hidden on desktop) ---------- */
.dm-nav-toggle { display: none; }
.dm-nav-burger { display: none; }

/* ---------- Mobile / Tablet: hamburger drawer ---------- */
@media (max-width: 900px) {
  .dm-nav {
    height: 72px;
    padding: 0 20px;
    position: relative;
  }

  /* Burger button — 40x40 frame, 3 coral lines (matches Figma) */
  .dm-nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 40px;
    height: 40px;
    padding: 9px 5px;        /* lines span 30/40 width as in Figma */
    cursor: pointer;
    /* z-index needs a position to apply at all. Without this the burger sat in
       flow order and the open drawer could paint over its own close button. */
    position: relative;
    z-index: 60;
    background: transparent;
    border: 0;
  }
  .dm-nav-burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-coral);   /* Figma #FE7C5D */
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  /* Burger → X when checked. translateY = gap + height = 9px to overlap middle line */
  .dm-nav-toggle:checked ~ .dm-nav-burger span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .dm-nav-toggle:checked ~ .dm-nav-burger span:nth-child(2) {
    opacity: 0;
  }
  .dm-nav-toggle:checked ~ .dm-nav-burger span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* Drawer hidden by default. When open, fills the screen below the 72px header. */
  .dm-nav-links {
    position: fixed;
    top: 72px;                      /* below the header bar */
    left: 0;
    right: 0;
    bottom: 0;                      /* covers everything to viewport bottom */
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 20px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    overflow-y: auto;
    z-index: 55;
    /* Hidden state: slide off-screen */
    transform: translateX(100%);
    transition: transform .3s ease;
    pointer-events: none;
    visibility: hidden;
  }

  /* Direct children of the nav links (a + .dm-nav-dropdown) — stack as block rows */
  .dm-nav-links > a,
  .dm-nav-links > .dm-nav-dropdown {
    display: block;
    width: 100%;
    padding: 14px 4px;
    border-bottom: 1px solid #2a2a2a;
    font-size: 16px;
    text-align: left;
    color: #fff;
  }
  .dm-nav-links > a:last-child,
  .dm-nav-links > .dm-nav-dropdown:last-child {
    border-bottom: 0;
  }

  /* Drawer open state — slide in */
  .dm-nav-toggle:checked ~ .dm-nav-links {
    transform: translateX(0);
    pointer-events: auto;
    visibility: visible;
  }

  /* "Our Services" header inside the drawer — block-level title, not inline-flex */
  .dm-nav-dropdown {
    position: static;            /* override desktop's relative */
    padding: 0 !important;       /* the wrapper itself has no padding */
  }
  .dm-nav-dropdown::after { display: none; }
  .dm-nav-services {
    display: block;
    width: 100%;
    padding: 14px 4px 8px;
    background: transparent;
    border: 0;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: default;
    pointer-events: none;        /* mobile: just a label, items below are direct links */
    opacity: 1;
  }
  .dm-chev { display: none; }

  /* Sub-items: stacked block-level under "Our Services" */
  .dm-nav-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 8px 12px;       /* slight indent to show hierarchy */
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .dm-nav-menu__item {
    width: 100%;
    padding: 10px 4px;
    font-size: 15px;
    border-radius: 8px;
  }
}

/* ---------- Site footer ---------- */
.dm-site-footer { background: var(--color-bg); }

.dm-footer-section {
  padding: 0 var(--dm-pad-x);
  background: var(--color-bg);
}

.dm-footer-card {
  background: #fff;
  color: var(--color-text-muted-light);
  border-radius: 46px 46px 0 0;
  padding: clamp(48px, 6vw, 96px) clamp(28px, 4.5vw, 90px) 40px;
  max-width: 1920px;
  margin: 0 auto;
}

.dm-footer-grid {
  display: grid;
  grid-template-columns: 308px repeat(4, 1fr);
  gap: 90px;
}

.dm-footer-about p {
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted-light);
}

.dm-footer-grid h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 22px;
  color: var(--color-text-on-light);
}

.dm-footer-grid ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0;
  margin: 0;
}

.dm-footer-grid ul a {
  font-size: 16px;
  color: var(--color-text-muted-light);
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease;
}
.dm-footer-grid ul a:hover { color: var(--color-coral); }

/* Logo recolor inside the white footer card */
.dm-logo--on-light { color: var(--color-text-on-light); }
.dm-logo--on-light .dm-logo__desire { background: #1d1d1d; color: #fff; border-color: #1d1d1d; }
.dm-logo--on-light .dm-logo__marketing { color: var(--color-coral); }

.dm-footer-bottom {
  border-top: 1px solid rgba(189, 189, 189, .35);
  margin-top: 50px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--color-text-muted-light);
  gap: 16px;
  flex-wrap: wrap;
}

.dm-socials {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dm-socials__label { opacity: .7; }
.dm-socials__icon {
  width: 22px;
  height: 22px;
  background: var(--color-coral);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: filter .15s ease, transform .15s ease;
}
.dm-socials__icon:hover { filter: brightness(1.08); transform: translateY(-1px); }
.dm-socials__icon svg { width: 13px; height: 13px; }

.dm-footer-copy { opacity: .8; }

/* Footer responsive */
@media (max-width: 1100px) {
  .dm-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }
  .dm-footer-card { border-radius: 32px 32px 0 0; }
}
@media (max-width: 600px) {
  .dm-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .dm-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   HOME PAGE SECTIONS - generated from _build/sections/
   ============================================================ */

/* --- hero.css --- */
/* ============================================================
   Desire Marketing — Hero section
   Static images for features strip and dashboard mock so they
   scale fluidly without cropping at any viewport.
   ============================================================ */

.dm-hero {
  background: var(--color-bg, #1d1d1d);
  color: #fff;
  padding: clamp(32px, 5vw, 60px) var(--dm-pad-x) clamp(48px, 6vw, 80px);
}

.dm-hero__inner {
  max-width: var(--dm-content-max);
  margin: 0 auto;
  display: grid;
  /* Slimmer text column gives the dashboard more breathing room on desktop */
  grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* ---------- Copy column ---------- */
.dm-hero__copy { min-width: 0; }

.dm-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 0;
}

/* Features image (single horizontal strip from Figma) */
.dm-hero__features-img {
  display: block;
  margin: clamp(20px, 3vw, 32px) 0;
  width: 100%;
  max-width: 675px;
  height: auto;
}

/* CTA button */
.dm-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-coral);
  color: #1d1d1d;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  padding: 16px 28px;
  border-radius: var(--radius-pill, 62px);
  text-decoration: none;
  transition: transform .12s ease, filter .12s ease;
}
.dm-hero__cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.dm-hero__cta svg { width: 18px; height: 18px; }

/* ---------- Dashboard mock image (Ahrefs-style screenshot from Figma) ---------- */
.dm-hero__mock-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1100px;          /* bigger on wide desktops */
  margin-left: auto;          /* push to right side on desktop */
  border-radius: 12px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet: stack copy on top, dashboard below — both centered, full width */
@media (max-width: 1100px) {
  .dm-hero {
    padding: clamp(28px, 5vw, 48px) clamp(24px, 5vw, 60px) clamp(40px, 6vw, 64px);
  }
  .dm-hero__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }
  .dm-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .dm-hero__title {
    font-size: clamp(34px, 5vw, 52px);
    max-width: 720px;
  }
  .dm-hero__features-img {
    margin: 28px auto;
  }
  .dm-hero__cta {
    align-self: center;
  }
  .dm-hero__mock-img {
    margin: 0 auto;             /* center the dashboard image */
  }
}

/* Mobile: tighten everything */
@media (max-width: 600px) {
  .dm-hero {
    padding: 28px 18px 40px;
  }
  .dm-hero__inner {
    gap: 24px;
  }
  .dm-hero__title {
    font-size: clamp(28px, 8.4vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.3px;
    max-width: 100%;
  }
  .dm-hero__features-img {
    margin: 18px auto 22px;
    width: 100%;
    max-width: 100%;
  }
  .dm-hero__cta {
    display: flex;
    width: 100%;
    max-width: 320px;
    justify-content: center;
    font-size: 16px;
    padding: 14px 22px;
  }
  .dm-hero__cta svg { width: 16px; height: 16px; }
  .dm-hero__mock-img {
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
  }
}

@media (max-width: 380px) {
  .dm-hero {
    padding: 24px 16px 32px;
  }
  .dm-hero__title {
    font-size: 26px;
  }
  .dm-hero__cta {
    font-size: 15px;
    padding: 12px 20px;
  }
}

/* --- brands.css --- */
/* ---------- Brands strip ---------- */
.dm-brands {
  padding: 80px clamp(20px, 5vw, 100px);
  text-align: center;
  background: var(--color-bg, #1d1d1d);
}

.dm-brands-title {
  font-family: var(--font-display, "Poppins", sans-serif);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 36px);
  color: #fff;
  line-height: 1.2;
  margin: 0;
}

/* Strip viewport — clips the moving track on tablet/mobile */
.dm-brands-strip {
  margin: 48px auto 0;
  max-width: 1520px;
  overflow: hidden;
  /* Soft edge fade so logos don't pop in/out abruptly on mobile/tablet */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

/* The track holds 16 logos (8 real + 8 dup). It animates left→right on
   ALL viewports (desktop included) for a continuous marquee effect. */
.dm-brands-track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  width: max-content;
  margin: 0 auto;
  animation: dm-brands-scroll 40s linear infinite;
}

/* Pause the marquee when the user hovers — nicer reading experience */
.dm-brands-strip:hover .dm-brands-track {
  animation-play-state: paused;
}

/* Respect users who prefer reduced motion — stop scrolling, just show the row. */
@media (prefers-reduced-motion: reduce) {
  .dm-brands-track {
    animation: none;
  }
}

.dm-brands-logo {
  display: block;
  height: clamp(28px, 2.4vw, 40px);
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}

/* ============================================================
   Tablet — slightly tighter padding/sizing, faster animation
   ============================================================ */
@media (max-width: 1100px) {
  .dm-brands {
    padding: 64px 40px;
  }
  .dm-brands-title {
    font-size: clamp(24px, 3vw, 30px);
  }
  .dm-brands-strip {
    margin-top: 36px;
  }
  .dm-brands-logo {
    height: clamp(26px, 3vw, 34px);
  }
  .dm-brands-track {
    animation-duration: 32s;
  }
}

@media (max-width: 600px) {
  .dm-brands {
    padding: 36px 18px;
  }
  .dm-brands-title {
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  .dm-brands-strip {
    margin-top: 22px;
    /* Tighter edge fade for narrow viewports so logos stay readable */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  }
  .dm-brands-logo {
    height: 24px;
  }
  .dm-brands-track {
    gap: 32px;
    animation-duration: 24s;        /* a touch faster on tiny screens */
  }
}

/* From −50% (right-aligned) to 0 (left-aligned) = track moves rightward.
   Because the track contains the 8-logo set duplicated, the loop is seamless. */
@keyframes dm-brands-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* --- services.css --- */
/* ---------- Services section (cream rounded container + 3 cards) ---------- */
.dm-services {
  padding: 0 clamp(20px, 3.125vw, 60px) clamp(40px, 3.65vw, 70px);
  background: var(--color-bg);
  font-family: var(--font-body);
}

.dm-services-card {
  background: var(--color-bg-cream);
  border-radius: var(--radius-card-lg, 50px);
  padding: clamp(40px, 4.17vw, 80px) clamp(24px, 7.19vw, 138px);
}

.dm-services-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 2.81vw, 54px);
  line-height: 1.05;
  color: #1d1d1d;
  text-align: center;
  margin: 0;
}

.dm-services-grid {
  margin-top: clamp(32px, 3.125vw, 60px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.15vw, 22px);
}

.dm-services-card-item {
  height: clamp(280px, 17.7vw, 340px);
  border: 1px solid rgba(29, 29, 29, 0.08);
  border-radius: var(--radius-card-md, 24px);
  padding: clamp(24px, 1.67vw, 32px) clamp(20px, 1.25vw, 24px) clamp(20px, 1.25vw, 24px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-bg-white, #fff);
  color: #1d1d1d;
  /* Cards are <a> tags — strip default link styling and add tactile hover */
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dm-services-card-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* All icon wraps share the same height so card content aligns vertically. */
.dm-services-icon-wrap {
  width: clamp(120px, 8.33vw, 140px);
  height: clamp(120px, 8.33vw, 140px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.dm-services-icon-wrap svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* Solid dark card — used by inner-page "Other Services" cards (SEO + Content
   on /link-building/, Content on /seo/) per Figma SVG export pattern: dark
   background, white outline icon top-left, title + body bottom-left. No
   chain/coral bleed (that's reserved for the Link Building card). Inherits
   the existing top-icon / bottom-text flex layout from .dm-services-card-item.
   currentColor flows to icon strokes so icons turn white automatically. */
.dm-services-card-item--solid-dark {
  background: var(--color-bg, #1d1d1d);
  border-color: transparent;
  color: #fff;
}
.dm-services-card-item--solid-dark .dm-services-icon-wrap svg [stroke] {
  stroke: #fff;
}
/* Per Figma: icon is anchored top-LEFT (not centered) at every breakpoint.
   The shared tablet/mobile rule centers icons because the homepage's dark
   "Link Building" card uses a centered chain — we override that for solid-dark. */
.dm-services-card-item--solid-dark .dm-services-icon-wrap {
  justify-content: flex-start;
}
.dm-services-card-item--solid-dark .dm-services-icon-wrap svg {
  width: auto;
  max-width: 100%;
}

/* Dark/featured card: text bottom-left, chain+coral icon top-right with bleed.
   Mirrors the Figma export (495x340 frame) where the coral circle bleeds past
   the right edge of the card. */
.dm-services-card-item--dark {
  background: var(--color-bg, #1d1d1d);
  border-color: transparent;
  color: #fff;
  justify-content: flex-end;     /* push text to the bottom */
  position: relative;
  overflow: hidden;              /* clip the coral bleed */
}

.dm-services-icon-wrap--dark {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Reset flex defaults from .dm-services-icon-wrap (which it shares classes with). */
  display: block;
}

.dm-services-icon-wrap--dark svg {
  width: 100%;
  height: 100%;
  /* preserveAspectRatio="xMaxYMin meet" anchors the SVG to the top-right of the card,
     so the chain+coral align with the Figma layout regardless of card size. */
}

/* Toggle which chain SVG renders based on viewport.
   Desktop: full-card SVG anchored top-right.
   Tablet/mobile: smaller SVG with cropped viewBox, centered in the icon-wrap. */
.dm-services-chain--mobile { display: none; }
@media (max-width: 1100px) {
  .dm-services-chain--desktop { display: none; }
  .dm-services-chain--mobile  { display: block; }
}

/* Dark card text: sits at the bottom-left of the card, above the absolute icon-wrap.
   The chain icon is anchored to the top-right, so the bottom area is free for text. */
.dm-services-card-item--dark .dm-services-text {
  position: relative;
  z-index: 2;
  /* Title is constrained so it doesn't visually collide with the chain;
     description gets the full card width since it sits below the icon. */
}
.dm-services-card-item--dark .dm-services-title {
  max-width: 60%;            /* short title stays clear of the chain */
}

.dm-services-text {
  display: block;
}

.dm-services-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 1.56vw, 30px);
  line-height: 1;
  margin: 0 0 18px;
  color: inherit;
}

.dm-services-desc {
  font-family: var(--font-body);
  font-size: clamp(13px, 0.73vw, 14px);
  line-height: 1.45;
  color: inherit;
  margin: 0;
}

/* ---------- Responsive collapses ---------- */
/* Tablet: 3 cards horizontal, tighter; the dark card adopts the SAME top-icon
   bottom-text layout as the light cards (no top-right bleed at this size,
   the chain+coral icon is too small to read in that position). */
@media (max-width: 1100px) {
  .dm-services {
    padding: 0 24px 48px;
  }
  .dm-services-card {
    padding: 48px 32px;
    border-radius: 40px;
  }
  .dm-services-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 36px;
  }
  .dm-services-card-item {
    height: auto;
    min-height: 320px;
    padding: 24px 22px 24px;
    /* Reset desktop's "justify-content: flex-end" override on the dark card
       so all 3 cards share the same top-icon, body-text layout. */
    justify-content: flex-start;
  }

  /* All 3 icon wraps: same size, top-aligned within their card */
  .dm-services-icon-wrap,
  .dm-services-icon-wrap--dark {
    position: static;          /* dark card was absolutely positioned on desktop */
    width: 100%;
    height: 130px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dm-services-icon-wrap svg,
  .dm-services-icon-wrap--dark svg {
    max-width: 100%;
    max-height: 130px;
    width: auto;
    height: 100%;
  }

  /* The dark card's text returns to normal block flow (not bottom-aligned).
     Drop the desktop max-width: 60% on its title so it can breathe. */
  .dm-services-card-item--dark .dm-services-text {
    position: static;
    max-width: none;
    margin-top: auto;          /* anchor text at bottom of the card naturally */
  }
  .dm-services-card-item--dark .dm-services-title {
    max-width: none;
  }

  .dm-services-title {
    font-size: 22px;
    margin-bottom: 12px;
  }
  .dm-services-desc {
    font-size: 13px;
  }
}

/* Mobile: stack to single column (per Figma mobile frame) */
@media (max-width: 600px) {
  .dm-services {
    padding: 0 14px 36px;
  }
  .dm-services-card {
    padding: 32px 18px;
    border-radius: 28px;
  }
  .dm-services-heading {
    font-size: 30px;
    line-height: 1.1;
  }
  .dm-services-grid {
    grid-template-columns: 1fr;
    margin-top: 24px;
    gap: 12px;
  }
  .dm-services-card-item {
    min-height: 0;
    padding: 22px 20px 24px;
  }
  /* Mobile: all 3 cards share the same top-icon, bottom-text layout.
     Override the tablet rule that pins dark-card text at the bottom via auto margin. */
  .dm-services-card-item--dark .dm-services-text {
    margin-top: 0;
  }
  .dm-services-card-item--dark .dm-services-title {
    max-width: none;
  }
  .dm-services-icon-wrap,
  .dm-services-icon-wrap--dark {
    height: 110px;
    margin-bottom: 10px;
  }
  .dm-services-icon-wrap svg,
  .dm-services-icon-wrap--dark svg {
    max-height: 110px;
  }
  /* Per Figma mobile frame (342×302), solid-dark cards are wider-than-tall.
     Trim the icon area slightly so the card aspect lands near 1.1 not 1:1. */
  .dm-services-card-item--solid-dark .dm-services-icon-wrap {
    height: 92px;
    margin-bottom: 8px;
  }
  .dm-services-card-item--solid-dark .dm-services-icon-wrap svg {
    max-height: 92px;
  }
  .dm-services-title {
    font-size: 23px;
    margin-bottom: 10px;
  }
  .dm-services-desc {
    font-size: 13.5px;
    line-height: 1.5;
  }
}

/* --- quality.css --- */
/* ============================================================
   Quality Backlinks section
   Two-column layout (copy + illustration) on dark page background.
   ============================================================ */

.dm-quality {
	padding: 90px var(--dm-gutter-content) 110px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 80px);
	color: #fff;
	background: var(--color-bg);
}

.dm-quality-copy {
	min-width: 0;
}

.dm-quality-heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(36px, 3.4vw, 54px);
	line-height: 1.1;
	color: #fff;
	margin: 0 0 28px;
}

.dm-quality-text {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: #fff;
	margin: 0 0 18px;
}

.dm-quality-text:last-child {
	margin-bottom: 0;
}

/* ---------- Illustration ---------- */

.dm-quality-graphic {
	min-width: 0;
	display: flex;
	justify-content: flex-end;
}

.dm-quality-illustration {
	display: block;
	width: 100%;
	height: auto;
	max-width: 760px;
}

/* ============================================================
   Responsive scaling
   ============================================================ */

/* clamp() on .dm-quality and .dm-quality-heading handles scaling between 1100–1920px;
   no fixed-size breakpoints needed in that range. */

/* ---------- 1100px: stack to single column ---------- */

@media (max-width: 1100px) {
	.dm-quality {
		grid-template-columns: 1fr;
		gap: 48px;
		padding: 64px 60px 80px;
		text-align: center;
	}
	.dm-quality-graphic {
		justify-content: center;
	}
	.dm-quality-illustration {
		margin: 0 auto;
		max-width: 580px;
	}
}

@media (max-width: 768px) {
	.dm-quality {
		padding: 56px 32px 72px;
		gap: 36px;
	}
	.dm-quality-heading {
		font-size: 30px;
		margin-bottom: 18px;
	}
	.dm-quality-text {
		font-size: 15px;
	}
	.dm-quality-illustration {
		max-width: 480px;
	}
}

@media (max-width: 600px) {
	.dm-quality {
		padding: 48px 20px 64px;
		gap: 28px;
	}
	.dm-quality-heading {
		font-size: 26px;
		margin-bottom: 14px;
	}
	.dm-quality-text {
		font-size: 14px;
		line-height: 1.55;
	}
	.dm-quality-illustration {
		width: 100%;
		max-width: 360px;
	}
	/* Hide the desktop hard break — let the heading wrap naturally so we don't get
	   "Quality backlinks from / real, relevant / websites" across 3 cramped lines. */
	.dm-quality-heading-br {
		display: none;
	}
}

@media (max-width: 380px) {
	.dm-quality {
		padding: 40px 16px 56px;
	}
	.dm-quality-heading {
		font-size: 24px;
	}
}

/* --- cases.css --- */
/* ---------- Case Studies ---------- */
.dm-cases {
  padding: 0 60px 70px;
}

.dm-cases-card {
  background: var(--color-bg-cream, #fcf8f5);
  border-radius: var(--radius-card-lg, 50px);
  padding: 48px 87px 60px;
  color: #1d1d1d;
}

.dm-cases-heading {
  text-align: center;
  margin-bottom: 36px;
}

.dm-cases-heading h2 {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: 54px;
  line-height: 1;
  margin: 0;
}

.dm-cases-heading p {
  margin: 12px 0 0;
  font-size: 15px;
  color: rgba(29, 29, 29, 0.85);
}

.dm-cases-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body, 'Inter', sans-serif);
}

.dm-cases-table thead th {
  text-align: left;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 0 14px;
  color: #1d1d1d;
  letter-spacing: 0;
}

.dm-cases-th-right {
  text-align: right !important;
}

.dm-cases-table thead th:nth-child(2) { width: 32%; }
.dm-cases-table thead th:nth-child(3),
.dm-cases-table thead th:nth-child(4) { width: 18%; }

.dm-cases-table tbody td {
  padding: 22px 0;
  font-size: 15px;
  color: #1d1d1d;
  border-top: 1px solid var(--color-row-divider, rgba(29, 29, 29, 0.12));
  vertical-align: middle;
}

.dm-cases-td-right {
  text-align: right;
}

.dm-cases-table tbody tr:last-child td {
  border-bottom: 1px solid var(--color-row-divider, rgba(29, 29, 29, 0.12));
}

.dm-cases-brand-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dm-cases-logo {
  height: 32px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Per-brand size tweaks — some logos read smaller/larger than 32px feels balanced. */
.dm-cases-logo[alt="Webisoft"] { height: 38px; }    /* Webisoft wordmark needs more weight */

.dm-cases-traffic-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dm-cases-traffic-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
}

.dm-cases-arrow-up-icon {
  width: 22px;
  height: 22px;
  display: block;
  flex: none;
}

.dm-cases-from-to {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: rgba(29, 29, 29, 0.75);
  font-weight: 500;
}

.dm-cases-arrow-r {
  width: 14px;
  height: 14px;
  color: rgba(29, 29, 29, 0.75);
  flex: none;
}

.dm-cases-links-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-coral, #fe7c5d);
  color: #1d1d1d;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 16px;
  border-radius: var(--radius-pill, 999px);
  min-width: 56px;
}

.dm-cases-timespan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: #1d1d1d;
}

.dm-cases-clock-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex: none;
}

/* ---------- Responsive ---------- */

/* Tablet: 769–1100px — keep table layout, just tighten things */
@media (max-width: 1100px) and (min-width: 769px) {
  .dm-cases {
    padding: 0 32px 60px;
  }

  .dm-cases-card {
    padding: 40px 40px 48px;
    border-radius: var(--radius-card-lg, 40px);
  }

  .dm-cases-heading {
    margin-bottom: 28px;
  }

  .dm-cases-heading h2 {
    font-size: 44px;
  }

  .dm-cases-heading p {
    font-size: 14px;
  }

  .dm-cases-table thead th {
    font-size: 13px;
    padding: 6px 0 12px;
  }

  .dm-cases-table tbody td {
    padding: 18px 0;
    font-size: 14px;
  }

  .dm-cases-logo {
    height: 28px;
  }

  .dm-cases-logo[alt="Webisoft"] {
    height: 32px;
  }

  .dm-cases-traffic-top {
    font-size: 15px;
  }

  .dm-cases-arrow-up-icon {
    width: 20px;
    height: 20px;
  }

  .dm-cases-from-to {
    font-size: 12px;
  }

  .dm-cases-links-pill {
    font-size: 13px;
    padding: 5px 14px;
    min-width: 50px;
  }

  .dm-cases-timespan {
    font-size: 14px;
  }

  .dm-cases-clock-icon {
    width: 18px;
    height: 18px;
  }
}

/* ============================================================
   Tablet & mobile: keep the table layout, scroll horizontally
   so users can swipe through all 4 columns. Subtle right-edge
   fade hints that more content is available off-screen.
   ============================================================ */

/* The wrapper handles overflow so the cream card itself stays clipped neatly. */
.dm-cases-table-scroll {
  overflow-x: visible;          /* desktop: no scroll */
}

@media (max-width: 768px) {
  .dm-cases {
    padding: 0 16px 50px;
  }

  .dm-cases-card {
    padding: 32px 0 36px;       /* zero side-padding so the table can scroll edge-to-edge */
    border-radius: var(--radius-card-md, 28px);
  }

  /* Heading still needs side padding (it doesn't scroll) */
  .dm-cases-heading {
    padding: 0 24px;
    margin-bottom: 24px;
  }
  .dm-cases-heading h2 {
    font-size: 36px;
  }
  .dm-cases-heading p {
    font-size: 14px;
  }

  /* Horizontal scroll wrapper */
  .dm-cases-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Right-edge fade hints there's more to scroll */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
    padding: 0 24px 8px;        /* keeps content inset; 8px bottom for scrollbar room */
  }

  /* Force the table wide enough that columns don't squish */
  .dm-cases-table {
    min-width: 620px;
  }

  /* Tighter padding for narrow viewports */
  .dm-cases-table thead th {
    font-size: 12px;
    padding: 4px 0 10px;
  }
  .dm-cases-table tbody td {
    padding: 16px 0;
    font-size: 13.5px;
  }
  .dm-cases-logo {
    height: 28px;
  }
  .dm-cases-logo[alt="Webisoft"] {
    height: 32px;
  }
  .dm-cases-traffic-top {
    font-size: 14px;
  }
  .dm-cases-arrow-up-icon {
    width: 20px;
    height: 20px;
  }
  .dm-cases-from-to {
    font-size: 12px;
  }
  .dm-cases-links-pill {
    font-size: 13px;
    padding: 5px 14px;
    min-width: 48px;
  }
  .dm-cases-timespan {
    font-size: 13.5px;
  }
  .dm-cases-clock-icon {
    width: 18px;
    height: 18px;
  }
  /* Ensure horizontal cells don't wrap awkwardly */
  .dm-cases-traffic-cell {
    white-space: nowrap;
  }
}

/* Tighten further for very narrow screens (≤400px) */
@media (max-width: 400px) {
  .dm-cases-card {
    padding: 28px 0 32px;
    border-radius: var(--radius-card-md, 24px);
  }
  .dm-cases-heading {
    padding: 0 18px;
  }
  .dm-cases-heading h2 {
    font-size: 30px;
  }
  .dm-cases-table-scroll {
    padding: 0 18px 8px;
  }
  /* Slightly less min-width on tiny screens — still scrolls but less far */
  .dm-cases-table {
    min-width: 540px;
  }
}

/* --- strategy.css --- */
/* ---------- Strategy grid ---------- */
.dm-strategy {
  padding: 70px 200px 100px;
  text-align: center;
}

.dm-strategy__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 54px;
  color: #fff;
  margin: 0 0 50px;
}

.dm-strategy__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.dm-strategy__card {
  height: 270px;
  border: 1px solid #fff;
  border-radius: var(--radius-card-md);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
  color: #fff;
  background: transparent;
}

.dm-strategy__card--invert {
  background: #fff;
  color: #1d1d1d;
}

.dm-strategy__spacer {
  flex: 1;
}

.dm-strategy__card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  margin: 0 0 14px;
}

.dm-strategy__card-body {
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 22px;
}
/* The cards are informative only (the Learn More links were removed: six identical
   links in a row was repetitive). With no link below it the body is the last
   element, so drop its trailing margin to sit flush against the card padding. */
.dm-strategy__card-body:last-child { margin-bottom: 0; }

.dm-strategy__learn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
  color: inherit;
  text-decoration: none;
}

.dm-strategy__arrow {
  width: 18px;
  height: 18px;
}

/* Tablet: 3 cols is too cramped — drop to 2 cols (alternating cream/dark per Figma).
   Cards get a proper amount of room for titles like "White label Link building"
   and "Blogger Outreach Service" without awkward wrapping. */
@media (max-width: 1100px) {
  .dm-strategy {
    padding: 60px 40px 80px;
  }

  .dm-strategy__title {
    font-size: 44px;
    margin-bottom: 40px;
  }

  .dm-strategy__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .dm-strategy__card {
    height: auto;
    min-height: 240px;
    padding: 28px 24px;
  }

  .dm-strategy__card-title {
    font-size: 28px;
  }

  .dm-strategy__card-body {
    font-size: 14px;
    margin: 0 0 18px;
  }

  .dm-strategy__learn-more {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .dm-strategy {
    padding: 36px 18px 48px;
  }

  .dm-strategy__title {
    font-size: 30px;
    line-height: 1.15;
    margin-bottom: 24px;
  }

  .dm-strategy__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dm-strategy__card {
    height: auto;
    min-height: 200px;
    padding: 24px 20px;
    border-radius: var(--radius-card-md);
  }

  .dm-strategy__card-title {
    font-size: 24px;
    line-height: 1.1;
    margin: 0 0 12px;
  }

  .dm-strategy__card-body {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 16px;
  }

  .dm-strategy__learn-more {
    font-size: 15px;
    gap: 6px;
  }

  .dm-strategy__arrow {
    width: 16px;
    height: 16px;
  }
}

/* --- partner.css --- */
/* ---------- Partner / stats section ---------- */
.dm-partner {
	padding: 0 60px 70px;
	background: var(--color-bg);
}

.dm-partner-card {
	background: var(--color-coral);
	border-radius: var(--radius-card-lg, 50px);
	padding: 60px 158px;
	color: var(--color-text-on-light, #1d1d1d);
	text-align: center;
}

.dm-partner-pill-tag {
	display: inline-block;
	background: #fff;
	color: var(--color-text-on-light, #1d1d1d);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	padding: 6px 14px;
	border-radius: 4px;
	margin-bottom: 16px;
}

.dm-partner-heading {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 54px;
	line-height: 1.06;
	max-width: 760px;
	margin: 0 auto 50px;
	color: var(--color-text-on-light, #1d1d1d);
}

.dm-partner-stat-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.dm-partner-stat-tile {
	text-align: center;
}

.dm-partner-stat-num {
	background: #fff;
	color: var(--color-text-on-light, #1d1d1d);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 60px;
	line-height: 1;
	padding: 16px 18px;
	border-radius: 6px;
	display: block;
}

.dm-partner-stat-lbl {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
	margin-top: 18px;
	color: var(--color-text-on-light, #1d1d1d);
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
	.dm-partner-card {
		padding: 60px 80px;
	}
	.dm-partner-heading {
		font-size: 44px;
	}
	.dm-partner-stat-num {
		font-size: 48px;
	}
}

@media (max-width: 900px) {
	.dm-partner {
		padding: 0 24px 50px;
	}
	.dm-partner-card {
		padding: 48px 40px;
		border-radius: 36px;
	}
	.dm-partner-heading {
		font-size: 38px;
		max-width: 560px;
		margin-bottom: 36px;
	}
	.dm-partner-stat-tiles {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 28px;
	}
	.dm-partner-stat-num {
		font-size: 46px;
	}
	.dm-partner-stat-lbl {
		font-size: 18px;
		margin-top: 14px;
	}
}

@media (max-width: 600px) {
	.dm-partner-heading {
		font-size: 32px;
	}
	.dm-partner-stat-num {
		font-size: 40px;
	}
}

@media (max-width: 480px) {
	.dm-partner {
		padding: 0 16px 40px;
	}
	.dm-partner-card {
		padding: 28px 18px;
		border-radius: 22px;
	}
	.dm-partner-pill-tag {
		font-size: 12px;
		padding: 5px 12px;
		margin-bottom: 14px;
		border-radius: 4px;
	}
	.dm-partner-heading {
		font-size: 28px;
		line-height: 1.15;
		margin-bottom: 26px;
		max-width: 100%;
	}
	.dm-partner-stat-tiles {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px 12px;
	}
	.dm-partner-stat-num {
		font-size: 32px;
		padding: 14px 8px;
		border-radius: 6px;
	}
	.dm-partner-stat-lbl {
		font-size: 14px;
		margin-top: 10px;
		line-height: 1.2;
	}
}

/* --- why.css --- */
/* ---------- Why Choose Us ---------- */
.dm-why {
	padding: 70px 200px 80px;
	text-align: center;
	background: var(--color-bg);
	color: var(--color-text-on-dark, #fff);
}

.dm-why-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 54px;
	line-height: 1.05;
	color: var(--color-text-on-dark, #fff);
	margin: 0;
}

.dm-why-sub {
	font-family: var(--font-body);
	color: var(--color-text-on-dark, #fff);
	font-size: 16px;
	line-height: 1.5;
	margin: 22px auto 0;
	max-width: 620px;
}

.dm-why-grid {
	margin-top: 50px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.dm-why-card {
	border-radius: var(--radius-card-md, 24px);
	background: #fff;
	color: var(--color-text-on-light, #1d1d1d);
	padding: 32px 24px;
	text-align: center;
}

.dm-why-card--coral {
	background: var(--color-coral);
	color: var(--color-text-on-light, #1d1d1d);
}

.dm-why-card__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	margin: 0 0 14px;
}

.dm-why-card__body {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

.dm-why-note {
	margin-top: 36px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-text-on-dark, #fff);
	font-style: italic;
	font-size: 18px;
	line-height: 1.4;
}

.dm-why-note__text {
	font-family: var(--font-body);
}

.dm-why-note__dot {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background: var(--color-coral);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
	font-family: var(--font-display);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.dm-why {
		padding: 60px 60px 70px;
	}
	.dm-why-title {
		font-size: 46px;
	}
	.dm-why-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 18px;
		margin-top: 42px;
	}
	.dm-why-card {
		padding: 26px 20px;
	}
	.dm-why-card__title {
		font-size: 26px;
		margin: 0 0 10px;
	}
}

@media (max-width: 900px) {
	.dm-why {
		padding: 50px 32px 60px;
	}
	.dm-why-title {
		font-size: 40px;
	}
	.dm-why-sub {
		font-size: 15px;
		margin-top: 18px;
	}
	.dm-why-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 14px;
		margin-top: 36px;
	}
	.dm-why-card {
		padding: 22px 16px;
		border-radius: 18px;
	}
	.dm-why-card__title {
		font-size: 22px;
	}
	.dm-why-card__body {
		font-size: 13px;
	}
	.dm-why-note {
		margin-top: 28px;
		font-size: 16px;
	}
}

@media (max-width: 600px) {
	.dm-why {
		padding: 36px 18px 44px;
	}
	.dm-why-title {
		font-size: 26px;
		line-height: 1.15;
	}
	.dm-why-sub {
		font-size: 13.5px;
		line-height: 1.55;
		margin-top: 12px;
		max-width: 100%;
	}
	.dm-why-grid {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 24px;
	}
	.dm-why-card {
		padding: 22px 18px;
		border-radius: 16px;
		text-align: center;
	}
	.dm-why-card__title {
		font-size: 20px;
		line-height: 1.15;
		margin: 0 0 8px;
	}
	.dm-why-card__body {
		font-size: 13.5px;
		line-height: 1.55;
	}
	.dm-why-note {
		margin-top: 22px;
		font-size: 13px;
		line-height: 1.45;
		text-align: left;
		gap: 8px;
		align-items: flex-start;
		display: flex;
	}
	.dm-why-note__dot {
		width: 18px;
		height: 18px;
		font-size: 11px;
		margin-top: 1px;
	}
}

/* --- faq.css --- */
/* ---------- FAQ ---------- */
.dm-faq {
  padding: 0 200px 80px;
  text-align: center;
}

.dm-faq__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 54px;
  color: #fff;
  margin: 0 0 50px;
}

.dm-faq__list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 1086px;
  margin: 0 auto;
}

.dm-faq__item {
  background: #fff;
  border-radius: var(--radius-card-md);
  text-align: left;
  color: #181f35;
  overflow: hidden;
}

.dm-faq__summary {
  list-style: none;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  user-select: none;
}

.dm-faq__summary::-webkit-details-marker {
  display: none;
}

.dm-faq__q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: #181f35;
}

.dm-faq__ch {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f9f9f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1d1d1d;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.dm-faq__ch svg {
  width: 14px;
  height: 14px;
}

.dm-faq__item[open] .dm-faq__ch {
  transform: rotate(180deg);
  background: var(--color-coral);
  color: #fff;
}

.dm-faq__item[open] .dm-faq__ch svg path {
  stroke: #fff;
}

.dm-faq__answer {
  padding: 0 32px 24px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: #4a5168;
}

@media (max-width: 1100px) {
  .dm-faq {
    padding: 0 48px 64px;
  }

  .dm-faq__title {
    font-size: 42px;
    margin-bottom: 36px;
  }

  .dm-faq__list {
    gap: 18px;
  }

  .dm-faq__summary {
    padding: 20px 24px;
    gap: 18px;
  }

  .dm-faq__q {
    font-size: 19px;
  }

  .dm-faq__answer {
    padding: 0 24px 20px;
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  .dm-faq {
    padding: 0 16px 56px;
  }

  .dm-faq__title {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 24px;
  }

  .dm-faq__list {
    gap: 12px;
  }

  .dm-faq__item {
    border-radius: 18px;
  }

  .dm-faq__summary {
    padding: 18px 18px;
    gap: 14px;
  }

  .dm-faq__q {
    font-size: 16px;
    line-height: 1.35;
  }

  .dm-faq__ch {
    width: 26px;
    height: 26px;
  }

  .dm-faq__ch svg {
    width: 12px;
    height: 12px;
  }

  .dm-faq__answer {
    padding: 0 18px 18px;
    font-size: 14px;
    line-height: 1.6;
  }
}

/* ============================================================
   INNER PAGES - generated from _build/pages/
   ============================================================ */

/* --- about.css --- */
/* About page (/about/)
   Namespace: .dm-about-* for the page-specific Hero + By Numbers + Best
   Choice + Core Values sections.
   Reused (no extra CSS in this file):
     - Brands           → .dm-brands-*       (homepage section)
     - Why Choose grid  → .dm-seo-trust-*    (defined in seo.css)
     - Articles         → .dm-seo-articles-* (defined in seo.css)
   Breakpoints: 1100px (tablet), 700px (mobile), 380px (very narrow).
*/

.dm-about-hero,
.dm-about-numbers,
.dm-about-best,
.dm-about-values {
  color: #fff;
  background: var(--color-bg, #1d1d1d);
  font-family: var(--font-body, Inter), sans-serif;
}

/* ===== Hero ===== */
.dm-about-hero {
  position: relative;
  padding: clamp(70px, 8vw, 120px) clamp(20px, 4vw, 80px);
  overflow: hidden;
  text-align: center;
}

.dm-about-hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
}
.dm-about-hero-pill {
  display: inline-block;
  margin: 0 auto 26px;
  padding: 14px 36px;
  background: var(--color-bg-cream, #fcf8f5);
  color: #1d1d1d;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.3px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.dm-about-hero-text {
  margin: 0 auto 14px;
  font-family: var(--font-body, Inter), sans-serif;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 560px;
}
.dm-about-hero-text:last-child { margin-bottom: 0; }

/* Floating decorations — coral-circle icons positioned per Figma */
.dm-about-deco {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}
.dm-about-deco {
  height: auto;
}
.dm-about-deco--link      { top: 80px;   left: 10%;  width: clamp(60px, 5vw, 100px); }
.dm-about-deco--pencil    { top: 60px;   right: 12%; width: clamp(48px, 4vw, 80px); }
.dm-about-deco--magnifier { bottom: 60px; right: 16%; width: clamp(64px, 6vw, 110px); }

/* ===== About-specific lead text inside the shared .dm-seo-trust title ===== */
.dm-about-trust-lead {
  max-width: 640px;
  margin: -14px auto 30px;
  text-align: center;
  font-family: var(--font-body, Inter), sans-serif;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  z-index: 2;
}

/* ===== By The Numbers ===== */
.dm-about-numbers {
  padding: 0 clamp(20px, 4vw, 80px) clamp(60px, 6vw, 100px);
}
.dm-about-numbers-card {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--color-bg-cream, #fcf8f5);
  color: #1d1d1d;
  border-radius: clamp(28px, 3vw, 44px);
  padding: clamp(36px, 4vw, 60px) clamp(28px, 4vw, 60px);
}
.dm-about-numbers-title {
  margin: 0 0 32px;
  text-align: center;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #1d1d1d;
}
.dm-about-numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
}
.dm-about-numbers-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.dm-about-numbers-num {
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1;
  color: #1d1d1d;
}
.dm-about-numbers-lbl {
  font-family: var(--font-body, Inter), sans-serif;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 500;
  color: #2e2e2e;
}

/* ===== Why Desire Marketing is Your Best Choice =====
   Design contract: 2-col grid (visual left, copy right) at desktop, stack
   at tablet. Visual is a bespoke composition — central coral orb with the
   brand wordmark, 3 floating coral-outline circle icons (search/link/chart),
   3 dark feature pills (Proven Results / Expert Team / Customer Focused),
   2 rotated dotted/solid orbit rings, and 2 coral dot grids.
   Scaled to match site type/spacing — h2 ≤ 42px, body ≤ 16px, bg #1d1d1d. */
.dm-choice-section {
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 6vw, 100px) clamp(20px, 4vw, 80px);
  background: var(--color-bg, #1d1d1d);
  color: #fff;
  font-family: var(--font-body, Inter), sans-serif;
}

.dm-choice-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
}

.dm-choice-visual {
  position: relative;
  min-height: 440px;
}

.dm-main-circle {
  position: absolute;
  top: 60px;
  left: 120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  /* Coral focal-point composition: coral edge-glow ring + dark fill so the
     coral logo wordmark stays fully readable. The radial gradient gives the
     impression of a coral sphere lit from the rim — preserves the "coral
     focal" energy of the Figma frame while the logo gets a dark backdrop. */
  background:
    radial-gradient(circle at 50% 50%,
      #2a2a2a 0%,
      #2a2a2a 55%,
      rgba(254, 124, 93, 0.55) 80%,
      var(--color-coral, #fe7c5d) 100%);
  box-shadow:
    0 0 0 1.5px rgba(254, 124, 93, 0.85) inset,
    0 0 60px rgba(254, 124, 93, 0.25),
    0 24px 60px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dm-choice-logo {
  display: block;
  width: 78%;
  max-width: 250px;
  height: auto;
  /* Lift above the orbits but stay below the feature pills so they overlap
     the wordmark like the Figma reference. */
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}

.dm-orbit { position: absolute; border-radius: 50%; pointer-events: none; }
.dm-orbit-one {
  top: 38px; left: 80px;
  width: 410px; height: 345px;
  border: 1.5px solid rgba(255, 116, 88, 0.45);
  transform: rotate(-12deg);
}
.dm-orbit-two {
  top: 18px; left: 100px;
  width: 425px; height: 360px;
  border: 1.5px dashed rgba(255, 255, 255, 0.5);
  transform: rotate(-14deg);
}

.dm-dot-pattern {
  position: absolute;
  width: 95px;
  height: 95px;
  background-image: radial-gradient(#ff7458 2px, transparent 2px);
  background-size: 18px 18px;
  opacity: 0.85;
  pointer-events: none;
}
.dm-dot-left   { top: 50px; left: 10px; }
.dm-dot-bottom { right: 30px; bottom: 50px; }

.dm-floating-icon {
  position: absolute;
  z-index: 4;
  width: 100px;
  height: 100px;
  border: 1.5px solid rgba(255, 116, 88, 0.75);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 116, 88, 0.12), transparent 60%),
    var(--color-bg, #1d1d1d);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
}
.dm-floating-icon svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: #ff7458;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dm-floating-search { top: 30px;   left: 80px; }
.dm-floating-link   { top: 175px;  right: 20px; }
.dm-floating-chart  { left: 20px;  bottom: 90px; }

.dm-feature-pill {
  position: absolute;
  z-index: 5;
  height: 56px;
  padding: 0 22px 0 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1.5px solid rgba(255, 116, 88, 0.65);
  border-radius: 14px;
  background: rgba(24, 24, 24, 0.92);
  color: #fff;
  font-family: var(--font-display, Poppins), sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.2px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
}
.dm-pill-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-coral, #fe7c5d);
  flex: 0 0 auto;
}
.dm-pill-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dm-pill-results { top: 240px; right: 0;     width: 240px; }
.dm-pill-team    { left: 200px; bottom: 80px; width: 215px; }
.dm-pill-focus   { left: 120px; bottom: 10px; width: 240px; }

.dm-choice-content { max-width: 520px; }
.dm-choice-content h2 {
  margin: 0;
  font-family: var(--font-display, Poppins), sans-serif;
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #fff;
}
.dm-choice-content h2 span { color: var(--color-coral, #fe7c5d); }

.dm-title-line {
  width: 72px;
  height: 4px;
  margin: 18px 0 22px;
  border-radius: 999px;
  background: var(--color-coral, #fe7c5d);
}

.dm-choice-content p {
  margin: 0;
  max-width: 480px;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.dm-choice-content p + p { margin-top: 14px; }

/* ===== Core Values ===== */
.dm-about-values {
  padding: clamp(40px, 5vw, 80px) clamp(20px, 4vw, 80px) clamp(60px, 6vw, 100px);
}
.dm-about-values-title {
  margin: 0 auto 32px;
  max-width: 1200px;
  text-align: center;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #fff;
}
.dm-about-values-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.4vw, 22px);
}
.dm-about-values-card {
  padding: clamp(22px, 2vw, 32px) clamp(18px, 1.8vw, 26px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  text-align: center;
}
.dm-about-values-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.dm-about-values-card p {
  margin: 0;
  font-size: clamp(13px, 0.9vw, 14px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

/* ===== Tablet ≤1100px ===== */
@media (max-width: 1100px) {
  .dm-about-hero { padding: 110px 28px 70px; }
  .dm-about-deco--link      { top: 90px;  left: 4%;  width: clamp(64px, 9vw, 96px); }
  .dm-about-deco--pencil    { top: 60px;  right: 6%; width: clamp(48px, 7vw, 78px); }
  .dm-about-deco--magnifier { bottom: 30px; right: 6%; width: clamp(64px, 10vw, 100px); }

  .dm-about-numbers-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  /* Best Choice — stack, copy above visual, center alignment */
  .dm-choice-container {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .dm-choice-content { max-width: 720px; margin: 0 auto; text-align: center; }
  .dm-choice-content p { margin-left: auto; margin-right: auto; }
  .dm-title-line { margin-left: auto; margin-right: auto; }
  .dm-choice-visual {
    min-height: 460px;
    max-width: 540px;
    width: 100%;
    margin: 0 auto;
  }
  .dm-main-circle { left: 50%; transform: translateX(-50%); width: 280px; height: 280px; top: 60px; }
  .dm-choice-logo { width: 78%; max-width: 220px; }
  .dm-orbit-one   { top: 38px; left: 50%; width: 360px; height: 305px; transform: translateX(-50%) rotate(-12deg); }
  .dm-orbit-two   { top: 18px; left: 50%; width: 380px; height: 320px; transform: translateX(-50%) rotate(-14deg); }
  .dm-floating-search { top: 24px;  left: 30px; }
  .dm-floating-link   { top: 170px; right: 10px; }
  .dm-floating-chart  { left: 10px; bottom: 130px; }
  .dm-pill-results { top: 240px; right: 0;       width: 220px; }
  .dm-pill-team    { left: 90px;  bottom: 70px;  width: 210px; }
  .dm-pill-focus   { left: 30px;  bottom: 8px;   width: 220px; }
  .dm-dot-left     { top: 36px; left: 0; }
  .dm-dot-bottom   { right: 0;  bottom: 60px; }

  .dm-about-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Mobile ≤700px ===== */
@media (max-width: 700px) {
  .dm-about-hero { padding: 80px 20px 56px; }
  .dm-about-hero-pill { max-width: 240px; margin-bottom: 20px; }
  .dm-about-hero-text { font-size: 14px; }

  .dm-about-deco--link      { top: 60px; left: 14px; width: 56px; }
  .dm-about-deco--pencil    { top: 30px; right: 14px; width: 44px; }
  .dm-about-deco--magnifier { bottom: 12px; right: 16px; width: 58px; }

  .dm-about-numbers { padding: 0 18px 56px; }
  .dm-about-numbers-card { padding: 28px 20px; border-radius: 24px; }
  .dm-about-numbers-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Best Choice — mobile: compact composition. Orb stays large enough to
     read the logo clearly, pills stack on left side of viewport (not
     overlapping each other), icons cling to the orb edge. */
  .dm-choice-section { padding: 48px 18px; }
  .dm-choice-container { gap: 36px; }
  .dm-choice-visual {
    min-height: 480px;
    max-width: 340px;
    overflow: visible;
    margin: 0 auto;
  }
  .dm-main-circle { top: 40px; left: 50%; width: 220px; height: 220px; transform: translateX(-50%); }
  .dm-choice-logo { width: 80%; max-width: 180px; }
  .dm-orbit-one  { top: 24px; left: 50%; width: 280px; height: 240px; transform: translateX(-50%) rotate(-12deg); }
  .dm-orbit-two  { top: 8px;  left: 50%; width: 300px; height: 255px; transform: translateX(-50%) rotate(-14deg); }
  .dm-floating-icon { width: 56px; height: 56px; }
  .dm-floating-icon svg { width: 26px; height: 26px; stroke-width: 3; }
  .dm-floating-search { top: 18px;  left: 6px; }
  .dm-floating-link   { top: 130px; right: 0; }
  .dm-floating-chart  { left: 0;    top: 200px; }
  /* Pills stack vertically below the orb with consistent left alignment +
     equal spacing — no more overlap. */
  .dm-feature-pill {
    height: 44px;
    padding: 0 16px 0 10px;
    gap: 10px;
    border-radius: 10px;
    font-size: 13px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
  }
  .dm-pill-icon { width: 26px; height: 26px; }
  .dm-pill-icon svg { width: 14px; height: 14px; }
  .dm-pill-results { top: 280px; bottom: auto; right: auto; }
  .dm-pill-team    { top: 340px; bottom: auto; left: 50%; }
  .dm-pill-focus   { top: 400px; bottom: auto; left: 50%; }
  .dm-dot-pattern { width: 70px; height: 70px; background-size: 14px 14px; }
  .dm-dot-left    { top: 24px;   left: -10px; }
  .dm-dot-bottom  { right: -10px; bottom: 30px; }

  .dm-about-values { padding: 24px 18px 56px; }
  .dm-about-values-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .dm-about-values-card { padding: 20px 18px; }
}

/* ===== Very narrow phones <380px ===== */
@media (max-width: 380px) {
  .dm-about-hero { padding: 70px 16px 48px; }
  .dm-about-hero-pill { max-width: 200px; }
}

/* --- pricing.css --- */
/* Pricing page (/pricing/)
   Namespace: .dm-pricing-* for the pricing-grid section.
   Reused (no extra CSS in this file):
     - FAQ      → .dm-seo-faq-*      (defined in seo.css)
     - Articles → .dm-seo-articles-* (defined in seo.css)
   Type scale matches inner-page neighbors per memory rule: h2 ≤ 42px,
   body ≤ 16px, bg #1d1d1d, padding clamp(60-100).
*/

.dm-pricing {
  background: var(--color-bg, #1d1d1d);
  color: #fff;
  padding: clamp(60px, 6vw, 100px) var(--dm-pad-x) clamp(40px, 5vw, 70px);
  font-family: var(--font-body, Inter), sans-serif;
}

.dm-pricing-title {
  margin: 0 auto 16px;
  text-align: center;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #fff;
  max-width: var(--dm-content-max);
}

.dm-pricing-lead {
  max-width: 640px;
  margin: 0 auto clamp(36px, 4vw, 56px);
  text-align: center;
  font-family: var(--font-body, Inter), sans-serif;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.dm-pricing-grid {
  max-width: var(--dm-content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
}

/* ----- Cream card (default) ----- */
.dm-pricing-card {
  background: var(--color-bg-cream, #fcf8f5);
  color: #1d1d1d;
  border-radius: clamp(20px, 2vw, 28px);
  padding: clamp(26px, 2.4vw, 36px) clamp(22px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dm-pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.dm-pricing-card-tier {
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1vw, 17px);
  color: #1d1d1d;
}

.dm-pricing-card-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: -6px;
}
.dm-pricing-card-amt {
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1;
  color: #1d1d1d;
  letter-spacing: -1px;
}
.dm-pricing-card-period {
  font-size: clamp(13px, 0.95vw, 15px);
  color: #2e2e2e;
  font-weight: 500;
}

.dm-pricing-card-desc {
  margin: 0;
  font-size: clamp(13px, 0.9vw, 14px);
  line-height: 1.5;
  color: #2e2e2e;
  font-weight: 500;
  max-width: 280px;
}

.dm-pricing-card-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.dm-pricing-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: clamp(13px, 0.9vw, 14px);
  line-height: 1.4;
  color: #2e2e2e;
}
.dm-pricing-check {
  display: inline-flex;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.dm-pricing-check svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dm-pricing-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 13px 22px;
  background: var(--color-coral, #fe7c5d);
  color: #1d1d1d;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-radius: 999px;
  transition: transform .2s ease, opacity .2s ease;
}
.dm-pricing-card-cta:hover {
  transform: translateY(-1px);
  opacity: .92;
}

/* ----- Coral "Popular" card ----- */
.dm-pricing-card--featured {
  background: var(--color-coral, #fe7c5d);
}
.dm-pricing-card--featured .dm-pricing-card-tier,
.dm-pricing-card--featured .dm-pricing-card-amt {
  color: #1d1d1d;
}
.dm-pricing-card--featured .dm-pricing-card-period,
.dm-pricing-card--featured .dm-pricing-card-desc,
.dm-pricing-card--featured .dm-pricing-card-list li {
  color: rgba(29, 29, 29, 0.78);
}
/* Featured card's checks: white dot, coral inner is fine, keep contrast on coral bg */
.dm-pricing-card--featured .dm-pricing-check svg circle { fill: #1d1d1d; }
.dm-pricing-card--featured .dm-pricing-check svg path   { stroke: #fff; }
/* Featured CTA flips to dark pill (coral bg, dark pill, white text) */
.dm-pricing-card--featured .dm-pricing-card-cta {
  background: #1d1d1d;
  color: #fff;
}

/* ===== Tablet ≤1100px =====
   Horizontally scrollable single-row carousel. Cards keep their full
   desktop width so users get a peek at the next card on the right edge,
   then swipe/scroll to view the rest. */
@media (max-width: 1100px) {
  .dm-pricing-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, 320px);
    overflow-x: auto;
    overflow-y: visible;
    /* edge-to-edge gutter so the first card hugs the left edge and the
       last card has matching breathing room on the right */
    padding: 8px clamp(20px, 4vw, 40px) 20px;
    margin: 0 calc(-1 * var(--dm-pad-x));
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    -webkit-overflow-scrolling: touch;
  }
  .dm-pricing-grid::-webkit-scrollbar { height: 8px; }
  .dm-pricing-grid::-webkit-scrollbar-track { background: transparent; }
  .dm-pricing-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
  }
  .dm-pricing-card { scroll-snap-align: start; }
  /* Disable the desktop hover-lift inside the scroller — it triggers a
     reflow that confuses the snap behaviour on some touch devices. */
  .dm-pricing-card:hover { transform: none; box-shadow: none; }
}

/* ===== Mobile ≤700px =====
   Same horizontal scroll pattern as tablet — keeps cards readable at full
   width and lets users swipe through without vertically scrolling a long
   stack of pricing tiers. */
@media (max-width: 700px) {
  .dm-pricing { padding: 48px 0 40px; }
  .dm-pricing-title { padding: 0 18px; }
  .dm-pricing-grid {
    grid-auto-columns: minmax(260px, 280px);
    padding: 8px 18px 20px;
    margin: 0;
    gap: 14px;
  }
  .dm-pricing-card {
    padding: 24px 22px;
    gap: 14px;
  }
  .dm-pricing-card-list { gap: 12px; }
}

/* --- contact.css --- */
/* Contact page (/contact/)
   Namespace: .dm-contact-*
   Reused (no extra CSS in this file):
     - FAQ → .dm-seo-faq-* (defined in seo.css)
   Type scale matches inner-page neighbors per memory rule: h1/h2 ≤ 54/42px,
   body ≤ 16px, bg #1d1d1d, padding clamp(60-100). */

.dm-contact-hero,
.dm-contact-steps {
  background: var(--color-bg, #1d1d1d);
  color: #fff;
  font-family: var(--font-body, Inter), sans-serif;
}

/* ===== Hero — coral card with copy left + form right ===== */
.dm-contact-hero {
  padding: clamp(40px, 5vw, 80px) var(--dm-pad-x);
}

/* Figma: card 1520 wide; copy column 451 starting 62 in; form panel 809 ending
   18 from the right edge; 180 between them. Those four numbers reconcile:
   62 + 451 + 180 + 809 + 18 = 1520. The fr ratio and the percentage gap keep
   that proportion as the card narrows. */
.dm-contact-hero-card {
  max-width: var(--dm-content-max);
  margin: 0 auto;
  background: var(--color-coral, #fe7c5d);
  border-radius: clamp(24px, 2.4vw, 36px);
  padding: clamp(28px, 2.4vw, 36px) clamp(16px, 1.2vw, 18px) clamp(28px, 2.4vw, 36px) clamp(24px, 4vw, 62px);
  display: grid;
  grid-template-columns: minmax(0, 451fr) minmax(0, 809fr);
  align-items: center;
  gap: min(180px, 12.5%);
}

.dm-contact-hero-copy {
  color: #1d1d1d;
}

/* Figma renders this title as the same cream chip the legal pages use
   ("Group 7"): 54px text with 28px side and 14px vertical padding. That is what
   makes the block 317x87 in the frame (54 * 1.1 + 28 = 87). It was being drawn
   as plain 64px text with no chip. */
.dm-contact-hero-title {
  display: inline-block;
  margin: 0 0 30px;
  background: var(--color-bg-cream, #fcf8f5);
  border-radius: 20px;
  padding: 14px 28px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 3.5vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #1d1d1d;
}
.dm-contact-hero-text {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.4;
  color: rgba(29, 29, 29, 0.82);
  max-width: 451px;
}

/* ===== Form panel =====
   Figma: panel 809x554. Fields inset 21 from the sides, first row 69 from the
   top, 22 below the button, 26 between columns and rows. Each field is 63 tall
   (14px label 17 high, 6px gap, 40px input box), so two 370 columns and a 767
   message span fall out of the 21/26/21 rhythm. */
.dm-contact-form {
  background: var(--color-bg-cream, #fcf8f5);
  border-radius: clamp(20px, 2vw, 28px);
  padding: clamp(28px, 3.6vw, 69px) clamp(18px, 1.4vw, 21px) clamp(22px, 1.5vw, 22px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.8vw, 26px);
}

.dm-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 1.7vw, 26px);
}

.dm-contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dm-contact-field--full { grid-column: 1 / -1; }

.dm-contact-label {
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  color: #1d1d1d;
}

.dm-contact-input-wrap {
  position: relative;
  display: block;
}
.dm-contact-input-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #8a8a8a;
  pointer-events: none;
  display: block;
}
.dm-contact-input-icon svg {
  width: 100%; height: 100%; display: block;
}

.dm-contact-input,
.dm-contact-textarea {
  width: 100%;
  border: 1px solid rgba(29, 29, 29, 0.12);
  background: #fff;
  border-radius: 12px;
  padding: 9px 14px;
  font-family: var(--font-body, Inter), sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #1d1d1d;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dm-contact-input--has-icon { padding-left: 40px; }
.dm-contact-textarea {
  resize: vertical;
  min-height: 185px;
  font-family: inherit;
}
.dm-contact-input::placeholder,
.dm-contact-textarea::placeholder { color: #aaa; }
.dm-contact-input:focus,
.dm-contact-textarea:focus {
  border-color: var(--color-coral, #fe7c5d);
  box-shadow: 0 0 0 3px rgba(254, 124, 93, 0.18);
}

.dm-contact-submit {
  align-self: center;
  min-width: 168px;
  padding: 13px 28px;
  line-height: 20px;
  background: var(--color-coral, #fe7c5d);
  color: #1d1d1d;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  font-size: 15px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.dm-contact-submit:hover { transform: translateY(-1px); opacity: .94; }

/* ===== Shared section title styles ===== */
.dm-contact-section-title {
  margin: 0 auto 12px;
  text-align: center;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #fff;
  max-width: var(--dm-content-max);
}
.dm-contact-section-lead {
  margin: 0 auto clamp(28px, 3vw, 44px);
  max-width: 580px;
  text-align: center;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}
.dm-contact-section-lead--light { color: rgba(255, 255, 255, 0.78); }

/* ===== What happens next — 3 numbered steps ===== */
.dm-contact-steps {
  padding: clamp(60px, 6vw, 100px) var(--dm-pad-x) clamp(40px, 4vw, 60px);
}
.dm-contact-steps-grid {
  max-width: var(--dm-content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}
.dm-contact-step {
  position: relative;
  padding: clamp(24px, 2.4vw, 36px) clamp(22px, 2vw, 28px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
}
.dm-contact-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  padding: 6px 12px;
  background: var(--color-coral, #fe7c5d);
  color: #1d1d1d;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  border-radius: 999px;
}
.dm-contact-step h3 {
  margin: 0 0 10px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.25;
  color: #fff;
}
.dm-contact-step p {
  margin: 0;
  font-size: clamp(13px, 0.9vw, 14px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

/* ===== Tablet ≤1100px ===== */
@media (max-width: 1100px) {
  .dm-contact-hero-card {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .dm-contact-hero-copy { text-align: center; }
  .dm-contact-hero-text { margin-left: auto; margin-right: auto; }

  .dm-contact-steps-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

/* ===== Mobile ≤700px ===== */
@media (max-width: 700px) {
  .dm-contact-hero { padding: 32px 14px; }
  .dm-contact-hero-card {
    padding: 32px 22px;
    border-radius: 22px;
  }
  .dm-contact-hero-title {
    font-size: 36px;
    line-height: 1.05;
  }
  .dm-contact-form { padding: 22px; gap: 18px; }
  .dm-contact-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .dm-contact-steps { padding: 48px 16px 28px; }
  .dm-contact-step { padding: 22px 20px; }
}

/* --- seo.css --- */
/* SEO Services page — namespaced under .dm-seo-* */

.dm-seo-hero,
.dm-seo-why,
.dm-seo-trust,
.dm-seo-others,
.dm-seo-faq,
.dm-seo-articles {
  color: #fff;
  background: var(--color-bg, #1d1d1d);
  font-family: var(--font-body, Inter), sans-serif;
}

/* ===== Hero ===== */
.dm-seo-hero {
  position: relative;
  padding: 16px clamp(20px, 4vw, 80px) 0;
  overflow: hidden;
  background: var(--color-bg, #1d1d1d);
  /* Tight against the nav bar — was 56px, now 16px so the title starts
     right under the header instead of after a big gap. */
}


/* ---------- Centered headline / subtitle / CTA ---------- */
.dm-seo-hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.dm-seo-hero-title {
  font-family: var(--font-display, Poppins), sans-serif;
  /* Smaller scale — was clamp(36px, 5.4vw, 72px), now max 48px on desktop */
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 0;
  color: #fff;
}
.dm-seo-hero-text {
  margin: 18px auto 0;
  font-family: var(--font-body, Inter), sans-serif;
  font-size: clamp(14px, 0.95vw, 16px);
  line-height: 1.55;
  color: #fff;
  opacity: .82;
  max-width: 600px;
}

/* ---------- Decorative floating icons ---------- */
.dm-seo-deco {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}
.dm-seo-deco--arrow {
  /* trending-up arrow, top-left of headline (shifted up with the hero) */
  top: 110px;
  left: 18%;
  width: clamp(36px, 3.5vw, 60px);
  height: auto;
  transform: rotate(-12deg);
  opacity: .9;
}
.dm-seo-deco--magnifier {
  /* magnifier, top-right of headline */
  top: 100px;
  right: 14%;
  width: clamp(60px, 5.5vw, 96px);
  height: auto;
  opacity: .9;
}
.dm-seo-deco--cloud {
  /* "SEO" cloud icon, lower-left between CTA and dashboard */
  top: 320px;
  left: 12%;
  width: clamp(48px, 4.5vw, 76px);
  height: auto;
  opacity: .95;
}

/* ---------- Visual: coral ellipse + dashboard mock ---------- */
.dm-seo-hero-visual {
  position: relative;
  /* Larger top margin so the coral arc has clear dark space between the
     CTA button and where the arc starts — no visual blend between the
     button (coral) and the arc (also coral). Bumped to 130px after widening
     the ellipse — at the new clamp(840, 102%, 1140) the arc curves higher
     and was kissing the CTA pill. Matches Figma layout. */
  margin: 130px auto 0;
  max-width: 1100px;
}
/* Wide coral semicircle hugging the bottom of the section, dashboard sits on top */
.dm-seo-hero-ellipse {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  /* Wider ellipse so the coral wash extends past the dashboard sides more
     prominently — matches the Figma frame's wider arc. Was clamp(750, 88%, 1000). */
  width: clamp(840px, 102%, 1140px);
  height: auto;
  pointer-events: none;
  z-index: 1;
  /* Bottom-aligned with the dashboard so the coral arc never extends past
     the dashboard's bottom edge. The arc peeks above + curves past the
     dashboard's sides because the ellipse is wider + taller than it. */
}
.dm-seo-hero-dashboard {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 880px;             /* slightly smaller — was 1100px */
  height: auto;
  margin: 0 auto;
}

/* ---------- Hero responsive ----------
   Same semantic markup as desktop. Breakpoints below tune typography,
   decoration placement, and dashboard sizing to match the Figma tablet
   (1024×928) and mobile (402×591) hero frames. */

/* Tablet: 701-1100px — all 3 decorations visible per Figma at the exact
   pixel sizes from the official tablet exports (arrow 77px, magnifier 88px,
   cloud 94px). Coral ellipse + dashboard SVGs are swapped via <picture>.
   Icons sit at upper-corner zones above the heading so they read cleanly
   whether the heading wraps to 2 or 3 lines at any width in this range. */
@media (max-width: 1100px) {
  .dm-seo-hero {
    padding: 110px 32px 0;
  }
  .dm-seo-hero-content {
    max-width: 760px;
  }
  .dm-seo-hero-title {
    font-size: clamp(40px, 6vw, 60px);
    line-height: 1.05;
  }
  .dm-seo-hero-text {
    font-size: 15px;
    max-width: 580px;
    margin-top: 20px;
  }
  /* Decorations — exact Figma tablet sizes, positioned in upper corners */
  .dm-seo-deco--arrow {
    top: 28px;
    left: 5%;
    width: 77px;
    transform: none;
  }
  .dm-seo-deco--magnifier {
    top: 22px;
    right: 5%;
    width: 88px;
  }
  .dm-seo-deco--cloud {
    top: auto;
    bottom: 360px;
    left: 6%;
    width: 94px;
  }
  /* Dashboard + coral arc — tablet-specific SVGs swapped via <picture>.
     Larger margin-top creates clear dark space between the CTA button
     and the start of the coral arc. */
  .dm-seo-hero-visual {
    margin: 100px auto 0;
    max-width: 820px;
  }
  .dm-seo-hero-ellipse-pic { display: contents; }
  .dm-seo-hero-ellipse {
    /* Tablet ellipse SVG is 888×504 — at 115% of visual width the arc
       peeks ~50px above the dashboard top and curves past the sides.
       bottom:0 keeps it from extending below the dashboard. */
    width: 115%;
    bottom: 0;
  }
  .dm-seo-hero-dashboard-pic { display: contents; }
  .dm-seo-hero-dashboard {
    max-width: 100%;
  }
}

/* Mobile: ≤700px — all 3 decorations visible at exact Figma mobile sizes
   (arrow 37px, magnifier 41px, cloud 42px).

   Decoration placement strategy: icons sit in a dedicated "icon zone" at the
   top of the section, ABOVE the heading. This reads cleanly whether the
   heading wraps to 2 lines (at 402px) or 4 lines (at 300px). It deviates
   slightly from Figma's "icons at heading line-1" composition but is the
   only way to keep them from overlapping the heading at narrow viewports. */
@media (max-width: 700px) {
  .dm-seo-hero {
    padding: 80px 20px 0;
  }
  .dm-seo-hero-title {
    font-size: clamp(24px, 7.2vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.3px;
  }
  .dm-seo-hero-text {
    font-size: 13.5px;
    line-height: 1.6;
    margin-top: 14px;
    max-width: 100%;
  }
  .dm-seo-btn-primary {
    padding: 12px 24px;
    font-size: 14px;
    margin-top: 22px;
  }
  /* Decorations: top corners, exact Figma mobile sizes */
  .dm-seo-deco--arrow {
    top: 22px;
    left: 16px;
    width: 37px;
    transform: none;
  }
  .dm-seo-deco--magnifier {
    top: 16px;
    right: 16px;
    width: 41px;
  }
  .dm-seo-deco--cloud {
    top: auto;
    bottom: 230px;
    left: 8%;
    width: 42px;
  }
  /* Dashboard + coral arc — mobile-specific SVGs swapped via <picture>.
     Larger margin-top creates clear dark space between CTA button + arc. */
  .dm-seo-hero-visual {
    margin-top: 70px;
    max-width: 100%;
  }
  .dm-seo-hero-ellipse {
    /* Mobile ellipse SVG is 385×234 — at 125% of visual width the arc
       peeks ~30-40px above the dashboard top and curves past the sides.
       bottom:0 aligns the ellipse base with the dashboard base so it
       never overflows below the dashboard image. */
    width: 125%;
    bottom: 0;
  }
  .dm-seo-hero-dashboard {
    max-width: 100%;
  }
}

/* Very narrow phones (<380px): heading shrinks more, padding tightens */
@media (max-width: 380px) {
  .dm-seo-hero {
    padding: 70px 16px 0;
  }
  .dm-seo-hero-title {
    font-size: 22px;
  }
  .dm-seo-deco--arrow { top: 18px; left: 12px; width: 32px; }
  .dm-seo-deco--magnifier { top: 14px; right: 12px; width: 36px; }
  .dm-seo-deco--cloud { bottom: 200px; width: 38px; }
}

/* ===== Buttons ===== */
.dm-seo-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-coral, #fe7c5d);
  color: #1d1d1d;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 30px;
  border-radius: 999px;
  text-decoration: none;
  margin-top: 28px;
  transition: transform .2s ease, opacity .2s ease;
}
.dm-seo-btn-primary:hover { transform: translateY(-1px); opacity: .95; }

/* ===== Brands and Case Studies =====
   These two sections reuse the homepage .dm-brands-* and .dm-cases-* styles
   defined in _build/sections/{brands,cases}.css — no SEO-namespaced overrides. */

/* ===== Why Technical SEO =====
   Desktop (≥901px): show the full Figma-exported SVG (heading + body + illustration
   all baked in as paths). Heading/body HTML stays in the DOM but visually hidden
   for SEO and screen readers.
   Tablet/Mobile (≤900px): hide the SVG (its baked-in text would be too small at
   narrow widths) and show responsive HTML heading + body instead. */

.dm-seo-why {
  padding: 0;
  background: var(--color-bg, #1d1d1d);
}
.dm-seo-why-img {
  display: block;
  width: 100%;
  height: auto;
}
/* Desktop: heading + body sr-only (visually hidden, screen-reader accessible) */
.dm-seo-why-heading,
.dm-seo-why-body {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Tablet/Mobile: SVG hides, HTML shows */
@media (max-width: 900px) {
  .dm-seo-why-img { display: none; }

  .dm-seo-why {
    padding: 48px 20px 56px;
  }
  .dm-seo-why-heading,
  .dm-seo-why-body {
    /* Reset sr-only — show normally */
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    margin: 0;
    border: 0;
    color: #fff;
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .dm-seo-why-heading {
    font-family: var(--font-display, Poppins), sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
  }
  .dm-seo-why-body {
    font-family: var(--font-body, Inter), sans-serif;
    font-size: clamp(13px, 1.6vw, 15px);
    line-height: 1.7;
    opacity: 0.85;
    padding: 0;
  }
}

/* General-purpose screen-reader-only utility */
.dm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Partner =====
   Reuses the homepage .dm-partner-* styles from _build/sections/partner.css.
   No SEO-namespaced overrides needed — the homepage version already matches Figma. */

/* ===== Why Trust Us ===== */
.dm-seo-trust { padding: 60px clamp(20px, 3vw, 60px) 40px; }
.dm-seo-trust-title {
  font-family: var(--font-display, Poppins), sans-serif;
  font-size: clamp(32px, 3.4vw, 54px);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  margin: 0 0 48px;
  color: #fff;
}
.dm-seo-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1320px;
  margin: 0 auto;
}
.dm-seo-trust-card {
  border-radius: 22px;
  padding: 36px 32px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.dm-seo-trust-card h3 {
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.6vw, 28px);
  line-height: 1.2;
  margin: 0 0 14px;
}
.dm-seo-trust-card p {
  font-family: var(--font-body, Inter), sans-serif;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.dm-seo-trust-white { background: #fff; color: #1d1d1d; }
.dm-seo-trust-coral { background: var(--color-coral, #fe7c5d); color: #1d1d1d; }

/* Footnote below the grid: coral info circle + italic-ish line */
.dm-seo-trust-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 32px auto 0;
  max-width: 1100px;
  font-family: var(--font-body, Inter), sans-serif;
  font-style: italic;
  font-size: clamp(14px, 1.05vw, 17px);
  color: #fff;
  text-align: center;
}
.dm-seo-trust-note-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}
.dm-seo-trust-note-icon svg { width: 100%; height: 100%; }

/* ===== Our Services (SEO page) =====
   Reuses the homepage .dm-services-* styles from _build/sections/services.css
   with a 2-column grid modifier.

   At tablet (≤1100px) the homepage Services CSS switches the dark card to a
   centered-icon layout. The SEO page's Figma keeps the desktop-style layout
   at tablet (chain icon top-right with coral bleed), so we re-assert it
   below — scoped via .dm-services-grid--two so the homepage section is
   unaffected. */
.dm-services-grid--two {
  grid-template-columns: 1fr 1fr;
}

/* Tablet (701-1100px) keeps 2-col grid via the modifier, but inherits the
   homepage's centered-icon tablet layout for the dark card. We tried forcing
   the desktop chain-top-right layout here, but at 700-900px viewports the
   cards aren't wide enough — the chain SVG (495×340 viewBox with xMaxYMin
   meet) renders too small and the coral bleed isn't visible.

   Centered-icon layout reads cleanly across the entire tablet range. The
   homepage rules in _build/sections/services.css already do exactly this,
   so we don't need to override anything — just keeping the 2-col grid. */

/* ===== FAQ ===== */
.dm-seo-faq { padding: 0 60px 70px; }
.dm-seo-faq-title {
  font-family: var(--font-display, Poppins), sans-serif;
  font-size: 44px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 36px;
}
.dm-seo-faq-list {
  max-width: 880px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 14px;
}
.dm-seo-faq-item {
  background: #fff;
  color: #1d1d1d;
  border-radius: 999px;
  padding: 0 26px;
}
.dm-seo-faq-item[open] { border-radius: 24px; padding-bottom: 18px; }
.dm-seo-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  font-size: 16px;
}
.dm-seo-faq-item summary::-webkit-details-marker { display: none; }
.dm-seo-faq-plus {
  font-size: 22px;
  color: var(--color-coral, #fe7c5d);
  font-weight: 400;
  line-height: 1;
}
.dm-seo-faq-item[open] .dm-seo-faq-plus { transform: rotate(45deg); }
.dm-seo-faq-item p { margin: 0; font-size: 14px; line-height: 1.6; opacity: .8; }

/* ===== Articles ===== */
.dm-seo-articles { padding: 0 60px 90px; }
.dm-seo-articles-title {
  font-family: var(--font-display, Poppins), sans-serif;
  font-size: 44px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 36px;
}
.dm-seo-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
/* Article card — supports 3 bg variants via modifier classes. The illustration
   inside the image area is a coral/dark circle with an envelope and subtle
   diagonal line, color-flipped per variant via CSS custom properties.
   Default variant: cream. Used in /blog/ index AND in every page's
   "Read Our Articles" section so they stay visually consistent.
   --ill-bg          background of the illustration area
   --ill-circle      the big focal circle
   --ill-line        diagonal accent line
   --ill-envelope    envelope body color
   --ill-stroke      envelope/line stroke color
*/
.dm-seo-article {
  position: relative;
  background: var(--color-bg-cream, #fcf8f5);
  color: #1d1d1d;
  border-radius: 20px;
  padding: 14px 14px 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Defaults — cream variant: dark circle, dark stroke */
  --ill-bg: var(--color-bg-cream, #fcf8f5);
  --ill-circle: var(--color-coral, #fe7c5d);
  --ill-line: rgba(29, 29, 29, 0.18);
  --ill-envelope: #fff;
  --ill-stroke: rgba(29, 29, 29, 0.65);
  --ill-dot: rgba(29, 29, 29, 0.55);
  transition: transform .2s ease, box-shadow .2s ease;
}
.dm-seo-article:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

/* Dark variant — dark card, coral circle stays coral, light stroke + dots */
.dm-seo-article--dark {
  background: var(--color-bg, #1d1d1d);
  color: #fff;
  --ill-bg: var(--color-bg, #1d1d1d);
  --ill-circle: var(--color-coral, #fe7c5d);
  --ill-line: rgba(255, 255, 255, 0.18);
  --ill-envelope: #fff;
  --ill-stroke: rgba(255, 255, 255, 0.65);
  --ill-dot: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Coral variant — coral card, dark circle, dark stroke */
.dm-seo-article--coral {
  background: var(--color-coral, #fe7c5d);
  color: #1d1d1d;
  --ill-bg: var(--color-coral, #fe7c5d);
  --ill-circle: #1d1d1d;
  --ill-line: rgba(29, 29, 29, 0.22);
  --ill-envelope: #fff;
  --ill-stroke: rgba(29, 29, 29, 0.7);
  --ill-dot: rgba(29, 29, 29, 0.7);
}

.dm-seo-article-img {
  position: relative;
  height: 170px;
  margin-bottom: 18px;
  border-radius: 14px;
  background-color: var(--ill-bg);
  background-image:
    /* central focal circle */
    radial-gradient(circle at 38% 52%, var(--ill-circle) 0 56px, transparent 56px),
    /* slim diagonal accent — top-left → bottom-right */
    linear-gradient(135deg, transparent calc(50% - 0.5px), var(--ill-line) calc(50% - 0.5px), var(--ill-line) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    /* small accent dot bottom-left */
    radial-gradient(circle at 16% 86%, var(--ill-dot) 0 3px, transparent 3px);
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Envelope SVG layered on top of the circle as a real ::after pseudo with
   an inline SVG data URL. Tilted slightly so it reads like a paper letter
   resting against the circle. */
.dm-seo-article-img::after {
  content: "";
  position: absolute;
  right: 14%;
  top: 28%;
  width: 46%;
  height: 56%;
  background: center / contain no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' fill='none'><rect x='3' y='6' width='114' height='78' rx='5' fill='white' stroke='%231d1d1d' stroke-width='2.4'/><path d='M3 12 L60 50 L117 12' stroke='%231d1d1d' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  transform: rotate(-6deg);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}

/* Real post cover, injected by dm_cover_img(). Fills whichever slot it lands in:
   the article card, the /blog/ featured hero, or the single-post hero. Each slot
   is position:relative + overflow:hidden, so inset:0 + object-fit clips to its radius. */
.dm-cover-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Posts WITH a cover drop the drawn illustration, since the photo replaces it.
   Posts without one keep the plain class and stay illustrated. */
.dm-seo-article-img--photo {
  background-image: none;
}
.dm-seo-article-img--photo::after {
  content: none;
}

.dm-seo-article-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-block;
  background: var(--color-coral, #fe7c5d);
  color: #1d1d1d;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
}
/* On coral cards, the tag flips to dark bg + white text for contrast */
.dm-seo-article--coral .dm-seo-article-tag {
  background: #1d1d1d;
  color: #fff;
}
.dm-seo-article h3 {
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.3;
  margin: 0 0 10px;
  padding: 0 6px;
  color: inherit;
}
.dm-seo-article p {
  font-size: clamp(12px, 0.85vw, 13px);
  line-height: 1.5;
  margin: 0 0 14px;
  padding: 0 6px;
  opacity: .78;
  color: inherit;
}
.dm-seo-article-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-weight: 700;
  font-family: var(--font-display, Poppins), sans-serif;
  font-size: 13px;
  text-decoration: none;
  padding: 0 6px 6px;
  margin-top: auto;
  opacity: .92;
}
/* Hide the legacy <img> arrow — replaced by a CSS-rendered SVG arrow that
   uses currentColor so it adapts to every variant (dark/cream/coral). */
.dm-seo-article-link img { display: none; }
.dm-seo-article-link::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M7 17L17 7M9 7h8v8' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask: center / contain no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M7 17L17 7M9 7h8v8' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ===== Tablet ≤1100px ===== */
@media (max-width: 1100px) {
  .dm-seo-hero { padding: 50px 40px 60px; }
  .dm-seo-hero-title { font-size: 44px; }
  .dm-seo-hero-badge { width: 80px; height: 80px; }
  .dm-seo-hero-badge img { width: 38px; height: 38px; }
  .dm-seo-hero-top { grid-template-columns: 1fr 100px; gap: 24px; }

  .dm-seo-faq { padding-left: 40px; padding-right: 40px; }
  .dm-seo-faq-title, .dm-seo-trust-title, .dm-seo-articles-title { font-size: 34px; }

  .dm-seo-trust { padding: 40px 40px 30px; }
  .dm-seo-trust-grid { grid-template-columns: repeat(2, 1fr); }
  .dm-seo-trust-note { margin-top: 24px; padding: 0 16px; }

  /* Our Services: keep 2-col at tablet (Figma); collapses to 1-col at mobile (handled in mobile media block below) */

  .dm-seo-articles { padding: 0 40px 60px; }
  .dm-seo-articles-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== Mobile ≤600px ===== */
@media (max-width: 600px) {
  .dm-seo-hero { padding: 30px 16px 40px; }
  .dm-seo-hero-top { grid-template-columns: 1fr; }
  .dm-seo-hero-badge { position: static; margin: 0 auto 18px; width: 70px; height: 70px; }
  .dm-seo-hero-badge img { width: 32px; height: 32px; }
  .dm-seo-hero-title { font-size: 30px; }
  .dm-seo-hero-text { font-size: 14px; }
  .dm-seo-btn-primary { padding: 12px 22px; font-size: 14px; margin-top: 22px; }

  .dm-seo-faq, .dm-seo-trust { padding-left: 16px; padding-right: 16px; }
  .dm-seo-faq-title, .dm-seo-trust-title, .dm-seo-articles-title { font-size: 26px; margin-bottom: 22px; }

  /* Our Services: stack to single column at mobile per Figma mobile frame */
  .dm-services-grid--two { grid-template-columns: 1fr; }

  /* Mobile Figma (both /seo/ and /link-building/): cards stack 1-col,
     each full width with comfortable padding. */
  .dm-seo-trust-grid { grid-template-columns: 1fr; gap: 12px; }
  .dm-seo-trust-card { padding: 24px 22px; min-height: 0; }
  .dm-seo-trust-card h3 { font-size: 18px; line-height: 1.2; margin-bottom: 10px; }
  .dm-seo-trust-card p { font-size: 13px; line-height: 1.5; }
  .dm-seo-trust-note { font-size: 12px; margin-top: 22px; padding: 0 8px; gap: 8px; }
  .dm-seo-trust-note-icon { width: 18px; height: 18px; }

  .dm-seo-faq-item { border-radius: 18px; padding: 0 20px; }
  .dm-seo-faq-item summary { font-size: 14px; padding: 14px 0; }

  .dm-seo-articles { padding: 0 16px 50px; }
  .dm-seo-articles-grid { grid-template-columns: 1fr; }
  .dm-seo-article-img { height: 160px; }
}

/* --- link-building.css --- */
/* Link Building Services page (/link-building/)
   Namespace: .dm-lb-* for the page-specific Hero + "Why Do You Need" sections.
   Reused (no extra CSS in this file):
     - Brands         → .dm-brands-*       (homepage section)
     - Case Studies   → .dm-cases-*        (homepage section)
     - Partner        → .dm-partner-*      (homepage section)
     - Other Services → .dm-services-*     (homepage section, --two modifier)
     - Why Trust grid → .dm-seo-trust-*    (defined in seo.css)
     - FAQ            → .dm-seo-faq-*      (defined in seo.css)
     - Articles       → .dm-seo-articles-* (defined in seo.css)
   Breakpoints: 1100px (tablet), 700px (mobile), 380px (very narrow).
*/

.dm-lb-hero,
.dm-lb-why {
  color: #fff;
  background: var(--color-bg, #1d1d1d);
  font-family: var(--font-body, Inter), sans-serif;
}

/* ===== Hero ===== */
.dm-lb-hero {
  position: relative;
  padding: 16px clamp(20px, 4vw, 80px) 0;
  overflow: hidden;
  background: var(--color-bg, #1d1d1d);
}

.dm-lb-hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.dm-lb-hero-title {
  font-family: var(--font-display, Poppins), sans-serif;
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 0;
  color: #fff;
}
.dm-lb-hero-text {
  margin: 18px auto 0;
  font-family: var(--font-body, Inter), sans-serif;
  font-size: clamp(14px, 0.95vw, 16px);
  line-height: 1.55;
  color: #fff;
  opacity: .82;
  max-width: 640px;
}

/* CTA */
.dm-lb-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-coral, #fe7c5d);
  color: #1d1d1d;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 30px;
  border-radius: 999px;
  text-decoration: none;
  margin-top: 28px;
  transition: transform .2s ease, opacity .2s ease;
}
.dm-lb-btn-primary:hover { transform: translateY(-1px); opacity: .95; }

/* Floating chain decorations: 4 sized chain icons positioned around the hero */
.dm-lb-deco {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  opacity: .9;
}
/* Per Figma desktop: 4 chain icons distributed around the hero — small ones
   near the heading at top, larger ones flanking the dashboard area. */
.dm-lb-deco--top-left  { top: 110px; left: 8%;  width: clamp(48px, 5vw, 92px);  transform: rotate(-12deg); }
.dm-lb-deco--top-right { top: 100px; right: 8%; width: clamp(44px, 4.5vw, 84px); transform: rotate(18deg); }
.dm-lb-deco--mid-left  { top: 460px; left: 5%;  width: clamp(64px, 8vw, 140px); transform: rotate(-22deg); }
.dm-lb-deco--mid-right { top: 440px; right: 4%; width: clamp(72px, 10vw, 180px); transform: rotate(28deg); }

/* Visual: coral ellipse + dashboard mock */
.dm-lb-hero-visual {
  position: relative;
  /* 130px clears the wider coral arc from the CTA pill (same fix as
     .dm-seo-hero-visual). */
  margin: 130px auto 0;
  max-width: 1100px;
}
.dm-lb-hero-ellipse {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  /* Wider ellipse so the coral wash extends past the dashboard sides more
     prominently — matches the Figma frame's wider arc. Was clamp(750, 88%, 1000). */
  width: clamp(840px, 102%, 1140px);
  height: auto;
  pointer-events: none;
  z-index: 1;
}
.dm-lb-hero-dashboard {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 880px;
  height: auto;
  margin: 0 auto;
}

/* ===== Why Do You Need Link Building =====
   Composition: heading + body centered, glassmorphism browser cards built
   in CSS (no SVG mocks), emoji chain links, dotted connectors. Background
   matches the rest of the page (no radial gradient glow). */
.dm-lb-why {
  position: relative;
  overflow: hidden;
  min-height: 900px;
  padding: 70px 20px 90px;
  background: var(--color-bg, #1d1d1d);
  color: #fff;
}

.dm-lb-why-header {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.dm-lb-why-header h2 {
  margin: 0 0 18px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-size: clamp(32px, 3.4vw, 54px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #fff;
}
.dm-lb-why-header p {
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--font-body, Inter), sans-serif;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.dm-lb-why-visual {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  height: 570px;
  margin: 70px auto 0;
}

.dm-lb-why-card {
  position: absolute;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(20, 20, 20, 0.86);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42),
              inset 0 0 28px rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(6px);
}
.dm-lb-why-card--left   { width: 395px; height: 245px; top: 0; left: 0; }
.dm-lb-why-card--right  { width: 420px; height: 245px; top: 0; right: 0; }
.dm-lb-why-card--bottom { width: 390px; height: 290px; bottom: 0; left: 50%; transform: translateX(-50%); }

.dm-lb-why-card-top {
  height: 52px;
  padding: 0 26px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.42);
}
.dm-lb-why-card-top span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff7458;
}
.dm-lb-why-card-top .dm-lb-why-card-top-muted {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
}

.dm-lb-why-card-content { padding: 28px; }

.dm-lb-why-content-row {
  display: grid;
  grid-template-columns: 165px 1fr;
  column-gap: 30px;
}

.dm-lb-why-block {
  border-radius: 9px;
  background: linear-gradient(135deg, #ff7b5f, #ff5d45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.dm-lb-why-block--image { height: 104px; }
.dm-lb-why-block--video {
  position: relative;
  height: 110px;
  margin-bottom: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dm-lb-why-play {
  width: 0;
  height: 0;
  border-top: 19px solid transparent;
  border-bottom: 19px solid transparent;
  border-left: 29px solid #fff;
}
.dm-lb-why-block--hero { height: 72px; margin-bottom: 18px; }

.dm-lb-why-lines {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.dm-lb-why-lines span {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}
.dm-lb-why-lines--short { padding-top: 21px; }
.dm-lb-why-lines--short span:nth-child(1),
.dm-lb-why-lines--short span:nth-child(2) { width: 100%; }
.dm-lb-why-lines--short span:nth-child(3) { width: 76%; }

.dm-lb-why-lines--full {
  grid-column: 1 / -1;
  margin-top: 28px;
}
.dm-lb-why-lines--full span { width: 100%; }

.dm-lb-why-mini-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.dm-lb-why-mini .dm-lb-why-block { height: 60px; margin-bottom: 14px; }

.dm-lb-why-lines--mini { gap: 8px; }
.dm-lb-why-lines--mini span { height: 6px; }
.dm-lb-why-lines--mini span:nth-child(1) { width: 100%; }
.dm-lb-why-lines--mini span:nth-child(2) { width: 92%; }
.dm-lb-why-lines--mini span:nth-child(3) { width: 75%; }

.dm-lb-why-center {
  position: absolute;
  top: 125px;
  left: 50%;
  width: 210px;
  height: 40px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dm-lb-why-center::before,
.dm-lb-why-center::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 72px;
  border-top: 2px dotted rgba(255, 255, 255, 0.7);
}
.dm-lb-why-center::before { left: 0; }
.dm-lb-why-center::after  { right: 0; }

/* Center chain icon (sits in the gap between top cards) — SVG image rotated
   slightly so it reads as a horizontal connector with subtle visual energy. */
.dm-lb-why-chain-symbol {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  display: block;
  transform: rotate(-18deg);
}

.dm-lb-why-connector {
  position: absolute;
  width: 145px;
  height: 135px;
  border: 2px dotted rgba(255, 255, 255, 0.55);
  border-top: none;
  border-right: none;
  pointer-events: none;
}
.dm-lb-why-connector--left  { left: 208px; top: 238px; border-bottom-left-radius: 55px; }
.dm-lb-why-connector--right { right: 212px; top: 238px; border-bottom-left-radius: 55px; transform: scaleX(-1); }


/* ===== Tablet ≤1100px ===== */
@media (max-width: 1100px) {
  .dm-lb-hero { padding: 110px 32px 0; }
  .dm-lb-deco--top-left  { top: 28px; width: clamp(64px, 9vw, 110px); }
  .dm-lb-deco--top-right { top: 22px; width: clamp(56px, 8vw, 100px); }
  .dm-lb-deco--mid-left  { top: 380px; width: clamp(80px, 12vw, 160px); }
  .dm-lb-deco--mid-right { top: 360px; width: clamp(100px, 14vw, 200px); }

  .dm-lb-hero-visual { margin: 100px auto 0; max-width: 820px; }
  /* Wider coral ellipse so the wash extends past the dashboard sides more
     visibly — matches the Figma tablet frame proportions. */
  .dm-lb-hero-ellipse { width: 115%; bottom: 0; }

  /* Why section — cards stack vertically. Shrink mocks so the section reads
     compactly on tablet/mobile instead of running ~900px tall per card. */
  .dm-lb-why { min-height: auto; padding: 60px 24px 60px; }
  .dm-lb-why-header h2 { font-size: clamp(28px, 4vw, 42px); }
  .dm-lb-why-header p  { font-size: 15px; }
  .dm-lb-why-visual {
    height: auto;
    display: grid;
    gap: 18px;
    margin-top: 44px;
    max-width: 460px;
  }
  .dm-lb-why-card,
  .dm-lb-why-card--left,
  .dm-lb-why-card--right,
  .dm-lb-why-card--bottom {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    inset: auto;
    margin: 0 auto;
    transform: none;
    border-radius: 14px;
  }
  /* Browser chrome bar: smaller traffic-light dots + tighter padding */
  .dm-lb-why-card-top {
    height: 36px;
    padding: 0 16px;
    gap: 7px;
  }
  .dm-lb-why-card-top span { width: 9px; height: 9px; }
  .dm-lb-why-card-content { padding: 16px; }
  /* Inner mocks: cut heights ~40% so the section is roughly 1/3 the previous
     stacked height on tablet/mobile and the visual reads at a glance. */
  .dm-lb-why-content-row { column-gap: 16px; grid-template-columns: 110px 1fr; }
  .dm-lb-why-block--image { height: 64px; }
  .dm-lb-why-block--video { height: 70px; margin-bottom: 16px; }
  .dm-lb-why-block--hero  { height: 48px; margin-bottom: 12px; }
  .dm-lb-why-play {
    border-top-width: 12px;
    border-bottom-width: 12px;
    border-left-width: 18px;
  }
  .dm-lb-why-lines { gap: 7px; }
  .dm-lb-why-lines span { height: 6px; }
  .dm-lb-why-lines--short { padding-top: 10px; }
  .dm-lb-why-lines--full { margin-top: 14px; }
  .dm-lb-why-mini .dm-lb-why-block { height: 38px; margin-bottom: 8px; }
  .dm-lb-why-mini-row { gap: 10px; }
  .dm-lb-why-lines--mini { gap: 5px; }
  .dm-lb-why-lines--mini span { height: 4px; }

  .dm-lb-why-center,
  .dm-lb-why-connector { display: none; }
}

/* ===== Mobile ≤700px ===== */
@media (max-width: 700px) {
  .dm-lb-hero { padding: 80px 20px 0; }
  .dm-lb-hero-title {
    font-size: clamp(24px, 7.2vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.3px;
  }
  .dm-lb-hero-text {
    font-size: 13.5px;
    line-height: 1.6;
    margin-top: 14px;
    max-width: 100%;
  }
  .dm-lb-btn-primary {
    padding: 12px 24px;
    font-size: 14px;
    margin-top: 22px;
  }
  /* Decorations: only keep top corners on mobile, push them firmly into the
     corners so they don't crowd the heading at narrow widths. Hide mid pair. */
  .dm-lb-deco--top-left  { top: 18px; left: 10px; width: 42px; transform: rotate(-12deg); }
  .dm-lb-deco--top-right { top: 14px; right: 10px; width: 40px; transform: rotate(18deg); }
  .dm-lb-deco--mid-left, .dm-lb-deco--mid-right { display: none; }

  .dm-lb-hero-visual { margin-top: 30px; }
  /* Mobile: wider coral ellipse for a more prominent wash behind the dash */
  .dm-lb-hero-ellipse { width: 135%; bottom: 0; }
  .dm-lb-hero-dashboard { max-width: 100%; }

  .dm-lb-why { padding: 44px 16px 56px; }
  .dm-lb-why-header p { font-size: 14px; }
  .dm-lb-why-visual { gap: 16px; max-width: 360px; margin-top: 32px; }
  /* Mobile-only: collapse the left card's image+lines grid to a single column
     so the mock doesn't squeeze content into tiny side-by-side strips. */
  .dm-lb-why-content-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .dm-lb-why-lines--short { padding-top: 0; }
  /* Bottom card: 3 minis fit in one row on mobile (tighter scale already set
     by tablet rules). 1-col fallback only for very narrow phones below. */
}

/* ===== Very narrow phones <380px ===== */
@media (max-width: 380px) {
  .dm-lb-hero { padding: 70px 16px 0; }
  .dm-lb-hero-title { font-size: 22px; }
  .dm-lb-deco--top-left  { top: 14px; left: 8px; width: 34px; }
  .dm-lb-deco--top-right { top: 10px; right: 8px; width: 32px; }
  .dm-lb-why-mini-row { grid-template-columns: 1fr; }
}

/* --- content-writing.css --- */
/* Content Writing Services page (/content-writing/)
   Namespace: .dm-cw-* for the page-specific Hero + "Content That Works" sections.
   Reused (no extra CSS in this file):
     - Brands           → .dm-brands-*       (homepage section)
     - Case Studies     → .dm-cases-*        (homepage section)
     - Partner          → .dm-partner-*      (homepage section)
     - 6-card grid      → .dm-seo-trust-*    (defined in seo.css) — title swapped to
                                              "We've Got Your Content Covered"
     - Other Services   → .dm-services-*     (homepage section, --two modifier)
     - FAQ              → .dm-seo-faq-*      (defined in seo.css)
     - Articles         → .dm-seo-articles-* (defined in seo.css)
   Breakpoints: 1100px (tablet), 700px (mobile), 380px (very narrow).
*/

.dm-cw-hero,
.dm-cw-works {
  color: #fff;
  background: var(--color-bg, #1d1d1d);
  font-family: var(--font-body, Inter), sans-serif;
}

/* ===== Hero ===== */
.dm-cw-hero {
  position: relative;
  padding: 16px clamp(20px, 4vw, 80px) 0;
  overflow: hidden;
  background: var(--color-bg, #1d1d1d);
}

.dm-cw-hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.dm-cw-hero-title {
  font-family: var(--font-display, Poppins), sans-serif;
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 0;
  color: #fff;
}
.dm-cw-hero-text {
  margin: 18px auto 0;
  font-family: var(--font-body, Inter), sans-serif;
  font-size: clamp(14px, 0.95vw, 16px);
  line-height: 1.55;
  color: #fff;
  opacity: .82;
  max-width: 600px;
}

/* CTA */
.dm-cw-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-coral, #fe7c5d);
  color: #1d1d1d;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 30px;
  border-radius: 999px;
  text-decoration: none;
  margin-top: 28px;
  transition: transform .2s ease, opacity .2s ease;
}
.dm-cw-btn-primary:hover { transform: translateY(-1px); opacity: .95; }

/* Floating decorations: document icon top-left, pen icon top-right */
.dm-cw-deco {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}
.dm-cw-deco--doc {
  top: 110px;
  left: 12%;
  width: clamp(56px, 5vw, 88px);
}
.dm-cw-deco--pen {
  top: 90px;
  right: 12%;
  width: clamp(64px, 6vw, 112px);
  transform: rotate(18deg);
}

/* Visual: gray stage ellipse + typewriter illustration */
.dm-cw-hero-visual {
  position: relative;
  margin: 70px auto 0;
  max-width: 1000px;
  min-height: 360px;
}
.dm-cw-hero-ellipse {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(620px, 70%, 900px);
  height: auto;
  pointer-events: none;
  z-index: 1;
}
.dm-cw-hero-typewriter {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(280px, 36%, 460px);
  height: auto;
  margin: 0 auto;
  /* Bottom-align via translateY so the typewriter feet sit at the bottom of
     the stage ellipse — Figma references this composition. */
  transform: translateY(20px);
}

/* ===== Content That Works for Your Business =====
   Design contract: 2-col layout (copy left, browser mock right) at desktop,
   stack at tablet. Browser mock is pure CSS (no SVG/image) — coral hero
   block with sun + 2 mountains, 3 mini cards with circular coral icons
   (pencil / chart / target), bottom paragraph lines. Coral dot-grid
   decorations top-left + bottom-right of the visual. */
.dm-content-section {
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 6vw, 100px) clamp(20px, 4vw, 80px);
  background: var(--color-bg, #1d1d1d);
  color: #fff;
  font-family: var(--font-body, Inter), sans-serif;
}

.dm-content-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
}

.dm-content-copy {
  max-width: 480px;
}

.dm-content-copy h2 {
  margin: 0 0 18px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #fff;
}

.dm-content-copy p {
  margin: 0;
  max-width: 440px;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.dm-content-copy p + p {
  margin-top: 14px;
}

.dm-content-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dm-browser-card {
  position: relative;
  z-index: 2;
  width: min(100%, 480px);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  background: var(--color-bg, #1d1d1d);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

.dm-browser-top {
  height: 50px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.42);
}

.dm-browser-dots {
  display: flex;
  align-items: center;
  gap: 9px;
}

.dm-browser-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff7458;
}

.dm-browser-pill {
  width: 64px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
}

.dm-browser-body {
  padding: 22px 22px 26px;
}

.dm-hero-preview {
  min-height: 120px;
  padding: 20px 26px;
  display: grid;
  grid-template-columns: 0.8fr 1.25fr;
  align-items: center;
  gap: 24px;
  border-radius: 10px;
  background: #ff7458;
}

.dm-preview-image {
  position: relative;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.dm-preview-image svg {
  width: 100%;
  max-width: 88px;
  height: auto;
  display: block;
}

.dm-preview-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dm-preview-lines span {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
}

.dm-preview-lines span:nth-child(1) { width: 100%; }
.dm-preview-lines span:nth-child(2) { width: 66%; }
.dm-preview-lines span:nth-child(3) { width: 84%; }

.dm-mini-row {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.dm-mini-card {
  min-height: 64px;
  padding: 12px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.055);
}

.dm-mini-icon {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ff7458;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-bg, #1d1d1d);
}
.dm-mini-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.dm-mini-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dm-mini-lines span {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
}

.dm-mini-lines span:first-child { width: 70%; }
.dm-mini-lines span:last-child  { width: 100%; }

.dm-bottom-lines {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dm-bottom-lines span {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
}

.dm-bottom-lines span:nth-child(1) { width: 66%; }
.dm-bottom-lines span:nth-child(2) { width: 88%; }
.dm-bottom-lines span:nth-child(3) { width: 88%; }
.dm-bottom-lines span:nth-child(4) { width: 64%; }

/* Decorative coral dot grids — smaller and tighter to match the new card size */
.dm-dot-pattern {
  position: absolute;
  z-index: 1;
  width: 110px;
  height: 110px;
  opacity: 0.8;
  background-image: radial-gradient(#ff7458 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  pointer-events: none;
}

.dm-dot-pattern-top    { top: 10px;   left: 0; }
.dm-dot-pattern-bottom { right: 0;    bottom: 10px; }


/* ===== Tablet ≤1100px ===== */
@media (max-width: 1100px) {
  .dm-cw-hero { padding: 110px 32px 0; }
  .dm-cw-deco--doc { top: 28px; left: 5%; width: clamp(56px, 8vw, 92px); }
  .dm-cw-deco--pen { top: 22px; right: 5%; width: clamp(64px, 9vw, 110px); }

  .dm-cw-hero-visual {
    margin: 60px auto 0;
    max-width: 720px;
    min-height: 320px;
  }
  .dm-cw-hero-ellipse { width: 88%; }
  .dm-cw-hero-typewriter { width: clamp(260px, 44%, 380px); }

  /* Content That Works — stack at tablet, center the visual so it doesn't sit
     left with empty space. Copy + visual both center-aligned, browser card
     capped tighter so the section reads compact. */
  .dm-content-section { padding: 64px 28px; }
  .dm-content-container {
    grid-template-columns: 1fr;
    gap: 36px;
    justify-items: center;
    text-align: center;
  }
  .dm-content-copy    { max-width: 560px; }
  .dm-content-copy p  { max-width: 560px; margin-left: auto; margin-right: auto; }
  .dm-content-visual  { width: 100%; justify-content: center; }
  .dm-browser-card    { width: 100%; max-width: 420px; }
  /* Anchor dot patterns to the browser card edges since the visual is now centered */
  .dm-dot-pattern        { width: 90px; height: 90px; background-size: 14px 14px; }
  .dm-dot-pattern-top    { left: auto; right: -10px; top: -18px; }
  .dm-dot-pattern-bottom { left: -10px; right: auto; bottom: -18px; }
}

/* ===== Mobile ≤700px ===== */
@media (max-width: 700px) {
  .dm-cw-hero { padding: 80px 20px 0; }
  .dm-cw-hero-title {
    font-size: clamp(24px, 7.2vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.3px;
  }
  .dm-cw-hero-text {
    font-size: 13.5px;
    line-height: 1.6;
    margin-top: 14px;
    max-width: 100%;
  }
  .dm-cw-btn-primary {
    padding: 12px 24px;
    font-size: 14px;
    margin-top: 22px;
  }
  /* Decorations pushed into corners */
  .dm-cw-deco--doc { top: 22px; left: 14px; width: 42px; }
  .dm-cw-deco--pen { top: 18px; right: 14px; width: 48px; }

  .dm-cw-hero-visual {
    margin-top: 36px;
    min-height: 240px;
    max-width: 100%;
  }
  .dm-cw-hero-ellipse { width: 115%; }
  .dm-cw-hero-typewriter { width: 60%; }

  /* Content That Works — mobile: tighter browser card, 3 minis in a row stays
     readable at this scale, hero preview keeps icon+lines side-by-side. */
  .dm-content-section { padding: 44px 16px; }
  .dm-content-container { gap: 24px; }
  .dm-browser-card { max-width: 340px; }
  .dm-browser-top  { height: 40px; padding: 0 16px; }
  .dm-browser-dots span { width: 9px; height: 9px; }
  .dm-browser-pill { width: 48px; height: 7px; }
  .dm-browser-body { padding: 16px; }
  .dm-hero-preview {
    min-height: 84px;
    padding: 14px 16px;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 16px;
  }
  .dm-preview-image { height: 52px; }
  .dm-preview-image svg { max-width: 60px; }
  .dm-preview-lines { gap: 8px; }
  .dm-preview-lines span { height: 6px; }
  .dm-mini-row { gap: 6px; margin-top: 12px; }
  .dm-mini-card { min-height: 48px; padding: 8px 8px; gap: 8px; border-radius: 7px; }
  .dm-mini-icon { width: 28px; height: 28px; }
  .dm-mini-icon svg { width: 14px; height: 14px; }
  .dm-mini-lines { gap: 5px; }
  .dm-mini-lines span { height: 4px; }
  .dm-bottom-lines { margin-top: 16px; gap: 7px; }
  .dm-bottom-lines span { height: 5px; }
  .dm-dot-pattern { width: 70px; height: 70px; background-size: 12px 12px; }
  .dm-dot-pattern-top    { top: -14px; right: -6px; left: auto; }
  .dm-dot-pattern-bottom { bottom: -14px; left: -6px; right: auto; }
}

/* ===== Very narrow phones <390px ===== */
@media (max-width: 390px) {
  .dm-cw-hero { padding: 70px 16px 0; }
  .dm-cw-hero-title { font-size: 22px; }
  .dm-cw-deco--doc { top: 18px; left: 12px; width: 36px; }
  .dm-cw-deco--pen { top: 14px; right: 12px; width: 40px; }
  .dm-content-copy h2 { font-size: 32px; }
  .dm-browser-body    { padding: 18px; }
}

/* --- blog.css --- */
/* Blog index page (/blog/)
   Namespace: .dm-blog-* for layout (featured hero, categories filter,
   pagination). The article cards inside the grid reuse the shared
   .dm-seo-article component (defined in seo.css) with its 3 bg variants.
   Type scale per memory rule: h1 ≤ 54px, h2 ≤ 42px, body ≤ 16px.
*/

.dm-blog-featured,
.dm-blog-filter,
.dm-blog-grid-section {
  background: var(--color-bg, #1d1d1d);
  color: #fff;
  font-family: var(--font-body, Inter), sans-serif;
}

/* ===== Featured hero ===== */
.dm-blog-featured {
  padding: clamp(40px, 5vw, 80px) var(--dm-pad-x) clamp(20px, 2.4vw, 40px);
}
.dm-blog-featured-card {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(28px, 3vw, 56px);
  max-width: var(--dm-content-max);
  margin: 0 auto;
  padding: clamp(36px, 4vw, 60px);
  background: var(--color-bg-cream, #fcf8f5);
  color: #1d1d1d;
  border-radius: clamp(24px, 2.4vw, 36px);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
  align-items: center;
}
.dm-blog-featured-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.dm-blog-featured-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-size: 13px;
  color: #2e2e2e;
  margin-bottom: 14px;
}
.dm-blog-featured-author { font-weight: 600; }
.dm-blog-featured-dot { color: #aaa; }

.dm-blog-featured-title {
  margin: 0 0 14px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #1d1d1d;
}
.dm-blog-featured-text {
  margin: 0 0 20px;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  color: #2e2e2e;
  max-width: 500px;
}
.dm-blog-featured-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #1d1d1d;
}
.dm-blog-featured-link svg { width: 18px; height: 18px; }
.dm-blog-featured-card:hover .dm-blog-featured-link { color: var(--color-coral, #fe7c5d); }

.dm-blog-featured-illus {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--color-bg-cream, #fcf8f5);
  background-image:
    radial-gradient(circle at 60% 50%, var(--color-coral, #fe7c5d) 0 38%, transparent 38%),
    linear-gradient(135deg, transparent 49.5%, rgba(29, 29, 29, 0.18) 49.5%, rgba(29, 29, 29, 0.18) 50.5%, transparent 50.5%),
    radial-gradient(circle at 22% 88%, rgba(29, 29, 29, 0.5) 0 5px, transparent 5px);
  background-repeat: no-repeat;
  border-radius: 18px;
  overflow: hidden;
}
/* Featured post has a cover: the photo replaces the drawn illustration.
   The .dm-blog-featured-art div is not emitted at all in this case. */
.dm-blog-featured-illus--photo {
  background-image: none;
}
.dm-blog-featured-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-block;
  background: var(--color-coral, #fe7c5d);
  color: #1d1d1d;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  font-size: 12px;
}
/* Envelope SVG layered on top of the focal coral circle, tilted slightly
   like the Figma frame. */
.dm-blog-featured-art {
  position: absolute;
  top: 30%;
  right: 18%;
  width: 42%;
  height: 56%;
  background: center / contain no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' fill='none'><rect x='3' y='6' width='114' height='78' rx='5' fill='white' stroke='%231d1d1d' stroke-width='2.4'/><path d='M3 12 L60 50 L117 12' stroke='%231d1d1d' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  transform: rotate(-6deg);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.2));
}

/* Carousel dots — placeholder for future slider */
.dm-blog-featured-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.dm-blog-featured-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.dm-blog-featured-dots span:first-child {
  background: var(--color-coral, #fe7c5d);
  width: 22px;
  border-radius: 999px;
}

/* ===== Categories filter ===== */
.dm-blog-filter {
  padding: clamp(40px, 4vw, 70px) var(--dm-pad-x) clamp(24px, 2.4vw, 40px);
}
.dm-blog-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--dm-content-max);
  margin: 0 auto 22px;
}
.dm-blog-filter-title {
  margin: 0;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #fff;
}
.dm-blog-search {
  position: relative;
  max-width: 320px;
  flex: 0 0 auto;
  width: 100%;
}
.dm-blog-search-ic {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-coral, #fe7c5d);
  pointer-events: none;
  display: block;
}
.dm-blog-search-ic svg { width: 100%; height: 100%; display: block; }
/* When the icon is a submit button (real search form), keep it clickable. */
button.dm-blog-search-ic { pointer-events: auto; cursor: pointer; background: transparent; border: 0; padding: 0; }
.dm-blog-search-input {
  width: 100%;
  padding: 11px 42px 11px 16px;
  background: var(--color-bg-cream, #fcf8f5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  font-family: var(--font-body, Inter), sans-serif;
  font-size: 13px;
  color: #1d1d1d;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dm-blog-search-input::placeholder { color: #888; }
.dm-blog-search-input:focus {
  border-color: var(--color-coral, #fe7c5d);
  box-shadow: 0 0 0 3px rgba(254, 124, 93, 0.18);
}

.dm-blog-cats {
  max-width: var(--dm-content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dm-blog-cat {
  padding: 9px 18px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.dm-blog-cat:hover {
  border-color: var(--color-coral, #fe7c5d);
  color: var(--color-coral, #fe7c5d);
}
.dm-blog-cat--active {
  background: var(--color-coral, #fe7c5d);
  color: #1d1d1d;
  border-color: var(--color-coral, #fe7c5d);
}
.dm-blog-cat--active:hover {
  color: #1d1d1d;
  opacity: 0.94;
}

/* ===== Grid + pagination ===== */
.dm-blog-grid-section {
  padding: 0 var(--dm-pad-x) clamp(60px, 6vw, 100px);
}
.dm-blog-grid {
  max-width: var(--dm-content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}
.dm-blog-card-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.dm-blog-pagination {
  max-width: var(--dm-content-max);
  margin: clamp(36px, 4vw, 56px) auto 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.dm-blog-page {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-cream, #fcf8f5);
  color: #1d1d1d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.dm-blog-page:hover { transform: translateY(-1px); }
.dm-blog-page--active {
  background: var(--color-coral, #fe7c5d);
  color: #1d1d1d;
  border-color: var(--color-coral, #fe7c5d);
}

/* Empty-state shown by the filter JS when no card matches */
.dm-blog-empty {
  max-width: 600px;
  margin: clamp(28px, 3vw, 44px) auto 0;
  padding: 18px 22px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  font-size: clamp(13px, 1vw, 15px);
  color: rgba(255, 255, 255, 0.72);
}

/* ===== Tablet ≤1100px ===== */
@media (max-width: 1100px) {
  .dm-blog-featured-card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px;
  }
  .dm-blog-featured-illus { aspect-ratio: 16 / 9; max-height: 320px; }

  .dm-blog-filter-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .dm-blog-search { max-width: 100%; }

  .dm-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Mobile ≤700px ===== */
@media (max-width: 700px) {
  .dm-blog-featured { padding: 32px 14px 16px; }
  .dm-blog-featured-card {
    padding: 24px 22px;
    border-radius: 20px;
  }
  .dm-blog-featured-title { font-size: 22px; }
  .dm-blog-featured-text { font-size: 13px; }
  .dm-blog-featured-illus { border-radius: 14px; }

  .dm-blog-filter { padding: 32px 14px 20px; }
  .dm-blog-cats { gap: 8px; }
  .dm-blog-cat { padding: 8px 14px; font-size: 12.5px; }

  .dm-blog-grid-section { padding: 0 14px 48px; }
  .dm-blog-grid { grid-template-columns: 1fr; }
  .dm-blog-page { width: 32px; height: 32px; font-size: 13px; }
}

/* ============================================================
   Newsletter band. Blog index + single posts only.

   Coral card, matching the contact hero: coral is the site's conversion
   surface, and the .dm-contact-* field styles the shortcode reuses were
   designed to sit on it (dark labels, white inputs). That makes this read
   correctly on the dark blog surface AND on the cream article page without a
   second colour scheme.

   The submit is the one thing overridden: .dm-contact-submit is coral, which
   would be coral-on-coral here, so it goes dark. Scoped, so the contact page
   is untouched.
   ============================================================ */
.dm-newsletter {
  padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 80px) 0;
}

.dm-newsletter-card {
  max-width: var(--dm-content-max);
  margin: 0 auto;
  background: var(--color-coral, #fe7c5d);
  border-radius: clamp(24px, 2.4vw, 36px);
  padding: clamp(28px, 3vw, 44px) clamp(24px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
}

.dm-newsletter-title {
  margin: 0 0 8px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.25;
  color: var(--color-text-on-light, #1d1d1d);
}

.dm-newsletter-text {
  margin: 0;
  font-family: var(--font-body, Inter), sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(29, 29, 29, 0.82);
}

/* One row: field grows, button keeps its width. The form carries no card of its
   own (see the note in lead-forms.php), so this owns the whole layout. */
.dm-newsletter-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  background: none;
}
.dm-newsletter-row .dm-contact-field {
  flex: 1 1 220px;
  min-width: 0;
}
.dm-newsletter-row .dm-contact-submit {
  flex: 0 0 auto;
  align-self: flex-end;
  min-width: 140px;
  background: var(--color-bg, #1d1d1d);
  color: var(--color-text-on-dark, #fff);
}

/* Tablet: stack the copy above the form. */
@media (max-width: 1100px) {
  .dm-newsletter-card { grid-template-columns: 1fr; }
}

/* Mobile: full-width button under the field. */
@media (max-width: 600px) {
  .dm-newsletter-row .dm-contact-submit { width: 100%; }
}

/* --- article.css --- */
/* Article (single post) page (/article/) — DARK THEME
   Matches Figma: dark site background (#1d1d1d), white body text, Poppins
   headings (site standard). Layout: cream hero card -> 2-col body (article
   + sticky cream TOC card) -> Related Articles on dark bg.
   Type scale: hero title clamp -> 36px, section h2 -> 32px (line-height 112%),
   body 16px (line-height 160%) per the Figma inspector. */

.dm-article-page {
  background: var(--color-bg, #1d1d1d);
  color: #fff;
}
.dm-article-hero,
.dm-article-body-section {
  background: var(--color-bg, #1d1d1d);
  color: #fff;
  font-family: var(--font-body, Inter), sans-serif;
}

/* ===== Hero ===== */
.dm-article-hero {
  padding: clamp(40px, 5vw, 80px) clamp(20px, 4vw, 80px) clamp(16px, 2vw, 28px);
}
.dm-article-hero-card {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(28px, 3vw, 56px);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(36px, 4vw, 60px);
  background: var(--color-bg-cream, #fcf8f5);
  color: #1d1d1d;
  border-radius: clamp(24px, 2.4vw, 36px);
  align-items: center;
}
.dm-article-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-size: 13px;
  color: #2e2e2e;
  margin-bottom: 14px;
}
.dm-article-hero-author { font-weight: 600; }
.dm-article-hero-date { color: #2e2e2e; }
.dm-article-hero-title {
  margin: 0 0 16px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #1d1d1d;
}
.dm-article-hero-sub {
  margin: 0;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  color: #2e2e2e;
  max-width: 460px;
}

/* Hero illustration — same envelope-on-coral-circle motif as blog/related */
.dm-article-hero-illus {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--color-bg-cream, #fcf8f5);
  background-image:
    radial-gradient(circle at 60% 50%, var(--color-coral, #fe7c5d) 0 38%, transparent 38%),
    linear-gradient(135deg, transparent 49.5%, rgba(29, 29, 29, 0.18) 49.5%, rgba(29, 29, 29, 0.18) 50.5%, transparent 50.5%),
    radial-gradient(circle at 22% 88%, rgba(29, 29, 29, 0.5) 0 5px, transparent 5px);
  background-repeat: no-repeat;
  border-radius: 18px;
  overflow: hidden;
}
/* Post has a cover: the photo replaces the drawn illustration.
   The .dm-article-hero-art div is not emitted at all in this case. */
.dm-article-hero-illus--photo {
  background-image: none;
}
.dm-article-hero-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-block;
  background: var(--color-coral, #fe7c5d);
  color: #1d1d1d;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  font-size: 12px;
}
.dm-article-hero-art {
  position: absolute;
  top: 30%;
  right: 18%;
  width: 42%;
  height: 56%;
  background: center / contain no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90' fill='none'><rect x='3' y='6' width='114' height='78' rx='5' fill='white' stroke='%231d1d1d' stroke-width='2.4'/><path d='M3 12 L60 50 L117 12' stroke='%231d1d1d' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  transform: rotate(-6deg);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.2));
}

/* Carousel dot under the hero card */
.dm-article-hero-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.dm-article-hero-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1d1d1d;
}

/* ===== Body + sticky TOC aside ===== */
.dm-article-body-section {
  padding: clamp(24px, 3vw, 48px) clamp(20px, 4vw, 80px) clamp(60px, 6vw, 100px);
}
.dm-article-body-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(40px, 5vw, 80px);
  align-items: flex-start;
}
/* When a post has no headings there is no TOC — let the body span full width. */
.dm-article-body-wrap--notoc { grid-template-columns: minmax(0, 1fr); }
.dm-article-body {
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
  max-width: 820px;
}
.dm-article-body h2 {
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.3px;
  color: #fff;
  margin: 36px 0 14px;
  scroll-margin-top: 100px;
}
.dm-article-body p {
  margin: 0 0 20px;
  color: #fff;
}
.dm-article-body p:last-child { margin-bottom: 0; }
.dm-article-body a {
  color: var(--color-coral, #fe7c5d);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.dm-article-body a:hover { text-decoration-thickness: 2px; }
.dm-article-body ::selection { background: rgba(254, 124, 93, 0.45); color: #fff; }

/* Content images must never exceed the reading column. Without this a wide image
   renders at its intrinsic width (base.css only sets `display: block`, no cap), so
   it overflowed the 820px body and slid under the sticky Table of Contents. Covers
   both a bare <img> and a wrapping <figure class="wp-block-image">. */
.dm-article-body img {
  max-width: 100%;
  height: auto;
}
.dm-article-body figure {
  max-width: 100%;
  margin: 28px 0 32px;                 /* `* { margin: 0 }` left figures with none */
}
.dm-article-body figure img {
  display: block;
  width: 100%;
  border-radius: var(--radius-card-md, 24px);
}
.dm-article-body figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

/* ===== Sticky TOC card (cream) ===== */
.dm-article-aside {
  position: sticky;
  top: 100px;
  align-self: flex-start;
}
.dm-article-toc-card {
  padding: 24px 26px;
  background: var(--color-bg-cream, #fcf8f5);
  color: #1d1d1d;
  border-radius: 18px;
}
.dm-article-toc-title {
  margin: 0 0 14px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.3px;
  color: #1d1d1d;
}
.dm-article-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dm-article-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: #2e2e2e;
  text-decoration: none;
  transition: color .15s ease;
}
.dm-article-toc-list a::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-top: 6px;
  border-radius: 50%;
  background: #1d1d1d;
  transition: background .15s ease;
}
.dm-article-toc-list a:hover { color: var(--color-coral, #fe7c5d); }
.dm-article-toc-list a:hover::before { background: var(--color-coral, #fe7c5d); }
.dm-article-toc-list a.dm-article-toc-active {
  color: var(--color-coral, #fe7c5d);
  font-weight: 600;
}
.dm-article-toc-list a.dm-article-toc-active::before { background: var(--color-coral, #fe7c5d); }

/* ===== Related articles — plain dark section (reuses .dm-seo-articles) ===== */
.dm-article-related {
  padding: clamp(40px, 5vw, 80px) clamp(20px, 4vw, 80px) clamp(60px, 6vw, 100px);
}

/* ===== Tablet <=1100px ===== */
@media (max-width: 1100px) {
  .dm-article-hero-card { grid-template-columns: 1fr; gap: 32px; }
  .dm-article-hero-illus { aspect-ratio: 16 / 9; max-height: 300px; }

  .dm-article-body-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .dm-article-aside {
    position: static;
    order: -1;
  }
}

/* ===== Mobile <=700px ===== */
@media (max-width: 700px) {
  .dm-article-hero { padding: 32px 14px 14px; }
  .dm-article-hero-card { padding: 26px 22px; border-radius: 20px; }
  .dm-article-hero-title { font-size: 24px; }
  .dm-article-hero-illus { border-radius: 14px; }

  .dm-article-body-section { padding: 20px 14px 48px; }
  .dm-article-body h2 { font-size: 22px; margin: 28px 0 12px; }
}

/* --- privacy-policy.css --- */
/* ==========================================================================
   Legal pages — shared styles (Privacy Policy + Terms & Conditions)
   Namespace: .dm-legal-*
   Matches Figma: cream rounded title "chip" with a soft glow, wide content
   with ~200px side padding, generous top spacing (~184px from frame top),
   coral numbered section headings, white body copy on the dark site bg.
   NOTE: terms-conditions.css intentionally holds no rules — both pages share
   this file.
   ========================================================================== */

.dm-legal {
  background: var(--color-bg, #1d1d1d);
  color: #fff;
  /* top spacing brings the title ~184px below the frame top (incl. 76px nav) */
  padding: clamp(72px, 9vw, 130px) var(--dm-gutter-content) clamp(60px, 7vw, 100px);
  font-family: var(--font-body, 'Inter', sans-serif);
}

/* ===== Title chip — cream rounded box with soft glow ===== */
.dm-legal-title {
  display: inline-block;
  background: var(--color-bg-cream, #fcf8f5);
  color: #1d1d1d;
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  padding: 14px 28px;
  border-radius: 20px;
  margin: 0 0 clamp(28px, 3vw, 44px);
  /* soft cream halo + subtle drop shadow, mirrors the Figma "texture" glow */
  box-shadow:
    0 0 60px rgba(252, 248, 245, 0.22),
    0 14px 40px rgba(0, 0, 0, 0.30);
}

/* ===== Intro paragraphs (privacy lead) ===== */
.dm-legal-intro {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(15px, 1vw, 16px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 16px;
}

/* ===== Numbered section headings ===== */
.dm-legal-h2 {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.3;
  color: var(--color-coral, #fe7c5d);
  margin: clamp(28px, 3vw, 40px) 0 12px;
}

.dm-legal-p {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(15px, 1vw, 16px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 14px;
}

/* Tight stack of labelled sub-paragraphs (e.g. "Service Providers: ...") */
.dm-legal-p--tight { margin-bottom: 8px; }
.dm-legal-p strong,
.dm-legal-term { font-weight: 600; color: #fff; }

.dm-legal-list {
  margin: 8px 0 14px 22px;
  padding: 0;
}
.dm-legal-list-item {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(15px, 1vw, 16px);
  margin-bottom: 8px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.dm-legal-link {
  color: var(--color-coral, #fe7c5d);
  text-decoration: none;
  transition: opacity .2s ease;
}
.dm-legal-link:hover { opacity: .8; text-decoration: underline; }

/* Contact block (privacy §8) — slightly tighter line spacing */
.dm-legal-contact .dm-legal-p { margin-bottom: 6px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 600px) {
  .dm-legal-title { padding: 12px 20px; border-radius: 16px; }
}

/* --- terms-conditions.css --- */
/* Terms & Conditions shares the legal styles defined in privacy-policy.css
   (the .dm-legal-* namespace). No rules here on purpose — keeping them in one
   place avoids the duplicate/cascade conflicts we had before. */

/* --- error-404.css --- */
/* ==========================================================================
   404 / Page Not Found  (templates/404.html)
   Namespace: .dm-404-*
   Matches Figma: cream tilted "ERROR" chip with glow, warning + "Page Not
   Found" heading, big outline 4s flanking a coral ellipse "0", subtext, and
   a coral "Go Back to Home" pill. Dark site bg.
   ========================================================================== */

.dm-404 {
  background: var(--color-bg, #1d1d1d);
  color: #fff;
  text-align: center;
  padding: clamp(48px, 6vw, 90px) clamp(20px, 4vw, 80px) clamp(70px, 7vw, 110px);
  font-family: var(--font-body, 'Inter', sans-serif);
}

/* ===== Tilted "ERROR" chip ===== */
.dm-404-badge {
  display: inline-block;
  background: var(--color-bg-cream, #fcf8f5);
  color: #1d1d1d;
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: 0.02em;
  padding: 10px 22px;
  border-radius: 16px;
  transform: rotate(-8deg);
  box-shadow:
    0 0 50px rgba(252, 248, 245, 0.22),
    0 12px 34px rgba(0, 0, 0, 0.30);
}

/* ===== Heading ===== */
.dm-404-title {
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #fff;
}
.dm-404-warn { font-size: 0.9em; }

/* ===== Big 4 0 4 ===== */
.dm-404-digits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 24px);
  margin: clamp(24px, 3vw, 48px) 0 clamp(24px, 3vw, 44px);
}
.dm-404-digit {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-weight: 700;
  line-height: 1;
}
/* Outline 4s: transparent fill, white stroke */
.dm-404-digit--4 {
  font-size: clamp(140px, 22vw, 300px);
  color: transparent;
  -webkit-text-stroke: 2px #fff;
  text-stroke: 2px #fff;
}
/* Coral ellipse "0" with an inset white ring */
.dm-404-zero {
  width: clamp(95px, 15vw, 210px);
  height: clamp(140px, 22vw, 300px);
  border-radius: 50%;
  background: var(--color-coral, #fe7c5d);
  box-shadow:
    inset 0 0 0 6px var(--color-coral, #fe7c5d),
    inset 0 0 0 10px #fff;
}

/* ===== Subtext + button ===== */
.dm-404-text {
  margin: 0 auto clamp(22px, 2.4vw, 34px);
  max-width: 520px;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.dm-404-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  background: var(--color-coral, #fe7c5d);
  color: #1d1d1d;
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: clamp(14px, 1vw, 16px);
  border-radius: 999px;
  text-decoration: none;
  transition: transform .2s ease, opacity .2s ease;
}
.dm-404-btn svg { width: 18px; height: 18px; }
.dm-404-btn:hover { transform: translateY(-2px); opacity: .94; }

/* ===== Mobile ===== */
@media (max-width: 600px) {
  .dm-404-digits { gap: 6px; }
  .dm-404-badge { font-size: 18px; padding: 8px 18px; }
}

/* --- html-sitemap.css --- */
/* HTML sitemap page (/html-sitemap/)

   The only published page that falls through to the generic templates/page.html,
   which renders raw post_content. That content is a GenerateBlocks dynamic
   headline, a core button, and Rank Math's [rank_math_html_sitemap] shortcode.
   None of those classes are ours, and the theme styled none of them, so the page
   rendered as unstyled text on the dark background.

   We cannot change the markup (it is plugin output), so we style the classes it
   emits. Scoped with :has() to the page that actually contains the sitemap, so a
   core button or a stray .gb-headline elsewhere is unaffected. Same trick the
   theme already uses for the light-theme article page.
*/

.dm-page:has(.rank-math-html-sitemap) {
  padding: clamp(48px, 6vw, 96px) var(--dm-pad-x) clamp(60px, 6vw, 100px);
  background: var(--color-bg, #1d1d1d);
  color: var(--color-text-on-dark, #fff);
  font-family: var(--font-body, Inter), sans-serif;
}

.dm-page:has(.rank-math-html-sitemap) .entry-content {
  max-width: var(--dm-content-max);
  margin: 0 auto;
}

/* The dynamic H1 ("Desire Marketing Sitemap"). Hero scale, per the type rule. */
.dm-page:has(.rank-math-html-sitemap) h1 {
  margin: 0 0 16px;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--color-text-on-dark, #fff);
}

/* The core button that ships in the content. Re-skin it as the site's coral pill
   rather than leaving WordPress's default. */
.dm-page:has(.rank-math-html-sitemap) .wp-block-buttons {
  margin: 0 0 clamp(32px, 4vw, 56px);
}
.dm-page:has(.rank-math-html-sitemap) .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 13px 28px;
  background: var(--color-coral, #fe7c5d);
  color: var(--color-text-on-light, #1d1d1d);
  border-radius: var(--radius-pill, 62px);
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  text-decoration: none;
  transition: transform .18s ease, opacity .18s ease;
}
.dm-page:has(.rank-math-html-sitemap) .wp-block-button__link:hover {
  transform: translateY(-1px);
  opacity: .94;
}

/* ===== The sitemap itself ===== */
.rank-math-html-sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2vw, 28px);
  /* Cards size to their own content. Without this the grid stretches every card
     to the tallest, so the 7-link "Pages" card matched the 16-link "Services"
     one and carried a block of dead space. */
  align-items: start;
}

.rank-math-html-sitemap__section {
  background: var(--color-bg-cream, #fcf8f5);
  color: var(--color-text-on-light, #1d1d1d);
  border-radius: var(--radius-card-md, 24px);
  padding: clamp(24px, 2.4vw, 32px);
}

.rank-math-html-sitemap__title {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(29, 29, 29, 0.12);
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  color: var(--color-text-on-light, #1d1d1d);
}

.rank-math-html-sitemap__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rank-math-html-sitemap__item {
  margin: 0;
}

.rank-math-html-sitemap__link {
  display: block;
  padding: 8px 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-muted-light, #2e2e2e);
  text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}
.rank-math-html-sitemap__link:hover {
  color: var(--color-coral, #fe7c5d);
  transform: translateX(2px);
}
.rank-math-html-sitemap__link:focus-visible {
  outline: 2px solid var(--color-coral, #fe7c5d);
  outline-offset: 3px;
  border-radius: var(--radius-sm, 4px);
}

/* Nested lists (child pages) indent rather than restart. */
.rank-math-html-sitemap__list .rank-math-html-sitemap__list {
  margin-left: 14px;
  padding-left: 10px;
  border-left: 1px solid rgba(29, 29, 29, 0.12);
}

@media (max-width: 600px) {
  .rank-math-html-sitemap {
    grid-template-columns: 1fr;
  }
}

/* --- service.css --- */
/* ============================================================
   SERVICE PAGES (16 of them, post_type = service)
   Rendered by dm-templates/single-service.php.

   These pages previously had NO stylesheet. Their only styling was a 51-line
   inline <style> block hardcoded in the template, which capped the content at
   max-width: 820px and ignored the site's container grid entirely. That block is
   now deleted; this file replaces it.

   The body is legacy GenerateBlocks content flattened into core blocks. The
   grouping wrappers died with the plugin, so functions.php > dm_service_content_
   components() regroups the flat markup at render time into:
     .dm-svc-logos   .dm-svc-checks / .dm-svc-check
     .dm-svc-steps   .dm-svc-step   .dm-svc-step-badge
     .dm-svc-faq     .dm-svc-faq-item
   It is a render filter: post_content, the URL set and the SEO meta are untouched.

   Layout: the section pays --dm-pad-x, the inner wrapper caps at --dm-content-max
   (the 1520/1800 grid). Prose then takes a reading measure inside that grid, and
   the component grids break back out to full width. Hardcoding a single 820px
   column, as the old inline block did, is the bug we are fixing.
   ============================================================ */

/* ---------- Hero ---------- */

.dm-service-hero {
  background: var(--color-bg, #1d1d1d);
  color: var(--color-text-on-dark, #fff);
  text-align: center;
  padding: clamp(70px, 8vw, 120px) var(--dm-pad-x) clamp(40px, 4vw, 60px);
}

.dm-service-hero-inner {
  max-width: 900px;
  margin-inline: auto;
}

.dm-service-hero-title {
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;                    /* 700, not 600. 600 is why it read off-brand. */
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.5px;              /* the single most-missed detail on this site */
  margin: 0 0 20px;
  color: var(--color-text-on-dark, #fff);
}

/* The sub-headline runs 274 to 473 characters across the 16 pages. It has to hold
   a paragraph without looking like a mistake, hence the measure and the alpha. */
.dm-service-hero-sub {
  font-family: var(--font-body, Inter), sans-serif;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 auto 30px;
  max-width: 720px;
}

.dm-service-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-coral, #fe7c5d);
  color: var(--color-text-on-light, #1d1d1d);   /* dark on coral, always */
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 999px;
  transition: transform .2s ease, opacity .2s ease;
}
.dm-service-hero-cta:hover { transform: translateY(-1px); opacity: .95; }

/* ---------- Body: the grid ---------- */

.dm-service-body {
  background: var(--color-bg, #1d1d1d);
  color: var(--color-text-on-dark, #fff);
  padding: clamp(40px, 5vw, 70px) var(--dm-pad-x) clamp(60px, 6vw, 100px);
}

.dm-service-body-inner {
  max-width: var(--dm-content-max);
  margin-inline: auto;
  font-family: var(--font-body, Inter), sans-serif;
}

/* Prose takes a reading measure and centres inside the 1520 grid. A 1520px-wide
   paragraph is unreadable; these pages are 26 to 61 paragraphs long. */
.dm-service-body-inner > h2,
.dm-service-body-inner > h3,
.dm-service-body-inner > h4,
.dm-service-body-inner > p,
.dm-service-body-inner > ul,
.dm-service-body-inner > ol,
.dm-service-body-inner > figure {
  max-width: 880px;
  margin-inline: auto;
}

/* ---------- Body: typography ---------- */

.dm-service-body-inner h2 {
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: clamp(48px, 5vw, 72px) auto 18px;
  color: var(--color-text-on-dark, #fff);
}
/* 11 h2s across 6 pages wrap their whole text in <strong>. Without this they
   double up on weight and sit heavier than their neighbours. */
.dm-service-body-inner h2 > strong { font-weight: inherit; }

/* Every top-level h2 is a SECTION heading, so every one centres. An earlier version
   centred an h2 only when a component grid happened to follow it, which made the
   alignment a lottery: "Testimonials from Clients" was centred on some pages and hard
   left on others. Headings inside a media row are NOT section headings and stay left
   (see .dm-svc-media-copy). */
.dm-service-body-inner > h2 { text-align: center; }

/* The lede under a section heading centres with it. Anything further down is running
   prose and stays left: get-dr90-backlinks had four multi-sentence paragraphs centred
   and ragged, which nothing else on the site does. */
.dm-service-body-inner > h2 + p,
.dm-service-body-inner > h2 + p.has-text-align-center {
  text-align: center;
  max-width: 780px;
}
.dm-service-body-inner > p.has-text-align-center { text-align: left; }
.dm-service-body-inner > h2 + p.has-text-align-center { text-align: center; }

.dm-service-body-inner h3 {
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 1.6vw, 26px);
  line-height: 1.25;
  margin: 34px auto 12px;
  color: var(--color-text-on-dark, #fff);
}

/* 45 h4s across 9 pages had NO rule at all: they fell to the UA default of 1em
   bold, which made them SMALLER than the paragraphs around them. */
.dm-service-body-inner h4 {
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 1.2vw, 20px);
  line-height: 1.3;
  margin: 26px auto 10px;
  color: var(--color-text-on-dark, #fff);
}

.dm-service-body-inner p {
  font-size: 16px;
  line-height: 1.7;                              /* long-form measure */
  margin: 0 auto 20px;
  color: rgba(255, 255, 255, 0.85);              /* the alpha ramp, not flat #c3c3c3 */
}

/* The lede under a section heading is centred in the content and reads lighter. */
.dm-service-body-inner p.has-text-align-center {
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 40px;
}

/* 4 empty paragraphs across 4 pages leave a phantom 20px gap. */
.dm-service-body-inner p:empty { display: none; }

.dm-service-body-inner a {
  color: var(--color-coral, #fe7c5d);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.dm-service-body-inner a:hover { text-decoration-thickness: 2px; }

.dm-service-body-inner ul,
.dm-service-body-inner ol {
  margin: 0 auto 22px;
  padding-left: 22px;
  color: rgba(255, 255, 255, 0.85);
}
.dm-service-body-inner li {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 8px;
}
.dm-service-body-inner li::marker { color: var(--color-coral, #fe7c5d); }

/* ---------- FIX: the invisible headings ----------
   24 <mark> spans across all 16 pages carry class="has-accent-color". That slug
   does not exist in this theme's palette, so WordPress emits no rule for it and
   the browser falls back to its default: mark { color: black }. The inline
   background-color:rgba(0,0,0,0) then removes the yellow that would have revealed
   it. Net result: BLACK TEXT ON #1d1d1d. Every one of these headings was
   invisible. Production rendered them in its teal accent; ours is coral. */
.dm-service-body-inner mark,
.dm-service-body-inner .has-accent-color,
.dm-service-body-inner .gb-highlight {
  background: transparent !important;   /* beats the inline rgba(0,0,0,0) either way */
  color: var(--color-coral, #fe7c5d);
  padding: 0;
}
/* saas-link-building nests a mark inside a mark. Don't double-tint it. */
.dm-service-body-inner mark mark { color: inherit; }

/* ---------- FIX: the check / numbered icons ----------
   base.css sets `img, svg { display: block }`. Nothing overrode it for these, so
   all 74 check icons became block boxes inside an inline span and took their own
   line, pushing the heading text down. They were also hardcoded at 16px, so they
   did not scale with the heading.

   These selectors are scoped to h3:has(.bi), i.e. the Bootstrap check/numbered
   icons ONLY. They must NOT reach the accordion chevrons.

   accordion.css runs an icon state machine on .gb-accordion__icon /
   .gb-accordion__icon-open (show exactly one, by aria-expanded) at specificity
   (0,2,0). An earlier draft of this file styled `.dm-service-body-inner .gb-icon
   svg` at (0,2,1), which out-specified it and silently un-hid BOTH chevrons on
   all 57 accordions. The accordion icons carry .gb-accordion__icon and never
   .bi, so :has(.bi) is the discriminator that keeps the two apart. */
.dm-service-body-inner h3:has(.bi) {
  display: flex;
  align-items: flex-start;
  column-gap: 0.5em;
}
.dm-service-body-inner h3:has(.bi) .gb-icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
  padding-top: 0.18em;                  /* sits the circle on the cap-height */
  color: var(--color-coral, #fe7c5d);
}
.dm-service-body-inner h3:has(.bi) .gb-icon svg {
  display: inline-block;                /* undoes base.css `svg { display: block }` */
  width: 1em;
  height: 1em;                          /* scales WITH the heading, not fixed at 16px */
  fill: currentColor;
}

.dm-svc-check h3 { margin: 0 0 10px; }

/* ---------- Checkmark feature grid (74 items, all 16 pages) ----------
   Production laid these out 2-across in cards. Flattened, they had become a
   vertical run of broken headings. */
.dm-svc-checks {
  max-width: 1320px;
  margin: 8px auto 56px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
}
/* seo-services has two check features that each stand alone. A single card in a
   2-col grid would sit at half width looking orphaned. */
.dm-svc-checks:has(> :only-child) { grid-template-columns: 1fr; }
/* The checkerboard. This is the site's signature feature grid (.dm-seo-trust on
   /seo/ and /link-building/): cards alternate WHITE and CORAL, strictly. Uniform
   dark cards on a dark page is what "unstyled" looks like; the alternation is what
   makes the section read as designed. CLAUDE.md rule 11 says reuse this, not
   reinvent it. */
.dm-svc-check {
  border-radius: 22px;
  padding: clamp(26px, 2.4vw, 36px) clamp(22px, 2vw, 32px);
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dm-svc-check:nth-child(odd)  { background: var(--color-bg-white, #fff);   color: var(--color-text-on-light, #1d1d1d); }
.dm-svc-check:nth-child(even) { background: var(--color-coral, #fe7c5d);   color: var(--color-text-on-light, #1d1d1d); }
.dm-svc-check:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}
.dm-svc-check h3 { color: inherit; }
.dm-svc-check p {
  margin: 0 0 12px;                    /* NOT 0: consecutive paragraphs ran together */
  max-width: none;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(29, 29, 29, 0.78);       /* dark on white AND on coral */
}
.dm-svc-check p:last-child { margin-bottom: 0; }
.dm-svc-check ul,
.dm-svc-check ol { max-width: none; margin: 0 0 12px; padding-left: 18px; color: rgba(29,29,29,0.78); }
.dm-svc-check li { font-size: 14px; line-height: 1.55; margin-bottom: 5px; }
.dm-svc-check li::marker { color: inherit; }
/* On a white card the coral check reads. On a coral card it would not, so it flips. */
.dm-svc-check:nth-child(odd)  h3 .gb-icon { color: var(--color-coral, #fe7c5d); }
.dm-svc-check:nth-child(even) h3 .gb-icon { color: var(--color-text-on-light, #1d1d1d); }

/* A lone last card. Spanning the full row gave it a ~1250px line measure, roughly
   twice the measure of any other text on the site, so it read as a stretched banner.
   Centre it at one column's width instead. */
.dm-svc-check:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc(50% - 10px);
  margin-inline: auto;
}

/* ---------- Feature grid: the service list ----------
   Runs of 4+ plain h3+paragraph pairs are a list of services, not prose. Flattened,
   technical-seo-service rendered twelve of them as a 1000px wall of text in a single
   column. As a card grid it reads as what it is. Dark elevated cards with a hairline,
   so they sit under the white/coral checkerboard without competing with it. */
.dm-svc-features {
  max-width: 1320px;
  margin: 8px auto 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}
.dm-svc-feature {
  background: rgba(255, 255, 255, 0.04);        /* a 4% lift, not #1d1d1d on #1d1d1d */
  border: 1px solid rgba(255, 255, 255, 0.08);  /* the hairline is what separates it */
  border-radius: 18px;
  padding: clamp(22px, 2vw, 30px) clamp(20px, 1.8vw, 26px);
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dm-svc-feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  border-color: rgba(254, 124, 93, 0.35);
}
.dm-svc-feature h3 {
  margin: 0 0 10px;
  max-width: none;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.3;
}
.dm-svc-feature p {
  margin: 0 0 10px;
  max-width: none;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.dm-svc-feature p:last-child { margin-bottom: 0; }

/* Card-count shaping, so no card is ever stranded alone on a 3-col last row.
   4 cards -> 2x2 (a lone 4th on a 3-col grid looks unfinished; .dm-svc-steps
   already does this for four). The :not(:nth-child(5)) guard keeps this from
   matching 4-card PREFIXES of longer grids. */
.dm-svc-features:has(> .dm-svc-feature:nth-child(4)):not(:has(> .dm-svc-feature:nth-child(5))) {
  grid-template-columns: repeat(2, 1fr);
}
/* A count that leaves exactly ONE card on the last 3-col row (7, 10, 13, ...):
   centre that lone card at one column's width rather than spanning it wide.
   Excluded from the 4-card case above, which is handled as 2x2. */
.dm-svc-features:has(> .dm-svc-feature:nth-child(5)) .dm-svc-feature:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
  max-width: calc(33.333% - 12px);
  margin-inline: auto;
}
.dm-svc-feature ul,
.dm-svc-feature ol {
  max-width: none;
  margin: 0 0 4px;
  padding-left: 18px;
}
.dm-svc-feature li {
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- Process steps (20 across 6 pages) ----------
   Production: 3-across white cards, each with an accent pill badge overhanging the
   top-left corner. Flattened, "Step 1" had become a bare grey paragraph. */
.dm-svc-steps {
  max-width: 1320px;
  margin: 8px auto 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
/* Two pages have 4 steps. In a 3-col grid that strands the 4th on its own row at
   a third of the width. 2x2 is the honest shape for four. */
.dm-svc-steps:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
.dm-svc-step {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: clamp(26px, 2.2vw, 34px) clamp(22px, 1.8vw, 28px) clamp(22px, 2vw, 30px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.dm-svc-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.dm-svc-step p.dm-svc-step-badge,
.dm-svc-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-coral, #fe7c5d);
  color: var(--color-text-on-light, #1d1d1d);
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 7px 14px;
  border-radius: 999px;
  margin: 0 0 14px !important;
  max-width: none !important;
  /* Must out-specify `.dm-svc-step p`, which sets rgba(255,255,255,.72). White at
     72% on coral is 1.97:1, i.e. unreadable. Dark on coral is 7.4:1. */
  color: var(--color-text-on-light, #1d1d1d) !important;
}
.dm-svc-step h3 {
  margin: 0 0 10px;
  font-size: clamp(18px, 1.4vw, 22px);
}
.dm-svc-step p {
  margin: 0 0 10px;
  max-width: none;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.dm-svc-step p:last-child { margin-bottom: 0; }
.dm-svc-step ul { max-width: none; margin-bottom: 0; }

/* ---------- Client logo strip (35 images, 7 pages) ----------
   These were rendering as five 820px-wide photographs with 24px rounded corners,
   stacked vertically. It was the ugliest thing on the pages. Production: 5-across,
   100px, desaturated, colourising on hover. */
.dm-svc-logos {
  max-width: 1100px;
  margin: 10px auto 56px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
/* These selectors must out-specify the content-image rule below
   (.dm-service-body-inner figure.wp-block-image img), or the logos inherit its
   width:100% and 12px radius and blow up to the full column. */
.dm-service-body-inner .dm-svc-logos figure.wp-block-image {
  margin: 0;
  max-width: none;
  flex: 0 0 auto;
}
.dm-service-body-inner .dm-svc-logos figure.wp-block-image img {
  width: 100px;
  height: auto;
  border-radius: 0;                    /* NOT the content-image radius */
  /* These are DARK logo PNGs on transparency. Production greyscaled them because
     production was a LIGHT theme. On #1d1d1d, grayscale() strips the only channel
     that made them legible and they vanish into the background. Knock them out to
     white instead, and reveal the real artwork on hover. */
  filter: brightness(0) invert(1);
  opacity: .7;
  transition: transform .25s ease, filter .25s ease, opacity .25s ease;
}
.dm-service-body-inner .dm-svc-logos figure.wp-block-image img:hover {
  transform: scale(1.08);
  filter: none;                        /* the logo's real colours */
  opacity: 1;
}

/* ---------- FAQ (57 accordions, all 16 pages) ----------
   accordion.js already builds the toggle and the panel and collapses them; it
   deliberately sets no colour or type. This is the skin. Closed it is a pill,
   open it becomes a card: that morph is the move the reference pages use. */
.dm-svc-faq {
  max-width: 880px;
  margin: 10px auto 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dm-svc-faq-item {
  background: var(--color-bg-white, #fff);
  color: var(--color-text-on-light, #1d1d1d);
  border-radius: 999px;                /* CLOSED: a pill */
  padding: 0 26px;
  transition: border-radius .2s ease;
}
.dm-svc-faq-item:has(.dm-accordion__toggle[aria-expanded="true"]) {
  border-radius: 24px;                 /* OPEN: a card */
  padding-bottom: 4px;
}
/* The h3 is the row. It is not a heading in the visual hierarchy any more. */
.dm-svc-faq-item h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  color: inherit;
}
.dm-svc-faq .dm-accordion__toggle {
  flex-direction: row-reverse;         /* chevron to the RIGHT, as production had it */
  justify-content: space-between;
  padding: 17px 0;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  color: inherit;
}
.dm-svc-faq .dm-accordion__toggle .gb-icon {
  color: var(--color-coral, #fe7c5d);
  font-size: 15px;
  transition: transform .2s ease;
}
.dm-svc-faq .dm-accordion__panel {
  padding: 0 0 16px;
}
.dm-svc-faq .dm-accordion__panel p {
  margin: 0;
  max-width: none;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(29, 29, 29, 0.78);       /* dark text: this card is white */
}
.dm-svc-faq .dm-accordion__panel ul,
.dm-svc-faq .dm-accordion__panel ol {
  max-width: none;
  margin-bottom: 0;
  color: rgba(29, 29, 29, 0.78);
}
.dm-svc-faq .dm-accordion__panel li::marker { color: var(--color-coral, #fe7c5d); }

/* Orphaned "01" / "02" list markers, tagged by the content filter. Their list died
   with the plugin; without this they render as a bare numeral in the body copy. */
.dm-service-body-inner p.dm-svc-ordinal {
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-coral, #fe7c5d);
  margin: 34px auto 6px;
}

/* get-dr90-backlinks is the only page whose FAQ has no heading above it, so the
   pills would read as part of the card grid they follow. Give the seam some air. */
.dm-svc-checks + .dm-svc-faq,
.dm-svc-steps + .dm-svc-faq {
  margin-top: clamp(48px, 5vw, 72px);
}

/* ---------- Media rows: copy beside its image (50/50) ----------
   Production laid every h2 + prose + image group out as a 50/50 media-and-text
   grid. The grouping died with GenerateBlocks, so the images became full-width
   slabs stacked under a wall of text: on technical-seo-service that meant the SAME
   illustration rendered twice in a row at 880px. Restoring the pairing is the
   single biggest reason these pages now read as designed rather than as a document.
   Rows alternate side, so the page has a rhythm instead of a single left rail. */
.dm-svc-media {
  max-width: 1320px;
  margin: clamp(48px, 5vw, 72px) auto clamp(40px, 4vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
/* Every other row flips, so the images zig-zag down the page instead of forming a
   single right-hand rail. The flip is a CLASS set by the content filter, not
   :nth-of-type, because nth-of-type counts every sibling div (the checks grid, the
   FAQ, the Clutch widget) and so does not track media rows. */
.dm-svc-media--flip .dm-svc-media-copy { order: 2; }

.dm-svc-media-copy > :first-child { margin-top: 0; }
.dm-svc-media-copy > :last-child  { margin-bottom: 0; }
.dm-svc-media-copy h2,
.dm-svc-media-copy h3,
.dm-svc-media-copy h4,
.dm-svc-media-copy p,
.dm-svc-media-copy ul,
.dm-svc-media-copy ol {
  max-width: none;                     /* the column IS the measure now */
  margin-inline: 0;
  text-align: left;
}
.dm-svc-media-copy h2 { margin-top: 0; }

.dm-svc-media-fig figure.wp-block-image { margin: 0; max-width: none; }
.dm-svc-media-fig img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card-md, 24px);
}

/* ---------- Images ---------- */

.dm-service-body-inner figure.wp-block-image {
  margin: 28px auto 32px;              /* `* { margin: 0 }` left figures with none */
}
.dm-service-body-inner figure.wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;                 /* production used 10px, not the 24px card radius */
}
.dm-service-body-inner figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/* ---------- FIX: the flex bomb (get-dr90-backlinks, guest-posting-service) ----------
   Two pages carry a `wp-block-group is-layout-flex` wrapper. On production it was
   inert, because GeneratePress never shipped core's layout stylesheet. The block
   theme DOES ship it, so 8 to 9 headings, paragraphs and figures collapsed into a
   single centred wrapping flex row with all their margins stripped. This is a
   migration regression, not a legacy quirk. */
.dm-service-body-inner .wp-block-group.is-layout-flex,
.dm-service-body-inner .wp-block-group-is-layout-flex {
  display: block;
  gap: 0;
}
.dm-service-body-inner .wp-block-group.is-layout-flex > * {
  max-width: 880px;
  margin-inline: auto;
}
.dm-service-body-inner .wp-block-group.is-layout-flex > h2 { margin-block: clamp(48px, 5vw, 72px) 18px; }
.dm-service-body-inner .wp-block-group.is-layout-flex > h3 { margin-block: 34px 12px; }
.dm-service-body-inner .wp-block-group.is-layout-flex > p  { margin-block: 0 20px; }

/* ---------- Clutch review widget (16 pages) ----------
   The widget injects an iframe at runtime. Reserve its height so it does not
   shift the page, and give it a surface to sit on: a raw white iframe on a dark
   page reads as a bug. */
.dm-service-body-inner .clutch-widget {
  max-width: 1100px;
  margin: 8px auto 56px;
}
/* NO background of our own, ever.
   An earlier version painted a white card here. The vendor script DOES inject its
   iframe (so a :has(iframe) guard fires) but the iframe frequently paints nothing,
   and the result was a 618px blank WHITE SLAB in the middle of a dark page: the
   most conspicuous thing that could possibly go wrong. The widget brings its own
   white surface when it renders. If it renders nothing, we show nothing. */
.dm-service-body-inner .clutch-widget iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  border: 0;
  border-radius: var(--radius-card-md, 24px);
}

/* ---------- Responsive: 1100 / 700 / 380, the theme's real ladder ---------- */

@media (max-width: 1100px) {
  .dm-svc-steps    { grid-template-columns: repeat(2, 1fr); }
  .dm-svc-checks   { grid-template-columns: repeat(2, 1fr); }
  .dm-svc-features { grid-template-columns: repeat(2, 1fr); }
  .dm-svc-logos  { gap: clamp(20px, 3vw, 40px); }
  .dm-svc-media  { gap: clamp(24px, 3vw, 40px); }
}

@media (max-width: 700px) {
  .dm-service-hero { padding-top: clamp(48px, 10vw, 70px); }
  .dm-service-hero-title { font-size: clamp(24px, 7vw, 34px); letter-spacing: -0.3px; }
  .dm-service-hero-sub { font-size: 14px; }
  .dm-service-hero-cta { padding: 12px 24px; font-size: 14px; }

  .dm-svc-checks,
  .dm-svc-features,
  .dm-svc-steps { grid-template-columns: 1fr; gap: 14px; }
  .dm-svc-check { min-height: 0; }

  /* Stack the media row: heading and copy FIRST, image under it. An earlier version
     put the image first, which made it read as a hero image for the PREVIOUS section
     rather than as an illustration of the copy beside it. */
  .dm-svc-media { grid-template-columns: 1fr; gap: 22px; }
  .dm-svc-media .dm-svc-media-copy,
  .dm-svc-media--flip .dm-svc-media-copy { order: 1; }
  .dm-svc-media .dm-svc-media-fig { order: 2; }

  .dm-service-body-inner h2 { letter-spacing: -0.3px; }
  .dm-service-body-inner p,
  .dm-service-body-inner li { font-size: 15px; }

  .dm-service-body-inner .dm-svc-logos figure.wp-block-image img { width: 80px; }

  .dm-svc-faq-item { border-radius: 18px; padding: 0 20px; }
  .dm-svc-faq .dm-accordion__toggle { font-size: 14px; padding: 14px 0; }
  .dm-svc-faq-item h3 { font-size: 14px; }

  .dm-service-body-inner .clutch-widget { padding: 8px; border-radius: 18px; }
}

@media (max-width: 380px) {
  .dm-service-hero-title { font-size: 22px; }
  /* 5 x 52 + 4 x 16 = 324px, which fits the 333px column. At 70px/20px it wrapped
     to two rows. */
  .dm-svc-logos { gap: 16px; }
  .dm-service-body-inner .dm-svc-logos figure.wp-block-image img { width: 52px; }
}

/* ---------- Closing CTA ----------
   The coral "Partner with us" stats card, reused from the homepage/reference pages
   as the service pages' closing conversion moment (they previously dropped straight
   into the footer). The card itself is styled by .dm-partner-* in the components
   head; this adds the section padding and the Contact button, which must be DARK
   because a coral pill on a coral card would vanish. */
.dm-service-cta {
  background: var(--color-bg, #1d1d1d);
  padding: clamp(20px, 4vw, 60px) var(--dm-pad-x) clamp(60px, 6vw, 100px);
}
.dm-service-cta .dm-partner-card {
  max-width: var(--dm-content-max);
  margin-inline: auto;
}
.dm-service-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 3vw, 40px);
  padding: 15px 32px;
  background: var(--color-bg, #1d1d1d);
  color: var(--color-text-on-dark, #fff);
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border-radius: 999px;
  transition: transform .2s ease, opacity .2s ease;
}
.dm-service-cta-btn:hover { transform: translateY(-1px); opacity: .92; }
.dm-service-cta-btn svg path { stroke: #fff; }

/* --- author.css --- */
/* ============================================================
   AUTHOR ARCHIVE (/author/<slug>/)
   Rendered by dm-templates/author.php.

   Production shows a branded author landing page (name + bio + services + CTA),
   NOT a list of the author's posts. This styles that. Author archives are
   noindex, so this is a courtesy page, not an indexable archive.
   ============================================================ */

.dm-author-hero {
  background: var(--color-bg, #1d1d1d);
  color: var(--color-text-on-dark, #fff);
  text-align: center;
  padding: clamp(70px, 8vw, 120px) var(--dm-pad-x) clamp(30px, 3vw, 48px);
}
.dm-author-hero-inner {
  max-width: 820px;
  margin-inline: auto;
}
.dm-author-eyebrow {
  display: inline-block;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-coral, #fe7c5d);
  margin-bottom: 14px;
}
.dm-author-name {
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--color-text-on-dark, #fff);
}
.dm-author-bio {
  margin-top: 18px;
  font-family: var(--font-body, Inter), sans-serif;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}
.dm-author-bio a { color: var(--color-coral, #fe7c5d); text-decoration: underline; text-underline-offset: 3px; }
.dm-author-bio p:last-child { margin-bottom: 0; }

/* ---------- Services grid ---------- */
.dm-author-services {
  background: var(--color-bg, #1d1d1d);
  padding: clamp(30px, 4vw, 56px) var(--dm-pad-x) clamp(40px, 5vw, 70px);
}
.dm-author-services-inner {
  max-width: var(--dm-content-max);
  margin-inline: auto;
}
.dm-author-services-title {
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  text-align: center;
  color: var(--color-text-on-dark, #fff);
  margin: 0 0 clamp(28px, 3vw, 44px);
}
.dm-author-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* The three kept services: a clean single row, wider cards. */
.dm-author-services-grid--three { max-width: 1080px; margin-inline: auto; }
.dm-author-service {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: clamp(22px, 2vw, 30px) clamp(20px, 1.8vw, 26px);
  text-decoration: none;
  color: var(--color-text-on-dark, #fff);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dm-author-service:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  border-color: rgba(254, 124, 93, 0.35);
}
.dm-author-service-name {
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.3;
  margin: 0 0 8px;
  color: inherit;
}
.dm-author-service-desc {
  font-family: var(--font-body, Inter), sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 14px;
}
.dm-author-service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-family: var(--font-display, Poppins), sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-coral, #fe7c5d);
}
.dm-author-service:hover .dm-author-service-link { gap: 9px; }

/* 16 services leave one card alone on the last 3-col row. Centre it at one
   column's width rather than letting it sit stranded at the left. */
.dm-author-service:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
  max-width: calc(33.333% - 12px);
  margin-inline: auto;
}

@media (max-width: 1100px) {
  .dm-author-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .dm-author-services-grid { grid-template-columns: 1fr; gap: 14px; }
  .dm-author-name { letter-spacing: -0.3px; }
}