/* artmedia 2026: wit als passe-partout, een doorlopende lijn, de 4 graden snede, veel beweging. */
:root {
--ink: #0e0e10;
--ink-2: #2a2a30;
--mute: #5d5d66;
--line: #dedde3;
--mist: #f5f4f6;
--white: #ffffff;
--magenta: #a2216e;
--magenta-d: #72174e;
--g1: #ffa25c; --g2: #f5507a; --g3: #d43c9f; --g4: #9b4ad8; --g5: #4f9bf5;
--t1: #e8590c; --t2: #d6336c; --t3: #a2216e; --t4: #7048e8; --t5: #1864ab;
--grad: linear-gradient(100deg, var(--g1) 0%, var(--g2) 28%, var(--g3) 52%, var(--g4) 76%, var(--g5) 100%);
--grad-text: linear-gradient(100deg, var(--t1) 0%, var(--t2) 30%, var(--t3) 55%, var(--t4) 80%, var(--t5) 100%);
--display: Archivo, "Archivo Fallback", "Arial Black", Arial, sans-serif;
--body: "Inter Tight", "Inter Tight Fallback", "Helvetica Neue", Arial, sans-serif;
--gut: max(20px, env(safe-area-inset-left, 0px), 4.5vw);
--gut-r: max(20px, env(safe-area-inset-right, 0px), 4.5vw);
--max: 1320px;
--slant: 4.2vw; /* 4 graden over de volle breedte: tan(4deg) * 100vw */
--ease: cubic-bezier(.65, 0, .35, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--fs-hero: clamp(3.1rem, 10.4vw, 11.5rem);
--fs-h1: clamp(2.7rem, 8vw, 8.5rem);
--fs-h2: clamp(2.2rem, 5.6vw, 5.6rem);
--fs-h3: clamp(1.4rem, 2.4vw, 2.2rem);
--fs-lead: clamp(1.1rem, 1.5vw, 1.45rem);
--fs-body: clamp(1rem, 1.05vw, 1.1rem);
--fs-small: .875rem;
--sec: clamp(5rem, 12vw, 11rem);
color-scheme: light;
}
@font-face { font-family: Archivo; font-weight: 800; font-display: swap; src: url(../fonts/archivo-latin-ext-800-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: Archivo; font-weight: 900; font-display: swap; src: url(../fonts/archivo-latin-ext-900-normal.woff2) format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body); font-size: var(--fs-body); line-height: 1.55; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 900; letter-spacing: -.035em; line-height: .95; text-wrap: balance; }
::selection { background: var(--magenta); color: #fff; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.am-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.am-skip { position: fixed; left: 12px; top: -60px; z-index: 1000; background: var(--ink); color: #fff; padding: 10px 16px; text-decoration: none; }
.am-skip:focus { top: 12px; }
/* WordPress-omhulsels neutraliseren */
.wp-site-blocks { padding: 0 !important; }
.am-main > .entry-content, .am-main .wp-block-post-content { margin: 0 !important; max-width: none !important; }
.am-main :where(.wp-block-post-content) > * { margin-block: 0 !important; max-width: none !important; }
.is-layout-constrained > *, .is-layout-flow > * { margin-block-start: 0; }
/* ---------- Basis ---------- */
.am-wrap { width: 100%; max-width: calc(var(--max) + var(--gut) + var(--gut-r)); margin-inline: auto; padding-left: var(--gut); padding-right: var(--gut-r); }
.am-sec { position: relative; padding-block: var(--sec); }
.am-sec--tight { padding-block: calc(var(--sec) * .6); }
.am-eyebrow { display: inline-flex; align-items: center; gap: .7em; font-size: var(--fs-small); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.am-eyebrow::before { content: ""; width: .55em; height: .55em; background: var(--magenta); flex: none; }
.am-hero-t { font-size: var(--fs-hero); line-height: .9; letter-spacing: -.05em; }
.am-h1 { font-size: var(--fs-h1); line-height: .92; letter-spacing: -.045em; }
.am-h2 { font-size: var(--fs-h2); }
.am-h3 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.am-lead { font-size: var(--fs-lead); line-height: 1.45; font-weight: 300; max-width: 34ch; }
.am-lead strong { font-weight: 600; }
.am-mute { color: var(--mute); }
.am-rbw { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; background-size: 200% 100%; animation: am-shift 8s ease-in-out infinite alternate; }
@keyframes am-shift { to { background-position: 100% 0; } }
.am-sq { display: inline-block; width: .19em; height: .19em; background: var(--magenta); margin-left: .05em; vertical-align: baseline; font-style: normal; }
.am-stack { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.6rem); }
.am-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* Knoppen */
.am-btn { --bg: var(--ink); --fg: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: 0 1.6em; background: var(--bg); color: var(--fg); font: 600 1rem/1 var(--body); letter-spacing: .01em; text-decoration: none; border: 0; cursor: pointer; overflow: hidden; isolation: isolate; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path .5s var(--ease-out); }
.am-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--magenta); transform: translateY(101%) skewY(-4deg); transform-origin: left; transition: transform .55s var(--ease-out); }
.am-btn:hover::before, .am-btn:focus-visible::before { transform: translateY(0) skewY(0); }
.am-btn:hover { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 0 100%); }
.am-btn::after { content: "→"; font-weight: 400; transition: transform .4s var(--ease-out); }
.am-btn:hover::after { transform: translateX(4px); }
.am-btn--ghost { --bg: transparent; --fg: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.am-btn--ghost:hover { --fg: #fff; }
.am-btn--light { --bg: #fff; --fg: var(--ink); }
.am-btn--light:hover { --fg: #fff; }
.am-btn--sm { min-height: 42px; padding: 0 1.1em; font-size: .9rem; }
.am-btn--sm::after { display: none; }
.am-btn--lg { min-height: 62px; padding: 0 2em; font-size: 1.08rem; }
.am-btn span { position: relative; }
.am-link { position: relative; text-decoration: none; font-weight: 600; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; padding-bottom: 3px; transition: background-size .5s var(--ease-out); }
.am-link:hover { background-size: 0 2px; background-position: 100% 100%; }
/* ---------- Header ---------- */
.am-header { position: fixed; inset: 0 0 auto; z-index: 90; padding-top: env(safe-area-inset-top, 0px); transition: transform .55s var(--ease-out), background-color .4s, box-shadow .4s, color .4s; }
.am-header__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; max-width: calc(var(--max) + var(--gut) + var(--gut-r)); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut-r); }
.am-header.is-solid { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 rgba(14, 14, 16, .06); }
.am-header.is-hidden { transform: translateY(-110%); }
.am-header:has(:focus-visible) { transform: none; transition: none; }
.am-header__logo { display: block; width: 128px; color: var(--ink); flex: none; }
.am-logo { display: block; width: 100%; max-width: 100%; height: auto; overflow: visible; color: currentColor; }
.am-logo--light { color: #fff; }
.am-nav ul { display: flex; gap: clamp(16px, 2.2vw, 36px); margin: 0; padding: 0; list-style: none; }
.am-nav a { position: relative; display: block; padding: 8px 0; font-size: .95rem; font-weight: 500; text-decoration: none; overflow: hidden; }
.am-nav a span { display: block; transition: transform .45s var(--ease-out); }
.am-nav a::after { content: attr(data-label); }
.am-nav a::before { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out); }
.am-nav a:hover::before, .am-nav a[aria-current]::before { transform: scaleX(1); transform-origin: left; }
.am-header__end { display: flex; align-items: center; gap: 18px; }
.am-lang { display: flex; gap: 6px; font-size: .85rem; font-weight: 600; letter-spacing: .06em; color: var(--mute); }
.am-lang a { text-decoration: none; color: var(--mute); }
.am-lang a:hover { color: var(--magenta); }
.am-lang [aria-current] { color: var(--ink); }
.am-burger { display: none; position: relative; width: 46px; height: 46px; border: 0; background: var(--ink); cursor: pointer; padding: 0; }
.am-burger span:not(.am-sr) { position: absolute; left: 13px; right: 13px; height: 2px; background: #fff; transition: transform .45s var(--ease-out), top .45s var(--ease-out); }
.am-burger span:nth-child(1) { top: 18px; }
.am-burger span:nth-child(2) { top: 26px; right: 19px; }
.am-burger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.am-burger[aria-expanded="true"] span:nth-child(2) { top: 22px; right: 13px; transform: rotate(-45deg); }
.am-theme-dark .am-header:not(.is-solid) { color: #fff; }
.am-theme-dark .am-header:not(.is-solid) .am-header__logo { color: #fff; }
.am-theme-dark .am-header:not(.is-solid) .am-lang, .am-theme-dark .am-header:not(.is-solid) .am-lang a { color: rgba(255,255,255,.7); }
.am-theme-dark .am-header:not(.is-solid) .am-lang [aria-current] { color: #fff; }
.am-theme-dark .am-header:not(.is-solid) .am-btn--sm { --bg: #fff; --fg: var(--ink); }
.am-theme-dark .am-header.is-solid { background: rgba(14, 14, 16, .82); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.am-theme-dark .am-header.is-solid .am-header__logo { color: #fff; }
.am-theme-dark .am-header.is-solid .am-lang [aria-current] { color: #fff; }
.am-theme-dark .am-header.is-solid .am-btn--sm { --bg: #fff; --fg: var(--ink); }
.am-menu { position: fixed; inset: 0; z-index: 85; color: #fff; }
.am-menu[hidden] { display: none; }
.am-menu__bg { position: absolute; inset: 0; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: clip-path .7s var(--ease-out); }
.am-menu.is-open .am-menu__bg { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--slant))); }
.am-menu__nav { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 32px; height: 100%; padding: 100px var(--gut-r) 60px var(--gut); }
.am-menu__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.am-menu__nav li { overflow: hidden; }
.am-menu__nav ul a { display: inline-block; font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 11vw, 4.5rem); line-height: 1.05; letter-spacing: -.04em; text-decoration: none; transform: translateY(110%); transition: transform .7s var(--ease-out); }
.am-menu.is-open .am-menu__nav ul a { transform: none; }
.am-menu__nav li:nth-child(2) a { transition-delay: .05s; } .am-menu__nav li:nth-child(3) a { transition-delay: .1s; } .am-menu__nav li:nth-child(4) a { transition-delay: .15s; } .am-menu__nav li:nth-child(5) a { transition-delay: .2s; } .am-menu__nav li:nth-child(6) a { transition-delay: .25s; }
.am-menu__nav ul a:hover { color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.am-menu__lang a { color: rgba(255,255,255,.75); font-weight: 600; }
.am-menu-open .am-header { color: #fff; }
.am-menu-open .am-header .am-header__logo { color: #fff; }
.am-menu-open .am-header.is-solid { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
@media (max-width: 1080px) {
.am-nav, .am-header__end .am-lang { display: none; }
.am-burger { display: block; }
.am-header__in { height: 66px; }
.am-header__logo { width: 112px; }
}
@media (max-width: 480px) { .am-header__end .am-btn--sm { display: none; } }
/* ---------- Lijn en snede ---------- */
.am-line { position: absolute; left: 0; width: 100%; pointer-events: none; overflow: visible; z-index: 3; }
.am-line path { fill: none; stroke: url(#am-grad); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.am-line path.am-line__end { fill: none; stroke: var(--magenta); stroke-width: 16; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.am-cut-b { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); }
.am-cut-t { clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); }
.am-cut-tb { clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%); }
.am-cut-s { clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%); }
.am-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ---------- Media ---------- */
.am-media { position: relative; overflow: hidden; background: var(--mist); isolation: isolate; }
.am-media > img, .am-media > video, .am-media > picture img { width: 100%; height: 100%; object-fit: cover; }
.am-media[data-parallax] > img, .am-media[data-parallax] > video { height: 118%; margin-top: -9%; }
.am-media--dark { background: #1b1b20; }
.am-media__tag { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; background: rgba(14,14,16,.78); color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.am-media__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff3b3b; animation: am-rec 1.4s steps(2) infinite; }
@keyframes am-rec { 50% { opacity: .2; } }
.am-grain::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); }
.am-light { position: absolute; inset: 0; background: radial-gradient(60% 70% at 20% 30%, var(--g1), transparent 70%), radial-gradient(55% 60% at 80% 20%, var(--g4), transparent 70%), radial-gradient(60% 70% at 70% 90%, var(--g5), transparent 70%), radial-gradient(50% 60% at 30% 85%, var(--g3), transparent 70%), var(--g2); filter: saturate(1.05); animation: am-drift 18s ease-in-out infinite alternate; background-size: 140% 140%; }
@keyframes am-drift { 0% { background-position: 0 0, 100% 0, 100% 100%, 0 100%, 0 0; } 100% { background-position: 30% 20%, 60% 30%, 70% 60%, 40% 70%, 0 0; } }
/* Onthullingen (JS zet .is-in; zonder JS is alles zichtbaar) */
.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-wipe] { clip-path: polygon(0 100%, 100% calc(100% + var(--slant)), 100% 100%, 0 100%); transition: clip-path 1.3s var(--ease-out); }
.js [data-wipe].is-in { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.js [data-wipe].am-cut-s.is-in { clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%); }
.js [data-wipe].am-cut-b.is-in { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); }
.js [data-wipe] > img, .js [data-wipe] > video { transform: scale(1.25); transition: transform 1.8s var(--ease-out); }
.js [data-wipe].is-in > img, .js [data-wipe].is-in > video { transform: scale(1); }
.am-split-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
/* ---------- Home: hero ---------- */
.am-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 120px; padding-bottom: clamp(5rem, 11vw, 9rem); overflow: hidden; }
.am-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 72px); align-items: end; }
.am-hero__copy { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 34px); min-width: 0; }
.am-hero__title { font-size: var(--fs-hero); line-height: .9; letter-spacing: -.055em; }
.am-hero__stage { position: relative; height: min(64vh, 640px); min-width: 0; }
.am-hero__light { position: absolute; right: 0; top: 0; width: 88%; height: 86%; clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); overflow: hidden; }
.am-hero__reel { position: absolute; right: 10%; top: 9%; width: 42%; aspect-ratio: 9 / 16; z-index: 2; box-shadow: var(--am-shadow); clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%); }
.am-hero__frame { position: absolute; left: -6%; top: 46%; width: 66%; aspect-ratio: 16 / 10; z-index: 3; box-shadow: var(--am-shadow); clip-path: polygon(0 0, 100% 0, 100% 91%, 0 100%); }
.am-hero__line { top: auto; bottom: 0; height: 100%; }
.am-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 640px; }
.am-door { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 22px; background: var(--ink); color: #fff; text-decoration: none; overflow: hidden; isolation: isolate; min-height: 136px; transition: transform .6s var(--ease-out); }
.am-door::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad); opacity: 0; transform: scale(1.2); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.am-door:hover { transform: translateY(-6px); }
.am-door:hover::before { opacity: 1; transform: scale(1); }
.am-door__who { font-size: .82rem; font-weight: 300; color: rgba(255,255,255,.75); letter-spacing: .02em; }
.am-door__t { font-family: var(--display); font-weight: 800; font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.08; letter-spacing: -.015em; }
.am-door__s { font-size: .88rem; color: rgba(255,255,255,.78); margin-top: auto; }
.am-door__arrow { position: absolute; right: 18px; top: 18px; font-size: 1.3rem; transition: transform .5s var(--ease-out); }
.am-door:hover .am-door__arrow { transform: translate(4px, -4px) rotate(-45deg); }
.am-scrollhint { position: absolute; left: var(--gut); bottom: 22px; z-index: 3; display: flex; align-items: center; gap: 10px; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.am-scrollhint i { width: 1px; height: 44px; background: var(--line); position: relative; overflow: hidden; }
.am-scrollhint i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--magenta); animation: am-drop 1.8s var(--ease) infinite; }
@keyframes am-drop { to { top: 100%; } }
@media (max-width: 900px) {
.am-hero { justify-content: flex-start; padding-top: 104px; }
.am-hero__grid { grid-template-columns: 1fr; }
.am-hero__stage { height: 112vw; max-height: 560px; order: 2; }
.am-scrollhint { display: none; }
}
@media (max-width: 520px) { .am-doors { grid-template-columns: 1fr; } .am-door { min-height: 0; } }
/* ---------- Marquee ---------- */
.am-marquee { position: relative; overflow: hidden; white-space: nowrap; }
.am-marquee__track { display: inline-flex; gap: clamp(40px, 6vw, 100px); align-items: center; padding-right: clamp(40px, 6vw, 100px); animation: am-marq var(--dur, 38s) linear infinite; will-change: transform; }
.am-marquee:hover .am-marquee__track { animation-play-state: paused; }
@keyframes am-marq { to { transform: translateX(-50%); } }
.am-logos { padding-block: clamp(3rem, 6vw, 5rem); border-block: 1px solid var(--line); }
.am-logos__item { display: inline-flex; align-items: center; height: clamp(34px, 4vw, 52px); }
.am-logos__item img { height: 100%; width: auto; max-width: none; flex: none; filter: grayscale(1) contrast(1.2); opacity: .8; transition: filter .4s, opacity .4s; }
/* DUO-009: kleur bij hover enkel met muis; op touch altijd in kleur */
@media (hover: hover) { .am-logos__item:hover img { filter: none; opacity: 1; } }
@media (hover: none) { .am-logos__item img { filter: none; opacity: 1; } }
.am-logos__word { font-family: var(--display); font-weight: 900; font-size: clamp(1.7rem, 3vw, 2.7rem); letter-spacing: -.04em; color: #9a9aa2; }
.am-theme-dark .am-logos { border-color: rgba(255,255,255,.12); }
.am-theme-dark .am-logos__item img { filter: grayscale(1) brightness(0) invert(1); opacity: .7; }
.am-theme-dark .am-logos__word { color: rgba(255,255,255,.55); }
/* ---------- Pinned cinematisch blok ---------- */
.am-cine { position: relative; height: 300vh; background: var(--ink); }
.am-cine__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.am-cine__media { position: absolute; inset: 0; clip-path: polygon(22% 22%, 78% 18%, 78% 78%, 22% 82%); }
.am-cine__media video, .am-cine__media img { width: 100%; height: 100%; object-fit: cover; }
.am-cine__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,16,.1), rgba(14,14,16,.55)); }
.am-cine__words { position: relative; z-index: 2; display: grid; place-items: center; text-align: center; color: #fff; padding-inline: var(--gut); }
.am-cine__word { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.am-cine__word b { font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 12.5vw, 14rem); line-height: .85; letter-spacing: -.06em; }
.am-cine__word span { font-size: var(--fs-lead); font-weight: 300; max-width: 26ch; }
.js .am-cine__word { opacity: 0; }
.am-cine__progress { position: absolute; left: var(--gut); right: var(--gut-r); bottom: 28px; z-index: 3; height: 2px; background: rgba(255,255,255,.2); }
.am-cine__progress i { display: block; height: 100%; width: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; }
/* ---------- Banden ---------- */
.am-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.am-band--rev .am-band__media { order: -1; }
.am-band__media { position: relative; aspect-ratio: 4 / 5; min-width: 0; }
.am-band__media .am-media { position: absolute; inset: 0; }
.am-band__copy { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 30px); min-width: 0; }
.am-band__float { position: absolute; z-index: 2; width: 42%; aspect-ratio: 1; right: -8%; bottom: -10%; box-shadow: var(--am-shadow); }
@media (max-width: 900px) { .am-band { grid-template-columns: 1fr; } .am-band--rev .am-band__media { order: 0; } .am-band__float { right: -2%; width: 46%; } }
/* Pakketten */
.am-cards { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 14px; }
.am-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2vw, 28px); background: var(--mist); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); transform-style: preserve-3d; }
.am-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.am-card:hover { transform: translateY(-8px); box-shadow: var(--am-shadow); }
.am-card:hover::after { transform: scaleX(1); }
.am-card__t { font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem, 1.6vw, 1.55rem); letter-spacing: -.02em; line-height: 1.05; }
.am-card__p { margin-top: auto; padding-top: 18px; font-size: .95rem; color: var(--mute); }
.am-card__p b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 3vw, 2.9rem); color: var(--ink); letter-spacing: -.04em; line-height: 1; }
.am-card--dark { background: var(--ink); color: #fff; }
.am-card--dark .am-card__p, .am-card--dark .am-card__p b { color: #fff; }
.am-card--feat { background: var(--ink); color: #fff; }
.am-card--feat .am-card__p { color: rgba(255,255,255,.7); }
.am-card--feat .am-card__p b { color: #fff; }
.am-card__badge { position: absolute; right: 16px; top: 16px; padding: 5px 9px; background: var(--grad); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.am-card ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: .95rem; }
.am-card li { display: flex; gap: 10px; }
.am-card li::before { content: ""; width: 7px; height: 7px; margin-top: .55em; background: var(--magenta); flex: none; }
.am-card--feat li::before { background: var(--g2); }
@media (max-width: 1100px) { .am-cards { --cols: 2 !important; } }
@media (max-width: 560px) { .am-cards { --cols: 1 !important; } }
/* Situaties (organisaties) */
.am-list { display: flex; flex-direction: column; border-top: 1px solid currentColor; }
.am-list__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 24px; align-items: baseline; padding: clamp(18px, 2.4vw, 30px) 0; border-bottom: 1px solid rgba(127,127,135,.35); text-decoration: none; }
.am-list__t { font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 3.6vw, 3.6rem); letter-spacing: -.04em; line-height: .98; transition: transform .6s var(--ease-out), color .4s; }
.am-list__s { color: inherit; opacity: .72; font-size: var(--fs-body); }
.am-list__item:hover .am-list__t { transform: translateX(14px); }
.am-list__item:hover .am-list__t { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.am-list__n { position: absolute; left: -2.2em; top: clamp(24px, 3vw, 40px); font-size: .8rem; opacity: .5; }
@media (max-width: 760px) { .am-list__item { grid-template-columns: 1fr; gap: 8px; } }
.am-hoverimg { position: fixed; left: 0; top: 0; z-index: 70; width: min(30vw, 420px); aspect-ratio: 4 / 3; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.8) rotate(-4deg); transition: opacity .35s, transform .5s var(--ease-out); clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); }
.am-hoverimg.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
/* Naast de cursor (rechts, of links aan de rechterkant van het scherm): de magenta cursor valt nooit op het beeld */
.am-hoverimg { transform: translate(28px, -50%) scale(.8) rotate(-4deg); }
.am-hoverimg.is-on { transform: translate(28px, -50%) scale(1) rotate(0); }
.am-hoverimg.is-left { transform: translate(calc(-100% - 28px), -50%) scale(.8) rotate(4deg); }
.am-hoverimg.is-left.is-on { transform: translate(calc(-100% - 28px), -50%) scale(1) rotate(0); }
.am-hoverimg img, .am-hoverimg video { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none) { .am-hoverimg { display: none; } }
/* Horizontale verhalen */
.am-hscroll { position: relative; }
.am-hscroll__pin { overflow: hidden; }
.am-hscroll__track { display: flex; gap: clamp(16px, 2vw, 28px); padding-left: var(--gut); padding-right: var(--gut-r); width: max-content; }
.am-story-card { position: relative; flex: none; width: clamp(280px, 38vw, 560px); display: flex; flex-direction: column; gap: 16px; text-decoration: none; }
.am-story-card__media { aspect-ratio: 4 / 5; clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); }
.am-story-card__media img, .am-story-card__media video { transition: transform 1.2s var(--ease-out); }
.am-story-card:hover .am-story-card__media img, .am-story-card:hover .am-story-card__media video { transform: scale(1.06); }
.am-story-card__meta { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.am-story-card__t { font-family: var(--display); font-weight: 900; font-size: clamp(1.5rem, 2.4vw, 2.3rem); letter-spacing: -.035em; line-height: 1; }
.am-story-card--wide { width: clamp(300px, 52vw, 780px); }
.am-story-card--wide .am-story-card__media { aspect-ratio: 16 / 11; }
@media (max-width: 760px) {
.am-hscroll__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.am-hscroll__track::-webkit-scrollbar { display: none; }
.am-story-card { width: 80vw; scroll-snap-align: start; }
.am-story-card--wide { width: 86vw; }
}
/* Duo */
.am-duo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.am-person { display: flex; flex-direction: column; gap: 14px; }
.am-person__media { aspect-ratio: 3 / 4; clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%); }
.am-person__media--line { background: #fff; }
.am-person__media--line img { object-fit: contain; object-position: center bottom; }
.am-person__n { font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 2.6vw, 2.5rem); letter-spacing: -.04em; line-height: 1; }
.am-person:nth-child(2) { transform: translateY(12%); }
@media (max-width: 760px) { .am-duo { grid-template-columns: 1fr 1fr; } .am-person:nth-child(3) { grid-column: 1 / -1; } .am-person:nth-child(3) .am-person__media { aspect-ratio: 16 / 10; } .am-person:nth-child(2) { transform: translateY(16%); } }
/* CTA-strook */
.am-cta { position: relative; overflow: hidden; color: #fff; background: var(--ink); }
.am-cta__bg { position: absolute; inset: 0; opacity: .95; }
.am-cta__in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 3vw, 36px); }
.am-cta .am-h1 { max-width: 12ch; }
.am-cta .am-lead { color: rgba(255,255,255,.88); }
/* ---------- Footer ---------- */
.am-footer { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.am-footer__marquee { padding-block: clamp(26px, 4vw, 48px) 0; }
.am-footer__marquee .am-marquee__track { --dur: 50s; }
.am-footer__marquee span { font-family: var(--display); font-weight: 900; font-size: clamp(3.4rem, 10vw, 10rem); line-height: 1; letter-spacing: -.055em; padding-right: .3em; }
.am-footer__marquee .am-sq { width: .16em; height: .16em; }
.am-footer__marquee { display: flex; }
.am-footer__marquee > .am-marquee__track { animation: am-marq 50s linear infinite; }
.am-footer__in { max-width: calc(var(--max) + var(--gut) + var(--gut-r)); margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--gut-r) calc(28px + env(safe-area-inset-bottom, 0px)) var(--gut); display: flex; flex-direction: column; gap: clamp(40px, 6vw, 80px); }
.am-footer__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: clamp(30px, 5vw, 60px); border-bottom: 1px solid rgba(255,255,255,.14); }
.am-footer__big { font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 6vw, 5.5rem); letter-spacing: -.05em; line-height: .95; }
.am-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; font-size: .95rem; color: rgba(255,255,255,.78); }
.am-footer__cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.am-footer__cols a { text-decoration: none; }
.am-footer__cols a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--g3); text-underline-offset: 4px; }
.am-footer__label { margin-bottom: 10px; color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.am-footer__base { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; font-size: .8rem; color: rgba(255,255,255,.55); }
.am-footer__base a { color: rgba(255,255,255,.8); }
.am-footer__logo { width: 150px; color: #fff; }
@media (max-width: 760px) { .am-footer__cols { grid-template-columns: 1fr 1fr; } }
/* ---------- Intro, overgang ---------- */
.am-intro { position: fixed; inset: 0; z-index: 300; pointer-events: none; display: none; }
.js:not(.am-seen) .am-intro { display: block; }
.am-intro__panel { position: absolute; inset: 0; background: var(--ink); }
.am-intro__mark { position: absolute; left: 50%; top: 50%; width: min(56vw, 520px); transform: translate(-50%, -50%); color: #fff; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
.am-intro__mark svg { width: 100%; }
.am-wipe { position: fixed; inset: 0; z-index: 250; pointer-events: none; background: var(--ink); clip-path: polygon(0 100%, 100% calc(100% + 10vw), 100% 100%, 0 100%); }
/* ---------- Pagina: ondernemers ---------- */
.am-phones { position: relative; height: min(78vh, 760px); min-width: 0; }
.am-phone { position: absolute; width: clamp(150px, 19vw, 270px); aspect-ratio: 9 / 19; border-radius: 34px; padding: 9px; background: #111; box-shadow: inset 0 0 0 2px #2c2c33, var(--am-shadow); }
.am-phone__screen { position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background: #222; }
.am-phone__screen img, .am-phone__screen video { width: 100%; height: 100%; object-fit: cover; }
.am-phone__ui { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; gap: 6px; color: #fff; font-size: .7rem; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.am-phone__ui b { font-size: .78rem; }
.am-phone__heart { position: absolute; right: 12px; bottom: 60px; z-index: 2; display: flex; flex-direction: column; gap: 14px; color: #fff; font-size: 1.1rem; }
.am-phone:nth-child(1) { left: 2%; top: 14%; transform: rotate(-8deg); }
.am-phone:nth-child(2) { left: 32%; top: 0; z-index: 2; }
.am-phone:nth-child(3) { left: 62%; top: 16%; transform: rotate(7deg); }
.am-hero--biz { min-height: 100svh; padding-top: 110px; display: flex; align-items: center; }
.am-hero--biz .am-hero__grid { align-items: center; }
@media (max-width: 900px) { .am-phones { height: 128vw; max-height: 600px; } .am-phone { width: 38vw; border-radius: 26px; padding: 7px; } .am-phone__screen { border-radius: 20px; } .am-phone:nth-child(1) { left: -2%; } .am-phone:nth-child(2) { left: 31%; } .am-phone:nth-child(3) { left: 64%; } }
.am-month { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.am-week { position: relative; display: flex; flex-direction: column; gap: 14px; padding-top: 70px; }
.am-week__dot { position: absolute; top: 22px; left: 0; width: 22px; height: 22px; background: var(--magenta); }
.am-week__label { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.am-week__t { font-family: var(--display); font-weight: 900; font-size: clamp(1.7rem, 2.8vw, 2.7rem); letter-spacing: -.04em; line-height: 1; }
.am-week__media { aspect-ratio: 4 / 5; margin-top: 8px; clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); }
.am-month__line { position: absolute; left: 0; right: 0; top: 32px; height: 4px; background: var(--line); }
.am-month__line i { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(var(--p, 1)); }
@media (max-width: 860px) { .am-month { grid-template-columns: 1fr 1fr; row-gap: 40px; } .am-month__line { display: none; } .am-week { padding-top: 40px; } .am-week__dot { top: 0; } }
@media (max-width: 480px) { .am-month { grid-template-columns: 1fr; } .am-week__media { aspect-ratio: 16 / 10; } }
.am-towns { font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 9vw, 9rem); letter-spacing: -.055em; line-height: 1; }
.am-towns .am-marquee__track { --dur: 30s; }
.am-towns i { display: inline-block; width: .18em; height: .18em; background: var(--magenta); margin: 0 .25em .12em; vertical-align: middle; }
.am-towns--out { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.am-towns--out .am-marquee__track { animation-direction: reverse; }
.am-faq { border-top: 2px solid var(--ink); }
.am-faq details { border-bottom: 1px solid var(--line); }
.am-faq summary { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 0; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 800; font-size: clamp(1.15rem, 1.8vw, 1.6rem); letter-spacing: -.02em; }
.am-faq summary::-webkit-details-marker { display: none; }
.am-faq summary::after { content: "+"; flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--mist); font-family: var(--body); font-weight: 300; font-size: 1.6rem; transition: transform .5s var(--ease-out), background .3s, color .3s; }
.am-faq details[open] summary::after { transform: rotate(45deg); background: var(--magenta); color: #fff; }
.am-faq details p { padding: 0 0 24px; max-width: 60ch; color: var(--mute); }
/* ---------- Pagina: organisaties (donker) ---------- */
.am-theme-dark { background: var(--ink); color: #fff; }
.am-theme-dark .am-eyebrow, .am-theme-dark .am-mute { color: rgba(255,255,255,.62); }
.am-theme-dark .am-btn { --bg: #fff; --fg: var(--ink); }
.am-theme-dark .am-btn:hover { --fg: #fff; }
.am-theme-dark .am-btn--ghost { --bg: transparent; --fg: #fff; box-shadow: inset 0 0 0 2px #fff; }
.am-theme-dark .am-rbw { background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.am-full { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.am-full__media { position: absolute; inset: 0; }
.am-full__media img, .am-full__media video { width: 100%; height: 100%; object-fit: cover; }
.am-full__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,16,.35) 0%, rgba(14,14,16,.05) 35%, rgba(14,14,16,.85) 100%); }
.am-full__in { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(3rem, 7vw, 6rem); display: flex; flex-direction: column; gap: clamp(20px, 3vw, 34px); }
.am-full .am-eyebrow { color: rgba(255,255,255,.75); }
.am-full--org .am-eyebrow::before { content: none; }
.am-full__rec { position: absolute; right: var(--gut-r); top: 100px; z-index: 3; }
.am-full__tc { font-variant-numeric: tabular-nums; }
.am-day { position: relative; display: flex; flex-direction: column; }
.am-day__row { position: relative; display: grid; grid-template-columns: minmax(110px, .32fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: baseline; padding: clamp(18px, 2.4vw, 28px) 0 clamp(18px, 2.4vw, 28px) 34px; border-bottom: 1px solid rgba(255,255,255,.12); }
.am-day__row::before { content: ""; position: absolute; left: 0; top: clamp(26px, 3vw, 38px); width: 12px; height: 12px; background: rgba(255,255,255,.25); transition: background .4s, transform .4s var(--ease-out); }
.am-day__row.is-live::before { background: #ff3b3b; transform: scale(1.3); }
.am-day__time { font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.8rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.am-day__t { font-family: var(--display); font-weight: 800; font-size: clamp(1.1rem, 1.6vw, 1.5rem); }
.am-day__s { color: rgba(255,255,255,.65); }
.am-day__bar { position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.1); }
.am-day__bar i { display: block; width: 100%; height: 100%; background: var(--grad); transform-origin: top; transform: scaleY(0); }
@media (max-width: 760px) { .am-day__row { grid-template-columns: 1fr; gap: 4px; } }
.am-redact { position: relative; }
.am-redact__lines { display: flex; flex-direction: column; gap: clamp(8px, 1vw, 14px); font-family: var(--display); font-weight: 900; font-size: clamp(1.9rem, 5vw, 4.8rem); letter-spacing: -.045em; line-height: 1.02; }
.am-redact__lines span { position: relative; display: inline; }
.am-bar { position: relative; display: inline-block; color: transparent; white-space: nowrap; user-select: none; }
.am-bar::after { content: ""; position: absolute; left: -.05em; right: -.05em; top: .14em; bottom: .06em; background: var(--grad); background-size: 200% 100%; animation: am-shift 6s ease-in-out infinite alternate; transform-origin: left; transform: scaleX(var(--s, 1)); transition: transform 1.1s var(--ease-out); }
.am-redact__note { margin-top: clamp(24px, 3vw, 40px); max-width: 52ch; font-size: var(--fs-lead); font-weight: 300; }
.am-stamp { position: absolute; right: 2%; top: -10px; padding: 10px 16px; border: 3px solid #ff3b3b; color: #ff3b3b; font-family: var(--display); font-weight: 900; font-size: clamp(.9rem, 1.4vw, 1.2rem); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-8deg); }
.am-gear { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.am-gear > * { min-width: 0; }
.am-gear .g-a { grid-column: 1 / span 7; aspect-ratio: 16 / 10; }
.am-gear .g-b { grid-column: 8 / span 5; aspect-ratio: 4 / 5; margin-top: 18%; }
.am-gear .g-c { grid-column: 2 / span 4; aspect-ratio: 4 / 5; margin-top: -14%; }
.am-gear .g-d { grid-column: 6 / span 6; aspect-ratio: 16 / 10; }
@media (max-width: 700px) { .am-gear .g-a, .am-gear .g-d { grid-column: 1 / -1; } .am-gear .g-b, .am-gear .g-c { grid-column: span 6; margin-top: 0; } }
.am-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.am-step { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; border: 1px solid rgba(255,255,255,.14); min-height: 280px; overflow: hidden; }
.am-step__n { font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 5vw, 5rem); letter-spacing: -.05em; line-height: .9; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.6); }
.am-step__t { font-family: var(--display); font-weight: 800; font-size: 1.4rem; margin-top: auto; }
.am-step p { color: rgba(255,255,255,.7); font-size: .95rem; }
.am-step::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out); }
.am-step.is-in::after { transform: scaleX(1); }
@media (max-width: 1000px) { .am-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .am-steps { grid-template-columns: 1fr; } .am-step { min-height: 0; } }
/* ---------- Pagina: verhalen ---------- */
.am-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.am-filter button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font: 600 .92rem/1 var(--body); cursor: pointer; transition: background .3s, color .3s; }
.am-filter button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.am-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px) clamp(14px, 2vw, 28px); }
.am-grid > * { min-width: 0; }
.am-grid .am-story-card { width: auto; }
.am-grid .s-1 { grid-column: 1 / span 7; }
.am-grid .s-2 { grid-column: 9 / span 4; margin-top: 30%; }
.am-grid .s-3 { grid-column: 2 / span 5; }
.am-grid .s-4 { grid-column: 7 / span 6; margin-top: 12%; }
.am-grid .s-5 { grid-column: 1 / span 5; }
.am-grid .s-6 { grid-column: 7 / span 6; margin-top: 18%; }
.am-grid .s-1 .am-story-card__media, .am-grid .s-4 .am-story-card__media, .am-grid .s-6 .am-story-card__media { aspect-ratio: 16 / 11; }
.am-grid .is-hidden { display: none; }
@media (max-width: 760px) { .am-grid > * { grid-column: 1 / -1 !important; margin-top: 0 !important; } }
.am-type-visual { position: relative; display: grid; place-items: center; width: 100%; height: 100%; background: var(--ink); color: #fff; overflow: hidden; }
.am-type-visual b { position: relative; z-index: 2; font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 6vw, 6rem); letter-spacing: -.055em; line-height: .9; text-align: center; padding: 0 8%; }
.am-type-visual .am-light { opacity: .55; }
/* ---------- Pagina: story-detail ---------- */
.am-story-hero .am-full__in { gap: 18px; }
.am-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.am-facts div { padding: 18px 18px 18px 0; border-bottom: 1px solid var(--line); }
.am-facts dt { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.am-facts dd { margin: 6px 0 0; font-weight: 600; }
@media (max-width: 760px) { .am-facts { grid-template-columns: 1fr 1fr; } }
.am-question { font-family: var(--display); font-weight: 900; font-size: clamp(1.9rem, 4.8vw, 4.6rem); line-height: 1.02; letter-spacing: -.045em; max-width: 22ch; }
.am-mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.am-mosaic > * { min-width: 0; }
.am-mosaic .m-a { grid-column: 1 / span 8; aspect-ratio: 16 / 10; }
.am-mosaic .m-b { grid-column: 9 / span 4; aspect-ratio: 4 / 5; }
.am-mosaic .m-c { grid-column: 3 / span 5; aspect-ratio: 4 / 3; }
.am-mosaic .m-d { grid-column: 8 / span 5; aspect-ratio: 4 / 3; margin-top: 12%; }
@media (max-width: 700px) { .am-mosaic > * { grid-column: 1 / -1 !important; margin: 0 !important; } }
.am-ticks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.am-ticks li { position: relative; padding: 22px 22px 22px 56px; background: var(--mist); font-weight: 600; }
.am-ticks li::before { content: ""; position: absolute; left: 22px; top: 27px; width: 14px; height: 14px; background: var(--magenta); }
.am-next { position: relative; display: block; overflow: hidden; color: #fff; background: var(--ink); text-decoration: none; }
.am-next__media { position: absolute; inset: 0; opacity: .45; transition: opacity .7s, transform 1.2s var(--ease-out); }
.am-next:hover .am-next__media { opacity: .7; transform: scale(1.04); }
.am-next__in { position: relative; z-index: 2; padding-block: clamp(5rem, 12vw, 10rem); display: flex; flex-direction: column; gap: 14px; }
/* ---------- Pagina: over ons ---------- */
.am-about-hero { min-height: 100svh; display: flex; align-items: center; padding-top: 110px; overflow: hidden; }
.am-trio { position: relative; height: min(70vh, 700px); }
.am-trio > * { position: absolute; }
.am-trio .t-tom { left: 0; bottom: 0; width: 38%; aspect-ratio: 5 / 7; background: #fff; }
.am-trio .t-tom img { object-fit: contain; object-position: bottom; }
.am-trio .t-dorien { left: 34%; top: 0; width: 36%; aspect-ratio: 4 / 5; z-index: 2; }
.am-trio .t-fonz { right: 0; bottom: 6%; width: 30%; aspect-ratio: 1; z-index: 3; }
@media (max-width: 900px) { .am-trio { height: 110vw; max-height: 560px; } }
.am-promises { display: flex; flex-direction: column; }
.am-promise { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: clamp(14px, 2vw, 24px) 0; border-bottom: 1px solid var(--line); }
.am-promise b { font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 7vw, 7rem); letter-spacing: -.055em; line-height: .95; }
.am-promise:hover b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 760px) { .am-promise { grid-template-columns: 1fr; gap: 6px; } }
/* ---------- Pagina: contact ---------- */
.am-contact { min-height: 100svh; padding-top: 120px; }
.am-contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 100px); align-items: start; }
.am-contact__aside { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 26px; }
.am-contact__light { position: relative; aspect-ratio: 16 / 9; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
.am-contact__big { font-family: var(--display); font-weight: 900; font-size: clamp(1.4rem, 2.4vw, 2.2rem); letter-spacing: -.03em; text-decoration: none; }
.am-contact__big:hover { color: var(--magenta); }
@media (max-width: 900px) { .am-contact__grid { grid-template-columns: 1fr; } .am-contact__aside { position: static; } }
.am-form { display: flex; flex-direction: column; gap: 26px; }
.am-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.am-field { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 600; }
.am-field--wide { grid-column: 1 / -1; }
.am-field input, .am-field textarea { width: 100%; padding: 16px 0 12px; border: 0; border-bottom: 2px solid var(--ink); background: transparent; font: 400 1.15rem/1.4 var(--body); color: var(--ink); border-radius: 0; transition: border-color .3s; }
.am-field input:focus, .am-field textarea:focus { outline: none; border-color: var(--magenta); }
.am-field textarea { resize: vertical; min-height: 120px; }
.am-field.is-bad input { border-color: #c4122f; }
.am-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; opacity: 0 !important; pointer-events: none !important; }
.am-form__note { font-size: .85rem; color: var(--mute); }
.am-form__error { padding: 14px 16px; background: #fde8ec; color: #8a0f25; font-weight: 600; }
.am-form__done { display: flex; flex-direction: column; gap: 12px; padding: clamp(28px, 4vw, 48px); background: var(--ink); color: #fff; }
.am-form__done-title { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.04em; line-height: 1; }
@media (max-width: 600px) { .am-form__grid { grid-template-columns: 1fr; } }
/* 404 */
.am-404 { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 26px; padding: 140px var(--gut-r) 120px var(--gut); overflow: hidden; }
.am-404__num { font-family: var(--display); font-weight: 900; font-size: clamp(7rem, 30vw, 26rem); line-height: .8; letter-spacing: -.07em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.am-404__line { position: absolute; left: 0; bottom: 0; width: 100%; height: 30vh; }
/* Privacy en lange tekst */
.am-prose { max-width: 70ch; display: flex; flex-direction: column; gap: 18px; font-size: 1.05rem; }
.am-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin-top: 24px; letter-spacing: -.03em; }
.am-prose a { color: var(--magenta); }
/* Hulpklassen */
.am-mt-s { margin-top: clamp(16px, 2vw, 24px); }
.am-mt-m { margin-top: clamp(28px, 4vw, 56px); }
.am-mt-l { margin-top: clamp(48px, 7vw, 110px); }
.am-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; }
.am-head > :first-child { display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
.am-bg-mist { background: var(--mist); }
.am-bg-ink { background: var(--ink); color: #fff; }
.am-bg-ink .am-eyebrow { color: rgba(255,255,255,.62); }
.am-bg-ink .am-btn { --bg: #fff; --fg: var(--ink); }
.am-bg-ink .am-btn:hover { --fg: #fff; }
.am-center { text-align: center; align-items: center; margin-inline: auto; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
.js [data-reveal], .js [data-wipe], .js .am-cine__word { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.am-cine { height: auto; }
.am-cine__sticky { position: relative; height: auto; padding-block: 120px; }
.am-cine__media { clip-path: none; }
.am-cine__words { gap: 60px; }
.am-cine__word { grid-area: auto; }
.am-intro { display: none !important; }
}
/* aanvullingen */
.am-marquee__track > * { white-space: nowrap; flex: none; }
.am-footer__marquee { overflow: hidden; white-space: nowrap; }
.am-cta__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14,14,16,.62) 0%, rgba(14,14,16,.28) 45%, rgba(14,14,16,0) 75%); }
.am-cta__bg { z-index: 0; }
@media (max-width: 560px) { .am-cards[style*="--cols:4"] { --cols: 2 !important; gap: 10px; } .am-cards[style*="--cols:4"] .am-card { padding: 16px; } .am-cards[style*="--cols:4"] .am-card__p b { font-size: 1.7rem; } }
@media (max-width: 600px) { :root { --fs-hero: clamp(3.3rem, 14.2vw, 5rem); } }
.am-rbw--split { background: none !important; color: inherit !important; animation: none !important; }
.am-split-word.am-rbw { display: inline-block !important; }
.am-hero { justify-content: center; }
.am-hero--biz, .am-about-hero { overflow: hidden; }
@media (max-width: 480px) {
.am-month { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-right: calc(-1 * var(--gut-r)); padding-right: var(--gut-r); scrollbar-width: none; }
.am-month::-webkit-scrollbar { display: none; }
.am-week { flex: 0 0 78vw; scroll-snap-align: start; }
.am-week__media { aspect-ratio: 4 / 5; }
}
.am-question { font-size: clamp(1.8rem, 3.8vw, 3.8rem); max-width: 20ch; }
.am-trio { height: min(78vh, 760px); }
.am-trio .t-tom { width: 46%; left: -2%; }
.am-trio .t-dorien { left: 30%; width: 44%; }
.am-trio .t-fonz { width: 36%; right: -2%; bottom: 2%; }
.am-about-hero .am-hero__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
@media (max-width: 900px) { .am-about-hero .am-hero__grid { grid-template-columns: 1fr; } }
.am-list { border: 0 !important; border-top: 1px solid currentColor !important; }
.am-theme-dark .am-list { border-top-color: rgba(255,255,255,.3) !important; }
.am-cine__word b { font-size: min(19vw, calc(158vw / var(--n, 8)), 22rem); }
.am-reels { align-items: flex-start; }
.am-reel { flex: none; margin: 0; display: flex; flex-direction: column; gap: 14px; width: clamp(200px, 21vw, 300px); }
.am-reel:nth-child(even) { margin-top: 70px; }
.am-phone--flat { position: relative; width: 100%; left: auto !important; top: auto !important; transform: none !important; }
.am-reel figcaption { display: flex; flex-direction: column; gap: 2px; }
.am-reel figcaption b { font-family: var(--display); font-weight: 900; font-size: 1.3rem; letter-spacing: -.02em; }
.am-reel figcaption span { color: var(--magenta); font-weight: 600; }
@media (max-width: 760px) { .am-reel { width: 62vw; scroll-snap-align: start; } .am-reel:nth-child(even) { margin-top: 0; } }
.am-hero__reel > .am-media, .am-hero__frame > .am-media, .am-band__float > .am-media, .am-trio > div > .am-media { position: absolute; inset: 0; width: 100%; height: 100%; }
.am-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.am-media[data-parallax] > video { top: -9%; height: 118%; }
.am-media { min-height: 1px; }
.am-hero__reel .am-media__tag { top: 14px; bottom: auto; }
@media (min-width: 901px) {
.am-hero > .am-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.am-hero__stage { height: min(70vh, 720px); }
.am-hero__reel { width: 46%; right: 6%; }
.am-hero__frame { width: 72%; top: 50%; }
}
@media (min-width: 901px) {
.am-phone { width: clamp(150px, 16.5vw, 250px); }
.am-phone:nth-child(1) { left: 0; }
.am-phone:nth-child(2) { left: 30%; }
.am-phone:nth-child(3) { left: 58%; }
}
.am-clients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 44vw), 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.am-client { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; aspect-ratio: 4 / 3; padding: 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.am-client::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad); opacity: 0; transform: translateY(100%) skewY(-4deg); transition: transform .7s var(--ease-out), opacity .4s; }
.am-client:hover::before { opacity: .12; transform: none; }
.am-client__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 60%; }
.am-client__logo img { max-width: 80%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter .5s, opacity .5s, transform .7s var(--ease-out); }
.am-client:hover .am-client__logo img { filter: none; opacity: 1; transform: scale(1.06); }
.am-client__n { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
/* ===== Review 1 ===== */
/* 1 beloftes */
.am-promise { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.am-promise b { font-size: clamp(2.2rem, 5.6vw, 6rem); overflow-wrap: break-word; overflow-wrap: anywhere; }
/* 2 cinematische woorden: JS past ze in, dit is de veilige basis */
.am-cine__word b { font-size: min(19vw, calc((100vw - 2 * max(20px, 4.5vw)) / (var(--n, 8) * .66)), 22rem); white-space: nowrap; }
.am-cine__media::after { background: linear-gradient(180deg, rgba(14,14,16,.3), rgba(14,14,16,.62)); }
.am-cine__word span { font-weight: 400; text-shadow: 0 1px 14px rgba(0,0,0,.55); }
@media (max-width: 760px) { .am-cine__media img, .am-cine__media video { object-position: 70% 50%; } }
/* 3 about titel */
.am-about-hero .am-hero__title { font-size: clamp(3rem, 7vw, 8.6rem); }
/* 4 reduced motion: horizontale strook scrollbaar */
@media (prefers-reduced-motion: reduce) {
.am-hscroll__pin { overflow: visible; }
.am-hscroll__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); }
.am-story-card, .am-reel { scroll-snap-align: start; }
}
/* 5 poster als vangnet onder video */
.am-media[data-poster] { background-size: cover; background-position: var(--pos, center); }
@media (max-width: 760px) { .am-media[data-poster] { background-position: var(--pos-m, var(--pos, center)); } }
/* 6 donkere hero's: witte header */
.am-theme-hero-dark .am-header:not(.is-solid), .am-theme-dark .am-header:not(.is-solid) { color: #fff; }
.am-theme-hero-dark .am-header:not(.is-solid) .am-header__logo { color: #fff; }
.am-theme-hero-dark .am-header:not(.is-solid) .am-lang, .am-theme-hero-dark .am-header:not(.is-solid) .am-lang a { color: rgba(255,255,255,.75); }
.am-theme-hero-dark .am-header:not(.is-solid) .am-lang [aria-current] { color: #fff; }
.am-theme-hero-dark .am-header:not(.is-solid) .am-btn--sm { --bg: #fff; --fg: var(--ink); }
.am-full__media::before { content: ""; position: absolute; inset: 0 0 auto; height: 180px; z-index: 1; background: linear-gradient(180deg, rgba(14,14,16,.62), transparent); pointer-events: none; }
/* 7 eindblokje van de lijn als echt vierkant */
/* 8 volgende verhaal leesbaar */
.am-next__media { opacity: .5; }
.am-next::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14,14,16,.88), rgba(14,14,16,.25)); }
/* 10 gsm: beeld boven de vouw */
@media (max-width: 900px) {
.am-hero > .am-hero__grid { display: flex; flex-direction: column; gap: 22px; }
.am-hero .am-hero__copy { display: contents; }
.am-hero .am-hero__copy > .am-eyebrow { order: 1; }
.am-hero .am-hero__copy > .am-hero__title { order: 2; }
.am-hero .am-hero__stage { order: 3; height: 74vw; max-height: 520px; }
.am-hero .am-hero__copy > .am-lead { order: 4; }
.am-hero .am-hero__copy > .am-doors { order: 5; }
.am-hero { padding-top: 92px; }
}
@media (max-width: 520px) {
.am-doors { grid-template-columns: 1fr 1fr; gap: 8px; }
.am-door { min-height: 0; padding: 14px 14px 16px; }
.am-door__s { display: none; }
.am-door__t { font-size: 1rem; }
.am-door__arrow { right: 10px; top: 10px; font-size: 1rem; }
}
/* 13 lijn op verhalenpagina lager */
/* 15 pakketten: prijs is de held */
.am-pk .am-card { background: transparent; border-top: 3px solid var(--ink); padding-left: 0; padding-right: 0; box-shadow: none !important; }
.am-pk .am-card--feat { background: var(--ink); border-top-color: var(--magenta); padding-left: 24px; padding-right: 24px; }
.am-pk .am-card__p b { font-size: clamp(3rem, 5vw, 5rem); }
.am-pk .am-card:hover { transform: none; }
/* 16 extra's op gsm als scroller */
@media (max-width: 560px) {
.am-extras { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--gut-r)); padding-right: var(--gut-r); scrollbar-width: none; }
.am-extras::-webkit-scrollbar { display: none; }
.am-extras > .am-card { flex: 0 0 62vw; scroll-snap-align: start; background: var(--white); }
}
/* 18 balk en leesteken samen */
.am-nw { white-space: nowrap; }
/* 19 draaiboek */
.am-day__time { white-space: nowrap; font-size: clamp(1.3rem, 2.6vw, 2.5rem); }
.am-list__t, .am-day__s, .am-day__t, .am-card__t, .am-story-card__t { text-wrap: balance; }
/* 21 maandritme strak */
.am-month { align-items: start; }
/* 22 trio op gsm */
@media (max-width: 900px) {
.am-trio { height: 118vw; max-height: 640px; }
.am-trio .t-tom { width: 52%; left: -2%; bottom: 0; }
.am-trio .t-dorien { left: 36%; width: 54%; top: 0; }
.am-trio .t-fonz { width: 40%; right: 0; bottom: 4%; }
}
.am-adv-sec { margin-top: clamp(40px, 6vw, 80px); }
/* 23 toegankelijkheid */
.am-btn:focus-visible { outline: 2px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 2px var(--magenta); }
.am-marquee:focus-within .am-marquee__track { animation-play-state: paused; }
/* unieke afsluiters */
.am-close { position: relative; overflow: hidden; }
.am-close__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.am-close__media { position: relative; aspect-ratio: 4 / 5; }
.am-close__media > .am-media { position: absolute; inset: 0; }
.am-close__big { font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 9vw, 9.5rem); line-height: .9; letter-spacing: -.055em; }
@media (max-width: 800px) { .am-close__grid { grid-template-columns: 1fr; } .am-close__media { aspect-ratio: 16 / 11; } }
.am-close--tom { background: var(--ink); color: #fff; }
.am-close--tom .am-close__tc { font-family: var(--display); font-weight: 900; font-size: clamp(3.4rem, 13vw, 14rem); letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.35); }
/* mockups */
.am-mock { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: var(--grad); overflow: hidden; }
.am-mock__win { width: 82%; border-radius: 12px; overflow: hidden; box-shadow: var(--am-shadow); background: #fff; transform: rotate(-2deg); transition: transform 1.2s var(--ease-out); }
.am-mock__bar { display: flex; gap: 6px; align-items: center; height: 26px; padding: 0 12px; background: #f1f0f3; }
.am-mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d6d4da; }
.am-mock__win img { display: block; width: 100%; height: auto; }
a:hover .am-mock__win, .am-mock:hover .am-mock__win { transform: rotate(0) scale(1.03); }
/* wereld (organisaties) */
.am-globe { position: relative; width: min(100%, 560px); aspect-ratio: 1; margin-inline: auto; }
.am-globe svg { width: 100%; height: 100%; overflow: visible; }
.am-globe__m { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1; transform-origin: 200px 200px; animation: am-spin 12s linear infinite; }
.am-globe__p { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1; }
@keyframes am-spin { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.am-globe__pin circle { fill: var(--magenta); }
.am-globe__ping { fill: none !important; stroke: var(--g2); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: am-ping 2.4s var(--ease-out) infinite; animation-delay: var(--d, 0s); }
@keyframes am-ping { from { transform: scale(1); opacity: 1; } to { transform: scale(5); opacity: 0; } }
.am-towns--world { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); }
.am-towns--world i { background: var(--g2); }
@media (max-width: 900px) { .am-hero > .am-hero__grid { align-items: stretch; } .am-hero .am-eyebrow { align-self: flex-start; } }
.am-logos__item { height: calc(clamp(30px, 3.4vw, 46px) * var(--h, 1)); }
.am-theme-dark .am-logos__item img { filter: brightness(0) invert(1); opacity: .75; }
.am-client__logo img { filter: none; opacity: 1; max-width: 74%; max-height: 64%; }
.am-client:hover .am-client__logo img { transform: scale(1.08); }
/* device QA: next-story titles never clip, comfortable tap targets */
.am-next__in > *:where(h2, .am-h1, .am-h2, [class*="title"]) { overflow-wrap: break-word; overflow-wrap: anywhere; }
@media (max-width: 760px) {
.am-next__in :where(h2, .am-h1, .am-h2) { font-size: min(10.4vw, 3.4rem) !important; }
.am-link { display: inline-flex; align-items: center; min-height: 44px; }
}
/* large screens: use the room, scale up a touch */
/* brede schermen (feedback 4, punt 5): één maximale inhoudsbreedte, gecentreerd; achtergronden en full-bleed beelden mogen breder */
/* review round 2: layout fixes */
.am-btn, .am-door, .am-form button, .am-next, .am-card { position: relative; z-index: 4; }
.am-day__time { white-space: normal; line-height: 1; }
.am-clients { display: flex; flex-wrap: wrap; justify-content: center; }
.am-client { flex: 0 0 20%; }
@media (max-width: 1100px) { .am-client { flex-basis: 25%; } }
@media (max-width: 760px) {
.am-client { flex-basis: 50%; aspect-ratio: 3 / 2; padding: 18px; }
.am-client__logo img { max-width: 86%; max-height: 80%; }
.am-stamp { position: relative; right: auto; top: auto; display: inline-block; margin-bottom: 14px; transform: rotate(-4deg); }
.am-hero__frame { left: 0; width: 70%; }
.am-hero__reel { right: 0; }
}
@media (max-width: 900px) { .am-phone { width: 34vw; } .am-phone:nth-child(1) { left: 0; } .am-phone:nth-child(2) { left: 33%; } .am-phone:nth-child(3) { left: auto; right: 0; } }
.am-band__float .am-media img, .am-close__media img, .am-contact__light img { object-position: var(--pos, 50% 22%); }
@media (prefers-reduced-motion: reduce) {
.am-footer__marquee { padding-inline: var(--gut) var(--gut-r); }
.am-footer__marquee > .am-marquee__track { animation: none; display: block; padding: 0; }
.am-footer__marquee span:not(:first-child) { display: none; }
.am-footer__marquee span { font-size: clamp(2.6rem, 8vw, 8rem); display: block; }
}
.am-qblock { max-width: 980px; gap: 18px; }
.am-qblock .am-question { max-width: 24ch; }
.am-changed { padding-block: clamp(3rem, 7vw, 6rem); }
.am-changed__t { font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 3.2rem); line-height: 1.05; letter-spacing: -.035em; max-width: 26ch; }
/* Europe map */
.am-map { position: relative; width: 100%; max-width: 760px; margin-inline: auto; }
.am-logos + .am-world { padding-block: clamp(32px, 4vw, 64px); }
.am-map__svg { width: 100%; height: auto; overflow: visible; }
.am-map__land { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.22); stroke-width: .6; }
.am-theme-light .am-map__land, .am-world:not(.am-theme-dark *) .am-map__land { }
.am-map__arc { fill: none; stroke: url(#am-grad); stroke-width: 2.6; stroke-linecap: round; }
.am-map__pin circle { fill: #fff; }
.am-map__ping { fill: none !important; stroke: var(--magenta); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: am-ping 2.4s var(--d, 0s) ease-out infinite; }
.am-map__labels text, .am-map__away text { fill: rgba(255,255,255,.85); font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.am-map__labels text[data-city="Brussels"] { font-size: 22px; fill: #fff; }
.am-map__sq { fill: var(--magenta); }
@keyframes am-ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .am-map__ping { animation: none; opacity: 0; } }
@media (max-width: 760px) { .am-map__labels text, .am-map__away text { font-size: 24px; } .am-map__labels text[data-city="Brussels"] { font-size: 28px; } }
.am-map__land { -webkit-mask-image: radial-gradient(ellipse 60% 58% at 52% 52%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 60% 58% at 52% 52%, #000 55%, transparent 100%); }
.am-qblock .am-question { max-width: 22ch; font-size: clamp(2.1rem, 4.8vw, 4.6rem); line-height: 1; }
.am-changed__t { font-size: clamp(1.9rem, 4.2vw, 3.8rem); max-width: 24ch; }
.am-mosaic img[src*="thruvo-logo-kleur"], .am-mosaic img[src*="announcement-merger"], .am-card img[src*="announcement-merger"], .am-scard img[src*="announcement-merger"] { object-fit: contain !important; background: #fff; padding: 6%; }
.am-map__arc--away { stroke-dasharray: 6 8; opacity: .85; }
/* clients wall: light gamification */
.am-client { perspective: 900px; padding: 0; }
.am-client__card { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; height: 100%; cursor: pointer; transform-style: preserve-3d; transition: transform .7s var(--ease-out); --rx: 0deg; --ry: 0deg; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.am-client__card:focus-visible { outline: 3px solid var(--magenta); outline-offset: -3px; }
.am-client__front, .am-client__back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.am-client__back { transform: rotateY(180deg); background: var(--ink); color: #fff; text-align: center; }
.am-client__back::before { content: ""; position: absolute; inset: 0; background: var(--grad); opacity: .22; }
.am-client__what { position: relative; font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.15; letter-spacing: -.02em; max-width: 16ch; }
.am-client__back .am-sq { position: relative; width: 10px; height: 10px; }
.am-client.is-flipped .am-client__card { transform: rotateY(180deg); }
.am-client__card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.55), transparent 45%); opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light; }
.am-client:hover .am-client__card::after { opacity: 1; }
.am-client.is-seen .am-client__n::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; background: var(--magenta); vertical-align: middle; }
.am-clients__count { margin-top: 18px; text-align: center; font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); min-height: 1.4em; }
.am-clients__count b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.am-clients.is-done .am-client { animation: am-wave .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes am-wave { 0% { transform: none; } 40% { transform: translateY(-10px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
.am-client__card { transition: none; transform: none !important; }
.am-client__back { transform: none; opacity: 0; transition: opacity .3s; }
.am-client.is-flipped .am-client__back { opacity: 1; }
.am-client.is-flipped .am-client__front { opacity: 0; }
.am-clients.is-done .am-client { animation: none; }
}
.am-clients { border: 0 !important; } .am-client { border: 1px solid var(--line) !important; margin: -.5px; }
.am-redact-tile { background: var(--ink); color: #fff; display: flex; align-items: center; }
.am-redact-tile__in { padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; font-family: var(--display); font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.15; }
.am-redact-tile__in p:last-child { font-family: var(--body); font-weight: 400; font-size: 1rem; color: rgba(255,255,255,.75); }
.am-redact-tile .am-stamp { position: static; align-self: flex-start; transform: rotate(-6deg); }
.am-redact-tile .am-bar { display: inline-block; height: .8em; width: 12ch; vertical-align: middle; background: var(--grad); }
.am-contact__who { position: relative; }
.am-contact__who .is-tom { display: none; }
.am-contact__who.is-org .is-tom { display: block; }
.am-contact__who.is-org .is-dorien { display: none; }
.am-contact__tel { font-size: .95rem; color: var(--mute); margin: 0; }
.am-contact__tel a { color: inherit; display: inline-block; padding-block: 12px; }
.am-hero > .am-wrap, .am-contact > .am-wrap, .am-sec > .am-wrap { position: relative; z-index: 2; } .am-hero > .am-line, .am-contact > .am-line { z-index: 1; }
/* play: run of show, video action/cut, Fonz cheese */
.am-play { all: unset; box-sizing: border-box; margin-top: 18px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; min-height: 48px; background: var(--ink); color: #fff; font: 600 .95rem/1 var(--body); cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 0 100%); }
.am-play i { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; transition: all .2s; }
.am-play.is-on i { width: 12px; height: 14px; border: 0; border-left: 4px solid #fff; border-right: 4px solid #fff; box-sizing: border-box; }
.am-play:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.am-day__row { transition: background .35s, opacity .35s; }
.am-day.is-running .am-day__row { opacity: .35; }
.am-day.is-running .am-day__row.is-now { opacity: 1; background: linear-gradient(90deg, rgba(162,33,110,.18), transparent); }
.am-day.is-running .am-day__row.is-done { opacity: .7; }
.am-cheese { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.am-cheese__msg { min-height: 1.4em; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
.am-fonz { position: relative; }
.am-fonz.is-happy .am-media { animation: am-wiggle .7s var(--ease-out); }
@keyframes am-wiggle { 0%,100% { transform: none; } 20% { transform: rotate(-3deg) scale(1.02); } 45% { transform: rotate(3deg) scale(1.03); } 70% { transform: rotate(-1.5deg); } }
.am-cheese__bit { position: absolute; left: 50%; bottom: 18%; width: 54px; height: 40px; opacity: 0; pointer-events: none; z-index: 5;
background: radial-gradient(circle at 30% 60%, #e8a400 0 5px, transparent 6px), radial-gradient(circle at 65% 45%, #e8a400 0 4px, transparent 5px), radial-gradient(circle at 55% 78%, #e8a400 0 3px, transparent 4px), #ffcc33;
clip-path: polygon(0 100%, 100% 100%, 100% 30%); filter: drop-shadow(var(--am-shadow)); }
.am-fonz.is-fed .am-cheese__bit { animation: am-cheese 1s var(--ease-out) forwards; }
@keyframes am-cheese { 0% { opacity: 0; transform: translate(-260%, 120%) rotate(-40deg) scale(.6); } 40% { opacity: 1; } 85% { opacity: 1; transform: translate(-50%, -60%) rotate(8deg) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(.4); } }
@media (prefers-reduced-motion: reduce) { .am-fonz.is-happy .am-media, .am-fonz.is-fed .am-cheese__bit { animation: none; } }
/* reels strip: landscape and square posts between the reels */
.am-reel--wide { width: clamp(300px, 40vw, 600px); }
.am-reel--square { width: clamp(240px, 27vw, 400px); }
.am-reel--wide .am-phone--flat, .am-reel--square .am-phone--flat { aspect-ratio: 16 / 9; border-radius: 22px; padding: 8px; }
.am-reel--square .am-phone--flat { aspect-ratio: 1 / 1; }
.am-reel--wide .am-phone__screen, .am-reel--square .am-phone__screen { border-radius: 15px; }
.am-reel--wide, .am-reel--square { align-self: center; margin-top: 0 !important; }
@media (max-width: 760px) { .am-reel--wide { width: 86vw; } .am-reel--square { width: 72vw; } }
/* livestream day film */
.am-dayfilm { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(32px,6vw,96px); align-items:start; }
.am-dayfilm__sticky { position:sticky; top:clamp(80px,12vh,120px); min-width:0; }
.am-dayfilm__monitor { margin-top:clamp(22px,3vw,38px); padding:10px; background:#09090b; border:1px solid rgba(255,255,255,.16); box-shadow: var(--am-shadow); }
.am-dayfilm__screen { position:relative; overflow:hidden; aspect-ratio:16/9; background:radial-gradient(ellipse at 50% 100%,#29242a,#111114 72%); }
.am-dayfilm__screen::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(8,8,10,.18),transparent 48%,rgba(8,8,10,.38)); }
.am-dayfilm__photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; filter:grayscale(1); transition:opacity .6s var(--ease-out); }
.am-dayfilm__screen.has-photo .am-dayfilm__photo { opacity:.24; }
.am-dayfilm__draw { position:absolute; inset:7%; width:86%; height:86%; overflow:visible; }
.am-dayfilm__scene { opacity:0; }
.am-dayfilm__scene.is-active { opacity:1; }
.am-dayfilm__scene path,.am-dayfilm__scene circle { fill:none; stroke:#fff; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.am-dayfilm__scene .am-dayfilm__accent { stroke:url(#am-dayfilm-grad); }
.am-dayfilm__scene .am-dayfilm__red { fill:#ff343f; stroke:#ff343f; }
.am-dayfilm__scene[data-scene="5"] .am-dayfilm__red { animation:am-dayfilm-onair 1s steps(2,end) infinite; }
.am-dayfilm__scene .am-dayfilm__square { fill:#a2216e; stroke:#a2216e; }
.am-dayfilm__tag { z-index:2; }
.am-dayfilm__screen-count { position:absolute; z-index:2; right:12px; top:12px; color:rgba(255,255,255,.7); font:600 .68rem/1 var(--body); letter-spacing:.12em; }
.am-dayfilm__readout { display:flex; justify-content:space-between; gap:12px; padding:15px 4px 11px; font-variant-numeric:tabular-nums; }
.am-dayfilm__readout > div { display:flex; flex-direction:column; gap:5px; }
.am-dayfilm__readout > div:last-child { text-align:right; }
.am-dayfilm__label { color:rgba(255,255,255,.55); font:600 .62rem/1 var(--body); letter-spacing:.14em; text-transform:uppercase; }
.am-dayfilm__clock { font:900 clamp(1.9rem,4vw,3.1rem)/.95 var(--display); letter-spacing:-.05em; }
.am-dayfilm__timecode { color:#ff4b52; font:700 1rem/1 var(--display); }
.am-dayfilm__progress { position:relative; height:4px; margin:4px 8px 8px 0; background:rgba(255,255,255,.17); }
.am-dayfilm__progress i { display:block; width:100%; height:100%; background:var(--grad); transform:scaleX(0); transform-origin:left; }
.am-dayfilm__progress b { position:absolute; top:50%; right:-5px; width:10px; height:10px; background:var(--magenta); transform:translateY(-50%); }
.am-dayfilm__play { margin-top:16px; }
.am-dayfilm__hint { margin-top:9px; color:rgba(255,255,255,.48); font-size:.78rem; }
.am-dayfilm__list { position:relative; min-width:0; }
.am-dayfilm__list .am-day__row { grid-template-columns:minmax(84px,.25fr) minmax(110px,.58fr) minmax(0,1fr); gap:clamp(12px,2vw,26px); padding-left:36px; }
.am-dayfilm__list .am-day__row.is-live::before { background:var(--magenta); box-shadow: var(--am-shadow); }
.am-dayfilm__list .am-day__row.is-now { opacity:1!important; background:linear-gradient(90deg,rgba(162,33,110,.22),transparent 85%); }
.am-dayfilm__list .am-day__row.is-done { opacity:.62; }
.am-dayfilm__list .am-day__row.is-now .am-day__time { color:#fff; }
.am-dayfilm__list:focus-visible { outline:2px solid var(--magenta); outline-offset:7px; }
@keyframes am-dayfilm-onair { 50% { opacity:.35; } }
@media(max-width:900px) {
.am-dayfilm { grid-template-columns:minmax(0,1fr); gap:26px; }
.am-dayfilm__sticky { position:relative; top:auto; }
.am-dayfilm__monitor { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 14px; margin:0; padding:7px; }
.am-dayfilm__screen { grid-row:span 2; width:min(43vw,220px); min-width:120px; }
.am-dayfilm__readout { align-self:end; flex-direction:column; justify-content:end; padding:5px 4px; }
.am-dayfilm__readout > div:last-child { text-align:left; }
.am-dayfilm__clock { font-size:clamp(1.6rem,7vw,2.3rem); }
.am-dayfilm__progress { grid-column:1/-1; margin:2px 6px 4px 0; }
.am-dayfilm__play { margin-top:10px; }
.am-dayfilm__hint { display:none; }
}
@media(max-width:560px) {
.am-dayfilm { gap:12px; }
.am-dayfilm__screen { width:min(39vw,165px); min-width:112px; }
.am-dayfilm__list .am-day__row { grid-template-columns:74px minmax(0,1fr); gap:5px 12px; padding:16px 0 16px 28px; }
.am-dayfilm__list .am-day__time { grid-row:span 2; font-size:1.15rem; }
.am-dayfilm__list .am-day__t { font-size:1.05rem; }
.am-dayfilm__list .am-day__s { grid-column:2; font-size:.88rem; }
}
@media(prefers-reduced-motion:reduce) {
.am-dayfilm__scene[data-scene="5"] .am-dayfilm__red { animation:none; }
}
/* Fonz cheese game */
.am-fonzgame{--fg-ink:var(--ink,#0e0e10);--fg-magenta:var(--magenta,#a2216e);position:relative;overflow:hidden;padding:clamp(64px,10vw,140px) max(20px,4.5vw);background:#fff;color:var(--fg-ink);font-family:var(--body,"Inter Tight",Arial,sans-serif)}
.am-fonzgame *{box-sizing:border-box}
.am-fonzgame__inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.92fr);gap:clamp(32px,7vw,110px);align-items:center;max-width:1200px;margin:auto}
.am-fonzgame__copy{position:relative;z-index:2}
.am-fonzgame__eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.am-fonzgame__eyebrow span{width:11px;height:11px;background:var(--fg-magenta)}
.am-fonzgame__title{max-width:10ch;margin:0;font:900 clamp(3rem,7.5vw,7.3rem)/.88 var(--display,"Archivo",Arial,sans-serif);letter-spacing:-.055em}
.am-fonzgame__intro{max-width:38ch;margin:24px 0 32px;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.4}
.am-fonzgame__meter{max-width:470px;margin:0 0 28px}
.am-fonzgame__meter-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.am-fonzgame__count{white-space:nowrap}
.am-fonzgame__meter-track{position:relative;height:9px;margin-right:12px;background:#eee;clip-path:polygon(0 0,100% 0,99% 100%,0 100%)}
.am-fonzgame__meter-fill{display:block;width:0;height:100%;background:var(--grad,linear-gradient(100deg,#ffa25c,#f5507a,#d43c9f,#9b4ad8,#4f9bf5));transition:width .55s cubic-bezier(.16,1,.3,1)}
.am-fonzgame__meter-track i{position:absolute;top:0;right:-10px;width:10px;height:9px;background:var(--fg-magenta)}
.am-fonzgame__controls{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.am-fonzgame__cheese{display:inline-flex;align-items:center;gap:11px;min-height:58px;padding:12px 18px 12px 12px;border:0;background:var(--fg-ink);color:#fff;font:700 1rem/1.3 var(--body,"Inter Tight",Arial,sans-serif);cursor:pointer;transition:background-color .2s}
.am-fonzgame__cheese:hover{background:var(--fg-magenta)}
.am-fonzgame__cheese:active{background:var(--fg-ink)}
.am-fonzgame__cheese [data-fonzgame-text]{display:block;min-width:0}
.am-fonzgame__cheese svg{width:40px;height:34px;flex:none}
.am-fonzgame__cheese:focus-visible,.am-fonzgame__target:focus-visible,.am-fonzgame__contact:focus-visible{outline:3px solid var(--fg-magenta);outline-offset:5px}
.am-fonzgame__hint{max-width:30ch;margin:0;color:#5d5d66;font-size:.83rem;line-height:1.35}
.am-fonzgame__status{min-height:1.5em;max-width:42ch;margin:17px 0 0;font-weight:700;line-height:1.3}
.am-fonzgame__contact{display:inline-flex;align-items:center;gap:14px;margin-top:21px;padding-bottom:5px;border-bottom:2px solid var(--fg-ink);font-weight:700;text-decoration:none}
.am-fonzgame__contact i{width:11px;height:11px;background:var(--fg-magenta);transition:transform .2s}
.am-fonzgame__contact:hover i{transform:rotate(45deg)}
.am-fonzgame__contact-hint{margin:8px 0 0;color:#5d5d66;font-size:.82rem}
.am-fonzgame__stage{position:relative;min-width:0;padding:clamp(18px,4vw,48px) 0}
.am-fonzgame__target{position:relative;z-index:1;display:block;width:min(100%,490px);margin:auto;cursor:crosshair}
.am-fonzgame__photo{position:relative;overflow:hidden;aspect-ratio:1;background:#f5f4f6;clip-path:polygon(0 3%,98% 0,100% 96%,3% 100%)}
.am-fonzgame__photo img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .5s cubic-bezier(.16,1,.3,1);will-change:transform}
.am-fonzgame__target:hover .am-fonzgame__photo img{transform:scale(1.055)}
.am-fonzgame__nose{position:absolute;top:50%;left:50%;width:12px;height:8px;border-radius:50%;background:#171518;opacity:0;transform:translate(-50%,-50%) scale(.2);pointer-events:none}
.am-fonzgame__bubble{position:absolute;z-index:3;top:0;right:-2%;max-width:220px;padding:13px 16px;background:#fff;border:2px solid var(--fg-ink);font:800 clamp(.95rem,1.8vw,1.2rem)/1.05 var(--display,"Archivo",Arial,sans-serif);box-shadow: var(--am-shadow);transform:rotate(3deg);opacity:0}
.am-fonzgame__bubble:empty{display:none}
.am-fonzgame__target-label{display:block;margin-top:13px;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-align:right;text-transform:uppercase}
.am-fonzgame__stamp{position:absolute;z-index:2;top:10%;left:-9%;width:86px;height:86px;display:grid;place-content:center;border:3px solid var(--fg-magenta);border-radius:50%;color:var(--fg-magenta);font:900 .72rem/1.05 var(--display,"Archivo",Arial,sans-serif);text-align:center;transform:rotate(-14deg)}
.am-fonzgame__stamp span{position:absolute;right:7px;bottom:10px;width:11px;height:11px;background:var(--fg-magenta)}
.am-fonzgame__confetti{position:absolute;inset:0;z-index:4;pointer-events:none}
.am-fonzgame__crumb{position:absolute;width:10px;height:10px;background:#ffd24a;clip-path:polygon(0 0,100% 18%,65% 100%);pointer-events:none}
.am-fonzgame.is-fed .am-fonzgame__photo img{animation:am-fonzgame-nom .65s cubic-bezier(.16,1,.3,1)}
.am-fonzgame.is-fed .am-fonzgame__nose{animation:am-fonzgame-nose .65s ease-out}
.am-fonzgame.is-speaking .am-fonzgame__bubble{animation:am-fonzgame-pop .35s cubic-bezier(.16,1,.3,1) forwards}
.am-fonzgame.is-finale .am-fonzgame__photo img{animation:am-fonzgame-approve .85s cubic-bezier(.16,1,.3,1)}
.am-fonzgame.is-finale .am-fonzgame__stamp{animation:am-fonzgame-stamp .45s cubic-bezier(.16,1,.3,1)}
@keyframes am-fonzgame-nom{20%{transform:scale(1.07) rotate(-2deg)}45%{transform:scale(1.08) rotate(2deg)}70%{transform:scale(1.04) rotate(-1deg)}}
@keyframes am-fonzgame-nose{35%{opacity:1;transform:translate(-50%,-50%) scale(3)}}
@keyframes am-fonzgame-pop{to{opacity:1;transform:rotate(3deg) translateY(-8px)}}
@keyframes am-fonzgame-approve{25%{transform:scale(1.1) rotate(2deg)}50%{transform:scale(1.08) rotate(-2deg)}75%{transform:scale(1.12) rotate(1deg)}}
@keyframes am-fonzgame-stamp{to{transform:rotate(6deg) scale(1.18)}}
@media(max-width:760px){.am-fonzgame{padding-inline:max(20px,5vw)}.am-fonzgame__inner{grid-template-columns:1fr;gap:34px}.am-fonzgame__title{max-width:11ch;font-size:clamp(3rem,13vw,5.5rem)}.am-fonzgame__intro{margin:18px 0 26px}.am-fonzgame__stage{width:min(100%,520px);margin:auto;padding:16px 0 0}.am-fonzgame__stamp{left:-1%;top:7%;width:68px;height:68px;font-size:.6rem}.am-fonzgame__bubble{right:-1%;max-width:min(48%,190px);font-size:.95rem}.am-fonzgame__target-label{font-size:.66rem}}
@media(max-width:390px){.am-fonzgame__controls{align-items:flex-start;flex-direction:column}.am-fonzgame__hint{max-width:34ch}.am-fonzgame__stamp{left:0}.am-fonzgame__bubble{right:0}}
@media(prefers-reduced-motion:reduce){.am-fonzgame *, .am-fonzgame *::before,.am-fonzgame *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}.am-fonzgame.is-fed .am-fonzgame__photo img,.am-fonzgame.is-finale .am-fonzgame__photo img{transform:scale(1.04)}.am-fonzgame.is-speaking .am-fonzgame__bubble{opacity:1;transform:none}}
.am-dayfilm__play { background: #fff; color: var(--ink); }
.am-dayfilm__play i { border-color: transparent transparent transparent var(--ink); }
.am-dayfilm__play.is-on i { border-left-color: var(--ink); border-right-color: var(--ink); }
/* sketch visuals (internal formats: nothing to show, so we draw it) */
.am-sketch { position: relative; overflow: hidden; background: var(--ink); display: grid; place-items: center; }
.am-sketch .am-light { opacity: .32; }
.am-sketch__svg { position: relative; z-index: 1; width: 82%; height: 82%; overflow: visible; }
.am-sketch--hero .am-sketch__svg { width: min(78%, 1100px); height: 74%; margin-top: -4%; }
.am-sketch__g path, .am-sketch__g circle { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: am-sketch-draw 2.6s var(--ease-out, ease-out) .3s forwards; }
.am-sketch--hero .am-sketch__g path, .am-sketch--hero .am-sketch__g circle { stroke-width: 2.6; }
.am-sketch__g .am-dayfilm__accent { stroke: url(#am-dayfilm-grad); animation-delay: 1.2s; }
.am-sketch__g .am-dayfilm__red { fill: #ff343f; stroke: #ff343f; animation: am-sketch-draw 1s ease-out 1.6s forwards, am-dayfilm-onair 1s steps(2, end) 2.8s infinite; }
.am-sketch__g .am-dayfilm__square { fill: #a2216e; stroke: #a2216e; }
@keyframes am-sketch-draw { to { stroke-dashoffset: 0; } }
@keyframes am-dayfilm-onair { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .am-sketch__g path, .am-sketch__g circle { animation: none; stroke-dashoffset: 0; } }
.am-sketch--hero { place-items: start end; }
.am-sketch--hero .am-sketch__svg { width: min(54%, 860px); height: auto; aspect-ratio: 2 / 1; margin: clamp(90px, 13vh, 150px) 4% 0 0; }
@media (max-width: 760px) { .am-sketch--hero { place-items: start center; } .am-sketch--hero .am-sketch__svg { width: 92%; margin: 96px 0 0; } }
.am-media > picture { display: block; width: 100%; height: 100%; }
@media (max-width: 760px) { .am-media > picture img { object-position: var(--pos-m, 50% 0) !important; } }
/* story numbers band */
.am-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: clamp(24px, 3vw, 48px); margin: 0; color: #fff; }
.am-nums > div { border-top: 1px solid rgba(255,255,255,.2); padding-top: 18px; }
.am-nums dt { font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 7vw, 6.5rem); letter-spacing: -.05em; line-height: .9; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.am-nums dd { margin: 10px 0 0; color: rgba(255,255,255,.75); font-size: var(--fs-lead, 1.15rem); max-width: 22ch; }
/* QA batch: hero sizes, contrast, focus, tap targets */
.am-home-hero .am-hero__title, .am-hero--home .am-hero__title { font-size: min(var(--fs-hero, 9rem), 8.5vw, 9rem); }
@media (max-width: 480px) { .am-hero__title { font-size: clamp(2.3rem, 11.4vw, 3.6rem); overflow-wrap: break-word; hyphens: manual; } }
.am-full__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(14,14,16,.82) 0, rgba(14,14,16,.5) 45%, rgba(14,14,16,.2) 100%); }
.am-story-hero .am-eyebrow, .am-full .am-eyebrow { color: #fff !important; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.am-field input:focus-visible, .am-field textarea:focus-visible { outline: 3px solid var(--magenta); outline-offset: 4px; border-color: var(--magenta); }
.am-form__error--server { margin: 0 0 18px; padding: 14px 18px; background: #fdecef; color: #8a1a2c; font-weight: 600; }
.am-nav a { padding-block: 12px; }
.am-btn--sm { min-height: 44px; }
.am-lang a, .am-lang span[aria-current] { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
.am-header__logo { display: inline-flex; align-items: center; min-height: 44px; }
.am-link { display: inline-flex; align-items: center; min-height: 44px; }
.am-footer li a, .am-footer p a, .am-contact__big, .am-menu__lang a { display: inline-block; padding-block: 10px; }
.am-hscroll__track, .am-reels, .am-weeks { scrollbar-width: thin; }
.am-footer address, .am-footer__addr { overflow-wrap: normal; }
.am-badge, .am-price__badge { background: #8a1a5c !important; }
/* clients wall: the hopping square */
.am-clients__play { position: relative; }
.am-clients__hop { position: absolute; left: 0; top: 0; z-index: 5; width: 14px; height: 14px; background: var(--magenta); pointer-events: none; opacity: 0; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; }
.am-clients__hop.is-on { opacity: 1; }
.am-clients__hop.is-hop { animation: am-hop-spin .7s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes am-hop-spin { 0% { rotate: -180deg; scale: .4; } 60% { scale: 1.5; } 100% { rotate: 0deg; scale: 1; } }
.am-client.is-target .am-client__card { box-shadow: inset 0 0 0 2px var(--magenta); }
.am-client.is-seen .am-client__n::after { content: " ✓"; color: var(--magenta); }
.am-clients__meter { height: 4px; margin: 22px auto 0; max-width: 420px; background: var(--line, #e6e5ea); overflow: hidden; }
.am-clients__meter i { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.am-clients__end { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 22px; }
.am-clients__end[hidden] { display: none; }
.am-clients__again { all: unset; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }
.am-clients__again:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .am-clients__hop { transition: none; } .am-clients__hop.is-hop { animation: none; } }
.am-clients__hop.is-on { box-shadow: 0 0 0 6px rgba(162,33,110,.16); }
.am-hero__note { margin-top: 18px; font-size: .95rem; color: var(--mute); }
.am-hero__note a { color: var(--ink); font-weight: 600; white-space: nowrap; display: inline-flex; min-height: 44px; align-items: center; }
.am-hero__note--dark, .am-hero__note--dark a { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
@media (max-width: 400px) { .am-sec .am-question, .am-sec .am-changed__t { font-size: clamp(1.45rem, 6.9vw, 2.2rem) !important; } }
.am-redact__lines .am-bar { max-width: 70vw; display: inline-block; overflow: hidden; vertical-align: bottom; }
.am-fonzgame__contact { min-height: 44px; }
/* Fonz game on phones: Fonz first, controls under him */
@media (max-width: 760px) {
.am-fonzgame { padding-block: clamp(48px, 12vw, 80px); }
.am-fonzgame__inner { display: flex; flex-direction: column; gap: 0; }
.am-fonzgame__copy { display: contents; }
.am-fonzgame__eyebrow { order: 1; }
.am-fonzgame__title { order: 2; }
.am-fonzgame__intro { order: 3; margin-bottom: 18px; }
.am-fonzgame__stage { order: 4; width: 100%; max-width: 420px; margin: 0 auto 18px; padding: 8px 0 0; }
.am-fonzgame__meter { order: 5; width: 100%; margin-bottom: 16px; }
.am-fonzgame__controls { order: 6; }
.am-fonzgame__status { order: 7; margin-top: 12px; }
.am-fonzgame__contact { order: 8; }
.am-fonzgame__contact-hint { order: 9; }
.am-fonzgame__target-label { display: none; }
.am-fonzgame__cheese { width: 100%; justify-content: center; }
}
@media (max-width: 760px) {
.am-fonzgame__inner { align-items: stretch; text-align: left; }
.am-fonzgame__status { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
}
/* page transitions: native cross-document view transitions (Chrome, Edge, Safari 18.2+) */
@view-transition { navigation: auto; }
/* header: zie het blok feedback 13 (fonts) onderaan */
::view-transition-old(root) { animation: am-vt-out .38s cubic-bezier(.65, 0, .35, 1) both; }
::view-transition-new(root) { animation: am-vt-in .62s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes am-vt-out { to { opacity: 0; transform: translateY(-2.5vh) scale(.985); } }
@keyframes am-vt-in { from { opacity: 0; transform: translateY(4vh); clip-path: polygon(0 8vh, 100% 0, 100% 100%, 0 100%); } to { opacity: 1; transform: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
/* sticky call-back bar on phones */
.am-stickycta { display: none; }
@media (max-width: 1024px) {
.am-stickycta { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 120; gap: 8px; transform: translateY(140%); transition: transform .45s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.am-stickycta.is-on { transform: none; }
.am-stickycta__main { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 52px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 0 100%); box-shadow: var(--am-shadow); }
.am-stickycta__tel { width: 52px; display: grid; place-items: center; background: var(--magenta); color: #fff; }
html.am-menu-open .am-stickycta { transform: translateY(140%); }
}
/* story call to action */
.am-storycta__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.am-storycta__media { aspect-ratio: 4 / 5; max-width: 420px; }
.am-storycta .am-row { align-items: center; gap: 22px; flex-wrap: wrap; }
.am-storycta__x { margin-top: 18px; }
@media (max-width: 760px) { .am-storycta__in { grid-template-columns: 1fr; } .am-storycta__media { aspect-ratio: 16 / 10; max-width: none; } }
.am-card__cta { margin-top: 18px; align-self: flex-start; }
.am-storycta__media img { object-position: 50% 18%; }
/* motion on stills: slow drift on story heroes, cards and mosaic photos; the website mock scrolls */
@media (prefers-reduced-motion: no-preference) {
.am-story-hero .am-media > img, .am-story-hero .am-media picture img { animation: am-drift-in 18s ease-in-out infinite alternate; transform-origin: 60% 40%; }
.am-mosaic .am-media > img { animation: am-drift-in 16s ease-in-out infinite alternate; }
.am-mosaic .am-media:nth-child(even) > img { animation-direction: alternate-reverse; transform-origin: 30% 60%; }
.am-story-card__media > img { transition: transform 1.2s var(--ease-out, ease); }
.am-story-card:hover .am-story-card__media > img { transform: scale(1.06); }
.am-mock__win { overflow: hidden; }
.am-story-hero .am-mock__win, .am-mosaic .am-mock__win { animation: am-mock-float 9s ease-in-out infinite alternate; }
}
@keyframes am-drift-in { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }
@keyframes am-mock-float { from { transform: rotate(-2deg) translateY(0); } to { transform: rotate(.6deg) translateY(-14px) scale(1.02); } }
/* clients wall: equal optical logo size */
.am-clients .am-client__logo img { max-height: calc(clamp(40px, 4.2vw, 60px) * var(--s, 1)) !important; max-width: min(84%, calc(clamp(120px, 12vw, 180px) * var(--s, 1))) !important; }
/* the feed: an Instagram-like grid of real reels and posts */
.am-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(3px, .5vw, 8px); max-width: 980px; margin-inline: auto; }
.am-feed__t { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #111; }
.am-feed__t video, .am-feed__t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out, ease); }
.am-feed__t:hover video, .am-feed__t:hover img { transform: scale(1.05); }
.am-feed__t figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 10px; display: flex; flex-direction: column; gap: 2px; color: #fff; background: linear-gradient(to top, rgba(14,14,16,.78), transparent); font-size: .82rem; }
.am-feed__t figcaption b { font-weight: 700; }
.am-feed__t figcaption span { opacity: .85; }
.am-feed__reel { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 5px; }
.am-feed__reel::after { content: ""; position: absolute; left: 5px; top: 3px; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent #fff; }
@media (max-width: 760px) { .am-feed__t figcaption { padding: 18px 6px 6px; font-size: .62rem; } .am-feed__t figcaption span { display: none; } .am-feed__reel { width: 14px; height: 14px; top: 6px; right: 6px; } .am-feed__reel::after { left: 3px; top: 2px; } }
/* focal points per image: --pos (all sizes), --pos-m (phones) */
.am-media img, .am-media video { object-position: var(--pos, 50% 50%); }
@media (max-width: 760px) { .am-media img, .am-media video { object-position: var(--pos-m, var(--pos, 50% 50%)) !important; } }
/* sticky bar readable on dark sections too */
@media (max-width: 1024px) { .am-stickycta__main { box-shadow: 0 0 0 1px rgba(255,255,255,.28), var(--am-shadow); } }
/* Fonz looks up when cheese is coming */
.am-fonzgame.is-hungry .am-fonzgame__photo img { transform: scale(1.06) translateY(-1%); transition: transform .4s var(--ease-out, ease); }
/* wereldkaart */
.am-map__svg--world .am-map__land { -webkit-mask-image: none; mask-image: none; }
.am-map__svg--world .am-map__labels text { font-size: 19px; paint-order: stroke; stroke: var(--ink); stroke-width: 5px; stroke-linejoin: round; }
.am-map__svg--world .am-map__labels text[data-city="Brussels"] { font-size: 24px; }
.am-map__svg--world .am-map__arc { stroke-width: 2.2; }
@media (max-width: 560px) {
.am-map__svg--world .am-map__labels text { font-size: 26px; stroke-width: 6px; }
.am-map__svg--world .am-map__labels text[data-city="Brussels"] { font-size: 32px; }
.am-map__svg--world .am-map__arc { stroke-width: 3; }
}
/* bewijs per format */
.am-list__proof { display: inline-flex; align-items: center; gap: .4em; margin-top: .6em; font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--magenta, #921C63); text-decoration: none; position: relative; z-index: 2; }
.am-list__proof::after { content: "→"; transition: transform .25s; }
.am-list__proof:hover::after, .am-list__proof:focus-visible::after { transform: translateX(4px); }
.am-list__s .am-list__proof { display: flex; width: max-content; }
.am-list__proof { color: #f39acb; font-size: .95rem; padding-block: 8px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.am-list__proof:hover { color: #fff; }
/* reel vooraan, landschapsbeeld erachter */
.am-hero--home .am-hero__reel { z-index: 4; }
.am-hero--home .am-hero__frame { z-index: 2; }
/* menu: elk item op één regel */
.am-menu__nav ul a { font-size: clamp(2rem, 9.2vw, 4.5rem); white-space: nowrap; }
/* memory */
.am-mem { --gap: clamp(8px, 1.2vw, 14px); }
.am-mem template { display: none; }
.am-mem__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 640px) { .am-mem__grid { grid-template-columns: repeat(3, 1fr); } }
.am-mem__c { aspect-ratio: 1; perspective: 900px; }
.am-mem__c button { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; height: 100%; cursor: pointer; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,1.4,.5,1); }
.am-mem__c button:focus-visible { outline: 3px solid var(--magenta, #921C63); outline-offset: 3px; }
.am-mem__c.is-open button, .am-mem__c.is-match button { transform: rotateY(180deg); }
.am-mem__back, .am-mem__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.am-mem__back { background: #0e0e10; display: grid; place-items: center; background-image: linear-gradient(135deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.06) 75%, transparent 75%); background-size: 22px 22px; }
.am-mem__back .am-sq { width: 22%; height: 22%; background: var(--magenta, #921C63); display: block; transition: transform .3s; }
.am-mem__c button:hover .am-mem__back .am-sq { transform: rotate(45deg) scale(1.1); }
.am-mem__face { transform: rotateY(180deg); background: #fff; border: 1px solid #e3e3e6; display: grid; place-items: center; }
.am-mem__logo { display: grid; place-items: center; width: 100%; height: 100%; padding: 16%; box-sizing: border-box; }
.am-mem__logo img { max-width: 100%; max-height: calc(48% * var(--s, 1)); width: auto; height: auto; object-fit: contain; }
.am-mem__work, .am-mem__work img, .am-mem__work video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.am-mem__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 7px; font-size: clamp(.62rem, 1.5vw, .78rem); font-weight: 700; line-height: 1.2; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); opacity: 0; transition: opacity .4s .3s; }
.am-mem__c.is-match .am-mem__cap { opacity: 1; }
.am-mem__c.is-match .am-mem__face { border: 3px solid var(--magenta, #921C63); }
.am-mem__c.is-match button { animation: am-mem-pop .5s .25s; }
@keyframes am-mem-pop { 50% { transform: rotateY(180deg) scale(1.07); } }
.am-mem__c.is-miss button { animation: am-mem-shake .4s; }
@keyframes am-mem-shake { 25% { transform: rotateY(180deg) translateX(-5px); } 75% { transform: rotateY(180deg) translateX(5px); } }
.am-mem.is-dealing .am-mem__c { animation: am-mem-deal .5s both var(--d); }
@keyframes am-mem-deal { from { opacity: 0; transform: translateY(18px) rotate(-4deg) scale(.9); } }
.am-mem__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 18px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #6a6a72; }
.am-mem__bar b { color: #0e0e10; font-size: 1.1rem; letter-spacing: 0; }
.am-mem__again { margin-left: auto; background: none; border: 1px solid #0e0e10; padding: 10px 16px; font: inherit; color: #0e0e10; cursor: pointer; letter-spacing: .1em; }
.am-mem__again:hover { background: #0e0e10; color: #fff; }
.am-mem__msg { min-height: 1.6em; margin-top: 12px; font-weight: 700; }
.am-mem__end { margin-top: 8px; }
.am-mem__strip { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; }
.am-mem__strip img { height: calc(30px * var(--s, 1)); max-width: 130px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.am-mem__strip li:hover img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .am-mem__c button { transition: none; } .am-mem.is-dealing .am-mem__c, .am-mem__c.is-match button, .am-mem__c.is-miss button { animation: none; } }
/* organisaties: op gsm beeld boven, tekst eronder, zodat niemand achter de titel verdwijnt */
@media (max-width: 760px) {
.am-full--org { display: block; min-height: 0; background: #0e0e10; padding-top: 76px; }
.am-full--org .am-full__media { position: relative; inset: auto; aspect-ratio: 4 / 3; width: 100%; }
.am-full--org .am-full__media::after { background: linear-gradient(180deg, transparent 60%, #0e0e10 100%); }
.am-full--org .am-full__media::before { display: none; }
.am-full--org .am-full__rec { top: 90px; }
.am-full--org .am-full__in { padding-top: 8px; }
}
.am-mem__back { transition: visibility 0s .2s; }
.am-mem__c.is-open .am-mem__back, .am-mem__c.is-match .am-mem__back { visibility: hidden; }
.am-mem__face { visibility: hidden; transition: visibility 0s .2s; }
.am-mem__c.is-open .am-mem__face, .am-mem__c.is-match .am-mem__face { visibility: visible; }
@media (max-width: 560px) { .am-world .am-map { max-width: none; width: auto; margin-inline: calc(-1 * var(--gut)) calc(-1 * var(--gut-r)); } }
/* footer: recente verhalen */
.am-footer__recent { margin-block: clamp(28px, 4vw, 48px); }
.am-footer__recent ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.am-footer__recent a { display: flex; flex-direction: column; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem; line-height: 1.25; }
.am-footer__recent img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; transition: transform .5s var(--ease-out, ease); }
.am-footer__recent a:hover img { transform: scale(1.03); }
.am-footer__recent a:hover span { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px) { .am-footer__recent ul { grid-template-columns: 1fr; } .am-footer__recent a { flex-direction: row; align-items: center; } .am-footer__recent img { width: 112px; flex: none; } }
/* cijfer als tussenregel */
.am-fig { padding-block: clamp(36px, 6vw, 80px); }
.am-fig__in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; padding-block: clamp(20px, 3vw, 32px); }
.am-fig__big { font-family: var(--display); font-weight: 900; letter-spacing: -.05em; line-height: .9; font-size: clamp(3.4rem, 11vw, 9rem); background: linear-gradient(90deg, #f0904c, #c2307a 45%, #6b5bd8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.am-fig__t { flex: 1 1 260px; margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.4; max-width: 36ch; }
.am-fig__a { display: inline-block; margin-top: 6px; font-weight: 700; color: inherit; text-underline-offset: 4px; }
.am-fig__a::after { content: " →"; }
.am-fig__in { border: 0; padding-block: 0; }
.am-fig__in::before { content: ""; flex-basis: 100%; height: 2px; margin-bottom: clamp(10px, 2vw, 20px); background: linear-gradient(90deg, #f0904c, #c2307a 45%, #6b5bd8); }
@media (min-width: 900px) { .am-fig__t { font-size: 1.5rem; max-width: 30ch; } }
@media (max-width: 760px) { .am-band__float .am-media img, .am-close__media img, .am-contact__light img { object-position: var(--pos-m, var(--pos, 50% 22%)); } }
/* affiches tonen in hun geheel */
.am-mosaic img[src*="new-year-poster"], .am-mosaic img[src*="darts-open-post"] { object-fit: contain !important; background: #2a1c14; }
/* memory: logo's eerst, in kleur */
.am-mem__strip img { filter: none; opacity: 1; height: calc(34px * var(--s, 1)); }
.am-mem__how { margin-top: clamp(28px, 4vw, 44px); font-weight: 700; font-size: 1.05rem; display: flex; gap: 10px; align-items: center; }
.am-mem__how::before { content: ""; width: 10px; height: 10px; background: var(--magenta, #921C63); flex: none; }
/* schaduw volgt de schuine vorm */
.am-band__float, .am-phone { box-shadow: none !important; filter: drop-shadow(var(--am-shadow)); }
.am-dfx,
.am-dfx * {
box-sizing: border-box;
}
.am-dfx {
--am-dfx-grad: var(
--grad,
linear-gradient(
90deg,
#f0a04b,
#e74c77 25%,
#a2216e 52%,
#526bd2 76%,
#64c8b3
)
);
width: min(1180px, calc(100% - clamp(32px, 8vw, 96px)));
min-width: 0;
margin-inline: auto;
padding-block: clamp(48px, 7vw, 96px);
color: #fff;
font-family: "Inter Tight", Arial, sans-serif;
}
.am-dfx [hidden] {
display: none !important;
}
.am-dfx__intro {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
align-items: end;
gap: 32px;
margin-bottom: 28px;
}
.am-dfx__eyebrow {
margin: 0 0 12px;
color: #c1c1c7;
font-size: .75rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
}
.am-dfx__heading {
margin: 0;
max-width: 14ch;
font: 850 clamp(2.25rem, 5.2vw, 4.5rem)/1.02 "Archivo", Arial, sans-serif;
letter-spacing: -.045em;
text-wrap: balance;
}
.am-dfx__lead {
max-width: 38ch;
margin: 0;
color: #c1c1c7;
font-size: clamp(1rem, 1.6vw, 1.2rem);
line-height: 1.5;
}
.am-dfx__card {
min-width: 0;
padding: clamp(18px, 3.2vw, 40px);
border: 1px solid #343438;
background: #060607;
touch-action: pan-y pinch-zoom;
}
.am-dfx__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 22px;
font-size: .72rem;
font-weight: 600;
letter-spacing: .04em;
color: #c1c1c7;
}
.am-dfx__status {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
min-width: 0;
}
.am-dfx__tally,
.am-dfx__delivered {
flex: 0 0 8px;
width: 8px;
height: 8px;
}
.am-dfx__tally {
background: #ff454d;
border-radius: 50%;
}
.am-dfx__delivered {
background: #a2216e;
}
.am-dfx__tc {
color: #ff777d;
font-variant-numeric: tabular-nums;
}
.am-dfx__count {
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.am-dfx__body {
display: grid;
grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
align-items: center;
gap: clamp(24px, 4vw, 64px);
min-height: 310px;
}
.am-dfx__visual {
grid-column: 2;
grid-row: 1;
min-width: 0;
}
.am-dfx__draw {
display: block;
width: 100%;
height: auto;
overflow: hidden;
}
.am-dfx__scene {
opacity: 0;
visibility: hidden;
}
.am-dfx__scene.is-active {
opacity: 1;
visibility: visible;
}
.am-dfx__scene path,
.am-dfx__scene circle {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.am-dfx__scene .am-dfx__accent {
stroke: url(#am-dfx-grad);
}
.am-dfx__scene .am-dfx__red {
fill: #ff454d;
stroke: #ff454d;
}
.am-dfx__scene .am-dfx__square {
fill: #a2216e;
stroke: #a2216e;
}
.am-dfx__copy {
grid-column: 1;
grid-row: 1;
min-width: 0;
padding-block: 20px;
}
.am-dfx__label {
display: block;
margin-bottom: 7px;
color: #c1c1c7;
font-size: .65rem;
letter-spacing: .12em;
text-transform: uppercase;
}
.am-dfx__clock {
display: block;
margin-bottom: 12px;
font: 850 clamp(1.8rem, 3.3vw, 3rem)/1.1 "Archivo", Arial, sans-serif;
letter-spacing: -.04em;
font-variant-numeric: tabular-nums;
}
.am-dfx__title {
min-height: 2.1em;
margin: 0 0 10px;
font: 800 clamp(1.75rem, 3.3vw, 3rem)/1.05 "Archivo", Arial, sans-serif;
letter-spacing: -.035em;
overflow-wrap: break-word; overflow-wrap: anywhere;
text-wrap: balance;
}
.am-dfx__sentence {
min-height: 4.5em;
max-width: 40ch;
margin: 0;
color: #c1c1c7;
font-size: clamp(1rem, 1.5vw, 1.125rem);
line-height: 1.5;
}
.am-dfx__controls {
margin-top: 12px;
}
.am-dfx__scrub {
position: relative;
height: 48px;
}
.am-dfx__rail {
--am-dfx-progress: 0%;
position: absolute;
top: 23px;
right: 7px;
left: 7px;
height: 2px;
background: #48484e;
pointer-events: none;
}
.am-dfx__rail::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: var(--am-dfx-progress);
background: var(--am-dfx-grad);
}
.am-dfx__ticks {
position: absolute;
inset: -4px 0 auto;
display: flex;
justify-content: space-between;
}
.am-dfx__ticks i {
display: block;
width: 1px;
height: 10px;
background: #a7a7ae;
}
.am-dfx__slider {
position: relative;
z-index: 1;
display: block;
width: 100%;
min-width: 0;
height: 48px;
margin: 0;
padding: 0;
border: 0;
appearance: none;
-webkit-appearance: none;
background: transparent;
cursor: pointer;
touch-action: pan-y;
}
.am-dfx__slider::-webkit-slider-runnable-track {
height: 2px;
border: 0;
background: transparent;
}
.am-dfx__slider::-webkit-slider-thumb {
box-sizing: border-box;
width: 14px;
height: 14px;
margin-top: -6px;
border: 2px solid #fff;
border-radius: 0;
appearance: none;
-webkit-appearance: none;
background: #a2216e;
box-shadow: 0 0 0 3px #060607;
}
.am-dfx__slider::-moz-range-track,
.am-dfx__slider::-moz-range-progress {
height: 2px;
border: 0;
background: transparent;
}
.am-dfx__slider::-moz-range-thumb {
box-sizing: border-box;
width: 14px;
height: 14px;
border: 2px solid #fff;
border-radius: 0;
background: #a2216e;
box-shadow: 0 0 0 3px #060607;
}
.am-dfx__ends {
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: -4px;
color: #c1c1c7;
font-size: .72rem;
}
.am-dfx__toolbar {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
gap: 8px;
width: min(100%, 480px);
margin-top: 20px;
}
.am-dfx .am-dfx__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 44px;
min-height: 44px;
margin: 0;
padding: 10px;
border: 1px solid #62626a;
border-radius: 0;
background: #060607;
color: #fff;
font: 650 .875rem/1.2 "Inter Tight", Arial, sans-serif;
text-align: center;
cursor: pointer;
}
.am-dfx .am-dfx__button--play {
border-color: #fff;
background: #fff;
color: #08080a;
}
.am-dfx__button svg {
display: block;
flex: 0 0 18px;
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.am-dfx__button .am-dfx__play-glyph {
fill: currentColor;
stroke: none;
}
.am-dfx__pause-glyph {
display: none;
}
.am-dfx[data-playing="true"] .am-dfx__play-glyph {
display: none;
}
.am-dfx[data-playing="true"] .am-dfx__pause-glyph {
display: block;
}
.am-dfx .am-dfx__button:disabled {
opacity: .35;
cursor: default;
}
.am-dfx__button:focus-visible,
.am-dfx__slider:focus-visible,
.am-dfx__card:focus-visible {
outline: 2px solid #fff;
outline-offset: 4px;
}
.am-dfx__hint {
margin: 12px 0 0;
color: #c1c1c7;
font-size: .8rem;
line-height: 1.5;
}
.am-dfx__fallback {
padding-left: 24px;
line-height: 1.5;
}
.am-dfx__fallback li {
margin-top: 20px;
}
.am-dfx__fallback strong {
display: block;
}
.am-dfx__fallback p {
margin: 4px 0 0;
color: #c1c1c7;
}
.am-dfx__sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
@media (max-width: 740px) {
.am-dfx__intro {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.am-dfx__body {
display: flex;
flex-direction: column;
gap: 4px;
min-height: 0;
}
.am-dfx__visual {
width: min(100%, 420px);
padding-top: 8px;
}
.am-dfx__copy {
width: 100%;
padding-block: 8px 0;
}
.am-dfx__clock {
margin-bottom: 8px;
}
}
@media (hover: hover) {
.am-dfx .am-dfx__button:not(:disabled):hover {
border-color: #fff;
background: #242427;
}
.am-dfx .am-dfx__button--play:not(:disabled):hover {
background: #e7e7eb;
color: #08080a;
}
}
@media (prefers-reduced-motion: reduce) {
.am-dfx *,
.am-dfx *::before,
.am-dfx *::after {
animation: none !important;
transition-duration: .01ms !important; transition-delay: 0s !important;
}
}
@media (forced-colors: active) {
.am-dfx__slider {
appearance: auto;
-webkit-appearance: auto;
}
.am-dfx__rail {
display: none;
}
}
.am-dfx-sec { padding-block: 0; }
.am-dfx { font-family: var(--body, "Inter Tight", Arial, sans-serif); }
.am-dfx__heading, .am-dfx__clock, .am-dfx__title { font-family: var(--display, "Archivo"), Arial, sans-serif; }
.am-mosaic img[src*="podcast-logo-tile"] { object-fit: contain !important; background: #fff; }
.am-mosaic img[src*="fence-banner"], .am-mosaic img[src*="van-side"] { object-fit: contain !important; background: #2a1c14; }
/* menu past altijd: grootte volgt breedte én hoogte, tekst onder het logo, taalkeuze boven de schuine rand */
.am-menu.is-open .am-menu__bg { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.am-menu__nav { justify-content: flex-start; gap: clamp(18px, 3vh, 32px); padding-top: clamp(96px, 14vh, 140px); padding-bottom: clamp(32px, 6vh, 64px); overflow-y: auto; }
.am-menu__nav ul a { font-size: clamp(1.9rem, min(8.4vw, 7.6vh), 4.2rem); line-height: 1.08; }
@media (min-width: 761px) and (max-height: 900px) { .am-menu__nav ul { gap: 2px; } }
/* drie kaarten: drie naast elkaar of één per rij, nooit 2 + 1 */
.am-cards[style*="--cols:3"] { --cols: 3 !important; }
@media (max-width: 860px) { .am-cards[style*="--cols:3"] { --cols: 1 !important; } }
@media (min-width: 861px) and (max-width: 1100px) { .am-cards[style*="--cols:3"] { gap: 10px; } .am-cards[style*="--cols:3"] .am-card { padding: 22px; } .am-cards[style*="--cols:3"] .am-card__p b { font-size: clamp(2rem, 4vw, 2.6rem); } }
/* volle hero's: inhoud nooit achter de header, titel schaalt ook met de hoogte */
.am-full { padding-top: clamp(96px, 12vh, 130px); }
.am-full .am-hero__title { font-size: min(var(--fs-hero), 13vh); }
@media (max-height: 820px) and (min-width: 761px) { .am-full__in { gap: 18px; padding-bottom: 40px; } .am-full .am-lead { font-size: 1.05rem; } }
/* contact: de lijn loopt onder de tekst, nooit erdoor */
.am-contact { padding-bottom: calc(var(--sec, 96px) + 150px) !important; }
/* ---------- Een maand met Dorien v2 (.am-month2): de scheurkalender ---------- */
.am-month2-sec { --m2: #921C63; --m2-ease: cubic-bezier(.7, 0, .2, 1); --m2-pop: cubic-bezier(.34, 1.56, .64, 1); background: var(--mist); color: var(--ink); padding-bottom: 0; overflow-x: clip; }
.am-month2__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.am-month2__pages, .am-month2__chips, .am-month2__grid, .am-month2__yours ol { list-style: none; margin: 0; padding: 0; }
/* Basis = leesbare lijst (zonder JavaScript of bij reduced motion) */
.am-month2 { max-width: calc(var(--max) + var(--gut) + var(--gut-r)); margin: 0 auto; padding: 0 var(--gut-r) var(--sec) var(--gut); }
.am-month2__pages { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.am-month2__sheet { display: grid; gap: 18px; background: #fff; padding: 0 0 22px; box-shadow: 0 1px 0 rgba(14,14,16,.06), var(--am-shadow); }
.am-month2__fig { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #e7e5ea; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%); }
.am-month2__fig img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
.am-month2__copy { padding: 0 clamp(18px, 3vw, 32px); min-width: 0; }
.am-month2__label { margin: 0; font: 900 clamp(2.6rem, 9vw, 4.6rem)/.86 var(--display); letter-spacing: -.045em; }
.am-month2__label span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em; }
.am-month2__title { margin: 10px 0 0; font: 800 clamp(1.4rem, 2.4vw, 2.1rem)/1.04 var(--display); letter-spacing: -.02em; }
.am-month2__text { margin: 10px 0 0; color: var(--ink-2); max-width: 38ch; line-height: 1.45; }
.am-month2__sub { margin: 18px 0 8px; font: 600 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.am-month2__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.am-month2__chips li { padding: 6px 10px; background: var(--ink); color: #fff; font: 600 .8rem/1 var(--body); clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.am-month2__you { margin: 14px 0 0; font-weight: 600; color: var(--m2); }
.am-month2__you span { display: inline-flex; align-items: center; gap: .5em; font: 600 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-right: .4em; }
.am-month2__you span::before { content: ""; width: .7em; height: .7em; background: var(--m2); }
.am-month2__pad, .am-month2__cal { position: static; }
.am-month2__binder, .am-month2__cal { display: none; }
@media (min-width: 760px) {
.am-month2__sheet { grid-template-columns: 5fr 7fr; align-items: center; padding: 0; gap: 0; }
.am-month2__fig { aspect-ratio: 5 / 4; clip-path: polygon(0 0, 100% 0, calc(100% - 3vw) 100%, 0 100%); }
.am-month2__copy { padding: clamp(24px, 4vw, 56px); }
}
/* Scheurkalender (JS zet .is-run) */
.am-month2-sec.is-run .am-month2 { max-width: none; padding: 0; height: calc(4 * 95svh + 100svh); }
.is-run .am-month2__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 78px var(--gut-r) max(14px, env(safe-area-inset-bottom, 0px)) var(--gut); }
.is-run .am-month2__pad { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.is-run .am-month2__binder { display: flex; position: relative; z-index: 20; flex: none; height: 16px; justify-content: space-evenly; align-items: center; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.am-month2__binder i { width: 7px; height: 7px; border-radius: 50%; background: var(--mist); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.is-run .am-month2__pages { display: block; position: relative; flex: 1 1 auto; min-height: 0; }
.is-run .am-month2__page { position: absolute; inset: 0; z-index: calc(10 - var(--w)); transform-origin: 8% 0; transform: translate3d(0, calc(var(--o, 0) * 7px), 0) scale(calc(1 - var(--o, 0) * .025)); transition: transform 1s var(--m2-ease), opacity .6s ease .35s, visibility 0s linear 0s; }
.is-run .am-month2__page.is-torn { transform: translate3d(-18%, -112%, 0) rotate(-13deg); opacity: 0; visibility: hidden; transition: transform 1s var(--m2-ease), opacity .5s ease .4s, visibility 0s linear 1s; }
.is-run .am-month2__sheet { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 0 0; overflow: hidden; box-shadow: 0 1px 0 rgba(14,14,16,.08), var(--am-shadow); }
.is-run .am-month2__sheet::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 9px; background: radial-gradient(circle at 6px 0, var(--mist) 3.5px, transparent 4px) 0 0 / 12px 9px repeat-x; pointer-events: none; }
.is-run .am-month2__page:not(.is-top) .am-month2__sheet::after { content: ""; position: absolute; inset: 0; background: rgba(245,244,246,.55); }
.is-run .am-month2__fig { flex: 1 1 auto; min-height: 64px; aspect-ratio: auto; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 0 100%); }
.is-run .am-month2__fig img { transform: scale(calc(1.06 - var(--kb, 0) * .06)); transition: transform .3s linear; }
.is-run .am-month2__copy { flex: none; padding: 10px 16px 16px; }
.is-run .am-month2__label { font-size: clamp(2.2rem, 11vw, 3.4rem); }
.is-run .am-month2__title { margin-top: 6px; font-size: clamp(1.25rem, 5.4vw, 1.6rem); }
.is-run .am-month2__text { margin-top: 6px; font-size: .95rem; line-height: 1.4; }
.is-run .am-month2__sub, .is-run .am-month2__chips, .is-run .am-month2__you { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.is-run .am-month2__label, .is-run .am-month2__title, .is-run .am-month2__text { transition: opacity .5s ease, transform .7s var(--ease-out); }
.is-run .am-month2__page:not(.is-top) .am-month2__copy > * { opacity: 0; transform: translate3d(0, 10px, 0); }
.is-run .am-month2__page.is-top .am-month2__title { transition-delay: .12s; }
.is-run .am-month2__page.is-top .am-month2__text { transition-delay: .2s; }
/* Agenda */
.is-run .am-month2__cal { display: block; flex: none; position: relative; background: var(--ink); color: #fff; padding: 12px 12px 10px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); font-variant-numeric: tabular-nums; }
.am-month2__calhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; padding-right: 18px; }
.am-month2__mine { display: inline-flex; align-items: center; gap: .55em; font: 600 .68rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.am-month2__mine::before { content: ""; width: .75em; height: .75em; background: var(--m2); flex: none; }
.am-month2__day { font: 500 .7rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); white-space: nowrap; }
.am-month2__day b { color: #fff; font-weight: 700; }
.am-month2__dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0 0 4px 22px; font: 600 .58rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.am-month2__dow span { overflow: hidden; }
.am-month2__body { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px; }
.am-month2__rows { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 4px; font: 600 .56rem/1 var(--body); color: rgba(255,255,255,.4); }
.am-month2__rows span { display: flex; align-items: center; transition: color .4s ease; }
.am-month2__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(4, 30px); gap: 4px; }
.am-month2__cell { position: relative; overflow: hidden; background: rgba(255,255,255,.05); transition: background-color .4s ease; }
.am-month2__cell.is-we { background: rgba(255,255,255,.025); }
.am-month2__cell.is-wk { background: rgba(255,255,255,.1); }
.am-month2__num { position: absolute; z-index: 2; left: 4px; top: 3px; font: 600 .52rem/1 var(--body); color: rgba(255,255,255,.4); transition: color .3s ease; }
.am-month2__cell.is-on .am-month2__num { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.am-month2__item { position: absolute; inset: 0; display: flex; align-items: flex-end; overflow: hidden; background: var(--m2); opacity: 0; transform: scale(.4) rotate(-6deg); transition: opacity .25s ease, transform .55s var(--m2-pop); }
.am-month2__item[data-k="plan"] { background: var(--grad); }
.am-month2__item[data-k="write"], .am-month2__item[data-k="look"] { background: #6b5bd8; }
.am-month2__item img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.am-month2__item b { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.am-month2__cell.is-on .am-month2__item { opacity: 1; transform: none; }
.am-month2__item[data-k="reel"]::after, .am-month2__item[data-k="story"]::after { content: ""; position: absolute; right: 4px; top: 4px; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent #fff; filter: drop-shadow(var(--am-shadow)); }
.am-month2__cursor { position: absolute; z-index: 3; left: 0; top: 0; width: 0; height: 0; pointer-events: none; outline: 2px solid #fff; outline-offset: -1px; transition: transform .45s var(--ease-out), width .3s ease, height .3s ease; }
.am-month2__cursor::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 9px; height: 9px; background: var(--m2); outline: 2px solid #fff; }
/* Jouw agenda: bijna leeg */
.am-month2__yours { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed rgba(255,255,255,.22); min-width: 0; }
.am-month2__yours .am-month2__mine { flex: none; color: rgba(255,255,255,.55); }
.am-month2__yours .am-month2__mine::before { background: transparent; outline: 1px solid rgba(255,255,255,.6); outline-offset: -1px; }
.am-month2__yours ol { flex: 1 1 auto; min-width: 0; position: relative; height: 1.3em; }
.am-month2__yours li { position: absolute; inset: 0; display: flex; gap: .6em; align-items: baseline; font-size: .86rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .35s ease, transform .5s var(--ease-out); }
.am-month2__yours li b { font: 600 .6rem/1 var(--body); color: rgba(255,255,255,.45); }
.am-month2__yours li.is-on { opacity: 1; transform: none; }
@media (max-width: 899px) and (max-height: 720px) {
.is-run .am-month2__stage { gap: 8px; padding-top: 70px; }
.is-run .am-month2__label { font-size: 2rem; }
.is-run .am-month2__copy { padding: 8px 14px 12px; }
.am-month2__grid { grid-template-rows: repeat(4, 24px); }
}
@media (min-width: 900px) {
.is-run .am-month2__stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4.5vw, 80px); align-items: center; padding: clamp(96px, 13svh, 128px) var(--gut-r) clamp(28px, 6svh, 64px) var(--gut); max-width: calc(var(--max) + var(--gut) + var(--gut-r)); margin: 0 auto; }
.is-run .am-month2__pad { height: min(100%, 720px); }
.is-run .am-month2__binder { height: 22px; }
.am-month2__binder i { width: 10px; height: 10px; }
.is-run .am-month2__sheet::before { height: 11px; background-size: 16px 11px; background-image: radial-gradient(circle at 8px 0, var(--mist) 4.5px, transparent 5px); }
.is-run .am-month2__sheet { padding-top: 12px; }
.is-run .am-month2__fig { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.2vw), 0 100%); }
.is-run .am-month2__copy { padding: 14px clamp(20px, 2.4vw, 36px) clamp(20px, 3svh, 32px); }
.is-run .am-month2__label { font-size: clamp(3.4rem, min(6vw, 10svh), 6rem); }
.is-run .am-month2__title { font-size: clamp(1.5rem, 2.1vw, 2.2rem); }
.is-run .am-month2__text { font-size: 1.05rem; max-width: 34ch; }
.is-run .am-month2__cal { padding: clamp(18px, 2.4vw, 32px); clip-path: polygon(0 0, calc(100% - 4.2vw) 0, 100% 4.2vw, 100% 100%, 0 100%); }
.am-month2__calhead { margin-bottom: 16px; padding-right: 3vw; }
.am-month2__mine { font-size: .76rem; }
.am-month2__day { font-size: .8rem; }
.am-month2__dow { margin-left: 36px; gap: 8px; font-size: .7rem; }
.am-month2__body { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
.am-month2__rows { gap: 8px; font-size: .7rem; }
.am-month2__grid { gap: 8px; grid-template-rows: repeat(4, min(10.5svh, 104px)); }
.am-month2__num { left: 7px; top: 6px; font-size: .7rem; }
.am-month2__item b { position: absolute !important; left: 6px; bottom: 6px; width: auto; height: auto; max-width: calc(100% - 12px); overflow: hidden; clip: auto; white-space: normal; line-height: 1.1 !important; padding: 4px 7px; background: rgba(14,14,16,.82); font: 600 .7rem/1 var(--body); color: #fff; }
.am-month2__item:not(:has(img)) b { background: transparent; padding-left: 7px; }
.am-month2__item[data-k="reel"]::after, .am-month2__item[data-k="story"]::after { right: 8px; top: 8px; border-width: 6px 0 6px 10px; }
.am-month2__cursor { outline-width: 3px; }
.am-month2__yours { margin-top: 18px; padding-top: 16px; gap: 18px; }
.am-month2__yours ol { height: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.am-month2__yours li { position: relative; inset: auto; display: flex; flex-direction: column; gap: 6px; white-space: normal; padding: 10px 12px; min-height: 64px; border: 1px dashed rgba(255,255,255,.18); opacity: .35; transform: none; font-size: .88rem; }
.am-month2__yours li.is-done { opacity: .55; }
.am-month2__yours li.is-on { opacity: 1; border: 1px solid var(--m2); background: rgba(146,28,99,.22); }
}
@media (min-width: 900px) and (max-height: 760px) {
.am-month2__grid { grid-template-rows: repeat(4, 9svh); }
.am-month2__yours li { min-height: 0; padding: 8px 10px; }
.is-run .am-month2__text { font-size: .98rem; }
}
@media (prefers-reduced-motion: reduce) {
.am-month2-sec *, .am-month2-sec *::before, .am-month2-sec *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}
/* KPI-band (.am-kpis) */
.am-kpis { padding-block: clamp(36px, 6vw, 80px); }
.am-kpis__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 40px); }
.am-kpis__i { min-width: 0; padding-top: clamp(10px, 2vw, 20px); position: relative; }
.am-kpis__i::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #f0904c, #c2307a 45%, #6b5bd8); }
.am-kpis__n { display: block; font-family: var(--display); font-weight: 900; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; font-size: clamp(3.2rem, 9vw, 5.6rem); background: linear-gradient(90deg, #f0904c, #c2307a 45%, #6b5bd8); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: break-word; overflow-wrap: anywhere; }
.am-kpis__t { margin: 10px 0 0; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.4; max-width: 28ch; }
@media (min-width: 720px) { .am-kpis__l { grid-template-columns: repeat(3, minmax(0, 1fr)); } .am-kpis--4 .am-kpis__l { grid-template-columns: repeat(4, minmax(0, 1fr)); } .am-kpis__n { font-size: clamp(2.6rem, 6.4vw, 5.2rem); } }
@media (max-width: 719px) { .am-kpis--4 .am-kpis__l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } .am-kpis--4 .am-kpis__n { font-size: clamp(2.4rem, 11vw, 3.4rem); } }
/* reacties op wat online staat (week 3 en 4) */
.am-month2__item[data-k="post"]::before, .am-month2__item[data-k="reel"]::before, .am-month2__item[data-k="story"]::before { content: "\2665"; position: absolute; z-index: 2; right: 3px; bottom: 3px; display: grid; place-items: center; width: 14px; height: 14px; background: var(--m2); color: #fff; font: 700 9px/1 var(--body); opacity: 0; transform: scale(0); transition: opacity .2s ease, transform .5s var(--m2-pop); transition-delay: .5s; }
[data-m2-week="2"] .is-on .am-month2__item::before, [data-m2-week="3"] .is-on .am-month2__item::before { opacity: 1; transform: none; animation: am-m2-beat 2.4s ease-in-out 1s infinite; }
@keyframes am-m2-beat { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.3); } 90% { transform: scale(.95); } }
@media (min-width: 900px) { .am-month2__item[data-k="post"]::before, .am-month2__item[data-k="reel"]::before, .am-month2__item[data-k="story"]::before { right: 6px; bottom: 6px; width: 20px; height: 20px; font-size: 12px; } }
/* contact bar: hide on scroll down, WhatsApp, neutral call button */
.am-stickycta__wa, .am-wa { color: #fff; }
.am-stickycta__wa { width: 52px; display: grid; place-items: center; background: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.am-wa { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; color: var(--ink); }
.am-wa svg { color: var(--magenta); flex: none; }
.am-form__wa { margin: 0 0 10px; }
@media (max-width: 1024px) {
.am-stickycta { transition: transform .42s var(--ease-out, cubic-bezier(.16,1,.3,1)); will-change: transform; }
.am-stickycta.is-away { transform: translateY(calc(100% + 24px)); }
.am-stickycta:focus-within { transform: none; transition: none; }
.am-stickycta__main--tel { gap: 10px; }
.am-stickycta__ico { display: inline-grid; place-items: center; }
.am-footer__base { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .am-stickycta { transition: none !important; } }
/* ---------- Verhalen: bewegende tegels (.am-tiles) ---------- */
.am-tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.am-tile { --cut: 7%; position: relative; display: block; grid-column: 1 / -1; min-width: 0; aspect-ratio: 4 / 5; max-height: 82svh; color: #fff; text-decoration: none; }
.am-tile__in { position: absolute; inset: 0; display: block; overflow: hidden; isolation: isolate; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); }
.am-tile[hidden] { display: none; }
.am-tile__media { position: absolute; inset: 0; overflow: hidden; }
.am-tile__media img, .am-tile__media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos-m, var(--pos, 50% 50%)); transition: transform 1.4s var(--ease-out); }
.am-tile__type { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--ink-2); font: 900 clamp(1.6rem, 4vw, 3rem)/1 var(--display); letter-spacing: -.04em; text-align: center; }
.am-tile__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(14,14,16,.38) 0%, rgba(14,14,16,0) 22%, rgba(14,14,16,0) 42%, rgba(14,14,16,.86) 100%); }
.am-tile__shade::after { content: ""; position: absolute; inset: 0; background: var(--grad); mix-blend-mode: soft-light; opacity: 0; transition: opacity .6s var(--ease-out); }
.am-tile__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 10px; padding: 22px clamp(18px, 2.2vw, 30px) clamp(22px, 2.6vw, 34px); transition: transform .7s var(--ease-out); }
.am-tile__eyebrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; font: 600 .76rem/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.am-tile__eyebrow span:last-child { font-variant-numeric: tabular-nums; color: rgba(255,255,255,.62); }
.am-tile__t { display: block; max-width: 18ch; font: 900 clamp(1.7rem, 2.7vw, 2.75rem)/.98 var(--display); letter-spacing: -.035em; text-wrap: balance; overflow-wrap: break-word; overflow-wrap: anywhere; }
.am-tile__go { display: inline-flex; align-items: center; gap: 10px; font: 600 .92rem/1 var(--body); color: #fff; }
.am-tile__go .am-sq { background: var(--g3); }
.am-tile__accent { position: absolute; left: 0; top: 0; z-index: 4; width: 100%; height: 5px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-out); }
.am-tile:focus-visible { outline: 3px solid var(--g3); outline-offset: 4px; }
.am-tile:focus-visible .am-tile__accent { transform: scaleX(1); }
@media (min-width: 761px) {
.am-tile { height: clamp(360px, 40vw, 600px); max-height: none; aspect-ratio: auto; }
.am-tile.is-wide { grid-column: span 7; }
.am-tile.is-narrow { grid-column: span 5; }
.am-tile.is-full { grid-column: 1 / -1; --cut: 9%; }
.am-tile.is-full .am-tile__t { max-width: 22ch; font-size: clamp(2.2rem, 4vw, 4rem); }
.am-tile__media img, .am-tile__media video { object-position: var(--pos, 50% 50%); }
}
@media (hover: hover) and (pointer: fine) {
.am-tile__go { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .6s var(--ease-out); }
.am-tile__body { transform: translateY(calc(.92rem + 10px)); }
.am-tile:hover .am-tile__body, .am-tile:focus-visible .am-tile__body { transform: none; }
.am-tile:hover .am-tile__go, .am-tile:focus-visible .am-tile__go { opacity: 1; transform: none; }
.am-tile:hover .am-tile__media img, .am-tile:hover .am-tile__media video { transform: scale(1.06); }
.am-tile:hover .am-tile__shade::after { opacity: .55; }
.am-tile:hover .am-tile__accent { transform: scaleX(1); }
}
/* Schuine wipe bij scroll en bij filteren (alleen met JS en zonder reduced motion) */
@media (prefers-reduced-motion: no-preference) {
.am-tiles.is-armed .am-tile__in { transition: clip-path 1.15s var(--ease-out) var(--d, 0s), opacity .5s ease var(--d, 0s); }
.am-tiles.is-armed .am-tile:not(.is-in) .am-tile__in { clip-path: polygon(0 100%, 100% calc(100% + 4.2vw), 100% 100%, 0 100%); }
.am-tiles.is-armed .am-tile:not(.is-in) .am-tile__media img, .am-tiles.is-armed .am-tile:not(.is-in) .am-tile__media video { transform: scale(1.22); }
.am-tiles.is-armed .am-tile .am-tile__media img, .am-tiles.is-armed .am-tile .am-tile__media video { transition: transform 1.7s var(--ease-out) var(--d, 0s); }
.am-tiles.is-armed .am-tile.is-leaving .am-tile__in { clip-path: polygon(0 0, 100% -4.2vw, 100% 0, 0 0); opacity: .4; transition: clip-path .42s var(--ease) var(--d, 0s), opacity .42s ease var(--d, 0s); }
.am-tiles.is-armed .am-tile:not(.is-in) .am-tile__body { opacity: 0; transform: translateY(24px); }
.am-tiles.is-armed .am-tile.is-in .am-tile__body { transition: transform .9s var(--ease-out) calc(var(--d, 0s) + .35s), opacity .6s ease calc(var(--d, 0s) + .35s); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.am-tiles.is-armed .am-tile.is-in:hover .am-tile__body { transition: transform .7s var(--ease-out); }
}
.am-tiles-filter button { position: relative; overflow: hidden; isolation: isolate; }
.am-tiles-filter button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad); transform: translateY(101%); transition: transform .45s var(--ease-out); }
.am-tiles-filter button[aria-pressed="true"]::before { transform: none; }
.am-tiles-filter button[aria-pressed="true"] { border-color: transparent; background: var(--ink); }
.am-tiles-filter button:focus-visible { outline: 3px solid var(--g3); outline-offset: 3px; }
/* ---------- Footer: recente verhalen als swipe-strip (.am-frecent) ---------- */
.am-frecent { display: flex; flex-direction: column; gap: 16px; }
.am-frecent__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.am-frecent__head .am-footer__label { margin: 0; }
.am-frecent__all { color: rgba(255,255,255,.8); font-size: .92rem; text-decoration: underline; text-decoration-color: var(--g3); text-underline-offset: 4px; }
.am-frecent__all:hover { color: #fff; }
.am-frecent__track { list-style: none; margin: 0 calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut)); padding: 0 var(--gut-r) 4px var(--gut); display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.am-frecent__track::-webkit-scrollbar { display: none; }
.am-frecent__item { flex: 0 0 78vw; min-width: 0; scroll-snap-align: start; }
.am-frecent__card { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; background: #1a1a1f; clip-path: polygon(0 0, 100% 0, 100% 89%, 0 100%); }
.am-frecent__media { position: absolute; inset: 0; }
.am-frecent__media img, .am-frecent__media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.2s var(--ease-out), opacity .5s ease; }
.am-frecent__media video { opacity: 0; }
.am-frecent__card.is-playing .am-frecent__media video { opacity: 1; }
.am-frecent__card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(14,14,16,0) 30%, rgba(14,14,16,.88) 100%); }
.am-frecent__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; transition: transform .6s var(--ease-out); }
.am-frecent__eyebrow { font: 600 .7rem/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-frecent__t { max-width: 22ch; font: 900 clamp(1.15rem, 1.7vw, 1.55rem)/1.02 var(--display); letter-spacing: -.03em; text-wrap: balance; overflow-wrap: break-word; overflow-wrap: anywhere; }
.am-frecent__accent { position: absolute; left: 0; top: 0; z-index: 3; width: 100%; height: 4px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease-out); }
.am-frecent__card:focus-visible { outline: 3px solid var(--g3); outline-offset: -3px; }
.am-frecent__card:focus-visible .am-frecent__accent, .am-frecent__card.is-playing .am-frecent__accent { transform: scaleX(1); }
@media (min-width: 761px) {
.am-frecent__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; overflow: visible; }
.am-frecent__body { padding: 18px 22px 22px; }
}
@media (hover: hover) and (pointer: fine) {
.am-frecent__card:hover .am-frecent__media img, .am-frecent__card:hover .am-frecent__media video { transform: scale(1.06); }
.am-frecent__card:hover .am-frecent__body { transform: translateY(-6px); }
.am-frecent__card:hover .am-frecent__accent { transform: scaleX(1); }
}
@media (prefers-reduced-motion: no-preference) {
.am-frecent.is-armed .am-frecent__card { transition: clip-path 1.1s var(--ease-out) var(--d, 0s); }
.am-frecent.is-armed .am-frecent__item:not(.is-in) .am-frecent__card { clip-path: polygon(0 100%, 100% calc(100% + 4.2vw), 100% 100%, 0 100%); }
}
/* About hero mobile: Fonz meteen in beeld, linksboven naast Dorien */
@media (max-width: 760px) {
.am-about-hero .am-trio .t-fonz { left: 3%; top: 5%; right: auto; bottom: auto; width: 34%; z-index: 3; }
.am-about-hero .am-trio .t-tom { z-index: 1; }
}
/* Fonz: good boy seal, rotating ring + live percentage */
.am-fonzgame__stamp{border:0!important;width:104px!important;height:104px!important;display:block!important;color:#fff!important;filter:drop-shadow(var(--am-shadow));transform:rotate(-12deg)}
.am-fonzgame__stamp svg{width:100%;height:100%;display:block;overflow:visible}
.am-fonzgame__stamp .b{fill:#921C63}
.am-fonzgame__stamp .d{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.2;stroke-dasharray:2 3}
.am-fonzgame__stamp .ring{transform-origin:50px 50px;animation:am-fz-spin 16s linear infinite}
.am-fonzgame__stamp .ring text{font:900 9.4px/1 var(--display,"Archivo",Arial,sans-serif);letter-spacing:.06em;fill:#fff}
.am-fonzgame__stamp .n{font:900 17px/1 var(--display,"Archivo",Arial,sans-serif);fill:#fff;letter-spacing:-.02em}
.am-fonzgame__stamp.is-bump{animation:am-fz-bump .5s cubic-bezier(.16,1,.3,1)}
.am-fonzgame__stamp.is-full .b{fill:url(#am-fz-grad);fill:#e0457b}
.am-fonzgame__stamp.is-full .ring{animation-duration:2.4s}
.am-fonzgame__stamp.is-full{animation:am-fz-full .7s cubic-bezier(.16,1,.3,1) both}
@keyframes am-fz-spin{to{transform:rotate(360deg)}}
@keyframes am-fz-bump{0%{transform:rotate(-12deg) scale(1)}40%{transform:rotate(-4deg) scale(1.16)}100%{transform:rotate(-12deg) scale(1)}}
@keyframes am-fz-full{0%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(8deg) scale(1.3)}100%{transform:rotate(-6deg) scale(1.12)}}
@media(max-width:760px){.am-fonzgame__stamp{width:84px!important;height:84px!important;left:1%!important;top:6%!important}}
@media(prefers-reduced-motion:reduce){.am-fonzgame__stamp .ring,.am-fonzgame__stamp.is-bump,.am-fonzgame__stamp.is-full{animation:none}}
/* ---------- Lokale pagina's per gemeente (local_pages.py) ---------- */
.am-lp-hero { padding-top: clamp(120px, 14vw, 190px); }
.am-lp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.am-lp-hero__copy { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 28px); min-width: 0; }
.am-lp-hero__title { font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 5.6vw, 5.4rem); letter-spacing: -.045em; line-height: .96; overflow-wrap: break-word; overflow-wrap: anywhere; hyphens: auto; }
.am-lp-hero__media { position: relative; aspect-ratio: 4 / 5; min-width: 0; }
.am-lp-hero__media > .am-media { position: absolute; inset: 0; }
.am-lp-do .am-list__t { font-size: clamp(1.4rem, 2.8vw, 2.6rem); }
.am-lp-local__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.am-lp-kern { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.am-lp-kern li { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 2px solid var(--ink); font: 600 .92rem/1 var(--body); }
.am-lp-ex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.am-lp-ex[data-n="1"] { grid-template-columns: 1fr; }
.am-lp-ex__item { display: flex; flex-direction: column; gap: 14px; background: var(--white); padding: 14px 14px 22px; min-width: 0; }
.am-lp-ex[data-n="1"] .am-lp-ex__item { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: 14px; }
.am-lp-ex__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.am-lp-ex__media > video, .am-lp-ex__media > img, .am-lp-ex__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.am-lp-ex__media--name { display: flex; align-items: flex-end; padding: 18px; background: var(--ink); color: #fff; }
.am-lp-ex__media--name b { font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: -.04em; line-height: .95; }
.am-lp-ex__copy { display: flex; flex-direction: column; gap: 8px; padding-inline: 6px; }
.am-lp-ex__a { align-self: flex-start; font-weight: 600; text-decoration: underline; text-decoration-color: var(--magenta); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.am-lp-ex__a:hover { color: var(--magenta); }
.am-lp-near { max-width: 760px; padding: clamp(24px, 4vw, 48px); background: var(--white); border-left: 6px solid var(--magenta); }
.am-lp-scan { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px, 4vw, 48px); }
.am-lp-scan__h { font-family: var(--display); font-weight: 900; letter-spacing: -.04em; line-height: .95; }
.am-lp-towns { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.am-lp-towns a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 2px solid var(--ink); font: 600 .95rem/1 var(--body); text-decoration: none; transition: background .3s, color .3s; }
.am-lp-towns a:hover, .am-lp-towns a:focus-visible { background: var(--ink); color: #fff; }
.am-lp-towns--lg a { min-height: 52px; padding: 0 22px; font-size: 1.05rem; }
.am-lp-bizlocal { padding-top: 0; }
.am-lp-bizlocal__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.am-footer__towns { margin-top: 10px; font-size: .85rem; line-height: 1.6; }
@media (max-width: 1100px) { .am-lp-ex { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
.am-lp-hero__grid, .am-lp-local__grid, .am-lp-bizlocal__in, .am-lp-ex[data-n="1"] .am-lp-ex__item { grid-template-columns: 1fr; }
.am-lp-hero__media { aspect-ratio: 16 / 11; }
}
@media (max-width: 560px) { .am-lp-ex { grid-template-columns: 1fr; } }
/* lines that would cross text or buttons on phones */
@media (max-width: 760px) { .am-line--desk { display: none; } }
/* ---------- Filmmoment v2 (.am-cine2): van post tot bezoek, gepind drieluik met klantreels in een gsm ---------- */
.am-cine2 { --c2-ease: cubic-bezier(.77, 0, .18, 1); position: relative; background: #0e0e10; color: #fff; overflow-x: clip; }
.am-cine2__steps { list-style: none; margin: 0; padding: 0; }
/* Basis = leesbare lijst met stills (zonder JavaScript of bij reduced motion) */
.am-cine2__track { max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--gut) var(--sec) var(--gut); }
.am-cine2__steps { display: grid; gap: clamp(3.5rem, 8vw, 5rem); }
.am-cine2__step { display: grid; gap: 22px; justify-items: start; }
.am-cine2__bg, .am-cine2__frame, .am-cine2__rail, .am-cine2__vid, .am-cine2__ui > :not(.am-cine2__who) { display: none; }
.am-cine2__word { margin: 0; font: 900 clamp(2.6rem, 11vw, 5.5rem)/.9 var(--display); letter-spacing: -.05em; }
.am-cine2__word span { display: inline-block; }
.am-cine2__line { margin: 10px 0 0; font-size: var(--fs-lead); font-weight: 300; color: rgba(255,255,255,.82); max-width: 24ch; }
.am-cine2__phone { position: relative; width: min(64vw, 270px); aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; background: #1a1a1f; box-shadow: 0 0 0 8px #18181c, 0 0 0 9px rgba(255,255,255,.14), var(--am-shadow); margin-left: 9px; }
.am-cine2__wipe, .am-cine2__screen, .am-cine2__media { position: absolute; inset: 0; }
.am-cine2__still, .am-cine2__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.am-cine2__ui { position: absolute; inset: 0; pointer-events: none; font: 600 .78rem/1.1 var(--body); letter-spacing: 0; }
.am-cine2__ui::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55)); }
.am-cine2__who { position: absolute; left: 12px; right: 52px; bottom: 16px; display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 6px rgba(0,0,0,.5); white-space: nowrap; }
.am-cine2__who i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #0e0e10; box-shadow: 0 0 0 2px #0e0e10, 0 0 0 4px transparent; position: relative; }
.am-cine2__who i::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--grad); z-index: -1; }
.am-cine2__who b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.am-cine2__who span { font-weight: 500; opacity: .75; }
@media (min-width: 900px) {
.am-cine2__steps { grid-template-columns: repeat(3, 1fr); gap: 48px; align-items: start; }
.am-cine2__step { gap: 28px; }
.am-cine2__word { font-size: clamp(2.6rem, 4.6vw, 4.6rem); }
}
/* Gepinde modus (JS zet .is-pin) */
.am-cine2.is-pin .am-cine2__track { max-width: none; padding: 0; height: 350vh; height: 350svh; }
.is-pin .am-cine2__stage { --ph: min(54svh, 116vw); position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.is-pin .am-cine2__steps { display: block; position: absolute; inset: 0; }
.is-pin .am-cine2__step { position: absolute; inset: 0; display: block; pointer-events: none; }
.is-pin .am-cine2__step { visibility: visible; transition: visibility 0s; }
.is-pin .am-cine2__step.is-gone { visibility: hidden; transition-delay: .6s; }
/* Achtergrond: vervaagde, gegradeerde still van dezelfde reel, schuine wipe */
.is-pin .am-cine2__bg { display: block; position: absolute; inset: 0; overflow: hidden; clip-path: polygon(118% 0, 118% 0, 100% 100%, 100% 100%); transition: clip-path 1.15s var(--c2-ease); }
.is-pin .am-cine2__bg img { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; transform: scale(calc(1.06 + var(--kb, 0) * .08)); filter: saturate(1.1); }
.is-pin .am-cine2__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,16,.78) 0%, rgba(14,14,16,.42) 40%, rgba(14,14,16,.7) 100%); }
.is-pin .am-cine2__step.is-active .am-cine2__bg, .is-pin .am-cine2__step.is-past .am-cine2__bg { clip-path: polygon(0 0, 118% 0, 100% 100%, -18% 100%); }
/* Gsm: één vast kader, de schermen wisselen erin met dezelfde schuine wipe */
.is-pin .am-cine2__phone, .am-cine2.is-pin .am-cine2__frame { position: absolute; z-index: 2; margin: 0; width: auto; height: var(--ph); aspect-ratio: 9 / 16; left: calc(50% - var(--ph) * 9 / 32); top: calc(100% - 92px - var(--ph)); border-radius: calc(var(--ph) * .062); }
.is-pin .am-cine2__phone { box-shadow: none; background: transparent; }
.is-pin .am-cine2__wipe { background: #121216; }
.is-pin .am-cine2__wipe { clip-path: polygon(118% 0, 118% 0, 100% 100%, 100% 100%); transition: clip-path 1.05s var(--c2-ease) .08s; }
.is-pin .am-cine2__step.is-active .am-cine2__wipe, .is-pin .am-cine2__step.is-past .am-cine2__wipe { clip-path: polygon(0 0, 118% 0, 100% 100%, -18% 100%); }
.am-cine2.is-pin .am-cine2__frame { display: block; z-index: 3; pointer-events: none; box-shadow: 0 0 0 8px #18181c, 0 0 0 9px rgba(255,255,255,.16), var(--am-shadow); }
.am-cine2__frame i { position: absolute; left: 50%; top: 9px; width: 28%; height: 18px; margin-left: -14%; border-radius: 12px; background: #0b0b0d; }
.is-pin .am-cine2__vid { display: block; }
.is-pin .am-cine2__ui > * { display: block; }
.is-pin .am-cine2__who, .is-pin .am-cine2__pill { display: flex; }
/* Interface in het scherm */
.am-cine2__acts { position: absolute; right: 10px; bottom: 16px; display: grid; gap: 14px; }
.am-cine2__act { display: block; width: 26px; height: 26px; filter: drop-shadow(var(--am-shadow)); }
.am-cine2__act svg, .am-cine2__hearts svg, .am-cine2__pill svg { display: block; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.am-cine2__pill { position: absolute; left: 50%; top: 40px; transform: translate3d(-50%, -14px, 0); opacity: 0; align-items: center; gap: 7px; padding: 8px 12px; white-space: nowrap; background: rgba(14,14,16,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 999px; font-weight: 600; transition: opacity .4s ease, transform .6s var(--ease-out); }
.am-cine2__pill--new { background: var(--grad); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.am-cine2__pill--new i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: am-cine2-blink 1.1s steps(1) infinite; }
.am-cine2__pill--pin svg { width: 15px; height: 15px; }
.is-pin .am-cine2__step.is-active .am-cine2__pill { opacity: 1; transform: translate3d(-50%, 0, 0); transition-delay: 1s; }
@keyframes am-cine2-blink { 50% { opacity: .2; } }
/* Dinsdag: de post schuift bovenaan in de feed */
.am-cine2__step[data-key="live"] .am-cine2__screen { background: #121216 linear-gradient(#22222a, #22222a) 12px 52px / 40% 10px no-repeat; }
.am-cine2__step[data-key="live"] .am-cine2__screen::before { content: ""; position: absolute; left: 12px; right: 12px; top: 74px; bottom: 12px; border-radius: 10px; background: #1c1c22; }
.is-pin .am-cine2__step[data-key="live"] .am-cine2__media, .is-pin .am-cine2__step[data-key="live"] .am-cine2__who, .is-pin .am-cine2__step[data-key="live"] .am-cine2__acts { transform: translate3d(0, -104%, 0); transition: transform .95s var(--c2-ease); }
.is-pin .am-cine2__step[data-key="live"] .am-cine2__who, .is-pin .am-cine2__step[data-key="live"] .am-cine2__acts { transform: translate3d(0, 30px, 0); opacity: 0; transition: transform .7s var(--ease-out), opacity .5s ease; }
.is-pin .am-cine2__step[data-key="live"].is-active .am-cine2__media { transform: none; transition-delay: .55s; }
.is-pin .am-cine2__step[data-key="live"].is-active .am-cine2__who, .is-pin .am-cine2__step[data-key="live"].is-active .am-cine2__acts { transform: none; opacity: 1; transition-delay: 1.25s; }
/* Donderdag: hartjes stijgen, het deel-icoon stuurt bolletjes de buurt in */
.am-cine2__hearts { position: absolute; right: 10px; bottom: 120px; width: 26px; height: 50%; }
.am-cine2__hearts i { position: absolute; left: 0; bottom: 0; width: 22px; height: 22px; opacity: 0; }
.am-cine2__hearts svg { fill: var(--g2); stroke: none; }
.am-cine2__hearts i:nth-child(3n+2) svg { fill: var(--g1); }
.am-cine2__hearts i:nth-child(3n) svg { fill: var(--g4); }
.is-pin .am-cine2__step.is-active .am-cine2__hearts i { animation: am-cine2-heart 2.6s cubic-bezier(.3, .6, .4, 1) infinite; animation-delay: calc(.9s + var(--k) * .37s); }
@keyframes am-cine2-heart {
0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.4); }
12% { opacity: 1; transform: translate3d(-4px, -12%, 0) scale(1); }
60% { opacity: .9; transform: translate3d(8px, -240%, 0) scale(.9) rotate(8deg); }
100% { opacity: 0; transform: translate3d(-6px, -420%, 0) scale(.7) rotate(-6deg); }
}
.is-pin .am-cine2__step.is-active .am-cine2__act--heart svg { fill: var(--g2); stroke: var(--g2); animation: am-cine2-pop 1.3s var(--ease-out) .8s infinite; }
.is-pin .am-cine2__step[data-key="share"].is-active .am-cine2__act--share { animation: am-cine2-pop 1.6s var(--ease-out) 1.2s infinite; }
@keyframes am-cine2-pop { 0% { transform: scale(1); } 18% { transform: scale(1.28); } 40%, 100% { transform: scale(1); } }
.am-cine2__fly { position: absolute; right: 14px; bottom: 22px; width: 18px; height: 18px; }
.am-cine2__fly i { position: absolute; inset: 0; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 2px #fff; opacity: 0; }
.is-pin .am-cine2__step.is-active .am-cine2__fly i { animation: am-cine2-fly 1.6s var(--c2-ease) infinite; animation-delay: calc(1.25s + var(--k) * .4s); }
.am-cine2__fly i:nth-child(1) { --fx: -120px; --fy: -60px; }
.am-cine2__fly i:nth-child(2) { --fx: -60px; --fy: -150px; }
.am-cine2__fly i:nth-child(3) { --fx: -150px; --fy: -170px; }
.am-cine2__fly i:nth-child(4) { --fx: -100px; --fy: -250px; }
@keyframes am-cine2-fly { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.5); } 15% { opacity: 1; } 70% { opacity: 1; transform: translate3d(var(--fx), var(--fy), 0) scale(1); } 100% { opacity: 0; transform: translate3d(var(--fx), var(--fy), 0) scale(1.3); } }
/* Kopij: woord schuift uit een masker, regel volgt */
.is-pin .am-cine2__copy { position: absolute; z-index: 4; left: var(--gut); right: var(--gut-r); top: 92px; }
.is-pin .am-cine2__word { overflow: hidden; padding-bottom: .06em; white-space: nowrap; font-size: min(calc((100vw - 2 * max(20px, 4.5vw)) / (var(--n, 10) * .66)), 9svh); }
.is-pin .am-cine2__word span { transform: translate3d(0, 130%, 0); transition: transform .55s var(--c2-ease); }
.is-pin .am-cine2__step.is-active .am-cine2__word span { transform: none; transition: transform .95s var(--c2-ease) .22s; }
.is-pin .am-cine2__step.is-past .am-cine2__word span { transform: translate3d(0, -130%, 0); }
.is-pin .am-cine2__line { margin-top: 8px; font-weight: 400; color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.55); opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .35s ease, transform .5s var(--ease-out); }
.is-pin .am-cine2__step.is-active .am-cine2__line { opacity: 1; transform: none; transition: opacity .7s ease .5s, transform 1s var(--ease-out) .5s; }
/* Voortgang */
.is-pin .am-cine2__rail { display: block; position: absolute; z-index: 5; left: var(--gut); right: var(--gut-r); bottom: max(18px, env(safe-area-inset-bottom, 0px)); }
.am-cine2__fill { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255,255,255,.18); }
.am-cine2__fill i { position: absolute; inset: 0; background: var(--grad); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.am-cine2__rail ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.am-cine2__rail button { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; width: 100%; min-height: 44px; cursor: pointer; font: 600 .72rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); transition: color .3s ease; }
.am-cine2__rail button i { width: 2px; height: 10px; margin-top: -4px; background: rgba(255,255,255,.45); transition: background-color .3s ease, transform .3s ease; }
.am-cine2__rail button:hover, .am-cine2__rail button[aria-current="step"] { color: #fff; }
.am-cine2__rail button[aria-current="step"] i { background: #fff; transform: scaleY(1.6); }
.am-cine2__rail button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* Filmkorrel */
.is-pin .am-cine2__stage::after { content: ""; position: absolute; inset: -50%; z-index: 6; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: am-day2-grain .9s steps(4) infinite; }
@media (max-width: 899px) and (max-height: 720px) {
.is-pin .am-cine2__stage { --ph: min(48svh, 116vw); }
.is-pin .am-cine2__copy { top: 80px; }
.is-pin .am-cine2__phone, .am-cine2.is-pin .am-cine2__frame { top: calc(100% - 80px - var(--ph)); }
}
@media (min-width: 900px) {
.is-pin .am-cine2__stage { --ph: min(74svh, 760px); }
.is-pin .am-cine2__phone, .am-cine2.is-pin .am-cine2__frame { left: calc(71% - var(--ph) * 9 / 32); top: calc(50% - var(--ph) / 2 + 12px); }
.is-pin .am-cine2__stage { --cw: calc(71vw - var(--ph) * 9 / 32 - var(--gut) - 5vw); }
.is-pin .am-cine2__copy { top: 50%; right: auto; width: var(--cw); transform: translateY(-46%); }
.is-pin .am-cine2__word { font-size: min(calc(var(--cw) / (var(--n, 10) * .62)), 17svh); }
.is-pin .am-cine2__line { font-size: clamp(1.3rem, 1.9vw, 1.9rem); margin-top: 14px; }
.is-pin .am-cine2__rail { right: auto; width: min(620px, var(--cw)); bottom: 40px; }
.is-pin .am-cine2__bg::after { background: linear-gradient(90deg, rgba(14,14,16,.86) 0%, rgba(14,14,16,.55) 45%, rgba(14,14,16,.35) 100%); }
.am-cine2__ui { font-size: .86rem; }
.am-cine2__act { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
.am-cine2 .am-cine2__ui * { animation: none !important; }
}
/* About hero mobile v2: Tom en Dorien naast elkaar, Fonz centraal eronder */
@media (max-width: 760px) {
.am-about-hero .am-trio { height: auto; aspect-ratio: 1 / 1.04; max-height: none; margin-top: 8px; }
.am-about-hero .am-trio .t-tom { left: 0; top: 0; bottom: auto; right: auto; width: 49%; aspect-ratio: 3 / 4; background: none; z-index: 1; }
.am-about-hero .am-trio .t-tom img { object-fit: cover !important; object-position: 70% 28% !important; }
.am-about-hero .am-trio .t-dorien { left: auto; right: 0; top: 9%; bottom: auto; width: 49%; aspect-ratio: 3 / 4; z-index: 2; }
.am-about-hero .am-trio .t-dorien img { object-position: 50% 18% !important; }
.am-about-hero .am-trio .t-fonz { left: 33%; right: auto; top: auto; bottom: 0; width: 34%; aspect-ratio: 1; z-index: 3; filter: drop-shadow(var(--am-shadow)); }
}
/* Pakketten v3: twee vaste pakketten plus premiumkaart "Op maat" */
.am-pk .am-card--pop { border-top-color: var(--magenta); }
.am-pk .am-card--pop .am-card__badge { right: 0; top: 14px; }
.am-pk .am-card--pop .am-card__t { padding-right: 132px; }
.am-pk .am-card--prem {
--b: 2px;
padding: clamp(24px, 2.4vw, 32px);
border: var(--b) solid transparent;
border-top: var(--b) solid transparent;
background:
radial-gradient(120% 80% at 100% 0%, rgba(155,74,216,.28), transparent 60%) padding-box,
radial-gradient(90% 70% at 0% 100%, rgba(245,80,122,.18), transparent 60%) padding-box,
linear-gradient(160deg, #17171c 0%, var(--ink) 100%) padding-box,
var(--grad) border-box;
color: #fff;
box-shadow: var(--am-shadow)!important;
}
.am-pk .am-card--prem::after { display: none; }
.am-pk .am-card--prem .am-card__badge { position: static; align-self: flex-start; order: -1; margin-bottom: 6px; }
.am-pk .am-card--prem > span:nth-of-type(3) { color: rgba(255,255,255,.82); }
.am-pk .am-card--prem li::before { background: var(--grad); }
.am-pk .am-card--prem .am-card__p { color: rgba(255,255,255,.7); }
.am-pk .am-card--prem .am-card__p b { color: #fff; font-size: clamp(2.2rem, 3.4vw, 3.2rem); background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .08em; }
@media (max-width: 860px) {
.am-pk .am-card--pop .am-card__t { padding-right: 0; }
.am-pk .am-card--pop .am-card__badge { position: static; align-self: flex-start; order: -1; }
}
.am-footer .am-frecent__item > .am-frecent__card { display: block; padding-block: 0; }
@media (hover: hover) and (pointer: fine) { .am-tile:hover .am-tile__shade::after { opacity: .38; } }
/* responsive QA */
/* 1 nooit horizontaal scrollen, ook niet in iOS Safari (body alleen volstaat daar niet) */
@supports (overflow: clip) { html, body { overflow-x: clip; } }
@supports not (overflow: clip) { body { overflow-x: hidden; } }
/* 2 grids: kolommen groeien nooit mee met lange woorden of grote prijzen (1fr = minmax(auto, 1fr)) */
:is(.am-hero__grid, .am-band, .am-close__grid, .am-footer__cols, .am-feed, .am-cards, .am-contact__grid, .am-form__grid, .am-doors, .am-list__item, .am-duo, .am-lp-hero__grid, .am-lp-local__grid, .am-lp-bizlocal__in, .am-lp-ex, .am-gear, .am-steps, .am-tiles, .am-facts, .am-mosaic, .am-ticks, .am-storycta__in, .am-nums, .am-kpis__l, .am-month, .am-promise, .am-head, .am-band__copy, .am-person, .am-card) > * { min-width: 0; }
.am-card, .am-person, .am-door { min-width: 0; }
@media (max-width: 900px) { .am-band { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .am-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .am-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
main :is(h1, h2, h3, h4, p, li, dt, dd, summary, blockquote, figcaption, label, .am-card__t, .am-door__t, .am-door__s, .am-question), .am-footer :is(p, li, a) { overflow-wrap: break-word; }
.am-footer__cols p, .am-footer__cols a { overflow-wrap: break-word; overflow-wrap: anywhere; }
/* 3 knoprijen breken af in plaats van uit beeld te lopen */
.am-row { max-width: 100%; }
.am-row > .am-btn { max-width: 100%; }
@media (max-width: 480px) { .am-row > .am-btn { white-space: normal; text-align: center; line-height: 1.15; padding-block: 12px; } }
/* 4 prijskaarten 2x2 op gsm: prijs schaalt mee met de breedte */
@media (max-width: 560px) {
.am-cards[style*="--cols: 4"] { --cols: 2 !important; gap: 10px; }
.am-cards[style*="--cols:4"] .am-card, .am-cards[style*="--cols: 4"] .am-card { padding: 14px; }
.am-cards[style*="--cols:4"] .am-card__p b, .am-cards[style*="--cols: 4"] .am-card__p b { font-size: clamp(1.25rem, 7vw, 1.7rem); }
.am-cards .am-card__t { overflow-wrap: break-word; overflow-wrap: anywhere; }
}
/* 5 inhoud nooit onder de vaste header: iPhone-notch (safe area) bij de bovenmarge optellen */
.am-hero { padding-top: calc(120px + env(safe-area-inset-top, 0px)); }
.am-hero--biz, .am-about-hero { padding-top: calc(110px + env(safe-area-inset-top, 0px)); }
.am-contact { padding-top: calc(120px + env(safe-area-inset-top, 0px)); }
.am-full { padding-top: calc(clamp(104px, 12vh, 130px) + env(safe-area-inset-top, 0px)); }
@media (max-width: 900px) { .am-hero { padding-top: calc(108px + env(safe-area-inset-top, 0px)); } }
@media (max-width: 760px) { .am-full--org { padding-top: calc(76px + env(safe-area-inset-top, 0px)); } }
@media (max-height: 500px) and (orientation: landscape) { .am-hero, .am-full, .am-hero--biz, .am-about-hero, .am-contact { padding-top: calc(108px + env(safe-area-inset-top, 0px)); } }
/* ingelogd in WordPress: header onder de adminbalk */
@media (min-width: 601px) { body.admin-bar .am-header { top: var(--wp-admin--admin-bar--height, 32px); } }
/* 6 geen wezen in rasters */
@media (min-width: 600px) {
.am-ticks:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.am-ticks:has(> li:nth-child(4):last-child), .am-ticks:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.am-nums:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.am-nums:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.am-ticks:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.am-nums:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) { .am-ticks:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 761px) {
.am-grid:not(:has(> .is-hidden)) > :last-child:nth-child(odd) { grid-column: 1 / -1 !important; margin-top: 0 !important; }
.am-grid:not(:has(> .is-hidden)) > :last-child:nth-child(odd) .am-story-card__media { aspect-ratio: 21 / 9; }
}
@media (min-width: 1101px) { .am-cards.am-extras:has(> :nth-child(6):last-child) { --cols: 3 !important; } }
@media (max-width: 400px) { .am-filter { gap: 6px; } .am-filter button { padding: 0 12px; font-size: .86rem; } }
/* 7 tikdoelen minstens 44 px */
.am-fig__a { display: inline-flex; align-items: center; min-height: 44px; }
.am-list__proof, .am-mem__again { min-height: 44px; }
/* 8 regenbooglijn op de home-hero (tablet staand) blijft onder de deuren */
@media (min-width: 761px) and (max-width: 1100px) { .am-hero--home > .am-hero__line { height: clamp(5rem, 11vw, 9rem); } }
/* Vaste balk: zelfde gutter als de pagina, alle blokken even hoog en één doorlopende schuine onderrand */
@media (max-width: 1024px) {
.am-stickycta { left: var(--gut, 20px); right: var(--gut-r, var(--gut, 20px)); gap: 6px; align-items: stretch; filter: drop-shadow(var(--am-shadow)); }
.am-stickycta > a { min-height: 54px; height: 54px; margin: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), 0 100%) !important; box-shadow: none !important; }
.am-stickycta__main { flex: 1 1 auto; }
.am-stickycta__tel, .am-stickycta__wa { flex: 0 0 54px; width: 54px; }
}
/* Footer: e-mailadres nooit afgesneden */
.am-footer__cols a[href^="mailto:"] { overflow-wrap: break-word; overflow-wrap: anywhere; word-break: break-word; }
/* Extra's op gsm: geen strip, 1 per rij */
@media (max-width: 560px) {
.am-extras { display: grid !important; grid-template-columns: 1fr !important; overflow: visible !important; scroll-snap-type: none !important; gap: 12px; padding-inline: 0 !important; margin-inline: 0 !important; }
.am-extras > * { width: auto !important; min-width: 0 !important; flex: none !important; }
}
/* responsive QA: titels nooit midden in een woord breken */
main :is(h1, h2, .am-hero__title, .am-question) { overflow-wrap: normal; }
/* responsive QA: drie extra's op tablet naast elkaar, geen 2 + 1 */
@media (min-width: 561px) and (max-width: 1100px) { .am-cards[style*="--cols:4"]:has(> :nth-child(3):last-child) { --cols: 3 !important; gap: 10px; } .am-cards[style*="--cols:4"]:has(> :nth-child(3):last-child) > .am-card { padding: 18px; } }
/* responsive QA: lijn onderaan de verhalenlijst loopt op tablet niet door de laatste titels */
@media (min-width: 761px) and (max-width: 1100px) { .am-sec:has(> svg.am-line--desk[style*="bottom"]) { padding-bottom: calc(var(--sec) + 200px); } }
@media (max-width: 1024px) { .am-stickycta__li { background: var(--ink) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28) !important; } }
/* responsive QA: lange Nederlandse woorden in grote titels op gsm (boekvoorstelling, hoofdstukken) */
@media (max-width: 760px) {
html:lang(nl) main :is(h1, h2, .am-hero__title, .am-question) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 9 4 4; overflow-wrap: break-word; overflow-wrap: anywhere; }
html:lang(nl) main :is(h1, h2, .am-hero__title, .am-question) .am-split-word { max-width: 100%; white-space: normal !important; overflow-wrap: break-word; overflow-wrap: anywhere; }
}
/* responsive QA: slottitel blijft in zijn kolom */
.am-close__grid > :not(.am-close__media) { container-type: inline-size; }
.am-close__big { font-size: min(clamp(3rem, 9vw, 9.5rem), 22cqi); }
/* responsive QA: tikdoelen */
.am-filter button { min-width: 44px; justify-content: center; }
.am-lp-ex__a { display: inline-flex; align-items: center; min-height: 44px; }
/* responsive QA: slottitel iets strakker begrensd */
.am-close__big { font-size: min(clamp(3rem, 9vw, 9.5rem), 19.5cqi); }
/* Verhaalpagina: "Bekijk het resultaat" (links naar de publieke eindresultaten) */
.am-result { background: var(--ink); color: #fff; position: relative; padding-block: calc(var(--sec) + var(--slant)) var(--sec); clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); }
.am-result .am-eyebrow { color: rgba(255,255,255,.75); }
.am-result .am-h2 { color: #fff; margin-top: 10px; }
.am-result__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.22); }
.am-result__list li { border-bottom: 1px solid rgba(255,255,255,.22); }
.am-result__row { display: grid; grid-template-columns: 9rem 1fr auto; align-items: center; gap: 18px; min-height: 44px; padding: 20px 0; color: #fff; text-decoration: none; position: relative; transition: padding .5s var(--ease-out); }
.am-result__row::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; background: var(--magenta); transform: skewY(-4deg) scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease-out); }
.am-result__src { font-size: var(--fs-small); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.am-result__t { font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.3; overflow-wrap: break-word; min-width: 0; }
.am-result__go { font-size: 1.6rem; line-height: 1; color: var(--magenta); transition: transform .5s var(--ease-out); }
.am-result__row:hover, .am-result__row:focus-visible { padding-left: 18px; }
.am-result__row:hover::before, .am-result__row:focus-visible::before { transform: skewY(-4deg) scaleY(1); }
.am-result__row:hover .am-result__go, .am-result__row:focus-visible .am-result__go { transform: translate(4px, -4px); }
.am-result__row:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
@media (max-width: 640px) { .am-result__row { grid-template-columns: 1fr auto; gap: 6px 14px; } .am-result__src { grid-column: 1 / -1; } }
/* responsive QA: grote tekstinstelling op gsm (iOS) laat titels niet uit beeld lopen */
@media (max-width: 760px) {
main :is(h1, h2, .am-hero__title, .am-question):not(.am-day2-sec *) { overflow-wrap: break-word; }
}
/* responsive QA: lokale landingspagina's ook onder de notch vrij */
.am-lp-hero { padding-top: calc(clamp(120px, 14vw, 190px) + env(safe-area-inset-top, 0px)); }
/* KPI: plusteken naast het cijfer */
.am-kpis__i > .am-kpis__n:not(.am-kpis__suf) { display: inline-block; }
.am-kpis__i > .am-kpis__suf { display: inline-block; margin-left: .04em; }
/* Dagfilm: geen fotoflits over de tekening (oogde als fout) */
.am-day2__flash { display: none !important; }
/* ---------- Scrollverhalen op gsm: half zo lang + knop "Sla over" ----------
Desktop blijft ongewijzigd. De knop bestaat enkel als het verhaal gepind is (site.js, window.__amSkip). */
.am-pinskip { display: none; }
@media (max-width: 760px) {
.am-day2-sec.is-cine .am-day2 { height: calc(var(--n) * 30svh + 100svh); }
.am-month2-sec.is-run .am-month2 { height: calc(4 * 42svh + 100svh); }
.am-cine2.is-pin .am-cine2__track { height: 190vh; height: 190svh; }
.am-pinskip { all: unset; box-sizing: border-box; position: absolute; z-index: 30; right: var(--gut-r, 20px); display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 12px; cursor: pointer; font: 600 .7rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(14,14,16,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.28); transition: background-color .2s ease, border-color .2s ease; }
.am-pinskip:hover, .am-pinskip:focus-visible { background: rgba(14,14,16,.9); border-color: #fff; }
.am-pinskip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.am-pinskip svg { flex: none; }
.is-cine .am-day2__stage > .am-pinskip { top: auto; bottom: calc(max(22px, env(safe-area-inset-bottom, 0px)) + 62px); }
.is-run .am-month2__stage > .am-pinskip { top: 72px; }
.is-pin .am-cine2__stage > .am-pinskip { top: 72px; }
/* horizontale strip: knop op de lijn van de voortgangsbalk, die korter wordt */
.am-hpin.is-on .am-hpin__bar { margin-right: calc(var(--gut-r, 20px) + 7.5rem); }
.am-hpin.is-on .am-hpin__sticky > .am-pinskip { bottom: -17px; color: var(--ink, #0e0e10); background: #fff; border-color: rgba(14,14,16,.28); -webkit-backdrop-filter: none; backdrop-filter: none; }
.am-hpin.is-on .am-hpin__sticky > .am-pinskip:hover, .am-hpin.is-on .am-hpin__sticky > .am-pinskip:focus-visible { background: #f2f2f4; border-color: currentColor; }
.am-hpin.is-on .am-hpin__sticky > .am-pinskip:focus-visible { outline-color: currentColor; }
.am-hpin:not(.is-on) .am-pinskip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .am-pinskip { display: none !important; } }
/* ===== Klantenband (.am-cband): werkvenster + rustig bewegende logoband, ondernemerspagina ===== */
.am-cband { --cw: 132px; --ch: 66px; --item: 176px; --dur-band: 46s; position: relative; min-width: 0; }
.am-cband [hidden] { display: none !important; }
.am-cband__stage { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.am-cband__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); isolation: isolate; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.am-cband__layer { position: absolute; inset: 0; }
.am-cband__layer.is-in { z-index: 2; animation: am-cband-wipe .9s var(--ease-out) both; }
.am-cband__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.am-cband__reel { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; container-type: size; }
.am-cband__blur { position: absolute; inset: -15%; width: 130%; height: 130%; max-width: none; object-fit: cover; filter: blur(22px) saturate(1.2) brightness(.55); transform: scale(1.05); }
.am-cband__reel video { position: relative; height: 90cqh; width: calc(90cqh * 9 / 16); max-width: none; object-fit: cover; display: block; box-shadow: var(--am-shadow); background: #000; }
.am-cband__sweep { position: absolute; z-index: 3; top: 0; bottom: 0; left: -16%; width: 14%; background: var(--grad); transform: skewX(-4.6deg); opacity: 0; pointer-events: none; }
.am-cband.is-wiping .am-cband__sweep { animation: am-cband-sweep .9s var(--ease-out) both; }
@keyframes am-cband-wipe { from { clip-path: polygon(0 0, 0 0, -8% 100%, -8% 100%); } to { clip-path: polygon(0 0, 108% 0, 100% 100%, -8% 100%); } }
@keyframes am-cband-sweep { 0% { left: -14%; opacity: 1; } 80% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.am-cband__info { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 6px; min-width: 0; }
.am-cband__info > * { transition: opacity .45s ease, transform .6s var(--ease-out); }
.am-cband.is-swap .am-cband__info > * { opacity: 0; transform: translateY(14px); transition: none; }
.am-cband__no { font: 600 .82rem/1 var(--body); letter-spacing: .08em; color: rgba(14, 14, 16, .55); font-variant-numeric: tabular-nums; }
.am-cband__no b { color: var(--ink); font-weight: 800; }
.am-cband__tag { display: inline-flex; align-items: center; gap: .5em; padding: 6px 10px; background: var(--ink); color: #fff; font: 600 .78rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.am-cband__tag::before { content: ""; width: .6em; height: .6em; background: var(--grad); }
.am-cband__name { font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: .92; letter-spacing: -.045em; overflow-wrap: break-word; overflow-wrap: anywhere; max-width: 100%; }
.am-cband__what { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.am-cband__what span { font: 600 .78rem/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: rgba(14, 14, 16, .55); }
.am-cband__what b { font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 600; line-height: 1.3; }
.am-cband__link { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; font-weight: 700; color: var(--ink); text-decoration: none; background: linear-gradient(var(--magenta), var(--magenta)) 0 calc(100% - 8px) / 100% 2px no-repeat; }
.am-cband__link i { width: .55em; height: .55em; background: var(--magenta); transition: transform .4s var(--ease-out); }
.am-cband__link:hover i, .am-cband__link:focus-visible i { transform: translateX(6px); }
.am-cband__timer { height: 3px; margin-top: clamp(18px, 2.4vw, 28px); background: var(--line); overflow: hidden; }
.am-cband__timer i { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); }
.am-cband__rail { position: relative; overflow: hidden; margin-top: 10px; display: flex; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.am-cband__track { list-style: none; margin: 0; padding: 0; display: flex; flex: none; animation: am-cband-marq var(--dur-band) linear infinite; }
.am-cband__track li { flex: none; width: var(--item); padding: 8px 6px; }
.am-cband__rail:hover .am-cband__track, .am-cband__rail:focus-within .am-cband__track, .am-cband.is-paused .am-cband__track, .am-cband.is-off .am-cband__track { animation-play-state: paused; }
@keyframes am-cband-marq { to { transform: translateX(-100%); } }
.am-cband__item { position: relative; width: 100%; height: calc(var(--ch) + 36px); display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; isolation: isolate; color: inherit; }
.am-cband__item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mist); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: background .3s ease; }
.am-cband__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.am-cband__item[aria-pressed="true"]::before { background: #fff; box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.am-cband__item[aria-pressed="true"]::after { transform: scaleX(1); }
.am-cband__item:focus-visible { outline: 3px solid var(--magenta); outline-offset: -3px; }
.am-cband__logo { position: relative; width: var(--cw); height: var(--ch); display: flex; align-items: center; justify-content: center; }
.am-cband__logo img { display: block; height: calc(var(--ch) * var(--lh, .6)); width: auto; max-width: 100%; object-fit: contain; transform: translate(calc(var(--cw) * var(--lx, 0)), calc(var(--ch) * var(--ly, 0))); filter: grayscale(1) contrast(1.15) brightness(.85); opacity: .55; transition: filter .45s ease, opacity .45s ease; }
.am-cband__item:hover .am-cband__logo img { opacity: .85; }
.am-cband__item[aria-pressed="true"] .am-cband__logo img { filter: none; opacity: 1; }
.am-cband__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-top: 12px; }
.am-cband__hint { margin: 0; font-size: .92rem; color: rgba(14, 14, 16, .62); }
.am-cband__pause { display: inline-flex; align-items: center; gap: .55em; min-height: 44px; padding: 0 14px; border: 0; background: transparent; color: var(--ink); font: 600 .9rem/1 var(--body); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line); }
.am-cband__pause i { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.am-cband__pause[aria-pressed="true"] i { width: 0; height: 0; border-left: 10px solid currentColor; border-right: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.am-cband__pause:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.am-motion-toggle { align-self: flex-start; }
html.am-motion-paused :is(.am-marquee__track, .am-cband__track) { animation-play-state: paused; }
/* handmatige band: gsm, of zonder beweging */
.am-cband.is-manual .am-cband__rail { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.am-cband.is-manual .am-cband__rail::-webkit-scrollbar { display: none; }
.am-cband.is-manual .am-cband__track { animation: none; }
.am-cband.is-manual .am-cband__dup { display: none; }
.am-cband.is-manual .am-cband__track li { scroll-snap-align: center; }
@media (max-width: 760px) {
.am-cband { --cw: 100px; --ch: 50px; --item: 136px; }
.am-cband__stage { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.am-cband__media { aspect-ratio: 1 / 1; }
.am-cband__info { gap: 10px; }
.am-cband__name { font-size: clamp(2rem, 10vw, 2.8rem); }
.am-cband__rail { margin-inline: calc(var(--gut) * -1) calc(var(--gut-r) * -1); -webkit-mask-image: none; mask-image: none; }
.am-cband.is-manual .am-cband__track { padding-inline: calc(50% - var(--item) / 2); }
.am-cband__track li { padding: 6px 4px; }
.am-cband__timer { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.am-cband__track { animation: none; }
.am-cband__layer.is-in, .am-cband.is-wiping .am-cband__sweep { animation: none; }
.am-cband__timer { display: none; }
.am-cband__info > * { transition: none; }
}
/* ---------- Contactformulier, menu en werking zonder script (UX-fixes qa3) ---------- */
/* contactpagina: op gsm titel en belofte, dan meteen het formulier; het anker #form zit op het formulier */
.am-contact__grid { grid-template-areas: "head form" "aside form"; grid-template-rows: auto 1fr; row-gap: 26px; }
.am-contact__head { grid-area: head; display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.am-contact__formcol { grid-area: form; min-width: 0; padding-top: clamp(0px, 4vw, 60px); }
.am-contact__grid > .am-contact__aside { grid-area: aside; align-self: start; }
@media (max-width: 900px) {
.am-contact__grid { grid-template-areas: "head" "form" "aside"; grid-template-rows: auto; row-gap: 32px; }
.am-contact__formcol { padding-top: 0; }
}
#form, .am-form, .am-form__done { scroll-margin-top: 92px; }
.am-field > label { display: block; }
.am-field__err { margin: 0; color: #a3122b; font-size: .85rem; font-weight: 600; line-height: 1.35; }
.am-field__err[hidden], .am-form__sum[hidden], .am-field__req[hidden] { display: none; }
.am-form__sum { margin: 0; }
.am-form__sum p { margin: 0; }
.am-form__sum ul { margin: 8px 0 0; padding-left: 1.2em; }
.am-form__sum a { color: inherit; text-decoration: underline; }
.am-form__sum:focus { outline: 3px solid var(--magenta); outline-offset: 3px; }
.am-btn.is-busy { opacity: .7; cursor: progress; }
.am-form__done:focus { outline: 3px solid var(--magenta); outline-offset: 4px; }
/* menu: eigen scroller zonder doorscrollen naar de pagina */
.am-menu, .am-menu__nav { overscroll-behavior: contain; }
/* script faalt of laadt niet binnen 1,5 s (am-failsafe uit de head): alles zichtbaar, geen intropaneel */
.am-failsafe [data-reveal], .am-failsafe [data-wipe], .am-failsafe .am-cine__word, .am-failsafe [data-split-now] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.am-failsafe [data-wipe] > img, .am-failsafe [data-wipe] > video { transform: none !important; }
.am-failsafe .am-intro { display: none !important; }
/* maandkalender: zonder werkend script de gevulde maand tonen in plaats van lege vakken */
html:not(.js) .am-month2__item, .am-failsafe:not(.am-ready) .am-month2__item { opacity: 1; transform: none; }
html:not(.js) .am-month2__yours ol, .am-failsafe:not(.am-ready) .am-month2__yours ol { height: auto; }
html:not(.js) .am-month2__yours li, .am-failsafe:not(.am-ready) .am-month2__yours li { position: relative; inset: auto; opacity: 1; transform: none; white-space: normal; }
/* geen JS, of de menuknop werkt niet (am-nojs): gewone navigatie als schuifbare rij onder de header */
@media (max-width: 1080px) {
html:not(.js) .am-burger, html.am-nojs:not(.am-menu-ready) .am-burger { display: none; }
html:not(.js) .am-header__end .am-lang, html.am-nojs:not(.am-menu-ready) .am-header__end .am-lang { display: flex; }
html:not(.js) .am-nav, html.am-nojs:not(.am-menu-ready) .am-nav { display: block; position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: var(--ink); box-shadow: 0 1px 0 rgba(14,14,16,.08); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
html:not(.js) .am-nav ul, html.am-nojs:not(.am-menu-ready) .am-nav ul { gap: 22px; padding: 0 var(--gut-r) 0 var(--gut); white-space: nowrap; }
html:not(.js) .am-nav a, html.am-nojs:not(.am-menu-ready) .am-nav a { padding-block: 12px; }
}
/* ---------- Contrast: lichter magenta op donker + focus zoals hover ----------
#a2216e haalt op #0e0e10 maar 2,7:1. --magenta-hi (#e0559b) haalt 5,5:1: voor tekst en focusranden op donker.
Merkmagenta blijft voor vlakken en voor gebruik op licht. */
:root { --magenta-hi: #e0559b; }
.am-theme-dark :focus-visible, .am-theme-hero-dark .am-full :focus-visible, .am-bg-ink :focus-visible, .am-cta :focus-visible, .am-footer :focus-visible,
.am-card--dark :focus-visible, .am-card--feat :focus-visible, .am-close--tom :focus-visible, .am-result :focus-visible, .am-full :focus-visible,
.am-next:focus-visible, .am-door:focus-visible, .am-form__done :focus-visible, .am-day2-sec :focus-visible, .am-dfx-sec :focus-visible,
.am-cine2 :focus-visible, .am-cine :focus-visible, .am-nums-sec :focus-visible, .am-stickycta :focus-visible { outline-color: var(--magenta-hi) !important; }
.am-theme-dark .am-list__proof, .am-bg-ink .am-list__proof { color: var(--magenta-hi); }
.am-theme-dark .am-header:not(.is-solid) .am-lang a:hover, .am-theme-dark .am-header.is-solid .am-lang a:hover, .am-theme-hero-dark .am-header:not(.is-solid) .am-lang a:hover { color: var(--magenta-hi); }
/* knoppen: focus krijgt dezelfde stijl als hover (magenta vlak, witte tekst), plus een zichtbare focusrand.
De clip-path van .am-btn knipt een outline weg, dus de focusrand is een dubbele ring (box-shadow) zonder clip-path. */
.am-btn:focus-visible { color: #fff !important; clip-path: none; outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--magenta); }
.am-btn:focus-visible::after { transform: translateX(4px); }
.am-theme-dark .am-btn:focus-visible, .am-bg-ink .am-btn:focus-visible, .am-cta .am-btn:focus-visible, .am-footer .am-btn:focus-visible, .am-card--dark .am-btn:focus-visible,
.am-close--tom .am-btn:focus-visible, .am-full .am-btn:focus-visible, .am-result .am-btn:focus-visible, .am-btn--light:focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--magenta-hi); }
/* ---------- Story: wie maakte het ---------- */
.am-story-by { margin: 6px 0 14px; font-size: var(--fs-small, .9rem); font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.82); }
.am-story-by b { font-weight: 700; color: #fff; }
/* ---------- Story: resultaat online (rijen uitgelijnd op tablet en gsm, pijl in huisstijl) ---------- */
.am-result .am-h2 { margin-bottom: 0; padding-bottom: .08em; }
.am-result .am-result__list { margin-top: clamp(28px, 4vw, 48px); }
.am-result__row { grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr) 44px; grid-template-areas: "src t go"; column-gap: clamp(14px, 2.4vw, 28px); row-gap: 6px; }
.am-result__src { grid-area: src; }
.am-result__lang { letter-spacing: .08em; color: rgba(255,255,255,.55); }
.am-result__t { grid-area: t; }
.am-result__go { grid-area: go; display: grid; place-items: center; width: 44px; height: 44px; font-size: 0; color: #fff; border: 1px solid rgba(255,255,255,.4); background: transparent; transition: background-color .3s ease, border-color .3s ease, transform .5s var(--ease-out); }
.am-result__go svg { width: 18px; height: 18px; display: block; }
.am-result__row:hover .am-result__go, .am-result__row:focus-visible .am-result__go { background: var(--magenta); border-color: var(--magenta); transform: none; }
.am-result__row::before { background: var(--magenta-hi); }
@media (max-width: 900px) {
.am-result__row { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "src go" "t go"; padding: 18px 0; }
.am-result__row:hover, .am-result__row:focus-visible { padding-left: 14px; }
}
/* ---------- Frans signaal, netwerk en voorbeeld town hall (organisaties) ---------- */
.am-fr { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 18px; font-size: .95rem; line-height: 1.45; }
.am-fr span { font-weight: 600; }
.am-theme-dark .am-fr .am-link, .am-bg-ink .am-fr .am-link { color: #fff; }
.am-network { max-width: 52ch; }
.am-thcfg .am-card { background: #1a1a1f; color: #fff; }
.am-thcfg .am-card__t { margin: 0; }
.am-thcfg .am-card li { color: rgba(255,255,255,.85); }
.am-thcfg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.am-thcfg__prop { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: -.02em; }
.am-theme-dark .am-thcfg .am-btn { --bg: #fff; --fg: var(--ink); }
@media (max-width: 900px) { .am-thcfg .am-cards { --cols: 1 !important; } }
/* SR-001: de dagfilm houdt zijn scene op een eigen laag; mobiel geen bewegende korrel. */
.is-cine .am-day2__stage { will-change: transform; }
@media (max-width: 760px) {
.is-cine .am-day2__stage::after { animation: none; }
.is-cine .am-day2__clock .am-day2__slot > span { animation: none; transition: none; }
.is-cine .am-day2__scene .am-day2__svg { transform: none !important; }
}
/* SR-003: vaste beeldlagen, transform en opacity voor de overgangen. */
.is-pin .am-cine2__stage { will-change: transform; }
.is-pin .am-cine2__bg, .is-pin .am-cine2__wipe { clip-path: none; opacity: 0; transform: translate3d(7%, 0, 0); transition: transform 1s var(--c2-ease), opacity .6s ease; }
.is-pin .am-cine2__step:is(.is-active, .is-past) :is(.am-cine2__bg, .am-cine2__wipe) { clip-path: none; opacity: 1; transform: translate3d(0, 0, 0); }
.is-pin .am-cine2__word span { will-change: transform; }
.is-pin .am-cine2__bg img { filter: none; will-change: transform; }
.is-pin .am-cine2__stage::after { animation: none; }
/* Laat de uitgaande achtergrond eerst uitfaden, ook bij achteruit scrollen. */
.is-pin .am-cine2__bg { visibility: hidden; transition: transform 1s var(--c2-ease), opacity .6s ease, visibility 0s linear .6s; }
.is-pin .am-cine2__step.is-active .am-cine2__bg { visibility: visible; transition-delay: 0s; }
.is-pin .am-cine2__step:not(.is-active) .am-cine2__bg { opacity: 0; visibility: hidden; }
/* De drie hartjes bewegen als één groep; geen animatie per los SVG-element. */
.is-pin .am-cine2__hearts { width: 40px; height: 100px; will-change: transform, opacity; }
.is-pin .am-cine2__step.is-active .am-cine2__hearts { animation: am-cine2-hearts-group 2.6s ease-out infinite; }
.is-pin .am-cine2__hearts i { animation: none !important; opacity: 1; }
.is-pin .am-cine2__hearts i:nth-child(2) { left: 12px; bottom: 34px; }
.is-pin .am-cine2__hearts i:nth-child(3) { left: 4px; bottom: 68px; }
.is-pin .am-cine2__hearts i:nth-child(n+4) { display: none; }
@keyframes am-cine2-hearts-group { 0% { opacity: 0; transform: translate3d(0, 20px, 0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, -100px, 0); } }
/* SR-007: de afsluitende verhaaloproep verschijnt op mobiel zonder grote beeldwipe. */
@media (max-width: 760px) {
.am-storycta [data-wipe], .am-storycta [data-reveal] { clip-path: none; transform: none; opacity: 1; transition: none; }
.am-storycta [data-wipe] > img { transform: none; transition: none; }
}
/* SR-008: de klantenband verschuift op vaste lagen zonder left-animatie. */
.am-cband__track { will-change: transform; }
.am-cband__rail { contain: layout paint; }
.am-cband__sweep { left: 0; will-change: transform, opacity; }
@keyframes am-cband-sweep { 0% { transform: translate3d(-100%, 0, 0) skewX(-4.6deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate3d(820%, 0, 0) skewX(-4.6deg); opacity: 0; } }
/* SR-009: stilstaande verhaalhero op mobiel, ook voor Winterhallen. */
@media (max-width: 760px) {
.am-story-hero .am-media > img, .am-story-hero .am-media picture img, .am-story-hero .am-mock__win { animation: none; transform: none; }
}
/* SR-013: geen automatische animaties bij verminderde beweging. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
/* SR-014: korte inhoudsregel onder de hero, met voldoende ruimte voor de vaste header. */
.am-page-overview { padding-block: 24px; line-height: 2; }
:is(#packages, #month, #faq, #formats, #livestream-day, #how) { scroll-margin-top: 90px; }
/* SR-016: ook velden en volledige radiolabels zijn ruime tikdoelen. */
.am-form .am-field input:not([type="hidden"]) { min-height: 44px; }
/* SR-017: functionele navigatie en antwoordkeuze blijven op mobiel goed leesbaar. */
@media (max-width: 760px) {
.am-nav a, .am-header__end .am-btn--sm { font-size: 16px; }
}
/* SR-018: pakketkaarten en knoppen delen dezelfde onderrand. */
.am-pk { align-items: stretch; }
.am-pk .am-card { height: 100%; padding-bottom: 32px; border-bottom: 2px solid transparent; }
.am-pk .am-card__cta { margin-top: 18px; }
@media (min-width: 1101px) {
.am-pk .am-card__p { min-height: 114px; }
}
/* SR-020: zachte randen geven aan dat de ticker verderloopt. */
.am-marquee, .am-footer__marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
@media (prefers-reduced-motion: reduce) {
.am-marquee, .am-footer__marquee { -webkit-mask-image: none; mask-image: none; }
}
/* SR-021: de juridische footerregel blijft leesbaar op donker. */
.am-footer__base { color: #9a9a9a; }
/* SR-027: de dagkalender blijft, zonder gepinde weekbladen of dubbele agenda. */
.am-month2-sec--calendar .am-month2__cal { display: block; background: var(--ink); color: #fff; padding: clamp(14px, 3vw, 32px); }
.am-month2-sec--calendar .am-month2__grid { grid-template-rows: repeat(4, clamp(54px, 8vw, 110px)); }
.am-month2-sec--calendar .am-month2__item { opacity: 1; transform: none; }
.am-month2-sec--calendar .am-month2__num { color: #fff; text-shadow: 0 1px 4px #000; }
.am-month2-sec--calendar .am-month2__cursor { display: none; }
/* Hero-koppen passen bij de tekstkolom en het breedste woord, in elke taal. */
:is(.am-hero--home, .am-hero--biz) :is(.am-hero__grid, .am-hero__copy), .am-full--org .am-full__in { container-type: inline-size; }
.am-hero--home { --am-hero-max: min(var(--fs-hero), 8.5vw, 9rem); }
.am-full--org { --am-hero-max: min(var(--fs-hero), 13vh); }
html body main :is(.am-hero--home, .am-hero--biz, .am-full--org) h1.am-hero__title {
width: 100%; max-width: 100%; min-width: 0;
font-size: min(var(--am-hero-max, var(--fs-hero)), var(--am-hero-fit-px, 12vw));
overflow-wrap: normal; word-break: normal; -webkit-hyphens: none; hyphens: none;
}
@supports (font-size: 1cqi) {
html body main :is(.am-hero--home, .am-hero--biz, .am-full--org) h1.am-hero__title {
font-size: min(var(--am-hero-max, var(--fs-hero)), var(--am-hero-fit, 12cqi));
}
}
html body main :is(.am-hero--home, .am-hero--biz, .am-full--org) h1.am-hero__title .am-split-word {
white-space: nowrap !important; overflow-wrap: normal; word-break: normal; -webkit-hyphens: none; hyphens: none;
}
/* Ruimte voor g/j/p/q/y en de kleine verticale beweging; regelafstand blijft gelijk. */
:is(.am-hero--home, .am-hero--biz, .am-full--org) .am-hero__title .am-split-line { padding: 0 .08em .38em; margin: 0 -.08em -.38em; }
:is(.am-hero--home, .am-hero--biz, .am-full--org) .am-hero__title .am-rbw:not(.am-rbw--split) { padding-block: .12em .24em; margin-block: -.12em -.24em; }
.am-hero-end { display: inline-block; white-space: nowrap; }
@media (max-width: 760px) {
html:lang(fr) .am-full--org { --am-hero-max: clamp(2.4rem, 11vw, 3.4rem); }
}
/* ===== Grafisch werk volledig tonen (fit: contain in media.json): nooit bijsnijden ===== */
/* Affiches, logo's, screenshots en illustraties staan in hun echte verhouding op een vervaagde kopie van zichzelf. */
.am-media--contain { background: var(--ink); }
.am-media--contain > .am-media__bg, .am-tile__media > .am-media__bg { position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none; margin: 0; object-fit: cover; filter: blur(28px) saturate(1.05) brightness(.9); z-index: 0; pointer-events: none; }
.am-media--contain > img:not(.am-media__bg), .am-media--contain > picture, .am-media--contain > video { position: relative; z-index: 1; }
.am-media--contain > video { position: absolute; }
.am-media.am-media--contain > img:not(.am-media__bg), .am-media.am-media--contain > video, .am-media.am-media--contain > picture img,
.am-tile__media > img.am-tile__fit { box-sizing: border-box; padding: clamp(4px, 2.5%, 18px); object-fit: contain !important; object-position: 50% 50% !important; height: 100% !important; margin-top: 0 !important; top: 0 !important; animation: none !important; transform: none !important; }
.am-tile__media > img.am-tile__fit { z-index: 1; }
/* Telefoons in de hero en feed: reels volledig tonen (ondertitels niet afsnijden) */
.am-phone__screen .am-media--contain > video, .am-phone__screen .am-media--contain > img:not(.am-media__bg) { padding: 0 !important; }
.am-feed__blur { position: absolute; inset: -10%; width: 120%; height: 120%; max-width: none; object-fit: cover; filter: blur(20px) saturate(1.15) brightness(.6); }
.am-feed__t--reel video { z-index: 1; object-fit: contain !important; transform: none !important; }
.am-feed__t--reel .am-feed__reel, .am-feed__t--reel figcaption { z-index: 2; }
/* Klantenband: grafisch werk (website, affiche) volledig in beeld, in de echte verhouding */
.am-cband__graphic { position: relative; display: block; width: auto; height: auto; max-width: 90%; max-height: 90%; object-fit: contain; box-shadow: var(--am-shadow); background: #fff; }
/* Introtekst naast een kop (o.a. "From around here." / "Van hier."): nooit breder dan de kolom of voorbij de gutter */
.am-head > .am-lead { max-width: min(34ch, 100%); overflow-wrap: break-word; }
.am-month2__item img.is-fit { object-fit: contain; background: #1b1b20; }
/* Over ons: Tom-tegel in de hero is een foto (geen uitgeknipte figuur): vullen op focus */
.am-trio .t-tom .am-media--photo { background: var(--mist); }
.am-trio .t-tom .am-media--photo img { object-fit: cover; object-position: var(--pos, 50% 35%); }
/* DUO-007: na een fout in het formulier valt niets onder de vaste header (66 tot 76 px hoog, plus lucht) */
#form, .am-form, .am-form__done, .am-form__sum, .am-form [aria-invalid="true"], .am-form input, .am-form textarea, .am-field__err { scroll-margin-top: calc(76px + 28px); }
/* DUO-008: klikzones van minstens 44 px zonder dat de look verandert (padding met tegengestelde marge) */
.am-footer__base a, .am-form__note a, a[href*="dataprotectionauthority"], a[href*="gegevensbeschermingsautoriteit"] { padding: 14px 2px; margin: -14px -2px; }
.am-footer__logo { padding-block: 8px; margin-block: -8px; box-sizing: content-box; }
/* ---------- Feedbackronde 1 ---------- */
/* home: klantlogo's direct onder de ingangstegels, zonder titel */
.am-hero--home + .am-logos { border-top: 0; padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem); }
/* dienstkaarten bij Dorien: titel en één zin, allemaal even hoog en bovenaan gelijk */
.am-cards--svc { align-items: stretch; }
.am-cards--svc > .am-card { justify-content: flex-start; gap: 10px; margin-top: 0 !important; }
.am-footer__near { margin-top: 6px; font-size: .9rem; color: rgba(255,255,255,.62); }
/* taalwissel: streepjes verticaal op de letters, elke taal minstens 44 bij 44 px */
.am-lang { align-items: center; gap: 0; }
.am-lang > span[aria-hidden] { display: inline-flex; align-items: center; align-self: center; height: 1em; line-height: 1; opacity: .5; }
.am-lang a, .am-lang span[aria-current] { justify-content: center; min-width: 44px; min-height: 44px; padding: 0 4px; line-height: 1; }
.am-menu__lang { display: flex; align-items: center; }
.am-menu__lang > span[aria-hidden] { display: inline-flex; align-items: center; line-height: 1; opacity: .5; }
.am-menu__lang a, .am-menu__lang span[aria-current] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 4px; }
/* weekluik "Van post tot klant": vier dagen op het merkverloop (punt 10) */
.am-cine2--week { background: var(--grad); }
.am-cine2--week .am-cine2__title { margin: 0 0 clamp(2rem, 5vw, 3.5rem); font: 900 var(--fs-h2)/.95 var(--display); letter-spacing: -.045em; color: #fff; }
.am-cine2--week .am-cine2__line { color: #fff; }
.am-cine2--week .am-cine2__ui::before { content: none; }
.am-cine2--week:not(.is-pin) .am-cine2__phone { background: #fff; }
.am-cine2--week .am-cine2__wipe { background: #fff; }
/* post in het scherm: kop, vierkant beeld, acties, twee tekstregels als grijze balkjes */
.am-cine2__post { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: #0e0e10; padding-top: 34px; }
.am-cine2__phead { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font: 700 .78rem/1 var(--body); }
.am-cine2__phead i { width: 24px; height: 24px; border-radius: 50%; background: var(--grad); flex: none; }
.am-cine2__pimg { position: relative; aspect-ratio: 1; overflow: hidden; }
.am-cine2__pimg .am-cine2__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.am-cine2__pacts { display: flex; gap: 14px; padding: 10px 12px; }
.am-cine2__pacts .am-cine2__act { width: 22px; height: 22px; filter: none; }
.am-cine2__pacts svg { display: block; width: 100%; height: 100%; fill: none; stroke: #0e0e10; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.am-cine2__plines { display: grid; gap: 7px; padding: 2px 12px; }
.am-cine2__plines i { height: 8px; border-radius: 4px; background: #e8e8ec; }
.am-cine2__plines i:last-child { width: 62%; }
.am-cine2--week .am-cine2__step.is-active .am-cine2__act--heart svg { fill: var(--g2); stroke: var(--g2); }
.am-cine2--week .am-cine2__hearts { bottom: 46%; right: 16px; }
.am-cine2--week .am-cine2__fly { right: auto; left: 92px; bottom: auto; top: calc(34px + 44px + 100% * 0); }
.am-cine2__pill--rec { background: rgba(14,14,16,.72); color: #fff; }
.am-cine2__pill--rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; animation: am-cine2-blink 1.1s steps(1) infinite; }
.am-cine2--week .am-cine2__step[data-key="live"] .am-cine2__screen { background: #fff; }
.am-cine2--week .am-cine2__step[data-key="live"] .am-cine2__screen::before { content: none; }
.am-cine2--week .am-cine2__rail ol { grid-template-columns: repeat(4, 1fr); }
.am-cine2--week .am-cine2__fill { background: rgba(255,255,255,.35); }
.am-cine2--week .am-cine2__fill i { background: #fff; }
.am-cine2--week .am-cine2__rail button { color: rgba(255,255,255,.72); }
/* zonder pin: vier blokken; vier kolommen op breed scherm, onder elkaar op touch en smal */
@media (min-width: 900px) { .am-cine2--week:not(.is-pin) .am-cine2__steps { grid-template-columns: repeat(4, 1fr); gap: 32px; } .am-cine2--week:not(.is-pin) .am-cine2__word { font-size: clamp(2rem, 3.4vw, 3.4rem); } }
@media (max-width: 899px), (hover: none), (pointer: coarse) {
.am-cine2--week:not(.is-pin) .am-cine2__steps { grid-template-columns: 1fr; }
.am-cine2--week:not(.is-pin) .am-cine2__step { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; }
.am-cine2--week:not(.is-pin) .am-cine2__phone { width: min(42vw, 220px); }
.am-cine2--week:not(.is-pin) .am-cine2__word { font-size: clamp(2rem, 8vw, 3.2rem); }
.am-cine2--week:not(.is-pin) .am-cine2__line { font-size: 1.05rem; }
}
@media (max-width: 420px) { .am-cine2--week:not(.is-pin) .am-cine2__step { grid-template-columns: 1fr; } .am-cine2--week:not(.is-pin) .am-cine2__phone { width: min(64vw, 260px); } }
/* gepind: titel linksboven, stappen wisselen bij scrollen */
.am-cine2--week.is-pin .am-cine2__track { height: 440vh; height: 440svh; }
.am-cine2--week.is-pin .am-cine2__title { position: absolute; z-index: 5; left: var(--gut); top: 96px; margin: 0; font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -.03em; }
.am-cine2--week.is-pin .am-cine2__stage::after { opacity: .035; }
@media (min-width: 900px) { .am-cine2--week:not(.is-pin) .am-cine2__steps { align-items: stretch; } .am-cine2--week:not(.is-pin) .am-cine2__step { align-content: space-between; } }
.am-cine2--week .am-cine2__pill { top: auto; bottom: 20px; transform: translate3d(-50%, 14px, 0); }
.am-cine2--week .am-cine2__screen--post .am-cine2__pill { bottom: 16px; }
/* verhalenstrip: op touch en onder 900 px een gewone lijst van vier verhalen met de knop Alle verhalen (punt 3) */
.am-hscroll__all { display: none; }
@media (max-width: 899px), (hover: none), (pointer: coarse) {
.am-hscroll .am-hscroll__pin { overflow: visible; }
.am-hscroll .am-hscroll__track { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); width: auto; max-width: none; overflow: visible; padding-inline: var(--gut) var(--gut-r); scroll-snap-type: none; transform: none !important; }
.am-hscroll .am-hscroll__track > .am-story-card { width: auto !important; max-width: none; flex: none; }
.am-hscroll .am-hscroll__track > .am-hs-more, .am-hscroll .am-head .am-row, .am-hscroll .am-hpin__bar { display: none; }
.am-hscroll .am-hscroll__all { display: block; padding: clamp(24px, 5vw, 36px) var(--gut-r) 0 var(--gut); }
}
/* hoverbeelden bij de formatlijsten: vast rechts naast de tekst, zonder schuine rand of draai (punt 13) */
.am-hoverimg, .am-hoverimg.is-on, .am-hoverimg.is-left, .am-hoverimg.is-left.is-on { clip-path: none; transform: none; aspect-ratio: 4 / 3; }
.am-hoverimg { transition: opacity .3s ease; }
.am-hoverimg.is-off { display: none; }
/* ondernemers: de pauzeknop staat rechtsonder in de hero (feedback 14: .am-motion--hero) */
.am-hero--biz { position: relative; }
/* ---------- Voor ondernemers, feedbackronde 1 ---------- */
/* 20: klantenshowcase, tekst verticaal gecentreerd naast het beeld, iets groter */
.am-cband__stage { align-items: center; }
.am-cband__info { justify-content: center; padding-bottom: 0; }
.am-cband__name { font-size: clamp(2.6rem, 5.6vw, 5.2rem); }
.am-cband__what b { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
/* 19: kaart Based in Overijse */
.am-bmap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.am-bmap__map { width: 100%; max-width: 620px; justify-self: end; }
.am-bmap__svg { display: block; width: 100%; height: auto; }
.am-bmap__sea { fill: var(--mist); }
.am-bmap__bg path { fill: #ecebf0; stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.am-bmap__town path { fill: #f6dbe9; stroke: #fff; stroke-width: 3; stroke-linejoin: round; transition: fill .25s ease; }
.am-bmap__town.is-home path { fill: url(#am-bmap-g); }
.am-bmap__town circle { fill: var(--ink); }
.am-bmap__town.is-home circle { fill: #fff; }
.am-bmap__an { opacity: 0; font: 700 15px/1 var(--body); text-anchor: middle; }
.am-bmap__lab { font: 700 15px/1 var(--body); fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 4px; pointer-events: none; }
.am-bmap__lab.is-home { font-size: 19px; fill: #fff; stroke: rgba(14,14,16,.3); stroke-width: 3px; }
.am-bmap__town:hover path, .am-bmap__town:focus-visible path { fill: #eeb8d4; }
.am-bmap__town.is-home:hover path { fill: url(#am-bmap-g); opacity: .9; }
.am-bmap__town:focus-visible { outline: none; }
.am-bmap__town:focus-visible path { stroke: var(--ink); stroke-width: 3; }
.am-bmap__bxl circle:first-child { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: .45; }
.am-bmap__bxl circle + circle { fill: var(--ink); opacity: .7; }
.am-bmap__bxl text { font: 600 14px/1 var(--body); fill: var(--mute); }
@media (max-width: 900px) { .am-bmap { grid-template-columns: 1fr; } .am-bmap__map { justify-self: stretch; max-width: none; } .am-bmap__lab { font-size: 18px; } .am-bmap__lab.is-home { font-size: 22px; } }
/* 23 en 25: feed, raster op de lijn van de titel, plaats voor 18 tegels */
.am-feed2 { list-style: none; margin-left: 0; margin-right: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.am-feed2__t a { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; background: #111; color: #fff; text-decoration: none; }
.am-feed2__t video, .am-feed2__t .am-feed__fit { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.am-feed2__t .am-feed__fit { object-fit: contain; }
.am-feed2__t .am-feed__blur { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(18px) brightness(.6); }
.am-feed2__net { position: absolute; left: 10px; top: 10px; z-index: 2; width: 22px; height: 22px; display: grid; place-items: center; filter: drop-shadow(var(--am-shadow)); }
.am-feed2__net .am-fa { width: 18px; height: 18px; }
.am-feed2__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 2px; padding: 28px 10px 10px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.7)); font-size: .78rem; }
.am-feed2__cap b { font-weight: 700; }
.am-feed2__t a:hover .am-feed2__cap, .am-feed2__t a:focus-visible .am-feed2__cap { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(162,33,110,.85)); }
@media (max-width: 1100px) { .am-feed2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .am-feed2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
/* 24: cijfers met eigen beeld, minder witruimte */
.am-kpi3-sec { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.am-kpi3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); align-items: start; }
.am-kpi3__i { display: grid; gap: 12px; padding-top: 14px; border-top: 2px solid transparent; border-image: var(--grad) 1; min-width: 0; }
.am-kpi3__n { font: 900 clamp(2.8rem, 5vw, 4.6rem)/.9 var(--display); letter-spacing: -.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.am-kpi3__t { margin: 0; max-width: 30ch; }
.am-kpi3__t a { color: inherit; }
.am-kpi3__logos { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.am-kpi3__logos li { aspect-ratio: 3 / 2; display: grid; place-items: center; background: var(--mist); padding: 6px; }
.am-kpi3__logos img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; }
.am-kpi3__grid { margin-top: 6px; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.am-kpi3__grid { background-repeat: no-repeat; background-size: 0 0; }
.am-kpi3__grid i { aspect-ratio: 1; background-image: inherit; background-repeat: no-repeat; background-size: 1000% 700%; background-position: calc(var(--x) * 100% / 9) calc(var(--y) * 100% / 6); }
.am-kpi3__i--phone { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 16px; }
.am-kpi3__i--phone > div { display: grid; gap: 12px; }
.am-kpi3__phone { width: clamp(96px, 9vw, 140px); aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #111; box-shadow: 0 0 0 5px #18181c, var(--am-shadow); margin: 5px; }
.am-kpi3__phone video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .am-kpi3 { grid-template-columns: 1fr; gap: 36px; } .am-kpi3__logos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* 26: Close to home, Optiek Tim groot links, Thruvo en Pull The Plug rechts */
.am-near { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(14px, 2vw, 24px); }
.am-near__c { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.am-near__c--0 { grid-row: 1 / span 2; }
.am-near__m { position: relative; overflow: hidden; background: var(--mist); }
.am-near__c--0 .am-near__m { aspect-ratio: 4 / 5; }
.am-near__c--1 .am-near__m, .am-near__c--2 .am-near__m { aspect-ratio: 16 / 10; }
.am-near__m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.am-near__c:hover .am-near__m img { transform: scale(1.03); }
.am-near__b { display: grid; gap: 2px; }
.am-near__b b { font: 900 clamp(1.3rem, 2vw, 1.8rem)/1 var(--display); letter-spacing: -.03em; }
.am-near__b span { color: var(--mute); font-size: .95rem; }
@media (max-width: 760px) { .am-near { grid-template-columns: 1fr 1fr; } .am-near__c--0 { grid-column: 1 / -1; grid-row: auto; } .am-near__c--0 .am-near__m { aspect-ratio: 4 / 5; } .am-near__c--1 .am-near__m, .am-near__c--2 .am-near__m { aspect-ratio: 1; } }
/* 28: extra's als één compacte rij */
.am-xrow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.am-xrow li { display: grid; gap: 4px; align-content: start; padding: 18px 18px 18px 0; border-bottom: 1px solid var(--line); }
.am-xrow li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.am-xrow b { font-weight: 700; }
.am-xrow span { color: var(--mute); font-size: .95rem; }
.am-xrow .am-xrow__p { color: var(--ink); font-size: .95rem; }
.am-xrow__more { font-size: 1.05rem; }
@media (max-width: 900px) { .am-xrow { grid-template-columns: 1fr 1fr; } .am-xrow li:nth-child(odd) { padding-left: 0; border-left: 0; } }
@media (max-width: 520px) { .am-xrow { grid-template-columns: 1fr; } .am-xrow li, .am-xrow li + li { padding-left: 0; border-left: 0; } }
/* 29: vragen, titel half zo groot, gewone vragen, één smalle kolom */
.am-faq2 { max-width: 760px; }
.am-faq2__t { font: 900 calc(var(--fs-h2) / 2)/1 var(--display); letter-spacing: -.035em; margin: 0; }
.am-faq2 .am-faq summary { font-family: var(--body); font-weight: 400; font-size: 1.1rem; letter-spacing: 0; }
.am-faq2-sec { padding-top: clamp(3rem, 6vw, 5rem); }
/* 22: lichte agenda */
.am-agenda__legend { display: flex; flex-wrap: wrap; gap: 18px; margin: clamp(22px, 3vw, 32px) 0 12px; font-size: .9rem; }
.am-agenda__key { display: inline-flex; align-items: center; gap: 8px; }
.am-agenda__key::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.am-agenda__key--me::before { background: #f3e1ec; box-shadow: inset 3px 0 0 var(--magenta); }
.am-agenda__key--you::before { background: #ffe9d8; box-shadow: inset 3px 0 0 #e8742a; }
.am-agenda { border: 1px solid var(--line); background: #fff; }
.am-agenda__dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.am-agenda__dow span { padding: 8px 10px; font: 600 .75rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.am-agenda__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.am-agenda__cell { min-height: 112px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; min-width: 0; }
.am-agenda__cell:nth-child(7n) { border-right: 0; }
.am-agenda__cell:nth-last-child(-n+7) { border-bottom: 0; }
.am-agenda__cell.is-we { background: #f6f6f8; }
.am-agenda__num { display: block; font: 600 .8rem/1 var(--body); color: var(--mute); margin-bottom: 6px; }
.am-agenda__cell ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.am-agenda__item { display: grid; gap: 6px; padding: 6px 7px; border-radius: 4px; font-size: .78rem; line-height: 1.25; background: #f3e1ec; box-shadow: inset 3px 0 0 var(--magenta); color: var(--ink); }
.am-agenda__item time { font-weight: 700; font-variant-numeric: tabular-nums; }
.am-agenda__item--you { background: #ffe9d8; box-shadow: inset 3px 0 0 #e8742a; }
.am-agenda__item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
@media (max-width: 760px) {
.am-agenda__dow { display: none; }
.am-agenda__grid { grid-template-columns: 1fr; }
.am-agenda__cell { min-height: 0; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: 8px; border-right: 0; }
.am-agenda__cell:not(:has(ul)) { display: none; }
.am-agenda__cell:nth-last-child(-n+7) { border-bottom: 1px solid var(--line); }
.am-agenda__item { grid-template-columns: 56px minmax(0, 1fr); align-items: center; }
.am-agenda__item:not(:has(img)) { grid-template-columns: 1fr; }
}
.am-kpi3__grid i { display: block; }
.am-bmap__town text { pointer-events: none; }
.am-near__c--1, .am-near__c--2 { grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
@media (min-width: 761px) { .am-near__c--1 .am-near__m, .am-near__c--2 .am-near__m { aspect-ratio: auto; height: 100%; min-height: 180px; } }
/* LinkedIn-links met Font Awesome-icoon (footer en contact, punt 25) */
.am-social { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 2px; }
.am-social a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: inherit; }
.am-social .am-fa { width: 18px; height: 18px; flex: none; }
.am-social a:hover span { text-decoration: underline; }
/* losse decoratieve paarse blokjes zonder functie weg: het eindvierkantje van de lijnen (punt 6) */
.am-line__end { display: none; }
/* ---------- Feedbackronde 2 en 3 ---------- */
/* formulier: verzendknop zonder schuine band over de tekst */
.am-form button[type="submit"]::before { transform: translateY(101%); }
.am-form button[type="submit"]:hover::before, .am-form button[type="submit"]:focus-visible::before { transform: none; }
/* een tweede actie naast een knop is een tekstlink (punt 9) */
.am-row__link { align-self: center; font-weight: 600; }
/* contrast WCAG 2.2 AA (Lou, contrast.md) */
/* C-01 en punt 17: FR-contactblok op licht grijs krijgt donkere tekst */
.am-theme-dark .am-bg-mist { --fg: var(--ink); color: var(--ink); }
.am-theme-dark .am-bg-mist :is(h2, p, label, legend, .am-lead, .am-field__req, .am-form__note) { color: var(--ink); }
.am-theme-dark .am-bg-mist .am-btn { --bg: var(--ink); --fg: #fff; }
.am-bg-mist .am-field ::placeholder, .am-field ::placeholder { color: var(--mute); opacity: 1; }
/* C-02: tekst op het merkverloop van het weekluik in inktkleur */
.am-cine2--week, .am-cine2--week .am-cine2__title, .am-cine2--week .am-cine2__word, .am-cine2--week .am-cine2__line { color: var(--ink); }
.am-cine2--week .am-cine2__rail button { color: var(--ink); opacity: 1; }
.am-cine2--week .am-cine2__rail button i { background: var(--ink); }
.am-cine2--week .am-cine2__fill { background: rgba(14,14,16,.25); }
.am-cine2--week .am-cine2__fill i { background: var(--ink); }
.am-cine2--week .am-cine2__pill--new { background: var(--ink); color: #fff; text-shadow: none; }
.am-cine2--week.is-pin .am-cine2__line { text-shadow: none; color: var(--ink); }
/* C-03: verloopcijfers op wit met de tekstvariant van het verloop */
.am-fig__big, .am-kpi3__n, .am-kpis__n { background-image: var(--grad-text) !important; }
/* C-04: "clearly" in de footerband op donker */
.am-marquee .am-rbw, .am-footer__marquee .am-rbw { background-image: var(--grad); }
/* C-05: meta van verhaalkaarten op donker */
.am-theme-dark .am-story-card__meta { color: rgba(255,255,255,.72); }
/* C-06: bewijslinks op zwart in volle kleur */
.am-theme-dark .am-list__s { opacity: 1; color: rgba(255,255,255,.72); }
/* C-07 tot C-09: labels over foto's */
.am-story-hero .am-full__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(14,14,16,.78), rgba(14,14,16,0) 62%); }
.am-story-by, .am-story-by b { color: #fff !important; }
.am-theme-hero-dark .am-header:not(.is-solid) .am-lang a { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.am-tile__eyebrow span { color: #fff !important; opacity: 1 !important; }
.am-tile__shade { background: linear-gradient(to top, rgba(14,14,16,.85), rgba(14,14,16,0) 65%) !important; }
.am-frecent__eyebrow { color: #fff !important; opacity: 1 !important; }
.am-frecent__body { background: linear-gradient(to top, rgba(14,14,16,.85), rgba(14,14,16,0)); }
/* C-10: telefoons en feedtegels */
.am-phone__screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0)); }
.am-phone__ui, .am-phone__heart { z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.am-feed2__cap { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.78)); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* C-11: kaartlabel Overijse */
.am-bmap__lab.is-home { fill: #fff; stroke: rgba(14,14,16,.75); stroke-width: 4px; }
/* C-12: kleine grijze labels */
.am-cband__no, .am-cband__what span { color: var(--mute); }
/* C-13: slotkop over video bij organisaties */
.am-close--tom .am-close__media::after, .am-full--org .am-full__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(14,14,16,.35); }
/* ---------- Voor organisaties, zeven blokken (feedback 2, punt 8) ---------- */
.am-full--org { display: flex; flex-direction: column; justify-content: flex-end; }
.am-full__pool, .am-full__pool > .am-media { position: absolute; inset: 0; }
.am-full__logos { position: relative; z-index: 3; width: 100%; margin-top: clamp(24px, 4vw, 48px); }
.am-full__logos .am-logos { padding-block: 14px; border: 0; background: rgba(14,14,16,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.am-full__logos .am-logos__item img { filter: brightness(0) invert(1); opacity: .85; }
.am-full__logos .am-logos__item { --h: .8 !important; }
.am-org2-light { background: #fff; color: var(--ink); }
.am-list__item--go { text-decoration: none; color: inherit; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) 32px; }
.am-list__arrow { font-size: 1.4rem; opacity: 0; transform: translateX(-8px); transition: opacity .3s ease, transform .4s var(--ease-out); justify-self: end; }
.am-list__item--go:hover .am-list__arrow, .am-list__item--go:focus-visible .am-list__arrow { opacity: 1; transform: none; }
@media (hover: none) { .am-list__arrow { opacity: .6; transform: none; } }
@media (max-width: 760px) { .am-list__item--go { grid-template-columns: minmax(0, 1fr) 28px; } .am-list__item--go .am-list__s { grid-column: 1; } .am-list__item--go .am-list__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; } }
.am-org2__std { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(28px, 4vw, 48px); padding: clamp(22px, 3vw, 36px); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; }
.am-org2__std h3 { margin: 0 0 12px; font: 800 1.15rem/1.1 var(--display); letter-spacing: -.02em; }
.am-org2__std ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; color: rgba(255,255,255,.82); }
.am-day2-sec > .am-org2__std { max-width: calc(var(--max) - var(--gut) - var(--gut-r)); margin-inline: auto; }
@media (max-width: 640px) { .am-org2__std { grid-template-columns: 1fr; } }
.am-org2__note { max-width: 46ch; }
.am-org2-closed .am-redact__lines { font: 900 var(--fs-h2)/1.05 var(--display); letter-spacing: -.04em; max-width: 18ch; margin: 18px 0 0; }
.am-org2-closed .am-stamp { position: static; display: inline-block; margin-top: 12px; }
.am-org2-slot .am-row { align-items: center; gap: 18px; }
.am-org2__li { display: inline-grid; place-items: center; width: 44px; height: 44px; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.am-org2__li .am-fa { width: 18px; height: 18px; }
.am-org2__li:hover { background: #fff; color: var(--ink); }
.am-org2__adv { margin-top: 18px; font-size: .9rem; color: rgba(255,255,255,.72); }
.am-org2__adv a { color: #fff; }
.am-bg-ink .am-map__labels text { stroke: var(--ink); }
/* wereldkaart: stippen met naam bij hover, focus of tik */
.am-map__dot { cursor: pointer; outline: none; }
.am-map__dot circle:first-child { fill: rgba(255,255,255,.85); }
.am-map__dot .am-map__hit { fill: transparent; }
.am-map__dot text { opacity: 0; transition: opacity .2s ease; fill: #fff; font: 800 16px/1 var(--display); paint-order: stroke; stroke: var(--ink); stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.am-map__dot:hover text, .am-map__dot:focus text, .am-map__dot:focus-visible text { opacity: 1; }
.am-map__dot:focus-visible circle:first-child { stroke: var(--magenta-hi); stroke-width: 2; }
.am-map--wide { max-width: none; }
.am-world .am-head .am-lead + .am-lead { margin-top: 10px; }
.am-result__net { width: 16px; height: 16px; margin-right: 8px; vertical-align: -2px; }
.am-about-together { padding-block: clamp(2.5rem, 5vw, 4rem); }
.am-about-together__t { max-width: 40ch; margin-inline: auto; text-align: center; font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 400; }
/* klein EN-label bij links van de Franse site naar Engelstalige pagina’s (punt 15) */
.am-en { display: inline-block; margin-left: .35em; padding: 1px 4px; border: 1px solid currentColor; border-radius: 3px; font: 700 .62em/1.2 var(--body); letter-spacing: .04em; vertical-align: .25em; opacity: .75; }
.am-nav a { display: flex; flex-direction: row; align-items: center; }
.am-nav a .am-en { margin-left: .4em; }
.am-footer .am-social a, .am-footer .am-social li a { display: inline-flex; align-items: center; gap: 10px; padding-block: 10px; }
/* ---------- Feedbackronde 4 ---------- */
/* klantlogo als ronde avatar (punt 1) */
.am-avatar { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; overflow: hidden; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); }
.am-avatar img { width: 84%; height: 84%; object-fit: contain; }
.am-avatar--dot { background: var(--grad); }
.am-feed2__who { display: inline-flex; align-items: center; gap: 7px; }
.am-feed2__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* cijferblok opgeruimd (punt 4): drie cijfers op één lijn, logo's 5 x 2 even groot, 68 mini-posts in 17 x 4 */
.am-kpi3 { align-items: start; }
.am-kpi3__i, .am-kpi3__i--phone { display: grid; grid-template-columns: 1fr; align-content: start; }
.am-kpi3__n { font-size: clamp(2.8rem, 5vw, 4.6rem); line-height: .9; }
.am-kpi3__t { min-height: 3.1em; }
.am-kpi3__logos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.am-kpi3__logos li { position: relative; aspect-ratio: 3 / 2; padding: 0; }
.am-kpi3__logos img { position: absolute; inset: 14%; width: 72%; height: 72%; max-width: none; max-height: none; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s ease, opacity .3s ease; }
@media (hover: hover) { .am-kpi3__logos li:hover img { filter: none; opacity: 1; } }
@media (hover: none) { .am-kpi3__logos img { filter: none; opacity: 1; } }
.am-kpi3__grid { grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 2px; }
.am-kpi3__grid i { background-size: 1700% 400%; background-position: calc(var(--x) * 100% / 16) calc(var(--y) * 100% / 3); }
.am-kpi3__i--phone .am-kpi3__phone { margin: 6px 0 0 5px; width: clamp(110px, 10vw, 150px); }
/* ---------- weekluik Van post tot klant: telefoon en schermen (de stepper staat onderaan, feedback 14) ---------- */
.am-week__phone { position: relative; width: min(84vw, 360px); aspect-ratio: 9 / 19; border-radius: 42px; background: #0e0e10; padding: 10px; box-shadow: var(--am-shadow); }
.am-week__notch { position: absolute; z-index: 3; left: 50%; top: 18px; width: 26%; height: 22px; margin-left: -13%; border-radius: 12px; background: #0e0e10; }
.am-week__screen { position: relative; width: 100%; height: 100%; border-radius: 33px; overflow: hidden; background: #fff; color: var(--ink); text-align: left; }
.am-week__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* maandag: camera-app */
.am-week__camui { position: absolute; inset: 0; color: #fff; }
.am-week__rec { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: rgba(14,14,16,.6); font: 600 .78rem/1 var(--body); }
.am-week__rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; }
.am-week__rec b { font-variant-numeric: tabular-nums; font-weight: 600; }
.am-week__grid { position: absolute; inset: 0; background: linear-gradient(to right, transparent 33.2%, rgba(255,255,255,.35) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255,255,255,.35) 66.6%, transparent 66.8%), linear-gradient(to bottom, transparent 33.2%, rgba(255,255,255,.35) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255,255,255,.35) 66.6%, transparent 66.8%); }
.am-week__shutter { position: absolute; left: 50%; bottom: 22px; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%; border: 4px solid #fff; background: radial-gradient(circle, #ff3b30 0 42%, transparent 44%); }
/* dinsdag: post */
.am-week__screen--post { padding-top: 46px; }
.am-week__phead { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: .85rem; }
.am-week__phead span { margin-left: auto; color: var(--mute); font-size: .78rem; }
.am-week__pimg { position: relative; aspect-ratio: 1; overflow: hidden; }
.am-week__pacts { display: flex; gap: 14px; padding: 10px 12px; }
.am-week__pacts svg, .am-week__ico svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linejoin: round; }
.am-week__pname { margin: 0; padding: 0 12px; font: 700 .85rem/1.3 var(--body); }
/* woensdag: meldingen */
.am-week__screen--notes { background: #f3f3f6; padding: 60px 10px 10px; }
.am-week__notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.am-week__notes li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: var(--am-shadow); font-size: .82rem; line-height: 1.3; }
.am-week__ico svg { width: 18px; height: 18px; stroke: var(--magenta); }
/* donderdag: bericht */
.am-week__screen--msg { background: #fff; }
.am-week__chat { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 56px 14px 18px; }
.am-week__chead { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.am-week__time { margin: 18px 0 8px; text-align: center; color: var(--mute); font-size: .72rem; }
.am-week__bubble { align-self: flex-start; max-width: 82%; margin: 0; padding: 11px 14px; border-radius: 18px 18px 18px 4px; background: #ececf1; font-size: .95rem; line-height: 1.35; }
.am-week__reply { margin: auto 0 0; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--mute); font-size: .85rem; }
@keyframes am-week-note { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.am-agenda__item { position: relative; }
.am-agenda__av { position: absolute; left: 12px; top: 12px; z-index: 1; width: 22px; height: 22px; }
@media (max-width: 760px) { .am-agenda__av { left: 6px; top: 6px; width: 18px; height: 18px; } }
.am-week__phead .am-avatar { width: 30px; height: 30px; box-shadow: 0 0 0 1px var(--line); }
/* tekstregels nooit langer dan 75 tekens */
main p, .am-prose p, .am-prose li { max-width: 75ch; }
/* koppen: titel links, intro ernaast vanaf 900 px (punt 5) */
@media (min-width: 900px) { .am-head { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(440px); align-items: end; } .am-head > :first-child { max-width: 900px; } }
/* klantenband: elke klant één keer, vaste band zonder half afgesneden logo (punt 5) */
.am-cband__rail.am-cband__rail--static { -webkit-mask-image: none; mask-image: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.am-cband__rail--static::-webkit-scrollbar { display: none; }
.am-cband__rail--static .am-cband__track { animation: none !important; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); width: 100%; }
.am-cband__rail--static .am-cband__track li { width: auto; scroll-snap-align: start; }
@media (max-width: 760px) { .am-cband { --item: calc(100vw / 3); } .am-cband__rail--static { -webkit-mask-image: none; mask-image: none; } .am-cband__rail--static .am-cband__track { grid-auto-columns: var(--item); width: max-content; } .am-cband__rail--static .am-cband__track li { scroll-snap-align: center; } }
/* ---------- Feedbackronde 5 ---------- */
/* punt 8: dag van een productie op 375/393: woorden met spatie, tien tijdlabels zonder overlap, actieve knop in beeld */
.am-day2__rail ol { grid-template-columns: repeat(10, minmax(64px, 1fr)); }
.am-day2__rail button { white-space: nowrap; }
@media (max-width: 899px) { .am-day2__rail-inner { min-width: 700px; } }
html[lang] .am-day2 .am-day2__clock.is-word { font-size: min(10.5vw, 4.6rem) !important; letter-spacing: -.03em; }
@media (min-width: 900px) { html[lang] .am-day2 .am-day2__clock.is-word { font-size: min(6vw, 11svh) !important; } }
/* punt 27: tikdoelen minstens 44 px */
.am-head > .am-link, .am-hscroll__all .am-link, a.am-link { display: inline-flex; align-items: center; min-height: 44px; }
.am-org2__adv a, .am-footer__base a, .am-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
/* punt 23: geen schuine sectie-overgangen op Voor ondernemers */
.am-page-businesses .am-cut-t, .am-page-businesses .am-cut-tb, .am-page-businesses .am-cut-b { clip-path: none !important; padding-block: var(--sec) !important; }
/* punt 25: verhalenstrip als lijst (touch, onder 900 px): kaarten begrensd, minder hoog en scherp */
@media (max-width: 899px), (hover: none), (pointer: coarse) {
.am-hscroll .am-hscroll__track { max-width: 640px; margin-inline: auto; }
.am-hscroll .am-story-card__media { aspect-ratio: 16 / 10 !important; height: auto !important; }
}
/* punt 24: hero Voor organisaties, donkere laag onder de tekst */
.am-full--org .am-full__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(14,14,16,.82) 0%, rgba(14,14,16,.45) 45%, rgba(14,14,16,.25) 100%); }
/* punt 10: full-bleed verhaalhero's niet breder dan de bron (1920 px) */
@media (min-width: 1921px) { .am-story-hero .am-full__media { left: 50% !important; right: auto !important; width: 1920px !important; margin-left: -960px; } .am-story-hero { background: #0e0e10; } }
@media (min-width: 1921px) { .am-next .am-next__media { left: 50% !important; right: auto !important; width: 1920px !important; margin-left: -960px; } .am-next { background: #0e0e10; } }
/* Feedback 6, punt 6: socialposts onder het verhaal. Volgt het blok op "Bekijk het zelf", dan loopt het donker door zonder nieuwe schuine rand. */
.am-socials--after { clip-path: none; padding-top: 0; }
.am-socials .am-result__src { overflow-wrap: anywhere; }
/* Feedback 7, punt 9: pakketten met dezelfde rijen; label boven de waarde, zodat de drie kaarten rij per rij vergelijkbaar zijn. */
.am-pk .am-card li.am-pk__row { display: grid; grid-template-columns: 1fr; gap: 1px; padding-block: 7px; border-top: 1px solid rgba(17,17,20,.12); }
.am-pk .am-card li.am-pk__row::before { display: none; }
.am-pk .am-card--prem li.am-pk__row { border-top-color: rgba(255,255,255,.16); }
.am-pk__k { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; opacity: .62; }
.am-pk__v { font-size: .95rem; }
.am-pk__scope { margin-top: 18px; font-size: .95rem; opacity: .78; }
/* Feedback 7, punt 10: eerste cijferblok zonder telling, de zin draagt het blok. */
.am-kpi3__h { margin: 0; font: 900 clamp(1.6rem, 2.6vw, 2.3rem)/1.05 var(--display); letter-spacing: -.03em; max-width: 16ch; }
/* Feedback 7, punt 8: voor welk pakket de voorbeeldmaand geldt */
.am-agenda__ex { font-weight: 700; padding: 3px 10px; border: 1.5px solid currentColor; }
/* Feedback 7, punt 2: regel boven de Franse kaarten */
.am-org2__en { margin: clamp(14px, 2vw, 22px) 0 0; font-size: .95rem; opacity: .75; }
/* Feedback 7, overig 7: Fonz als kleinere kaart naast Dorien en Tom */
@media (min-width: 761px) { .am-duo:has(.am-person--pet) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .58fr); align-items: end; } }
@media (max-width: 760px) { .am-duo .am-person--pet { grid-column: 1 / -1; width: 62%; } .am-duo .am-person--pet .am-person__media { aspect-ratio: 4 / 3; } }
/* Feedback 7, punt 14: publieke film, klik om te laden */
.am-film__box { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.am-film__box > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.am-film__box > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.am-film__box.is-on > img, .am-film__box.is-on > .am-film__play { display: none; }
.am-film__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; border: 0; background: transparent; color: #fff; font: 700 1.05rem/1 var(--body, inherit); cursor: pointer; }
.am-film__play:focus-visible { outline: 3px solid var(--magenta-hi, #fff); outline-offset: -6px; }
.am-film__icon { width: 74px; height: 74px; border-radius: 50%; background: var(--magenta, #c0267a); position: relative; flex: none; }
.am-film__icon::after { content: ""; position: absolute; left: 30px; top: 23px; border-left: 20px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.am-film__note { margin-top: 12px; font-size: .9rem; opacity: .75; }
/* Feedback 7, overig 3: de weekstrook is een illustratie */
.am-week__ex { display: inline-block; margin-top: 10px; padding: 3px 10px; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; border: 1.5px solid currentColor; opacity: .8; }
/* feedback 8, overig 30: formatlabel op verhaalkaarten en tegels */
.am-story-card__f { margin: 6px 0 0; font-size: .86rem; line-height: 1.35; color: var(--mute); }
.am-theme-dark .am-story-card__f { color: rgba(255,255,255,.72); }
.am-tile__f { display: block; margin-top: 6px; font: 500 .84rem/1.35 var(--body); color: rgba(255,255,255,.85); }
/* feedback 9: de rode draad onderaan elk verhaal. Gsm en tablet: lijn links, één kolom. Desktop: lijn in het midden, knopen afwisselend. */
.am-thread-sec { background: var(--ink); color: #fff; }
.am-thread-sec .am-eyebrow { color: rgba(255,255,255,.75); }
.am-thread-sec .am-h2 { color: #fff; }
.am-thread { position: relative; }
.am-thread__svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.am-thread__svg path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.am-thread__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(22px, 3vw, 36px); }
.am-thread--line .am-thread__list { padding-left: 34px; }
.am-thread__node { position: relative; }
.am-thread__dot { position: absolute; left: -29px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 3px var(--magenta-hi, #e0559b); }
.am-thread--single .am-thread__dot { display: none; }
.js .am-thread__node { opacity: 0; transform: translateY(8px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .am-thread__node.is-in { opacity: 1; transform: none; }
.am-thread__img { display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
.am-thread__img img { width: 100%; height: 100%; object-fit: cover; }
.am-thread__a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 4px; min-height: 48px; padding: 14px 0; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.18); }
.am-thread__src { grid-column: 1; display: flex; align-items: center; gap: 8px; font: 600 .74rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.am-thread__src svg { flex: 0 0 auto; }
.am-thread__t { grid-column: 1; font: 500 1.08rem/1.35 var(--body); }
.am-thread__go { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); transition: background .3s; }
.am-thread__a:hover .am-thread__go, .am-thread__a:focus-visible .am-thread__go { background: var(--magenta); box-shadow: none; }
.am-thread__q { margin: 0; padding-top: 6px; }
.am-thread__q + .am-thread__q { margin-top: clamp(28px, 4vw, 44px); }
.am-thread__q blockquote { margin: 0; }
.am-thread__q p { margin: 0; font: 800 clamp(1.4rem, 2.6vw, 2.1rem)/1.22 var(--display, var(--body)); letter-spacing: -.01em; color: #fff; }
.am-thread__q figcaption { display: flex; align-items: center; gap: 12px; margin-top: 16px; font: 400 .84rem/1.3 var(--body); }
.am-thread__av { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; font: 700 .74rem/1 var(--body); letter-spacing: .04em; }
.am-thread__id { display: flex; flex-direction: column; gap: 2px; color: rgba(255,255,255,.7); }
.am-thread__id b { color: #fff; font-weight: 600; }
.am-thread__cta { margin-top: clamp(32px, 4vw, 52px); }
@media (min-width: 1024px) {
.am-thread--line .am-thread__list { padding-left: 0; display: flex; flex-direction: column; gap: 0; }
.am-thread--line .am-thread__node { width: calc(50% - 56px); margin-top: 24px; }
.am-thread--line .am-thread__node:first-child { margin-top: 0; }
.am-thread--line .am-thread__node:nth-child(even) { margin-left: auto; }
.am-thread--line .am-thread__dot { left: auto; right: -63px; }
.am-thread--line .am-thread__node:nth-child(even) .am-thread__dot { right: auto; left: -63px; }
/* de afstanden tussen de knopen zet site.js: elke knoop zo hoog mogelijk, zonder iets aan zijn eigen kant te raken */
.am-thread--line .am-thread__node--quote { width: auto; max-width: 46rem; margin-left: auto; margin-right: auto; padding-top: 44px; }
.am-thread--line .am-thread__node--quote .am-thread__dot { left: calc(50% - 7px) !important; right: auto !important; top: 0; }
.am-thread--single .am-thread__list { max-width: 46rem; }
}
@media (prefers-reduced-motion: reduce) {
.js .am-thread__node { opacity: 1 !important; transform: none !important; transition: none !important; }
.am-thread__svg path { stroke-dashoffset: 0 !important; }
}
/* feedback 9, punt 0b: een foto-hero nooit groter dan de bron. Het beeldkader is hoogstens zo breed en hoog als het bestand, gecentreerd, zonder drift. */
.am-story-hero--cap { background: #0e0e10; }
.am-story-hero--cap .am-full__media { inset: 0 !important; margin: auto !important;
width: min(100%, var(--mw)) !important; height: min(100%, var(--mh)) !important; transform: none !important; }
.am-story-hero--cap .am-media > img, .am-story-hero--cap .am-media picture img { animation: none !important; transform: none !important; }
/* feedback 10: geen opschaling. Volgend verhaal: beeldkader hoogstens de bron, met een rand. Organisatiehero: hoogstens 1920x1080 (de bronnen). */
.am-next__media--cap { inset: 0 !important; margin: auto !important; width: min(100%, var(--mw)) !important; height: min(100%, var(--mh)) !important; }
.am-next__media--cap img, .am-next__media--cap video { animation: none !important; transform: none !important; }
.am-full--org { background: #0e0e10; }
@media (min-width: 1921px), (min-height: 1081px) {
.am-full--org .am-full__media { inset: 0 !important; margin: auto !important; width: min(100%, 1920px) !important; height: min(100%, 1080px) !important; }
}
/* feedback 10: tablet staand gebruikt de staande gsm-uitsneden; dezelfde focus als op gsm */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
.am-story-hero .am-media img, .am-story-hero .am-media video { object-position: var(--pos-m, var(--pos, 50% 50%)) !important; }
}
/* feedback 11: optieregel (LinkedIn) onder de pakketrijen */
.am-pk__opt { list-style: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .9rem; line-height: 1.4; color: var(--mute); }
.am-card--prem .am-pk__opt { color: rgba(255,255,255,.75); border-top-color: rgba(255,255,255,.25); }
/* feedback 12: cookiebanner in de huisstijl; twee gelijke knoppen */
.am-consent { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 200; max-width: 560px; margin-left: auto; padding: 18px 20px; background: var(--ink); color: #fff; box-shadow: var(--am-shadow); transform: translateY(12px); opacity: 0; transition: opacity .3s, transform .3s; }
.am-consent.is-on { opacity: 1; transform: none; }
.am-consent[hidden] { display: none; }
.am-consent__t { margin: 0; font: 400 .95rem/1.5 var(--body); }
.am-consent__t a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.am-consent__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.am-consent__btn { min-height: 48px; padding: 0 16px; border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff; font: 600 .95rem/1 var(--body); cursor: pointer; }
.am-consent__btn:hover, .am-consent__btn:focus-visible { background: #fff; color: var(--ink); }
.am-consent__btn:focus-visible { outline: 3px solid var(--magenta-hi, #e0559b); outline-offset: 2px; }
.am-footer__cookies { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .am-consent { transition: none; transform: none; } }
/* feedback 12, toegankelijkheid: de Fonz-hint enkel voor schermlezers; tikdoelen minstens 44 px op aanraakschermen */
.am-fonzgame__hint { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (pointer: coarse) {
.am-link, .am-head a, .am-footer a, .am-footer__cookies, .am-lang a, .am-row__link { min-height: 44px; display: inline-flex; align-items: center; }
.am-footer li a, .am-lang a, .am-footer__cookies { min-width: 44px; justify-content: flex-start; }
.am-footer p a { min-height: 44px; display: inline-flex; align-items: center; }
}
/* feedback 10: de begrenzing van het volgend-verhaalbeeld wint ook boven 1920 px, en geen inzoomen bij hover */
.am-next .am-next__media.am-next__media--cap { left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; margin: auto !important; width: min(100%, var(--mw)) !important; height: min(100%, var(--mh)) !important; }
.am-next:hover .am-next__media.am-next__media--cap { transform: none; }
/* feedback 12: voldoende contrast voor de stempel op een lichte achtergrond */
.am-org2-closed .am-stamp, .am-org2-light .am-stamp { color: #c8102e; border-color: #c8102e; }
/* feedback 10 (Cowork 6/11): dorien-laptop is 1920x1080 en er bestaat geen grotere bron. Onder 900 px een kader in de verhouding van het beeld (16:9), zodat het beeld nooit groter dan het bestand getoond wordt. */
@media (max-width: 900px) { .am-band__media--wide { aspect-ratio: 16 / 9; margin-bottom: 18%; } .am-band__media--wide .am-band__float { left: -2%; right: auto; bottom: -24%; width: 40%; } }
/* feedback 13 (org): de dag van een productie heeft nog zeven stappen (A53 tot A57). De tijdlijn krijgt zeven gelijke kolommen, iets meer breedte op grote schermen, en het eerste woordlabel ("Weeks before", "Des semaines avant") mag op twee regels. */
.am-day2__rail ol { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.am-day2__rail li:first-child button { white-space: normal; line-height: 1.15; padding-right: 8px; }
@media (max-width: 760px) { .am-day2__rail-inner { min-width: 560px; } }
@media (min-width: 900px) { .is-cine .am-day2__rail { width: max(calc(33% + 2vw - var(--gut)), min(600px, calc(48% - var(--gut)))); } }
/* feedback 13 (stories): verhaalsjabloon met Klant, Jaar en Format, foto bij "Gemaakt door", filmlinks en het socialkaartje */
.am-facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .am-facts--3 { grid-template-columns: 1fr 1fr; } .am-facts--3 > div:first-child { grid-column: 1 / -1; } }
.am-story-by { display: flex; align-items: center; gap: 12px; }
.am-story-by__avs { display: inline-flex; flex: none; }
.am-story-by__av { display: block; width: 40px; height: 40px; border-radius: 50%; background-color: #3a3a40; background-repeat: no-repeat; box-shadow: 0 0 0 2px #fff; }
.am-story-by__av + .am-story-by__av { margin-left: -8px; }
.am-film__more { margin-top: 10px; font-size: .95rem; }
.am-film__more .am-link { display: inline-flex; align-items: center; min-height: 44px; }
.am-proof { padding-block: clamp(3rem, 7vw, 6rem); }
.am-proof .am-stack { gap: 22px; }
.am-post-sec { padding-block: clamp(2.5rem, 6vw, 5rem); background: var(--mist); }
.am-post { margin: 0 auto; max-width: 560px; background: #fff; color: #191919; border: 1px solid #e0dfdc; border-radius: 10px; box-shadow: var(--am-shadow); padding: 18px 20px 20px; }
.am-post__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.am-post__av { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #dde3ea; color: #3c4a5a; font-weight: 700; font-size: 1rem; letter-spacing: .02em; }
.am-post__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.am-post__id { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
.am-post__id b { font-weight: 700; font-size: 1rem; color: #191919; }
.am-post__id span { font-size: .84rem; color: #666; }
.am-post__net { align-self: start; color: #0a66c2; }
.am-post__net .am-fa { display: block; width: 22px; height: 22px; }
.am-post__q { margin: 14px 0 18px; }
.am-post__q p { margin: 0; font-size: 1.05rem; line-height: 1.5; color: #191919; }
.am-post .am-row { margin: 0; }
.am-post .am-btn { --bg: #fff; --fg: #0a66c2; min-height: 44px; padding: 0 1.2em; font-size: .95rem; border-radius: 999px; clip-path: none; box-shadow: inset 0 0 0 1px #0a66c2; }
.am-post .am-btn::before { background: #0a66c2; }
.am-post .am-btn:hover { --fg: #fff; clip-path: none; }
.am-post .am-btn::before { transform: translateY(101%); }
.am-post .am-btn:hover::before, .am-post .am-btn:focus-visible::before { transform: translateY(0); }
/* feedback 13 (biz): Instagram-wand met acht tegels, twee cijfers, één pakketknop, lokale prijsregels */
.am-feed2--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 1100px) { .am-feed2--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .am-feed2--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.am-kpi3--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .am-kpi3--2 { grid-template-columns: 1fr; } }
.am-pk__cta { display: flex; justify-content: center; }
.am-lp-local__copy { max-width: 760px; }
.am-lp-services { margin-top: 4px; }
.am-lp-pkline { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; display: grid; gap: 10px; max-width: 760px; font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.am-lp-pkline li { padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.am-lp-pkline__vat { margin-top: 10px; }
@media (min-width: 901px) { .am-xrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* feedback 13 (home): gemengde logoband op de home, vijf grote en vijf lokale klanten afwisselend.
Lichte logo's (Sunout oranje, de baseline van Thruvo) worden in grijs te bleek: iets donkerder zetten. */
.am-logos__item--local img { filter: grayscale(1) contrast(1.25) brightness(.85); opacity: .85; }
.am-logos__item--light img { filter: grayscale(1) brightness(.6) contrast(1.6); }
.am-logos__item--thin img { filter: grayscale(1) contrast(1.6); opacity: .9; }
@media (hover: hover) { .am-logos__item--local:hover img { filter: none; opacity: 1; } }
@media (hover: none) { .am-logos__item--local img { filter: none; opacity: 1; } }
/* feedback 13 (home, A14): de dienstregels van Tom zonder kaartkop, één kolom en iets kleiner */
.am-list--lines .am-list__item { grid-template-columns: minmax(0, 1fr); }
.am-list--lines .am-list__t { font-size: clamp(1.3rem, 2.4vw, 2.2rem); }
/* feedback 13 (fonts): geen verspringende navigatie bij een paginawissel.
1. Vervangfonts op Arial met de maten van Inter Tight en Archivo (fontTools: unitsPerEm, ascender, descender, gemiddelde breedte;
size-adjust nagemeten op de navigatielabels EN, NL en FR). Zolang het echte font laadt, neemt de tekst zo goed als dezelfde plaats in.
2. De header krijgt een eigen view-transition-laag: hij blijft staan en wisselt zonder animatie; enkel de inhoud eronder gaat zacht over.
3. Wie minder beweging vraagt, krijgt geen overgang. */
@font-face { font-family: "Inter Tight Fallback"; font-weight: 300; src: local("Arial"), local("ArialMT"); size-adjust: 96.93%; ascent-override: 99.95%; descent-override: 24.88%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 95.03%; ascent-override: 101.95%; descent-override: 25.38%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT"); size-adjust: 96.72%; ascent-override: 100.17%; descent-override: 24.94%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 93.36%; ascent-override: 103.77%; descent-override: 25.84%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; font-weight: 800; src: local("Arial Black"), local("Arial-Black"); size-adjust: 89.88%; ascent-override: 97.69%; descent-override: 23.36%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; font-weight: 900; src: local("Arial Black"), local("Arial-Black"); size-adjust: 95.55%; ascent-override: 91.89%; descent-override: 21.98%; line-gap-override: 0%; }
.am-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* 34ch hangt af van de breedte van de "0" in het geladen font; in em blijft de leadbreedte gelijk met en zonder webfont (34 x 0,5825 em in Inter Tight 300) */
.am-lead { max-width: 19.81em; }
.am-head > .am-lead { max-width: min(19.81em, 100%); }
/* feedback 14 (squares): geen losse paarse vierkantjes meer.
- Het magenta cursorvierkantje (en de ring rond links) is weg: het zweefde naast koppen, knoppen en kaarten.
- Het blokje achter een kop blijft als merkteken, maar hangt vast aan het laatste woord (site.js, anchorSquares). */
.am-sq-end { white-space: nowrap; }
/* feedback 14 (rules): pakketkaarten op één raster (punt 1).
Vanaf 861px delen de drie kaarten dezelfde rijen via subgrid: titel, intro, de zes pakketrijen (--r), de optieregel en de prijs.
Zo staan Posts, Foto's, Kanalen, Planning, Snelle posts en Maandrapport in elke kaart op dezelfde hoogte, ook als een tekst
over twee regels loopt, en staan de prijzen onderaan op één lijn. Zonder subgrid blijft de oude flexkolom met margin-top:auto. */
.am-pk { align-items: start; }
.am-pk > .am-card { padding-top: 28px; border-top-width: 3px; }
.am-pk .am-card__p { margin-top: auto; }
.am-pk__scope { text-align: center; margin-inline: auto; max-width: none; }
@supports (grid-template-rows: subgrid) {
@media (min-width: 1025px) {
.am-pk { row-gap: 0; align-items: stretch; }
.am-pk > .am-card { display: grid; grid-template-rows: subgrid; grid-row: span 10; row-gap: 0; height: auto; align-content: start; }
.am-pk > .am-card > .am-card__t { grid-row: 1; align-self: start; padding-bottom: 12px; }
.am-pk > .am-card > .am-pk__for { grid-row: 2; padding-bottom: 12px; }
.am-pk > .am-card > ul { grid-row: 3 / span 7; display: grid; grid-template-rows: subgrid; row-gap: 0; margin: 0; }
.am-pk > .am-card > ul > .am-pk__row { grid-row: var(--r); align-content: start; }
.am-pk > .am-card > ul > .am-pk__opt { grid-row: 7; align-self: start; }
.am-pk > .am-card > .am-card__p { grid-row: 10; align-self: baseline; margin-top: 0; min-height: 0; }
/* de badge "Mijn aanrader" staat in de lege introrij onder de titel: hij duwt niets opzij en de titels blijven op één basislijn */
.am-pk > .am-card--pop > .am-card__badge { position: static; grid-row: 2; align-self: start; justify-self: start; }
.am-pk > .am-card--pop > .am-card__t { padding-right: 0; }
}
}
/* feedback 14 (rules): logoregel voor elke logostrip en tegelrij (punten 9 en 13).
Elk logo staat in een vaste tegel en past daar volledig in: object-fit contain, hoogstens 75% van de breedte en 45% van de hoogte.
Binnen die grenzen krijgt elk logo dezelfde oppervlakte (breedte = --logo-s x wortel van de beeldverhouding --r), zodat brede
woordmerken en vierkante beeldmerken optisch even groot ogen. Niets wordt afgesneden, op elk formaat. Zonder sqrt() blijft enkel de begrenzing. */
.am-logos { --logo-s: clamp(36px, 3.4vw, 56px); --logo-w: calc(var(--logo-s) * 3.4); --logo-h: calc(var(--logo-s) * 2.3); }
.am-logos .am-marquee__track { gap: clamp(4px, 1vw, 16px); padding-right: clamp(4px, 1vw, 16px); }
.am-logos .am-logos__item { width: var(--logo-w); height: var(--logo-h); justify-content: center; }
.am-logos .am-logos__item img { width: auto; height: auto; max-width: 75%; max-height: 45%; object-fit: contain; }
.am-logos .am-logos__item img[style*="--r"] { width: calc(var(--logo-s) * sqrt(var(--r))); }
.am-full__logos .am-logos { --logo-s: clamp(30px, 2.8vw, 46px); --logo-h: calc(var(--logo-s) * 1.8); }
/* klantenband op /businesses/ en de lokale pagina's: dezelfde regel binnen de vierkante tegels */
.am-cband { --logo-s: clamp(40px, 4vw, 56px); }
.am-cband__logo { position: absolute; inset: 27.5% 12.5%; width: auto; height: auto; }
.am-cband__logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; transform: none; }
.am-cband__logo img[style*="--r"] { width: calc(var(--logo-s) * sqrt(var(--r))); }
/* minder lege ruimte boven "Voor wie ik maak": de sectie erboven heeft al een volle onderrand */
.am-cband-sec { padding-top: clamp(28px, 3.5vw, 64px); }
/* feedback 14 (parts): socialkaartje naast het resultaat (punt 27), browservenster voor websitecases (punt 31),
kanalenlijst in footer en op contact (punten 23 en 33). */
/* punt 27: resultaat links, kaartje rechts; op gsm eronder en recht */
.am-postpair { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.am-postpair__main { gap: 18px; }
.am-postbox { justify-self: end; width: 100%; max-width: 470px; }
.am-postbox .am-post { margin: 0; max-width: none; padding: 22px 24px 8px; border: 0; border-radius: 0; background: #fff; color: var(--ink); font-family: var(--body);
box-shadow: var(--am-shadow); transform: rotate(-2deg); transform-origin: 60% 50%; }
.am-postbox .am-post__head { gap: 12px; }
.am-postbox .am-post__av { width: 44px; height: 44px; background: var(--mist); color: var(--mute); font-size: .9rem; }
.am-postbox .am-post__id b { font-family: var(--body); font-weight: 600; color: var(--ink); }
.am-postbox .am-post__id span { color: var(--mute); font-size: .82rem; }
.am-postbox .am-post__net { color: #8a8a93; }
.am-postbox .am-post__net .am-fa { width: 16px; height: 16px; }
.am-postbox .am-post__q { margin: 18px 0 14px; }
.am-postbox .am-post__q p { font-family: var(--display); font-weight: 800; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.22; letter-spacing: -.02em; color: var(--ink); }
.am-post__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; border-top: 1px solid var(--line); }
.am-post__link { font-size: .95rem; color: var(--ink); }
.am-post__lang { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.am-post-sec { background: none; }
.am-post-sec .am-postbox { margin-inline: auto; }
@media (prefers-reduced-motion: no-preference) {
.am-postbox .am-post { transition: transform .8s var(--ease-out); }
.am-postbox:hover .am-post { transform: rotate(-.6deg); }
}
@media (max-width: 860px) {
.am-postpair { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.am-postbox { justify-self: start; max-width: 520px; }
.am-postbox .am-post, .am-postbox:hover .am-post { transform: none; box-shadow: var(--am-shadow); }
}
/* punt 31: browservenster (am-bw) op het kleurverloop, met optioneel een gsm; de lange screenshot schuift traag in beeld */
.am-bwtile { background: var(--grad); }
.am-mosaic .am-bwtile.m-c { grid-column: 1 / span 7; aspect-ratio: 4 / 3; }
.am-bw { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 9% 4% 11%; }
.am-bw__win { position: relative; width: 100%; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(14,14,16,.06), var(--am-shadow); }
.am-bw--duo .am-bw__win { width: 88%; margin-right: 10%; }
.am-bw__bar { position: relative; display: flex; align-items: center; height: 26px; padding: 0 10px; background: var(--mist); border-bottom: 1px solid var(--line); }
.am-bw__dots { display: flex; gap: 5px; }
.am-bw__dots i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.am-bw__dots i:nth-child(2) { background: #febc2e; }
.am-bw__dots i:nth-child(3) { background: #28c840; }
.am-bw__url { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: min(46%, 260px); height: 17px; border-radius: 5px; background: #fff; color: var(--mute); font-size: 10.5px; line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.am-bw__url svg { flex: none; opacity: .7; }
.am-bw__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.am-bw__view picture { display: block; }
.am-bw__view img { display: block; width: 100%; height: auto; max-width: none; }
.am-bw__phone { position: absolute; right: 4%; bottom: 10%; width: 19%; padding: 4px; border-radius: 16px; background: var(--ink); box-shadow: var(--am-shadow); }
.am-bw__phone .am-bw__view { aspect-ratio: 393 / 852; border-radius: 12px; }
@media (prefers-reduced-motion: no-preference) {
.am-bwtile.is-in .am-bw__view img { animation: am-bw-scroll 22s ease-in-out 1.6s infinite; will-change: transform; }
.am-bwtile.is-in .am-bw__phone .am-bw__view img { animation-delay: 2.4s; }
.am-motion-paused .am-bw__view img { animation-play-state: paused; }
}
@keyframes am-bw-scroll { 0%, 14% { transform: translateY(0); } 48%, 62% { transform: translateY(var(--bw-end, 0)); } 96%, 100% { transform: translateY(0); } }
@media (max-width: 700px) {
.am-mosaic .am-bwtile.m-c { aspect-ratio: 10 / 9; }
.am-bw { padding: 15% 3% 11%; }
.am-bw--duo .am-bw__win { width: 84%; margin-right: 12%; }
.am-bw__phone { width: 22%; padding: 3px; border-radius: 12px; }
.am-bw__phone .am-bw__view { border-radius: 9px; }
.am-bw__bar { height: 20px; }
.am-bw__dots i { width: 6px; height: 6px; }
.am-bw__url { height: 13px; font-size: 8.5px; }
}
/* leveringsregels als label bij het beeld (Matermaco) */
.am-mosaic__label { position: absolute; left: 12px; top: 12px; z-index: 3; display: inline-block; max-width: calc(100% - 24px); padding: 7px 10px; background: #fff; color: var(--ink); font-size: .72rem; font-weight: 600; line-height: 1.25; letter-spacing: .1em; text-transform: uppercase; box-shadow: var(--am-shadow); }
.am-mosaic__more { list-style: none; margin-bottom: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.am-mosaic__more .am-mosaic__label { position: static; max-width: none; }
@media (max-width: 700px) { .am-mosaic__label { left: 10px; top: 10px; padding: 6px 8px; font-size: .66rem; } }
.am-channels { display: flex; flex-direction: column; gap: 0; margin: 0; }
.am-channels a { gap: 12px; }
.am-channels .am-fa { width: 18px; height: 18px; flex: none; opacity: .85; }
/* punt 33: op de Franse contactpagina (enkel de foto van Dorien, route organisatie) bleef het beeld leeg; de foto van Dorien aan de laptop blijft altijd staan */
.am-contact__who.is-org .is-dorien:only-child { display: block; }
/* feedback 14 (stepper): klikbare steppers zonder pin (punten 5, 16, 18, 19 en 20).
Productiedag (.am-pday) op /organizations/, weekblok (.am-wk) op de home, verhalenstrip (.am-hscroll) als gewone scroller.
Titel, scène, tekst en bediening passen samen in één scherm (tools/fit-check.js). */
.am-stepper__arrow { all: unset; box-sizing: border-box; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid currentColor; color: inherit; cursor: pointer; transition: background-color .2s ease, color .2s ease, opacity .2s ease; }
.am-stepper__arrow svg { width: 20px; height: 20px; }
.am-stepper__arrow--next svg { transform: scaleX(-1); }
.am-stepper__arrow:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.am-stepper__arrow:disabled { opacity: .32; cursor: default; }
.am-stepper__arrow:focus-visible, .am-stepper__rail button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.am-stepper__rail { position: relative; flex: 1 1 auto; min-width: 0; }
.am-stepper__rail ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.am-stepper__rail button { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 4px 2px 2px; cursor: pointer; text-align: center; font: 500 .72rem/1.15 var(--body); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.am-stepper__rail button i { position: relative; z-index: 1; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; background: var(--dot-bg, #fff); transition: background-color .3s ease, transform .3s var(--ease-out); }
.am-stepper__rail button[aria-current="step"] i { background: currentColor; transform: scale(1.35); }
.am-stepper__line { position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 9px; height: 2px; background: var(--line-bg, rgba(14,14,16,.22)); }
.am-stepper__line i { position: absolute; inset: 0; background: var(--line-fill, var(--ink)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
.am-stepper__rail button:hover span { text-decoration: underline; text-underline-offset: 4px; }
/* ---------- Productiedag ---------- */
.am-pday { background: #0e0e10; color: #fff; padding-block: clamp(3rem, 7vw, 6rem); overflow-x: clip; }
.am-pday :focus-visible { outline-color: #fff; }
.am-pday__box { --red: #ff3b30; --dot-bg: #0e0e10; --line-bg: rgba(255,255,255,.2); --line-fill: linear-gradient(90deg, #ffa25c, #f5507a, #d43c9f, #9b4ad8); display: grid; gap: clamp(14px, 2.4svh, 26px); outline: none; }
.am-pday__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 40px; }
.am-pday__head .am-h2 { margin: 0; color: #fff; font-size: clamp(2rem, min(4.6vw, 7svh), 4.6rem); }
.am-pday__lead { margin: 0; color: rgba(255,255,255,.78); }
.am-pday__body { display: grid; gap: 18px; min-height: 0; }
.am-pday__scene { position: relative; min-height: 0; overflow: hidden; background: radial-gradient(ellipse at 60% 45%, #1b1b21 0%, #0e0e10 70%); }
.am-pday__svg { display: block; width: 100%; height: 100%; }
.am-pday__status { position: absolute; z-index: 2; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; background: rgba(14,14,16,.72); font: 600 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; transition: background-color .4s ease; }
.am-pday__status i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.55); transition: background-color .4s ease; }
.am-pday__count { position: absolute; z-index: 2; right: 12px; bottom: 12px; font: 600 .78rem/1 var(--body); letter-spacing: .1em; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.75); }
.am-pday__count b { color: #fff; font-weight: 700; }
.am-pday__tally { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 4px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-out); }
.am-pday__box[data-state="rec"] .am-pday__status { background: #c4231a; }
.am-pday__box[data-state="rec"] .am-pday__status i { background: #fff; animation: am-pday-blink 1s steps(1) infinite; }
.am-pday__box[data-state="rec"] .am-pday__tally { transform: scaleX(1); }
.am-pday__box[data-state="saved"] .am-pday__status i { background: #fff; }
.am-pday__box[data-state="edit"] .am-pday__status i { border-radius: 0; background: #ffa25c; }
@keyframes am-pday-blink { 50% { opacity: .15; } }
.am-pday__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.am-pday__time { margin: 0; font: 900 clamp(2.8rem, min(7vw, 12svh), 7.4rem)/.9 var(--display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.am-pday__time--word { font-size: clamp(2rem, min(4.2vw, 8svh), 4.4rem); white-space: normal; letter-spacing: -.03em; }
.am-pday__step[data-state="rec"] .am-pday__time { color: var(--red); }
.am-pday__title { margin: 12px 0 0; font: 800 clamp(1.35rem, min(2.5vw, 4.4svh), 2.6rem)/1.05 var(--display); letter-spacing: -.02em; }
.am-pday__text { margin: 10px 0 0; max-width: 34ch; color: rgba(255,255,255,.8); font-size: clamp(1rem, min(1.25vw, 2.4svh), 1.2rem); line-height: 1.45; }
.am-pday__ctrl { display: none; align-items: center; gap: 12px; }
.am-pday__rail button { color: rgba(255,255,255,.66); }
.am-pday__rail button[aria-current="step"], .am-pday__rail button:hover { color: #fff; }
.am-pday .am-stepper__arrow:hover:not(:disabled) { background: #fff; border-color: #fff; color: var(--ink); }
.am-pday__scene { display: none; }
/* Stepper (JS zet .is-stepper): één stap tegelijk, de scène volgt */
.am-pday__box.is-stepper .am-pday__scene { display: block; height: clamp(150px, 30svh, 380px); }
.am-pday__box.is-stepper .am-pday__ctrl { display: flex; }
.is-stepper .am-pday__steps { gap: 0; }
.is-stepper .am-pday__step { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .3s ease, transform .4s var(--ease-out), visibility 0s linear .3s; }
.is-stepper .am-pday__step.is-active { visibility: visible; opacity: 1; transform: none; transition: opacity .6s ease .12s, transform .8s var(--ease-out) .12s, visibility 0s; }
@media (max-width: 899px) {
.am-pday__lead { font-size: 1rem; }
.am-pday__box.is-stepper .am-pday__body { gap: 12px; }
.am-pday__rail span { display: none; }
.am-pday__rail button { gap: 0; justify-content: flex-start; }
.am-pday__time { font-size: clamp(2.4rem, 11vw, 3.6rem); }
.am-pday__time--word { font-size: clamp(1.8rem, 8vw, 2.6rem); }
.am-pday__title { margin-top: 8px; font-size: clamp(1.3rem, 5.6vw, 1.7rem); }
.am-pday__text { margin-top: 6px; font-size: 1rem; line-height: 1.4; }
}
@media (max-width: 899px) and (max-height: 700px) {
.am-pday__lead { display: none; }
.am-pday__box.is-stepper .am-pday__scene { height: clamp(140px, 27svh, 240px); }
}
@media (min-width: 900px) {
.am-pday__box.is-stepper { height: clamp(520px, calc(100svh - 112px), 920px); grid-template-rows: auto minmax(0, 1fr) auto; }
.am-pday__box.is-stepper .am-pday__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.am-pday__box.is-stepper .am-pday__scene { order: 2; height: 100%; }
.am-pday__box.is-stepper .am-pday__steps { order: 1; }
.am-pday__step { display: block; }
}
/* Altijd inbegrepen en op vraag: deel van de scène, op hetzelfde raster als de tijdlijn (punt 20) */
.am-pday__incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 64px); margin-top: clamp(40px, 6vw, 72px); }
.am-pday__k { margin: 0 0 10px; font: 600 .76rem/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.am-pday__col ul { list-style: none; margin: 0; padding: 0; }
.am-pday__col li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; padding-block: 12px; border-top: 1px solid rgba(255,255,255,.16); font-size: .98rem; line-height: 1.4; color: rgba(255,255,255,.9); }
.am-pday__ico { width: 18px; height: 18px; margin-top: 2px; }
.am-pday__col--std .am-pday__ico { color: #ff7ab8; }
.am-pday__col--opt .am-pday__ico { color: rgba(255,255,255,.75); }
@media (max-width: 640px) { .am-pday__incl { grid-template-columns: 1fr; } }
/* ---------- Weekblok "Van post tot klant" (punt 5) ---------- */
/* Een lichte sluier over het merkverloop: donkere tekst haalt zo overal minstens 4,5:1 (gemeten, zie het verslag van ronde 14). */
.am-wk { position: relative; color: var(--ink); background: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)), var(--grad); padding-block: clamp(2.5rem, 5vw, 4.5rem); overflow-x: clip; }
.am-wk__box { --wk-ph: clamp(250px, calc(100svh - 340px), 640px); --dot-bg: #f6e3ef; --line-bg: rgba(14,14,16,.3); display: grid; justify-items: center; gap: clamp(10px, 1.6svh, 18px); outline: none; }
.am-wk__head { justify-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.am-wk__title { margin: 0; font: 900 clamp(2.2rem, min(5.4vw, 8svh), 5.4rem)/.95 var(--display); letter-spacing: -.045em; color: var(--ink); }
.am-wk__ex { margin: 0; padding: 3px 10px; font: 600 .78rem/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; border: 1.5px solid currentColor; }
.am-wk__steps { list-style: none; margin: 0; padding: 0; display: grid; justify-items: center; gap: 48px; }
.am-wk__step { display: grid; justify-items: center; gap: 10px; text-align: center; }
.am-wk__day { margin: 0; font: 700 .9rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.am-wk__line { margin: 0; max-width: 30ch; font-size: clamp(1.05rem, min(1.6vw, 2.8svh), 1.45rem); font-weight: 500; line-height: 1.3; }
.am-wk__ctrl { display: none; align-items: center; justify-content: center; gap: 10px; width: min(100%, 600px); }
.am-wk__rail button { font: 600 .74rem/1.15 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.am-wk__rail button[aria-current="step"] { font-weight: 800; }
.am-wk__short { display: none; }
.am-wk__count { margin: 0; min-width: 3.2em; font: 600 .82rem/1 var(--body); letter-spacing: .06em; font-variant-numeric: tabular-nums; text-align: right; }
.am-wk__box.is-stepper .am-wk__ctrl { display: flex; }
.is-stepper .am-wk__steps { gap: 0; }
.is-stepper .am-wk__step { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .3s ease, transform .45s var(--ease-out), visibility 0s linear .3s; }
.is-stepper .am-wk__step.is-active { visibility: visible; opacity: 1; transform: none; transition: opacity .55s ease .1s, transform .8s var(--ease-out) .1s, visibility 0s; }
/* de telefoon is ontworpen op 360 x 760 en schaalt mee (--phk via site.js) */
.is-stepper .am-wk__ph { position: relative; height: var(--wk-ph); aspect-ratio: 360 / 760; }
.is-stepper .am-wk__ph .am-week__phone { position: absolute; left: 0; top: 0; width: 360px; height: 760px; aspect-ratio: auto; transform: scale(var(--phk, .5)); transform-origin: 0 0; box-shadow: var(--am-shadow); }
.is-stepper .am-wk__step .am-week__notes li { opacity: 0; transform: translateY(-10px); }
.is-stepper .am-wk__step.is-active .am-week__notes li { animation: am-week-note .45s var(--ease-out) forwards; animation-delay: calc(.35s + var(--k) * .45s); }
.is-stepper .am-wk__step.is-active .am-week__bubble { animation: am-week-note .5s var(--ease-out) .6s both; }
@media (max-width: 899px) { .am-wk__box { --wk-ph: clamp(240px, calc(100svh - 350px), 600px); } }
@media (max-width: 600px) {
.am-wk__full { display: none; }
.am-wk__short { display: inline; }
.am-wk__ctrl { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.is-stepper .am-pday__step, .is-stepper .am-wk__step, .am-stepper__line i, .am-stepper__rail button i { transition: none !important; transform: none !important; }
.is-stepper .am-wk__step .am-week__notes li, .is-stepper .am-wk__step .am-week__bubble { animation: none !important; opacity: 1; transform: none; }
.am-pday__box[data-state="rec"] .am-pday__status i { animation: none; }
}
/* ---------- Verhalenstrip op de home: gewone horizontale scroller met pijlen (geen pin) ---------- */
.am-hscroll__head { margin-bottom: clamp(20px, 3svh, 44px); }
.am-hscroll__nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.am-hscroll__nav .am-row { margin: 0 0 0 12px; }
.am-hscroll__bar { display: none; height: 3px; margin: 18px var(--gut-r) 0 var(--gut); background: var(--line); overflow: hidden; }
.am-hscroll__bar i { display: block; height: 100%; background: var(--grad); transform: scaleX(.1); transform-origin: 0 50%; transition: transform .25s ease; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
.am-hscroll .am-hscroll__track { width: auto; max-width: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut) var(--gut-r); scrollbar-width: none; align-items: flex-start; }
.am-hscroll .am-hscroll__track::-webkit-scrollbar { display: none; }
.am-hscroll .am-hscroll__track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.am-hscroll .am-hscroll__track > .am-story-card { scroll-snap-align: start; width: min(clamp(280px, 38vw, 560px), calc((100svh - 380px) * .8)); }
.am-hscroll .am-hscroll__track > .am-story-card--wide { width: min(clamp(300px, 52vw, 780px), calc((100svh - 380px) * 16 / 11)); }
.am-hscroll.is-scrollable .am-hscroll__bar { display: block; }
}
@media (max-width: 899px), (hover: none), (pointer: coarse) {
.am-hscroll__nav .am-stepper__arrow { display: none; }
}
/* feedback 14 (heroes): verhaalhero schermvullend meteen onder de menubalk (punten 24 en 25).
Label, Gemaakt door, titel en introzin staan in het beeld, met een zacht verloop aan de kant van de tekst.
Alles samen past in één scherm (punt 16): letters schalen mee met de schermhoogte (svh) en -breedte.
Het beeld vult het scherm, maar het kader is nooit groter dan de bron (--mw/--mh; op gsm en staande tablet --mw-m/--mh-m);
is het scherm groter, dan vult site.js de rand met een vervaagde kopie (am-shero__bg) en vervaagt de rand van het kader.
Focus (--pos/--pos-m) en titelplaats (data-title: bl, br, tl; data-title-m: bl, tl) komen per verhaal uit story_heroes.json. */
.am-story-hero.am-shero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
min-height: 100vh; min-height: 100svh; padding: calc(76px + env(safe-area-inset-top, 0px)) 0 0; background: #0e0e10; overflow: hidden; }
.am-story-hero.am-shero[data-title="tl"] { justify-content: flex-start; }
.am-story-hero.am-shero > .am-full__media { inset: 0 !important; left: 0 !important; right: 0 !important; margin: auto !important; transform: none !important; z-index: 0;
width: min(100%, var(--mw, 100%)) !important; height: min(100%, var(--mh, 100%)) !important; }
.am-story-hero.am-shero .am-media img, .am-story-hero.am-shero .am-media video { animation: none !important; transform: none !important; }
.am-story-hero.am-shero .am-full__media::before, .am-story-hero.am-shero .am-full__media::after { content: none; }
.am-story-hero.am-shero.is-capped > .am-full__media { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
-webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); mask-composite: intersect; }
.am-story-hero.am-shero.is-capped-x:not(.is-capped-y) > .am-full__media { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.am-story-hero.am-shero.is-capped-y:not(.is-capped-x) > .am-full__media { -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); }
.am-shero__bg { position: absolute; inset: -40px; z-index: 0; background: center / cover no-repeat; filter: blur(28px) brightness(.55) saturate(1.1); pointer-events: none; }
/* verloop: bovenaan voor de menubalk, en aan de kant van de tekst */
.am-story-hero.am-shero::before { content: ""; position: absolute; inset: 0 0 auto; height: 180px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(14,14,16,.6), rgba(14,14,16,0)); }
.am-story-hero.am-shero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(0deg, rgba(14,14,16,.86) 0%, rgba(14,14,16,.62) 26%, rgba(14,14,16,.22) 52%, rgba(14,14,16,0) 72%),
linear-gradient(90deg, rgba(14,14,16,.5) 0%, rgba(14,14,16,0) 55%); }
.am-story-hero.am-shero[data-title="br"]::after { background: linear-gradient(0deg, rgba(14,14,16,.86) 0%, rgba(14,14,16,.62) 26%, rgba(14,14,16,.22) 52%, rgba(14,14,16,0) 72%),
linear-gradient(270deg, rgba(14,14,16,.5) 0%, rgba(14,14,16,0) 55%); }
.am-story-hero.am-shero[data-title="tl"]::after { background: linear-gradient(180deg, rgba(14,14,16,.86) 0%, rgba(14,14,16,.62) 30%, rgba(14,14,16,.22) 56%, rgba(14,14,16,0) 76%),
linear-gradient(90deg, rgba(14,14,16,.5) 0%, rgba(14,14,16,0) 55%); }
.am-story-hero.am-shero .am-shero__in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start;
gap: clamp(10px, 1.9svh, 22px); padding-top: clamp(16px, 4svh, 48px); padding-bottom: clamp(24px, 6svh, 72px); }
.am-story-hero.am-shero[data-title="br"] .am-shero__in { align-items: flex-end; }
.am-story-hero.am-shero[data-title="tl"] .am-shero__lead { max-width: 30rem; }
.am-story-hero.am-shero[data-title="br"] .am-shero__in > * { width: min(100%, 52rem); }
.am-story-hero.am-shero .am-shero__meta { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(6px, 1.2svh, 14px); }
.am-story-hero.am-shero .am-shero__meta .am-eyebrow, .am-story-hero.am-shero .am-shero__meta .am-story-by { margin: 0; }
.am-story-hero.am-shero .am-story-by__av { width: clamp(30px, 4.6svh, 44px); height: clamp(30px, 4.6svh, 44px); }
/* het breedste woord (--ww, in em, uit de generator) past altijd op één regel: geen afbreking midden in een woord */
.am-story-hero.am-shero .am-shero__in { container-type: inline-size; }
html body main .am-story-hero.am-shero h1.am-shero__title { max-width: 15ch; margin: 0; font-size: min(clamp(2.1rem, min(6.6vw, 10.5svh), 8.25rem), calc(96cqi / (var(--ww, 8) + .08))); line-height: .95;
text-wrap: balance; overflow-wrap: normal; word-break: normal; -webkit-hyphens: manual; hyphens: manual; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.am-story-hero.am-shero .am-shero__lead { max-width: 36rem; margin: 0; color: #fff !important; font-size: clamp(1rem, min(.55rem + .9vw, 2.6svh), 1.3rem); line-height: 1.45; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
.am-story-hero.am-shero > .am-full__media { width: min(100%, var(--mw-m, var(--mw, 100%))) !important; height: min(100%, var(--mh-m, var(--mh, 100%))) !important; }
.am-story-hero.am-shero .am-media img, .am-story-hero.am-shero .am-media video { object-position: var(--pos-m, var(--pos, 50% 50%)) !important; }
.am-story-hero.am-shero[data-title="br"] { justify-content: flex-end; }
.am-story-hero.am-shero[data-title="br"] .am-shero__in { align-items: flex-start; }
.am-story-hero.am-shero[data-title="tl"]:not([data-title-m="tl"]) { justify-content: flex-end; }
.am-story-hero.am-shero[data-title-m="tl"] { justify-content: flex-start; }
.am-story-hero.am-shero::after, .am-story-hero.am-shero[data-title]::after { background: linear-gradient(0deg, rgba(14,14,16,.9) 0%, rgba(14,14,16,.7) 32%, rgba(14,14,16,.25) 58%, rgba(14,14,16,0) 78%); }
.am-story-hero.am-shero[data-title-m="tl"]::after { background: linear-gradient(180deg, rgba(14,14,16,.9) 0%, rgba(14,14,16,.7) 34%, rgba(14,14,16,.25) 60%, rgba(14,14,16,0) 80%); }
/* stack: op gsm staat het beeld bovenaan en de tekst eronder op donker, voor beelden waar elke plaats in het beeld het onderwerp bedekt */
.am-story-hero.am-shero[data-title-m="stack"] { justify-content: flex-end; }
.am-story-hero.am-shero[data-title-m="stack"] > .am-full__media { top: 0 !important; bottom: auto !important; margin: 0 auto !important; height: min(56svh, var(--mh-m, var(--mh, 100%))) !important;
-webkit-mask-image: linear-gradient(180deg, #000 72%, transparent) !important; mask-image: linear-gradient(180deg, #000 72%, transparent) !important; }
.am-story-hero.am-shero[data-title-m="stack"] > .am-shero__bg { display: none; }
.am-story-hero.am-shero[data-title-m="stack"]::after { background: none; }
.am-story-hero.am-shero[data-title-m="stack"] > .am-motion--hero { top: calc(76px + env(safe-area-inset-top, 0px) + 12px); bottom: auto; }
html body main .am-story-hero.am-shero h1.am-shero__title { font-size: min(clamp(2rem, min(10.4vw, 6.4svh), 3.6rem), calc(96cqi / (var(--ww, 8) + .08))); max-width: none; }
.am-story-hero.am-shero .am-shero__lead { font-size: clamp(.95rem, 2.3svh, 1.1rem); }
}
/* feedback 14 (heroes, punt 14): één pauzeknop sitebreed, één stijl. Donkere, licht doorschijnende knop met witte tekst en
een volle witte rand: wit op de knop haalt minstens 10:1 op elk beeld eronder, en rand of vlak minstens 3:1 tegen de omgeving (gemeten). */
/* feedback 15 (punt 14): klein rond icoon, donker doorschijnend vlak, wit icoon, geen zichtbare tekst; focusrand huispaars #921C63.
Icoon wit op rgba(14,14,16,.8): minstens 10:1 op elk beeld; het vlak zelf haalt minstens 3:1 tegen het beeld door de witte hairline. */
.am-motion { all: unset; box-sizing: border-box; position: relative; z-index: 6; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
background: rgba(14,14,16,.82); color: #fff; cursor: pointer;
box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .25s; }
.am-motion:hover { background: rgba(14,14,16,.94); }
.am-motion:focus-visible { outline: 3px solid #921C63; outline-offset: 3px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9), 0 0 0 7px #fff; }
.am-motion__i { flex: none; box-sizing: border-box; width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.am-motion.is-paused .am-motion__i { width: 0; height: 0; margin-left: 3px; border-left: 12px solid currentColor; border-right: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.am-motion__t { display: none; }
/* plaats: rechtsonder in de hero, binnen de kolom; op gsm rechtsboven onder de menubalk (nooit over de titel) */
.am-motion--hero { position: absolute; right: max(var(--gut-r), calc((100% - var(--max)) / 2)); bottom: clamp(16px, 3svh, 32px); }
.am-full--org > .am-motion--hero { bottom: calc(var(--am-org-logos, 112px) + 14px); }
.am-story-hero.am-shero[data-title="br"] > .am-motion--hero { right: auto; left: max(var(--gut), calc((100% - var(--max)) / 2)); }
.am-hero__frame > .am-motion--stage, .am-hero__stage .am-motion--stage { position: absolute; right: 12px; bottom: 12px; left: auto; }
.am-hero--biz > .am-motion--hero { right: var(--gut-r); bottom: 18px; }
.am-cband__bar .am-motion { align-self: flex-start; }
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
.am-full > .am-motion--hero, .am-story-hero.am-shero[data-title="br"] > .am-motion--hero { top: calc(76px + env(safe-area-inset-top, 0px) + 12px); bottom: auto; right: var(--gut-r); left: auto; }
.am-story-hero.am-shero[data-title-m="tl"] > .am-motion--hero { top: auto; bottom: 16px; }
}
/* feedback 14 (heroes, punt 16): hero's van home, /businesses/ en /organizations/ in één scherm bij het openen.
Home: de kop schaalt ook met de schermhoogte, zodat de twee deurkaarten op 1280x720 en 1366x768 boven de vouw staan. */
@media (min-width: 761px) {
.am-hero--home { --am-hero-max: min(var(--fs-hero), 8.5vw, 9rem, 11.5svh); }
}
@media (min-width: 761px) and (max-height: 800px) {
.am-hero--home { padding-top: calc(104px + env(safe-area-inset-top, 0px)); }
}
/* /businesses/: de pauzeknop hoort bij de telefoons; rechtsonder in hun vak, op gsm rechtsboven */
.am-phones > .am-motion--hero { position: absolute; right: 0; bottom: 0; top: auto; left: auto; z-index: 6; }
@media (max-width: 900px) { .am-phones > .am-motion--hero { top: 0; bottom: auto; } }
/* /organizations/ op een lage gsm: het beeld bovenaan iets lager, zodat kop, intro en knop samen in beeld staan */
@media (max-width: 760px) and (max-height: 760px) {
.am-full--org .am-full__media { aspect-ratio: auto !important; height: 28svh; }
}
/* home op een lage gsm (375x667): het beeldvak iets lager, zodat de twee deurkaarten boven de vouw staan */
@media (max-width: 520px) and (max-height: 760px) {
.am-hero--home .am-hero__stage { height: min(74vw, 36svh); }
}
/* feedback 14 (home): punt 6, Voor organisaties. Parallaxbeelden in een kregen geen overmaat, zodat de beweging
(yPercent -7 tot 7) een smalle lichtgrijze strook boven of onder de foto vrijliet. Zelfde overmaat als bij een los ![]()
. */
.am-media[data-parallax] > picture { position: absolute; inset: 0; width: auto; height: auto; overflow: hidden; }
.am-media[data-parallax] > picture img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; margin: 0; }
/* feedback 14 (org): /fr/organisations/ hero in één scherm (punt 16). De Franse titel is langer; op brede, hoge schermen
(1536x864, 1920x1080, 1366x1024) viel hij in vier regels en zakte de pauzeknop onder de vouw. Ook op de breedte
begrenzen, zodat de titel in twee regels staat en titel, intro, knop en pauzeknop samen in beeld blijven. */
@media (min-width: 761px) {
html:lang(fr) .am-full--org { --am-hero-max: min(var(--fs-hero), 13vh, 6.4vw); }
}
/* feedback 14 (stories): Winterhallen-hero (punt 30). Titel en introzin blijven links van de mensen en het EvenementO-spandoek.
Op schermen tussen 4:3 en 16:10 staan de mensen hoger in beeld; daar loopt de introzin smaller, zodat ze links van de groep blijft. */
@media (min-width: 900px) and (max-aspect-ratio: 16/10) {
.am-story-hero.am-shero[data-am-block="story-winterhallen.1"] .am-shero__lead { max-width: calc(32vw - max(var(--gut), (100vw - var(--max)) / 2)); }
}
/* feedback 14 (biz): ondernemerspagina (punten 2, 8, 10 en 16).
Kaart "Thuis in Overijse" met de echte gemeentegrenzen (Statbel, Lambert 72): liggend vak, minder witruimte erboven en eronder,
bronvermelding klein onder de kaart. */
.am-bmap-sec { padding-block: clamp(48px, 9svh, 104px); }
.am-bmap { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
.am-bmap__map { max-width: 760px; margin: 0; }
.am-bmap__bg path { fill: #ecebf0; stroke: #fff; stroke-width: 1.6; }
.am-bmap__bg path.is-bxl { fill: #e1e0e8; }
.am-bmap__town path { stroke-width: 1.6; }
.am-bmap__town:focus-visible path { stroke-width: 2.5; }
.am-bmap__gl { font: 600 12px/1 var(--body); fill: #85848f; text-anchor: middle; pointer-events: none; }
.am-bmap__bl { font: 700 15px/1 var(--body); fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 4px; }
.am-bmap__bxl circle:first-child { opacity: .6; }
/* labels: is-d op desktop, is-m (groter) op gsm; elk staat volledig binnen zijn gemeentegrens (biz_map_make.py) */
.am-bmap__svg .is-m { display: none; }
.am-bmap__map figcaption { margin-top: 8px; font-size: .72rem; line-height: 1.4; color: var(--mute); text-align: right; }
.am-bmap__map figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) { .am-bmap { grid-template-columns: 1fr; } .am-bmap__map figcaption { text-align: left; } }
@media (max-width: 640px) {
.am-bmap__svg .is-d { display: none; }
.am-bmap__svg .is-m { display: inline; }
.am-bmap__lab.is-home { stroke-width: 5px; }
/* de kaart over de volle breedte: de namen blijven leesbaar */
.am-bmap__map { margin-inline: calc(-1 * var(--gut)) calc(-1 * var(--gut-r)); max-width: none; width: auto; }
.am-bmap__map figcaption { padding-inline: var(--gut) var(--gut-r); }
}
/* punt 8: minder lege ruimte boven de herotitel van /businesses/ op brede schermen. De hero vult niet langer kunstmatig
het hele scherm (dat centreerde de inhoud en zette de titel laag); de telefoons bepalen de hoogte. */
@media (min-width: 901px) {
.am-hero--biz { min-height: 0; padding-top: calc(76px + env(safe-area-inset-top, 0px) + clamp(16px, 2.5svh, 32px)); }
.am-hero--biz .am-hero__copy { align-self: start; padding-top: clamp(0px, 8svh - 24px, 72px); }
}
/* punt 10: Instagram-wand met één post per klant (--n tegels, gelijk). Elk beeld vult de tegel (cover), geen bijschrift
en geen hoverkleur; de accountnaam breekt desnoods na _ of . en wordt nooit afgekapt. Op gsm een rij om te swipen. */
.am-feed2--n { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); max-width: min(100%, calc(var(--n, 5) * 230px)); }
.am-feed2--n .am-feed2__img, .am-feed2--n video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.am-feed2--n .am-feed2__cap { padding: 32px 8px 9px; font-size: clamp(.7rem, .62rem + .25vw, .8rem); line-height: 1.2; }
.am-feed2--n .am-feed2__t a:hover .am-feed2__cap, .am-feed2--n .am-feed2__t a:focus-visible .am-feed2__cap { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.78)); }
.am-feed2--n .am-feed2__who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.am-feed2--n .am-feed2__who > span { flex: none; }
.am-feed2--n .am-feed2__who b { min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.am-feed2--n .am-feed2__t a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 760px) {
.am-feed2--n { display: flex; gap: 10px; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gut)) calc(-1 * var(--gut-r)); padding-inline: var(--gut) var(--gut-r); scroll-padding-inline: var(--gut); scrollbar-width: none; }
.am-feed2--n::-webkit-scrollbar { display: none; }
.am-feed2--n > .am-feed2__t { flex: 0 0 clamp(150px, 42vw, 220px); scroll-snap-align: start; }
}
/* punt 16: het pakkettenblok (titel, drie kaarten met prijs, knop) past in één scherm.
Desktop: rijen, letters en marges schalen mee met de schermhoogte (svh); de prijs staat op één regel met "per maand".
Gsm en tablets (tot 1024px): de kaarten vormen een swipe-rij met scroll-snap en bolletjes die de stand tonen. */
.am-pk__dots, .am-pk__vat { display: none; }
@media (min-width: 1025px) {
.am-pk-sec .am-head + .am-pk { margin-top: clamp(12px, 3.2svh, 44px); }
.am-pk-sec .am-pk > .am-card { padding-top: clamp(10px, 2.4svh, 28px); padding-bottom: clamp(10px, 2.4svh, 32px); }
.am-pk-sec .am-pk > .am-card > .am-card__t { font-size: clamp(1.1rem, min(1.6vw, 3.2svh), 1.55rem); padding-bottom: clamp(4px, 1.2svh, 12px); }
.am-pk-sec .am-pk > .am-card > .am-pk__for { font-size: clamp(.8rem, 2svh, .95rem); line-height: 1.35; padding-bottom: clamp(4px, 1.2svh, 12px); }
.am-pk-sec .am-pk .am-card li.am-pk__row { padding-block: clamp(3px, .7svh, 7px); }
.am-pk-sec .am-pk__k { font-size: clamp(.6rem, 1.4svh, .7rem); }
.am-pk-sec .am-pk__v { font-size: clamp(.8rem, 2.05svh, .95rem); line-height: 1.32; }
.am-pk-sec .am-pk__opt { margin-top: clamp(4px, 1svh, 10px); padding-top: clamp(4px, 1svh, 10px); font-size: clamp(.74rem, 1.85svh, .9rem); line-height: 1.32; }
.am-pk-sec .am-pk .am-card__p { padding-top: clamp(8px, 1.8svh, 18px); }
.am-pk-sec .am-pk .am-card__p b { display: inline; margin-right: .18em; font-size: clamp(2rem, min(4.4vw, 6.2svh), 4.6rem); }
.am-pk-sec .am-pk .am-card--prem .am-card__p b { font-size: clamp(1.8rem, min(3.4vw, 5.6svh), 3.2rem); }
.am-pk-sec .am-head h2 { font-size: clamp(2rem, min(4.4vw, 6.2svh), 4.6rem); }
/* label en waarde naast elkaar: een regel minder per rij */
.am-pk-sec .am-pk .am-card li.am-pk__row { grid-template-columns: 6.3rem minmax(0, 1fr); gap: 8px; align-items: baseline; }
.am-pk-sec .am-pk > .am-card--prem { padding-left: clamp(14px, 1.4vw, 24px); padding-right: clamp(14px, 1.4vw, 24px); }
/* de knop en "Advertentiebudget betaal je apart." op één lijn onder de kaarten */
.am-pk-sec .am-pk__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 28px; margin-top: clamp(12px, 2.6svh, 36px); }
.am-pk-sec .am-pk__foot > .am-pk__scope, .am-pk-sec .am-pk__foot > .am-pk__cta { margin: 0; }
.am-pk-sec .am-pk__foot > .am-pk__cta { order: -1; }
}
@media (max-width: 1024px) {
.am-pk-sec .am-head { gap: 6px 24px; }
.am-pk-sec .am-head h2 { font-size: clamp(1.7rem, min(8vw, 5.4svh), 2.6rem); }
.am-pk-sec .am-head .am-lead { font-size: .95rem; }
.am-pk-sec .am-head + .am-pk { margin-top: clamp(10px, 2svh, 24px); }
.am-pk { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
margin-inline: calc(-1 * var(--gut)) calc(-1 * var(--gut-r)); padding: 4px var(--gut-r) 8px var(--gut); scroll-padding-inline: var(--gut) var(--gut-r); align-items: stretch; }
.am-pk::-webkit-scrollbar { display: none; }
.am-pk:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.am-pk > .am-card { flex: 0 0 min(88vw, 380px); scroll-snap-align: start; height: auto; margin: 0 !important; gap: 0;
padding: clamp(12px, 2svh, 18px) 16px clamp(12px, 2svh, 18px) !important; }
.am-pk > .am-card > .am-card__t { font-size: clamp(1.1rem, 3svh, 1.35rem); padding-bottom: 6px; }
.am-pk > .am-card > .am-pk__for { font-size: clamp(.78rem, 1.9svh, .9rem); line-height: 1.35; padding-bottom: 6px; }
.am-pk > .am-card > .am-card__badge { margin-bottom: 6px; }
.am-pk > .am-card > ul { margin: 0; }
.am-pk .am-card li.am-pk__row { grid-template-columns: 6.6em minmax(0, 1fr); gap: 8px; align-items: baseline; padding-block: clamp(3px, .8svh, 6px); }
.am-pk__k { font-size: .62rem; }
.am-pk__v { font-size: clamp(.78rem, 2svh, .9rem); line-height: 1.3; }
.am-pk__opt { margin-top: 6px; padding-top: 6px; font-size: clamp(.72rem, 1.8svh, .84rem); line-height: 1.3; }
.am-pk .am-card__p { margin-top: auto; padding-top: clamp(8px, 1.6svh, 14px); min-height: 0 !important; }
.am-pk .am-card__p b { display: inline; margin-right: .18em; font-size: clamp(1.8rem, 5svh, 2.6rem); }
.am-pk .am-card--prem .am-card__p b { font-size: clamp(1.6rem, 4.4svh, 2.2rem); }
.am-pk__dots { display: flex; justify-content: center; gap: 4px; margin-top: 0; }
.am-pk__dots button { all: unset; box-sizing: border-box; width: 32px; height: 28px; display: grid; place-items: center; cursor: pointer; }
.am-pk__dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(17,17,20,.25); transition: background-color .2s, width .2s; }
.am-pk__dots button[aria-current="true"]::before { width: 22px; border-radius: 4px; background: var(--ink); }
.am-pk__dots button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* "Prijzen excl. btw." staat op gsm bij de knop, zo krijgt de titel geen extra regel */
.am-pk-sec .am-head .am-lead { display: none; }
.am-pk-sec .am-pk__foot { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.am-pk-sec .am-pk__foot > .am-pk__cta { order: -1; margin: 2px 0 6px; }
.am-pk-sec .am-pk__vat, .am-pk-sec .am-pk__scope { display: block; margin: 0; font-size: .8rem; line-height: 1.35; text-align: center; opacity: .78; }
/* badge rechtsboven in de kaart, naast de titel */
.am-pk > .am-card--pop > .am-card__badge { position: absolute; top: clamp(12px, 2svh, 18px); right: 16px; margin: 0; }
.am-pk .am-card li.am-pk__row { grid-template-columns: 5.9rem minmax(0, 1fr); }
.am-pk__k { letter-spacing: .04em; overflow-wrap: normal; }
}
/* feedback 14 (films): eindfilm-speler. Poster met knop in de pagina; schermvullende dialog met native video bij de klik. */
.am-film--self .am-film__box picture { display: contents; }
.am-film--self .am-film__box picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.am-film--self .am-film__play { transition: background-color .2s; }
.am-film--self .am-film__play:hover .am-film__icon { transform: scale(1.06); }
.am-film--self .am-film__icon { transition: transform .2s; }
.am-player { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: #fff; overflow: hidden; }
.am-player:not([open]) { display: none; }
.am-player::backdrop { background: #000; }
.am-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.am-player video:focus-visible { outline: 2px solid #921C63; outline-offset: -2px; }
.am-player video::cue { font-size: 1.15em; }
.am-player__close { position: absolute; top: 8px; right: 8px; z-index: 2; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); cursor: pointer; display: grid; place-items: center; }
.am-player__close span { position: relative; width: 20px; height: 20px; }
.am-player__close span::before, .am-player__close span::after { content: ""; position: absolute; left: 9px; top: -1px; width: 2px; height: 22px; background: #fff; transform: rotate(45deg); }
.am-player__close span::after { transform: rotate(-45deg); }
.am-player__close:hover { background: rgba(0, 0, 0, .8); }
.am-player__close:focus-visible, .am-player__pick:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #921C63; }
.am-player__list { position: absolute; top: 8px; left: 8px; right: 64px; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; }
.am-player__pick { pointer-events: auto; min-height: 44px; padding: 0 16px; border: 0; background: rgba(0, 0, 0, .6); color: #fff; font: 600 .95rem/1 var(--body, inherit); cursor: pointer; }
.am-player__pick[aria-pressed="true"] { background: #921C63; }
html.am-player-on { overflow: hidden; }
@media (max-width: 640px) { .am-player__pick { font-size: .85rem; padding: 0 12px; } }
/* feedback 15 (r15text): label boven de stedenband op Over ons (punt 13) en de taalvlag klaar voor later (punt 12) */
.am-towns__label { margin-bottom: clamp(10px, 1.4vw, 16px); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
/* Taalvlag: komt ze ooit terug, dan achter de titel, kleiner en met minstens .4em ruimte ervoor */
.am-en, .am-nav a .am-en { margin-left: .45em; font-size: .55em; vertical-align: .3em; }
/* feedback 14 (cases): verhalen in hoofdstukken (Thruvo, QGrid, Winterhallen), tekst naast echte beelden, om en om */
.am-chaps__list { display: grid; gap: clamp(56px, 8vw, 128px); }
.am-chap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.am-chap--flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.am-chap--flip .am-chap__txt { order: 2; }
.am-chap__txt { display: grid; gap: 14px; align-content: center; max-width: 34rem; }
.am-chap__txt p { margin: 0; color: var(--ink); font-size: var(--fs-body, 1.0625rem); line-height: 1.55; }
.am-chap__n { font-family: var(--display); font-weight: 900; font-size: .875rem; letter-spacing: .08em; color: var(--mute); font-variant-numeric: tabular-nums; }
.am-chap__h { margin: 0; }
.am-chap__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.am-chap__media > .am-chap__tile { min-width: 0; aspect-ratio: 1 / 1; }
.am-chap__media--1 { grid-template-columns: minmax(0, 1fr); }
.am-chap__media--1 > .am-chap__tile { aspect-ratio: 16 / 10; }
.am-chap__media--3 > .am-chap__tile:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.am-chap__media--tall > .am-chap__tile { aspect-ratio: 4 / 5; }
.am-chap__media--1.am-chap__media--tall { justify-items: center; }
.am-chap__media--1.am-chap__media--tall > .am-chap__tile { width: min(100%, 440px); aspect-ratio: 9 / 16; }
.am-chap__media--web > .am-bwtile { aspect-ratio: 4 / 3; }
.am-chap__media--2.am-chap__media--web { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: stretch; }
.am-chap__media--2.am-chap__media--web > .am-chap__tile:not(.am-bwtile) { aspect-ratio: 4 / 5; }
.am-chap__media--2.am-chap__media--web > .am-bwtile { aspect-ratio: auto; min-height: 100%; }
@media (max-width: 760px) {
.am-chap, .am-chap--flip { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.am-chap--flip .am-chap__txt { order: 0; }
.am-chap__media { gap: 8px; }
.am-chap__media--2.am-chap__media--web { grid-template-columns: minmax(0, 1fr); }
.am-chap__media--2.am-chap__media--web > .am-chap__tile:not(.am-bwtile) { width: 64%; justify-self: center; }
.am-chap__media--2.am-chap__media--web > .am-bwtile { aspect-ratio: 10 / 9; min-height: 0; }
.am-chap__media--web > .am-bwtile { aspect-ratio: 10 / 9; }
.am-chap__media--1.am-chap__media--tall > .am-chap__tile { width: min(78%, 360px); }
}
.am-chap__media > .am-chap__tile--wide { grid-column: 1 / -1; }
/* feedback 15 (usspell): /organizations/ hero op 375x667. In NL en FR zijn titel en intro langer en zakte de knop onder de vouw.
Op een lage gsm (tot 700px hoog) wordt het beeldvak boven de titel lager, zodat titel, intro, knop en pauzeknop samen in beeld staan. */
@media (max-width: 760px) and (max-height: 700px) {
.am-full--org .am-full__media { height: 18svh; }
.am-full--org .am-full__in { gap: 16px; }
}
/* feedback 15 (p1920): punt 19, het kleurwoord in de hero ("handled", "geregeld", "gérés", "clearly", ...) viel weg in Safari (iPad, iPhone, Mac).
De JS zet het laatste woord met het blokje in een inline-block (.am-hero-end). WebKit tekent background-clip: text niet door
in een inline-block kind, dus bleef enkel het blokje over. Het kind krijgt daarom zelf het verloop; positie en grootte erven
van het woord, zodat de kleurverschuiving gelijk loopt. Reduced motion: het verloop staat stil (de algemene regel hierboven). */
.am-rbw:not(.am-rbw--split) > .am-hero-end {
background-image: inherit; background-size: inherit; background-position: inherit; background-repeat: inherit;
-webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: reduce) { .am-rbw, .am-rbw > .am-hero-end { animation: none !important; background-position: 0 0; } }
/* feedback 15 (p1920): punt 20, de domeinnaam in een hoofdstuktekst is een gewone tekstlink in de lopende zin (geen knop, geen eigen regelhoogte) */
.am-chap__txt a.am-link--inline { display: inline; min-height: 0; padding-bottom: 1px; }
/* Ronde 15b: pakketten, contactuitlijning, formulier en vaste contactbalk. */
@media (max-width: 1024px) {
.am-pk > .am-card:not(.am-card--prem) { background: #fff; }
}
/* Eén linkerlijn en een ritme van 44px voor adres, contact en kanalen. */
.am-footer__cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
.am-contact-details, .am-contact__channels { min-width: 0; font-size: .95rem; }
.am-contact-details__lines { display: flex; flex-direction: column; margin: 0; font-style: normal; }
.am-contact-details__lines > *, .am-footer__cols li > a, .am-contact__channels .am-channels a { display: flex; align-items: center; min-height: 44px; margin: 0; padding: 10px 0; line-height: 24px; text-decoration: none; }
.am-contact-details__lines a:hover { text-decoration: underline; text-underline-offset: 4px; }
.am-contact__aside .am-footer__label { color: var(--mute); }
.am-footer__cols .am-footer__label, .am-contact__aside .am-footer__label { margin: 0 0 10px; line-height: 1.5; }
.am-footer__cols .am-channels, .am-footer__cols .am-footer__label + ul, .am-contact__aside .am-channels { margin: 0; gap: 0; }
@media (max-width: 760px) { .am-footer__cols { grid-template-columns: minmax(0, 1fr); } }
.am-field.is-bad textarea { border-color: #c4122f; }
.am-theme-dark .am-bg-mist .am-field input, .am-theme-dark .am-bg-mist .am-field textarea { color: var(--ink); border-color: var(--ink); }
/* De verborgen balk is ook voor toetsenbord en schermlezer weg. */
.am-stickycta[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
@media (max-width: 1024px) {
.am-stickycta { opacity: 0; transition: opacity .2s ease, transform .3s var(--ease-out); }
.am-stickycta.is-on:not(.is-away) { opacity: 1; }
.am-stickycta.is-duplicate { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .am-stickycta { transition: none !important; } }
/* Pakketten op lage desktopschermen: titel, kaarten en knop houden samen ruimte onder de vouw. */
@media (min-width: 1025px) and (max-height: 850px) {
.am-pk-sec .am-head + .am-pk { margin-top: clamp(12px, 2.4svh, 24px); }
.am-pk-sec .am-pk__foot { margin-top: clamp(12px, 1.8svh, 24px); }
}
/* Feedback 15c (codex-15c-vimeo): Vimeo-facade met de bestaande filmknop en speleropmaak. */
.am-film--vimeo .am-film__box > img { object-fit: contain; }
.am-film--vimeo .am-film__play:hover .am-film__icon { transform: scale(1.06); }
.am-player--vimeo[open] { display: flex; flex-direction: column; }
.am-vimeo__bar { display: flex; align-items: flex-start; gap: 12px; flex: none; max-height: 40vh; max-height: 40dvh; padding: 8px; overflow-y: auto; }
.am-player--vimeo .am-player__list { position: static; flex: 1; min-width: 0; pointer-events: auto; }
.am-vimeo__title { flex: 1; min-width: 0; margin: 0; padding: 12px 8px; color: #fff; overflow-wrap: anywhere; }
.am-player--vimeo .am-player__pick { max-width: 100%; line-height: 1.3; padding-block: 10px; overflow-wrap: anywhere; }
.am-player--vimeo .am-player__close { position: static; flex: none; margin-left: auto; }
.am-vimeo__frame { display: block; flex: 1; width: 100%; min-height: 0; border: 0; background: #000; }
/* Feedback 15 (codex-corr): op lage gsm-schermen passen label en pijlen van Recent werk naast elkaar.
Ook de langere Franse tekst houdt zo ruimte vrij onder de menubalk wanneer die bij omhoog scrollen terugkomt. */
@media (max-width: 760px) and (max-height: 700px) {
.am-cband-sec .am-head { align-items: center; gap: 12px; }
.am-cband-sec .am-cband { margin-top: 8px; }
}
/* Action/Cut: de vroegere am-vctl, boven de beeldlagen en 16 px binnen het bewegende beeld.
Wit op dit donkere vlak haalt ook boven een wit beeld meer dan 10:1 contrast. */
.am-motion.am-vctl { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
width: auto; height: auto; min-width: 44px; min-height: 44px; padding: 8px 12px; border-radius: 0;
background: rgba(14,14,16,.82); color: #fff; font: 700 .72rem/1 var(--body); letter-spacing: .14em;
text-transform: uppercase; z-index: 20; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.am-motion.am-vctl:hover { background: rgba(14,14,16,.94); }
.am-motion.am-vctl:focus-visible { outline: 3px solid #921C63; outline-color: #921C63 !important; outline-offset: 3px; }
.am-motion.am-vctl .am-motion__i { width: 9px; height: 9px; margin: 0; border: 0; background: currentColor; }
.am-motion.am-vctl.is-paused .am-motion__i { width: 0; height: 0; background: transparent;
border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.am-motion.am-vctl .am-motion__t { display: inline; }
.am-motion.am-vctl > * { pointer-events: none; }
.am-motion.am-vctl[data-motion-overlay] { position: absolute; inset: auto !important;
left: var(--am-motion-x, 16px) !important; top: var(--am-motion-y, 16px) !important; }
/* De onderste verhaaltekst blijft boven de videoknop wanneer ze dezelfde kolom delen. */
.am-story-hero.am-shero .am-shero__in { padding-bottom: max(clamp(24px, 6svh, 72px), var(--am-motion-clearance, 0px)); }
/* Feedback 15 (codex-fit): titel, intro en bediening samen boven de vouw.
Home op 768x1024: het beeldvak van 520px duwde de langere Franse keuzekaarten 22px onder de vouw.
Organisaties op 360x780: de Franse knop viel 3px onder de vouw; de compacte tussenruimte geldt nu tot 800px hoog. */
@media (min-width: 521px) and (max-width: 900px) {
.am-hero--home .am-hero__stage { height: min(74vw, 44svh); }
}
@media (max-width: 760px) and (max-height: 800px) {
.am-full--org .am-full__in { gap: 16px; }
}
/* Ronde 16: bediening en lay-out (codex-r16-ui1). */
/* Punt 1: REC-pil volgens schets A, met de tijd van de spelende video. */
.am-motion.am-vctl {
min-height: 44px; padding: 10px 16px; gap: 10px; border: 0; border-radius: 999px;
background: rgba(14,14,16,.55); font-size: .8rem; letter-spacing: .08em;
box-shadow: none;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.am-motion.am-vctl:hover { background: rgba(14,14,16,.75); }
.am-motion.am-vctl .am-motion__i {
width: 10px; height: 10px; border-radius: 50%; background: #ee3581;
box-shadow: 0 0 0 5px rgba(238,53,129,.2), var(--am-shadow);
}
.am-motion.am-vctl.is-paused .am-motion__i { border-radius: 0; box-shadow: none; }
.am-motion__time { font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: .03em; color: rgba(255,255,255,.8); }
.am-motion.is-paused .am-motion__time { display: none; }
@media (max-width: 760px) { .am-motion .am-motion__time { display: none; } }
/* Punt 2: het voorbeeldlabel leest als tekst, zonder kader. */
.am-wk__ex { border: 0; padding: 0; }
/* Punt 4: benoemde buren horen bij de regio; de verre rand vervaagt in de SVG. */
.am-bmap__bg path { fill: #f3f2f5; stroke: #dcdbe1; stroke-width: 1.2; }
.am-bmap__bg path.is-neighbor { fill: #fbeef5; stroke: #e6dce3; }
.am-bmap__gl { fill: #59565e; }
@media (min-width: 901px) and (max-width: 1180px) {
.am-bmap__lab.is-d { font-size: 20px !important; }
.am-bmap__lab.is-home.is-d { font-size: 26px !important; }
.am-bmap__gl.is-d { font-size: 16px !important; }
}
/* Punt 6: ook de actieve logotegel heeft vier volledige hoeken. */
.am-cband__item[aria-pressed="true"]::before { clip-path: none; }
/* Punt 7: lijstlijnen houden ook onder overhangende letters ruimte vrij. */
.am-head + :is(.am-xrow, .am-list), .am-head + div > .am-list:first-child { margin-top: max(24px, 1em); }
.am-head:has(+ :is(.am-xrow, .am-list)) :is(h2, h3) { padding-bottom: .12em; }
/* Punt 10: de mobiele hero sluit aan op inhoud en logo's, zonder opgestapelde zwarte tussenruimte. */
@media (max-width: 760px) {
.am-full--org { justify-content: flex-start; }
.am-full--org .am-full__media { height: min(24svh, 208px); aspect-ratio: auto; }
.am-full--org .am-full__in { gap: 16px; padding-bottom: 24px; }
.am-full--org .am-full__logos { margin-top: 0; }
}
@media (max-width: 760px) and (max-height: 700px) {
.am-full--org .am-full__media { height: 18svh; }
}
/* Punt 14: een eigen donker vlak groepeert de vaste acties op elke achtergrond. */
@media (max-width: 1024px) {
.am-stickycta { padding: 6px; background: rgba(14,14,16,.94); border: 1px solid rgba(255,255,255,.35); }
.am-stickycta .am-stickycta__main, .am-stickycta .am-stickycta__li, .am-stickycta .am-stickycta__wa { background: #fff !important; color: #0e0e10; }
}
/* Punt 11: dezelfde taalvolgorde en paginabestemming als bovenaan. */
.am-footer__base .am-footer__lang { display: inline-flex; vertical-align: middle; gap: 6px; font: inherit; letter-spacing: .06em; white-space: nowrap; }
.am-footer__lang a, .am-footer__lang [aria-current] { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 3px; }
.am-footer__lang a { color: rgba(255,255,255,.8); }
.am-footer__lang [aria-current] { color: #fff; font-weight: 800; }
.am-footer__lang a:hover { color: #fff; }
/* Ronde 16, UI2: betrouwbare posters bij laden, energiebesparing en tegelwissels. */
.am-cband__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.am-cband video[data-r16-reel] { opacity: 0; }
.am-cband video[data-r16-reel].is-playing { opacity: 1; }
.am-phone__screen:has(video[data-r16-reel]) .am-media { background-size: contain; background-position: center; background-repeat: no-repeat; }
/* Ronde 16, punt 9: de foto blijft onder de stille kaartloop staan. */
.am-card-loop { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.am-card-loop > :is(picture, img), .am-card-loop > picture > img, .am-card-loop > video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.am-card-loop > video { position: absolute; inset: 0; opacity: 0; }
.am-card-loop > video.is-playing { opacity: 1; }
@media (max-width: 760px) { .am-card-loop > :is(img, video), .am-card-loop > picture > img { object-position: var(--pos-m, var(--pos, 50% 50%)); } }
/* Ronde 16, punt 27: één zachte slagschaduw en ruimte voor de volledige uitloop. */
:root { --am-shadow: 0 8px 18px rgba(14,14,16,.16); }
.am-header.is-solid { box-shadow: var(--am-shadow); }
.am-hero--home, .am-hero--biz, .am-hero__stage, .am-phones, .am-band { overflow: visible; }
.am-hero__reel, .am-hero__frame { clip-path: none; box-shadow: none; filter: drop-shadow(var(--am-shadow)); }
.am-hero__reel > .am-media { clip-path: polygon(0 0,100% 0,100% 95%,0 100%); }
.am-hero__frame > .am-media { clip-path: polygon(0 0,100% 0,100% 91%,0 100%); }
.am-cband__reel video { height: calc(100cqh - 64px); width: calc((100cqh - 64px) * 9 / 16); }
.am-cband__graphic { max-width: calc(100% - 64px); max-height: calc(100% - 64px); }
.am-cband__poster { height: calc(100cqh - 64px); width: calc((100cqh - 64px) * 9 / 16); inset: 32px auto auto 50%; transform: translateX(-50%); }
/* De scrollers houden hun bestaande snapplaatsen, met vrije ruimte onder de kaarten. */
.am-hscroll__track { padding-bottom: 32px; }
.am-wk__ph { overflow: visible; }
.am-postbox, .am-bw { overflow: visible; }
@media (max-width: 760px) {
.am-pk { padding-bottom: 32px; margin-bottom: -32px; }
}
/* Ronde 16, punt 28: alle klanten op één rustig canvas, in hun eigen drager. */
.am-cband .am-cband__media { aspect-ratio: 4 / 3; background: #f3f3f5; }
.am-cband__canvas { position: absolute; inset: 0; display: grid; place-items: center; container-type: size; background: #f3f3f5; }
.am-cband__device { position: relative; height: calc(100cqh - 64px); aspect-ratio: 9 / 16; padding: 6px; border-radius: 22px; background: #161619; box-shadow: var(--am-shadow); }
.am-cband__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 16px; background: #161619; }
.am-cband__screen > :is(video, .am-cband__poster) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; margin: 0; transform: none; object-fit: contain; background: #161619; box-shadow: none; }
.am-cband__canvas .am-bw { padding: 32px; }
.am-cband__canvas .am-bw__phone { right: 32px; bottom: 32px; width: 20%; }
.am-cband__canvas > :is(.am-cband__paper, .am-cband__photo) { display: block; width: auto; height: auto; max-width: calc(100% - 64px); max-height: calc(100cqh - 64px); object-fit: contain; box-shadow: var(--am-shadow); }
.am-cband__paper { border: 8px solid #fff; background: #fff; }
.am-cband__photo { border-radius: 3px; }
/* Matermaco: de smalle tablettegel houdt ook rechts en onder de gsm ruimte voor de schaduw. */
[data-am-block^="story-matermaco."] .am-bw__phone { right: max(4%, 24px); bottom: max(10%, 32px); }
/* Ronde 17, UI: uitlijning en bediening van gedeelde componenten. */
/* Punt 5: titel, dag, telefoon, onderschrift en tijdlijn delen dezelfde middenas. */
.am-wk { padding-top: clamp(40px, 6svh, 64px); scroll-margin-top: 32px; }
.am-wk__head { justify-content: center; text-align: center; }
/* Punt 6: de footer gebruikt één tekstbasislijn en dezelfde scheidingstekens. */
.am-footer__base .am-footer__lang { display: inline; color: inherit; vertical-align: baseline; font: inherit; letter-spacing: inherit; white-space: nowrap; }
.am-footer__base .am-footer__lang :is(a, [aria-current]) { display: inline; min-width: 0; min-height: 0; margin: 0; padding: 0; font: inherit; line-height: inherit; color: inherit; vertical-align: baseline; }
.am-footer__base .am-footer__lang [aria-current] { font-weight: 800; }
.am-footer__base .am-footer__lang > [aria-hidden] { display: inline; height: auto; margin-inline: .35em; font: inherit; line-height: inherit; opacity: 1; }
/* Punt 7: voortgang en pijlen staan vóór het werkvenster op één lijn. */
.am-cband-sec { padding-top: clamp(40px, 6svh, 64px); scroll-margin-top: 32px; }
.am-cband__toolbar { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.am-cband__toolbar .am-cband__timer { display: block; flex: 1; margin: 0; }
.am-cband__nav { display: flex; flex: none; align-items: center; gap: 10px; margin-left: auto; }
@media (max-height: 700px) { .am-cband__toolbar { margin-bottom: 16px; } }
/* Punt 8: titels breken uitsluitend tussen woorden; focus markeert de actieve tegel. */
html body main :is(h1, h2, h3, h4, .am-hero__title, .am-tile__t, .am-frecent__t, .am-card__t, .am-changed__t, .am-cband__name) { overflow-wrap: normal; word-break: normal; -webkit-hyphens: none; hyphens: none; }
html body main :is(h1, h2, h3, h4, .am-changed__t) .am-split-word { white-space: nowrap !important; overflow-wrap: normal; word-break: normal; hyphens: none; }
.am-cband__name { font-size: clamp(2rem, 4.2vw, 4.2rem); }
.am-cband__item:focus-visible { outline: 2px dotted var(--ink); outline-offset: -6px; }
.am-cband__item:focus-visible:not([aria-pressed="true"]) { outline: none; }
/* Punt 12: label en getuigenis beginnen gelijk; de bronlink hoort bij de titel. */
.am-changed .am-postpair { align-items: start; }
.am-changed__main { gap: 16px; }
.am-changed__main > .am-row { margin: 0; }
.am-changed .am-postbox .am-post, .am-changed .am-postbox:hover .am-post { transform: none; }
.am-changed { padding-bottom: 0; }
.am-changed + .am-sec { padding-top: var(--sec); }
/* Ronde 16, punt 8: de tweede prijsregel hoort bij het volledige Website-aanbod. */
.am-xrow__website-more { display: block; margin-top: .5em; }
/* Ronde 16, punt 24: zonder JavaScript blijft de volledige verhalenlijst zichtbaar. */
html:not(.js) .am-tiles-filter, html.am-nojs .am-tiles-filter { display: none; }
/* Beslissing 16b, punt 1: het volledige oorspronkelijke logo, inclusief onderregel. */
.am-logo { overflow: visible; }
.am-logo > img { display: block; width: 100%; height: auto; object-fit: contain; }
.am-logo > .am-logo__white { display: none; }
.am-logo--light > .am-logo__black { display: none; }
.am-logo--light > .am-logo__white { display: block; }
:is(.am-theme-dark .am-header, .am-theme-hero-dark .am-header:not(.is-solid), .am-menu-open .am-header) .am-logo__black { display: none; }
:is(.am-theme-dark .am-header, .am-theme-hero-dark .am-header:not(.is-solid), .am-menu-open .am-header) .am-logo__white { display: block; }
.am-header__logo, .am-footer__logo { overflow: visible; }
/* Ronde 17, punt 16: elke film heeft een eigen still en titel; één film houdt het grote beeld. */
.am-film:not(.am-film--many) > .am-wrap { max-width: min(calc(var(--max) + var(--gut) + var(--gut-r)), calc((100svh - 210px) * 16 / 9 + var(--gut) + var(--gut-r))); }
.am-film__gallery { min-width: 0; }
.am-film--many .am-film__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
.am-film--many .am-film__gallery:has(> .am-film__card:nth-of-type(2):last-of-type) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.am-film__card { display: block; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.am-film__card .am-film__box { display: block; }
.am-film__card .am-film__box img { opacity: 1; }
.am-film__card .am-film__play { background: rgba(0, 0, 0, .12); transition: background-color .2s; }
.am-film__card:hover .am-film__play { background: rgba(0, 0, 0, .25); }
.am-film__card:focus-visible { outline: 3px solid var(--magenta); outline-offset: 6px; }
.am-film__title { display: block; margin-top: 12px; font: 700 clamp(1.05rem, 1.5vw, 1.35rem)/1.3 var(--body); overflow-wrap: normal; word-break: normal; hyphens: none; }
@media (max-width: 760px) {
.am-film--many .am-film__gallery, .am-film--many .am-film__gallery:has(> .am-film__card:nth-of-type(2):last-of-type) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
/* Ronde 17, punten 17 en 18: lokale hero houdt ruimte voor de knop op lage laptopschermen. */
@media (min-width: 901px) {
.am-lp-hero { padding-top: min(calc(clamp(120px, 14vw, 190px) + env(safe-area-inset-top, 0px)), 16svh); }
}
/* Mobile menu: while the dark overlay is still closing (am-menu-closing), keep header colours, logo variant and transparent
header tied to the overlay, so the logo never turns dark on the dark overlay. */
.am-menu-closing .am-header { color: #fff; }
.am-menu-closing .am-header .am-header__logo { color: #fff; }
.am-menu-closing .am-header.is-solid { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.am-menu-closing .am-header .am-logo__black { display: none; }
.am-menu-closing .am-header .am-logo__white { display: block; }
/* Mobile menu: the open-stagger (nth-child transition-delay) must not apply while closing, otherwise the first item
("Start") leaves before the rest on a link tap. All items now close with the same timing. */
.am-menu:not(.is-open) .am-menu__nav ul a { transition-delay: 0s; }
/* ===== Descenders: staartletters (g j p q y) niet afsnijden =====
Oorzaak: koppen hebben line-height .9 en het display-font steekt ~.2em onder de basislijn uit. De regelmaskers
(overflow:hidden) en de gradiëntvulling (background-clip:text) reiken enkel tot de regelbox. Elke regel erft extra
ruimte onderaan, met een gelijke negatieve marge, zodat de regelafstand visueel gelijk blijft. De reveal-animatie
(klassen, yPercent, timing) is niet aangeraakt. Gemeten door fit-check.js, scène "descenders". */
.am-split-line { padding-bottom: .25em; margin-bottom: -.25em; }
.am-split-word.am-rbw { padding-bottom: .25em; margin-bottom: -.25em; }
.am-hero-end { padding-bottom: .25em; margin-bottom: -.25em; }
.am-fig__big, .am-kpi3__n { padding-bottom: .22em; margin-bottom: -.22em; }
.am-towns { padding-bottom: .2em; margin-bottom: -.2em; }
/* ---------- Tom's personal page (lab only): header name, hero, trust row, three steps ---------- */
.am-header--tom .am-header__in { justify-content: flex-start; }
.am-header--tom .am-header__name { font-family: var(--display); font-weight: 900; font-size: 1.15rem; letter-spacing: -.03em; text-decoration: none; color: inherit; white-space: nowrap; }
.am-header--tom .am-header__logo { width: 78px; min-height: 0; opacity: .75; }
.am-header--tom .am-nav { margin-left: auto; }
.am-header--tom .am-header__end { margin-left: 24px; }
.am-menu__nav .am-header__name { display: none; }
@media (max-width: 1000px) { .am-header--tom .am-nav { display: none; } .am-header--tom .am-header__end { margin-left: auto; } }
@media (max-width: 480px) { .am-header--tom .am-header__logo { display: none; } .am-header--tom .am-header__in { gap: 12px; } .am-header--tom .am-btn--sm { padding-inline: 14px; } }
.am-tom-hero { padding-top: calc(clamp(110px, 12vw, 160px) + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--sec) + var(--slant)); }
.am-tom-hero__t { font-size: clamp(2.4rem, 5.6vw, 5.6rem); line-height: .98; letter-spacing: -.045em; }
.am-tom-hero { padding-bottom: 0; position: relative; z-index: 0; }
.am-tom-hero .am-tom-hero__copy .am-lead { margin-top: clamp(18px, 2.4vw, 34px); }
.am-tom-hero__grid { align-items: end; }
.am-tom-hero__copy { align-self: end; padding-bottom: calc(clamp(44px, 6vw, 90px) + 40px + var(--slant) * .25); } /* clear of the band's left edge, which sits clamp(44px,6vw,90px) above the hero bottom */
/* the dark core band runs over the lower body of the line art (its diagonal top edge sinks the drawing) */
#core.am-bg-ink { position: relative; z-index: 1; margin-top: calc(-1 * (var(--slant) + clamp(44px, 6vw, 90px))) !important; }
.am-tom-logos .am-logos__item img, .am-tom-logos .am-logos__item:hover img { filter: grayscale(1) contrast(1.2); opacity: .8; }
.am-tom-map { background: var(--ink); padding: clamp(12px, 2vw, 28px); align-self: center; }
@media (min-width: 901px) { .am-tom-map { align-self: stretch; display: flex; align-items: center; } .am-tom-map .am-map__svg { width: 100%; } }
@media (max-width: 900px) { .am-tom-hero__copy { padding-bottom: 0; } }
.am-tom-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.am-tom-hero__art { display: flex; justify-content: center; }
.am-tom-hero__art img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(78svh, 760px); object-fit: contain; }
@media (max-width: 900px) { .am-tom-hero__grid { grid-template-columns: 1fr; } .am-tom-hero__art img { width: min(80vw, 420px); max-height: none; } }
.am-tom-points--light { color: rgba(255,255,255,.9); align-self: center; }
.am-tom-points { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; max-width: 46ch; }
.am-tom-points li { display: flex; gap: 12px; }
.am-tom-points li::before { content: ""; width: 7px; height: 7px; margin-top: .6em; background: var(--magenta); flex: none; }
.am-tom-logos { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 3vw, 40px); background: var(--mist); }
.am-tom-logos__row { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(12px, 1.6vw, 22px); }
.am-tom-logos { --lh: clamp(16px, 1.9vw, 27px); }
@media (max-width: 1000px) { .am-tom-logos { --lh: clamp(16px, 3vw, 27px); } }
.am-tom-logos .am-logos__item { height: var(--lh); }
/* delaware: its artwork has ~54% empty box height and a pale tone; match Autodesk in optical height and darkness */
.am-tom-logos .am-logos__item:nth-child(3) { height: calc(var(--lh) * 1.42); }
.am-tom-logos .am-logos__item:nth-child(3) img, .am-tom-logos .am-logos__item:nth-child(3):hover img { filter: brightness(0); opacity: .8; }
.am-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .am-steps--3 { grid-template-columns: 1fr; } .am-steps--3 .am-step { min-height: 0; } }
.am-footer--tom .am-footer__cols { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.am-tom-close .am-stack { max-width: 44rem; }