/* ============================================================
   case-study.css
   Shared by /work/kokoro-farm/ and /work/dynojet/
   Tokens match index.html exactly. Do not change colors here
   without changing them in index.html too.
   ============================================================ */

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

:root {
  --teal:       #5F8A8B;
  --teal-dark:  #4a7273;
  --teal-light: #edf3f3;
  --white:      #F8F9FA;
  --slate:      #4A5568;
  --rose:       #b56f76;
  --rose-light: #f0dfe1;
  --rose-pale:  #faf5f5;
  --ink:        #2d3748;

  /* Section wash and header wash. Both pages run the teal section wash.
     The Dynojet page overrides the header only, via body.header-ink. */
  --wash:        #edf3f3;
  --wash-edge:   #dde8e8;
  --header-wash: #edf3f3;
  --header-edge: #dde8e8;
}

/* Header wash can differ from the section wash, per page. */
body.header-ink {
  --header-wash: var(--ink);
  --header-edge: var(--ink);
}

html { scroll-behavior: smooth; }
body {
  font-family: "Inter", sans-serif;
  color: var(--slate);
  background: var(--white);
  line-height: 1.7;
}

/* ---------- NAV ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  padding: 0 2.5rem; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background 0.3s, box-shadow 0.3s;
}
nav.scrolled {
  background: rgba(248,249,250,0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 #dde8e8;
}
.nav-logo { font-family: "Libre Baskerville", serif; font-size: 1.05rem; color: var(--rose); text-decoration: none; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--slate); text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--teal); }

/* ---------- SHARED SECTION SHELL ---------- */
section { padding: 72px 2.5rem; }
.section-inner { max-width: 800px; margin: 0 auto; }
.prose { max-width: none; }
.prose p { font-size: 1rem; line-height: 1.9; margin-bottom: 1.1rem; }
.prose p:last-child { margin-bottom: 0; }

h2 {
  font-family: "Libre Baskerville", serif;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--ink); line-height: 1.3; margin-bottom: 1.4rem;
}
h3 {
  font-family: "Libre Baskerville", serif;
  font-size: 1.05rem; color: var(--ink); margin-bottom: 0.35rem;
}

.section-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rose); margin-bottom: 0.9rem;
}
.section-label::before {
  content: ""; display: block; width: 20px; height: 2px;
  background: var(--rose); border-radius: 2px;
}

/* ---------- PAGE HEADER ---------- */
#page-header {
  background: var(--header-wash);
  padding: 130px 2.5rem 68px;
  border-bottom: 1px solid var(--header-edge);
}

/* Dark header variant.
   The nav is transparent until you scroll, so it sits on the navy at the
   top of the page and needs light type there. Once .scrolled kicks in the
   bar goes pale and the type returns to the normal colors. */
body.header-ink nav:not(.scrolled) .nav-links a { color: var(--rose); }
body.header-ink nav:not(.scrolled) .nav-links a:hover { color: var(--rose-light); }

body.header-ink h1 { color: #ffffff; }
body.header-ink #page-header .client-line { color: #9fc0c1; }
body.header-ink #page-header .back-link { color: #a0aec0; }
body.header-ink #page-header .header-eyebrow { color: var(--rose); }
body.header-ink #page-header .header-eyebrow::before { background: var(--rose); }

.back-link {
  display: block; font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.04em; color: var(--slate); text-decoration: none;
  margin-bottom: 0.5rem; opacity: 0.8; transition: color 0.2s, opacity 0.2s;
}
.back-link:hover { color: var(--teal); opacity: 1; }

.header-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rose); margin-bottom: 1.1rem;
}
.header-eyebrow::before {
  content: ""; display: block; width: 28px; height: 2px;
  background: var(--rose); border-radius: 2px;
}
h1 {
  font-family: "Libre Baskerville", serif;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.22; color: var(--ink); margin-bottom: 0.9rem;
  max-width: 22ch;
}
.client-line {
  font-size: 0.95rem; font-weight: 500; color: var(--teal-dark);
  margin-bottom: 1.9rem;
}

/* ---------- TEAL STAT CALLOUT ---------- */
.result-stat {
  padding: 1rem 1.2rem;
  background: var(--teal-light);
  border-left: 5px solid var(--teal);
  border-radius: 0 10px 10px 0;
  font-weight: 600; font-size: 0.95rem;
  color: var(--teal-dark); line-height: 1.6;
}
/* Header version: bigger, heavier, the loudest thing on the page */
#page-header .result-stat {
  background: var(--white);
  padding: 1.35rem 1.6rem;
  border-left-width: 5px;
  border-radius: 0 14px 14px 0;
  font-size: 1.12rem; font-weight: 700;
  line-height: 1.55;
}

/* ---------- CONVERSION BAR (Dynojet header) ---------- */
.conversion {
  background: var(--white);
  border-left: 5px solid var(--teal);
  border-radius: 0 14px 14px 0;
  padding: 1.6rem 1.7rem 1.5rem;
}
.conversion-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--teal-dark); margin-bottom: 1.1rem;
}
.bar-row { margin-bottom: 0.9rem; }
.bar-row:last-of-type { margin-bottom: 0; }
.bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.85rem; color: var(--slate); margin-bottom: 0.35rem;
}
.bar-head strong {
  font-family: "Libre Baskerville", serif;
  font-size: 1.35rem; color: var(--teal-dark); font-weight: 700;
}
.bar-track { height: 16px; background: #dce7e7; border-radius: 7px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 7px; background: var(--teal); }
.bar-fill.muted { background: #b7c9c9; }
.conversion-note {
  font-size: 0.82rem; line-height: 1.7; color: var(--slate);
  margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid #dbe7e7;
}

/* ---------- ROSE QUOTE INSET ---------- */
.quote-inset {
  margin: 2rem 0;
  padding: 1.4rem 1.6rem;
  background: var(--rose-pale);
  border-left: 3px solid var(--rose);
  border-radius: 0 10px 10px 0;
}
.quote-hero {
  font-family: "Libre Baskerville", serif; font-weight: 700;
  font-size: 1rem; color: var(--ink); line-height: 1.6;
  margin-bottom: 0.7rem;
}
.quote-full { font-size: 0.88rem; line-height: 1.85; margin-bottom: 0.85rem; }
.quote-sig {
  font-family: "Libre Baskerville", serif; font-style: italic;
  font-size: 0.92rem; color: var(--rose);
}

/* ---------- BEFORE / AFTER ---------- */
#flow { background: var(--wash); }
.flow-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; align-items: start; }
.flow-panel { background: var(--white); border: 1.5px solid var(--wash-edge); border-radius: 20px; padding: 1.8rem 1.7rem; }
.flow-panel.after { border-color: var(--teal); }
.flow-title {
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 1.1rem;
}
.flow-panel ol { list-style: none; counter-reset: flow; }
.flow-panel li {
  counter-increment: flow;
  position: relative; padding-left: 2.1rem;
  font-size: 0.9rem; line-height: 1.55; margin-bottom: 0.7rem;
}
.flow-panel li:last-child { margin-bottom: 0; }
.flow-panel li::before {
  content: counter(flow);
  position: absolute; left: 0; top: 0.05em;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal-light); color: var(--rose);
  font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.flow-panel.after li::before { background: var(--teal); color: white; }
.flow-single { font-size: 0.95rem; line-height: 1.7; }
.flow-after-note {
  margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid #dde8e8;
  font-size: 0.88rem; font-style: italic; color: var(--teal-dark);
}

/* ---------- FEATURE BLOCKS ---------- */
.feature-list { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 2rem; }
.feature { padding-left: 1.2rem; border-left: 2px solid var(--teal); }
.feature p { font-size: 0.94rem; line-height: 1.8; }

/* ---------- RESULTS ---------- */
#results { background: var(--wash); }
.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.result-card {
  background: var(--white);
  border: 1.5px solid #dde8e8;
  border-left: 5px solid var(--teal);
  border-radius: 16px;
  padding: 1.5rem 1.6rem;
}
.result-card h3 { margin-bottom: 0.45rem; }
.result-card p { font-size: 0.92rem; line-height: 1.75; }

.stat-figure {
  font-family: "Libre Baskerville", serif; font-weight: 700;
  font-size: 1.85rem; color: var(--teal-dark); line-height: 1.1;
  margin-bottom: 0.15rem;
}
.stat-caption {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 0.6rem;
}
.results-note {
  margin-top: 1.4rem; font-size: 0.8rem; line-height: 1.7;
  color: var(--slate); opacity: 0.85;
}

/* ---------- FINDINGS PANEL (Dynojet) ---------- */
.findings {
  margin-top: 2rem;
  background: var(--white); border-left: 5px solid var(--teal);
  border-radius: 0 12px 12px 0; padding: 1.4rem 1.6rem;
}
.findings-head {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--teal-dark); margin-bottom: 0.9rem;
}
/* One square per issue: 3 critical in teal, 46 in muted teal */
.findings-grid { display: grid; grid-template-columns: repeat(25, 1fr); gap: 6px; margin-top: 1.1rem; }
.findings-grid .sq { aspect-ratio: 1; border-radius: 3px; background: #d3dfdf; }
.findings-grid .sq.crit { background: var(--teal-dark); }
.findings-legend {
  list-style: none; display: flex; flex-direction: column; gap: 0.55rem;
  margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid #dbe7e7;
}
.findings-legend li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.92rem; color: var(--slate); }
.findings-legend strong { font-family: "Libre Baskerville", serif; font-size: 1.15rem; color: var(--teal-dark); }
.findings-legend .swatch { width: 14px; height: 14px; border-radius: 3px; background: #d3dfdf; flex-shrink: 0; }
.findings-legend .swatch.crit { background: var(--teal-dark); }

/* ---------- BUILD ---------- */
#build { background: var(--white); border-top: 1px solid #e8edef; }
.build-sub {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--teal);
  margin: 2.4rem 0 1.1rem;
}
.build-sub:first-of-type { margin-top: 0; }
.decisions { display: flex; flex-direction: column; gap: 1.3rem; }
.decision {
  background: var(--white); border: 1.5px solid #dde8e8;
  border-radius: 16px; padding: 1.3rem 1.5rem;
}
.decision p { font-size: 0.92rem; line-height: 1.8; }
.meta-line {
  margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid #e8edef;
  font-size: 0.88rem; line-height: 1.8;
}
.meta-line span {
  font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: 0.74rem; color: var(--teal);
  display: block; margin-bottom: 0.15rem;
}
.meta-line + .meta-line { border-top: none; margin-top: 1.1rem; padding-top: 0; }

/* ---------- CTA + FORM ---------- */
#cta { background: var(--ink); color: white; }
#cta .section-label { color: var(--rose); }
#cta .section-label::before { background: var(--rose); }
#cta h2 { color: white; }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.cta-desc { font-size: 1rem; color: #a0aec0; line-height: 1.85; margin-bottom: 2rem; }
.contact-detail { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.8rem; color: #cbd5e0; font-size: 0.9rem; }
.contact-detail svg { width: 16px; height: 16px; stroke: var(--rose); fill: none; stroke-width: 2; flex-shrink: 0; }

.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label {
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: #a0aec0;
}
.form-group input, .form-group textarea {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 0.85rem 1rem;
  font-family: "Inter", sans-serif; font-size: 0.95rem; color: white;
  outline: none; transition: border-color 0.2s;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #718096; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--teal); }
.form-group textarea { resize: vertical; min-height: 120px; }
.btn-rose {
  display: inline-block; background: var(--rose); color: white;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  border: none; cursor: pointer; padding: 1rem 2.2rem; border-radius: 50px;
  transition: background 0.2s, transform 0.15s; align-self: flex-start;
  box-shadow: 0 4px 16px rgba(181,111,118,0.35);
}
.btn-rose:hover { background: #9e5d63; transform: translateY(-2px); }

/* ---------- FOOTER ---------- */
footer {
  background: var(--ink); padding: 1.8rem 2rem; text-align: center;
  font-size: 0.82rem; border-top: 1px solid rgba(255,255,255,0.1);
}

/* ---------- FOCUS + MOTION ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  section { padding: 56px 1.5rem; }
  nav { padding: 0 1.5rem; }
  .nav-links { display: none; }
  #page-header { padding: 110px 1.5rem 52px; }
  #page-header .result-stat { font-size: 1.02rem; padding: 1.15rem 1.3rem; }
  h1 { max-width: none; }
  .flow-grid { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: 1fr; }
  .cta-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .findings-grid { grid-template-columns: repeat(10, 1fr); gap: 5px; }
}