/**
 * Referanser #127 — reference-PSD hero parity (2026-11-02).
 * PSD canvas: 1500×3248. Hero title ink origin ≈(164,158).
 * Exact existing Media Library asset #333; page #127 only.
 * Keep the site's shared header/footer and Elementor content unchanged.
 */
html body.page-id-127 .dkr-design.dkr-hero {
  background-color: #001216 !important;
  background-image: url("https://www.digitalkreativ.no/wp-content/uploads/2026/10/Digital-Kreativ-—-PSD-Figma-exact-hero-photograph.png") !important;
  background-repeat: no-repeat !important;
}

/* The PSD office artwork is placed at y=42 on its 1500px-wide canvas.
 * The banner title is positioned independently from the image crop. */
@media (min-width: 768px) {
  html body.page-id-127 .dkr-design.dkr-hero {
    min-height: 343px;
    justify-content: flex-start !important;
    padding-top: 151px !important;
    padding-bottom: 75px !important;
    padding-left: max(28px, calc((100% - 1170px) / 2)) !important;
    padding-right: max(28px, calc((100% - 1170px) / 2)) !important;
    background-size: cover !important;
    background-position: center 42px !important;
  }
  html body.page-id-127 .dkr-hero-title .elementor-heading-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 37px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }
  html body.page-id-127 .dkr-hero-title { margin-bottom: 8px !important; }
  html body.page-id-127 .dkr-design.dkr-hero::before {
    background:
      linear-gradient(to right, rgba(0,8,13,.72), rgba(0,8,13,.12) 63%, transparent 90%),
      linear-gradient(to bottom, transparent 39%, rgba(0,6,10,.16) 57%, #000807 100%) !important;
  }
}

/* No mobile PSD supplied: retain existing verified responsive layout,
 * only exchange its banner image for the reference photograph. */
@media (max-width: 767px) {
  html body.page-id-127 .dkr-design.dkr-hero {
    background-position: 61% top !important;
    background-size: cover !important;
  }
}

/*
 * Referanser breadcrumb/header geometry from the layered 1500px PSD.
 * Header visual height: 108px. The page's older Elementor HTML pulled
 * the hero back by only 85px, shifting the banner down by 23px and making
 * the menu appear to encroach into the breadcrumb banner.
 *
 * Pull the background behind the header by its full visual height, while
 * retaining the 151px top inset of the heading. The title sits at y≈151
 * (glyph y≈158), breadcrumb at y≈204–211, matching the PSD. End of hero
 * stays at y≈343 so the following proof section is not displaced.
 * Desktop only; mobile uses its existing 76px responsive header.
 */
@media (min-width: 1101px) {
  html body.page-id-127 .dkr-design.dkr-hero {
    margin-top: -108px !important;
  }
  html body.page-id-127 .dkr-design.dkr-hero .dkr-hero-title,
  html body.page-id-127 .dkr-design.dkr-hero .dkr-crumbs {
    position: relative !important;
    z-index: 1 !important;
  }
}