/* ============================================================
   OCRE homepage — stylesheet, versie 4.1 (compleet)
   Projecten weer donkergroen, contact weer bruin.
   Alles onder .ocre-home, plus een paar regels voor de kop- en
   voettekst van het thema die alleen op deze pagina gelden
   (via .page-id-1069). De rest van ocre.nl verandert niet.
   ============================================================ */

:root{
  --paper:#FBFAF7;
  --ink:#191713;
  --ink-soft:#4A463E;
  --ochre:#B57A1F;
  --ochre-deep:#6B4423;
  --sea:#20363A;
  --brown-band:#A67C4E;
  --green-deep:#16292C;
  --rule:#CFC9BB;
  --surface:#EFEBE2;
}

/* ============================================================
   KOP- EN VOETTEKST VAN HET THEMA — alleen op deze pagina
   Wil je dit straks op de hele site, haal dan overal
   ".page-id-1069 " voor de selector weg.
   ============================================================ */

/* bovenbalk: alle tekst wit */
.page-id-1069 .guten-3xv0fn,
.page-id-1069 .guten-3xv0fn p,
.page-id-1069 .guten-3xv0fn a,
.page-id-1069 .guten-3xv0fn strong,
.page-id-1069 .guten-3xv0fn span,
.page-id-1069 .guten-3xv0fn i{
  color:#FFFFFF !important;
}
.page-id-1069 .guten-3xv0fn svg{fill:#FFFFFF !important;}

/* witte balk met logo en menu: gelijke lucht boven en onder */
.page-id-1069 .guten-element.guten-IPZGJb{
  margin-top:0 !important;
  padding-top:14px !important;
  padding-bottom:14px !important;
}
.page-id-1069 .guten-IPZGJb img{margin-top:0 !important;margin-bottom:0 !important;}

/* oude voettekst en certificatenbalk weg */
.page-id-1069 .guten-Jmjnhj{display:none !important;}
.page-id-1069 .guten-F1oLmO .swiper-container{display:none !important;}

/* ============================================================
   BASIS
   ============================================================ */
.ocre-home{
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  text-align:left;
  -webkit-font-smoothing:antialiased;
}
.ocre-home,
.ocre-home h1,.ocre-home h2,.ocre-home h3,
.ocre-home p,.ocre-home a,.ocre-home span,
.ocre-home b,.ocre-home strong,.ocre-home blockquote,
.ocre-home li,.ocre-home figcaption,.ocre-home time,
.ocre-home div{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif !important;
}
.ocre-home *{box-sizing:border-box;}
.ocre-home img{max-width:100%;height:auto;display:block;}
.ocre-home a{color:inherit;}
.ocre-home :focus-visible{outline:2px solid var(--ochre);outline-offset:3px;}
.ocre-home .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
.ocre-home section{padding:92px 0;}
.ocre-home .head{max-width:60ch;margin-bottom:44px;}
.ocre-home .head h2{margin:0;font-size:clamp(1.6rem,3vw,2.3rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;}
.ocre-home .head p{margin:14px 0 0;color:var(--ink-soft);max-width:56ch;}
.ocre-home .more{margin-top:34px;}
.ocre-home .more a{font-size:15px;font-weight:600;color:var(--ochre-deep);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px;}
.ocre-home .more a:hover{border-bottom-color:var(--ochre-deep);}

/* ============================================================
   HERO — schermbrede video, tekst eroverheen
   De sluier is licht gehouden; het was een zonnige dag en dat
   moet je zien. Leesbaarheid komt van de schaduw onder de tekst.
   ============================================================ */
.ocre-home .herofull{
  position:relative;
  width:100%;
  min-height:min(74vh,700px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--sea);
}
.ocre-home .herofull video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(1.10) saturate(1.12) contrast(1.02);
}
.ocre-home .herofull .veil{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(8,12,12,.52) 0%,
    rgba(8,12,12,.30) 34%,
    rgba(8,12,12,.08) 66%,
    rgba(8,12,12,0) 100%);
}
.ocre-home .hero-copy{
  position:relative;z-index:2;
  width:100%;
  padding-top:132px;
  padding-bottom:58px;
}
.ocre-home .acro{margin:0 0 18px;font-size:clamp(14px,1.5vw,17px);font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:#F0CB8E;line-height:1.5;text-shadow:0 1px 12px rgba(0,0,0,.6);}
.ocre-home .herofull h1{margin:0;font-size:clamp(2.3rem,5.4vw,4.6rem);line-height:.98;letter-spacing:-.03em;font-weight:700;max-width:15ch;color:#FFFFFF;text-shadow:0 2px 22px rgba(0,0,0,.55);}
.ocre-home .lede{margin:24px 0 0;max-width:50ch;font-size:18px;line-height:1.55;color:#F6F4EF;text-shadow:0 1px 14px rgba(0,0,0,.65);}
.ocre-home .actions{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 0;}
.ocre-home .btn{display:inline-block;text-decoration:none;padding:14px 26px;font-size:15px;font-weight:600;border:1px solid var(--ochre-deep);border-radius:0;}
.ocre-home .btn-solid{background:var(--ochre-deep);color:#FBFAF7;}
.ocre-home .btn-solid:hover{background:#FBFAF7;color:var(--ink);border-color:#FBFAF7;}
.ocre-home .btn-line{color:#FFFFFF;border-color:rgba(255,255,255,.7);background:rgba(0,0,0,.18);}
.ocre-home .btn-line:hover{background:rgba(255,255,255,.18);}

/* ============================================================
   FEITENSTROOK — vier gelijke vakken, certificaten als labels
   ============================================================ */
.ocre-home .strip{background:var(--surface);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.ocre-home .strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-left:0;padding-right:0;}
.ocre-home .fact{padding:30px 28px;border-right:1px solid var(--rule);display:flex;flex-direction:column;justify-content:flex-start;}
.ocre-home .fact:first-child{padding-left:28px;}
.ocre-home .fact:last-child{border-right:0;}
.ocre-home .fact b{display:block;font-size:30px;font-weight:700;letter-spacing:-.015em;line-height:1.1;}
.ocre-home .fact span{display:block;font-size:14px;color:var(--ink-soft);margin-top:6px;}
.ocre-home .fact .certlabel{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ochre-deep);}
.ocre-home .certlist{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;}
.ocre-home .certlist li{
  list-style:none;margin:0;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--ink-soft);
  border:1px solid var(--rule);
  background:var(--paper);
  padding:5px 9px;
  white-space:nowrap;
}

/* ============================================================
   BUSINESS LINES — linkerkantlijn overal gelijk
   ============================================================ */
.ocre-home .lines{border-top:2px solid var(--ink);}
.ocre-home .line{display:grid;grid-template-columns:minmax(150px,.5fr) 1.5fr auto;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule);text-decoration:none;}
.ocre-home .line>*{text-align:left !important;justify-self:start;}
.ocre-home .line .line-go{text-align:right !important;justify-self:end;}
.ocre-home .line:hover{background:var(--surface);}
.ocre-home .line:hover .line-name{color:var(--ochre-deep);}
.ocre-home .line-name{font-size:20px;font-weight:650;letter-spacing:-.012em;}
.ocre-home .line-desc{color:var(--ink-soft);font-size:16px;}
.ocre-home .line-go{font-size:14px;color:var(--ochre-deep);font-weight:600;white-space:nowrap;}

/* ============================================================
   PROJECTEN — donkergroene band, okerkleurige kopjes
   ============================================================ */
.ocre-home .projects{background:var(--sea);color:#EEF1F0;position:relative;overflow:hidden;}
.ocre-home .projects .head h2{color:#FFFFFF;}
.ocre-home .projects .head p{color:rgba(238,241,240,.72);}
.ocre-home .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);}
.ocre-home .proj{background:var(--sea);padding:32px 26px;}
.ocre-home .proj h3{margin:0 0 10px;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ochre);}
.ocre-home .proj p{margin:0;font-size:15.5px;color:rgba(238,241,240,.82);line-height:1.55;}
.ocre-home .projects .more a{color:var(--ochre);border-bottom-color:rgba(255,255,255,.3);}

/* ---------- citaat ---------- */
.ocre-home .quotes{display:grid;grid-template-columns:minmax(0,68ch);gap:28px;}
.ocre-home .quote{border-top:2px solid var(--ochre);padding-top:20px;}
.ocre-home .quote blockquote{margin:0;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.5;letter-spacing:-.01em;border:0;padding:0;}
.ocre-home .quote figcaption{margin-top:14px;font-size:14px;color:var(--ink-soft);}
.ocre-home .quote figcaption b{display:block;color:var(--ink);font-weight:650;}

/* ============================================================
   MENSEN — vijf op een rij, directie onderaan
   ============================================================ */
.ocre-home .people-band{background:var(--surface);}
.ocre-home .people{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;}
.ocre-home .person figure{margin:0;}
.ocre-home .portrait{aspect-ratio:3/4;width:100%;object-fit:cover;background:var(--paper);border:1px solid var(--rule);}
.ocre-home .person h3{margin:14px 0 2px;font-size:16.5px;font-weight:650;}
.ocre-home .person .role{margin:0 0 6px;font-size:13px;color:var(--ochre-deep);font-weight:600;}
.ocre-home .pmail{display:inline-block;margin-top:4px;font-size:13px;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule);word-break:break-all;}
.ocre-home .pmail:hover{color:var(--ochre-deep);}
.ocre-home .teamgroup{margin:44px 0 16px;font-size:13px;font-weight:700;color:var(--ochre-deep);letter-spacing:.06em;text-transform:uppercase;}
.ocre-home .teamgroup:first-of-type{margin-top:0;}

/* ============================================================
   CONTACT — bruine band
   ============================================================ */
.ocre-home .contact{background:var(--ochre-deep);color:#FBFAF7;position:relative;overflow:hidden;}
.ocre-home .contact .watermark2{position:absolute;left:-6%;bottom:-30%;width:min(760px,62%);opacity:.07;filter:brightness(3) grayscale(1);pointer-events:none;}
.ocre-home .contact .wrap{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:start;}
.ocre-home .contact h2{margin:0 0 18px;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;letter-spacing:-.02em;font-weight:700;max-width:16ch;color:#FFFFFF;}
.ocre-home .contact p{color:rgba(251,250,247,.84);max-width:44ch;margin:0;}
.ocre-home .contact a{color:#FBFAF7;}
.ocre-home .cdetails{font-size:16px;line-height:1.9;}
.ocre-home .cdetails strong{display:block;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(251,250,247,.66);margin-bottom:4px;}
.ocre-home .cblock+.cblock{margin-top:24px;}

/* ============================================================
   NIEUWS — twee rijen van drie
   ============================================================ */
.ocre-home .newsgrid ul.wp-block-latest-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 28px;margin:0;padding:0;list-style:none;}
.ocre-home .newsgrid ul.wp-block-latest-posts li{margin:0;padding:0;list-style:none;}
.ocre-home .newsgrid .wp-block-latest-posts__featured-image img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--rule);}
.ocre-home .newsgrid .wp-block-latest-posts__post-title{display:block;margin:14px 0 4px;font-size:19px;font-weight:650;letter-spacing:-.012em;text-decoration:none;color:var(--ink);}
.ocre-home .newsgrid li:hover .wp-block-latest-posts__post-title{color:var(--ochre-deep);}
.ocre-home .newsgrid .wp-block-latest-posts__post-date{display:block;margin:0 0 8px;font-size:13.5px;color:var(--ink-soft);}
.ocre-home .newsgrid .wp-block-latest-posts__post-excerpt{margin:0;font-size:15px;color:var(--ink-soft);line-height:1.55;}

/* ---------- secties uit meerdere blokken ---------- */
.ocre-home .band-top{padding:92px 0 0;}
.ocre-home .band-bottom{padding:0 0 92px;}

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width:1100px){
  .ocre-home .people{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:900px){
  .ocre-home .herofull{min-height:80vh;}
  .ocre-home .herofull .veil{background:linear-gradient(180deg,rgba(8,12,12,.30) 0%,rgba(8,12,12,.46) 48%,rgba(8,12,12,.72) 100%);}
  .ocre-home .hero-copy{padding-top:150px;padding-bottom:48px;}
  .ocre-home .strip .wrap{grid-template-columns:repeat(2,1fr);}
  .ocre-home .fact:nth-child(2){border-right:0;}
  .ocre-home .fact:nth-child(1),.ocre-home .fact:nth-child(2){border-bottom:1px solid var(--rule);}
  .ocre-home .proj-grid{grid-template-columns:1fr;}
  .ocre-home .people{grid-template-columns:repeat(2,1fr);}
  .ocre-home .contact .wrap{grid-template-columns:1fr;}
  .ocre-home .line{grid-template-columns:1fr;gap:6px;}
  .ocre-home .line .line-go{text-align:left !important;justify-self:start;}
  .ocre-home .quotes{grid-template-columns:1fr;}
  .ocre-home .newsgrid ul.wp-block-latest-posts{grid-template-columns:1fr;}
}

/* ============================================================
   TELEFOON
   ============================================================ */
@media (max-width:560px){
  .ocre-home .people{grid-template-columns:1fr;}
  .ocre-home .strip .wrap{grid-template-columns:1fr;}
  .ocre-home .fact{border-right:0;border-bottom:1px solid var(--rule);}
  .ocre-home .fact:last-child{border-bottom:0;}
  .ocre-home section{padding:66px 0;}
  .ocre-home .band-top{padding:66px 0 0;}
  .ocre-home .band-bottom{padding:0 0 66px;}
}

@media (prefers-reduced-motion:reduce){
  .ocre-home *{transition:none!important;animation:none!important;}
}