:root{--btn-radius:999px} :root{/* The brand faces live at :root, not only on .nb-site. Scoped to .nb-site they reached the front page and the bespoke CPT layouts but NOT the generic CPT tier (.nb-cpt/.nb-single), so every by-side rendered in Georgia while Source Sans 3 sat loaded and unused on the same page — and the closing CTA inherited that serif, which is why the same band looked different per tier. */--ff-body:"Source Sans 3", system-ui, sans-serif;--ff-heading:"Fraunces", Georgia, serif;--primary:#4D4949;--primary-dark:color-mix(in srgb, #4D4949 72%, #000);--primary-ultra-dark:color-mix(in srgb, #4D4949 42%, #000);--primary-light:color-mix(in srgb, #4D4949 24%, #fff);--primary-ultra-light:color-mix(in srgb, #4D4949 9%, #fff);--base:#F6F4EF;--base-ultra-light:color-mix(in srgb, #F6F4EF 55%, #fff);--text-dark:#23262C;--text-light:#FBFBF8;--nb-green:#4D4949;--nb-bg:#F6F4EF;--nb-container:72.5rem;--nb-pad:clamp(1.25rem,4vw,2.5rem);--nb-heading-weight:500;--primary-hover:color-mix(in srgb, #4D4949 82%, #000);--secondary:#4D4949;--secondary-hover:color-mix(in srgb, #4D4949 82%, #000);--accent-hover:color-mix(in srgb, #4D4949 82%, #000);--action:#4D4949;--action-hover:color-mix(in srgb, #4D4949 82%, #000);--action-dark:color-mix(in srgb, #4D4949 60%, #000);--action-light:color-mix(in srgb, #4D4949 30%, #fff);--action-ultra-light:color-mix(in srgb, #4D4949 9%, #fff);--link-color:#4D4949;--link-color-hover:color-mix(in srgb, #4D4949 68%, #000);} .nb-site .nb-brand-home{display:inline-flex;align-items:center}.nb-site .nb-brand-logo{max-height:64px;width:auto;display:inline-block} .nb-site{overflow-x:clip} .nb-site header, .nb-site main, .nb-site section, .nb-site article, .nb-site aside, .nb-site footer, .nb-site nav, .nb-site figure{display:block}.nb-site section>div{display:block}.nb-site a:not(svg):not(math){display:revert}.nb-site [data-section]:where(:not([data-section="hero"])){padding-block:clamp(2.75rem,6vw,5rem)}/* Google-Fonts @import removed 2026-08-14: it sat ~1950 chars into the file, and an @import is only honoured at the TOP of a stylesheet — so it never loaded anything. Fraunces + Source Sans 3 are self-hosted via theme.json. A third-party font call also has no place on a Danish client site. */.nb-site{ --bg:#F6F4EF; --surface:#FBFAF6; --ink:#2C2C2E; --muted:#5A5A55; --primary:#4D4949; --primary-ink:#F6F4EF; --accent:#677357; --line:#DFDBD1; --tint:color-mix(in srgb, var(--primary) 7%, var(--bg)); --warm:color-mix(in srgb, var(--accent) 9%, var(--bg)); --brand-wash:color-mix(in srgb, var(--primary) 15%, var(--bg)); --accent-ink:color-mix(in srgb, var(--accent) 75%, var(--ink)); --primary-text:color-mix(in srgb, var(--primary) 75%, var(--ink)); --ff-heading:"Fraunces", Georgia, serif; --ff-body:"Source Sans 3", system-ui, sans-serif; --fs-1:0.865rem; --fs-2:1.09rem; --fs-3:1.373rem; --fs-4:1.73rem; --fs-5:clamp(1.73rem, 1.57rem + 1.1vw, 2.18rem); --fs-6:clamp(2.18rem, 1.731rem + 2.2vw, 3.462rem); --sp-band:clamp(3rem, 6vw, 4.5rem); --sp-head:clamp(1.75rem, 3vw, 2.25rem); --gap:clamp(1.25rem, 2vw, 1.75rem); --radius:12px; --radius-btn:12px; }:where(.nb-site) *, :where(.nb-site) *::before, :where(.nb-site) *::after{box-sizing:border-box}.nb-site{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff-body);font-size:var(--fs-2);line-height:1.7;-webkit-font-smoothing:antialiased}:where(.nb-site) h1, :where(.nb-site) h2, :where(.nb-site) h3, :where(.nb-site) h4{font-family:var(--ff-heading);font-weight:500;line-height:1.15;margin:0;letter-spacing:.005em}:where(.nb-site) h1{font-size:var(--fs-6)}:where(.nb-site) h2{font-size:var(--fs-5)}:where(.nb-site) h3{font-size:var(--fs-3)}:where(.nb-site) h4{font-size:var(--fs-2);font-weight:600}:where(.nb-site) p{margin:0}:where(.nb-site) p+p{margin-top:1em}:where(.nb-site) img{max-width:100%;display:block}:where(.nb-site) a{color:inherit}:where(.nb-site) hr{border:0;border-top:1px solid var(--line);margin:0}.nb-site .wrap{max-width:72.5rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}.nb-site .wrap--narrow{max-width:48rem}.nb-site .eyebrow{display:block;font-size:var(--fs-1);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}.nb-site .lead{font-size:var(--fs-3);line-height:1.6;color:var(--muted)}.nb-site .sec-head{max-width:46rem;margin-bottom:var(--sp-head)}.nb-site .sec-head .eyebrow{margin-bottom:.9rem}.nb-site .sec-head .lead{margin-top:1rem}.nb-site .sec-head--center{margin-inline:auto;text-align:center}.nb-site .muted{color:var(--muted)}.nb-site .btn{display:inline-flex;align-items:center;gap:.55em;padding:.8em 1.6em;border-radius:var(--radius-btn);border:1px solid transparent;font-family:var(--ff-body);font-size:var(--fs-2);font-weight:600;line-height:1.3;text-decoration:none;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.nb-site .btn--primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}.nb-site .btn--primary:hover{background:color-mix(in srgb, var(--primary) 86%, var(--ink));border-color:color-mix(in srgb, var(--primary) 86%, var(--ink))}.nb-site .btn--ghost{background:transparent;color:var(--primary-text);border-color:color-mix(in srgb, var(--primary) 45%, transparent)}.nb-site .btn--ghost:hover{border-color:var(--primary);background:color-mix(in srgb, var(--primary) 7%, transparent)}.nb-site .btn:focus-visible, :where(.nb-site) a:focus-visible{outline:2px solid currentColor;outline-offset:3px}.nb-site [data-fill="none"]{background:transparent}.nb-site [data-fill="base"]{background:var(--bg)}.nb-site [data-fill="tint"]{background:var(--tint)}.nb-site [data-fill="warm"]{background:var(--warm)}.nb-site [data-fill="brand"]{background:var(--brand-wash)}.nb-site [data-fill="dark"]{background:var(--primary);color:var(--primary-ink)}.nb-site [data-fill="image"]{background:color-mix(in srgb, var(--ink) 84%, var(--primary));color:var(--primary-ink)}.nb-site :is([data-fill="dark"],[data-fill="image"]) :is(h1,h2,h3,h4,p,.lead,.muted){color:var(--primary-ink)}.nb-site :is([data-fill="dark"],[data-fill="image"]) .eyebrow{color:var(--primary-ink)}.nb-site :is([data-fill="dark"],[data-fill="image"]) .btn--primary{background:var(--primary-ink);color:var(--primary);border-color:var(--primary-ink)}.nb-site :is([data-fill="dark"],[data-fill="image"]) .btn--primary:hover{background:color-mix(in srgb, var(--primary-ink) 88%, var(--primary));border-color:color-mix(in srgb, var(--primary-ink) 88%, var(--primary))}.nb-site :is([data-fill="dark"],[data-fill="image"]) .btn--ghost{color:var(--primary-ink);border-color:color-mix(in srgb, var(--primary-ink) 55%, transparent)}.nb-site :is([data-fill="dark"],[data-fill="image"]) .btn--ghost:hover{border-color:var(--primary-ink);background:color-mix(in srgb, var(--primary-ink) 10%, transparent)}.nb-site :is([data-fill="dark"],[data-fill="image"]) hr, .nb-site :is([data-fill="dark"],[data-fill="image"]) .rule{border-color:color-mix(in srgb, var(--primary-ink) 25%, var(--primary))}.nb-site [data-img]{position:relative;overflow:hidden;border-radius:var(--radius);background-size:cover;background-position:center}.nb-site [data-ph]{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(160deg, var(--tint), color-mix(in srgb, var(--primary) 16%, var(--bg)));color:var(--muted);font-size:var(--fs-1);font-weight:600;letter-spacing:.16em;text-transform:uppercase}.nb-site{--radius-btn:999px}.nb-site .sec-head{position:relative}.nb-site .sec-head::before{content:"";position:absolute;left:0;top:calc(-1 * clamp(1.4rem,3vw,2.25rem));width:2px;height:clamp(1.4rem,3vw,2.25rem);background:var(--accent)}.nb-site .sec-head--center::before{left:50%}.nb-site [data-fill="dark"] .sec-head::before{background:color-mix(in srgb, var(--primary-ink) 65%, var(--primary))}.nb-site .sc-hd{background:var(--bg);border-bottom:1px solid var(--line)}.nb-site .sc-hd__in{display:flex;align-items:center;justify-content:space-between;gap:clamp(1.25rem,3vw,2.5rem);padding-block:1.1rem}.nb-site .sc-hd__brand{font-family:var(--ff-heading);font-size:var(--fs-3);font-weight:600;letter-spacing:.01em;color:var(--ink);text-decoration:none;white-space:nowrap}.nb-site .sc-hd__nav{display:flex;flex-wrap:wrap;gap:1.6rem;margin-left:auto}.nb-site .sc-hd__nav a{color:var(--ink);font-size:var(--fs-1);font-weight:500;text-decoration:none;white-space:nowrap}.nb-site .sc-hd__nav a:hover{color:var(--primary-text);text-decoration:underline;text-underline-offset:5px}.nb-site .sc-hd__phone{font-size:var(--fs-1);padding:.7em 1.4em;white-space:nowrap}.nb-site .sc-hd--stacked .sc-hd__in{flex-wrap:wrap;row-gap:.85rem}.nb-site .sc-hd--stacked .sc-hd__brand{order:0}.nb-site .sc-hd--stacked .sc-hd__phone{order:1;margin-left:auto}.nb-site .sc-hd--stacked .sc-hd__nav{order:2;flex:1 1 100%;flex-wrap:wrap;gap:clamp(1rem,2.2vw,1.75rem);margin-left:0;justify-content:flex-start;border-top:1px solid var(--line);padding-top:.85rem}@media(max-width:1000px){.nb-site .sc-hd__nav{display:none}.nb-site .sc-hd--stacked .sc-hd__nav{display:none}.nb-site .sc-hd--stacked .sc-hd__in{row-gap:0}.nb-site .sc-hd--stacked .sc-hd__brand{border:0}}.nb-site .sc-ft{background:var(--tint);border-top:1px solid var(--line);padding-block:clamp(2.5rem,5vw,3.5rem) 1.25rem}/* THREE COLUMNS SIDE BY SIDE. The previous markup split "Vi dækker" across two sibling divs, the second with no heading, which wrapped onto its own row and dangled under the brand column. Each column is self-contained now, so a list cannot spill into its neighbour. */.nb-site .sc-ft__grid{display:grid;grid-template-columns:1.05fr .95fr 1.15fr;gap:clamp(1.75rem,3.5vw,3rem);align-items:start}.nb-site .sc-ft__col{min-width:0}.nb-site .sc-ft__h{font-family:var(--ff-heading);font-weight:500;font-size:var(--fs-2);color:var(--ink);margin:0 0 .7rem;line-height:1.25}.nb-site .sc-ft__h--sm{font-size:var(--fs-1);margin:1.35rem 0 .6rem;letter-spacing:.01em}.nb-site .sc-ft__lede{margin:-.35rem 0 .7rem;color:var(--muted);font-size:var(--fs-1);line-height:1.5}/* brand */.nb-site .sc-ft__col--brand{display:flex;flex-direction:column;align-items:flex-start}.nb-site .sc-ft__home{display:inline-block;width:max-content}.nb-site .sc-ft__logo{display:block;width:auto;height:clamp(32px,2.9vw,42px)}.nb-site .sc-ft__blurb{margin:.9rem 0 0;color:var(--muted);font-size:var(--fs-1);line-height:1.6;max-width:34ch}.nb-site .sc-ft__marks{display:flex;align-items:center;gap:1.1rem;margin:0;padding:0;list-style:none}/* multiply drops each mark's white box into the warm paper instead of stamping a white rectangle */.nb-site .sc-ft__mark{display:block;width:auto;mix-blend-mode:multiply}.nb-site .sc-ft__mark--branche{height:clamp(34px,3.2vw,44px)}/* ⚠ The smiley asset is a SCANNED LETTER (378x472) whose only recognisable part is the Arbejdstilsynet mark in its lower third. object-fit:cover cannot zoom far enough — it only ever crops to the image's short edge, which still left most of the badge full of unreadable body text. So the
  • is a fixed clipping window and the image is scaled + offset so the mark alone fills it. The numbers are MEASURED, not eyeballed — a canvas scan for saturated-green pixels puts the disc at 131x131 starting (220,319) in the 378x472 scan, i.e. centred at 75.5%/81.5% (an eyeball estimate had the x 17 points out). Scaling the disc to 40px inside a 48px window gives width 115px and centres it at (87,117), so the offsets below are 24-87 and 24-117. Re-measure if the asset is ever replaced. */.nb-site .sc-ft__badge{position:relative;flex:0 0 auto;width:48px;height:48px;overflow:hidden;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}.nb-site .sc-ft__mark--smiley{position:absolute;left:-63px;top:-93px;width:115px;height:auto;max-width:none;mix-blend-mode:normal}/* afdelinger — the reason someone opens a funeral home's footer at 3am */.nb-site .sc-ft__depts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.95rem}.nb-site .sc-ft__dept{display:flex;flex-direction:column;gap:.05rem;min-width:0}.nb-site .sc-ft__dept-name{color:var(--ink);text-decoration:none;font-size:var(--fs-1);font-weight:600;line-height:1.35}.nb-site .sc-ft__dept-name:hover,.nb-site .sc-ft__dept-name:focus{color:var(--primary-text);text-decoration:underline;text-underline-offset:3px}.nb-site .sc-ft__dept-adr{color:var(--muted);font-size:.8rem;line-height:1.45}.nb-site .sc-ft__dept-tel{margin-top:.12rem;display:inline-flex;align-items:baseline;gap:.5ch;width:max-content;text-decoration:none;color:var(--primary-text)}.nb-site .sc-ft__tel-lbl{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}/* tabular-nums so three stacked numbers align digit-for-digit */.nb-site .sc-ft__tel-num{font-family:var(--ff-heading);font-size:var(--fs-2);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.2}.nb-site .sc-ft__dept-tel:hover .sc-ft__tel-num,.nb-site .sc-ft__dept-tel:focus .sc-ft__tel-num{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}/* områder — CSS columns balance the list themselves; the full "Bedemand i X" stays as the anchor text (it is the SEO value) on ONE line, which is what keeps this column short. */.nb-site .sc-ft__areas{list-style:none;margin:0;padding:0;columns:2;column-gap:1.5rem}.nb-site .sc-ft__areas li{break-inside:avoid;margin:0 0 .38rem}.nb-site .sc-ft__areas a{display:block;color:var(--muted);text-decoration:none;font-size:.83rem;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nb-site .sc-ft__areas a:hover,.nb-site .sc-ft__areas a:focus{color:var(--primary-text);text-decoration:underline;text-underline-offset:3px}.nb-site .sc-ft__bot{margin-top:clamp(1.75rem,3.5vw,2.5rem);padding-top:1.1rem;border-top:1px solid var(--line);font-size:var(--fs-1);color:var(--muted)}@media(max-width:900px){.nb-site .sc-ft__grid{grid-template-columns:1fr 1fr;gap:2rem}.nb-site .sc-ft__col--brand{grid-column:1 / -1}.nb-site .sc-ft__marks{gap:1rem}}/* Touch tap targets. The phone number is the single most important thing to hit in a funeral home's footer and it measured 108x23 — well under the 44px minimum. Keyed on `pointer:coarse` rather than a width breakpoint, so a tablet gets it too and the desktop footer stays compact. */@media(pointer:coarse){.nb-site .sc-ft__dept-tel{min-height:44px;align-items:center}.nb-site .sc-ft__areas a{padding-block:.32rem}.nb-site .sc-ft__dept-name{padding-block:.15rem}}@media(max-width:560px){.nb-site .sc-ft__grid{grid-template-columns:1fr}.nb-site .sc-ft__areas{columns:2}}.nb-site .sc-hero-overlay{position:relative;display:flex;align-items:flex-end}.nb-site .sc-hero-overlay__bg{position:absolute;inset:0;border-radius:0}.nb-site .sc-hero-overlay__scrim{position:absolute;inset:0;background:linear-gradient(96deg, rgb(from var(--ink) r g b / .88) 0%, rgb(from var(--ink) r g b / .64) 46%, rgb(from var(--ink) r g b / .12) 80%)}.nb-site .sc-hero-overlay__wrap{position:relative;width:100%}.nb-site .sc-hero-overlay__copy{max-width:36rem;color:var(--surface)}.nb-site .sc-hero-overlay__copy :is(h1,p,.lead,.eyebrow){color:var(--surface)}.nb-site .sc-hero-overlay__copy .sec-head{margin-bottom:0}.nb-site .sc-hero-overlay__cta{margin-top:2rem}.nb-site .sc-hero-overlay{min-height:clamp(32rem,74vh,44rem)}@media(max-width:860px){.nb-site .sc-hero-overlay{min-height:78vh}.nb-site .sc-hero-overlay__scrim{background:linear-gradient(180deg, rgb(from var(--ink) r g b / .30) 0%, rgb(from var(--ink) r g b / .84) 62%)}}.nb-site .sc-about-statement__in{text-align:center}.nb-site .sc-about-statement__in .sec-head{margin-bottom:1.4rem}.nb-site .sc-about-statement__body{font-size:var(--fs-3);line-height:1.65;font-family:var(--ff-heading)}.nb-site .sc-about-statement__cta{margin-top:2rem}.nb-site .sc-svc-cards__grid{display:grid;gap:var(--gap)}.nb-site .sc-svc-cards__grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.nb-site .sc-svc-cards__grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.nb-site .sc-svc-cards__grid.cols-3>:first-child{grid-column:span 2}.nb-site .sc-svc-cards__card{display:flex;flex-direction:column;gap:.7rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.25rem)}.nb-site .sc-svc-cards__card p{color:var(--muted);flex:1}@media(max-width:860px){.nb-site .sc-svc-cards__grid.cols-2, .nb-site .sc-svc-cards__grid.cols-3{grid-template-columns:1fr}.nb-site .sc-svc-cards__grid.cols-3>:first-child{grid-column:auto}}.nb-site .sc-more{font-weight:600;font-size:var(--fs-1);letter-spacing:.05em;color:var(--primary-text);text-decoration:none;white-space:nowrap}.nb-site .sc-more:hover{text-decoration:underline;text-underline-offset:4px}.nb-site .sc-staff-grid__grid{display:grid;gap:calc(var(--gap) * 1.2) var(--gap)}.nb-site .sc-staff-grid__grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.nb-site .sc-staff-grid__grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.nb-site .sc-staff-grid__grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.nb-site .sc-staff-grid__photo{aspect-ratio:3/4;margin-bottom:1rem}.nb-site .sc-staff-grid__person h3{font-size:var(--fs-3)}.nb-site .sc-staff-grid__role{display:block;margin-top:.25rem;font-size:var(--fs-1);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}@media(min-width:861px){.nb-site .sc-staff-grid__grid>:nth-child(even){margin-top:2.25rem}}@media(max-width:860px){.nb-site .sc-staff-grid__grid.cols-3, .nb-site .sc-staff-grid__grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.nb-site .sc-staff-grid__grid.cols-2, .nb-site .sc-staff-grid__grid.cols-3, .nb-site .sc-staff-grid__grid.cols-4{grid-template-columns:1fr}}.nb-site .sc-areas__list{columns:3;column-gap:clamp(2rem,5vw,4rem);list-style:none;margin:0;padding:0;max-width:56rem}.nb-site .sc-areas__list li{padding-block:.45rem;border-bottom:1px solid var(--line);break-inside:avoid}.nb-site .sc-areas__list a{text-decoration:none;color:var(--ink)}.nb-site .sc-areas__list a:hover{color:var(--primary-text);text-decoration:underline;text-underline-offset:4px}@media(max-width:760px){.nb-site .sc-areas__list{columns:2}}@media(max-width:520px){.nb-site .sc-areas__list{columns:1}}.nb-site .sc-tst-cards__grid{display:grid;gap:var(--gap)}.nb-site .sc-tst-cards__grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.nb-site .sc-tst-cards__grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.nb-site .sc-tst-cards__q{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.25rem)}@media(min-width:861px){.nb-site .sc-tst-cards__grid>:nth-child(even){margin-top:2rem}}@media(max-width:860px){.nb-site .sc-tst-cards__grid.cols-2, .nb-site .sc-tst-cards__grid.cols-3{grid-template-columns:1fr}}.nb-site .sc-tst-cards__q{margin:0}.nb-site .sc-tst-cards__q blockquote{margin:0;font-family:var(--ff-heading);font-size:var(--fs-3);line-height:1.5}.nb-site .sc-tst-cards__q figcaption{margin-top:1rem;font-size:var(--fs-1);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.nb-site .nb-site-cta{background:var(--primary);color:var(--primary-ink);text-align:center}.nb-site .nb-site-cta__in{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}.nb-site .nb-site-cta__eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:700;opacity:.75;margin:0 0 .5rem}.nb-site .nb-site-cta__title{font-family:var(--ff-heading);font-weight:500;font-size:var(--fs-5,1.9rem);line-height:1.15;margin:0 0 1.05rem;color:var(--primary-ink)}.nb-site .nb-site-cta__body{max-width:54ch;margin:0 auto 1.75rem;opacity:.92;line-height:1.6}.nb-site .nb-site-cta__row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}.nb-site .nb-site-cta .btn--primary{background:var(--primary-ink);color:var(--primary);border-color:var(--primary-ink)}.nb-site .nb-site-cta .btn--ghost{background:transparent;color:var(--primary-ink);border-color:rgba(255,255,255,.55)}.nb-site [data-img="hero"]{background-image:url("/wp-content/uploads/sites/2/2026/07/frontbanner-junit-2023-web-669.jpg");background-size:cover;background-position:center;}.nb-site [data-img="hero"] [data-ph]{display:none}.nb-site [data-img="hero"]>*:not([class*="scrim"]):not([class*="overlay"]){background-color:transparent;background-image:none}.nb-site [data-img="staff.0"]{background-image:url("/wp-content/uploads/sites/2/2026/07/christina-gauguin-elholm-begravelse-11.jpg");background-size:cover;background-position:center;}.nb-site [data-img="staff.0"] [data-ph]{display:none}.nb-site [data-img="staff.0"]>*:not([class*="scrim"]):not([class*="overlay"]){background-color:transparent;background-image:none}.nb-site [data-img="staff.1"]{background-image:url("/wp-content/uploads/sites/2/2026/07/lone-andersen-elholm-begravelse-11.jpg");background-size:cover;background-position:center;}.nb-site [data-img="staff.1"] [data-ph]{display:none}.nb-site [data-img="staff.1"]>*:not([class*="scrim"]):not([class*="overlay"]){background-color:transparent;background-image:none}.nb-site [data-img="staff.2"]{background-image:url("/wp-content/uploads/sites/2/2026/07/marianne-hoejer-elholm-begravelse-11.jpg");background-size:cover;background-position:center;}.nb-site [data-img="staff.2"] [data-ph]{display:none}.nb-site [data-img="staff.2"]>*:not([class*="scrim"]):not([class*="overlay"]){background-color:transparent;background-image:none}.nb-site [data-img="staff.3"]{background-image:url("/wp-content/uploads/sites/2/2026/07/phillip-kongstad-elholm-begravelse-11.jpg");background-size:cover;background-position:center;}.nb-site [data-img="staff.3"] [data-ph]{display:none}.nb-site [data-img="staff.3"]>*:not([class*="scrim"]):not([class*="overlay"]){background-color:transparent;background-image:none}.nb-site [data-img="facility.0"]{background-image:url("/wp-content/uploads/sites/2/2026/07/om-elholmbegravelse-21.jpg");background-size:cover;background-position:center;}.nb-site [data-img="facility.0"] [data-ph]{display:none}.nb-site [data-img="facility.0"]>*:not([class*="scrim"]):not([class*="overlay"]){background-color:transparent;background-image:none}.nb-site [data-img="gallery.2"]{background-image:url("/wp-content/uploads/sites/2/2026/07/doedsannoncer-elholm-begravelse.jpg");background-size:cover;background-position:center;}.nb-site [data-img="gallery.2"] [data-ph]{display:none}.nb-site [data-img="gallery.2"]>*:not([class*="scrim"]):not([class*="overlay"]){background-color:transparent;background-image:none}.nb-site [data-img="gallery.3"]{background-image:url("/wp-content/uploads/sites/2/2026/07/anmeld-doedsfald-online-frontbox.jpg");background-size:cover;background-position:center;}.nb-site [data-img="gallery.3"] [data-ph]{display:none}.nb-site [data-img="gallery.3"]>*:not([class*="scrim"]):not([class*="overlay"]){background-color:transparent;background-image:none}.nb-site [data-img="gallery.4"]{background-image:url("/wp-content/uploads/sites/2/2026/07/min-sidste-vilje-frontbox.jpg");background-size:cover;background-position:center;}.nb-site [data-img="gallery.4"] [data-ph]{display:none}.nb-site [data-img="gallery.4"]>*:not([class*="scrim"]):not([class*="overlay"]){background-color:transparent;background-image:none}.nb-site [data-img="gallery.5"]{background-image:url("/wp-content/uploads/sites/2/2026/07/hjaelp-ved-doedsfald-frontbox.jpg");background-size:cover;background-position:center;}.nb-site [data-img="gallery.5"] [data-ph]{display:none}.nb-site [data-img="gallery.5"]>*:not([class*="scrim"]):not([class*="overlay"]){background-color:transparent;background-image:none}.nb-site [data-img="gallery.6"]{background-image:url("/wp-content/uploads/sites/2/2026/07/christina-bededame-elholm-begravelse.jpg");background-size:cover;background-position:center;}.nb-site [data-img="gallery.6"] [data-ph]{display:none}.nb-site [data-img="gallery.6"]>*:not([class*="scrim"]):not([class*="overlay"]){background-color:transparent;background-image:none}.nb-site [data-img="gallery.7"]{background-image:url("/wp-content/uploads/sites/2/2026/07/lone-bededame-elholm-begravelse.jpg");background-size:cover;background-position:center;}.nb-site [data-img="gallery.7"] [data-ph]{display:none}.nb-site [data-img="gallery.7"]>*:not([class*="scrim"]):not([class*="overlay"]){background-color:transparent;background-image:none}.nb-site [data-img="gallery.8"]{background-image:url("/wp-content/uploads/sites/2/2026/07/marianne-bededame-elholm-begravelse.jpg");background-size:cover;background-position:center;}.nb-site [data-img="gallery.8"] [data-ph]{display:none}.nb-site [data-img="gallery.8"]>*:not([class*="scrim"]):not([class*="overlay"]){background-color:transparent;background-image:none}.nb-site [data-img="gallery.9"]{background-image:url("/wp-content/uploads/sites/2/2026/07/phillip-kongstad-elholm-begravelse.png");background-size:cover;background-position:center;}.nb-site [data-img="gallery.9"] [data-ph]{display:none}.nb-site [data-img="gallery.9"]>*:not([class*="scrim"]):not([class*="overlay"]){background-color:transparent;background-image:none}.nb-site [data-img="gallery.11"]{background-image:url("/wp-content/uploads/sites/2/2026/07/elholm-begravelse-hellerup-groen-smiley-arbejdstilsynet.jpg");background-size:cover;background-position:center;}.nb-site [data-img="gallery.11"] [data-ph]{display:none}.nb-site [data-img="gallery.11"]>*:not([class*="scrim"]):not([class*="overlay"]){background-color:transparent;background-image:none}.nb-site [data-img="gallery.12"]{background-image:url("/wp-content/uploads/sites/2/2026/07/samtalen-elholm-begravelse-9.jpg");background-size:cover;background-position:center;}.nb-site [data-img="gallery.12"] [data-ph]{display:none}.nb-site [data-img="gallery.12"]>*:not([class*="scrim"]):not([class*="overlay"]){background-color:transparent;background-image:none}.nb-site [data-img="gallery.13"]{background-image:url("/wp-content/uploads/sites/2/2026/07/brancheautoriseret-bedemand.png");background-size:cover;background-position:center;}.nb-site [data-img="gallery.13"] [data-ph]{display:none}.nb-site [data-img="gallery.13"]>*:not([class*="scrim"]):not([class*="overlay"]){background-color:transparent;background-image:none} /* bespoke cpt: nbseo_location */ .nb-cpt-bespoke{--sp-band:clamp(3rem,6vw,4.5rem);--sp-head:clamp(1.75rem,3vw,2.25rem);--gap:clamp(1.25rem,2vw,1.75rem)} .nb-cpt-bespoke .nbx-wrap{max-width:72.5rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)} .nb-cpt-bespoke .nbx-wrap--narrow{max-width:48rem} .nb-cpt-bespoke .nbx-band{padding-block:var(--sp-band)} /* section head */ .nb-cpt-bespoke .nbx-head{max-width:46rem;margin-bottom:var(--sp-head);position:relative} .nb-cpt-bespoke .nbx-head--center{margin-inline:auto;text-align:center} .nb-cpt-bespoke .nbx-eyebrow{display:block;font-family:var(--ff-body);font-size:var(--fs-1);font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.9rem} .nb-cpt-bespoke .nbx-head h2{font-family:var(--ff-heading);font-weight:500;font-size:var(--fs-5);line-height:1.15} .nb-cpt-bespoke .nbx-lead{font-size:var(--fs-3);line-height:1.6;margin-top:1rem} /* A short HORIZONTAL rule above the eyebrow, matching how the front page opens a section. This was a 2px x 36px VERTICAL bar floating above each heading, which read as a stray pipe rather than a divider and appeared on CPT pages only. Kept as a rule (not deleted) so each band still has an opening mark. */.nb-cpt-bespoke .nbx-head::before{content:"";position:absolute;left:0;top:calc(-1 * clamp(.85rem,1.8vw,1.25rem));width:clamp(28px,3vw,40px);height:2px;background:var(--primary);opacity:.5} .nb-cpt-bespoke .nbx-head--center::before{left:50%} /* editorial fill */ .nb-cpt-bespoke .nbx-prose{font-size:var(--fs-2);line-height:1.7} .nb-cpt-bespoke .nbx-prose h3{font-family:var(--ff-heading);font-weight:500;font-size:var(--fs-3);line-height:1.2;margin-top:1.75rem;margin-bottom:.5rem} .nb-cpt-bespoke .nbx-prose h3:first-child{margin-top:0} .nb-cpt-bespoke .nbx-prose h4{font-family:var(--ff-heading);font-weight:600;font-size:var(--fs-2);margin-top:1.25rem;margin-bottom:.35rem} .nb-cpt-bespoke .nbx-prose p{margin:0} .nb-cpt-bespoke .nbx-prose p+p{margin-top:1em} .nb-cpt-bespoke .nbx-prose ul{margin:1em 0 0;padding-left:1.2em;display:flex;flex-direction:column;gap:.4rem} .nb-cpt-bespoke .nbx-prose li{padding-left:.25rem} /* two-column editorial card layout for services sections */ .nb-cpt-bespoke .nbx-card-fill{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.5rem)} /* coverage feature layout */ .nb-cpt-bespoke .nbx-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,4vw,3rem);align-items:start} @media(max-width:860px){.nb-cpt-bespoke .nbx-split{grid-template-columns:1fr}} /* closing contact band */ .nb-cpt-bespoke .nbx-contact{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(1.75rem,4vw,3rem);align-items:center} @media(max-width:860px){.nb-cpt-bespoke .nbx-contact{grid-template-columns:1fr}} .nb-cpt-bespoke .nbx-contact-card{border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.25rem)} .nb-cpt-bespoke .nbx-contact-card h4{font-family:var(--ff-heading);font-weight:600;font-size:var(--fs-2);margin:0 0 .8rem} .nb-cpt-bespoke .nbx-contact-card dl{margin:0;display:flex;flex-direction:column;gap:.7rem} .nb-cpt-bespoke .nbx-contact-card dt{font-size:var(--fs-1);letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:.15rem} .nb-cpt-bespoke .nbx-contact-card dd{margin:0;line-height:1.5} /* hero inner layout only */ .nb-cpt-bespoke [data-section="hero"] .nbx-hero-copy{max-width:38rem} .nb-cpt-bespoke [data-section="hero"] .nbx-hero-cta{margin-top:2rem} .nb-cpt-bespoke [data-section="hero"] h1{font-family:var(--ff-heading);font-weight:500;font-size:var(--fs-6);line-height:1.12;margin:.4rem 0 0} .nb-cpt-bespoke [data-section="hero"] .nbx-eyebrow{margin-bottom:0} .nb-cpt-bespoke [data-section="hero"] .nbx-hero-lead{font-size:var(--fs-3);line-height:1.55;margin-top:1rem;max-width:32rem} /* ── area (by-side) related departments ─────────────────────────────────────────── *//* {{related}} ships its own

    heading; the band already has an

    , so hide the inner one rather than dropping the token (the markup comes from PageRender, not from this template). */.nb-cpt-bespoke .nbx-area-related .nb-related>h4{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.nb-cpt-bespoke .nbx-area-related .nb-related__links{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:clamp(.75rem,2vw,1.15rem)}/* Each nearest department becomes a card, not a bare link: on an area page it is the proof that somebody is actually near you, and the thing worth clicking. */.nb-cpt-bespoke .nbx-area-related .nb-related__links a{display:flex;align-items:center;gap:.7rem;min-height:64px;padding:1rem 1.15rem;background:var(--bg);border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);font-weight:600;line-height:1.35;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}.nb-cpt-bespoke .nbx-area-related .nb-related__links a::before{content:'';flex:0 0 auto;width:8px;height:8px;border-radius:999px;background:var(--primary);opacity:.55}.nb-cpt-bespoke .nbx-area-related .nb-related__links a:hover,.nb-cpt-bespoke .nbx-area-related .nb-related__links a:focus-visible{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.07)}@media(prefers-reduced-motion:reduce){.nb-cpt-bespoke .nbx-area-related .nb-related__links a{transition:none}.nb-cpt-bespoke .nbx-area-related .nb-related__links a:hover{transform:none}} /* ══════════════════════════════════════════════════════════════════════════════ HAND-MAINTAINED — Jesper's design review, 2026-08-13. See docs/elholm-theme-feedback-plan.md. This theme is OWNED (nb-handover): edited directly, never regenerated. Everything below is appended so it is reviewable as a block and wins by source order over the generated rules above. ══════════════════════════════════════════════════════════════════════════════ */ /* T1 — hero CTA was dark-on-dark. `.btn--primary` is --primary (#4D4949) and the hero scrim runs to 84% --ink (#2C2C2E) on mobile → ~1.6:1; the button vanished. The inversion already exists for dark/image bands, but the front-page hero is stamped data-fill="base", so it never fired. Extending by class rather than restamping the band: data-fill="image" would also swap rhythm.css's padding-block to --space-xxl and change the hero's proportions, which is outside what was asked. Mirrors the existing `.nb-site .nb-site-cta .btn--primary` precedent. */ .nb-site .sc-hero-overlay .btn--primary{background:var(--primary-ink);color:var(--primary);border-color:var(--primary-ink)} .nb-site .sc-hero-overlay .btn--primary:hover{background:color-mix(in srgb, var(--primary-ink) 88%, var(--primary));border-color:color-mix(in srgb, var(--primary-ink) 88%, var(--primary))} /* T4 — the eyebrow's horizontal accent. Jesper: it earns its place when several parts share ONE background (chapter marks), but when the band colour already changes it is a second divider saying the same thing, and it disturbs the eye. Every band on this site changes fill, so it is off by default — kept as an opt-in modifier rather than deleted, for a long same-fill section that genuinely needs internal marks. */ .nb-cpt-bespoke .nbx-head::before{content:none} .nb-cpt-bespoke .nbx-head--rule::before{content:"";position:absolute;left:0;top:calc(-1 * clamp(.85rem,1.8vw,1.25rem));width:clamp(28px,3vw,40px);height:2px;background:var(--primary);opacity:.5} .nb-cpt-bespoke .nbx-head--rule.nbx-head--center::before{left:50%} /* T9 — footer phone numbers sat off the baseline (old-style figures). Root cause was that --ff-heading names Fraunces but Fraunces was never bundled, so headings fell back to Georgia, whose old-style digits are its DEFAULT glyphs — `tabular-nums` alone cannot fix that, there is no lining alternate to switch to. Fraunces is now self-hosted (theme.json); `lining-nums` is declared explicitly so the numbers stay on the baseline regardless of which family ends up resolving. */ .nb-site .sc-ft__tel-num{font-variant-numeric:lining-nums tabular-nums} /* T2 — the hero photo is now a real (was a CSS background box). `.sc-hero-overlay__bg` already carries position:absolute;inset:0 from the generated rules above; an needs to be told to fill that box. Same visual result on desktop, but with an alt, a filename and a title that Google can read — and it prints. */ .nb-site img.sc-hero-overlay__bg{width:100%;height:100%;object-fit:cover;object-position:50% 35%} /* T5 — "Bedemand i" moved INSIDE the h1 on area pages, so it is part of the heading Google reads. It keeps the eyebrow's look; the only change is that the gap to the title is now the span's own margin rather than the h1's margin-top, and the h1's line-height must not apply to it. */ .nb-cpt-bespoke [data-section="hero"] h1 .nbx-eyebrow--inh1{display:block;font-size:var(--fs-1);font-weight:600;line-height:1.3;margin:0 0 .4rem} /* T6 — the staff section was a dead end: nothing to click, no way to reach a person. The name now links to that person's own page (a real internal link with real anchor text) and each card carries a phone CTA. Job word is "bedemand" for everyone for now. */ .nb-site .sc-staff-grid__name{color:inherit;text-decoration:none} .nb-site .sc-staff-grid__name:hover,.nb-site .sc-staff-grid__name:focus-visible{color:var(--primary-text);text-decoration:underline;text-underline-offset:4px} .nb-site .sc-staff-grid__cta{margin-top:.9rem;font-size:var(--fs-1);padding:.6em 1.2em} /* ── FONTS ARE OWNED BY ACSS, NOT BY THIS FILE (2026-08-14) ───────────────────────── Previously this stylesheet declared its own --ff-heading/--ff-body literals, a parallel token set that only reached what the design itself scopes (.nb-site / .nb-cpt-bespoke). ACSS already ships a global `h1,h2,…{font-family:var(--heading-font-family)}` and the base theme's content.css reads --nb-heading-font / --nb-body-font — neither of which the design ever set. Result: the front page got the design's fonts and every standalone page fell through to Georgia / system-ui. Now there is ONE source: the ACSS setting (heading-font-family / text-font-family). Both the design's own tokens and the base theme's bridge tokens alias it, so changing the font is a single ACSS change and every heading on every tier follows. ⚠ Quote family names in the ACSS setting. `font-family: Source Sans 3` (unquoted) is INVALID CSS — `3` is not a valid identifier — so the whole declaration is dropped and the browser falls back to Times. Both settings now carry quotes and a fallback stack. */ :root{ --ff-heading: var(--heading-font-family, Georgia, serif); --ff-body: var(--text-font-family, system-ui, sans-serif); --nb-heading-font: var(--ff-heading); /* nembedemand-base/content.css reads these … */ --nb-body-font: var(--ff-body); /* … for standalone pages (.nb-content) */ } /* …and the same at .nb-site, which re-declares both tokens further up and would otherwise shadow the :root aliases for everything inside the design's own chrome. */ .nb-site{ --ff-heading: var(--heading-font-family, Georgia, serif); --ff-body: var(--text-font-family, system-ui, sans-serif); } /* ── ONE BUTTON, DRIVEN BY ACSS TOKENS (2026-08-14) ───────────────────────────────── Three different `.btn` renderings were live on the same page: ACSS `[class*="btn--"]` 18px / weight 400 / 2px border ← generic CPT tier design `.nb-site .btn` 18px / weight 600 / 1px border ← front page + bespoke CPT content.css `.nb-site-cta .btn` 15.2px / 600 ← the closing band because the generic CPT tier renders OUTSIDE `.nb-site`, so the design's fork never reached it and those buttons fell through to ACSS's defaults. Per the Design-System Constitution (rule 2: one `.btn`, driven by ACSS button tokens, never a fork) the ACSS settings now carry the design's own button values, and this rule binds the design's button to those same tokens instead of restating them. Change a button anywhere on the fleet by changing the ACSS setting — not this file. (font-size is not bound: ACSS applies its button size as a clamp() in the rule itself and exposes no --btn-font-size var. --fs-2 → --text-m is the same 16→18px ramp.) */ .nb-site .btn{ padding: var(--btn-padding-block) var(--btn-padding-inline); border-width: var(--btn-border-width); border-style: var(--btn-border-style); font-weight: var(--btn-font-weight); line-height: var(--btn-line-height); } /* ── Vejledning cards: whole card clickable (ACSS `.clickable-parent`) ────────────── Jesper's parent-click idea. ACSS 3.3.6 ships the utility: `.clickable-parent` gives its DIRECT child an `::after{position:absolute;inset:0}` overlay. But ACSS forces the marked element to `position:static`, so the overlay resolves against the nearest POSITIONED ancestor — the card has to supply that itself, or the hit area escapes to the whole section. This rule is (0,2,0), ACSS's `.clickable-parent:not(a)` is (0,1,1), so it wins. `.focus-parent` (also ACSS) puts the focus ring on the card for keyboard users, since the real focus target is the small "Læs mere om …" link inside it. */ .nb-site .sc-svc-cards__card{position:relative} /* ── Staff single (cpt-tpl-nbseo_staff.html) ────────────────────────────────────── One band, everything beside the portrait: name, role, the bio prose and the actions. The bio used to sit in a second "Mennesket bag" band, which read thin — two or three short paragraphs alone in a full-width section. */ .nb-cpt-bespoke .nbx-person{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:clamp(1.75rem,4vw,3.25rem);align-items:start} @media(max-width:860px){.nb-cpt-bespoke .nbx-person{grid-template-columns:1fr;justify-items:start}} .nb-cpt-bespoke .nbx-person__photo{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 25%;border-radius:var(--radius)} .nb-cpt-bespoke .nbx-person__copy{max-width:42rem} .nb-cpt-bespoke .nbx-person__copy h1{font-family:var(--ff-heading);font-weight:500;font-size:var(--fs-6);line-height:1.12;margin:.3rem 0 0} .nb-cpt-bespoke .nbx-person__role{font-size:var(--fs-3);line-height:1.5;color:var(--muted);margin:.7rem 0 0} .nb-cpt-bespoke .nbx-person__bio{margin-top:1.4rem} .nb-cpt-bespoke .nbx-person__bio p{margin:0 0 .9rem;line-height:1.7} .nb-cpt-bespoke .nbx-person__bio p:last-child{margin-bottom:0} /* The body's auto-injected mid-CTA is redundant here: the person's own phone button sits a few lines below it in the same block, so the page would ask twice in one screenful. */ .nb-cpt-bespoke .nbx-person__bio .nb-midcta{display:none} .nb-cpt-bespoke .nbx-person__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem} /* ══════════════════════════════════════════════════════════════════════════════════════════════ FOLDED IN FROM uploads/nb-client/overrides.css — 2026-08-22 These rules lived in wp-content/uploads/sites/2/nb-client/overrides.css, a per-site stylesheet the parent theme enqueued LAST so client tweaks could survive a re-migration that rebuilt the generated theme. That protection has no job on an OWNED theme: nothing in the post-acceptance flow regenerates one. ship-to-prod.sh explicitly never touches theme files, /deploy pushes FROM this repo, /ship is ChangeSets, and reset-migrated.sh is a BUILD-stage tool used before handover. So the file was not a safety net — it was a second home for the design, outside git, winning by cascade order, with no history explaining any rule. Jesper's own eyebrow decision from his 2026-08-14 review was living there. Appended verbatim and in order: overrides.css loaded immediately after this file with nothing in between (verified on the live page), so the cascade is unchanged. ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* Eyebrow accent — OFF as of 2026-08-14 (Jesper's review, T4). His rule: the accent is a chapter mark. It earns its place when several parts share ONE background; when the band colour already changes it is a second divider saying the same thing, and it disturbs the eye. Every section on the front page changes fill (base→tint→base→warm→ tint→brand), so it earns nothing anywhere here. Turned off rather than deleted: the shaping below is kept on a `--rule` modifier for a long same-fill section that genuinely needs internal marks. (Same treatment for the CPT twin, `.nb-cpt-bespoke .nbx-head::before`, in the theme's design.css.) The shape itself: a short horizontal rule IN FLOW. design.css ships a 2px-wide, ~2rem-tall vertical bar positioned absolute with a negative top, so it protruded UP into the section's top padding and made the top rhythm read smaller than the bottom. Static + margin-bottom puts the section's padding-top ABOVE the accent, so top and bottom insets are visually equal. */ .nb-site .sec-head::before{ content: none; } .nb-site .sec-head--rule::before{ content: ""; position: static; display: block; width: clamp(1.75rem, 3vw, 2.5rem); /* the LENGTH of the line */ height: 2px; /* the THICKNESS */ margin: 0 0 0.85rem; /* gap between the accent and the eyebrow text */ inset: auto; transform: none; background: var(--primary); opacity: .5; } .nb-site .sec-head--rule.sec-head--center::before{ margin-inline: auto; } /* Desktop header nav = ONE row, never wrapped. Two coordinated moves: (a) tighten the gap (beats design.css's `.nb-site .sc-hd--stacked .sc-hd__nav`, matched + loaded later); (b) this site's menu has ~10 top-level items, which only fit a single row above ~1150px — so raise the desktop↔burger breakpoint from the engine default (1000px) to 1150px: below that the burger + drawer take over (the SAME nb-primary menu), above it the bar shows one clean row. A light font trim in the 1150–1300 transition band keeps it on one row right at the handover. */ .nb-site .sc-hd--stacked .sc-hd__nav, .nb-site .sc-hd__nav{ gap: clamp(10px, 1vw, 16px); } @media(max-width:1150px){ .nb-site .sc-hd__nav{ display: none; } .nb-burger{ display: inline-flex; } } @media(min-width:1151px) and (max-width:1300px){ .nb-site .sc-hd__nav a{ font-size: 15px; letter-spacing: 0; } } /* Bespoke CTA box injected BESIDE the "Mindesamvær" card in the "Vejledning" grid (Mindesamvær sits alone in the last row → two empty cells beside it). Rendered as a grid item spanning those 2 columns (full width on mobile). Injected via uploads/nb-client/inserts.json. */ .nb-site .sc-svc-cards__grid .nb-client-cta{ grid-column: span 2; display:flex; flex-direction:column; justify-content:center; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); } .nb-site .nb-client-cta h3{ font-size: var(--fs-4, 1.5rem); margin: .3rem 0 .5rem; } .nb-site .nb-client-cta > p{ color: var(--muted); margin: 0; max-width: 44ch; } .nb-site .nb-client-cta__row{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top: 1.3rem; } @media(max-width:860px){ .nb-site .sc-svc-cards__grid .nb-client-cta{ grid-column: auto; } } /* Generic CPT single: the photo column ran ~270px taller than the meta column, leaving a dead well beside it. Top-align the row and cap the portrait so the two columns balance. */ .nb-single__grid { align-items: start; } .nb-single__ph { max-height: 28rem; } /* ──────────────────────────────────────────────────────────────────────────── MOBILE TIGHTENING (2026-07). Turns down whitespace on ≤768px. --rhythm-* are rhythm.css-local vars (safe to redefine, not ACSS --space-*). Loads last → wins by cascade, no !important. Candidate for promotion into rhythm.css/base later. ──────────────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { :root { --rhythm-inset: clamp(30px, 8.5vw, 42px); /* band top/bottom: was ~43px, tightened but not cramped */ --rhythm-gap: clamp(20px, 5.5vw, 28px); /* transparent↔band edge */ } .nb-site [data-bleed][data-fill="image"], .nb-cpt [data-bleed][data-fill="image"] { padding-block: clamp(26px, 9vw, 42px); } /* …but a STACKED image band starts WITH the photo, so an inset above it is a gap between the breadcrumb and the picture, not rhythm (Jesper, 2026-08-14: "der er en regel (padding-block: var(--rhythm-inset)), som giver ekstra padding i toppen"). content.css already sets padding-top:0 for this case; that rule and the one above have equal specificity, and this file loads last — so the exclusion has to be restated here. */ .nb-cpt .nb-content .nb-section.has-bg-image, .nb-content .nb-section.has-bg-image { padding-top: 0; } .nb-site .sc-hero-overlay { gap: clamp(12px, 3.5vw, 18px); } /* hero element gap: was 43px */ /* ── T2 (2026-08-14) — MOBILE HERO STACKS instead of overlaying ────────────────── Jesper: "billedet forsvinder på mobil" and "det der med tekst ovenpå ansigter … det er ikke så godt". Both were true and had the same cause: at ≤860px the scrim ramps to 84% --ink by 62% down, and the copy sits on top of the staff's faces — so the photo is simultaneously covered by text and washed out. Lightening the scrim would fix the wash but leave text on faces. Stacking fixes both: the photo gets its own band at full brightness, the copy sits below it on paper. The overlay treatment is kept for ≥769px, where there is room beside the subject for the text to live. NOTE this block must live HERE, not in the theme's design.css: overrides.css loads last, so a design.css rule at equal specificity would lose to the mobile tightening rules around it. */ .nb-site .sc-hero-overlay { display: block; min-height: 0; background: var(--bg); } .nb-site .sc-hero-overlay__bg { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 65% 40%; /* the faces sit right-of-centre in the 1280×555 source */ } .nb-site .sc-hero-overlay__scrim { display: none; } .nb-site .sc-hero-overlay__wrap { padding-block: clamp(20px, 6vw, 32px); } /* copy is on paper now, not on a dark photo — undo the light-on-dark treatment … */ .nb-site .sc-hero-overlay__copy { max-width: none; color: var(--ink); } .nb-site .sc-hero-overlay__copy :is(h1, p, .lead, .eyebrow) { color: var(--ink); } /* … including the T1 button inversion, which exists for the dark overlay only. */ .nb-site .sc-hero-overlay .btn--primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); } .nb-site .sc-staff-grid__grid, .nb-site .sc-ft__grid { gap: 16px; } /* stacked cards */ .nb-site .sc-staff-grid__grid.cols-4 { grid-template-columns: 1fr 1fr; } /* staff 2×2 on mobile (beats design's ≤520 .cols-4→1col) */ /* de-double the horizontal gutter: section (~21px) + inner .wrap (20px) = 41px → one 16px gutter. ⚠ DIRECT CHILDREN ONLY (fixed 2026-08-14, Jesper's "boksen ryger ud i margenen på mobil"). `PageRender::stamp_fills` also stamps data-bleed onto NESTED cards — .nbx-contact-card ("Adresse / Find os") and .nbx-card-fill ("Begravelsesformer") carry data-bleed="1" seven levels deep. The old descendant selector therefore zeroed a CARD's padding-inline too, so its text ran flush to the card edge at ≤768px. Every genuine band is a direct child of .nb-site; the offending cards never are — so `>` is the exact discriminator. */ .nb-site > [data-bleed], .nb-site .sc-hero-overlay { padding-inline: 0; } .nb-site .wrap { padding-inline: 16px; } .nb-site .sc-svc-cards__card { padding: 18px; } /* card interior: was 24px */ } @media (max-width: 380px) { .nb-site .sc-staff-grid__grid.cols-4 { grid-template-columns: 1fr; } /* full-width on the smallest phones */ } /* ──────────────────────────────────────────────────────────────────────────── ACSS FLUID TYPE (2026-07). The design shipped its OWN fixed `--fs-*` scale on `.nb-site` (a parallel token set, against the constitution) — `--fs-1..4` are fixed rem, so text is oversized and doesn't shrink on mobile. Route the scale onto ACSS's fluid clamp() vars (`--text-*`/`--h*`, responsive by default), so every `font-size: var(--fs-N)` the design already uses becomes responsive in ONE place — no per-element edits, no media queries. (We redefine the design's own --fs vars, NOT the ACSS text/heading vars, so ACSS utilities aren't shadowed.) ──────────────────────────────────────────────────────────────────────────── */ .nb-site { --fs-1: var(--text-s); /* fine print / small labels ~13px */ --fs-2: var(--text-m); /* main body + links: 16→18px (was fixed 17.4) */ --fs-3: var(--text-l); /* lead / intro prose: 19→24px (was fixed 22) */ --fs-4: var(--text-xl); /* small headings: 23→32px (was fixed 27.7) */ --fs-5: var(--h2); /* h2 */ --fs-6: var(--h1); /* h1: 31→47px (was 35→55) */ } /* ──────────────────────────────────────────────────────────────────────────── Rum-til-pårørende button → match the site's .btn (pill + size). The MitID button ships from nembedemand-room as an 8px-radius compact chip; here it adopts the design's own button tokens so it reads as one of the site buttons, in the header AND inside the mobile drawer (this file loads globally, so no .nb-site scope — the drawer lives outside .nb-site). ── */ .nbr-mitid-btn.nbr-mitid-compact { border-radius: 999px; padding: 0.85em 1.4em; /* match the header phone .sc-hd__phone height (its inner line runs tighter) */ font-size: var(--fs-1, 0.865rem); font-weight: 600; line-height: 1.3; height: auto; min-height: 0; /* OUTLINE variant of the MitID button: blue border + blue text + blue logo on a transparent fill (the mark is a mask-image, so its background-color IS the logo colour). MitID blue = #0060e6. */ background: transparent; color: #0060e6; border: 1.5px solid #0060e6; box-shadow: none; transition: background .15s ease, color .15s ease; } .nbr-mitid-btn.nbr-mitid-compact .nbr-mitid-label { color: #0060e6; } .nbr-mitid-btn.nbr-mitid-compact .nbr-mitid-mark { background-color: #0060e6; } /* hover fills solid for feedback */ .nbr-mitid-btn.nbr-mitid-compact:hover, .nbr-mitid-btn.nbr-mitid-compact:focus { background: #0060e6; color: #fff; } .nbr-mitid-btn.nbr-mitid-compact:hover .nbr-mitid-label, .nbr-mitid-btn.nbr-mitid-compact:focus .nbr-mitid-label { color: #fff; } .nbr-mitid-btn.nbr-mitid-compact:hover .nbr-mitid-mark, .nbr-mitid-btn.nbr-mitid-compact:focus .nbr-mitid-mark { background-color: #fff; } /* MitID mark (a mask-image, so the box size drives the logo) — smaller than default; smaller still on desktop */ .nbr-mitid-btn.nbr-mitid-compact .nbr-mitid-mark { width: 41px; height: 10.6px; } @media (min-width: 1151px) { .nbr-mitid-btn.nbr-mitid-compact .nbr-mitid-mark { width: 35px; height: 9px; } } /* .lead (hero subtitle + section intros) read a bit large at --fs-3 (→ 24px desktop); bring to --text-m */ .nb-site .lead { font-size: var(--text-m); } /* testimonials quote — --fs-3 was a bit large; --fs-2 (→ --text-m) is plenty */ .nb-site .sc-tst-cards__q blockquote { font-size: var(--fs-2); } /* ══════════════════════════════════════════════════════════════════════════════════════════════ KONTAKT — /kontakt/ (page 11011) ────────────────────────────────────────────────────────────────────────────────────────────── A contact page for a funeral home is read at 2am, usually on a phone, usually by someone who is not in a state to hunt for anything. The phone number IS the interface. So this is set like a printed directory card: three departments side by side, hairline-ruled, addresses quiet, and the numbers given the display face and real size. That language is not invented here — the footer already does it ("afdelinger — the reason someone opens a funeral home's footer at 3am", tabular-nums, small-caps TLF). This extends it to the page that exists for the same purpose. ⚠ SCOPED TO .nb-content, NOT .nb-site. This page renders in the generic CPT tier (.nb-cpt.nb-doc > main.nb-content) which sits OUTSIDE the .nb-site wrapper — so none of the .nb-site design tokens (--ink, --muted, --line, --surface, --fs-*) resolve here. Measured, not assumed. Everything below uses tokens that actually exist in this tier: ACSS's --text-*, --space-*, --section-space-*, --neutral*, plus the theme's --primary / --base / --text-dark. Two local aliases are derived from those rather than hardcoding hex. ⚠ THE THREE-COLUMN GRID DEPENDS ON THE MARKUP SHAPE. post_content is a flat run of siblings — h1, then (h3, p-address, p-phone, p-link) x 3 — with no per-department wrapper, so the columns are placed explicitly. The row rules are written as 4n+k, which holds for any number of departments; the column rules name three. A fourth department is a content change, and it needs one more line here. The durable fix is a wrapper element per department in the content itself — worth doing next time that page is edited. ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* ⚠ TOKENS ARE NOT PAGE-SCOPED. These were defined under `body.page-id-11011 .nb-content`, so on every other page `var(--k-paper)` and `var(--k-line)` resolved to nothing: the CTA band's `padding-block` applied while its `background` and `border-block` were dropped as invalid, giving a band with the right spacing and no surface. A declaration referencing an undefined custom property fails SILENTLY at computed-value time — nothing in the console, nothing in the gate. Define the token where the rules that read it can see it. */ .nb-content { /* Derived, so the page cannot drift from the palette. */ --k-line: var(--neutral-light); /* ⚠ 58% FAILED WCAG AA — caught by `npm run gate` (visualGate's contrast.low), not by eye. The addresses came out at 3.77:1 against --base, where 4.5:1 is the minimum, on a site whose readers skew older and are often reading it in distress. 58% *looked* correctly recessive, which is exactly why the gate exists. 72% measures 5.7:1 — still clearly secondary to the department name, and legible. */ --k-muted: color-mix(in srgb, var(--text-dark) 72%, var(--base)); --k-paper: color-mix(in srgb, var(--white) 82%, var(--base)); } /* ── 1. Rhythm ──────────────────────────────────────────────────────────────────────────────── Measured before: 0px above the h1, 45px down to the centred block, 132px from there to the form. Three different intervals, none of them deliberate. One interval now. */ body.page-id-11011 .nb-content > .nb-section { padding-block: var(--section-space-s); } /* Measured 130px from the breadcrumbs to the title — 40px belongs to the crumbs, the rest was 90px here plus 20px hung under an accent rule that is now gone. --space-xl resolved to 67.5px at 1440px (not the ~42 the token name suggests), which still read as two paddings stacked, so one step down: ~30px here, ~70px total. The 40px above it is the breadcrumbs' own and is not ours to take. */ body.page-id-11011 .nb-content > .nb-section:first-child { padding-block: var(--space-m) var(--section-space-s); } /* ⚠ :has(), not :last-child — MEASURED. There are TWO .nb-content elements: the directory and the band sit in an inner div.nb-content, while the form section is a sibling at index 3 of 5 in the outer main.nb-content.nb-page. So :last-child never matched it and the rule below silently did nothing. Selecting the section by what it CONTAINS is also simply truer to the intent. */ body.page-id-11011 .nb-content > .nb-section:has(.gform_wrapper) { padding-block: var(--section-space-s) var(--section-space-m); } /* ── 2. The masthead ────────────────────────────────────────────────────────────────────────── A short accent rule above the title, echoing .sec-head::before in the site tier so the page belongs to the same family. */ body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > h1 { font-family: var(--ff-heading); font-size: var(--h1); line-height: 1.1; margin: 0 0 var(--space-l); } /* ── 3. The directory ───────────────────────────────────────────────────────────────────────── Three columns, rows aligned line-for-line so the addresses, numbers and links form horizontal bands across the page. That alignment is the whole reason for placing rows explicitly rather than letting each column flow on its own. */ body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); row-gap: 0; align-items: start; } body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(1) { grid-column: 1 / -1; grid-row: 1; } body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(n+2):nth-child(-n+5) { grid-column: 1; } body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(n+6):nth-child(-n+9) { grid-column: 2; } body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(n+10):nth-child(-n+13) { grid-column: 3; } body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+2) { grid-row: 2; } /* department */ body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+3) { grid-row: 3; } /* address */ body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+4) { grid-row: 4; } /* phone */ body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+5) { grid-row: 5; } /* link */ /* department name — hairline above it turns each column into a card without a box */ body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+2) { font-family: var(--ff-heading); font-size: var(--h4); font-weight: 500; line-height: 1.25; margin: 0; padding-top: var(--space-s); border-top: 1px solid var(--k-line); } /* address — deliberately recessive; it is confirmation, not navigation */ body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+3) { margin: .55rem 0 0; font-size: var(--text-s); line-height: 1.55; color: var(--k-muted); } /* the number — display face, real size, tabular figures so the three align digit for digit */ body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+4) { margin: var(--space-xs) 0 0; font-family: var(--ff-heading); font-size: var(--text-xl); font-variant-numeric: tabular-nums; line-height: 1.2; color: var(--text-dark); white-space: nowrap; } /* link — quiet, with a mark that moves on hover */ body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+5) { margin: var(--space-s) 0 0; font-size: var(--text-s); } body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+5) a { display: inline-flex; align-items: baseline; gap: .5ch; color: var(--primary); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); padding-bottom: 2px; font-weight: 600; } body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+5) a::after { content: "→"; transition: transform .18s ease; } body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+5) a:hover { border-bottom-color: var(--primary); } body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+5) a:hover::after { transform: translateX(3px); } /* ── 4. The pause ───────────────────────────────────────────────────────────────────────────── This block was centred while everything around it was left-aligned, and sat on nothing — so it read as a mistake rather than a beat. Given its own surface it becomes the rest between the directory and the form, and being centred is then the point. ⚠ NOT page-scoped. This was written as `body.page-id-11011 …`, which fixed the one page it was found on and left `.nb-cta--band` bare on every other — transparent, unpadded, centred text with nothing under it, which is the exact defect this block exists to fix. The band carries its own class; that class is the condition. Any page with the band gets the treatment. */ .nb-content > .nb-section.nb-cta--band { background: var(--k-paper); border-block: 1px solid var(--k-line); padding-block: var(--section-space-s); } .nb-content > .nb-section.nb-cta--band > .nb-contain { max-width: 42rem; margin-inline: auto; text-align: center; } .nb-content > .nb-section.nb-cta--band h2 { font-family: var(--ff-heading); font-size: var(--h2); line-height: 1.2; margin: 0; } .nb-content > .nb-section.nb-cta--band p { margin: var(--space-s) auto 0; max-width: 34rem; color: var(--k-muted); } .nb-content > .nb-section.nb-cta--band .btn { margin-top: var(--space-m); } /* ── 5. The form ────────────────────────────────────────────────────────────────────────────── It was a narrow column hard against the left edge of a 1160px container. Centred, on paper, and given the container a reason to be that wide. */ body.page-id-11011 .nb-content .gform_wrapper { max-width: 44rem; margin-inline: auto; background: var(--white); border: 1px solid var(--k-line); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.75rem); } /* Name and e-mail sit 2-up on desktop using Gravity Forms' own 12-column grid — no markup change. Everything else stays full width: a phone field with a country selector and a staff picker both need the room, and the message field always should. */ @media (min-width: 700px) { body.page-id-11011 .nb-content .gform_fields > .gfield--type-text { grid-column: span 6; } body.page-id-11011 .nb-content .gform_fields > .gfield--type-email { grid-column: span 6; } } body.page-id-11011 .nb-content .gform_wrapper .gfield_label { font-family: var(--ff-body); font-size: var(--text-s); font-weight: 600; letter-spacing: .02em; color: var(--text-dark); } body.page-id-11011 .nb-content .gform_wrapper .gfield_required { color: var(--k-muted); font-weight: 400; } body.page-id-11011 .nb-content .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], textarea) { border: 1px solid var(--k-line); border-radius: var(--radius); background: var(--k-paper); transition: border-color .18s ease, background-color .18s ease; } body.page-id-11011 .nb-content .gform_wrapper :is(input, textarea):focus { border-color: var(--primary); background: var(--white); outline: 2px solid color-mix(in srgb, var(--primary) 28%, transparent); outline-offset: 1px; } /* ⚠ NOT :empty — MEASURED. The paragraphs the editor left around the shortcode contain whitespace, and :empty matches only elements with no children AND no text nodes at all, so the rule silently did nothing: they render 0px tall but still contribute 18px of margin, which together with the form's own 19.8px was 38px of the void above the card. The section's only direct

    children are these wrappers — the form's real paragraphs live inside .gform_wrapper — so zeroing them is safe. */ body.page-id-11011 .nb-content > .nb-section:has(.gform_wrapper) > .nb-contain > p { margin: 0; } body.page-id-11011 .nb-content .gform_wrapper { margin-top: 0; } /* ⚠ THE UNEVEN PAIR CAME FROM THE RHYTHM TOKENS, AND IS TURNED OFF WITH THEM — not fought. Measured: 45px above the band and 112px below it. The 112 is two things stacked — the inner .nb-content wrapper's 67.5px padding-bottom (--rhythm-inset) plus the band's own 45px margin (--rhythm-gap). Those exist so a band can breathe away from transparent neighbours, which is right in general; on this page the band IS the rhythm, so they double up. A plain `margin-block: 0` does NOT win — the rule that sets it is !important, so only !important could beat it, and reaching for that would be fighting the design system with its own weapon. Zeroing the two tokens for this page instead lets the same machinery produce the intended result, and the explicit padding on .nb-section below is then the only thing setting the interval. */ /* ⚠ SCOPED TO THE POST CONTENT, NOT THE PAGE. Setting these on was a regression I shipped: the shared closing CTA band (.nb-site-cta) is ALSO a child of main.nb-content — index 4 of 5 — so it inherited --rhythm-inset:0 and lost all its padding. That band is one component rendered identically on every page (EtchTemplates/SiteCta), and a page-scoped token override is exactly how a "constant" element starts differing per page. Custom properties inherit, so naming the two subtrees that actually need it keeps the override out of everything else. */ body.page-id-11011 main.nb-content > div.nb-content, body.page-id-11011 .nb-content > .nb-section:has(.gform_wrapper) { --rhythm-gap: 0px; --rhythm-inset: 0px; } /* ── 6. Narrow screens ──────────────────────────────────────────────────────────────────────── The grid is explicit, so it has to be explicitly undone — auto-placement does not resume on its own once every child carries a grid-row. */ @media (max-width: 860px) { body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain { grid-template-columns: 1fr; } /* ⚠ THE SELECTORS ARE REPEATED IN FULL, and that is not redundance. A media query adds NO specificity, so a tidy `> *` reset loses to the `:nth-child(a):nth-child(b)` rules above it (two pseudo-classes beat one universal) and the three-column placement survives into the phone. Measured before this: a 390px viewport rendered a 530px-wide page with the departments still crushed side by side and the whole layout scrolling horizontally. Equal specificity, declared later, is what actually undoes it. */ body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(n+2):nth-child(-n+5), body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(n+6):nth-child(-n+9), body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(n+10):nth-child(-n+13) { grid-column: 1; } body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+2), body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+3), body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+4), body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+5) { grid-row: auto; } /* Stacked, each department needs air beneath it and its own rule above. */ body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+2) { margin-top: var(--space-l); } body.page-id-11011 .nb-content > .nb-section:first-child > .nb-contain > :nth-child(4n+5) { margin-bottom: var(--space-xs); } } /* ── The closing band's eyebrow ──────────────────────────────────────────────────────────────── Removed at Jesper's request — and deliberately NOT scoped to a page. That band is one shared component; hiding its eyebrow on /kontakt/ alone is precisely the per-page drift we do not want. This applies to every page of this client's site, so the band stays identical wherever it lands. ⚠ There is a real platform bug underneath, which removing the eyebrow here only hides: .nb-site-cta__eyebrow computes max-width:418px against the title's 525px box, with margin:0 rather than auto — so text-align:center centres it inside a narrower box that sits left, and the eyebrow reads ~53px off-centre from the headline. That is wrong on every page of every client, and the fix belongs in content.css (margin-inline:auto), not here. */ .nb-site-cta__eyebrow { display: none; } /* Content figures must never UPSCALE their image. Something in the cascade (ACSS's own reset — the sheets are cross-origin because WP_CONTENT_URL is pinned to wp2, so they cannot be enumerated from the page) gives `.nb-content img` a full-container width, so the two dødsannonce examples rendered at 1080px from an 800px source: a 35% upscale on line art and fine print, which is exactly the content that cannot survive it. `width:auto` restores the intrinsic size; `fit-content` keeps the figure from leaving a wide empty box around it, and the image stays centred. Specificity only — no `!important` (Constitution rule 3): `.nb-content figure img` (0,2,1) beats the `.nb-content img` (0,1,1) that sets the width. Verified in a browser: 1080 -> 800, the full-bleed hero (not in a figure) untouched, no horizontal overflow. */ .nb-content figure { width: fit-content; max-width: 100%; margin-inline: auto; } .nb-content figure img { width: auto; max-width: 100%; height: auto; }