/*
 * Client projects: single project, archive and the [cng_projects] grid.
 * Every colour, font and radius comes from cng-tokens.css.
 */

.cng-project,
.cng-projects{
  --pj-gap:clamp(1rem,.6rem + 1.2vw,1.5rem);
  --pj-section:clamp(4rem,2.75rem + 4vw,7rem);
  --pj-ease:cubic-bezier(.16,1,.3,1);
  color:var(--cng-text-body);
  font-family:var(--cng-font-body);
}
/* The site body is dark: the project templates set their own light page */
.cng-project{background:var(--cng-surface-page)}
.cng-project *,.cng-projects *{box-sizing:border-box}
.cng-project :is(h1,h2,h3),.cng-projects :is(h1,h2,h3){margin:0;color:var(--cng-text-primary);font-family:var(--cng-font-heading);letter-spacing:-.02em;text-wrap:balance}
.cng-project p,.cng-projects p{margin:0}
.cng-project ul[role="list"],.cng-projects ul[role="list"]{margin:0;padding:0;list-style:none}
.cng-project img,.cng-projects img{display:block;max-width:100%;height:auto}

.cng-project__wrap{width:100%;max-width:var(--cng-container);margin-inline:auto;padding-inline:var(--cng-gutter)}
.cng-project__section{padding-block:var(--pj-section)}
.cng-project__section + .cng-project__section{padding-top:0}
.cng-project__head{display:grid;gap:.75rem;max-width:60rem;margin-bottom:clamp(1.75rem,1.25rem + 1.5vw,2.75rem)}
.cng-project__head h2,.cng-project__copy h2{font-size:var(--cng-text-h2);line-height:1.12}
.cng-project__head p{color:var(--cng-text-secondary);font-size:var(--cng-text-body-l)}
.cng-project__actions{display:flex;flex-wrap:wrap;gap:.75rem}
.cng-project__link{display:inline-flex;align-items:center;gap:.4rem;color:var(--cng-action-primary);font-weight:600;text-decoration:none}
.cng-project__link:hover{color:var(--cng-action-primary-hover)}

/* Hero */
.cng-project__hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:min(88svh,52rem);padding:clamp(8rem,6rem + 6vw,11rem) 0 clamp(2.5rem,2rem + 2vw,4rem);background:var(--cng-surface-dark);color:var(--cng-text-inverse)}
.cng-project__hero--index{min-height:min(72svh,44rem)}
.cng-project__hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.cng-project__hero-media img{width:100%;height:100%;object-fit:cover;animation:cng-project-drift 24s ease-in-out infinite alternate}
.cng-project__hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#15151599 0%,#15151533 35%,#151515d9 100%)}
.cng-project__hero-body{display:grid;gap:1.25rem}
.cng-project__hero .cng-eyebrow,.cng-project__crumbs{color:var(--cng-text-inverse-secondary)}
.cng-project__hero .cng-eyebrow a{color:inherit;text-decoration:none}
.cng-project__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--cng-text-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.cng-project__crumbs a{color:inherit;text-decoration:none}
.cng-project__crumbs a:hover{color:var(--cng-text-inverse)}
.cng-project__title{max-width:22ch;color:var(--cng-text-inverse)!important;font-size:var(--cng-text-display);line-height:1.04}
.cng-project__lede{max-width:44rem;color:var(--cng-text-inverse-secondary);font-size:var(--cng-text-body-l);line-height:1.6}
.cng-project__facts{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;margin:0;padding-top:1.25rem;border-top:1px solid var(--cng-border-dark)}
.cng-project__facts div{display:grid;gap:.25rem}
.cng-project__facts dt{display:flex;align-items:center;gap:.4rem;color:var(--cng-text-inverse-secondary);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.cng-project__facts dd{margin:0;color:var(--cng-text-inverse);font-size:1.0625rem;font-weight:600}
@keyframes cng-project-drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.5%,-1%,0)}}

/* Overview */
.cng-project__split{display:grid;gap:clamp(2rem,1.5rem + 2vw,4rem)}
.cng-project__copy{display:grid;gap:1rem;align-content:start;max-width:46rem}
.cng-project__copy :is(p,li){font-size:var(--cng-text-body-l);line-height:1.7}
.cng-project__copy .cng-eyebrow{margin-bottom:-.25rem}
.cng-project__services{align-self:start;padding:clamp(1.5rem,1.25rem + 1vw,2.25rem);border-radius:var(--cng-radius-card);background:var(--cng-surface-subtle)}
.cng-project__services h3{margin-bottom:1rem;font-size:var(--cng-text-h3)}
.cng-project__services li{display:flex;gap:.65rem;padding:.7rem 0;border-top:1px solid var(--cng-border-subtle);color:var(--cng-text-primary);font-weight:500}
.cng-project__services li:first-child{border-top:0;padding-top:0}
.cng-project__services .lucide{margin-top:.15em;color:var(--cng-action-primary)}
@media (min-width:960px){.cng-project__split{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}

/* Gallery */
.cng-project__gallery{columns:1;column-gap:var(--pj-gap)}
.cng-project__gallery li{break-inside:avoid;margin-bottom:var(--pj-gap)}
.cng-project button.cng-project__photo,.cng-project button.cng-project__photo:hover,.cng-project button.cng-project__photo:focus{display:block;width:100%;margin:0;padding:0;border:0;box-shadow:none;color:inherit;border-radius:var(--cng-radius-card);overflow:hidden;background:var(--cng-surface-subtle);cursor:zoom-in}
.cng-project__photo img{width:100%;transition:transform 600ms var(--pj-ease)}
.cng-project__photo:hover img{transform:scale(1.04)}
.cng-project__photo:focus-visible{outline:3px solid var(--cng-action-primary);outline-offset:3px}
.cng-project__gallery li[hidden]{display:none}
.cng-project__more{display:flex;justify-content:center;margin-top:1rem!important}
@media (min-width:720px){.cng-project__gallery{columns:2}}


/* Lightbox */
.cng-lightbox{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:#0d0d0df2;color:var(--cng-text-inverse);font-family:var(--cng-font-body)}
.cng-lightbox::backdrop{background:#0d0d0df2}
.cng-lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.cng-lightbox__bar{display:flex;align-items:center;justify-content:space-between;padding:1rem var(--cng-gutter)}
.cng-lightbox__count{margin:0;color:var(--cng-text-inverse-secondary);font-size:var(--cng-text-small);font-weight:600;letter-spacing:.06em}
.cng-lightbox__stage{display:grid;place-items:center;min-height:0;margin:0;padding:0 clamp(1rem,5vw,5.5rem) clamp(5rem,4rem + 2vw,6rem);touch-action:pan-y}
@media (min-width:720px){.cng-lightbox__stage{padding-bottom:1.5rem}.cng-lightbox__stage img{max-height:calc(100dvh - 6.5rem)}}
.cng-lightbox__stage img{width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 11rem);object-fit:contain;border-radius:var(--cng-radius-control);transition:opacity 200ms ease}
.cng-lightbox__stage img.is-loading{opacity:.2}
.cng-lightbox button.cng-lightbox__btn{display:grid;place-items:center;width:3rem;height:3rem;padding:0;border:1px solid var(--cng-border-dark);border-radius:50%;background:#ffffff14;color:var(--cng-text-inverse);cursor:pointer;transition:background-color 200ms ease}
.cng-lightbox button.cng-lightbox__btn:hover,.cng-lightbox button.cng-lightbox__btn:focus{color:var(--cng-text-inverse);border-color:var(--cng-border-dark);background:#ffffff2e}
.cng-lightbox__btn .lucide{width:1.4rem;height:1.4rem}
.cng-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%)}
.cng-lightbox__nav--prev{left:1rem}
.cng-lightbox__nav--next{right:1rem}
@media (max-width:719px){.cng-lightbox__nav{top:auto;bottom:1rem;transform:none}}

/* Pager */
.cng-project__pager{background:var(--cng-surface-subtle);padding-top:var(--pj-section)!important}
.cng-project__pager-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.cng-project__pager-head p{color:var(--cng-text-secondary);font-size:var(--cng-text-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.cng-project__pager-grid{display:grid;gap:var(--pj-gap)}
.cng-project__step{display:grid;grid-template-columns:7.5rem 1fr;align-items:center;gap:1.25rem;padding:.75rem;border:1px solid var(--cng-border-subtle);border-radius:var(--cng-radius-card);background:var(--cng-surface-page);color:inherit;text-decoration:none;transition:border-color 200ms ease,box-shadow 200ms ease}
.cng-project__step:hover{border-color:var(--cng-text-primary);box-shadow:var(--cng-shadow-md)}
.cng-project__step-media{display:block;aspect-ratio:4/3;border-radius:var(--cng-radius-control);overflow:hidden;background:var(--cng-surface-subtle)}
.cng-project__step-media img{width:100%;height:100%;object-fit:cover}
.cng-project__step-text{display:grid;gap:.25rem;min-width:0}
.cng-project__step-text small{display:flex;align-items:center;gap:.35rem;color:var(--cng-action-primary);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cng-project__step-text strong{color:var(--cng-text-primary);font-family:var(--cng-font-heading);font-size:1.0625rem;line-height:1.3}
.cng-project__step-text span{color:var(--cng-text-secondary);font-size:var(--cng-text-small)}
@media (min-width:720px){
  .cng-project__pager-grid{grid-template-columns:1fr 1fr}
  .cng-project__step{grid-template-columns:9.5rem 1fr}
  .cng-project__step--next{grid-template-columns:1fr 9.5rem;text-align:right}
  .cng-project__step--next .cng-project__step-media{order:2}
  .cng-project__step--next small{justify-content:flex-end;flex-direction:row-reverse}
}

/* Related */
.cng-project__related{padding-top:var(--pj-section)!important}

/* CTA */
.cng-project__cta{padding-block:clamp(4rem,3rem + 3vw,6rem);background:var(--cng-surface-dark);color:var(--cng-text-inverse-secondary)}
.cng-project__cta-body{display:grid;gap:1.75rem}
.cng-project__cta h2{color:var(--cng-text-inverse);font-size:var(--cng-text-h2);line-height:1.12}
.cng-project__cta p{margin-top:.75rem;font-size:var(--cng-text-body-l)}
.cng-project__phone{display:flex;align-items:center;gap:.5rem;margin:0!important;font-size:1rem!important}
.cng-project__phone a{color:var(--cng-text-inverse);font-weight:600}
@media (min-width:960px){
  .cng-project__cta-body{grid-template-columns:1fr auto;align-items:center}
  .cng-project__phone{grid-column:1 / -1}
}

/* Grid and filter ([cng_projects], archive, related) */
.cng-projects{display:grid;gap:clamp(1.5rem,1.25rem + 1vw,2.25rem)}
.cng-projects .cng-projects__filters{display:flex;flex-wrap:wrap;gap:.5rem}
.cng-projects .cng-projects__filters button{margin:0;box-shadow:none;text-transform:none;letter-spacing:normal;display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 1.1rem;border:1px solid var(--cng-border-subtle);border-radius:var(--cng-radius-control);background:var(--cng-surface-page);color:var(--cng-text-primary);font:600 .9375rem/1 var(--cng-font-body);cursor:pointer;transition:background-color 200ms ease,border-color 200ms ease,color 200ms ease}
.cng-projects .cng-projects__filters button:hover,.cng-projects .cng-projects__filters button:focus{background:var(--cng-surface-page);color:var(--cng-text-primary);border-color:var(--cng-text-primary)}
.cng-projects .cng-projects__filters button[aria-pressed="true"]{border-color:var(--cng-surface-dark);background:var(--cng-surface-dark);color:var(--cng-text-inverse)}
.cng-projects .cng-projects__filters small{color:inherit;font-size:.8125rem;opacity:.6}
.cng-projects .cng-projects__grid{display:grid;gap:var(--pj-gap,1.5rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.cng-projects .cng-projects__item[hidden]{display:none}
.cng-projects .cng-projects__card{position:relative;display:grid;gap:.4rem;height:100%;padding-bottom:.25rem;color:inherit;text-decoration:none}
.cng-projects .cng-projects__media{position:relative;display:block;aspect-ratio:4/3;margin-bottom:.6rem;border-radius:var(--cng-radius-card);overflow:hidden;background:var(--cng-surface-subtle)}
.cng-projects .cng-projects__media img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;transition:transform 600ms cubic-bezier(.16,1,.3,1)}
.cng-projects .cng-projects__card:hover .cng-projects__media img{transform:scale(1.05)}
.cng-projects .cng-projects__type{color:var(--cng-action-primary);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cng-projects .cng-projects__title{padding-right:2rem;font-size:1.1875rem!important;line-height:1.3}
.cng-projects .cng-projects__meta{color:var(--cng-text-secondary);font-size:var(--cng-text-small)}
.cng-projects .cng-projects__go{position:absolute;right:0;bottom:2.1rem;color:var(--cng-text-primary);transition:transform 250ms cubic-bezier(.16,1,.3,1)}
.cng-projects .cng-projects__card:hover .cng-projects__go{transform:translate(2px,-2px);color:var(--cng-action-primary)}
.cng-projects .cng-projects__card:focus-visible{outline:3px solid var(--cng-action-primary);outline-offset:4px;border-radius:var(--cng-radius-card)}
.cng-projects .cng-projects__status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cng-projects .cng-projects__empty{color:var(--cng-text-secondary)}

/* Reveal on scroll (added by projects.js) */
.cng-reveal{opacity:0;transform:translateY(16px);transition:opacity 600ms ease,transform 600ms cubic-bezier(.16,1,.3,1)}
.cng-reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .cng-project__hero-media img{animation:none}
  .cng-reveal{opacity:1;transform:none;transition:none}
  .cng-project__photo img,.cng-projects__media img{transition:none}
}

/* Pager thumbnails fill their frame */
.cng-project .cng-project__step-media{position:relative}
.cng-project .cng-project__step-media img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover}

/* Contact: invitation and channels on the left, the Contact Form 7 form on the right */
.cng-project__contact{padding-block:var(--pj-section);background:var(--cng-surface-dark);color:var(--cng-text-inverse-secondary)}
.cng-project__contact-grid{display:grid;gap:clamp(2.5rem,2rem + 2vw,4.5rem);align-items:start}
.cng-project__contact-info{display:grid;gap:1.25rem;align-content:start}
.cng-project__contact .cng-eyebrow{margin:0;color:var(--cng-action-primary)}
.cng-project__contact h2{color:var(--cng-text-inverse);font-size:var(--cng-text-h2);line-height:1.1;max-width:18ch}
.cng-project__contact-lede{max-width:34rem;font-size:var(--cng-text-body-l);line-height:1.6}
.cng-project__channels{display:grid;gap:.75rem;margin-top:.5rem!important}
.cng-project__channels a{display:flex;align-items:center;gap:1rem;padding:.9rem 1rem;border:1px solid var(--cng-border-dark);border-radius:var(--cng-radius-card);color:var(--cng-text-inverse);font-weight:600;text-decoration:none;transition:border-color 200ms ease,background-color 200ms ease}
.cng-project__channels a:hover{border-color:#ffffff66;background:#ffffff0d}
.cng-project__channels small{display:block;margin-bottom:.15rem;color:var(--cng-text-inverse-secondary);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.cng-project__channel-icon{display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--cng-action-primary);color:var(--cng-text-inverse)}
.cng-project__channel-icon .lucide{width:1.25rem;height:1.25rem}
.cng-project__hours{display:flex;align-items:center;gap:.5rem;font-size:var(--cng-text-small)}
.cng-project__social{display:flex;flex-wrap:wrap;gap:.5rem}
.cng-project__social a{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--cng-border-dark);border-radius:50%;color:var(--cng-text-inverse);transition:background-color 200ms ease,border-color 200ms ease}
.cng-project__social a:hover{border-color:var(--cng-action-primary);background:var(--cng-action-primary)}
.cng-project__form{padding:clamp(1.5rem,1rem + 2vw,2.5rem);border-radius:var(--cng-radius-card);background:var(--cng-surface-page);color:var(--cng-text-body);box-shadow:var(--cng-shadow-md)}
.cng-project__form > h3{font-size:var(--cng-text-h3);margin-bottom:.35rem}
.cng-project__form > p{margin-bottom:1.5rem!important;color:var(--cng-text-secondary);font-size:var(--cng-text-small)}
@media (min-width:1000px){.cng-project__contact-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}

/* Contact Form 7 fields */
.cng-project__form .cng-pform{display:grid;gap:1.1rem}
.cng-project__form .cng-pform__row{display:grid;gap:1.1rem}
@media (min-width:640px){.cng-project__form .cng-pform__row{grid-template-columns:1fr 1fr}}
.cng-project__form .cng-pform__field{display:grid;gap:.4rem}
.cng-project__form .cng-pform__field label,.cng-project__form .cng-pform__label{margin:0;color:var(--cng-text-primary);font-size:.875rem;font-weight:600}
.cng-project__form .cng-pform__field label small{color:var(--cng-text-secondary);font-weight:400}
.cng-project__form .wpcf7-form-control-wrap{display:block}
.cng-project__form :is(input[type="text"],input[type="email"],input[type="tel"],select,textarea){width:100%;min-height:3rem;margin:0;padding:.75rem .9rem;border:1px solid var(--cng-border-subtle);border-radius:var(--cng-radius-control);background:var(--cng-surface-page);color:var(--cng-text-primary);font:400 1rem/1.4 var(--cng-font-body);box-shadow:none;transition:border-color 200ms ease,box-shadow 200ms ease}
.cng-project__form textarea{min-height:8.5rem;resize:vertical}
.cng-project__form :is(input,select,textarea):focus{outline:none;border-color:var(--cng-text-primary);box-shadow:0 0 0 3px #1515151a}
.cng-project__form .wpcf7-radio{display:flex;flex-wrap:wrap;gap:.5rem}
.cng-project__form .wpcf7-radio .wpcf7-list-item{margin:0}
.cng-project__form .wpcf7-radio label{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 1rem;border:1px solid var(--cng-border-subtle);border-radius:var(--cng-radius-control);color:var(--cng-text-primary);font-size:.9375rem;font-weight:500;cursor:pointer}
.cng-project__form .wpcf7-radio label:has(input:checked){border-color:var(--cng-surface-dark);background:var(--cng-surface-subtle)}
.cng-project__form .wpcf7-radio input{accent-color:var(--cng-action-primary)}
.cng-project__form .cng-pform__submit{display:grid;gap:.75rem;margin-top:.25rem}
.cng-project__form input.wpcf7-submit{width:100%;min-height:3.5rem;margin:0;padding:0 1.5rem;border:0;border-radius:var(--cng-radius-control);background:var(--cng-action-primary);color:var(--cng-text-inverse);font:600 1rem/1 var(--cng-font-body);cursor:pointer;transition:background-color 200ms ease}
.cng-project__form input.wpcf7-submit:hover{background:var(--cng-action-primary-hover)}
.cng-project__form .cng-pform__privacy{margin:0;color:var(--cng-text-secondary);font-size:.8125rem}
.cng-project__form .cng-pform__privacy a{color:inherit}
.cng-project__form .wpcf7-not-valid-tip{margin-top:.35rem;color:var(--cng-action-primary);font-size:.8125rem}
.cng-project__form .wpcf7-response-output{margin:1rem 0 0!important;padding:.85rem 1rem!important;border-radius:var(--cng-radius-control);font-size:.9375rem}
.cng-project__form .wpcf7-spinner{margin:0 auto}