/* =====================================================================
   RSG Werkenbij-site + vacaturepagina — template-stylesheet
   Brandtokens komen uit clients/<slug>.js via CSS-variabelen. Naast kleur en
   font kan een client de headerbreedte los trekken van de tekstkolom met
   brand.headMaxw en brand.headPad (zie --head-maxw / --head-pad hieronder).
   Geen framework, geen build. Mobiel-eerst.
   ===================================================================== */
:root {
  --c: #00634e;          /* primaire merkkleur */
  --accent: #f6b21f;     /* CTA/accent */
  --accent-text: #0e2a22; /* tekstkleur op accent-vlakken (wit bij donkere accenten) */
  --ink: #0e2a22;        /* donkere secties + koppen */
  --bg: #faf9f6;
  --panel: #ffffff;
  --text: #22302b;
  --muted: #5e6b66;
  --line: #e6e6df;
  --radius: 18px;
  --radius-s: 12px;
  --shadow: 0 10px 34px rgba(14, 42, 34, 0.10);
  --maxw: 1140px;
  /* De header (topbar + subnav) mag breder staan dan de tekstkolom. Default is
     gelijk aan --maxw, dus een client die deze twee niet zet verandert niet.
     Overschrijven met brand.headMaxw / brand.headPad in clients/<slug>.js. */
  --head-maxw: var(--maxw);
  --head-pad: 1.4rem;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font, "Manrope", system-ui, sans-serif);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.4rem; }

h1, h2, h3 { color: var(--ink); letter-spacing: -0.02em; line-height: 1.12; font-family: var(--font-display, inherit); }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.12rem; font-weight: 800; }
.kicker {
  color: var(--c); font-weight: 800; text-transform: uppercase;
  font-size: 0.8rem; letter-spacing: 0.14em; margin-bottom: 0.7rem;
}
.lead { font-size: 1.12rem; color: var(--muted); max-width: 46em; }

/* scroll-reveals — GSAP/ScrollTrigger animeert .rv; zonder GSAP zet JS .in */
.rv { opacity: 0; }
.rv.in { opacity: 1; }

/* ---------------- knoppen ---------------- */
.cta {
  display: inline-flex; align-items: center; gap: 0.55em;
  background: var(--accent); color: var(--accent-text);
  font-weight: 800; font-size: 1.02rem;
  border: 0; border-radius: 999px; padding: 0.9em 1.9em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 55%, transparent); }
.cta:active { transform: translateY(0); }
.cta.ghost { background: transparent; color: var(--ink); box-shadow: none; border: 2px solid var(--line); }
.cta.ghost:hover { border-color: var(--c); color: var(--c); }
.cta.small { padding: 0.65em 1.4em; font-size: 0.92rem; }
.cta .arr { transition: transform 0.15s ease; }
.cta:hover .arr { transform: translateX(3px); }

/* ---------------- topbar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.topbar.scrolled { border-color: var(--line); box-shadow: 0 4px 20px rgba(14, 42, 34, 0.06); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem var(--head-pad); max-width: var(--head-maxw); margin: 0 auto; }
.topbar .logo img { height: 40px; width: auto; }
.topbar nav { display: flex; align-items: center; gap: 1.4rem; }
.topbar nav a { text-decoration: none; font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.topbar nav a:not(.cta):hover { color: var(--c); }
@media (max-width: 640px) { .topbar nav a.navlink { display: none; } }

.demo-ribbon {
  position: fixed; z-index: 60; top: 14px; left: -34px;
  transform: rotate(-45deg);
  background: var(--ink); color: #fff;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.18em;
  padding: 0.3em 2.6em; opacity: 0.85; pointer-events: none;
}
/* De DEMO-lint zit vast in de linkerbovenhoek. Bij een header die tot de rand
   loopt (brand.headMaxw) staat het logo daar ook, dus dan schuift het logo er
   net langs. Alleen op demo-sites mét brede header: een gewone site heeft het
   logo binnen de 1140px-kolom en komt de lint sowieso niet tegen. */
body.has-demo.head-wide .topbar-inner > .logo { margin-left: 2.2rem; }
@media (max-width: 640px) { body.has-demo.head-wide .topbar-inner > .logo { margin-left: 1.2rem; } }

/* ---------------- hero (werkenbij) ---------------- */
.hero { padding-block: 4rem 3rem; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; }
.hero .lead { margin-top: 1.1rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.hero-media { position: relative; }
.hero-media img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/3.4; object-fit: cover; width: 100%; }
.hero-chip {
  position: absolute; left: -1rem; bottom: 1.4rem;
  background: var(--panel); border-radius: var(--radius-s);
  box-shadow: var(--shadow); padding: 0.8rem 1.1rem;
  display: flex; align-items: center; gap: 0.7rem; font-weight: 700; font-size: 0.92rem;
}
.hero-chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 25%, transparent); }
@media (max-width: 860px) {
  .hero { padding-block: 2.4rem 2rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .hero-chip { left: 0.8rem; }
}

/* ---------------- cijfer-band ---------------- */
.stats { background: var(--ink); color: #fff; padding: 2.6rem 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; text-align: center; }
.stat b { display: block; font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; color: var(--accent); letter-spacing: -0.02em; }
.stat span { color: #c8d4cf; font-weight: 600; font-size: 0.95rem; }
@media (max-width: 700px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- secties ---------------- */
/* let op: padding-block, anders overschrijft dit de zijpadding van .wrap */
section.blk { padding-block: 4.5rem; }
section.blk.tight { padding-block: 3rem; }
.sec-head { max-width: 44em; margin-bottom: 2.4rem; }
@media (max-width: 700px) { section.blk { padding-block: 3rem; } }

/* kernwaarden */
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; }
.value-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.4rem; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.value-card .num { color: var(--accent); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.1em; }
.value-card h3 { margin: 0.4rem 0 0.5rem; }
.value-card p { color: var(--muted); font-size: 0.95rem; }

/* galerij */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.gallery img { border-radius: var(--radius-s); aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform 0.3s ease; }
.gallery a:hover img, .gallery img:hover { transform: scale(1.025); }
.gallery .tall img { aspect-ratio: 4/5; }
@media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* testimonials (gekleurde sectie) */
.testi { background: var(--c); color: #fff; }
.testi h2, .testi h3 { color: #fff; }
.testi .kicker { color: var(--accent); }
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.testi-card {
  background: color-mix(in srgb, #fff 8%, transparent);
  border: 1px solid color-mix(in srgb, #fff 16%, transparent);
  border-radius: var(--radius); padding: 1.6rem 1.5rem;
}
.testi-card .q { font-size: 1.02rem; line-height: 1.65; }
.testi-card .q::before { content: "\201C"; color: var(--accent); font-size: 2.2rem; line-height: 0; vertical-align: -0.35em; margin-right: 0.15em; font-weight: 800; }
.testi-card .who { margin-top: 1.1rem; display: flex; align-items: center; gap: 0.7rem; }
.testi-card .avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--accent-text); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.testi-card .who b { display: block; font-size: 0.95rem; }
.testi-card .who span { font-size: 0.85rem; color: #c8d4cf; }

/* ---------------- vacaturelijst ---------------- */
.jobs-tools { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-bottom: 1.8rem; }
.jobs-search {
  flex: 1 1 220px; max-width: 320px;
  font: inherit; font-size: 0.98rem; color: var(--ink);
  background: var(--panel); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 0.6em 1.2em; outline: none; transition: border-color 0.15s ease;
}
.jobs-search:focus { border-color: var(--c); }
.chip {
  font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--ink);
  background: var(--panel); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 0.5em 1.1em; cursor: pointer; transition: all 0.15s ease;
}
.chip:hover { border-color: var(--c); color: var(--c); }
.chip.on { background: var(--c); border-color: var(--c); color: #fff; }

.jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.3rem; }
.job-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.job-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.job-card .thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.job-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.job-card:hover .thumb img { transform: scale(1.05); }
.job-card .badge {
  position: absolute; top: 0.8rem; left: 0.8rem;
  background: var(--accent); color: var(--accent-text);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 0.3em 0.9em;
}
.job-card .body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.job-card h3 { transition: color 0.15s ease; }
.job-card:hover h3 { color: var(--c); }
.job-card .meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; color: var(--muted); font-size: 0.88rem; font-weight: 600; }
.job-card .meta svg { vertical-align: -2px; margin-right: 0.3em; }
.job-card .salary { margin-top: auto; padding-top: 0.6rem; font-weight: 800; color: var(--ink); }
.job-card .salary small { color: var(--muted); font-weight: 600; }
.jobs-empty { color: var(--muted); padding: 2rem 0; text-align: center; display: none; }

/* uitdaging */
.challenge {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 3rem); display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2rem; align-items: center;
}
.challenge .lead { margin-top: 0.8rem; }
@media (max-width: 800px) { .challenge { grid-template-columns: 1fr; } }

/* proces-strip */
.process-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; counter-reset: step; }
.process-step { position: relative; padding-top: 0.5rem; }
.process-step::before {
  counter-increment: step; content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c); color: #fff; font-weight: 800; margin-bottom: 0.9rem;
}
.process-step:first-child::before { background: var(--accent); color: var(--accent-text); }
.process-step::after {
  content: ""; position: absolute; top: 1.85rem; left: 54px; right: 6px; height: 2px;
  background: var(--line);
}
.process-step:last-child::after { display: none; }
.process-step h3 { font-size: 1rem; }
.process-step p { color: var(--muted); font-size: 0.88rem; margin-top: 0.3rem; }
@media (max-width: 900px) {
  .process-grid { grid-template-columns: 1fr; }
  .process-step { display: grid; grid-template-columns: 44px 1fr; gap: 0 1rem; }
  .process-step::before { margin: 0; grid-row: span 2; }
  .process-step::after { top: 52px; left: 21px; right: auto; bottom: -8px; width: 2px; height: auto; }
}

/* footer */
footer.site {
  background: var(--ink); color: #c8d4cf; padding: 3rem 0 2.2rem; margin-top: 2rem;
}
footer.site .foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.6rem; align-items: center; }
footer.site .logo img { height: 38px; filter: brightness(0) invert(1); opacity: 0.95; }
footer.site a { color: #fff; font-weight: 700; text-decoration: none; }
footer.site a:hover { color: var(--accent); }
footer.site .foot-contact { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
footer.site .foot-contact .foot-adres { font-weight: 400; opacity: 0.75; }
footer.site .fine { font-size: 0.85rem; margin-top: 1.6rem; opacity: 0.7; }
footer.site .powered { font-size: 0.8rem; margin-top: 0.5rem; opacity: 0.55; }
footer.site .powered a { font-weight: 700; }

/* =====================================================================
   Vacaturepagina
   ===================================================================== */
/* full-bleed foto-hero ("allover print") */
.vhero-full { position: relative; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; }
.vhero-bg {
  position: absolute; inset: -12% 0; background-size: cover; background-position: center;
  will-change: transform;
}
.vhero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 55%, transparent) 0%, transparent 30%),
    linear-gradient(0deg, color-mix(in srgb, var(--ink) 92%, transparent) 0%, color-mix(in srgb, var(--ink) 45%, transparent) 45%, transparent 75%);
}
.vhero-content { position: relative; z-index: 2; width: 100%; padding-top: 7rem; padding-bottom: 3.4rem; }
.vhero-content h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4.2rem); text-shadow: 0 2px 24px rgba(0,0,0,0.25); max-width: 14em; }
.vhero-content h1 .w { display: inline-block; }
.crumbs { font-size: 0.88rem; color: var(--muted); font-weight: 600; margin-bottom: 1rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs.light { color: #d5ded9; }
.crumbs.light a { color: #fff; }
.lead.light { color: #e4eae6; max-width: 38em; }
.meta-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.mchip {
  display: inline-flex; align-items: center; gap: 0.45em;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.45em 1em; font-size: 0.9rem; font-weight: 700; color: var(--ink);
}
.vhero-full .mchip {
  background: color-mix(in srgb, #fff 14%, transparent); border-color: color-mix(in srgb, #fff 28%, transparent);
  color: #fff; backdrop-filter: blur(8px);
}
.mchip.gold { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-text) !important; }
.vhero-full .lead { margin-top: 1.2rem; }
.vhero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.8rem; }
.vhero-ctas .sub { font-size: 0.85rem; color: #d5ded9; }
@media (max-width: 860px) { .vhero-full { min-height: 88svh; } .vhero-content { padding-top: 5.5rem; } }

/* topbar over de hero: fixed; transparant+wit bovenaan, normaal na scroll */
.topbar.overhero { position: fixed; left: 0; right: 0; top: 0; }
.topbar.overhero:not(.scrolled) { background: transparent; backdrop-filter: none; }
.topbar.overhero:not(.scrolled) nav a.navlink { color: #fff; }
.topbar.overhero:not(.scrolled) .logo img { filter: brightness(0) invert(1); }

/* compactere hero + share-iconen in de hero */
.vhero-full.compact { min-height: 70vh; }
.vhero-full.compact .vhero-content { padding-bottom: 10.5rem; }
/* stub-vacature zonder intro-kaart: hero sluit gewoon af */
body.no-introcard .vhero-full.compact .vhero-content { padding-bottom: 3.6rem; }
.share-mini { display: flex; gap: 0.5rem; }
.share-mini a, .share-mini button {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, #fff 35%, transparent);
  background: color-mix(in srgb, #fff 12%, transparent); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  backdrop-filter: blur(8px); transition: background 0.15s ease, transform 0.15s ease;
  font: inherit;
}
.share-mini a:hover, .share-mini button:hover { background: color-mix(in srgb, #fff 25%, transparent); transform: translateY(-2px); }

/* wit vakje dat de header in springt: vereist | krijg | doe */
.intro-card {
  position: relative; z-index: 5; margin-top: -110px;
  background: var(--panel); border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(14, 42, 34, 0.16);
  display: grid; grid-template-columns: 1fr 1.05fr 0.95fr; gap: 2.2rem;
  padding: clamp(1.6rem, 3vw, 2.6rem);
}
.intro-card h2 { font-size: 1.12rem; margin-bottom: 1rem; }
.mini-checks { list-style: none; }
.mini-checks li {
  position: relative; padding: 0.34em 0 0.34em 1.9em; font-size: 0.95rem; font-weight: 600;
}
.mini-checks li::before {
  content: "✓"; position: absolute; left: 0; top: 0.42em;
  width: 1.35em; height: 1.35em; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c);
  font-weight: 800; font-size: 0.82em; display: flex; align-items: center; justify-content: center;
}
.mini-benes { list-style: none; }
.mini-benes li { display: flex; gap: 0.7rem; padding: 0.4em 0; align-items: flex-start; }
.mini-benes .ic {
  flex: none; width: 30px; height: 30px; border-radius: 8px; margin-top: 0.1em;
  background: color-mix(in srgb, var(--accent) 22%, #fff); color: var(--c);
  display: flex; align-items: center; justify-content: center;
}
.mini-benes .ic svg { width: 16px; height: 16px; }
.mini-benes b { display: block; font-size: 0.95rem; color: var(--ink); }
.mini-benes span { font-size: 0.83rem; color: var(--muted); }
.ic-col-pie { text-align: center; }
.ic-col-pie h2 { text-align: left; }
.pie-mini { width: 210px; height: 210px; margin: 0 auto; }
.pie-mini svg { width: 100%; height: 100%; overflow: visible; }
.pie-mini path { cursor: pointer; stroke: var(--panel); stroke-width: 1.2; }
.pie-active { margin-top: 1rem; font-size: 0.95rem; text-align: left; min-height: 3.2em; font-weight: 600; }
.pie-active .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 0.45em; vertical-align: -1px; }
.pie-active b { font-weight: 800; color: var(--ink); margin-right: 0.3em; }
@media (max-width: 960px) { .intro-card { grid-template-columns: 1fr; gap: 1.8rem; margin-top: -70px; } }

/* tweekoloms sectie (kop links, inhoud rechts) zoals het voorbeeld */
.two-col { display: grid; grid-template-columns: 230px 1fr; gap: 2.5rem; align-items: start; }
.two-col > h2 { position: sticky; top: 90px; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 1rem; } .two-col > h2 { position: static; } }

/* vacaturetekst + tekstballon */
.desc-body { max-width: 46em; }
.desc-body p { margin-bottom: 1.1rem; font-size: 1.08rem; }
.desc-body p:first-child b { color: var(--ink); }
.bubble {
  position: relative; margin-top: 2rem; max-width: 44em;
  background: var(--panel); border: 1.5px solid var(--ink);
  border-radius: 22px; padding: 1.6rem 1.9rem;
}
.bubble::after {
  content: ""; position: absolute; bottom: -11px; left: 3rem;
  width: 18px; height: 18px; background: var(--panel);
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
}
.bubble blockquote { font-size: 1.1rem; font-weight: 600; color: var(--ink); line-height: 1.65; font-style: italic; }
.bubble blockquote::before { content: "\201C"; }
.bubble blockquote::after { content: "\201D"; }
.bubble figcaption { margin-top: 0.8rem; color: var(--muted); font-weight: 700; font-size: 0.9rem; font-style: normal; }

/* werkweek-kop met functie-chip */
.week-head { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.role-chip { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 800; color: var(--ink); }
.role-ic {
  width: 52px; height: 52px; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.role-ic svg { width: 28px; height: 28px; }

/* dag-ballon (compact) */
.week-bubble { display: none; margin: 0 0 1.4rem; max-width: 30em; padding: 1.1rem 1.4rem; }
.week-bubble.show { display: block; }
.week-bubble::after { left: var(--ax, 3rem); }
.week-bubble blockquote { font-size: 0.95rem; }
.week-bubble figcaption { font-size: 0.82rem; margin-top: 0.5rem; }

/* dagen-rij (los van het scrollende grid, klikbare tabs) */
.week-days { display: grid; grid-template-columns: 52px repeat(var(--days, 5), 1fr); gap: 0 10px; margin-bottom: 0.6rem; }
.week-days .wg-head { display: flex; align-items: center; justify-content: center; }
.day-chip {
  font: inherit; font-weight: 700; color: var(--muted); font-size: 1.02rem; cursor: pointer;
  padding: 0.35em 1em; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.4em;
  background: none; border: 1.5px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.day-chip:hover { color: var(--ink); transform: translateY(-1px); }
.day-chip.has-mood { border-color: var(--line); background: var(--panel); color: var(--ink); }
.day-chip.has-mood:hover { border-color: var(--c); }
.day-chip.on, .day-chip.cur { border-color: var(--ink); color: var(--ink); background: var(--panel); }

/* werkweek: tijdsgrid */
.week-grid { position: relative; display: grid; grid-template-columns: 52px repeat(var(--days, 5), 1fr); gap: 0 10px; }

/* hover/tap-popover naast een agenda-blok (CB-stijl) */
.wg-pop {
  position: absolute; z-index: 8; display: none; width: 290px; max-width: 86vw;
  background: var(--panel); border-radius: 16px; padding: 1.1rem 1.25rem;
  box-shadow: 0 18px 50px rgba(14, 42, 34, 0.22);
  pointer-events: none;
}
.wg-pop b { display: block; font-size: 1.02rem; color: var(--ink); margin-bottom: 0.35rem; line-height: 1.3; }
.wg-pop p { font-size: 0.9rem; color: var(--text); line-height: 1.55; }
.wg-pop time { display: block; font-size: 0.75rem; font-weight: 800; color: var(--c); margin-bottom: 0.25rem; }
.wg-times { position: relative; }
.wg-time { position: absolute; right: 8px; transform: translateY(-50%); font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.wg-body {
  position: relative; border-top: 1px solid var(--line);
  background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--hour, 64px));
  background-position: 0 0; background-size: 100% 100%;
}
.wg-times.wg-body-times { border-top: 0; background: none; }
.wg-ev {
  position: absolute; left: 0; right: 0; overflow: hidden;
  font: inherit; text-align: left; cursor: pointer;
  background: #f1f1ec; color: var(--text);
  border: 0; border-radius: 8px; padding: 0.45rem 0.65rem;
  font-size: 0.82rem; font-weight: 600; line-height: 1.25;
  box-shadow: inset 0 0 0 1px rgba(14, 42, 34, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.wg-ev:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(14, 42, 34, 0.12); z-index: 3; }
.wg-ev.on { box-shadow: 0 0 0 2px var(--ink), 0 6px 16px rgba(14, 42, 34, 0.15); z-index: 3; }
.wg-ev time { display: block; font-size: 0.7rem; font-weight: 800; color: var(--muted); }
.wg-ev.c-green { background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--ink); }
.wg-ev.c-green time { color: var(--c); }
.wg-ev.c-teal { background: var(--cal-teal, #d7efe4); color: var(--ink); }
.wg-ev.c-life { background: var(--cal-life, #e8e8e2); color: var(--ink); }
.wg-ev.c-life time { color: color-mix(in srgb, var(--ink) 60%, #888); }
.wg-ev.c-free {
  background: transparent;
  border: 1.5px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  box-shadow: none;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  font-weight: 600;
}
.wg-ev.c-free time { color: color-mix(in srgb, var(--ink) 40%, transparent); }
.wg-ev.c-teal time { color: color-mix(in srgb, var(--c) 70%, #2aa07a); }
.wg-ev.c-gold { background: color-mix(in srgb, var(--accent) 34%, #fff); color: var(--ink); }
.wg-ev.c-gold time { color: color-mix(in srgb, var(--ink) 55%, var(--accent)); }
/* Vrije dag: hele kolom als rustig "Vrij"-vlak (werkweek toont altijd ma t/m vr) */
.wg-free {
  position: absolute; inset: 4px 2px;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 10px; color: color-mix(in srgb, var(--ink) 45%, transparent);
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  pointer-events: none;
}
@media (max-width: 900px) {
  /* één dag per scherm, swipe + snap; uren-as blijft links staan */
  .week-grid {
    grid-template-columns: 44px repeat(var(--days, 5), 76vw);
    overflow-x: auto; padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .week-grid::-webkit-scrollbar { display: none; }
  .wg-body { scroll-snap-align: start; scroll-margin-left: 54px; }
  .wg-times.wg-body-times { position: sticky; left: 0; z-index: 4; background: var(--bg); }
  .wg-time { right: 4px; font-size: 0.68rem; }
  .week-days { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
  .week-days .wg-head-spacer { display: none; }
  .week-bubble { margin-left: auto; margin-right: auto; }
}

/* groeipad met iconen op een lijn */
.growth-line { position: relative; display: flex; justify-content: space-between; margin-top: 2.8rem; padding: 0 2rem; }
.growth-line::before { content: ""; position: absolute; left: 0; right: 0; top: 33px; height: 2px; background: var(--ink); opacity: 0.75; }
.growth-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; text-align: center; min-width: 90px; }
.growth-node .gn-ic {
  width: 66px; height: 66px; border-radius: 50%; background: var(--panel);
  border: 2px solid var(--ink); color: var(--ink);
  display: flex; align-items: center; justify-content: center; z-index: 1;
  transition: transform 0.2s ease;
}
.growth-node:hover .gn-ic { transform: scale(1.08); }
.growth-node .gn-ic svg { width: 32px; height: 32px; }
.growth-node.now .gn-ic { background: var(--c); border-color: var(--c); color: #fff; }
.growth-node span { font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.growth-node.now em { display: block; font-style: normal; font-size: 0.75rem; font-weight: 800; color: var(--c); text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 700px) {
  .growth-line { flex-direction: column; gap: 1.6rem; padding: 0; align-items: flex-start; }
  .growth-line::before { left: 32px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .growth-node { flex-direction: row; text-align: left; }
}

/* collega's met foto */
.collega-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; }
.collega-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.collega-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.collega-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.collega-card .cc-body { padding: 1.3rem 1.4rem 1.5rem; }
.collega-card .cc-name { font-weight: 800; color: var(--ink); }
.collega-card .cc-name span { color: var(--muted); font-weight: 600; }
.collega-card .cc-q { margin-top: 0.8rem; font-weight: 800; color: var(--ink); font-size: 0.95rem; }
.collega-card .cc-a { color: var(--text); font-size: 0.98rem; margin-top: 0.3rem; font-style: italic; }

/* weekagenda */
.week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.7rem; }
.week-day { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 0.9rem 0.8rem; }
.week-day > b { display: block; text-align: center; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.7rem; }
.week-ev {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: color-mix(in srgb, var(--c) 8%, #fff);
  border: 1.5px solid transparent; border-left: 3px solid var(--c);
  border-radius: 8px; padding: 0.55rem 0.7rem; margin-bottom: 0.55rem;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.week-ev:hover { transform: translateY(-1px); }
.week-ev.on { background: var(--c); border-left-color: var(--accent); }
.week-ev.on time, .week-ev.on b { color: #fff; }
.week-ev time { display: block; font-size: 0.72rem; font-weight: 800; color: var(--c); }
.week-ev b { display: block; font-size: 0.82rem; line-height: 1.3; color: var(--ink); font-weight: 700; }
.week-ev.break {
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  border-left-color: var(--accent);
}
.week-ev.break time { color: color-mix(in srgb, var(--ink) 60%, var(--accent)); }
.week-ev.break.on { background: var(--accent); border-left-color: var(--ink); }
.week-ev.break.on time, .week-ev.break.on b { color: var(--ink); }
.week-detail {
  margin-top: 1rem; background: var(--ink); color: #fff; border-radius: var(--radius-s);
  padding: 1.1rem 1.3rem; display: none; align-items: baseline; gap: 0.9rem;
}
.week-detail.show { display: flex; }
.week-detail time { color: var(--accent); font-weight: 800; white-space: nowrap; }
.week-detail p { color: #dfe8e4; font-size: 0.95rem; }
.week-detail p b { color: #fff; display: block; margin-bottom: 0.15rem; }
.week-hint { margin-top: 0.8rem; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 860px) {
  .week { grid-template-columns: 1fr; }
  .week-day { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
  .week-day > b { margin: 0; flex: 0 0 2.4em; text-align: left; }
  .week-ev { flex: 1 1 40%; margin: 0; }
}

/* eisen-checklist */
.req-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.7rem; }
.req-list li {
  position: relative; padding: 0.9rem 1rem 0.9rem 3rem; font-weight: 600;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-s);
}
.req-list li::before {
  content: "✓"; position: absolute; left: 0.95rem; top: 0.88rem;
  width: 1.5em; height: 1.5em; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c);
  font-weight: 800; font-size: 0.85em; display: flex; align-items: center; justify-content: center;
}

/* benefits */
.bene-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.bene {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.3rem; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bene:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.bene .ic {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 0.9rem;
  background: color-mix(in srgb, var(--accent) 22%, #fff);
  display: flex; align-items: center; justify-content: center; color: var(--c);
}
.bene p { color: var(--muted); font-size: 0.92rem; margin-top: 0.3rem; }

/* praktijkverhaal */
.practice {
  background: var(--c); color: #fff; border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.8rem);
}
.practice h2 { color: var(--accent); font-size: 1.1rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem; }
.practice p { font-size: clamp(1.05rem, 2.2vw, 1.25rem); line-height: 1.7; max-width: 46em; }

/* groeipad */
.growth { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.growth-step {
  background: var(--panel); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 0.7em 1.4em; font-weight: 700; color: var(--muted);
}
.growth-step.now { background: var(--ink); border-color: var(--ink); color: #fff; }
.growth-step.now::before { content: "Jij start hier · "; color: var(--accent); font-size: 0.82em; font-weight: 800; }
.growth-arr { color: var(--c); font-weight: 800; }

/* team op vacaturepagina */
.vteam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; }

/* solliciteer-sectie met embedded funnel */
.apply-sec { background: var(--ink); color: #fff; border-radius: var(--radius); overflow: hidden; }
.apply-sec .apply-head { padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.6rem, 4vw, 2.6rem) 0.4rem; }
.apply-sec h2 { color: #fff; }
.apply-sec .lead { color: #c8d4cf; margin-top: 0.6rem; }
.apply-sec .share-row { margin-top: 1.5rem; }
.apply-frame-wrap:empty { display: none; }
.apply-fallback:not(:empty) { padding-top: 1.6rem; }
.apply-frame { border: 0; width: 100%; height: 640px; display: block; background: #fff; border-radius: var(--radius-s); }
.apply-frame-wrap { padding: 1.6rem clamp(1rem, 3vw, 2.6rem) clamp(1.6rem, 4vw, 2.6rem); }
.apply-fallback { padding: 0 clamp(1.6rem, 4vw, 2.6rem) clamp(1.6rem, 4vw, 2.6rem); }

/* andere vacatures + share */
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.share-row .chip { display: inline-flex; align-items: center; gap: 0.45em; text-decoration: none; }

/* meescrollende sectie-navigatie */
.subnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 46;
  background: var(--panel); border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 24px rgba(14, 42, 34, 0.08);
  transform: translateY(-110%); transition: transform 0.3s ease;
}
.subnav.show { transform: translateY(0); }
.subnav-inner {
  max-width: var(--head-maxw); margin: 0 auto; padding: 0.55rem var(--head-pad);
  display: flex; align-items: center; gap: 1.4rem;
}
.subnav-title { font-weight: 800; color: var(--ink); white-space: nowrap; }
.subnav-links {
  flex: 1; display: flex; gap: 1.5rem; overflow-x: auto;
  -ms-overflow-style: none; scrollbar-width: none;
}
.subnav-links::-webkit-scrollbar { display: none; }
.subnav-links a {
  text-decoration: none; font-weight: 600; color: var(--muted); font-size: 0.95rem;
  white-space: nowrap; padding: 0.5em 0; border-bottom: 2.5px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.subnav-links a:hover { color: var(--ink); }
.subnav-links a.active { color: var(--ink); font-weight: 800; border-bottom-color: var(--accent); }
.subnav-actions { display: flex; align-items: center; gap: 1.1rem; }
.subnav-share {
  font: inherit; font-weight: 700; color: var(--ink); background: none; border: 0;
  text-decoration: underline; cursor: pointer; white-space: nowrap;
}
.subnav-share:hover { color: var(--c); }
.cta.dark { background: var(--ink); color: #fff; box-shadow: 0 8px 24px rgba(14, 42, 34, 0.28); }
.cta.dark:hover { box-shadow: 0 12px 30px rgba(14, 42, 34, 0.36); }
main section[id], main .intro-card { scroll-margin-top: 84px; }
@media (max-width: 860px) {
  .subnav-title { display: none; }
  .subnav-inner { gap: 0.9rem; padding: 0.5rem 1rem; }
  .subnav-links { gap: 1.1rem; }
  .subnav-share { display: none; }
}

/* meer-vacatures-slider */
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; max-width: none; }
.toon-alles { font-weight: 800; color: var(--c); text-decoration: none; white-space: nowrap; }
.toon-alles:hover { text-decoration: underline; }
.slider-wrap { position: relative; }
.jobs-slider {
  display: flex; gap: 1.3rem; overflow-x: auto; padding: 0.3rem 0.2rem 0.8rem;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -ms-overflow-style: none; scrollbar-width: none;
}
.jobs-slider::-webkit-scrollbar { display: none; }
.jobs-slider .job-card { flex: 0 0 320px; scroll-snap-align: start; }
.slide-btn {
  position: absolute; top: 38%; z-index: 4;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--panel); border: 1.5px solid var(--line); color: var(--ink);
  font-size: 1.7rem; line-height: 1; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding-bottom: 4px;
  box-shadow: 0 10px 26px rgba(14, 42, 34, 0.18);
  transition: transform 0.15s ease, border-color 0.15s ease, opacity 0.2s ease;
}
.slide-btn:hover:not(:disabled) { transform: scale(1.08); border-color: var(--c); color: var(--c); }
.slide-btn:disabled { opacity: 0.3; cursor: default; }
.slide-btn.prev { left: -12px; }
.slide-btn.next { right: -12px; }
@media (max-width: 700px) {
  .jobs-slider .job-card { flex: 0 0 80vw; }
  .slide-btn.prev { left: -4px; }
  .slide-btn.next { right: -4px; }
}

/* mobiel-polish: compacte hero, gecentreerde secties */
@media (max-width: 860px) {
  .vhero-full.compact { min-height: 72svh; }
  .vhero-full.compact .vhero-content { padding-top: 4.6rem; padding-bottom: 6.5rem; }
  body.no-introcard .vhero-full.compact .vhero-content { padding-bottom: 3rem; }
  .vhero-content h1 { font-size: clamp(2rem, 9vw, 2.7rem); }
  .intro-card { margin-top: -56px; padding: 1.4rem 1.2rem; }
  .sec-head, .week-head, .two-col > h2 { text-align: center; }
  .row-head { align-items: center; }
  .row-head h2 { text-align: left; }
  .week-head { justify-content: center; }
  .growth-line { width: fit-content; margin: 2rem auto 0; }
  .apply-sec .apply-head { text-align: center; padding-top: 1.6rem; }
  .apply-sec h2 { font-size: 1.45rem; }
  .apply-sec .lead { font-size: 0.98rem; }
  .share-row { justify-content: center; }
  .share-row .chip { display: inline-flex; align-items: center; }
  .apply-fallback { text-align: center; }

  /* extra zijmarges zodat blokken niet tegen de schermrand plakken */
  .desc-body { padding-inline: 0.7rem; }
  #sec-desc .bubble, #sec-practice .bubble { margin-inline: 0.7rem; max-width: calc(100% - 1.4rem); }
  .week-bubble { max-width: calc(100% - 1.4rem); }
  .week-hint { padding-inline: 0.7rem; text-align: center; }
  .growth-line { padding-inline: 0.7rem; }
  .process-grid { padding-left: 0.85rem; }
  .apply-sec { margin-inline: 0.6rem; }
  .jobs-slider { padding-inline: 0.4rem; }
  .jobs-slider .job-card { flex-basis: 78vw; }
  .process-grid { max-width: 30rem; margin: 0 auto; }
  .desc-body, .bubble { margin-left: auto; margin-right: auto; }
}

/* sticky CTA (mobiel + desktop) */
.vac-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--panel); border-top: 1px solid var(--line);
  padding: 0.7rem 1.2rem calc(0.7rem + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform 0.25s ease;
  box-shadow: 0 -8px 30px rgba(14, 42, 34, 0.10);
}
.vac-sticky.show { transform: translateY(0); }
.sticky-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 1rem; }
.sticky-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sticky-info b { font-size: 0.95rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-info span { font-size: 0.85rem; color: var(--muted); }

/* persoonlijke variant (?p=): banner in de hero */
.pbanner { max-width: 34em; margin-bottom: 1.1rem; background: rgba(10,12,16,0.55); border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; padding: 0.9rem 1.1rem; backdrop-filter: blur(4px); }
.pbanner .pb-tag { display: inline-block; background: var(--accent, #ffa400); color: var(--accent-text, #231f20); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 0.28rem 0.7rem; margin-bottom: 0.5rem; }
.pbanner .pb-line { color: #fff; font-size: 1.02rem; line-height: 1.5; margin: 0; text-shadow: 0 1px 12px rgba(0,0,0,0.35); }

/* video-sectie: echte video of verzorgde placeholder-kaart (16:9) */
.vid-card { max-width: 880px; margin: 0 auto; }
.vid-player {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius); background: #141c33; object-fit: cover;
  box-shadow: 0 18px 44px rgba(14, 42, 34, 0.16);
}
.vid-ph {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  background: #141c33 center / cover no-repeat; /* neutraal navy vlak als er geen poster is */
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 44px rgba(14, 42, 34, 0.16);
}
.vid-ph::before { content: ""; position: absolute; inset: 0; background: rgba(13, 18, 36, 0.5); }
.vid-play {
  position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.85); background: rgba(10, 12, 16, 0.25);
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px);
}
.vid-play::after {
  content: ""; margin-left: 7px;
  border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.9);
}
.vid-chip {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); z-index: 1;
  max-width: calc(100% - 2rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(10, 12, 16, 0.72); color: #fff; font-size: 0.85rem; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 0.42rem 1rem;
  backdrop-filter: blur(4px);
}
@media (max-width: 700px) {
  .vid-play { width: 64px; height: 64px; transform: translateY(-16px); }
  .vid-play::after { border-width: 10px 0 10px 17px; margin-left: 5px; }
  /* volledige caption leesbaar op smal scherm: laten wrappen in plaats van afkappen */
  .vid-chip { font-size: 0.78rem; bottom: 0.8rem; white-space: normal; text-align: center; border-radius: 16px; }
}

/* WhatsApp-opvolging: chip in de solliciteer-sectie */
.wa-note {
  display: inline-flex; align-items: center; gap: 0.55em;
  margin-top: 1.1rem; padding: 0.5rem 1rem; max-width: 100%;
  border-radius: 999px; background: rgba(37, 211, 102, 0.13);
  border: 1px solid rgba(37, 211, 102, 0.38);
  color: #dcefe4; font-size: 0.9rem; font-weight: 600; text-align: left;
}
.wa-note:empty { display: none; }
.wa-note svg { flex: 0 0 auto; color: #25d366; width: 18px; height: 18px; }
@media (max-width: 860px) { .wa-note { text-align: center; } }