/* CSS tokens for more/ pages when using the case-study template */
:root {
  --sans: 'Poppins', system-ui, sans-serif;
  --ink: #0d0d0d;
  --ink-2: rgba(13, 13, 13, 0.85);
  --ink-3: rgba(13, 13, 13, 0.6);
  --bg: #ffffff;
  --accent: #1a9070;
  --accent-2: #e2f5f0;
  --line: rgba(0, 0, 0, 0.06);
  --img-radius: 24px;
  --img-stroke: 1px solid rgba(0, 0, 0, 0.08);
  --nav-h: 64px;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
}

/* Centered logo nav on project detail pages */
nav.more-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: auto;
  min-height: 0;
  padding: 16px 0;
  margin: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}

.more-nav-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7a7a7a;
  text-decoration: none;
  transition: color 0.2s ease;
}

.more-nav-logo svg {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.more-nav-logo:hover {
  color: #555555;
}

.nav-overlay-sub,
.nav-links {
  display: none !important;
}

.page {
  max-width: 1038px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.section {
  padding: 3rem 0;
}

.two-col {
  display: grid;
  grid-template-columns: clamp(160px, 18vw, 220px) 1fr;
  gap: 4rem;
  align-items: start;
}

.two-col .section-title {
  margin-bottom: 0;
}

.section-title {
  font-size: 28px;
  font-weight: 700;
}

.body-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-3);
}

.body-text p + p {
  margin-top: 1rem;
}

.body-text ul {
  margin-top: 1rem;
  padding-left: 1.25rem;
}

.body-text a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.body-text a:hover {
  text-decoration: underline;
}

.img-block img,
.img-stack img,
.img-grid img {
  width: 100%;
  display: block;
  border-radius: var(--img-radius);
  border: var(--img-stroke);
  box-sizing: border-box;
  cursor: zoom-in;
}

.img-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 2.5rem;
}

.img-grid {
  display: grid;
  gap: 16px;
  margin-top: 2.5rem;
}

.img-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.img-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.img-grid--solution {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto auto;
}

.img-grid--solution .solution-move {
  grid-column: 1;
  grid-row: 1;
}

.img-grid--solution .solution-link {
  grid-column: 1;
  grid-row: 2;
}

.img-grid--solution .solution-verify {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: start;
}

.img-grid--solution .solution-design {
  grid-column: 1;
  grid-row: 3;
}

.img-grid--solution .solution-corp {
  grid-column: 2;
  grid-row: 3;
}

.img-grid--8-4 {
  grid-template-columns: 2fr 1fr;
}

.section-media {
  margin-top: 2.5rem;
}

/* Hero */
.more-header {
  background-color: var(--hero-bg, var(--accent-2));
  min-height: 60vh;
  display: flex;
  align-items: center;
  margin-bottom: 3rem;
  color: var(--hero-ink, var(--ink));
}

.more-hero-inner {
  max-width: 1038px;
  margin: 0 auto;
  width: 100%;
  padding: calc(var(--nav-h) + 4rem) 2.5rem 4rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.more-hero-text {
  max-width: 400px;
  width: 100%;
  opacity: 0;
  animation: up 0.7s 0.15s ease forwards;
}

.more-hero-text h1 {
  font-family: var(--sans);
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 700;
  color: var(--hero-ink, var(--ink));
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.more-hero-meta {
  font-size: 14px;
  color: var(--hero-ink, var(--ink));
  opacity: 0.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.more-hero-desc {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--hero-ink, var(--ink));
  opacity: 0.75;
  line-height: 1.75;
  margin-bottom: 2rem;
  font-weight: 400;
  max-width: 400px;
}

.more-hero-fields {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}

.more-hero-field-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hero-ink, var(--ink));
  opacity: 0.4;
  margin-bottom: 4px;
}

.more-hero-field-value {
  font-size: 15px;
  color: var(--hero-ink, var(--ink));
  opacity: 0.8;
  font-weight: 400;
}

.more-hero-media {
  max-width: 678px;
  width: 100%;
  flex-shrink: 1;
  opacity: 0;
  animation: up 0.7s 0.35s ease forwards;
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.more-hero-media img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 24px;
  object-fit: contain;
}

/* Per-project hero colors */
.hero--approv { --hero-bg: #EFEFEF; --hero-ink: #2d3a2e; }
.hero--approv .more-hero-media {
  overflow: visible;
  border-radius: 0;
  padding: 8px 8px 32px;
}

.hero--approv .more-hero-media img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.hero--builder-portal { --hero-bg: #d4cec8; --hero-ink: #2d3a2e; }
.hero--concierge { --hero-bg: #e3dbe8; --hero-ink: #2d3a2e; }
.hero--feed-dashboard { --hero-bg: #E2EBF3; --hero-ink: #2d3a2e; }
.hero--feed-dashboard .more-hero-media {
  overflow: visible;
  padding: 8px 8px 32px;
}

.hero--feed-dashboard .more-hero-media img {
  width: 80%;
  height: auto;
  border: var(--img-stroke);
  box-sizing: border-box;
  border-radius: var(--img-radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}
.hero--frost { --hero-bg: #EAF1E9; --hero-ink: #2d3a2e; }
.hero--hard-rock { --hero-bg: #FCEED2; --hero-ink: #2d3a2e; }
.hero--holiday-retirement { --hero-bg: #eef3f4; --hero-ink: #3a3a3c; }

.cs-hero-full.more-header.hero--holiday-retirement {
  background-color: #eef3f4;
}
.hero--listing-assis { --hero-bg: #eef1f5; --hero-ink: #2d3a2e; }
.hero--listing-input { --hero-bg: #c8d8d4; --hero-ink: #2d3a2e; }
.hero--logos { --hero-bg: #cce5e5; --hero-ink: #2d3a2e; }
.hero--order-management { --hero-bg: #a3caca; --hero-ink: #2d3a2e; }
.hero--skratch { --hero-bg: #EEEFF8; --hero-ink: #2d3a2e; }
.hero--skratch.more-header {
  max-height: 900px;
  min-height: 0;
  overflow: hidden;
}

.hero--skratch .more-hero-inner {
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: 2rem;
  max-height: 900px;
  box-sizing: border-box;
  justify-content: flex-start;
  gap: 3rem;
}

.hero--skratch .more-hero-media {
  max-height: calc((900px - var(--nav-h) - 4rem) * 0.8);
  max-width: min(384px, 33.6%);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-left: 10%;
}

.hero--skratch .more-hero-media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc((900px - var(--nav-h) - 4rem) * 0.8);
  object-fit: contain;
  display: block;
  margin: 0;
}
.hero--stylespotter { --hero-bg: #eedde6; --hero-ink: #2d3a2e; }
.hero--urban { --hero-bg: #f3f2f2; --hero-ink: #2d3a2e; }

/* More work footer */
.more-work-footer {
  border-top: 1px solid var(--line);
  padding: 4rem 0;
}

.more-work-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.more-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.more-work-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  border-radius: 24px;
  min-height: 140px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.more-work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.more-work-card .label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 6px;
}

.more-work-card .title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.more-work-card .subtitle {
  font-size: 13px;
  opacity: 0.5;
  margin-top: 8px;
}

/* Shared chips (sKratch, Holiday Retirement) */
.page--skratch .library-chips,
.page--holiday .library-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.page--skratch .chip,
.page--holiday .chip {
  background: #e4e4e4;
  color: #363530;
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.page--holiday .tag-accent,
.page--skratch .tag-accent {
  color: #363530;
  font-weight: 700;
}

.page--skratch .btn-link {
  display: inline-block;
  background: #6C6CC6;
  color: #fff !important;
  padding: 5px 18px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-top: 1rem;
}

.page--skratch .btn-link:hover {
  background: #5555aa;
  text-decoration: none;
}

@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;
  }

  .more-hero-inner {
    flex-direction: column;
    padding: calc(var(--nav-h) + 2rem) 1.5rem 2rem;
  }

  .more-work-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }

  .img-grid--2,
  .img-grid--3,
  .img-grid--8-4,
  .img-grid--solution {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .img-grid--solution .solution-move,
  .img-grid--solution .solution-link,
  .img-grid--solution .solution-verify,
  .img-grid--solution .solution-design,
  .img-grid--solution .solution-corp {
    grid-column: 1;
    grid-row: auto;
  }
}