/* xnovo 3.0 · Over ons (na basis.css)
   Alleen wat deze pagina zelf heeft: de foto van Milan en Enric in de hero (met de trap), het bewijs, de portretten van de twee makers,
   de klantlogo's met één regel uitleg. Alles daarbuiten (hero-patroon, sectie-kop, rijen, noot, aanbod) komt uit basis.css. */

/* ---------------------------------------------------------------- 1 · hero: uitleg, knop, risico, klantlogo's; rechts de echte foto in trapvorm */
.oo-held .ph-links{gap:26px}
.oo-acties{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.oo-risico{margin-top:-8px}
.oo-foto{margin-right:0;margin-bottom:0;margin-left:0}
.oo-foto-kader{position:relative;aspect-ratio:3 / 2;overflow:hidden;background:var(--nevel);
  clip-path:polygon(0% 0%,100% 0%,100% 84%,94% 84%,94% 89.33%,88% 89.33%,88% 94.67%,82% 94.67%,82% 100%,0% 100%)}
.oo-foto-kader img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform-origin:50% 40%}
.oo-foto figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font:500 14px/1.3 var(--sans);color:var(--steen)}

/* ---------------------------------------------------------------- 2 · wie we zijn: een rustig vlak (papier), het leven zit in de beweging
   Milan en Enric elk met een groot portret, verspringend; de portretten komen blok voor blok binnen (zoals de paginawissel) en schuiven
   met verschillende snelheid mee. Daaronder de feiten in één regel, dan wat klanten zeggen naast een losse foto. */
.oo-wie h2{font-size:clamp(46px,6vw,112px);line-height:.95;letter-spacing:-.05em}
.oo-wie h2 b{font-weight:640}
.oo-mensen{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--kol);align-items:start;margin:0 0 clamp(72px,9vw,140px)}
.oo-mens{display:flex;flex-direction:column;gap:22px}
.oo-mens--milan{grid-column:1 / span 5}
.oo-mens--enric{grid-column:7 / span 5;margin-top:clamp(80px,12vw,200px)}
.oo-portret{margin:0;position:relative;aspect-ratio:4 / 5;overflow:hidden;background:var(--nevel)}
.oo-portret img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%}
/* het blokkenraster over een foto (alleen gevuld door het script; zonder script is er niets dat de foto bedekt) */
.oo-blokjes{position:absolute;inset:0;z-index:1;display:grid;grid-auto-rows:1fr;pointer-events:none}
.oo-blokjes i{background:var(--papier)}
.oo-mens-tekst{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:18px;border-top:1.5px solid var(--inkt)}
.oo-rol{margin:0;font:500 14px/1.2 var(--sans);color:var(--steen)}
.oo-mens h3{margin:0;font:500 clamp(36px,4vw,64px)/.95 var(--sans);letter-spacing:-.045em}
.oo-over{margin:6px 0 0;max-width:30em;font-size:17px;line-height:1.5;color:var(--grafiet)}
.oo-over .bevestig{display:inline;font-size:14px;line-height:1.6}
.oo-mens .oo-mail{margin-top:6px;font:500 16px/1.2 var(--sans)}
/* de feiten in één regel */
.oo-feiten{margin:0 0 clamp(72px,9vw,140px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px var(--kol);padding-top:20px;border-top:1px solid rgba(18,17,16,.16)}
.oo-feiten dt{margin:0 0 8px;font:500 14px/1.2 var(--sans);color:var(--steen)}
.oo-feiten dd{margin:0;font:500 clamp(19px,1.5vw,24px)/1.25 var(--sans);letter-spacing:-.02em}
/* wat klanten zeggen, naast een losse foto */
.oo-stem{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--kol);align-items:center;margin:0 0 clamp(56px,7vw,104px)}
.oo-stem .oo-citaten{grid-column:1 / span 6;grid-template-columns:minmax(0,1fr);margin:0}
.oo-gek{grid-column:8 / -1;margin:0;position:relative;aspect-ratio:2 / 3;overflow:hidden;background:var(--nevel)}
.oo-gek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* het mailadres staat als link rechts in de rij, zoals .lnk */
.oo-mail{text-decoration:none;color:var(--inkt);padding-bottom:4px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;transition:background-size .5s var(--ease-wissel)}
.oo-mail:hover{background-size:0 1.5px;background-position:100% 100%}

/* ---------------------------------------------------------------- 4 · werk en klanten: per logo wat we maakten, elk een link naar de projecten */
.oo-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--kol);border-top:1.5px solid var(--inkt)}
.oo-logos li{display:flex;border-bottom:1px solid rgba(18,17,16,.14)}
.oo-logos a{flex:1;display:grid;grid-template-rows:auto 80px auto;align-content:start;gap:16px;padding:22px 0 28px;color:inherit;text-decoration:none;
  background:linear-gradient(var(--vonk),var(--vonk)) 0 100%/0 2px no-repeat;transition:background-size .55s var(--ease-wissel)}
.oo-logos a:hover,.oo-logos a:focus-visible{background-size:100% 2px}
.oo-soort{font:500 14px/1.2 var(--sans);color:var(--steen)}
.oo-logos img{align-self:center;justify-self:start;width:auto;height:calc(var(--logo-h,40px) * var(--logo-k,1));max-width:100%;object-fit:contain;object-position:left center;filter:grayscale(1) contrast(1.15);transition:filter .4s var(--ease-energie)}
.oo-logos a:hover img,.oo-logos a:focus-visible img{filter:none}
.oo-uitleg{max-width:24em;font-size:17px;line-height:1.45;color:var(--grafiet);text-wrap:pretty}
.oo-meer{margin-top:clamp(40px,5vw,64px)}

/* ---------------------------------------------------------------- 5 · hoe we werken: de link in de uitleg staat los van de tekst */
.oo-afspraken{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--kol)}
.oo-af{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,2.4vw,36px);border:1px solid rgba(244,244,241,.18);border-radius:24px;background:rgba(244,244,241,.03)}
.oo-af-boven{margin:0 0 clamp(12px,2vw,28px);display:flex;align-items:center;justify-content:space-between;gap:16px;font:500 14px/1.2 var(--sans);color:rgba(244,244,241,.66)}
.oo-af-boven b{font:500 14px/1 var(--sans);color:var(--vonk)}
.oo-af-boven span{padding:7px 12px;border:1px solid rgba(244,244,241,.22);border-radius:999px}
.oo-af h3{margin:0;font:430 clamp(28px,2.6vw,42px)/1.02 var(--sans);letter-spacing:-.035em;color:var(--papier);text-wrap:balance}
.oo-af p:not(.oo-af-boven){margin:0;max-width:34em;font-size:17px;line-height:1.5;color:rgba(244,244,241,.74);text-wrap:pretty}
.oo-af .lnk{display:inline-flex;margin-top:6px;font-size:16px}

/* ---------------------------------------------------------------- mobiel */
@media (max-width:900px){
  .oo-foto figcaption{margin-top:10px}

  .oo-wie h2{font-size:clamp(34px,10vw,40px)}
  .oo-wie .sectie-actie .knop3{width:100%}
  /* verspringend, ook op de telefoon: Milan links, Enric rechts */
  .oo-mensen{grid-template-columns:minmax(0,1fr);row-gap:56px;margin-bottom:64px}
  .oo-mens--milan,.oo-mens--enric{grid-column:1;margin-top:0}
  .oo-mens .oo-portret{width:86%}
  .oo-mens--enric .oo-portret{margin-left:auto}
  .oo-mens h3{font-size:40px}
  .oo-over{font-size:16px}
  .oo-feiten{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:64px}
  .oo-stem{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .oo-stem .oo-citaten,.oo-gek{grid-column:1}
  .oo-gek{aspect-ratio:4 / 5}
  .oo-mens .oo-mail{min-height:44px;display:inline-flex;align-items:flex-end;padding-bottom:6px;background-position:0 calc(100% - 4px)}
  .rij .oo-mail{grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:flex-end;min-height:44px;padding-bottom:6px;background-position:0 calc(100% - 4px)}

  .oo-logos{grid-template-columns:minmax(0,1fr)}
  .oo-logos a{grid-template-rows:none;grid-template-columns:140px minmax(0,1fr);align-items:center;gap:10px 18px;padding:18px 0 20px}
  .oo-soort{grid-column:1 / -1}
  .oo-logos{--logo-h:26px}
  .oo-uitleg{font-size:16px}

  /* de link in de uitleg op een eigen regel, met een tikvlak van 44 px */
  .oo-afspraken{grid-template-columns:minmax(0,1fr);gap:14px}
  .oo-af{padding:22px 20px;border-radius:20px}
  .oo-af h3{font-size:28px}
  .oo-af p:not(.oo-af-boven){font-size:16px}
  .oo-af .lnk{display:flex;width:fit-content;min-height:44px;align-items:flex-end;margin-top:4px}
}

/* de kop breekt in twee gelijke regels, geen los laatste woord */
.oo-held h1{text-wrap:balance}