/*
    crosendal.dk — hand-written CSS, no framework, no build step and no external request
    (spec section 6).

    The visual design is recorded here, not in the spec. The look: the logo's teal-grey taken to
    full colour as a deep petrol, with its pale patina for surfaces and one rare copper accent, the
    metal the patina grows on, on white pages; Segoe for the words and DIN, the lettering of
    technical drawings, for labels and data. The front page opens on a petrol field with a dimension
    line, as on a drawing, that measures what the company is responsible for across the four
    delivery steps. No uppercase labels above headings, and numbers only where the content is a
    sequence (the process).

    Tried and rejected by the owner: a grey-paper version with serif headings (too newspaper-like),
    a rose accent chosen for the name Rosendal (the name says nothing to a customer), condensed DIN
    for the headings (its ø and Ø read wrongly in Danish at display size), and copper as a vivid
    orange spread over panels, dates and labels (it read as selling rather than as quality).
*/

/* Barlow (SIL Open Font License, see /fonts/OFL.txt), Latin subset, served from this site. */
@font-face {
    font-family: "Barlow";
    src: url("/fonts/barlow-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Barlow";
    src: url("/fonts/barlow-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* The logo's charcoal is the reading colour; headings take the petrol. */
    --ink: #30393c;
    --ink-soft: #4f5d62;
    --page: #ffffff;

    /* Patina, the pale tone of the petrol, for the page headers, the sheets and the news panels. Grey
       rather than mint, so it reads as a material and not as a pastel. */
    --patina: #edf3f2;
    --line: #d3e1df;

    /* Form controls need a boundary of at least 3:1 against fill and page (WCAG 2.2 1.4.11). */
    --line-strong: #7a8a8a;

    /* The logo's hue at full strength: the colour of the hero, the discs and the footer. */
    --petrol: #134b55;
    --petrol-deep: #0d363e;
    --on-petrol: #ffffff;
    --on-petrol-soft: #d5e6e4;

    /*
        One accent, copper — the metal whose patina the petrol is. It is kept rare, so it keeps its
        meaning, and does three jobs only: it marks what the reader can act on (buttons, links, the
        current page, focus), the problems a reader may recognise, and the dimension line that
        measures the company's responsibility. Everything else is petrol, charcoal and patina. Deep
        for hover, light on petrol.
    */
    --copper: #a3562a;
    --copper-deep: #86431f;
    --copper-light: #e8a978;

    /* Errors keep a red of their own, so a mistake never looks like the accent. */
    --error: #b3261e;
    --error-wash: #fdeceb;

    --footer-soft: #a9c4c1;

    /*
        Nothing is fetched from a third party. The words are system fonts, Segoe UI Variable —
        Display for headings, Text for reading (Segoe UI on Windows 10, San Francisco on Apple) —
        whose ø and Ø have a stroke across the whole letter, as Danish needs. Interface and data —
        menu, buttons, labels, dates, the dimension line — are Barlow, a DIN-like face in the spirit
        of the lettering of technical drawings, served from this site. It replaced Bahnschrift, whose
        ø carries only a short, near-vertical stroke and which exists only on Windows; Barlow looks
        the same on every device. Bahnschrift and DIN Alternate remain as fallbacks while it loads.
    */
    --font-heading: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
        "Helvetica Neue", Roboto, Arial, sans-serif;
    --font-display: "Barlow", Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Arial Narrow",
        sans-serif;
    --font-text: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
        Roboto, Arial, sans-serif;

    --text-sm: 0.9375rem;
    --text-base: 1.0625rem;
    --text-lead: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
    --text-h3: 1.25rem;
    --text-h2: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem);
    --text-h1: clamp(2.3rem, 1.7rem + 2.2vw, 3.25rem);
    --text-hero: clamp(2.6rem, 1.4rem + 3.8vw, 4.5rem);

    --space-2xs: 0.35rem;
    --space-xs: 0.6rem;
    --space-sm: 0.9rem;
    --space-md: 1.4rem;
    --space-lg: 2.2rem;
    --space-xl: 3.4rem;
    --space-2xl: 5rem;

    /* Larger surfaces get larger corners, so the radius follows the hierarchy. */
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 22px;

    --wrap: 76rem;

    color-scheme: light;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;

    /* The header is sticky on desktop, so anchor targets must not hide underneath it. */
    scroll-padding-top: 6rem;
    background: var(--page);
}

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: var(--text-base);
    line-height: 1.65;
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /* The hero's colour field reaches the window edges; that must never make the page scroll sideways. */
    overflow-x: clip;
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-sm);
    text-wrap: balance;
}

/* The two big levels are set tight and in petrol. */
h1,
h2 {
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--petrol);
}

h1 {
    font-size: var(--text-h1);
}

h2 {
    font-size: var(--text-h2);
}

h3 {
    font-size: var(--text-h3);
}

p,
ul,
ol,
dl {
    margin: 0 0 var(--space-md);
}

/* Prose stays readable: long lines are the fastest way to look amateur. */
main p,
main li,
main dd {
    max-width: 68ch;
}

ul,
ol {
    padding-left: 1.15rem;
}

li {
    margin-bottom: var(--space-2xs);
}

/* A link is petrol, like the headings, and its copper underline says it can be acted on. */
a {
    color: var(--petrol);
    text-decoration-color: var(--copper);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

a:hover {
    color: var(--copper-deep);
    text-decoration-thickness: 2px;
}

:focus-visible {
    outline: 3px solid var(--copper);
    outline-offset: 3px;
    border-radius: 2px;
}

img {
    max-width: 100%;
    height: auto;
}

address {
    font-style: normal;
}

strong {
    font-weight: 650;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--petrol);
    color: var(--on-petrol);
    font-family: var(--font-display);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    z-index: 20;
}

.skip-link:focus {
    left: var(--space-md);
    top: var(--space-md);
    color: var(--on-petrol);
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* ---------- Shared text devices ---------- */

/*
    Every sub-page opens on a sheet of drafting paper: a patina field running to the window edges, with
    the hero's grid in faint petrol and, off its right edge, the logo's disc in faint petrol with its
    outline and R traced (img/page-mark.svg). Like the hero, the field is painted by ::before, so the
    header itself stays in the page grid.
*/
.page-header {
    position: relative;
    isolation: isolate;

    /* Top and bottom are clipped at the header's edges; sideways the field runs to the window edges. */
    clip-path: inset(0 -100vmax);
    padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}

.page-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 calc(50% - 50vw);
    border-bottom: 1px solid var(--line);
    background:
        url("/img/page-mark.svg") no-repeat
            calc(50% + min(35vw, 27rem)) calc(7rem - clamp(22rem, 60vw, 45rem) / 2) /
            clamp(22rem, 60vw, 45rem) clamp(22rem, 60vw, 45rem),
        linear-gradient(rgb(19 75 85 / 6%) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
        linear-gradient(90deg, rgb(19 75 85 / 6%) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
        var(--patina);
}

.page-header h1 {
    max-width: 48rem;
    margin-bottom: var(--space-md);
}

.page-header > :last-child {
    margin-bottom: 0;
}

.page-header__lead,
.lead {
    font-size: var(--text-lead);
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 46ch;
}

.section {
    margin-top: var(--space-2xl);
}

.section__more {
    margin-bottom: 0;
    font-family: var(--font-display);
    font-weight: 600;
}

/* The second, smaller offer beside the main one, set apart by a petrol rule like the owner's words on
   /om. */
.note {
    border-left: 3px solid var(--petrol);
    padding-left: var(--space-md);
    max-width: 48rem;
}

/* ---------- Header and navigation ---------- */

/* Sticky at every width: the header is one row everywhere, because on narrow screens the menu folds
   behind a button (.site-menu). */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgb(255 255 255 / 94%);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-block: var(--space-sm);
}

@media (min-width: 62rem) {
    .site-header__inner {
        column-gap: var(--space-lg);
    }
}

.site-header__logo {
    display: inline-block;
    line-height: 0;
}

.site-header__logo img {
    display: block;
    width: clamp(10rem, 20vw, 12.5rem);
    height: auto;
}

/* The full menu only where it fits on one line; below that, .site-menu takes over. */
.site-nav {
    display: none;
}

@media (min-width: 62rem) {
    .site-nav {
        display: block;
    }
}

.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs) var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav li {
    margin: 0;
}

.site-nav a {
    display: inline-block;
    padding: 0.35rem 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.site-nav a:hover {
    color: var(--petrol);
    border-bottom-color: var(--line-strong);
}

.site-nav a[aria-current="page"] {
    color: var(--petrol);
    border-bottom-color: var(--copper);
}

/* The one item in the menu that is an action. */
.site-nav__cta a,
.site-nav__cta a:hover,
.site-nav__cta a[aria-current="page"] {
    padding: 0.5rem 1.1rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--copper);
    color: var(--on-petrol);
    font-weight: 600;
}

.site-nav__cta a:hover,
.site-nav__cta a[aria-current="page"] {
    background: var(--copper-deep);
}

/* ---------- The folded menu, for narrow screens ---------- */

.site-menu {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

@media (min-width: 62rem) {
    .site-menu {
        display: none;
    }
}

.site-menu__cta,
.site-menu__toggle > summary {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    text-decoration: none;
}

.site-menu__cta,
.site-menu__cta:hover {
    padding-inline: 1rem;
    background: var(--copper);
    color: var(--on-petrol);
    font-weight: 600;
}

.site-menu__cta:hover,
.site-menu__cta[aria-current="page"] {
    background: var(--copper-deep);
    color: var(--on-petrol);
}

.site-menu__toggle > summary {
    gap: var(--space-xs);
    padding-inline: 0.8rem;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.site-menu__toggle > summary::-webkit-details-marker {
    display: none;
}

.site-menu__toggle > summary:hover,
.site-menu__toggle[open] > summary {
    border-color: var(--petrol);
    color: var(--petrol);
}

.site-menu__toggle[open] > summary {
    background: var(--patina);
}

/* Three bars that cross into an X when the menu is open. */
.site-menu__icon {
    position: relative;
    width: 1.125rem;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
}

.site-menu__icon::before,
.site-menu__icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s ease;
}

.site-menu__icon::before {
    top: -6px;
}

.site-menu__icon::after {
    top: 6px;
}

.site-menu__toggle[open] .site-menu__icon {
    background: transparent;
}

.site-menu__toggle[open] .site-menu__icon::before {
    transform: translateY(6px) rotate(45deg);
}

.site-menu__toggle[open] .site-menu__icon::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* The label follows the state: "Menu" when closed, "Luk" when open. */
.site-menu__label--open,
.site-menu__toggle[open] .site-menu__label--closed {
    display: none;
}

.site-menu__toggle[open] .site-menu__label--open {
    display: inline;
}

/* Most phones only have room for the icon beside the logo and Kontakt; the label is still the
   button's accessible name. */
@media (max-width: 25.99rem) {
    .site-menu__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* The open menu hangs below the header across the full width, over the page. */
.site-menu__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--page);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1rem 2rem rgb(13 54 62 / 12%);
}

.site-menu__panel ul {
    list-style: none;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: var(--space-2xs) clamp(1rem, 4vw, 2.5rem) var(--space-sm);
}

.site-menu__panel li {
    margin: 0;
}

.site-menu__panel li + li {
    border-top: 1px solid var(--line);
}

.site-menu__panel a {
    display: block;
    padding: 0.8rem 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.125rem;
    text-decoration: none;
}

.site-menu__panel a:hover {
    color: var(--petrol);
}

.site-menu__panel a[aria-current="page"] {
    padding-left: var(--space-sm);
    box-shadow: inset 3px 0 var(--copper);
    color: var(--petrol);
    font-weight: 600;
}

/* ---------- Page layout ---------- */

.layout {
    display: grid;
    gap: var(--space-xl) 3.5rem;
    padding-block: var(--space-xl) var(--space-2xl);
    flex: 1 0 auto;
    align-content: start;
}

/* A page that opens on the hero or a page header lets its field meet the site header. */
.layout:has(> .layout__main > :is(.hero, .page-header)) {
    padding-top: 0;
}

.layout__main {
    min-width: 0;
}

/* The skip link focuses main programmatically; that must not draw a ring round the whole page. */
.layout__main:focus {
    outline: none;
}

/* The page body keeps its own distance from the hero or page header, so its first block starts at
   its top edge — level with the sidebar beside it on desktop. */
.page-body {
    margin-top: var(--space-2xl);
}

.page-header + .page-body {
    margin-top: var(--space-xl);
}

.page-body > :first-child {
    margin-top: 0;
}

@media (min-width: 62rem) {
    .layout--with-sidebar {
        grid-template-columns: minmax(0, 1fr) 18rem;
    }

    /*
        A page opens with a hero (the front page) or a page header (the rest) that runs the full
        width, and the news sidebar starts beside the content below it. Main keeps the opening inside
        it (so the h1 stays in the main landmark) and lends its two rows to the outer grid as a
        subgrid; the sidebar takes the second row.
    */
    .layout--with-sidebar:has(> .layout__main > :is(.hero, .page-header)) {
        grid-template-rows: auto auto;
        row-gap: 0;
    }

    .layout--with-sidebar:has(> .layout__main > :is(.hero, .page-header)) > .layout__main {
        grid-column: 1 / -1;
        grid-row: 1 / span 2;
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
    }

    .layout__main > :is(.hero, .page-header) {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .layout__main > .page-body {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
    }

    .layout--with-sidebar:has(> .layout__main > :is(.hero, .page-header)) > .sidebar {
        grid-column: 2;
        grid-row: 2;
        margin-top: var(--space-2xl);
    }

    .layout--with-sidebar:has(> .layout__main > .page-header) > .sidebar {
        margin-top: var(--space-xl);
    }
}

/* ---------- Hero ----------

   A flat petrol field running to the window edges, with a faint drafting grid. No glow: the copper of
   the dimension line is the one warm thing on it. The field is painted by ::before, so the hero itself
   stays in the page grid. */

.hero {
    position: relative;
    isolation: isolate;

    /* Top and bottom are clipped at the hero's edges; sideways the field runs to the window edges. */
    clip-path: inset(0 -100vmax);
    display: grid;
    gap: var(--space-lg) var(--space-xl);
    align-items: end;
    padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 2rem + 2vw, 4rem);
    color: var(--on-petrol);
}

/*
    The top layer is the logo's disc with the R knocked out, as a watermark: large and very faint, its
    contours just traced, behind the right half of the field and running off its right edge, like a
    sheet that runs on beyond the page. Its centre is placed from the middle of the window, so it stays
    behind the content on wide screens instead of drifting out to the window edge. It is a background
    layer rather than an element of its own, so the part beyond the window edge is cut off by the field
    instead of widening the page (which made phones zoom out).
*/
.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 calc(50% - 50vw);
    background:
        url("/img/hero-mark.svg") no-repeat
            calc(50% + min(35vw, 27rem)) -3rem /
            clamp(24rem, 72vw, 54rem) clamp(24rem, 72vw, 54rem),
        linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
        linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
        var(--petrol);
}

.hero :focus-visible {
    outline-color: var(--on-petrol);
}

@media (min-width: 56rem) {
    .hero {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .hero > .responsibility {
        grid-column: 1 / -1;
    }
}

.hero__title {
    font-size: var(--text-hero);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--on-petrol);
}

.hero__lead {
    font-size: var(--text-lead);
    line-height: 1.55;
    color: var(--on-petrol-soft);
    max-width: 42ch;
    margin-bottom: var(--space-sm);
    text-wrap: pretty;
}

.hero__promise {
    font-family: var(--font-display);
    font-size: var(--text-lead);
    font-weight: 600;
    line-height: 1.4;
    color: var(--on-petrol);
    max-width: 36ch;
    margin-bottom: var(--space-lg);
    text-wrap: pretty;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-lg);
    margin-bottom: 0;
}

.hero__link,
.hero .responsibility__more a {
    color: var(--on-petrol);
    text-decoration-color: var(--copper-light);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
}

.hero__link:hover,
.hero .responsibility__more a:hover {
    color: var(--copper-light);
}

/* ---------- The dimension line ----------

   A dimension line as on a technical drawing: extension lines at both ends, arrowheads pointing at
   them, and the measure written on the line. Here the measure is "Vores ansvar", and what it spans is
   the four delivery steps — which is the argument the site exists to make (spec section 1).

   It stands vertically beside a list by default and turns horizontal above it where there is room.
   The arrowheads are drawn with gradients, so the whole device follows --dim.
*/

.responsibility {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    column-gap: var(--space-sm);
    margin-top: var(--space-lg);
}

@media (min-width: 40rem) {
    .responsibility {
        grid-template-columns: 2.25rem minmax(0, 1fr);
        column-gap: var(--space-md);
    }
}

.responsibility > .dimension {
    grid-column: 1;
    grid-row: 1;
}

.responsibility > ol {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
}

.responsibility--vertical {
    margin-block: 0 var(--space-xl);
}

.responsibility__more {
    grid-column: 2;
    margin: var(--space-lg) 0 0;
    font-family: var(--font-display);
    font-weight: 600;
}

.dimension {
    --dim: var(--copper);
    --half: calc(50% - 0.5px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    margin: 0;
    max-width: none;
    border-block: 1.5px solid var(--dim);
    color: var(--dim);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.hero .dimension {
    --dim: var(--copper-light);
}

.dimension::before,
.dimension::after {
    content: "";
    flex: 1 1 auto;
    width: 10px;
    min-height: 2rem;
}

/* Upper half: an arrowhead pointing up at the first extension line. */
.dimension::before {
    background:
        linear-gradient(to bottom right, transparent var(--half), var(--dim) 50%) left top / 50% 13px no-repeat,
        linear-gradient(to bottom left, transparent var(--half), var(--dim) 50%) right top / 50% 13px no-repeat,
        linear-gradient(var(--dim), var(--dim)) center / 2px 100% no-repeat;
}

/* Lower half: an arrowhead pointing down at the last one. */
.dimension::after {
    background:
        linear-gradient(to top right, transparent var(--half), var(--dim) 50%) left bottom / 50% 13px no-repeat,
        linear-gradient(to top left, transparent var(--half), var(--dim) 50%) right bottom / 50% 13px no-repeat,
        linear-gradient(var(--dim), var(--dim)) center / 2px 100% no-repeat;
}

/* Vertical dimension text reads from the bottom up, as on a drawing. */
.dimension__label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

@media (min-width: 40rem) {
    .responsibility:not(.responsibility--vertical) {
        grid-template-columns: minmax(0, 1fr);
    }

    .responsibility:not(.responsibility--vertical) > * {
        grid-column: 1;
        grid-row: auto;
    }

    /* Horizontal: the extension lines rise a little above the line and run down towards the steps. */
    .responsibility:not(.responsibility--vertical) > .dimension {
        flex-direction: row;
        border-block: 0;
        border-inline: 1.5px solid var(--dim);
        padding: 0.5rem 0 var(--space-md);
        margin-bottom: 0;
    }

    .responsibility:not(.responsibility--vertical) > .dimension::before,
    .responsibility:not(.responsibility--vertical) > .dimension::after {
        width: auto;
        height: 10px;
        min-height: 0;
    }

    .responsibility:not(.responsibility--vertical) > .dimension::before {
        background:
            linear-gradient(to bottom right, transparent var(--half), var(--dim) 50%) left top / 13px 50% no-repeat,
            linear-gradient(to top right, transparent var(--half), var(--dim) 50%) left bottom / 13px 50% no-repeat,
            linear-gradient(var(--dim), var(--dim)) center / 100% 2px no-repeat;
    }

    .responsibility:not(.responsibility--vertical) > .dimension::after {
        background:
            linear-gradient(to bottom left, transparent var(--half), var(--dim) 50%) right top / 13px 50% no-repeat,
            linear-gradient(to top left, transparent var(--half), var(--dim) 50%) right bottom / 13px 50% no-repeat,
            linear-gradient(var(--dim), var(--dim)) center / 100% 2px no-repeat;
    }

    .responsibility:not(.responsibility--vertical) .dimension__label {
        writing-mode: horizontal-tb;
        transform: none;
    }

    /* Under a horizontal line each step is centred in its column, so the discs sit evenly between
       the extension lines instead of the first one pressing against the left. */
    .responsibility:not(.responsibility--vertical) .steps__item {
        text-align: center;
    }

    .responsibility:not(.responsibility--vertical) .steps__item::before,
    .responsibility:not(.responsibility--vertical) .steps__body {
        margin-inline: auto;
    }
}

/* ---------- Numbered steps ----------

   The process is the one real sequence on the site, so it is the one place with numbers. Each number
   sits in a disc, as the R sits in the logo's disc. */

.steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    display: grid;
    gap: var(--space-lg) var(--space-md);
}

@media (min-width: 40rem) {
    .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 60rem) {
    .steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.steps__item {
    counter-increment: step;
    margin: 0;
}

.steps__item::before,
.process__step::before {
    display: grid;
    place-items: center;
    width: 2.4rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--petrol);
    color: var(--on-petrol);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;

    /* Centring the line box doesn't centre the figure: Barlow's ascent reaches further above the
       figures than its descent goes below them, so the figure sits low; this lifts it to the optical
       centre (measured for Barlow). */
    padding-bottom: 0.11em;
}

/* On the petrol field the discs turn white, like the logo mark in the footer. */
.hero .steps__item::before {
    background: var(--on-petrol);
    color: var(--petrol);
}

.steps__item::before {
    content: counter(step);
    margin-bottom: var(--space-sm);
}

.steps__title {
    margin-bottom: var(--space-2xs);
}

.steps__body {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--on-petrol-soft);
    max-width: 30ch;
}

/* The full process page: the same steps, with their full text, beside a vertical dimension. */
.process {
    list-style: none;
    counter-reset: process-step;
    padding: 0;
    max-width: 52rem;
    container-type: inline-size;
}

.process__step {
    counter-increment: process-step;
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0 var(--space-md);
    margin: 0;
    padding-block: var(--space-lg);
}

.process__step:first-child {
    padding-top: 0;
}

.process__step:last-child {
    padding-bottom: 0;
}

.process__step + .process__step {
    border-top: 1px solid var(--line);
}

.process__step::before {
    content: counter(process-step);
    margin-bottom: var(--space-xs);
}

.process__step h2 {
    font-size: clamp(1.45rem, 1.3rem + 0.6vw, 1.75rem);
    margin-bottom: var(--space-xs);
    align-self: center;
}

/* On a narrow screen the text runs under the disc as well, so the lines keep a readable length. */
.process__step > :not(h2) {
    grid-column: 1 / -1;
}

.process__step p {
    color: var(--ink-soft);
}

.process__step p:last-child {
    margin-bottom: 0;
}

@container (min-width: 40rem) {
    .process__step {
        grid-template-columns: 2.4rem 15rem minmax(0, 1fr);
    }

    .process__step::before {
        grid-row: 1 / span 3;
        margin-bottom: 0;
    }

    .process__step h2 {
        align-self: start;
        padding-top: 0.2rem;
    }

    .process__step > :not(h2) {
        grid-column: 3;
    }
}

/* ---------- Problems (front page) ---------- */

.problems {
    list-style: none;
    padding: 0;
    margin: var(--space-lg) 0;
    display: grid;
    gap: var(--space-md);
}

@media (min-width: 40rem) {
    .problems {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.problems__item {
    margin: 0;
    max-width: none;
    background: var(--patina);
    border-radius: var(--radius);
    padding: var(--space-md) var(--space-md) var(--space-lg);
}

/* A short copper stroke marks each problem as a symptom the reader may recognise. */
.problems__title::before {
    content: "";
    display: block;
    width: 2.25rem;
    height: 4px;
    border-radius: 2px;
    background: var(--copper);
    margin-bottom: var(--space-sm);
}

.problems__title {
    color: var(--petrol);
    margin-bottom: var(--space-xs);
}

.problems__body {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

/* ---------- Project tiles (front page) ---------- */

.case-tiles {
    list-style: none;
    padding: 0;
    margin: var(--space-lg) 0 0;
    display: grid;
    gap: var(--space-md);
}

@media (min-width: 40rem) {
    .case-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.case-tiles li {
    margin: 0;
    max-width: none;
}

.case-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    height: 100%;
    padding: var(--space-md) var(--space-md) var(--space-lg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
}

/* The same stroke as on the problems, in petrol: a problem is marked in copper, a delivery in petrol. */
.case-tile::before {
    content: "";
    width: 2.25rem;
    height: 4px;
    border-radius: 2px;
    background: var(--petrol);
    margin-bottom: var(--space-2xs);
}

.case-tile:hover {
    border-color: var(--copper);
    color: var(--ink);
}

.case-tile__title {
    margin: 0;
    font-size: 1.1875rem;
    line-height: 1.25;
    color: var(--petrol);
}

.case-tile:hover .case-tile__title {
    color: var(--copper-deep);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.case-tile__effect {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

/* The plain project index, used by the error page. */
.teasers {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
    max-width: 46rem;
}

.teasers li {
    margin: 0;
    border-bottom: 1px solid var(--line);
}

.teasers a {
    display: block;
    padding: var(--space-sm) 0;
    font-family: var(--font-display);
    font-size: 1.1875rem;
    text-decoration: none;
}

/* ---------- Buttons ---------- */

.button {
    display: inline-block;
    background: var(--copper);
    color: var(--on-petrol);
    padding: 0.8rem 1.45rem;
    border: 2px solid var(--copper);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.button:hover {
    background: var(--copper-deep);
    border-color: var(--copper-deep);
    color: var(--on-petrol);
}

/* On petrol the copper turns light, as the dimension line does: the full copper is too close to the
   petrol in lightness to stand out from it. */
:is(.hero, .cta) .button {
    background: var(--copper-light);
    border-color: var(--copper-light);
    color: var(--petrol-deep);
}

:is(.hero, .cta) .button:hover {
    background: var(--on-petrol);
    border-color: var(--on-petrol);
    color: var(--petrol-deep);
}

/* ---------- Services ---------- */

/* Each service on a sheet of its own: two offerings that are bought separately look separate. */
.service {
    max-width: 50rem;
    background: var(--patina);
    border-radius: var(--radius-lg);
    padding: clamp(1.4rem, 1rem + 2vw, 2.5rem);
}

.service + .service {
    margin-top: var(--space-lg);
}

.service h2 {
    margin-bottom: var(--space-md);
}

.service > :last-child {
    margin-bottom: 0;
}

/* Bullet lists in the service descriptions: a short copper rule instead of a dot. */
.ticks {
    list-style: none;
    padding-left: 0;
}

.ticks li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: var(--space-sm);
}

.ticks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.78em;
    width: 0.9rem;
    height: 3px;
    border-radius: 2px;
    background: var(--copper);
}

/* The problem's name, in the heading face, as on the front page. */
.ticks strong {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--petrol);
}

/* ---------- Cases ---------- */

.cases {
    list-style: none;
    padding: 0;
    margin: 0;
}

.case {
    margin: 0;
    background: var(--patina);
    border-radius: var(--radius-lg);
    padding: clamp(1.4rem, 1rem + 2vw, 2.5rem);
    scroll-margin-top: 6rem;
}

.case + .case {
    margin-top: var(--space-lg);
}

.case h2 {
    max-width: 26ch;
    margin-bottom: var(--space-lg);
}

/* Problem, solution and effect as the fields of a sheet: the name of the field, then its value. */
.case__facts {
    display: grid;
    gap: 0 var(--space-lg);
    margin-bottom: 0;
}

.case__facts dt {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink-soft);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--line);
}

.case__facts dd {
    margin: var(--space-2xs) 0 var(--space-md);
}

/* What the project moved is the point of the case, so it is set in the heading face, in petrol. */
.case__facts dd:last-of-type {
    font-family: var(--font-heading);
    font-size: 1.1875rem;
    line-height: 1.45;
    color: var(--petrol);
    margin-bottom: 0;
}

@media (min-width: 48rem) {
    .case__facts {
        grid-template-columns: 7rem minmax(0, 1fr);
    }

    .case__facts dt {
        grid-column: 1;
    }

    .case__facts dd {
        grid-column: 2;
        margin: 0;
        padding-block: var(--space-sm) var(--space-md);
        border-top: 1px solid var(--line);
    }

    .case__facts dd:last-of-type {
        padding-bottom: 0;
    }
}

/* ---------- About ---------- */

.about {
    display: grid;
    gap: var(--space-lg);
    align-items: start;
    max-width: 52rem;
}

.about__portrait {
    display: block;
    width: 100%;
    max-width: 18rem;
    border-radius: var(--radius);
}

.about__text > p:first-child {
    font-size: var(--text-lead);
    line-height: 1.5;
}

/* The owner's own words, set apart from the third-person text around them. */
.about__quote {
    margin: 0 0 var(--space-md);
    padding-left: var(--space-md);
    border-left: 3px solid var(--petrol);
}

.about__quote p:last-child {
    margin-bottom: 0;
}

/* The page's point, set like the promise on the front page because it says the same thing. */
.about__point {
    font-family: var(--font-display);
    font-size: var(--text-lead);
    font-weight: 600;
    line-height: 1.4;
    color: var(--petrol);
    text-wrap: pretty;
}

@media (min-width: 42rem) {
    .about {
        grid-template-columns: 16rem minmax(0, 1fr);
    }
}

/* The company as a legal entity, set as data rather than prose. */
.company-details {
    display: inline-block;
    background: var(--patina);
    border-radius: var(--radius);
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-display);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

/* ---------- Call to action ---------- */

.cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin-top: var(--space-2xl);
    padding: clamp(1.6rem, 1rem + 2.5vw, 2.75rem);
    border-radius: var(--radius-lg);

    /* Petrol, like the hero, so the page opens and closes on the same field and the copper is left
       to the button. */
    background: var(--petrol);
    color: var(--on-petrol-soft);
    container-type: inline-size;
}

.cta__inner {
    display: grid;
    gap: var(--space-md);
    align-items: center;
}

/* The logo mark, large and faint, where the panel ends. img/mark.svg is the disc with the letterform
   punched out of it, used as a mask so it can take any colour. */
.cta::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -3rem;
    bottom: -5rem;
    width: min(18rem, 45%);
    aspect-ratio: 1;
    background-color: var(--on-petrol);
    opacity: 0.07;
    -webkit-mask: url("/img/mark.svg") no-repeat center / contain;
    mask: url("/img/mark.svg") no-repeat center / contain;
}

.cta h2 {
    max-width: 22ch;
    margin-bottom: var(--space-xs);
    color: var(--on-petrol);
}

.cta p {
    margin: 0;
    max-width: 46ch;
}

.cta :focus-visible {
    outline-color: var(--on-petrol);
}

@container (min-width: 40rem) {
    .cta__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-lg);
    }
}

/* ---------- News ---------- */

/* Two flows, each on its own panel: the company's releases first, then AI and technology news
   (spec 5.2). Kept apart so a release is never read as news about someone else. */
.sidebar {
    align-self: start;
    display: grid;
    gap: var(--space-md);
}

.sidebar__flow {
    background: var(--patina);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-md) var(--space-lg);
}

/* Smaller than a page's h2, so each flow's heading stays on one line in the narrow column. */
.sidebar__title {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
    font-size: 1.5rem;
}

/* The logo mark before "Vi har leveret": only what is the company's carries the logo, and the heading
   says what it means without a legend. */
.sidebar__mark {
    flex: none;
    width: 1.2em;
    height: 1.2em;
    background-color: var(--petrol);
    -webkit-mask: url("/img/mark.svg") no-repeat center / contain;
    mask: url("/img/mark.svg") no-repeat center / contain;
}

.sidebar__more {
    margin-bottom: 0;
    font-family: var(--font-display);
    font-weight: 600;
}

.news-list {
    list-style: none;
    margin: 0 0 var(--space-md);
    padding: 0;
}

.news-list__item {
    margin: 0 0 var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--line);
}

.news-list__item:first-child {
    padding-top: 0;
    border-top: none;
}

.news-list__meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin: 0 0 var(--space-2xs);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
}

/* The kinds of news as discs of one size, each with a sign cut out: a tick in petrol for a release
   the company has delivered and put into production, a spark in copper for news from the AI field, and
   a clock in grey for technology news. Masks, like the mark in the call to action, so each takes its
   colour from here. */
.news-icon {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    background-color: var(--petrol);
    -webkit-mask: url("/img/release-mark.svg") no-repeat center / contain;
    mask: url("/img/release-mark.svg") no-repeat center / contain;
}

.news-icon--ai {
    background-color: var(--copper);
    -webkit-mask-image: url("/img/ai-mark.svg");
    mask-image: url("/img/ai-mark.svg");
}

/* The third, neutral disc: a clock, for new platform versions and the dates their support ends. */
.news-icon--tech {
    background-color: var(--ink-soft);
    -webkit-mask-image: url("/img/tech-mark.svg");
    mask-image: url("/img/tech-mark.svg");
}

/* High-contrast themes replace background colours, which would leave a masked icon invisible. */
@media (forced-colors: active) {
    .news-icon,
    .sidebar__mark {
        forced-color-adjust: none;
        background-color: CanvasText;
    }
}

.news-list__header {
    margin: 0 0 var(--space-2xs);
    font-size: 1.125rem;
    line-height: 1.3;
}

.news-list__header a {
    color: var(--petrol);
    text-decoration: none;
}

.news-list__header a:hover {
    color: var(--copper-deep);
    text-decoration: underline;
}

/* /nyheder and /leverancer group the list by year; the year is set in the face of the dates. */
.news-year + .news-year {
    margin-top: var(--space-xl);
}

.news-year__title {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-2xs);
    border-bottom: 2px solid var(--petrol);
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
}

.news-list__body {
    margin: 0;
    color: var(--ink-soft);
    font-size: var(--text-sm);
    line-height: 1.55;
}

/* ---------- Forms ---------- */

.form {
    max-width: 38rem;
}

.form__field {
    margin-bottom: var(--space-md);
}

.form__field label {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    margin-bottom: var(--space-2xs);
}

.form__optional {
    font-weight: 400;
    color: var(--ink-soft);
}

.form__field input,
.form__field textarea {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--page);
    color: inherit;
    font: inherit;
}

.form__field input:hover,
.form__field textarea:hover,
.form__field input:focus,
.form__field textarea:focus {
    border-color: var(--petrol);
}

.form__field textarea {
    resize: vertical;
}

/* A field the page has marked invalid says so visually as well: colour plus a thicker edge, so the
   cue does not depend on colour perception alone (WCAG 2.2 1.4.1). */
.form__field input[aria-invalid="true"],
.form__field textarea[aria-invalid="true"] {
    border-color: var(--error);
    border-width: 2px;
}

.form__field--checkbox label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: start;
    font-family: var(--font-text);
    font-weight: 400;
}

.form__field--checkbox input {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.25rem;
    accent-color: var(--copper);
}

.form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

/* Empty until kontakt.js says the enquiry is on its way. */
.form__status {
    margin: 0;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: var(--text-sm);
}

/* While the enquiry is being sent the button stays pressed and does not invite a second press. */
.form--sending .form__submit,
.form--sending .form__submit:hover {
    background: var(--copper-deep);
    border-color: var(--copper-deep);
    cursor: progress;
}

@media (prefers-reduced-motion: no-preference) {
    .form--sending .form__submit::before {
        content: "";
        display: inline-block;
        width: 0.85em;
        height: 0.85em;
        margin-right: 0.55em;
        vertical-align: -0.08em;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: form-sending 800ms linear infinite;
    }
}

@keyframes form-sending {
    to {
        transform: rotate(360deg);
    }
}

.field-error {
    display: block;
    margin-top: var(--space-2xs);
    color: var(--error);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
}

.alert {
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
}

.alert--error {
    background: var(--error-wash);
    border: 1px solid var(--error);
    color: var(--ink);
}

.alert--error ul {
    margin: 0;
    padding-left: 1.1rem;
}

.receipt {
    background: var(--patina);
    border-radius: var(--radius);
    padding: var(--space-md) var(--space-lg);
    max-width: 38rem;
}

.receipt h2 {
    margin-top: 0;
}

/* The honeypot must be reachable for a bot and invisible to everyone else. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Footer ---------- */

.site-footer {
    background: var(--petrol-deep);
    color: var(--on-petrol);
    margin-top: auto;
}

.site-footer__inner {
    display: grid;
    gap: var(--space-lg);
    padding-block: var(--space-xl) var(--space-lg);
}

/* Brand on its own row above the three columns until there is room for all four side by side. */
@media (min-width: 46rem) {
    .site-footer__inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-lg) var(--space-xl);
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (min-width: 64rem) {
    .site-footer__inner {
        grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    }

    .site-footer__brand {
        grid-column: auto;
    }
}

.site-footer p,
.site-footer address {
    margin: 0;
}

/* The same size as in the header, at every width. */
.site-footer__logo {
    display: block;
    width: clamp(10rem, 20vw, 12.5rem);
    height: auto;
    margin-bottom: var(--space-md);
}

.site-footer__claim {
    color: var(--footer-soft);
    max-width: 36ch;
    font-size: var(--text-sm);
}

/* The partner badge is shown as UNICEF supplies it: its own blue and white, large enough that the
   year and "erhvervshjælper" can be read. */
.site-footer__partner {
    display: inline-block;
    margin-top: var(--space-2xs);
}

.site-footer__partner img {
    display: block;
    width: 11rem;
    max-width: 100%;
    height: auto;
}

.site-footer__heading {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--footer-soft);
    margin: 0 0 var(--space-xs);
}

.site-footer__address {
    font-family: var(--font-display);
    line-height: 1.75;
}

.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-display);
    line-height: 1.75;
}

.site-footer__links li {
    margin: 0;
}

.site-footer a {
    color: var(--on-petrol);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--copper-light);
    text-decoration: underline;
    text-decoration-color: currentColor;
}

.site-footer :focus-visible {
    outline-color: var(--copper-light);
}

/* ---------- Motion ----------

   One moment, once: on the front page the dimension line is drawn outwards from its measure to the
   extension lines. */

@media (min-width: 40rem) and (prefers-reduced-motion: no-preference) {
    .hero .dimension::before {
        animation: dimension-draw-left 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 350ms both;
    }

    .hero .dimension::after {
        animation: dimension-draw-right 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 350ms both;
    }

    .hero .dimension__label {
        animation: dimension-label 400ms ease-out 150ms both;
    }
}

@keyframes dimension-draw-left {
    from {
        clip-path: inset(0 0 0 100%);
    }

    to {
        clip-path: inset(0);
    }
}

@keyframes dimension-draw-right {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0);
    }
}

@keyframes dimension-label {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}