/* Reusable component styles for the LMC marketing kit */
@import url('../../colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-main);
  color: var(--lmc-black);
  background: var(--lmc-white);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }

/* Reusable: yellow→green signature surface w/ paper texture */
.lmc-surface { background: var(--lmc-gradient); position: relative; overflow: hidden; }
.lmc-surface::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.13   0 0 0 0 0.12   0 0 0 0 0.12   0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  background-size: 320px 320px;
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
}
.lmc-surface > * { position: relative; z-index: 1; }

/* Caution stripe band */
.caution {
  height: 18px;
  background: repeating-linear-gradient(-45deg, var(--lmc-yellow) 0 16px, var(--lmc-black) 16px 32px);
}
.caution.thin { height: 10px; }
.caution.green { background: repeating-linear-gradient(-45deg, var(--lmc-green) 0 16px, var(--lmc-black) 16px 32px); }

/* Buttons */
a.btn-pop, a.btn-ghost { text-decoration: none; }
.btn-pop {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lmc-yellow); color: var(--lmc-black);
  font-family: var(--font-main); font-weight: 700;
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 14px 24px;
  border: 2px solid var(--lmc-black);
  border-radius: 10px;
  box-shadow: 6px 6px 0 var(--lmc-black);
  cursor: pointer;
  transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 120ms cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}
.btn-pop:hover { transform: translate(-1px, -1px); box-shadow: 7px 7px 0 var(--lmc-black); }
.btn-pop:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--lmc-black); }
.btn-pop.green { background: var(--lmc-green); }
.btn-pop.dark { background: var(--lmc-black); color: var(--lmc-white); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--lmc-black);
  font-family: var(--font-main); font-weight: 700;
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 13px 22px;
  border: 2px solid var(--lmc-black);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms;
}
.btn-ghost:hover { background: var(--lmc-black); color: var(--lmc-white); }

/* Section container */
.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* Eyebrow */
.eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  background: var(--lmc-black); color: var(--lmc-yellow);
  padding: 6px 10px; border-radius: 4px;
}

/* Marker accent */
.marker { font-family: var(--font-personality); font-weight: 400; line-height: 0.9; }

/* Service card */
.svc-card {
  background: var(--lmc-white);
  border: 2px solid var(--lmc-black);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--lmc-black); }
.svc-card .img { aspect-ratio: 4/3; background-size: cover; background-position: center; border-bottom: 2px solid var(--lmc-black); }
.svc-card .body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.svc-card .tag { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 8px; border-radius: 4px; }
.svc-card h3 { font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
.svc-card p { font-size: 14px; line-height: 1.5; color: var(--lmc-ink-80); margin: 0; }

/* Step card */
.step {
  display: flex; gap: 18px; align-items: flex-start;
  border-top: 2px solid var(--lmc-black); padding: 22px 0;
}
.step:last-child { border-bottom: 2px solid var(--lmc-black); }
.step .num { font-family: var(--font-personality); font-size: 56px; line-height: 0.85; color: var(--lmc-black); min-width: 70px; }
.step h4 { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; }
.step p { font-size: 14px; line-height: 1.5; color: var(--lmc-ink-80); margin: 0; max-width: 540px; }