@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/merriweather-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/merriweather-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Merriweather"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("../fonts/merriweather-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Merriweather"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("../fonts/merriweather-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/mulish-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/mulish-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Mobile first: the rules below are the phone layout (the WordPress site's, as Elementor drew it
   up to 700px). Wider screens only add to them, in three blocks at the end, at Elementor's own
   breakpoints: 701px and up (tablet and desktop), 701–1000px (tablet only) and 1001px and up
   (desktop only).
   Where a wide screen needs a phone value undone back to the defaults in @layer base, it says
   `revert-layer` rather than repeating them. */

:root {
  --blue-dark: #144f7b;
  --blue: #48bdf3;
  --text: #000;
  --muted: #666;
  --grey: #999;
  --tint: #f1f8ff;
  --error: #e2401c;
  --border: rgba(0, 0, 0, 0.12);
  --serif: "Merriweather", Helvetica, Arial, sans-serif;
  --sans: "Mulish", sans-serif;
  --width: 1160px;
  --gutter: 30px;
}

/* Element defaults. Every component rule outranks these. */
@layer base {
  *, *::before, *::after { box-sizing: border-box; min-width: 0; }
  body { margin: 0; font: 16px/1.5 var(--serif); color: var(--text); background: #fff; }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; }
  address { font-style: normal; }
  address strong { display: block; }
  h1, h2, h3 { margin: 0 0 0.6em; font-weight: 400; line-height: 1.2; overflow-wrap: break-word; }
  h2 { font: 600 30px/1.2 var(--sans); }
  h3 { font: 600 30px/1.4 var(--sans); }
  p { margin: 0 0 0.9em; }
}

/* `hidden` wins over a component's display, so site.js can show and hide anything with it. */
[hidden] { display: none !important; }
main { overflow-x: clip; text-align: center; }
main p a:where(:not(.button)) { color: var(--blue); text-decoration: none; }
.container { width: min(var(--width), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container.wide { --width: 1400px; }
.section { padding-block: 60px; }
.tint { background: var(--tint); }
.center { text-align: center; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: var(--gutter); top: var(--gutter); z-index: 30; background: #fff; padding: 8px; }

.button {
  display: inline-block; padding: 15px 20px; border: 0; border-radius: 3px;
  background: var(--grey); color: #fff; font: 400 18px/1 var(--serif); text-decoration: none; cursor: pointer;
}
.button.blue { background: var(--blue); font-size: 16px; }
.button.small { display: inline-flex; gap: 7px; padding: 10px; font-size: 12px; text-transform: uppercase; }
.button.small svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.button.large { display: inline-flex; align-items: flex-start; gap: 9px; line-height: 20px; }
.button.large svg { width: 18px; height: 18px; margin-top: -1px; }
:is(.button.large, .round-link) path { fill: none; stroke: currentColor; stroke-width: 2; }

/* Header: white text over the hero, a white sticky bar once the page scrolls. The menu opens
   from the hamburger as a panel under the header. */
.site-header { position: absolute; inset: 0 0 auto; z-index: 20; color: #fff; background: linear-gradient(rgba(0, 0, 0, 0.5), transparent); transition: background 0.2s; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 60px; padding-inline: 20px; }
/* On narrow phones nestech.dk sizes the logo to 29% of the header beside the menu button. */
.logo img { width: min(87px, 0.29 * (100vw - 76px)); }
.nav-toggle { display: block; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.nav-toggle svg { display: block; width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.site-nav { display: flex; align-items: center; gap: 32px; }
.js .site-nav { display: none; position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: flex-start; padding: 24px 30px; background: var(--blue-dark); color: #fff; }
.js .site-nav.open { display: flex; }
.site-nav ul { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.site-nav a { font: 600 18px/1.2 var(--serif); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--blue); }
.lang-switcher img { width: 16px; height: 11px; }
.scrolled .site-header { position: fixed; height: 60px; background: #fff; color: #222; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.scrolled .header-inner { height: 60px; }

/* Hero */
.hero { position: relative; display: flex; align-items: center; min-height: 450px; padding: 30px 0; color: #fff; background: #1d3347 center / cover no-repeat; }
.hero-home { background-image: url("../images/pages/hero-home.jpg"); }
.hero-products { background-image: url("../images/pages/hero-products.jpg"); }
.hero-customers { background-image: url("../images/pages/hero-customers.jpg"); }
.hero-publications { background-image: url("../images/pages/hero-publications.jpg"); }
.hero-about { background-image: url("../images/pages/hero-about.jpg"); }
.hero-careers { background-image: url("../images/pages/hero-careers.jpg"); }
.hero-press { background-image: url("../images/pages/hero-press.jpg"); }
.hero-contact { background-image: url("../images/pages/hero-contact.jpg"); background-position: 0 0; }
.hero-privacy, .hero-thanks, .hero-not-found { background-image: url("../images/pages/hero-text.jpg"); }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 7, 22, 0.25); }
.hero > * { position: relative; }
.hero .hero-inner { width: 100%; max-width: 920px; margin-inline: auto; padding-inline: 50px; }
.hero h1 { font: 400 30px/1 var(--serif); margin-bottom: 15px; }
.hero .lead { font: 600 20px/1.2 var(--sans); margin-bottom: 15px; }
.hero .hero-inner > :last-child { margin-bottom: 0; }

/* Text next to an image (.split), or above it (.stack), spaced as Elementor's widgets are: 30px
   under a heading, 10px between paragraphs. On phones the text's children and the image become one
   column, ordered: heading, first paragraph, image, the rest. Split's Mobile parameter moves the
   image to the start or the end instead. Sections are classed by their text key
   (.products-intro) for the paddings and offsets Elementor set on one section alone. */
.split, .stack { display: flex; flex-direction: column; }
.split > .split-text { display: contents; }
:is(.split-text, .stack) > * { order: 4; margin: 0 0 10px; }
:is(.split-text, .stack) > h2 { order: 1; margin-bottom: 30px; }
:is(.split-text, .stack) > p:first-of-type { order: 2; }
:is(.split-text, .stack) > p:last-of-type { margin-bottom: 0; }
.split > .image-pair, .stack > img { order: 3; margin: 20px 0 30px; }
.mobile-end > .image-pair { order: 5; margin: 60px 0 0; }
.mobile-start > .image-pair { order: 0; margin: 0; }
.image-pair { display: grid; gap: 20px; }
.split img { box-shadow: 0 0 10px rgba(0, 0, 0, 0.38); }
.stack > img { margin-inline: auto; }

/* Produkter. "Altid opdateret" overlaps its two screenshots, Depot first and Cassiopeia over it
   from 110px above Depot's bottom, and its heading over Cassiopeia's last 50px. */
.products-intro, .products-cassiopeia, .products-quote1, .products-quote2 { padding-block: 30px; }
.products-quote1 blockquote, .products-quote2 blockquote { padding: 10px; }
.products-updated { padding-block: 30px; }
.products-updated:has(.pair) { padding-bottom: 60px; }
.products-updated .pair .image-pair { display: flex; flex-direction: column; gap: 0; margin-top: -30px; }
.products-updated .pair .image-pair img { box-shadow: none; }
.products-updated .pair .image-pair img:last-child { order: -1; width: 450px; max-width: none; margin-left: -60px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.38); }
.products-updated .pair .image-pair img:first-child { position: relative; z-index: 1; width: 370px; max-width: none; margin: -110px 0 0 10px; }
.products-updated .pair h2 { position: relative; z-index: 2; margin-top: -50px; }
.products-modules { padding-block: 30px; }
.products-modules .stack { padding: 10px; }

/* Karriere. Phones show no photo next to "Den bedste arbejdsplads" on nestech.dk. */
.careers-proud, .careers-workplace { padding-block: 30px; }
.careers-proud { padding-bottom: 60px; }
.careers-workplace .image-pair { display: none; }
:is(.careers-proud, .careers-workplace) img { box-shadow: none; }

/* Home: two product screenshots overlapping (wide screens), a carousel of two others (phones). */
.intro { padding-block: 30px; }
.intro .container { --width: 1240px; }
.intro :is(h2, p) { margin-bottom: 30px; }
.section.screenshots-section { padding-top: 0; }
.container.screenshots { width: calc(100% - 60px); }
/* The two screenshots overlap; the second sits 130px lower and reaches the right edge. */
.screenshots { display: grid; grid-template-columns: 1fr 200px 1fr; align-items: start; }
.screenshots img { box-shadow: 0 0 10px rgba(0, 0, 0, 0.32); }
.screenshots img:first-child { grid-area: 1 / 1 / 2 / 3; }
.screenshots img:last-child { grid-area: 1 / 2 / 2 / 4; margin-top: 130px; }
.carousel { padding: 0 30px 91px; }
.carousel .slides { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel .slides img { flex: 0 0 100%; scroll-snap-align: center; }
.carousel .dots { display: flex; justify-content: center; gap: 12px; margin-top: 19.5px; }
.carousel .dots span { width: 6px; height: 6px; border-radius: 50%; background: #ccc; }
.carousel .dots span.active { background: #000; }

/* Quote with the compass: the compass under the text on phones, beside it on wide screens. The
   compass keeps the 6px under it that it has as an inline SVG on nestech.dk. */
.quote { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.quote blockquote, .quote-text { margin: 0; padding-inline: 10px; font: 600 20px/1.2 var(--sans); }
.compass { order: 2; width: 90px; aspect-ratio: 1; justify-self: center; color: #0b0a3f; }
.products-quote1 .quote, .products-quote2 .quote { gap: 0; }

/* Home: customer quote */
.section.testimonial { padding-block: 110px; }
.testimonial .container { width: min(1260px, 100% - 60px); }
.testimonial h2 { margin-bottom: 50px; }
.testimonial blockquote { margin: 0 0 38px; padding-inline: 10px; font: 400 17px/35px var(--serif); }
.testimonial .who { display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1.3; }
.testimonial .who p { margin: 0; }
.testimonial .who .name { font-size: 18px; }
.testimonial .who img { width: 102px; }
.testimonial .more { display: flex; justify-content: center; margin: 70px 0 0; }

/* Contact call to action */
.cta { padding: 39px; }
.cta h2 { margin-bottom: 30px; }
.round-link { display: inline-block; margin-bottom: 6px; padding: 13px; border-radius: 50%; background: var(--blue); color: #fff; line-height: 0; }
.round-link svg { width: 12px; height: 12px; }
.round-link path { stroke-width: 1.6; }

/* Customers: the logo above the text on phones, beside it on wide screens. */
.customers-intro { padding-block: 30px; }
.customers-intro .quote { gap: 0; align-items: stretch; }
.customers-intro .quote > div { padding: 30px; }
.customers-intro h2 { margin-bottom: 30px; }
.customers-intro p { margin: 0; }
.customers-intro .compass { width: 100px; margin: 0 auto 36px; }
.section.customers-quote { padding: 0; }
.customers-quote .container { width: auto; padding: 10px; }
.customers-quote .quote-text { padding: 0; }

.customer-band { padding-block: 50px; --logo-width: 57%; }
.customer { display: flex; flex-direction: column; }
.customer-logo { order: -1; display: flex; justify-content: center; }
.customer-logo img { width: var(--logo-width); }
.customer-text { margin-top: 34px; }
.customer h3 { margin: 0 0 10px; font: 400 32px/38.4px var(--serif); overflow-wrap: normal; }
.customer p { margin: 0; color: var(--muted); }
/* nestech.dk sizes each logo as a share of its column, per customer. */
.customer-betri-pensjon { --logo-width: 50%; }
.customer-gabler, .customer-laegernes-pension, .customer-akademikerpension { --logo-width: 70%; }
.customer-liv { --logo-width: 43%; }
.customer-sisa { --logo-width: 34%; }
.customer-sisa .customer-logo { padding: 10px; }
.customer-paedagogernes-pension .customer-text { padding-bottom: 10px; }
.page-customers:lang(da) { padding-bottom: 1px; }
/* nestech.dk's English page is laid out on its own: it starts with the logo on the left and sizes
   four logos differently. */
:lang(en) .customer-paedagogernes-pension, :lang(en) .customer-sampension { --logo-width: 70%; }
:lang(en) .customer-betri-pensjon { --logo-width: 53%; }
:lang(en) .customer-sisa { --logo-width: 33%; }
:lang(en) .customer-sisa .customer-logo { padding: 0; }
:lang(en) .customer-paedagogernes-pension .customer-text { padding-bottom: 0; }

/* People */
/* Om os. "Et team af specialister" ends in nestech.dk's 30px for its hidden phone copy. */
.about-team, .section.about-polaris { padding-block: 30px 0; }
.about-team .split-text > p:not(:last-of-type) { margin-bottom: 30px; }
.about-team .split { padding-bottom: 30px; }
.about-polaris .quote { gap: 0; align-items: stretch; }
.about-polaris .quote > div { padding-bottom: 30px; }
.about-polaris h2 { margin-bottom: 30px; }
.about-polaris p { margin: 0 0 10px; }
.about-polaris p:last-child { margin-bottom: 0; }
.about-polaris .compass { width: 80px; margin: 0 auto 26px; }

/* People: Elementor's call-to-action tiles. The photo fills a box of fixed height, centred (as
   nestech.dk's background images are), and each column keeps a few pixels' padding around it. */
.section.people { padding: 30px 0 20px; }
.people h2 { margin-bottom: 50px; }
:is(.board, .management) .container { --gutter: 20px; }
.people-grid { display: grid; gap: 33px; margin: 0; padding: 0; list-style: none; }
.person { padding-bottom: 18px; text-align: center; }
.person-photo { overflow: hidden; }
.person img, .person .no-photo { display: block; width: 100%; height: 500px; margin-inline: auto; object-fit: cover; background: #111; }
.management .person { padding-inline: 9px; }
.management .person-bio { margin-inline: -9px; }
/* On phones nestech.dk puts 10% of a tile's width above each board member and employee. */
:is(.board, .employees) .people-grid { gap: 0; }
:is(.board, .employees) .person + .person { margin-top: 10%; }
.section.board { padding-bottom: 51px; }
.person h3 { margin: 18px 0 0; font: 700 16px/27px var(--serif); letter-spacing: -0.67px; text-transform: uppercase; }
.person-title { margin: 0; font-size: 14px; line-height: 20px; }
.person-bio { margin: 27px 0 0; font: 400 16px/27.2px var(--sans); color: var(--muted); }
/* The press library's names and captions look like the people's. */
.library h3 { margin: 16px 0 4px; font: 700 16px/27px var(--serif); letter-spacing: -0.67px; text-transform: uppercase; }
.library p { margin: 0; font-size: 14px; line-height: 20px; }

/* Publications */
/* Publications: The7's post cards. The title box is 80px tall whatever its length, as on nestech.dk. */
.section.publications { padding-block: 40px; }
.container.publication-list { --gutter: 10px; }
.publication-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 30px 15px; margin-block: 0; padding: 0; list-style: none; }
.publication-card { display: flex; flex-direction: column; padding-bottom: 50px; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); text-align: left; }
.publication-card img { width: 100%; aspect-ratio: 1.7; object-fit: cover; }
.publication-card .card-body { display: flex; flex-direction: column; align-items: flex-start; padding: 30px 30px 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.publication-card h2 { height: 80px; margin: 0 0 10px; font: 700 20px/24px var(--serif); color: var(--text); }
.publication-card h2 a { text-decoration: none; }
.publication-card time { margin-bottom: 10px; font-size: 12px; line-height: 15.6px; color: var(--grey); }
.publication-card p { margin: 0; }
.publication-card .button { margin-top: 22px; }
/* A publication: date and title centred in a blue block, the image partly over its lower edge. */
.publication-head { display: flex; flex-direction: column; justify-content: center; height: 275px; padding-top: 30px; background: linear-gradient(rgba(34, 34, 34, 0.5), rgba(34, 34, 34, 0.5)), var(--blue-dark); color: #fff; }
.container:is(.publication-head > *, .publication-image) { --gutter: 40px; text-align: left; }
.publication-head time { display: block; margin-bottom: 30px; font-size: 15px; line-height: 15px; text-transform: capitalize; }
.publication-head h1 { margin: 0; font: 400 25px/25px var(--serif); }
.publication-image { margin-top: 40px; }
.publication-image img { margin-inline: auto; }
.container.publication-body { --gutter: 30px; margin-block: 40px; color: var(--muted); text-align: left; }
/* The three newest publications were laid out in Elementor on nestech.dk: their text sits 10px further in and lower. */
:is(.publication-it-aktoer-lancerer-game-changer-ipensionsbranchen, .publication-dansk-pensionsleverandoer-gaar-efter-flere-udenlandske-kunder-efter-norsk-indtog, .publication-dansk-pensionsleverandoer-gaar-i-luften-med-ny-platform-til-norsk-kunde) .publication-body { margin-block: 50px 60px; padding-inline: 10px; text-align: center; }
.publication-body p { margin: 0 0 10px; }
.publication-body .button { padding: 11.338px 20.662px; border-radius: 5px; font-size: 14px; line-height: 14px; }

/* Press: the WordPress page is laid out wider than the others. .full sections sit 10px from the
   edge on wide screens, and the library runs 10px further out. Library images have a fixed height
   and zoom in on hover, as Elementor's call-to-action boxes did. */
.section.full { padding-block: 30px; }
.split.full > .image-pair { margin-top: 30px; }
.split.full img { box-shadow: none; }
.press-library h2 { margin-bottom: 30px; }
.press-contact h2 { margin-bottom: 30px; }
.press-contact p { margin: 0 0 2px; line-height: 26px; }
.press-contact p:last-of-type { margin: 0; line-height: 24px; }
.press-contact a { color: inherit; text-decoration: none; }
.section.press-library { padding-bottom: 30px; }
.library { display: grid; gap: 0; margin: 30px -20px 0; padding: 0; list-style: none; text-align: center; }
.library li + li { margin-top: 10%; }
.press-image { overflow: hidden; }
.library img { width: 100%; height: 310px; object-fit: cover; }
.library h3 { margin: 18px 0 0; }
.library p { margin-bottom: 15px; }
.library a { display: inline-block; margin-bottom: 18px; padding: 12px 24px; color: var(--blue); font-size: 19px; line-height: 1; }
/* nestech.dk puts the portraits and the other pictures in two sections: no gap where they meet. */
.press-portrait + .press-photo { margin-top: 0; }

/* Contact */
/* Contact: Elementor's form fields, label above field with no gaps; the map under the address on
   phones and beside it on wider screens. */
.section.contact { padding-block: 60px; }
.contact h3 { margin: 0 0 60px; }
.contact-form { display: grid; text-align: left; }
.contact-form label { display: block; color: var(--muted); }
.contact-form label.required > span::after { content: " *"; padding-left: 0.2em; color: #f00; }
.contact-form input, .contact-form textarea { display: block; width: 100%; height: 59px; padding: 7px 20px; border: 1px solid var(--border); border-radius: 1px; font: 18px/25.2px var(--serif); }
.contact-form textarea { height: 167.1px; }
.contact-form [aria-invalid="true"] { border-color: var(--error); }
.contact-form .button { display: flex; justify-content: center; gap: 12px; width: 100%; margin-top: 1px; padding: 14px 24px; line-height: 19px; }
.contact-form .button svg { width: 18px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.field-row { display: grid; }
.hp { position: absolute; left: -9999px; }
.form-status:empty { display: none; }
/* Until the visitor accepts the captcha or the map: why the form can't be sent, and the map's notice. */
.captcha-consent { margin-bottom: 20px; color: var(--muted); }
.captcha-consent p { margin-bottom: 12px; }
.contact-form .captcha-consent .button { display: inline-block; width: auto; padding: 10px 20px; font-size: 16px; }
.contact-form .button:disabled { opacity: 0.5; cursor: default; }
.map-consent { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; height: 100%; padding: 30px; text-align: center; }
.map-consent p { max-width: 360px; margin: 0; }
.contact-info { display: grid; }
.contact-info .map { height: 462px; background: #e5e3df; }
.contact-address { order: -1; display: flex; flex-direction: column; justify-content: center; height: 280px; padding: 50px; background: var(--tint); line-height: 28px; text-align: center; }
.contact-address strong { margin-bottom: 20px; line-height: 24px; }
.contact-address a { text-decoration: none; }

/* Text pages: a lower hero with the title centred over a blue line, the text full width in grey. */
.hero:is(.hero-privacy, .hero-thanks, .hero-not-found) { display: block; min-height: 0; height: 332px; padding: 166px 20px 0; text-align: center; }
:is(.hero-privacy, .hero-thanks, .hero-not-found)::before { background: rgba(0, 0, 0, 0.5); }
:is(.hero-privacy, .hero-thanks, .hero-not-found) .hero-inner { max-width: none; padding: 0; }
:is(.hero-privacy, .hero-thanks, .hero-not-found) h1 { margin: 0; font-size: 30px; line-height: 30px; }
:is(.hero-privacy, .hero-thanks, .hero-not-found) h1::after { content: ""; display: block; width: 84%; margin: 15px auto 0; border-top: 3px solid var(--blue); }
.section.text-page { padding-block: 60px; }
.container.prose { width: calc(100% - 20px); color: var(--muted); text-align: left; }
.prose h2 { margin: 0 0 10px; font: 700 16px/24px var(--serif); }
.prose p { margin: 0 0 10px; }

/* Footer */
.site-footer { background: var(--blue-dark); color: #fff; font-size: 16px; text-align: center; }
.footer-inner { display: grid; justify-items: center; padding: 58px var(--gutter) 53px; }
.site-footer address { line-height: 28px; }
.site-footer address strong { margin-bottom: 20px; line-height: 20px; }
.footer-inner > span { display: none; }
.footer-nav { margin-top: 28px; }
.site-footer a { text-decoration: none; }
.footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px; margin: 0; padding: 0; list-style: none; }
.footer-follow { display: flex; align-items: center; gap: 8px; align-self: end; margin-top: 20px; padding-right: 8px; font-size: 19px; line-height: 1; }
.footer-follow svg { width: 16px; height: 16px; fill: currentColor; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 16px; margin: 0 20px; padding: 10px 0 20px; border-top: 1px solid; list-style: none; font-size: 12px; line-height: 24px; }
.footer-bottom li { display: flex; align-items: center; }
.footer-bottom li:not(:last-child)::after { content: ""; position: relative; right: -8px; height: 35%; border-left: 1px solid; }

/* Consent box: small, in the bottom left corner until the visitor chooses, the page usable behind
   it; reject and accept alike. The cookie button in the same corner opens it again. */
.consent-banner { position: fixed; inset: auto auto 20px 20px; z-index: 40; width: min(380px, 100% - 40px); margin: 0; padding: 20px; border: 0; border-radius: 4px; background: #fff; color: var(--text); box-shadow: 0 0 16px rgba(0, 0, 0, 0.25); font-size: 14px; line-height: 20px; }
.consent-banner h2 { margin-bottom: 8px; font-size: 18px; }
.consent-banner p { margin: 0 0 14px; }
.consent-banner a { color: var(--blue); text-decoration: none; }
.consent-services { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; border: 0; }
.consent-services legend { margin-bottom: 8px; padding: 0; font-weight: 700; }
.consent-services label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.consent-services input { flex: none; margin: 3px 0 0; }
.consent-services strong { display: block; }
.consent-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.consent-choices .button { flex: 1 1 100px; padding: 10px 14px; font-size: 15px; }
.consent-choices [data-consent="selected"] { flex-basis: 100%; }
.consent-choose { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--blue); font: inherit; cursor: pointer; }
.consent-settings { position: fixed; left: 20px; bottom: 20px; z-index: 30; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--blue-dark); box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); cursor: pointer; }
.consent-banner[open] ~ .consent-settings { display: none; }
.consent-settings svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.consent-settings circle { fill: currentColor; stroke: none; }

/* Visibility by device, at Elementor's breakpoints. As ranges, wider screens never have to
   restore the element's own display. */
@media (width < 701px) { .no-phone, .desktop-only { display: none; } }
@media (width >= 701px) { .phone-only { display: none; } }
@media (width < 1001px) { .desktop-only { display: none; } }

/* Tablet and desktop */
@media (width >= 701px) {
  /* A word longer than its column runs past it rather than breaking, as on nestech.dk. */
  h1, h2, h3 { overflow-wrap: normal; }
  h2 { font-size: 40px; }
  .section { padding-block: 100px; }
  .container.narrow { width: calc(0.762 * min(var(--width), 100% - 2 * var(--gutter))); }

  .compass, .customer-logo { order: 0; }
  .customer-text { margin-top: 0; text-align: left; }
  .customers-intro .quote { text-align: left; }
  .section.customers-quote { padding-block: 100px; }
  .customer-sisa .customer-text { align-self: start; }
  :lang(en) .customer-sisa .customer-text { align-self: auto; }
  :lang(en) .customer > .customer-text { order: 2; }
  :lang(en) .customer.reverse > .customer-text { order: 0; }
  .reverse > :first-child { order: 2; }

  .intro { padding-block: 110px 90px; }
  .about-team { padding-block: 100px; }
  .about-team .split-text > p:not(:last-of-type) { margin-bottom: 10px; }
  .about-polaris .quote > div { padding-bottom: 0; }
  .products-updated:has(.pair) { padding-bottom: 100px; }
  .careers-workplace .image-pair { display: grid; }
  .testimonial .container { width: min(1280px, 100% - 20px); }
  .testimonial blockquote { padding-inline: 30px; font-size: 27px; }
  .testimonial .who { flex-direction: row; align-items: flex-start; gap: 20px; padding-left: 21px; text-align: left; }
  .testimonial .who img { width: 150px; }

  .customer { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .customer h3 { font-size: 40px; line-height: 48px; }

  .people-grid { grid-template-columns: repeat(4, 1fr); row-gap: 30px; }
  .people-grid.three { grid-template-columns: repeat(3, 1fr); }
  .section.people { padding: 60px 0 0; }
  .section.board { padding: 110px 0 30px; }
  .section.management { padding-bottom: 60px; }
  .board h2 { margin-bottom: 60px; }
  .management h2 { margin-bottom: 69px; }
  .employees h2 { margin-bottom: 70px; }
  .people-grid { column-gap: 0; }
  .employees .container { --gutter: 60px; }
  .employees .person { padding-inline: 3%; }
  :is(.board, .employees) .people-grid { row-gap: 30px; }
  :is(.board, .employees) .person + .person { margin-top: revert-layer; }
  .board .container { width: min(1300px, 100% - 100px); }
  .board .people-grid { width: 75%; margin-inline: auto; column-gap: 3%; }

  .section.publications { padding-block: 90px; }
  .library { grid-template-columns: repeat(3, 1fr); margin-inline: -10px; }
  .library li + li { margin-top: revert-layer; }

  .field-row, .contact-info { grid-template-columns: 1fr 1fr; }
  .contact-address { order: 0; height: 462px; padding: 10px; }

  .footer-bottom { font-size: 14px; }
}

/* Tablet only: Elementor's tablet values, where they differ from both the phone and the desktop
   ones. Tablets keep the phone's centred, single-column sections, only larger. */
@media (701px <= width < 1001px) {
  :root { --gutter: 50px; }

  .site-header { height: 90px; }
  .header-inner { margin-top: 15px; padding-inline: 0; }
  .scrolled .header-inner { margin-top: 0; }

  .hero { min-height: 500px; }
  .hero.tall, .hero-careers { min-height: 600px; }
  .hero:is(.hero-privacy, .hero-thanks, .hero-not-found) { height: 510px; padding: 237px 0 0; }
  :is(.hero-privacy, .hero-thanks, .hero-not-found) h1 { font-size: 40px; line-height: 40px; }
  :is(.hero-privacy, .hero-thanks, .hero-not-found) h1::after { width: 51%; }
  .hero h1 { font-size: 40px; }
  .hero .lead { font-size: 25px; }

  .split.mobile-after-first > .image-pair, .stack > img { order: 5; }
  .split.mobile-after-first > .image-pair { margin: 60px 0 0; }
  .mobile-end > .image-pair, .stack > img { margin: 30px auto 0; }

  .intro .container { width: calc(100% - 120px); }
  .section.screenshots-section { padding-bottom: 50px; }

  .quote blockquote { font-size: 25px; }
  .quote-text { font-size: 30px; }
  .compass { width: 100px; }

  .products-quote1 .compass, .products-quote2 .compass { width: 102px; margin-bottom: 6px; }
  .products-updated .pair .image-pair img:last-child { width: 731px; margin-left: -60px; }
  .products-updated .pair .image-pair img:first-child { width: 734px; }
  :is(.careers-proud, .careers-workplace) .image-pair { margin: 60px 0 0; padding: 10px; }

  .cta { padding: 120px; }
  .round-link svg { width: 14px; height: 14px; }

  .container.customer { --gutter: 30px; }
  .customer-text { padding-right: 30px; }
  .reverse > .customer-text, :lang(en) .customer:not(.reverse) > .customer-text { padding: 0 0 0 30px; }
  :lang(en) .customer.reverse > .customer-text { padding: 0 30px 0 0; }

  .management .container { --gutter: 50px; }
  .person img, .person .no-photo { height: 240px; }
  .person h3 { font-size: 20px; }

  .container.publication-list { --gutter: 80px; }
  .publication-head { height: 353px; padding-top: 0; }
  .publication-image { margin-top: -70px; }
  .container.publication-body { --gutter: 40px; margin-block: 70px 110px; }
  :is(.publication-it-aktoer-lancerer-game-changer-ipensionsbranchen, .publication-dansk-pensionsleverandoer-gaar-efter-flere-udenlandske-kunder-efter-norsk-indtog, .publication-dansk-pensionsleverandoer-gaar-i-luften-med-ny-platform-til-norsk-kunde) .publication-body { margin-block: 80px 130px; }

  .library img, .library .press-portrait img { height: 240px; }
  .library { column-gap: 23.4px; row-gap: 0; margin-inline: -20px -60px; }
  .library h3 { font-size: 20px; }
  .library li:not(.press-portrait) a { margin-bottom: 48px; }
  .section.full { padding-block: 110px; }
  .section.press-dialogue { padding-block: 100px; }
  .section.press-library { padding: 50px 0 0; }
  .press-library .container { --gutter: 40px; padding: 10px 40px 0 0; }
  .press-dialogue .split.full > .image-pair { margin: 40px -40px 10px; }

  .section.about-polaris { padding-block: 50px; }
  .about-polaris .container { --gutter: 30px; }
  .about-polaris .compass { width: 100px; margin: 10px auto 16px; }
  .customers-intro .quote > div { padding: 0; }
  .customers-quote .container { width: min(var(--width), 100% - 2 * var(--gutter)); }
  .contact .container { --gutter: 80px; }
  .customers-intro .compass { align-self: flex-start; width: 141px; margin: 10px 0 16px 107px; }
  :lang(en) .customers-intro .compass { margin-left: 109.5px; }


  .footer-follow { margin-top: 15px; }
}

/* Desktop: the menu inline in the header, two columns, and every value Elementor sets differently
   from its tablet layout. */
@media (width >= 1001px) {
  :root { --width: 1280px; --gutter: 60px; }
  main { text-align: start; }

  .header-inner { width: min(1300px, 100% - 60px); height: 100px; margin-inline: auto; padding-inline: 0; }
  .nav-toggle { display: none; }
  /* The menu and the flags take the header beside the logo's 300px and wrap together until they
     fit, as on the WordPress site. Items keep 16px on both sides but the outer ones, so a wrapped
     first line ends 16px short of the edge. */
  .js .site-nav { display: flex; position: static; flex-flow: row wrap; justify-content: flex-end; align-items: center; gap: 6px 0; max-width: calc(100% - 300px); padding: 0; background: none; color: inherit; }
  .site-nav ul { display: contents; }
  .site-nav li { padding-inline: 16px; }
  .site-nav li:first-child { padding-left: 0; }
  .site-nav .lang-switcher li { padding: 0 0 0 16px; }

  .hero { min-height: 600px; padding-block: 100px; }
  .hero.tall { min-height: 800px; }
  .hero .hero-inner { width: min(1300px, 100% - 100px); max-width: none; padding: 0 360px 0 0; }
  .hero h1 { font-size: 50px; }
  .hero .lead { font-size: 25px; }

  /* Elementor's two columns: 10px padding, the text 40px further in from the outer edge, both
     centred. .reverse swaps them: the first child goes last. Where phones put the image after the
     first paragraph, nestech.dk keeps 30px under the text for the hidden phone copy. */
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; padding-block: 10px; }
  .split > .split-text { display: block; padding-right: 40px; }
  .split.reverse > .split-text { padding: 0 0 0 40px; }
  .split.mobile-after-first > .split-text { padding-bottom: 30px; }
  .stack { display: block; padding-block: 10px; }
  .split > .image-pair { order: 0; margin: 0; }
  .stack > img { margin: 30px auto 0; }

  .products-updated .pair { grid-template-columns: 504.02fr 359.48fr 316.5fr; gap: 0; padding-block: 0; width: calc(min(var(--width), 100% - 2 * var(--gutter)) + 20px); }
  .products-updated .pair .split-text { padding: 10px 10px 10px 50px; }
  .products-updated .pair .image-pair { display: contents; }
  .products-updated .pair .image-pair img:first-child { position: static; z-index: auto; align-self: start; width: calc(100% + 40px); margin: -50px 0 0 10px; }
  .products-updated .pair .image-pair img:last-child { order: 0; align-self: center; width: calc(100% + 100px); margin: 0 0 0 -50px; }
  .products-updated .pair h2 { margin-top: 0; }
  .careers-workplace .split > .split-text { padding-bottom: 30px; }

  .quote { display: grid; grid-template-columns: 260px 1fr; gap: 60px; }
  .quote.reverse { grid-template-columns: 1fr 260px; }
  .quote blockquote, .quote-text { padding-inline: 0; font-size: 30px; }
  .compass { width: 220px; }
  :is(.products-quote1, .products-quote2) .container { width: calc(min(var(--width), 100% - 2 * var(--gutter)) + 20px); }
  .products-quote1 .quote { grid-template-columns: 1fr 2fr; gap: 0; }
  .products-quote2 .quote { grid-template-columns: 2fr 1fr; gap: 0; }
  .products-quote1 blockquote, .products-quote2 blockquote { padding: 0 10px; }
  .products-quote1 .compass, .products-quote2 .compass { justify-self: center; width: 213px; margin: 10px 40px 16px 0; }
  .section.about-polaris { padding-block: 100px; }
  .about-team .split { padding-bottom: 10px; }
  .about-team .split > .split-text { padding-bottom: 30px; }
  .about-polaris .quote { grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; padding-block: 10px; }
  .about-polaris .quote > div { padding-left: 40px; }
  .about-polaris .compass { justify-self: center; width: 213px; margin: 0 0 6px; }
  .products-modules .stack { padding-inline: 0; }

  .container.screenshots { width: min(1300px, 100%); }
  .testimonial blockquote { padding-inline: 0; }
  .testimonial .who img { width: 200px; }
  .testimonial .more { justify-content: flex-end; margin-top: 50px; }
  .round-link svg { width: 17px; height: 17px; }

  .customers-intro .quote { grid-template-columns: 790.19fr 389.81fr; align-items: center; width: calc(min(var(--width), 100% - 2 * var(--gutter)) + 20px); }
  :lang(en) .customers-intro .quote { grid-template-columns: 2fr 1fr; }
  .customers-intro .quote > div { padding: 10px 50px 10px 10px; }
  .customers-intro .compass { justify-self: center; width: 213px; margin: 10px 0 16px; }
  .customers-quote .container { width: calc(min(var(--width), 100% - 2 * var(--gutter)) + 20px); }
  .contact .container { width: calc(min(var(--width), 100% - 2 * var(--gutter)) + 20px); }

  .customer-band { padding-block: 80px; }
  .container.customer { width: calc(min(var(--width), 100% - 2 * var(--gutter)) + 20px); }
  .customer-text { padding-right: 50px; }
  .reverse > .customer-text, :lang(en) .customer:not(.reverse) > .customer-text { padding: 0 0 0 50px; }
  :lang(en) .customer.reverse > .customer-text { padding: 0 50px 0 0; }

  .person { padding-bottom: 28px; }
  .person h3 { margin: 28px 0 12px; font-size: 24px; line-height: 29px; }
  .person-title { font-size: 16px; line-height: 22px; }
  .person-bio { margin-top: 37px; font-size: 18px; line-height: 30.6px; }
  .management .container { --gutter: 60px; width: calc(min(var(--width), 100% - 2 * var(--gutter)) + 20px); }
  .management .person { padding-bottom: 0; }
  .library h3 { font-size: 24px; line-height: 29px; }
  .library p { font-size: 16px; line-height: 22px; }

  .publication-list { padding-inline: 20px; }
  .container.publication-list { --gutter: 60px; }
  .publication-head { height: 600px; padding-top: 0; }
  .container:is(.publication-head > *, .publication-image, .publication-body) { width: 747px; }
  .publication-image { margin-top: -200px; }
  .container.publication-body { margin-block: 70px 60px; }
  :is(.publication-it-aktoer-lancerer-game-changer-ipensionsbranchen, .publication-dansk-pensionsleverandoer-gaar-efter-flere-udenlandske-kunder-efter-norsk-indtog, .publication-dansk-pensionsleverandoer-gaar-i-luften-med-ny-platform-til-norsk-kunde) .publication-body { margin-block: 80px; }

  .section.full { padding-block: 110px; }
  .section.press-library { padding-bottom: 80px; }
  .container.full { --width: 1280px; --gutter: 10px; }
  .split.full { grid-template-columns: calc(50% - 50px) calc(50% - 10px); gap: 60px; padding-block: 0; }
  .split.full > .split-text { padding: 0; }
  .split.full > .image-pair { margin-top: 0; }
  .hero-press .hero-inner { padding-right: 300px; }
  .hero:is(.hero-privacy, .hero-thanks, .hero-not-found) { height: 473px; padding: 260px 0 0; }
  :is(.hero-privacy, .hero-thanks, .hero-not-found) .hero-inner { width: auto; padding: 0; }
  :is(.hero-privacy, .hero-thanks, .hero-not-found) h1 { font-size: 60px; line-height: 60px; }
  :is(.hero-privacy, .hero-thanks, .hero-not-found) h1::after { width: 40%; }
  .library { gap: 30px 3%; margin-top: 60px; }
  .library img { height: 200px; }
  .library .press-portrait { margin-bottom: -30px; }
  .library .press-portrait img { height: 412px; }
  .library h3 { margin-top: 28px; }
  .library a { margin-bottom: 28px; }

  .site-footer { text-align: start; }
  .footer-inner { width: min(1140px, 100% - 70px); grid-template-columns: 1fr auto; justify-items: normal; gap: 0 30px; margin-inline: auto; padding: 38px 0 23px; }
  .footer-inner > span { display: block; }
  .footer-nav { margin-top: -2px; }
  .footer-follow { margin-top: 2px; }
  .footer-nav ul { flex-wrap: nowrap; justify-content: normal; gap: 16px; }
  .footer-follow { justify-self: end; }
  .footer-bottom { width: min(1170px, 100% - 40px); margin-inline: auto; padding: 19px 0 20px; }
}