/* Modellaire brand layer (per Ban Rate Guide): Poppins, warm near-black, dusty rose.
   Loaded after site.css so it wins. */

:root {
  --font-outfit: var(--font-poppins), system-ui, "Segoe UI", sans-serif;
  --font-serif: var(--font-poppins), system-ui, "Segoe UI", sans-serif;
  --rose-2: #dba8b1;
}

body {
  font-weight: 300; /* Poppins Light for body copy */
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(202, 132, 134, 0.1), transparent 70%),
    #121011;
}

/* Poppins Bold headlines */
.font-heading,
h1,
h2,
h3,
h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
h1.font-heading { line-height: 1.08; }

/* Labels / buttons in Poppins Medium */
.btn-cta,
.btn-ghost,
.job-tag,
.faq-trigger,
.font-medium { font-weight: 500; }

/* Two-tone headlines */
.hl { color: var(--rose); }

/* Pill tags instead of plain kickers */
.brand-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.42rem 0.95rem;
  border: 1px solid rgba(202, 132, 134, 0.45);
  border-radius: 999px;
  color: var(--rose);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1;
}
.brand-pill.text-gold { color: var(--rose-2); border-color: rgba(219, 168, 177, 0.45); }
.text-center > .brand-pill { margin-inline: auto; }
.pain-kicker.brand-pill { color: var(--rose); }
.pain-kicker.brand-pill::before { display: none; }

/* Logo lockup: MODELLAIRE / MANAGEMENT */
.brand-lockup { display: inline-flex; flex-direction: column; line-height: 1; }
.brand-word {
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--foreground);
}
.brand-sub {
  margin-top: 0.3rem;
  font-weight: 300;
  font-size: 0.56rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.brand-lockup-lg .brand-word { font-size: 1rem; }
.brand-lockup-lg .brand-sub { font-size: 0.62rem; }
.brand-lockup-sm .brand-word { font-size: 0.64rem; letter-spacing: 0.24em; color: inherit; }
@media (min-width: 640px) {
  .brand-word { font-size: 0.95rem; }
  .brand-sub { font-size: 0.6rem; }
}

/* Big faded flower watermark (as on the guide cover) */
.brand-bloom { overflow-x: clip; isolation: isolate; }
.brand-bloom::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 2rem;
  right: -14rem;
  width: 44rem;
  height: 44rem;
  background: url(/logo.svg) center / contain no-repeat;
  opacity: 0.07;
  filter: saturate(0.6);
}
@media (max-width: 767px) {
  .brand-bloom::before { top: 1rem; right: -12rem; width: 26rem; height: 26rem; opacity: 0.06; }
}
.brand-bloom-offer {
  position: absolute;
  pointer-events: none;
  right: -6rem;
  bottom: -7rem;
  width: 22rem;
  height: 22rem;
  background: url(/logo.svg) center / contain no-repeat;
  opacity: 0.08;
}


/* ---------- Mobile polish ---------- */

/* "Most agencies" column: keep it quieter than "Us", but readable */
.vs-cell-them { color: #b3a7a3; }

@media (max-width: 639px) {
  /* No uppercase micro-labels below ~11px on phones */
  .text-\[0\.65rem\],
  .text-\[0\.68rem\],
  .text-\[0\.7rem\],
  .job-tag,
  .pain-tap,
  .vs-them,
  .vs-us { font-size: 0.7rem; }
  .brand-pill { font-size: 0.68rem; padding: 0.45rem 0.9rem; }
  .vs-us-badge { font-size: 0.64rem; }

  /* Comfortable tap targets in the footer */
  .site-footer ul a { display: inline-block; padding-block: 0.35rem; }
  .site-footer ul.space-y-3 > li + li { margin-top: 0.4rem; }
}

/* Very small phones (iPhone SE 1st gen, 320px): keep logo and header CTA from colliding */
@media (max-width: 380px) {
  header .brand-word { font-size: 0.74rem; letter-spacing: 0.2em; }
  header .brand-sub { font-size: 0.5rem; letter-spacing: 0.3em; }
  header .btn-cta { padding-inline: 0.8rem; }
}

/* Tablets (768–1023px): header nav was touching the CTA */
@media (min-width: 768px) and (max-width: 1023px) {
  header nav { gap: 1.1rem; }
  header .btn-cta { padding-inline: 1rem; }
}

/* 640–767px: nav is hidden, so don't leave the CTA stranded in the middle column */
@media (min-width: 640px) and (max-width: 767px) {
  header > div { grid-template-columns: 1fr auto; }
}