/*
 * 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 role (Hanna, 2026-11-02, -03 and -04): the ingress is Light 300, 18/28; body
 * text is Regular 400, 16/26 (+0.01em) in every module, and smaller text is Regular too; 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.b9fc1e03b938.woff") format('woff');
}
@font-face {
    font-family: 'Poppins';
    font-weight: 400;
    font-display: swap;
    src: url("/static/homepage/fonts/poppinsregular.ce9a34e58413.woff") format('woff');
}
@font-face {
    font-family: 'Poppins';
    font-weight: 700;
    font-display: swap;
    src: url("/static/homepage/fonts/poppinsbold.cb39f4527485.woff") format('woff');
}
/* Space Mono Regular, the only weight the design uses, from our own server instead of Google Fonts
   (Kasper, 2026-11-06). The latin cut Google served, open font license (SIL OFL). */
@font-face {
    font-family: 'Space Mono';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("/static/homepage/fonts/spacemono-regular.d62e75a5cd2d.woff2") format('woff2');
}

.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;
    }
}

/* Marked text (README, "Att ändra i koden nu" 10). */
.nd_page ::selection {
    background: #e9e9f0;
    color: var(--nd_green);
}

/* ---------- 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. */
/* Body text is 16/26 everywhere, in the CMS copy and in every module, the same as .nd_page
   (Hanna, 2026-11-04: 16/28 was a little too airy; 1.6 suits Poppins' large x-height). */
.nd_page .nd_rich,
.nd_page .nd_rich p,
.nd_page .nd_rich li {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    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);
}
/* The link CTA (Playbook 07, "CTA: understruken eller pil"): every link that stands on a line of its
   own has Dryft's IconArrowRight (nd_icon_arrow.html, 16 px) 6 px after the text, Bold 14/20 in
   green, never an underline or a frame. On hover only the arrow moves, 3 px to the right. An
   underline is for a link inside a sentence, link lists, breadcrumbs and "På den här sidan". The CMS
   copy's link-only paragraphs get the same (clean_cms_richtext). */
.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;
}
/* Inside CMS copy too, where .nd_rich a would make it a plain text link. */
.nd_page .nd_rich a.nd_arrow_link {
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
}
.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;
}
/* Two link CTAs beside each other: on one line 24 px apart on desktop, under each other 12 px apart
   on phones, the more important one first. */
@media (max-width: 767px) {
    .nd_page .nd_actions:has(> .nd_arrow_link + .nd_arrow_link) {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ---------- 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);
}
/* The orange Dryfta button in the bar, as tall as the framed Om Dryft beside it; "Dryfta" alone on
   phones, where Om Dryft is in the dropdown only (the design file's menu). */
.nd_page .nd_menu .nd_btn_dryfta {
    height: 36px;
    padding: 0 16px;
}
.nd_menu_dryfta_short {
    display: none;
}
@media (max-width: 767px) {
    .nd_menu_about {
        display: none !important;
    }
    .nd_menu_dryfta_long {
        display: none;
    }
    .nd_menu_dryfta_short {
        display: inline;
    }
}
@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;
}
/* Every hero has the same spacing, so nothing jumps between pages (Hanna, 2026-11-05): 48 px under the
   menu (40 on tablets, 32 on phones), 28 px from the rating row or the eyebrow to the H1, and the
   ingress closer under the H1, 20 px (12 on phones). The eyebrow is as high as the rating row (20 px),
   so the H1 sits at the same height whichever of them is above it. */
.nd_page .nd_hero > .nd_container > .nd_h1 + .nd_ingress {
    margin-top: 20px;
}
.nd_page .nd_hero > .nd_container > .nd_eyebrow:first-child {
    padding: 2px 0;
}
@media (max-width: 767px) {
    .nd_page .nd_hero > .nd_container > .nd_h1 + .nd_ingress {
        margin-top: 12px;
    }
}
/* No word alone on the last line of an ingress (Hanna, 2026-11-05): the browser moves a word down
   from the line above instead. */
.nd_page .nd_ingress :is(p, li) {
    text-wrap: pretty;
}
/* A hero's H1, ingress and chat are at most 880 px wide, room for "5 snygga blandare för" (862 px) at
   76 px: a heading across the full width does not work (Hanna, 2026-11-05). The same on every page,
   except the start page's H1 and ingress and Om oss's ingress at 75 %. The chat stays left-aligned with the
   text, and runs the full width on phones. */
.nd_page .nd_hero > .nd_container > .nd_h1,
.nd_page .nd_hero > .nd_container > .nd_ingress,
.nd_page .nd_hero > .nd_container > .nd_hero_chat {
    max-width: 880px;
}
/* A short H1 that is only a little wider than 880 px goes on one line, up to 960 px ("Plattsättare i
   Stockholm" is 946 px): ny_design.js adds the class when the heading fits on one line at 960 px. A
   longer heading keeps the 880 px (Hanna, 2026-11-05). */
.nd_page .nd_hero > .nd_container > .nd_h1.nd_h1_one_line {
    max-width: 960px;
}
/* The start page's H1 and ingress run the full width, on one line on a wide screen; its chat keeps the
   880 px (Hanna, 2026-11-05, after trying the 880 px heading there). If the H1 wraps, "borde funka" goes
   to the next line together: a no-break space holds them, and the H1 fills its first line. */
.nd_page .nd_white_part > .nd_hero > .nd_container > .nd_h1,
.nd_page .nd_white_part > .nd_hero > .nd_container > .nd_ingress {
    max-width: none;
}
.nd_page .nd_white_part > .nd_hero > .nd_container > .nd_h1 {
    text-wrap: wrap;
}
/* More air between the ingress and the chat on the start page's desktop, 48 px instead of 28 (Hanna,
   2026-11-05). */
@media (min-width: 1024px) {
    .nd_page .nd_white_part > .nd_hero > .nd_container > .nd_ingress + .nd_hero_chat {
        margin-top: 48px;
    }
}
.nd_page .nd_hero_rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 20px;
    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. */
/* Three cards and a quarter of the fourth, so the cut card at the right edge shows there are more
   to scroll to, the same way as the project carousel (Hanna, 2026-11-04). Two and a quarter on
   tablets, three quarters of the width on phones. */
.nd_review_card {
    flex: 0 0 calc((100% - 3 * 20px) / 3.25);
    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_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: 26px;
}
.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;
}
/* A film in a popup (ny_design.js, setUpVideoPopups): 16:9 in the middle of the screen over a dark
   green backdrop, the cross above its right corner. Square corners, as everywhere in the design. */
.nd_video_dialog {
    width: min(1100px, calc(100vw - 2 * var(--nd_gutter)));
    margin: auto;
    max-width: none;
    max-height: none;
    padding: 48px 0 0;
    border: 0;
    background: transparent;
    overflow: visible;
}
.nd_video_dialog::backdrop {
    background: rgba(26, 53, 59, .88);
}
.nd_video_dialog_frame {
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 96px);
    margin: 0 auto;
    background: #000;
}
.nd_video_dialog_frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.nd_video_dialog_close {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--nd_white);
    cursor: pointer;
}
.nd_video_dialog_close:focus-visible {
    outline: 2px solid var(--nd_white);
    outline-offset: 2px;
}
.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: 14px;
    line-height: 20px;
    font-weight: 700;
}
@media (min-width: 768px) and (max-width: 1023px) {
    .nd_review_card {
        flex-basis: calc((100% - 2 * 20px) / 2.25);
    }
}
@media (max-width: 767px) {
    .nd_review_card {
        flex-basis: 75%;
    }
    .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: 16px;
    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: repeat(2, minmax(0, 1fr));
    }
    .nd_service_list li {
        padding: 20px 16px;
    }
    .nd_service_list a {
        font-size: 16px;
    }
}

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

/* The text is centered against the calendar beside it, as text is against the image beside it
   (nd_text_image_grid). Hanna, 2026-11-04, in place of 2026-11-02's text at the top. */
.nd_booking_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.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: 16px;
    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: 14px;
    line-height: 20px;
    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);
    }
}
/* Two texts take half the width each, not two of three columns (Kasper, 2026-11-06). */
@media (min-width: 768px) {
    .nd_page .nd_columns:has(> li:nth-child(2):last-child) {
        grid-template-columns: repeat(2, 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;
}
/* The city under the head office on a city's pages: a pin and the city's name in Bold. */
.nd_footer_local {
    margin-top: 16px;
}
.nd_footer_local_city {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
}
.nd_footer_about {
    font-size: 14px;
    line-height: 20px;
}
/* Följ oss: square icon buttons, 40 x 40, straight corners (MODULER, "Footer"). */
.nd_footer .nd_footer_follow_title {
    margin-top: 32px;
}
.nd_footer .nd_footer_follow {
    display: flex;
    gap: 8px;
    list-style: none;
}
.nd_footer .nd_footer_follow li + li {
    margin-top: 0;
}
.nd_footer .nd_footer_follow a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(250, 250, 250, .24);
    transition: background-color 120ms var(--nd_ease);
}
.nd_footer .nd_footer_follow a:hover {
    background: rgba(250, 250, 250, .15);
}

/* ---------- Chat bubble (MODULER, "Chattbubblan och chattpanelen") ----------
   ny_design.js moves the bubble to <body>, out of the site's main element, whose own stacking
   (z-index 2) would keep it under the chat's backdrop. So these rules are not scoped to .nd_page. */

.nd_chat_bubble {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    min-width: 56px;
    height: 56px;
    padding: 0 16px;
    border-radius: 999px;
    background: #f09443;
    box-shadow: inset 0 0 0 1.5px #f09443, 0 0 4px rgba(0, 0, 0, .04), 0 8px 16px rgba(0, 0, 0, .16);
    color: #2c474d !important;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms cubic-bezier(.2, 0, .2, 1), background-color 200ms cubic-bezier(.2, 0, .2, 1), padding 400ms cubic-bezier(.2, 0, .2, 1), gap 400ms cubic-bezier(.2, 0, .2, 1);
}
.nd_chat_bubble.nd_chat_bubble_shown {
    opacity: 1;
    pointer-events: auto;
}
.nd_chat_bubble:hover {
    background: #c9761a;
}
.nd_chat_bubble svg {
    flex: none;
}
.nd_chat_bubble_tease {
    display: block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 400ms cubic-bezier(.2, 0, .2, 1), opacity 200ms cubic-bezier(.2, 0, .2, 1);
}
.nd_chat_bubble.nd_chat_bubble_teasing {
    gap: 12px;
    padding: 0 17px 0 24px;
    background: #ffffff;
}
.nd_chat_bubble.nd_chat_bubble_teasing:hover {
    background: #fff6ee;
}
.nd_chat_bubble.nd_chat_bubble_teasing .nd_chat_bubble_tease {
    max-width: 300px;
    opacity: 1;
}
/* The cross while the chat is open: the bubble above the chat's backdrop (z-index 10003), the
   speech-bubble icon swapped for two crossed bars. */
.nd_chat_bubble_close {
    display: none;
    position: relative;
    width: 16px;
    height: 16px;
}
.nd_chat_bubble_close::before,
.nd_chat_bubble_close::after {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 16px;
    height: 2px;
    background: #2c474d;
    transform: rotate(45deg);
}
.nd_chat_bubble_close::after {
    transform: rotate(-45deg);
}
/* The bubble lines its content up on the right for the hover tease; the 16 px cross is narrower
   than the 24 px icon it replaces, so it is centered instead. */
.nd_chat_bubble.nd_chat_bubble_open {
    z-index: 10005;
    justify-content: center;
}
.nd_chat_bubble.nd_chat_bubble_open .nd_chat_bubble_icon,
.nd_chat_bubble.nd_chat_bubble_open .nd_chat_bubble_tease {
    display: none;
}
.nd_chat_bubble.nd_chat_bubble_open .nd_chat_bubble_close {
    display: block;
}
@media (max-width: 767px) {
    .nd_chat_bubble.nd_chat_bubble_open {
        display: none;
    }
}
@media (max-width: 767px) {
    .nd_chat_bubble {
        right: 16px;
        bottom: 16px;
        min-width: 52px;
        height: 52px;
        padding: 0 14px;
    }
}
.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;
}
/* The ingress's ticked lines as a list (checklist_as_list): the design's small green squares, no tick
   marks, the lines close together in the ingress's own type. */
.nd_page .nd_hero .nd_hero_checklist {
    list-style: none;
    white-space: normal;
}
.nd_page .nd_hero .nd_hero_checklist li {
    position: relative;
    padding-left: 18px;
}
.nd_page .nd_hero .nd_hero_checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    background: currentColor;
}
/* "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: 16px;
    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;
    }
    /* 32 px from the link or button down to the portrait, with the grid's 12 px row gap, as
       between the text and the image beside it (nd_text_image_grid). .nd_page, or the reset of
       figure's margin wins. */
    .nd_person_box_person {
        grid-row: 2;
    }
    .nd_page .nd_person_box_person {
        margin-top: 20px;
    }
    .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: 16px;
    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: 16px;
    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;
}
@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 .nd_eyebrow {
    line-height: 16px;
}
.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. The chat's script tags
   sit inside the hero (nd_hero.html), so they do not come between it and the next section. */
.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: 16px;
    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: 16px;
    line-height: 26px;
}
.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: 16px;
    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: 14px;
    line-height: 20px;
}
.nd_page .nd_project_quote_person strong {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
}
.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;
}
/* 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);
}
/* "Dra i pilen för att se före och efter" on the picture, under the handle; it fades once the
   visitor has dragged (ny_design.js). */
.nd_before_after_tip {
    position: absolute;
    top: calc(50% + 34px);
    left: var(--nd_split);
    transform: translateX(-50%);
    padding: 4px 10px;
    background: var(--nd_off_white);
    color: var(--nd_green);
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 200ms var(--nd_ease);
}
.nd_before_after.nd_before_after_dragged .nd_before_after_tip {
    opacity: 0;
}
.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: 16px;
    text-transform: uppercase;
    color: var(--nd_gray_text);
}
.nd_page .nd_material_model {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
}
.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_page .nd_project_cards_all {
    margin-top: 32px;
}
@media (max-width: 767px) {
    .nd_project_hero_image {
        aspect-ratio: 4 / 3;
    }
    /* A long fact (a material list) wraps on phones instead of widening the page. */
    .nd_project_facts > span {
        white-space: normal;
    }
    .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: 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);
}

/* The customer chat in the hero (nd_hero.html chat="yes", "Header med chatt"). The chat lays its own
   shell over the dock at the dock's size, so the dock's height is the chat's height. Until the chat
   has loaded, the placeholder draws the shell's outline: the dark title bar, the white card and the
   input field, so the hero keeps its shape. Lower on phones, so the reviews under the hero come
   into view sooner. The chat keeps its own look, rounded corners included (Hanna, 2026-11-04): the
   design's square corners stop at the chat. It runs the content's full width on every screen. */
.nd_page .nd_hero_chat .ai_chat_dock {
    position: relative;
    height: 280px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--nd_white);
    box-shadow: var(--nd_shadow_card);
}
.nd_page .nd_hero_chat .ai_chat_dock_placeholder {
    position: absolute;
    inset: 0;
}
.nd_page .nd_hero_chat .ai_chat_dock.customer_chat_dock_active .ai_chat_dock_placeholder {
    display: none;
}
/* The chat's own sizes: a 52 px title bar, and a 50 px input field 30 px from the sides and 14 px from
   the bottom, with the chat's rounded corners. */
.nd_page .nd_hero_chat_titlebar {
    display: block;
    height: 52px;
    background: var(--nd_green_dark);
}
.nd_page .nd_hero_chat_input {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 14px;
    height: 50px;
    border: 1px solid var(--nd_line_light);
    border-radius: 16px;
}
/* The hero with the chat has the same type and spacing as every other hero (Playbook 01), and only the
   rating row, the H1, the ingress and the chat (Hanna, 2026-11-04): no ticked lines under the chat.
   Its widths follow the 880 px rule for every hero. */
@media (max-width: 767px) {
    /* High enough for the whole greeting under the title bar on a 360-375 px phone. */
    .nd_page .nd_hero_chat .ai_chat_dock {
        height: 360px;
    }
    .nd_page .nd_hero_chat_input {
        left: 14px;
        right: 14px;
        bottom: 16px;
    }
}

/* "Dryfta ditt projekt" with the chat (nd_dryfta_block.html): the chat as in the hero, under the
   heading on light sand. */
.nd_page .nd_dryfta_block_chat {
    margin-top: 32px;
}
.nd_page .nd_dryfta_block_chat .ai_chat_dock {
    position: relative;
    height: 360px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--nd_white);
    box-shadow: var(--nd_shadow_card);
}
.nd_page .nd_dryfta_block_chat .ai_chat_dock_placeholder {
    position: absolute;
    inset: 0;
}
.nd_page .nd_dryfta_block_chat .ai_chat_dock.customer_chat_dock_active .ai_chat_dock_placeholder {
    display: none;
}

/* "Dryfta ditt projekt" on a page with the chat in its hero (nd_dryfta_cta.html): the heading and
   the orange button, 32 px apart as in the steps module (24 on phones). */
.nd_page .nd_dryfta_cta .nd_h2 + .nd_btn_dryfta {
    margin-top: 32px;
}
@media (max-width: 767px) {
    .nd_page .nd_dryfta_cta .nd_h2 + .nd_btn_dryfta {
        margin-top: 24px;
    }
}

/* 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;
}

/* ---------- Start page, Så funkar det and Om Dryft ----------
   From the Claude Design file "SENASTE - Dryft Start, Så funkar det, Om Dryft (4 nov 2026)", tracks
   Startsida, Så funkar det and Om Dryft. Type stays on the Playbook scale used everywhere else
   (headings, ingress Light 18/28, body 16/26, buttons 14/20 Bold); the sizes the design file gives
   these pages that differ from it are listed in the review notes, not copied. */

/* The one filled button: orange, "Dryfta ditt projekt" (README, "Bara en fylld knapp finns").
   Never beside a text or arrow link. Leads to the chat. */
.nd_page .nd_btn_dryfta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--nd_orange);
    color: var(--nd_green) !important;
    /* Bold, like every other button and link (Hanna, 2026-11-05, after trying Regular). */
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color 120ms var(--nd_ease);
}
.nd_page .nd_btn_dryfta:hover {
    background: #e68a3a;
}
.nd_page .nd_btn_dryfta svg {
    flex: none;
}
.nd_page .nd_section_head > * + * {
    margin-top: 12px;
}
.nd_page .nd_section_head + * {
    margin-top: 32px;
}
.nd_page .nd_text_max {
    max-width: 720px;
}
.nd_page .nd_text_max > * + * {
    margin-top: 20px;
}

/* The start page's first part is white, as in the design: the hero with the chat, the projects and
   "Så Dryftar du". The rating band in light sand follows it, so white never meets off-white. */
.nd_page .nd_white_part {
    background: var(--nd_white);
    padding-bottom: var(--nd_section_gap);
}
.nd_page .nd_white_part + .nd_band {
    margin-top: 0;
}


/* The start page stands a little on its own (Hanna, 2026-11-04): it keeps the design file's 88 px
   between the hero's chat and the projects (56 on phones), not the 32 px under other heroes. */
.nd_page .nd_white_part > .nd_hero + .nd_start_projects {
    margin-top: 88px;
}
@media (max-width: 767px) {
    .nd_page .nd_white_part > .nd_hero + .nd_start_projects {
        margin-top: 56px;
    }
}

/* "Våra projekt": the project carousel on white, under an eyebrow. Same carousel and scroll line as
   the project cards (ny_design.js, setUpProjectCards), with the project's type and area in Space Mono
   under a short dashed line, as in the design. */
.nd_page .nd_start_projects {
    margin-top: var(--nd_section_gap);
}
.nd_page .nd_start_projects .nd_project_cards {
    grid-auto-columns: calc((100% - 3 * 12px) / 3.3);
    gap: 12px;
    margin-top: 20px;
}
.nd_page .nd_start_projects .nd_project_cards a {
    gap: 10px;
    text-decoration: none;
}
.nd_page .nd_start_projects .nd_project_cards img {
    margin-bottom: 0;
}
.nd_page .nd_project_meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--nd_gray_text);
}
.nd_page .nd_project_meta::before,
.nd_page .nd_tile_meta::before {
    content: '';
    display: block;
    width: 24px;
    height: 1px;
    background-image: linear-gradient(to right, currentColor 50%, transparent 50%);
    background-size: 6px 100%;
}
.nd_page .nd_start_projects .nd_scrollbar {
    margin-top: 20px;
}
.nd_page .nd_start_projects .nd_project_cards_all {
    margin-top: 20px;
}
@media (min-width: 768px) and (max-width: 1023px) {
    .nd_page .nd_start_projects .nd_project_cards {
        grid-auto-columns: calc((100% - 12px) / 2.3);
    }
}
@media (max-width: 767px) {
    .nd_page .nd_start_projects .nd_project_cards {
        grid-auto-columns: 72%;
    }
}

/* "Så Dryftar du": three numbered steps beside a phone showing the chat (on phones, the phone sits
   under the first step). The phone is a drawing of the chat, not the chat itself. */
.nd_page .nd_dryfta_steps_grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}
.nd_page .nd_dryfta_steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 560px;
    margin-top: 32px;
    list-style: none;
}
.nd_page .nd_dryfta_steps li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 6px;
    align-items: baseline;
}
.nd_page .nd_dryfta_steps .nd_h3 + p {
    margin-top: 2px;
}
.nd_page .nd_dryfta_steps_grid .nd_btn_dryfta {
    margin-top: 32px;
}
.nd_page .nd_phone_column {
    display: flex;
    justify-content: center;
}
.nd_page .nd_phone {
    width: 280px;
    aspect-ratio: 9 / 19;
    padding: 10px;
    border-radius: 46px;
    background: #1a1a1a;
    box-shadow: 0 0 4px rgba(0, 0, 0, .04), 0 18px 40px rgba(0, 0, 0, .14);
    flex: none;
}
.nd_page .nd_phone_screen {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 37px;
    background: var(--nd_white);
    font-size: 12.5px;
    line-height: 18px;
}
.nd_page .nd_phone_screen::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    width: 84px;
    height: 24px;
    border-radius: 999px;
    background: #1a1a1a;
    transform: translateX(-50%);
}
.nd_page .nd_phone_status {
    padding: 13px 24px 0;
    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
    color: #1a1a1a;
}
.nd_page .nd_phone_titlebar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 16px 10px;
    border-bottom: 1px solid var(--nd_line_light);
    font-size: 11px;
    line-height: 14px;
}
.nd_page .nd_phone_titlebar img {
    height: 13px;
    width: auto;
}
.nd_page .nd_phone_titlebar span {
    padding-left: 8px;
    border-left: 1px solid var(--nd_line);
}
.nd_page .nd_phone_messages {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 16px;
    overflow: hidden;
}
.nd_page .nd_phone_messages p {
    max-width: 90%;
}
.nd_page .nd_phone_messages .nd_phone_user {
    align-self: flex-end;
    max-width: 82%;
    padding: 9px 12px;
    background: #f3f3f3;
}
.nd_page .nd_phone_messages .nd_phone_working {
    font-size: 12px;
    color: var(--nd_gray_dash);
}
.nd_page .nd_phone_progress {
    padding: 0 16px 8px;
    font-size: 10px;
    line-height: 14px;
}
.nd_page .nd_phone_progress div {
    display: flex;
    justify-content: space-between;
}
.nd_page .nd_phone_progress div span:last-child {
    color: var(--nd_gray_text);
}
.nd_page .nd_phone_progress i {
    position: relative;
    display: block;
    height: 3px;
    margin-top: 5px;
    background: linear-gradient(to right, var(--nd_gray_dash) 50%, transparent 50%) 0 1px / 6px 1px repeat-x;
}
.nd_page .nd_phone_progress i::before {
    content: '';
    position: absolute;
    inset: 0 40% 0 0;
    background: var(--nd_green);
}
.nd_page .nd_phone_input {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 12px 24px;
    padding: 6px 6px 6px 12px;
    border: 1px solid var(--nd_line);
    font-size: 12px;
    line-height: 16px;
    color: var(--nd_gray_dash);
}
.nd_page .nd_phone_input span {
    flex: 1;
}
.nd_page .nd_phone_input b {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--nd_orange);
}
.nd_page .nd_phone_in_step {
    display: none;
}
@media (max-width: 767px) {
    .nd_page .nd_dryfta_steps_grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .nd_page .nd_dryfta_steps_grid > .nd_phone_column {
        display: none;
    }
    .nd_page .nd_phone_in_step {
        display: flex;
        justify-content: center;
        margin: 20px 0 20px -24px;
        width: calc(100% + 24px);
    }
    .nd_page .nd_phone_in_step .nd_phone {
        width: 230px;
        height: 500px;
        aspect-ratio: auto;
    }
}

/* "Dryfta först" (nd_dryfta_forst.html): the three steps in a row on desktop and tablet, under each
   other on phones, no lines between them (MODULER, "Steg"), then the orange button. */
.nd_page .nd_steps_row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 40px;
    margin-top: 32px;
    list-style: none;
}
.nd_page .nd_steps_row li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 6px;
    align-items: baseline;
}
.nd_page .nd_steps_row .nd_h3 + p {
    margin-top: 6px;
}
.nd_page .nd_steps_row + .nd_btn_dryfta {
    margin-top: 32px;
}
@media (max-width: 767px) {
    .nd_page .nd_steps_row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* "Från smått till stort": three kinds of requests, each an image with its name and how many asked
   last year in Space Mono. Upright 4:5 images in three columns; on phones, a row each with the image
   beside the text. */
.nd_page .nd_requests {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 32px;
    list-style: none;
}
.nd_page .nd_requests li {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.nd_page .nd_requests img {
    width: 100%;
    /* Upright 4:5 (Playbook 11): 1:1 is for staff portraits only (Hanna, 2026-11-05). */
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--nd_placeholder);
}
.nd_page .nd_requests .nd_mono {
    display: block;
    margin-top: 4px;
    color: var(--nd_gray_text);
}
.nd_page .nd_requests + .nd_btn_dryfta {
    margin-top: 32px;
}
@media (max-width: 767px) {
    .nd_page .nd_requests {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .nd_page .nd_requests li {
        display: grid;
        grid-template-columns: 168px minmax(0, 1fr);
        gap: 20px;
        align-items: center;
    }
}

/* "Mest läst just nu": the design file's grid, in the Playbook's image formats (11 Bildformat). The
   project fills the left, two rows high; on the right the guide is 21:9 across two columns, and under
   it the light sand text tile and Albin's guide 4:5. Columns of 59.3 : 20.35 : 20.35 make the right
   side as high as the project at 4:3 (exact at the full 1360 px, within a few pixels below it, which
   the project's cover crop takes). On phones as the design file's mobile view: Albin 4:3 across, the
   sand tile beside the guide 4:5, the project 4:3 across (the photo is landscape and is never cropped
   to portrait). */
.nd_page .nd_most_read {
    display: grid;
    grid-template-columns: 5934fr 2033fr 2033fr;
    grid-template-rows: auto auto;
    gap: 16px;
    margin-top: 14px;
}
.nd_page .nd_tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    padding: 20px;
    overflow: hidden;
    background: var(--nd_placeholder);
    color: var(--nd_off_white) !important;
    text-decoration: none !important;
}
.nd_page .nd_tile > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nd_page .nd_tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .12) 35%, rgba(0, 0, 0, 0) 60%);
    pointer-events: none;
}
/* Text on a picture (Playbook 12): the gradient above, and a soft shadow behind the text itself, 18 %
   black, so it reads without the shadow being seen. Everything on a picture is white, the Space
   Mono line and its dashes too. */
.nd_page .nd_tile:has(> img) > :not(img) {
    text-shadow: 0 1px 8px rgba(0, 0, 0, .18), 0 0 2px rgba(0, 0, 0, .18);
}
.nd_page .nd_tile:has(> img) svg {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .18));
}
.nd_page .nd_tile > :not(img) {
    position: relative;
    z-index: 1;
}
.nd_page .nd_tile_title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    white-space: pre-line;
}
.nd_page .nd_tile_meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--nd_off_white);
}
.nd_page .nd_tile .nd_arrow_link {
    color: inherit !important;
}
.nd_page .nd_tile_project {
    grid-column: 1;
    grid-row: 1 / 3;
    padding: 24px;
}
.nd_page .nd_tile_guide {
    grid-column: 2 / 4;
    grid-row: 1;
    aspect-ratio: 21 / 9;
}
.nd_page .nd_tile_guide > img {
    object-position: 50% 30%;
}
.nd_page .nd_tile_sand {
    grid-column: 2;
    grid-row: 2;
}
.nd_page .nd_tile_expert {
    grid-column: 3;
    grid-row: 2;
    aspect-ratio: 4 / 5;
}
.nd_page .nd_tile_sand {
    background: var(--nd_sand_light);
    color: var(--nd_green) !important;
}
.nd_page .nd_tile_sand::after {
    content: none;
}
.nd_page .nd_tile_expert::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .28) 28%, rgba(0, 0, 0, 0) 60%);
}
/* The project photo is light where the text sits (a white wash basin), so its gradient is a little
   stronger at the very bottom. */
.nd_page .nd_tile_project::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .16) 35%, rgba(0, 0, 0, 0) 60%);
}
/* The wide guide tile is low, so its gradient reaches higher to cover the title. */
.nd_page .nd_tile_guide::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, .14) 50%, rgba(0, 0, 0, 0) 80%);
}
.nd_page .nd_most_read + .nd_actions {
    margin-top: 32px;
}
@media (max-width: 767px) {
    .nd_page .nd_most_read {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }
    .nd_page .nd_tile {
        padding: 16px;
    }
    .nd_page .nd_tile_expert {
        grid-column: 1 / 3;
        grid-row: 1;
        aspect-ratio: 4 / 3;
    }
    .nd_page .nd_tile_sand {
        grid-column: 1;
        grid-row: 2;
    }
    .nd_page .nd_tile_guide {
        grid-column: 2;
        grid-row: 2;
        aspect-ratio: 4 / 5;
    }
    .nd_page .nd_tile_project {
        grid-column: 1 / 3;
        grid-row: 3;
        aspect-ratio: 4 / 3;
        padding: 20px;
    }
}

/* "Människorna bakom": the group photo across the whole width, 21:9 on desktop and 4:3 on phones,
   104 px under "Läs mer om oss" (48 on phones), as in the design file. */
.nd_page .nd_people_photo {
    margin-top: 104px;
}
@media (max-width: 767px) {
    .nd_page .nd_people_photo {
        margin-top: 48px;
    }
}
.nd_page .nd_people_photo img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}
@media (max-width: 767px) {
    .nd_page .nd_people_photo img {
        aspect-ratio: 4 / 3;
    }
}
/* The staff film on the start page: 21:9 like the photo on desktop, and 16:9, the phone cut's own
   shape, on phones. */
.nd_page .nd_people_video video {
    display: block;
    width: 100%;
    aspect-ratio: 2560 / 1098;
    object-fit: cover;
    background: var(--nd_placeholder);
}
@media (max-width: 767px) {
    .nd_page .nd_people_video video {
        aspect-ratio: 16 / 9;
    }
}

/* ---------- Så funkar det ---------- */

/* "Testa chatten": a clickable example of the chat on light sand, the intro on the left. */
.nd_page .nd_chat_demo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 56px;
    align-items: start;
    padding: 32px;
    background: var(--nd_sand_light);
}
.nd_page .nd_chat_demo_intro > * + * {
    margin-top: 12px;
}
.nd_page .nd_chat_demo_messages {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.nd_page .nd_bubble {
    max-width: 85%;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 26px;
    text-wrap: pretty;
}
.nd_page .nd_bubble_assistant {
    align-self: flex-start;
    background: var(--nd_white);
    border-radius: 16px 16px 16px 4px;
}
.nd_page .nd_bubble_user {
    align-self: flex-end;
    background: var(--nd_green);
    color: var(--nd_off_white);
    border-radius: 16px 16px 4px 16px;
}
.nd_page .nd_chat_card {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 85%;
    padding: 16px 20px;
    background: var(--nd_white);
    box-shadow: var(--nd_shadow_card);
}
.nd_page .nd_chat_card .nd_mono {
    color: var(--nd_gray_text);
}
/* A price as on the product pages (nd_product_price): Space Mono Bold 24/32. */
.nd_page .nd_chat_card strong {
    font-family: var(--nd_mono);
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}
.nd_page .nd_chat_card small {
    font-size: 14px;
    line-height: 20px;
}
.nd_page .nd_chat_demo_hint {
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -4px;
    font-family: var(--nd_mono);
    font-weight: 700;
    font-size: 11px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--nd_orange_dark);
}
.nd_page .nd_chat_demo_hint svg {
    transform: rotate(90deg);
}
.nd_page .nd_chat_demo_options {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.nd_page .nd_chat_demo_options button {
    padding: 10px 16px;
    border: 1px dashed var(--nd_green);
    background: var(--nd_white);
    box-shadow: var(--nd_shadow_card);
    color: var(--nd_green);
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    cursor: pointer;
}
.nd_page .nd_chat_demo_progress {
    color: var(--nd_gray_text);
}
@media (max-width: 767px) {
    .nd_page .nd_chat_demo {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding: 20px;
    }
}

/* "Från idé till fast pris": four steps side by side, Space Mono numbers over their headings. */
.nd_page .nd_four_steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
    margin-top: 32px;
    list-style: none;
}
.nd_page .nd_four_steps .nd_mono {
    display: block;
    color: var(--nd_gray_text);
}
.nd_page .nd_four_steps .nd_h3 {
    margin-top: 10px;
}
.nd_page .nd_four_steps p {
    margin-top: 10px;
}
.nd_page .nd_four_steps + .nd_btn_dryfta {
    margin-top: 32px;
}
@media (max-width: 1023px) {
    .nd_page .nd_four_steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .nd_page .nd_four_steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

/* "När borde jag Dryfta?": the text and a list of examples beside a square photo. */
.nd_page .nd_when_grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.nd_page .nd_when_grid > div > * + * {
    margin-top: 24px;
}
.nd_page .nd_when_grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.nd_page .nd_arrow_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
}
.nd_page .nd_arrow_list li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 12px;
}
.nd_page .nd_arrow_list svg {
    margin-top: 5px;
}
/* A list of examples gets the copy's small green squares, not arrows: arrows are for CTAs
   (Hanna, 2026-11-05). */
.nd_page .nd_square_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
}
.nd_page .nd_square_list li {
    position: relative;
    padding-left: 18px;
}
.nd_page .nd_square_list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: currentColor;
}
.nd_page .nd_arrow_list_title + .nd_square_list {
    margin-top: 16px;
}
.nd_page .nd_arrow_list_title + .nd_arrow_list {
    margin-top: 16px;
}
@media (max-width: 767px) {
    .nd_page .nd_when_grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

/* Light sand cards in a row: "Vad händer sen?" (two) and "Bra att veta" (three). */
.nd_page .nd_sand_cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
    list-style: none;
}
.nd_page .nd_sand_cards_three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.nd_page .nd_sand_cards li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 32px;
    background: var(--nd_sand_light);
}
.nd_page .nd_sand_cards .nd_mono {
    color: var(--nd_gray_text);
}
@media (max-width: 767px) {
    .nd_page .nd_sand_cards {
        grid-template-columns: minmax(0, 1fr);
    }
    .nd_page .nd_sand_cards li {
        padding: 24px 20px;
    }
}

/* "Hur kan vi ge ett fast pris så snabbt?": a dark green block, the text and big numbers on the
   left, the knowledge graph on the right. */
.nd_page .nd_dark_block {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 32px 48px;
    align-items: center;
    padding: 56px 48px;
    background: var(--nd_green);
    color: var(--nd_off_white);
}
.nd_page .nd_dark_block > div:first-child > * + * {
    margin-top: 20px;
}
.nd_page .nd_dark_block .nd_eyebrow,
.nd_page .nd_dark_block .nd_mono {
    color: #e1f3f0;
}
.nd_page .nd_dark_block .nd_ingress {
    max-width: 680px;
}
.nd_page .nd_big_numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
}
.nd_page .nd_big_numbers strong {
    display: block;
    font-family: var(--nd_mono);
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    white-space: nowrap;
}
.nd_page .nd_dark_block .nd_square_list {
    gap: 10px;
    max-width: 560px;
}
.nd_page .nd_dark_block .nd_aside_question {
    max-width: 560px;
    padding-top: 20px;
    border-top: 1px solid rgba(250, 250, 250, .24);
}
.nd_page .nd_aside_question .nd_h3 + p {
    margin-top: 6px;
}
.nd_page .nd_dark_block figure img {
    width: 100%;
    background: #000;
}
.nd_page .nd_dark_block figcaption {
    display: block;
    margin-top: 10px;
}
@media (max-width: 767px) {
    .nd_page .nd_dark_block {
        grid-template-columns: minmax(0, 1fr);
        padding: 32px 20px;
    }
}

/* "Kunskapen kommer från oss": a photo beside the text and two framed buttons. */
.nd_page .nd_team_grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 56px;
    align-items: center;
}
.nd_page .nd_team_grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.nd_page .nd_team_grid > div > * + * {
    margin-top: 16px;
}
.nd_page .nd_team_grid .nd_actions {
    padding-top: 8px;
    gap: 12px;
}
@media (max-width: 767px) {
    .nd_page .nd_team_grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

/* ---------- Om Dryft ---------- */

.nd_page .nd_about_hero > .nd_container > .nd_ingress {
    max-width: 75%;
}
@media (max-width: 1023px) {
    .nd_page .nd_about_hero > .nd_container > .nd_ingress {
        max-width: none;
    }
}
.nd_page .nd_about_hero .nd_ingress p + p {
    margin-top: 28px;
}
.nd_page .nd_about_hero .nd_hero_closing {
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
}
.nd_page .nd_wide_photo img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}
@media (max-width: 767px) {
    .nd_page .nd_wide_photo img {
        aspect-ratio: 4 / 3;
    }
}
/* The facts follow the group photo closer than a new section would. */
.nd_page .nd_facts_section {
    margin-top: 48px;
}
@media (max-width: 767px) {
    .nd_page .nd_facts_section {
        margin-top: 32px;
    }
}
/* "Dryft i korthet": six facts on light sand, the label in Space Mono over the value. */
.nd_page .nd_facts {
    padding: 32px;
    background: var(--nd_sand_light);
}
.nd_page .nd_facts dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 32px;
    margin: 20px 0 0;
}
.nd_page .nd_facts dt {
    color: var(--nd_gray_text);
}
/* The values in the Playbook's "Space Mono, stora siffror", 40/44 on every screen, as the big numbers
   on Så funkar det. */
.nd_page .nd_facts dd {
    margin: 4px 0 0;
    font-family: var(--nd_mono);
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
}
@media (max-width: 767px) {
    .nd_page .nd_facts {
        padding: 24px 20px;
    }
    .nd_page .nd_facts dl {
        grid-template-columns: minmax(0, 1fr);
    }
}
.nd_page .nd_about_why .nd_rich + .nd_btn_dryfta {
    margin-top: 24px;
}

/* "Här hjälper vi dig": the map of Sweden with a ring round each city, beside the offices. */
.nd_page .nd_offices {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    margin-top: 24px;
    padding: 32px;
    background: var(--nd_sand_light);
}
.nd_page .nd_offices_map {
    position: relative;
    padding: 0 0 32px 32px;
}
.nd_page .nd_offices_map_frame {
    position: relative;
    width: 240px;
    max-width: 100%;
    aspect-ratio: 200 / 269;
    overflow: hidden;
}
.nd_page .nd_offices_map_frame img {
    position: absolute;
    left: 0;
    top: -66.5%;
    width: 100%;
    height: 166.5%;
    max-width: none;
}
.nd_page .nd_offices_map_frame i {
    position: absolute;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(31, 154, 133, .35);
    border-radius: 50%;
    background: rgba(31, 154, 133, .16);
    transform: translate(-50%, -50%);
}
.nd_page .nd_offices_map_frame i::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1f9a85;
    box-shadow: 0 0 0 2px var(--nd_sand_light);
    transform: translate(-50%, -50%);
}
.nd_page .nd_offices_list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 0;
    border-bottom: 1px solid var(--nd_line_light);
    list-style: none;
}
.nd_page .nd_offices_list .nd_h3::before,
.nd_page .nd_offices_more::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #1f9a85;
    vertical-align: 1px;
}
.nd_page .nd_offices_list a {
    align-self: flex-start;
    font-family: var(--nd_mono);
    font-size: 11px;
    line-height: 16px;
    letter-spacing: .02em;
}
.nd_page .nd_offices_more {
    padding: 14px 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--nd_gray_text);
}
.nd_page .nd_offices_more::before {
    background: var(--nd_line);
}
.nd_page .nd_offices + p {
    margin-top: 24px;
}
@media (max-width: 767px) {
    .nd_page .nd_offices {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 24px 20px;
    }
    .nd_page .nd_offices_map {
        order: 2;
        padding: 0 0 18px 18px;
    }
    .nd_page .nd_offices_map_frame {
        width: 200px;
    }
    .nd_page .nd_offices_map_frame i {
        width: 36px;
        height: 36px;
    }
}

/* "Vad behöver du Dryfta?": a drawing of a short chat beside the text. */
.nd_page .nd_try_grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px 48px;
    align-items: center;
}
/* The chat close to the text, 40 px into its column, not out at the right edge (Hanna, 2026-11-05). */
.nd_page .nd_try_grid > .nd_try_chat {
    justify-self: start;
    margin-left: 40px;
}
@media (max-width: 767px) {
    .nd_page .nd_try_grid > .nd_try_chat {
        margin-left: 0;
    }
}
.nd_page .nd_try_grid > div:first-child > * + * {
    margin-top: 16px;
}
.nd_page .nd_try_chat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 420px;
    max-width: 100%;
}
.nd_page .nd_try_chat .nd_bubble {
    box-shadow: var(--nd_shadow_popup);
}
.nd_page .nd_try_chat .nd_bubble_user {
    max-width: 75%;
}
.nd_page .nd_try_chat .nd_bubble_assistant {
    margin-left: 16px;
    max-width: 82%;
}
.nd_page .nd_try_chat .nd_chat_card {
    width: auto;
    margin-left: 32px;
    box-shadow: var(--nd_shadow_popup);
}
.nd_page .nd_price_ok {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nd_page .nd_price_ok i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1f9a85;
}
@media (max-width: 767px) {
    .nd_page .nd_try_grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* "Vi på Dryft": three square portraits on portrait sand, name and role under. */
.nd_page .nd_people {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    list-style: none;
}
/* Personalporträtt (MODULER.md): the cut-out portrait 1:1, on a block of portrait sand that covers
   the lower 66 % (less than half the content's width, so portrait sand and not light sand). */
.nd_page .nd_people_portrait {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.nd_page .nd_people_portrait::before {
    content: '';
    position: absolute;
    inset: 34% 0 0;
    background: var(--nd_sand_portrait);
}
.nd_page .nd_people_portrait img {
    position: absolute;
    left: 50%;
    width: 90%;
    max-width: none;
    transform: translateX(-50%);
}
.nd_page .nd_people .nd_h3 {
    margin-top: 16px;
}
.nd_page .nd_people + .nd_actions {
    margin-top: 24px;
}
@media (max-width: 767px) {
    .nd_page .nd_people {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .nd_page .nd_people li {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 16px;
        align-items: center;
    }
    .nd_page .nd_people .nd_h3 {
        margin-top: 0;
    }
}

/* "En nöjd kund": a 4:5 photo beside the customer's words and who they are, in Space Mono. */
.nd_page .nd_customer_quote {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 24px 40px;
    align-items: center;
}
.nd_page .nd_customer_quote_photo {
    aspect-ratio: 4 / 5;
    background: var(--nd_placeholder);
}
/* The photo is 3:4; the 4:5 frame takes the crop from the sides and keeps the air above the head. */
.nd_page .nd_customer_quote_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
}
/* A customer's words as the project lead's quote on the project pages (nd_project_quote): Bold 18/28. */
.nd_page .nd_customer_quote blockquote {
    margin: 20px 0 0;
    max-width: 720px;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    text-wrap: pretty;
}
.nd_page .nd_customer_quote dl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 16px;
    margin: 20px 0 0;
    color: var(--nd_gray_text);
}
.nd_page .nd_customer_quote dd {
    margin: 0;
}
@media (max-width: 767px) {
    .nd_page .nd_customer_quote {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* "Det här kan vi hjälpa dig med": the services of each city in four columns. */
.nd_page .nd_city_services {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 24px;
    margin-top: 24px;
    list-style: none;
}
.nd_page .nd_city_services .nd_h3 {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--nd_line);
}
.nd_page .nd_city_services ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    list-style: none;
}
.nd_page .nd_city_services a {
    text-decoration: none;
}
.nd_page .nd_city_services a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (max-width: 767px) {
    .nd_page .nd_city_services {
        grid-template-columns: minmax(0, 1fr);
    }
    .nd_page .nd_city_services ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px 16px;
    }
}

/* "Press och media": a line above, the text on the left, the CEO and two links on the right. */
.nd_page .nd_press > .nd_container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 40px;
}
.nd_page .nd_press .nd_eyebrow + p {
    margin-top: 12px;
}
.nd_page .nd_press_person {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}
/* Magnus as a small staff portrait (Personalporträtt): cut out, 1:1, on portrait sand that covers
   the lower 66 %, not a sand square round all of him. */
.nd_page .nd_press_person .nd_people_portrait {
    width: 88px;
}
/* The photo is a full-length cut-out, so it is scaled up until the head is about a third of the
   box wide, the crown 3 % under the top edge (Playbook 11, "Så jämnar vi ut porträtt"). */
.nd_page .nd_press_person .nd_people_portrait img {
    top: -1%;
    width: 147%;
}
.nd_page .nd_press_person > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.nd_page .nd_press_person .nd_arrow_link {
    margin-top: 8px;
}
.nd_page .nd_press_person + .nd_actions {
    margin-top: 12px;
}
@media (max-width: 767px) {
    .nd_page .nd_press > .nd_container {
        grid-template-columns: minmax(0, 1fr);
    }
}