/* Tjenester page #310: first PSD-parity pass, 1500px desktop reference.
 * Leave global navigation/footer and all tablet/mobile breakpoints intact.
 * The existing page contains later inline !important rules; html-qualified
 * selectors intentionally take precedence without editing live page content.
 */
@media (min-width: 1101px) {
  /* Section 1 — exact desktop PSD reference (1500 x 3099).
   * The shared desktop header is 108px high; overlap that full height so
   * the hero image begins at PSD canvas y=0, without changing the header.
   * Photoshop background artwork begins y=42 and fades out by y=328.
   */
  html body.page-id-310 .dko-hero {
    min-height: 328px !important;
    margin-top: -108px !important;
    background-color: #010d13 !important;
    background-size: cover !important;
    background-position: center 42px !important;
  }
  html body.page-id-310 .dko-hero::before {
    background:
      linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 48%,
        rgba(0, 0, 0, .20) 61%,
        rgba(0, 0, 0, .60) 80%,
        #000 100%),
      linear-gradient(90deg,
        rgba(0, 9, 15, .93) 0%,
        rgba(0, 9, 15, .76) 29%,
        rgba(0, 9, 15, .43) 52%,
        rgba(0, 9, 15, .07) 85%) !important;
  }
  /* PSD heading x=163 y=158; breadcrumb x=165 y=211.
   * Existing flex alignment is retained to preserve the natural flow.
   */
  html body.page-id-310 .dko-hero-inner {
    width: min(1175px, 100%) !important;
    max-width: 1175px !important;
    gap: 0 !important;
    --gap: 0px !important;
    --row-gap: 0px !important;
    transform: translateY(-10px) !important;
  }
  html body.page-id-310 .dko-hero-title .elementor-heading-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 33.3333px !important;
    font-weight: 700 !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
  }
  html body.page-id-310 .dko-hero-crumbs :is(li, a) {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 16.6667px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    color: #fff !important;
  }
  html body.page-id-310 .dko-hero-crumbs li + li::before {
    color: #fff !important;
  }

  /* Section 2 — native PSD layer measurement at 1500px:
   * heading x=162 y=370; paragraph x=163 y=529 w=560;
   * benefits icon row y=734 and label row y=781;
   * status frame x=812 y=411 w=518 h=374.
   * Preserve Elementor copy, status markup and existing CF7.
   */
  html body.page-id-310 .dko-intro {
    padding-top: 42px !important;
    padding-bottom: 72px !important;
    background: #000 !important;
  }
  html body.page-id-310 .dko-intro-inner {
    width: min(1176px, 100%) !important;
    max-width: 1176px !important;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr) !important;
    column-gap: 82px !important;
    align-items: center !important;
  }
  /* Elementor's default 20px widget gap was added on top of the
   * exact PSD margins for kicker, headline, paragraph and benefits.
   * Removing that implicit gap restores the source's 560px intro. */
  html body.page-id-310 .dko-intro .dko-intro-copy {
    gap: 0 !important;
    --gap: 0px !important;
    --row-gap: 0px !important;
    --column-gap: 0px !important;
  }
  /* Homepage heading convention: white Playfair Bold + larger turquoise
   * Playfair Bold, with no artificial widget gap. Keep the first turquoise
   * line on one line within Section 2's 560px text column.
   * At the 1500px PSD viewport the heading stack remains ~158px tall,
   * preserving the paragraph/status-card alignment while improving scale.
   */
  html body.page-id-310 .dko-intro-kicker,
  html body.page-id-310 .dko-intro-title {
    padding: 0 !important;
    gap: 0 !important;
  }
  html body.page-id-310 .dko-intro-kicker {
    margin: 0 !important;
  }
  html body.page-id-310 .dko-intro-kicker .elementor-heading-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
    font-size: clamp(28px, 2.22222vw, 33.3333px) !important;
    font-weight: 700 !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
  }
  html body.page-id-310 .dko-intro-title {
    margin: 0 0 24px !important;
  }
  html body.page-id-310 .dko-intro-title .elementor-heading-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
    font-size: clamp(34px, 2.66667vw, 40px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    color: #3edfd0 !important;
  }
  html body.page-id-310 .dko-intro-copytext {
    max-width: 560px !important;
    margin-bottom: 24px !important;
  }
  html body.page-id-310 .dko-intro-copytext p {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 16.6667px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    letter-spacing: 0 !important;
  }
  /* Original PSD benefit art is already in WordPress Media Library.
   * Keep the existing semantic text; swap only the placeholder SVG artwork.
   */
  html body.page-id-310 .dko-benefit svg {
    display: none !important;
  }
  html body.page-id-310 .dko-benefit::before {
    content: "" !important;
    flex: 0 0 38px;
    display: block;
    width: 37px;
    height: 38px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: brightness(0) saturate(100%) invert(82%) sepia(42%) saturate(671%) hue-rotate(113deg) brightness(97%) contrast(93%);
  }
  html body.page-id-310 .dko-benefit:nth-child(1)::before {
    background-image: url('https://www.digitalkreativ.no/wp-content/uploads/2026/10/3749988.png');
  }
  html body.page-id-310 .dko-benefit:nth-child(2)::before {
    background-image: url('https://www.digitalkreativ.no/wp-content/uploads/2026/10/2153534.png');
  }
  html body.page-id-310 .dko-benefit:nth-child(3)::before {
    background-image: url('https://www.digitalkreativ.no/wp-content/uploads/2026/10/8705981.png');
  }
  html body.page-id-310 .dko-benefit:nth-child(4)::before {
    background-image: url('https://www.digitalkreativ.no/wp-content/uploads/2026/10/17553731.png');
  }
  html body.page-id-310 .dko-benefit {
    gap: 8px !important;
    padding-left: 14px !important;
    padding-right: 8px !important;
  }
  html body.page-id-310 .dko-benefit:first-child {
    padding-left: 0 !important;
  }
  html body.page-id-310 .dko-benefit span {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 300 !important;
    font-size: 12.5px !important;
    line-height: 1.6667 !important;
    letter-spacing: 0 !important;
  }
  /* Card: exact Photoshop outer geometry and inner pixel placements. */
  html body.page-id-310 .dko-status {
    width: 518px !important;
    max-width: 100% !important;
    transform: translateY(6px) !important;
  }
  html body.page-id-310 .dko-status-card {
    min-height: 374px !important;
    height: 374px !important;
    padding: 38px 39px 37px !important;
    background: #000 !important;
    border: 1px solid rgba(255,255,255,.85) !important;
    border-radius: 35px !important;
  }
  html body.page-id-310 .dko-status-top {
    margin-bottom: 22px !important;
  }
  html body.page-id-310 .dko-status-top strong {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 16.6667px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
  }
  html body.page-id-310 .dko-status-badge {
    flex: 0 0 175px !important;
    width: 175px !important;
    height: 39px !important;
    padding: 0 15px !important;
    gap: 10px !important;
    border-radius: 999px !important;
    background: #103834 !important;
    color: #3edfd0 !important;
    font: 400 16.6667px/1.2 'Poppins', Arial, sans-serif !important;
  }
  html body.page-id-310 .dko-status-badge i {
    width: 9px !important;
    height: 9px !important;
  }
  html body.page-id-310 .dko-status-metric {
    position: relative !important;
    height: 150px !important;
    min-height: 150px !important;
    padding: 0 !important;
    background: #103834 !important;
    border-radius: 18px !important;
  }
  html body.page-id-310 .dko-status-metric > span {
    position: absolute !important;
    top: 17px !important;
    left: 25px !important;
    font: 400 16.6667px/1.75 'Poppins', Arial, sans-serif !important;
  }
  html body.page-id-310 .dko-status-metric > strong {
    position: absolute !important;
    top: 51px !important;
    left: 27px !important;
    margin: 0 !important;
    font: 600 41.6667px/1.2 'Poppins', Arial, sans-serif !important;
  }
  html body.page-id-310 .dko-status-bar {
    position: absolute !important;
    top: 115px !important;
    left: 25px !important;
    right: 25px !important;
    width: auto !important;
    height: 12px !important;
    background: #1c625b !important;
  }
  html body.page-id-310 .dko-status-card > p {
    margin-top: 30px !important;
    font: 400 14.5833px/2 'Poppins', Arial, sans-serif !important;
    color: #fff !important;
  }

  /* Section 3, PSD reference 1500 x 3099:
     green pattern: y=887..1236 (349px); header x=123 y=954;
     description x=827 y=982; cards top=1096, bottom=1400;
     x=[123,444,764,1085], each ~294x304, gutters ~27px.
     This section is scoped to desktop page #310; Elementor data
     and shared components remain unchanged. */
  html body.page-id-310 .dko-services {
    padding: 66px 24px 71px !important;
    background: #000 !important;
  }
  html body.page-id-310 .dko-services::before {
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 349px !important;
    background: #103834 !important;
    opacity: 1 !important;
  }
  /* The Photoshop pattern is a separate layer at ~35% opacity. */
  html body.page-id-310 .dko-services::after {
    content: "" !important;
    display: block !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 349px !important;
    opacity: .35 !important;
    background: url('https://www.digitalkreativ.no/wp-content/uploads/2026/10/pattern-1.png') center top / 1500px auto no-repeat !important;
  }
  html body.page-id-310 .dko-services-inner {
    width: min(1256px, 100%) !important;
    max-width: 1256px !important;
    gap: 0 !important;
    --gap: 0px !important;
    --row-gap: 0px !important;
    --column-gap: 0px !important;
  }
  html body.page-id-310 .dko-services-headcopy {
    gap: 0 !important;
    --gap: 0px !important;
    --row-gap: 0px !important;
  }
  html body.page-id-310 .dko-services-heading {
    grid-template-columns: minmax(0, 1.11fr) minmax(0, .89fr) !important;
    gap: 20px !important;
    align-items: end !important;
    margin: 0 0 53px !important;
  }
  html body.page-id-310 .dko-services-kicker {
    margin: 0 0 8px !important;
  }
  html body.page-id-310 .dko-services-kicker .elementor-heading-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    color: #fff !important;
  }
  html body.page-id-310 .dko-services-title {
    margin: 0 !important;
  }
  html body.page-id-310 .dko-services-title .elementor-heading-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 33.3333px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    color: #3edfd0 !important;
    white-space: nowrap !important;
  }
  html body.page-id-310 .dko-services-copy {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 1px !important;
    align-self: end !important;
  }
  /* PSD text layer #142: Poppins-Regular, 16.66667px, fixed
   * leading 29.16667px. Elementor already contains the single <br>
   * between the two sentences. Do not allow automatic wrapping to
   * introduce a third line on desktop; scale proportionally below 1500px.
   */
  body:not(#dk-font-override).page-id-310 .dko-services .dko-services-copy p {
    font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
    font-size: clamp(12px, 1.111111vw, 16.66667px) !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    color: #fff !important;
  }

  /* Four exactly proportioned cards: 294x304 at the 1500px PSD viewport. */
  html body.page-id-310 .dko-services .dko-services-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 26.6667px !important;
    max-width: 1256px !important;
    align-items: stretch !important;
  }
  html body.page-id-310 .dko-services .dko-card {
    border: 1px solid #119e91 !important;
    border-radius: 24px !important;
    background: #0c0a0a !important;
    box-shadow: 0 12px 23px rgba(0,0,0,.54), 0 0 15px rgba(40,204,187,.13) !important;
  }
  html body.page-id-310 .dko-services .dko-card-image {
    aspect-ratio: 3 / 2 !important;
    border-radius: 23px !important;
    border-bottom: 1px solid rgba(62,223,208,.7) !important;
  }
  html body.page-id-310 .dko-services .dko-card-image img {
    transform: scale(1.05) !important;
  }
  html body.page-id-310 .dko-services .dko-card-body {
    min-height: 108px !important;
    padding: 16px 18px 11px !important;
    background: #0c0a0a !important;
  }
  /* All four cards start in the same neutral state. The PSD's
   * highlighted first card is treated as an interaction example, not
   * a permanently selected/default hover state.
   */
  html body.page-id-310 .dko-services .dko-card-title {
    margin: 0 0 7px !important;
    padding: 0 30px 0 0 !important;
  }
  /* Photoshop card text has a 0.8099 horizontal/vertical TySh
     transform. Effective font sizes are 18.3465*.8099=14.86px for
     Poppins SemiBold card titles and 16.0532*.8099=13px for descriptions.
     Outrank the global ID-specific heading-font rule (Playfair). */
  body:not(#dk-font-override).page-id-310 .dko-services .dko-card-title .elementor-heading-title,
  body:not(#dk-font-override).page-id-310 .dko-services .dko-card-title .elementor-heading-title a {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 14.86px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  body:not(#dk-font-override).page-id-310 .dko-services .dko-card:nth-child(3) .dko-card-title .elementor-heading-title,
  body:not(#dk-font-override).page-id-310 .dko-services .dko-card:nth-child(3) .dko-card-title .elementor-heading-title a {
    text-transform: capitalize !important;
  }
  html body.page-id-310 .dko-services .dko-card-desc {
    padding: 0 30px 0 0 !important;
  }
  html body.page-id-310 .dko-services .dko-card-desc p {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 20.26px !important;
    letter-spacing: 0 !important;
    color: #f3f3f3 !important;
  }
  /* PSD image-overlay icon frames: 49px at x=card+18, y=1226. */
  html body.page-id-310 .dko-services .dko-card-icon {
    top: -66px !important;
    left: 18px !important;
    width: 49px !important;
    height: 49px !important;
    background: #08796f !important;
    border: 0 !important;
    border-radius: 12px !important;
  }
  html body.page-id-310 .dko-services .dko-card-icon .elementor-icon {
    color: #fff !important;
    fill: #fff !important;
    font-size: 25px !important;
  }
  html body.page-id-310 .dko-services .dko-card-icon svg {
    width: 25px !important;
    height: 25px !important;
  }
  /* Original PSD icons #21/#24/#25 are present in the Media Library. */
  html body.page-id-310 .dko-services .dko-card:nth-child(n+2) .dko-card-icon .elementor-icon svg {
    opacity: 0 !important;
  }
  html body.page-id-310 .dko-services .dko-card:nth-child(n+2) .dko-card-icon::after {
    content: "" !important;
    position: absolute !important;
    inset: 10px !important;
    display: block !important;
    pointer-events: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    filter: brightness(0) invert(1) !important;
  }
  html body.page-id-310 .dko-services .dko-card:nth-child(2) .dko-card-icon::after {
    background-image: url('https://www.digitalkreativ.no/wp-content/uploads/2026/10/1997928.png') !important;
  }
  html body.page-id-310 .dko-services .dko-card:nth-child(3) .dko-card-icon::after {
    background-image: url('https://www.digitalkreativ.no/wp-content/uploads/2026/10/4091459.png') !important;
  }
  html body.page-id-310 .dko-services .dko-card:nth-child(4) .dko-card-icon::after {
    background-image: url('https://www.digitalkreativ.no/wp-content/uploads/2026/10/4201611.png') !important;
  }
  /* Compact vertical pill at x=card+250 / 25x39px. */
  html body.page-id-310 .dko-services .dko-card-link {
    right: 18px !important;
    bottom: 19px !important;
    width: 25px !important;
    height: 39px !important;
  }
  html body.page-id-310 .dko-services .dko-card-link .elementor-button {
    width: 25px !important;
    min-width: 25px !important;
    height: 39px !important;
    min-height: 39px !important;
    background: #3edfd0 !important;
    color: #052a28 !important;
  }
  /* Show the turquoise/green highlight only on interaction.
   * Keyboard focus gets the same treatment as pointer hover. */
  html body.page-id-310 .dko-services .dko-card:focus-within .dko-card-body {
    background: #103834 !important;
  }
  @media (hover:hover) and (pointer:fine) {
    html body.page-id-310 .dko-services .dko-card:hover .dko-card-body {
      background: #103834 !important;
    }
    html body.page-id-310 .dko-services .dko-card:hover .dko-card-image img {
      transform: scale(1.075) !important;
    }
  }

  /* Section 4 — "Hvordan Vi Jobber" / "Fra Idé til Suksess".
     Native PSD 1500px canvas: heading y=1506..1577; intro y=1614..1632;
     four cards x=124,446,767,1087 and y=1672..1981. The following
     styles keep all four Elementor cards, labels and original icon media. */
  html body.page-id-310 .dko-process {
    background: #000 !important;
    padding: 36px 24px 98px !important;
  }
  /* Elementor flex-container default widget gap added unwanted vertical
     space between the two headings, intro and cards. The PSD positions
     are driven by the explicit widget margins below, not implicit gaps. */
  html body.page-id-310 .dko-process > .dk-service-shell {
    width: min(1252px, 100%) !important;
    max-width: 1252px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    --gap: 0px !important;
    --row-gap: 0px !important;
    --column-gap: 0px !important;
  }
  html body.page-id-310 .dko-process-kicker {
    margin: 0 0 7px !important;
    text-align: center !important;
  }
  html body.page-id-310 .dko-process-kicker .elementor-heading-title {
    color: #fff !important;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
  }
  html body.page-id-310 .dko-process-title {
    margin: 0 0 19px !important;
    text-align: center !important;
  }
  html body.page-id-310 .dko-process-title .elementor-heading-title {
    color: #3edfd0 !important;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
    font-size: 33.3333px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }
  html body.page-id-310 .dko-process-intro {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto 37px !important;
    text-align: center !important;
  }
  html body.page-id-310 .dko-process-intro p {
    color: #fff !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 16.6667px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  html body.page-id-310 .dko-process .dk-service-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 1252px !important;
    gap: 27px !important;
    align-items: stretch !important;
  }
  /* The PSD card frame is 309px high at 1500px. Allow growth if
     browser font metrics or zoom need extra height, rather than clipping
     Utvikling's fifth line. A stretching grid keeps all cards equal. */
  html body.page-id-310 .dko-process .dk-service-step {
    min-height: 309px !important;
    height: auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    --gap: 0px !important;
    --row-gap: 0px !important;
    --column-gap: 0px !important;
    padding: 18px 25px 26px !important;
    background: #1b1b1b !important;
    border: 0 !important;
    border-radius: 25px !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  html body.page-id-310 .dko-process .dk-service-step__header {
    width: 100% !important;
    min-height: 70px !important;
    height: 70px !important;
    flex: 0 0 70px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body.page-id-310 .dko-process .dk-service-step__header .elementor-widget-container {
    width: 100% !important;
    height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body.page-id-310 .dko-process .dk-service-step__decor {
    height: 70px !important;
    width: 100% !important;
  }
  html body.page-id-310 .dko-process .dk-service-step__icon {
    width: 67px !important;
    height: 67px !important;
    background: #087e75 !important;
    border-radius: 13px !important;
  }
  html body.page-id-310 .dko-process .dk-service-step__icon img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
  }
  html body.page-id-310 .dko-process .dk-service-step__number {
    top: -20px !important;
    right: -2px !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 100px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -.065em !important;
    color: rgba(255,255,255,.17) !important;
  }
  /* PSD title glyph tops: y=1785..1788; description y=1834..1835.
     Header 70 + title top margin 22 + title line 30 + bottom margin 16
     place the desc at the source's measured 162px inset. */
  html body.page-id-310 .dko-process .dk-service-step__title {
    display: block !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 22px 0 16px !important;
    padding: 0 !important;
    position: relative !important;
  }
  html body.page-id-310 .dko-process .dk-service-step__title .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
  }
  html body.page-id-310 .dko-process .dk-service-step__title .elementor-heading-title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    color: #fff !important;
  }
  html body.page-id-310 .dko-process .dk-service-step__desc {
    display: block !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  html body.page-id-310 .dko-process .dk-service-step__desc .elementor-widget-container {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  html body.page-id-310 .dko-process .dk-service-step__desc p {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 16.6667px !important;
    font-weight: 400 !important;
    line-height: 25px !important;
    letter-spacing: 0 !important;
    color: #aaa !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-wrap: break-word !important;
  }
  /* Strategy is the teal active example in the Photoshop source.
     Hover still highlights any other card; original content stays editable. */
  html body.page-id-310 .dko-process .dk-service-step:first-child {
    background: #16453f !important;
  }
  html body.page-id-310 .dko-process .dk-service-step:first-child .dk-service-step__desc p {
    color: #fff !important;
  }
  html body.page-id-310 .dko-process .dk-service-step:first-child .dk-service-step__title .elementor-heading-title {
    color: #3edfd0 !important;
  }
  html body.page-id-310 .dko-process .dk-service-step:hover,
  html body.page-id-310 .dko-process .dk-service-step:focus-within {
    background: #16453f !important;
    border-color: transparent !important;
  }
  html body.page-id-310 .dko-process .dk-service-step:hover .dk-service-step__desc p,
  html body.page-id-310 .dko-process .dk-service-step:focus-within .dk-service-step__desc p {
    color: #fff !important;
  }
  html body.page-id-310 .dko-process .dk-service-step:focus-within .dk-service-step__title .elementor-heading-title {
    color: #3edfd0 !important;
  }

  /* Section 5 — the approved homepage contact section is already the
   * same Elementor subtree / CF7 #239. Desktop geometry and form styling
   * come from the shared assets/css/contact.css stylesheet on both
   * pages. Override only Tjenester's stale 1290px inline container cap
   * so the homepage's 1500px positioning coordinates work unchanged. */
  html body.page-id-310 .dko-contact .dk-contact-inner.elementor-element {
    max-width: 1500px !important;
    width: 100% !important;
  }
}

/* Keep inherited Elementor flex gaps from doubling the authored margins at
 * tablet and phone sizes. Do not alter the contact form or shared footer. */
@media (max-width: 1100px) {
  html body.page-id-310 .dko-hero-inner,
  html body.page-id-310 .dko-intro .dko-intro-copy,
  html body.page-id-310 .dko-services-inner,
  html body.page-id-310 .dko-services-headcopy,
  html body.page-id-310 .dko-process > .dk-service-shell {
    gap: 0 !important;
    --gap: 0px !important;
    --row-gap: 0px !important;
    --column-gap: 0px !important;
  }
}

/* The approved homepage mobile PSD uses ~48px of breathing room at major
 * section transitions, with exceptional treatment for hero/form/footer.
 * Apply that mobile rhythm only to the three content sections; the shared
 * contact layout and approved global footer keep their existing styling. */
@media (max-width: 767px) {
  body.page-id-310 {
    --dk-mobile-section-space: clamp(42px, 12.3077vw, 48px);
  }
  html body.page-id-310 .dko-intro,
  html body.page-id-310 .dko-services,
  html body.page-id-310 .dko-process {
    padding-top: var(--dk-mobile-section-space) !important;
    padding-bottom: var(--dk-mobile-section-space) !important;
  }
}

/* Tjenester copy-overflow correction (4 Nov 2026).
 * The earlier PSD rules forced nowrap for shorter headings and description.
 * The new approved Norwegian copy must wrap INSIDE the two columns, never
 * overlap adjacent text or extend off-screen. Limit changes to page #310.
 */
html body.page-id-310 .dko-services .dko-services-heading,
html body.page-id-310 .dko-services .dko-services-headcopy,
html body.page-id-310 .dko-services .dko-services-title,
html body.page-id-310 .dko-services .dko-services-copy {
  min-width: 0 !important;
  max-width: 100% !important;
}
html body.page-id-310 .dko-services .dko-services-title .elementor-heading-title,
body:not(#dk-font-override).page-id-310 .dko-services .dko-services-copy p {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  max-width: 100% !important;
}
@media (min-width: 1101px) {
  html body.page-id-310 .dko-services .dko-services-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
    column-gap: clamp(24px, 3vw, 42px) !important;
    align-items: center !important;
  }
}
@media (max-width: 1100px) {
  html body.page-id-310 .dko-services .dko-services-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 16px !important;
    align-items: start !important;
  }
  html body.page-id-310 .dko-services .dko-services-headcopy,
  html body.page-id-310 .dko-services .dko-services-copy {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    align-self: start !important;
  }
}