/* ============================================================
   simple-record-count.css  ·  page-specific styles
   ------------------------------------------------------------
   Styles that ONLY this case study uses. The shared case-study
   components come from case-study.css; this file is just the
   tweaks and extras specific to this page.

   Link after tokens.css, base.css, case-study.css.
   ============================================================ */



  /* ============================================================
     DESIGN TOKENS — LIGHT MODE
     ============================================================ */

  .sidebar-title { font-family: 'Instrument Serif', serif; color: var(--color-text-primary); font-size: 22px; line-height: 1.1; margin-bottom: 24px; letter-spacing: 0.01em; }

  .eyebrow { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.14em; color: var(--color-text-muted); text-transform: uppercase; margin-bottom: 16px; }

  .eyebrow--accent { color: var(--color-accent); }

  .subhead { font-size: 14px; color: var(--color-text-tertiary); line-height: 1.6; margin-bottom: 12px; }

  .meta-value { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 14px; color: var(--color-text-primary); }


  /* ============================================================
     HERO IMAGE
     ============================================================ */
  .hero-img { width: 100%; height: auto; display: block; background: var(--color-bg-placeholder); border: 0.5px solid var(--color-border-card); border-radius: 4px; margin-bottom: 80px; cursor: zoom-in; transition: opacity 0.15s ease; }

  .role-tags { font-family: 'Instrument Sans', sans-serif; font-size: 15px; font-weight: 400; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 32px; }


  /* ============================================================
     IMAGE PLACEHOLDER
     ============================================================ */
  .img-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }

  .img-placeholder svg { opacity: 0.3; }

  .placeholder-tag { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-placeholder); }

  .placeholder-label { font-family: 'Instrument Sans', sans-serif; font-size: 12px; color: var(--color-text-placeholder); }


  /* ============================================================
     JOURNEY
     ============================================================ */
  .journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 32px; align-items: start; }

  .journey--ba { grid-template-columns: 1.45fr 1fr; align-items: start; }


  /* ============================================================
     PHOTO PAIR
     ============================================================ */
  .photo-pair { display: grid; grid-template-columns: 1fr 2.44fr; gap: 12px; margin-top: 16px; align-items: start; }

  .photo-item { display: flex; flex-direction: column; margin: 0; }

  .photo-item img { width: 100%; height: auto; border-radius: 4px; border: 0.5px solid var(--color-border-card); cursor: zoom-in; transition: opacity 0.15s ease; display: block; }

  .photo-item img:hover { opacity: 0.9; }

  .photo-caption { font-family: 'Instrument Sans', sans-serif; font-size: 13px; line-height: 1.6; color: var(--color-text-tertiary); margin-top: 12px; padding-top: 12px; border-top: 0.5px solid var(--color-border-hairline); }

  @media (max-width: 640px) { .photo-pair { grid-template-columns: 1fr; } }

  .row-title { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 15px; color: var(--color-text-primary); margin-bottom: 4px; }

  .row-desc { font-family: 'Instrument Sans', sans-serif; font-weight: 400; font-size: 13px; line-height: 1.6; color: var(--color-text-tertiary); }


  /* ============================================================
     METRIC CARDS
     ============================================================ */
  .metric-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

  .metric-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 12px; }

  .metric-card { background: var(--color-bg-card); padding: 22px; border-radius: 4px; border: 0.5px solid var(--color-border-card); }

  .metric-card--featured { background: var(--color-bg-card-featured); border: 0.5px solid var(--color-border-accent); padding: 28px; }

  .metric-eyebrow { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 0.14em; color: var(--color-accent); text-transform: uppercase; margin-bottom: 12px; }

  .metric-num--lg { font-family: 'Instrument Serif', serif; font-size: 48px; color: var(--color-text-primary); line-height: 1; }

  .metric-num--md { font-family: 'Instrument Serif', serif; font-size: 36px; color: var(--color-text-primary); line-height: 1; }

  .metric-num--sm { font-family: 'Instrument Serif', serif; font-size: 30px; color: var(--color-text-primary); line-height: 1; }

  .metric-label { font-family: 'Instrument Sans', sans-serif; font-weight: 400; font-size: 12px; line-height: 1.5; color: var(--color-text-tertiary); margin-top: 10px; }


  /* ============================================================
     BEFORE / AFTER
     ============================================================ */
  .before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  .ba-label { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 6px; color: var(--color-text-muted); }

  .ba-label--after { color: var(--color-accent); }

  .ba-img { height: 220px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; }

  .ba-img--before { background: var(--color-bg-placeholder); color: var(--color-text-placeholder); border: 0.5px solid var(--color-border-card); }

  .ba-img--after  { background: var(--color-bg-after); color: var(--color-text-tertiary); border: 0.5px solid var(--color-border-after); }


  /* ============================================================
     FIELD PHOTO
     ============================================================ */
  .field-img { height: 200px; background: var(--color-bg-placeholder); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--color-text-placeholder); border: 0.5px solid var(--color-border-card); margin-top: 16px; }


  /* ============================================================
     OUTCOME CALLOUT
     ============================================================ */
  .callout { background: var(--color-bg-callout); border-left: 2px solid var(--color-accent); padding: 20px 24px; border-radius: 0 4px 4px 0; }

  .callout-eyebrow { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.10em; color: var(--color-accent); text-transform: uppercase; margin-bottom: 8px; }

  .callout p { font-family: 'Instrument Sans', sans-serif; font-weight: 500; font-size: 14px; line-height: 1.6; color: var(--color-text-primary); }

  .timeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: -60px; }

  .tl-dot--filled { background: var(--color-accent); }

  .tl-dot--final { width: 16px; height: 16px; background: var(--color-text-primary); box-shadow: 0 0 0 3px var(--color-bg-page), 0 0 0 5px var(--color-accent); border: none; }

  .tl-title { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 12px; color: var(--color-text-primary); line-height: 1.4; margin-bottom: 4px; }

  .tl-date  { font-family: 'Instrument Sans', sans-serif; font-weight: 400; font-size: 11px; color: var(--color-text-muted); }


  /* ============================================================
     PAGE FOOTER
     ============================================================ */
  .page-footer { border-top: 0.5px solid var(--color-border-hairline); padding-top: 20px; display: flex; justify-content: space-between; align-items: baseline; margin-top: 40px; }

  .footer-label { font-size: 11px; color: var(--color-text-faint); }

  .footer-next { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 12px; color: var(--color-accent); text-decoration: none; transition: opacity 0.15s ease, transform 0.15s ease; display: inline-block; }


  /* Mobile */
  @media (max-width: 640px) {
    .site-nav { padding: 0 20px; }
    .nav-link, .nav-divider { display: none; }
    .cs-content { padding: 32px 20px 64px; }
    h1 { font-size: 28px; }
    .metadata { grid-template-columns: 1fr; }
    .metric-grid-3, .metric-grid-2 { grid-template-columns: 1fr; }
    .before-after { grid-template-columns: 1fr; }
    .journey, .journey--ba { grid-template-columns: 1fr; }
    .timeline-grid { grid-template-columns: repeat(2, 1fr); }
    .card-pair { grid-template-columns: 1fr; }
    .screenshot-grid-3, .screenshot-grid-2 { grid-template-columns: 1fr; }
    .page-footer { flex-direction: column; gap: 8px; }
  }

  /* case-study.css sets `background: #ffffff` on this selector (Sideline
     wants a white matte behind transparent PNGs). This page never had it,
     so it is explicitly reset here to preserve the original appearance.
     Drop this line if you decide the white matte should apply site-wide. */
  .lightbox-inner img { max-width: 100%; max-height: 85vh; width: auto; height: auto; border-radius: 6px; display: block; box-shadow: 0 24px 64px rgba(0,0,0,0.5); background: transparent; }

.site-footer { display: flex; align-items: center; justify-content: space-between; padding: 24px 48px; border-top: 0.5px solid var(--color-border-hairline); }

.footer-copy { font-family: 'Instrument Sans', sans-serif; font-size: 13px; color: var(--color-text-muted); }

.footer-link { font-family: 'Instrument Sans', sans-serif; font-size: 13px; color: var(--color-text-muted); text-decoration: none; margin-left: 20px; }

.footer-link:hover { color: var(--color-text-primary); }

@media (max-width: 640px) { .site-footer { padding: 20px; align-items: center; } }

@font-face { font-family: 'Aretha Bridge'; src: url('../assets/fonts/Aretha Bridge.otf') format('opentype'); }

#intro-overlay { position: fixed; inset: 0; z-index: 1000; background: #14172A; display: flex; align-items: center; justify-content: center; overflow: hidden; }

#intro-content { position: relative; z-index: 3; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }

#intro-name { display: block; font-family: 'Aretha Bridge', 'Instrument Serif', serif; font-size: clamp(24px, 3.5vw, 52px); color: #f5f5f0; line-height: 1; letter-spacing: 0.01em; }

#intro-sub { display: block; font-family: 'Instrument Sans', sans-serif; font-size: 13px; font-weight: 400; color: rgba(245,245,240,0.38); margin-top: 14px; letter-spacing: 0.08em; }

#page-wrap { opacity: 0; }