/* Satgana case study. Satgana's own palette, editorial register.
   One orchestrated moment on load, nothing else moves. */

:root {
  --green: #1e3a32; /* deep green, titles and primary text */
  --green-mid: #3f6b55; /* medium green, secondary */
  --sand: #e3dcc9;
  --cream: #f7f4ed; /* page background */
  --rose: #f4e4dc; /* callout fill */
  --terracotta: #b04a28; /* accent, numbers, callout left border */

  --wrap: 1080px;
  --wrap-narrow: 760px;
  --wrap-flow: 1240px; /* the graph on screen 3 runs wider than the prose */

  --title-hero: clamp(2.4rem, 5.4vw, 3.7rem);
  --title-section: clamp(2rem, 4vw, 2.85rem);
  /* The largest non-title type on the page. */
  --figure-size: clamp(1.9rem, 3.2vw, 2.6rem);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--green);
  font-family: Nunito, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

p {
  margin: 0 0 1.15em;
  max-width: 68ch;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--green);
}

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------- layout ---------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}

.wrap-narrow {
  max-width: calc(var(--wrap-narrow) + 56px);
}

.wrap-flow {
  max-width: calc(var(--wrap-flow) + 56px);
}

.section {
  padding: clamp(64px, 9vw, 118px) 0;
  border-top: 1px solid var(--sand);
}

/* ---------------- screen 1 ---------------- */

.hero {
  padding: clamp(72px, 13vh, 150px) 0 clamp(64px, 9vw, 118px);
}

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 0.95rem;
  margin: 0 0 40px;
}

.eyebrow-label {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--terracotta);
}

.byline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  text-decoration: none;
}

.byline:hover {
  color: var(--terracotta);
}

.byline:hover .in-mark {
  fill: var(--terracotta);
}

.in-mark {
  width: 16px;
  height: 16px;
  flex: none;
  fill: var(--green-mid);
}

.logo {
  width: 84px;
  height: 84px;
  margin: 0 0 34px;
}

.hero-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: var(--title-hero);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--green);
  margin: 0 0 28px;
  max-width: 15ch;
}

.hero-meta {
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--green-mid);
  margin: 0;
}

/* ---------------- headings ---------------- */

.section-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: var(--title-section);
  line-height: 1.16;
  color: var(--green);
  margin: 0 0 clamp(30px, 4vw, 48px);
}

/* ---------------- bullets in running text ---------------- */

.bullets {
  list-style: none;
  margin: 0 0 1.15em;
  padding: 0;
  max-width: 62ch;
}

.bullets li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 7px;
}

.bullets li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
}

/* ---------------- screen 2 ---------------- */

.callout {
  margin: clamp(34px, 4.5vw, 52px) 0 0;
  background: var(--rose);
  border-left: 4px solid var(--terracotta);
  padding: 28px 32px;
}

.callout-title {
  font-weight: 700;
  color: var(--green);
  margin: 0 0 0.5em;
}

.callout p {
  max-width: 62ch;
}

/* ---------------- screen 3, the graph ----------------
   Four nodes read top to bottom. Phase 1 is a wide collection band, the
   connectors narrow it into phase 2, open it into phase 3, which is the
   widest block on the page and the only filled one, then fan it out into
   the three groups of phase 4. The shape carries the hierarchy, so it is
   readable before a single word is. */

.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flow-step {
  width: 100%;
}

.step-collect,
.step-out {
  max-width: 1040px;
}

.step-neck {
  max-width: 620px;
}

.step-pivot {
  max-width: var(--wrap-flow);
  background: var(--rose);
  border-left: 4px solid var(--terracotta);
  padding: clamp(34px, 4vw, 52px) clamp(26px, 3.4vw, 56px);
}

.flow-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--green);
  margin: 0 0 22px;
  text-align: center;
}

.step-out .flow-title {
  margin-bottom: 0;
}

.flow-title-pivot {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  margin-bottom: 18px;
}

/* Phase 2 was one block of prose. Four separated moves, one per line of
   reasoning, so the neck reads as a method rather than a paragraph. */
.moves {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: move;
}

.moves li {
  counter-increment: move;
  position: relative;
  padding: 14px 0 14px 44px;
  border-top: 1px solid var(--sand);
  font-size: 0.99rem;
  line-height: 1.6;
}

.moves li:last-child {
  border-bottom: 1px solid var(--sand);
}

.moves li::before {
  content: counter(move);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--terracotta);
}

.tag {
  font-weight: 700;
  color: var(--terracotta);
}

.step-pivot p {
  font-size: 1.06rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 74ch;
}

/* The connectors. Right angles only: a bracket that gathers a whole band
   into one stem, the same bracket reversed to open onto the pivot, and a
   three way split for the deliverables. No curves, no arrowheads. */
.conn {
  display: block;
  width: 100%;
  height: 64px;
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 1;
  opacity: 0.55;
}

.conn path {
  vector-effect: non-scaling-stroke;
}

.conn-short,
.conn-split {
  height: 44px;
}

/* The title of phase 4 sits between the two, so the split reads as the
   pivot naming production and production opening into three groups. */
.conn-split {
  margin-bottom: 8px;
}

.conn-tick {
  display: none;
}

/* phase 1, the corpus */
.corpus {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px 22px;
  margin: 0 0 30px;
}

.corpus-item {
  border-top: 2px solid var(--terracotta);
  padding-top: 12px;
}

.corpus-num {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: var(--figure-size);
  line-height: 1.05;
  color: var(--terracotta);
  margin: 0 0 6px;
}

.corpus-text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--green);
}

.num-inline {
  color: var(--terracotta);
  font-weight: 700;
}

.sources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sources li {
  border-top: 1px solid var(--sand);
  padding-top: 11px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--green-mid);
}

/* phase 3, the six parts of the platform */
.platform {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.platform li {
  border: 1px solid var(--terracotta);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 0.95rem;
  color: var(--terracotta);
  background: rgba(255, 255, 255, 0.35);
}

/* phase 4 */
.deliverables {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 40px;
}

.deliverable-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--green);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sand);
  text-align: center;
}

.deliverable ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.deliverable li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 9px;
  color: var(--green);
  font-size: 0.99rem;
  line-height: 1.55;
}

.deliverable li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--terracotta);
}

/* ---------------- screen 4 ---------------- */

.outcomes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(34px, 4.5vw, 54px) clamp(36px, 5vw, 64px);
}

.outcome-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 1.32rem;
  color: var(--green);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sand);
}

.outcome p {
  color: var(--green);
  max-width: 58ch;
}

.outcome-adoption {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.rate {
  color: var(--terracotta);
  font-weight: 700;
}

.offsite {
  margin: 0;
}

.offsite img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 42%;
}

.offsite figcaption {
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--green-mid);
}

/* ---------------- the quote ---------------- */

.quote-band {
  background: var(--sand);
  padding: clamp(54px, 7vw, 92px) 0;
}

.quote {
  margin: 0;
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: clamp(24px, 3.5vw, 44px);
  align-items: start;
}

.quote-face {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
}

.quote blockquote {
  margin: 0 0 20px;
}

.quote blockquote p {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.42;
  color: var(--green);
  margin: 0;
  max-width: 30ch;
}

.quote figcaption {
  display: flex;
  flex-direction: column;
}

.quote-name {
  font-weight: 700;
  color: var(--green);
}

.quote-role {
  font-size: 0.95rem;
  color: var(--green-mid);
}

/* ---------------- screen 5 ---------------- */

.section-close {
  padding-bottom: clamp(72px, 10vw, 130px);
}

.close-label {
  font-weight: 700;
  color: var(--green);
  margin: 0 0 8px;
}

.close-line {
  color: var(--green-mid);
  margin: 0 0 clamp(34px, 4.5vw, 52px);
  max-width: 52ch;
}

.contact-name {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 1.32rem;
  color: var(--green);
  margin: 0 0 6px;
}

.contact p:last-child {
  margin: 0;
}

/* ---------------- responsive ---------------- */

@media (max-width: 980px) {
  .corpus {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 880px) {
  .deliverables,
  .sources {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .outcomes,
  .outcome-adoption {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  /* Every step is the same width on a phone, so the brackets would be a lie.
     They give way to a plain vertical tick between the nodes. */
  .conn {
    height: 34px;
  }

  .conn-bracket {
    display: none;
  }

  .conn-tick {
    display: block;
  }

  .corpus {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 18px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 17px;
  }

  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .callout,
  .step-pivot {
    padding-left: 22px;
    padding-right: 22px;
  }

  /* The pivot keeps its extra width on a phone by running to both edges,
     while every other step stays inside the text column. */
  .step-pivot {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
  }

  .hero-title {
    max-width: none;
  }

  .quote {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 420px) {
  .corpus {
    grid-template-columns: 1fr;
  }
}

/* ---------------- the one orchestrated moment ----------------
   Screen 1 settles once on load. Nothing else on the page moves.
   Only applies when the inline head script has set .js, so a page
   without JavaScript is simply there, fully visible, at rest. */

.js .reveal {
  opacity: 0;
  animation: rise 620ms cubic-bezier(0.22, 0.68, 0.26, 1) forwards;
}

.js .reveal:nth-child(1) {
  animation-delay: 40ms;
}
.js .reveal:nth-child(2) {
  animation-delay: 160ms;
}
.js .reveal:nth-child(3) {
  animation-delay: 280ms;
}
.js .reveal:nth-child(4) {
  animation-delay: 400ms;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

@media print {
  .js .reveal {
    opacity: 1;
    animation: none;
  }
}