/* ==========================================================================
   NADIA PALACIOS, MAIN
   Order: reset → base → layout utilities → a11y
   Section styles are layered in during the homepage build phase.
   ========================================================================== */
/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
body {
  margin: 0;
  background-color: var(--np-bg);
  color: var(--np-text);
  font-family: var(--np-font-body);
  font-size: var(--np-fs-body);
  line-height: var(--np-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
/* Large all-caps display statements */
.np-statement {
    font-family: var(--np-font-display);
    font-size: var(--np-fs-statement);
    line-height: var(--np-lh-display);
    text-transform: uppercase;
    color: var(--np-text);
    letter-spacing: 0.005em;
    letter-spacing: 0.045em;
    font-weight: 400;
}
/* Small-caps UI label (nav, eyebrows, italic-adjacent micro-labels) */
.np-label {
  font-family: var(--np-font-label);
  font-size: var(--np-fs-15);
  letter-spacing: var(--np-tracking-label);
  text-transform: uppercase;
}
.np-small-label {
    font-size: var(--np-fs-12);
	padding:0;
}
/* Italic serif micro-label ("The Studio", "View Project") */
.np-italic-label {
    font-family: var(--np-font-italic);
    font-style: italic;
    font-size: var(--np-fs-18);
}
header .np-italic-label {
    /*font-size: var(--np-fs-body);*/
    padding: 0;
}
a.np-italic-label {
	position: relative;
	display: inline-block;
}
main a {
    transition: opacity var(--np-dur) var(--np-ease);
}
main a:hover {
    opacity: 0.6!important;
}
/* Decorative parens absolutely positioned: they add ZERO width at rest, so the
label sits flush to its edge (an in-flow "(" and ")" nudged it ~5px even at
opacity 0). They fade in just outside the label on hover. */
/*
.gform-footer.gform_footer.top_label::before,button.np-italic-label::before,a.np-italic-label::before {
	content: "(";
	position: absolute;
	top: 0;
	right: 100%;
	opacity: 0;
	transition: all var(--np-ease) var(--np-dur);
}
.gform-footer.gform_footer.top_label::after,button.np-italic-label::after,a.np-italic-label::after {
	content: ")";
	position: absolute;
	top: 0;
	left: 100%;
	opacity: 0;
	transition: all var(--np-ease) var(--np-dur);
}
.gform-footer.gform_footer.top_label:hover::before,button.np-italic-label:hover::before,a.np-italic-label:hover::before {
	opacity: 1;
	margin-right: 0.5em;
}
.gform-footer.gform_footer.top_label:hover::after,button.np-italic-label:hover::after,a.np-italic-label:hover::after {
	opacity: 1;
	margin-left: 0.5em;
}
*/
button.np-italic-label {
	position: relative;
	padding: 0;
}
/* --------------------------------------------------------------------------
   3. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */
/* Clip wrapper, contains full-bleed sections so they never trigger
   horizontal page scroll. Wraps everything between header + footer. */
.site-clip { overflow-x: clip; }
@supports not (overflow: clip) {
  .site-clip { overflow-x: hidden; }
}
/* Content gutter, side padding + optional max width */
.np-gutter {
  padding-inline: var(--np-gutter);
  max-width: var(--np-maxw);
  margin-inline: auto;
}
/* Vertical section rhythm */
.np-section { padding-block: var(--np-section-y); }
.np-statement-section {
    max-width: 62ch;
	padding-top:7em;
}
.np-statement-section--center {
    margin-inline: auto;
}
.np-press .np-statement--right {
    max-width: 10ch;
}
/* --------------------------------------------------------------------------
   4. ACCESSIBILITY
   -------------------------------------------------------------------------- */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 1rem; left: 1rem;
  width: auto; height: auto;
  clip: auto;
  z-index: var(--np-z-overlay);
  padding: 0.6rem 1rem;
  background: var(--np-ink-deep);
  color: var(--np-text-on-dark);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ==========================================================================
   4b. SMOOTH SCROLL (Lenis) + SCROLL-LOCK + SCROLL REVEALS
   Note (overflow-x): the horizontal clip stays on .site-clip via `overflow-x:
   clip`, NEVER `overflow:hidden` on html/body, hidden would make the element a
   scroll container and break ScrollTrigger start/end + Lenis. Do not add
   overflow to html/body.
   ========================================================================== */
/* Lenis recommended base styles. Lenis adds .lenis / .lenis-smooth to <html>. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
/* Single scroll-lock, toggled by NP.stopScroll()/startScroll().
   Works with or without Lenis (fallback), so it does not require .lenis.
   The preloader gate script in header.php also uses this class, before Lenis
   exists, which is why NP.preloader calls NP.stopScroll() to resync. */
html.lenis-stopped { overflow: hidden; }
/* Pre-animation hidden state for scroll reveals, gated on .js-anim ONLY, so if
   JS never runs (no .js-anim) the text stays fully visible. */
.js-anim .text-reveal {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}
/* Reduced motion: clear the hidden state; NP.textReveal() also skips animating. */
@media (prefers-reduced-motion: reduce) {
  .js-anim .text-reveal {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}
/* Empty-state placeholder (missing images during content entry) */
.np-placeholder {
  background: color-mix(in srgb, var(--np-ink) 8%, var(--np-blush));
}
/* ==========================================================================
   4c. PRELOADER  (first visit only; 1-day cookie)
   Default state is HIDDEN. The inline gate script in header.php adds
   .np-preloading to <html> to reveal it. That direction is not arbitrary: the
   markup now renders on every request (a PHP cookie gate is incompatible with
   page caching, it bakes one visitor's answer into the cached HTML), so a
   panel that defaulted to visible would have nothing to dismiss it if JS
   never ran.
   Scroll is held by the theme's single lock, html.lenis-stopped (section 4b).
   Do not add a second overflow rule on html or body.
   ========================================================================== */
.np-preloader { display: none; }

.np-preloading .np-preloader {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: var(--np-purple);
    color: var(--np-pink);
    clip-path: inset(0 0 0 0);
    transition: clip-path 1s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: clip-path;
}

/* Clip-wipe upward (the bottom edge rises to the top). */
.np-preloading .np-preloader.is-hiding { clip-path: inset(0 0 100% 0); }

.np-preloader__inner {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 1em;
    text-align: center;
}

.np-preloader__mark { width: 41px; }

/* Illustrator SVGs in this project all declare .cls-1 in an internal <style>
   block, and inlining several lets those blocks collide document-wide (see the
   same guard on .np-header). Scope the preloader's fill explicitly. */
.np-preloader .cls-1 { fill: currentColor; }

/* Intro: logo fades in, quote fades up. Revealed by .is-ready, which
   NP.preloader adds on mount. */
.np-preloader__svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 0.8s ease;
}
.np-preloader.is-ready .np-preloader__svg { opacity: 1; }

.np-preloader__quote {
    font-family: var(--np-font-italic);
    font-size: var(--np-fs-24);
    line-height: 1.5;
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease,
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.np-preloader.is-ready .np-preloader__quote {
    opacity: 1;
    transform: none;
}
/* ==========================================================================
   5. HEADER  (fixed, transparent; color adapts per section via .beige-header)
   The header + overlay live OUTSIDE .site-clip so the overflow clip cannot
   clip these fixed elements (playbook section 2).
   ========================================================================== */
.np-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--np-z-header);
  color: var(--np-white);            /* default: white over hero / dark sections */
  background: transparent;
  transition: color var(--np-dur) var(--np-ease),
              background-color var(--np-dur) var(--np-ease);
}
/* Solid blush bar with dark text while over a beige section (main.js toggles
   this), and on non-home views (set server-side in header.php). */
.np-header.beige-header {
  color: var(--np-text);
  background: var(--np-bg);
}
/* Solid olive bar with light text over the featured-project band. */
.np-header.olive-header {
  color: var(--np-text-on-dark);
  background: var(--np-olive);
}
/* Keep content on hero-less views clear of the fixed header. The About and
   Process pages are excluded: their full-bleed intros sit behind the header
   and carry their own top padding. The Project single is excluded too: its
   intro slide carries its own clearance (it must not inflate the pinned
   stage's measured height). */
body:not(.home) .site-main:not(.np-about):not(.np-process):not(.np-proj-page) { padding-top: clamp(6rem, 12vw, 9rem); }
.np-header__scrim {
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  background: var(--np-hero-scrim);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--np-dur) var(--np-ease);
}
/* Scrim only aids hero legibility; drop it once the header has a solid bar. */
.np-header.beige-header .np-header__scrim,
.np-header.olive-header .np-header__scrim { opacity: 0; }
.np-header__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: clamp(1.25rem, 2.5vw, 2.25rem) var(--np-gutter);
    transition: var(--np-ease) var(--np-dur);
}
.np-header__inner {
    padding-top: 12.5px;
    padding-bottom: 12.5px;
}
.np-header__zone--left  { justify-self: start; }
.np-header__zone--right { justify-self: end; }
.np-header__zone--center{ justify-self: center; text-align: center; }
.np-header__contact,
.np-menu-toggle {
  color: inherit;                    /* follow the header color (white / beige) */
  transition: opacity var(--np-dur) var(--np-ease);
}
.np-header__contact:hover,
.np-menu-toggle:hover { opacity: 0.6; }
/* ── Logo: inline SVG, inherits header color via currentColor ─────────── */
.np-logo { display: inline-block; color: inherit; line-height: 1; }
.np-logo__svg { display: block; width: auto; }
.np-logo__mark .np-logo__svg {
    width: 44px;
}   /* icon */
.np-logo__full .np-logo__svg {
    width: 465px;
    height: auto;
}   /* horizontal wordmark */
/* Homepage swap: stack both marks in one grid cell so the header center keeps
   a stable width (cell sizes to the wider full logo) when they cross-fade. */
.np-logo--swap { display: inline-grid; place-items: center; }
.np-logo--swap > span {
  grid-area: 1 / 1;
  transition: opacity var(--np-dur) var(--np-ease);
}
/* Homepage: full horizontal logo at the top, swap to the logomark past 100vh. */
/* Swap keyed off .is-scrolled (100vh): full logo over the hero, logomark from
   100vh onward. One-way past the hero, so it stays the logomark through the
   olive band and press instead of flipping back per section. */
.np-logo--swap .np-logo__full {
    opacity: 1;
    margin: 1em 0;
    transition: all var(--np-dur) var(--np-ease);
}
.np-logo--swap .np-logo__mark { opacity: 0; }
.np-header.is-scrolled .np-logo--swap .np-logo__full {
    opacity: 0;
    margin: 0;
}
.np-header.is-scrolled .np-logo--swap .np-logo__mark { opacity: 1; }
/* Illustrator SVGs all define .cls-1 in an internal <style>; inlining several
   lets those blocks collide document-wide. Scope the fill by context so the
   header logos follow the header color (white / beige) instead of the footer
   icon's color leaking in. */
.np-header .cls-1 { fill: currentColor; }
/* Fallback text lockup (rendered only when no logo SVG is set) */
.np-logo__name {
  display: block;
  font-family: var(--np-font-display);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
}
.np-logo__sub {
  display: block;
  margin-top: 0.35em;
  font-family: var(--np-font-italic);
  font-style: italic;
  font-size: clamp(0.7rem, 0.95vw, 0.95rem);
  letter-spacing: 0.04em;
  opacity: 0.9;
}
/* ==========================================================================
   6. NAV OVERLAY  (stub)
   ========================================================================== */
.np-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--np-z-overlay);
    background: var(--np-purple);
    color: var(--np-text-on-dark);
    color: var(--np-pink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--np-dur) var(--np-ease), visibility 0s linear var(--np-dur);
    height: 100%;
    padding: var(--np-gutter);
}
.np-overlay * {
    fill: currentColor;
}
.np-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--np-dur) var(--np-ease), visibility 0s;
}
button.np-overlay__close {
    position: absolute;
    top: var(--np-gutter);
    right: var(--np-gutter);
    color: inherit;
    padding: 0;
}
button.np-overlay__close::before, button.np-overlay__close::after {
    content: none;
}
.np-overlay__menu {
    text-align: center;
    display: flex;
    flex-direction: column;
}
.np-overlay__menu a {
    font-family: var(--np-font-display);
    text-transform: uppercase;
    letter-spacing: 0.045em;
    font-size: var(--np-fs-statement);
    transition: color var(--np-dur) var(--np-ease);
    line-height: 1.1em;
    /* color: var(--np-pink); */
}
.np-overlay__menu a:hover {
    opacity: 0.6;
    color: white;
    opacity: 1;
}
/* Logomark above the menu + Instagram below it (the overlay is a centered
   flex column, so these stack: mark / menu / Instagram). */
.np-overlay__logo {
    color: inherit;
}
.np-overlay__ig {
    color: inherit;
    transition: color var(--np-ease) var(--np-dur);
}
.np-overlay__ig {
    color: inherit;
    transition: color var(--np-ease) var(--np-dur);
}
.np-overlay * {
    fill: currentColor;
}
a.np-overlay__logo:hover * {
    fill: white;
}
a.np-overlay__logo * {
    transition: fill var(--np-dur) var(--np-ease);
    fill: var(--np-pink);
}
/* ==========================================================================
   7. HERO
   ========================================================================== */
.np-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}
.np-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ==========================================================================
   8. STATEMENT SECTIONS
   ========================================================================== */
.np-statement-section--left   .np-statement { text-align: left; }
.np-statement-section--center .np-statement { text-align: center; }
.np-statement--right { text-align: right; }
/* ==========================================================================
   9. STUDIO INTRO (two-column)
   ========================================================================== */
.np-section.np-studio {
    padding: 0;
}
.np-studio__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
}
.np-disciplines {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: end;
    gap: 2em;
}
.np-studio__col--text {
    max-width: 37ch;
    margin-left: 10%;
}
.np-studio__intro { margin-bottom: 2rem; }
.np-studio__link { display: inline-block; }
/* Disciplines carousel */
.np-disciplines__stage {
    position: relative;
    aspect-ratio: 540 / 720;
    width: 100%;
}
.np-disciplines__img {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.9s var(--np-ease);
}
.np-disciplines__img.is-active { opacity: 1; }
.np-disciplines__img img { width: 100%; height: 100%; object-fit: cover; }
.np-disciplines__labels {
    /* margin-top: 1.25rem; */
    /* text-align: right; */
    font-family: var(--np-font-italic);
    /* font-style: italic; */
    font-size: var(--np-fs-body);
    font-size: var(--np-fs-label);
}
.np-discipline-label {
  color: var(--np-text-muted);
  transition: color var(--np-dur) var(--np-ease), font-weight var(--np-dur) var(--np-ease);
}
.np-discipline-label.is-active {
  color: var(--np-text-strong);
}
/* Reduced motion / no-JS fallback: show first image, all labels legible */
.np-disciplines--static .np-discipline-label { color: var(--np-text); }
/* ==========================================================================
   10. FEATURED PROJECTS (split)
   ========================================================================== */
/* Flush: no vertical margin, so the band butts directly against the beige
   sections. This removes the blush gap that would otherwise leave the header
   un-themed (transparent white on blush) between beige and olive. */
.np-section-flush { margin-block: 0; }
/* Olive band. Backs the split so the header can transition to .olive-header
   over it (photo fills the left 60%, olive panel the right 40%). */
.np-projects { background: var(--np-olive); }
.np-project {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: clamp(480px, 70vh, 820px);
    min-height: 100vh;
}
/* Until the carousel is initialised, only the first slide shows. */
.np-projects:not(.is-carousel) .np-project:not(:first-child) { display: none; }
.np-project__photo { position: relative; overflow: hidden; }
.np-project__photo-img { width: 100%; height: 100%; object-fit: cover; }
.np-project__panel {
    background: var(--np-panel);
    color: var(--np-text-on-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 3em;
    padding: clamp(2rem, 5vw, 5rem);
}
.np-project__eyebrow {
    /* letter-spacing: var(--np-tracking-label); */
    /* opacity: 0.85; */
    /* scale: 4!important; */
    font-family: var(--np-font-display);
    font-size: var(--np-fs-30);
    letter-spacing: 0.045em;
    font-weight: 400;
}
.np-project__detail { width: min(62%, 320px); }
.np-project__detail-img { width: 100%; height: auto; }
.np-project__title {
    font-family: var(--np-font-display);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.4vw, 1.4rem);
    line-height: 1.4;
    /* max-width: 32ch; */
    font-size: var(--np-fs-16);
    letter-spacing: 0.02em;
    font-family: var(--np-font-body);
    margin: 0;
}
.np-project__link { opacity: 0.9; transition: opacity var(--np-dur) var(--np-ease); }
.np-project__link:hover { opacity: 0.6; }
/* ==========================================================================
   11. PRESS
   ========================================================================== */
.np-press__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}
.np-press__logos {
  display: flex;
  /*flex-wrap: wrap;*/
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.np-press__logo {
    /* flex: 1 1 auto; */
    display: flex;
    justify-content: center;
    /* min-width: 120px; */
    max-width: 150px;
    /* max-height: 50px; */
}
.np-press__logo-img {
    /* max-height: 52px; */
    width: auto;
    object-fit: contain;
    /* filter: grayscale(1) contrast(1.05); */
    /* opacity: 0.9; */
    /* transition: opacity var(--np-dur) var(--np-ease); */
    /* max-height: 250px; */
    /* width: 100%; */
}
/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-creds {
    display: flex;
    font-size:var(--np-fs-12);
    font-family: var(--np-font-body);
    gap: 1.5em;
}
.ind-cred:not(:first-child)::before {content: "|";position: absolute;left: -1em;}
.ind-cred {
    position: relative;
}
.np-footer {
    padding-block: var(--np-gutter);
    text-align: center;
    border-top: 1px solid var(--np-ink);
}
.np-footer p {
    margin: 0;
}
.np-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    font-family: var(--np-font-italic);
    color: var(--np-text);
    font-size: var(--np-fs-label);
}
.np-footer__ornament { color: var(--np-text-muted); width: 132px; margin: 0.5rem 0; }
.np-footer__icon { display: block; width: 49px; height: auto; margin: 0 auto; }
.np-footer__icon .cls-1 { fill: #524b3b; }   /* lock moss fill against .cls-1 collision */
.np-footer__icon-link { display: inline-block; transition: opacity var(--np-dur) var(--np-ease); }
.np-footer__icon-link:hover { opacity: 0.65; }
.np-footer__ig a {
    text-decoration: none;
    transition: color var(--np-dur) var(--np-ease);
}
.np-footer__ig a:hover {
    color: var(--np-pink);
    opacity: 1;
}
.np-footer__ig {
    font-family: var(--np-font-campton);
    font-size: var(--np-fs-15);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--np-brown);
}
/* ==========================================================================
   13. RESPONSIVE  (desktop-first → stacked mobile)
   ========================================================================== */
@media (max-width: 900px) {
  .np-studio__grid { grid-template-columns: 1fr; }
  .np-studio__col--text { max-width: none; }
  .np-disciplines__labels { text-align: left; }
  .np-project { grid-template-columns: 1fr; }
	.np-project__photo { min-height: 60vw; }
	.np-press .np-gutter {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 3em;
	}
	.np-press__head {
		flex-direction: column-reverse;
		align-items: flex-end;
		gap: 1.5rem;
		margin-bottom: 0;
		display: flex;
		order: 1;
		justify-content: flex-end;
	}
  .np-statement--right { text-align: left; }
	.np-press__logos {
		justify-content: center;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 3em;
	}
	.np-press__logo {
		max-width: 100px;
	}
}
/* ==========================================================================
   14. ABOUT PAGE
   ========================================================================== */
/* Header themes for the About sections. */
.np-header.purple-header {
    /* color: var(--np-text-on-dark); */
    background: var(--np-purple);
    color: var(--np-pink);
}
.np-header.pink-header   { color: var(--np-purple);        background: var(--np-pink);   }
.np-header.purple-header .np-header__scrim,
.np-header.pink-header   .np-header__scrim { opacity: 0; }
/* Maroon sections: cream text, cream statements (override the default ink). */
.np-about-intro,
.np-about-statement,
.np-about-dist,
.np-about-bio {
  background: var(--np-purple);
  color: var(--np-text-on-dark);
  color: var(--np-pink);
}
.np-about-intro .np-statement,
.np-about-statement .np-statement,
.np-about-dist .np-statement,
.np-about-bio .np-statement { color: var(--np-pink); }
/* ── Section 1: intro + horizontal-scroll hero ── */
.np-about-intro { position: relative; overflow: clip; }
/* Base (no hero, or no JS): normal padded section. */
.np-about-intro__sticky {
  position: relative;
  padding-block: clamp(9rem, 20vh, 15rem) var(--np-section-y);
}
.np-about-intro__inner {
    position: relative;
    z-index: 1;
    margin: 0;
    width: 50%;
}
.np-about-intro__heading { margin-bottom: 2rem; }
.np-about-intro__lead {
    max-width: 62ch;
    padding-left: 25%;
    padding-top: 3em;
}
/* Pinned hero (JS + a hero image): tall section, sticky viewport; NP.aboutHero
   grows the image from the right square to fill left to the gutter as you scroll. */
.js-anim .np-about-intro.has-hero { min-height: 220vh; }
.js-anim .np-about-intro.has-hero .np-about-intro__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding-block: 0;
  display: flex;
  align-items: center;
  overflow: clip;
}
/* Initial (CSS) state: full-height panel on the right half, starting at center.
   NP.aboutHero uses gsap.to() to grow it left to the gutter as the pin scrolls. */
.np-about-intro__media {
    position: absolute;
    top: 100px;
    left: 50%;
    width: calc(50% - var(--np-gutter));
    height: calc(100svh - 100px);
    margin: 0;
    z-index: 2;
    will-change: left, width;
    overflow: hidden;
}
.np-about-intro__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.small-statement {
    font-size: var(--np-fs-55);
}
/* ── Section 2: centered statement ── */
.np-about-statement .np-statement--center { max-width: 34ch; margin-inline: auto; text-align: center; }
/* ── Section 3: distinguished (two-column) ── */
.np-about-dist__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3em;
    align-items: start;
}
.np-about-dist__media {
    aspect-ratio: 503 / 687;
    overflow: hidden;
    height: 50vh;
}
.np-about-dist__text {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.np-about-dist__eyebrow { margin-bottom: 0rem; opacity: 0.8; }
.np-about-dist__heading {
    /* margin-bottom: 2rem; */
    /* font-size: clamp(1.8rem, 3.4vw, 3rem); */
    max-width: 26ch;
}
.np-about-dist__body {
    max-width: 42ch;
    opacity: 0.85;
    display: flex;
    flex: 1;
    align-items: flex-end;
    margin: 0 auto;
}
.np-about-dist__img     { width: 100%; height: auto; }
/* ── Section 4: inside-out scroll-through (rose) ── */
.np-about-inside {
  background: var(--np-pink);
  color: var(--np-purple);
  padding-block: var(--np-section-y);
}
.np-about-inside .np-statement { color: var(--np-purple); }
.np-about-inside__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%;
    padding: 0;
}
.np-about-inside__media {
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
.np-about-inside__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.np-about-inside__text {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3em;
    padding: var(--np-gutter);
}
.np-about-inside__heading {
    max-width: 18ch;
    opacity: 0;
    transform: translateY(40px);
    transition: var(--np-ease) var(--np-dur) all;
}
.np-about-inside__body {
    max-width: 50ch;
    font-size: var(--np-fs-16);
    opacity: 0;
    transform: translateY(40px);
    transition: var(--np-ease) var(--np-dur) all;
}
.is-active .np-about-inside__body,.is-active .np-about-inside__heading {
    opacity: 1;
    transform: translateY(0px);
}
.np-about-inside__dot {
    border: 0.5px solid currentColor;
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 50%;
}
.np-about-inside__dots {
    display: flex;
    color: var(--np-purple);
    gap: 6px;
    position: absolute;
    bottom: 25%;
}
.np-about-inside__dot.is-active {
    background: currentColor;
}
@media (max-width: 980px) {
    .np-about-inside__dots { display: none; }
	.np-about-dist__media {
		width: 100%;
	}
}
/* Reduced motion: the JS bails before it can sync the dots, so hide them
   rather than leave dot 0 permanently lit. */
@media (prefers-reduced-motion: reduce) {
    .np-about-inside__dots { display: none; }
}
/* Scroll-through (JS on): tall section, sticky viewport, panels cross-fade. */
.js-anim .np-about-inside[data-np-scroll-through] {
  min-height: calc(var(--np-items, 1) * 100vh);
  padding-block: 0;
}
.js-anim .np-about-inside__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.js-anim .np-about-inside__panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.js-anim .np-about-inside__panel.is-active { opacity: 1; pointer-events: auto; }
/* ── Section 5: principal bio ── */
.np-about-bio__grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(2rem, 6vw, 6rem);
}
.np-about-bio__creds {
    opacity: 0.7;
    margin-bottom: 2.5rem;
    padding-top: 1em;
}
.np-about-bio__role {
    margin-bottom: 1.5rem;
    opacity: 0.85;
    margin-top: 8em;
}
.np-about-bio__name {
    max-width: 15ch;
}
.np-about-bio__body  { max-width: 90%; }
.np-about-bio__body p { margin-bottom: 1em; opacity: 0.85; }
.np-about-bio__img   { width: 100%; }
.np-about-bio__quote {
    font-size: var(--np-fs-30);
    /*line-height: 1.35;*/
    text-align: right;
    max-width: 40ch;
    margin-left: auto;
    padding: 3em 0 0;
}
.np-about-bio__media {
    max-width: 626px;
    margin-left: auto;
}
/* ── Section 6: team (blush) ── */
.np-about-team { background: var(--np-blush); color: var(--np-text); }
.np-about-team__heading { margin-bottom: clamp(3rem, 7vw, 6rem); }
.np-about-team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  list-style: none;
  padding: 0;
}
.np-about-team__photo {
    aspect-ratio: 430 / 540;
    overflow: hidden;
}
.np-about-team__img  { width: 100%; height: 100%; object-fit: cover; }
.np-about-team__name {
    padding: 0.75em 0 0;
    margin: 0;
}
.np-about-team__role {
    opacity: 0.7;
    line-height: 1em;
}
.team-1 {
    grid-column-start: 3;
}
/* ── About responsive ── */
@media (max-width: 900px) {
  .np-about-dist__grid,
  .np-about-inside__grid,
  .np-about-bio__grid { grid-template-columns: 1fr; }
  .js-anim .np-about-intro.has-hero { min-height: 0; }
  .js-anim .np-about-intro.has-hero .np-about-intro__sticky {
    position: static; height: auto; display: block; overflow: visible;
    padding-block: clamp(6rem, 16vh, 10rem) var(--np-section-y);
  }
  .np-about-intro__media {
    position: static; top: auto; left: auto;
    width: 100%; height: auto; aspect-ratio: 1 / 1;
    margin-top: 2.5rem;
  }
  .np-about-team__grid { grid-template-columns: repeat(2, 1fr); }
  /* Scroll-through unpin moved to the 980px block (matches the JS mobile
     breakpoint) so 901-980 also stacks instead of staying pinned. */
}
/* ==========================================================================
   14b. ABOUT, INSIDE-OUT MOBILE CAROUSEL  (.np-about-inside-m)
   Append this after section 14 in main.css. It adds only new selectors; the
   single rule that touches existing markup is `.np-about-inside { display:
   none; }` inside the mobile query, which swaps the two blocks.
   The desktop block keeps every rule it has today, including the ones already
   sitting in the 980px query that unpin it. Those are now dead code (the
   section is not rendered at that width) but they are harmless, so nothing
   needs deleting and the desktop path stays byte-for-byte what it was.
   overflow-x lives on the track, never on html/body.
   ========================================================================== */
/* Above the breakpoint the mobile block does not exist. */
.np-about-inside-m { display: none; }
@media (max-width: 980px) {
  /* ── Swap the two blocks ── */
  .np-about-inside { display: none; }
  .np-about-inside-m {
    display: block;
    background: var(--np-pink);
    color: var(--np-purple);
    padding-block: var(--np-section-y);
	  padding: 5em 0;
  }
  /* ── Track: the scroll container ──
     Native horizontal overflow + scroll-snap IS the carousel. The JS never
     moves it, it only reads scrollLeft and calls scrollTo. */
  .np-about-inside-m__track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;   /* an over-swipe must not chain to the page */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* legacy Edge */
  }
  .np-about-inside-m__track::-webkit-scrollbar { display: none; }
  /* The track is a tab stop (arrow keys page it), so it needs a visible ring. */
  .np-about-inside-m__track:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: -1px;
  }
  /* ── Slide ──
     flex-basis 100% of the track, so one slide always fills the viewport and
     the snap offset is exactly a multiple of track.clientWidth, which is the
     assumption indexFromScroll() in the JS is built on. Do not add a gap to
     the track or that arithmetic stops holding; the breathing room is the
     slide's own padding. */
  .np-about-inside-m__slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;         /* a hard fling advances one slide, not three */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 3em;
    padding-inline: var(--np-gutter);
  }
  /* Order is DOM order: title, image, body. No `order` property involved, so
     the reading order and the visual order cannot drift apart. */
  .np-about-inside-m__title {
    max-width: 19ch;
    margin: 0;
    color: var(--np-purple);
  }
	.np-about-inside-m__media {
		margin: 0;
		width: min(100%, 44vw);
		aspect-ratio: 503 / 687;
		aspect-ratio: 768 / 1012;
		overflow: hidden;
	}
  .np-about-inside-m__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .np-about-inside-m__body {
    max-width: 49ch;
    font-size: var(--np-fs-16);
  }
  /* ── Dots ──
     The visible dot is a 10px ::before centred inside a 24px button, so the
     tap target clears the 24px minimum without the dot growing. */
  .np-about-inside-m__dots {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 2em;
    color: var(--np-purple);
  }
  .np-about-inside-m__dot {
    position: relative;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
  }
  .np-about-inside-m__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border: 0.5px solid currentColor;
    border-radius: 50%;
    transition: background-color var(--np-dur) var(--np-ease);
  }
  .np-about-inside-m__dot.is-active::before { background: currentColor; }
}
/* ==========================================================================
   15. PROCESS PAGE
   One continuous brown surface. The comp background samples exactly #524B3B,
   which is the existing --np-brown token (variables.css); light text uses
   --np-text-on-dark. The intro reuses the About intro block (classes + the
   NP.aboutHero pin/grow); only its colors are re-scoped here.
   ========================================================================== */
/* Header theme over the brown surface (start class set in header.php,
   live-toggled by NP.header from data-np-header-theme="brown"). */
.np-header.brown-header { color: var(--np-text-on-dark); background: var(--np-brown); }
.np-header.brown-header .np-header__scrim { opacity: 0; }
/* Page surface + type color. */
.np-process { background: var(--np-brown); color: var(--np-text-on-dark); }
.np-process .np-statement { color: var(--np-text-on-dark); }
/* Re-scope the About intro block away from its maroon/pink defaults
   (section 14 paints .np-about-intro purple with pink statements). */
.np-process .np-about-intro { background: var(--np-brown); color: var(--np-text-on-dark); }
.np-process .np-about-intro .np-statement { color: var(--np-text-on-dark); }
/* ── Phases: left label rail + active panel ── */
.np-process-phases__grid {
  display: grid;
  grid-template-columns: minmax(120px, 12%) 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}
.np-process-phases__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75em;
}
/* Same muted-to-strong emphasis as .np-discipline-label. No weight change:
   Legitima ships one cut (500 italic), a heavier face does not exist. */
.np-phase-nav__btn {
  /*font-size: var(--np-fs-16);*/
  color: color-mix(in srgb, var(--np-text-on-dark) 45%, var(--np-brown));
  transition: color var(--np-dur) var(--np-ease);
  padding: 0.1em 0;
}
.np-phase-nav__btn:hover,
.np-phase-nav__btn:focus-visible,
.np-phase-nav__btn.is-active { color: var(--np-text-on-dark); }
/* Panels. display:grid would defeat the UA [hidden] rule (author styles beat
   the UA stylesheet), so [hidden] is re-asserted explicitly. Do not remove. */
.np-phase {
  display: grid;
  grid-template-columns: minmax(220px, 38%) 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}
.np-phase[hidden] { display: none; }
/* Display heading: same recipe as .np-project__eyebrow (display serif,
   fs-30, 0.045em tracking, weight 400). */
.np-phase__title {
  font-family: var(--np-font-display);
  font-size: var(--np-fs-30);
  font-weight: 400;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  line-height: 1.2;
}
.np-phase__body {
  font-size: var(--np-fs-16);
  max-width: 60ch;
  opacity: 0.95;
}
.np-phase__body p { margin-bottom: 1em; }
.np-phase__deliverables { margin-top: 3em; }
.np-phase__deliverables-title {
  /*font-size: var(--np-fs-eyebrow);*/
  margin-bottom: 1em;
}
/* Divider-ruled list. No precedent rule exists in this file; the border color
   uses the same color-mix technique as --np-border, flipped for the dark
   surface (comp divider samples ~30% cream over brown). */
.np-phase__list { max-width: 34ch; }
.np-phase__list li {
  padding-block: 0.65em;
  font-size: var(--np-fs-16);
  border-bottom: 1px solid color-mix(in srgb, var(--np-text-on-dark) 30%, transparent);
}
/* ── Closing CTA: statement, portrait image, statement + link ── */
.np-process-cta__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(2rem, 5vw, 6rem);
}
.np-process-cta__statement { max-width: 14ch; }
.np-process-cta__statement--first { align-self: start; }
.np-process-cta__media {
  width: min(34vw, 560px);
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
}
.np-process-cta__img { width: 100%; height: 100%; object-fit: cover; }
.np-process-cta__aside {
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
  text-align: right;
}
.np-process-cta__link { opacity: 0.9; transition: opacity var(--np-dur) var(--np-ease); }
.np-process-cta__link:hover { opacity: 0.6; }
/* ── Footer on the Process page: stays on the brown surface ──
   The comp keeps the full-width hairline above the footer (verified in the
   image); only the colors flip. The footer icon fill is locked to #524b3b
   against the .cls-1 collision (section 12), which would vanish on brown,
   so it is re-locked to the light color here. */
body.page-template-template-process .np-footer {
  background: var(--np-brown);
  border-top-color: color-mix(in srgb, var(--np-text-on-dark) 40%, transparent);
}
body.page-template-template-process .np-footer__inner { color: var(--np-text-on-dark); }
body.page-template-template-process .np-footer__ornament { color: var(--np-text-on-dark); }
body.page-template-template-process .np-footer__icon .cls-1 { fill: var(--np-text-on-dark); }
body.page-template-template-process .np-footer__ig { color: var(--np-text-on-dark); }
body.page-template-template-process .np-footer__ig a:hover { color: var(--np-pink); }
/* ── Process responsive ── */
@media (max-width: 900px) {
	.np-process-cta__statement { max-width: 15ch; }
	.np-process-cta__aside .np-process-cta__statement {
		max-width: 24ch;
	}
  .np-process-phases__grid { grid-template-columns: 1fr; gap: 2rem; }
  .np-process-phases__nav { flex-direction: row; flex-wrap: wrap; gap: 0.5em 1.5em; }
  .np-phase { grid-template-columns: 1fr; gap: 1.5rem; }
  .np-process-cta__grid { grid-template-columns: 1fr; }
  .np-process-cta__media { width: 100%; }
  /*.np-process-cta__aside { align-items: flex-start; text-align: left; }*/
}
/* ==========================================================================
   16. SINGLE PROJECT  (single-project.php, CPT 'project')
   Blush surface, site default text; the header runs beige-header (the
   header.php else branch plus data-np-header-theme="beige" on the section,
   already in THEME_CLASSES).
   Layering model: the BASE styles are the STACKED VERTICAL presentation and
   serve three consumers at once: no-JS, reduced motion / mobile, and the
   Gallery View lightbox clones. Everything horizontal lives under
   .np-proj.is-pinned, which only NP.projectSections adds (GSAP live,
   viewport over 900px, motion allowed), so a JS failure can never strand the
   visitor in an unscrollable horizontal layout.
   No [hidden] guard needed here (contrast section 15): nothing toggles the
   hidden attribute. The endbar and the lightbox reuse the .np-overlay
   opacity/visibility pattern, which also keeps hidden links unfocusable.
   ========================================================================== */
.np-proj { position: relative; background: var(--np-bg); }
/* ── Base = stacked ─────────────────────────────────────────────────── */
.np-proj-slide { padding-block: clamp(2.5rem, 6svh, 5rem); }
/* Intro slide. Carries its own fixed-header clearance (the global
   padding-top rule in section 5 excludes .np-proj-page). */
.np-proj-slide--intro { padding-top: clamp(6.5rem, 13svh, 8.5rem); }
.np-proj__headline {
  margin-bottom: clamp(1.5rem, 4svh, 3rem);
}
/* No .np-gutter on the grid: the comp runs the main photo flush to the left
   viewport edge. Headline and credits keep the gutter. */
.np-proj-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 50vw) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}
.np-gutter.intro-gutter {
    margin: 0;
    max-width: 1100px;
}
.np-proj-intro__photo { margin: 0; overflow: hidden; aspect-ratio: 8 / 9; }
.np-proj-intro__photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-proj-intro__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5em;
    padding-right: var(--np-gutter);
    padding: 0 var(--np-gutter);
}
/* Same display recipe as .np-project__eyebrow / .np-phase__title. */
.np-proj__eyebrow {
    font-family: var(--np-font-display);
    font-size: var(--np-fs-30);
    font-weight: 400;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    margin: 0;
    line-height: var(--np-lh-display);
}
.np-proj-intro__detail {
    width: min(21vw, 400px);
    margin: 2em 0;
    max-width: 30%;
    width: 30%;
}
.np-proj-intro__detail-img { width: 100%; height: auto; }
.np-proj-intro__copy {
    max-width: 60ch;
    font-size: var(--np-fs-16);
}
.single-project .np-footer {
    display: none;
}
/* Credits: bold small-caps label over an italic serif value. The divider in
   the comp is the footer's existing border-top; nothing extra here. */
.np-proj-credits {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem clamp(2rem, 4vw, 5rem);
    padding-block: clamp(1.5rem, 4svh, 2.5rem);
    width: 100%;
    padding: 2em var(--np-gutter);
    gap: 2em;
}
.np-proj-credit__label {
    display: block;
    padding: 0;
    line-height: 1em;
}
.np-proj-credit__value {
    font-family: var(--np-font-italic);
    line-height: 1em;
	font-size:var(--np-fs-18);
}
/* Section slides. Geometry from the comps: paired layouts inset about 12vw
   each side, large about 48vw / small about 25vw, small vertically centered;
   Horizontal runs gutter to gutter. */
.np-proj-slide--big-left,
.np-proj-slide--big-right {
  display: grid;
  align-items: center;
  gap: clamp(1.5rem, 2.5vw, 3rem);
  padding-inline: 12vw;
}
.np-proj-slide--big-left  { grid-template-columns: minmax(0, 48fr) minmax(0, 26fr); }
.np-proj-slide--big-right { grid-template-columns: minmax(0, 26fr) minmax(0, 48fr); }
/* DOM order is always large then small; Big Right mirrors via order. */
.np-proj-slide--big-right .np-proj-media--large { order: 2; }
.np-proj-media { margin: 0; overflow: hidden; width: 100%; }
.np-proj-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-proj-media--large {
    height: min(64svh, 46vw);
    height: 100%;
    aspect-ratio: 933 /1171;
}
.np-proj-media--small {
    aspect-ratio: 492 / 618;
    height: 50%;
}
.np-proj-slide--horizontal { padding-inline: var(--np-gutter); }
.np-proj-media--wide {
    height: min(64svh, 44vw);
    height: calc(100% - 100px);
    /* margin: auto 0 1em; */
    height: 100%;
    /*padding-top: 92px;*/
}
.np-proj.is-pinned .np-proj-slide:not(:first-child) {
    margin-top: 130px;
    height: calc(100vh - 130px);
}
/* Endbar. Stacked mode: a static row after the content. The Gallery trigger
   is hidden outside pinned mode: without JS it is dead, and on mobile /
   reduced motion the page already IS the vertical list it would open. */
.np-proj__endbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 3svh, 2.5rem) var(--np-gutter);
}
.np-proj:not(.is-pinned) .np-proj__gallery-open { display: none; }
.np-proj__back,
.np-proj__gallery-open { transition: opacity var(--np-dur) var(--np-ease); }
.np-proj__back:hover,
.np-proj__gallery-open:hover { opacity: 0.6; }
/* ── Pinned mode (.is-pinned, added by NP.projectSections only) ──────── */
.np-proj.is-pinned {
  height: 100svh;
  /* Clips the off-screen slides. On the section, never on html/body
     (playbook section 2). */
  overflow: clip;
}
.np-proj.is-pinned .np-proj__track {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
}
.np-proj.is-pinned .np-proj-slide {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  min-width: 0;
  padding-block: 0;
}
.np-proj.is-pinned .np-proj-slide--intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: clamp(5.5rem, 11svh, 7.5rem);
}
p.np-label.ind-proj-label {
    margin: 0;
}
.np-proj.is-pinned .np-proj__headline {
    max-width: 35ch;
}
.np-proj.is-pinned .np-proj-intro__grid { flex: 1 1 auto; min-height: 0; }
.np-proj.is-pinned .np-proj-intro__photo { aspect-ratio: auto; height: 100%; }
.np-proj.is-pinned .np-proj-slide--big-left,
.np-proj.is-pinned .np-proj-slide--big-right { display: grid; align-content: center; }
.np-proj.is-pinned .np-proj-slide--horizontal {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Pinned endbar: overlay across the top of the pinned viewport (comp 5),
   revealed on the last slide via .is-end. Same visibility-delay pattern as
   .np-overlay, so the links are unfocusable until revealed. */
.np-proj.is-pinned .np-proj__endbar {
    position: absolute;
    top: 85px;
    left: 0;
    right: 0;
    z-index: 2;
    padding-block: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--np-dur) var(--np-ease), visibility 0s linear var(--np-dur);
}
.np-proj.is-pinned.is-end .np-proj__endbar {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--np-dur) var(--np-ease), visibility 0s;
    transition-delay: 0.5s;
}
/* ── Gallery View lightbox ───────────────────────────────────────────── */
/* Fixed blush overlay BELOW the header (z 90 vs header 100): the comp shows
   the site header above the open lightbox. The shell is its own scroll
   container ([data-lenis-prevent]); the page behind is locked via
   NP.stopScroll(). It animates opacity/visibility only, never transform, so
   position: fixed inside it (the Close control) stays viewport-fixed. */
.np-gallery {
  position: fixed;
  inset: 0;
  z-index: var(--np-z-gallery);
  background: var(--np-bg);
  color: var(--np-text);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--np-dur) var(--np-ease), visibility 0s linear var(--np-dur);
}
.np-gallery.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--np-dur) var(--np-ease), visibility 0s;
}
.np-gallery__close {
  position: fixed;
  top: 83px;
  right: var(--np-gutter);
  z-index: 2;
  transition: opacity var(--np-dur) var(--np-ease);
}
button.np-italic-label.np-gallery__close {
    position: fixed;
}
.np-gallery__close:hover { opacity: 0.6; }
/* Clones carry the same slide classes, so the BASE stacked rules above style
   them; only the vertical rhythm is re-tuned for the lightbox's generous
   comp spacing. No footer inside the lightbox (verified in the comp). */
/* Masonry: N flex columns inside a grid. Column count is driven by
   --np-gallery-cols, which NP.projectGallery sets, so the CSS and the JS
   distribution can never disagree about how many columns exist. */
.np-gallery__list {
  display: grid;
  grid-template-columns: repeat(var(--np-gallery-cols, 3), minmax(0, 1fr));
  align-items: start;
  gap: clamp(1rem, 2vw, 2rem);
  padding-inline: var(--np-gutter);
  padding-block: clamp(9rem, 18svh, 13rem) clamp(4rem, 10svh, 8rem);
}
.np-gallery__col {
  display: flex;
  flex-direction: column;
  gap: inherit;          /* explicit inherit: gap is not inherited by default */
  min-width: 0;
}
/* Clones drop their .np-proj-media--large / --small / --wide classes on the
   way in (see build()), so none of the fixed heights, aspect-ratios or
   object-fit: cover from the slide layouts apply. Tiles are intrinsic height,
   which is the whole point of masonry: nothing is cropped. */
.np-gallery__item {
  margin: 0;
  width: 100%;
  overflow: hidden;
  background: var(--np-blush-tint);
}
.np-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
}
/* ── Project responsive (stacked only: .is-pinned never exists here) ── */
@media (max-width: 900px) {
	.np-proj__endbar {
		justify-content: center;
	}
  .np-proj-intro__grid { grid-template-columns: 1fr; }
  .np-proj-intro__photo { aspect-ratio: 4 / 5; }
  .np-proj-intro__panel { padding-inline: var(--np-gutter); }
  .np-proj-slide--big-left,
  .np-proj-slide--big-right { grid-template-columns: 1fr; padding-inline: var(--np-gutter); }
  .np-proj-slide--big-right .np-proj-media--large { order: 0; }
  .np-proj-media--large { height: auto; aspect-ratio: 4 / 5; }
  .np-proj-media--small { height: auto; aspect-ratio: 4 / 5; width: 70%; margin-inline: auto; }
  .np-proj-media--wide  { height: auto; aspect-ratio: 3 / 2; }
	.np-proj-credits {
		flex-direction: column;
		gap: 1.25rem;
		display: flex;
		align-items: center;
		padding-top: 5em;
		padding-bottom: 4em;
		text-align: center;
	}
  .np-proj-intro__detail { width: min(60vw, 400px); }
}
/* ==========================================================================
   17. PORTFOLIO PAGE  (template-portfolio.php)
   Headline + Current / Upcoming tabs over a project grid. Light blush page.
   ========================================================================== */
.np-portfolio__head {
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: 3em;
    display: grid;
    grid-template-columns: 1fr auto;
}
.np-portfolio__body { padding-bottom: var(--np-section-y); }
/* ── Tabs (reuse the italic-label parens motif as the selected indicator) ── */
.np-portfolio__tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: flex-end;
    margin: auto 0 0;
}
.np-portfolio__tab {
    color: var(--np-text);
    opacity: 0.4;
    transition: opacity var(--np-dur) var(--np-ease);
    text-align: right;
    line-height: 1.3em;
}
.np-portfolio__tab:hover,
.np-portfolio__tab:focus-visible { opacity: 1; }
.np-portfolio__tab.is-active { opacity: 1; }
/* Active tab wears the parens persistently ("( Current )"). The pseudo-parens
   are absolutely positioned (see the .np-italic-label motif), so this adds no
   layout shift. */
.np-portfolio__tab.is-active::before,
.np-portfolio__tab.is-active::after { opacity: 1; }
.np-portfolio__tab.is-active::before { margin-right: 0.5em; }
.np-portfolio__tab.is-active::after  { margin-left: 0.5em; }
.np-portfolio__panel[hidden] { display: none; }
.np-portfolio__empty { opacity: 0.6; font-style: italic; }
/* ── Project grid ─────────────────────────────────────────────────────── */
.np-portfolio__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0;
    row-gap: 5em;
}
.np-pcard { display: flex; flex-direction: column; }
.np-pcard__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--np-blush-tint);
    aspect-ratio: 899 / 1302;
}
.np-pcard__media:hover{
	opacity:1!important;
}
.np-pcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.np-pcard:nth-child(4n + 2) {
    width: 70%;
    margin: 0 0 0 auto;
}
.np-pcard:nth-child(4n + 3) {
    width: 70%;
}
.np-portfolio__tabs button::before, .np-portfolio__tabs button::after {
    content: none!important;
}
/* Hover image cross-fades in above the featured image; a hair of zoom on both
   keeps it from feeling like a hard cut. */
.np-pcard__img--base { transition: transform 0.7s var(--np-ease); }
.np-pcard__img--hover {
  opacity: 0;
  transition: opacity var(--np-dur) var(--np-ease), transform 0.7s var(--np-ease);
}
.np-pcard:hover .np-pcard__img--hover { opacity: 1; }
.np-pcard:hover .np-pcard__img { transform: scale(1.03); }
.np-pcard__meta {
  padding-top: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.np-pcard__title {
    font-family: var(--np-font-body);
    font-weight: 400;
    line-height: 1.3;
    font-size: var(--np-fs-body);
    letter-spacing: 0;
    padding: 0.25em 0;
    margin: 0;
}
.np-pcard__link {
  margin-top: 0.35rem;
  transition: opacity var(--np-dur) var(--np-ease);
}
a.np-italic-label.np-pcard__link {
    width: fit-content;
}
.np-pcard__link:hover { opacity: 0.6; }
.np-label.np-pcard__index {
    font-family: var(--np-font-display);
    font-size: var(--np-fs-30);
    font-weight: 400;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1em;
}
/* ── Card entrance: replays whenever a panel becomes active (load + tab
      switch). Motion-gated; at rest cards are simply visible. ── */
@media (prefers-reduced-motion: no-preference) {
  .np-portfolio__panel.is-active .np-pcard {
    animation: np-pcard-rise 0.6s var(--np-ease) both;
  }
  .np-portfolio__panel.is-active .np-pcard:nth-child(2) { animation-delay: 0.05s; }
  .np-portfolio__panel.is-active .np-pcard:nth-child(3) { animation-delay: 0.10s; }
  .np-portfolio__panel.is-active .np-pcard:nth-child(4) { animation-delay: 0.15s; }
  .np-portfolio__panel.is-active .np-pcard:nth-child(5) { animation-delay: 0.20s; }
  .np-portfolio__panel.is-active .np-pcard:nth-child(6) { animation-delay: 0.25s; }
  .np-portfolio__panel.is-active .np-pcard:nth-child(n+7) { animation-delay: 0.30s; }
}
@keyframes np-pcard-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
/* ── Portfolio responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .np-portfolio__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .np-portfolio__grid { grid-template-columns: 1fr; }
  .np-portfolio__tabs { gap: 2rem; }
}
/* ==========================================================================
   18. RECOGNITION PAGE  (template-recognition.php)
   Reuses .np-portfolio__head / __tabs / __tab / __body / __panel (head + tabs,
   same look + NP.portfolioTabs engine) and .np-about-team__grid (item layout).
   Only the entry text, link and hover live here.
   ========================================================================== */
.np-recognition__link {
  display: block;
  color: inherit;
}
.np-recognition__date {
    padding: 0.9rem 0 0.15rem;
    /* opacity: 0.6; */
    font-family: var(--np-font-italic);
    font-style: italic;
    font-size: var(--np-fs-18);
    /* font-size: 22px; */
    text-transform: capitalize;
    letter-spacing: 0.01em;
    margin: 0;
    padding: 0.5em 0 0;
    line-height: 1em;
	padding:0;
}
.np-portfolio__head .np-statement {
    max-width: 20ch;
}
.np-recognition__title {
    font-family: var(--np-font-campton);
    font-weight: 500;
    line-height: 1.35;
    text-transform: uppercase;
    font-size: var(--np-fs-label);
    font-size: var(--np-fs-15);
    letter-spacing: 0.12em;
    padding-top: 0.5em;
	padding: 0.75em 0 0;
}
.np-about-team__grid.np-recognition__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3em 1em;
}
.np-recognition__item:nth-child(5n + 1) {
    grid-column-start: 3;
}
/* Hover: subtle image zoom + title underline. Scoped to a linked entry so the
   About team grid (which shares .np-about-team__photo) is untouched; that photo
   already clips overflow. */
.np-recognition__img { transition: transform 0.7s var(--np-ease); }
a.np-recognition__link:hover .np-recognition__img { transform: scale(1.03); }
/* Entrance: same rise as the portfolio cards, replays on tab switch. */
@media (prefers-reduced-motion: no-preference) {
  .np-portfolio__panel.is-active .np-recognition__item {
    animation: np-pcard-rise 0.6s var(--np-ease) both;
  }
  .np-portfolio__panel.is-active .np-recognition__item:nth-child(2) { animation-delay: 0.05s; }
  .np-portfolio__panel.is-active .np-recognition__item:nth-child(3) { animation-delay: 0.10s; }
  .np-portfolio__panel.is-active .np-recognition__item:nth-child(4) { animation-delay: 0.15s; }
  .np-portfolio__panel.is-active .np-recognition__item:nth-child(5) { animation-delay: 0.20s; }
  .np-portfolio__panel.is-active .np-recognition__item:nth-child(n+6) { animation-delay: 0.25s; }
}
/* ==========================================================================
   19. CONTACT PAGE  (template-contact.php)
   Minimal scaffold only, full-bleed background + two-column blocks. The
   background image is set inline on .np-contact; the header stays transparent
   over it. Detailed styling is intentionally left open.
   ========================================================================== */
.np-contact {
    min-height: 100svh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px var(--np-gutter) var(--np-gutter)!important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.np-contact__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: start;
    /* color: var(--np-pink); */
    /* background: var(--np-purple); */
    padding-bottom: var(--np-gutter);
    padding: 0;
    height: calc(100vh - 80px - var(--np-gutter));
    max-height: min(calc(100vh - 80px - var(--np-gutter)),996px);
    width: 100%;
    height: 100%;
    flex: 1;
}
.np-contact__info {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--np-gutter);
    background: var(--np-purple);
    color: var(--np-pink);
    gap: 3em;
	min-height:30vh;
}
.np-contact__headline {
    color: var(--np-pink);
    max-width: 13ch;
}
.np-contact-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    font-size: var(--np-fs-label);
    font-family: var(--np-font-italic);
    letter-spacing: 0.01em;
    line-height: 1.05;
}
.page-template-template-contact .np-header.beige-header {
    background: transparent;
    color: white;
}
.page-template-template-contact footer {
    display: none;
}
.np-contact__ig {
    font-family: var(--np-font-campton);
    font-size: var(--np-fs-15);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0;
    /* line-height: 1em; */
    /* padding: 0; */
}
.np-contact__small {
    max-width: 177px;
    aspect-ratio: 177 / 239;
    overflow: hidden;
    margin: 0 0 0em auto;
    max-width: min(5vw,112px);
}
.np-contact__small img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.np-contact__form {
    background: var(--np-pink);
    padding: var(--np-gutter);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2em;
    justify-content: center;
}
.np-contact__small img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.np-contact__form-embed input,.np-contact__form-embed select, .np-contact__form-embed textarea {
    background-color: #f3cac6!important;
    border-width: 0!important;
    border-radius: 0!important;
    box-shadow: none!important;
	color: var(--np-purple)!important;
}
.np-contact__form-embed input::placeholder, .np-contact__form-embed textarea::placeholder {
    color: var(--np-purple)!important;
}
.np-contact__form-embed .gform-theme--foundation .gform_fields {
    row-gap: 1em;
    column-gap: 2em;
}
.gfield--type-checkbox {
    display: flex!important;
    flex-direction: row!important;
    align-items: center!important;
    line-height: 1em!important;
    flex-wrap: wrap!important;
}
span.gfield_required {
    display: none;
}
.ginput_container.ginput_container_checkbox {
    display: flex!important;
    flex-direction: row;
}
.gfield_checkbox {
    display: flex;
    flex-direction: row!important;
    font-family: 'legitima';
    font-size: var(--np-fs-16)!important;
}
label.gform-field-label.gform-field-label--type-inline {
    font-size: var(--np-fs-16);
    letter-spacing: 0.01em;
    color: var(--np-purple);
    font-family: var(--np-font-italic);
    font-weight: 400;
}
.gform-theme--framework input[type=checkbox]:where(:not(.gform-theme__disable,.gform-theme__disable *):not(.gform-theme__disable-framework,.gform-theme__disable-framework *))::before {
    color: var(--np-purple)!important;
}
.ginput_container.ginput_container_select {
    position: relative;
    display: inline-block;
    width: 100%;
}
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: none!important;
}
.ginput_container.ginput_container_select::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;

  /* Creates a sharp down-triangle */
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--np-purple);

  /* Essential for centering and smooth flipping */
    transform: translateY(-50%);
    transform-origin: center 3px;
    transition: transform 0.2s ease;
    pointer-events: none;
}
legend {
    float: left!important;
    padding-right: 2em!important;
    margin: 0!important;
    color: var(--np-purple)!important;
}
.np-contact__form-embed *:focus {
    outline-color: var(--np-purple)!important;
    outline-width: 1px!important;
}
input.gform_button.button,button.gform_button.button {
    font-family: var(--np-font-italic)!important;
    font-style: italic;
    font-size: var(--np-fs-label)!important;
    padding: 0!important;
    line-height: 1em!important;
    color: var(--np-purple)!important;
    background: transparent!important;
    box-shadow: none!important;
    padding: 0 0.11em 0 0!important;
    position: relative;
    outline: none!important;
    padding:0!important;
	transition:opacity var(--np-duration) var(--np-ease);
}
button.gform_button.button:hover {
    opacity: 0.6!important;
}
.gform-footer.gform_footer.top_label {
    position: relative;
    width: fit-content;
    color: var(--np-purple);
}
@media (max-width: 900px) {
  .np-contact__inner {
    grid-template-columns: 1fr;
    max-height: none;
}
.ginput_container.ginput_container_checkbox {
    padding-top: var(--np-fs-16);
}
}
@media(max-width:980px){
.np-footer {
    border-width: 0.5px;
}
.np-hero {
    height: 40vh;
}
.np-logo--swap .np-logo__full {
    margin: 0;
}
.np-logo__full .np-logo__svg {
    width: 211px;
}
.np-logo__mark .np-logo__svg {
    width: 40px;
	height:40px;
}
.np-studio__intro {
    margin-bottom: 1em;
}
.np-studio__col--text {
    max-width: 38ch;
    margin: 2em 0 2em auto;
}
.np-statement-section--center {
    padding-block: 8em;
}
.np-project {
    display: flex;
    flex-direction: column-reverse;
}
.np-project__photo {
    height: 50vh;
}
.np-press .np-statement--right {
    text-align: right;
    margin: 0 0 0 auto;
}
.np-contact__form-embed *,.np-contact__form-embed *::placeholder {
    font-size: var(--np-fs-16)!important;
}
/*recognition mobile*/
.np-portfolio__head {
    display: flex;
    flex-direction: column;
    gap: 3em;
    padding-bottom: 1em;
}
.np-portfolio__tabs {
    /*display: flex;
    align-items: flex-start;*/
    gap: 0;
}
.np-about-team__grid.np-recognition__grid {
    grid-template-columns: repeat(2,1fr);
}
.np-recognition__item:nth-child(5n + 1) {
    grid-column-start: auto;
}
.np-recognition__item:nth-child(3n + 1) {
    /* grid-column-start: 2; */
}
/*about mobile*/
.js-anim .np-about-inside__panel {
    padding-block: 0;
}
.np-about-inside__media {
    height: 50vh;
}
.js-anim .np-about-inside[data-np-scroll-through] {
    padding-block: 0;
}
.np-about-intro__lead {
    padding-left: 0;
    max-width: 46ch;
}
.np-about-dist__text {
    order: 2;
}
.np-about-dist__grid {gap: 5em;}
.np-about-dist__body {
    padding: 3em 0 5em;
    max-width: 38ch;
}
/* Unpin the scroll-through here (matches the JS 980px mobile branch): panels
   stack, and each panel's text reveals via .is-active as it scrolls in from the
   bottom (NP.aboutScrollThrough adds .is-active on enter, never removes). */
.js-anim .np-about-inside[data-np-scroll-through] { min-height: 0; }
.js-anim .np-about-inside__sticky { position: static; height: auto; display: block; overflow: visible; }
.js-anim .np-about-inside__panel { position: static; opacity: 1; pointer-events: auto; }
.np-about-team__grid {
    grid-template-columns: repeat(2, 1fr);
}
.team-1 {
    grid-column-start: auto;
}
.np-about-intro__inner {
    width: 100%;
}
.np-about-intro__heading {
    margin: 0;
}
.js-anim .np-about-intro.has-hero .np-about-intro__sticky {
    padding-bottom: 0;
}
.np-about-bio__creds {
    margin: 0;
}
.np-about-bio__role {
    margin-top: 2em;
}
.np-about-inside__text {
    padding: 3em var(--np-gutter);
    gap: 2em;
}
/*portfolio page*/
.np-pcard:nth-child(4n + 2) {
    width: 100%;
}
.np-pcard:nth-child(4n + 3) {
    width: 100%;
}
/*individual project*/
.np-proj-intro__panel {
    padding-top: 3em;
}
.np-proj-slide {
    padding-block: 1.5em;
    padding-top: 9em;
    padding: var(--np-gutter) var(--np-gutter) 0;
}
.np-proj-slide--intro {
    padding-top: 9em;
    padding-bottom: 0;
    padding: 68px 0 0;
}
.np-proj-media--wide {
    aspect-ratio: auto;
    padding: 0;
}
}