/*
Theme Name:   DMK Home Services
Theme URI:    https://dmkhomeservices.com
Description:  Child theme of Hello Elementor carrying the DMK Home Services design system — black and gold, built around the roof pitch from the logo mark. All page content is built with Elementor widgets; this stylesheet supplies the look.
Author:       Mpiric Software
Template:     hello-elementor
Version:      1.0.0
Text Domain:  dmk-child
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Single committed dark theme. The brand is black and gold, so there is no
   light variant — every colour is painted explicitly.
   ========================================================================== */

:root {
  /* ground + ink */
  --dmk-ink:        #0A0A0B;
  --dmk-ink-2:      #121113;
  --dmk-ink-3:      #1B1A1C;
  --dmk-hairline:   #2A272A;

  /* type */
  --dmk-bone:       #F2EEE7;
  --dmk-ash:        #9A948C;
  --dmk-ash-dim:    #6E6862;

  /* metal */
  --dmk-gold-deep:  #8A6620;
  --dmk-gold:       #C9962F;
  --dmk-gold-lit:   #E8C46A;
  --dmk-gold-hi:    #F6E4AE;
  --dmk-metal: linear-gradient(135deg,
      #8A6620 0%, #C9962F 22%, #E8C46A 46%,
      #F6E4AE 53%, #C9962F 72%, #8A6620 100%);
  --dmk-metal-flat: linear-gradient(135deg, #C9962F 0%, #E8C46A 50%, #C9962F 100%);

  /* type scale */
  --dmk-step--1: 0.8125rem;
  --dmk-step-0:  1rem;
  --dmk-step-1:  1.125rem;
  --dmk-step-2:  1.375rem;
  --dmk-step-3:  1.875rem;
  --dmk-step-4:  2.5rem;
  --dmk-step-5:  clamp(2.5rem, 6.2vw, 4.25rem);

  /* faces — see functions.php for the self-hosting note */
  --dmk-face-display: "Century Gothic", "Questrial", Futura, "Trebuchet MS", system-ui, sans-serif;
  --dmk-face-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --dmk-measure: 65ch;
  --dmk-shell: 1180px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
  background: var(--dmk-ink);
  color: var(--dmk-bone);
  font-family: var(--dmk-face-body);
  font-size: var(--dmk-step-0);
  line-height: 1.65;
  overflow-x: hidden;
}

body img { height: auto; }

a { color: var(--dmk-gold-lit); }

:focus-visible { outline: 2px solid var(--dmk-gold-lit); outline-offset: 3px; }

.dmk-shell {
  width: 100%;
  max-width: var(--dmk-shell);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Elementor's boxed containers carry the page measure. Keep their inner
   wrapper aligned with the header and footer above. */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--dmk-shell); }

/* ==========================================================================
   3. TYPOGRAPHY UTILITIES
   Applied via the CSS Classes field on Elementor widgets, so any of these can
   be overridden from the Elementor Style tab without touching this file.
   ========================================================================== */

.dmk-eyebrow.elementor-widget,
.dmk-eyebrow.elementor-widget p,
.dmk-eyebrow.elementor-widget .elementor-heading-title {
  font-family: var(--dmk-face-display);
  font-size: var(--dmk-step--1);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dmk-gold);
  line-height: 1.5;
}

.dmk-display.elementor-widget .elementor-heading-title {
  font-family: var(--dmk-face-display);
  font-size: var(--dmk-step-5);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--dmk-bone);
}

.dmk-h2.elementor-widget .elementor-heading-title {
  font-family: var(--dmk-face-display);
  font-size: var(--dmk-step-4);
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--dmk-bone);
}

.dmk-h3.elementor-widget .elementor-heading-title {
  font-family: var(--dmk-face-display);
  font-size: var(--dmk-step-2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dmk-bone);
}

/* the gold half of the hero headline */
.dmk-display.elementor-widget .elementor-heading-title .dmk-gold,
.dmk-gold-text.elementor-widget .elementor-heading-title {
  background: var(--dmk-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
}

.dmk-lead.elementor-widget,
.dmk-lead.elementor-widget p { font-size: var(--dmk-step-1); line-height: 1.62; color: var(--dmk-ash); max-width: var(--dmk-measure); }
.dmk-lead p:last-child { margin-bottom: 0; }

.dmk-prose.elementor-widget,
.dmk-prose.elementor-widget p { color: var(--dmk-ash); max-width: var(--dmk-measure); }
.dmk-prose p { margin: 0 0 1.1em; }
.dmk-prose p:last-child { margin-bottom: 0; }
.dmk-prose strong { color: var(--dmk-bone); font-weight: 600; }

.dmk-step-num.elementor-widget .elementor-heading-title {
  font-family: var(--dmk-face-display);
  font-size: var(--dmk-step-3);
  font-weight: 700;
  line-height: 1;
  background: var(--dmk-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.dmk-step-title.elementor-widget .elementor-heading-title {
  font-family: var(--dmk-face-display);
  font-size: var(--dmk-step-0);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dmk-bone);
}

/* ==========================================================================
   4. THE PITCH RULE
   A hairline interrupted by the diamond from the logo. Applied to a Divider
   widget; the diamond is drawn here rather than shipped as an image.
   ========================================================================== */

.dmk-rule .elementor-divider { padding-block: 0; }

.dmk-rule .elementor-divider-separator {
  position: relative;
  border: 0;
  height: 1px;
  max-width: 190px;
  background: linear-gradient(90deg, var(--dmk-gold) 0%, var(--dmk-gold-deep) 70%, transparent 100%);
  margin-left: 15px;
}

.dmk-rule .elementor-divider-separator::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--dmk-metal-flat);
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.dmk-btn-gold.elementor-widget .elementor-button,
.dmk-btn-ghost.elementor-widget .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--dmk-face-display);
  font-size: var(--dmk-step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}

.dmk-btn-gold.elementor-widget .elementor-button {
  background: var(--dmk-metal-flat);
  color: #17120A;
}

.dmk-btn-gold.elementor-widget .elementor-button:hover,
.dmk-btn-gold.elementor-widget .elementor-button:focus {
  color: #17120A;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -12px rgba(232, 196, 106, 0.55);
}

.dmk-btn-ghost.elementor-widget .elementor-button {
  background: transparent;
  border-color: var(--dmk-gold-deep);
  color: var(--dmk-gold-lit);
}

.dmk-btn-ghost.elementor-widget .elementor-button:hover,
.dmk-btn-ghost.elementor-widget .elementor-button:focus {
  border-color: var(--dmk-gold-lit);
  background: rgba(201, 150, 47, 0.08);
  color: var(--dmk-gold-lit);
  transform: translateY(-2px);
}

/* ==========================================================================
   6. HERO
   The wedge echoes the roof pitch from the mark. It deliberately stops short
   of the hero floor: the portrait's base is masked to fade into the ground,
   and anything behind that fade would show through it.
   ========================================================================== */

.dmk-hero { position: relative; overflow: hidden; background: #000; }

/* Elementor already defines .e-con::before for the container background
   overlay, with top/left/width/height set. Ours has to out-specify it AND
   reset the offsets it does not use — otherwise that rule's `left: 0`
   survives, over-constrains the box, and pins the wedge to the wrong edge. */
.dmk-hero.e-con::before,
.dmk-hero.e-con::after,
.dmk-hero::before,
.dmk-hero::after {
  content: "";
  position: absolute;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  pointer-events: none;
  z-index: 0;
}

.dmk-hero.e-con::before,
.dmk-hero::before {
  top: -2%;
  right: -5%;
  width: 42%;
  height: 66%;
  background: var(--dmk-metal);
  opacity: 0.92;
  clip-path: polygon(40% 0, 100% 0, 100% 72%, 4% 100%);
}

.dmk-hero.e-con::after,
.dmk-hero::after {
  top: -2%;
  right: 12%;
  width: 40%;
  height: 82%;
  background: var(--dmk-ink-2);
  clip-path: polygon(54% 0, 100% 0, 26% 100%, 0 100%);
}

.dmk-hero > .e-con,
.dmk-hero > .e-con-inner,
.dmk-hero > .elementor-container { position: relative; z-index: 2; }

.dmk-hero-art { position: relative; }

.dmk-hero-art img {
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 76%, transparent 99%);
}

.dmk-hero-names {
  padding-left: 16px;
  border-left: 2px solid var(--dmk-gold);
}

.dmk-hero-names p { margin: 0; }

.dmk-hero-names,
.dmk-hero-names p {
  font-family: var(--dmk-face-display);
  font-size: var(--dmk-step--1);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--dmk-bone);
}

.dmk-hero-names .dmk-gold { color: var(--dmk-gold-lit); }

/* ==========================================================================
   7. SECTIONS AND PANELS
   ========================================================================== */

.dmk-panel { background: var(--dmk-ink-2); border-block: 1px solid var(--dmk-hairline); }

.dmk-masthead { position: relative; overflow: hidden; background: var(--dmk-ink-2); border-bottom: 1px solid var(--dmk-hairline); }

.dmk-masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dmk-metal);
  opacity: 0.12;
  clip-path: polygon(68% 0, 100% 0, 100% 100%, 40% 100%);
  pointer-events: none;
}

.dmk-masthead > .e-con,
.dmk-masthead > .e-con-inner,
.dmk-masthead > .elementor-container { position: relative; z-index: 2; }

/* ==========================================================================
   8. CAPABILITY STRIP  (Icon Box widgets)
   ========================================================================== */

.dmk-strip { background: var(--dmk-ink-2); border-block: 1px solid var(--dmk-hairline); }

.dmk-strip-item { border-left: 1px solid var(--dmk-hairline); }
.dmk-strip-item:first-child { border-left: 0; }

.dmk-strip-item .elementor-icon-box-title,
.dmk-strip-item.elementor-widget .elementor-icon-box-title span {
  font-family: var(--dmk-face-display);
  font-size: var(--dmk-step--1);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dmk-bone);
}

.dmk-strip-item .elementor-icon { color: var(--dmk-gold); }
.dmk-strip-item .elementor-icon svg { fill: var(--dmk-gold); }

/* ==========================================================================
   9. CARDS  (Icon Box widgets, and plain containers)
   The top edge carries the roof pitch — the same angle as the hero wedge.
   ========================================================================== */

.dmk-card {
  position: relative;
  background: var(--dmk-ink-3);
  border: 1px solid var(--dmk-hairline);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 200ms ease, transform 200ms ease;
}

.dmk-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--dmk-metal-flat);
  clip-path: polygon(0 100%, 22% 0, 44% 100%, 100% 100%);
  opacity: 0.75;
  transition: opacity 200ms ease;
  z-index: 1;
}

.dmk-card:hover { border-color: var(--dmk-gold-deep); transform: translateY(-3px); }
.dmk-card:hover::before { opacity: 1; }

.dmk-card .elementor-icon-box-title,
.dmk-card.elementor-widget .elementor-icon-box-title span {
  font-family: var(--dmk-face-display);
  font-size: var(--dmk-step-2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dmk-bone);
}

.dmk-card.elementor-widget .elementor-icon-box-description { color: var(--dmk-ash); margin: 0; }

.dmk-card .elementor-icon { color: var(--dmk-gold); }
.dmk-card .elementor-icon svg { fill: var(--dmk-gold); }

/* ==========================================================================
   10. TICK LISTS  (Icon List widgets)
   The marker is a square rotated into the logo's diamond.
   ========================================================================== */

.dmk-ticks .elementor-icon-list-items { padding: 0; margin: 0; }

.dmk-ticks .elementor-icon-list-item {
  align-items: flex-start;
  color: var(--dmk-ash);
  line-height: 1.5;
  margin-bottom: 11px;
}

.dmk-ticks .elementor-icon-list-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0.42em;
}

.dmk-ticks .elementor-icon-list-icon i,
.dmk-ticks .elementor-icon-list-icon svg {
  font-size: 7px;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  color: var(--dmk-gold);
  fill: var(--dmk-gold);
}

.dmk-ticks.elementor-widget .elementor-icon-list-text { color: var(--dmk-ash); }

/* two balanced columns that read DOWN then across, not zig-zag across rows */
@media (min-width: 768px) {
  .dmk-ticks-2 .elementor-icon-list-items {
    display: block;
    column-count: 2;
    column-gap: 40px;
  }
  .dmk-ticks-2 .elementor-icon-list-item { break-inside: avoid; display: flex; }
}

/* ==========================================================================
   11. SCOPE NOTE
   ========================================================================== */

.dmk-note {
  background: var(--dmk-ink-2);
  border: 1px solid var(--dmk-hairline);
  border-left: 3px solid var(--dmk-gold);
  border-radius: 2px;
}

.dmk-note .dmk-prose,
.dmk-note p { color: var(--dmk-ash); font-size: 0.9375rem; max-width: 74ch; }
.dmk-note strong { color: var(--dmk-bone); font-weight: 600; }
.dmk-note .elementor-icon { color: var(--dmk-gold); }

/* ==========================================================================
   12. CTA BAND
   ========================================================================== */

.dmk-band { position: relative; overflow: hidden; background: var(--dmk-ink-2); border-block: 1px solid var(--dmk-hairline); }

.dmk-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dmk-metal);
  opacity: 0.1;
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 34% 100%);
  pointer-events: none;
}

.dmk-band > .e-con,
.dmk-band > .e-con-inner,
.dmk-band > .elementor-container { position: relative; z-index: 2; }

/* ==========================================================================
   13. FRAMED IMAGE
   ========================================================================== */

.dmk-framed { position: relative; }

.dmk-framed::after {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--dmk-gold-deep);
  z-index: -1;
}

.dmk-framed img { background: #000; border: 1px solid var(--dmk-hairline); }

/* ==========================================================================
   14. CONTACT DETAILS  (Icon Box widgets, stacked)
   ========================================================================== */

.dmk-detail { border-bottom: 1px solid var(--dmk-hairline); }
.dmk-detail:last-child { border-bottom: 0; }

.dmk-detail .elementor-icon-box-title,
.dmk-detail.elementor-widget .elementor-icon-box-title span {
  font-family: var(--dmk-face-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dmk-gold);
}

.dmk-detail.elementor-widget .elementor-icon-box-description {
  font-size: var(--dmk-step-1);
  color: var(--dmk-bone);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.dmk-detail .elementor-icon-box-description a { color: var(--dmk-bone); text-decoration: none; }
.dmk-detail .elementor-icon-box-description a:hover { color: var(--dmk-gold-lit); }
.dmk-detail .elementor-icon-box-description small { display: block; font-size: 0.875rem; color: var(--dmk-ash); }
.dmk-detail .elementor-icon { color: var(--dmk-gold); }

/* ==========================================================================
   15. CONTACT FORM
   Elementor Free has no Form widget, so the contact page uses a Shortcode
   widget. These rules dress the two common free plugins to match the brand —
   see README for the Contact Form 7 markup to paste in.
   ========================================================================== */

.dmk-form label,
.dmk-form .wpforms-field-label {
  display: block;
  font-family: var(--dmk-face-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dmk-ash);
  margin-bottom: 8px;
}

.dmk-form input[type="text"],
.dmk-form input[type="email"],
.dmk-form input[type="tel"],
.dmk-form select,
.dmk-form textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--dmk-ink-3);
  border: 1px solid var(--dmk-hairline);
  border-radius: 2px;
  color: var(--dmk-bone);
  font-family: var(--dmk-face-body);
  font-size: var(--dmk-step-0);
  transition: border-color 160ms ease;
}

.dmk-form textarea { min-height: 148px; resize: vertical; }

.dmk-form input::placeholder,
.dmk-form textarea::placeholder { color: var(--dmk-ash-dim); }

.dmk-form input:focus,
.dmk-form select:focus,
.dmk-form textarea:focus { border-color: var(--dmk-gold); outline: none; }

.dmk-form input[type="submit"],
.dmk-form button[type="submit"] {
  width: auto;
  padding: 14px 26px;
  background: var(--dmk-metal-flat);
  border: 0;
  border-radius: 2px;
  color: #17120A;
  font-family: var(--dmk-face-display);
  font-size: var(--dmk-step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.dmk-form input[type="submit"]:hover,
.dmk-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -12px rgba(232, 196, 106, 0.55);
}

.dmk-form .dmk-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dmk-form .dmk-field { margin-bottom: 20px; }

@media (max-width: 620px) {
  .dmk-form .dmk-field-row { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   16. SITE HEADER  (child theme template, not Elementor — Free has no
   Theme Builder. Content is editable in Appearance > Menus and
   Customizer > DMK Site Details.)
   ========================================================================== */

.dmk-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(10, 10, 11, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--dmk-hairline);
}

.admin-bar .dmk-header { top: 32px; }

.dmk-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 82px;
}

.dmk-lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.dmk-lockup-mark { width: 46px; flex: none; }
.dmk-lockup-type { display: flex; flex-direction: column; gap: 3px; }

.dmk-lockup-name {
  font-family: var(--dmk-face-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--dmk-bone);
}

.dmk-lockup-name em {
  font-style: normal;
  background: var(--dmk-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dmk-lockup-sub {
  font-family: var(--dmk-face-display);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--dmk-ash);
  line-height: 1;
}

.dmk-nav { display: flex; align-items: center; gap: 34px; }
.dmk-nav ul { display: flex; align-items: center; gap: 34px; list-style: none; margin: 0; padding: 0; }

.dmk-nav a {
  position: relative;
  display: block;
  padding-block: 6px;
  font-family: var(--dmk-face-display);
  font-size: var(--dmk-step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dmk-ash);
  text-decoration: none;
  transition: color 160ms ease;
}

.dmk-nav a:hover { color: var(--dmk-bone); }

.dmk-nav .current-menu-item > a,
.dmk-nav .current_page_item > a { color: var(--dmk-bone); }

.dmk-nav .current-menu-item > a::after,
.dmk-nav .current_page_item > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--dmk-metal-flat);
}

.dmk-header-cta { display: flex; align-items: center; gap: 18px; }

.dmk-header-phone {
  font-family: var(--dmk-face-display);
  font-size: var(--dmk-step-0);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--dmk-bone);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dmk-header-phone:hover { color: var(--dmk-gold-lit); }

.dmk-header-cta .dmk-quote {
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  background: var(--dmk-metal-flat);
  border-radius: 2px;
  color: #17120A;
  font-family: var(--dmk-face-display);
  font-size: var(--dmk-step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.dmk-header-cta .dmk-quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -12px rgba(232, 196, 106, 0.55);
}

.dmk-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--dmk-hairline);
  border-radius: 2px;
  cursor: pointer;
}

.dmk-nav-toggle span { display: block; height: 2px; background: var(--dmk-gold-lit); transition: transform 220ms ease, opacity 180ms ease; }
.dmk-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dmk-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dmk-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   17. SITE FOOTER
   ========================================================================== */

.dmk-footer { background: var(--dmk-ink); border-top: 1px solid var(--dmk-hairline); padding-block: 64px 34px; }

.dmk-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 56px;
  padding-bottom: 44px;
}

.dmk-footer-brand { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

.dmk-lockup-lg { gap: 18px; }
.dmk-lockup-lg .dmk-lockup-mark { width: 68px; }
.dmk-lockup-lg .dmk-lockup-name { font-size: 2.25rem; }
.dmk-lockup-lg .dmk-lockup-sub { font-size: 0.75rem; letter-spacing: 0.38em; }

.dmk-footer-tag {
  font-family: var(--dmk-face-display);
  font-size: var(--dmk-step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.9;
  margin: 0;
}

.dmk-footer-tag span { display: block; color: var(--dmk-ash); }
.dmk-footer-tag span + span { color: var(--dmk-gold); font-weight: 700; }

.dmk-footer-col { display: flex; flex-direction: column; gap: 14px; }
.dmk-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.dmk-footer-head {
  font-family: var(--dmk-face-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dmk-bone);
  margin: 0 0 4px;
}

.dmk-footer-col a,
.dmk-footer-col p { color: var(--dmk-ash); text-decoration: none; font-size: 0.9375rem; margin: 0; }
.dmk-footer-col a:hover { color: var(--dmk-gold-lit); }

.dmk-footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--dmk-hairline);
  font-size: 0.8125rem;
  color: var(--dmk-ash-dim);
}

/* ==========================================================================
   18. MOTION
   ========================================================================== */

.dmk-reveal { opacity: 0; transform: translateY(18px); transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.dmk-reveal.is-in { opacity: 1; transform: none; }

/* never hide content inside the Elementor editor */
.elementor-editor-active .dmk-reveal,
.elementor-editor-preview .dmk-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .dmk-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   19. RESPONSIVE
   ========================================================================== */

@media (max-width: 1040px) {
  .dmk-nav-toggle { display: flex; }

  .dmk-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: 4px 24px 18px;
    background: var(--dmk-ink-2);
    border-bottom: 1px solid var(--dmk-hairline);
  }

  .dmk-nav.is-open { display: block; }
  .dmk-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .dmk-nav li { border-bottom: 1px solid var(--dmk-hairline); }
  .dmk-nav li:last-child { border-bottom: 0; }
  .dmk-nav a { padding: 15px 0; }
  .dmk-nav .current-menu-item > a::after,
  .dmk-nav .current_page_item > a::after { display: none; }
  .dmk-nav .current-menu-item > a { color: var(--dmk-gold-lit); }

  .dmk-framed::after { inset: 12px -12px -12px 12px; }
  .dmk-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}

@media (max-width: 860px) {
  /* Fixed heights, not percentages: the stacked hero is much taller here, and
     a percentage wedge runs down across the copy. Specificity has to match the
     .e-con base rule above or it loses. */
  .dmk-hero.e-con::before,
  .dmk-hero::before { width: 58%; height: 290px; opacity: 0.5; }

  .dmk-hero.e-con::after,
  .dmk-hero::after { width: 52%; height: 330px; right: 20%; }
  .dmk-strip-item { border-left: 0; border-top: 1px solid var(--dmk-hairline); }
  .dmk-strip-item:first-child { border-top: 0; }
}

@media (max-width: 620px) {
  .dmk-header-phone { display: none; }
  .dmk-footer-grid { grid-template-columns: minmax(0, 1fr); }

  /* tighten the lockup so it, the CTA and the menu button share one row */
  .dmk-header-inner { min-height: 70px; }
  .dmk-lockup { gap: 11px; }
  .dmk-lockup-mark { width: 38px; }
  .dmk-lockup-name { font-size: 1.25rem; }
  .dmk-lockup-sub { font-size: 0.5rem; letter-spacing: 0.22em; white-space: nowrap; }
  .dmk-header-cta { gap: 10px; }
  .dmk-header-cta .dmk-quote { padding: 12px 14px; }
}

/* ==========================================================================
   20. ELEMENTOR BLOCK PADDING AND MEASURE
   Column counts, gaps and section padding are set on the Elementor elements
   themselves (so they stay adjustable in the builder). What lives here is the
   inner padding and measure of the individual blocks.
   ========================================================================== */

.dmk-strip-item.elementor-widget { padding: 34px 18px; text-align: center; }

.dmk-card.elementor-widget { padding: 34px 30px 32px; }

.dmk-detail.elementor-widget { padding-bottom: 26px; }
.dmk-detail.elementor-widget:last-child { padding-bottom: 0; }

.dmk-head .dmk-lead.elementor-widget,
.dmk-head .dmk-lead.elementor-widget p { max-width: 62ch; }

.dmk-btn-row-top { margin-top: 20px; }

.dmk-masthead-inner .dmk-display.elementor-widget .elementor-heading-title { max-width: 16ch; }
.dmk-masthead-inner .dmk-lead.elementor-widget,
.dmk-masthead-inner .dmk-lead.elementor-widget p { max-width: 56ch; }

/* hero portrait: hold the mockup's size and float the names over its base */
.dmk-hero-art { max-width: 520px; margin-inline: auto; }
.dmk-hero-art > .dmk-hero-names {
  position: absolute;
  left: 0;
  bottom: 76px;
  z-index: 2;
}

.dmk-hero-copy .dmk-display.elementor-widget .elementor-heading-title { max-width: 12ch; }

/* the scope note is an Icon Box laid out horizontally with no title */
.dmk-note-box .elementor-icon-box-title { display: none; }
.dmk-note-box .elementor-icon-box-wrapper { display: flex; gap: 20px; align-items: flex-start; text-align: left; }
.dmk-note-box .elementor-icon-box-icon { margin: 0; flex: none; }
.dmk-note-box.elementor-widget .elementor-icon-box-description { color: var(--dmk-ash); font-size: 0.9375rem; max-width: 74ch; margin: 0; }

.dmk-step-body.elementor-widget,
.dmk-step-body.elementor-widget p { color: var(--dmk-ash); font-size: 0.9375rem; }

.dmk-form-note.elementor-widget,
.dmk-form-note.elementor-widget p { font-size: 0.875rem; color: var(--dmk-ash-dim); }

.dmk-band-copy .dmk-lead.elementor-widget,
.dmk-band-copy .dmk-lead.elementor-widget p { font-size: var(--dmk-step-0); }

/* contact details: label above value, icon to the left */
.dmk-detail .elementor-icon-box-wrapper { display: flex; gap: 18px; align-items: flex-start; text-align: left; }
.dmk-detail .elementor-icon-box-icon { margin: 0; flex: none; padding-top: 4px; }

@media (max-width: 860px) {
  .dmk-hero-art > .dmk-hero-names { bottom: 54px; }
}

/* Elementor sizes icon-list markers through its own variable, which outranks a
   plain font-size here — set the variable as well as the glyph. */
.dmk-ticks.elementor-widget { --e-icon-list-icon-size: 7px; }

.dmk-ticks.elementor-widget .elementor-icon-list-icon i,
.dmk-ticks.elementor-widget .elementor-icon-list-icon svg {
  font-size: 7px;
  width: 7px;
  height: 7px;
  line-height: 1;
  transform: rotate(45deg);
  color: var(--dmk-gold);
  fill: var(--dmk-gold);
}

/* Elementor centres icon-list rows; on a two-line item that drops the marker
   beside the wrapped line instead of the first. Pin it to the top. */
.dmk-ticks.elementor-widget .elementor-icon-list-item,
.dmk-ticks.elementor-widget .elementor-icon-list-item a {
  align-items: flex-start;
}

.dmk-ticks.elementor-widget .elementor-icon-list-icon {
  padding-top: 0.45em;
  align-self: flex-start;
}