/* Photoshop uses Poppins Light (300) for some mobile copy; load it only on phones. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap') screen and (max-width: 767px);

/**
 * Digital Kreativ mobile homepage typography parity.
 * Source: user-supplied 390px Photoshop mobile PSD.
 * Keeps the approved desktop/tablet typography and layout unchanged.
 * Load after font-families.css because its specificity affects Elementor headings.
 */
@media (max-width: 767px) {
  /* The desktop and PSD share these two type families. */
  body.page-id-78 {
    --dk-mobile-body-font: 'Poppins', Arial, Helvetica, sans-serif;
    --dk-mobile-title-font: 'Playfair Display', Georgia, 'Times New Roman', serif;
  }

  /* Actual heading text only — not all Elementor Heading widgets are titles. */
  body:not(#dk-font-override).page-id-78 :is(
    .dk-hero-line-one, .dk-hero-line-two,
    .dk-services-title-a, .dk-services-title-b,
    .dk-project-title-a, .dk-project-title-b,
    .dk-about-title-a, .dk-about-title-b,
    .dk-about-banner-title, .dk-contact-heading, .dk-contact-heading-accent
  ) .elementor-heading-title,
  body:not(#dk-font-override).page-id-78 .dk-hero-lead-intro h2,
  body:not(#dk-font-override).page-id-78 .dkt-v2__intro h2,
  body:not(#dk-font-override).page-id-78 .dkt-v2__intro h2 span,
  body:not(#dk-font-override).page-id-78 .dkg-strategy :is(.dkg-heading, .dkg-highlight) .elementor-heading-title,
  body:not(#dk-font-override).page-id-78 .dkf-editorial h3 {
    font-family: var(--dk-mobile-title-font) !important;
    font-weight: 700 !important;
  }

  /* Poppins 400 is used for labels, chips, navigation, CTA copy and paragraphs.
     Elementor heading widgets used as labels must NOT inherit the serif family. */
  body:not(#dk-font-override).page-id-78 :is(
    .dk-hero-kicker, .dk-services-kicker, .dk-project-kicker,
    .dk-about-kicker, .dk-about-banner-eyebrow, .dk-contact-eyebrow,
    .dk-hero-feature, .dk-service-heading,
    .dk-about-reason-title, .dk-about-banner-phone-label,
    .dks-value, .dks-label, .dkg-kicker
  ) :is(.elementor-heading-title, .elementor-icon-box-title),
  body:not(#dk-font-override).page-id-78 .dk-hero-feature .elementor-icon-box-title :is(span, a),
  body:not(#dk-font-override).page-id-78 .dk-service-heading .elementor-heading-title a,
  body:not(#dk-font-override).page-id-78 .dk-about-reason-title .elementor-heading-title :is(a, span),
  body:not(#dk-font-override).page-id-78 .dks-statistics :is(.dks-value, .dks-label) .elementor-heading-title :is(span, a),
  body:not(#dk-font-override).page-id-78 .dkf-editorial :is(.dkf-linklist a, .dkf-contact-line a) {
    font-family: var(--dk-mobile-body-font) !important;
  }

  /* HERO — Photoshop text-layer sizes at 390px: 25 / 33.333 / 12.5px. */
  body:not(#dk-font-override).page-id-78 .dk-home-hero .dk-hero-kicker .elementor-heading-title {
    font-family: var(--dk-mobile-body-font) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
  }
  body:not(#dk-font-override).page-id-78 .dk-home-hero .dk-hero-line-one .elementor-heading-title {
    font-size: clamp(22px, 6.41vw, 25px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }
  body:not(#dk-font-override).page-id-78 .dk-home-hero .dk-hero-line-two .elementor-heading-title {
    font-size: clamp(28px, 8.547vw, 33.333px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }
  body:not(#dk-font-override).page-id-78 .dk-home-hero .dk-hero-desc,
  body:not(#dk-font-override).page-id-78 .dk-home-hero .dk-hero-desc p {
    font-family: var(--dk-mobile-body-font) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 2 !important;
  }
  body:not(#dk-font-override).page-id-78 .dk-home-hero .dk-hero-buttons .elementor-button {
    font-family: var(--dk-mobile-body-font) !important;
    font-size: clamp(10.5px, 3.205vw, 12.5px) !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
  }
  body:not(#dk-font-override).page-id-78 .dk-home-hero .dk-hero-feature .elementor-icon-box-title,
  body:not(#dk-font-override).page-id-78 .dk-home-hero .dk-hero-feature .elementor-icon-box-title :is(span, a),
  body:not(#dk-font-override).page-id-78 .dk-home-hero .dk-hero-feature .elementor-icon-box-description {
    font-family: var(--dk-mobile-body-font) !important;
    font-size: 12.5px !important;
    font-weight: 300 !important;
    line-height: 1.6667 !important;
  }

  /* Enquiry: Playfair Display title, Poppins form controls. */
  body:not(#dk-font-override).page-id-78 .dk-hero-lead-wrap .dk-hero-lead-intro h2 {
    font-size: clamp(19px, 5.342vw, 20.833px) !important;
    line-height: 1.6 !important;
  }
  body:not(#dk-font-override).page-id-78 .dk-hero-lead-wrap :is(
    .dk-hero-lead-consent, .dk-hero-lead-consent label,
    .dk-hero-lead-consent .wpcf7-list-item-label,
    .dk-hero-lead-row input:not([type=checkbox]),
    .dk-hero-lead-row input::placeholder
  ) {
    font-family: var(--dk-mobile-body-font) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
  }

  /* Our services: 25px / 33.333px titles, 12.5px descriptive text. */
  body:not(#dk-font-override).page-id-78 .dk-services-section .dk-services-kicker .elementor-heading-title,
  body:not(#dk-font-override).page-id-78 .dk-projects-section .dk-project-kicker .elementor-heading-title,
  body:not(#dk-font-override).page-id-78 .dk-about-section .dk-about-kicker .elementor-heading-title,
  body:not(#dk-font-override).page-id-78 .dk-about-cta-section .dk-about-banner-eyebrow .elementor-heading-title,
  body:not(#dk-font-override).page-id-78 .dk-contact-section .dk-contact-eyebrow .elementor-heading-title,
  body:not(#dk-font-override).page-id-78 .dkg-strategy .dkg-kicker .elementor-heading-title {
    font-family: var(--dk-mobile-body-font) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }
  body:not(#dk-font-override).page-id-78 .dk-services-section .dk-services-title-a .elementor-heading-title,
  body:not(#dk-font-override).page-id-78 .dk-about-section .dk-about-title-a .elementor-heading-title,
  body:not(#dk-font-override).page-id-78 .dk-contact-section .dk-contact-heading .elementor-heading-title {
    font-size: clamp(22px, 6.41vw, 25px) !important;
    line-height: 1.2 !important;
  }
  body:not(#dk-font-override).page-id-78 .dk-services-section .dk-services-title-b .elementor-heading-title,
  body:not(#dk-font-override).page-id-78 .dk-about-section .dk-about-title-b .elementor-heading-title,
  body:not(#dk-font-override).page-id-78 .dk-contact-section .dk-contact-heading-accent .elementor-heading-title {
    font-size: clamp(29px, 8.547vw, 33.333px) !important;
    line-height: 1.15 !important;
  }
  body:not(#dk-font-override).page-id-78 :is(
    .dk-services-description p, .dk-project-description p, .dk-about-intro p,
    .dk-about-banner-desc p, .dk-contact-intro p, .dkt-v2__intro p,
    .dkg-description p
  ) {
    font-family: var(--dk-mobile-body-font) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 2 !important;
  }
  body:not(#dk-font-override).page-id-78 .dk-services-section .dk-service-heading .elementor-heading-title,
  body:not(#dk-font-override).page-id-78 .dk-services-section .dk-service-heading .elementor-heading-title a {
    font-family: var(--dk-mobile-body-font) !important;
    font-size: clamp(14px, 4.27vw, 16.667px) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }
  body:not(#dk-font-override).page-id-78 .dk-services-section .dk-service-summary p,
  body:not(#dk-font-override).page-id-78 .dk-about-section .dk-about-reason-text p {
    font-family: var(--dk-mobile-body-font) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.66 !important;
  }
  body:not(#dk-font-override).page-id-78 .dk-about-section .dk-about-reason-title .elementor-heading-title {
    font-family: var(--dk-mobile-body-font) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  /* Portfolio: both PSD display lines are 33.333px; card captions are Poppins. */
  body:not(#dk-font-override).page-id-78 .dk-projects-section .dk-project-title-a .elementor-heading-title,
  body:not(#dk-font-override).page-id-78 .dk-projects-section .dk-project-title-b .elementor-heading-title,
  body:not(#dk-font-override).page-id-78 .dk-managed-references :is(.dk-project-title-a, .dk-project-title-b) {
    font-family: var(--dk-mobile-title-font) !important;
    font-size: clamp(29px, 8.547vw, 33.333px) !important;
    font-weight: 700 !important;
    line-height: 1.17 !important;
  }
  body:not(#dk-font-override).page-id-78 :is(
    .dk-projects-section .dk-project-name .elementor-heading-title,
    .dk-projects-section .dk-project-name .elementor-heading-title a,
    .dk-managed-references .dk-project-name,
    .dk-managed-references .dk-project-name a
  ) {
    font-family: var(--dk-mobile-body-font) !important;
    font-size: clamp(13px, 3.95vw, 15.42px) !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }
  body:not(#dk-font-override).page-id-78 :is(
    .dk-projects-section .dk-project-kind p, .dk-managed-references .dk-project-kind
  ) {
    font-family: var(--dk-mobile-body-font) !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
  }

  /* Collaboration banner and customer testimonials. */
  body:not(#dk-font-override).page-id-78 .dk-about-cta-section .dk-about-banner-title .elementor-heading-title {
    font-size: clamp(22px, 6.41vw, 25px) !important;
    line-height: 1.6 !important;
  }
  body:not(#dk-font-override).page-id-78 .dkt-v2 .dkt-v2__intro h2 {
    font-size: clamp(22px, 6.41vw, 25px) !important;
    line-height: 1.25 !important;
  }
  body:not(#dk-font-override).page-id-78 .dkt-v2 .dkt-v2__intro h2 span {
    font-size: clamp(29px, 8.547vw, 33.333px) !important;
    line-height: 1.18 !important;
  }
  body:not(#dk-font-override).page-id-78 .dkt-v2 .dkt-v2__quote {
    font-family: var(--dk-mobile-body-font) !important;
    font-size: 12.5px !important;
    font-weight: 300 !important;
    line-height: 2 !important;
  }

  /* Statistics: figures 25px Poppins bold, captions 14.583px regular. */
  body:not(#dk-font-override).page-id-78 .dks-statistics .dks-value .elementor-heading-title {
    font-family: var(--dk-mobile-body-font) !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }
  body:not(#dk-font-override).page-id-78 .dks-statistics .dks-label .elementor-heading-title {
    font-family: var(--dk-mobile-body-font) !important;
    font-size: clamp(12px, 3.74vw, 14.583px) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
  }

  /* Mobile footer uses Playfair for column headings and Poppins Light for links. */
  body:not(#dk-font-override).page-id-78 .dkf-editorial h3 {
    font-size: 16.667px !important;
    line-height: 1.25 !important;
  }
  body:not(#dk-font-override).page-id-78 .dkf-editorial :is(
    .dkf-description, .dkf-linklist a, .dkf-contact-line a
  ) {
    font-family: var(--dk-mobile-body-font) !important;
    font-size: 12.5px !important;
    font-weight: 300 !important;
  }

  /* Functional controls remain readable without modifying their sizing/positioning. */
  body:not(#dk-font-override).page-id-78 :is(
    .dk-services-all .elementor-button, .dk-project-cta .elementor-button,
    .dk-about-banner-btn .elementor-button, .dk-contact-form-fields input,
    .dk-contact-form-fields textarea, .dkf-contact-cta
  ) {
    font-family: var(--dk-mobile-body-font) !important;
    font-size: 12.5px !important;
  }
}