/* ==========================================================================
   SOLVENTUM GRAPHICS — heyamychen.com
   Case-study-specific diagrams and layout overrides for solventum.html.
   Timeline styles live in case.css (shared across all case studies).
   ========================================================================== */

/* =========================================================
   PHASED SITEMAP GRAPHIC — Solventum case study
   ========================================================= */

.sitemap { width: 100%; }

.sitemap-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 2rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-grass);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s ease-out 0.2s, transform 0.5s ease-out 0.2s;
}
.sitemap.is-visible .sitemap-header { opacity: 1; transform: translateY(0); }

.sitemap-header__title {
  font-family: var(--font-mono);
  font-size: var(--text-sm); color: var(--color-forest);
  letter-spacing: var(--tracking); font-weight: 400;
  text-transform: uppercase;
}

.sitemap-legend { display: flex; gap: 1.5rem; opacity: 0; transition: opacity 0.5s ease-out 0.3s; }
.sitemap.is-visible .sitemap-legend { opacity: 1; }
.sitemap-legend__item { display: flex; align-items: center; gap: 0.4rem; }
.sitemap-legend__swatch { width: 12px; height: 12px; }
.sitemap-legend__swatch--v1 { background: var(--color-forest); }
.sitemap-legend__swatch--v2 {
  background: repeating-linear-gradient(-45deg, transparent, transparent 2px, var(--color-forest) 2px, var(--color-forest) 2.5px);
  border: 1px solid var(--color-forest);
}
.sitemap-legend__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--color-moss); opacity: 0.5;
}

.sitemap-diagram {
  width: 100%; overflow-x: auto;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s ease-out 0.4s, transform 0.6s ease-out 0.4s;
}
.sitemap.is-visible .sitemap-diagram { opacity: 1; transform: translateY(0); }
.sitemap-diagram svg { display: block; width: 100%; height: auto; }

@media (max-width: 768px) {
  .sitemap-header { flex-direction: column; gap: 0.5rem; }
  .sitemap-diagram { overflow-x: scroll; -webkit-overflow-scrolling: touch; }
  .sitemap-diagram svg { width: 1000px; min-width: 1000px; }
}

/* =========================================================
   VISUAL SPACING — breathing room around embedded components
   ========================================================= */

.research-scope,
.territories,
.landscape,
.web-audit,
.sitemap {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Development carousel — all items locked to height of shortest image (Wires 2718×1414) */
.case-carousel--matched-height .case-carousel__item {
  aspect-ratio: 2718 / 1414;
}

.case-carousel--matched-height .case-carousel__img {
  height: 100%;
  object-fit: contain;
  object-position: center;
  background-color: white;
}

/* =========================================================
   RESEARCH SCOPE GRAPHIC — Solventum case study
   ========================================================= */

.research-scope { width: 100%; position: relative; }

.scope-halves-wrapper { position: relative; }

.spine {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: var(--color-grass);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.8s ease-out;
}
.research-scope.is-visible .spine { transform: scaleY(1); }

.spine-label {
  position: absolute;
  left: 50%; top: -2.5rem;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking);
  color: var(--color-grass);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.5s ease-out 0.6s;
  white-space: nowrap;
}
.research-scope.is-visible .spine-label { opacity: 1; }

.scope-halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  position: relative;
}

.scope-side { display: flex; flex-direction: column; gap: 0.25rem; }
.scope-side--internal { padding-right: 2.5rem; }
.scope-side--external { padding-left: 2.5rem; }

.scope-header {
  display: flex; flex-direction: column; gap: 0.25rem;
  margin-bottom: 1.5rem;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.scope-side--internal .scope-header { align-items: flex-end; text-align: right; transition-delay: 0.3s; }
.scope-side--external .scope-header { align-items: flex-start; text-align: left; transition-delay: 0.4s; }
.research-scope.is-visible .scope-header { opacity: 1; transform: translateY(0); }

.scope-header__count {
  font-family: var(--font-primary);
  font-size: var(--text-section); line-height: 1.1;
  color: var(--color-forest);
  font-weight: 400; letter-spacing: var(--tracking);
}
.scope-header__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: var(--tracking);
  color: var(--color-moss);
  text-transform: uppercase; opacity: 0.6;
}

.scope-entry {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid transparent;
  opacity: 0;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out, border-color 0.4s ease-out;
}
.scope-side--internal .scope-entry { flex-direction: row-reverse; text-align: right; transform: translateX(-16px); }
.scope-side--external .scope-entry { transform: translateX(16px); }
.research-scope.is-visible .scope-entry { opacity: 1; transform: translateX(0); border-top-color: var(--color-grass); }
.scope-entry:last-child { border-bottom: 1px solid transparent; }
.research-scope.is-visible .scope-entry:last-child { border-bottom-color: var(--color-grass); }

/* Staggered animation delays — replaces inline style="transition-delay" on each entry */
.scope-entry:nth-child(1)  { transition-delay: 0.5s; }
.scope-entry:nth-child(2)  { transition-delay: 0.55s; }
.scope-entry:nth-child(3)  { transition-delay: 0.6s; }
.scope-entry:nth-child(4)  { transition-delay: 0.65s; }
.scope-entry:nth-child(5)  { transition-delay: 0.7s; }
.scope-entry:nth-child(6)  { transition-delay: 0.75s; }
.scope-entry:nth-child(7)  { transition-delay: 0.8s; }
.scope-entry:nth-child(8)  { transition-delay: 0.85s; }
.scope-side--internal .scope-entry:nth-child(9)  { transition-delay: 0.9s; }
.scope-side--internal .scope-entry:nth-child(10) { transition-delay: 0.95s; }

.scope-mark { width: 6px; height: 6px; flex-shrink: 0; background: var(--color-forest); }

.scope-entry__team {
  font-family: var(--font-primary);
  font-size: var(--text-caption); line-height: 1.33;
  color: var(--color-forest); letter-spacing: var(--tracking);
}

.scope-hatch {
  position: absolute; width: 40px; height: 100%; top: 0;
  opacity: 0; transition: opacity 0.8s ease-out 1s; pointer-events: none;
}
.scope-hatch--left {
  right: calc(50% + 1px);
  background: repeating-linear-gradient(-45deg, transparent, transparent 6px, var(--color-grass) 6px, var(--color-grass) 6.5px);
  mask-image: linear-gradient(to left, rgba(0,0,0,0.06), transparent);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.06), transparent);
}
.scope-hatch--right {
  left: calc(50% + 1px);
  background: repeating-linear-gradient(45deg, transparent, transparent 6px, var(--color-grass) 6px, var(--color-grass) 6.5px);
  mask-image: linear-gradient(to right, rgba(0,0,0,0.06), transparent);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.06), transparent);
}
.research-scope.is-visible .scope-hatch--left,
.research-scope.is-visible .scope-hatch--right { opacity: 1; }

.scope-summary {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--color-grass);
  text-align: center;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s ease-out 1.6s, transform 0.5s ease-out 1.6s;
}
.research-scope.is-visible .scope-summary { opacity: 1; transform: translateY(0); }

.scope-summary .scope-summary__text {
  font-family: var(--font-mono);
  font-size: var(--text-sm); line-height: var(--leading-mono);
  color: var(--color-forest); letter-spacing: var(--tracking);
  opacity: 0.7;
}
.scope-summary .scope-summary__text em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--color-forest);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

@media (max-width: 768px) {
  .scope-halves { grid-template-columns: 1fr; gap: 2.5rem; }
  .spine, .scope-hatch, .spine-label { display: none; }
  .scope-side--internal, .scope-side--external { padding: 0; }
  .scope-side--internal .scope-header,
  .scope-side--internal .scope-entry { align-items: flex-start; text-align: left; flex-direction: row; justify-content: flex-start; }
  .scope-header__count { font-size: var(--text-tagline); }
}

/* =========================================================
   TERRITORIES GRAPHIC — Solventum case study
   ========================================================= */

.territories { width: 100%; }

.territories-header {
  margin-bottom: 2.5rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-grass);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s ease-out 0.2s, transform 0.5s ease-out 0.2s;
}
.territories.is-visible .territories-header { opacity: 1; transform: translateY(0); }

.territories-header__title {
  font-family: var(--font-mono);
  font-size: var(--text-sm); color: var(--color-forest);
  letter-spacing: var(--tracking); font-weight: 400;
  text-transform: uppercase;
}

.territory-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem;
}

.territory {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.territories.is-visible .territory { opacity: 1; transform: translateY(0); }
.territory:nth-child(1) { transition-delay: 0.4s; }
.territory:nth-child(2) { transition-delay: 0.55s; }
.territory:nth-child(3) { transition-delay: 0.7s; }

.territory--muted { opacity: 0; }
.territories.is-visible .territory--muted { opacity: 0.45; }

.territory__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--color-moss);
  opacity: 0.6; margin-bottom: 0.75rem;
}
.territory__name {
  font-family: var(--font-primary);
  font-size: var(--text-body-lg); line-height: 1.19; color: var(--color-forest);
  letter-spacing: var(--tracking); font-weight: 400; margin-bottom: 0.75rem;
}
.territory__rule { width: 100%; height: 1px; background: var(--color-grass); margin-bottom: 0.75rem; }
.territory__valueprop-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--color-moss);
  opacity: 0.5; margin-bottom: 0.25rem;
}
.territory__valueprop {
  font-family: var(--font-primary);
  font-size: var(--text-subhead); color: var(--color-forest);
  letter-spacing: var(--tracking); margin-bottom: 1rem;
}
.territory__attributes { display: flex; flex-direction: column; gap: 0.375rem; }
.territory__attr {
  font-family: var(--font-primary);
  font-size: var(--text-sm); color: var(--color-forest);
  letter-spacing: var(--tracking); line-height: 1.4;
  padding-left: 1rem; position: relative;
}
.territory__attr::before {
  content: ''; position: absolute; left: 0; top: 0.5em;
  width: 5px; height: 5px; background: var(--color-forest);
}
.territory__attr--carried {
  text-decoration: underline;
  text-decoration-color: var(--color-forest);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}

.convergence {
  position: relative; margin-top: 2.5rem; padding-top: 2rem;
  display: flex; flex-direction: column; align-items: center;
}
.convergence-lines { width: 100%; height: 40px; position: relative; margin-bottom: 0; }
.convergence-line {
  position: absolute; top: 0; width: 1px; height: 0;
  background: var(--color-grass); transition: height 0.5s ease-out;
}
.convergence-line--left  { left: 16.66%; transition-delay: 1s; }
.convergence-line--center { left: 50%; transition-delay: 1.1s; }
.convergence-line--right { left: 83.33%; transition-delay: 1.2s; }
.territories.is-visible .convergence-line { height: 40px; }

.convergence-gather {
  width: 66.66%; height: 1px; background: var(--color-grass);
  margin-bottom: 0.25rem; transform: scaleX(0);
  transition: transform 0.5s ease-out 1.3s;
}
.territories.is-visible .convergence-gather { transform: scaleX(1); }

.convergence-stem {
  width: 1px; height: 0; background: var(--color-grass);
  margin-bottom: 1.5rem; transition: height 0.4s ease-out 1.5s;
}
.territories.is-visible .convergence-stem { height: 32px; }

.vision {
  text-align: center; max-width: 700px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s ease-out 1.7s, transform 0.5s ease-out 1.7s;
}
.territories.is-visible .vision { opacity: 1; transform: translateY(0); }
.vision__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--color-moss);
  opacity: 0.6; margin-bottom: 0.5rem;
}
.vision__statement {
  font-family: var(--font-primary);
  font-size: var(--text-tagline); line-height: 1.19; color: var(--color-forest);
  letter-spacing: var(--tracking); font-weight: 400; margin-bottom: 2rem;
}

.principles {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem;
  width: 100%; max-width: 700px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s ease-out 2s, transform 0.5s ease-out 2s;
}
.territories.is-visible .principles { opacity: 1; transform: translateY(0); }
.principle { text-align: center; }
.principle__name {
  font-family: var(--font-primary);
  font-size: var(--text-subhead); color: var(--color-forest);
  letter-spacing: var(--tracking); margin-bottom: 0.375rem;
}
.principle__rule { width: 24px; height: 1px; background: var(--color-grass); margin: 0 auto 0.5rem; }
.principle__desc {
  font-family: var(--font-primary);
  font-size: var(--text-sm); color: var(--color-forest);
  letter-spacing: var(--tracking); line-height: 1.5; opacity: 0.6;
}

@media (max-width: 768px) {
  .territory-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .convergence-lines, .convergence-gather, .convergence-stem { display: none; }
  .convergence { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-grass); }
  .vision { transition-delay: 1.2s; }
  .principles { grid-template-columns: 1fr; gap: 1.5rem; transition-delay: 1.5s; }
  .territory__name { font-size: var(--text-subhead); }
  .vision__statement { font-size: var(--text-body-lg); }
}

/* =========================================================
   LANDSCAPE AUDIT GRAPHIC — Solventum case study
   ========================================================= */

.landscape { width: 100%; }

.landscape-header {
  margin-bottom: 1.5rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-grass);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s ease-out 0.2s, transform 0.5s ease-out 0.2s;
}
.landscape.is-visible .landscape-header { opacity: 1; transform: translateY(0); }

.landscape-header__title {
  font-family: var(--font-mono);
  font-size: var(--text-sm); color: var(--color-forest);
  letter-spacing: var(--tracking); font-weight: 400;
  text-transform: uppercase;
}

.comp-summary {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease-out 0.4s, transform 0.5s ease-out 0.4s;
}
.landscape.is-visible .comp-summary { opacity: 1; transform: translateY(0); }

.comp-table { width: 100%; border-collapse: collapse; }
.comp-table thead th {
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--color-moss);
  opacity: 0.6; font-weight: 400; text-align: center;
  padding: 0 0 0.75rem 0; border-bottom: 1px solid var(--color-grass);
}
.comp-table thead th:first-child { text-align: left; }

.comp-table tbody tr {
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.landscape.is-visible .comp-table tbody tr:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }
.landscape.is-visible .comp-table tbody tr:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.landscape.is-visible .comp-table tbody tr:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.65s; }
.landscape.is-visible .comp-table tbody tr:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }
.landscape.is-visible .comp-table tbody tr:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.75s; }

.comp-table td {
  padding: 0.625rem 0; border-bottom: 1px solid var(--color-grass);
  text-align: center; vertical-align: middle;
}
.comp-table td:first-child {
  text-align: left; font-family: var(--font-primary);
  font-size: var(--text-caption); color: var(--color-forest);
  letter-spacing: var(--tracking); padding-right: 1.5rem;
}

.mark {
  display: inline-block; width: 14px; height: 14px;
  position: relative; vertical-align: middle;
}
.mark--excellent { background: var(--color-forest); }
.mark--satisfactory {
  background: repeating-linear-gradient(-45deg, transparent, transparent 2px, var(--color-forest) 2px, var(--color-forest) 2.5px);
  border: 1px solid var(--color-forest);
}
.mark--low { background: transparent; border: 1px solid var(--color-forest); }

.comp-ooc { margin-top: 1rem; padding-top: 1rem; opacity: 0; transition: opacity 0.5s ease-out 0.85s; }
.landscape.is-visible .comp-ooc { opacity: 1; }
.comp-ooc__row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem; }
.comp-ooc__name { font-family: var(--font-primary); font-size: var(--text-caption); color: var(--color-forest); letter-spacing: var(--tracking); }
.comp-ooc__note { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking); color: var(--color-moss); opacity: 0.5; }

.legend {
  display: flex; gap: 1.5rem; margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px solid var(--color-grass);
  opacity: 0; transition: opacity 0.5s ease-out 0.95s;
}
.landscape.is-visible .legend { opacity: 1; }
.legend-item { display: flex; align-items: center; gap: 0.5rem; }
.legend-item__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking); text-transform: uppercase; color: var(--color-moss); opacity: 0.5; }
.legend .mark { width: 10px; height: 10px; }

.opportunities {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-grass);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s ease-out 1.1s, transform 0.5s ease-out 1.1s;
}
.landscape.is-visible .opportunities { opacity: 1; transform: translateY(0); }
.opportunities__label {
  grid-column: 1 / -1; font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--color-moss); opacity: 0.6; margin-bottom: -0.5rem;
}
.opportunity { display: flex; flex-direction: column; gap: 0.5rem; }
.opportunity__category { font-family: var(--font-primary); font-size: var(--text-caption); color: var(--color-forest); letter-spacing: var(--tracking); }
.opportunity__rule { width: 100%; height: 1px; background: var(--color-grass); }
.opportunity__desc { font-family: var(--font-primary); font-size: var(--text-sm); color: var(--color-forest); letter-spacing: var(--tracking); line-height: 1.5; opacity: 0.6; }

@media (max-width: 768px) {
  .comp-table td:first-child { font-size: var(--text-sm); }
  .comp-table thead th { font-size: var(--text-xs); }
  .mark { width: 11px; height: 11px; }
  .legend { flex-wrap: wrap; gap: 1rem; }
  .opportunities { grid-template-columns: 1fr; gap: 1.5rem; }
  .comp-ooc__row { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* =========================================================
   WEB AUDIT GRAPHIC — Solventum case study
   ========================================================= */

.web-audit { width: 100%; }

.web-audit-header {
  margin-bottom: 1rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-grass);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s ease-out 0.2s, transform 0.5s ease-out 0.2s;
}
.web-audit.is-visible .web-audit-header { opacity: 1; transform: translateY(0); }

.web-audit-header__title {
  font-family: var(--font-mono);
  font-size: var(--text-sm); color: var(--color-forest);
  letter-spacing: var(--tracking); font-weight: 400;
  text-transform: uppercase;
}

.web-audit-context {
  font-family: var(--font-primary);
  font-size: var(--text-sm); color: var(--color-forest);
  letter-spacing: var(--tracking); line-height: 1.5;
  max-width: 680px; margin-bottom: 2.5rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s ease-out 0.35s, transform 0.5s ease-out 0.35s;
}
.web-audit.is-visible .web-audit-context { opacity: 0.6; transform: translateY(0); }

.ssc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }

.ssc-column {
  display: flex; flex-direction: column; gap: 0;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.ssc-column:nth-child(1) { transition-delay: 0.5s; }
.ssc-column:nth-child(2) { transition-delay: 0.65s; }
.ssc-column:nth-child(3) { transition-delay: 0.8s; }
.web-audit.is-visible .ssc-column { opacity: 1; transform: translateY(0); }

.ssc-column__header { font-family: var(--font-primary); font-size: var(--text-subhead); color: var(--color-forest); letter-spacing: var(--tracking); margin-bottom: 0.5rem; }
.ssc-column__rule { width: 24px; height: 2px; background: var(--color-forest); margin-bottom: 1rem; }

.ssc-item {
  font-family: var(--font-primary);
  font-size: var(--text-sm); color: var(--color-forest);
  letter-spacing: var(--tracking); line-height: 1.5; opacity: 0.6;
  padding: 0.625rem 0 0.625rem 1rem;
  border-top: 1px solid var(--color-grass);
  position: relative;
}
.ssc-item::before {
  content: ''; position: absolute; left: 0; top: 0.875rem;
  width: 5px; height: 5px; background: var(--color-forest);
}
.ssc-item:last-child { border-bottom: 1px solid var(--color-grass); }

.web-audit-takeaway {
  padding-top: 1.5rem; border-top: 1px solid var(--color-grass);
  text-align: center; max-width: 700px; margin: 0 auto;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s ease-out 1.1s, transform 0.5s ease-out 1.1s;
}
.web-audit.is-visible .web-audit-takeaway { opacity: 1; transform: translateY(0); }

.web-audit-takeaway__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--color-moss);
  opacity: 0.6; margin-bottom: 0.5rem;
}
.web-audit-takeaway .web-audit-takeaway__text {
  font-family: var(--font-mono);
  font-size: var(--text-sm); color: var(--color-forest);
  letter-spacing: var(--tracking); line-height: var(--leading-mono);
  opacity: 0.7;
}

@media (max-width: 768px) {
  .ssc-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}