/* =========================================================================
   Amanah — shared base
   Structure, typography and components common to both properties.
   Brand colour comes from the per-property theme file (advisors.css /
   intelligence.css). This file stays colour-neutral where possible and
   reads brand values from CSS variables the theme sets.
   ========================================================================= */

/* ---- Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl{margin:0}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
img,svg,picture{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus,currentColor);outline-offset:3px}

/* ---- Accessibility utilities ------------------------------------------ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 12px 12px;font-weight:600;transition:top .18s ease}
.skip-link:focus{top:0}

/* ---- Breadcrumbs ------------------------------------------------------- */
.crumbs{padding-top:clamp(14px,2.4vw,22px)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 .5em;font-size:var(--step--1);color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:.5em;color:var(--line-strong,currentColor);opacity:.6}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--fg)}
.crumbs [aria-current="page"]{color:var(--fg);font-weight:600}
/* Narrow screens: keep the parent and the current page, drop the middle. */
@media(max-width:560px){
  .crumbs li:not(:nth-last-child(-n+2)){display:none}
  .crumbs li:nth-last-child(2)::before{content:"…/";margin-right:.5em}
}

/* ---- Design tokens (house layer + scale) ------------------------------ */
:root{
  /* House palette (Concept 06) */
  --yellow:#F2C400; --ink:#0A0A0A; --cream:#F7F0D4; --paper:#FFFDF2; --white:#FFFFFF;

  /* Type */
  --font-display:"Schibsted Grotesk",system-ui,sans-serif;
  --font-body:"Instrument Sans",system-ui,sans-serif;
  --font-wordmark:"Space Grotesk",system-ui,sans-serif;

  /* Fluid type scale */
  --step--1:clamp(.82rem,.79rem + .12vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.12rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.4rem);
  --step-2:clamp(1.45rem,1.28rem + .9vw,1.9rem);
  --step-3:clamp(1.8rem,1.5rem + 1.5vw,2.6rem);
  --step-4:clamp(2.3rem,1.8rem + 2.6vw,3.6rem);
  --step-5:clamp(2.9rem,2.1rem + 4vw,5rem);

  /* Spacing / layout */
  --container:1180px;
  --gutter:clamp(20px,5vw,48px);
  --radius:14px; --radius-sm:8px; --radius-lg:22px;
  /* Mastercard-style shape language: oversized pill radii */
  --radius-pill:clamp(20px,2.4vw,36px); --radius-xl:clamp(28px,3.4vw,48px);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- Base typography --------------------------------------------------- */
body{
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--fg,var(--ink));
  background:var(--bg,var(--paper));
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.035em;
}
h3{font-weight:700;letter-spacing:-.02em;line-height:1.12}
h4{font-weight:700;letter-spacing:-.01em;line-height:1.2}
p{max-width:66ch}
strong{font-weight:600}

/* ---- Layout primitives ------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:1320px}
.container--narrow{max-width:760px}
.section{padding-block:clamp(56px,8vw,120px)}
.section--tight{padding-block:clamp(40px,5vw,72px)}
.stack>*+*{margin-top:1.1em}
.grid{display:grid;gap:clamp(20px,3vw,40px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
@media(min-width:901px) and (max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}}

/* ---- Eyebrow / labels -------------------------------------------------- */
.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--step--1);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted,currentColor);
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:1.6em;height:1px;background:currentColor;opacity:.5}
.eyebrow--plain::before{display:none}

.display{font-size:var(--step-5);letter-spacing:-.045em}
.h-lead{font-size:var(--step-4)}
.h-sec{font-size:var(--step-3)}
.lead{font-size:var(--step-1);line-height:1.5;color:var(--muted)}

/* ---- Buttons ----------------------------------------------------------- */
.btn{
  --_bg:var(--btn-bg,var(--ink));
  --_fg:var(--btn-fg,var(--white));
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-body);font-weight:600;font-size:var(--step-0);
  line-height:1;letter-spacing:-.01em;
  padding:.72em 1.25em;border:1px solid transparent;border-radius:999px;
  background:var(--_bg);color:var(--_fg);cursor:pointer;
  transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),opacity .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn .arw{transition:transform .2s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.btn--ghost{--_bg:transparent;--_fg:var(--fg);border-color:var(--line,rgba(0,0,0,.2))}
.btn--ghost:hover{border-color:var(--fg)}
.btn--lg{padding:.86em 1.4em;font-size:var(--step-0)}
.btn--sm{padding:.6em 1em;font-size:var(--step--1)}
/* Light + glass variants (hero over imagery) */
.btn--light{--_bg:#F7F7F7;--_fg:#0C0C0C}
.btn--light:hover{--_bg:#fff}
.btn--glass{--_bg:rgba(255,255,255,.1);--_fg:#fff;border-color:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn--glass:hover{--_bg:rgba(255,255,255,.22);border-color:#fff}
/* Soft grey fill (N26-style secondary) */
.btn--soft{--_bg:#F0EFEA;--_fg:var(--ink)}
.btn--soft:hover{--_bg:#E7E6E0}

/* ---- Site header / nav ------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg,var(--bg));border-bottom:1px solid var(--line,rgba(0,0,0,.08))}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
/* Logo lockup — wordmark is Space Grotesk 600 (per design system) */
/* Lockup proportions per design-system lock(): gap .36×size, emblem 1.04×size,
   wordmark .94×size, desc margin-left .3em. Expressed relative to wordmark. */
.brand{display:inline-flex;align-items:center;gap:.383em;font-family:var(--font-wordmark);font-weight:600;font-size:1.5rem;letter-spacing:-.02em}
.brand .emblem{height:1.06em;width:auto;flex:none;transform:translateY(.055em)}
/* Sub-brand descriptor: bound tight to "Amanah" (per design system) */
.brand .sub{font-weight:500;letter-spacing:-.02em;margin-left:-.15em;color:var(--sub-color,currentColor)}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-links a{font-weight:500;font-size:.98rem;color:var(--muted);transition:color .15s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--fg)}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle svg{width:24px;height:24px}
@media(max-width:1080px){
  .nav-links,.nav-actions .btn--ghost{display:none}
  .nav-toggle{display:inline-flex}
}

/* ---- The floating nav pill --------------------------------------------- */
/* ONE spec, both platforms. This block used to be duplicated in advisors.css
   and intelligence.css, which is how the two menus drifted apart: Intelligence
   had picked up a wider max-width, a smaller link size and a tighter gap.
   Themes may override COLOUR below this point. Nothing else. */
.site-header{background:transparent;border-bottom:0;padding-block:16px}
.site-header .nav{
  display:grid;grid-template-columns:1fr auto 1fr;column-gap:clamp(24px,3vw,48px);align-items:center;
  max-width:var(--container);
  height:auto;min-height:70px;
  padding:10px 18px 10px 28px;
  background:var(--nav-pill-bg,rgba(255,255,255,.82));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--nav-pill-line,rgba(0,0,0,.07));
  border-radius:999px;
  box-shadow:0 18px 44px -26px var(--nav-pill-shadow,rgba(10,10,10,.45));
  transition:box-shadow .28s var(--ease);
}
.site-header .brand{grid-column:1;justify-self:start;font-size:1.5rem}
.primary-nav{grid-column:2;display:flex;justify-content:center}
.primary-nav .nav-links{gap:clamp(22px,2.6vw,38px)}
.site-header .nav-links a{font-size:1.04rem;opacity:.82}
.site-header .nav-links a:hover,.site-header .nav-links a[aria-current]{opacity:1}
.site-header .nav-actions{grid-column:3;justify-self:end}
@media(max-width:1080px){
  .primary-nav{display:none}
  .site-header .nav{padding-left:22px;min-height:62px}
  .site-header .nav-actions a.btn{display:none}
  /* Solid white and locked once the menu opens */
  body.menu-open .site-header .nav{
    background-color:#fff;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:none;
  }
  /* Scrolled state, MOBILE ONLY — on desktop the pill always floats. Moved with
     a transform, not padding: changing the header's height would shift the page
     and bounce the scroll position across the threshold, flickering the bar. */
  .site-header[data-stuck] .nav{
    transform:translateY(-16px);
    max-width:none;
    background-color:#fff;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-color:transparent;
    border-radius:0 0 var(--radius-xl) var(--radius-xl);
    box-shadow:0 10px 30px -20px var(--nav-pill-shadow,rgba(10,10,10,.45));
  }
}
/* Mobile nav panel */
[data-mobile-nav]:not(.mobile-menu):not(.mm){display:none;border-top:1px solid var(--line,rgba(0,0,0,.08));background:var(--header-bg,var(--bg))}
[data-mobile-nav]:not(.mobile-menu):not(.mm)[data-open]{display:block}
[data-mobile-nav]:not(.mobile-menu):not(.mm) ul{list-style:none;margin:0;padding:16px var(--gutter) 22px;display:grid;gap:4px}
[data-mobile-nav]:not(.mobile-menu):not(.mm) a{display:block;padding:12px 4px;font-size:1.05rem;font-weight:500;border-bottom:1px solid var(--line,rgba(0,0,0,.06))}
[data-mobile-nav]:not(.mobile-menu):not(.mm) .btn{margin-top:14px}
@media(min-width:1081px){[data-mobile-nav]{display:none!important}}

/* ---- Footer ------------------------------------------------------------ */
.site-footer{background:var(--footer-bg,var(--ink));color:var(--footer-fg,rgba(255,255,255,.72));padding-block:clamp(48px,6vw,80px) 40px}
.site-footer a{color:inherit;opacity:.8}
.site-footer a:hover{opacity:1}
/* minmax(0,…) throughout: a plain 1fr floors at min-content, and the email
   address in the last column is one unbreakable word — enough to pull that
   track wide and squash the others on a narrow screen. */
.footer-top{display:grid;grid-template-columns:1.4fr minmax(0,1fr) minmax(0,1fr) 1.35fr;gap:40px}
/* `break-word`, paired with a <wbr> after the "@" in the email addresses:
   the wbr gives the line breaker a sensible place to split, and break-word
   only falls back to an arbitrary break if a segment still cannot fit. */
.footer-col ul{overflow-wrap:break-word}
/* Advisors' Services list is twice as long as its neighbours, so that footer
   gets a fifth track and runs the list in two sub-columns — all three lists
   end up a similar height instead of leaving a hole under the short one.
   Intelligence has no --wide column and keeps the plain four-track grid.
   Without :has() support this rule is skipped and the footer stays four
   even columns, which is the layout it had before. */
/* Last track runs wider so the email address sits on one line on desktop. */
.footer-top:has(.footer-col--wide){grid-template-columns:1.5fr repeat(3,minmax(0,1fr)) 1.3fr}
.footer-top:has(.footer-col--wide) .footer-col--wide{grid-column:span 2}
.footer-top:has(.footer-col--wide) .footer-col--wide ul{grid-template-columns:1fr 1fr;column-gap:24px}
/* The brand block goes full width once the columns get narrow, so the link
   lists keep two columns instead of collapsing into one very long stack. */
@media(max-width:1000px){
  .footer-top,
  .footer-top:has(.footer-col--wide){grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
  .footer-brand{grid-column:1/-1;padding-right:0}
  .footer-top:has(.footer-col--wide) .footer-col--wide{grid-column:span 2}
}
@media(max-width:620px){
  .footer-top,
  .footer-top:has(.footer-col--wide){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 20px}
  .footer-top:has(.footer-col--wide) .footer-col--wide{grid-column:1/-1}
  /* Intelligence has three link columns, so the last one lands alone on its
     row and the email breaks mid-word in half a column. Give it the row.
     Advisors' last column shares a row with Firm, so it stays put. */
  .footer-top:not(:has(.footer-col--wide)) .footer-col:last-child{grid-column:1/-1}
  .footer-col ul{font-size:.9rem}
}
.footer-col h4{font-family:var(--font-body);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--footer-head,inherit);margin-bottom:16px}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:.96rem}
.footer-brand{padding-right:clamp(20px,2.2vw,40px)}
.footer-brand p{opacity:.7;font-size:.96rem;margin-top:14px;max-width:34ch}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:.85rem;opacity:.6}
@media(max-width:620px){
  .site-footer{padding-block:clamp(40px,8vw,56px) 28px}
  .footer-bottom{margin-top:36px;gap:8px;flex-direction:column;text-align:left}
}

/* ---- Cards / shared bits ---------------------------------------------- */
.card{background:var(--card,var(--white));border:1px solid var(--line,rgba(0,0,0,.08));border-radius:var(--radius);padding:clamp(22px,3vw,34px);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.card:hover{transform:translateY(-3px)}
.tag{display:inline-block;font-size:var(--step--1);font-weight:600;letter-spacing:.02em;padding:.35em .8em;border-radius:999px;background:var(--tag-bg,rgba(0,0,0,.06));color:var(--tag-fg,inherit)}

/* Image slot */
.imgph{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--imgph-bg,linear-gradient(135deg,#e9e4d0,#cfc8ad));display:flex;align-items:flex-end}
.imgph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.imgph[data-label]::after{content:attr(data-label);position:absolute;left:14px;bottom:12px;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(0,0,0,.45);background:rgba(255,255,255,.55);padding:.35em .7em;border-radius:6px;backdrop-filter:blur(2px)}
.imgph[data-dark][data-label]::after{color:rgba(255,255,255,.7);background:rgba(0,0,0,.35)}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.btn:hover{transform:none}}

/* =========================================================================
   Mastercard-style form language (colour-neutral; themed per property)
   Shapes only: oversized pills, circle pills, staggered columns, keylines,
   rounded section boxes and a dependency-free carousel.
   ========================================================================= */

/* ---- Section intro (big uppercase pretitle + display title + CTA) ------ */
.section-intro{max-width:52ch}
.section-intro .eyebrow{margin-bottom:18px}
.section-intro h2{font-size:var(--step-4);letter-spacing:-.04em;line-height:1.05}
.section-intro p{color:var(--muted);margin-top:16px;font-size:var(--step-1);line-height:1.5;max-width:46ch}
.section-intro .btn,.section-intro .more{margin-top:26px}
.section-intro--center{margin-inline:auto;text-align:center}
.section-intro--center .eyebrow{justify-content:center}
.section-intro--center p{margin-inline:auto}

/* ---- Pill teaser cards (the signature shape) --------------------------- */
.pill-card{display:flex;flex-direction:column;color:inherit}
.pill-card .imgph{border-radius:var(--radius-xl);aspect-ratio:1/1;margin-bottom:18px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pill-card:hover .imgph{transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(10,10,10,.55)}
.pill-card .k{display:block;font-size:var(--step--1);font-weight:600;letter-spacing:.02em;color:var(--accent,var(--muted));margin-bottom:6px}
.pill-card h3{font-size:var(--step-1);letter-spacing:-.02em}
.pill-card p{color:var(--muted);font-size:var(--step--1);margin-top:8px}
.pill-card__link{margin-top:12px;font-weight:600;color:var(--accent,inherit);display:inline-flex;gap:.5em;align-items:center}
.pill-card__link .arw{transition:transform .2s var(--ease)}
.pill-card:hover .pill-card__link .arw{transform:translateX(4px)}
/* tall (9:16) and circle (1:1 masked round) variants */
.pill-card--tall .imgph{aspect-ratio:9/16;border-radius:var(--radius-pill)}
.pill-card--circle .imgph{aspect-ratio:1/1;border-radius:50%}

/* ---- Circle keyline (decorative gold ring around a circle pill) -------- */
.circle-keyline{position:relative}
.circle-keyline::before{content:"";position:absolute;z-index:0;border:1px solid var(--keyline,var(--line));border-radius:50%;width:118%;padding-bottom:118%;top:-9%;pointer-events:none}
.circle-keyline--left::before{left:-9%}
.circle-keyline--right::before{right:-9%}
.circle-keyline>*{position:relative;z-index:1}
@media(max-width:820px){.circle-keyline::before{display:none}}

/* ---- Staggered columns (alternating vertical offset) ------------------- */
.stagger-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.stagger-grid>*:nth-child(even){margin-top:clamp(40px,7vw,110px)}
@media(max-width:820px){.stagger-grid{grid-template-columns:1fr;gap:36px}.stagger-grid>*:nth-child(even){margin-top:0}}
.stagger-col{display:grid;gap:clamp(28px,4vw,56px)}

/* ---- Rounded section "box" (Mastercard white/circle box) --------------- */
.box{border-radius:var(--radius-xl);padding:clamp(28px,5vw,72px)}
.box--pad-lg{padding:clamp(40px,6vw,96px)}

/* ---- Carousel (vanilla; JS in app.js) ---------------------------------- */
.carousel{position:relative}
.carousel__viewport{overflow:hidden;border-radius:var(--radius-xl)}
.carousel__track{display:flex;transition:transform .6s var(--ease)}
.carousel__slide{flex:0 0 100%;min-width:0}
/* height:100% is wat elke foto laat passen. De slides zijn flex-items en
   krijgen allemaal de hoogte van de langste; zonder dit bleef de inhoud op zijn
   eigen hoogte staan en hield je onder een korte slide een wit vlak over, met
   het beeld dat maar een deel van de kaart vulde. Nu vult de mediakolom altijd
   de hele hoogte en snijdt object-fit:cover de foto bij, staand of liggend. */
.carousel__slide a,.carousel__slide .slide-inner{display:grid;grid-template-columns:1.15fr .85fr;min-height:clamp(280px,34vw,440px);height:100%;color:inherit}
@media(max-width:760px){.carousel__slide a,.carousel__slide .slide-inner{grid-template-columns:1fr}}
.carousel__media{position:relative;overflow:hidden}
.carousel__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.carousel__body{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(28px,4vw,56px)}
.carousel__body .k{font-size:var(--step--1);font-weight:600;letter-spacing:.02em;color:var(--accent,var(--muted))}
.carousel__body h3{font-size:var(--step-3);letter-spacing:-.03em;line-height:1.06}
.carousel__body p{color:var(--muted);max-width:40ch}
.carousel__body .more{margin-top:6px;font-weight:600;color:var(--accent,inherit);display:inline-flex;gap:.5em;align-items:center}
/* controls */
.carousel__controls{display:flex;align-items:center;gap:16px;margin-top:22px}
.carousel__dots{display:flex;gap:10px;flex:1;flex-wrap:wrap}
.carousel__dot{appearance:none;border:0;cursor:pointer;height:4px;width:38px;border-radius:999px;background:var(--line);padding:0;transition:background .25s var(--ease)}
.carousel__dot[aria-selected="true"]{background:var(--accent,var(--fg))}
.carousel__nav{display:inline-flex;gap:8px}
.carousel__btn{appearance:none;cursor:pointer;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s var(--ease),background .2s var(--ease)}
.carousel__btn:hover{border-color:var(--fg)}
.carousel__btn svg{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.carousel__track{transition:none}.pill-card .imgph{transition:none}}

/* =========================================================================
   Monzo-style component language (colour-neutral; themed per property)
   Full-bleed hero carousel · "Tell me about" product-nav · tabbed carousel
   · feature-switch crossfade · draggable flashcard deck.
   ========================================================================= */

/* ---- Full-bleed hero carousel ------------------------------------------ */
.hero-carousel{position:relative;border-radius:var(--radius-xl);overflow:hidden}
.hero-carousel .carousel__viewport{border-radius:var(--radius-xl)}
.hero-carousel .carousel__slide{position:relative;display:block}
.hero-slide{position:relative;min-height:clamp(440px,62vh,640px);display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero-slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-slide::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,10,.15) 0%,rgba(10,10,10,.35) 45%,rgba(10,10,10,.86) 100%)}
.hero-slide__body{position:relative;z-index:2;padding:clamp(28px,5vw,64px);max-width:640px}
.hero-slide__body .eyebrow{color:var(--hero-eyebrow,#fff);opacity:.85;margin-bottom:16px}
.hero-slide__body h2{font-size:var(--step-4);letter-spacing:-.04em;line-height:1.03;margin-bottom:16px}
.hero-slide__body p{color:rgba(255,255,255,.86);font-size:var(--step-1);line-height:1.45;max-width:42ch;margin-bottom:26px}
/* hero slides aren't link-grids: neutralise the generic .carousel__slide a rule */
.hero-slide a.btn{display:inline-flex;grid-template-columns:none;min-height:0}
.hero-badges{position:absolute;z-index:2;right:clamp(20px,4vw,44px);bottom:clamp(20px,4vw,44px);display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;max-width:52%}
.hero-badge{display:inline-flex;align-items:center;gap:.5em;padding:.5em .9em;border-radius:999px;font-size:var(--step--1);font-weight:600;letter-spacing:.01em;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(3px)}
.hero-badge::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--hero-badge-dot,#fff)}
@media(max-width:640px){.hero-badges{display:none}.hero-slide__body{padding-bottom:clamp(40px,10vw,56px)}}
/* place controls over the image, bottom-left */
.hero-carousel .carousel__controls{position:absolute;z-index:3;left:clamp(28px,5vw,64px);bottom:clamp(20px,4vw,40px);right:auto;margin:0;width:min(360px,60%)}
.hero-carousel .carousel__dot{background:rgba(255,255,255,.4)}
.hero-carousel .carousel__dot[aria-selected="true"]{background:#fff}
.hero-carousel .carousel__btn{border-color:rgba(255,255,255,.5);color:#fff}
.hero-carousel .carousel__btn:hover{border-color:#fff;background:rgba(255,255,255,.12)}
@media(max-width:640px){.hero-carousel .carousel__controls{position:static;width:100%;padding:16px var(--gutter);background:var(--ink)}}

/* ---- "Tell me about" product-nav (hover reveal) ------------------------ */
.prodnav{border-top:1px solid var(--line)}
.prodnav__row{position:relative;display:flex;align-items:center;gap:16px;padding:clamp(18px,2.4vw,26px) 0;border-bottom:1px solid var(--line);color:inherit;overflow:hidden}
.prodnav__chev{flex:none;width:26px;color:var(--accent,currentColor);opacity:0;transform:translateX(-16px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.prodnav__chev svg{width:26px;height:26px;display:block}
.prodnav__label{font-family:var(--font-display);font-weight:700;font-size:var(--step-2);letter-spacing:-.025em;transition:transform .25s var(--ease);flex:1;min-width:0}
.prodnav__meta{color:var(--muted);font-size:var(--step--1);margin-right:auto;padding-left:4px;display:none}
.prodnav__icon{flex:none;width:clamp(40px,5vw,58px);height:clamp(40px,5vw,58px);border-radius:50%;display:grid;place-items:center;background:var(--prodnav-icon-bg,rgba(0,0,0,.05));color:var(--accent,currentColor);opacity:0;transform:translateX(18px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.prodnav__icon svg{width:52%;height:52%}
.prodnav__row:hover,.prodnav__row:focus-visible{color:var(--fg)}
.prodnav__row:hover .prodnav__chev,.prodnav__row:focus-visible .prodnav__chev{opacity:1;transform:none}
.prodnav__row:hover .prodnav__label,.prodnav__row:focus-visible .prodnav__label{transform:translateX(6px)}
.prodnav__row:hover .prodnav__icon,.prodnav__row:focus-visible .prodnav__icon{opacity:1;transform:none}
@media(min-width:640px){.prodnav__meta{display:block;flex:0 0 auto;max-width:34ch;text-align:right}}
@media(prefers-reduced-motion:reduce){.prodnav__chev,.prodnav__label,.prodnav__icon{transition:none}.prodnav__chev,.prodnav__icon{opacity:1;transform:none}}

/* ---- Tabbed carousel (tabs + horizontal card row) ---------------------- */
.tabcx__tabs{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 clamp(24px,3vw,36px)}
.tabcx__tab{appearance:none;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:var(--step--1);padding:.5em 1.05em;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);transition:.2s var(--ease)}
.tabcx__tab[aria-selected="true"]{background:var(--tabcx-active-bg,var(--ink));color:var(--tabcx-active-fg,var(--paper));border-color:transparent}
.tabcx__panel[hidden]{display:none}
.tabcx__row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:clamp(16px,2vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-right:calc(-1*var(--gutter));padding-right:var(--gutter);scrollbar-width:thin}
@media(min-width:1000px){.tabcx__row{grid-auto-columns:1fr;overflow:visible;margin-right:0;padding-right:0}}
.tabcx__card{position:relative;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(340px,44vw,440px);border-radius:var(--radius-xl);overflow:hidden;color:#fff;isolation:isolate}
.tabcx__card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tabcx__card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,10,0) 30%,rgba(10,10,10,.82) 100%)}
.tabcx__card__body{position:relative;z-index:2;padding:clamp(20px,2.4vw,28px)}
.tabcx__card .k{display:block;font-size:var(--step--1);font-weight:600;letter-spacing:.02em;color:var(--card-k,rgba(255,255,255,.82));margin-bottom:8px}
.tabcx__card h3{font-size:var(--step-1);letter-spacing:-.02em}
.tabcx__card p{color:rgba(255,255,255,.82);font-size:var(--step--1);margin-top:8px;max-width:36ch}
.tabcx__hint{position:absolute;z-index:2;right:clamp(16px,2vw,22px);bottom:clamp(16px,2vw,22px);width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.85);display:grid;place-items:center;transition:transform .25s var(--ease),background .25s var(--ease)}
.tabcx__hint svg{width:16px;height:16px;color:#fff}
.tabcx__card:hover .tabcx__hint{background:rgba(255,255,255,.16);transform:translateX(3px)}

/* ---- Feature-switch crossfade (Monzo PhoneCarousel analog) ------------- */
.fswitch{display:grid;grid-template-columns:1fr minmax(280px,360px) 1fr;gap:clamp(20px,3vw,40px);align-items:center}
@media(max-width:960px){.fswitch{grid-template-columns:1fr}}
.fswitch__col{display:flex;flex-direction:column;gap:14px}
.fswitch__frame{position:relative;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/5;background:var(--imgph-bg)}
@media(max-width:960px){.fswitch__frame{order:-1;max-width:420px;margin-inline:auto;width:100%}.fswitch__col--right{order:1}.fswitch .fswitch__dots{display:none}.fswitch .fswitch__toggle p{max-height:8em;opacity:1;margin-top:6px}}
.fswitch__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease);z-index:0}
.fswitch__img[data-active]{opacity:1;z-index:1}
.fswitch__frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,10,0) 55%,rgba(10,10,10,.28) 100%)}
.fswitch__toggle{appearance:none;text-align:left;cursor:pointer;border:1px solid var(--line);background:var(--card,#fff);color:inherit;border-radius:var(--radius);padding:clamp(16px,2vw,20px);transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.fswitch__toggle:hover{transform:translateY(-2px)}
.fswitch__toggle[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 18px 40px -30px rgba(10,10,10,.5)}
.fswitch__toggle .step-n{display:inline-flex;align-items:center;justify-content:center;width:1.9em;height:1.9em;border-radius:50%;font-family:var(--font-display);font-weight:800;font-size:.9rem;background:var(--fswitch-n-bg,rgba(0,0,0,.06));color:var(--accent);margin-bottom:10px}
.fswitch__toggle[aria-pressed="true"] .step-n{background:var(--accent);color:var(--fswitch-n-on,#fff)}
.fswitch__toggle h3{font-size:var(--step-1);letter-spacing:-.02em}
.fswitch__toggle p{color:var(--muted);font-size:var(--step--1);margin-top:6px;max-width:38ch;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s var(--ease),opacity .3s var(--ease),margin-top .3s var(--ease)}
.fswitch__toggle[aria-pressed="true"] p{max-height:8em;opacity:1}
.fswitch__dots{display:flex;gap:8px;justify-content:center;margin-top:24px}
.fswitch__dot{appearance:none;border:0;cursor:pointer;width:34px;height:4px;border-radius:999px;background:var(--line);padding:0;transition:background .25s var(--ease)}
.fswitch__dot[aria-selected="true"]{background:var(--accent)}
@media(prefers-reduced-motion:reduce){.fswitch__img{transition:none}.fswitch__toggle p{transition:none}}

/* ---- Draggable flashcard deck ------------------------------------------ */
.deck{position:relative;width:min(420px,100%);margin-inline:auto;aspect-ratio:5/6;touch-action:pan-y}
.deck__card{position:absolute;inset:0;border-radius:var(--radius-xl);padding:clamp(24px,4vw,38px);display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 30px 60px -40px rgba(10,10,10,.6);will-change:transform;user-select:none}
.deck__card[data-top]{cursor:grab}
.deck__card[data-top]:active{cursor:grabbing}
.deck__card .k{font-size:var(--step--1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.deck__card b{font-family:var(--font-display);font-weight:800;font-size:var(--step-4);letter-spacing:-.04em;line-height:1;display:block}
.deck__card p{font-size:var(--step-0);line-height:1.4}
.deck__hint{text-align:center;margin-top:18px;font-size:var(--step--1);color:var(--muted)}
@media(prefers-reduced-motion:reduce){.deck__card{transition:none}}

/* =========================================================================
   Nav panels (N26-style dropdowns) — desktop
   Pure CSS open on hover/focus-within; themed via existing vars.
   ========================================================================= */
.nav-item{position:relative}
.primary-nav .nav-links>li.nav-item{display:flex;align-items:center}
.nav-item>a{display:inline-flex;align-items:center;gap:6px}
.nav-item.has-panel>a::after{content:"";width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .18s var(--ease)}
.nav-item.has-panel:hover>a::after,.nav-item.has-panel:focus-within>a::after{transform:rotate(225deg) translateY(-1px)}
.nav-panel{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translate(-50%,8px);
  min-width:560px;background:var(--card,#fff);border:1px solid var(--line,rgba(0,0,0,.08));
  border-radius:var(--radius-lg);box-shadow:0 30px 70px -30px rgba(0,0,0,.35);
  padding:26px 28px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease);z-index:80}
.nav-item.has-panel:hover .nav-panel,.nav-item.has-panel:focus-within .nav-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.nav-panel--slim{min-width:420px;grid-template-columns:1fr 1fr}
.nav-panel__label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.nav-panel__hl{display:flex;align-items:center;gap:14px;padding:10px;border-radius:var(--radius);transition:background .15s}
.nav-panel__hl:hover{background:var(--tag-bg,rgba(0,0,0,.05))}
.nav-panel__hl+.nav-panel__hl{margin-top:6px}
.nav-panel__thumb{flex:none;width:52px;height:52px;border-radius:12px;background-size:cover;background-position:center;background-color:var(--tag-bg,rgba(0,0,0,.08))}
.nav-panel__hl b{display:block;font-size:.98rem;font-weight:600;letter-spacing:-.01em}
.nav-panel__hl small{display:block;color:var(--muted);font-size:.84rem;margin-top:2px}
.nav-panel__links{display:flex;flex-direction:column;gap:2px}
.nav-panel__links a{padding:7px 10px;border-radius:10px;font-size:.95rem;color:var(--fg);transition:background .15s}
.nav-panel__links a:hover{background:var(--tag-bg,rgba(0,0,0,.05))}
.nav-panel__links a.more-link{color:var(--muted)}
@media(max-width:1080px){.nav-panel{display:none}}

/* =========================================================================
   N26-style fullscreen mobile menu with accordion sections
   ========================================================================= */
.mm{position:fixed;inset:0;z-index:90;background:var(--bg,#fff);display:none;flex-direction:column}
.mm[data-open]{display:flex}
body.menu-open{overflow:hidden}
.mm__bar{display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);border-bottom:1px solid var(--line,rgba(0,0,0,.08))}
.mm__close{background:none;border:0;padding:8px;cursor:pointer;color:var(--fg)}
.mm__close svg{width:26px;height:26px}
.mm__scroll{flex:1;overflow-y:auto;padding:10px var(--gutter) 20px}
.mm__row,.mm__acc>button{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:18px 6px;background:none;border:0;border-bottom:1px solid var(--line,rgba(0,0,0,.06));
  font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;
  color:var(--fg);text-align:left;cursor:pointer}
.mm__chev{flex:none;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:.5;transition:transform .18s var(--ease)}
.mm__acc>button[aria-expanded="true"] .mm__chev{transform:rotate(45deg)}
.mm__acc>button[aria-expanded="true"]{background:var(--tag-bg,rgba(0,0,0,.04));border-radius:var(--radius) var(--radius) 0 0;padding-inline:14px}
.mm__panel{display:none;padding:6px 14px 18px;background:var(--tag-bg,rgba(0,0,0,.04));border-radius:0 0 var(--radius) var(--radius);margin-bottom:6px}
.mm__acc>button[aria-expanded="true"]+.mm__panel{display:block}
.mm__panel .nav-panel__label{margin:14px 0 10px}
.mm__panel .nav-panel__hl{padding:8px 6px}
.mm__panel .nav-panel__links a{padding:9px 6px;font-size:1rem}
.mm__cta{padding:14px var(--gutter) calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line,rgba(0,0,0,.08));display:flex;flex-direction:column;gap:10px}
.mm__cta .btn{width:100%;justify-content:center;text-align:center}
@media(min-width:1081px){.mm{display:none!important}}

/* Click-toggled state for nav panels (set by app.js) */
.nav-item.has-panel.open .nav-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.nav-item.has-panel.open>a::after{transform:rotate(225deg) translateY(-1px)}

/* Hover bridge: keeps the dropdown open while the cursor crosses the gap
   between the nav link and its panel (the panel floats 18px below). */
.nav-item.has-panel{position:relative}
.nav-item.has-panel:hover::before{content:"";position:absolute;left:-14px;right:-14px;top:100%;height:36px}

/* Section head — promoted from page-local styles (used on nearly every page;
   pages that lacked the rule had headings touching the content below). */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(28px,4vw,44px)}
.sec-head h2{max-width:20ch}
.sec-head a.more{font-weight:600;white-space:nowrap;color:var(--accent,currentColor)}


/* Hamburger morphs to X in place; header stays on top of the open menu */
.nav-toggle{position:relative}
.nav-toggle .ico{display:block}
.nav-toggle .ico--close{display:none}
.nav-toggle[aria-expanded="true"] .ico--menu{display:none}
.nav-toggle[aria-expanded="true"] .ico--close{display:block}
.site-header{z-index:60}
.site-header .nav{position:relative;z-index:70}
.mm{z-index:50}
.mm__scroll{padding-top:96px}


/* Section headings need breathing room from the content that follows.
   (.sec-head already carries the spacing on its wrapper.) */
.h-sec{margin-bottom:clamp(20px,3vw,32px)}
.sec-head .h-sec,.sec-head h2{margin-bottom:0}

/* Sub-headings that sit directly on a card grid */
h3 + .answers{margin-top:18px}
h3 + .member-row{margin-top:16px}

/* De opmaak van de cookiebanner stond hier, en is er op 2026-08-04 samen met
   de banner zelf uitgehaald. Zie het commentaar op dezelfde plek in app.js. */

/* Prototype form acknowledgement (see app.js) */
/* De keyframes hieronder heetten `cookiebar-in` en werden door de banner én
   door deze bevestiging gebruikt. Met de banner weg horen ze hier, onder een
   naam die zegt waar ze voor zijn. */
@keyframes ack-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.form-ack{
  display:flex;align-items:center;gap:.6em;
  font-weight:600;color:var(--fg);
  padding:16px 20px;border-radius:var(--radius);
  background:var(--ack-bg,rgba(0,0,0,.04));
  animation:ack-in .3s var(--ease) both;
}
.form-ack::before{content:"✓";color:var(--ack-mark,var(--gold-deep,currentColor));font-weight:700}
@media(prefers-reduced-motion:reduce){.form-ack{animation:none}}