/* SWIFT 2026 design, after theme.css and site.css: the brand's tokens, square corners everywhere,
   and the blocks that pages laid out anew are built from (src/lib/render/redesign). It follows the
   2026 Swift Brandbook and the approved direction sketch (design/direction), with Neue Haas, the
   site's only typeface, for all text. What a rebuilt page keeps from today's site (header, menu,
   footer, sections the redesign leaves as they are) keeps today's look; pages not rebuilt yet also
   load redesign-layer.css. */

:root {
  --nordic-sunset: #ff9196;
  --nordic-summer: #ffc9bd;
  --mineral-white: #faf5f2;
  --white: #ffffff;
  --nordic-morning: #dbe0d1;
  --mineral-earth: #83afaf;
  --mineral-vibrant: #1fadb7;
  --mineral-teal: #1e627a;
  --nordic-evening: #565293;
  --nordic-night-sky: #000a36;
  --ink: #141414;
  --ink-2: #55524f;
  --ink-3: #8a8580;
  --line: #e6ded8;

  --font: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --t-h1: clamp(2.4rem, 1.55rem + 3.8vw, 4.75rem);
  --t-h2: clamp(1.9rem, 1.35rem + 2.4vw, 3.4rem);
  --t-h3: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem);
  --t-h4: 1.25rem;
  --t-body: 1.0625rem;
  --t-lead: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --section-y: clamp(3.25rem, 2rem + 4.5vw, 7.5rem);
  --radius: 0;
  --radius-lg: 0;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

/* ---------- Square corners everywhere: SWIFT's design language has no rounded corners ---------- */
img, video, iframe, picture, .img-inner, .image-cover, .banner, .video, .video-fit, .box-image, .col-inner, .text-box-content, .section-bg,
.button, .button.round, .button.circle, .icon.circle, .icon.round, .social-icons a, .back-to-top, button, input, select, textarea,
.flickity-prev-next-button, .flickity-page-dots .dot, .nav-dropdown, .accordion-title, .tabbed-content .nav > li > a, .nav-pagination > li > *,
.page-numbers, .badge-inner, .tooltipster-box, .mfp-content, .cmplz-cookiebanner, .cmplz-cookiebanner .cmplz-btn, .hbspt-form *, .wpcf7 *,
.faq-header .toggle-button, .accordion-title .toggle, [class*='arrow-icon-button'] { border-radius: 0 !important; }

/* Complianz's cookie banner keeps its button labels on one line, and on computers "View
   preferences" in capitals ran 7 px past its button's edge (production too): a pixel smaller, no
   extra letter spacing and a little less padding, and a longer label wraps inside its button (the
   user, 2026-10-26) */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { padding-inline: 6px; font-size: 14px; letter-spacing: 0; white-space: normal; }

/* ---------- Redesigned blocks (src/lib/render/redesign) ----------
   Pages laid out in the new design are built from these blocks instead of the page builder's
   rows and columns. Texts keep their own markup; the blocks give them size, colour and place. */
:root {
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 3rem);
  --section: clamp(4.5rem, 2.5rem + 7vw, 9rem);
  --t-display: clamp(2.5rem, 1.5rem + 5vw, 6rem);
}
.rd-wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
/* Above the page builder's sections (their content lies at z-index 1), so the scroll animations'
   fixed canvases further down never show through a new block, as the theme's own sections do it */
.rd-hero, .rd-section, .rd-story, .rd-reel { position: relative; z-index: 2; }
.rd-section { padding-block: var(--section); }
.rd-hero, .rd-section, .rd-story { font-family: var(--font); -webkit-font-smoothing: antialiased; }
.rd-wrap :is(p, li) a { color: inherit; text-underline-offset: 0.2em; }
/* The theme's font faces put Neue Haas Roman at weight 500 and Medium at 400 (theme.css), so 500
   is the regular weight here and 400 the heavier one. */
.rd-wrap :is(h1, h2, h3, h4) { margin: 0; color: var(--ink); font-family: var(--font); font-weight: 500; text-transform: none; text-wrap: balance; }
.rd-wrap :is(h1, h2, h3, h4) b { font-weight: inherit; }
.rd-wrap p { margin: 0 0 1em; }
.rd-wrap p:last-child { margin-bottom: 0; }
.rd-wrap p a { text-decoration: underline; text-decoration-color: var(--nordic-sunset); text-decoration-thickness: 1.5px; }
.rd-wrap p a:hover { text-decoration-color: currentColor; }
.rd-wrap [data-text-color] { color: inherit !important; }
.rd-on-dark .rd-wrap :is(h1, h2, h3, h4), .rd-on-dark .rd-wrap p, .rd-on-dark .rd-wrap li { color: #fff; }
.rd-media { position: relative; overflow: hidden; background: var(--nordic-morning); }
.rd-media :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Buttons: one definition for the whole site ----------
   Today's arrow buttons (the theme's .button with an arrow-icon-button-* or download-icon-button-*
   class), on every page: 250px wide, bold text, the arrow at the right. A class sets only its
   colours (--bg, --fg, --line, --arrow); the arrow is a shape coloured by --arrow. The "-lottie"
   ones also pin the button for the old animation. The new blocks use the same buttons (content.ts,
   button) and only place them. */
.button:is([class*='arrow-icon-button-'], [class*='download-icon-button-']) {
  --bg: var(--nordic-sunset); --fg: #fff; --line: var(--bg); --arrow: var(--nordic-summer); --icon: url(/wp-content/uploads/2024/03/arrow-right-ffc9bd.svg);
  position: relative; display: inline-block; width: 250px; max-width: 100%; margin: 4px 2px; padding: 5px 45px 5px 15px;
  border: 2px solid var(--line); background: var(--bg); color: var(--fg); font-size: 16px; text-align: center; text-decoration: none; cursor: pointer; transition-duration: 0.1s;
}
.button:is([class*='arrow-icon-button-'], [class*='download-icon-button-'])::after {
  content: ''; position: absolute; top: 50%; right: 10px; width: 24px; height: 24px; background: var(--arrow); transform: translateY(-50%);
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.button:is([class*='arrow-icon-button-'], [class*='download-icon-button-']):hover { --bg: #fff; --fg: #fff; --line: #ccc; }
/* One arrow: the theme's own small icons give way to it */
.button:is([class*='arrow-icon-button-'], [class*='download-icon-button-']) > i { display: none; }
/* A label on two lines in the middle of the button, as one line is (the user, 2026-10-26) */
.button:is([class*='arrow-icon-button-'], [class*='download-icon-button-']) > span { vertical-align: middle; }
/* The page builder's own padding on some buttons (none at all on 47) made them lower than the rest
   and put the label under the arrow: every button has the same */
.button:is([class*='arrow-icon-button-'], [class*='download-icon-button-'])[style*='padding'] { padding: 5px 45px 5px 15px !important; }
.button.arrow-icon-button-teal, .button.arrow-icon-button-teal-lottie { --bg: var(--mineral-teal); }
.button.arrow-icon-button-mineral-earth { --bg: var(--mineral-earth); }
.button.arrow-icon-button-sunset { --bg: transparent; --fg: var(--nordic-summer); --line: var(--fg); --arrow: var(--fg); }
.button:is(.arrow-icon-button-mineral, .download-icon-button-mineral) { --bg: transparent; --fg: var(--mineral-earth); --line: var(--fg); --arrow: var(--fg); }
.button.download-icon-button-mineral { --icon: url(/wp-content/uploads/2024/03/arrow-download-83AFAF.svg); }
/* Hollow: warm grey on the feature cards, as their text (the user, 2026-10-26), white on dark
   pictures ("Designed in Sweden") */
.button.arrow-icon-button-grey { --bg: transparent; --fg: var(--ink-2); --line: var(--fg); --arrow: var(--fg); }
.button.arrow-icon-button-grey:hover { --bg: var(--ink-2); --fg: #fff; --line: var(--ink-2); --arrow: #fff; }
.button.arrow-icon-button-white { --bg: transparent; --fg: #fff; --line: var(--fg); --arrow: var(--fg); }
.button.arrow-icon-button-white:hover { --bg: #fff; --fg: var(--ink); --line: #fff; --arrow: var(--ink); }
/* Hollow in Nordic sunset, matching the line above the items they close */
.button.arrow-icon-button-outline { --bg: transparent; --fg: var(--nordic-sunset); --line: var(--fg); --arrow: var(--fg); }
.button.arrow-icon-button-outline:hover { --bg: var(--nordic-sunset); --fg: #fff; --line: var(--nordic-sunset); --arrow: #fff; }
.button.arrow-icon-button-nordic-sunset-lottie { position: fixed; top: 85%; left: 5%; }
.button.arrow-icon-button-teal-lottie { position: fixed; top: 85%; left: 10%; margin-left: 64%; }
.rd-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* Hero: the page's film under the transparent header, its h1 large at the foot, the logotype in
   the corner */
.rd-hero { position: relative; display: grid; align-content: end; align-items: end; min-height: 100svh; overflow: hidden; background: var(--ink); color: #fff; isolation: isolate; }
.rd-hero__still, .rd-hero__film { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* A film that loads after the page fades in over its first frame once it plays (swift-film.js) */
.rd-hero__film[data-rd-film] { opacity: 0; transition: opacity 1.2s var(--ease); }
.rd-hero__film[data-rd-film].is-playing { opacity: 1; }
.rd-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 100%); }
/* Other pages' photos vary in brightness: a little more shade at the top (the menu) and foot */
.rd-hero--page::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.08) 32%, rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0.72) 100%); }
.rd-hero__content { padding-block: 7rem clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.rd-hero__title h1 { max-width: 12.5em; font-size: var(--t-display); line-height: 0.98; letter-spacing: -0.035em; color: #fff; }
.rd-hero__still { object-position: var(--rd-pos, center); }
.rd-hero__title :is(h2, h3, h4) { margin-top: 1rem; font-size: var(--t-h3); line-height: 1.2; color: #fff; }
.rd-hero__title p { max-width: 38em; margin-top: 1.25rem; font-size: var(--t-lead); line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
/* Other pages' heroes: as high as their sections are today (about half a screen unless set), so
   what follows shows; long titles a size smaller */
.rd-hero--short { min-height: max(380px, var(--rd-height, min(52svh, 560px))); }
.rd-hero--page .rd-hero__title h1 { font-size: clamp(2.5rem, 1.4rem + 4vw, 5.25rem); }
.rd-hero--long .rd-hero__title h1 { max-width: 14em; font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.75rem); }
/* A title some language writes as h2 instead of h1 looks as the h1 does */
.rd-hero__title:not(:has(h1)) > :is(h2, h3):first-child { margin-top: 0; max-width: 12.5em; font-size: var(--t-display); line-height: 0.98; letter-spacing: -0.035em; }
.rd-hero--page .rd-hero__title:not(:has(h1)) > :is(h2, h3):first-child { font-size: clamp(2.5rem, 1.4rem + 4vw, 5.25rem); }
.rd-hero--long .rd-hero__title:not(:has(h1)) > :is(h2, h3):first-child { max-width: 14em; font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.75rem); }
/* Korean characters are each about a square wide: the same title fills more of the picture */
:lang(ko) .rd-hero__title h1 { max-width: 13em; font-size: clamp(2rem, 1.2rem + 3vw, 4.25rem); line-height: 1.12; letter-spacing: -0.02em; }
/* As large and as far in from the right as on today's site (a fifth of the screen's width, a tenth
   in), a little smaller where the heading needs the room */
.rd-hero__mark { position: absolute; right: max(var(--gutter), 9.6vw); bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); width: clamp(160px, 21vw, 440px); }
@media (max-width: 1199px) { .rd-hero__mark { width: 16vw; } }
/* Right-to-left pages set the title on the right, so the logotype takes the other corner */
[dir='rtl'] .rd-hero__mark { right: auto; left: max(var(--gutter), 9.6vw); }
@media (max-width: 699px) { .rd-hero__content { padding-bottom: 1.5rem; } .rd-hero__mark { position: static; justify-self: end; width: 150px; margin: 0 var(--gutter) 2rem; } }
.rd-hero__mark img { display: block; width: 100%; height: auto; }

/* The two models' scroll animation: the frames stay on screen while the section scrolls past
   (public/assets/swift-reel.js), with each model's name, line and button on its side */
.rd-reel { position: relative; height: 320vh; background: var(--mineral-white); }
.rd-reel__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.rd-reel__poster, .rd-reel__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* The copy lies in the picture's own coordinates: a 16:9 box cropped like the frames (cover), so
   each model's text stays in the upper room beside its lift (the house spans 4–96 % of the frame's
   width, the rooms 4–27 % and 73–96 %) at any screen size, kept on screen where the sides are cut */
/* The two models share one grid's rows (subgrid), so their names, lines and buttons line up
   whatever the length of their texts */
.rd-reel__copy {
  --side: max(6%, calc((100% - 100vw) / 2 + var(--gutter)));
  /* As wide as the room leaves beside the lift (the lifts start at 27 % and end at 73 %) */
  --text: calc(26.5% - var(--side));
  position: absolute; left: 50%; top: 50%; width: max(100%, 100vh * 16 / 9); width: max(100%, 100svh * 16 / 9); aspect-ratio: 16 / 9; transform: translate(-50%, -50%);
  display: grid; grid-template-columns: var(--side) var(--text) 1fr var(--text) var(--side); grid-template-rows: 24% auto auto auto 1fr; row-gap: 1rem;
  container-type: inline-size; font-family: var(--font); pointer-events: none;
}
.rd-reel__model { display: grid; grid-row: 2 / span 3; grid-template-rows: subgrid; justify-items: start; pointer-events: auto; }
.rd-reel__model:first-child { grid-column: 2; }
.rd-reel__model:last-child { grid-column: 4; }
/* The picture does not mirror: in right-to-left languages the columns stay where the lifts are and
   only the text inside them reads from the right */
[dir='rtl'] .rd-reel__copy { direction: ltr; }
[dir='rtl'] .rd-reel__model { direction: rtl; }
[dir='rtl'] .rd-reel__name :is(h1, h2, h3) { text-align: right; }
/* The page builder's line breaks are left out, so both lines wrap alike */
.rd-reel__line br { display: none; }
.rd-reel__name :is(h1, h2, h3) { margin: 0; max-width: none; font-family: var(--font); font-size: clamp(2.25rem, 3.2cqi, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; text-align: left; color: var(--nordic-sunset); }
.rd-reel__model--teal .rd-reel__name :is(h1, h2, h3) { color: var(--mineral-teal); }
/* White text as on today's site (the user's choice, 2026-10-26), a soft shade keeping it legible on
   the light grey rooms */
.rd-reel__line :is(h3, h4, p) { margin: 0; font-family: var(--font); font-size: clamp(0.95rem, 1.15cqi, 1.5rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28); }
.rd-reel__model .rd-button { margin-top: 0.5rem; }

/* Film beside its text, on black: the film's own black runs into the page */
.rd-split--night { background: #000; color: #fff; }
.rd-split__grid { display: grid; gap: clamp(2.5rem, 1rem + 4vw, 5rem); align-items: center; }
@media (min-width: 1000px) { .rd-split__grid { grid-template-columns: 1fr 1fr; } }
.rd-split__text h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.03em; max-width: 12em; }
.rd-split__media { aspect-ratio: 4 / 5; background: #000; }
@media (max-width: 999px) { .rd-split__media { aspect-ratio: 4 / 3.4; } }

/* Feature cards in the 2026 Brandbook's light colours (Figma, Colors: #FFC9BD, #8EE0E6, #CAB5F2,
   #D6D6D6), in that order */
.rd-features { background: var(--mineral-white); }
.rd-features__head h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.03em; max-width: 14em; }
/* Over the section's own picture, darkened by half as on today's site; the picture moves a little
   slower than the page where browsers can tie it to scrolling */
.rd-features--photo { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); }
/* On computers the picture fills the screen's height, with the cards in the middle */
@media (min-width: 1000px) { .rd-features--photo { display: grid; align-content: center; min-height: 100vh; min-height: 100svh; } }
.rd-features--photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.5); }
.rd-features__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rd-features__photo { inset: -12% 0; height: 124%; animation: rd-drift linear both; animation-timeline: view(); }
  }
}
@keyframes rd-drift { from { transform: translateY(-8%); } to { transform: translateY(8%); } }
/* The cards stay light with dark text on the dark picture */
/* Warm grey text on the light cards, on any ground (white read too faintly, black too hard; the
   user, 2026-10-26) */
.rd-wrap .rd-feature :is(h3, h4) { color: var(--ink-2); }
.rd-wrap .rd-feature p { color: var(--ink-2); }
.rd-features__grid { display: grid; gap: 1rem; margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 700px) { .rd-features__grid { grid-template-columns: 1fr 1fr; } }
/* As many columns as cards (up to four), so a row is never left with an empty place */
@media (min-width: 1000px) { .rd-features__grid { grid-template-columns: repeat(var(--cards, 4), 1fr); } }
.rd-features__head :is(h1, h2, h3, h4, p) { text-align: left !important; }
.rd-feature { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-height: 360px; padding: 1.75rem 1.5rem 2rem; background: #d6d6d6; }
.rd-feature:nth-child(4n + 1) { background: #ffc9bd; }
.rd-feature:nth-child(4n + 2) { background: #8ee0e6; }
.rd-feature:nth-child(4n + 3) { background: #cab5f2; }
.rd-feature__icon { width: 88px; height: 88px; }
.rd-feature__icon img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.rd-feature :is(h3, h4) { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.015em; }
.rd-feature p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
/* Cards named by the bold start of their text (some languages' start pages), named as the others */
.rd-feature:not(:has(h3, h4)) p:first-of-type > :is(b, strong):first-child { display: block; margin-bottom: 1rem; font-size: 1.5rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink-2); }
.rd-feature:not(:has(h3, h4)) p:first-of-type > :is(b, strong):first-child + br { display: none; }
.rd-feature .rd-button { margin-top: auto; }
@media (max-width: 699px) {
  .rd-feature { min-height: 0; } .rd-feature .rd-button { margin-top: 0.75rem; }
  /* Smaller cards on phones: less padding, a smaller icon and heading (the user, 2026-10-28) */
  .rd-feature { gap: 0.6rem; padding: 1.15rem 1.15rem 1.35rem; }
  .rd-feature__icon { width: 52px; height: 52px; }
  .rd-feature :is(h3, h4), .rd-feature:not(:has(h3, h4)) p:first-of-type > :is(b, strong):first-child { font-size: 1.2rem; }
  .rd-feature p { font-size: 0.9375rem; line-height: 1.5; }
  .rd-feature .rd-button { margin-top: 0.4rem; }
}

/* A picture across the page with its text over it */
.rd-story { position: relative; display: grid; align-items: center; min-height: clamp(560px, 45vw + 200px, 860px); overflow: hidden; isolation: isolate; background: var(--ink); }
.rd-story__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.rd-story::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.1) 100%); }
.rd-story__content { padding-block: var(--section); }
.rd-story__content :is(h2, h3) { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.03em; max-width: 11em; margin-bottom: 1.5rem; }
.rd-story__content p { max-width: 34em; font-size: var(--t-lead); line-height: 1.5; color: rgba(255, 255, 255, 0.85) !important; }

/* The configurator (SWIFT Pro and SWIFT Lite): the lift's two pictures stay in view beside the
   choices; the steps share one row in equal parts, the tiles are all one size with their names
   kept to three lines, so every row lines up whatever the language */
.rd-config { background: var(--mineral-white); }
/* The heading and the pictures stay together in the middle of the screen while the choices scroll
   past beside them; the section itself starts at once, without a screen of air above (the user,
   2026-10-26) */
.rd-wrap .rd-config__title h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.03em; max-width: 14em; }
.rd-config__intro { margin-bottom: var(--cfg-space); }
.rd-config__intro p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
/* One space between all of the configurator's parts, heading, text, pictures, steps, tiles, the
   ArtWall's description and the button, on computers and phones; tighter only inside a group (the
   steps, the tiles) (the user, 2026-10-29) */
.rd-config { --cfg-space: 1.25rem; }
.rd-config__grid { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.rd-config__stage { display: grid; gap: var(--cfg-space); }
@media (min-width: 1000px) {
  /* As wide as the product's photos at the top of the page on large screens (their column is three
     quarters of the page), the choices as wide as before and the pictures taking the rest (the user,
     2026-10-28) */
  .rd-config > .rd-wrap { max-width: max(1440px, calc(75% - 30px + 2 * var(--gutter))); }
  .rd-config__grid { grid-template-columns: minmax(0, 1fr) clamp(22rem, 31vw, 28.5rem); }
  /* Below the header; swift-config.js stops it in the middle of the window */
  .rd-config__stage { position: sticky; top: 90px; }
  /* The choices begin level with the heading (swift-config.js); when they fit beside the pictures
     their button sits at the pictures' foot */
  .rd-config__panel.is-fitted { display: flex; flex-direction: column; }
  .rd-config__panel.is-fitted > .rd-actions { margin-top: auto; padding-top: var(--cfg-space); }
}
.rd-config__views { display: grid; grid-template-columns: 591fr 384fr; gap: 0.5rem; }
@media (max-width: 849px) { .rd-config__views { grid-template-columns: 1fr; } }
/* The ArtWall's name and description under the lift's picture, the floor's picture beside both */
@media (min-width: 850px) {
  .rd-config__views > .rd-config__detail { grid-column: 1; grid-row: 2; }
  .rd-config__views > .rd-config__frame + .rd-config__detail + .rd-config__frame { grid-column: 2; grid-row: 1; }
}
/* Frames of the pictures' own proportions, which the pictures fill: ten of the floor pictures (the
   Moonstone carpets) are as wide as the lift's and would otherwise end short of the frame */
.rd-config__frame { position: relative; overflow: hidden; aspect-ratio: 591 / 600; background: var(--nordic-morning); }
.rd-config__frame:has(.rd-config__view--side) { aspect-ratio: 384 / 600; }
.rd-config__view { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s var(--ease); }
/* A choice changes both pictures at once: the new ones, loaded first, fade in over the old ones, a
   plain crossfade without zoom or blur (the user, 2026-10-26; swift-config.js) */
.rd-config__view--next { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease-in-out; }
.rd-config__view--next.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rd-config__view--next { transition: none; } }
/* Phones, where the floor's picture is hidden: it fades in over the lift's while the carpet step is
   open, a slow crossfade both ways (swift-config.js, the user 2026-10-28) */
.rd-config__floor { display: none; }
@media (max-width: 849px) {
  .rd-config__floor { display: block; position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity 0.75s cubic-bezier(0.45, 0, 0.25, 1); }
  .is-floor .rd-config__floor { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .rd-config__floor { transition: none; } }
.rd-config__steps { display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: 0.5rem; }
/* Two steps to a row, the first across the whole row when their number is odd (the ArtWall, whose
   names are the longest): the choices' names then fit on one line, so the steps keep their natural
   height and choosing does not move the tiles, without a fixed height (the user, 2026-10-28) */
.rd-config__steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rd-config__steps > .rd-config__step { grid-column: span 3; }
.rd-config__steps > .rd-config__step:first-child:nth-last-child(n + 3) { grid-column: 1 / -1; }
/* Four steps (some languages): the ArtWall across, the other three in a row under it */
.rd-config__steps > .rd-config__step:first-child:nth-last-child(4) ~ .rd-config__step { grid-column: span 2; }
.rd-config__step { display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 0.2rem; min-height: 4.5rem; padding: 0.6rem 0.8rem 0.7rem; border: 1px solid var(--line); background: #fff; cursor: pointer; font-family: var(--font); transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); }
.rd-config__step:hover { border-color: var(--ink); }
.rd-config__step:focus-visible { outline: 2px solid var(--nordic-sunset); outline-offset: 2px; }
.rd-config__step[aria-selected='true'] { border-color: var(--ink); background: var(--ink); }
/* The steps' numbers are drawn by the style sheet, so they add no words to the page */
.rd-config__steps { counter-reset: rd-step; }
.rd-config__num::before { counter-increment: rd-step; content: counter(rd-step, decimal-leading-zero); }
.rd-config__num { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.rd-config__step[aria-selected='true'] .rd-config__num { color: var(--nordic-sunset); }
.rd-wrap .rd-config__label :is(h2, h3) { font-size: 0.8125rem; line-height: 1.3; letter-spacing: 0; color: var(--ink-2); }
/* (one step's label is bold in the content, "<strong>Välj matta:</strong>"; all three alike) */
.rd-wrap .rd-config__label :is(strong, b) { font-weight: inherit; }
.rd-wrap .rd-config__value :is(h2, h3) { font-size: 0.9375rem; line-height: 1.25; letter-spacing: -0.005em; color: var(--ink); }
.rd-wrap .rd-config__step[aria-selected='true'] .rd-config__label :is(h2, h3) { color: rgba(255, 255, 255, 0.7); }
.rd-wrap .rd-config__step[aria-selected='true'] .rd-config__value :is(h2, h3) { color: #fff; }
.rd-config__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); gap: var(--cfg-space) 0.6rem; margin-top: var(--cfg-space); }
.rd-config__tiles[hidden] { display: none; }
.rd-tile { display: grid; grid-template-rows: auto auto; gap: 0.4rem; align-content: start; align-items: start; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; font-family: var(--font); font-size: 0.75rem; font-weight: 500; line-height: 1.25; letter-spacing: 0; text-align: start; text-transform: none; color: var(--ink-2); }
.rd-tile img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 1px solid rgba(20, 20, 20, 0.12); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color 0.2s var(--ease), transform 0.2s var(--ease); }
.rd-tile span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.rd-tile:hover img { transform: translateY(-2px); }
.rd-tile:focus-visible { outline: none; }
.rd-tile:focus-visible img { outline-color: var(--nordic-sunset); }
.rd-tile[aria-pressed='true'] { color: var(--ink); }
.rd-tile[aria-pressed='true'] img { outline-color: var(--ink); }
.rd-config__detail { padding-top: 0.5rem; }
/* The colour or carpet chosen (swift-config.js): phones only, set as the ArtWall's name */
.rd-config__picked { display: none; margin: 0; font-family: var(--font); font-size: 1rem; font-weight: 500; line-height: 1.25; color: var(--ink); }
.rd-wrap .rd-config__detail :is(h2, h3) { margin-bottom: 0.35rem; font-size: 1rem; line-height: 1.25; }
.rd-config__detail p { max-width: 44em; font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); }
.rd-config .rd-actions { margin-top: var(--cfg-space); }
/* On computers the pictures are named under them with their steps' own labels (swift-config.js;
   the user, 2026-10-29): "ArtWall: Ink Bronze" as the heading of its description, the colour right
   after that text, and the carpet under the floor's picture. Phones and tablets keep the steps'
   own names. */
.rd-config__caption, .rd-config__caption-label { display: none; }
/* (the text before the colour ends without a margin, as the last one in its box did before) */
.rd-config__detail > :has(+ .rd-config__caption:last-child) { margin-bottom: 0; }
@media (min-width: 1000px) {
  .rd-config__views > .rd-config__frame:has(.rd-config__view--side) { grid-column: 2; grid-row: 1; }
  .rd-config__views > .rd-config__caption--color { grid-column: 1; grid-row: 2; }
  .rd-config__views > .rd-config__caption--carpet { grid-column: 2; grid-row: 2; }
  .rd-config__detail :has(> .rd-config__caption-label) { display: flex; flex-wrap: wrap; gap: 0 0.3em; align-items: baseline; margin-bottom: 0.2rem; }
  .rd-wrap .rd-config__detail :has(> .rd-config__caption-label) > :is(h2, h3) { width: auto; margin-bottom: 0; }
  .rd-config__caption-label { display: inline; font-size: 1rem; line-height: 1.25; color: var(--ink-2); }
  .rd-config__views .rd-config__caption { display: block; margin: 0; padding-top: 0.5rem; font-size: 1rem; line-height: 1.25; color: var(--ink-2); }
  .rd-config__views .rd-config__detail > .rd-config__caption { padding-top: 0.75rem; }
  .rd-config__caption b { font-weight: inherit; color: var(--ink); }
}
/* Phones and tablets: the heading and introduction first, then the pictures with the steps and
   tiles right under them, so a choice and the lift it changes stay on the screen together; the
   ArtWall's description after the tiles (the user, 2026-10-26) */
@media (max-width: 999px) {
  .rd-config__grid { gap: 0; }
  .rd-config__stage, .rd-config__views, .rd-config__panel { display: contents; }
  .rd-config__title { order: 1; margin-bottom: 1rem; }
  .rd-config__intro { order: 2; }
  .rd-config__frame { order: 3; margin-bottom: var(--cfg-space); }
  .rd-config__steps { order: 4; }
  /* Small tiles, so many choices show at once (a third larger than at first: the user,
     2026-10-29); their names are read out but not shown, the choice made is named in its step
     above (the user, 2026-10-26) */
  .rd-config__tiles { order: 5; grid-template-columns: repeat(auto-fill, minmax(2.95rem, 1fr)); gap: 0.6rem 0.55rem; margin-top: var(--cfg-space); }
  .rd-tile { grid-template-rows: auto; }
  .rd-tile img { outline-offset: 2px; }
  .rd-tile span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Some languages show it on computers only: no room kept for it then */
  .rd-config__detail { order: 6; padding-top: 0; }
  .rd-config__detail:has(> :not(.hide-for-medium, .rd-config__caption)) { padding-top: var(--cfg-space); }
  /* The ArtWall's name and description only while the ArtWall step is open (swift-config.js) */
  .has-artwall:not(.is-artwall) .rd-config__detail { display: none; }
  /* ...and the colour and carpet chosen in its place on the other steps (swift-config.js) */
  .rd-config__picked { display: block; order: 6; padding-top: var(--cfg-space); }
  .rd-config__picked:empty, .has-artwall.is-artwall .rd-config__picked { display: none; }
  .rd-config .rd-actions { order: 7; }
  .rd-config__quiet { order: 8; }
}

/* ---------- Sections of the other pages ---------- */
/* The first block of a page that opens without a picture clears the transparent header */
.rd-first { padding-top: calc(var(--section) + 70px) !important; }
.rd-photo { z-index: 2; font-family: var(--font); -webkit-font-smoothing: antialiased; }
/* The brand's grounds, as the page builder's section colours */
.rd-tone--summer { background: var(--nordic-summer); }
.rd-tone--morning { background: var(--nordic-morning); }
.rd-tone--white { background: #fff; }
.rd-tone--night { background: #000; }
:is(.rd-items, .rd-text, .rd-duo, .rd-row, .rd-cta, .rd-aside, .rd-gallery, .rd-models, .rd-wide, .rd-projects):not([class*='rd-tone--']):not(.rd-features--photo) { background: var(--mineral-white); }
/* Large type for the new blocks' own headings, a lead size for their text (scoped to these blocks,
   so the start pages' approved blocks and the configurator keep theirs) */
:is(.rd-items, .rd-text, .rd-duo, .rd-row, .rd-cta, .rd-aside, .rd-models, .rd-wide) .rd-wrap :where(h2) { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.03em; }
:is(.rd-items, .rd-text, .rd-duo, .rd-row, .rd-cta, .rd-aside, .rd-models, .rd-wide) .rd-wrap :where(h1) { font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4.5rem); line-height: 1; letter-spacing: -0.035em; }
:is(.rd-items, .rd-text, .rd-duo, .rd-row, .rd-cta, .rd-aside, .rd-models, .rd-wide) .rd-wrap :where(h3, h4) { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.02em; }
:is(.rd-items, .rd-text, .rd-duo, .rd-row, .rd-cta, .rd-aside, .rd-models, .rd-wide) .rd-wrap :where(p) { font-size: var(--t-body); line-height: 1.65; color: var(--ink-2); }
.rd-on-dark:is(.rd-items, .rd-text, .rd-duo, .rd-row, .rd-cta, .rd-aside, .rd-models, .rd-wide) .rd-wrap :where(p) { color: rgba(255, 255, 255, 0.82); }
:is(.rd-items, .rd-text, .rd-duo, .rd-row, .rd-cta, .rd-aside, .rd-models, .rd-wide) .rd-wrap :where(h1, h2, h3, h4) + :where(p, div, h3, h4) { margin-top: 1rem; }
:is(.rd-items, .rd-text, .rd-duo, .rd-row, .rd-cta, .rd-aside, .rd-models, .rd-wide) .rd-wrap :where(ul, ol) { margin: 0 0 1em 1.2em; color: var(--ink-2); }

/* A picture across the page with its text in a box, on the side the text lies today */
.rd-photo { position: relative; display: grid; align-items: center; min-height: clamp(560px, 78vh, 900px); overflow: hidden; isolation: isolate; background: var(--ink); }
.rd-photo--bottom { align-items: end; }
.rd-photo__media { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: var(--rd-pos, center); }
.rd-photo__frame { display: flex; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }
.rd-photo--end .rd-photo__frame { justify-content: flex-end; }
.rd-photo__box { width: min(100%, 30rem); padding: clamp(1.75rem, 1rem + 2vw, 2.75rem); background: var(--mineral-white); }
.rd-photo__box :is(h1, h2, h3, h4) { font-size: var(--t-h3); line-height: 1.12; letter-spacing: -0.02em; }
.rd-photo__box :is(h1, h2, h3, h4) + * { margin-top: 0.9rem; }
.rd-photo__box p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.rd-photo__box .rd-actions { margin-top: 2rem; }
@media (max-width: 699px) {
  .rd-photo { display: block; min-height: 0; background: var(--mineral-white); }
  .rd-photo__media { position: static; display: block; height: auto; aspect-ratio: 4 / 3.4; }
  /* Only the frame's top and bottom: its sides are the page's margin, which the text keeps (it lay
     against the screen's edge, the user 2026-10-28) */
  .rd-photo__frame { padding-block: 0; }
  .rd-photo__box { width: 100%; padding: 1.75rem 0 2.25rem; }
}

/* The heading and introduction before a section's items, side by side on computers */
.rd-intro { display: grid; gap: 1rem 4rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 1000px) { .rd-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } .rd-intro > :first-child { grid-row: span 3; } }
.rd-intro :is(h1, h2) { max-width: 13em; }
.rd-intro p { max-width: 38em; font-size: var(--t-lead) !important; line-height: 1.5 !important; }
.rd-intro .rd-actions { margin-top: 0.5rem; }

/* Icon rows: the picture beside its heading and text; rows in a row read as one list */
.rd-row { padding-block: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); }
.rd-row + .rd-row .rd-row__grid { border-top: 1px solid var(--line); padding-top: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); }
.rd-row + .rd-row { padding-top: 0; }
.rd-row:has(+ .rd-row) { padding-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); }
.rd-row__grid { display: grid; grid-template-columns: clamp(64px, 3rem + 4vw, 120px) minmax(0, 1fr); gap: clamp(1.25rem, 0.5rem + 3vw, 4rem); align-items: start; max-width: 60rem; }
.rd-row__icon img { display: block; width: 100%; height: auto; }
.rd-row__banner { aspect-ratio: 21 / 8; margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); }
/* Rows within one section, as rows of separate sections */
.rd-row__grid + .rd-row__grid { margin-top: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); padding-top: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); border-top: 1px solid var(--line); }
.rd-row__text { max-width: 40em; }
.rd-row__text :is(h2, h3, h4) { font-size: var(--t-h3) !important; line-height: 1.1; }
.rd-row__text .rd-button { margin-top: 2rem; }

/* A photo or film beside its text, the sides taking turns */
.rd-duo__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
@media (min-width: 1000px) {
  .rd-duo__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rd-duo--flip .rd-duo__media { order: 2; }
  .rd-duo__media--film { position: sticky; top: 96px; align-self: start; }
}
.rd-duo__media.rd-media { aspect-ratio: 4 / 3.4; }
/* The product films turn a lift on white: cropped upright so the lift fills the box, the white
   melting into the page's ground */
.rd-duo__media--film { aspect-ratio: 4 / 4.6; overflow: hidden; }
.rd-duo__media--film video { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.rd-duo__text { max-width: 40em; }

/* Items side by side under the section's heading */
.rd-items__grid { display: grid; gap: clamp(2rem, 1rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
@media (min-width: 700px) { .rd-items__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rd-items__grid { grid-template-columns: repeat(var(--items, 3), minmax(0, 1fr)); } }
/* The items of a row stretch to one height, their buttons level at the foot */
.rd-item { display: flex; flex-direction: column; align-items: flex-start; padding-top: 1.25rem; border-top: 2px solid var(--nordic-sunset); }
.rd-item :is(h2, h3, h4) { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem) !important; }
/* Items' buttons level at the foot, as wide as the line above them (up to a button's width and a
   half), so longer labels keep to one line like the others (the user, 2026-10-26) */
.rd-item .rd-button { width: 100%; max-width: 22rem; margin-top: auto; }
.rd-item > :not(.rd-button):has(+ .rd-button) { margin-bottom: 1.25rem; }
/* Two items side by side read as the section's own two halves: their headings a size up */
.rd-items__grid--pair .rd-item :is(h2, h3, h4) { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.4rem) !important; line-height: 1.08; letter-spacing: -0.025em; }
.rd-items .rd-actions { margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem); }
.rd-on-dark .rd-item { border-top-color: var(--nordic-summer); }
.rd-items.rd-features--photo { display: block; min-height: 0; }
/* The section's own pictures beside its items */
.rd-items__split { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
@media (min-width: 1000px) { .rd-items__split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .rd-items__pictures { position: sticky; top: 96px; } }
.rd-items__pictures { display: grid; gap: 0.75rem; }
.rd-items__pictures .rd-media { aspect-ratio: 4 / 3; }

/* Text only: the heading on one side, the text on the other */
.rd-text__grid { display: grid; gap: 1.25rem 4rem; }
@media (min-width: 1000px) { .rd-text__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.rd-text__head :is(h1, h2, h3) { max-width: 12em; }
.rd-text__body { max-width: 44em; }
.rd-text__body > :is(h2, h3, h4):not(:first-child) { margin-top: 2rem; }

/* Calls to action on the brand's light pink */
.rd-cta { padding-block: clamp(3.5rem, 2rem + 4vw, 6rem); }
.rd-cta__grid { display: grid; gap: 2rem 4rem; align-items: end; }
@media (min-width: 1000px) { .rd-cta__grid { grid-template-columns: minmax(0, 1fr) auto; } }
.rd-cta .rd-actions { margin-top: 0; }
.rd-cta__text :is(h3, h4) { font-size: var(--t-lead) !important; line-height: 1.4; letter-spacing: 0; }
.rd-cta__text p { color: var(--ink) !important; }

/* A heading and text beside a form or a list of questions */
.rd-aside__grid { display: grid; gap: 2rem 4rem; align-items: start; }
@media (min-width: 1000px) { .rd-aside__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .rd-aside__head { position: sticky; top: 96px; } }
.rd-aside__head p { max-width: 32em; }
/* The questions: full-width rows with a square toggle */
.rd-aside .accordion { border-top: 1px solid var(--ink); }
.rd-aside .accordion-item { border-bottom: 1px solid var(--line); }
.rd-aside .accordion-title { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 0 !important; border: 0 !important; font-family: var(--font); font-size: 1.125rem; font-weight: 500; line-height: 1.35; color: var(--ink) !important; background: none !important; }
.rd-aside .accordion-title .toggle { order: 2; margin-left: auto; position: static; display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line); color: var(--ink); }
[dir='rtl'] .rd-aside .accordion-title .toggle { margin-left: 0; margin-right: auto; }
.rd-aside .accordion-title:hover .toggle, .rd-aside .accordion-title.active .toggle { border-color: var(--nordic-summer); background: var(--nordic-summer); }
.rd-aside .accordion-inner { padding: 0 0 1.5rem !important; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
/* Forms: square fields in Neue Haas */
.rd-aside--form :is(input:not([type='checkbox']):not([type='radio']):not([type='submit']), select, textarea) { min-height: 3.25rem; padding: 0.75rem 1rem; border: 1px solid var(--line); background: #fff; box-shadow: none; font-family: var(--font); font-size: 1rem; }
.rd-aside--form :is(label, legend) { font-family: var(--font); font-weight: 500; font-size: 0.9375rem; color: var(--ink); }
.rd-aside--form :is(input[type='submit'], button[type='submit']) { min-height: 3.25rem; padding: 0.8rem 1.6rem; border: 0; background: var(--ink); color: #fff; font-family: var(--font); font-size: 1rem; font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Photos with their captions, one height per row, each as wide as its proportions ask; rows in a
   row read as one photo essay */
.rd-gallery { padding-block: clamp(0.75rem, 0.5rem + 1vw, 1.5rem); }
.rd-gallery:not(.rd-gallery + .rd-gallery) { padding-top: var(--section); }
.rd-gallery:not(:has(+ .rd-gallery)) { padding-bottom: var(--section); }
.rd-gallery__row { display: flex; gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem); align-items: flex-start; }
.rd-gallery__figure { flex: var(--ratio, 1) 1 0; min-width: 0; margin: 0; }
.rd-gallery__figure img { display: block; width: 100%; height: auto; }
.rd-gallery__figure figcaption { max-width: 40em; margin-top: 0.85rem; }
.rd-gallery__figure figcaption p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 699px) { .rd-gallery__row { flex-direction: column; } .rd-gallery__figure { flex: none; width: 100%; } }

/* The two models side by side, each in its colour; the comparison table below as it is */
.rd-models__grid { display: grid; gap: 1rem; }
@media (min-width: 700px) { .rd-models__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* On the page's ground, the cards on the faint Nordic summer of the projects; the pictures stand on
   their own off-white (the brand's mineral white), so they melt into their part of the card */
.rd-model { display: flex; flex-direction: column; background: color-mix(in srgb, var(--nordic-summer) 16%, var(--mineral-white)); }
.rd-model__pic { display: grid; place-items: center; padding: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1rem, 0.5rem + 2vw, 3rem); background: var(--mineral-white); }
.rd-model__pic img { display: block; width: auto; max-width: 100%; height: auto; max-height: 520px; margin: 0 auto; }
.rd-model__pic p { margin: 0; }
.rd-model__text { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.rd-model__text :is(h2, h3) { font-size: var(--t-h3) !important; color: var(--nordic-sunset) !important; }
/* (one gap between the card's heading, text and button: their own margins left out) */
.rd-wrap .rd-model__text > :is(h2, h3, p) { margin-block: 0; }
.rd-model--teal .rd-model__text :is(h2, h3) { color: var(--mineral-teal) !important; }
.rd-model__text .rd-button { margin-top: auto; }
.rd-models__after { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.rd-wide__body { overflow-x: auto; }

/* The projects list: cards of one height, the photo above the words, the buttons level at the foot */
/* The cards on one ground of a faint tint of the brand's Nordic summer, their own padding keeping
   the projects apart (the user, 2026-10-26) */
/* The ground's own padding matches a card's, so the pink at the edges is as wide as between two
   projects */
.rd-projects { --project-pad: clamp(1rem, 0.6rem + 1vw, 1.5rem); }
.rd-projects__grid { display: grid; gap: 0; padding: var(--project-pad); background: color-mix(in srgb, var(--nordic-summer) 16%, var(--mineral-white)); }
/* Wider than the other blocks on large screens, so the photos have room */
.rd-projects .rd-wrap { max-width: 1840px; }
@media (min-width: 700px) { .rd-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rd-projects__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* A block that begins with words of its own (domestic lifts' heading and words before its three
   projects): on computers the words lie across the top and the projects in one row under them,
   not the third alone on a second row (the user, 2026-11-04). Two to a row, the words fill the
   first place as before. */
@media (min-width: 1100px) {
  .rd-project:not(:has(.rd-project__pic)) { grid-column: 1 / -1; padding-bottom: 0; }
  .rd-project:not(:has(.rd-project__pic)) .rd-project__text { max-width: 46rem; padding-top: 0.5rem; }
}
.rd-project { display: flex; flex-direction: column; padding: clamp(1rem, 0.6rem + 1vw, 1.5rem) clamp(1rem, 0.6rem + 1vw, 1.5rem) clamp(1.5rem, 1rem + 1.5vw, 2.25rem); background: color-mix(in srgb, var(--nordic-summer) 16%, var(--mineral-white)); }
.rd-project__pic { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--nordic-morning); }
/* The name and description in white where today's site has them (the left, about the middle), a
   light shade from that side; the link covers the photo, the words let clicks through */
.rd-project__pic::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.04) 75%); pointer-events: none; }
.rd-project__link { position: absolute; inset: 0; z-index: 2; }
.rd-project__caption { position: absolute; top: 50%; left: clamp(1rem, 0.8rem + 0.6vw, 1.4rem); right: clamp(1rem, 0.8rem + 0.6vw, 1.4rem); z-index: 3; transform: translateY(-50%); color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4); pointer-events: none; }
.rd-project__name { display: block; margin-bottom: 0.35rem; font-family: var(--font); font-size: clamp(1.2rem, 1rem + 0.55vw, 1.6rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; }
.rd-wrap .rd-project__caption p { margin: 0; max-width: 28em; font-size: 1rem; line-height: 1.5; color: #fff; }
.rd-project__model { position: absolute; right: 0; bottom: 0; z-index: 3; padding: 0.45rem 0.8rem; background: var(--nordic-sunset); pointer-events: none; }
.rd-project--teal .rd-project__model { background: var(--mineral-teal); }
[dir='rtl'] .rd-project__model { right: auto; left: 0; }
.rd-project__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 0.5s var(--ease); }
/* On hover the photo comes closer and lights up, its shade gone */
.rd-project:hover .rd-project__pic img { transform: scale(1.03); filter: brightness(1.1); }
.rd-project__pic::before { transition: opacity 0.5s var(--ease); }
.rd-project:hover .rd-project__pic::before { opacity: 0; }
.rd-project__text { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding-top: 1.1rem; }
/* Phones: a long description (Spanish), centred, ran into the model's mark at the photo's foot;
   the words then start at the photo's top (the audit, 2026-10-29) */
@media (max-width: 699px) {
  .rd-project__caption { top: 1rem; transform: none; }
  /* a square photo and slightly smaller words, so even the long ones end above the mark */
  .rd-project__pic { aspect-ratio: 1 / 1; }
  .rd-project__name { font-size: 1.15rem; }
  .rd-wrap .rd-project__caption p { font-size: 0.9375rem; line-height: 1.45; }
}
.rd-wrap .rd-project__model :is(h2, h3) { margin: 0; font-size: 0.875rem; font-weight: 400; line-height: 1.2; letter-spacing: 0.01em; color: #fff; }
.rd-project__text p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
/* The brand's teal and a warm grey, softer than black (the user, 2026-10-26), as the projects' words
   were on today's site; the buttons are the projects' own mint ones */
.rd-project__text p a { color: inherit; text-decoration: none; }
.rd-project__text p a b, .rd-project__text p a strong { color: var(--mineral-teal); font-weight: 500; }
/* The name the photo shows is not repeated below it; the text then starts with a capital */
.rd-project__repeat { display: none; }
.rd-project__text p:has(.rd-project__repeat)::first-letter { text-transform: uppercase; }
.rd-project__text .rd-button { margin-top: auto; }

/* The contact pages: the form part, then the showrooms with their maps */
.rd-contact__part { margin-top: var(--section); }
.rd-contact__part--first { margin-top: 0; }
.rd-contact .rd-item :is(iframe, .cmplz-placeholder-element) { display: block; width: 100% !important; max-width: 100%; height: 300px !important; margin-top: 1.25rem; border: 0; }
.rd-contact .rd-item p { margin-bottom: 0.15em; font-size: 1.0625rem; line-height: 1.6; }

/* Today's sections kept on rebuilt pages. In the newsletter band (three blocks side by side), a
   column holding only a picture fills the band's full height. */
section.image_sec .row-collapse > .col:has(> .col-inner > .img:only-child) { align-self: stretch; }
section.image_sec .row-collapse > .col:has(> .col-inner > .img:only-child) :is(.col-inner, .img, .img-inner) { height: 100%; margin: 0; padding: 0; }
section.image_sec .row-collapse > .col:has(> .col-inner > .img:only-child) img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Sections kept as today without a colour of their own (a project's last photo, a row of buttons)
   lie on the page's ground, like the new blocks around them */
#main:has(.rd-section, .rd-hero, .rd-photo, .rd-reel) { background-color: var(--mineral-white); }
section.rd-buttons-row, section.rd-buttons-row > .section-bg { background-color: var(--mineral-white) !important; }
/* The lift colours beside their heading (SWIFT Lite): the heading's column a quarter wide, so
   "Lift colours" keeps to one line */
@media (min-width: 850px) {
  section:has(.black_txt_2) .row > .col.large-2:first-child:not(:has(img)) { flex-basis: 25%; max-width: 25%; }
  /* The heading above the colours instead (SWIFT Pro, and SWIFT Lite in some languages): as wide as
     the colours, a sixth of the row each, and starting where the first one does, rather than at
     the page's edge (the user, 2026-10-26) */
  section:has(.black_txt_2) .row:has(+ .row.align-center > .col.large-2:nth-of-type(3):nth-last-of-type(1)) { --colours: 50%; }
  section:has(.black_txt_2) .row:has(+ .row.align-center > .col.large-2:nth-of-type(4):nth-last-of-type(1)) { --colours: 66.6667%; }
  section:has(.black_txt_2) .row:has(+ .row.align-center > .col.large-2:nth-of-type(5):nth-last-of-type(1)) { --colours: 83.3333%; }
  section:has(.black_txt_2) .row:has(+ .row.align-center > .col.large-2:is(:nth-of-type(3), :nth-of-type(4), :nth-of-type(5)):nth-last-of-type(1)) > .col.large-10:only-of-type {
    flex-basis: var(--colours);
    max-width: var(--colours);
    margin-inline: auto;
    padding-inline: 0;
  }
  section:has(.black_txt_2) .row:has(+ .row.align-center > .col.large-2:is(:nth-of-type(3), :nth-of-type(4), :nth-of-type(5)):nth-last-of-type(1)) > .col.large-10:only-of-type > .col-inner {
    margin-left: 0 !important;
    padding-inline: 0 !important;
  }
}

/* ---------- Articles: blog posts and FAQ entries ----------
   The same content in a calmer reading column: a large title, body text a size up with more
   leading, square call-to-action boxes and buttons, the author and dates set small. */
:is(.single-post, .single-faq) #main { --article: 46rem; }
.single-post .blog-single > .row > .col { flex-basis: 100%; max-width: calc(var(--article) + 30px); margin-inline: auto; }
.single-faq #content > .row, .single-faq .custom-row-q { max-width: calc(var(--article) + 30px); }
.single-post .entry-header-text { text-align: start; padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 1.25rem; }
.single-post .entry-category { margin-bottom: 1rem; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.single-post .entry-category a { color: var(--nordic-sunset); }
:is(.single-post .entry-title, .single-faq .custom-row-q h1) { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.75rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; text-transform: none; color: var(--ink); text-wrap: balance; }
.single-faq .custom-row-q h1 { margin: 0.5rem 0 1.5rem; }
.single-post .entry-divider { width: 2rem; height: 2px; margin: 1.5rem 0 0; background: var(--nordic-sunset); opacity: 1; }
:is(.single-post .entry-content, .single-faq .custom-row-q .col) { font-size: 1.125rem; line-height: 1.7; color: #2c2a28; }
:is(.single-post .entry-content, .single-faq .custom-row-q .col) :is(p, li) { font-size: inherit; line-height: inherit; }
:is(.single-post .entry-content, .single-faq .custom-row-q .col) :is(h2, h3) { margin: 2.5rem 0 0.9rem; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
:is(.single-post .entry-content, .single-faq .custom-row-q .col) h2 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.15rem); }
:is(.single-post .entry-content, .single-faq .custom-row-q .col) h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
:is(.single-post .entry-content, .single-faq .custom-row-q .col) :is(ul, ol) { margin-block: 0 1.5rem; }
:is(.single-post .entry-content, .single-faq .custom-row-q .col) li { margin-bottom: 0.4rem; }
/* Lists pasted with another site's classes ("flex flex-col") were laid out side by side by the
   theme's .flex, past the screen's edge (on production too); they are lists */
:is(.single-post .entry-content, .single-faq .custom-row-q .col) :is(ul, ol).flex { display: block; }
/* A table wider than a phone scrolls sideways in itself instead of being cut off at the edge */
@media (max-width: 849px) {
  :is(.single-post .entry-content, .single-faq .custom-row-q .col) table { display: block; max-width: 100%; overflow-x: auto; }
}
:is(.single-post .entry-content, .single-faq .custom-row-q .col) p a { text-decoration: underline; text-decoration-color: var(--nordic-sunset); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.single-faq .custom-row-q .breadcrumb { margin: clamp(2rem, 1rem + 3vw, 3.5rem) 0 0; font-size: 0.85rem; letter-spacing: 0.02em; }
/* Written by, category and date */
:is(.single-post, .single-faq) .meta-box-wrapper { padding-block: 0.9rem; border-block: 1px solid var(--line); font-size: 0.875rem; line-height: 1.6; color: var(--ink-2); }
.single-faq .meta-box-wrapper { margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
/* Call-to-action boxes written into the text (inline styles: shadow, round corners and pill buttons) */
.bt-back { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) !important; border: 1px solid var(--line); border-radius: 0 !important; background: var(--mineral-white); box-shadow: none !important; }
.bt-back h3 { margin-top: 0 !important; color: var(--ink) !important; }
.bt-back :is(.btn, button) { min-height: 3.25rem; padding: 0.8rem 1.4rem !important; border-radius: 0 !important; font-family: var(--font); font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; }
.single-post .entry-meta { margin-top: 2.5rem; font-size: 0.85rem; text-align: start; color: var(--ink-3); }
.single-post .author-box { margin-top: 2rem; padding: 1.75rem; background: var(--mineral-white); border: 1px solid var(--line); }
.single-post .author-box .author-name { margin-bottom: 0.5rem; font-size: 1rem; letter-spacing: 0.08em; }
.single-post .author-box .author-desc { font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); }

/* ---------- Blog lists (the blog, categories, tags, authors) ----------
   Cards read from the left like the articles: picture, title, excerpt; posts without a picture get
   a panel in the brand's light colours, so every row lines up. */
/* The blog's title above the list, as the FAQ's: the brand's short line, then the title large */
.blog-archive .rd-blog-head { padding: clamp(2.5rem, 1.5rem + 4vw, 6rem) 0 clamp(1.75rem, 1rem + 2.5vw, 3.5rem); font-family: var(--font); -webkit-font-smoothing: antialiased; }
.blog-archive .rd-blog-head::before { content: ''; display: block; width: 2.5rem; height: 2px; margin-bottom: 1.25rem; background: var(--nordic-sunset); }
.blog-archive .rd-blog-head h1 { margin: 0; font-family: var(--font); font-size: var(--t-display); font-weight: 500; line-height: 0.95; letter-spacing: -0.04em; text-transform: none; color: var(--ink); text-wrap: balance; }
.blog-archive .post-item .box-text { padding: 1.1rem 0 0.5rem; text-align: start; }
.blog-archive .post-item .post-title { font-size: 1.2rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; text-transform: none; }
.blog-archive .post-item .post-title a { color: var(--ink); }
.blog-archive .post-item:hover .post-title a { color: var(--nordic-sunset); }
.blog-archive .post-item .is-divider { display: none; }
.blog-archive .post-item .from_the_blog_excerpt { font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }
.blog-archive .post-item .box-image img { transition: transform 1.2s var(--ease); }
.blog-archive .post-item:hover .box-image img { transform: scale(1.03); }
.blog-archive .box-blog-post:not(:has(.box-image))::before { content: ''; display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--nordic-summer), #fdd9d1 60%, #e4dcf6); }
.blog-archive .nav-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
.blog-archive .nav-pagination .page-number { display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 0.5rem; border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); font-weight: 500; line-height: 1; }
.blog-archive .nav-pagination .page-number.current, .blog-archive .nav-pagination a.page-number:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* ---------- The FAQ list ----------
   In the brand's look (the user, 2026-10-28): the page's warm ground, a large title under the
   brand's short line (beside the list on computers), the categories as numbered rows (the numbers
   drawn by the style sheet, so they add no words), a square toggle that turns Nordic sunset when
   open, and the questions with an arrow, in two columns on wider screens. The list's own style tag
   (archives.ts) comes after this sheet, hence the #content in front. */
#main:has(.faq-container) { background: var(--mineral-white); }
.content-area:has(> .faq-container) { max-width: none !important; margin: 0 !important; }
#content .faq-container { display: grid; gap: 0 clamp(2rem, 1rem + 4vw, 6rem); max-width: 1440px; height: auto; margin-inline: auto; padding: clamp(2.5rem, 1.5rem + 4vw, 6rem) var(--gutter) var(--section); counter-reset: rd-faq; font-family: var(--font); -webkit-font-smoothing: antialiased; }
#content .faq-h1 { margin: 0 0 clamp(2rem, 1rem + 3vw, 3rem); text-align: start; }
#content .faq-h1::before { content: ''; display: block; width: 2.5rem; height: 2px; margin-bottom: 1.25rem; background: var(--nordic-sunset); }
#content .faq-h1 h1 { margin: 0; font-family: var(--font); font-size: var(--t-display); font-weight: 500; line-height: 0.95; letter-spacing: -0.04em; text-transform: none; color: var(--ink); }
@media (min-width: 1000px) {
  #content .faq-container { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  #content .faq-h1 { position: sticky; top: 110px; grid-row: 1 / span 6; }
}
#content .faq-category { margin: 0; border-top: 1px solid var(--line); counter-increment: rd-faq; text-align: start; }
#content .faq-h1 + .faq-category { border-top-color: var(--ink); }
#content .faq-category:not(:has(~ .faq-category)) { border-bottom: 1px solid var(--line); }
#content .faq-header { gap: 1.25rem; margin: 0; padding: clamp(1.25rem, 1rem + 1vw, 1.9rem) 0; }
#content .faq-header::before { content: counter(rd-faq, decimal-leading-zero); flex: none; width: 2rem; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--mineral-teal); }
#content .faq-header h2 { order: 1; flex: 1; margin: 0; font-family: var(--font); font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.1rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; text-transform: none; color: var(--ink); transition: color 0.2s; }
#content .faq-header:hover h2 { color: var(--mineral-teal); }
/* The toggle's + and − are drawn, so the open one can turn into a minus smoothly */
#content .faq-header .toggle-button { order: 2; position: relative; flex: none; width: 2.75rem; height: 2.75rem; margin: 0; border: 1px solid var(--ink); font-size: 0; color: transparent; transition: background-color 0.2s, border-color 0.2s; }
#content .faq-header .toggle-button::before, #content .faq-header .toggle-button::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform 0.3s var(--ease), background-color 0.2s; }
#content .faq-header .toggle-button::after { transform: translate(-50%, -50%) rotate(90deg); }
#content .faq-header:hover .toggle-button { border-color: var(--nordic-summer); background: var(--nordic-summer); }
#content .faq-category:has(> .faq-questions[style*='block']) .toggle-button { border-color: var(--nordic-sunset); background: var(--nordic-sunset); }
#content .faq-category:has(> .faq-questions[style*='block']) .toggle-button::before { background: #fff; }
#content .faq-category:has(> .faq-questions[style*='block']) .toggle-button::after { background: #fff; transform: translate(-50%, -50%); }
#content .faq-questions { padding: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.5rem); padding-inline-start: 3.25rem; }
@media (min-width: 700px) { #content .faq-questions[style*='block'] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
#content .faq-questions p { margin: 0; border-top: 1px solid var(--line); }
#content .faq-questions a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.95rem 0; font-size: 1.0625rem; line-height: 1.4; color: var(--ink-2); text-decoration: none; transition: color 0.2s; }
#content .faq-questions a::after { content: ''; flex: none; width: 16px; height: 16px; background: var(--ink-3); -webkit-mask: url(/wp-content/uploads/2024/03/arrow-right-ffc9bd.svg) center / contain no-repeat; mask: url(/wp-content/uploads/2024/03/arrow-right-ffc9bd.svg) center / contain no-repeat; transform: translateY(2px); transition: background-color 0.2s, transform 0.3s var(--ease); }
[dir='rtl'] #content .faq-questions a::after { transform: translateY(2px) scaleX(-1); }
#content .faq-questions a:hover { color: var(--ink); }
#content .faq-questions a:hover::after { background: var(--nordic-sunset); transform: translate(4px, 2px); }
[dir='rtl'] #content .faq-questions a:hover::after { transform: translate(-4px, 2px) scaleX(-1); }
#content .faq-empty-row { display: none; }

/* ---------- Phones and tablets (the user's review, 2026-10-28) ---------- */
/* The menu bar once the page has scrolled: a slim bar at the very top, so the logo and the menu no
   longer hang 50 px down over the text. The logo file has room around the logotype, which is
   cropped away here. The bar stays see-through on every screen, as the user wants it
   (2026-10-29). */
.stuck .header-main { height: 80px !important; }
.stuck #logo img { width: auto; height: 52px !important; max-height: none !important; aspect-ratio: 1107 / 316; object-fit: cover; }
@media (max-width: 849px) {
  .stuck .header-main { height: 64px !important; }
  .stuck #logo img { height: 42px !important; }
}

/* One margin for all text on phones: today's sections keep the new blocks' margin, rows the page
   builder narrowed to 80 % of the page are full width, and the project cards reach the screen's
   edges so their words line up with the text around them */
@media (max-width: 549px) {
  .section-content > .row[style*='max-width'] { max-width: 100% !important; }
  .section-content > .row:not(.row-collapse) > .col { padding-inline: var(--gutter); }
  /* The page builder's inner side padding (20 px, 5 %, 20 %) only where the column is a coloured box */
  .section-content > .row:not(.row-collapse) > .col > .col-inner:not([style*='background']) { padding-inline: 0 !important; }
  /* The FAQ on some product pages: without the theme's own side padding (5 % and 40 px), which
     left its questions a narrow column in the middle (the audit, 2026-10-29) */
  .swift_support_sec .section-content.relative { padding-inline: 0; }
  .swift_support_sec .section-content > .row { padding-inline: 0 !important; }
  /* (its coloured step boxes on How to buy keep the margin around them) */
  .swift_support_sec .section-content > .row:has(> .col[class*='text_col_']) { padding-inline: var(--gutter) !important; }
}
@media (max-width: 699px) {
  :root { --section: 3.25rem; }
  .rd-projects .rd-projects__grid { padding-inline: 0; }
  .rd-project { padding-inline: var(--gutter); }
}

/* How to buy: phones and tablets keep the computer's layout, smaller: the line with its dots down
   the middle from the first step to the last, each step's picture and text on alternate sides
   (the user, 2026-10-28). The line is drawn by the dots' column itself, the full height of each
   step, so it runs on unbroken whatever the steps' heights.
   The dots are found by their exact class (class="circle"): round buttons, the share icons and
   an author's picture on a blog post, carry "circle" among other classes. */
@media (max-width: 849px) {
  .row:has(> .col [class="circle"]) { --dot: 1.75rem; position: relative; flex-wrap: nowrap; }
  .row:has(> .col [class="circle"]) > .col { flex: 1 1 0; max-width: none; padding: 0 0.6rem 1.5rem; }
  .row:has(> .col [class="circle"]) > .col:has([class="circle"]) { display: block !important; position: relative; flex: 0 0 11px; padding: 0; }
  .row:has(> .col [class="circle"]) > .col:has([class="circle"]) > .col-inner { position: absolute; inset: 0; margin: 0 !important; padding: 0 !important; }
  .row:has(> .col [class="circle"]) > .col:has([class="circle"])::before { content: ''; position: absolute; top: 0; bottom: 0; left: 5px; width: 1px; background: #000; }
  .row:has(> .col [class="circle"]) :is(.vertical-line, .vertical-line-last) { display: none; }
  .row:has(> .col [class="circle"]) [class="circle"] { position: absolute; top: var(--dot); left: 0; width: 11px; height: 11px; margin: 0; }
  .section:has([class="circle"]):not(.section:has([class="circle"]) ~ .section) .row > .col:has([class="circle"])::before { top: var(--dot); }
  .section:has([class="circle"]):not(:has(~ .section [class="circle"])) .row > .col:has([class="circle"])::before { bottom: auto; height: var(--dot); }
  .row:has(> .col [class="circle"]) > .col .img { width: 62% !important; }
  .row:has(> .col [class="circle"]) > .col :is(h1, h2, h3) { font-size: clamp(1rem, 0.8rem + 1vw, 1.3rem) !important; line-height: 1.15; }
  .row:has(> .col [class="circle"]) > .col .text { font-size: clamp(0.85rem, 0.75rem + 0.5vw, 1rem) !important; }
  .row:has(> .col [class="circle"]) > .col .text p { font-size: inherit; line-height: 1.45; }
  .row:has(> .col [class="circle"]) > .col .button { width: 100%; max-width: 250px; font-size: 13px; }
}

/* Battery driven: four films, one after the other with the arrow. Each step's words lay on its own
   film, whose width is known only once the film has loaded, so the words jumped with every click
   (the user, 2026-10-28). All steps now lie in one place as large as the largest, the words at the
   same place each time; on phones they lie under the film instead of across it. */
.battery-video-container { display: grid; }
.battery-video-container .video-section { display: block; grid-area: 1 / 1; position: relative; z-index: 1; top: auto; left: auto; width: 100%; height: 100%; transform: none; visibility: hidden; transition: visibility 0s linear 0.7s; }
.battery-video-container .video-section.active { z-index: 2; visibility: visible; transition: none; }
/* The next step's film fades in over the last one's, which stays until it has, so the picture never
   goes dark; the words fade out first and the next step's in after (the user, 2026-10-28). The film
   of a step not shown is left out, except the steps after it, which so load ahead of their turn
   (with only the next one loading ahead, a quick second click came before the third film had loaded
   and the picture jumped, the first round only: the user, 2026-10-28), and the one just left,
   until its time is up. */
.battery-video-container .video-section video { opacity: 1; transition: opacity 0.7s ease, display 0.7s allow-discrete; }
.battery-video-container .video-section:not(.active) video { display: none; opacity: 0; transition: opacity 0s linear 0.7s, display 0.7s allow-discrete; }
.battery-video-container .video-section.active ~ .video-section video { display: block; }
@starting-style { .battery-video-container .video-section.active video { opacity: 0; } }
.battery-video-container .battery-overlay { opacity: 0; transition: opacity 0.3s ease; }
.battery-video-container .video-section.active .battery-overlay { opacity: 1; transition: opacity 0.45s ease 0.35s; }
@media (prefers-reduced-motion: reduce) { .battery-video-container .video-section, .battery-video-container .video-section video, .battery-video-container .battery-overlay { transition: none !important; } }
/* The arrow after each step's words has a width but no height, so until it had loaded (the first
   time each step showed) the words sat lower and then jumped up: its room is kept from the start
   (the user, 2026-10-28) */
.battery-overlay img[src*='arrow-right.png'] { height: auto; aspect-ratio: 1039 / 538; }
.battery-video-container .video-section video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Every step's words start at the same height, so the next step's take the place of the last one's
   (centred, the first step's longer words stood higher) */
.battery-overlay { justify-content: flex-start; padding: 28vh var(--gutter) 0 max(var(--gutter), 10%); }
/* A click anywhere on a step's words goes on to the next step, not only on the arrow (the user,
   2026-10-28): the arrow's heading reaches over the step's words, which the box now fits */
/* Computers: the words lie in the page's flow from 28 % of the screen down, and every step is at least
   as high as the film's 80 % of the screen; the longest step's words (French, Dutch, Spanish on a
   laptop) then make all the steps taller instead of running out over the next section (the audit,
   2026-10-29) */
@media (min-width: 769px) {
  .battery-video-container { height: auto; min-height: 80vh; }
  .battery-video-container .video-section { height: auto; min-height: 80vh; padding: 28vh 0 6vh; }
  .battery-video-container .video-section video { position: absolute; inset: 0; }
  .battery-overlay { position: relative; top: auto; right: auto; bottom: auto; width: auto; max-width: 60%; height: auto; padding-top: 0; }
}
.battery-overlay [id^='changeVideoButton']::after { content: ''; position: absolute; inset: 0; cursor: pointer; }
@media (max-width: 768px) {
  .battery-video-container { height: auto; }
  /* Every step keeps the film's room, shown or not, so the tallest words set the height */
  .battery-video-container .video-section { padding-top: 125%; }
  .battery-video-container .video-section video { position: absolute; top: 0; left: 0; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
  .battery-overlay { position: relative; width: 100%; height: auto; padding: 1.75rem var(--gutter) 2.5rem; justify-content: flex-start; }
}

/* White words on a photo get a soft shade, so they can be read on light photos too (the audit,
   2026-10-29: "Swiftly Towards Sustainability", "Carpets", the models' words) */
.section:has(> .section-bg img, > .section-bg video) .rd-light-text :is(h1, h2, h3, h4, h5, h6, p, li) { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 2px 22px rgba(0, 0, 0, 0.45); }

/* Start pages on phones (the user, 2026-10-28): room above and below the first text after the film;
   the two models' photos at their own proportions, not cropped at the top and foot. Product pages:
   the text under the heading no longer pulled up into it (a negative margin of the page builder). */
@media (max-width: 549px) {
  .section.swift_banner:not(:has(> .section-bg img)) { padding-block: 3rem 3.5rem !important; }
  /* (the photos' own cream margins above and below the picture left out: SWIFT Lite's lay 50 px
     between the picture and its button) */
  .section:has(> .section-bg img[src*='Lottie_mobil_SWIFT-Pro']) { height: auto !important; min-height: 0 !important; aspect-ratio: 1023 / 1140; }
  .section:has(> .section-bg img[src*='Lottie_mobil_SWIFT-Pro']) .section-bg img { object-position: 50% 91.5% !important; }
  .section:has(> .section-bg img[src*='Lottie_mobil_SWIFT-Lite']) { height: auto !important; min-height: 0 !important; aspect-ratio: 1023 / 1180; }
  .section:has(> .section-bg img[src*='Lottie_mobil_SWIFT-Lite']) .section-bg img { object-position: 50% 55% !important; }
  /* Their words and buttons a little in from the edge, the button close under its photo */
  .section:has(> .section-bg img[src*='Lottie_mobil_SWIFT-']) .section-content > .row > .col,
  .section:has(> .section-bg img[src*='Lottie_mobil_SWIFT-']) + .section .section-content > .row > .col { padding-inline-start: 2.25rem; }
  .section:has(> .section-bg img[src*='Lottie_mobil_SWIFT-']) + .section { padding-top: 0.75rem !important; }
  /* SWIFT Lite's words and button mirror SWIFT Pro's: on the right, as far from the right edge as
     Pro's are from the left, clear of the lift on the left (the user, 2026-10-28); both buttons
     line up with their words exactly */
  .section:has(> .section-bg img[src*='Lottie_mobil_SWIFT-Lite']) .section-content > .row > .col { padding-inline: 45% 2.25rem; }
  .section:has(> .section-bg img[src*='Lottie_mobil_SWIFT-Lite']) + .section .section-content > .row > .col { padding-inline: var(--gutter) 2.25rem; }
  .section:has(> .section-bg img[src*='Lottie_mobil_SWIFT-Lite']) .col :is(.col-inner, .text, h1, h2, h3, h4, p),
  .section:has(> .section-bg img[src*='Lottie_mobil_SWIFT-Lite']) + .section .col-inner { text-align: end !important; }
  .section:has(> .section-bg img[src*='Lottie_mobil_SWIFT-']) + .section .button { margin-inline: 0; }
  /* Domestic lifts' first photo further left, so more of the lift and its display shows */
  .rd-hero__still[src*='Vietnam-2'] { object-position: 22% 80%; }
  .section.swift-pro-hero .row > .col > .col-inner { margin-top: 0 !important; }
  /* SWIFT Pro and SWIFT Lite's first photo: the heading closer under it, and room under the
     buttons before the next photo (the user, 2026-10-29) */
  .section.swift-pro-hero .row > .col:first-child { padding-bottom: 0.5rem; }
  .section.swift-pro-hero { padding-bottom: 2.5rem !important; }
}

/* SWIFT Pro and SWIFT Lite's first words under the photo (and the same row on two Indian city
   pages): the heading, its words and the buttons closer together, and on computers the same room
   above and below them in every language, where the page builder left 16-80 px above and 34-191 px
   below (the user, 2026-10-30): on computers as much room above as below. The row: a heading
   and, in a column after it, words. */
@media (max-width: 849px) {
  .section.swift-pro-hero .row:has(> .col h1):has(> .col + .col p) > .col { padding-bottom: 0 !important; }
  .section.swift-pro-hero .row:has(> .col h1):has(> .col + .col p) > .col:not(:first-child) > .col-inner { padding-top: 0 !important; margin-top: 0 !important; }
  .section.swift-pro-hero .row:has(> .col h1):has(> .col + .col p) > .col:not(:last-of-type) > .col-inner { padding-bottom: 0 !important; }
  .section.swift-pro-hero .row:has(> .col h1):has(> .col + .col p) h1 { margin-bottom: 1rem; }
  .section.swift-pro-hero .row:has(> .col h1):has(> .col + .col p) > .col:not(:has(h1)) p:last-of-type { margin-bottom: 1.25rem; }
}
@media (min-width: 850px) {
  .section.swift-pro-hero .row:has(> .col h1):has(> .col + .col p) { align-items: flex-start; padding-block: 2.5rem; }
  .section.swift-pro-hero .row:has(> .col h1):has(> .col + .col p) .button:first-of-type { margin-top: 0; }
  .section.swift-pro-hero .row:has(> .col h1):has(> .col + .col p) .button:last-of-type { margin-bottom: 0; }
  .section.swift-pro-hero .row:has(> .col h1):has(> .col + .col p) > .col { padding-bottom: 0 !important; }
  .section.swift-pro-hero .row:has(> .col h1):has(> .col + .col p) > .col > .col-inner { padding-block: 0 !important; margin-top: 0 !important; }
  .section.swift-pro-hero .row:has(> .col h1):has(> .col + .col p) h1,
  .section.swift-pro-hero .row:has(> .col h1):has(> .col + .col p) > .col:not(:has(.button)) p:last-of-type { margin-bottom: 0; }
  /* The photo's row above it adds no room of its own, nor does the section when the row ends it */
  .section.swift-pro-hero .row:has(+ .row > .col h1):has(+ .row > .col + .col p) > .col { padding-bottom: 0 !important; }
  .section.swift-pro-hero:has(> .section-content > .row:last-of-type > .col h1):has(> .section-content > .row:last-of-type > .col + .col p) { padding-bottom: 0 !important; }
  /* The section at least a screen high in every language, as SWIFT Pro's is today on
     swiftlifts.com (the user, 2026-11-04): the photo at the top and the words in the middle of the
     room under it, so that room is as high above them as below, not all of it under the buttons.
     (Phones keep the page builder's height: Swedish SWIFT Lite shows no photo there, and its words
     sit in the middle of the screen, clear of the menu bar.) */
  .section.swift-pro-hero:has(> .section-content > .row > .col h1):has(> .section-content > .row > .col + .col p) { min-height: 100vh !important; align-items: stretch; }
  .section.swift-pro-hero:has(> .section-content > .row > .col h1):has(> .section-content > .row > .col + .col p) > .section-content { display: flex; flex-direction: column; }
  .section.swift-pro-hero > .section-content > .row:has(> .col h1):has(> .col + .col p) { flex-grow: 1; align-content: center; }
}

/* SWIFT Lite's classic buttons on phones: the words on as much of the grey-blue as they need, the
   buttons' picture right under them at its own proportions instead of two screens of grey (the
   user, 2026-10-28) */
@media (max-width: 849px) {
  .section:has(> .section-bg img[src*='control-panel_in_carrier_2023_mobil2']) { height: auto !important; min-height: 0 !important; padding-block: 0 2.5rem !important; border-bottom: 0; }
  .section:has(> .section-bg img[src*='control-panel_in_carrier_2023_mobil1']) { height: auto !important; min-height: 0 !important; aspect-ratio: 1104 / 975; }
  .section:has(> .section-bg img[src*='control-panel_in_carrier_2023_mobil1']) .section-bg img { object-position: 50% 0 !important; }
}

/* SWIFT Studio on phones: the portraits moved so the faces show, the words in a column clear of them
   on the left */
@media (max-width: 549px) {
  .section-bg img[src*='arvid-studio-1'] { object-position: 54% 50% !important; }
  .section-bg img[src*='sws_design_08-1'] { object-position: 56% 50% !important; }
  .section:has(> .section-bg :is(img[src*='arvid-studio-1'], img[src*='sws_design_08-1'])) .section-content > .row > .col > .col-inner { padding-inline: 0 34% !important; }
}

/* The product pages' row of nine feature icons (EcoDrive … Technical compliance) on computers: the
   page builder gave each a twelfth of the row, so the icons were a few pixels wide and the longer
   words ran into the next one (the audit, 2026-10-29). Each now has a ninth, its icon at most
   64 px and all of one size; below 1200 px five to a row. */
@media (min-width: 850px) {
  .ecodrive_icon_sec .row:has(> .col.large-1) { align-items: flex-start; }
  .ecodrive_icon_sec .row > .col.large-1 { flex: 1 1 0; max-width: none; padding-inline: 0.4rem; }
  .ecodrive_icon_sec .row > .col.large-1 > .col-inner { padding-inline: 0 !important; }
  .ecodrive_icon_sec .row > .col.large-1 .img { width: 64px !important; margin-inline: auto; }
  /* (the editor narrowed some icons with side margins of their own, 10 to 30 px) */
  .ecodrive_icon_sec .row > .col.large-1 .img-inner { margin: 0 !important; }
}
@media (min-width: 850px) and (max-width: 1199px) {
  .ecodrive_icon_sec .row:has(> .col.large-1) { flex-wrap: wrap; row-gap: 1.75rem; }
  .ecodrive_icon_sec .row > .col.large-1 { flex: 0 0 20%; }
}

/* Today's sections on redesigned pages keep the redesign's rhythm: on the page's own ground their
   content sits a section's space from the top and the foot, as the new blocks' does, instead of the
   page builder's 0 to 190 px (the user, 2026-10-29). Left as they are: sections on a photo or film,
   full-height and scrolling ones (their heights carry an animation), How to buy's line of steps,
   the products' first photo and the start pages' introduction, which the user had set, and the
   battery pages' empty black band above the film (30 px above and below, so the film begins under
   the menu as today; the user, 2026-11-04). */
.rd-page #content > .section:not(.is-full-height, .swift-pro-hero, .swift_banner, .tesla_sec, .battery-video, :has(+ .battery-video)):not(:has(> .section-bg :is(img, video), canvas, video, [class="circle"])) { padding-block: var(--section) !important; }
.rd-page #content > .section:not(.is-full-height, .swift-pro-hero, .swift_banner, .tesla_sec, .battery-video, :has(+ .battery-video)):not(:has(> .section-bg :is(img, video), canvas, video, [class="circle"])) > .section-content > .row:last-child > .col { padding-bottom: 0; }
/* (the last words of such a section end without the paragraph's margin under them) */
.rd-page #content > .section:not(.is-full-height, .swift-pro-hero, .swift_banner, .tesla_sec, .battery-video, :has(+ .battery-video)):not(:has(> .section-bg :is(img, video), canvas, video, [class="circle"])) > .section-content > .row:last-child :is(.col-inner, .text) > :last-child { margin-bottom: 0; }
/* ...and a button right under their text the new blocks' 2rem (with the paragraph's own margin) */
.rd-page #content > .section .text + .button { margin-top: 0.75rem; }
/* The start pages' newsletter band on computers: its photo (a picture, or a banner in vn, be and
   be-fr) fills the band from top to foot, over the section's space above and below it, which would
   otherwise show the band's pink (the user, 2026-11-04). The band's height comes from its newsletter
   and Instagram columns; the photo keeps its proportions and is cropped to fill it (the user: rather
   zoom in than stretch). */
@media (min-width: 850px) {
  .rd-page #content > .section.image_sec > .section-content > .row > .col:has(> .col-inner > :is(.img, .banner):only-child) { align-self: stretch; margin-block: calc(-1 * var(--section)); }
  .rd-page #content > .section.image_sec > .section-content > .row > .col:has(> .col-inner > :is(.img, .banner):only-child) :is(.col-inner, .img, .img-inner, .banner) { height: 100%; }
  .rd-page #content > .section.image_sec > .section-content > .row > .col:has(> .col-inner > .banner:only-child) .banner { padding-top: 0; }
  .rd-page #content > .section.image_sec > .section-content > .row > .col:has(> .col-inner > :is(.img, .banner):only-child) img { width: 100%; height: 100%; object-fit: cover; }
}
/* ...and on phones, where it lies on a row of its own, it reaches from edge to edge (vn's column had
   the page builder's side padding, 16 px, the other languages' none) */
@media (max-width: 549px) {
  .rd-page #content > .section.image_sec > .section-content > .row > .col:has(> .col-inner > :is(.img, .banner):only-child) { padding-inline: 0; }
}
/* Feature cards without a heading above them begin at the section's space, not a heading's below it */
.rd-features__grid:first-child { margin-top: 0; }

/* Motion: blocks rise into place as they scroll in, where browsers can tie it to scrolling */
@keyframes rd-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .rd-hero__content { animation: rd-rise 1.1s var(--ease) both; }
  @supports (animation-timeline: view()) {
    .rd-split__grid > *, .rd-features__head, .rd-feature, .rd-story__content {
      animation: rd-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%;
    }
  }
}