/* Innovative Site Solutions | project portfolio — isolated from existing service styles */
.portfolio-hero{padding:clamp(66px,8vw,106px) 0 clamp(35px,5vw,60px);background:var(--warm-stone)}
.portfolio-hero .shell{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);align-items:end;gap:clamp(24px,5vw,70px)}
.portfolio-hero h1,.project-hero h1{color:var(--charcoal);font-size:clamp(2.4rem,4.3vw,4rem);line-height:1.12;letter-spacing:-.025em;font-weight:600;max-width:690px}
.portfolio-hero p,.project-hero p{font-size:1.05rem;color:var(--muted-clay);margin:0;line-height:1.6;max-width:58ch}
.portfolio-breadcrumb{display:flex;flex-wrap:wrap;gap:10px;font-size:.84rem;margin:0 0 26px;color:var(--muted-clay)}
.portfolio-breadcrumb a{text-underline-offset:4px}
.portfolio-collection{padding:0 0 var(--section-pad);background:var(--warm-stone)}
.portfolio-collection+.portfolio-collection{padding-top:0}
.portfolio-collection-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:26px}
.portfolio-collection-heading h2{font-size:clamp(1.6rem,2.5vw,2.4rem)}
.portfolio-collection-heading span{font-size:.88rem;color:var(--muted-clay)}
.portfolio-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 22px}
.portfolio-card-grid .portfolio-card:first-child{grid-column:span 2}
.portfolio-card,.portfolio-feature-card{display:block;text-decoration:none;color:inherit;min-width:0}
.portfolio-media{display:block;position:relative;overflow:hidden;background:#d8d1c8;border-top:3px solid var(--terracotta);aspect-ratio:4/3}
.portfolio-card-grid .portfolio-card:first-child .portfolio-media{aspect-ratio:16/9}
.portfolio-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.portfolio-media-fallback{display:none;position:absolute;inset:0;align-items:center;justify-content:center;text-align:center;color:#5a4b42;padding:30px;font-size:.88rem;line-height:1.5}
.portfolio-media.is-missing img{display:none}.portfolio-media.is-missing .portfolio-media-fallback{display:flex}
.portfolio-card:hover .portfolio-media img,.portfolio-feature-card:hover .portfolio-media img{transform:scale(1.035)}
.portfolio-card:focus-visible,.portfolio-feature-card:focus-visible{outline:2px solid var(--terracotta);outline-offset:5px}
.portfolio-card-info{display:flex;justify-content:space-between;align-items:baseline;gap:15px;padding-top:14px}
.portfolio-card-heading{font-family:var(--display);font-size:clamp(1.12rem,1.8vw,1.45rem);font-weight:700;color:var(--charcoal)}
.portfolio-card-location{white-space:nowrap;color:var(--muted-clay);font-size:.82rem}
.portfolio-featured{background:var(--warm-stone)}
.portfolio-featured-heading{display:flex;align-items:end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:34px}
.portfolio-featured-heading h2{font-size:clamp(1.9rem,3vw,2.5rem);margin:0 0 12px}
.portfolio-featured-heading p{color:var(--muted-clay);font-size:1.02rem;max-width:56ch;margin:0}
.portfolio-feature-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:26px 23px}
/* Let the lead photo fill both grid tracks instead of constraining it to a
   4:3 crop. Equal caption heights put the photo's lower edge on the same
   baseline as the bottom right photo across desktop widths. */
.portfolio-feature-card{display:flex;flex-direction:column;min-width:0;min-height:0}
.portfolio-feature-lead{grid-row:span 2}
.portfolio-feature-lead .portfolio-media{aspect-ratio:auto;flex:1 1 0;min-height:0}
.portfolio-feature-card:not(.portfolio-feature-lead) .portfolio-media{aspect-ratio:16/8;flex:none}
.portfolio-feature-card .portfolio-card-info{display:block;flex:0 0 84px;min-height:84px;box-sizing:border-box}
.portfolio-feature-card .portfolio-card-heading{display:block}
.portfolio-feature-card .portfolio-card-location{display:block;margin-top:3px}
.project-hero{background:var(--warm-stone);padding:clamp(60px,7vw,92px) 0 45px}
.project-hero-inner{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:45px;align-items:end}
.project-hero h1{font-size:clamp(2.3rem,4vw,3.8rem)}
.project-hero-meta{font-family:var(--sans);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--terracotta);margin:15px 0 0}
.project-hero-image{padding:0;background:var(--warm-stone)}
.project-hero-image .portfolio-media{aspect-ratio:16/8;max-height:650px;border-top:3px solid var(--terracotta)}
.project-hero-image img{object-position:center}
.project-photo-section{background:var(--warm-stone);padding:clamp(55px,7vw,86px) 0}
.project-photo-heading{display:flex;gap:24px;align-items:baseline;justify-content:space-between;margin:0 0 30px}
.project-photo-heading h2{font-size:clamp(1.7rem,2.5vw,2.2rem)}
.project-photo-heading p{font-size:.88rem;color:var(--muted-clay);margin:0}
.project-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.project-photos figure{margin:0}
.project-photos figure a{display:block;background:#d8d1c8;overflow:hidden;aspect-ratio:4/3}
.project-photos figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.project-photos figure a:hover img{transform:scale(1.03)}
.project-photos figcaption{font-size:.79rem;color:var(--muted-clay);margin-top:9px}
.project-next{padding:60px 0;background:var(--charcoal)}
.project-next .shell{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.project-next h2{color:var(--white);font-size:clamp(1.5rem,2.8vw,2rem)}
.portfolio-footer{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.portfolio-footer a{color:var(--warm-stone);text-underline-offset:4px}
@media(max-width:900px){.portfolio-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-feature-grid{gap:25px}.portfolio-card-info{display:block}.portfolio-card-location{display:block;margin-top:4px}.portfolio-hero .shell,.project-hero-inner{grid-template-columns:1fr;gap:24px}}
@media(max-width:620px){.portfolio-card-grid{grid-template-columns:1fr}.portfolio-card-grid .portfolio-card:first-child{grid-column:span 1}.portfolio-feature-grid{display:block}.portfolio-feature-card{margin-bottom:30px}.portfolio-feature-card .portfolio-media,.portfolio-feature-lead .portfolio-media,.portfolio-feature-card:not(.portfolio-feature-lead) .portfolio-media{aspect-ratio:4/3}.portfolio-feature-card .portfolio-card-info{flex:0 0 auto;min-height:0}.portfolio-feature-lead .portfolio-media{flex:0 0 auto}.portfolio-card-info{display:block}.project-hero-image .portfolio-media{aspect-ratio:4/3}.project-photos{grid-template-columns:1fr}.project-photo-heading{display:block}.project-photo-heading p{margin-top:9px}}
@media(prefers-reduced-motion:reduce){.portfolio-media img,.project-photos figure img{transition:none}}


/* Editorial gallery presentation, scoped to individual project case-study pages. */
.project-hero{padding-bottom:clamp(28px,4vw,58px)}
.project-hero .project-hero-inner{align-items:end}
.project-hero-inner p{max-width:47ch;font-size:1.06rem;line-height:1.7}
.project-hero-image .shell{position:relative}
.project-hero-image .project-cover-link{
  display:block;
  cursor:zoom-in;
  overflow:hidden;
  aspect-ratio:16/8;
  max-height:680px;
  background:var(--charcoal);
}
.project-cover-link img{transition:transform .4s ease}
.project-cover-link:hover img{transform:scale(1.015)}
.project-cover-link:focus-visible,.project-photos figure a:focus-visible{
  outline:2px solid var(--terracotta);
  outline-offset:5px;
}
.project-cover-link::after{
  content:"View photograph ↗";
  position:absolute;
  right:16px;
  bottom:16px;
  padding:8px 12px;
  font:500 .82rem var(--sans);
  letter-spacing:.015em;
  color:var(--charcoal);
  background:var(--warm-stone);
  pointer-events:none;
}
.project-photo-section{padding:clamp(60px,8vw,112px) 0;background:var(--warm-stone)}
.project-photo-heading{margin-bottom:32px;padding-bottom:23px;border-bottom:1px solid var(--line);align-items:end}
.project-photo-heading h2{margin:0 0 6px}
.project-photo-heading p{font-size:.98rem;max-width:55ch;line-height:1.5}
.project-photos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.project-photos figure{grid-column:span 4;margin:0;min-width:0}
.project-photos figure:nth-child(5n+1),
.project-photos figure:nth-child(5n+4){grid-column:span 8}
.project-photos figure a{position:relative;aspect-ratio:3/4;cursor:zoom-in;border-top:2px solid var(--terracotta)}
.project-photos figure:nth-child(5n+1) a,
.project-photos figure:nth-child(5n+4) a{aspect-ratio:3/2}
.project-photos figure img{object-fit:cover}
/* Restrained circular expand affordance: two crisp strokes instead of
   a text glyph, so its alignment is consistent across browsers/fonts. */
.project-photos figure a::after{
  content:"";
  position:absolute;
  bottom:15px;
  right:16px;
  width:38px;
  height:38px;
  border:1px solid rgba(43,42,40,.12);
  border-radius:50%;
  background:
    linear-gradient(var(--charcoal),var(--charcoal)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--charcoal),var(--charcoal)) center / 1.5px 14px no-repeat,
    var(--warm-stone);
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  opacity:0;
  transform:translateY(5px);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.project-photos figure a:hover::after,.project-photos figure a:focus-visible::after{
  opacity:1;transform:translateY(0);
}
.project-photos figcaption{
  display:block;
  margin-top:10px;
  color:var(--muted-clay);
  font:.77rem var(--sans);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.js-portfolio .project-photos:not(.is-expanded) figure:nth-child(n+7){display:none}
.project-gallery-controls{margin-top:38px;display:flex;justify-content:center}
.project-gallery-toggle{
  cursor:pointer;background:transparent;border:0;border-bottom:1px solid var(--terracotta);
  padding:9px 2px;
  font:500 .97rem var(--sans);
  color:var(--charcoal);
}
.project-gallery-toggle:hover{color:var(--terracotta)}
.project-gallery-toggle:focus-visible{outline:2px solid var(--terracotta);outline-offset:5px}

/* Native-dialog lightbox: no dependency, focus management and Escape provided
   by showModal(); arrow keys and touch gestures handled in portfolio.js. */
.project-lightbox{
  width:min(1300px,calc(100vw - 32px));
  max-width:none;
  height:min(880px,calc(100dvh - 32px));
  max-height:none;
  padding:0;
  margin:auto;
  border:1px solid rgba(245,241,234,.2);
  border-radius:var(--radius);
  background:var(--charcoal);
  color:var(--warm-stone);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.project-lightbox::backdrop{background:rgba(17,17,17,.90)}
.project-lightbox[open]{display:flex;flex-direction:column}
.project-lightbox-bar{
  display:grid;
  grid-template-columns:minmax(48px,1fr) auto minmax(48px,1fr);
  align-items:center;
  min-height:66px;padding:12px clamp(17px,2.5vw,28px);
  border-bottom:1px solid var(--line-on-dark);
}
.project-lightbox-counter{
  grid-column:2;
  justify-self:center;
  font:500 .98rem var(--sans);
  letter-spacing:.055em;
  white-space:nowrap;
}
.project-lightbox-close{grid-column:3;justify-self:end}
.project-lightbox-close,.project-lightbox-arrow{
  display:grid;place-items:center;flex:none;cursor:pointer;
  color:var(--warm-stone);background:transparent;border:1px solid rgba(245,241,234,.3);
  min-width:44px;min-height:44px;
  font:400 1.6rem var(--sans);
}
.project-lightbox-close:hover,.project-lightbox-arrow:hover{border-color:var(--terracotta);background:rgba(245,241,234,.08)}
.project-lightbox-close:focus-visible,.project-lightbox-arrow:focus-visible{
  outline:2px solid var(--terracotta);outline-offset:3px;
}
.project-lightbox-view{
  display:grid;grid-template-columns:64px minmax(0,1fr) 64px;
  gap:clamp(8px,2vw,22px);align-items:center;
  min-height:0;flex:1;padding:12px clamp(13px,2vw,26px);
}
.project-lightbox-figure{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;height:100%;margin:0;gap:12px}
.project-lightbox-photo{width:100%;height:100%;max-height:calc(100dvh - 206px);min-height:0;object-fit:contain}
.project-lightbox-caption{font:.87rem var(--sans);text-align:center;color:rgba(245,241,234,.75)}
.project-lightbox-note{border-top:1px solid var(--line-on-dark);padding:12px 24px;text-align:center;color:rgba(245,241,234,.65);font:.76rem var(--sans);letter-spacing:.04em}
@media(max-width:900px){
  .project-photos figure{grid-column:span 6}
  .project-photos figure:nth-child(5n+1),.project-photos figure:nth-child(5n+4){grid-column:span 6}
  .project-photos figure a,.project-photos figure:nth-child(5n+1) a,.project-photos figure:nth-child(5n+4) a{aspect-ratio:4/3}
}
@media(max-width:620px){
  .project-hero-image .project-cover-link{aspect-ratio:4/3}
  .project-photos{grid-template-columns:1fr;gap:25px}
  .project-photos figure,.project-photos figure:nth-child(5n+1),.project-photos figure:nth-child(5n+4){grid-column:auto}

}
@media(hover:none){
  .project-photos figure a::after{opacity:.9;transform:none}
}

/* Mobile lightbox: image fills the usable width. Navigation floats above it
   instead of reserving two full columns, while native pinch zoom remains on. */
@media (max-width:900px), (hover:none) {
  .project-lightbox{
    width:100vw;
    height:100dvh;
    border:0;
    border-radius:0;
  }
  .project-lightbox-bar{min-height:60px;padding:8px 12px}
  .project-lightbox-view{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    min-height:0;
    padding:8px 0;
  }
  .project-lightbox-figure{
    width:100%;
    min-width:0;
    height:100%;
    gap:0;
  }
  .project-lightbox-photo{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    max-height:calc(100dvh - 84px);
    object-fit:contain;
    touch-action:auto;
  }
  .project-lightbox-caption,
  .project-lightbox-note{display:none}
  .project-lightbox-arrow{
    position:absolute;
    z-index:2;
    top:50%;
    transform:translateY(-50%);
    width:46px;
    height:48px;
    min-width:44px;
    min-height:44px;
    background:rgba(43,42,40,.74);
  }
  .project-lightbox-prev{left:8px}
  .project-lightbox-next{right:8px}
}
@media(prefers-reduced-motion:reduce){
  .project-cover-link img,.project-photos figure a::after{transition:none}
}


/* Projects index: a curated opening for each category, with every link visible. */
.projects-index { background: var(--warm-stone); --portfolio-header-height: 108px; --portfolio-category-height: 70px; }
.projects-index .portfolio-category-nav { position: sticky; top: var(--portfolio-header-height); z-index: 40; margin-bottom: clamp(36px, 5vw, 60px); background: var(--warm-stone); }
.portfolio-category-links { display: flex; align-items: stretch; gap: clamp(20px, 3.2vw, 44px); overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.portfolio-category-links a { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; min-height: 66px; padding: 10px 0; color: var(--charcoal); font: 500 .96rem var(--sans); text-decoration: none; white-space: nowrap; }
.portfolio-category-links a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--terracotta); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.portfolio-category-links a:hover::after, .portfolio-category-links a[aria-current="location"]::after { transform: scaleX(1); }
.portfolio-category-links .category-count { font-size: .72rem; color: var(--muted-clay); }
.portfolio-category-links a:focus-visible, .projects-index .portfolio-service-link:focus-visible { outline: 2px solid var(--terracotta); outline-offset: -3px; }
.projects-index .portfolio-collection { scroll-margin-top: calc(var(--portfolio-header-height) + var(--portfolio-category-height) + 24px); }
.projects-index .portfolio-collection:focus { outline: none; }
.projects-index .portfolio-collection-heading { align-items: end; padding-bottom: 22px; margin-bottom: 28px; gap: 20px; }
.projects-index .portfolio-collection-heading > div { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.projects-index .portfolio-collection-heading h2 { margin: 0; }
.projects-index .portfolio-collection-count { white-space: nowrap; }
.projects-index .portfolio-service-link { color: var(--ink); font-size: .9rem; line-height: 1.5; text-underline-offset: 5px; text-decoration-color: var(--muted-clay); }
.projects-index .portfolio-service-link:hover { text-decoration-color: var(--terracotta); }
.projects-index .portfolio-remaining-grid { margin-top: 38px; }
.projects-index .portfolio-card-grid .portfolio-card:first-child { grid-column: auto; }
.projects-index .portfolio-card-grid .portfolio-card .portfolio-media { aspect-ratio: 4 / 3; }
.projects-index .portfolio-pair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.projects-index .portfolio-pair-grid .portfolio-card .portfolio-media { aspect-ratio: 16 / 10; }
.projects-index .portfolio-card-grid .portfolio-card-info { display: block; }
.projects-index .portfolio-card-grid .portfolio-card-location { display: block; margin-top: 4px; }
@media (max-width: 720px) {
  .projects-index .portfolio-collection-heading { align-items: start; flex-direction: column; gap: 12px; }
  .projects-index .portfolio-collection-heading > div { gap: 12px; }
  .portfolio-category-links { gap: 24px; }
  .portfolio-category-links a { min-height: 58px; }
}
@media (max-width: 620px) {
  .projects-index .portfolio-pair-grid { grid-template-columns: 1fr; }
  .projects-index .portfolio-card-grid .portfolio-card .portfolio-media { aspect-ratio: 4 / 3; }
  .projects-index .portfolio-remaining-grid { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-category-links a::after { transition: none; }
}

.portfolio-category-links::-webkit-scrollbar { display: none; }

/* Give each following project category a quiet visual boundary. */
.projects-index .portfolio-collection + .portfolio-collection > .shell::before {
  content: '';
  display: block;
  border-top: 1px solid var(--terracotta);
  margin-bottom: clamp(36px, 5vw, 64px);
}