.section { padding: 70px 0; }

.section-title {
  font-size: 34px;
  margin: 0 0 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.section-subtitle {
  margin: 0 0 28px;
  color: #555;
  font-size: 18px;
  max-width: 850px;
}

.section-subtitle.light {
    color: #bdbbbb;
}

.section-actions {
  margin-top: 26px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
}

.card {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}

.card h3 { margin: 0 0 8px; font-size: 20px; }
.card p { margin: 0; color: #555; line-height: 1.45; }

.section-dark { background: #101010; color: #fff; }

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
}

.feature {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 20px;
  background: rgba(255,255,255,0.04);
}

.feature p { color: rgba(255,255,255,0.78); }

/* special backgrounds */
.section--whatwedo {
  position: relative;
  overflow: hidden;
}

.section--whatwedo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(214,178,94,0.14), transparent 55%),
    radial-gradient(circle at 80% 40%, rgba(255,255,255,0.12), transparent 60%),
    radial-gradient(circle at 50% 90%, rgba(0,0,0,0.07), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.section--whatwedo > * {
  position: relative;
  z-index: 1;
}

/* why background section */
.section--why {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: url("/storage/app/media/knife-cutting-board-sharpening.jpg") center/cover no-repeat;
}

.section--why::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.85) 20%,
    rgba(0,0,0,0.65) 45%,
    rgba(0,0,0,0.85) 100%
  );
  z-index: 0;
}

.section--why > .container { position: relative; z-index: 1; }

.section--why .feature {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 40px rgba(0,0,0,0.30);
}

.section--why .feature p {
  color: rgba(255,255,255,0.80);
}

/* Checklist */
.checklist {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  line-height: 1.35;
  color: #111;
}

/* This is the important part */
.check-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-block;
  color: #d6b25e;
}

.check-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.two-col {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  align-items: center;
}

/* ABOUT page right-side photo */
.about-photo img {
  width: 100%;
  height: 420px;         /* controls the size */
  object-fit: cover;     /* crops nicely instead of stretching */
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}

/* responsive */
@media (max-width: 900px) {
  .about-photo img {
    height: 320px;
  }
}


/* CTA section */
.section-cta {
  background: #101010;
  color: #fff;
}

.cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
}

.cta-inner p {
  color: rgba(255,255,255,0.78);
  margin: 8px 0 0;
}

.cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ===========================
   OWNER FEATURE (About Page)
   =========================== */

.owner-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 28px;
  align-items: center;
}

.owner-media img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}

.owner-text .lead {
  margin-top: 8px;
}

/* --- Fade / Slide animation base --- */
.fade-in {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 650ms ease, transform 650ms ease;
  will-change: opacity, transform;
}

.fade-in--left {
  transform: translateX(-30px);
}

.fade-in--right {
  transform: translateX(30px);
}

/* when visible */
.fade-in.is-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

/* stagger a little so it feels premium */
.fade-in--right.is-visible {
  transition-delay: 120ms;
}

/* mobile */
@media (max-width: 900px) {
  .owner-grid {
    grid-template-columns: 1fr;
  }

  .owner-media img {
    height: 320px;
  }
}