/* Globale styles — The Lance.
   Merk-tokens (kleuren/fonts/knoppen/blobvorm) komen uit brand.css.

   Alle maten staan in px en zijn 1-op-1 overgenomen van de bron-site
   (die met een 10px root-font werkte). Zo blijft de opmaak identiek
   zonder de gedeelde componenten aan een afwijkende rem-schaal te binden. */
@import url('brand.css');

/* `*` dekt GEEN pseudo-elementen — die vielen daardoor terug op content-box.
   Bij de scroll-pijl (een 8x8 blokje met 2px borders, 135° gedraaid) maakte dat
   de box 10px breed in een 8px brede ouder, waardoor de punt 1px naast de
   geanimeerde lijn uitkwam. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* Het hidden-attribuut moet altijd winnen. Zonder deze regel overschrijft elke
   layout-declaratie (display: flex/block op .feature__media, .service-card__media,
   de GEO-componenten) de UA-standaard, en blijft een leeg beeld-slot als lege
   contour in beeld staan. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 140px; }
body {
    background-color: var(--bg); overflow-x: hidden;
    max-width: 1440px; margin: 0 auto;   /* boxed layout, zoals de bron */
}
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 1002;
    background: var(--brand); color: #fff; padding: 12px 20px;
    font-family: var(--font-ui);
}
.skip-link:focus { left: 0; color: #fff; }

/* ============================================================
   DE MERKVORM ("blob")
   Een vierkant met zeer ronde hoeken. Drie verschijningsvormen:
   .blob-img    — foto gemaskerd in de vorm
   .blob-media  — de contourlijn als kader achter een foto
   .blob-badge  — gevulde blauwe vorm als icoon-achtergrond
   ============================================================ */
.blob-img {
    -webkit-mask-image: var(--blob); mask-image: var(--blob);
    -webkit-mask-size: contain;      mask-size: contain;
    -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
    -webkit-mask-position: center;   mask-position: center;
}

/* Foto in de vorm, met de contourlijn er licht verschoven achter. */
.blob-media { position: relative; display: flex; justify-content: center; align-items: center; }
.blob-media::before {
    content: ''; position: absolute; inset: -5%;
    background-image: var(--blob-outline);
    background-repeat: no-repeat; background-position: center;
    background-size: contain; pointer-events: none;
    transform: translateX(-4%);
}
.blob-media--right::before { transform: translateX(4%); }
.blob-media > img { position: relative; }

.blob-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand); color: #fff; flex: none;
    -webkit-mask-image: var(--blob); mask-image: var(--blob);
    -webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
}

/* ── Header — vast bovenaan, 120px hoog ── */
#site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 999;
    height: 120px; display: flex; flex-direction: column; justify-content: center;
    background: #fff; padding: 20px 20px 0;
}
.nav-container {
    width: 100%; max-width: 1440px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.logo { display: inline-flex; }
.logo img { width: 172px; height: auto; }

.nav-menu {
    display: flex; align-items: center; gap: 30px;
    font-family: var(--font-head); font-weight: 400; font-size: 24px; line-height: 1.7;
}
.nav-menu a { color: var(--brand); transition: color .2s; }
.nav-menu a:hover, .nav-menu a[aria-current="page"] { color: var(--brand-dark); }

.nav-toggle, .nav-close {
    display: none; background: none; border: 0; cursor: pointer;
    color: var(--brand); padding: 0; line-height: 0;
}
.nav-toggle img { width: 40px; height: 40px; }
.nav-close svg { width: 34px; height: 34px; }

/* ── Layout ──
   De hero loopt bewust ónder de vaste header door (net als de bron):
   de inhoud staat verticaal gecentreerd in 100vh, dus valt niets weg. */
.section { padding: 95px 20px; }
.section--services { padding: 20px 20px 50px; }
.container { width: 100%; max-width: 1440px; margin: 0 auto; }

/* Kop-groep: kicker (h6) + titel (h2) + ondertitel (h3).
   Alles op 400, net als de rest van de site: bij Agenda is een ander gewicht
   een andere BREEDTE, en op 300 oogden deze regels als een tweede lettertype
   naast de kop erboven. Het verschil zit in grootte, niet in snede. */
.headline { display: flex; flex-direction: column; gap: 8px; }
.headline .kicker { font-weight: 400; color: var(--brand-dark); }
.headline h3 { font-weight: 400; }
.headline--center { align-items: center; text-align: center; width: 65%; margin: 0 auto; }

/* ── Hero ── */
.hero {
    display: flex; align-items: center; gap: 20px;
    height: 100vh; padding: 20px;
}
.hero-copy { width: 45%; display: flex; flex-direction: column; align-items: flex-start; }
.hero-copy h1 { margin: 0; }
.hero-copy .btn { margin-top: 20px; }

.hero-media-wrap { flex: 1; display: flex; justify-content: flex-end; align-items: center; height: 100%; }
.hero-media {
    width: 70%; height: 100%; position: relative; display: flex; align-items: center;
    background-image: var(--blob-outline);
    background-repeat: no-repeat; background-position: center right;
    background-size: 95%;
}

/* Binnenpagina-hero: gecentreerde titel + knop, 50vh hoog. */
.page-hero {
    height: 50vh; min-height: 380px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    gap: 20px; padding: 120px 20px 20px;
}
.page-hero h1 { margin: 0; }
/* Kop boven een pagina die zelf al een volle sectie is (contact): wel een echte
   H1, maar zonder de halve schermhoogte van een gewone page-hero. */
.page-hero--compact { height: auto; min-height: 0; padding: 150px 20px 0; gap: 15px; }
.page-hero__lead { max-width: 620px; font-size: 20px; line-height: 1.7; color: var(--brand); }

/* Secties die de bron als volledige schermhoogte opmaakt. */
.section--screen {
    height: 100vh; min-height: 620px; display: flex;
    align-items: center; justify-content: center; padding: 20px;
}
/* Intro-sectie van de over-pagina (iets lager dan een vol scherm). */
.section--about {
    height: 90vh; min-height: 600px; display: flex;
    align-items: center; justify-content: center; padding: 20px;
}

/* ── "Scroll down"-indicator met de elastische lijn ── */
.scroll-block {
    margin-top: -150px; padding: 0 20px;
    display: flex; flex-direction: column; align-items: center;
}
.scroll-down {
    position: relative; display: block; padding-top: 82px; text-align: center;
    white-space: nowrap;
    font-family: var(--font-alt); font-weight: 400; font-size: 16px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
}
.scroll-down::before {
    content: ''; position: absolute; top: 0; left: 50%; margin-left: -1px;
    width: 2px; height: 90px; background: var(--brand);
    animation: elasticus 1.8s cubic-bezier(1, 0, 0, 1) infinite;
}
/* letter-spacing zet óók ruimte ná de laatste letter. Die staart telt mee in de
   breedte maar zie je niet, dus stond de tekst een halve spatie links van het
   midden en leek de lijn er net naast te lopen. Dezelfde ruimte vóór de eerste
   letter zetten maakt het weer symmetrisch — dat kan hier niet met een
   negatieve marge rechts, want dan krimpt de container en breekt
   "SCROLL DOWN" over twee regels. */
.scroll-down > span:last-child { padding-left: .1em; }
.scroll-down .arrow-down { display: block; margin: 0 auto; width: 8px; height: 15px; }
.scroll-down .arrow-down::after {
    content: ''; display: block; width: 8px; height: 8px;
    border-top: 2px solid var(--brand); border-right: 2px solid var(--brand);
    transform: rotate(135deg);
}
@keyframes elasticus {
    0%     { transform-origin: 0% 0%;   transform: scale(1, 0); }
    50%    { transform-origin: 0% 0%;   transform: scale(1, 1); }
    50.1%  { transform-origin: 0% 100%; transform: scale(1, 1); }
    100%   { transform-origin: 0% 100%; transform: scale(1, 0); }
}

/* ── Scroll-animaties ──
   Elementen met data-anim starten verborgen en schuiven in zodra ze in
   beeld komen (main.js zet .is-visible). Zonder JS blijven ze zichtbaar. */
[data-anim] { opacity: 0; will-change: opacity, transform; }
[data-anim="up"]          { transform: translateY(40px); }
[data-anim="bottom-left"] { transform: translate(-40px, 40px); }
[data-anim].is-visible {
    opacity: 1; transform: none;
    transition: opacity .8s ease, transform .8s ease;
    transition-delay: var(--anim-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-anim] { opacity: 1; transform: none; }
    .scroll-down::before { animation: none; }
}

/* ── Skeleton loading ── */
.skeleton { position: relative; overflow: hidden; min-height: 1.2em; background: #e6f4fe; border-radius: 4px; }
.skeleton::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ── Error state ── */
.load-error {
    padding: 16px; color: #991b1b; background: #fef2f2;
    border: 1px solid #fecaca; border-radius: 6px;
    font-family: var(--font-ui); font-size: .9rem; text-align: center;
}

/* ============================================================
   RESPONSIVE — breekpunten volgen de bron-site (991 / 767 / 478)
   ============================================================ */
@media (max-width: 991px) {
    .hero-media { background-size: 85%; }
    .nav-menu { gap: 20px; font-size: 20px; }
    .headline--center { width: 100%; }
}

@media (max-width: 767px) {
    #site-header { height: 90px; padding: 15px; }
    .logo img { width: 130px; }
    .section { padding: 35px 15px; }
    .section--services { padding: 35px 15px; }

    .nav-toggle { display: block; }
    .nav-close  { display: block; position: absolute; top: 20px; left: 20px; }
    .nav-menu {
        position: fixed; inset: 0; z-index: 1001;
        flex-direction: column; align-items: center; justify-content: center;
        gap: 0; background: #fff; font-size: 32px;
        opacity: 0; visibility: hidden; transition: opacity .25s;
    }
    .nav-menu.nav-open { opacity: 1; visibility: visible; }
    .nav-menu li { margin: 4px 0; }

    .hero { flex-direction: column; align-items: center; height: auto; padding-top: 125px; gap: 30px; }
    .hero-copy { width: 100%; align-items: flex-start; text-align: left; }
    .hero-media-wrap { width: 100%; justify-content: center; }
    .hero-media { width: 100%; height: auto; background-size: 85%; background-position: center; }
    .scroll-block { margin-top: 0; padding-bottom: 20px; }
    .page-hero { min-height: 0; padding: 110px 15px 20px; }

    /* Op mobiel stond vrijwel alle lopende tekst gecentreerd; over 4-5 regels
       leest dat slecht en zwabberen de regelbeginnen. Links uitlijnen. */
    .headline, .headline--center { align-items: flex-start; text-align: left; width: 100%; }

    /* Vaste schermhoogte werkt niet op mobiel: gestapeld (foto + kop + tekst)
       past de inhoud er niet in en loopt ze over de volgende sectie en de
       footer heen. De sectie groeit nu met haar inhoud mee. */
    .section--screen {
        height: auto; min-height: 0;
        padding: 40px 15px;
    }

    /* De header staat vast bovenaan (90px). Begint een pagina met een gewone
       sectie in plaats van een hero, dan schuift de bovenkant daar zonder deze
       ruimte onderdoor — op contact verdween zo de kop van de bedrijfskaart.
       .hero en .page-hero regelen hun eigen ruimte hierboven. */
    main > section:first-child:not(.hero):not(.page-hero) { padding-top: 110px; }
}

@media (max-width: 478px) {
    .hero-copy { width: 100%; }
    .hero-media { background-size: 99%; }
    .section, .section--services { padding: 30px 12px; }
}