/* =============================================================
   REN-EL 2026 — design system from the Figma template (Home #3)
   -------------------------------------------------------------
   BRAND: Ren-El identity applied 2026-08-03. Values below are
   kept 1:1 with the Figma "🎨 Color" collection in file
   6CaPyabcwcovUcKIsav3OO. Change them in both places or not
   at all — nothing else needs to change.

   Slug names ("Quarry Sand", "Forest Obsidian") are inherited
   from the Foster & Reeves template and no longer describe the
   colours. Kept deliberately so Figma and code stay mappable.

   ACCESSIBILITY: --re-accent (#ed6a3e) is 3.12:1 on white and
   FAILS WCAG AA for text. It is a surface colour only. Anything
   placed on it must be dark: black on accent is 6.61:1 (passes).
   Never white text on accent.
   ============================================================= */

:root {
  /* Palette (Figma: Background / Neutral / Accent) */
  --re-foundation: #fafafa;   /* Foundation White  */
  --re-sand:       #eaeaea;   /* Quarry Sand       */
  --re-stone:      #9e9e9e;   /* Stone Ledger      */
  --re-charcoal:   #49494a;   /* Charcoal Ledger — logo grey, dark  */
  --re-obsidian:   #030304;   /* Forest Obsidian — logo black       */
  --re-accent:     #ed6a3e;   /* Accent Bright   — logo orange      */
  --re-accent-hover: #d15d37; /* Accent Hover — hue-preserving 88%  */

  /* Alpha ramps — dark rebased on #030304, light on #ffffff */
  --re-dark-4:  rgba(3,3,4,.04);
  --re-dark-8:  rgba(3,3,4,.08);
  --re-dark-16: rgba(3,3,4,.16);
  --re-dark-32: rgba(3,3,4,.32);
  --re-dark-48: rgba(3,3,4,.48);
  --re-dark-64: rgba(3,3,4,.64);
  --re-dark-88: rgba(3,3,4,.88);
  --re-light-16: rgba(255,255,255,.16);
  --re-light-32: rgba(255,255,255,.32);
  --re-light-48: rgba(255,255,255,.48);
  --re-light-64: rgba(255,255,255,.64);
  --re-light-88: rgba(255,255,255,.88);

  /* Layout */
  --re-page-pad: clamp(16px, 2.5vw, 32px);
  --re-gap: 16px;
}

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }

/* Sharp corners everywhere, per the template */
.wp-block-button__link, .wp-element-button { border-radius: 0; }

/* Labels / eyebrows */
.re-label {
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
}
/* Eyebrows are 10px, so no large-text exemption applies — 4.5:1 required.
   Stone Ledger was 2.57:1 on Foundation and 3.36:1 on Charcoal; both failed.
   NB the colour is set on the element, so it beat the inherited light colour on
   dark sections — the dark-section eyebrows need their own rule, below. */
.re-eyebrow {
  display: flex; align-items: center; gap: 16px;
  color: var(--re-dark-64);                      /* 6.41:1 on #fafafa */
}
.re-eyebrow::before {
  content: ""; width: 8px; height: 8px; background: var(--re-dark-64);
  display: inline-block; flex: none;
}
.re-section--dark .re-eyebrow,
.re-posts .re-eyebrow { color: var(--re-light-88); }          /* 7.42:1 on #49494a */
.re-section--dark .re-eyebrow::before,
.re-posts .re-eyebrow::before { background: var(--re-light-88); }

/* Secondary (glass) button */
.re-btn-secondary .wp-block-button__link {
  background: var(--re-light-32);
  border-color: var(--re-dark-32);
  backdrop-filter: blur(32px);
}
/* Light-on-dark secondary */
.re-btn-secondary-dark .wp-block-button__link {
  background: var(--re-dark-32);
  border-color: var(--re-light-32);
  color: var(--re-foundation);
  backdrop-filter: blur(32px);
}

/* ---------- Announcement bar ----------
   Social icons left, contact right — the same arrangement as the live site's
   Enfold "header_meta" strip. The bar grew from a 6px-padded text line to a
   40px row so the icons get a 32px hit area, which clears the WCAG 2.5.8
   minimum of 24px with room to spare. */
.re-announce {
  background-color: var(--re-charcoal);
  border-bottom: 1px solid var(--re-light-16);
  color: var(--re-light-64);
  padding: 0 var(--re-page-pad);
}
.re-announce__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 16px;
  min-height: 40px;
}
.re-announce__text { margin: 0; }
.re-announce__text a { color: inherit; text-decoration: none; }
.re-announce__text a:hover { color: var(--re-foundation); }
/* Phone: icons only (client 2026-09-29). The line wrapped under the icons and
   doubled the bar's height, and its phone number repeats in the call button. */
@media (max-width: 720px) {
  .re-announce__text { display: none; }
}

/* Shared by the announcement bar and the footer contact column. Negative inline
   margin pulls the first icon back to the page edge: the 32px box is padding
   around a 16px mark, so without it the row looks indented against the nav below. */
.re-social {
  list-style: none; margin: 0 0 0 -8px; padding: 0;
  display: flex; align-items: center; gap: 2px;
}
.re-social li { margin: 0; }
.re-social a {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--re-light-64);
  transition: color .2s ease;
}
.re-social a:hover { color: var(--re-foundation); }
.re-social svg { width: 16px; height: 16px; display: block; }

/* ---------- Navigation ---------- */
.re-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--re-foundation) 88%, transparent);
  backdrop-filter: blur(32px);
  border-bottom: 1px solid var(--re-dark-8);
  padding: 0 24px;
  min-height: 64px;
}
/* Phone overlay menu (core sets position: fixed on .is-menu-open). The bar's
   backdrop-filter made the bar the containing block for fixed descendants, so
   the open menu rendered as a 64px strip inside the bar and was unusable
   (found 2026-09-29). While the overlay is open the blur is dropped, and the
   overlay gets a solid surface instead of inheriting the bar's 88% tint. */
html.has-modal-open .re-nav,
.re-nav:has(.wp-block-navigation__responsive-container.is-menu-open) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.re-nav .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--re-foundation); }
.re-nav .wp-block-navigation__container { gap: 0; }
/* The divider belongs on the <li>, not the <a>. WordPress renders the submenu arrow as
   a sibling <button> AFTER the anchor, so a border on the anchor left the arrow sitting
   outside its own cell — visually attached to the next item instead. */
.re-nav .wp-block-navigation__container > .wp-block-navigation-item {
  border-right: 1px solid var(--re-dark-8);
}
.re-nav .wp-block-navigation-item__content {
  font-size: 14px; font-weight: 600; padding: 24px 16px;
}
.re-nav .wp-block-navigation__container > .wp-block-navigation-item:hover { background: var(--re-dark-4); }
.re-nav .wp-block-navigation-item__content:hover { text-decoration: none; }
/* Arrow tucked against its own label, inside the cell */
.re-nav .wp-block-navigation__submenu-icon { padding: 0 16px 0 0; margin-left: -14px; }
/* Dropdown children must not inherit the top-level divider */
.re-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item { border-right: 0; }
.re-nav .re-nav-cta a {
  background: var(--re-accent);
  border: 1px solid var(--re-dark-8);
}
.re-site-logo { font-size: 23px; font-weight: 500; letter-spacing: -2px; }

/* Logo is centred on the PAGE, not between the nav and the CTA. Taking it out of the
   flex flow means its position no longer depends on how wide the menu happens to be. */
.re-nav .re-site-logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* Brand logo replaces the Site Title text. The text stays in the DOM (indented
   off-screen) so screen readers and search engines still get the site name. */
.re-site-logo a {
  display: block;
  width: 134px; height: 40px;
  background: url("../img/logo-renel.png") no-repeat left center;
  background-size: contain;
  text-indent: -200vw;
  white-space: nowrap;
  overflow: hidden;
}
/* Dark footer gets the white lockup — orange on charcoal is only 2.7:1. */
.re-footer-main .re-site-logo a {
  background-image: url("../img/logo-renel-white.png");
}

/* ---------- Hero ---------- */
.re-hero {
  position: relative;
  padding: 128px var(--re-page-pad) 48px;
  min-height: min(90vh, 1032px);
  display: flex; align-items: flex-start; gap: var(--re-gap);
  overflow: hidden;
}
.re-hero__content { max-width: 564px; position: relative; z-index: 2; }
.re-hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--re-sand); padding: 8px;
  font-size: 12px; line-height: 16px; letter-spacing: .25px;
}
/* gap:0 — the three images butt together. The container width is unchanged, so the
   space the gaps used to occupy is redistributed equally across the three columns:
   each grows by (2 x 16px) / 3 and they all stay the same width as each other. */
.re-hero__images {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 356px));
  gap: 0; align-items: end;
  width: min(74%, 1068px); pointer-events: none;
}
.re-hero__images img { display: block; width: 100%; object-fit: cover; }
.re-hero__images .re-h1 img { height: clamp(180px, 24vw, 332px); }
.re-hero__images .re-h2 img { height: clamp(320px, 46vw, 661px); }
.re-hero__images .re-h3 img { height: clamp(460px, 69vw, 992px); object-position: 35% 20%; } /* keeps the lamp in the tall crop (image pass) */

/* ---------- Icon row ---------- */
.re-icon-row {
  /* Client review 2026-09-29: "Hvorfor vælge os?" centred on its own row,
     the four items in their own row underneath (more air, and the items
     no longer misalign when one wraps to two lines). */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px var(--re-gap);
  align-items: start;
  padding: 48px var(--re-page-pad);
  border-bottom: 1px solid var(--re-dark-8);
  /* Ride the same 1392 rail the painted column grid uses, so the row
     stops at the painted grid instead of sprawling wider on large screens. */
  max-width: calc(1392px + 2 * var(--re-page-pad));
  margin-inline: auto;
}
/* Core flow layout margins strike again — measured live 2026-08-30: items
   2–4 carried margin-block-start 24px, so item 1 stretched the grid row and
   its icon square floated 12px above the other three. */
.re-icon-row > * { margin-block: 0; }
/* The row title: h-5 scale (Figma h5 32/32/-1), one line, centred on the icon
   squares by the grid above. The right padding keeps it off item 1 (16 gap
   + 16 = the row's own 32). */
.re-icon-row__title {
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--wp--preset--font-size--h-5, 32px);
  line-height: 1; letter-spacing: -1px;
  margin: 0;
}
.re-icon-item { display: flex; gap: 16px; align-items: flex-start; }   /* icon square tops the first text line, so one- and two-line items align */
/* Both children are <p>s inside an is-layout-flow group, so core hands them
   block margins (24px between siblings) — in this centred flex row that
   pushes the text below and the icon above true centre. Zero them so the
   icon square and the two text lines genuinely centre on each other. */
.re-icon-item > * { margin-block: 0; }
.re-icon-item__icon {
  flex: none; width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--re-accent);
  border: 1px solid var(--re-dark-8);
  font-size: 20px;
}

/* ---------- Icons ----------
   SVGs come from inc/icons.php, exported from the Figma "Icons / Graphic" and
   "Icons / Interface" component sets. They use currentColor, so they inherit
   the container's `color`. The glyph sits on an accent square: it MUST stay
   dark — dark-on-accent is 6.61:1, white-on-accent is only 3.12:1. */
.re-icon { display: inline-flex; align-items: center; justify-content: center; }
.re-icon svg { width: 100%; height: 100%; display: block; }
.re-icon-item__icon .re-icon,
.re-detail__icon .re-icon { width: 24px; height: 24px; color: var(--re-obsidian); }
.re-icon-item strong { display: block; font-weight: 600; }
.re-icon-item span { color: var(--re-dark-64); }

/* ---------- Partners ----------
   Figma has no carousel for this, so it's a wrapping grid. Logos are deliberately
   larger than a typical logo strip — the client wants these emphasised — and kept in
   full colour rather than the usual greyscale-until-hover treatment. */
.re-partners {
  /* Same 1392 rail as the icon row and footer — measured live 2026-08-30:
     the grid ran ~27→1687px at 1920w while the painted grid sat 264→1656,
     so the strip read as unaligned with everything around it. */
  max-width: calc(1392px + 2 * var(--re-page-pad));
  margin-inline: auto;
}
.re-partners h2 {
  margin: 0 0 40px;
  font-size: var(--wp--preset--font-size--h-5, 32px);
  line-height: 1; letter-spacing: -1px;
}
/* 1px gaps over a tinted backdrop give hairline dividers, echoing the column grid. */
/* Exactly 4 columns, so the cells line up with the column-grid rules and 11 logos
   land as 4 + 4 + 3 rather than leaving an orphan on the last row. Also matches the
   4-column masonry the live site uses. */
/* Lines are the 1px grid gaps showing this backdrop through.
   ⚠️ If these lines ever start disappearing, the cause is almost certainly a
   TRANSFORM left on the cells, not the line itself. A transform promotes
   each cell to its own compositing layer, and layer bounds snap outward to
   whole pixels — which swallows the sub-pixel gap between two cells. That
   is exactly what the 2026-08-30 build-in animation did (`animation: ...
   both` keeps a transform after it ends); renel.js now strips the animation
   classes once the wave finishes, and the hairlines are crisp again.
   Thickening the line to 2px "fixed" it by brute force and was reverted —
   don't go back there. */
.re-partners__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--re-dark-8);
  border: 1px solid var(--re-dark-8);
}
.re-partners__grid li {
  background-color: var(--re-foundation);
  display: grid; place-items: center;
  padding: 32px 24px; min-height: 180px;
  /* Blend must stop at the cell — never reach the page behind it. */
  isolation: isolate;
}
/* Temporary Instagram-avatar stand-in (USTA): a wordmark on a white disc with
   black corners — the circle mask hides the corners until the real logo file
   arrives. Remove the class with the placeholder. */
.re-partners__grid .re-partners__logo--disc { border-radius: 50%; }

/* The 12th cell is our own: charcoal ground, orange wordmark. Multiply would
   crush orange into the charcoal — this one blends normally. The wordmark is
   so wide it is width-clamped, not height-clamped, so its rendered size is
   trimmed ~10% via max-width (user round two). */
.re-partners__grid .re-partners__self { background-color: var(--re-charcoal); }
.re-partners__grid .re-partners__self img { mix-blend-mode: normal; max-width: 81%; }
.re-partners__grid img {
  /* Fixed uniform height so every logo renders the same size with equal air
     above and below (user, 2026-08-30; +25% in round two — the cells stretch
     past min-height to keep the 32px padding). Very wide wordmarks hit
     max-width and object-fit letterboxes them inside the same box, so the
     grid rhythm holds. */
  max-width: 100%; height: 181px;
  width: auto; object-fit: contain; display: block;
  /* Most logo files carry a baked-in WHITE box (the old site's carousel was
     white). Multiply turns every white pixel into the cell's own Foundation
     tone — the boxes vanish without touching a single file — while the dark
     artwork keeps its colour (near-white backdrop ≈ no visible shift). A
     logo that is genuinely light-on-dark keeps its dark tile, same as
     before. */
  mix-blend-mode: multiply;
}
/* The logos are links (client, 6 Oct 2026): the anchor is the grid item now
   and takes over the cell's centring. On hover the logo grows a touch, like
   the blog cards (.re-card); the keyboard ring matches .re-archive. The
   opacity transition is kept for the re-off effect further down. */
.re-partners__grid li > a { display: grid; place-items: center; min-width: 0; max-width: 100%; color: inherit; }
.re-partners__grid li > a img { transition: opacity .75s ease, transform .3s ease; }
.re-partners__grid li > a:hover img,
.re-partners__grid li > a:focus-visible img { transform: scale(1.04); }
.re-partners__grid li > a:focus-visible { outline: 2px solid var(--re-obsidian); outline-offset: 4px; }

/* ---------- Generic section chrome ---------- */
.re-section { padding-left: var(--re-page-pad); padding-right: var(--re-page-pad); }
/* background-COLOR, not the shorthand — the shorthand would wipe out the column-grid
   background-image applied by .re-grid below. */
.re-section--sand { background-color: var(--re-sand); }
/* Dark sections use Charcoal Ledger (the logo grey), NOT Forest Obsidian. Pure black
   backgrounds were too heavy for this brand. Obsidian stays reserved for text and for
   icon glyphs on the accent square, where its 6.61:1 against orange is required. */
.re-section--dark { background-color: var(--re-charcoal); color: var(--re-foundation); }
.re-section--light { background-color: var(--re-foundation); }

/* ---------- Column grid overlay ----------
   From the Figma "GRID" frames: four 348px columns inside a 1392px container, drawn as
   1px rules — Neutral/Dark 8% on light surfaces, Neutral/Light 16% on dark ones.
   Painted as a background-image so it sits behind all content with no stacking games,
   and it is purely decorative. */
:root { --re-grid-line: var(--re-dark-8); }
.re-section--dark,
.re-posts,
.re-footer-cta,
.re-footer-main,
.re-announce { --re-grid-line: var(--re-light-16); }

/* Applied to every full-width band so the column rules run continuously down the page,
   the way the page-level GRID frame does in Figma. The announcement bar is excluded —
   in the design the grid starts below the nav (GRID frame y=88). */
.re-grid,
.re-section,
.re-hero,
.re-posts,
.re-footer-main {
  background-image:
    repeating-linear-gradient(to right, var(--re-grid-line) 0 1px, transparent 1px 25%),
    linear-gradient(to left, var(--re-grid-line) 0 1px, transparent 1px);
  background-size:
    min(1392px, calc(100% - 2 * var(--re-page-pad))) 100%,
    min(1392px, calc(100% - 2 * var(--re-page-pad))) 100%;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  /* Crisp rules at every window width (designer 2026-09-23: "no visible line
     between the third and fourth items"). The rail and its centred origin
     are fractional at most widths (the page pad is a vw clamp; centring
     halves the remainder), so the 1px stripes at 25/50/75% land on half
     pixels and blur into a faint smear or vanish, one column or another
     depending on the width. round() snaps the rail to a multiple of the four
     columns and the origin to a whole pixel; a browser without round() keeps
     the two declarations above. The snapped rail is at most 3px narrower
     than the content rail, i.e. the outer rules sit up to 1.5px inside it. */
  background-size:
    round(down, min(1392px, calc(100% - 2 * var(--re-page-pad))), 4px) 100%,
    round(down, min(1392px, calc(100% - 2 * var(--re-page-pad))), 4px) 100%;
  background-position: round(down, 50%, 1px) top, round(down, 50%, 1px) top;
}

/* Big right-aligned intro paragraph (sand section) */
.re-intro-statement {
  display: flex; justify-content: flex-end;
}
.re-intro-statement p {
  max-width: 680px;
  font-size: var(--wp--preset--font-size--h-5, 32px);
  line-height: 1; letter-spacing: -1px; font-weight: 500;
}

/* ---------- Service cards (two large image cards) ---------- */
.re-service-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--re-gap); }
.re-service-card {
  position: relative; height: 560px; overflow: hidden;
  display: flex; align-items: flex-end; padding: 24px;
  color: var(--re-foundation);
}
.re-service-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.re-service-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px;
  background: linear-gradient(to bottom, rgba(3,3,4,0), var(--re-dark-64));
}
.re-service-card__text { position: relative; z-index: 2; }
.re-service-card__text h3 { color: inherit; margin: 0 0 8px; }
.re-service-card__text p { margin: 0; }
.re-service-card:hover img { transform: scale(1.02); transition: transform .5s ease; }

/* ---------- Process (dark, sticky left column) ---------- */
.re-process { padding-top: var(--wp--preset--spacing--section-l, 160px); padding-bottom: var(--wp--preset--spacing--section-l, 160px); }
.re-process__grid { display: grid; grid-template-columns: 331px 1fr; gap: 80px; align-items: start; }
.re-process__aside { position: sticky; top: 96px; }
.re-process__aside h2 { color: var(--re-foundation); }
.re-process__steps { display: flex; flex-direction: column; gap: 80px; }
.re-process__step { display: grid; grid-template-columns: minmax(0, 565px) 1fr; gap: 80px; align-items: start; }
.re-process__step img { width: 100%; height: 560px; object-fit: cover; }
.re-process__step h3 { color: var(--re-foundation); font-size: 24px; letter-spacing: -0.5px; }
.re-process__step p { color: var(--re-light-88); }
.re-feature-list { border-top: 1px solid var(--re-light-16); }
.re-feature-list li {
  list-style: none; padding: 16px 0; margin: 0;
  border-bottom: 1px solid var(--re-light-16);
  /* light-48 was 3.46:1 on charcoal — 16px/600 is not WCAG "large text",
     so 4.5:1 applies. light-64 is 4.81:1 and stays clearly below the
     active state's --re-foundation (8.62:1). */
  font-weight: 600; color: var(--re-light-64);
}
/* No-JS fallback: the first item reads as active. */
.re-feature-list li:first-child { color: var(--re-foundation); }
.re-feature-list { padding-left: 0; }

/* With JS, renel.js adds .is-scrollspy and takes over the highlight, tracking which
   process step is nearest the middle of the viewport. */
.re-feature-list.is-scrollspy li {
  color: var(--re-light-64);
  transition: color .25s ease, border-color .25s ease;
}
.re-feature-list.is-scrollspy li.is-active { color: var(--re-foundation); }
.re-feature-list.is-scrollspy li.is-active { border-bottom-color: var(--re-accent); }

/* ---------- Statement / quote section (dark) ---------- */
.re-statement {
  position: relative;
  padding-top: var(--wp--preset--spacing--section-s, 80px);
  padding-bottom: var(--wp--preset--spacing--section-s, 80px);
  min-height: 640px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 64px;
}
.re-statement h2 {
  max-width: 680px; color: var(--re-foundation);
  font-size: var(--wp--preset--font-size--h-3, 48px);
  letter-spacing: -2px; line-height: .92;
}
.re-testimonial {
  max-width: 332px; padding: 16px;
  /* Obsidian, not charcoal: the card sits ON a charcoal section, so charcoal-on-charcoal
     gave it no visible edge (1.00:1) and pushed the accent stars to 2.88:1. */
  background-color: var(--re-obsidian); color: var(--re-foundation);
  display: flex; flex-direction: column; gap: 24px;
}
/* Accent stars on charcoal were 2.88:1 — under the 3:1 that 1.4.11 requires for a
   graphic you need in order to understand the content. On obsidian they reach 6.61:1,
   and the card gains a visible edge against the section (2.29:1, up from 1.00:1). */
.re-testimonial__stars { color: var(--re-accent); display: flex; gap: 4px; }
.re-testimonial__stars .re-icon { width: 16px; height: 16px; }
.re-testimonial__meta { display: flex; justify-content: space-between; align-items: end; font-size: 12px; }
.re-testimonial__meta span { color: var(--re-light-64); }

/* ---------- About (light, text + tall image) ---------- */
.re-about { padding-top: var(--wp--preset--spacing--section-l, 160px); padding-bottom: var(--wp--preset--spacing--section-l, 160px); }
.re-about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 796px); gap: 80px; }
.re-about__col { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.re-about__image img { width: 100%; height: 680px; object-fit: cover; }
.re-detail { display: flex; gap: 24px; align-items: center; margin-bottom: 16px; }
.re-detail__icon {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--re-accent); border: 1px solid var(--re-dark-8); font-size: 20px;
}

/* ---------- Articles / posts grid ("Proven results" section) ---------- */
.re-posts { padding-top: var(--wp--preset--spacing--section-m, 120px); padding-bottom: var(--wp--preset--spacing--section-m, 120px); background-color: var(--re-charcoal); color: var(--re-foundation); }
.re-posts__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 64px; flex-wrap: wrap; }
.re-posts__head h2 { color: var(--re-foundation); margin: 24px 0; }
.re-posts .wp-block-post { background: var(--re-foundation); color: var(--re-obsidian); }
.re-post-card { display: flex; gap: 32px; padding: 24px; min-height: 420px; }
.re-post-card .wp-block-post-featured-image { flex: none; width: 40%; }
.re-post-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.re-post-card__body { display: flex; flex-direction: column; gap: 16px; padding: 16px 0; }
.re-post-card__body h3 { font-size: 32px; letter-spacing: -1px; margin: 0; }
.re-post-card__more { margin-top: auto; font-weight: 600; }

/* ---------- FAQ ---------- */
.re-faq { padding-top: var(--wp--preset--spacing--section-l, 160px); padding-bottom: var(--wp--preset--spacing--section-l, 160px); }
.re-faq__grid { display: grid; grid-template-columns: minmax(0, 451px) minmax(0, 680px); justify-content: space-between; gap: 48px; }
.re-faq details {
  background: var(--re-sand); padding: 24px; margin-bottom: 16px;
}
.re-faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-weight: 600; font-size: 20px; line-height: 1.4;
}
.re-faq summary::-webkit-details-marker { display: none; }
.re-faq summary::after {
  content: "+"; flex: none; width: 32px; height: 32px;
  border: 1.5px solid var(--re-dark-48);
  display: grid; place-items: center; font-weight: 400; font-size: 18px;
}
.re-faq details[open] summary::after { content: "–"; }
.re-faq details[open] summary { margin-bottom: 24px; }

/* ---------- Footer ---------- */
.re-footer-cta {
  position: relative; min-height: 640px;
  display: flex; align-items: center;
  padding: 80px var(--re-page-pad);
  /* Real photo backdrop. Root-relative so it resolves on local AND on ren-el.dk. */
  background-image:
    linear-gradient(to bottom, rgba(73,73,74,0) 50%, var(--re-charcoal)),
    linear-gradient(to right, rgba(3,3,4,.72), rgba(3,3,4,.2)),
    url("/wp-content/uploads/2025/12/0U2A5646.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--re-charcoal);
  color: var(--re-foundation);
}
.re-footer-cta__inner { max-width: 449px; }
.re-footer-cta__inner h2 { color: var(--re-foundation); }
.re-footer-main {
  background-color: var(--re-charcoal); color: var(--re-foundation);
  padding: 48px var(--re-page-pad) 32px;
}
.re-footer-main a { color: var(--re-foundation); }
.re-footer-cols { display: grid; grid-template-columns: minmax(0,448px) repeat(3, minmax(0,1fr)); gap: var(--re-gap); margin-bottom: 80px; }
/* Level 3, not 4 — the footer's own <h2> precedes these, and h2→h4 skipped a level
   on every page of the site. light-88 is 7.42:1 on charcoal (light-48 was 3.46:1). */
.re-footer-col h3 {
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--re-light-88); font-weight: 500; margin: 0 0 20px;
  line-height: 1.33;
}
.re-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.re-footer-legal {
  border-top: 1px solid var(--re-light-16);
  padding-top: 24px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  color: var(--re-light-64); font-size: 12px;
}
.re-footer-legal p { margin: 0; }
.re-footer-main .re-footer-legal-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 20px;
}
.re-footer-legal-links li { margin: 0; }
/* .re-footer-main a paints every footer link Foundation white at (0,1,1);
   two classes here to dim these without depending on source order. */
.re-footer-main .re-footer-legal-links a { color: var(--re-light-64); text-decoration: none; }
.re-footer-main .re-footer-legal-links a:hover {
  color: var(--re-foundation); text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Footer: about + award ---------- */
/* light-88 is 7.42:1 on Charcoal — softer than Foundation without losing AA. */
.re-footer-about { color: var(--re-light-88); margin: 0 0 20px; max-width: 34ch; }
.re-footer-award { color: var(--re-light-88); margin: 0; }
.re-footer-award strong { color: var(--re-foundation); }
.re-footer-main .re-footer-award a { text-decoration: underline; text-underline-offset: 3px; }

/* .re-footer-col ul stacks lists in a column at (0,1,1); the social row has to
   opt back out with two classes, and re-state the gap for the same reason. */
.re-footer-col .re-social { flex-direction: row; gap: 2px; margin: 20px 0 0 -8px; }
.re-footer-main .re-social a { color: var(--re-light-64); }
.re-footer-main .re-social a:hover { color: var(--re-foundation); }

/* ---------- Article (single post) ----------
   Mirrors the Figma "Article" frame (30030:35060): the body sits in a 680px measure
   offset to grid column 2, and figures break out to 912px so images read as a
   deliberate interruption rather than inline decoration. The -116px is exactly
   (912 - 680) / 2, matching the design. */
.re-article {
  background-color: var(--re-foundation);
  padding: 0 var(--re-page-pad) var(--wp--preset--spacing--section-l, 160px);
}
.re-article__head { max-width: 680px; padding-top: 80px; margin-bottom: 48px; }
.re-article__title {
  font-size: var(--wp--preset--font-size--h-2, 64px);
  line-height: .875; letter-spacing: -2px; margin: 16px 0 0;
}
.re-article__hero { margin: 0 0 80px; }
.re-article__hero img {
  width: 100%; height: clamp(280px, 38vw, 560px);
  object-fit: cover; display: block;
}

/* Centred since 2026-08-30 (was margin-left: 25% — offset to grid column 2).
   The Figma Case Study page (30064:29262) runs the measure dead-centre, and
   the user extended that rule to posts AND the ydelser/interior pages. */
.re-article__body { max-width: 680px; margin-inline: auto; }
.re-article__body > * { margin-block: 0 24px; }
.re-article__body > *:last-child { margin-bottom: 0; }
.re-article__body p,
.re-article__body li { font-size: var(--wp--preset--font-size--b-1, 20px); line-height: 1.6; }
.re-article__body h2 {
  font-size: var(--wp--preset--font-size--h-5, 32px);
  line-height: 1; letter-spacing: -1px; margin-block: 64px 16px;
}
.re-article__body h3 {
  font-size: var(--wp--preset--font-size--h-6, 24px);
  line-height: 1.17; letter-spacing: -.5px; margin-block: 40px 12px;
}
.re-article__body ul, .re-article__body ol { padding-left: 1.25em; }
.re-article__body li { margin-bottom: 8px; }
.re-article__body a { text-decoration: underline; text-underline-offset: 3px; }
.re-article__body blockquote {
  border-left: 2px solid var(--re-accent);
  padding-left: 24px; margin-left: 0;
  font-size: var(--wp--preset--font-size--h-6, 24px); line-height: 1.3;
}
.re-article__body figure,
.re-article__body .wp-block-image { margin-inline: -116px; max-width: none; width: auto; }
.re-article__body figure img { width: 100%; height: auto; display: block; }
.re-article__body figcaption {
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--re-dark-48); margin-top: 12px;
}

/* Pages reuse the article layout (same 680px measure, column-2 offset, image
   breakout) — the neighbourhood and service pages are long-form prose with 3–11 H2
   sections, so the editorial article flow is the correct container for them.
   Difference from posts: no date eyebrow, and the first heading gets breathing room. */
.re-article--page .re-article__head { padding-top: 96px; }
.re-article--page .re-article__body > h2:first-child { margin-top: 0; }

/* ---------- Related articles ---------- */
.re-related {
  background-color: var(--re-foundation);
  border-top: 1px solid var(--re-dark-8);
  padding: var(--wp--preset--spacing--section-m, 120px) var(--re-page-pad);
}
.re-related__head { margin-bottom: 48px; }
.re-related__head h2 { margin: 16px 0 0; font-size: var(--wp--preset--font-size--h-3, 48px); }
.re-related .wp-block-post-template {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--re-gap); list-style: none; padding: 0; margin: 0;
}
.re-related .wp-block-post-featured-image img {
  width: 100%; height: clamp(220px, 32vw, 459px); object-fit: cover; display: block;
}
.re-related .wp-block-post-title { font-size: var(--wp--preset--font-size--h-6, 24px); margin: 16px 0 8px; }
.re-related .wp-block-post-excerpt { color: var(--re-dark-64); }

@media (max-width: 1024px) {
  .re-article__body { margin-left: 0; max-width: none; }
  .re-article__body figure,
  .re-article__body .wp-block-image { margin-inline: 0; }
  .re-related .wp-block-post-template { grid-template-columns: 1fr; }
}

/* ---------- Interior pages & blog (existing content!) ---------- */
.re-page-content { padding: 64px var(--re-page-pad) var(--wp--preset--spacing--section-m, 120px); }
.re-page-content > * { max-width: 880px; }
.re-page-content h1 { margin-bottom: 32px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .re-icon-row { grid-template-columns: repeat(2, 1fr); }
  /* Title spans the full width above the 2x2 (8px + the 16px gap = 24 to the items). */
  .re-icon-row { gap: 32px var(--re-gap); padding-block: 40px; }
  .re-process__grid { grid-template-columns: 1fr; }
  .re-process__aside { position: static; }
  .re-process__step { grid-template-columns: 1fr; gap: 32px; }
  .re-process__step img { height: clamp(280px, 50vw, 560px); }
  .re-about__grid { grid-template-columns: 1fr; }
  .re-about__image img { height: auto; }
  .re-faq__grid { grid-template-columns: 1fr; }
  .re-footer-cols { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .re-hero__images { position: relative; width: 100%; grid-template-columns: repeat(3, 1fr); margin-top: 48px; }
  .re-hero { flex-direction: column; padding-top: 96px; min-height: 0; }
}
@media (max-width: 1080px) {
  /* 2 columns, not 3: the grid is 16 cells since 2026-09-22 (15 partners +
     the Ren-El tile), and 16 divides by 4 and 2 but not 3 — three columns
     would strand the Ren-El tile alone on a sixth row. */
  .re-partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .re-partners__grid li { min-height: 148px; padding: 24px 16px; }
  .re-partners__grid img { height: 156px; }
  .re-article__title { font-size: var(--wp--preset--font-size--h-3, 48px); letter-spacing: -1.5px; }
}

@media (max-width: 720px) {
  .re-icon-row { grid-template-columns: 1fr; }
  .re-service-cards { grid-template-columns: 1fr; }
  .re-service-card { height: 420px; }
  .re-post-card { flex-direction: column; }
  .re-post-card .wp-block-post-featured-image { width: 100%; height: 240px; }
  .re-footer-cols { grid-template-columns: 1fr; }
  .re-nav .wp-block-navigation-item__content { padding: 16px 12px; }

  /* Return the logo to normal flow on phones. Absolute-centring it (which is what we
     want on desktop) makes it overlap the "Få et tilbud" CTA once the bar narrows. */
  .re-nav .re-site-logo { position: static; transform: none; }
  .re-nav { gap: 12px; }
  .re-nav .re-nav-cta a { white-space: nowrap; }

  /* Four column rules at phone width read as noise — drop to two. */
  .re-grid, .re-section, .re-hero, .re-posts, .re-footer-main {
    background-image:
      repeating-linear-gradient(to right, var(--re-grid-line) 0 1px, transparent 1px 50%),
      linear-gradient(to left, var(--re-grid-line) 0 1px, transparent 1px);
  }

  .re-partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .re-partners__grid li { min-height: 120px; padding: 20px 12px; }
  .re-partners__grid img { height: 125px; }
  .re-partners h2 { font-size: var(--wp--preset--font-size--h-6, 24px); margin-bottom: 24px; }

  .re-article { padding-bottom: var(--wp--preset--spacing--section-m, 120px); }
  .re-article__head { padding-top: 48px; margin-bottom: 32px; }
  .re-article__title { font-size: var(--wp--preset--font-size--h-5, 32px); letter-spacing: -1px; }
  .re-article__hero { margin-bottom: 48px; }
  .re-article__body p, .re-article__body li { font-size: var(--wp--preset--font-size--b-2, 16px); }
  .re-article__body h2 { font-size: var(--wp--preset--font-size--h-6, 24px); margin-block: 40px 12px; }
  .re-article__body blockquote { padding-left: 16px; font-size: var(--wp--preset--font-size--b-1, 20px); }
  .re-related { padding-block: var(--wp--preset--spacing--section-s, 80px); }
  .re-related__head h2 { font-size: var(--wp--preset--font-size--h-5, 32px); }
}

/* ---------- Focus visibility ----------
   The theme previously defined no focus styling at all, and the 64px sticky nav could
   sit on top of whatever the browser scrolled into view — a WCAG 2.2 SC 2.4.11 failure.
   UA-default rings are also unreliable here (Firefox's #0060df is 1.60:1 on charcoal).
   :where() keeps specificity at zero so components can still override. */
html { scroll-padding-top: 88px; }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--re-obsidian);   /* 19.75:1 on Foundation */
  outline-offset: 2px;
}
.re-section--dark :focus-visible,
.re-posts :focus-visible,
.re-footer-cta :focus-visible,
.re-footer-main :focus-visible,
.re-announce :focus-visible,
.re-service-card :focus-visible,
.re-testimonial :focus-visible { outline-color: var(--re-foundation); }  /* 8.62:1 on Charcoal */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ============================================================
   404 + SEARCH  (merged from _utility.css)
   ============================================================ */
/* =============================================================
   REN-EL 2026 — UTILITY TEMPLATES: 404 + search
   -------------------------------------------------------------
   Scope: templates/404.html and templates/search.html only.
   Written as a standalone file for merging into renel.css by the
   lead. It is NOT enqueued by functions.php — merge it, or add a
   wp_enqueue_style() call, before it does anything.

   House rules observed here:
   · background-COLOR only, never the `background` shorthand — the
     shorthand wipes the column-grid background-image that .re-grid
     / .re-section paint on every full-width band.
   · --re-accent (#ed6a3e) is 3.12:1 on white and is used ONLY as a
     surface (button fill, current-page chip, hairline rule).
     Everything sitting on it is --re-obsidian (6.61:1).
   · Dark surfaces would use --re-charcoal, never --re-obsidian.
     Neither template needs one — both bands are Foundation White.
   · No JavaScript: the search form is a plain GET form and
     pagination is plain links (enhancedPagination is off).
   · Breakpoints match renel.css exactly: 1080px and 720px.
   ============================================================= */

/* ---------- Shared band chrome ----------
   .re-section supplies the horizontal page padding, .re-grid the
   column rules. Only the vertical rhythm and the surface colour
   are set here. --re-grid-line stays at its light default. */
.re-404,
.re-search {
  background-color: var(--re-foundation);
  padding-top: var(--wp--preset--spacing--section-m, 120px);
  padding-bottom: var(--wp--preset--spacing--section-l, 160px);
}

/* ---------- 404: lead block ---------- */
.re-404__head { max-width: 680px; }

.re-404__title {
  font-size: var(--wp--preset--font-size--h-2, 64px);
  line-height: .875;
  letter-spacing: -2px;
  margin: 16px 0 24px;
}

.re-404__text {
  font-size: var(--wp--preset--font-size--b-1, 20px);
  line-height: 1.6;
  color: var(--re-dark-64);
  max-width: 52ch;
  margin: 0 0 40px;
}

.re-404__actions {
  gap: var(--re-gap);
  margin: 0;
}

/* ---------- 404: two recovery panels ----------
   Half and half, so both panels land on the 4-column rule grid
   (2 columns each) rather than cutting across it. */
.re-404__panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  margin-top: 80px;
  padding-top: 48px;
  border-top: 1px solid var(--re-dark-8);
}

.re-404__panel { min-width: 0; }

.re-404__subhead,
.re-search__suggest-title {
  font-size: var(--wp--preset--font-size--h-6, 24px);
  line-height: 1.17;
  letter-spacing: -.5px;
  margin: 0 0 24px;
}

/* ---------- Hairline link list ----------
   Used by both templates (404 panel + search no-results). Echoes
   .re-feature-list from renel.css: rules, not boxes. The accent
   only ever appears as the 1px hover rule — never as text. */
.re-linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--re-dark-16);
}

.re-linklist li {
  margin: 0;
  border-bottom: 1px solid var(--re-dark-16);
  transition: border-color .2s ease;
}

.re-linklist li:hover { border-bottom-color: var(--re-accent); }

.re-linklist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-size: var(--wp--preset--font-size--b-1, 20px);
  font-weight: 600;
  color: var(--re-obsidian);
  text-decoration: none;
}

.re-linklist a:hover { text-decoration: none; }

/* Decorative chevron; the link text alone carries the meaning. */
.re-linklist a::after {
  content: "\2192";
  flex: none;
  color: var(--re-dark-48);
  transition: transform .2s ease, color .2s ease;
}

.re-linklist a:hover::after {
  transform: translateX(4px);
  color: var(--re-obsidian);
}

.re-linklist a:focus-visible {
  outline: 2px solid var(--re-obsidian);
  outline-offset: 2px;
}

/* ---------- Search form (core/search, button-inside) ----------
   Selectors are doubled on .wp-block-search so they beat core's
   own .wp-block-search__button-inside .wp-block-search__* rules
   (0,2,0) no matter which stylesheet prints last — per-block core
   styles are injected at render time in block themes. */
.re-searchform { margin: 0; }

.re-searchform.wp-block-search .wp-block-search__inside-wrapper {
  max-width: 520px;
  padding: 0;
  gap: 0;
  border: 1px solid var(--re-dark-16);
  background-color: var(--re-foundation);
}

.re-searchform.wp-block-search .wp-block-search__inside-wrapper:focus-within {
  border-color: var(--re-obsidian);
}

.re-searchform.wp-block-search .wp-block-search__input {
  min-width: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--re-obsidian);
  font-size: var(--wp--preset--font-size--b-2, 16px);
  letter-spacing: .25px;
}

.re-searchform.wp-block-search .wp-block-search__input::placeholder {
  color: var(--re-dark-48);
  opacity: 1;
}

.re-searchform.wp-block-search .wp-block-search__input:focus { outline: 0; }

/* Accent surface, Obsidian glyph — 6.61:1. */
.re-searchform.wp-block-search .wp-block-search__button {
  flex: none;
  margin: 0;
  padding: 14px 24px;
  border: 0;
  border-radius: 0;
  background-color: var(--re-accent);
  color: var(--re-obsidian);
  font-size: var(--wp--preset--font-size--b-2, 16px);
  font-weight: 600;
  cursor: pointer;
}

.re-searchform.wp-block-search .wp-block-search__button:hover {
  background-color: var(--re-accent-hover);
}

.re-searchform.wp-block-search .wp-block-search__button:focus-visible {
  outline: 2px solid var(--re-obsidian);
  outline-offset: 2px;
}

/* ---------- Search: head ---------- */
.re-search__head {
  max-width: 680px;
  margin-bottom: 64px;
}

.re-search__title {
  font-size: var(--wp--preset--font-size--h-2, 64px);
  line-height: .875;
  letter-spacing: -2px;
  margin: 16px 0 32px;
  /* A pasted URL or a very long term must not blow out the band. */
  overflow-wrap: anywhere;
}

/* ---------- Search: results ----------
   One rule per result, matching the 680px editorial measure used
   by .re-article__body. */
.re-search__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--re-dark-16);
}

.re-search__list > li {
  max-width: 880px;
  padding: 32px 0;
  border-bottom: 1px solid var(--re-dark-16);
}

.re-search__item-title {
  font-size: var(--wp--preset--font-size--h-5, 32px);
  line-height: 1;
  letter-spacing: -1px;
  margin: 0 0 12px;
}

.re-search__item-title a { text-decoration: none; }

.re-search__item-title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.re-search__item-date {
  color: var(--re-stone);
  margin: 0 0 12px;
}

/* Static pages only carry their import/publish date, which says nothing useful
   about an evergreen service page — every one of them currently reads the same
   day. Dates are kept on posts, where they mean something. Delete this one rule
   to show a date on every result. */
.re-search__list > li.type-page .re-search__item-date { display: none; }

.re-search__item-excerpt {
  max-width: 680px;
  color: var(--re-dark-64);
  margin: 0;
}

.re-search__item-excerpt p { margin: 0; }

/* ---------- Search: no results ---------- */
.re-search__empty {
  max-width: 680px;
  margin: 0 0 48px;
  padding-top: 32px;
  border-top: 1px solid var(--re-dark-16);
  font-size: var(--wp--preset--font-size--b-1, 20px);
  line-height: 1.6;
  color: var(--re-dark-64);
}

.re-search__suggest { max-width: 680px; }

/* ---------- Search: pagination ---------- */
.re-search__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 880px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--re-dark-8);
  font-size: var(--wp--preset--font-size--b-2, 16px);
  font-weight: 600;
}

.re-search__pagination .wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.re-search__pagination a,
.re-search__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--re-dark-16);
  color: var(--re-obsidian);
  text-decoration: none;
}

.re-search__pagination a:hover {
  background-color: var(--re-sand);
  text-decoration: none;
}

.re-search__pagination a:focus-visible {
  outline: 2px solid var(--re-obsidian);
  outline-offset: 2px;
}

/* Current page: accent surface, Obsidian numeral — 6.61:1. */
.re-search__pagination .page-numbers.current {
  background-color: var(--re-accent);
  border-color: var(--re-dark-16);
  color: var(--re-obsidian);
}

.re-search__pagination .page-numbers.dots {
  min-width: 0;
  padding: 0 4px;
  border: 0;
  color: var(--re-dark-48);
}

/* Prev/next carry a word, so they get room to breathe. */
.re-search__pagination .wp-block-query-pagination-previous,
.re-search__pagination .wp-block-query-pagination-next {
  gap: 8px;
  padding: 0 16px;
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .re-404__panels {
    grid-template-columns: 1fr;
    gap: 48px;
    margin-top: 64px;
  }

  .re-404__title,
  .re-search__title {
    font-size: var(--wp--preset--font-size--h-3, 48px);
    letter-spacing: -1.5px;
  }

  .re-search__head { margin-bottom: 48px; }
}

@media (max-width: 720px) {
  .re-404,
  .re-search {
    padding-top: var(--wp--preset--spacing--section-s, 80px);
    padding-bottom: var(--wp--preset--spacing--section-m, 120px);
  }

  .re-404__title,
  .re-search__title {
    font-size: var(--wp--preset--font-size--h-5, 32px);
    letter-spacing: -1px;
  }

  .re-404__text {
    font-size: var(--wp--preset--font-size--b-2, 16px);
    margin-bottom: 32px;
  }

  /* Full-width stacked CTAs — easier thumb targets. */
  .re-404__actions { display: grid; }
  .re-404__actions .wp-block-button { width: 100%; }
  .re-404__actions .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
  }

  .re-404__panels {
    margin-top: 48px;
    padding-top: 32px;
  }

  .re-404__subhead,
  .re-search__suggest-title { margin-bottom: 16px; }

  .re-linklist a {
    font-size: var(--wp--preset--font-size--b-2, 16px);
    padding: 14px 0;
  }

  .re-searchform.wp-block-search .wp-block-search__inside-wrapper { max-width: none; }
  .re-searchform.wp-block-search .wp-block-search__input { padding: 12px; }
  .re-searchform.wp-block-search .wp-block-search__button { padding: 12px 16px; }

  .re-search__head { margin-bottom: 40px; }

  .re-search__list > li { padding: 24px 0; }

  .re-search__item-title {
    font-size: var(--wp--preset--font-size--h-6, 24px);
    letter-spacing: -.5px;
  }

  .re-search__empty {
    font-size: var(--wp--preset--font-size--b-2, 16px);
    margin-bottom: 32px;
  }

  .re-search__pagination { margin-top: 32px; }
}


/* ============================================================
   BLOG ARCHIVE  (merged from _archive.css)
   ============================================================ */
/* =============================================================
   REN-EL — BLOG ARCHIVE  (templates/index.html → /blog/)
   -------------------------------------------------------------
   Two bands: a sand masthead and a Foundation-white post grid.
   Both carry .re-grid, so the 4-column rule overlay runs straight
   through from the nav to the footer. Every surface is set with
   background-COLOR — the shorthand would wipe that overlay out.

   The grid is deliberately 2-up rather than 3-up: two cards plus
   the 16px gap map exactly onto the 4 overlay columns (2 + 2),
   and it mirrors .re-related on single.html so an article and the
   archive it came from read as the same object.

   The first card spans the full row as a horizontal feature. It
   is driven by :first-child, so on page 2+ the first post of that
   page leads instead — intended: every page opens with a feature.

   ACCESSIBILITY: --re-accent appears once, as the surface of the
   current page chip, with Obsidian on top (6.61:1). No accent
   text anywhere. Body copy is --re-dark-64 (~6.5:1 on Foundation),
   not --re-dark-48/--re-stone, which would fail AA at these sizes.
   ============================================================= */

.re-archive { background-color: var(--re-foundation); }

/* Global styles emit the flow-layout block-gap margins at (0,1,0)
   specificity, so every margin reset below is scoped one class
   deeper to win regardless of stylesheet order. */

/* ---------- Masthead ----------
   Eyebrow, title and intro stack in one column (designer 2026-09-23: the
   intro read as a stray line far to the right of the title; it now sits
   under it like the homepage hero's subtext, 24px below, in the hero's 564
   measure). The flex row that pushed the intro to the far right is gone. */
.re-archive__head {
  background-color: var(--re-sand);
  border-bottom: 1px solid var(--re-dark-8);
  padding:
    var(--wp--preset--spacing--section-m, 120px)
    var(--re-page-pad)
    var(--wp--preset--spacing--section-s, 80px);
}
.re-archive .re-archive__head > * { margin-block: 0; }
.re-archive__head-text { min-width: 0; }
.re-archive__title {
  font-size: var(--wp--preset--font-size--h-2, 64px);
  line-height: .875; letter-spacing: -2px;
  margin: 16px 0 0;
}
.re-archive .re-archive__head > .re-archive__intro {
  max-width: 564px;
  margin-top: 24px;
  font-size: var(--wp--preset--font-size--b-1, 20px);
  line-height: 1.4; color: var(--re-dark-64);
}

/* ---------- Post band ---------- */
.re-archive__list {
  background-color: var(--re-foundation);
  padding: var(--wp--preset--spacing--section-m, 120px) var(--re-page-pad);
}
.re-archive__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--re-gap);
  row-gap: clamp(48px, 6vw, 80px);
  align-items: stretch;
}
.re-archive__grid > li { margin-block: 0; min-width: 0; }

/* ---------- Card ---------- */
.re-card { display: flex; flex-direction: column; gap: 20px; height: 100%; }
.re-archive .re-card > * { margin-block: 0; }

.re-card__media {
  margin: 0; overflow: hidden;
  background-color: var(--re-sand);   /* placeholder tone while the image decodes */
}
.re-card__media img {
  width: 100%; height: clamp(220px, 26vw, 360px);
  object-fit: cover; display: block;
  transition: transform .5s ease;
}
.re-card:hover .re-card__media img { transform: scale(1.03); }

.re-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }
.re-archive .re-card__body > * { margin-block: 0; }
/* .re-label is 10px; a date is information, not decoration — 12px in
   --re-dark-64 keeps it legible and AA-clean. Two classes so it wins
   over .re-label whichever order the files are merged in. */
.re-card .re-card__date {
  font-size: var(--wp--preset--font-size--b-3, 12px);
  line-height: 1; color: var(--re-dark-64);
}
.re-card__title {
  font-size: var(--wp--preset--font-size--h-6, 24px);
  line-height: 1.17; letter-spacing: -.5px;
}
.re-card__excerpt { color: var(--re-dark-64); }
.re-card__excerpt p { margin: 0; }
.re-card__more { font-size: 14px; font-weight: 600; color: var(--re-dark-64); }
/* Pushed to the foot of the card so the links line up across a row. */
.re-archive .re-card__body > .re-card__more { margin-block-start: auto; padding-top: 4px; }
.re-card__more:hover { color: var(--re-obsidian); }

/* ---------- Featured first card ----------
   Flex, not grid: if the lead post has no featured image the body
   simply takes the whole row instead of leaving an empty column. */
.re-archive__grid > li:first-child {
  grid-column: 1 / -1;
  padding-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--re-dark-8);
}
.re-archive__grid > li:first-child > .re-card {
  flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: var(--re-gap);
}
/* 320px basis: the halves stack on their own below ~656px of content. */
.re-archive__grid > li:first-child > .re-card > * { flex: 1 1 320px; min-width: 0; }
.re-archive__grid > li:first-child .re-card__media img { height: clamp(320px, 38vw, 520px); }
.re-archive__grid > li:first-child .re-card__body { gap: 16px; }
.re-archive__grid > li:first-child .re-card__title {
  font-size: var(--wp--preset--font-size--h-3, 48px);
  line-height: .95; letter-spacing: -1.5px;
}
.re-archive__grid > li:first-child .re-card__excerpt {
  font-size: var(--wp--preset--font-size--b-1, 20px);
  line-height: 1.5; max-width: 56ch;
}

/* ---------- Term archives (category / tag) ----------
   archive.html reuses this whole surface; only the rules below differ.

   The featured-first treatment is deliberately undone. On /blog/ the lead
   post is genuinely featured, but a tag holding a single post would render
   that post as a full-width hero — which reads as a landing page rather
   than as a filtered list. Every card is equal weight here.

   These selectors carry one extra class over the block above, so they win
   regardless of source order. */
.re-term .re-archive__grid > li:first-child {
  grid-column: auto;
  padding-bottom: 0;
  border-bottom: 0;
}
.re-term .re-archive__grid > li:first-child > .re-card {
  flex-direction: column; flex-wrap: nowrap; align-items: stretch;
  gap: 20px;
}
.re-term .re-archive__grid > li:first-child > .re-card > * { flex: 0 1 auto; }
.re-term .re-archive__grid > li:first-child .re-card__media img {
  height: clamp(220px, 26vw, 360px);
}
.re-term .re-archive__grid > li:first-child .re-card__body { gap: 12px; }
.re-term .re-archive__grid > li:first-child .re-card__title {
  font-size: var(--wp--preset--font-size--h-6, 24px);
  line-height: 1.17; letter-spacing: -.5px;
}
.re-term .re-archive__grid > li:first-child .re-card__excerpt {
  font-size: inherit; line-height: inherit; max-width: none;
}

/* Route back to /blog/. Nothing on the site links INTO these archives, so a
   visitor here arrived from a bookmark or a stale search result and would
   otherwise be stranded. Sits above the eyebrow as a breadcrumb would. */
.re-archive__back {
  font-size: 14px; font-weight: 600;
  color: var(--re-dark-64);
  margin: 0 0 8px;
}
.re-archive__back a { color: inherit; text-decoration: none; }
.re-archive__back a:hover { color: var(--re-obsidian); }

/* ---------- No results ----------
   Reached when a term has no published posts, and from index.html as the
   last-resort template. The copy is kept generic enough for both. */
.re-archive__list .wp-block-query-no-results { max-width: 560px; }
.re-archive__empty {
  font-size: var(--wp--preset--font-size--b-1, 20px);
  line-height: 1.4; margin: 0 0 16px;
}
.re-archive__empty-links { color: var(--re-dark-64); margin: 0; }
.re-archive__empty-links a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Pagination ----------
   Core renders <nav class="wp-block-query-pagination …">; the two
   classes here outrank the layout container rules core prints for
   the flex justification, so the row is ours either way. */
.wp-block-query-pagination.re-archive__pagination {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--re-gap);
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 32px;
  border-top: 1px solid var(--re-dark-8);
}
.re-archive__pagination .wp-block-query-pagination-numbers {
  flex: 1 1 auto;
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; align-items: center;
  margin: 0;
}
.re-archive__pagination .page-numbers {
  display: inline-grid; place-items: center;
  min-width: 40px; height: 40px; padding: 0 10px;
  border: 1px solid var(--re-dark-8);
  background-color: var(--re-foundation);
  font-size: 14px; font-weight: 600; line-height: 1;
}
.re-archive__pagination a.page-numbers:hover {
  background-color: var(--re-sand);
  text-decoration: none;
}
/* Accent as a SURFACE only — the digit on top is Obsidian (6.61:1). */
.re-archive__pagination .page-numbers.current {
  background-color: var(--re-accent);
  border-color: var(--re-dark-16);
  color: var(--re-obsidian);
}
.re-archive__pagination .page-numbers.dots {
  border-color: transparent;
  background-color: transparent;
  color: var(--re-dark-64);
}
.re-archive__pagination .wp-block-query-pagination-previous,
.re-archive__pagination .wp-block-query-pagination-next {
  display: inline-flex; align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--re-dark-16);
  background-color: var(--re-foundation);
  font-size: 14px; font-weight: 600; line-height: 1;
}
.re-archive__pagination .wp-block-query-pagination-previous:hover,
.re-archive__pagination .wp-block-query-pagination-next:hover {
  background-color: var(--re-sand);
  text-decoration: none;
}

/* ---------- Keyboard focus ---------- */
.re-archive a:focus-visible {
  outline: 2px solid var(--re-obsidian);
  outline-offset: 3px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  /* Same step-down the article title takes at this breakpoint. */
  .re-archive__title {
    font-size: var(--wp--preset--font-size--h-3, 48px);
    letter-spacing: -1.5px;
  }
  .re-archive__grid > li:first-child .re-card__title {
    font-size: var(--wp--preset--font-size--h-5, 32px);
    letter-spacing: -1px;
  }
  .re-archive__grid > li:first-child .re-card__media img { height: clamp(280px, 40vw, 420px); }
}

@media (max-width: 720px) {
  .re-archive .re-archive__head > .re-archive__intro { margin-top: 16px; }
  .re-archive__title {
    font-size: var(--wp--preset--font-size--h-5, 32px);
    letter-spacing: -1px;
  }
  .re-archive__intro { font-size: var(--wp--preset--font-size--b-2, 16px); }

  .re-archive__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .re-archive__grid > li:first-child { padding-bottom: 48px; }
  /* The feature stacks here rather than at its own 320px basis, so the
     switch lands on the theme breakpoint instead of a few pixels below it. */
  .re-archive__grid > li:first-child > .re-card {
    flex-direction: column; align-items: stretch; gap: 20px;
  }
  .re-archive__grid > li:first-child > .re-card > * { flex: 0 1 auto; }
  .re-card__media img { height: clamp(200px, 52vw, 280px); }
  .re-archive__grid > li:first-child .re-card__media img { height: clamp(200px, 56vw, 320px); }
  .re-archive__grid > li:first-child .re-card__title {
    font-size: var(--wp--preset--font-size--h-6, 24px);
    letter-spacing: -.5px;
  }
  .re-archive__grid > li:first-child .re-card__excerpt {
    font-size: var(--wp--preset--font-size--b-2, 16px);
  }

  .wp-block-query-pagination.re-archive__pagination { gap: 12px; }
  .re-archive__pagination .wp-block-query-pagination-previous,
  .re-archive__pagination .wp-block-query-pagination-next { padding: 12px; }
}

/* =============================================================
   TEAM ROSTER  —  patterns/team.php
   Measurements from Figma node 30049:7096 "Team Grid" (About page),
   not estimated: 4 per row, one grid column each (332px @1440),
   16px column gap / 32px row gap, portrait 332x415, 16px to the
   info block, section padding 120 top / 160 bottom.
   ============================================================= */

.re-team { background-color: var(--re-foundation); }
.re-team {
  padding-top: var(--wp--preset--spacing--section-m, 120px);
  padding-bottom: var(--wp--preset--spacing--section-l, 160px);
}
/* Figma: 24px inside the header, 64px from header to the grid. */
.re-team__head { margin-bottom: 64px; }
.re-team__head > * { margin-block: 0; }
.re-team__head h2 {
  font-size: var(--wp--preset--font-size--h-2, 64px);
  line-height: 56px; letter-spacing: -2px;
  margin-top: 24px; max-width: 680px;
}

.re-team__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--re-gap);   /* 16px — same value the template uses */
  row-gap: 32px;
}
.re-team__card { margin: 0; min-width: 0; }

/* 332:415 is the template's portrait box. Fixing the ratio also keeps the row
   from reflowing when the hover portrait swaps in. Sand fill covers the gap
   while the JPEG decodes — the same placeholder tone Figma uses. */
.re-team__photo {
  position: relative;
  aspect-ratio: 332 / 415;
  overflow: hidden;
  background-color: var(--re-sand);
}
.re-team__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* The informal portrait sits on top at zero opacity. This is the one Ren-El
   behaviour the template has no equivalent for — it comes from the live site.
   Purely decorative: it is the same person, so nothing is withheld from
   keyboard or touch users, who simply keep the formal portrait. :focus-within
   is retained so the swap still fires if a focusable element is ever added
   back to the card. */
.re-team__img--hover { opacity: 0; transition: opacity .35s ease; }
.re-team__card:hover .re-team__img--hover,
.re-team__card:focus-within .re-team__img--hover { opacity: 1; }

/* Figma: 16px image→info, 4px name→role. The name is Body/Medium-Bold (16px),
   NOT a heading — an earlier guess had it at 24px, which made every card shout. */
.re-team__body { padding-top: 16px; }
.re-team__body > * { margin-block: 0; }
.re-team__name {
  font-size: var(--wp--preset--font-size--b-2, 16px);
  line-height: 24px; letter-spacing: .25px;
  font-weight: 600; color: var(--re-dark-88);
}
.re-team__role {
  font-size: var(--wp--preset--font-size--b-3, 12px);
  line-height: 16px; letter-spacing: .25px;
  color: var(--re-dark-64);
  margin-top: 4px;
}

/* =============================================================
   KONTAKT COMPONENT  —  patterns/kontakt.php
   From Figma node 30057:7202 "Contact" (Service #1), form panel
   at 30057:7225. Two columns at the template's 447:680 ratio,
   panel on Foundation White with 48px padding and 48px gap,
   inputs on Quarry Sand at 16/12 padding.
   ============================================================= */

.re-kontakt {
  background-color: var(--re-sand);
  padding-block: var(--wp--preset--spacing--section-m, 120px);
}
.re-kontakt__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);   /* 447 : 680 */
  gap: 48px;
  align-items: start;
}
.re-kontakt__text > * { margin-block: 0; }
.re-kontakt__heading {
  font-size: var(--wp--preset--font-size--h-3, 48px);
  line-height: 1.05; letter-spacing: -1.5px;
  margin-top: 24px;
}
.re-kontakt__intro {
  margin-top: 24px; max-width: 52ch;
  font-size: var(--wp--preset--font-size--b-2, 16px);
  line-height: 24px; color: var(--re-dark-64);
}

.re-kontakt__routes { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
.re-kontakt__route { margin: 0; }
.re-kontakt__route > a,
.re-kontakt__route--static {
  display: flex; align-items: center; gap: 16px;
  padding: 20px;
  background-color: var(--re-foundation);
  border: 1px solid var(--re-dark-8);
  text-decoration: none; color: inherit;
  transition: border-color .2s ease, transform .2s ease;
}
.re-kontakt__route > a:hover { border-color: var(--re-accent); transform: translateY(-2px); }
.re-kontakt__icon {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background-color: var(--re-accent);
  color: var(--re-obsidian);          /* glyph on accent — 6.61:1 */
}
.re-kontakt__icon svg { width: 20px; height: 20px; display: block; }
.re-kontakt__route-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.re-kontakt__label {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--re-dark-64);
}
.re-kontakt__value {
  font-size: var(--wp--preset--font-size--b-2, 16px);
  line-height: 1.3; font-weight: 600; color: var(--re-obsidian);
}

/* ---------- Form panel ---------- */
.re-kontakt__panel {
  background-color: var(--re-foundation);
  padding: 48px;
  display: flex; flex-direction: column; gap: 48px;
}
.re-kontakt__panel-title {
  margin: 0;
  font-size: var(--wp--preset--font-size--h-5, 32px);
  line-height: 32px; letter-spacing: -1px;
  color: var(--re-obsidian);
}
.re-kontakt__notice {
  margin: 0; padding: 16px;
  font-size: var(--wp--preset--font-size--b-2, 16px);
  line-height: 24px;
}
.re-kontakt__notice--ok    { background-color: var(--re-sand); color: var(--re-obsidian); border-left: 4px solid var(--re-accent); }
.re-kontakt__notice--error { background-color: var(--re-sand); color: var(--re-obsidian); border-left: 4px solid var(--re-ui-error, #cc2936); }

.re-form { display: flex; flex-direction: column; gap: 24px; }
/* Honeypot. Not display:none — some bots skip hidden fields, and this way a
   screen reader skips it via aria-hidden while a script still sees it. */
.re-form__hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}
.re-form__field { display: flex; flex-direction: column; gap: 8px; }
.re-form__field label,
.re-form__consent label {
  font-size: var(--wp--preset--font-size--b-3, 12px);
  line-height: 16px; letter-spacing: 1px;
  text-transform: uppercase; font-weight: 500;
  color: var(--re-obsidian);
}
.re-form__field input,
.re-form__field textarea {
  width: 100%;
  background-color: var(--re-sand);
  border: 1px solid transparent;      /* reserved so :focus does not shift layout */
  padding: 12px 16px;
  font: inherit;
  font-size: var(--wp--preset--font-size--b-2, 16px);
  line-height: 24px; letter-spacing: .25px;
  color: var(--re-obsidian);
  border-radius: 0;
}
.re-form__field textarea { resize: vertical; min-height: 160px; }
.re-form__field input::placeholder,
.re-form__field textarea::placeholder { color: var(--re-dark-48); }
.re-form__field input:focus-visible,
.re-form__field textarea:focus-visible {
  outline: none; border-color: var(--re-obsidian);
}
.re-form__consent { display: flex; align-items: flex-start; gap: 12px; }
.re-form__consent input {
  flex: 0 0 auto;
  width: 24px; height: 24px; margin: 0;
  accent-color: var(--re-accent);
}
/* Sentence case here, not the uppercase label treatment above — it is a
   sentence the visitor reads, not a field name. */
.re-form__consent label {
  text-transform: none; letter-spacing: .25px; font-weight: 400;
  font-size: var(--wp--preset--font-size--b-2, 16px);
  line-height: 24px; color: var(--re-dark-88);
}

.re-form__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.re-form__note {
  margin: 0; max-width: 252px;
  font-size: var(--wp--preset--font-size--b-3, 12px);
  line-height: 16px; letter-spacing: .25px;
  color: var(--re-dark-64);
}
.re-form__submit {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background-color: var(--re-accent);
  border: 1px solid var(--re-dark-16);
  color: var(--re-obsidian);          /* 6.61:1 — accent is a surface, never a text colour */
  font: inherit; font-size: var(--wp--preset--font-size--b-2, 16px);
  line-height: 24px; font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease;
}
.re-form__submit:hover { background-color: var(--re-accent-hover); }
.re-form__submit .re-icon { display: block; }
.re-form__submit svg { width: 16px; height: 16px; display: block; }

/* =============================================================
   RESPONSIVE  —  team + kontakt
   ============================================================= */

@media (max-width: 1080px) {
  .re-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .re-kontakt__inner { grid-template-columns: 1fr; }
  .re-kontakt__text h2 { max-width: none; }
}

@media (max-width: 720px) {
  /* Two, not one. A single column would put ten full-height portraits back on
     the page, which is the scroll problem this layout exists to solve. */
  .re-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .re-team { padding-block: var(--wp--preset--spacing--section-s, 80px); }
  .re-team__head { margin-bottom: 40px; }
  .re-team__head h2,
  .re-kontakt__text h2 {
    font-size: var(--wp--preset--font-size--h-5, 32px);
    line-height: 1.05; letter-spacing: -1px;
  }
  .re-kontakt__intro { font-size: var(--wp--preset--font-size--b-2, 16px); }
  .re-kontakt { padding-block: var(--wp--preset--spacing--section-s, 80px); }
  .re-kontakt__panel { padding: 24px; gap: 32px; }
  .re-kontakt__heading { font-size: var(--wp--preset--font-size--h-5, 32px); letter-spacing: -1px; }
  .re-form__footer { align-items: flex-start; }
  .re-form__submit { width: 100%; justify-content: center; }
}

/* =============================================================
   YDELSER MEGA MENU, full width (2026-10-01)
   No Figma source: the template's bar has flat links only, so this is our
   own, built from the template's grid. The panel drops from the bar across
   the whole width and lays the sixteen services out as four groups on the
   1392 rail, hairlines between the columns like the footer. The groups are
   nested submenus in parts/header.html (class re-nav-group, no URL), whose
   label renders as plain text; their lists stay open while the panel is.
   The phone overlay has its own rules further down.
   ============================================================= */
/* The panel positions against the sticky bar: everything between is static. */
.re-nav .wp-block-navigation,
.re-nav .wp-block-navigation__responsive-container:not(.is-menu-open),
.re-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
.re-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
.re-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content,
.re-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child { position: static; }
.re-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
  left: 0; right: 0; top: 100%;
  width: auto; min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 32px max(var(--re-page-pad), calc((100% - 1392px) / 2)) 40px;
  background-color: var(--re-foundation);
  border: 0;
  border-top: 1px solid var(--re-dark-8);
  border-bottom: 1px solid var(--re-dark-8);
  box-shadow: 0 24px 48px -12px var(--re-dark-16, rgba(3, 3, 4, .16));
}
.re-nav .wp-block-navigation__submenu-container .wp-block-navigation-item { display: block; }
.re-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 9px 12px;
  font-size: 14px; line-height: 1.3;
  white-space: normal;
  color: var(--re-charcoal);
  transition: background-color .15s ease, color .15s ease;
}
.re-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.re-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  background-color: var(--re-sand);
  color: var(--re-obsidian);
}
/* One group per column: a label-2 heading over a hairline, then its links.
   The heading is the nested submenu's label link without a URL: text only. */
.re-nav .re-nav-group { padding: 0 24px; border-left: 1px solid var(--re-dark-8); }
.re-nav .re-nav-group:first-child { padding-left: 0; border-left: 0; }
.re-nav .re-nav-group:last-child { padding-right: 0; }
.re-nav .re-nav-group > .wp-block-navigation-item__content {
  display: block; padding: 0 12px 12px; margin-bottom: 8px;
  font-size: 10px; line-height: 1.2; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
  color: var(--re-dark-64);
  border-bottom: 1px solid var(--re-dark-8);
  pointer-events: none;
}
.re-nav .re-nav-group > .wp-block-navigation__submenu-icon { display: none; }
.re-nav .re-nav-group > .wp-block-navigation__submenu-container {
  position: static; display: block;
  width: auto; height: auto; min-width: 0;
  opacity: 1; visibility: inherit; overflow: visible;
  margin: 0; padding: 0;
  background: none; border: 0; box-shadow: none; transform: none;
}

/* ---------- Phone overlay menu (styled 2026-09-29) ----------
   Core moves the same <ul> into a fixed, full-screen container; everything
   here is scoped to .is-menu-open so the desktop bar is untouched. The look
   follows the site's own language: hairline rows (dark-8) with 20/600
   labels, the Ydelser list in a Quarry Sand panel under its "Vi tilbyder"
   label, the FAQ pop-up's square close button in the bar's own row, and at
   the foot the accent "Få et tilbud" button and the phone number (two nav
   links in parts/header.html that only show inside the overlay). */
.re-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 0; }
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { min-height: 100%; }
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
}
/* Close: Figma "Button / Circle" (34px, 1px dark-16, 16px glyph), where the burger was. */
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: absolute; top: 15px; right: var(--re-page-pad); z-index: 2;
  width: 34px; height: 34px; margin: 0; padding: 0;
  display: grid; place-items: center;
  background-color: #fff;
  border: 1px solid var(--re-dark-16); border-radius: 0;
  color: var(--re-obsidian);
}
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 16px; height: 16px; }
/* The list fills the dialog; its first row is the logo band, the actions sit at the foot. */
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog > .wp-block-navigation__responsive-container-content {
  flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 0 0 24px;
}
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  flex: 1 0 auto;
  /* A grid: link rows span all four columns; row 21 (minmax(0, 1fr)) takes the
     free height so the button pair in row 22 sits at the foot, or straight
     after the list once it is taller than the screen. Twenty link rows is
     capacity, not a count: empty auto rows are 0px. */
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-rows: repeat(20, auto) minmax(0, 1fr) auto;
  gap: 0 8px;   /* the pair's gap; the outer columns get it too, symmetrically */
  align-content: start;
  width: 100%; margin: 0; padding: 0;
}
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
  grid-column: 1 / -1;
  display: block; width: 100%; margin: 0;
  border-right: 0;
  border-bottom: 1px solid var(--re-dark-8);
}
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:hover { background: none; }
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  display: block;   /* no width: 100% here, the side padding would overflow the overlay */
  padding: 18px var(--re-page-pad);
  font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.2px;
  color: var(--re-obsidian);
}
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { display: none; }
/* "Ydelser" is a dropdown here (Hunter, 29 Sept): the theme's own toggle button
   (functions.php) is the row, core's label link ("#") and icon button are
   hidden, and renel.js flips .re-open on the item. The list opens by animating
   the item's second grid row from 0fr to 1fr, so the panel's spacing sits on
   the label pseudo-element and the last item, never on the list box itself. */
.re-nav .re-nav-menu__toggle { display: none; }
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.has-child {
  display: grid; grid-template-columns: 100%; grid-template-rows: auto 0fr;
  align-items: stretch;   /* core sets flex-start on the item; the list must follow the 0fr track */
  transition: grid-template-rows .25s ease;
}
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.has-child.re-open { grid-template-rows: auto 1fr; }
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { display: none; }
.re-nav .wp-block-navigation__responsive-container.is-menu-open .re-nav-menu__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-sizing: border-box; width: 100%; margin: 0; padding: 18px var(--re-page-pad);
  background: none; border: 0; border-radius: 0;
  font: inherit; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.2px;
  color: var(--re-obsidian); text-align: left; cursor: pointer;
}
.re-nav .wp-block-navigation__responsive-container.is-menu-open .re-nav-menu__toggle svg { width: 16px; height: 16px; flex: none; transition: transform .25s ease; }
.re-nav .wp-block-navigation__responsive-container.is-menu-open .has-child.re-open > .re-nav-menu__toggle svg { transform: rotate(180deg); }
/* Core paints every list inside the open overlay "background: transparent
   !important" and pads the submenu 2rem with a five-class selector, so the
   panel rule is scoped a step deeper and its colour is !important as well. */
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
  position: static; display: block; width: 100%; min-width: 0; min-height: 0;
  margin: 0; padding: 0; overflow: hidden;
  background: var(--re-sand) !important;
  border: 0; box-shadow: inset 0 1px 0 var(--re-dark-8);
  visibility: hidden; transition: visibility 0s .25s;
}
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .has-child.re-open > .wp-block-navigation__submenu-container { visibility: visible; transition-delay: 0s; }
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { display: block; width: 100%; }
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child { padding-bottom: 12px; }
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 11px var(--re-page-pad);
  font-size: 16px; line-height: 1.4; font-weight: 500;
  color: var(--re-dark-88);
}
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible { outline-offset: -3px; }
/* The four service groups inside the panel: no column padding or rule here,
   a small heading each, lists open
   (core pads nested lists 2rem and forces them visible; both undone here, the
   list inheriting the panel's visibility so a collapsed panel has no
   focusable links). */
.re-nav .wp-block-navigation__responsive-container.is-menu-open .re-nav-group { padding: 0; border-left: 0; }
.re-nav .wp-block-navigation__responsive-container.is-menu-open .re-nav-group > .wp-block-navigation-item__content {
  display: block; padding: 16px var(--re-page-pad) 4px;
  font-size: 10px; line-height: 1.2; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
  color: var(--re-dark-64); pointer-events: none;
}
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .re-nav-group > .wp-block-navigation__submenu-container {
  position: static; display: block; width: 100%; min-width: 0; height: auto;
  margin: 0; padding: 0; overflow: visible; opacity: 1; visibility: inherit;
  background: transparent !important; border: 0; box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.has-child,
  .re-nav .wp-block-navigation__responsive-container.is-menu-open .re-nav-menu__toggle svg,
  .re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-container { transition: none; }
}
/* ---------- Burger at 1180px and under (Hunter, 29 Sept) ----------
   Core swaps to the burger only below 600px. Here the six items end at 497px
   whatever the width and the centred logo starts at half the viewport minus
   67px, so they collide below about 1150px. The burger takes over at 1180px
   and under; the overlay rules are not width-scoped, so the phone menu is
   what opens. Above 1180px nothing changes. */
@media (max-width: 1180px) {
  .re-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .re-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
/* Foot actions: nav links that exist only for the overlay, side by side in the
   grid's two centre columns at their natural width with the site's button
   padding (client 2026-09-29): the same pair as the hero, centred as a unit. */
.re-nav .re-nav-menu__cta,
.re-nav .re-nav-menu__tel { display: none; }
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .re-nav-menu__cta,
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .re-nav-menu__tel { grid-row: 22; display: flex; width: auto; margin: 0; padding: 32px 0 0; border-bottom: 0; }
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .re-nav-menu__cta { grid-column: 2; }
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .re-nav-menu__tel { grid-column: 3; }
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .re-nav-menu__cta > .wp-block-navigation-item__content,
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .re-nav-menu__tel > .wp-block-navigation-item__content {
  display: inline-flex; justify-content: center; align-items: center;
  box-sizing: border-box; width: auto; min-width: 0;   /* natural width, like the hero pair */
  padding: 12px 16px;
  color: var(--re-obsidian);
  font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0;
}
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .re-nav-menu__cta > .wp-block-navigation-item__content { background-color: var(--re-accent); border: 1px solid var(--re-dark-8); }
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .re-nav-menu__tel > .wp-block-navigation-item__content { background-color: #fff; border: 1px solid var(--re-dark-16); }
/* Top-left logo (client 2026-09-29): the bar's lockup on a nav link that only
   shows inside the overlay, as the first row, a 64px band level with the
   close button; the row's hairline is the generic item border. */
.re-nav .re-nav-menu__logo { display: none; }
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .re-nav-menu__logo {
  box-sizing: border-box; display: flex; flex-direction: row; align-items: center;
  min-height: 64px; padding: 0 var(--re-page-pad);
}
.re-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .re-nav-menu__logo > .wp-block-navigation-item__content {
  display: block; width: 134px; height: 40px; padding: 0;
  background: url("../img/logo-renel.png") no-repeat left center;
  background-size: contain;
  text-indent: -200vw; white-space: nowrap; overflow: hidden;
}

/* =============================================================
   ABOUT PAGE  —  templates/page-om-os.html
   ============================================================= */

.re-about { background-color: var(--re-foundation); }

/* Masthead borrowed from the archive so the two landing surfaces match. */
.re-about__head {
  background-color: var(--re-sand);
  border-bottom: 1px solid var(--re-dark-8);
  padding:
    var(--wp--preset--spacing--section-m, 120px)
    var(--re-page-pad)
    var(--wp--preset--spacing--section-s, 80px);
}
.re-about .re-about__head > * { margin-block: 0; }
.re-about__head-text > * { margin-block: 0; }
.re-about__title {
  font-size: var(--wp--preset--font-size--h-2, 64px);
  line-height: .875; letter-spacing: -2px;
  margin: 16px 0 0;
}

/* No measure here, unlike .re-article__body — each section sets its own. */
.re-about__body > * { margin-block: 0; }

/* ---------- Text / image bands ---------- */
.re-about__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--re-gap);
  align-items: center;
  padding-block: var(--wp--preset--spacing--section-m, 120px);
}
.re-about__split + .re-about__split { padding-top: 0; }
.re-about .re-about__split > * { margin-block: 0; }
.re-about__split-text > * { margin-block: 0; }
.re-about__split-text h2 {
  font-size: var(--wp--preset--font-size--h-4, 40px);
  line-height: 1; letter-spacing: -1.5px;
  margin-bottom: 24px;
}
.re-about__split-text p { color: var(--re-dark-64); max-width: 54ch; }
.re-about__split-text p + p { margin-top: 16px; }
.re-about__split-media { margin: 0; }
.re-about__split-media img {
  width: 100%; height: clamp(320px, 34vw, 460px);
  object-fit: cover; display: block;
}
/* Source order stays text-then-image so the reading order is right without CSS;
   only the visual columns swap. */
.re-about__split--reverse .re-about__split-media { order: -1; }

/* ---------- Photo strip ----------
   Four across, edge to edge. Full-bleed on purpose: it is a breather between
   two text bands, and the page padding would make it read as another block. */
.re-about__strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}
.re-about .re-about__strip > * { margin-block: 0; }
.re-about__strip figure { margin: 0; overflow: hidden; background-color: var(--re-sand); }
.re-about__strip img {
  width: 100%; height: clamp(200px, 20vw, 300px);
  object-fit: cover; display: block;
  transition: transform .5s ease;
}
.re-about__strip figure:hover img { transform: scale(1.04); }

/* ---------- Why choose us ---------- */
.re-about__points { padding-block: var(--wp--preset--spacing--section-m, 120px); }
.re-about .re-about__points > * { margin-block: 0; }
.re-about__points h2 {
  font-size: var(--wp--preset--font-size--h-4, 40px);
  line-height: 1; letter-spacing: -1.5px;
  margin-bottom: 40px;
}
.re-about__points-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--re-gap);
}
.re-about__points-list li {
  margin: 0; padding-top: 20px;
  border-top: 2px solid var(--re-accent);
  font-size: var(--wp--preset--font-size--b-1, 20px);
  line-height: 1.3; letter-spacing: -.5px;
  color: var(--re-obsidian);
}

/* ---------- Closing two-column text ---------- */
.re-about__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--re-gap);
  padding-bottom: var(--wp--preset--spacing--section-m, 120px);
}
.re-about .re-about__cols > * { margin-block: 0; }
.re-about__col > * { margin-block: 0; }
.re-about__col h2 {
  font-size: var(--wp--preset--font-size--h-6, 24px);
  line-height: 1.17; letter-spacing: -.5px;
  margin-bottom: 16px;
}
.re-about__col p { color: var(--re-dark-64); }
.re-about__col p + p { margin-top: 16px; }

@media (max-width: 1080px) {
  .re-about__split { grid-template-columns: 1fr; gap: 32px; }
  /* Reading order wins over the visual swap once the bands stack. */
  .re-about__split--reverse .re-about__split-media { order: 0; }
  .re-about__points-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .re-about__cols { grid-template-columns: 1fr; gap: 40px; }
  .re-about__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .re-about__title { font-size: var(--wp--preset--font-size--h-4, 40px); letter-spacing: -1px; }
  .re-about__head { padding-top: var(--wp--preset--spacing--section-s, 80px); }
  .re-about__split,
  .re-about__points { padding-block: var(--wp--preset--spacing--section-s, 80px); }
  .re-about__split-text h2,
  .re-about__points h2 { font-size: var(--wp--preset--font-size--h-5, 32px); letter-spacing: -1px; }
  .re-about__points-list { grid-template-columns: 1fr; gap: 20px; }
  .re-about__points-list li { font-size: var(--wp--preset--font-size--b-2, 16px); }
}

/* The footer CTA and the Kontakt component are both closing calls to action, and
   page.html now puts the Kontakt component on every interior page. Showing both
   stacks two CTAs above the footer. Where the page already carries a Kontakt
   section, the footer CTA stands down.

   :has() is the whole mechanism here; if a browser lacks it the rule simply does
   not apply and both blocks show, which is the old behaviour — no layout breaks.
   The homepage has no .re-kontakt, so it keeps its footer CTA. */
body:has(.re-kontakt) .re-footer-cta { display: none; }

/* ==========================================================================
   MERGED PARTIALS (pre-launch merge, 2026-09-29). Until today these files were
   auto-enqueued from assets/css/partials/ after renel.css, in alphabetical
   order; they are appended here in that same order, so the cascade is
   unchanged. The originals are archived in the site-root _launch/retired/.
   ========================================================================== */

/* ---------------------------------------------------------------- merged: partials/about.css */
/* =============================================================
   ABOUT PAGE — Figma-true pass (agent A, 2026-08-18)
   Sources: Figma 30044:2556 (Hero 4), 30044:2623 (Value & Features),
   30049:7451 (Stats), carousel geometry from the 30024:445 instance
   inside 30044:2623. Owns templates/page-om-os.html + om-os content.
   Loads after renel.css (partials auto-enqueue), so overrides here win.
   ============================================================= */

/* renel.css gives main.re-about a section-l top pad (it predates the
   masthead). The Hero 4 masthead sits flush under the header instead. */
.re-about { padding-top: 0; }

/* ---------- Masthead: the standard split hero ----------
   User rule 2026-08-30: every main page opens like the service pages —
   featured image + notch left, H1 + CTA pair right. The Hero 4 scatter
   masthead (30044:2556) was retired for consistency; layout comes from
   partials/service-hero.css, gated on :has(featured image). This band
   only supplies what main.re-about (unpadded, unlike page.html's
   main.re-article) doesn't: page padding and the Foundation ground. */
.re-about-splithero {
  padding-inline: var(--re-page-pad, 32px);
  background-color: var(--re-foundation);
}
.re-about-splithero > * { margin-block: 0; }

/* The split hero's own 80px bottom margin (service-hero.css) would stack
   onto the first body section's 120px top padding here — kill it. Three
   classes outgun service-hero's :has() selector at (0,2,1). */
.re-about .re-about-splithero .re-page-hero { margin-bottom: 0; }

/* No-image fallback: page.html hides the CTA row via .re-article; this
   template's main is .re-about, so the guard is restated. The reveal in
   service-hero.css carries (0,3,1) and still wins when an image renders. */
.re-about .re-page-hero .re-page-hero__actions { display: none; }

/* ---------- Value & Features (30044:2623) ---------- */
/* Intro row: content right-aligned into columns 3-4 (680px). */
.re-about-vf {
  padding-top: var(--wp--preset--spacing--section-m, 120px);
  padding-bottom: clamp(48px, 5.5vw, 80px);
}
.re-about-vf > * { margin-block: 0; }
.re-about-vf__intro {
  max-width: 680px;
  margin-left: auto;
}
.re-about-vf__intro > * { margin-block: 0; }
/* "Firmaprofil" keeps its h2 slot but wears the eyebrow dress
   (.re-eyebrow paints the 8px square + dark-64). */
.re-about-vf__intro h2 {
  font-family: var(--wp--preset--font-family--body, inherit);
  font-size: var(--wp--preset--font-size--b-3, 12px);
  line-height: 1.33;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 24px;
}
/* First paragraph = the h5-scale statement of the Figma Content Row. */
.re-about-vf__lead {
  font-family: var(--wp--preset--font-family--heading, inherit);
  font-size: var(--wp--preset--font-size--h-5, 32px);
  line-height: 1;
  letter-spacing: -1px;
  font-weight: 500;
  color: var(--re-obsidian);
  margin: 0 0 24px;
}
.re-about-vf__intro p:not(.re-about-vf__lead) {
  font-size: var(--wp--preset--font-size--b-1, 20px);
  line-height: 1.4;
  color: var(--re-dark-64);
}

/* ---------- Image carousel (30024:445 inside 30044:2623) ----------
   Edge-to-edge row, CSS scroll-snap, no JS. Track = flex row, gap 16.
   Items alternate 450px square / 680x450, scaled fluidly. The overflow
   scrolls INSIDE the row; the page never scrolls sideways. */
.re-about-carousel { overflow: hidden; }
.re-about-carousel__track {
  display: flex;
  gap: var(--re-gap, 16px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-padding-inline: var(--re-page-pad, 32px);
}
.re-about-carousel__track > * { margin-block: 0; }
.re-about-carousel__track > .wp-block-image {
  flex: none;
  margin: 0;
  scroll-snap-align: start;
  background-color: var(--re-sand);
  height: clamp(280px, 31.25vw, 450px);   /* 450 at 1440 */
  aspect-ratio: 1;                        /* odd items: 450 square */
}
.re-about-carousel__track > .wp-block-image:nth-child(even) {
  aspect-ratio: 680 / 450;                /* even items: 680x450 */
}
.re-about-carousel__track > .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Content blocks (30049:1523 / 30049:1526) ----------
   680px column of b1 text with a bold lead line; one block right-
   aligned before the feature image, one left-aligned after it. */
.re-about-vf-block {
  padding-top: clamp(48px, 5.5vw, 80px);
  padding-bottom: clamp(48px, 5.5vw, 80px);
}
.re-about-vf-block > * { margin-block: 0; }
.re-about-vf-block__inner {
  max-width: 680px;
}
.re-about-vf-block__inner > * { margin-block: 0; }
.re-about-vf-block--right .re-about-vf-block__inner { margin-left: auto; }
/* "Vi investerer i fremtiden" keeps its h2 slot styled as the Figma
   bold b1 lead (20/28, weight 600). */
.re-about-vf-block__inner h2 {
  font-family: var(--wp--preset--font-family--body, inherit);
  font-size: var(--wp--preset--font-size--b-1, 20px);
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--re-obsidian);
  margin: 0 0 8px;
}
.re-about-vf-block__inner p {
  font-size: var(--wp--preset--font-size--b-1, 20px);
  line-height: 1.4;
  color: var(--re-dark-64);
}
.re-about-vf-block__inner p + p { margin-top: 16px; }

/* ---------- Feature image (30049:1529) ----------
   Full-width, 680px tall at 1440. The stepped cut-out comes from the
   shared .re-notch--bl primitive (effects.css, agent B). */
.re-about-vf__feature {
  margin: 0;
}
.re-about-vf__feature img {
  width: 100%;
  height: clamp(380px, 47vw, 680px);
  object-fit: cover;
  display: block;
}

/* ---------- "Hvorfor vælge os?" USP cards (30059:27191) ----------
   Client round 2 (meeting 10/09, executed 2026-09-22): the earlier stats
   split ("Tilbud inden" | "24 timer", "5 stjerner" | "hos Anmeld
   Håndværker", Figma 30049:7451) read as a numbers dashboard and cut two
   selling points mid-sentence; the live site prints the four lines whole,
   as an Enfold icon list with empty content slots. Rebuilt as the Figma
   "Why Choose Us Item" card (30059:27192, the same anatomy as Service #1's
   Feature Column 30057:1602 and the About page's own Feature Items in
   30044:2501): Quarry Sand surface, 1px dark-16 border, 24px inset, 48px
   accent icon tile (12px pad + 24px glyph, 1px dark-8 border), b1/600
   title. The card's description slot (b2 dark-64, 12px under the title)
   stays empty because the live site has no such copy, so the card is the
   Figma 332px height minus that slot: 272px. Four across on the 1392 rail
   = the Figma 332px columns. Figma strokes sit inside the box, hence
   border-box here (renel.css has no global reset).
   Designer review (2026-09-22, second pass): "the titles in the blocks
   should be centered." Every Figma variant checked (30059:27192, Service
   #1's 30057:1583, About's 30044:2501) pins the tile top-LEFT and the text
   bottom-LEFT; there is no centred card, so this is the designer's call
   and the card deviates from Figma on purpose. A centred title under a
   top-left tile would sit lopsided, so the tile is centred with it: one
   axis, tile above title, 24px apart (the tile-to-title distance of the
   Mobile Home card 30069:21039). The stack is centred vertically as well
   rather than kept pinned to the top and bottom edges: with no description
   copy and no shared left edge, a tile at the top and a title at the
   bottom stop reading as one unit across the ~120px void. The 272px
   height stays so the four cards keep their Figma proportion and stay
   equal. */
.re-about-usp {
  padding-top: var(--wp--preset--spacing--section-m, 120px);
  padding-bottom: var(--wp--preset--spacing--section-m, 120px);
}
/* Heading and list ride the 1392 rail, like .re-icon-row and the priser
   cells, so the four cards start on the painted grid lines at any width
   (core flow-layout margins zeroed as everywhere else in this file). */
.re-about-usp > * {
  margin-block: 0;
  max-width: 1392px;
  margin-inline: auto;
}
.re-about-usp h2 {
  font-size: var(--wp--preset--font-size--h-4, 40px);
  line-height: 1;
  letter-spacing: -1.5px;
  margin: 0 auto 40px;
}
.re-about-usp__list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--re-gap, 16px);
}
.re-about-usp__item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 272px;
  margin: 0;
  padding: 24px;
  text-align: center;
  background-color: var(--re-sand);
  border: 1px solid var(--re-dark-16);
}
.re-about-usp__icon {
  box-sizing: border-box;
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background-color: var(--re-accent);
  border: 1px solid var(--re-dark-8);
}
/* The glyph on the accent tile stays Obsidian: 6.61:1 against the orange,
   where white would be 3.12:1 and fail AA. */
.re-about-usp__icon .re-icon {
  width: 24px;
  height: 24px;
  color: var(--re-obsidian);
}
.re-about-usp__title {
  display: block;
  max-width: 100%;
  font-size: var(--wp--preset--font-size--b-1, 20px);
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--re-obsidian);
  /* "5 stjerner hos Anmeld Håndværker" is the one title that wraps; balanced
     lines keep a centred two-liner symmetrical (progressive enhancement). */
  text-wrap: balance;
}

/* ---------- Closing statements (Content Block 30049:1523 / 30049:1526) ----------
   Designer review (2026-09-22, second pass): the two closing H2 blocks
   ("Fokus på kommunikation og rådgivning", "Konkurrencedygtige") rendered
   through renel.css's .re-about__cols as a two-column wall, four body
   paragraphs under two h-6 headings, "overwhelmed with a lot of text in
   one place". Figma's About page has no closing text section at all
   (30044:2075 runs Why-choose-us 30044:2501 straight into the Team Grid),
   so the blocks now follow the page's own content-block pattern: the 680px
   column of 30049:1523 (right-aligned into columns 3-4) and 30049:1526
   (left-aligned into columns 1-2), one block per band, so the eye crosses
   the page between them instead of scanning one dense area. Per band: the
   H2 is a real heading at the h-5 scale (the size the Firmaprofil lead
   already uses), the first paragraph is the lead (b1, obsidian, the Figma
   block's dark-100 text), the second the body (b1, dark-64, like every
   other body paragraph on this page). Copy verbatim, nothing merged.
   The band is a two-column grid rather than a margin-left:auto column so
   the empty half is a real slot: the image pass can add a figure with
   class re-about-statement__media as a sibling of __inner and it
   auto-places into the free half (columns 1-2 beside the right-aligned
   block, 3-4 beside the left one), the Service #1 text-and-image split
   30057:1765 mirrored. The halves are exactly the Figma columns:
   (1376 - 16) / 2 = 680 at 1440. renel.css's .re-about__cols/.re-about__col
   rules are now unused on this page (drop them in the concatenation pass). */
.re-about-statement {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--re-gap, 16px);
  align-items: center;
  padding-top: clamp(48px, 5.5vw, 80px);
  padding-bottom: clamp(48px, 5.5vw, 80px);
}
.re-about-statement > * { margin-block: 0; }
.re-about-statement__inner {
  grid-column: 1;
  justify-self: start;
  width: 100%;
  max-width: 680px;
}
.re-about-statement--right .re-about-statement__inner {
  grid-column: 2;
  justify-self: end;
}
.re-about-statement__inner > * { margin-block: 0; }
.re-about-statement__inner h2 {
  font-size: var(--wp--preset--font-size--h-5, 32px);
  line-height: 1;
  letter-spacing: -1px;
  color: var(--re-obsidian);
  margin: 0 0 24px;
}
.re-about-statement__inner p {
  font-size: var(--wp--preset--font-size--b-1, 20px);
  line-height: 1.4;
  color: var(--re-dark-64);
}
.re-about-statement__inner .re-about-statement__lead { color: var(--re-obsidian); }
.re-about-statement__inner p + p { margin-top: 16px; }
/* Photo slot for the image pass (see above). Nothing renders here today. */
.re-about-statement__media { margin: 0; }
.re-about-statement__media img {
  width: 100%;
  height: clamp(320px, 31.25vw, 450px);   /* 450 at 1440: the carousel's 680x450 */
  object-fit: cover;
  display: block;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .re-about-vf__intro,
  .re-about-vf-block__inner,
  .re-about-statement__inner { max-width: min(680px, 88%); }
  .re-about-usp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* One column: the right-aligned statement keeps its right edge (like the
     vf-block's margin-left:auto) and the photo slot stacks above or below. */
  .re-about-statement { grid-template-columns: 1fr; }
  .re-about-statement--right .re-about-statement__inner { grid-column: 1; }
}

@media (max-width: 720px) {
  .re-about-vf__intro,
  .re-about-vf-block__inner,
  .re-about-statement__inner { max-width: 100%; }
  .re-about-vf__lead,
  .re-about-statement__inner h2 { letter-spacing: -.5px; }
  .re-about-usp h2 { font-size: var(--wp--preset--font-size--h-5, 32px); letter-spacing: -1px; margin-bottom: 32px; }
  /* Phone anatomy from the template's Mobile Home "Value & Features" cards
     (30069:21039): 16px inset, 44px tile (10px pad + 24px glyph), title
     24px under the tile. One card per row with no fixed height, so the
     four lines stack as a compact list; the centred axis carries over so
     the card reads the same at every width. */
  .re-about-usp__list { grid-template-columns: 1fr; }
  .re-about-usp__item {
    min-height: 0;
    padding: 16px;
  }
  .re-about-usp__icon { width: 44px; height: 44px; }
}

/* Statement-band photo: 2025/12/0U2A4998.jpg since 2026-09-29 (client: the
   table-tennis shot was a random pick). Its 1.5:1 frame matches the 680x450
   slot almost exactly, so a centred crop loses nothing. */
.re-about-statement__media img { object-position: 50% 50%; }

/* ---------------------------------------------------------------- merged: partials/blog.css */
/* ==========================================================================
   Blog — Case Studies treatment (user review pass 2026-08-30)

   Source nodes (file 6CaPyabcwcovUcKIsav3OO, canvas 35:1666 "🖥️ Designs"):
     30064:29737  Case Studies (listing) — quarry-sand page, full-width
                  600px Foundation row cards: image 656/1376 left with a
                  blurred tag chip, right column label/h5/b2 + "Show project"
                  text button with a 32px accent arrow tile. Card padding
                  24px (32 right), image↔text gap 48, cards 32 apart.
     30064:29262  Case Study (detail) — 680px measure DEAD-CENTRED
                  (x=380 @1440), figures break out symmetrically to 1144
                  (±232), 1px dark-16 border on images, label-2 centred
                  caption slot below.

   /blog/ uses these row cards (.re-cs-card, templates/index.html); term
   archives (archive.html) keep the old .re-card grid. The article rules
   here replace agent B's dormant nth-of-type variety (removed from
   effects.css 2026-08-30 — superseded by the user's case-study direction).

   Loads after renel.css — renel's own .re-archive/.re-article media-query
   rules are beaten by any later-file base rule, so variants are re-declared
   here where needed.
   ========================================================================== */

/* ---------- /blog/ index: page goes quarry sand, cards stay Foundation --- */
.re-archive { background-color: var(--re-sand); }
.re-archive__list { background-color: transparent; }

/* One row per article (the whole point of the Case Studies layout). */
.re-archive__grid {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 32px;                 /* Figma card gap */
}
/* Neutralise renel.css's featured-first-card special casing — every row is
   equal here. (Term archives re-neutralise it themselves via .re-term.) */
.re-archive__grid > li:first-child {
  grid-column: auto;
  padding-bottom: 0;
  border-bottom: 0;
}

/* ---------- The row card (Figma 30064:29972) ---------- */
.re-cs-card {
  display: grid;
  /* image 656 : text 624 at the 1376 reference, 48px gap */
  grid-template-columns: minmax(0, 656fr) minmax(0, 624fr);
  column-gap: clamp(24px, 3.5vw, 48px);
  background-color: var(--re-foundation);
  padding: 24px 32px 24px 24px;
  min-height: min(600px, 44vw);
  height: 100%;
}
.re-cs-card > * { margin-block: 0; min-width: 0; }

/* Image column: the featured image fills the card height; the date rides it
   as the Figma tag chip (blur pill, top-left, 16px inset). */
.re-cs-card__media { position: relative; background-color: var(--re-sand); overflow: hidden; }
.re-cs-card__media .re-cs-card__img { position: absolute; inset: 0; margin: 0; }
.re-cs-card__media .re-cs-card__img a { display: block; height: 100%; }
.re-cs-card__media .re-cs-card__img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s ease;
}
.re-cs-card:hover .re-cs-card__img img { transform: scale(1.03); }
/* Figma Tag: backdrop-blur 32, dark-32% fill, 8×12 padding, label-2 white.
   The date is the one piece of real per-post data that can wear it — every
   post shares the single "blog" category, so a category chip would print
   the same word on every card. */
.re-cs-card .re-cs-card__chip {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  padding: 8px 12px;
  background-color: rgba(3, 3, 4, .32);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  color: var(--re-foundation);
  font-size: 10px; line-height: 1.2; letter-spacing: 1px; text-transform: uppercase;
}

/* Text column: title / excerpt top, read-link pinned to the card foot. */
.re-cs-card__body { display: flex; flex-direction: column; gap: 16px; padding-block: 64px 16px; }   /* client 2026-09-29: the title sat too close to the card top; 64 after the second round */
/* Core hands the chip (second child of the media group) a 24px flow margin,
   which pushed it 40px in instead of the designed 16 (corrected 2026-09-29). */
.re-cs-card .re-cs-card__media > .re-cs-card__chip { margin: 0; }
.re-cs-card__body > * { margin-block: 0; }
.re-cs-card__title {
  font-size: 40px;                       /* was h-5 32 (client 2026-09-29: a step larger) */
  line-height: 1.05; letter-spacing: -1.2px;
}
.re-cs-card__title a { text-decoration: none; color: inherit; }
.re-cs-card__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Equal auto margins float the excerpt midway between title and read-link
   (user tweak 2026-08-30) — and push the link to the card foot, so the
   link needs no auto margin of its own (a second auto would steal a third
   of the free space and pull the excerpt back up toward the title). */
.re-cs-card__excerpt {
  color: var(--re-dark-88, rgba(3, 3, 4, .88));
  max-width: 56ch;
  margin-block: auto;
}
.re-cs-card__excerpt p { margin: 0; }

/* "Læs artiklen" = Figma Button/Text: 16/600 label + a 32px accent tile
   holding the 16px arrow (the genuine template arrow export from
   inc/icons.php — stroked 1.5, square caps, obsidian on accent). */
.re-cs-card .re-cs-card__more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 600;
  color: var(--re-obsidian);
  text-decoration: none;
}
.re-cs-card .re-cs-card__more::after {
  content: "";
  width: 32px; height: 32px; flex: 0 0 auto;
  border: 1px solid var(--re-dark-8);
  background-color: var(--re-accent);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2011.144%2011.4547'%20fill='none'%3E%3Cpath%20d='M0.75%205.72733H9.41667M5.41667%201.06066L10.0833%205.72733L5.41667%2010.394'%20stroke='%23030304'%20stroke-width='1.5'%20stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}
.re-cs-card .re-cs-card__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Stacked card below 900px: image on top at a fixed ratio, text under. */
@media (max-width: 900px) {
  .re-cs-card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    min-height: 0;
    padding: 16px 16px 24px;
  }
  .re-cs-card__media { aspect-ratio: 656 / 460; }
  .re-cs-card__body { padding-block: 8px 0; }
  .re-cs-card__title { font-size: var(--wp--preset--font-size--h-5, 32px); letter-spacing: -1px; }
}

/* ---------- Articles AND ydelser pages: the Case Study measure ----------
   The 680px measure itself is centred in renel.css (base rule, 2026-08-30).
   Posts centre their head too; pages don't need it — their head lives in
   the split hero. */
.re-article--post .re-article__head { margin-inline: auto; }

/* Figures: Figma breaks images out to 1144 (±232 on the 680 measure) with a
   1px dark-16 border. renel.css's base -116px (912) stays as the mid-size
   fallback between 1025–1279px, where ±232 would overflow the viewport;
   renel already returns figures to in-measure width at ≤1024. Applies to
   posts and pages alike (user extended the rule to ydelser pages
   2026-08-30); .re-bb building-block rows are groups, not figures, and are
   untouched. */
@media (min-width: 1280px) {
  .re-article .re-article__body > figure.wp-block-image,
  .re-article .re-article__body > .wp-block-image { margin-inline: -232px; }
}
/* Direct children only: images inside .re-bb-row building-block groups on
   the area pages must NOT pick up the border. */
.re-article .re-article__body > figure.wp-block-image img {
  border: 1px solid var(--re-dark-16);
}
/* Caption slot: label-2, centred (Figma 30064:29588). Size/casing/colour
   come from renel.css's figcaption rule. */
.re-article .re-article__body > figure.wp-block-image figcaption { text-align: center; }

/* ---------------------------------------------------------------- merged: partials/effects.css */
/* ==========================================================================
   Effects primitives (Agent B) — shared component API
   Consumed by A (about), C (area pages), D (service hero). Class names are
   a contract — do not rename. See DESIGN_PASS_SPEC.md "Shared component API".
   ========================================================================== */

/* --------------------------------------------------------------------------
   .re-notch — stepped background-colour blocks over one corner of an image.

   Geometry from Figma 30057:1788 "Feature Image" (796×680, Value & Features)
   and 30049:1529 (About feature image, 1376×680). Both draw the same overlay:
   a row of four equal quarters (25% of image width each) anchored to the
   image's bottom edge; the leftmost quarter is transparent, the next three
   are painted at 80 / 160 / 240px on the 680px-tall reference — i.e.
   11.765% / 23.529% / 35.294% of image height — so the staircase climbs
   toward the bottom-right corner. Expressed here as percentages of the
   wrapped box so the steps scale with any crop (spec requirement).

   Painted as three overlapping bottom-right-anchored layers (75%, 50%, 25%
   wide) instead of three abutting quarters — identical render, but immune
   to sub-pixel seams between steps. Colour defaults to Foundation
   (30049:1529); .re-notch--sand switches to Quarry Sand (30057:1788 sits
   on a sand section). background longhands only (house rule #6).
   -------------------------------------------------------------------------- */
.re-notch {
  position: relative;
  overflow: hidden;
  --re-notch-color: var(--re-foundation);
}
.re-notch img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.re-notch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--re-notch-color), var(--re-notch-color)),
    linear-gradient(var(--re-notch-color), var(--re-notch-color)),
    linear-gradient(var(--re-notch-color), var(--re-notch-color));
  background-repeat: no-repeat;
  /* bottom strip (quarters 2-4) / middle step (quarters 3-4) / tall step (quarter 4) */
  background-size: 75% 11.765%, 50% 23.529%, 25% 35.294%;
  background-position: 100% 100%, 100% 100%, 100% 100%;
}
/* .re-notch--bl is the default geometry above (stepped blocks along the
   bottom, rising into the corner) — the class is accepted as-is. */
.re-notch--tr::before {
  /* Single block, top-right: one quarter-width column at the middle step
     unit's height (160/680). The three layers coincide into one block. */
  background-size: 25% 23.529%;
  background-position: 100% 0;
}
.re-notch--sand {
  --re-notch-color: var(--re-sand);
}

/* --------------------------------------------------------------------------
   .re-bb / .re-bb-row — grid-snapped "building block" images.

   Source: Figma 30032:36127 "Image Row": a 216×216 square on column 1 and a
   332×450 portrait on column 4. 332 is exactly one column's content width
   (348px grid column minus the 16px gap), so --tall and --c2 are expressed
   as column spans + aspect ratios and stay snapped at any viewport;
   --sq keeps the Figma 216px cap. Hero 4 (30044:2556) scatters the same
   square blocks on other column lines (--mid / --right placements).
   -------------------------------------------------------------------------- */
.re-bb-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--re-gap);
  align-items: start;
}
/* The rendered group carries is-layout-flow, whose child margins would stack
   on top of the grid gap and stagger the row (integration finding, agent C). */
.re-bb-row > * { margin-block: 0; }
.re-bb {
  position: relative;   /* the image is pinned to this box, see below */
  margin: 0;
  background-color: var(--re-sand);
  aspect-ratio: 3 / 2;  /* default shape; the modifiers below override it */
}
/* Pinned to the box rather than height: 100%. On WordPress 6.8 the percentage
   height did not resolve against the aspect-ratio box, so the photo kept its
   own shape and the sand showed beneath it (client, 2026-10-06, new host). The
   extra class beats core's .wp-block-image img { height: auto } whatever the
   stylesheet order. */
.re-bb img,
.wp-block-image.re-bb img {
  position: absolute; inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.re-bb--sq {
  width: min(216px, 100%);
  aspect-ratio: 1;
}
.re-bb--tall {
  aspect-ratio: 332 / 450; /* one column wide, 450px tall at full grid width */
}
.re-bb--c2 {
  grid-column: auto / span 2;
  aspect-ratio: 680 / 450; /* two columns (332 + 16 + 332) at the tall height */
}
.re-bb--mid {
  grid-column-start: 2;
}
.re-bb--right {
  grid-column-end: -1;
}
.re-bb--c2.re-bb--right {
  grid-column: -3 / -1;
}

/* Spec: at 720px and below a .re-bb-row stacks to a 2-column arrangement. */
@media (max-width: 720px) {
  .re-bb-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .re-bb-row .re-bb--c2,
  .re-bb-row .re-bb--c2.re-bb--right {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   Homepage hero entrance (user request 2026-08-30): the three stepped hero
   blocks rise from below one after another — shortest first, tallest last —
   so the masthead reads as being BUILT, echoing tandem.bi's staggered title
   loads. The blocks are bottom-aligned in their grid, so a positive
   translateY starts each below its resting line; fill-mode "both" keeps a
   block invisible until its turn. Pure CSS on page load, homepage only
   (.re-hero exists nowhere else); reduced-motion users get the static hero.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .re-hero__images > .wp-block-image {
    animation: re-hero-rise .65s cubic-bezier(.22, .61, .36, 1) both;
  }
  .re-hero__images > .wp-block-image:nth-child(1) { animation-delay: .15s; }
  .re-hero__images > .wp-block-image:nth-child(2) { animation-delay: .35s; }
  .re-hero__images > .wp-block-image:nth-child(3) { animation-delay: .55s; }

  /* Text joins the build (user, same day): title leads, subtext + buttons
     follow together right behind it, while the blocks step in alongside.
     Shorter rise than the blocks — 28px reads better on type. The badge
     rides with the title so no element sits frozen inside a moving cluster. */
  .re-hero__content > h1,
  .re-hero__content > p,
  .re-hero__content > .wp-block-buttons {
    --re-rise: 28px;
    animation: re-hero-rise .6s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: .25s;
  }
  .re-hero__content > .re-hero__badge,
  .re-hero__content > h1 { animation-delay: .05s; }
}
@keyframes re-hero-rise {
  from { opacity: 0; transform: translateY(var(--re-rise, 48px)); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Partners grid motion (user pick 2026-08-30, driven by renel.js):
   build-in wave on first scroll (reuses the hero's re-hero-rise keyframes),
   then the "lights" — a cell fading to charcoal hides its logo; hovering a
   dark cell relights it instantly. The armed/hidden state exists only when
   JS added the class AND motion is allowed, so no-JS and reduced-motion
   visitors always see the plain static grid.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .re-partners__grid.re-build-armed > li { opacity: 0; }
  .re-partners__grid.re-build-in > li {
    --re-rise: 32px;
    animation: re-hero-rise .55s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: calc(var(--re-i, 0) * 90ms);
  }
}
.re-partners__grid > li { transition: background-color .75s ease; }
.re-partners__grid > li img { transition: opacity .75s ease; }
.re-partners__grid > li.re-off { background-color: var(--re-charcoal); }
.re-partners__grid > li.re-off img { opacity: 0; }
.re-partners__grid > li.re-off:hover { background-color: var(--re-foundation); }
.re-partners__grid > li.re-off:hover img { opacity: 1; }
/* The Ren-El cell opens the sequence dark; hovering it relights the logo
   but the cell itself stays charcoal — that IS its lit state. */
.re-partners__grid > li.re-partners__self.re-off:hover { background-color: var(--re-charcoal); }

/* --------------------------------------------------------------------------
   Self-drawing icons (user request 2026-08-30, tandem.bi-style).
   The set's icons are outline-STYLE but their linework is expressed as
   FILLS, so the classic stroke-dashoffset draw is staged in two acts: a
   temporary stroke traces the path contour (dash units normalised to 100
   via pathLength, added in inc/icons.php), then the real fill crossfades in
   as the stroke exits — ending pixel-identical to the static icon.
   Armed/hidden state exists only when renel.js adds it (visibility-
   triggered), so no-JS and reduced-motion visitors see static icons.
   Applies to the hero icon row and the Kontakt routes. */
@media (prefers-reduced-motion: no-preference) {
  /* The dashes live on the WIDE white stroke inside each icon's <mask>
     (built in inc/icons.php) — dashing it shut hides the icon; drawing it
     open reveals the REAL icon progressively along its own path. Nothing
     but the actual icon is ever visible (user round two: no stroke-then-
     icon staging, no doubled contours). */
  .re-draw-armed .re-icon svg .re-drawm {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
  }
  .re-draw-in .re-icon svg .re-drawm {
    animation: re-icon-draw 1s ease-in-out forwards;
    animation-delay: calc(var(--re-i, 0) * 160ms);
  }
}
@keyframes re-icon-draw {
  to { stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   Article figure treatment moved to partials/blog.css (2026-08-30).
   Agent B's nth-of-type variety rules lived here but never rendered — every
   post had zero body figures when they landed. The user then chose the
   Case Study page's uniform centred 1144px breakout (Figma 30064:29262)
   for articles, so the variety block was removed rather than left to fight
   it the moment figures appeared. Building blocks on pages (.re-bb) are
   untouched.
   -------------------------------------------------------------------------- */

/* ---------------------------------------------------------------- merged: partials/faq-popup.css */
/* ==========================================================================
   FAQ pop-up — illustrated "Rigtigt / Forkert" answers on service pages
   (first use: /nyt-koekken/). The markup is appended to the page content
   as a wp:html block — page content cannot run PHP, so every SVG in it is
   inline. This partial + one enhancement block at the end of renel.js are
   the whole component.

   Sources (Figma 6CaPyabcwcovUcKIsav3OO, canvas 35:1666 "Designs"):
     30059:26063  Book Modal — the modal chrome. Overlay 30059:26260 =
                  Neutral/Dark 32% with an 8px backdrop blur; panel = a
                  centred 912-wide block (348 image column + 564 "Form
                  Container": Foundation White, 48px padding); header row
                  30059:26275 = H5 title (32/32/-1) + "Button / Circle"
                  close 30059:26277 (Neutral/Light 100% fill, 1px dark-16
                  border, 8px padding around the 16px Interface close glyph
                  — the glyph below is that export, verbatim); field labels
                  = Label-1 12/16/1px uppercase 500; body = B2 16/24/.25;
                  Button/Base = 12×16 padding, 16/24 600, 1px dark-16 border.
     Question rows = the site's FAQ accordion rows (.re-faq in renel.css):
     Quarry Sand, 24px padding, 20/600 text, 32px square marker with a
     1.5px dark-48 border. The marker holds the genuine template arrow
     (same export as inc/icons.php arrow-right) instead of +/–, and turns
     accent on hover/focus: "this opens something".

   Structure references (online, structure only):
     · NHS design system, "Do and Don't lists": the heading words carry the
       meaning, tick/cross icons are aria-hidden, Do comes before Don't,
       and the two lists STACK on phones.
     · Atlassian design system usage pages: every Do/Don't example =
       figure + label + a one-sentence caption.
     · hidde.blog, dialog vs popover: a popover that wants a backdrop is
       really a modal — so renel.js makes it one (inert + aria-modal +
       scroll lock) whenever JS runs.

   Mechanics: native Popover API. `[popover]` puts the panel in the top
   layer with ::backdrop, Esc, light dismiss (click on the backdrop) and
   focus return to the question button — none of it needs JS. Browsers
   without popover support render each panel inline under its question
   (fully readable; renel.js turns those into an accordion). ≤720px the
   panel becomes a bottom sheet. Motion only under
   prefers-reduced-motion: no-preference.

   Palette stays accent + neutrals (no green/red): "Rigtigt" = accent tile
   with an obsidian check, "Forkert" = charcoal tile with a Foundation
   cross. Accent is a surface here, never text (renel.css rule).
   ========================================================================== */

/* ---------- Section: closes the 680px article measure ---------- */
.re-article__body > .re-faqp {
  margin-block: 64px 0;
  padding-top: 48px;
  border-top: 1px solid var(--re-dark-8);
}
/* .re-article__body p forces 20px on every paragraph — restore the eyebrow's
   Label-2 (10/12/1px) inside this section. */
.re-faqp .re-eyebrow {
  margin: 0 0 16px;
  font-size: 10px; line-height: 12px; letter-spacing: 1px;
  text-transform: uppercase; font-weight: 500;
}
.re-faqp .re-faqp__title {
  font-size: var(--wp--preset--font-size--h-5, 32px);
  line-height: 1; letter-spacing: -1px;
  margin: 0 0 32px;
}
.re-faqp .re-faqp__list { list-style: none; margin: 0; padding: 0; }
.re-faqp .re-faqp__item { margin: 0 0 16px; padding: 0; font-size: inherit; line-height: inherit; }
.re-faqp .re-faqp__item:last-child { margin-bottom: 0; }

/* The question row: the .re-faq summary as a real button — the whole row
   is the hit area. */
.re-faqp .re-faqp__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; margin: 0; padding: 24px;
  background-color: var(--re-sand);
  border: 0; border-radius: 0;
  color: var(--re-obsidian);
  font: inherit; font-size: 20px; font-weight: 600; line-height: 1.4;
  text-align: left; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.re-faqp .re-faqp__q-text { flex: 1 1 auto; min-width: 0; }
.re-faqp .re-faqp__q-mark {
  flex: none; width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1.5px solid var(--re-dark-48);
  color: var(--re-obsidian);
  transition: background-color .2s ease, border-color .2s ease;
}
.re-faqp .re-faqp__q-mark svg { width: 16px; height: 16px; display: block; }
.re-faqp .re-faqp__q:hover .re-faqp__q-mark,
.re-faqp .re-faqp__q:focus-visible .re-faqp__q-mark {
  background-color: var(--re-accent);
  border-color: var(--re-dark-16);
}

/* ---------- The answer panel ----------
   These base rules ARE the no-popover fallback: a plain answer block inline
   under its question. Everything top-layer lives in the @supports block
   further down, so a browser without the Popover API never sees a
   fixed-position panel. */
.re-faqp .re-faqp__panel {
  box-sizing: border-box;
  margin: 16px 0 0;
  padding: 24px;
  border: 1px solid var(--re-dark-16);
  background-color: var(--re-foundation);
  color: var(--re-obsidian);
}
/* renel.js accordion state — only ever set in browsers without popovers. */
.re-faqp .re-faqp__panel.is-collapsed { display: none; }
/* The container itself takes focus when it opens (so the dialog is
   announced); its controls keep their own rings. */
.re-faqp .re-faqp__panel:focus { outline: none; }

.re-faqp .re-faqp__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  margin: 0 0 32px;
}
.re-faqp .re-faqp__panel-title {
  font-size: var(--wp--preset--font-size--h-5, 32px);
  line-height: 1; letter-spacing: -1px;
  margin: 0;
}
/* Figma "Button / Circle": 8px padding around a 16px glyph + 1px border = 34px. */
.re-faqp .re-faqp__x {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; margin: 0; padding: 0;
  background-color: #fff;                    /* Neutral/Light 100% */
  border: 1px solid var(--re-dark-16); border-radius: 0;
  color: var(--re-obsidian);
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background-color .2s ease;
}
.re-faqp .re-faqp__x svg { width: 16px; height: 16px; display: block; }
.re-faqp .re-faqp__x:hover { background-color: var(--re-sand); }

/* Rigtigt | Forkert — two equal columns on the column gap. */
.re-faqp .re-faqp__compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--re-gap, 16px);
}
.re-faqp .re-faqp__side {
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--re-dark-8);
}
/* Label-1 heading: the word carries the meaning, the tile is decoration. */
.re-faqp .re-faqp__side-label {
  display: flex; align-items: center; gap: 12px;
  margin: 0;
  font-size: 12px; line-height: 16px; letter-spacing: 1px;
  text-transform: uppercase; font-weight: 500;
  color: var(--re-obsidian);
}
.re-faqp .re-faqp__mark {
  flex: none; width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--re-dark-16);
}
.re-faqp .re-faqp__mark svg { width: 16px; height: 16px; display: block; }
.re-faqp .re-faqp__mark--right { background-color: var(--re-accent);   color: var(--re-obsidian); }   /* 6.61:1 */
.re-faqp .re-faqp__mark--wrong { background-color: var(--re-charcoal); color: var(--re-foundation); } /* 8.62:1 */

/* Illustration slot — fixed 4:3, so the panel never reflows when art lands.
   Real artwork: an img (or inline svg) inside, and drop the --todo class. */
.re-faqp .re-faqp__illu {
  box-sizing: border-box;   /* ratio on the OUTER box — padding/border must not stretch it */
  aspect-ratio: 4 / 3;
  background-color: var(--re-sand);
  overflow: hidden;
}
.re-faqp .re-faqp__illu img,
.re-faqp .re-faqp__illu svg { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Placeholder state until the designer delivers. */
.re-faqp .re-faqp__illu--todo {
  display: grid; place-items: center;
  padding: 16px;
  border: 1px dashed var(--re-dark-32);
  font-size: 12px; line-height: 16px; letter-spacing: 1px;
  text-transform: uppercase; font-weight: 500; text-align: center;
  color: var(--re-dark-64);                  /* 6.41:1 on Quarry Sand */
}
.re-faqp .re-faqp__text {
  margin: 0;
  font-size: var(--wp--preset--font-size--b-2, 16px); line-height: 24px; letter-spacing: .25px;
  color: var(--re-dark-88);
}

/* Close action (Figma Button/Base, secondary on light). */
.re-faqp .re-faqp__foot { display: flex; justify-content: flex-end; margin: 32px 0 0; }
.re-faqp .re-faqp__close {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0; padding: 12px 16px;
  background-color: #fff;
  border: 1px solid var(--re-dark-16); border-radius: 0;
  color: var(--re-obsidian);
  font: inherit; font-size: 16px; line-height: 24px; font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background-color .2s ease;
}
.re-faqp .re-faqp__close:hover { background-color: var(--re-sand); }

/* ---------- Top layer: browsers with the Popover API ---------- */
@supports selector(:popover-open) {
  /* UA popover styles supply position:fixed; inset:0; margin:auto and
     fit-content sizing — only the chrome is re-declared. */
  .re-faqp .re-faqp__panel {
    margin: auto;
    width: min(912px, calc(100% - 2 * var(--re-page-pad)));
    max-height: calc(100vh - 2 * var(--re-page-pad));
    max-height: calc(100dvh - 2 * var(--re-page-pad));
    padding: 48px;
    border: 1px solid var(--re-dark-16);
    overflow: auto;
    overscroll-behavior: contain;
  }
  .re-faqp .re-faqp__panel::backdrop {
    /* Literal values on purpose: ::backdrop only inherits custom
       properties in recent engines. Dark 32% + 8px blur = Figma 30059:26260. */
    background-color: rgba(3, 3, 4, .32);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  /* Page behind stays put while a panel is open (class + scrollbar width
     set by renel.js). The body is padded by the scrollbar the lock removes,
     so nothing jumps sideways. */
  html.re-faqp-lock { overflow: hidden; }
  html.re-faqp-lock body { padding-right: var(--re-faqp-sbw, 0px); }

  @media (prefers-reduced-motion: no-preference) {
    /* Rise-and-fade in, fade out. `display`/`overlay` with allow-discrete
       keep the panel in the top layer for the exit; engines without them
       simply cut — the first declaration keeps the entrance for the ones
       that have @starting-style but not transition-behavior. */
    .re-faqp .re-faqp__panel {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .25s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
      transition: opacity .25s ease, transform .3s cubic-bezier(.22, .61, .36, 1),
                  overlay .3s allow-discrete, display .3s allow-discrete;
    }
    .re-faqp .re-faqp__panel:popover-open { opacity: 1; transform: none; }
    @starting-style {
      .re-faqp .re-faqp__panel:popover-open { opacity: 0; transform: translateY(16px); }
    }
    .re-faqp .re-faqp__panel::backdrop {
      background-color: rgba(3, 3, 4, 0);
      -webkit-backdrop-filter: blur(0);
      backdrop-filter: blur(0);
      transition: background-color .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
      transition: background-color .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease,
                  overlay .3s allow-discrete, display .3s allow-discrete;
    }
    .re-faqp .re-faqp__panel:popover-open::backdrop {
      background-color: rgba(3, 3, 4, .32);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
    @starting-style {
      .re-faqp .re-faqp__panel:popover-open::backdrop {
        background-color: rgba(3, 3, 4, 0);
        -webkit-backdrop-filter: blur(0);
        backdrop-filter: blur(0);
      }
    }
  }

  /* Phones: bottom sheet, full width, slides up. */
  @media (max-width: 720px) {
    .re-faqp .re-faqp__panel {
      inset: auto 0 0 0;
      width: 100%;
      max-width: none;
      max-height: 92vh;
      max-height: 92dvh;
      margin: 0;
      padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
      border: 0;
      border-top: 1px solid var(--re-dark-16);
    }
    @media (prefers-reduced-motion: no-preference) {
      .re-faqp .re-faqp__panel { transform: translateY(100%); transition-duration: .3s, .35s, .35s, .35s; }
      @starting-style {
        .re-faqp .re-faqp__panel:popover-open { transform: translateY(100%); }
      }
    }
  }
}

/* ---------- Inner layout on phones (popover or inline alike) ---------- */
@media (max-width: 720px) {
  .re-faqp .re-faqp__q { padding: 20px 16px; }
  .re-faqp .re-faqp__panel-title {
    font-size: var(--wp--preset--font-size--h-6, 24px);
    line-height: 1.17; letter-spacing: -.5px;
  }
  .re-faqp .re-faqp__head { margin-bottom: 24px; }
  .re-faqp .re-faqp__compare { grid-template-columns: minmax(0, 1fr); }
  .re-faqp .re-faqp__foot { margin-top: 24px; }
  .re-faqp .re-faqp__close { width: 100%; }
}

/* ---------- Real artwork in the illustration slot (2026-09-24) ----------
   The client's kitchen drawings (uploads/2026/09/kabelfoering-version-a-*.webp)
   carry their own title, legend and logo, so the slot stops forcing 4:3 and
   lets the image set its height; each drawing links to the full-size file. */
.re-faqp .re-faqp__illu--figure { aspect-ratio: auto; background-color: transparent; }
.re-faqp .re-faqp__illu--figure a { display: block; }
.re-faqp .re-faqp__illu--figure img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--re-dark-8);
}
.re-faqp .re-faqp__zoom {
  margin: 0;
  font-size: 12px; line-height: 16px; letter-spacing: .25px;
}
.re-faqp .re-faqp__zoom a { color: var(--re-dark-64); text-decoration: underline; text-underline-offset: 3px; }
.re-faqp .re-faqp__zoom a:hover { color: var(--re-obsidian); }
/* Stacked comparison: image-heavy answers keep the panel's full width per
   side (a 2000px drawing with a legend is unreadable in a 400px column). */
.re-faqp .re-faqp__compare--stack { grid-template-columns: minmax(0, 1fr); }
/* Plain answer (no Rigtigt / Forkert pair). */
.re-faqp .re-faqp__answer { display: flex; flex-direction: column; gap: 16px; }
/* Placeholder answer until the client's wording arrives (same language as
   the empty illustration slot). */
.re-faqp .re-faqp__text--todo {
  padding: 16px;
  border: 1px dashed var(--re-dark-32);
  color: var(--re-dark-64);
}

/* ---------- Document panel: the price terms on /priser/ (2026-09-24) ----------
   Same chrome, a longer body: the client's "Hvad koster det?" text with
   its three price tables. Type follows the Figma Legal page ramp already
   used by legal.css (b2 body, label-1 table headers) with h4 section
   titles at the h6 scale. Tables: hairline rows, price column right-aligned
   in tabular figures. Markup: the priser page content (wp:html). */
.re-faqp .re-faqp__doc { display: flow-root; }
.re-faqp .re-faqp__doc > * { margin: 0; }
.re-faqp .re-faqp__doc > * + * { margin-top: 16px; }
.re-faqp .re-faqp__doc p {
  font-size: var(--wp--preset--font-size--b-2, 16px); line-height: 24px; letter-spacing: .25px;
  color: var(--re-dark-88);
}
.re-faqp .re-faqp__doc h4 {
  margin-top: 40px;
  font-family: var(--wp--preset--font-family--heading, inherit);
  font-size: var(--wp--preset--font-size--h-6, 24px);
  line-height: 1.17; letter-spacing: -.5px; font-weight: 500;
  color: var(--re-obsidian);
}
.re-faqp .re-faqp__doc h4 + * { margin-top: 16px; }
.re-faqp .re-faqp__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--b-2, 16px); line-height: 24px; letter-spacing: .25px;
}
.re-faqp .re-faqp__table th {
  padding: 0 0 8px;
  text-align: left;
  font-size: 12px; line-height: 16px; letter-spacing: 1px;
  text-transform: uppercase; font-weight: 500;
  color: var(--re-dark-64);
  border-bottom: 1px solid var(--re-dark-16);
}
.re-faqp .re-faqp__table td {
  padding: 12px 0;
  vertical-align: top;
  color: var(--re-dark-88);
  border-bottom: 1px solid var(--re-dark-8);
}
.re-faqp .re-faqp__table th:last-child,
.re-faqp .re-faqp__table td:last-child {
  text-align: right; white-space: nowrap;
  padding-left: 24px;
  font-variant-numeric: tabular-nums;
}
.re-faqp .re-faqp__table td:last-child { font-weight: 600; color: var(--re-obsidian); }
.re-faqp .re-faqp__doc ul { padding-left: 24px; list-style: disc; }
.re-faqp .re-faqp__doc li {
  font-size: var(--wp--preset--font-size--b-2, 16px); line-height: 24px; letter-spacing: .25px;
  color: var(--re-dark-88);
}
.re-faqp .re-faqp__doc li + li { margin-top: 8px; }
.re-faqp .re-faqp__doc .re-faqp__note { color: var(--re-dark-64); }
@media (max-width: 720px) {
  .re-faqp .re-faqp__doc h4 { margin-top: 32px; }
}

/* ---------------------------------------------------------------- merged: partials/footer.css */
/* ==========================================================================
   Footer — three framed rows (user review pass 2026-08-30)

   The 2026-08-18 version leaned on the site-wide painted column grid
   (repeating-linear-gradient on .re-footer-main) for its vertical rules, but
   the content columns (448px/1fr/2fr/1.15fr) never matched where those rules
   are painted at fixed 25% steps — so each column met its nearest line at a
   different distance. This version turns the overlay OFF inside the footer and
   draws real cells instead: 1px grid gaps over a light-16 backdrop paint the
   rules, and every cell carries the same inline padding, so content always
   sits the same distance from a line.

   Row 1  .re-footer-cols   four equal columns: brand · Ydelser · award · Om os
   Row 2  .re-footer-areas  the 20 area links, centred, rules at the ends only
   Row 3  .re-footer-legal  thirds: © · social icons · legal links

   Loads after renel.css; only deltas live here, but renel.css's own footer
   media queries (≤1440 two-col, ≤1080 one-col) are beaten by ANY later-file
   base rule, so this file must re-declare its full responsive ladder.
   ========================================================================== */

/* ---------- CTA band: a work photo melts into the charcoal ----------
   Figma 30030:35395–35398: photo, a left charcoal fade over ~half the width
   (712/1440) so the display heading sits on dark, and a bottom fade to solid
   charcoal so the band is seamless against .re-footer-main below.
   Photo (image pass 2026-09-22): 2025/12/0U2A5646.jpg — the team at lunch,
   three large new-brand back prints; the visible top-right quadrant holds the
   window, a plant and a poster. Replaced 2024/09/0U2A0274.jpg, whose old-brand
   shirts and van lettering stayed readable inside the fade. ⚠️ The poster is a
   "tandem" print (co-tenant branding) — client/designer to confirm or swap.
   Root-relative URL so it resolves locally and on ren-el.dk. */
.re-footer-cta {
  background-image:
    linear-gradient(to bottom, rgba(73, 73, 74, 0) 42%, var(--re-charcoal) 97%),
    linear-gradient(to right, rgba(73, 73, 74, .92) 0%, rgba(73, 73, 74, .5) 30%, rgba(73, 73, 74, 0) 58%),
    url("/wp-content/uploads/2025/12/0U2A5646.jpg");
}

/* Content column: 449px (Figma Footer Content), flush left on the 1392 grid.
   The margin formula insets it to the grid's edge on ultra-wide viewports and
   collapses to 0 (= page padding) below 1392 + 2×pad. */
.re-footer-cta__inner {
  max-width: 449px;
  margin-block: 0;
  margin-inline: max(0px, calc((100% - 1392px) / 2)) auto;
}
.re-footer-cta__inner h2 { margin: 0 0 24px; }  /* Figma spacing/24 */
.re-footer-cta .wp-block-buttons { gap: 8px; }  /* Figma spacing/8  */

/* Figma's CTA secondary (30030:35404) is a solid light button on the photo,
   not the glass treatment .re-btn-secondary-dark carries elsewhere. */
.re-footer-cta .re-btn-secondary-dark .wp-block-button__link {
  background-color: var(--re-foundation);
  border-color: var(--re-dark-16);
  color: var(--re-obsidian);
  backdrop-filter: none;
}

/* ---------- The frame ----------
   No painted grid inside the footer — the rows below draw their own rules. */
.re-footer-main { background-image: none; }

/* Every row rides the same 1392 rail, stacked flush so the end rules of one
   row continue into the next. Cell inline padding is the one knob that keeps
   "equal distance from the lines" true everywhere — change it in one place. */
.re-footer-cols,
.re-footer-areas,
.re-footer-legal {
  max-width: 1392px;
  margin-inline: auto;
  --re-fcell-pad-x: 32px;
}

/* ---------- Row 1: four equal columns ----------
   The 1px gaps expose the container's light-16 backdrop = the rules between
   cells; end rules come from border-inline. No horizontal lines on this row
   (user review 2026-08-30) — spacing alone divides it from the areas row. */
.re-footer-cols {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--re-light-16);
  border-inline: 1px solid var(--re-light-16);
  margin-bottom: 40px;
}
/* Core flow layout puts margin-block-start on later siblings; any margin here
   would shear the painted gap lines. */
.re-footer-cols > *,
.re-footer-legal > * { margin-block: 0; }

.re-footer-col {
  background: var(--re-charcoal);
  padding: 40px var(--re-fcell-pad-x);
}

/* Column headers: label-2 per the spec type scale (weight, tracking, casing
   and the 20px gap below come from renel.css). */
.re-footer-col h3 { font-size: 10px; line-height: 1.2; }

/* Brand column: logo, then address, then phone/email in a 16px rhythm; body
   copy dimmed to light-88 like the Figma Company Details text. */
.re-footer-col--brand .re-site-logo { margin: 0 0 32px; }
.re-footer-col--brand p { margin: 0 0 16px; color: var(--re-light-88); }
.re-footer-col--brand p:last-child { margin-bottom: 0; }
.re-footer-main .re-footer-col--brand a { color: var(--re-light-88); text-decoration: none; }
.re-footer-main .re-footer-col--brand a:hover,
.re-footer-main .re-footer-col--brand a:focus-visible {
  color: var(--re-foundation);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Link lists read quiet like the Figma columns; underline only on hover. */
.re-footer-main .re-footer-links a { text-decoration: none; }
.re-footer-main .re-footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Award column: the live site's 3byggetilbud badge (500×500 PNG) at wordmark
   scale, then the press link. */
.re-footer-col--award .re-footer-award-img { margin: 0 0 16px; }
.re-footer-col--award .re-footer-award-img img { display: block; width: 124px; height: auto; }
.re-footer-award { color: var(--re-light-88); }

/* ---------- Row 2: area links, rules at the ends only ----------
   border-top: 0 — row 1's bottom edge already draws that rule. */
.re-footer-areas {
  border: 1px solid var(--re-light-16);
  border-top: 0;
  padding: 24px var(--re-fcell-pad-x);
}
.re-footer-areas ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 8px;
  font-size: 14px;
}
.re-footer-areas li { margin: 0; display: flex; align-items: baseline; }
/* Pipe separators like the live footer — decorative, so the modern alt-text
   form empties them for screen readers where supported. */
.re-footer-areas li:not(:last-child)::after {
  content: "|";
  content: "|" / "";
  color: var(--re-light-48);
  padding-inline: 12px;
}
.re-footer-main .re-footer-areas a { color: var(--re-light-88); text-decoration: none; }
.re-footer-main .re-footer-areas a:hover,
.re-footer-main .re-footer-areas a:focus-visible {
  color: var(--re-foundation);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Row 3: thirds — © · social · legal links ----------
   Same gap-trick cells as row 1. renel.css's flex/space-between/padding-top
   for this class is overridden wholesale. */
.re-footer-legal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--re-light-16);
  border: 1px solid var(--re-light-16);
  border-top: 0;
  padding: 0;
}
.re-footer-legal__cell {
  background: var(--re-charcoal);
  padding: 16px var(--re-fcell-pad-x);
  display: flex;
  align-items: center;
}
.re-footer-legal__cell--social { justify-content: center; }
.re-footer-legal__cell--links { justify-content: flex-end; }

/* Icons keep their 32px hit areas from renel.css; marks step up to 20px. */
.re-footer-legal .re-social { margin: 0; }
.re-footer-legal .re-social svg { width: 20px; height: 20px; }

/* ---------- Responsive ladder (re-declared in full — see header note) ----- */
@media (max-width: 1080px) {
  .re-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .re-footer-cols,
  .re-footer-areas,
  .re-footer-legal { --re-fcell-pad-x: 24px; }
  .re-footer-col { padding-block: 32px; }
}
@media (max-width: 720px) {
  .re-footer-cols { grid-template-columns: minmax(0, 1fr); }
  .re-footer-col { padding-block: 28px; }
  .re-footer-areas { padding-block: 20px; }
  .re-footer-legal { grid-template-columns: minmax(0, 1fr); }
  .re-footer-legal__cell { padding-block: 14px; }
  /* Stacked, everything centres (client 2026-09-29): the CTA band, the text,
     the logo lockup (its image is left-anchored inside a 134px box, so the
     box is centred), the badge, the social row and the legal links. */
  .re-footer-cta__inner { margin-inline: auto; text-align: center; }
  .re-footer-cta .wp-block-buttons { justify-content: center; }
  .re-footer-col, .re-footer-legal__cell { text-align: center; }
  .re-footer-col--brand .re-site-logo a { margin-inline: auto; }
  .re-footer-col--award .re-footer-award-img img { margin-inline: auto; }
  .re-footer-about { margin-inline: auto; }
  .re-footer-legal__cell,
  .re-footer-legal__cell--social,
  .re-footer-legal__cell--links { justify-content: center; }
  .re-footer-main .re-footer-legal-links { justify-content: center; }
}

/* ---------------------------------------------------------------- merged: partials/header.css */
/* ==========================================================================
   Sticky header + phone call button (launch audit, 2026-09-29)
   1. .re-nav declares position: sticky, but it sits inside the header
      template part's wrapper div, which is only as tall as the header, so
      the nav scrolled away with the page on every URL. display: contents
      dissolves that wrapper and the nav sticks against the page container
      (.wp-site-blocks). Only the FIRST template part (the header) is
      touched; the announcement bar above the nav still scrolls away.
   2. Phones: the live site had a fixed bottom bar with a call link, and
      phone clicks are a tracked Google Ads conversion (tel: link-click
      trigger in GTM). A fixed call button keeps that on the new site.
      Markup: the wp:html block at the end of parts/footer.html. Hidden
      above 720px. Accent is a surface: obsidian text on it (6.61:1).
      Popovers (FAQ, price terms) live in the top layer, so they cover it.
   ========================================================================== */
.wp-site-blocks > .wp-block-template-part:first-child { display: contents; }

.re-callbar { display: none; }
@media (max-width: 720px) {
  .re-callbar {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 0 18px 0 14px;
    background-color: var(--re-accent);
    color: var(--re-obsidian);
    border: 1px solid var(--re-dark-16);
    box-shadow: 0 8px 24px rgba(3, 3, 4, .28);
    font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: 0;
    text-decoration: none; white-space: nowrap;
  }
  .re-callbar svg { width: 20px; height: 20px; display: block; }
  .re-callbar:hover,
  .re-callbar:focus-visible { background-color: var(--re-accent-hover); text-decoration: none; }
  .re-callbar:focus-visible { outline: 2px solid var(--re-obsidian); outline-offset: 3px; }
}

/* ---------------------------------------------------------------- merged: partials/ninja-forms.css */
/* =============================================================
   NINJA FORMS  (assets/css/partials/ninja-forms.css)

   Restyles production's Ninja Forms form 1 ("Kontakt") inside the
   contact panel so it matches the Figma form the theme already
   draws with .re-form__* (renel.css, "Form panel"). Only reached
   when the plugin is active; the fallback theme form is untouched.

   Scope: every rule lives under .re-kontakt .nf-form-cont, plus the
   two hooks the pattern adds around the shortcode
   (.re-kontakt__nf wrapper, .re-form__privacy note).

   !important, on purpose and only inside this scope: production
   also runs the paid "Layout & Styles" add-on, which prints
   <style> rules keyed to #nf-form-1-cont (id specificity) and puts
   inline widths on its cells (style="width: 50%"), and Ninja Forms
   can load its own "opinionated" light/dark stylesheet. Inline
   styles and id selectors beat any class rule, so the declarations
   that carry the design are marked !important. Nothing here leaks
   outside the contact panel.

   Markup (rendered client-side by Ninja Forms), for reference:
     .nf-form-cont
       .nf-loading-spinner
       .nf-form-title (empty: show_title is 0)
       .nf-form-wrap
         .nf-response-msg          success message, hidden until sent
         .nf-form-layout > form > div
           .nf-before-form-content > nf-section > .nf-form-fields-required
           .nf-form-content > nf-fields-wrap > nf-field > .nf-field-container
             Layout & Styles instead: nf-rows-wrap > nf-row > nf-cells
                                      > nf-cell > nf-field > .nf-field-container
             .nf-field-container.<type>-container.label-hidden
               .nf-field > .field-wrap > .nf-field-label + .nf-field-element
               .nf-after-field > .nf-error-wrap > .nf-error-msg
           .nf-after-form-content > .nf-form-errors + .nf-form-hp
   ============================================================= */

/* ---------- Wrapper the pattern adds around the shortcode ---------- */
.re-kontakt__nf {
  display: flex; flex-direction: column; gap: 24px;
  min-width: 0;
}
.re-kontakt .nf-form-cont { min-width: 0; }
.re-kontakt .nf-form-cont *,
.re-kontakt .nf-form-cont *::before,
.re-kontakt .nf-form-cont *::after { box-sizing: border-box; }

/* Ninja Forms' pulsing placeholder circle while the form boots: the
   panel keeps its own title, so nothing needs to fill the gap. */
.re-kontakt .nf-form-cont .nf-loading-spinner { display: none !important; animation: none !important; }
/* The form title is off (show_title 0); keep it off even if a
   production setting flips, the panel already has "Skriv til os". */
.re-kontakt .nf-form-cont .nf-form-title { display: none !important; }

/* ---------- Structure: one column, every field full width ----------
   Covers both the core markup (nf-fields-wrap) and the Layout & Styles
   markup (nf-rows-wrap / nf-row / nf-cells / nf-cell), including the
   50 % inline cell widths the add-on writes for the E-mail + Telefon
   and By + Postnr. pairs. The theme un-paired those rows on 2026-08-30
   (see patterns/kontakt.php), so the cells stack here too. */
.re-kontakt .nf-form-cont nf-fields-wrap,
.re-kontakt .nf-form-cont nf-rows-wrap,
.re-kontakt .nf-form-cont nf-row,
.re-kontakt .nf-form-cont nf-cells,
.re-kontakt .nf-form-cont nf-cell,
.re-kontakt .nf-form-cont nf-field,
.re-kontakt .nf-form-cont nf-section {
  display: block !important;
  float: none !important;
  width: 100% !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important;
}
.re-kontakt .nf-form-cont .nf-form-wrap,
.re-kontakt .nf-form-cont .nf-form-layout,
.re-kontakt .nf-form-cont .nf-form-layout form,
.re-kontakt .nf-form-cont .nf-form-layout form > div,
.re-kontakt .nf-form-cont .nf-before-form-content,
.re-kontakt .nf-form-cont .nf-form-content,
.re-kontakt .nf-form-cont .nf-after-form-content {
  margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important;
  width: auto !important; max-width: none !important;
}

/* 24px between fields, like .re-form { gap: 24px }. Margin rather than
   flex gap so the empty error/honeypot regions after the fields add
   no phantom spacing. */
.re-kontakt .nf-form-cont .nf-field-container {
  margin: 0 0 24px !important; padding: 0 !important;
  background: none !important; border: 0 !important;
  clear: both;
}
.re-kontakt .nf-form-cont .nf-field-container.submit-container { margin-bottom: 0 !important; }
/* The "Skjul" hidden field ({wp:post_url}) still submits when display:none. */
.re-kontakt .nf-form-cont .nf-field-container.hidden-container,
.re-kontakt .nf-form-cont .nf-field-container.hr-container { display: none !important; margin: 0 !important; }
.re-kontakt .nf-form-cont .nf-field,
.re-kontakt .nf-form-cont .nf-before-field,
.re-kontakt .nf-form-cont .nf-after-field { margin: 0 !important; padding: 0 !important; }
.re-kontakt .nf-form-cont .field-wrap {
  display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
  gap: 8px;                            /* label to input, as .re-form__field */
  margin: 0 !important; padding: 0 !important;
}
.re-kontakt .nf-form-cont .nf-field-label,
.re-kontakt .nf-form-cont .nf-field-element,
.re-kontakt .nf-form-cont .nf-field-description { width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.re-kontakt .nf-form-cont .nf-field-description:empty,
.re-kontakt .nf-form-cont .nf-input-limit:empty,
.re-kontakt .nf-form-cont .nf-error-wrap:empty { display: none; }

/* ---------- Required legend ("Fields marked with an * are required") ----------
   Ninja Forms writes the text (Danish on production via its language
   pack). Labels are hidden and the asterisks live in the placeholders,
   so the legend earns its place, but small and muted like .re-form__note. */
.re-kontakt .nf-form-cont .nf-form-fields-required {
  margin: 0 0 24px !important; padding: 0 !important;
  font-size: var(--wp--preset--font-size--b-3, 12px) !important;
  line-height: 16px !important; letter-spacing: .25px !important;
  font-weight: 400 !important; text-transform: none !important;
  color: var(--re-dark-64) !important;
  background: none !important; border: 0 !important;
}
.re-kontakt .nf-form-cont .nf-form-fields-required .ninja-forms-req-symbol { color: inherit !important; }
.re-kontakt .nf-form-cont .nf-form-fields-required:empty { display: none; }

/* ---------- Labels ----------
   Label-1 treatment from .re-form__field label, for any field whose
   label is shown. The form's default position is "hidden": Ninja Forms
   then collapses the label (height 0, visibility hidden); keep it out of
   sight the accessible way instead, so the aria-labelledby names hold. */
.re-kontakt .nf-form-cont .nf-field-label label,
.re-kontakt .nf-form-cont .nf-field-label .nf-label-span {
  display: block !important;
  margin: 0 !important; padding: 0 !important;
  font-size: var(--wp--preset--font-size--b-3, 12px) !important;
  line-height: 16px !important; letter-spacing: 1px !important;
  text-transform: uppercase !important; font-weight: 500 !important;
  color: var(--re-obsidian) !important;
}
.re-kontakt .nf-form-cont .label-hidden .nf-field-label {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; border: 0 !important;
  visibility: visible !important;
}

/* ---------- Inputs and textarea ----------  = .re-form__field input */
.re-kontakt .nf-form-cont .nf-field-element input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.re-kontakt .nf-form-cont .nf-field-element textarea,
.re-kontakt .nf-form-cont .nf-field-element select {
  display: block !important;
  width: 100% !important; max-width: none !important; min-width: 0 !important;
  height: auto !important; min-height: 0 !important;
  margin: 0 !important; padding: 12px 16px !important;
  background-color: var(--re-sand) !important; background-image: none !important;
  border: 1px solid var(--re-dark-16) !important; border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--re-obsidian) !important;
  font: inherit !important;
  font-size: var(--wp--preset--font-size--b-2, 16px) !important;   /* 16px also stops iOS zooming on focus */
  line-height: 24px !important; letter-spacing: .25px !important;
  text-align: left !important;
  outline: none;
  -webkit-appearance: none; appearance: none;
}
/* min-height is the design value; height stays user-resizable
   (an !important height would block the resize handle). */
.re-kontakt .nf-form-cont .nf-field-element textarea {
  height: 160px;
  min-height: 160px !important;
  resize: vertical !important;
}
.re-kontakt .nf-form-cont .nf-field-element input::placeholder,
.re-kontakt .nf-form-cont .nf-field-element textarea::placeholder {
  color: var(--re-dark-48) !important; opacity: 1 !important;
}
.re-kontakt .nf-form-cont .nf-field-element input:focus-visible,
.re-kontakt .nf-form-cont .nf-field-element textarea:focus-visible,
.re-kontakt .nf-form-cont .nf-field-element select:focus-visible {
  outline: 2px solid var(--re-obsidian) !important; outline-offset: -1px !important;
  border-color: var(--re-obsidian) !important;
  box-shadow: none !important;
}
/* Should a checkbox field ever be added (consent), keep it on brand. */
.re-kontakt .nf-form-cont .nf-field-element input[type="checkbox"],
.re-kontakt .nf-form-cont .nf-field-element input[type="radio"] {
  width: 24px !important; height: 24px !important; margin: 0 !important;
  accent-color: var(--re-accent);
}

/* ---------- Submit ----------  = .re-form__submit
   Ninja Forms renders <input type="button" value="Send">; while sending
   it swaps the value for the "Sender..." processing label and disables it. */
.re-kontakt .nf-form-cont .submit-container .nf-field-element { display: flex !important; justify-content: flex-start; }
.re-kontakt .nf-form-cont .submit-container input[type="button"],
.re-kontakt .nf-form-cont .submit-container input[type="submit"],
.re-kontakt .nf-form-cont .submit-container button {
  display: inline-block !important;
  width: auto !important; max-width: none !important;
  height: auto !important; min-height: 0 !important;
  margin: 0 !important; padding: 12px 16px !important;
  background-color: var(--re-accent) !important; background-image: none !important;
  border: 1px solid var(--re-dark-16) !important; border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--re-obsidian) !important;      /* 6.61:1, accent is a surface, never a text colour */
  font: inherit !important;
  font-size: var(--wp--preset--font-size--b-2, 16px) !important;
  line-height: 24px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background-color .2s ease;
  -webkit-appearance: none; appearance: none;
}
.re-kontakt .nf-form-cont .submit-container input[type="button"]:hover,
.re-kontakt .nf-form-cont .submit-container input[type="submit"]:hover,
.re-kontakt .nf-form-cont .submit-container button:hover { background-color: var(--re-accent-hover) !important; }
.re-kontakt .nf-form-cont .submit-container input[type="button"]:focus-visible,
.re-kontakt .nf-form-cont .submit-container input[type="submit"]:focus-visible,
.re-kontakt .nf-form-cont .submit-container button:focus-visible {
  outline: 2px solid var(--re-obsidian) !important; outline-offset: 2px !important;
}
.re-kontakt .nf-form-cont .submit-container input[type="button"][disabled],
.re-kontakt .nf-form-cont .submit-container input[type="submit"][disabled],
.re-kontakt .nf-form-cont .submit-container button[disabled] {
  background-color: var(--re-accent) !important; opacity: .64 !important; cursor: wait !important;
}

/* ---------- Errors ---------- theme error colour, as .re-kontakt__notice--error */
.re-kontakt .nf-form-cont .nf-error-msg {
  display: block !important;
  margin: 8px 0 0 !important; padding: 0 !important;
  font-size: var(--wp--preset--font-size--b-3, 12px) !important;
  line-height: 16px !important; letter-spacing: .25px !important;
  font-weight: 400 !important; text-transform: none !important;
  color: var(--re-ui-error, #cc2936) !important;
  background: none !important; border: 0 !important;
}
/* The form-level "please correct errors" line after the Send button. */
.re-kontakt .nf-form-cont .nf-form-errors .nf-error-msg {
  margin: 16px 0 0 !important;
  font-size: var(--wp--preset--font-size--b-2, 16px) !important;
  line-height: 24px !important;
}
.re-kontakt .nf-form-cont .nf-error .ninja-forms-field,
.re-kontakt .nf-form-cont .nf-error .nf-field-element input,
.re-kontakt .nf-form-cont .nf-error .nf-field-element textarea {
  border-color: var(--re-ui-error, #cc2936) !important;
}
.re-kontakt .nf-form-cont .nf-field-submit-error { padding: 0 !important; }

/* ---------- Success message ---------- = .re-kontakt__notice--ok
   hide_complete + clear_complete: the form disappears and Ninja Forms
   shows .nf-response-msg (its JS sets display), so display is left alone. */
.re-kontakt .nf-form-cont .nf-response-msg {
  margin: 0 !important; padding: 16px !important;
  font-size: var(--wp--preset--font-size--b-2, 16px) !important;
  line-height: 24px !important;
  background-color: var(--re-sand) !important;
  color: var(--re-obsidian) !important;
  border: 0 !important; border-left: 4px solid var(--re-accent) !important;
  border-radius: 0 !important;
  outline: none;
}
.re-kontakt .nf-form-cont .nf-response-msg > :first-child { margin-top: 0; }
.re-kontakt .nf-form-cont .nf-response-msg > :last-child { margin-bottom: 0; }

/* No JavaScript: Ninja Forms prints a notice instead of the form. */
.re-kontakt .nf-form-cont .ninja-forms-noscript-message {
  margin: 0 !important; padding: 16px !important;
  font-size: var(--wp--preset--font-size--b-2, 16px) !important; line-height: 24px !important;
  text-align: left !important;
  background-color: var(--re-sand) !important; color: var(--re-obsidian) !important;
  border: 0 !important; border-left: 4px solid var(--re-ui-error, #cc2936) !important;
}

/* ---------- Privacy note under the form ---------- = .re-form__note */
.re-kontakt .re-form__privacy {
  margin: 0;
  font-size: var(--wp--preset--font-size--b-3, 12px);
  line-height: 16px; letter-spacing: .25px;
  color: var(--re-dark-64);
}
.re-kontakt .re-form__privacy a {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
}
.re-kontakt .re-form__privacy a:hover,
.re-kontakt .re-form__privacy a:focus-visible { color: var(--re-obsidian); }

/* ---------- Phone ---------- mirrors the 720px .re-form__submit rule */
@media (max-width: 720px) {
  .re-kontakt .nf-form-cont .submit-container .nf-field-element { display: block !important; }
  .re-kontakt .nf-form-cont .submit-container input[type="button"],
  .re-kontakt .nf-form-cont .submit-container input[type="submit"],
  .re-kontakt .nf-form-cont .submit-container button {
    display: block !important; width: 100% !important;
  }
}

/* ---------------------------------------------------------------- merged: partials/priser.css */
/* ==========================================================================
   /priser/ — price list with real information hierarchy (2026-09-22)
   Scope: templates/page-priser.html + the priser page content ONLY.
   Loads after renel.css (partials auto-enqueue, alphabetical). Every class
   here is new (re-priser*, re-price*), so no renel.css rule is overridden
   and no 1080/720 variant needs re-declaring.

   Figma sources (file 6CaPyabcwcovUcKIsav3OO, canvas 35:1666 "Designs"):
     30059:27191  Service #3 "Why Choose Us" — four boxed items sitting on
                  the column grid, 24px padding on every side, title in
                  Body-Large-Bold (20/28/600), description b2 (16/24/.25)
                  at dark-64.            → the price CELL: padding, name
                  and unit type, the box-per-item idea.
     30059:25940  Service #2 "Stats" — rows divided by 1px dark-8 rules with
                  24px vertical padding; a display-scale value (heading
                  family, weight 500) beside a b2 bold title + b2 dark-64
                  description.           → the hairline + 24px rhythm and
                  the display treatment of the price figure.
     30075:8705   Overview feature cards — b2 name over a b3 (12/16/.25)
                  description with a 4px gap. → unit and small-print sizes
                  (Figma's dark-48 lifted to dark-64: 3.9:1 fails AA on
                  Foundation, dark-64 is 6.41:1 — SESSION_STATE C2).
     30059:27470  Service #3 FAQ containers — Quarry Sand surface, 24px
                  padding, the template's quiet secondary box.
                                          → WAS the "Prisbetingelser" row.
                  Retired 2026-09-22: the two conditions moved to their own
                  page, /prisbetingelser/ (partials/legal.css), and the row
                  became one text link (see "Link to the terms page").
   House precedent: .re-partners__grid in renel.css — Foundation cells on
   1px dark-8 hairlines whose outer edge meets the painted column rules.

   Lines are drawn as borders (container top/left, cell right/bottom), not
   as 1px grid gaps over a dark-8 backdrop: same look, but a short last row
   can never expose a slab of backdrop, and no cell is ever transformed, so
   the compositing trap in SESSION_STATE #15 cannot swallow the hairlines.
   No transitions or animations here — nothing to gate on reduced-motion.
   ========================================================================== */

/* ---------- Body rides the 1392 rail ----------
   page.html's .re-article__body is a centred 680px measure. This page's
   post-content wears .re-priser__body instead: the same rail the painted
   column grid uses (renel.css .re-grid paints min(1392px, 100% − 2·pad),
   centred), so the table's outer lines land exactly on the rail's outer
   rules at every viewport. */
.re-priser__body {
  max-width: 1392px;
  margin-inline: auto;
  /* Vertical room is PADDING here, not child margins. Core prints its
     layout rules as `:root :where(.is-layout-flow) > :first-child` /
     `> :last-child` — specificity (0,2,0) — which zero any (0,1,0) margin
     on the body's first and last child; and .wp-block-post-content is
     display:flow-root, so child margins would not collapse through it
     anyway. Core's own 24px flow margin above the body is part of the sums:
       top    24 + 24 = 48 under the stacked head (the head's intended
              margin-bottom, which that same core rule zeroes on every
              imageless page);
       bottom 24 + (section-s − 24) = section-s before the sand kontakt
              band, so two Quarry Sand surfaces never sit a hairline apart. */
  padding-top: 24px;
  padding-bottom: calc(var(--wp--preset--spacing--section-s, 80px) - 24px);
}
/* Core flow layout hands every child a 24px top margin (:where, zero
   specificity). Zeroed here at (0,1,0) and deliberately no heavier, so
   the per-block margins set later in this file win on source order. */
.re-priser__body > * { margin-block: 0; }

/* The head rides the same rail on this page. Stock page.html leaves
   .re-page-hero at the padded content box, which IS the rail up to 1456px
   and wider beyond it — measured at the user's ~1890px review viewport the
   H1 sat 220px left of the table's edge line while intro and table sat on
   the rail. Scoped to .re-priser; the hero markup is page.html's,
   untouched, and the split layout (featured image) inherits the same
   bound. */
.re-priser .re-page-hero {
  max-width: 1392px;
  margin-inline: auto;
}

/* ---------- Intro: 680 measure, left ----------
   Figma section headers sit in a 680px column at the rail's left edge
   (30059:27243 Why Choose Us header, 30075:8698 Overview). The bold lead
   keeps the client's paragraph + strong markup and wears the h5-scale
   statement style the About intro uses (.re-about-vf__lead, from the
   Figma 30044:2623 Content Row); the paragraph runs at b1 dark-64 exactly
   like .re-about-vf__intro p. */
.re-priser__intro { max-width: 680px; }
.re-priser__intro > * { margin-block: 0; }
.re-priser__intro > p:first-child {
  font-family: var(--wp--preset--font-family--heading, inherit);
  font-size: var(--wp--preset--font-size--h-5, 32px);
  line-height: 1;
  letter-spacing: -1px;
  font-weight: 500;
  color: var(--re-obsidian);
}
.re-priser__intro > p:first-child strong { font-weight: inherit; }
.re-priser__intro > p + p {
  margin-top: 24px;
  font-size: var(--wp--preset--font-size--b-1, 20px);
  line-height: 1.4;
  color: var(--re-dark-64);
}

/* ---------- The price table ----------
   Three cells across — the client's own live page was a three-column card
   grid before the content conversion flattened it (priser.meta.json), and
   nine tiers fill 3 × 3 exactly. The 25/50/75 painted rules run behind the
   opaque cells the way they run behind the /blog/ row cards and the
   kontakt panel; only the outer rules stay visible, and those coincide
   with the table's outer lines. */
.re-priser__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 48px;
  border-top: 1px solid var(--re-dark-8);
  border-left: 1px solid var(--re-dark-8);
}
.re-priser__grid > * { margin-block: 0; }

/* One cell. 24px from every line — Figma spacing/24 on each boxed
   component cited above — and the same 24px on all four sides, so the
   text sits the same distance from the top, left and right rules in every
   cell. Cells stretch to their row, so name → price → unit land at the
   same offsets across a row and the prices can be scanned in one straight
   line; the item note flows underneath. */
.re-price {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  background-color: var(--re-foundation);
  border-right: 1px solid var(--re-dark-8);
  border-bottom: 1px solid var(--re-dark-8);
}
.re-price > * { margin-block: 0; }

/* Tier name. The slot is an h2 for the outline (H1 Priser → nine tiers →
   the kontakt heading), styled as Figma's Body-Large-Bold.
   Everything theme.json puts on h2 (family, size, weight, line-height,
   tracking) is restated here. */
.re-price__name {
  font-family: var(--wp--preset--font-family--body, inherit);
  font-size: var(--wp--preset--font-size--h-6, 24px);   /* was b-1 20: "slightly larger" (designer 2026-09-23) */
  line-height: 1.33;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--re-obsidian);
}
/* The price — the one display-scale element in the cell: h3 scale in the
   heading family at weight 500, the Stats-row value treatment. Tabular
   figures keep "1.295" and "3.300" the same width as their neighbours. */
.re-price__amount {
  margin-top: 12px;   /* Figma text-container gap (30059:27195) */
  font-family: var(--wp--preset--font-family--heading, inherit);
  font-size: var(--wp--preset--font-size--h-2, 64px);   /* was h-3 48: "slightly larger" (designer 2026-09-23) */
  line-height: .92;
  letter-spacing: -2.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--re-obsidian);
}
/* "fra" (Miljøtillæg) is a word, not a figure: it rides the same line at
   b2, so the number keeps the baseline of the other prices in its row. */
.re-price__prefix {
  font-family: var(--wp--preset--font-family--body, inherit);
  font-size: var(--wp--preset--font-size--b-2, 16px);
  letter-spacing: .25px;
  font-weight: 400;
  color: var(--re-dark-64);
  margin-right: 2px;
}
/* Unit line: b2 dark-64, the Overview card's 4px name → description gap. */
.re-price__unit {
  margin-top: 4px;
  font-size: var(--wp--preset--font-size--b-2, 16px);
  line-height: 1.5;
  letter-spacing: .25px;
  color: var(--re-dark-64);
}
/* Item-specific small print. Dormant since 2026-09-23: the five notes moved
   to /prisbetingelser/ (designer: that page is where they were meant to be),
   so no cell prints one now. Kept for the launch CSS sweep. */
.re-price__note {
  margin-top: 16px;
  max-width: 60ch;
  font-size: var(--wp--preset--font-size--b-3, 12px);
  line-height: 1.33;
  letter-spacing: .25px;
  color: var(--re-dark-64);
}

/* ---------- Link to the terms page ----------
   The two general conditions moved to /prisbetingelser/ on 2026-09-22
   (client: "a small link somewhere on the price page" to a page that goes
   in depth on the pricing). One quiet text link under the table: b2 at
   dark-64, obsidian + underline on hover, with the template's 16px arrow
   (inc/icons.php 'arrow-right', the genuine Figma export, inlined in the
   block so it takes the link's currentColor). It is the Figma Button/Text
   pairing (16px label + arrow, see blog.css .re-cs-card__more) without the
   accent tile and at weight 500: a footnote, not a call to action. 24px
   below the table's bottom line, the table's own rhythm. The block is a
   direct child of .re-priser__body, so this margin-top beats the zeroing
   rule above on source order. */
.re-priser__more {
  margin-top: 24px;
  font-size: var(--wp--preset--font-size--b-2, 16px);
  line-height: 1.5;
  letter-spacing: .25px;
  font-weight: 500;
}
.re-priser__more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--re-dark-64);          /* 6.41:1 on Foundation */
  text-decoration: none;
}
.re-priser__more svg { width: 16px; height: 16px; flex: 0 0 auto; }
.re-priser__more a:hover,
.re-priser__more a:focus-visible { color: var(--re-obsidian); }
.re-priser__more a:hover span,
.re-priser__more a:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- ≤1080: two columns (renel.css's own tablet breakpoint) ---------- */
@media (max-width: 1080px) {
  .re-priser__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Nine cells in two columns leave one alone on the last row: let it
     span, so the table stays a closed rectangle (the 60ch cap keeps its
     note readable at full width). */
  .re-priser__grid > .re-price:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- ≤720: still two columns (client 2026-09-29: one per row made
   the page a long scroll). Type steps down so "Voksenlærling" and "3.300" fit
   a 147px cell at 390 (132 at 360); hyphens and anywhere-wrapping are the
   safety net on narrower phones. The odd ninth cell still spans (1080 rule). */
@media (max-width: 720px) {
  .re-priser__body { padding-top: 8px; }   /* 24 + 8 = the stock 32px mobile head margin */
  .re-priser__grid { margin-top: 32px; }
  .re-priser__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .re-price { padding: 20px 16px; }
  .re-price__name { font-size: 18px; line-height: 1.3; hyphens: auto; overflow-wrap: anywhere; }
  .re-price__amount { margin-top: 8px; font-size: 40px; line-height: 1; letter-spacing: -1.5px; }
  .re-price__prefix { font-size: 14px; }
  .re-price__unit { font-size: 14px; line-height: 1.4; }
  .re-price__note { max-width: none; }
  .re-priser__intro > p:first-child { letter-spacing: -.5px; }
  .re-priser__intro > p + p {
    font-size: var(--wp--preset--font-size--b-2, 16px);
    line-height: 1.5;
  }
}

/* ---------- Terms pop-up trigger (2026-09-24) ----------
   The client's price terms are a pop-up, not a page: the text link under
   the table became a <button> that opens a modal built on the FAQ pop-up
   component (faq-popup.css, renel.js). It also wears .re-faqp__q so the
   enhancement in renel.js finds it, which drags in that class's FAQ-row
   look (sand, 24px padding, 20/600); reset here, and this file loads after
   faq-popup.css (partials enqueue alphabetically), to the same quiet text
   link as before: b2 at dark-64 with the 16px template arrow, obsidian +
   underline on hover. */
.re-priser__more .re-faqp__q {
  display: inline-flex; align-items: center; gap: 8px;
  width: auto; margin: 0; padding: 0;
  background-color: transparent;
  border: 0; border-radius: 0;
  color: var(--re-dark-64);          /* 6.41:1 on Foundation */
  font: inherit;
  font-size: var(--wp--preset--font-size--b-2, 16px); line-height: 1.5;
  letter-spacing: .25px; font-weight: 500;
  text-align: left; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.re-priser__more .re-faqp__q svg { width: 16px; height: 16px; flex: 0 0 auto; }
.re-priser__more .re-faqp__q:hover,
.re-priser__more .re-faqp__q:focus-visible { color: var(--re-obsidian); }
.re-priser__more .re-faqp__q:hover span,
.re-priser__more .re-faqp__q:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
.re-priser__more .re-faqp__q:focus-visible { outline: 2px solid var(--re-obsidian); outline-offset: 3px; }

/* ---------------------------------------------------------------- merged: partials/process.css */
/* ==========================================================================
   Process section: "Vores arbejdsproces" as a four-station customer journey
   (client meeting 10/09, built 2026-09-22; v2 2026-09-23 on the designer's
   review: library icons on accent tiles, stations offset so the road is one
   smooth wave). Markup: patterns/homepage.php (the `re-process` group);
   motion: the last IIFE in renel.js, plus the self-draw IIFE for the glyphs.
   v3 on the designer's review 2026-09-23: hammer glyph on station 3 (drawn
   in-house, inc/icons.php), no "Trin n" eyebrows over the titles, and the
   road's draw-in as a clip-path wipe instead of per-segment SVG masks.
   Replaces the sticky-rail vertical process built from Figma Home #2
   30032:36130. renel.css still carries that section's rules
   (.re-process__grid/__aside/__steps/__step + .re-feature-list, lines
   397-424, and the 1080px block at 655-658): dead now, left in place for
   the pre-launch CSS merge to sweep. Only the `.re-process` section hook
   is reused.

   Sources (Figma 6CaPyabcwcovUcKIsav3OO, canvas 35:1666 "Designs"):
     30059:26905  Service #3 "Why Choose Us": the template's only four-up
                  on the four grid columns. Section padding = section-
                  padding/medium 120; header = Eyebrow (label-2) -> 24 ->
                  H2 64/56/-2 in a 680 measure, left; 64 to the row; four
                  332-wide items at x 0/348/696/1044 (one per column, 8px
                  inside each painted rule), 24px insets, graphic on top,
                  b2 16/24/.25 description in dark-64 below.
     30032:36135  Home #2 process "Widget", the retired section's own step:
                  Eyebrow -> 24 -> title h6 24/28/-0.5 (weight 500) -> 24
                  -> b2 body. Kept as the per-station type ramp.
     18102:1812   "Icons / Graphic" (Straight, Regular): the station glyphs,
                  inlined in inc/icons.php (phone-graphic / pen / sliders /
                  badge-check-2). Tile = the icon row's 48px accent square
                  with its 24px glyph, scaled to 112 / 56 (same 1px dark-8
                  border; glyph obsidian, the accent-surface rule).
   No page in the template has a horizontal steps/timeline/process
   component, so the road itself is derived from the grid: the ol has four
   gap-less columns of exactly 25% of the 1392 rail, so column centres sit
   midway between the painted rules and the tiles are centred on them.

   The wave: every slot is a band of tile + wave (112 + 64 = 176px). Even
   stations keep their tile at the top of the band, odd stations (1 and 3)
   push theirs down by the wave, and each road segment is a cubic from this
   tile's right edge to the next tile's left edge with horizontal tangents
   at both ends. Each tile is therefore a crest or a trough of one
   continuous S-wave that ends level on the last tile, where the arrowhead
   sits tangent to it. The text blocks stay on a common line below the band
   rather than following their tiles: tried both, and letting the text
   share the offset zigzags the four titles and the paragraph bottoms,
   while a straight reading line with only the tiles waving is calmer.

   Road mechanics: each station except the last owns two <svg>s, one per
   orientation, and CSS shows one at a time. Desktop: a <path> in a
   100-by-176 viewBox with preserveAspectRatio="none", so the same markup
   stretches to any column width (its x values are effectively percentages,
   its y values real pixels); `vector-effect: non-scaling-stroke` keeps the
   2px stroke and the 8/8 dashes true under that stretch. Stacked: a
   <line>. Draw-in (v3): renel.js arms the section and each segment
   wipes open with an animated clip-path inset, start to end, 0.4s per
   segment; the S-curve is monotonic in x, so the wipe reads as the line
   drawing along itself. No masks, no ids, no pathLength: the static road is
   just a dashed path, which is also what no-JS and reduced-motion get. Segments stop at the tile edges, so no tile background is
   load-bearing and there are no z-index games. House rules:
   background-color only; renel.css's 1080/720 breakpoints re-declared.
   ========================================================================== */

.re-process {
  --re-process-tile: 112px;                 /* icon tile, 1:1; = $renel_tile in homepage.php */
  --re-process-wave: 64px;                  /* how far stations 1 and 3 sit below 2 and 4; = $renel_wave */
  --re-process-glyph: 56px;                 /* half the tile, like the icon row's 24-in-48 */
  --re-process-road: var(--re-dark-48);     /* decorative line, no text floor */
  --re-process-row-gap: 48px;               /* stacked layout only */
  padding-top: var(--wp--preset--spacing--section-m, 120px);
  padding-bottom: var(--wp--preset--spacing--section-m, 120px);
}
/* Swap `re-section--light` for `re-section--dark` and everything re-tints. */
.re-section--dark.re-process { --re-process-road: var(--re-light-48); }

/* Head and journey ride the 1392 rail (priser/footer convention), so the
   four columns below sit exactly between the painted rules at every width. */
.re-process__inner { max-width: 1392px; margin-inline: auto; }
.re-process__inner > * { margin-block: 0; }    /* core flow-layout margins */
.re-process__head { margin-bottom: 64px; }     /* Figma: 64 to the row */
.re-process__head > * { margin: 0; }
.re-process__head h2 { margin-top: 24px; max-width: 680px; }

/* ---------- Stations on the four columns ---------- */
.re-process__journey { position: relative; }
.re-process__stations {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;                                   /* columns = the painted cells */
  align-items: start;
}
.re-process__station { position: relative; margin: 0; padding: 0; min-width: 0; }

/* Tile band: the slot is tile + wave tall in every station; odd stations
   (1 and 3) sit low in it, even ones high. The band is the first in-flow
   child, so its top is the station's top: the road segments below measure
   from there. The low position is PADDING on the slot, not a margin on the
   tile: a top margin collapses through the slot and shifts the whole
   station (text included) down by the wave, which is exactly the
   text-follows-the-tile variant that was tried and rejected. */
.re-process__slot { box-sizing: border-box; height: calc(var(--re-process-tile) + var(--re-process-wave)); }
.re-process__station:nth-child(odd) .re-process__slot { padding-top: var(--re-process-wave); }
.re-process__tile {
  box-sizing: border-box;                   /* the border stays inside the 112 */
  width: var(--re-process-tile); height: var(--re-process-tile);
  margin-inline: auto;                      /* centred on the column = on the painted cell */
  display: grid; place-items: center;
  background-color: var(--re-accent);
  border: 1px solid var(--re-dark-8);
  color: var(--re-obsidian);                /* glyph on accent must stay dark: 6.61:1 */
}
.re-process__tile .re-icon { width: var(--re-process-glyph); height: var(--re-process-glyph); }

.re-process__body { text-align: center; }
.re-process__body > * { margin: 0; }
.re-process__station .re-process__title {
  margin-top: 32px; padding-inline: 24px;   /* 32 from the band (the dropped eyebrow's slot); Figma item inset 24 */
  font-size: var(--wp--preset--font-size--h-6, 24px);
  line-height: 1.17; letter-spacing: -0.5px;
}
.re-process__text {
  margin-top: 24px; padding-inline: 24px;
  font-size: var(--wp--preset--font-size--b-2, 16px); line-height: 24px; letter-spacing: .25px;
  color: var(--re-dark-64);                 /* 6.41:1 on Foundation */
}
.re-section--dark.re-process .re-process__text { color: var(--re-light-88); }

/* ---------- The road ---------- */
.re-process__seg {
  position: absolute;
  display: block;
  overflow: visible;
  pointer-events: none;
}
.re-process__seg--h {
  top: 0;                                        /* the band... */
  height: calc(var(--re-process-tile) + var(--re-process-wave));
  left: calc(50% + var(--re-process-tile) / 2);  /* ...from this tile's right edge... */
  width: calc(100% - var(--re-process-tile));    /* ...to the next tile's left edge */
}
.re-process__seg--v { display: none; }
.re-process__road {
  fill: none;
  stroke: var(--re-process-road);
  stroke-width: 2;
  stroke-dasharray: 8 8;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;        /* true 2px and 8/8 dashes under the stretched viewBox */
}

/* Arrowhead: a 20px box whose origin is the tip point, set on the last
   tile's edge where the road ends; the road arrives level at every tile,
   so the head is horizontal (desktop) or vertical (stacked). */
.re-process__tip {
  position: absolute; display: block;
  width: 20px; height: 20px;
  overflow: visible; pointer-events: none;
}
.re-process__tip path {
  fill: none; stroke: var(--re-process-road); stroke-width: 2;
  stroke-linecap: square; stroke-linejoin: miter;    /* the set's arrow: square caps */
}
.re-process__tip--h {
  left: calc(150% - var(--re-process-tile) / 2 - 10px);   /* tile 4's left edge */
  top: calc(var(--re-process-tile) / 2 - 10px);           /* tile 4 is even = high: centre at tile/2 */
}
.re-process__tip--v { display: none; }

/* ---------- Motion: armed by renel.js only, static otherwise ----------
   Road: 0.4s a segment, linear, one after another (1.2s for the three), as a clip-path wipe.
   Glyphs: the self-draw IIFE arms them (effects.css .re-draw-*); only the
   timing is retuned here so station n's glyph starts tracing the moment the
   road reaches its tile (n x .4s) and has landed (.7s) before the road is
   two tiles on. Text: the hero's rise, 24px, timed the same way.
   renel.js strips every class 2.2s after the start (see there: a lingering
   transform would promote every station to a compositing layer). */
@media (prefers-reduced-motion: no-preference) {
  .re-journey-armed .re-process__body { opacity: 0; }
  .re-journey-in .re-process__body {
    --re-rise: 24px;
    animation: re-hero-rise .55s cubic-bezier(.22, .61, .36, 1) both;   /* keyframes: effects.css */
    animation-delay: calc(var(--re-i, 0) * .4s);
  }
  /* Road and arrowhead: wipe open from the start edge (left on desktop, top
     when stacked). Plain clip-path (v3), no masks. */
  .re-journey-armed .re-process__seg--h,
  .re-journey-armed .re-process__tip--h { clip-path: inset(0 100% 0 0); }
  .re-journey-armed .re-process__seg--v,
  .re-journey-armed .re-process__tip--v { clip-path: inset(0 0 100% 0); }
  .re-journey-in .re-process__seg {
    animation: re-road-wipe .4s linear forwards;
    animation-delay: calc(var(--re-i, 0) * .4s);
  }
  .re-journey-in .re-process__tip {
    animation: re-road-wipe .2s linear forwards;
    animation-delay: calc((var(--re-i, 0) + 1) * .4s);
  }
  .re-process__journey.re-draw-in .re-icon svg .re-drawm {
    animation-duration: .7s;
    animation-delay: calc(var(--re-i, 0) * .4s);
  }
}

@keyframes re-road-wipe {
  to { clip-path: inset(0 0 0 0); }
}

/* ---------- Stacked: a timeline, tile left and text right ----------
   Switches at the site's tablet break, not at 720: between 721 and 1080px
   the four columns are only 171-256px wide, too narrow for five-line
   paragraphs (the old section collapsed at 1080 too). The wave collapses
   (every band is just the tile), the tiles keep their size and line up on
   the left, and the road runs straight down from tile to tile through the
   space beside the text. */
@media (max-width: 1080px) {
  .re-process { --re-process-wave: 0px; }
  .re-process__head { margin-bottom: 48px; }
  .re-process__stations { grid-template-columns: minmax(0, 1fr); row-gap: var(--re-process-row-gap); }
  .re-process__station {
    display: grid; grid-template-columns: var(--re-process-tile) minmax(0, 1fr);
    column-gap: 24px; align-items: start;
  }
  .re-process__tile { margin-inline: 0; }
  .re-process__body { text-align: left; max-width: 680px; }
  .re-process__station .re-process__title { margin-top: 0; }   /* the title tops the tile's edge */
  .re-process__station .re-process__title,
  .re-process__text { padding-inline: 0; }
  .re-process__seg--h,
  .re-process__tip--h { display: none; }
  .re-process__seg--v {
    display: block;
    left: calc(var(--re-process-tile) / 2 - 4px); width: 8px;       /* road centre x = the tile's */
    top: calc(var(--re-process-tile) + 4px);                          /* 4px below this tile... */
    height: calc(100% - var(--re-process-tile) + var(--re-process-row-gap) - 8px);   /* ...to 4px above the next */
  }
  .re-process__tip--v {
    display: block;
    left: calc(var(--re-process-tile) / 2 - 10px);
    top: calc(100% + var(--re-process-row-gap) - 10px);               /* origin on the next tile's top edge */
  }
}
@media (max-width: 720px) {
  .re-process__head { margin-bottom: 40px; }
  .re-process__station { column-gap: 16px; }
}

/* ---------------------------------------------------------------- merged: partials/service-hero.css */
/* ==========================================================================
   Split page hero — Agent D (service-hero)
   Scope: templates/page.html ONLY (standard service + area pages).

   Figma "Service #1" frame 30049:7163 —
     Feature Image 30057:1576  680×950, flush left at the page pad,
                               exactly grid cols 1–2 (2×332 + 16 @ 1440)
     Content col   30057:1548  564 wide, flush right, 160px top padding,
                               24px stack gap, button row 48px tall / 8px gap
   Image→content gap 132px. Reference content box 1376px (1440 − 2×32),
   which is what .re-article's page padding yields at 1440 — so the three
   widths transfer as pure proportions.

   Everything is gated on :has(featured image). Pages without one render
   the stock stacked head untouched: the .re-page-hero wrapper carries no
   styles of its own and the CTA row stays display:none.
   ========================================================================== */

/* The CTA row ships in the template on every page but belongs to the split
   hero design only. Hidden at (0,3,0) so core's flex-layout classes
   (.wp-block-buttons-is-layout-flex etc., all lower or :where-zero) can
   never re-reveal it. If :has() is ever unsupported, every page simply
   keeps today's stacked look. */
.re-article .re-page-hero .re-page-hero__actions { display: none; }

/* --------------------------------------------------------------------------
   Split layout, v2 (client review 2026-09-29): the homepage composition on
   every page with a featured image. Title + CTAs top-left in the hero's
   564 measure; the photo on the right, 74% wide and bleeding to the page
   edge, seen through THREE stepped rectangles: bottom-aligned thirds at
   1/3, 2/3 and full height, ascending to the right, the homepage's
   332/661/992 proportions. One continuous photo under a stepped opening:
   the two shorter thirds are painted over with the page colour (the
   .re-notch primitive's layers, re-sized). Replaces the corner notch,
   which left the title in a field of white. Still gated on :has(featured
   image): pages without one keep the stacked head.
   -------------------------------------------------------------------------- */
.re-page-hero:has(.wp-block-post-featured-image img) {
  position: relative;
  display: block;
  min-height: min(82vh, 900px);
  padding: 96px 0 48px;
  margin-bottom: 80px;
}
.re-page-hero:has(.wp-block-post-featured-image img) .re-page-hero__media {
  position: absolute;
  right: calc(-1 * var(--re-page-pad));   /* bleed to the viewport edge like the homepage strips */
  bottom: 0;
  width: min(74%, 1068px);
  height: 100%;
  margin: 0;
  pointer-events: none;
  --re-notch-color: var(--re-foundation);
}
.re-page-hero:has(.wp-block-post-featured-image img) .re-page-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The stepped opening: left third shows the bottom 1/3, middle third the
   bottom 2/3, right third the whole height. Three layers like .re-notch;
   the third is empty. Sizes overlap the thirds by a hair against seams. */
.re-page-hero:has(.wp-block-post-featured-image img) .re-page-hero__media::before {
  background-image:
    linear-gradient(var(--re-notch-color), var(--re-notch-color)),
    linear-gradient(var(--re-notch-color), var(--re-notch-color)),
    linear-gradient(var(--re-notch-color), var(--re-notch-color));
  background-size: 33.5% 66.7%, 33.5% 33.4%, 0 0;
  background-position: 0 0, 50% 0, 0 0;
  background-repeat: no-repeat;
}
.re-page-hero:has(.wp-block-post-featured-image img) .re-page-hero__content {
  position: relative; z-index: 2;
  max-width: 564px;
  margin: 0;
  padding: 0;
}
.re-page-hero:has(.wp-block-post-featured-image img) .re-article__title { margin: 0; }
.re-page-hero:has(.wp-block-post-featured-image img) .re-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;         /* Figma button-row gap */
  margin-top: 40px; /* was the Figma 24: client 2026-09-29, the buttons sat too close to the title */
}

/* Flipped cut-out (client 2026-09-29): photos whose faces sit at the top of
   the frame get the steps at the BOTTOM instead, so the top of every strip
   shows. functions.php adds body.re-hero-flip by featured-image file name
   (0U2A5013, 0U2A0395, 0U2A5745, 0U2A5679, 0U2A5362 today). The photo is narrowed so it no longer runs under
   the title column, which the top-visible left strip would otherwise hit. */
body.re-hero-flip .re-page-hero:has(.wp-block-post-featured-image img) .re-page-hero__media {
  width: min(60%, 880px);
}
body.re-hero-flip .re-page-hero:has(.wp-block-post-featured-image img) .re-page-hero__media::before {
  background-position: 0 100%, 50% 100%, 0 0;
}
/* Portrait photos (0U2A0395) are cropped vertically by the cover fit: keep the
   top of the frame, where these faces are. Landscape photos are cropped
   sideways only, so the y value does nothing to them. */
body.re-hero-flip .re-page-hero:has(.wp-block-post-featured-image img) .re-page-hero__media img {
  object-position: 50% 20%;
}

/* Tablet and phone: title first, then the stepped photo full width under
   it (the homepage hero stacks the same way at 1080). */
@media (max-width: 1080px) {
  .re-page-hero:has(.wp-block-post-featured-image img) {
    display: flex; flex-direction: column;
    min-height: 0;
    padding: 64px 0 0;
    margin-bottom: 48px;
  }
  .re-page-hero:has(.wp-block-post-featured-image img) .re-page-hero__media {
    position: relative; right: 0; bottom: auto;
    width: 100%;
    height: clamp(320px, 52vw, 560px);
    margin-top: 40px;
  }
  /* The flipped variant narrows the photo on desktop only; stacked it is full
     width like every other page (client 2026-09-29: /priser/ was 60%). */
  body.re-hero-flip .re-page-hero:has(.wp-block-post-featured-image img) .re-page-hero__media { width: 100%; }
  .re-page-hero:has(.wp-block-post-featured-image img) .re-page-hero__content { order: -1; max-width: none; }
}
@media (max-width: 720px) {
  .re-page-hero:has(.wp-block-post-featured-image img) { padding-top: 48px; margin-bottom: 40px; }
  .re-page-hero:has(.wp-block-post-featured-image img) .re-page-hero__media { height: clamp(240px, 70vw, 420px); margin-top: 32px; }
}

/* ---------------------------------------------------------------- merged: partials/testimonials.css */
/*
 * Testimonials — Agent E (design pass 2026-08-18).
 *
 * The card base (.re-testimonial: max-width 332px, Obsidian surface, 16px
 * padding, 24px column gap, accent 16px stars with 4px gap) lives in renel.css
 * and already matches Figma card 30057:7212 exactly (332x240 = 16 pad + 16
 * stars + 24 gap + ~96 quote + 24 gap + 48 byline + 16 pad). This partial only
 * adds what the Kontakt instance of the card needs on top of that base.
 *
 * Obsidian, not Charcoal, deliberately: renel.css documents that accent stars
 * on Charcoal measure 2.88:1 — under the 3:1 that WCAG 1.4.11 requires for a
 * graphic you need in order to understand the content — and the rating row is
 * the point of the card. On Obsidian the stars reach 6.61:1, and the two
 * testimonial cards (forside statement + kontakt) stay one component.
 */

/* Placement: in the Kontakt left column, under the contact routes. The figure
   needs its margins restated here: .re-kontakt__text > * zeroes margin-block,
   and the UA default margin-inline on <figure> (40px) must go too.
   ⚠️ Dormant since 2026-08-30 — the user removed the review card from
   patterns/kontakt.php ("for now"); rule kept in case it returns. */
.re-kontakt__text > .re-testimonial--kontakt { margin: 40px 0 0; }

/* Quote — b2 (16/24/.25) in light-88 on the dark card. */
.re-testimonial__quote { margin: 0; }
.re-testimonial__quote p {
  margin: 0;
  color: var(--re-light-88);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: .25px;
}

/* Byline — name over source, per the Figma card's name/title stack. Name/title
   only: the live slider's "photo" is the Anmeld Haandvaerker smiley logo, not
   a reviewer portrait, so the Figma 64x48 photo slot is omitted, not faked. */
.re-testimonial__byline { display: flex; flex-direction: column; gap: 4px; }
.re-testimonial__name {
  color: var(--re-light-88);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}
.re-testimonial__source {
  /* label-2: 10/12/1px uppercase. light-64 on Obsidian is ~7.7:1 — same
     pairing renel.css already uses for the statement card's meta line. */
  color: var(--re-light-64);
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ---------- Review wall (homepage statement band; 2026-09-24, reworked 2026-09-28) ----------
   Hunter's review: many more cards behind, overlapping each other, hardly
   blurred, with the front three plainly on top. Markup: patterns/homepage.php
   (.re-reviews); data: anmeldelser.txt in the theme root.
     ghosts  .re-reviews__ghosts: absolute over the whole band (the band is
             position: relative in renel.css), aria-hidden, no pointer events.
             28 OPAQUE cards on a jittered 7 x 4 grid (inline --x --y in % of
             the band, --r tilt, --s scale, --d drift period) overlapping
             their neighbours like a pile of printed reviews. Sharp, never
             blurred: they sit back through a darker surface, dimmer text,
             a soft shadow and a scrim behind the heading (::after), so the
             heading and the front cards keep their contrast. Pure
             decoration, so the dim text has no contrast floor (WCAG 1.4.3).
             Stars are one background image per card (the set's star-solid
             path five times, accent), not 5 inline SVGs, to keep the DOM
             small.
     focus   .re-reviews__focus: the first three reviews, raised in a
             stagger, above the pile with a deep shadow.
     more    .re-reviews__more: the old homepage's own line linking to the
             Anmeld Håndværker profile and Google, the source of every card.
   Drift only under prefers-reduced-motion: no-preference; static otherwise.
   The ghosts are compositor layers (transform); nothing with a 1px gap sits
   under them, so the partners-grid hairline trap does not apply. */
.re-statement { min-height: 1000px; overflow: hidden; }
.re-statement > h2,
.re-reviews__focus,
.re-reviews__more { position: relative; z-index: 1; }
.re-reviews__ghosts {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none; -webkit-user-select: none;
}
/* Scrim: the heading stays readable over the pile (charcoal = #49494a). */
.re-reviews__ghosts::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 60% 44% at 22% 17%, rgba(73, 73, 74, .97) 0%, rgba(73, 73, 74, .9) 48%, rgba(73, 73, 74, 0) 100%),
    linear-gradient(to bottom, rgba(73, 73, 74, 0) 70%, rgba(73, 73, 74, .9) 86%, rgba(73, 73, 74, 1) 100%),   /* quiet zone for the source line */
    linear-gradient(rgba(73, 73, 74, .14), rgba(73, 73, 74, .14));
}
.re-reviews__ghost {
  position: absolute;
  left: var(--x, 50%); top: var(--y, 50%);
  width: 280px; max-width: none;
  transform: rotate(var(--r, 0deg)) scale(var(--s, 1));
  transform-origin: center;
  background-color: #1e1e1f;
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .34);
  color: rgba(255, 255, 255, .5);
}
.re-reviews__ghost-stars {
  display: block;
  width: 90px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-1%20-1%20146%2026'%20fill='%23ed6a3e'%20stroke='%23ed6a3e'%20stroke-width='2'%20stroke-linecap='square'%3E%3Cg%20transform='translate(0%200)'%3E%3Cpath%20d='M14.502%208.35254L14.7334%208.8252L15.2539%208.90137L20.8564%209.72266L16.8008%2013.6885L16.4258%2014.0557L16.5146%2014.5723L17.4707%2020.168L12.4668%2017.5273L12%2017.2812L11.5332%2017.5273L6.52832%2020.168L7.48535%2014.5723L7.57422%2014.0557L7.19922%2013.6885L3.14258%209.72266L8.74609%208.90137L9.2666%208.8252L9.49805%208.35254L12%203.26562L14.502%208.35254Z'/%3E%3C/g%3E%3Cg%20transform='translate(30%200)'%3E%3Cpath%20d='M14.502%208.35254L14.7334%208.8252L15.2539%208.90137L20.8564%209.72266L16.8008%2013.6885L16.4258%2014.0557L16.5146%2014.5723L17.4707%2020.168L12.4668%2017.5273L12%2017.2812L11.5332%2017.5273L6.52832%2020.168L7.48535%2014.5723L7.57422%2014.0557L7.19922%2013.6885L3.14258%209.72266L8.74609%208.90137L9.2666%208.8252L9.49805%208.35254L12%203.26562L14.502%208.35254Z'/%3E%3C/g%3E%3Cg%20transform='translate(60%200)'%3E%3Cpath%20d='M14.502%208.35254L14.7334%208.8252L15.2539%208.90137L20.8564%209.72266L16.8008%2013.6885L16.4258%2014.0557L16.5146%2014.5723L17.4707%2020.168L12.4668%2017.5273L12%2017.2812L11.5332%2017.5273L6.52832%2020.168L7.48535%2014.5723L7.57422%2014.0557L7.19922%2013.6885L3.14258%209.72266L8.74609%208.90137L9.2666%208.8252L9.49805%208.35254L12%203.26562L14.502%208.35254Z'/%3E%3C/g%3E%3Cg%20transform='translate(90%200)'%3E%3Cpath%20d='M14.502%208.35254L14.7334%208.8252L15.2539%208.90137L20.8564%209.72266L16.8008%2013.6885L16.4258%2014.0557L16.5146%2014.5723L17.4707%2020.168L12.4668%2017.5273L12%2017.2812L11.5332%2017.5273L6.52832%2020.168L7.48535%2014.5723L7.57422%2014.0557L7.19922%2013.6885L3.14258%209.72266L8.74609%208.90137L9.2666%208.8252L9.49805%208.35254L12%203.26562L14.502%208.35254Z'/%3E%3C/g%3E%3Cg%20transform='translate(120%200)'%3E%3Cpath%20d='M14.502%208.35254L14.7334%208.8252L15.2539%208.90137L20.8564%209.72266L16.8008%2013.6885L16.4258%2014.0557L16.5146%2014.5723L17.4707%2020.168L12.4668%2017.5273L12%2017.2812L11.5332%2017.5273L6.52832%2020.168L7.48535%2014.5723L7.57422%2014.0557L7.19922%2013.6885L3.14258%209.72266L8.74609%208.90137L9.2666%208.8252L9.49805%208.35254L12%203.26562L14.502%208.35254Z'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat;
  opacity: .6;
}
.re-reviews__ghost .re-testimonial__quote p {
  color: rgba(255, 255, 255, .52);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4;
  overflow: hidden;
}
.re-reviews__ghost .re-testimonial__meta,
.re-reviews__ghost .re-testimonial__meta span { color: rgba(255, 255, 255, .36); }

.re-reviews__focus {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 400px));   /* client 2026-09-29: the front cards a size larger */
  justify-content: space-between;
  align-items: end;
  column-gap: 24px; row-gap: 24px;
}
.re-reviews__card {
  margin: 0;
  max-width: 400px; padding: 24px; gap: 24px;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 28px 64px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
}
.re-reviews__card .re-testimonial__quote p { font-size: 18px; line-height: 28px; }
.re-reviews__card .re-testimonial__stars { gap: 5px; }
.re-reviews__card .re-testimonial__stars .re-icon { width: 18px; height: 18px; }
.re-reviews__card .re-testimonial__meta { font-size: 13px; }
/* Name and source share a flex row; when the source line is longer than the
   card the whole span wraps under the name instead of the name sliding down
   to its last line (phone cards, 2026-10-01). */
.re-reviews .re-testimonial__meta { flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
.re-reviews__card:nth-child(2) { translate: 0 -40px; }
.re-reviews__card:nth-child(3) { translate: 0 -80px; }
/* Source line: a quiet text line under the cards, the priser terms-link
   treatment on the dark band (client 2026-09-29: no floating plate). */
.re-reviews__more {
  display: block;
  margin: 128px 0 0;   /* deep in the quiet zone the scrim fade leaves under the cards (client 2026-09-29, twice) */
  padding: 0;
  font-size: 16px; line-height: 1.5; letter-spacing: .25px; font-weight: 500;
  color: var(--re-light-64);
}
.re-reviews__more a {
  color: var(--re-light-88);
  text-decoration: underline; text-underline-offset: 3px;
}
.re-reviews__more a:hover { color: var(--re-foundation); }
.re-reviews__more a:focus-visible { outline: 2px solid var(--re-foundation); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .re-reviews__ghost { animation: re-ghost-drift var(--d, 14s) ease-in-out infinite alternate; }
}
@keyframes re-ghost-drift {
  to { translate: 0 -8px; }
}

/* Tablet: cards flow, half the pile (every other slot, so every row keeps
   some). Phone: stacked cards, every third slot, a plainer scrim. */
@media (max-width: 1080px) {
  .re-statement { min-height: 0; }
  .re-reviews__focus {
    grid-template-columns: repeat(auto-fit, minmax(280px, 400px));
    justify-content: start;
  }
  .re-reviews__card:nth-child(2),
  .re-reviews__card:nth-child(3) { translate: none; }
  .re-reviews__ghost:nth-child(2n) { display: none; }
}
@media (max-width: 720px) {
  .re-reviews__focus { justify-content: center; }   /* client 2026-10-01: the front cards centred, not left */
  .re-reviews__ghost { width: 230px; display: none; }
  .re-reviews__ghost:nth-child(3n + 1) { display: flex; }
  .re-reviews__ghosts::after {
    background-image: linear-gradient(rgba(73, 73, 74, .95) 0%, rgba(73, 73, 74, .7) 30%, rgba(73, 73, 74, .45) 100%);
  }
}