/* Project pages + project archives on mycarpetcleaning.us.
   Written into the website repo as /assets/css/projects.css by the
   Project Desk on every publish, so edit it here, not there.
   Uses the site's own tokens (--primary, --font-display, …) so pages sit
   inside the existing look. Text-bearing teal uses a darker step than the
   site's --primary: white on #0f9dbd is 3.2:1 and fails WCAG AA. */

.pj { --pj-ink: hsl(var(--foreground)); --pj-soft: hsl(var(--muted-foreground)); --pj-line: hsl(var(--border));
  --pj-teal: hsl(191 85% 40%); --pj-teal-ink: hsl(191 85% 26%); --pj-green: hsl(160 55% 32%);
  --pj-tint: hsl(var(--accent)); --pj-mist: hsl(var(--muted));
  color: var(--pj-ink); font-family: var(--font-body); padding-top: 5.5rem; }
@media (min-width: 768px) { .pj { padding-top: 6.5rem; } }
.pj *, .pj *::before, .pj *::after { box-sizing: border-box; }
.pj-wrap { max-width: 1120px; margin: 0 auto; }
.pj-narrow { max-width: 760px; }
.pj a { color: var(--pj-teal-ink); text-underline-offset: 3px; }
.pj a:hover { text-decoration: underline; }
.pj :focus-visible { outline: 3px solid var(--pj-teal); outline-offset: 3px; border-radius: 4px; }

.pj-crumbs { font-size: .8125rem; color: var(--pj-soft); display: flex; flex-wrap: wrap; gap: .375rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.pj-crumbs li + li::before { content: "›"; margin-right: .375rem; color: var(--pj-line); }
.pj-crumbs a { color: var(--pj-soft); text-decoration: none; }

.pj-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pj-teal-ink); margin: 0 0 .75rem; }
.pj h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.1; letter-spacing: -.01em; margin: 0 0 1rem; text-wrap: balance; }
.pj h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.2; margin: 0 0 1rem; text-wrap: balance; }
.pj h3 { font-size: 1.0625rem; font-weight: 700; margin: 0; }
.pj-dek { font-size: 1.125rem; line-height: 1.6; color: var(--pj-soft); max-width: 62ch; margin: 0 0 1.5rem; }
.pj-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.pj svg { width: 1.25rem; height: 1.25rem; flex: none; }
.pj-chip svg { width: 1rem; height: 1rem; }
.pj-chip { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: 999px; background: var(--pj-tint); color: var(--pj-teal-ink); font-size: .8125rem; font-weight: 600; text-decoration: none; }

/* Before/after compare */
.pj-compare { position: relative; margin: 0 auto 1.5rem; border-radius: 1.25rem; overflow: hidden; aspect-ratio: 3 / 2; background: var(--pj-mist); width: 100%; max-width: 760px; }
.pj-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-compare .pj-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.pj-compare .pj-divider { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; }
.pj-compare .pj-divider::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23133' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E"); background-size: 1.25rem; background-repeat: no-repeat; background-position: center; }
.pj-compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.pj-compare input[type=range]:focus-visible ~ .pj-divider::after { outline: 3px solid var(--pj-teal); outline-offset: 2px; }
.pj-tag { position: absolute; top: .875rem; padding: .3rem .7rem; border-radius: 999px; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; color: #fff; pointer-events: none; }
.pj-tag.b { left: .875rem; background: rgba(19,28,32,.78); }
.pj-tag.a { right: .875rem; background: var(--pj-green); }
.pj-compare-hint { font-size: .8125rem; color: var(--pj-soft); margin: -1rem auto 2rem; max-width: 760px; text-align: center; }

.pj-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; background: var(--pj-line); border: 1px solid var(--pj-line); border-radius: 1rem; overflow: hidden; margin: 0 0 1rem; padding: 0; list-style: none; }
.pj-stats li { background: hsl(var(--background)); padding: 1rem 1.125rem; }
.pj-stats b { display: block; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pj-stats span { font-size: .8125rem; color: var(--pj-soft); }

.pj-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: 1rem 0; margin: 0 0 3rem; list-style: none; border-bottom: 1px solid var(--pj-line); }
.pj-trust li { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--pj-soft); }
.pj-trust svg { width: 1.125rem; height: 1.125rem; color: var(--pj-teal-ink); flex: none; }
.pj-trust b { color: var(--pj-ink); }

.pj-section { margin: 0 0 3.5rem; }
.pj-story { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .pj-story { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.pj-prose p { font-size: 1.0625rem; line-height: 1.75; margin: 0 0 1.25rem; max-width: 66ch; }
.pj-byline { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.5rem; }
.pj-byline img, .pj-byline .pj-initial { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; flex: none; }
.pj-initial { display: grid; place-items: center; background: var(--pj-tint); color: var(--pj-teal-ink); font-weight: 700; }
.pj-byline small { display: block; color: var(--pj-soft); font-size: .8125rem; }
.pj-did { background: var(--pj-mist); border-radius: 1rem; padding: 1.5rem; align-self: start; }
/* Side by side, the box follows the story down; top clears the fixed site header. */
@media (min-width: 960px) { .pj-did { position: sticky; top: 7.5rem; } }
.pj-did ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.pj-did li { display: grid; grid-template-columns: 1.25rem 1fr; gap: .625rem; font-size: .9375rem; line-height: 1.5; }
.pj-did li::before { content: ""; width: 1.25rem; height: 1.25rem; margin-top: .1rem; border-radius: 50%; background: var(--pj-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / .75rem no-repeat; }

.pj-gallery { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.pj-gallery img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: .875rem; display: block; }

.pj-video { position: relative; aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden; background: #0b1316; max-width: 100%; }
.pj-video button { all: unset; position: absolute; inset: 0; cursor: pointer; display: grid; place-items: center; }
.pj-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.pj-video .pj-play { position: relative; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: rgba(255,255,255,.95); display: grid; place-items: center; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.pj-video .pj-play::after { content: ""; border-style: solid; border-width: .75rem 0 .75rem 1.25rem; border-color: transparent transparent transparent #133; margin-left: .3rem; }
.pj-video button:focus-visible .pj-play { outline: 3px solid var(--pj-teal); outline-offset: 4px; }
.pj-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.pj-review { margin: 0; padding: 1.75rem; border-radius: 1rem; background: hsl(var(--warm)); border: 1px solid var(--pj-line); }
.pj-review p { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.55; margin: 0 0 1rem; }
.pj-review footer { font-size: .875rem; color: var(--pj-soft); }
.pj-stars { color: #b7791f; letter-spacing: .1em; margin-bottom: .5rem; }

.pj-scope { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pj-scope a, .pj-scope span { display: inline-flex; padding: .5rem .875rem; border-radius: 999px; border: 1px solid var(--pj-line); font-size: .875rem; font-weight: 600; color: var(--pj-ink); text-decoration: none; background: hsl(var(--background)); }
.pj-scope a { border-color: hsl(191 60% 80%); color: var(--pj-teal-ink); }
.pj-scope a:hover { background: var(--pj-tint); text-decoration: none; }

.pj-faq { border-top: 1px solid var(--pj-line); }
.pj-faq-item { border-bottom: 1px solid var(--pj-line); }
.pj-faq-item h3 { margin: 0; }
.pj-faq .faq-toggle { all: unset; box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.125rem 0; font-weight: 700; font-size: 1.0625rem; cursor: pointer; }
.pj-faq .faq-toggle:focus-visible { outline: 3px solid var(--pj-teal); outline-offset: 2px; }
.pj-faq .faq-toggle svg { width: 1.25rem; height: 1.25rem; flex: none; transition: transform .2s; }
.pj-faq-panel { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .25s ease, opacity .2s; }
.pj-faq-panel p { margin: 0; color: var(--pj-soft); line-height: 1.7; max-width: 70ch; }

.pj-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.pj-card { display: flex; flex-direction: column; border: 1px solid var(--pj-line); border-radius: 1rem; overflow: hidden; background: hsl(var(--background)); text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.pj a.pj-card { color: inherit; }
.pj-card:hover { box-shadow: 0 10px 30px -12px rgba(15,60,70,.35); text-decoration: none; }
@media (prefers-reduced-motion: no-preference) { .pj-card:hover { transform: translateY(-2px); } }
.pj-card-img { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 3 / 1; }
.pj-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-card-body { padding: 1rem 1.125rem 1.25rem; display: grid; gap: .375rem; }
.pj-card-body .pj-eyebrow { margin: 0; font-size: .6875rem; }
.pj-card-body h3 { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.3; }
.pj-card-body p { margin: 0; font-size: .875rem; color: var(--pj-soft); line-height: 1.55; }

.pj-office { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); background: var(--pj-mist); border-radius: 1.25rem; padding: 1.5rem; }
@media (min-width: 860px) { .pj-office { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); padding: 2rem; } }
.pj-office address { font-style: normal; line-height: 1.7; margin-bottom: 1.25rem; }
.pj-office iframe { width: 100%; min-height: 280px; height: 100%; border: 0; border-radius: .875rem; }
.pj-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.pj-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .75rem 1.5rem; border-radius: .625rem; font-weight: 700; text-decoration: none; }
.pj a.pj-btn:hover { text-decoration: none; }
.pj a.pj-btn-solid { background: var(--pj-teal-ink); color: #fff; }
.pj a.pj-btn-solid:hover { background: hsl(191 85% 21%); }
.pj a.pj-btn-line { border: 2px solid var(--pj-teal-ink); color: var(--pj-teal-ink); }

.pj-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.pj-links a { font-weight: 600; }

.pj-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.pj-filters a { display: inline-flex; padding: .45rem .9rem; border-radius: 999px; background: var(--pj-mist); color: var(--pj-ink); font-size: .875rem; font-weight: 600; text-decoration: none; }
.pj-filters a[aria-current="page"] { background: var(--pj-teal-ink); color: #fff; }
.pj-filters small { opacity: .7; margin-left: .35rem; font-weight: 500; }
.pj-bottom-pad { height: 4rem; }