:root {
  --ink: #0F2D2E;      /* donkergroen, hoofdtekst/merk */
  --accent: #E2821B;   /* oranje accent */
}

/* ===== Searchtrends · responsive / mobiel =====
   Helperklassen die de inline-styles op smalle schermen overschrijven.
   Inline styles winnen van class-selectors, daarom !important binnen de
   media queries. Gedeeld door index.html, blog.html en werkgebied.html. */

/* Koppen netjes laten teruglopen: eerste regel vol, kortere tweede regel (geen losse
   korte woorden). 'pretty' i.p.v. 'balance' zodat de regels niet even lang worden.
   Oudere browsers vallen terug op normale (greedy) terugloop — ook lange+korte regel. */
h1, h2, h3 { text-wrap: pretty; }

/* Navlinks gelijk uitlijnen: een onzichtbare onderstreep van dezelfde dikte als de
   actieve (oranje) Blog-link, zodat alle links even hoog zijn en op één lijn staan. */
.r-navlink { font-size: 15px; font-weight: 600; color: #3A4A47; white-space: nowrap; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: color .2s ease, border-color .2s ease; }
.r-navlink.nav-active { color: var(--ink) !important; border-bottom-color: var(--accent) !important; font-weight: 700 !important; }

/* Wordmark in het logo: iets omhoog en naar links, zodat 'searchtrends' op de logo-cirkel begint. */

/* Anker-secties stoppen onder de zwevende navbar i.p.v. erachter. */
section[id] { scroll-margin-top: 100px; }

/* Fade-in reveal voor de "Onze aanpak"-sectie (alleen op de homepage aanwezig). */
reveal-on-scroll.reveal-ready [data-reveal] { opacity: 0; transform: translateY(42px) scale(0.975); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; }
reveal-on-scroll.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Hero-rotator: respecteer prefers-reduced-motion (toon eerste slide, geen beweging). */
@media (prefers-reduced-motion: reduce) {
  [data-hero-layer] { opacity: 0 !important; transform: none !important; }
  [data-hero-layer="0"] { opacity: 1 !important; }
  [data-hero-dot] { background: #CFC8BA !important; }
  [data-hero-dot="0"] { background: var(--accent) !important; }
}

/* Layoutklassen — desktopbasis (alleen op index gebruikt). */
/* Uniforme kop-typografie in de hele site: dezelfde regelafstand (1.2) en
   letterspatiëring (0.02em) als de hero-koppen. !important overschrijft de per-kop
   ingestelde inline-stijlen (die van oorsprong veel strakker waren). */
h1, h2, h3, .card-h, .foot-h, .article-body h2, .article-body h3 {
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
}
/* Eerste en laatste hero = merk/searchtrends-slides (géén .is-story, class gezet door
   hero-rotator.js): grotere kop. Succesverhaal-slides houden hun eigen (kleinere) font. */
[data-hero-kop]:not(.is-story) { font-size: clamp(38px, 5.4vw, 74px) !important; }
/* Verticale centrering van de "searchtrends"-wordmark t.o.v. het logo-embleem
   (header + footer). Eén plek om te tweaken: pas de translateY-waarde aan
   (negatiever = hoger, positiever = lager). */
.logo-wordmark { margin-left: -6px; }
/* Alle grote sectiekoppen (homepage + werkgebied) delen één class -> zelfde grootte.
   Regelafstand/letterspatiëring komen van de globale h1/h2/h3-regel. Pas hier de
   font-size aan om alle sectiekoppen tegelijk groter/kleiner te maken. */
.section-h { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: clamp(34px, 4.4vw, 62px); color: var(--ink); }
.review-scroller { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }

/* Herbruikbare componentklassen (voorheen herhaalde inline-styles). */
.foot-h { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #9AA6A2; font-weight: 700; margin-bottom: 16px; }
.contact-row { display: flex; align-items: center; gap: 14px; padding: 15px 20px; background: #fff; border: 1px solid #E7E0D3; border-radius: 13px; }
.loc-select { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #E7E0D3; border-radius: 10px; font-size: 15px; font-family: inherit; font-weight: 600; color: var(--ink); background: #FAF8F4; }
.blog-card { display: block; background: #fff; border: 1px solid #EFE9DF; border-radius: 18px; overflow: hidden; }
.blog-card-lift { box-shadow: 0 12px 28px -16px rgba(15,45,46,0.18); }
.tag { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #1E4D4A; background: #E6F0EF; padding: 5px 10px; border-radius: 6px; }
.card-h { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 14px 0 10px; }
.foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.foot-link { color: #9AA6A2; text-decoration: underline; text-underline-offset: 2px; }
.eyebrow { display: inline-flex; align-items: center; gap: 14px; padding: 10px 18px; background: #E6F0EF; border: 1.5px solid #D3E4DF; border-radius: 6px; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #1E4D4A; }

/* Honeypot-veld in het contactformulier: off-screen (niet display:none — bots vullen het). */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Artikel-typografie (blog-detailpagina's). Herbruikbaar. */
.article-body { font-size: 20px; line-height: 1.8; color: #2A3A37; }
.article-body > *:first-child { margin-top: 0; }
.article-body > p:first-of-type { font-size: 23px; line-height: 1.6; color: #1E2E2B; }
.article-body h2 { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: clamp(27px, 3.05vw, 36px); line-height: 1.18; letter-spacing: -0.02em; color: var(--ink); margin: 76px 0 16px; }
/* Klein oranje accentstreepje boven elke kop — rust en structuur in lange artikelen. */
.article-body h2::before { content: ""; display: block; width: 46px; height: 4px; border-radius: 3px; background: var(--accent); margin-bottom: 18px; }
.article-body h3 { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.25; color: var(--ink); margin: 44px 0 12px; }
.article-body p { margin: 0 0 26px; }
.article-body ul, .article-body ol { margin: 20px 0 26px; padding-left: 22px; }
.article-body li { margin: 0 0 12px; }
.article-body li::marker { color: var(--accent); }
/* Vette labels (in lijsten én aan het begin van een alinea) krijgen de oranje accentkleur;
   de gewone tekst eromheen blijft donker. */
.article-body strong { color: #C2691A; font-weight: 700; }
.article-body em { font-style: italic; }
.article-body a { color: #B5670F; text-decoration: underline; text-underline-offset: 2px; }

/* Categorie-filter op de blog-index (klikbare chips). */
.blog-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.blog-chip { font: 600 14px 'Hanken Grotesk', system-ui, sans-serif; color: #3A4A47; background: #fff; border: 1.5px solid #E2DCD0; border-radius: 100px; padding: 9px 17px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.blog-chip:hover { border-color: var(--accent); color: var(--ink); }
.blog-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Tablet en kleiner ---------- */
@media (max-width: 860px) {
  /* Navigatie: verberg de tekstlinks; logo + CTA blijven staan. */
  .r-navlink { display: none !important; }
  .r-navbar { gap: 12px !important; padding: 9px 9px 9px 18px !important; }

  /* Kolomrasters stapelen. */
  .r-2col { grid-template-columns: 1fr !important; }
  .r-3col { grid-template-columns: 1fr 1fr !important; }
  .r-4col { grid-template-columns: 1fr 1fr !important; }
  .r-footer { grid-template-columns: 1fr !important; gap: 34px !important; }

  /* Minder zijpadding zodat content niet wordt platgedrukt. */
  .r-pad { padding-left: 24px !important; padding-right: 24px !important; }

  /* Grote secties: minder verticale ruimte (pagina blijft korter). */
  .r-secpad { padding-top: 60px !important; padding-bottom: 60px !important; }

  /* Contactblok: op smal scherm staat de tekst over de hele breedte — de horizontale
     scrim dekt dan rechts niets meer. Volle, licht verlopende waas voor leesbaarheid. */
  .contact-scrim { background: linear-gradient(180deg, rgba(242,241,236,0.97) 0%, rgba(242,241,236,0.93) 55%, rgba(242,241,236,0.82) 100%) !important; }

  /* Hero op mobiel: immersieve full-bleed foto met de tekst ONDERIN over een donkere
     gradient. Zo blijft de persoon (staat links in elke foto) in beeld i.p.v. weggewassen
     te worden door een volle waas. De hero-grootte (min-height) blijft ongewijzigd. */
  .hero-textwrap { position: absolute !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding: 0 24px 84px !important; }
  .r-hero { text-align: left !important; margin: 0 !important; max-width: 100% !important; padding: 0 !important; }
  .r-hero h1, .r-hero p { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; max-width: 100% !important; }
  /* Foto: subject (staat links in elke foto) gecentreerd in de smalle mobiele uitsnede
     houden — per slide fijngesteld zodat niemand half in beeld valt. Geen spiegelen nodig. */
  [data-hero-layer="0"] { background-position: 14% 18% !important; }
  [data-hero-layer="1"] { background-position: 14% 42% !important; }
  [data-hero-layer="2"] { background-position: 14% 32% !important; }
  [data-hero-layer="3"] { background-position: 14% 22% !important; }
  [data-hero-layer="4"] { background-position: 22% 50% !important; }
  /* Gerichte gradient onderaan i.p.v. volle waas: bovenste ~60% van de foto blijft vrij. */
  .hero-scrim { background: linear-gradient(0deg, rgba(16,45,46,0.94) 0%, rgba(16,45,46,0.82) 22%, rgba(16,45,46,0.30) 44%, rgba(16,45,46,0) 62%) !important; }
  .r-hero h1 { color: #fff !important; line-height: 1.2 !important; letter-spacing: 0.02em !important; }
  .r-hero p { color: #E8F0EE !important; }
  .r-hero [data-hero-extra] { color: #CFE0DC !important; }
  .r-hero .eyebrow { background: rgba(255,255,255,0.14) !important; border-color: rgba(255,255,255,0.32) !important; color: #fff !important; }

  /* Horizontaal schuivende blokken (reviews + stappen + aanpak-tiers). */
  .review-scroller,
  .r-hscroll,
  .products-grid {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px !important;
    padding: 6px 24px 18px !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    scroll-padding-left: 24px;
    /* Subtiele rand-fade rechts: content vervaagt zacht naar de schermrand, zodat
       zichtbaar wordt dat de rij horizontaal doorloopt (swipe-cue). De mask zit op de
       scroll-container, dus de fade blijft vast aan de rechterrand terwijl de kaarten
       eronderdoor schuiven. Rijen lopen op mobiel altijd over de rand → altijd correct. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
  .review-scroller > *,
  .r-hscroll > *,
  .products-grid > * { flex: 0 0 82%; scroll-snap-align: start; scroll-snap-stop: always; margin-top: 0 !important; }
  .products-grid { align-items: stretch; }
  /* Geen zichtbare scrollbar/positiestreep op de sliders (cleaner; swipe blijft werken). */
  .review-scroller, .r-hscroll, .products-grid { scrollbar-width: none; -ms-overflow-style: none; }
  .review-scroller::-webkit-scrollbar,
  .r-hscroll::-webkit-scrollbar,
  .products-grid::-webkit-scrollbar { display: none; }

  /* De verbindingslijn is op de desktop-zigzag gekalibreerd: verberg op mobiel. */
  .r-hideline { display: none !important; }

  /* Het contactpaneel wrapt op mobiel ónder de gegevens; laat het bij scrollIntoView
     onder de zwevende navbar landen (zie plan-form.js _reveal). */
  .plan-panel { scroll-margin-top: 88px; }
}

/* Smal scherm: verberg de "searchtrends"-wordmark zodat de CTA in de navbalk past. */
@media (max-width: 520px) {
  .nav-wordmark { display: none !important; }
}

/* ---------- Telefoon ---------- */
@media (max-width: 560px) {
  .r-3col { grid-template-columns: 1fr !important; }
  .r-4col { grid-template-columns: 1fr !important; }
  .review-scroller > *,
  .r-hscroll > *,
  .products-grid > * { flex-basis: 86%; }
  .r-secpad { padding-top: 48px !important; padding-bottom: 48px !important; }
}