/* Mantella.nl — Branches: van marketing agency tot webshop */

/* ---- Hero ---- */
.br-hero {
  padding: 76px var(--pad-x) 90px;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 30%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 42% 70%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 88% 55%, rgba(255,255,255,0.3), transparent);
}
.br-hero__inner { display: flex; flex-direction: column; gap: 24px; max-width: 880px; }
.br-hero__title { font-weight: 900; font-size: 68px; line-height: 1.04; color: #fff; text-wrap: balance; }
.br-hero__lead { font-size: 20px; line-height: 1.65; color: #a9a9a9; max-width: 700px; text-wrap: pretty; }
.br-hero__actions { display: flex; align-items: center; gap: 16px; margin-top: 6px; }

/* ---- Gedeelde branche-koppen ---- */
.br-title { font-weight: 800; font-size: 40px; line-height: 1.1; text-wrap: balance; }
.br-desc { font-size: 18px; line-height: 1.7; text-wrap: pretty; }

/* ---- Branche · Marketing agencies (zwaartepunt) ---- */
.br-agency {
  background-image:
    radial-gradient(rgba(13,13,13,0.05) 1px, transparent 1px),
    linear-gradient(160deg, rgba(243,146,0,0.12), transparent 45%);
  background-size: 30px 30px, 100% 100%;
}
.br-agency__wrap { display: flex; flex-direction: column; gap: 44px; }
.br-agency__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.br-agency__content { display: flex; flex-direction: column; gap: 18px; }
.br-agency .br-title, .br-agency .br-desc { color: var(--c-black-2); }
.br-agency .br-desc { color: #555; }

.br-stats { display: flex; gap: 28px; margin-top: 6px; }
.br-stat { display: flex; flex-direction: column; gap: 2px; }
.br-stat__num { font-weight: 900; font-size: 34px; }
.br-stat__label { font-size: 14px; color: #777; }

/* Visual: bureau-site vooraan, Mantella als machinekamer erachter */
.br-agency__visual { position: relative; padding: 10px 0 64px; }
.br-agency__visual-shadow {
  position: absolute; top: 34px; left: 44px; right: -8px; bottom: 0;
  background: #131313; border-radius: 16px; box-shadow: 0 30px 70px rgba(0,0,0,0.25);
}
.br-agency__visual-tag { position: absolute; left: 72px; bottom: 22px; display: flex; align-items: center; gap: 10px; }
.br-agency__visual-logo .logo__word { font-size: 17px; }
.br-agency__visual-logo .logo__dot { width: 6px; height: 6px; }
.br-agency__visual-meta { font-family: 'Roboto Mono', monospace; font-size: 11.5px; color: #8a8175; }
.br-agency__visual-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: #7ee0a1; background: rgba(53,184,105,0.14);
  border-radius: var(--r-pill); padding: 4px 10px;
}
.br-agency__visual-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #35b869; display: inline-block; }

.br-agency__browser {
  position: relative; margin-right: 64px;
  background: #fff; border: 1px solid #e6e2da; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}
.br-agency__browser-bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: #f3f0ea; border-bottom: 1px solid #e6e2da; }
.br-agency__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.br-agency__browser-url { margin-left: 8px; font-family: 'Roboto Mono', monospace; font-size: 12px; color: #6d675e; }
.br-agency__browser-body { padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.br-agency__browser-top { display: flex; align-items: center; justify-content: space-between; }
.br-agency__browser-domain { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: #0d0d0d; }
.br-agency__browser-tags { display: flex; gap: 12px; }
.br-agency__tag { width: 44px; height: 8px; border-radius: 4px; background: #e8e4dc; display: inline-block; }
.br-agency__tag--grad { width: 52px; background: var(--grad); }
.br-agency__line { height: 16px; border-radius: 6px; background: #ece8e0; display: block; }
.br-agency__browser-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 6px; }
.br-agency__box { height: 56px; border-radius: 9px; background: #f3f0ea; border: 1px solid #e8e4dc; display: block; }

/* Vier pijlers */
.br-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.br-pillar {
  background: #fff; border: 1px solid var(--c-border-light); border-radius: var(--r-card);
  padding: 26px; display: flex; flex-direction: column; gap: 11px;
  text-decoration: none; color: inherit;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.br-pillar:hover { border-color: var(--c-red); transform: translateY(-3px); }
.br-pillar__icon {
  width: 46px; height: 46px; border-radius: 12px; background: rgba(243,146,0,0.1);
  display: flex; align-items: center; justify-content: center;
}
.br-pillar__icon .material-symbols-outlined { font-size: 24px; color: var(--c-orange); }
.br-pillar__title { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: #0d0d0d; }
.br-pillar__desc { font-size: 14.5px; line-height: 1.6; color: #6b6157; margin: 0; }
.br-pillar__link { font-size: 14px; font-weight: 700; color: var(--c-red); text-decoration: none; margin-top: auto; transition: color 0.25s ease; }
/* Heel blok is klikbaar; hover op het blok kleurt de link zoals zijn eigen hover */
.br-pillar:hover .br-pillar__link { color: var(--c-orange); }
.br-pillar__note { font-size: 14px; font-weight: 700; color: #767066; margin-top: auto; }

/* ---- Branche · Recruitment / Webshops (gedeelde structuur) ---- */
.br-branch { padding: 90px var(--pad-x); }
.br-branch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.br-branch__content { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.br-branch__checks { margin-top: 4px; }
.br-branch__link { align-self: flex-start; font-weight: 700; font-size: 16px; text-decoration: none; margin-top: 6px; color: var(--c-orange); }
.br-branch__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.br-branch__side { display: flex; flex-direction: column; gap: 14px; }

.br-branch--recruitment {
  position: relative; overflow: hidden;
  background-image: radial-gradient(1px 1px at 25% 30%, rgba(255,255,255,0.2), transparent), radial-gradient(1.5px 1.5px at 75% 60%, rgba(255,255,255,0.16), transparent);
}
.br-branch--recruitment .br-title, .br-branch--recruitment .br-desc { color: #fff; }
/* Intro en opsomming in dezelfde kleur, anders oogt de intro doffer dan de checks */
.br-branch--recruitment .br-desc { color: #ccc; }
.br-branch--recruitment .checks { color: #ccc; }

.br-branch--webshops { background-image: linear-gradient(200deg, rgba(228,0,58,0.09), transparent 40%); }
.br-branch--webshops .br-title { color: #0d0d0d; }
.br-branch--webshops .br-desc { color: #444; }
.br-branch--webshops .checks { color: #444; }

/* Pakket-chips */
.br-chips__kicker { font-family: 'Roboto Mono', monospace; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: #b8b0a4; }
.br-branch--webshops .br-chips__kicker { color: #857d71; }
.br-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.br-chip {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: var(--r-pill); padding: 12px 22px;
  font-family: var(--font-head); font-weight: 700; font-size: 16.5px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.br-chip a { text-decoration: none; }
.br-chip a:hover { text-decoration: underline; }

.br-branch--recruitment .br-chip { background: rgba(19,19,19,0.85); border: 1px solid #2e2e2e; color: #fff; }
.br-branch--recruitment .br-chip:not(.br-chip--placeholder):hover { border-color: var(--c-orange); transform: translateY(-2px); }
.br-branch--recruitment .br-chip--own {
  background: linear-gradient(135deg, rgba(228,0,58,0.25), rgba(243,146,0,0.25)); border: 1px solid rgba(243,146,0,0.5);
}
.br-branch--recruitment .br-chip--placeholder { border: 1px dashed #4a4a4a; color: #a8a8a8; }
.br-branch--recruitment .br-chip--placeholder a { color: var(--c-orange); }

.br-branch--webshops .br-chip { background: #fff; border: 1px solid #e0dcd3; color: #0d0d0d; }
.br-branch--webshops .br-chip:not(.br-chip--placeholder):hover { border-color: var(--c-red); transform: translateY(-2px); }
.br-branch--webshops .br-chip--placeholder { border: 1px dashed #cfccc5; color: #767066; }
.br-branch--webshops .br-chip--placeholder a { color: var(--c-red); }

.br-chip__dot { width: 7px; height: 7px; background: var(--grad); border-radius: 50%; display: inline-block; }

/* Bewijsblok */
.br-proof { border-radius: var(--r-card); padding: 22px 26px; display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.br-proof__icon { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px; background: rgba(243,146,0,0.12); display: flex; align-items: center; justify-content: center; }
.br-proof__icon .material-symbols-outlined { font-size: 24px; color: var(--c-orange); }
.br-proof__text { font-size: 15px; line-height: 1.6; }
.br-proof__text strong { font-weight: 700; }
.br-proof__link { font-weight: 700; text-decoration: none; }
.br-proof__link:hover { text-decoration: underline; }

.br-branch--recruitment .br-proof { background: rgba(19,19,19,0.85); border: 1px solid #262626; }
.br-branch--recruitment .br-proof__text { color: #c9c9c9; }
.br-branch--recruitment .br-proof__text strong { color: #fff; }

.br-branch--webshops .br-proof { background: #fff; border: 1px solid var(--c-border-light); }
.br-branch--webshops .br-proof__text { color: #555; }
.br-branch--webshops .br-proof__text strong { color: #0d0d0d; }
.br-branch--webshops .br-proof__link { color: var(--c-red); }

/* ---- Hoe we koppelen ---- */
.br-how__title { font-weight: 800; font-size: 34px; color: #fff; margin-bottom: 36px; }
.br-how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.br-how__item { display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--c-orange); padding-top: 20px; }
.br-how__item h3 { font-weight: 800; font-size: 21px; color: #fff; }
.br-how__item p { margin: 0; font-size: 16px; line-height: 1.65; color: #a9a9a9; }

/* ---- En jouw branche? ---- */
.br-open { background-image: linear-gradient(160deg, rgba(243,146,0,0.1), transparent 45%); }
.br-open__wrap { display: flex; flex-direction: column; gap: 36px; }
.br-open__head { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.br-open__title { font-weight: 800; font-size: 38px; color: #0d0d0d; }
.br-open__lead { font-size: 18px; line-height: 1.7; color: #555; max-width: 640px; text-wrap: pretty; }
.br-open__cta { align-self: center; }

/* Klantlogo-rij: zelfde patroon als de VPS-pagina (lijn links/rechts van de kicker, logo-hover-lift) */
.br-logos { display: flex; flex-direction: column; gap: 22px; }
.br-logos__kicker {
  display: flex; align-items: center; gap: 24px;
  font-family: 'Roboto Mono', monospace; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #9a9083;
}
.br-logos__kicker::before,
.br-logos__kicker::after { content: ""; flex: 1; height: 1px; background: #ddd8ce; }
.br-logos__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 26px 40px; padding: 0 64px; }
.br-logos__link { display: inline-flex; align-items: center; transition: transform 0.25s ease; }
.br-logos__link:hover { transform: translateY(-3px); }
.br-logos__img { height: 34px; width: auto; }
.br-logos__img--apexx { height: 28px; }

/* Riumssen-wordmark is wit getekend (voor donkere achtergronden); op deze lichte sectie krijgt het logo een donker chip als drager zodat het leesbaar blijft */

/* =================== Tablet (1080) =================== */
@media (max-width: 1080px) {
  .br-hero__title { font-size: 49px; }

  .br-agency__grid { grid-template-columns: 1fr; gap: 40px; }
  .br-agency__visual { padding-bottom: 0; order: 2; }
  .br-agency__browser { margin-right: 0; }
  .br-agency__visual-shadow { display: none; }
  .br-agency__visual-tag { position: static; margin-bottom: 14px; }
  .br-pillars { grid-template-columns: 1fr 1fr; }

  .br-branch__grid { grid-template-columns: 1fr; gap: 32px; }
  .br-title { font-size: 29px; }

  .br-how__grid { grid-template-columns: repeat(2, 1fr); }

  /* 4 logo's als 2x2 in plaats van 3+1 */
  .br-logos__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: 30px 40px; padding: 0; }
}

/* =================== Mobiel (390) =================== */
@media (max-width: 700px) {
  .br-hero { padding: 46px var(--pad-x) 54px; }
  .br-hero__title { font-size: 31px; }
  .br-hero__lead { font-size: 17px; }
  .br-hero__actions { flex-direction: column; align-items: stretch; }

  .br-agency__wrap { gap: 32px; }
  .br-stats { gap: 22px; }
  .br-agency__browser { border-radius: 12px; }
  .br-agency__browser-body { padding: 20px 20px; }
  .br-agency__browser-domain { font-size: 17px; }
  .br-agency__box { height: 44px; }

  .br-pillars { grid-template-columns: 1fr; }

  .br-branch { padding: 54px var(--pad-x); }
  .br-title { font-size: 25px; }
  .br-chip { padding: 10px 18px; font-size: 15px; }
  .br-proof { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 22px; }

  .br-how__title { font-size: 26px; margin-bottom: 24px; }
  .br-how__grid { grid-template-columns: 1fr; }

  .br-open__title { font-size: 28px; }
  .br-logos__row { grid-template-columns: 1fr; gap: 24px; }
  .br-logos__img { height: 26px; }
  .br-logos__img--apexx { height: 21px; }
}