/* ONBO · white site, logo C (2026-11-05). Every section is white — the header and the opening block too; only the last
   section with the form, and the footer under it, are charcoal. Lime lives on buttons, cards, the logo's „ON“ pill and as
   a marker behind key words — never as text on white, where it vanishes. Loaded last on every page. */

/* ---------- white everywhere: the page's tokens */
html:root[data-look="2"][data-v] {
  --bg: #FFFFFF; --surface: #F5F6F1; --surface-2: #ECEEE7; --ink: #10130A; --ink-2: #4B5060; --line: #E3E5E0;
  --accent: #10130A; --accent-ink: #FFFFFF; --accent-text: #10130A;
  --block-bg: #F5F6F1; --block-ink: #10130A; --block-ink-2: #4B5060; --block-line: #E3E5E0; --block-accent: #10130A;
  --mark: #10130A; --frame: #E3E5E0; --grid: rgba(16, 19, 10, .05); --shadow: 0 24px 50px -30px rgba(16, 19, 10, .25);
  --pop-on-dark: #10130A; --pop-deep: #10130A;
  --charcoal: #1E1F22; --charcoal-2: #2A2B2F; --on-charcoal: #F2F3EE; --on-charcoal-2: #A9ACB3;
  --marker: linear-gradient(transparent 56%, var(--lime, #C6F432) 56%, var(--lime, #C6F432) 90%, transparent 90%);
  color-scheme: light;
}
html[data-look="2"][data-v] body { background: #FFFFFF; color: var(--ink); }
html[data-look="2"][data-v] .sec:not(.close), html[data-look="2"][data-v] .d-proof,
html[data-look="2"][data-v] .p-hero, html[data-look="2"][data-v] .cs-hero { background: #FFFFFF; color: var(--ink); }
html[data-look="2"][data-v] .display, html[data-look="2"][data-v] h1, html[data-look="2"][data-v] h2, html[data-look="2"][data-v] h3 { color: var(--ink); }
html[data-look="2"][data-v] .lede, html[data-look="2"][data-v] main p { color: var(--ink-2); }
html[data-look="2"][data-v] .d-kick { color: var(--ink-2); }
html[data-look="2"][data-v] .d-kick::before, html[data-look="2"][data-v] .d-proof .d-kick::before { background-color: #10130A; }

/* header: white, a hairline, logo C in black with a lime „ON“ */
html[data-look="2"][data-v] .bar { background: rgba(255, 255, 255, .9); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-look="2"][data-v] .bar nav a:not(.btn), html[data-look="2"][data-v] .bar .lang, html[data-look="2"][data-v] .bar button:not(.btn) { color: var(--ink); }
html[data-look="2"][data-v] .logo-c { color: #111214; font: 800 30px/1 "Geologica", "Inter Tight", sans-serif; letter-spacing: -.05em; }
html[data-look="2"][data-v] .logo-c i { font-style: normal; background: #111214; color: var(--lime, #C6F432); border-radius: 999px; padding: 1px 10px 5px 9px; }
html[data-look="2"][data-v] .logo-c span { padding-left: 3px; }
@media (max-width: 760px) { html[data-look="2"][data-v] .logo-c { font-size: 26px; } }

/* the opening block on white: the key words get a lime marker instead of lime text */
html[data-look="2"][data-v] .p-hero__copy .h1 .p-hl, html[data-look="2"][data-v] .cs-hero .p-hl {
  color: var(--ink); background: var(--marker); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .04em; }
html[data-look="2"][data-v] .p-bens li { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
html[data-look="2"][data-v] .p-bens li b { color: var(--ink); }
html[data-look="2"][data-v] .p-slogan-hero { color: var(--ink); }
html[data-look="2"][data-v] .p-slogan-hero span { color: var(--ink); background: var(--marker); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html[data-look="2"][data-v] .p-cut__spark { fill: #10130A; }
html[data-look="2"][data-v] .d-hero::before { background: none; }
@media (max-width: 760px) {
  /* on phones the slogan is a lime label on the picture */
  html[data-look="2"][data-v] .p-slogan-hero span { background: none; }
}

/* cards on white: a light surface and a hairline, no glow */
html[data-look="2"][data-v] .d-calc__in, html[data-look="2"][data-v] .d-stat:not(.d-stat--dark),
html[data-look="2"][data-v] .d-team__pts li, html[data-look="2"][data-v] .d-demo__card { background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
html[data-look="2"][data-v] .d-stat:not(.d-stat--dark) b { color: var(--ink); }
html[data-look="2"][data-v] .d-stat:not(.d-stat--dark) span { color: var(--ink-2); }

/* before and after */
html[data-look="2"][data-v] .p-ba__fig figcaption { color: var(--ink-2); }
html[data-look="2"][data-v] .p-ba__fig--after figcaption > span:first-child { color: #10130A; background: var(--lime, #C6F432); padding: 3px 10px; border-radius: 999px; }
html[data-look="2"][data-v] .p-ba__media { box-shadow: 0 0 0 1px var(--line), 0 24px 50px -30px rgba(16, 19, 10, .35); }

/* steps, team */
html[data-look="2"][data-v] .d-steps { border-top-color: var(--line); }
html[data-look="2"][data-v] .d-steps li { border-color: var(--line); }
html[data-look="2"][data-v] .d-team__faces span { border-color: #FFFFFF; }
html[data-look="2"][data-v] .d-team__faces span:first-child { background: #10130A; color: #FFFFFF; }

/* the route rail: visible on white and on charcoal */
.p-route__line { background: rgba(120, 126, 140, .35); }
html[data-look="2"][data-v] .p-route__dot { box-shadow: 0 0 0 2px #10130A, 0 0 14px -2px rgba(198, 244, 50, .7); }

/* ---------- the last section, with the form: charcoal, white type, the form as a white card, lime buttons */
html[data-look="2"][data-v] .close, html[data-look="2"][data-v] .foot {
  --ink: var(--on-charcoal); --ink-2: var(--on-charcoal-2); --line: #34363B; --block-ink: var(--on-charcoal); --block-ink-2: var(--on-charcoal-2);
  background: var(--charcoal); color: var(--on-charcoal); color-scheme: dark; }
html[data-look="2"][data-v] .close .h2, html[data-look="2"][data-v] .close h2 { color: #FFFFFF; }
html[data-look="2"][data-v] .close .lede, html[data-look="2"][data-v] .close p { color: var(--on-charcoal-2); }
html[data-look="2"][data-v] .close .p-slogan, html[data-look="2"][data-v] .p-slogan { color: #FFFFFF; }
html[data-look="2"][data-v] .foot { border-top: 1px solid #34363B; }
html[data-look="2"][data-v] .foot, html[data-look="2"][data-v] .foot a, html[data-look="2"][data-v] .foot p { color: var(--on-charcoal-2); }
html[data-look="2"][data-v] .foot a:hover { color: #FFFFFF; }
html[data-look="2"][data-v] .close .form { background: #FFFFFF; border: 0; box-shadow: 0 30px 70px -36px rgba(0, 0, 0, .8);
  --ink: #10130A; --ink-2: #4B5060; --line: #D9DBD3; color: #10130A; color-scheme: light; }
html[data-look="2"][data-v] .close .form label { color: #10130A; }
html[data-look="2"][data-v] .close .form p, html[data-look="2"][data-v] .close .form .d-reassure { color: #4B5060; }
html[data-look="2"][data-v] .close .form input, html[data-look="2"][data-v] .close .form select, html[data-look="2"][data-v] .close .form textarea { background: #F5F6F1; color: #10130A; }
html[data-look="2"][data-v] .close .form .btn--primary, html[data-look="2"][data-v] .close .form button[type="submit"],
html[data-look="2"][data-v] .close .cta-row .btn--primary { background: var(--lime, #C6F432); color: #10130A; }
html[data-look="2"][data-v] .close .form .btn--primary:hover, html[data-look="2"][data-v] .close .form button[type="submit"]:hover,
html[data-look="2"][data-v] .close .cta-row .btn--primary:hover { background: var(--lime-hi, #D6FB5C); }
html[data-look="2"][data-v] .close .form .d-reassure::before { background: var(--lime, #C6F432) var(--check-dark) center / 12px no-repeat; }

/* above the form, logo C large: the „ON“ pill switches on (fills with lime) when the visitor arrives at the form */
html[data-look="2"][data-v] .p-arrive { display: inline-flex; align-items: center; align-self: flex-start; height: auto; color: #FFFFFF;
  font: 800 clamp(44px, 4.6vw, 64px)/1 "Geologica", "Inter Tight", sans-serif; letter-spacing: -.05em; }
html[data-look="2"][data-v] .p-arrive i { font-style: normal; border-radius: 999px; padding: .02em .3em .12em .27em; background: var(--lime, #C6F432); color: #111214;
  box-shadow: inset 0 0 0 3px var(--lime, #C6F432); transition: background-color .5s ease .15s, color .5s ease .15s; }
html[data-look="2"][data-v] .p-arrive span { padding-left: .08em; color: #FFFFFF; }
html.is-travel[data-look="2"][data-v] .p-arrive i { background: transparent; color: var(--lime, #C6F432); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { html[data-look="2"][data-v] .p-arrive i { transition: none; } }

/* the aurora glow behind the page belonged to the dark look: on white it reads as a smudge, so it is off */
html[data-bg] .p-bg { display: none; }
/* the phone calculator's floating bar stays dark, so its number keeps the lime */
html[data-look="2"][data-v] .d-live b { color: var(--lime, #C6F432); }

/* ---------- the phone menu (menu.js): below 861px the page links sit behind a menu button, in a white panel under the
   header; the page under it dims, and the header keeps the logo and the main button */
.menu-btn, .m-menu, .m-scrim { display: none; }
@media (max-width: 860px) {
  html[data-look="2"][data-v] .bar nav .lang { display: none; }
  html[data-look="2"][data-v] .menu-btn { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0 -8px 0 -4px;
    padding: 0; border: 0; border-radius: 12px; background: transparent; color: #10130A; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html[data-look="2"][data-v] .menu-btn:focus-visible { outline: 2px solid #10130A; outline-offset: -2px; }
  .menu-btn span { position: relative; display: block; width: 22px; height: 2px; }
  .menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
  .menu-btn span::before { transform: translateY(-4px); }
  .menu-btn span::after { transform: translateY(4px); }
  .bar.is-menu .menu-btn span::before { transform: rotate(45deg); }
  .bar.is-menu .menu-btn span::after { transform: rotate(-45deg); }
  .bar__in { gap: 10px; }
  .bar__in nav { margin-left: auto; }

  html[data-look="2"][data-v] .m-menu { display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
    max-height: calc(100svh - 68px); overflow-y: auto; overscroll-behavior: contain;
    padding: 6px var(--gutter, 16px) 20px; background: #FFFFFF; border-bottom: 1px solid var(--line, #E3E5E0);
    box-shadow: 0 28px 50px -28px rgba(16, 19, 10, .35);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .22s; }
  html[data-look="2"][data-v] .bar.is-menu .m-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  /* the dimmed page under the panel; a tap on it closes the menu */
  .m-scrim { display: block; position: absolute; top: 100%; left: 0; right: 0; height: 100vh; background: rgba(16, 19, 10, .38);
    visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; }
  .bar.is-menu .m-scrim { visibility: visible; opacity: 1; transition-delay: 0s; }
  html[data-look="2"][data-v] .bar .m-menu .m-menu__nav { display: grid; gap: 0; font-size: 1rem; }
  html[data-look="2"][data-v] .bar .m-menu .m-menu__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px;
    border-bottom: 1px solid var(--line, #E3E5E0); color: #10130A; text-decoration: none; font-weight: 650; font-size: 1.14rem; letter-spacing: -.01em; }
  .m-menu__link svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
  html[data-look="2"][data-v] .bar .m-menu .m-menu__link[aria-current="page"] span { background: var(--marker); }
  html[data-look="2"][data-v] .bar .m-menu .m-menu__link:active { color: #4B5060; }
  html[data-look="2"][data-v] .m-menu__lang { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px;
    color: #4B5060; font-size: .98rem; }
  html[data-look="2"][data-v] .m-menu__lang .lang { min-width: 52px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line, #E3E5E0);
    border-radius: 999px; background: #F5F6F1; color: #10130A; font: inherit; font-weight: 700; cursor: pointer; }
  html.menu-open { overflow: hidden; }
}
/* the narrowest phones: a smaller logo and button, so logo, button and menu fit in 320px */
@media (max-width: 374px) {
  html[data-look="2"][data-v] .logo-c { font-size: 22px; }
  html[data-look="2"][data-v] .bar .btn { padding: 0 10px; font-size: .8rem; }
  html[data-look="2"][data-v] .bar__in { gap: 8px; }
  html[data-look="2"][data-v] .menu-btn { width: 40px; margin-right: -6px; }
  html.menu-open .d-sticky, html.menu-open .d-live { visibility: hidden; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  html[data-look="2"][data-v] .m-menu, .m-scrim, .menu-btn span::before, .menu-btn span::after { transition: none; }
}