/*
 * The new design for dryft.se (design handoff "Dryft · Moduler / Mallar / Playbook").
 *
 * Every rule is scoped under .nd_page, so a page opts in by wrapping its content in
 * <div class="nd_page"> and loading this file, and no other page is touched. The site-wide
 * stylesheets in base.html still load, so some rules below are stronger than they would
 * otherwise need to be: they win over legacy rules such as `body .richtextWrap *`.
 *
 * Breakpoints: mobile up to 767px, tablet 768-1023px (desktop layout with adjustments),
 * desktop from 1024px.
 *
 * Weights follow the size (Hanna, 2026-11-02): text from 18 px up, such as the ingress, is
 * Light 300; body text and everything smaller is Regular 400 (16/28, +0.01em); marked words,
 * buttons, links, eyebrows and all headings are Bold 700. Small headings are 16 px, the size of
 * the text, so a page has three sizes of heading: hero, big heading and the text's own size.
 */

@font-face {
    font-family: 'Poppins';
    font-weight: 300;
    font-display: swap;
    src: url('/static/homepage/fonts/poppinslight.woff') format('woff');
}
@font-face {
    font-family: 'Poppins';
    font-weight: 400;
    font-display: swap;
    src: url('/static/homepage/fonts/poppinsregular.woff') format('woff');
}
@font-face {
    font-family: 'Poppins';
    font-weight: 700;
    font-display: swap;
    src: url('/static/homepage/fonts/poppinsbold.woff') format('woff');
}

.nd_page {
    --nd_green: #2c474d;
    --nd_green_dark: #1a353b;
    --nd_off_white: #fafafa;
    --nd_white: #ffffff;
    --nd_sand_light: #f5f2ed;
    /* Only behind a cut-out staff portrait whose sand block is narrower than half the content
       (Playbook 02 Färg); a wider one, as in a framed person box on a phone, is light sand. */
    --nd_sand_portrait: #f0ece5;
    --nd_placeholder: #e6e2da;
    --nd_line: #cdcdcf;
    --nd_line_light: #e6e2da;
    --nd_gray_text: #5f686c;
    --nd_gray_on_green: #879da2;
    --nd_gray_dash: #9999a2;
    /* A dashed line down (MODULER.md, Streckad linje): 1 px, 3 px dash and 3 px gap, drawn as a
       pattern, never with border-style: dashed, which every browser draws differently. */
    --nd_dash_line_down: linear-gradient(to bottom, var(--nd_gray_dash) 50%, transparent 50%) 0 0 / 1px 6px repeat-y;
    --nd_orange: #f09443;
    --nd_orange_dark: #c9761a;
    --nd_shadow_card: 0 0 6px rgba(0, 0, 0, .02), 0 2px 4px rgba(0, 0, 0, .08);
    --nd_shadow_popup: 0 0 4px rgba(0, 0, 0, .04), 0 8px 16px rgba(0, 0, 0, .08);
    --nd_ease: cubic-bezier(.2, 0, .2, 1);
    --nd_mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --nd_gutter: 40px;
    --nd_section_gap: 80px;
    --nd_below_menu: 48px;
    --nd_block_padding: 64px;
    --nd_content_width: 1360px;

    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--nd_green);
    background: var(--nd_off_white);
    -webkit-font-smoothing: antialiased;
}
@media (max-width: 1023px) {
    .nd_page {
        --nd_gutter: 32px;
        --nd_below_menu: 40px;
        --nd_block_padding: 48px;
    }
}
@media (max-width: 767px) {
    .nd_page {
        --nd_gutter: 16px;
        --nd_section_gap: 48px;
        --nd_below_menu: 32px;
        --nd_block_padding: 40px;
    }
}

/* The legacy stylesheets style bare tags (p, h2, a, img, pre) site-wide. Reset what they set. */
.nd_page *,
.nd_page *::before,
.nd_page *::after {
    box-sizing: border-box;
}
.nd_page h1,
.nd_page h2,
.nd_page h3,
.nd_page h4,
.nd_page p,
.nd_page ul,
.nd_page ol,
.nd_page li,
.nd_page figure,
.nd_page pre {
    margin: 0;
    padding: 0;
    font-family: inherit;
    color: inherit;
    letter-spacing: normal;
    text-transform: none;
}
.nd_page p,
.nd_page li {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}
.nd_page img {
    display: block;
    max-width: 100%;
    border-radius: 0;
}
.nd_page a {
    color: inherit;
}
.nd_page :focus-visible {
    outline: 2px solid var(--nd_green);
    outline-offset: 2px;
}
.nd_page .nd_no_wrap {
    white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    .nd_page *,
    .nd_page *::before,
    .nd_page *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
}

/* ---------- Layout ---------- */

.nd_section {
    padding: 0 var(--nd_gutter);
    margin-top: var(--nd_section_gap);
}
.nd_container {
    max-width: var(--nd_content_width);
    margin: 0 auto;
}
/* A section that follows another on the same background starts with a thin line. */
.nd_section_ruled > .nd_container {
    border-top: 1px solid var(--nd_line);
    padding-top: 40px;
}
/* A full-width block with its own background: the light sand rating module, for example. */
.nd_band {
    padding: var(--nd_section_gap) var(--nd_gutter) var(--nd_block_padding);
    margin-top: var(--nd_section_gap);
    background: var(--nd_sand_light);
}
/* The section after a block with a background has no line above it, and nor does the section
   after a framed module (a dashed box in full width): the frame already separates them. */
.nd_band + .nd_section_ruled > .nd_container,
.nd_section_framed + .nd_section_ruled > .nd_container,
.nd_section_framed + .nd_anchor + .nd_section_ruled > .nd_container {
    border-top: 0;
    padding-top: 0;
}
.nd_stack > * + * {
    margin-top: 24px;
}

/* ---------- Type ---------- */

.nd_h1 {
    font-weight: 700;
    font-size: clamp(48px, 5.4vw, 76px);
    line-height: 1.18;
    letter-spacing: -0.01em;
    text-wrap: balance;
    hyphens: manual;
}
.nd_h2,
.nd_rich h2 {
    font-weight: 700;
    font-size: 52px;
    line-height: 1.18;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.nd_h3,
.nd_rich h3,
.nd_rich h4 {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
}
.nd_page .nd_eyebrow {
    display: block;
    font-weight: 700;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nd_gray_text);
}
.nd_ingress,
.nd_ingress p {
    font-weight: 300;
    font-size: 18px;
    line-height: 28px;
}
.nd_page .nd_mono {
    font-family: var(--nd_mono);
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
@media (max-width: 1023px) {
    .nd_h1 {
        font-size: 48px;
    }
}
@media (max-width: 767px) {
    .nd_h1 {
        font-size: 44px;
        line-height: 1.2;
    }
    .nd_h2,
    .nd_rich h2 {
        font-size: 32px;
        line-height: 1.2;
    }
}

/* Copy from the old CMS: headings, paragraphs and lists, cleaned of inline styles by the
   clean_cms_richtext filter. Spacing comes from here, not from &nbsp; paragraphs. */
.nd_page .nd_rich,
.nd_page .nd_rich p,
.nd_page .nd_rich li {
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: .01em;
}
.nd_page .nd_rich > * + *,
.nd_page .nd_rich .richtextWrap > * + * {
    margin-top: 16px;
}
.nd_page .nd_rich h2 + *,
.nd_page .nd_rich .richtextWrap > h2 + * {
    margin-top: 24px;
}
.nd_page .nd_rich ul,
.nd_page .nd_rich ol {
    padding-left: 20px;
}
.nd_page .nd_rich strong,
.nd_page .nd_rich b,
.nd_page .nd_rich .bold {
    font-weight: 700;
}
.nd_page .nd_rich a,
.nd_page .nd_text_link {
    color: var(--nd_green) !important;
    font-weight: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.nd_page .nd_rich a strong {
    font-weight: inherit;
}
/* The old CMS's orange gradient links (global_styles.css) are plain text links here. */
.nd_page .grad_text {
    background: none;
    -webkit-text-fill-color: currentColor;
}
/* The old CMS wrapped headings in <strong>; a heading keeps its own weight (Bold). */
.nd_page .nd_rich :is(h1, h2, h3, h4) :is(strong, b) {
    font-weight: inherit;
}
/* A small heading inside copy starts a new part, so it gets more air above than below. */
.nd_page .nd_rich * + :is(h3, h4),
.nd_page .nd_rich .richtextWrap > * + :is(h3, h4) {
    margin-top: 32px;
}
.nd_page .nd_rich :is(h3, h4) + *,
.nd_page .nd_rich .richtextWrap > :is(h3, h4) + * {
    margin-top: 8px;
}
.nd_page .nd_rich strong,
.nd_page .nd_rich span {
    line-height: inherit;
}
.nd_page .nd_rich a:hover,
.nd_page .nd_text_link:hover {
    text-decoration-thickness: 2px;
}

/* ---------- Buttons and links ---------- */

.nd_btn {
    display: inline-flex;
    align-items: center;
    padding: 11px 20px;
    border: 1px solid var(--nd_green);
    background: transparent;
    color: var(--nd_green) !important;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 120ms var(--nd_ease);
}
.nd_btn:hover {
    background-color: rgba(0, 0, 0, .05);
}
.nd_arrow_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--nd_green) !important;
    text-decoration: none !important;
}
.nd_arrow_link svg {
    flex: none;
    transition: transform 200ms var(--nd_ease);
}
.nd_arrow_link:hover svg {
    transform: translateX(3px);
}
.nd_actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
}

/* ---------- Menu ---------- */

.nd_menu {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--nd_green);
    padding: 14px var(--nd_gutter);
}
.nd_menu_bar {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: var(--nd_content_width);
    margin: 0 auto;
}
.nd_menu_logo {
    margin-right: auto;
}
/* The logo file has empty room below the letters for the tail of the y, so at the design file's
   22 px it looked tiny. At 40 px (28 px on phones) the whole logo, tail included, is centered on
   the "Kontakta oss" button (Hanna, 2026-10-30). */
.nd_menu_logo img {
    display: block;
    height: 40px;
    width: auto;
}
@media (max-width: 767px) {
    .nd_menu_logo img {
        height: 28px;
    }
}
.nd_menu .nd_btn {
    border-color: var(--nd_off_white);
    color: var(--nd_off_white) !important;
    padding: 7px 16px;
}
.nd_menu .nd_btn:hover {
    background-color: rgba(255, 255, 255, .08);
}
.nd_menu_toggle {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.nd_menu_toggle span {
    position: absolute;
    left: 1px;
    width: 22px;
    height: 2px;
    background: var(--nd_off_white);
    transition: transform 200ms var(--nd_ease), opacity 200ms var(--nd_ease);
}
.nd_menu_toggle span:nth-child(1) {
    top: 5px;
}
.nd_menu_toggle span:nth-child(2) {
    top: 11px;
}
.nd_menu_toggle span:nth-child(3) {
    top: 17px;
}
.nd_menu_toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.nd_menu_toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.nd_menu_toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}
.nd_menu_dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: var(--nd_gutter);
    width: 300px;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    padding: 24px;
    background: var(--nd_sand_light);
    box-shadow: var(--nd_shadow_popup);
}
.nd_menu_dropdown[hidden] {
    display: none;
}
.nd_menu_dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    right: 35px;
    width: 1px;
    height: 16px;
    background-image: var(--nd_dash_line_down);
}
.nd_menu_links > li {
    list-style: none;
}
.nd_menu_links > li + li {
    margin-top: 4px;
}
.nd_menu_links a,
.nd_menu_links summary {
    display: block;
    padding: 6px 0;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--nd_green) !important;
    text-decoration: none !important;
    cursor: pointer;
}
.nd_menu_links a:hover,
.nd_menu_links summary:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
.nd_menu_links summary {
    list-style: none;
}
.nd_menu_links summary::-webkit-details-marker {
    display: none;
}
.nd_menu_links summary::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 0 3px 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 180ms var(--nd_ease);
}
.nd_menu_links details[open] > summary::after {
    transform: rotate(-135deg);
    margin-bottom: -1px;
}
.nd_menu_sublinks {
    padding: 0 0 8px 16px !important;
}
.nd_menu_sublinks li {
    list-style: none;
}
.nd_menu_sublinks a {
    font-weight: 400;
    padding: 4px 0;
}
.nd_menu_links .nd_menu_group_link {
    font-weight: 700;
    padding-top: 10px;
}
.nd_menu_hint {
    display: block;
    padding: 4px 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--nd_gray_text);
}
.nd_menu_sublinks summary {
    font-weight: 400;
    padding: 4px 0;
}
.nd_menu_rating {
    display: block;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--nd_line_light);
}
@media (max-width: 1023px) {
    .nd_menu_about {
        display: none !important;
    }
}
@media (max-width: 767px) {
    .nd_menu {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .nd_menu_dropdown {
        left: 16px;
        right: 16px;
        width: auto;
    }
}

/* ---------- Hero without chat ---------- */

.nd_hero {
    padding: var(--nd_below_menu) var(--nd_gutter) 0;
}
.nd_hero > .nd_container > * + * {
    margin-top: 28px;
}
.nd_page .nd_hero_rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    line-height: 22px;
    color: var(--nd_gray_text);
    text-decoration: none !important;
}
.nd_hero_rating svg {
    margin-right: 0;
}
.nd_hero_rating img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.nd_hero_actions .nd_eyebrow {
    margin-bottom: 12px;
}
.nd_hero .nd_ingress {
    white-space: pre-line;
}

/* ---------- Rating module "4,8 av 5 i betyg" ---------- */

.nd_reviews_head p {
    margin-top: 10px;
}
.nd_reviews_logos {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    vertical-align: -5px;
}
.nd_reviews_logos img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.nd_reviews_track {
    display: flex;
    gap: 20px;
    margin-top: 32px;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.nd_reviews_track::-webkit-scrollbar {
    display: none;
}
/* A card is as tall as the film column at the end of the track; a long review scrolls inside it. */
.nd_review_card {
    flex: 0 0 clamp(260px, 32vw, 340px);
    align-self: stretch;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: var(--nd_white);
    scroll-snap-align: start;
}
.nd_review_card_top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 20px;
    color: var(--nd_gray_text);
    white-space: nowrap;
}
.nd_review_stars {
    color: var(--nd_orange);
    font-size: 18px;
    line-height: 1;
    letter-spacing: 1px;
}
.nd_page .nd_review_card .nd_h3 {
    line-height: 1.4;
}
.nd_review_text_box {
    position: relative;
    flex: 1 1 auto;
    min-height: 100px;
}
.nd_page .nd_review_text {
    position: absolute;
    inset: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 25px;
}
.nd_page .nd_review_text_long {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: thin;
    scrollbar-color: var(--nd_line) transparent;
}
.nd_page .nd_review_source {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #ede8df;
    font-size: 14px;
    line-height: 20px;
    color: var(--nd_gray_text);
    text-decoration: none;
    white-space: nowrap;
}
.nd_review_source img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
/* The customer films come last: three on desktop and tablet (one large over two small), two on mobile. */
.nd_review_films {
    flex: 0 0 clamp(360px, 44vw, 520px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
    scroll-snap-align: start;
}
.nd_review_film {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--nd_green);
    overflow: hidden;
}
.nd_review_film_large {
    grid-column: span 2;
}
.nd_review_film img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nd_play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nd_off_white);
    pointer-events: none;
}
.nd_review_film_large .nd_play {
    width: 48px;
    height: 48px;
}
.nd_scrollbar {
    position: relative;
    height: 3px;
    margin-top: 36px;
}
.nd_scrollbar::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 1px;
    height: 1px;
    background-image: linear-gradient(to right, var(--nd_gray_dash) 50%, transparent 50%);
    background-size: 6px 100%;
}
.nd_scrollbar span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: var(--nd_green);
    border-radius: 2px;
    transition: left 120ms linear;
}
.nd_reviews .nd_actions {
    margin-top: 32px;
}
.nd_page .nd_reviews_link {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
}
@media (max-width: 767px) {
    .nd_review_card {
        flex-basis: 260px;
    }
    .nd_review_films {
        flex: 0 0 min(82vw, 320px);
        grid-template-columns: 1fr;
    }
    .nd_review_film_large {
        grid-column: auto;
    }
    .nd_review_film_large .nd_play {
        width: 36px;
        height: 36px;
    }
    .nd_review_film_desktop_only {
        display: none;
    }
}

/* ---------- Text with image beside ---------- */

.nd_text_image_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.nd_text_image_grid.nd_image_left .nd_text_image_media {
    order: -1;
}
.nd_text_image_media {
    aspect-ratio: 4 / 3;
    background: var(--nd_placeholder);
}
.nd_text_image_media.nd_media_portrait {
    aspect-ratio: 4 / 5;
}
.nd_text_image_media img,
.nd_text_image_media picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nd_text_image_text > .nd_actions {
    margin-top: 32px;
}
/* Tablet portrait (Playbook 18, as decided for the rebuilt pages on 2026-10-28): the heading
   runs the full width, the text and a 4:5 image sit beside each other under it, and the image
   lines up with the top of the text. The heading sits inside copy from the old CMS, so the
   wrappers around it step aside (display: contents) and it becomes a grid item of its own. */
@media (min-width: 768px) and (max-width: 1023px) {
    .nd_text_image_grid {
        grid-template-columns: 3fr 2fr;
        gap: 0 32px;
        align-items: start;
    }
    .nd_text_image_grid.nd_image_left {
        grid-template-columns: 2fr 3fr;
    }
    .nd_text_image_text,
    .nd_text_image_text > .nd_rich,
    .nd_text_image_text > .nd_rich > .richtextWrap {
        display: contents;
    }
    .nd_text_image_text > .nd_rich > *,
    .nd_text_image_text > .nd_rich > .richtextWrap > *,
    .nd_text_image_text > .nd_actions {
        grid-column: 1;
    }
    .nd_image_left .nd_text_image_text > .nd_rich > *,
    .nd_image_left .nd_text_image_text > .nd_rich > .richtextWrap > *,
    .nd_image_left .nd_text_image_text > .nd_actions {
        grid-column: 2;
    }
    .nd_page .nd_text_image_grid .nd_text_image_text .nd_rich h2 {
        grid-column: 1 / -1;
        margin-bottom: 16px;
    }
    .nd_page .nd_text_image_grid .nd_text_image_text .nd_rich h2 + * {
        margin-top: 0;
    }
    .nd_text_image_media {
        grid-column: 2;
        grid-row: 2 / span 30;
        aspect-ratio: 4 / 5;
    }
    .nd_image_left .nd_text_image_media {
        grid-column: 1;
    }
    /* A chapter's number runs the full width above the heading, so the image starts a row later. */
    .nd_text_image_text > .nd_chapter_number {
        grid-column: 1 / -1;
        margin-bottom: 12px;
    }
    .nd_text_image_grid:has(> .nd_text_image_text > .nd_chapter_number) .nd_text_image_media {
        grid-row: 3 / span 30;
    }
}
@media (max-width: 767px) {
    .nd_text_image_grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .nd_text_image_grid.nd_image_left .nd_text_image_media {
        order: 0;
    }
}

/* ---------- Service list: one light sand tile per service, no numbers and no lines ---------- */

.nd_page .nd_service_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 32px;
    list-style: none;
}
.nd_service_list li {
    padding: 24px;
    background: var(--nd_sand_light);
}
.nd_service_list a {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.nd_service_list a:hover {
    text-decoration-thickness: 2px;
}
@media (max-width: 767px) {
    .nd_page .nd_service_list {
        grid-template-columns: 1fr 1fr;
    }
    .nd_service_list li {
        padding: 20px 16px;
    }
    .nd_service_list a {
        font-size: 16px;
    }
}

/* ---------- Talk to a pro: video meeting booking ---------- */

/* The text starts at the top, level with the calendar, so the heading sits as far under the
   section's line as every other heading; centered against the 640 px calendar it ended up
   260 px down (Hanna, 2026-11-02). */
.nd_booking_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
.nd_booking_text {
    margin-top: 24px;
    white-space: pre-line;
}
/* When the text brings its own heading, it is the first thing in the column. */
.nd_booking_text:first-child {
    margin-top: 0;
}
.nd_page .nd_booking_text .bold {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
}
.nd_booking_choices {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
    white-space: normal;
}
.nd_booking_choice {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    background: transparent;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--nd_green);
    cursor: pointer;
    transition: background-color 120ms var(--nd_ease);
}
.nd_booking_choice:hover {
    background-color: rgba(0, 0, 0, .05);
}
.nd_booking_frame {
    position: relative;
    min-height: 640px;
    background: var(--nd_white);
    box-shadow: var(--nd_shadow_card);
}
.nd_booking_frame iframe {
    display: block;
    width: 100%;
    height: 680px;
    border: 0;
}
/* A form field, as the design's contact form: thin gray frame on white. */
.nd_page .nd_field {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--nd_line);
    border-radius: 0;
    background: var(--nd_white);
    font-family: inherit;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: var(--nd_green);
}
.nd_page .nd_field:focus {
    outline: 2px solid var(--nd_green);
    outline-offset: -1px;
}
/* The postcode step before the meeting, where the meeting will show. */
.nd_booking_zipcode {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 640px;
    padding: 40px;
}
.nd_booking_zipcode_prompt {
    display: block;
    font-weight: 700;
}
.nd_booking_zipcode_row {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
.nd_booking_zipcode_row > * {
    box-sizing: border-box;
    height: 48px;
}
.nd_booking_zipcode_row .nd_field {
    width: 8em;
}
.nd_booking_zipcode .nd_actions {
    margin-top: 24px;
}
.nd_booking_zipcode_change {
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}
.nd_booking [role="tabpanel"][hidden], .nd_booking_frame iframe[hidden], .nd_booking_zipcode[hidden], .nd_booking_zipcode [hidden] {
    display: none;
}
@media (max-width: 1023px) {
    .nd_booking_grid {
        grid-template-columns: 1fr;
    }
    .nd_booking_zipcode {
        min-height: 0;
        padding: 32px 20px;
    }
    .nd_booking_frame:has(.nd_booking_zipcode:not([hidden])) {
        min-height: 0;
    }
}

/* ---------- "På den här sidan", table of contents on light sand ---------- */

.nd_toc {
    padding: 32px 32px 20px;
    background: var(--nd_sand_light);
}
.nd_page .nd_toc ul {
    columns: 2;
    column-gap: 40px;
    margin-top: 16px;
    list-style: none;
}
.nd_toc li {
    break-inside: avoid;
    padding-bottom: 12px;
}
.nd_toc a {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.nd_toc a:hover {
    text-decoration-thickness: 2px;
}
@media (max-width: 767px) {
    .nd_toc {
        padding: 20px 16px 12px;
    }
    .nd_page .nd_toc ul {
        columns: 1;
    }
}

/* ---------- Short texts side by side (nd_columns.html) ---------- */

.nd_page .nd_columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 32px;
    list-style: none;
}
.nd_page .nd_h2 + .nd_columns {
    margin-top: 24px;
}
@media (min-width: 1024px) {
    .nd_page .nd_columns:has(> li:nth-child(4):last-child) {
        grid-template-columns: repeat(4, 1fr);
    }
}
.nd_columns li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.nd_columns .nd_btn {
    margin-top: auto;
}
/* The button sits at the bottom, so the buttons in a row line up. */
.nd_columns li:has(> .nd_btn) .nd_rich {
    margin-bottom: 16px;
}
.nd_columns_intro {
    margin-top: 16px;
}
@media (max-width: 1023px) {
    .nd_page .nd_columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}
@media (max-width: 767px) {
    .nd_page .nd_columns {
        grid-template-columns: 1fr;
    }
}

/* ---------- Frequently asked questions, as in the design file (Elektriker Stockholm) ---------- */

.nd_faq_list {
    margin-top: 24px;
    border-top: 1px solid var(--nd_line);
}
.nd_faq_item {
    padding: 4px 0;
    border-bottom: 1px solid var(--nd_line);
}
.nd_faq_item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    list-style: none;
    cursor: pointer;
}
.nd_faq_item summary::-webkit-details-marker {
    display: none;
}
/* The arrow points down and turns 180° when the answer is open (MODULER: "Vanliga frågor"). */
.nd_faq_toggle {
    flex: none;
    display: flex;
    transition: transform 200ms var(--nd_ease);
}
.nd_faq_item[open] .nd_faq_toggle {
    transform: rotate(180deg);
}
.nd_page .nd_faq_answer {
    padding: 0 0 20px;
}
.nd_page .nd_faq_answer > * + *,
.nd_page .nd_faq_answer .richtextWrap > * + * {
    margin-top: 12px;
}
.nd_faq_more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

/* ---------- Back to top ---------- */

.nd_back_to_top {
    display: flex;
    justify-content: flex-end;
    padding: var(--nd_section_gap) var(--nd_gutter) 24px;
}
.nd_back_to_top a svg {
    transform: rotate(-90deg);
}
.nd_back_to_top a:hover svg {
    transform: rotate(-90deg) translateX(3px);
}

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

.nd_footer {
    padding: var(--nd_section_gap) var(--nd_gutter) 40px;
    background: var(--nd_green);
    color: var(--nd_off_white);
}
.nd_footer_columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr);
    gap: 48px 32px;
}
/* Below desktop the four link columns share the row and the text about Dryft gets a row of its own. */
@media (max-width: 1023px) {
    .nd_footer_columns {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .nd_footer_columns > div:last-child {
        grid-column: 1 / -1;
    }
}
.nd_footer .nd_eyebrow {
    color: var(--nd_gray_on_green);
    margin-bottom: 10px;
}
.nd_footer_columns ul {
    list-style: none;
}
.nd_footer_columns li {
    font-size: 14px;
    line-height: 20px;
}
.nd_footer_columns li + li {
    margin-top: 10px;
}
.nd_footer a {
    font-size: 14px;
    line-height: 20px;
    color: var(--nd_off_white) !important;
    text-decoration: none !important;
}
.nd_footer a:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
.nd_footer_about {
    font-size: 14px;
    line-height: 20px;
}
.nd_footer_bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px 24px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(250, 250, 250, .16);
    font-size: 13px;
    line-height: 20px;
}
.nd_footer_bottom img {
    height: 16px;
    width: auto;
}
.nd_footer .nd_mono {
    color: var(--nd_gray_on_green);
}
@media (max-width: 767px) {
    .nd_footer_columns {
        grid-template-columns: 1fr 1fr;
    }
}

.nd_h2 + .nd_actions {
    margin-top: 32px;
}

/* An eyebrow names a section on its own (Playbook 04): the content follows straight under it. */
.nd_page .nd_eyebrow + .nd_service_list,
.nd_page .nd_eyebrow + .nd_faq_list,
.nd_page .nd_eyebrow + .nd_actions,
.nd_page .nd_eyebrow + .nd_rich {
    margin-top: 16px;
}

/* ---------- Pieces for the area pages (hantverkare_omrade_ny_design.html) ---------- */

/* An anchor that an old link points at, holding no content of its own. */
.nd_anchor {
    display: block;
    height: 0;
}
/* No italics in the design (Playbook 05); copy from the old CMS keeps its words, not its slant. */
.nd_page .nd_rich i,
.nd_page .nd_rich em {
    font-style: normal;
}
.nd_page .nd_rich a u {
    text-decoration: none;
}
/* Copy without anything beside it runs the full width, like everything else (Playbook: no
   maximum widths of a section's own), so text and tables line up with the right edge. The same
   goes for the hero's ingress and the intro above a row of boxes. */

/* Marked words are Bold, three steps from the Light ingress. */
.nd_page .nd_ingress strong,
.nd_page .nd_ingress b {
    font-weight: 700;
    line-height: inherit;
}
/* The ingress keeps a line of air between its paragraphs, so a checklist under the text does not
   run into it; the ticked lines of a checklist stay together. */
.nd_hero .nd_ingress ul,
.nd_hero .nd_ingress p + p {
    margin-top: 16px;
}
.nd_hero .nd_ingress p:has(> :is(strong, b):only-child) + p:has(> :is(strong, b):only-child) {
    margin-top: 0;
}
/* "Sidan är granskad av ..." under the buttons, in the size and color of the lines under them,
   with room enough above that it does not read as part of a button. */
.nd_page .nd_hero > .nd_container > .nd_hero_note {
    margin-top: 40px;
    font-size: 14px;
    line-height: 20px;
    color: var(--nd_gray_text);
}
.nd_page .nd_ingress :is(i, em) {
    font-style: normal;
}

/* Price table: light sand header row, light lines between rows. */
.nd_price_table {
    width: 100%;
    margin-top: 32px;
    border-collapse: collapse;
    text-align: left;
}
.nd_price_table caption {
    caption-side: bottom;
    padding-top: 12px;
    text-align: left;
    color: var(--nd_gray_text);
}
.nd_price_table th {
    padding: 12px 16px;
    font-weight: 700;
    font-size: 16px;
    line-height: 26px;
}
.nd_price_table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--nd_line_light);
    vertical-align: top;
}
.nd_price_table td strong {
    display: block;
    font-weight: 700;
}
.nd_price_table td span {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: var(--nd_gray_text);
}
.nd_price_table td + td {
    white-space: nowrap;
}
/* The table has no background, so its first and last columns line up with the text around it. */
.nd_price_table th:first-child,
.nd_price_table td:first-child {
    padding-left: 0;
}
.nd_price_table th:last-child,
.nd_price_table td:last-child {
    padding-right: 0;
}
.nd_price_notes {
    margin-top: 24px;
}
@media (max-width: 767px) {
    .nd_price_table th,
    .nd_price_table td {
        padding-left: 8px;
        padding-right: 8px;
    }
    .nd_price_table td + td {
        white-space: normal;
    }
}

/* A member of staff in a dashed frame (tips, or the contact person): the cut-out portrait on
   light sand in the lower left corner with the caption under it, and the text beside it
   ending level with the bottom of the caption. */
.nd_person_box {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px 40px;
    align-items: start;
    padding: 32px;
}
/* The eyebrow sits in the top corner, inside the box's padding, and the portrait starts level
   with it. The rest of the text (heading, quote, link) stands at the bottom, so a portrait taller
   than the text leaves the room between the eyebrow and the text (Hanna, 2026-11-02). A box
   without an eyebrow has all its text at the bottom. */
.nd_person_box > .nd_portrait {
    grid-column: 1;
    grid-row: 1;
}
.nd_person_box_person {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}
.nd_person_box_text {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}
.nd_page .nd_person_box_text > :first-child:not(.nd_eyebrow),
.nd_page .nd_person_box_text > .nd_eyebrow + * {
    margin-top: auto;
}
/* At least the usual air under the eyebrow when the text is as tall as the portrait. */
.nd_page .nd_person_box_text > .nd_eyebrow {
    margin-bottom: 16px;
}
/* Without an eyebrow to line up with, the portrait stays in the bottom corner, its caption level
   with the end of the text ("Varför ska man anlita en behörig elektriker?"). */
.nd_person_box:not(:has(> .nd_person_box_text > .nd_eyebrow)) > :is(.nd_portrait, .nd_person_box_person) {
    align-self: end;
}
/* A quote is body text all through: the old CMS's bold first sentence read as a heading. */
.nd_page .nd_person_quote_text strong {
    font-weight: inherit;
}
/* A numbered list of tips runs in two columns with Space Mono numbers, as Albin's tips in the
   design (Elektriker Stockholm), so the text fills the frame instead of leaving it half empty. */
.nd_page .nd_person_box_text .nd_rich ol {
    counter-reset: nd_tip;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 40px;
    padding-left: 0;
    list-style: none;
}
.nd_page .nd_person_box_text .nd_rich ol > li {
    counter-increment: nd_tip;
    position: relative;
    padding-left: 40px;
}
.nd_page .nd_person_box_text .nd_rich ol > li::before {
    content: counter(nd_tip, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--nd_mono);
    font-size: 11px;
    line-height: 26px;
}
.nd_page .nd_person_box_text .nd_rich ol > li br {
    display: none;
}
.nd_person_box_caption {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--nd_gray_text);
}
/* The role ends on the same line as the link at the bottom of the text beside it: Space Mono sits
   lower in its 16 px line than Poppins in its 20 px line, so the role's last line is lifted 1 px. */
.nd_person_box_caption > .nd_mono:last-child {
    padding-bottom: 1px;
}
.nd_person_box_text .nd_actions {
    margin-top: 24px;
}
.nd_portrait {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.nd_portrait::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 66%;
    background: var(--nd_sand_portrait);
}
/* In a framed person box (tips, contact person, "Granskat av") the portrait runs almost the full
   width on a phone, so its block is light sand there; the strip's small portrait stays portrait sand. */
@media (max-width: 767px) {
    .nd_person_box:not(.nd_person_strip) .nd_portrait::before {
        background: var(--nd_sand_light);
    }
}
/* The head about 3% under the top edge (Playbook 11). Cut-outs have different amounts of empty
   space above the head, so a portrait that needs it moves up with --nd_portrait_y. */
.nd_portrait img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center var(--nd_portrait_y, 0%);
}
.nd_page .nd_person_name {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: var(--nd_green);
}
/* The link in a staff box leads on to another page, so it is an arrow link (Playbook 07). A box of
   its own, so the text column ends at the link's line and it sits level with the role under the
   portrait. */
.nd_page .nd_person_link {
    display: flex;
    width: fit-content;
    margin-top: 24px;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
}
@media (max-width: 767px) {
    .nd_person_box {
        grid-template-columns: 1fr;
        padding: 24px 20px;
    }
    .nd_person_box_text {
        grid-row: 1;
        grid-column: 1;
    }
    .nd_person_box_person {
        grid-row: 2;
        margin-top: 24px;
    }
    .nd_page .nd_person_box_text .nd_rich ol {
        grid-template-columns: 1fr;
    }
}

/* Light sand tiles, each a link with a line of text under it. */
.nd_page .nd_link_tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 32px;
    list-style: none;
}
.nd_link_tiles li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    background: var(--nd_sand_light);
}
.nd_link_tiles a {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.nd_link_tiles a:hover {
    text-decoration-thickness: 2px;
}
/* Services from an old pop-up, with their own text and button, under the linked tiles. */
.nd_page .nd_link_tiles + .nd_columns {
    margin-top: 48px;
}
.nd_columns li > .nd_actions {
    margin-top: 16px;
}
.nd_page .nd_eyebrow + .nd_link_tiles {
    margin-top: 16px;
}
@media (max-width: 767px) {
    .nd_link_tiles li {
        padding: 20px 16px;
    }
    .nd_link_tiles a {
        font-size: 16px;
    }
}

/* Three steps with a result each, side by side as "Så går det till" in the design (Badrum Nacka). */
.nd_page .nd_steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 40px;
    margin-top: 40px;
    list-style: none;
}
.nd_steps > li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: start;
    gap: 0 6px;
}
.nd_step_number {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
}
.nd_steps .nd_rich {
    margin-top: 8px;
}
.nd_page .nd_step_result {
    margin-top: 12px;
    font-weight: 700;
    font-size: 16px;
    line-height: 26px;
}
.nd_step_result span {
    color: var(--nd_gray_text);
}
@media (max-width: 767px) {
    .nd_page .nd_steps {
        grid-template-columns: 1fr;
        margin-top: 32px;
    }
}

/* A map in place of the image beside text. */
.nd_text_image_media iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* A long list of links to other places, on light sand. */
.nd_page .nd_area_links {
    padding: 32px;
    background: var(--nd_sand_light);
}
.nd_page .nd_area_links,
.nd_page .nd_area_links p {
    font-size: 16px;
    line-height: 26px;
}
.nd_page .nd_area_links h3 + * {
    margin-top: 16px;
}
@media (max-width: 767px) {
    .nd_page .nd_area_links {
        padding: 24px 16px;
    }
}

/* A short strip with a member of staff: a smaller portrait and one sentence. */
.nd_person_strip {
    grid-template-columns: 120px 1fr;
    gap: 0 24px;
}
.nd_page .nd_person_strip_text {
    margin-top: 8px;
}
.nd_person_strip .nd_person_link {
    margin-top: 12px;
}
@media (max-width: 767px) {
    .nd_person_strip {
        grid-template-columns: 96px 1fr;
    }
    .nd_person_strip .nd_person_box_text {
        grid-column: 2;
    }
    .nd_person_strip > .nd_portrait {
        grid-row: 1;
        width: 96px;
        margin-top: 0;
    }
}

/* A table inside copy from the old CMS: the same look as the price table. */
.nd_page .nd_rich table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
/* Tables with three columns, like Daikin's data tables, share the column widths so they line up. */
.nd_page .nd_rich table:has(tr > :nth-child(3):last-child) {
    table-layout: fixed;
}
.nd_page .nd_rich table:has(tr > :nth-child(3):last-child) :is(th, td):first-child {
    width: 50%;
}
.nd_page .nd_rich :is(th, td) p {
    margin: 0;
}
.nd_page .nd_rich th {
    padding: 12px 16px;
    font-weight: 700;
}
.nd_page .nd_rich td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--nd_line_light);
    vertical-align: top;
}
.nd_page .nd_rich td:last-child,
.nd_page .nd_rich th:last-child {
    white-space: nowrap;
}
@media (max-width: 767px) {
    .nd_page .nd_rich th,
    .nd_page .nd_rich td {
        padding-left: 8px;
        padding-right: 8px;
    }
    .nd_page .nd_rich td:last-child,
    .nd_page .nd_rich th:last-child {
        white-space: normal;
    }
}

/* The contact person has a short quote, so on desktop and tablet the portrait is smaller and
   leaves no empty band above the text. */
@media (min-width: 768px) {
    .nd_person_box_compact {
        grid-template-columns: 160px 1fr;
    }
}

/* A film in the place of the image beside text (MODULER, "Videomodul"): 16:9 poster with a
   play square in the middle, on every screen size. */
.nd_page .nd_text_image_media.nd_video {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--nd_green);
}
.nd_text_image_media.nd_video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nd_text_image_media.nd_video .nd_play {
    width: 56px;
    height: 56px;
}
/* On a tablet in portrait the film goes under the text in full width (MODULER, "Videomodul"). */
@media (min-width: 768px) and (max-width: 1023px) {
    .nd_page .nd_text_image_grid .nd_text_image_media.nd_video {
        grid-column: 1 / -1;
        grid-row: auto;
        margin-top: 32px;
        aspect-ratio: 16 / 9;
    }
}
/* Body size, marked in Bold like other marked words, not a heading. */
.nd_page .nd_booking_note {
    margin-top: 16px;
    font-weight: 700;
}

/* Logos and certificates beside text are shown whole, never cropped to the 4:3 box. */
.nd_page .nd_text_image_media.nd_media_contain {
    background: transparent;
}
.nd_page .nd_text_image_media.nd_media_contain img {
    object-fit: contain;
}

/* Playbook 01: 32 px under the hero, on every screen size, whatever comes next. */
.nd_page .nd_hero + .nd_band,
.nd_page .nd_hero + .nd_section,
.nd_page .nd_hero + .nd_anchor + .nd_band,
.nd_page .nd_hero + .nd_anchor + .nd_section {
    margin-top: 32px;
}

/* Guides: the reading time under the ingress (MALLAR, "Guide"). */
.nd_page .nd_hero .nd_reading_time {
    display: block;
    color: var(--nd_gray_text);
}
.nd_page .nd_author_bio {
    margin-top: 8px;
}

/* A bar fixed to the bottom of the screen: one framed button, and a price or short text. The
   page gets room at the bottom so the bar never covers the footer's last line. */
.nd_sticky_bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 12px var(--nd_gutter);
    background: var(--nd_off_white);
    border-top: 1px solid var(--nd_line);
    box-shadow: var(--nd_shadow_popup);
}
.nd_sticky_bar_inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px 24px;
    max-width: var(--nd_content_width);
    margin: 0 auto;
}
.nd_sticky_bar_text {
    margin-right: auto;
    font-weight: 700;
}
.nd_page:has(.nd_sticky_bar) {
    padding-bottom: 72px;
}
@media (max-width: 767px) {
    .nd_sticky_bar_inner {
        justify-content: space-between;
    }
}

/* Links in an ingress from the old CMS look like links in body text: underlined, not bold. */
/* The old site's style.min.css makes every link inline-block, so a link in running text could
   not break across lines and the full stop after it could land alone on the next line. */
.nd_page .nd_ingress a,
.nd_page .nd_rich a:not(.nd_btn, .nd_arrow_link) {
    display: inline;
}
.nd_page .nd_ingress a {
    color: var(--nd_green) !important;
    font-weight: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.nd_page .nd_ingress a :is(strong, b) {
    font-weight: inherit;
}

/* Lists in copy: the design's small green squares (Elektriker Stockholm, "Varför ska man anlita
   en behörig elektriker?"); numbered lists keep their numbers. */
.nd_page .nd_rich ul {
    list-style: none;
    padding-left: 0;
}
.nd_page .nd_rich ul > li {
    position: relative;
    padding-left: 18px;
}
.nd_page .nd_rich ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: var(--nd_green);
}
.nd_page .nd_rich ol {
    list-style: decimal;
    padding-left: 20px;
}
.nd_page .nd_rich li + li {
    margin-top: 8px;
}

/* The links to the four city hubs (stadshubbar.html) in a row, as other lists of links. */
.nd_page .nd_area_links .stadshubbar_lankar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 12px;
}
.nd_page .nd_area_links .stadshubbar_rubrik:first-child {
    margin-top: 0 !important;
}
.nd_page .nd_area_links .stadshubbar_rubrik {
    margin: 32px 0 0 !important;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
}
.nd_text_section_actions {
    margin-top: 32px;
}

/* ---------- Product pages (parkett, laddbox, luftvärmepump) ----------
   The ids and old class names (productName, product-price, addon-item, checkbox, hub-actions ...) are
   the ones the pages' order scripts look for; the design comes from the nd_ classes. */

.nd_back_link {
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.nd_product {
    padding-top: var(--nd_below_menu);
    margin-top: 0;
}
.nd_product_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 24px;
}
.nd_product_gallery {
    position: sticky;
    top: 96px;
}
.nd_product_preview {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--nd_white);
}
.nd_page .nd_product_name {
    font-size: clamp(36px, 4vw, 52px);
}
.nd_product_prices {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    align-items: baseline;
    margin-top: 16px;
}
.nd_page .nd_product_price {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}
.nd_page .nd_product_old_price {
    font-family: "Space Mono", monospace;
    font-size: 16px;
    color: var(--nd_gray_text);
    text-decoration: line-through;
}
.nd_product_price_note {
    margin-top: 4px;
    font-size: 14px;
    line-height: 20px;
    color: var(--nd_gray_text);
}
.nd_product_info > .nd_rich {
    margin-top: 24px;
}
.nd_product_step {
    margin-top: 32px;
}
.nd_page .nd_product_step_title {
    display: block;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
}
.nd_product_amount {
    display: flex;
    gap: 12px;
    align-items: center;
}
.nd_product_amount .nd_field {
    width: 8em;
}
.nd_page .nd_field.with-error,
.nd_page .addon-item.with-error {
    border-color: var(--nd_orange);
    border-style: solid;
}
.nd_product_addons {
    display: grid;
    gap: 12px;
}
.nd_page .addon-item {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    cursor: pointer;
}
.nd_page .addon-item.checked {
    border-style: solid;
}
.nd_page .addon-item .check-mark {
    display: none;
}
.nd_page .addon-content {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 16px;
}
.nd_page .addon-content > div:first-child {
    display: flex;
    align-items: center;
    gap: 16px;
}
.nd_page .addon-item .checkbox {
    flex: none;
    width: 20px;
    height: 20px;
    border: 1px solid var(--nd_green);
    background: var(--nd_white);
}
.nd_page .addon-item .checkbox.checked {
    background: var(--nd_green);
    box-shadow: inset 0 0 0 4px var(--nd_white);
}
.nd_page .addon-image img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: var(--nd_white);
}
.nd_page .addon-item .info-title {
    font-weight: 700;
}
.nd_page .addon-item .info-desc {
    font-size: 14px;
    line-height: 20px;
    color: var(--nd_gray_text);
}
.nd_product_info > .nd_btn {
    margin-top: 32px;
}
.nd_product_order {
    display: none;
}
.nd_booking_choice[aria-selected="true"],
.nd_product_order .nd_booking_choice.button-secondary {
    border-style: solid;
}
.nd_product_order_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 32px;
}
.nd_product_order_grid:has(#hub-frame-video[style*="none"]) {
    grid-template-columns: minmax(0, 720px);
}
.nd_product_order .desc,
.nd_product_order .title_form {
    white-space: pre-line;
}
.nd_product_order .desc {
    margin-top: 12px;
}
.nd_product_order .calendar {
    width: 100%;
    height: 680px;
    border: 0;
    background: var(--nd_white);
    box-shadow: var(--nd_shadow_card);
}
@media (max-width: 1023px) {
    .nd_product_grid,
    .nd_product_order_grid {
        grid-template-columns: 1fr;
    }
    .nd_product_gallery {
        position: static;
    }
}
@media (max-width: 767px) {
    .nd_page .addon-image img {
        width: 48px;
        height: 48px;
    }
}
.nd_booking [role="tablist"] {
    margin-top: 32px;
}
.nd_product_info > .nd_rich + .nd_actions {
    margin-top: 32px;
}
.nd_product_contact_form {
    min-height: 400px;
}

/* ---------- An old product order block kept as it was (Charge Amps Aura) ----------
   Its markup and order script are unchanged; these rules only give it the new design's look. */

.nd_page .nd_product_back {
    margin-top: 0;
    padding-top: var(--nd_below_menu);
}
.nd_page .nd_legacy_product .padding_lr {
    max-width: calc(1360px + 2 * var(--nd_gutter));
    margin: 0 auto;
    padding-left: var(--nd_gutter);
    padding-right: var(--nd_gutter);
}
.nd_page .nd_legacy_product .product-image,
.nd_page .nd_legacy_product .product-tumbnails .item {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--nd_white);
}
.nd_page .nd_legacy_product .product-tumbnails .item {
    border: 1px solid var(--nd_line);
}
.nd_page .nd_legacy_product #productName {
    font-family: Poppins, sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--nd_green);
}
.nd_page .nd_legacy_product .product-subtext {
    margin-top: 16px;
    margin-bottom: 24px !important;
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--nd_green);
}
.nd_page .nd_legacy_product .price-old-svg {
    width: 87px;
    height: 17px;
    opacity: .55;
}
.nd_page .nd_legacy_product #product-price {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: var(--nd_green);
}
.nd_page .nd_legacy_product .product-description .p1,
.nd_page .nd_legacy_product .info-desc,
.nd_page .nd_legacy_product .orderFrame-text {
    font-family: Poppins, sans-serif;
    font-weight: 400;
    color: var(--nd_green);
}
.nd_page .nd_legacy_product .button,
.nd_page .nd_legacy_product .orderFrame-btn,
.nd_page .nd_legacy_product .price-footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-height: 0;
    padding: 11px 20px !important;
    border: 1px solid var(--nd_green);
    border-radius: 0;
    /* Not the background shorthand with !important: the dashed choices among these buttons draw
       their frame with background-image. */
    background-color: transparent !important;
    background-image: none;
    box-shadow: none !important;
    font-family: Poppins, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--nd_green) !important;
    -webkit-text-fill-color: currentColor;
    text-decoration: none;
}
.nd_page .nd_legacy_product .button:hover,
.nd_page .nd_legacy_product .orderFrame-btn:hover {
    background: rgba(0, 0, 0, .05) !important;
}
.nd_page .nd_legacy_product .product-description > a.button {
    margin-left: 0 !important;
}
.nd_page .nd_legacy_product .product-addons > .p1 {
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: var(--nd_green);
}
.nd_page .nd_legacy_product .addon-item {
    margin-bottom: 12px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.nd_page .nd_legacy_product .addon-item.checked, .nd_page .nd_legacy_product .addon-item:has(.checkbox.checked) {
    border-style: solid;
}
.nd_page .nd_legacy_product .addon-item .checkbox {
    border: 1px solid var(--nd_green);
    border-radius: 0;
    background: var(--nd_white);
}
.nd_page .nd_legacy_product .addon-item .checkbox.checked {
    background: var(--nd_green);
    box-shadow: inset 0 0 0 4px var(--nd_white);
}
.nd_page .nd_legacy_product .addon-item .checkbox::before,
.nd_page .nd_legacy_product .addon-item .checkbox::after {
    display: none;
}
.nd_page .nd_legacy_product .addon-image img {
    border-radius: 0;
}
.nd_page .nd_legacy_product .info-title {
    font-weight: 700;
    color: var(--nd_green);
}
.nd_page .nd_legacy_product .info-price,
.nd_page .nd_legacy_product .from-text {
    font-family: "Space Mono", monospace;
    color: var(--nd_green);
}
.nd_page .nd_legacy_product .details_btn {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--nd_green);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.nd_page .nd_legacy_product .addon-options-select,
.nd_page .nd_legacy_product .modalZip_input {
    padding: 12px 14px;
    border: 1px solid var(--nd_line);
    border-radius: 0;
    background: var(--nd_white);
    font-family: Poppins, sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: var(--nd_green);
}
.nd_page .nd_legacy_product #zipInput-form {
    width: 8em;
}
.nd_page .nd_legacy_product #orderForm-text-fail-step1 div[style*="background"] {
    background: transparent !important;
}
.nd_page .nd_legacy_product .modal-content {
    border-radius: 0;
}
.nd_page .nd_legacy_product .action-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
}
.nd_page .nd_legacy_product .action-buttons::before {
    display: none;
}
.nd_page .nd_legacy_product .action-buttons .button {
    flex: none;
    margin: 0;
}
.nd_page .nd_legacy_product .action-buttons .button.active {
    border-style: solid;
}
.nd_page .nd_legacy_product .action-buttons .button p {
    margin: 0;
    font: inherit;
    color: inherit;
}
.nd_page .nd_legacy_product .orderWrapper,
.nd_page .nd_legacy_product .calendar_hub {
    border-radius: 0;
    background: var(--nd_white) !important;
    box-shadow: var(--nd_shadow_card);
}
.nd_page .nd_legacy_product .price-footer {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    transform: none;
    justify-content: flex-end;
    gap: 24px;
    padding: 12px var(--nd_gutter);
    border-top: 1px solid var(--nd_line);
    border-radius: 0;
    background: var(--nd_off_white);
    box-shadow: none;
}
.nd_page .nd_legacy_product .price-footer-total {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-size: 20px;
    color: var(--nd_green);
    background: none;
    -webkit-text-fill-color: currentColor;
}
.nd_page .nd_legacy_product .price-footer-text {
    font-size: 14px;
    color: var(--nd_gray_text);
}
.nd_page .nd_legacy_product .orderFrame-text {
    max-width: 600px;
    margin: 0 auto 16px;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
}
.nd_page .nd_legacy_product .orderFrame-btn {
    display: flex;
    margin: 16px auto 0;
}
.nd_page .nd_legacy_product .orderFrame-btns {
    gap: 12px;
}
.nd_page .nd_legacy_product .orderFrame-btns .orderFrame-btn {
    margin: 16px 0 0;
}
.nd_page .nd_legacy_product #orderForm-text-fail {
    padding: 40px 20px;
}
.nd_page .nd_legacy_product .price-footer-btn {
    flex: none !important;
    width: auto !important;
    margin: 0 !important;
}
/* The postcode is asked for in the booking further down; the order script still needs this button, so it is only hidden. */
.nd_page .nd_legacy_product .changeZipCode {
    display: none !important;
}
.nd_page .nd_legacy_product .price-footer-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.nd_page .nd_legacy_product .price-footer-total,
.nd_page .nd_legacy_product .price-footer-text {
    margin: 0;
}
@media (max-width: 767px) {
    .nd_page .nd_legacy_product .action-buttons {
        flex-wrap: wrap;
    }
    .nd_page .nd_legacy_product .action-buttons .button {
        flex: 1 1 auto;
    }
    .nd_page .nd_legacy_product .price-footer {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
    }
    .nd_page .nd_legacy_product .price-footer-wrap {
        order: -1;
        align-items: flex-start;
    }
}
.nd_page .nd_legacy_product .price-footer {
    box-sizing: border-box;
}
@media (max-width: 767px) {
    .nd_page .nd_legacy_product .price-footer {
        gap: 12px;
    }
    .nd_page .nd_legacy_product .price-footer-btn {
        flex: 0 1 auto !important;
        min-width: 0;
        padding: 10px 14px !important;
        white-space: normal;
        text-align: center;
    }
}

/* A project page's H1 sits beside its film, in the text column. */
.nd_page .nd_rich h1 {
    margin-bottom: 20px;
    font-weight: 700;
    font-size: clamp(48px, 5.4vw, 76px);
    line-height: 1.18;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
@media (max-width: 767px) {
    .nd_page .nd_rich h1 {
        font-size: 44px;
    }
}
/* Beside the film on a project page the H1 has the big heading's size, so it does not dwarf the film. */
.nd_page.nd_project_page .nd_rich h1 {
    font-size: 52px;
}
@media (max-width: 1023px) {
    .nd_page.nd_project_page .nd_rich h1 {
        font-size: 40px;
    }
}
@media (max-width: 767px) {
    .nd_page.nd_project_page .nd_rich h1 {
        font-size: 32px;
        line-height: 1.2;
    }
}
.nd_columns .nd_actions .nd_btn {
    margin-top: 0;
}

/* The product pictures as a carousel (ny_design.js, setUpProductGallery). */
.nd_page .nd_product_thumbs,
.nd_page .nd_legacy_product .product-tumbnails {
    display: none;
}
.nd_gallery_frame {
    position: relative;
}
.nd_gallery_arrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border: 0;
    background: var(--nd_off_white);
    box-shadow: 0 0 4px rgba(0, 0, 0, .04), 0 8px 16px rgba(0, 0, 0, .08);
    color: var(--nd_green);
    cursor: pointer;
}
.nd_gallery_previous {
    left: 12px;
}
.nd_gallery_previous svg {
    transform: rotate(180deg);
}
.nd_gallery_next {
    right: 12px;
}
.nd_gallery_dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.nd_gallery_dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid var(--nd_green);
    background: var(--nd_off_white);
    cursor: pointer;
}
.nd_gallery_dots button[aria-current="true"] {
    background: var(--nd_green);
}

/* Something to lift out of the page, such as an article about us: a dashed frame (Playbook: "Ramar, något du kan lyfta ut"). */
.nd_callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
    padding: 32px;
}
.nd_page .nd_callout_title {
    max-width: 640px;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.3;
}
@media (max-width: 767px) {
    .nd_callout {
        padding: 24px 20px;
    }
    .nd_page .nd_callout_title {
        font-size: 22px;
    }
}

/* ---------- Project pages (Mall 5 Projekt: Christina, Nicole), with the sizes from the design file ---------- */

/* Project pages, and guides that are inspiration rather than SEO (5 eldetaljer, like "5 snygga
   blandare" in the design), have no lines between their sections. */
.nd_project_page .nd_section_ruled,
.nd_guide_page .nd_section_ruled > .nd_container {
    padding-top: 0;
    border-top: 0;
}
.nd_page.nd_project_page .nd_rich h2 {
    font-size: 24px;
    line-height: 1.3;
}
.nd_page.nd_project_page .nd_rich p,
.nd_page.nd_project_page .nd_rich li {
    font-size: 18px;
    line-height: 28px;
}
.nd_project_hero_frame {
    position: relative;
}
.nd_project_hero_image {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    max-height: 480px;
    object-fit: cover;
}
/* The facts sit outside a section, so they get the page's side margins themselves. */
.nd_page .nd_project_facts_wrapper {
    box-sizing: border-box;
    max-width: calc(var(--nd_content_width) + 2 * var(--nd_gutter));
    padding: 20px var(--nd_gutter) 0;
}
.nd_project_facts_wrapper::before {
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    margin-bottom: 8px;
    background-image: linear-gradient(to right, var(--nd_gray_dash) 50%, transparent 50%);
    background-size: 6px 100%;
}
.nd_page .nd_project_facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    font-family: "Space Mono", monospace;
    font-size: 11px;
    line-height: 18px;
    text-transform: uppercase;
    color: var(--nd_green);
}
.nd_project_facts > span {
    white-space: nowrap;
}
.nd_project_fact_label {
    color: var(--nd_gray_text);
}
.nd_page .nd_project_quote {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 32px 32px 20px;
}
.nd_page .nd_project_quote blockquote {
    margin: 0;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
}
.nd_project_quote figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
}
.nd_project_quote_portrait {
    position: relative;
    flex: none;
    width: 64px;
    height: 64px;
    overflow: hidden;
}
.nd_project_quote_portrait::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 34%;
    background: var(--nd_sand_portrait);
}
.nd_project_quote_portrait img {
    position: absolute;
    left: 0;
    top: 8%;
    width: 100%;
    height: auto;
}
.nd_project_quote_person {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 15px;
    line-height: 22px;
}
.nd_page .nd_project_quote_person strong {
    font-weight: 700;
    font-size: 16px;
}
.nd_before_after_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.nd_before_after_grid > .nd_before_after {
    order: -1;
}
.nd_page.nd_project_page .nd_rich .nd_before_after_hint {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
}
/* The pictures from a project follow each other as one grid. */
.nd_page .nd_image_pair_section + .nd_image_pair_section {
    margin-top: 12px;
}
.nd_before_after {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    cursor: ew-resize;
}
.nd_before_after img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nd_before_after_after {
    clip-path: inset(0 0 0 var(--nd_split));
}
.nd_before_after_line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--nd_split);
    width: 1px;
    transform: translateX(-50%);
    background-image: linear-gradient(to bottom, var(--nd_off_white) 50%, transparent 50%);
    background-size: 100% 6px;
    pointer-events: none;
}
.nd_before_after_handle {
    position: absolute;
    top: 50%;
    left: var(--nd_split);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    background: var(--nd_off_white);
    box-shadow: 0 0 4px rgba(0, 0, 0, .04), 0 8px 16px rgba(0, 0, 0, .08);
    color: var(--nd_green);
    pointer-events: none;
}
.nd_before_after_handle svg:first-child {
    transform: rotate(180deg);
}
.nd_page .nd_before_after .nd_before_after_range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}
.nd_image_pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.nd_image_pair img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.nd_image_pair figcaption {
    margin-top: 8px;
    font-family: "Space Mono", monospace;
    font-size: 11px;
    line-height: 18px;
    text-transform: uppercase;
    color: var(--nd_gray_text);
}
.nd_materials_section {
    padding-top: 40px;
    border-top: 1px solid var(--nd_line);
}
.nd_page .nd_materials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 32px;
    list-style: none;
}
.nd_materials li {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}
.nd_materials img {
    flex: none;
    width: 96px;
    height: 96px;
    object-fit: cover;
}
.nd_materials li > span {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.nd_page .nd_material_kind {
    font-family: "Space Mono", monospace;
    font-size: 11px;
    line-height: 18px;
    text-transform: uppercase;
    color: var(--nd_gray_text);
}
.nd_page .nd_material_model {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
}
.nd_page .nd_material_brand {
    font-size: 14px;
    line-height: 20px;
    color: var(--nd_gray_text);
}
/* A carousel: three cards and a bit of the fourth on desktop, so it shows that there is more. */
.nd_page .nd_project_cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 24px) / 3.25);
    gap: 24px;
    margin-top: 24px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.nd_page .nd_project_cards::-webkit-scrollbar {
    display: none;
}
.nd_project_cards li {
    scroll-snap-align: start;
}
@media (min-width: 768px) and (max-width: 1023px) {
    .nd_page .nd_project_cards {
        grid-auto-columns: calc((100% - 24px) / 2.25);
    }
}
/* The scroll line shows only when the cards do not all fit (ny_design.js). */
.nd_project_cards_scrollbar[hidden] {
    display: none;
}
.nd_project_cards a {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nd_project_cards img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin-bottom: 4px;
}
.nd_project_cards_all {
    display: inline-block;
    margin-top: 32px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
}
@media (max-width: 767px) {
    .nd_project_hero_image {
        aspect-ratio: 4 / 3;
    }
    .nd_page .nd_project_facts {
        flex-direction: column;
    }
    .nd_page.nd_project_page .nd_rich h2 {
        font-size: 22px;
    }
    .nd_page.nd_project_page .nd_rich p,
    .nd_page.nd_project_page .nd_rich li {
        font-size: 17px;
    }
    .nd_page.nd_project_page .nd_rich .nd_before_after_hint {
        font-size: 16px;
    }
    .nd_page .nd_project_quote {
        padding: 20px 16px 12px;
    }
    .nd_before_after_grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .nd_before_after_grid > .nd_before_after {
        order: 0;
    }
    .nd_page .nd_materials {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .nd_page .nd_project_cards {
        grid-auto-columns: 75%;
    }
}
/* The materials heading is a section heading, not a chapter heading. */
.nd_page.nd_project_page .nd_materials_section .nd_rich h2,
.nd_page.nd_project_page .nd_project_cards_section .nd_h2 {
    font-size: 32px;
    line-height: 40px;
}
@media (max-width: 767px) {
    .nd_page.nd_project_page .nd_materials_section .nd_rich h2,
    .nd_page.nd_project_page .nd_project_cards_section .nd_h2 {
        font-size: 28px;
        line-height: 36px;
    }
}

/* Pictures from a project (nd_project_gallery.html), with the grid from the design file. */
.nd_page .nd_project_gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
}
.nd_project_gallery li {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.nd_project_gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
/* The big picture fills the two rows the small ones beside it make, and does not set their height itself. */
.nd_project_gallery .nd_gallery_big {
    position: relative;
    grid-column: span 2;
    grid-row: span 2;
}
.nd_project_gallery .nd_gallery_big img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
}
.nd_gallery_caption {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nd_gallery_caption::before {
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    background-image: linear-gradient(to right, var(--nd_gray_dash) 50%, transparent 50%);
    background-size: 6px 100%;
}
.nd_page .nd_gallery_caption .nd_mono_caption {
    font-family: "Space Mono", monospace;
    font-size: 11px;
    line-height: 18px;
    text-transform: uppercase;
    color: var(--nd_gray_text);
}
.nd_page .nd_gallery_caption p {
    font-size: 16px;
    line-height: 26px;
}
.nd_project_gallery .nd_gallery_caption_phone {
    display: none;
}
.nd_page .nd_project_gallery_section + .nd_project_gallery_section,
.nd_page .nd_project_gallery_section + .nd_image_pair_section,
.nd_page .nd_image_pair_section + .nd_project_gallery_section {
    margin-top: 12px;
}
@media (max-width: 767px) {
    .nd_page .nd_project_gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .nd_project_gallery .nd_gallery_big {
        grid-row: auto;
    }
    .nd_project_gallery .nd_gallery_big img {
        position: static;
        aspect-ratio: 4 / 5;
        height: auto;
    }
    .nd_project_gallery .nd_gallery_odd {
        grid-column: span 2;
    }
    .nd_project_gallery li > .nd_gallery_caption {
        display: none;
    }
    .nd_project_gallery .nd_gallery_caption_phone {
        display: flex;
        grid-column: span 2;
    }
    .nd_project_gallery .nd_gallery_caption_phone p {
        display: none;
    }
}

/* The postcode box under a booking's buttons (Daikin Caldo). */
.nd_postcode {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--nd_line);
}
.nd_page .nd_postcode_title {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
}
.nd_postcode_step {
    margin-top: 12px;
}
.nd_postcode_step[hidden] {
    display: none;
}
.nd_postcode_step .nd_text_link,
.nd_postcode_step .nd_arrow_link {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}
.nd_postcode .nd_actions {
    margin-top: 16px;
}

/* Playbook: the three kinds of secondary CTA (framed button, underlined link, link with arrow) are
   never mixed. A link that stands next to a framed button is therefore a framed button too. */
.nd_page .nd_actions:has(.nd_btn) .nd_arrow_link {
    gap: 0;
    padding: 11px 20px;
    border: 1px solid var(--nd_green);
    background: transparent;
    transition: background-color 120ms var(--nd_ease);
}
.nd_page .nd_actions:has(.nd_btn) .nd_arrow_link:hover {
    background-color: rgba(0, 0, 0, .05);
}
.nd_page .nd_actions:has(.nd_btn) .nd_arrow_link svg {
    display: none;
}

/* The person on the right, the text on the left (the electrician and tiler pages). */
.nd_person_box.nd_person_box_right {
    grid-template-columns: 1fr 220px;
}
.nd_person_box_right .nd_person_box_person {
    grid-column: 2;
}
.nd_person_box_right .nd_person_box_text {
    grid-column: 1;
}
.nd_page .nd_person_box_right .nd_person_quote_text h2 {
    margin-bottom: 16px;
}
@media (min-width: 768px) {
    .nd_person_box_compact.nd_person_box_right {
        grid-template-columns: 1fr 160px;
    }
}
@media (max-width: 767px) {
    .nd_person_box.nd_person_box_right {
        grid-template-columns: 1fr;
    }
    .nd_person_box_right .nd_person_box_person,
    .nd_person_box_right .nd_person_box_text {
        grid-column: 1;
    }
}
/* An eyebrow keeps its own weight, also when the old CMS wrapped its text in <strong>. */
.nd_page .nd_eyebrow strong,
.nd_page .nd_eyebrow b {
    font-weight: inherit;
}

/* A bold first line in the intro of a list of tiles ("Kontakta oss för att få hjälp av ...") is
   the section's eyebrow, as the other tile lists' titles. */
.nd_page .nd_text_column > strong:first-child {
    display: block;
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nd_gray_text);
}

/* A guide's hero image (MALLAR.md, "Mall 7 Guide": herobild): under the ingress, 21:9 on desktop
   and tablet, 4:3 on phones, as the project hero. */
.nd_page .nd_hero > .nd_container > .nd_hero_image {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    margin-top: 40px;
    object-fit: cover;
}
@media (max-width: 767px) {
    .nd_page .nd_hero > .nd_container > .nd_hero_image {
        aspect-ratio: 4 / 3;
    }
}

/* The AI assistant (nd_ai_chat.html). The chat dock's own styles come from snip-aichatt_chattruta.min.css;
   here it gets the design's square corners and light sand while it loads. */
.nd_ai_chat_intro {
    margin-top: 16px;
}
.nd_page .nd_ai_chat .ai_chat_dock {
    margin-top: 32px;
    border-radius: 0;
}
.nd_page .nd_ai_chat .customer_chat_shell {
    border-radius: 0;
}
.nd_page .nd_ai_chat .ai_chat_dock_placeholder {
    border-radius: 0;
    background: var(--nd_sand_light);
}
.nd_page .nd_ai_chat .ai_chat_dock_placeholder_text {
    color: var(--nd_green);
}
.nd_page .nd_ai_chat_note {
    margin-top: 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--nd_gray_text);
}

/* A guide's chapter number (nd_text_image.html "number"), Space Mono over the heading. */
.nd_page .nd_chapter_number {
    display: block;
}
.nd_page .nd_chapter_number + .nd_rich {
    margin-top: 12px;
}
/* The breadcrumb in a guide's hero, "Tips och guider / ...": the parent page underlined in green,
   the page itself in gray (MODULER.md, Hero med text). */
.nd_page .nd_hero .nd_eyebrow a {
    color: var(--nd_green) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* A table whose cells name their column (data-label, the price examples on Vad kostar
   badrumsrenovering) does not fit a phone with four columns. There each row becomes a block:
   the first cell as its heading, then one line per column with the column's name before it. */
@media (max-width: 767px) {
    .nd_page .nd_rich table:has(td[data-label]) thead {
        display: none;
    }
    .nd_page .nd_rich table:has(td[data-label]),
    .nd_page .nd_rich table:has(td[data-label]) :is(tbody, tr, td) {
        display: block;
    }
    .nd_page .nd_rich table:has(td[data-label]) tr {
        padding: 16px 0;
        border-bottom: 1px solid var(--nd_line_light);
    }
    .nd_page .nd_rich table:has(td[data-label]) td {
        padding: 0;
        border: 0;
    }
    .nd_page .nd_rich table:has(td[data-label]) td + td {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        margin-top: 8px;
    }
    .nd_page .nd_rich table:has(td[data-label]) td[data-label]::before {
        content: attr(data-label);
        color: var(--nd_gray_text);
    }
}

/* ---------- Dashed frames (MODULER.md, Streckad linje) ----------
   Gray #9999a2, 1 px, 3 px dash and 3 px gap, drawn with four patterns on a transparent border,
   never with border-style: dashed. A choice that is made (selected, ticked) is solid green. */
.nd_booking_choice,
.nd_person_box,
.nd_page .addon-item,
.nd_page .nd_legacy_product .addon-item,
.nd_page .nd_legacy_product .action-buttons .button,
.nd_callout,
.nd_page .nd_project_quote {
    border: 1px solid transparent;
    background-image:
        linear-gradient(to right, var(--nd_gray_dash) 50%, transparent 50%),
        linear-gradient(to right, var(--nd_gray_dash) 50%, transparent 50%),
        linear-gradient(to bottom, var(--nd_gray_dash) 50%, transparent 50%),
        linear-gradient(to bottom, var(--nd_gray_dash) 50%, transparent 50%);
    background-size: 6px 1px, 6px 1px, 1px 6px, 1px 6px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-origin: border-box;
}
.nd_booking_choice[aria-selected="true"],
.nd_product_order .nd_booking_choice.button-secondary,
.nd_page .addon-item.checked,
.nd_page .nd_legacy_product .addon-item.checked,
.nd_page .nd_legacy_product .addon-item:has(.checkbox.checked),
.nd_page .nd_legacy_product .action-buttons .button.active {
    border-color: var(--nd_green);
    background-image: none;
}
.nd_page .addon-item.with-error {
    border-color: var(--nd_orange);
    background-image: none;
}