/*
 * nb-landing.css — New Business landing page
 * All classes prefixed nb- to avoid clashing with prod styles.
 */

/* =========================================================
   CUSTOM NAV
   Replaces the shared #main-navbar on this template. Needed
   because the shared header sits in a Bootstrap .container,
   which recenters at large breakpoints instead of staying a
   fixed distance from the viewport edge — so it can never
   truly align with the hero title/CTA below. This nav uses
   the same edge padding as those instead of a container.
   ========================================================= */

/* Fixed (not absolute) — reference (futuredeluxe.com) keeps its nav pinned
   at the same screen position for the whole hero-fade sequence, same as
   the hero itself below. */
.nb-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 20;
}

/* WordPress admin bar offsets — 32px desktop, 46px mobile (<= 782px).
   The bar pushes html down via margin-top; our fixed nav/hero need to
   compensate so they don't hide under it. */
body.admin-bar .nb-nav { top: 32px; }
body.admin-bar .nb-hero { top: 32px; height: calc(100dvh - 32px); }

@media screen and (max-width: 782px) {
	body.admin-bar .nb-nav  { top: 46px; }
	body.admin-bar .nb-hero { top: 46px; height: calc(100dvh - 46px); }
}

.nb-nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1.75rem;
	padding-bottom: 1.75rem;
}

.nb-nav-logo {
	display: inline-flex;
	color: #fffcfc;
	line-height: 0;
}

.nb-nav-logo svg {
	display: block;
	width: 52px;
	height: 25px;
}

/* Matches #main-navbar .nav-link-simple's actual real styling, white instead
   of dark. Self-contained — not relying on inherited/scoped classes. */
.nb-nav-link {
	color: #fffcfc;
	font-family: "Optima Nova Light", "TWKEverett-Ultralight", sans-serif;
	font-size: 2.25rem;
	font-weight: 400;
	line-height: 2.875rem;
	text-decoration: none;
	letter-spacing: normal;
	text-transform: capitalize;
}

/* =========================================================
   HERO
   ========================================================= */

.nb-main {
	overflow-x: hidden;
}

/* Fixed at the top of the viewport instead of normal flow — reference
   (futuredeluxe.com): the hero stays put on screen and fades via opacity
   while the intro content scrolls up over it, rather than physically
   scrolling away as a solid block. .nb-hero-fade-spacer (right after this
   section in the DOM) reserves the scroll distance the fade plays over;
   the fade itself is driven off that spacer in nb-init.js, scrubbed to
   scroll position — see the comment there for why scrub, not a
   fixed-duration tween. */
.nb-hero {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	overflow: hidden;
	cursor: none;
	z-index: 1;
	/* dark fallback so white title is visible before video renders */
	background-color: #0f0f0f;
}

/* Scroll distance the hero fade plays over. */
.nb-hero-fade-spacer {
	height: 100vh;
}

.nb-hero-wrap {
	position: absolute;
	inset: 0;
}

.nb-hero-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Title wrap — full-width absolute at bottom, container handles inset */
.nb-hero-title-wrap {
	position: absolute;
	bottom: 3.5rem;
	left: 0;
	width: 100%;
	z-index: 5;
	pointer-events: none;
}

.nb-hero-title {
	max-width: 60%;
	margin: 0;
	color: #fff;
	font-family: "Optima Nova Light";
	font-size: clamp(2.25rem, 4vw, 4rem);
	font-weight: 300;
	line-height: 1.1;
}

/* Mobile CTA */
.nb-hero-mobile-cta {
	display: none;
	pointer-events: all;
}

@media (hover: none), (pointer: coarse) {
	.nb-hero { cursor: auto; }

	.nb-hero-mobile-cta {
		display: inline-flex;
		margin-top: 1.25rem;
		padding: 0;
		border: none;
		background: none;
		color: #fffcfc;
		font-family: "Inter";
		font-size: 0.8125rem;
		font-weight: 400;
		letter-spacing: 0.06em;
		line-height: 1;
		text-transform: uppercase;
		text-decoration: underline;
		text-underline-offset: 0.2rem;
		cursor: pointer;
	}

	.nb-hero-title { max-width: 90%; }
}

/* =========================================================
   INTRO ("Shaping Distinction")
   ========================================================= */

/* position+z-index+background so this (and everything after it in normal
   flow) scrolls up and visually covers the fixed, fading .nb-hero behind
   it, instead of the hero's dark background showing through indefinitely. */
.nb-intro {
	position: relative;
	z-index: 2;
	background: var(--Crema, #fffffc);
	padding: 8rem 0 4rem;
}

.nb-intro-title {
	margin: 0 0 1.5rem 0;
	color: var(--Negro-texto, #27282b);
	font-family: "Optima Nova Light";
	font-size: clamp(2rem, 3.5vw, 3.5rem);
	font-weight: 400;
	line-height: 1.1;
}

.nb-intro-text {
	margin: 0;
	color: var(--Negro-texto, #27282b);
	font-family: "Inter";
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.45;
}

@media (max-width: 991.98px) {
	.nb-intro { padding: 2rem 0 2rem; }
	.nb-intro-title { font-size: 2.25rem; margin-bottom: 1rem; }
	.nb-intro-text { font-size: 1.15rem; }
}

/* Intro CTA — short copy + link below the intro text */
.nb-intro-cta {
	margin-top: 2.5rem;
}

.nb-intro-cta-link {
	display: inline-block;
	color: var(--Negro-texto, #27282b);
	font-family: "Inter", sans-serif;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 0.2rem;
}

/* =========================================================
   CASES — full-screen stacked sections (Division-style)
   Desktop: each case fills 100dvh, media covers full section,
   meta centred in the viewport, ScrollTrigger drives fade.
   Mobile: 16:9 aspect ratio stacked vertically, no full-height.
   ========================================================= */

/* position+z-index so this (and everything after it) stays above the fixed
   .nb-hero regardless of exactly how far its opacity fade has progressed —
   .nb-intro already had this, cases-stack didn't, so wherever the hero
   hadn't visually finished fading yet it bled through on top of the case
   content instead of staying safely behind it. */
.nb-cases-stack {
	position: relative;
	z-index: 2;
	display: block;
}

.nb-fullcase {
	position: relative;
	width: 100%;
	height: 100dvh;
	background: #0f0f0f;
}

.nb-fullcase[role="button"] { cursor: pointer; }

/* GSAP ScrollTrigger pins .nb-fullcase-inner directly (see nb-init.js) —
   plain relative box, not CSS sticky. CSS sticky doesn't shrink the
   outer's occupied space when it releases, which left a 100vh dead
   black zone after each case before the next one began. */
.nb-fullcase-inner,
.nb-fullcase-link {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}

/* Media fills the sticky viewport */
.nb-fullcase-media {
	position: absolute;
	inset: 0;
}

.nb-fullcase-media img,
.nb-fullcase-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Gradient overlay */
.nb-fullcase-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
}

/* Left-aligned meta — fixed to the viewport, not the section. The wrapper
   itself is always visible; the client name and title inside it fade in/out
   independently (scroll-scrubbed per section in nb-init.js), client leading
   and title following shortly after, so the client name and title register
   as two separate beats instead of appearing simultaneously — boss
   feedback, 2026-08-06 ("primero aparece Verlasso y despues al tiro Nature
   meets The Kitchen"). */
/* z-index bumped well above the ambient z:2 level used elsewhere on this
   page (.nb-intro, .nb-cases-stack, .nb-cases-footer, .nb-contact) — this
   is position:fixed nested inside .nb-cases-stack, which itself has
   z-index:2 and therefore forms its own local stacking context; that
   means this element's z-index was being evaluated WITHIN that context
   rather than unambiguously on top of the whole page, even though its
   fixed positioning still places it at the true viewport position. A
   fixed text overlay should never be fighting for stacking room — being
   under investigation as a factor in titles going invisible on some
   devices (2026-08-18), suspected but not confirmed. */
.nb-fullcase-meta {
	position: fixed;
	z-index: 15;
	top: 75%;
	left: 5%;
	transform: translateY(-50%);
	text-align: left;
	pointer-events: none;
	width: 55%;
}

.nb-fullcase-client {
	display: block;
	margin-bottom: 0.5rem;
	color: rgba(255, 252, 252, 0.7);
	font-family: "Inter", sans-serif;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0;
	will-change: opacity;
}

/* opacity:0 default matches .nb-fullcase-client — without it, this is fully
   visible from first paint until nb-init.js's word-split JS runs and takes
   over via the per-word spans' own opacity, which is a real gap during page
   load: every case's meta is position:fixed at the same screen spot, so
   every title on the page (client cases + reel) would be stacked on top of
   each other, fully visible, until JS catches up. nb-init.js sets this back
   to opacity:1 once it wraps the words, since after that point visibility
   is controlled entirely by the individual .nb-word spans. */
.nb-fullcase-title {
	margin: 0;
	color: #fffcfc;
	font-family: "Optima Nova Light", "TWKEverett-Ultralight", sans-serif;
	font-size: clamp(2rem, 5vw, 4.5rem);
	font-weight: 300;
	line-height: 1.1;
	opacity: 0;
	will-change: opacity;
}

.nb-fullcase-title .nb-word {
	will-change: opacity;
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}

/* All Projects footer — same stacking reasoning as .nb-cases-stack above */
.nb-cases-footer {
	position: relative;
	z-index: 2;
	padding: 2.5rem 0 6rem;
}

.showcase-work-link {
	text-align: center;
}

.showcase-work-link a {
	color: var(--Negro-Pizarra, #191615);
	font-family: "Inter", sans-serif;
	font-size: 0.8125rem;
	font-weight: 300;
	letter-spacing: 0.08em;
	text-decoration: underline;
	text-underline-offset: 0.2rem;
	text-transform: uppercase;
}

/* Mobile: full-height stacked, matching division.global's reference —
   same 100dvh section as desktop (not a short 16:9 strip) so the video's
   object-fit:cover crops into a tall frame with no black bars. */
@media (max-width: 991.98px) {
	.nb-fullcase-title { font-size: 8.5vw; }
	.nb-fullcase-client { font-size: 1.6rem; }
	.nb-fullcase-meta { width: 85%; left: 4%; top: 75%; }

	.nb-cases-footer { padding: 2rem 0 1.5rem; }
}

/* =========================================================
   CONTACT
   CF7 styles in style.css are scoped to .daf-forms-modal;
   alias them here under .nb-modal--contact (where the form actually
   lives now) so the form looks the same.
   ========================================================= */

/* text-align:center on the inputs (not just the container) matches how the
   other contact forms on the site center — see .daf-forms-modal's
   "col-lg-8 text-center" wrapper in footer.php — since typed/placeholder
   text needs its own text-align to center inside a full-width field. */
.nb-modal--contact input.wpcf7-form-control.wpcf7-text,
.nb-modal--contact input.wpcf7-form-control.wpcf7-email,
.nb-modal--contact textarea.wpcf7-form-control.wpcf7-textarea {
	appearance: none;
	outline: 0;
	font-family: "TWKEverett-Ultralight", "Optima Nova Light", sans-serif;
	font-weight: 200;
	background-color: transparent;
	padding: 1rem 0;
	color: #27282b;
	border-radius: 0;
	cursor: pointer;
	border: 1px solid #27282b;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom-width: 0.1rem;
	width: 100%;
	font-size: 1.5rem;
	line-height: 1.75rem;
	text-align: left;
	text-transform: uppercase;
}

.nb-modal--contact textarea.wpcf7-form-control.wpcf7-textarea {
	height: 8rem;
}

/* Wraps [honeypot][submit][turnstile] (CF7 form-tag order, SEND before the
   widget) — plain vertical stack, centered, with breathing room between them. */
.nb-modal--contact .button-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.nb-modal--contact .wpcf7-not-valid-tip { display: none !important; }

.nb-modal--contact .wpcf7-response-output {
	border-color: #27282b;
	padding: 2rem 0.5rem;
	color: #27282b;
	text-align: center;
	font-family: "Inter";
}

.nb-modal--contact .wpcf7-spinner {
	visibility: hidden;
	background-color: #d1d1d1;
	opacity: 0.75;
	width: 24px;
	height: 24px;
	border-radius: 100%;
	display: block !important;
	margin: 1rem auto;
}

.nb-modal--contact form.submitting .wpcf7-spinner { visibility: visible; }

/* Reset CF7 list markup — some form builders output <ul><li> wrappers */
.nb-modal--contact .wpcf7 ul,
.nb-modal--contact .wpcf7 ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nb-modal--contact .wpcf7-submit {
	appearance: none;
	-webkit-appearance: none;
	margin-top: 2rem;
	padding: 0.75rem 4rem;
	background: transparent;
	color: #27282b !important;
	-webkit-text-fill-color: #27282b;
	font-family: "TWKEverett-Ultralight", "Optima Nova Light", sans-serif;
	font-weight: 200;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 4px;
	border: 1px solid #27282b;
	border-top: none;
	border-left: none;
	border-right: none;
	cursor: pointer;
	transition: all 0.3s linear;
}

/* .has-spinner — see the matching comment in style.css's .daf-forms-modal
   .wpcf7-submit.has-spinner rule; same plugin, same unconditional
   text-hiding bug, applies here too since this modal uses the same CF7
   submit markup. */
.nb-modal--contact .wpcf7-submit.has-spinner {
	color: #27282b !important;
	-webkit-text-fill-color: #27282b !important;
	font-size: 1rem !important;
	line-height: normal !important;
	text-indent: 0 !important;
	overflow: visible !important;
	white-space: normal !important;
	opacity: 1 !important;
}

.nb-modal--contact .wpcf7-submit:hover,
.nb-modal--contact .wpcf7-submit.has-spinner:hover {
	background: #27282b;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}
.nb-modal--contact .wpcf7-submit:disabled { opacity: 0.5; cursor: not-allowed; color: #27282b !important; -webkit-text-fill-color: #27282b; }

@media (max-width: 800px) {
	.nb-modal--contact input.wpcf7-form-control.wpcf7-text,
	.nb-modal--contact input.wpcf7-form-control.wpcf7-email,
	.nb-modal--contact textarea.wpcf7-form-control.wpcf7-textarea {
		font-size: 1.15rem;
		line-height: 1.4rem;
	}
}

/* Section layout ----------------------------------------- */

/* Same stacking reasoning as .nb-cases-stack above */
.nb-contact {
	position: relative;
	z-index: 2;
	padding: 4rem 0 8rem;
}

/* Subtle trigger — plain text + underlined "Get in touch", not a button-looking button */
.nb-contact-trigger {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	white-space: nowrap;
	padding: 0;
	background: none;
	border: none;
	color: var(--Negro-texto, #27282b);
	font-family: "Optima Nova Light", "TWKEverett-Ultralight", sans-serif;
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
}

.nb-contact-lead {
	display: inline;
}

.nb-contact-cta {
	text-decoration: underline;
	text-underline-offset: 0.2rem;
	transition: opacity 0.2s ease;
}

.nb-contact-trigger:hover .nb-contact-cta { opacity: 0.6; }

@media (max-width: 991.98px) {
	.nb-contact { padding: 2rem 0 4rem; text-align: center; }
	.nb-contact-trigger {
		flex-direction: column;
		align-items: center;
		white-space: normal;
		gap: 0.5rem;
		font-size: 1.35rem;
	}
}

/* =========================================================
   HERO MODAL
   ========================================================= */

.nb-modal {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.97);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.nb-modal.is-open {
	opacity: 1;
	pointer-events: all;
}

/* Width is capped by viewport width (94vw / 1600px) AND by a height-derived
   value so a 16:9 box built from it never exceeds 85vh tall — boss feedback,
   2026-08-10: the video read as too small, wanted it as large as the modal
   window allows ("levantar el tamano lo mas posible"). 85vh (up from 60vh)
   still leaves room for the ~2.75rem of title/CTA/close "chrome" above it
   plus centering slack on short viewports (see the 2026-08-06 responsive
   fix — same reasoning, just a bigger budget now). */
.nb-modal-inner {
	position: relative;
	width: min(94vw, calc(85vh / 9 * 16), 1600px);
}

.nb-modal-inner video {
	width: 100%;
	display: block;
	outline: none;
	margin-top: 1rem;
}

/* Case-study link — the case/hero modals no longer render .nb-modal-title
   at all (boss feedback, 2026-08-18: too cluttered, just show "View Case
   Study" alone), so this now sits in that same top row as .nb-modal-close
   instead of below a title that isn't there anymore. Still matches
   .nb-modal-title's own styling (font, size, color, opacity) for whichever
   modal (the reel's) still uses a plain title with no CTA. */
.nb-modal-case-cta {
	display: block;
	position: absolute;
	top: -1.75rem;
	left: 0;
	right: 3rem;
	text-align: left;
	color: #fff;
	font-family: "TWKEverett-Ultralight", "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	opacity: 0.55;
	text-decoration: underline;
	text-underline-offset: 0.2rem;
}

.nb-modal-case-cta:hover {
	opacity: 1;
}

/* Embed responsive wrapper — 16:9. Used for both Vimeo and YouTube iframes.
   margin-top clears the title/CTA sitting above (position:absolute, see
   .nb-modal-case-cta) so the video isn't crowding right up against them. */
.nb-modal-embed-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin-top: 1rem;
}

.nb-modal-embed-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	border: none;
}

.nb-modal-close {
	position: absolute;
	top: -1.75rem;
	right: 0;
	background: transparent;
	border: none;
	color: #fff;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-variant: small-caps;
	letter-spacing: 0.2em;
	text-transform: lowercase;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.nb-modal-close:hover { opacity: 1; }

/* Case/hero title — same row as the close button, left side */
.nb-modal-title {
	position: absolute;
	top: -1.75rem;
	left: 0;
	right: 3rem;
	margin: 0;
	color: #fff;
	font-family: "TWKEverett-Ultralight", "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.55;
}

/* =========================================================
   CONTACT MODAL
   Full-screen like the video modals, but light background —
   the CF7 field styling assumes dark text on a light surface.
   ========================================================= */

.nb-modal--contact {
	background: var(--Crema, #fffffc);
	align-items: flex-start;
	overflow-y: auto;
	padding: 6rem 1.5rem 4rem;
}

.nb-modal--contact .nb-modal-inner {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.nb-modal--contact .nb-modal-close {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	color: #27282b;
	opacity: 1;
}

.nb-contact-modal-title {
	margin: 0 0 3rem 0;
	color: var(--Negro-texto, #27282b);
	font-family: "Optima Nova Light";
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 1.15;
}

/* =========================================================
   CASE OVERLAY MODAL
   Full-screen, loads lazily on click. Renders the same as the
   real case page (single-project.php), minus the WORK breadcrumb.
   Close × floats over the content like the other modals — no
   separate header bar. The content area is the only thing that
   scrolls, so × stays put regardless of scroll position.
   ========================================================= */

.nb-modal--case {
	background: var(--Crema, #fffffc);
	align-items: stretch;
	justify-content: stretch;
	padding: 0;
}

.nb-modal--case .nb-modal-close {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 2;
	color: #27282b;
	opacity: 1;
}

.nb-case-modal-body {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-top: 4rem;
}

.nb-case-modal-loading {
	padding: 4rem 1.5rem;
	text-align: center;
	color: var(--Negro-texto, #27282b);
	font-family: "Inter";
	font-size: 1.1rem;
}

@media (max-width: 991.98px) {
	.nb-modal--contact { padding: 4rem 1.25rem 3rem; }
	.nb-contact-modal-title { font-size: 1.75rem; margin-bottom: 2rem; }
}