/* =========================================================
   GlobeView — gw.css
   Design system voor de NIEUWE (herbouwde) pagina's.
   Stijl: redactioneel / magazine.  Prefix: .gw-   Tokens: :root
   - Géén dark mode, géén build-stap, native nesting toegestaan.
   - Hoort NIET in WindPress (dat blijft voor de oude pagina's).
   - Bron: index.html (ontwerp).
   ========================================================= */

:root{
  --orange:#EB6800;
  --orange-deep:#C0540F;
  --ink:#1A1A1A;
  --ink-2:#111111;
  --body:#3A3A3A;
  --muted:#6E6E6E;
  --paper:#FFFFFF;
  --paper-2:#F7F5F2;        /* heel licht warm wit */
  --line:rgba(0,0,0,0.09);
  --line-dk:rgba(255,255,255,0.14);
  --font:'PP Neue Montreal','Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --maxw:1320px;
  --radius:14px;
}

/* ---- basis (gescoped onder .gw, raakt header/footer niet) ---- */
.gw{
  font-family:var(--font);
  color:var(--body);
  background:var(--paper);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
.gw *{box-sizing:border-box}
.gw h1,.gw h2,.gw h3{color:var(--ink);font-weight:600;line-height:1.08;letter-spacing:-0.02em;margin:0}
.gw p{margin:0}
.gw a{color:inherit;text-decoration:none}
.gw img{max-width:100%;display:block}

.gw-wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.gw-eyebrow{font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--orange)}
.gw-accent{color:var(--orange)}

/* ---- buttons ---- */
.gw-btn{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:16px;
        padding:13px 24px;border-radius:10px;transition:.18s ease;cursor:pointer;border:none}
.gw-btn-primary{background:var(--orange);color:#fff}
.gw-btn-primary:hover{background:var(--orange-deep);transform:translateY(-1px)}
.gw-btn-ghost{color:var(--ink);font-weight:500}
.gw-btn-ghost .gw-arr{transition:.18s ease}
.gw-btn-ghost:hover .gw-arr{transform:translateX(4px)}
.gw-arr{color:var(--orange)}
/* outline-variant (secundaire knop met rand) */
.gw-btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.gw-btn-outline:hover{background:var(--ink);color:#fff}
.gw-btn-outline .gw-arr{transition:.18s ease}
.gw-btn-outline:hover .gw-arr{transform:translateX(4px)}

/* ---- hero (redactioneel: 1 kolom, groot) ---- */
.gw-hero{position:relative;overflow:hidden}
.gw-hero-grid{display:grid;grid-template-columns:1fr;padding:110px 0 96px}
.gw-hero h1{font-size:clamp(3rem,9vw,6.2rem);line-height:.97;letter-spacing:-0.035em;max-width:16ch;margin-top:18px}
.gw-lede{font-size:clamp(1.15rem,2vw,1.5rem);color:var(--body);margin-top:30px;max-width:46ch}
.gw-hero-actions{display:flex;align-items:center;gap:22px;margin-top:38px;flex-wrap:wrap}
/* signatuur: subtiel zon/bol-motief */
.gw-sun{position:absolute;left:50%;bottom:-160px;width:420px;height:420px;border-radius:50%;
        border:2px solid rgba(235,104,0,.16);pointer-events:none;opacity:.7}
.gw-sun::after{content:"";position:absolute;inset:40px;border-radius:50%;border:2px solid rgba(235,104,0,.10)}

/* ---- placeholder voor beeld (wordt later echte media) ---- */
.gw-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
       width:100%;height:100%;color:#A79F94;text-align:center;padding:24px}
.gw-ph svg{width:34px;height:34px;opacity:.7}
.gw-ph span{font-size:13.5px;font-weight:500;max-width:24ch}

/* ---- trust strip ---- */
.gw-trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gw-trust-row{display:flex;align-items:center;justify-content:center;gap:38px;flex-wrap:wrap;
              padding:22px 0;color:var(--muted);font-size:14.5px}
.gw-trust-row b{color:var(--ink);font-weight:600}
.gw-trust-row .gw-dot{width:4px;height:4px;border-radius:50%;background:#cfc8bd}

/* ---- secties ---- */
.gw-sec{padding:104px 0;border-top:1px solid var(--line)}
.gw-sec-head{max-width:54ch}
.gw-sec-head h2{font-size:clamp(2.2rem,4.6vw,3.4rem);margin-top:14px;letter-spacing:-0.03em}
.gw-sec-head p{color:var(--muted);margin-top:16px;font-size:1.05rem}

/* ---- portfolio (galerie, kaderloos) ---- */
.gw-work{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:56px}
.gw-tile{position:relative;border-radius:6px;overflow:hidden;background:var(--paper-2);
         aspect-ratio:16/11;transition:.22s ease}
.gw-tile:hover{opacity:.92}
.gw-tile .gw-meta{position:absolute;left:0;bottom:0;padding:18px 20px}
.gw-tile .gw-pname{color:var(--ink);font-weight:600;font-size:20px}
.gw-tile .gw-ptag{color:var(--muted);font-size:13.5px}

/* ---- portfolio bento-grid (echte projectbeelden) ---- */
.gw-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:16px;margin-top:56px}
.gw-bento-item{position:relative;display:block;border-radius:10px;overflow:hidden;
               background:var(--paper-2) center/cover no-repeat;transition:.25s ease}
.gw-bento-item::after{content:"";position:absolute;inset:0;
               background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0) 45%);pointer-events:none}
.gw-bento-item:hover{transform:translateY(-3px);box-shadow:0 20px 44px -24px rgba(0,0,0,.4)}
.gw-bento-cap{position:absolute;left:0;bottom:0;z-index:1;padding:16px 18px;
              color:#fff;font-weight:600;font-size:15.5px;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.gw-bento-wide{grid-column:span 2}
.gw-bento-logo{background-size:contain;background-repeat:no-repeat;background-color:#13315c}
.gw-bento-logo::after{background:none}
@media(max-width:880px){
  .gw-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:190px}
  .gw-bento-wide{grid-column:span 2}
}
@media(max-width:520px){
  .gw-bento{grid-template-columns:1fr}
  .gw-bento-wide{grid-column:span 1}
}

/* ---- kaarten (diensten / lijsten) ---- */
.gw-cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:54px}
.gw-cards2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:54px}
.gw-card{border:1px solid var(--line);border-radius:8px;padding:34px 30px;background:#fff;transition:.2s ease}
.gw-card:hover{transform:translateY(-4px);box-shadow:0 26px 54px -36px rgba(0,0,0,.28)}
.gw-card .gw-ci{width:38px;height:38px;color:var(--orange);margin-bottom:20px}
.gw-card h3{font-size:21px;margin-bottom:10px;letter-spacing:-0.01em}
.gw-card p{color:var(--muted);font-size:15.5px}
.gw-card.gw-list ul{list-style:none;margin-top:18px;padding:0}
.gw-card.gw-list li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);color:var(--body);font-size:15.5px}
.gw-card.gw-list li:first-child{border-top:none}
.gw-card.gw-list li .gw-chk{color:var(--orange);flex:none;margin-top:2px}

/* ---- fotobanners ---- */
.gw-photoband{padding:46px 0}
.gw-photo-wide{width:100%;border-radius:14px;overflow:hidden;background:var(--paper-2);
               border:1px solid var(--line);aspect-ratio:16/7}
.gw-photo-wide .gw-ph{height:100%}

/* ---- "over Dennis" (donker blok) ---- */
.gw-dennis{background:var(--ink-2);color:#EDEDED}
.gw-dennis h2{color:#fff}
.gw-dennis-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.gw-dennis .gw-eyebrow{color:#FF8A2A}
.gw-dennis p{color:#B7B7B7;margin-top:18px}
.gw-dennis .gw-btn-ghost{color:#fff}
.gw-dennis-fig{aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:#222;border:1px solid var(--line-dk)}
.gw-dennis-fig .gw-ph{color:#6f6f6f}

/* ---- merken / logo's ---- */
.gw-logos{display:flex;flex-wrap:wrap;gap:46px;align-items:center;justify-content:center;margin-top:34px}
.gw-logos .gw-lg{color:#9b9b9b;font-weight:700;letter-spacing:.04em;font-size:19px;opacity:.85}
.gw-logos .gw-lg:hover{color:var(--ink)}

/* ---- review ---- */
.gw-review{text-align:center}
.gw-quote{font-size:clamp(1.7rem,3.6vw,2.7rem);color:var(--ink);font-weight:500;line-height:1.32;
          max-width:24ch;margin:26px auto 0;letter-spacing:-0.01em}
.gw-review .gw-who{margin-top:26px;color:var(--muted);font-size:15px}
.gw-review .gw-who b{color:var(--ink);font-weight:600}
.gw-review .gw-stars{color:var(--orange);letter-spacing:3px;font-size:15px;margin-top:30px}
.gw-review .gw-more{margin-top:24px;display:inline-flex}

/* ---- doorlopende reviews (marquee, 2 tegengestelde rijen) ---- */
.gw-reviews{position:relative;overflow:hidden;margin-top:48px;display:flex;flex-direction:column;gap:22px;align-items:flex-start;
            -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.gw-reviews-track{display:flex;gap:22px;width:max-content;animation:gw-marquee 75s linear infinite}
.gw-reviews-track--rev{animation-direction:reverse;animation-duration:92s}
.gw-reviews:hover .gw-reviews-track{animation-play-state:paused}
@keyframes gw-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.gw-rev-card{flex:0 0 380px;max-width:85vw;background:#fff;border:1px solid var(--line);border-radius:16px;
             padding:26px 28px;box-shadow:0 14px 44px -30px rgba(0,0,0,.28);text-align:left}
.gw-rev-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.gw-rev-av{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;background:var(--paper-2)}
.gw-rev-name{font-weight:600;color:var(--ink);font-size:15px;line-height:1.25}
.gw-rev-comp{color:var(--muted);font-size:13px}
.gw-rev-stars{margin-left:auto;color:#FFB400;letter-spacing:1px;font-size:14px;flex:none;align-self:flex-start;white-space:nowrap}
.gw-rev-stars-off{color:#dcd7ce}
.gw-rev-text{color:var(--body);font-size:14.5px;line-height:1.62;margin:0}

/* ---- FAQ (accordeon via <details>) ---- */
.gw-faq{max-width:780px;margin-top:48px}
.gw-faq-item{border-top:1px solid var(--line)}
.gw-faq-item:last-child{border-bottom:1px solid var(--line)}
.gw-faq-q{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 2px;
          cursor:pointer;font-weight:500;color:var(--ink);font-size:17.5px;list-style:none}
.gw-faq-q::-webkit-details-marker{display:none}
.gw-faq-q .gw-pl{color:var(--orange);font-size:24px;line-height:1;transition:.2s ease;flex:none}
.gw-faq-item[open] .gw-faq-q .gw-pl{transform:rotate(45deg)}
.gw-faq-a{padding:0 2px 26px;color:var(--muted);font-size:15.5px;line-height:1.7;max-width:66ch}

/* ---- prijs-hint ---- */
.gw-price-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gw-price-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:34px 0;flex-wrap:wrap}
.gw-price-row .gw-pt{font-size:1.15rem;color:var(--ink);font-weight:500}
.gw-price-row .gw-ps{color:var(--muted);font-size:.95rem;margin-top:2px}

/* ---- eind-CTA ---- */
.gw-final{text-align:center}
.gw-final h2{font-size:clamp(2.4rem,5.5vw,4rem)}
.gw-final p{color:var(--muted);margin-top:16px;font-size:1.1rem}
.gw-final .gw-btn{margin-top:32px}

/* ---- reveal-animatie (progressive enhancement) ---- */
.gw-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.gw-reveal.gw-in{opacity:1;transform:none}

/* ---- responsive ---- */
@media (max-width:880px){
  .gw-dennis-grid{grid-template-columns:1fr;gap:36px}
  .gw-work,.gw-cards3,.gw-cards2{grid-template-columns:1fr}
  .gw-photo-wide{aspect-ratio:16/11}
}

@media (prefers-reduced-motion:reduce){
  .gw-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .gw-reviews-track{animation:none!important}
}

/* =========================================================
   GUARD — neutraliseer legacy site-CSS BINNEN .gw
   De bestaande WindPress-CSS forceert "Poppins" op headings
   met !important. Alleen daarom gebruiken we hier !important,
   strikt gescoped onder .gw (raakt de oude pagina's niet).
   ========================================================= */
.gw,
.gw h1,.gw h2,.gw h3,.gw h4,
.gw p,.gw a,.gw span,.gw li,.gw summary,.gw button,.gw .gw-btn{
  font-family:var(--font) !important;
}

/* Kop-kleur + grootte forceren tegen Elementor/WindPress (hogere specificiteit).
   De legacy-CSS zet glw-groottes op bare h1/h2/h3 die later laden; met
   .gw-prefix als extra class winnen we netjes zonder !important. */
.gw .gw-sec-head h2,
.gw .gw-card h3,
.gw .gw-final h2,
.gw .gw-hero h1{ color:var(--ink); }
.gw .gw-dennis h2{ color:#fff; }

.gw .gw-hero h1{ font-size:clamp(3rem,9vw,6.2rem); line-height:.97; }
.gw .gw-sec-head h2{ font-size:clamp(2.2rem,4.6vw,3.4rem); }
.gw .gw-final h2{ font-size:clamp(2.4rem,5.5vw,4rem); }
.gw .gw-dennis h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); }
.gw .gw-quote{ font-size:clamp(1.7rem,3.6vw,2.7rem); }
.gw .gw-card h3{ font-size:21px; }

/* =========================================================
   Extra componenten (toegevoegd voor /gv-webdesign/)
   ========================================================= */

/* Split-hero: content links + USP-kaart rechts */
.gw-hero-split .gw-hero-grid{grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:84px 0}
.gw .gw-hero.gw-hero-split h1{font-size:clamp(2.1rem,3.8vw,3.3rem);line-height:1.06;max-width:18ch}
.gw-hero-split .gw-lede{max-width:42ch}
@media(max-width:880px){.gw-hero-split .gw-hero-grid{grid-template-columns:1fr;gap:34px;padding:64px 0}}

/* Kaart-tagline (subtiele regel onderaan een kaart) */
.gw-card-tag{display:block;margin-top:18px;padding-top:15px;border-top:1px solid var(--line);
             color:var(--muted);font-size:13.5px;font-weight:500}

/* 4-koloms kaarten (stappen) */
.gw-cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.gw-step-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
           border-radius:50%;background:var(--orange);color:#fff;font-weight:600;font-size:15px;margin-bottom:16px}
@media(max-width:880px){.gw-cards4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gw-cards4{grid-template-columns:1fr}}

/* Split-sectie: tekst + beeld naast elkaar */
.gw-split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.gw-split img{border-radius:var(--radius)}
@media(max-width:880px){.gw-split{grid-template-columns:1fr;gap:32px}}

/* Pill-links (tag-links, bv. werkgebied) */
.gw-pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.gw-pill{display:inline-flex;padding:10px 20px;border:1px solid var(--line);border-radius:999px;
         font-size:14.5px;font-weight:500;color:var(--ink);transition:.18s ease;background:#fff}
.gw-pill:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-1px)}