/* Boss by Brand (/nl/boss-by-brand), concept v1, 10-11-2026. House style: Inter + Anonymous Pro, Oat / Charcoal / Oxblood.
   The page alternates its grounds: Charcoal (hero, price), a blueprint (what you get), Oat paper (who it is for), Oxblood (safe in Europe), black (how it works), Charcoal (order). */
.bbb { --ink: var(--charcoal); --paper: var(--oat); --ox: var(--oxblood); --soft: rgb(222 216 204 / .78); position: relative; overflow: clip; }
.bbb-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.bbb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bbb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bbb section { padding: clamp(64px, 10vw, 120px) 0; }
.bbb-h2 { margin: 0 0 clamp(28px, 4vw, 48px); font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 600; line-height: 1; letter-spacing: -.035em; }
.bbb-h3 { margin: 0 0 18px; font: 700 13px/1.4 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; }

/* EN / NL switch at the top of the hero (one language per page, hreflang both ways) */
.bbb-langbar { display: flex; justify-content: flex-end; margin-bottom: clamp(20px, 4vw, 40px); }
.bbb-lang { display: inline-flex; padding: 2px; border: 1px solid rgb(222 216 204 / .4); border-radius: 999px; font: 700 12px var(--font-mono); letter-spacing: .12em; color: var(--paper); text-decoration: none; }
.bbb-lang b { display: inline-grid; place-items: center; min-width: 38px; min-height: 28px; padding: 0 8px; border-radius: 999px; font-weight: 700; }
.bbb-lang b.is-on { background: var(--paper); color: var(--ink); }
.bbb-lang:hover b:not(.is-on) { text-decoration: underline; }
.bbb-lang:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* buttons */
.bbb-btn { display: inline-flex; align-items: center; gap: .8em; min-height: 48px; padding: 14px 24px; border: 2px solid var(--paper); border-radius: 999px; background: var(--paper); color: var(--ink); font: 700 13px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background .25s, color .25s; }
.bbb-btn:hover { background: transparent; color: var(--paper); }
.bbb-btn:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }
.bbb-btn [aria-hidden] { transition: transform .3s var(--ease-out); }
.bbb-btn:hover [aria-hidden] { transform: translateX(4px); }

/* ── hero: the name in big type, the seal for safe, in Europe, yours ── */
.bbb-hero { background: var(--ink); padding: clamp(128px, 18vh, 180px) 0 clamp(72px, 10vw, 128px) !important; }
.bbb-hero__grid { display: grid; gap: 48px; align-items: center; }
.bbb-kicker { margin: 0; font: 400 13px/1.5 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
.bbb-kicker::before { content: ""; display: inline-block; width: 28px; height: 2px; margin: 0 12px 4px 0; vertical-align: middle; background: var(--paper); }
.bbb-h1 { margin: 16px 0 0; font-size: clamp(3rem, 11vw, 8.4rem); font-weight: 600; line-height: .9; letter-spacing: -.05em; overflow-wrap: anywhere; }
.bbb-claim { margin: 26px 0 0; max-width: 22ch; font-size: clamp(1.45rem, 3.2vw, 2.3rem); font-weight: 500; line-height: 1.12; letter-spacing: -.02em; }
.bbb-lede { margin: 18px 0 0; max-width: 34rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--soft); }
.bbb-act { margin: 34px 0 0; }
.bbb-seal { justify-self: center; display: grid; place-content: center; gap: 6px; width: min(260px, 70vw); aspect-ratio: 1; padding: 28px; border-radius: 50%; background: var(--ox); color: var(--paper); text-align: center; text-decoration: none; box-shadow: 0 0 0 10px var(--ink), 0 0 0 12px var(--ox); transform: rotate(-8deg); transition: transform .4s var(--ease-out); }
.bbb-seal:hover { transform: rotate(0deg) scale(1.03); }
.bbb-seal:focus-visible { outline: 3px solid var(--paper); outline-offset: 16px; }
.bbb-seal__k { font: 700 13px var(--font-mono); letter-spacing: .24em; text-transform: uppercase; }
.bbb-seal__d { font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
.bbb-seal__n { padding-top: 8px; border-top: 1px solid rgb(222 216 204 / .5); font: 700 15px var(--font-mono); letter-spacing: .08em; }
@media (min-width: 900px) { .bbb-hero__grid { grid-template-columns: 1fr auto; } .bbb-seal { margin-right: 4vw; } }

/* ── what you get: a blueprint of a small building, in the style of the workshop on /products.
   Bottom up: 01 foundation (your business), 02 walls (your brand), 03 roof (your address online, under an arch),
   04 the front door (the start talk with Maryam), an arched door in Oxblood. The list is real; the drawing is borders and pseudo-elements.
   With bbb.js and motion allowed it builds from the ground up when it scrolls into view; otherwise it simply stands. ── */
.bbb-get { --brass: #c79a5e; --bp: #171314; --l1: rgb(222 216 204 / .32); --l0: rgb(222 216 204 / .14); position: relative; background: var(--bp); }
.bbb-get::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgb(199 154 94 / .08) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgb(199 154 94 / .08) 1px, transparent 1px) 0 0 / 32px 32px;
  mask-image: radial-gradient(ellipse at 50% 55%, #000 35%, transparent 80%); }
.bbb-get .bbb-wrap { position: relative; }
.bbb-house { margin: 0; padding: 0; list-style: none; display: grid; grid-template-areas: "roof" "walls" "door" "base"; gap: 0; max-width: 1080px; }
.bbb-layer { position: relative; margin: 0; border: 2px solid var(--l1); border-bottom-width: 0; background: rgb(23 19 20 / .82); }
.bbb-layer--base { grid-area: base; border-bottom-width: 2px; margin-bottom: 22px; }
.bbb-layer--walls { grid-area: walls; }
.bbb-layer--roof { grid-area: roof; margin-top: clamp(64px, 9vw, 120px); }
.bbb-layer--door { grid-area: door; }
.bbb-layer__k { margin: 0; padding: 14px 18px 12px; border-bottom: 1px dashed var(--l1); font: 700 12px/1.4 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.bbb-layer__k span { display: inline-block; min-width: 2.2em; }
.bbb-layer__k em { margin-left: 10px; font-style: normal; font-weight: 400; letter-spacing: .1em; color: rgb(222 216 204 / .72); }
.bbb-parts { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; }
.bbb-parts li { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; align-content: start; padding: 18px; border-top: 1px dashed var(--l0); }
.bbb-parts li:first-child { border-top: 0; }
.bbb-parts svg { grid-row: span 2; width: 36px; height: 36px; fill: none; stroke: var(--paper); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bbb-parts h4 { margin: 4px 0 4px; font-size: 1.06rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.bbb-parts p { margin: 0; font-size: .96rem; line-height: 1.45; color: rgb(222 216 204 / .8); }
/* the roof: an arch drawn over the top layer, with a small keystone */
.bbb-layer--roof::before { content: ""; position: absolute; left: -2px; right: -2px; bottom: 100%; height: clamp(64px, 9vw, 120px); border: 2px solid var(--brass); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.bbb-layer--roof::after { content: ""; position: absolute; left: 50%; bottom: calc(100% + clamp(64px, 9vw, 120px) - 7px); width: 12px; height: 12px; margin-left: -6px; background: var(--brass); transform: rotate(45deg); }
/* the ground under the foundation: a hatched strip */
.bbb-layer--base::after { content: ""; position: absolute; left: -24px; right: -24px; top: calc(100% + 2px); height: 18px; border-top: 3px solid var(--brass); background: repeating-linear-gradient(-45deg, rgb(199 154 94 / .55) 0 2px, transparent 2px 10px); }
/* the front door: Oxblood, arched like the ARCUHN arch, a brass knob */
.bbb-layer--door { border-color: var(--l1); }
.bbb-layer--door .bbb-layer__k { border-bottom-color: rgb(222 216 204 / .3); }
.bbb-layer--door { background: var(--ox); }
.bbb-layer--door .bbb-layer__k, .bbb-layer--door .bbb-layer__k em { color: var(--paper); }
.bbb-layer--door .bbb-parts p { color: var(--paper); }
@media (min-width: 560px) { .bbb-layer--base .bbb-parts, .bbb-layer--walls .bbb-parts, .bbb-layer--roof .bbb-parts { grid-template-columns: repeat(2, 1fr); } .bbb-parts li:nth-child(2) { border-top: 0; } .bbb-parts li:nth-child(2n) { border-left: 1px dashed var(--l0); } }
@media (min-width: 900px) {
  .bbb-house { grid-template-columns: 1fr minmax(220px, 26%); grid-template-areas: "roof roof" "walls door" "base base"; }
  .bbb-layer--roof .bbb-parts { grid-template-columns: repeat(3, 1fr); }
  .bbb-layer--walls .bbb-parts { grid-template-columns: repeat(3, 1fr); }
  .bbb-layer--base .bbb-parts { grid-template-columns: repeat(4, 1fr); }
  .bbb-parts li { border-top: 0; border-left: 1px dashed var(--l0); grid-template-columns: 1fr; row-gap: 0; }
  .bbb-parts li:first-child { border-left: 0; }
  .bbb-parts svg { grid-row: auto; margin-bottom: 16px; }
  .bbb-layer--walls { border-right-width: 0; }
  .bbb-layer--door { display: flex; flex-direction: column; margin: 18px 0 0 18px; border: 2px solid var(--paper); border-bottom: 0; border-radius: 999px 999px 0 0; overflow: hidden; }
  .bbb-layer--door .bbb-layer__k { padding-top: clamp(34px, 4vw, 56px); text-align: center; }
  .bbb-layer--door .bbb-parts li { justify-items: center; text-align: center; padding-bottom: 28px; }
  .bbb-layer--door::after { content: ""; position: absolute; right: 22px; bottom: 34%; width: 10px; height: 10px; border-radius: 50%; background: var(--brass); }
}
/* building up on scroll (bbb.js adds .js-bbb and, once in view, .is-built) */
@media (prefers-reduced-motion: no-preference) {
  .js-bbb .bbb-layer { opacity: 0; transform: translateY(36px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
  .js-bbb .bbb-layer--roof::before { transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--ease-out) .2s; }
  .js-bbb .bbb-house.is-built .bbb-layer { opacity: 1; transform: none; }
  .js-bbb .bbb-house.is-built .bbb-layer--roof::before { transform: none; }
  .js-bbb .bbb-layer--walls { transition-delay: .35s; }
  .js-bbb .bbb-layer--door { transition-delay: .7s; }
  .js-bbb .bbb-layer--roof { transition-delay: 1s; }
}

/* ── safe, in Europe, yours: Oxblood, a big lock, four lines ── */
.bbb-safe { background: var(--ox); }
.bbb-safe__grid { display: grid; gap: 36px; }
.bbb-safe__big { width: 72px; height: 72px; margin-bottom: 20px; fill: none; stroke: var(--paper); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bbb-safe .bbb-h2 { margin: 0; max-width: 12ch; font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
.bbb-safe__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.bbb-safe__list li { display: grid; grid-template-columns: 36px 1fr; gap: 18px; align-items: start; padding: 20px 0; border-top: 1px solid rgb(222 216 204 / .35); }
.bbb-safe__list li:last-child { border-bottom: 1px solid rgb(222 216 204 / .35); }
.bbb-safe__list svg { width: 36px; height: 36px; fill: none; stroke: var(--paper); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bbb-safe__list p { margin: 4px 0 0; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.5; }
@media (min-width: 900px) { .bbb-safe__grid { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; } }

/* ── how it works: four steps on one line ── */
.bbb-how { background: var(--void); }
.bbb-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; counter-reset: s; }
.bbb-steps li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; padding: 0 0 34px; }
.bbb-steps li::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: rgb(222 216 204 / .22); }
.bbb-steps li:last-child { padding-bottom: 0; } .bbb-steps li:last-child::before { display: none; }
.bbb-steps b { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ox); color: var(--paper); font: 700 22px var(--font-mono); }
.bbb-steps li:last-child b { background: var(--paper); color: var(--ink); }
.bbb-steps p { margin: 12px 0 0; font-size: 1.15rem; line-height: 1.45; }
.bbb-tag { display: inline-block; margin-top: 4px; padding: 2px 10px; border: 1px solid rgb(222 216 204 / .4); border-radius: 999px; font: 400 14px/1.6 var(--font-mono); letter-spacing: .04em; white-space: nowrap; }
@media (min-width: 900px) {
  .bbb-steps { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .bbb-steps li { grid-template-columns: 1fr; gap: 20px; padding: 0; }
  .bbb-steps li::before { left: 64px; right: -28px; top: 27px; bottom: auto; width: auto; height: 2px; }
  .bbb-steps p { margin: 0; }
}

/* ── price: two ways to pay, "of" between ── */
.bbb-price { background: var(--ink); }
.bbb-plans { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; align-items: stretch; }
.bbb-plan { padding: clamp(24px, 3vw, 36px); border: 1px solid rgb(222 216 204 / .34); border-radius: 4px; }
.bbb-plan p { margin: 0; }
.bbb-plan__big { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.bbb-plan__big span { font-size: .34em; font-weight: 500; letter-spacing: 0; }
.bbb-plan__sub { margin-top: 10px !important; font: 700 13px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.bbb-plan__plus { margin-top: 22px !important; padding-top: 16px; border-top: 1px solid rgb(222 216 204 / .22); font-size: 1.15rem; font-weight: 500; }
.bbb-or { justify-self: center; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--paper); color: var(--ink); font: 700 15px var(--font-mono); }
.bbb-vat { margin: 24px 0 0; font-size: 1rem; line-height: 1.5; color: var(--soft); }
.bbb-note { display: inline-flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 12px 20px; border-radius: 999px; background: var(--ox); font-size: 1.05rem; font-weight: 600; }
.bbb-note::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); flex: none; }
@media (min-width: 760px) { .bbb-plans { grid-template-columns: 1fr auto 1fr; align-items: center; } .bbb-plan { height: 100%; box-sizing: border-box; } }

/* ── who it is for ── */
.bbb-fit { background: var(--paper); color: var(--ink); }
.bbb-fit__grid { display: grid; gap: 14px; }
.bbb-fit__yes, .bbb-fit__no { padding: clamp(24px, 3vw, 40px); border-radius: 4px; }
.bbb-fit__yes { background: var(--ink); color: var(--paper); }
.bbb-fit__yes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.bbb-fit__yes li { position: relative; padding-left: 40px; font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.3; }
.bbb-fit__yes li::before { content: ""; position: absolute; left: 0; top: .1em; width: 26px; height: 26px; border-radius: 50%; background: var(--ox) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M7.5 13.5l3.5 3.5 7.5-8' fill='none' stroke='%23DED8CC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px no-repeat; }
.bbb-fit__no { border: 2px solid var(--ink); }
.bbb-fit__no .bbb-h3 { display: flex; align-items: center; gap: 12px; }
.bbb-fit__no .bbb-h3::before { content: ""; width: 26px; height: 26px; flex: none; border: 2px solid var(--ink); border-radius: 50%; box-sizing: border-box; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 7l8 8M15 7l-8 8' fill='none' stroke='%232E2E2E' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.bbb-fit__no p { margin: 0; font-size: 1.15rem; line-height: 1.55; }
.bbb-fit__no a { color: var(--ox); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bbb-fit__no a:hover { text-decoration-thickness: 3px; }
.bbb-fit__no a:focus-visible { outline: 2px solid var(--ox); outline-offset: 3px; }
@media (min-width: 860px) { .bbb-fit__grid { grid-template-columns: 7fr 5fr; } }

/* ── order: the name, the price in one line, the button ── */
.bbb-end { background: var(--ink); padding-bottom: 40px !important; }
.bbb-end__grid { display: grid; gap: 28px; align-items: end; }
.bbb-end .bbb-h2 { margin-bottom: 14px; font-size: clamp(2.6rem, 7vw, 5.4rem); }
.bbb-end__when { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 500; line-height: 1.35; }
.bbb-end__act { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 28px; }
.bbb-small { margin-top: clamp(56px, 8vw, 96px); padding-top: 18px; border-top: 1px solid rgb(222 216 204 / .3); font: 400 13px/1.5 var(--font-mono); letter-spacing: .06em; color: var(--soft); }
@media (min-width: 900px) { .bbb-end__grid { grid-template-columns: 1fr auto; } }

@media (prefers-reduced-motion: reduce) { .bbb-seal, .bbb-btn, .bbb-btn [aria-hidden] { transition: none; } .bbb-seal:hover { transform: rotate(-8deg); } }