/* ==========================================================================
   COSTAHOME · designsysteem v2
   Redactioneel, fotografie voorop, framework-vrij, geen externe requests.
   Wordt later het PDEV2-thema `costa-home`.

   1. Tokens
   2. Reset en basis
   3. Typografie
   4. Layout en secties
   5. Knoppen en links
   6. Header
   7. Hero
   8. De Vergelijker
   9. Statement, stappen, cijfers, quote, contact
  10. Woningen
  11. Regio's
  12. Formulieren
  13. Artikelen
  14. Footer en mobiele balk
  15. Detailpagina's
  16. Beweging en toegankelijkheid
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    --deep:      #0b2f2d;
    --deep-2:    #082523;
    --green:     #174b45;
    --green-h:   #113a35;
    --sea:       #4d8f91;
    --sea-dark:  #33686b;   /* kickers zijn klein en gesperd, die hebben meer contrast nodig */

    --cream:     #f6f2e8;
    --cream-2:   #fbf9f4;
    --sand:      #eddfc2;
    --sand-lt:   #f3e9d5;   /* warmer dan crème, voor één of twee banden per pagina */
    --gold:      #c1934f;
    --gold-lt:   #d8ab63;

    --ink:       #14302f;
    --muted:     #4d5f60;   /* 6.0:1 op crème · de vorige tint haalde net 5.1 en oogde grauw */
    --white:     #ffffff;

    --line:      rgba(20, 48, 47, .13);
    --line-2:    rgba(20, 48, 47, .26);
    --line-lt:   rgba(246, 242, 232, .20);

    --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* De koppen stonden een trap te hoog: 3,4rem naast 1,125rem body geeft een sprong
       waar het oog steeds overheen moet. De kleine maten gingen juist omhoog. */
    --fs-hero:  clamp(2.9rem, 1.4rem + 5.4vw, 5.4rem);
    --fs-h2:    clamp(1.9rem, 1.4rem + 1.9vw, 2.9rem);
    --fs-h3:    clamp(1.28rem, 1.14rem + .6vw, 1.55rem);
    --fs-lead:  clamp(1.15rem, 1rem + .55vw, 1.4rem);
    --fs-body:  1.125rem;
    --fs-small: 1rem;
    --fs-meta:  .875rem;    /* datums en bijschriften, het kleinste dat we gebruiken */
    --fs-kicker:.75rem;

    --measure:  64ch;       /* leesbreedte voor lopende tekst binnen brede kolommen */

    /* Hoogte van de vaste header: padding-block (2x 1,4rem) plus het logo.
       Wordt gebruikt door .site-notice, die anders onder de header verdwijnt. */
    --header-h: calc(2.8rem + clamp(2.3rem, 1.8rem + 1.2vw, 2.9rem));

    --gutter:   clamp(1.25rem, 4vw, 3.5rem);
    --gap:      clamp(1.25rem, 2.2vw, 2rem);
    --section:  clamp(4.5rem, 9vw, 9rem);

    --shadow:    0 1px 2px rgba(11, 47, 45, .04), 0 10px 30px rgba(11, 47, 45, .07);
    --shadow-lg: 0 2px 6px rgba(11, 47, 45, .06), 0 26px 60px rgba(11, 47, 45, .14);

    --ease: cubic-bezier(.22, .61, .28, 1);

    /* Nauwelijks zichtbare korrel, houdt grote crèmevlakken levend */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Reset en basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* De header staat vast, dus een sprong naar een anker (het formulier op een
   woningpagina, de werkwijze) zou de kop eronder laten verdwijnen. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; scroll-padding-top: var(--header-h); }

/* Het `hidden`-attribuut moet echt verbergen. De regel uit de browser zelf is
   zwakker dan elke `display` die wij hier zetten, dus zonder deze regel bleven
   .woning, .budgets, .btn en .result__more staan terwijl de JS ze had verborgen
   — de filters op de aanbodpagina verborgen daardoor niets. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
::selection { background: var(--sand); color: var(--deep); }

:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; border-radius: 2px; }

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--deep); color: var(--white); padding: .75rem 1.25rem;
}
.skip:focus { left: 0; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--deep);
    margin: 0 0 .55em;
    letter-spacing: -.022em;
    text-wrap: balance;
}
h1 { font-size: var(--fs-hero); line-height: 1.0; }
h2 { font-size: var(--fs-h2);   line-height: 1.08; }
h3 { font-size: var(--fs-h3);   line-height: 1.22; letter-spacing: -.012em; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); }
.small { font-size: var(--fs-small); }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* Groot redactioneel tekstblok */
.display-p {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.1rem);
    line-height: 1.38;
    color: var(--deep);
    letter-spacing: -.014em;
}

/* Streepje, gouden cijfer én gesperde kapitalen was drie signalen voor één regel,
   zeven keer per pagina. Alleen de kapitalen zijn overgebleven, ruimer gezet. */
.kicker {
    display: block;
    font-size: var(--fs-kicker); font-weight: 600;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--sea-dark);
    margin: 0 0 1.1rem;
}
.on-dark .kicker { color: var(--gold-lt); }

a { color: var(--green); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--deep); }

.arrow-link {
    display: inline-flex; align-items: center; gap: .55rem;
    font-weight: 600; font-size: var(--fs-small); letter-spacing: .01em;
    text-decoration: none; color: var(--deep);
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--line-2);
    transition: gap .3s var(--ease), border-color .3s var(--ease);
}
.arrow-link::after { content: "→"; transition: transform .3s var(--ease); }
.arrow-link:hover { gap: .85rem; border-color: var(--gold); }
.arrow-link:hover::after { transform: translateX(3px); }
.on-dark .arrow-link { color: var(--sand); border-color: var(--line-lt); }
.on-dark .arrow-link:hover { color: var(--white); border-color: var(--gold); }

/* --------------------------------------------------------------------------
   4. Layout en secties
   -------------------------------------------------------------------------- */
.wrap       { width: min(100% - (2 * var(--gutter)), 1200px); margin-inline: auto; }
.wrap--wide { width: min(100% - (2 * var(--gutter)), 1560px); margin-inline: auto; }
.wrap--read { width: min(100% - (2 * var(--gutter)), 700px);  margin-inline: auto; }
.bleed      { width: 100%; }

.section     { padding-block: var(--section); position: relative; }
.section--sm { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.section--tight-top { padding-top: clamp(2rem, 4vw, 3.5rem); }

.bg-cream  { background: var(--cream); }
.bg-cream2 { background: var(--cream-2); }
.bg-sand   { background: var(--sand-lt); }
.bg-deep   { background: var(--deep); color: rgba(246, 242, 232, .8); }
.bg-deep h1, .bg-deep h2, .bg-deep h3 { color: var(--white); }

/* korrel op de warme vlakken */
.bg-cream::before, .bg-cream2::before, .bg-sand::before, .bg-deep::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: var(--grain); opacity: .035; mix-blend-mode: multiply;
}
.bg-deep::before { mix-blend-mode: overlay; opacity: .05; }
.bg-cream > *, .bg-cream2 > *, .bg-sand > *, .bg-deep > * { position: relative; z-index: 1; }

/* Dunne gouden scheiding waar twee donkere vlakken elkaar raken */
.divider-gold { height: 1px; border: 0; margin: 0; background: rgba(193, 147, 79, .4); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Kop van een sectie: kop links, toelichting rechts */
.head {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--gap) clamp(2rem, 6vw, 6rem);
    align-items: end;
    margin-bottom: clamp(2.5rem, 4.5vw, 4rem);
}
.head__aside { color: var(--muted); font-size: var(--fs-small); padding-bottom: .4rem; }
/* De leesbreedte geldt voor lopende tekst, niet voor een rij knoppen: die
   klapte er anders op vier stuks overheen. */
.head__aside > p { max-width: 44ch; }
.head--solo { display: block; max-width: 40rem; }
@media (max-width: 860px) { .head { grid-template-columns: 1fr; align-items: start; } }

.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   5. Knoppen
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
    padding: 1.05rem 1.9rem;
    font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: .005em;
    border: 1px solid transparent; border-radius: 2px;
    cursor: pointer; text-decoration: none;
    transition: background-color .25s var(--ease), color .25s var(--ease),
                border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--green); color: var(--white); }
.btn--primary:hover { background: var(--green-h); color: var(--white); }
.btn--gold { background: var(--gold); color: var(--deep-2); }
.btn--gold:hover { background: var(--gold-lt); color: var(--deep-2); }
.btn--ghost { background: transparent; color: var(--deep); border-color: rgba(20, 48, 47, .38); }
.btn--ghost:hover { border-color: var(--deep); background: rgba(11, 47, 45, .05); color: var(--deep); }
.btn--light { background: var(--white); color: var(--deep); }
.btn--light:hover { background: var(--sand); }
.btn--onDark { background: transparent; color: var(--cream); border-color: rgba(246, 242, 232, .38); }
.btn--onDark:hover { border-color: var(--sand); background: rgba(246, 242, 232, .1); color: var(--white); }
.btn--sm { padding: .62rem 1.15rem; font-size: var(--fs-small); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.header {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    padding-block: 1.4rem;
    transition: background-color .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.header.is-stuck, .header--solid {
    background: rgba(246, 242, 232, .95);
    backdrop-filter: saturate(1.3) blur(10px);
    box-shadow: 0 1px 0 var(--line);
}
.header.is-stuck { padding-block: .8rem; }

.logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
/* Het woordmerk zit rechts in een breed logo, dus het beeldmerk moet ruim staan
   voordat "CostaHome" leesbaar wordt. Onder de 2,2rem valt het weg. */
.logo__img { display: block; width: auto; height: clamp(2.3rem, 1.8rem + 1.2vw, 2.9rem); }

/* Hetzelfde beeldmerk in twee kleurstellingen: het donkere woordmerk valt weg op een
   hero-foto, het lichte valt weg op de crèmekleurige balk. Beide bestanden zijn een
   paar kilobyte, dus we wisselen met display in plaats van met JavaScript. */
.logo__img--donker { display: none; }
.is-stuck .logo__img--licht, .header--solid .logo__img--licht { display: none; }
.is-stuck .logo__img--donker, .header--solid .logo__img--donker { display: block; }

.nav { display: flex; align-items: center; gap: 2.1rem; }
.nav a {
    color: rgba(255, 255, 255, .85); text-decoration: none;
    font-size: .94rem; font-weight: 500; padding-block: .4rem;
    border-bottom: 1px solid transparent;
    transition: color .25s var(--ease), border-color .25s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--white); border-color: var(--gold); }
.is-stuck .nav a, .header--solid .nav a { color: var(--ink); }
.is-stuck .nav a:hover, .header--solid .nav a:hover,
.is-stuck .nav a[aria-current="page"], .header--solid .nav a[aria-current="page"] { color: var(--deep); }

/* moet specifieker zijn dan `.header--solid .nav a`, anders wordt de knoptekst donker */
.is-stuck .nav a.btn--onDark, .header--solid .nav a.btn--onDark {
    background: var(--green); color: var(--white); border-color: var(--green);
}
.is-stuck .nav a.btn--onDark:hover, .header--solid .nav a.btn--onDark:hover {
    background: var(--green-h); color: var(--white); border-color: var(--green-h);
}

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; color: var(--white); }
.is-stuck .nav-toggle, .header--solid .nav-toggle { color: var(--deep); }
.nav-toggle span {
    display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0;
    transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
    .nav-toggle { display: block; }
    .header__nav {
        position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px);
        background: var(--deep); transform: translateX(100%);
        transition: transform .38s var(--ease);
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        padding: 6.5rem 2rem 2rem; overflow-y: auto;
    }
    .header__nav.is-open { transform: none; }
    .header__nav a {
        color: var(--cream); font-size: 1.35rem; font-family: var(--font-display);
        padding-block: 1.05rem; border-bottom: 1px solid var(--line-lt);
    }
    .header__nav .btn { margin-top: 1.75rem; }
    .is-stuck .header__nav a, .header--solid .header__nav a { color: var(--cream); }
}
@media (max-width: 560px) { .hide-sm { display: none; } }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative; min-height: min(96vh, 900px);
    display: flex; align-items: flex-end;
    padding-block: 9rem clamp(3.5rem, 7vw, 6rem);
    color: var(--white); overflow: hidden; background: var(--deep);
}
/* Kortere variant voor overzichtspagina's: beeld genoeg om de site
   fotografisch te houden, niet zo hoog dat je de inhoud kwijtraakt. */
.hero--compact { min-height: min(58vh, 520px); padding-block: 8rem clamp(2.5rem, 5vw, 3.5rem); }
.hero--compact h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4rem); }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(to top, rgba(6, 30, 29, .92) 0%, rgba(6, 30, 29, .62) 26%,
                                rgba(6, 30, 29, .22) 58%, rgba(6, 30, 29, .05) 82%,
                                rgba(6, 30, 29, .3) 100%),
        linear-gradient(to right, rgba(6, 30, 29, .6) 0%, rgba(6, 30, 29, .26) 44%, rgba(6, 30, 29, 0) 78%);
}
.hero__inner { position: relative; z-index: 1; }
.hero__inner > * { max-width: 46rem; }
.hero h1 { color: var(--white); margin-bottom: .3em; }
.hero h1 em { font-style: italic; color: var(--sand); }
.hero__lead { font-size: var(--fs-lead); color: rgba(246, 242, 232, .92); max-width: 34rem; }
.hero .kicker { color: var(--sand); }
.hero .btn-row { margin-top: 2.4rem; }

/* Smalle band onder de hero met drie feiten */
.hero__strip {
    position: absolute; inset: auto 0 0 0; z-index: 1;
    border-top: 1px solid rgba(246, 242, 232, .16);
    background: rgba(6, 30, 29, .35);
    backdrop-filter: blur(4px);
}
.hero__strip ul {
    list-style: none; margin: 0 auto; padding: .9rem 0;
    width: min(100% - (2 * var(--gutter)), 1560px);
    display: flex; gap: clamp(1.5rem, 5vw, 5rem); flex-wrap: wrap;
    font-size: var(--fs-small); color: rgba(246, 242, 232, .8);
}
.hero__strip b { color: var(--sand); font-weight: 600; }
@media (max-width: 780px) { .hero__strip { display: none; } }

/* --------------------------------------------------------------------------
   8. De Vergelijker
   -------------------------------------------------------------------------- */
.compare { background: var(--cream); overflow: hidden; }
.compare .head { margin-bottom: 2.25rem; }

.budgets { display: flex; flex-wrap: wrap; gap: .5rem; }
.budget {
    font: inherit; font-size: var(--fs-small); font-weight: 600;
    padding: .62rem 1.15rem; background: transparent;
    border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink);
    cursor: pointer; font-variant-numeric: tabular-nums;
    transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.budget:hover { border-color: var(--deep); }
.budget[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: var(--white); }

/* Elke helft is één blok (foto + gegevens), zodat de gegevens op mobiel
   direct onder hun eigen foto blijven staan. */
.compare__panel { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; align-items: start; }
.compare__side { display: flex; flex-direction: column; min-width: 0; }

/* geen overflow:hidden hier, anders knipt de figure de medaille op de naad af */
.compare__figure { position: relative; aspect-ratio: 4 / 3.1; background: var(--sand); margin: 0; }
.compare__figure img { width: 100%; height: 100%; object-fit: cover; }
/* Eén verloop tot .55 was te zwak zodra het bijschrift op een lichte gevel
   of een felle lucht viel. Nu een vaste vloer onder de tekst. */
.compare__figure::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(6, 30, 29, .88) 0%, rgba(6, 30, 29, .66) 16%,
                                rgba(6, 30, 29, .2) 45%, transparent 68%);
}
.compare__flag {
    position: absolute; top: 1.1rem; left: 1.1rem; z-index: 2;
    color: var(--white); font-size: var(--fs-kicker); font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    text-shadow: 0 1px 12px rgba(6, 30, 29, .6);
}
.compare__flag::before {
    content: ""; display: inline-block; width: 18px; height: 1px;
    background: var(--gold); margin-right: .6rem; vertical-align: middle;
}
.compare__cap {
    position: absolute; inset: auto 0 0 0; z-index: 2;
    padding: 1.5rem clamp(1rem, 2vw, 1.75rem);
    color: var(--white);
}
.compare__cap h3 { color: var(--white); margin-bottom: .15rem; font-size: clamp(1.15rem, .95rem + .7vw, 1.55rem); }
.compare__cap p { margin: 0; font-size: var(--fs-small); color: rgba(246, 242, 232, .82); }

/* ruimte bovenaan zodat de medaille de specs niet overlapt */
.compare__col { padding: 3.4rem clamp(1rem, 2vw, 1.75rem) 0; }
.compare__side + .compare__side .compare__col { border-left: 1px solid var(--line); }
.compare__specs {
    list-style: none; margin: 0 0 1rem; padding: 0;
    display: flex; flex-wrap: wrap; gap: .2rem .9rem;
    font-size: var(--fs-small); color: var(--muted);
}
.compare__specs li + li::before { content: "·"; margin-right: .9rem; color: var(--line-2); }
.compare__price {
    font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem);
    color: var(--deep); line-height: 1.05; font-variant-numeric: tabular-nums;
}
.compare__date { font-size: var(--fs-meta); color: var(--muted); margin-top: .3rem; }

/* hangt aan de rechteronderhoek van de linkerfoto, dus precies op de naad */
.compare__medallion {
    position: absolute; right: 0; bottom: 0; z-index: 3;
    transform: translate(50%, 50%);
    width: 104px; height: 104px; border-radius: 50%;
    background: var(--deep); border: 1px solid rgba(193, 147, 79, .55);
    display: grid; place-content: center; text-align: center; gap: .1rem;
    color: rgba(237, 223, 194, .75);
    font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
    box-shadow: 0 10px 34px rgba(6, 30, 29, .3);
}
.compare__medallion strong {
    display: block; font-family: var(--font-display); font-size: 1.15rem;
    letter-spacing: 0; text-transform: none; color: var(--white); font-weight: 400;
    font-variant-numeric: tabular-nums;
}
.compare__note { margin-top: 2.5rem; font-size: var(--fs-small); color: var(--muted); max-width: 44rem; }

/* de bijschriften wijken voor de medaille op de naad */
@media (min-width: 801px) {
    .compare__side:first-child .compare__cap { padding-right: 4.5rem; }
    .compare__side + .compare__side .compare__cap { padding-left: 4.5rem; }
}

@media (max-width: 800px) {
    .compare__panel { grid-template-columns: 1fr; gap: 2.25rem; }
    .compare__medallion { display: none; }
    .compare__col { padding: 1.4rem 0 0; }
    .compare__side + .compare__side .compare__col { border-left: 0; }
}

/* --------------------------------------------------------------------------
   9. Statement, stappen, cijfers, quote, contact
   -------------------------------------------------------------------------- */
.statement {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.statement > :first-child > p, .statement > :first-child > h2 { max-width: var(--measure); }
.statement__aside { font-size: var(--fs-small); color: var(--muted); }
.statement__aside dt {
    font-weight: 600; color: var(--deep); font-size: var(--fs-kicker);
    letter-spacing: .14em; text-transform: uppercase; margin-bottom: .4rem;
    padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.statement__aside dd { margin: 0 0 1.5rem; }
.statement__aside dd:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .statement { grid-template-columns: 1fr; } }

/* Stappen · als vijf kolommen naast elkaar blijft er per stap een regellengte van
   ruim twintig tekens over, en dat leest als een kolommenbrij. Nu één rij per stap:
   cijfer, titel, uitleg. Rustiger, en de regellengte klopt. */
.steps__list {
    counter-reset: step; list-style: none; margin: 0; padding: 0;
    border-top: 1px solid var(--line);
}
.steps__item {
    counter-increment: step;
    display: grid; grid-template-columns: 5rem minmax(0, 15rem) minmax(0, 1fr);
    gap: 0 clamp(1.5rem, 3vw, 3rem); align-items: baseline;
    padding-block: clamp(1.6rem, 2.6vw, 2.2rem);
    border-bottom: 1px solid var(--line);
    transition: background-color .3s var(--ease);
}
.steps__item:hover { background: rgba(193, 147, 79, .05); }
.steps__item::before {
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: 2.1rem; line-height: 1; color: var(--gold);
    font-variant-numeric: tabular-nums;
}
.steps__item h3 { font-size: 1.3rem; margin: 0; }
.steps__item p { font-size: var(--fs-small); color: var(--muted); max-width: 52ch; }
@media (max-width: 860px) {
    .steps__item {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        gap: .35rem clamp(1rem, 3vw, 1.5rem);
    }
    .steps__item::before { grid-row: span 2; font-size: 1.8rem; }
}

/* Rollen · wie doet wat. Het verschil tussen wat wij doen en wat de geregistreerde
   makelaar doet is juridisch het belangrijkste op deze site. Dat verdient een eigen
   blok en niet een bijzin in een alinea. */
.rollen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rollen li {
    display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: .35rem clamp(1.5rem, 3vw, 3rem);
    padding-block: clamp(1.3rem, 2.2vw, 1.8rem);
    border-bottom: 1px solid var(--line);
}
.rollen h3 { font-size: 1.2rem; margin: 0; }
.rollen p { margin: 0; font-size: var(--fs-small); color: var(--muted); max-width: 56ch; }
.rollen__wie { display: block; font-size: var(--fs-meta); color: var(--gold); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .3rem; }
@media (max-width: 780px) { .rollen li { grid-template-columns: 1fr; } }

.on-dark .rollen, .on-dark .rollen li { border-color: var(--line-lt); }
.on-dark .rollen h3 { color: var(--white); }
.on-dark .rollen p { color: rgba(246, 242, 232, .74); }
.on-dark .rollen__wie { color: var(--gold-lt); }

/* Cijferband */
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 4rem); }
.figures__item { border-top: 1px solid var(--line-lt); padding-top: 1.6rem; }
.figures__value {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.2rem);
    line-height: 1; color: var(--gold-lt); font-variant-numeric: tabular-nums;
    margin-bottom: .6rem;
}
.figures__item p { font-size: var(--fs-small); color: rgba(246, 242, 232, .74); }
/* specifieker dan de regel hierboven, anders wint die van het grote cijfer */
.figures__item p.figures__value {
    font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.2rem);
    color: var(--gold-lt);
}
@media (max-width: 780px) { .figures { grid-template-columns: 1fr; } }

/* Quote over een foto */
.quote {
    position: relative; overflow: hidden; background: var(--deep);
    display: grid; place-items: center; text-align: center;
    min-height: min(62vh, 560px);
    padding-block: clamp(4rem, 8vw, 7rem);
}
.quote__media { position: absolute; inset: 0; }
.quote__media img { width: 100%; height: 100%; object-fit: cover; }
.quote__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(6, 30, 29, .78), rgba(6, 30, 29, .86));
}
.quote__inner { position: relative; z-index: 1; width: min(100% - (2 * var(--gutter)), 900px); }
.quote blockquote {
    margin: 0 0 1.75rem;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem);
    line-height: 1.28; color: var(--white); letter-spacing: -.018em;
}
.quote figcaption { font-size: var(--fs-small); color: rgba(246, 242, 232, .7); }

/* Contactband, zonder gezichten */
.contactband { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.contactband__media { position: relative; min-height: 420px; }
.contactband__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contactband__body {
    background: var(--deep); color: rgba(246, 242, 232, .82);
    padding: clamp(2.5rem, 5vw, 5rem);
    display: flex; flex-direction: column; justify-content: center;
}
.contactband__body h2 { color: var(--white); }
.contactband__phone {
    display: inline-flex; align-items: center; gap: .8rem;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
    color: var(--sand); text-decoration: none;
    border-bottom: 1px solid rgba(193, 147, 79, .5);
    padding-bottom: .3rem; margin-top: 1.5rem; align-self: flex-start;
    font-variant-numeric: tabular-nums;
    transition: color .25s var(--ease), border-color .25s var(--ease);
}
.contactband__phone:hover { color: var(--white); border-color: var(--gold); }
@media (max-width: 860px) {
    .contactband { grid-template-columns: 1fr; }
    .contactband__media { min-height: 260px; }
}

/* --------------------------------------------------------------------------
   10. Woningen
   -------------------------------------------------------------------------- */
.woningen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 2.6vw, 2.5rem); }
@media (max-width: 980px) { .woningen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .woningen { grid-template-columns: 1fr; } }

.woning { display: block; text-decoration: none; color: inherit; }
.woning__media {
    position: relative; aspect-ratio: 4 / 3; overflow: hidden;
    background: var(--sand); border-radius: 2px;
}
.woning__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .7s var(--ease), filter .4s var(--ease);
}
.woning:hover .woning__media img { transform: scale(1.045); }

.tag {
    position: absolute; top: 1rem; left: 1rem; z-index: 2;
    background: rgba(246, 242, 232, .93); color: var(--deep);
    font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    padding: .4rem .7rem; border-radius: 2px;
}
.tag--gold { background: var(--gold); color: var(--deep-2); }

.woning__body { padding-top: 1.25rem; }
.woning__place {
    font-size: var(--fs-kicker); letter-spacing: .14em; text-transform: uppercase;
    color: var(--sea-dark); font-weight: 600; margin-bottom: .55rem;
}
.woning__title { font-size: 1.28rem; margin-bottom: .7rem; }
.woning:hover .woning__title { color: var(--green); }
.woning__specs {
    list-style: none; margin: 0 0 1.1rem; padding: 0;
    display: flex; flex-wrap: wrap; gap: .2rem .85rem;
    font-size: var(--fs-small); color: var(--muted);
}
.woning__specs li + li::before { content: "·"; margin-right: .85rem; color: var(--line-2); }
.woning__foot {
    padding-top: .95rem; border-top: 1px solid var(--line);
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.woning__price { font-family: var(--font-display); font-size: 1.4rem; color: var(--deep); font-variant-numeric: tabular-nums; }
.woning__date { font-size: var(--fs-meta); color: var(--muted); }

/* Eén regel per filtergroep, met het label in een vaste kolom ervoor.
   Alles op één hoop leest als een woordenbrij. */
.filters { padding-block: .5rem 1.6rem; border-bottom: 1px solid var(--line); }
.filters__row {
    display: grid; grid-template-columns: 7.5rem 1fr;
    gap: .6rem 1rem; align-items: baseline;
    padding-block: .95rem;
}
.filters__row + .filters__row { border-top: 1px solid var(--line); }
.filters__label {
    font-size: var(--fs-kicker); letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
}
.filters__set { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 640px) {
    .filters__row { grid-template-columns: 1fr; gap: .5rem; }
}
.chip {
    font: inherit; font-size: var(--fs-small); padding: .48rem 1rem;
    border: 1px solid var(--line-2); border-radius: 999px;
    background: transparent; color: var(--ink); cursor: pointer;
    transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.chip:hover { border-color: var(--deep); }
.chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--white); }

/* --------------------------------------------------------------------------
   11. Regio's
   -------------------------------------------------------------------------- */
.regios {
    display: grid; grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(200px, 22vw, 280px);
    gap: clamp(.75rem, 1.2vw, 1.1rem);
}
.regio {
    position: relative; overflow: hidden; border-radius: 2px;
    text-decoration: none; color: var(--white);
    display: flex; align-items: flex-end; background: var(--deep);
}
.regio--tall { grid-row: span 2; }
.regio--wide { grid-column: span 2; }
.regio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
/* Twee lagen: een vaste vloer onder het bijschrift plus een lichte waas over de hele
   tegel. Eén verloop is te zwak zodra er een felle lucht onder de tekst valt. */
.regio::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(to top, rgba(6, 30, 29, .94) 0%, rgba(6, 30, 29, .78) 22%,
                                rgba(6, 30, 29, .34) 55%, rgba(6, 30, 29, 0) 82%),
        linear-gradient(rgba(6, 30, 29, .14), rgba(6, 30, 29, .14));
    transition: opacity .35s var(--ease);
}
.regio:hover img { transform: scale(1.05); }
.regio:hover::after { opacity: .88; }
.regio__body { position: relative; z-index: 1; padding: 1.5rem 1.6rem; width: 100%; }
.regio__body h3 {
    color: var(--white); font-size: clamp(1.3rem, 1.05rem + .7vw, 1.7rem); margin-bottom: .3rem;
}
.regio__body p { font-size: var(--fs-small); color: rgba(246, 242, 232, .88); margin: 0; max-width: 34ch; }
/* moet specifieker zijn dan `.regio__body p`, anders wint die van de prijs
   zodra iemand er een <p> van maakt in plaats van een <span> */
.regio__price, .regio__body p.regio__price {
    display: inline-block; margin-top: .8rem; padding-top: .7rem;
    border-top: 1px solid rgba(193, 147, 79, .5);
    font-size: var(--fs-kicker); letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold-lt); font-weight: 600;
}
@media (max-width: 900px) {
    .regios { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 210px; }
    .regio--wide { grid-column: span 1; }
}
@media (max-width: 600px) {
    .regios { grid-template-columns: 1fr; grid-auto-rows: 200px; }
    .regio--tall { grid-row: span 1; }
}

/* --------------------------------------------------------------------------
   12. Formulieren
   -------------------------------------------------------------------------- */
.form-panel {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
@media (max-width: 900px) { .form-panel { grid-template-columns: 1fr; } }

.form-panel__intro ul { list-style: none; padding: 0; margin: 1.75rem 0 0; font-size: var(--fs-small); }
.form-panel__intro li {
    padding: .8rem 0 .8rem 1.9rem; border-bottom: 1px solid var(--line); position: relative;
}
.form-panel__intro li::before {
    content: ""; position: absolute; left: 0; top: 1.25rem;
    width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--sea);
}
.on-dark .form-panel__intro li { border-color: var(--line-lt); }

.form {
    background: var(--white); border: 1px solid var(--line); border-radius: 3px;
    padding: clamp(1.6rem, 3vw, 2.75rem); box-shadow: var(--shadow);
}
.field { margin-bottom: 1.75rem; }
.field:last-of-type { margin-bottom: 1.1rem; }
.field > label, .field legend {
    display: block; padding: 0; font-size: var(--fs-small); font-weight: 600;
    color: var(--deep); margin-bottom: .7rem;
}
.field .hint { font-size: var(--fs-meta); color: var(--muted); font-weight: 400; display: block; margin-top: .25rem; }

.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
    width: 100%; font: inherit; font-size: 1rem; padding: .85rem .2rem;
    color: var(--ink); background: transparent; border: 0;
    border-bottom: 1px solid var(--line-2); border-radius: 0;
    transition: border-color .25s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green); }
.field input::placeholder, .field textarea::placeholder { color: rgba(89, 105, 106, .55); }
.field textarea { min-height: 5.5rem; resize: vertical; }

fieldset { border: 0; padding: 0; margin: 0; }

.options { display: flex; flex-wrap: wrap; gap: .5rem; }
.option { position: relative; }
.option input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.option span {
    display: block; padding: .58rem 1.05rem; font-size: var(--fs-small);
    border: 1px solid var(--line-2); border-radius: 999px;
    transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.option input:checked + span { background: var(--green); border-color: var(--green); color: var(--white); }
.option input:focus-visible + span { outline: 2px solid var(--sea); outline-offset: 3px; }
.option:hover span { border-color: var(--deep); }

.form__foot { font-size: var(--fs-meta); color: var(--muted); margin-top: 1.1rem; }
.form__foot a { color: var(--muted); }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; }

/* --------------------------------------------------------------------------
   13. Artikelen
   -------------------------------------------------------------------------- */
.artikel {
    display: block; text-decoration: none; color: inherit;
    border-top: 1px solid var(--line); padding-top: 1.6rem;
    transition: border-color .3s var(--ease);
}
.artikel:hover { border-color: var(--gold); }
.artikel__cat {
    font-size: var(--fs-kicker); letter-spacing: .14em; text-transform: uppercase;
    color: var(--sea-dark); font-weight: 600; margin-bottom: .7rem;
}
.artikel h3 { font-size: 1.3rem; margin-bottom: .55rem; }
.artikel:hover h3 { color: var(--green); }
.artikel p { font-size: var(--fs-small); color: var(--muted); }
.artikel__meta { font-size: var(--fs-meta); color: var(--muted); margin-top: .85rem; }

/* --------------------------------------------------------------------------
   14. Footer en mobiele balk
   -------------------------------------------------------------------------- */
.footer { background: var(--deep); color: rgba(246, 242, 232, .68); padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem; position: relative; }
.footer a { color: rgba(246, 242, 232, .82); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer__top {
    display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: var(--gap); padding-bottom: 3rem; border-bottom: 1px solid var(--line-lt);
}
.footer__brand .logo { margin-bottom: 1.3rem; }
.footer__brand .logo__img { height: 3rem; }
.footer__brand p { font-size: var(--fs-small); max-width: 32ch; }
.footer h2.footer__kop {
    font-family: var(--font-body); font-size: var(--fs-kicker);
    letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lt);
    font-weight: 600; margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); }
.footer li { margin-bottom: .65rem; }
.footer__bottom {
    padding-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem;
    justify-content: space-between; font-size: var(--fs-meta);
}
.footer__disclaimer { max-width: 64ch; }
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; gap: 2rem; } }

.stickybar {
    position: fixed; inset: auto 0 0 0; z-index: 90; display: none;
    gap: .6rem; padding: .7rem .9rem;
    background: rgba(246, 242, 232, .97); border-top: 1px solid var(--line);
    backdrop-filter: blur(8px); transform: translateY(110%);
    transition: transform .35s var(--ease);
}
.stickybar.is-visible { transform: none; }
/* De hoofd-CTA is één vaste zin en die is lang. In de mobiele balk mag hij daarom
   krapper staan en desnoods over twee regels breken, maar hij blijft dezelfde zin. */
.stickybar .btn { flex: 1; padding-inline: .8rem; font-size: .95rem; line-height: 1.25; text-align: center; }
.stickybar .btn--icon { flex: none; width: 48px; padding: 0; }
@media (max-width: 780px) { .stickybar { display: flex; } }

/* --------------------------------------------------------------------------
   15. Detailpagina's
   -------------------------------------------------------------------------- */
.pagehead { background: var(--cream); padding-block: clamp(7.5rem, 12vw, 11rem) clamp(2.5rem, 5vw, 4rem); position: relative; }
.pagehead .lead { max-width: 46rem; }
.pagehead__actie { margin-top: 1.6rem; }

/* De aanbodpagina: net genoeg kop onder de vaste header en dan meteen de
   filters en de woningen. Een hoge band met alleen een titel erin duwde het
   aanbod onder de vouw. */
.pagehead--compact { padding-block: calc(var(--header-h) + clamp(1.5rem, 3vw, 2.5rem)) clamp(1.5rem, 3vw, 2.25rem); }
.pagehead--compact h1 { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem); margin-bottom: .2em; }
.pagehead--compact .breadcrumb { margin-bottom: .9rem; }
.pagehead--compact .lead { max-width: 60rem; }
.aanbod { padding-top: clamp(1.25rem, 2.5vw, 2rem); }
/* Op een breed scherm staan de filtergroepen naast elkaar in plaats van onder
   elkaar: drie rijen filters kostten meer hoogte dan de kop zelf. */
@media (min-width: 1100px) {
    .aanbod .filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap); }
    .aanbod .filters__row { grid-template-columns: 1fr; gap: .55rem; padding-block: .6rem; }
    .aanbod .filters__row + .filters__row { border-top: 0; }
}
.aanbod__telling { margin: 1.25rem 0 1.75rem; }
.aanbod__telling:has(+ .aanbod__notitie) { margin-bottom: .4rem; }
.aanbod__notitie { margin: 0 0 1.75rem; max-width: 52rem; }

.breadcrumb { font-size: var(--fs-meta); color: var(--muted); margin-bottom: 1.4rem; letter-spacing: .01em; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--deep); text-decoration: underline; }
.breadcrumb span { margin-inline: .55rem; opacity: .45; }

.gallery {
    display: grid; grid-template-columns: 2.1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: .5rem; aspect-ratio: 16 / 9;
}
.gallery > a { display: block; min-height: 0; overflow: hidden; border-radius: 2px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; transition: opacity .25s var(--ease); }
.gallery a:hover img { opacity: .92; }
.gallery > :first-child { grid-row: span 2; }
/* Met één of twee foto's geen lege vakken: één foto vult het hele vlak, twee
   staan naast elkaar op volle hoogte. */
.gallery > :only-child { grid-column: 1 / -1; }
.gallery > :nth-child(2):last-child { grid-row: span 2; }
@media (max-width: 700px) {
    .gallery { grid-template-columns: 1fr; grid-template-rows: none; aspect-ratio: 4 / 3; }
    .gallery > :nth-child(n+2) { display: none; }
}
.gallery__meer { display: flex; justify-content: flex-end; margin-top: .9rem; }

/* Alle foto's onder de tekst. Vaste verhouding, zodat staande en liggende foto's
   één rustig raster vormen; de lightbox toont ze daarna wel onafgesneden. */
/* Ligging: plaats, regio, zee en luchthaven, zonder adres. Dezelfde opmaak als
   de kenmerken erboven, maar kleiner: dit zijn feiten om te scannen. */
.ligging { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: var(--measure); }
.ligging h2 { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.1rem); margin-bottom: 1.25rem; }
.ligging__feiten {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem var(--gap);
    margin: 0 0 1.5rem; padding-block: 1.4rem; border-block: 1px solid var(--line);
}
.ligging__feiten dt {
    font-size: var(--fs-kicker); letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); font-weight: 600; margin-bottom: .3rem;
}
.ligging__feiten dd { margin: 0; color: var(--deep); }
@media (max-width: 560px) { .ligging__feiten { grid-template-columns: 1fr; } }

.fotogalerij { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.fotogalerij h2 { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.1rem); margin-bottom: 1.25rem; }
.fotogalerij__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem;
}
.fotogalerij__grid a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--cream); }
.fotogalerij__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.fotogalerij__grid a:hover img { transform: scale(1.03); }
/* Op een telefoon altijd twee naast elkaar: met 10rem per tegel past de tweede op
   een 360px-scherm net niet meer, en dan wordt het één lange kolom. */
@media (max-width: 700px) { .fotogalerij__grid { grid-template-columns: repeat(2, 1fr); } }

/* De lightbox: een modale dialog over het hele scherm. Alleen [open] krijgt een
   display, anders zou de gesloten dialog alsnog in beeld staan. Dekkend: bij een
   half doorzichtige achtergrond schemerde de paginatitel door de foto heen.
   De foto krijgt de rij die overblijft naast het bijschrift (minmax(0, 1fr)),
   zodat hij nooit buiten het scherm loopt en de dialog niet gaat scrollen. */
.lightbox {
    inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0; overflow: hidden; overscroll-behavior: contain;
    background: var(--deep-2); color: var(--cream);
}
.lightbox:not([open]) { display: none; }
.lightbox[open] { display: block; }
/* De pagina eronder staat stil zolang de lightbox open is. Op <html>, niet op
   <body>: html heeft overflow-x: hidden, en dan bereikt body's overflow de
   viewport niet. */
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox :focus-visible { outline-color: var(--gold-lt); }
.lightbox__figuur {
    box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: 3.5rem 4.75rem 1.5rem;
    display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: .9rem;
}
.lightbox__foto { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; }
.lightbox__teller { font-size: var(--fs-meta); letter-spacing: .08em; color: var(--sand); font-variant-numeric: tabular-nums; }
.lightbox__knop {
    position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem;
    border: 1px solid var(--line-lt); border-radius: 50%; background: var(--deep-2);
    color: var(--cream); font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer;
    transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.lightbox__knop:hover { background: rgba(246, 242, 232, .12); border-color: var(--sand); }
.lightbox__knop--vorige { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__knop--volgende { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__knop--sluit { top: 1rem; right: 1rem; font-size: 1.1rem; }
.lightbox--enkel .lightbox__knop--vorige, .lightbox--enkel .lightbox__knop--volgende { display: none; }
@media (max-width: 700px) {
    .lightbox__figuur { padding: 4rem .5rem 5.25rem; }
    /* Op een telefoon onderaan, onder de duim; vegen werkt ook. */
    .lightbox__knop--vorige, .lightbox__knop--volgende { top: auto; bottom: 1rem; transform: none; }
    .lightbox__knop--vorige { left: calc(50% - 3.75rem); }
    .lightbox__knop--volgende { right: calc(50% - 3.75rem); }
}

.factsheet {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
    padding-block: 2rem; border-block: 1px solid var(--line); margin-block: 2.75rem;
}
.factsheet dt {
    font-size: var(--fs-kicker); letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); font-weight: 600; margin-bottom: .4rem;
}
.factsheet dd { margin: 0; font-family: var(--font-display); font-size: 1.45rem; color: var(--deep); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .factsheet { grid-template-columns: 1fr 1fr; } }

/* Zonder maximum loopt de tekstkolom in de detaillayout op tot ruim tachtig
   tekens per regel. Dat is een halve regel te veel om comfortabel te springen. */
.prose { font-size: var(--fs-body); max-width: var(--measure); }
.prose .tabel-scroll, .prose .callout, .prose .pros-cons { max-width: none; }
.prose h2 { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.1rem); margin-top: 2.75rem; }
.prose h3 { margin-top: 2rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .55rem; }

.callout {
    background: var(--cream); border-left: 2px solid var(--gold);
    padding: 1.6rem 1.9rem; margin-block: 2.25rem; font-size: var(--fs-small);
}
.callout strong { color: var(--deep); }

.sidebox {
    background: var(--white); border: 1px solid var(--line); border-radius: 3px;
    padding: 1.9rem; box-shadow: var(--shadow); position: sticky; top: 6.5rem;
}
.detail-layout {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr);
    gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
@media (max-width: 900px) { .detail-layout { grid-template-columns: 1fr; } .sidebox { position: static; } }

.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-block: 2.5rem; }
.pros-cons > div { padding: 1.9rem; background: var(--cream); }
.pros-cons > div + div { background: var(--sand-lt); }
.pros-cons h3 {
    font-family: var(--font-body); font-size: var(--fs-kicker);
    letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
    color: var(--deep); margin-bottom: 1rem;
}
.pros-cons ul { list-style: none; padding: 0; margin: 0; font-size: var(--fs-small); }
.pros-cons li { padding: .55rem 0 .55rem 1.6rem; position: relative; color: var(--ink); }
.pros-cons li + li { border-top: 1px solid rgba(20, 48, 47, .09); }
.pros-cons li::before {
    content: ""; position: absolute; left: 0; top: 1.15rem;
    width: 11px; height: 1px; background: var(--sea);
}
.pros-cons > div + div li::before { background: var(--gold); }
@media (max-width: 640px) { .pros-cons { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   16. Beweging en toegankelijkheid
   -------------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0; transform: translateY(16px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

@media print { .header, .stickybar { display: none !important; } }

/* --------------------------------------------------------------------------
   17. Regioscan
   Zonder JS: één lang formulier met alle vragen onder elkaar, plus de zes
   regio's eronder. Met JS: één vraag per scherm en een uitslag op de pagina.
   -------------------------------------------------------------------------- */
.scan { max-width: 44rem; }

.scan__progress { margin-bottom: 2.25rem; }
.scan__bar {
    height: 2px; background: var(--line); position: relative; overflow: hidden;
    margin-bottom: .9rem;
}
.scan__bar i {
    position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gold);
    transition: width .45s var(--ease);
}
.scan__count {
    font-size: var(--fs-kicker); letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); font-weight: 600;
}

.scan__step { margin: 0; padding: 0; border: 0; }
.scan__step legend {
    font-family: var(--font-display); font-weight: 400; color: var(--deep);
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.15;
    letter-spacing: -.018em; margin-bottom: 1.75rem; padding: 0;
}
.scan__hint { font-size: var(--fs-small); color: var(--muted); margin: -1.25rem 0 1.75rem; }

.scan__opts { display: grid; gap: .6rem; }
.scan__opt { position: relative; display: block; }
.scan__opt input {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer;
}
.scan__opt span {
    display: block; padding: 1.05rem 1.3rem;
    background: var(--white); border: 1px solid var(--line-2); border-radius: 3px;
    transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.scan__opt span b { display: block; font-weight: 600; color: var(--deep); }
.scan__opt span em {
    display: block; font-style: normal; font-size: var(--fs-small);
    color: var(--muted); margin-top: .15rem;
}
.scan__opt:hover span { border-color: var(--deep); }
.scan__opt input:checked + span {
    border-color: var(--green); background: var(--green); 
}
.scan__opt input:checked + span b,
.scan__opt input:checked + span em { color: var(--white); }
.scan__opt input:focus-visible + span { outline: 2px solid var(--sea); outline-offset: 3px; }

.scan__nav {
    display: flex; gap: .9rem; align-items: center; justify-content: space-between;
    margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.scan__back {
    background: none; border: 0; padding: .5rem 0; cursor: pointer;
    font: inherit; font-size: var(--fs-small); color: var(--muted);
    border-bottom: 1px solid transparent;
}
.scan__back:hover { color: var(--deep); border-color: var(--line-2); }

/* Uitslag */
.result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.result__media { position: relative; min-height: 320px; }
.result__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.result__body { background: var(--deep); color: rgba(246, 242, 232, .82); padding: clamp(2rem, 4vw, 3.5rem); }
.result__body h2 { color: var(--white); margin-bottom: .35em; }
.result__match {
    font-size: var(--fs-kicker); letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold-lt); font-weight: 600; margin-bottom: 1rem;
}
@media (max-width: 780px) {
    .result { grid-template-columns: 1fr; }
    .result__media { min-height: 220px; }
}

.result__more { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 2px; }
.result__more > div { background: var(--cream); padding: 1.75rem; }
.result__more > div + div { background: var(--sand-lt); }
.result__more h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.result__more p { font-size: var(--fs-small); color: var(--muted); margin: 0; }
.result__label {
    font-size: var(--fs-kicker); letter-spacing: .14em; text-transform: uppercase;
    color: var(--sea-dark); font-weight: 600; margin-bottom: .8rem;
}
@media (max-width: 640px) { .result__more { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   18. Foutpagina
   -------------------------------------------------------------------------- */
.errorpage {
    position: relative; min-height: 88vh; display: grid; align-items: center;
    background: var(--deep); color: rgba(246, 242, 232, .85); overflow: hidden;
}
.errorpage__media { position: absolute; inset: 0; }
.errorpage__media img { width: 100%; height: 100%; object-fit: cover; }
/* De foto is in de nieuwe reeks een stuk lichter geworden, dus het verloop
   alleen van links was niet meer genoeg om het cijfer en de kop te dragen. */
.errorpage__media::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(to right, rgba(6, 30, 29, .95) 0%, rgba(6, 30, 29, .84) 45%,
                                  rgba(6, 30, 29, .5) 100%),
        linear-gradient(rgba(6, 30, 29, .32), rgba(6, 30, 29, .32));
}
.errorpage__inner { position: relative; z-index: 1; padding-block: 8rem 4rem; }
.errorpage__inner > * { max-width: 40rem; }
.errorpage h1 { color: var(--white); }
.errorpage__code {
    font-family: var(--font-display); font-size: clamp(3rem, 2rem + 5vw, 6rem);
    line-height: 1; color: var(--gold); opacity: .55; margin-bottom: .5rem;
}
/* de standaardkicker is te donker voor een donkere foto */
.errorpage .kicker { color: var(--sand); }
.errorpage__lead { font-size: var(--fs-lead); color: rgba(246, 242, 232, .92); max-width: 34rem; }

/* --------------------------------------------------------------------------
   19. Kennis: hub en artikel
   De hub is een index, geen tegelveld. Eén uitgelicht stuk bovenaan, daarna
   per categorie een lijst met regels. Dat schaalt naar dertig artikelen
   zonder dat de pagina uit elkaar valt.
   -------------------------------------------------------------------------- */
.uitgelicht {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: stretch; background: var(--deep); color: rgba(246, 242, 232, .82);
}
.uitgelicht__media { position: relative; min-height: 340px; }
.uitgelicht__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.uitgelicht__body {
    padding: clamp(2rem, 4vw, 3.75rem);
    display: flex; flex-direction: column; justify-content: center;
}
.uitgelicht__body h2 { color: var(--white); font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
.uitgelicht__body p { max-width: 46ch; }
.uitgelicht .arrow-link { margin-top: 1.75rem; align-self: flex-start; }
@media (max-width: 860px) {
    .uitgelicht { grid-template-columns: 1fr; }
    .uitgelicht__media { min-height: 220px; }
}

.kennis-groep + .kennis-groep { margin-top: clamp(3rem, 5vw, 4.5rem); }
.kennis-groep__kop {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
    padding-bottom: .9rem; border-bottom: 2px solid var(--deep);
}
.kennis-groep__kop h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); margin: 0; }
.kennis-groep__kop p { font-size: var(--fs-meta); color: var(--muted); margin: 0; text-align: right; }

/* Eén artikel als regel: titel plus samenvatting links, leestijd rechts. */
.rij {
    display: grid; grid-template-columns: minmax(0, 1fr) 9rem;
    gap: .4rem clamp(1.5rem, 3vw, 3rem); align-items: baseline;
    padding-block: clamp(1.3rem, 2.2vw, 1.8rem);
    border-bottom: 1px solid var(--line);
    text-decoration: none; color: inherit;
    transition: background-color .25s var(--ease), padding-left .25s var(--ease);
}
.rij:hover { background: rgba(193, 147, 79, .06); padding-left: .9rem; }
.rij h3 { font-size: 1.28rem; margin: 0 0 .3rem; }
.rij:hover h3 { color: var(--green); }
.rij p { font-size: var(--fs-small); color: var(--muted); margin: 0; max-width: 68ch; }
.rij__meta {
    font-size: var(--fs-meta); color: var(--muted); text-align: right;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 640px) {
    .rij { grid-template-columns: 1fr; }
    .rij__meta { text-align: left; margin-top: .5rem; }
}

/* Kop van een artikel */
.artikelkop { max-width: 46rem; }
.artikelkop h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.3rem); line-height: 1.05; }
.artikelkop .lead { color: var(--ink); }
.artikelmeta {
    display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
    margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
    font-size: var(--fs-meta); color: var(--muted);
}
.artikelmeta b { font-weight: 600; color: var(--deep); }

/* Inhoudsopgave in de zijkolom */
.toc { font-size: var(--fs-small); }
.toc h2 {
    font-family: var(--font-body); font-size: var(--fs-kicker);
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
    font-weight: 600; margin-bottom: 1rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; border-top: 1px solid var(--line); }
.toc a {
    display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem;
    padding: .7rem 0; text-decoration: none; color: var(--ink);
}
.toc a::before { content: counter(toc); color: var(--gold); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--green); }

/* Tabellen in lopende tekst */
.tabel-scroll { overflow-x: auto; margin-block: 2.25rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.prose th {
    text-align: left; font-weight: 600; color: var(--deep);
    font-size: var(--fs-kicker); letter-spacing: .14em; text-transform: uppercase;
    padding: .7rem 1.2rem .7rem 0; border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.prose td { padding: .8rem 1.2rem .8rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th:last-child, .prose td:last-child {
    text-align: right; padding-right: 0; font-variant-numeric: tabular-nums;
}
/* Rechts uitlijnen is voor bedragen. Zodra er lopende tekst in de laatste
   kolom staat, leest dat als een verkeerd uitgelijnde brij. */
.prose .tabel--tekst th:last-child,
.prose .tabel--tekst td:last-child { text-align: left; padding-right: 1.2rem; }
.prose .tabel--tekst th:first-child,
.prose .tabel--tekst td:first-child { width: 30%; }
@media (max-width: 600px) {
    .prose .tabel--tekst th:first-child,
    .prose .tabel--tekst td:first-child { width: auto; }
}

.prose tfoot td {
    font-weight: 600; color: var(--deep);
    border-bottom: 0; border-top: 2px solid var(--deep);
}
.prose a { color: var(--green); text-decoration: underline; }

/* Bronnen: hoort er bij dit onderwerp gewoon onder te staan */
.bronnen { font-size: var(--fs-small); }
.bronnen h2 {
    font-family: var(--font-body); font-size: var(--fs-kicker);
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
    font-weight: 600; margin-bottom: 1rem;
}
.bronnen ol { margin: 0; padding-left: 1.3rem; color: var(--muted); }
.bronnen li { margin-bottom: .6rem; }

.verder { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 780px) { .verder { grid-template-columns: 1fr; } }

/* Op een telefoon staat de zijkolom onder het artikel. Een inhoudsopgave
   ná de tekst helpt niemand meer; de knop eronder wel. */
@media (max-width: 900px) {
    .sidebox .toc,
    .sidebox .toc + .rule { display: none; }
}

@media (max-width: 560px) {
    .kennis-groep__kop { display: block; }
    .kennis-groep__kop p { text-align: left; margin-top: .35rem; }
}

/* Leadbeeld boven een artikel. Breed en laag: het is een adempauze tussen kop
   en tekst, geen tweede hero die de aandacht van het lezen afhaalt. */
.artikelbeeld { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.artikelbeeld img {
    width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: 2px;
}
.artikelbeeld figcaption {
    font-size: var(--fs-meta); color: var(--muted); margin-top: .7rem; max-width: 60ch;
}
@media (max-width: 700px) { .artikelbeeld img { aspect-ratio: 16 / 9; } }

/* --------------------------------------------------------------------------
   20. Juridische pagina's
   -------------------------------------------------------------------------- */
.juridisch h2 { font-size: clamp(1.35rem, 1.2rem + .7vw, 1.7rem); margin-top: 2.75rem; }
.juridisch h2:first-child { margin-top: 0; }
.juridisch ul { padding-left: 1.1rem; }
.juridisch li { margin-bottom: .5rem; }

/* Onderling doorklikken zonder terug naar de footer te hoeven */
.jur-nav { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; font-size: var(--fs-small); }
.jur-nav a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.jur-nav a:hover { color: var(--deep); border-color: var(--gold); }

/* --------------------------------------------------------------------------
   17. Alleen in het thema — dingen die de statische ontwerpversie niet had
   -------------------------------------------------------------------------- */

/* Site-brede melding. Staat in de normale flow bovenaan de pagina. De header is
   `position: fixed`, dus zonder ruimte erboven zou de melding eronder verdwijnen:
   vandaar de padding-top ter grootte van de header. Die hoogte staat één keer in
   --header-h hierboven, zodat hij niet uit de pas kan lopen met de header zelf.
   Varianten komen uit theme.json → notice.variants. */
.site-notice {
    position: relative; z-index: 90;
    padding-top: var(--header-h);
    background: var(--green); color: var(--cream);
    font-size: var(--fs-small);
}
.site-notice__inner {
    display: flex; align-items: center; gap: 1rem;
    padding-block: .8rem;
}
.site-notice__text { flex: 1; }
.site-notice__cta {
    color: var(--cream); text-decoration: underline;
    text-underline-offset: .2em; white-space: nowrap;
}
.site-notice__cta:hover { color: var(--white); }
.site-notice__close {
    flex: none; background: none; border: 0; cursor: pointer;
    color: inherit; font-size: 1.4rem; line-height: 1; padding: 0 .25rem;
    opacity: .7; transition: opacity .2s var(--ease);
}
.site-notice__close:hover { opacity: 1; }
.site-notice--warning { background: var(--gold); color: var(--deep-2); }
.site-notice--warning .site-notice__cta { color: var(--deep-2); }
.site-notice--nieuws { background: var(--sand); color: var(--deep); }
.site-notice--nieuws .site-notice__cta { color: var(--deep); }

/* Menu-items met kinderen. Het ontwerp kent geen uitklapmenu, dus een kind komt
   ingesprongen achter zijn ouder te staan — op mobiel is dat een echte inspringing,
   op desktop alleen wat kleiner. */
.nav .nav__child { font-size: .88rem; opacity: .8; }
@media (max-width: 960px) {
    .header__nav .nav__child { padding-left: 1.25rem; font-size: 1.1rem; }
}

.kicker--center { justify-content: center; text-align: center; }

/* Regioscan · zonder JavaScript staan alle vragen onder elkaar; met JavaScript
   toont hij er één en verschijnt de voortgangsbalk. */
.scan__step { border: 0; padding: 0; margin: 0 0 2rem; }
.scan__step legend { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--deep); margin-bottom: .5rem; }
.scan__step--vraagt .options { animation: scan-tik .4s ease; }
@keyframes scan-tik { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.scan__progress { margin-bottom: 2rem; }
.scan__bar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin-bottom: .6rem; }
.scan__bar span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .35s var(--ease); }
.scan__nav { display: flex; gap: .8rem; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
    .scan__bar span { transition: none; }
    .scan__step--vraagt .options { animation: none; }
}

/* Formuliermeldingen zonder JavaScript. De endpoint stuurt na een POST terug met
   ?verzonden=1 of ?fouten=1; die parameters staan buiten de cache-allowlist, dus
   de pagina rendert vers en deze melding klopt. */
.form-melding {
    padding: 1rem 1.25rem; margin-bottom: 1.75rem;
    border-left: 3px solid; border-radius: 2px; font-size: var(--fs-small);
}
.form-melding--ok { background: rgba(23, 75, 69, .08); border-color: var(--green); color: var(--deep); }
.form-melding--fout { background: rgba(193, 147, 79, .12); border-color: var(--gold); color: var(--deep); }

/* Tekstlogo: alleen in beeld als de eigenaar in de website-instellingen voor een
   woordmerk kiest in plaats van een afbeelding. */
.logo__woordmerk {
    font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.025em;
    color: var(--white); white-space: nowrap;
}
.is-stuck .logo__woordmerk, .header--solid .logo__woordmerk { color: var(--deep); }
.footer__brand .logo__woordmerk { color: var(--white); }

/* De juridische teksten komen uit één rich-text-veld, en het richText-profiel van
   de sanitizer laat geen <div> door. De .tabel-scroll-wrapper uit het ontwerp is
   daarom weg; op smalle schermen laten we de tabel zelf scrollen. */
@media (max-width: 720px) {
    .prose table { display: block; overflow-x: auto; max-width: 100%; }
}

/* Om dezelfde reden is div.callout een blockquote geworden. */
blockquote.callout { margin-inline: 0; font-style: normal; }
blockquote.callout p:last-child { margin-bottom: 0; }