/* home.css — homepage-specific overrides on top of site-chrome.css + variables.css */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-inter);
  background: var(--color-canvas-white);
  color: var(--color-ink-black);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─── BUTTONS ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-inter); font-weight: 600;
  cursor: pointer; border: none;
  transition: background-color 0.15s, opacity 0.15s, transform 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none; line-height: 1;
}
.btn:hover { opacity: 0.85; }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--color-neutral-accent); outline-offset: 2px; }

.btn-red,
.btn-red-lg,
.btn.btn-red,
.btn.btn-red-lg {
  background: var(--color-ink-black);
  color: var(--color-canvas-white);
  opacity: 1;
}
.btn-red:hover,
.btn-red-lg:hover,
.btn.btn-red:hover,
.btn.btn-red-lg:hover {
  opacity: 1;
  background: #2a2a2a;
  color: var(--color-canvas-white);
}
a.btn-red:link, a.btn-red:visited,
a.btn-red-lg:link, a.btn-red-lg:visited { color: var(--color-canvas-white); }
a.btn-outline:link, a.btn-outline:visited { color: var(--color-ink-black); }
a.btn-outline-red:link, a.btn-outline-red:visited { color: var(--color-ink-black); }

.btn-red     { font-size: 13px; height: 34px; padding: 0 16px; border-radius: var(--radius-buttons); }
.btn-outline {
  background: transparent;
  border: 1px solid var(--color-storm-gray);
  color: var(--color-ink-black);
  font-size: 13px; height: 34px; padding: 0 14px;
  border-radius: var(--radius-buttons);
}
.btn-outline:hover { opacity: 1; border-color: #3a3a3a; background: #f5f5f5; }
.btn-red-lg  { font-size: 15px; padding: 14px 28px; border-radius: var(--radius-buttons); }
.btn-ghost-lg {
  background: transparent; color: var(--color-ink-black);
  font-size: 15px; padding: 14px 18px; border-radius: var(--radius-buttons); font-weight: 500;
}
.btn-ghost-lg:hover { opacity: 1; background: #f5f5f5; }

/* ─── FADE-UP ANIMATION ─────────────────────────────────────────── */

.fade-up { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.d1 { transition-delay: 0.1s; }
.fade-up.d2 { transition-delay: 0.2s; }
.fade-up.d3 { transition-delay: 0.3s; }
.fade-up.d4 { transition-delay: 0.4s; }
.fade-up.d5 { transition-delay: 0.5s; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ─── NAV: Standard white nav — matches every other page ───────────
   Do not override site-chrome.css nav colors here.
   The nav-action "Sign in" CTA uses --color-neutral-accent per site-chrome.css.
   ──────────────────────────────────────────────────────────────── */

/* ─── SECTION WIDTH ALIGNMENT ──────────────────────────────────────
   Other pages (contact, terms, login) use max-width 1120px + 32px
   horizontal padding. Override the ported 1280px/48px values here.
   ──────────────────────────────────────────────────────────────── */
.section {
  max-width: 1120px !important;
  padding-left: var(--spacing-32) !important;
  padding-right: var(--spacing-32) !important;
}

/* ─── HERO ──────────────────────────────────────────────────────── */
.hero {
  max-width: 1120px !important;
  padding-top: 60px !important;
  padding-bottom: 48px !important;
  padding-left: var(--spacing-32) !important;
  padding-right: var(--spacing-32) !important;
  min-height: 0 !important;
}

/* Hide third-party fingerprint/radar SVG decorations */
.section-radar,
.hero-radar { display: none; }

/* ─── READABILITY ────────────────────────────────────────────────── */

.hero-title span { color: var(--color-ink-black) !important; }

.hero-eyebrow {
  background: var(--color-ink-black) !important;
  color: var(--color-canvas-white) !important;
}
.hero-eyebrow-dot { background: var(--color-canvas-white) !important; }

.hero-sub,
.callout-sub,
.section-sub,
.outcome-desc { color: #3a3a3a; }

.problem-num { color: var(--color-ink-black) !important; }

/* ─── TYPOGRAPHY: PP RADIO GROTESK FOR HEADLINES ───────────────── */

.hero-title,
.section-title,
.outcome-title,
.step-title,
.callout-quote,
.card-headline,
.portfolio-card-title,
.test-title,
.faq-q,
.compare-table th,
.footer-brand-name,
.announce-bar-text {
  font-family: var(--font-pp-radio-grotesk) !important;
}

.hero-eyebrow {
  font-family: var(--font-pp-radio-grotesk);
  letter-spacing: 0.06em;
}

.section-label {
  font-family: var(--font-pp-radio-grotesk);
  letter-spacing: 0.1em;
}

/* ─── BORDER RADIUS: DESIGN.md only allows 6px (cards) and 80px (pills) */
.hero-card-main,
.case-card,
.test-card,
.blog-card,
.portfolio-card { border-radius: var(--radius-cards) !important; }

.hero-testimonial { border-radius: var(--radius-cards) !important; }

/* ─── DARK SECTION WIDTHS ──────────────────────────────────────── */
/* Remove horizontal padding from the background wrappers — let the
   inner containers handle centering to match 1120px / 32px pattern */
.outcomes-bg,
.cases-bg,
.work-bg {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.outcomes-inner,
.cases-inner {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--spacing-32) !important;
  padding-right: var(--spacing-32) !important;
}

/* Logo bar: white background to match the site's white aesthetic */
.logo-bar {
  background: var(--color-canvas-white) !important;
  border-top: 1px solid var(--color-storm-gray);
  border-bottom: 1px solid var(--color-storm-gray);
  padding-left: var(--spacing-32) !important;
  padding-right: var(--spacing-32) !important;
}
.logo-bar-inner { max-width: 1120px !important; }

/* Flip logos from white-on-dark to black-on-white */
.logo-bar-item img { filter: brightness(0) !important; opacity: 0.55 !important; }
.logo-bar-item:hover img { opacity: 0.85 !important; }
.logo-bar-item { border-right-color: var(--color-storm-gray) !important; }
.logo-bar-item:hover { background: #f5f5f5 !important; }
.logo-bar-label { color: var(--color-dim-gray) !important; }
.logo-bar-explore { color: var(--color-neutral-accent) !important; }
.logo-bar-stat { color: var(--color-dim-gray) !important; }

/* Cases / results section: white background (other pages are white-only) */
.cases-bg { background: var(--color-canvas-white) !important; }

/* Comparison table */
.compare-inner { max-width: 1120px !important; }
.compare-bg { background: var(--color-canvas-white) !important; padding-left: var(--spacing-32) !important; padding-right: var(--spacing-32) !important; }

/* CTA strip: solid ink-black (not gradient) to match design tokens */
.cta-strip { background: var(--color-ink-black) !important; padding-left: var(--spacing-32) !important; padding-right: var(--spacing-32) !important; }
.cta-inner { max-width: 720px !important; }

/* ─── OUTCOMES SECTION: dark → white ───────────────────────────── */
.outcomes-bg {
  background: var(--color-canvas-white) !important;
}
.outcomes-bg::after { display: none !important; }

.section-title.light { color: var(--color-ink-black) !important; }
.section-label.light { color: var(--color-dim-gray) !important; }
.section-sub.light   { color: #3a3a3a !important; }

.outcome-card {
  background: var(--color-canvas-white) !important;
  border: 1px solid var(--color-storm-gray) !important;
}
.outcome-card:hover {
  background: #f5f5f5 !important;
  border-color: var(--color-muted-gray) !important;
}
.outcome-number     { color: var(--color-dim-gray) !important; }
.outcome-title      { color: var(--color-ink-black) !important; }
.outcome-stats      { border-top-color: var(--color-storm-gray) !important; }
.outcome-stat-arrow { color: var(--color-ink-black) !important; }
.outcome-stat-text  { color: #3a3a3a !important; }
.outcome-stat-text strong { color: var(--color-ink-black) !important; }

/* ─── TESTIMONIALS SECTION: dark → white ───────────────────────── */
#testimonials { background: var(--color-canvas-white) !important; }

.test-card {
  background: var(--color-canvas-white) !important;
  border: 1px solid var(--color-storm-gray) !important;
  box-shadow: var(--shadow-sm) !important;
}
.test-quote  { color: #3a3a3a !important; }
.test-author { border-top-color: var(--color-storm-gray) !important; }
.test-logo   { filter: brightness(0) !important; opacity: 0.45 !important; }
.test-name   { color: var(--color-ink-black) !important; }
.test-role   { color: var(--color-dim-gray) !important; }

/* ─── WORK / PORTFOLIO SECTION: dark → white ────────────────────── */
.work-bg {
  background: var(--color-canvas-white) !important;
}
.work-bg::after { display: none !important; }

.work-bg .section-label.light { color: var(--color-dim-gray) !important; }

.work-bg .portfolio-card {
  background: var(--color-canvas-white) !important;
  border-color: var(--color-storm-gray) !important;
}
.work-bg .portfolio-card:hover {
  background: #f5f5f5 !important;
  border-color: var(--color-muted-gray) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.07) !important;
}
.work-bg .portfolio-title  { color: var(--color-ink-black) !important; }
.work-bg .portfolio-client { color: var(--color-dim-gray) !important; }
.work-bg .portfolio-arrow  { color: var(--color-dim-gray) !important; }
.work-bg .portfolio-card:hover .portfolio-arrow { color: var(--color-ink-black) !important; }
.work-bg .portfolio-format { background: #f5f5f5 !important; color: var(--color-dim-gray) !important; }
.work-bg .portfolio-format.research  { background: #F0F4FF !important; color: #3B5BDB !important; }
.work-bg .portfolio-format.sponsored { background: #F0FFF4 !important; color: #2B6840 !important; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .section { padding-left: var(--spacing-16) !important; padding-right: var(--spacing-16) !important; }
  .outcomes-bg, .cases-bg { padding-left: var(--spacing-16) !important; padding-right: var(--spacing-16) !important; }
}