/* ==========================================================
   HAPPY VILLAINS - STYLES
   Colors and fonts come from the logo. Change them in :root.
   ========================================================== */
:root {
  --bg: #0b0b0b;              /* logo black */
  --bg-teal: #17302f;         /* deep teal from the logo rings */
  --teal: #2f5a57;
  --cream: #f3e6cb;           /* parchment text */
  --gold: #edc087;            /* logo lettering */
  --red: #e1111a;             /* the eyes */
  --muted: #b9ad96;
  --max-width: 1200px;
  --gap: 32px;
  --font-body: 'Jost', 'Century Gothic', Arial, sans-serif;
  --font-heading: 'Bebas Neue', Impact, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--cream); font-family: var(--font-body); line-height: 1.6; font-size: 1.05rem; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); }
a:hover { color: var(--red); }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
.section { padding: 80px 0; }
.section--teal { background: var(--bg-teal); }

/* ---------- Headings ---------- */
h2, h3 { font-family: var(--font-heading); font-weight: 400; color: var(--gold); letter-spacing: 3px; text-transform: uppercase; }

.line-title {                 /* gold lines with a red diamond: ---- ◆ Clients ◆ ---- */
  display: flex; align-items: center; gap: 20px;
  font-size: 3.2rem; line-height: 1; margin-bottom: 48px; justify-content: center;
}
.line-title::before, .line-title::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--gold)); }
.line-title::after { background: linear-gradient(270deg, transparent, var(--gold)); }

/* ---------- Hero (logo) ---------- */
.hero {
  text-align: center; padding: 48px 20px 56px;
  background: radial-gradient(circle at 50% 40%, var(--teal) 0%, var(--bg-teal) 45%, var(--bg) 100%);
}
.hero .logo { width: 100%; max-width: 440px; margin: 0 auto; box-shadow: 0 0 60px rgba(0,0,0,.7); }
.hero .tagline { font-family: var(--font-heading); font-size: 1.8rem; letter-spacing: 6px; color: var(--gold); margin-top: 28px; text-transform: uppercase; }

/* ---------- Home split (two halves) ---------- */
.split { display: flex; border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.split-panel {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 64px 24px; text-decoration: none; color: var(--cream); transition: background .25s;
}
.split-panel h2 { font-size: 2.8rem; line-height: 1.1; }
.split-panel p { color: var(--muted); margin: 8px 0 24px; letter-spacing: 1px; }
.split-panel--talent { background: var(--bg-teal); border-right: 2px solid var(--gold); }
.split-panel--films  { background: var(--bg); }
.split-panel:hover   { background: var(--teal); color: var(--cream); }

.button {
  display: inline-block; padding: 12px 30px; border: 2px solid var(--gold); color: var(--gold);
  text-transform: uppercase; font-weight: 600; font-size: .85rem; letter-spacing: 2px; transition: all .25s;
}
.split-panel:hover .button, .button:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- Client grid (the part to copy/paste) ---------- */
.client-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); list-style: none; }
.client-card {
  flex: 1 1 320px;            /* min card width 320px, then grows */
  max-width: 420px;
  text-align: center;
}
.client-card img { width: 100%; margin-bottom: 20px; border: 2px solid var(--gold); }
.client-card h3 { font-size: 2rem; line-height: 1.1; }
.client-card .role { color: var(--red); font-weight: 600; letter-spacing: 1px; margin-bottom: 12px; }
.client-card .bio { color: var(--cream); opacity: .85; font-size: .95rem; text-align: left; margin-bottom: 14px; }
.client-card .imdb { font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }

/* ---------- Booking ---------- */
.booking { text-align: center; }
.booking h2 { font-size: 2.8rem; margin-bottom: 16px; }
.booking p { max-width: 640px; margin: 0 auto 16px; }
.booking .tagline { font-family: var(--font-heading); font-size: 1.8rem; letter-spacing: 4px; color: var(--gold); margin-top: 32px; text-transform: uppercase; }

/* ---------- Films ---------- */
.films { text-align: center; }
.films p { color: var(--muted); font-size: 1.3rem; letter-spacing: 2px; text-transform: uppercase; }

/* ---------- Footer ---------- */
.site-footer { text-align: center; padding: 30px 20px; color: var(--muted); font-size: .85rem; border-top: 2px solid var(--gold); }

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
  .split { flex-direction: column; }
  .split-panel--talent { border-right: 0; border-bottom: 2px solid var(--gold); }
  .split-panel { padding: 48px 20px; }
  .section { padding: 56px 0; }
  .line-title { font-size: 2.4rem; gap: 12px; }
  .client-card { max-width: 100%; }
  .hero .tagline { font-size: 1.4rem; letter-spacing: 4px; }
}