/*
Theme Name:        Styrk Reklame 2.0
Theme URI:         https://styrkreklame.no
Author:            Styrk Reklame AS
Author URI:        https://styrkreklame.no
Description:       Styrk Reklame-spesifikt child theme av Styrk Theme. Design 2.0 token swap (deep green / cream / amber) for styrkreklame.no — reklamebyrå i Stjørdal. Alle blokker arves fra parent + styrk-blocks-pluginen.
Template:          styrk-theme
Version:           0.1.0
Text Domain:       styrkreklame-theme
Requires at least: 6.4
Requires PHP:      8.1
*/

/* ══════════════════════════════════════════════════════════════════════════
   404 — dark-green gradient with a subtle amber flare + massive 404
   ══════════════════════════════════════════════════════════════════════════ */
/* 404 page is fully dark — kill the cream body background so no light strip
   ever shows around the band (seamless). */
body.error404 { background-color: var(--wp--preset--color--primary, #0a2020) !important; }

.styrk-404 {
  /* seamless dark band, flush to header + footer; the "air" is internal —
     a tall band with centred content spaced well away from the edges. */
  min-height: clamp(600px, 82vh, 900px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(72px, 12vh, 180px) clamp(20px, 5vw, 56px);
  background:
    radial-gradient(58% 48% at 72% 16%, rgba(240, 168, 60, 0.22), transparent 60%),
    radial-gradient(40% 40% at 12% 90%, rgba(240, 168, 60, 0.08), transparent 60%),
    linear-gradient(165deg, #173838 0%, #0a2020 70%);
  color: #fff;
  overflow: hidden;
}
.styrk-404__inner { display: flex; flex-direction: column; align-items: center; }
.styrk-404__code {
  font-family: var(--wp--preset--font-family--display, "Barlow Condensed"), sans-serif;
  font-weight: 700;
  font-size: clamp(120px, 24vw, 320px);
  line-height: 0.82;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
  text-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.styrk-404__title {
  font-family: var(--wp--preset--font-family--display, "Barlow Condensed"), sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.05;
  margin: 14px 0 0;
  color: #fff;
}
.styrk-404__text {
  color: rgba(255, 255, 255, 0.7);
  max-width: 46ch;
  margin: 18px auto 0;
  line-height: 1.6;
  font-size: 17px;
}
.styrk-404__actions { margin-top: 34px; justify-content: center; gap: 12px; flex-wrap: wrap; }
.styrk-404__btn .wp-block-button__link {
  border-radius: 9999px;
  padding: 14px 28px;
  font-weight: 600;
  background: var(--wp--preset--color--accent, #f0a83c);
  color: var(--wp--preset--color--primary, #0a2020);
}
.styrk-404__btn.is-ghost .wp-block-button__link {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.styrk-404__btn.is-ghost .wp-block-button__link:hover {
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent, #f0a83c);
  color: var(--wp--preset--color--accent, #f0a83c);
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE HEADER — interior-page hero (dark brand band)
   The standard hero for every non-frontpage page: templates/page.html inserts
   the styrk-blocks/page-header block in place of the old auto-hero. Same
   teal→ink gradient + amber accent + Barlow Condensed system as the homepage
   hero and the 404, so inner pages read as one cohesive brand surface. The
   block auto-fills on unedited pages (breadcrumb + ancestor eyebrow + post
   title). These rules also load in the editor canvas (add_editor_style), so
   the Site-Editor preview matches the front end and replaces the block's old
   light-surface / Fraunces-serif look.
   ══════════════════════════════════════════════════════════════════════════ */
/* Selectors below are deliberately raised one specificity notch (the section
   class is doubled; children are parent-prefixed) so they beat the shared
   plugin's editor-scoped `.editor-styles-wrapper .cb-page-header*` rules inside
   the Site-Editor canvas regardless of stylesheet load order. Without this the
   editor preview falls back to the block's old light-surface / Fraunces look
   while the front end shows the dark band — breaking editor↔front parity. */
.cb-page-header.cb-page-header {
  position: relative;
  background:
    radial-gradient(58% 60% at 80% 6%, rgba(240, 168, 60, 0.20), transparent 60%),
    radial-gradient(42% 50% at 4% 98%, rgba(240, 168, 60, 0.07), transparent 60%),
    linear-gradient(165deg, #173838 0%, #0a2020 72%);
  color: #fff;
  overflow: hidden;
  /* The parent theme pads alignfull sections ~212/160px — far too tall for a
     page header, leaving the title floating in dead space. Set a header-scaled
     rhythm instead. Inline padding is zeroed here so the inner container owns
     the gutter and lines up exactly with the page's content sections. */
  padding-block: clamp(88px, 13vh, 156px) clamp(64px, 9vh, 112px);
  padding-inline: 0;
}
/* Kill the block's old teal hairline (plugin draws a ::before rule at
   top:100px for the light-surface design) — the dark band doesn't use it. */
.cb-page-header.cb-page-header::before { content: none; display: none; }
/* Mirror the site content container (.max-w-site-md mx-auto px-6 = 1200px wide,
   centred, 24px gutter) so the header's left edge lines up with the content
   sections below it AND the react-header/footer above/below — all four rails
   ride on the same 1200 axis. Bumped down from 1440 when the rail refactor
   shrunk content to 1200; the page-header lagged behind, causing the
   breadcrumb + title to read way left of the rest. */
.cb-page-header .cb-page-header__inner,
.block-contact .contact-layout {
  box-sizing: border-box;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--styrk-rail-pad);
}
/* The content rail every section rides on (.max-w-site-md px-13): 1280px,
   gutter 16 → 32 → 52px. The page header and the contact form used older
   1200/24 and clamp() gutters, so their left edge sat off the rest. */
:root { --styrk-rail-pad: 16px; }
@media (min-width: 640px) { :root { --styrk-rail-pad: 32px; } }
@media (min-width: 1024px) { :root { --styrk-rail-pad: 52px; } }

/* Breadcrumb — subtle white trail, amber separators, current page solid. */
.cb-page-header .cb-page-header__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-family: var(--wp--preset--font-family--base);
  font-size: 13px;
  letter-spacing: 0.01em;
}
.cb-page-header .cb-page-header__crumb-link {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 0.2s ease;
}
.cb-page-header .cb-page-header__crumb-link:hover,
.cb-page-header .cb-page-header__crumb-link:focus-visible {
  color: var(--wp--preset--color--accent, #f0a83c);
}
.cb-page-header .cb-page-header__crumb-sep {
  color: var(--wp--preset--color--accent, #f0a83c);
  opacity: 0.75;
  font-size: 9px;
}
.cb-page-header .cb-page-header__crumb-current { color: #fff; }

/* Eyebrow — amber Barlow caps, matches hero/section eyebrows. */
.cb-page-header .cb-page-header__eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--wp--preset--font-family--display, "Barlow Condensed"), sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent, #f0a83c);
}

/* Title — white Barlow Condensed, the interior counterpart to the hero h1. */
.cb-page-header .cb-page-header__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--display, "Barlow Condensed"), sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
}
.cb-page-header .cb-page-header__title em {
  font-style: italic;
  color: var(--wp--preset--color--accent, #f0a83c);
}

/* Amber hairline accent under the title (replaces the old teal rule).
 * Shared between page-header and hero blocks — the hero's optional accent
 * line is wired by the styrk-blocks plugin to render `.cb-hero__accent-rule`
 * with the same dimensions/colour so the two heroes feel like one family. */
.cb-page-header .cb-page-header__rule,
.cb-hero .cb-hero__accent-rule {
  width: 64px;
  height: 3px;
  margin: 22px 0 0;
  border: 0;
  border-radius: 2px;
  background: var(--wp--preset--color--accent, #f0a83c);
}

/* Subtitle — muted white, body font, reading width. */
.cb-page-header .cb-page-header__subtitle {
  max-width: 60ch;
  margin: 20px 0 0;
  font-family: var(--wp--preset--font-family--base);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* ── Hero block — optional breadcrumb ─────────────────────────────────────
   When admin enables `showBreadcrumb` on a Hero block, render the trail at
   the top of the hero in the same muted-white + amber-separator style as
   the page-header breadcrumb so the two heroes are visually consistent. */
.cb-hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--wp--preset--font-family--base);
  font-size: 13px;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.cb-hero__crumb-link {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 0.2s ease;
}
.cb-hero__crumb-link:hover,
.cb-hero__crumb-link:focus-visible { color: var(--wp--preset--color--accent, #f0a83c); }
.cb-hero__crumb-sep {
  color: var(--wp--preset--color--accent, #f0a83c);
  opacity: 0.75;
  font-size: 9px;
}
.cb-hero__crumb-current { color: #fff; }

/* ── Seamless content→footer transition ──────────────────────────────────
   Interior pages typically end with a full-bleed section (often the dark
   "Klar for å komme i gang?" CTA). The parent theme's main.cb-page-main has
   96px bottom padding, which on those pages exposed a cream strip of the body
   background between the dark section and the dark footer — a jarring band
   between two dark areas. Zero it so the last section meets the footer
   seamlessly; each section already carries its own vertical padding, and the
   footer has its own top padding, so content never crowds the footer.
   The parent styrk-theme/style.css sets `padding: 64px 0 96px !important` on
   main.cb-page-main, so we need both higher specificity (double class) AND
   !important to override the bottom value while leaving the top alone. */
main.cb-page-main.cb-page-main { padding-bottom: 0 !important; }

/* ── Seamless header→hero transition ──────────────────────────────────────
   When a page leads with a hero block (cb-hero / page-auto-hero / project-
   hero), the page-header is auto-suppressed by the styrk-blocks plugin —
   but the parent theme's `padding-top: clamp(3rem, 6vw, 5rem)` on
   main.cb-page-main stays. Body bg (cream) shows through that transparent
   pad as a stripe between the dark sticky header and the dark hero.
   Heroes carry their own internal padding (`py-section`), so collapse the
   top pad when content opens with one. Page-header pages keep the pad. */
main.cb-page-main:has( > .wp-block-post-content > .cb-hero:first-child ),
main.cb-page-main:has( > .wp-block-post-content > .cb-project-hero:first-child ) {
  padding-top: 0 !important;
}

/* Pages with the .cb-page-header dark band (set via body.has-page-header
 * by the styrk-blocks page-header view script): the page-header already
 * carries its own bottom padding, and the first content block under it is
 * typically a full-bleed section that brings its own py-section. The
 * parent theme's 64px main padding-top was adding a cream stripe between
 * the dark header band and the dark content — same cream-gap bug the
 * cb-hero rule above kills, just for the page-header case. */
/* Keyed on the markup with :has(), not only on the body class: view.ts adds
 * .has-page-header at DOMContentLoaded, so the page first painted WITH the
 * 64px pad and then jumped up by 64px (CLS ~0.07 on /kontakt/). The body
 * class selector stays for browsers without :has(). */
body:has(.cb-page-header) main.cb-page-main,
body.has-page-header main.cb-page-main {
  padding-top: 0 !important;
}

/* The parent styrk-theme's theme.json sets wideSize=1440px. This client's
 * rails ride on 1200 (page-header, content blocks, footer). So core
 * alignwide blocks (e.g. the wp-block-columns on Kontakt: heading column
 * + form column) were breaking out to 1440 — wider than the header
 * above them, which read as the content "sticking out" from the rail.
 * Drop wide-size to 1200 client-wide so alignwide naturally caps where
 * the rest of the layout lives. */
:root {
  --wp--style--global--wide-size: 1200px;
}

/* ── Kontakt — contact-form columns ───────────────────────────────────────
   The form is a core wp-block-columns trapped in the 720px post-content column
   (alignwide can't break out the way the alignfull sections on other pages do),
   and the theme zeroes --wp--style--block-gap site-wide — so the intro + form
   columns were both pinched AND butted together with no gutter. Break the block
   out to a comfortable centred width so it reads as wide as the other pages,
   and restore a generous column gap. Scoped via the .styrk-form child so no
   other columns block is touched. Stacks cleanly on mobile (row-gap). */
.cb-page-main .wp-block-columns:has(.styrk-form) {
  width: min(1152px, calc(100vw - 48px));
  max-width: none;
  /* Break out of the centred post-content column and LEFT-align to the
     page-header / footer / content rail (1200 max + 24px gutter on each
     side). The 50%−50vw term resets to the viewport's left edge; we then
     push in by the max-w-site-md offset + 24px gutter. */
  margin-left: calc(50% - 50vw + max((100vw - 1200px) / 2, 0px) + 24px) !important;
  margin-right: 0 !important;
  column-gap: clamp(2.5rem, 5vw, 5rem);
  row-gap: 2.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   TOKEN ALIASES
   ══════════════════════════════════════════════════════════════════════════ */

/* The shared styrk-blocks plugin bakes `var(--wp--preset--color--secondary,
   #0084AF)` into ~24 rules + the faq-accordion answer colour. In the 2.0
   palette there is no separate secondary brand colour, so we dropped the
   duplicate `secondary` swatch from theme.json (it was identical to `accent`
   and showed a confusing twin in every colour picker). Re-define the variable
   here so those plugin defaults keep resolving to amber instead of falling
   back to the old teal #0084AF. No plugin edit; reversible.

   `:root:root` for specificity, not superstition: in the block editor canvas
   WordPress injects its own `:root { --wp--preset--color--secondary: … }`
   AFTER the theme's editor styles, so a single `:root` here lost and the
   editor drew employee bios (and every other rule resolving this token) in
   the global-styles colour while the front end drew amber. Doubling the
   selector wins that tie without touching the plugin or the front end, where
   the value is identical either way. */
:root,
:root:root {
  --wp--preset--color--secondary: var(--wp--preset--color--accent, #f0a83c);

  /* Cream-safe accent. Bright amber (#f0a83c) on cream (#f1ece1) is ~1.7:1 —
     fails WCAG AA. This deeper ochre is ~5:1 on cream, passing AA at any text
     size. Use it for amber accents that sit on the cream interior; keep the
     bright `accent` for amber on dark/green sections. */
  --styrk-accent-cream: #8a5a10;

  /* Styrk Reklame brand fonts (matching the live site), applied in full:
       headings  → Barlow Condensed
       body      → Poppins
       nav       → Oswald (see .rh-* rules below)
     The redesign shipped Inter + Fraunces, which is none of these. */
  --wp--preset--font-family--display: "Barlow Condensed", "Barlow Condensed Fallback", "Barlow Condensed Fallback Android", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wp--preset--font-family--base: "Poppins", "Poppins Fallback", "Poppins Fallback Android", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Body copy → Poppins (brand body font).

   `span` is deliberately NOT in this list. A span inherits its parent's font
   anyway, so naming it here changed nothing in body copy — but it DID override
   headings: colouring one word of an <h2> wraps it in a <span>, which then
   dropped out of the condensed display face and rendered visibly thinner than
   the words around it. */
body,
.wp-site-blocks,
:where(p, li, a, input, textarea, select, button, label, blockquote, figcaption) {
  font-family: var(--wp--preset--font-family--base);
}

/* Eyebrow pills: letter-spacing adds a trailing gap after the LAST letter, so
   the text sat left of centre. A leading spacer as wide as that gap balances
   it. Scoped to pill eyebrows (inline background); plain eyebrows stay flush
   left.
   The pill is a flex row with a 6px gap (it separates text from a <mark>),
   and the spacer became a flex item: it picked up that gap too and pushed the
   text ~3px RIGHT of centre. Pure-text pills drop the gap; pills with a child
   cancel it on the spacer. */
.cb-eyebrow[style*="background"]::before,
.contact-form__eyebrow::before {
  content: "";
  display: inline-block;
  width: 0.18em; /* = .cb-eyebrow letter-spacing */
}
.contact-form__eyebrow::before { width: 0.12em; }
.cb-eyebrow[style*="background"]:not(:has(> *)) { gap: 0; }
.cb-eyebrow[style*="background"]:has(> *):not([style*="inline-block"])::before { margin-right: -6px; }
/* Vertically, Poppins capitals sit above the middle of the line box (the
   font's ascender is far taller than its descender). Move the text down by
   that amount: more padding on top, the same amount less underneath, so the
   pill keeps its height. */
.cb-eyebrow[style*="background"] { padding-top: 9px !important; padding-bottom: 7px !important; }
.cb-process__eyebrow[style*="background"] { padding-top: 7px !important; padding-bottom: 5px !important; }
.contact-form__eyebrow { padding-top: 5.5px !important; padding-bottom: 2.5px !important; }

/* Header right side: search, CTA and hamburger sit 8px apart at the right
   edge. A script used to wrap them in a cluster after load, which moved the
   search icon 40px once the page was already painted. The header row's own
   gap is 48px (16px from 1100px down), so pull each follower back to 8px. */
.site-header-react .rh-search-trigger { margin-left: auto; }
.site-header-react .rh-search-trigger ~ .rh-cta,
.site-header-react .rh-search-trigger ~ .rh-mobile-toggle { margin-left: -40px; }
@media (max-width: 1100px) {
  .site-header-react .rh-search-trigger ~ .rh-cta,
  .site-header-react .rh-search-trigger ~ .rh-mobile-toggle { margin-left: -8px; }
}

/* Navigation → Oswald (brand nav font). */
.rh-desktop-link, .rh-mobile-link, .rh-cta, .styrk-header-cta,
.rh-nav a, .site-header-react nav a {
  font-family: "Oswald", "Oswald Fallback", "Oswald Fallback Android", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* Brand heading treatment: Barlow Condensed is a condensed face, shown bold +
   uppercase on the live site. Apply to all .text-hero (page titles + the home
   hero) so headings read on-brand everywhere, not just inside the hero block. */
.text-hero {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Full-bleed (alignfull) sections use width:100vw, which is wider than the
   content area by the vertical scrollbar's width — producing a few px of
   horizontal scroll and shaving the intended edge gutters. Clip it at the root.
   `clip` (not hidden) doesn't create a scroll container, and the page has no
   sticky/fixed elements, so nothing breaks. */
html { overflow-x: clip; }

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 1 — Design 2.0 homepage
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero: the block ignores palette backgroundColor and falls back to a blue
   gradient. Force the deep-green brand background. Pair with overlayOpacity:0
   on the block so no black overlay darkens it. */
.wp-block-styrk-blocks-hero {
  background: var(--wp--preset--color--primary, #0a2020) !important;
}
/* Deep-green gradient overlay over the background video so the white hero
   text stays legible (replaces the block's flat black overlay). */
.wp-block-styrk-blocks-hero .cb-hero-overlay {
  display: block !important;
  background: linear-gradient(180deg, rgba(10, 32, 32, 0.4) 0%, rgba(10, 32, 32, 0.8) 100%) !important;
  opacity: 1 !important;
}

/* Condensed display headline treatment (Inter heavy, tight) for the hero,
   matching the 2.0 look. */
.wp-block-styrk-blocks-hero .text-hero {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 0.98;
  text-transform: uppercase;
}
.wp-block-styrk-blocks-hero .text-hero em {
  font-family: var(--wp--preset--font-family--display, "Fraunces", serif);
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--accent, #f0a83c);
}

/* Dark section helper — for the price-calc + contact bands wrapped in a
   core/group with the primary background. White text + amber accents. */
.styrk-dark { background: var(--wp--preset--color--primary, #0a2020); color: #fff; }
.styrk-dark :where(h1,h2,h3,h4,p,li,a):not([style*="color"]) { color: #fff; }

/* ...but not inside something that already paints its own text colour. A
   feature card sets `color` on the CARD; its heading and body inherit that
   and carry no inline colour of their own, so the rule above was repainting
   them white and undoing the card's setting. Higher specificity (class +
   attribute) than the rule above, so it wins without !important. */
.styrk-dark [style*="color"] :where(h1,h2,h3,h4,p,li,a) { color: inherit; }
.styrk-dark em { color: var(--wp--preset--color--accent, #f0a83c); font-style: italic; }

/* Dark bands: styrk blocks bake in bg-surface (cream); inside a .styrk-dark
   group let the deep green show through and lift section headings to light.
   White cards stay (good contrast on green). */
.styrk-dark .bg-surface { background: transparent !important; }
/* White text on the dark band — but ONLY where the editor has not picked a
   colour of its own. The blocks write a chosen colour as an inline `style`,
   and `#fff !important` used to beat it: setting the eyebrow to dark green on
   an amber pill changed nothing on screen, which is why it read as "the
   colour control does nothing". The :not() hands those cases back. */
.styrk-dark .cb-featured-projects__heading:not([style*="color"]),
.styrk-dark .cb-cta__heading:not([style*="color"]),
.styrk-dark .cb-cta__body:not([style*="color"]) { color: #fff !important; }

/* The eyebrow is deliberately absent from the list above. It carries its own
   colour system — an explicit `eyebrowTextColor` inline, otherwise the
   plugin's `--cb-eyebrow-default-fg`, which already resolves to the accent on
   dark bands. Forcing white here fought that: it won on specificity inside
   the editor canvas (where WP prefixes theme styles with
   `.editor-styles-wrapper`), so the colour picker appeared to do nothing. */

/* Header logo (React-rendered as .rh-logo) ships at full size — cap height. */
.rh-logo { max-height: 80px !important; width: auto !important; }

/* Header CTA — amber pill.
 *
 * The button itself is rendered by the styrk-blocks react-header as
 * `a.rh-cta` (from Settings → Header). The block sets its colours as INLINE
 * styles and defaults to white-on-amber, which measures ~2.1:1 and fails
 * WCAG AA — so every property the block sets inline is overridden here with
 * !important, and the text becomes dark green on amber (~8:1).
 *
 * .styrk-header-cta is the retired class this theme used to inject itself.
 * It is kept in the selector only so a cached page mid-deploy still looks
 * right; nothing renders it any more. */
.site-header-react a.rh-cta,
.styrk-header-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 14px 28px !important;
  border-radius: 9999px !important;
  background: var(--wp--preset--color--accent, #f0a83c) !important;
  color: var(--wp--preset--color--primary, #0a2020) !important;
  font-weight: 600 !important;
  /* Match the desktop nav link size (rh-desktop-link is 18px) so the CTA
   * doesn't read as a smaller, weaker sibling next to the nav items. */
  font-size: 18px !important;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  /* The block ships no text-shadow; with dark-on-amber none is needed. */
  text-shadow: none !important;
  /* Only the background colour animates. No transform: a 1px lift on a pill
   * this size reads as a twitch rather than feedback, and it nudges the
   * search icon and hamburger beside it in the same flex row. */
  transition: background-color 0.15s ease;
}
/* Hover lightens the FILL only, never the whole element: `filter: brightness()`
 * would lighten the dark-green label too and give back some of the 8.36:1 the
 * label was set to. color-mix keeps the text fixed and stays theme-agnostic —
 * it lightens whatever `accent` is bound to rather than a hardcoded hex. A
 * lighter fill under unchanged dark text also nudges contrast UP, not down. */
.site-header-react a.rh-cta:hover,
.site-header-react a.rh-cta:focus-visible,
.styrk-header-cta:hover,
.styrk-header-cta:focus-visible {
  background: color-mix(in srgb, var(--wp--preset--color--accent, #f0a83c) 88%, #ffffff) !important;
  /* Underline on hover as well as the lighter fill: colour alone is a weak
   * affordance, and it is the only one for anyone who cannot separate the two
   * ambers. 2px at 4px offset matches the CTA underline used elsewhere.
   * !important because the block sets text-decoration:none inline. */
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}

/* In mobile/tablet (hamburger) mode the header CTA pill + search + toggle don't
   fit beside the logo, forcing the whole page into horizontal scroll. The
   react-header switches to the hamburger menu at ≤960px (which carries nav +
   Kontakt), so hide the redundant pill there. */
@media (max-width: 960px) {
  .site-header-react a.rh-cta,
  .styrk-header-cta { display: none !important; }
}

/* Brand focus state. The ring takes the colour that shows against the
   surface it sits on: the dark green on the cream and white surfaces (amber
   on cream is about 1.9:1, under the 3:1 a focus indicator needs), and amber
   on the dark ones: header, footer, page headers, heroes, dark sections and
   the overlays. Dark sections carry .styrk-dark (the plugin adds it from the
   colour picked in the editor), so a section that is switched to dark gets
   the amber ring without anything here changing.
   The React header ships a blue (#0084AF) :focus outline, so override :focus
   on its links explicitly too. */
:root { --styrk-focus: var(--wp--preset--color--primary, #0a2020); }
.styrk-dark,
.has-primary-background-color,
header.wp-block-template-part,
footer.wp-block-template-part,
.site-header-react,
.site-footer,
.rh-megamenu,
.rh-search-overlay,
.cb-page-header,
.cb-hero,
.cb-project-hero,
.cb-lightbox,
.styrk-reels,
.skip-link,
.styrk-404 { --styrk-focus: var(--wp--preset--color--accent, #f0a83c); }
/* What sits INSIDE a light card in a dark section is on a light surface
   again. The card itself is not: its ring is drawn outside it, on the dark
   section. The compact team portraits are dark cards on any section. */
.styrk-dark :is(.bg-white, .has-white-background-color, .has-surface-background-color, .cb-feature-card, .cb-employee-card--full, .cb-employee-modal__panel) :where(*) { --styrk-focus: var(--wp--preset--color--primary, #0a2020); }
.cb-employee-card--compact,
.styrk-dark .cb-employee-card__trigger { --styrk-focus: var(--wp--preset--color--accent, #f0a83c); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--styrk-focus) !important;
  outline-offset: 3px;
  border-radius: 2px;
}
.rh-desktop-link:focus, .rh-desktop-link:focus-visible,
.rh-mobile-link:focus, .rh-mobile-link:focus-visible,
.rh-cta:focus, .rh-cta:focus-visible {
  outline: 2px solid var(--styrk-focus) !important;
  outline-offset: 3px;
}
/* The plugin rings everything inside .wp-site-blocks in the theme's secondary
   colour, !important, with a selector that outranks the rule above; here
   that colour is the amber. Same selector plus html body, colour only. */
html body .wp-site-blocks :focus:not(.cb-stretched-link),
html body .wp-site-blocks :focus-visible:not(.cb-stretched-link) {
  outline-color: var(--styrk-focus) !important;
}

/* Tjenester / feature-cards: the parent theme forces the alignfull section to
   width:100vw with 0 padding (higher-specificity !important), so the card grid
   bled past the viewport edges and clipped the first column ("…EBUTVIKLING").
   The parent reset targets the section, not the inner grid — so put the 16px
   safe gutter on the <ul> itself (every breakpoint). */
.cb-block-features ul {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
/* Cards mode — keep brand typography + amber icon + hover lift, but DO NOT
   override background / border / radius / padding / text color. Those flow
   from the editor's per-card BG/TEKST controls (template.php inline style)
   and from block.json border/spacing supports — per design spec §5.1 ("Paper
   white cards on cream") and §5.8a (all editor controls must reach frontend). */
.cb-feature-card {
  position: relative;
  transition: transform 0.25s var(--ease, ease), box-shadow 0.25s var(--ease, ease);
}
/* Card icon — amber-tinted box with amber stroke. The plugin's default uses
   the old teal palette which reads off-brand; amber accent matches the list
   mode's number+icon marker. */
.cb-feature-card .cb-feature-icon {
  width: 56px !important;
  height: 56px !important;
  background: rgba(240, 168, 60, 0.14) !important;
  border: 1px solid rgba(240, 168, 60, 0.35) !important;
  border-radius: 14px !important;
  color: var(--styrk-accent-cream, #8a5a10) !important;
  margin-bottom: 6px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s var(--ease, ease);
}
.cb-feature-card .cb-feature-icon svg {
  width: 30px !important;
  height: 30px !important;
  stroke-width: 1.6 !important;
}
.cb-feature-card h3 {
  font-family: var(--wp--preset--font-family--display, "Barlow Condensed"), sans-serif !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1;
  font-size: clamp(22px, 2.2vw, 30px) !important;
}
.cb-feature-card:hover {
  box-shadow: 0 10px 24px rgba(10, 32, 32, 0.08), 0 2px 6px rgba(10, 32, 32, 0.05);
}
.cb-feature-card:hover .cb-feature-icon {
  background: rgba(240, 168, 60, 0.22) !important;
  border-color: var(--wp--preset--color--accent, #f0a83c) !important;
}
.cb-feature-card.cb-has-link::after {
  content: "";
  position: absolute;
  /* Top-right corner. Explicit top/left reset because the plugin's ::after
     (decorative top gradient bar) sets `top: 0; left: 1rem` which would
     otherwise win over `right`/`bottom` here (top + left beat bottom + right
     with explicit width/height in absolute positioning). */
  top: 20px;
  right: 20px;
  bottom: auto;
  left: auto;
  width: 22px; height: 22px;
  background: currentColor;
  color: var(--styrk-accent-cream, #8a5a10);
  /* Inline SVG north-east arrow as a CSS mask so it inherits brand colour
     and stays crisp without an extra DOM node. */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>') no-repeat center / contain;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.25s, transform 0.25s, color 0.25s;
}
.cb-feature-card.cb-has-link:hover::after {
  opacity: 1;
  transform: none;
  /* Match the card's own "Les mer" link. That colour is per-card
     (the block's linkColor attribute) and lands as an inline style on a
     child span, which this ::after cannot read — so the template also
     publishes it on the card as --cb-card-link. Falls back to the accent
     when no per-card colour is set. */
  color: var(--cb-card-link, var(--wp--preset--color--accent, #f0a83c));
}

/* Employee card contact reveal: the plugin paints .cb-employee-actions with a
   hardcoded aliceblue (#f0f8ff) left over from the old teal/blue brand. Repaint
   it with the cream surface token so it reads on-brand; the email text is ink
   (~12:1 on cream, AA-safe). */
.cb-employee-card .cb-employee-actions {
  background: var(--wp--preset--color--surface, #f1ece1) !important;
}

/* Remove the parent theme's amber radial flare in the footer. */
.site-footer::before { display: none !important; }

/* Parent styrk-theme switches to desktop nav at min-width:769px. With this
 * client's logo + 5 nav links + search + CTA pill, the layout overflows
 * until ~1100px viewport. Push the switch point so the hamburger covers
 * 769–1100 where the desktop nav would otherwise crowd or overflow. */
@media (max-width: 1100px) {
  .rh-desktop-nav   { display: none !important; }
  .rh-mobile-toggle { display: flex !important; }
}
/* With a sixth link (Ledig stilling) the bar needs about 1190px: from 1101
 * up to there the two-word link wrapped onto two lines and the page scrolled
 * sideways. Links stay on one line, and the gap between them grows from 16px
 * at 1101 to its normal 36px at 1201, instead of moving the hamburger switch
 * the plugin also keys on. */
.site-header-react .rh-desktop-nav { gap: clamp(16px, calc(16px + (100vw - 1101px) / 5), 36px) !important; }
.site-header-react .rh-desktop-nav a { white-space: nowrap; }

/* ── Group style "Pil-effekt ved hover" ────────────────────────────────────
   An editor choice, not a fixed part of any page: select a Group, open
   Styles in the sidebar and pick "Pil-effekt ved hover" (functions.php
   registers it). Pick "Default" again and it is gone.
   What it does: a dim slab with an arrow point slides in from the left edge
   once, when the page loads, and stays. It does not replay on hover.
   With the team block inside (the home page), the effect has a job: the
   block's "Møt teamet" link covers the whole group (the portraits stay their
   own buttons, on top of it), and pointing at it moves the link's arrow. That part is front end only (.wp-site-blocks),
   so the editor keeps its in-canvas controls where they are.
   Only for pointers that can hover AND screens from 1024px: on a phone or a
   narrow window there is no cursor to point with, so nothing happens there.
   With reduced motion the slab fades in without moving. */
@media (hover: hover) and (min-width: 1024px) {
  /* NO stacking context on the group (no isolation, no z-index, no
     transform): the team block's pop-up is a fixed layer inside this group,
     and a stacking context here locked it under every section that follows.
     The slab sits at z-index -1 instead: above the page background, below
     all content. For that to show, neither the group nor the block inside
     may paint a background of its own; the page's own cream shows through. */
  .wp-block-group.is-style-styrk-hover-arrow {
    position: relative;
    overflow: hidden;
    background: transparent !important;
  }
  .wp-block-group.is-style-styrk-hover-arrow > .wp-block-styrk-blocks-employee-grid { background: transparent; }
  .wp-block-group.is-style-styrk-hover-arrow::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 24%;
    pointer-events: none;
    background: var(--wp--preset--color--primary, #0a2020);
    /* A slab with an arrow point: it leads the eye into the section. */
    clip-path: polygon(0 0, 72% 0, 100% 50%, 72% 100%, 0 100%);
    opacity: 0.07;
    animation: styrk-arrow-in 0.8s cubic-bezier(0.2, 0.9, 0.25, 1.08) 0.2s both;
  }
  @keyframes styrk-arrow-in {
    from { opacity: 0; transform: translate3d(-105%, 0, 0); }
  }
  .wp-block-group.is-style-styrk-hover-arrow:has(.cb-employee-grid__cta:hover) .cb-employee-grid__cta-icon,
  .wp-block-group.is-style-styrk-hover-arrow:has(.cb-employee-grid__cta:focus-visible) .cb-employee-grid__cta-icon {
    transform: translateX(8px);
  }
  /* Front end only: let the link's cover reach the group. Nothing in between
     may be the positioned ancestor. */
  .wp-site-blocks .wp-block-group.is-style-styrk-hover-arrow > .wp-block-styrk-blocks-employee-grid,
  .wp-site-blocks .wp-block-group.is-style-styrk-hover-arrow > .wp-block-styrk-blocks-employee-grid > div,
  .wp-site-blocks .wp-block-group.is-style-styrk-hover-arrow > .wp-block-styrk-blocks-employee-grid .cb-employee-grid__header {
    position: static !important;
  }
  .wp-site-blocks .wp-block-group.is-style-styrk-hover-arrow > .wp-block-styrk-blocks-employee-grid .cb-employee-card__trigger {
    position: relative;
    z-index: 2;
  }
}
@media (hover: hover) and (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .wp-block-group.is-style-styrk-hover-arrow::before { animation: none; }
}

/* Team portraits: no amber offset block behind the cards (the plugin's
   split layout draws one); a soft shadow instead. */
.cb-employee-grid__inner--split .cb-employee-card--compact,
.cb-employee-grid__inner--split .cb-employee-card--compact:hover,
.cb-employee-grid__inner--split .cb-employee-card--compact:focus-within {
  box-shadow: 0 14px 32px -12px rgba(10, 32, 32, 0.35) !important;
}

/* Form checkboxes: the real input is visually hidden and a drawn box stands
   in for it, so a keyboard user landed on "nothing". The drawn box takes the
   ring while its input has focus. */
.forminator-ui .forminator-checkbox input:focus-visible ~ .forminator-checkbox-box {
  outline: 2px solid var(--styrk-focus) !important;
  outline-offset: 3px;
}

/* Consent text under a form: Forminator sets its line-height equal to the
   font size (20px on 20px), so a three-line consent reads as one block of
   touching lines. Body rhythm instead, at a size that suits small print. */
.styrk-form .forminator-ui .forminator-checkbox__label,
.styrk-form .forminator-ui .forminator-checkbox__label a {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

/* The header is 72px up to 768px and 88px up to 1024px (parent theme). The
   plugin makes a first hero under the sticky header one viewport minus the
   header, and reads the height from this variable (100px when unset). */
@media (max-width: 768px) { :root { --cb-header-h: 72px; } }
@media (min-width: 769px) and (max-width: 1024px) { :root { --cb-header-h: 88px; } }

/* ── Long legal text (/personvern/) ────────────────────────────────────────
   Plain headings, paragraphs and lists in a group with the class
   `styrk-legal`: the group sits on the page rail, under the page title, and
   the text keeps a reading width instead of running the full 1176px. */
/* The group is full width (core gives alignfull its own margins and zero side
   padding), so the rail is built from side padding: the page gutter, plus half
   of whatever the viewport has beyond the 1280px content frame (vw, since
   percentages here would measure the 720px post column). */
main .wp-block-post-content > .wp-block-group.styrk-legal {
  box-sizing: border-box;
  padding-top: clamp(2.5rem, 6vw, 4.5rem) !important;
  padding-bottom: clamp(3rem, 7vw, 5.5rem) !important;
  padding-left: max(var(--cb-rail, 1rem), calc((100vw - var(--cb-content-max, 1280px)) / 2 + var(--cb-rail, 1rem))) !important;
  padding-right: max(var(--cb-rail, 1rem), calc((100vw - var(--cb-content-max, 1280px)) / 2 + var(--cb-rail, 1rem))) !important;
}
.wp-block-group.styrk-legal > * { max-width: 46rem; margin-left: 0 !important; margin-right: 0 !important; }
.wp-block-group.styrk-legal > p { margin-top: 0; margin-bottom: 1.1em; line-height: 1.7; }
.wp-block-group.styrk-legal > h2 { margin-top: 2.2em; margin-bottom: 0.5em; font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.15; }
.wp-block-group.styrk-legal > h3 { margin-top: 1.4em; margin-bottom: 0.4em; font-size: 1.35rem; line-height: 1.2; }
.wp-block-group.styrk-legal > :first-child { margin-top: 0; }
.wp-block-group.styrk-legal a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }
/* Tables in legal text (e.g. cookie lists on /personvern/) inherited the
   46rem text measure and 20px body size, so four columns were cramped.
   Tables get a wider measure, body-size 1rem and scroll sideways on phones;
   running text stays at 46rem. */
.wp-block-group.styrk-legal > .wp-block-table { max-width: 72rem; font-size: 1rem; overflow-x: auto; }
.wp-block-group.styrk-legal .wp-block-table td,
.wp-block-group.styrk-legal .wp-block-table th { padding: 0.6em 0.8em; vertical-align: top; }
/* Phones: the table keeps a readable width and the wrapper scrolls, instead
   of squeezing four columns into 343px and splitting words mid-word. */
.wp-block-group.styrk-legal .wp-block-table table { min-width: 40rem; }
.wp-block-group.styrk-legal .wp-block-table td,
.wp-block-group.styrk-legal .wp-block-table th { overflow-wrap: normal; word-break: normal; hyphens: manual; }

/* ── Mobile menu: belonging and finger-sized targets ───────────────────────
   Every link in the menu is tappable, but the sub-pages were 21px-tall,
   text-wide targets stacked 7px apart, flush left under their parent, so a
   thumb hit the neighbour and nothing showed that they belong to Tjenester.
   Each link is now a full-width row at least 48px tall, and the sub-pages are
   indented behind an amber rule that hangs from their landing page. */
@media (max-width: 860px) {
  .rh-megamenu .rh-megamenu__groups { gap: 4px; }
  .rh-megamenu .rh-megamenu__group-title { margin: 0; }
  .rh-megamenu .rh-megamenu__group-title a,
  .rh-megamenu .rh-megamenu__links a {
    display: flex;
    align-items: center;
    min-height: 48px;
  }
  .rh-megamenu .rh-megamenu__group--has-sub > .rh-megamenu__links {
    gap: 0;
    margin: 2px 0 12px 3px;
    padding: 0 0 0 18px;
    border-left: 2px solid var(--wp--preset--color--accent, #f0a83c);
  }
  .rh-megamenu .rh-megamenu__links a { font-size: 17px; opacity: 0.88; }
  /* Every service is in the phone menu too, one group at a time: each
     group folds behind its own button (styrkreklame-menu-cta.js), closed
     until tapped. Same content as desktop, less at once. */
  .rh-megamenu .rh-megamenu__sub {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .rh-megamenu .rh-megamenu__sub > a { font-weight: 600; opacity: 1; }
  .rh-megamenu .rh-megamenu__group-toggle {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }
  /* Round, like the Tjenester toggle, and the focus ring drawn inside the
     button so it never runs into the toggle above or the text beside it. */
  .rh-megamenu .rh-megamenu__group-toggle { border-radius: 50%; }
  /* `html body` outranks the plugin's site-wide 3px focus offset. */
  html body .rh-megamenu .rh-megamenu__group-toggle:focus-visible,
  html body .rh-megamenu .rh-megamenu__sub-toggle:focus-visible { outline-offset: -2px !important; border-radius: 50%; }
  .rh-megamenu .rh-megamenu__group-toggle:focus:not(:focus-visible) { outline: none !important; }
  .rh-megamenu .rh-megamenu__group-toggle svg { transition: transform 0.2s ease; }
  .rh-megamenu .rh-megamenu__group-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .rh-megamenu .rh-megamenu__sublinks {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0 0 8px;
    padding: 0 0 0 16px;
  }
  .rh-megamenu .rh-megamenu__sub[data-open="false"] > .rh-megamenu__sublinks { display: none; }
  .rh-megamenu .rh-megamenu__sublinks a { font-size: 16px; opacity: 0.8; }
}
@media (min-width: 861px) {
  .rh-megamenu .rh-megamenu__group-toggle { display: none; }
  .rh-megamenu .rh-megamenu__sub[data-open] > .rh-megamenu__sublinks { display: block; }
}

/* ── Desktop megamenu: Tjenester first ─────────────────────────────────────
   Tjenester is what we sell, so it leads. Under the title, behind an amber
   rule, its three groups (Bli synlig · Nettside & nettbutikk · Innhold &
   merkevare) sit side by side, each listing its concrete services, so a
   visitor sees everything we offer without a click. The other pages are a
   quieter column on the right from 1280px; on a laptop they run as one row
   under Tjenester so it all fits the screen. Hover only turns a link amber
   and nudges its arrow sideways; nothing moves up or down. */
@media (min-width: 861px) {
  .rh-megamenu .rh-megamenu__groups {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: clamp(28px, 3vw, 48px);
    row-gap: 8px;
    align-content: start;
  }
  .rh-megamenu .rh-megamenu__group { margin: 0; }
  .rh-megamenu .rh-megamenu__group--has-sub { flex: 0 0 100%; margin-bottom: 28px; }
  .rh-megamenu .rh-megamenu__sub-toggle { display: none; }
  .rh-megamenu .rh-megamenu__group-title { margin: 0; }
  .rh-megamenu .rh-megamenu__group-title a {
    display: inline-block;
    padding: 6px 0;
    font-family: var(--wp--preset--font-family--display, "Barlow Condensed", sans-serif);
    font-size: clamp(28px, 2.6vw, 44px);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    transition: color 0.18s;
  }
  .rh-megamenu .rh-megamenu__group--has-sub > .rh-megamenu__group-title a {
    font-size: clamp(52px, 5.6vw, 96px);
    line-height: 0.95;
    padding: 0;
  }
  .rh-megamenu .rh-megamenu__group-title a:is(:hover, :focus-visible) {
    color: var(--wp--preset--color--accent, #f0a83c);
  }

  /* Tjenester: three groups side by side behind the amber rule. */
  .rh-megamenu .rh-megamenu__group--has-sub > .rh-megamenu__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 56px);
    row-gap: 24px;
    max-width: 1040px;
    margin: 20px 0 0 6px;
    padding: 6px 0 6px clamp(20px, 2.2vw, 32px);
    border-left: 2px solid var(--wp--preset--color--accent, #f0a83c);
  }
  .rh-megamenu .rh-megamenu__links > li { line-height: 1.3; }
  .rh-megamenu .rh-megamenu__links > li:last-child { grid-column: 1 / -1; }
  /* Group name: the umbrella page, with an arrow. */
  .rh-megamenu .rh-megamenu__links > .rh-megamenu__sub > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: 600;
    opacity: 1;
    white-space: nowrap;
    transition: color 0.18s;
  }
  .rh-megamenu .rh-megamenu__links > .rh-megamenu__sub > a::after {
    content: "\2192";
    color: var(--wp--preset--color--accent, #f0a83c);
    transition: transform 0.2s ease;
  }
  /* The concrete services under each group. */
  .rh-megamenu .rh-megamenu__sublinks {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
  }
  .rh-megamenu .rh-megamenu__sublinks a {
    display: flex;
    align-items: center;
    min-height: 40px;
    font-size: clamp(15px, 1.15vw, 17px);
    font-weight: 400;
    opacity: 0.85;
    white-space: nowrap;
    transition: color 0.18s, opacity 0.18s;
  }
  .rh-megamenu .rh-megamenu__links a:is(:hover, :focus-visible) {
    opacity: 1;
    color: var(--wp--preset--color--accent, #f0a83c);
  }
  .rh-megamenu .rh-megamenu__links li:last-child:has(> a[href$="/kontakt/"]) { padding-top: 8px; }
}

/* Wide screens: the menu content sits in the same frame as the header bar
   (2480px max, same side gutter, so it starts under the logo); the dark
   background still spans the screen. The service block stops growing at
   1120px, so the side column stays next to it instead of drifting off. */
@media (min-width: 861px) {
  .rh-megamenu .rh-megamenu__panel { box-sizing: border-box; width: 100%; padding-inline: max(clamp(16px, 2vw, 40px), calc((100% - 2480px) / 2)); }
}

/* From 1280px the other pages get their own column on the right. The
   Tjenester title has the top row to itself; the other pages share the
   rows of the service groups, so «Prosjekter» lines up with «Bli synlig»
   and the five pages spread evenly down to the button, behind a thin rule
   that mirrors the amber one. */
@media (min-width: 1280px) {
  .rh-megamenu .rh-megamenu__groups {
    display: grid;
    grid-template-columns: minmax(0, 1120px) minmax(220px, 320px);
    justify-content: start;
    grid-template-rows: auto repeat(5, 1fr);
    column-gap: clamp(40px, 4vw, 96px);
    row-gap: 0;
    align-items: stretch;
  }
  .rh-megamenu .rh-megamenu__group--has-sub { display: contents; }
  .rh-megamenu .rh-megamenu__group--has-sub > .rh-megamenu__group-title { grid-column: 1; grid-row: 1; padding-bottom: 20px; }
  /* No top margin here: the amber rule and the grey one start on the same line. */
  .rh-megamenu .rh-megamenu__group--has-sub > .rh-megamenu__links { grid-column: 1; grid-row: 2 / span 5; align-self: start; margin-top: 0; }
  .rh-megamenu .rh-megamenu__group:not(.rh-megamenu__group--has-sub) {
    grid-column: 2;
    display: flex;
    align-items: center;
    margin: 0;
    padding-left: clamp(28px, 2.6vw, 48px);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }
  .rh-megamenu .rh-megamenu__group:nth-child(2) { grid-row: 2; }
  .rh-megamenu .rh-megamenu__group:nth-child(3) { grid-row: 3; }
  .rh-megamenu .rh-megamenu__group:nth-child(4) { grid-row: 4; }
  .rh-megamenu .rh-megamenu__group:nth-child(5) { grid-row: 5; }
  .rh-megamenu .rh-megamenu__group:nth-child(6) { grid-row: 6; }
}


/* ── Megamenu: «Book en prat» is a button, not a line of text ─────────────
   As amber text with a small arrow it fell through: no visible target, the
   arrow went unseen. It is now an outlined button with the same 6px corners
   as the hero buttons; hover fills it amber. Nothing moves. */
.rh-megamenu .rh-megamenu__links li:last-child > a[href$="/kontakt/"] {
  box-sizing: border-box;
  display: block !important;
  width: fit-content;
  min-height: 48px;
  padding: 12px clamp(12px, 4vw, 18px) !important;
  border: 2px solid var(--wp--preset--color--accent, #f0a83c);
  border-radius: 6px;
  font-size: clamp(14px, 4.4vw, 17px) !important;
  font-weight: 600 !important;
  line-height: 1.3;
  white-space: normal;
  opacity: 1;
  transition: background-color 0.18s, color 0.18s;
}
.rh-megamenu .rh-megamenu__links li:last-child > a[href$="/kontakt/"]::after {
  position: static;
  display: inline-block;
  margin-left: 10px;
  vertical-align: -0.05em;
  transition: transform 0.2s ease;
  flex: none;
  width: 18px;
  height: 12px;
}
/* The arrows nudge right on hover: says «this goes somewhere». Sideways
   only, so nothing shifts up or down. */
.rh-megamenu .rh-megamenu__links a:is(:hover, :focus-visible)::after { transform: translateX(6px); }
.rh-megamenu .rh-megamenu__links li:last-child > a[href$="/kontakt/"]:is(:hover, :focus-visible) {
  background: var(--wp--preset--color--accent, #f0a83c);
  color: var(--wp--preset--color--primary, #0a2020) !important;
}

/* Each sentence of the label is kept whole (styrkreklame-menu-cta.js wraps
   them); a too-narrow screen breaks between them, not inside one. The arrow
   rides at the end of the last sentence. */
.rh-megamenu .rh-cta-sentence { display: inline-block; }
/* The arrow belongs to the last sentence, so it can never wrap onto a line
   of its own: the link's own arrow is hidden once the script has split it. */
.rh-megamenu .rh-megamenu__links li:last-child > a[href$="/kontakt/"][data-sentences]::after { content: none; }
.rh-megamenu .rh-cta-sentence:last-child::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 12px;
  margin-left: 10px;
  vertical-align: -0.05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.rh-megamenu .rh-megamenu__links a:is(:hover, :focus-visible) .rh-cta-sentence:last-child::after { transform: translateX(6px); }

/* Phones and tablets: the menu's call to action is a full-width button
   pinned to the bottom of the open menu (styrkreklame-menu-cta.js adds the
   bar), saying only the action, «Book en prat»; the question before it is
   noise on a small screen. Same amber fill as the site's CTA buttons. The
   copy inside Tjenester is hidden there, so it is never folded away. */
.rh-megamenu__cta-bar { display: none; }
@media (max-width: 860px) {
  .rh-megamenu .rh-megamenu__links > li:last-child:has(> a[href$="/kontakt/"]) { display: none; }
  .rh-megamenu .rh-megamenu__panel { padding-bottom: 104px; }
  .rh-megamenu .rh-megamenu__cta-bar {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 16px clamp(24px, 4vw, 56px) calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--wp--preset--color--primary, #0a2020);
    box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.25);
  }
  .rh-megamenu .rh-megamenu__cta-bar > a {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 12px 18px;
    border-radius: 6px;
    background: var(--wp--preset--color--accent, #f0a83c);
    color: var(--wp--preset--color--primary, #0a2020);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
  }
  .rh-megamenu .rh-megamenu__cta-bar .rh-cta-sentence:not(:last-child) { display: none; }
}

/* Social icons at the end of the menu (copied from the footer by
   styrkreklame-menu-cta.js). Quiet: small icons, no borders, so they never
   compete with the menu or the button. 48px targets on touch, 40px desktop. */
.rh-megamenu .rh-megamenu__social { display: flex; gap: 4px; margin: 16px 0 0 -12px; }
.rh-megamenu .rh-megamenu__social-link {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: inherit;
  opacity: 0.75;
  transition: color 0.18s, opacity 0.18s;
}
.rh-megamenu .rh-megamenu__social-link:is(:hover, :focus-visible) { opacity: 1; color: var(--wp--preset--color--accent, #f0a83c); }
@media (min-width: 861px) {
  .rh-megamenu .rh-megamenu__social { flex: 0 0 100%; margin-top: 8px; }
  .rh-megamenu .rh-megamenu__social-link { width: 40px; height: 40px; }
}
@media (min-width: 1280px) {
  /* Under the side column, on the same rule line. */
  .rh-megamenu .rh-megamenu__social {
    grid-column: 2;
    grid-row: 7;
    margin: 16px 0 0;
    padding-left: calc(clamp(28px, 2.6vw, 48px) - 10px);
  }
}

/* The chat bubble steps aside while the menu is open: the menu is a layer
   of its own, and a bubble on top of it covers links and the button. */
html:has(.rh-megamenu:not([hidden])) .styrk-chat { display: none; }

/* ── Megamenu: drops in from behind the header bar ────────────────────────
   The panel slides down from under the bar (the bar sits above it), lands,
   bounces 10px, then a last 3px, and settles. Plain fade for reduced motion. */
@keyframes styrk-mega-drop {
  0%   { transform: translateY(-100%); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  52%  { transform: translateY(0);     animation-timing-function: cubic-bezier(0.15, 0.7, 0.35, 1); }
  68%  { transform: translateY(-10px); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
  82%  { transform: translateY(0);     animation-timing-function: cubic-bezier(0.15, 0.7, 0.35, 1); }
  91%  { transform: translateY(-3px);  animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
  100% { transform: translateY(0); }
}
.rh-megamenu:not([hidden]) { animation: styrk-mega-drop 0.8s both; }
/* The links fade in as the panel lands, so the text doesn't ride the
   bounce (it read as the content jumping). */
@keyframes styrk-mega-content { from { opacity: 0; } to { opacity: 1; } }
.rh-megamenu:not([hidden]) > .rh-megamenu__panel { animation: styrk-mega-content 0.32s ease-out 0.4s both; }
@media (prefers-reduced-motion: reduce) {
  .rh-megamenu:not([hidden]) { animation: rh-mega-in 0.2s both; }
  .rh-megamenu:not([hidden]) > .rh-megamenu__panel { animation: none; }
}

/* ── Desktop dropdown (Tjenester) ──────────────────────────────────────────
   The plugin's dropdown is a plain column of grey links. Here it is a panel
   as wide as the whole menu, hanging from it under an amber line: three
   columns of services in the display face, split by the footer's thin rule.
   Hover only recolours the link and fades an arrow in at the row's right
   edge; nothing changes size, so the panel never moves under the pointer.
   No numbering: the services are not ranked. The plugin styles the dropdown
   inline, hence the !important. */
.site-header-react .rh-desktop-nav { position: relative; }
.rh-desktop-nav > [data-rh-dd] { position: static !important; }
.rh-desktop-nav [data-rh-panel] {
  left: -24px !important;
  transform: none !important;
  /* At least the menu's width; wider only if the labels need it. */
  min-width: calc(100% + 48px);
  width: max-content;
  padding: 18px 0 4px !important;
  box-sizing: border-box;
}
.rh-desktop-nav [data-rh-panel] > div {
  display: grid;
  /* auto tracks: each column fits its longest label and they share what is
     left, so the panel can be exactly as wide as the menu above it. */
  grid-template-columns: repeat(3, auto);
  gap: 0 16px;
  min-width: 0 !important;
  padding: 10px 24px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top: 2px solid var(--wp--preset--color--accent, #f0a83c) !important;
  border-radius: 4px 4px 16px 16px !important;
  background: var(--wp--preset--color--primary, #0a2020) !important;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45) !important;
  animation: styrk-dd-in 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rh-desktop-nav [data-rh-panel] a[role="menuitem"] {
  position: relative;
  display: block !important;
  padding: 14px 26px 14px 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent !important;
  color: #fff !important;
  font-family: var(--wp--preset--font-family--display, "Barlow Condensed"), sans-serif;
  font-size: 19px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.15;
  transition: color 0.18s ease !important;
}
/* Last row of the grid has no rule under it. */
.rh-desktop-nav [data-rh-panel] a[role="menuitem"]:nth-last-child(-n + 3) { border-bottom-color: transparent; }
.rh-desktop-nav [data-rh-panel] a[role="menuitem"]::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 16px;
  height: 10px;
  background: var(--wp--preset--color--accent, #f0a83c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translate(-6px, -50%);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.rh-desktop-nav [data-rh-panel] a[role="menuitem"]:hover,
.rh-desktop-nav [data-rh-panel] a[role="menuitem"]:focus-visible { color: var(--wp--preset--color--accent, #f0a83c) !important; }
.rh-desktop-nav [data-rh-panel] a[role="menuitem"]:hover::after,
.rh-desktop-nav [data-rh-panel] a[role="menuitem"]:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
/* Grouped dropdown (Tjenester → Bli funnet → Annonsering …): the plugin draws
   the third level as flyouts that open over the next column. Here each group
   becomes a column instead: the group link is the column heading and its
   pages are always listed under it. A plain link after the groups (the
   «Book en prat» line) spans the full width at the bottom. */
.rh-desktop-nav [data-rh-panel] > div:has([data-rh-flyout]) { align-items: start; gap: 0 40px; padding-top: 16px !important; }
.rh-desktop-nav [data-rh-panel] > div > div:has(> [data-rh-flyout]) { position: static !important; min-width: 190px; }
/* Calm hierarchy: quiet grey group headings, light page links with no rules
   between them, and amber kept for the one call to action at the bottom. */
.rh-desktop-nav [data-rh-panel] a[aria-haspopup] {
  margin-bottom: 6px;
  padding: 4px 0 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  font-family: var(--wp--preset--font-family--base, "Poppins"), sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}
/* The group heading is a link to its overview page: a small arrow after it
   says so (grey text read as disabled). The plugin chevron stays hidden. */
.rh-desktop-nav [data-rh-panel] a[aria-haspopup] svg { display: none !important; }
.rh-desktop-nav [data-rh-panel] a[aria-haspopup]::after {
  position: static !important;
  display: inline-block !important;
  width: 12px !important;
  height: 8px !important;
  margin-left: 8px;
  vertical-align: 0.1em;
  opacity: 1 !important;
  transform: none !important;
  background: var(--wp--preset--color--accent, #f0a83c) !important;
}
.rh-desktop-nav [data-rh-panel] a[aria-haspopup]:hover,
.rh-desktop-nav [data-rh-panel] a[aria-haspopup]:focus-visible { color: var(--wp--preset--color--accent, #f0a83c) !important; }
.rh-desktop-nav [data-rh-panel] a[aria-haspopup]:hover::after { transform: translateX(3px) !important; }
.rh-desktop-nav [data-rh-flyout] a[role="menuitem"] {
  padding: 7px 26px 7px 0 !important;
  border-bottom: 0 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: var(--wp--preset--font-family--base, "Poppins"), sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.rh-desktop-nav [data-rh-flyout] a[role="menuitem"]:hover,
.rh-desktop-nav [data-rh-flyout] a[role="menuitem"]:focus-visible { color: #fff !important; }
.rh-desktop-nav [data-rh-flyout] a[role="menuitem"]::after { width: 12px; height: 8px; }
.rh-desktop-nav [data-rh-flyout] {
  display: block !important;
  position: static !important;
  padding: 0 !important;
}
.rh-desktop-nav [data-rh-flyout] > div {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.rh-desktop-nav [data-rh-flyout] a[role="menuitem"]:last-child { border-bottom-color: transparent !important; }
.rh-desktop-nav [data-rh-panel] > div:has([data-rh-flyout]) > a[role="menuitem"] {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding: 14px 26px 4px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 0 !important;
  color: var(--wp--preset--color--accent, #f0a83c) !important;
  font-family: var(--wp--preset--font-family--base, "Poppins"), sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
.rh-desktop-nav [data-rh-panel] > div:has([data-rh-flyout]) > a[role="menuitem"]::after {
  position: static;
  display: inline-block;
  margin-left: 10px;
  vertical-align: 0.05em;
  opacity: 1;
  transform: none;
}
.rh-desktop-nav [data-rh-panel] > div:has([data-rh-flyout]) > a[role="menuitem"]:hover::after { transform: translateX(4px); }
.rh-desktop-nav [data-rh-panel] > div:has([data-rh-flyout]) > a[role="menuitem"]:hover { color: #fff !important; }
/* Call card (front page «La oss ta en prat»): the block's 72px top sat tight
   under the section above, and its 72px bottom stacked on the next band's
   96px top. More room above, less below. */
.call-card { padding-top: 112px !important; padding-bottom: 32px !important; }
@media (max-width: 640px) { .call-card { padding-top: 72px !important; padding-bottom: 24px !important; } }
/* The heading leads the section, so it matches the phone number's size. */
.call-card h2 { font-size: clamp(2.25rem, 3vw + 1rem, 3.5rem) !important; }
/* The number never breaks; it shrinks with the screen instead. */
.call-card .call-card__number { white-space: nowrap; font-size: clamp(30px, 8vw, 56px) !important; }

/* Mobile menu: the «Book en prat» link closes the Tjenester list as a call to
   action (amber + arrow), the same signal it gives in the desktop dropdown. */
/* Inline + relative: the absolutely placed arrow then sits at the end of
   the LAST line, so it never wraps onto a line of its own. */
.rh-megamenu__links li:last-child:has(> a[href$="/kontakt/"]) { padding-block: 10px; }
.rh-megamenu__links li:last-child > a[href$="/kontakt/"] {
  display: inline !important;
  position: relative;
  padding: 0 26px 0 0 !important;
  color: var(--wp--preset--color--accent, #f0a83c) !important;
  font-weight: 500 !important;
}
.rh-megamenu__links li:last-child > a[href$="/kontakt/"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.55em;
  width: 16px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes styrk-dd-in {
  from { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .rh-desktop-nav [data-rh-panel] > div { animation: none; }
  .rh-desktop-nav [data-rh-panel] a[role="menuitem"],
  .rh-desktop-nav [data-rh-panel] a[role="menuitem"]::after { transition: none !important; }
}

/* WCAG safety net for white text on the amber accent — the brand amber
 * (#f0a83c) against pure white sits around 2.1:1 contrast, well below AA
 * (4.5:1 for small text, 3:1 for large). Where the design calls for white
 * text on amber, add a thin dark text-shadow so the glyphs stay legible.
 * Trumps cb_best_contrast_text in cases where the helper isn't applied
 * (e.g. theme.json colour combinations) so the page never ships with
 * pure-white text washed out on amber. */
.has-accent-background-color.has-white-color,
.has-accent-background-color .has-white-color,
.has-accent-background-color :where(.has-white-color, [style*="color: #fff"], [style*="color:#ffffff"]) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.site-footer .site-footer__inner {
  max-width: 1280px;
  box-sizing: border-box;
  padding-inline: 52px;
}

/* Footer column headings → Barlow Condensed. Since styrk-blocks 0.10.268 the
   plugin sets the footer to the base font (Poppins) instead of Inter, so the
   column copy needs no override. The headings do: the plugin defaults them to
   the base font too, and this site gives them the Barlow eyebrow treatment. */
.site-footer h2.site-footer__col-heading,
.site-footer p.site-footer__col-heading {
  font-family: var(--wp--preset--font-family--display);
}

/* Logo strip: the plugin block now owns "tint" (color/grayscale/white) and
   "speed" (seconds) as inspector settings, so the white-on-dark + slow marquee
   that used to be hard-coded here lives on the block itself. Companion no
   longer overrides — admins pick per instance from the block sidebar. */

/* Footer credits mark: the parent plugin sets the mask span to 1.6em × 1em,
   which renders too small next to "Utvikling og design av…". The logo art is
   ~2.95:1, so a shorter box leaves `mask-size:contain` width-limited and the
   embedded wordmark renders tiny/soft. Match the box to the logo's aspect so
   it fills (no wasted height) and bump the size for legibility. Source webp is
   2560px wide, so it stays crisp. (Candidate to upstream into styrk-theme.) */
.site-footer__credits-logo {
  width: 7.7em !important;
  height: 2.6em !important;
  margin-right: 0.8em !important;
  vertical-align: -0.9em !important;
}

/* XXL screens: the #priskalk / #kontakt bands are full-width (alignfull)
   groups, so the embedded Forminator form and its inputs stretched edge-to-edge
   on ultra-wide viewports. Cap the form + band copy to a readable measure and
   centre. Scoped to .styrk-form; harmless on the Kontakt page where the form
   already sits in a narrower column (max-width never widens). */
.styrk-form .forminator-ui { max-width: 640px; margin-left: auto !important; margin-right: auto !important; }

/* ── Feature Cards in LIST layout — services rendered as a v3 numbered list
   instead of a card grid. Editorial line-up with a small mono number, big
   Barlow Condensed name and an amber arrow that nudges on hover. Replaces
   the lacklustre 'Tjenester som virker' card grid on the homepage. */
.cb-service-list { display: grid; gap: 0; max-width: 880px; margin-inline: auto; }
.cb-service-row-wrap { border-bottom: 1px solid rgba(10, 32, 32, 0.12); }
.cb-service-row-wrap:first-child { border-top: 1px solid rgba(10, 32, 32, 0.12); }
.cb-service-row {
  display: grid;
  /* Lead column auto-sizes so number (alone) AND number+icon both fit and all
     rows share the same column width → names align across rows whether or not
     icons are set. */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 22px 4px;
  color: var(--wp--preset--color--primary, #0a2020);
  text-decoration: none;
  transition: padding 0.18s ease, color 0.18s ease;
}
a.cb-service-row { cursor: pointer; }
.cb-service-row__lead {
  color: rgba(10, 32, 32, 0.6);
  transition: color 0.18s ease;
}
.cb-service-row__lead svg { width: 24px; height: 24px; }
a.cb-service-row:hover .cb-service-row__lead { color: var(--wp--preset--color--accent, #f0a83c); }
.cb-service-row__num {
  font-family: var(--wp--preset--font-family--display, "Barlow Condensed"), sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: rgba(10, 32, 32, 0.45);
  transition: color 0.18s ease;
}
.cb-service-row__name {
  font-family: var(--wp--preset--font-family--display, "Barlow Condensed"), sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 36px);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.1;
  transition: color 0.18s ease, transform 0.18s ease;
}
.cb-service-row__arr {
  font-size: 18px;
  color: rgba(10, 32, 32, 0.4);
  transition: transform 0.18s ease, color 0.18s ease;
}
a.cb-service-row:hover { padding-left: 10px; }
/* The name keeps its colour on hover (amber on cream is about 1.9:1); the
   row slides, and the number, icon and arrow take the accent. */
a.cb-service-row, a.cb-service-row:hover { text-decoration: none !important; }
a.cb-service-row:hover .cb-service-row__arr { transform: translateX(3px); color: var(--wp--preset--color--accent, #f0a83c); }
a.cb-service-row:focus-visible {
  outline: 2px solid var(--styrk-focus);
  outline-offset: 4px;
  border-radius: 4px;
}
@media (max-width: 640px) {
  .cb-service-row { grid-template-columns: auto 1fr auto; gap: 14px; padding: 16px 4px; }
  .cb-service-row__name { font-size: clamp(20px, 6vw, 26px); }
}
.styrk-form > :where(h1, h2, h3, p) { max-width: 720px; margin-inline: auto; }
/* The site-wide block gap is 0, so the band intro paragraph sat flush under
   its heading. A spacing value set in the editor (inline style) still wins. */
.styrk-form > :where(h1, h2, h3) + p { margin-block-start: 1.25rem; }

/* Growform price-calculator embed: the injected iframe takes 100% of its
   container, so on the full-width #priskalk band it stretched edge-to-edge.
   Cap + centre it like the Forminator forms. */
.styrk-form #growform_form,
.styrk-form .growform_form {
  display: block !important;
  width: 100% !important;
  max-width: 720px !important;
  margin-inline: auto !important;
}

/* /priskalkulator/ (light page): the calculator sat in a 720px column in the
   middle of the page under a short centred hairline, while the intro above
   and the FAQ below run on the 1176px content rail. Put the group on the
   same rail and give the calculator a white card that spans it (the card the
   project pages use); the form stays a readable width, centred inside. The
   post content is a centred 720px column, so the group breaks out of it
   around the column's centre. The dark home-page band is alignfull and is
   not touched. */
main .wp-block-post-content > .wp-block-group.alignwide.styrk-form:has(.styrk-growform-lazy) {
  width: min(1280px, 100vw);
  max-width: none !important;
  margin-left: calc(50% - min(640px, 50vw)) !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
  border-top: 0;
}
.wp-block-group.alignwide.styrk-form > .styrk-growform-lazy {
  padding: clamp(1.25rem, 4vw, 3rem) clamp(0.5rem, 3vw, 2rem);
  border-radius: 16px;
  background: var(--wp--preset--color--white, #fff);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
}

/* Growform on the dark brand band (homepage #priskalk + #kontakt): the wrapper
   block saved its text colour as primary teal, which goes invisible against
   the dark teal background. Growform's own labels/headers use inline
   `color: inherit`, so they pick up the invisible colour too. Force white
   only when the embed sits inside `.styrk-dark` so the light /priskalkulator/
   variant keeps its dark-on-cream text. */
.styrk-dark.styrk-form #growform_form,
.styrk-dark .styrk-form #growform_form,
.styrk-dark.styrk-form .growform_form,
.styrk-dark .styrk-form .growform_form { color: #fff !important; }

/* ══════════════════════════════════════════════════════════════════════════
   REFERANSER — cinematic "reels" video gallery (Design 2.0 / v3 "reels")
   These rules style the front-end output of the styrk-blocks/video-reels block
   (template.php): a featured player + a draggable tile strip. view.js (the
   block's viewScript) wires play / swap / drag. (The `--edit` rules further
   down style the block's editor card grid.)
   ══════════════════════════════════════════════════════════════════════════ */
.styrk-reels {
  --rl-ink: var(--wp--preset--color--primary, #0a2020);
  --rl-paper: #f4f1ea;
  --rl-accent: var(--wp--preset--color--accent, #f0a83c);
  --rl-muted: rgba(255, 255, 255, 0.55);
  --rl-hair: rgba(255, 255, 255, 0.12);
  --rl-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", monospace;
  position: relative;
  /* horizontal padding lives on .reels-inner — the parent theme's alignfull rule
     forces this full-bleed section's own padding to 0. */
  padding: 0;
  background: var(--rl-ink);
  color: var(--rl-paper);
  overflow: hidden;
}
.styrk-reels::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0);
  background-size: 5px 5px;
}
.styrk-reels .reels-inner { max-width: 1200px; margin: 0 auto; position: relative; padding: clamp(64px, 8vw, 130px) clamp(16px, 4vw, 56px); }

/* Honour the block's alignment toolbar choice (the block.json supports
   align: [wide, full]). The wrapper already goes edge-to-edge for `alignfull`
   — but the inner content was capped at 1440px regardless, which made the
   section feel hollow on wider viewports. Wire the inner max-width to the
   align class so the toolbar choice actually changes the layout:
     • alignfull  → inner spans the whole viewport (only side padding)
     • alignwide  → inner caps at 1200px (matches post-content wideSize)
     • default    → keep the 1440px editorial cap (no override) */
.styrk-reels.alignfull .reels-inner { max-width: var(--wp--style--global--wide-size, 1440px); }
.styrk-reels.alignwide .reels-inner { max-width: 1200px; }
/* Viewport-edge break-out for alignfull. The single-project template wraps
   post-content in `cb-project-body__inner` (`max-width: 1440px;
   padding: 0 24px`), so even an alignfull child stayed 48px shy of the
   viewport. The 100vw + symmetric negative margins escape that container
   so the dark band reaches the device edges. Harmless on pages where the
   parent already spans the viewport — the calc() resolves to 0. */
.styrk-reels.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left:  calc( 50% - 50vw );
  margin-right: calc( 50% - 50vw );
}

/* head */
.styrk-reels .reels-head { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; padding-bottom: 28px; border-bottom: 1px solid var(--rl-hair); margin-bottom: 44px; }
.styrk-reels .rl-label { font-family: var(--rl-mono); font-size: 12px; color: var(--rl-accent); letter-spacing: 0.06em; margin: 0 0 14px; display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; }
.styrk-reels .rl-label .rec { width: 8px; height: 8px; background: var(--rl-accent); border-radius: 50%; animation: styrk-rec 2.2s ease infinite; transform: translateY(-1px); }
@keyframes styrk-rec { 0%{box-shadow:0 0 0 0 rgba(240,168,60,0.5)} 70%{box-shadow:0 0 0 10px rgba(240,168,60,0)} 100%{box-shadow:0 0 0 0 rgba(240,168,60,0)} }
.styrk-reels .reels-head h2 { font-family: var(--wp--preset--font-family--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 3vw + 0.5rem, 3.25rem); line-height: 0.95; letter-spacing: -0.01em; margin: 0; }
.styrk-reels .reels-head h2 em { font-style: normal; color: var(--rl-accent); }
/* On a project page the plugin colours every plain h2/h3 in the body dark
   (`.cb-project-body .wp-block-post-content h2:not([class*="cb-"])`), which
   made this heading dark on the reels' dark band: 1.0:1, invisible. */
.cb-project-body .wp-block-post-content .styrk-reels .reels-inner :is(h2, h3) { color: var(--rl-paper); }
.styrk-reels .meta-right { text-align: right; font-family: var(--rl-mono); font-size: 14px; color: var(--rl-muted); letter-spacing: 0.02em; line-height: 1.7; }
.styrk-reels .meta-right b { color: var(--rl-paper); font-weight: 600; }
/* section lead, under the heading (moved out from under the featured video) */
.styrk-reels .reels-intro { margin: 16px 0 0; max-width: 56ch; font-size: 16px; line-height: 1.55; color: var(--rl-muted, rgba(255, 255, 255, 0.6)); }

/* featured stage: 2 columns — [featured video + text stacked under it] · [the
   rest as a draggable 3-row slider]. */
/* Fixed-width left column so the slider grid on the right does NOT reflow
   when the hero player flips orientation (portrait vs landscape). The hero
   itself fills the column width and adapts height by aspect ratio. */
.styrk-reels .reels-stage { display: grid; grid-template-columns: clamp(420px, 44vw, 620px) minmax(0, 1fr); gap: 40px; align-items: start; margin-bottom: 0; }
.styrk-reels .reels-featured-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.styrk-reels .stage-text { padding-top: 0; }

/* the rest: a 4-column grid that flows by ROW, so tiles read left-to-right in
   the exact order they're placed in the editor (e.g. alphabetical). >8 clips
   wrap to further rows below. (Column-flow was used before for horizontal
   paging, but it laid tiles out top-to-bottom-then-right, scrambling the
   placed order visually — wrong for an ordered client list.) */
.styrk-reels .reels-slider {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-bottom: 4px;
}
.styrk-reels .reels-slider::-webkit-scrollbar { display: none; }
.styrk-reels .reels-slider.dragging { cursor: grabbing; scroll-snap-type: none; }
.styrk-reels .reels-slider .reel-tile { scroll-snap-align: start; }
.styrk-reels .stage-text .client { font-family: var(--rl-mono); font-size: 12px; color: var(--rl-accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
.styrk-reels .stage-text h3 { font-family: var(--wp--preset--font-family--display); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 3vw, 44px); line-height: 1; letter-spacing: -0.01em; margin: 0 0 16px; }
.styrk-reels .stage-text p { font-size: 16px; color: var(--rl-muted); line-height: 1.55; max-width: 48ch; margin: 0; }

/* shared player chrome — the box matches the clip's aspect (driven by height,
   width auto) so the video fills it edge-to-edge with no letterboxing. */
.styrk-reels .player { position: relative; background: #000; border-radius: 14px; overflow: hidden; cursor: pointer; width: 100%; }
/* Both orientations fill the (stable) featured-column width. Height adapts
   by aspect-ratio. Vertical caps to viewport so it doesn't push the slider
   below the fold; landscape gets a generous min-height so the orientation
   flip doesn't shrink the frame dramatically. */
.styrk-reels .player.vertical  { aspect-ratio: 9 / 16; max-height: 80vh; }
.styrk-reels .player.landscape { aspect-ratio: 16 / 9; min-height: 360px; }
/* force the (plugin-styled) video to fully cover its player/tile */
.styrk-reels .player video,
.styrk-reels .reel-tile video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; background: #000; }
.styrk-reels .scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 28%, transparent 58%, rgba(0,0,0,0.85) 100%); transition: opacity .3s ease; }
.styrk-reels .topbar { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; z-index: 4; transition: opacity .3s ease; }
.styrk-reels .tag, .styrk-reels .duration { background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); color: #fff; font-family: var(--rl-mono); font-size: 13px; letter-spacing: 0.06em; padding: 7px 11px; border-radius: 4px; }
.styrk-reels .tag.live { background: var(--rl-accent); color: var(--rl-ink); font-weight: 700; }
.styrk-reels .play-big { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,0.96); color: var(--rl-ink); display: grid; place-items: center; z-index: 4; border: 0; cursor: pointer; box-shadow: 0 12px 40px rgba(0,0,0,0.4); transition: transform .15s ease, background .15s ease, opacity .2s ease; }
.styrk-reels .player:hover .play-big { background: var(--rl-accent); }
.styrk-reels .play-big::before { content: ""; width: 0; height: 0; border-left: 18px solid currentColor; border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 5px; }
.styrk-reels .caption { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 3; transition: opacity .3s ease; }
.styrk-reels .caption .pcompany { font-family: var(--wp--preset--font-family--display); font-weight: 700; text-transform: uppercase; font-size: 22px; line-height: 1.05; color: #fff; }
.styrk-reels .caption .pperson { font-family: var(--rl-mono); font-size: 12px; color: var(--rl-accent); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 5px; }
/* when playing: reveal native controls, fade chrome */
.styrk-reels .playing video { z-index: 5; }
/* Show the FULL video during playback (letterbox) rather than the
 * thumbnail's cover-crop. On mobile especially, cover-cropping a
 * portrait video into a landscape container (or vice versa) was
 * cutting off heads / faces / important framing as soon as the user
 * hit play. Contain reads as "this is the whole clip"; black bars are
 * preferable to lost content. The pre-play thumbnail still uses
 * object-fit:cover for tight composition. */
.styrk-reels .playing video { object-fit: contain !important; background: #000; }
.styrk-reels .playing .play-big { opacity: 0; pointer-events: none; }
.styrk-reels .playing .scrim, .styrk-reels .playing .topbar, .styrk-reels .playing .caption,
.styrk-reels .playing .play-mini, .styrk-reels .playing .info, .styrk-reels .playing .duration-mini { opacity: 0; pointer-events: none; }

/* strip */
.styrk-reels .reels-strip-head { display: flex; justify-content: space-between; align-items: end; margin: 8px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rl-hair); }
.styrk-reels .reels-strip-head h3 { font-family: var(--rl-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.04em; margin: 0; color: var(--rl-muted); text-transform: uppercase; }
.styrk-reels .nav-arrows { display: flex; gap: 8px; }
.styrk-reels .nav-arrows button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rl-hair); color: #fff; background: transparent; cursor: pointer; display: grid; place-items: center; transition: all .15s ease; font-size: 15px; }
.styrk-reels .nav-arrows button:hover { background: var(--rl-accent); border-color: var(--rl-accent); color: var(--rl-ink); }
.styrk-reels .reels-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(248px, 1fr); gap: 18px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; }
/* equal mode: wrap into a responsive grid instead of a scroller */
.styrk-reels.is-equal .reels-strip { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; }
@media (max-width: 900px) { .styrk-reels.is-equal .reels-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .styrk-reels.is-equal .reels-strip { grid-template-columns: 1fr; } }

.styrk-reels .reel-tile { aspect-ratio: 9 / 16; position: relative; border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; scroll-snap-align: start; }
.styrk-reels .reel-tile.is-landscape { aspect-ratio: 16 / 9; }
/* (2026-05-29) Restore the consistency rule: when reels mix orientations
   the strip should still read as ONE consistent grid. Every tile in the
   slider takes the aspect of whichever clip currently sits in the hero
   player; object-fit:cover on the video crops the off-orientation clips
   so the strip never looks ragged. The slider parent gets one of
   `is-featured-portrait` / `is-featured-landscape` from the PHP render,
   which overrides the per-tile native aspect set above. */
.styrk-reels .reels-slider.is-featured-portrait  .reel-tile { aspect-ratio: 9 / 16; }
.styrk-reels .reels-slider.is-featured-landscape .reel-tile { aspect-ratio: 16 / 9; }
.styrk-reels .reel-tile .play-mini { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 2; transition: background .15s ease, opacity .3s ease; }
.styrk-reels .reel-tile:hover .play-mini { background: var(--rl-accent); }
.styrk-reels .reel-tile .play-mini::before { content: ""; width: 0; height: 0; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; transition: border-color .15s ease; }
.styrk-reels .reel-tile:hover .play-mini::before { border-left-color: var(--rl-ink); }
.styrk-reels .reel-tile .duration-mini { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); color: #fff; font-family: var(--rl-mono); font-size: 12px; letter-spacing: 0.04em; padding: 5px 9px; border-radius: 4px; z-index: 2; transition: opacity .3s ease; }
.styrk-reels .reel-tile .info { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; transition: opacity .3s ease; }
.styrk-reels .reel-tile .info .client { font-family: var(--wp--preset--font-family--display); font-weight: 700; text-transform: uppercase; font-size: 20px; line-height: 1.05; color: #fff; }
.styrk-reels .reel-tile .info .person { font-family: var(--rl-mono); font-size: 13px; color: var(--rl-accent); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 5px; }

.styrk-reels :where(.player, .reel-tile):focus-visible { outline: 2px solid var(--rl-accent); outline-offset: 3px; }

/* Currently-playing tile (mirrors the player slot). Amber outline sits
   OUTSIDE the tile so `overflow:hidden` on the tile box doesn't clip it,
   plus a soft amber glow so the active tile reads at a glance even on
   busy thumbnails. */
.styrk-reels .reel-tile.is-current {
  outline: 2px solid var(--rl-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rl-accent) 22%, transparent);
}
.styrk-reels .reel-tile.is-current .play-mini { opacity: 0.5; }

/* Hover state on NON-current tiles — gives clear feedback that the tile
   is interactive even before the user clicks. Translucent-white outline
   reads on dark thumbnails and steps cleanly aside when the amber
   is-current outline takes over. */
.styrk-reels .reel-tile:not(.is-current):hover {
  outline: 1.5px solid rgba(255, 255, 255, 0.55);
  outline-offset: 3px;
}

/* OG-featured tile retains a persistent gold star regardless of which clip
   is currently in the player slot — the editor's "star" choice stays
   discoverable so admins can communicate "this was the headline film". */
.styrk-reels .reel-tile__star {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  color: var(--rl-accent);
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
}

/* tablet/below: featured (video + text) on top, slider full-width beneath it */
@media (max-width: 980px) {
  .styrk-reels .reels-stage { grid-template-columns: 1fr; gap: 32px; }
  .styrk-reels .player.vertical { height: auto; width: 100%; max-width: 460px; margin-inline: auto; }
  .styrk-reels .player.landscape { height: auto; width: 100%; max-width: 100%; }
  .styrk-reels .reels-head { grid-template-columns: 1fr; }
  .styrk-reels .meta-right { text-align: left; }
}
@media (max-width: 560px) {
  /* phone: featured fills the full (padded) width */
  .styrk-reels .player.vertical { max-width: 100%; }
  /* 2 columns */
  .styrk-reels .reels-slider { grid-template-columns: repeat(2, 1fr); }
}

/* ── video-reels block: EDITOR canvas card grid (draggable clips + star). The
   front end renders the featured frame + slider (above); this styles the
   interactive editing grid shown in Gutenberg. `--edit` classes exist only in
   the editor, so these rules are inert on the front end. ── */
.styrk-reels--edit { background: var(--wp--preset--color--primary, #0a2020); color: #fff; padding: clamp(28px, 4vw, 56px); border-radius: 4px; }
.styrk-reels--edit .reels-inner { max-width: 1440px; margin: 0 auto; }
.styrk-reels--edit .reels-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 18px; margin-bottom: 26px; }
.styrk-reels--edit .rl-label { font-family: var(--rl-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--accent, #f0a83c); display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.styrk-reels--edit .rl-label .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--accent, #f0a83c); }
.styrk-reels--edit h2 { font-family: var(--wp--preset--font-family--display, "Barlow Condensed"), sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(26px, 3.5vw, 52px); line-height: 1; margin: 0; color: #fff; }
.styrk-reels--edit h2 em { color: var(--wp--preset--color--accent, #f0a83c); font-style: normal; }
.styrk-reels--edit .meta-right { font-family: var(--rl-mono, ui-monospace, monospace); font-size: 12px; color: rgba(255,255,255,0.55); text-align: right; line-height: 1.6; }

/* Editor grid mirrors the FRONTEND layout: one large featured tile (the
 * "starred" clip) + smaller strip tiles flowing around it. Fixed
 * 4-column grid lets the featured cell span 2×2 (≈ hero size) while the
 * remaining tiles fall back to 1×1 — same visual hierarchy as the
 * frontend's "big player + strip", but with all the per-clip edit
 * affordances (drag handle, star, RichText, Bytt/orientation/Fjern)
 * intact on every tile. */
.styrk-reels-edit__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 18px;
}
.styrk-reels-edit__card.is-featured {
  grid-column: span 2;
  grid-row: span 2;
}
@media (max-width: 900px) {
  .styrk-reels-edit__grid { grid-template-columns: repeat(2, 1fr); }
  .styrk-reels-edit__card.is-featured { grid-column: span 2; grid-row: auto; }
}
/* Card chrome. Use an always-on transparent outline so toggling is-featured
 * transitions OUTLINE-COLOR only (transparent → amber). The previous rule
 * transitioned the whole `outline` shorthand, which animated through the
 * browser's default outline-color (rgb(255,255,255)) on its way to "none" —
 * that's the WHITE FLASH each card showed when state changed. Also drop
 * the persistent 1px white border which was visually adding to the noise. */
.styrk-reels-edit__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color 0.12s ease, background 0.12s ease;
}
/* Default state: featured = amber, non-featured = transparent (no outline). */
.styrk-reels-edit__card.is-featured { outline-color: var(--wp--preset--color--accent, #f0a83c); }
/* Hover indication — clear feedback on which card the cursor is on:
 * - featured card stays amber + slightly brightens its bg fill
 * - non-featured card shows a translucent-amber outline so the user
 *   sees "this would be the new featured if I clicked the star". */
.styrk-reels-edit__card:hover {
  background: rgba(255,255,255,0.07);
}
.styrk-reels-edit__card:not(.is-featured):hover {
  outline-color: color-mix(in srgb, var(--wp--preset--color--accent, #f0a83c) 55%, transparent);
}
.styrk-reels-edit__card.is-featured:hover {
  outline-color: var(--wp--preset--color--accent, #f0a83c);
}
/* Kill the browser-default focus-ring colour on the drag-handle SPAN — it
 * was computing to rgb(255,255,255) 3px and reading as a white halo when
 * any keyboard/click focus landed on the handle. */
.styrk-reels-edit__handle:focus,
.styrk-reels-edit__handle:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent, #f0a83c);
  outline-offset: 2px;
}
.styrk-reels-edit__media { position: relative; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: #000; }
.styrk-reels-edit__card.is-landscape .styrk-reels-edit__media { aspect-ratio: 16 / 9; }
/* Consistent-orientation override: when the grid carries an
   is-featured-{portrait,landscape} class, every media tile takes that
   aspect regardless of the per-clip native orientation. object-fit:cover
   crops the off-orientation video so the grid reads as one consistent
   set rather than ragged tall+short tiles. */
.styrk-reels-edit__grid.is-featured-portrait  .styrk-reels-edit__media { aspect-ratio: 9 / 16; }
.styrk-reels-edit__grid.is-featured-landscape .styrk-reels-edit__media { aspect-ratio: 16 / 9; }
.styrk-reels-edit__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.styrk-reels-edit__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.4); font-size: 12px; }
.styrk-reels-edit__handle { position: absolute; top: 8px; left: 8px; z-index: 2; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); border-radius: 6px; color: #fff; }
.styrk-reels-edit__star { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); border: 0; border-radius: 50%; cursor: pointer; }
.styrk-reels-edit__company { font-family: var(--wp--preset--font-family--display, "Barlow Condensed"), sans-serif; font-weight: 700; text-transform: uppercase; font-size: 16px; line-height: 1.1; color: #fff; }
.styrk-reels-edit__person { font-family: var(--rl-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--accent, #f0a83c); }
.styrk-reels-edit__row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.styrk-reels-edit__row .components-base-control { margin-bottom: 0; }

/* Make the per-card controls match the dark card (override WP's blue/white/red). */
.styrk-reels-edit__row .components-button { height: 30px; min-height: 30px; font-size: 12px; border-radius: 6px; }
.styrk-reels-edit__row .components-button.is-secondary {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.styrk-reels-edit__row .components-button.is-secondary:hover:not(:disabled) {
	color: var(--wp--preset--color--accent, #f0a83c);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent, #f0a83c);
	background: transparent;
}
.styrk-reels-edit__row .components-button.is-destructive {
	color: rgba(255, 255, 255, 0.55);
	background: transparent;
	padding: 0 6px;
}
.styrk-reels-edit__row .components-button.is-destructive:hover:not(:disabled) { color: #ff7a7a; background: transparent; }

/* dark select for the 9:16 / 16:9 orientation control */
.styrk-reels-edit__row .components-select-control__input,
.styrk-reels-edit__row select {
	background: rgba(255, 255, 255, 0.06) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
	min-height: 30px !important;
	border-radius: 6px !important;
}
.styrk-reels-edit__row .components-input-control__backdrop { border: 0 !important; box-shadow: none !important; }
.styrk-reels-edit__row .components-input-control__container svg { fill: rgba(255, 255, 255, 0.6); }
/* the native option list is OS-rendered (light); only the closed control is themable */

/* Forminator skin to match brand (scoped so it never leaks to other clients). */
.styrk-form .forminator-ui.forminator-custom-form input,
.styrk-form .forminator-ui.forminator-custom-form select,
.styrk-form .forminator-ui.forminator-custom-form textarea {
  border-radius: 8px;
}
.styrk-form .forminator-ui .forminator-button-submit {
  background: var(--wp--preset--color--accent, #f0a83c) !important;
  color: var(--wp--preset--color--primary, #0a2020) !important;
  border-radius: 9999px !important;
}

/* Form type: Forminator ships 12px bold labels and 40px fields, which blur
   together on large screens and for anyone who needs glasses. Readable sizes,
   normal weight, 48px targets. Fields stay white on every band, so their text
   is always dark (light text on the white field was invisible on #kontakt). */
.forminator-ui .forminator-label {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
}
.forminator-ui.forminator-custom-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.forminator-ui.forminator-custom-form select,
.forminator-ui.forminator-custom-form textarea {
  font-size: 17px !important;
  line-height: 1.5 !important;
  min-height: 48px;
  padding: 11px 14px !important;
  color: #0a2020 !important;
}
.forminator-ui input::placeholder,
.forminator-ui textarea::placeholder {
  color: #5a6666 !important;
  opacity: 1;
}
.forminator-ui .forminator-button-submit {
  font-size: 16px !important;
  font-weight: 600 !important;
  min-height: 48px !important;
  padding: 12px 28px !important;
}
.forminator-ui .forminator-description,
.forminator-ui .forminator-char-counter {
  font-size: 14px !important;
}

/* Dark-band forms (#kontakt / #priskalk): labels and helper text go light;
   the white fields keep their dark text (rule above). */
.styrk-dark .forminator-ui .forminator-label { color: #fff !important; }
.styrk-dark .forminator-ui .forminator-description,
.styrk-dark .forminator-ui .forminator-char-counter {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ── "Se alle X" editorial section-end links ─────────────────────────────────
   Replaces the chunky orange pill buttons that earlier sat at the bottom of
   each section. Renders as a clean amber inline link with an arrow that
   nudges right on hover. Fits the site's editorial typography better than
   a heavy filled CTA. Authors mark a paragraph block with class="cb-see-all".
   ───────────────────────────────────────────────────────────────────────── */
.cb-see-all a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--wp--preset--color--accent, #f0a83c);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent, #f0a83c) 35%, transparent);
  padding-bottom: 3px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.cb-see-all a:hover,
.cb-see-all a:focus-visible {
  color: var(--wp--preset--color--accent, #f0a83c);
  border-bottom-color: var(--wp--preset--color--accent, #f0a83c);
}
.cb-see-all a span[aria-hidden] {
  display: inline-block;
  transition: transform 0.22s ease;
}
.cb-see-all a:hover span[aria-hidden],
.cb-see-all a:focus-visible span[aria-hidden] {
  transform: translateX(4px);
}
/* On dark sections the same accent works — it's the orange already used as
   an accent on dark bands. No override needed. */

/* Editor-only placeholder rendered below a Custom HTML block whose content
 * holds the Growform script. Hard-coded high-contrast colors so the slab
 * stays readable regardless of the parent section's text-color setting
 * (otherwise it inherits dark text on a dark section bg). Arrow points up
 * to the empty preview slab so editor connects placeholder ↔ block above. */
.styrk-growform-editor-placeholder {
  position: relative;
  margin-top: 16px;
  padding: 20px 24px;
  border: 2px dashed #f0a83c !important;
  border-radius: 12px;
  background: #ffffff !important;
  color: #0a2020 !important;
  font-family: -apple-system, system-ui, sans-serif;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.styrk-growform-editor-placeholder::before {
  content: "↑";
  position: absolute;
  top: -14px;
  left: 24px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0a83c;
  color: #0a2020;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.styrk-growform-editor-placeholder strong {
  display: block;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0a2020 !important;
  margin-bottom: 6px;
}
.styrk-growform-editor-placeholder p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #334155 !important;
}
.styrk-growform-editor-placeholder code {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 4px 8px;
  background: #f5f5f4 !important;
  color: #0a2020 !important;
  border-radius: 4px;
  word-break: break-all;
}
.styrk-growform-editor-placeholder__btn {
  display: inline-block;
  margin-top: 12px;
  margin-left: 12px;
  padding: 6px 14px;
  border: 1px solid #0a2020 !important;
  background: transparent !important;
  color: #0a2020 !important;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.styrk-growform-editor-placeholder__btn:hover {
  background: #0a2020 !important;
  color: #ffffff !important;
}

/* Search results: drop the separator when a hit is hovered.
 *
 * The plugin draws the divider as `border-top` on the <li> (.cb-search-page__hit)
 * while the hover background sits on the <a> inside it. So the line kept
 * cutting across the top edge of the highlighted card, and across the top of
 * the card below it. Hiding both edges makes the hovered row read as one
 * continuous block. Colour only — the border stays in the box model, so
 * nothing reflows on hover. */
.cb-search-page__hit:hover,
.cb-search-page__hit:focus-within,
.cb-search-page__hit:hover + .cb-search-page__hit,
.cb-search-page__hit:focus-within + .cb-search-page__hit {
  border-top-color: transparent;
}

/* ── Section heading scale ────────────────────────────────────────────────
   One size for every section heading: the plugin's `text-section-heading`
   (clamp 32 → 52px). Plain h2s get it from theme.json; the process and reels
   headings set their own sizes (56px / 68px) and are brought in line here. */
.cb-process__heading {
  font-size: clamp(2rem, 3vw + 0.5rem, 3.25rem);
}

/* ── One light surface ────────────────────────────────────────────────────
   Light sections were a mix of white (feature cards, rich text, logo strip —
   the plugin's --cb-bg default) and cream (everything else). Sections take
   the cream surface; white is kept for cards, so they lift off it. A colour
   picked in the editor is inline and still wins. */
.cb-block-features,
.cb-block-rich-text,
.cb-logo-strip {
  --cb-bg: var(--wp--preset--color--surface);
}
.cb-feature-card,
.cb-stats-grid {
  --cb-bg: var(--wp--preset--color--white);
}

/* ── Light section after light section ─────────────────────────────────────
   Two cream sections in a row each kept their full padding: a 192px gap
   (project pages, rekruttering, team → testimonials) that read as a hole.
   Now the pair shares ONE section gap, split evenly around a thin rule that
   marks the change of topic. "Light" = not marked dark and not given a
   background in the editor. */
:where(.wp-block-post-content) > :not(.styrk-dark, .has-background, [style*="background"], .wp-block-styrk-blocks-hero, .wp-block-styrk-blocks-cta-band, .wp-block-styrk-blocks-call-card, .wp-block-styrk-blocks-video-reels, .wp-block-spacer, .wp-block-paragraph):has(+ :not(.styrk-dark, .has-background, [style*="background"], .wp-block-styrk-blocks-hero, .wp-block-styrk-blocks-cta-band, .wp-block-styrk-blocks-call-card, .wp-block-styrk-blocks-video-reels, .wp-block-spacer, .wp-block-paragraph)) {
  padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}
:where(.wp-block-post-content) > :not(.styrk-dark, .has-background, [style*="background"], .wp-block-styrk-blocks-hero, .wp-block-styrk-blocks-cta-band, .wp-block-styrk-blocks-call-card, .wp-block-styrk-blocks-video-reels, .wp-block-spacer, .wp-block-paragraph) + :not(.styrk-dark, .has-background, [style*="background"], .wp-block-styrk-blocks-hero, .wp-block-styrk-blocks-cta-band, .wp-block-styrk-blocks-call-card, .wp-block-styrk-blocks-video-reels, .wp-block-spacer, .wp-block-paragraph) {
  padding-top: clamp(2rem, 4vw, 3rem) !important;
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
}

/* The plugin's own inter-section hairline is light grey: invisible on cream
   and drawn after dark sections too. The rule above replaces it. */
.cb-block-features::before,
.cb-block-stats::before,
.cb-block-rich-text::before,
.cb-block-split::before,
.cb-block-testimonial::before {
  display: none;
}

/* ── End of a project page ─────────────────────────────────────────────────
   The plugin closes the project body with up to 160px before the footer:
   more than any other section gap on the site, so the page ended in a hole
   under the previous/next buttons. Same section scale as everywhere else. */
body .wp-site-blocks > main:not(.cb-page-main) > .cb-project-body {
  padding-bottom: clamp(4rem, 8vw, 6rem) !important;
}

/* ── Mobile length ─────────────────────────────────────────────────────────
   On a phone the home page ran to 19 screens. Two blocks stacked every item
   full width with desktop padding: four stats took a whole screen, nine
   service cards took almost four. Below 640px the stats sit 2×2 and a card
   becomes a compact row: icon left, text right. */
@media (max-width: 639px) {
  .cb-stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cb-stats-grid .cb-stat {
    padding: 1.5rem 0.75rem;
    gap: 0.375rem;
    border-top: 0;
  }
  .cb-stats-grid .cb-stat:nth-child(even) {
    border-left: var(--cb-stats-border-width, 1px) solid var(--cb-stats-border-color, rgba(226, 232, 240, 0.8));
  }
  .cb-stats-grid .cb-stat:nth-child(n + 3) {
    border-top: var(--cb-stats-border-width, 1px) solid var(--cb-stats-border-color, rgba(226, 232, 240, 0.8));
  }
  /* An odd last stat spans the row instead of leaving an empty cell. */
  .cb-stats-grid .cb-stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .cb-stats-grid .cb-stat-label {
    font-size: 0.875rem;
  }

  .cb-feature-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.75rem;
    align-items: start;
    padding: 1.25rem;
  }
  .cb-feature-card > .cb-feature-icon {
    grid-row: 1 / span 2;
  }
  .cb-feature-card > :not(.cb-feature-icon, .cb-stretched-link) {
    grid-column: 2;
  }
  /* A card without an icon keeps the full width. */
  .cb-feature-card:not(:has(> .cb-feature-icon)) > :not(.cb-stretched-link) {
    grid-column: 1 / -1;
  }
  .cb-feature-card h3 {
    font-size: 1.25rem;
    overflow-wrap: anywhere;
  }
  .cb-feature-card p {
    font-size: 1rem;
    line-height: 1.5;
  }
}

/* ── Media grid on the content rail ────────────────────────────────────────
   The gallery's "contained" width is the rail without its gutter, so on a
   normal page it sat 52px outside every other block. Project pages are left
   alone: there the project body already supplies the gutter. */
body:not(.single-project) .media-grid > .cb-media-grid__header,
body:not(.single-project) .media-grid > .cb-media-grid__inner {
  box-sizing: border-box;
  max-width: var(--cb-content-rail, 1280px);
  margin-inline: auto;
  padding-inline: var(--cb-rail, 3.25rem);
}

/* ── FAQ: clear rows ───────────────────────────────────────────────────────
   The plugin's dividers use the muted colour, invisible on cream, so the
   questions floated as a bare list. Each question is now a ruled row with
   room around it; the open one becomes a white card. */
.wp-block-styrk-blocks-faq-accordion [role="list"] {
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
}
.wp-block-styrk-blocks-faq-accordion [role="listitem"] {
  padding: 0.25rem 1.25rem;
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent) !important;
  border-radius: 0;
  transition: background-color 0.2s ease;
}
.wp-block-styrk-blocks-faq-accordion [role="listitem"] + [role="listitem"] {
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
}
/* Open row: an accent bar on the left, no box. */
.wp-block-styrk-blocks-faq-accordion [role="listitem"]:has(details[open]) {
  box-shadow: inset 3px 0 0 var(--wp--preset--color--accent, #f0a83c);
}
/* The plugin rings every :focus, so a mouse click drew an amber box around
   the question. Ring for the keyboard only, tight to the row. */
.wp-site-blocks .wp-block-styrk-blocks-faq-accordion summary:focus:not(:focus-visible) {
  outline: none !important;
}
.wp-site-blocks .wp-block-styrk-blocks-faq-accordion summary:focus-visible {
  outline-offset: -2px !important;
  border-radius: 2px;
}
.wp-block-styrk-blocks-faq-accordion summary > span:last-child {
  font-size: 1.25rem;
}

/* Client logo above a case description (image block inside a split section). */
/* Every logo is fitted into the same 240x64 box, whatever its proportions, so
   a stacked logo and a long wordmark carry the same weight. */
.cb-client-logo { display: flex; align-items: center; height: 64px; margin: 0 0 1.25rem; }
.cb-client-logo img { display: block; width: auto !important; height: auto !important; max-width: 240px; max-height: 64px; }

/* An intro section followed by split sections is ONE group (heading, then
   its cases): no rule between the heading and the first case, and the
   heading sits close to it. */
:where(.wp-block-post-content) > .cb-block-rich-text:has(+ .cb-block-split) {
  padding-bottom: 0 !important;
}
:where(.wp-block-post-content) > .cb-block-rich-text + .cb-block-split {
  border-top: 0 !important;
  padding-top: clamp(2rem, 4vw, 3rem) !important;
}

/* ── Services (editorial list): give the list some weight ──────────────────
   Out of the box the numbers and titles are small, so a five-item list read
   as fine print. Big outlined numbers, display-face titles, ruled rows. */
.skotnes-services-editorial__item {
  padding-block: 1.75rem;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.skotnes-services-editorial__num {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--wp--preset--color--accent, #f0a83c);
  transition: color 0.25s ease;
}
.skotnes-services-editorial__item:hover .skotnes-services-editorial__num {
  color: var(--wp--preset--color--accent, #f0a83c);
}
.skotnes-services-editorial__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
.skotnes-services-editorial__body {
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 34rem;
}
@media (prefers-reduced-motion: reduce) {
  .skotnes-services-editorial__num { transition: none; }
}

/* ── Case grid (group class "styrk-case-grid") ─────────────────────────────
   Five client cases as full-width split sections were five screens of
   scrolling. Inside a group with this class each split section becomes a
   card (mockup on top, logo / name / text / links below) and the group is a
   grid: 1 column on phones, 2 on tablets, 3 on desktop. The content is still
   ordinary split sections in the editor. */
.wp-block-group.styrk-case-grid {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  border-top: 0 !important;
}
/* The group is full-bleed (the theme forces 100vw on alignfull), so the rail
   is made with side padding: the gutter, plus whatever the viewport has
   beyond the 1280px rail. Specific enough to beat the page-level reset. */
main.cb-page-main .wp-block-post-content > .wp-block-group.styrk-case-grid {
  padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem) !important;
  padding-inline: max(var(--cb-rail, 3.25rem), calc((100vw - var(--cb-content-rail, 1280px)) / 2 + var(--cb-rail, 3.25rem))) !important;
}
@media (min-width: 700px) {
  .wp-block-group.styrk-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .wp-block-group.styrk-case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
:where(.wp-block-post-content) > .cb-block-rich-text:has(+ .styrk-case-grid) {
  padding-bottom: 0 !important;
}
.styrk-case-grid > .cb-block-split {
  display: flex;
  width: auto;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px;
  background: var(--wp--preset--color--white);
  --cb-bg: var(--wp--preset--color--white);
  transition: box-shadow 0.25s ease;
}
.styrk-case-grid > .cb-block-split:hover {
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
}
.styrk-case-grid .cb-split-cols {
  flex-direction: column !important;
  gap: 0 !important;
  width: 100%;
  max-width: none;
  padding: 0 !important;
}
.styrk-case-grid .cb-split-image-wrap {
  order: -1;
  box-sizing: border-box;
  width: 100% !important;
  padding: 1.25rem 1rem 0.5rem;
  background: color-mix(in srgb, var(--wp--preset--color--surface) 55%, var(--wp--preset--color--white));
}
.styrk-case-grid .cb-split-text {
  box-sizing: border-box;
  flex: 1 1 auto;
  justify-content: flex-start;
  width: 100% !important;
  padding: 1.5rem;
  text-align: left;
}
.styrk-case-grid .cb-split-body { display: flex; flex-direction: column; height: 100%; font-size: 1rem; line-height: 1.55; }
.styrk-case-grid .cb-client-logo { height: 48px; margin-bottom: 1rem; }
.styrk-case-grid .cb-client-logo img { max-width: 190px; max-height: 48px; }
.styrk-case-grid h3 { margin: 0 0 0.5rem; font-size: 1.5rem; }
.styrk-case-grid .cb-split-body p { margin: 0 0 0.75rem; }
.styrk-case-grid .cb-split-body p:last-child { margin: auto 0 0; padding-top: 0.75rem; font-size: 0.9375rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .styrk-case-grid > .cb-block-split { transition: none; }
}

/* Case grid with photos (project images) instead of device mockups: the
   photo fills the top of the card edge to edge. */
.styrk-case-grid.is-photos .cb-split-image-wrap { padding: 0; background: none; }
.styrk-case-grid.is-photos .cb-split-image-wrap img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }

/* ── Index list (services-editorial with class "styrk-index-list") ─────────
   The services as an index instead of a card grid: one ruled row per
   service with an outlined number, a large display title, the one-liner and
   an arrow. On hover or keyboard focus the row fills with the accent colour
   and the title slides in. Stacks on phones. */
.styrk-index-list .skotnes-services-editorial { gap: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.styrk-index-list .skotnes-services-editorial__item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1.1fr) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.1rem, 2vw, 1.75rem) clamp(0.75rem, 2vw, 1.5rem);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.styrk-index-list .skotnes-services-editorial__num {
  font-size: clamp(2rem, 3vw, 2.75rem);
  margin: 0;
}
.styrk-index-list .skotnes-services-editorial__num::after { display: none; }
.styrk-index-list .skotnes-services-editorial__title {
  margin: 0;
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  line-height: 1;
  transition: translate 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.styrk-index-list .skotnes-services-editorial__body { margin: 0; max-width: 30rem; opacity: 0.85; }
.styrk-index-list .skotnes-services-editorial__cta {
  margin: 0;
  font-size: 0;            /* the arrow alone; the row is the link */
  color: var(--wp--preset--color--accent, #f0a83c);
}
.styrk-index-list .skotnes-services-editorial__cta > span {
  display: inline-block;
  font-size: 2rem;
  line-height: 1;
  transition: translate 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.styrk-index-list .skotnes-services-editorial__item:hover,
.styrk-index-list .skotnes-services-editorial__item:focus-visible {
  background: var(--wp--preset--color--accent, #f0a83c);
  color: var(--wp--preset--color--primary, #0a2020);
}
.styrk-index-list .skotnes-services-editorial__item:hover .skotnes-services-editorial__title,
.styrk-index-list .skotnes-services-editorial__item:focus-visible .skotnes-services-editorial__title { translate: 0.75rem 0; }
.styrk-index-list .skotnes-services-editorial__item:hover .skotnes-services-editorial__num,
.styrk-index-list .skotnes-services-editorial__item:focus-visible .skotnes-services-editorial__num {
  color: var(--wp--preset--color--primary, #0a2020);
  -webkit-text-stroke-color: var(--wp--preset--color--primary, #0a2020);
}
.styrk-index-list .skotnes-services-editorial__item:hover .skotnes-services-editorial__cta,
.styrk-index-list .skotnes-services-editorial__item:focus-visible .skotnes-services-editorial__cta { color: var(--wp--preset--color--primary, #0a2020); }
.styrk-index-list .skotnes-services-editorial__item:hover .skotnes-services-editorial__cta > span,
.styrk-index-list .skotnes-services-editorial__item:focus-visible .skotnes-services-editorial__cta > span { translate: 0.5rem 0; }
/* On the amber hover row the grey description fell to poor contrast:
   it takes the dark ink like the title. */
.styrk-index-list .skotnes-services-editorial__item:hover .skotnes-services-editorial__body,
.styrk-index-list .skotnes-services-editorial__item:focus-visible .skotnes-services-editorial__body { opacity: 1; color: var(--wp--preset--color--primary, #0a2020) !important; }
@media (max-width: 899px) {
  .styrk-index-list .skotnes-services-editorial__item {
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    row-gap: 0.35rem;
    padding-inline: 0.25rem;
  }
  .styrk-index-list .skotnes-services-editorial__num { font-size: 1.75rem; grid-row: 1; }
  .styrk-index-list .skotnes-services-editorial__title { font-size: 1.75rem; }
  .styrk-index-list .skotnes-services-editorial__body { grid-column: 2 / 3; grid-row: 2; font-size: 1rem; }
  .styrk-index-list .skotnes-services-editorial__cta { grid-column: 3; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .styrk-index-list .skotnes-services-editorial__item,
  .styrk-index-list .skotnes-services-editorial__title,
  .styrk-index-list .skotnes-services-editorial__cta > span { transition: none; }
}

/* ── Stats row with weight ─────────────────────────────────────────────────
   The white card with small numbers was tidy and flat. Now a dark panel on
   the cream surface with the same soft shadow as the team portraits,
   numbers in the display face at headline size, the sign / unit
   (+, %, ★) in the accent colour, and a count-up when it scrolls into view
   (assets/styrkreklame-stats.js). */
.cb-block-stats .cb-stats-grid {
  border: 0;
  border-radius: 4px;
  overflow: visible;
  background: var(--wp--preset--color--primary, #0a2020);
  box-shadow: 0 14px 32px -12px rgba(10, 32, 32, 0.35);
}
.cb-block-stats .cb-stat {
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1rem, 2vw, 2rem);
  gap: 0.75rem;
  background: none !important;
  border-color: color-mix(in srgb, var(--wp--preset--color--surface, #f1ece1) 16%, transparent) !important;
}
.cb-block-stats .cb-stat-value {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(3.25rem, 7vw, 6.5rem) !important;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--surface, #f1ece1);
  white-space: nowrap;
}
.cb-block-stats .cb-stat-affix {
  color: var(--wp--preset--color--accent, #f0a83c);
}
.cb-block-stats .cb-stat-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--wp--preset--color--surface, #f1ece1) 78%, transparent);
}
/* A short accent rule above each number, drawn in when the stat appears. */
.cb-block-stats .cb-stat::before {
  content: "";
  width: 2.5rem;
  height: 3px;
  background: var(--wp--preset--color--accent, #f0a83c);
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s;
}
.cb-block-stats .cb-stat.is-in::before,
.no-js .cb-block-stats .cb-stat::before { transform: scaleX(1); }
@media (max-width: 639px) {
  .cb-block-stats .cb-stat-value { font-size: clamp(2.75rem, 13vw, 3.75rem) !important; }
  .cb-stats-grid .cb-stat-label { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-block-stats .cb-stat::before { transition: none; transform: scaleX(1); }
}

/* ── Reels: one grid for the player and the tiles ──────────────────────────
   The tiles were 123px wide next to a 620px player: two unrelated sizes and
   a hole under the tiles. On wide screens the stage is now a single 6-column
   grid of 9:16 cells. A tile is one cell; the player is exactly 2 x 2 cells
   (two tile widths plus the gap, two tile heights plus the gap), so its
   edges line up with the tile rows. Portrait player only. */
@media (min-width: 901px) {
  .styrk-reels .reels-stage:has(.reels-slider.is-featured-portrait) {
    container-type: inline-size;
    --rl-gap: 16px;
    grid-template-columns: calc((100% - 5 * var(--rl-gap)) / 6 * 2 + var(--rl-gap)) minmax(0, 1fr);
    gap: var(--rl-gap);
  }
  .styrk-reels .reels-stage:has(.reels-slider.is-featured-portrait) .reels-slider {
    gap: var(--rl-gap);
  }
  .styrk-reels .reels-stage:has(.reels-slider.is-featured-portrait) .player {
    width: 100%;
    height: calc((100cqw - 5 * var(--rl-gap)) / 6 * 16 / 9 * 2 + var(--rl-gap));
    aspect-ratio: auto;
    max-height: none;   /* the 80vh cap would break the 2 x 2 fit on short screens */
  }
}

/* ── No hairlines around the footer ────────────────────────────────────────
   Two faint lines sat between the closing CTA and the footer: the CTA
   section's light divider (a 1px shadow meant for light pages, glowing on
   the dark band) and the footer's own top border. Dark meets dark there, so
   neither separates anything. */
.styrk-dark .cb-cta-section,
.cb-cta-section.styrk-dark { box-shadow: none !important; }
/* One line, not two: the footer starts under a single slim rule, the same
   one it uses between its own rows, so it reads as a new band even when a
   dark section ends right above it. */
.wp-site-blocks footer .site-footer { border-top: 1px solid rgba(255, 255, 255, 0.14) !important; }

/* ── Project pages: tighter, and a readable "what we did" panel ────────────
   A case page is read top to bottom in one go; with every block keeping its
   full section padding it ran to almost six screens. Sections inside the
   project body get a shorter rhythm. The numbered list (services-editorial)
   sits there as a dark panel: it needs its own inner padding (the project
   body strips the blocks' gutters), and its headings must not take the dark
   colour the plugin gives plain h2/h3 in a project body. */
.cb-project-body .wp-block-post-content > .py-section {
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem) !important;
}
.cb-project-body .wp-block-post-content > .cb-block-services-editorial {
  margin-block: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3.25rem) !important;
  border-radius: 4px;
}
.cb-project-body .wp-block-post-content .cb-block-services-editorial :is(h2, h3) {
  color: inherit;
}
.cb-project-body .cb-block-services-editorial .skotnes-services-editorial__item {
  padding-block: 1.25rem;
}
.cb-project-body .cb-block-services-editorial .skotnes-services-editorial__num {
  font-size: clamp(2.25rem, 3.5vw, 3rem);
}

/* ── Breadcrumbs: readable size ────────────────────────────────────────────
   13px read as fine print in the heroes and on project pages. One size for
   all three breadcrumb trails (hero, page header, project page). */
.cb-hero__breadcrumb,
.cb-page-header .cb-page-header__breadcrumb,
.cb-breadcrumbs,
.cb-breadcrumbs .cb-breadcrumbs__list,
.cb-breadcrumbs .cb-breadcrumbs__item {
  font-size: 1rem !important;
}
.cb-project-body .cb-block-services-editorial .skotnes-services-editorial__item > * { margin-block: 0; }
.cb-project-body .cb-block-services-editorial .skotnes-services-editorial__item { display: flex; flex-direction: column; gap: 0.6rem; }
.cb-project-body .wp-block-post-content .cb-block-services-editorial .skotnes-services-editorial__title { font-size: clamp(1.375rem, 1.8vw, 1.625rem); margin-top: 0.5rem; }
.cb-project-body .wp-block-post-content .cb-block-services-editorial h2 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); margin-bottom: 0; }
.cb-project-body .cb-block-services-editorial .cb-section-header { margin-bottom: 1.5rem; }
/* Phones: the project body kept the 52px desktop gutter, leaving a 270px
   column on a 375px screen. Use the same rail as every other page. */
@media (max-width: 767px) {
  .cb-project-body__inner { padding-inline: var(--cb-rail, 1rem) !important; }
  .cb-project-body .cb-block-services-editorial .skotnes-services-editorial__body { font-size: 1rem; }
}

/* ── Project pages: one flow instead of hard boxes ─────────────────────────
   Dark boxes with square corners and dark prev/next buttons sat on the sand
   background like cut-outs, and the page read as a row of separate stops.
   - The "what we did" panel is a white card with soft corners.
   - Previous / next are quiet text links under a thin rule.
   - The closing CTA band leaves the column and runs edge to edge, straight
     into the footer, the way every other page ends.
   The post content is flattened into the project body's flex column
   (display: contents) so the prev/next row can sit BEFORE the closing band. */
.cb-project-body__inner > .wp-block-post-content { display: contents; }
.cb-project-body__inner > .wp-block-post-content > :first-child { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.cb-project-body__inner > .cb-post-nav { order: 5; }
.cb-project-body__inner > .wp-block-post-content > .cb-cta-band { order: 10; }

.cb-project-body .wp-block-post-content > .cb-block-services-editorial {
  border-radius: 16px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
}
.cb-project-body .cb-block-services-editorial .skotnes-services-editorial__num {
  -webkit-text-stroke-color: var(--wp--preset--color--primary, #0a2020);
}
.cb-project-body .cb-block-services-editorial .skotnes-services-editorial__item:hover .skotnes-services-editorial__num {
  color: var(--wp--preset--color--accent, #f0a83c);
  -webkit-text-stroke-color: var(--wp--preset--color--accent, #f0a83c);
}

/* Previous / next: text links with arrows, under a thin rule. */
.cb-project-body .wp-block-group.cb-post-nav {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
}
.cb-project-body .cb-post-nav a {
  padding: 0.5rem 0;
  border-radius: 0;
  background: none;
  color: var(--wp--preset--color--primary, #0a2020);
  font-size: 0.875rem;
  transition: color 0.2s ease, gap 0.2s ease;
}
.cb-project-body .cb-post-nav a:hover { filter: none; gap: 1em; text-decoration: underline; text-decoration-color: var(--wp--preset--color--accent, #f0a83c); text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
.cb-project-body .cb-post-nav .post-navigation-link-previous a::before { content: "←"; }
.cb-project-body .cb-post-nav .post-navigation-link-next a::after { content: "→"; }

/* Closing band: edge to edge, meeting the footer. */
.cb-project-body__inner > .wp-block-post-content > .cb-cta-band {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: clamp(3rem, 6vw, 5rem);
  margin-bottom: 0;
  border-radius: 0;
}
.wp-site-blocks > main:not(.cb-page-main) > .cb-project-body,
body .wp-site-blocks > main:not(.cb-page-main) > .cb-project-body { padding-bottom: 0 !important; }

/* ── Text links keep their underline on hover ──────────────────────────────
   On hover a link in running text lost its underline and turned amber on
   the cream surface (about 1.9:1): it looked switched off, not active. The
   text keeps its colour; the underline gets thicker and takes the accent. */
/* Only links typed into running text (they carry no class). A component
   that happens to be a link inside a list item — a service row, a card —
   has its own hover and must not get a text underline through its number,
   divider and icon. */
.wp-block-post-content p a:not([class]):hover,
.wp-block-post-content p a:not([class]):focus-visible,
.wp-block-post-content li a:not([class]):hover,
.wp-block-post-content li a:not([class]):focus-visible,
a.cb-employee-grid__cta:hover,
a.cb-employee-grid__cta:focus-visible {
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--wp--preset--color--accent, #f0a83c) !important;
}

/* Reels with a LANDSCAPE player: the same idea on a 4-column grid of 16:9
   cells. The player is 2 x 2 cells and the tiles fill the two columns beside
   it, instead of 123px thumbnails next to a 620px player. */
@media (min-width: 901px) {
  .styrk-reels .reels-stage:has(.reels-slider.is-featured-landscape) {
    container-type: inline-size;
    --rl-gap: 16px;
    grid-template-columns: calc((100% - 3 * var(--rl-gap)) / 4 * 2 + var(--rl-gap)) minmax(0, 1fr);
    gap: var(--rl-gap);
  }
  .styrk-reels .reels-stage:has(.reels-slider.is-featured-landscape) .reels-slider {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rl-gap);
  }
  .styrk-reels .reels-stage:has(.reels-slider.is-featured-landscape) .player {
    width: 100%;
    height: calc((100cqw - 3 * var(--rl-gap)) / 4 * 9 / 16 * 2 + var(--rl-gap));
    min-height: 0;
    aspect-ratio: auto;
  }
}
/* On phones a landscape player kept a 360px minimum height and stood taller
   than its 16:9 film. */
@media (max-width: 900px) {
  .styrk-reels .player.landscape { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
}

/* Project page without a closing band (e.g. one that is only a film reel):
   the previous / next row sat squeezed between the dark reel and the dark
   footer. Give it the room of a section of its own, and drop its top rule
   when it follows a dark full-width block (the colour change already
   separates them). */
.cb-project-body__inner:not(:has(.cb-cta-band)) > .cb-post-nav {
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.cb-project-body__inner:has(> .wp-block-post-content > .styrk-reels:last-child) > .cb-post-nav {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 0;
  border-top: 0;
}
/* The arrows are not part of the link text: no underline on them. An
   underline is drawn through every in-flow child of the link, so the arrows
   are taken out of flow (absolutely positioned) and the link keeps room for
   them with padding. On hover the arrow moves; the underline stays under the
   words only. */
.cb-project-body .cb-post-nav a { position: relative; gap: 0; }
.cb-project-body .cb-post-nav a:hover { gap: 0; }
.cb-project-body .cb-post-nav .post-navigation-link-previous a { padding-left: 1.9em; }
.cb-project-body .cb-post-nav .post-navigation-link-next a { padding-right: 1.9em; }
.cb-project-body .cb-post-nav .post-navigation-link-previous a::before,
.cb-project-body .cb-post-nav .post-navigation-link-next a::after {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  transition: translate 0.2s ease;
}
.cb-project-body .cb-post-nav .post-navigation-link-previous a::before { left: 0; }
.cb-project-body .cb-post-nav .post-navigation-link-next a::after { right: 0; }
.cb-project-body .cb-post-nav .post-navigation-link-previous a:hover::before { translate: -0.35em -50%; }
.cb-project-body .cb-post-nav .post-navigation-link-next a:hover::after { translate: 0.35em -50%; }

/* Index list with icons instead of numbers (the block's "markerType: icon"
   option): the icon takes the number's place, in the accent colour, and
   turns dark with the row on hover. */
.styrk-index-list .skotnes-services-editorial__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0;
  border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--accent, #f0a83c) 55%, transparent);
  border-radius: 50%;
  background: none;
  color: var(--wp--preset--color--accent, #f0a83c);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.styrk-index-list .skotnes-services-editorial__icon svg { width: 1.6rem; height: 1.6rem; }
/* Light sections: amber icons and grey descriptions were too weak on the
   cream background. There both take the dark brand ink; amber stays for the
   dark bands and the hover row. */
/* «Light» means: not dark itself, not the editor's dark canvas
   (`styrk-dark-canvas`) and not inside a dark group. Missing the last two
   painted the descriptions near-black on the dark band in the editor. */
.styrk-index-list:not(.styrk-dark, .styrk-dark-canvas, .styrk-dark *) .skotnes-services-editorial__body,
.styrk-index-list:not(.styrk-dark, .styrk-dark-canvas, .styrk-dark *) .skotnes-services-editorial__cta { color: var(--wp--preset--color--primary, #0a2020) !important; }
.styrk-index-list:not(.styrk-dark, .styrk-dark-canvas, .styrk-dark *) .skotnes-services-editorial__icon {
  color: var(--wp--preset--color--primary, #0a2020) !important;
  border-color: color-mix(in srgb, var(--wp--preset--color--primary, #0a2020) 35%, transparent) !important;
}
.styrk-index-list .skotnes-services-editorial__item:hover .skotnes-services-editorial__icon,
.styrk-index-list .skotnes-services-editorial__item:focus-visible .skotnes-services-editorial__icon {
  color: var(--wp--preset--color--primary, #0a2020);
  border-color: var(--wp--preset--color--primary, #0a2020);
}
@media (max-width: 899px) {
  .styrk-index-list .skotnes-services-editorial__icon { width: 2.5rem; height: 2.5rem; grid-row: 1; }
  .styrk-index-list .skotnes-services-editorial__icon svg { width: 1.2rem; height: 1.2rem; }
}

/* ── Form errors look like errors ──────────────────────────────────────────
   A validation message was plain body text under the field: same colour and
   size as everything else, so it read as a caption. Now: red (6.5:1 on the
   cream surface, a light red on dark sections), a warning mark in front so
   it does not rely on colour alone, a tinted strip, and a red frame on the
   field that failed. */
.forminator-ui { --styrk-error: #b3261e; --styrk-error-tint: rgba(179, 38, 30, 0.08); }
.styrk-dark .forminator-ui { --styrk-error: #ffb4ab; --styrk-error-tint: rgba(255, 180, 171, 0.12); }
.forminator-ui .forminator-error-message {
  display: flex !important;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.4rem 0 0 !important;
  padding: 0.5rem 0.75rem !important;
  border-left: 3px solid var(--styrk-error);
  border-radius: 2px;
  background: var(--styrk-error-tint) !important;
  color: var(--styrk-error) !important;
  font-size: 0.9375rem !important;
  font-weight: 600;
  line-height: 1.4 !important;
}
/* The warning mark is a drawn shape (a disc with the exclamation mark cut
   out of it), used as a mask over the error colour. A text "!" in a round
   box is never truly centred: it sits on the font's baseline. */
.forminator-ui .forminator-error-message::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.05rem;
  background: var(--styrk-error);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM9 5.25a1 1 0 0 1 2 0v5.5a1 1 0 0 1-2 0v-5.5Zm1 8.25a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20ZM9 5.25a1 1 0 0 1 2 0v5.5a1 1 0 0 1-2 0v-5.5Zm1 8.25a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.forminator-ui .forminator-has_error input,
.forminator-ui .forminator-has_error textarea,
.forminator-ui .forminator-has_error select {
  border: 2px solid var(--styrk-error) !important;
}
/* The summary at the top of the form after a failed submit. */
.forminator-ui .forminator-response-message.forminator-error {
  border-left: 3px solid var(--styrk-error);
  background: var(--styrk-error-tint) !important;
  color: var(--styrk-error) !important;
}

/* The form band on the home page had no side padding: on a phone its fields
   ran from screen edge to screen edge. Same gutter as every other section. */
main .wp-block-post-content > .wp-block-group.styrk-form {
  padding-left: var(--cb-rail, 1rem) !important;
  padding-right: var(--cb-rail, 1rem) !important;
  box-sizing: border-box;
}

/* The logo strip's own top and bottom hairlines: on a dark strip they show
   as faint light lines against the dark sections around it. */
.cb-logo-strip { border-top: 0; border-bottom: 0; }

/* The strip's heading was 24px under a bare 18px label, 32px above the
   logos: a caption, on a page where every other section opens with a pill
   and a 51px heading. It now opens like the rest: the label is a pill (its
   colours are set on the block), the heading takes the section scale, and
   the logos get real air above them and the section its normal padding. */
.cb-logo-strip {
  padding-top: clamp(4rem, 8vw, 6rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
}
.cb-logo-strip .cb-logo-strip__eyebrow {
  width: fit-content;
  margin: 0 auto 1.5rem;
  font-size: 14px;
  line-height: 1.2;
}
.cb-logo-strip .cb-logo-strip__heading {
  max-width: 22ch;
  margin: 0 auto clamp(2.75rem, 5vw, 4.25rem);
  padding-inline: var(--cb-rail, 1rem);
  font-family: var(--wp--preset--font-family--display, "Barlow Condensed"), sans-serif;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
}
/* The pause button sat in the section's top-right corner, far from the thing
   it controls. It now sits centred right under the moving row. */
.cb-logo-strip .cb-logo-strip__pause {
  top: auto;
  right: auto;
  left: 50%;
  bottom: clamp(1rem, 3.2vw, 2.25rem);
  transform: translateX(-50%);
}

/* Case-grid cards with a single link are clickable as a whole: the link's
   ::after covers the card. Those cards have the image's zoom switched off in
   the editor ("Bildet kan forstørres"), or the zoom button would sit under
   the link as an invisible stop in the tab order. Cards with two links keep
   them as plain links, and their image still opens in the lightbox.
   Faces in portrait frames sit in the upper third, so the crop favours it. */
.styrk-case-grid > .cb-block-split { position: relative; }
.styrk-case-grid > .cb-block-split p:last-child > a:only-child::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
.styrk-case-grid.is-photos .cb-split-image-wrap img { object-position: center 28%; }
.styrk-case-grid.is-photos .cb-split-image-wrap { overflow: hidden; }
.styrk-case-grid.is-photos > .cb-block-split:hover .cb-split-image-wrap img { transform: scale(1.02); }
.styrk-case-grid.is-photos .cb-split-image-wrap img { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  .styrk-case-grid.is-photos .cb-split-image-wrap img { transition: none; }
}

/* Case grid in greyscale (group class "is-mono"): every image is grey until
   its card is hovered or holds keyboard focus, then it takes its colours. */
.styrk-case-grid.is-mono .cb-split-image-wrap img {
  filter: grayscale(1);
  transition: filter 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.styrk-case-grid.is-mono > .cb-block-split:hover .cb-split-image-wrap img,
.styrk-case-grid.is-mono > .cb-block-split:focus-within .cb-split-image-wrap img {
  filter: grayscale(0);
}
/* No hover on touch screens: show the colours. */
@media (hover: none) {
  .styrk-case-grid.is-mono .cb-split-image-wrap img { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .styrk-case-grid.is-mono .cb-split-image-wrap img { transition: none; }
}

/* ── Test (2026-10-16): the page-header ground across the whole Teamet page.
   The hero's gradient + dot grid moves to the body (fixed, so it reads as one
   surface while scrolling) and the sections on top go see-through. Scoped to
   page-id-45 only; remove this block to undo. */
body.page-id-45 {
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0) 0 0 / 5px 5px,
    radial-gradient(58% 60% at 80% 6%, rgba(240, 168, 60, 0.20), transparent 60%),
    radial-gradient(42% 50% at 4% 98%, rgba(240, 168, 60, 0.07), transparent 60%),
    linear-gradient(165deg, #173838 0%, #0a2020 72%) !important;
  background-color: #0a2020 !important;
}
@media (min-width: 1024px) { body.page-id-45 { background-attachment: fixed !important; } }
body.page-id-45 .wp-site-blocks,
body.page-id-45 main,
body.page-id-45 .cb-page-header,
body.page-id-45 .wp-block-post-content > *,
body.page-id-45 .wp-block-post-content > .wp-block-group > * { background: transparent !important; }
body.page-id-45 .cb-page-header::after { display: none; }

/* Hero video pause/play sits bottom-LEFT: the bottom-right corner belongs
   to the chat bubble (and widgets in general), which covered it. */
.cb-hero .cb-hero__video-toggle { right: auto; left: 24px; }

/* Search overlay: the page-header dot grid laid crisp over the blurred
   page, so the backdrop has the brand texture instead of mush. Pure CSS,
   nothing to load. */
.rh-search-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.14) 1px, transparent 0);
  background-size: 5px 5px;
  pointer-events: none;
}
.rh-search-overlay > .rh-search-panel { position: relative; z-index: 1; }
/* The page behind blurs harder, so the tiles are the only crisp layer. */
.rh-search-overlay { -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }

/* Footer «Sider»: the menu's «Usikker? Book en prat» CTA sits under Tjenester
   in the header megamenu, where it helps. In the footer it only crowds the
   list and repeats «Kontakt», which is already a top-level link there. */
.site-footer li:has(> .site-footer__pages-link--sub[href$="/kontakt/"]) { display: none; }

/* Services-editorial cards (e.g. /ledig-stilling/): the «Les mer →» arrow
   nudges right when the card is hovered or focused, like the site's other
   arrow links. */
.skotnes-services-editorial__cta > span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 0.2s ease;
}
.skotnes-services-editorial__item:hover .skotnes-services-editorial__cta > span[aria-hidden="true"],
.skotnes-services-editorial__item:focus-visible .skotnes-services-editorial__cta > span[aria-hidden="true"] {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .skotnes-services-editorial__cta > span[aria-hidden="true"] { transition: none; }
}

/* Footer logo: between ~768 and 1000px the brand column is ~176px, but the
   logo (236px) and its 208px minimum link width spilled over «Tjenester» in
   the next column. Let both shrink to the column; object-fit keeps the shape. */
.site-footer .site-footer__logo-link { min-width: 0; max-width: 100%; }
.site-footer .site-footer__logo-img { max-width: 100%; }

/* ── Home on phones: room between the sections ────────────────────────────
   On a phone every home section sat at the 64px minimum, so the page read as
   one tight column. Phones now get the 5rem step of the spacing scale
   (--spacing--80), and three sections become a deliberate stop of their own:
   «Tjenester» fills the screen, the stats row and the client scroller get
   a taller band with larger numbers and logos. The projects section is left
   exactly as it was. Phones only (<= 781px) and the front page only. */
@media (max-width: 781px) {
  body.home {
    --home-air: var(--wp--preset--spacing--80, 5rem);
  }
  body.home .wp-block-post-content > .cb-block-stats,
  body.home .wp-block-post-content > .cb-logo-strip,
  body.home .wp-block-post-content > .cb-process,
  body.home .wp-block-post-content > .wp-block-styrk-blocks-testimonials,
  body.home .cb-block-services-editorial.py-section {
    padding-top: var(--home-air);
    padding-bottom: var(--home-air);
  }

  /* Tjenester: the whole screen, content centred as one block. */
  body.home .cb-block-services-editorial.py-section {
    min-height: 100vh; /* fallback */
    min-height: 100svh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body.home .cb-block-services-editorial.py-section > * { width: 100%; }

  /* Stats: a taller band, bigger numbers, roomier cells. */
  body.home .wp-block-post-content > .cb-block-stats {
    box-sizing: border-box;
    min-height: 85svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body.home .cb-block-stats .cb-section-header { margin-bottom: 3rem; }
  /* One size for all four numbers, sized so the widest («+186%», 2.65em) fits
     its cell with 16px of air each side. The cell is the query container, so
     the grid is the query container (50cqi = one cell) so all four share one size. */
  body.home .cb-block-stats .cb-stats-grid { container-type: inline-size; width: 100%; box-sizing: border-box; }
  body.home .cb-block-stats .cb-stat {
    justify-content: center;
    padding: 2.75rem 0;
    gap: 1rem;
  }
  body.home .cb-block-stats .cb-stat-value {
    font-size: min(4rem, calc((50cqi - 2rem - 2px) / 2.65)) !important;
    line-height: 0.9;
    display: block;
    white-space: nowrap;
  }
  /* The star glyph comes from a fallback font and runs oversize: scale it to
     sit on the baseline, top at cap height. */
  body.home .cb-block-stats .cb-stat-affix--glyph {
    display: inline-block;
    font-size: 0.7em;
    line-height: 1;
    vertical-align: baseline;
  }
  body.home .cb-block-stats .cb-stat-label { font-size: 0.8125rem; }

  /* Client scroller: taller band, logos about 1.6x larger, slower so the
     bigger logos do not fly past (the loop is longer in pixels now). */
  body.home .wp-block-post-content > .cb-logo-strip {
    box-sizing: border-box;
    min-height: 85svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    --cb-logo-strip-duration: 60s;
  }
  body.home .cb-logo-strip__viewport { width: 100%; }
  body.home .cb-logo-strip__list { gap: 4.5rem; padding-inline: 2.25rem; }
  body.home .cb-logo-strip__img {
    width: 12rem;
    height: 5.5rem;
  }
  body.home .cb-logo-strip .cb-logo-strip__heading { margin-bottom: 4rem; }
  body.home .cb-logo-strip .cb-logo-strip__pause {
    position: static;
    transform: none;
    width: 3rem;
    height: 3rem;
    margin: 2.5rem auto 0;
  }
}

/* Tjenester on phones: icon, title, arrow. The one-liners are for desktop;
   here the title is the row, on one line, with room above and below. */
@media (max-width: 781px) {
  body.home .cb-block-services-editorial .skotnes-services-editorial {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    max-height: 30rem;
  }
  body.home .styrk-index-list .skotnes-services-editorial__item {
    flex: 1 1 0;
    min-height: 6.5rem;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    column-gap: 0.875rem;
    padding-block: 1.75rem;
    align-content: center;
  }
  body.home .styrk-index-list .skotnes-services-editorial__body { display: none; }
  body.home .styrk-index-list .skotnes-services-editorial__title {
    font-size: clamp(1.1rem, 5.6vw, 1.75rem);
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

/* Smush lazy-load forces `width: var(--smush-placeholder-width) !important`
   (e.g. 2560px) on images until they load. In the client scroller that made
   each logo a 2560px box: a ~15,000px track that raced past. Keep the logo
   box the scroller defines, loaded or not. */
.cb-logo-strip .cb-logo-strip__img[style*="--smush-placeholder"] {
  width: clamp(80px, 12vw, 160px) !important;
  height: clamp(40px, 5vw, 64px) !important;
  max-width: none !important;
  aspect-ratio: auto !important;
}
@media (max-width: 781px) {
  body.home .cb-logo-strip .cb-logo-strip__img[style*="--smush-placeholder"] {
    width: 12rem !important;
    height: 5.5rem !important;
  }
}

/* Italic words in headings («som gir»): the slanted last letter leans into
   the following space, so «gir resultater» read as one word. A small italic
   correction keeps the gap. */
h1 em, h2 em, .text-hero em { padding-right: 0.12em; }

/* Arrow nudge, site-wide: every arrow that sits inside a link or button
   slides 4px right on hover/focus, like «Se alle» and the job cards. Covers
   the block arrow SVG (line + chevron, e.g. hero «Priskalkulator →»), the
   footer «Alle sider →» and the call card. Icons that are not arrows
   (phone, mail, search) are untouched. */
a svg:has(> polyline[points="12 5 19 12 12 19"]),
button svg:has(> polyline[points="12 5 19 12 12 19"]),
a .site-footer__pages-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
a:hover svg:has(> polyline[points="12 5 19 12 12 19"]),
a:focus-visible svg:has(> polyline[points="12 5 19 12 12 19"]),
button:hover svg:has(> polyline[points="12 5 19 12 12 19"]),
button:focus-visible svg:has(> polyline[points="12 5 19 12 12 19"]),
a:hover .site-footer__pages-arrow,
a:focus-visible .site-footer__pages-arrow {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  a svg:has(> polyline[points="12 5 19 12 12 19"]),
  button svg:has(> polyline[points="12 5 19 12 12 19"]),
  a .site-footer__pages-arrow { transition: none; }
}

/* Index list in the EDITOR. Each row also holds the icon picker, the link
   field and the delete button, which took grid columns of their own and
   squeezed the titles to ~190px («NETTBUTI / KK»). Editor rows get their own
   grid: icon | controls | title | description, actions under the controls.
   No amber hover fill while editing; it hid the fields. */
.skotnes-services-editorial__item--editing {
  grid-template-columns: 3.5rem 13rem minmax(14rem, 1.1fr) minmax(0, 1fr) !important;
  align-items: start !important;
  row-gap: 0.75rem;
  padding-right: 3rem !important; /* room for the drag handle */
}
.skotnes-services-editorial__item--editing > .skotnes-services-editorial__icon { grid-column: 1; grid-row: 1; }
.skotnes-services-editorial__item--editing > div:not([class]):not([data-drag-handle]) { grid-column: 2; grid-row: 1; }
.skotnes-services-editorial__item--editing > .skotnes-services-editorial__title { grid-column: 3; grid-row: 1 / span 2; overflow-wrap: normal; word-break: normal; }
.skotnes-services-editorial__item--editing > .skotnes-services-editorial__body { grid-column: 4; grid-row: 1 / span 2; }
.skotnes-services-editorial__item--editing > .skotnes-services-editorial__cta { display: none; }
.skotnes-services-editorial__item--editing > .cb-feature-card__actions { grid-column: 2; grid-row: 2; }
.styrk-index-list .skotnes-services-editorial__item--editing:hover,
.styrk-index-list .skotnes-services-editorial__item--editing:focus-within {
  background: color-mix(in srgb, currentColor 6%, transparent);
  color: inherit;
}
.styrk-index-list .skotnes-services-editorial__item--editing:hover .skotnes-services-editorial__title { translate: none; }
.styrk-index-list .skotnes-services-editorial__item--editing:hover .skotnes-services-editorial__body { color: inherit !important; opacity: 0.85; }
.styrk-index-list .skotnes-services-editorial__item--editing:hover .skotnes-services-editorial__icon {
  color: var(--wp--preset--color--accent, #f0a83c);
  border-color: color-mix(in srgb, var(--wp--preset--color--accent, #f0a83c) 55%, transparent);
}
/* The picker's «Ikon» label is dark in the block's own CSS; on dark bands
   it vanished. */
.styrk-dark .skotnes-services-editorial__item--editing .cb-icon-picker > p,
.styrk-dark-canvas .skotnes-services-editorial__item--editing .cb-icon-picker > p { color: rgba(255,255,255,0.8) !important; }