/* main.css — the single stylesheet this repo requires (docs/STRUCTURE.md §1).
   Assembled from the per-section sources; every rule is scoped under its own
   `.section-XX` / `.navbar` / `.footer` root, so the sections cannot affect each
   other and their order here is irrelevant.

   ONE ORDERING RULE MATTERS: the SHARED STYLES block must stay LAST. Several
   sections rely on a shared rule winning an equal-specificity tie against their
   own (a mobile override beating a per-section desktop rule). Moving it breaks
   those silently — nothing errors, the layout just shifts.

   Page reset (was an inline <style> in every page's <head>; the repo forbids
   per-page style dumps): */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Anchor targets (#how, #private, the FAQ links…) would otherwise land under
   the fixed navbar. Offsets every jump by the bar's height. */
html {
  scroll-padding-top: var(--navbar-h);
}


/* ===== navbar.css ===== */
/* COMPONENT: navbar  (top navigation bar + full-screen mobile menu)
   Reusable across every page. Self-contained: everything is scoped under
   `.navbar` so it never interferes with any page section.
   Needs: partials/header.html (markup) + assets/js/main.js (open/close behaviour).
   IMPORTANT: the class names (.navbar, .nav-*, .submenu, is-open, is-expanded)
   are referenced by the header script in assets/js/main.js — do not rename them. */

/* keep this component's box model predictable no matter where it is dropped */
.navbar,
.navbar *,
.navbar *::before,
.navbar *::after {
  box-sizing: border-box;
}

/* Height of the fixed bar, as a token: the pages below it have to reserve
   exactly this much room (see `.section-10a` / `.page--light`). 28px padding
   top and bottom around a 40px logo on desktop; on mobile the 44px hit-area of
   the hamburger is the tallest child, so the bar grows by 4px. If you change
   the padding or the logo height, change these two numbers with it. */
:root {
  --navbar-h: 96px;
}

@media (max-width: 900px) {
  :root {
    --navbar-h: 100px;
  }
}

.navbar {
  /* Fixed, not sticky: the navbar is included INSIDE each page's hero
     (`<header class="section-10a">`), and a sticky element only sticks within
     its own parent — it would come unstuck the moment the hero scrolled past.
     Fixed takes it out of flow, so the hero reserves the space instead. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding-block: 28px;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--white);
  transition: color 0.3s ease, box-shadow 0.3s ease;
}

/* The scrolled background is painted by this pseudo-element rather than by
   `.navbar` itself, because it carries `backdrop-filter` — and an element with
   a backdrop-filter becomes the containing block for its fixed-position
   descendants. On mobile the full-screen menu (`.nav-panel`) and its backdrop
   (`.nav-overlay`) are `position: fixed` children of the navbar: put the filter
   on the navbar and they would size themselves to the 100px bar instead of the
   viewport. A pseudo-element has no such effect on its siblings.

   z-index: -1 keeps it behind the logo and the links; it stays inside the
   navbar's own stacking context (fixed + z-index: 200), so it cannot slip
   behind the page. */
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: transparent;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* low-priority reset (`:where` adds 0 specificity) so per-link colors,
   like the light submenu links, are never overridden by this rule */
.navbar :where(a) {
  text-decoration: none;
  color: inherit;
}

/* low-priority reset (`:where` adds 0 specificity) so `.submenu`'s own
   padding is never overridden by this rule */
.navbar :where(ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* centered content wrapper, capped width */
.navbar__inner {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* ----- Brand / logo ----- */
/* inline-grid, not inline-flex: both logos are placed in the SAME grid cell so
   they overlap and can cross-fade (see the opacity rules below). The <meta> and
   <link> children are display:none per the UA stylesheet, so they add no cell. */
.brand {
  display: inline-grid;
  align-items: center;
}

/* IMAGE: assets/img/dingx-logo-horizontal.webp — dingx logo at the top (desktop).
   Defined in the HTML (partials/header.html). To change it, replace the file
   keeping the same name, or adjust the src in the HTML. */
.brand__logo {
  grid-area: 1 / 1;
  display: block;
  height: 40px;
  width: auto;
  transition: opacity 0.3s ease;
}

/* ----- Menu (desktop) ----- */
.nav-panel {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 32px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 36px;
  /* push the links to the right (they sit just before .nav-actions) */
  margin-left: auto;
}

.nav-menu__link {
  font-size: 18px;
  opacity: 0.95;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.nav-menu__link:hover {
  opacity: 1;
}

/* ----- Dropdown submenu (desktop hover/focus) ----- */
.nav-menu__item--has-submenu {
  position: relative;
}

.submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: -23px;
  width: max-content;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background-color: var(--gray-7);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);

  /* hidden until hover/focus */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 15;
}

.nav-menu__item--has-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* invisible bridge over the remaining gap so the pointer never leaves the
   hovered menu item while moving down into the submenu */
.submenu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

/* `.navbar` prefix keeps these above the link reset no matter what */
.navbar .submenu__link {
  font-size: 18px;
  color: var(--gray-2);
  transition: color 0.2s ease;
}

/* Hover picks up the brand pink. `--pink-on-light` rather than `--pink`: same
   hue, darkened enough to clear WCAG AA as text on this light panel (see the
   token). Desktop only — the mobile overlay's own background IS `--pink`, so
   the mobile rule further down keeps its white hover. */
.navbar .submenu__link:hover {
  color: var(--pink-on-light);
}

/* The Pricing submenu repeats its own parent link so pricing.html stays reachable
   on mobile, where tapping a parent only opens the submenu (assets/js/main.js). On
   desktop the parent is a normal link, so the repeat is redundant — hide it. */
@media (min-width: 901px) {
  .navbar .submenu__item--mobile-only {
    display: none;
  }
}

/* ----- Action buttons (right side) ----- */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

/* base pill button. Hover/press motion is shared — see css/shared.css. */
.navbar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  padding: 14px 26px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.navbar .btn--primary {
  background-color: var(--pink);
  color: var(--white);
}

.navbar .btn--ghost {
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.55);
  color: var(--white);
}

/* Navbar buttons: 40px-tall pills SIZED TO THEIR LABEL.
   They used to be a fixed 147px wide, from when this row held exactly two
   buttons of similar length (Login + "Get your quote"). The language switcher
   was added later and inherited that width, so a two-character "DE" sat in a
   pill built for a sixteen-character CTA — about 130px of empty space.
   Sizing to content also gives the row a hierarchy it did not have: the primary
   CTA is now visibly the widest, Login sits below it, and the language toggle is
   the smallest, which is the order of importance. And it is translation-proof —
   the fixed width left the German CTA ("Auf die Warteliste") only 40px of slack,
   so a slightly longer label would have overflowed a nowrap pill.
   Mobile is unaffected: the <=900px block below stretches these to width:100%. */
.nav-actions .btn {
  font-size: 14px;
  height: 40px;
  padding: 0 22px;
}

/* The language switcher is a utility toggle, not an action — tighter than the other
   two so it reads as secondary chrome.
   SCOPED TO DESKTOP DELIBERATELY. Unscoped, this selector is (0,3,0) and beat the
   <=900px overlay rule at (0,2,0) whatever the media query, so the overlay's
   `padding: 16px 26px` never reached this button: with `height: auto` it collapsed to
   its line-height, 20px, less than half the 44px minimum touch target — and on a
   German-default site this is the control an English speaker needs. Keep any future
   per-button tweak inside this media query for the same reason. */
@media (min-width: 901px) {
  .nav-actions .btn[data-lang-target] {
    padding: 0 18px;
  }
}

/* ----- Mobile chrome, hidden on desktop ----- */
.nav-overlay {
  display: none;
}

.nav-panel__header,
.nav-close {
  display: none;
}

/* hamburger toggle, hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--white);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Navbar — intermediate band (901–1120px): tightens gaps/fonts so the menu
   fits down to the mobile breakpoint, without overflowing/cutting "Get your quote". */
@media (min-width: 901px) and (max-width: 1120px) {
  .navbar__inner {
    gap: 16px;
  }

  .nav-panel {
    gap: 16px;
  }

  .nav-menu {
    gap: 16px;
  }

  .nav-menu__link {
    font-size: 16px;
  }

  .nav-actions {
    gap: 10px;
  }

  .nav-actions .btn {
    padding: 0 16px;
  }
}

/* Navbar — mobile (<= 900px): hamburger + full-screen sliding overlay menu */
@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
    /* sits above the opaque overlay so it can be tapped */
    position: relative;
    z-index: 30;
  }

  /* dimmed backdrop behind the open drawer */
  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }

  .nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  .nav-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 104px 24px 44px;
    background-color: var(--pink);
    box-shadow: none;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 40;

    /* hidden off-screen on the right, slides in when opened */
    transform: translateX(100%);
    transition: transform 0.35s ease;
  }

  /* IMAGE (background): assets/img/watermark.webp — watermark in the bottom-left corner
     of the open mobile menu (same scheme as the sections: color + watermark). */
  .nav-panel::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 420px;
    height: 320px;
    background-image: url("../img/watermark.webp");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
    opacity: 0.22;
    z-index: -1;
    pointer-events: none;
  }

  .nav-panel.is-open {
    transform: translateX(0);
  }

  /* disable the slide animation while crossing the breakpoint */
  .nav-panel--no-anim {
    transition: none;
  }

  /* logo (left) + close button (right) pinned to the top of the overlay */
  .nav-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    padding-inline: 24px;
  }

  /* IMAGE: assets/img/dingx-logo-horizontal.webp — same logo inside the mobile menu.
     The filter below paints it white over the pink background (it does not swap the image). */
  .nav-panel__logo {
    display: block;
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
  }

  .nav-close {
    display: block;
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
  }

  .nav-close::before,
  .nav-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 8px;
    right: 8px;
    height: 2px;
    background-color: var(--white);
    border-radius: 2px;
  }

  .nav-close::before {
    transform: rotate(45deg);
  }

  .nav-close::after {
    transform: rotate(-45deg);
  }

  /* centered vertical stack of large, bold links */
  .nav-menu {
    flex-direction: column;
    align-items: center;
    gap: 26px;
    width: 100%;
    margin-top: auto;
    text-align: center;
  }

  .nav-menu__item {
    width: 100%;
  }

  .nav-menu__link {
    display: block;
    width: 100%;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    opacity: 1;
  }

  /* parent link: centered label with a caret that flips when expanded */
  .nav-menu__item--has-submenu>.nav-menu__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    text-align: center;
  }

  .nav-menu__item--has-submenu>.nav-menu__link::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: -5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
  }

  .nav-menu__item--has-submenu.is-expanded>.nav-menu__link::after {
    margin-top: 3px;
    transform: rotate(-135deg);
  }

  /* submenu: centered list that collapses/expands beneath its parent */
  .submenu {
    position: static;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;

    transform: none;

    /* collapsed AND hidden by default (opacity/visibility inherited from the
       base desktop = 0/hidden). Avoids the flash when crossing the 900↔901
       breakpoint: since opacity is 0 on both sides, there is no fade transition. */
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, margin-top 0.3s ease;
  }

  .nav-menu__item--has-submenu.is-expanded .submenu {
    opacity: 1;
    visibility: visible;
    max-height: 400px;
    margin-top: 18px;
  }

  .navbar .submenu__link {
    display: block;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
  }

  .navbar .submenu__link:hover {
    color: var(--white);
  }

  /* action buttons stacked at the bottom of the overlay.
     padding-top was 40px. Reduced to 24px to recover the 13px the panel started
     overflowing by at 360x640 and 390x640 — a common Android viewport — once the
     three buttons were given their 44px-minimum touch targets. This is the seam
     between the nav links and the button stack, and 24px still separates them
     clearly; the alternative levers were the menu's own 26px gap or the panel's
     bottom padding, both of which restyle more than one seam.
     THE TOUCH TARGETS DO NOT MOVE TO PAY FOR THIS. If this space is ever needed
     back, take it from somewhere other than the buttons — a 20px target was the
     defect that started this, and 13px of scroll is not.
     Note this does not make the panel fit every phone and is not meant to: below
     640 the overflow grows again (+33px at 620), where a scrolling overlay is the
     normal and correct outcome. */
  .nav-actions {
    margin-top: auto;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: min(260px, 100%);
    padding-top: 24px;
  }

  /* All three stacked buttons are touch targets and must be sized as such: at least
     44px (WCAG 2.5.5 / Apple HIG). `min-height` rather than `height` so a wrapped
     German label can still grow. `box-sizing: border-box` is inherited site-wide, so
     the ghost buttons' 2px border sits INSIDE the box — without that, Login measured
     52px against the primary's 48px purely from its border. */
  .nav-actions .btn {
    width: 100%;
    height: auto;
    min-height: 44px;
    font-size: 16px;
    padding: 14px 26px;
  }

  /* The primary has no border while the two ghosts have 2px, which made it 4px
     shorter than them in the stack. Matching it with a TRANSPARENT border equalises
     the box construction at the source, so the three stay identical if the labels
     ever grow — raising `min-height` would only have hidden the gap while the text
     happens to be short. */
  .nav-actions .btn--primary {
    border: 2px solid transparent;
  }

  /* on the pink overlay the primary CTA becomes a white pill
     (its hover inversion is in css/shared.css, same media query) */
  .nav-actions .btn--primary {
    background-color: var(--white);
    color: #4b2e83;
  }
}

/* Variant: `page--light` on <body> — for light-background pages without a hero (blog).
   One partial serves every page; this class is the whole switch. It darkens the text and
   the hamburger and swaps which of the two logos in the header is visible.
   Makes text and hamburger dark at the top on desktop; the mobile menu (pink
   overlay) stays white (that's why the dark color sits inside min-width:901).
   Use the dark logo (assets/img/logo-dingx-footer.webp) in the .brand of this page. */
/* Only one brand logo is ever visible. Default = the white one (it sits over the hero);
   on a light page the white one would be invisible, so the dark file takes over. */
/* These pages have no hero to reserve room for the fixed bar, so the page body
   does it instead — same height token, same reason as `.section-10a`. */
.page--light {
  padding-top: var(--navbar-h);
}

/* Only one brand logo is ever *seen*. Both stay in the layout (stacked in one
   grid cell) and opacity decides, so the swap can fade instead of snapping —
   `display: none` cannot be transitioned. The hidden one is taken out of the
   accessibility tree and off the pointer path by visibility/pointer-events. */
.brand__logo--on-light {
  opacity: 0;
  visibility: hidden;
}

.page--light .brand__logo--on-dark,
.navbar.is-stuck .brand__logo--on-dark {
  opacity: 0;
  visibility: hidden;
}

.page--light .brand__logo--on-light,
.navbar.is-stuck .brand__logo--on-light {
  opacity: 1;
  visibility: visible;
}

.page--light .navbar .nav-toggle__bar {
  background-color: var(--gray);
}

@media (min-width: 901px) {
  .page--light .navbar {
    color: var(--gray);
  }

  /* hover inversion is in css/shared.css, same media query */
  .page--light .navbar .btn--ghost {
    border-color: rgba(51, 57, 64, 0.35);
    color: var(--gray);
  }
}


/* ----- Scrolled state -----
   `.is-stuck` is put on the navbar by the header script in assets/js/main.js as
   soon as the page is scrolled at all. Everything that was white-on-hero has to
   flip, or it disappears against the white bar: text, hamburger, ghost-button
   border, and the logo (handled by the cross-fade above). --gray on white is
   5.1:1, over the 4.5:1 WCAG AA needs at the 18px nav size. */
.navbar.is-stuck {
  box-shadow: 0 2px 16px rgba(29, 29, 27, 0.1);
}

/* Not quite opaque (96%) with the page blurred behind it, so the bar reads as
   frosted glass over the content rather than as a solid lid. Where
   backdrop-filter is unsupported the colour alone still stands on its own —
   at 96% the text underneath is not legible through it. */
.navbar.is-stuck::before {
  background-color: #fffffff5;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.navbar.is-stuck .nav-toggle__bar {
  background-color: var(--gray);
}

/* Desktop only, exactly like `page--light`: below 901px the menu and its
   buttons live inside the pink full-screen overlay, where white is correct and
   this would make them unreadable. The bar itself keeps only the logo and the
   hamburger, both handled above. */
@media (min-width: 901px) {
  .navbar.is-stuck {
    color: var(--gray);
  }

  .navbar.is-stuck .btn--ghost {
    border-color: rgba(51, 57, 64, 0.35);
    color: var(--gray);
  }
}


/* ===== section-10a.css ===== */
/* SECTION 10a — Hero  ("Move, Store and Manage your things")
   Self-contained: to reuse, copy the <header class="section-10a"> block and
   link this file. Every rule is scoped under `.section-10a`.
   (The navbar lives inside this header but is styled by the navbar rules in this file.) */

.section-10a,
.section-10a *,
.section-10a *::before,
.section-10a *::after {
  box-sizing: border-box;
}

/* IMAGE (default): assets/img/image-default-hero.webp — default hero background (desktop),
   used on ALL pages with a hero, EXCEPT home and sustainability, which get
   `.section-10a--branded` and keep the original background (background_header.webp).
   Mobile version swapped further below. */
.section-10a {
  /* The navbar is fixed, so it no longer occupies flow space at the top of this
     hero. Reserving exactly its height keeps the hero content where it was and
     keeps the bar sitting over the hero image, as designed. */
  padding-top: var(--navbar-h);
  background-color: #4b2e83;
  background-image: url("../img/image-default-hero.webp");
  background-size: cover;
  background-position: center top;
  min-height: 847px;
  display: flex;
  flex-direction: column;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--white);
}

/* Hero "branded" (home + sustainability) — keeps the original background. */
.section-10a--branded {
  background-image: url("../img/background_header.webp");
}

.section-10a.about {
  /* Change header image from this page here*/
  background-image: url("../img/hero-about-1.webp");
}

.section-10a.additional-services {
  /* Change header image from this page here*/
  background-image: url("../img/hero-additional-service-1.webp");
}

.section-10a.contact {
  /* Change header image from this page here*/
  background-image: url("../img/hero-contact-1.webp");
}

.section-10a.faq {
  /* Change header image from this page here*/
  background-image: url("../img/hero-faq-1.webp");
}

.section-10a.locations {
  /* Change header image from this page here*/
  background-image: url("../img/hero-location-1.webp");
}

.section-10a.manage {
  /* Change header image from this page here*/
  background-image: url("../img/hero-manage-2.webp");
}

.section-10a.move {
  /* Change header image from this page here*/
  background-image: url("../img/hero-move-1.webp");
}

.section-10a.pricing {
  /* Change header image from this page here*/
  background-image: url("../img/hero-pricing-1.webp");
}

.section-10a.services {
  /* Change header image from this page here*/
  background-image: url("../img/hero-services-1.webp");
}

.section-10a.store {
  /* Change header image from this page here*/
  background-image: url("../img/hero-store-1.webp");
}

.section-10a.sustainability {
  /* Change header image from this page here*/
  background-image: url("../img/hero-sustainability-1.webp");
}

/* low-priority reset (`:where` adds 0 specificity) */
.section-10a :where(a) {
  text-decoration: none;
  color: inherit;
}

/* centered content wrapper (direct child only, so it never touches the navbar) */
.section-10a .inner {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: 40px;
}

.section-10a .content {
  max-width: 560px;
}

/* Manage & Store: narrower hero copy (per-page opt-in via modifier). */
.section-10a--narrow-content .content {
  max-width: 346px;
}

.section-10a .title {
  margin: 0;
  font-size: 64px;
  line-height: 1.05;
  font-weight: 600;
}

/* Hero title width caps — same idea as the subtitle ones below: the copy wraps
   naturally inside a fixed width instead of using hard <br> tags.
   Per-page opt-in on the section element. */
.section-10a--title-w320 .title {
  max-width: 320px;
  /* store; additional-services */
}

/* manage: Everything / you own, / organized. — needs a second value on mobile
   (37px), see the <= 900px block. */
.section-10a--title-w340 .title {
  max-width: 340px;
}

.section-10a--title-w475 .title {
  max-width: 475px;
  /* move */
}

/* pricing: Pay only for / what you store. — needs a second value on mobile
   (37px), see the <= 900px block. */
.section-10a--title-w480 .title {
  max-width: 480px;
}

/* sustainability: Storage that / respects life's / cycles. — needs a second
   value on mobile (37px), see the <= 900px block. */
.section-10a--title-w500 .title {
  max-width: 500px;
}

/* services: Everything / works together. — second value on mobile (37px). */
.section-10a--title-w490 .title {
  max-width: 490px;
}

.section-10a .accent {
  color: var(--pink);
}

.section-10a .subtitle {
  margin: 32px 0 40px;
  font-size: 19px;
  line-height: 1.5;
  opacity: 0.95;
}

/* Bold emphasis line under the subtitle (optional — only pages that include a
   `.highlight` element get it; absent elsewhere, so this is safe to share).
   When present it sits between the subtitle and the CTAs, so tighten the
   subtitle's bottom gap. */
.section-10a .subtitle:has(+ .highlight) {
  margin-bottom: 24px;
}

/* Hero subtitles that need specific line breaks: instead of hard <br> tags the
   copy wraps naturally inside a capped width, so it still reflows on small
   screens. Values measured in canada-type-gibson 19px — each one is wide enough
   for its longest line and narrower than that line plus the next word.
   Per-page opt-in on the section element. */
.section-10a--sub-w200 .subtitle {
  max-width: 200px;
  /* home */
}

.section-10a--sub-w224 .subtitle {
  max-width: 224px;
  /* store */
}

.section-10a--sub-w250 .subtitle {
  max-width: 250px;
  /* faq */
}

.section-10a--sub-w270 .subtitle {
  max-width: 270px;
  /* sustainability */
}

.section-10a--sub-w304 .subtitle {
  max-width: 304px;
  /* additional-services */
}

.section-10a--sub-w310 .subtitle {
  max-width: 310px;
  /* move */
}

.section-10a--sub-w409 .subtitle {
  max-width: 409px;
  /* about (both paragraphs) */
}

.section-10a--sub-w457 .subtitle {
  max-width: 457px;
  /* locations */
}

.section-10a--sub-w430 .subtitle {
  max-width: 430px;
  /* contact */
}

.section-10a--sub-w440 .subtitle {
  max-width: 440px;
  /* pricing */
}

.section-10a .highlight {
  margin: 0 0 40px;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 500;
}

/* Highlight width caps — same scheme as the title/subtitle ones above.
   Per-page opt-in on the section element. */
/* sustainability: its two lines are independent sentences and the second is the
   longer one, so no width can break after the first. The break comes from the
   newline in the HTML source instead of a <br>. */
.section-10a--high-preline .highlight {
  white-space: pre-line;
}

.section-10a--high-w445 .highlight {
  max-width: 445px;
  /* pricing */
}

/* about: More than storage, we are partners / in your journey to simplicity.
   Needs a second value on mobile (18px), see the <= 900px block. */
.section-10a--high-w330 .highlight {
  max-width: 330px;
}

.section-10a .actions {
  display: flex;
  gap: 20px;
}

/* ----- Buttons -----
   Scoped to `.actions` so these rules stay on the hero CTAs and never leak
   into the navbar buttons (the navbar lives inside this header).
   Only the RESTING look lives here — hover/press motion is shared, see
   css/shared.css. */
.section-10a .actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  padding: 10px 30px;
  height: 48px;
  font-size: 18px;
}

.section-10a .actions .btn--pink {
  background-color: var(--pink);
  color: var(--white);
}

/* "Gradient Diagonal 1 Dingx" — blue-purple → pink/magenta diagonal
   (used in the Sustainability page hero). The gradient is MIRRORED
   (purple → pink → purple) so the shared hover slide flips its direction;
   to change the colors, change both purple stops together. */
.section-10a .actions .btn--gradient {
  background-image: linear-gradient(45deg, #5b2fe0 0%, #e0318f 50%, #5b2fe0 100%);
  color: var(--white);
}

.section-10a .actions .btn--light {
  background-color: var(--white);
  color: #4b2e83;
}

.section-10a .actions .btn--outline {
  background-color: transparent;
  color: var(--white);
  border: 2px solid var(--white);
}

/* Section 10a — mobile (<= 900px) */
@media (max-width: 900px) {
  .section-10a>.container {
    padding-inline: 40px;
  }

  /* IMAGE (default): assets/img/image-default-hero-mobile.webp — default hero background on
     mobile. The --branded goes back to the original mobile one. */
  .section-10a {
    background-image: url("../img/image-default-hero-mobile.webp");
    background-position: center bottom;
    height: 960px;
  }

  /* IMAGE (background): assets/img/background_header_mobile.webp — mobile version of the
     branded hero background (home and sustainability). Desktop counterpart is
     assets/img/background_header.webp. */
  .section-10a--branded {
    background-image: url("../img/background_header_mobile.webp");
  }

  .section-10a.about {
    /* Change header image from this page here*/
    background-image: url("../img/hero_mobile_about_1.webp");
  }

  .section-10a.additional-services {
    /* Change header image from this page here*/
    background-image: url("../img/hero_mobile_additional_service_1.webp");
  }

  .section-10a.contact {
    /* Change header image from this page here*/
    background-image: url("../img/hero_mobile_contact_1.webp");
  }

  .section-10a.faq {
    /* Change header image from this page here*/
    background-image: url("../img/hero_mobile_faq_1.webp");
  }

  .section-10a.locations {
    /* Change header image from this page here*/
    background-image: url("../img/hero_mobile_location_1.webp");
  }

  .section-10a.manage {
    /* Change header image from this page here*/
    background-image: url("../img/hero_mobile_manage_2.webp");
  }

  .section-10a.move {
    /* Change header image from this page here*/
    background-image: url("../img/hero_mobile_move_1.webp");
  }

  .section-10a.pricing {
    /* Change header image from this page here*/
    background-image: url("../img/hero_mobile_pricing_1.webp");
  }

  .section-10a.services {
    /* Change header image from this page here*/
    background-image: url("../img/hero_mobile_services_1.webp");
  }

  .section-10a.store {
    /* Change header image from this page here*/
    background-image: url("../img/hero_mobile_store_1.webp");
  }

  .section-10a.sustainability {
    /* Change header image from this page here*/
    background-image: url("../img/hero_mobile_sustainability_1.webp");
  }

  .section-10a .inner {
    align-items: baseline;
  }

  .section-10a .title {
    font-size: 37px;
  }

  /* same breaks at the smaller size */
  .section-10a--title-w340 .title {
    max-width: 220px;
  }

  .section-10a--title-w480 .title {
    max-width: 275px;
  }

  .section-10a--title-w500 .title {
    max-width: 290px;
  }

  .section-10a--title-w490 .title {
    max-width: 280px;
  }

  .section-10a .subtitle {
    font-size: 18px;
  }

  .section-10a .highlight {
    font-size: 18px;
  }

  .section-10a--high-w330 .highlight {
    max-width: 300px;
    /* keeps the same break at the smaller size */
  }

  .section-10a .actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-10a .actions .btn {
    white-space: normal;
    line-height: 1.3;
    padding: 30px 34px;
  }

  .section-10a .actions .btn--light {
    width: 190px;
  }

  .section-10a .actions .btn--outline {
    width: 204px;
  }
}

/* Section 10a — very narrow screens (<= 294px): ensures a minimum button
   width so the content is not squeezed too much. */
@media (max-width: 294px) {
  .section-10a .actions .btn {
    min-width: 250px;
  }
}


/* ----- Section 10a — HERO SLIDER (home only) -----
   Opt-in through `.section-10a--slider` on the <header>; without it the hero
   behaves exactly as before, so no other page is affected.

   Crossfade. Two stacks, one index: the background layers (absolute, covering
   the whole hero including the navbar area) and the copy panels (in flow, below
   the navbar). The script marks the live layer in both with `.is-active`, so
   image and copy can never drift apart.

   Everything is real text in the HTML; JS only moves the class. */

.section-10a--slider {
  position: relative;
  overflow: hidden;
  background-image: none;
  /* the slide backgrounds replace it */
}

/* The navbar is fixed page-wide (see the navbar block) and already carries a
   z-index above the slide backgrounds, so this only had to stop forcing it back
   to `position: relative`. */

/* ----- Background stack -----
   Every slide's background fills the same box; only the active one is opaque. */
.section-10a--slider .hero-bgs {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.section-10a--slider .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.65, 0, 0.35, 1);
  will-change: opacity;
}

.section-10a--slider .hero-bg.is-active {
  opacity: 1;
}

/* IMAGE: assets/img/hero-slide-1.webp — slide 1 background (desktop). */
.section-10a--slider .hero-bg--1 {
  background-image: url("../img/hero-slide-1.webp");
}

/* IMAGE: assets/img/hero-slide-2.webp — slide 2 background (desktop). */
.section-10a--slider .hero-bg--2 {
  background-image: url("../img/hero-slide-2.webp");
}

/* IMAGE: assets/img/hero-manage-2.webp — slide 3 background (desktop). */
.section-10a--slider .hero-bg--3 {
  background-image: url("../img/hero-manage-2.webp");
}

/* ----- Copy stack -----
   The panels share one CSS-grid cell rather than being positioned absolutely,
   so the hero is still as tall as its tallest slide and the height never jumps
   as the slides change. */
/* R9 — the eyebrow row above the slider. It sits outside .hero-viewport so it is
   painted once and never crossfades: it belongs to the page, not to a slide. Aligned
   to the same .container as the panel copy, so it lines up with the headline below. */
.section-10a--slider .hero-lead {
  position: relative;
  z-index: 1;
  padding-top: 44px;
}

/* R9 — RESERVE THE TALLEST BLOCK so the headline, sub-copy and buttons sit at identical
   positions on all three slides. The panels are vertically centred, so a slide with more
   content starts HIGHER — which is why the copy appeared to resettle on every transition
   (measured: buttons at 678/627/627 in EN and 692/661/641 in DE — German had three
   distinct positions).
   The reserve is in `lh`, i.e. line-boxes of the element's own font, so it scales across
   breakpoints without per-breakpoint numbers and holds for both languages. 4 lines is the
   tallest variant of each across BOTH trees: the headline runs to 4 in EN slide 1 and DE
   slides 1-2, the sub-copy to 4 in DE slides 1 and 3.
   NO COPY WAS CHANGED to make this fit, and none should be: the headline is the primary
   brand line, and trimming it to suit a layout would be the layout dictating the copy.
   Shorter slides simply get more space below the line. */
.section-10a--slider .title {
  min-height: 4lh;
}

.section-10a--slider .subtitle {
  min-height: 4lh;
}

/* Mobile reserve, SCOPED BY LANGUAGE. MUST come after the base rules above: same
   specificity, so order decides, and a media query does not win on its own — the first
   version of this sat earlier in the file and was silently overridden, measured as 4lh
   where 6 was set. That failure was invisible in the source and only showed up in a
   measurement, so do not reorder these blocks.

   At <=900px `.inner` is baseline-aligned, so the headline already starts level on every
   slide; what still moved was the sub-copy and the buttons, because the headline BOX
   heights differ.

   The two trees reserve different amounts because their word lengths differ, and keying
   on `html[lang]` means neither pays for the other's constraint — the pages already carry
   the attribute, and it is an attribute rather than a class so the EN/DE class-signature
   check is unaffected. The languages end up with slightly different hero heights, which
   costs nothing: nobody sees them side by side.

   MEASURED MAXIMA per tree over 360-900px, taken from the rendered pages:
     English   headline 5 (at 360; it is 4 at 390), sub-copy 3
     German    headline 6 (at 360-390),             sub-copy 4
   360px is the floor deliberately: below it the header already overflows for unrelated
   reasons, and 320px would need English 5 / German 6 headline and 4 / 5 sub-copy.
   IF THE HERO COPY CHANGES IN EITHER LANGUAGE, RE-MEASURE — these are observations of
   the current text, not design constants. */
@media (max-width: 900px) {
  .section-10a--slider .title {
    min-height: 5lh;
  }

  .section-10a--slider .subtitle {
    min-height: 3lh;
  }

  html[lang="de"] .section-10a--slider .title {
    min-height: 6lh;
  }

  html[lang="de"] .section-10a--slider .subtitle {
    min-height: 4lh;
  }
}

.section-10a--slider .hero-viewport {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  overflow: hidden;
}

.section-10a--slider .hero-track {
  display: grid;
  grid-template-areas: "slide";
  flex: 1;
  min-width: 0;
}

.section-10a--slider .hero-panel {
  grid-area: slide;
  display: flex;
  opacity: 0;
  /* `visibility` stops a faded-out slide from swallowing clicks. It is held
     until the fade has finished (800ms delay on the way out) and flipped at
     once on the way in, so it never cuts the transition short. */
  visibility: hidden;
  transition: opacity 800ms cubic-bezier(0.65, 0, 0.35, 1), visibility 0s 800ms;
}

.section-10a--slider .hero-panel.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 800ms cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
}

/* Per-slide width caps — same idea as the `--title-w*` / `--sub-w*` modifiers
   above, but set on the slide instead of the section, because each slide needs
   its own line breaks. Values measured in canada-type-gibson at the hero sizes:
   each one is wider than its longest line and narrower than that line plus the
   next word. Released on mobile (see the <= 900px block), where the container
   is already narrower than any of them. */
.section-10a--slider .hero-panel--title-w420 .title {
  max-width: 420px;
  /* slide 2: We store / stories, not / just objects. */
}

.section-10a--slider .hero-panel--title-w500 .title {
  max-width: 500px;
  /* slide 3: See everything / you own, / anytime. */
}

.section-10a--slider .hero-panel--sub-w200 .subtitle {
  max-width: 200px;
  /* slide 1 */
}

.section-10a--slider .hero-panel--sub-w335 .subtitle {
  max-width: 335px;
  /* slides 2 and 3 */
}

/* ----- Dots -----
   Deliberately quiet: small, white, low opacity; the active one stretches into
   a short pill. Sits above both strips. */
.section-10a--slider .hero-dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-10a--slider .hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: width 300ms ease, background-color 300ms ease;
}

.section-10a--slider .hero-dot:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

.section-10a--slider .hero-dot:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.section-10a--slider .hero-dot.is-active {
  width: 28px;
  background-color: var(--white);
}

/* Section 10a slider — mobile (<= 900px) */
@media (max-width: 900px) {

  /* the hero's own `> .container` padding rule no longer reaches the container,
     which now sits one level deeper inside the slide */
  .section-10a--slider .hero-panel>.container {
    padding-inline: 40px;
  }

  .section-10a--slider .hero-bg {
    background-position: center bottom;
  }

  /* IMAGE: assets/img/hero_mobile_slide_1.webp — slide 1 background (mobile). */
  .section-10a--slider .hero-bg--1 {
    background-image: url("../img/hero_mobile_slide_1.webp");
  }

  /* IMAGE: assets/img/hero_mobile_slide_2.webp — slide 2 background (mobile). */
  .section-10a--slider .hero-bg--2 {
    background-image: url("../img/hero_mobile_slide_2.webp");
  }

  /* IMAGE: assets/img/hero_mobile_manage_2.webp — slide 3 background (mobile). */
  .section-10a--slider .hero-bg--3 {
    background-image: url("../img/hero_mobile_manage_2.webp");
  }

  /* At 37px inside the 40px-padded container the titles already break where the
     design wants them, so the desktop caps are released instead of re-tuned. */
  .section-10a--slider .hero-panel--title-w420 .title,
  .section-10a--slider .hero-panel--title-w500 .title {
    max-width: none;
  }

  .section-10a--slider .hero-dots {
    bottom: 24px;
  }
}

/* Someone who asked for less motion gets the slides without the fade: the
   script also stops the autoplay when this query matches. */
@media (prefers-reduced-motion: reduce) {

  .section-10a--slider .hero-bg,
  .section-10a--slider .hero-panel,
  .section-10a--slider .hero-panel.is-active {
    transition: none;
  }
}


/* ===== section-12k.css ===== */
/* SECTION 12k — Blog post article  (single post: centered column)
   Article layout: tagline, title, main image, meta (author + category),
   body text, secondary image with caption and "Share this post" + icons.
   Self-contained: copy the <article class="section-12k"> and link this file.
   Every rule is scoped under `.section-12k`. */

.section-12k,
.section-12k *,
.section-12k *::before,
.section-12k *::after {
  box-sizing: border-box;
}

.section-12k {
  display: block;
  background-color: var(--white);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--gray);
  padding-block: 56px 88px;
}

/* Centered reading column. */
.section-12k .container {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding-inline: 24px;
}

.section-12k .tagline {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--pink);
}

.section-12k .title {
  margin: 0;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--gray);
}

/* ----- Main image ----- */
.section-12k .hero {
  margin-top: 32px;
  height: 420px;
  border-radius: 20px;
  /* IMAGE: assets/img/image-main-blog-news.webp */
  background-image: url("../img/image-main-blog-news.webp");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* ----- Meta: author on the left + category on the right ----- */
.section-12k .meta {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.section-12k .author {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray);
}

.section-12k .category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  border: 2px solid var(--pink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pink);
  text-decoration: none;
}

/* ----- Body text ----- */
.section-12k .body {
  margin-top: 32px;
}

.section-12k .body p {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray);
}

/* ----- Secondary image + caption ----- */
.section-12k .figure {
  margin: 8px 0 32px;
}

.section-12k .figure__img {
  height: 380px;
  border-radius: 20px;
  /* IMAGE: assets/img/image-secondary-blog-news.webp */
  background-image: url("../img/image-secondary-blog-news.webp");
  background-size: cover;
  background-position: center;
}

.section-12k .figure figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--gray-3);
}

/* ----- Share this post ----- */
.section-12k .share {
  margin-top: 48px;
  text-align: center;
}

.section-12k .share__title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray);
}

.section-12k .share__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 18px;
}

.section-12k .share__list img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* Section 12k — mobile */
@media (max-width: 900px) {
  .section-12k .container {
    padding-inline: 40px;
  }

  .section-12k {
    padding-block: 40px 64px;
  }

  .section-12k .title {
    font-size: 30px;
  }

  .section-12k .hero {
    height: 260px;
  }

  .section-12k .figure__img {
    height: 240px;
  }

  .section-12k .meta {
    flex-wrap: wrap;
  }
}


/* ===== section-13b.css ===== */
/* SECTION 13b — Blog featured post  (photo on the left + text card on the right)
   Featured post card: photo on the left, text card (light-gray background)
   on the right with tagline, title, excerpt, author/date and a category pill.
   Image on the LEFT → natural DOM order (photo before text) stacks correctly
   on mobile without row-reverse.
   Self-contained: copy the <section class="section-13b"> and link this file.
   Every rule is scoped under `.section-13b`. */

.section-13b,
.section-13b *,
.section-13b *::before,
.section-13b *::after {
  box-sizing: border-box;
}

.section-13b {
  background-color: var(--white);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--gray);
  padding-block: 72px;
}

.section-13b .post {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 24px;
}

/* ----- Photo (left) ----- */
.section-13b .post__figure {
  min-height: 420px;
  border-radius: 28px;
  overflow: hidden;
  /* IMAGE: assets/img/image-card-1-section-1-blog-lp.webp — pink dingx truck
     parked at sunset. */
  background-image: url("../img/image-card-1-section-1-blog-lp.webp");
  background-size: cover;
  background-position: center;
}

/* ----- Text card (right) ----- */
.section-13b .post__body {
  background: var(--gray-6);
  border-radius: 28px;
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section-13b .post__tagline {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--pink);
}

.section-13b .post__title {
  margin: 0;
  font-size: 34px;
  line-height: 1.18;
  font-weight: 600;
  color: var(--gray);
}

.section-13b .post__excerpt {
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--gray);
}

.section-13b .post__meta {
  margin: 28px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-3);
}

/* The category is INFORMATION, NOT A CONTROL. It used to be a link; when the
   category pages turned out not to exist it became a <span>, but it kept the pill
   border and the hover fill and so still read as a button that does nothing. A
   hover response is an interaction promise — the same defect class as the dead
   #quote anchors, only better disguised because it is styled rather than linked.
   Plain pink text now: no border, no pill, no hover. If category pages are ever
   built, make it an <a> again and the affordance can come back with the destination. */
.section-13b .post__category {
  align-self: flex-start;
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--pink);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}


/* Section 13b — mobile (<= 900px): stacks (photo on top, text below). */
@media (max-width: 900px) {
  .section-13b .container {
    padding-inline: 40px;
  }

  .section-13b {
    padding-block: 48px;
  }

  .section-13b .post {
    grid-template-columns: 1fr;
  }

  .section-13b .post__figure {
    min-height: 320px;
  }

  .section-13b .post__body {
    padding: 40px 28px;
  }

  .section-13b .post__title {
    font-size: 28px;
  }
}


/* ===== section-14p.css ===== */
/* SECTION 14p — Find us here  (contact: title + decorative line + 2 cards)
   "Find us here." title centered (with the dotted line running through it)
   and two contact cards (Company/Address | Phone/Email).
   Decorative line: assets/img/lines-full-wide-2.webp (1920×102) centered at NATURAL
   size (does not scale) — the sides bleed out and are clipped by the section's
   overflow ("central clamp": stays fixed in the center, the excess goes out).
   Self-contained: copy the <section class="section-14p"> and link this file.
   Every rule is scoped under `.section-14p`. */

.section-14p,
.section-14p *,
.section-14p *::before,
.section-14p *::after {
  box-sizing: border-box;
}

.section-14p {
  position: relative;
  overflow: hidden;
  /* clips the sides of the line that bleed out */
  background-color: var(--white);
  background-image: linear-gradient(180deg, #ffffff 0%, #d9e4ea 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--gray);
  padding-block: 88px;
}

.section-14p .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1184px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ----- Title + decorative line ----- */
.section-14p .head {
  position: relative;
  text-align: center;
}

.section-14p .title {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0;
  font-size: 29px;
  font-weight: 600;
  color: var(--gray);
}

/* dotted line at natural size, centered over the title.
   fixed width (1920px) → does not scale; the excess bleeds and the section's overflow clips it. */
.section-14p .lines {
  position: absolute;
  top: 107%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1920px;
  height: 102px;
  background-image: url("../img/lines-full-wide-2.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1920px 102px;
  pointer-events: none;
}

/* ----- Contact cards ----- */
.section-14p .cards {
  margin-top: 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.section-14p .card {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 24px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.section-14p .info {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.section-14p .info__icon {
  flex: none;
  width: 30px;
  height: 30px;
  object-fit: contain;
  margin-top: 2px;
}

.section-14p .info__label {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--pink);
}

/* The address keeps its <br>: it is a real two-line datum and no width can
   reproduce the break — "CH-8405 Winterthur, Switzerland" (231px) is wider than
   "Landvogt-Waser-Strasse 73" plus the next word minus 1px, so the valid window
   is 1px wide. <br> is also the spec's intended markup for addresses. */
/* The address's two lines come from the newline in the HTML source (`pre-line`)
   instead of a <br>; no width reproduces them (the valid window is 1px wide).
   The single-line values on either side are unaffected. */
.section-14p .info__value {
  margin: 0;
  white-space: pre-line;
  font-size: 17px;
  line-height: 1.5;
  color: var(--gray);
}

/* Section 14p — mobile (<= 900px): cards stack. */
@media (max-width: 900px) {
  .section-14p .container {
    padding-inline: 40px;
  }

  .section-14p {
    padding-block: 64px;
  }

  .section-14p .title {
    font-size: 30px;
  }

  .section-14p .cards {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 56px;
  }

  .section-14p .card {
    padding: 36px 28px;
  }
}


/* ===== section-15c.css ===== */
/* SECTION 15c — Browse by category  (title + row of category pills)
   Centered gray title + row of pills (pink outline) that wrap onto
   multiple lines on mobile.
   Self-contained: copy the <section class="section-15c"> and link this file.
   Every rule is scoped under `/* SECTION 15c — UNUSED SINCE 2026-09-10. The "Browse by category" block was
   removed from both blog-lp pages: four articles across four categories means
   every filter would show exactly one post, and the chips were inert spans that
   filled pink on hover — a control that promised something the page could not do.
   These rules are kept, not deleted, because they are the styling that would be
   wanted back if category listing pages are ever built. Nothing references them
   today; do not treat their presence as evidence the section still exists.
   IF THEY ARE REUSED IT MUST BE FOR WORKING FILTERS, NEVER FOR LABELS — the chips
   were inert spans with a pink hover fill, a control that did nothing, which is
   the defect the removal fixes. See the note where the section stood in
   blog-lp.html. */
.section-15c`. */

.section-15c,
.section-15c *,
.section-15c *::before,
.section-15c *::after {
  box-sizing: border-box;
}

.section-15c {
  background-color: var(--white);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  padding-block: 40px;
}

.section-15c .title {
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--gray);
}

.section-15c .chips {
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.section-15c .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 26px;
  border: 2px solid var(--pink);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--pink);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.section-15c .chip:hover {
  background: var(--pink);
  color: var(--white);
}

@media (max-width: 900px) {
  .section-15c .container {
    padding-inline: 40px;
  }
}


/* ===== section-16s.css ===== */
/* SECTION 16s — "One arrangement" (services intro + built-in capability cards)
   Self-contained. Copy the <section class="section-16s"> block and link this
   file to reuse. Layout:
     heading  ->  two statement boxes  ->  divider label  ->  4 cards row
   Cards are a fixed 293x623 and stay 4-across on desktop, 1-up on mobile. */

.section-16s,
.section-16s *,
.section-16s *::before,
.section-16s *::after {
  box-sizing: border-box;
}

/* BACKGROUND: two layers — assets/img/watermark.webp (watermark, bottom-left
   corner) on top of a linear gradient #D9E4EA (50%) -> #FFFFFF (100%).
   To change the watermark, replace the file keeping the same name. */
.section-16s {
  padding-block: 56px 80px;
  background-color: var(--white);
  background-image: url("../img/watermark.webp"),
    linear-gradient(0deg, rgba(217, 228, 234, 0.5) 0%, #ffffff 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, center;
  background-size: 1000px, cover;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--gray);
}

/* low-priority resets (`:where` adds 0 specificity) */
.section-16s :where(ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-16s :where(a) {
  text-decoration: none;
  color: inherit;
}

.section-16s .container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ----- Heading ----- */
/* Intentional line break kept as a real newline in the HTML source (`pre-line`)
   instead of a <br>: no width can reproduce it (the lines are independent
   sentences and the longer one comes second). Long lines still wrap normally.
   Careful: the source formatting of this element is content now. */
.section-16s .title {
  margin: 0 auto 56px;
  white-space: pre-line;
  max-width: 720px;
  text-align: center;
  color: var(--gray);
  font-size: 40px;
  line-height: 1.2;
  font-weight: 600;
}

/* ----- Two statement boxes ----- */
.section-16s .statement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.section-16s .statement-box {
  background-color: var(--gray-6);
  border-radius: 24px;
  padding: 44px 48px;
  display: flex;
  align-items: center;
}

.section-16s .claims {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.section-16s .claims li {
  position: relative;
  padding-left: 28px;
  color: var(--pink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.section-16s .claims li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--pink);
}

.section-16s .desc {
  margin: 0;
  color: var(--gray);
  font-size: 18px;
  line-height: 1.55;
}

/* ----- Divider label (dashed wave line on each side of the text) -----
   Full-bleed: breaks out of the .container so the wave spans the whole
   viewport width (same technique as section-63m .clients). */
.section-16s .divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 84px 0 64px;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

/* IMAGES: assets/img/lines-left.webp (left) and assets/img/lines-right.webp (right) —
   dotted wavy lines that flank the divider text.
   Each div is exactly the size of its image (no stretching/distortion); what
   goes past the screen is cut off by the divider's `overflow: hidden`.
   To change them, replace the files keeping the same names (adjust width/height
   if the new images have different dimensions). */
.section-16s .lines-left,
.section-16s .lines-right {
  flex: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.section-16s .lines-left {
  width: 1268px;
  height: 136px;
  background-image: url("../img/lines-left.webp");
  margin-top: 57px;
}

.section-16s .lines-right {
  width: 1272px;
  height: 193px;
  background-image: url("../img/lines-right.webp");
}

/* divider line exclusive to mobile — hidden on desktop */
.section-16s .lines-mobile {
  display: none;
}

.section-16s .divider-text {
  flex: none;
  color: var(--gray);
  font-size: 22px;
  font-weight: 600;
}

.section-16s .divider-text strong {
  color: var(--pink);
  font-weight: 600;
}

/* ----- Cards row ----- */
.section-16s .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.section-16s .card {
  position: relative;
  width: 293px;
  height: 623px;
  border-radius: 35px;
  overflow: hidden;
  background-color: var(--pink);
  display: flex;
  flex-direction: column;
}

/* IMAGES: assets/img/image-card-1..4-section-1-services.webp — photo at the top of each
   card (one per card, defined in the HTML).
   To change them, replace the files keeping the same names, or adjust the srcs. */
.section-16s .card-image {
  display: block;
  width: 100%;
  height: 215px;
  object-fit: cover;
  flex: none;
}

/* small round icon badge overlapping the image/body seam (top-right) */
/* IMAGE: assets/img/icon-card-1..4-section-1-services.webp — badge icon of each
   card. FILES NOT YET PROVIDED — placeholder.
   To change them, replace the files keeping the same names, or adjust the srcs. */
.section-16s .card-badge {
  position: absolute;
  top: 192px;
  right: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-16s .card-badge img {
  display: block;
  width: 22px;
  height: 22px;
}

.section-16s .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 26px 28px;
  color: var(--white);
}

/* Card title width caps instead of hard <br> tags — 24px at every breakpoint,
   so one value each. Scoped by card position. */
.section-16s .cards .card:nth-of-type(1) .card-title {
  max-width: 170px;
}

/* Pickup & / Logistics */
.section-16s .cards .card:nth-of-type(2) .card-title {
  max-width: 140px;
}

/* Smart / Storage */
.section-16s .cards .card:nth-of-type(3) .card-title {
  max-width: 160px;
}

/* Digital / Inventory */
.section-16s .cards .card:nth-of-type(4) .card-title {
  max-width: 155px;
}

/* Circular / Options */

.section-16s .card-title {
  margin: 0 0 20px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 600;
}

.section-16s .card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-16s .card-list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.45;
}

.section-16s .card-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--white);
}

/* ----- "Discover" pill (pinned to the bottom of the card) -----
   Hover/press motion is shared — see css/shared.css. */
.section-16s .card-btn {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--white);
  border-radius: 999px;
  padding: 12px 24px;
  color: var(--white);
  font-size: 15px;
  line-height: 1;
}

.section-16s .card-btn .arrow {
  width: 18px;
  height: 18px;
}

/* Section 16s — mobile (<= 900px) */
@media (max-width: 900px) {
  .section-16s .container {
    padding-inline: 40px;
  }

  /* same watermark, scaled to the screen width and centered at the bottom;
     gradient still covers everything (2 layers: watermark, gradient) */
  .section-16s {
    padding-block: 44px 56px;
    background-position: center bottom, center;
    background-size: 100% auto, cover;
  }

  .section-16s .title {
    font-size: 30px;
    margin-bottom: 40px;
  }

  .section-16s .statement {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .section-16s .statement-box {
    padding: 32px 28px;
  }

  .section-16s .divider {
    flex-direction: column;
    gap: 20px;
    margin: 56px 0 40px;
    justify-content: center;
    text-align: center;
  }

  /* on mobile the side waves disappear; the line above the text comes in */
  .section-16s .lines-left,
  .section-16s .lines-right {
    display: none;
  }

  /* IMAGE: assets/img/lines-divider-mobile.webp (788x166) — line above the text,
     occupying 100% of the screen width. */
  .section-16s .lines-mobile {
    display: block;
    width: 100%;
    aspect-ratio: 788 / 166;
    background-image: url("../img/lines-divider-mobile.webp");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  /* gray on top, pink (block) below, all centered */
  .section-16s .divider-text {
    display: block;
    max-width: 80%;
    font-size: 29px;
    line-height: 1.25;
    text-align: center;
  }

  .section-16s .divider-text strong {
    display: block;
  }

  .section-16s .cards {
    gap: 20px;
  }
}


/* ===== section-17q.css ===== */
/* SECTION 17q — Key features + Why manage with dingx  (two rows of cards)
   Uses the shared `.cards-section` class (css/shared.css); this file keeps
   only what is specific to Manage. Scoped under `.section-17q`. */

.section-17q,
.section-17q *,
.section-17q *::before,
.section-17q *::after {
  box-sizing: border-box;
}

/* IMAGE (background): assets/img/lines-bottom-right.webp — dotted line with the dingx
   symbol, anchored at BOTTOM RIGHT (decorative element).
   The box keeps the image's ratio (1916×1153 → 960×578). The `right` slides:
     • right: 0  → glued to the right edge of the screen (screens >= 1920px);
     • as the screen narrows, `100vw - 1920px` becomes negative → the image
       slides out to the right (clipped by overflow: hidden);
     • locks at -790px → a fixed sliver of ~170px (960 - 790) remains.
   Tuning: 1920px = width where it glues to the edge; -790px = how far it slides. */
.section-17q::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: clamp(-790px, 100vw - 1920px, 0px);
  width: 960px;
  height: 578px;
  background-image: url("../img/lines-bottom-right.webp");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: auto 100%;
  pointer-events: none;
}

.section-17q>.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1328px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* larger space before the second group ("Why manage matters") */
.section-17q .cards+.group-title {
  margin-top: 96px;
}

.section-17q .cards--features {
  max-width: 1264px;
  /* 4 x 301 + 3 x 20 gaps */
}

.section-17q .cards--usecases {
  max-width: 943px;
  /* 3 x 301 + 2 x 20 gaps */
}

.section-17q .card-icon {
  display: block;
}

/* Card colors (hex from Figma)
   Key features (pink):           f1 → f4
   Why manage with dingx (purple):  u1 → u3 */
.section-17q .card--f1 {
  background-color: var(--light-pink);
}

.section-17q .card--f2 {
  background-color: var(--pink);
}

.section-17q .card--f3 {
  background-color: var(--dark-pink);
}

.section-17q .card--f4 {
  background-color: var(--dark-pink);
}

.section-17q .card--u1 {
  background-color: var(--light-purple);
}

.section-17q .card--u2 {
  background-color: var(--purple);
}

.section-17q .card--u3 {
  background-color: var(--dark-purple);
}

/* Card title width caps — the titles used hard <br> tags; instead each one
   wraps naturally inside its own cap, so the copy still reflows if it changes.
   Values measured in canada-type-gibson 28px/500: wide enough for the card's
   longest line, narrower than that line plus the next word. */
.section-17q .card--f1 .card-title {
  max-width: 180px;
}

/* Visual item / catalog */
.section-17q .card--f2 .card-title {
  max-width: 160px;
}

/* Real-time / access */
.section-17q .card--f3 .card-title {
  max-width: 240px;
}

/* Request delivery, / sale, lending, / donation, service, / or disposal */
.section-17q .card--f4 .card-title {
  max-width: 195px;
}

/* Full control / from anywhere */
.section-17q .card--u1 .card-title {
  max-width: 195px;
}

/* No forgotten / items */
.section-17q .card--u2 .card-title {
  max-width: 200px;
}

/* No guessing / what's stored */
.section-17q .card--u3 .card-title {
  max-width: 225px;
}

/* Decisions made / with clarity */

/* Section 17q — mobile (<= 900px): specifics (shared stacking is in shared.css) */
@media (max-width: 900px) {
  .section-17q>.container {
    padding-inline: 40px;
    padding-bottom: 72px;
  }

  .section-17q .cards+.group-title {
    margin-top: 64px;
  }
}


/* ===== section-18d.css ===== */
/* SECTION 18d — Latest posts  (grid of 3 cards + "Load more" button)
   Centered title + 3 cards (image on top, title, excerpt, "Read more")
   over a vertical gradient (white → #d9e4ea), and a purple "Load more" button.
   Self-contained: copy the <section class="section-18d"> and link this file.
   Every rule is scoped under `.section-18d`. */

.section-18d,
.section-18d *,
.section-18d *::before,
.section-18d *::after {
  box-sizing: border-box;
}

.section-18d {
  background-color: var(--white);
  background-image: linear-gradient(180deg, #ffffff 0%, #d9e4ea 100%);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--gray);
  padding-block: 72px;
}

.section-18d .title {
  margin: 0 0 48px;
  text-align: center;
  font-size: 34px;
  font-weight: 600;
  color: var(--gray);
}

/* ----- Grid of cards ----- */
.section-18d .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.section-18d .card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(61, 61, 71, 0.05);
}

.section-18d .card__img {
  height: 232px;
  background-size: cover;
  background-position: center;
}

/* Card images BY POSITION — the placeholder set. Its only consumer, the
   blog-news.html model page, was deleted on 2026-09-07; these rules are kept
   because the positional selectors still back the card grids elsewhere. These were inline `style="background-image:…"`; html-validate rejects that
   (no-inline-style) and the CI pipeline runs it on every pull request.

   The `:not()` matters: the real posts name their own photo with a `.blog-img--NN`
   class (see the blog-posts rules at the end of this file), and a rule that keys off
   the card's POSITION would otherwise beat it on specificity and show the wrong
   picture. So these three only dress cards that have no image class of their own. */
.section-18d .card:nth-of-type(1) .card__img:not([class*="blog-img--"]) {
  background-image: url("../img/image-card-1-section-2-blog-lp.webp");
}

.section-18d .card:nth-of-type(2) .card__img:not([class*="blog-img--"]) {
  background-image: url("../img/image-card-2-section-2-blog-lp.webp");
}

.section-18d .card:nth-of-type(3) .card__img:not([class*="blog-img--"]) {
  background-image: url("../img/image-card-3-section-2-blog-lp.webp");
}

.section-18d .card__body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.section-18d .card__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--gray);
}

.section-18d .card__excerpt {
  margin: 20px 0 28px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray);
}

/* `margin-top: auto` pins the button to the bottom of the card instead of letting
   it follow the text. With the placeholder copy every excerpt was the same length
   and it made no difference; with real posts the excerpts differ and the buttons
   would sit at three different heights. The 28px minimum gap moved to the excerpt
   below, so short and long cards keep the same breathing room. */
.section-18d .card__more {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border: 2px solid var(--pink);
  border-radius: 999px;
  font-size: 14px;
  color: var(--pink);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.section-18d .card__more:hover {
  background: var(--pink);
  color: var(--white);
}

/* ----- "Load more" button ----- */
.section-18d .load-more-wrap {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

/* Hover/press motion is shared — see css/shared.css. */
.section-18d .load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  border-radius: 999px;
  background: var(--purple);
  color: var(--white);
  font-size: 16px;
  text-decoration: none;
}

/* Section 18d — mobile */
@media (max-width: 900px) {
  .section-18d .container {
    padding-inline: 40px;
  }

  .section-18d {
    padding-block: 48px;
  }

  .section-18d .cards {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }
}


/* ===== section-19f.css ===== */
/* SECTION 19f — How it works honeycomb + client cards (Pricing page)
   New section of the Pricing page. Combines:
   - the "How it works" honeycomb (image, same pattern as section-22c)
   - two client cards (Private / Business), structure inspired by
     section-63m but with its own copy and buttons INSIDE each card
   - a decorative background line (lines-full.webp) centered: it stays fixed in
     the CENTER and the edges are thrown out as the screen widens (same
     scheme as the clamp, but centered). See dingx-clamp-slide-out-bg.
   Self-contained: to reuse, copy the <section class="section-19f"> block and
   link this file. Every rule is scoped under `.section-19f`. */

.section-19f,
.section-19f *,
.section-19f *::before,
.section-19f *::after {
  box-sizing: border-box;
}

.section-19f {
  position: relative;
  /* anchor of the background line */
  overflow: hidden;
  /* trims the edges of the line that go out */
  padding-block: 80px;
  background-color: var(--white);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--gray);
}

/* low-priority reset (`:where` adds 0 specificity) */
.section-19f :where(a) {
  text-decoration: none;
  color: inherit;
}

/* Band in the flow, BETWEEN the honeycomb and the cards, that reserves the
   vertical space. The line (below) is anchored by the TOP of this band: the
   peak of the arc falls just below the honeycomb and the tips go down to the
   corners (behind the cards).
   Adjust the `height` to give more/less breathing room between the honeycomb and the cards. */
.section-19f .lines-anchor {
  position: relative;
  height: 120px;
  /* TUNABLE: space between honeycomb and cards */
  z-index: 0;
  /* stays behind the honeycomb and the cards */
}

/* IMAGE (background): assets/img/lines-full.webp — decorative dotted line.
   Anchored by the top (top), CENTERED horizontally (left 50% + translateX).
   Takes the screen width (100vw) up to a cap of 1920px; `cover` fills the
   box keeping the center fixed and throwing the edges out (the section has
   overflow:hidden, so the excess is trimmed).
   Adjust `top` to move the line down/up. To change: same file name. */
.section-19f .lines {
  position: absolute;
  top: 30px;
  /* TUNABLE: how far below the honeycomb the line sits */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 1920px;
  height: 379px;
  background: url("../img/lines-full.webp") no-repeat center / cover;
  pointer-events: none;
}

.section-19f .container {
  width: 100%;
  max-width: 1184px;
  margin-inline: auto;
  padding-inline: 24px;
  position: relative;
  z-index: 1;
  /* content above the line */
}

/* ----- "How it works" honeycomb ----- */
/* It used to be one flat picture here; it is HTML now — see the hive rules at the
   end of this file. Only the stacking is this section's business: the honeycomb
   has to sit above the decorative line that runs behind it. */
.section-19f .hive {
  position: relative;
  z-index: 1;
}

/* ----- Client cards -----
   Full-bleed centered (breaks out of the 1184 container). The cards are FLUID (1fr):
   at most 624px each (when `clients` reaches 1280 = 624 + 32 + 624) and they
   SHRINK as the screen narrows, until they break to mobile at 900px. */
.section-19f .clients {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
  /* Widened so the card can carry double the inner side padding without
     squeezing the text column — see `.client-body` below. */
  width: min(1280px, calc(100vw - 160px));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  /* cards above the line */
}

/* No minimum height: the card follows its content and the grid keeps the pair
   level. `.client-body` still has `flex: 1`, so the buttons stay pinned to the
   bottom edge of whichever card is taller. */
.section-19f .client {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background-color: var(--white);
  box-shadow: 0 12px 40px rgba(20, 12, 50, 0.08);
  overflow: hidden;
}

/* IMAGES: assets/img/image-card-1-section-6.webp (private) and
   assets/img/image-card-2-section-6.webp (business) — photo at the top of each card.
   To change them, replace the files keeping the same names, or adjust the srcs. */
.section-19f .client-image {
  display: block;
  width: 100%;
  height: 268px;
  object-fit: cover;
}

/* Side padding is double the original 40px. The grid above grew by the same
   160px in return, so the text column keeps exactly the width it had — only the
   card around it got roomier. */
.section-19f .client-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* stretches to align the buttons at the base */
  padding: 36px 80px 40px;
}

.section-19f .client-title {
  margin: 0 0 24px;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 600;
}

.section-19f .client--private .client-title {
  color: var(--pink);
}

.section-19f .client--business .client-title {
  color: var(--purple);
}

.section-19f .client-text {
  margin: 0 0 28px;
  color: var(--gray);
  font-size: 18px;
  line-height: 1.55;
}

.section-19f .client-included {
  margin: 0 0 14px;
  color: var(--gray);
  font-size: 18px;
  font-weight: 600;
}

.section-19f .client-list {
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 22px;
  list-style: disc;
  color: var(--gray);
  font-size: 16px;
  line-height: 1.4;
}

/* copy variants: desktop visible, mobile hidden (inverted in the @media) */
.section-19f .client-text--mobile,
.section-19f .client-list--mobile {
  display: none;
}

/* buttons anchored at the base of the card, IN A ROW on desktop. With `flex-wrap: wrap`
   they sit side by side while they fit and the 2nd drops to the line below when the
   card narrows (avoids the cut by overflow:hidden). On mobile they stack. */
.section-19f .client-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: auto;
}

/* Hover/press motion is shared — see css/shared.css (the 2px transparent
   border is what the shared hover paints as the ring). */
.section-19f .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  padding: 18px 34px;
  font-size: 18px;
  border: 2px solid transparent;
}

.section-19f .btn--pink {
  background-color: var(--pink);
  color: var(--white);
}

.section-19f .btn--purple {
  background-color: var(--purple);
  color: var(--white);
}

.section-19f .btn--purple-outline {
  background-color: transparent;
  color: var(--purple);
  border-color: var(--purple);
}

/* Section 19f — mobile (<= 900px): tall honeycomb + stacked cards */
@media (max-width: 900px) {
  .section-19f .container {
    padding-inline: 40px;
  }

  .section-19f {
    padding-block: 48px;
  }

  .section-19f .hex {
    width: 100%;
    max-width: 340px;
  }

  .section-19f .lines-anchor {
    height: 90px;
  }

  .section-19f .clients {
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
    position: static;
    left: auto;
    transform: none;
    padding-inline: 8px;
  }

  .section-19f .client {
    width: 100%;
    min-height: 0;
  }

  .section-19f .client-image {
    height: 220px;
  }

  .section-19f .client-body {
    padding: 28px 24px 32px;
  }

  .section-19f .client-title {
    font-size: 34px;
  }

  /* swaps the copy: hides the desktop one, shows the mobile one */
  .section-19f .client-text--desktop,
  .section-19f .client-list--desktop {
    display: none;
  }

  .section-19f .client-text--mobile {
    display: block;
  }

  .section-19f .client-list--mobile {
    display: flex;
  }

  /* stacked and CENTERED buttons (width by content, not 100%) */
  .section-19f .client-actions {
    flex-direction: column;
    align-items: center;
  }

  /* ...but never wider than the card. `align-items: center` sizes the button by its
     content, and the desktop `white-space: nowrap` pins the label to one line, so
     "Check pricing in the app" (260px) overflowed at every phone width — by 5px at
     414 and 99px at 320. The cap keeps the content-width look wherever it fits and
     only lets the label wrap when it would not. */
  .section-19f .client-actions .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}


/* ===== section-21f.css ===== */
/* SECTION 21f — Subscribe to the newsletter  (copy + form on a purple gradient)
   Same family as section-24j (purple gradient + watermark), but with the text on
   the LEFT and a FORM (name, email, checkbox, button) on the RIGHT.
   Self-contained: copy the <section class="section-21f"> block and link this file.
   Every rule is scoped under `.section-21f`. */

.section-21f,
.section-21f *,
.section-21f *::before,
.section-21f *::after {
  box-sizing: border-box;
}

/* Background: color/linear gradient (#4D25B4 → #7844FE) from Figma. */
.section-21f {
  min-height: 652px;
  /* desktop height; shell (gradient etc.) is shared via .hero-* */
}

/* Watermark ::before is shared via `.wm` (css/shared.css). */
/* .inner (two-column, base + <=900 stacking) is shared via `.split-hero`. */

/* ----- Text (left half) ----- */
.section-21f .content {
  max-width: 440px;
}

/* .title (base 48px) is shared via `.hero-title` (css/shared.css).
   Width cap instead of hard <br> tags; one pair of values serves every page that
   uses this section — locations ("Not in your" / "city yet?") and the two blog
   pages ("Subscribe to" / "the dingx" / "newsletter!"). Second value in the
   <= 900px block (34px). */
.section-21f .title {
  max-width: 280px;
}

.section-21f .text {
  margin: 32px 0 0;
  max-width: 400px;
  font-size: 20px;
  line-height: 1.55;
  opacity: 0.92;
}

/* ----- Form (right half) ----- */
.section-21f .form {
  width: 500px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-21f .field {
  width: 100%;
  height: 60px;
  padding: 0 30px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  color: var(--white);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
}

.section-21f .field::placeholder {
  color: var(--white);
  opacity: 1;
  font-weight: 600;
}

.section-21f .field:focus {
  outline: none;
  border-color: var(--white);
}

/* checkbox + label */
.section-21f .agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  opacity: 0.95;
}

/* .agree input checkbox styles are shared (css/shared.css). */

.section-21f .agree a {
  color: var(--white);
  text-decoration: underline;
}

/* Subscribe button (white pill, purple text).
   Hover/press motion is shared — see css/shared.css. */
.section-21f .submit {
  align-self: center;
  margin-top: 16px;
  min-width: 190px;
  height: 60px;
  padding: 0 40px;
  border: none;
  border-radius: 999px;
  background: var(--white);
  color: var(--purple);
  font-family: inherit;
  font-size: 17px;
  cursor: pointer;
}

/* Section 21f — stacked (<= 900px): text on top, form below. */
@media (max-width: 900px) {
  .section-21f>.container {
    padding-inline: 40px;
  }

  .section-21f {
    min-height: 830px;
  }

  .section-21f::before {
    width: 420px;
    height: 320px;
  }

  .section-21f .content {
    max-width: none;
  }

  .section-21f .title {
    font-size: 34px;
    max-width: 200px;
    /* keeps the same break at the smaller size */
  }

  .section-21f .text {
    max-width: none;
    font-size: 17px;
  }

  .section-21f .form {
    width: 100%;
  }
}


/* ===== section-22c.css ===== */
/* SECTION 22c — "How it works" image band
   Self-contained: a white band that centers one responsive image.
   Copy the <section class="section-22c"> block and link this file to reuse. */

.section-22c,
.section-22c *,
.section-22c *::before,
.section-22c *::after {
  box-sizing: border-box;
}

.section-22c {
  padding-block: 80px;
  background-color: var(--white);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
}

/* The "How it works" honeycomb used to be one flat picture in this section; it is
   HTML now — see the hive rules at the end of this file. Nothing left to style
   here, the hive centres itself. */

@media (max-width: 900px) {
  .section-22c .container {
    padding-inline: 40px;
  }
}


/* ===== section-23m.css ===== */
/* SECTION 23m — Send us a message  (copy + contact form on a purple gradient)
   Same family as section-21f (purple gradient + watermark), but with a
   complete contact form (name, email, phone, topic dropdown, message,
   checkbox and button) on the RIGHT.
   Self-contained: copy the <section class="section-23m"> block and link this file.
   Every rule is scoped under `.section-23m`. */

.section-23m,
.section-23m *,
.section-23m *::before,
.section-23m *::after {
  box-sizing: border-box;
}

/* Gradient shell (bg/gradient/font/color) is shared via `.hero-purple`. */

/* Watermark ::before is shared via `.wm` (css/shared.css). */
.section-23m .inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding-block: 88px;
}

/* ----- Text (left half) ----- */
.section-23m .content {
  max-width: 380px;
  padding-top: 8px;
}

/* .title (base 48px) is shared via `.hero-title` (css/shared.css).
   Width caps instead of hard <br> tags. The title's 250px works at 48px and at
   the 34px mobile size; the text needs a second value (see the <= 900px block). */
.section-23m .title {
  max-width: 250px;
  /* Send us a / message. */
}

.section-23m .text {
  margin: 28px 0 0;
  max-width: 210px;
  /* We usually reply within / 1–2 business days. */
  font-size: 20px;
  line-height: 1.5;
  opacity: 0.92;
}

/* ----- Form (right half) ----- */
.section-23m .form {
  width: 520px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* base field (pill) */
.section-23m .field {
  width: 100%;
  height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  color: var(--white);
  font-family: inherit;
  font-size: 16px;
}

.section-23m .field::placeholder {
  color: var(--white);
  opacity: 1;
}

.section-23m .field:focus {
  outline: none;
  border-color: var(--white);
}

/* Topic field — NATIVE <select> styled to match the other fields
   (html-validate: prefer-native-element). It replaced a custom div[role=listbox] + <ul>.

   The CLOSED field is: pill, 2px border, transparent background, white 16px/500 text
   and the chevron at right — measured identical to the sibling inputs.

   THERE IS NO OVERLAY LABEL ANY MORE, AND IT MUST NOT COME BACK. The design had a
   "Topic:" <span> absolutely positioned over the select. A native select draws its own
   selected-option text and that text CANNOT be suppressed, so an always-visible overlay
   can only ever share the same space. In Chrome it happened not to collide, because
   `text-align: center` pushed the value to the middle while the label sat at left: 32px.
   SAFARI DOES NOT HONOUR text-align ON A NATIVE SELECT: it draws the value left-aligned,
   directly under the label, and the field was illegible. Reported from the live site
   2026-09-12, and confirmed by measuring geometry rather than by screenshot — the
   reveal animation never fires in headless Chrome, so screenshots come back blank and
   the pixels cannot be trusted here.

   The label is now the select's own disabled placeholder <option>: ONE element draws the
   text, so nothing can overlap in any browser or in the mobile OS picker. Do not
   reintroduce the span, and do not try to fix a collision by moving the offset — the
   offset was never the problem. `text-align: center` stays, because the sibling inputs
   are centred and DO honour it; in Safari the select value sits left, a cosmetic
   difference between browsers rather than a collision.

   The placeholder carries `required`, which fixes a second defect: the field used to
   default to the first real option, so an untouched form reported a topic the visitor
   had never chosen.

   The OPEN list is drawn by the operating system and is NOT styleable. Tried and
   dropped, so nobody spends the time again: `option { background-color }` (tints the
   rows but leaves the highlight and frame), `option:checked` / `option:hover`
   (no effect) and `color-scheme: light` (no effect). Not reachable from the browser's
   inspector either. Styling only part of it looked worse than leaving it native, so
   the popup is left entirely to the OS.

   In exchange the control gains arrow keys, Home/End, type-ahead and the mobile
   picker — none of which the custom version had, despite claiming role="listbox".
   The old dropdown script is gone from assets/js/main.js. */
.section-23m .field--select {
  position: relative;
  display: block;
}

/* the <select> carries the .field look; this only strips the native chrome */
.section-23m .field--select select {
  appearance: none;
  -webkit-appearance: none;
  height: 56px;
  border-radius: 28px;
  text-align: center;
  font-weight: 500;
  cursor: pointer;
}

.section-23m .field--select select:focus {
  outline: none;
  border-color: var(--white);
}

.section-23m .field--select .chev {
  position: absolute;
  right: 34px;
  /* +2px vs the design number: the chevron sits in the wrapper, which no longer carries
     the 2px border (the <select> does), so the offset absorbs it. */
  top: 22px;
  z-index: 3;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Message field (textarea) */
.section-23m .field--message {
  height: auto;
  min-height: 180px;
  border-radius: 24px;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.section-23m .field--message .lbl {
  margin-bottom: 10px;
}

.section-23m .field--message textarea {
  flex: 1;
  min-height: 110px;
  border: none;
  background: transparent;
  color: var(--white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  resize: none;
  outline: none;
}

/* checkbox + label */
.section-23m .agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.95;
}

/* .agree input checkbox styles are shared (css/shared.css). */

.section-23m .agree a {
  color: var(--white);
  text-decoration: underline;
}

/* Send message button (white pill, purple text).
   Hover/press motion is shared — see css/shared.css. */
.section-23m .submit {
  align-self: center;
  margin-top: 24px;
  min-width: 200px;
  height: 60px;
  padding: 0 40px;
  border: none;
  border-radius: 999px;
  background: var(--white);
  color: var(--purple);
  font-family: inherit;
  font-size: 17px;
  cursor: pointer;
}

/* Section 23m — stacked (<= 900px): text on top, form below. */
@media (max-width: 900px) {
  .section-23m>.container {
    padding-inline: 40px;
  }

  .section-23m {
    height: 1109px;
  }

  .section-23m::before {
    width: 420px;
    height: 320px;
  }

  .section-23m .inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding-block: 56px;
  }

  .section-23m .content {
    max-width: none;
  }

  .section-23m .title {
    font-size: 34px;
  }

  .section-23m .text {
    font-size: 17px;
    max-width: 180px;
    /* keeps the same break at the smaller size */
  }

  .section-23m .form {
    width: 100%;
  }
}


/* ===== section-24j.css ===== */
/* SECTION 24j — Pricing with intention  (copy + pills on a purple gradient) Self-contained: to reuse, copy the <section class="section-24j"> block and
   link this file. Every rule is scoped under `.section-24j`. */

.section-24j,
.section-24j *,
.section-24j *::before,
.section-24j *::after {
  box-sizing: border-box;
}

/* Background: color/linear gradient (#4D25B4 → #7844FE) from Figma. */
.section-24j {
  min-height: 652px;
  /* desktop height; shell (gradient etc.) is shared via .hero-* */
}

/* Watermark ::before is shared via `.wm` (css/shared.css). */
/* .inner (two-column, base + <=900 stacking) is shared via `.split-hero`. */

/* Text block — left half, vertically centered. */
.section-24j .content {
  max-width: 440px;
}

/* .title (base 48px) is shared via `.hero-title` (css/shared.css).
   Width cap instead of a hard <br>: the copy wraps naturally inside 300px
   ("Pricing with" / "intention."). The value also holds at the 34px mobile
   size, so no second value is needed. */
.section-24j .title {
  max-width: 300px;
}

.section-24j .text {
  margin: 24px 0 0;
  max-width: 360px;
  font-size: 20px;
  line-height: 1.55;
  opacity: 0.92;
}

/* first paragraph with more breathing room from the title */
.section-24j .title+.text {
  margin-top: 32px;
}

/* ----- Pills (right half) ----- */
.section-24j .pills {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 460px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.section-24j .pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 16px 24px;
  border-radius: 999px;
  background-color: var(--white);
  color: var(--gray);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

/* Section 24j — stacked (<= 900px): text on top, pills below. */
@media (max-width: 900px) {
  .section-24j>.container {
    padding-inline: 40px;
  }

  .section-24j {
    min-height: 0;
    height: 774px;
  }

  .section-24j::before {
    width: 420px;
    height: 320px;
  }

  .section-24j .content {
    max-width: none;
  }

  .section-24j .title {
    font-size: 34px;
  }

  .section-24j .text {
    max-width: none;
    font-size: 17px;
  }

  .section-24j .pills {
    width: 100%;
  }

  .section-24j .pill {
    font-size: 17px;
  }
}


/* ===== section-26v.css ===== */
/* SECTION 26v — "Because storing is caring"  (text card + photo card)
   Row of 2 rounded cards: on the left the text (Gray 5 background) with title,
   paragraphs, 2 buttons and a line in bold; on the right the photo.
   Content-first in the DOM (text before the photo) → desktop shows text-left/photo-right
   and mobile stacks (text on top, photo below) without row-reverse.
   Self-contained: copy the <section class="section-26v"> and link this file.
   Every rule is scoped under `.section-26v`. */

.section-26v,
.section-26v *,
.section-26v *::before,
.section-26v *::after {
  box-sizing: border-box;
}

.section-26v {
  background-color: var(--white);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--gray);
  padding-block: 96px;
}

.section-26v :where(a) {
  text-decoration: none;
  color: inherit;
}

.section-26v .row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: stretch;
  gap: 24px;
}

/* ----- Text card (left) ----- */
.section-26v .content {
  background: var(--gray-5);
  border-radius: 28px;
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Width caps instead of hard <br> tags; the title gets a second value in the
   <= 900px block (34px). `.text` already had the 420px cap that produces its
   break, and `.highlight` holds at 275px at every size. */
.section-26v .title {
  margin: 0;
  max-width: 340px;
  /* Because storing / is caring. */
  font-size: 44px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--gray);
}

.section-26v .text {
  margin: 28px 0 0;
  max-width: 420px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--gray);
}

.section-26v .actions {
  margin-top: 40px;
  display: flex;
  gap: 20px;
}

/* Hover/press motion is shared — see css/shared.css (the 2px transparent
   border is what the shared hover paints as the ring). */
.section-26v .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 16px;
  border-radius: 999px;
  padding: 17px 32px;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.section-26v .btn--pink {
  background: var(--pink);
  color: var(--white);
}

.section-26v .btn--outline {
  background: transparent;
  color: var(--pink);
  border-color: var(--pink);
}

.section-26v .highlight {
  margin: 36px 0 0;
  max-width: 275px;
  /* Space for what matters. / Responsibility for what remains. */
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--gray);
}

/* ----- Photo card (right) ----- */
.section-26v .figure {
  min-height: 500px;
  border-radius: 28px;
  overflow: hidden;
  /* IMAGE: assets/img/image-section-3-sustainability.webp — family in front of the
     dingx truck with boxes on the sidewalk. */
  background-image: url("../img/image-section-3-sustainability.webp");
  background-size: cover;
  background-position: center;
}

/* Section 26v — mobile (<= 900px): stacks (text on top, photo below). */
@media (max-width: 900px) {
  .section-26v .container {
    padding-inline: 40px;
  }

  .section-26v {
    padding-block: 64px;
  }

  .section-26v .row {
    grid-template-columns: 1fr;
  }

  .section-26v .content {
    padding: 44px 32px;
  }

  .section-26v .title {
    font-size: 34px;
    max-width: 265px;
    /* keeps the same break at the smaller size */
  }

  .section-26v .text {
    max-width: 420px;
    /* keeps the second paragraph's break at the smaller size */
  }

  /* The photo is PORTRAIT (1040x1220) and this box goes full-width at a fixed
     380px, so `cover` eats the top and bottom. Measured hidden height: 0% at 390,
     but 42% at 640, 53% at 768, 57% at 834 and 60% at 900 — and the faces sit at
     16-31% of the image, so from about 640 up they were cropped out entirely.
     The focal point moves up rather than the box growing: `aspect-ratio` would
     make this 807px tall at 768 and 962px at 900, which is a far larger change
     than the defect. At 18% the visible band starts around 9-11% at every width
     in this range, keeping all three faces in frame.
     THIS BAND IS ITS OWN LAYOUT — stacked like mobile, wide like desktop — and a
     value that is right at 390 and at 1440 can still be wrong here. Check 768 and
     834, not just the two ends. */
  .section-26v .figure {
    min-height: 380px;
    background-position: center 18%;
  }
}

@media (max-width: 480px) {
  .section-26v .actions {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ===== section-27w.css ===== */
/* SECTION 27w — "Designed for modern living"  (photo background + left text)
   Self-contained. Copy the <section class="section-27w"> block and link this
   file to reuse. A full-bleed photo fills the band (760px tall on desktop);
   white copy sits on the left, vertically centered. */

.section-27w,
.section-27w *,
.section-27w *::before,
.section-27w *::after {
  box-sizing: border-box;
}

/* IMAGE (background): assets/img/image-background-section-2-services.webp (1920x760) —
   background photo of the band. To change it, replace the file keeping the name,
   or adjust the path. */
.section-27w {
  height: 760px;
  display: flex;
  align-items: center;
  background-color: #7a3f78;
  background-image: url("../img/image-background-section-2-services.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--white);
}

/* low-priority reset (`:where` adds 0 specificity) */
.section-27w :where(ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-27w .container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

.section-27w .content {
  max-width: 440px;
}

/* Width cap instead of a hard <br> ("Designed for" / "modern living");
   300px holds at 44px and at the 34px mobile size. */
.section-27w .title {
  margin: 0 0 40px;
  max-width: 300px;
  font-size: 44px;
  line-height: 1.1;
  font-weight: 600;
}

.section-27w .group {
  margin-bottom: 28px;
}

.section-27w .group:last-child {
  margin-bottom: 0;
}

.section-27w .group-title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 600;
}

.section-27w .group-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 10px;
}

.section-27w .group-list li {
  position: relative;
  padding-left: 22px;
  font-size: 18px;
  line-height: 1.35;
}

.section-27w .group-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--white);
}

/* Section 27w — mobile (<= 900px) */
@media (max-width: 900px) {
  .section-27w .container {
    padding-inline: 40px;
  }

  /* IMAGE (background): assets/img/image-background-section-2-mobile-services.webp
     (390x836) — background photo on mobile. To change it, replace the file
     keeping the name, or adjust the path. */
  .section-27w {
    height: auto;
    min-height: 836px;
    padding-block: 56px;
    background-image: url("../img/image-background-section-2-mobile-services.webp");
    background-position: center bottom;
    align-items: baseline;
  }

  .section-27w .title {
    font-size: 34px;
    margin-bottom: 52px;
  }

  .section-27w .group-list li {
    font-size: 16px;
  }
}


/* ===== section-29p.css ===== */
/* SECTION 29p — Key features + Why store with dingx  (two rows of cards)
   Uses the shared `.cards-section` class (css/shared.css); this file keeps
   only what is specific to Store. Scoped under `.section-29p`. */

.section-29p,
.section-29p *,
.section-29p *::before,
.section-29p *::after {
  box-sizing: border-box;
}

/* IMAGE (background): assets/img/lines-section-3-store.webp — dotted line with the dingx
   symbol, anchored at BOTTOM LEFT (decorative element).
   The box is the size of the image (900×327). `left` controls the slide:
     • left: 0  → glued to the left edge of the screen (screens >= 1920px);
     • as the screen narrows, `100vw - 1920px` goes negative → the image
       slides off to the left (clipped by overflow: hidden);
     • stops at -733px → a fixed sliver of ~167px (900 - 733) remains.
   Tuning: 1920px = width where it glues to the edge; -733px = how far it slides. */
.section-29p::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: clamp(-733px, 100vw - 1920px, 0px);
  width: 900px;
  height: 327px;
  background-image: url("../img/lines-section-3-store.webp");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: auto 100%;
  pointer-events: none;
}

.section-29p>.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1328px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* larger space before the second group ("Why store with dingx") */
.section-29p .cards+.group-title {
  margin-top: 96px;
}

.section-29p .cards--features {
  max-width: 1264px;
  /* 4 x 301 + 3 x 20 gaps */
}

.section-29p .cards--usecases {
  max-width: 943px;
  /* 3 x 301 + 2 x 20 gaps */
}

.section-29p .card-icon {
  display: block;
}

/* Card colors (hex from Figma)
   Key features (pink):          f1 → f4
   Why store with dingx (purple):  u1 → u3 */
.section-29p .card--f1 {
  background-color: var(--light-pink);
}

.section-29p .card--f2 {
  background-color: var(--pink);
}

.section-29p .card--f3 {
  background-color: var(--dark-pink);
}

.section-29p .card--f4 {
  background-color: var(--dark-pink);
}

.section-29p .card--u1 {
  background-color: var(--light-purple);
}

.section-29p .card--u2 {
  background-color: var(--purple);
}

.section-29p .card--u3 {
  background-color: var(--dark-purple);
}

/* Card title width caps — the titles used hard <br> tags; instead each one
   wraps naturally inside its own cap, so the copy still reflows if it changes.
   Values measured in canada-type-gibson 28px/500: wide enough for the card's
   longest line, narrower than that line plus the next word. */
.section-29p .card--f1 .card-title {
  max-width: 198px;
}

/* Pay only for / what you store */
.section-29p .card--f2 .card-title {
  max-width: 230px;
}

/* Secure, indexed / storage */
.section-29p .card--f3 .card-title {
  max-width: 190px;
}

/* On-demand / access */
.section-29p .card--f4 .card-title {
  max-width: 220px;
}

/* No long-term / contracts */
.section-29p .card--u1 .card-title {
  max-width: 210px;
}

/* No paying for / empty space */
.section-29p .card--u2 .card-title {
  max-width: 230px;
}

/* No unnecessary / boxes */
.section-29p .card--u3 .card-title {
  max-width: 254px;
}

/* Storage connected / to logistics and / digital inventory */

/* Section 29p — mobile (<= 900px): specifics (shared stacking is in shared.css) */
@media (max-width: 900px) {
  .section-29p>.container {
    padding-inline: 40px;
    padding-bottom: 72px;
  }

  .section-29p .cards+.group-title {
    margin-top: 64px;
  }
}


/* ===== section-31n.css ===== */
/* SECTION 31n — Sustainability model  (3 sub-sections over a light gradient)
   Sub 1: "Built to keep things in motion" — 4 white cards (icon in a circle
           alternating pink/purple).
   Sub 2: "Circularity isn't a campaign" — photo card (dark overlay) + purple card.
   Sub 3: "Impact you can see" — 4 white stat cards with a purple icon.
   Section background: vertical gradient (white → #d9e4ea) + the dotted line
   `lines-full-wide` as a 2nd background, with `background-size: 100% auto` so
   it SHRINKS along with the screen (doesn't use the clamp slide-out trick).
   Self-contained: copy the <section class="section-31n"> and link this file.
   Every rule is scoped under `.section-31n`. */

.section-31n,
.section-31n *,
.section-31n *::before,
.section-31n *::after {
  box-sizing: border-box;
}

.section-31n {
  position: relative;
  overflow: hidden;
  /* clips the decorative arc that bleeds off the left of the screen */
  background-color: var(--white);
  background-image: linear-gradient(180deg, #ffffff 0%, #d9e4ea 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--gray);
  padding-block: 96px;
}

.section-31n :where(a) {
  text-decoration: none;
  color: inherit;
}

.section-31n .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1184px;
  margin-inline: auto;
  padding-inline: 24px;
  height: 597px;
  align-content: center;
}

.section-31n .sub+.sub {
  margin-top: 104px;
}

/* Centered title of each sub-section. */
/* Width caps instead of hard <br> tags — the copy wraps naturally inside the
   cap (the element stays centered thanks to `margin: 0 auto`). Each one gets a
   second value in the <= 900px block where the font-size drops. */
.section-31n .s-title {
  margin: 0 auto;
  max-width: 375px;
  /* Built to keep things / in motion. */
  text-align: center;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--gray);
}

.section-31n .s-title--purple {
  color: var(--purple);
}

/* ---- WHOLE dotted line (lines-full-wide, 1920×1202), full-bleed and
   scaled by `vw` — shrinks along with the screen width. Anchored to the top of
   the sub-section 2 title. Adjust `--loop-gap` to move the line down(+) / up(-)
   relative to the title. ---- */
.section-31n .s-title--circ {
  position: relative;
  max-width: 540px;
  /* Circularity isn't a campaign. / It's our operating system. */
}

.section-31n .circ-line {
  --loop-gap: 0px;
  position: absolute;
  z-index: 0;
  /* behind the sub-2 cards (which have z-index:1) */
  left: calc(50% - 50vw);
  /* bleeds to the left edge of the screen */
  top: calc(var(--loop-gap));
  width: 100vw;
  aspect-ratio: 1920 / 1202;
  /* IMAGE (background): assets/img/lines-full-wide.webp — decorative dotted line behind the
     circularity cards. Bleeds to the full viewport width; `aspect-ratio: 1920/1202`
     keeps it proportional, so a replacement must keep those proportions. */
  background-image: url("../img/lines-full-wide.webp");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  pointer-events: none;
}

/* Sub 1 — cards "Built to keep things in motion" */
.section-31n .cards {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.section-31n .card {
  background: var(--white);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 24px 48px rgba(61, 61, 71, 0.06);
}

.section-31n .card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.section-31n .card__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.section-31n .card__icon--pink {
  background: var(--pink);
}

.section-31n .card__icon--purple {
  background: var(--purple);
}

.section-31n .card__title {
  margin: 0 0 18px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--gray);
}

/* Card titles: width cap per card instead of hard <br> tags (22px at every
   breakpoint, so one value each). Scoped by position inside .cards. */
.section-31n .cards .card:nth-of-type(1) .card__title {
  max-width: 150px;
}

/* Store with / intention */
.section-31n .cards .card:nth-of-type(2) .card__title {
  max-width: 120px;
}

/* Resell & / Donate */
.section-31n .cards .card:nth-of-type(3) .card__title {
  max-width: 140px;
}

/* Sustainable / Disposal */
.section-31n .cards .card:nth-of-type(4) .card__title {
  max-width: 115px;
}

/* Lend & / Borrow */

/* Multi-line copy with intentional line breaks: the breaks come from the real
   newlines in the HTML source (`pre-line`) instead of <br> tags. A width cap
   can't reproduce them — the lines are independent sentences of unequal length,
   so no single width breaks after each one. Long lines still wrap normally. */
.section-31n .card__text {
  margin: 0;
  white-space: pre-line;
  font-size: 15px;
  line-height: 1.5;
  color: var(--gray);
}

/* Sub 2 — "Circularity isn't a campaign" (photo card + purple card) */
.section-31n .split {
  position: relative;
  z-index: 1;
  /* cards on top of the dotted line */
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ---- Photo card (left): photo + dark overlay (transparent → #4a4a4a) ---- */
.section-31n .split__photo {
  position: relative;
  min-height: 448px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  /* IMAGE: assets/img/image-sub-section-2-section-2-sustainabiliy.webp — aerial view of
     a forest with a river shaped like recycling arrows. The gradient on top
     (transparent → dark grey) ensures the white text below stays readable. */
  background-image:
    linear-gradient(180deg, rgba(74, 74, 74, 0) 0%, rgba(74, 74, 74, 0.92) 100%),
    url("../img/image-sub-section-2-section-2-sustainabiliy.webp");
  background-size: cover, cover;
  background-position: center, center;
  color: var(--white);
}

.section-31n .split__photo-inner {
  padding: 40px;
}

.section-31n .split__headline {
  margin: 0 0 20px;
  max-width: 200px;
  /* We don't / offset impact. / We prevent it. */
  font-size: 30px;
  line-height: 1.12;
  font-weight: 600;
}

.section-31n .split__text {
  margin: 0;
  white-space: pre-line;
  /* see the note on .card__text above */
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.9;
}

/* ---- Purple card (right) ---- */
.section-31n .split__panel {
  position: relative;
  border-radius: 18px;
  background: var(--purple);
  color: var(--white);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
}

.section-31n .split__mark {
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: 0.55;
  margin-bottom: 40px;
}

.section-31n .panel__label {
  margin: 0 0 20px;
  font-size: 17px;
  font-weight: 600;
}

.section-31n .panel__list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.section-31n .panel__list li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.4;
}

.section-31n .panel__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white);
}

.section-31n .panel__note {
  margin: 0 0 24px;
  max-width: 228px;
  /* This isn't about neutralizing damage. / It's about avoiding it. */
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.72;
}

.section-31n .panel__punch {
  margin: auto 0 0;
  font-size: 20px;
  font-weight: 600;
}

/* Sub 3 — "Impact you can see" (stat cards) */
.section-31n .stats {
  margin: 56px auto 0;
  max-width: 940px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.section-31n .stat {
  background: var(--white);
  border-radius: 18px;
  padding: 45px 24px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* icon resting directly on top of the label, at the bottom */
  gap: 10px;
  height: 250px;
  width: 244px;
}

.section-31n .stat__icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.section-31n .stat__label {
  margin: 0;
  font-size: 19px;
  color: var(--purple);
  font-weight: 500;
}

.section-31n .closing {
  margin: 40px 0 0;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  color: var(--purple);
}

/* Section 31n — mobile (<= 900px): everything stacks in 1 column. */
@media (max-width: 900px) {
  .section-31n {
    padding-block: 64px;
  }

  .section-31n .container {
    padding-inline: 40px;
    height: auto;
  }

  .section-31n .circ-line {
    top: calc(0vw + var(--loop-gap));
  }

  .section-31n .sub+.sub {
    margin-top: 72px;
  }

  /* same breaks at the smaller sizes */
  .section-31n .s-title {
    font-size: 28px;
    max-width: 262px;
  }

  .section-31n .s-title--circ {
    max-width: 378px;
  }

  .section-31n .cards,
  .section-31n .split,
  .section-31n .stats {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .section-31n .card {
    padding: 28px 24px;
  }

  .section-31n .split__photo {
    min-height: 537px;
  }

  .section-31n .split__photo-inner {
    padding: 32px;
  }

  .section-31n .split__headline {
    font-size: 26px;
    max-width: 175px;
    /* keeps the same breaks at the smaller size */
  }

  .section-31n .split__panel {
    padding: 36px 32px;
  }

  .section-31n .stat {
    min-height: 0;
    width: auto;
  }

  .section-31n .stat__icon {
    margin-bottom: 24px;
  }
}

/* ---- Fine-tuning of the arc's vertical position on narrower screens.
   Descending order of max-width so the smaller breakpoints override. ---- */
@media (max-width: 589px) {
  .section-31n .circ-line {
    top: calc(6vw + var(--loop-gap));
  }
}

@media (max-width: 513px) {
  .section-31n .circ-line {
    top: calc(10vw + var(--loop-gap));
  }
}

@media (max-width: 459px) {
  .section-31n .circ-line {
    top: calc(16vw + var(--loop-gap));
  }
}

@media (max-width: 408px) {
  .section-31n .circ-line {
    top: calc(27vw + var(--loop-gap));
  }
}


/* ===== section-33k.css ===== */
/* SECTION 33k — We store stories, not just objects  (copy + photo collage) Self-contained: to reuse, copy the <section class="section-33k"> block and
   link this file. Every rule is scoped under `.section-33k`. */

.section-33k,
.section-33k *,
.section-33k *::before,
.section-33k *::after {
  box-sizing: border-box;
}

/* Background: color/linear gradient (#D41357 → #EF226A) from Figma. */
.section-33k {
  min-height: 652px;
  /* desktop height; shell (gradient etc.) is shared via .hero-* */
}

/* Watermark ::before is shared via `.wm` (css/shared.css). */

.section-33k>.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1184px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* .inner (two-column, base + <=900 stacking) is shared via `.split-hero`. */

/* Text block — left half, vertically centered. */
.section-33k .content {
  max-width: 460px;
}

/* .title (base 48px) is shared via `.hero-title` (css/shared.css).
   Width cap instead of hard <br> tags ("We store" / "stories, not" /
   "just objects."); second value in the <= 900px block (34px). */
.section-33k .title {
  max-width: 300px;
}

.section-33k .text {
  margin: 28px 0 0;
  max-width: 393px;
  font-size: 20px;
  line-height: 1.55;
  opacity: 0.92;
}

/* ----- Photo collage (right half) -----
   3 photos: a tall one on the left (2 rows) + two landscapes stacked on the
   right. DOM order: top-right, tall, bottom-right — so mobile stacks them like
   in the layout (phone → mother+child → delivery). */
.section-33k .collage {
  flex: none;
  width: 600px;
  max-width: 52%;
  display: grid;
  grid-template-columns: 0.87fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}

.section-33k .collage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* IMAGE: assets/img/image-1-section-3-about.webp — mother and child (portrait, tall column). */
.section-33k .collage .photo--tall {
  grid-column: 1;
  grid-row: 1 / span 2;
}

/* IMAGE: assets/img/image-2-section-3-about.webp — hand with the dingx app (top-right). */
.section-33k .collage .photo--a {
  grid-column: 2;
  grid-row: 1;
}

/* IMAGE: assets/img/image-3-section-3-about.webp — doorstep delivery (bottom-right). */
.section-33k .collage .photo--b {
  grid-column: 2;
  grid-row: 2;
}

/* Section 33k — stacked (<= 900px): text on top, photos below (1 column) */
@media (max-width: 900px) {
  .section-33k>.container {
    padding-inline: 40px;
  }

  .section-33k {
    min-height: 0;
  }

  .section-33k::before {
    width: 420px;
    height: 320px;
  }

  .section-33k .content {
    max-width: none;
  }

  .section-33k .title {
    font-size: 34px;
    max-width: 210px;
    /* keeps the same breaks at the smaller size */
  }

  .section-33k .text {
    max-width: none;
    font-size: 17px;
  }

  /* collage becomes 1 column; photos in natural DOM flow at natural height */
  .section-33k .collage {
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 20px;
  }

  .section-33k .collage .photo--tall,
  .section-33k .collage .photo--a,
  .section-33k .collage .photo--b {
    grid-column: auto;
    grid-row: auto;
  }

  .section-33k .collage img {
    height: auto;
  }
}


/* ===== section-34f.css ===== */
/* SECTION 34f — "We let go too soon"  (two-column: title+photo | text)
   Self-contained. Copy the <section class="section-34f"> block and link this
   file to reuse. Collapses to one column on mobile. */

.section-34f,
.section-34f *,
.section-34f *::before,
.section-34f *::after {
  box-sizing: border-box;
}

.section-34f {
  position: relative;
  overflow: hidden;
  padding-block: 80px;
  background-color: var(--pink);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--white);
}

/* Watermark ::before is shared via `.wm` (css/shared.css). */
.section-34f .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1184px;
  margin-inline: auto;
  padding-inline: 24px;
}

.section-34f .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* Width caps instead of hard <br> tags; the title drops to 40px at <= 900px, so
   it gets a second value in that block. */
.section-34f .title {
  margin: 0 0 40px;
  max-width: 290px;
  /* We let go / too soon. */
  font-size: 56px;
  line-height: 1.05;
  font-weight: 600;
}

/* IMAGE: assets/img/section-3.webp — photo (child putting the teddy bear in the box).
   To change it, replace the file keeping the name, or adjust the src in the HTML. */
.section-34f .photo {
  display: block;
  max-width: 100%;
  height: auto;
}

.section-34f .text {
  padding-top: 24px;
  font-size: 20px;
  line-height: 1.5;
}

.section-34f .text p {
  margin: 0 0 28px;
}

/* "The result? Premature disposal. / Unnecessary waste. Broken cycles." — width
   cap instead of the hard <br>; 340px holds at 20px on every breakpoint. */
.section-34f .text p:nth-of-type(3) {
  max-width: 340px;
}

/* Intentional line break kept as a real newline in the HTML source (`pre-line`)
   instead of a <br>: no width can reproduce it (the lines are independent
   sentences and the longer one comes second). Long lines still wrap normally.
   Careful: the source formatting of this element is content now. */
.section-34f .text p:nth-of-type(2),
.section-34f .closing {
  white-space: pre-line;
}

.section-34f .closing {
  margin-top: 56px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
}

/* Section 34f — mobile (<= 900px) */
@media (max-width: 900px) {
  .section-34f .container {
    padding-inline: 40px;
  }

  /* smaller watermark on mobile */
  .section-34f::before {
    width: 420px;
    height: 320px;
  }

  .section-34f .inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .section-34f .title {
    font-size: 40px;
    max-width: 210px;
    /* keeps the same break at the smaller size */
  }

  .section-34f .text {
    padding-top: 0;
  }

  .section-34f .closing {
    margin-top: 32px;
  }
}


/* ===== section-36y.css ===== */
/* SECTION 36y — Pricing questions, answered  (FAQ accordion)
   White background, centered title, 4 FAQ items as "pills" that open
   (native accordion <details>/<summary>, no JS) and a "View full FAQ" button.
   Self-contained: to reuse, copy the <section class="section-36y"> block and
   link this file. Every rule is scoped under `.section-36y`. */

.section-36y,
.section-36y *,
.section-36y *::before,
.section-36y *::after {
  box-sizing: border-box;
}

.section-36y {
  padding-block: 72px;
  background-color: var(--white);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--gray);
}

/* low-priority reset (`:where` adds 0 specificity) */
.section-36y :where(a) {
  text-decoration: none;
  color: inherit;
}

/* ----- List of questions ----- */
.section-36y .faq {
  max-width: 600px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* when open, becomes a rounded rectangle to fit the answer */
.section-36y .faq-item[open] {
  border-radius: 24px;
}

.section-36y .faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 28px;
  cursor: pointer;
  font-size: 17px;
  color: var(--gray);
  list-style: none;
  /* removes the default <summary> marker */
}

/* removes the default triangle (Safari/Chrome) */
.section-36y .faq-q::-webkit-details-marker {
  display: none;
}

/* chevron rotation on open (base chevron styles are in .faq-section, shared) */
.section-36y .faq-item[open] .faq-chevron {
  transform: translateY(2px) rotate(225deg);
}

/* ----- Answer ----- */
.section-36y .faq-a {
  padding: 0 28px 22px;
}

/* ----- Button ----- */
.section-36y .cta {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

/* Hover/press motion is shared — see css/shared.css. */
.section-36y .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  padding: 18px 34px;
  font-size: 17px;
  color: var(--white);
  background-color: var(--pink);
}

/* Section 36y — mobile (<= 600px) */
@media (max-width: 600px) {
  .section-36y {
    padding-block: 48px;
  }

  .section-36y .faq-q {
    padding: 15px 22px;
    font-size: 16px;
  }

  .section-36y .faq-a {
    padding: 0 22px 20px;
  }
}

@media (max-width: 900px) {
  .section-36y .container {
    padding-inline: 40px;
  }
}


/* ===== section-38x.css ===== */
/* SECTION 38x — "Start with one" (purple CTA band + watermark)
   Self-contained. Copy the <section class="section-38x"> block and link this
   file to reuse. Solid purple band with a faint watermark; centered heading
   and a white "Pricing" pill. */

.section-38x,
.section-38x *,
.section-38x *::before,
.section-38x *::after {
  box-sizing: border-box;
}

/* IMAGE (background): assets/img/watermark-2.webp (1920x537) — watermark of the band
   (desktop). Mobile version swapped further below (watermark-3.webp).
   To change it, replace the file keeping the name, or adjust the path. */
.section-38x {
  height: 537px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--purple);
  background-image: url("../img/watermark-2.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--white);
}

/* low-priority reset (`:where` adds 0 specificity) */
.section-38x :where(a) {
  text-decoration: none;
  color: inherit;
}



.section-38x .title {
  margin: 0 auto 36px;
}

/* Width caps instead of hard <br> tags: the copy wraps naturally inside the cap.
   Per-page opt-in, since each page's heading is different. The title drops to
   30px at <= 900px, so each modifier gets a second value down in that block. */
.section-38x--title-w390 .title {
  max-width: 390px;
  /* store: Keep what matters. / Let go of the rest. */
}

/* services: "Start with one." / "Add more when it makes sense." — the second
   line is the longer one, so no width works; the break is a real newline in the
   HTML source. Opt-in, because the other pages using this section don't need it. */
.section-38x--preline .title {
  white-space: pre-line;
}

.section-38x--title-w580 .title {
  max-width: 580px;
  /* about, additional-services, locations: Take care of your belongings / every step of the way. */
}

/* Hover/press motion is shared — see css/shared.css. */
.section-38x .btn {
  color: var(--purple);
}

/* Group of buttons (when the band has more than one CTA). New class: doesn't
   affect the pages that use the 38x with a single .btn. */
.section-38x .actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* Outlined button ("ghost"): transparent background + white border. box-sizing
   border-box keeps the same height as the filled .btn. */
.section-38x .btn--ghost {
  background-color: transparent;
  color: var(--white);
  border: 2px solid var(--white);
}

/* Section 38x — mobile (<= 900px) */
@media (max-width: 900px) {

  /* IMAGE (background): assets/img/watermark-3.webp (388x260) — watermark on mobile.
     To change it, replace the file keeping the name, or adjust the path. */
  .section-38x {
    height: 546px;
    background-image: url("../img/watermark-3.webp");
    background-position: center bottom;
    background-size: contain;
  }

  .section-38x .title {
    font-size: 30px;
    margin-bottom: 32px;
  }

  /* same breaks at the smaller size */
  .section-38x--title-w390 .title {
    max-width: 292px;
  }

  .section-38x--title-w580 .title {
    max-width: 430px;
  }
}


/* ===== section-40b.css ===== */
/* SECTION 40b — Learn more about dingx  (title + 3 buttons, white background)
   Two decorative dotted lines flank the title: one glued to the LEFT
   edge (lines-center-left) and another on the RIGHT (lines-center-right).
   Both use the same CLAMP scheme as the other sections: on wide they stay glued
   to the edge and, as the screen narrows, they slide off stopping at a sliver.
   Self-contained: to reuse, copy the <section class="section-40b"> block and
   link this file. Every rule is scoped under `.section-40b`. */

.section-40b,
.section-40b *,
.section-40b *::before,
.section-40b *::after {
  box-sizing: border-box;
}

.section-40b {
  position: relative;
  /* anchor for the lines */
  overflow: hidden;
  /* clips the sliver that slides off + trims the 100vw */
  background-color: var(--white);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  padding-block: 100px 110px;
}

/* ----- Title container (full screen width) + lines inside -----
   The lines are positioned relative to this container and vertically centered
   over the title, so they follow the title's height automatically
   (no magic `top`). Since the container is the width of the screen, the lines glued
   to the edges land exactly on the edges of the screen. */
.section-40b .title-row {
  position: relative;
  width: 100%;
  height: 262px;
  display: flex;
  align-items: center;
  /* vertically centers the title */
  justify-content: center;
  /* horizontally centers the title */
  text-align: center;
}

/* ----- Decorative lines (clamp slide-out on each edge) ----- */
.section-40b .lines {
  position: absolute;
  height: 150px;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

/* IMAGE: assets/img/lines-center-left.webp — dotted line on the left, aligned to the TOP.
   Anchored to the CENTER: the inner end (right, near the title) stays fixed at
   ~160px to the left of center; the outer end extends to the left and is
   trimmed by the section's overflow. (offset tunable) */
.section-40b .lines--left {
  top: 94px;
  right: calc(50% + 160px);
  width: 794px;
  background-image: url("../img/lines-center-left.webp");
  background-position: right center;
}

/* IMAGE: assets/img/lines-center-right.webp — dotted line (with the dingx knot) on the right,
   aligned to the BASE. Anchored to the CENTER: inner end (left) fixed at ~160px to
   the right of center; outer end extends to the right and is trimmed. */
.section-40b .lines--right {
  bottom: 0;
  left: calc(50% + 160px);
  width: 819px;
  background-image: url("../img/lines-center-right.webp");
  background-position: left center;
  margin-left: 10px;
}

/* ----- Content (above the lines) ----- */
.section-40b .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1184px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Title sits BETWEEN the lines (one on each side). It comes after them in the DOM,
   so it paints on top if any end touches — no need for z-index. */
/* Width cap instead of a hard <br> ("Learn more" / "about dingx.");
   second value in the <= 900px block (34px). */
.section-40b .title {
  margin: 0;
  max-width: 330px;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--gray-2);
}

.section-40b .actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 56px;
}

/* pill buttons. Hover/press motion is shared — see css/shared.css (each color
   variant inverts to white + a ring in its own color). */
.section-40b .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 176px;
  padding: 20px 40px;
  border-radius: 999px;
  color: var(--white);
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.section-40b .btn--pink {
  background-color: var(--pink);
}

.section-40b .btn--purple {
  background-color: var(--purple);
}

.section-40b .btn--grey {
  background-color: var(--gray-2);
}

/* Section 40b — mobile (<= 900px): smaller title, stacked buttons */
@media (max-width: 900px) {
  .section-40b .container {
    padding-inline: 40px;
  }

  .section-40b {
    padding-block: 10px 80px;
  }

  .section-40b .title {
    font-size: 34px;
    max-width: 240px;
    /* keeps the same break at the smaller size */
  }

  .section-40b .actions {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 44px;
  }

  .section-40b .btn {
    min-width: 200px;
  }
}


/* ===== section-41h.css ===== */
/* SECTION 41h — "One platform"  (heading + 4-card grid, wave background)
   Self-contained. Copy the <section class="section-41h"> block and link this
   file to reuse. Grid: 4 cols -> 2 cols (<=1024px) -> 1 col (<=560px). */

.section-41h,
.section-41h *,
.section-41h *::before,
.section-41h *::after {
  box-sizing: border-box;
}

/* IMAGE: assets/img/lines-full-wide-5.webp — decorative band (wave) in the background.
   To change it, replace the file keeping the name, or adjust the path. */
.section-41h {
  padding-top: 130px;
  padding-bottom: 80px;
  background-color: var(--white);
  background-image: url("../img/lines-full-wide-5.webp");
  background-repeat: no-repeat;
  background-position: center 60px;
  background-size: 100% auto;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
}

/* low-priority reset (`:where` adds 0 specificity) */
.section-41h :where(ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ----- Heading block ----- */
.section-41h .head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}

/* Intentional line break kept as a real newline in the HTML source (`pre-line`)
   instead of a <br>: no width can reproduce it (the lines are independent
   sentences and the longer one comes second). Long lines still wrap normally.
   Careful: the source formatting of this element is content now. */
.section-41h .title {
  margin: 0 0 28px;
  white-space: pre-line;
  color: var(--pink);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 600;
}

/* Width cap instead of the hard <br> ("Not a mover. …" / "One system that
   connects it all."); the <= 900px block needs its own value. */
.section-41h .subtitle {
  /* `auto` inline margins are required: the width cap makes this a 450px box, and
     the parent's text-align only centers the text INSIDE it, not the box itself. */
  margin: 0 auto;
  max-width: 450px;
  color: var(--gray);
  font-size: 21px;
  line-height: 1.5;
}

.section-41h .subtitle .strong {
  color: var(--gray);
  font-weight: 600;
}

/* ----- Cards grid ----- */
/* This section's 4-card row needs a wider shell than the shared 1184px container:
   4 x 305px + 3 x 20px gap = 1280px of content, which is exactly a 1328px container with
   its 24px padding. section-17q (also a card row) already does this — 41h was missing it,
   which is why the cards ran off the right edge. */
.section-41h>.container {
  max-width: 1328px;
}

.section-41h .cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.section-41h .card {
  display: flex;
  flex-direction: column;
  background-color: var(--gray-6);
  border-radius: 24px;
  overflow: hidden;
  /* `width: 305px` here was the bug: a fixed width inside `repeat(4, 1fr)` forces every
     track to 305px, so the row demanded 1280px no matter how narrow the screen got and
     spilled to the right. Filling the track instead, capped at the design width, gives
     exactly 305px once the container reaches 1328px and shrinks gracefully below it. */
  width: 100%;
  max-width: 305px;
}

/* IMAGES: assets/img/card-collect.webp, card-store.webp, card-manage.webp, card-support.webp
   — photos at the top of each card (one per card, defined in the HTML).
   To change them, replace the files keeping the names, or adjust the src. */
.section-41h .card-image {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}

.section-41h .card-body {
  padding: 28px 26px 36px;
}

/* IMAGES: assets/img/icon-collect.webp, icon-store.webp, icon-manage.webp, icon-support.webp
   — icons inside each card (defined in the HTML).
   To change them, replace the files keeping the names, or adjust the src. */
.section-41h .card-icon {
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 24px;
}

/* Card title caps instead of hard <br> tags — 26px at every breakpoint. */
.section-41h .cards .card:nth-of-type(1) .card-title {
  max-width: 115px;
}

/* We / Collect */
.section-41h .cards .card:nth-of-type(2) .card-title {
  max-width: 104px;
}

/* We / Store */
.section-41h .cards .card:nth-of-type(3) .card-title {
  max-width: 130px;
}

/* You / Manage */
.section-41h .cards .card:nth-of-type(4) .card-title {
  max-width: 160px;
}

/* Supporting / Line */

.section-41h .card-title {
  margin: 0 0 20px;
  color: var(--pink);
  font-size: 26px;
  line-height: 1.1;
  font-weight: 600;
}

.section-41h .card-text {
  margin: 0;
  color: var(--gray);
  font-size: 16px;
  line-height: 1.5;
}

/* Section 41h — responsive */
@media (max-width: 1024px) {
  .section-41h .cards {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }
}

@media (max-width: 900px) {
  .section-41h .container {
    padding-inline: 40px;
  }

  .section-41h .title {
    font-size: 32px;
  }

  .section-41h .subtitle {
    font-size: 21px;
    padding: 0 44px;
    /* 450px of text + the 88px of side padding (border-box), so the break stays
       in the same place as on desktop. */
    max-width: 538px;
  }
}

@media (max-width: 560px) {
  .section-41h .cards {
    grid-template-columns: 1fr;
  }
}


/* ===== section-42m.css ===== */
/* SECTION 42m — Storage that makes sense  (photo + copy on a pink gradient) Self-contained: to reuse, copy the <section class="section-42m"> block and
   link this file. Every rule is scoped under `.section-42m`. */

.section-42m,
.section-42m *,
.section-42m *::before,
.section-42m *::after {
  box-sizing: border-box;
}

/* Background: color/linear gradient (#4D25B4 → #7844FE) from Figma. */
.section-42m {
  min-height: 652px;
  /* desktop height; shell (gradient etc.) is shared via .hero-* */
}

/* Watermark ::before is shared via `.wm` (css/shared.css). */
/* .inner / .content / .text (base + <=1150 stacking) are shared via `.image-hero`. */

/* .title (base 48px) is shared via `.hero-title` (css/shared.css).
   Width cap instead of a hard <br>: the copy wraps naturally inside 375px
   ("Your items, at" / "your fingertips."). The stacked breakpoint below drops
   the title to 34px, so it gets its own cap there. */
.section-42m .title {
  max-width: 375px;
}

/* IMAGE: assets/img/image-section-2-manage.webp — app mockup (transparent PNG,
   portrait 932×1164, with the phone already tilted in the file itself).
   To change it, replace the file keeping the name, or adjust the src. */
.section-42m .photo {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  /* vertically centered */
  /* Image is PORTRAIT (taller than wide), so we limit by HEIGHT so the
     phone fills the section without stretching. With height 620px → ~496px wide,
     fitting in the left half without invading the text. Adjust the height here. */
  height: 620px;
  width: auto;
  object-fit: contain;
  object-position: center;
}

/* Section 42m — stacked (<= 1150px): text on top, photo below. */
@media (max-width: 1150px) {
  .section-42m {
    min-height: 0;
  }

  .section-42m .title {
    font-size: 34px;
    max-width: 265px;
    /* keeps the same break at the smaller size */
  }

  .section-42m .photo {
    position: static;
    transform: none;
    display: block;
    width: auto;
    height: 440px;
    /* portrait: limits by height when stacked too */
    max-width: 100%;
    margin: 32px auto 0;
  }
}

@media (max-width: 900px) {
  .section-42m>.container {
    padding-inline: 40px;
  }
}


/* ===== section-45k.css ===== */
/* SECTION 45k — Questions & answers  (full FAQ accordion)
   Vertical gradient background (White at the top → soft blue-grey at the
   bottom, Gray 5 at 50%), centered title and 12 FAQ items as
   "pills" that open (native accordion <details>/<summary>, no JS).
   Self-contained: to reuse, copy the <section class="section-45k"> block and
   link this file. Every rule is scoped under `.section-45k`.
   Derived from section-36y (the pricing summary FAQ). */

.section-45k,
.section-45k *,
.section-45k *::before,
.section-45k *::after {
  box-sizing: border-box;
}

.section-45k {
  padding-block: 72px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(217, 228, 234, 0.5) 100%);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--gray);
}

/* ----- List of questions ----- */
.section-45k .faq {
  max-width: 844px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* when open, becomes a rounded rectangle to fit the answer */
.section-45k .faq-item[open] {
  border-radius: 24px;
}

.section-45k .faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 28px;
  cursor: pointer;
  font-size: 17px;
  color: var(--gray);
  list-style: none;
  /* removes the default <summary> marker */
}

/* removes the default triangle (Safari/Chrome) */
.section-45k .faq-q::-webkit-details-marker {
  display: none;
}

/* chevron rotation on open (base chevron styles are in .faq-section, shared) */
.section-45k .faq-item[open] .faq-chevron {
  transform: translateY(2px) rotate(225deg);
}

/* ----- Answer ----- */
.section-45k .faq-a {
  padding: 0 28px 22px;
}

/* Section 45k — mobile (<= 600px) */
@media (max-width: 600px) {
  .section-45k {
    padding-block: 48px;
  }

  .section-45k .faq-q {
    padding: 14px 22px;
    font-size: 16px;
  }

  .section-45k .faq-a {
    padding: 0 22px 20px;
  }
}

@media (max-width: 900px) {
  .section-45k .container {
    padding-inline: 40px;
  }
}


/* ===== section-47s.css ===== */
/* SECTION 47s — "More than storage." (services slider with tabs)
   Visually based on section-64b (pink background + watermark), but taller
   (1002px) and with a single central block: a SLIDER of 5 slides. Each slide
   has a text card (520×572) + an image (736×572), navigable by tabs at the
   top and by the side arrows. JS: assets/js/main.js. Scoped in `.section-47s`. */

.section-47s,
.section-47s *,
.section-47s *::before,
.section-47s *::after {
  box-sizing: border-box;
}

/* Background: pink gradient (#D41357 → #EF226A), same as the Store family. */
.section-47s {
  position: relative;
  overflow: hidden;
  min-height: 1002px;
  padding: 72px 25px;
  background-color: var(--dark-pink);
  background-image: linear-gradient(90deg, #d41357 0%, #ef226a 100%);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--white);
}

/* Watermark ::before is shared via `.wm` (css/shared.css, opacity 0.22);
   only the section-specific left:0 anchor stays here. */
.section-47s::before {
  left: 0;
}

.section-47s>.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1328px;
  margin-inline: auto;
  padding-inline: 24px;
}

.section-47s .title {
  margin: 0 0 40px;
  text-align: center;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 600;
}

/* ----- Tabs ----- */
.section-47s .slider-tabs {
  list-style: none;
  margin: 0 auto 40px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* The tabs are a section-specific control (not one of the site's CTA pills),
   so their interaction stays here instead of the shared button block. */
.section-47s .slider-tab {
  padding: 12px 26px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease,
    border-color 0.25s ease, transform 0.25s ease;
}

/* Hover: clearly visible, but deliberately NOT the selected look — it stays a
   translucent white veil with WHITE text, while the selected tab is a SOLID
   white pill with pink text. The 2px lift is the same one every button on the
   site uses. TUNABLE: raise/lower the 0.3 alpha to taste. */
.section-47s .slider-tab:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: var(--white);
  transform: translateY(-2px);
}

.section-47s .slider-tab:active {
  transform: translateY(0);
}

/* Selected tab (kept AFTER :hover so hovering the selected one does not turn it
   back into the translucent state — it only gets the lift). */
.section-47s .slider-tab.is-active {
  background: var(--white);
  color: var(--pink);
  border-color: var(--white);
}

/* ----- Slider ----- */
.section-47s .slider {
  position: relative;
  max-width: 1280px;
  /* 520 + 24 gap + 736 */
  margin-inline: auto;
}

.section-47s .slide {
  display: none;
  gap: 24px;
  align-items: stretch;
  min-height: 572px;
}

.section-47s .slide.is-active {
  display: flex;
}

/* ----- Slide change: only the TEXT ITSELF (icon, title, lead, body) fades in
   and glides from the side it is coming from. The white card and the image do
   NOT move — they swap straight away. Only `opacity` and `transform` animate,
   so the layout is already final on the first frame and the mobile arrow
   positioning in assets/js/main.js still measures the right card height.
   assets/js/main.js puts `is-from-next` (moving forward) or `is-from-prev`
   (moving back) on the slide. TUNABLE: the 0.45s duration and the 28px
   travel. ----- */
@keyframes slide-47s-from-next {
  from {
    opacity: 0;
    transform: translateX(28px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes slide-47s-from-prev {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.section-47s .slide.is-active.is-from-next .slide-text>* {
  animation: slide-47s-from-next 0.45s ease-out;
}

.section-47s .slide.is-active.is-from-prev .slide-text>* {
  animation: slide-47s-from-prev 0.45s ease-out;
}

/* Text card (white) — 520×572 */
.section-47s .slide-text {
  flex: 0 1 520px;
  min-width: 0;
  background: var(--white);
  border-radius: 24px;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--gray);
}

.section-47s .slide-icon {
  display: block;
  margin-bottom: 20px;
}

.section-47s .slide-title {
  margin: 0 0 20px;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--pink);
}

/* Titles that need a specific line break: width caps instead of hard <br> tags,
   so the copy still reflows. Measured in canada-type-gibson 40px/600; each value
   also holds at the 32px mobile size, so no second value is needed.
   Scoped per slide (the ids are the tabpanel ids in the HTML). */
.section-47s #svc-slide-0 .slide-title {
  max-width: 300px;
}

/* Assembly & / Disassembly */
.section-47s #svc-slide-3 .slide-title {
  max-width: 280px;
}

/* Sell, lend or / donate */
.section-47s #svc-slide-4 .slide-title {
  max-width: 280px;
}

/* Sustainable / Disposal */

.section-47s .slide-lead {
  margin: 0 0 20px;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--gray);
}

.section-47s .slide-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray);
}

/* Image — 736×572 */
.section-47s .slide-media {
  min-width: 0;
  border-radius: 24px;
  overflow: hidden;
}

.section-47s .slide-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 572px;
  object-fit: cover;
  object-position: center;
}

/* ----- Prev/next arrows ----- */
.section-47s .slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--purple);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.2s ease;
}

.section-47s .slider-arrow:hover {
  background: var(--dark-purple);
}

/* chevron drawn in CSS (rotated corner) */
.section-47s .slider-arrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--white);
  border-right: 2px solid var(--white);
}

.section-47s .slider-arrow--prev {
  left: -22px;
}

.section-47s .slider-arrow--prev::before {
  transform: rotate(-135deg);
  margin-left: 4px;
}

.section-47s .slider-arrow--next {
  right: -22px;
}

.section-47s .slider-arrow--next::before {
  transform: rotate(45deg);
  margin-right: 4px;
}

/* Section 47s — mobile (<= 900px): stacked slide (card on top, image below) */
@media (max-width: 900px) {
  .section-47s::before {
    height: 268px;
  }

  .section-47s>.container {
    padding-inline: 40px;
    padding-bottom: 90px;
  }

  .section-47s .title {
    font-size: 30px;
    margin-bottom: 28px;
  }

  .section-47s .slider-tabs {
    gap: 10px;
    margin-bottom: 28px;
  }

  .section-47s .slider-tab {
    padding: 10px 18px;
    font-size: 13px;
  }

  .section-47s .slide {
    flex-direction: column;
    min-height: 0;
    gap: 20px;
  }

  .section-47s .slide-text {
    flex: 1 1 auto;
    width: 100%;
    padding: 32px 24px;
  }

  .section-47s .slide-title {
    font-size: 32px;
  }

  .section-47s .slide-lead {
    font-size: 18px;
  }

  /* Image fully visible and undistorted: full width + automatic height,
     preserving the aspect ratio (736×573) as the screen narrows. */
  .section-47s .slide-media {
    width: 100%;
    min-height: 0;
    height: auto;
  }

  .section-47s .slide-media img {
    width: 100%;
    min-height: 0;
    height: auto;
    object-fit: contain;
  }

  /* Arrows vertically centered on the TEXT CARD. Since the card height changes
     per slide, the real `top` is computed in assets/js/main.js (measures the active card).
     The value below is just a fallback if the JS doesn't run. */
  .section-47s .slider-arrow {
    top: 30%;
    width: 38px;
    height: 38px;
  }

  /* half outside / half inside the card border (38px ÷ 2 = 19px), same as desktop */
  .section-47s .slider-arrow--prev {
    left: -19px;
  }

  .section-47s .slider-arrow--next {
    right: -19px;
  }
}


/* ===== section-49n.css ===== */
/* SECTION 49n — Moving, made simple  (photo + copy on a purple gradient)
   Self-contained: to reuse, copy the <section class="section-49n"> block and
   link this file. Every rule is scoped under `.section-49n`. */

.section-49n,
.section-49n *,
.section-49n *::before,
.section-49n *::after {
  box-sizing: border-box;
}

/* Background: linear color/gradient (#4D25B4 → #7844FE) from Figma. */
.section-49n {
  min-height: 652px;
  /* desktop height; shell (gradient etc.) is shared via .hero-* */
}

/* Watermark ::before is shared via `.wm` (css/shared.css). */
.section-49n .inner {
  position: relative;
  min-height: 652px;
  display: flex;
  align-items: center;
}

/* Text block — right half, vertically centered. */
.section-49n .content {
  position: relative;
  z-index: 1;
  margin-left: 50%;
  max-width: 440px;
}

/* .title (base 48px) is shared via `.hero-title` (css/shared.css).
   Width cap instead of a hard <br>: the copy wraps naturally inside 317px. */
.section-49n .title {
  max-width: 317px;
}

.section-49n .text {
  margin: 28px 0 0;
  max-width: 360px;
  font-size: 20px;
  line-height: 1.55;
  opacity: 0.92;
}

/* IMAGE: assets/img/image-section-1-move.webp — dingx courier holding the box
   (transparent PNG, resting on the section base, on the left).
   To change it, replace the file keeping the name, or adjust the src. */
.section-49n .photo {
  position: absolute;
  left: 40px;
  bottom: 0;
  height: 600px;
  width: auto;
  object-fit: contain;
  object-position: bottom center;
}

/* Section 49n — mobile (<= 900px): text on top, photo below */
@media (max-width: 900px) {
  .section-49n>.container {
    padding-inline: 40px;
  }

  .section-49n {
    min-height: 0;
  }

  .section-49n::before {
    top: auto;
    bottom: 0;
    transform: none;
    width: 420px;
    height: 320px;
  }

  .section-49n .inner {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-block: 48px 0;
  }

  .section-49n .content {
    margin-left: 0;
    max-width: none;
  }

  .section-49n .title {
    font-size: 34px;
  }

  .section-49n .text {
    max-width: none;
    font-size: 17px;
  }

  .section-49n .photo {
    position: static;
    display: block;
    height: auto;
    width: 100%;
    max-width: 320px;
    margin: 32px auto 0;
  }
}


/* ===== section-51g.css ===== */
/* SECTION 51g — "Move only when you need to" (pink CTA band + watermark) Self-contained. Copy the <section class="section-51g"> block and link this
   file to reuse. Solid pink band with a faint watermark; centered heading and
   a white "Pricing" pill. */

.section-51g,
.section-51g *,
.section-51g *::before,
.section-51g *::after {
  box-sizing: border-box;
}

/* IMAGE (background): assets/img/watermark-4.webp — watermark of the band.
   To change it, replace the file keeping the name, or adjust the path. */
.section-51g {
  height: 537px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pink);
  background-image: url("../img/watermark-4.webp");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--white);
}

/* low-priority reset (`:where` adds 0 specificity) */
.section-51g :where(a) {
  text-decoration: none;
  color: inherit;
}



/* Width cap instead of a hard <br>: the copy wraps naturally inside 340px
   ("Move only when" / "you need to."). Mobile drops to 30px, so it gets its own
   cap further below. */
.section-51g .title {
  margin: 0 auto 36px;
  max-width: 340px;
}

/* Hover/press motion is shared — see css/shared.css. */
.section-51g .btn {
  color: var(--pink);
}

/* Section 51g — mobile (<= 900px) */
@media (max-width: 900px) {

  /* IMAGE (background): assets/img/watermark-4.webp — same watermark on mobile
     (section-38x used a separate mobile file). If you have a mobile
     version, change the path below. */
  .section-51g {
    height: 546px;
    background-position: center bottom;
    background-size: 190%;
  }

  .section-51g .title {
    font-size: 30px;
    margin-bottom: 32px;
    max-width: 255px;
    /* keeps the same break at the smaller size */
  }
}


/* ===== section-55m.css ===== */
/* SECTION 55m — "Control creates space" (pink CTA band + watermark) Self-contained: copy the <section class="section-55m"> block and link
   this file. Every rule is scoped under `.section-55m`. */

.section-55m,
.section-55m *,
.section-55m *::before,
.section-55m *::after {
  box-sizing: border-box;
}

/* IMAGE (background): assets/img/watermark-5.webp (1346x537) — watermark of the band
   (desktop). Mobile version swapped further below (watermark-3.webp).
   To change it, replace the file keeping the name, or adjust the path. */
.section-55m {
  height: 537px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pink);
  background-image: url("../img/watermark-5.webp");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: auto;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--white);
}

/* low-priority reset (`:where` adds 0 specificity) */
.section-55m :where(a) {
  text-decoration: none;
  color: inherit;
}



.section-55m .title {
  margin: 0 0 36px;
}

/* Width cap instead of a hard <br> — per-page opt-in, since the heading differs
   on every page that uses this section (contact / manage / faq).
   contact: Take care of your belongings / every step of the way. */
.section-55m--title-w550 .title {
  max-width: 550px;
}

/* faq: Can't find your answer? / We're here to help — 480px holds at 40px and at
   the 36px mobile size, so one value. */
.section-55m--title-w480 .title {
  max-width: 480px;
}

/* Hover/press motion is shared — see css/shared.css. */
.section-55m .btn {
  color: var(--pink);
}

/* Row with two buttons (Pricing + Contact us). Additive — the uses with a single
   button (faq/manage) don't have .actions and stay intact. */
.section-55m .actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.section-55m .btn--outline {
  background-color: transparent;
  color: var(--white);
  border: 2px solid var(--white);
}

/* Section 55m — mobile (<= 900px) */
@media (max-width: 900px) {

  /* IMAGE (background): assets/img/watermark-5.webp — watermark on mobile.
     To change it, replace the file keeping the name, or adjust the path. */
  .section-55m {
    height: 546px;
    background-image: url("../img/watermark-5.webp");
    background-position: center bottom;
    background-size: auto;
  }

  .section-55m .title {
    font-size: 36px;
    margin-bottom: 54px;
    padding: 0 18px;
  }

  .section-55m--title-w550 .title {
    max-width: 275px;
    /* keeps the same breaks at the smaller size */
  }

  /* buttons stacked and centered on mobile */
  .section-55m .actions {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}


/* ===== section-57k.css ===== */
/* SECTION 57k — "Why dingx is different"  (intro + benefits list)
   Self-contained. Copy the <section class="section-57k"> block and link this
   file to reuse. Two columns on desktop; single stacked column on mobile
   (the CTA moves to the bottom). */

.section-57k,
.section-57k *,
.section-57k *::before,
.section-57k *::after {
  box-sizing: border-box;
}

/* Background: linear color/gradient (#4D25B4 → #7844FE) — same as section-49n (move). */
.section-57k {
  position: relative;
  overflow: hidden;
  padding-block: 80px;
  background-color: var(--dark-purple);
  background-image: linear-gradient(to top right, #7844fe 0%, #4d25b4 100%);
  height: 740px;
  align-content: center;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--white);
}

/* Watermark ::before is shared via `.wm` (css/shared.css). */
/* low-priority reset (`:where` adds 0 specificity) */
.section-57k :where(a) {
  text-decoration: none;
  color: inherit;
}

/* low-priority reset (`:where` adds 0 specificity) */
.section-57k :where(ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-57k .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1184px;
  margin-inline: auto;
  padding-inline: 24px;
}

.section-57k .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.section-57k .intro {
  padding-left: 100px;
}

/* Width cap instead of a hard <br> ("Why dingx" / "is different");
   265px holds at every breakpoint. */
.section-57k .title {
  margin: 0 0 36px;
  max-width: 265px;
  font-size: 49px;
  line-height: 1.1;
  font-weight: 600;
  width: 100%;
}

/* ----- CTA button (outline pill with arrow) -----
   Hover/press motion is shared — see css/shared.css. */
.section-57k .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  padding: 14px 26px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.section-57k .btn--outline {
  background-color: transparent;
  color: var(--white);
  border: 2px solid var(--white);
}

.section-57k .cta {
  gap: 12px;
}

.section-57k .cta-arrow {
  width: 20px;
  height: 20px;
}

/* ----- Benefits list ----- */
.section-57k .list {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.section-57k .item {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* IMAGES: assets/img/hub-section-5.webp, cloud_done-section-5.webp,
   assistant_device-section-5.webp, webhook-section-5.webp, price_check-section-5.webp
   — one icon per list item (defined in the HTML).
   To change them, replace the files keeping the names, or adjust the src. */
.section-57k .icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.section-57k .text {
  font-size: 21px;
}

/* Section 57k — mobile (<= 900px): stack, CTA drops to the bottom */
@media (max-width: 900px) {
  .section-57k .container {
    padding-inline: 40px;
  }

  .section-57k {
    height: 821px;
  }

  /* smaller watermark on mobile — same as section-49n (move) */
  .section-57k::before {
    width: 420px;
    height: 320px;
  }

  .section-57k .inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: fit-content;
    max-width: 100%;
    text-align: left;
  }

  /* let intro's children flow directly in .inner so the CTA can move to the end */
  .section-57k .intro {
    display: contents;
  }

  .section-57k .title {
    order: 1;
  }

  .section-57k .list {
    order: 2;
  }

  .section-57k .cta {
    order: 3;
    align-self: stretch;
    justify-content: center;
  }

  .section-57k .item {
    justify-content: flex-start;
  }

  .section-57k .text {
    text-align: left;
  }
}


/* ===== section-58c.css ===== */
/* SECTION 58c — Services, when life asks for them  (copy + icon list, pink) Self-contained: to reuse, copy the <section class="section-58c"> block and
   link this file. Every rule is scoped under `.section-58c`. */

.section-58c,
.section-58c *,
.section-58c *::before,
.section-58c *::after {
  box-sizing: border-box;
}

/* Background: linear color/gradient (#D41357 → #EF226A) from Figma. */
.section-58c {
  min-height: 652px;
  /* desktop height; shell (gradient etc.) is shared via .hero-* */
}

/* Watermark ::before is shared via `.wm` (css/shared.css). */
.section-58c .inner {
  position: relative;
  z-index: 1;
  min-height: 652px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

/* Text block — left half, vertically centered. */
.section-58c .content {
  max-width: 460px;
}

/* .title (base 48px) is shared via `.hero-title` (css/shared.css).
   Width cap instead of a hard <br> on the Sustainability variant
   ("We let go" / "too soon."); second value in the <= 900px block (34px). */
.section-58c--reasons .title {
  max-width: 250px;
}

/* pricing: Services, / when life asks / for them. — second value in the
   <= 900px block (34px). */
.section-58c--title-w318 .title {
  max-width: 318px;
}

.section-58c .text {
  margin: 28px 0 0;
  max-width: 380px;
  font-size: 20px;
  line-height: 1.55;
  opacity: 0.92;
}

/* ----- Services list (right half) ----- */
.section-58c .services {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 480px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.section-58c .service {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Icons follow the site's standard: the width sits on the <img>, with no fixed
   height (same pattern as `.cards-section .card-icon img` in css/shared.css).
   44px matches the source files (45×45), so they are never upscaled. */
.section-58c .service-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-58c .service-icon img {
  display: block;
  width: 44px;
}

.section-58c .service-label {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

/* "--reasons" variant (Sustainability page):
   title on the left + text block on the right, aligned to the TOP, without icons.
   Additive rules — they don't affect the base use of section-58c (about/pricing). */
.section-58c--reasons .inner {
  align-items: flex-start;
  padding-block: 88px;
}

.section-58c--reasons .content {
  max-width: 320px;
}

.section-58c .reasons {
  width: 620px;
  max-width: 100%;
}

/* Multi-line copy with intentional line breaks: the breaks come from the real
   newlines in the HTML source (`pre-line`) instead of <br> tags. A width cap
   can't reproduce them — the lines are independent sentences of unequal length,
   so no single width breaks after each one. Long lines still wrap normally. */
.section-58c .reasons__text,
.section-58c .reasons__result {
  margin: 0;
  white-space: pre-line;
  font-size: 20px;
  line-height: 1.5;
  opacity: 0.95;
}

.section-58c .reasons__result {
  margin-top: 28px;
}

.section-58c .reasons__result strong {
  font-weight: 600;
  opacity: 1;
}

.section-58c .reasons__rhythm {
  margin: 72px 0 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
}

/* Section 58c — stacked (<= 900px): text on top, list below. */
@media (max-width: 900px) {
  .section-58c>.container {
    padding-inline: 40px;
  }

  .section-58c {
    min-height: 0;
  }

  .section-58c::before {
    width: 420px;
    height: 320px;
  }

  .section-58c .inner {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 40px;
    padding-block: 56px;
  }

  .section-58c .content {
    max-width: none;
  }

  .section-58c--reasons .title {
    max-width: 180px;
    /* keeps the same break at the smaller size */
  }

  .section-58c--title-w318 .title {
    max-width: 226px;
  }

  .section-58c .title {
    font-size: 34px;
  }

  .section-58c .text {
    max-width: none;
    font-size: 17px;
  }

  .section-58c .services {
    width: 100%;
    gap: 28px;
  }

  .section-58c .service-icon img {
    width: 40px;
  }

  .section-58c .service-label {
    font-size: 20px;
  }

  /* --reasons variant on mobile: stacks (title → text → rhythm). */
  .section-58c--reasons .content {
    max-width: none;
  }

  .section-58c .reasons {
    width: 100%;
  }

  .section-58c .reasons__text,
  .section-58c .reasons__result {
    font-size: 18px;
  }

  .section-58c .reasons__rhythm {
    margin-top: 56px;
    font-size: 24px;
  }
}


/* ===== section-58l.css ===== */
/* SECTION 58l — Where dingx is available  (title + text, pink + watermark)
   Clone of section-58c (--reasons variant) exclusive to the Locations page, so
   that tweaks on this page do NOT affect about/sustainability/pricing.
   Self-contained: to reuse, copy the <section class="section-58l"> block and
   link this file. Every rule is scoped under `.section-58l`. */

.section-58l,
.section-58l *,
.section-58l *::before,
.section-58l *::after {
  box-sizing: border-box;
}

/* Background: linear color/gradient (#D41357 → #EF226A) from Figma. */
.section-58l {
  min-height: 652px;
  /* desktop height; shell (gradient etc.) is shared via .hero-* */
}

/* Watermark ::before is shared via `.wm` (css/shared.css). */
.section-58l .inner {
  position: relative;
  z-index: 1;
  min-height: 652px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding-block: 88px;
}

/* Title block — left half. */
.section-58l .content {
  max-width: 320px;
}

/* Width cap instead of a hard <br> ("Where dingx is" / "available.").
   340px sits inside the valid window at both 43px and 34px, so one value. */
.section-58l .title {
  margin: 0;
  max-width: 340px;
  font-size: 43px;
  line-height: 1.1;
  font-weight: 600;
}

/* Text block — right half. */
.section-58l .reasons {
  width: 620px;
  max-width: 100%;
}

.section-58l .reasons__text {
  margin: 0;
  max-width: 523px;
  font-size: 28px;
  line-height: 1.5;
  opacity: 0.95;
}

/* Section 58l — stacked (<= 900px): title on top, text below. */
@media (max-width: 900px) {
  .section-58l {
    min-height: 0;
  }

  .section-58l>.container {
    padding-inline: 40px;
    height: 524px;
  }

  .section-58l::before {
    width: 420px;
    height: 320px;
  }

  .section-58l .inner {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 40px;
    padding-block: 56px;
  }

  .section-58l .content {
    max-width: none;
  }

  .section-58l .title {
    font-size: 34px;
  }

  .section-58l .reasons {
    width: 100%;
  }

  .section-58l .reasons__text {
    font-size: 18px;
  }
}


/* ===== section-61k.css ===== */
/* SECTION 61k — Our expansion roadmap  (title + dotted line + 3 cards)
   Exclusive to the Locations page. Background: vertical gradient D9E4EA(80%) → white.
   Two dotted lines (lines-left-2 / lines-right-2) flank the title,
   in the same CLAMP scheme as section-40b (about): anchored to the center, the
   inner tip stays fixed near the title and the outer one slides out, trimmed by
   `overflow: hidden`.
   Self-contained: copy the <section class="section-61k"> block and link this file.
   Every rule is scoped under `.section-61k`. */

.section-61k,
.section-61k *,
.section-61k *::before,
.section-61k *::after {
  box-sizing: border-box;
}

/* Background: vertical linear gradient (Figma: 0% D9E4EA 80% → 100% FFFFFF).
   The dotted lines that flank the title are their own elements
   (.lines--left / .lines--right), in the same clamp scheme as section-40b. */
.section-61k {
  position: relative;
  /* anchor for the lines */
  overflow: hidden;
  /* trims the part of the lines that slides out */
  background-color: var(--white);
  background-image: linear-gradient(180deg, rgba(217, 228, 234, 0.8) 0%, #ffffff 100%);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--gray);
  padding-block: 80px 104px;
  min-height: 1000px;
  align-content: center;
}

.section-61k>.container {
  width: 100%;
  max-width: 1184px;
  margin-inline: auto;
  padding-inline: 24px;
  min-height: 739px;
}

/* ---- Header: centered title, with a dotted line on each side ---- */
.section-61k .head {
  position: relative;
  /* anchor for the lines */
  text-align: center;
  padding-block: 56px 72px;
}

/* Decorative lines — clamp anchored to the CENTER: the inner tip (near the
   title) stays fixed ~240px from the center; the outer tip extends outward and is
   trimmed by the section's `overflow: hidden`. `--gap` (240px) moves it away from/closer to the
   title; `top`/`transform` raises/lowers the line. */
.section-61k .lines {
  --gap: 240px;
  position: absolute;
  top: 0%;
  transform: translateY(0%);
  height: 340px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* IMAGE: assets/img/lines-left-2.webp — line on the left (inner tip on the right). */
.section-61k .lines--left {
  right: calc(53% + var(--gap));
  width: 647px;
  background-image: url("../img/lines-left-2.webp");
}

/* IMAGE: assets/img/lines-right-2.webp (647×340) — line on the right (inner tip on the left). */
.section-61k .lines--right {
  top: 50%;
  left: calc(53% + var(--gap));
  width: 647px;
  background-image: url("../img/lines-right-2.webp");
  background-position: left center;
}

/* Title sits BETWEEN the lines; it comes after them in the DOM, so it paints on top. */
.section-61k .head__title {
  position: relative;
  margin: 0;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--gray);
}

/* ---- Grid of 3 cards ---- */
.section-61k .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 50px;
}

.section-61k .card {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(28, 34, 61, 0.08);
  padding: 36px 32px 40px;
  z-index: 1;
}

/* Card header: badge (colored circle + icon) + phase */
.section-61k .card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.section-61k .badge {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* IMAGE (icon): assets/img/watermark-7.webp — dingx mark inside the badge. */
.section-61k .badge img {
  display: block;
  width: 26px;
  height: auto;
}

.section-61k .badge--pink {
  background: var(--pink);
}

.section-61k .badge--purple {
  background: var(--purple);
}

.section-61k .badge--gray {
  background: var(--gray-4);
}

.section-61k .card__phase {
  font-size: 18px;
  font-weight: 500;
  color: var(--gray);
}

.section-61k .card__title {
  margin: 0 0 14px;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--gray);
}

.section-61k .card__sub {
  margin: 0 0 22px;
  font-size: 15px;
  font-style: italic;
  color: var(--gray-3);
}

.section-61k .card__text {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray);
}

/* ---- Lists (check ✓ or arrow →) ---- */
.section-61k .card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-61k .card__list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--gray);
}

.section-61k .card__list--check li::before {
  content: "\2713";
  /* ✓ */
  position: absolute;
  left: 0;
  color: var(--gray);
  font-weight: 600;
}

.section-61k .card__list--arrow li::before {
  content: "\2192";
  /* → */
  position: absolute;
  left: 0;
  color: var(--gray-3);
}

/* Section 61k — mobile (<= 900px): stacked cards. */
@media (max-width: 900px) {
  .section-61k>.container {
    padding-inline: 40px;
  }

  .section-61k {
    padding-block: 56px 72px;
  }

  .section-61k .cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .section-61k .card {
    padding: 30px 26px 34px;
  }

  .section-61k .card__title {
    font-size: 24px;
  }
}

/* Section 61k — narrow screens (<= 580px): brings the lines closer to the title and
   repositions the right line. */
@media (max-width: 580px) {
  .section-61k .lines--left {
    right: calc(36% + var(--gap));
  }

  .section-61k .lines--right {
    top: 42%;
    left: calc(36% + var(--gap));
  }
}

/* Section 61k — very narrow screens (<= 455px): brings the lines even closer. */
@media (max-width: 455px) {
  .section-61k .lines--right {
    left: calc(31% + var(--gap));
  }

  .section-61k .lines--left {
    right: calc(31% + var(--gap));
  }
}

/* Section 61k — <= 390px: fine-tuning of the lines. */
@media (max-width: 390px) {
  .section-61k .lines--right {
    left: calc(28% + var(--gap));
  }

  .section-61k .lines--left {
    right: calc(27% + var(--gap));
  }
}


/* ===== section-63m.css ===== */
/* SECTION 63m — "Who it's for"  (heading + two client cards + CTA)
   Self-contained. Copy the <section class="section-63m"> block and link this
   file to reuse. Two decorative line images sit behind the content, so the
   section is `position: relative` and the lines are absolutely positioned. */

.section-63m,
.section-63m *,
.section-63m *::before,
.section-63m *::after {
  box-sizing: border-box;
}

.section-63m {
  padding-block: 80px;
  position: relative;
  background-color: var(--white);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--gray);
}

/* low-priority reset (`:where` adds 0 specificity) */
.section-63m :where(a) {
  text-decoration: none;
  color: inherit;
}

.section-63m .wrap {
  width: 100%;
}

/* IMAGE: assets/img/lines-up-section-6.webp — decorative lines at the top (desktop).
   Mobile version swapped further below (lines-up-section-6-mobile.webp).
   To change it, replace the file keeping the name, or adjust the path. */
.section-63m .lines-top {
  width: 100%;
  height: 327px;
  background-image: url("../img/lines-up-section-6.webp");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  position: absolute;
  top: 209px;
}

/* IMAGE: assets/img/lines-down-section-6.webp — decorative lines at the base.
   To change it, replace the file keeping the name, or adjust the path. */
.section-63m .lines-bottom {
  background-image: url("../img/lines-down-section-6.webp");
  background-repeat: no-repeat;
  background-position: top;
  height: 145px;
  position: absolute;
  bottom: 130px;
  width: 100%;
  background-size: auto;
  align-self: center;
}

/* ----- Heading ----- */
.section-63m .head {
  text-align: center;
  padding-block: 40px;
}

.section-63m .eyebrow {
  margin: 0 0 14px;
  color: var(--pink);
  font-size: 24px;
  font-weight: 600;
}

/* Width cap instead of a hard <br> ("For you, for your family" / "and for your
   team."). Desktop-only element — `.title-mobile` takes over at <= 900px. */
.section-63m .title {
  /* `auto` inline margins are required: the width cap makes this a 640px box, and
     the parent's text-align only centers the text INSIDE it, not the box itself. */
  margin: 0 auto;
  max-width: 640px;
  color: var(--gray);
  font-size: 58px;
  line-height: 1.15;
  font-weight: 600;
}

/* alternate title used only on mobile (shorter line breaks) */
/* Intentional line break kept as a real newline in the HTML source (`pre-line`)
   instead of a <br>: no width can reproduce it (the lines are independent
   sentences and the longer one comes second). Long lines still wrap normally.
   Careful: the source formatting of this element is content now. */
.section-63m .title-mobile {
  margin: 0;
  white-space: pre-line;
  color: var(--gray);
  font-size: 58px;
  line-height: 1.15;
  font-weight: 600;
  display: none;
}

/* ----- Client cards (full-bleed centered row) ----- */
.section-63m .clients {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  /* Widened so the card can carry double the inner side padding without
     squeezing the text column — see `.client-body` below. */
  width: min(1216px, calc(100vw - 208px));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* No fixed height: the card follows its content. Both cards are grid items in the
   same row, so the shorter one still stretches to match the taller — they stay
   level without leaving a few hundred pixels of empty card underneath. */
.section-63m .client {
  border-radius: 28px;
  background-color: var(--gray-6);
  overflow: hidden;
}

/* IMAGES: assets/img/image-card-1-section-6.webp (private) and
   assets/img/image-card-2-section-6.webp (business) — photo at the top of each card.
   To change them, replace the files keeping the names, or adjust the src. */
.section-63m .client-image {
  display: block;
  width: 100%;
  height: 288px;
  object-fit: cover;
}

/* Side padding is double the original 24px. The grid above grew by the same
   96px in return, so the text column keeps exactly the width it had — only the
   card around it got roomier. */
.section-63m .client-body {
  padding: 32px 48px 16px;
}

.section-63m .client-title {
  margin: 0 0 20px;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 600;
}

.section-63m .client--private .client-title {
  color: var(--pink);
}

.section-63m .client--business .client-title {
  color: var(--purple);
}

.section-63m .client-text {
  margin: 0 0 28px;
  color: var(--gray);
  font-size: 20px;
  line-height: 1.55;
}

.section-63m .client-included {
  margin: 0 0 16px;
  color: var(--gray);
  font-size: 20px;
  font-weight: 600;
}

.section-63m .client-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 20px;
  list-style: disc;
  color: var(--gray);
  font-size: 16px;
}

/* ----- Gradient "Get quote" pill ----- */
.section-63m .cta {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  margin-top: 56px;
  z-index: 1;
  position: relative;
}

/* The gradient is MIRRORED (pink → purple → pink) so the shared hover slide
   flips its direction; to change the colors, change both pink stops together.
   Hover/press motion is shared — see css/shared.css. */
.section-63m .quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  width: 236px;
  height: 77px;
  color: var(--white);
  background-image: linear-gradient(90deg, #ec0e63 0%, #6b3ff0 50%, #ec0e63 100%);
  padding: 18px 44px;
  font-size: 23px;
}

/* Section 63m — mobile (<= 900px) */
@media (max-width: 900px) {
  .section-63m .title {
    display: none;
  }

  .section-63m .title-mobile {
    display: block;
    font-size: 36px;
  }

  /* IMAGE: assets/img/lines-up-section-6-mobile.webp — top lines on mobile. */
  .section-63m .lines-top {
    background-image: url("../img/lines-up-section-6-mobile.webp");
    top: 139px;
  }

  .section-63m .eyebrow {
    font-size: 30px;
    margin-bottom: 40px;
  }

  .section-63m .clients {
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
    position: static;
    left: auto;
    transform: none;
    padding: 0 40px;
  }

  .section-63m .client {
    width: 100%;
    height: auto;
  }

  .section-63m .client-image {
    height: 260px;
  }

  /* The desktop card carries 48px of side padding; on a phone that would eat a
     third of the width, so it goes back to the original 24px. */
  .section-63m .client-body {
    padding: 32px 24px 16px;
  }

  .section-63m .client-title {
    font-size: 30px;
  }
}


/* ===== section-64b.css ===== */
/* SECTION 64b — Storage that makes sense  (photo + copy on a pink gradient) Self-contained: to reuse, copy the <section class="section-64b"> block and
   link this file. Every rule is scoped under `.section-64b`. */

.section-64b,
.section-64b *,
.section-64b *::before,
.section-64b *::after {
  box-sizing: border-box;
}

/* Background: linear color/gradient (#D41357 → #EF226A) from Figma. */
.section-64b {
  min-height: 652px;
  /* desktop height; shell (gradient etc.) is shared via .hero-* */
}

/* Watermark ::before is shared via `.wm` (css/shared.css, opacity 0.22). */

/* .inner / .content / .text (base + <=1150 stacking) are shared via `.image-hero`. */

/* .title (base 48px) is shared via `.hero-title` (css/shared.css).
   Width cap instead of a hard <br>: the copy wraps naturally inside 360px
   ("Storage that" / "makes sense."). The stacked breakpoint below drops the
   title to 34px, so it gets its own cap there. */
.section-64b .title {
  max-width: 360px;
}

/* IMAGE: assets/img/image-section-2-store.webp — photo (transparent PNG, resting on the
   section base, on the left).
   To change it, replace the file keeping the name, or adjust the src. */
.section-64b .photo {
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  /* vertically centered */
  /* The Store photo is wide (1246×1018), so we constrain by WIDTH (not by
     height as in section-49n) so it fits in the left half without invading the
     text. Adjust this width if you want the photo larger/smaller. */
  width: 535px;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* Section 64b — stacked (<= 1150px): text on top, photo below.
   Breakpoint higher than section-49n (900px) because the Store photo is wider
   and would pass behind the text around ~1108px if it didn't stack. */
@media (max-width: 1150px) {
  .section-64b {
    min-height: 0;
  }

  .section-64b .title {
    font-size: 34px;
    max-width: 250px;
    /* keeps the same break at the smaller size */
  }

  .section-64b .photo {
    position: static;
    transform: none;
    display: block;
    height: auto;
    width: 100%;
    max-width: 320px;
    margin: 32px auto 0;
  }
}

@media (max-width: 900px) {
  .section-64b>.container {
    padding-inline: 40px;
  }
}


/* ===== section-66r.css ===== */
/* SECTION 66r — Why we started in Zürich  (title + 4 image/color cards)
   Exclusive to the Locations page. 4 cards: photo at the top (rounded corners) +
   colored panel below with title and text. Colors by modifier (--c1..c4).
   Self-contained: copy the <section class="section-66r"> block and link this file.
   Every rule is scoped under `.section-66r`. */

.section-66r,
.section-66r *,
.section-66r *::before,
.section-66r *::after {
  box-sizing: border-box;
}

.section-66r {
  background-color: var(--white);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--gray);
  padding-block: 88px 104px;
}

/* Width cap instead of a hard <br> ("Why we started" / "in Zürich."); the
   auto side margins keep it centered. Second value in the <= 900px block. */
.section-66r .title {
  margin: 0 auto 64px;
  max-width: 310px;
  text-align: center;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--gray);
}

/* ---- Grid of 4 cards ---- */
.section-66r .cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.section-66r .card {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  /* rounds the top of the photo */
  color: var(--white);
}

/* Photo at the top */
.section-66r .card__media {
  flex: none;
}

/* IMAGES: assets/img/image-card-{1..4}-section-3-locations.webp — card photos.
   To change them, replace the files keeping the names. */
.section-66r .card__media img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}

/* Colored panel below */
.section-66r .card__body {
  flex: 1;
  padding: 30px 28px 36px;
}

.section-66r .card__title {
  margin: 0 0 18px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
}

/* Card title width caps instead of hard <br> tags — 24px at every breakpoint,
   so one value each is enough. Scoped by the card colour modifiers. */
.section-66r .card--c1 .card__title {
  max-width: 165px;
}

/* High urban / density */
.section-66r .card--c2 .card__title {
  max-width: 130px;
}

/* Digital / readiness */
.section-66r .card--c3 .card__title {
  max-width: 143px;
}

/* Scalable / proof point */
.section-66r .card--c4 .card__title {
  max-width: 155px;
}

/* Sustainability / culture */

.section-66r .card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

/* Panel colors */
.section-66r .card--c1 .card__body {
  background: var(--pink);
}

.section-66r .card--c2 .card__body {
  background: var(--light-pink);
}

.section-66r .card--c3 .card__body {
  background: var(--purple);
}

.section-66r .card--c4 .card__body {
  background: linear-gradient(180deg, #7b45f5 0%, #5b2fd6 100%);
}

/* Section 66r — responsive */
@media (max-width: 1000px) {
  .section-66r .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .section-66r>.container {
    padding-inline: 40px;
  }

  .section-66r {
    padding-block: 56px 72px;
  }

  .section-66r .title {
    margin-bottom: 44px;
    max-width: 232px;
    /* keeps the same break at the smaller size */
    font-size: 30px;
  }
}

@media (max-width: 560px) {
  .section-66r .cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


/* ===== section-68w.css ===== */
/* SECTION 68w — Purpose + Vision  (two sub-sections over a pink gradient)
   The .section-68w is just the CONTAINER that carries the background (pink gradient).
   Inside it go TWO sub-sections (`.row`), each treated as a normal section:
     • full-width band (the parent's background/watermark span end to end);
     • content inside the central container (`max-width: 1184px`), like the
       other sections of the site.
   Sub-sections:
     • .row--purpose : photo on the LEFT, text on the right  ("Why we exist.")
     • .row--vision  : text on the LEFT, photo on the right   ("What we believe in.")
   Self-contained: to reuse, copy the <section class="section-68w"> block and
   link this file. Every rule is scoped under `.section-68w`. */

.section-68w,
.section-68w *,
.section-68w *::before,
.section-68w *::after {
  box-sizing: border-box;
}

/* Parent container: just the background in a diagonal linear gradient (#D41357 in the
   bottom-left corner → #EF226A in the top-right corner), per Figma. */
.section-68w {
  position: relative;
  overflow: hidden;
  background-color: var(--dark-pink);
  background-image: linear-gradient(to top right, #d41357 0%, #ef226a 100%);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--white);
}

/* ----- Sub-section: full-width band (parent section width) ----- */
.section-68w .row {
  position: relative;
  width: 100%;
}

/* R6 — the Vision row gets its own purple. DELIBERATE, FRIEDRICH-APPROVED DEVIATION
   from the delivered design (2026-09-07, option b of three).
   Why: section-68w carried "Why we exist." (row--purpose) and "What we believe in."
   (row--vision) on one ~1076px pink band — two scroll-screens of identical colour,
   which read as a single block. Flat var(--purple) is the same treatment section-38x
   already uses, so this introduces no new colour and keeps the About page's
   purple/pink/white/pink/white/purple alternation intact.
   One rule covers EN and DE: the stylesheet is shared and the markup is unchanged.
   The row keeps its own `wm` watermark — that ::before is a child of the row, so it
   paints over this background rather than being hidden by it (verified rendered). */
.section-68w .row--vision {
  background-color: var(--purple);
}

/* Content of each sub-section centered in the site's default container. */
.section-68w .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1184px;
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.section-68w .figure {
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-68w .content {
  flex: 1;
  max-width: 440px;
}

.section-68w .eyebrow {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

/* .title (base 48px) is shared via `.hero-title` (css/shared.css). */
.section-68w .text {
  margin: 24px 0 0;
  max-width: 301px;
  font-size: 18px;
  line-height: 1.55;
  opacity: 0.95;
}

/* Width caps instead of hard <br> tags: the copy wraps naturally inside the cap.
   Measured in canada-type-gibson at each element's size; the titles drop to 34px
   and the text to 17px at <= 900px, so those get a second value down below. */
.section-68w .row--purpose .title {
  max-width: 200px;
  /* Why we / exist. */
}

.section-68w .row--vision .title {
  max-width: 245px;
  /* What we / believe in. */
}

/* ----- Sub-section 1: Purpose (photo on the left, centered) ----- */
.section-68w .row--purpose .container {
  min-height: 460px;
  padding-block: 56px;
}

/* IMAGE: assets/img/image-section-2-about.webp — teddy bear in a dingx box
   (transparent PNG, landscape). To change it, replace the file. */
.section-68w .row--purpose .photo {
  width: 100%;
  max-width: 440px;
  height: auto;
  object-fit: contain;
}

/* ----- Sub-section 2: Vision (text on the left, tall photo on the right) -----
   No row-reverse: the text→photo order comes from the DOM (.content before .figure),
   like in section-58c. This way mobile stacks in a column without conflict. */
.section-68w .row--vision .container {
  min-height: 600px;
  padding-top: 56px;
}

/* IMAGE (background): assets/img/watermark.webp — watermark (loops) in the bottom-left
   corner, behind the content. It sits INSIDE .row--vision (full-width band),
   so it follows the left edge of the section. Decorative; low opacity.
   To change it, replace the file keeping the name, or adjust the path. */
/* Watermark ::before is shared via `.wm` (css/shared.css, opacity 0.22);
   only the vision-row specifics (left anchor + z-index) stay here. */
.section-68w .row--vision::before {
  left: 0;
  z-index: 0;
}

/* photo resting on the section base */
.section-68w .row--vision .figure {
  align-items: flex-end;
}

/* IMAGE: assets/img/image-section-2-sub-section-2-about.webp — dingx courier
   holding a box (transparent PNG, portrait). To change it, replace
   the file keeping the name, or adjust the src. */
.section-68w .row--vision .photo {
  height: 560px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* Section 68w — stacked (<= 900px): in each sub-section the TEXT goes on top
   and the PHOTO below. */
@media (max-width: 900px) {
  .section-68w .row--vision::before {
    width: 420px;
    height: 320px;
  }

  .section-68w .container {
    padding-inline: 40px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .section-68w .content {
    order: 1;
    max-width: none;
  }

  .section-68w .figure {
    order: 2;
  }

  .section-68w .title {
    font-size: 34px;
  }

  .section-68w .text {
    font-size: 17px;
  }

  /* Purpose stacked */
  .section-68w .row--purpose .container {
    min-height: 0;
    padding-block: 48px;
  }

  .section-68w .row--purpose .figure {
    margin-top: 32px;
    position: relative;
    left: -24px;
  }

  .section-68w .row--purpose .photo {
    max-width: 300px;
    margin-inline: auto;
  }

  /* Vision stacked — photo resting on the base */
  .section-68w .row--vision .container {
    min-height: 0;
    padding-top: 48px;
  }

  .section-68w .row--vision .figure {
    margin-top: 32px;
  }

  .section-68w .row--vision .photo {
    height: auto;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
}


/* ===== section-70p.css ===== */
/* SECTION 70p — Interested in partnering?  (text panel + photo, line behind)
   Exclusive to the Locations page. Light-gray panel on the left (title + text +
   button) and photo on the right. Dotted line (lines-full-wide-4, 1920×410) as a
   2nd background: CENTERED CLAMP scheme — natural size, fixed center,
   tips pushed off-screen and trimmed by `overflow: hidden`.
   Self-contained: copy the <section class="section-70p"> block and link this file.
   Every rule is scoped under `.section-70p`. */

.section-70p,
.section-70p *,
.section-70p *::before,
.section-70p *::after {
  box-sizing: border-box;
}

/* IMAGE (decorative background): assets/img/lines-full-wide-4.webp (1920×410) — pink
   dotted line. `background-size: auto` (NATURAL size) + center = centered
   clamp; the `overflow: hidden` trims the tips. Adjust the Y of
   `background-position` (center) to raise/lower the line. */
.section-70p {
  position: relative;
  overflow: hidden;
  background-color: var(--white);
  background-image: url("../img/lines-full-wide-4.webp");
  background-repeat: no-repeat;
  /* Anchored to the BOTTOM (not center): the line's bottom curve has to clear the
     panel, and the panel's height changes with its copy. `100% - 24px` keeps the
     curve 24px above the section edge. Raise the 24px to lift the line. */
  background-position: center calc(100% - 24px);
  background-size: auto;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--gray);
  padding-block: 96px;
}

.section-70p .inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: stretch;
}

/* ---- Light-gray panel (left) ----
   Gray 5 per the design system. It must stay distinct from the white section
   behind it, so never let this collapse to `--white`. */
.section-70p .panel {
  background: var(--gray-5);
  border-radius: 28px;
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Width cap instead of hard <br> tags ("Interested in" / "partnering with dingx"
   / "in your region?"); second value in the <= 900px block (28px). */
.section-70p .panel__title {
  margin: 0;
  max-width: 360px;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--gray);
}

.section-70p .panel__text {
  margin: 28px 0 0;
  max-width: 380px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--gray);
}

/* Hover/press motion is shared — see css/shared.css. */
.section-70p .btn {
  align-self: flex-start;
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 172px;
  height: 56px;
  padding: 0 36px;
  border-radius: 999px;
  background: var(--pink);
  color: var(--white);
  font-size: 17px;
  text-decoration: none;
  cursor: pointer;
}

/* ---- Photo (right) ---- */
.section-70p .media {
  border-radius: 24px;
  overflow: hidden;
}

/* IMAGE: assets/img/image-section-5-locations.webp (520×620). The photo's natural height
   (at the column width) defines the row height; the panel stretches to it via
   `align-items: stretch` + `justify-content: center`. */
.section-70p .media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Section 70p — stacked (<= 900px): panel on top, photo below. */
@media (max-width: 900px) {
  .section-70p>.container {
    padding-inline: 40px;
  }

  .section-70p {
    padding-block: 64px;
  }

  .section-70p .inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .section-70p .panel {
    padding: 44px 32px;
  }

  .section-70p .panel__title {
    font-size: 28px;
    max-width: 295px;
    /* keeps the same breaks at the smaller size */
  }

  .section-70p .panel__text {
    max-width: none;
  }
}


/* ===== section-71p.css ===== */
/* SECTION 71p — Why you won't see fixed prices here  (photo + purple card)
   White background. Two columns: photo on the left and a Purple card on the
   right with the logo (watermark-6), title, text and a bold line.
   Self-contained: to reuse, copy the <section class="section-71p"> block and
   link this file. Every rule is scoped under `.section-71p`. */

.section-71p,
.section-71p *,
.section-71p *::before,
.section-71p *::after {
  box-sizing: border-box;
}

.section-71p {
  padding-block: 80px;
  background-color: var(--white);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
}

.section-71p .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
  /* photo and card with the same height */
}

/* IMAGE: assets/img/image-section-5-pricing.webp — photo of the truck/courier.
   To change it, replace the file keeping the name, or adjust the src. */
.section-71p .photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

/* ----- Purple card ----- */
.section-71p .card {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background-color: var(--purple);
  color: var(--white);
  padding: 48px;
}

/* IMAGE: assets/img/watermark-6.webp — dingx logo (tone on tone) at the top of the card.
   To change it, replace the file keeping the name, or adjust the src. */
.section-71p .card-logo {
  display: block;
  width: 72px;
  height: auto;
  margin-bottom: 40px;
}

.section-71p .card-title {
  margin: 0 0 20px;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 600;
}

/* Width cap instead of hard <br> tags: the copy wraps naturally inside 268px
   ("Why you won't" / "see fixed prices" / "here."). The stacked breakpoint
   below drops the title to 30px, so it gets its own cap there. */
.section-71p .card-title {
  max-width: 268px;
}

.section-71p .card-text {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.92;
}

.section-71p .card-highlight {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
}

/* Same scheme for the closing line ("Transparent. Personalized." / "Always
   under your control."); 18px at every breakpoint, so one value is enough. */
.section-71p .card-highlight {
  max-width: 250px;
}

/* Section 71p — stacked (<= 768px): photo on top, card below. */
@media (max-width: 768px) {
  .section-71p {
    padding-block: 48px;
  }

  .section-71p .inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .section-71p .photo {
    height: 320px;
    /* fixed height when stacked */
  }

  .section-71p .card {
    padding: 36px 28px;
  }

  .section-71p .card-title {
    font-size: 30px;
    max-width: 236px;
    /* keeps the same breaks at the smaller size */
  }
}

@media (max-width: 900px) {
  .section-71p .container {
    padding-inline: 40px;
  }
}


/* ===== section-72e.css ===== */
/* SECTION 72e — What makes us different + Storage as part of life's cycles
   Light background with TWO cards:
     • .card--intro : white card (pink title on the left, list + phrase on the
       right).
     • .cards-row   : row with PHOTO (left) + PURPLE card with CTA (right).
   Self-contained: to reuse, copy the <section class="section-72e"> block and
   link this file. Every rule is scoped under `.section-72e`. */

.section-72e,
.section-72e *,
.section-72e *::before,
.section-72e *::after {
  box-sizing: border-box;
}

/* Light background (subtle cool gradient). */
.section-72e {
  background-color: var(--white);
  background-image: linear-gradient(180deg, #fafbfc 0%, #eef2f5 100%);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  padding-block: 72px;
}

/* ----- Card base ----- */
.section-72e .card {
  border-radius: 24px;
}

/* ----- Card 1: intro (branco) ----- */
.section-72e .card--intro {
  background-color: var(--white);
  padding: 56px 64px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

/* Intentional line break kept as a real newline in the HTML source (`pre-line`)
   instead of a <br>: no width can reproduce it — here a max-width would also
   shrink this flex column and drag the list next to it. Long lines still wrap
   normally. Careful: the source formatting of this element is content now. */
.section-72e .card--intro .title {
  flex: 1;
  margin: 0;
  white-space: pre-line;
  font-size: 44px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--pink);
}

.section-72e .card--intro .right {
  flex: 1;
}

/* list of differentiators */
.section-72e .points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.section-72e .points li {
  position: relative;
  padding-left: 22px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--gray);
}

.section-72e .points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #505355;
}

/* highlight phrase (pink) below the list */
/* Width caps instead of hard <br> tags — one value per element, plus a second
   one in the <= 900px block where the font-size drops. */
.section-72e .note {
  margin: 40px 0 0;
  max-width: 260px;
  /* Technology is here to support / care — not replace it. */
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--pink);
}

/* ----- Card 2: row (photo + purple card) ----- */
.section-72e .cards-row {
  display: flex;
  align-items: stretch;
  gap: 20px;
  margin-top: 20px;
}

/* photo (left) */
.section-72e .card--photo {
  flex: 0 0 40%;
  overflow: hidden;
}

/* IMAGE: assets/img/image-card-section-3-about.webp — dingx staff member checking
   a bicycle in the storage. To change it, replace the file keeping the name. */
.section-72e .card--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* purple card with CTA (right) */
.section-72e .card--cta {
  flex: 1;
  background-color: var(--purple);
  color: var(--white);
  padding: 52px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section-72e .cta-title {
  margin: 0;
  max-width: 270px;
  /* Storage as part / of life's cycles. */
  font-size: 36px;
  line-height: 1.15;
  font-weight: 600;
}

.section-72e .cta-text {
  margin: 24px 0 0;
  white-space: pre-line;
  /* same as .card--intro .title above: the break is a
                            newline in the source, not a <br> */
  max-width: 473px;
  font-size: 18px;
  line-height: 1.5;
  opacity: 0.95;
}

/* outline button (white pill).
   Hover/press motion is shared — see css/shared.css. */
.section-72e .btn {
  align-self: flex-start;
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border: 2px solid var(--white);
  border-radius: 999px;
  background-color: transparent;
  color: var(--white);
  font-size: 16px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* Section 72e — stacked (<= 900px): everything in a column */
@media (max-width: 900px) {
  .section-72e .container {
    padding-inline: 40px;
  }

  .section-72e {
    padding-block: 48px;
  }

  .section-72e .card--intro {
    flex-direction: column;
    gap: 28px;
    padding: 36px 28px;
  }

  .section-72e .card--intro .title {
    font-size: 30px;
  }

  .section-72e .points li {
    font-size: 16px;
  }

  /* same breaks at the smaller sizes */
  .section-72e .note {
    margin-top: 32px;
    font-size: 16px;
    max-width: 232px;
  }

  .section-72e .cards-row {
    flex-direction: column;
  }

  /* photo gets its own height when stacked */
  .section-72e .card--photo {
    flex: none;
    height: 240px;
  }

  .section-72e .card--cta {
    padding: 36px 28px;
  }

  .section-72e .cta-title {
    font-size: 28px;
    max-width: 210px;
  }

  .section-72e .cta-text {
    font-size: 16px;
  }
}


/* ===== section-73d.css ===== */
/* SECTION 73d — Key features + When to use Move  (two rows of cards)
   Uses the shared `.cards-section` class (css/shared.css); this file keeps
   only what is specific to Move. Scoped under `.section-73d`.
   To reuse: copy the <section class="section-73d cards-section"> block and
   link this file + css/shared.css. */

.section-73d,
.section-73d *,
.section-73d *::before,
.section-73d *::after {
  box-sizing: border-box;
}

/* IMAGE (background): assets/img/image-background-section-2.webp — pink dotted line
   with the dingx symbol, anchored to TOP RIGHT (decorative element).
   To change it, replace the file keeping the name, or adjust the path. */
.section-73d::before {
  content: "";
  position: absolute;
  top: 0;
  /* The box has the exact size of the image (610×867). `right` controls the
     horizontal slide:
       • right: 0  → glued to the right edge of the screen (screens >= 1920px);
       • as the screen narrows, `100vw - 1920px` becomes negative → the image
         slides off to the right (clipped by overflow: hidden);
       • locks at -530px → a small ~80px sliver (610 - 530) stays fixed.
     Tuning: 1920px = width where it glues to the edge; -530px = how much it slides
     (increase the magnitude to show a smaller piece). */
  right: clamp(-530px, 100vw - 1920px, 0px);
  width: 610px;
  height: 867px;
  background-image: url("../img/image-background-section-2.webp");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto 100%;
  pointer-events: none;
}

.section-73d>.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1328px;
  margin-inline: auto;
  margin-top: 47px;
  padding-inline: 24px;
}

/* larger space before the second group ("When to use Move") */
.section-73d .cards+.group-title {
  margin-top: 96px;
}

.section-73d .cards--features {
  max-width: 943px;
  /* 3 x 301 + 2 x 20 gaps */
}

.section-73d .cards--usecases {
  max-width: 1264px;
  /* 4 x 301 + 3 x 20 gaps */
}

.section-73d .card-icon {
  display: block;
}

/* Card colors (hex from Figma)
   Key features (pink):        f1 → f3
   When to use Move (purple):  u1 → u4 */
.section-73d .card--f1 {
  background-color: var(--light-pink);
}

.section-73d .card--f2 {
  background-color: var(--pink);
}

.section-73d .card--f3 {
  background-color: var(--dark-pink);
}

.section-73d .card--u1 {
  background-color: var(--light-purple);
}

.section-73d .card--u2 {
  background-color: var(--purple);
}

.section-73d .card--u3 {
  background-color: var(--dark-purple);
}

.section-73d .card--u4 {
  background-color: var(--dark-purple);
}

/* Card title width caps — the titles used hard <br> tags; instead each one
   wraps naturally inside its own cap, so the copy still reflows if it changes.
   Values measured in canada-type-gibson 28px/500: wide enough for the card's
   longest line, narrower than that line plus the next word. */
.section-73d .card--f1 .card-title {
  max-width: 200px;
}

/* On-demand / pickup */
.section-73d .card--f2 .card-title {
  max-width: 130px;
}

/* Fast / delivery */
.section-73d .card--f3 .card-title {
  max-width: 240px;
}

/* Redistribution to / storage, donation, / or resale */
.section-73d .card--u1 .card-title {
  max-width: 140px;
}

/* Moving / homes */
.section-73d .card--u2 .card-title {
  max-width: 170px;
}

/* Decluttering / and freeing / up space */
.section-73d .card--u3 .card-title {
  max-width: 190px;
}

/* Sending items / to storage */
.section-73d .card--u4 .card-title {
  max-width: 210px;
}

/* Redistributing / items you no / longer need */

/* Section 73d — mobile (<= 900px): specifics (shared stacking is in shared.css) */
@media (max-width: 900px) {
  .section-73d>.container {
    padding-inline: 40px;
  }

  .section-73d .cards+.group-title {
    margin-top: 64px;
  }
}


/* ===== section-78p.css ===== */
/* SECTION 78p — "Sustainability"  (dark photo background + stats + CTA)
   Self-contained. Copy the <section class="section-78p"> block and link this
   file to reuse. */

.section-78p,
.section-78p *,
.section-78p *::before,
.section-78p *::after {
  box-sizing: border-box;
}

/* IMAGE: assets/img/background-section-7.webp — background photo of this section (desktop).
   Mobile version swapped further below (background-section-7-mobile.webp).
   To change it, replace the file keeping the name, or adjust the path. */
.section-78p {
  background-color: #6a1f33;
  background-image: url("../img/background-section-7.webp");
  background-size: cover;
  background-position: center;
  height: 939px;
  display: flex;
  align-items: center;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--white);
}

/* low-priority reset (`:where` adds 0 specificity) */
.section-78p :where(a) {
  text-decoration: none;
  color: inherit;
}

/* low-priority reset (`:where` adds 0 specificity) */
.section-78p :where(ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-78p .content {
  max-width: 620px;
}

.section-78p .eyebrow {
  display: inline-block;
  margin: 0 0 24px;
  padding: 9px 22px;
  background-color: var(--pink);
  border-radius: 999px;
  color: var(--white);
  font-size: 15px;
}

/* Width cap instead of a hard <br> ("Storage as part" / "of life's cycles.");
   second value in the <= 900px block (32px). */
.section-78p .title {
  margin: 0 0 28px;
  max-width: 420px;
  font-size: 56px;
  line-height: 1.1;
  font-weight: 600;
}

.section-78p .text {
  margin: 0 0 20px;
  max-width: 470px;
  font-size: 18px;
  line-height: 1.30;
}

/* ----- Stats ----- */
.section-78p .stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 36px 0 40px;
}

/* The first column used to hold a number ("000", "00 kg"); it now holds the icon,
   so it shrinks to the glyph and the two items line up on their centers instead of
   on a text baseline. */
.section-78p .stat {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 16px;
}

/* The icon files are the purple glyphs shared with the Sustainability page, where
   they sit on white cards. This band is a dark photo, so they are forced to white:
   `brightness(0)` flattens the glyph to black, `invert(1)` turns it white. The
   files stay untouched and keep working on both pages. */
.section-78p .stat-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.section-78p .stat-value {
  font-size: 22px;
  font-weight: 600;
}

.section-78p .stat-label {
  font-size: 18px;
  font-weight: 600;
}

/* ----- Gradient CTA button with arrow -----
   The gradient is MIRRORED (purple → pink → purple) so the shared hover slide
   flips its direction; to change the colors, change both purple stops
   together. Hover/press motion is shared — see css/shared.css. */
.section-78p .cta {
  /* R8.2 — separates the button from the `.stats-note` line added in R2. Before
     that note existed the stat list's own spacing carried this gap; the note is
     margin-top-only, so the two ended up flush (measured: 0px).
     Deliberately fixed HERE and not on `.stats-note`: that rule is shared with
     section-31n on Sustainability, where the note is followed by `.closing`,
     whose own margin already spaces it correctly (measured: 40px). Scoping the
     fix to 78p leaves that page untouched by construction. */
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--white);
  background-image: linear-gradient(90deg, #6b3ff0 0%, #ec0e63 50%, #6b3ff0 100%);
  padding: 20px 40px;
  font-size: 18px;
}

.section-78p .cta-arrow {
  width: 20px;
  height: 20px;
}

/* Section 78p — mobile (<= 900px) */
@media (max-width: 900px) {
  .section-78p .container {
    padding-inline: 40px;
  }

  /* IMAGE: assets/img/background-section-7-mobile.webp — background photo on mobile. */
  .section-78p {
    background-image: url("../img/background-section-7-mobile.webp");
    height: 923px;
    align-items: flex-start;
    padding-top: 48px;
  }

  .section-78p .title {
    font-size: 32px;
    max-width: 240px;
    /* keeps the same break at the smaller size */
  }

  .section-78p .text {
    font-size: 16px;
  }

  .section-78p .stat {
    grid-template-columns: 26px 1fr;
  }

  .section-78p .stat-icon {
    width: 26px;
    height: 26px;
  }

  .section-78p .stat-value {
    font-size: 18px;
  }

  .section-78p .stat-label {
    font-size: 15px;
  }

  .section-78p .eyebrow {
    font-size: 14px;
  }

  .section-78p .cta {
    font-size: 15px;
    padding: 16px 34px;
  }
}


/* ===== section-83e.css ===== */
/* SECTION 83e — See your price in seconds  (full-bleed photo + CTA)
   Band with background photo (separate desktop and mobile). On DESKTOP there is a
   linear gradient (#737373) IN FRONT of the image, darkening the left to
   give contrast to the text. On MOBILE the gradient disappears (the mobile image
   already comes with the top darkened).
   Self-contained: to reuse, copy the <section class="section-83e"> block and
   link this file. Every rule is scoped under `.section-83e`. */

.section-83e,
.section-83e *,
.section-83e *::before,
.section-83e *::after {
  box-sizing: border-box;
}

/* IMAGE (background): assets/img/image-background-section-6-pricing.webp (desktop).
   Mobile version swapped further below (image-background-section-6-mobile-pricing.webp).
   To change it, replace the files keeping the names, or adjust the path. */
.section-83e {
  position: relative;
  overflow: hidden;
  min-height: 763px;
  background-color: #2b2b2b;
  background-image: url("../img/image-background-section-6-pricing.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--white);
}

/* Gradient IN FRONT of the image (shadow for readability). Linear #737373: stronger
   on the left (where the text is) and transparent on the right. TUNABLE. */
.section-83e .overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg,
      rgba(18, 18, 18, 0.88) 0%,
      rgba(0, 0, 0, 0.55) 28%,
      rgba(115, 115, 115, 0) 60%);
  pointer-events: none;
  z-index: 1;
}

.section-83e .container {
  position: relative;
  z-index: 2;
  /* content above the gradient */
  width: 100%;
  max-width: 1184px;
  margin-inline: auto;
  padding-inline: 24px;
}

.section-83e .inner {
  min-height: 763px;
  display: flex;
  align-items: center;
}

.section-83e .content {
  max-width: 480px;
}

.section-83e .title {
  margin: 0;
  font-size: 52px;
  line-height: 1.08;
  font-weight: 600;
}

/* Width cap instead of a hard <br>: the copy wraps naturally inside 430px
   ("See your price in" / "seconds."). The <= 768px block drops the title to
   35px, so it gets its own cap there. */
.section-83e .title {
  max-width: 430px;
}

.section-83e .subtitle {
  margin: 22px 0 0;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 600;
}

.section-83e .actions {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 300px;
  max-width: 100%;
}

/* Hover/press motion is shared — see css/shared.css (the 2px transparent
   border is what the shared hover paints as the ring). */
.section-83e .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  padding: 20px 28px;
  font-size: 18px;
  border: 2px solid transparent;
  text-decoration: none;
}

.section-83e .btn--pink {
  background-color: var(--pink);
  color: var(--white);
}

.section-83e .btn--outline {
  background-color: transparent;
  color: var(--white);
  border-color: var(--white);
}

/* Section 83e — mobile (<= 768px): mobile image, WITHOUT gradient, text on top. */
@media (max-width: 768px) {

  /* IMAGE (background): assets/img/image-background-section-6-mobile-pricing.webp. */
  .section-83e {
    background-image: url("../img/image-background-section-6-mobile-pricing.webp");
    min-height: 0;
    aspect-ratio: 390 / 718;
    /* follows the mobile image aspect ratio */
  }

  /* On mobile the gradient becomes VERTICAL (top → bottom), darkening the top
     (where the text is) and fading around the center of the image, before the phone. */
  .section-83e .overlay {
    background-image: linear-gradient(180deg,
        rgba(115, 115, 115, 1) 0%,
        rgba(115, 115, 115, 0) 50%);
  }

  .section-83e .inner {
    min-height: 0;
    align-items: flex-start;
    /* content on top */
    padding-block: 44px 0;
  }

  .section-83e .title {
    font-size: 35px;
    max-width: 340px;
    /* keeps the same break at the smaller size */
  }

  .section-83e .subtitle {
    font-size: 20px;
  }

  .section-83e .actions {
    width: 90%;
    align-items: flex-start;
    /* aligns the smaller button to the left */
  }

  /* "Download the app" smaller than the pink (which stays 100%) */
  .section-83e .btn--outline {
    width: 80%;
  }
}

@media (max-width: 900px) {
  .section-83e .container {
    padding-inline: 40px;
  }
}


/* ===== section-85r.css ===== */
/* SECTION 85r — "We store stories"  (photo | violet card)
   Self-contained. Copy the <section class="section-85r"> block and link this
   file to reuse. Two columns on desktop; stacked and centered on mobile. */

.section-85r,
.section-85r *,
.section-85r *::before,
.section-85r *::after {
  box-sizing: border-box;
}

.section-85r {
  background-color: var(--white);
  height: 939px;
  display: flex;
  align-items: center;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
}

.section-85r .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  width: 100%;
  align-items: stretch;
  height: 515px;
}

/* IMAGE: assets/img/image-section-8.webp — photo (dingx courier with the pink box).
   To change it, replace the file keeping the name, or adjust the src in the HTML. */
.section-85r .image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 28px;
  display: block;
}

.section-85r .card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--purple);
  border-radius: 28px;
  padding: 56px;
  color: var(--white);
}

/* IMAGE: assets/img/icon-card-section-8.webp — icon at the top of the purple card.
   To change it, replace the file keeping the name, or adjust the src in the HTML. */
.section-85r .icon {
  width: 64px;
  margin-bottom: 36px;
}

/* Width cap instead of a hard <br> ("We store stories," / "not just objects.");
   350px holds at 42px and at the 32px mobile size. */
.section-85r .title {
  margin: 0 0 28px;
  max-width: 350px;
  font-size: 42px;
  line-height: 1.1;
  font-weight: 600;
}

.section-85r .text {
  margin: 0 0 20px;
  max-width: 340px;
  font-size: 18px;
  line-height: 1.5;
  opacity: 0.95;
}

.section-85r .text:last-child {
  margin-bottom: 0;
}

/* Section 85r — mobile (<= 900px) */
@media (max-width: 900px) {
  .section-85r .container {
    padding-inline: 40px;
  }

  .section-85r {
    height: auto;
    display: block;
    padding-block: 80px;
  }

  .section-85r .inner {
    grid-template-columns: 1fr;
    height: auto;
    justify-items: center;
    gap: 24px;
  }

  .section-85r .image {
    width: 313px;
    height: auto;
  }

  .section-85r .card {
    width: 313px;
    height: 524px;
    padding: 36px 28px;
  }

  .section-85r .title {
    font-size: 32px;
  }

  .section-85r .text {
    font-size: 16px;
    max-width: none;
  }
}


/* ===== section-92t.css ===== */
/* SECTION 92t — "Ready to move to simplicity?"  (final CTA band)
   Self-contained. Copy the <section class="section-92t"> block and link this
   file to reuse. */

.section-92t,
.section-92t *,
.section-92t *::before,
.section-92t *::after {
  box-sizing: border-box;
}

/* IMAGE (background): assets/img/watermark-4.webp — band watermark. Same background as
   section-51g (move). To change it, replace the file keeping the name. */
.section-92t {
  background-color: var(--pink);
  background-image: url("../img/watermark-4.webp");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  height: 537px;
  display: flex;
  align-items: center;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--white);
}

/* low-priority reset (`:where` adds 0 specificity) */
.section-92t :where(a) {
  text-decoration: none;
  color: inherit;
}

.section-92t .inner {
  text-align: center;
}

.section-92t .title {
  margin: 0 0 24px;
  font-size: 44px;
  line-height: 1.1;
  font-weight: 600;
}

/* Intentional line break kept as a real newline in the HTML source (`pre-line`)
   instead of a <br>: no width can reproduce it (the lines are independent
   sentences and the longer one comes second). Long lines still wrap normally.
   Careful: the source formatting of this element is content now. */
.section-92t .text {
  margin: 0 0 40px;
  white-space: pre-line;
  font-size: 21px;
  line-height: 1.5;
  font-weight: 600;
}

.section-92t .actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* ----- Buttons -----
   Hover/press motion is shared — see css/shared.css. */
.section-92t .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  padding: 14px 26px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.section-92t .btn--light {
  background-color: var(--white);
  color: #4b2e83;
}

.section-92t .btn--outline {
  background-color: transparent;
  color: var(--white);
  border: 2px solid var(--white);
}

.section-92t .actions .btn {
  min-width: 200px;
  padding: 18px 34px;
  font-size: 18px;
}

/* the light "Get your quote" pill keeps pink text */
.section-92t .quote {
  color: var(--pink);
}

/* Section 92t — mobile (<= 900px) */
@media (max-width: 900px) {
  .section-92t .container {
    padding-inline: 40px;
  }

  .section-92t {
    height: 545px;
    background-position: center bottom;
    background-size: 190%;
  }

  .section-92t .title {
    font-size: 36px;
  }

  .section-92t .text {
    font-size: 18px;
    padding: 0 10px;
  }

  .section-92t .actions {
    flex-direction: column;
    align-items: center;
  }

  .section-92t .actions .btn {
    width: 282px;
  }
}


/* ===== footer.css ===== */
/* COMPONENT: footer  (brand + link columns + social + copyright)
   Reusable across every page. Self-contained: everything is scoped under
   `.footer` so it never interferes with any page section. */

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

/* Background: vertical gradient (0% FFFFFF → 100% D9E4EA) + watermark-8 in the
   top-right corner, scaling in size along with the screen width
   (background-size in %). To change the brand, replace assets/img/watermark-8.webp. */
.footer {
  background-color: var(--white);
  background-image:
    url("../img/watermark-8.webp"),
    linear-gradient(180deg, #ffffff 0%, #d9e4ea 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: top right, center;
  background-size: auto, cover;
  min-height: 680px;
  display: flex;
  flex-direction: column;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--gray-3);
}

/* low-priority reset (`:where` adds 0 specificity) so per-link colors
   (e.g. the gray footer links) are never overridden by this rule */
.footer :where(a) {
  text-decoration: none;
  color: inherit;
}

/* low-priority reset (`:where` adds 0 specificity) */
.footer :where(ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__inner {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 80px;
  padding-top: 96px;
}

/* IMAGE: assets/img/logo-dingx-footer.webp — dingx logo in the footer.
   To change it, replace the file keeping the same name, or adjust the src in the HTML. */
.footer__brand {
  flex: 0 0 auto;
  margin-right: 60px;
}

.footer__brand img {
  display: block;
  width: 160px;
  height: auto;
}

.footer__nav {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 120px;
  row-gap: 64px;
  align-items: start;
}

/* groups flow directly into the grid so rows align across columns */
.footer__col {
  display: contents;
}

.footer__group--service {
  grid-column: 1;
  grid-row: 1;
}

.footer__group--about {
  grid-column: 1;
  grid-row: 2;
}

.footer__group--pricing {
  grid-column: 2;
  grid-row: 1;
}

.footer__group--legal {
  grid-column: 2;
  grid-row: 2;
}

.footer__title {
  margin: 0 0 24px;
  color: var(--gray);
  font-size: 18px;
  font-weight: 600;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer__list a {
  color: var(--gray-3);
  font-size: 16px;
  transition: color 0.2s ease;
}

.footer__list a:hover {
  color: var(--gray);
}

.footer__social {
  margin-left: auto;
}

/* IMAGES: assets/img/icon-instagram.webp, icon-linkedin.webp, icon-facebook.webp
   — social media icons (defined in the HTML).
   To change them, replace the files keeping the same names, or adjust the srcs. */
.footer__social-list {
  display: flex;
  gap: 14px;
}

.footer__social-list img {
  display: block;
  width: 36px;
  height: 36px;
}

/* Bottom bar — the trust line and the copyright read as ONE two-line block, so the
   44px that used to sit on .footer__copy now sits on the wrapper and the two lines
   are spaced tightly against each other rather than independently. */
.footer__bottom {
  padding-top: 44px;
  padding-bottom: 10px;
  text-align: center;
}

.footer__copy {
  margin: 0;
  color: var(--gray);
  font-size: 16px;
}

/* Footer — mobile (<= 900px): single stacked column */
@media (max-width: 900px) {
  .footer {
    min-height: 1049px;
    background-size: contain, cover;
  }

  .footer .container {
    padding-inline: 40px;
  }

  .footer__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding-top: 64px;
  }

  .footer__brand {
    align-self: center;
    margin-right: 0;
  }

  .footer__nav {
    display: flex;
    flex-direction: column;
    gap: 36px;
  }

  /* reset the desktop grid placement and reorder for a single column */
  .footer__group--service {
    grid-column: auto;
    grid-row: auto;
    order: 1;
  }

  .footer__group--pricing {
    grid-column: auto;
    grid-row: auto;
    order: 2;
  }

  .footer__group--about {
    grid-column: auto;
    grid-row: auto;
    order: 3;
  }

  .footer__group--legal {
    grid-column: auto;
    grid-row: auto;
    order: 4;
  }

  .footer__social {
    margin-left: 0;
  }
}


/* ===== shared.css ===== */
/* SHARED STYLES — rules used by more than one section live here as opt-in classes.
   A section opts in by adding the class in its markup; its own CSS keeps only what
   differs. To find which sections use a class, grep the class name.

   Loaded LAST (after all section files + footer) so that shared rules win on
   equal-specificity ties (needed where a moved mobile override must beat a
   per-section desktop rule of the same specificity). */

/* COLOR TOKENS
   Custom properties resolve at computed-value time, not parse time, so the
   section files linked BEFORE this one can use var() freely. Defining them
   here (rather than in a separate tokens.css linked first) means a new page
   cannot forget the link and lose every color: shared.css is already required.

   Raw hex left in the CSS is deliberate — it marks a color that has NO token:
   the tinted/dark section backgrounds and the gradient stops. */
:root {
  --white: #ffffff;
  --black: #1d1d1b;

  --gray: #64686a;
  --gray-2: #6f7375;
  --gray-3: #91989b;
  --gray-4: #bdc6ca;
  --gray-5: #d9e4ea;
  --gray-6: #e4edf1;
  --gray-7: #e6edf0;

  --light-pink: #ff4787;
  --pink: #ef226a;
  --dark-pink: #d41e63;

  /* Brand pink is too light to use as TEXT on our light panels: #ef226a scores
     3.47:1 on --gray-7, and --dark-pink only reaches 4.26:1 — both under the
     4.5:1 WCAG AA needs for text below 24px. This is the same hue (338.9) and
     saturation (86.5%) as --pink, darkened to 4.76:1. Use it for pink text on
     a light background; keep --pink for fills, where the rule doesn't apply. */
  --pink-on-light: #cb0f51;

  --light-purple: #9972ff;
  --purple: #7844fe;
  --dark-purple: #673dd3;
}

/* .cards-section — feature / use-case card sections.
   Add `cards-section` on the <section>. Per-section files keep only
   the decorative ::before, the container, card colors and the
   features/usecases desktop widths (which differ between pages). */
.cards-section {
  position: relative;
  overflow: hidden;
  min-height: 1270px;
  padding-block: 72px;
  background-color: var(--white);
  background-image: linear-gradient(180deg, rgba(217, 228, 234, 0.5) 0%, #ffffff 100%);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
}

.cards-section .group-title {
  margin: 0;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  color: var(--gray);
}

.cards-section .cards {
  list-style: none;
  margin: 48px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.cards-section .card {
  flex: 0 0 301px;
  min-height: 300px;
  border-radius: 32px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* icon + title together, bottom left */
  gap: 16px;
  color: var(--white);
}

.cards-section .card-icon img {
  display: block;
  width: 60px;
}

.cards-section .card-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 500;
}

@media (max-width: 900px) {
  .cards-section {
    min-height: 0;
    padding-block: 56px;
  }

  .cards-section .cards,
  .cards-section .cards--features,
  .cards-section .cards--usecases {
    flex-direction: column;
    align-items: stretch;
    max-width: 340px;
  }

  .cards-section .card {
    flex: 1 1 auto;
    width: 100%;
    min-height: 150px;
  }

  .cards-section .card-icon img {
    width: 40px;
  }
}

/* .faq-section — FAQ accordion sections.
   Add `faq-section` on the <section>. Per-section files keep the shell
   background, the .faq width/gap, .faq-q padding, the button and the
   [open] state overrides (all of which differ between the two). */
.faq-section .title {
  margin: 0 0 40px;
  text-align: center;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--gray);
}

.faq-section .faq-item {
  border: 2px solid var(--gray-5);
  border-radius: 999px;
  /* pill when closed */
  background-color: var(--white);
}

.faq-section .faq-chevron {
  flex: none;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  border-right: 2px solid var(--gray-3);
  border-bottom: 2px solid var(--gray-3);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-section .faq-a p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-2);
}

/* .image-hero — hero with a photo on the left and copy on the right
   (margin-left: 50%). Add `image-hero` on the <section>. Note it stacks at
   <= 1150px, not 900 — section-49n has the same base rules but stacks at 900,
   so it must NOT opt in.
   Per-section files keep the shell gradient, the base ::before (different
   opacity), the container, the title and the photo (differ per page). */
.image-hero .inner {
  position: relative;
  min-height: 652px;
  display: flex;
  align-items: center;
}

.image-hero .content {
  position: relative;
  z-index: 1;
  margin-left: 50%;
  max-width: 440px;
}

.image-hero .text {
  margin: 28px 0 0;
  max-width: 360px;
  font-size: 20px;
  line-height: 1.55;
  opacity: 0.92;
}

@media (max-width: 1150px) {
  .image-hero::before {
    top: auto;
    bottom: 0;
    transform: none;
    width: 420px;
    height: 320px;
  }

  .image-hero .inner {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-block: 48px 0;
  }

  .image-hero .content {
    margin-left: 0;
    max-width: none;
  }

  .image-hero .text {
    max-width: none;
    font-size: 17px;
  }
}

/* .wm — decorative watermark (loops), anchored bottom-left behind content.
   Wrapped in :where() so its specificity stays (0,0,1) and each section's own
   mobile ::before override
   (e.g. width/height at its breakpoint) always wins. Add `wm` on the
   <section> (which is position:relative). Sections keep only their mobile
   ::before override (and 33k/64b keep their own, different-opacity ::before).

   IMAGE (background): assets/img/watermark.webp — the dingx loops watermark. Replace the
   file keeping the same name to change it everywhere this class is used. */
:where(.wm)::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 640px;
  height: 470px;
  background-image: url("../img/watermark.webp");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  opacity: 0.22;
  pointer-events: none;
}

/* .cta-band — full-width CTA band: centered copy and a white pill button over a
   colored shell with a watermark.
   Add `cta-band` on the <section>. Each section keeps only what differs: the shell
   image/height, the button color, its title margin/max-width, and its own mobile
   overrides.

   Wrapped in :where() so it adds NO specificity — every `.section-X …` rule (0,2,0)
   still wins over it, including the mobile overrides, even though shared.css loads
   last. This class only fills in values that all three already shared. */
:where(.cta-band) .content {
  text-align: center;
  padding-inline: 24px;
}

:where(.cta-band) .title {
  font-size: 40px;
  line-height: 1.2;
  font-weight: 600;
}

:where(.cta-band) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-width: 160px;
  padding: 18px 40px;
  border-radius: 999px;
  background-color: var(--white);
  font-size: 17px;
  cursor: pointer;
}

@media (max-width: 900px) {
  :where(.cta-band) .content {
    padding-inline: 40px;
  }
}

/* .hero-title — the 48px hero heading shared by the gradient hero sections
   (21f/23m/24j/33k/42m/49n/58c/64b/68w). Plain class (0,1,0), so each
   section's own mobile override `.section-X .title` (0,2,0) still wins.
   Add `hero-title` alongside `title` on the heading element. */
.hero-title {
  margin: 0;
  font-size: 48px;
  line-height: 1.1;
  font-weight: 600;
}

/* .split-hero — two-column hero inner (copy on one side, form/pills/list on
   the other; space-between, stacks at <=900px). Shared by section-21f
   (newsletter), 24j (pricing pills) and 33k (about "stories"). Add
   `split-hero` on the <section>. (58c/58l use a variant and keep their own.) */
.split-hero .inner {
  position: relative;
  z-index: 1;
  min-height: 652px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

@media (max-width: 900px) {
  .split-hero .inner {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 40px;
    padding-block: 56px;
  }
}

/* .container — the page-width wrapper. This is the common 1184px case shared
   by navbar, footer and 24 sections. Kept as a plain class (0,1,0); any
   section that needs a different max-width (760/1280/1328) or extras
   (position/z-index) keeps its own `.section-X .container` rule (0,2,0),
   which always wins — including the <=900px `padding-inline: 40px` gutter. */
.container {
  width: 100%;
  max-width: 1184px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Gradient hero backgrounds. The shared shell (position/overflow/gradient/
   font/color) for the purple heros (21f/24j/42m/49n) and pink heros
   (33k/58c/58l/64b). Each section keeps its own `min-height` (the desktop
   height + its per-section mobile override differ). Add the class on the
   <section> next to `section-XX`. */
.hero-purple {
  position: relative;
  overflow: hidden;
  background-color: var(--dark-purple);
  background-image: linear-gradient(to top right, #7844fe 0%, #4d25b4 100%);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--white);
}

.hero-pink {
  position: relative;
  overflow: hidden;
  background-color: var(--dark-pink);
  background-image: linear-gradient(90deg, #d41357 0%, #ef226a 100%);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--white);
}

/* BUTTON MOTION — the standardized hover / press behaviour of EVERY button on
   the site. It lives here (this file loads last) so all buttons share ONE
   timing and ONE interaction rule; each section file keeps only the button's
   RESTING look (size, padding, resting colors).

   >>> Do NOT add `transition` or `:hover` to a CTA button inside a section
       file. Add the button's selector to the lists below instead. <<<
   (Section-specific controls are not part of this: the 47s slider tabs and
   arrows, the category chips and the filter pills keep their own interaction
   in their own file, since it is tied to that widget's states.)

   The rule, in three parts:

   1. LIFT — every button rises 2px on hover and presses back down on :active.

   2. SOLID buttons INVERT on hover: the background takes the text color and
      the text takes the background color, plus a 2px ring in the original
      background color. The ring is what keeps the button visible when the
      inverted fill happens to match the section behind it (e.g. a white pill
      on a purple band inverts to purple + white ring = ghost pill).
      The ring is drawn with `box-shadow: inset` on buttons with no border and
      with `border-color` on the ones that already reserve `2px solid
      transparent` (19f / 26v / 83e) — both land on the same outer edge, and
      neither changes the button's size.

   3. GRADIENT buttons keep their fill and SLIDE it: the section file declares
      a mirrored gradient (A → B → A) which is stretched to twice the button
      width here, so sliding it end to end flips the gradient's direction.

   OUTLINE / GHOST buttons are the same idea as (2) read backwards: on hover
   they fill with their border color and the text takes the color of the
   section behind them. */

/* ----- 1. one timing for every button ----- */
.navbar .btn,
.section-10a .actions .btn,
.section-16s .card-btn,
.section-18d .load-more,
.section-19f .btn,
.section-21f .submit,
.section-23m .submit,
.section-26v .btn,
.section-36y .btn,
.section-38x .btn,
.section-40b .btn,
.section-51g .btn,
.section-55m .btn,
.section-57k .btn,
.section-63m .quote,
.section-70p .btn,
.section-72e .btn,
.section-78p .cta,
.section-83e .btn,
.section-92t .btn {
  transition: background-color 0.28s ease, background-position 0.55s ease,
    color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease,
    transform 0.28s ease;
}

/* ----- the lift (and the press) ----- */
.navbar .btn:hover,
.section-10a .actions .btn:hover,
.section-16s .card-btn:hover,
.section-18d .load-more:hover,
.section-19f .btn:hover,
.section-21f .submit:hover,
.section-23m .submit:hover,
.section-26v .btn:hover,
.section-36y .btn:hover,
.section-38x .btn:hover,
.section-40b .btn:hover,
.section-51g .btn:hover,
.section-55m .btn:hover,
.section-57k .btn:hover,
.section-63m .quote:hover,
.section-70p .btn:hover,
.section-72e .btn:hover,
.section-78p .cta:hover,
.section-83e .btn:hover,
.section-92t .btn:hover {
  transform: translateY(-2px);
}

.navbar .btn:active,
.section-10a .actions .btn:active,
.section-16s .card-btn:active,
.section-18d .load-more:active,
.section-19f .btn:active,
.section-21f .submit:active,
.section-23m .submit:active,
.section-26v .btn:active,
.section-36y .btn:active,
.section-38x .btn:active,
.section-40b .btn:active,
.section-51g .btn:active,
.section-55m .btn:active,
.section-57k .btn:active,
.section-63m .quote:active,
.section-70p .btn:active,
.section-72e .btn:active,
.section-78p .cta:active,
.section-83e .btn:active,
.section-92t .btn:active {
  transform: translateY(0);
}

/* ----- 2. SOLID buttons: invert background <-> text, ring in the old bg -----
   Grouped by color pair. The ring uses `box-shadow: inset` here... */

/* Pink <-> White */
.navbar .btn--primary:hover,
.section-10a .actions .btn--pink:hover,
.section-36y .btn:hover,
.section-70p .btn:hover,
.section-40b .btn--pink:hover {
  background-color: var(--white);
  color: var(--pink);
  box-shadow: inset 0 0 0 2px var(--pink);
}

/* Purple <-> White (18d is the "Load more" button) */
.section-40b .btn--purple:hover,
.section-18d .load-more:hover {
  background-color: var(--white);
  color: var(--purple);
  box-shadow: inset 0 0 0 2px var(--purple);
}

/* Gray 2 <-> White */
.section-40b .btn--grey:hover {
  background-color: var(--white);
  color: var(--gray-2);
  box-shadow: inset 0 0 0 2px var(--gray-2);
}

/* White <-> #4b2e83 — no token (white pills over purple / over the hero) */
.section-10a .actions .btn--light:hover,
.section-92t .btn--light:hover {
  background-color: #4b2e83;
  color: var(--white);
  box-shadow: inset 0 0 0 2px var(--white);
}

/* White <-> Purple (21f/23m are form submit buttons) */
.section-21f .submit:hover,
.section-23m .submit:hover,
.section-38x .btn:hover {
  background-color: var(--purple);
  color: var(--white);
  box-shadow: inset 0 0 0 2px var(--white);
}

/* White <-> Pink. 92t's "Get your quote" is the variant of the white pill that
   keeps pink text, so it inverts to pink — it must stay after the .btn--light
   rule above, which it overrides for that one button. */
.section-92t .quote:hover,
.section-51g .btn:hover,
.section-55m .btn:hover {
  background-color: var(--pink);
  color: var(--white);
  box-shadow: inset 0 0 0 2px var(--white);
}

/* ...and `border-color` for the buttons that already reserve a 2px
   transparent border, where an inset ring would float inside the fill. */

/* Pink <-> White */
.section-19f .btn--pink:hover,
.section-26v .btn--pink:hover,
.section-83e .btn--pink:hover {
  background-color: var(--white);
  color: var(--pink);
  border-color: var(--pink);
}

/* Purple <-> White */
.section-19f .btn--purple:hover {
  background-color: var(--white);
  color: var(--purple);
  border-color: var(--purple);
}

/* ----- OUTLINE / GHOST buttons: fill with the border color, text takes the
   color of the section behind the button ----- */

/* White outline over purple (#4b2e83, no token — reads on both the hero and the bands) */
.navbar .btn--ghost:hover,
.section-10a .actions .btn--outline:hover,
.section-92t .btn--outline:hover {
  background-color: var(--white);
  color: #4b2e83;
  border-color: var(--white);
}

/* White outline over Purple.
   `box-shadow: none` because in 38x the ghost is also a `.btn`, so it picks up
   the solid rule's ring above — it has a real white border already. */
.section-38x .btn--ghost:hover,
.section-72e .btn:hover {
  background-color: var(--white);
  color: var(--purple);
  box-shadow: none;
}

/* White outline over the purple gradient of 57k (#4d25b4 -> Purple) */
.section-57k .btn--outline:hover {
  background-color: var(--white);
  color: var(--dark-purple);
}

/* White outline over Pink */
.section-16s .card-btn:hover {
  background-color: var(--white);
  color: var(--pink);
}

/* (same `box-shadow: none` reason as 38x above: it is also a `.btn`) */
.section-55m .btn--outline:hover {
  background-color: var(--white);
  color: var(--pink);
  box-shadow: none;
}

/* white outline over the dark pricing photo */
.section-83e .btn--outline:hover {
  background-color: var(--white);
  color: var(--gray);
}

/* colored outline over White */
.section-19f .btn--purple-outline:hover {
  background-color: var(--purple);
  color: var(--white);
}

.section-26v .btn--outline:hover {
  background-color: var(--pink);
  color: var(--white);
}

/* ----- 3. GRADIENT buttons: the fill slides and flips direction -----
   The section file declares the mirrored gradient (A -> B -> A); here it is
   stretched to twice the button width and slid from one end to the other. */
.section-10a .actions .btn--gradient,
.section-63m .quote,
.section-78p .cta {
  background-size: 200% 100%;
  background-position: 0% 50%;
}

.section-10a .actions .btn--gradient:hover,
.section-63m .quote:hover,
.section-78p .cta:hover {
  background-position: 100% 50%;
}

/* ----- buttons whose resting colors change inside a media query keep their
   inversion in the matching media query (must come after the rules above) --- */

/* the mobile menu turns the primary CTA into a white pill on the pink overlay */
@media (max-width: 900px) {
  .nav-actions .btn--primary:hover {
    background-color: #4b2e83;
    color: var(--white);
    box-shadow: inset 0 0 0 2px var(--white);
  }
}

/* on light pages the navbar ghost button is dark on white */
@media (min-width: 901px) {
  .page--light .navbar .btn--ghost:hover {
    background-color: #333940;
    color: var(--white);
    border-color: #333940;
  }
}

/* Form consent checkbox — identical in the newsletter (21f) and contact (23m)
   forms. `.agree` exists only in those two forms, so these are safe as global
   rules (no per-page class needed). */
.agree input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.agree input:checked {
  background: var(--white);
  border-color: var(--white);
}

.agree input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--purple);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Honeypot — a real field that must be present in the POST and must stay empty;
   it is how a bot is spotted. Moved off-screen rather than `display: none`, because
   some bots deliberately skip fields that are display:none — which would defeat the
   trap. `tabindex="-1"` keeps keyboard users from ever landing on it.

   COVERS BOTH honeypots: Brevo's `email_address_check` input, which carries .hp
   directly, and the contact form's `hp` field, which sits in a .hp wrapper. Both are
   inside .form, so this one rule is enough — a second `.hp` rule was added alongside
   it on 2026-09-12 and removed the same day as a duplicate. Do not add another. */
.form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Sign-up feedback, swapped in by main.js in place of the form. The sign-up is
   double opt-in, so "check your inbox" is the only truthful success state — the
   visitor is NOT on the list until they click the confirmation link. Both live in
   purple sections, hence white text. */
.form-msg {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--white);
}

.form-msg--err {
  color: #ffd7e4;
}

/* R2 — the impact band's four items carry labels but no figures (DES-30 removed the
   invented placeholders). This note says why. It appears in both places the band is
   used — section-31n on Sustainability and section-78p on Home — so colour is
   INHERITED rather than set: 31n is light and 78p is dark, and one rule has to read
   correctly on both. */
.stats-note {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.75;
}

/* R5 — eyebrow above the home hero headline (slide 1 only). Matches the eyebrow
   metrics used in sections 63m / 68w / 78p; colour inherits from the hero. */
.section-10a .eyebrow {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

/* ============================================================================
   WHATSAPP CTA — HIDDEN FOR LAUNCH. RE-ENABLE BY DELETING THE RULE BELOW.
   ============================================================================
   The number (wa.me/41766117010) CANNOT be answering on launch day, and that is
   by design rather than an oversight: Meta enables a WhatsApp Business number
   only once a live domain plus Privacy and T&C are publicly reachable WITHOUT a
   password — and those pages become public only at cutover step 15, when Basic
   Auth drops on dingx.ch. So the flip itself creates the precondition for the
   approval. It is a two-stage sequence, not a risk to watch for.

   Stage 1 (this rule): ship the CTAs hidden, so nothing dead-ends. A CTA that
   goes nowhere is what the Phase-0 posture forbids.

   THIS CLASS NOW COVERS TWO ELEMENT TYPES: the six `<a class="btn">` buttons, and
   inline `<span>`s wrapping the WhatsApp clause inside four blog sentences (R7).
   RE-ENABLE BY DELETING THIS RULE, NOT BY CHANGING ITS VALUE. No single `display:`
   is correct for both — the buttons need the flex their section rules give them,
   the spans need `inline`. Deleting restores each element's own display; setting a
   value would break one of the two. The spans are written so the sentence reads
   correctly either way: hidden, "Join the waitlist — a person will answer."

   The failure message on the ten Brevo forms is NOT part of this toggle. It used
   to name WhatsApp, which fired at exactly the wrong moment — someone had just
   failed to join the waitlist. It now points at contact.html permanently, because
   that page works before and after Meta approves and so needs no second edit.
   Stage 2 (after Meta approves): DELETE this rule, merge, and deploy. That is a
   website deploy — a git pull of master — not a vhost change, so it needs
   Friedrich's merge and belongs in the POST-flip sequence, not step 14.

   Deliberately one rule over six buttons: at step 14 the check is "confirm the
   WhatsApp CTA is absent on the served docroot", which is an observable state,
   rather than "remember to hide six buttons", which is an action someone has to
   perform inside the cutover window. Friedrich chose this (2026-09-08), option
   (b) of three, endorsed by the go-live session on that reasoning.

   `display: none` and not `visibility`/opacity: the link must leave the tab
   order and the accessibility tree too, not merely become invisible.

   `!important` for the same reason the `[hidden]` rule near the end of this file
   carries it: the section rules that lay out button rows (`.section-10a .actions
   .btn` and friends, 0-3-0) set `display` on this element and would otherwise win
   over a single class, whatever the source order. Verified rendered — without it
   the buttons stayed visible at `display: flex`. */
.cta-whatsapp {
  display: none !important;
}

/* Footer trust line — sits under the Contact & Legal list. Deliberately quiet: it is
   a statement about the site, not a badge and not another nav item, so it must not
   compete with the legal links above it. Smaller and dimmer than a list item; the
   claim itself is what carries, not the styling.
   The wording and the rule for changing it are in the footer partial beside it. */
.footer__trust {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.7;
}

/* ===== reveal.css ===== */
/* SCROLL REVEAL — elements fade up the first time they come into view.
   Used across every page under /en/. To opt an element in, give it `.reveal`;
   to cascade a row of them, give their container `.reveal-stagger`.

   Two safety nets:
   1. The hidden state is gated behind `.js-reveal` on <html>, which the inline
      one-liner in the page <head> adds. With JavaScript off the class never
      lands and nothing is ever hidden — the page just renders, fully readable.
   2. `prefers-reduced-motion: reduce` skips the whole thing (the script also
      stops observing).

   The reveal happens ONCE: the script drops each element from the observer as
   soon as it shows it, so scrolling back up never re-animates anything.

   The 16px slide uses the standalone `translate` property, NOT `transform`, and
   that is deliberate: several elements on the site already carry a transform of
   their own for layout (the phone mockups in sections 42m/64b are centered with
   `transform: translateY(-50%)`, for one). `translate` composes with whatever
   transform is already there instead of replacing it, so `.reveal` can be put on
   any element without knowing what it is doing. */

/* The two knobs: `translate` is HOW FAR the element travels, the duration in
   `transition` is HOW LONG it takes. Keep the two durations equal, otherwise the
   fade and the slide finish at different moments. */
.js-reveal .reveal {
  opacity: 0;
  translate: 0 32px;
  transition: opacity 1200ms ease, translate 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  translate: none;
}

/* Cascade inside a grid or a list: the CONTAINER carries `.reveal-stagger` and
   its revealing children come in 140ms apart. Five steps covers the longest run
   on the page (the five items of section 57k). */
.js-reveal .reveal-stagger>.reveal:nth-child(2) {
  transition-delay: 140ms;
}

.js-reveal .reveal-stagger>.reveal:nth-child(3) {
  transition-delay: 280ms;
}

.js-reveal .reveal-stagger>.reveal:nth-child(4) {
  transition-delay: 420ms;
}

.js-reveal .reveal-stagger>.reveal:nth-child(5) {
  transition-delay: 560ms;
}

/* Someone who asked for less motion gets everything already in place. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }
}


/* ===== blog-posts.css ===== */
/* THE FOUR BLOG POSTS — per-article image + the bits the article body needs.

   Images: the blog components paint their photo as a CSS background, because
   html-validate forbids inline styles (no-inline-style) and the pipeline runs it
   on every pull request. So each article gets ONE image class that works in all
   three places the same photo appears — the featured post on the landing page,
   the card in "Latest posts", and the hero of the article itself:

     <div class="post__figure blog-img--01" …>   (section 13b, landing page)
     <div class="card__img blog-img--01" …>      (section 18d, cards)
     <div class="hero blog-img--01" …>           (section 12k, article page)

   The selectors are scoped under their section on purpose: the section rules that
   set the DEFAULT image (and the positional `.card:nth-of-type(n)` ones) would
   otherwise win on specificity.

   To swap an article's photo, change the file in the one rule below. */

.section-13b .post__figure.blog-img--01,
.section-18d .card__img.blog-img--01,
.section-12k .hero.blog-img--01 {
  /* IMAGE: assets/img/01-move-to-simplicity-why-dingx-exists.webp */
  background-image: url("../img/01-move-to-simplicity-why-dingx-exists.webp");
}

.section-13b .post__figure.blog-img--02,
.section-18d .card__img.blog-img--02,
.section-12k .hero.blog-img--02 {
  /* IMAGE: assets/img/02-we-store-stories-not-just-objects.webp */
  background-image: url("../img/02-we-store-stories-not-just-objects.webp");
}

.section-13b .post__figure.blog-img--03,
.section-18d .card__img.blog-img--03,
.section-12k .hero.blog-img--03 {
  /* IMAGE: assets/img/03-what-happens-to-your-things-after-pickup.webp */
  background-image: url("../img/03-what-happens-to-your-things-after-pickup.webp");
}

.section-13b .post__figure.blog-img--04,
.section-18d .card__img.blog-img--04,
.section-12k .hero.blog-img--04 {
  /* IMAGE: assets/img/04-Nothing-is-wasted-storage-that-respects-lifes-cycles.webp */
  background-image: url("../img/04-Nothing-is-wasted-storage-that-respects-lifes-cycles.webp");
}

/* The article hero is `background-size: 100%` by default (the model page's image
   is wider than tall and was framed for it). The four post photos are 1920x1280,
   so they get `cover` to fill the 420px band without letterboxing. */
.section-12k .hero[class*="blog-img--"] {
  background-size: cover;
}

/* ----- Article body: subheadings and lists -----
   The model page's body is paragraphs only; the real articles are structured with
   subheadings, and post 04 has a short list. Same type scale as the rest of 12k. */
.section-12k .body h2 {
  margin: 40px 0 16px;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--gray);
}

.section-12k .body ul {
  margin: 0 0 24px;
  padding-left: 22px;
}

.section-12k .body li {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray);
}

/* ----- "Read more" on the featured post (section 13b) -----
   The landing page's featured post had no link into the article. This is the same
   pill as the cards' `.card__more`, sitting next to the category chip. */
.section-13b .post__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.section-13b .post__actions .post__category {
  margin-top: 0;
}

.section-13b .post__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  border: 2px solid var(--pink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  background-color: var(--pink);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.section-13b .post__more:hover {
  background-color: transparent;
  color: var(--pink);
}


/* `hidden` has to beat any component rule that sets `display` on the same element. */
[hidden] { display: none !important; }

/* ===== hive.css ===== */
/* "HOW IT WORKS" HONEYCOMB — shared by the home (section 22c) and Pricing (19f).
   Both pages used to render this as one flat picture; it is HTML now so the copy
   can be translated for the /de/ tree (docs/STRUCTURE.md §4). Nothing here is
   baked into an image except the three photos and the two dotted arcs.

   Geometry is measured from the original artwork: a 478x425 hexagon on a
   1287x1384 canvas, columns 391px apart, rows 448px apart. Every size and
   position below is a percentage of that canvas, so the whole block scales with
   its container and the proportions never drift.

   Type scales in `cqw` (percent of the hive's own width) rather than `vw`, so it
   keeps its proportion after the container stops growing at 1184px. */

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

.hive {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 1184px;
  margin-inline: auto;
  aspect-ratio: 1287 / 1384;
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--white);
}

/* ----- The hexagon -----
   One rounded-hexagon path, declared once per page in the markup and reused by
   every cell, photos included. `objectBoundingBox` makes it stretch to whatever
   size the cell has. */
.hive__cell {
  position: absolute;
  width: 37.14%;
  /* 478 / 1287 */
  aspect-ratio: 478 / 425;
  clip-path: url(#hiveHex);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* in `cqw`, never `%`: the cells are absolutely positioned, so a percentage
     padding would resolve against the HIVE's width, not the cell's — three times
     larger than intended. Measured from the artwork: the copy column is ~200px
     wide inside a 478px hexagon. */
  padding: 3cqw 9.8cqw;
  overflow: hidden;
}

/* left = (centre - width/2) / 1287, top = (centre - height/2) / 1384 */
.hive__cell--delivery  { left: 31.62%; top:  2.13%; }
.hive__cell--store     { left:  1.32%; top: 18.28%; }
.hive__cell--move      { left: 62.08%; top: 18.28%; }
.hive__cell--hub       { left: 31.62%; top: 34.46%; }
.hive__cell--storage   { left:  1.32%; top: 50.65%; }
.hive__cell--inventory { left: 62.08%; top: 50.65%; }
.hive__cell--manage    { left: 31.62%; top: 66.83%; }

/* ----- Service hexes are links -----
   Store / Move / Manage each open their own page. The photo hexes stay inert:
   they carry no label of their own. */
a.hive__cell {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: filter 0.25s ease, transform 0.25s ease;
}

a.hive__cell:hover,
a.hive__cell:focus-visible {
  filter: brightness(1.08);
  transform: scale(1.02);
  z-index: 2;
}

/* clip-path crops an outline away, so the focus ring has to be drawn inside */
a.hive__cell:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--white);
}

@media (prefers-reduced-motion: reduce) {
  a.hive__cell { transition: none; }
  a.hive__cell:hover,
  a.hive__cell:focus-visible { transform: none; }
}

.hive__cell--store  { background-color: #ee5087; }
.hive__cell--move,
.hive__cell--manage { background-color: var(--pink); }
.hive__cell--hub    { background-color: var(--purple); }

/* Photo cells: the picture fills the cell and the same path crops it. */
.hive__cell--photo { padding: 0; }

.hive__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----- Icon: white disc, glyph in pink -----
   These are the same three glyphs the "One platform" cards use, in a pink copy:
   assets/img/icon-collect-pink.webp, icon-store-pink.webp, icon-manage-pink.webp.
   A CSS mask over the white originals would have saved the three files, but mask
   support on raster images is uneven across browsers and the glyph disappeared on
   some of them — a plain <img> renders everywhere. */
.hive__icon {
  width: 3.73cqw;
  /* 48px disc on the 478px hexagon of the artwork */
  aspect-ratio: 1;
  border-radius: 999px;
  background-color: var(--white);
  display: grid;
  place-items: center;
  margin-bottom: 2cqw;
  flex: none;
}

.hive__icon img {
  width: 56%;
  height: 56%;
  object-fit: contain;
  display: block;
}

/* ----- Copy ----- */
.hive__title {
  margin: 0 0 3.2cqw;
  font-size: 3.42cqw;
  line-height: 1.05;
  font-weight: 600;
}

.hive__cell--hub .hive__title {
  margin: 0;
  font-size: 3.9cqw;
  line-height: 1.1;
}

.hive__lead {
  margin: 0 0 3.2cqw;
  font-size: 1.33cqw;
  line-height: 1.35;
}

.hive__list {
  margin: 0;
  padding-left: 1.15em;
  list-style: disc;
  text-align: left;
  font-size: 1.33cqw;
  line-height: 1.45;
}

.hive__list li {
  margin-bottom: 0.25em;
}

/* ----- The three dotted arcs -----
   Decoration only, no text: they stay as images. One arc per photo/service pair,
   at 60deg (delivery -> Move), 180deg (storage -> Store) and 300deg
   (inventory -> Manage) around the hive centre.
   IMAGES: assets/img/hive-line-left.webp, hive-line-right.webp and
   hive-line-bottom.webp */
.hive__line {
  position: absolute;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
}

.hive__line--left {
  left: -0.8%;
  top: 41.2%;
  width: 5.98%;
  aspect-ratio: 77 / 234;
  background-image: url("../img/hive-line-left.webp");
}

.hive__line--right {
  left: 65.5%;
  top: 9.2%;
  width: 12.74%;
  aspect-ratio: 164 / 121;
  background-image: url("../img/hive-line-right.webp");
}

.hive__line--bottom {
  left: 65.5%;
  top: 81.69%;
  width: 12.74%;
  aspect-ratio: 164 / 121;
  background-image: url("../img/hive-line-bottom.webp");
}

/* ----- Mobile (<= 900px): same markup, stacked -----
   The design reorders the cells on small screens; `order` does that without
   touching the HTML, so the reading order for a screen reader and for a
   translator stays the DOM order. */
@media (max-width: 900px) {
  .hive {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 420px;
    padding-inline: 24px;
  }

  .hive__cell {
    position: static;
    width: 100%;
    padding: 9cqw 13cqw;
  }

  /* has to beat the rule above, or the photo shrinks and the crop shows through */
  .hive__cell.hive__cell--photo {
    padding: 0;
  }

  .hive__icon { width: 15cqw; margin-bottom: 4cqw; }

  .hive__title { font-size: 8.5cqw; }
  .hive__cell--hub .hive__title { font-size: 9.5cqw; }

  .hive__lead,
  .hive__list { font-size: 3.9cqw; }

  /* the stacking order of the mobile artwork */
  .hive__cell--hub       { order: 1; }
  .hive__cell--store     { order: 2; }
  .hive__cell--storage   { order: 3; }
  .hive__cell--move      { order: 4; }
  .hive__cell--delivery  { order: 5; }
  .hive__cell--manage    { order: 6; }
  .hive__cell--inventory { order: 7; }

  /* the desktop arcs would land in the wrong place once stacked */
  .hive__line { display: none; }
}

/* ============================================================================
   LEGAL PAGES — privacy.html, terms.html, impressum.html
   Long-form legal prose. main.css otherwise styles everything through
   per-section classes and carries no base typography, so these pages need
   their own block. Scoped under .legal-prose: nothing here can reach an
   existing page. ========================================================== */

/* Compact hero for legal pages: the default .section-10a is an 847px photo
   hero, which is the wrong weight above a policy document. Keeps the navbar in
   its normal context (white-on-dark) — pair with `--branded` so the background
   is the brand pattern, not a lifestyle photograph. */
.section-10a--compact {
  min-height: auto;
}

.section-10a--compact .inner {
  padding-block: 32px 72px;
}

.section-10a--compact .title {
  font-size: 52px;
}

.section-10a--compact .subtitle {
  margin-bottom: 0;
}

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

.section-legal {
  padding-block: 72px 96px;
  background-color: var(--white);
  font-family: "canada-type-gibson", Avenir, Arial, system-ui, sans-serif;
  color: var(--black);
}

/* Measure capped for readability — long legal text is unreadable at the
   1184px container width. Capped on the children rather than on .legal-prose
   itself, so the text still starts at the shared container's left edge and
   lines up with the hero title above it (capping the container would centre
   the whole block and break that alignment). */
.legal-prose > * {
  max-width: 800px;
}

.legal-prose h2 {
  margin: 48px 0 16px;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--black);
}

.legal-prose h3 {
  margin: 32px 0 12px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
}

.legal-prose p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--gray);
}

.legal-prose strong {
  font-weight: 600;
  color: var(--black);
}

.legal-prose ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

.legal-prose li {
  margin-bottom: 10px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--gray);
}

.legal-prose a {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-prose a:hover {
  color: var(--dark-pink);
}

/* Pull-quote used for the plain-language summary at the top of the Privacy
   Policy. */
.legal-prose blockquote {
  margin: 24px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--pink);
  border-radius: 0 8px 8px 0;
  background-color: var(--gray-7);
}

.legal-prose blockquote p:last-child {
  margin-bottom: 0;
}

.legal-prose hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--gray-5);
}

@media (max-width: 900px) {
  .section-10a--compact .title {
    font-size: 37px;
  }

  .section-legal {
    padding-block: 48px 64px;
  }

  .legal-prose h2 {
    margin-top: 36px;
    font-size: 22px;
  }
}
