.portfolio-hero {
  background: var(--ink);
}
.portfolio-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
#completed-projects {
  scroll-margin-top: 28px;
}
.portfolio-intro {
  padding: clamp(48px, 6vw, 76px) 0 clamp(42px, 5vw, 60px);
  background: var(--panel);
}
.portfolio-intro .lead {
  max-width: 710px;
  margin-top: 18px;
}
.portfolio-detail-intro .crumb {
  margin-bottom: 26px;
}
.portfolio-location {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}
.portfolio-detail-intro .portfolio-location {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 600;
}
.portfolio-list {
  padding: clamp(32px, 4.5vw, 56px) 0 clamp(48px, 7vw, 84px);
}
.wrap.portfolio-list-heading {
  margin-bottom: 28px;
}
.portfolio-list-description {
  max-width: 720px;
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.portfolio-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(21, 23, 26, .08);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.portfolio-card:hover {
  border-color: #bcb9b2;
  box-shadow: 0 10px 24px rgba(21, 23, 26, .10);
  transform: translateY(-2px);
}
.portfolio-card:focus-visible, .portfolio-photo-link:focus-visible {
  outline: 3px solid var(--accent-d);
  outline-offset: 3px;
}
.portfolio-card-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--panel2);
}
.portfolio-card-media img, .portfolio-photo-link img {
  display: block;
  width: 100%;
  height: 100%;
}
.portfolio-card-media img {
  position: absolute;
  inset: 0;
  object-fit: cover;
}
.portfolio-card-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(21, 23, 26, .9);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.portfolio-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  border-radius: 4px;
  padding: 4px 8px;
  background: var(--ink);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.portfolio-tag-after {
  background: var(--accent-d);
}
.portfolio-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 23px 22px 25px;
}
.portfolio-card-body .eyebrow {
  margin: 0;
  color: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.portfolio-card-body .h3 {
  line-height: 1.2;
  margin: 0;
}
.portfolio-summary {
  flex: 1;
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}
.portfolio-card-body .portfolio-location {
  flex: 1;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}
.portfolio-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}
.portfolio-photo-help {
  color: var(--muted);
  font-size: 15px;
  margin: 8px 0 22px;
}
.portfolio-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.portfolio-gallery-single {
  grid-template-columns: minmax(0, 660px);
}
.portfolio-photo {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.portfolio-photo-link {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--panel);
}
.portfolio-photo-link:focus-visible {
  outline-offset: -4px;
}
.portfolio-photo-link img {
  object-fit: contain;
}
.portfolio-photo-link .portfolio-tag {
  top: 12px;
  bottom: auto;
  left: 12px;
}
.portfolio-enlarge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  border-radius: 999px;
  padding: 6px 12px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 12px rgba(21, 23, 26, .13);
  font-size: 13px;
  font-weight: 700;
}
.portfolio-photo figcaption {
  padding: 14px 18px;
  color: var(--muted);
  font-size: 15px;
}
.portfolio-quote {
  padding: 44px 0;
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.portfolio-quote .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.portfolio-viewer {
  width: min(960px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: #fff;
}
.portfolio-viewer::backdrop {
  background: rgba(14, 15, 17, .78);
}
.portfolio-viewer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.portfolio-viewer-title, .portfolio-viewer-caption {
  margin: 0;
}
.portfolio-viewer-title {
  font-weight: 800;
}
.portfolio-viewer-caption {
  color: var(--muted);
  font-size: 15px;
}
.portfolio-viewer-image {
  display: block;
  width: 100%;
  height: min(65vh, 620px);
  height: min(65dvh, 620px);
  object-fit: contain;
  background: var(--ink);
}
.portfolio-viewer-close, .portfolio-viewer-nav button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
}
.portfolio-viewer-close:hover, .portfolio-viewer-nav button:hover:not(:disabled) {
  border-color: var(--accent-d);
}
.portfolio-viewer-nav {
  display: flex;
  gap: 6px;
}
.portfolio-viewer-nav[hidden] {
  display: none;
}
.portfolio-viewer-nav button:disabled {
  opacity: .4;
  cursor: default;
}
@media (max-width: 900px) {
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .portfolio-grid, .portfolio-gallery { grid-template-columns: minmax(0, 1fr); }
  .portfolio-viewer-footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-card { transition: none; }
}
.project-detail-hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(390px,44vw,590px);padding:72px 0 56px;overflow:hidden;background:var(--ink)}
.project-detail-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%}
.ridgeline-hero{min-height:clamp(420px,38vw,540px)}
.ridgeline-hero .project-detail-cover{object-position:center 42%}
.ridgeline-hero .project-detail-veil{background:linear-gradient(90deg,rgba(15,17,19,.78) 0%,rgba(15,17,19,.42) 42%,rgba(15,17,19,.06) 100%),linear-gradient(0deg,rgba(15,17,19,.22),transparent 48%)}
a[href="/projects/ridgeline-main-line-reroute/"] .portfolio-card-media img{object-position:center 40%}
.countrywood-hero .project-detail-cover{object-position:center 42%}
a[href="/projects/countrywood-fire-restoration/"] .portfolio-card-media img{object-position:center 42%}
.project-detail-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,17,19,.82) 0%,rgba(15,17,19,.52) 48%,rgba(15,17,19,.10) 100%)}
.project-detail-content{position:relative;z-index:1;width:100%;color:#fff}
.project-detail-content .crumb{display:inline-flex;margin:0 0 20px;color:rgba(255,255,255,.86)}
.project-detail-content .eyebrow{margin:0 0 12px;color:#ff8a62}
.project-detail-content .h1{max-width:900px;margin:0;color:#fff;font-size:clamp(36px,5vw,62px);line-height:1.06}
.project-detail-location{margin:15px 0 0;color:rgba(255,255,255,.94);font-size:17px;font-weight:650}
.project-detail-content .lead{max-width:760px;margin:14px 0 0;color:rgba(255,255,255,.88)}
.portfolio-list .h2sm{margin:0}
@media(max-width:600px){.project-detail-hero{min-height:440px;padding:56px 0 38px}.project-detail-veil{background:linear-gradient(0deg,rgba(15,17,19,.82) 0%,rgba(15,17,19,.45) 60%,rgba(15,17,19,.08) 100%)}.project-detail-content .lead{font-size:16px}.project-detail-location{font-size:15px}}
@media(max-width:600px){.ridgeline-hero{min-height:390px}.ridgeline-hero .project-detail-cover{object-position:center 43%}.ridgeline-hero .project-detail-veil{background:linear-gradient(0deg,rgba(15,17,19,.82) 0%,rgba(15,17,19,.4) 62%,rgba(15,17,19,.06) 100%)}}
.project-overview{padding:clamp(38px,5vw,68px) 0;background:#fff;border-bottom:1px solid var(--line)}
.project-overview-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(270px,.8fr);gap:clamp(28px,5vw,72px);align-items:center}
.project-overview-copy .eyebrow{margin:0 0 10px;color:var(--accent)}
.project-overview-copy .h2{margin:0 0 15px}
.project-overview-description{max-width:700px;margin:0;color:var(--ink2);font-size:17px;line-height:1.75}.project-overview-description p{margin:0 0 14px}.project-overview-description p:last-child{margin-bottom:0}
.project-facts{display:grid;grid-template-columns:1fr 1fr;align-self:start;margin:24px 0 0;border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.project-facts>div{padding:16px 18px;border-bottom:1px solid var(--line)}
.project-facts>div:nth-child(odd){border-right:1px solid var(--line)}
.project-facts>div:nth-last-child(-n+2){border-bottom:0}
.project-facts dt{margin:0 0 5px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.project-facts dd{margin:0;color:var(--ink);font-size:15px;font-weight:650;line-height:1.4}
.project-facts>div:only-child,.project-facts>div:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
@media(max-width:700px){.project-overview-grid{grid-template-columns:1fr;gap:24px}.project-facts{grid-template-columns:1fr 1fr;margin-top:0}.project-overview-description{font-size:16px}}

.project-gallery-heading{margin:0 0 24px}.project-gallery-heading .eyebrow{margin:0 0 8px}.project-gallery-photo{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;overflow:hidden;background:var(--panel2)}.project-gallery-photo img{display:block;width:100%;height:100%;object-fit:contain}




.project-gallery-photo-link{position:relative;color:inherit;text-decoration:none;cursor:zoom-in}
.project-gallery-photo-link:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Casa Roka photo carousels */
.project-gallery-heading{margin:0 0 28px}
.project-gallery-group+.project-gallery-group{margin-top:42px}
.project-gallery-subhead{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 14px}
.project-gallery-subhead .project-gallery-heading{margin:0}
.project-gallery-subhead .h3sm{margin:0}
.project-gallery-controls{display:flex;align-items:center;gap:10px;flex-shrink:0}
.project-gallery-controls[hidden]{display:none}
.gallery-arrow{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font-size:21px;line-height:1;text-decoration:none;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.gallery-arrow:hover:not(:disabled){border-color:var(--accent);background:var(--accent);color:#fff}
.gallery-arrow:focus-visible{outline:3px solid var(--accent-d);outline-offset:3px}
.gallery-arrow:disabled{opacity:.35;cursor:default}
.project-photo-carousel{display:flex;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:2px 2px 12px}
.project-photo-carousel .portfolio-photo{flex:0 0 calc((100% - 44px)/3);min-width:0;scroll-snap-align:start}
.project-photo-carousel[data-gallery-count="1"] .portfolio-photo{flex-basis:100%}
.project-photo-carousel[data-gallery-count="2"] .portfolio-photo{flex-basis:calc((100% - 22px)/2)}
.project-photo-carousel::-webkit-scrollbar{display:none}
.project-photo-carousel .portfolio-photo{flex:0 0 calc((100% - 44px)/3);min-width:0;scroll-snap-align:start}
.project-photo-carousel .project-gallery-photo{aspect-ratio:4/3}
@media(max-width:820px){.project-photo-carousel .portfolio-photo{flex-basis:calc((100% - 22px)/2)}}
@media(max-width:520px){.project-photo-carousel{gap:14px}.project-photo-carousel .portfolio-photo,.project-photo-carousel[data-gallery-count="2"] .portfolio-photo{flex-basis:100%}.project-photo-carousel .portfolio-photo figcaption{padding:11px 12px;font-size:13px}.project-gallery-group+.project-gallery-group{margin-top:32px}}
@media(prefers-reduced-motion:reduce){.project-photo-carousel{scroll-behavior:auto}.gallery-arrow{transition:none}}
/* Keep project gallery arrows above the photo row and directly clickable. */
.project-gallery-controls{position:relative;z-index:5;pointer-events:auto}
.gallery-arrow{pointer-events:auto}


/* Adjust the Springs featured photo to show slightly more of the hose reel. */
.springs-hydro-jetting-hero .project-detail-cover{object-position:center 56%}
a[href="/projects/the-springs-hydro-jetting/"] .portfolio-card-media img{object-position:center 56%}