:root {
  --projcard-radius: var(--bellco-radius);
}

/* ---- index hero ---------------------------------------------------------- */

.projhero {
  background: var(--bellco-bg-alt);
  padding: 132px 0 56px;
}

.projhero-crumbs {
  color: var(--bellco-dim);
  font-size: 13px;
  letter-spacing: 0.06em;
  margin-bottom: 24px;
  text-transform: uppercase;
}

.projhero-crumbs a { color: var(--bellco-dim); text-decoration: none; }
.projhero-crumbs a:hover,
.projhero-crumbs a:focus-visible { color: var(--bellco-mint); }
.projhero-crumbs span { margin: 0 8px; }

/* Case-study titles are a full sentence, and the crumb inherits it. Cap the
   current item rather than letting it run the width of the page. */
.projsingle-hero .projhero-crumbs {
  align-items: baseline;
  display: flex;
  max-width: 100%;
}

.projsingle-hero .projhero-crumbs > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46ch;
}

.projhero-title {
  color: var(--bellco-text);
  font-size: 56px;
  font-weight: 900;
  line-height: 1.08;
  margin: 0 0 20px;
  text-transform: uppercase;
}

.projhero-title .accent { color: var(--bellco-mint); }

.projhero-intro {
  color: var(--bellco-muted);
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
  max-width: 62ch;
}

/* ---- filters ------------------------------------------------------------- */

.projfilters {
  background: var(--bellco-bg-alt);
  border-top: 1px solid var(--bellco-hairline);
  padding: 28px 0 34px;
}

.projfilter-row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.projfilter-row + .projfilter-row { margin-top: 16px; }

.projfilter-label {
  color: var(--bellco-dim);
  flex: 0 0 auto;
  font-size: 12px;
  letter-spacing: 0.1em;
  min-width: 92px;
  text-transform: uppercase;
}

.projfilter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.projchip {
  background: rgba(242, 242, 240, 0.05);
  border: 1px solid var(--bellco-hairline);
  border-radius: 999px;
  color: var(--bellco-text);
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.projchip:hover,
.projchip:focus-visible {
  background: rgba(139, 217, 186, 0.14);
  border-color: var(--bellco-mint);
  color: var(--bellco-mint);
}

.projchip.is-on {
  background: var(--bellco-mint);
  border-color: var(--bellco-mint);
  color: var(--bellco-on-mint);
}

/* ---- grid ---------------------------------------------------------------- */

.projlist { background: var(--bellco-bg); padding: 72px 0 104px; }

.projgrid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.projcard {
  background: var(--bellco-bg-card);
  border: 1px solid var(--bellco-hairline);
  border-radius: var(--projcard-radius);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.projcard:hover,
.projcard:focus-within {
  border-color: rgba(139, 217, 186, 0.45);
  transform: translateY(-4px);
}

.projcard-link {
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.projcard-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.projcard-img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  width: 100%;
}

.projcard:hover .projcard-img { transform: scale(1.04); }

.projcard-metric {
  backdrop-filter: blur(6px);
  background: rgba(8, 14, 24, 0.82);
  border: 1px solid rgba(139, 217, 186, 0.35);
  border-radius: 10px;
  bottom: 14px;
  color: var(--bellco-text);
  left: 14px;
  padding: 8px 14px;
  position: absolute;
}

.projcard-metric strong {
  color: var(--bellco-mint);
  display: block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.projcard-metric span {
  color: var(--bellco-muted);
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.projcard-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 26px 26px 28px;
}

.projcard-cat {
  color: var(--bellco-mint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.projcard-title {
  color: var(--bellco-text);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 12px;
}

.projcard-summary {
  color: var(--bellco-muted);
  flex: 1 1 auto;
  /* 16, not 15: this is the card's body paragraph, and every other card
     description on the site is 16. Marissa, 2026-08-25. */
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 20px;
}

.projcard-more {
  align-items: center;
  color: var(--bellco-mint);
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
}

.projempty {
  color: var(--bellco-muted);
  font-size: 18px;
}

.projempty a { color: var(--bellco-mint); }

/* ---- single -------------------------------------------------------------- */

.projsingle-hero {
  background: var(--bellco-bg-alt);
  overflow: hidden;
  padding: 140px 0 64px;
  position: relative;
}

.projsingle-hero-bg {
  inset: 0;
  position: absolute;
}

.projsingle-hero-img {
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  width: 100%;
}

.projsingle-hero::after {
  background: linear-gradient(90deg, var(--bellco-bg-alt) 8%, rgba(11, 18, 32, 0.55) 70%, rgba(11, 18, 32, 0.2) 100%);
  content: "";
  inset: 0;
  position: absolute;
}

.projsingle-hero-inner { position: relative; z-index: 1; }

.projsingle-title {
  color: var(--bellco-text);
  font-size: 46px;
  font-weight: 900;
  line-height: 1.12;
  margin: 0 0 20px;
  max-width: 22ch;
}

.projsingle-summary {
  color: var(--bellco-muted);
  font-size: 19px;
  line-height: 1.7;
  margin: 0 0 36px;
  max-width: 62ch;
}

.projsingle-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 48px;
}

.projsingle-metric strong {
  color: var(--bellco-mint);
  display: block;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.projsingle-metric span {
  color: var(--bellco-muted);
  display: block;
  font-size: 13px;
  margin-top: 6px;
}

.projsingle-terms { color: var(--bellco-text); font-size: 15px; }

.projsingle-terms-label {
  color: var(--bellco-dim);
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.projsingle-terms a { color: var(--bellco-text); text-decoration: none; border-bottom: 1px solid rgba(139, 217, 186, 0.4); }
.projsingle-terms a:hover,
.projsingle-terms a:focus-visible { color: var(--bellco-mint); }

.projsection { background: var(--bellco-bg); padding: 72px 0; }
.projsection.is-alt { background: var(--bellco-bg-alt); }

.projsection-prose { max-width: 74ch; }

.projsection-title {
  color: var(--bellco-text);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 20px;
  text-transform: uppercase;
}

.projsection-title--accent { color: var(--bellco-mint); }
.projsection-prose .projsection-title + .projsection-body + .projsection-title { margin-top: 44px; }

.projsection-body p {
  color: var(--bellco-muted);
  font-size: 17px;
  line-height: 1.8;
  margin: 0 0 18px;
}

.projsection-body p:last-child { margin-bottom: 0; }

/* The six hand-written case studies were plain paragraphs, so `p` was all this
   section ever had to style. The 23 ported from the live site carry the
   structure Bellco wrote them with -- a sub-heading under "The Solution", the
   key-design-features bullets, links out to the product pages -- and without
   these they fall back to browser defaults: Times bullets at 16px against a
   #080E18 background. */
.projsection-body > :first-child { margin-top: 0; }
.projsection-body > :last-child { margin-bottom: 0; }

.projsection-body h3,
.projsection-body h4 {
  color: var(--bellco-text);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  margin: 32px 0 12px;
}

.projsection-body h4 { font-size: 17px; }

.projsection-body ul,
.projsection-body ol {
  color: var(--bellco-muted);
  font-size: 17px;
  line-height: 1.8;
  margin: 0 0 20px;
  padding-left: 22px;
}

/* Sized on the li itself, not left to inherit from the ul. Theme Settings
   emits `body, p, ul, li { font-size: var(--body-size); line-height:
   var(--body-line-height) }` inline, and a rule that matches an element
   directly beats a value inherited from its parent -- so an li in a 17px/1.8
   column renders at 16px/1.5 unless it is told otherwise. Same trap style.css
   already documents for colour. */
.projsection-body li {
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 8px;
}
.projsection-body li:last-child { margin-bottom: 0; }
.projsection-body li::marker { color: var(--bellco-mint); }

.projsection-body strong { color: var(--bellco-text); font-weight: 700; }

/* Prose links only. `.projsection-body a` (0,1,1) outranks `.btn` (0,1,0), so
   without :not(.btn) the "Watch the system video" button in See It Running
   took mint text on its own mint fill and a 1px bottom border. */
.projsection-body a:not(.btn) {
  border-bottom: 1px solid rgba(139, 217, 186, 0.4);
  color: var(--bellco-mint);
  text-decoration: none;
}

.projsection-body a:not(.btn):hover,
.projsection-body a:not(.btn):focus-visible { border-bottom-color: var(--bellco-mint); }

/* A spec table that survived as a table rather than being lifted into the
   `specs` repeater. It has to scroll rather than force the 74ch prose column
   wider than the container. */
.projsection-body table {
  border-collapse: collapse;
  display: block;
  font-size: 15px;
  margin: 0 0 20px;
  max-width: 100%;
  overflow-x: auto;
}

.projsection-body td,
.projsection-body th {
  border-bottom: 1px solid var(--bellco-hairline);
  color: var(--bellco-muted);
  padding: 10px 16px 10px 0;
  text-align: left;
  vertical-align: top;
}

.projspecs {
  display: grid;
  gap: 14px 40px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.projspec {
  align-items: flex-start;
  color: var(--bellco-text);
  display: flex;
  font-size: 16px;
  gap: 12px;
  line-height: 1.6;
}

.projspec-tick { color: var(--bellco-mint); flex: 0 0 auto; line-height: 0; margin-top: 4px; }

.projgallery {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.projgallery-item { margin: 0; }

.projgallery-item img {
  border-radius: var(--bellco-radius-sm);
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.projvideo .projsection-body { margin-top: 8px; }

.projcta {
  background: var(--bellco-bg-card);
  border-top: 1px solid var(--bellco-hairline);
  padding: 80px 0;
  text-align: center;
}

.projcta-title {
  color: var(--bellco-text);
  font-size: 34px;
  font-weight: 900;
  margin: 0 0 14px;
}

.projcta-body {
  color: var(--bellco-muted);
  font-size: 17px;
  line-height: 1.7;
  margin: 0 auto 30px;
  max-width: 56ch;
}

.projcta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 0;
}

/* ---- breakpoints --------------------------------------------------------- */

@media (max-width: 1199px) {
  .projhero { padding: 116px 0 44px; }
  .projhero-title { font-size: 44px; }
  .projgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .projsingle-title { font-size: 38px; }
  .projgallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .projhero { padding: 104px 0 36px; }
  .projhero-title { font-size: 32px; }
  .projhero-intro { font-size: 16px; }
  .projfilter-row { flex-direction: column; gap: 10px; }
  .projfilter-label { min-width: 0; }
  .projlist { padding: 48px 0 72px; }
  .projgrid { grid-template-columns: 1fr; }
  .projsingle-hero { padding: 104px 0 44px; }
  .projsingle-title { font-size: 28px; }
  .projsingle-summary { font-size: 17px; }
  .projsection { padding: 48px 0; }
  .projspecs { grid-template-columns: 1fr; }
  .projgallery { grid-template-columns: 1fr; }
  .projcta { padding: 56px 0; }
  .projcta-title { font-size: 26px; }
}