/* =============================================================================
   KASSABA — sf-* library block reskin
   -----------------------------------------------------------------------------
   Site-scoped overrides that make the migrated generic sf-* library blocks
   pixel-match Kassaba's bespoke "ultra-premium dark luxury" house style.
   EVERY rule is scoped under the page wrapper .sf-kassaba (emitted by
   includes/block-renderer.php for any page containing a "*-kassaba" block) so
   other sites' shared sf-* blocks are untouched.

   Loaded AFTER kassaba.css so it wins on the shared design tokens. The kassaba
   tokens reused here come from kassaba.css :root —
     --gold #D4AF37 / --gold-hi #F4E2A1 / --gold-dk #9C7A1E / --grad-gold /
     --bg #0A0A0A / --bg-2 #101010 / --panel #141310 /
     --ink #ECE6D8 / --ink-soft #A39C8C / --ink-mute #6E685C /
     --glass rgba(255,255,255,.035) / --glass-2 / --glass-line rgba(212,175,55,.18) /
     --line rgba(255,255,255,.08) / --blur / --radius 6px / --radius-lg 16px /
     --shadow / --shadow-gold / --ease / fonts --f-display (Cormorant Garamond)
     + --f-body (Jost).

   Reveal handling: Kassaba's observer (kassababier-reveal.js) toggles `.is-in`
   on `.reveal` elements, and the on-state class is `.reveal.is-in` (NOT
   `.visible`). The sf-* blocks shipped here do NOT set `opacity:0` on `.reveal`
   in their own style.css, so we deliberately LEAVE reveal opacity alone — no
   `opacity:0` rule is added anywhere in this file. This guarantees content is
   never stuck invisible (the bug seen on a sister site) at the cost of no
   entrance animation on these blocks.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   SHARED PRIMITIVES — re-skin the generic eyebrow pill + buttons + headings +
   gold-clip accent spans the library emits, so every block inherits the
   kassaba dark-luxe look.
   ----------------------------------------------------------------------------- */

/* Headings -> Cormorant Garamond display, light weight, warm cream. */
.sf-kassaba [data-sf-block^="sf-"] h1,
.sf-kassaba [data-sf-block^="sf-"] h2,
.sf-kassaba [data-sf-block^="sf-"] h3,
.sf-kassaba [data-sf-block^="sf-"] h4,
.sf-kassaba [data-sf-block^="sf-"] h5 {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: .005em;
}
.sf-kassaba [data-sf-block^="sf-"] h1,
.sf-kassaba [data-sf-block^="sf-"] h2 { font-weight: 300; }
.sf-kassaba [data-sf-block^="sf-"] p { font-family: var(--f-body); }

/* Eyebrow pill .section-badge -> kassaba gold uppercase kicker-pill. The
   library often sets inline style="background:var(--sf-*-accent)" — beat it. */
.sf-kassaba [data-sf-block^="sf-"] .section-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-body) !important;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold) !important;
  background: rgba(212,175,55,.08) !important;
  border: 1px solid var(--glass-line) !important;
  padding: .4rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
/* Outline-variant pill keeps the same kassaba look; gold helper dot. */
.sf-kassaba [data-sf-block^="sf-"] .section-badge--outline .section-badge__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 8px var(--gold);
}

/* Gold-clip accent spans — every block names its highlight fragment
   differently, so cover them all. */
.sf-kassaba [data-sf-block^="sf-"] .sf-heading-accent,
.sf-kassaba [data-sf-block^="sf-"] .hero-heading-accent,
.sf-kassaba [data-sf-block^="sf-"] .heading-accent,
.sf-kassaba [data-sf-block^="sf-"] .sf-fg-highlight,
.sf-kassaba [data-sf-block^="sf-"] .sf-faq-accent,
.sf-kassaba [data-sf-block^="sf-"] .cta-accent,
.sf-kassaba [data-sf-block^="sf-"] .hero-accent {
  background: var(--grad-gold) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
  color: var(--gold) !important;
  font-style: italic;
}
/* white-suffix span in sf-cta keeps reading as cream */
.sf-kassaba [data-sf-block^="sf-"] .cta-h-white { color: var(--ink); }
/* .alt-font (sf-hero video layout) -> Cormorant italic */
.sf-kassaba [data-sf-block^="sf-"] .alt-font { font-family: var(--f-display); font-style: italic; }

/* Generic buttons the library reuses across blocks -> kassaba .btn family. */
.sf-kassaba [data-sf-block^="sf-"] .btn,
.sf-kassaba [data-sf-block^="sf-"] .btn-primary,
.sf-kassaba [data-sf-block^="sf-"] .btn-hero,
.sf-kassaba [data-sf-block^="sf-"] .btn-hero-secondary,
.sf-kassaba [data-sf-block^="sf-"] .btn-outline,
.sf-kassaba [data-sf-block^="sf-"] .btn-white,
.sf-kassaba [data-sf-block^="sf-"] .btn-outline-white,
.sf-kassaba [data-sf-block^="sf-"] .btn-ghost,
.sf-kassaba [data-sf-block^="sf-"] .hero-cta,
.sf-kassaba [data-sf-block^="sf-"] .btn-plan,
.sf-kassaba [data-sf-block^="sf-"] .btn-submit {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 1rem 1.9rem;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), color .4s, background .4s, border-color .4s;
}
/* solid / primary -> gold gradient on near-black ink */
.sf-kassaba [data-sf-block^="sf-"] .btn-primary,
.sf-kassaba [data-sf-block^="sf-"] .btn-hero,
.sf-kassaba [data-sf-block^="sf-"] .hero-cta,
.sf-kassaba [data-sf-block^="sf-"] .btn-white,
.sf-kassaba [data-sf-block^="sf-"] .btn-plan,
.sf-kassaba [data-sf-block^="sf-"] .btn-submit,
.sf-kassaba [data-sf-block^="sf-"] .pricing-card.popular .btn-plan {
  background: var(--grad-gold) !important;
  color: #120E03 !important;
  box-shadow: 0 10px 30px -10px rgba(212,175,55,.5);
}
.sf-kassaba [data-sf-block^="sf-"] .btn-primary:hover,
.sf-kassaba [data-sf-block^="sf-"] .btn-hero:hover,
.sf-kassaba [data-sf-block^="sf-"] .hero-cta:hover,
.sf-kassaba [data-sf-block^="sf-"] .btn-white:hover,
.sf-kassaba [data-sf-block^="sf-"] .btn-plan:hover,
.sf-kassaba [data-sf-block^="sf-"] .btn-submit:hover {
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}
/* ghost / outline -> translucent, gold border on hover */
.sf-kassaba [data-sf-block^="sf-"] .btn,
.sf-kassaba [data-sf-block^="sf-"] .btn-ghost,
.sf-kassaba [data-sf-block^="sf-"] .btn-outline,
.sf-kassaba [data-sf-block^="sf-"] .btn-hero-secondary,
.sf-kassaba [data-sf-block^="sf-"] .btn-outline-white {
  background: rgba(255,255,255,.02) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(212,175,55,.35) !important;
}
.sf-kassaba [data-sf-block^="sf-"] .btn:hover,
.sf-kassaba [data-sf-block^="sf-"] .btn-ghost:hover,
.sf-kassaba [data-sf-block^="sf-"] .btn-outline:hover,
.sf-kassaba [data-sf-block^="sf-"] .btn-hero-secondary:hover,
.sf-kassaba [data-sf-block^="sf-"] .btn-outline-white:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  transform: translateY(-2px);
}
/* trailing arrow icon nudges on hover */
.sf-kassaba [data-sf-block^="sf-"] .btn-icon,
.sf-kassaba [data-sf-block^="sf-"] .hero-cta-icon { transition: transform .4s var(--ease); }
.sf-kassaba [data-sf-block^="sf-"] .btn-primary:hover .btn-icon,
.sf-kassaba [data-sf-block^="sf-"] .btn-ghost:hover .btn-icon,
.sf-kassaba [data-sf-block^="sf-"] .btn:hover .btn-icon { transform: translateX(5px); }

/* generic inline arrow-link (sf-service-overview .sf-link-arrow,
   sf-process-steps .process-cta-link, kassaba .link-arrow look) */
.sf-kassaba [data-sf-block^="sf-"] .sf-link-arrow,
.sf-kassaba [data-sf-block^="sf-"] .process-cta-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: gap .3s var(--ease);
}
.sf-kassaba [data-sf-block^="sf-"] .sf-link-arrow:hover,
.sf-kassaba [data-sf-block^="sf-"] .process-cta-link:hover { gap: .9rem; color: var(--gold-hi); }

/* Tembe frame look — gold border, 4/5 aspect, rounded.
   sf-service-overview = .sf-media-frame--tembe (on the media wrapper),
   sf-service-teaser   = .sf-st-frame-tembe. */
.sf-kassaba [data-sf-block^="sf-"] .sf-media-frame--tembe,
.sf-kassaba [data-sf-block^="sf-"] .sf-st-frame-tembe {
  position: relative;
  border: 1px solid var(--gold-line, rgba(212,175,55,.4)) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-2);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8), 0 0 50px -16px rgba(212,175,55,.22);
}
.sf-kassaba [data-sf-block^="sf-"] .sf-media-frame--tembe > img,
.sf-kassaba [data-sf-block^="sf-"] .sf-media-frame--tembe > video,
.sf-kassaba [data-sf-block^="sf-"] .sf-st-frame-tembe > img,
.sf-kassaba [data-sf-block^="sf-"] .sf-st-frame-tembe > video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}


/* -----------------------------------------------------------------------------
   sf-hero  (layouts: badge / service / video-fullscreen / pillars)
   ----------------------------------------------------------------------------- */

/* --- badge layout -> kassaba .page-hero band ---
   GEEN background-kill meer: elke sub-pagina toont zijn eigen inline hero-foto
   (render.php: verduisterde foto via multiply + zachte transparant-midden fade),
   net als de bespoke page-hero--* varianten. Was: flat dark gradient !important. */
.sf-kassaba [data-sf-block="sf-hero"] .page-hero {
  /* bespoke page-hero--* geometrie: top-padding ~196px, en de tekstkolom links
     ingesprongen op de bespoke-positie ((100%-maxw)/2 + 80px) — kicker, kop én
     subtekst lijnen daardoor SAMEN uit (niet elk kind los gecentreerd). Geldt voor
     ALLE sub-pagina-hero's, niet alleen Verhaal. max() houdt mobiel op de gutter. */
  padding-top: calc(var(--header-h) + clamp(3.5rem,8vw,7rem));
  padding-bottom: clamp(3rem,6vw,4.5rem);
  padding-left: max(var(--gutter), calc((100% - var(--maxw)) / 2 + 80px));
  padding-right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + 80px));
  position: relative;
  overflow: hidden;
  text-align: left;
}
.sf-kassaba [data-sf-block="sf-hero"] .page-hero > * {
  position: relative; z-index: 1;
  max-width: none; margin-inline: 0;
}
.sf-kassaba [data-sf-block="sf-hero"] .page-hero h1 {
  font-family: var(--f-display);
  font-size: clamp(2.8rem, 8vw, 6rem);
  font-weight: 300; color: var(--ink); line-height: 1.04;
}
/* inline accent-woord in de hero-kop (bv. "Praat"/"koop") = goud cursief, waar ook
   in de titel (leidend of achteraan) via <em> in de content. */
.sf-kassaba [data-sf-block="sf-hero"] .page-hero h1 em,
.sf-kassaba [data-sf-block="sf-hero"] .page-hero h1 i {
  font-style: italic; color: var(--gold); font-family: var(--f-display); font-weight: 300;
}
.sf-kassaba [data-sf-block="sf-hero"] .page-hero p {
  color: var(--ink-soft); line-height: 1.6; font-size: var(--fs-lg);
  margin-top: 1.4rem; max-width: 54ch; font-weight: 300;
}
.sf-kassaba [data-sf-block="sf-hero"] .page-hero__actions {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem;
}

/* breadcrumb + byline */
.sf-kassaba [data-sf-block="sf-hero"] .breadcrumb {
  display: flex; align-items: center; gap: .6rem;
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 1.1rem;
  position: relative; z-index: 1; max-width: var(--maxw); margin-inline: auto;
}
.sf-kassaba [data-sf-block="sf-hero"] .breadcrumb a { color: var(--ink-mute); text-decoration: none; }
.sf-kassaba [data-sf-block="sf-hero"] .breadcrumb a:hover { color: var(--gold); }
.sf-kassaba [data-sf-block="sf-hero"] .breadcrumb span { color: var(--ink-soft); }
.sf-kassaba [data-sf-block="sf-hero"] .hero-byline {
  position: relative; z-index: 1; max-width: var(--maxw); margin-inline: auto;
  font-size: var(--fs-sm); color: var(--ink-soft);
}

/* --- video-fullscreen layout -> cinematic dark hero --- */
.sf-kassaba [data-sf-block="sf-hero"] .sf-hero {
  position: relative; min-height: 92svh; display: grid; align-items: center;
  overflow: hidden; padding: calc(var(--header-h) + 2rem) var(--gutter) 4rem;
  background: var(--bg);
}
.sf-kassaba [data-sf-block="sf-hero"] .sf-hero video,
.sf-kassaba [data-sf-block="sf-hero"] .sf-hero .vk-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.sf-kassaba [data-sf-block="sf-hero"] .sf-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.38) 55%, rgba(10,10,10,.5) 100%),
    linear-gradient(180deg, rgba(10,10,10,.42) 0%, rgba(10,10,10,.22) 42%, rgba(10,10,10,.66) 100%);
}
.sf-kassaba [data-sf-block="sf-hero"] .sf-hero .hero-grid,
.sf-kassaba [data-sf-block="sf-hero"] .sf-hero .hero-content { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto; }
.sf-kassaba [data-sf-block="sf-hero"] .hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.sf-kassaba [data-sf-block="sf-hero"] .hero-eyebrow {
  display: inline-flex; align-items: center; gap: .9rem;
  font-family: var(--f-body); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .42em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem;
}
.sf-kassaba [data-sf-block="sf-hero"] .hero-eyebrow .eb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.sf-kassaba [data-sf-block="sf-hero"] .hero-content h1,
.sf-kassaba [data-sf-block="sf-hero"] .hero-left h1 {
  font-family: var(--f-display); font-size: clamp(3rem, 8vw, 7rem); font-weight: 300; line-height: 1.04;
}
.sf-kassaba [data-sf-block="sf-hero"] .sf-hero .sub { color: var(--ink-soft); font-size: var(--fs-lg); margin-top: 1.4rem; max-width: 44ch; font-weight: 300; }
.sf-kassaba [data-sf-block="sf-hero"] .hero-stats { display: flex; gap: 2.4rem; margin-top: 2.2rem; flex-wrap: wrap; }
.sf-kassaba [data-sf-block="sf-hero"] .hero-stats .stat-num { display: block; font-family: var(--f-display); font-size: 1.9rem; font-weight: 400; color: var(--gold); }
.sf-kassaba [data-sf-block="sf-hero"] .hero-stats .stat-label { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }

/* side-image branch (the bottle column) -> floating frame w/ gold glow */
.sf-kassaba [data-sf-block="sf-hero"] .hero-side-image {
  display: grid; place-items: center; padding: .5rem; position: relative;
}
.sf-kassaba [data-sf-block="sf-hero"] .hero-side-image::before {
  content: ''; position: absolute; width: 84%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,.18), transparent 65%); filter: blur(10px);
}
.sf-kassaba [data-sf-block="sf-hero"] .hero-side-img {
  position: relative; max-height: min(82vh, 780px); width: auto; object-fit: contain;
  filter: drop-shadow(0 50px 60px rgba(0,0,0,.7));
}

/* --- service layout -> photo hero w/ overlay + gold badge + cta --- */
.sf-kassaba [data-sf-block="sf-hero"] .service-page-hero {
  position: relative; min-height: 62vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; padding: 90px var(--gutter); background: var(--bg) !important;
}
.sf-kassaba [data-sf-block="sf-hero"] .service-page-hero .hero-video-bg,
.sf-kassaba [data-sf-block="sf-hero"] .service-page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-kassaba [data-sf-block="sf-hero"] .service-page-hero .hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(10,10,10,.52) 0%, rgba(10,10,10,.78) 100%);
}
.sf-kassaba [data-sf-block="sf-hero"] .service-page-hero > *:not(.hero-video-bg):not(img):not(.hero-overlay) { position: relative; z-index: 2; max-width: 840px; }
.sf-kassaba [data-sf-block="sf-hero"] .service-page-hero .service-hero-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-body); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold) !important; background: rgba(212,175,55,.08) !important;
  border: 1px solid var(--glass-line) !important; padding: .4rem 1rem; border-radius: 999px; margin-bottom: 1.1rem;
}
.sf-kassaba [data-sf-block="sf-hero"] .service-page-hero h1 { font-family: var(--f-display); font-size: clamp(2.8rem, 7vw, 5.5rem); font-weight: 300; color: var(--ink); }
.sf-kassaba [data-sf-block="sf-hero"] .service-page-hero p { color: var(--ink-soft); max-width: 56ch; margin: 1.4rem auto 1.8rem; line-height: 1.6; font-size: var(--fs-lg); }

/* --- pillars layout -> dark platform hero --- */
.sf-kassaba [data-sf-block="sf-hero"] .platform-hero { background: linear-gradient(180deg, #0C0C0C, var(--bg)) !important; padding: calc(var(--header-h) + clamp(3rem,8vw,6rem)) 0 clamp(3rem,7vw,5rem); position: relative; overflow: hidden; }
.sf-kassaba [data-sf-block="sf-hero"] .platform-hero-inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sf-kassaba [data-sf-block="sf-hero"] .platform-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.sf-kassaba [data-sf-block="sf-hero"] .platform-hero-text h1 { font-family: var(--f-display); font-size: clamp(2.6rem,6vw,5rem); font-weight: 300; }
.sf-kassaba [data-sf-block="sf-hero"] .platform-hero-sub { color: var(--ink-soft); font-size: var(--fs-lg); margin-top: 1.3rem; font-weight: 300; }
.sf-kassaba [data-sf-block="sf-hero"] .platform-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.sf-kassaba [data-sf-block="sf-hero"] .platform-pillars { display: flex; gap: 2.4rem; margin-top: 2.2rem; flex-wrap: wrap; }
.sf-kassaba [data-sf-block="sf-hero"] .platform-pillars .num { display: block; font-family: var(--f-display); font-size: 2rem; font-weight: 400; color: var(--gold); }
.sf-kassaba [data-sf-block="sf-hero"] .platform-pillars .lbl { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.sf-kassaba [data-sf-block="sf-hero"] .platform-hero-proof { color: var(--ink-mute); font-size: var(--fs-sm); margin-top: 1.4rem; }

@media (max-width: 960px) {
  .sf-kassaba [data-sf-block="sf-hero"] .hero-grid,
  .sf-kassaba [data-sf-block="sf-hero"] .platform-hero-grid { grid-template-columns: 1fr; }
  .sf-kassaba [data-sf-block="sf-hero"] .hero-side-image { order: -1; }
}


/* -----------------------------------------------------------------------------
   sf-service-overview  ->  kassaba two-column .split / spotlight feel
   ----------------------------------------------------------------------------- */
.sf-kassaba [data-sf-block="sf-service-overview"] .service-overview { padding-block: clamp(4rem,9vw,8rem); }
.sf-kassaba [data-sf-block="sf-service-overview"] .overview-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center;
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
}
.sf-kassaba [data-sf-block="sf-service-overview"] .overview-text h2 { font-size: clamp(2.1rem,4.6vw,3.4rem); margin-bottom: 1.2rem; }
.sf-kassaba [data-sf-block="sf-service-overview"] .overview-tagline { font-family: var(--f-display); font-style: italic; font-size: 1.4rem; color: var(--gold); margin-bottom: 1rem; }
.sf-kassaba [data-sf-block="sf-service-overview"] .overview-text > p { font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.7; margin-bottom: 1rem; font-weight: 300; }
/* benefits -> glass tiles */
.sf-kassaba [data-sf-block="sf-service-overview"] .benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.8rem; }
.sf-kassaba [data-sf-block="sf-service-overview"] .benefit-item {
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.2rem;
  display: flex; align-items: flex-start; gap: .9rem;
}
.sf-kassaba [data-sf-block="sf-service-overview"] .benefit-icon {
  width: 40px; height: 40px; min-width: 40px; border-radius: var(--radius);
  border: 1px solid var(--glass-line); background: rgba(212,175,55,.08);
  display: flex; align-items: center; justify-content: center; color: var(--gold);
}
.sf-kassaba [data-sf-block="sf-service-overview"] .benefit-icon i { color: var(--gold); }
.sf-kassaba [data-sf-block="sf-service-overview"] .benefit-text h4 { font-family: var(--f-display); font-size: 1.2rem; font-weight: 400; color: var(--ink); margin-bottom: .25rem; }
.sf-kassaba [data-sf-block="sf-service-overview"] .benefit-text p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.5; }
.sf-kassaba [data-sf-block="sf-service-overview"] .overview-buttons { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
/* media column (default border) -> glass frame; tembe handled in primitives */
.sf-kassaba [data-sf-block="sf-service-overview"] .overview-img,
.sf-kassaba [data-sf-block="sf-service-overview"] .overview-media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-2);
}
.sf-kassaba [data-sf-block="sf-service-overview"] .overview-img > img,
.sf-kassaba [data-sf-block="sf-service-overview"] .overview-media > img,
.sf-kassaba [data-sf-block="sf-service-overview"] .overview-media > video {
  width: 100%; object-fit: cover; height: clamp(360px,40vw,480px); display: block;
}
.sf-kassaba [data-sf-block="sf-service-overview"] .overview-overlay-badge { position: absolute; z-index: 2; max-width: 160px; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 960px) {
  .sf-kassaba [data-sf-block="sf-service-overview"] .overview-grid { grid-template-columns: 1fr; }
  .sf-kassaba [data-sf-block="sf-service-overview"] .benefits-grid { grid-template-columns: 1fr; }
}


/* -----------------------------------------------------------------------------
   sf-service-teaser  ->  kassaba .split feature row (glass media + gold badge)
   ----------------------------------------------------------------------------- */
.sf-kassaba [data-sf-block="sf-service-teaser"] .feature-row {
  display: flex; gap: clamp(2rem,5vw,5rem); align-items: center;
  max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem,9vw,8rem) var(--gutter);
}
.sf-kassaba [data-sf-block="sf-service-teaser"] .feature-text { flex: 1; }
/* gold badge — beat the inline --sf-st-badge-* vars */
.sf-kassaba [data-sf-block="sf-service-teaser"] .sf-st-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-body); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold) !important; background: rgba(212,175,55,.08) !important;
  border: 1px solid var(--glass-line) !important; box-shadow: none !important;
  padding: .4rem 1rem; border-radius: 999px; margin-bottom: 1.1rem;
}
.sf-kassaba [data-sf-block="sf-service-teaser"] .feature-text h2 { font-size: clamp(2.1rem,4.6vw,3.4rem); font-weight: 300; }
.sf-kassaba [data-sf-block="sf-service-teaser"] .feature-sub { font-family: var(--f-display); font-style: italic; font-size: 1.4rem; color: var(--gold); margin: .8rem 0; }
.sf-kassaba [data-sf-block="sf-service-teaser"] .feature-text p { color: var(--ink-soft); font-weight: 300; line-height: 1.7; }
/* see-more -> kassaba ghost link pill */
.sf-kassaba [data-sf-block="sf-service-teaser"] .see-more {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.4rem;
  font-family: var(--f-body); font-weight: 500; font-size: var(--fs-sm); letter-spacing: .08em; text-transform: uppercase;
  padding: 1rem 1.9rem; border-radius: 999px;
  background: rgba(255,255,255,.02); color: var(--ink); border: 1px solid rgba(212,175,55,.35);
  text-decoration: none; transition: all .4s var(--ease);
}
.sf-kassaba [data-sf-block="sf-service-teaser"] .see-more:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.sf-kassaba [data-sf-block="sf-service-teaser"] .see-more::after { color: var(--gold); transition: transform .4s var(--ease); }
.sf-kassaba [data-sf-block="sf-service-teaser"] .see-more:hover::after { transform: translateX(5px); }
/* default media frame (non-tembe) -> glass; tembe handled in primitives */
.sf-kassaba [data-sf-block="sf-service-teaser"] .feature-img {
  flex: 1; border-radius: var(--radius-lg); overflow: hidden; min-height: clamp(360px,42vw,520px);
  border: 1px solid var(--line); background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
}
.sf-kassaba [data-sf-block="sf-service-teaser"] .feature-img > img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) {
  .sf-kassaba [data-sf-block="sf-service-teaser"] .feature-row { flex-direction: column; }
}


/* -----------------------------------------------------------------------------
   sf-process-steps  ->  kassaba .process-strip (glass tiles, gold italic nums)
   ----------------------------------------------------------------------------- */
.sf-kassaba [data-sf-block="sf-process-steps"] .process-section { padding-block: clamp(4rem,9vw,8rem); }
.sf-kassaba [data-sf-block="sf-process-steps"] .process-title { max-width: 640px; margin: 0 auto clamp(2.2rem,4vw,3rem); text-align: center; padding-inline: var(--gutter); }
.sf-kassaba [data-sf-block="sf-process-steps"] .process-title h2 { font-size: clamp(2.1rem,4.6vw,3.4rem); font-weight: 300; }
.sf-kassaba [data-sf-block="sf-process-steps"] .process-sub { color: var(--ink-soft); font-size: var(--fs-lg); margin-top: 1.1rem; font-weight: 300; }
.sf-kassaba [data-sf-block="sf-process-steps"] .process-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  max-width: var(--maxw); margin: 0 auto; padding: 0;
}
.sf-kassaba [data-sf-block="sf-process-steps"] .process-step {
  padding: 2rem 1.4rem; border-right: 1px solid var(--line); text-align: center;
  display: flex; flex-direction: column; align-items: center; transition: background .4s;
}
.sf-kassaba [data-sf-block="sf-process-steps"] .process-step:hover { background: rgba(212,175,55,.05); }
.sf-kassaba [data-sf-block="sf-process-steps"] .process-step.featured { background: rgba(212,175,55,.07); }
/* number disc -> gold gradient italic numeral, beat inline accent bg */
.sf-kassaba [data-sf-block="sf-process-steps"] .step-num {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-style: italic; font-size: 1.7rem; font-weight: 400;
  color: var(--gold) !important; background: transparent !important;
  border: 1px solid var(--glass-line); margin: 0 auto 1.2rem;
}
.sf-kassaba [data-sf-block="sf-process-steps"] .process-step .fas { color: var(--gold); font-size: 1.3rem; margin-bottom: .7rem; }
.sf-kassaba [data-sf-block="sf-process-steps"] .process-step h3 { font-family: var(--f-display); font-size: 1.4rem; font-weight: 400; color: var(--ink); margin-bottom: .5rem; }
.sf-kassaba [data-sf-block="sf-process-steps"] .process-step p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6; }
/* steps-image layout -> framed thumbnail on top */
.sf-kassaba [data-sf-block="sf-process-steps"] .step-image {
  width: 100%; height: clamp(120px,12vw,160px); border-radius: var(--radius);
  border: 1px solid var(--line); overflow: hidden; margin-bottom: 1.2rem;
}
.sf-kassaba [data-sf-block="sf-process-steps"] .step-image img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.85) saturate(.92); transition: filter .4s var(--ease); }
.sf-kassaba [data-sf-block="sf-process-steps"] .process-step:hover .step-image img { filter: brightness(.96) saturate(1); }
/* vertical layout */
.sf-kassaba [data-sf-block="sf-process-steps"] .process-steps--vertical { display: block; max-width: 760px; }
.sf-kassaba [data-sf-block="sf-process-steps"] .process-steps--vertical .process-step { flex-direction: row; gap: 1.2rem; text-align: left; border-right: none; border-bottom: 1px solid var(--line); }
.sf-kassaba [data-sf-block="sf-process-steps"] .process-steps--vertical .step-num { margin: 0; flex-shrink: 0; }
/* trailing CTA */
.sf-kassaba [data-sf-block="sf-process-steps"] .process-cta { text-align: center; margin-top: 2.6rem; }
@media (max-width: 960px) {
  .sf-kassaba [data-sf-block="sf-process-steps"] .process-step { border-right: none; border-bottom: 1px solid var(--line); }
}


/* -----------------------------------------------------------------------------
   sf-results-stats  ->  kassaba .stats grid (glass cards, gold-clip numbers)
   ----------------------------------------------------------------------------- */
.sf-kassaba [data-sf-block="sf-results-stats"] .results-section { background: linear-gradient(180deg, #0C0C0C, #060606) !important; padding-block: clamp(3.5rem,8vw,6rem); }
.sf-kassaba [data-sf-block="sf-results-stats"] .results-inner {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem;
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); text-align: center;
}
.sf-kassaba [data-sf-block="sf-results-stats"] .result-stat {
  flex: 1; min-width: 200px; padding: 2rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--glass);
}
/* gold-clip number — inline color on the h3 must be beaten */
.sf-kassaba [data-sf-block="sf-results-stats"] .result-stat h3 {
  font-family: var(--f-display); font-size: clamp(2.4rem,5vw,3.6rem); font-weight: 400; line-height: 1;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold) !important;
}
.sf-kassaba [data-sf-block="sf-results-stats"] .result-stat p { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-top: .6rem; }
/* sf-process-steps also embeds a .results-section bar — mirror the look */
.sf-kassaba [data-sf-block="sf-process-steps"] .results-section { background: linear-gradient(180deg, #0C0C0C, #060606) !important; padding-block: clamp(3.5rem,8vw,6rem); margin-top: 3rem; }
.sf-kassaba [data-sf-block="sf-process-steps"] .results-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); text-align: center; }
.sf-kassaba [data-sf-block="sf-process-steps"] .result-stat h3 { font-family: var(--f-display); font-size: clamp(2.4rem,5vw,3.6rem); font-weight: 400; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold) !important; }
.sf-kassaba [data-sf-block="sf-process-steps"] .result-stat p { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-top: .6rem; }


/* -----------------------------------------------------------------------------
   sf-testimonials  (manual: grid / carousel / marquee) -> kassaba .testi-grid
   ----------------------------------------------------------------------------- */
.sf-kassaba [data-sf-block="sf-testimonials"] .testimonials-section { background: var(--bg) !important; padding-block: clamp(4rem,9vw,8rem); position: relative; }
.sf-kassaba [data-sf-block="sf-testimonials"] .section-title { max-width: 700px; margin: 0 auto; text-align: center; padding-inline: var(--gutter); }
.sf-kassaba [data-sf-block="sf-testimonials"] .section-title h2 { font-size: clamp(2.1rem,4.6vw,3.4rem); font-weight: 300; }
.sf-kassaba [data-sf-block="sf-testimonials"] .section-title > p { color: var(--ink-soft); font-size: var(--fs-lg); margin-top: 1.1rem; font-weight: 300; }
/* rating badge -> glass pill */
.sf-kassaba [data-sf-block="sf-testimonials"] .rating-badge {
  display: inline-flex; align-items: center; gap: 1.2rem; margin-top: 1.6rem;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius-lg); padding: 1rem 1.6rem;
}
.sf-kassaba [data-sf-block="sf-testimonials"] .rb-score,
.sf-kassaba [data-sf-block="sf-testimonials"] .rb-count { font-family: var(--f-display); font-size: 1.6rem; font-weight: 400; color: var(--gold); }
.sf-kassaba [data-sf-block="sf-testimonials"] .rb-stars { color: var(--gold); letter-spacing: 2px; }
.sf-kassaba [data-sf-block="sf-testimonials"] .rb-caption,
.sf-kassaba [data-sf-block="sf-testimonials"] .rb-count-caption { font-size: var(--fs-xs); color: var(--ink-mute); }
.sf-kassaba [data-sf-block="sf-testimonials"] .rb-divider { width: 1px; align-self: stretch; background: var(--line); }
/* card grid / track */
.sf-kassaba [data-sf-block="sf-testimonials"] .testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; max-width: var(--maxw); margin: clamp(2.2rem,4vw,3rem) auto 0; padding-inline: var(--gutter); }
.sf-kassaba [data-sf-block="sf-testimonials"] .testimonials-carousel,
.sf-kassaba [data-sf-block="sf-testimonials"] .testimonials-marquee { max-width: var(--maxw); margin: clamp(2.2rem,4vw,3rem) auto 0; padding-inline: var(--gutter); }
.sf-kassaba [data-sf-block="sf-testimonials"] .testimonials-track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sf-kassaba [data-sf-block="sf-testimonials"] .testimonials-track::-webkit-scrollbar { display: none; }
.sf-kassaba [data-sf-block="sf-testimonials"] .t-nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glass-line); background: var(--glass); color: var(--gold); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .3s var(--ease); }
.sf-kassaba [data-sf-block="sf-testimonials"] .t-nav:hover { background: var(--grad-gold); color: #0A0A0A; border-color: transparent; }
/* card -> glass tcard, Cormorant italic quote */
.sf-kassaba [data-sf-block="sf-testimonials"] .testimonial-card {
  width: 340px; flex: 0 0 340px; max-width: 100%; scroll-snap-align: start;
  padding: 2.2rem; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transition: transform .5s var(--ease), border-color .5s; text-align: left;
}
.sf-kassaba [data-sf-block="sf-testimonials"] .testimonials-grid .testimonial-card { width: auto; flex: initial; }
.sf-kassaba [data-sf-block="sf-testimonials"] .testimonial-card:hover { transform: translateY(-6px); border-color: var(--glass-line); }
.sf-kassaba [data-sf-block="sf-testimonials"] .testimonial-card .stars { color: var(--gold); letter-spacing: .25em; margin-bottom: 1rem; }
.sf-kassaba [data-sf-block="sf-testimonials"] .testimonial-card > p { font-family: var(--f-display); font-style: italic; font-size: 1.35rem; line-height: 1.4; color: var(--ink); margin-bottom: 1.2rem; }
.sf-kassaba [data-sf-block="sf-testimonials"] .testimonial-author { display: flex; align-items: center; gap: .9rem; }
.sf-kassaba [data-sf-block="sf-testimonials"] .testimonial-author .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-gold); display: flex; align-items: center; justify-content: center; color: #0A0A0A; font-family: var(--f-body); font-weight: 600; font-size: .9rem; object-fit: cover; flex-shrink: 0; }
.sf-kassaba [data-sf-block="sf-testimonials"] .testimonial-author .name { font-family: var(--f-display); font-size: 1.15rem; font-weight: 400; color: var(--ink); }
.sf-kassaba [data-sf-block="sf-testimonials"] .testimonial-author .role,
.sf-kassaba [data-sf-block="sf-testimonials"] .author-company { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
@media (max-width: 960px) {
  .sf-kassaba [data-sf-block="sf-testimonials"] .testimonials-grid { grid-template-columns: 1fr; }
}


/* -----------------------------------------------------------------------------
   sf-pricing  (layouts: grid [Tailwind] / toggle [scoped]) -> kassaba .tier
   ----------------------------------------------------------------------------- */
/* --- toggle layout --- */
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-section { background: var(--bg) !important; padding-block: clamp(4rem,9vw,8rem); }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-inner { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); text-align: center; }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-badge {
  display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-body);
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); background: rgba(212,175,55,.08); border: 1px solid var(--glass-line);
  padding: .4rem 1rem; border-radius: 999px; margin-bottom: 1.1rem;
}
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-inner > h2 { font-size: clamp(2.1rem,4.6vw,3.4rem); font-weight: 300; }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-inner .sub { color: var(--ink-soft); font-size: var(--fs-lg); margin-top: 1rem; font-weight: 300; }
/* toggle pill */
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-toggle { display: inline-flex; position: relative; gap: .3rem; margin: 1.8rem auto 2.6rem; padding: .3rem; border: 1px solid var(--line); border-radius: 999px; background: var(--glass); }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-toggle span { position: relative; z-index: 1; padding: .55rem 1.2rem; font-size: var(--fs-sm); color: var(--ink-soft); cursor: pointer; border-radius: 999px; }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-toggle span.active { color: #0A0A0A; }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-toggle .slider { position: absolute; z-index: 0; top: .3rem; bottom: .3rem; border-radius: 999px; background: var(--grad-gold); transition: transform .4s var(--ease); }
/* cards */
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.2rem,2.5vw,1.8rem); }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card {
  display: flex; flex-direction: column; flex: 1; min-width: 260px; max-width: 320px; position: relative;
  padding: 2rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--glass); text-align: left; transition: transform .5s var(--ease), border-color .5s;
}
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card:hover { transform: translateY(-6px); border-color: var(--glass-line); }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card.popular { border-color: var(--gold) !important; background: var(--glass-2); box-shadow: var(--shadow-gold) !important; }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card-image { width: auto; height: 96px; object-fit: contain; margin: 0 auto 1rem; filter: drop-shadow(0 16px 22px rgba(0,0,0,.6)); }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card .label { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card .badge {
  position: absolute; top: 0; right: 1.4rem; transform: translateY(-50%);
  font-family: var(--f-body); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  color: #120E03 !important; background: var(--grad-gold) !important; padding: .25rem .7rem; border-radius: 999px;
}
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card .card-title { font-family: var(--f-display); font-size: 1.35rem; font-weight: 400; color: var(--ink); margin: .2rem 0 1rem; }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card .price { font-family: var(--f-display); font-size: 2.4rem; font-weight: 500; color: var(--gold); }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card .price .unit { font-family: var(--f-body); font-size: var(--fs-xs); color: var(--ink-mute); letter-spacing: .04em; }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card ul { display: flex; flex-direction: column; gap: .6rem; margin: 1.2rem 0 1.6rem; flex: 1; }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card li { position: relative; padding-left: 1.4rem; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.5; }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card li::before { content: '✦'; position: absolute; left: 0; top: .05em; color: var(--gold); font-size: .7em; }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card .btn-plan { width: 100%; justify-content: center; margin-top: auto; }

/* --- grid layout (Tailwind utilities) -> dark glass cards --- */
.sf-kassaba [data-sf-block="sf-pricing"] .bg-white { background: var(--glass) !important; border: 1px solid var(--line); }
.sf-kassaba [data-sf-block="sf-pricing"] .bg-white.ring-2,
.sf-kassaba [data-sf-block="sf-pricing"] .ring-primary { border-color: var(--gold) !important; box-shadow: var(--shadow-gold); }
.sf-kassaba [data-sf-block="sf-pricing"] .text-gray-900,
.sf-kassaba [data-sf-block="sf-pricing"] .text-gray-900 * { color: var(--ink) !important; }
.sf-kassaba [data-sf-block="sf-pricing"] .text-gray-600,
.sf-kassaba [data-sf-block="sf-pricing"] .text-gray-500 { color: var(--ink-soft) !important; }
.sf-kassaba [data-sf-block="sf-pricing"] .bg-primary,
.sf-kassaba [data-sf-block="sf-pricing"] .bg-primary\/10 { background: var(--grad-gold) !important; color: #120E03 !important; }
.sf-kassaba [data-sf-block="sf-pricing"] .text-primary { color: var(--gold) !important; }
.sf-kassaba [data-sf-block="sf-pricing"] .text-green-500 { color: var(--gold) !important; }


/* -----------------------------------------------------------------------------
   sf-feature-grid  (layouts: cards / services / legacy-svg) -> kassaba glass cards
   ----------------------------------------------------------------------------- */
/* --- cards layout --- */
.sf-kassaba [data-sf-block="sf-feature-grid"] .features-section { background: var(--bg) !important; padding-block: clamp(4rem,9vw,8rem); }
.sf-kassaba [data-sf-block="sf-feature-grid"] .features-inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sf-kassaba [data-sf-block="sf-feature-grid"] .features-title { text-align: center; max-width: 640px; margin: 0 auto clamp(2.2rem,4vw,3rem); }
.sf-kassaba [data-sf-block="sf-feature-grid"] .features-title h2 { font-size: clamp(2.1rem,4.6vw,3.4rem); font-weight: 300; }
.sf-kassaba [data-sf-block="sf-feature-grid"] .features-title p { color: var(--ink-soft); font-size: var(--fs-lg); margin-top: 1rem; font-weight: 300; }
.sf-kassaba [data-sf-block="sf-feature-grid"] .features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,3vw,2.4rem); }
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card {
  display: flex; flex-direction: column; padding: 2.2rem 2rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--glass);
  text-decoration: none; transition: transform .5s var(--ease), border-color .5s;
}
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card:hover { transform: translateY(-6px); border-color: var(--glass-line); }
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card--inline { flex-direction: row; gap: 1rem; align-items: flex-start; }
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card--inline .feature-card__body { flex: 1; }
/* Kassaba feature-grid items dragen geen icoon (nummers zitten in de item-badge);
   sf_feature_icon('') rendert een lege .f-icon-box → verberg 'm zodat er geen leeg
   gouden vierkant blijft staan. */
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card .f-icon { display: none; }
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card--inline .f-icon { margin-bottom: 0; margin-top: .2rem; }
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card .f-icon i { color: var(--gold); }
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card h3 { font-family: var(--f-display); font-size: 1.5rem; font-weight: 400; color: var(--ink); margin-bottom: .6rem; }
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.7; }
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card__badge {
  display: inline-block; align-self: flex-start; font-family: var(--f-body);
  font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); background: rgba(212,175,55,.08); border: 1px solid var(--glass-line);
  padding: .3rem .8rem; border-radius: 999px; margin-bottom: 1rem;
}
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-list { display: flex; flex-direction: column; gap: .5rem; margin: .4rem 0 0; padding: 0; }
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-list li { position: relative; padding-left: 1.4rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-list li::before { content: '✦'; position: absolute; left: 0; top: .05em; color: var(--gold); font-size: .7em; }
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card__link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); transition: gap .3s var(--ease); }
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card:hover .feature-card__link { gap: .9rem; }
/* --- services layout --- */
.sf-kassaba [data-sf-block="sf-feature-grid"] .services-section-bg { background: var(--bg) !important; padding-block: clamp(4rem,9vw,8rem); }
.sf-kassaba [data-sf-block="sf-feature-grid"] .services-section-bg .section-inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sf-kassaba [data-sf-block="sf-feature-grid"] .services-section-bg .section-title { text-align: center; max-width: 640px; margin: 0 auto clamp(2.2rem,4vw,3rem); }
.sf-kassaba [data-sf-block="sf-feature-grid"] .services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,3vw,2.4rem); }
.sf-kassaba [data-sf-block="sf-feature-grid"] .svc-card { display: block; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--glass); text-decoration: none; transition: transform .5s var(--ease), border-color .5s; }
.sf-kassaba [data-sf-block="sf-feature-grid"] .svc-card:hover { transform: translateY(-8px); border-color: var(--glass-line); box-shadow: var(--shadow-gold); }
.sf-kassaba [data-sf-block="sf-feature-grid"] .svc-card .svc-icon img { width: 100%; height: 240px; object-fit: cover; display: block; filter: brightness(.88) saturate(.92); }
.sf-kassaba [data-sf-block="sf-feature-grid"] .svc-card h3 { font-family: var(--f-display); font-size: 1.5rem; font-weight: 400; color: var(--ink); padding: 1.4rem 1.6rem; margin: 0; }
@media (max-width: 1024px) {
  .sf-kassaba [data-sf-block="sf-feature-grid"] .features-grid,
  .sf-kassaba [data-sf-block="sf-feature-grid"] .services-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .sf-kassaba [data-sf-block="sf-feature-grid"] .features-grid,
  .sf-kassaba [data-sf-block="sf-feature-grid"] .services-grid { grid-template-columns: 1fr; }
}


/* -----------------------------------------------------------------------------
   sf-faq  (details / button-circle / tailwind) -> kassaba .faq accordion
   ----------------------------------------------------------------------------- */
.sf-kassaba [data-sf-block="sf-faq"] .faq-section { background: var(--bg) !important; padding-block: clamp(4rem,9vw,8rem); }
.sf-kassaba [data-sf-block="sf-faq"] .faq-section .section-inner { max-width: 880px; margin-inline: auto; padding-inline: var(--gutter); }
.sf-kassaba [data-sf-block="sf-faq"] .faq-section .section-title { text-align: center; margin-bottom: clamp(2.2rem,4vw,3rem); }
.sf-kassaba [data-sf-block="sf-faq"] .faq-section .section-title h2 { font-size: clamp(2.1rem,4.6vw,3.4rem); font-weight: 300; }
.sf-kassaba [data-sf-block="sf-faq"] .faq-list { display: flex; flex-direction: column; gap: .8rem; }
.sf-kassaba [data-sf-block="sf-faq"] .faq-item {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); padding: 0 1.3rem; transition: border-color .4s;
}
.sf-kassaba [data-sf-block="sf-faq"] .faq-item.open,
.sf-kassaba [data-sf-block="sf-faq"] details.faq-item[open] { border-color: var(--glass-line); }
/* button-circle */
.sf-kassaba [data-sf-block="sf-faq"] .faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0; font-family: var(--f-display); font-size: 1.25rem; color: var(--ink); text-align: left; cursor: pointer; background: none; border: none;
}
.sf-kassaba [data-sf-block="sf-faq"] .faq-icon { color: var(--gold); font-size: 1.4rem; line-height: 1; transition: transform .35s var(--ease); }
.sf-kassaba [data-sf-block="sf-faq"] .faq-item.open .faq-icon { transform: rotate(45deg); }
.sf-kassaba [data-sf-block="sf-faq"] .faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.sf-kassaba [data-sf-block="sf-faq"] .faq-item.open .faq-answer { max-height: 320px; }
.sf-kassaba [data-sf-block="sf-faq"] .faq-answer-inner,
.sf-kassaba [data-sf-block="sf-faq"] .faq-body { padding: 0 0 1.2rem; color: var(--ink-soft); font-size: var(--fs-sm); }
/* details */
.sf-kassaba [data-sf-block="sf-faq"] details.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.1rem 0; font-family: var(--f-display); font-size: 1.25rem; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.sf-kassaba [data-sf-block="sf-faq"] details.faq-item summary::-webkit-details-marker { display: none; }
.sf-kassaba [data-sf-block="sf-faq"] .faq-chev { color: var(--gold); font-size: 1.4rem; line-height: 1; transition: transform .35s var(--ease); }
.sf-kassaba [data-sf-block="sf-faq"] details.faq-item[open] .faq-chev { transform: rotate(45deg); }
/* tailwind layout */
.sf-kassaba [data-sf-block="sf-faq"] .border-gray-200 { border-color: var(--line) !important; }
.sf-kassaba [data-sf-block="sf-faq"] .text-gray-900,
.sf-kassaba [data-sf-block="sf-faq"] .text-gray-700 { color: var(--ink) !important; }
.sf-kassaba [data-sf-block="sf-faq"] .text-gray-600 { color: var(--ink-soft) !important; }


/* -----------------------------------------------------------------------------
   sf-cta  ->  kassaba gold-edged glass band
   ----------------------------------------------------------------------------- */
.sf-kassaba [data-sf-block="sf-cta"] .cta-section { background: var(--bg) !important; padding-block: clamp(3.5rem,8vw,6rem); position: relative; overflow: hidden; }
.sf-kassaba [data-sf-block="sf-cta"] .cta-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 80% at 50% 0%, rgba(212,175,55,.12), transparent 70%);
}
.sf-kassaba [data-sf-block="sf-cta"] .cta-card {
  position: relative; z-index: 1; max-width: var(--maxw); margin-inline: auto;
  padding: clamp(2.4rem,5vw,4rem) clamp(1.6rem,4vw,3rem); text-align: center;
  border: 1px solid var(--glass-line); border-radius: var(--radius-lg);
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.sf-kassaba [data-sf-block="sf-cta"] .cta-eyebrow { font-family: var(--f-body); font-size: var(--fs-xs); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.sf-kassaba [data-sf-block="sf-cta"] .cta-section h2 { font-family: var(--f-display); font-size: clamp(2.1rem,5vw,3.6rem); font-weight: 300; color: var(--ink); margin: 0 0 1rem; }
.sf-kassaba [data-sf-block="sf-cta"] .cta-section p { color: var(--ink-soft); font-size: var(--fs-lg); margin: 0 auto 1.8rem; max-width: 60ch; font-weight: 300; }
.sf-kassaba [data-sf-block="sf-cta"] .cta-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.sf-kassaba [data-sf-block="sf-cta"] .cta-sub { font-size: var(--fs-sm); color: var(--ink-mute); margin-top: 1rem; }
/* two-column variant */
.sf-kassaba [data-sf-block="sf-cta"] .cta-card:has(.cta-card-text) { display: flex; align-items: center; justify-content: space-between; gap: 2rem; text-align: left; flex-wrap: wrap; }
.sf-kassaba [data-sf-block="sf-cta"] .cta-card-text { text-align: left; }
.sf-kassaba [data-sf-block="sf-cta"] .cta-card-action { display: flex; align-items: center; }
@media (max-width: 700px) {
  .sf-kassaba [data-sf-block="sf-cta"] .cta-actions { flex-direction: column; align-items: center; }
}


/* -----------------------------------------------------------------------------
   sf-contact-details  ->  kassaba .contact-grid (info dl left, glass form right)
   ----------------------------------------------------------------------------- */
.sf-kassaba [data-sf-block="sf-contact-details"] .contact-section { background: var(--bg) !important; padding-block: clamp(4rem,9vw,8rem); }
.sf-kassaba [data-sf-block="sf-contact-details"] .contact-inner {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem,5vw,4.5rem); align-items: start;
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
}
.sf-kassaba [data-sf-block="sf-contact-details"] .contact-info { display: flex; flex-direction: column; gap: 1.4rem; }
.sf-kassaba [data-sf-block="sf-contact-details"] .contact-info > h2 { font-size: clamp(2.1rem,4.6vw,3.2rem); font-weight: 300; }
.sf-kassaba [data-sf-block="sf-contact-details"] .contact-info > p { color: var(--ink-soft); line-height: 1.7; font-weight: 300; }
/* detail rows -> bottom-ruled list */
.sf-kassaba [data-sf-block="sf-contact-details"] .contact-detail {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 0; border-bottom: 1px solid var(--line);
}
.sf-kassaba [data-sf-block="sf-contact-details"] .contact-detail-icon {
  width: 44px; height: 44px; min-width: 44px; border-radius: var(--radius);
  border: 1px solid var(--glass-line); background: rgba(212,175,55,.08);
  display: flex; align-items: center; justify-content: center; color: var(--gold);
}
.sf-kassaba [data-sf-block="sf-contact-details"] .contact-detail-icon svg { width: 20px; height: 20px; fill: var(--gold); }
.sf-kassaba [data-sf-block="sf-contact-details"] .contact-detail-body h4 { font-family: var(--f-body); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .3rem; font-weight: 500; }
.sf-kassaba [data-sf-block="sf-contact-details"] .contact-detail-body a,
.sf-kassaba [data-sf-block="sf-contact-details"] .contact-detail-body p { font-family: var(--f-display); font-size: 1.4rem; color: var(--ink); text-decoration: none; line-height: 1.4; }
.sf-kassaba [data-sf-block="sf-contact-details"] .contact-detail-body a:hover { color: var(--gold); }
/* form -> glass card */
.sf-kassaba [data-sf-block="sf-contact-details"] .contact-form {
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem,4vw,2.6rem);
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.sf-kassaba [data-sf-block="sf-contact-details"] .contact-form h3 { font-family: var(--f-display); font-size: 1.6rem; font-weight: 400; color: var(--ink); margin-bottom: 1.2rem; }
.sf-kassaba [data-sf-block="sf-contact-details"] .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sf-kassaba [data-sf-block="sf-contact-details"] .form-group { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.sf-kassaba [data-sf-block="sf-contact-details"] .form-group label { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.sf-kassaba [data-sf-block="sf-contact-details"] .form-group input,
.sf-kassaba [data-sf-block="sf-contact-details"] .form-group textarea,
.sf-kassaba [data-sf-block="sf-contact-details"] .captcha-input {
  padding: .9rem 1.1rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); font-family: var(--f-body); width: 100%; transition: border-color .25s;
}
.sf-kassaba [data-sf-block="sf-contact-details"] .form-group input:focus,
.sf-kassaba [data-sf-block="sf-contact-details"] .form-group textarea:focus,
.sf-kassaba [data-sf-block="sf-contact-details"] .captcha-input:focus { outline: none; border-color: var(--gold); }
.sf-kassaba [data-sf-block="sf-contact-details"] .form-group textarea { resize: vertical; min-height: 130px; }
.sf-kassaba [data-sf-block="sf-contact-details"] .captcha-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.sf-kassaba [data-sf-block="sf-contact-details"] .captcha-question { font-size: var(--fs-sm); color: var(--ink-soft); }
.sf-kassaba [data-sf-block="sf-contact-details"] .btn-submit { justify-content: center; }
.sf-kassaba [data-sf-block="sf-contact-details"] .contact-success { text-align: center; padding: 2rem 0; }
.sf-kassaba [data-sf-block="sf-contact-details"] .success-check { width: 64px; height: 64px; margin: 0 auto 1rem; color: var(--gold); }
@media (max-width: 900px) {
  .sf-kassaba [data-sf-block="sf-contact-details"] .contact-inner { grid-template-columns: 1fr; }
  .sf-kassaba [data-sf-block="sf-contact-details"] .form-row { grid-template-columns: 1fr; }
}

/* ── Merk-accent: overschrijf blueprint-block-defaults (salesfision-rood #e63946) → Kassaba-goud, site-breed ── */
.sf-kassaba [data-sf-block="sf-cta"]{--sf-cta-accent:#C9A461;--sf-cta-glow:rgba(201,164,97,.12);--sf-cta-glow-soft:rgba(201,164,97,.06);--sf-cta-glow-hover:rgba(201,164,97,.22);--sf-cta-glow-hover-soft:rgba(201,164,97,.1);--sf-cta-border:rgba(201,164,97,.35);--sf-cta-border-hover:rgba(201,164,97,.65);}
.sf-kassaba [data-sf-block="sf-blog-posts"]{--sf-blog-accent:#C9A461;}
.sf-kassaba [data-sf-block="sf-cases-grid"]{--sf-cases-accent:#C9A461;}
.sf-kassaba [data-sf-block="sf-contact-details"]{--sf-contact-accent:#C9A461;}
.sf-kassaba [data-sf-block="sf-faq"]{--sf-faq-accent:#C9A461;}
.sf-kassaba [data-sf-block="sf-feature-grid"]{--sf-highlight:#C9A461;}
.sf-kassaba [data-sf-block="sf-hero"]{--sf-hero-red:#C9A461;}
.sf-kassaba [data-sf-block="sf-pricing"]{--sf-pricing-accent:#C9A461;}
.sf-kassaba [data-sf-block="sf-service-teaser"]{--sf-st-accent:#C9A461;}
.sf-kassaba [data-sf-block="sf-stats"]{--sf-stats-accent:#C9A461;}
.sf-kassaba [data-sf-block="sf-team"]{--sf-team-accent:#C9A461;}
.sf-kassaba [data-sf-block="sf-testimonials"]{--sf-accent:#C9A461;}
.sf-kassaba [data-sf-block="sf-timeline"]{--sf-timeline-accent:#C9A461;}
.sf-kassaba [data-sf-block="sf-values"]{--sf-values-accent:#C9A461;--sf-values-glow:rgba(201,164,97,.12);}
.sf-kassaba [data-sf-block="sf-vision"]{--sf-vision-accent:#C9A461;}

/* ═══════════════════════════════════════════════════════════════
   1:1 FIX PASS — homepage gelijk trekken met bespoke referentie (localhost:8092)
   Gescoped onder .sf-kassaba; overschrijft library + reskin-defaults. Blok voor blok.
   ═══════════════════════════════════════════════════════════════ */

/* ── HERO (sf-hero) ─────────────────────────────────────────────── */
/* eyebrow-marker: reskin-bolletje (.eb-dot) -> lijntje zoals bespoke .kicker::before */
.sf-kassaba [data-sf-block="sf-hero"] .hero-eyebrow .eb-dot{
  width:2.4rem; height:1px; border-radius:0;
  background:var(--gold,#D4AF37); box-shadow:none;
}
/* elke kop-regel op een eigen regel (bespoke = 3 .hero-line's onder elkaar) */
.sf-kassaba [data-sf-block="sf-hero"] .hero-content h1 em,
.sf-kassaba [data-sf-block="sf-hero"] .hero-content h1 .alt-font{ display:block; white-space:nowrap; }
/* "en vakmanschap" (<em>): library toont 800 wit -> bespoke = 300 cr\00E8me, niet cursief */
.sf-kassaba [data-sf-block="sf-hero"] .hero-content h1 em{
  font-weight:300; font-style:normal; color:#ECE6D8;
}
/* Accent-<em> in sf-cta koppen (bv. "Het <em>proefpakket</em>") -> goud italic zoals de andere accentwoorden (hero-em blijft bewust cr\00E8me). */
.sf-kassaba [data-sf-block="sf-cta"] h2 em{
  color:var(--gold); font-style:italic; font-weight:300;
}
/* "luxe ontmoet" (.alt-font): library toont Playfair cr\00E8me -> bespoke = Cormorant met goud-gradient (glow, zoals buttons) */
.sf-kassaba [data-sf-block="sf-hero"] .hero-content h1 .alt-font{
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:300; font-style:italic;
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ── EYEBROWS (generiek): pill/badge -> lijntje zoals bespoke .kicker::before ── */
.sf-kassaba [data-sf-block^="sf-"] .section-badge,
.sf-kassaba [data-sf-block^="sf-"] .sf-st-badge{
  border:0 !important; background:none !important; border-radius:0 !important;
  padding:0 !important; box-shadow:none !important;
  display:inline-flex; align-items:center; gap:.85rem;
  color:var(--gold,#D4AF37);
}
.sf-kassaba [data-sf-block^="sf-"] .section-badge__dot,
.sf-kassaba [data-sf-block^="sf-"] .sf-st-badge .dot{ display:none !important; }
.sf-kassaba [data-sf-block^="sf-"] .section-badge::before,
.sf-kassaba [data-sf-block^="sf-"] .sf-st-badge::before{
  content:""; width:2.4rem; height:1px; flex:0 0 auto;
  background:var(--gold,#D4AF37);
}

/* ── SERVICE-TEASER (sf-service-teaser) ── */
/* CTA .see-more: crème knop -> goud tekstlink */
.sf-kassaba [data-sf-block="sf-service-teaser"] .see-more{
  color:var(--gold,#D4AF37) !important; background:none !important; border:0 !important;
  border-radius:0 !important; padding:0 !important; font-weight:300 !important; box-shadow:none !important;
}

/* ── RESULTS-STATS (sf-results-stats): padding 96 -> 144 (thema-ritme) ── */
.sf-kassaba [data-sf-block="sf-results-stats"] .results-section{
  padding-top:144px; padding-bottom:144px;
}

/* ── TESTIMONIALS (sf-testimonials): padding 128 -> 72 (bespoke --tight) ── */
.sf-kassaba [data-sf-block="sf-testimonials"] .testimonials-section{
  padding-top:72px; padding-bottom:72px;
}

/* ── PROCESS-STEPS (sf-process-steps): 4-koloms gecentreerd -> 5-op-rij, links, met cijfers 01–05 ── */
.sf-kassaba [data-sf-block="sf-process-steps"] .process-steps{
  grid-template-columns:repeat(5,1fr); counter-reset:pstep; text-align:left;
}
.sf-kassaba [data-sf-block="sf-process-steps"] .process-step{
  counter-increment:pstep; text-align:left;
}
.sf-kassaba [data-sf-block="sf-process-steps"] .process-step h3{ text-align:left; }
.sf-kassaba [data-sf-block="sf-process-steps"] .process-step .step-image{ position:relative; }
.sf-kassaba [data-sf-block="sf-process-steps"] .process-step h3::before{
  content:counter(pstep,decimal-leading-zero);
  display:block; font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:300; font-size:2.2rem; line-height:1; color:var(--gold,#D4AF37);
  margin:.6rem 0 .35rem;
}
/* kop links uitlijnen (was gecentreerd) */
.sf-kassaba [data-sf-block="sf-process-steps"] h2{ text-align:left; }
/* alles links: nummer, titel, tekst en beeld */
.sf-kassaba [data-sf-block="sf-process-steps"] .process-step{ align-items:flex-start; }
.sf-kassaba [data-sf-block="sf-process-steps"] .process-step *{ text-align:left; }
.sf-kassaba [data-sf-block="sf-process-steps"] .process-step .step-image{ margin-left:0; margin-right:auto; }

/* ── OVER KASSABA (sf-service-overview): spiegelen — video links, tekst rechts ──
   ALLEEN op de homepage; andere pagina's (bv. Verhaal "Paramaribo × Weesp") houden
   de foto rechts. Was ongescoped → lekte naar elke sf-service-overview. */
body.home .sf-kassaba [data-sf-block="sf-service-overview"] .overview-media,
body.home .sf-kassaba [data-sf-block="sf-service-overview"] .overview-img{ order:-1; }

/* ── STATS (sf-results-stats) visueel aan Over Kassaba vastplakken (geen losse band) ── */
.sf-kassaba [data-sf-block="sf-results-stats"] .results-section{ padding-top:0; }

/* ── SERVICE-TEASER (sf-service-teaser): media/video fors groter ──
   media = <video> in .sf-st-frame-tembe (geen flex-grow → bleef ~300px). Laat 'm de halve rij vullen. */
.sf-kassaba [data-sf-block="sf-service-teaser"] .sf-st-frame-tembe{
  flex:1 1 0 !important; width:100% !important; max-width:none !important; align-self:stretch;
}

/* ── MINORS ── */
/* hero-kop op bespoke-grootte (~120px, was 112px) */
.sf-kassaba [data-sf-block="sf-hero"] .hero-content h1{ font-size:clamp(3rem,8.6vw,120px); }
/* proces-sectiekop links (stond gecentreerd via .process-title margin:auto) */
.sf-kassaba [data-sf-block="sf-process-steps"] .process-title{
  text-align:left !important; margin-left:0 !important; margin-right:auto !important; max-width:none !important;
  padding-inline:0 !important; /* had 80px gutter → kop-tekst stond 80px rechts van de kaarten */
}

/* ── OVER KASSABA / STATS — uitlijning & consistentie (user-feedback) ── */
/* video vult het frame volledig (geen zwarte balken boven/onder; had height:480 in frame 550) */
.sf-kassaba [data-sf-block="sf-service-overview"] .sf-media-frame--tembe > video,
.sf-kassaba [data-sf-block="sf-service-overview"] .overview-media > video{
  height:100% !important; width:100% !important; object-fit:cover; display:block;
}
/* stats zelfde (transparante) achtergrond als Over Kassaba — geen zichtbare naad */
.sf-kassaba [data-sf-block="sf-results-stats"] .results-section{ background:transparent !important; padding-top:0 !important; }
/* Over Kassaba onder-padding klein → stats hangen er bijna tegenaan (horen erbij).
   ALLEEN homepage; elders (Verhaal e.a.) houdt de sectie zijn normale onder-padding. */
body.home .sf-kassaba [data-sf-block="sf-service-overview"] .service-overview{ padding-bottom:clamp(.5rem,1.5vw,1.5rem) !important; }
.sf-kassaba [data-sf-block="sf-results-stats"] .results-inner{ padding-top:0 !important; }
/* Over Kassaba + stats even breed als de rest van de homepage (site-standaard = --maxw 1280; waren 1200/1120) */
.sf-kassaba [data-sf-block="sf-service-overview"] .service-overview{ max-width:var(--maxw) !important; padding-inline:0 !important; }
/* video/tekst-kolommen op de standaard content-gutter (was 40px extra → video 40px te ver ingesprongen) */
.sf-kassaba [data-sf-block="sf-service-overview"] .overview-grid{ padding-inline:var(--gutter) !important; }
.sf-kassaba [data-sf-block="sf-results-stats"] .results-inner{ max-width:var(--maxw) !important; }

/* ── PROCESS-STEPS: step-images vullen de kolom, LANDSCHAP zoals 8092 (was bijna vierkant → landschap-foto's te veel gecropt) ── */
.sf-kassaba [data-sf-block="sf-process-steps"] .step-image{ width:100% !important; height:auto !important; aspect-ratio:5/3 !important; }
/* onderwerp links verankeren zodat elke foto visueel links uitlijnt (zoals Oogst) */
.sf-kassaba [data-sf-block="sf-process-steps"] .step-image img{ object-position:left center !important; }
/* proces-sectie even breed als de rest (was 1200) */
.sf-kassaba [data-sf-block="sf-process-steps"] .process-section{ max-width:var(--maxw) !important; }

/* ── TESTIMONIALS: rode hover weg (blueprint hardcodeert rgba(230,57,70) i.p.v. --sf-accent) → goud ── */
.sf-kassaba [data-sf-block="sf-testimonials"] .testimonial-card:hover{
  border-color:rgba(212,175,55,.32) !important;
  box-shadow:0 18px 50px -18px rgba(212,175,55,.35), 0 0 0 1px rgba(212,175,55,.06) !important;
}
.sf-kassaba [data-sf-block="sf-testimonials"] .t-nav:hover{
  background:rgba(212,175,55,.16) !important; border-color:rgba(212,175,55,.55) !important;
  box-shadow:0 0 28px rgba(212,175,55,.25) !important;
}

/* ═══ PAGINA-SPECIFIEK: VERHAAL (page-id 5) ═══ */
/* "Paramaribo × Weesp" (sf-service-overview) moet groot-display zijn zoals 8092 (54→96px),
   maar alléén op Verhaal — op de homepage blijft de service-overview-kop kleiner. */
body.page-home .sf-kassaba [data-sf-block="sf-service-overview"] h2{
  font-size:clamp(3.4rem,7vw,6rem) !important;
  line-height:1.02 !important;
}
/* Hero-foto terug: de site-brede reskin killt de inline bg (regel 217). Op Verhaal
   moet de verduisterde waterfront-foto zichtbaar zijn, net als bespoke page-hero--hut. */
body.page-home .sf-kassaba [data-sf-block="sf-hero"] .page-hero{
  /* bespoke: foto verduisterd (~brightness .32) + zachte fade die in het midden
     transparant is (i.p.v. egale donkere waas). multiply darkt de foto, gradient faded. */
  background:
    linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,0) 40%, var(--bg) 100%),
    url('../images/stock/waterfront-village.jpg') center center / cover no-repeat,
    #4d4d4d !important;
  background-blend-mode: normal, multiply, normal !important;
}
/* Over-Kassaba media: de bron-video (over-kassaba.mp4) is vierkant 960x960. Frame op
   1:1 zodat 'ie met object-fit:cover volledig in beeld komt (was 3:2 -> boven/onder
   weggesneden). Subtiele rand, kleine radius (clip-tembe) i.p.v. de generieke 4:5. */
body.page-home .sf-kassaba [data-sf-block="sf-service-overview"] .sf-media-frame--tembe{
  aspect-ratio:1 / 1 !important;
  border-radius:6px !important;
  border:1px solid rgba(212,175,55,.22) !important;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.7) !important;
}
/* foto vult het 3:2-frame netjes (was 480px hoog → stak buiten het frame) */
body.page-home .sf-kassaba [data-sf-block="sf-service-overview"] .sf-media-frame--tembe > img{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important;
}
/* Verhaal-specifiek: de hero-titel breekt op twee regels (accent "Kassaba" op eigen
   regel). De hero-geometrie/uitlijning zelf is nu algemeen (zie badge-hero hierboven). */
body.page-home .sf-kassaba [data-sf-block="sf-hero"] .page-hero h1 .hero-heading-accent{
  display:block;
}
/* ── sf-cta = bespoke OPEN gecentreerde CTA (géén kaart), met hut-motief-icoon boven
   de kop. De sf-cta rendert standaard een omkaderde .cta-card met goud-glow-band.
   Op Kassaba is elke CTA (Verhaal, Het bier, …) open; de homepage heeft géén sf-cta,
   dus dit is site-breed veilig. ── */
.sf-kassaba [data-sf-block="sf-cta"] .cta-section{
  padding-block:clamp(3rem,5vw,4.5rem) !important;
  background:transparent !important;
}
.sf-kassaba [data-sf-block="sf-cta"] .cta-section::before{
  display:none !important;
}
.sf-kassaba [data-sf-block="sf-cta"] .cta-card{
  background:none !important; border:none !important; border-radius:0 !important;
  box-shadow:none !important; padding:0 !important;
  max-width:720px !important; margin-inline:auto !important;
}
/* motief-icoon (bespoke .motif-mark) boven de kop — cassave is het hoofdmotief;
   losse pagina's overschrijven dit (bv. Verhaal → hut). */
.sf-kassaba [data-sf-block="sf-cta"] .cta-card::before{
  content:'' !important; display:block !important;
  width:44px; height:48px; margin:0 auto 16px;
  background:url('../images/motif-cassava.png') center / contain no-repeat; opacity:.8;
}
/* Verhaal-CTA gebruikt het hut-motief (bespoke .motif-mark--hut) i.p.v. cassave. */
body.page-home .sf-kassaba [data-sf-block="sf-cta"] .cta-card::before{
  width:46px; height:44px;
  background-image:url('../images/motif-hut.png') !important;
}

/* ═══ PAGINA-SPECIFIEK: HET BIER (page-id 6) ═══ */
/* CTA "Het proefpakket": bespoke kop is groot-display (h-xl ~96px) i.p.v. 57.6px. */
body.page-verhaal .sf-kassaba [data-sf-block="sf-cta"] .cta-card h2{
  font-size:clamp(3.4rem,7vw,6rem) !important;
  line-height:1.04 !important;
}

/* ═══ PAGINA-SPECIFIEK: BROUWPROCES (page-id 7) ═══ */
/* Processtappen hebben op de bespoke géén sectiekop (de "How We Work"-tekst is de
   lege-veld-placeholder van sf-process-steps) → verbergen; de stappen starten direct. */
body.page-het-bier .sf-kassaba [data-sf-block="sf-process-steps"] .process-title{
  display:none !important;
}
/* sf-results-stats = bespoke compacte spec-strip: 6 cellen in één rij, label BOVEN,
   waarde 24px goud (i.p.v. grote 57px-tegels waarde-boven-label over twee rijen). */
body.page-het-bier .sf-kassaba [data-sf-block="sf-results-stats"] .results-inner{
  display:grid !important; grid-template-columns:repeat(6,1fr) !important; gap:0 !important;
}
body.page-het-bier .sf-kassaba [data-sf-block="sf-results-stats"] .result-stat{
  display:flex !important; flex-direction:column-reverse !important; align-items:flex-start !important;
  gap:.45rem !important; padding:1.4rem 1.5rem !important;
  border:1px solid rgba(255,255,255,.08) !important; text-align:left !important;
}
body.page-het-bier .sf-kassaba [data-sf-block="sf-results-stats"] .result-stat h3{
  font-size:24px !important; font-weight:300 !important; margin:0 !important; line-height:1.2 !important;
}
body.page-het-bier .sf-kassaba [data-sf-block="sf-results-stats"] .result-stat p{
  font-size:11.84px !important; letter-spacing:.14em !important; text-transform:uppercase !important; margin:0 !important;
}
@media (max-width:900px){
  body.page-het-bier .sf-kassaba [data-sf-block="sf-results-stats"] .results-inner{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

/* ── sf-feature-grid: kaart-nummer (badge "01/02/03") is bespoke een PLAT goud
   Cormorant-cursief cijfer, geen gouden cirkel/pill. (homepage gebruikt dit blok niet) ── */
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card__badge{
  border:0 !important; background:none !important; border-radius:0 !important;
  padding:0 !important; width:auto !important; height:auto !important; min-width:0 !important;
  display:inline-block !important; box-shadow:none !important;
  font-family:var(--f-display) !important; font-style:italic !important; font-weight:400 !important;
  font-size:1.8rem !important; line-height:1 !important; letter-spacing:0 !important;
  color:var(--gold) !important; margin-bottom:.6rem !important;
}

/* ── sf-feature-grid inline-variant (card_layout=inline) = bespoke compacte lijst:
   goud-dot + naam (Cormorant) + locatie (klein grijs) in strakke rijen, i.p.v.
   grote ruime kaarten. Bv. verkooppunten op Waar te koop. ── */
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card--inline{
  display:flex !important; flex-direction:row !important; align-items:flex-start !important;
  gap:.9rem !important; padding:1.25rem 1.4rem !important; text-align:left !important;
}
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card--inline .f-icon{
  display:block !important;
  width:10px !important; height:10px !important; min-width:10px !important; flex:0 0 auto !important;
  border-radius:50% !important; background:var(--gold) !important;
  margin:.45rem 0 0 0 !important; padding:0 !important; font-size:0 !important;
  box-shadow:0 0 8px rgba(212,175,55,.5) !important;
}
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card--inline .feature-card__body h3{
  font-size:20.8px !important; font-weight:400 !important; margin:0 !important;
}
.sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card--inline .feature-card__body p{
  font-size:14px !important; color:var(--ink-mute,#6e685c) !important; margin:.15rem 0 0 !important; line-height:1.4 !important;
}

/* ═══ PAGINA-SPECIFIEK: WAAR TE KOOP (page-id 8) ═══ */
/* De bespoke pagina heeft géén "BESTELLEN / Zo krijg je Kassaba"-titel boven de
   genummerde kaarten — die volgen direct op de hero. Verberg alleen die titel
   (de 2e feature-grid "Waar je ons nu vindt" houdt zijn eigen titel). */
body.page-waar-te-koop .sf-kassaba [data-sf-block="sf-feature-grid"]:has(.feature-card__badge) .features-title{
  display:none !important;
}

/* ═══ PAGINA-SPECIFIEK: CONTACT (page-id 9) ═══ */
/* De bespoke contact-linkerkolom heeft géén kop/intro (start direct met de
   contactmethoden). sf_get_block_field valt bij leeg terug op de Engelse default,
   dus verberg de titel + intro hier expliciet. */
body.page-contact .sf-kassaba [data-sf-block="sf-contact-details"] .contact-info > h2,
body.page-contact .sf-kassaba [data-sf-block="sf-contact-details"] .contact-info > p{
  display:none !important;
}
/* Form-titel als bespoke eyebrow (kicker) i.p.v. grote serif-kop: klein goud uppercase
   met letterspacing + een goud lijntje ervoor. */
body.page-contact .sf-kassaba [data-sf-block="sf-contact-details"] .contact-form h3{
  font-family:var(--f-body) !important; font-size:.74rem !important; font-weight:600 !important;
  color:var(--gold) !important; text-transform:uppercase !important; letter-spacing:.32em !important;
  display:flex !important; align-items:center; gap:.85rem; margin:0 0 1.8rem !important;
}
body.page-contact .sf-kassaba [data-sf-block="sf-contact-details"] .contact-form h3::before{
  content:''; width:2.4rem; height:1px; background:var(--gold); flex:0 0 auto;
}
/* WhatsApp-knop (goud pill via btn-primary) + icoon, en de kleine demo-notitie. */
body.page-contact .sf-kassaba [data-sf-block="sf-contact-details"] .contact-wa-btn{
  display:inline-flex !important; align-items:center; gap:.6rem; margin-top:1.8rem;
}
body.page-contact .sf-kassaba [data-sf-block="sf-contact-details"] .contact-wa-btn .contact-wa-icon{
  width:18px; height:18px; flex:0 0 auto;
}
body.page-contact .sf-kassaba [data-sf-block="sf-contact-details"] .contact-note{
  margin-top:1.5rem; font-size:var(--fs-sm,13px); color:var(--ink-mute,#6e685c); line-height:1.5; max-width:46ch;
}
/* Knoppen bespoke = COMPACTE pill (auto-breedte, links), niet full-width.
   De blok-CSS rekt .btn-submit tot 100% en de flex-kolom rekt de WhatsApp-knop. */
body.page-contact .sf-kassaba [data-sf-block="sf-contact-details"] .contact-wa-btn,
body.page-contact .sf-kassaba [data-sf-block="sf-contact-details"] .contact-form .btn-submit{
  width:auto !important; align-self:flex-start !important;
  display:inline-flex !important; align-items:center; gap:.55rem;
}
/* VERSTUUR krijgt de bespoke pijl. */
body.page-contact .sf-kassaba [data-sf-block="sf-contact-details"] .contact-form .btn-submit::after{
  content:'→'; font-size:1.05em; line-height:1;
}
/* Spacing gelijktrekken met bespoke: contactmethode-rijen stonden ~142px uit elkaar
   (margin-bottom 32 + flex-gap → te ruim). Terug naar ~105px ritme. + sectie-padding 144. */
body.page-contact .sf-kassaba [data-sf-block="sf-contact-details"] .contact-section{
  padding-block:clamp(4rem,9vw,9rem) !important;
}
body.page-contact .sf-kassaba [data-sf-block="sf-contact-details"] .contact-detail--rows{
  margin-bottom:0 !important; padding-block:1rem !important;
}

/* ═══ PAGINA-SPECIFIEK: SHOP (page-id 10) ═══ */
/* Primaire hero-knop "Neem contact op" krijgt de bespoke pijl (ref: <span class="arr">→</span>). */
body.page-shop .sf-kassaba [data-sf-block="sf-hero"] .page-hero .btn-primary::after{
  content:' →'; white-space:nowrap;
}
/* Korte coming-soon hero → de foto verduisterde onderaan niet genoeg, waardoor een
   grijze band net boven de footer bleef staan. Extra bottom-fade naar de achtergrond. */
body.page-shop .sf-kassaba [data-sf-block="sf-hero"] .page-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:55%;
  background:linear-gradient(180deg, rgba(10,10,10,0) 0%, var(--bg) 88%);
  z-index:0; pointer-events:none;
}

/* ── sf-pricing (crowdfunding tier-kaarten) → bespoke "Word backer"-look:
   prijs met €-prefix bóven de tiernaam, geen /periode, en compacte knop
   (toggle-branch rendert standaard naam-boven-prijs, "25 /full" en full-width). ── */
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card{ display:flex; flex-direction:column; }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card .price{ order:1; }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card .card-title{ order:2; margin-top:.35rem; }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card ul{ order:3; }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card .btn-plan{ order:4; margin-top:auto; }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card .price::before{ content:'€'; }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card .price .unit{ display:none !important; }
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card .btn-plan{
  width:auto !important; align-self:flex-start; display:inline-flex; justify-content:center;
}
/* Alleen de featured tier (De Kenner) heeft een goud-gevulde knop; de rest is
   bespoke een donkere outline-knop (transparant + goud-rand + crème tekst). */
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card:not(.popular) .btn-plan{
  background:rgba(255,255,255,.02) !important; background-image:none !important;
  border:1px solid rgba(212,175,55,.35) !important; color:var(--ink,#ECE6D8) !important;
  box-shadow:none !important;
}
/* "Kies je beloning" = bespoke centered kicker met lijntjes ernaast, GEEN goud pill. */
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-badge{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  padding:0 !important; box-shadow:none !important; color:var(--gold) !important;
  display:inline-flex !important; align-items:center; gap:.9rem;
  text-transform:uppercase; letter-spacing:.28em; font-weight:600; font-size:.72rem;
}
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-badge::before,
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-badge::after{
  content:''; width:2.4rem; height:1px; background:var(--gold); display:inline-block;
}
/* De sf-pricing tekent een DRUK stippen-patroon (::before radial-gradient .13 wit).
   Bespoke = subtiel goud ruit-tembe-patroon (84px, opacity .05). ::before hergebruiken. */
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-section::before{
  inset:0 !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:auto !important; height:auto !important; transform:none !important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1.4'%3E%3Cpolygon points='42,2 82,42 42,82 2,42'/%3E%3Cpolygon points='42,16 68,42 42,68 16,42'/%3E%3Cpolygon points='42,30 54,42 42,54 30,42'/%3E%3C/g%3E%3C/svg%3E") repeat !important;
  background-size:84px 84px !important;
  opacity:.05 !important;
}
/* € strak tegen het bedrag: de .price is flex met gap 6px → "€ 25"; bespoke = "€25". */
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card .price{ gap:2px !important; }
/* Feature-bullets: de sf-pricing zet li op flex+align-center, waardoor de tekst verticaal
   verschuift t.o.v. de absolute ✦ (scheef, m.n. bij 2-regelige items). Bespoke = list-item
   block-flow (tekst begint bovenaan, netjes naast de ✦). */
.sf-kassaba [data-sf-block="sf-pricing"] .pricing-card ul li{
  display:list-item !important; list-style:none !important;
  align-items:normal !important; gap:0 !important;
  padding:0 0 0 22.4px !important; margin-bottom:.65rem !important; position:relative !important;
}

/* ═══ PAGINA-SPECIFIEK: CROWDFUNDING (page-id 11) ═══ */
/* Feature-kaarten "Meer dan een bijdrage" dragen hun nummer (01/02/03) in het icon-veld,
   dat standaard display:none is. Tonen als plat goud-cursief cijfer (zoals bespoke). */
body.page-crowdfunding .sf-kassaba [data-sf-block="sf-feature-grid"] .feature-card:not(.feature-card--inline) .f-icon{
  display:block !important;
  font-family:var(--f-display) !important; font-style:italic !important; font-weight:400 !important;
  font-size:1.8rem !important; line-height:1 !important; color:var(--gold) !important;
  background:none !important; border:0 !important; width:auto !important; height:auto !important;
  margin:0 0 .7rem !important; padding:0 !important;
}
/* "Word backer" (sf-pricing): bespoke section--dark heeft een subtiele donkere gradient
   (#0c0c0c → #060606) i.p.v. een vlakke achtergrond → tiers komen beter naar voren. */
body.page-crowdfunding .sf-kassaba [data-sf-block="sf-pricing"] .pricing-section{
  background:linear-gradient(180deg, #0C0C0C 0%, #060606 100%) !important;
}
/* Story "Van keukentafel" = bespoke tembe-wash: full-width iets lichter paneel (#101010). */
body.page-crowdfunding .sf-kassaba [data-sf-block="kassaba-split-media"]{
  background:#101010;
}
body.page-crowdfunding .sf-kassaba [data-sf-block="kassaba-split-media"] .container.split{
  padding-block:clamp(3.5rem,7vw,6rem);
}
/* FAQ "+"-toggle: de sf-faq hardcodeert het Salesfision-ROOD (rgba(230,57,70)) voor de
   cirkel; bespoke is een plat goud "+". Rood → weg (transparant, geen rand). */
.sf-kassaba [data-sf-block="sf-faq"] .faq-chev{
  background:transparent !important; border:0 !important; color:var(--gold) !important;
}
/* Crowdfunding-CTA "Proef straks…" is op de bespoke een tembe-wash-paneel (#101010),
   niet de standaard-transparante open-CTA. Achtergrond terugzetten. */
body.page-crowdfunding .sf-kassaba [data-sf-block="sf-cta"] .cta-section{
  background:#101010 !important;
}

/* ============================================================================
   1:1-fixes juli 2026 (slug-gescoped, stabiel over omgevingen).
   ========================================================================= */

/* --- WAAR TE KOOP: verkooppunten als één omkaderd grid + footnote --- */
body.page-waar-te-koop [data-sf-block="sf-feature-grid"]:not(:has(.feature-card__badge)) .features-grid{
  gap:0 !important; border:1px solid var(--line) !important; border-radius:var(--radius-lg) !important;
  overflow:hidden !important; background:rgba(255,255,255,.015) !important;
}
body.page-waar-te-koop [data-sf-block="sf-feature-grid"]:not(:has(.feature-card__badge)) .feature-card--inline{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  border-right:1px solid var(--line) !important; border-bottom:1px solid var(--line) !important;
  padding:1.35rem 1.6rem !important; transform:none !important;
}
body.page-waar-te-koop [data-sf-block="sf-feature-grid"]:not(:has(.feature-card__badge)) .feature-card--inline:nth-child(3n){
  border-right:0 !important;
}
body.page-waar-te-koop [data-sf-block="sf-feature-grid"] .features-footnote{
  margin-top:1.4rem; font-size:var(--fs-sm,13px); color:var(--ink-mute,#6e685c); line-height:1.5;
}

/* --- CONTACT: sub-regel, boot-ornament, donkere/korte hero --- */
body.page-contact [data-sf-block="sf-contact-details"] .contact-detail-sub{
  font-size:1rem !important; color:var(--ink-mute) !important; margin-top:.15rem;
}
/* Boot + lijntje onder de 'App ons direct'-knop. Op .contact-info::after (altijd
   zichtbaar) i.p.v. .contact-note::before, want .contact-info > p wordt hierboven
   op display:none gezet -> een verborgen note zou de boot ook verbergen.
   contact-inner op stretch (kolommen even hoog) + margin-top:auto duwt de boot naar
   de onderkant van de info-kolom, zodat 'ie uitlijnt met de onderkant van het formulier. */
body.page-contact [data-sf-block="sf-contact-details"] .contact-inner{ align-items:stretch; }
body.page-contact [data-sf-block="sf-contact-details"] .contact-info::after{
  content:''; display:block; width:100%; max-width:260px; height:28px; margin:auto auto 0;
  background:
    url(../images/motif-boat.png) center center / 52px 28px no-repeat,
    linear-gradient(90deg, transparent calc(50% - 36px), var(--bg) calc(50% - 36px), var(--bg) calc(50% + 36px), transparent calc(50% + 36px)) center/100% 100% no-repeat,
    linear-gradient(90deg, transparent, rgba(212,175,55,.5), transparent) center/100% 2px no-repeat;
}
body.page-contact [data-sf-block="sf-hero"] .page-hero{
  padding-top:calc(var(--header-h) + clamp(2.5rem,5vw,4rem)) !important;
  padding-bottom:clamp(2rem,4vw,3rem) !important;
}
body.page-contact [data-sf-block="sf-hero"] .page-hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.35) 45%, var(--bg) 100%);
}

/* --- CROWDFUNDING: 'Kies je beloning' -> alle 4 beloningen op één rij
   (flex-wrap gaf 3+1). Scoped op page-crowdfunding zodat andere sf-pricing intact blijft. --- */
body.page-crowdfunding [data-sf-block="sf-pricing"] .pricing-cards{
  display:grid !important; grid-template-columns:repeat(4, 1fr); align-items:stretch;
  gap:clamp(1rem,1.8vw,1.4rem);
}
body.page-crowdfunding [data-sf-block="sf-pricing"] .pricing-card{
  min-width:0; max-width:none; width:auto;
}
@media (max-width:1024px){
  body.page-crowdfunding [data-sf-block="sf-pricing"] .pricing-cards{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  body.page-crowdfunding [data-sf-block="sf-pricing"] .pricing-cards{ grid-template-columns:1fr; }
}

/* --- BROUWPROCES: donkere hero, zig-zag stappen, spec-strip. Strak op
   page-brouwproces zodat home (zelfde sf-process-steps/sf-results-stats) intact blijft. --- */
body.page-brouwproces [data-sf-block="sf-hero"] .page-hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,.35) 35%, var(--bg) 100%);
}
/* spec-tabel -> subtiele strip i.p.v. grote kaarten */
body.page-brouwproces [data-sf-block="sf-results-stats"] .results-section{ background:var(--bg) !important; padding-block:clamp(2.5rem,5vw,4rem); }
body.page-brouwproces [data-sf-block="sf-results-stats"] .results-inner{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 2.4rem;
  max-width:var(--maxw); margin:0 auto; padding:1.8rem var(--gutter);
  /* beat de ongescoopte regel ~937 (.results-inner{padding-top:0!important}, voor home)
     die hier de bovenlijn tegen de tekst duwde. */
  padding-top:1.8rem !important;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:left;
}
body.page-brouwproces [data-sf-block="sf-results-stats"] .result-stat{ flex:0 1 auto; min-width:0; padding:0; border:none; background:none; }
body.page-brouwproces [data-sf-block="sf-results-stats"] .result-stat h3{
  font-family:var(--f-display); font-weight:400; line-height:1; font-size:1.5rem;
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--gold) !important;
}
body.page-brouwproces [data-sf-block="sf-results-stats"] .result-stat p{
  font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-top:.35rem;
}
/* stappen -> alternerende zig-zag (timeline look) */
body.page-brouwproces [data-sf-block="sf-process-steps"] .process-title{ display:none; }
body.page-brouwproces [data-sf-block="sf-process-steps"] .process-steps{
  display:block; max-width:var(--maxw); margin:0 auto; border:none; background:none;
  -webkit-backdrop-filter:none; backdrop-filter:none; counter-reset:kstep;
}
body.page-brouwproces [data-sf-block="sf-process-steps"] .process-step{
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto;
  column-gap:clamp(2rem,5vw,5rem); row-gap:.6rem; align-items:center;
  padding:clamp(3rem,6vw,5rem) var(--gutter); border:none; text-align:left; counter-increment:kstep;
}
body.page-brouwproces [data-sf-block="sf-process-steps"] .step-image{
  grid-column:1; grid-row:1 / 4; align-self:center; width:100%; height:auto; aspect-ratio:4/3; margin:0;
  border:1px solid var(--line); border-radius:var(--radius-lg);
}
body.page-brouwproces [data-sf-block="sf-process-steps"] .process-step::before{
  content:counter(kstep, decimal-leading-zero); grid-column:2; grid-row:1; align-self:end;
  font-family:var(--f-display); font-style:italic; font-weight:300; line-height:1; font-size:clamp(3rem,7vw,5rem);
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
body.page-brouwproces [data-sf-block="sf-process-steps"] .process-step h3{
  grid-column:2; grid-row:2; align-self:start; margin:0;
  font-family:var(--f-display); font-weight:400; color:var(--ink); font-size:clamp(1.6rem,3vw,2.2rem);
}
body.page-brouwproces [data-sf-block="sf-process-steps"] .process-step p{
  grid-column:2; grid-row:3; align-self:start; margin:0; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.7; max-width:42ch;
}
body.page-brouwproces [data-sf-block="sf-process-steps"] .process-step:nth-child(even) .step-image{ grid-column:2; }
body.page-brouwproces [data-sf-block="sf-process-steps"] .process-step:nth-child(even)::before,
body.page-brouwproces [data-sf-block="sf-process-steps"] .process-step:nth-child(even) h3,
body.page-brouwproces [data-sf-block="sf-process-steps"] .process-step:nth-child(even) p{ grid-column:1; }
@media (max-width:760px){
  body.page-brouwproces [data-sf-block="sf-process-steps"] .process-step,
  body.page-brouwproces [data-sf-block="sf-process-steps"] .process-step:nth-child(even){ grid-template-columns:1fr; }
  body.page-brouwproces [data-sf-block="sf-process-steps"] .step-image{ grid-column:1 !important; grid-row:auto; aspect-ratio:16/10; }
  body.page-brouwproces [data-sf-block="sf-process-steps"] .process-step::before,
  body.page-brouwproces [data-sf-block="sf-process-steps"] .process-step h3,
  body.page-brouwproces [data-sf-block="sf-process-steps"] .process-step p{ grid-column:1 !important; }
}
/* brouwproces: verberg de bestaande h3::before-pstep-nummer (dubbel met de zig-zag ::before counter) */
body.page-brouwproces [data-sf-block="sf-process-steps"] .process-step h3::before{ content:none; display:none; }

/* --- SHOP: bierfoto iets zichtbaarder (lichtere overlay dan de inline .55/.75)
   + cassave-motief rechts in de hero (bestaande assets, page-shop-gescoped). --- */
body.page-shop [data-sf-block="sf-hero"] .page-hero{
  background: linear-gradient(to bottom, rgba(0,0,0,.40) 0%, rgba(0,0,0,.62) 100%), url(../images/stock/beer-glass-dark.jpg) center center / cover no-repeat !important;
}
body.page-shop [data-sf-block="sf-hero"] .page-hero::before{
  content:''; position:absolute; top:0; right:0; bottom:0; width:42%; z-index:0; pointer-events:none;
  background:url(../images/motif-cassava.png) right center / contain no-repeat; opacity:.45;
}

/* ============================================================================
   MOBIEL (<=640px) — overflow-vangnet + grid-collapses. Alle grids die op smal
   niet inklapten (home-stappen, feature-grids, product-grid, spec-strip, grid
   van verkooppunten) naar 1 kolom + geen horizontale scroll.
   ========================================================================= */

@media (max-width:640px){
  /* Home "Vijf eerlijke stappen" + elk steps-image grid -> 1 kolom */
  .sf-kassaba [data-sf-block="sf-process-steps"] .process-steps{ grid-template-columns:1fr !important; }
  /* Product-grid -> 1 kolom */
  .sf-kassaba [data-sf-block="kassaba-product-grid"] .product-grid{ grid-template-columns:1fr !important; }
  /* Feature-grids (waar-te-koop kaarten + verkooppunten + crowdfunding) -> 1 kolom */
  .sf-kassaba [data-sf-block="sf-feature-grid"] .features-grid{ grid-template-columns:1fr !important; }
  /* verkooppunten-grid: bij 1 kolom geen interne verticale lijnen, wel onderlijnen */
  body.page-waar-te-koop [data-sf-block="sf-feature-grid"]:not(:has(.feature-card__badge)) .feature-card--inline{
    border-right:0 !important;
  }
  /* Brouwproces spec-strip -> nette wrap (2 per rij) */
  body.page-brouwproces [data-sf-block="sf-results-stats"] .results-inner{
    justify-content:flex-start; gap:1rem 2rem;
  }
  body.page-brouwproces [data-sf-block="sf-results-stats"] .result-stat{ flex:0 0 40%; }
  /* Pricing reward-kaarten -> volledige breedte gestapeld */
  .sf-kassaba [data-sf-block="sf-pricing"] .pricing-card{ flex:1 1 100% !important; max-width:100% !important; }
  /* Shop cassave-motief kleiner + minder dominant op smal */
  body.page-shop [data-sf-block="sf-hero"] .page-hero::before{ width:60%; opacity:.28; }
}

/* MOBIEL — media/grids die op smal een vaste breedte hielden (root-overflow-fix) */
.sf-kassaba img, .sf-kassaba video{ max-width:100%; }
@media (max-width:640px){
  /* sf-service-overview: media+tekst -> 1 kolom, video/afbeelding volle breedte */
  .sf-kassaba [data-sf-block="sf-service-overview"] .overview-grid{ grid-template-columns:1fr !important; }
  .sf-kassaba [data-sf-block="sf-service-overview"] .overview-media{ width:100% !important; max-width:100% !important; }
  /* alle tembe-media-frames + hun media -> volle breedte, geen vaste px */
  .sf-kassaba .sf-media-frame--tembe,
  .sf-kassaba [class*="overview-media"], .sf-kassaba [class*="split__media"], .sf-kassaba [class*="media-frame"]{
    width:100% !important; max-width:100% !important; flex-basis:auto !important;
  }
  .sf-kassaba .sf-media-frame--tembe video, .sf-kassaba .sf-media-frame--tembe img{ width:100% !important; }
}