/* ==========================================================================
   John Voss Learning — stylesheet
   Single stylesheet for all pages. Edit colors in :root below.
   ========================================================================== */

:root {
  --ink:        #10151c;
  --ink-soft:   #3d4753;
  --ink-mute:   #66707d;
  --line:       #e2e6ec;
  --line-soft:  #eef1f5;
  --paper:      #ffffff;
  --paper-alt:  #f6f8fa;
  --navy:       #16324f;
  --navy-deep:  #0d2137;
  --accent:     #af1f38;   /* brand crimson, taken from the JV logo */
  --accent-dk:  #8e1a2e;
  --accent-wash:#fdf0f2;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1120px;
  --gut: 24px;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16,21,28,.05), 0 8px 24px rgba(16,21,28,.06);
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; margin: 0 0 .5em; font-weight: 600; }
h1 { font-family: var(--serif); font-size: clamp(2.1rem, 5vw, 3.3rem); font-weight: 600; letter-spacing: -.015em; }
h2 { font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.25rem); letter-spacing: -.01em; }
h3 { font-size: 1.16rem; letter-spacing: -.005em; }
p { margin: 0 0 1.1em; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-dk); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
ul { padding-left: 1.15em; }
li { margin-bottom: .4em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

/* ------------------------------------------------------------- layout -- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: 760px; }
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.section--alt { background: var(--paper-alt); border-block: 1px solid var(--line-soft); }
.section--dark { background: var(--navy-deep); color: #c9d4df; }
.section--dark h2, .section--dark h3 { color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- nav -- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; line-height: 1.15; }
.brand__mark { width: 40px; height: 40px; flex: none; display: block; }
.brand__text { display: flex; flex-direction: column; }
@media (max-width: 420px) { .brand__mark { width: 34px; height: 34px; } }
.brand__name {
  font-family: var(--serif); font-size: 1.28rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em;
}
.brand__tag {
  font-size: .69rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500; margin-top: 2px;
}
.brand:hover .brand__name { color: var(--navy); }

.nav__toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: 7px; padding: .5rem .7rem; cursor: pointer; color: var(--ink);
  font-size: .9rem; align-items: center; gap: .45rem;
}
.nav__links { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav__links li { margin: 0; }
.nav__links a {
  text-decoration: none; color: var(--ink-soft); font-size: .95rem; font-weight: 500;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.nav__links a:hover { color: var(--ink); border-bottom-color: var(--line); }
.nav__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
/* The .nav__links a rule above outranks .btn on specificity, so the header
   button needs its padding restated here or it renders with none. */
.nav__links .btn {
  padding: .62rem 1.2rem;
  border-bottom: none;
  white-space: nowrap;
  color: #fff;
}
.nav__links .btn:hover { border-bottom: none; color: #fff; }
.nav__links li { flex: none; }

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: .5rem var(--gut) 1.25rem; box-shadow: var(--shadow);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: .85rem 0; border-bottom: 1px solid var(--line-soft); }
  .nav__links a[aria-current="page"] { border-bottom-color: var(--line-soft); color: var(--accent-dk); }
  .nav__links .btn { margin-top: .9rem; text-align: center; }
}

/* -------------------------------------------------------------- button -- */
.btn {
  display: inline-block; font-family: var(--sans); font-size: .95rem; font-weight: 600;
  padding: .78rem 1.5rem; border-radius: 7px; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dk); color: #fff; }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink-mute); color: var(--ink); background: var(--paper-alt); }
.btn--light { background: #fff; color: var(--navy-deep); }
.btn--light:hover { background: #eef2f6; color: var(--navy-deep); }
.btn--outline-light { border-color: rgba(255,255,255,.35); color: #fff; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem; }

/* ---------------------------------------------------------------- hero -- */
.hero { padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem); }
.hero__eyebrow {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-dk); font-weight: 700; margin-bottom: 1.1rem;
}
.hero__lede { font-size: clamp(1.05rem, 2vw, 1.24rem); color: var(--ink-soft); max-width: 62ch; }
.hero__grid { display: grid; grid-template-columns: 1.35fr .8fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

/* Portrait sits above the facts list in the About hero's right column.
   No aspect-ratio here on purpose: the source file is already cropped, so
   the image is left to display at its own proportions. */
.portrait {
  display: block;
  width: 100%;
  max-width: 285px;
  height: auto;
  border-radius: 3px;
  margin: .4rem 0 1.9rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
}
@media (max-width: 900px) { .portrait { max-width: 240px; } }

.facts { border-left: 3px solid var(--accent); padding-left: 1.4rem; margin-top: .5rem; }
.facts dl { margin: 0; }
.facts dt {
  font-size: .7rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700; margin-top: 1.4rem;
}
.facts dt:first-child { margin-top: 0; }
.facts dd { margin: .2rem 0 0; color: var(--ink); font-weight: 500; font-size: .97rem; }

/* --------------------------------------------------------------- eyebrow */
.eyebrow {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-dk); font-weight: 700; margin-bottom: .9rem;
}
.section--dark .eyebrow { color: #e0a377; }
.lede { font-size: 1.1rem; max-width: 68ch; }

/* ---------------------------------------------------------------- grid -- */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- card -- */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; display: flex; flex-direction: column;
}
.card__num {
  font-family: var(--serif); font-size: 1.6rem; color: var(--accent);
  line-height: 1; margin-bottom: .75rem;
}
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
.card ul { margin: 0; font-size: .95rem; }

/* ------------------------------------------------------------- service -- */
.track {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.5rem); box-shadow: var(--shadow);
}
.track__label {
  display: inline-block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-dk); background: var(--accent-wash);
  padding: .35rem .7rem; border-radius: 4px; margin-bottom: 1rem;
}
.track h3 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: .7rem; }
.track ul { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.track ul li {
  position: relative; padding-left: 1.5rem; margin-bottom: .7rem; font-size: .97rem;
}
.track ul li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* -------------------------------------------------------------- detail -- */
.detail { border-top: 1px solid var(--line); padding-top: 2rem; margin-top: 2rem; }
.detail:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.detail__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .35rem; }
.detail h3 { font-family: var(--serif); font-size: 1.42rem; margin: 0; }
.detail__meta { font-size: .82rem; color: var(--ink-mute); letter-spacing: .02em; }

.deliverables {
  list-style: none; padding: 0; margin: 1.25rem 0 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1.5rem;
}
@media (max-width: 680px) { .deliverables { grid-template-columns: 1fr; } }
.deliverables li { position: relative; padding-left: 1.6rem; font-size: .95rem; margin: 0; }
.deliverables li::before {
  content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 600;
}

/* ------------------------------------------------------------ portfolio -- */
.case {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--paper); display: flex; flex-direction: column;
}
.case__media {
  aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1b3a5c 0%, #0d2137 100%);
  display: flex; align-items: center; justify-content: center; position: relative;
  color: rgba(255,255,255,.55); text-align: center; padding: 1.5rem;
}
/* When a real screenshot replaces the placeholder panel, crop rather than stretch */
img.case__media { object-fit: cover; padding: 0; width: 100%; }
.case__media span {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}
.case__body { padding: 1.6rem 1.6rem 1.75rem; flex: 1; display: flex; flex-direction: column; }
.case__tag {
  font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 700;
  color: var(--accent-dk); margin-bottom: .55rem;
}
.case h3 { font-size: 1.2rem; margin-bottom: .7rem; }
.case dl { margin: 0; font-size: .93rem; }
.case dt {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700; margin-top: .95rem;
}
.case dt:first-child { margin-top: 0; }
.case dd { margin: .2rem 0 0; }
.case__stack {
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line-soft);
  font-size: .82rem; color: var(--ink-mute);
}

/* ---------------------------------------------------------------- note -- */
.note {
  background: var(--accent-wash); border: 1px dashed var(--accent);
  border-radius: var(--radius); padding: 1.25rem 1.5rem; font-size: .93rem; color: var(--ink-soft);
}
.note strong { color: var(--accent-dk); }
.note p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- stacks -- */
.stack-group { margin-bottom: 2rem; }
.stack-group h3 {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700; margin-bottom: .85rem;
}
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.chips li {
  margin: 0; font-size: .87rem; padding: .4rem .8rem; border-radius: 5px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft);
}
.section--alt .chips li { background: #fff; }

/* -------------------------------------------------------------- timeline */
.tl { list-style: none; padding: 0; margin: 0; }
.tl > li {
  position: relative; padding-left: 2rem; padding-bottom: 2rem;
  border-left: 1px solid var(--line); margin: 0;
}
.tl > li:last-child { padding-bottom: 0; border-left-color: transparent; }
.tl > li::before {
  content: ""; position: absolute; left: -5px; top: .45em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid #fff;
}
.tl__when {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700;
}
.tl h3 { font-size: 1.12rem; margin: .3rem 0 .4rem; }
.tl p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- quote -- */
.pull {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.45;
  color: var(--ink); border-left: 3px solid var(--accent); padding-left: 1.5rem; margin: 0;
}
.section--dark .pull { color: #fff; }

/* ---------------------------------------------------------------- form -- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } }

.field label {
  display: block; font-size: .82rem; font-weight: 600; color: var(--ink);
  margin-bottom: .4rem; letter-spacing: .01em;
}
.field .req { color: var(--accent-dk); }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: .72rem .85rem; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy); box-shadow: 0 0 0 3px rgba(22,50,79,.1); outline: none;
}
.field textarea { min-height: 150px; resize: vertical; }
.field__hint { font-size: .82rem; color: var(--ink-mute); margin: .4rem 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Demo video player */
.demo-video {
  width: 100%; display: block; background: #000;
  border-radius: var(--radius); margin-top: 1.75rem;
  border: 1px solid var(--line);
}

/* Form success / error messages */
.form-status { border-radius: var(--radius); padding: 1.75rem 1.9rem; border: 1px solid; }
.form-status h2 {
  font-family: var(--serif); font-size: 1.35rem; margin-bottom: .5rem;
}
.form-status p { font-size: .97rem; margin-bottom: 0; }
.form-status--ok  { background: #f0f7f2; border-color: #bcd9c6; }
.form-status--ok h2 { color: #1e5133; }
.form-status--err { background: #fdf2f0; border-color: #e6bdb4; }
.form-status--err h2 { color: #8c3320; }
.form-status:focus { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- cta -- */
.cta { text-align: center; }
.cta h2 { color: #fff; }
.cta p { max-width: 56ch; margin-left: auto; margin-right: auto; color: #c9d4df; }
.cta .btn-row { justify-content: center; }

/* -------------------------------------------------------------- footer -- */
.site-footer {
  background: var(--navy-deep); color: #93a3b4; padding: 3.5rem 0 2rem; font-size: .92rem;
}
.site-footer a { color: #dde5ec; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }
.site-footer h2 {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; font-weight: 700; margin-bottom: .9rem;
}
.site-footer .footer-brand {
  font-family: var(--serif); font-size: 1.3rem; color: #fff; margin-bottom: .5rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.5rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem;
}

/* -------------------------------------------------------------- utility -- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ card icons */
/* Cards in sections that do not carry an 01/02/03 numeral get a stroke icon
   instead, so every card grid on the site has the same visual anchor. */
.card__icon {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: .95rem;
  color: var(--accent);
}

/* --------------------------------------------------------------- diagram */
.diagram {
  display: block;
  width: 100%;
  height: auto;
  max-width: 800px;
  margin: 2.75rem auto .25rem;
}
.dgm-box  { fill: var(--paper-alt); stroke: var(--line); stroke-width: 1.5; }
.dgm-bar  { fill: var(--accent-wash); stroke: var(--accent); stroke-width: 1.5; }
.dgm-seam { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 6; stroke-linecap: round; }
.dgm-tie  { stroke: var(--line); stroke-width: 1.5; }
.dgm-t { font-family: var(--sans); font-size: 16px;   font-weight: 650; fill: var(--ink); }
.dgm-s { font-family: var(--sans); font-size: 12.5px; fill: var(--ink-mute); }
.dgm-k { font-family: var(--sans); font-size: 11.5px; font-weight: 700; fill: var(--accent);
         letter-spacing: .12em; text-transform: uppercase; }
.dgm-b { font-family: var(--sans); font-size: 15px;   font-weight: 650; fill: var(--accent-dk); }

/* Below this width the 760-unit viewBox scales the diagram's type down past
   readability, so it is withdrawn rather than shown too small. The three cards
   directly beneath it carry the same argument in prose, so nothing is lost. */
@media (max-width: 620px) { .diagram { display: none; } }

/* Larger variant, used on the Services "When clients actually call" cards —
   those sit in a three-column grid where a 30px mark reads as too small. */
.card__icon--lg { width: 56px; height: 56px; }