/* GDPR service page — data-lifecycle diagram + asymmetric principles bento */

.gdpr-flow{padding:2rem 8vw 3rem;box-shadow:none}
.gdpr-flow h2{margin:.75rem 0 1rem;font-size:clamp(1.4rem,2.6vw,2rem)}
.flow-intro{font-size:.9rem;line-height:1.9;color:var(--mid);max-width:760px;margin-bottom:3rem}

.lifecycle-diagram{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1.25rem 0;
  border-top:1px solid var(--sheet-rule);
  border-bottom:1px solid var(--sheet-rule);
  padding:2.5rem 1rem;
}
.lifecycle-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
  min-width:70px;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.lifecycle-step.in-view{opacity:1;transform:translateY(0)}
.lifecycle-icon{
  width:44px;
  height:44px;
  fill:none;
  stroke:var(--dark);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .3s, transform .3s;
}
.lifecycle-step:hover .lifecycle-icon{stroke:var(--accent);transform:translateY(-3px)}
.lifecycle-label{
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mid);
}
.lifecycle-arrow{
  width:40px;
  height:16px;
  flex:0 0 auto;
  fill:none;
  stroke:var(--sheet-rule);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  margin:0 -2px;
}

.gdpr-bento{padding:1rem 8vw 5rem;box-shadow:none}
.gdpr-bento h2{margin:.75rem 0 2.5rem;font-size:clamp(1.4rem,2.6vw,2rem)}

.bento-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:minmax(160px,auto);
  gap:1.1rem;
}
.bento-card{
  position:relative;
  border:1px solid var(--sheet-rule);
  background:rgba(255,252,245,.35);
  padding:2rem 2rem 1.6rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:1rem;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease, background .25s, border-color .25s, box-shadow .25s;
}
.bento-card.in-view{opacity:1;transform:translateY(0)}
.bento-card:hover{
  background:#fbf8f3;
  border-color:var(--accent);
  box-shadow:0 8px 24px rgba(26,24,21,.08);
  transform:translateY(-4px);
}
.bento-card:hover .card-index{color:var(--accent)}
.card-index{
  font-family:'Source Serif 4',serif;
  font-size:.75rem;
  letter-spacing:.1em;
  color:var(--mid);
  transition:color .25s;
}
.bento-card h3{font-size:1.25rem;line-height:1.3}
.bento-card p{font-size:.85rem;line-height:1.8;color:var(--mid)}

/* asymmetric placement: wide+tall lead card, others varied */
.card-toms{grid-column:1 / span 4;grid-row:1 / span 2;padding-top:3rem}
.card-toms h3{font-size:1.6rem}
.card-access{grid-column:5 / span 2;grid-row:1}
.card-breach{grid-column:5 / span 2;grid-row:2 / span 2}
.card-dpo{grid-column:1 / span 4;grid-row:3}

.service-note{
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--sheet-rule);
  font-size:.8rem;
  line-height:1.9;
  color:var(--mid);
  max-width:800px;
}

@media (max-width:900px){
  .bento-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-toms{grid-column:1 / span 2;grid-row:auto}
  .card-access{grid-column:1;grid-row:auto}
  .card-breach{grid-column:2;grid-row:auto}
  .card-dpo{grid-column:1 / span 2;grid-row:auto}
}

@media (max-width:620px){
  .lifecycle-diagram{padding:2rem .5rem;gap:1rem 0}
  .lifecycle-arrow{width:20px}
  .lifecycle-label{font-size:.56rem}
  .bento-grid{grid-template-columns:1fr}
  .card-toms,.card-access,.card-breach,.card-dpo{grid-column:1;grid-row:auto}
  .bento-card{padding:1.6rem 1.6rem 1.3rem}
}

@media (prefers-reduced-motion:reduce){
  .lifecycle-step,.bento-card{transition:none;opacity:1;transform:none}
}