body.home-portfolio main,
body.work-page main,
body.case-study-page main,
body.contact-page main,
body.contact-path-page main {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.7rem);
  padding-bottom: clamp(2rem, 5vw, 3.6rem);
}

body.resume-page .resume-container {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.7rem);
}

.portfolio-hero-card,
.work-card,
.proof-card,
.comparison-card,
.process-card,
.audience-card,
.credential-card,
.contact-card,
.contact-hero-card,
.contact-side-card,
.resume-case-card,
.resume-strength-card,
.work-proof-card,
.case-study-hero-card,
.case-study-section,
.case-study-sidebar-card,
.case-study-cta {
  display: grid;
  gap: 0.9rem;
}

.portfolio-hero-card p,
.work-card p,
.proof-card p,
.comparison-card p,
.process-card p,
.audience-card p,
.credential-card p,
.contact-card p,
.contact-hero-card p,
.contact-side-card p,
.resume-case-card p,
.resume-strength-card p,
.work-proof-card p,
.case-study-section p,
.case-study-cta p {
  margin: 0;
}

.portfolio-proof-note,
.work-proof-note,
.resume-note,
.case-study-note,
.case-study-sidebar-note,
.case-study-meta-copy,
.case-study-results-note {
  margin: 0;
  color: var(--muted-dark);
}

.work-proof-note--wide {
  margin-top: 1rem;
}

.work-preview-grid,
.process-grid,
.audience-grid,
.credential-grid,
.contact-brief-grid,
.contact-detail-grid,
.resume-case-grid,
.resume-strength-grid,
.work-card-grid,
.proof-grid,
.work-comparison-grid {
  display: grid;
  gap: 14px;
  align-items: stretch;
}

.proof-card,
.comparison-card {
  height: 100%;
}

.contact-card,
.contact-side-card,
.contact-hero-card {
  height: 100%;
}

.work-card h3,
.process-card h3,
.audience-card h3,
.credential-card h3,
.proof-card h3,
.comparison-card h3,
.contact-card h3,
.contact-side-card h3,
.resume-case-card h3,
.resume-strength-card h3,
.case-study-section h2,
.case-study-sidebar-card h2,
.case-study-cta h2 {
  margin: 0;
}

.work-card__eyebrow,
.proof-card__eyebrow,
.comparison-card__eyebrow,
.case-study-eyebrow,
.resume-card-eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

.work-card__eyebrow a,
.case-study-eyebrow a,
.resume-card-eyebrow a {
  text-decoration: none;
}

.proof-card__signal {
  margin: 0;
  color: var(--text-dark);
  font-weight: 600;
  line-height: 1.5;
}

.work-card__meta,
.case-study-fact-label {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

.work-card__outcomes,
.case-study-list,
.case-study-move-list,
.case-study-result-list,
.resume-strength-list,
.contact-brief-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.55rem;
  color: var(--muted-dark);
}

.work-card__outcomes {
  margin-top: -0.1rem;
}

.work-card__outcomes li,
.case-study-list li,
.case-study-move-list li,
.case-study-result-list li,
.resume-strength-list li,
.contact-brief-list li {
  line-height: 1.55;
}

.contact-brief-list {
  margin-top: -0.1rem;
}

.work-card .ui-btn,
.resume-case-card .ui-btn,
.case-study-cta .ui-btn {
  width: fit-content;
}

.proof-card .ui-btn,
.comparison-card .ui-btn,
.audience-card > .ui-btn {
  width: fit-content;
  margin-top: auto;
}

.work-card .ui-btn,
.resume-case-card .ui-btn {
  margin-top: auto;
}

.contact-card > .ui-btn {
  width: fit-content;
  margin-top: auto;
}

.contact-card .ui-btn,
.contact-hero-card .ui-btn,
.contact-side-card .ui-btn {
  width: fit-content;
}

.contact-card > .contact-cta-row,
.contact-card > .ui-btn {
  margin-top: auto;
}

.work-proof-list,
.case-study-metrics,
.case-study-facts,
.contact-direct-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.work-proof-list li,
.case-study-metrics li,
.case-study-facts li,
.contact-direct-list li {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(170, 214, 255, 0.24);
  background: rgba(9, 24, 42, 0.42);
}

.work-proof-list strong,
.case-study-metric-value,
.case-study-fact-value {
  display: block;
  color: var(--text-dark);
}

.case-study-metric-value {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
  font-weight: 700;
}

.case-study-metric-label {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

.case-study-fact-label {
  display: block;
  margin-bottom: 4px;
}

.case-study-fact-value {
  font-weight: 600;
  line-height: 1.5;
}

.case-study-results-band {
  display: grid;
  gap: 12px;
}

.comparison-card__facts {
  display: grid;
  gap: 10px;
  margin: 0;
}

.comparison-card__facts div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(170, 214, 255, 0.24);
  background: rgba(9, 24, 42, 0.32);
}

.comparison-card__facts dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

.comparison-card__facts dd {
  margin: 0;
  color: var(--text-dark);
  line-height: 1.5;
}

.case-study-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted-dark);
  font-size: 0.92rem;
}

.case-study-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.case-study-breadcrumbs li + li::before {
  content: "/";
  color: var(--muted-dark);
}

.case-study-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.case-study-breadcrumbs a:hover,
.case-study-breadcrumbs a:focus-visible {
  text-decoration: underline;
}

.case-study-layout {
  display: grid;
  gap: 14px;
}

.case-study-main {
  display: grid;
  gap: 14px;
}

.case-study-sidebar {
  display: grid;
  gap: 14px;
}

.case-study-link-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.case-study-link-list li {
  padding: 0;
  border: 0;
  background: none;
}

.case-study-link-list .ui-btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
}

.case-study-link-list a:not(.ui-btn) {
  text-decoration: none;
  font-weight: 600;
}

.contact-direct-list a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.case-study-link-list a:not(.ui-btn):hover,
.case-study-link-list a:not(.ui-btn):focus-visible,
.contact-direct-list a:hover,
.contact-direct-list a:focus-visible {
  text-decoration: underline;
}

.contact-note {
  margin: 0;
  color: var(--muted-dark);
}

.contact-direct-list strong,
.contact-detail-value {
  display: block;
  color: var(--text-dark);
}

.contact-detail-value {
  font-weight: 600;
  line-height: 1.5;
}

.contact-detail-value .ui-btn {
  width: fit-content;
}

.contact-detail-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

.contact-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 780px) {
  .work-preview-grid,
  .process-grid,
  .audience-grid,
  .credential-grid,
  .contact-brief-grid,
  .contact-detail-grid,
  .resume-case-grid,
  .resume-strength-grid,
  .work-card-grid,
  .proof-grid,
  .work-comparison-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-study-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .work-preview-grid,
  .process-grid,
  .audience-grid,
  .resume-case-grid,
  .work-card-grid,
  .proof-grid,
  .work-comparison-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .credential-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .contact-brief-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .contact-detail-grid {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .resume-strength-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-study-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.9fr);
    align-items: start;
  }

  .case-study-sidebar {
    position: sticky;
    top: 108px;
  }
}

html[data-theme-v1="on"][data-theme="light"] .work-proof-list li,
html[data-theme-v1="on"][data-theme="light"] .comparison-card__facts div,
html[data-theme-v1="on"][data-theme="light"] .case-study-metrics li,
html[data-theme-v1="on"][data-theme="light"] .case-study-facts li,
html[data-theme-v1="on"][data-theme="light"] .contact-direct-list li,
html[data-theme-v1="on"][data-theme="light"] .work-card,
html[data-theme-v1="on"][data-theme="light"] .process-card,
html[data-theme-v1="on"][data-theme="light"] .audience-card,
html[data-theme-v1="on"][data-theme="light"] .credential-card,
html[data-theme-v1="on"][data-theme="light"] .proof-card,
html[data-theme-v1="on"][data-theme="light"] .comparison-card,
html[data-theme-v1="on"][data-theme="light"] .contact-card,
html[data-theme-v1="on"][data-theme="light"] .contact-side-card,
html[data-theme-v1="on"][data-theme="light"] .resume-case-card,
html[data-theme-v1="on"][data-theme="light"] .resume-strength-card,
html[data-theme-v1="on"][data-theme="light"] .work-proof-card,
html[data-theme-v1="on"][data-theme="light"] .case-study-sidebar-card {
  border-color: rgba(58, 92, 132, 0.26);
  background: rgba(255, 255, 255, 0.66);
}

html[data-theme-v1="on"][data-theme="light"] .case-study-metric-value,
html[data-theme-v1="on"][data-theme="light"] .case-study-fact-value,
html[data-theme-v1="on"][data-theme="light"] .contact-detail-value,
html[data-theme-v1="on"][data-theme="light"] .contact-direct-list strong,
html[data-theme-v1="on"][data-theme="light"] .work-proof-list strong {
  color: var(--text-light);
}

@media (prefers-color-scheme: light) {
  html[data-theme-v1="on"]:not([data-theme="dark"]) .work-proof-list li,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .comparison-card__facts div,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .case-study-metrics li,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .case-study-facts li,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .contact-direct-list li,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .work-card,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .process-card,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .audience-card,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .proof-card,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .comparison-card,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .credential-card,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .contact-card,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .contact-side-card,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .resume-case-card,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .resume-strength-card,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .work-proof-card,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .case-study-sidebar-card {
    border-color: rgba(58, 92, 132, 0.26);
    background: rgba(255, 255, 255, 0.66);
  }

  html[data-theme-v1="on"]:not([data-theme="dark"]) .case-study-metric-value,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .case-study-fact-value,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .contact-detail-value,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .contact-direct-list strong,
  html[data-theme-v1="on"]:not([data-theme="dark"]) .work-proof-list strong {
    color: var(--text-light);
  }
}