/* Signal & Stock — site styles. Self-hosted fonts (SIL OFL 1.1, see /fonts). */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/fraunces-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  --paper: #F5F2EB;
  --paper-2: #EDE8DC;
  --line: #DDD7CA;
  --ink: #17191E;
  --ink-2: #3C4047;
  --muted: #5A5E65;
  --teal: #0F4C4A;
  --teal-dark: #0A3533;
  --accent: #B04428;       /* white text on this = 5.67:1 */
  --accent-dark: #8F381E;  /* hover, 7.63:1 */
  --white: #FFFFFF;
  --focus: #0F4C4A;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --pad: 6rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--teal); text-underline-offset: 0.15em; }
a:hover { color: var(--teal-dark); }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: 4.25rem; line-height: 1.04; letter-spacing: -0.02em; }
h2 { font-size: 3.25rem; line-height: 1.1; }
h3 { font-weight: 600; }

/* Accessibility helpers */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 10; background: var(--ink); color: var(--paper); padding: 0.75rem 1.25rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 1rem; color: var(--paper); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: #F5F2EB; }

.wrap { max-width: 1440px; margin: 0 auto; }
.eyebrow { font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }

/* Buttons (links styled as buttons; each goes somewhere real) */
.btn { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; border-radius: 999px; font-weight: 600; font-size: 1.0625rem; padding: 1rem 1.75rem; }
.btn-accent { background: var(--accent); color: var(--white); }
.btn-accent:hover { background: var(--accent-dark); color: var(--white); }
.btn-outline { color: var(--ink); border: 1px solid var(--ink); font-weight: 500; }
.btn-outline:hover { background: var(--ink); color: var(--paper); }

/* Header */
.site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 1.75rem var(--pad); border-bottom: 1px solid var(--line); gap: 1rem 1.5rem; }
.logo { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px; text-decoration: none; color: var(--ink); }
.logo-text { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 2.25rem; font-size: 1rem; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--teal); text-decoration: underline; }
.site-nav .nav-cta { background: var(--ink); color: var(--paper); padding: 0 1.375rem; border-radius: 999px; font-weight: 500; }
.site-nav .nav-cta:hover { background: var(--teal); color: var(--paper); text-decoration: none; }

/* Hero */
.hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4.5rem; align-items: center; padding: 6.5rem var(--pad) 7rem; }
.hero-copy { display: flex; flex-direction: column; gap: 1.75rem; }
.hero-copy p { font-size: 1.25rem; line-height: 1.6; color: var(--ink-2); max-width: 35rem; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; padding-top: 0.5rem; }

.report { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; box-shadow: 0 24px 48px rgba(23, 25, 30, 0.08); }
.report-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.report-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.report-tag { font-family: var(--mono); font-size: 0.8125rem; color: #6A6E75; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.kpi { background: var(--paper); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
.kpi-label { font-size: 0.8125rem; color: var(--muted); }
.track { height: 10px; background: var(--line); border-radius: 5px; }
.host-track { flex-grow: 1; height: 14px; background: var(--paper); border-radius: 7px; }
.fill { height: 100%; border-radius: inherit; background: var(--teal); }
.fill.accent { background: var(--accent); }
.hosts { display: flex; flex-direction: column; gap: 0.75rem; }
.hosts-title, .list-title { font-size: 0.875rem; font-weight: 600; }
.host-row { display: flex; align-items: center; gap: 0.75rem; }
.host-name { width: 6rem; font-size: 0.875rem; color: var(--ink-2); }
.lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.list-card { border: 1px solid var(--line); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.bar { height: 8px; background: #E9E4D8; border-radius: 4px; }
/* Fixed widths for the decorative sample bars (no inline styles, so CSP can stay strict) */
.w-41 { width: 41%; } .w-55 { width: 55%; } .w-60 { width: 60%; } .w-62 { width: 62%; } .w-64 { width: 64%; }
.w-70 { width: 70%; } .w-75 { width: 75%; } .w-78 { width: 78%; } .w-85 { width: 85%; } .w-88 { width: 88%; }
.w-90 { width: 90%; } .w-92 { width: 92%; }

/* Proof band */
.proof { background: var(--ink); color: var(--paper); padding: 3.5rem var(--pad); }
.proof ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem; }
.stat { display: flex; flex-direction: column; gap: 0.5rem; }
.stat-num { font-family: var(--serif); font-size: 3rem; font-weight: 600; line-height: 1.1; }
.stat-label { font-size: 1rem; line-height: 1.5; color: #C9C4B8; }

/* Sections */
.block { padding: 7.5rem var(--pad) 6rem; display: flex; flex-direction: column; gap: 3.5rem; }
.block.tint { background: var(--paper-2); padding: 6rem var(--pad); gap: 3rem; }
.section-head { display: flex; flex-direction: column; gap: 1.25rem; max-width: 51rem; }
.grid-3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 2rem; display: flex; flex-direction: column; gap: 0.875rem; }
.tint .card { border-color: transparent; gap: 0.75rem; }
.card h3 { font-size: 1.375rem; }
.card p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.tint .card p { font-size: 1rem; }
.tag { font-family: var(--mono); font-size: 0.8125rem; color: var(--teal); }
.beyond { background: var(--ink); color: var(--paper); border-radius: 16px; padding: 2.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; align-items: center; }
.beyond .tag { letter-spacing: 0.08em; color: #E7B7A5; }
.beyond h3 { font-family: var(--serif); font-size: 2.125rem; line-height: 1.15; margin-top: 0.75rem; }
.beyond p { font-size: 1.0625rem; line-height: 1.65; color: #D9D4C8; }

/* Case study */
.case { padding: 7.5rem var(--pad); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4.5rem; align-items: start; }
.case-copy { display: flex; flex-direction: column; gap: 1.25rem; }
.case-copy p { font-size: 1.125rem; line-height: 1.65; color: var(--ink-2); }
.case-copy .btn { align-self: flex-start; margin-top: 0.5rem; font-size: 1rem; padding: 0.875rem 1.5rem; }
.wins { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.win { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 1.75rem; display: flex; gap: 1.25rem; }
.win-num { font-family: var(--mono); font-size: 0.9375rem; color: var(--accent); font-weight: 500; }
.win h3 { font-size: 1.1875rem; margin-bottom: 0.375rem; }
.win p { font-size: 1rem; line-height: 1.6; color: var(--ink-2); }

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.step { display: flex; flex-direction: column; gap: 0.875rem; border-top: 3px solid var(--ink); padding-top: 1.5rem; }
.step h3 { font-size: 1.5rem; }
.step p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }

/* About */
.about { padding: 7.5rem var(--pad); display: grid; grid-template-columns: 22.5rem minmax(0, 1fr); gap: 4.5rem; align-items: center; }
.headshot { display: block; width: 22.5rem; height: auto; aspect-ratio: 6 / 7; object-fit: cover; object-position: 50% 30%; border-radius: 20px; background: var(--paper-2); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; }
.about-copy { display: flex; flex-direction: column; gap: 1.25rem; }
.about-copy h2 { font-size: 3rem; }
.about-copy p { font-size: 1.125rem; line-height: 1.7; color: var(--ink-2); max-width: 45rem; }

/* Contact */
.contact { margin: 0 var(--pad); background: var(--teal); color: var(--paper); border-radius: 24px; padding: 4.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; align-items: center; }
.contact h2 { line-height: 1.08; }
.contact p { font-size: 1.125rem; line-height: 1.6; color: #D2E1DF; margin-top: 1.125rem; }
.contact-actions { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.contact-actions .btn { font-size: 1.125rem; padding: 1.125rem 2rem; }
.contact-email { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); font-family: var(--mono); font-size: 1rem; overflow-wrap: anywhere; }
.contact-email:hover { color: var(--white); }

/* Footer */
.site-footer { padding: 3rem var(--pad); display: flex; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; font-size: 0.9375rem; color: var(--muted); }
.site-footer .brand { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); }

/* 404 */
.notfound { min-height: 60vh; padding: 6rem var(--pad); display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; justify-content: center; }

/* Tablet */
@media (max-width: 1100px) {
  :root { --pad: 3rem; }
  h1 { font-size: 3.375rem; }
  h2 { font-size: 2.625rem; }
  .hero, .case { gap: 3rem; }
  .site-nav ul { gap: 0.25rem 1.5rem; }
  .proof ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone */
@media (max-width: 820px) {
  :root { --pad: 1.25rem; }
  .site-header { padding: 1rem var(--pad); }
  .site-nav { width: 100%; }
  .site-nav ul { gap: 0 1.25rem; font-size: 0.9375rem; }
  .site-nav .nav-cta { margin-left: auto; padding: 0 1rem; }
  .logo-text { font-size: 1.25rem; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2.125rem; }
  .hero { grid-template-columns: 1fr; padding: 3.5rem var(--pad) 4rem; gap: 2.5rem; }
  .hero-copy p { font-size: 1.125rem; }
  .report { padding: 1.25rem; }
  .kpis { gap: 0.5rem; }
  .kpi { padding: 0.75rem; }
  .proof { padding: 2.5rem var(--pad); }
  .proof ul { gap: 1.75rem; }
  .stat-num { font-size: 2.25rem; }
  .stat-label { font-size: 0.875rem; }
  .block { padding: 4.5rem var(--pad) 3.5rem; gap: 2rem; }
  .block.tint { padding: 4rem var(--pad); gap: 2rem; }
  .grid-3, .steps { grid-template-columns: 1fr; gap: 1rem; }
  .card { padding: 1.5rem; }
  .beyond { grid-template-columns: 1fr; gap: 1rem; padding: 1.75rem; }
  .beyond h3 { font-size: 1.75rem; }
  .case { grid-template-columns: 1fr; padding: 4.5rem var(--pad); gap: 2rem; }
  .win { padding: 1.375rem; }
  .about { grid-template-columns: 1fr; padding: 4.5rem var(--pad); gap: 2rem; }
  .headshot { width: 100%; max-width: 22.5rem; }
  .about-copy h2 { font-size: 2.125rem; }
  .contact { padding: 2.25rem 1.5rem; grid-template-columns: 1fr; gap: 1.75rem; border-radius: 20px; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}

/* Very small phones */
@media (max-width: 360px) {
  h1 { font-size: 2.125rem; }
  .kpis { grid-template-columns: 1fr; }
  .lists { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .skip-link, .site-nav, .report { display: none; }
  body { background: #fff; }
}