/* Marketing kit — page glue on top of colors_and_type.css */

html, body { background: var(--paper-white); scroll-behavior: smooth; }

.page { display: flex; flex-direction: column; }

/* Sections */
.section { padding-block: 96px; position: relative; }
.section--dark  { background: var(--ink-black);  color: var(--paper-white); }
.section--brand { background: var(--brand-blue); color: var(--paper-white); }
.section--soft  { background: var(--gray-100); }

@media (max-width: 720px) {
  .section { padding-block: 48px; }
}

.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
@media (min-width: 720px) { .container { padding-inline: 48px; } }

.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--brand-blue); }
.eyebrow--on-dark { color: var(--accent-yellow); }

/* Grids */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--6 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 1024px) { .grid--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .grid--3, .grid--2, .grid--6 { grid-template-columns: 1fr; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 16px;
  padding: 14px 28px; border-radius: 8px; border: 0; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  text-decoration: none; line-height: 1;
  min-height: 48px; min-width: 48px;
}
.btn--primary { background: var(--brand-blue); color: #fff; }
.btn--primary:hover { background: var(--brand-blue-hover); color: #fff; }
.btn--white   { background: #fff; color: var(--brand-blue); }
.btn--white:hover { background: #f3f3f3; }
.btn--outline-light { background: transparent; color: #fff; border: 1.5px solid #fff; }
.btn--ghost   { background: transparent; color: var(--ink-black); font-size: 15px; font-weight: 500; padding: 10px 14px; }
.btn--ghost:hover { background: var(--gray-100); }

/* Cards */
.card-person {
  background: #fff; color: var(--gray-900);
  border-radius: 12px; padding: 24px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 16px;
}
.card-process {
  background: #fff; color: var(--gray-900);
  border-radius: 12px; padding: 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.card-blog {
  background: #fff; border: 1px solid var(--gray-300);
  border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur) var(--ease-out);
}
.card-blog:hover { box-shadow: var(--shadow-card-lg); }

/* Image placeholders */
.placeholder {
  display: flex; align-items: flex-end; justify-content: center;
  padding: 12px; color: rgba(0,0,0,0.45);
  font-size: 11px; letter-spacing: 0.02em;
}
.ph-headshot-a { background: linear-gradient(135deg, #E8E2D8, #B9AC93); }
.ph-headshot-b { background: linear-gradient(135deg, #D8E0E8, #94A3B8); }
.ph-headshot-c { background: linear-gradient(135deg, #E0D8E8, #B795BB); }
.ph-headshot-d { background: linear-gradient(135deg, #D8E8DE, #8FB8A0); }
.ph-headshot-e { background: linear-gradient(135deg, #E8DCD8, #BC9890); }
.ph-headshot-f { background: linear-gradient(135deg, #DCE8D8, #9CBC8E); }
.ph-blog-a { background: linear-gradient(135deg, #1A4FFF, #0033E6); color: rgba(255,255,255,0.85); }
.ph-blog-b { background: linear-gradient(135deg, #FFD60A, #FFB80A); color: rgba(0,0,0,0.55); }
.ph-blog-c { background: linear-gradient(135deg, #FF3B30, #C82820); color: rgba(255,255,255,0.85); }

/* FAQ */
.faq-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; border-bottom: 1px solid var(--gray-300);
  cursor: pointer; gap: 16px;
  font-size: 16px; font-weight: 500; color: var(--ink-black);
}
.faq-toggle {
  width: 32px; height: 32px;
  background: var(--brand-blue); color: #fff;
  border-radius: 6px;
  display: grid; place-items: center;
  font-weight: 600; font-size: 18px; line-height: 1;
  flex-shrink: 0;
}
.faq-answer {
  padding: 4px 0 22px;
  font-size: 15px; color: var(--gray-600); line-height: 1.6;
  border-bottom: 1px solid var(--gray-300);
}

/* Inputs */
.input {
  font-family: var(--font-sans); font-size: 16px;
  padding: 12px 16px; border-radius: 8px; border: 1px solid var(--gray-300);
  background: #fff; color: var(--ink-black); outline: none;
  transition: border-color var(--dur) var(--ease-out);
  min-height: 48px;
}
.input:focus { border-color: var(--brand-blue); }

/* Wave divider container */
.wave {
  position: relative; height: 100px; overflow: hidden;
  background: var(--paper-white);
}
.wave svg { position: absolute; inset: 0; width: 100%; height: 100%; }