* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --paper: #FFF7F2;
  --ink: #2B2B2B;
  --muted: #6B6E70;
  --blush: #FADADD;
  --rose: #E8B4BC;
  --sage: #C8D3C1;
  --blue: #BFD7EA;
  --radius: 14px;
  --space: 16px;
}

html,
body {
  height: 100%;
}
body {
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
}

main {
  width: min(960px, 92vw);
  margin: 0 auto;
}
.section-intro {
  background: var(--rose);
  color: var(--paper);
  font-size: clamp(0.75rem, 1.4vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1rem 1.25rem 1.25rem;
  border-bottom: 4px solid var(--sage);
}

.what-we-do {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, minmax(220px, 1fr));
  gap: 14px;
  padding: var(--space);
  margin-bottom: 120px;
}

.item {
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1.25rem;
  background: var(--blush);
}

.text1 {
  background: var(--blush);
}
.text2 {
  background: var(--sage);
}
.text3 {
  background: var(--blue);
}

h2 {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 0.6rem;
}
p {
  color: var(--muted);
  font-size: clamp(0.82rem, 1.6vw, 0.95rem);
  margin-bottom: 0.9rem;
}
a {
  margin-top: auto;
  align-self: flex-start;
  font-size: clamp(0.78rem, 1.4vw, 0.9rem);
  font-weight: 600;
  color: #ffffff; /* white default for better contrast */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
a:hover {
  border-color: var(--blue); /* pastel blue underline */
  transform: translateY(-1px);
  color: var(--blue); /* link turns blue on hover */
}

.image1,
.image2,
.image3 {
  background-size: cover;
  background-position: center;
  position: relative;
}
.image1 {
  background-image: url("assets/fabric-folds.png");
}
.image2 {
  background-image: url("assets/paper-collage.png");
}
.image3 {
  background-image: url("assets/terrazzo-soft.png");
}

.image1::after,
.image2::after,
.image3::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
}

/*
@media (max-width: 420px) {
  .what-we-do {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}
*/