/* ==========================================================================
   DMU Construction — WordPress theme additions

   Styles for the dynamic components the WordPress build adds on top of the
   static design: team, testimonials, statistics, FAQ accordion, blog, single
   post/CPT bodies, AJAX filters, AJAX form states, and shared helpers. Uses
   the design system's tokens (index.css :root) so everything sits on the same
   scale, colour, type and motion as the original pages.
   ========================================================================== */

/* ---- Shared helpers ------------------------------------------------------ */

.dmu-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.dmu-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(40px, 6vw, 80px) 0;
  color: var(--dmu-muted);
  font-family: var(--font-ui);
}

.dmu-single {
  background: var(--dmu-paper);
  padding-block: var(--sp-section);
}
.dmu-single--project { background: var(--dmu-sand); }
.dmu-single__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.dmu-single__body,
.dmu-prose {
  max-width: 72ch;
  color: var(--dmu-body);
  font-family: var(--font-ui);
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.125rem);
  line-height: 1.78;
}
.dmu-prose > * + * { margin-top: 1.1em; }
.dmu-single__body h2,
.dmu-single__subhead,
.dmu-prose h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--dmu-navy);
  font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-top: 1.6em;
}
.dmu-single__subhead { margin-bottom: 0.8em; }
.dmu-prose h3 { font-family: var(--font-display); color: var(--dmu-navy); font-weight: 500; }
.dmu-prose a { color: var(--dmu-red); text-decoration: underline; }
.dmu-prose img { max-width: 100%; height: auto; border-radius: 4px; }
.dmu-prose blockquote {
  border-left: 3px solid var(--dmu-red);
  padding-left: 1.2em;
  color: var(--dmu-ink);
  font-style: italic;
}

/* Restore proper list rendering inside prose (the global reset strips it). */
.dmu-prose ul,
.dmu-prose ol {
  margin: 0;
  padding-left: 1.35em;
  display: block;
}
.dmu-prose ul { list-style: disc; }
.dmu-prose ol { list-style: decimal; }
.dmu-prose li { list-style: inherit; }
.dmu-prose li + li { margin-top: 0.55em; }
.dmu-prose li::marker { color: var(--dmu-red); }
.dmu-prose strong { color: var(--dmu-ink); font-weight: 600; }

/* ---- Inner-page masthead (neutral alias, no services.css dependency) ----- */
/* The masthead component emits `.dmu-masthead*` alias classes. On services /
   projects / contact those are backed by their page CSS; on plain pages
   (Privacy Policy etc.) only index.css + theme.css load, so back the aliases
   here with a self-contained, compact overlaid band. */

.dmu-masthead {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(240px, 26vw, 340px);
  padding-top: calc(var(--header-h) + clamp(24px, 3vw, 40px));
  padding-bottom: clamp(32px, 4vw, 56px);
  background: var(--dmu-navy);
  isolation: isolate;
  overflow: hidden;
}
.dmu-masthead__media { position: absolute; inset: 0; z-index: 0; }
.dmu-masthead__media img { width: 100%; height: 100%; object-fit: cover; }
.dmu-masthead__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(26, 28, 43, .82) 0%, rgba(26, 28, 43, .52) 50%, rgba(26, 28, 43, .92) 100%),
    linear-gradient(90deg, rgba(26, 28, 43, .82) 0%, rgba(26, 28, 43, 0) 72%);
}
.dmu-masthead__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.dmu-crumbs { margin-bottom: clamp(14px, 1.8vw, 22px); }
.dmu-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dmu-crumbs li {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.dmu-crumbs li + li::before {
  content: "/";
  margin-right: 10px;
  color: rgba(255, 255, 255, .34);
}
.dmu-crumbs a { color: rgba(255, 255, 255, .62); transition: color var(--dur-base) var(--ease-out); }
.dmu-crumbs a:hover { color: #fff; }
.dmu-crumbs [aria-current="page"] { color: #fff; }
.dmu-masthead__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #fff;
}
.dmu-masthead__eyebrow::before {
  content: "";
  width: clamp(32px, 5vw, 64px);
  height: 3px;
  background: var(--dmu-red);
  flex: none;
}
.dmu-masthead__heading {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 40px rgba(15, 16, 26, .35);
}
.dmu-masthead__lead {
  max-width: 60ch;
  margin-top: clamp(16px, 2vw, 24px);
  font-family: var(--font-ui);
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: rgba(255, 255, 255, .8);
}

/* ---- Legal / plain content pages (Privacy Policy, Terms, etc.) ----------- */
/* Generic pages get `body.dmu-inner-page`; give their prose a proper,
   readable legal-document treatment sitting on a light panel. */

.dmu-inner-page .dmu-single {
  background: var(--dmu-sand);
}
.dmu-inner-page .dmu-prose {
  max-width: none;
  margin-inline: auto;
  color: var(--dmu-ink);
  background: var(--dmu-paper);
  border: 1px solid var(--dmu-line);
  border-radius: 12px;
  padding: clamp(28px, 4.5vw, 64px);
  box-shadow: 0 24px 60px -40px rgba(42, 47, 82, 0.4);
}
/* Stronger, darker body copy than the default washed-out grey. */
.dmu-inner-page .dmu-prose p,
.dmu-inner-page .dmu-prose li {
  color: #3B3F55;
}
/* "Last updated" line reads as a small caption, not body text. */
.dmu-inner-page .dmu-prose > p:first-child {
  margin-top: 0;
  font-size: 0.85rem;
  color: var(--dmu-muted);
  font-style: normal;
  letter-spacing: 0.02em;
}
.dmu-inner-page .dmu-prose > p:first-child em { font-style: normal; }
/* First real paragraph acts as a lead. */
.dmu-inner-page .dmu-prose > p:first-child + p {
  font-size: 1.075em;
  color: var(--dmu-ink);
  line-height: 1.7;
}
/* Section headings with a hairline divider for clear rhythm. */
.dmu-inner-page .dmu-prose h2 {
  font-size: clamp(1.35rem, 0.8vw + 1.15rem, 1.75rem);
  margin-top: 2em;
  padding-top: 1.2em;
  border-top: 1px solid var(--dmu-line);
}
.dmu-inner-page .dmu-prose h2:first-of-type { border-top: 0; padding-top: 0; }
.dmu-single__features { margin-top: clamp(30px, 4vw, 56px); }
.dmu-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.dmu-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-ui);
  color: var(--dmu-body);
  line-height: 1.5;
}
.dmu-feature-list__icon {
  flex: 0 0 auto;
  color: var(--dmu-red);
  width: 22px; height: 22px;
  display: inline-flex;
}
.dmu-feature-list__icon svg { width: 20px; height: 20px; }

/* ---- Gallery + before/after --------------------------------------------- */

.dmu-single__gallery { margin-top: clamp(30px, 4vw, 56px); }
.dmu-gallery {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}
.dmu-gallery__item a { display: block; overflow: hidden; border-radius: 4px; }
.dmu-gallery__item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform 1.1s var(--ease-out, ease);
}
.dmu-gallery__item a:hover img { transform: scale(1.06); }

.dmu-beforeafter {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  margin-top: clamp(24px, 3vw, 40px);
}
.dmu-beforeafter__item { margin: 0; }
.dmu-beforeafter__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; display: block; }
.dmu-beforeafter__item figcaption {
  margin-top: 8px; font-family: var(--font-ui); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: var(--dmu-muted);
}

.dmu-project-meta {
  list-style: none; margin: 0 0 clamp(24px, 3vw, 40px); padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--dmu-line); padding-bottom: clamp(20px, 3vw, 32px);
}
.dmu-project-meta__label {
  display: block; font-family: var(--font-ui); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; color: var(--dmu-muted);
  margin-bottom: 4px;
}
.dmu-project-meta__value { font-family: var(--font-display); font-size: 1.1rem; color: var(--dmu-navy); }

/* ---- FAQ accordion ------------------------------------------------------- */

.dmu-faq { margin-top: clamp(36px, 5vw, 64px); }
.dmu-faq__heading {
  font-family: var(--font-display); font-weight: 400; color: var(--dmu-navy);
  font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2.2rem); margin-bottom: 0.8em;
}
.dmu-faq__item {
  border-bottom: 1px solid var(--dmu-line);
}
.dmu-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(16px, 2vw, 22px) 0;
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 500; color: var(--dmu-navy);
  font-size: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
}
.dmu-faq__q::-webkit-details-marker { display: none; }
.dmu-faq__icon { flex: 0 0 auto; color: var(--dmu-red); transition: transform var(--dur-base, .45s) ease; }
.dmu-faq__item[open] .dmu-faq__icon { transform: rotate(180deg); }
.dmu-faq__a { padding-bottom: clamp(16px, 2vw, 22px); color: var(--dmu-body); font-family: var(--font-ui); line-height: 1.7; }

/* ---- Statistics ---------------------------------------------------------- */

.dmu-stats { background: var(--dmu-navy); padding-block: clamp(50px, 6vw, 90px); }
.dmu-stats__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.dmu-stats__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px);
}
.dmu-stat { text-align: center; color: #fff; }
.dmu-stat__icon { display: inline-flex; color: var(--dmu-red-light); margin-bottom: 12px; }
.dmu-stat__icon svg { width: 34px; height: 34px; }
.dmu-stat__number {
  display: block; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.4rem, 3vw + 1.2rem, 3.6rem); line-height: 1; letter-spacing: -0.03em;
}
.dmu-stat__title {
  display: block; margin-top: 10px; font-family: var(--font-ui);
  color: rgba(255,255,255,.72); font-size: 0.95rem;
}

/* ---- Testimonials -------------------------------------------------------- */

.dmu-testimonials { background: var(--dmu-sand); padding-block: var(--sp-section); }
.dmu-testimonials__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.dmu-testimonials__grid {
  list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px);
}
.dmu-testimonial {
  background: var(--dmu-paper); border: 1px solid var(--dmu-line);
  border-radius: 6px; padding: clamp(24px, 3vw, 34px);
  display: flex; flex-direction: column; gap: 16px;
}
.dmu-testimonial__stars { color: var(--dmu-red); letter-spacing: 2px; font-size: 1rem; }
.dmu-testimonial__quote {
  margin: 0; font-family: var(--font-display); font-weight: 300; color: var(--dmu-ink);
  font-size: clamp(1.05rem, 0.5vw + 1rem, 1.3rem); line-height: 1.5;
}
.dmu-testimonial__by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.dmu-testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.dmu-testimonial__name { font-family: var(--font-ui); font-weight: 700; color: var(--dmu-navy); font-size: 0.95rem; }

/* ---- Team ---------------------------------------------------------------- */

.dmu-team { background: var(--dmu-paper); padding-block: var(--sp-section); }
.dmu-team__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.dmu-team__intro { max-width: 60ch; margin-bottom: clamp(32px, 4vw, 56px); color: var(--dmu-body); font-family: var(--font-ui); line-height: 1.7; }
.dmu-team__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px);
}
.dmu-team-card { border: 1px solid var(--dmu-line); border-radius: 6px; overflow: hidden; background: var(--dmu-paper); }
.dmu-team-card__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--dmu-sand); }
.dmu-team-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dmu-team-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--dmu-muted); }
.dmu-team-card__placeholder svg { width: 48px; height: 48px; }
.dmu-team-card__body { padding: clamp(18px, 2vw, 26px); }
.dmu-team-card__name { font-family: var(--font-display); font-weight: 500; color: var(--dmu-navy); font-size: 1.2rem; margin: 0; }
.dmu-team-card__role { font-family: var(--font-ui); color: var(--dmu-red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; margin: 6px 0 0; }
.dmu-team-card__bio { color: var(--dmu-body); font-family: var(--font-ui); font-size: 0.95rem; line-height: 1.6; margin: 12px 0 0; }
.dmu-team-card__social { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.dmu-team-card__social a { font-family: var(--font-ui); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dmu-navy); text-decoration: none; }
.dmu-team-card__social a:hover { color: var(--dmu-red); }

/* ---- Blog ---------------------------------------------------------------- */

.dmu-blog { background: var(--dmu-paper); padding-block: var(--sp-section); }
.dmu-blog__inner {
  width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(30px, 4vw, 60px);
}
.dmu-related .dmu-blog__inner { grid-template-columns: 1fr; }
.dmu-blog__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px);
}
.dmu-related .dmu-blog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(24px, 3vw, 40px); }
.dmu-post-card { border: 1px solid var(--dmu-line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; background: var(--dmu-paper); }
.dmu-post-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dmu-sand); }
.dmu-post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease-out, ease); }
.dmu-post-card__media:hover img { transform: scale(1.06); }
.dmu-post-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--dmu-muted); }
.dmu-post-card__body { padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; gap: 10px; }
.dmu-post-card__meta { display: flex; gap: 12px; font-family: var(--font-ui); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dmu-muted); }
.dmu-post-card__cat { color: var(--dmu-red); font-weight: 700; }
.dmu-post-card__title { font-family: var(--font-display); font-weight: 500; color: var(--dmu-navy); font-size: 1.25rem; margin: 0; line-height: 1.25; }
.dmu-post-card__title a { color: inherit; text-decoration: none; }
.dmu-post-card__title a:hover { color: var(--dmu-red); }
.dmu-post-card__excerpt { color: var(--dmu-body); font-family: var(--font-ui); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.dmu-post-card .index-link { margin-top: auto; }

.dmu-blog__aside { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); }
.dmu-blog__widget-title { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; color: var(--dmu-navy); margin: 0 0 14px; }
.dmu-blog__cats { list-style: none; margin: 0; padding: 0; }
.dmu-blog__cats li { padding: 6px 0; border-bottom: 1px solid var(--dmu-line); }
.dmu-blog__cats a { font-family: var(--font-ui); color: var(--dmu-body); text-decoration: none; }
.dmu-blog__cats a:hover { color: var(--dmu-red); }
.dmu-blog__widget .search-form { display: flex; gap: 8px; }
.dmu-blog__widget .search-field { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--dmu-line); border-radius: 4px; font-family: var(--font-ui); }
.dmu-blog__widget .search-submit { border: 0; background: var(--dmu-red); color: #fff; padding: 0 16px; border-radius: 4px; font-family: var(--font-ui); font-weight: 700; cursor: pointer; }

.dmu-article__tags { margin-top: clamp(24px, 3vw, 36px); font-family: var(--font-ui); color: var(--dmu-muted); }
.dmu-article__tags a { color: var(--dmu-red); }

/* ---- AJAX filters -------------------------------------------------------- */

.dmu-filter { margin-bottom: clamp(28px, 3vw, 44px); }
.dmu-filter__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.dmu-filter__chip {
  border: 1px solid var(--dmu-line); background: var(--dmu-paper); color: var(--dmu-body);
  border-radius: 999px; padding: 9px 18px; cursor: pointer;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  transition: background-color var(--dur-base, .45s) ease, color var(--dur-base, .45s) ease, border-color var(--dur-base, .45s) ease;
}
.dmu-filter__chip:hover { border-color: var(--dmu-red); color: var(--dmu-red); }
.dmu-filter__chip.is-active { background: var(--dmu-red); border-color: var(--dmu-red); color: #fff; }
.dmu-filter__search input[type="search"],
.dmu-filter__field select,
.dmu-filter__field input[type="search"] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--dmu-line); border-radius: 4px;
  font-family: var(--font-ui); font-size: 0.95rem; background: var(--dmu-paper); color: var(--dmu-ink);
}
.dmu-filter__row { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; }
.dmu-filter__field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 180px; }
.dmu-filter__field--search { flex: 2 1 240px; }
.dmu-filter__label { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; }
.dmu-filter__status { margin: 12px 0 0; font-family: var(--font-ui); font-size: 13px; color: var(--dmu-muted); min-height: 1em; }

/* Invert (on the navy projects band) */
.dmu-filter--invert .dmu-filter__label { color: rgba(255,255,255,.7); }
.dmu-filter--invert .dmu-filter__status { color: rgba(255,255,255,.6); }
.dmu-filter--invert select,
.dmu-filter--invert input[type="search"] {
  background: rgba(255,255,255,.06); border-color: var(--dmu-line-dark); color: #fff;
}
.dmu-filter--invert input[type="search"]::placeholder { color: rgba(255,255,255,.5); }

[data-dmu-grid] { transition: opacity .3s ease; }
[data-dmu-grid].is-loading { opacity: .5; }

/* ---- AJAX form states ---------------------------------------------------- */

.dmu-form-message { margin-bottom: 16px; padding: 12px 16px; border-radius: 4px; font-family: var(--font-ui); font-size: 0.95rem; }
.dmu-form-message.is-error { background: rgba(165,48,42,.08); color: var(--dmu-red-deep); border: 1px solid rgba(165,48,42,.25); }
.dmu-form-message.is-success { background: rgba(31,142,74,.08); color: var(--dmu-whatsapp-deep); border: 1px solid rgba(31,142,74,.25); }
.dmu-form-message:empty { display: none; }

.dmu-field-error { margin: 6px 0 0; color: var(--dmu-red-deep); font-family: var(--font-ui); font-size: 13px; }
.contact-field.is-invalid .contact-field__input,
.services-field.is-invalid .services-field__input { border-color: var(--dmu-red); }

.dmu-form-success { text-align: center; padding: clamp(30px, 5vw, 60px); }
.dmu-form-success__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; background: var(--dmu-whatsapp); color: #fff; margin-bottom: 18px;
}
.dmu-form-success__mark svg { width: 30px; height: 30px; }
.dmu-form-success__title { font-family: var(--font-display); font-weight: 400; color: var(--dmu-navy); font-size: 1.6rem; margin: 0 0 8px; }
.dmu-form-success__text { color: var(--dmu-body); font-family: var(--font-ui); }

button[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ---- Masthead alias ------------------------------------------------------
   The masthead component emits both a variant class (services/projects/contact)
   and a neutral .dmu-masthead* alias. The variant classes already carry the
   design's masthead styles; these aliases are a safety net for the generic
   pages (About, Team, Blog, 404) that use variant="services".
   -------------------------------------------------------------------------- */
.dmu-masthead { position: relative; }

/* ---- 404 ----------------------------------------------------------------- */
.dmu-404__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: clamp(24px, 3vw, 40px); }
.dmu-404__search .search-form { display: flex; gap: 8px; max-width: 420px; }
.dmu-404__search .search-field { flex: 1; padding: 12px 14px; border: 1px solid var(--dmu-line); border-radius: 4px; }
.dmu-404__search .search-submit { border: 0; background: var(--dmu-red); color: #fff; padding: 0 18px; border-radius: 4px; cursor: pointer; font-weight: 700; }

/* ---- Pagination ---------------------------------------------------------- */
.pagination, .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: clamp(30px, 4vw, 56px); }
.pagination .page-numbers, .nav-links .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--dmu-line); border-radius: 4px; text-decoration: none;
  font-family: var(--font-ui); font-weight: 700; color: var(--dmu-navy);
}
.pagination .page-numbers.current, .nav-links .page-numbers.current { background: var(--dmu-red); border-color: var(--dmu-red); color: #fff; }
.pagination a.page-numbers:hover { border-color: var(--dmu-red); color: var(--dmu-red); }

/* ---- Announcement bar ---------------------------------------------------- */
.index-announce { background: var(--dmu-red); color: #fff; }
.index-announce__inner {
  max-width: var(--container); margin-inline: auto; padding: 8px var(--gutter);
  text-align: center; font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.02em;
}

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

@media (max-width: 991px) {
  .dmu-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dmu-testimonials__grid,
  .dmu-team__grid,
  .dmu-related .dmu-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dmu-blog__inner { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .dmu-feature-list { grid-template-columns: 1fr; }
  .dmu-blog__grid { grid-template-columns: 1fr; }
  .dmu-beforeafter { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .dmu-stats__grid { grid-template-columns: 1fr; }
  .dmu-testimonials__grid,
  .dmu-team__grid,
  .dmu-related .dmu-blog__grid { grid-template-columns: 1fr; }
  .dmu-filter__row { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  [data-dmu-grid],
  .dmu-gallery__item img,
  .dmu-post-card__media img,
  .dmu-faq__icon { transition: none; }
}