/* Static case studies share the portfolio palette without its hero layout. */
.seo-page {
  --seo-copy: #b8c0b9;
  --seo-muted: #9aa79b;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.95;
  background: var(--bg);
}

.seo-page h1,
.seo-page h2,
.seo-page h3 {
  margin: 0;
  color: var(--text);
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.seo-page p,
.seo-page li,
.seo-page a {
  overflow-wrap: anywhere;
}

.seo-page [id] {
  scroll-margin-top: 108px;
}

.seo-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 84px;
  padding: 16px max(32px, calc((100% - 1080px) / 2));
  border-bottom: 1px solid #93ad7821;
  background: #0c0e11f2;
  backdrop-filter: blur(18px);
}

.seo-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  color: #dde6d8;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: .5px;
  line-height: 1.4;
}

.seo-brand > strong,
.seo-brand > span:first-child {
  color: var(--lime);
  font-size: 34px;
  font-weight: 750;
  letter-spacing: -3px;
  line-height: 1;
}

.seo-header > nav {
  display: flex;
  align-items: center;
  gap: 25px;
  min-width: 0;
}

.seo-home-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #b9c4b5;
  font-size: 12px;
}

.seo-home-link:hover,
.seo-breadcrumbs a:hover,
.seo-footer a:hover {
  color: var(--lime);
}

.seo-header .button {
  min-height: 44px;
  padding: 10px 17px;
  white-space: nowrap;
}

.seo-main,
.seo-footer {
  width: min(1080px, calc(100% - 64px));
  margin-inline: auto;
}

.seo-main {
  padding-block: 33px 0;
}

.seo-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 10px;
  color: var(--seo-muted);
  font-size: 12px;
  line-height: 1.8;
}

.seo-breadcrumbs a {
  color: #bbc7b7;
  text-underline-offset: 4px;
}

.seo-breadcrumbs a:hover {
  text-decoration: underline;
}

.seo-breadcrumbs [aria-current="page"] {
  color: #a9b5a6;
}

.seo-lede {
  padding-block: 50px 42px;
  border-bottom: 1px solid var(--line);
}

.seo-kicker {
  color: var(--lime);
  font: 11px/1.8 var(--mono);
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.seo-page .seo-lede h1 {
  max-width: 980px;
  margin-top: 19px;
  font-size: clamp(36px, 4.2vw, 54px);
  font-weight: 650;
  line-height: 1.32;
  letter-spacing: -1.5px;
  text-wrap: balance;
}

.seo-thesis {
  max-width: 830px;
  margin-top: 25px;
  color: #c4cec0;
  font-size: 18px;
  line-height: 1.9;
}

.seo-meta {
  max-width: 830px;
  margin-top: 23px;
  color: var(--seo-muted);
  font-size: 12px;
  line-height: 1.9;
}

.seo-section {
  margin-top: 54px;
}

.seo-page .seo-section h2,
.seo-page .seo-related h2,
.seo-page .seo-contact h2 {
  margin: 0 0 19px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.65px;
}

.seo-section > p {
  max-width: 840px;
  color: var(--seo-copy);
}

.seo-section > p + p {
  margin-top: 15px;
}

.seo-section > p a,
.seo-checklist a,
.seo-stage a {
  color: #c7e7af;
  text-decoration: underline;
  text-decoration-color: #78985e;
  text-underline-offset: 4px;
}

.seo-case-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.seo-case-flow li {
  position: relative;
  min-width: 0;
  padding-top: 21px;
  border-top: 1px solid #73965473;
}

.seo-case-flow b {
  display: block;
  color: #e0ead8;
  font-size: 16px;
  font-weight: 550;
  line-height: 1.65;
}

.seo-case-flow span {
  display: block;
  margin-top: 9px;
  color: var(--seo-copy);
  font-size: 14px;
  line-height: 1.9;
}

.seo-decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: 26px;
}

.seo-decision {
  min-width: 0;
  padding-top: 22px;
  border-top: 1px solid #83947740;
}

.seo-decision > span {
  display: block;
  margin-bottom: 12px;
  color: var(--lime);
  font: 11px/1.6 var(--mono);
  letter-spacing: 1px;
}

.seo-page .seo-decision h3 {
  margin-bottom: 19px;
  font-size: 19px;
  font-weight: 550;
  line-height: 1.65;
  letter-spacing: -.25px;
}

.seo-decision p {
  color: var(--seo-copy);
  line-height: 1.95;
}

.seo-decision p + p {
  margin-top: 16px;
}

.seo-decision p strong {
  display: block;
  margin-bottom: 4px;
  color: #d7e3ce;
  font-weight: 550;
}

.seo-value {
  margin-top: 25px;
  padding: 22px 26px;
  border-left: 2px solid #9bcb6f;
  background: linear-gradient(90deg, #b5f36b09, #b5f36b02);
  color: #d2dfc8;
}

.seo-value p {
  max-width: 820px;
  color: inherit;
}

.seo-value p + p {
  margin-top: 12px;
}

.seo-checklist {
  max-width: 860px;
  margin: 24px 0 0;
  padding-left: 21px;
  color: var(--seo-copy);
}

.seo-checklist li {
  padding-left: 8px;
}

.seo-checklist li + li {
  margin-top: 13px;
}

.seo-checklist li::marker {
  color: #9dbe80;
}

.seo-checklist strong {
  color: #d8e2d1;
  font-weight: 550;
}

.seo-stage {
  max-width: 860px;
  margin-top: 24px;
  padding: 19px 0 0;
  border-top: 1px dashed #53604b;
  color: var(--seo-muted);
  font-size: 13px;
  line-height: 1.95;
}

.seo-page .seo-stage h2 {
  margin: 0 0 11px;
  font-size: 17px;
  font-weight: 550;
  line-height: 1.6;
  letter-spacing: 0;
}

.seo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 23px;
  padding: 0;
  list-style: none;
}

.seo-tags > * {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #65775a36;
  border-radius: 3px;
  color: #b7c4ad;
  font: 11px/1.8 var(--mono);
}

.seo-related {
  margin-top: 65px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}

.seo-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
}

.seo-related-grid a {
  display: block;
  min-width: 0;
  padding: 18px 0;
  border-bottom: 1px solid #52614740;
}

.seo-related-grid strong {
  display: block;
  color: #dde8d5;
  font-size: 17px;
  font-weight: 550;
  line-height: 1.65;
  transition: color .2s;
}

.seo-related-grid span {
  display: block;
  margin-top: 8px;
  color: var(--seo-muted);
  font-size: 13px;
  line-height: 1.8;
}

.seo-related-grid a:hover strong {
  color: var(--lime);
}

.seo-related > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 15px;
  color: #c7e7af;
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: #78985e;
  text-underline-offset: 5px;
}

.seo-contact {
  margin-top: 66px;
  padding: 36px 0 39px;
  border-top: 1px solid #8baa662f;
  border-bottom: 1px solid #8baa662f;
  background: radial-gradient(ellipse at 0 100%, #b5f36b07, transparent 70%);
}

.seo-contact p {
  max-width: 780px;
  color: var(--seo-copy);
}

.seo-contact .button {
  max-width: 100%;
  min-height: 46px;
  margin-top: 22px;
  font-size: 13px;
}

.seo-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 26px;
  padding-block: 25px 32px;
  color: var(--seo-muted);
  font-size: 11px;
  line-height: 1.8;
}

.seo-footer a {
  color: #c4d2b9;
}

.seo-footer > nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.seo-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 42px 44px;
  margin-top: 45px;
}

.seo-hub-card {
  min-width: 0;
  padding-top: 25px;
  border-top: 1px solid #74895d70;
}

.seo-page .seo-hub-card h2 {
  margin: 0 0 17px;
  font-size: 24px;
  font-weight: 550;
  line-height: 1.55;
  letter-spacing: -.5px;
}

.seo-hub-card h2 a {
  display: inline-block;
  color: #e1eadb;
  transition: color .2s;
}

.seo-hub-card h2 a:hover {
  color: var(--lime);
}

.seo-hub-card > p {
  color: var(--seo-copy);
}

.seo-hub-card > p + p {
  margin-top: 13px;
}

@media (max-width: 900px) {
  .seo-decision-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .seo-decision p {
    max-width: 820px;
  }

  .seo-hub-grid {
    gap: 34px 30px;
  }
}

@media (max-width: 650px) {
  .seo-page {
    font-size: 14px;
    line-height: 1.95;
  }

  .seo-page [id] {
    scroll-margin-top: 96px;
  }

  .seo-header {
    min-height: 74px;
    gap: 16px;
    padding: 12px 20px;
  }

  .seo-brand {
    gap: 10px;
    font-size: 12px;
    letter-spacing: 0;
  }

  .seo-brand > strong,
  .seo-brand > span:first-child {
    font-size: 30px;
  }

  .seo-header > nav {
    gap: 15px;
  }

  .seo-header .button {
    padding: 9px 12px;
    font-size: 11px;
  }

  .seo-home-link {
    font-size: 11px;
  }

  .seo-main,
  .seo-footer {
    width: calc(100% - 40px);
  }

  .seo-main {
    padding-top: 24px;
  }

  .seo-breadcrumbs {
    gap: 4px 8px;
    font-size: 11px;
  }

  .seo-lede {
    padding-block: 35px 31px;
  }

  .seo-kicker {
    font-size: 10px;
    letter-spacing: 1px;
  }

  .seo-page .seo-lede h1 {
    margin-top: 16px;
    font-size: clamp(29px, 7.8vw, 38px);
    line-height: 1.42;
    letter-spacing: -.8px;
  }

  .seo-thesis {
    margin-top: 19px;
    font-size: 16px;
    line-height: 1.9;
  }

  .seo-meta {
    margin-top: 18px;
    font-size: 11px;
  }

  .seo-section {
    margin-top: 38px;
  }

  .seo-page .seo-section h2,
  .seo-page .seo-related h2,
  .seo-page .seo-contact h2 {
    margin-bottom: 16px;
    font-size: 23px;
    letter-spacing: -.4px;
  }

  .seo-case-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px 20px;
    margin-top: 23px;
  }

  .seo-case-flow li {
    padding-top: 16px;
  }

  .seo-case-flow b {
    font-size: 15px;
  }

  .seo-case-flow span {
    font-size: 14px;
  }

  .seo-decision-grid {
    margin-top: 22px;
  }

  .seo-page .seo-decision h3 {
    margin-bottom: 14px;
    font-size: 18px;
  }

  .seo-value {
    padding: 18px;
  }

  .seo-checklist {
    padding-left: 18px;
  }

  .seo-checklist li {
    padding-left: 4px;
  }

  .seo-stage {
    font-size: 12px;
  }

  .seo-tags {
    gap: 7px;
    margin-top: 19px;
  }

  .seo-tags > * {
    padding: 4px 8px;
    font-size: 10px;
  }

  .seo-related {
    margin-top: 46px;
    padding-top: 28px;
  }

  .seo-related-grid,
  .seo-hub-grid {
    grid-template-columns: 1fr;
  }

  .seo-related-grid {
    gap: 0;
  }

  .seo-related-grid strong {
    font-size: 16px;
  }

  .seo-contact {
    margin-top: 43px;
    padding-block: 28px 31px;
  }

  .seo-footer {
    padding-block: 22px 27px;
  }

  .seo-hub-grid {
    margin-top: 30px;
    gap: 31px;
  }

  .seo-hub-card {
    padding-top: 22px;
  }

  .seo-page .seo-hub-card h2 {
    margin-bottom: 14px;
    font-size: 22px;
  }
}

@media (max-width: 360px) {
  .seo-header {
    padding-inline: 16px;
    gap: 10px;
  }

  .seo-header > nav {
    gap: 10px;
  }

  .seo-brand {
    gap: 8px;
    font-size: 11px;
  }

  .seo-header .button {
    padding-inline: 10px;
  }

  .seo-main,
  .seo-footer {
    width: calc(100% - 32px);
  }

  .seo-case-flow {
    column-gap: 16px;
  }
}

@media print {
  .seo-page {
    color-scheme: light;
    background: #fff;
    color: #111;
    font-size: 10.5pt;
    line-height: 1.7;
  }

  .seo-page *,
  .seo-page *::before,
  .seo-page *::after {
    color: #111 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-color: #aaa !important;
  }

  .seo-header {
    position: static;
    min-height: 0;
    padding: 0 0 13pt;
    backdrop-filter: none;
  }

  .seo-header > nav,
  .seo-breadcrumbs,
  .seo-related {
    display: none;
  }

  .seo-main,
  .seo-footer {
    width: 100%;
  }

  .seo-main {
    padding: 0;
  }

  .seo-lede {
    padding-block: 22pt;
  }

  .seo-page .seo-lede h1 {
    font-size: 25pt;
  }

  .seo-thesis {
    font-size: 12pt;
  }

  .seo-section {
    margin-top: 25pt;
  }

  .seo-page .seo-section h2,
  .seo-page .seo-contact h2,
  .seo-page .seo-hub-card h2 {
    margin-bottom: 10pt;
    font-size: 17pt;
  }

  .seo-page h1,
  .seo-page h2,
  .seo-page h3 {
    break-after: avoid;
  }

  .seo-page p,
  .seo-page li {
    orphans: 3;
    widows: 3;
  }

  .seo-case-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seo-decision-grid,
  .seo-hub-grid {
    display: block;
  }

  .seo-decision,
  .seo-hub-card {
    margin-top: 18pt;
  }

  .seo-case-flow li,
  .seo-decision,
  .seo-hub-card,
  .seo-value,
  .seo-contact {
    break-inside: avoid;
  }

  .seo-value {
    padding: 12pt 16pt;
  }

  .seo-contact {
    margin-top: 25pt;
    padding-block: 18pt;
  }

  .seo-contact .button {
    display: inline;
    padding: 0;
    border: 0;
    font-size: 10pt;
    text-decoration: underline;
  }

  .seo-contact a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .seo-footer {
    padding-block: 15pt 0;
  }
}