/* Project showcase: shared CDE layouts, scoped to the new sections. */
:root { --ntd-project-ink: #243235; --ntd-project-muted: #536461; --ntd-project-paper: #fafaf8; --ntd-project-sage: #a7ba9d; }
.ntd-project-page .cde-flex-content,
.ntd-project-showcase { color: var(--ntd-project-ink); background: var(--ntd-project-paper); }
:is(.ntd-project-page :where(.cde-flex-content), .ntd-project-showcase) .container { width: min(120rem, calc(100% - 6.4rem)); max-width: 120rem; }
:is(.ntd-project-header, .ntd-project-film, .ntd-project-showcase, .ntd-gallery-section).flex-elm { margin: 0; }
:is(.ntd-project-page :where(.cde-flex-content), .ntd-project-showcase) h2 { font-size: clamp(3rem, 3.05vw, 4.4rem); line-height: 1.2; text-wrap: balance; }
:is(.ntd-project-page :where(.cde-flex-content), .ntd-project-showcase) h3 { font-size: clamp(2.5rem, 2.5vw, 3.6rem); line-height: 1.2; }
:is(.ntd-project-page :where(.cde-flex-content), .ntd-project-showcase) p { line-height: 1.6; }
:is(.ntd-project-page, .ntd-project-showcase) .button { background: var(--ntd-project-sage); color: #20332e; border-color: var(--ntd-project-sage); min-height: 5rem; padding: 1.4rem 2.4rem; font-size: 1.6rem; }
:is(.ntd-project-page, .ntd-project-showcase) .button:hover { background: #c7d5bd; border-color: #c7d5bd; color: #20332e; }
:is(.ntd-project-page, .ntd-project-showcase, .ntd-nav) :is(a, button, summary):focus-visible { outline: .3rem solid currentColor; outline-offset: .5rem; }
.ntd-project-title { padding-block: 4.8rem 4rem; }
.ntd-project-back { display: inline-flex; gap: .8rem; align-items: center; min-height: 4.4rem; color: var(--ntd-project-muted); font-size: 1.6rem; }
.ntd-project-title h1 { margin: 1.2rem 0 1.8rem; font-size: clamp(4.2rem, 4.45vw, 6.4rem); line-height: 1.15; }
.ntd-project-title p { margin: 0; font-size: clamp(2.2rem, 2vw, 2.6rem); color: var(--ntd-project-muted); }
.ntd-project-lead { display: block; width: 100%; height: clamp(36rem, 45.14vw, 65rem); object-fit: cover; }
.ntd-project-intro { padding-block: 7.6rem; }
.ntd-project-intro .inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(4rem, 7vw, 10rem); }
.ntd-project-intro h2 { margin: 0; max-width: 40rem; }
.ntd-project-intro .right-col { color: var(--ntd-project-muted); font-size: 2rem; max-width: 65ch; }
.ntd-project-film { padding-block: 7.2rem; background: var(--cde-stone); }
.ntd-film-layout { display: grid; grid-template-columns: 31.5rem minmax(0, 51rem); justify-content: center; align-items: center; gap: clamp(5rem, 8.3vw, 12rem); }
.ntd-film-player { position: relative; width: 100%; max-width: 35.8rem; }
.ntd-film-player video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; background: #182b29; }
.ntd-film-play { position: absolute; bottom: 2rem; left: 2rem; right: 2rem; width: calc(100% - 4rem); }
.ntd-film-status { padding: 1.4rem; background: var(--ntd-project-paper); color: var(--ntd-project-ink); font-size: 1.6rem; }
.ntd-film-retry { margin-top: 1rem; }
.ntd-film-copy h2 { max-width: 40rem; margin: 0 0 2.4rem; }
.ntd-film-copy > p:not(.ntd-eyebrow) { max-width: 50ch; color: var(--ntd-project-muted); font-size: 2rem; }
.ntd-eyebrow { text-transform: uppercase; letter-spacing: .2rem; font-size: 1.4rem; color: var(--ntd-project-muted); margin: 0 0 2.4rem; }
.ntd-gallery-section { padding-block: 8rem; }
.ntd-gallery-section h2 { margin: 0 0 3rem; }
.ntd-gallery-images { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2.4rem; }
.ntd-gallery-images figure { grid-column: span 3; margin: 0; }
.ntd-gallery-images figure:first-child { grid-column: span 4; }
.ntd-gallery-images figure:nth-child(2) { grid-column: span 2; }
.ntd-gallery-images a { display: block; height: 100%; }
.ntd-gallery-images img { display: block; width: 100%; height: 40rem; object-fit: cover; }
.ntd-gallery-images figure:nth-child(-n+2) img { height: 47rem; }
.ntd-project-cta { background: var(--cde-racing-green); text-align: center; }
.ntd-project-cta .wrapper { padding-block: 7.2rem; }
.ntd-project-cta .inner { max-width: 80rem; margin-inline: auto; }
.ntd-project-cta :is(h2,p) { color: #fff; }
.ntd-project-cta h2 { margin: 0 0 2.2rem; }
.ntd-project-cta p { margin: 0 0 2.2rem; }
.ntd-project-next { padding-block: 5.6rem; }
.ntd-project-next .inner { display: flex; gap: 3.2rem; align-items: center; }
.ntd-project-next img { width: 25rem; height: 16rem; object-fit: cover; display: block; }
.ntd-project-next h2 { font-size: 2.8rem; margin: .6rem 0 0; }
.ntd-project-next a { color: var(--ntd-project-ink); }
.ntd-project-next p { margin: 0; }
.ntd-project-showcase { padding-block: 8rem; }
.ntd-project-showcase h2 { margin: 0 0 2.4rem; }
.ntd-showcase-intro { color: var(--ntd-project-muted); font-size: 2.1rem; margin-bottom: 3.2rem; }
.ntd-project-previews { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.4rem; }
.ntd-project-showcase .ntd-project-preview { margin: 0; padding: 0; border: 0; }
.ntd-project-featured .button { display: inline-flex; align-items: center; gap: 1rem; }
.ntd-project-featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); }
.ntd-project-preview-image { display: block; overflow: hidden; }
.ntd-project-preview-image img { display: block; width: 100%; height: 33rem; object-fit: cover; transition: transform 200ms ease-out; }
.ntd-project-featured .ntd-project-preview-image img { height: 48rem; }
.ntd-project-featured .ntd-project-preview-copy { background: var(--cde-racing-green); color: #fff; padding: 4rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.ntd-project-preview-copy h3 { margin: 1.6rem 0; }
.ntd-project-preview-copy p { margin: 0 0 1.6rem; }
.ntd-project-featured h3 { margin: 0 0 2.2rem; color: #fff; }
.ntd-project-featured p { margin-bottom: 2.2rem; font-size: 2rem; }
.ntd-project-link { color: var(--ntd-project-ink); display: inline-flex; align-items: center; gap: 1rem; min-height: 4.4rem; }
.ntd-project-showcase .ntd-project-link,
.ntd-project-page .ntd-project-back,
.ntd-project-page .ntd-project-next h2 a { text-decoration: none; text-underline-offset: .4rem; }
.ntd-project-showcase .ntd-project-link:hover .ntd-link-label,
.ntd-project-page .ntd-project-back:hover .ntd-link-label,
.ntd-project-page .ntd-project-next h2 a:hover { text-decoration: underline; }
:is(.ntd-project-link, .ntd-project-back, .ntd-project-next h2 a) > [aria-hidden="true"] { display: inline-block; text-decoration: none; }
.ntd-project-preview-image:hover img { transform: scale(1.02); }
.ntd-nav { gap: clamp(2rem, 3vw, 4rem); }
.ntd-nav .scroll-nav__list { gap: clamp(1.2rem, 2vw, 2.8rem); }
.ntd-nav li a { display: inline-flex; align-items: center; min-height: 4.4rem; white-space: nowrap; }
.ntd-nav .nt-phone-icon { min-width: 4.4rem; min-height: 4.4rem; justify-content: center; }
.ntd-mobile-navigation { display: none; }
.ntd-lightbox { border: 0; padding: 6.4rem 1.6rem 1.6rem; max-width: 96vw; max-height: 96dvh; width: fit-content; color: #fff; background: #182b29; }
.ntd-lightbox::backdrop { background: #000c; }
.ntd-lightbox img { display: block; max-width: 90vw; max-height: 72dvh; object-fit: contain; }
.ntd-lightbox .ntd-lightbox-close { position: absolute; top: 1rem; right: 1rem; }
.ntd-lightbox-controls { display: flex; justify-content: space-between; align-items: center; gap: 1.6rem; margin-top: 1.6rem; }
.ntd-lightbox button { min-height: 4.4rem; min-width: 4.4rem; margin: 0; background: var(--ntd-project-sage); color: #20332e; }
.ntd-lightbox button:focus-visible { outline: .3rem solid white; outline-offset: .3rem; }
.ntd-film-player [hidden] { display: none; }
@media(max-width:1100px) {
    .ntd-mobile-navigation { display: block; }
    .ntd-mobile-navigation summary { cursor: pointer; min-height: 4.8rem; margin: 0; display: flex; align-items: center; }
    .ntd-mobile-navigation summary::marker { content: ''; }
    .ntd-mobile-navigation summary::-webkit-details-marker { display: none; }
    .ntd-mobile-navigation nav { position: absolute; top: 100%; left: 0; width: 100%; padding: 1.6rem 3.2rem; background: var(--cde-racing-green); box-shadow: 0 .4rem .5rem #0002; }
    .ntd-mobile-navigation ul { margin: 0; padding: 0; list-style: none; }
    .ntd-mobile-navigation li a { display: flex; min-height: 4.8rem; }
    .site-header .ntd-nav .ntd-header-enquiry { display: none; }
    .site-header__layout--left { grid-template-columns: minmax(0,1fr) auto; gap: 1.6rem; }
    .ntd-nav { gap: 1.2rem; }
}
@media(max-width:760px) {
    :is(.ntd-project-page :where(.cde-flex-content), .ntd-project-showcase) .container { width: calc(100% - 3.2rem); }
    .ntd-project-title { padding-block: 3.2rem; }
    .ntd-project-lead { height: 31rem; }
    .ntd-project-intro { padding-block: 4rem; }
    .ntd-project-intro .inner { grid-template-columns: 1fr; gap: 2rem; }
    .ntd-project-intro .right-col { font-size: 1.8rem; }
    .ntd-project-film { padding-block: 4rem; }
    .ntd-film-layout { grid-template-columns: 1fr; gap: 2.8rem; }
    .ntd-film-copy { grid-row: 1; }
    .ntd-film-player { justify-self: center; width: min(100%,31.5rem); }
    .ntd-film-copy > p:not(.ntd-eyebrow) { font-size: 1.8rem; }
    .ntd-gallery-section { padding-block: 4rem; }
    .ntd-gallery-images { grid-template-columns: 1fr; gap: 1.6rem; }
    .ntd-gallery-images figure:nth-child(n) { grid-column: auto; }
    .ntd-gallery-images figure:nth-child(n) img { height: 30rem; }
    .ntd-project-cta .wrapper { padding-block: 4.8rem; }
    .ntd-project-next { padding-block: 4rem; }
    .ntd-project-next .inner { flex-direction: column; align-items: stretch; gap: 2rem; }
    .ntd-project-next img { width: 100%; height: 22rem; }
    .ntd-project-showcase { padding-block: 4rem; }
    .ntd-project-previews, .ntd-project-featured { grid-template-columns: 1fr; }
    .ntd-project-preview-image img { height: 24rem; }
    .ntd-project-featured .ntd-project-preview-image img { height: 27rem; }
    .ntd-project-featured .ntd-project-preview-copy { padding: 2.8rem; }
    .ntd-showcase-intro { font-size: 1.8rem; }
}
#about, #what-we-do, #our-work, #process, #why-choose { scroll-margin-top: 17rem; }
@media(max-width:760px) {
    #about, #what-we-do, #our-work, #process, #why-choose { scroll-margin-top: 12rem; }
}
@media(prefers-reduced-motion:reduce) {
    .ntd-project-preview-image img { transition: none; }
    .ntd-project-preview-image:hover img { transform: none; }
}