/* === MKSS “What We Do” — Red Theme (Responsive + Hover Shadow) === */
:root{
  --mkss-red:#b30000;
  --card:#ffffff;
  --text:#111111;
  --muted:#5a5a5a;
  --border:rgba(0,0,0,.08);
  --radius:20px;
  --shadow:0 10px 24px rgba(0,0,0,.18);
  --shadow-deep:0 24px 60px rgba(0,0,0,.45); /* darker black hover shadow */
  --ring:0 0 0 4px rgba(255,255,255,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:#fff;
  color:#000;
  -webkit-tap-highlight-color: transparent;
}

/* Section */
.wwd-section{
  background:var(--mkss-red);
  color:#fff;
  padding: 64px 16px 280px;
}
.wwd-wrap{max-width:1160px;margin:auto;}

.wwd-head{text-align:center;margin-bottom:24px}
.wwd-title{
  margin:0 0 10px;
  font-size:clamp(1.9rem,3.2vw,2.6rem);
  line-height:1.2;
  color:#fff;
  letter-spacing:.2px;
}
.wwd-lead{
  margin:0 auto;
  max-width:70ch;
  color:#ffe9e9;
  font-size:clamp(.95rem,1.2vw,1.05rem);
}

/* Grid */
.wwd-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:20px;
  margin-top:28px;
}

/* Card */
.wwd-card{
  grid-column:span 4; /* desktop: 3 per row */
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 20px;
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change:transform;
}
.wwd-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-deep);
  border-color:rgba(0,0,0,.18);
}
.wwd-card:focus-within{
  outline:none;
  box-shadow:var(--shadow-deep), var(--ring);
}
.wwd-card h3{
  margin:0 0 12px;
  font-size:1.08rem;
  letter-spacing:.2px;
}
.wwd-card ul{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:10px;
}
.wwd-card li{margin:0}
.wwd-card strong{color:#b30000}
.wwd-text{margin:0;color:var(--muted)}

/* Responsive breakpoints */
@media (max-width:1200px){
  .wwd-wrap{max-width:1000px}
}
@media (max-width:1024px){
  .wwd-card{grid-column:span 6} /* 2 per row */
}
@media (max-width:760px){
  .wwd-section{padding:56px 14px 64px}
  .wwd-grid{gap:16px}
}
@media (max-width:640px){
  .wwd-card{grid-column:span 12} /* 1 per row */
}
@media (max-width:400px){
  .wwd-card{padding:18px 14px}
  .wwd-title{font-size:1.6rem}
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .wwd-card{transition:none}
}

/* Optional: subtle rounded top like your UI blocks */
#mkss-what-we-do{
  border-top-left-radius:24px;
  border-top-right-radius:24px;
}