/* ============================================================
   Webfonts — lokaal gehost (DSGVO: geen verbinding met Google)
   ============================================================ */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/instrument-serif-400.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/instrument-serif-400-italic.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/geist-400.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/geist-500.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/geist-600.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/geist-700.woff2') format('woff2')}


/* ============================================================
   KANSŌ Outdoor — Design tokens (uit Lea's design system)
   ============================================================ */
:root{
  /* Base palette — brand-mandated */
  --kanso-sugar-swizzle:#F3EFE7;
  --kanso-sand:#E5D7C5;
  --kanso-simply-taupe:#AD9F93;
  --kanso-seagrass:#959889;
  --kanso-mocha-mousse:#A47864;
  --kanso-forest-night:#4C4F47;
  --kanso-411c:#5E514D;
  --kanso-white:#FFFFFF;
  --kanso-ink:#2F322E;
  --kanso-surface:#FBF8F1;
  --kanso-muted:#A89B8D;
  --kanso-line:rgba(47,50,46,.14);

  /* Surfaces */
  --surface-page:var(--kanso-sugar-swizzle);
  --surface-card:var(--kanso-surface);
  --surface-veil:rgba(255,255,255,.36);
  --surface-capsule:rgba(243,239,231,.86);
  --surface-topbar:rgba(243,239,231,.92);
  --surface-sand:var(--kanso-sand);
  --surface-dark:var(--kanso-forest-night);

  /* Text */
  --text-primary:var(--kanso-ink);
  --text-body:rgba(47,50,46,.76);
  --text-secondary:var(--kanso-411c);
  --text-soft:rgba(47,50,46,.62);
  --text-muted:var(--kanso-muted);
  --text-eyebrow:var(--kanso-seagrass);
  --text-on-dark:var(--kanso-sugar-swizzle);
  --text-on-dark-soft:rgba(243,239,231,.75);
  --text-link:var(--kanso-mocha-mousse);

  /* Accents */
  --accent-primary:var(--kanso-mocha-mousse);
  --accent-primary-hover:#94694F;
  --accent-signature:var(--kanso-forest-night);
  --accent-signature-hover:#5B5F55;

  /* Borders */
  --border-subtle:var(--kanso-line);
  --border-faint:rgba(47,50,46,.08);
  --border-on-dark:rgba(243,239,231,.25);

  /* Type */
  --font-serif:'Instrument Serif','Iowan Old Style',Georgia,serif;
  --font-sans:'Geist','Inter',-apple-system,'Segoe UI',sans-serif;
  --fs-100:12px; --fs-200:13px; --fs-300:14px; --fs-400:16px; --fs-500:18px;
  --fs-600:21px; --fs-700:28px; --fs-800:40px; --fs-900:56px; --fs-1000:58px; --fs-1100:64px;
  --lh-relaxed:1.60; --lh-normal:1.45;
  --ls-display:-.02em; --ls-h1:-.035em; --ls-h2:-.025em; --ls-h3:-.018em; --ls-h4:-.012em;
  --ls-wider:.12em;
  --type-display-1:400 var(--fs-1100)/1.0 var(--font-serif);
  --type-editorial-quote:italic 400 var(--fs-700)/1.32 var(--font-serif);
  --type-heading-1:430 var(--fs-900)/1.04 var(--font-sans);
  --type-heading-2:450 var(--fs-800)/1.10 var(--font-sans);
  --type-heading-3:500 var(--fs-700)/1.16 var(--font-sans);
  --type-heading-4:500 var(--fs-600)/1.20 var(--font-sans);
  --type-body-lg:400 var(--fs-500)/var(--lh-relaxed) var(--font-sans);
  --type-body:400 var(--fs-400)/var(--lh-relaxed) var(--font-sans);
  --type-body-sm:400 var(--fs-300)/var(--lh-normal) var(--font-sans);
  --type-eyebrow:600 var(--fs-100)/1.2 var(--font-sans);
  --type-button:600 var(--fs-300)/1 var(--font-sans);
  --type-caption:400 var(--fs-200)/var(--lh-normal) var(--font-sans);

  /* Space & layout */
  --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --space-7:40px; --space-8:56px; --space-9:72px; --space-10:96px; --space-11:128px;
  --content-max-width:1200px;
  --content-max-width-narrow:720px;

  /* Verticaal ritme — bewust NIET overal gelijk.
     Ruim rond hero/CTA, strakker binnen samenhangende blokken. */
  --section-y:clamp(56px,6.4vw,82px);
  --section-y-lg:clamp(72px,8.2vw,108px);
  --head-gap:clamp(36px,4.4vw,56px);

  /* Radius / shadow / motion */
  --radius-sm:12px; --radius-md:18px; --radius-lg:26px; --radius-xl:32px; --radius-pill:999px;
  --shadow-sm:0 8px 24px rgba(94,81,77,.07);
  --shadow-md:0 18px 50px rgba(94,81,77,.10);
  --shadow-lg:0 26px 80px rgba(94,81,77,.13);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --duration-base:200ms; --duration-slow:420ms;
}

/* ------------------------------------------------------------
   Flatsome-afstemming — alleen binnen .kanso-home.
   :where() houdt de specificiteit op één klasse: hoog genoeg om
   Flatsome's element-regels te verslaan, laag genoeg zodat de
   componentregels hieronder altijd winnen.
   ------------------------------------------------------------ */
.kanso-home :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,form){margin:0;padding:0}
.kanso-home :where(ul,ol){list-style:none}
.kanso-home :where(blockquote){border:0;background:none;quotes:none;font-style:normal}
.kanso-home :where(blockquote)::before,.kanso-home :where(blockquote)::after{content:none}
.kanso-home :where(img){max-width:100%;height:auto}
.kanso-home :where(a){text-decoration:none;box-shadow:none}
.kanso-home :where(a:has(> img)){display:block}
.kanso-home :where(a:hover){text-decoration:none}
.kanso-home :where(button,input){font-family:inherit}
.kanso-home{overflow-x:hidden}
.kanso-home-page .page-wrapper{padding-top:0;padding-bottom:0}
.kanso-home-page #main .page-wrapper{padding:0}
/* Flatsome geeft body/#main een witte achtergrond — hier het warme papier terug */
.kanso-home-page,
.kanso-home-page #wrapper,
.kanso-home-page #main,
.kanso-home-page .page-wrapper,
.kanso-home{background-color:var(--surface-page)}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--type-body);
     -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
.wrap{max-width:var(--content-max-width);margin:0 auto;padding:0 var(--space-6)}
.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-eyebrow)}
section{scroll-margin-top:88px}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--duration-slow) var(--ease-standard),transform var(--duration-slow) var(--ease-standard)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font:var(--type-button);letter-spacing:.01em;
     padding:15px 28px;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;
     transition:background var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard)}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--accent-primary);color:#fff}
.btn--primary:hover{background:var(--accent-primary-hover)}
.btn--dark{background:var(--accent-signature);color:var(--text-on-dark)}
.btn--dark:hover{background:var(--accent-signature-hover)}
.btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost-light:hover{background:rgba(255,255,255,.12)}
.btn--ghost{background:transparent;color:var(--text-secondary);border-color:var(--border-subtle)}
.btn--ghost:hover{background:var(--surface-veil)}
.btn--light{background:var(--kanso-sugar-swizzle);color:var(--kanso-ink)}
.btn--light:hover{background:#fff}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;transition:background var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard)}
.site-header__inner{max-width:var(--content-max-width);margin:0 auto;padding:18px var(--space-6);
     display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.site-header__logo img{height:30px;width:auto;transition:opacity var(--duration-base)}
.logo--dark{display:none}
.site-nav{display:flex;gap:var(--space-6);align-items:center}
.site-nav a{font:500 var(--fs-300)/1 var(--font-sans);letter-spacing:.01em;color:#fff;opacity:.92;
     padding:6px 0;border-bottom:1px solid transparent;transition:border-color var(--duration-base),opacity var(--duration-base)}
.site-nav a:hover{border-color:currentColor;opacity:1}
.site-header__actions{display:flex;align-items:center;gap:var(--space-4)}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-pill);
     border:1px solid rgba(255,255,255,.4);color:#fff;background:transparent;cursor:pointer;
     transition:background var(--duration-base),border-color var(--duration-base)}
.icon-btn:hover{background:rgba(255,255,255,.14)}
.icon-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
.nav-toggle{display:none}

/* ---------- Mobiel menu ---------- */
.mobile-menu{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none}
.mobile-menu__scrim{position:absolute;inset:0;background:rgba(30,32,28,.5);opacity:0;
     transition:opacity var(--duration-base) var(--ease-standard)}
.mobile-menu__panel{position:absolute;inset:0 0 0 auto;width:min(86vw,380px);background:var(--surface-page);
     padding:var(--space-6) var(--space-6) var(--space-8);display:flex;flex-direction:column;
     transform:translateX(100%);transition:transform var(--duration-slow) var(--ease-standard);overflow-y:auto}
.mobile-menu.is-open{visibility:visible;pointer-events:auto}
.mobile-menu.is-open .mobile-menu__scrim{opacity:1}
.mobile-menu.is-open .mobile-menu__panel{transform:none}
.mobile-menu__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-8)}
.mobile-menu__top img{height:26px;width:auto}
.mobile-menu__close{width:38px;height:38px;border-radius:var(--radius-pill);border:1px solid var(--border-subtle);
     background:none;color:var(--text-secondary);display:grid;place-items:center;cursor:pointer}
.mobile-menu__close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.mobile-menu nav{display:grid;gap:2px}
.mobile-menu nav a{font:450 24px/1.2 var(--font-sans);letter-spacing:var(--ls-h4);color:var(--kanso-ink);
     padding:var(--space-4) 0;border-bottom:1px solid var(--border-faint)}
.mobile-menu__foot{margin-top:auto;padding-top:var(--space-8);display:grid;gap:var(--space-4)}
.mobile-menu__foot .btn{justify-content:center}
.mobile-menu__contact{font:var(--type-body-sm);color:var(--text-body)}
body.is-locked{overflow:hidden}

/* Scrolled state */
.site-header.is-stuck{background:var(--surface-topbar);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
     box-shadow:0 1px 0 var(--border-subtle)}
.site-header.is-stuck .site-nav a{color:var(--text-secondary)}
.site-header.is-stuck .icon-btn{color:var(--text-secondary);border-color:var(--border-subtle)}
.site-header.is-stuck .icon-btn:hover{background:rgba(47,50,46,.06)}
.site-header.is-stuck .logo--light{display:none}
.site-header.is-stuck .logo--dark{display:block}

/* ---------- Hero (video) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--kanso-forest-night)}
.hero__media{position:absolute;inset:0}
.hero__media img,.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* De video ligt over de poster en komt pas in beeld als hij kan spelen. */
.hero__media video{opacity:0;transition:opacity 800ms var(--ease-standard)}
.hero__media video.is-playing{opacity:1}
/* Twee lagen: een lichte sluier over het geheel voor de bovenkant, en een
   stevige verloop-voet onder de tekst. Zo blijft de kop leesbaar, ook als
   het beeld daar licht is (lucht, gras) in plaats van donker. */
.hero__scrim{position:absolute;inset:0;
     background:
       linear-gradient(180deg,rgba(24,26,22,.44) 0%,rgba(24,26,22,.10) 30%,rgba(24,26,22,.10) 42%,
                       rgba(24,26,22,.58) 68%,rgba(24,26,22,.86) 100%),
       linear-gradient(75deg,rgba(24,26,22,.42) 0%,rgba(24,26,22,.10) 55%,transparent 80%)}
.hero__inner{position:relative;width:100%;max-width:var(--content-max-width);margin:0 auto;
     padding:0 var(--space-6) clamp(72px,11vh,120px)}
.hero__eyebrow{color:rgba(243,239,231,.9);margin-bottom:var(--space-5);
     text-shadow:0 1px 14px rgba(18,20,16,.5)}
.hero h1{font:var(--type-display-1);letter-spacing:var(--ls-display);color:var(--kanso-sugar-swizzle);
     max-width:14ch;margin-bottom:var(--space-5);text-wrap:balance;
     text-shadow:0 2px 28px rgba(18,20,16,.55)}
.hero__sub{font:var(--type-body-lg);color:rgba(243,239,231,.94);max-width:46ch;margin-bottom:var(--space-7);
     text-shadow:0 1px 18px rgba(18,20,16,.5)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3)}
/* Scroll-cue: geen woord, alleen een lijn die rustig naar beneden loopt */
.hero__scroll{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);
     width:1px;height:56px;overflow:hidden;background:rgba(243,239,231,.22)}
.hero__scroll::after{content:"";position:absolute;inset:0;
     background:linear-gradient(transparent,rgba(243,239,231,.9));
     animation:scrollCue 2.6s var(--ease-standard) infinite}
@keyframes scrollCue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.hero__scroll::after{animation:none;opacity:.5}}

/* ---------- Intro / philosophy ---------- */
/* ---------- Intro / oprichters ---------- */
.intro{padding:var(--section-y-lg) 0 var(--section-y)}
.intro__grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,640px);
     gap:clamp(36px,4.6vw,64px);align-items:center;justify-content:center}
.intro blockquote{font:italic 400 clamp(21px,2.1vw,25px)/1.34 var(--font-serif);letter-spacing:.005em;
     color:var(--kanso-ink);margin:var(--space-4) 0 var(--space-5);text-wrap:balance;max-width:26ch}
.intro p+p{margin-top:var(--space-5)}
.intro p{color:var(--text-body)}

.founders__photo{margin:0;position:relative;border-radius:var(--radius-xl);overflow:hidden;background:var(--kanso-sand);
     box-shadow:var(--shadow-md);aspect-ratio:4/5}
.founders__photo img{width:100%;height:100%;object-fit:cover}
.founders__sign{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--border-subtle);
     display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap}
.founders__who{display:grid;gap:4px}
.founders__name{font:500 var(--fs-400)/1.3 var(--font-sans);letter-spacing:var(--ls-h4);color:var(--kanso-ink)}
.founders__role{font:var(--type-eyebrow);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-eyebrow)}

/* ---------- Gründe ---------- */
/* ---------- Gründe: compacte vertrouwensband, geen volle sectie ---------- */
.reasons{padding:0 0 var(--section-y)}
.reasons__band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border-faint);
     border:1px solid var(--border-faint);border-radius:var(--radius-lg);overflow:hidden}
.section-head{text-align:center;max-width:var(--content-max-width-narrow);margin:0 auto var(--head-gap)}
.section-head .eyebrow{display:block;margin-bottom:var(--space-4)}
.section-head h2{font:var(--type-heading-2);letter-spacing:var(--ls-h2);color:var(--kanso-ink);text-wrap:balance}
.section-head p{margin-top:var(--space-4);color:var(--text-body);font:var(--type-body-lg)}
.reason{background:var(--surface-card);padding:var(--space-6) var(--space-5)}
.reason img{width:24px;height:24px;opacity:.7;margin-bottom:var(--space-4)}
.reason h3{font:500 var(--fs-400)/1.3 var(--font-sans);letter-spacing:var(--ls-h4);color:var(--kanso-411c);margin-bottom:6px}
.reason p{font:var(--type-body-sm);color:var(--text-body)}

/* ---------- Kollektionen ---------- */
/* ---------- Kollektionen: Koala is de held, Vesper de aspiratie ---------- */
.collections{padding:var(--section-y) 0}

/* Hoofdkaart — Koala */
.coll-hero{display:grid;grid-template-columns:1.08fr 1fr;background:var(--surface-card);
     border:1px solid var(--border-faint);border-radius:var(--radius-xl);overflow:hidden;
     box-shadow:var(--shadow-md);margin-bottom:var(--space-5)}
.coll-hero__media{position:relative;display:block;min-height:440px;background:var(--kanso-sand);overflow:hidden}
.coll-hero__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-standard)}
.coll-hero:hover .coll-hero__media img{transform:scale(1.02)}
.flag{position:absolute;top:var(--space-5);left:var(--space-5);z-index:2;
     font:var(--type-eyebrow);letter-spacing:var(--ls-wider);text-transform:uppercase;
     background:var(--accent-primary);color:#fff;padding:9px 16px;border-radius:var(--radius-pill)}
.coll-hero__body{padding:var(--space-8) var(--space-8);display:flex;flex-direction:column;justify-content:center}
.coll-hero__body h3{font:var(--type-heading-2);letter-spacing:var(--ls-h2);color:var(--kanso-ink);margin-bottom:var(--space-4)}
.coll-hero__lead{font:var(--type-body-lg);color:var(--text-body);margin-bottom:var(--space-6)}
.coll-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:var(--space-6);
     padding-bottom:var(--space-6);border-bottom:1px solid var(--border-subtle)}
.coll-price strong{font:450 34px/1 var(--font-sans);letter-spacing:var(--ls-h3);color:var(--kanso-ink)}
.coll-price span{font:var(--type-body-sm);color:var(--text-muted)}
.spec-list{list-style:none;margin:0 0 var(--space-7);padding:0;display:grid;gap:12px}
.spec-list li{display:flex;gap:12px;font:var(--type-body-sm);color:var(--text-secondary);align-items:flex-start}
.spec-list li::before{content:"";flex:0 0 auto;width:16px;height:16px;margin-top:2px;border-radius:50%;
     background:var(--kanso-seagrass);
     -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.3l3 3 6-6.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat,
     linear-gradient(#000,#000);
     -webkit-mask-composite:xor;mask-composite:exclude;
     mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.3l3 3 6-6.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat,
     linear-gradient(#000,#000);mask-composite:exclude}
.coll-hero__cta{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}

/* Secundaire kaart — Vesper */
.coll-alt{display:grid;grid-template-columns:.62fr 1fr;align-items:stretch;
     border:1px solid var(--border-faint);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-veil);
     transition:box-shadow var(--duration-base) var(--ease-standard)}
.coll-alt:hover{box-shadow:var(--shadow-sm)}
.coll-alt__media{display:block;min-height:230px;background:var(--kanso-sand);overflow:hidden}
.coll-alt__media img{transition:transform var(--duration-slow) var(--ease-standard)}
.coll-alt:hover .coll-alt__media img{transform:scale(1.02)}
.coll-alt__media img{width:100%;height:100%;object-fit:cover}
.coll-alt__body{padding:var(--space-7);display:flex;flex-direction:column;justify-content:center}
.coll-alt__body h3{font:var(--type-heading-3);letter-spacing:var(--ls-h3);color:var(--kanso-411c);margin-bottom:10px}
.coll-alt__body p{font:var(--type-body-sm);color:var(--text-body);margin-bottom:var(--space-5);max-width:52ch}
.price-note{display:inline-block;font:var(--type-eyebrow);letter-spacing:var(--ls-wider);text-transform:uppercase;
     color:var(--text-secondary);background:var(--surface-sand);padding:7px 14px;border-radius:var(--radius-pill);margin-bottom:var(--space-4);align-self:flex-start}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font:var(--type-button);color:var(--text-link);
     border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color var(--duration-base)}
.link-arrow:hover{border-color:currentColor}

/* ---------- Steps ---------- */
/* ---------- Steps (journey) ---------- */
.steps{padding:var(--section-y) 0}
.steps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);
     position:relative;padding-top:calc(var(--space-6) + 21px)}
/* Doorlopende hairline waar de nummers op zitten */
.steps__grid::before{content:"";position:absolute;top:21px;left:0;right:0;height:1px;
     background:var(--border-subtle)}
.step{position:relative;display:flex;flex-direction:column}
.step__n{position:absolute;top:calc(-1 * var(--space-6) - 21px);left:0;
     display:inline-flex;align-items:baseline;gap:8px;
     background:var(--surface-page);padding-right:16px;transform:translateY(-3px)}
.step__n b{font:italic 400 34px/1 var(--font-serif);font-weight:400;color:var(--kanso-simply-taupe)}
.step__n em{font:var(--type-eyebrow);letter-spacing:var(--ls-wider);text-transform:uppercase;
     font-style:normal;color:var(--text-eyebrow)}
.step__media{aspect-ratio:5/4;border-radius:var(--radius-md);overflow:hidden;background:var(--kanso-sand);margin-bottom:var(--space-5)}
.step__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-standard)}
.step:hover .step__media img{transform:scale(1.03)}
.step h3{font:var(--type-heading-3);letter-spacing:var(--ls-h3);color:var(--kanso-ink);margin-bottom:10px}
.step p{font:var(--type-body-sm);color:var(--text-body);max-width:34ch;margin-bottom:var(--space-5)}
.step__meta{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--border-faint);
     font:var(--type-caption);color:var(--text-muted);display:flex;align-items:center;gap:8px}
.step__meta::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--kanso-seagrass);flex:0 0 auto}
.steps__foot{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border-subtle);
     display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap}
.steps__foot p{font:var(--type-body-lg);color:var(--text-secondary);max-width:52ch}

/* ---------- Kategorien ---------- */
.categories{padding:var(--section-y) 0}
.categories__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.cat-card{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-faint);background:var(--surface-veil);
     transition:transform var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard)}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.cat-card__media{aspect-ratio:3/2;overflow:hidden;background:var(--kanso-sand)}
.cat-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-standard)}
.cat-card:hover .cat-card__media img{transform:scale(1.03)}
.cat-card__body{padding:var(--space-5) var(--space-5) var(--space-6)}
.cat-card__body h3{font:var(--type-heading-4);letter-spacing:var(--ls-h4);color:var(--kanso-411c);margin-bottom:6px}
.cat-card__body p{font:var(--type-body-sm);color:var(--text-body);margin-bottom:var(--space-4)}

/* ---------- CTA panel ---------- */
.cta-panel{margin:var(--section-y-lg) 0}
.cta-panel__inner{position:relative;border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-dark);
     min-height:460px;display:flex;align-items:center}
.cta-panel__bg{position:absolute;inset:0}
.cta-panel__bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.cta-panel__bg::after{content:"";position:absolute;inset:0;
     background:linear-gradient(90deg,rgba(45,48,42,.88) 0%,rgba(45,48,42,.55) 55%,rgba(45,48,42,.25) 100%)}
.cta-panel__content{position:relative;padding:var(--space-10) var(--space-9);max-width:640px}
.cta-panel h2{font:var(--type-heading-1);letter-spacing:var(--ls-h1);color:var(--text-on-dark);margin-bottom:var(--space-4);text-wrap:balance}
.cta-panel p{font:var(--type-body-lg);color:var(--text-on-dark-soft);margin-bottom:var(--space-7);max-width:46ch}

/* ---------- Showroom strip ---------- */
.showroom{padding:var(--section-y) 0}
.showroom__inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:center;
     background:var(--surface-card);border:1px solid var(--border-faint);border-radius:var(--radius-xl);
     padding:var(--space-9);box-shadow:var(--shadow-sm)}
.showroom h2{font:var(--type-heading-2);letter-spacing:var(--ls-h2);color:var(--kanso-ink);margin:var(--space-4) 0}
.showroom p{color:var(--text-body);margin-bottom:var(--space-6)}
.showroom__facts{display:grid;gap:var(--space-4)}
.fact{display:flex;gap:var(--space-4);align-items:flex-start;padding-bottom:var(--space-4);border-bottom:1px solid var(--border-subtle)}
.fact:last-child{border-bottom:0;padding-bottom:0}
.fact__label{font:var(--type-eyebrow);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);min-width:110px;padding-top:3px}
.fact__value{font:var(--type-body);color:var(--text-secondary)}

/* ---------- FAQ ---------- */
.faq{padding:var(--section-y) 0}
.faq__list{max-width:900px;margin:0 auto;border-top:1px solid var(--border-subtle)}
.faq__item{border-bottom:1px solid var(--border-subtle)}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);
     background:none;border:0;cursor:pointer;text-align:left;padding:var(--space-5) 2px;
     font:500 17px/1.4 var(--font-sans);letter-spacing:-.01em;color:var(--kanso-411c)}
.faq__q:hover{color:var(--kanso-ink)}
.faq__icon{flex:0 0 auto;width:20px;height:20px;position:relative;transition:transform var(--duration-base) var(--ease-standard)}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--kanso-simply-taupe);border-radius:2px}
.faq__icon::before{inset:9px 0 auto 0;height:1.5px}
.faq__icon::after{inset:0 9px auto 9px;height:100%;width:1.5px;transition:opacity var(--duration-base)}
.faq__item.is-open .faq__icon::after{opacity:0}
.faq__a{overflow:hidden;max-height:0;transition:max-height var(--duration-slow) var(--ease-standard)}
.faq__a p{color:var(--text-body);max-width:70ch;padding:0 2px var(--space-6)}

/* ---------- Newsletter ---------- */
.newsletter{padding:var(--section-y) 0 var(--section-y-lg)}
.newsletter__inner{background:var(--surface-sand);border-radius:var(--radius-xl);padding:var(--space-9);
     display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:center}
.newsletter h2{font:var(--type-heading-3);letter-spacing:var(--ls-h3);color:var(--kanso-ink);margin-bottom:10px}
.newsletter p{font:var(--type-body-sm);color:var(--text-body)}
.newsletter form{display:flex;gap:var(--space-3);flex-wrap:wrap}
.newsletter input[type=email]{flex:1 1 240px;font:var(--type-body);padding:14px 18px;border-radius:var(--radius-pill);
     border:1px solid rgba(47,50,46,.16);background:rgba(255,255,255,.7);color:var(--text-primary);outline:none}
.newsletter input[type=email]:focus{border-color:var(--kanso-simply-taupe);background:#fff}
.newsletter .consent{display:flex;gap:10px;align-items:flex-start;margin-top:var(--space-4);font:var(--type-caption);color:var(--text-soft)}

/* ---------- Footer ---------- */
.site-footer{background:var(--surface-dark);color:var(--text-on-dark);padding:var(--section-y-lg) 0 var(--space-6)}
.site-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-8)}
.site-footer img.f-logo{height:34px;width:auto;margin-bottom:var(--space-5)}
.site-footer p,.site-footer li{font:var(--type-body-sm);color:var(--text-on-dark-soft)}
.site-footer h4{font:var(--type-eyebrow);letter-spacing:var(--ls-wider);text-transform:uppercase;
     color:var(--text-on-dark);margin-bottom:var(--space-5)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.site-footer a:hover{color:var(--text-on-dark)}
.site-footer__bottom{margin-top:var(--space-9);padding-top:var(--space-5);border-top:1px solid var(--border-on-dark);
     display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);
     font:var(--type-caption);color:var(--text-on-dark-soft)}

/* ============================================================
   v2 — nieuwe secties
   ============================================================ */

/* ---------- Sortiment: direct wat we verkopen ---------- */
.catgrid{padding:var(--section-y) 0 0}
.catgrid__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.cat-tile{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/4;
     background:var(--kanso-sand);display:block;
     transition:transform var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard)}
.cat-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.cat-tile img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-standard)}
.cat-tile img.pos-right{object-position:78% center}
.cat-tile:hover img{transform:scale(1.05)}
.cat-tile::after{content:"";position:absolute;inset:0;
     background:linear-gradient(180deg,transparent 45%,rgba(30,32,28,.72))}
.cat-tile span{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;
     font:500 var(--fs-400)/1.25 var(--font-sans);letter-spacing:var(--ls-h4);color:#fff}
.cat-tile--more{display:flex;align-items:center;justify-content:center;text-align:center;
     background:var(--surface-card);border:1px solid var(--border-subtle)}
.cat-tile--more::after{display:none}
.cat-tile--more span{position:static;color:var(--text-secondary);padding:0 18px}
.cat-tile--more:hover{background:var(--surface-veil)}

/* ---------- Inspiratie: horizontale strook ---------- */
.inspo{padding:var(--section-y) 0}
.inspo__head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-5);
     margin-bottom:var(--head-gap);flex-wrap:wrap}
.inspo__head h2{font:var(--type-heading-2);letter-spacing:var(--ls-h2);color:var(--kanso-ink)}
.inspo__head .eyebrow{display:block;margin-bottom:var(--space-3)}
.inspo__rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,32%);gap:var(--space-4);
     overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--space-4);
     scrollbar-width:thin;scrollbar-color:var(--kanso-simply-taupe) transparent}
.inspo__rail::-webkit-scrollbar{height:5px}
.inspo__rail::-webkit-scrollbar-thumb{background:var(--kanso-simply-taupe);border-radius:99px}
.inspo__item{scroll-snap-align:start;border-radius:var(--radius-lg);overflow:hidden;
     aspect-ratio:4/3;background:var(--kanso-sand)}
.inspo__item img{width:100%;height:100%;object-fit:cover;
     transition:transform var(--duration-slow) var(--ease-standard)}
.inspo__item:hover img{transform:scale(1.04)}

/* ---------- Onze belofte: zes ---------- */
.promise{padding:var(--section-y) 0}
.promise__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border-faint);
     border:1px solid var(--border-faint);border-radius:var(--radius-lg);overflow:hidden}
.promise__item{background:var(--surface-card);padding:var(--space-6) var(--space-5)}
.promise__item h3{font:500 var(--fs-400)/1.3 var(--font-sans);letter-spacing:var(--ls-h4);
     color:var(--kanso-411c);margin-bottom:6px}
.promise__item p{font:var(--type-body-sm);color:var(--text-body)}
.promise__mark{width:20px;height:20px;margin-bottom:var(--space-4);border-radius:50%;
     background:var(--kanso-seagrass);
     -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.3l3 3 6-6.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat,
     linear-gradient(#000,#000);
     -webkit-mask-composite:xor;mask-composite:exclude;
     mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.3l3 3 6-6.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat,
     linear-gradient(#000,#000);mask-composite:exclude}

/* ---------- Reviews ---------- */
.reviews{padding:var(--section-y) 0}
.reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);max-width:1100px;margin:0 auto}
.review{background:var(--surface-card);border:1px solid var(--border-faint);border-radius:var(--radius-lg);
     padding:var(--space-6);display:flex;flex-direction:column}
.review__stars{color:var(--kanso-mocha-mousse);letter-spacing:.14em;font-size:15px;margin-bottom:var(--space-4)}
.review__text{font:400 var(--fs-500)/1.55 var(--font-sans);color:var(--text-secondary);margin-bottom:var(--space-5)}
.review__who{margin-top:auto;font:var(--type-body-sm);color:var(--text-muted)}
.review__who b{display:block;color:var(--kanso-ink);font-weight:500;margin-bottom:2px}
.reviews__partner{max-width:1100px;margin:0 auto}
/* Initialen als avatar — geen externe Google-afbeeldingen, dus geen
   verzoek van de bezoeker naar Google en niets dat kan verlopen. */
.review{position:relative}
.review__avatar{position:absolute;top:var(--space-6);right:var(--space-6);
     width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
     background:var(--surface-sand);color:var(--kanso-411c);
     font:600 14px/1 var(--font-sans);letter-spacing:.04em}
.review__stars{padding-right:56px}
/* Rezensionen van de twee merken achter KANSŌ. Iets rustiger dan de
   eigen reviews, zodat het verschil zichtbaar blijft. */
.reviews__partner > h3{font:var(--type-heading-3);letter-spacing:var(--ls-h3);color:var(--kanso-ink);margin-bottom:var(--space-3)}
.reviews__partner > p{font:var(--type-body-sm);color:var(--text-muted);margin-bottom:var(--space-5);max-width:68ch}
.reviews__partner > p a{color:var(--kanso-mocha-mousse);text-decoration:underline;
     text-underline-offset:3px;text-decoration-thickness:1px}
.reviews__partner > p b{font-weight:500;color:var(--kanso-ink)}
.reviews__partner-grid{display:grid;grid-template-columns:repeat(3,1fr);
     gap:var(--space-6);align-items:start}
/* Geen kaders hier: dit zijn citaten van de merken, geen eigen reviews. */
.review--partner{background:none;border:0;border-radius:0;padding:0}
.review--partner .review__stars{padding-right:0;font-size:13px;margin-bottom:var(--space-3)}
.review--partner .review__text{font-size:var(--fs-400);line-height:1.6;margin-bottom:var(--space-2)}
.review__more{align-self:flex-start;text-align:left;margin-bottom:var(--space-4);padding:0;background:none;border:0;
     font:var(--type-caption);color:var(--kanso-mocha-mousse);cursor:pointer;
     text-decoration:underline;text-underline-offset:3px}
.review__more:hover{color:var(--kanso-ink)}

/* Google-score onder de reviews */
.reviews__score{max-width:1100px;margin:var(--space-6) auto 0;display:flex;align-items:baseline;
     gap:var(--space-4);flex-wrap:wrap;padding-bottom:var(--space-7);
     border-bottom:1px solid var(--border-subtle)}
.reviews__score strong{font:450 34px/1 var(--font-sans);letter-spacing:var(--ls-h3);color:var(--kanso-ink)}
.reviews__score span{font:var(--type-body-sm);color:var(--text-muted)}
.reviews__score .link-arrow{margin-left:auto}
.reviews__partner{margin-top:var(--space-7)}

/* ---------- Wij helpen je op weg ---------- */
.help{padding:var(--section-y) 0}
.help__inner{background:var(--surface-dark);border-radius:var(--radius-xl);padding:var(--space-9) var(--space-8)}
.help__head{text-align:center;max-width:600px;margin:0 auto var(--space-8)}
.help__head .eyebrow{display:block;margin-bottom:var(--space-4);color:var(--kanso-sand)}
.help__head h2{font:var(--type-heading-2);letter-spacing:var(--ls-h2);color:var(--text-on-dark);margin-bottom:var(--space-4)}
.help__head p{font:var(--type-body-lg);color:var(--text-on-dark-soft)}
.help__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.help-card{background:rgba(243,239,231,.07);border:1px solid var(--border-on-dark);
     border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;
     transition:background var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}
.help-card:hover{background:rgba(243,239,231,.12);transform:translateY(-3px)}
.help-card__beeld{aspect-ratio:4/3;overflow:hidden;background:rgba(243,239,231,.06)}
.help-card__beeld img{width:100%;height:100%;object-fit:cover;display:block;
     transition:transform 700ms var(--ease-standard)}
.help-card:hover .help-card__beeld img{transform:scale(1.05)}
.help-card__body{display:flex;flex-direction:column;flex:1;padding:var(--space-5)}
/* De pijl-link rekt zich over de hele kaart uit: foto, titel en tekst
   zijn daarmee één klikdoel, zonder een tweede link in de HTML. */
.help-card{position:relative}
.help-card .link-arrow::after{content:"";position:absolute;inset:0;z-index:1}
.help-card:focus-within{outline:2px solid var(--kanso-sand);outline-offset:3px}
.help-card__tag{font:var(--type-eyebrow);letter-spacing:var(--ls-wider);text-transform:uppercase;
     color:var(--kanso-sand);margin-bottom:var(--space-4)}
.help-card h3{font:var(--type-heading-4);letter-spacing:var(--ls-h4);color:var(--text-on-dark);margin-bottom:10px}
.help-card p{font:var(--type-body-sm);color:var(--text-on-dark-soft);margin-bottom:var(--space-5)}
.help-card .link-arrow{margin-top:auto;color:var(--kanso-sand)}
.help-card .link-arrow:hover{border-color:var(--kanso-sand)}

/* ---------- Showroom: foto erbij ---------- */
.showroom__media{display:block;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;
     background:var(--kanso-sand)}
.showroom__media img{transition:transform var(--duration-slow) var(--ease-standard)}
.showroom__media:hover img{transform:scale(1.03)}
.showroom__media img{width:100%;height:100%;object-fit:cover}
.showroom__hosts{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-6);
     padding-top:var(--space-5);border-top:1px solid var(--border-subtle)}
.showroom__hosts img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.showroom__hosts div{font:var(--type-body-sm);color:var(--text-body)}
.showroom__hosts b{display:block;color:var(--kanso-ink);font-weight:500}

/* ---------- Stap 1 met gezicht ---------- */
.step__face{display:flex;align-items:center;gap:10px;margin-top:var(--space-4);
     font:var(--type-caption);color:var(--text-muted)}
.step__face img{width:34px;height:34px;border-radius:50%;object-fit:cover}

/* Stappen zijn nu vier in plaats van drie */
.steps__grid{grid-template-columns:repeat(4,1fr)}
.step h3{font:var(--type-heading-4);letter-spacing:var(--ls-h4)}

/* ---------- v2 responsive ---------- */
@media (max-width:1024px){
  .steps__grid{grid-template-columns:repeat(2,1fr);row-gap:var(--space-8)}
  .catgrid__grid{grid-template-columns:repeat(2,1fr)}
  .promise__grid{grid-template-columns:repeat(2,1fr)}
  .help__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .catgrid__grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
  .promise__grid,.help__grid,.reviews__grid,.reviews__partner-grid{grid-template-columns:1fr}
  .help__inner{padding:var(--space-7) var(--space-5)}
  .inspo__rail{grid-auto-columns:78%}
  }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  :root{--fs-1100:52px;--fs-900:44px;--fs-800:34px;--fs-700:25px}
  .intro__grid,.showroom__inner,.newsletter__inner{grid-template-columns:1fr;gap:var(--space-7)}
  .founders__photo{max-width:300px;aspect-ratio:1/1}
  .reasons__band{grid-template-columns:repeat(2,1fr)}
  .site-footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--fs-1100:40px;--fs-900:34px;--fs-800:28px;--fs-700:22px;--fs-600:19px}
  .wrap,.site-header__inner,.hero__inner{padding-left:var(--space-5);padding-right:var(--space-5)}
  .site-nav{display:none}
  .nav-toggle{display:inline-grid}
  .steps__grid,.categories__grid{grid-template-columns:1fr}
  .coll-hero,.coll-alt{grid-template-columns:1fr}
  .coll-hero__media{min-height:0;aspect-ratio:4/3}
  .coll-hero__body{padding:var(--space-6)}
  .coll-alt__media{min-height:0;aspect-ratio:16/9}
  .coll-alt__body{padding:var(--space-6)}
  .coll-hero__cta{flex-direction:column;align-items:stretch}
  .coll-hero__cta .btn{justify-content:center}
  .reasons__band{grid-template-columns:1fr}
  /* Journey wordt verticaal op mobiel: lijn links, nummers erop */
  .steps__grid{padding-top:0;padding-left:var(--space-7);gap:var(--space-8)}
  .steps__grid::before{top:12px;bottom:12px;left:11px;right:auto;width:1px;height:auto}
  .step__n{position:static;background:transparent;padding:0 0 var(--space-3);transform:none;margin-left:-52px}
  .step__n b{background:var(--surface-page);padding:0 10px 0 6px}
  .steps__foot{flex-direction:column;align-items:flex-start}
  .cta-panel__content{padding:var(--space-8) var(--space-6)}
  .cta-panel__bg::after{background:linear-gradient(180deg,rgba(45,48,42,.55),rgba(45,48,42,.9))}
  .showroom__inner,.newsletter__inner{padding:var(--space-6)}
  .site-footer__grid{grid-template-columns:1fr}
  .hero{min-height:88svh}
  /* Op een telefoon staat de tekst dichter op het beeld: voet wat zwaarder. */
  .hero__scrim{background:
       linear-gradient(180deg,rgba(24,26,22,.40) 0%,rgba(24,26,22,.14) 26%,
                       rgba(24,26,22,.62) 58%,rgba(24,26,22,.90) 100%)}
  .hero__inner{padding-bottom:clamp(64px,9vh,88px)}
  .hero__eyebrow{margin-bottom:var(--space-4)}
  .hero h1{margin-bottom:var(--space-4)}
  .hero__sub{font:var(--type-body);margin-bottom:var(--space-6)}
}
/* ============================================================
   KANSŌ — pagina "Über uns"
   Bouwt voort op kanso-home.css: tokens, .wrap, .section-head,
   .btn, .link-arrow, .reveal en de showroom-sectie komen daar
   vandaan. Hieronder alleen wat nieuw is voor deze pagina.
   ============================================================ */

/* ---------- Pagina-hero ----------
   Lager dan de hero op de homepage: dit is een introductie,
   geen etalage. Vaste hoogte-verhouding zodat de tekst nooit
   over het beeld heen schuift op smalle schermen. */
.phero{position:relative;display:flex;align-items:flex-end;
     min-height:clamp(360px,52vh,560px);padding:var(--space-10) 0 var(--space-9);
     overflow:hidden;background:var(--kanso-forest-night)}
.phero__media{position:absolute;inset:0}
.phero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero__scrim{position:absolute;inset:0;
     background:
       linear-gradient(180deg,rgba(24,26,22,.30) 0%,rgba(24,26,22,.12) 30%,
                       rgba(24,26,22,.44) 82%,rgba(24,26,22,.66) 100%),
       linear-gradient(80deg,rgba(24,26,22,.62) 0%,rgba(24,26,22,.16) 52%,transparent 76%)}
.phero__inner{position:relative;width:100%;max-width:var(--content-max-width);color:#fff}
.phero__eyebrow{display:block;color:rgba(255,255,255,.78);margin-bottom:var(--space-4)}
.phero h1{font:var(--type-heading-1);letter-spacing:var(--ls-h1);color:#fff;
     max-width:16ch;text-wrap:balance;text-shadow:0 2px 24px rgba(18,20,16,.5)}
.phero__lead{margin-top:var(--space-5);max-width:62ch;color:rgba(255,255,255,.92);
     font:var(--type-body-lg);text-shadow:0 1px 16px rgba(18,20,16,.45)}
.phero__cta{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-7)}

/* ---------- Beeld naast tekst ---------- */
.ueber-split{padding:var(--section-y-lg) 0 var(--section-y)}
.ueber-split__inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:center;
     max-width:1100px;margin:0 auto}
.ueber-split__media{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;
     box-shadow:var(--shadow-md)}
.ueber-split__media img{width:100%;height:100%;object-fit:cover}
.ueber-split__body h2{font:var(--type-heading-2);letter-spacing:var(--ls-h2);color:var(--kanso-ink);
     margin:var(--space-4) 0 var(--space-5);text-wrap:balance}
.ueber-split__body .lead{font:var(--type-body-lg);color:var(--text-secondary);margin-bottom:var(--space-4)}
.ueber-split__body p{color:var(--text-body)}

/* Het Japandi-stuk als citaat: zelfde woorden, meer lucht. */
.ueber-quote{margin-top:var(--space-6);padding-left:var(--space-5);
     border-left:2px solid var(--kanso-sand);
     font:italic 400 var(--fs-500)/1.5 var(--font-serif);color:var(--kanso-411c)}

/* ---------- Vier pijlers ---------- */
.ueber-vier{padding:var(--section-y) 0;background:var(--kanso-surface)}
.ueber-vier .section-head h2{max-width:22ch;margin:0 auto}
.ueber-vier__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);
     max-width:1100px;margin:0 auto}
.ueber-kaart{padding:var(--space-6);border-radius:var(--radius-md);background:var(--surface-page);
     border:1px solid var(--border-faint)}
.ueber-kaart h3{font:500 var(--fs-500)/1.3 var(--font-sans);letter-spacing:var(--ls-h4);
     color:var(--kanso-ink);margin:var(--space-4) 0 8px}
.ueber-kaart p{font:var(--type-body-sm);line-height:1.6;color:var(--text-body)}
.ico{width:26px;height:26px;color:var(--kanso-mocha-mousse);display:block}
.ueber-vier__slot{max-width:64ch;margin:var(--space-7) auto 0;text-align:center;
     color:var(--text-body);font:var(--type-body-lg)}

/* ---------- Systemwelten ---------- */
.ueber-welten{padding:var(--section-y) 0}
.ueber-welten__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);
     max-width:1200px;margin:0 auto}
.welt-card{display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;
     background:var(--surface-card);border:1px solid var(--border-faint);
     transition:transform var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard)}
.welt-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.welt-card__media{aspect-ratio:4/3;overflow:hidden}
.welt-card__media img{width:100%;height:100%;object-fit:cover;
     transition:transform var(--duration-slow) var(--ease-standard)}
.welt-card:hover .welt-card__media img{transform:scale(1.04)}
.welt-card__body{display:flex;flex-direction:column;flex:1;padding:var(--space-5)}
.welt-card__body h3{font:var(--type-heading-4);letter-spacing:var(--ls-h4);color:var(--kanso-ink);
     margin-bottom:10px}
.welt-card__body p{font:var(--type-body-sm);line-height:1.6;color:var(--text-body);
     margin-bottom:var(--space-5)}
.welt-card__body .link-arrow{margin-top:auto;align-self:flex-start}

/* ---------- Herkunft ---------- */
.ueber-herkunft{padding:var(--section-y) 0}
.ueber-herkunft__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-9);
     align-items:center;max-width:1100px;margin:0 auto;
     padding:var(--space-8);border-radius:var(--radius-xl);
     background:var(--surface-dark);color:var(--text-on-dark)}
.ueber-herkunft h2{font:var(--type-heading-3);letter-spacing:var(--ls-h3);color:var(--text-on-dark);
     margin:var(--space-4) 0 var(--space-5);text-wrap:balance}
.ueber-herkunft .eyebrow{color:rgba(243,239,231,.62)}
.ueber-herkunft p{color:var(--text-on-dark-soft);margin-bottom:var(--space-4)}
.ueber-herkunft p:last-child{margin-bottom:0}
.ueber-feiten{display:grid;gap:var(--space-5)}
.ueber-feiten li{display:grid;grid-template-columns:26px 1fr;column-gap:var(--space-4);row-gap:2px;
     padding-bottom:var(--space-5);border-bottom:1px solid var(--border-on-dark)}
.ueber-feiten li:last-child{border-bottom:0;padding-bottom:0}
.ueber-feiten .ico{grid-row:span 2;color:var(--kanso-sand);margin-top:2px}
.ueber-feiten b{font-weight:500;color:var(--text-on-dark)}
.ueber-feiten span{font:var(--type-body-sm);color:var(--text-on-dark-soft)}

/* ---------- Showroom-knoppen ---------- */
.showroom__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);
     margin-top:var(--space-6)}

/* ---------- Sluitzin ---------- */
.ueber-slot{padding:0 0 var(--section-y-lg)}
.ueber-slot p{max-width:56ch;margin:0 auto;text-align:center;
     font:var(--type-editorial-quote);color:var(--kanso-411c);text-wrap:balance}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .ueber-vier__grid{grid-template-columns:repeat(2,1fr)}
  .ueber-welten__grid{grid-template-columns:repeat(2,1fr)}
  .ueber-herkunft__inner{grid-template-columns:1fr;gap:var(--space-7);padding:var(--space-7)}
}
@media (max-width:760px){
  .phero{min-height:auto;padding:var(--space-9) 0 var(--space-8)}
  .phero h1{max-width:none}
  .phero__cta .btn{flex:1 1 100%;justify-content:center}
  .ueber-split__inner{grid-template-columns:1fr;gap:var(--space-6)}
  .ueber-split__media{aspect-ratio:4/3}
  .ueber-vier__grid{grid-template-columns:1fr}
  .ueber-welten__grid{grid-template-columns:1fr}
  .showroom__cta{gap:var(--space-4)}
  .showroom__cta .btn{width:100%;justify-content:center}
}

/* ============================================================
   KANSŌ — bedankpagina na het aanvraagformulier
   ============================================================ */

/* De belofte: wat gebeurt er nu, en wanneer. Meteen onder de hero. */
.danke__belofte{max-width:1000px;margin:calc(var(--space-8) * -1) auto 0;position:relative;z-index:2;
     display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;
     background:var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.danke__belofte div{background:var(--surface-card);padding:var(--space-6)}
.danke__belofte b{display:block;font:500 var(--fs-500)/1.3 var(--font-sans);
     letter-spacing:var(--ls-h4);color:var(--kanso-ink);margin-bottom:6px}
.danke__belofte span{font:var(--type-body-sm);line-height:1.6;color:var(--text-body)}
.danke__belofte .ico{margin-bottom:var(--space-4)}

/* Drie stappen, elk met een beeld en een tijdsaanduiding. */
.danke{padding:var(--section-y) 0}
.danke__stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);
     max-width:1100px;margin:0 auto}
.danke-stap__media{border-radius:var(--radius-md);overflow:hidden;aspect-ratio:4/3;
     margin-bottom:var(--space-5)}
.danke-stap__media img{width:100%;height:100%;object-fit:cover}
.danke-stap__wanneer{display:inline-block;padding:5px 12px;border-radius:var(--radius-pill);
     background:var(--kanso-sand);color:var(--kanso-411c);
     font:600 12px/1.2 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;
     margin-bottom:var(--space-4)}
.danke-stap h2{font:var(--type-heading-4);letter-spacing:var(--ls-h4);color:var(--kanso-ink);
     margin-bottom:8px}
.danke-stap p{font:var(--type-body-sm);line-height:1.65;color:var(--text-body)}

/* Het gevoel: één groot beeld met een rustige zin erover. */
.danke__gevoel{position:relative;max-width:1100px;margin:var(--space-9) auto 0;
     border-radius:var(--radius-xl);overflow:hidden;min-height:clamp(320px,42vw,460px);
     display:flex;align-items:flex-end}
.danke__gevoel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.danke__gevoel::after{content:"";position:absolute;inset:0;
     background:linear-gradient(180deg,rgba(24,26,22,.10) 0%,rgba(24,26,22,.20) 45%,rgba(24,26,22,.78) 100%)}
.danke__gevoel-tekst{position:relative;z-index:1;padding:var(--space-8);max-width:640px}
.danke__gevoel-tekst p{font:var(--type-editorial-quote);color:#fff;text-wrap:balance;
     text-shadow:0 2px 20px rgba(18,20,16,.45)}
.danke__gevoel-tekst span{display:block;margin-top:var(--space-4);
     font:var(--type-body-sm);color:rgba(255,255,255,.85)}

/* Verder kijken zolang je wacht. */
.danke__verder{max-width:1100px;margin:var(--space-9) auto 0}
.danke__verder > h2{font:var(--type-heading-3);letter-spacing:var(--ls-h3);color:var(--kanso-ink);
     text-align:center;margin-bottom:var(--space-6)}
.danke__kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.danke-kaart{display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;
     background:var(--surface-card);border:1px solid var(--border-faint);
     transition:transform var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard)}
.danke-kaart:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.danke-kaart__media{aspect-ratio:16/10;overflow:hidden}
.danke-kaart__media img{width:100%;height:100%;object-fit:cover;
     transition:transform var(--duration-slow) var(--ease-standard)}
.danke-kaart:hover .danke-kaart__media img{transform:scale(1.04)}
.danke-kaart__body{display:flex;flex-direction:column;flex:1;padding:var(--space-5)}
.danke-kaart h3{font:var(--type-heading-4);letter-spacing:var(--ls-h4);color:var(--kanso-ink);
     margin-bottom:8px}
.danke-kaart p{font:var(--type-body-sm);line-height:1.6;color:var(--text-body);
     margin-bottom:var(--space-5)}
.danke-kaart .link-arrow{margin-top:auto;align-self:flex-start}

@media (max-width:860px){
  .danke__belofte{grid-template-columns:1fr;margin-top:calc(var(--space-7) * -1)}
  .danke__stappen,.danke__kaarten{grid-template-columns:1fr}
  .danke__gevoel-tekst{padding:var(--space-6)}
}