@font-face{
    font-family:'Jost';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url(fonts/jost-400.ttf) format('truetype');
  }
  @font-face{
    font-family:'Jost';
    font-style:normal;
    font-weight:500;
    font-display:swap;
    src:url(fonts/jost-500.ttf) format('truetype');
  }
  @font-face{
    font-family:'Jost';
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:url(fonts/jost-600.ttf) format('truetype');
  }
  @font-face{
    font-family:'Jost';
    font-style:normal;
    font-weight:700;
    font-display:swap;
    src:url(fonts/jost-700.ttf) format('truetype');
  }
  @font-face{
    font-family:'Libre Caslon Text';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url(fonts/LibreCaslonTextRegular-sub.ttf) format('truetype');
  }
  @font-face{
    font-family:'Libre Caslon Text';
    font-style:normal;
    font-weight:700;
    font-display:swap;
    src:url(fonts/LibreCaslonTextBold-sub.ttf) format('truetype');
  }
  @font-face{
    font-family:'Libre Caslon Text';
    font-style:italic;
    font-weight:400;
    font-display:swap;
    src:url(fonts/LibreCaslonTextItalic-sub.ttf) format('truetype');
  }


  :root{
    color-scheme: light;
    --ink: #101E18;
    --ink-soft: #3a3126;
    --muted: #6b5f4f;
    --paper: #efe4d2;
    --paper-raised: #e6d7ba;
    --paper-deep: #ddccaa;
    --accent: #bb7846;
    --accent-soft: #d6a077;
    --sage: #6f8a70;
    --line: rgba(12,22,19,0.16);
    --on-accent: #1c1712;
    --shadow: 0 18px 40px -20px rgba(12,22,19,0.35);

    /* fixed tokens for the always-dark band + footer — intentionally do NOT
       flip with light/dark mode, so their text never inherits a color meant
       for the opposite surface */
    --band-bg: #b3ac90;
    --band-bg-deep: #9d967a;
    --band-text: #33312c;
    --band-muted: rgba(51,49,44,0.68);
    --band-line: rgba(51,49,44,0.22);

    /* fixed "room paint" tokens — each borrowed section reads as its own
       painted room, using the brand's own Jade / Dry Terra swatches;
       intentionally constant across light/dark mode */
    --terra-bg: #995847;
    --terra-bg-deep: #7d4738;
    --terra-text: #fbf0e0;
    --terra-muted: rgba(251,240,224,0.72);
    --terra-line: rgba(251,240,224,0.24);
    --brass: #8a611c;
    --brass-soft: rgba(138,97,28,0.35);
    --raster: rgba(74,52,14,0.16);

    /* fresco plaster texture — layered tone-on-tone gradients standing in
       for a hand-limewashed wall, laid over the flat --band-bg / --terra-bg
       fills on every painted-room section */
    --fresco-jade:
      radial-gradient(ellipse 55% 40% at 12% 18%, rgba(255,255,255,0.14), transparent 60%),
      radial-gradient(ellipse 45% 35% at 84% 12%, rgba(51,49,44,0.08), transparent 62%),
      radial-gradient(ellipse 65% 45% at 28% 88%, rgba(255,255,255,0.10), transparent 65%),
      radial-gradient(ellipse 50% 40% at 92% 78%, rgba(51,49,44,0.10), transparent 60%),
      radial-gradient(ellipse 40% 30% at 55% 48%, rgba(255,255,255,0.06), transparent 60%),
      linear-gradient(122deg, rgba(255,255,255,0.05) 0%, transparent 24%, rgba(51,49,44,0.05) 50%, transparent 74%, rgba(255,255,255,0.04) 100%);
    --fresco-terra:
      radial-gradient(ellipse 55% 40% at 14% 16%, rgba(251,240,224,0.10), transparent 60%),
      radial-gradient(ellipse 45% 35% at 86% 10%, rgba(0,0,0,0.16), transparent 62%),
      radial-gradient(ellipse 65% 45% at 24% 90%, rgba(0,0,0,0.14), transparent 65%),
      radial-gradient(ellipse 50% 40% at 90% 80%, rgba(251,240,224,0.08), transparent 60%),
      radial-gradient(ellipse 40% 30% at 55% 50%, rgba(0,0,0,0.10), transparent 60%),
      linear-gradient(122deg, rgba(251,240,224,0.06) 0%, transparent 24%, rgba(0,0,0,0.09) 50%, transparent 74%, rgba(251,240,224,0.05) 100%);
  }
  /* De site heeft één vaste, warme kleurstelling. Eerder schakelde de
     achtergrond mee met de donkere modus van het besturingssysteem,
     waardoor secties zonder eigen bandkleur (Voor wie, Over) bijna zwart
     werden terwijl de gekleurde banden licht bleven. Dat gaf een
     inconsistent beeld, dus de lichte kleurstelling staat nu vast. */
  :root[data-theme="dark"]{
    --ink: #f4ecd9;
    --ink-soft: #e4d7bc;
    --muted: #b7a98d;
    --paper: #15120d;
    --paper-raised: #1f1a13;
    --paper-deep: #292118;
    --accent: #dd9d68;
    --accent-soft: #b97c48;
    --sage: #8fab8f;
    --line: rgba(244,236,217,0.16);
    --on-accent: #17130d;
    --shadow: 0 18px 44px -18px rgba(0,0,0,0.6);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:#b3ac90;
    color:var(--ink);
    font-family:'Libre Caslon Text', Georgia, 'Times New Roman', serif;
    font-size:17px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; }
  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding-left:6vw;
    padding-right:6vw;
  }
  h1,h2,h3, .eyebrow, nav, .btn, .wordmark{
    font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
  }
  h1,h2,h3{
    font-weight:500;
    text-wrap:balance;
    margin:0;
    color:var(--ink);
  }
  .eyebrow{
    display:flex;
    align-items:center;
    gap:0.6em;
    text-transform:uppercase;
    letter-spacing:0.22em;
    font-size:0.72rem;
    font-weight:500;
    color:var(--accent);
    margin:0 0 1.1em;
  }
  .eyebrow svg{ flex:none; color:var(--accent); }

  /* ---------- header ---------- */
  header{
    position:absolute;
    top:0; left:0; right:0;
    z-index:20;
    padding-top:2.2rem;
  }
  header::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:268px;
    background:linear-gradient(180deg, rgba(239,228,204,1) 0%, rgba(239,228,204,0.78) 55%, rgba(239,228,204,0) 100%);
    pointer-events:none;
    z-index:-1;
  }
  header .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:1.4rem;
    text-decoration:none;
    flex-shrink:0;
  }
  .brand img{
    width:138px; height:138px;
    border-radius:50%;
    box-shadow:0 6px 24px rgba(0,0,0,0.4);
  }
  .wordmark{
    color:#101E18;
    font-size:1.85rem;
    letter-spacing:0.07em;
    text-transform:uppercase;
    line-height:1.15;
    white-space:nowrap;
  }
  .wordmark span{
    display:block;
    font-size:1.3rem;
    letter-spacing:0.16em;
    color:#55504a;
    font-weight:400;
    margin-top:0.35em;
  }
  .nav-cluster{ display:flex; align-items:center; gap:1.2rem; }
  nav{ display:flex; gap:1.15rem; }
  nav a{
    color:#101E18;
    text-decoration:none;
    font-size:0.75rem;
    letter-spacing:0.07em;
    text-transform:uppercase;
    padding-bottom:0.3em;
    border-bottom:1px solid transparent;
    white-space:nowrap;
    transition:border-color 0.2s ease, opacity 0.2s ease;
  }
  nav a:hover{ border-color:var(--accent-soft); }
  .nav-toggle{ display:none; }

  /* ---------- language switch ---------- */
  .lang-switch{ position:relative; }
  .lang-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px; height:34px;
    border-radius:50%;
    border:1px solid rgba(16,30,24,0.35);
    background:rgba(239,228,204,0.6);
    cursor:pointer;
    padding:0;
    font-size:1.05rem;
    line-height:1;
    transition:border-color 0.2s ease, background 0.2s ease;
  }
  .lang-toggle:hover{ border-color:rgba(16,30,24,0.6); background:rgba(239,228,204,0.85); }
  .lang-menu{
    position:absolute;
    top:calc(100% + 0.6rem);
    right:0;
    display:flex;
    flex-direction:column;
    gap:0.3rem;
    background:rgba(239,228,204,0.97);
    border:1px solid rgba(16,30,24,0.22);
    border-radius:10px;
    padding:0.4rem;
    box-shadow:0 10px 28px rgba(12,22,19,0.22);
    z-index:30;
  }
  .lang-menu[hidden]{ display:none; }
  .lang-option{
    display:flex;
    align-items:center;
    gap:0.55em;
    background:transparent;
    border:none;
    border-radius:6px;
    padding:0.42em 0.7em;
    font-family:'Jost', 'Helvetica Neue', Arial, sans-serif;
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#101E18;
    cursor:pointer;
    white-space:nowrap;
    transition:background 0.15s ease;
  }
  .lang-option:hover{ background:rgba(16,30,24,0.08); }
  .lang-option.active{ background:rgba(16,30,24,0.12); font-weight:500; }
  .lang-flag{ font-size:1.05rem; line-height:1; }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:92vh;
    display:flex;
    align-items:flex-end;
    background:#0C1613;
    overflow:hidden;
  }
  .hero-slide{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity 1.8s ease;
  }
  .hero-slide.is-active{ opacity:1; z-index:1; }
  .hero-slide:nth-of-type(1){ object-position:58% 45%; }
  .hero-slide:nth-of-type(2){ object-position:32% 45%; }
  /* staande foto in een brede banner: iets lager uitsnijden zodat het
     onderste deel van de keuken meeloopt */
  .hero-slide:nth-of-type(3){ object-position:50% 62%; }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    /* de dia's staan op z-index 1; zonder eigen laag viel dit waas erachter
       en deed het niets — vandaar dat de kop op lichte foto's wegviel */
    z-index:2;
    background:
      /* extra verduistering aan de linkerkant: de kop staat daar en moet op
         iedere dia leesbaar blijven, ook op een lichte foto */
      linear-gradient(90deg, rgba(12,22,19,0.40) 0%, rgba(12,22,19,0.24) 36%, rgba(12,22,19,0) 68%),
      linear-gradient(180deg, rgba(12,22,19,0.50) 0%, rgba(12,22,19,0.10) 32%, rgba(12,22,19,0.18) 55%, rgba(12,22,19,0.80) 100%);
  }
  .hero-content{
    position:relative;
    z-index:3;
    width:100%;
    padding-bottom:6.5rem;
    padding-top:14.5rem;
    color:#f7f0df;
  }
  h1.headline{
    font-size:clamp(2.6rem, 6vw, 5rem);
    font-weight:700;
    letter-spacing:-0.01em;
    /* koptekst op dit formaat heeft de ruime regelafstand van de lopende
       tekst niet nodig; strakker gezet leest hij als één blok en houdt de
       foto meer ruimte over */
    line-height:1.1;
    max-width:14ch;
    color:#f9f2e2;
  }
  /* het bovenschrift iets verder van de kop, nu de kop zelf minder lucht
     meebrengt — de onderlinge afstand blijft daarmee rustig */
  .hero-content .eyebrow{ margin-bottom:1.9em; }
  /* zachte grijze waas achter de herotekst, zodat de witte tekst leesbaar
     blijft op elke foto — vervaagt naar rechts en boven/onder, zodat het
     geen zichtbaar blok wordt */
  .hero-content .wrap{ position:relative; }
  .hero-content .wrap > *{ position:relative; z-index:1; }
  .hero-content .wrap::before{
    content:"";
    position:absolute;
    top:-2.6rem; bottom:-2.6rem; left:calc(50% - 50vw); right:0;
    background:linear-gradient(90deg,
      rgba(72,72,74,0.48) 0%,
      rgba(72,72,74,0.46) 34%,
      rgba(72,72,74,0.30) 55%,
      rgba(72,72,74,0.08) 74%,
      rgba(72,72,74,0) 88%);
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 15%, #000 85%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 15%, #000 85%, rgba(0,0,0,0) 100%);
    pointer-events:none;
    z-index:0;
  }
  .hero-content .eyebrow{ color:#f7ecd6; font-weight:700; text-shadow:0 1px 4px rgba(0,0,0,0.55); }
  .hero-content .eyebrow svg{ color:#f7ecd6; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
  .hero-sub{
    max-width:44ch;
    margin:1.6rem 0 0;
    color:#e8dcc2;
    font-size:1.08rem;
    font-weight:700;
  }
  .hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.3rem; }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:0.7em;
    background:var(--accent);
    color:var(--on-accent);
    text-decoration:none;
    padding:0.95em 1.7em;
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    border-radius:2px;
    border:1px solid var(--accent);
    transition:background 0.2s ease, color 0.2s ease;
  }
  .btn:hover{ background:transparent; color:#f9f2e2; }
  .btn-ghost{
    background:var(--terra-bg);
    color:var(--terra-text);
    border:1px solid var(--terra-bg-deep);
  }
  .btn-ghost:hover{ background:var(--terra-bg-deep); color:var(--terra-text); }

  /* the scalloped edge is a masked div, not a flat-filled shape — it carries
     the exact same fresco paint (color + texture) as the Filosofie section
     right below it, so the two read as one continuous surface instead of a
     flat-colored strip sitting on a textured one */
  .scallop{
    position:absolute;
    left:0; right:0; bottom:-1px;
    width:100%;
    height:70px;
    z-index:4;
    /* vlakke bandkleur, zonder frescotextuur: die textuur wordt per element
       geschaald en zou in deze lage strook heel anders uitvallen dan in de
       sectie eronder — precies wat een zichtbare streep oplevert. De sectie
       eronder begint daarom ook vlak en laat de textuur pas daarna opkomen. */
    background-color:var(--band-bg);
    /* één schulp als herhaalbare tegel: bij een smaller scherm passen er
       simpelweg minder in, in plaats van dat ze worden uitgerekt.
       mask-repeat:round schaalt de tegel zo dat er altijd hele schulpen passen */
    -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgOTAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxwYXRoIGQ9Ik0wLDkwIEwwLDYwIEE2MCw2MCAwIDAgMSAxMjAsNjAgTDEyMCw5MCBaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==");
    mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgOTAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxwYXRoIGQ9Ik0wLDkwIEwwLDYwIEE2MCw2MCAwIDAgMSAxMjAsNjAgTDEyMCw5MCBaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==");
    -webkit-mask-size:120px 100%;
    mask-size:120px 100%;
    -webkit-mask-repeat:round no-repeat;
    mask-repeat:round no-repeat;
    -webkit-mask-position:left bottom;
    mask-position:left bottom;
  }

  /* ---------- intro ----------
     Fixed cream/sage "room" like the rest of the palette bands — kept off
     the theme-flipping tokens on purpose, otherwise this section renders
     as a solid black bar for anyone viewing in system dark mode. */
  .intro{
    background-color:var(--band-bg);
    /* bovenste laag: vlakke bandkleur die over ~160px uitdooft, zodat de
       overgang vanaf de schulprand naadloos is en de textuur pas daarna
       zichtbaar wordt */
    background-image:
      linear-gradient(180deg, var(--band-bg) 0, rgba(179,172,144,0) 160px),
      var(--fresco-jade);
    padding:6.5rem 0 5rem;
  }
  .intro .grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:4rem;
    align-items:start;
  }
  .intro .eyebrow{ color:var(--band-text); opacity:0.75; }
  .intro .eyebrow svg{ color:var(--band-text); opacity:0.75; }
  .intro h2{
    font-size:clamp(1.9rem, 3.4vw, 2.6rem);
    max-width:18ch;
    color:var(--band-text);
  }
  .intro p{ color:var(--band-muted); }
  .intro p + p{ margin-top:1.1em; }
  .intro-lead-wrap{
    padding-bottom:3.2rem;
    margin-bottom:3.4rem;
    border-bottom:1px solid var(--band-line);
  }
  .intro-lead{
    max-width:64ch;
    font-size:1.16rem;
    line-height:1.75;
    color:var(--band-text) !important;
  }
  .intro-lead + .intro-lead{ margin-top:1.1em; }

  /* ---------- segmenten: voor wie we ontwerpen ---------- */
  .segments{
    padding:6rem 0 5rem;
  }
  .segments > .wrap > .eyebrow{ margin-bottom:2.8rem; }
  .segment{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:4rem;
    padding:2.6rem 0;
    border-top:1px solid var(--line);
    align-items:start;
  }
  .segment:last-of-type{ border-bottom:1px solid var(--line); }
  .segment-head h3{
    font-size:1.5rem;
    line-height:1.25;
    color:var(--ink);
  }
  .segment-sub{
    font-family:'Jost', sans-serif;
    font-size:0.82rem;
    letter-spacing:0.09em;
    text-transform:uppercase;
    color:var(--accent);
    margin-top:0.8rem;
  }
  .segment-body p{ color:var(--muted); }
  .segment-body p + p{ margin-top:1.1em; }

  /* ---------- over ---------- */
  .about{
    padding:6rem 0 5.5rem;
  }
  .about .grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:4rem;
    align-items:start;
  }
  .about h2{
    font-size:clamp(1.9rem, 3.4vw, 2.6rem);
    max-width:18ch;
    color:var(--ink);
  }
  .about p{ color:var(--muted); }
  .about p + p{ margin-top:1.1em; }

  /* ---------- spotlight ----------
     A fixed Dry Terra "room" — like the rust-toned bookcase wall in the
     reference photos, this is a deliberate painted accent, constant across
     light/dark mode, finished with the same fresco plaster texture as the
     other painted-room sections. */
  .spotlight{
    background-color:var(--terra-bg);
    background-image:var(--fresco-terra);
    color:var(--terra-text);
    padding:5.5rem 0 6rem;
  }
  .spotlight .grid{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:3.5rem;
    align-items:center;
  }
  .spotlight figure{ margin:0; position:relative; }
  .spotlight img{
    /* vaste beeldverhouding: staande en liggende foto's krijgen zo dezelfde
       hoogte, waardoor de carrousel niet meer verspringt bij het wisselen */
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:2px;
    border:1px solid var(--terra-line);
    box-shadow:0 20px 48px -22px rgba(0,0,0,0.5);
  }
  .spotlight-slide:nth-of-type(1) img{ object-position:50% 62%; }
  .spotlight figcaption{
    margin-top:1rem;
    font-family:'Jost', sans-serif;
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--terra-muted);
  }
  .spotlight .eyebrow{ color:var(--terra-text); opacity:0.75; }
  .spotlight .eyebrow svg{ color:var(--terra-text); opacity:0.75; }
  .spotlight blockquote{
    margin:0 0 1.4rem;
    font-style:italic;
    font-size:1.5rem;
    line-height:1.5;
    color:var(--terra-text);
    max-width:20ch;
  }
  .spotlight p{ color:var(--terra-muted); }
  .spotlight .detail-list{
    list-style:none;
    padding:0; margin:1.6rem 0 0;
    display:flex; flex-direction:column; gap:0.6rem;
    font-family:'Jost', sans-serif;
    font-size:0.82rem;
    letter-spacing:0.04em;
    color:var(--terra-muted);
  }
  .spotlight .detail-list li{ display:flex; gap:0.7em; }
  .spotlight .detail-list li::before{
    content:"—";
    color:var(--terra-text);
  }
  .spotlight > .wrap > .eyebrow{ margin-bottom:1.1rem; }
  .spotlight-heading{
    font-size:clamp(1.7rem, 3vw, 2.3rem);
    color:var(--terra-text);
    max-width:20ch;
    margin-bottom:2.6rem;
  }
  .spotlight-slider{ position:relative; }
  .spotlight-viewport{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .spotlight-viewport::-webkit-scrollbar{ display:none; }
  .spotlight-slide{
    flex:0 0 100%;
    width:100%;
    scroll-snap-align:start;
  }
  .spotlight-slide figure{ margin:0; position:relative; }
  .spotlight-slide img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:2px;
    border:1px solid var(--terra-line);
    box-shadow:0 20px 48px -22px rgba(0,0,0,0.5);
  }
  .spotlight-slide figcaption{
    margin-top:1rem;
    font-family:'Jost', sans-serif;
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--terra-muted);
  }
  .spotlight-slide blockquote{
    margin:0 0 1.1rem;
    font-style:italic;
    font-size:1.5rem;
    line-height:1.5;
    color:var(--terra-text);
    max-width:22ch;
  }
  .spotlight-attrib{
    font-family:'Jost', sans-serif;
    font-size:0.8rem;
    letter-spacing:0.05em;
    color:var(--terra-muted);
  }
  .spotlight-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:2.6rem;
  }

  /* ---------- services ----------
     A second fixed "room" in Jade, echoing the sage/olive cabinetry in the
     reference photos — bookends the terra spotlight for the same painted-
     room rhythm the apartment photos show from space to space. */
  .services{
    background-color:var(--band-bg);
    background-image:var(--fresco-jade);
    color:var(--band-text);
    padding:6.5rem 0;
  }
  .services-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:2rem;
    margin-bottom:2.8rem;
    border-bottom:1px solid var(--band-line);
    padding-bottom:1.8rem;
  }
  .services-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); color:var(--band-text); }
  .services-head p{
    max-width:46ch;
    color:var(--band-muted);
    margin:0;
    font-size:0.95rem;
  }
  .service-row{
    display:grid;
    grid-template-columns:3rem 1fr 2fr;
    gap:2rem;
    align-items:center;
    padding:1.7rem 0;
    border-bottom:1px solid var(--band-line);
  }
  .service-row:first-of-type{ border-top:1px solid var(--band-line); }
  .service-num{
    display:flex;
    align-items:center;
    justify-content:center;
    width:3rem; height:3rem;
    border-radius:50%;
    border:1px solid var(--brass-soft);
    /* het ruitpatroon staat ruimer en lichter dan eerst: daarvoor liep het
       cijfer erin weg. Het cijfer zelf is groter en steviger gezet. */
    background:
      repeating-linear-gradient(45deg, var(--raster) 0 1px, transparent 1px 9px),
      repeating-linear-gradient(-45deg, var(--raster) 0 1px, transparent 1px 9px);
    font-family:'Jost', sans-serif;
    font-size:1.05rem;
    font-weight:600;
    color:var(--band-text);
    letter-spacing:0.01em;
  }
  .service-row h3{
    font-size:1.3rem;
    font-weight:500;
    color:var(--band-text);
  }
  .service-row p{
    margin:0;
    color:var(--band-muted);
    font-size:0.98rem;
    max-width:52ch;
  }

  /* ---------- projects ----------
     A fourth fixed "room" in Dry Terra, continuing the Jade / Terra rhythm
     down to the closing banner — same fresco plaster texture as the other
     painted-room sections, constant across light/dark mode. */
  .projects{
    background-color:var(--terra-bg);
    background-image:var(--fresco-terra);
    padding:6.5rem 0;
  }
  .projects-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:2rem;
    margin-bottom:2.6rem;
  }
  .projects-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); color:var(--terra-text); }
  .projects-head p{
    max-width:46ch;
    color:var(--terra-muted);
    margin:0;
    font-size:0.95rem;
  }
  .projects-cta{ margin-top:2.8rem; }
  .carousel{ position:relative; }
  .carousel-viewport{
    display:flex;
    gap:1.4rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding-bottom:0.4rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .carousel-viewport::-webkit-scrollbar{ display:none; }
  .carousel-slide{
    flex:0 0 auto;
    width:calc(50% - 0.7rem);
    aspect-ratio:4/3;
    scroll-snap-align:start;
    margin:0;
    border-radius:2px;
    overflow:hidden;
    box-shadow:var(--shadow);
  }
  .carousel-slide img{ width:100%; height:100%; object-fit:cover; }
  .carousel-slide figcaption{
    position:absolute;
    left:0.9rem; bottom:0.8rem;
    font-family:'Jost', sans-serif;
    font-size:0.72rem;
    letter-spacing:0.06em;
    color:#f7f0df;
    background:rgba(12,22,19,0.55);
    padding:0.4em 0.8em;
    border-radius:2px;
  }
  .carousel-slide{ position:relative; }
  .carousel-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:1.8rem;
  }
  .carousel-btn{
    width:2.8rem; height:2.8rem;
    border-radius:50%;
    border:1px solid var(--terra-line);
    background:transparent;
    color:var(--terra-text);
    font-size:1.2rem;
    line-height:1;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .carousel-btn:hover{ background:var(--terra-text); color:var(--terra-bg); border-color:var(--terra-text); }
  .carousel-arrows{ display:flex; gap:0.8rem; }
  .carousel-dots{ display:flex; gap:0.5rem; }
  .carousel-dot{
    width:0.5rem; height:0.5rem;
    border-radius:50%;
    background:var(--terra-line);
    border:none; padding:0; cursor:pointer;
  }
  .carousel-dot.active{ background:var(--terra-text); }

  /* ---------- contact band ----------
     Closes the Jade / Terra rhythm back on Jade, regardless of the
     viewer's light/dark mode — so it uses the constant --band-* tokens
     instead of the theme-flipping ones. */
  .contact-band{
    background-color:var(--band-bg);
    background-image:var(--fresco-jade);
    color:var(--band-text);
    padding:6rem 0;
    position:relative;
    overflow:hidden;
  }
  .contact-band .grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:3rem;
    align-items:end;
  }
  .contact-band .eyebrow{ color:var(--band-text); }
  .contact-band .eyebrow svg{ color:var(--band-text); }
  .contact-band h2{
    color:var(--band-text);
    font-size:clamp(2rem, 4vw, 3rem);
    max-width:16ch;
  }
  .contact-intro{
    max-width:52ch;
    margin-top:1.4rem;
    color:var(--band-muted);
    font-size:1rem;
  }
  .contact-intro + .contact-intro{ margin-top:1.1em; }
  .contact-band .links{
    display:flex; flex-direction:column; gap:1.1rem;
    font-family:'Jost', sans-serif;
  }
  .contact-band .links a{
    text-decoration:none;
    font-size:1.05rem;
    color:var(--band-text);
    border-bottom:1px solid var(--band-line);
    padding-bottom:0.9rem;
    display:flex;
    justify-content:space-between;
  }
  .contact-band .links a span{ color:var(--band-muted); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; }

  .contact-form-wrap{
    margin-top:3.5rem;
    padding-top:3rem;
    border-top:1px solid var(--band-line);
    position:relative;
    z-index:1;
  }
  .form-label{
    font-family:'Jost', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.14em;
    font-size:0.78rem;
    font-weight:500;
    color:var(--band-text);
    opacity:0.75;
    margin:0 0 1.5rem;
  }
  .contact-form{
    display:flex;
    flex-direction:column;
    gap:1.3rem;
    max-width:640px;
  }
  .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.3rem;
  }
  .contact-form label{
    display:flex;
    flex-direction:column;
    gap:0.55rem;
    font-family:'Jost', sans-serif;
    font-size:0.76rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--band-text);
  }
  .contact-form input,
  .contact-form select,
  .contact-form textarea{
    font-family:'Libre Caslon Text', Georgia, serif;
    font-size:1rem;
    padding:0.85em 1em;
    border:1px solid var(--band-line);
    border-radius:2px;
    background:rgba(255,255,255,0.4);
    color:var(--band-text);
    outline:none;
    transition:border-color 0.2s ease, background 0.2s ease;
  }
  .contact-form select{
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2355504a' stroke-width='1.4'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 1em center;
    padding-right:2.4em;
  }
  .contact-form select:invalid{ color:var(--band-muted); }
  .contact-form input::placeholder,
  .contact-form textarea::placeholder{ color:var(--band-muted); }
  .contact-form input:focus,
  .contact-form select:focus,
  .contact-form textarea:focus{
    border-color:var(--accent);
    background-color:rgba(255,255,255,0.6);
  }
  .contact-form input:invalid:not(:placeholder-shown),
  .contact-form textarea:invalid:not(:placeholder-shown){
    border-color:#a33b2e;
  }
  .contact-form textarea{ resize:vertical; min-height:120px; }
  .form-foot{
    display:flex;
    align-items:center;
    gap:1.4rem;
    flex-wrap:wrap;
    margin-top:0.3rem;
  }
  .contact-form .btn{ flex:none; }
  .contact-form .btn:disabled{ opacity:0.6; cursor:default; }
  .hp-field{ position:absolute; left:-9999px; top:-9999px; }
  .form-status{
    font-family:'Jost', sans-serif;
    font-size:0.82rem;
    letter-spacing:0.03em;
    margin:0;
  }
  .form-status.success{ color:#3f6b3f; }
  .form-status.error{ color:#a33b2e; }

  /* ---------- cookiemelding ----------
     Smalle balk onderaan. Analytics wordt pas geladen ná toestemming
     (Telecommunicatiewet art. 11.7a): weigeren is even eenvoudig en even
     opvallend als accepteren, en de keuze is later te wijzigen via de
     link in de footer. */
  .cookie-bar{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:60;
    background-color:var(--band-bg-deep);
    background-image:var(--fresco-jade);
    border-top:1px solid var(--band-line);
    box-shadow:0 -8px 30px -18px rgba(12,22,19,0.6);
    padding:0.9rem 0;
  }
  .cookie-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.6rem;
    flex-wrap:wrap;
  }
  .cookie-text{
    margin:0;
    color:var(--band-text);
    font-size:0.88rem;
    line-height:1.5;
    max-width:64ch;
  }
  .cookie-actions{
    display:flex;
    align-items:center;
    gap:0.7rem;
    flex-wrap:wrap;
  }
  /* accepteren en weigeren zijn bewust identiek vormgegeven */
  .cookie-btn{
    font-family:'Jost', sans-serif;
    font-size:0.74rem;
    letter-spacing:0.09em;
    text-transform:uppercase;
    padding:0.72em 1.5em;
    border:1px solid var(--band-text);
    border-radius:2px;
    background:transparent;
    color:var(--band-text);
    cursor:pointer;
    transition:background 0.15s ease, color 0.15s ease;
    white-space:nowrap;
  }
  .cookie-btn:hover{ background:var(--band-text); color:var(--paper); }
  .cookie-more{
    font-family:'Jost', sans-serif;
    font-size:0.74rem;
    letter-spacing:0.05em;
    background:none;
    border:none;
    padding:0.72em 0.2em;
    color:var(--band-muted);
    text-decoration:underline;
    text-underline-offset:3px;
    cursor:pointer;
    white-space:nowrap;
  }
  .cookie-more:hover{ color:var(--band-text); }
  .cookie-details{
    margin-top:0.9rem;
    padding-top:0.9rem;
    border-top:1px solid var(--band-line);
  }
  .cookie-details p{
    margin:0;
    color:var(--band-muted);
    font-size:0.82rem;
    line-height:1.6;
    max-width:76ch;
  }
  .cookie-link{
    font-family:'Jost', sans-serif;
    font-size:0.78rem;
    letter-spacing:0.03em;
    background:none;
    border:none;
    padding:0;
    color:var(--band-text);
    opacity:0.72;
    cursor:pointer;
    text-decoration:none;
    border-bottom:1px solid transparent;
  }
  .cookie-link:hover{ opacity:1; }
  .foot-sep{ margin:0 0.5em; opacity:0.5; }

  /* ---------- footer ---------- */
  footer{
    padding:2.6rem 0;
    background-color:var(--band-bg-deep);
    background-image:var(--fresco-jade);
    color:var(--band-muted);
  }
  footer .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    flex-wrap:wrap;
    font-family:'Jost', sans-serif;
    font-size:0.78rem;
    letter-spacing:0.05em;
  }
  footer .foot-brand{ display:flex; align-items:center; gap:0.7rem; color:var(--band-text); }
  footer .foot-brand img{ width:26px; height:26px; border-radius:50%; }
  footer nav{ gap:1.6rem; }
  footer nav a{ color:var(--band-text); opacity:0.72; text-transform:none; font-size:0.78rem; letter-spacing:0.03em; border:none; }
  footer nav a:hover{ opacity:1; }

  @media (max-width: 1150px){
    .brand{ gap:0.9rem; }
    .brand img{ width:62px; height:62px; }
    .wordmark{ font-size:1.35rem; }
    .wordmark span{ font-size:0.66rem; letter-spacing:0.12em; }
    nav{ gap:0.78rem; }
    nav a{ font-size:0.7rem; letter-spacing:0.04em; }
    .nav-cluster{ gap:0.8rem; }
  }

  @media (max-width: 880px){
    header{ padding-top:1.5rem; }
    nav{ display:none; }
    .nav-cluster{ gap:0; }
    .lang-toggle{ width:30px; height:30px; font-size:0.95rem; }
    .brand{ gap:0.9rem; flex-shrink:1; }
    .brand img{ width:84px; height:84px; }
    .wordmark{ font-size:1.5rem; letter-spacing:0.06em; white-space:normal; }
    .wordmark span{ font-size:0.76rem; letter-spacing:0.13em; margin-top:0.4em; }
    .hero-content{ padding-top:10.5rem; padding-bottom:5rem; }
    .intro .grid, .spotlight .grid, .contact-band .grid{
      grid-template-columns:1fr;
      gap:2.2rem;
    }
    .intro h2, .contact-band h2, .about h2{ max-width:none; }
    .segment, .about .grid{
      grid-template-columns:1fr;
      gap:1.4rem;
    }
    .segments{ padding:4.5rem 0 3.5rem; }
    .about{ padding:4.5rem 0 4rem; }
    .intro-lead{ font-size:1.05rem; }
    .intro-lead-wrap{ padding-bottom:2.4rem; margin-bottom:2.6rem; }
    .spotlight-heading{ max-width:none; }
    .service-row{ grid-template-columns:2.7rem 1fr; }
    .service-row p{ grid-column:2 / -1; margin-top:0.4rem; }
    .services-head{ flex-direction:column; align-items:flex-start; gap:1rem; }
    .projects-head{ flex-direction:column; align-items:flex-start; gap:1rem; }
    .form-row{ grid-template-columns:1fr; }
    .contact-form-wrap{ margin-top:2.6rem; padding-top:2.2rem; }
    .carousel-slide{ width:100%; }
    footer .wrap{ justify-content:center; text-align:center; }
  }

  /* ---------- kopbeeld van de losse pagina's ----------
     Compacte variant van de hero: één foto, titel, en dezelfde
     schulprand eronder zodat elke pagina herkenbaar blijft. */
  .page-hero{
    position:relative;
    min-height:52vh;
    display:flex;
    align-items:flex-end;
    background:#0C1613;
    overflow:hidden;
  }
  .page-hero > img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position:50% 45%;
  }
  .page-hero::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg,
      rgba(12,22,19,0.62) 0%,
      rgba(12,22,19,0.22) 34%,
      rgba(12,22,19,0.30) 58%,
      rgba(12,22,19,0.88) 100%);
  }
  .page-hero-content{
    position:relative;
    z-index:2;
    width:100%;
    padding-top:13rem;
    padding-bottom:5.5rem;
    color:#f7f0df;
  }
  .page-hero-content .wrap{ position:relative; }
  .page-hero-content .wrap > *{ position:relative; z-index:1; }
  .page-hero-content .wrap::before{
    content:"";
    position:absolute;
    top:-2.4rem; bottom:-2.4rem; left:calc(50% - 50vw); right:0;
    background:linear-gradient(90deg,
      rgba(72,72,74,0.48) 0%,
      rgba(72,72,74,0.44) 36%,
      rgba(72,72,74,0.26) 58%,
      rgba(72,72,74,0.06) 76%,
      rgba(72,72,74,0) 90%);
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 16%, #000 84%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 16%, #000 84%, rgba(0,0,0,0) 100%);
    pointer-events:none;
    z-index:0;
  }
  .page-hero-content .eyebrow{ margin-bottom:1.7em; color:#f7ecd6; font-weight:700; text-shadow:0 1px 4px rgba(0,0,0,0.55); }
  .page-hero-content .eyebrow svg{ color:#f7ecd6; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
  .page-hero h1{
    font-size:clamp(2.2rem, 4.4vw, 3.6rem);
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1.14;
    max-width:19ch;
    color:#f9f2e2;
    margin-top:0.5rem;
  }
  .page-hero-sub{
    max-width:52ch;
    margin-top:1.3rem;
    color:#e8dcc2;
    font-size:1.05rem;
    font-weight:700;
  }

  .prose{ max-width:68ch; }
  .prose p + p{ margin-top:1.1em; }
  .prose h2{
    font-size:clamp(1.45rem, 2.4vw, 1.85rem);
    color:var(--ink);
    margin-top:2.8rem;
    margin-bottom:1rem;
    max-width:24ch;
  }
  .prose > h2:first-child{ margin-top:0; }
  .about .prose p{ color:var(--muted); }
  /* Zonder kop erboven staat de inleiding alleen. Op Diensten loopt hij
     over de volle breedte, gelijk met de lijn eronder. */
  .services-head.head-solo{ display:block; }
  .services-head.head-solo p{ max-width:none; }
  .projects-head.head-solo{ display:block; }
  .projects-head.head-solo p{ max-width:64ch; }

  .intro-lead-solo{ border-bottom:none; padding-bottom:0; margin-bottom:0; }

  /* ---------- wegwijzers op de homepagina ---------- */
  .signposts{ padding:5.5rem 0 5rem; }
  .signposts .eyebrow{ margin-bottom:2.6rem; }
  .signpost-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2.2rem;
  }
  .signpost{
    display:flex;
    flex-direction:column;
    gap:0.9rem;
    padding-top:1.6rem;
    border-top:1px solid var(--dark-line);
    text-decoration:none;
    color:inherit;
  }
  .signpost h3{ font-size:1.35rem; line-height:1.25; }
  .signpost p{ font-size:0.98rem; margin:0; }
  .signpost .signpost-cue{
    font-family:'Jost', sans-serif;
    font-size:0.75rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--dark-accent);
    margin-top:0.3rem;
  }
  .signpost:hover h3{ color:var(--dark-accent); }
  .signpost:hover .signpost-cue{ color:var(--dark-text); }

  /* ---------- inleiding met foto (homepagina) ---------- */
  .intro-duo{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:3.6rem;
    align-items:stretch;
  }
  .intro-duo-tekst{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  .intro-duo-tekst h2{
    font-size:clamp(1.7rem, 3vw, 2.3rem);
    color:var(--band-text);
    max-width:20ch;
    margin-bottom:1.3rem;
  }
  .intro-duo .intro-lead{ max-width:48ch; }
  .intro-duo .intro-lead + .intro-lead{ margin-top:1.1em; }
  /* de knop wordt naar onderen geduwd en komt zo gelijk met de onderrand
     van de foto te staan */
  .intro-duo-knop{ margin-top:auto; align-self:flex-start; }
  /* de foto volgt de hoogte van de tekstkolom, zodat beide kolommen
     onderaan gelijk eindigen — ook als de tekst in het Engels langer of
     korter uitvalt */
  .intro-foto{ margin:0; display:flex; }
  .intro-foto img{
    width:100%;
    height:100%;
    min-height:100%;
    object-fit:cover;
    display:block;
    border-radius:2px;
    border:1px solid var(--band-line);
    box-shadow:0 26px 50px -30px rgba(12,22,19,0.75);
  }

  /* ---------- donkere band ----------
     Dennezwart uit de huisstijl met dezelfde frescotextuur als de andere
     vlakken. Dit is de donkere kleur van de site: overal waar eerder een
     hard zwart stond, staat nu deze. */
  .band-dark{
    --dark-bg:#0C1613;
    --dark-text:#FDE7D6;
    --dark-muted:rgba(253,231,214,0.70);
    --dark-line:rgba(253,231,214,0.20);
    --dark-accent:#C08D71;
    background-color:var(--dark-bg);
    background-image:
      radial-gradient(ellipse 55% 40% at 12% 18%, rgba(253,231,214,0.08), transparent 62%),
      radial-gradient(ellipse 45% 35% at 84% 12%, rgba(0,0,0,0.30), transparent 62%),
      radial-gradient(ellipse 65% 45% at 28% 88%, rgba(192,141,113,0.10), transparent 65%),
      radial-gradient(ellipse 50% 40% at 92% 78%, rgba(0,0,0,0.26), transparent 60%),
      linear-gradient(122deg, rgba(253,231,214,0.05) 0%, transparent 44%, rgba(0,0,0,0.20) 100%);
    color:var(--dark-text);
  }
  .band-dark h2, .band-dark h3{ color:var(--dark-text); }
  .band-dark p{ color:var(--dark-muted); }
  .band-dark .eyebrow{ color:var(--dark-accent); opacity:1; }
  .band-dark .eyebrow svg{ color:var(--dark-accent); }
  .band-dark .btn{ background:var(--dark-accent); color:#0C1613; border-color:var(--dark-accent); }
  .band-dark .btn:hover{ background:transparent; color:var(--dark-text); }

  /* ---------- afsluitende oproep ---------- */
  .cta-band{ padding:4.6rem 0; }
  .cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2.6rem;
    flex-wrap:wrap;
  }
  /* de afsluitende kop loopt door op één regel, zodat hij netter
     uitlijnt met de zin eronder */
  .cta-band h2{ font-size:clamp(1.7rem, 3vw, 2.3rem); max-width:none; white-space:nowrap; }
  .cta-band p{ max-width:46ch; margin-top:0.9rem; }

  /* ---------- projectenraster ---------- */
  .gallery{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.6rem;
    margin-top:2.8rem;
  }
  .gallery figure{ margin:0; }
  .gallery img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:2px;
    border:1px solid var(--terra-line);
    display:block;
  }
  .gallery figcaption{
    font-family:'Jost', sans-serif;
    font-size:0.76rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--terra-muted);
    margin-top:0.7rem;
  }

  /* De Aanpak: bredere tekstkolom naast de foto, en de vervolgtekst
     eronder op gewone leesbreedte. */
  .duo-aanpak{ grid-template-columns:1fr 0.82fr; align-items:stretch; }
  /* de foto neemt exact de hoogte van de tekstkolom over: het beeld staat
     absoluut in de figuur, zodat de eigen beeldhoogte de rij niet oprekt
     en beide kolommen boven en onder op dezelfde lijn eindigen */
  .duo-aanpak .intro-duo-tekst > p:last-child{ margin-bottom:0; }
  .duo-aanpak .intro-foto{ position:relative; display:block; height:100%; min-height:0; }
  .duo-aanpak .intro-foto img{
    position:absolute; inset:0;
    width:100%; height:100%; min-height:0;
    object-fit:cover; object-position:50% 45%;
  }
  /* de titel op De Aanpak loopt door in plaats van af te breken */
  .duo-aanpak h2{ max-width:none; white-space:nowrap; }
  @media (max-width: 1050px){ .duo-aanpak h2{ white-space:normal; } }
  .prose-vervolg{ margin-top:2.6rem; }
  .prose-vervolg .intro-duo-knop{ display:inline-flex; margin-top:2.2rem; }
  .segments-kop{
    font-size:clamp(1.6rem, 2.8vw, 2.1rem);
    color:var(--ink);
    /* de titel loopt door in plaats van af te breken */
    max-width:none;
    white-space:nowrap;
    margin-bottom:2.4rem;
  }

  /* ---------- aansluiting schulprand op de sectie eronder ----------
     De schulprand neemt de kleur van de sectie die volgt, en die sectie
     begint vlak zodat de frescotextuur pas daaronder opkomt. Zo is er
     op de naad geen kleur- of textuurverschil. */
  .scallop-jade{ background-color:var(--band-bg); background-image:none; }
  .scallop-terra{ background-color:var(--terra-bg); background-image:none; }
  .scallop-paper{ background-color:var(--paper); background-image:none; }

  .after-hero-jade{
    background-image:
      linear-gradient(180deg, var(--band-bg) 0, rgba(179,172,144,0) 160px),
      var(--fresco-jade) !important;
  }
  .after-hero-terra{
    background-image:
      linear-gradient(180deg, var(--terra-bg) 0, rgba(153,88,71,0) 160px),
      var(--fresco-terra) !important;
  }
  .after-hero-dark{
    background-image:
      linear-gradient(180deg, var(--dark-bg) 0, rgba(12,22,19,0) 160px),
      radial-gradient(ellipse 55% 40% at 12% 18%, rgba(253,231,214,0.08), transparent 62%),
      radial-gradient(ellipse 65% 45% at 28% 88%, rgba(192,141,113,0.10), transparent 65%),
      linear-gradient(122deg, rgba(253,231,214,0.05) 0%, transparent 44%, rgba(0,0,0,0.20) 100%) !important;
  }

  /* ---------- menuknop voor kleine schermen ---------- */
  .menu-toggle{
    display:none;
    width:38px; height:38px;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.5);
    border:1px solid rgba(16,30,24,0.25);
    border-radius:50%;
    cursor:pointer;
    padding:0;
  }
  .menu-toggle span{
    display:block;
    position:relative;
    width:15px; height:1.5px;
    background:#101E18;
  }
  .menu-toggle span::before,
  .menu-toggle span::after{
    content:"";
    position:absolute; left:0;
    width:15px; height:1.5px;
    background:#101E18;
  }
  .menu-toggle span::before{ top:-5px; }
  .menu-toggle span::after{ top:5px; }
  .menu-toggle[aria-expanded="true"] span{ background:transparent; }
  .menu-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

  nav a.is-current{ border-bottom-color:var(--accent); color:#101E18; }

  @media (max-width: 880px){
    .menu-toggle{ display:flex; }
    /* de menuknop kost ruimte in de kop: logo en woordmerk iets kleiner,
       zodat 'Roxy Jones Design' op twee regels blijft passen */
    .brand img{ width:72px; height:72px; }
    .wordmark{ font-size:1.35rem; }
    /* het menu klapt uit onder de header in plaats van verborgen te zijn */
    header nav{
      display:none;
      position:absolute;
      top:100%; left:0; right:0;
      flex-direction:column;
      gap:0;
      background:rgba(243,234,214,0.98);
      border-top:1px solid rgba(16,30,24,0.12);
      border-bottom:1px solid rgba(16,30,24,0.12);
      box-shadow:0 18px 40px -24px rgba(12,22,19,0.6);
      padding:0.4rem 0;
    }
    header nav.is-open{ display:flex; }
    header nav a{
      padding:0.95rem 6vw;
      font-size:0.82rem;
      letter-spacing:0.09em;
      border-bottom:1px solid rgba(16,30,24,0.08);
    }
    header nav a:last-child{ border-bottom:none; }
    header nav a.is-current{ color:var(--accent); }
    header .wrap{ position:relative; }
    .page-hero-content{ padding-top:11rem; padding-bottom:4rem; }
    .page-hero{ min-height:46vh; }
    .signpost-grid{ grid-template-columns:1fr; gap:1.6rem; }
    .gallery{ grid-template-columns:1fr 1fr; gap:1rem; }
    .cta-inner{ flex-direction:column; align-items:flex-start; gap:1.6rem; }
    .intro-duo{ grid-template-columns:1fr; gap:2.2rem; }
    .duo-aanpak{ grid-template-columns:1fr; }
    .segments-kop, .cta-band h2{ white-space:normal; }
    .duo-aanpak .intro-foto{ position:static; height:auto; }
    .duo-aanpak .intro-foto img{ position:static; aspect-ratio:3/4; height:auto; }
    /* gestapeld: vaste staande verhouding, anders wordt de foto een streep */
    .intro-foto img{ aspect-ratio:3/4; height:auto; min-height:0; }
    .cta-band h2{ max-width:none; }
  }
  @media (max-width: 520px){
    .gallery{ grid-template-columns:1fr; }
  }


  /* Voor wie: tekst en beeld naast elkaar, om en om van kant gewisseld.
     De foto volgt de hoogte van de tekst, zodat beide op één lijn staan. */
  .vw-duo{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:4rem;
    align-items:stretch;
    padding:3.4rem 0;
  }
  .vw-duo .vw-tekst{ display:flex; flex-direction:column; justify-content:center; }
  .vw-duo .vw-tekst h3{ font-size:1.5rem; line-height:1.25; color:var(--ink); }
  .vw-duo .vw-tekst .segment-sub{ margin-bottom:1.4rem; }
  .vw-duo .vw-tekst p{ color:var(--muted); }
  .vw-duo .vw-tekst p + p{ margin-top:1.1em; }
  .vw-duo .vw-tekst > p:last-child{ margin-bottom:0; }
  .vw-duo .vw-foto{ margin:0; position:relative; display:block; min-height:340px; }
  .vw-duo .vw-foto img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; display:block;
    border-radius:2px;
    border:1px solid var(--line);
  }
  .vw-omgekeerd .vw-tekst{ order:2; }
  .vw-omgekeerd .vw-foto{ order:1; }

  @media (max-width: 860px){
    .vw-duo{ grid-template-columns:1fr; gap:1.8rem; }
    .vw-omgekeerd .vw-tekst, .vw-omgekeerd .vw-foto{ order:0; }
    .vw-duo .vw-foto{ position:static; min-height:0; }
    .vw-duo .vw-foto img{ position:static; aspect-ratio:4/3; }
  }

  /* Diensten volgt dezelfde opzet als Voor wie */
  .service-blok{ border-top:1px solid var(--line); }
  .service-blok:last-of-type{ border-bottom:1px solid var(--line); }
  .service-blok .service-num{ margin-bottom:1.1rem; }
  .service-blok .vw-tekst h3{ font-size:1.4rem; font-weight:500; margin-bottom:0.9rem; }
  .service-blok .vw-tekst p{ margin:0; color:var(--muted); max-width:52ch; }

  /* Uitgelicht: ruimere foto en de titel op één regel */
  .spotlight .grid{ grid-template-columns:1.38fr 0.62fr; gap:3rem; }
  .spotlight-heading{ max-width:none; white-space:nowrap; }
  @media (max-width: 1050px){
    .spotlight-heading{ white-space:normal; }
  }

  /* ================= vaste kleurvolgorde =================
     Boven aan iedere pagina begint het zand — dezelfde kleur als de
     schulprand erboven. Daaronder wisselen zand en terracotta elkaar af. */
  .vlak{ position:relative; }

  /* 1. zand */
  .vlak-zand{
    --vlak-bg:#b3ac90; --vlak-tekst:#33312c;
    --ink:#33312c; --muted:#423F39; --line:rgba(51,49,44,0.22);
    --band-bg:#b3ac90; --band-bg-deep:#9d967a;
    --band-text:#33312c; --band-muted:#423F39; --band-line:rgba(51,49,44,0.22);
    --terra-bg:#b3ac90; --terra-bg-deep:#9d967a;
    --terra-text:#33312c; --terra-muted:#423F39; --terra-line:rgba(51,49,44,0.22);
    --dark-bg:#b3ac90; --dark-text:#33312c; --dark-muted:#423F39;
    --dark-line:rgba(51,49,44,0.22); --dark-accent:#4a340e;
    --brass:#4a340e; --brass-soft:rgba(74,52,14,0.40);
    --raster:rgba(74,52,14,0.16);
    background-color:#b3ac90;
    background-image:var(--fresco-jade);
    color:#33312c;
  }

  /* 2. rood */
  .vlak-rood{
    --vlak-bg:#995847; --vlak-tekst:#fbf0e0;
    --ink:#fbf0e0; --muted:rgba(251,240,224,0.94); --line:rgba(251,240,224,0.24);
    --band-bg:#995847; --band-bg-deep:#7d4738;
    --band-text:#fbf0e0; --band-muted:rgba(251,240,224,0.94); --band-line:rgba(251,240,224,0.24);
    --terra-bg:#995847; --terra-bg-deep:#7d4738;
    --terra-text:#fbf0e0; --terra-muted:rgba(251,240,224,0.94); --terra-line:rgba(251,240,224,0.24);
    --dark-bg:#995847; --dark-text:#fbf0e0; --dark-muted:rgba(251,240,224,0.94);
    --dark-line:rgba(251,240,224,0.24); --dark-accent:#FDE7D6;
    --brass:#FDE7D6; --brass-soft:rgba(253,231,214,0.45);
    --raster:rgba(253,231,214,0.20);
    background-color:#995847;
    background-image:var(--fresco-terra);
    color:#fbf0e0;
  }

  /* de eerste sectie van een pagina begint vlak: de schulprand erboven
     heeft geen textuur, dus die komt pas over de eerste 160 pixels op */
  .vlak-eerst.vlak-zand{
    background-image:
      linear-gradient(180deg, #b3ac90 0, rgba(179,172,144,0) 160px),
      var(--fresco-jade);
  }

  /* het bovenschrift en het kleine kapitaal-labeltje: per vlak een tint
     die op die ondergrond goed leesbaar blijft */
  .vlak-zand .eyebrow, .vlak-zand .eyebrow svg,
  .vlak-zand p.segment-sub{ color:#4a340e; opacity:1; }
  .vlak-rood .eyebrow, .vlak-rood .eyebrow svg,
  .vlak-rood p.segment-sub{ color:#FDE7D6; opacity:0.92; }

  /* knoppen houden op elk vlak dezelfde koperen vulling */
  .vlak .btn{ background:#C08D71; color:#0C1613; border-color:#C08D71; }
  .vlak .btn:hover{ background:transparent; color:var(--vlak-tekst); border-color:currentColor; }
  .vlak .btn-ghost{ background:transparent; color:var(--vlak-tekst); border:1px solid currentColor; }
  .vlak .btn-ghost:hover{ background:var(--vlak-tekst); color:var(--vlak-bg); }