/* ══════════════════════════════════════════════════════════════
   SWISS SUPPORT — B2B / CORPORATE RELOCATION
   Design system: Corporate Ink · Swiss Red · Cool Steel

   Deliberately distinct from the B2C stylesheet (styles.css):
     · cool navy ink instead of warm black
     · cool grey surfaces instead of warm cream
     · no gold — red is the single accent
     · tight radii (2–14px) instead of 22–48px
     · structured grids, thin rules, numbered sequences
   Same brand: the double-S mark, the Swiss red, the serif display.
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Ink — cool corporate navy-black */
  --ink:        #0B1220;
  --ink-2:      #121C30;
  --ink-3:      #1B2740;

  /* Paper — cool greys (B2C uses warm cream; this is the tell) */
  --paper:      #ffffff;
  --paper-alt:  #F4F6F9;
  --paper-dim:  #EAEEF4;

  /* Text */
  --text:       #0B1220;
  --text-mid:   #44526B;
  --text-dim:   #6C7A91;
  --on-ink:     rgba(255,255,255,0.92);
  --on-ink-mid: rgba(255,255,255,0.62);
  --on-ink-dim: rgba(255,255,255,0.42);

  /* Swiss red — the one accent */
  --red:        #C0111E;
  --red-bright: #E2231A;
  --red-soft:   rgba(192,17,30,0.07);
  --red-line:   rgba(192,17,30,0.26);

  /* Lines */
  --line:       rgba(11,18,32,0.10);
  --line-2:     rgba(11,18,32,0.16);
  --line-ink:   rgba(255,255,255,0.12);

  /* Shadow — restrained, corporate */
  --sh-xs:      0 1px 2px rgba(11,18,32,0.05);
  --sh-sm:      0 4px 16px rgba(11,18,32,0.06);
  --sh:         0 12px 36px rgba(11,18,32,0.09);
  --sh-lg:      0 28px 72px rgba(11,18,32,0.14);

  /* Geometry */
  --max:        1240px;
  --r-xs:       3px;
  --r-sm:       6px;
  --r:          10px;
  --r-lg:       14px;

  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── SCROLL BEHAVIOUR ──────────────────────────────────────────
   scrollbar-gutter keeps the gutter reserved whether or not a page is
   long enough to scroll, so moving between pages never shifts the
   layout sideways. scroll-padding-top stops in-page anchors from
   landing underneath the sticky header. */
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-padding-top: 94px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 620px) { html { scroll-padding-top: 80px; } }

/* nozoom.js sets `touch-action: pan-x pan-y` site-wide, and pan-x is exactly
   what lets a finger drag the page sideways — the sheet slides right and
   rubber-bands back. These override it for the corporate pages only: pan-y
   permits vertical scrolling and nothing else, so there is no horizontal
   gesture to answer. It stays more restrictive than pan-x pan-y, so pinch
   zoom remains blocked. Both selectors outrank the injected rule on
   specificity, whatever order the stylesheets end up in. */
html:has(body.b2b) { touch-action: pan-y; }

body.b2b {
  touch-action: pan-y;
  /* `clip`, never `hidden`: overflow:hidden here would turn the body into
     a scroll container and silently cancel position:sticky on the header —
     exactly what happens on the B2C side. clip contains stray width
     without creating one, and stops sideways rubber-banding on touch. */
  overflow-x: clip;
  overscroll-behavior-x: none;
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.b2b-container {
  width: 100%;
  max-width: var(--max);
  margin: 0 inherit;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 4vw, 44px);
  padding-right: clamp(20px, 4vw, 44px);
}

/* ── TYPE ──────────────────────────────────────────────────────
   Headings never carry a tight max-width and never break words:
   line breaks are authored with <br>, not left to the browser. */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  overflow-wrap: normal;
  word-break: keep-all;
  text-wrap: balance;
}
.b2b-display {
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.b2b-display em { font-style: italic; color: var(--red); }
.on-ink .b2b-display em, .b2b-hero .b2b-display em { color: #FF5A4E; }

.b2b-kicker {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 16px;
}
.b2b-kicker.on-ink { color: rgba(255,255,255,0.55); }

.b2b-lede {
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  line-height: 1.72;
  color: var(--text-mid);
  margin: 18px 0 0;
  max-width: 62ch;
}

/* ══ SEGMENTED SWITCH STRIP (B2B ⇄ B2C) ════════════════════════
   Slim bar above the header — the pattern Swiss banks use for
   "Private clients / Corporate clients". Shared with the B2C side
   via bx-switch.js, so both worlds carry the identical control. */
.bx-strip {
  background: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.bx-strip-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 44px);
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.bx-strip-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bx-seg {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-sm);
  padding: 3px;
  gap: 3px;
}
.bx-seg a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 4px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.58);
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.bx-seg a .bx-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  transition: background .2s var(--ease), color .2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .bx-seg a:hover { color: #fff; background: rgba(255,255,255,0.07); }
}
.bx-seg a.is-active {
  background: var(--red);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.bx-seg a.is-active .bx-tag { background: rgba(255,255,255,0.22); color: #fff; }

/* Both labels carry text, so on phones the B2B/B2C tags drop and the two
   words alone ("Corporate Relocation" / "Private Relocation") fit inside
   a 320px screen. */
@media (max-width: 720px) {
  .bx-strip-label { display: none; }
  .bx-strip-inner { justify-content: center; padding: 6px 14px; }
  .bx-seg { width: 100%; max-width: 440px; }
  .bx-seg a { flex: 1 1 0; justify-content: center; padding: 8px 6px; font-size: 11.5px; }
  .bx-seg a .bx-tag { display: none; }
}

/* ── B2B HEADER ────────────────────────────────────────────── */
.b2b-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.b2b-header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.b2b-brand { display: inline-flex; align-items: center; gap: 13px; flex: 0 0 auto; }
.b2b-brand-mark {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink);
  border-radius: var(--r-sm);
  padding: 5px;
  overflow: hidden;
}
.b2b-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.b2b-brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.b2b-brand-copy strong { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.b2b-brand-copy span {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--red); margin-top: 2px;
}

/* The links breathe once the row has room. The row's width is capped by the
   container (1240px), so the spacing cannot scale with the viewport: 8px gap
   plus 11px link padding is the most the capped row holds in English with the
   switch, the language control and the CTA beside it. Below 1280 the row is
   genuinely full and the links stay compact. */
.b2b-nav { display: none; align-items: center; gap: clamp(2px, 0.3vw, 6px); flex: 1 1 auto; justify-content: center; }
/* The container is capped at 1240px, so the row gains no width from a
   bigger screen: the breathing room has to come out of the slack that is
   already there. At 1366 the compact row needs 1152 of 1240, so 14px gaps
   spend most of that 88px and still leave the primary action inside the
   container. A larger step pushed the button past the container edge, out
   of line with every other element on the page. */
@media (min-width: 1400px) { .b2b-nav { gap: 12px; } }
.b2b-nav a {
  position: relative;
  padding: 10px 10px;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-mid);
  border-radius: var(--r-xs);
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.b2b-nav a::after {
  content: "";
  position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .b2b-nav a:hover { color: var(--text); }
  .b2b-nav a:hover::after { transform: scaleX(1); }
}
.b2b-nav a.is-current { color: var(--red); font-weight: 650; }
.b2b-nav a.is-current::after { transform: scaleX(1); }

.b2b-header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

/* ── AUDIENCE SWITCH — inside the header row ───────────────────
   Compact by default because the header row is full at laptop widths;
   the words appear once there is genuinely room for them. */
.bx-inline {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  background: var(--paper-alt);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 3px;
  gap: 3px;
}
.bx-inline a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.bx-inline a b { font-weight: 800; }
/* The words are the point of the control: "B2B" alone means nothing to a
   first-time visitor. They are hidden only in the laptop header row, which
   already carries brand, six nav links and the primary action. */
.bx-inline a span { display: inline; font-weight: 600; letter-spacing: 0; }
/* In the header row the switch stays on its tags alone. The row never
   gets wider than the 1240px container, and the words cost about 110px
   the row does not have: with them shown the primary action broke out of
   the container entirely. They are still spelled out where there is room
   for them, in the full-width bar on phones, and the link title carries
   them for anyone who hovers. */
@media (min-width: 621px) {
  .b2b-header-inner .bx-inline a span { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .bx-inline a:hover { color: var(--text); background: rgba(11,18,32,0.05); }
}
.bx-inline a.is-active { background: var(--red); color: #fff; }
.bx-inline a.is-active:hover { background: var(--red); color: #fff; }

/* On phones the header row cannot hold brand + switch + burger, so the
   switch wraps onto its own full-width line — still inside the header,
   still visible without opening the menu, and with room for the words.

   That makes the header 134px, and a sticky bar that tall eats a sixth
   of a phone screen for the whole visit. The fix is a negative sticky
   offset the exact height of the switch line: it scrolls away with the
   page and the 65px brand row pins on its own. Nothing is hidden or
   re-shown, so the document never reflows and the scroll never jumps. */
@media (max-width: 620px) {
  .b2b-header-inner { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  /* first in the row, so it is the line the negative offset scrolls away */
  /* No fixed height: the links carry a 44px minimum touch target plus the
     strip's own 3px padding, so pinning the strip to 45px pushed the active
     button 3px past its own rounded edge. */
  .b2b-header-inner > .bx-inline { order: -1; flex: 1 0 100%; margin: 0 0 8px; }
  /* 44px minimum touch target */
  .b2b-header-inner > .bx-inline a { flex: 1 1 0; justify-content: center; padding: 12px 8px; min-height: 44px; font-size: 13px; }
  .b2b-header-inner > .bx-inline a span { display: inline; }
  .b2b-header { top: -69px; }
}

/* No copy of the switch inside the menu: on phones it already sits in the
   header row above, permanently visible. Two of them read as a fault. */

.b2b-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 10px;
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  cursor: pointer;
}
.b2b-burger span { display: block; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.b2b-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.b2b-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.b2b-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.b2b-mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 10px clamp(20px, 4vw, 44px) 22px;
}
.b2b-mobile-nav.is-open { display: block; }
/* Scoped to the plain menu links only. Unscoped, this rule outranked
   .b2b-btn-primary and painted the red CTA's label in dark ink, and forced
   display:block onto anything else placed in the menu. */
.b2b-mobile-nav > a:not(.b2b-btn) {
  display: block;
  padding: 14px 2px;
  font-size: 15px;
  font-weight: 550;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.b2b-mobile-nav > a:not(.b2b-btn).is-current { color: var(--red); font-weight: 650; }
.b2b-mobile-nav .b2b-btn { margin-top: 18px; width: 100%; justify-content: center; border-bottom: none; }

@media (min-width: 1024px) {
  .b2b-nav { display: flex; }
  .b2b-burger { display: none; }
  .b2b-mobile-nav { display: none !important; }
}

/* "Request a Corporate Proposal" is a wide button: brand + CTA + burger
   needs ~545px, so on phones the header CTA stands down. Nothing is lost —
   the mobile menu carries the same action as a full-width button. */
@media (max-width: 620px) {
  .b2b-header-actions > .b2b-btn { display: none; }
}

/* ── BUTTONS ───────────────────────────────────────────────── */
.b2b-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.b2b-btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; }
.b2b-btn-primary { background: var(--red); color: #fff; }
.b2b-btn-ghost   { background: transparent; color: var(--text); border-color: var(--line-2); }
.b2b-btn-ink     { background: var(--ink); color: #fff; }
.b2b-btn-light   { background: #fff; color: var(--ink); }
.b2b-btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.30); }
.b2b-btn-sm      { padding: 10px 18px; font-size: 12.5px; }
@media (hover: hover) and (pointer: fine) {
  .b2b-btn-primary:hover { background: var(--red-bright); transform: translateY(-1px); }
  .b2b-btn-ghost:hover   { border-color: var(--ink); background: var(--paper-alt); }
  .b2b-btn-ink:hover     { background: var(--ink-3); transform: translateY(-1px); }
  .b2b-btn-light:hover   { background: var(--paper-dim); }
  .b2b-btn-outline-light:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.55); }
}

/* ── SECTION SCAFFOLD ──────────────────────────────────────── */
.b2b-section { padding: clamp(64px, 8vw, 120px) 0; }
.b2b-section-tight { padding: clamp(48px, 6vw, 84px) 0; }
/* For runs of related sections — pricing table, its terms, its footnotes —
   where the standard 100px-a-side rhythm reads as dead space. */
.b2b-section.b2b-pt-tight { padding-top: clamp(34px, 3.6vw, 50px); }
.b2b-section.b2b-pb-tight { padding-bottom: clamp(34px, 3.6vw, 50px); }
.b2b-section-alt { background: var(--paper-alt); }
.b2b-section-ink { background: var(--ink); color: var(--on-ink); }
.b2b-section-ink h2, .b2b-section-ink h3 { color: #fff; }
.b2b-section-ink .b2b-lede { color: var(--on-ink-mid); }

.b2b-section-head { max-width: none; margin-bottom: clamp(38px, 4.5vw, 60px); }
.b2b-section-head h2 {
  font-size: clamp(28px, 3.8vw, 46px);
}
.b2b-section-head.is-centered { text-align: center; }
.b2b-section-head.is-centered .b2b-lede { margin-left: auto; margin-right: auto; }
.b2b-rule { display: block; width: 48px; height: 2px; background: var(--red); margin-top: 22px; }
.b2b-section-head.is-centered .b2b-rule { margin-left: auto; margin-right: auto; }

/* ── HERO (home) ───────────────────────────────────────────── */
.b2b-hero {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
  padding: clamp(66px, 9vw, 128px) 0 clamp(56px, 7vw, 104px);
}
.b2b-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 520px at 82% -12%, rgba(192,17,30,0.20), transparent 62%),
    radial-gradient(760px 420px at 6% 108%, rgba(90,120,180,0.16), transparent 66%);
  pointer-events: none;
}
/* Faint engineering grid — corporate, quiet, never decorative noise */
.b2b-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 78%);
  pointer-events: none;
}
.b2b-hero > .b2b-container { position: relative; z-index: 2; }
.b2b-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(38px, 5vw, 76px);
  align-items: center;
}
.b2b-hero h1 {
  font-size: clamp(34px, 5.4vw, 68px);
  color: #fff;
  margin: 0 0 8px;
}
.b2b-hero-claim {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: clamp(13px, 1.5vw, 15.5px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FF5A4E;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.b2b-hero-copy {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.74;
  color: var(--on-ink-mid);
  margin: 22px 0 0;
  max-width: 56ch;
}
.b2b-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Hero side card — the scope summary, not a statistic */
.b2b-hero-card {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 38px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.b2b-hero-card h2 {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 20px;
}
.b2b-hero-list { list-style: none; margin: 0; padding: 0; }
.b2b-hero-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.86);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.b2b-hero-list li:last-child { border-bottom: none; padding-bottom: 0; }
.b2b-hero-list svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; stroke: #FF5A4E; fill: none; stroke-width: 2.2; }

@media (max-width: 940px) {
  .b2b-hero-grid { grid-template-columns: 1fr; }
}

/* ── PAGE HERO (subpages) ──────────────────────────────────── */
.b2b-pagehero {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  padding: clamp(52px, 7vw, 96px) 0 clamp(48px, 6vw, 82px);
  overflow: hidden;
}
.b2b-pagehero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 420px at 88% -20%, rgba(192,17,30,0.18), transparent 62%);
  pointer-events: none;
}
.b2b-pagehero > .b2b-container { position: relative; z-index: 2; }
.b2b-pagehero h1 { font-size: clamp(30px, 4.6vw, 56px); color: #fff; }
.b2b-pagehero .b2b-lede { color: var(--on-ink-mid); }
.b2b-breadcrumb {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.42); margin-bottom: 18px;
}
.b2b-breadcrumb a { color: rgba(255,255,255,0.42); }
.b2b-breadcrumb a:hover { color: #fff; }

/* ── VALUE / FEATURE GRID ──────────────────────────────────── */
.b2b-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.b2b-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.b2b-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.b2b-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .b2b-grid-3, .b2b-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .b2b-grid-2, .b2b-grid-3, .b2b-grid-4 { grid-template-columns: 1fr; }
}

.b2b-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(24px, 2.6vw, 34px);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.b2b-section-alt .b2b-card { background: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .b2b-card:hover { border-color: var(--line-2); box-shadow: var(--sh); transform: translateY(-2px); }
}
.b2b-card h3 { font-size: 17px; font-weight: 650; margin-bottom: 10px; letter-spacing: -0.015em; }
.b2b-card p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--text-mid); }
.b2b-card-icon {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  border-radius: var(--r-sm);
  margin-bottom: 20px;
}
.b2b-card-icon svg { width: 20px; height: 20px; stroke: var(--red); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Card on ink */
.b2b-section-ink .b2b-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}
.b2b-section-ink .b2b-card p { color: var(--on-ink-mid); }
.b2b-section-ink .b2b-card-icon { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); }
.b2b-section-ink .b2b-card-icon svg { stroke: #FF5A4E; }

/* ── NUMBERED PROCESS (4 steps) ────────────────────────────── */
.b2b-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.b2b-step {
  position: relative;
  padding: 34px clamp(18px, 2vw, 30px) 30px 0;
  border-top: 2px solid var(--line-2);
}
.b2b-step:first-child { border-top-color: var(--red); }
.b2b-step-no {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  color: var(--red); margin-bottom: 14px; display: block;
}
.b2b-step h3 { font-size: 17px; font-weight: 650; margin-bottom: 10px; }
.b2b-step p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--text-mid); }
.b2b-section-ink .b2b-step { border-top-color: rgba(255,255,255,0.18); }
.b2b-section-ink .b2b-step:first-child { border-top-color: var(--red-bright); }
.b2b-section-ink .b2b-step p { color: var(--on-ink-mid); }
.b2b-section-ink .b2b-step-no { color: #FF5A4E; }
@media (max-width: 900px) { .b2b-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .b2b-steps { grid-template-columns: 1fr; } }

/* ── SPLIT (text + list) ───────────────────────────────────── */
.b2b-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: start;
}
@media (max-width: 900px) { .b2b-split { grid-template-columns: 1fr; } }

.b2b-checklist { list-style: none; margin: 0; padding: 0; }
.b2b-checklist li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.65;
}
.b2b-checklist li:last-child { border-bottom: none; }
.b2b-checklist li strong { display: block; font-weight: 650; margin-bottom: 3px; }
.b2b-checklist li span { color: var(--text-mid); font-size: 14.5px; }
.b2b-checklist svg {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px;
  stroke: var(--red); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.b2b-section-ink .b2b-checklist li { border-bottom-color: rgba(255,255,255,0.10); }
.b2b-section-ink .b2b-checklist li span { color: var(--on-ink-mid); }
.b2b-section-ink .b2b-checklist svg { stroke: #FF5A4E; }

/* ── PACKAGES ──────────────────────────────────────────────── */
.b2b-packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
@media (max-width: 940px) { .b2b-packages { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

.b2b-pkg {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(26px, 3vw, 38px);
}
.b2b-pkg.is-featured {
  border-color: var(--ink);
  box-shadow: var(--sh-lg);
  position: relative;
}
.b2b-pkg.is-featured::before {
  content: "";
  position: absolute; top: -1px; left: -1px; right: -1px; height: 3px;
  background: var(--red); border-radius: var(--r) var(--r) 0 0;
}
.b2b-pkg-name { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.b2b-pkg-for { font-size: 13px; color: var(--text-dim); margin: 0 0 22px; line-height: 1.6; }
.b2b-pkg-price {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 30px; font-weight: 600; color: var(--text);
  padding-bottom: 20px; margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  letter-spacing: -0.01em;
}
.b2b-pkg-price small { display: block; font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-top: 8px; }
.b2b-pkg-price em {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-right: 6px;
}

/* ── VOLUME PRICING MATRIX ─────────────────────────────────────
   One quiet card. Hairline rows, generous cells, tabular numerals,
   the Complete column carrying the same red accent as its featured
   card. Wide content scrolls inside the card; the page never moves. */
.b2b-matrix {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
  overflow: hidden;
}
.b2b-matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.b2b-matrix table { width: 100%; min-width: 640px; border-collapse: collapse; }
.b2b-matrix thead th {
  padding: 22px 28px 16px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.b2b-matrix thead th:first-child { color: var(--text-dim); width: 22%; }
.b2b-matrix thead th small {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.b2b-matrix tbody th,
.b2b-matrix tbody td {
  padding: 19px 28px;
  border-top: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
.b2b-matrix tbody tr:first-child th,
.b2b-matrix tbody tr:first-child td { border-top: none; }
.b2b-matrix tbody th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* the discount tag beside the band — the row's actual message */
.b2b-matrix tbody th small {
  margin-left: 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--red);
}
.b2b-matrix tbody td {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.b2b-cur {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-right: 7px;
  vertical-align: 1px;
}
/* the featured tier, mirroring the featured card */
.b2b-matrix thead th:nth-child(3) { box-shadow: inset 0 3px 0 var(--red); }
.b2b-matrix thead th:nth-child(3),
.b2b-matrix tbody td:nth-child(3):not([colspan]) { background: rgba(192, 17, 30, 0.035); }
/* 15+ closes the card as its own quiet band */
.b2b-matrix .b2b-matrix-talk th,
.b2b-matrix .b2b-matrix-talk td { background: var(--paper-alt); }
.b2b-matrix td.b2b-talk { font-size: 14.5px; font-weight: 600; white-space: normal; }
.b2b-matrix td.b2b-talk a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.b2b-matrix td.b2b-talk a:hover { color: var(--red-bright); }

/* the three terms under the matrix — equal cards, quiet */
.b2b-matrix-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  margin-top: clamp(18px, 2.4vw, 26px);
}
@media (max-width: 900px) { .b2b-matrix-notes { grid-template-columns: 1fr; } }
.b2b-matrix-notes > div {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 26px;
}
.b2b-matrix-notes h4 {
  margin: 0 0 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.b2b-matrix-notes p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-mid); }

.b2b-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.b2b-pkg ul { list-style: none; margin: 0 0 28px; padding: 0; flex: 1 1 auto; }
.b2b-pkg li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 0; font-size: 14px; line-height: 1.6; color: var(--text-mid);
}
.b2b-pkg li svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 4px; stroke: var(--red); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.b2b-pkg li.is-muted { color: rgba(108,122,145,0.55); }
.b2b-pkg li.is-muted svg { stroke: rgba(108,122,145,0.4); }
.b2b-pkg .b2b-btn { width: 100%; }

/* ── FAQ ───────────────────────────────────────────────────── */
.b2b-faq { border-top: 1px solid var(--line); }
.b2b-faq details { border-bottom: 1px solid var(--line); }
.b2b-faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
  padding: 24px 0;
  font-size: 16px; font-weight: 600; letter-spacing: -0.015em;
  cursor: pointer; list-style: none;
  transition: color .2s var(--ease);
}
.b2b-faq summary::-webkit-details-marker { display: none; }
.b2b-faq summary::after {
  content: ""; flex: 0 0 auto;
  width: 11px; height: 11px; margin-top: 6px;
  border-right: 1.8px solid var(--red); border-bottom: 1.8px solid var(--red);
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
.b2b-faq details[open] summary { color: var(--red); }
.b2b-faq details[open] summary::after { transform: rotate(-135deg); margin-top: 10px; }
.b2b-faq-body { padding: 0 0 26px; max-width: 78ch; }
.b2b-faq-body p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--text-mid); }

/* ── CTA BAND ──────────────────────────────────────────────── */
.b2b-cta {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding: clamp(56px, 7vw, 96px) 0;
  overflow: hidden;
}
/* The red glow used to be centred at 120% — below the section — so its
   brightest part sat exactly on the bottom edge and `overflow: hidden`
   sliced it off, leaving a hard straight line against the footer. It is
   now centred inside the section and masked away before the boundary, so
   it dissolves into the footer instead of stopping dead. */
.b2b-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(880px 520px at 22% 56%, rgba(192,17,30,0.28), transparent 68%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 0%, #000 66%, transparent 98%);
  pointer-events: none;
}
.b2b-cta > .b2b-container { position: relative; z-index: 2; }
.b2b-cta-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.b2b-cta h2 { font-size: clamp(26px, 3.4vw, 42px); color: #fff; }
.b2b-cta p { margin: 16px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--on-ink-mid); max-width: 58ch; }
.b2b-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) { .b2b-cta-inner { grid-template-columns: 1fr; } }

/* ── SCOPE NOTE (compliance framing) ───────────────────────── */
.b2b-scope {
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: var(--r-sm);
  background: var(--paper-alt);
  padding: clamp(20px, 2.4vw, 28px);
}
.b2b-scope p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--text-mid); }
.b2b-scope strong { color: var(--text); font-weight: 650; }

/* ── FORM ──────────────────────────────────────────────────── */
.b2b-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 940px) { .b2b-form-grid { grid-template-columns: 1fr; } }

.b2b-form { display: grid; gap: 18px; }
.b2b-field { display: flex; flex-direction: column; gap: 7px; }
.b2b-field > span {
  font-size: 12px; font-weight: 650; letter-spacing: 0.02em; color: var(--text);
}
.b2b-field > span i { font-style: normal; color: var(--red); }
.b2b-field > span em { font-style: normal; font-weight: 500; color: var(--text-dim); }
.b2b-field input,
.b2b-field select,
.b2b-field textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.b2b-field textarea { min-height: 130px; resize: vertical; }
.b2b-field input:focus,
.b2b-field select:focus,
.b2b-field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}
/* Required-services picker — a checkbox group the shared handler collects
   into one comma-joined "Required Services" value. */
.b2b-checks { border: 0; margin: 0; padding: 0; min-width: 0; }
.b2b-checks legend { padding: 0; margin-bottom: 10px; }
.b2b-checkgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 620px) { .b2b-checkgrid { grid-template-columns: 1fr; } }
.b2b-checkgrid-single { grid-template-columns: 1fr; }
.b2b-consent .b2b-check { align-items: center; }
.b2b-consent a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.b2b-consent a:hover { color: var(--red-bright); }
.b2b-consent i { font-style: normal; color: var(--red); }
.b2b-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-mid);
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
/* Scoped through .b2b-checks so these beat the generic `.b2b-field input`
   rule above, which is the same specificity and would otherwise win on
   source order — and which supplies the 15px padding that made a 16px
   box compute to 32px. Padding is reset explicitly. */
.b2b-checks .b2b-check input {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex: 0 0 auto;
  margin: 1px 0 0; padding: 0;
  border: 1.5px solid var(--line-2); border-radius: 3px;
  background-color: var(--paper);
  background-image: none;
  cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.b2b-checks .b2b-check input:checked {
  background-color: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 11px;
  background-repeat: no-repeat;
  border-color: var(--red);
}
.b2b-checks .b2b-check input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--red-soft); }
/* Sibling-based fallback for engines without :has() */
.b2b-checks .b2b-check input:checked + span { color: var(--text); font-weight: 600; }
.b2b-check:has(input:checked) { border-color: var(--red); background: var(--red-soft); color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .b2b-check:hover { border-color: var(--ink); }
}

.b2b-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .b2b-field-row { grid-template-columns: 1fr; } }
.cform-field--invalid input,
.cform-field--invalid select,
.cform-field--invalid textarea { border-color: var(--red); background: var(--red-soft); }
.b2b-form-note { font-size: 12.5px; line-height: 1.65; color: var(--text-dim); margin: 0; }

/* iOS Safari zooms the whole page whenever a focused form control is
   under 16px, and leaves the visitor panning a zoomed page sideways.
   16px on touch widths is the only reliable way to stop it. */
@media (max-width: 780px) {
  .b2b-field input,
  .b2b-field select,
  .b2b-field textarea,
  .b2b-checks .b2b-check { font-size: 16px; }
  .b2b-check { line-height: 1.4; }
}

/* Status box rendered by contact-forms.js (shared with the B2C site) */
.cform-status {
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid var(--line-2);
  background: var(--paper-alt);
  color: var(--text);
}
.cform-status--error   { border-color: var(--red-line); background: var(--red-soft); color: var(--red); }
.cform-status--success { border-color: rgba(17,120,60,0.28); background: rgba(17,120,60,0.06); color: #11783C; }
.cf-submit-wrap { display: grid; gap: 16px; }
/* Honeypot: clipped rather than parked off-canvas at left:-9999px, so it
   can never contribute to the scrollable area in any writing direction.
   Not display:none — bots skip those; this one still looks fillable. */
.b2b-hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── THE PERSON ────────────────────────────────────────────── */
/* A face, a role and a short statement in her own words. The photo takes
   a real column rather than a thumbnail, and the text column takes the
   remainder, so the two run to roughly the same height and the block
   fills the container instead of trailing off into white space. */
.b2b-person {
  display: grid;
  grid-template-columns: clamp(250px, 27vw, 340px) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}
.b2b-person .b2b-portrait { width: 100%; }
.b2b-person-id { min-width: 0; }
.b2b-person-id .b2b-kicker { margin-bottom: 12px; }
.b2b-person-id h2 {
  margin: 0;
  font-size: clamp(34px, 3.8vw, 48px);
  line-height: 1.04;
}
/* Role, then employer on its own line: two short lines by design, so the
   pair can never break mid-phrase at an awkward width. Deliberately not
   red — the kicker above it already carries the accent. */
.b2b-person-role {
  margin: 12px 0 0;
  font-size: clamp(14px, 1.3vw, 15.5px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: var(--text-mid);
  text-transform: none;
}
.b2b-person-role span {
  display: block;
  font-weight: 500;
  color: var(--text-dim);
}
.b2b-person-id .b2b-rule { margin-top: 20px; }

.b2b-person-note { margin: 26px 0 0; }
.b2b-person-note p {
  margin: 0 0 14px;
  font-size: clamp(15px, 1.45vw, 16.8px);
  line-height: 1.76;
  color: var(--text-mid);
}
.b2b-person-note p:last-child { margin-bottom: 0; }
.b2b-person-note .b2b-person-lead {
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.42;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 18px;
}

@media (max-width: 860px) {
  .b2b-person { grid-template-columns: 1fr; gap: 26px; }
  .b2b-person .b2b-portrait { width: 220px; }
}
@media (max-width: 620px) {
  .b2b-person { gap: 22px; }
  .b2b-person .b2b-portrait { width: 180px; }
  .b2b-person-note { margin-top: 22px; }
}

/* The source image is 1086x1448 — exactly 3:4, the same ratio as the frame,
   so nothing is cropped at any width and object-position is academic. It is
   kept centred so a future replacement at a different ratio degrades
   sensibly rather than slicing off one side. */
.b2b-portrait {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: var(--sh);
  background: var(--paper-alt);
}
.b2b-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* ── PHOTOGRAPH ────────────────────────────────────────────── */
.b2b-figure { margin: 0; }
.b2b-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: var(--sh);
}
.b2b-figure figcaption {
  margin-top: 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.b2b-aside {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(26px, 3vw, 36px);
}
.b2b-aside h3 { font-size: 16px; margin-bottom: 18px; }
.b2b-aside-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.b2b-aside-item:last-child { border-bottom: none; padding-bottom: 0; }
.b2b-aside-item strong { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 5px; }
.b2b-aside-item span, .b2b-aside-item a { font-size: 14.5px; color: var(--text); }
.b2b-aside-item a:hover { color: var(--red); }

/* ── FOOTER ────────────────────────────────────────────────── */
.b2b-footer { background: var(--ink); color: var(--on-ink-mid); padding: clamp(52px, 6vw, 80px) 0 0; }
.b2b-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(38px, 4vw, 56px);
}
@media (max-width: 900px) { .b2b-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .b2b-footer-grid { grid-template-columns: 1fr; } }
/* The mark stands on its own in the footer — no box, no rounding, no
   padding. The header keeps its framed version. */
.b2b-footer-brand .b2b-brand-mark {
  background: none;
  border-radius: 0;
  padding: 0;
  width: 42px;
  height: 42px;
}
.b2b-footer-brand .b2b-brand-copy strong { color: #fff; }
.b2b-footer-brand p { font-size: 13.5px; line-height: 1.75; color: var(--on-ink-dim); margin: 20px 0 0; max-width: 42ch; }
.b2b-footer-col strong {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 16px;
}
.b2b-footer-col a, .b2b-footer-col span {
  display: block; font-size: 13.5px; line-height: 1.5; color: var(--on-ink-dim);
  padding: 6px 0; transition: color .2s var(--ease);
}
.b2b-footer-col a:hover { color: #fff; }
.b2b-footer-legal {
  border-top: 1px solid rgba(255,255,255,0.09);
  padding: 22px 0;
  font-size: 11.5px; line-height: 1.75; color: rgba(255,255,255,0.38);
}
.b2b-footer-legal strong { color: rgba(255,255,255,0.6); font-weight: 650; }
.b2b-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.09);
  padding: 20px 0 26px;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  font-size: 11.5px; color: rgba(255,255,255,0.38);
}

/* ── REVEAL ON SCROLL ──────────────────────────────────────────
   Nothing is hidden by this stylesheet. b2b.js adds .b2b-anim only to
   blocks it has decided to animate — those well below the fold — and
   removes the hidden state again on approach. So if the script, the
   scroll event or the observer ever fails to run, the page is simply
   static and fully readable rather than a stack of blank panels. The
   earlier version hid everything in CSS and cost the contact page its
   whole form until the visitor scrolled. */
.b2b-reveal { opacity: 1; transform: none; }
.b2b-reveal.b2b-anim {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.b2b-reveal.b2b-anim.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .b2b-reveal, .b2b-reveal.b2b-anim { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ── STAGING WATERMARK ─────────────────────────────────────── */
.b2b-staging-flag {
  position: fixed; bottom: 14px; left: 14px; z-index: 9999;
  background: rgba(11,18,32,0.9); color: #fff;
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  pointer-events: none;
}
@media (max-width: 640px) { .b2b-staging-flag { font-size: 9px; padding: 5px 9px; } }

/* ── LANGUAGE (EN/DE) ──────────────────────────────────────── */
/* Corporate audiences in Switzerland read German; the selector mirrors the
   audience switch so the header reads as one family of controls. The header
   copy exists only where the row can hold it (nav is visible from 1024px);
   below that the burger menu carries a full-width copy. */
.b2b-lang {
  display: inline-flex;
  align-items: stretch;
  background: var(--paper-alt);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 3px;
  gap: 3px;
}
.b2b-lang button {
  border: 0;
  cursor: pointer;
  background: transparent;
  padding: 7px 11px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  transition: background .2s var(--ease), color .2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .b2b-lang button:hover { color: var(--text); background: rgba(11,18,32,0.05); }
}
.b2b-lang button.is-active,
.b2b-lang button.is-active:hover { background: var(--ink); color: #fff; }

@media (max-width: 1023px) { .b2b-header-actions .b2b-lang { display: none; } }
/* the 1024–1279 row is full; the selector tightens with it */
@media (min-width: 1024px) and (max-width: 1399px) {
  .b2b-header-actions .b2b-lang button { padding: 6px 8px; font-size: 10.5px; }
  .b2b-header-inner { gap: 14px; }
}

.b2b-mobile-nav .b2b-lang { display: flex; width: 100%; margin: 0 0 12px; }
.b2b-mobile-nav .b2b-lang button { flex: 1 1 0; min-height: 44px; font-size: 13px; }

/* A line break that exists only on phones. German runs longer than English;
   where a heading fits one desktop line but must wrap on a phone, the break
   is authored with this class instead of being left to the browser. */
.b2b-br-m { display: none; }
@media (max-width: 620px) { .b2b-br-m { display: inline; } }

/* ══ PACKAGES — PREMIUM TREATMENT ══════════════════════════════
   The commercial page carries the most scrutiny, so it drops the
   serif display almost entirely: a large Cormorant headline reads
   editorial, and at this length it tires. Inter at a tight track
   and a heavy weight reads the way Swiss institutional pricing
   material reads — quiet, dense, exact. Serif survives only in the
   figures, where it lends the prices weight without a voice.
   ════════════════════════════════════════════════════════════ */

/* ── Sans display heading ──────────────────────────────────── */
.b2b-h {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.1;
  text-wrap: balance;
}
.b2b-h em { font-style: normal; color: var(--red); }
.b2b-pagehero .b2b-h { color: #fff; }

/* ── Page hero: a statement plus the entry prices ──────────── */
/* The old hero put one large headline on a wide dark band and left
   two thirds of it empty. The right column now answers the question
   the visitor actually arrived with. */
.b2b-pagehero.is-split > .b2b-container {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: end;
}
.b2b-pagehero.is-split h1 { font-size: clamp(31px, 4.1vw, 50px); }
.b2b-pagehero.is-split .b2b-lede { max-width: 46ch; }
@media (max-width: 900px) {
  .b2b-pagehero.is-split > .b2b-container { grid-template-columns: 1fr; gap: 34px; align-items: start; }
}

.b2b-entry {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r);
  background: rgba(255,255,255,0.035);
  backdrop-filter: blur(2px);
  overflow: hidden;
}
.b2b-entry-head {
  padding: 14px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.46);
}
.b2b-entry-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 22px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.b2b-entry-row:first-of-type { border-top: 0; }
.b2b-entry-name {
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.80);
}
.b2b-entry-name span {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
.b2b-entry-fig {
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.b2b-entry-fig i {
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.45);
  margin-right: 7px;
  vertical-align: 3px;
}
.b2b-entry-foot {
  padding: 13px 22px 15px;
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.50);
}

/* ── Volume matrix ─────────────────────────────────────────── */
/* Figures are the content; everything else recedes to hairlines. */
.b2b-matrix.is-premium { border-radius: var(--r-lg); box-shadow: var(--sh-lg); }
.b2b-matrix.is-premium table { min-width: 700px; }

.b2b-matrix.is-premium thead th {
  padding: 26px 30px 18px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  border-bottom: 1px solid var(--line-2);
  vertical-align: bottom;
}
.b2b-matrix.is-premium thead th small {
  margin-top: 7px;
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-dim);
}
.b2b-matrix.is-premium tbody th,
.b2b-matrix.is-premium tbody td { padding: 24px 30px; }

/* The band label and its discount read as one unit, not a label
   with an afterthought: the band sits in figures, the saving in a
   pill that is the row's actual argument. */
.b2b-matrix.is-premium tbody th {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.b2b-matrix.is-premium tbody th small {
  display: inline-block;
  margin-left: 11px;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--red);
  vertical-align: 2px;
}
.b2b-matrix.is-premium tbody td {
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1;
}
.b2b-matrix.is-premium .b2b-cur {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  vertical-align: 4px;
  margin-right: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .b2b-matrix.is-premium tbody tr:hover td,
  .b2b-matrix.is-premium tbody tr:hover th { background: rgba(11,18,32,0.018); }
}

/* Closing row: an invitation, set apart from the priced bands. */
.b2b-matrix.is-premium .b2b-matrix-talk th,
.b2b-matrix.is-premium .b2b-matrix-talk td {
  background: var(--paper-alt);
  border-top: 1px solid var(--line-2);
  padding-top: 21px;
  padding-bottom: 21px;
}
.b2b-matrix.is-premium .b2b-talk {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-mid);
  letter-spacing: 0;
}
.b2b-matrix.is-premium .b2b-talk a {
  color: var(--red);
  font-weight: 700;
  border-bottom: 1px solid var(--red-line);
  padding-bottom: 1px;
  transition: border-color .2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .b2b-matrix.is-premium .b2b-talk a:hover { border-bottom-color: var(--red); }
}

/* ── Optional services ─────────────────────────────────────── */
/* Two of the four cards repeated the same availability sentence in
   full. It becomes a chip: stated once, scannable, and the card is
   left to describe the service itself. */
.b2b-optionals { display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .b2b-optionals { grid-template-columns: 1fr; } }

.b2b-optional {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(24px, 2.4vw, 32px);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .b2b-optional:hover { border-color: var(--line-2); box-shadow: var(--sh-sm); }
}
.b2b-optional h3 {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 11px;
}
.b2b-optional p {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--text-mid);
}
.b2b-optional-tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 7px; }
.b2b-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 100px;
  border: 1px solid var(--line-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.b2b-tag.is-included {
  background: var(--red-soft);
  border-color: var(--red-line);
  color: var(--red);
}
.b2b-tag svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }