@charset "UTF-8";

/* ============================================================================
   OneWayOfWork® — Over ons
   ----------------------------------------------------------------------------
   Laadt ná style.css (tokens + homepagecomponenten) en legal.css, waar de
   subpagina-kop (.page-hero, .breadcrumb, .doc-meta) al in staat. Hier komt
   alleen bij wat de homepage nog niet kent.

   1. Sectievariant
   2. Lopende tekst in het showcase-paneel
   3. Expertisekaarten
   4. Responsive
   ========================================================================== */

/* ============================================================================
   1. Sectievariant — rustige tint zodat witte kaarten eruit springen
   ========================================================================== */
.section--tint{
  background:var(--surface);
  border-block:1px solid var(--line);
}

/* ============================================================================
   2. Lopende tekst — staat in het showcase-paneel, boven de witte wash
   ========================================================================== */
/* Bewust niet .about__body: die is gemaakt voor de donkere beeldband en zet
   zijn alinea's op wit. */
.rich{
  display:grid;
  gap:clamp(14px, 1.5vw, 18px);
}
.showcase__panel .rich{ margin-top:clamp(16px, 2vw, 24px); }
.rich p{
  font-size:clamp(1rem, 1.05vw, 1.0625rem);
  line-height:1.75;
  color:var(--muted);
}
.rich p:first-child{
  font-size:clamp(1.0625rem, 1.2vw, 1.125rem);
  color:var(--ink-2);
}
.rich strong{ color:var(--ink); font-weight:600; }

/* growth__note brengt zijn eigen marge mee; bovenop de grid-gap van .rich werd
   de sprong naar het slotzinnetje twee keer zo groot als tussen de alinea's. */
.rich .growth__note{ margin-top:clamp(2px, .4vw, 6px); }

/* Dit paneel draagt meer tekst dan dat op de homepage. Vanaf tablet staat de
   tekst boven het beeld in plaats van ernaast, en dan reikt de standaardwash
   (weg op 70%, resp. 48%) niet ver genoeg: de onderste vinkjes zouden op de
   kale foto vallen. De wash loopt hier dus door tot voorbij het paneel. */
@media (max-width:900px){
  .showcase--about .showcase__bg::after{
    background:linear-gradient(180deg,
                rgba(255,255,255,.95) 0%,
                rgba(255,255,255,.93) 70%,
                rgba(255,255,255,.62) 88%,
                rgba(255,255,255,0)   100%);
  }
}
@media (max-width:640px){
  .showcase--about .showcase__bg::after{
    background:linear-gradient(180deg,
                rgba(255,255,255,.94) 0%,
                rgba(255,255,255,.91) 58%,
                rgba(255,255,255,.55) 76%,
                rgba(255,255,255,0)   88%);
  }
}

/* ============================================================================
   3. Expertisekaarten — vakgebied met de producten eronder als labels
   ========================================================================== */
.tech-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(16px, 1.8vw, 24px);
}

.tech{
  display:flex; flex-direction:column; gap:14px;
  height:100%;
  padding:clamp(20px, 2.1vw, 28px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  transition:transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.tech:hover{
  transform:translateY(-4px);
  border-color:var(--blue-line);
  box-shadow:var(--shadow-card);
}

.tech__title{
  font-size:1.0625rem; font-weight:600;
  line-height:1.35;
}

/* margin-top:auto lijnt de labelrijen uit op de onderkant van de kaart, ook
   als de ene titel over twee regels valt en de andere niet. */
.tech__tags{
  display:flex; flex-wrap:wrap;
  gap:8px;
  margin-top:auto;
}
.tech__tags li{
  padding:6px 12px;
  background:var(--blue-soft);
  border:1px solid var(--blue-line);
  border-radius:var(--r-pill);
  font-size:.8125rem;
  line-height:1.4;
  color:var(--blue-deep);
}

/* ============================================================================
   4. Responsive
   ========================================================================== */
@media (max-width:1180px){
  .tech-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width:900px){
  .tech-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:600px){
  .tech-grid{ grid-template-columns:1fr; }
}

/* ============================================================================
   5. Print
   ========================================================================== */
@media print{
  .section--tint{ background:none; }
  .tech{ box-shadow:none; }
  .rich p{ color:#000; }
}