/* =========================================================
   KYLE & CO — shared site styles (mockup + handoff source)
   Tokens, type, chrome, and the new brand-system components.
   Claude Code: this is the canonical reference.
   ========================================================= */

/* — Fonts (self-hosted, Fraunces variable + Roboto) — */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Variable.ttf') format('truetype-variations'),
       url('fonts/Fraunces-Variable.ttf') format('truetype');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Variable-Italic.ttf') format('truetype-variations'),
       url('fonts/Fraunces-Variable-Italic.ttf') format('truetype');
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Roboto'; src:url('fonts/Roboto-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

/* JetBrains Mono for eyebrow / tag micro-type (per HCAIC site reference) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

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

:root {
  /* Core palette (matches design system) */
  --navy:        #273752;
  --navy-dark:   #1A2438;
  --navy-700:    #1F2C44;
  --lilac:       #9D92AD;
  --lilac-soft:  #C7BFD2;
  --ivory:       #F7F1EA;
  --ivory-warm:  #F1E9DE;
  --slate:       #555961;
  --cream:       #FDECCD;
  --cream-deep:  #F5DDA6;
  --white:       #FFFFFF;
  --sky:         #9AB8DC;
  --red:         #D9342B;

  /* Persona tints — used as section accents per page */
  --persona-home:           var(--cream);       /* warm, brand-centric */
  --persona-research:       var(--sky);         /* analytical, cool */
  --persona-practitioners:  var(--cream);       /* collegial, warm */
  --persona-vendors:        var(--lilac);       /* sharper, refined */

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Roboto', -apple-system, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Monaco, monospace;

  /* Spacing — 4px base */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem;
  --space-9: 4rem;   --space-10: 6rem;

  /* Radii */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 100px;

  /* Shadows (navy-tinted, low-opacity) */
  --shadow-xs: 0 1px 2px rgba(39,55,82,.06);
  --shadow-sm: 0 2px 8px rgba(39,55,82,.07);
  --shadow-md: 0 8px 24px rgba(39,55,82,.10);
  --shadow-lg: 0 16px 40px rgba(39,55,82,.14);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--navy);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* — Typography — */
.kc-eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--slate); font-weight: 400;
  display: inline-flex; align-items: center; gap: .65rem;
}
.kc-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 3px rgba(253,236,205,.2);
  animation: kcPulseDot 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes kcPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.2); }
}
.kc-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  line-height: 1.02;
  letter-spacing: -.022em;
}
.kc-display em, .kc-emphasis {
  font-style: italic; font-weight: 400; color: var(--lilac);
}
.kc-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  line-height: 1.08; letter-spacing: -.02em;
  color: var(--navy);
}
.kc-h2 em { font-style: italic; color: var(--lilac); }
.kc-body { font-size: 1rem; line-height: 1.7; color: var(--slate); }

/* — Buttons — */
.btn-primary, .btn-ghost, .btn-link {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; font-size: .95rem; font-weight: 500;
  transition: background .2s cubic-bezier(.22,1,.36,1), border-color .2s, color .2s, transform .2s;
  letter-spacing: .005em;
  font-family: var(--font-body);
}
.btn-primary {
  background: var(--navy); color: var(--ivory);
  padding: 1.05rem 2rem; border-radius: var(--r-pill);
}
.btn-primary:hover { background: var(--navy-dark); }
.btn-ghost {
  background: transparent; color: var(--navy);
  border-bottom: 1px solid rgba(39,55,82,.25);
  padding: 0 0 2px;
  border-radius: 0;
}
.btn-ghost:hover { border-bottom-color: var(--navy); }
.btn-ghost.on-dark { color: var(--ivory); border-bottom-color: rgba(247,241,234,.3); }
.btn-ghost.on-dark:hover { border-bottom-color: var(--ivory); }
.btn-cream {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--cream); color: var(--navy-dark);
  padding: 1.05rem 2rem; border-radius: var(--r-pill);
  font-size: .95rem; font-weight: 600;
  text-decoration: none;
  font-family: var(--font-body);
  transition: background .2s;
}
.btn-cream:hover { background: var(--cream-deep); }
.btn-link {
  padding: 0; background: transparent; border-radius: 0;
  color: var(--navy); border-bottom: 1px solid rgba(39,55,82,.3);
  padding-bottom: 2px; font-weight: 500;
}
.btn-link.on-dark { color: var(--cream); border-bottom-color: rgba(253,236,205,.4); }

/* — Top nav (shared) — */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--ivory);
  padding: 0 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
  border-bottom: 1px solid rgba(39,55,82,.08);
  backdrop-filter: blur(8px);
}
.topbar-brand {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none;
}
.topbar-brand img { height: 24px; width: auto; display: block; }
.topbar-brand .wm {
  font-family: var(--font-display);
  color: var(--navy); font-size: 1.05rem;
  letter-spacing: -.01em; font-weight: 500;
}
.topbar-nav { display: flex; gap: 1.85rem; align-items: center; }
.topbar-nav a {
  font-family: var(--font-body);
  font-size: .85rem; color: rgba(39,55,82,.7);
  text-decoration: none; transition: color .15s;
}
.topbar-nav a:hover, .topbar-nav a.active { color: var(--navy); }
.topbar-cta {
  background: var(--navy); color: var(--ivory);
  text-decoration: none; font-size: .8rem; font-weight: 500;
  padding: .55rem 1.15rem; border-radius: var(--r-pill);
  white-space: nowrap;
  font-family: var(--font-body);
  transition: background .2s;
}
.topbar-cta:hover { background: var(--navy-dark); }
/* Hamburger (injected by site.js) — hidden on desktop */
.nav-toggle { display: none; }
.topbar-nav .mobile-cta { display: none; }

/* — Footer (shared) — */
.site-footer {
  background: var(--ivory);
  padding: 3rem 2.5rem;
  border-top: 1px solid rgba(39,55,82,.08);
  position: relative;
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.25rem;
}
.footer-brand { color: var(--navy); text-decoration: none; font-family: var(--font-display); font-size: 1rem; }
.footer-links { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.footer-links a {
  font-family: var(--font-body);
  font-size: .82rem; color: rgba(39,55,82,.55);
  text-decoration: none; transition: color .15s;
}
.footer-links a:hover { color: var(--navy); }
.footer-copy { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: rgba(39,55,82,.4); width: 100%; }

/* — Layout primitives — */
.container { max-width: 1200px; margin: 0 auto; }
.section { padding: 6rem 2.5rem; }
.section-narrow { padding: 5rem 2.5rem; }

/* =========================================================
   NEW BRAND COMPONENTS (the additions Claude Code implements)
   ========================================================= */

/* — Subtle grid overlay (HCAIC site signature) — */
.bg-grid {
  position: relative;
  background-image:
    linear-gradient(rgba(39,55,82,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39,55,82,.035) 1px, transparent 1px);
  background-size: 56px 56px;
}
.bg-grid.on-dark {
  background-image:
    linear-gradient(rgba(247,241,234,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,241,234,.045) 1px, transparent 1px);
}

/* — Single ampersand corner watermark (HCAIC site signature) —
   The brand fingerprint. Used ONCE per section, low opacity, bleeding off a corner. */
.kc-corner-mark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  width: 48%;
  max-width: 560px;
  opacity: .06;
}
.kc-corner-mark.br { right: -4%; bottom: -10%; }
.kc-corner-mark.bl { left: -4%; bottom: -10%; transform: scaleX(-1); }
.kc-corner-mark.tr { right: -4%; top: -8%; transform: scaleY(-1); }
.kc-corner-mark.tl { left: -4%; top: -8%; transform: scale(-1,-1); }
.kc-corner-mark.on-dark { opacity: .08; filter: invert(1); }

/* — Image frames (consistent treatment for ALL photography) — */
.kc-img {
  display: block;
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-md);
}
.kc-img-tall { aspect-ratio: 3/4; }
.kc-img-portrait { aspect-ratio: 4/5; }
.kc-img-wide { aspect-ratio: 16/10; }
.kc-img-square { aspect-ratio: 1/1; }

/* Image placeholder used in this mockup (Claude Code: <img class="kc-img"> in production) */
.kc-img-ph {
  display: flex; align-items: flex-end; justify-content: flex-start;
  background: linear-gradient(135deg, rgba(157,146,173,.32), rgba(39,55,82,.18));
  color: var(--ivory);
  border-radius: var(--r-md);
  padding: 1.25rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: .95rem;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  position: relative;
  overflow: hidden;
}
.kc-img-ph::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('img/pattern.png');
  background-size: 380px auto;
  opacity: .15;
}
.kc-img-ph::after {
  content: attr(data-tag);
  position: absolute; top: .9rem; left: .9rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600;
  color: rgba(247,241,234,.85);
  padding: .3rem .55rem;
  background: rgba(39,55,82,.55);
  border-radius: 100px;
  backdrop-filter: blur(4px);
}
.kc-img-ph > span { position: relative; z-index: 1; }

/* Persona variants of placeholder so each page reads differently */
.kc-img-ph.is-warm  { background: linear-gradient(135deg, rgba(253,236,205,.85), rgba(157,146,173,.5)); color: var(--navy); text-shadow: none; }
.kc-img-ph.is-warm::after { background: rgba(39,55,82,.85); color: var(--cream); }
.kc-img-ph.is-cool  { background: linear-gradient(135deg, rgba(154,184,220,.55), rgba(39,55,82,.65)); }
.kc-img-ph.is-deep  { background: linear-gradient(160deg, rgba(39,55,82,.85), rgba(26,36,56,.95)); }

/* — Profile-picture treatment (team + testimonials) —
   Brand profile-pictures are a square card w/ photo over solid color.
   Used in two sizes: lg (team) and sm (testimonials). */
.kc-pp {
  display: block;
  aspect-ratio: 1/1;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}
.kc-pp.is-circle { border-radius: 50%; }
.kc-pp-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: top center;
  background-color: rgba(157,146,173,.18);
}
/* Three persona-compliant background variants */
.kc-pp.bg-navy  { background: var(--navy); }
.kc-pp.bg-cream { background: var(--cream); }
.kc-pp.bg-lilac { background: var(--lilac); }
/* Initial fallback (for testimonials without a photo yet) */
.kc-pp-initial {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  font-style: italic;
}
.bg-navy  .kc-pp-initial { color: var(--cream); }
.bg-cream .kc-pp-initial { color: var(--navy); }
.bg-lilac .kc-pp-initial { color: var(--ivory); }

/* — Deconstructed brand marks (corner accents) — */
.kc-mark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: .9;
}
.kc-mark-tl { top: 0; left: 0; }
.kc-mark-tr { top: 0; right: 0; transform: scaleX(-1); }
.kc-mark-bl { bottom: 0; left: 0; transform: scaleY(-1); }
.kc-mark-br { bottom: 0; right: 0; transform: scale(-1,-1); }

/* — Italic-lilac phrase treatment (used in headlines) — */
.kc-italic-phrase {
  font-style: italic;
  color: var(--lilac);
  font-weight: 400;
}
.on-dark .kc-italic-phrase { color: var(--cream); }

/* — Cream highlight panel (key-idea callouts) — */
.kc-cream-panel {
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 2.5rem 2.75rem;
  position: relative;
  overflow: hidden;
}
.kc-cream-panel-mark {
  position: absolute;
  right: -2rem; bottom: -3rem;
  width: 220px; height: auto;
  opacity: .35;
  pointer-events: none;
}

/* — Editorial blog-card style (stacked color blocks) — */
.kc-blog-card {
  aspect-ratio: 1/1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--cream);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr 1fr 1fr auto;
  padding: 1rem;
  gap: .4rem;
}
.kc-blog-card .block {
  padding: .65rem .9rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -.015em;
  display: flex; align-items: center;
}
.kc-blog-card .block.navy   { background: var(--navy); color: var(--ivory); }
.kc-blog-card .block.sky    { background: var(--sky);  color: var(--navy); }
.kc-blog-card .block.cream  { background: var(--ivory-warm); color: var(--navy); }
.kc-blog-card .block.lilac  { background: var(--lilac); color: var(--ivory); }
.kc-blog-card .meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--slate); padding: 0 .25rem;
}
.kc-blog-card .author {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-size: .7rem; letter-spacing: 0;
  text-transform: none; color: var(--navy); padding: .25rem;
}
.kc-blog-card .author .kc-pp { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }

/* — Hand-drawn accent line (Gamma-style, SVG) — */
.kc-accent-line {
  position: absolute;
  pointer-events: none;
  opacity: .55;
}

/* — Persona band (small color band at top of persona heroes) — */
.persona-band {
  height: 5px;
  width: 100%;
}
.persona-band.home          { background: linear-gradient(90deg, var(--cream), var(--lilac)); }
.persona-band.research      { background: linear-gradient(90deg, var(--sky), var(--lilac)); }
.persona-band.practitioners { background: linear-gradient(90deg, var(--cream), var(--ivory-warm)); }
.persona-band.vendors       { background: linear-gradient(90deg, var(--lilac), var(--navy-700)); }

/* — Mobile — */
@media (max-width: 900px) {
  .topbar { padding: 0 1.25rem; height: 56px; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    background: none; border: 0; cursor: pointer; padding: .5rem; margin: 0 -.5rem 0 auto;
  }
  .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .25s, opacity .2s; }
  .topbar.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .topbar.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .topbar.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .topbar-cta { display: none; }
  .topbar-nav {
    display: none;
    position: fixed; top: 56px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ivory); border-bottom: 1px solid rgba(39,55,82,.1);
    box-shadow: var(--shadow-md); padding: .25rem 1.25rem 1.25rem;
    max-height: calc(100vh - 56px); overflow-y: auto;
  }
  .topbar.nav-open .topbar-nav { display: flex; }
  .topbar-nav a { padding: .95rem .25rem; font-size: 1rem; color: var(--navy); border-bottom: 1px solid rgba(39,55,82,.07); }
  .topbar-nav .mobile-cta {
    display: block; text-align: center; margin-top: 1.1rem; border-bottom: 0;
    background: var(--navy); color: var(--ivory); text-decoration: none;
    font-size: .9rem; font-weight: 500; font-family: var(--font-body);
    padding: .85rem 1.15rem; border-radius: var(--r-pill);
  }
  .section, .section-narrow { padding: 4rem 1.5rem; }
  .site-footer { padding: 2.5rem 1.5rem; }
}